:root {
  /* New compact vars */
  --bg: #131416; --bc: #1c1d22; --be: #222227;
  --fg: #fff; --mu: #9898ac; --di: #585868;
  --ac: #00FF7F; --ag: rgba(0,255,127,.14); --ad: rgba(0,255,127,.06);
  --br: rgba(255,255,255,.055); --ba: rgba(0,255,127,.28);
  --r: 9px; --rs: 6px;
  --fd: 'Outfit', sans-serif; --fb: 'Outfit', sans-serif; --fm: 'Outfit', sans-serif;
  /* Old aliases for landing page + login modal backward compat */
  --bg-main: var(--bg); --bg-card: var(--bc); --bg-elevated: var(--be);
  --bg-hover: #252529; --bg-input: #111113;
  --text-default: var(--fg); --text-muted: var(--mu); --text-dim: var(--di);
  --accent: var(--ac); --accent-secondary: #00D4AA;
  --accent-glow: var(--ag); --accent-dim: var(--ad);
  --border-subtle: var(--br); --border-accent: var(--ba);
  --shadow-glow: 0 0 40px rgba(0,255,127,0.15);
  --blue-accent: #00BFFF; --blue-glow: rgba(0,191,255,0.12);
  --danger: #FF4757; --danger-hover: #FF6B81;
  --radius: var(--r); --radius-full: 999px;
  --font: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono: 'Cascadia Code', 'Consolas', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--fb); font-size: 13px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #444; }
body { display: flex; flex-direction: column; user-select: none; -webkit-user-select: none; }
input, textarea, [contenteditable] { user-select: text; -webkit-user-select: text; }
.terminal-msg { user-select: text; -webkit-user-select: text; }
html:has(body.landing-active) { overflow: auto; height: auto; }
body.landing-active { overflow: visible; height: auto; }
#app { display: flex; flex-direction: column; height: 100vh; }
.hidden { display: none !important; }

/* ====== LOGIN MODAL ====== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.modal-overlay.hidden {
  display: none;
}

.login-modal {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 40px;
  max-width: 400px;
  width: 90%;
  border: 1px solid var(--border-subtle);
}

.login-modal-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 30px;
  text-align: center;
  color: var(--text-default);
}

.login-form-group {
  margin-bottom: 20px;
}

.login-form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 14px;
}

.login-form-group input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-default);
  font-size: 16px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.25s ease;
}

.login-form-group input:focus {
  border-color: var(--border-accent);
}

.error-message {
  color: #ff6b6b;
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
  display: none;
}

.error-message.active {
  display: block;
}

.btn-login-primary {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-full);
  color: #111;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font);
}

.btn-login-primary:hover {
  background: #00e06e;
}

.btn-login-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.signup-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 14px;
  color: #9a9aae;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
}
.signup-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: #00FF7F;
  cursor: pointer;
}
.signup-consent a {
  color: #00FF7F;
  text-decoration: none;
}
.signup-consent a:hover { text-decoration: underline; }

.login-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  gap: 12px;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.login-divider span {
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.btn-google-login {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: var(--radius-full);
  color: #3c4043;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.btn-google-login:hover {
  background: #f7f8f8;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.btn-google-login svg {
  flex-shrink: 0;
}

/* ══ OCCUPY BOX ══ */
.occ-box{position:absolute;border:1.5px dashed rgba(0,255,127,.5);background:rgba(0,255,127,.04);display:none;pointer-events:none;z-index:2}
.occ-box .occ-lbl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:9px;font-weight:700;letter-spacing:.12em;color:rgba(0,255,127,.55);font-family:var(--fd);white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.8);pointer-events:none}
.occ-disabled{opacity:.3;pointer-events:none}
.vsm-slot-rm{position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.75);border:none;color:rgba(255,255,255,.8);font-size:8px;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:5}
.vsm-slot.filled .vsm-slot-rm{display:flex}

/* ══ HEADER ══ */
.hdr{height:44px;min-height:44px;flex-shrink:0;background:var(--bc);border-bottom:1px solid var(--br);display:flex;align-items:center;padding:0 14px;gap:12px}
.logo{display:flex;align-items:center;gap:7px;flex-shrink:0}
.logo-mk{width:30px;height:30px;display:block;object-fit:contain}
.logo-tx{font-family:var(--fd);font-size:14.9px;font-weight:700;letter-spacing:.07em;white-space:nowrap}
.logo-tx em{color:var(--ac);font-style:normal}
.tab-group{display:flex;gap:2px;background:var(--bg);border-radius:7px;padding:3px}
.wtab{padding:4px 14px;border-radius:5px;font-size:14.9px;font-weight:700;cursor:pointer;color:var(--mu);border:none;background:transparent;font-family:var(--fb);letter-spacing:.03em;transition:all .15s}
.wtab.on{background:var(--ac);color:#0a0a0a}
.hsp{flex:1}
.hin{background:var(--bg);border:1px solid var(--br);border-radius:var(--rs);padding:4px 10px;color:var(--fg);font-size:12px;font-family:var(--fb);width:160px;outline:none}
.hin:focus{border-color:var(--ba)}
.hin::placeholder{color:var(--di)}
.hb{padding:4px 10px;border-radius:var(--rs);font-size:14.9px;font-weight:600;cursor:pointer;border:1px solid var(--br);background:transparent;color:var(--mu);font-family:var(--fb);transition:all .15s}
.hb:hover{color:var(--fg)}
.hba{padding:4px 12px;border-radius:var(--rs);font-size:14.9px;font-weight:700;cursor:pointer;border:none;background:var(--ac);color:#0a0a0a;font-family:var(--fb)}

/* ══ APP — 1:2:1 ══ */
.app{flex:1;display:flex;overflow:hidden;min-height:0}
.col-out  {flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bc);border-right:1px solid var(--br);transition:flex .22s ease,border-color .22s ease}
.col-ctr  {flex:2;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--br);transition:border-color .22s ease}
.col-panel{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bc);overflow:hidden;transition:flex .22s ease}

/* Foldable panels — left (.col-out) and right (.col-panel) collapse to zero
   width via a `.collapsed` class. Center (.col-ctr) grows to fill freed space
   automatically because both flanks become flex:0 0 0. Adjacent vertical
   resizer (#colResizer, between center and right) is hidden when the right
   panel is collapsed; #projResizer lives INSIDE .col-out so it disappears
   with its parent's overflow:hidden. State persists in localStorage and is
   restored before first paint via an inline script in <head>. */
/* Left panel collapse = thin re-expand rail (mirrors right panel). The
   projects-section + media-section are hidden via display:none; the rail
   button takes the full panel height with a centered '>' chevron. */
.col-out.collapsed{flex:0 0 28px;min-width:0;width:28px;border-right:0;overflow:hidden}
.col-out.collapsed > *:not(.panel-expand-bar){display:none}
.col-out:not(.collapsed) > .panel-expand-bar{display:none}
/* Left-side rail variant: border on the RIGHT (panel's outer edge). */
.panel-expand-bar-left{border-left:0;border-right:1px solid var(--br)}
/* Right panel collapse = thin re-expand rail. The body content (.tools-hdr +
   .panel-body-wrap) is hidden via display:none; the <button>.panel-expand-bar
   above them takes the full panel height with a centered '<' chevron. */
.col-panel.collapsed{flex:0 0 28px;min-width:0;width:28px;border-left:0;overflow:hidden}
.col-panel.collapsed > .tools-hdr,
.col-panel.collapsed > .panel-body-wrap{display:none}
.col-panel:not(.collapsed) > .panel-expand-bar{display:none}
.col-ctr.right-collapsed{border-right:0}
.col-resizer.hidden{display:none}

/* TOOLS header at top of right panel. Mirrors .out-hdr (Media) on the left.
   Toggle button on the LEFT, title on the right. */
.tools-hdr{padding:11px 13px 9px;border-bottom:1px solid var(--br);display:flex;align-items:center;gap:8px;flex-shrink:0}
.tools-hdr .hdr-toggle-btn{flex-shrink:0}
.tools-hdr .out-title{margin-left:auto}

/* Collapsed-state re-expand rail (visible when .col-panel has .collapsed).
   Full-height clickable strip with a centered '<' chevron. Hover tint comes
   from var(--ac) — green in image mode, cyan in video mode (body.vid-mode
   swaps the variable). */
.panel-expand-bar{
  width:28px; min-width:28px; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-left:1px solid var(--br);
  color:rgba(255,255,255,.45);
  cursor:pointer;
  padding:0;
  transition:background .15s, color .15s, border-color .15s;
}
.panel-expand-bar:hover{background:var(--ad); color:var(--ac); border-color:var(--ba)}
.panel-expand-bar:focus-visible{outline:2px solid var(--ac); outline-offset:-2px}
.panel-expand-bar svg{width:14px; height:14px}

/* Outer drag-resize handles between the three columns. Hover lights up the
   dots. Dragging below MIN_PANEL_WIDTH (configured in main.js) snaps the
   flank panel into the .collapsed state (same as the chevron toggle), so
   the resizer doubles as a fold gesture for users who never discover the
   header chevron. Hidden when its flank panel is already collapsed. */
.app-resizer{flex-shrink:0;width:6px;background:transparent;cursor:ew-resize;position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:background .15s}
.app-resizer::before,.app-resizer::after{content:'';width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .2s}
.app-resizer .dot-mid{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .2s}
.app-resizer:hover{background:rgba(255,255,255,.04)}
.app-resizer:hover::before,.app-resizer:hover::after,.app-resizer:hover .dot-mid,
.app-resizer.active::before,.app-resizer.active::after,.app-resizer.active .dot-mid{background:var(--ac)}
.app-resizer.hidden{display:none}

