:root{
  --primary:#b8ff2c;
  --primary-rgb:184,255,44;
  --bg:#070907;
  --bg2:#0a0e0b;
  --card:#111612;
  --card2:#0c100d;
  --text:#f5f7f5;
  --muted:#8d9a91;
  --border:#273029;
  --danger:#ff4d57;
  --success:#24d18d;
  --shadow:0 24px 70px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
  radial-gradient(circle at 45% -10%,rgba(var(--primary-rgb),.09),transparent 35%),
  var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
.muted{color:var(--muted)}
code,kbd{font-family:"JetBrains Mono",monospace}
.toast{position:fixed;top:88px;right:22px;padding:12px 16px;border-radius:12px;background:#111;border:1px solid var(--border);box-shadow:var(--shadow);z-index:1000;transform:translateY(-20px);opacity:0;pointer-events:none;transition:.2s}
.toast.show{opacity:1;transform:none}
.topbar{position:sticky;top:0;z-index:50;height:70px;padding:0 4vw;display:flex;align-items:center;gap:32px;border-bottom:1px solid var(--border);background:rgba(7,9,7,.9);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:10px;min-width:max-content}.brand img{width:42px;height:42px;object-fit:contain}.brand-copy strong{font-size:21px;font-weight:900;letter-spacing:.05em}.brand-copy span{display:block;font-size:9px;letter-spacing:.22em;color:var(--muted)}
.topnav{display:flex;gap:24px;margin-left:auto}.topnav a{font-size:13px;color:#c5cec8}.topnav a:hover{color:var(--primary)}
.top-actions{display:flex;align-items:center;gap:10px}.session-badge{font-size:11px;color:var(--success)}
.btn{border:1px solid transparent;border-radius:10px;padding:10px 14px;font-weight:700;background:none;color:var(--text)}
.btn-sm{padding:8px 10px;font-size:12px}.btn-lg{padding:14px 20px}.btn-block{width:100%}
.btn-primary{background:var(--primary);color:#050805;box-shadow:0 0 24px rgba(var(--primary-rgb),.14)}
.btn-primary:hover{filter:brightness(1.04)}
.btn-ghost{border-color:var(--border);background:#0b0f0c}
.btn-ghost:hover{border-color:rgba(var(--primary-rgb),.45)}
.btn:disabled{opacity:.4;pointer-events:none}
.page-section{padding-left:4vw;padding-right:4vw}
.hero{min-height:610px;display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:center;gap:60px;padding-top:60px;padding-bottom:60px;border-bottom:1px solid var(--border)}
.pill{display:inline-flex;padding:7px 11px;border:1px solid rgba(var(--primary-rgb),.35);background:rgba(var(--primary-rgb),.08);color:var(--primary);border-radius:999px;font-size:12px;font-weight:800}
.hero h1{font-size:clamp(50px,7vw,88px);line-height:.96;letter-spacing:-.055em;margin:18px 0 10px;max-width:900px}.hero h1 span{color:var(--primary)}
.hero h2{font-size:clamp(22px,3vw,40px);max-width:950px;margin:0 0 20px}.hero p{max-width:760px;color:var(--muted);font-size:17px;line-height:1.7}
.hero-actions{display:flex;gap:10px;margin:26px 0}.trust-row{display:flex;flex-wrap:wrap;gap:18px;color:#aab5ae;font-size:12px}
.hero-card{border:1px solid rgba(var(--primary-rgb),.26);background:linear-gradient(160deg,rgba(var(--primary-rgb),.08),var(--card));border-radius:24px;padding:28px;display:flex;gap:18px;align-items:center;box-shadow:var(--shadow)}.hero-card img{width:84px}.hero-card small,.hero-card span{display:block;color:var(--muted)}.hero-card strong{display:block;font-size:32px;margin:6px 0}
.feature-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding-top:20px;padding-bottom:40px}.feature-strip article{border:1px solid var(--border);background:var(--card2);border-radius:14px;padding:18px}.feature-strip b{display:block;font-size:13px}.feature-strip span{display:block;color:var(--muted);font-size:11px;margin-top:5px}
.studio-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px;padding-top:28px;padding-bottom:50px}
.studio-sidebar{position:sticky;top:88px;height:calc(100vh - 110px);border:1px solid var(--border);background:var(--card);border-radius:18px;padding:12px;display:flex;flex-direction:column}
.side-title{font-size:10px;color:var(--muted);letter-spacing:.2em;padding:9px}
.side-nav{border:0;background:transparent;color:#b8c1bb;padding:11px 12px;border-radius:9px;text-align:left}.side-nav.active,.side-nav:hover{background:rgba(var(--primary-rgb),.1);color:var(--primary)}
.side-spacer{flex:1}.side-plan{border-top:1px solid var(--border);padding:12px}.side-plan span{display:block;color:var(--muted);font-size:9px;letter-spacing:.15em}.side-plan b{display:block;margin-top:6px;font-size:12px}
.studio-content{min-width:0}.split-layout{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:14px}
.builder-panel,.output-column{min-width:0}
.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:14px}.eyebrow{font-family:"JetBrains Mono";font-size:10px;letter-spacing:.16em;color:var(--primary)}.panel-heading h3{font-size:26px;margin:5px 0}.panel-heading p{color:var(--muted);font-size:13px;margin:0}
.section-card{border:1px solid var(--border);background:var(--card);border-radius:15px;overflow:hidden;margin-bottom:12px}.section-head{display:flex;gap:9px;align-items:center;padding:12px 15px;border-bottom:1px solid var(--border);background:#0f1410}.section-head span{font-family:"JetBrains Mono";font-size:10px;color:var(--primary)}.section-head b{font-size:13px}.section-body{padding:15px}
label{display:flex;flex-direction:column;gap:7px;color:#d8dfda;font-size:11px;font-weight:700;margin-bottom:12px}
input,select,textarea{width:100%;background:#090c0a;border:1px solid var(--border);border-radius:9px;color:var(--text);padding:11px 12px;outline:none}textarea{resize:vertical;line-height:1.55}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.07)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stepper{display:grid;grid-template-columns:38px 1fr 38px;gap:5px}.stepper button{border:1px solid var(--border);background:#0b0f0c;color:var(--primary);border-radius:9px;font-size:18px}.stepper input{text-align:center}
.dynamic-editor{margin-top:16px}.dynamic-title{display:flex;align-items:end;justify-content:space-between;border-top:1px solid var(--border);padding-top:16px;margin:16px 0 10px}.dynamic-title span{color:var(--muted);font-size:11px}
.char-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.char-card,.scene-card{border:1px solid var(--border);background:#0d110e;border-radius:13px;padding:13px}.char-card h4,.scene-card h4{margin:0 0 10px;color:var(--primary);font-size:12px}.scene-card{margin-bottom:9px}
.output-column{position:sticky;top:88px;height:calc(100vh - 110px);display:flex;flex-direction:column;gap:12px}.mockup-card,.output-panel{border:1px solid var(--border);background:var(--card);border-radius:15px}.mockup-card{padding:12px}.mockup-head,.terminal-top{display:flex;justify-content:space-between;color:var(--muted);font:10px "JetBrains Mono";letter-spacing:.1em}.project-mini{display:flex;gap:12px;align-items:center;padding:13px 0}.project-mini img{width:52px;height:52px}.project-mini small{display:block;color:var(--muted);font-size:9px}.project-mini b{display:block;margin-top:4px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.stat-grid div{border:1px solid var(--border);border-radius:9px;padding:9px}.stat-grid small{display:block;color:var(--muted);font-size:8px}.stat-grid b{font-family:"JetBrains Mono";font-size:12px}
.output-panel{min-height:0;display:flex;flex-direction:column;flex:1;overflow:hidden}.output-head{display:flex;justify-content:space-between;align-items:center;padding:12px 13px;border-bottom:1px solid var(--border)}.output-head b{display:block;font-size:13px}.output-head small{display:block;color:var(--muted);font:9px "JetBrains Mono";margin-top:3px}
.scene-tabs{display:flex;gap:5px;overflow:auto;padding:8px 10px;border-bottom:1px solid var(--border)}.scene-tab-btn{white-space:nowrap;border:1px solid var(--border);background:#0c100d;color:#b7c0ba;border-radius:8px;padding:7px 9px;font-size:10px}.scene-tab-btn.active{background:rgba(var(--primary-rgb),.11);color:var(--primary);border-color:rgba(var(--primary-rgb),.35)}
.terminal{min-height:0;display:flex;flex-direction:column;flex:1;margin:10px;border:1px solid #222b24;background:#030503;border-radius:10px;overflow:hidden}.terminal-top{padding:10px;border-bottom:1px solid #1c241e}.terminal textarea{border:0;border-radius:0;background:#030503;resize:none;flex:1;min-height:320px;color:#cbd7cf;font:11px/1.55 "JetBrains Mono";padding:13px;box-shadow:none}
.output-actions{display:flex;justify-content:space-between;align-items:center;padding:10px;border-top:1px solid var(--border);background:#0f1410}.output-actions>span{font:9px "JetBrains Mono";color:var(--muted)}.output-actions>div{display:flex;gap:7px}
.simple-page{max-width:1000px}.large-output{min-height:360px;font-family:"JetBrains Mono";font-size:11px}
.history-list{display:grid;gap:9px}.history-entry{border:1px solid var(--border);background:var(--card);border-radius:12px;padding:13px}.history-entry b{color:var(--primary)}.history-entry span{display:block;color:var(--muted);font-size:10px;margin-top:5px}
.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.toggle-row{flex-direction:row;align-items:center}.toggle-row input{width:auto}
.qris-preview{border:1px dashed var(--border);border-radius:10px;min-height:110px;display:grid;place-items:center;color:var(--muted);overflow:hidden}.qris-preview img{max-height:180px;max-width:100%}
.section-title-main{text-align:center;margin-bottom:20px}.section-title-main span{color:var(--primary);font:10px "JetBrains Mono";letter-spacing:.2em}.section-title-main h2{font-size:34px;margin:8px 0}
.templates{padding-top:70px;padding-bottom:80px}.template-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.template-grid article{border:1px solid var(--border);background:var(--card);border-radius:14px;padding:10px}.template-grid b{display:block;margin-top:10px}.template-grid span{display:block;color:var(--muted);font-size:11px;margin-top:4px}.template-cover{height:160px;border-radius:10px;background:linear-gradient(140deg,#1a2b21,#354d3c)}.template-cover.romance{background:linear-gradient(135deg,#26141d,#8f596b)}.template-cover.fantasy{background:linear-gradient(135deg,#0f2630,#426b67)}.template-cover.action{background:linear-gradient(135deg,#12161e,#603526)}.template-cover.history{background:linear-gradient(135deg,#1d2529,#75858b)}
.pricing{padding-top:50px;padding-bottom:100px}.pricing-card{max-width:520px;margin:auto;border:1px solid rgba(var(--primary-rgb),.35);background:linear-gradient(165deg,rgba(var(--primary-rgb),.06),var(--card));border-radius:22px;padding:30px;box-shadow:var(--shadow)}.pricing-card h2{font-size:36px;margin:16px 0 4px}.pricing-card strong{display:block;font-size:44px;color:var(--primary)}.pricing-card p{color:var(--muted)}.pricing-card ul{padding-left:20px;line-height:2;color:#c6d0ca}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(9px);z-index:100;display:grid;place-items:center;padding:18px}.modal-card{width:min(760px,96vw);border:1px solid #3a2425;background:#160909;border-radius:17px;box-shadow:var(--shadow);position:relative;padding:20px}.modal-sm{width:min(440px,96vw);background:var(--card);border-color:var(--border)}.modal-close{position:absolute;right:14px;top:12px;border:0;background:transparent;color:#bbb;font-size:22px}.modal-card h3{font-size:24px;margin:16px 0 8px}.modal-card>p{color:var(--muted);font-size:13px}.modal-brand{display:flex;gap:10px;align-items:center}.modal-brand img{width:46px}.modal-brand b{display:block}.modal-brand span{display:block;color:var(--muted);font:9px "JetBrains Mono";letter-spacing:.18em}.login-note{margin-top:12px;color:var(--muted);font-size:11px;line-height:1.5}
.success-title{display:flex;gap:11px;align-items:center;border-bottom:1px solid #4a1e20;padding-bottom:15px}.success-title>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--success);color:var(--success)}.success-title b{display:block}.success-title small{display:block;color:#986f72;font:9px "JetBrains Mono";letter-spacing:.15em;margin-top:3px}
.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0}.flow-grid div{border:1px solid #5d2427;border-radius:12px;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#210c0d}.flow-grid span{font:9px "JetBrains Mono";color:#8c696a}.flow-grid b{font-size:11px;margin-top:8px}.flow-detail{border:1px solid #5d2427;border-radius:12px;padding:15px;background:#210c0d}.flow-detail>b{font:10px "JetBrains Mono";color:#ff5b62}.flow-detail li{margin:9px 0;color:#cdbbbb;font-size:12px}.flow-detail kbd{background:#050505;border:1px solid #555;border-radius:4px;padding:2px 5px}.execute-actions{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #4a1e20;margin:20px -20px -20px;padding:14px 20px}.execute-actions>span{font:9px "JetBrains Mono";color:#9e7778;letter-spacing:.15em}.execute-actions>div{display:flex;gap:8px}
@media(max-width:1180px){.split-layout{grid-template-columns:minmax(0,1fr) 440px}.feature-strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:960px){.topnav{display:none}.hero{grid-template-columns:1fr}.studio-shell{grid-template-columns:1fr}.studio-sidebar{position:static;height:auto;flex-direction:row;overflow:auto}.side-title,.side-spacer,.side-plan{display:none}.side-nav{white-space:nowrap}.split-layout{grid-template-columns:1fr}.output-column{position:static;height:auto}.terminal textarea{min-height:420px}.template-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.topbar{padding:0 14px}.brand-copy span{display:none}.top-actions .session-badge{display:none!important}.page-section{padding-left:14px;padding-right:14px}.hero{min-height:auto;padding-top:40px}.hero h1{font-size:48px}.feature-strip{grid-template-columns:repeat(2,1fr)}.grid2,.grid3,.char-grid,.admin-grid{grid-template-columns:1fr}.flow-grid{grid-template-columns:repeat(2,1fr)}.execute-actions{align-items:flex-start;flex-direction:column}.execute-actions>div{width:100%;display:grid;grid-template-columns:1fr 1fr}.template-grid{grid-template-columns:1fr}.output-actions{align-items:flex-start;gap:8px;flex-direction:column}.output-actions>div{width:100%}.output-actions .btn{flex:1}.hero-card{width:100%}}

/* SKENA V3.1 — clean centered login */
.login-clean{
  width:min(420px,94vw);
  padding:28px 24px 24px;
}
.login-logo-only{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:4px 0 10px;
}
.login-logo-only img{
  width:92px;
  height:92px;
  object-fit:contain;
  filter:drop-shadow(0 0 22px rgba(var(--primary-rgb),.18));
}
.login-title-center{
  text-align:center;
  margin-bottom:22px;
}
.login-title-center h3{
  margin:0 0 8px;
  font-size:26px;
}
.login-title-center p{
  margin:0;
  color:var(--muted);
  font-size:12px;
}
.login-clean .login-note{
  text-align:center;
  border-top:1px solid var(--border);
  padding-top:14px;
  margin-top:16px;
}
@media(max-width:650px){
  .login-logo-only img{
    width:78px;
    height:78px;
  }
  .login-clean{
    padding:24px 18px 20px;
  }
}


/* SKENA V3.2 merged scene + upgraded character builder */
.char-output-panel{
  margin-top:14px;
}
.char-output-panel .terminal{
  margin:10px;
}
.char-terminal-area{
  min-height:360px;
}
.small-ref-preview{
  min-height:110px;
  background:#0a0e0b;
}
.small-ref-preview img{
  max-width:100%;
  max-height:150px;
  object-fit:contain;
}


/* V3.3 — detailed moment timeline */
.timeline-info{
  border:1px solid rgba(var(--primary-rgb),.24);
  background:rgba(var(--primary-rgb),.055);
  border-radius:10px;
  padding:11px 12px;
  margin-top:2px;
}
.timeline-info b{
  display:block;
  color:var(--primary);
  font-size:11px;
}
.timeline-info span{
  display:block;
  color:var(--muted);
  font-size:10px;
  line-height:1.5;
  margin-top:4px;
}
.moment-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:8px;
}
.moment-box{
  border:1px solid var(--border);
  background:#090c0a;
  border-radius:10px;
  padding:9px;
}
.moment-box label{
  margin:0;
}
.moment-box textarea{
  min-height:88px;
}
.moment-box .moment-label{
  color:var(--primary);
  font:10px "JetBrains Mono";
  letter-spacing:.04em;
  margin-bottom:5px;
}
.scene-advanced-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.scene-section-label{
  margin:12px 0 7px;
  color:#dfe6e1;
  font-size:11px;
  font-weight:800;
}
@media(max-width:650px){
  .moment-grid,.scene-advanced-grid{grid-template-columns:1fr}
}


/* V3.4 — custom manual timeline */
.timeline-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:8px 0;
}
.timeline-toolbar .timeline-mode-badge{
  color:var(--primary);
  font:10px "JetBrains Mono";
}
.moment-time-row{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:7px;
  align-items:end;
  margin-bottom:7px;
}
.moment-time-row label{
  margin-bottom:0;
}
.moment-time-row input{
  font-family:"JetBrains Mono";
}
.moment-remove{
  border:1px solid #4b2428;
  color:#ff737a;
  background:#18090a;
  border-radius:8px;
  height:39px;
  min-width:39px;
}
.moment-add{
  width:100%;
  margin-top:8px;
}
.timeline-error{
  color:#ff737a;
  font-size:10px;
  margin-top:5px;
  display:none;
}
.timeline-error.show{display:block}


/* V3.5 — direct timeline bar editor */
.direct-timeline-card{
  border:1px solid rgba(var(--primary-rgb),.24);
  background:#0b100c;
  border-radius:12px;
  padding:12px;
  margin-top:4px;
}
.direct-timeline-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.direct-timeline-head b{
  display:block;
  color:var(--primary);
  font-size:12px;
}
.direct-timeline-head span{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:3px;
}
.timeline-visual-bar{
  display:flex;
  width:100%;
  height:38px;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:#060806;
  margin-bottom:10px;
}
.timeline-segment-visual{
  min-width:8px;
  border-right:1px solid rgba(0,0,0,.35);
  background:linear-gradient(180deg,rgba(var(--primary-rgb),.24),rgba(var(--primary-rgb),.11));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
  font:9px "JetBrains Mono";
  overflow:hidden;
  white-space:nowrap;
}
.timeline-preset-rows{
  display:grid;
  gap:7px;
}
.timeline-preset-row{
  display:grid;
  grid-template-columns:92px 92px minmax(0,1fr) 38px;
  gap:7px;
  align-items:end;
}
.timeline-preset-row label{
  margin:0;
}
.timeline-preset-row input{
  padding:9px 10px;
}
.timeline-preset-row .segment-label{
  font:10px "JetBrains Mono";
  color:var(--muted);
  padding-bottom:11px;
}
.timeline-preset-row button{
  height:38px;
}
@media(max-width:650px){
  .timeline-preset-row{
    grid-template-columns:1fr 1fr 38px;
  }
  .timeline-preset-row .segment-label{
    grid-column:1/-1;
    padding-bottom:0;
  }
}


/* V3.6 — per-second timeline */
.timeline-head-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.timeline-preset-rows.per-second{
  max-height:360px;
  overflow:auto;
  padding-right:4px;
}
.timeline-preset-rows.per-second::-webkit-scrollbar{
  width:8px;
}
.timeline-preset-rows.per-second::-webkit-scrollbar-thumb{
  background:rgba(var(--primary-rgb),.2);
  border-radius:8px;
}
@media(max-width:650px){
  .direct-timeline-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .timeline-head-actions{
    width:100%;
  }
  .timeline-head-actions .btn{
    flex:1;
  }
}


/* V3.7 — action input directly in timeline rows */
.timeline-preset-row{
  grid-template-columns:82px 82px minmax(220px,1fr) 38px !important;
  align-items:start !important;
}
.timeline-action-field{
  min-height:58px;
  resize:vertical;
  line-height:1.45;
  font-size:11px;
}
.timeline-preset-row .segment-label{
  display:none !important;
}
.timeline-preset-row label{
  margin-bottom:0;
}
.timeline-preset-row .moment-remove{
  margin-top:18px;
}
@media(max-width:760px){
  .timeline-preset-row{
    grid-template-columns:1fr 1fr 38px !important;
  }
  .timeline-preset-row .timeline-action-wrap{
    grid-column:1/-1;
  }
}


/* V3.8 — permanent locked prompt core */
.master-lock-card{
  border:1px solid rgba(var(--primary-rgb),.36);
  background:linear-gradient(180deg,rgba(var(--primary-rgb),.06),#0a0e0b);
  border-radius:14px;
  padding:13px;
  margin-top:14px;
}
.master-lock-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.master-lock-head b{
  display:block;
  margin-top:6px;
  font-size:12px;
}
.master-lock-head small{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:4px;
}
.lock-badge{
  display:inline-flex;
  padding:4px 7px;
  border:1px solid rgba(var(--primary-rgb),.4);
  border-radius:999px;
  color:var(--primary);
  background:rgba(var(--primary-rgb),.1);
  font:9px "JetBrains Mono";
  letter-spacing:.08em;
}
.master-core-preview{
  max-height:430px;
  overflow:auto;
  white-space:pre-wrap;
  margin:12px 0 0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#040604;
  color:#cbd5ce;
  font:10px/1.55 "JetBrains Mono";
}
#promptOutput[readonly]{
  cursor:default;
}


/* =========================================================
   SKENA V3.9 — EXECUTE MODAL FOLLOWS GLOBAL ADMIN THEME
   Removes hard-coded red colors and uses CSS theme variables.
   ========================================================= */

#executeModal .modal-card{
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary) 4%, var(--card)),
      var(--card)
    );
  color: var(--text);
}

#executeModal .modal-close{
  color: var(--muted);
}
#executeModal .modal-close:hover{
  color: var(--primary);
}

#executeModal .success-title{
  border-bottom-color: color-mix(in srgb, var(--primary) 24%, var(--border));
}

#executeModal .success-title > span{
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--primary) 14%, transparent);
}

#executeModal .success-title b{
  color: var(--text);
}

#executeModal .success-title small{
  color: var(--muted);
}

#executeModal .flow-grid div{
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary) 5%, var(--card2)),
      var(--card2)
    );
}

