/* لقطة — استوديو الفيديو
   World: the camera's own signals. Tally-light green = ready, record orange = running, a highlighter-lemon marker,
   ink-blue type on cool white. Faces: Lalezar (display) + Alexandria (UI), both self-hosted (OFL). */
@font-face{font-family:"Alexandria";src:url("/assets/fonts/alexandria.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Lalezar";src:url("/assets/fonts/lalezar.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --bg:#f3f4fa; --bg-2:#e8eaf5; --surface:#fff; --ink:#11122a; --ink-2:#4f5177; --line:#dadeee; --line-2:#c3c8e0;
  --go:#00c27b; --go-ink:#00774a; --go-soft:#d7f7e9;
  --rec:#ff4a2b; --rec-ink:#cf3417; --rec-soft:#ffe6df;
  --hl:#ffe940; --amber:#ffb81f; --amber-ink:#8a5600; --amber-soft:#fff1cf; --danger:#d92d20;
  --shadow:0 1px 0 rgba(17,18,42,.04),0 10px 30px -12px rgba(17,18,42,.18);
  --ease:cubic-bezier(.16,1,.3,1);
  --ui:"Alexandria",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --display:"Lalezar","Alexandria",system-ui,sans-serif;
  --r:14px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0c0d1b; --bg-2:#15172e; --surface:#14162c; --ink:#eef0ff; --ink-2:#a2a6d0; --line:#252850; --line-2:#363a6e;
    --go:#2be39a; --go-ink:#37e6a3; --go-soft:#0f3a2d; --rec:#ff6a4d; --rec-ink:#ff8268; --rec-soft:#3a1a14;
    --amber-ink:#ffcb5c; --amber-soft:#3a2c0a; --shadow:0 1px 0 rgba(255,255,255,.03),0 14px 34px -14px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{background:var(--bg);accent-color:var(--go);scrollbar-color:var(--line-2) transparent;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font:400 1rem/1.75 var(--ui);color:var(--ink);background:var(--bg);
  /* a faint cutting-mat grid: the page is a light table, not a blank sheet */
  background-image:linear-gradient(color-mix(in srgb,var(--ink) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 5%,transparent) 1px,transparent 1px);
  background-size:44px 44px;background-position:-1px -1px;background-attachment:fixed}
::selection{background:var(--hl);color:#11122a}
input,textarea,select,button{font:inherit;color:inherit;caret-color:var(--rec)}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
h1,h2,h3{margin:0;text-wrap:balance}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- shell ---------- */
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,36px)}
.top{display:flex;align-items:center;gap:.5rem;padding-block:18px}
.brand{display:inline-flex;align-items:center;gap:.6rem;font:400 2rem/1 var(--display);color:var(--ink);text-decoration:none;letter-spacing:0}
.brand .dot{width:.9rem;height:.9rem;border-radius:50%;background:var(--go);box-shadow:0 0 0 4px color-mix(in srgb,var(--go) 22%,transparent);transition:background .3s,box-shadow .3s}
.brand .dot.on{background:var(--rec);animation:tally 1.5s var(--ease) infinite}
@keyframes tally{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--rec) 55%,transparent)}75%,100%{box-shadow:0 0 0 .8rem transparent}}
.top .sp{flex:1}
.top{flex-wrap:wrap}
.pill{white-space:nowrap}
@media(max-width:560px){.top .lb{display:none}.top .ghost{padding:.5rem}.brand{font-size:1.7rem}.pill{font-size:.78rem;padding:.25rem .65rem}}
.pill{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .8rem;border:1.5px solid var(--line-2);border-radius:99px;font-size:.84rem;font-weight:600;background:var(--surface)}
.pill b{font-weight:800}
.ghost{display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;padding:.45rem .7rem;border-radius:10px;color:var(--ink-2);font-weight:500;font-size:.9rem;transition:background .18s,color .18s,transform .18s var(--ease)}
.ghost:hover{background:var(--bg-2);color:var(--ink)}
.ghost:active{transform:scale(.97)}
.ghost:disabled{opacity:.4;cursor:not-allowed}
.ghost svg{width:1.05rem;height:1.05rem}
.ghost.danger:hover{color:var(--rec-ink);background:var(--rec-soft)}