/* ══ VAULT ══ */
.out-hdr{padding:11px 13px 9px;border-bottom:1px solid var(--br);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:8px}
.out-title{font-size:13px;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.8);text-transform:uppercase;font-family:var(--fd)}
.btn-new{padding:3px 8px;border-radius:var(--rs);font-size:12px;font-weight:700;cursor:pointer;background:var(--ad);border:1px solid var(--ba);color:var(--ac);font-family:var(--fb);transition:all .14s;white-space:nowrap}
.btn-new:hover{background:var(--ag)}
/* Vault tabs */
.vault-tabs{display:flex;gap:0;border-bottom:1px solid var(--br);flex-shrink:0;overflow:hidden;padding:0 8px}
.vtab{padding:7px 10px;font-size:13.5px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.38);border:none;background:transparent;cursor:pointer;font-family:var(--fb);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;white-space:nowrap}
.vtab.on{color:var(--ac);border-bottom-color:var(--ac)}
.vtab:hover:not(.on){color:rgba(255,255,255,.6)}
/* Upload drop zone in reference tab */
.ref-dropzone{margin:10px;border:1.5px dashed rgba(255,255,255,.12);border-radius:8px;padding:18px 10px;text-align:center;cursor:pointer;transition:border-color .15s}
.ref-dropzone:hover{border-color:rgba(0,255,127,.35)}
.ref-dropzone-icon{font-size:20px;opacity:.3;margin-bottom:5px}
.ref-dropzone-lbl{font-size:13.5px;color:rgba(255,255,255,.35);line-height:1.5}
.scale-row{padding:7px 12px;border-bottom:1px solid var(--br);display:flex;align-items:center;gap:8px;flex-shrink:0}
.scale-lbl{font-size:10px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.38);font-family:var(--fd);white-space:nowrap}
/* To-video popup */
#tvMenu{position:fixed;background:#212229;border:1px solid rgba(255,255,255,.13);border-radius:10px;padding:5px;z-index:10001;min-width:150px;box-shadow:0 12px 32px rgba(0,0,0,.85);display:none;flex-direction:column;gap:1px}
#tvMenu.show{display:flex}
.tv-opt{padding:6px 10px;font-size:12px;font-weight:500;color:rgba(255,255,255,.75);border:none;background:transparent;cursor:pointer;border-radius:5px;text-align:left;font-family:var(--fb);transition:all .12s;white-space:nowrap;display:flex;align-items:center;justify-content:space-between;gap:8px}
.tv-opt:hover{background:rgba(0,255,127,.1);color:var(--ac)}
.tv-opt-sep{height:1px;background:rgba(255,255,255,.09);margin:3px 8px}
.tv-opt-lbl{font-size:9px;letter-spacing:.1em;font-family:var(--fd);font-weight:600;color:rgba(255,255,255,.25);padding:4px 10px 2px;text-transform:uppercase}
.tv-sub{position:relative}
.tv-submenu{display:none;position:absolute;left:100%;top:-5px;background:#212229;border:1px solid rgba(255,255,255,.13);border-radius:10px;padding:5px;min-width:140px;box-shadow:0 8px 24px rgba(0,0,0,.7);flex-direction:column;gap:1px;z-index:1}
.tv-sub:hover>.tv-submenu{display:flex}
.tv-arrow{font-size:9px;color:rgba(255,255,255,.3);margin-left:auto}
.sc-sl{flex:1;height:18px;background:transparent;border-radius:2px;position:relative;display:flex;align-items:center}
.sc-sl::before{content:'';position:absolute;left:0;right:0;height:3px;background:var(--be);border-radius:2px}
.sc-sl-fill{height:3px;background:var(--ac);border-radius:2px;width:25%;position:absolute;left:0}
.sc-sl-thumb{position:absolute;width:12px;height:12px;background:var(--ac);border-radius:50%;border:2px solid var(--bc);top:50%;transform:translateY(-50%);left:calc(25% - 6px)}
.sc-sl input{position:absolute;left:0;right:0;width:100%;opacity:0;cursor:pointer;height:18px;margin:0}
.out-grid{flex:1;min-height:0;overflow-y:auto;padding:9px;display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start;align-items:start}
.out-grid.cols1{grid-template-columns:1fr;justify-items:center}
.out-grid.cols1 .thumb{padding-bottom:56.25%}
.out-grid.cols3{grid-template-columns:1fr 1fr 1fr}
.out-grid.cols4{grid-template-columns:1fr 1fr 1fr 1fr}
.out-empty{grid-column:1/-1;text-align:center;padding:20px 8px;color:var(--di);font-size:13.5px;line-height:1.8}
.thumb{border-radius:6px;overflow:hidden;border:1.5px solid var(--br);cursor:pointer;position:relative;background:var(--be);transition:border-color .14s;width:100%;padding-bottom:100%;container-type:inline-size}
.thumb-rm{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.7);border:none;color:rgba(255,255,255,.7);font-size:9px;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:6;transition:all .15s}
.thumb-rm:hover{background:rgba(255,60,60,.85);color:#fff}
.thumb:hover .thumb-rm{display:flex}
.out-grid.cols1 .thumb{max-width:480px}
.thumb:hover{border-color:rgba(255,255,255,.2)}
.thumb.active{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac)}
@keyframes gen-pulse{0%,100%{box-shadow:0 0 0 2px var(--ac)}50%{box-shadow:0 0 14px 4px var(--ac)}}
.thumb.just-generated{animation:gen-pulse .8s ease-in-out 3;border-color:var(--ac)}
.bgen:disabled:not(.generating){opacity:.35;cursor:not-allowed}
.thumb-badge{position:absolute;top:5px;left:5px;font-size:9px;font-weight:700;letter-spacing:.08em;font-family:var(--fd);background:rgba(0,255,127,.12);color:rgba(0,255,127,.7);border:1px solid rgba(0,255,127,.22);border-radius:3px;padding:2px 5px;pointer-events:none;z-index:2}
.shared-creator-badge{position:absolute;bottom:5px;left:5px;right:5px;color:#fff;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);border-radius:3px;padding:4px 7px 5px;pointer-events:none;z-index:2;display:flex;flex-direction:column;gap:1px;line-height:1.15;overflow:hidden}
.shared-creator-badge .shared-creator-name{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shared-creator-badge .shared-creator-meta{font-size:9px;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--fd)}
.thumb.shared-thumb:hover .shared-creator-badge{background:rgba(0,0,0,.78)}
.tact-tv{background:rgba(0,0,0,.85);color:rgba(255,255,255,.6)}
.tact-tv:hover{color:#fff;background:rgba(0,0,0,.95);border-color:rgba(255,255,255,.2)}
.thumb-img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;border-radius:5px;overflow:hidden}
.thumb-play{width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1;backdrop-filter:blur(2px);transition:transform .15s,background .15s}
.thumb-play svg{width:14px;height:14px;margin-left:2px}
.thumb:hover .thumb-play{transform:scale(1.12);background:rgba(0,0,0,.75)}
.thumb-acts{position:absolute;bottom:4px;right:4px;display:flex;gap:3px;opacity:0;z-index:2;transition:opacity .14s}
.thumb:hover .thumb-acts{opacity:1}
.skeleton-spinner{width:28px;height:28px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--ac);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tact{width:22px;height:22px;border-radius:5px;background:rgba(0,0,0,.85);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.6);font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:all .12s}
.tact:hover{color:#fff;background:rgba(0,0,0,.95);border-color:rgba(255,255,255,.2)}
/* Dynamic thumb button sizing via container queries */
@container (min-width:200px){
  .tact{width:33px;height:33px;border-radius:7px;font-size:15px}
  .tact svg{width:16px;height:16px}
  .thumb-acts{gap:5px;bottom:6px;right:6px}
}
@container (max-width:139px){
  .thumb-acts{flex-wrap:wrap;justify-content:flex-end;gap:2px;bottom:2px;right:2px;left:2px}
  .tact{width:18px;height:18px;border-radius:4px;font-size:8px}
  .tact svg{width:10px;height:10px}
  .thumb-badge{font-size:7px;padding:1px 4px;top:3px;left:3px}
  .thumb-rm{width:14px;height:14px;font-size:7px;top:2px;right:2px}
}
@container (max-width:89px){
  .thumb-acts{gap:1px;bottom:1px;right:1px;left:1px}
  .tact{width:15px;height:15px;border-radius:3px;font-size:7px}
  .tact svg{width:8px;height:8px}
  .thumb-badge{font-size:6px;padding:1px 3px;top:2px;left:2px}
  .thumb-rm{width:12px;height:12px;font-size:6px;top:1px;right:1px}
}

/* ══ CENTER COLUMN ══ */
/* Preview section — 2 parts of center height */
.pv-section{flex:2;min-height:0;display:flex;flex-direction:column;background:var(--bc);border-bottom:1px solid var(--br);overflow:hidden}

/* Canvas — fills pv-section minus settings bar */
.pv-canvas{
  flex:1;
  min-height:0;
  width:100%;
  background:#0a0a0c;
  position:relative;
  overflow:hidden;
  cursor:default;
}

/* outer grid */
.pv-outer{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}

/* ratio frame — overflow:visible so VF box can extend outside (crop) */
.pv-rf{position:absolute;background:#161820;border:1px solid rgba(255,255,255,.09);overflow:visible;transition:all .3s cubic-bezier(.4,0,.2,1)}
.pv-rf-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:33.33% 33.33%;pointer-events:none}
.pv-sov,.pv-tov{position:absolute;inset:0;pointer-events:none;transition:opacity .4s}

/* viewfinder corners */
.vf-corner{position:absolute;width:12px;height:12px;pointer-events:none}
.vf-corner.tl{top:8px;left:8px;border-top:1.5px solid rgba(0,255,127,.5);border-left:1.5px solid rgba(0,255,127,.5)}
.vf-corner.tr{top:8px;right:8px;border-top:1.5px solid rgba(0,255,127,.5);border-right:1.5px solid rgba(0,255,127,.5)}
.vf-corner.bl{bottom:8px;left:8px;border-bottom:1.5px solid rgba(0,255,127,.5);border-left:1.5px solid rgba(0,255,127,.5)}
.vf-corner.br{bottom:8px;right:8px;border-bottom:1.5px solid rgba(0,255,127,.5);border-right:1.5px solid rgba(0,255,127,.5)}

/* thirds dots */
.thirds-dot{position:absolute;width:4px;height:4px;border-radius:50%;border:1px solid rgba(0,255,127,.3);transform:translate(-50%,-50%);pointer-events:none}

/* VF box */
.vf-box{position:absolute;border:1.5px solid var(--ac);background:rgba(0,255,127,.07);display:none;cursor:move;z-index:3}
.vf-box::after{content:'+';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:13.5px;color:rgba(0,255,127,.4);font-family:var(--fm);pointer-events:none}
.vf-lbl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--ac);font-family:var(--fd);white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.8);pointer-events:none}
.vf-handle{position:absolute;width:6px;height:6px;background:var(--ac);border-radius:1px}
.vf-handle.tl{top:-3px;left:-3px;cursor:nw-resize}
.vf-handle.tm{top:-3px;left:calc(50% - 3px);cursor:n-resize}
.vf-handle.tr{top:-3px;right:-3px;cursor:ne-resize}
.vf-handle.ml{top:calc(50% - 3px);left:-3px;cursor:w-resize}
.vf-handle.mr{top:calc(50% - 3px);right:-3px;cursor:e-resize}
.vf-handle.bl{bottom:-3px;left:-3px;cursor:sw-resize}
.vf-handle.bm{bottom:-3px;left:calc(50% - 3px);cursor:s-resize}
.vf-handle.br{bottom:-3px;right:-3px;cursor:se-resize}

/* top badge row */
.pv-badges{position:absolute;top:18px;right:26px;display:flex;gap:4px;pointer-events:auto;z-index:20}
/* Reset-scene button: lives at the LEFT of the badge row so it anchors to
   the scene-level toolbar instead of the projects panel. One-shot action
   (no dropdown), distinct hover tint to read as "destructive-ish" against
   the read-only badges next to it. */
.pv-reset-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600;letter-spacing:.08em;font-family:var(--fd);background:rgba(0,0,0,.7);color:rgba(255,255,255,.6);cursor:pointer;border:1px solid rgba(255,255,255,.12);transition:all .15s;margin-right:2px}
.pv-reset-btn svg{width:13px;height:13px;flex-shrink:0}
.pv-reset-btn:hover{background:rgba(255,75,87,.18);color:var(--danger);border-color:rgba(255,75,87,.4)}
.pv-reset-btn:focus-visible{outline:2px solid var(--danger);outline-offset:1px}
.pv-badge{padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600;letter-spacing:.08em;font-family:var(--fd);background:rgba(0,0,0,.7);color:rgba(255,255,255,.6);cursor:pointer;position:relative;transition:all .15s;border:1px solid rgba(255,255,255,.12)}
.pv-badge:hover{background:rgba(0,0,0,.85);color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.15)}
.pv-badge.hi{background:rgba(0,0,0,.75);color:var(--ac);border:1px solid var(--ba)}
.pv-badge .bd-menu{visibility:hidden;opacity:0;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#1a1a1e;border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:6px 4px 4px;min-width:max-content;box-shadow:0 8px 24px rgba(0,0,0,.6);z-index:30;display:flex;flex-direction:column;gap:2px;transition:visibility 0s .15s,opacity .1s .05s;max-height:60vh;overflow-y:auto;overscroll-behavior:contain}
.pv-badge .bd-menu::before{content:'';position:absolute;top:-6px;left:0;right:0;height:6px}
.pv-badge:hover .bd-menu{visibility:visible;opacity:1;transition:visibility 0s 0s,opacity .1s 0s}
.bd-menu .bd-opt{padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600;font-family:var(--fd);color:var(--mu);cursor:pointer;white-space:nowrap;border:1px solid transparent;transition:all .12s}
.bd-menu .bd-opt:hover{color:var(--fg);background:var(--be);border-color:rgba(255,255,255,.1)}
.bd-menu .bd-opt.on{color:var(--ac);background:var(--ad);border-color:var(--ba)}

/* VF toggle */
.vf-toggle-wrap{position:absolute;top:22px;left:26px;display:flex;align-items:center;gap:5px;z-index:20}
.vf-tog{width:24px;height:13px;border-radius:999px;background:var(--be);border:1px solid var(--br);position:relative;cursor:pointer;transition:background .2s}
.vf-tog.on{background:var(--ac)}
.vf-tog-dot{position:absolute;top:2px;left:2px;width:7px;height:7px;border-radius:50%;background:var(--mu);transition:all .2s}
.vf-tog.on .vf-tog-dot{left:13px;background:#0a0a0a}
.vf-tog-lb{font-size:10px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.55);font-family:var(--fd);cursor:pointer}
.vf-tog-lb.on{color:var(--ac)}

/* ── Settings summary bar (inside pv-section, below canvas) ── */
.settings-bar{
  flex-shrink:0;
  padding:8px 12px;
  background:rgba(0,0,0,.35);
  border-top:1px solid var(--br);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px 10px;
}
.sb-item{display:flex;flex-direction:column;gap:1px;min-width:0}
.sb-k{font-size:9px;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.45);text-transform:uppercase;font-family:var(--fm)}
.sb-v{font-size:14px;font-weight:500;color:rgba(255,255,255,.45);font-family:var(--fm);white-space:normal;overflow-wrap:break-word;word-wrap:break-word;line-height:1.3}
.sb-v.set{color:var(--ac)}

/* VF frame bar */
.pv-framebar{padding:4px 12px;background:rgba(0,0,0,.7);border-top:1px solid var(--br);display:flex;gap:14px;flex-shrink:0;position:absolute;bottom:0;left:0;right:0;z-index:4;backdrop-filter:blur(4px)}
.pfb{font-size:10.5px;font-family:var(--fd);font-weight:500;color:rgba(255,255,255,.55)}
.pfb em{color:var(--ac);font-style:normal}

/* TEXT INPUTS + TERMINAL — split layout */
/* The txt-area is NEVER scrollable — the 4 fields share the available row
   height proportionally via flex:1 + min-height:0. The whole area is always
   fully visible to the user; if they need more room they drag the ctrResizer.
   The "collapsed textareas" bug is prevented by enforcing _CTR_MIN_TXT_H=200
   in JS (both restore + drag), which guarantees the row never gets smaller
   than ~200px regardless of saved state. */
