/* ============================================================
   سبيد بلس v6 — التصميم الزجاجي العصري (Glassmorphism)
   ============================================================ */
*{margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent}

:root{
  --bg:#0b0410; --bg2:#140a1c;
  --text:#f4eefb; --muted:#b7a8c9; --muted2:#8d7fa3;
  --accent:#ff2e51; --accent-soft:#ff7d94; --accent-deep:#8f0f2e; --hot:#ff5470;
  --on-accent:#fff; --heart:#ff3b5c; --blue:#2ea6ff; --gold:#ffd166;
  --like-bg:rgba(255,46,81,.14);
  --glass:rgba(255,255,255,.055); --glass2:rgba(255,255,255,.095);
  --gbr:rgba(255,255,255,.13); --gbr2:rgba(255,255,255,.22);
  --card:var(--glass); --card2:var(--glass2); --line:var(--gbr); --line2:var(--gbr2);
  --blur:blur(20px) saturate(1.35);
  --shadow:0 10px 34px rgba(0,0,0,.42);
  --r:20px; --r2:15px;
  --aura1:#ff2e51; --aura2:#8a2be2;
}
html[data-theme="speed"]{--accent:#8b5cf6; --accent-soft:#c4b0fb; --accent-deep:#3b1a7a; --hot:#a78bfa; --heart:#a78bfa; --like-bg:rgba(139,92,246,.16); --aura1:#8b5cf6; --aura2:#2ea6ff; --bg:#0a0614; --bg2:#120b22}
html[data-theme="midnight"]{--accent:#2ea6ff; --accent-soft:#8fd0ff; --accent-deep:#0a2a5e; --hot:#4db6ff; --heart:#2ea6ff; --like-bg:rgba(46,166,255,.15); --aura1:#2ea6ff; --aura2:#0affd0; --bg:#040a16; --bg2:#0a1426}
html[data-theme="emerald"]{--accent:#10c46a; --accent-soft:#7ef0b4; --accent-deep:#064e2b; --hot:#2dd884; --heart:#10c46a; --like-bg:rgba(16,196,106,.15); --aura1:#10c46a; --aura2:#0affd0; --bg:#03110a; --bg2:#082015}
html[data-theme="gold"]{--accent:#e8b23a; --accent-soft:#ffdf8e; --accent-deep:#4a3305; --hot:#f4c95d; --heart:#e8b23a; --on-accent:#241a02; --like-bg:rgba(232,178,58,.15); --aura1:#e8b23a; --aura2:#ff8a00; --bg:#0f0a02; --bg2:#1c1305}
html[data-theme="cyber"]{--accent:#ff2ec8; --accent-soft:#ff9de8; --accent-deep:#5e0a4c; --hot:#ff5cd6; --heart:#ff2ec8; --like-bg:rgba(255,46,200,.15); --aura1:#ff2ec8; --aura2:#00e5ff; --bg:#0e0313; --bg2:#1a0824}
html[data-theme="pearl"]{
  --bg:#eef0fa; --bg2:#f7f5ff; --text:#241a35; --muted:#5c5273; --muted2:#8d84a3;
  --accent:#7a2eff; --accent-soft:#5b1fc4; --accent-deep:#4a12a8; --hot:#9257ff;
  --heart:#e0245e; --like-bg:rgba(122,46,255,.10);
  --glass:rgba(255,255,255,.62); --glass2:rgba(255,255,255,.85);
  --gbr:rgba(70,40,120,.14); --gbr2:rgba(70,40,120,.26);
  --card:var(--glass); --card2:var(--glass2); --line:var(--gbr); --line2:var(--gbr2);
  --shadow:0 10px 30px rgba(90,60,160,.16); --aura1:#b79bff; --aura2:#8fd0ff;
}

html[data-font="tajawal"] body{font-family:'Tajawal',sans-serif}
html[data-font="cairo"] body{font-family:'Cairo',sans-serif}
html[data-font="almarai"] body{font-family:'Almarai',sans-serif}
html[data-font="kufi"] body{font-family:'Noto Kufi Arabic',sans-serif}
html[data-font="system"] body{font-family:system-ui,-apple-system,'Segoe UI',sans-serif}

body{font-family:'Tajawal',sans-serif; background:#000; color:var(--text);
  display:flex; justify-content:center; min-height:100dvh}
.phone{position:relative; width:100%; max-width:480px; min-height:100dvh;
  background:var(--bg); overflow:hidden; isolation:isolate}
/* أضواء الخلفية (Aurora) */
.phone::before, .phone::after{content:''; position:absolute; width:70vmin; height:70vmin;
  border-radius:50%; filter:blur(90px); opacity:.32; z-index:-1; animation:aura 16s ease-in-out infinite alternate}
.phone::before{background:var(--aura1); top:-18%; inset-inline-start:-22%}
.phone::after{background:var(--aura2); bottom:-20%; inset-inline-end:-24%; animation-delay:-8s}
html[data-theme="pearl"] .phone::before, html[data-theme="pearl"] .phone::after{opacity:.5}
@keyframes aura{from{transform:translate(0,0) scale(1)} to{transform:translate(9%,7%) scale(1.15)}}

.ico{width:22px; height:22px; stroke:currentColor; stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; display:block}
.ico.fill{fill:currentColor; stroke:none}
.badge{width:17px; height:17px; flex:0 0 auto}

/* ====== الزجاج الأساسي ====== */
.gl{background:var(--glass); border:1px solid var(--gbr);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}

/* ====== شاشة الدخول ====== */
.auth{min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:26px 22px; position:relative}
.auth .logo{width:88px; height:88px; border-radius:28px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg,var(--hot),var(--accent-deep));
  box-shadow:0 14px 40px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.35)}
.auth .logo .ico{width:44px; height:44px}
.auth h1{font-size:31px; font-weight:900; margin-top:16px;
  background:linear-gradient(90deg,var(--accent-soft),var(--text));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.auth .tag{color:var(--muted); font-size:14px; margin:5px 0 22px}
.auth .card{width:100%; border-radius:26px; padding:20px;
  background:var(--glass); border:1px solid var(--gbr);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:var(--shadow)}
.tabs{display:flex; background:var(--glass); border:1px solid var(--gbr);
  border-radius:99px; padding:4px; margin-bottom:18px}
.tabs button{flex:1; border:none; background:transparent; color:var(--muted); font-family:inherit;
  font-weight:800; font-size:14px; padding:10px; border-radius:99px; cursor:pointer; transition:.25s}
.tabs button.active{background:linear-gradient(135deg,var(--hot),var(--accent-deep));
  color:var(--on-accent); box-shadow:0 4px 16px color-mix(in srgb, var(--accent) 40%, transparent)}
label{display:block; font-size:12.5px; font-weight:800; color:var(--muted); margin:13px 0 6px}
input, textarea, select{width:100%; background:var(--glass); border:1.5px solid var(--gbr);
  border-radius:14px; padding:13px 15px; color:var(--text); font-family:inherit; font-size:14.5px;
  outline:none; transition:.2s; backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
input:focus, textarea:focus{border-color:var(--accent); background:var(--glass2);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent)}
textarea{min-height:92px; resize:none; line-height:1.7}
input::placeholder, textarea::placeholder{color:var(--muted2)}
.big-btn, .go{width:100%; border:none; cursor:pointer; margin-top:18px; padding:15px;
  border-radius:16px; font-family:inherit; font-weight:900; font-size:15.5px; color:var(--on-accent);
  background:linear-gradient(135deg,var(--hot),var(--accent-deep)); position:relative; overflow:hidden;
  box-shadow:0 10px 26px color-mix(in srgb, var(--accent) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
  transition:.2s}
.big-btn:active, .go:active{transform:scale(.975)}
.big-btn:disabled, .go:disabled{opacity:.6}
.err{color:#ff6b81; font-size:13px; font-weight:700; margin-top:12px; text-align:center; min-height:18px}
.ustatus{font-size:12.5px; margin-top:6px; min-height:17px; font-weight:800}
.ustatus.ok{color:#22c55e} .ustatus.bad{color:#ff6b81}

/* ====== هيكل التطبيق ====== */
#app{height:100dvh; position:relative}
.screen{position:absolute; inset:0; display:none}
.screen.active{display:block}
.scroll{height:100%; overflow-y:auto; padding-bottom:118px; scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}

/* الشريط العلوي الزجاجي */
.top{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px; background:color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border-bottom:1px solid var(--gbr)}
.brand{display:flex; align-items:center; gap:9px}
.brand .bolt{width:38px; height:38px; border-radius:13px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--hot),var(--accent-deep));
  box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.3)}
.brand .bolt .ico{width:19px; height:19px}
.brand h1{font-size:19.5px; font-weight:900}
.top-icons{display:flex; gap:8px}
.top-icons > span{width:40px; height:40px; border-radius:13px; display:grid; place-items:center;
  color:var(--muted); cursor:pointer; background:var(--glass); border:1px solid var(--gbr);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); transition:.2s}
.top-icons > span:active{transform:scale(.92)}
.top-icons .ico{width:19px; height:19px}
.topmsg{position:relative}
#msgDot{position:absolute; top:7px; inset-inline-start:7px; width:9px; height:9px; border-radius:50%;
  background:var(--accent); display:none; border:2px solid var(--bg); font-style:normal; z-index:2}
#msgDot.on{display:block}

/* تبويبات مقسمة زجاجية */
.tabs-bar{display:flex; gap:6px; margin:10px 16px 6px; padding:5px;
  background:var(--glass); border:1px solid var(--gbr); border-radius:99px;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.tabs-bar button{flex:1; border:none; background:transparent; color:var(--muted); font-family:inherit;
  font-weight:800; font-size:13px; padding:9px 4px; border-radius:99px; cursor:pointer; transition:.25s}
.tabs-bar button.active{background:linear-gradient(135deg,var(--hot),var(--accent-deep)); color:var(--on-accent)}

/* رؤوس الشاشات الداخلية */
.cz-head{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:11px;
  padding:14px 16px 11px; background:color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border-bottom:1px solid var(--gbr)}
.cz-head .back{width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  color:var(--muted); cursor:pointer; background:var(--glass); border:1px solid var(--gbr)}
.cz-head .back .ico{width:18px; height:18px; transform:scaleX(-1)}
.cz-head h2{font-size:17.5px; font-weight:900}
.sec-title{font-size:15.5px; font-weight:900; padding:18px 18px 10px; display:flex; align-items:center; gap:7px}
.sub{color:var(--muted); font-size:12.5px; line-height:1.7; padding:0 0 8px}
.loading, .empty{text-align:center; color:var(--muted); padding:44px 20px; font-size:14px; line-height:2}
.empty .doc{width:58px; height:58px; margin:0 auto 10px; border-radius:19px; display:grid; place-items:center;
  color:var(--muted2); background:var(--glass); border:1px solid var(--gbr)}
.empty .doc .ico{width:26px; height:26px}

/* ====== الستوري ====== */
.stbar{display:flex; gap:13px; overflow-x:auto; padding:14px 16px 4px; scrollbar-width:none}
.stbar::-webkit-scrollbar{display:none}
.stbar:empty{display:none}
.stb{flex:0 0 auto; width:66px; text-align:center; cursor:pointer}
.stb .ava{width:60px; height:60px; margin:0 auto}
.stb small{display:block; margin-top:6px; font-size:10.5px; font-weight:700; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stb.add .in{display:grid; place-items:center; background:var(--glass2); color:var(--accent-soft)}
.stb.add .in .ico{width:22px; height:22px}
.stb.seen .ava::before{background:var(--gbr2); animation:none; box-shadow:none}

/* ====== الصور الرمزية والإطارات ====== */
.ava{position:relative; padding:2.5px; width:46px; height:46px; border-radius:50%; flex:0 0 auto}
.ava::before{content:''; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 40deg,#ff004c,#ff8a00,#ffe600,#00ff85,#00b3ff,#8a2be2,#ff004c)}
.ava .in{position:relative; z-index:1; width:100%; height:100%; border-radius:50%; overflow:hidden;
  background:var(--bg2); display:grid; place-items:center; font-weight:900; font-size:17px;
  color:var(--accent-soft); border:2.5px solid var(--bg)}
.ava .in img{width:100%; height:100%; object-fit:cover}
.pf-ava{position:relative; padding:4px; width:104px; height:104px; border-radius:50%; margin:-52px auto 0}
.pf-ava::before{content:''; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 30deg,#ff004c,#ff8a00,#ffe600,#00ff85,#00b3ff,#8a2be2,#ff004c)}
.pf-ava .in{position:relative; z-index:1; width:100%; height:100%; border-radius:50%; overflow:hidden;
  background:var(--bg2); display:grid; place-items:center; font-weight:900; font-size:36px;
  color:var(--accent-soft); border:4px solid var(--bg)}
.pf-ava .in img{width:100%; height:100%; object-fit:cover}
.f-none::before{background:var(--gbr2)}
.f-classic::before{background:conic-gradient(from 40deg,#ff004c,#ff8a00,#ffe600,#00ff85,#00b3ff,#8a2be2,#ff004c)}
.f-rgb::before{background:conic-gradient(#ff004c,#ff8a00,#ffe600,#00ff85,#00b3ff,#8a2be2,#ff004c); animation:frameHue 2.4s linear infinite}
.f-fire::before{background:conic-gradient(#ff3b00,#ff8a00,#ffc400,#ff5a00,#ff0044,#ff3b00); animation:frameHot 1.6s ease-in-out infinite}
.f-gold::before{background:linear-gradient(120deg,#7a5a10,#e8b23a,#fff3c4,#e8b23a,#7a5a10); background-size:300% 100%; animation:frameShimmer 2.8s linear infinite}
.f-neon::before{background:conic-gradient(#00e5ff,#ff2ec8,#00e5ff); box-shadow:0 0 14px rgba(0,229,255,.55)}
.f-violet::before{background:conic-gradient(#8b5cf6,#d8b4fe,#6d28d9,#8b5cf6)}
.f-emerald::before{background:conic-gradient(#10c46a,#a7f3d0,#0a8f4c,#10c46a)}
.f-rose::before{background:conic-gradient(#ff5c8a,#ffd1dc,#ff2e51,#ff5c8a)}
@keyframes frameHue{to{filter:hue-rotate(360deg)}}
@keyframes frameShimmer{to{background-position:300% 0}}
@keyframes frameHot{0%,100%{box-shadow:0 0 6px rgba(255,90,0,.65)}50%{box-shadow:0 0 18px rgba(255,50,0,.95)}}
.name-rgb{background:linear-gradient(90deg,#ff004c,#ff8a00,#ffe600,#00ff85,#00b3ff,#8a2be2,#ff004c);
  background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:nameFlow 5s linear infinite}
@keyframes nameFlow{to{background-position:300% 0}}

/* ====== المنشورات (بطاقات زجاجية) ====== */
.post{margin:12px 14px; padding:15px; border-radius:var(--r);
  background:var(--glass); border:1px solid var(--gbr);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:var(--shadow); position:relative}
.post.pinned{border-color:color-mix(in srgb, var(--accent) 55%, transparent)}
.post.pinned::after{content:'📌 مثبّت'; position:absolute; top:-9px; inset-inline-start:16px;
  font-size:10.5px; font-weight:900; padding:3px 10px; border-radius:99px; color:var(--on-accent);
  background:linear-gradient(135deg,var(--hot),var(--accent-deep))}
.p-top{display:flex; align-items:center; gap:10px}
.p-id{flex:1; min-width:0}
.p-name{font-weight:900; font-size:14.5px; display:flex; align-items:center; gap:4px}
.p-handle{color:var(--accent-soft); font-size:12px; font-weight:700}
.p-time{color:var(--muted2); font-size:11px; margin-top:1px}
.pmenu{width:34px; height:34px; border-radius:11px; display:grid; place-items:center; color:var(--muted2);
  cursor:pointer; background:var(--glass); border:1px solid var(--gbr); flex:0 0 auto}
.pmenu .ico{width:17px; height:17px}
.p-body{margin-top:11px; font-size:14.5px; line-height:1.85; word-wrap:break-word}
.p-img, .p-vid{position:relative; margin-top:11px; border-radius:16px; overflow:hidden;
  border:1px solid var(--gbr)}
.p-img img{display:block; width:100%; max-height:480px; object-fit:cover}
.p-vid{background:#000}
.p-vid video{display:block; width:100%; max-height:72vh}
.p-stk{position:absolute; top:8px; inset-inline-end:8px; font-size:31px; z-index:2;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.p-stkrow{font-size:31px; margin-top:10px; line-height:1}
.acts{display:flex; gap:8px; margin-top:12px}
.act{display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--muted);
  font-size:13px; font-weight:800; padding:8px 13px; border-radius:99px;
  background:var(--glass); border:1px solid var(--gbr); transition:.2s}
.act:active{transform:scale(.93)}
.act .ico{width:17px; height:17px}
.act.like.on{color:var(--heart); background:var(--like-bg); border-color:color-mix(in srgb, var(--heart) 45%, transparent)}
.act.saved.on{color:var(--gold); border-color:color-mix(in srgb, var(--gold) 45%, transparent)}
.act.share{margin-inline-start:auto}

/* ====== الشريط السفلي العائم ====== */
.nav{position:absolute; bottom:14px; inset-inline:14px; z-index:30; height:66px;
  display:flex; align-items:center; justify-content:space-around; border-radius:24px;
  background:color-mix(in srgb, var(--bg2) 72%, transparent); border:1px solid var(--gbr2);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:0 14px 40px rgba(0,0,0,.5)}
html[data-theme="pearl"] .nav{box-shadow:0 14px 34px rgba(90,60,160,.22)}
.nav a{width:46px; height:46px; border-radius:15px; display:grid; place-items:center;
  color:var(--muted2); cursor:pointer; position:relative; transition:.2s}
.nav a.active{color:var(--accent-soft); background:var(--glass2)}
.nav a .ico{width:22px; height:22px}
.nav .fab{width:58px; height:58px; margin-top:-30px; border-radius:20px; color:#fff;
  background:linear-gradient(135deg,var(--hot),var(--accent-deep));
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 12px 30px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.4)}
.nav .fab .ico{width:25px; height:25px}
.nav .fab:active{transform:scale(.92)}
.badge-dot{position:absolute; top:9px; inset-inline-start:9px; width:8px; height:8px; border-radius:50%;
  background:var(--accent); display:none}
.badge-dot.on{display:block}

/* ====== النوافذ المنزلقة (زجاج) ====== */
.overlay{position:absolute; inset:0; z-index:50; background:rgba(0,0,0,.55);
  display:none; align-items:flex-end; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
.overlay.show{display:flex}
.sheet{width:100%; max-height:86dvh; overflow-y:auto; padding:20px 20px calc(22px + env(safe-area-inset-bottom));
  border-radius:28px 28px 0 0; background:color-mix(in srgb, var(--bg2) 82%, transparent);
  border:1px solid var(--gbr2); border-bottom:none;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  animation:sheetUp .28s cubic-bezier(.2,.9,.3,1.1); scrollbar-width:none}
.sheet::-webkit-scrollbar{display:none}
@keyframes sheetUp{from{transform:translateY(60px); opacity:0} to{transform:translateY(0); opacity:1}}
.sheet::before{content:''; display:block; width:44px; height:4.5px; border-radius:99px;
  background:var(--gbr2); margin:0 auto 14px}
.sheet h3{font-size:17px; font-weight:900; display:flex; justify-content:space-between;
  align-items:center; margin-bottom:6px}
.sheet h3 span{cursor:pointer; color:var(--muted); display:inline-flex}
.ep-media{display:flex; gap:9px; margin-top:6px; flex-wrap:wrap}
.mbtn{flex:1; min-width:130px; display:flex; align-items:center; justify-content:center; gap:8px;
  border:1.5px dashed var(--gbr2); background:var(--glass); color:var(--muted); border-radius:14px;
  padding:13px 8px; font-family:inherit; font-weight:800; font-size:12.5px; cursor:pointer; transition:.2s}
.mbtn .ico{width:17px; height:17px}
.mbtn.done{border-style:solid; border-color:#22c55e; color:#22c55e; background:rgba(34,197,94,.09)}
.ctx-tag{background:var(--like-bg); border:1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  color:var(--accent-soft); border-radius:12px; padding:8px 12px; font-size:12.5px; font-weight:800;
  margin-bottom:10px; display:inline-flex; align-items:center; gap:6px}
.ctx-tag .ico{width:15px; height:15px}

/* ====== التعليقات ====== */
.cmts{max-height:46dvh; overflow-y:auto; margin:6px 0 12px; scrollbar-width:none}
.cmts::-webkit-scrollbar{display:none}
.cmt{display:flex; gap:9px; margin-bottom:12px}
.cmt .ava{width:38px; height:38px}
.cmt.reply{margin-inline-start:40px}
.cmt .bubble{flex:1; background:var(--glass); border:1px solid var(--gbr); border-radius:16px;
  border-start-start-radius:5px; padding:10px 13px}
.cmt .bubble b{font-size:13px; font-weight:900; display:flex; align-items:center; gap:4px}
.cmt .bubble b .badge{width:14px; height:14px}
.cmt .bubble .rto{display:flex; align-items:center; gap:4px; color:var(--muted2); font-size:11px; margin:3px 0 0}
.cmt .bubble .rto .ico{width:12px; height:12px}
.cmt .bubble p{font-size:13.5px; line-height:1.75; margin-top:4px; word-wrap:break-word}
.cacts{display:flex; gap:16px; margin-top:8px; color:var(--muted2); font-size:12px; font-weight:800}
.cacts span{cursor:pointer; display:inline-flex; gap:5px; align-items:center}
.cacts .ico{width:14px; height:14px}
.cacts .clike.on{color:var(--heart)}
.replybar{display:flex; justify-content:space-between; align-items:center; background:var(--glass2);
  border:1px solid var(--gbr); border-radius:12px; padding:8px 12px; margin-bottom:10px;
  font-size:12.5px; font-weight:700; color:var(--muted)}
.replybar span{cursor:pointer; display:inline-flex; color:var(--accent-soft)}
.replybar .ico{width:15px; height:15px}
.cmt-row{display:flex; gap:8px}
.cmt-row input{flex:1; border-radius:99px; padding:12px 17px}
.send{width:47px; height:47px; border-radius:50%; border:none; cursor:pointer; flex:0 0 auto;
  display:grid; place-items:center; color:var(--on-accent);
  background:linear-gradient(135deg,var(--hot),var(--accent-deep));
  box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent)}
.send .ico{width:19px; height:19px}

/* ====== الملف الشخصي ====== */
.cover{height:168px; background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 45%, var(--bg)), var(--bg2)); position:relative}
.cover img{width:100%; height:100%; object-fit:cover}
.cover::after{content:''; position:absolute; inset:0;
  background:linear-gradient(to top, var(--bg) 2%, transparent 55%)}
.pf-wrap{text-align:center; position:relative; z-index:2}
.pf-name{font-size:20px; font-weight:900; margin-top:11px; display:flex; align-items:center;
  justify-content:center; gap:6px; color:var(--text)}
.pf-handle{color:var(--accent-soft); font-size:13.5px; font-weight:800; margin-top:3px}
.pf-bio{color:var(--muted); font-size:14px; padding:8px 30px 0; line-height:1.8; text-align:center}
.stats{display:flex; gap:9px; margin:17px 16px 0}
.stat{flex:1; text-align:center; padding:13px 4px; border-radius:16px;
  background:var(--glass); border:1px solid var(--gbr);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.stat b{display:flex; align-items:center; justify-content:center; gap:4px; font-size:17.5px; font-weight:900}
.stat small{display:block; color:var(--muted); font-size:11px; margin-top:3px; font-weight:700}
.stat.star b{color:var(--gold)}
.stat .ico{width:15px; height:15px}
.btns{padding:15px 16px 0; display:flex; flex-direction:column; gap:9px}
.btn{display:flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer;
  padding:13.5px; border-radius:15px; font-family:inherit; font-weight:900; font-size:14px;
  color:var(--text); background:var(--glass); border:1px solid var(--gbr);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); transition:.2s}
.btn:active{transform:scale(.975)}
.btn .ico{width:17px; height:17px}
.btn.outline{border-color:var(--gbr2)}
.btn.blue{color:#fff; background:linear-gradient(135deg,#2ea6ff,#0a4b9e); border:1px solid rgba(255,255,255,.25);
  box-shadow:0 8px 22px rgba(46,166,255,.32), inset 0 1px 0 rgba(255,255,255,.35)}
.btn.pink{color:var(--on-accent); background:linear-gradient(135deg,var(--hot),var(--accent-deep));
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 34%, transparent), inset 0 1px 0 rgba(255,255,255,.35)}
.btn.owner{color:#241a02; background:linear-gradient(135deg,#ffd166,#c98a12); border:1px solid rgba(255,255,255,.35);
  box-shadow:0 8px 22px rgba(232,178,58,.3), inset 0 1px 0 rgba(255,255,255,.5)}
.btn.ghost{background:transparent; border:1.5px solid var(--gbr2); color:var(--muted)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:9px}

/* ====== التخصيص ====== */
.cz-sec{padding:16px}
.cz-sec h3{display:flex; align-items:center; gap:8px; font-size:15.5px; font-weight:900; margin-bottom:4px}
.cz-sec h3 .ico{width:18px; height:18px; color:var(--accent-soft)}
.theme-grid{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:9px}
.tcard{position:relative; border-radius:18px; padding:12px; cursor:pointer;
  background:var(--glass); border:1.5px solid var(--gbr); transition:.2s;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.tcard.sel{border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent)}
.tcard .chk{position:absolute; top:9px; inset-inline-start:9px; width:23px; height:23px; border-radius:50%;
  display:none; place-items:center; color:var(--on-accent);
  background:linear-gradient(135deg,var(--hot),var(--accent-deep)); z-index:2}
.tcard.sel .chk{display:grid}
.tcard .chk .ico{width:13px; height:13px}
.tcard .prev{height:64px; border-radius:12px; padding:9px; display:flex; flex-direction:column; gap:6px; justify-content:center}
.tcard .prev .bar{height:8px; width:75%; border-radius:99px; background:rgba(255,255,255,.4)}
.tcard .prev .bar.b2{width:50%; background:rgba(255,255,255,.22)}
.tcard.light-prev .prev .bar{background:rgba(40,20,80,.35)}
.tcard.light-prev .prev .bar.b2{background:rgba(40,20,80,.2)}
.tcard b{display:block; font-size:13.5px; margin-top:9px}
.tcard small{color:var(--muted); font-size:11px}
.font-list{display:flex; flex-direction:column; gap:9px; margin-top:9px}
.frow{display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:15px; cursor:pointer;
  background:var(--glass); border:1.5px solid var(--gbr); transition:.2s}
.frow.sel{border-color:var(--accent)}
.frow .radio{width:20px; height:20px; border-radius:50%; border:2px solid var(--gbr2); flex:0 0 auto; position:relative}
.frow.sel .radio{border-color:var(--accent)}
.frow.sel .radio::after{content:''; position:absolute; inset:3.5px; border-radius:50%; background:var(--accent)}
.frow b{font-size:14px; display:block}
.frow small{color:var(--muted); font-size:11.5px; display:block; margin-top:2px}
.fstrip{display:flex; gap:12px; overflow-x:auto; padding:8px 2px; scrollbar-width:none}
.fstrip::-webkit-scrollbar{display:none}
.fitem{flex:0 0 auto; text-align:center; cursor:pointer; width:70px}
.fitem .ava{width:56px; height:56px; margin:0 auto}
.fitem small{font-size:10.5px; color:var(--muted); display:block; margin-top:5px; line-height:1.3; font-weight:700}
.fitem.sel small{color:var(--accent-soft); font-weight:900}
.fitem.locked{opacity:.5}

/* ====== الإشعارات ====== */
.nt{display:flex; align-items:center; gap:12px; margin:0 14px 9px; padding:12px 14px;
  border-radius:16px; background:var(--glass); border:1px solid var(--gbr);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.nt.unread{border-color:color-mix(in srgb, var(--accent) 50%, transparent); background:var(--like-bg)}
.nt .tico{width:40px; height:40px; border-radius:13px; display:grid; place-items:center;
  color:var(--accent-soft); background:var(--glass2); flex:0 0 auto}
.nt .tico .ico{width:18px; height:18px}
.nt .txt{flex:1; font-size:13.5px; line-height:1.6}
.nt time{color:var(--muted2); font-size:10.5px; flex:0 0 auto}

/* ====== البحث والقوائم ====== */
.search-box{padding:10px 16px 8px}
#searchRes .tabs-bar{margin:0 16px 10px}
.urow, .grow, .conv{display:flex; align-items:center; gap:11px; margin:0 14px 9px; padding:11px 13px;
  border-radius:16px; cursor:pointer; background:var(--glass); border:1px solid var(--gbr);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.urow .ava, .conv .ava{width:44px; height:44px}
.urow .meta, .grow .meta, .conv .meta{flex:1; min-width:0}
.urow .meta b, .grow .meta b, .conv .meta b{font-size:14px; font-weight:900; display:flex; align-items:center; gap:4px}
.urow .meta b .badge, .grow .meta b .badge, .conv .meta b .badge{width:14px; height:14px}
.urow .meta small, .grow .meta small{color:var(--accent-soft); font-size:12px; font-weight:700}
.grow .meta small{color:var(--muted)}
.grow .gava{width:46px; height:46px; border-radius:15px; background:var(--glass2); display:grid;
  place-items:center; overflow:hidden; flex:0 0 auto; color:var(--accent-soft)}
.grow .gava img{width:100%; height:100%; object-fit:cover}
.grow .gava .ico{width:21px; height:21px}
.fbtn{border:none; cursor:pointer; font-family:inherit; font-weight:900; font-size:12.5px;
  padding:9px 15px; border-radius:99px; color:var(--on-accent); flex:0 0 auto;
  background:linear-gradient(135deg,var(--hot),var(--accent-deep));
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 5px 14px color-mix(in srgb, var(--accent) 30%, transparent)}
.fbtn.off{background:var(--glass); border:1.5px solid var(--gbr2); color:var(--muted); box-shadow:none}
.follow-wide{display:flex; align-items:center; justify-content:center; gap:7px;
  margin:15px 16px 0; width:calc(100% - 32px)}
.follow-wide .ico{width:16px; height:16px}
.mk-newbtn{margin:4px 16px 12px; width:calc(100% - 32px); border:1.5px dashed var(--gbr2);
  background:var(--glass); color:var(--accent-soft); border-radius:14px; padding:13px;
  font-family:inherit; font-weight:900; font-size:13.5px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:7px}
.mk-newbtn .ico{width:16px; height:16px}
.catgrid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px}
.catgrid .cat{border:1.5px solid var(--gbr); background:var(--glass); color:var(--muted);
  border-radius:12px; padding:11px 6px; text-align:center; font-size:13px; font-weight:800; cursor:pointer}
.catgrid .cat.sel{border-color:var(--accent); color:var(--accent-soft); background:var(--like-bg)}
.tagb{font-size:10px; font-weight:800; padding:2.5px 8px; border-radius:99px; background:var(--glass2);
  border:1px solid var(--gbr); color:var(--muted); margin-inline-start:4px}
.tagb.red{color:#ff6b81; border-color:rgba(255,107,129,.4)}
.tagb.blue{color:var(--blue); border-color:rgba(46,166,255,.4)}

/* ====== الرسائل ====== */
.conv .side{text-align:center; flex:0 0 auto}
.conv .side time{display:block; color:var(--muted2); font-size:10.5px}
.conv .meta small{color:var(--muted); display:block; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; margin-top:2px; font-size:12.5px}
.conv .ub{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px;
  border-radius:99px; background:var(--accent); color:var(--on-accent); font-size:11px; font-weight:900; margin-top:4px}
#chat.active{display:flex; flex-direction:column}
.chat-head{display:flex; align-items:center; gap:10px; padding:13px 14px 11px;
  background:color-mix(in srgb, var(--bg) 55%, transparent); border-bottom:1px solid var(--gbr);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.chat-head .back{width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
  color:var(--muted); cursor:pointer; background:var(--glass); border:1px solid var(--gbr)}
.chat-head .back .ico{width:17px; height:17px; transform:scaleX(-1)}
.chat-head .ava{width:40px; height:40px}
.chat-head b{font-size:14.5px; font-weight:900; display:flex; align-items:center; gap:4px}
.chat-head b .badge{width:14px; height:14px}
.chat-head small{display:block; color:var(--accent-soft); font-size:11.5px; font-weight:700}
.chat-body{flex:1; overflow-y:auto; padding:14px 14px 10px; display:flex; flex-direction:column; gap:8px; scrollbar-width:none}
.chat-body::-webkit-scrollbar{display:none}
.msg{max-width:80%; padding:10px 14px; border-radius:18px; font-size:14px; line-height:1.65; word-wrap:break-word}
.msg.me{align-self:flex-start; color:var(--on-accent);
  background:linear-gradient(135deg,var(--hot),var(--accent-deep));
  border-end-start-radius:5px; box-shadow:0 5px 14px color-mix(in srgb, var(--accent) 26%, transparent)}
.msg.them{align-self:flex-end; background:var(--glass2); border:1px solid var(--gbr);
  color:var(--text); border-end-end-radius:5px}
.msg time{display:block; font-size:9.5px; opacity:.7; margin-top:3px}
.chat-row{display:flex; gap:8px; padding:10px 13px calc(13px + env(safe-area-inset-bottom));
  border-top:1px solid var(--gbr); background:color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.chat-row input{flex:1; border-radius:99px; padding:12px 17px}
.chat-row .send{width:46px; height:46px}

/* ====== السوق ====== */
.mk-stars{margin:8px 16px 12px; padding:15px; border-radius:18px; text-align:center;
  font-weight:900; font-size:15.5px; color:var(--gold); display:flex; align-items:center;
  justify-content:center; gap:7px; background:var(--glass); border:1px solid var(--gbr);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.mk-stars .ico{width:18px; height:18px}
.auc, .vcard{margin:0 14px 11px; padding:15px; border-radius:18px; background:var(--glass);
  border:1px solid var(--gbr); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.auc .un{font-size:20px; font-weight:900; color:var(--accent-soft); direction:ltr; text-align:right}
.auc .inf, .vcard .vinfo{color:var(--muted); font-size:12.5px; margin-top:7px; line-height:1.8}
.auc .inf b, .vcard .vinfo b{color:var(--text)}
.vrow2{display:flex; gap:8px; margin-top:12px}
.vrow2 button{flex:1; border:none; cursor:pointer; border-radius:13px; padding:12px;
  font-family:inherit; font-weight:900; font-size:13px; transition:.2s}
.vrow2 button:active{transform:scale(.96)}
.vrow2 .ok{background:linear-gradient(135deg,#22c55e,#0a8f4c); color:#fff;
  box-shadow:0 6px 16px rgba(34,197,94,.3), inset 0 1px 0 rgba(255,255,255,.3)}
.vrow2 .no{background:var(--glass); border:1.5px solid var(--gbr2); color:var(--accent-soft)}
.vrow2 .view{background:var(--glass2); color:var(--text); border:1px solid var(--gbr)}

/* ====== لوحة المالك ====== */
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:8px 16px 12px}
.scard{padding:15px; border-radius:17px; text-align:center; background:var(--glass);
  border:1px solid var(--gbr); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.scard b{display:block; font-size:23px; font-weight:900; color:var(--accent-soft)}
.scard small{color:var(--muted); font-size:12px; font-weight:700}
.uacts{display:flex; gap:6px; flex:0 0 auto}
.uacts button{border:none; cursor:pointer; border-radius:11px; padding:9px; background:var(--glass2);
  border:1px solid var(--gbr); color:var(--muted); display:grid; place-items:center}
.uacts button .ico{width:16px; height:16px}
.uacts button.on{color:var(--blue)}
.uacts button.danger.on{color:#ff5470}
.docview{position:absolute; inset:0; z-index:70; background:rgba(0,0,0,.9); display:none;
  place-items:center; padding:20px; backdrop-filter:blur(6px)}
.docview.show{display:grid}
.docview img{max-width:100%; max-height:78vh; border-radius:14px}
.docview .x{position:absolute; top:18px; inset-inline-start:18px; color:#fff; cursor:pointer; display:inline-flex}

/* ====== الملصقات ====== */
.stkstrip{display:flex; gap:10px; overflow-x:auto; padding:8px 2px; scrollbar-width:none}
.stkstrip::-webkit-scrollbar{display:none}
.stk{flex:0 0 auto; width:52px; height:52px; border-radius:15px; background:var(--glass);
  border:1.5px solid var(--gbr); display:grid; place-items:center; cursor:pointer; font-size:26px;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.stk.sel{border-color:var(--accent); background:var(--like-bg)}
.stk-anim-pulse{animation:stkPulse 1.1s ease-in-out infinite}
.stk-anim-spin{animation:stkSpin 2.4s linear infinite}
.stk-anim-shake{animation:stkShake .7s ease-in-out infinite}
.stk-anim-bounce{animation:stkBounce 1s ease-in-out infinite}
@keyframes stkPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
@keyframes stkSpin{to{transform:rotate(360deg)}}
@keyframes stkShake{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes stkBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ====== عارض ومحرر الستوري ====== */
.stview{position:absolute; inset:0; z-index:80; background:#000; display:none; flex-direction:column}
.stview.show{display:flex}
.stv-prog{display:flex; gap:4px; padding:12px 12px 6px}
.stv-prog i{flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.25); overflow:hidden; position:relative}
.stv-prog i b{position:absolute; inset-inline-start:0; top:0; bottom:0; width:0; background:#fff; display:block}
.stv-head{display:flex; align-items:center; gap:9px; padding:5px 12px; color:#fff}
.stv-head .ava{width:38px; height:38px}
.stv-head .m{flex:1; min-width:0}
.stv-head .m b{font-size:13.5px; font-weight:900; display:flex; gap:4px; align-items:center}
.stv-head .m b .badge{width:14px; height:14px}
.stv-head .m small{color:#bbb; font-size:11px}
.stv-head span.hbtn{cursor:pointer; color:#fff; display:inline-flex; padding:6px}
.stv-media{flex:1; position:relative; display:grid; place-items:center; overflow:hidden}
.stv-media img, .stv-media video{max-width:100%; max-height:100%; object-fit:contain}
.stv-cap{position:absolute; left:0; right:0; text-align:center; padding:0 18px; color:#fff;
  font-weight:900; font-size:17px; line-height:1.7; text-shadow:0 2px 12px rgba(0,0,0,.85); white-space:pre-wrap}
.stv-cap.pos-top{top:10%} .stv-cap.pos-center{top:44%} .stv-cap.pos-bottom{bottom:12%}
.stv-cap:not(.pos-top):not(.pos-center):not(.pos-bottom){bottom:12%}
.stv-tap{position:absolute; top:0; bottom:0; width:38%; z-index:5}
.stv-tap.prev{inset-inline-start:0} .stv-tap.next{inset-inline-end:0}
.stv-foot{padding:10px 14px calc(12px + env(safe-area-inset-bottom)); color:#ddd;
  font-size:12.5px; display:flex; align-items:center; gap:6px; min-height:38px}
.stv-foot .ico{width:15px; height:15px}
.stv-stk{position:absolute; top:14%; inset-inline-end:9%; font-size:58px; z-index:4;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.55))}
.ste-top{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; color:#fff}
.ste-top .hbtn{cursor:pointer; display:inline-flex; color:#fff}
.ste-brand{display:flex; align-items:center; gap:6px; font-weight:900; font-size:13.5px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  padding:8px 14px; border-radius:99px; backdrop-filter:blur(10px)}
.ste-brand .ico{width:15px; height:15px}
.ste-tools{display:flex; justify-content:center; gap:20px; padding:12px 14px 4px}
.ste-tool{text-align:center; cursor:pointer; color:#fff}
.ste-tool .c{width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.24); display:grid; place-items:center;
  font-weight:900; font-size:19px; backdrop-filter:blur(10px); margin:0 auto}
.ste-tool .c .ico{width:21px; height:21px}
.ste-tool small{display:block; margin-top:6px; font-size:11.5px; font-weight:800}
#steColC{border:none}
.ste-stk{padding:8px 14px}
.ste-stk .stk{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2)}
.ste-foot{display:flex; justify-content:flex-start; padding:8px 16px calc(14px + env(safe-area-inset-bottom))}
.ste-share{border:none; cursor:pointer; font-family:inherit; font-weight:900; font-size:15px;
  color:var(--on-accent); background:linear-gradient(135deg,var(--hot),var(--accent-deep));
  padding:14px 32px; border-radius:99px; display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35)}
.ste-share .ico{width:17px; height:17px}
.ste-capinput{position:absolute; left:8%; right:8%; z-index:6; background:transparent; border:none;
  outline:none; text-align:center; font-family:inherit; font-weight:900; font-size:22px;
  text-shadow:0 2px 12px rgba(0,0,0,.85); direction:rtl; backdrop-filter:none; box-shadow:none}
.ste-capinput::placeholder{color:rgba(255,255,255,.55)}
.pos-top{top:12%} .pos-center{top:46%} .pos-bottom{bottom:14%}

/* ====== شاشة النجوم ====== */
.star-hero{margin:10px 16px; padding:22px 16px; border-radius:22px; text-align:center;
  background:var(--glass); border:1px solid var(--gbr);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:var(--shadow)}
.star-hero .big{font-size:38px; font-weight:900; color:var(--gold);
  display:flex; align-items:center; justify-content:center; gap:9px}
.star-hero .big .ico{width:31px; height:31px}
.star-hero small{display:block; color:var(--muted); font-size:12.5px; margin-top:5px; font-weight:700}
.claim-btn{margin-top:15px; width:100%; border:none; cursor:pointer; padding:14px;
  border-radius:15px; font-family:inherit; font-weight:900; font-size:14.5px; color:#241a02;
  background:linear-gradient(135deg,#ffd166,#c98a12); border:1px solid rgba(255,255,255,.4);
  box-shadow:0 8px 22px rgba(232,178,58,.35), inset 0 1px 0 rgba(255,255,255,.5); transition:.2s}
.claim-btn:disabled{opacity:.55; filter:grayscale(.4)}
.claim-btn:active{transform:scale(.97)}
.lb-row{display:flex; align-items:center; gap:11px; margin:0 14px 9px; padding:11px 13px;
  border-radius:16px; background:var(--glass); border:1px solid var(--gbr);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.lb-row .rank{width:30px; height:30px; border-radius:11px; display:grid; place-items:center;
  font-weight:900; font-size:13.5px; color:var(--muted); background:var(--glass2); flex:0 0 auto}
.lb-row:nth-child(1) .rank{background:linear-gradient(135deg,#ffd166,#c98a12); color:#241a02}
.lb-row:nth-child(2) .rank{background:linear-gradient(135deg,#e2e8f0,#94a3b8); color:#1e293b}
.lb-row:nth-child(3) .rank{background:linear-gradient(135deg,#f5b48a,#b3653a); color:#3d1c08}
.lb-row .ava{width:42px; height:42px}
.lb-row .meta{flex:1; min-width:0}
.lb-row .meta b{font-size:13.5px; font-weight:900; display:flex; align-items:center; gap:4px}
.lb-row .meta b .badge{width:14px; height:14px}
.lb-row .meta small{color:var(--accent-soft); font-size:11.5px; font-weight:700}
.lb-row .pts{color:var(--gold); font-weight:900; font-size:14px; display:inline-flex; gap:4px; align-items:center}
.lb-row .pts .ico{width:14px; height:14px}

.toast{position:absolute; bottom:96px; left:50%; transform:translateX(-50%) translateY(16px);
  background:color-mix(in srgb, var(--bg2) 85%, transparent); color:var(--text);
  border:1px solid var(--gbr2); border-radius:99px; padding:11px 21px; font-size:13.5px; font-weight:800;
  opacity:0; pointer-events:none; transition:.3s; z-index:90; white-space:nowrap; max-width:92%;
  overflow:hidden; text-overflow:ellipsis; backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ============ v7: الإصلاح الجذري للإخفاء ============ */
[hidden]{display:none !important}
.nav a{position:relative}

/* قلب النقر المزدوج */
.heart-burst{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:6}
.heart-burst .ico{width:86px; height:86px; color:#fff;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.55)); animation:burst .75s ease forwards}
@keyframes burst{0%{transform:scale(.35); opacity:0} 28%{transform:scale(1.18); opacity:1}
  60%{transform:scale(1)} 100%{transform:scale(1.4); opacity:0}}

/* الهاشتاك */
.htag{color:var(--accent-soft); font-weight:900; cursor:pointer}

/* ============ v9: مشغل سبيد بلس ============ */
.spv{position:relative}
.spv video{cursor:pointer}
.spv-center{position:absolute; inset:0; display:grid; place-items:center; cursor:pointer; z-index:3}
.spv-center .c{width:64px; height:64px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(10px);
  box-shadow:0 8px 26px rgba(0,0,0,.45)}
.spv-center .ico{width:26px; height:26px}
.spv.playing .spv-center{display:none}
.spv-bar{position:absolute; bottom:0; inset-inline:0; z-index:4; display:flex; align-items:center; gap:8px;
  padding:22px 10px 8px; background:linear-gradient(to top, rgba(0,0,0,.75), transparent); color:#fff}
.spv-bar > span{cursor:pointer; display:inline-flex; padding:4px; flex:0 0 auto}
.spv-bar .ico{width:18px; height:18px}
.spv-rate{font-size:11.5px; font-weight:900; min-width:26px; text-align:center}
.spv-t{font-size:10.5px; font-weight:700; direction:ltr; flex:0 0 auto}
.spv-seek{flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:99px;
  background:rgba(255,255,255,.3); outline:none; padding:0; border:none; backdrop-filter:none}
.spv-seek::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--accent); border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.5)}
.stv-unmute{position:absolute; bottom:22%; left:50%; transform:translateX(-50%); z-index:7; cursor:pointer;
  background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.3); color:#fff; font-weight:900;
  font-size:13.5px; padding:10px 18px; border-radius:99px; backdrop-filter:blur(8px)}

/* ============ v9: الايموجي المتحرك ============ */
.aem{display:inline-block; line-height:1}
.aem-pulse{animation:stkPulse 1.2s ease-in-out infinite}
.aem-shake{animation:stkShake .8s ease-in-out infinite}
.aem-spin{animation:stkSpin 2.6s linear infinite}
.aem-bounce{animation:stkBounce 1.1s ease-in-out infinite}
.aem-flicker{animation:aemFlicker 1s ease-in-out infinite}
.aem-fly{animation:aemFly 1.6s ease-in-out infinite}
.aem-pop{animation:aemPop .5s ease}
@keyframes aemFlicker{0%,100%{transform:scale(1); filter:brightness(1)}50%{transform:scale(1.18); filter:brightness(1.35)}}
@keyframes aemFly{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(-5px,-6px) rotate(8deg)}}
@keyframes aemPop{from{transform:scale(.4); opacity:0} to{transform:scale(1); opacity:1}}
.emo-btn{border:1.5px dashed var(--gbr2); background:var(--glass); color:var(--accent-soft);
  border-radius:12px; padding:9px 15px; font-family:inherit; font-weight:900; font-size:13px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; margin-top:9px}
.emo-mini{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  cursor:pointer; font-size:20px; background:var(--glass); border:1.5px solid var(--gbr)}
.emo-grid{display:grid; grid-template-columns:repeat(8,1fr); gap:4px; margin-top:8px}
.emo-grid button{border:none; background:transparent; font-size:25px; padding:7px 2px; cursor:pointer;
  border-radius:11px; line-height:1}
.emo-grid button:active{background:var(--glass2); transform:scale(1.25)}
.emo-cat{font-size:12.5px; font-weight:900; color:var(--muted); margin-top:13px}

/* ============ v9: الدردشة العامة + بوت سبيد ============ */
#pubchat.active{display:flex; flex-direction:column}
.pc-body{flex:1; overflow-y:auto; padding:14px 14px 10px; display:flex; flex-direction:column; gap:10px; scrollbar-width:none}
.pc-body::-webkit-scrollbar{display:none}
.pc{display:flex; gap:9px; align-items:flex-start}
.pc .ava{width:38px; height:38px; cursor:pointer}
.pc-b{max-width:80%; background:var(--glass); border:1px solid var(--gbr); border-radius:16px;
  border-start-start-radius:5px; padding:9px 13px; backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.pc-b b{font-size:12.5px; font-weight:900; display:flex; align-items:center; gap:4px; cursor:pointer}
.pc-b b .badge{width:13px; height:13px}
.pc-b p{font-size:13.5px; line-height:1.75; margin-top:3px; word-wrap:break-word; white-space:pre-wrap}
.pc-b time{display:block; font-size:9.5px; color:var(--muted2); margin-top:3px}
.pc.mine{flex-direction:row-reverse}
.pc.mine .pc-b{background:linear-gradient(135deg, color-mix(in srgb, var(--hot) 30%, var(--glass)), var(--glass));
  border-color:color-mix(in srgb, var(--accent) 45%, transparent); border-start-start-radius:16px; border-start-end-radius:5px}
.pc-rep{font-size:10.5px; color:var(--muted2); border-inline-start:2.5px solid var(--accent);
  padding-inline-start:7px; margin-bottom:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bot-msg{max-width:88%; align-self:flex-start; background:var(--glass2); border:1px solid var(--gbr2);
  border-radius:17px; padding:11px 14px; backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.bot-head{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:900; color:var(--accent-soft)}
.bot-head .ico{width:15px; height:15px}
.bot-msg p{font-size:13.5px; line-height:1.85; margin-top:5px; white-space:pre-wrap}
.bot-msg time{display:block; font-size:9.5px; color:var(--muted2); margin-top:4px}
.bot-vip{position:relative; border:none; background:var(--glass2)}
.bot-vip::before{content:''; position:absolute; inset:-1.5px; border-radius:18px; z-index:-1;
  background:linear-gradient(90deg,#ffd166,#ff2e51,#8b5cf6,#2ea6ff,#ffd166);
  background-size:300% 100%; animation:vipFlow 3s linear infinite}
@keyframes vipFlow{to{background-position:300% 0}}

/* ============ v9: الملف الموسع + المؤثرات ============ */
.pf-meta{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:7px;
  color:var(--muted); font-size:12.5px; font-weight:700}
.pf-meta a{color:var(--accent-soft); text-decoration:none}
select{appearance:none; -webkit-appearance:none}
.fx-conf{position:absolute; inset:0; pointer-events:none; z-index:95}
.fx-conf i{position:absolute; bottom:105px; width:9px; height:14px; border-radius:3px;
  animation:confUp var(--d) cubic-bezier(.2,.7,.3,1) forwards}
@keyframes confUp{to{transform:translate(calc(var(--x) * 150px), -62vh) rotate(760deg); opacity:0}}

/* ============ v10: إصلاح بوكس الدردشة المخفي ============ */
#chat.active, #pubchat.active{padding-bottom:94px}

/* شريط تقدم الرفع */
#upWrap{position:absolute; top:0; inset-inline:0; z-index:120; height:38px; display:flex;
  align-items:center; justify-content:center; gap:8px;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border-bottom:1px solid var(--gbr)}
#upFill{position:absolute; top:0; inset-inline-start:0; height:3.5px; width:0;
  background:linear-gradient(90deg, var(--hot), var(--accent-soft)); transition:width .15s;
  border-radius:0 99px 99px 0; box-shadow:0 0 10px color-mix(in srgb, var(--accent) 60%, transparent)}
#upTxt{font-size:12.5px; font-weight:900; color:var(--accent-soft)}

/* صور الدردشة */
.pc-img{display:block; max-width:230px; max-height:280px; border-radius:14px; margin-top:7px;
  cursor:pointer; border:1px solid var(--gbr)}
.msg .pc-img{max-width:210px}

/* أغلفة القروبات والصفحات */
.ent-cover{height:150px; position:relative;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, var(--bg)), var(--bg2))}
.ent-cover img{width:100%; height:100%; object-fit:cover}
.ent-cover::after{content:''; position:absolute; inset:0;
  background:linear-gradient(to top, var(--bg) 2%, transparent 60%)}
.pf-ava .in .ico{width:38px; height:38px}
.ent-edit{position:absolute; top:12px; inset-inline-start:12px; z-index:3; width:38px; height:38px;
  border-radius:12px; display:grid; place-items:center; cursor:pointer; color:#fff;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(8px)}
.ent-edit .ico{width:17px; height:17px}
.cat-chip{display:inline-flex; align-items:center; gap:5px; margin-top:8px; font-size:12px;
  font-weight:800; color:var(--accent-soft); background:var(--like-bg);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding:5px 13px; border-radius:99px}

/* ============ v11: أداة قص الصور ============ */
.cropov{position:absolute; inset:0; z-index:130; background:rgba(0,0,0,.92); display:none;
  flex-direction:column; backdrop-filter:blur(6px)}
.cropov.show{display:flex}
.crop-top{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; color:#fff}
.crop-top b{font-weight:900; font-size:15px}
.crop-top span{cursor:pointer; display:inline-flex; padding:5px}
.crop-stage{flex:1; display:grid; place-items:center; padding:10px}
.crop-view{position:relative; overflow:hidden; border-radius:18px; border:2px solid rgba(255,255,255,.35);
  box-shadow:0 0 0 2000px rgba(0,0,0,.55); touch-action:none; background:#111}
.crop-view.avatar{width:80vw; max-width:340px; aspect-ratio:1; border-radius:50%}
.crop-view.cover{width:92vw; max-width:430px; aspect-ratio:1200/440}
.crop-view img{position:absolute; top:50%; left:50%; max-width:none; user-select:none;
  -webkit-user-drag:none; pointer-events:none}
.crop-tools{padding:10px 18px calc(16px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:12px}
.crop-tools input[type=range]{-webkit-appearance:none; appearance:none; height:5px; border-radius:99px;
  background:rgba(255,255,255,.28); padding:0; border:none}
.crop-tools input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px;
  border-radius:50%; background:var(--accent); border:2.5px solid #fff}
.crop-row{display:flex; gap:9px}
.crop-row button{flex:1; border:none; cursor:pointer; border-radius:13px; padding:13px;
  font-family:inherit; font-weight:900; font-size:14px}
.crop-row .rot{background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.25)}
.crop-row .ok{background:linear-gradient(135deg,var(--hot),var(--accent-deep)); color:var(--on-accent);
  box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent)}

/* ============ v11: قوة الباسورد + اقتراحات اليوزر ============ */
.pw-meter{display:flex; align-items:center; gap:5px; margin-top:8px}
.pw-meter i{flex:1; height:5px; border-radius:99px; background:var(--gbr2); transition:.25s}
.pw-meter b{font-size:11px; font-weight:900; min-width:76px; text-align:left; direction:ltr; color:var(--muted)}
.pw-meter[data-s="1"] i:nth-child(-n+1){background:#ff4d5e}
.pw-meter[data-s="2"] i:nth-child(-n+2){background:#ff9f2e}
.pw-meter[data-s="3"] i:nth-child(-n+3){background:#e8d13a}
.pw-meter[data-s="4"] i:nth-child(-n+4){background:#22c55e}
.pw-meter[data-s="1"] b{color:#ff4d5e}.pw-meter[data-s="2"] b{color:#ff9f2e}
.pw-meter[data-s="3"] b{color:#e8d13a}.pw-meter[data-s="4"] b{color:#22c55e}
.usug{display:flex; gap:7px; flex-wrap:wrap; margin-top:7px}
.usug span{cursor:pointer; font-size:12px; font-weight:800; direction:ltr; padding:6px 12px;
  border-radius:99px; background:var(--glass2); border:1.5px solid var(--gbr2); color:var(--accent-soft)}

/* ============ v11: حزم GIF + الشحن + اللافتة ============ */
.gif-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:9px}
.gif-grid img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; cursor:pointer;
  border:1.5px solid var(--gbr); background:var(--glass)}
.gif-tabs{display:flex; gap:7px; overflow-x:auto; padding:4px 0; scrollbar-width:none}
.gif-tabs::-webkit-scrollbar{display:none}
.gif-tabs button{flex:0 0 auto; border:1.5px solid var(--gbr); background:var(--glass); color:var(--muted);
  border-radius:99px; padding:8px 15px; font-family:inherit; font-weight:800; font-size:12.5px; cursor:pointer}
.gif-tabs button.active{border-color:var(--accent); color:var(--accent-soft); background:var(--like-bg)}
.pack-card{margin:0 0 12px; padding:12px; border-radius:15px; background:var(--glass); border:1px solid var(--gbr)}
.pack-card .ph{display:flex; justify-content:space-between; align-items:center; font-weight:900; font-size:14px}
.pack-card .ph .uacts button{padding:7px}
.pack-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:9px}
.pack-grid .pgi{position:relative}
.pack-grid img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px}
.pack-grid .x{position:absolute; top:-5px; inset-inline-start:-5px; width:20px; height:20px; border-radius:50%;
  background:#ff4d5e; color:#fff; display:grid; place-items:center; font-size:11px; cursor:pointer; font-weight:900}
.buy-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:10px}
.buy-card{padding:14px 6px; border-radius:16px; text-align:center; cursor:pointer;
  background:var(--glass); border:1.5px solid var(--gbr); transition:.2s}
.buy-card:active{transform:scale(.95)}
.buy-card b{display:block; font-size:17px; font-weight:900; color:var(--gold)}
.buy-card small{display:block; color:var(--muted); font-size:11px; margin-top:4px; font-weight:700}
.ref-big{font-size:24px; font-weight:900; letter-spacing:2px; direction:ltr; text-align:center;
  color:var(--accent-soft); background:var(--glass2); border:1.5px dashed var(--gbr2);
  border-radius:14px; padding:14px; margin:12px 0}
#siteBanner{margin:10px 16px 0; padding:11px 14px; border-radius:14px; font-size:13px; font-weight:800;
  color:var(--accent-soft); background:var(--like-bg);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); text-align:center; line-height:1.7}
#admin .tabs-bar{overflow-x:auto; justify-content:flex-start; scrollbar-width:none}
#admin .tabs-bar::-webkit-scrollbar{display:none}
#admin .tabs-bar button{flex:0 0 auto; padding:9px 15px}
.set-row{display:flex; justify-content:space-between; align-items:center; margin:0 16px 9px; padding:13px 15px;
  border-radius:15px; background:var(--glass); border:1px solid var(--gbr)}
.set-row b{font-size:13.5px; font-weight:900}
.set-row small{display:block; color:var(--muted); font-size:11px; margin-top:2px}
.sw{width:46px; height:26px; border-radius:99px; background:var(--gbr2); position:relative; cursor:pointer;
  transition:.25s; flex:0 0 auto}
.sw::after{content:''; position:absolute; top:3px; inset-inline-start:3px; width:20px; height:20px;
  border-radius:50%; background:#fff; transition:.25s}
.sw.on{background:linear-gradient(135deg,var(--hot),var(--accent-deep))}
.sw.on::after{inset-inline-start:23px}

/* ============ v12: المذياع 🕌 ============ */
.radio-bar{position:absolute; bottom:92px; inset-inline:16px; z-index:29; display:flex; align-items:center;
  gap:10px; padding:10px 14px; border-radius:18px;
  background:color-mix(in srgb, var(--bg2) 80%, transparent); border:1px solid var(--gbr2);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:var(--shadow)}
.radio-bar .eq{display:flex; align-items:flex-end; gap:2.5px; height:18px; flex:0 0 auto}
.radio-bar .eq i{width:3.5px; border-radius:99px; background:linear-gradient(to top,var(--hot),var(--accent-soft));
  animation:eqB 1s ease-in-out infinite}
.radio-bar .eq i:nth-child(1){height:40%; animation-delay:0s}
.radio-bar .eq i:nth-child(2){height:90%; animation-delay:.2s}
.radio-bar .eq i:nth-child(3){height:60%; animation-delay:.4s}
.radio-bar .eq i:nth-child(4){height:100%; animation-delay:.1s}
.radio-bar.paused .eq i{animation-play-state:paused; height:25%}
@keyframes eqB{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.radio-bar .rt{flex:1; min-width:0}
.radio-bar .rt b{display:block; font-size:12.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.radio-bar .rt small{color:var(--accent-soft); font-size:10px; font-weight:800}
.radio-bar .rbtn{width:38px; height:38px; border-radius:13px; display:grid; place-items:center; cursor:pointer;
  color:var(--on-accent); background:linear-gradient(135deg,var(--hot),var(--accent-deep)); flex:0 0 auto}
.radio-bar .rbtn .ico{width:17px; height:17px}
.radio-bar .rx{color:var(--muted2); cursor:pointer; display:inline-flex; padding:4px; flex:0 0 auto}
#radioFrame{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}

/* ============ v12: الروم الصوتي 🎙 ============ */
.voice-bar{margin:10px 14px 0; padding:11px 13px; border-radius:16px; background:var(--glass);
  border:1px solid var(--gbr); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.voice-top{display:flex; align-items:center; gap:8px; font-weight:900; font-size:13px}
.voice-top .live{width:8px; height:8px; border-radius:50%; background:#22c55e; animation:stkPulse 1.4s infinite}
.voice-avas{display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; min-height:4px}
.voice-avas .ava{width:36px; height:36px}
.voice-acts{display:flex; gap:8px; margin-top:10px}
.voice-acts button{flex:1; border:none; cursor:pointer; border-radius:12px; padding:10px;
  font-family:inherit; font-weight:900; font-size:12.5px}
.voice-acts .vj{background:linear-gradient(135deg,#22c55e,#0a8f4c); color:#fff}
.voice-acts .vm{background:var(--glass2); color:var(--text); border:1px solid var(--gbr)}
.voice-acts .vm.off{color:#ff6b81; border-color:rgba(255,107,129,.4)}
.voice-acts .vl{background:var(--glass2); color:#ff6b81; border:1px solid rgba(255,107,129,.4)}

/* ============ v12: الهدايا 🎁 ============ */
.gift-e{display:inline-block; line-height:1}
.gift-float{animation:gFloat 2.4s ease-in-out infinite}
.gift-pulse{animation:stkPulse 1.1s ease-in-out infinite}
.gift-flicker{animation:aemFlicker .9s ease-in-out infinite}
.gift-shake{animation:stkShake .7s ease-in-out infinite}
.gift-fly{animation:aemFly 1.5s ease-in-out infinite}
.gift-bounce{animation:stkBounce 1s ease-in-out infinite}
.gift-spin{animation:gSpin 3s ease-in-out infinite}
@keyframes gFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}
@keyframes gSpin{0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg)}}
.gshelf{display:flex; gap:10px; overflow-x:auto; padding:10px 16px 4px; scrollbar-width:none}
.gshelf::-webkit-scrollbar{display:none}
.gitem{flex:0 0 auto; width:74px; text-align:center; cursor:pointer; padding:10px 4px 8px;
  border-radius:16px; background:var(--glass); border:1.5px solid var(--gbr); position:relative}
.gitem .gift-e{font-size:33px}
.gitem small{display:block; font-size:9.5px; font-weight:800; color:var(--muted); margin-top:5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gitem .sale{position:absolute; top:-7px; inset-inline-start:-4px; font-size:9px; font-weight:900;
  background:linear-gradient(135deg,#ffd166,#c98a12); color:#241a02; border-radius:99px; padding:2px 7px}
.gitem.t2{border-color:rgba(46,166,255,.5)} .gitem.t3{border-color:rgba(139,92,246,.55)}
.gitem.t4{border-color:rgba(255,209,102,.65); box-shadow:0 0 14px rgba(255,209,102,.25)}
.gcat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:10px}
.gcat{padding:13px 4px; border-radius:16px; text-align:center; cursor:pointer;
  background:var(--glass); border:1.5px solid var(--gbr); transition:.2s}
.gcat:active{transform:scale(.94)}
.gcat .gift-e{font-size:31px}
.gcat b{display:block; font-size:11px; font-weight:900; margin-top:6px}
.gcat small{display:block; color:var(--gold); font-size:11px; font-weight:900; margin-top:3px}
.gm-row{display:flex; align-items:center; gap:11px; margin:0 14px 9px; padding:11px 13px; border-radius:16px;
  background:var(--glass); border:1px solid var(--gbr)}
.gm-row .gift-e{font-size:31px; flex:0 0 auto}
.gm-row .meta{flex:1; min-width:0}
.gm-row .meta b{font-size:13px; font-weight:900; display:block}
.gm-row .meta small{color:var(--muted); font-size:11px}

/* ============ v13: 13 ثيم جديد (المجموع 20) ============ */
html[data-theme="inferno"]{--accent:#ff3d00;--accent-soft:#ffab8a;--accent-deep:#7a1400;--hot:#ff6a2e;--heart:#ff3d00;--like-bg:rgba(255,61,0,.15);--aura1:#ff3d00;--aura2:#ffd000;--bg:#120500;--bg2:#200b02}
html[data-theme="oceanic"]{--accent:#00b4d8;--accent-soft:#90e0ef;--accent-deep:#023e58;--hot:#33c5e0;--heart:#00b4d8;--like-bg:rgba(0,180,216,.15);--aura1:#0077b6;--aura2:#00e5c0;--bg:#020d14;--bg2:#06202e}
html[data-theme="sakura"]{--accent:#ff5c8a;--accent-soft:#ffc2d4;--accent-deep:#8a1638;--hot:#ff7ca3;--heart:#ff5c8a;--like-bg:rgba(255,92,138,.15);--aura1:#ff5c8a;--aura2:#b388ff;--bg:#140510;--bg2:#230a1c}
html[data-theme="matrix"]{--accent:#00ff6a;--accent-soft:#8affc0;--accent-deep:#005a26;--hot:#2effa0;--heart:#00ff6a;--on-accent:#02120a;--like-bg:rgba(0,255,106,.13);--aura1:#00ff6a;--aura2:#00ffe1;--bg:#020a05;--bg2:#04160b}
html[data-theme="galaxy"]{--accent:#9d4edd;--accent-soft:#d0a2f7;--accent-deep:#3c096c;--hot:#b866ff;--heart:#9d4edd;--like-bg:rgba(157,78,221,.16);--aura1:#7b2cbf;--aura2:#4361ee;--bg:#070312;--bg2:#100826}
html[data-theme="sunset"]{--accent:#ff6d3a;--accent-soft:#ffc49b;--accent-deep:#7a2200;--hot:#ff8c5a;--heart:#ff4d6d;--like-bg:rgba(255,109,58,.15);--aura1:#ff4d6d;--aura2:#ffb703;--bg:#140705;--bg2:#22100a}
html[data-theme="ice"]{--accent:#48cae4;--accent-soft:#c9f3ff;--accent-deep:#0a4a63;--hot:#7addf0;--heart:#48cae4;--like-bg:rgba(72,202,228,.14);--aura1:#90e0ef;--aura2:#c8b6ff;--bg:#050b12;--bg2:#0b1826}
html[data-theme="royal"]{--accent:#c9a227;--accent-soft:#ffe08a;--accent-deep:#4a2c8f;--hot:#e0b83e;--heart:#c9a227;--on-accent:#1c1202;--like-bg:rgba(201,162,39,.15);--aura1:#7b2cbf;--aura2:#c9a227;--bg:#0a0614;--bg2:#160d26}
html[data-theme="blood"]{--accent:#d90429;--accent-soft:#ff8fa3;--accent-deep:#590016;--hot:#ef233c;--heart:#d90429;--like-bg:rgba(217,4,41,.17);--aura1:#d90429;--aura2:#3a0ca3;--bg:#0d0104;--bg2:#1c030a}
html[data-theme="mint"]{--bg:#eafaf3;--bg2:#f6fffb;--text:#0f2e22;--muted:#3f6a58;--muted2:#6f9484;--accent:#0a9d6c;--accent-soft:#067a53;--accent-deep:#045c3e;--hot:#12b97f;--heart:#e0245e;--like-bg:rgba(10,157,108,.10);--glass:rgba(255,255,255,.66);--glass2:rgba(255,255,255,.9);--gbr:rgba(10,90,60,.16);--gbr2:rgba(10,90,60,.3);--card:var(--glass);--card2:var(--glass2);--line:var(--gbr);--line2:var(--gbr2);--shadow:0 10px 26px rgba(10,120,80,.14);--aura1:#7ef0c0;--aura2:#8fd0ff}
html[data-theme="carbon"]{--accent:#e0e0e0;--accent-soft:#ffffff;--accent-deep:#5c5c66;--hot:#f4f4f4;--heart:#ff3b5c;--on-accent:#101014;--like-bg:rgba(255,255,255,.10);--aura1:#8d99ae;--aura2:#3a3a44;--bg:#08080c;--bg2:#121218}
html[data-theme="neoncity"]{--accent:#ff2ec8;--accent-soft:#ff9de8;--accent-deep:#2b0a5e;--hot:#ff5cd6;--heart:#ff2ec8;--like-bg:rgba(255,46,200,.16);--aura1:#ff2ec8;--aura2:#00e5ff;--bg:#07021a;--bg2:#0f0630}
html[data-theme="rgbflow"]{--accent:#ff2e51;--accent-soft:#ffd1da;--accent-deep:#5c1030;--hot:#ff5c7a;--heart:#ff2e51;--like-bg:rgba(255,46,81,.15);--aura1:#ff004c;--aura2:#00b3ff;--bg:#0a0410;--bg2:#150a20}

/* خلفيات نيون خاصة */
html[data-theme="neoncity"] .phone{background-image:
  linear-gradient(rgba(255,46,200,.06) 1px, transparent 1px),
  linear-gradient(90deg, rgba(0,229,255,.06) 1px, transparent 1px),
  radial-gradient(60% 40% at 50% 118%, rgba(255,46,200,.35), transparent 60%),
  linear-gradient(var(--bg), var(--bg)); background-size:34px 34px, 34px 34px, 100% 100%, 100% 100%}
html[data-theme="matrix"] .phone{background-image:
  repeating-linear-gradient(0deg, rgba(0,255,106,.045) 0 2px, transparent 2px 22px),
  radial-gradient(70% 45% at 50% -10%, rgba(0,255,106,.16), transparent 60%),
  linear-gradient(var(--bg), var(--bg))}
html[data-theme="galaxy"] .phone{background-image:
  radial-gradient(1.5px 1.5px at 18% 22%, #fff9, transparent 60%),
  radial-gradient(1.5px 1.5px at 72% 12%, #fff8, transparent 60%),
  radial-gradient(2px 2px at 84% 64%, #fff7, transparent 60%),
  radial-gradient(1.5px 1.5px at 30% 78%, #fff8, transparent 60%),
  radial-gradient(60% 45% at 70% 20%, rgba(123,44,191,.30), transparent 65%),
  linear-gradient(var(--bg), var(--bg))}
html[data-theme="rgbflow"] .phone::before{background:conic-gradient(#ff004c,#ff8a00,#ffe600,#00ff85,#00b3ff,#8a2be2,#ff004c); animation:aura 16s ease-in-out infinite alternate, frameHue 6s linear infinite}
html[data-theme="rgbflow"] .phone::after{background:conic-gradient(#00b3ff,#8a2be2,#ff004c,#ff8a00,#00ff85,#00b3ff); animation:aura 16s ease-in-out infinite alternate, frameHue 6s linear infinite reverse}
html[data-theme="rgbflow"] .big-btn, html[data-theme="rgbflow"] .go, html[data-theme="rgbflow"] .nav .fab,
html[data-theme="rgbflow"] .btn.pink, html[data-theme="rgbflow"] .fbtn:not(.off), html[data-theme="rgbflow"] .send{
  background:linear-gradient(270deg,#ff004c,#ff8a00,#ffe600,#00ff85,#00b3ff,#8a2be2,#ff004c);
  background-size:1000% 100%; animation:nameFlow 7s linear infinite; color:#fff}

/* ============ v13: فقاعة بوت سبيد بثيمات (حصراً بلا RGB) ============ */
.bot-vip::before{display:none}
.bot-msg{border:1.5px solid var(--gbr2)}
.bot-th-gold{background:linear-gradient(135deg, rgba(255,209,102,.16), var(--glass2)); border-color:rgba(255,209,102,.55)}
.bot-th-gold .bot-head{color:#ffd166}
.bot-th-fire{background:linear-gradient(135deg, rgba(255,80,20,.16), var(--glass2)); border-color:rgba(255,110,40,.55)}
.bot-th-fire .bot-head{color:#ff8a5a}
.bot-th-ocean{background:linear-gradient(135deg, rgba(0,180,216,.15), var(--glass2)); border-color:rgba(0,180,216,.55)}
.bot-th-ocean .bot-head{color:#63d6ef}
.bot-th-violet{background:linear-gradient(135deg, rgba(157,78,221,.16), var(--glass2)); border-color:rgba(157,78,221,.55)}
.bot-th-violet .bot-head{color:#c99cf5}
.bot-th-emerald{background:linear-gradient(135deg, rgba(16,196,106,.15), var(--glass2)); border-color:rgba(16,196,106,.55)}
.bot-th-emerald .bot-head{color:#5fe0a0}
.bot-th-mono{background:var(--glass2); border-color:var(--gbr2)}
.bot-th-mono .bot-head{color:var(--text)}

/* ============ v13: أدوات الرسائل + المشغل + الروم ============ */
.pc-acts{display:none; gap:6px; margin-top:8px; flex-wrap:wrap}
.pc-b.sel .pc-acts, .bot-msg.sel .pc-acts{display:flex}
.pc-acts span{display:inline-flex; align-items:center; gap:4px; cursor:pointer; font-size:11px; font-weight:900;
  color:var(--muted); background:var(--glass2); border:1px solid var(--gbr); padding:6px 11px; border-radius:99px}
.pc-acts span .ico{width:13px; height:13px}
.pc-acts .del{color:#ff6b81; border-color:rgba(255,107,129,.4)}
.edited{font-size:9px; color:var(--muted2); font-weight:700}
.spv-load{position:absolute; inset:0; display:none; place-items:center; z-index:5; pointer-events:none}
.spv.buffering .spv-load{display:grid}
.spv-load i{width:44px; height:44px; border-radius:50%; border:3.5px solid rgba(255,255,255,.25);
  border-top-color:var(--accent); animation:stkSpin .8s linear infinite}
.spv-skip{position:absolute; top:50%; transform:translateY(-50%); z-index:6; color:#fff; font-weight:900;
  font-size:13px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.3); padding:9px 14px;
  border-radius:99px; pointer-events:none; animation:aemPop .5s ease}
.gc-row{position:sticky; bottom:0; display:flex; gap:8px; padding:10px 2px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.gc-row input{flex:1; border-radius:99px; padding:12px 17px}

/* الروم الصوتي — التصميم الزجاجي الجديد */
.voice-bar{padding:14px}
.v-head{display:flex; align-items:center; gap:9px}
.v-head .vic{width:40px; height:40px; border-radius:14px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,#22c55e,#0a8f4c); box-shadow:0 6px 16px rgba(34,197,94,.35), inset 0 1px 0 rgba(255,255,255,.35)}
.v-head .vic .ico{width:19px; height:19px}
.v-head b{font-size:14px; font-weight:900; flex:1}
.v-count{font-size:11px; font-weight:900; color:var(--accent-soft); background:var(--like-bg);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding:4px 11px; border-radius:99px}
.v-tiles{display:flex; gap:12px; flex-wrap:wrap; margin-top:13px; min-height:8px}
.v-tile{text-align:center; width:62px}
.v-tile .ava{width:52px; height:52px; margin:0 auto; position:relative}
.v-tile.on .ava::after{content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2.5px solid #22c55e; animation:vRing 1.6s ease-out infinite}
@keyframes vRing{0%{transform:scale(.85); opacity:1}100%{transform:scale(1.25); opacity:0}}
.v-tile small{display:block; font-size:9.5px; font-weight:800; color:var(--muted); margin-top:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.v-ctrl{display:flex; gap:10px; margin-top:14px; justify-content:center}
.v-btn{width:52px; height:52px; border-radius:50%; border:none; cursor:pointer; display:grid; place-items:center;
  color:var(--text); background:var(--glass2); border:1.5px solid var(--gbr2);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); transition:.2s}
.v-btn:active{transform:scale(.9)}
.v-btn .ico{width:21px; height:21px}
.v-btn.join{width:auto; border-radius:99px; padding:0 26px; color:#fff; font-family:inherit; font-weight:900;
  font-size:14px; display:inline-flex; gap:8px; align-items:center;
  background:linear-gradient(135deg,#22c55e,#0a8f4c); border:1px solid rgba(255,255,255,.3);
  box-shadow:0 10px 24px rgba(34,197,94,.35), inset 0 1px 0 rgba(255,255,255,.35)}
.v-btn.mute-on{color:#ff6b81; border-color:rgba(255,107,129,.5); background:rgba(255,107,129,.1)}
.v-btn.leave{color:#fff; background:linear-gradient(135deg,#ff4d5e,#8a0f22); border:1px solid rgba(255,255,255,.25)}

/* المحفظة */
.wallet-card{margin:10px 16px; padding:16px; border-radius:20px; background:var(--glass);
  border:1px solid var(--gbr); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.earn-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px}
.earn-grid .ec{padding:10px 4px; border-radius:13px; text-align:center; background:var(--glass2); border:1px solid var(--gbr)}
.earn-grid .ec b{display:block; font-size:15px; font-weight:900; color:var(--accent-soft)}
.earn-grid .ec small{font-size:10px; color:var(--muted); font-weight:700}
