:root{
  --bg:#07040e;
  --bg2:#12091d;
  --bg3:#1b0d28;

  --text:#f8f2ff;
  --muted:#ddd0f2;
  --soft:#bba9d6;

  --gold:#efb455;
  --gold2:#d88b35;
  --amber:#ffd893;

  --pink:#ff7cc8;
  --rose:#ff93bf;
  --violet:#9f79ff;
  --violet2:#c48dff;
  --purple:#7f5dff;
  --orange:#ff9851;
  --copper:#cf7b47;

  --shadow:0 18px 40px rgba(0,0,0,.20);
  --shadowSoft:0 10px 22px rgba(0,0,0,.12);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  background:
    radial-gradient(circle at 50% 10%, rgba(159,121,255,.12), transparent 28%),
    radial-gradient(circle at 84% 22%, rgba(255,152,81,.08), transparent 24%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg2) 58%, #06030b 100%);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

body{
  min-height:100vh;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

button,select,input{font:inherit}
button{border:none;cursor:pointer}
.hidden{display:none !important}

.appShell{
  position:relative;
  width:min(1180px,100%);
  margin:0 auto;
  padding:8px 8px 14px;
}

.screen{
  position:relative;
  width:100%;
}

.screenAccess,
.screenApp{
  min-height:100vh;
  min-height:100dvh;
  position:relative;
}

.accessBackdrop,
.appBackdrop{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

/* ===== CAMADA 1: BASE ===== */

.bgBaseGlow,
.bgPaint,
.bgRibbon,
.bgBottomWave{
  position:absolute;
  pointer-events:none;
}

.bgBaseGlow{
  filter:blur(0px);
  opacity:.08;
}

.bgBaseGlowA{
  width:420px;
  height:260px;
  left:-90px;
  top:54px;
  background:radial-gradient(circle, rgba(131,86,255,.22), transparent 68%);
}

.bgBaseGlowB{
  width:420px;
  height:260px;
  right:-110px;
  top:180px;
  background:radial-gradient(circle, rgba(255,145,74,.18), transparent 68%);
}

.bgBaseGlowC{
  width:560px;
  height:260px;
  left:8%;
  bottom:-8px;
  background:radial-gradient(circle, rgba(255,111,187,.12), transparent 72%);
}

.bgBaseGlowD{
  width:340px;
  height:180px;
  left:-50px;
  top:90px;
  background:radial-gradient(circle, rgba(149,97,255,.14), transparent 72%);
}

.bgBaseGlowE{
  width:360px;
  height:180px;
  right:-30px;
  bottom:18px;
  background:radial-gradient(circle, rgba(255,171,92,.10), transparent 72%);
}
/* ===== CAMADA 2: PINTURA CÓSMICA ===== */

.bgPaint{
  border-radius:999px;
  filter:blur(0px);
  opacity:.08;
}

.bgPaintA{
  width:400px;
  height:94px;
  left:-30px;
  top:128px;
  transform:rotate(-15deg);
  background:linear-gradient(90deg,
    rgba(255,110,190,.00) 0%,
    rgba(255,110,190,.34) 16%,
    rgba(255,176,90,.34) 52%,
    rgba(140,108,255,.28) 100%);
}

.bgPaintB{
  width:440px;
  height:110px;
  right:-70px;
  top:248px;
  transform:rotate(-18deg);
  background:linear-gradient(90deg,
    rgba(255,176,90,.00) 0%,
    rgba(255,176,90,.28) 20%,
    rgba(255,120,194,.24) 56%,
    rgba(140,108,255,.22) 100%);
}

.bgPaintC{
  width:560px;
  height:136px;
  left:6%;
  bottom:104px;
  transform:rotate(-8deg);
  background:linear-gradient(90deg,
    rgba(255,176,90,.00) 0%,
    rgba(255,176,90,.14) 12%,
    rgba(255,120,194,.20) 34%,
    rgba(140,108,255,.24) 72%,
    rgba(255,176,90,.14) 100%);
}

.bgPaintD{
  width:280px;
  height:86px;
  left:34%;
  top:94px;
  transform:rotate(-10deg);
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,210,126,.18) 32%,
    rgba(255,124,200,.16) 60%,
    rgba(140,108,255,.12) 100%);
}

.bgPaintE{
  width:260px;
  height:76px;
  left:-12px;
  top:120px;
  transform:rotate(-14deg);
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,176,90,.16) 34%,
    rgba(140,108,255,.12) 100%);
}