#executeModal .flow-grid div:hover{
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
  box-shadow: 0 0 24px color-mix(in srgb, var(--primary) 8%, transparent);
}

#executeModal .flow-grid span{
  color: color-mix(in srgb, var(--primary) 60%, var(--muted));
}

#executeModal .flow-grid b{
  color: var(--text);
}

#executeModal .flow-detail{
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary) 4%, var(--card2)),
      var(--card2)
    );
}

#executeModal .flow-detail > b{
  color: var(--primary);
}

#executeModal .flow-detail li{
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
}

#executeModal .flow-detail kbd{
  background: color-mix(in srgb, var(--primary) 4%, #050705);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
  color: var(--text);
}

#executeModal .execute-actions{
  border-top-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  background: color-mix(in srgb, var(--primary) 2%, var(--card));
}

#executeModal .execute-actions > span{
  color: var(--muted);
}

#executeModal #openChatgptBtn{
  background: var(--card2);
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}

#executeModal #openChatgptBtn:hover{
  border-color: var(--primary);
  color: var(--primary);
}

#executeModal #openGptSkenaBtn{
  background: var(--primary);
  color: #050805;
  border-color: var(--primary);
  box-shadow: 0 0 25px color-mix(in srgb, var(--primary) 16%, transparent);
}