.txt-terminal-row{display:flex;flex:1;min-height:0;gap:0}
.txt-inputs-col{flex:1;min-width:0;display:flex;flex-direction:column}
.txt-area{flex:1;min-height:0;overflow:hidden;padding:10px 14px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.ti-row{display:flex;flex-direction:column;gap:3px;flex:1;min-height:0}
.ti-lbl{font-size:10.8px;font-weight:700;letter-spacing:.15em;color:var(--di);text-transform:uppercase;font-family:var(--fm);flex-shrink:0}
.ti-inp{background:var(--bc);border:1px solid var(--br);border-radius:var(--rs);padding:6px 9px;color:var(--fg);font-size:14.9px;font-family:var(--fb);outline:none;resize:none;width:100%;flex:1;min-height:0}
.ti-inp:focus{border-color:var(--ac);box-shadow:0 0 6px rgba(0,255,127,.25),0 0 12px rgba(0,255,127,.1)}
.ti-inp::placeholder{color:var(--di)}

/* ══ TERMINAL (Assistant Director) ══ */
.terminal-col{flex:1;min-width:0;display:flex;flex-direction:column;border-left:1px solid var(--br);background:var(--bg);padding:14px}
.terminal-header{padding:0 6px 8px;margin-top:-5px}
.terminal-glow-outer{position:relative;flex:1;min-height:0;max-height:calc(100% - 55px);margin:0 2px 6px;border-radius:22px;background:#000}
.terminal-messages-wrap{position:relative;width:100%;height:100%;border-radius:22px;overflow:hidden;background:#000}
.terminal-messages-wrap::before,.terminal-messages-wrap::after{content:'';position:absolute;left:0;right:0;height:24px;z-index:2;pointer-events:none}
.terminal-messages-wrap::before{top:0;background:linear-gradient(to bottom,#000,transparent)}
.terminal-messages-wrap::after{bottom:0;background:linear-gradient(to top,#000,transparent)}
.terminal-messages{height:100%;overflow-y:auto;padding:20px 14px;display:flex;flex-direction:column;gap:8px;background:#000}
/* terminal scrollbar now matches global 8px */
.terminal-welcome{color:var(--di);font-size:12px;font-style:italic;font-family:var(--fb)}
.terminal-msg{font-size:14px;font-family:var(--fb);line-height:1.5;padding:8px 14px;max-width:90%;word-wrap:break-word}
.terminal-msg.user{background:var(--ac);color:var(--bg);align-self:flex-end;border-radius:14px 14px 0 14px}
.terminal-msg.bot,.terminal-msg.ai,.terminal-msg.assistant{background:rgba(255,255,255,.1);color:var(--fg);align-self:flex-start;border-radius:14px 14px 14px 0}
.terminal-input-row{display:flex;gap:8px;padding:8px 2px 0;align-items:flex-end}
.terminal-input{flex:1;border-radius:18px!important;padding:8px 18px!important;background:#000!important;color:#fff!important;border-color:#333;resize:none;overflow-y:auto;line-height:1.4}
.terminal-input:focus{border-color:var(--ac)!important;box-shadow:0 0 6px rgba(0,255,127,.25),0 0 12px rgba(0,255,127,.1)}
.terminal-send-btn{background:var(--ac);border:none;width:34px;height:34px;min-width:34px;border-radius:50%;cursor:pointer;color:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .15s}
.terminal-send-btn:hover{opacity:.85}
/* typing indicator */
.terminal-typing{align-self:flex-start;display:flex;gap:4px;padding:10px 14px;background:rgba(255,255,255,.06);border-radius:22px 22px 22px 4px}
.terminal-typing span{width:6px;height:6px;border-radius:50%;background:var(--mu);animation:adDot 1.4s infinite}
.terminal-typing span:nth-child(2){animation-delay:.2s}
.terminal-typing span:nth-child(3){animation-delay:.4s}
@keyframes adDot{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
/* AD generate-confirmation row (gates auto-trigger) */
.terminal-confirm{align-self:flex-start;display:flex;flex-direction:column;gap:8px;padding:10px 14px;background:rgba(255,255,255,.06);border:1px solid var(--ba);border-radius:14px 14px 14px 4px;max-width:90%}
.terminal-confirm-label{font-size:13px;font-family:var(--fb);color:var(--fg);line-height:1.4}
.terminal-confirm-btns{display:flex;gap:6px}
.terminal-confirm-btn{flex:1;padding:6px 12px;border-radius:6px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--fb);letter-spacing:.03em;transition:all .12s;border:1.5px solid transparent}
.terminal-confirm-btn.go{background:var(--ac);color:#0a0a0a;border-color:var(--ac)}
.terminal-confirm-btn.go:hover:not(:disabled){background:#00e870;border-color:#00e870}
.terminal-confirm-btn.go.vid{background:#00ffff;border-color:#00ffff}
.terminal-confirm-btn.go.vid:hover:not(:disabled){background:#00e0e0;border-color:#00e0e0}
.terminal-confirm-btn.cancel{background:transparent;color:var(--mu);border-color:var(--ba)}
.terminal-confirm-btn.cancel:hover:not(:disabled){color:var(--fg);border-color:var(--mu)}
.terminal-confirm-btn:disabled{opacity:.45;cursor:not-allowed}
.terminal-confirm.done{opacity:.8}
.terminal-confirm.cancelled .terminal-confirm-label{color:var(--mu);font-style:italic}

/* gen bar */
.gen-bar{flex-shrink:0;padding:8px 14px;background:var(--bc);border-top:1px solid var(--br);display:flex;gap:6px;position:sticky;bottom:0;z-index:50}
.gen-bar.fixed-fallback{position:fixed;bottom:0;z-index:9999;box-shadow:0 -2px 8px rgba(0,0,0,.5)}
.bgen{flex:1;padding:9px;border-radius:var(--rs);font-size:14.9px;font-weight:700;cursor:pointer;letter-spacing:.04em;font-family:var(--fb);transition:all .15s}
.bgen.q{border:1.5px solid rgba(255,255,255,.09);background:transparent;color:var(--mu)}
.bgen.q:hover{color:var(--fg)}
.bgen.m{border:1.5px solid var(--ba);background:transparent;color:var(--ac)}
.bgen.m:hover{background:var(--ad)}
.bgen.ai{background:var(--ac);border:none;color:#0a0a0a;position:relative;overflow:hidden}
.bgen.ai:hover{background:#00e870}
.bgen.ai.vid{background:#00ffff}
.bgen.ai.vid:hover{background:#00e0e0}
.bgen.ai:active:not(:disabled){transform:scale(.95);transition:transform .08s}
.bgen.ai:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.bgen.ai.generating{background:var(--ba);color:var(--mu);pointer-events:none}
.bgen.ai.generating::after{content:'';position:absolute;bottom:0;height:2px;width:40%;background:var(--ac);animation:genBar 1.4s linear infinite}
@keyframes genBar{0%{left:-40%}100%{left:100%}}
.bgen.regen{background:transparent;border:1.5px solid var(--ba);color:var(--ac);position:relative;overflow:hidden}
.bgen.regen:hover{background:var(--ad)}
.bgen.regen:active:not(:disabled){transform:scale(.95);transition:transform .08s}
.bgen.regen:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.bgen.regen.generating{background:var(--ba);color:var(--mu);border-color:var(--ba);pointer-events:none}
.bgen.regen.generating::after{content:'';position:absolute;bottom:0;height:2px;width:40%;background:var(--ac);animation:genBar 1.4s linear infinite}
.bgen.regen.vid{border-color:rgba(0,255,255,.28);color:#00ffff}
.bgen.regen.vid:hover{background:rgba(0,255,255,.08)}
.bgen.update{background:var(--ac);border:none;color:#0a0a0a;position:relative;overflow:hidden}
.bgen.update:hover{background:#00e870}
.bgen.update.vid{background:#00ffff}
.bgen.update.vid:hover{background:#00e0e0}
.bgen.update:active:not(:disabled){transform:scale(.95);transition:transform .08s}
.bgen.update:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.bgen.update.generating{background:var(--ba);color:var(--mu);pointer-events:none}
.bgen.update.generating::after{content:'';position:absolute;bottom:0;height:2px;width:40%;background:var(--ac);animation:genBar 1.4s linear infinite}
.cost-pill{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:2px 6px 2px 5px;border-radius:999px;background:rgba(0,0,0,.18);font-size:11.5px;font-weight:700;line-height:1;letter-spacing:0;vertical-align:middle}
.cost-pill-ic{flex-shrink:0;opacity:.9}
.cost-pill-n{font-family:var(--fd, monospace);font-variant-numeric:tabular-nums}
.bgen.regen .cost-pill,.bgen.q .cost-pill{background:rgba(255,255,255,.1);color:var(--ac)}
.bgen-wrap{position:relative;display:flex;align-items:stretch;flex:1;gap:4px}
.bgen-wrap .bgen{flex:1}
.bgen-help{flex-shrink:0;width:30px;border-radius:var(--rs);border:1.5px solid var(--br);background:rgba(255,255,255,.04);color:rgba(255,255,255,.4);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:help;transition:all .15s;font-family:var(--fd);position:relative}
.bgen-help:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:rgba(255,255,255,.7)}
.bgen-tip{position:absolute;bottom:calc(100% + 8px);right:0;width:220px;padding:10px 12px;background:var(--bg);border:1px solid var(--br);border-radius:var(--rs);font-size:11px;line-height:1.5;color:rgba(255,255,255,.8);box-shadow:0 4px 20px rgba(0,0,0,.5);z-index:100;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.bgen-help:hover .bgen-tip{opacity:1;transform:translateY(0);pointer-events:auto}

/* ══ PROJECT / PRESET SECTION ══ */
.proj-section{border-bottom:1px solid var(--br);flex-shrink:0;display:flex;flex-direction:column}
/* Header matches .out-hdr / .out-title (Media section) — bigger, brighter,
   no leading chevron. The static header is no longer a fold toggle. */
.proj-header{padding:11px 13px 9px;border-bottom:1px solid var(--br);display:flex;align-items:center;gap:8px;flex-shrink:0;user-select:none}
.proj-header-title{font-size:13px;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.8);text-transform:uppercase;font-family:var(--fd);margin-left:auto}
.proj-body{height:0;overflow:hidden;transition:height .25s ease;flex-shrink:0}
.proj-section.open .proj-body{height:var(--proj-height,230px);overflow-y:auto;flex-shrink:1;flex-grow:1}
.panel-resizer{flex-shrink:0;height:7px;background:rgba(255,255,255,.02);cursor:row-resize;position:relative;z-index:10;display:flex;align-items:center;justify-content:center;gap:5px;border-top:1px solid var(--br);border-bottom:1px solid var(--br);transition:background .15s}
.panel-resizer::before,.panel-resizer::after{content:'';width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .2s}
.panel-resizer .dot-mid{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .2s}
.panel-resizer:hover,.panel-resizer.dragging{background:rgba(255,255,255,.04)}
.panel-resizer:hover::before,.panel-resizer:hover::after,.panel-resizer:hover .dot-mid,
.panel-resizer.dragging::before,.panel-resizer.dragging::after,.panel-resizer.dragging .dot-mid{background:var(--ac)}

/* Center resizer (preview ↔ prompts) */
.ctr-resizer{flex-shrink:0;height:7px;background:rgba(255,255,255,.02);cursor:ns-resize;position:relative;z-index:10;display:flex;align-items:center;justify-content:center;gap:5px;border-top:1px solid var(--br);border-bottom:1px solid var(--br);transition:background .15s}
.ctr-resizer::before,.ctr-resizer::after{content:'';width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .2s}
.ctr-resizer .dot-mid{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .2s}
.ctr-resizer:hover,.ctr-resizer.active{background:rgba(255,255,255,.04)}
.ctr-resizer:hover::before,.ctr-resizer:hover::after,.ctr-resizer:hover .dot-mid,
.ctr-resizer.active::before,.ctr-resizer.active::after,.ctr-resizer.active .dot-mid{background:var(--ac)}

/* Column resizer (text inputs ↔ terminal) — left/right borders frame the
   grip the same way .panel-resizer and .ctr-resizer use top/bottom borders. */
.col-resizer{flex-shrink:0;width:6px;background:transparent;cursor:ew-resize;position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-left:1px solid var(--br);border-right:1px solid var(--br)}
.col-resizer::before,.col-resizer::after{content:'';width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .2s}
.col-resizer .dot-mid{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .2s}
.col-resizer:hover::before,.col-resizer:hover::after,.col-resizer:hover .dot-mid,
.col-resizer.active::before,.col-resizer.active::after,.col-resizer.active .dot-mid{background:var(--ac)}
.proj-tabs{display:flex;gap:0;border-bottom:1px solid var(--br);padding:0 12px}
.proj-tab{padding:6px 12px;font-size:11px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.38);border:none;background:transparent;cursor:pointer;font-family:var(--fb);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s}
.proj-tab.on{color:var(--ac);border-bottom-color:var(--ac)}
.proj-tab:hover:not(.on){color:rgba(255,255,255,.6)}
.proj-action-btn{padding:3px 10px;font-size:9.5px;font-weight:700;letter-spacing:.08em;border:1px solid rgba(255,255,255,.12);border-radius:4px;background:transparent;color:rgba(255,255,255,.45);cursor:pointer;font-family:var(--fd);transition:all .15s;align-self:center}
.proj-action-btn:hover{border-color:rgba(0,255,127,.35);color:var(--ac)}
.proj-action-btn.accent{background:rgba(0,255,127,.08);border-color:rgba(0,255,127,.25);color:var(--ac)}
.proj-action-btn.accent:hover{background:rgba(0,255,127,.15)}
.proj-content{padding:10px 12px}
.proj-list{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.proj-item{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:var(--rs);border:1px solid var(--br);background:var(--be);transition:all .12s;cursor:pointer}
.proj-item:hover{border-color:rgba(255,255,255,.15)}
.proj-item.active{border-color:var(--ba);background:var(--ad)}
/* Legacy proj-item kept for presets; proj-tree used for project+scene hierarchy */
.proj-item-name{flex:1;font-size:11px;font-weight:600;color:var(--mu);font-family:var(--fb);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-item.active .proj-item-name{color:var(--ac)}
.proj-item-name[contenteditable]{outline:none;border-bottom:1px solid var(--ba)}
.proj-item-acts{display:flex;gap:2px;opacity:0;transition:opacity .12s}
.proj-item:hover .proj-item-acts{opacity:1}
.proj-item-btn{width:18px;height:18px;border-radius:3px;background:transparent;border:none;color:rgba(255,255,255,.4);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:9px;transition:all .12s}
.proj-item-btn:hover{color:var(--fg);background:rgba(255,255,255,.08)}
.proj-item-btn.danger:hover{color:var(--danger);background:rgba(255,75,87,.1)}
/* ══ PROJECT → SCENE TREE ══ */
.proj-tree{margin-bottom:4px}
.proj-row{display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:var(--rs);border:1px solid var(--br);background:var(--be);cursor:pointer;transition:all .12s}
.proj-row:hover{border-color:rgba(255,255,255,.15)}
.proj-tree.active>.proj-row{border-color:var(--ba);background:var(--ad)}
.proj-arrow{font-size:8px;color:rgba(255,255,255,.3);width:12px;text-align:center;flex-shrink:0;transition:transform .15s}
.proj-tree.active>.proj-row .proj-arrow{color:var(--ac)}
.proj-name{flex:1;font-size:11px;font-weight:600;color:var(--mu);font-family:var(--fb);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-tree.active>.proj-row .proj-name{color:var(--ac)}
.proj-name[contenteditable]{outline:none;border-bottom:1px solid var(--ba)}
.proj-rename-btn,.proj-scene-add,.proj-del{width:18px;height:18px;border-radius:3px;background:transparent;border:none;color:rgba(255,255,255,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;transition:all .12s;opacity:0;flex-shrink:0}
.proj-row:hover .proj-rename-btn,.proj-row:hover .proj-scene-add,.proj-row:hover .proj-del{opacity:1}
.proj-rename-btn:hover,.proj-scene-add:hover{color:var(--ac);background:rgba(0,255,127,.1)}
.proj-del:hover{color:var(--danger);background:rgba(255,75,87,.1)}
.scene-list{padding-left:16px;margin-top:3px}
.scene-item{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:var(--rs);border:1px solid transparent;cursor:pointer;transition:all .12s;margin-bottom:2px}
.scene-item:hover{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
.scene-item.active{background:var(--ad);border-color:var(--ba)}
.scene-name{flex:1;font-size:10.5px;font-weight:500;color:rgba(255,255,255,.5);font-family:var(--fb);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scene-item.active .scene-name{color:var(--ac);font-weight:600}
.scene-name[contenteditable]{outline:none;border-bottom:1px solid var(--ba)}
.scene-rename-btn,.scene-del{width:16px;height:16px;border-radius:3px;background:transparent;border:none;color:rgba(255,255,255,.25);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:9px;transition:all .12s;opacity:0;flex-shrink:0}
.scene-item:hover .scene-rename-btn,.scene-item:hover .scene-del{opacity:1}
.scene-rename-btn:hover{color:var(--ac);background:rgba(0,255,127,.1)}
.scene-del:hover{color:var(--danger);background:rgba(255,75,87,.1)}
.scene-item.drag-over{border-color:var(--ac);background:rgba(0,255,127,.06)}
.scene-item.dragging{opacity:.45}
.scene-item.drop-before{box-shadow:inset 0 2px 0 var(--ac)}
.scene-item.drop-after{box-shadow:inset 0 -2px 0 var(--ac)}
.proj-tree.drag-over>.proj-row{border-color:var(--ac);background:rgba(0,255,127,.08);box-shadow:0 0 0 1px var(--ac) inset}
.proj-add-btn{width:100%;padding:6px;border-radius:var(--rs);border:1.5px dashed rgba(255,255,255,.1);background:transparent;color:rgba(255,255,255,.3);font-size:10px;font-weight:600;letter-spacing:.1em;cursor:pointer;font-family:var(--fd);transition:all .14s}
.proj-add-btn:hover{border-color:rgba(0,255,127,.35);color:var(--ac)}

/* ══ MULTI-SELECT BULK-DELETE ══
   Checkboxes are rendered into every project + scene row by _renderProjectList
   but stay hidden until #col-out gains .select-mode (toggled by the "Select"
   button in the Projects-tab header). In select-mode the rename / +scene / ✕
   action buttons are also hidden so the entire row reads as one big checkbox
   target. .selected mirrors the box's checked state for a soft accent border. */
.proj-checkbox,.scene-checkbox{display:none;width:14px;height:14px;flex-shrink:0;margin:0;accent-color:var(--ac);cursor:pointer}
#col-out.select-mode .proj-checkbox,
#col-out.select-mode .scene-checkbox{display:inline-block}
#col-out.select-mode .proj-rename-btn,
#col-out.select-mode .proj-scene-add,
#col-out.select-mode .proj-del,
#col-out.select-mode .scene-rename-btn,
#col-out.select-mode .scene-del{display:none}
#col-out.select-mode .proj-row,
#col-out.select-mode .scene-item{cursor:default}
/* Suppress the .active accent (orange/cyan highlight of the currently-open
   project + scene) while in select-mode. .selected is the only signal that
   matters here; .active would otherwise double-style the same row and make
   it ambiguous whether a row is "selected for delete" or "just open." */
#col-out.select-mode .proj-tree.active>.proj-row{border-color:var(--br);background:var(--be)}
#col-out.select-mode .proj-tree.active>.proj-row .proj-name{color:var(--fg)}
#col-out.select-mode .proj-tree.active>.proj-row .proj-arrow{color:rgba(255,255,255,.4)}
#col-out.select-mode .scene-item.active{border-color:transparent;background:transparent}
#col-out.select-mode .scene-item.active .scene-name{color:var(--fg);font-weight:400}
.proj-tree.selected>.proj-row{border-color:var(--ac);background:rgba(0,255,127,.06)}
.scene-item.selected{border-color:var(--ac);background:rgba(0,255,127,.06)}
#col-out.select-mode .proj-tree.selected>.proj-row .proj-name,
#col-out.select-mode .scene-item.selected .scene-name{color:var(--ac);font-weight:600}

.proj-select-bar{display:flex;align-items:center;gap:6px;padding:8px;margin:6px 0;border-radius:var(--rs);background:rgba(0,255,127,.06);border:1px solid rgba(0,255,127,.18)}
.proj-select-bar .psb-count{font-size:12px;color:rgba(255,255,255,.85);font-weight:600;letter-spacing:.02em}
.proj-select-bar .psb-action{padding:4px 10px;border-radius:5px;font-size:11px;font-weight:700;font-family:var(--fb);letter-spacing:.04em;cursor:pointer;border:1px solid rgba(255,255,255,.15);background:transparent;color:rgba(255,255,255,.8);transition:all .12s}
.proj-select-bar .psb-action:hover:not(:disabled){border-color:var(--ac);color:var(--ac)}
.proj-select-bar .psb-action:disabled{opacity:.35;cursor:not-allowed}
.proj-select-bar .psb-delete{color:var(--danger);border-color:rgba(255,75,87,.35)}
.proj-select-bar .psb-delete:hover:not(:disabled){background:rgba(255,75,87,.12);color:var(--danger);border-color:var(--danger)}

/* ══ RIGHT PANEL ══ */

/* Wrapper that takes all remaining height — pbodys fill it via absolute */
.panel-body-wrap{flex:1;min-height:0;position:relative;overflow:hidden}
.pbody{position:absolute;inset:0;overflow-y:auto;padding:11px 12px}
.ps{margin-bottom:17px;scroll-margin-top:10px}
.ps-t{font-size:10px;font-weight:700;letter-spacing:.15em;color:rgba(255,255,255,.4);text-transform:uppercase;font-family:var(--fm);margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--br);display:flex;align-items:center;gap:5px}
.ps-t .dot{width:4px;height:4px;border-radius:50%;background:var(--ac);flex-shrink:0}
.fl{margin-bottom:9px}
.fl:last-child{margin-bottom:0}
.fl label{display:block;font-size:10px;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.42);text-transform:uppercase;font-family:var(--fm);margin-bottom:8px}
.pills{display:flex;flex-wrap:wrap;gap:4px}
.pill{padding:3px 9px;border-radius:999px;font-size:13.5px;font-weight:600;cursor:pointer;background:var(--be);border:1px solid var(--br);color:var(--mu);transition:all .12s;font-family:var(--fb)}
.pill:hover{border-color:rgba(255,255,255,.15);color:var(--fg)}
.pill.on{background:var(--ad);border-color:var(--ba);color:var(--ac)}
.sl-wrap{position:relative;height:18px;display:flex;align-items:center;margin-bottom:3px}
.sl-track{position:absolute;left:0;right:0;height:3px;background:var(--be);border-radius:2px}
.sl-fill{height:3px;background:var(--ac);border-radius:2px;position:absolute;left:0}
.sl-thumb{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--ac);border:2px solid var(--bc);pointer-events:none;top:50%;transform:translateY(-50%)}
.sl-inp{position:absolute;left:0;right:0;width:100%;opacity:0;cursor:pointer;height:18px;margin:0}
.sl-lbl{display:flex;justify-content:space-between;position:relative}.sl-lbl .slb:nth-child(2){position:absolute;left:50%;transform:translateX(-50%)}
.sl-lbl.sl-lbl-abs{position:relative;width:100%;height:16px;display:block}
.sl-lbl-abs .slb{position:absolute;transform:translateX(-50%);white-space:nowrap}
.sl-lbl-abs .slb:first-child{transform:translateX(0)}
.sl-lbl-abs .slb:last-child{transform:translateX(-100%)}
.slb{font-size:10px;color:rgba(255,255,255,.38);font-family:var(--fd);font-weight:500}
.tgrid{display:flex;flex-wrap:wrap;gap:4px}
.tc{width:90px;cursor:pointer;border-radius:6px;overflow:hidden;border:1.5px solid var(--br);transition:all .12s;background:var(--be);flex-shrink:0}
.tc:hover{border-color:rgba(255,255,255,.2)}
.tc.on{border-color:var(--ac)}
.ti{width:100%;height:60px;display:flex;align-items:center;justify-content:center;font-size:14px;overflow:hidden}
.ti img{transform:scale(1.5)}
#tg-style .ti{height:90px}
#tg-style .ti img{transform:none}
.tl{font-size:12px;font-weight:600;padding:3px 4px;color:var(--mu);text-align:center;white-space:normal;overflow-wrap:break-word;word-wrap:break-word;line-height:1.3}
.tc.on .tl{color:var(--ac)}
.tc{color:var(--di)}
.tc:hover{color:rgba(255,255,255,.35)}
.tc.on{color:var(--ac)}
.btn-more{width:100%;padding:3px;border-radius:var(--rs);font-size:12.2px;font-weight:600;cursor:pointer;background:transparent;border:1px solid var(--br);color:var(--di);font-family:var(--fb);margin-top:4px}
.btn-more:hover{color:var(--mu)}
.cbs{display:flex;flex-wrap:wrap;gap:4px}
.cb{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:var(--rs);border:1px solid var(--br);background:var(--be);cursor:pointer;transition:all .12s}
.cb.on{border-color:var(--ba);background:var(--ad)}
.cb-bx{width:11px;height:11px;border-radius:2px;border:1.5px solid var(--di);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.cb.on .cb-bx{background:var(--ac);border-color:var(--ac)}
.cb.on .cb-bx::after{content:'\2713';font-size:9.5px;color:#000;font-weight:800}
.cb-lb{font-size:13.5px;font-weight:500;color:var(--mu)}
.cb.on .cb-lb{color:var(--ac)}
.cat-tabs{display:flex;gap:3px;margin-bottom:7px;flex-wrap:wrap}
.ctab{padding:2px 8px;border-radius:999px;font-size:12.2px;font-weight:600;cursor:pointer;border:1px solid var(--br);background:transparent;color:var(--di);font-family:var(--fb);transition:all .12s}
.ctab.on{background:var(--ad);border-color:var(--ba);color:var(--ac)}
.upzone{border:1.5px dashed rgba(255,255,255,.09);border-radius:var(--rs);padding:12px;text-align:center;cursor:pointer;background:var(--be)}
.upzone:hover{border-color:var(--ba);background:var(--ad)}
.mprow{display:flex;flex-wrap:wrap;gap:4px}
.mp{padding:3px 9px;border-radius:999px;font-size:12.2px;font-weight:600;cursor:pointer;border:1px solid var(--br);background:var(--be);color:var(--mu);transition:all .12s;font-family:var(--fb)}
.mp.on{background:var(--ac);color:#0a0a0a;border-color:var(--ac)}
.mp.lk{opacity:.35;cursor:not-allowed}
.cntrow{display:flex;gap:3px}
.cnt{width:25px;height:25px;border-radius:var(--rs);border:1px solid var(--br);background:var(--be);color:var(--mu);font-size:14.9px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s}
.cnt.on{background:var(--ac);color:#0a0a0a;border-color:var(--ac)}

/* status */
.status{height:20px;flex-shrink:0;background:var(--bc);border-top:1px solid var(--br);display:flex;align-items:center;padding:0 14px;gap:14px}
.sti{font-size:10.8px;color:var(--di);font-family:var(--fm);display:flex;align-items:center;gap:3px}
.std{width:4px;height:4px;border-radius:50%;background:var(--ac)}

/* gradient helpers */
.vb-hy{background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460)}
.vb-fm{background:linear-gradient(135deg,#2d1b00,#5c3a00)}
.vb-nr{background:#111}
.vb-an{background:linear-gradient(135deg,#ff9a9e,#fecfef)}
.vb-3d{background:linear-gradient(135deg,#0d47a1,#42a5f5)}
.vb-vhs{background:#1a1a1a}
.vb-cy{background:linear-gradient(135deg,#0d0221,#190635)}
.vb-wc{background:linear-gradient(135deg,#e8f5e9,#b3e5fc)}
.vb-gh{background:linear-gradient(180deg,#f4a340,#ff7043,#1a0a00)}
.vb-nt{background:linear-gradient(180deg,#050510,#0d0d2e)}
.vb-bh{background:linear-gradient(180deg,#1a237e,#311b92)}
.vb-nn{background:linear-gradient(180deg,#87ceeb,#e0f7fa)}
.vb-ss{background:linear-gradient(180deg,#ff6b35,#c62828)}
.vb-kd{background:linear-gradient(135deg,#d4880e,#8b1a00)}
.vb-to{background:linear-gradient(135deg,#004d5c,#ff6b35)}
.vb-bb{background:linear-gradient(135deg,#d0d0d0,#404040)}
.vb-cs{background:linear-gradient(135deg,#0a0a1a,#2d1040)}
.vb-mn{background:linear-gradient(135deg,#111,#ccc)}
.vb-ne{background:linear-gradient(135deg,#1a1a2e,#363636,#c8c8c8)}

@keyframes hl{0%{box-shadow:0 0 0 2px var(--ac)}100%{box-shadow:none}}
.ps.hl{animation:hl .7s ease-out}
@keyframes sb-blink{0%{box-shadow:none}30%{box-shadow:0 0 6px var(--ac),0 0 14px var(--ac)}100%{box-shadow:none}}
.sb-target-hl{animation:sb-blink .5s ease-out forwards!important;border-radius:6px;overflow:visible!important;z-index:10;position:relative}
/* ad-hl styles injected via JS (external CSS parsing issue workaround) */

/* ── Liked button ── */
.liked-btn{width:22px;height:22px;border-radius:4px;border:1px solid var(--br);background:transparent;color:var(--di);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;line-height:1}
.liked-btn.on{color:var(--ac);border-color:var(--ba);background:var(--ag)}

/* ── App Modal ── */
.app-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:9999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.app-modal{background:var(--bc);border:1px solid var(--br);border-radius:12px;padding:24px;min-width:320px;max-width:480px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.app-modal-msg{font-size:14px;font-weight:600;color:var(--fg);font-family:var(--fb);margin-bottom:16px;line-height:1.5;white-space:pre-line}
.app-modal-input{width:100%;padding:8px 12px;border-radius:var(--rs);border:1px solid var(--br);background:var(--bg);color:var(--fg);font-size:14px;font-family:var(--fb);outline:none;margin-bottom:16px;box-sizing:border-box}
.app-modal-input:focus{border-color:var(--ac);box-shadow:0 0 6px rgba(0,255,127,.25)}
.app-modal-pre{background:var(--bg);border:1px solid var(--br);border-radius:var(--rs);padding:12px;font-size:12px;font-family:var(--fm);color:var(--mu);line-height:1.6;white-space:pre-wrap;word-break:break-word;max-height:300px;overflow-y:auto;margin-bottom:16px}
.app-modal-btns{display:flex;gap:8px;justify-content:flex-end}
.app-modal-btn{padding:7px 18px;border-radius:var(--rs);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--fb);border:1px solid var(--br);background:transparent;color:var(--mu);transition:all .15s}
.app-modal-btn:hover{color:var(--fg);border-color:rgba(255,255,255,.2)}
.app-modal-btn.accent{background:var(--ac);border-color:var(--ac);color:#0a0a0a}
.app-modal-btn.accent:hover{background:#00e870}
.app-modal-btn.danger{background:rgba(255,75,87,.12);border-color:rgba(255,75,87,.3);color:#ff4b57}
.app-modal-btn.danger:hover{background:rgba(255,75,87,.25)}

/* ── Video mode accent (#00D4AA) ── */
body.vid-mode .vf-box{display:none!important}
body.vid-mode .occ-box{display:none!important}
body.vid-mode .pv-rf{border-color:transparent;background:transparent}
body.vid-mode .pv-rf-grid{display:none}
body.vid-mode .thirds-dot{display:none}
body.vid-mode .vf-corner{display:none}
body.vid-mode .pv-vf-framebar{display:none!important}
body.vid-mode .vf-toggle-wrap{display:none!important}
body.vid-mode{
  --ac:#00ffff;--ag:rgba(0,255,255,.14);--ad:rgba(0,255,255,.06);
  --ba:rgba(0,255,255,.28);--br-ac:rgba(0,255,255,.55)
}

/* ── Generate Mode selector ── */
.gmode-btn{width:100%;padding:7px 10px;border-radius:6px;border:1.5px solid rgba(255,255,255,.09);background:rgba(255,255,255,.02);color:rgba(255,255,255,.38);font-size:9.5px;font-weight:600;letter-spacing:.06em;cursor:pointer;font-family:var(--fd);text-align:left;transition:all .14s}
.gmode-btn:hover:not(.on){border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.6);background:rgba(255,255,255,.04)}
.gmode-btn.on{border-color:var(--ac);background:var(--ad);color:var(--ac)}
.vsm-tab{padding:7px 6px;font-size:9.5px;font-weight:600;letter-spacing:.05em;color:rgba(255,255,255,.38);border:none;background:transparent;cursor:pointer;font-family:var(--fd);border-bottom:2px solid transparent;transition:all .14s}
.vsm-tab.on{color:var(--ac);border-bottom-color:var(--ac)}
.vsm-tab:hover:not(.on){color:rgba(255,255,255,.6)}
.vsm-panel{padding:10px 12px}
.vsm-slot{width:80px;flex-shrink:0;border:1.5px dashed rgba(255,255,255,.14);border-radius:8px;padding:6px;cursor:pointer;transition:all .14s;position:relative;overflow:hidden;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:rgba(255,255,255,.02)}
.vsm-slot:hover{border-color:var(--ba);background:var(--ad)}
.vsm-slot.filled{border-style:solid;border-color:var(--ac);background:var(--ad)}
.vsm-slot-optional{border-color:rgba(255,255,255,.08)}
.vsm-slot-img{position:absolute;inset:0;border-radius:6px;background-size:cover;background-position:center;opacity:0;transition:opacity .2s}
.vsm-slot.filled .vsm-slot-img{opacity:1}
.vsm-slot-lbl{font-size:8.5px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.55);font-family:var(--fd);position:relative;z-index:1;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.vsm-slot.filled .vsm-slot-lbl{display:none}
.vsm-slot-hint{font-size:8px;color:rgba(255,255,255,.28);font-family:var(--fd);position:relative;z-index:1;text-align:center;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.vsm-slot.filled .vsm-slot-hint{display:none}
.vsm-slot-sub{font-size:9px;color:rgba(255,255,255,.22);font-family:var(--fd);position:relative;z-index:1;text-align:center;line-height:1.4;margin-top:2px}
.vsm-slot.filled .vsm-slot-sub{display:none}
.vsm-slot.drag-over{border-color:var(--ac);background:rgba(0,255,127,.08);border-style:solid}

/* ── Reference image section ── */
.ref-upload-btn{width:100%;min-height:52px;padding:8px;border-radius:6px;border:1.5px dashed rgba(255,255,255,.12);background:transparent;color:rgba(255,255,255,.35);font-size:10px;font-weight:600;letter-spacing:.08em;cursor:pointer;font-family:var(--fd);transition:all .14s;margin-bottom:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.ref-upload-btn:hover{border-color:rgba(0,255,127,.35);color:var(--ac)}
.ref-upload-btn:hover .ref-upload-label{color:var(--ac)}
.ref-upload-label{color:rgba(255,255,255,.35);font-size:10px;font-weight:600;letter-spacing:.08em;transition:color .14s}
.ref-upload-btn .ref-grid:empty{display:none}
.ref-upload-btn .ref-grid{width:100%}
.ref-mode-row{display:flex;align-items:center;gap:12px;margin-bottom:6px;justify-content:center}
.ref-radio{display:flex;align-items:center;gap:4px;cursor:pointer;font-size:9px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.5);font-family:var(--fd);white-space:nowrap}
.ref-radio input{display:none}
.ref-radio-dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;transition:all .14s;flex-shrink:0}
.ref-radio input:checked+.ref-radio-dot{border-color:var(--ac);background:var(--ac);box-shadow:inset 0 0 0 3px var(--bg)}
.ref-radio input:checked~*{color:var(--ac)}
.ref-radio:has(input:checked){color:var(--ac)}
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sref-card{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:1/1;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.1);cursor:pointer}
.sref-tag{position:absolute;bottom:3px;left:3px;background:rgba(0,0,0,.75);color:var(--ac);font-size:7px;font-weight:700;letter-spacing:.06em;padding:2px 5px;border-radius:3px;font-family:var(--fd)}

/* ── Settings panel font scale ── */
.col-panel .ps-t{font-size:14px}
.col-panel .fl label,.col-panel label{font-size:14px}
.col-panel .tl{font-size:12px}
.col-panel .sl-lbl,.col-panel .slb{font-size:10px}
.col-panel .cb-lb{font-size:14.3px}
.col-panel .mprow .mp{font-size:14.3px}
.col-panel .cntrow .cnt{font-size:15px}
.col-panel .ti-inp{font-size:14.3px}
.col-panel .vsm-tab{font-size:14.3px}
.col-panel .vsm-slot-lbl{font-size:12px}
.col-panel .vsm-slot-hint{font-size:11px}
.col-panel .vsm-slot{min-height:72px;min-width:88px}
.col-panel .vsm-panel{font-size:12.5px}
.col-panel .vsm-panel div[style*="font-size:8px"]{font-size:12.5px!important}
.col-panel .vsm-panel span[style*="font-size:8px"]{font-size:12.5px!important}
.col-panel .gmode-btn{font-size:14.3px}
.col-panel .ps-t .dot{width:5px;height:5px}

/* ====== LANDING PAGE ====== */

#landing-page {
  display: none;
}

#landing-page.active {
  display: block;
}

/* Film grain overlay for landing page */
#landing-page::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: .018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px;
  pointer-events: none;
  z-index: 9999;
}

#landing-page a { text-decoration: none; color: inherit; }
#landing-page .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Scroll progress bar */
#landing-page .scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 200;
}

/* Landing NAV */
#landing-page nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(23,24,26,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  transition: transform .3s, background .3s;
}

#landing-page nav.nav-hidden {
  transform: translateY(-100%);
}

#landing-page .nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#landing-page .logo {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--accent);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(0,255,127,0.4);
}


#landing-page .nav-cta {
  display: flex;
  gap: 10px;
  align-items: center;
}

#landing-page .btn {
  padding: 10px 22px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
}

#landing-page .btn-primary {
  background: var(--accent);
  color: #000;
  box-shadow: 0 0 20px rgba(0,255,127,0.25);
}

#landing-page .btn-primary:hover {
  box-shadow: 0 0 30px rgba(0,255,127,0.4);
  transform: translateY(-1px);
}

#landing-page .btn-ghost {
  border: 1px solid var(--border-accent);
  color: var(--accent);
  background: transparent;
}

#landing-page .btn-ghost:hover {
  background: var(--accent-dim);
}

#landing-page .btn-large {
  padding: 16px 36px;
  font-size: 16px;
}

/* Language toggle */
#landing-page .lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-left: 12px;
  padding: 8px;
  border-radius: var(--radius-full);
  transition: all .2s;
}

#landing-page .lang-toggle:hover {
  background: var(--bg-elevated);
}

#landing-page .lang-toggle svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#landing-page .lang-toggle:hover svg {
  stroke: var(--text-default);
}

#landing-page .lang-toggle span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .3px;
}

#landing-page .lang-toggle:hover span {
  color: var(--text-default);
}

/* Header language toggle (Director app, outside #landing-page) */
.hdr > .lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  margin-left: 6px;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--mu, #9a9aae);
  transition: background .12s, color .12s;
}
.hdr > .lang-toggle:hover {
  background: rgba(255, 255, 255, .04);
  color: var(--text-default, #e8e8ef);
}
.hdr > .lang-toggle svg { stroke: currentColor; }
.hdr > .lang-toggle span { font-size: 11px; font-weight: 600; letter-spacing: .3px; }

/* HERO */
#landing-page .hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 120px 0 80px;
}

#landing-page .hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -15%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(0,255,127,0.08) 0%, transparent 60%);
  pointer-events: none;
  animation: landing-heroPulse 8s ease infinite alternate;
}

#landing-page .hero::after {
  content: '';
  position: absolute;
  bottom: -10%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0,212,170,0.05) 0%, transparent 60%);
  pointer-events: none;
}

@keyframes landing-heroPulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.2); opacity: 1; }
}

#landing-page .hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

#landing-page .hero-content {
  position: relative;
  z-index: 2;
}

#landing-page .hero h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 56px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: 20px;
}

#landing-page .hero h1 .gradient {
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#landing-page .hero-tagline {
  font-size: 20px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
  font-family: 'DM Sans', sans-serif;
}

#landing-page .hero-tagline strong {
  color: var(--text-default);
  font-weight: 600;
}

#landing-page .hero-slogan {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 32px;
}

#landing-page .hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

#landing-page .hero-visual {
  position: relative;
  z-index: 2;
}

/* Reveal animation */
#landing-page .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}

#landing-page .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Section common */
#landing-page section {
  padding: 100px 0;
  position: relative;
}

#landing-page .section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

#landing-page .section-label .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

#landing-page .section-title {
  font-family: 'Outfit', sans-serif;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 16px;
}

#landing-page .section-subtitle {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 600px;
  line-height: 1.6;
  font-family: 'DM Sans', sans-serif;
}

/* VIEWFINDER */
#landing-page .viewfinder { position: relative; }

#landing-page .vf-screen {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,.5), var(--shadow-glow);
}

#landing-page .vf-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0a0a1a 0%, #1a1020 30%, #2a1a0a 60%, #1a1510 100%);
  opacity: .7;
}

#landing-page .vf-grid .vf-line-h {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,0.1);
}

#landing-page .vf-grid .vf-line-v {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.1);
}

#landing-page .vf-grid .vf-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,255,127,0.5);
  transform: translate(-50%, -50%);
}

#landing-page .vf-subject {
  position: absolute;
  top: 50%;
  left: 66.66%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}

#landing-page .vf-subject-box {
  width: 96px;
  height: 156px;
  border: 2px solid var(--accent);
  position: relative;
  animation: landing-subjectPulse 3s ease infinite;
}

#landing-page .vf-subject-box::before,
#landing-page .vf-subject-box::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
}

#landing-page .vf-subject-box::before {
  top: -2px;
  left: -2px;
  border-top: 3px solid var(--accent);
  border-left: 3px solid var(--accent);
}

#landing-page .vf-subject-box::after {
  bottom: -2px;
  right: -2px;
  border-bottom: 3px solid var(--accent);
  border-right: 3px solid var(--accent);
}

@keyframes landing-subjectPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(0,255,127,0); }
  50% { box-shadow: 0 0 20px rgba(0,255,127,0.15); }
}

#landing-page .vf-subject-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 2px;
  margin-top: 6px;
}

#landing-page .vf-bracket {
  position: absolute;
  width: 24px;
  height: 24px;
  z-index: 2;
}

#landing-page .vf-bracket.tl { top: 12px; left: 12px; border-top: 2px solid rgba(255,255,255,0.3); border-left: 2px solid rgba(255,255,255,0.3); }
#landing-page .vf-bracket.tr { top: 12px; right: 12px; border-top: 2px solid rgba(255,255,255,0.3); border-right: 2px solid rgba(255,255,255,0.3); }
#landing-page .vf-bracket.bl { bottom: 12px; left: 12px; border-bottom: 2px solid rgba(255,255,255,0.3); border-left: 2px solid rgba(255,255,255,0.3); }
#landing-page .vf-bracket.br { bottom: 12px; right: 12px; border-bottom: 2px solid rgba(255,255,255,0.3); border-right: 2px solid rgba(255,255,255,0.3); }

#landing-page .vf-hud-top {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}

#landing-page .vf-hud-bottom {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 3;
}

#landing-page .vf-hud-left {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
}

#landing-page .vf-hud-right {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
  text-align: right;
}

#landing-page .vf-tag {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.4);
  padding: 3px 8px;
  border-radius: 4px;
}

#landing-page .vf-tag.active {
  color: var(--accent);
  border: 1px solid rgba(0,255,127,0.3);
  background: rgba(0,255,127,0.08);
}

#landing-page .vf-param {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

#landing-page .vf-pk {
  font-family: 'DM Mono', monospace;
  font-size: 7px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.25);
}

#landing-page .vf-pv {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}

#landing-page .vf-rec {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: #ff4444;
  letter-spacing: 1px;
  animation: landing-recBlink 1.5s infinite;
}

@keyframes landing-recBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

#landing-page .vf-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  z-index: 3;
}

#landing-page .vf-crosshair::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,0.15);
}

#landing-page .vf-crosshair::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.15);
}

