@font-face{font-family:"RN Cairo AR";src:url(/fonts/cairo-ar.36dc1eacf6.woff2) format("woff2");font-weight:200 1000;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
:root{--bg:#0e0e10;--panel:#151518;--line:#2a2a2f;--soft:#1d1d21;--text:#ececec;--mute:#9a9aa2;--gold:#e8b84a;--goldbg:#2d2718}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 Inter,"Noto Sans Arabic","Segoe UI",system-ui,sans-serif}
a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}
.s2-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
.s2-logo{color:var(--gold);font-weight:800;font-size:17px;margin-inline-end:12px;text-decoration:none}
.s2-tab{border:0;padding:7px 13px;border-radius:18px;background:var(--soft);color:#c8c8cc}.s2-tab.on{background:var(--gold);color:#111;font-weight:700}
.s2-sp{margin-inline-start:auto}.s2-credit{padding:7px 12px;border-radius:18px;background:var(--soft);color:#ddd}
.s2-lang{background:none;border:1px solid var(--line);border-radius:18px;padding:6px 10px}
.s2-main{padding:20px}.s2-h1{font-size:26px;font-weight:800;margin:4px 0}.s2-sub{color:var(--mute);margin-bottom:18px}
.s2-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.s2-tile{display:block;text-align:start;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:16px;min-height:120px;text-decoration:none}
.s2-tile:hover{border-color:var(--gold)}.s2-tile b{display:block;font-size:16px;margin:10px 0 4px}.s2-tile small{color:var(--mute)}
.s2-ico{width:34px;height:34px;border-radius:9px;background:var(--goldbg);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:800}
.s2-tool{border-style:dashed}.s2-tool .s2-ico{background:#1f2630;color:#8cc4ff}
.s2-sec{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#8a8a92;margin:16px 0 8px}
.s2-wrap{display:grid;grid-template-columns:400px 1fr;gap:18px;align-items:start}
.s2-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.s2-model{width:100%;display:flex;justify-content:space-between;align-items:center;background:var(--soft);border:1px solid #34343a;border-radius:10px;padding:10px 12px;text-align:start}
.s2-models{margin-top:6px;border:1px solid #34343a;border-radius:10px;overflow:hidden}.s2-models button{display:block;width:100%;text-align:start;border:0;border-bottom:1px solid #26262b;background:var(--soft);padding:10px 12px}
.s2-models button:hover,.s2-models button.on{background:#25231c}
.s2-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.s2-badges span{font-size:11px;padding:2px 7px;border-radius:8px;background:#2a2a30;color:#ccc}.s2-badges span.y{background:var(--goldbg);color:var(--gold)}
.s2-chips{display:flex;flex-wrap:wrap;gap:6px}.s2-chip{padding:6px 11px;border-radius:8px;background:var(--soft);border:1px solid #34343a;font-size:13px}.s2-chip.on{border-color:var(--gold);color:var(--gold)}
.s2-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.s2-slot{position:relative;border:1.5px dashed #46464d;border-radius:10px;min-height:74px;display:flex;align-items:center;justify-content:center;color:#8f8f96;font-size:12px;text-align:center;padding:6px;background:none;overflow:hidden}
.s2-slot.f{border:1px solid #e8b84a66;background:#211f18;color:var(--gold)}.s2-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.s2-slot span{position:relative}.s2-x{position:absolute;top:3px;inset-inline-end:5px;font-size:14px;color:#fff}
.s2-hint{font-size:12px;color:var(--mute);margin-top:6px}
textarea.s2-in,select.s2-in,input.s2-in{width:100%;background:var(--soft);border:1px solid #34343a;border-radius:10px;color:#ddd;padding:10px;font:inherit}
textarea.s2-in{min-height:90px;resize:vertical}
details.s2-adv{margin-top:14px;background:#1a1a1d;border-radius:10px;padding:10px 12px;color:#bbb}details.s2-adv summary{cursor:pointer}
.s2-row{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.s2-consent{display:flex;gap:8px;margin-top:12px;font-size:12px;color:#bbb}
.s2-gen{width:100%;margin-top:14px;display:flex;justify-content:space-between;align-items:center;border:0;background:var(--gold);color:#111;border-radius:12px;padding:13px 16px;font-weight:800;font-size:15px}
.s2-gen:disabled{opacity:.5;cursor:not-allowed}.s2-cost{font-size:12px;color:var(--mute);margin-top:6px;min-height:16px}.s2-err{color:#ff8f8f}
.s2-pend{font-size:11px;color:#e8b84a;margin-top:4px}
.s2-res{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:12px}
.s2-card{border-radius:12px;background:linear-gradient(135deg,#26262c,#18181b);border:1px solid #2a2a2e;aspect-ratio:16/10;position:relative;overflow:hidden}
.s2-card video,.s2-card img{width:100%;height:100%;object-fit:cover}.s2-card .l{position:absolute;bottom:0;inset-inline:0;padding:6px 10px;font-size:12px;background:linear-gradient(transparent,#000a)}
@media (max-width:860px){.s2-wrap{grid-template-columns:1fr}.s2-top{padding:10px 12px;position:static;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.s2-top>*{flex:0 0 auto;white-space:nowrap}
 .s2-gen{position:sticky;bottom:10px;box-shadow:0 6px 20px #000c}.s2-tiles{grid-template-columns:1fr 1fr}.s2-tile{min-height:104px;padding:12px}.s2-h1{font-size:21px}}

/* studiofix */
.s2-gate{border:1px solid #e8b84a66;background:#211f18;border-radius:12px;padding:12px 14px;margin-top:14px;font-size:13px;line-height:1.55}
.s2-gate p{margin:0 0 8px}.s2-gate a{color:var(--gold);font-weight:700}.s2-pubnote{margin:0 0 16px}
.s2-signin{display:inline-block;background:var(--gold);color:#111!important;border-radius:999px;padding:6px 14px;font-weight:800;text-decoration:none;font-size:13px;margin-inline-end:8px}
.s2-x2{background:none;border:1px solid #46464d;color:#bbb;border-radius:999px;padding:4px 10px;font-size:12px;margin-top:6px;cursor:pointer}
.s2-sel{min-height:0;height:42px;padding:8px 10px}
.s2-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}.s2-card audio{display:block;width:100%;margin:8px 0}
/* ===== clone of the wan_simple rd6 layout (Higgsfield-style card grid); every accent = Rolling Now yellow ===== */
:root{--y:#d4af37;--y2:#e9c75a;--ysoft:rgba(212,175,55,.14);--bg0:#0a0a0c;--bg1:#111114;--line:rgba(255,255,255,.08);--txt:#eef0f4;--mut2:#8b8b96;--gold:#d4af37;--goldbg:rgba(212,175,55,.12)}
body{background:var(--bg0);color:var(--txt);font-family:"RN Cairo AR","Inter","Segoe UI",Tahoma,system-ui,sans-serif}
.rc-top{position:sticky;top:0;z-index:50;height:56px;display:flex;align-items:center;gap:10px;padding:0 22px;background:rgba(10,10,12,.72);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid rgba(255,255,255,.06)}
.rc-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}.rc-brand b{display:block;font-size:14.5px;font-weight:800}.rc-brand small{display:block;font-size:11.5px;color:var(--mut2)}
.rc-logo{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,var(--y2),var(--y));color:#1b1206;font-size:13px;box-shadow:0 6px 18px rgba(212,175,55,.35)}
.s2-sp{flex:1}
.rc-pill{border:1px solid rgba(255,255,255,.09);background:#141418;color:#d6d6de;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600}
.rc-cta{border-radius:11px;padding:8px 14px;font-weight:800;font-size:13px;color:#1b1206;text-decoration:none;background:linear-gradient(100deg,var(--y2),var(--y));box-shadow:0 6px 18px rgba(212,175,55,.3)}
.rc-lang{display:flex;border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:3px;background:#141418}.rc-lang button{border:0;background:none;color:#aaa;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}.rc-lang button.on{background:#2a2a30;color:#fff}
.rc-main{max-width:1280px;margin:0 auto;padding:0 22px 60px}
#mdHero{margin:18px auto 0;padding:44px 40px 30px;border-radius:24px;border:1px solid rgba(255,255,255,.07);
 background:radial-gradient(700px 340px at 88% -20%,rgba(212,175,55,.24),transparent 60%),radial-gradient(520px 300px at 0% 130%,rgba(212,175,55,.10),transparent 60%),radial-gradient(500px 260px at 50% -40%,rgba(233,199,90,.12),transparent 60%),#111114}
#mdT{margin:0;font-size:clamp(30px,4vw,52px);font-weight:900;letter-spacing:-.03em;line-height:1.05}
#mdT span{background:linear-gradient(90deg,#f3dc8a,var(--y2) 45%,var(--y));-webkit-background-clip:text;background-clip:text;color:transparent}
#mdHero p{margin:10px 0 22px;color:#b9b9c4;font-size:15.5px;max-width:640px}
.mdq{display:flex;gap:10px;align-items:center;border-radius:16px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.09);padding:8px 8px 8px 16px;max-width:820px}
.mdq:focus-within{border-color:rgba(212,175,55,.7);box-shadow:0 0 0 4px rgba(212,175,55,.14)}
.mdq textarea{flex:1;background:none;border:0;outline:0;color:#fff;font:inherit;font-size:15px;resize:none;height:70px;padding-top:12px}
.mdq button{border:0;border-radius:13px;padding:13px 20px;font-weight:800;color:#1b1206;cursor:pointer;background:linear-gradient(100deg,var(--y2),var(--y));box-shadow:0 8px 24px rgba(212,175,55,.35);white-space:nowrap}
#mdPills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}#mdPills button{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#cfcfd6;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600}
#mdPills button.on{background:rgba(212,175,55,.12);color:var(--y2);border-color:rgba(212,175,55,.45)}
#hmNav{position:sticky;top:56px;z-index:30;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 0;margin:6px 0 4px;background:linear-gradient(#0a0a0c 80%,rgba(10,10,12,0))}
#hmNav::-webkit-scrollbar{display:none}
#hmNav button{flex:0 0 auto;border:1px solid rgba(255,255,255,.09);background:#141418;color:#d6d6de;border-radius:999px;padding:8px 16px;font:600 13.5px/1 inherit;cursor:pointer;transition:.2s}
#hmNav button:hover{border-color:rgba(255,255,255,.25)}#hmNav button.on{background:var(--y);color:#0a0a0c;border-color:var(--y)}
.hsec{margin:30px 0 8px}.hsec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.hsec-h h3{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em;color:#fff}
.hsec-h h3:before{content:"";display:inline-block;width:4px;height:18px;border-radius:3px;background:var(--y);margin-inline-end:10px;vertical-align:-2px}
.hsec-h p{margin:4px 0 0;font-size:14px;color:var(--mut2)}
.hsec-g{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.hcard{display:flex;flex-direction:column;background:none;border:0;padding:0;text-align:start;min-width:0;cursor:pointer;color:inherit}
.hbg{position:relative;display:block;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#16161a;border:1px solid rgba(255,255,255,.06);transition:border-color .25s,box-shadow .25s}
.hbg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.45))}
.hbg img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.hcard:hover .hbg{border-color:rgba(212,175,55,.7);box-shadow:0 0 0 1px rgba(212,175,55,.5),0 14px 34px rgba(0,0,0,.5)}.hcard:hover .hbg img{transform:scale(1.06)}
.htry{position:absolute;inset-inline-end:10px;bottom:10px;z-index:3;background:var(--y);color:#1b1206;font-size:12px;font-weight:800;border-radius:9px;padding:7px 12px;opacity:0;transform:translateY(6px);transition:.25s}
.hcard:hover .htry{opacity:1;transform:none}
.hcard b{display:block;padding:12px 2px 0;font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:#fff}
.hcard .hd{display:block;padding:4px 2px 0;font-size:13px;line-height:1.5;color:#a3a3ae}
.hlab{position:absolute;top:10px;inset-inline-start:10px;z-index:4;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:7px;line-height:1.2}
.hlab.new{background:var(--y);color:#0a0a0c}.hlab.soon{background:rgba(10,10,12,.7);color:var(--y2);border:1px solid rgba(212,175,55,.6);backdrop-filter:blur(6px)}
.hbg.hph{background:radial-gradient(120% 90% at 20% 0%,rgba(212,175,55,.30),transparent 60%),radial-gradient(90% 80% at 100% 100%,rgba(212,175,55,.12),transparent 60%),#15151a}
.hphi{position:absolute;inset:0;display:grid;place-items:center;color:var(--y2);font-weight:900;font-size:22px;letter-spacing:.12em}
/* tool modal (same look as the reference form dialog) */
.rc-ov{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);display:grid;place-items:center;padding:24px}
.rc-modal{width:min(1100px,100%);max-height:calc(100vh - 48px);display:grid;grid-template-columns:42% 58%;background:#111114;border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.rc-media{background:#0c0c0e;min-height:100%}.rc-media img{width:100%;height:100%;object-fit:cover;display:block}
.rc-side{padding:18px 20px 22px;overflow-y:auto;max-height:calc(100vh - 48px)}
.rc-mh{display:flex;align-items:center;justify-content:space-between;gap:10px}.rc-mh h2{margin:0;font-size:19px;font-weight:800;color:#fff}
.rc-x{width:34px;height:34px;border-radius:50%;border:0;background:#1f1f24;color:#ddd;font-size:14px}
.rc-tags{display:flex;gap:6px;margin:10px 0 0}.rc-tags .hlab{position:static}
.rc-desc{margin:10px 0 4px;color:#a3a3ae;font-size:13px;line-height:1.55}
.rc-side .s2-main{padding:0;max-width:none}.rc-side .s2-wrap{display:block}.rc-side .s2-panel{background:none;border:0;padding:0}
.s2-sec{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#a3a3ae;margin:16px 0 7px}
textarea.s2-in,select.s2-in,input.s2-in{background:#0d0d10;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#eee}
textarea.s2-in:focus,select.s2-in:focus{outline:0;border-color:rgba(212,175,55,.6);box-shadow:0 0 0 4px var(--ysoft)}
.s2-chip{background:#0d0d10;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#ddd}.s2-chip.on{border-color:var(--y);color:var(--y2);background:var(--ysoft)}
.s2-model{background:#0d0d10;border:1px solid rgba(255,255,255,.1)}.s2-models button{background:#0d0d10}
.s2-slot{border-color:rgba(255,255,255,.18)}.s2-slot.f{border-color:rgba(212,175,55,.5);background:rgba(212,175,55,.08);color:var(--y2)}
.s2-gen{margin-top:20px;border-radius:12px;padding:14px 18px;color:#1b1206;background:linear-gradient(100deg,var(--y2),var(--y));box-shadow:0 10px 28px rgba(212,175,55,.3)}
details.s2-adv{background:#0d0d10;border:1px solid rgba(255,255,255,.08)}
.s2-gate{border-color:rgba(212,175,55,.45);background:rgba(212,175,55,.08)}.s2-gate a{color:var(--y2)}
.s2-signin{background:linear-gradient(100deg,var(--y2),var(--y));color:#1b1206!important;border-radius:11px}
.s2-pubnote{margin:16px 0 0;max-width:820px}
.rc-side .s2-res{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));margin-top:4px}
.s2-card{border-radius:14px;background:#16161a;border:1px solid rgba(255,255,255,.06)}
@media(max-width:1100px){.hsec-g{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){.hsec-g{grid-template-columns:repeat(3,minmax(0,1fr))}.rc-modal{grid-template-columns:1fr}.rc-media{max-height:200px}}
@media(max-width:560px){
 .rc-top{height:50px;padding:0 10px;gap:8px}.rc-brand small{display:none}.rc-brand b{font-size:13px}.rc-pill{display:none}
 .rc-main{padding:0 12px 40px}#mdHero{margin:10px 0 0;padding:26px 16px 18px;border-radius:20px}#mdT{font-size:clamp(26px,8vw,34px);line-height:1.12}
 .mdq{flex-direction:column;align-items:stretch;padding:10px}.mdq button{width:100%}
 #hmNav{top:50px;padding:10px 0}.hsec{margin:22px 0 4px}.hsec-h h3{font-size:19px}.hsec-h p{font-size:12.5px}
 .hsec-g{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none;margin-inline:-12px;padding-inline:12px}.hsec-g::-webkit-scrollbar{display:none}
 .hcard{flex:0 0 66%;scroll-snap-align:start}.hcard .hd{font-size:12.5px}
 .rc-ov{padding:0;place-items:stretch}.rc-modal{border-radius:0;max-height:100vh;height:100vh;display:flex;flex-direction:column}.rc-media{flex:0 0 150px;min-height:0}.rc-side{max-height:none;flex:1}
 .s2-gen{position:sticky;bottom:10px}
}

/* three accents (Mehdi 31 Oct): gold primary, fuchsia, neon green — one per category */
:root{--gold:#D4AF37;--pink:#FF2D95;--neon:#C6FF3D}
.rc-logo{width:auto;height:30px;background:none;box-shadow:none;border-radius:0;object-fit:contain}
.hsec{--c:var(--gold);--ct:#1b1206}.hsec.c-pink{--c:var(--pink);--ct:#fff}.hsec.c-neon{--c:var(--neon);--ct:#0a0a0c}
.hsec-h h3:before{background:var(--c)}
.hsec .hcard:hover .hbg{border-color:color-mix(in srgb,var(--c) 75%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent),0 14px 34px rgba(0,0,0,.5)}
.hsec .htry{background:var(--c);color:var(--ct)}
.hsec .hlab.new{background:var(--c);color:var(--ct)}
.hsec .hlab.soon{color:var(--c);border-color:color-mix(in srgb,var(--c) 60%,transparent)}
.hsec .hbg.hph{background:radial-gradient(120% 90% at 20% 0%,color-mix(in srgb,var(--c) 30%,transparent),transparent 60%),#15151a}.hsec .hphi{color:var(--c)}
#mdHero{background:radial-gradient(700px 340px at 88% -20%,rgba(255,45,149,.22),transparent 60%),radial-gradient(520px 300px at 0% 130%,rgba(198,255,61,.10),transparent 60%),radial-gradient(500px 260px at 50% -40%,rgba(212,175,55,.16),transparent 60%),#111114}
#mdT span{background:linear-gradient(90deg,#f3dc8a,var(--gold))!important;-webkit-background-clip:text!important;background-clip:text!important}
.mdq:focus-within{border-color:rgba(255,45,149,.6);box-shadow:0 0 0 4px rgba(255,45,149,.14)}
#mdPills button.on{background:rgba(198,255,61,.10);color:var(--neon);border-color:rgba(198,255,61,.45)}
#hmNav button.on{background:var(--neon);color:#0a0a0c;border-color:var(--neon)}
@media(max-width:560px){.rc-logo{height:24px}}

/* spread the three colours + reference card touch (rd3: .hcard.on glows) */
.hsec .hcard:hover .hbg{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 0 22px color-mix(in srgb,var(--c) 45%,transparent),0 14px 34px rgba(0,0,0,.5)}
.hsec .hcard.on .hbg,.hsec .hcard:active .hbg{border-color:var(--neon)!important;box-shadow:0 0 0 1px var(--neon),0 0 26px rgba(198,255,61,.45)!important}
.hsec .hcard:focus-visible{outline:0}.hsec .hcard:focus-visible .hbg{border-color:var(--neon);box-shadow:0 0 0 2px var(--neon)}
.mdq button{background:linear-gradient(100deg,#FF5FAE,var(--pink));color:#fff;box-shadow:0 8px 24px rgba(255,45,149,.35)}
.rc-cta{background:linear-gradient(100deg,#FF5FAE,var(--pink));color:#fff;box-shadow:0 6px 18px rgba(255,45,149,.3)}
.rc-lang button.on{background:rgba(198,255,61,.14);color:var(--neon)}
.rc-pill{color:var(--gold);border-color:rgba(212,175,55,.35)}
.s2-chip.on{border-color:var(--neon);color:var(--neon);background:rgba(198,255,61,.08)}
.s2-slot.f{border-color:rgba(255,45,149,.55);background:rgba(255,45,149,.08);color:#ff8fd0}
.rc-tags .hlab.new{background:var(--pink);color:#fff}
.s2-sec{color:#b7b7c0}.rc-side .s2-sec:first-of-type{color:var(--gold)}
.s2-gate .s2-chip{border-color:rgba(255,45,149,.5);color:#ff8fd0}
.s2-signin{background:linear-gradient(100deg,#FF5FAE,var(--pink));color:#fff!important}
textarea.s2-in:focus,select.s2-in:focus{border-color:rgba(198,255,61,.6);box-shadow:0 0 0 4px rgba(198,255,61,.12)}
.rc-x:hover{background:var(--pink);color:#fff}

.rc-classic{display:inline-flex;align-items:center;gap:8px;margin-top:10px;color:#cfcfd6;font-size:13px;text-decoration:none;border:1px dashed rgba(255,255,255,.2);border-radius:12px;padding:10px 14px}.rc-classic b{color:var(--gold)}.rc-classic:hover{border-color:var(--gold)}

/* nav2: site header inside the studio */
.rnx{position:sticky;top:0;z-index:50;background:rgba(10,10,12,.86);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid rgba(212,175,55,.22)}
.rnx-w{display:flex;align-items:center;gap:14px;height:60px;padding:0 20px;max-width:1440px;margin:0 auto}
.rnx-brand img{height:34px;width:auto;display:block}
.rnx-back{color:var(--gold,#D4AF37);text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap;border:1px solid rgba(212,175,55,.35);border-radius:999px;padding:6px 12px}
.rnx-back:hover{background:rgba(212,175,55,.12)}
.rnx-nav{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.rnx-nav a{color:#cfcfd6;text-decoration:none;font-size:13px;font-weight:600;padding:7px 9px;border-radius:8px;white-space:nowrap}
.rnx-nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.rnx-nav a.on,.rnx-panel a.on{color:#C6FF3D}
.rnx-auth{display:flex;gap:8px;align-items:center}.rnx-auth .rc-pill{display:inline-block}
.rnx-b{color:#fff;text-decoration:none;font-size:13px;font-weight:700;border:1px solid rgba(255,45,149,.5);border-radius:11px;padding:7px 12px}
.rnx-menu{display:none;position:relative}.rnx-menu summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:8px}
.rnx-menu summary::-webkit-details-marker{display:none}.rnx-menu summary span{width:20px;height:2px;background:#D4AF37;border-radius:2px}
.rnx-panel{position:absolute;inset-inline-end:0;top:44px;min-width:220px;background:#121216;border:1px solid rgba(212,175,55,.3);border-radius:14px;padding:8px;display:flex;flex-direction:column;box-shadow:0 18px 40px #000a}
.rnx-panel a{color:#ddd;text-decoration:none;padding:9px 12px;border-radius:8px;font-size:14px}.rnx-panel a:hover{background:rgba(255,255,255,.06)}
.rnx-home{color:#D4AF37!important;font-weight:700}
@media (max-width:1100px){.rnx-nav{display:none}.rnx-menu{display:block}.rnx-w{justify-content:space-between}}
@media (max-width:600px){.rnx-w{gap:8px;padding:0 10px;height:54px}.rnx-brand img{height:28px}.rnx-back{font-size:12px;padding:5px 9px}.rnx .rc-lang button{padding:4px 7px}.rnx-auth .rc-pill{display:none}}
.s2-card .l{pointer-events:none}.s2-card video{background:#000}
.rc-title{font-size:clamp(22px,3vw,34px);font-weight:800;margin:22px 0 14px;line-height:1.25}.rc-title span{color:#D4AF37}
.rnx .rc-cta{white-space:nowrap}.rnx-pl{padding:8px 4px 2px;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}.rnx-pl .rc-lang{display:inline-flex}.rnx-w>.rc-lang{flex:none}@media (min-width:601px){.rnx-pl{display:none}}@media (max-width:600px){.rnx-w>.rc-lang{display:none}.rc-title{margin-top:26px}}
/* nav2: compact cards (~30% smaller) */
/* iconfix: compact cards on phone only; desktop keeps the original 5-column size */
@media (max-width:768px){.rc-main .hsec-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.rc-main .hcard b{font-size:13.5px}.rc-main .hcard .hd{font-size:11.5px;line-height:1.35}}
@media (max-width:600px){.rc-main .hsec-g{display:flex}.rc-main .hcard{flex:0 0 44%}}

/* cairo: one font everywhere, including native form controls (iOS select) */
html,body{font-family:"RN Cairo AR","Inter","Segoe UI",Tahoma,system-ui,sans-serif}
button,input,select,textarea,option,optgroup,label{font-family:inherit;font-size:inherit}
select{-webkit-appearance:none;appearance:none}
/* note 9: admin provider drawer */
.rnx-adm{border:1px solid rgba(198,255,61,.45);color:#C6FF3D;background:rgba(198,255,61,.08);border-radius:11px;padding:7px 11px;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.pb-ov{position:fixed;inset:0;z-index:90;background:#0009;display:flex;justify-content:flex-end}
[dir=rtl] .pb-ov{justify-content:flex-start}
.pb-d{width:min(520px,100%);height:100%;overflow:auto;background:#0f0f13;border-inline-start:1px solid rgba(212,175,55,.35);padding:18px 18px 40px;box-shadow:0 0 40px #000}
.pb-d h2{margin:0 0 4px;font-size:20px;color:#D4AF37}.pb-d .pb-s{color:#999;font-size:12px;margin:0 0 14px}
.pb-x{float:inline-end;background:none;border:0;color:#aaa;font-size:22px;cursor:pointer}
.pb-c{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 14px;margin:10px 0;background:#15151a}
.pb-c h4{margin:0 0 6px;font-size:14px;display:flex;justify-content:space-between;gap:8px}
.pb-bal{font-size:22px;font-weight:800;color:#C6FF3D}.pb-bal.na{font-size:13px;color:#FF2D95;font-weight:700}
.pb-t{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px}.pb-t td,.pb-t th{padding:4px 6px;text-align:start;border-top:1px solid rgba(255,255,255,.06)}.pb-t th{color:#999;font-weight:600}
.pb-c a{color:#D4AF37;font-size:12px}.pb-m{color:#888;font-size:11px}
.pb-ex{background:#FF2D95;color:#fff;font-weight:800;font-size:11px;border-radius:6px;padding:2px 8px;margin-inline-start:8px}

/* note 13: my creations inside each tool */
.s2-card{position:relative}.s2-card.busy{display:flex;align-items:center;justify-content:center}.s2-card.aud{aspect-ratio:auto;padding:10px 10px 30px}
.s2-prog{width:78%;text-align:center}.s2-prog b{display:block;font-size:20px;color:#C6FF3D;margin-bottom:6px}
.s2-prog span{display:block;height:6px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}.s2-prog i{display:block;height:100%;background:linear-gradient(90deg,#D4AF37,#C6FF3D);transition:width .6s}
.s2-ex{position:absolute;top:6px;inset-inline-start:6px;z-index:2;background:#FF2D95;color:#fff;font-size:10px;font-weight:800;border-radius:5px;padding:1px 6px}
.s2-empty{color:#888;font-size:13px}
.hbg{position:relative}.hico{position:absolute;bottom:8px;inset-inline-end:8px;width:40px;height:40px;border-radius:12px;background:rgba(10,10,12,.72);backdrop-filter:blur(6px);border:1px solid rgba(212,175,55,.45);box-shadow:0 0 14px rgba(212,175,55,.25);display:flex;align-items:center;justify-content:center}.hico svg{width:26px;height:26px}

/* ctlrow (preview): Duration slider + Quality + Aspect dropdowns in one row */
.s2-ctlrow{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:6px}
.s2-ctl{flex:0 0 auto;min-width:120px;font-family:inherit}.s2-ctl .s2-sec{margin:0 0 6px}.s2-ctl-dur{flex:1 1 200px;min-width:180px}
.s2-durv{color:var(--neon,#c6ff3d);font-weight:700;margin-inline-start:6px}
.s2-range{width:100%;accent-color:var(--neon,#c6ff3d);height:22px;margin:0;cursor:pointer}
.s2-rng{display:flex;justify-content:space-between;font-size:11px;color:#888;margin-top:2px}
.s2-dd{position:relative}.s2-dd>summary{list-style:none}.s2-dd>summary::-webkit-details-marker{display:none}
.s2-ddb{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:10px;background:#0d0d10;border:1px solid rgba(255,255,255,.14);color:#eee;font-size:13px;cursor:pointer;white-space:nowrap}
.s2-dd[open] .s2-ddb{border-color:var(--neon,#c6ff3d)}.s2-cv{margin-inline-start:auto;font-size:11px;color:#999}
.s2-ddm{position:absolute;inset-inline-start:0;top:calc(100% + 4px);z-index:50;min-width:100%;background:#141418;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:4px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.s2-ddo{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:8px;background:none;border:0;color:#ddd;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;text-align:start}
.s2-ddo:hover{background:rgba(255,255,255,.06)}.s2-ddo.on{color:var(--neon,#c6ff3d)}
.s2-ar{display:inline-block;flex:0 0 auto;border:1.5px solid currentColor;border-radius:2px;opacity:.85}.s2-ar-auto{width:14px;height:14px;border-style:dashed}
@media (max-width:600px){.s2-ctlrow{gap:10px}.s2-ctl-dur{flex-basis:100%}.s2-ctl{flex:1 1 40%}}

/* hdr2: studio header = AI Studio brand + Back to app + language + credits only */
.rnx .rnx-nav,.rnx .rnx-menu{display:none!important}.rnx-sp{flex:1 1 auto}
.rnx-brand{display:flex;align-items:center;gap:8px;text-decoration:none}.rnx-ais{color:var(--neon,#c6ff3d);font-size:14px;font-weight:800;white-space:nowrap}
@media (max-width:600px){.rnx-ais{font-size:12px}}

/* hdr3: studio section menu in the sticky header, above tool overlays */
.rnx{z-index:90}
.rnx-sec{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:0 16px 8px;max-width:1400px;margin:0 auto;-webkit-overflow-scrolling:touch}.rnx-sec::-webkit-scrollbar{display:none}
.rnx-sec button{flex:0 0 auto;padding:6px 12px;border-radius:999px;background:transparent;border:1px solid transparent;color:#c9c9d1;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.rnx-sec button:hover{color:#fff;background:rgba(255,255,255,.05)}.rnx-sec button.on{color:var(--neon,#c6ff3d);border-color:rgba(198,255,61,.45);background:rgba(198,255,61,.08)}
.rc-ov{top:var(--rnxh,64px)!important}.rc-modal{max-height:calc(100vh - var(--rnxh,64px) - 24px)}
@media (max-width:900px){.rc-modal{height:calc(100vh - var(--rnxh,64px))!important;max-height:none}}
.rc-allb{margin:4px 0 12px}.rc-allb button{background:none;border:1px solid rgba(255,255,255,.14);color:#ddd;border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}

/* hdr3 mobile: the language switch stays reachable now that the hamburger menu is gone */
@media (max-width:900px){.rnx .rnx-w>.rc-lang{display:inline-flex!important}.rnx-back{font-size:12px;padding:4px 8px}}
@media (max-width:420px){.rnx-ais{display:none}}

@media (max-width:600px){.rnx .rnx-w{flex-wrap:wrap;row-gap:6px;column-gap:8px;max-width:100vw;overflow:hidden}.rnx-sp{display:none}.rnx-brand img{height:24px;width:auto}.rnx .rnx-w>.rc-lang{order:5}.rnx-auth{order:6;margin-inline-start:auto}.rnx-auth .rc-cta{padding:5px 10px;font-size:12px}}

@media (max-width:600px){.rnx-auth .rc-cta{display:none}}

/* provlogos: provider brand mark above the family name */
.hphi{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:10px}.hplogo{width:46px;height:46px;display:block}
@media (max-width:768px){.hplogo{width:34px;height:34px}.hphi{gap:6px}}
.hcard .hbg img.hplogo{position:static!important;width:46px!important;height:46px!important;object-fit:contain!important;transform:none!important;flex:0 0 auto}
@media (max-width:768px){.hcard .hbg img.hplogo{width:34px!important;height:34px!important}}
/* dlcost 31 Oct 2026 */
.s2-acost{position:absolute;top:6px;inset-inline-start:6px;z-index:3;padding:3px 8px;border-radius:7px;background:#000d;color:#ffd166;border:1px solid #ffd16655;font:600 10.5px/1.5 Cairo,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px)}
/* side-icons 31 Oct 2026: Higgsfield-style vertical icon column on the media's inline-end edge (mirrors in RTL) */
.s2-side{position:absolute;top:10px;inset-inline-end:10px;z-index:3;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateX(4px);transition:opacity .18s,transform .18s}
[dir=rtl] .s2-side{transform:translateX(-4px)}
.s2-card:hover .s2-side,.s2-card:focus-within .s2-side{opacity:1;transform:none}
@media (hover:none){.s2-side{opacity:1;transform:none}}
.s2-side a,.s2-side button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(10,10,12,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.14);text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.s2-side a:hover,.s2-side button:hover{background:#e8ff47;color:#111;border-color:#e8ff47}
@media (max-width:700px){.s2-side{top:8px;inset-inline-end:8px}.s2-side a,.s2-side button{width:34px;height:34px}}