/* ═══════════ APP CHROME ═══════════ */
:root{
  --bg:#0A1F18; --panel:#0F2C22; --panel2:#0B241B;
  --line:rgba(245,237,218,.14); --cream:#F5EDDA; --dim:rgba(245,237,218,.6);
  --gold:#D9A441; --gold2:#F0C368; --terra:#C65D3B;
}
*{ box-sizing:border-box; margin:0; }
html,body{ height:100%; }
body{ background:var(--bg); color:var(--cream); font-family:"Archivo",sans-serif; overflow:hidden; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:rgba(217,164,65,.4); }

/* ── Buttons ── */
.btn{ display:inline-flex; align-items:center; gap:9px; border:0; border-radius:11px; font-weight:700; font-size:14px; padding:12px 20px; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:active{ transform:translateY(1px); }
.btn-gold{ background:linear-gradient(140deg,var(--gold2),var(--gold)); color:#08241B; box-shadow:0 8px 24px rgba(217,164,65,.3); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(217,164,65,.42); }
.btn-gold:disabled{ opacity:.6; cursor:wait; transform:none; }
.btn-line{ background:transparent; color:var(--cream); border:1px solid var(--line); }
.btn-line:hover{ border-color:var(--gold); color:var(--gold2); }
.btn-sm{ padding:8px 14px; font-size:12.5px; border-radius:9px; }
.btn-lg{ padding:16px 28px; font-size:16px; border-radius:13px; }
.btn-icon{ background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:9px; width:38px; height:38px; display:grid; place-items:center; transition:.15s; }
.btn-icon:hover{ color:var(--terra); border-color:var(--terra); }

/* ═══════════ INTRO ═══════════ */
#intro{ position:fixed; inset:0; z-index:60; overflow:hidden; display:flex; flex-direction:column;
  background:
    radial-gradient(1000px 700px at 82% -10%, rgba(217,164,65,.15), transparent 60%),
    radial-gradient(800px 640px at -10% 110%, rgba(62,124,91,.3), transparent 60%),
    linear-gradient(160deg,#0E382A,#08231B 60%,#061A13);
  transition:transform .85s cubic-bezier(.76,0,.24,1); }
#intro.leave{ transform:translateY(-102%); }
.i-rings{ position:absolute; inset:0; pointer-events:none; }
.i-rings::before,.i-rings::after{ content:""; position:absolute; border-radius:50%; border:1.5px solid rgba(217,164,65,.2); }
.i-rings::before{ width:640px;height:640px; top:-240px; right:-160px; animation:spinSlow 60s linear infinite; border-style:dashed; }
.i-rings::after{ width:460px;height:460px; bottom:-180px; left:-140px; border-color:rgba(245,237,218,.1); }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }

.i-grid{ flex:1; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:4vw; padding:6vh 6vw 9vh; min-height:0; }
.i-kicker{ display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:600; letter-spacing:.22em; color:var(--gold2); border:1px solid rgba(217,164,65,.4); border-radius:999px; padding:9px 18px; margin-bottom:26px; animation:rise .7s .1s cubic-bezier(.2,.7,.2,1) both; }
.i-title{ font-family:"Fraunces",serif; font-weight:750; font-size:clamp(46px,6.6vw,94px); line-height:1.25; letter-spacing:-.015em; }
.i-title .gold{ color:var(--gold); font-style:italic; }
.i-title .mask{ display:block; overflow:hidden; }
.i-title .mask > span{ display:block; transform:translateY(110%); animation:maskUp .9s cubic-bezier(.2,.75,.2,1) forwards; }
.i-title .mask:nth-child(2) > span{ animation-delay:.16s; }
@keyframes maskUp{ to{ transform:translateY(0); } }
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.i-sub{ margin-top:22px; max-width:52ch; font-size:17px; line-height:1.65; color:var(--dim); animation:rise .7s .4s cubic-bezier(.2,.7,.2,1) both; }
.i-sub strong{ color:var(--cream); }
.i-steps{ list-style:none; padding:0; margin:28px 0 30px; display:flex; flex-direction:column; gap:11px; animation:rise .7s .52s cubic-bezier(.2,.7,.2,1) both; }
.i-steps li{ display:flex; align-items:center; gap:14px; font-size:15px; font-weight:600; color:rgba(245,237,218,.85); }
.i-steps span{ font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:700; color:var(--gold); border:1px solid rgba(217,164,65,.45); border-radius:8px; padding:4px 8px; }
.i-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; animation:rise .7s .64s cubic-bezier(.2,.7,.2,1) both; }
.i-note{ font-size:13px; color:var(--dim); }