/* PRO QUALITY SECTION */
#landing-page .pro-quality-section { position: relative; }

#landing-page .pro-quality-bg { position: absolute; inset: 0; z-index: 0; }

#landing-page .pro-quality-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0a001a 0%, #1a0a2e 20%, #2a1520 40%, #1a1a0a 60%, #0a1a1a 80%, #0a0a1a 100%);
  animation: landing-proShift 12s ease infinite alternate;
}

@keyframes landing-proShift {
  0% { filter: hue-rotate(0deg) brightness(0.8); }
  33% { filter: hue-rotate(20deg) brightness(1); }
  66% { filter: hue-rotate(-15deg) brightness(0.9); }
  100% { filter: hue-rotate(10deg) brightness(1.1); }
}

#landing-page .pro-quality-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23,24,26,0.7) 0%, rgba(23,24,26,0.4) 40%, rgba(23,24,26,0.4) 60%, rgba(23,24,26,0.8) 100%);
}

/* CONTROL GRID (Toolkit cards) */
#landing-page .control-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}

#landing-page .control-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 28px 24px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

#landing-page .control-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}

#landing-page .control-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity .3s;
}

#landing-page .control-card:hover::before { opacity: 1; }

#landing-page .cc-icon {
  margin-bottom: 14px;
  display: block;
  width: 36px;
  height: 36px;
}

