/*
  Ringa Create Studio v2
  Clean three-step create flow: choose type, preview, caption, upload progress.
*/

body.ringa-create-page{ overflow:hidden !important; }
body.ringa-create-page .ringa-app{ padding-bottom: var(--ringa-footer-h) !important; }
body.ringa-create-page .ringa-content{ padding:0 !important; }

.ringa-create-studio{
  --rc-pad: 14px;
  --rc-border: rgba(255,255,255,0.11);
  --rc-soft: rgba(255,255,255,0.065);
  --rc-softer: rgba(255,255,255,0.035);
  position: relative !important;
  height: calc((var(--ringa-vh, 1vh) * 100) - var(--ringa-footer-h)) !important;
  overflow: hidden !important;
  color: var(--ringa-text, #fff) !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(255,97,32,0.22), transparent 34%),
    radial-gradient(circle at 88% 5%, rgba(255,61,122,0.16), transparent 28%),
    linear-gradient(180deg, rgba(14,17,27,0.98), rgba(7,9,14,0.98)) !important;
}

.ringa-create-shell{
  height: 100% !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}

.ringa-create-gate{
  height: 100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding: 18px !important;
}
.ringa-create-gate-card{
  width:min(430px, 92vw) !important;
  text-align:center !important;
  border:1px solid var(--rc-border) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035)) !important;
  border-radius: 26px !important;
  padding: 24px !important;
  box-shadow: 0 22px 65px rgba(0,0,0,0.42) !important;
}
.ringa-create-logo{
  width:52px !important;
  height:52px !important;
  border-radius:18px !important;
  margin:0 auto 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight:950 !important;
  color:#fff !important;
  background:linear-gradient(135deg, var(--ringa-accent-2), var(--ringa-accent)) !important;
  box-shadow:0 14px 32px rgba(255,97,32,0.28) !important;
}
.ringa-create-gate h1{ margin:0 0 8px !important; font-size:24px !important; }
.ringa-create-gate p{ margin:0 0 18px !important; color:rgba(255,255,255,0.70) !important; }
.ringa-create-login-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:160px !important;
  min-height:48px !important;
  border-radius:999px !important;
  font-weight:900 !important;
  color:#fff !important;
  text-decoration:none !important;
  background: linear-gradient(135deg, var(--ringa-accent-2), var(--ringa-accent)) !important;
}

.ringa-create-appbar{
  flex: 0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  min-height:70px !important;
  padding: calc(10px + env(safe-area-inset-top)) var(--rc-pad) 10px !important;
  border-bottom:1px solid rgba(255,255,255,0.08) !important;
  background:linear-gradient(180deg, rgba(17,20,31,0.78), rgba(12,14,22,0.52)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
}
.ringa-create-back{
  width:42px !important;
  height:42px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:34px !important;
  line-height:1 !important;
  color:#fff !important;
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  text-decoration:none !important;
}
.ringa-create-kicker{
  font-size:11px !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,0.52) !important;
  font-weight:950 !important;
}
.ringa-create-appbar h1,
.ringa-create-review-top h2{
  margin:2px 0 0 !important;
  font-size:19px !important;
  line-height:1.05 !important;
  font-weight:950 !important;
}
.ringa-create-userchip{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
  max-width:150px !important;
  padding:5px 9px 5px 5px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,0.055) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  color:rgba(255,255,255,0.82) !important;
  font-size:12px !important;
  font-weight:850 !important;
}
.ringa-create-userchip img{ width:30px !important; height:30px !important; border-radius:999px !important; display:block !important; }
.ringa-create-userchip span{ overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }

.ringa-create-stage{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;
  padding: var(--rc-pad) var(--rc-pad) calc(var(--rc-pad) + env(safe-area-inset-bottom)) !important;
}
.ringa-create-stage[hidden],
.ringa-create-video-actions[hidden]{ display:none !important; }