.bgPaintF{
  width:320px;
  height:88px;
  right:-26px;
  bottom:82px;
  transform:rotate(-12deg);
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,124,200,.14) 34%,
    rgba(255,176,90,.16) 70%,
    rgba(140,108,255,.10) 100%);
}

.bgRibbon{
  height:2px;
  border-radius:999px;
  opacity:.82;
  transform:rotate(-16deg);
}

.bgRibbonA{
  width:500px;
  right:-90px;
  top:170px;
  background:linear-gradient(90deg, transparent, rgba(255,171,92,.42), transparent);
  box-shadow:0 0 18px rgba(255,171,92,.12);
}

.bgRibbonB{
  width:560px;
  left:-118px;
  bottom:200px;
  background:linear-gradient(90deg, transparent, rgba(159,121,255,.28), transparent);
  box-shadow:0 0 18px rgba(159,121,255,.10);
}

.bgRibbonC{
  width:320px;
  left:4px;
  bottom:128px;
  background:linear-gradient(90deg, transparent, rgba(255,201,125,.18), transparent);
}

.bgRibbonD{
  width:280px;
  right:-30px;
  top:92px;
  background:linear-gradient(90deg, transparent, rgba(255,171,92,.18), transparent);
}

.bgRibbonE{
  width:320px;
  left:-20px;
  bottom:52px;
  background:linear-gradient(90deg, transparent, rgba(159,121,255,.18), transparent);
}
/* ===== CAMADA 3: RODAPÉ VISUAL ===== */

.bgBottomWave{
  border-radius:999px;
  filter:blur(0px);
  opacity:0;
}

.bgBottomWaveA{
  width:520px;
  height:120px;
  left:-44px;
  bottom:-10px;
  transform:rotate(-8deg);
  background:linear-gradient(90deg,
    rgba(255,176,90,.00) 0%,
    rgba(255,176,90,.28) 14%,
    rgba(255,120,194,.22) 42%,
    rgba(140,108,255,.18) 100%);
}

.bgBottomWaveB{
  width:560px;
  height:130px;
  right:-60px;
  bottom:-6px;
  transform:rotate(-10deg);
  background:linear-gradient(90deg,
    rgba(140,108,255,.00) 0%,
    rgba(140,108,255,.18) 12%,
    rgba(255,120,194,.20) 44%,
    rgba(255,176,90,.28) 84%,
    rgba(255,176,90,.00) 100%);
}

.bgBottomWaveC{
  width:660px;
  height:150px;
  left:14%;
  bottom:-44px;
  transform:rotate(-4deg);
  background:linear-gradient(90deg,
    rgba(255,255,255,.00) 0%,
    rgba(255,176,90,.14) 24%,
    rgba(255,120,194,.18) 48%,
    rgba(140,108,255,.16) 72%,
    rgba(255,255,255,.00) 100%);
}

.bgBottomWaveD{
  width:460px;
  height:100px;
  right:-36px;
  bottom:-12px;
  transform:rotate(-8deg);
  background:linear-gradient(90deg,
    rgba(255,176,90,.00) 0%,
    rgba(255,176,90,.22) 22%,
    rgba(255,120,194,.14) 52%,
    rgba(140,108,255,.12) 100%);
}

/* ===== TOPO / MARCA ===== */

.accessTopRow{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:2px;
  padding-top:4px;
}

.topSpacer{
  width:72px;
  height:1px;
}

.langDock{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  min-width:72px;
}

.langSel{
  font:inherit;
}

.compactLangSel{
  min-height:36px;
  min-width:68px;
  padding:0 12px;
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(56,32,79,.64), rgba(34,22,48,.72));
  color:#fff;
  border:1px solid rgba(255,176,90,.20);
  box-shadow:var(--shadowSoft);
  font-weight:900;
  outline:none;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.accessPanel{
  position:relative;
  z-index:2;
}

.accessPanelCosmic{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-height:calc(100vh - 34px);
  min-height:calc(100dvh - 34px);
  padding:0 14px 10px;
}

.brandCenter{
  position:relative;
  z-index:4;
  display:flex;
  justify-content:center;
  align-items:center;
}