.i-stage{ display:flex; flex-direction:column; align-items:center; gap:18px; min-height:0; animation:rise .8s .35s cubic-bezier(.2,.7,.2,1) both; }
.i-frame{ position:relative; padding:13px; border:1px solid rgba(217,164,65,.55); border-radius:8px; background:rgba(217,164,65,.06);
  transform:rotate(-3.5deg); box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 6px rgba(8,36,27,.6);
  animation:float 8s ease-in-out infinite alternate; overflow:hidden; }
.i-frame img{ display:block; width:min(40vw,520px); height:auto; border-radius:3px; }
@keyframes float{ from{ transform:rotate(-3.5deg) translateY(0); } to{ transform:rotate(-2.2deg) translateY(-14px); } }
.i-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%); transform:translateX(-130%); animation:shine 6s 1.2s ease-in-out infinite; }
@keyframes shine{ 0%,55%{ transform:translateX(-130%); } 100%{ transform:translateX(130%); } }
.i-cap{ font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.2em; color:var(--dim); }

.i-ticker{ position:absolute; left:0; right:0; bottom:0; border-top:1px solid rgba(217,164,65,.3); background:rgba(6,26,19,.7); overflow:hidden; padding:14px 0; }
.i-ticker-track{ display:flex; width:max-content; animation:marquee 38s linear infinite; }
.i-ticker-track span{ white-space:nowrap; font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600; letter-spacing:.26em; color:rgba(245,237,218,.75); }
.i-ticker b{ color:var(--gold); margin:0 6px; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ═══════════ STUDIO ═══════════ */
#app{ height:100dvh; display:flex; flex-direction:column; opacity:1; transition:opacity .6s ease .2s; }
#app.off{ opacity:0; pointer-events:none; }

.topbar{ flex:none; height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; border-bottom:1px solid var(--line); background:rgba(10,31,24,.9); }
.brand-mini{ display:flex; align-items:center; gap:12px; }
.brand-mini .brand-badge{ width:34px;height:34px;border-radius:8px; background:linear-gradient(140deg,var(--gold2),var(--gold)); color:#08241B; display:grid; place-items:center; font-family:"Fraunces",serif; font-weight:750; font-size:14px; }
.brand-word{ font-family:"Fraunces",serif; font-weight:650; font-size:18px; }
.brand-word em{ color:var(--gold); font-style:italic; }
.top-actions{ display:flex; align-items:center; gap:14px; }
.device-badge{ display:inline-flex; align-items:center; gap:8px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.06em; color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:7px 14px; }
.device-badge i{ color:var(--gold); }

.seg{ display:none; }

.workspace{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(380px,450px) 1fr; }

/* ── Editor ── */
.editor{ overflow-y:auto; padding:22px 24px 60px; border-right:1px solid var(--line); background:var(--panel); scrollbar-width:thin; scrollbar-color:rgba(217,164,65,.4) transparent; }
.editor-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.editor-head h2{ font-family:"Fraunces",serif; font-weight:650; font-size:24px; }
.editor-tools{ display:flex; gap:8px; }
.sec{ border:1px solid var(--line); border-radius:15px; padding:18px 18px 20px; margin-bottom:16px; background:rgba(245,237,218,.02); }
.sec-head{ display:flex; align-items:center; gap:12px; font-size:13px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:rgba(245,237,218,.85); margin-bottom:16px; }
.sec-head span{ font-family:"IBM Plex Mono",monospace; color:var(--gold); border:1px solid rgba(217,164,65,.45); border-radius:7px; padding:3px 7px; font-size:11px; }
.field{ margin-bottom:14px; }
.field:last-child{ margin-bottom:0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.field-row .field{ margin-bottom:0; }
.field label{ display:flex; justify-content:space-between; align-items:baseline; font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(217,164,65,.85); margin-bottom:7px; }
.field label small{ text-transform:none; letter-spacing:.02em; color:var(--dim); font-weight:500; }
.cnt{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0; color:var(--dim); }
.cnt.warn{ color:var(--terra); }
.input{ width:100%; background:var(--panel2); border:1px solid var(--line); border-radius:10px; color:var(--cream); font-family:inherit; font-size:14.5px; padding:11px 13px; transition:border-color .15s, box-shadow .15s; }
.input::placeholder{ color:rgba(245,237,218,.32); }
.input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(217,164,65,.18); }
textarea.input{ resize:vertical; line-height:1.5; }
select.input{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
.hint{ font-size:12px; color:var(--dim); margin-top:8px; line-height:1.5; }

.sdg-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.sdg-btn{ aspect-ratio:1; border-radius:10px; border:1px solid var(--line); background:var(--panel2); color:rgba(245,237,218,.75); font-family:"IBM Plex Mono",monospace; font-weight:700; font-size:14px; transition:.15s; }
.sdg-btn:hover:not(:disabled){ border-color:var(--gold); color:var(--gold2); }
.sdg-btn.sel{ color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(0,0,0,.35); }
.sdg-btn:disabled{ opacity:.3; cursor:not-allowed; }

.tk-list{ display:flex; flex-direction:column; gap:9px; margin-bottom:10px; }
.tk-row{ display:flex; align-items:center; gap:9px; }
.tk-n{ font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:700; color:var(--gold); flex:none; }
.tk-row .input{ flex:1; }
.tk-cnt{ flex:none; width:52px; text-align:right; }

/* ── Preview ── */
.preview{ display:flex; flex-direction:column; min-height:0; min-width:0; }
.preview-bar{ flex:none; display:flex; align-items:center; gap:16px; padding:12px 22px; border-bottom:1px solid var(--line); }
.preview-label{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; }
.preview-label i{ color:var(--gold); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.preview-meta{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em; color:var(--dim); margin-right:auto; }
.zoom{ display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.zoom-btn{ background:transparent; border:0; color:var(--dim); font-size:12px; font-weight:700; padding:7px 14px; transition:.15s; }
.zoom-btn.active{ background:var(--gold); color:#08241B; }
.preview-stage{ flex:1; min-height:0; overflow:auto; display:flex; padding:26px;
  background-image:radial-gradient(rgba(245,237,218,.07) 1px, transparent 1px); background-size:22px 22px; }
.poster-scaler{ position:relative; margin:auto; flex:none; box-shadow:0 34px 90px rgba(0,0,0,.55); }
.poster-scaler .poster{ position:absolute; top:0; left:0; transform-origin:top left; }

#mobileBar{ display:none; }
#toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:100; opacity:0; pointer-events:none;
  background:#123528; border:1px solid rgba(217,164,65,.5); color:var(--cream); font-size:13.5px; font-weight:600;
  padding:12px 20px; border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.45); transition:.3s cubic-bezier(.2,.7,.2,1); }
#toast.show{ opacity:1; transform:translate(-50%,0); }

/* ═══════════ MOBILE LAYOUT ═══════════ */
body[data-layout="mobile"]{ }
body[data-layout="mobile"] .workspace{ grid-template-columns:1fr; }
body[data-layout="mobile"] .editor{ border-right:0; padding-bottom:110px; }
body[data-layout="mobile"] .top-actions #genBtn{ display:none; }
body[data-layout="mobile"] .device-badge{ font-size:10px; padding:6px 10px; }
body[data-layout="mobile"] .seg{ display:flex; flex:none; border-bottom:1px solid var(--line); background:var(--panel); }
body[data-layout="mobile"] .seg-btn{ flex:1; background:transparent; border:0; color:var(--dim); font-weight:700; font-size:14px; padding:13px 0; border-bottom:2.5px solid transparent; transition:.15s; }
body[data-layout="mobile"] .seg-btn.active{ color:var(--gold2); border-bottom-color:var(--gold); }
body[data-layout="mobile"][data-tab="edit"] .preview{ display:none; }
body[data-layout="mobile"][data-tab="preview"] .editor{ display:none; }
body[data-layout="mobile"][data-tab="preview"] .preview-stage{ padding-bottom:110px; }
body[data-layout="mobile"] #mobileBar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(8,26,20,.92); backdrop-filter:blur(8px); border-top:1px solid var(--line); }
body[data-layout="mobile"] #mobileBar .btn{ flex:1; justify-content:center; }

/* Intro responsive */
@media (max-width:920px){
  .i-grid{ grid-template-columns:1fr; gap:30px; padding:5vh 7vw 110px; overflow-y:auto; }
  .i-frame img,.i-fallback{ width:min(74vw,340px); }
  .i-title{ font-size:clamp(42px,11vw,64px); }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}