/* SALAM STUDIO — Salam neon identity. RTL-first, logical properties throughout. */
@font-face{font-family:Tajawal;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/tajawal-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Tajawal;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/tajawal-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Tajawal;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/tajawal-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Tajawal;font-style:normal;font-weight:800;font-display:swap;src:url(fonts/tajawal-arabic-800-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Tajawal;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/tajawal-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Tajawal;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/tajawal-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Tajawal;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/tajawal-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Tajawal;font-style:normal;font-weight:800;font-display:swap;src:url(fonts/tajawal-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Orbitron;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/orbitron-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Orbitron;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/orbitron-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Orbitron;font-style:normal;font-weight:800;font-display:swap;src:url(fonts/orbitron-latin-800-normal.woff2) format('woff2')}

:root{
  --bg:#070708;--bg-2:#111113;--bg-3:#18181b;--text:#f4f7fb;--muted:#9b9ca3;--neon:#e8ecf1;
  --glow:0 0 6px rgba(232,236,241,.7),0 0 18px rgba(232,236,241,.45),0 0 42px rgba(232,236,241,.22);
  --glass:rgba(255,255,255,.045);--line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.18);
  --ok:#7ee2b8;--warn:#ffc46b;--err:#ff7a8a;
  --r:20px;--r-sm:12px;--side:248px;
  --f-ar:Tajawal,"Segoe UI",Tahoma,"Noto Sans Arabic",Arial,sans-serif;
  --f-latin:Quicksand,Tajawal,"Segoe UI",system-ui,sans-serif;
  --f-display:Orbitron,Tajawal,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 var(--f-ar);min-height:100vh;overflow-x:hidden}
html[lang=en] body{font-family:var(--f-latin)}
body::before{content:"";position:fixed;inset:-20% -10% auto;height:70vh;background:radial-gradient(60% 60% at 70% 0%,rgba(232,236,241,.07),transparent 70%);pointer-events:none;z-index:0}
a{color:var(--neon)}
img{max-width:100%}
h1,h2,h3{line-height:1.3;margin:0 0 .5em;font-weight:800}
h1{font-size:clamp(1.6rem,2.6vw,2.2rem)}
h2{font-size:1.25rem}
h3{font-size:1.05rem}
p{margin:0 0 .8em}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.center{text-align:center}
.neon{color:var(--neon);text-shadow:var(--glow)}
:focus-visible{outline:2px solid var(--neon);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- shell ---------- */
.app{position:relative;z-index:1;display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;padding:22px 14px 24px;border-inline-end:1px solid var(--line);background:linear-gradient(180deg,rgba(17,17,19,.92),rgba(7,7,8,.92));backdrop-filter:blur(10px)}
.brandmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);padding:4px 8px 18px}
.brandmark img{height:22px;width:auto;filter:drop-shadow(0 0 6px rgba(232,236,241,.55))}
.brandmark span{font-family:var(--f-display);font-weight:700;letter-spacing:.32em;font-size:.72rem;color:var(--neon);text-shadow:var(--glow);direction:ltr}
.nav-group{margin:14px 0 4px;padding-inline:10px;font-size:.78rem;color:var(--muted)}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;margin:2px 0;border-radius:12px;color:var(--text);text-decoration:none;font-weight:500;transition:background .2s}
.nav a svg{width:19px;height:19px;flex:none;opacity:.8}
.nav a:hover{background:var(--glass)}
.nav a[aria-current=page]{background:rgba(232,236,241,.08);box-shadow:inset 0 0 0 1px var(--line-2)}
.nav a[aria-current=page] svg{opacity:1;filter:drop-shadow(0 0 5px rgba(232,236,241,.8))}
.side .plan-pill{margin:18px 6px 0;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--glass);font-size:.85rem}