/* =========================================================
   SKENA V4.0 — visual selectors + larger template cards
   ========================================================= */
.visual-pick-panels{
  display:grid;
  gap:18px;
  margin-top:18px;
}
.pick-panel{
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--card) 85%, var(--bg)), color-mix(in srgb, var(--card) 96%, #050705));
  padding:16px;
  box-shadow:0 10px 35px rgba(0,0,0,.22);
}
.pick-panel-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:14px;
}
.pick-panel-head span{
  color:var(--primary);
  font:10px/1 "JetBrains Mono", monospace;
  letter-spacing:.16em;
}
.pick-panel-head b{
  font-size:18px;
}
.visual-card-grid{
  display:grid;
  gap:14px;
}
.model-visual-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.camera-visual-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.visual-option-card{
  appearance:none;
  border:1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius:18px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 2%, var(--card2)), var(--card2));
  color:var(--text);
  padding:10px;
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.visual-option-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow:0 18px 30px rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent) inset;
}
.visual-option-card.active{
  border-color:var(--primary);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent) inset, 0 0 34px color-mix(in srgb, var(--primary) 12%, transparent);
}
.visual-option-card img,
.visual-option-media{
  width:100%;
  height:154px;
  border-radius:14px;
  display:block;
  object-fit:cover;
  background:#0a0e0a;
}
.visual-option-copy{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:12px 4px 2px;
}
.visual-option-copy b{
  font-size:15px;
}
.visual-option-copy span{
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.model-seedance-25,
.model-seedance-20{
  position:relative;
  overflow:hidden;
}
.model-seedance-25{
  background:
    radial-gradient(circle at 78% 28%, rgba(184,255,44,.22), transparent 22%),
    linear-gradient(135deg, #0c110d 10%, #15311d 50%, #2f4624 100%);
}
.model-seedance-20{
  background:
    radial-gradient(circle at 78% 28%, rgba(93,156,255,.18), transparent 22%),
    linear-gradient(135deg, #0d1014 10%, #141f28 45%, #233446 100%);
}
.model-badge{
  position:absolute;
  top:12px;
  left:12px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(184,255,44,.14);
  border:1px solid rgba(184,255,44,.4);
  color:#dfffb3;
  font:10px/1 "JetBrains Mono", monospace;
  letter-spacing:.08em;
}
.model-badge.subtle{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:#dbe4ef;
}
.model-watermark{
  position:absolute;
  right:16px;
  bottom:10px;
  font-size:52px;
  font-weight:900;
  letter-spacing:-.03em;
  color:rgba(255,255,255,.18);
}
.template-grid-large{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.template-card-large{
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg, color-mix(in srgb, var(--card) 90%, var(--bg)), color-mix(in srgb, var(--card) 98%, #050705));
  box-shadow:0 10px 32px rgba(0,0,0,.18);
}
.template-card-large .template-cover{
  height:230px;
}
.template-card-large .template-body{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.template-card-large .template-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font:11px/1 "JetBrains Mono", monospace;
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.template-card-large b{
  font-size:22px;
}
.template-card-large p{
  color:var(--muted);
  line-height:1.6;
  min-height:52px;
}
.template-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.template-footer small{
  color:var(--muted);
}
.template-cover.romance{
  background:
    radial-gradient(circle at 70% 28%, rgba(255,177,193,.28), transparent 20%),
    linear-gradient(135deg, #25131b, #6f4255 60%, #9c697c);
}
.template-cover.fantasy{
  background:
    radial-gradient(circle at 70% 28%, rgba(165,255,240,.25), transparent 18%),
    linear-gradient(135deg, #0b2332, #2f5d62 58%, #6a9792);
}
.template-cover.action{
  background:
    radial-gradient(circle at 70% 28%, rgba(255,170,90,.28), transparent 18%),
    linear-gradient(135deg, #161625, #4b2e28 50%, #95522e);
}
.template-cover.history{
  background:
    radial-gradient(circle at 70% 28%, rgba(255,255,255,.15), transparent 18%),
    linear-gradient(135deg, #1f2730, #46525a 58%, #7e8a92);
}
.template-cover.war{
  background:
    radial-gradient(circle at 70% 28%, rgba(184,255,44,.18), transparent 18%),
    linear-gradient(135deg, #151914, #3a4428 48%, #6d7141);
}
.template-cover.horror{
  background:
    radial-gradient(circle at 72% 28%, rgba(146,69,255,.22), transparent 18%),
    linear-gradient(135deg, #0b0d14, #26182f 55%, #453249);
}
@media (max-width: 1200px){
  .template-grid-large,
  .camera-visual-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 860px){
  .model-visual-grid,
  .template-grid-large,
  .camera-visual-grid{
    grid-template-columns:1fr;
  }
  .template-card-large .template-cover{
    height:190px;
  }
}


/* =========================================================
   V4.1 — cinematic upgrade
   ========================================================= */
.hero{
  align-items:stretch;
}
.hero-visual-wrap{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-motion-shell{
  position:relative;
  width:min(100%, 640px);
  min-height:520px;
  border:1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(var(--primary-rgb), .12), transparent 22%),
    linear-gradient(160deg, rgba(var(--primary-rgb), .08), rgba(9,12,9,.92));
  box-shadow:0 22px 70px rgba(0,0,0,.3), 0 0 0 1px rgba(var(--primary-rgb),.05) inset;
}
.parallax-layer{
  transition:transform .2s linear;
  will-change:transform;
}
.hero-grid-lines{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.35), transparent 78%);
  opacity:.35;
}
.hero-orb{
  position:absolute;
  border-radius:999px;
  filter:blur(26px);
  opacity:.5;
}
.hero-orb.orb-a{
  width:180px;height:180px;left:-30px;top:42px;
  background:rgba(var(--primary-rgb), .3);
}
.hero-orb.orb-b{
  width:220px;height:220px;right:-28px;bottom:20px;
  background:rgba(104,154,255,.18);
}
.hero-video-card{
  position:relative;
  z-index:3;
  width:min(88%, 540px);
  margin:30px auto 0;
  border:1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius:24px;
  background:rgba(8,12,9,.86);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  padding:14px;
}
.hero-video-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  color:#dce5dd;
  font:10px "JetBrains Mono", monospace;
  letter-spacing:.14em;
  margin-bottom:12px;
}
.hero-video-stage{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  min-height:320px;
  border:1px solid rgba(255,255,255,.06);
  background:#0b100c;
}
.hero-video-poster{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 76% 24%, rgba(var(--primary-rgb), .28), transparent 18%),
    radial-gradient(circle at 34% 42%, rgba(255,255,255,.07), transparent 16%),
    linear-gradient(135deg, #0b110c 0%, #18311c 34%, #263f24 55%, #0b120d 100%);
  transform:scale(1.06);
  animation:heroFloat 8s ease-in-out infinite;
}
.hero-video-poster::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.08) 48%, rgba(0,0,0,.44) 100%),
    radial-gradient(circle at 72% 44%, rgba(255,255,255,.12), transparent 15%);
}
.poster-vignette{
  position:absolute; inset:0;
  background:radial-gradient(circle at center, transparent 42%, rgba(0,0,0,.32) 100%);
}
.poster-title{
  position:absolute;
  left:24px; bottom:60px;
  font-size:38px;
  line-height:.94;
  font-weight:900;
  letter-spacing:-.05em;
  max-width:260px;
}
.poster-subtitle{
  position:absolute;
  left:24px; bottom:28px;
  max-width:260px;
  color:#d2ddd4;
  font-size:13px;
  line-height:1.5;
}
.hero-video-overlay{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:20px;
}
.hero-play-badge{
  align-self:flex-start;
  background:rgba(0,0,0,.36);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:8px 12px;
  font:11px "JetBrains Mono", monospace;
  letter-spacing:.08em;
}
.hero-video-progress{
  height:8px;
  width:100%;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.hero-video-progress i{
  display:block;
  height:100%;
  width:42%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(var(--primary-rgb),.6), var(--primary));
  animation:progressMove 3.4s ease-in-out infinite alternate;
}
.hero-shot-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:12px;
}
.hero-shot-mini{
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  background:rgba(255,255,255,.02);
  padding:12px;
}
.hero-shot-mini b{
  display:block;
  font-size:12px;
}
.hero-shot-mini span{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:4px;
  line-height:1.45;
}
.hero-floating-stats{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:4;
  display:grid;
  gap:10px;
  width:176px;
}
.hero-floating-stats div{
  border:1px solid rgba(var(--primary-rgb), .18);
  border-radius:18px;
  padding:12px;
  background:rgba(8,12,9,.8);
  backdrop-filter:blur(12px);
}
.hero-floating-stats b{
  display:block;
  font-size:18px;
  color:var(--primary);
}
.hero-floating-stats span{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:4px;
}
.floating-price{
  position:absolute;
  left:-18px;
  bottom:22px;
  z-index:5;
  width:min(270px, 82%);
}

.lens-visual-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.template-photo-wrap{
  position:relative;
  overflow:hidden;
  padding:0 !important;
  background:#0b100c !important;
}
.template-cover-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.template-photo-wrap::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.12));
  pointer-events:none;
}

.scene-card{
  border:1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  background:
    linear-gradient(180deg, rgba(var(--primary-rgb), .04), transparent 28%),
    linear-gradient(180deg, #0c100d, #0a0e0b);
  border-radius:18px;
  padding:15px;
  margin-bottom:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.14);
}
.scene-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
.scene-kicker{
  color:var(--primary);
  font:10px "JetBrains Mono", monospace;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.scene-main-title{
  margin-top:4px;
  font-size:19px;
  font-weight:800;
}
.scene-sub{
  color:var(--muted);
  font-size:12px;
  margin-top:5px;
}
.scene-badge-group{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.scene-badge{
  border:1px solid rgba(var(--primary-rgb), .18);
  background:rgba(var(--primary-rgb), .06);
  color:#dbe6db;
  border-radius:999px;
  padding:7px 10px;
  font:10px "JetBrains Mono", monospace;
}
.scene-overview-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}
.overview-pill{
  border:1px solid var(--border);
  background:#0a0e0a;
  border-radius:14px;
  padding:10px 12px;
}
.overview-pill b{
  display:block;
  color:#dfe7df;
  font-size:11px;
}
.overview-pill span{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:5px;
}
.moment-box{
  border:1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  background:linear-gradient(180deg, rgba(var(--primary-rgb), .05), #090c0a);
  border-radius:14px;
  padding:11px;
}
.moment-box textarea{
  min-height:102px;
}
.char-card{
  border:1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  background:linear-gradient(180deg, rgba(var(--primary-rgb), .035), #0d110e);
  border-radius:16px;
}
.dynamic-title{
  margin:6px 0 14px;
}
.dynamic-title b{
  font-size:16px;
}
.dynamic-title span{
  color:var(--muted);
}
.scene-section-label{
  margin:16px 0 8px;
  color:#edf4ee;
  font-size:11px;
  font-weight:800;
  letter-spacing:.05em;
}
.template-grid-large{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.template-card-large .template-cover{
  height:260px;
}
.template-card-large .template-body{
  padding:18px;
}
.template-card-large b{
  font-size:24px;
}
.template-card-large p{
  min-height:56px;
}
@keyframes heroFloat{
  0%,100%{transform:scale(1.06) translate3d(0,0,0)}
  50%{transform:scale(1.095) translate3d(-8px,-10px,0)}
}
@keyframes progressMove{
  from{transform:translateX(-8%)}
  to{transform:translateX(105%)}
}
@media (max-width: 1280px){
  .lens-visual-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .scene-overview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 960px){
  .hero-visual-wrap{
    min-height:auto;
  }
  .hero-motion-shell{
    min-height:460px;
  }
  .floating-price{
    position:relative;
    left:auto;
    bottom:auto;
    margin-top:14px;
  }
}
@media (max-width: 760px){
  .hero-shot-row,
  .lens-visual-grid,
  .scene-overview-grid{
    grid-template-columns:1fr;
  }
  .hero-floating-stats{
    position:relative;
    width:auto;
    right:auto;
    bottom:auto;
    padding:14px;
  }
  .hero-video-card{
    width:calc(100% - 24px);
  }
  .poster-title{
    font-size:30px;
  }
}


/* =========================================================
   V4.1.1 — smaller camera visual cards
   ========================================================= */
.camera-visual-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.camera-visual-grid .visual-option-card{
  padding:8px;
  border-radius:14px;
}
.camera-visual-grid .visual-option-card img,
.camera-visual-grid .visual-option-media{
  height:92px;
  border-radius:12px;
}
.camera-visual-grid .visual-option-copy{
  gap:3px;
  padding:8px 2px 2px;
}
.camera-visual-grid .visual-option-copy b{
  font-size:12px;
  line-height:1.25;
}
.camera-visual-grid .visual-option-copy span{
  font-size:10px;
  line-height:1.35;
}
@media (max-width: 960px){
  .camera-visual-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 640px){
  .camera-visual-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V4.2 — refined hero, smaller camera cards, character visuals
   ========================================================= */
.hero{
  grid-template-columns: 1.02fr .98fr;
  gap: 34px;
  align-items: center;
}
.hero-visual-wrap{
  min-height: 540px;
  align-items:center;
  justify-content:center;
}
.hero-cinematic-card{
  position:relative;
  width:min(100%, 720px);
  min-height:470px;
  border-radius:30px;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  background:linear-gradient(180deg, rgba(10,14,11,.96), rgba(10,14,11,.78));
  box-shadow:0 24px 70px rgba(0,0,0,.34), 0 0 0 1px rgba(184,255,44,.08) inset;
}
.hero-cinematic-media{
  position:relative;
  width:100%;
  height:100%;
}
.hero-cinematic-media img{
  display:block;
  width:100%;
  height:100%;
  min-height:470px;
  object-fit:cover;
}
.hero-media-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:18px;
  background:linear-gradient(180deg, rgba(0,0,0,.14), transparent 20%, transparent 60%, rgba(0,0,0,.52));
}
.hero-overlay-top,
.hero-overlay-bottom{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.hero-overlay-bottom{ align-self:flex-end; }
.hero-badge-small{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(4,8,5,.58);
  border:1px solid rgba(255,255,255,.14);
  font:11px/1 'JetBrains Mono', monospace;
  letter-spacing:.08em;
}
.hero-badge-small.ghost{ background:rgba(184,255,44,.12); border-color:rgba(184,255,44,.28); }
.hero-mini-stat{
  min-width:118px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(5,9,6,.64);
  border:1px solid rgba(184,255,44,.16);
  backdrop-filter:blur(6px);
}
.hero-mini-stat b{ display:block; font-size:20px; line-height:1; }
.hero-mini-stat span{ display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.hero-card.floating-price{
  right:18px;
  bottom:18px;
  z-index:3;
}

.camera-visual-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.camera-visual-grid .visual-option-card,
.lens-visual-grid .visual-option-card{
  padding:8px;
  border-radius:16px;
}
.camera-visual-grid .visual-option-card img,
.camera-visual-grid .visual-option-media,
.lens-visual-grid .visual-option-card img,
.lens-visual-grid .visual-option-media{
  height:88px;
  border-radius:12px;
  object-fit:cover;
}
.camera-visual-grid .visual-option-copy,
.lens-visual-grid .visual-option-copy{
  padding:8px 2px 2px;
  gap:3px;
}
.camera-visual-grid .visual-option-copy b,
.lens-visual-grid .visual-option-copy b{
  font-size:12px;
  line-height:1.25;
}
.camera-visual-grid .visual-option-copy span,
.lens-visual-grid .visual-option-copy span{
  font-size:10px;
  line-height:1.35;
}

.character-gallery-panel{
  margin-bottom:18px;
  border:1px solid var(--border);
  border-radius:20px;
  padding:16px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--card) 88%, var(--bg)), color-mix(in srgb, var(--card2) 96%, #050705));
  box-shadow:0 12px 38px rgba(0,0,0,.18);
}
.character-preset-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.character-preset-card{
  appearance:none;
  border:1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius:18px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 2%, var(--card2)), var(--card2));
  color:var(--text);
  padding:8px;
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.character-preset-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow:0 18px 30px rgba(0,0,0,.18);
}
.character-preset-card.active{
  border-color:var(--primary);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent) inset, 0 0 28px color-mix(in srgb, var(--primary) 10%, transparent);
}
.character-preset-card img{
  width:100%;
  height:126px;
  display:block;
  border-radius:12px;
  object-fit:cover;
  background:#0a0e0a;
}

@media (max-width: 1280px){
  .camera-visual-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 1100px){
  .hero{ grid-template-columns:1fr; }
  .hero-visual-wrap{ order:-1; min-height:auto; }
}
@media (max-width: 900px){
  .character-preset-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px){
  .camera-visual-grid,
  .lens-visual-grid,
  .character-preset-grid{ grid-template-columns:1fr 1fr; }
  .hero-card.floating-price{ position:relative; right:auto; bottom:auto; margin-top:14px; }
}
@media (max-width: 540px){
  .camera-visual-grid,
  .lens-visual-grid,
  .character-preset-grid{ grid-template-columns:1fr; }
}


/* =========================================================
   V4.3 — real thumbnails + motion hero + more characters
   ========================================================= */
.scroll-video-card{
  position:relative;
  width:min(100%, 760px);
  min-height:500px;
  border-radius:30px;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  background:linear-gradient(180deg, rgba(7,12,8,.95), rgba(10,14,11,.88));
  box-shadow:0 28px 80px rgba(0,0,0,.38), 0 0 0 1px rgba(var(--primary-rgb),.06) inset;
}
.hero-motion-video{
  display:block;
  width:100%;
  height:100%;
  min-height:500px;
  object-fit:cover;
  filter:saturate(1.06) contrast(1.02) brightness(.96);
  transform:scale(1.02);
  transition:transform .22s ease, filter .22s ease;
}
.hero-overlay-title{
  align-self:flex-start;
  max-width:360px;
  padding:18px 20px;
  border-radius:22px;
  background:rgba(4,8,5,.36);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(7px);
}
.hero-overlay-title b{
  display:block;
  font-size:28px;
  line-height:1.02;
  margin-bottom:8px;
}
.hero-overlay-title span{
  color:#d7e0d8;
  font-size:14px;
  line-height:1.5;
}
.real-camera-grid,
.camera-visual-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.real-camera-grid .visual-option-card,
.camera-visual-grid .visual-option-card,
.lens-visual-grid .visual-option-card{
  padding:8px;
  border-radius:18px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--card2) 86%, #000), color-mix(in srgb, var(--card) 92%, #000));
}
.real-camera-grid .visual-option-card img,
.camera-visual-grid .visual-option-card img,
.lens-visual-grid .visual-option-card img{
  display:block;
  width:100%;
  height:96px;
  object-fit:cover;
  border-radius:12px;
}
.real-camera-grid .visual-option-copy,
.camera-visual-grid .visual-option-copy,
.lens-visual-grid .visual-option-copy{
  padding:8px 2px 2px;
  gap:3px;
}
.real-camera-grid .visual-option-copy b,
.camera-visual-grid .visual-option-copy b,
.lens-visual-grid .visual-option-copy b{
  font-size:12px;
  line-height:1.25;
}
.real-camera-grid .visual-option-copy span,
.camera-visual-grid .visual-option-copy span,
.lens-visual-grid .visual-option-copy span{
  font-size:10px;
  line-height:1.32;
}
.character-preset-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.character-preset-card{
  padding:8px;
  border-radius:18px;
}
.character-preset-card img{
  height:144px;
}
@media (max-width: 1180px){
  .character-preset-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px){
  .real-camera-grid,
  .camera-visual-grid,
  .lens-visual-grid,
  .character-preset-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px){
  .real-camera-grid,
  .camera-visual-grid,
  .lens-visual-grid,
  .character-preset-grid{ grid-template-columns:1fr; }
  .hero-overlay-title{ max-width:none; }
}


/* =========================================================
   V4.4 — reference camera picker + separate landing/user UI
   ========================================================= */
.landing-v3{
  max-width:1480px;
  margin:26px auto 0;
  padding:72px 70px 54px;
  border:1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  border-radius:34px;
  background:
    radial-gradient(circle at 76% 22%, rgba(var(--primary-rgb),.12), transparent 26%),
    linear-gradient(135deg, #0b110c 0%, #09100a 58%, #060806 100%);
  box-shadow:0 28px 90px rgba(0,0,0,.28);
}
.landing-kicker{
  color:var(--primary);
  font:10px "JetBrains Mono", monospace;
  letter-spacing:.18em;
  margin-bottom:16px;
}
.landing-copy h1{font-size:clamp(56px,6vw,96px);line-height:.91;letter-spacing:-.065em;max-width:760px}
.landing-copy h2{max-width:720px;font-size:32px;line-height:1.14;margin-top:22px}
.landing-copy p{max-width:690px;font-size:15px;line-height:1.72}

.studio-shell{gap:14px}
.studio-sidebar{border-radius:22px;margin:14px 0 14px 14px;height:calc(100vh - 28px);position:sticky;top:14px}
.studio-content{padding:14px 14px 40px 0}
.studio-user-topbar{
  height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  border:1px solid var(--border);border-radius:18px;background:var(--card);padding:10px 14px;margin-bottom:14px;
}
.studio-top-search{display:flex;align-items:center;gap:9px;min-width:260px;max-width:540px;flex:1;background:#090d0a;border:1px solid var(--border);border-radius:12px;padding:8px 11px}
.studio-top-search input{border:0;background:transparent;padding:0;min-width:0}
.studio-top-actions{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;align-items:center}
.studio-top-actions .studio-live-dot{grid-row:1/3;width:9px;height:9px;border-radius:50%;background:var(--primary);box-shadow:0 0 14px rgba(var(--primary-rgb),.55)}
.studio-top-actions b{font-size:12px}.studio-top-actions small{color:var(--muted);font-size:9px}
.user-dashboard-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:center;border:1px solid var(--border);border-radius:24px;background:linear-gradient(135deg,rgba(var(--primary-rgb),.06),var(--card));padding:28px;overflow:hidden}
.user-dashboard-hero h2{font-size:40px;letter-spacing:-.04em;margin:8px 0}.user-dashboard-hero p{color:var(--muted);max-width:620px;line-height:1.6}.user-hero-actions{display:flex;gap:10px;margin-top:18px}
.user-hero-poster{height:250px;border-radius:20px;overflow:hidden;position:relative;border:1px solid rgba(var(--primary-rgb),.18)}
.user-hero-poster img{width:100%;height:100%;object-fit:cover}.user-hero-poster span{position:absolute;right:16px;bottom:14px;background:rgba(4,8,5,.65);border:1px solid rgba(255,255,255,.12);padding:7px 10px;border-radius:999px;font:9px "JetBrains Mono"}
.dashboard-tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}.dashboard-tool-grid button,.dashboard-tool-grid a{display:flex;flex-direction:column;align-items:flex-start;gap:6px;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:18px;padding:18px;text-decoration:none;cursor:pointer}.dashboard-tool-grid span{font-size:24px}.dashboard-tool-grid small{color:var(--muted)}
.dashboard-lower-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:14px;margin-top:14px}.dashboard-panel{border:1px solid var(--border);border-radius:20px;background:var(--card);padding:18px}.dashboard-panel-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px}.dashboard-panel-head span{color:var(--muted);font-size:10px}.quick-create-list{display:grid;gap:8px}.quick-create-list button{display:grid;grid-template-columns:40px 1fr auto;align-items:center;text-align:left;gap:10px;border:1px solid var(--border);background:#0a0e0b;color:var(--text);border-radius:14px;padding:11px}.quick-create-list button>span{color:var(--primary);font:10px "JetBrains Mono"}.quick-create-list small{display:block;color:var(--muted);margin-top:3px}.quick-create-list i{color:var(--primary);font-style:normal}.dashboard-stats-panel{display:grid;grid-template-columns:repeat(3,1fr);align-content:start;gap:10px}.dashboard-stats-panel .dashboard-panel-head{grid-column:1/-1}.dash-stat{border:1px solid var(--border);background:#0a0e0b;border-radius:14px;padding:13px}.dash-stat strong{display:block;color:var(--primary);font-size:18px}.dash-stat span{display:block;color:var(--muted);font-size:10px;margin-top:4px}

.compact-visual-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.compact-tool-card{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:10px;border:1px solid var(--border);border-radius:16px;background:#0a0e0b;padding:9px}.compact-tool-thumb{width:58px;height:48px;border-radius:10px;overflow:hidden}.compact-tool-thumb img{width:100%;height:100%;object-fit:cover}.compact-tool-icon{width:48px;height:48px;border:1px solid rgba(var(--primary-rgb),.22);border-radius:12px;display:grid;place-items:center;color:var(--primary);font-size:21px}.compact-tool-card span{display:block;color:var(--primary);font:8px "JetBrains Mono";letter-spacing:.1em}.compact-tool-card b{display:block;font-size:11px;margin-top:3px}.compact-tool-card small{display:block;color:var(--muted);font-size:9px;margin-top:2px}

.character-quick-picker{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--border);border-radius:18px;background:var(--card);padding:12px;margin-bottom:14px}.character-selected-preview{display:flex;align-items:center;gap:12px}.character-selected-preview img{width:72px;height:64px;object-fit:cover;border-radius:12px}.character-selected-preview span{display:block;color:var(--primary);font:8px "JetBrains Mono"}.character-selected-preview b{display:block;margin-top:3px}.character-selected-preview small{display:block;color:var(--muted);margin-top:3px}

.picker-modal .modal-card{width:min(520px,94vw);max-height:86vh;overflow:auto}.picker-title span{color:var(--primary);font:9px "JetBrains Mono";letter-spacing:.13em}.picker-title h3{margin:5px 0 12px}.picker-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-bottom:1px solid var(--border);margin-bottom:12px}.picker-tab{border:0;background:transparent;color:var(--muted);padding:10px;cursor:pointer;border-bottom:2px solid transparent}.picker-tab.active{color:var(--text);border-color:var(--primary)}
.reference-camera-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.ref-camera-card{padding:0;border:1px solid var(--border);border-radius:11px;background:#09100b;overflow:hidden;cursor:pointer}.ref-camera-card img{display:block;width:100%;aspect-ratio:1.12/1;object-fit:cover}.ref-camera-card.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset}
.reference-option-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.reference-option-grid button{min-height:82px;border:1px solid var(--border);border-radius:12px;background:#0a0e0b;color:var(--text);text-align:left;padding:11px;cursor:pointer}.reference-option-grid button b{display:block;font-size:11px}.reference-option-grid button span{display:block;color:var(--muted);font-size:9px;margin-top:4px}.reference-option-grid button.active{border-color:var(--primary);box-shadow:0 0 0 1px rgba(var(--primary-rgb),.25) inset}
.reference-character-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.ref-character-card{border:1px solid var(--border);border-radius:14px;background:#0a0e0b;color:var(--text);padding:6px;cursor:pointer}.ref-character-card img{width:100%;height:112px;object-fit:cover;border-radius:10px}.ref-character-card span{display:block;font-size:10px;font-weight:700;padding:7px 3px 3px}.ref-character-card.active{border-color:var(--primary)}

@media(max-width:1100px){.dashboard-tool-grid{grid-template-columns:repeat(2,1fr)}.dashboard-lower-grid,.user-dashboard-hero{grid-template-columns:1fr}.compact-visual-tools{grid-template-columns:1fr}.studio-user-topbar{flex-wrap:wrap;height:auto}}
@media(max-width:760px){.landing-v3{margin:12px;padding:36px 20px}.landing-copy h1{font-size:54px}.dashboard-tool-grid{grid-template-columns:1fr}.dashboard-stats-panel{grid-template-columns:1fr}.reference-camera-grid,.reference-option-grid,.reference-character-grid{grid-template-columns:repeat(2,1fr)}}


/* ===== V4.5 landing full background hero ===== */
.landing-hero-full{
  padding:0;
}
.landing-hero-bg{
  position:relative;
  min-height:680px;
  overflow:hidden;
  background:#030604;
  display:flex;
  align-items:flex-start;
}
/* LAYER 1: Scroll-driven image sequence */
.hero-layer-bg{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  will-change:transform;
  transform:translate3d(0,0,0) scale(1);
}
.hero-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  opacity:1;
}
/* LAYER 2: Green Lights & Atmospheric Glow */
.hero-layer-glow{
  display:none;
}
/* LAYER 3: Main Character Camera Depth Layer (Stable, No Deformation) */
.hero-layer-character{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:transparent;
  will-change:transform;
}
/* LAYER 4: Foreground Overlay & Vignette */
.hero-layer-fg{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(3,6,4,0.88) 0%, rgba(3,6,4,0.60) 30%, rgba(3,6,4,0.18) 65%, rgba(3,6,4,0.06) 100%);
  will-change:transform;
}

/* LAYER 5: Foreground Hero Content */
.landing-hero-copy{
  position:relative;
  z-index:10;
  max-width:620px;
  padding:70px 0 70px 56px;
}
.landing-hero-copy h1{
  font-size:clamp(52px, 8vw, 96px);
  line-height:.95;
  letter-spacing:-.05em;
  margin:18px 0 14px;
}
.landing-hero-copy h2{
  max-width:620px;
  font-size:clamp(28px, 3vw, 54px);
  line-height:1.03;
  margin:0 0 18px;
}
.landing-hero-copy p{
  max-width:520px;
  font-size:18px;
  line-height:1.65;
  color:var(--muted);
}
.landing-hero-badges{
  position:absolute;
  right:26px;
  bottom:22px;
  display:flex;
  gap:12px;
  z-index:10;
}
.hero-stat-box{
  min-width:118px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(5,9,7,.72);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
}
.hero-stat-box b{ display:block; font-size:20px; }
.hero-stat-box span{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.landing-price-box{
  position:absolute;
  right:470px;
  bottom:22px;
  display:flex;
  align-items:center;
  gap:14px;
  z-index:10;
  padding:16px 18px;
  border-radius:24px;
  background:rgba(11,18,11,.5);
  border:1px solid rgba(183,255,43,.18);
  backdrop-filter:blur(8px);
}
.landing-price-box img{ width:54px; height:54px; object-fit:contain; }
.landing-price-box small{ display:block; color:var(--muted); font-size:12px; }
.landing-price-box strong{ display:block; font-size:26px; line-height:1.1; }
.landing-price-box span{ display:block; color:var(--muted); font-size:13px; }
.feature-strip{ margin-top:22px; }
.landing-character-strip{
  padding:24px 0 10px;
}
.landing-character-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.landing-character-card{
  display:flex;
  gap:14px;
  align-items:center;
  padding:16px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(10,15,11,.95), rgba(11,18,13,.84));
  border:1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  box-shadow:var(--shadow-sm);
}
.landing-character-card img{
  width:88px;
  height:88px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
}
.landing-character-card b{ display:block; font-size:16px; margin-bottom:4px; }
.landing-character-card span{ color:var(--muted); font-size:13px; line-height:1.45; }
@media (max-width: 1280px){
  .landing-price-box{ right:390px; }
}
@media (max-width: 1080px){
  .landing-hero-bg{ min-height:620px; }
  .landing-price-box{ right:24px; bottom:96px; }
  .landing-hero-badges{ right:24px; bottom:22px; }
  .landing-character-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px){
  .landing-hero-bg{
    min-height:720px;
    background:#030604;
  }
  .landing-hero-copy{ padding:40px 24px 24px; max-width:none; }
  .landing-hero-copy h1{ font-size:58px; }
  .landing-hero-copy h2{ font-size:32px; }
  .landing-price-box{
    left:24px;
    right:auto;
    bottom:96px;
  }
  .landing-hero-badges{
    left:24px;
    right:auto;
    flex-wrap:wrap;
  }
}
@media (max-width: 640px){
  .landing-hero-bg{ min-height:760px; border-radius:24px; }
  .landing-hero-copy h1{ font-size:44px; }
  .landing-hero-copy h2{ font-size:24px; }
  .landing-hero-copy p{ font-size:15px; }
  .hero-actions{ flex-wrap:wrap; }
  .landing-price-box{ left:16px; right:16px; bottom:104px; }
  .landing-hero-badges{ left:16px; right:16px; bottom:16px; gap:8px; }
  .hero-stat-box{ min-width:0; flex:1; }
  .landing-character-grid{ grid-template-columns:1fr; }
}


/* =========================================================
   V4.6 — PUBLIC LANDING = MARKETING ONLY
   Generator Studio is hidden until valid user session.
   ========================================================= */

body:not(.has-session) .user-only-app{
  display:none !important;
}
body:not(.has-session) .auth-only{
  display:none !important;
}
body.has-session .auth-only{
  display:inline-flex !important;
}

/* The public landing never exposes editable generator inputs. */
.public-only{
  position:relative;
}

.prompt-marquee-section{
  padding:18px 0 34px;
  overflow:hidden;
}
.prompt-marquee-label{
  margin:0 0 12px;
  text-align:center;
  color:var(--muted);
  font:11px "JetBrains Mono", monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.prompt-marquee{
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.015);
}
.prompt-marquee-track{
  display:flex;
  width:max-content;
  gap:10px;
  padding:14px 0;
  animation:skenaMarquee 34s linear infinite;
}
.prompt-marquee-track span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius:999px;
  padding:8px 13px;
  background:rgba(var(--primary-rgb),.035);
  color:#dfe7df;
  font-size:12px;
}
@keyframes skenaMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.marketing-section-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 28px;
}
.marketing-section-head > span{
  display:block;
  color:var(--primary);
  font:10px "JetBrains Mono", monospace;
  letter-spacing:.18em;
  margin-bottom:10px;
}
.marketing-section-head h2{
  margin:0;
  font-size:clamp(34px,5vw,62px);
  line-height:1.02;
  letter-spacing:-.045em;
}
.marketing-section-head h2 em{
  color:var(--primary);
  font-style:normal;
}
.marketing-section-head p{
  margin:14px auto 0;
  color:var(--muted);
  line-height:1.7;
  max-width:650px;
}