/* ---------- login ---------- */
.login{max-width:420px;margin:12vh auto 0;padding-inline:20px}
.login .brand{font-size:clamp(4rem,16vw,6.5rem);gap:1rem}
.login .brand .dot{width:1.3rem;height:1.3rem}
.login p.lead{color:var(--ink-2);margin:.4rem 0 1.8rem}
.field{display:grid;gap:.35rem;margin-bottom:1rem}
.field label,.lbl{font-weight:700;font-size:.9rem}
.in{width:100%;padding:.8rem .95rem;border:1.5px solid var(--line-2);background:var(--surface);border-radius:12px;transition:border-color .18s,box-shadow .18s}
.in:hover{border-color:var(--ink-2)}
.in:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--hl) 70%,transparent)}
input.ltr{direction:ltr;text-align:left}
.err{color:var(--rec-ink);font-weight:700;font-size:.92rem;margin:.2rem 0 .6rem;min-height:1.2em}
.hint{color:var(--ink-2);font-size:.84rem;line-height:1.65;margin:.3rem 0 0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.65rem 1.1rem;border-radius:12px;border:1.5px solid var(--ink);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:700;font-size:.92rem;transition:transform .18s var(--ease),background .18s,color .18s,box-shadow .18s}
.btn:hover{background:var(--ink);color:var(--surface)}
.btn:active{transform:scale(.97)}
.btn svg{width:1.1rem;height:1.1rem}
.btn.go{background:var(--go);border-color:var(--go);color:#04241a;font-size:1.05rem;padding:.85rem 1.6rem;box-shadow:0 8px 22px -10px var(--go)}
.btn.go:hover{background:var(--go);color:#04241a;box-shadow:0 12px 28px -10px var(--go);transform:translateY(-1px)}
.btn.go:active{transform:scale(.97)}
.btn.go:disabled{opacity:.5;box-shadow:none;cursor:not-allowed;transform:none}
.btn.rec{background:var(--rec);border-color:var(--rec);color:#fff}
.btn.rec:hover{background:var(--rec);color:#fff;filter:brightness(1.06)}
.btn.sm{padding:.4rem .75rem;font-size:.84rem;border-width:1px}

/* ---------- composer (viewfinder) ---------- */
.hero{padding-block:clamp(10px,3vw,30px) 8px}
.hero h1{font:400 clamp(2.5rem,7vw,5rem)/1.12 var(--display);letter-spacing:0}
.hero h1 mark{background:linear-gradient(transparent 56%,var(--hl) 56% 90%,transparent 90%);color:inherit;padding-inline:.12em}
@media (prefers-color-scheme:dark){.hero h1 mark{background:linear-gradient(transparent 56%,color-mix(in srgb,var(--hl) 38%,transparent) 56% 90%,transparent 90%)}}
.hero p.lead{color:var(--ink-2);max-width:56ch;margin:.7rem 0 1.4rem;font-size:1.05rem}
.vf{position:relative;background:var(--surface);border-radius:var(--r);padding:22px 22px 14px;box-shadow:var(--shadow);
  --c:var(--ink);
  background-image:
    linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),
    linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c));
  background-size:26px 3px,3px 26px,26px 3px,3px 26px,26px 3px,3px 26px,26px 3px,3px 26px;
  background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom;
  background-repeat:no-repeat;background-origin:border-box}
.vf .hud{display:flex;align-items:center;gap:.7rem;font-size:.82rem;font-weight:600;color:var(--ink-2);margin-bottom:.5rem}
.vf .hud .rdot{width:.6rem;height:.6rem;border-radius:50%;background:var(--rec)}
.vf .hud .sp{flex:1}
.vf textarea{width:100%;min-height:6.4rem;border:0;background:none;resize:vertical;font-size:1.18rem;line-height:1.75;padding:.2rem 0}
.vf textarea:focus{outline:none}
.vf textarea::placeholder{color:color-mix(in srgb,var(--ink-2) 75%,transparent)}
.vf .foot{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;border-top:1.5px dashed var(--line-2);padding-top:.8rem;margin-top:.6rem}
.vf .foot .hint{margin:0;flex:1;min-width:14rem}

/* platform frames (each drawn at its true aspect ratio) */
.plats{display:flex;gap:.7rem;overflow-x:auto;padding:4px 2px 10px;margin-top:1.1rem;scrollbar-width:thin}
.pf{flex:none;position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.7rem;min-width:11.2rem;padding:.65rem .9rem;border:1.5px solid var(--line-2);border-radius:12px;background:var(--surface);cursor:pointer;transition:border-color .18s,transform .18s var(--ease),box-shadow .18s}
.pf:hover{border-color:var(--ink)}
.pf input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pf .gl{width:2.2rem;height:2.2rem;display:grid;place-items:center}
.pf .gl svg{width:100%;height:100%;stroke-width:2}
.pf b{display:block;font-size:.9rem;font-weight:700;line-height:1.3}
.pf small{display:block;color:var(--ink-2);font-size:.76rem;line-height:1.35}
.pf:has(input:checked){border-color:var(--ink);background:var(--ink);color:var(--surface);box-shadow:0 10px 24px -12px var(--ink)}
.pf:has(input:checked) small{color:inherit;opacity:.75}
.pf:has(input:checked)::after{content:"";position:absolute;inset-block-start:.5rem;inset-inline-end:.55rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--go);box-shadow:0 0 0 3px color-mix(in srgb,var(--go) 35%,transparent)}
.pf:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px}