.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:12px clamp(16px,3vw,32px);background:rgba(7,7,8,.78);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .title{font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .brand-mobile{display:none}
.chip-btn{font:inherit;font-size:.85rem;color:var(--text);background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.chip-btn:hover{border-color:var(--line-2)}
.content{padding:clamp(16px,3vw,32px);max-width:1200px;width:100%;margin:0 auto 96px}
.page{animation:pagein .35s ease both}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 16px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:rgba(232,236,241,.06);margin-bottom:18px}
.banner.warn{border-color:rgba(255,196,107,.4);background:rgba(255,196,107,.08)}
.banner.err{border-color:rgba(255,122,138,.4);background:rgba(255,122,138,.08)}
.banner .grow{flex:1;min-width:200px}

/* ---------- surfaces ---------- */
.glass{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,2.2vw,24px);backdrop-filter:blur(6px)}
.stack>*+*{margin-top:16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:20px;align-items:start}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row.end{justify-content:flex-end}
.spacer{flex:1}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:18px}
.head h1{margin:0}
.head .lead{flex-basis:100%;color:var(--muted);margin:0;max-width:70ch}

/* stats */
.stat{padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:var(--bg-2)}
.stat b{display:block;font-family:var(--f-display);font-weight:700;font-size:1.6rem;letter-spacing:.02em;direction:ltr;text-align:start}
.stat span{color:var(--muted);font-size:.85rem}
.meter{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;border-radius:inherit;background:var(--neon);box-shadow:0 0 10px rgba(232,236,241,.6)}
.meter.hot i{background:var(--warn);box-shadow:none}

/* feature tiles */
.tile{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--text);padding:18px;border-radius:var(--r);border:1px solid var(--line);background:var(--glass);transition:border-color .2s,background .2s;min-height:128px}
.tile:hover{border-color:var(--line-2);background:rgba(255,255,255,.07)}
.tile svg{width:26px;height:26px;opacity:.9}
.tile strong{font-size:1.05rem}
.tile small{color:var(--muted);line-height:1.5}

/* forms */
label.f{display:block;font-size:.88rem;color:var(--muted);margin-bottom:12px}
label.f>span{display:block;margin-bottom:6px}
input,select,textarea{font:inherit;color:var(--text);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;width:100%;min-width:0}
input[type=color]{padding:2px;height:40px;width:52px}
input[type=checkbox],input[type=radio]{width:auto;accent-color:#e8ecf1}
textarea{min-height:96px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{border-color:var(--line-2);outline:none;box-shadow:0 0 0 3px rgba(232,236,241,.12)}
select option{background:var(--bg-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{cursor:pointer;padding:7px 14px;border-radius:999px;border:1px solid var(--line);font-size:.9rem;color:var(--text);user-select:none}
.chips input:checked+label,.chips label.on{border-color:var(--neon);background:rgba(232,236,241,.1);box-shadow:0 0 12px rgba(232,236,241,.25)}
.chips input:focus-visible+label{outline:2px solid var(--neon);outline-offset:2px}

.btn{font:inherit;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:11px 20px;cursor:pointer;text-decoration:none;background:var(--neon);color:#070708;box-shadow:0 0 18px rgba(232,236,241,.28);transition:box-shadow .2s,transform .1s;white-space:nowrap}
.btn:hover{box-shadow:var(--glow)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:progress;box-shadow:none}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line-2);box-shadow:none}
.btn.ghost:hover{border-color:var(--neon)}
.btn.sm{padding:7px 14px;font-size:.88rem}
.btn.danger{background:transparent;color:var(--err);border:1px solid rgba(255,122,138,.4);box-shadow:none}
.icon-btn{background:none;border:0;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px;font:inherit}
.icon-btn:hover{color:var(--text);background:var(--glass)}

.drop{display:grid;place-items:center;text-align:center;gap:8px;padding:30px 16px;border:1.5px dashed var(--line-2);border-radius:var(--r);cursor:pointer;transition:border-color .2s,background .2s}
.drop.over,.drop:hover{border-color:var(--neon);background:rgba(232,236,241,.04)}
.drop svg{width:34px;height:34px}
.progress{height:6px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--neon);transition:width .2s;box-shadow:0 0 10px rgba(232,236,241,.7)}

/* lists & tables */
.list{list-style:none;margin:0;padding:0}
.list>li{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.list>li:last-child{border-bottom:0}
.list .grow{flex:1;min-width:0}
.list .grow>*{overflow-wrap:anywhere}
.tbl-wrap{overflow-x:auto;border-radius:var(--r-sm);border:1px solid var(--line)}
table.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th{text-align:start;font-weight:700;color:var(--muted);background:var(--bg-2);padding:10px 12px;white-space:nowrap}
.tbl td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.tc{font-family:"DejaVu Sans Mono",ui-monospace,Consolas,monospace;font-size:.82rem;direction:ltr;unicode-bidi:isolate;white-space:nowrap;color:var(--neon)}
.cue textarea{min-height:58px}
.badge{display:inline-block;font-size:.76rem;padding:2px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--text);white-space:nowrap}
.badge.ok{border-color:rgba(126,226,184,.5);color:var(--ok)}
.badge.warn{border-color:rgba(255,196,107,.5);color:var(--warn)}
.badge.err{border-color:rgba(255,122,138,.5);color:var(--err)}
.tag{display:inline-block;font-size:.8rem;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.07);margin:2px}
.hashtags{display:flex;flex-wrap:wrap;gap:8px;direction:ltr;justify-content:flex-start}
.hashtags span{padding:6px 12px;border-radius:999px;border:1px solid var(--neon);box-shadow:0 0 10px rgba(232,236,241,.2);unicode-bidi:plaintext}
.copybox{position:relative;white-space:pre-wrap;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;unicode-bidi:plaintext}
.empty{padding:28px 16px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r)}