#landing-page .cc-icon svg { width: 36px; height: 36px; }

#landing-page .cc-title {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

#landing-page .cc-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  font-family: 'DM Sans', sans-serif;
}

/* PAIN POINTS */
#landing-page .pain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}

#landing-page .pain-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  transition: all .3s;
}

#landing-page .pain-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-4px);
}

#landing-page .pain-num {
  font-family: 'Outfit', sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
}

#landing-page .pain-stat {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

#landing-page .pain-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  font-family: 'DM Sans', sans-serif;
}

/* COMPARE */
#landing-page .compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}

#landing-page .compare-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 32px;
}

#landing-page .compare-card.pro {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}

#landing-page .compare-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

#landing-page .compare-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

#landing-page .compare-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#landing-page .compare-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}

#landing-page .compare-item .ci-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

#landing-page .compare-item .ci-text {
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
}

#landing-page .compare-card.pro .ci-text {
  color: var(--text-default);
}

/* FINAL CTA */
#landing-page .final-cta {
  text-align: center;
  padding: 120px 0;
  position: relative;
}

#landing-page .final-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0,255,127,0.06), transparent 60%);
  pointer-events: none;
}

#landing-page .final-cta .btn { position: relative; }

/* GO TO TOP */
#landing-page .go-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  box-shadow: 0 4px 20px rgba(0,255,127,0.3);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
  border: none;
}