.ringa-create-hero{
  border:1px solid var(--rc-border) !important;
  border-radius:28px !important;
  padding:18px !important;
  margin-bottom:14px !important;
  overflow:hidden !important;
  position:relative !important;
  background:
    radial-gradient(circle at 90% 15%, rgba(255,97,32,0.22), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.028)) !important;
  box-shadow:0 18px 54px rgba(0,0,0,0.30) !important;
}
.ringa-create-hero:after{
  content:"" !important;
  position:absolute !important;
  right:-36px !important;
  bottom:-46px !important;
  width:150px !important;
  height:150px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg, rgba(255,138,72,0.22), rgba(255,97,32,0.06)) !important;
  pointer-events:none !important;
}
.ringa-create-spark{
  display:inline-flex !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  margin-bottom:12px !important;
  font-size:12px !important;
  font-weight:900 !important;
  color:#fff !important;
  background:rgba(255,97,32,0.18) !important;
  border:1px solid rgba(255,138,72,0.28) !important;
}
.ringa-create-hero h2{ margin:0 0 6px !important; font-size:27px !important; letter-spacing:-.035em !important; line-height:1.02 !important; }
.ringa-create-hero p{ max-width:430px !important; margin:0 !important; color:rgba(255,255,255,0.68) !important; line-height:1.38 !important; }

.ringa-create-type-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
}
.ringa-create-type-card{
  -webkit-appearance:none !important;
  appearance:none !important;
  width:100% !important;
  display:grid !important;
  grid-template-columns:58px 1fr !important;
  grid-template-areas:"icon title" "icon copy" !important;
  gap:4px 12px !important;
  align-items:center !important;
  min-height:92px !important;
  padding:14px !important;
  text-align:left !important;
  border-radius:24px !important;
  border:1px solid var(--rc-border) !important;
  color:#fff !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025)) !important;
  box-shadow:0 14px 38px rgba(0,0,0,0.20) !important;
  cursor:pointer !important;
}
.ringa-create-type-card:hover{ transform:translateY(-1px) !important; border-color:rgba(255,138,72,0.32) !important; }
.ringa-create-type-card:active{ transform:scale(.99) !important; }
.ringa-create-type-icon{
  grid-area:icon !important;
  width:54px !important;
  height:54px !important;
  border-radius:18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#fff !important;
  background:linear-gradient(135deg, rgba(255,138,72,0.95), rgba(255,97,32,0.92)) !important;
  box-shadow:0 10px 24px rgba(255,97,32,0.20) !important;
}
.ringa-create-type-icon svg{ width:28px !important; height:28px !important; fill:none !important; stroke:currentColor !important; stroke-width:2 !important; stroke-linecap:round !important; stroke-linejoin:round !important; }
.ringa-create-type-card strong{ grid-area:title !important; font-size:17px !important; font-weight:950 !important; }
.ringa-create-type-card small{ grid-area:copy !important; color:rgba(255,255,255,0.62) !important; line-height:1.32 !important; font-size:13px !important; }

.ringa-create-video-actions{
  display:flex !important;
  gap:10px !important;
  margin-top:12px !important;
}
.ringa-create-video-actions .ringa-pill{ flex:1 1 0 !important; min-height:44px !important; justify-content:center !important; }

.ringa-create-review{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}
.ringa-create-review-top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}
.ringa-create-link{
  -webkit-appearance:none !important;
  appearance:none !important;
  border:none !important;
  background:transparent !important;
  color:rgba(255,255,255,0.72) !important;
  font-weight:900 !important;
  padding:9px 8px !important;
  cursor:pointer !important;
}
.ringa-create-link.is-strong{ color:#fff !important; }

.ringa-create-composer-card{
  border-radius:26px !important;
  border:1px solid var(--rc-border) !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)) !important;
  box-shadow:0 20px 56px rgba(0,0,0,0.32) !important;
  padding:12px !important;
}
.ringa-create-preview-frame{
  min-height:240px !important;
  max-height:calc((var(--ringa-vh, 1vh) * 100) - 330px) !important;
  border-radius:22px !important;
  background:rgba(0,0,0,0.32) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  overflow:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.ringa-create-empty-preview{
  color:rgba(255,255,255,0.55) !important;
  font-weight:850 !important;
  text-align:center !important;
  padding:20px !important;
}
.ringa-create-video-preview{
  width:100% !important;
  max-height:100% !important;
  display:block !important;
  background:#000 !important;
}
.ringa-create-text-preview{
  width:100% !important;
  min-height:230px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:20px !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,97,32,0.22), transparent 34%),
    radial-gradient(circle at 75% 85%, rgba(255,61,122,0.12), transparent 28%) !important;
}
.ringa-create-text-preview-title{ font-size:24px !important; font-weight:950 !important; }
.ringa-create-text-preview-sub{ color:rgba(255,255,255,0.62) !important; margin-top:6px !important; }