.public-prompt-demo{
  padding:72px 0;
}
.prompt-mockup-shell{
  max-width:1180px;
  margin:0 auto;
  border:1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius:26px;
  overflow:hidden;
  background:#080c09;
  box-shadow:0 28px 80px rgba(0,0,0,.32), 0 0 0 1px rgba(var(--primary-rgb),.04) inset;
}
.prompt-mockup-topbar{
  min-height:46px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:0 15px;
  border-bottom:1px solid var(--border);
  background:#0d120e;
}
.mock-dots{
  display:flex; gap:7px;
}
.mock-dots i{
  width:9px; height:9px; border-radius:99px;
  background:#465047;
}
.mock-dots i:first-child{background:#7d3939}
.mock-dots i:nth-child(2){background:#8a7c36}
.mock-dots i:last-child{background:#3c7650}
.mock-url{
  color:var(--muted);
  font:10px "JetBrains Mono",monospace;
}
.mock-live{
  justify-self:end;
  color:var(--primary);
  font:10px "JetBrains Mono",monospace;
  letter-spacing:.05em;
}
.prompt-mockup-body{
  display:grid;
  grid-template-columns:190px 1fr;
  min-height:510px;
}
.prompt-mockup-side{
  border-right:1px solid var(--border);
  padding:20px 14px;
  background:#0b100c;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.prompt-mockup-side b{
  color:#dfe6df;
  font:10px "JetBrains Mono",monospace;
  letter-spacing:.12em;
  margin-bottom:8px;
}
.prompt-mockup-side span{
  padding:10px 11px;
  border-radius:10px;
  color:var(--muted);
  font-size:12px;
}
.prompt-mockup-side span.active{
  color:var(--primary);
  background:rgba(var(--primary-rgb),.10);
}
.prompt-mockup-main{
  padding:24px;
  background:
    radial-gradient(circle at 85% 8%, rgba(var(--primary-rgb),.06), transparent 22%),
    #090d0a;
}
.mock-project-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:18px;
}
.mock-project-title small{
  display:block;
  color:var(--primary);
  font:9px "JetBrains Mono",monospace;
  letter-spacing:.12em;
}
.mock-project-title b{
  display:block;
  margin-top:5px;
  font-size:24px;
}
.mock-model{
  border:1px solid rgba(var(--primary-rgb),.25);
  border-radius:999px;
  padding:8px 12px;
  color:#e5eedf;
  font-size:11px;
}
.mock-grid{
  display:grid;
  grid-template-columns:2fr repeat(4,1fr);
  gap:10px;
  margin-bottom:14px;
}
.mock-field{
  min-height:76px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:#0c110d;
}
.mock-field.wide{
  grid-row:span 1;
}
.mock-field span{
  display:block;
  color:var(--muted);
  font:9px "JetBrains Mono",monospace;
  letter-spacing:.08em;
}
.mock-field strong{
  display:block;
  margin-top:8px;
  color:#edf3ed;
  font-size:12px;
  line-height:1.45;
}
.mock-output-wrap{
  border:1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius:18px;
  overflow:hidden;
  background:#050806;
}
.mock-output-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  color:#dce5dd;
  font:10px "JetBrains Mono",monospace;
}
.mock-output-code{
  min-height:260px;
  padding:18px;
  font:11px/1.75 "JetBrains Mono",monospace;
  color:#96a198;
  background:
    linear-gradient(180deg,rgba(var(--primary-rgb),.025),transparent),
    #040604;
}
.mock-output-code .green{color:var(--primary)}
.mock-output-code p{margin:12px 0}

.prompt-mode-section{
  padding:78px 0;
}
.prompt-mode-grid{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.prompt-mode-card{
  min-height:260px;
  display:flex;
  flex-direction:column;
  padding:18px;
  border:1px solid var(--border);
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.015),transparent),
    #0b100c;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.prompt-mode-card.featured{
  border-color:var(--primary);
  background:
    radial-gradient(circle at 80% 15%,rgba(var(--primary-rgb),.12),transparent 28%),
    #0c120d;
  box-shadow:0 0 30px rgba(var(--primary-rgb),.08);
}
.mode-badges{
  min-height:30px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.mode-badges span{
  border:1px solid rgba(var(--primary-rgb),.23);
  border-radius:999px;
  padding:5px 8px;
  color:var(--primary);
  font:9px "JetBrains Mono",monospace;
}
.prompt-mode-card > small{
  margin-top:13px;
  color:var(--muted);
  font:10px "JetBrains Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.prompt-mode-card h3{
  margin:7px 0 8px;
  font-size:22px;
}
.prompt-mode-card p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
  flex:1;
}
.mode-tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:16px;
}
.mode-tags span{
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:8px;
  color:#d8e0d9;
  font-size:10px;
  background:#080c09;
}