#landing-page .go-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

#landing-page .go-top:hover {
  box-shadow: 0 4px 30px rgba(0,255,127,0.5);
  transform: translateY(-2px);
}

#landing-page .go-top svg {
  width: 22px;
  height: 22px;
  stroke: #000;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* FOOTER */
#landing-page footer {
  border-top: 1px solid var(--border-subtle);
  padding: 48px 24px 32px;
  max-width: 1200px;
  margin: 0 auto;
}

#landing-page .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  margin-bottom: 32px;
}

#landing-page .footer-brand p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 12px;
  line-height: 1.6;
  font-family: 'DM Sans', sans-serif;
}

#landing-page .footer-column h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-default);
  margin-bottom: 14px;
}

#landing-page .footer-column a {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  padding: 4px 0;
  transition: color .2s;
}

#landing-page .footer-column a:hover { color: var(--accent); }

#landing-page .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
}

#landing-page .footer-bottom p {
  font-size: 12px;
  color: var(--text-dim);
}

/* ══ REFERENCE SLOTS GRID ══ */
.ref-slots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.ref-slot{aspect-ratio:1;background:var(--be);border:1px solid var(--br);border-radius:var(--rs);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s;position:relative;overflow:hidden}
.ref-slot:hover{border-color:var(--ba)}
.ref-slot-plus{font-size:22px;color:var(--di);font-weight:300;line-height:1}
/* Single-image legacy (used by video slots only) */
.ref-slot > img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.ref-slot-label{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:10.5px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.5);font-family:var(--fd);text-transform:uppercase;z-index:1;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.ref-slot-del{position:absolute;top:3px;right:3px;width:20px;height:20px;background:rgba(0,0,0,.65);border:none;border-radius:50%;color:rgba(255,255,255,.8);font-size:13px;line-height:20px;text-align:center;cursor:pointer;z-index:3;opacity:0;transition:opacity .15s}
.ref-slot:hover .ref-slot-del{opacity:1}
.ref-slot-del:hover{background:rgba(220,50,50,.8);color:#fff}
/* Multi-image thumbnail grid inside a ref slot */
.ref-slot-thumbs{display:grid;gap:2px;position:absolute;inset:0;padding:3px;z-index:1;align-content:start}
.ref-slot-thumb{position:relative;border-radius:3px;overflow:hidden;aspect-ratio:1;min-width:0}
.ref-slot-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ref-slot-thumb-del{position:absolute;top:2px;right:2px;width:16px;height:16px;background:rgba(0,0,0,.75);border:none;border-radius:50%;color:#fff;font-size:10px;line-height:16px;text-align:center;cursor:pointer;z-index:3;opacity:0;transition:opacity .15s;padding:0}
.ref-slot:hover .ref-slot-thumb-del{opacity:.7}
.ref-slot-thumb-del:hover{opacity:1!important;background:rgba(220,50,50,.9)}
.ref-slot-add{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px dashed var(--br);border-radius:3px;color:var(--di);font-size:16px;cursor:pointer;transition:border-color .15s;min-width:0}
.ref-slot-add:hover{border-color:var(--ac);color:var(--ac)}
.ref-slot-count{position:absolute;top:3px;left:3px;min-width:16px;height:16px;background:var(--ac);border-radius:8px;color:#000;font-size:10px;font-weight:700;line-height:16px;text-align:center;z-index:4;padding:0 3px}

/* ══ VIDEO GENERATE MODE GRIDS ══ */
.vsm-frame-grid,.vsm-ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.vsm-arrow-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:rgba(255,255,255,.25);letter-spacing:2px;font-family:var(--fd)}
.vsm-slot-img{position:absolute;inset:0;border-radius:6px;background-size:cover;background-position:center;opacity:0;transition:opacity .2s;z-index:1}
.ref-slot.filled .vsm-slot-img{opacity:1}
.ref-slot.filled .ref-slot-plus,.ref-slot.filled .ref-slot-label{display:none}
.ref-slot.filled .ref-slot-del{display:block;opacity:0}
.ref-slot.filled:hover .ref-slot-del{opacity:1}
.ref-slot.filled{border-style:solid;border-color:var(--ac)}
.ref-slot.drag-over{border-color:var(--ac)!important;background:rgba(0,255,127,.08)!important;border-style:solid!important}

/* ══ DIRECTOR MODE BUTTONS ══ */
.director-mode-row{display:flex;gap:4px;margin-bottom:12px}
.dmode-btn{flex:1;padding:7px 0;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-family:var(--fd);background:var(--be);border:1px solid var(--br);border-radius:var(--rs);color:var(--di);cursor:pointer;transition:all .15s}
.dmode-btn:hover{border-color:var(--ba);color:var(--fg)}
.dmode-btn.on{background:var(--ac);color:var(--bg);border-color:var(--ac)}

/* ══ RAINBOW GLOW (box-shadow approach — no pseudo-element bleed) ══ */
.rainbow-glow{transition:box-shadow .3s}
.rainbow-glow{position:relative;z-index:1}
.rainbow-glow::before{content:'';position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:conic-gradient(#f06,#f90,#ff0,#0f0,#0ff,#60f,#f06);filter:blur(7px);opacity:0;transition:opacity .3s}
.rainbow-glow.active::before{opacity:.5;animation:rainbowSpin 2s linear infinite,rainbowPulse 2s ease-in-out infinite}
@keyframes rainbowSpin{to{filter:blur(7px) hue-rotate(360deg)}}
@keyframes rainbowPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.005)}}

@keyframes spectrum-glow{
  0%{box-shadow:0 0 8px rgba(255,0,0,.4),0 0 20px rgba(255,0,0,.2)}
  16%{box-shadow:0 0 8px rgba(255,165,0,.4),0 0 20px rgba(255,165,0,.2)}
  33%{box-shadow:0 0 8px rgba(255,255,0,.4),0 0 20px rgba(255,255,0,.2)}
  50%{box-shadow:0 0 8px rgba(0,255,127,.4),0 0 20px rgba(0,255,127,.2)}
  66%{box-shadow:0 0 8px rgba(0,191,255,.4),0 0 20px rgba(0,191,255,.2)}
  83%{box-shadow:0 0 8px rgba(138,43,226,.4),0 0 20px rgba(138,43,226,.2)}
  100%{box-shadow:0 0 8px rgba(255,0,0,.4),0 0 20px rgba(255,0,0,.2)}
}
.spectrum-glow{animation:spectrum-glow 2s ease-in-out 1;border-radius:6px}
@keyframes title-glow{
  0%{text-shadow:none}
  20%{text-shadow:0 0 8px var(--ac),0 0 16px var(--ac)}
  80%{text-shadow:0 0 8px var(--ac),0 0 16px var(--ac)}
  100%{text-shadow:none}
}
.title-glow{animation:title-glow 2s ease-in-out forwards;color:var(--ac)!important}
.terminal-welcome{color:var(--di);font-size:12px;font-style:italic;font-family:var(--fb)}

/* ====== APP RESPONSIVE (mobile) ====== */
@media (max-width: 900px) {
  .app { flex-direction: column; overflow-y: auto; }
  .col-out { max-height: 45vh; border-right: none; border-bottom: 1px solid var(--br); }
  .col-ctr { flex: none; border-right: none; border-bottom: 1px solid var(--br); }
  .col-panel { flex: none; }
  .pv-section { flex: none; min-height: auto; }
  .pv-section canvas { max-height: 35vh; }
  .txt-terminal-row { flex-direction: column; }
  .terminal-col { border-left: none; border-top: 1px solid var(--br); max-height: 200px; padding: 8px; }
}

/* ====== LANDING PAGE RESPONSIVE ====== */

@media (max-width: 900px) {
  #landing-page .pain-grid { grid-template-columns: 1fr 1fr !important; }
  #landing-page .hero-grid,
  #landing-page .compare-grid { grid-template-columns: 1fr; }
  #landing-page .control-grid { grid-template-columns: 1fr 1fr !important; }
  #landing-page .hero h1 { font-size: 36px; letter-spacing: -1px; }
  #landing-page .section-title { font-size: 30px; letter-spacing: -1px; }
  #landing-page .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  #landing-page .hero-grid { gap: 40px; }
  #landing-page .hero-visual { order: -1; }
  #landing-page .pro-quality-section { aspect-ratio: auto !important; padding: 100px 0 !important; }
}

@media (max-width: 600px) {
  #landing-page .nav-container { padding: 12px 16px; }
  #landing-page .logo { font-size: 15px; letter-spacing: 1px; }
  #landing-page .btn-ghost.nav-hide-mobile { display: none; }
  #landing-page .nav-cta { gap: 8px; }
  #landing-page .nav-cta .btn { padding: 8px 14px; font-size: 11px; }
  #landing-page .lang-toggle span { display: none; }
  #landing-page .lang-toggle { margin-left: 4px; }
  #landing-page .hero { min-height: auto; padding: 90px 0 50px; }
  #landing-page .hero h1 { font-size: 30px; letter-spacing: -1px; }
  #landing-page .hero-tagline { font-size: 15px; }
  #landing-page .hero-slogan { font-size: 13px; }
  #landing-page .hero-buttons { flex-direction: column; }
  #landing-page .hero-buttons .btn { text-align: center; justify-content: center; }
  #landing-page .btn-large { padding: 14px 24px; font-size: 14px; }
  #landing-page .hero-grid { gap: 32px; }
  #landing-page .vf-hud-left,
  #landing-page .vf-hud-right { display: none; }
  #landing-page .vf-screen { aspect-ratio: 16/9; }
  #landing-page .container { padding: 0 16px; }
  #landing-page section { padding: 60px 0; }
  #landing-page .section-title { font-size: 26px; }
  #landing-page .section-subtitle { font-size: 14px; }
  #landing-page .section-label { font-size: 10px; }
  #landing-page .pro-quality-section { padding: 80px 0 !important; }
  #landing-page .pro-quality-section .section-title { font-size: 30px !important; }
  #landing-page .control-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  #landing-page .pain-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  #landing-page .compare-grid { gap: 16px; }
  #landing-page .pain-card { padding: 24px 20px; }
  #landing-page .pain-num { font-size: 36px; }
  #landing-page .control-card { padding: 22px 18px; }
  #landing-page .cc-title { font-size: 16px; }
  #landing-page .cc-desc { font-size: 12px; }
  #landing-page .cc-icon svg { width: 30px; height: 30px; }
  #landing-page .compare-card { padding: 24px 20px; }
  #landing-page .compare-item { font-size: 13px; }
  #landing-page .footer-grid { grid-template-columns: 1fr; text-align: center; }
  #landing-page .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  #landing-page .go-top { bottom: 20px; right: 20px; width: 42px; height: 42px; }
}

/* ====== PLAN SELECTION ====== */

.plan-cards {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.plan-card {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: border-color 0.2s, transform 0.2s;
}

.plan-card:hover {
  border-color: var(--text-muted);
  transform: translateY(-2px);
}

.plan-card-featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(0, 255, 127, 0.04) 0%, transparent 60%);
}