/* plan timeline */
.timeline{display:flex;height:44px;border-radius:12px;overflow:hidden;border:1px solid var(--line);direction:ltr}
.timeline div{display:flex;align-items:center;justify-content:center;font-size:.75rem;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;border-inline-end:1px solid var(--bg)}
.timeline .hook{background:var(--neon);color:#070708;font-weight:700}
.timeline .sec{background:rgba(232,236,241,.14)}
.timeline .sec:nth-child(odd){background:rgba(232,236,241,.22)}
.timeline .cta{background:rgba(232,236,241,.4);color:#070708;font-weight:700}

/* charts */
.chart svg{width:100%;height:auto;display:block}
.heat{display:grid;grid-template-columns:34px repeat(24,minmax(0,1fr));gap:2px;direction:ltr;font-size:.66rem;color:var(--muted)}
.heat i{aspect-ratio:1;border-radius:3px;background:rgba(255,255,255,.05)}

/* modal & toast */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);animation:pagein .2s ease}
.modal>.glass{width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--bg-2)}
.toast{position:fixed;inset-inline:16px;bottom:calc(84px + env(safe-area-inset-bottom));margin:auto;width:fit-content;max-width:min(520px,calc(100% - 32px));z-index:60;padding:12px 18px;border-radius:14px;background:var(--bg-3);border:1px solid var(--line-2);box-shadow:0 10px 30px rgba(0,0,0,.5);animation:pagein .2s ease}
.toast.err{border-color:rgba(255,122,138,.6)}
.steps{display:flex;gap:8px;margin-bottom:14px}
.steps i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.1)}
.steps i.on{background:var(--neon);box-shadow:0 0 8px rgba(232,236,241,.6)}

/* auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px;position:relative;z-index:1}
.auth .glass{width:min(440px,100%)}
.auth .brandmark{justify-content:center;padding-bottom:6px}
.auth .brandmark img{height:34px}
.auth h1{text-align:center;font-size:1.35rem;margin-top:10px}
.tabs{display:flex;gap:6px;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);margin-bottom:18px}
.tabs button{flex:1;font:inherit;color:var(--muted);background:none;border:0;border-radius:999px;padding:8px;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--neon);color:#070708;font-weight:700}

/* demo banner */
.demo-banner{position:fixed;top:0;inset-inline:0;z-index:100;text-align:center;font-size:.78rem;padding:3px 8px;background:#e8ecf1;color:#070708;font-weight:700}
body.demo .top,body.demo .side{top:22px}
body.demo .app{padding-top:22px}
body.demo .side{height:calc(100vh - 22px)}

/* bottom bar (mobile) */
.tabbar{display:none}
.sheet{position:fixed;inset:auto 0 0 0;z-index:40;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03)) ,rgba(17,17,19,.5);-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);border-top:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 -20px 60px rgba(0,0,0,.5);border-radius:22px 22px 0 0;padding:18px 16px calc(90px + env(safe-area-inset-bottom));max-height:80vh;overflow:auto;animation:sheetin .25s ease}
@keyframes sheetin{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.sheet .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sheet a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:14px;border:1px solid var(--line);text-decoration:none;color:var(--text);font-size:.8rem;text-align:center}
.sheet a svg{width:22px;height:22px}