/* duration ruler with a record-head playhead */
.ruler{margin:.6rem 0 0}
.ruler .row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.15rem}
.ruler output{font:400 1.7rem/1 var(--display);letter-spacing:.02em}
.ruler input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:46px;background:none;cursor:ew-resize;margin:0}
.ruler input[type=range]::-webkit-slider-runnable-track{height:46px;background:
  repeating-linear-gradient(to right,var(--line-2) 0 1.5px,transparent 1.5px calc(100%/24)) bottom/100% 14px no-repeat,
  repeating-linear-gradient(to right,var(--ink-2) 0 1.5px,transparent 1.5px calc(100%/6)) bottom/100% 24px no-repeat,
  linear-gradient(var(--line-2),var(--line-2)) bottom/100% 2px no-repeat}
.ruler input[type=range]::-moz-range-track{height:46px;background:
  repeating-linear-gradient(to right,var(--line-2) 0 1.5px,transparent 1.5px calc(100%/24)) bottom/100% 14px no-repeat,
  repeating-linear-gradient(to right,var(--ink-2) 0 1.5px,transparent 1.5px calc(100%/6)) bottom/100% 24px no-repeat,
  linear-gradient(var(--line-2),var(--line-2)) bottom/100% 2px no-repeat}
.ruler input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:4px;height:46px;border-radius:2px;background:var(--rec);border:0;box-shadow:0 0 0 5px color-mix(in srgb,var(--rec) 22%,transparent);transition:box-shadow .2s}
.ruler input[type=range]::-moz-range-thumb{width:4px;height:46px;border-radius:2px;background:var(--rec);border:0;box-shadow:0 0 0 5px color-mix(in srgb,var(--rec) 22%,transparent)}
.ruler input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 9px color-mix(in srgb,var(--rec) 28%,transparent)}
.ruler input[type=range]:focus-visible{outline-offset:2px}
.ruler .ends{display:flex;justify-content:space-between;font-size:.74rem;color:var(--ink-2)}