.plan-card-featured:hover {
  border-color: var(--accent);
}

.plan-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.plan-badge-pro {
  color: var(--accent);
}

.plan-price {
  text-align: center;
}

.plan-amount {
  font-size: 40px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.plan-period {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted);
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.plan-features li {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.plan-features li:last-child {
  border-bottom: none;
}

.btn-plan {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.btn-plan:active {
  transform: scale(0.98);
}

.btn-plan-free {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.btn-plan-free:hover {
  background: var(--border);
}

.btn-plan-pro {
  background: var(--accent);
  color: #000;
}

.btn-plan-pro:hover {
  background: #00e06e;
}

.btn-upgrade-dismiss {
  display: block;
  margin: 20px auto 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 8px 16px;
}

.btn-upgrade-dismiss:hover {
  color: var(--text-primary);
}

/* ====== PRICING PAGE ====== */

.pricing-page {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 800;
  background: var(--bg);
  overflow-y: auto;
  padding: 40px 24px 80px;
}
.pricing-page.active { display: block; }
/* Standalone purchase.html — always visible, not an overlay */
.pricing-page.standalone {
  display: block;
  position: static;
  min-height: 100vh;
}

.pricing-hdr {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 1380px;        /* matches .pricing-cards (now 4-wide) */
  margin: 0 auto 32px;
}
.pricing-back {
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--fg);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 4px;
}
.pricing-back:hover { background: var(--bg-hover); }
.pricing-title {
  font-family: var(--fd);
  font-size: 28px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 4px;
}
.pricing-subtitle {
  font-size: 14px;
  color: var(--mu);
  margin: 0;
}

/* Pricing toggles row — three-column grid so the billing cycle stays
   truly centered while the currency toggle hugs the right edge.
   Layout:  [ 1fr spacer ] [ auto  Monthly|Yearly ] [ 1fr  USD|KRW → right ] */
.pricing-toggles-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  /* Match `.pricing-hdr` / `.pricing-cards` so the right-aligned currency
     toggle stops at the same edge as the plan cards below — not at the
     page edge, which felt too far out. */
  max-width: 1380px;
  margin: 0 auto 32px;
  padding: 0 24px;
}
.pricing-toggles-row .billing-toggle {
  grid-column: 2;
  justify-self: center;
  margin: 0;
}
.pricing-toggles-row .currency-toggle {
  grid-column: 3;
  justify-self: end;
  margin: 0;
}
/* Currency toggle shares .bt-opt look but is tighter. */
.currency-toggle {
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  width: fit-content;
}
.currency-toggle .bt-opt {
  padding: 10px 18px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
/* On narrow screens, fall back to a centered column so both toggles
   stay readable instead of being squashed by the 1fr spacers. */
@media (max-width: 720px) {
  .pricing-toggles-row {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .pricing-toggles-row .billing-toggle,
  .pricing-toggles-row .currency-toggle {
    grid-column: 1;
    justify-self: center;
  }
}

/* Billing toggle */
.billing-toggle {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  width: fit-content;
}
.bt-opt {
  padding: 10px 24px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--di);
  font-size: 14px;
  font-family: var(--fb);
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bt-opt.on {
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255,255,255,.15);
}
.bt-opt:hover:not(.on) { color: var(--fg); }
.bt-save {
  background: var(--accent);
  color: #000;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
}

/* Plan cards grid */
.pricing-cards {
  display: flex;
  flex-wrap: wrap;          /* 4 cards now — wrap to a 2nd row on viewports */
  gap: 20px;                /* too narrow to fit all four side-by-side */
  justify-content: center;
  max-width: 1380px;        /* 4 × 320 + 3 × 20 = 1340 + breathing room */
  margin: 0 auto 48px;
}

/* Individual pricing card */
.pricing-card {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px;
  width: 320px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.pricing-card-featured {
  border-color: var(--accent);
  box-shadow: 0 0 32px rgba(0,255,127,.06);
}

/* Popular badge */
.pricing-popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #000;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 14px;
  border-radius: 8px;
  white-space: nowrap;
}

/* Card header */
.pricing-card-tier {
  font-family: var(--fd);
  font-size: 14px;
  font-weight: 600;
  color: var(--mu);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Price row */
.pricing-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
.pricing-card-price {
  font-family: var(--fd);
  font-size: 40px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1;
}
.pricing-card-per {
  font-size: 16px;
  font-weight: 400;
  color: var(--mu);
}
.pricing-price-old {
  display: block;          /* own line above the main price — keeps the */
  width: 100%;             /* big price + /mo on a single line and avoids */
  min-height: 1.2em;       /* the KRW-overflow seen on the Pro card. */
  font-size: 18px;         /* min-height reserves space even when empty so */
  font-weight: 400;        /* every card's main-price baseline aligns — */
  color: var(--di);        /* matters for Enterprise (no strikethrough ever) */
  text-decoration: line-through;  /* and Standard/Pro/Team on monthly view. */
  margin-bottom: 2px;
}
/* Hide the strikethrough rule when there's no price to cross out, but
   keep the element's reserved height so cards don't jump vertically. */
.pricing-price-old:empty { visibility: hidden; }
.pricing-card-billed {
  font-size: 12px;
  color: var(--di);
  margin-top: 4px;
  margin-bottom: 16px;
}

/* Credit display box */
.pricing-credit-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.pricing-credit-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 8px;
}
.pricing-credit-fixed {
  font-size: 13px;
  color: var(--mu);
}

/* Credit slider */
.pricing-slider-wrap { margin-top: 8px; }
.pricing-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
}
.pricing-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fg);
  cursor: pointer;
  border: 2px solid var(--bg-main);
  box-shadow: 0 0 0 2px var(--border);
}
.pricing-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fg);
  cursor: pointer;
  border: 2px solid var(--bg-main);
  box-shadow: 0 0 0 2px var(--border);
}
.pricing-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--di);
  margin-top: 6px;
}

/* Seat section (Team card) */
.pricing-seat-section {
  margin-bottom: 16px;
}
.pricing-seat-header {
  font-size: 13px;
  font-weight: 500;
  color: var(--mu);
  margin-bottom: 10px;
}
.pricing-seat-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.seat-selector {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  width: fit-content;
  flex-shrink: 0;
}
.seat-btn {
  background: var(--bg-card);
  border: none;
  color: var(--fg);
  width: 36px;
  height: 36px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.seat-btn:hover { background: var(--bg-hover); }
.seat-btn:disabled { color: var(--di); cursor: default; }
.seat-btn:disabled:hover { background: var(--bg-card); }
.seat-count {
  width: 40px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  background: var(--bg-elevated);
  height: 36px;
  line-height: 36px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.pricing-seat-calc {
  font-size: 12px;
  color: var(--mu);
  line-height: 1.6;
}

/* Feature list */
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 16px 0 20px;
  flex-grow: 1;
}
.pricing-features li {
  font-size: 13px;
  color: var(--mu);
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.feat-icon {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
}
.feat-yes { color: var(--accent); }
.feat-no { color: var(--di); font-weight: 400; }
.pricing-features li.disabled {
  color: var(--di);
}

/* CTA buttons (also used as <a> for the Enterprise mailto card —
   display:block + text-align:center keep anchors visually identical
   to <button>; text-decoration:none strips the default underline). */
.btn-pricing {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--fb);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .2s;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
}
.btn-pricing:hover { opacity: .85; }
.btn-pricing.disabled { opacity: .5; cursor: default; }
.btn-pricing.disabled:hover { opacity: .5; }
.btn-pricing-primary {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

/* ====== CREDIT PACKS ====== */

.credit-packs-section {
  max-width: 1100px;
  margin: 0 auto 48px;
  text-align: center;
}
.credit-packs-title {
  font-family: var(--fd);
  font-size: 22px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 6px;
}
.credit-packs-subtitle {
  font-size: 14px;
  color: var(--mu);
  margin: 0 0 24px;
}
.credit-packs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}
.credit-pack-card {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 16px;
  text-align: center;
}
.credit-pack-card:hover { border-color: var(--mu); }
.credit-pack-amount {
  font-family: var(--fd);
  font-size: 24px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 4px;
}
.credit-pack-amount::before {
  content: '\26A1';
  margin-right: 4px;
}
.credit-pack-price {
  font-size: 14px;
  color: var(--mu);
  margin-bottom: 16px;
}
.btn-credit-pack {
  width: 100%;
  padding: 10px 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--fb);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--fg);
  transition: background .2s;
}
.btn-credit-pack:hover { background: var(--bg-hover); }

/* ====== PRICING COMPARISON TABLE ====== */

.pricing-compare {
  max-width: 1100px;
  margin: 0 auto 48px;
}
.pricing-compare-toggle {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--mu);
  font-size: 14px;
  font-family: var(--fb);
  cursor: pointer;
}
.pricing-compare-toggle:hover { color: var(--fg); }
.pricing-compare-chevron { transition: transform .2s; }
.pricing-compare-toggle.open .pricing-compare-chevron { transform: rotate(180deg); }
.pricing-compare-body {
  margin-top: 16px;
}
.pricing-compare-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pricing-compare-body th {
  text-align: left;
  padding: 10px 12px;
  color: var(--fg);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.pricing-compare-body td {
  padding: 10px 12px;
  color: var(--mu);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.pricing-compare-body tr:last-child td { border-bottom: none; }

/* Header plan button */
/* Header Pricing button — always visible in app header */
.header-pricing-btn {
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--fb);
  padding: 5px 14px;
  cursor: pointer;
  margin-right: 8px;
  transition: background .2s, color .2s;
  letter-spacing: 0.3px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.header-pricing-btn:hover {
  background: var(--accent);
  color: #000;
}

/* Panel-toggle buttons (left + right) in the header chrome. Chevron SVG
   rotates 180deg when the controlled panel is collapsed — same icon serves
   both the "hide" affordance (chevron points toward the panel) and the
   "show" affordance (chevron points outward, into the screen). aria-pressed
   reflects the collapsed state for screen readers. */
.hdr-toggle-btn{
  background:transparent;border:1px solid rgba(255,255,255,.12);
  border-radius:8px;color:rgba(255,255,255,.7);
  width:30px;height:30px;padding:0;cursor:pointer;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,border-color .15s;
}
.hdr-toggle-btn:hover{background:rgba(255,255,255,.08);color:var(--ac);border-color:var(--ac)}
.hdr-toggle-btn:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
.hdr-toggle-btn svg{width:14px;height:14px;transition:transform .22s ease}
.hdr-toggle-btn[aria-pressed="true"] svg{transform:rotate(180deg)}
/* Plan label badge next to credits */
.header-plan-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--mu);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  margin-right: 6px;
}
.header-plan-label.tier-standard { color: var(--fg); border-color: var(--fg); }
.header-plan-label.tier-pro { color: var(--accent); border-color: var(--accent); }
.header-plan-label.tier-team { color: #4da6ff; border-color: #4da6ff; }

.pricing-footer {
  text-align: center;
  font-size: 12px;
  color: var(--di);
  max-width: 1100px;
  margin: 0 auto;
}

/* ====== PRICING RESPONSIVE ====== */

@media (max-width: 900px) {
  .pricing-cards { flex-direction: column; align-items: center; }
  .pricing-card { width: 100%; max-width: 400px; }
  .credit-packs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pricing-page { padding: 24px 16px 60px; }
  .pricing-title { font-size: 22px; }
  .pricing-card { padding: 24px 20px; }
  .pricing-card-price { font-size: 32px; }
}

/* ====== PAYMENT-FAILED BANNER ====== */
/* Shown above the workspace header when Polar marks the sub as past_due
   / unpaid. User keeps access until paidUntil; banner gives them time to
   update their card. Owner-only on team plans. */
.payment-failed-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(255, 100, 100, 0.16), rgba(255, 100, 100, 0.08));
  border-bottom: 1px solid rgba(255, 100, 100, 0.3);
  color: #ffd2d2;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
}
.pfb-icon { font-size: 16px; color: #ff8a8a; flex-shrink: 0; }
.pfb-text { flex: 1; }
.pfb-text strong { color: #ffe5e5; }
.pfb-cta {
  padding: 6px 14px;
  background: rgba(255, 100, 100, 0.18);
  border: 1px solid rgba(255, 100, 100, 0.45);
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s;
}
.pfb-cta:hover { background: rgba(255, 100, 100, 0.28); }
.pfb-dismiss {
  background: transparent;
  border: none;
  color: #ff8a8a;
  font-size: 18px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}
.pfb-dismiss:hover { background: rgba(255, 100, 100, 0.12); color: #fff; }

/* ====== ACCOUNT AVATAR + DROPDOWN ====== */

.acct-wrap {
  position: relative;
  display: inline-block;
  margin-left: 8px;
}
/* The visible avatar pill — circle with the user's initial.
   Has a subtle accent ring on hover/focus so it's discoverable. */
.acct-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a2a3a, #13131a);
  border: 2px solid var(--ac);
  color: var(--ac);
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: filter 0.15s, box-shadow 0.15s;
}
.acct-avatar:hover,
.acct-avatar:focus-visible,
.acct-wrap.open .acct-avatar {
  filter: brightness(1.15);
  box-shadow: 0 0 0 3px rgba(0, 255, 127, 0.18);
  outline: none;
}
/* The dropdown panel. Positioned right-aligned under the avatar, with a
   small bridge of padding on .acct-wrap so the user can move the cursor
   from avatar to menu without it disappearing. */
.acct-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: #13131a;
  border: 1px solid #242434;
  border-radius: 12px;
  padding: 6px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 1000;
  font-family: 'DM Sans', system-ui, sans-serif;
  display: none;
}
.acct-wrap.open .acct-menu { display: block; }
/* Triangular pointer at the top, aligned with the avatar */
.acct-menu::before {
  content: '';
  position: absolute;
  top: -7px;
  right: 10px;
  width: 12px;
  height: 12px;
  background: #13131a;
  border-left: 1px solid #242434;
  border-top: 1px solid #242434;
  transform: rotate(45deg);
}
.acct-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 10px;
}
.acct-info-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a2a3a, #1a1a24);
  color: #c9c9d6;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.acct-info-text { flex: 1; min-width: 0; }