.brandCenterTop{
  margin-top:2px;
  margin-bottom:12px;
}

.brandCenterName{
  font-size:clamp(2.1rem,5vw,3.05rem);
  line-height:1;
  font-weight:1000;
  letter-spacing:-.045em;
  text-align:center;
  background:linear-gradient(90deg,#fff8ff 0%, #f0dcff 28%, #ffcf7c 74%, #ff9851 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* ===== PRIMEIRA TELA ===== */

.accessHeroText{
  position:relative;
  z-index:4;
  width:min(100%,720px);
  text-align:center;
}

.accessHeroTextHigh{
  margin-top:0;
}

.accessHeadline{
  margin:0;
  color:#fff7ff;
  font-size:clamp(1.7rem,4.6vw,2.55rem);
  line-height:1.02;
  letter-spacing:-.04em;
  font-weight:1000;
  text-shadow:0 2px 12px rgba(0,0,0,.14);
}

.accessSubline{
  margin:9px 0 0;
  color:#eadff8;
  font-size:.98rem;
  line-height:1.2;
  font-weight:800;
}

.accessLimits{
  margin:12px auto 0;
  max-width:100%;
  width:min(100%,560px);
  min-height:44px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:999px;
  background:rgba(255,255,255,.018);
  border:1px solid rgba(255,184,96,.14);
  color:#d6c8ec;
  font-size:.9rem;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

.accessButtons{
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  width:min(100%,560px);
}

.accessButtonsHigh{
  margin-top:14px;
}

.mainCtaBtn,
.secondaryCtaBtn,
.ghostCtaBtn{
  min-height:48px;
  border-radius:18px;
  padding:0 16px;
  font-size:.98rem;
  font-weight:1000;
  letter-spacing:-.01em;
  box-shadow:var(--shadowSoft);
}

.accessButtons > * + *{
  margin-top:10px;
}

.mainCtaBtn{
  background:linear-gradient(180deg, rgba(255,208,102,.98), rgba(231,159,54,.98));
  color:#140f12;
  border:1px solid rgba(255,255,255,.12);
}

.secondaryCtaBtn{
  background:
    linear-gradient(180deg, rgba(48,24,68,.18), rgba(29,16,40,.26));
  color:#fff;
  border:1px solid rgba(255,176,90,.16);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.ghostCtaBtn{
  background:
    linear-gradient(180deg, rgba(43,22,61,.14), rgba(24,14,35,.22));
  color:#fff;
  border:1px solid rgba(255,176,90,.14);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.accessMeta{
  position:relative;
  z-index:4;
}

.compactMeta{
  width:min(100%,560px);
  margin-top:12px;
  padding:10px 14px;
  border-radius:20px;
  background:rgba(255,255,255,.016);
  border:1px solid rgba(255,255,255,.05);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

.accessMetaBottom{
  margin-top:14px;
}

.metaLine{
  color:#d8caef;
  font-size:.94rem;
  font-weight:900;
  line-height:1.22;
}

.metaLine + .metaLine{
  margin-top:4px;
}
/* ===== SEGUNDA TELA ===== */

.topbar{
  position:relative;
  z-index:3;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-top:6px;
  margin-bottom:8px;
}

.compactTopbar{
  margin-bottom:8px;
}

.brandBlock{
  min-width:0;
}

.brandBlockCompact{
  max-width:520px;
}

.brandTitle{
  font-size:clamp(2rem,5vw,3rem);
  line-height:1;
  font-weight:1000;
  letter-spacing:-.045em;
  color:#f4eefc;
}

.brandTitleSmall{
  font-size:clamp(1.45rem,3.4vw,1.9rem);
}

.brandSubtitle{
  margin-top:6px;
  color:#d7caef;
  font-weight:800;
  line-height:1.08;
  font-size:clamp(1rem,2.4vw,1.06rem);
}

.brandSubtitleSmall{
  font-size:clamp(.88rem,1.8vw,.94rem);
  color:#d1c2ea;
}

.miniLimits{
  margin-top:6px;
  color:#c7b7e2;
  font-weight:900;
  font-size:.84rem;
}

.topRightSlot{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  min-width:76px;
}

.topGhostBtn{
  min-height:40px;
  padding:0 16px;
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(56,32,79,.64), rgba(34,22,48,.72));
  color:#fff;
  border:1px solid rgba(255,176,90,.18);
  box-shadow:var(--shadowSoft);
  font-weight:900;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.mainGrid{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(0,1fr) 332px;
  gap:12px;
}

.compactGridShell{
  align-items:start;
}

.displayColumn{
  min-width:0;
}

.topActions{
  display:grid;
}

.compactTopActions{
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:10px;
}

.topActionBtn{
  min-height:42px;
  border-radius:999px;
  padding:0 14px;
  font-size:.94rem;
  font-weight:1000;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(48,24,68,.18), rgba(29,16,40,.26));
  border:1px solid rgba(255,176,90,.16);
  box-shadow:var(--shadowSoft);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.displayCard{
  position:relative;
}

.compactDisplayCard{
  background:
    linear-gradient(180deg, rgba(27,18,42,.36), rgba(18,12,29,.42));
  border:1px solid rgba(255,255,255,.06);
  border-radius:24px;
  padding:8px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.displayStage{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  background:#000;
  aspect-ratio:16 / 9;
  border:1px solid rgba(255,255,255,.08);
}

.mainVideo{
  width:100%;
  height:100%;
  display:block;
  background:#000;
  object-fit:contain;
}
/* ===== HUD / MARKS / TRIM ===== */

.inlineCloseBtn{
  position:absolute;
  top:10px;
  right:10px;
  z-index:4;
  width:38px;
  height:38px;
  border-radius:999px;
  background:rgba(19,12,30,.90);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadowSoft);
  font-size:1.05rem;
  font-weight:1000;
}

.statusOverlay,
.overlayStatusOverlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.24);
  z-index:3;
}

.statusOverlayText,
.overlayStatusOverlayText{
  padding:10px 14px;
  border-radius:14px;
  background:rgba(19,12,30,.92);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-weight:1000;
  box-shadow:var(--shadowSoft);
}

.displayHud{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.hudPillBtn{
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:rgba(19,12,30,.88);
  color:#fff;
  border:1px solid rgba(255,176,90,.18);
  box-shadow:var(--shadowSoft);
  font-weight:1000;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.recDot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ff4764;
  box-shadow:0 0 12px rgba(255,71,100,.48);
}

.markIconWrap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.markIcon{
  font-size:1rem;
  line-height:1;
}

.markToast{
  position:absolute;
  left:50%;
  bottom:62px;
  transform:translateX(-50%);
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(19,12,30,.92);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  box-shadow:var(--shadowSoft);
  font-weight:1000;
}

.markToastStar{
  line-height:1;
}

.marksStripWrap{
  margin-top:8px;
  padding:8px;
  border-radius:16px;
  background:rgba(255,255,255,.014);
  border:1px solid rgba(255,255,255,.05);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.marksStripHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.marksTitle{
  font-size:.98rem;
  font-weight:1000;
  color:#f6efff;
}

.clearInlineBtn{
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:1000;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(55,32,78,.24), rgba(29,18,41,.34));
  border:1px solid rgba(255,176,90,.16);
  box-shadow:var(--shadowSoft);
}

.marksStrip{
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom:2px;
  color:#dbcdf1;
  font-weight:800;
  scrollbar-width:none;
}

.marksStrip::-webkit-scrollbar{display:none}

.trimIntro{
  margin-bottom:8px;
}

.trimHint{
  color:#d9cbef;
  font-size:.92rem;
  line-height:1.3;
  font-weight:800;
}
.trimInlineBar,
.trimOverlayBar{
  position:relative;
  height:48px;
  border-radius:16px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(19,12,30,.82);
  border:1px solid rgba(255,255,255,.08);
}

.trimInlineBar{
  cursor:pointer;
}

.trimDim{
  position:absolute;
  top:0;
  bottom:0;
  background:rgba(0,0,0,.38);
  z-index:1;
}

.trimDimLeft{left:0}
.trimDimRight{right:0}

.trimActiveRange{
  position:absolute;
  top:0;
  bottom:0;
  z-index:2;
  border-left:2px solid rgba(255,196,118,.90);
  border-right:2px solid rgba(255,196,118,.90);
  background:
    linear-gradient(180deg, rgba(255,184,96,.08), rgba(159,121,255,.05));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

.trimHandle{
  position:absolute;
  top:6px;
  bottom:6px;
  width:12px;
  z-index:3;
  border-radius:999px;
  background:linear-gradient(180deg, #ffd995, #efad59);
  box-shadow:0 0 14px rgba(255,181,80,.20);
}

.trimRange{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  appearance:none;
  background:transparent;
  z-index:4;
  pointer-events:none;
}

.trimRangeStart,
.trimRangeEnd{
  pointer-events:auto;
}

.trimRange::-webkit-slider-thumb{
  appearance:none;
  width:18px;
  height:38px;
  border:none;
  border-radius:12px;
  background:transparent;
  cursor:ew-resize;
}

.trimRange::-moz-range-thumb{
  width:18px;
  height:38px;
  border:none;
  border-radius:12px;
  background:transparent;
  cursor:ew-resize;
}

.trimInlineMeta{
  margin-top:8px;
  display:grid;
  grid-template-columns:60px 1fr 60px;
  align-items:center;
  gap:8px;
}

.trimInlineMetaOverlay{
  margin-top:10px;
}

.trimMiniTime{
  color:#f6f0ff;
  font-size:.88rem;
  font-weight:1000;
  text-align:center;
}

.trimSummary{
  color:#d5c8eb;
  font-size:.86rem;
  font-weight:900;
  text-align:center;
  line-height:1.22;
}

.compactGenerateBtn{
  width:100%;
  min-height:44px;
  margin-top:4px;
  border-radius:16px;
  padding:0 16px;
  background:linear-gradient(180deg, rgba(203,136,255,.96), rgba(146,110,255,.96));
  color:#140f1b;
  font-size:.94rem;
  font-weight:1000;
  letter-spacing:-.01em;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 14px 24px rgba(146,110,255,.16),
    inset 0 1px 0 rgba(255,255,255,.26);
}

.sidePanel{
  min-width:0;
}

.compactSideCard{
  background:
    linear-gradient(180deg, rgba(27,18,42,.34), rgba(18,12,29,.40));
  border:1px solid rgba(255,255,255,.06);
  border-radius:26px;
  padding:10px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.compactButtonGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.mainBtn{
  min-height:42px;
  border-radius:16px;
  padding:0 10px;
  font-size:.9rem;
  font-weight:1000;
  color:#fff;
  border:1px solid rgba(255,176,90,.16);
  box-shadow:var(--shadowSoft);
}

.mainBtn.softBtn{
  background:
    linear-gradient(180deg, rgba(48,24,68,.24), rgba(29,16,40,.32));
}

.mainBtn.ghost{
  background:
    linear-gradient(180deg, rgba(43,22,61,.18), rgba(24,14,35,.24));
}

.mainBtn:disabled{
  opacity:.48;
  cursor:not-allowed;
}
.overlay{
  position:fixed;
  inset:0;
  z-index:70;
  background:rgba(7,4,12,.88);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  padding:env(safe-area-inset-top) 8px env(safe-area-inset-bottom) 8px;
}

.overlayInner{
  position:relative;
  width:min(1180px,100%);
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.overlay video{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
}

.overlayClose{
  position:absolute;
  top:12px;
  right:12px;
  z-index:8;
  width:42px;
  height:42px;
  border-radius:999px;
  background:rgba(18,12,29,.86);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadowSoft);
  font-size:1.05rem;
  font-weight:1000;
}

.overlayHud{
  position:absolute;
  left:10px;
  right:10px;
  bottom:max(10px, env(safe-area-inset-bottom));
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.spreadHud{
  justify-content:center;
}

.centerHud{
  justify-content:space-between;
}

.previewDiagonalWatermark{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:3;
  pointer-events:none;
  font-size:clamp(1.8rem,5vw,4.2rem);
  font-weight:1000;
  letter-spacing:.16em;
  color:rgba(255,255,255,.06);
  transform:rotate(-28deg);
}

.overlayCenterHint{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:7;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(18,12,29,.86);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  box-shadow:var(--shadowSoft);
  font-weight:1000;
  text-align:center;
}

.previewControls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.previewCtrlBtn{
  min-height:44px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(20,13,31,.86);
  color:#fff;
  border:1px solid rgba(255,176,90,.18);
  box-shadow:var(--shadowSoft);
  font-weight:1000;
}

.starPillOverlay{
  min-width:112px;
  justify-content:center;
}

.trimOverlayHud{
  position:absolute;
  left:10px;
  right:10px;
  bottom:max(10px, env(safe-area-inset-bottom));
  z-index:9;
  padding:12px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(27,18,42,.76), rgba(18,12,29,.84));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.trimOverlayTitle{
  margin-bottom:10px;
  text-align:center;
  color:#f7f2ff;
  font-weight:1000;
  font-size:.98rem;
}

.trimOverlayTrackWrap{
  width:100%;
}
.topActionBtn:active,
.mainCtaBtn:active,
.secondaryCtaBtn:active,
.ghostCtaBtn:active,
.mainBtn:active,
.compactGenerateBtn:active,
.previewCtrlBtn:active,
.topGhostBtn:active,
.hudPillBtn:active,
.clearInlineBtn:active,
.overlayClose:active{
  transform:translateY(1px);
}

button,
select{
  transition:
    transform .14s ease,
    opacity .18s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.topActionBtn:hover,
.secondaryCtaBtn:hover,
.ghostCtaBtn:hover,
.mainBtn:hover,
.previewCtrlBtn:hover,
.topGhostBtn:hover,
.clearInlineBtn:hover,
.compactLangSel:hover{
  border-color:rgba(255,196,118,.28);
}

.mainCtaBtn:hover{
  box-shadow:
    0 16px 24px rgba(231,159,54,.18),
    inset 0 1px 0 rgba(255,255,255,.26);
}

.compactGenerateBtn:hover{
  box-shadow:
    0 16px 24px rgba(146,110,255,.18),
    inset 0 1px 0 rgba(255,255,255,.26);
}

.topActionBtn:focus-visible,
.mainCtaBtn:focus-visible,
.secondaryCtaBtn:focus-visible,
.ghostCtaBtn:focus-visible,
.mainBtn:focus-visible,
.compactGenerateBtn:focus-visible,
.previewCtrlBtn:focus-visible,
.topGhostBtn:focus-visible,
.clearInlineBtn:focus-visible,
.overlayClose:focus-visible,
.hudPillBtn:focus-visible,
.compactLangSel:focus-visible{
  outline:2px solid rgba(255,203,115,.95);
  outline-offset:2px;
}

@media (max-width: 1100px){
  .mainGrid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .sidePanel{
    order:2;
  }

  .displayColumn{
    order:1;
  }
}

@media (max-width: 820px){
  .appShell{
    padding:8px 8px 12px;
  }

  .brandCenterName{
    font-size:clamp(1.95rem,6vw,2.6rem);
  }

  .accessHeadline{
    font-size:clamp(1.55rem,6vw,2.05rem);
  }

  .accessSubline{
    font-size:.95rem;
  }

  .accessLimits{
    min-height:42px;
    font-size:.86rem;
  }

  .mainCtaBtn,
  .secondaryCtaBtn,
  .ghostCtaBtn{
    min-height:46px;
    border-radius:16px;
  }

  .topActionBtn{
    min-height:40px;
    font-size:.92rem;
  }

  .compactDisplayCard,
  .compactSideCard{
    border-radius:22px;
    padding:8px;
  }

  .displayStage{
    border-radius:20px;
  }

  .marksStripWrap{
    border-radius:16px;
    padding:8px;
  }

  .mainBtn{
    min-height:40px;
    font-size:.88rem;
  }

  .overlayInner{
    align-items:stretch;
    padding-top:52px;
    padding-bottom:106px;
  }

  .overlay video{
    border-radius:20px;
  }

  .overlayHud{
    flex-direction:column;
    justify-content:center;
  }

  .centerHud{
    gap:10px;
  }

  .previewControls{
    justify-content:center;
  }
}

@media (max-width: 560px){
  .brandCenterName{
    font-size:2rem;
  }

  .compactLangSel,
  .topGhostBtn{
    min-height:36px;
    font-size:.9rem;
  }

  .accessHeadline{
    font-size:1.72rem;
  }

  .accessSubline{
    font-size:.93rem;
  }

  .accessLimits{
    width:100%;
    padding:10px 12px;
  }

  .mainCtaBtn,
  .secondaryCtaBtn,
  .ghostCtaBtn{
    font-size:.95rem;
  }

  .compactButtonGrid{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .mainBtn{
    min-height:40px;
    padding:0 10px;
    font-size:.86rem;
  }

  .trimInlineMeta{
    grid-template-columns:54px 1fr 54px;
    gap:6px;
  }

  .trimMiniTime,
  .trimSummary{
    font-size:.82rem;
  }

  .compactGenerateBtn{
    min-height:44px;
    font-size:.94rem;
  }

  .marksStripHead{
    flex-direction:column;
    align-items:flex-start;
  }

  .clearInlineBtn{
    width:100%;
  }
}

#accessScreen,
#appScreen{
  width:100%;
}

#marksList:empty::before{
  content:"Toque na ⭐ para marcar momentos";
  color:#d7caef;
  font-weight:800;
}

#marksList > *{
  flex:0 0 auto;
}

#marksList button,
#marksList .markChip,
#marksList .markItem{
  min-height:38px;
  border-radius:999px;
  padding:0 12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,176,90,.18);
  color:#fff;
  box-shadow:var(--shadowSoft);
  font-weight:900;
}

#statusOverlay.hidden,
#overlayStatusOverlay.hidden,
#markToast.hidden,
#btnCloseInline.hidden,
#previewDiagonalWatermark.hidden,
#markOverlayHint.hidden,
#trimPhaseWrap.hidden,
#marksPhaseWrap.hidden,
#accessScreen.hidden,
#appScreen.hidden{
  display:none !important;
}

select{
  -webkit-appearance:none;
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.82) 50%),
    linear-gradient(135deg, rgba(255,255,255,.82) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:32px;
}
/* PATCH FINAL LIMPO — TOPO DA PRIMEIRA TELA */

#accessScreen .accessTopbar{
  position:relative;
  z-index:5;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  padding-top:12px;
  min-height:132px;
  margin-bottom:0;
}

#accessScreen .topRightSlot{
  position:relative;
  z-index:6;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  min-width:72px;
  margin-right:2px;
}

#accessScreen .compactLangSel{
  min-height:30px;
  min-width:56px;
  padding:0 10px;
  border-radius:999px;
  font-size:.8rem;
  opacity:.96;
}

#accessScreen .brandBlock{
  position:absolute;
  left:50%;
  top:68px;
  transform:translateX(-50%);
  width:min(100%, 330px);
  max-width:330px;
  margin:0;
  text-align:center;
  pointer-events:none;
}