.prompt-stats{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--border);
  border-radius:22px;
  overflow:hidden;
  background:#0b100c;
}
.prompt-stats div{
  padding:25px 20px;
  text-align:center;
  border-right:1px solid var(--border);
}
.prompt-stats div:last-child{border-right:0}
.prompt-stats b{
  display:block;
  font-size:26px;
  color:var(--primary);
}
.prompt-stats span{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
}

.prompt-workflow{
  padding:90px 0 74px;
}
.workflow-grid{
  max-width:1000px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.workflow-grid article{
  min-height:230px;
  padding:22px;
  border:1px solid var(--border);
  border-radius:22px;
  background:#0b100c;
}
.workflow-grid i{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:13px;
  background:var(--primary);
  color:#061006;
  font-style:normal;
  font-weight:900;
}
.workflow-grid h3{
  margin:18px 0 8px;
  font-size:20px;
}
.workflow-grid p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
  font-size:13px;
}

/* User app is visually separated from landing */
body.has-session #studio{
  margin-top:60px;
  border-top:1px solid color-mix(in srgb,var(--primary) 15%,var(--border));
  padding-top:38px;
}

@media(max-width:1050px){
  .prompt-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mock-grid{grid-template-columns:repeat(2,1fr)}
  .mock-field.wide{grid-column:1/-1}
}
@media(max-width:800px){
  .prompt-mockup-body{grid-template-columns:1fr}
  .prompt-mockup-side{display:none}
  .workflow-grid,.prompt-stats{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .prompt-mode-grid,.workflow-grid,.prompt-stats{grid-template-columns:1fr}
  .prompt-stats div{border-right:0;border-bottom:1px solid var(--border)}
  .prompt-stats div:last-child{border-bottom:0}
  .prompt-mockup-main{padding:14px}
  .mock-grid{grid-template-columns:1fr}
  .mock-project-title{align-items:flex-start;flex-direction:column}
}


/* =========================================================
   SKENA USER STUDIO — FULL APP MODE PATCH
   Setelah login: hanya Studio, tanpa landing/top marketing.
   ========================================================= */
body.has-session,
body.studio-only-mode{
  min-height:100vh;
  background:
    radial-gradient(circle at 72% 12%, rgba(184,255,44,.055), transparent 28%),
    #060906;
}

body.has-session .topbar,
body.studio-only-mode .topbar{
  display:none !important;
}

body.has-session main > section:not(#studio),
body.studio-only-mode main > section:not(#studio){
  display:none !important;
}

body.has-session #studio,
body.studio-only-mode #studio{
  display:grid !important;
  min-height:100vh;
  width:100%;
  max-width:none;
  padding:0 !important;
  margin:0 !important;
  grid-template-columns:240px minmax(0,1fr);
  gap:0;
  background:#070a07;
}

body.has-session .studio-sidebar,
body.studio-only-mode .studio-sidebar{
  top:0;
  margin:0;
  height:100vh;
  border:0;
  border-right:1px solid rgba(184,255,44,.12);
  border-radius:0;
  padding:24px 16px 18px;
  background:
    linear-gradient(180deg,rgba(184,255,44,.035),transparent 24%),
    #0b100c;
  box-shadow:18px 0 40px rgba(0,0,0,.18);
}

body.has-session .studio-content,
body.studio-only-mode .studio-content{
  padding:18px 22px 0;
  min-width:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

body.has-session .studio-user-topbar,
body.studio-only-mode .studio-user-topbar{
  position:sticky;
  top:0;
  z-index:25;
  margin:0 0 18px;
  border:1px solid rgba(184,255,44,.12);
  background:rgba(10,15,11,.94);
  backdrop-filter:blur(18px);
  box-shadow:0 10px 32px rgba(0,0,0,.18);
}

body.has-session .studio-tab,
body.studio-only-mode .studio-tab{
  width:100%;
  max-width:1500px;
  margin:0 auto;
}

body.has-session #promptTab,
body.studio-only-mode #promptTab{
  max-width:1600px;
}

body.has-session .split-layout,
body.studio-only-mode .split-layout{
  grid-template-columns:minmax(0,1fr) minmax(340px,430px);
  align-items:start;
}

body.has-session .section-card,
body.studio-only-mode .section-card,
body.has-session .output-panel,
body.studio-only-mode .output-panel{
  border-color:rgba(184,255,44,.13);
  box-shadow:0 14px 34px rgba(0,0,0,.12);
}

body.has-session .side-nav,
body.studio-only-mode .side-nav{
  border-radius:12px;
  min-height:44px;
}

body.has-session .side-nav.active,
body.studio-only-mode .side-nav.active{
  background:linear-gradient(90deg,rgba(184,255,44,.15),rgba(184,255,44,.06));
  color:#b8ff2c;
  box-shadow:inset 3px 0 0 #b8ff2c;
}

/* Lens: text-only, banyak pilihan */
.compact-visual-tools{
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);
}