.acct-name {
  font-size: 14px;
  font-weight: 600;
  color: #e8e8ef;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acct-plan {
  font-size: 11px;
  color: #9a9aae;
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.acct-credits-block {
  padding: 4px 16px 12px;
  border-bottom: 1px solid #1f1f2c;
}
.acct-credits-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #c9c9d6;
  margin-bottom: 8px;
}
.acct-credits-arrow { color: #6e6e84; font-size: 16px; }
.acct-credits-bar {
  height: 4px;
  background: #1f1f2c;
  border-radius: 2px;
  overflow: hidden;
}
.acct-credits-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ac), #00d4aa);
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s ease;
}
.acct-upgrade-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #1f1f2c;
}
.acct-upgrade-label {
  font-size: 13px;
  font-weight: 600;
  color: #e8e8ef;
  display: inline-flex;
  align-items: center;
}
.acct-upgrade-btn {
  background: var(--ac);
  color: #0a0a0a;
  font-weight: 700;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: filter 0.15s;
}
.acct-upgrade-btn:hover { filter: brightness(1.05); }
.acct-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  background: transparent;
  border: none;
  color: #e8e8ef;
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s;
}
.acct-item:hover, .acct-item:focus-visible {
  background: #1a1a24;
  outline: none;
}
.acct-item svg { color: #9a9aae; flex-shrink: 0; }
.acct-item:hover svg { color: #c9c9d6; }
/* Right-aligned secondary label inside an acct-item (used by the Language
   row to show the OTHER locale's code — "KO" when current is en, etc.). */
.acct-item-meta {
  margin-left: auto;
  color: #9a9aae;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.acct-item:hover .acct-item-meta { color: #c9c9d6; }
.acct-sep {
  height: 1px;
  background: #1f1f2c;
  margin: 4px 0;
}
.acct-signout svg { color: #ff7585; }
.acct-signout:hover { background: rgba(255, 71, 87, 0.06); }
.acct-signout:hover svg { color: #ff7585; }

/* ====== MANAGE ACCOUNT MODAL ====== */

.manage-acct-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.manage-acct-modal.hidden { display: none; }
.manage-acct-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}
.manage-acct-content {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #13131a;
  border: 1px solid #242434;
  border-radius: 12px;
  padding: 24px;
  color: #e8e8ef;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.manage-acct-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.manage-acct-hdr h2 {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.manage-acct-close {
  background: transparent;
  border: none;
  color: #6e6e84;
  font-size: 24px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
}
.manage-acct-close:hover { background: #1a1a24; color: #e8e8ef; }
.manage-acct-row {
  margin-bottom: 16px;
}
.manage-acct-row label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6e6e84;
  margin-bottom: 6px;
}
.manage-acct-row input {
  width: 100%;
  padding: 10px 12px;
  background: #0a0a10;
  border: 1px solid #2a2a3a;
  border-radius: 8px;
  color: #e8e8ef;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
.manage-acct-row input:read-only { color: #9a9aae; cursor: default; }
.manage-acct-row input:focus:not(:read-only) { border-color: var(--ac); }
.manage-acct-name-row {
  display: flex;
  gap: 8px;
}
.manage-acct-name-row input { flex: 1; }
.manage-acct-save {
  padding: 10px 16px;
  background: var(--ac);
  color: #0a0a0a;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: filter 0.15s;
}
.manage-acct-save:hover { filter: brightness(1.05); }
.manage-acct-save:disabled { opacity: 0.5; cursor: not-allowed; }
.manage-acct-msg {
  font-size: 12px;
  margin: 8px 0 0;
  min-height: 16px;
}
.manage-acct-msg.ok { color: var(--ac); }
.manage-acct-msg.err { color: #ff7585; }
.manage-acct-portal {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: #0a0a10;
  border: 1px solid #2a2a3a;
  color: #e8e8ef;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.manage-acct-portal:hover { border-color: #3a3a4a; }
.manage-acct-portal:disabled { opacity: 0.5; cursor: not-allowed; }
.manage-acct-hint {
  font-size: 12px;
  color: #6e6e84;
  margin: 6px 0 0;
}

/* ====== CLOSE ACCOUNT ====== */

/* Visual divider above the close-account row to set it apart as destructive */
.manage-acct-close-row {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #1f1f2a;
}
.manage-acct-danger {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid #5a2a32;
  color: #ff7585;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.manage-acct-danger:hover { background: rgba(255, 117, 133, 0.08); border-color: #7a3a44; }
.manage-acct-danger:disabled { opacity: 0.4; cursor: not-allowed; }
.manage-acct-close-step2 h3 {
  margin: 0 0 12px;
  font-size: 16px;
  color: #e8e8ef;
}
.manage-acct-close-step2 label {
  display: block;
  font-size: 13px;
  color: #c6c6d4;
  margin: 14px 0 6px;
}
.manage-acct-close-step2 input {
  width: 100%;
  padding: 9px 12px;
  background: #0a0a10;
  border: 1px solid #2a2a3a;
  border-radius: 8px;
  color: #e8e8ef;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.manage-acct-close-step2 input:focus { border-color: var(--ac); outline: none; }
.manage-acct-close-step2 input:disabled { opacity: 0.5; cursor: not-allowed; }
.manage-acct-close-warn {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #c6c6d4;
}
.manage-acct-close-warn strong { color: #e8e8ef; }
.manage-acct-close-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}
.manage-acct-close-cancel,
.manage-acct-close-confirm {
  padding: 10px 18px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid #2a2a3a;
  transition: all 0.15s;
}
.manage-acct-close-cancel {
  background: transparent;
  color: #c6c6d4;
}
.manage-acct-close-cancel:hover { border-color: #3a3a4a; }
.manage-acct-close-confirm {
  background: #5a1a22;
  color: #ffe2e6;
  border-color: #7a2a34;
}
.manage-acct-close-confirm:hover:not(:disabled) { background: #6e1f29; border-color: #8a3340; }
.manage-acct-close-confirm:disabled { opacity: 0.35; cursor: not-allowed; }

/* ====== CREDITS BADGE ====== */

.header-credits-badge {
  display: none;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--bg-main);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  white-space: nowrap;
}

.header-credits-badge.active {
  display: inline-block;
}

.header-credits-badge.pro {
  border-color: var(--accent);
  color: var(--accent);
}

.header-credits-badge.low {
  border-color: #ff6b6b;
  color: #ff6b6b;
}

/* ====== PLAN VIEW RESPONSIVE ====== */

@media (max-width: 520px) {
  .plan-cards {
    flex-direction: column;
    align-items: center;
  }
  .plan-card {
    width: 100%;
    max-width: 280px;
  }
  .login-modal {
    padding: 28px 20px;
  }
}

/* ====== Offline / reconnect banner ====== */
.offline-banner {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 140%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  min-height: 40px;
  border-radius: 999px;
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  color: #fff;
  background: #2b2b2b;
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05);
  opacity: 0;
  pointer-events: none;
  transition: transform .24s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
  z-index: 10000;
}
.offline-banner.show {
  transform: translate(-50%, 0);
  opacity: 1;
}
.offline-banner.offline {
  background: #2b2b2b;
}
.offline-banner.reconnected {
  background: #1f7a3d;
}
.offline-banner-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* ══ Guest Mode (unauthenticated workspace) ══ */
/* The workspace is publicly visible so new visitors (and Paddle review)
   can see what they're paying for before sign-up. Gated actions
   (Generate / AD chat) open the login modal at click time. */
.hb-signin {
  background: var(--ac) !important;
  color: #0a0a0a !important;
  border-color: var(--ac) !important;
  font-weight: 700;
  letter-spacing: .02em;
}
.hb-signin:hover {
  filter: brightness(1.08);
  color: #0a0a0a !important;
}
/* Sample tile — read-only marker style for the seeded gallery items.
   Hides the action toolbar (.thumb-acts) and the delete X since these
   aren't real items the user can act on. */
body.guest-mode .thumb.guest-sample .thumb-rm,
body.guest-mode .thumb.guest-sample .thumb-acts {
  display: none !important;
}
body.guest-mode .thumb.guest-sample {
  cursor: pointer;
}

/* ============================================================
   FTUX (first-time user experience) — welcome modal, sample
   picker, coach marks, cost hint. Each block is self-contained;
   removing it leaves the rest functional.
   ============================================================ */

.ftux-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 8, 14, 0.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  animation: ftux-fade-in 0.2s ease-out;
}
.ftux-overlay.ftux-fading { animation: ftux-fade-out 0.18s ease-in forwards; }
@keyframes ftux-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ftux-fade-out { from { opacity: 1; } to { opacity: 0; } }

.ftux-modal {
  background: #14141c;
  border: 1px solid #2a2a3a;
  border-radius: 14px;
  padding: 36px 36px 28px;
  max-width: 640px;
  width: calc(100% - 48px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  position: relative;
}
.ftux-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; color: #6b6b80;
  font-size: 26px; cursor: pointer; padding: 4px 10px; line-height: 1;
  transition: color 0.15s;
}
.ftux-close:hover { color: #e8e8ef; }
.ftux-modal h2 {
  margin: 0 0 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 26px; font-weight: 700;
  letter-spacing: -0.02em;
  color: #e8e8ef;
}
.ftux-subtitle {
  margin: 0 0 28px;
  color: #9a9aae;
  font-size: 14px; line-height: 1.55;
}

.ftux-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.ftux-feature {
  background: #1b1b25;
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  padding: 18px 16px;
}
/* SVG icons inherit stroke colour from `color` here. Accent green ties the
   feature row to the brand without overwhelming the muted card chrome. */
.ftux-feature-icon {
  color: var(--accent);
  margin-bottom: 10px;
  line-height: 0;
}
.ftux-feature-title {
  font-family: 'Outfit', sans-serif;
  font-size: 13px; font-weight: 600;
  color: #e8e8ef; margin-bottom: 4px;
}
.ftux-feature-desc {
  font-size: 12px; line-height: 1.5;
  color: #8a8aa0;
}

.ftux-sample-section h3 {
  margin: 0 0 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px; font-weight: 600;
  color: #c9c9d6;
}
.ftux-samples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.ftux-sample {
  background: #1b1b25;
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  padding: 14px 10px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: all 0.15s;
  color: #e8e8ef;
}
.ftux-sample:hover {
  background: #232332;
  border-color: #00FF7F;
  transform: translateY(-1px);
}
/* Sample-card icons stay neutral white so the label leads. The card
   border picks up the accent green on hover, which is enough brand cue. */
.ftux-sample-icon {
  color: #c9c9d6;
  line-height: 0;
  transition: color 0.15s;
}
.ftux-sample:hover .ftux-sample-icon { color: var(--accent); }
.ftux-sample-label {
  font-family: 'Outfit', sans-serif;
  font-size: 13px; font-weight: 600;
}

.ftux-actions {
  display: flex; justify-content: center;
  padding-top: 8px; border-top: 1px solid #232332;
  margin-top: 4px;
}
.ftux-btn-text {
  background: none; border: none;
  color: #9a9aae; font-size: 13px;
  cursor: pointer; padding: 8px 12px;
  transition: color 0.15s;
}
.ftux-btn-text:hover { color: #e8e8ef; text-decoration: underline; }

/* Pulsing Generate button after sample applied — fades after ~4s */
@keyframes ftux-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 127, 0.0); }
  50% { box-shadow: 0 0 0 8px rgba(0, 255, 127, 0.35); }
}
.ftux-pulse {
  animation: ftux-pulse-glow 1.4s ease-in-out 3;
}

/* ----- Coach marks ----- */
.ftux-coach-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 8, 14, 0.55);
  z-index: 9998;
  pointer-events: none; /* the popover gets pointer events back below */
}
.ftux-coach-highlight {
  position: fixed;
  border-radius: 8px;
  outline: 2px solid #00FF7F;
  outline-offset: 0;
  box-shadow: 0 0 0 9999px rgba(8, 8, 14, 0.55), 0 0 24px rgba(0, 255, 127, 0.4);
  pointer-events: none;
  animation: ftux-coach-pop 0.25s ease-out;
}
@keyframes ftux-coach-pop {
  from { outline-offset: 8px; box-shadow: 0 0 0 9999px rgba(8, 8, 14, 0.0), 0 0 0 rgba(0, 255, 127, 0); }
  to   { outline-offset: 0;   box-shadow: 0 0 0 9999px rgba(8, 8, 14, 0.55), 0 0 24px rgba(0, 255, 127, 0.4); }
}
.ftux-coach-popover {
  position: fixed;
  background: #14141c;
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  padding: 14px 16px 12px;
  max-width: 320px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  pointer-events: auto;
  z-index: 9999;
}
.ftux-coach-step {
  font-size: 11px; font-weight: 600;
  color: #00FF7F; letter-spacing: 0.08em;
  margin-bottom: 4px; text-transform: uppercase;
}
.ftux-coach-title {
  font-family: 'Outfit', sans-serif;
  font-size: 15px; font-weight: 600;
  color: #e8e8ef; margin-bottom: 6px;
}
.ftux-coach-text {
  font-size: 13px; line-height: 1.55;
  color: #c9c9d6; margin-bottom: 12px;
}
.ftux-coach-actions {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.ftux-coach-skip {
  background: none; border: none; color: #6b6b80;
  font-size: 12px; cursor: pointer; padding: 4px 0;
}
.ftux-coach-skip:hover { color: #9a9aae; }
.ftux-coach-next {
  background: #00FF7F; color: #0a0a0a;
  border: none; border-radius: 6px;
  padding: 7px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.ftux-coach-next:hover { filter: brightness(1.08); }

/* Mobile collapse for the modal */
@media (max-width: 640px) {
  .ftux-modal { padding: 28px 20px 24px; }
  .ftux-features, .ftux-samples { grid-template-columns: 1fr; }
}