#accessScreen .brandTitle{
  margin:0;
  font-size:clamp(1.72rem, 4.4vw, 2.32rem);
  line-height:1;
  font-weight:1000;
  letter-spacing:-.045em;
  background:linear-gradient(90deg,#fff8ff 0%, #f0dcff 28%, #ffcf7c 74%, #ff9851 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-align:center;
}

#accessScreen .brandSubtitle{
  display:none;
}

#accessScreen .accessPanel{
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-height:calc(100vh - 96px);
  min-height:calc(100dvh - 96px);
  padding:0 14px 10px;
}

#accessScreen .brandCenter{
  display:none;
}

#accessScreen .accessHeroText{
  width:min(100%,720px);
  text-align:center;
  margin-top:0;
}

#accessScreen .accessHeadline{
  margin:0;
  font-size:clamp(1.72rem, 5.7vw, 2.5rem);
  line-height:1.02;
  letter-spacing:-.04em;
}

#accessScreen .accessSubline{
  margin:10px 0 0;
}

#accessScreen .accessLimits{
  margin:14px auto 0;
  width:min(100%,560px);
}

#accessScreen .accessButtons{
  width:min(100%,560px);
  margin-top:14px;
}

#accessScreen .compactMeta{
  width:min(100%,560px);
  margin-top:12px;
}

@media (max-width: 560px){
  #accessScreen .accessTopbar{
    padding-top:12px;
    min-height:122px;
    margin-bottom:2px;
  }

  #accessScreen .topRightSlot{
    min-width:68px;
    margin-right:0;
  }

  #accessScreen .compactLangSel{
    min-height:30px;
    min-width:54px;
    font-size:.79rem;
  }

  #accessScreen .brandBlock{
    top:62px;
    width:min(100%, 280px);
    max-width:280px;
  }

  #accessScreen .brandTitle{
    font-size:1.88rem;
  }
}