/* Layout: RTL app shell — top bar, main column, persistent side menu on the right; bottom nav on phones */
:root{
  --bg:#F5F3F7; --surface:#FFFFFF; --sunk:#EFEBF2; --ink:#1E1A24; --muted:#6E6678; --line:#E4DEEA;
  --accent:#D63F78; --accent-ink:#FFFFFF; --accent-soft:#FCE8EF; --gold:#A87A22; --gold-soft:#F7EED9;
  --ok:#1C8F62; --ok-soft:#E2F4EC; --danger:#B93A33; --danger-soft:#FBE7E5;
  --f-display:"Alexandria","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --f-body:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
  --r:14px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#131016; --surface:#1C1820; --sunk:#241F29; --ink:#F1EDF4; --muted:#A69EB0; --line:#2F2935;
  --accent:#D57FBD; --accent-ink:#1A0F17; --accent-soft:#3A2234; --gold:#E2B55C; --gold-soft:#3A2F1A;
  --ok:#3FCB8F; --ok-soft:#173528; --danger:#F07C73; --danger-soft:#3D1D1B; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#131016; --surface:#1C1820; --sunk:#241F29; --ink:#F1EDF4; --muted:#A69EB0; --line:#2F2935;
  --accent:#D57FBD; --accent-ink:#1A0F17; --accent-soft:#3A2234; --gold:#E2B55C; --gold-soft:#3A2F1A;
  --ok:#3FCB8F; --ok-soft:#173528; --danger:#F07C73; --danger-soft:#3D1D1B; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.7}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.35}
.wrap{direction:rtl;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1320px;margin:0 auto}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--surface)}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;height:66px}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:800;font-size:22px;color:var(--accent);text-decoration:none;flex:0 0 auto}
.nav{display:flex;gap:6px;margin:0 auto}
.nav a,.util button{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;color:var(--muted);text-decoration:none;border:0;background:none}
.nav a:hover,.util button:hover{background:var(--sunk);color:var(--ink)}
.nav a.on{background:var(--accent);color:var(--accent-ink)}
.badge{position:absolute;top:3px;left:3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1}
.util{display:flex;gap:4px;flex:0 0 auto}
.me-chip{width:40px;height:40px}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* shell */
.shell{display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px;padding-block:20px 90px}
.side{position:sticky;top:86px;align-self:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.side-head{display:flex;gap:12px;align-items:center;padding:16px;border-bottom:1px solid var(--line)}
.side-head b{font-family:var(--f-display);font-size:16px}
.side-head small{display:block;color:var(--muted);font-size:12px}
.side nav{padding:8px}
.side h4{margin:10px 10px 4px;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.side a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:14.5px}
.side a:hover{background:var(--sunk)}
.side a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.side a .cnt{margin-inline-start:auto;background:var(--danger);color:#fff;font-size:11px;padding:0 7px;border-radius:9px;font-weight:700}
.side a svg.i{width:19px;height:19px}
.side-foot{padding:12px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}

main{min-width:0;display:flex;flex-direction:column;gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.card-h{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.card-h h2{font-size:18px}
.card-h p{margin:0;color:var(--muted);font-size:13px}
.card-h .tools{margin-inline-start:auto;display:flex;gap:8px}
.card-b{padding:18px}
.ico-box{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:0 0 auto}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:8px 14px;font-weight:600;font-size:14px}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{filter:brightness(1.08);color:var(--accent-ink)}
.btn.ghost{border-color:transparent;background:var(--sunk)}
.btn svg.i{width:18px;height:18px}
.muted{color:var(--muted)}

/* avatar */
.av{border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;flex:0 0 auto;position:relative}
.av.f{background:var(--accent-soft);color:var(--accent)}
.av.m{background:var(--gold-soft);color:var(--gold)}
.av .dot{position:absolute;bottom:1px;left:1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--surface);background:var(--ok)}
.av .dot.away{background:var(--gold)}

/* banner */
.banner{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 18px}
.banner p{margin:0;flex:1 1 260px}

/* member strip */
.strip{display:flex;gap:12px;overflow-x:auto;padding:16px 18px;scroll-snap-type:x mandatory}
.mcard{flex:0 0 230px;scroll-snap-align:start;display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-align:right;text-decoration:none;color:inherit}
.mcard:hover{border-color:var(--accent)}
.mcard b{display:block;font-size:15px}
.mcard small{display:block;color:var(--muted);font-size:12.5px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* table */
.tbl-w{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{font-weight:600;color:var(--muted);text-align:right;padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:13px}
th button{border:0;background:none;color:inherit;font-weight:600;display:inline-flex;gap:4px;align-items:center;padding:0}
td{padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
tr.row{cursor:pointer}
tr.row:hover td{background:var(--sunk)}
tr.seen td:first-child{color:var(--accent)}
.num{font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:1px 10px;border-radius:20px;font-size:12.5px;font-weight:600;background:var(--sunk);font-variant-numeric:tabular-nums}
.pill.acc{background:var(--accent-soft);color:var(--accent)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.gold{background:var(--gold-soft);color:var(--gold)}
.score{display:inline-flex;align-items:center;gap:8px}
.bar{width:60px;height:6px;border-radius:3px;background:var(--sunk);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}

/* profile */
.pf-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:18px}
.pf-head h1{font-size:22px}
.pf-id{margin-inline-start:auto;border:1px dashed var(--accent);color:var(--accent);border-radius:11px;padding:6px 12px;font-size:13px;text-align:center;background:none}
.pf-id b{display:block;font-family:var(--f-display);font-size:15px;letter-spacing:.04em}
.acts{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:0 18px 18px}
.act{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;padding:6px 0;font-size:13px;font-weight:600;position:relative}
.act span.b{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--sunk);color:var(--ink);transition:transform .15s}
.act:hover span.b{transform:translateY(-2px)}
.act.on span.b{background:var(--accent);color:var(--accent-ink)}
.act .tag{position:absolute;top:0;left:50%;transform:translateX(-50%) translateX(-22px);background:var(--accent);color:var(--accent-ink);font-size:11px;padding:0 6px;border-radius:8px;font-variant-numeric:tabular-nums}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--sunk);border-radius:12px;margin-bottom:16px}
.facts div{padding:12px;text-align:center}
.facts div+div{border-inline-start:1px solid var(--line)}
.facts small{display:block;color:var(--muted);font-size:12.5px}
.facts b{font-size:15.5px}
.story{font-size:16.5px;line-height:2.15;margin:0;max-width:72ch}
.story b{color:var(--accent);font-weight:700}
.story .age{background:var(--accent);color:var(--accent-ink);padding:2px 10px;border-radius:8px}
.points{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.points li{display:flex;justify-content:space-between;gap:8px;padding:9px 12px;background:var(--sunk);border-radius:10px;font-size:14px}
.points li span{color:var(--muted)}
.quote{margin-top:16px;padding:14px 16px;border-inline-start:3px solid var(--accent);background:var(--accent-soft);border-radius:10px}
.quote small{color:var(--accent);font-weight:600}
.quote p{margin:4px 0 0}
.seg{display:inline-flex;background:var(--sunk);border-radius:10px;padding:3px;margin-inline-start:auto}
.seg button{border:0;background:none;padding:5px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--accent);box-shadow:0 1px 2px rgb(0 0 0/.08)}
.pager{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;box-shadow:0 6px 24px rgb(0 0 0/.1)}
.pager .pos{font-variant-numeric:tabular-nums;font-weight:700}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:2px 8px;border-radius:7px;margin-inline-end:4px}
.chk.y{background:var(--ok-soft);color:var(--ok)}
.chk.n{background:var(--danger-soft);color:var(--danger)}

/* search */
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tabs button{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px;font-weight:600;font-size:14px}
.tabs button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:12.5px;color:var(--muted);font-weight:600}
.input,select.input,textarea.input{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 14px;outline:none}
.input:focus{border-color:var(--accent)}
.sbox{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:14px;padding:4px 14px;background:var(--surface)}
.sbox input{border:0;outline:none;background:none;flex:1;padding:8px 0;min-width:0}
.adv{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}