.lens-text-card{
  display:grid;
  grid-template-columns:minmax(130px,.55fr) minmax(180px,1fr);
  align-items:center;
  gap:12px;
}

.lens-text-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.lens-text-copy span{
  color:var(--primary);
  font:700 9px "JetBrains Mono",monospace;
  letter-spacing:.12em;
}

.lens-text-copy b{
  font-size:13px;
}

.lens-text-copy small{
  color:var(--muted);
  font-size:10px;
}

.lens-text-select{
  width:100%;
  min-width:0;
  height:42px;
  padding:0 38px 0 12px;
  border:1px solid rgba(184,255,44,.18);
  border-radius:10px;
  background:#080d09;
  color:var(--text);
  font-weight:650;
  outline:none;
  cursor:pointer;
}

.lens-text-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(184,255,44,.08);
}

.production-select-row{
  margin-bottom:10px;
}

/* Footer khusus area user */
.studio-footer{
  margin-top:auto;
  padding:28px 10px 24px;
  text-align:center;
  color:#738078;
  font:500 11px/1.5 "Inter",sans-serif;
  letter-spacing:.035em;
  border-top:1px solid rgba(255,255,255,.055);
}

/* Hilangkan space/scroll landing ketika user aktif */
body.studio-only-mode{
  overflow-x:hidden;
}
body.studio-only-mode main{
  min-height:100vh;
}