.cta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.2rem;margin-top:1.1rem}
.cta .quota{color:var(--ink-2);font-size:.85rem}
.adv{margin-top:1.1rem;border-top:1.5px dashed var(--line-2);padding-top:.4rem}
.adv>summary{cursor:pointer;font-weight:700;padding:.5rem 0;list-style:none;display:inline-flex;align-items:center;gap:.5rem}
.adv>summary::-webkit-details-marker{display:none}
.adv>summary::before{content:"";width:.5rem;height:.5rem;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s var(--ease);margin-inline-end:.1rem}
.adv[open]>summary::before{transform:rotate(45deg)}
.adv .grid{display:grid;gap:1.1rem 1.6rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));padding-block:.8rem .4rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{position:relative;padding:.38rem .85rem;border:1.5px solid var(--line-2);border-radius:99px;font-size:.88rem;font-weight:600;background:var(--surface);cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s var(--ease)}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip:active{transform:scale(.97)}
.chip:has(input:checked){background:var(--ink);color:var(--surface);border-color:var(--ink)}
.chip:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.sws{display:grid;gap:.55rem}
.sw{display:flex;align-items:center;gap:.7rem;font-size:.9rem;cursor:pointer}
.sw input{position:absolute;opacity:0}
.sw i{flex:none;width:2.6rem;height:1.5rem;border-radius:99px;background:var(--line-2);position:relative;transition:background .2s}
.sw i::after{content:"";position:absolute;inset-block-start:.2rem;inset-inline-start:.2rem;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:inset-inline-start .22s var(--ease)}
.sw input:checked+i{background:var(--go)}
.sw input:checked+i::after{inset-inline-start:1.3rem}
.sw input:focus-visible+i{outline:3px solid var(--ink);outline-offset:3px}
.sw small{display:block;color:var(--ink-2);font-size:.76rem;line-height:1.4}

/* ---------- gallery ---------- */
.gal-h{display:flex;align-items:baseline;gap:.8rem;margin:clamp(28px,5vw,52px) 0 1rem}
.gal-h h2{font:400 clamp(1.9rem,4vw,2.6rem)/1.1 var(--display)}
.gal-h .cnt{color:var(--ink-2);font-weight:600}
.gallery{column-width:15.5rem;column-gap:1rem}
.fr{break-inside:avoid;margin:0 0 1.2rem;position:relative;border-radius:var(--r)}
.fr .thumb{all:unset;box-sizing:border-box;display:block;width:100%;position:relative;border-radius:12px;overflow:hidden;cursor:pointer;aspect-ratio:var(--ar,1.7778);background:var(--bg-2);
  box-shadow:0 0 0 1.5px var(--line-2);transition:transform .35s var(--ease),box-shadow .25s}