/* chats */
.chat{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:560px}
.clist{border-inline-end:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.citem{display:flex;gap:10px;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:none;text-align:right;width:100%;align-items:center}
.citem:hover{background:var(--sunk)}
.citem.on{background:var(--accent-soft)}
.citem div{min-width:0;flex:1}
.citem b{display:flex;justify-content:space-between;gap:8px;font-size:14.5px}
.citem b time{font-weight:500;color:var(--muted);font-size:12px}
.citem small{display:block;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unread{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.conv{display:flex;flex-direction:column;min-width:0}
.msgs{flex:1;padding:18px 14px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:460px;background:color-mix(in srgb,var(--accent) 5%,var(--bg))}
.msg{max-width:78%;padding:8px 13px 6px;border-radius:18px;border-start-start-radius:6px;font-size:15px;line-height:1.65;background:var(--surface);color:var(--ink);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:0 1px 2px rgb(40 20 30/.08);align-self:flex-start;overflow-wrap:anywhere}
.msg.me{align-self:flex-end;background:color-mix(in srgb,var(--accent) 15%,var(--surface));border-color:transparent;color:var(--ink);border-start-start-radius:18px;border-start-end-radius:6px}
.msg time{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.msg.sys{align-self:center;max-width:92%;background:var(--gold-soft);color:var(--ink);border-radius:14px;box-shadow:none;font-size:13px;text-align:center;margin-bottom:6px}
.compose{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);flex-wrap:wrap}
.compose input{flex:1 1 200px}
.quick{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px 0}
.quick button{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:3px 12px;font-size:13px}
.quick button:hover{border-color:var(--accent);color:var(--accent)}
.back-m{display:none}

/* wizard */
.wiz{max-width:860px;margin:0 auto;width:100%}
.steps-n{display:inline-block;background:var(--accent-soft);color:var(--accent);font-weight:700;border-radius:20px;padding:2px 12px;font-size:13px;font-variant-numeric:tabular-nums}
.prog{display:grid;gap:4px;margin:12px 0 18px;direction:rtl}
.prog i{height:5px;border-radius:3px;background:var(--sunk)}
.prog i.on{background:var(--accent)}
.wiz-title{text-align:center;font-size:26px;color:var(--accent);margin:8px 0 18px}
.wiz-row{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:14px;align-items:center}
.round{width:52px;height:52px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.round:disabled{opacity:.35;cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chips button{border:1px solid var(--line);background:var(--surface);border-radius:22px;padding:7px 16px;font-size:14.5px}
.chips button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.sel-box{max-width:380px;margin:0 auto;width:100%}
.range2{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:420px;margin:0 auto}
.auto{display:flex;justify-content:center;gap:8px;align-items:center;font-size:14px;margin-bottom:6px}
.auto input{width:18px;height:18px;accent-color:var(--accent)}
.bio-h{margin:26px 0 8px;font-weight:700;color:var(--accent)}
.bio-h span{color:var(--gold);font-size:13px}
.note{font-size:13px;color:var(--gold)}
.err{font-size:13px;color:var(--danger)}

/* settings */
.set-list{display:flex;flex-direction:column}
.set-list > *{display:flex;align-items:center;gap:12px;padding:14px 18px;border:0;border-bottom:1px solid var(--line);background:none;text-align:right;text-decoration:none;color:inherit;font-weight:600;font-size:15px}
.set-list > *:last-child{border-bottom:0}
a.set-row:hover,button.set-row:hover{background:var(--sunk)}
.set-row .end{margin-inline-start:auto}
.toggle{width:44px;height:24px;border-radius:12px;background:var(--line);position:relative;border:0;flex:0 0 auto}
.toggle::after{content:"";position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:right .2s}
.toggle.on{background:var(--ok)}
.toggle.on::after{right:23px}
.themes{display:inline-flex;gap:4px;background:var(--sunk);border-radius:10px;padding:3px}
.themes button{border:0;background:none;border-radius:8px;padding:5px 10px;font-size:13px;font-weight:600;color:var(--muted)}
.themes button.on{background:var(--accent);color:var(--accent-ink)}

/* grid list */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:18px}
.grid .mcard{flex:auto}
.empty{padding:40px 18px;text-align:center;color:var(--muted)}

/* modal + toast */
.scrim{position:fixed;inset:0;background:rgb(10 6 12/.5);display:grid;place-items:center;z-index:50;padding:16px}
.modal{background:var(--surface);border-radius:18px;max-width:440px;width:100%;padding:22px;direction:rtl;display:flex;flex-direction:column;gap:12px}
.modal h3{font-size:19px}
.modal .row{display:flex;gap:8px;justify-content:flex-start;flex-wrap:wrap}
.toast{position:fixed;bottom:calc(84px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:12px;font-size:14px;z-index:60;direction:rtl;max-width:calc(100% - 32px)}
.demo{font-size:12px;color:var(--gold);background:var(--gold-soft);padding:2px 8px;border-radius:6px;font-weight:600}

/* bottom nav (phones) */
.bnav{display:none}
@media (max-width:980px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .side.open{display:block;position:fixed;inset:66px 0 0 auto;width:min(300px,86vw);z-index:40;border-radius:0;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom,0px)}
  .nav{display:none}
  .util{margin-inline-start:auto}
  .bnav{display:flex;position:fixed;inset:auto 0 0 0;z-index:25;background:var(--surface);border-top:1px solid var(--line);justify-content:space-around;padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));direction:rtl}
  .bnav a{position:relative;display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--muted);text-decoration:none;padding:4px 10px;border-radius:10px}
  .bnav a.on{color:var(--accent)}
  .menu-btn{display:grid!important}
  .chat{grid-template-columns:minmax(0,1fr)}
  .chat.has .clist{display:none}
  .chat:not(.has) .conv{display:none}
  .back-m{display:inline-flex}
  .acts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pager{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:520px){
  .facts{grid-template-columns:1fr}
  .facts div+div{border-inline-start:0;border-top:1px solid var(--line)}
  .wiz-row{grid-template-columns:40px minmax(0,1fr) 40px;gap:8px}
  .round{width:40px;height:40px}
  .brand span{display:none}
}
.util .menu-btn{display:none}
a.btn{text-decoration:none;color:inherit}
a.btn.pri{color:var(--accent-ink)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* auth */
.auth{min-height:100vh;display:grid;place-items:center;padding-block:24px}
.auth-card{width:100%;max-width:440px;padding:26px;display:flex;flex-direction:column;gap:14px}
.auth-card h1{font-size:24px}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--sunk);padding:4px;border-radius:12px}
.seg2 button{border:0;background:none;padding:8px;border-radius:9px;font-weight:600;color:var(--muted)}
.seg2 button.on{background:var(--surface);color:var(--accent)}
.hint{font-size:13px;color:var(--muted);background:var(--gold-soft);padding:10px 12px;border-radius:10px}
.loading{padding:40px;text-align:center;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.stat{padding:14px 16px}
.stat small{color:var(--muted);display:block;font-size:12.5px}
.stat b{font-family:var(--f-display);font-size:26px;font-variant-numeric:tabular-nums}
.stat.warn b{color:var(--danger)}
.bio-cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bio-cmp div{background:var(--sunk);border-radius:10px;padding:10px 12px;font-size:14px}
.bio-cmp small{display:block;color:var(--muted);font-size:12px}
@media (max-width:600px){.bio-cmp{grid-template-columns:1fr}}

[hidden]{display:none!important}
img{max-width:100%}

.auth-card a:not(.btn):not(.brand){color:var(--accent);font-weight:600}

/* صور رمزية مرسومة */
.av.art{background:none!important;overflow:visible}
.av.art svg{display:block;border-radius:50%;box-shadow:0 0 0 2px var(--surface),0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.flag{display:inline-block;vertical-align:-2px;border-radius:3px;box-shadow:0 0 0 1px rgb(0 0 0/.08);margin-inline-start:4px}
.facts small{display:flex;align-items:center;justify-content:center;gap:4px}
.facts small svg.i{color:var(--accent)}
/* عرض النقاط */
.pts{display:flex;flex-direction:column}
.pt-grp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;padding-block:18px;border-bottom:1px solid var(--line)}
.pt-grp:first-child{padding-top:4px}.pt-grp:last-child{border-bottom:0}
.pt{display:flex;align-items:center;gap:14px;min-width:0}
.pt-ic{width:54px;height:54px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:0 0 auto}
.pt small{display:block;color:var(--muted);font-size:13.5px}
.pt b{font-size:17px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
@media (max-width:520px){.pt-grp{grid-template-columns:minmax(0,1fr)}.pt-ic{width:46px;height:46px}}
/* أزرار الملف الملونة */
.act.c-match span.b{background:#E9E3FD;color:#6B4FD8}.act.c-chat span.b{background:#DCEFFC;color:#2577B5}
.act.c-ring span.b{background:#FFF0B8;color:#9A6B00}.act.c-fav span.b{background:#FCE0EC;color:#C83E7B}
.act.c-like span.b{background:#FFE6D6;color:#C25A1C}.act.c-block span.b{background:#E7EAF0;color:#4B5565}
.act.c-flag span.b{background:#FFDCDC;color:#C23B3B}
.act.on span.b{background:var(--accent)!important;color:var(--accent-ink)!important}
.act .tag{background:#6B4FD8;color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .act span.b{filter:saturate(.8) brightness(.55) contrast(1.4)}}
:root[data-theme="dark"] .act span.b{filter:saturate(.8) brightness(.55) contrast(1.4)}
/* شريط الأعضاء المتحرك */
.marquee{overflow:hidden;padding:16px 0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;gap:12px;width:max-content;animation:mq calc(var(--n) * 4s) linear infinite}
.marquee:hover .mq-track,.marquee:focus-within .mq-track,.marquee:active .mq-track{animation-play-state:paused}
.mq-track .mcard{flex:0 0 230px}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(calc(50% + 6px))}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}.marquee{overflow-x:auto}}
/* شريط التنقل بين الملفات */
.pager .pg-mid{display:flex;flex-direction:column;align-items:center;gap:6px}
.pg-bar{width:150px;height:6px;border-radius:3px;background:var(--accent-soft);overflow:hidden;display:block}
.pg-bar i{display:block;height:100%;background:var(--accent);border-radius:3px;margin-inline-start:auto}
.pager .btn:disabled{opacity:.4;cursor:default}

/* الدعم الفني والناجحون */
#supBtn{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;color:var(--muted)}
#supBtn:hover{background:var(--sunk);color:var(--ink)}
#supBtn.on{background:var(--accent);color:var(--accent-ink)}
details.tk-new{border-bottom:1px solid var(--line)}
details.tk-new>summary{cursor:pointer;padding:14px 18px;font-weight:700;list-style:none;display:flex;justify-content:space-between}
details.tk-new>summary::after{content:'▾';color:var(--muted)}
.story-card{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:10px}
.story-card .q{font-size:52px;line-height:.6;height:20px;color:var(--accent);opacity:.35;font-family:"Noto Naskh Arabic",serif}
.story-card p{margin:0;line-height:2;font-size:15.5px}
.story-card footer{display:flex;align-items:center;gap:8px;margin-top:auto}
.story-card footer small{margin-inline-start:auto}
.hello{display:flex;align-items:center;gap:14px;padding:14px 16px}
.hello b{display:block;font-size:17px;font-family:var(--f-display)}
.hello small{display:inline-block;margin-top:4px;color:var(--accent);background:var(--accent-soft);padding:2px 10px;border-radius:20px;font-size:12.5px}
.m-only{display:none}
/* قوائم الجوال المنبثقة */
.sheet-scrim{place-items:end center;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.sheet{background:var(--surface);border-radius:22px;width:min(420px,100%);padding:16px;direction:rtl;box-shadow:0 20px 60px rgb(0 0 0/.25);animation:shUp .18s ease-out}
.sheet h3{margin:0 0 6px;padding:4px 6px 12px;border-bottom:1px solid var(--line);font-size:17px}
.sh-row{display:flex;align-items:center;gap:14px;padding:10px 6px;text-decoration:none;color:inherit;border-radius:12px}
.sh-row:hover{background:var(--sunk)}
.sh-row b{flex:1;font-size:16px}
.sh-ic{position:relative;width:58px;height:58px;border-radius:16px;display:grid;place-items:center}
.sh-ic .badge{top:-4px;left:-4px}
.c1{background:#DDF6EA;color:#1F9466}.c2{background:#DFF4F2;color:#168A80}.c3{background:#DDF1FB;color:#2582B3}.c4{background:#E7E5FB;color:#5A4BD1}.c5{background:#F6E2F8;color:#B13CC0}
.c6{background:#FFE1E6;color:#D2304F}.c7{background:#FFF1DA;color:#C77A0A}.c8{background:#FDE3E1;color:#D23B30}.c9{background:#FFF3C4;color:#9A6B00}
@keyframes shUp{from{transform:translateY(20px);opacity:0}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
/* الشريط السفلي الملوّن */
.bnav .bn{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--ink);text-decoration:none;background:none;border:0;padding:4px 2px;flex:1;min-width:0}
.bnav .bn .t{position:relative;width:52px;height:46px;border-radius:15px;display:grid;place-items:center}
.bnav .bn .badge{top:-5px;left:-5px}
.bnav .c-mem .t{background:#C9F2DE;color:#14714D}.bnav .c-int .t{background:#FDE79A;color:#7A5600}.bnav .c-msg .t{background:#C7E8FB;color:#1C628E}
.bnav .c-suit .t{background:#FBCDE2;color:#A4235E}.bnav .c-succ .t{background:#FBD3D3;color:#9C2A2A}
.bnav .bn.on .t{box-shadow:0 0 0 2px var(--surface),0 0 0 4px currentColor}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bnav .bn .t,:root:not([data-theme="light"]) .sh-ic{filter:saturate(.85) brightness(.6) contrast(1.35)}}
:root[data-theme="dark"] .bnav .bn .t,:root[data-theme="dark"] .sh-ic{filter:saturate(.85) brightness(.6) contrast(1.35)}
@media (max-width:980px){
  .m-only{display:flex}
  .top .brand{display:none}
  .top .nav{display:flex;margin:0;gap:2px}
  .top .nav a[href="#chats"],.top .nav a[href="#match"]{display:none}
  .top .wrap{justify-content:space-between;gap:4px}
  .util{margin-inline-start:0}
  #themeBtn,.util .menu-btn{display:none!important}
  .nav a.on{background:var(--accent);color:var(--accent-ink)}
  .bnav{padding-top:8px;gap:2px}
  .shell{padding-bottom:110px}
}

/* حقول الدخول */
.ph-row{display:flex;gap:8px;direction:ltr}
.ph-row .input{flex:1;min-width:0;direction:ltr;text-align:left;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.ph-row .cc{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:12px;padding:0 10px;background:var(--surface);flex:0 0 auto}
.ph-row .cc select{border:0;background:none;font:inherit;font-variant-numeric:tabular-nums;outline:none;cursor:pointer;direction:ltr}
.ph-row .cc .flag{margin:0}
.pw-wrap{position:relative}
.pw-wrap .input{padding-inline-start:42px;padding-inline-end:46px}
.pw-ic{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--muted);display:flex}
.pw-eye{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);width:38px;height:38px;border-radius:10px;display:grid;place-items:center}
.pw-eye.on{color:var(--accent)}
.login-row{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.login-row label{display:flex;align-items:center;gap:8px;cursor:pointer}
.login-row input{width:18px;height:18px;accent-color:var(--accent)}
.login-row a{color:var(--muted)!important;text-decoration:none;font-weight:500}
.login-row a:hover{color:var(--accent)!important}

/* أثناء الكتابة في المحادثة على الجوال: نخفي الشريط السفلي عشان المساحة فوق الكيبورد */
@media (max-width:980px){body.typing .bnav{display:none}body.typing .shell{padding-bottom:16px}}

/* علامات وصول وقراءة الرسائل */
.msg time{display:flex;align-items:center;gap:4px}
.tick{display:inline-flex;vertical-align:middle;line-height:0}
.msg.me time{justify-content:flex-end}
.msg.me .tick{color:var(--muted)}
.msg.me .tick svg{width:18px;height:18px}
.msg.me .tick.read{color:#1E9BE9}
.msg.me .tick.read svg{stroke-width:2.4}
.citem small .tick{margin-inline-end:3px;color:var(--muted)}
.citem small .tick.read{color:#2B9FD9}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .msgs{background:var(--bg)}:root:not([data-theme="light"]) .msg.me{background:color-mix(in srgb,var(--accent) 30%,var(--surface))}}
:root[data-theme="dark"] .msgs{background:var(--bg)}:root[data-theme="dark"] .msg.me{background:color-mix(in srgb,var(--accent) 30%,var(--surface))}