/* Dashboard lebih ringkas */
body.has-session .user-dashboard-hero{
  min-height:250px;
}
body.has-session .dashboard-tool-grid{
  gap:10px;
}

/* Mobile user app */
@media(max-width:960px){
  body.has-session #studio,
  body.studio-only-mode #studio{
    grid-template-columns:1fr;
  }
  body.has-session .studio-sidebar,
  body.studio-only-mode .studio-sidebar{
    position:sticky;
    top:0;
    z-index:30;
    width:100%;
    height:auto;
    margin:0;
    padding:10px 12px;
    flex-direction:row;
    overflow-x:auto;
    border-right:0;
    border-bottom:1px solid rgba(184,255,44,.12);
  }
  body.has-session .studio-content,
  body.studio-only-mode .studio-content{
    padding:12px 12px 0;
  }
  body.has-session .split-layout,
  body.studio-only-mode .split-layout{
    grid-template-columns:1fr;
  }
  .compact-visual-tools{
    grid-template-columns:1fr;
  }
  .lens-text-card{
    grid-template-columns:1fr;
  }
  .studio-footer{
    padding-bottom:32px;
  }
}

/* =========================================================
   SKENA USER STUDIO — READABILITY + TIMELINE LEGIBILITY V2
   Semua teks dibuat jelas, tidak terlalu kecil, dan timeline
   30 detik tidak lagi menumpuk menjadi satu baris tak terbaca.
   ========================================================= */
