/* مبدع ٢: Aleem's first identity (deep navy with a gold line at night, champagne with navy by day), Naskh shipped inside. */
@font-face{font-family:'Noto Naskh Arabic';font-weight:400;font-display:swap;src:url(fonts/noto-naskh-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Noto Naskh Arabic';font-weight:700;font-display:swap;src:url(fonts/noto-naskh-arabic-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Noto Naskh Arabic';font-weight:400;font-display:swap;src:url(fonts/noto-naskh-arabic-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Noto Naskh Arabic';font-weight:700;font-display:swap;src:url(fonts/noto-naskh-arabic-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}

:root,:root[data-theme="night"]{--bg:#06142B;--deep:#030C1C;--card:#0C1F3D;--fg:#F1E6CC;--mut:#B3A98F;--line:#22385C;--gold:#D9A93F;--gold-fg:#06142B;--err:#F08A7A;color-scheme:dark}
:root[data-theme="day"]{--bg:#F3EAD8;--deep:#E6DAC2;--card:#FBF7EE;--fg:#12233F;--mut:#4F5D74;--line:#D8CCB3;--gold:#8A6420;--gold-fg:#FBF7EE;--err:#A23B2C;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:'Noto Naskh Arabic',serif;font-size:16px;line-height:1.9;min-height:100vh;display:flex;flex-direction:column}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--mut)}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid transparent;border-image:linear-gradient(90deg,transparent,var(--gold),transparent) 1}
.brand{display:flex;align-items:center;gap:12px}
.brand img{border-radius:24%;box-shadow:0 0 18px color-mix(in srgb,var(--gold) 45%,transparent)}
.brand strong{display:block;font-size:22px;color:var(--gold);line-height:1.2}
.brand span{font-size:14px;color:var(--mut)}
.actions{display:flex;gap:8px;align-items:center}
.iconbtn{width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;display:grid;place-items:center}
.iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.btn{min-height:44px;padding:0 18px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--fg);font:inherit;font-size:16px;cursor:pointer}
.btn.primary{background:var(--gold);color:var(--gold-fg);border-color:transparent;font-weight:700}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.6;cursor:wait}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px}
label{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--mut)}
input,select,textarea{font:inherit;font-size:16px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:12px;min-height:44px;padding:8px 12px}
textarea{resize:vertical;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.row label{flex:1 1 160px}
h1,h2{margin:0;line-height:1.4}
h2{font-size:22px;color:var(--gold)}
.gate{flex:1;display:grid;place-items:center;padding:24px 16px}
.gate .card{width:min(440px,100%);display:flex;flex-direction:column;gap:14px;text-align:center}
.gate h1{font-size:40px;color:var(--gold)}
.glow{margin:0 auto;border-radius:24%;box-shadow:0 0 40px color-mix(in srgb,var(--gold) 45%,transparent)}
.err{color:var(--err);min-height:1.9em;margin:0}
.app{flex:1;width:min(1280px,100%);margin:0 auto;padding:20px max(16px,env(safe-area-inset-right)) 20px max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:20px}
.brief{display:flex;flex-direction:column;gap:14px}
.result{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:start}
.screen-wrap{display:flex;flex-direction:column;gap:12px;position:sticky;top:90px}
.screen{position:relative;overflow:hidden;border-radius:16px;background:var(--deep);aspect-ratio:16/9;max-width:100%;margin-inline:auto;width:100%}
.screen[data-ratio="9:16"]{aspect-ratio:9/16;max-height:70vh;width:auto}
.screen[data-ratio="1:1"]{aspect-ratio:1/1;max-height:70vh;width:auto}
.frame{position:absolute;inset:-8%;transition:transform linear,opacity .6s;opacity:0}
.frame.on{opacity:1}
.cap{position:absolute;inset-inline:0;bottom:0;margin:0;padding:24px 20px 16px;font-size:18px;color:#F6EEDA;background:linear-gradient(transparent,rgba(3,10,24,.85));text-align:center}
.onscreen{position:absolute;top:12%;inset-inline:8%;margin:0;text-align:center;font-size:clamp(20px,3.2vw,40px);font-weight:700;color:#F6EEDA;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}
.plan{display:flex;flex-direction:column;gap:10px}
.scenes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.scene{border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.scene.now{box-shadow:0 0 0 2px var(--gold)}
.scene head{display:flex}
.scene .hd{display:flex;justify-content:space-between;gap:8px;align-items:center}
.scene .hd strong{font-size:17px}
.chip{font-size:14px;padding:2px 10px;border-radius:99px;border:1px solid var(--line);color:var(--mut);white-space:nowrap}
.scene textarea{min-height:64px}
.scene .en{direction:ltr;text-align:left;font-size:14px}
.foot{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 16px;color:var(--mut);font-size:14px;line-height:1.7}
@media (max-width:900px){.result{grid-template-columns:1fr}.screen-wrap{position:static}}
@media (min-width:2400px){body{font-size:20px}.app{width:min(2200px,100%)}.btn,input,select,textarea{font-size:19px}h2{font-size:28px}}
@media (prefers-reduced-motion:reduce){.frame{transition:opacity .2s!important}}
.result>*{min-width:0}
.scene .hd{flex-wrap:wrap}
.chip{white-space:normal}
.screen-wrap .row .btn{flex:1 1 auto}