@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .top .brand-mobile{display:flex;padding:0}
  .top .brand-mobile img{height:18px}
  .top .title{display:none}
  .content{margin-bottom:110px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;inset-inline:0;z-index:45;background:rgba(10,10,11,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;font:inherit;font-size:.7rem;color:var(--muted);text-decoration:none;background:none;border:0;cursor:pointer}
  .tabbar svg{width:22px;height:22px}
  .tabbar [aria-current=page]{color:var(--text)}
  .tabbar [aria-current=page] svg{filter:drop-shadow(0 0 6px rgba(232,236,241,.9))}
}
@media (max-width:560px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}.stats.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.tiles.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.tile{min-height:112px;padding:14px}.btn{padding:10px 16px}}

/* ---------- public pages (shop, pricing, legal) ---------- */
body.public{display:flex;flex-direction:column}
.pub-top{position:relative;z-index:2;display:flex;align-items:center;gap:16px;padding:16px clamp(16px,4vw,48px);border-bottom:1px solid var(--line)}
.pub-top .brandmark{padding:0}
.pub-nav{display:flex;gap:16px;margin-inline-start:auto;align-items:center}
.pub-nav a{color:var(--text);text-decoration:none}
.pub-nav a.lang{border:1px solid var(--line-2);border-radius:999px;padding:3px 12px;font-size:.85rem}
.pub-main{position:relative;z-index:1;flex:1;width:100%;max-width:1240px;margin:0 auto;padding:clamp(20px,4vw,48px) 16px}
.pub-foot{position:relative;z-index:1;text-align:center;color:var(--muted);font-size:.85rem;padding:24px 16px;border-top:1px solid var(--line)}
.pub-foot a{color:var(--muted)}
.hero{text-align:center;max-width:760px;margin:0 auto 32px}
.hero.narrow{max-width:560px}
.hero h1{font-size:clamp(2rem,5vw,3.2rem)}
.legal{text-align:start}
.legal ol{padding-inline-start:1.2em;line-height:1.9}
.trial-banner{display:inline-block;margin-bottom:16px;padding:6px 16px;border-radius:999px;border:1px solid var(--neon);box-shadow:0 0 16px rgba(232,236,241,.3);font-weight:700}
.grid-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.product{display:flex;flex-direction:column;padding:0;overflow:hidden}
.pmedia{aspect-ratio:4/3;background:linear-gradient(140deg,#18181b,#070708);display:grid;place-items:center;border-bottom:1px solid var(--line)}
.pmedia img{width:100%;height:100%;object-fit:cover}
.pmedia .glyph{width:42%;color:var(--neon);filter:drop-shadow(0 0 10px rgba(232,236,241,.6))}
.pbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.pbody h3{margin:0}
.pbody p{margin:0;font-size:.92rem}
.pbody .kind{font-size:.8rem;color:var(--muted)}
.pprice{margin-top:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.buy{display:flex;gap:8px}
.buy input{flex:1}
.grid-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:18px;align-items:stretch;margin-bottom:24px}
.plan{position:relative;display:flex;flex-direction:column;gap:10px}
.plan.featured{border-color:var(--neon);box-shadow:0 0 30px rgba(232,236,241,.15)}
.plan .ribbon{position:absolute;top:-12px;inset-inline-start:18px;background:var(--neon);color:#070708;font-weight:700;font-size:.8rem;padding:3px 12px;border-radius:999px}
.plan .price strong{font-family:var(--f-display);font-size:1.8rem;direction:ltr;unicode-bidi:isolate}
.plan ul{padding-inline-start:1.1em;margin:0 0 auto;line-height:1.9}
.plan .btn{margin-top:12px}

.chips label.last{border-style:dashed;border-color:rgba(232,236,241,.6)}
.brandpick.need .chips label{border-color:var(--err);animation:shake .3s}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
#view:focus,#view:focus-visible{outline:none}
@media (max-width:560px){
  .tbl-wrap:has(.cue) thead{display:none}
  .tbl-wrap:has(.cue) tr.cue{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:10px;border-top:1px solid var(--line)}
  .tbl-wrap:has(.cue) tr.cue td{border:0;padding:0;display:block}
  .tbl-wrap:has(.cue) tr.cue td:nth-child(2){display:flex;gap:8px;flex-wrap:wrap}
  .tbl-wrap:has(.cue) tr.cue td:nth-child(2) br{display:none}
  .tbl-wrap:has(.cue) tr.cue td:nth-child(3){grid-column:1/-1}
  .cue textarea{min-height:76px}
}
.pbody>.badge{align-self:flex-start}
.plan>.badge{align-self:flex-start}
body.demo .public{padding-top:22px}
@media (max-width:560px){.pub-top{flex-wrap:wrap;gap:10px}.pub-nav{gap:12px;font-size:.9rem}}
input[type=range]{padding:0;border:0;background:none;box-shadow:none;accent-color:#e8ecf1;height:28px}
input[type=range]:focus{box-shadow:none}
input[type=search].dsearch{margin-bottom:6px}
.dpick small{display:block;margin-top:6px;line-height:1.5}
.warn-text{color:var(--warn)}
audio{filter:invert(1) hue-rotate(180deg) grayscale(1);opacity:.85;max-width:100%}
#dForm textarea{min-width:240px}

.grid>*,.split>*{min-width:0}

.sheet-scrim{position:fixed;inset:0;z-index:39;background:rgba(7,7,8,.35);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);animation:scrimin .25s ease}
@keyframes scrimin{from{opacity:0}to{opacity:1}}
.sheet-handle{width:44px;height:5px;border-radius:999px;background:rgba(255,255,255,.28);margin:-6px auto 14px}
.sheet a{background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:rgba(255,255,255,.12);transition:background .2s,box-shadow .2s,transform .15s}
.sheet a:hover,.sheet a:focus-visible{background:rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(232,236,241,.35),0 0 16px rgba(232,236,241,.18)}
.sheet a:active{transform:scale(.97)}
.tabbar{-webkit-backdrop-filter:blur(20px) saturate(160%)}
@media (max-width:900px){.tabbar{background:rgba(10,10,11,.62)!important;backdrop-filter:blur(20px) saturate(160%)!important}}
.modal{-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);background:rgba(0,0,0,.45)}
.modal>.glass{background:rgba(17,17,19,.6);-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);border-color:rgba(255,255,255,.16)}
@media (prefers-reduced-transparency:reduce){.sheet,.modal>.glass{background:var(--bg-2)}.sheet-scrim{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.6)}}