body.has-session,
body.studio-only-mode{
  color:#f4f7f4;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.has-session .studio-content,
body.studio-only-mode .studio-content{
  font-size:14px;
  line-height:1.45;
}
body.has-session label,
body.studio-only-mode label{
  color:#dfe6e0;
  font-size:12.5px;
  font-weight:650;
  line-height:1.35;
}
body.has-session input,
body.has-session select,
body.has-session textarea,
body.studio-only-mode input,
body.studio-only-mode select,
body.studio-only-mode textarea{
  color:#f4f7f4;
  font-size:13px;
  line-height:1.45;
}
body.has-session input::placeholder,
body.has-session textarea::placeholder,
body.studio-only-mode input::placeholder,
body.studio-only-mode textarea::placeholder{
  color:#78857c;
  opacity:1;
}
body.has-session .panel-heading h3,
body.studio-only-mode .panel-heading h3{
  color:#fff;
  font-size:28px;
  line-height:1.08;
}
body.has-session .panel-heading p,
body.studio-only-mode .panel-heading p{
  color:#a5b0a8;
  font-size:13.5px;
  line-height:1.55;
}
body.has-session .eyebrow,
body.studio-only-mode .eyebrow{
  color:#b8ff2c;
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
}
body.has-session .section-head,
body.studio-only-mode .section-head{
  min-height:46px;
  color:#f1f5f1;
  font-size:13px;
}
body.has-session .section-head span,
body.studio-only-mode .section-head span{
  color:#b8ff2c;
}
body.has-session .side-nav,
body.studio-only-mode .side-nav{
  font-size:14px;
  font-weight:650;
  line-height:1.28;
}
body.has-session .side-nav small,
body.studio-only-mode .side-nav small{
  font-size:10px;
  color:#94a097;
}
body.has-session .studio-user-topbar input,
body.studio-only-mode .studio-user-topbar input{
  font-size:14px;
}
body.has-session .compact-tool-card b,
body.studio-only-mode .compact-tool-card b{
  color:#f5f8f5;
  font-size:12.5px;
  line-height:1.3;
}
body.has-session .compact-tool-card small,
body.studio-only-mode .compact-tool-card small{
  color:#93a098;
  font-size:10px;
}
body.has-session .direct-timeline-head b,
body.studio-only-mode .direct-timeline-head b{
  color:#dfff93;
  font-size:13px;
}
body.has-session .direct-timeline-head span,
body.studio-only-mode .direct-timeline-head span{
  color:#94a097;
  font-size:10.5px;
  line-height:1.45;
}
/* 30 segmen harus bisa dibaca: scrollbar horizontal, bukan dipaksa mengecil. */
body.has-session .timeline-visual-bar,
body.studio-only-mode .timeline-visual-bar{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:#556b34 #0a0f0b;
  padding-bottom:4px;
}
body.has-session .timeline-segment-visual,
body.studio-only-mode .timeline-segment-visual{
  min-width:62px;
  min-height:32px;
  flex-shrink:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  color:#d6ff79;
  font-size:10px;
  font-weight:800;
  letter-spacing:0;
  border-right:1px solid rgba(0,0,0,.28);
}
body.has-session .timeline-preset-row,
body.studio-only-mode .timeline-preset-row{
  gap:9px;
}
body.has-session .timeline-preset-row label,
body.studio-only-mode .timeline-preset-row label{
  font-size:11px;
  color:#d9e2db;
}
body.has-session .timeline-preset-row input,
body.studio-only-mode .timeline-preset-row input{
  min-height:38px;
  font-size:12px;
}
body.has-session .timeline-action-field,
body.studio-only-mode .timeline-action-field{
  min-height:56px;
  font-size:12.5px;
  line-height:1.45;
}
body.has-session .moment-remove,
body.studio-only-mode .moment-remove{
  min-width:38px;
  min-height:38px;
  font-size:18px;
  line-height:1;
}
body.has-session .terminal textarea,
body.has-session #promptOutput,
body.studio-only-mode .terminal textarea,
body.studio-only-mode #promptOutput{
  font-size:12.5px;
  line-height:1.6;
  color:#dce5dd;
}
body.has-session .terminal-top,
body.studio-only-mode .terminal-top{
  color:#a8b4ab;
  font-size:10px;
}
body.has-session .output-actions,
body.studio-only-mode .output-actions{
  font-size:11px;
}
body.has-session .btn,
body.studio-only-mode .btn{
  font-weight:750;
}
/* Lens benar-benar text-only: tidak ada thumbnail/icon lens. */
body.has-session .lens-text-card,
body.studio-only-mode .lens-text-card{
  grid-template-columns:150px minmax(220px,1fr);
}
body.has-session .lens-text-select,
body.studio-only-mode .lens-text-select{
  font-size:12.5px;
  font-weight:700;
  color:#f3f7f3;
}
body.has-session .lens-text-select option,
body.studio-only-mode .lens-text-select option{
  color:#fff;
  background:#0b100c;
}
@media(max-width:720px){
  body.has-session .panel-heading h3,
  body.studio-only-mode .panel-heading h3{font-size:24px}
  body.has-session .lens-text-card,
  body.studio-only-mode .lens-text-card{grid-template-columns:1fr}
  body.has-session .timeline-segment-visual,
  body.studio-only-mode .timeline-segment-visual{min-width:58px}
}


/* ===== Camera picker fix V3 ===== */
#selectedCameraCard{cursor:pointer}
.camera-picker-card{width:min(760px,94vw)!important;max-height:88vh;overflow:auto}
.camera-picker-card .picker-title p{color:var(--muted);font-size:11px;margin:0 0 14px}
.camera-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.camera-choice-card{border:1px solid var(--border);background:#090e0a;color:var(--text);border-radius:14px;padding:8px;text-align:left;cursor:pointer;transition:.18s ease;min-width:0}
.camera-choice-card:hover{border-color:rgba(var(--primary-rgb),.55);transform:translateY(-1px)}
.camera-choice-card.active{border-color:var(--primary);box-shadow:0 0 0 1px rgba(var(--primary-rgb),.28) inset,0 0 20px rgba(var(--primary-rgb),.08)}
.camera-choice-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;background:#050805;margin-bottom:8px}
.camera-choice-card b{display:block;font-size:11px;line-height:1.25}
.camera-choice-card span{display:block;color:var(--muted);font-size:9px;line-height:1.35;margin-top:4px}
@media(max-width:760px){.camera-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.camera-choice-grid{grid-template-columns:1fr}}