.fr .thumb:hover{transform:translateY(-3px);box-shadow:0 0 0 1.5px var(--ink),0 18px 30px -16px rgba(17,18,42,.5)}
.fr .thumb:active{transform:scale(.985)}
.fr .thumb:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.fr.sel .thumb{box-shadow:0 0 0 3px var(--ink),0 18px 30px -16px rgba(17,18,42,.5)}
.fr .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;filter:blur(12px) saturate(.3) brightness(1.2);transform:scale(1.04);transition:opacity .5s var(--ease),filter .9s var(--ease),transform .9s var(--ease)}
.fr .thumb img.dev{opacity:1;filter:none;transform:none}
.fr .play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .25s}
.fr .play span{width:3.4rem;height:3.4rem;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;color:#11122a;transform:scale(.8);transition:transform .3s var(--ease);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.fr .play svg{width:1.4rem;height:1.4rem;fill:currentColor;stroke:none}
.fr .thumb:hover .play,.fr .thumb:focus-visible .play{opacity:1}
.fr .thumb:hover .play span{transform:scale(1)}
.fr .tc{position:absolute;inset-block-end:.5rem;inset-inline-start:.5rem;padding:.1rem .5rem;border-radius:6px;background:rgba(10,10,25,.78);color:#fff;font-size:.74rem;font-weight:600;letter-spacing:.03em}
.fr .tag{position:absolute;inset-block-start:.5rem;inset-inline-end:.5rem;display:inline-flex;align-items:center;gap:.35rem;padding:.12rem .55rem;border-radius:99px;background:rgba(255,255,255,.94);color:#11122a;font-size:.72rem;font-weight:700}
.fr .tag svg{width:.9rem;height:.9rem}
/* not-yet-developed frame: running / queued */
.fr .raw{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.2rem;padding:.6rem;text-align:center;
  background:repeating-linear-gradient(135deg,var(--bg-2) 0 9px,color-mix(in srgb,var(--bg-2) 70%,var(--surface)) 9px 18px)}
.fr .raw .n{font:400 clamp(3.4rem,9vw,5rem)/1 var(--display);color:var(--ink)}
.fr .raw .st{font-weight:700;font-size:.86rem}
.fr .raw .tm{font-size:.76rem;color:var(--ink-2)}
.fr.s-q .thumb{box-shadow:0 0 0 1.5px var(--line-2);outline:2px dashed var(--line-2);outline-offset:-8px}
.film{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;margin-top:.55rem}
.film i{display:block;height:.55rem;border-radius:2px;background:var(--line-2);transition:background .3s}
.film i.on{background:var(--rec)}
.film i.cur{background:var(--rec);animation:cell 1s var(--ease) infinite}
@keyframes cell{0%,100%{opacity:1}50%{opacity:.35}}
.fr.s-run .thumb{box-shadow:0 0 0 2px var(--rec)}
.fr.s-rev .thumb{box-shadow:0 0 0 3px var(--amber)}
.fr.s-err .thumb{box-shadow:0 0 0 2px var(--danger)}
.fr .cap{padding:.6rem .15rem 0}
.fr .ttl{font-weight:700;line-height:1.45;font-size:.96rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fr .sub{display:flex;flex-wrap:wrap;gap:.1rem .7rem;color:var(--ink-2);font-size:.78rem;margin-top:.15rem}
.fr .msg{font-size:.84rem;font-weight:600;margin:.35rem 0 0;color:var(--rec-ink)}
.fr .msg.warn{color:var(--amber-ink)}
.fr .acts{display:flex;flex-wrap:wrap;gap:.2rem;margin-top:.3rem;margin-inline-start:-.35rem}
.fr .acts .ghost{padding:.3rem .5rem;font-size:.8rem}
.empty{display:grid;justify-items:start;gap:.4rem;padding:2rem 0 3rem;max-width:42ch;color:var(--ink-2)}
.empty .leader{width:7.5rem;height:7.5rem;color:var(--ink)}
.empty strong{font:400 1.6rem/1.2 var(--display);color:var(--ink)}

/* ---------- room: player + publishing text ---------- */
.room{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem 2rem;margin-top:1.6rem;padding:clamp(14px,2.4vw,26px);border-radius:calc(var(--r) + 4px);background:var(--surface);box-shadow:var(--shadow);animation:rise .5s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(min-width:1000px){.room.split{grid-template-columns:minmax(300px,var(--stage-w,54%)) minmax(0,1fr);align-items:start}}
.stage{--ar:1.7778;position:relative;border-radius:12px;overflow:hidden;background:#0a0b17;aspect-ratio:var(--ar);width:min(100%,calc(76vh * var(--ar)));margin-inline:auto}
.stage video,.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#0a0b17}
.room h2{font:400 clamp(1.6rem,3vw,2.2rem)/1.25 var(--display)}
.room .meta{color:var(--ink-2);font-size:.9rem;margin:.3rem 0 1rem}
.acts{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.fmt{display:inline-flex;gap:.4rem;align-items:center}
.fmt select{width:auto;padding:.5rem .7rem;border:1.5px solid var(--line-2);border-radius:12px;background:var(--surface);font-size:.88rem}
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:1.2rem 0 .6rem}
.tabs button{padding:.35rem .9rem;border:1.5px solid var(--line-2);border-radius:99px;background:var(--surface);font-weight:600;font-size:.86rem;transition:background .18s,color .18s,border-color .18s}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.mt .mr{display:grid;grid-template-columns:5.4rem minmax(0,1fr) auto;gap:.5rem .8rem;align-items:start;padding:.55rem 0;border-top:1px solid var(--line);font-size:.92rem}
.mt .mr b{font-weight:700;color:var(--ink-2);font-size:.82rem;padding-top:.15rem}
.mt .mtx{white-space:pre-wrap}
.mh{font:400 1.35rem/1.2 var(--display);margin-top:1.4rem}
details.full{margin-top:1rem}
details.full summary{cursor:pointer;font-weight:700;padding:.4rem 0}
details.full textarea{width:100%;min-height:10rem;margin-top:.5rem;font-size:.86rem;direction:ltr;text-align:left;border:1.5px solid var(--line-2);border-radius:12px;padding:.7rem;background:var(--bg)}

/* ---------- storyboard editor ---------- */
.board{grid-column:1/-1;min-width:0}
.scn .bd{min-width:0}
.board h2{margin-bottom:.2rem}
.board .bar2{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.9rem 0 1.2rem}
.music{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center;padding:.7rem .9rem;border-radius:12px;background:var(--bg);font-size:.9rem;margin-bottom:.4rem}
.music b{font-weight:700}
.scn{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem 1.1rem;padding:1.3rem 0;border-top:1px solid var(--line)}
.scn .no{font:400 3.4rem/1 var(--display);color:var(--ink);opacity:.9;padding-top:.1rem;min-width:2.6rem;text-align:center}
.scn .no small{display:block;font:600 .72rem/1.2 var(--ui);color:var(--ink-2);margin-top:.35rem}
.scn header{display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:center;margin-bottom:.4rem}
.scn header .sp{flex:1}
.scn textarea{width:100%;min-height:5rem;font-size:.95rem;padding:.7rem .85rem;border:1.5px solid var(--line-2);border-radius:12px;background:var(--bg);resize:vertical;line-height:1.75}
.scn textarea:focus{outline:none;border-color:var(--ink);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--hl) 70%,transparent)}
.warn{color:var(--amber-ink);background:var(--amber-soft);font-size:.86rem;font-weight:600;margin:.5rem 0 0;padding:.4rem .7rem;border-radius:10px}
.strip{display:flex;gap:.7rem;overflow-x:auto;padding:.8rem 0 .4rem;scrollbar-width:thin}
.tile{flex:none;width:9.6rem}
.tile .im{position:relative;aspect-ratio:16/10;background:#0a0b17;border-radius:5px;padding:7px 0;overflow:hidden}
.tile .im::before,.tile .im::after{content:"";position:absolute;inset-inline:0;height:7px;z-index:2;
  background:radial-gradient(circle at 5px 3.5px,var(--surface) 1.5px,transparent 1.9px) 0 0/10px 7px repeat-x}
.tile .im::before{inset-block-start:0}.tile .im::after{inset-block-end:0}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile .tag2{position:absolute;inset-block-start:11px;inset-inline-start:.35rem;background:rgba(10,10,25,.82);color:#fff;font-size:.68rem;font-weight:700;padding:.02rem .4rem;border-radius:4px;z-index:3}
.tile .why{font-size:.74rem;color:var(--ink-2);line-height:1.45;margin-top:.3rem;min-height:2.2em}
.tile .ctl{display:flex;gap:.1rem;margin-top:.1rem;align-items:center}
.tile .ctl button{background:none;border:0;padding:.22rem;border-radius:6px;color:var(--ink-2);display:inline-flex;transition:background .15s,color .15s}
.tile .ctl button:hover:not(:disabled){background:var(--bg-2);color:var(--ink)}
.tile .ctl button:disabled{opacity:.3;cursor:default}
.tile .ctl button svg{width:1rem;height:1rem}
.tile .ctl input{width:3.5rem;padding:.12rem .3rem;border:1.5px solid var(--line-2);border-radius:6px;background:var(--surface);font-size:.8rem}
.alts>summary{cursor:pointer;color:var(--ink-2);font-size:.88rem;padding:.3rem 0;font-weight:600}
.alts .tile{cursor:pointer;opacity:.82;transition:opacity .15s,transform .2s var(--ease)}
.alts .tile:hover{opacity:1;transform:translateY(-2px)}
.upl{display:inline-flex;gap:.45rem;align-items:center;cursor:pointer;color:var(--ink-2);font-size:.88rem;padding:.3rem .5rem;border-radius:8px;font-weight:600}
.upl:hover{background:var(--bg-2);color:var(--ink)}
.upl svg{width:1rem;height:1rem}
.upl input{display:none}
@media(max-width:640px){.scn{grid-template-columns:minmax(0,1fr)}.scn .no{text-align:start;font-size:2.4rem}.scn .no small{display:inline;margin-inline-start:.5rem}}

/* ---------- motion ---------- */
.reveal{animation:rise .55s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.fr .thumb img{opacity:1;filter:none;transform:none}}

/* ---------- UI language switcher ---------- */
.lg{display:inline-flex;border:1.5px solid var(--line-2);border-radius:99px;background:var(--surface);padding:2px;gap:2px;direction:ltr}
.lg button{border:0;background:none;color:var(--ink-2);font:600 .78rem/1 inherit;font-family:inherit;padding:.38rem .7rem;border-radius:99px;cursor:pointer;transition:background .18s,color .18s}
.lg button:hover{color:var(--ink)}
.lg button[aria-pressed=true]{background:var(--ink);color:var(--surface)}
.lg button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.lgbar{display:flex;justify-content:center;margin-bottom:2rem}
@media(max-width:560px){.lg button{padding:.34rem .5rem;font-size:.72rem}}
html[dir=ltr] input.ltr{text-align:left}

/* ---------- accounts ---------- */
.login form[hidden]{display:none}
.alinks{display:flex;justify-content:space-between;gap:1rem;margin:1.1rem 0 0;font-size:.88rem}
.alinks a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.alinks a:hover{color:var(--ink)}
.okmsg{margin:0 0 1rem;padding:.7rem .9rem;border-radius:12px;background:var(--bg-2);border:1.5px solid var(--go);font-size:.9rem;line-height:1.5}
.gate{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:0 0 1.2rem;padding:.9rem 1.1rem;border-radius:14px;border:1.5px solid var(--line-2);background:var(--surface)}
.gate p{margin:0;flex:1 1 18rem;font-size:.92rem;line-height:1.55}
.gate[hidden]{display:none}
#quotaLine[hidden],#gate[hidden]{display:none!important}
.login .brand{font-size:clamp(2.6rem,11vw,4.4rem);gap:.8rem;flex-wrap:wrap}

/* ---------- plans ---------- */
.plans{flex:1 1 100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.7rem}
.plans[hidden]{display:none!important}
.plan{padding:.9rem 1rem;border:1.5px solid var(--line-2);border-radius:14px;background:var(--bg)}
.plan b{display:block;font-size:1.05rem}
.plan .pr{display:block;margin:.2rem 0 .5rem;font-size:1.5rem;font-weight:800}
.plan .pr small{font-size:.8rem;font-weight:500;color:var(--ink-2)}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:.15rem;font-size:.82rem;color:var(--ink-2)}

/* ---------- account panel ---------- */
.acct{margin:0 0 1.4rem;padding:1.2rem 1.3rem;border:1.5px solid var(--line-2);border-radius:16px;background:var(--surface)}
.acct[hidden]{display:none!important}
.acct h2{margin:0 0 .8rem;font-size:1.2rem}
.acct dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;margin:0 0 1rem;font-size:.92rem}
.acct dt{color:var(--ink-2)}
.acct dd{margin:0;font-weight:600}
.acct .acts{display:flex;gap:.6rem;flex-wrap:wrap}
.plan .btn{margin-top:.7rem;width:100%}
.okline{margin:0 0 1rem;padding:.7rem .9rem;border-radius:12px;background:var(--bg-2);border:1.5px solid var(--go);font-size:.9rem}