.heat>*{min-width:0;overflow:hidden;text-align:center}
@media (max-width:480px){.heat{font-size:.5rem;gap:1px}}
/* BYOK + «صوتك» */
.mystyle{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin:0 0 12px;border:1px solid rgba(232,236,241,.18);border-radius:12px;background:rgba(232,236,241,.04);cursor:pointer}
.mystyle input{margin-top:4px;accent-color:var(--neon,#e8ecf1)}.mystyle span{display:flex;flex-direction:column;gap:2px}.mystyle.off{opacity:.75;cursor:default}
.mystyle:has(input:checked){border-color:var(--neon,#e8ecf1);box-shadow:0 0 14px rgba(232,236,241,.18)}
.fb-bar{margin-top:10px;gap:8px;flex-wrap:wrap}
.provs .prov{display:flex;flex-direction:column}.provs .prov .row:last-of-type{margin-top:auto;flex-wrap:wrap}
.test-out{margin-top:8px;min-height:1.2em;overflow-wrap:anywhere}.ok-text{color:var(--ok)}.err-text{color:var(--err)}
.byok-note{border:1px dashed rgba(232,236,241,.35);border-radius:12px;padding:8px 10px;color:var(--muted);line-height:1.6}
.privacy{padding-inline-start:18px;line-height:1.8;color:var(--muted)}.consent{align-items:flex-start;gap:10px;padding:10px;border-radius:12px;background:rgba(232,236,241,.05)}
.consent input{margin-top:5px}
.excerpts{max-height:520px;overflow:auto}.excerpts li.gone{opacity:.35;text-decoration:line-through}
.sig textarea{font-size:1.02rem;line-height:1.8}
.lock-card{position:relative}.lock-card .lock{display:inline-flex;gap:6px;align-items:center}
.cmp{width:100%;border-collapse:collapse}.cmp th,.cmp td{padding:8px 10px;border-bottom:1px solid rgba(232,236,241,.1);text-align:center}.cmp td:first-child,.cmp th:first-child{text-align:start}
/* Free plan */
.nav a.locked{opacity:.62}.nav a .lk{margin-inline-start:auto;display:inline-flex;opacity:.8}.nav a .lk svg{width:14px;height:14px}
.tile.locked{opacity:.7}.tile.locked .badge{font-size:.7rem;vertical-align:middle}
.startpick .chips label{flex:1;text-align:center}
.demo-banner .demo-switch{font:inherit;font-size:.74rem;margin-inline-start:8px;padding:1px 10px;border-radius:999px;border:1px solid #070708;background:transparent;color:#070708;cursor:pointer}
.tbl.guide{table-layout:fixed;width:100%}.tbl.guide th,.tbl.guide td{white-space:normal;overflow-wrap:anywhere;vertical-align:top;line-height:1.7}
.badge.wrap{white-space:normal;max-width:100%;text-align:start;line-height:1.5}
@media (max-width:560px){
  .tbl.tasks thead{display:none}
  .tbl.tasks,.tbl.tasks tbody,.tbl.tasks tr,.tbl.tasks td{display:block;width:100%}
  .tbl.tasks tr{padding:10px 0;border-bottom:1px solid rgba(232,236,241,.1)}
  .tbl.tasks td{border:0;padding:4px 0}
}

/* guided upload flow */
.wsteps{list-style:none;margin:0 0 16px;padding:0;display:flex;gap:6px;flex-wrap:wrap;font-size:.8rem;color:var(--muted,#9b9ca3)}
.wsteps li{display:flex;align-items:center;gap:6px;padding:6px 10px 6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.wsteps li span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;background:rgba(255,255,255,.08)}
.wsteps li.cur{color:var(--ink,#f4f7fb);border-color:rgba(232,236,241,.55);box-shadow:0 0 10px rgba(232,236,241,.18)}
.wsteps li.cur span{background:var(--neon,#e8ecf1);color:#070708}
.wsteps li.done{color:var(--ink,#f4f7fb)}
.wsteps li.done span{background:rgba(232,236,241,.25)}
.fprev{margin:4px 0 12px}
.fprev video,.fprev audio{width:100%;max-height:300px;border-radius:14px;background:#000;display:block}
.ask{display:flex;flex-direction:column;gap:4px;margin:6px 0 12px;padding:12px 14px;border-radius:14px;border:1px solid rgba(232,236,241,.18);background:rgba(232,236,241,.05)}
.ask.done{border-color:rgba(232,236,241,.45)}
.nexts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:560px){.nexts{grid-template-columns:minmax(0,1fr)}}
.next{display:flex;align-items:flex-start;gap:10px;text-align:start;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:inherit;font:inherit;cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.next:hover,.next:focus-visible{border-color:rgba(232,236,241,.5);background:rgba(232,236,241,.07)}
.next:active{transform:scale(.98)}
.next svg{width:22px;height:22px;flex:none;margin-top:2px}
.next span{display:flex;flex-direction:column;gap:2px;min-width:0}
.next small{color:var(--muted,#9b9ca3)}
.pulse{animation:pulseRing 1.8s ease-out}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(232,236,241,.7)}100%{box-shadow:0 0 0 14px rgba(232,236,241,0)}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}.next{transition:none}}
.guide-sw{display:flex;flex-direction:column;gap:2px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06)}
.shots{margin:12px 0;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.shots summary{cursor:pointer;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.shotlist{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px;max-height:320px;overflow:auto}
.shotlist li{display:flex;gap:8px;align-items:center;font-size:.9rem;min-width:0}
.shotlist li span[dir]{min-width:0;overflow-wrap:anywhere}
@media (max-width:640px){
  .tbl-wrap:has(.cutrow) thead{display:none}
  .tbl-wrap:has(.cutrow) table,.tbl-wrap:has(.cutrow) tbody{display:block;width:100%}
  .tbl-wrap:has(.cutrow) tr.cutrow{display:grid;grid-template-columns:auto 1fr 1fr;gap:6px 10px;padding:12px;border-top:1px solid var(--line)}
  .tbl-wrap:has(.cutrow) tr.cutrow td{border:0;padding:0;display:block;min-width:0;overflow-wrap:anywhere}
  .tbl-wrap:has(.cutrow) tr.cutrow td:nth-child(n+4){grid-column:1/-1}
  .tbl-wrap:has(.cutrow) tr.cutrow td[data-l]::before{content:attr(data-l) " · ";color:var(--muted,#9b9ca3);font-size:.8rem}
  .tbl-wrap:has(.cutrow) .tc{font-size:.85rem}
}

.meter{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:6px 0 4px}.meter i{display:block;height:100%;background:var(--ok);border-radius:inherit}.meter i.warm{background:#f5c46b}.meter i.hot{background:var(--err)}

.alt-login{display:flex;flex-direction:column;gap:10px;margin:6px 0 4px}
.alt-login .btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px}
.alt-login .btn svg{width:18px;height:18px;flex:none}
.alt-login .or{display:flex;align-items:center;gap:10px;color:var(--mut,#9b9ca3);font-size:.85rem;margin:6px 0}
.alt-login .or::before,.alt-login .or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1)}
.phone-flow{display:flex;flex-direction:column;gap:6px;margin-top:6px}

/* ---------- «من عائلة منتجات سلام» (login, app footer, products page) + «أعضاء سلام» ---------- */
.main>.content{margin-bottom:0}
.app-foot{margin-top:auto;padding:8px clamp(16px,3vw,32px) 40px;max-width:1200px;width:100%;margin-inline:auto}
.app-foot:empty{display:none}
.salam-family{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.015));backdrop-filter:blur(6px);padding:14px 16px}
.salam-family .sf-title{font-size:.78rem;letter-spacing:.04em;color:var(--muted);margin-bottom:8px}
.salam-family .sf-links{display:grid;gap:8px}
.salam-family .sf-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(255,255,255,.025);color:var(--text);text-decoration:none;font-size:.9rem;line-height:1.5;min-width:0;transition:border-color .2s,background .2s}
.salam-family a.sf-item:hover{border-color:var(--line-2);background:var(--glass)}
.salam-family .sf-item .grow{flex:1;min-width:0}
.salam-family .sf-ic svg{width:20px;height:20px;display:block;opacity:.85}
.salam-family .sf-go{color:var(--muted);flex:none}
.salam-family .sf-stores{display:flex;gap:6px;flex-wrap:wrap}
.salam-family.compact .sf-links{grid-template-columns:repeat(2,minmax(0,1fr))}
.salam-family.page{max-width:640px}
.salam-family.page .sf-item{padding:16px;font-size:1rem}
.auth>[data-salam]{width:min(440px,100%);margin-top:14px}
.auth{align-content:center}
.salam-badge{border-color:rgba(232,236,241,.55);color:var(--neon);box-shadow:0 0 10px rgba(232,236,241,.18)}
.join-box h1{text-align:center}
.join-box .alt-login small{display:block}
.members-box textarea{resize:vertical;min-height:96px}
.members-box details summary{cursor:pointer;margin:6px 0}
@media (max-width:860px){
  .app-foot{padding-bottom:110px}
  .salam-family.compact .sf-links{grid-template-columns:minmax(0,1fr)}
}

/* ---------- promo video: /intro page, login card, join page ---------- */
.intro-video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;border-radius:var(--r-sm)}
.intro-hero{text-align:center}
.intro-stage{max-width:960px;margin:0 auto 32px;padding-inline:16px;display:grid;gap:18px}
.intro-frame{border:1px solid var(--line-2);border-radius:var(--r);padding:6px;background:var(--glass);box-shadow:0 0 40px rgba(232,236,241,.08)}
.intro-frame .intro-video{border-radius:calc(var(--r) - 6px)}
.intro-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px}
.intro-family{max-width:640px;width:100%;margin:0 auto}
.intro-card{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.025);overflow:hidden}
.intro-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;font:inherit;font-size:.92rem;color:var(--text);background:none;border:0;cursor:pointer;text-align:start}
.intro-toggle:hover{background:var(--glass)}
.intro-toggle .grow{flex:1;min-width:0}
.intro-play{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--line-2);font-size:.7rem;padding-inline-start:2px}
.intro-body{padding:0 8px 8px}
.intro-card[open],.intro-body:not([hidden]){animation:pagein .25s ease both}
.join-video{display:grid;gap:6px;justify-items:center;margin:4px 0 16px}
@media (prefers-reduced-motion:reduce){.intro-body:not([hidden]),.page{animation:none}}

/* ---------- launch waitlist page ---------- */
.wl-chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0;margin:16px auto 0;max-width:640px}
.wl-chips li{padding:6px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass);font-size:.9rem}
.wl-box{max-width:520px;width:100%;margin:0 auto}
.wl-box h2{margin-top:0}
.wl-consent{display:flex;align-items:flex-start;gap:10px;margin:4px 0 14px;font-size:.92rem;cursor:pointer}
.wl-consent input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--neon)}
.wl-hp{position:absolute;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden}
#wlDone{text-align:center}
.wl-handles a{text-decoration:none}
.badge.soon{font-size:.68rem;padding:1px 7px;margin-inline-start:6px;vertical-align:middle;border-color:rgba(255,196,107,.5);color:var(--warn)}

/* ---------- «سجّل دخول بحساب سلام» ---------- */
.salam-btn{width:100%;min-height:52px;margin:6px 0 4px;flex-wrap:wrap;gap:4px 10px;font-size:1.02rem}
.salam-btn img{width:20px;height:20px;filter:invert(1)}
.salam-btn small{flex-basis:100%;font-weight:500;font-size:.72rem;opacity:.7;letter-spacing:.04em}
#salamPanel{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
#salamPanel .tabs{margin-bottom:10px}
.legacy-form{margin-top:10px;padding:12px;border:1px dashed var(--line-2);border-radius:var(--r-sm)}
/* model picker: a real <select> (iPhone-friendly) with the typed-ID input under it when needed */
.model-pick + input{margin-top:6px}
.tbl.tasks select.model-pick{min-width:180px}

/* ---------- «تصميم الصوت» ---------- */
.mood-card p{margin:10px 0}
.mood-card audio,.cue-act audio{height:34px;max-width:220px}
.tl{position:relative;margin:14px 0 8px;padding:6px 0 0;border-radius:var(--r-sm);background:rgba(255,255,255,.03);border:1px solid var(--line)}
.tl-music{position:relative;height:22px;margin:0 8px}
.tl-sec{position:absolute;top:0;height:20px;border-radius:6px;font-size:.68rem;line-height:20px;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:rgba(232,236,241,.12);color:var(--muted)}
.tl-sec.high{background:rgba(232,236,241,.24);color:var(--text)}.tl-sec.low{background:rgba(232,236,241,.07)}
.tl-cues{position:relative;height:34px;margin:6px 8px 0}
.tl-chip{position:absolute;top:4px;transform:translateX(-50%);font:inherit;font-size:.68rem;padding:2px 8px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);cursor:pointer;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
.tl-chip.ready{border-color:rgba(126,226,184,.6)}.tl-chip.error{border-color:rgba(255,122,138,.6)}
.tl-axis{display:flex;justify-content:space-between;font-size:.7rem;color:var(--muted);padding:2px 8px 6px}
.cue-list li{flex-wrap:wrap;align-items:flex-start}
.cue-time{display:flex;align-items:center;gap:4px;min-width:118px}
.cue-prompt{display:block;width:100%;margin-top:6px;padding:6px 8px}
.cue-act{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cue-list li.flash{background:rgba(232,236,241,.08);transition:background .3s}
@media (max-width:860px){.cue-act{width:100%}.mood-card audio,.cue-act audio{max-width:100%;width:100%}}