.ringa-create-gallery-preview{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:8px !important;
  padding:8px !important;
  align-self:flex-start !important;
}
.ringa-create-gallery-preview.is-single{ display:block !important; padding:0 !important; }
.ringa-create-gallery-item{
  position:relative !important;
  aspect-ratio:1/1 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:#000 !important;
  border:1px solid rgba(255,255,255,0.08) !important;
}
.ringa-create-gallery-preview.is-single .ringa-create-gallery-item{ aspect-ratio:4/5 !important; border-radius:22px !important; }
.ringa-create-gallery-item img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.ringa-create-gallery-item button{
  position:absolute !important;
  top:8px !important;
  right:8px !important;
  width:30px !important;
  height:30px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,0.18) !important;
  color:#fff !important;
  background:rgba(0,0,0,0.58) !important;
  font-size:20px !important;
  line-height:1 !important;
}
.ringa-create-gallery-item span{
  position:absolute !important;
  left:8px !important;
  bottom:8px !important;
  min-width:24px !important;
  height:24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  color:#fff !important;
  background:rgba(0,0,0,0.55) !important;
  font-size:12px !important;
  font-weight:950 !important;
}

.ringa-create-caption-label{
  display:block !important;
  margin:14px 2px 7px !important;
  font-size:12px !important;
  font-weight:950 !important;
  color:rgba(255,255,255,0.64) !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
}
.ringa-create-caption-input{
  width:100% !important;
  min-height:92px !important;
  resize:vertical !important;
  border-radius:18px !important;
  outline:none !important;
  border:1px solid rgba(255,255,255,0.11) !important;
  background:rgba(255,255,255,0.055) !important;
  color:#fff !important;
  padding:13px 14px !important;
  font:inherit !important;
  line-height:1.38 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.ringa-create-caption-input:focus{
  border-color:rgba(255,138,72,0.48) !important;
  box-shadow:0 0 0 3px rgba(255,97,32,0.14), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.ringa-create-caption-meta{
  text-align:right !important;
  font-size:12px !important;
  color:rgba(255,255,255,0.48) !important;
  margin:5px 2px 0 !important;
}
.ringa-create-message{
  margin-top:10px !important;
  padding:10px 12px !important;
  border-radius:16px !important;
  font-weight:850 !important;
  font-size:13px !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  background:rgba(255,255,255,0.055) !important;
}
.ringa-create-message.is-error{ color:#ffd7d7 !important; border-color:rgba(255,80,80,0.32) !important; background:rgba(255,80,80,0.10) !important; }
.ringa-create-message.is-info{ color:rgba(255,255,255,0.82) !important; }

.ringa-upload-progress{
  margin-top:12px !important;
  padding:10px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,0.045) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
}
.ringa-upload-bar{
  height:9px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,0.08) !important;
  overflow:hidden !important;
}
.ringa-upload-bar-inner{
  height:100% !important;
  border-radius:999px !important;
  background:linear-gradient(135deg, var(--ringa-accent-2), var(--ringa-accent)) !important;
  box-shadow:0 0 22px rgba(255,97,32,0.38) !important;
  transition:width .18s ease !important;
}
.ringa-upload-progress-text{
  display:flex !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-top:8px !important;
  color:rgba(255,255,255,0.68) !important;
  font-size:12px !important;
  font-weight:850 !important;
}
.ringa-create-submit-row{
  display:flex !important;
  gap:10px !important;
  margin-top:14px !important;
}
.ringa-create-submit-row .ringa-pill{
  min-height:46px !important;
  justify-content:center !important;
}
.ringa-create-submit-row .ringa-pill:first-child{ flex:0 0 auto !important; }
.ringa-create-post-btn{ flex:1 1 auto !important; }
.ringa-create-post-btn[disabled]{ opacity:.65 !important; cursor:wait !important; }

.ringa-create-processing{
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:18px !important;
}
.ringa-processing-card{
  width:min(520px, 94vw) !important;
  border-radius:24px !important;
  padding:18px !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.032)) !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  box-shadow:0 22px 65px rgba(0,0,0,0.42) !important;
}
.ringa-processing-orb{
  width:46px !important;
  height:46px !important;
  border-radius:16px !important;
  margin-bottom:12px !important;
  background:linear-gradient(135deg, var(--ringa-accent-2), var(--ringa-accent)) !important;
  box-shadow:0 14px 32px rgba(255,97,32,0.28) !important;
}
.ringa-processing-title{ font-weight:950 !important; font-size:19px !important; margin-bottom:6px !important; }
.ringa-processing-sub{ opacity:.78 !important; line-height:1.36 !important; }
.ringa-processing-meta{ margin-top:10px !important; font-size:12px !important; opacity:.8 !important; display:flex !important; justify-content:space-between !important; gap:10px !important; }

@media (min-width: 680px){
  .ringa-create-type-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
  .ringa-create-type-card{ grid-template-columns:1fr !important; grid-template-areas:"icon" "title" "copy" !important; align-content:start !important; min-height:176px !important; }
  .ringa-create-video-actions{ max-width:520px !important; margin-left:auto !important; margin-right:auto !important; }
  .ringa-create-stage{ padding-left:20px !important; padding-right:20px !important; }
  .ringa-create-hero{ padding:22px !important; }
  .ringa-create-hero h2{ font-size:32px !important; }
  .ringa-create-gallery-preview{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
}

/* Create auth hardfix v1.0.18.4.30
   Earlier Create Studio CSS used display:flex !important on the login gate.
   That beat inline display:none and kept showing the Login card even for logged-in users.
   These state rules are placed last so the app shell wins cleanly. */
.ringa-create-studio[data-auth-state="in"] .ringa-create-gate,
.ringa-create-gate[hidden]{
  display:none !important;
}
.ringa-create-studio[data-auth-state="in"] .ringa-create-shell{
  display:flex !important;
}
.ringa-create-studio[data-auth-state="out"] .ringa-create-gate{
  display:flex !important;
}
.ringa-create-studio[data-auth-state="out"] .ringa-create-shell,
.ringa-create-shell[hidden]{
  display:none !important;
}

/* Create Studio v2.2 mobile control fix
   Keep the upload / post controls in the page flow. Users must be able to scroll
   the submit button and progress meter fully above the fixed app footer. */
.ringa-create-stage{
  padding-bottom: calc(var(--rc-pad) + 190px + env(safe-area-inset-bottom)) !important;
}
.ringa-create-review .ringa-create-composer-card{
  padding-bottom: 20px !important;
}
.ringa-create-submit-row{
  position: relative !important;
  bottom: auto !important;
  z-index: 3 !important;
  padding: 0 0 14px !important;
  margin: 20px 0 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
.ringa-create-submit-row.is-posting{
  opacity: .92 !important;
}
.ringa-upload-progress{
  position: relative !important;
  z-index: 3 !important;
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}
@media (max-width: 520px){
  .ringa-create-studio{
    height: calc((var(--ringa-vh, 1vh) * 100) - var(--ringa-footer-h)) !important;
  }
  .ringa-create-stage{
    padding-bottom: calc(210px + env(safe-area-inset-bottom)) !important;
  }
  .ringa-create-composer-card{
    border-radius: 24px !important;
  }
  .ringa-create-submit-row{
    gap: 12px !important;
  }
  .ringa-create-submit-row .ringa-pill{
    min-height: 56px !important;
  }
  .ringa-create-submit-row .ringa-pill:first-child{
    max-width: 34% !important;
  }
}

/* Processing screen: never feel frozen at 98%. */
.ringa-processing-actions{
  display:flex !important;
  gap:10px !important;
  margin-top:14px !important;
  flex-wrap:wrap !important;
}
.ringa-processing-actions .ringa-pill{
  min-height:42px !important;
  justify-content:center !important;
}
.ringa-processing-actions .ringa-pill.is-primary{
  flex:1 1 auto !important;
}

/* v1.0.18.4.34 processing ETA */
.ringa-processing-eta{
  margin-top:8px !important;
  color:rgba(255,255,255,.72) !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1.35 !important;
}