/* ╔══════════════════════════════════════════╗
   ║  WOW EDU — Professional App UI v2.0     ║
   ║  Modern, Native-feel, Material-inspired  ║
   ╚══════════════════════════════════════════╝ */

:root{
  --pr:#6366f1;--pr-h:#818cf8;--pr-d:#4f46e5;
  --sc:#ec4899;--ok:#10b981;--warn:#f59e0b;--err:#ef4444;
  --bg:#f8fafc;--surface:#ffffff;--tx:#0f172a;--tx2:#475569;--tx3:#94a3b8;
  --border:#e2e8f0;--border-lt:#f1f5f9;
  --grad:linear-gradient(135deg,#6366f1,#8b5cf6);
  --grad-warm:linear-gradient(135deg,#f59e0b,#ef4444);
  --grad-ocean:linear-gradient(135deg,#0ea5e9,#6366f1);
  --sh-sm:0 1px 2px rgba(0,0,0,.05);
  --sh:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --sh-md:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);
  --sh-lg:0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05);
  --sh-xl:0 20px 25px rgba(0,0,0,.1),0 8px 10px rgba(0,0,0,.04);
  --r-sm:8px;--r:12px;--r-md:16px;--r-lg:20px;--r-xl:28px;--r-full:9999px;
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.4,0,.2,1);
  --font:'Tajawal','Segoe UI',system-ui,-apple-system,sans-serif;
  --nav-h:64px;--topbar-h:56px;
}

[data-theme=dark]{
  --bg:#0b0f1a;--surface:#131a2e;--tx:#e2e8f0;--tx2:#94a3b8;--tx3:#64748b;
  --border:#1e293b;--border-lt:#162032;
  --sh-sm:0 1px 2px rgba(0,0,0,.3);
  --sh:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --sh-md:0 4px 6px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.3);
  --sh-lg:0 10px 15px rgba(0,0,0,.4),0 4px 6px rgba(0,0,0,.3);
  --sh-xl:0 20px 25px rgba(0,0,0,.5),0 8px 10px rgba(0,0,0,.3);
}

[data-skin=noon]{--pr:#f59e0b;--pr-h:#fbbf24;--pr-d:#d97706;--grad:linear-gradient(135deg,#f59e0b,#fbbf24)}
[data-skin=darkpro]{--pr:#0ea5e9;--pr-h:#38bdf8;--pr-d:#0284c7;--grad:linear-gradient(135deg,#0ea5e9,#6366f1)}
[data-skin=neon]{--pr:#8b5cf6;--pr-h:#a78bfa;--pr-d:#7c3aed;--grad:linear-gradient(135deg,#8b5cf6,#ec4899)}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--tx);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));transition:background .3s,color .2s}
img{max-width:100%;height:auto;display:block}
a{color:var(--pr);text-decoration:none}
input[type=file]{display:none}

/* SCROLLBAR */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--tx3)}

/* ═══════════════════════════════════════════
   LOADING SCREEN
   ═══════════════════════════════════════════ */
#LD{position:fixed;inset:0;z-index:9999;background:linear-gradient(160deg,#0f172a 0%,#1e1b4b 50%,#312e81 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .4s ease}
#LD::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 70%,rgba(99,102,241,.15),transparent 60%),radial-gradient(circle at 80% 20%,rgba(236,72,153,.1),transparent 50%)}
#LD.hide{opacity:0;pointer-events:none}
.ld-logo{font-size:96px;font-weight:900;background:linear-gradient(135deg,#c7d2fe,#e0e7ff,#ffffff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative;z-index:1;letter-spacing:-4px;line-height:1}
.ld-spin{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--pr-h);border-radius:50%;animation:spin .8s linear infinite;position:relative;z-index:1}
.ld-txt{color:rgba(255,255,255,.4);font-size:13px;font-weight:400;letter-spacing:2px;text-transform:uppercase;position:relative;z-index:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════
   AUTH SCREEN
   ═══════════════════════════════════════════ */
#AUTH{position:fixed;inset:0;background:linear-gradient(160deg,#0f172a,#1e1b4b);display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px;z-index:8000}
#AUTH.on{display:flex}
.auth-card{width:100%;max-width:420px;background:var(--surface);border-radius:var(--r-xl);padding:48px 32px 36px;box-shadow:var(--sh-xl);text-align:center;animation:fadeUp .5s var(--ease-out)}
.auth-logo{font-size:72px;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-3px;line-height:1}
.auth-edu-badge{font-size:13px;color:var(--tx2);margin:8px 0 4px;font-weight:500}
.auth-sub{color:var(--tx2);font-size:14px;margin-bottom:28px;line-height:1.8}
.auth-btn{width:100%;padding:16px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-md);font-family:var(--font);font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:all .2s var(--ease-inout);color:var(--tx);box-shadow:var(--sh)}
.auth-btn:hover{border-color:var(--pr);box-shadow:var(--sh-md);transform:translateY(-1px)}
.auth-btn:active{transform:translateY(0) scale(.98)}
.auth-err{color:var(--err);font-size:12px;margin-top:12px;min-height:16px}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════════════
   TOP BAR — Native App Style
   ═══════════════════════════════════════════ */
.topbar{position:sticky;top:0;z-index:200;height:var(--topbar-h);background:var(--surface);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid var(--border-lt);box-shadow:var(--sh-sm);transition:background .3s}
.tbar-logo{font-size:24px;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-1.5px;cursor:pointer}
.tbar-right{display:flex;gap:4px;align-items:center}
.tbar-btn{width:40px;height:40px;border-radius:var(--r-full);border:none;cursor:pointer;background:transparent;color:var(--tx2);font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .15s var(--ease-inout);position:relative}
.tbar-btn:hover{background:var(--border-lt);color:var(--tx)}
.tbar-btn:active{transform:scale(.9);background:var(--border)}
.tbar-badge{position:absolute;top:6px;left:6px;min-width:16px;height:16px;background:var(--err);color:#fff;font-size:9px;font-weight:800;border-radius:var(--r-full);display:none;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--surface)}
.tbar-badge.on{display:flex}
.tbar-av{width:32px;height:32px;border-radius:var(--r-full);cursor:pointer;border:2px solid var(--border);overflow:hidden;background:var(--pr);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff}
.tbar-av img{width:100%;height:100%;object-fit:cover}

/* ═══════════════════════════════════════════
   ANNOUNCEMENT BAR
   ═══════════════════════════════════════════ */
.ann-bar{position:sticky;top:var(--topbar-h);z-index:150;overflow:hidden}
.ann-bar .ann-card-modern{display:flex;align-items:stretch;background:var(--grad);min-height:0;position:relative;overflow:hidden}
.ann-bar .ann-card-modern::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 50%,rgba(255,255,255,.1),transparent 60%)}
.ann-bar .ann-cm-stripe{width:3px;background:rgba(255,255,255,.3);flex-shrink:0}
.ann-bar .ann-cm-body{flex:1;padding:10px 14px}
.ann-bar .ann-cm-title{font-size:13px;font-weight:700;color:#fff}
.ann-bar .ann-cm-sub{font-size:11px;color:rgba(255,255,255,.7)}
.ann-empty{display:flex;align-items:center;justify-content:center;padding:6px 14px;font-size:12px;color:var(--tx3);background:var(--surface);border-bottom:1px solid var(--border-lt)}
.group-ann-box{background:var(--border-lt);border-radius:var(--r);padding:10px;margin:8px 0}

/* ═══════════════════════════════════════════
   PAGES & LAYOUT
   ═══════════════════════════════════════════ */
.pages{max-width:768px;margin:0 auto;padding:12px}
.page{display:none;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s var(--ease-out)}
.page.on{display:block;opacity:1;transform:translateY(0)}
.H{display:none!important}
.W100{width:100%}
.flex1{flex:1;min-width:0}
.row{display:flex;gap:8px;align-items:center}
.col{display:flex;flex-direction:column;gap:6px}

/* ═══════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════ */
.card{background:var(--surface);border-radius:var(--r-md);padding:16px;margin-bottom:12px;box-shadow:var(--sh);border:1px solid var(--border-lt);transition:box-shadow .2s}
.card:hover{box-shadow:var(--sh-md)}
.sec-title{font-size:16px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px}

/* ═══════════════════════════════════════════
   BOTTOM NAV — App Tab Bar
   ═══════════════════════════════════════════ */
.bnav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);z-index:200;background:var(--surface);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-top:1px solid var(--border-lt);display:flex;align-items:stretch;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -1px 8px rgba(0,0,0,.06);transition:transform .3s var(--ease-inout)}
[data-theme=dark] .bnav{border-top-color:rgba(255,255,255,.06)}
.bnav.hide{transform:translateY(100%)}
.bni{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--tx3);font-size:10px;font-weight:600;padding:6px 4px;position:relative;transition:color .2s}
.bni .ic{font-size:22px;transition:all .25s var(--ease-spring)}
.bni.on{color:var(--pr)}
.bni.on .ic{transform:scale(1.08) translateY(-1px)}
.bni::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%) scaleX(0);width:24px;height:3px;border-radius:0 0 3px 3px;background:var(--pr);transition:transform .3s var(--ease-spring)}
.bni.on::before{transform:translateX(-50%) scaleX(1)}
.bni:active{opacity:.7}
.bni-dot{position:absolute;top:6px;right:calc(50% - 16px);width:8px;height:8px;background:var(--err);border-radius:var(--r-full);border:2px solid var(--surface);display:none}
.bni-dot.on{display:block}
.bni-fab{width:52px;height:52px;border-radius:var(--r-md);background:var(--grad);border:none;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;position:absolute;bottom:calc(var(--nav-h)/2 - 10px);left:50%;transform:translateX(-50%);box-shadow:var(--sh-lg);transition:all .2s var(--ease-spring)}
.bni-fab:hover{transform:translateX(-50%) translateY(-2px) scale(1.05);box-shadow:var(--sh-xl)}
.bni-fab:active{transform:translateX(-50%) scale(.95)}

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.btn{padding:10px 20px;background:var(--grad);color:#fff;border:none;border-radius:var(--r);font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .2s var(--ease-inout);box-shadow:var(--sh)}
.btn:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.W100{width:100%}
.btn-sm{padding:7px 14px;font-size:12px}
.btn-out{background:transparent;border:1.5px solid var(--border);color:var(--tx);padding:9px 16px;border-radius:var(--r);font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s}
.btn-out:hover{border-color:var(--pr);color:var(--pr);background:rgba(99,102,241,.04)}
.btn-out:active{transform:scale(.97)}
.icon-btn{width:40px;height:40px;border-radius:var(--r-full);border:none;background:transparent;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .15s;color:var(--tx2);flex-shrink:0}
.icon-btn:hover{background:var(--border-lt);color:var(--tx)}
.icon-btn:active{transform:scale(.9);background:var(--border)}

/* ═══════════════════════════════════════════
   INPUTS
   ═══════════════════════════════════════════ */
.inp{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--r);font-size:14px;font-family:var(--font);color:var(--tx);background:var(--bg);transition:border-color .15s,box-shadow .15s,background .15s;outline:none;-webkit-appearance:none;appearance:none}
.inp:focus{border-color:var(--pr);background:var(--surface);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.inp::placeholder{color:var(--tx3)}
textarea.inp{resize:none;min-height:80px}

/* ═══════════════════════════════════════════
   TOGGLE
   ═══════════════════════════════════════════ */
.toggle{width:44px;height:24px;border-radius:var(--r-full);background:var(--border);cursor:pointer;position:relative;transition:background .2s;border:none;flex-shrink:0}
.toggle.on{background:var(--pr)}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:var(--r-full);background:#fff;transition:transform .2s var(--ease-spring);box-shadow:var(--sh-sm)}
.toggle.on::after{transform:translateX(20px)}

/* ═══════════════════════════════════════════
   CHIPS
   ═══════════════════════════════════════════ */
.chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--r-full);font-size:11px;font-weight:700}
.chip-pr{background:rgba(99,102,241,.08);color:var(--pr)}
.chip-ok{background:rgba(16,185,129,.08);color:var(--ok)}
.chip-err{background:rgba(239,68,68,.08);color:var(--err)}
.chip-warn{background:rgba(245,158,11,.1);color:#b45309}

/* ═══════════════════════════════════════════
   EMPTY / LOADING STATES
   ═══════════════════════════════════════════ */
.empty{text-align:center;padding:48px 20px;color:var(--tx3)}
.empty .ei{font-size:48px;margin-bottom:12px;opacity:.4}
.empty .et{font-size:14px;font-weight:500}
.empty .esub{font-size:13px;color:var(--tx3);margin-top:4px}
.loading{text-align:center;padding:32px}
.spinner{width:28px;height:28px;border:2.5px solid var(--border);border-top-color:var(--pr);border-radius:var(--r-full);animation:spin .8s linear infinite;margin:0 auto 12px}

/* Skeleton loader */
.skeleton{background:linear-gradient(90deg,var(--border-lt) 25%,var(--border) 50%,var(--border-lt) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ═══════════════════════════════════════════
   AVATAR
   ═══════════════════════════════════════════ */
.av{border-radius:var(--r-full);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;background:var(--grad);background-size:cover;background-position:center}
.av img{width:100%;height:100%;object-fit:cover}
.online-dot{width:10px;height:10px;border-radius:var(--r-full);background:var(--ok);border:2px solid var(--surface);position:absolute;bottom:0;left:0}
.online-dot.off{background:var(--tx3)}

/* ═══════════════════════════════════════════
   HOME — App Dashboard
   ═══════════════════════════════════════════ */
.noon-header{background:var(--grad);border-radius:var(--r-lg);padding:18px;margin-bottom:12px;position:relative;overflow:hidden}
.noon-header::before{content:'';position:absolute;top:-40%;right:-20%;width:60%;height:120%;background:radial-gradient(circle,rgba(255,255,255,.1),transparent 60%);pointer-events:none}
.noon-header::after{content:'';position:absolute;bottom:-30%;left:-10%;width:50%;height:80%;background:radial-gradient(circle,rgba(255,255,255,.06),transparent 50%);pointer-events:none}
.noon-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;position:relative;z-index:1}
.noon-user{display:flex;align-items:center;gap:12px;min-width:0}
.noon-name{font-size:18px;font-weight:900;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.noon-sub{font-size:13px;color:rgba(255,255,255,.7);font-weight:400}
.noon-ico{width:36px;height:36px;border-radius:var(--r-full);border:none;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);cursor:pointer;font-size:16px;transition:all .15s}
.noon-ico:hover{background:rgba(255,255,255,.3);transform:scale(1.05)}
.noon-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative;z-index:1}
.noon-stat{background:rgba(255,255,255,.15);backdrop-filter:blur(8px);padding:10px 8px;border-radius:var(--r);text-align:center;border:1px solid rgba(255,255,255,.1);transition:background .15s}
.noon-num{font-size:20px;font-weight:900;color:#fff}
.noon-lbl{font-size:10px;color:rgba(255,255,255,.7);font-weight:600;margin-top:2px}

/* Home tabs */
.noon-tabs{display:flex;gap:4px;background:var(--border-lt);border-radius:var(--r);padding:3px;margin-bottom:12px}
.noon-tab{flex:1;padding:10px 6px;border:none;border-radius:var(--r-sm);background:transparent;font-family:var(--font);font-weight:700;cursor:pointer;color:var(--tx3);font-size:13px;transition:all .2s;min-height:42px}
.noon-tab.active{background:var(--surface);color:var(--tx);box-shadow:var(--sh-sm)}
.noon-tab:focus-visible{outline:2px solid var(--pr);outline-offset:2px}

/* Quick actions */
.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.qa-btn{border:none;background:var(--surface);border-radius:var(--r-md);padding:14px 6px 12px;cursor:pointer;font-size:10px;font-weight:700;color:var(--tx2);display:flex;flex-direction:column;align-items:center;gap:6px;transition:all .2s var(--ease-spring);box-shadow:var(--sh-sm);border:1px solid var(--border-lt);position:relative}
.qa-btn:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:var(--pr)}
.qa-btn:active{transform:translateY(0) scale(.96)}
.qa-btn i{font-size:20px;color:var(--pr)}
.qa-btn:nth-child(1) i{color:#6366f1}.qa-btn:nth-child(2) i{color:#ec4899}.qa-btn:nth-child(3) i{color:#f59e0b}
.qa-btn:nth-child(4) i{color:#10b981}.qa-btn:nth-child(5) i{color:#0ea5e9}.qa-btn:nth-child(6) i{color:#8b5cf6}
.qa-btn:nth-child(7) i{color:#ef4444}.qa-btn:nth-child(8) i{color:#14b8a6}.qa-btn:nth-child(9) i{color:#f97316}
.qa-btn:nth-child(10) i{color:#a855f7}.qa-btn:nth-child(11) i{color:#06b6d4}.qa-btn:nth-child(12) i{color:#e11d48}
.qa-btn:nth-child(13) i{color:#84cc16}.qa-btn:nth-child(14) i{color:#64748b}

/* ═══════════════════════════════════════════
   POST CARD
   ═══════════════════════════════════════════ */
.post{background:var(--surface);border-radius:var(--r-md);padding:16px;margin-bottom:10px;box-shadow:var(--sh);border:1px solid var(--border-lt);animation:fadeUp .3s var(--ease-out)}
.post:hover{box-shadow:var(--sh-md)}
.post-head{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.post-meta{flex:1;min-width:0}
.post-name{font-weight:700;font-size:14px;color:var(--tx);cursor:pointer;display:flex;align-items:center;gap:4px}
.post-name:hover{color:var(--pr)}
.post-time{font-size:11px;color:var(--tx3);margin-top:1px}
.post-more{background:none;border:none;color:var(--tx3);cursor:pointer;font-size:18px;width:32px;height:32px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;transition:all .15s}
.post-more:hover{background:var(--border-lt);color:var(--tx)}
.post-body{font-size:14px;line-height:1.8;margin-bottom:12px;word-break:break-word;white-space:pre-wrap;color:var(--tx)}
.post-img{width:calc(100% + 32px);margin:0 -16px 12px;max-height:400px;object-fit:cover;cursor:pointer;border-radius:0}
.post-video{width:100%;border-radius:var(--r);margin-bottom:12px;max-height:360px}
.post-stats{display:flex;gap:12px;font-size:12px;color:var(--tx3);margin-bottom:8px}
.post-acts{display:flex;border-top:1px solid var(--border-lt);padding-top:6px;margin-top:2px;gap:0}
.pa{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 4px;background:none;border:none;color:var(--tx2);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;border-radius:var(--r-sm);transition:all .15s;position:relative}
.pa:hover{background:var(--border-lt);color:var(--tx)}
.pa.liked{color:var(--err)}
.pa.saved{color:var(--warn)}
.react-fly{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) scale(.8) translateY(6px);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-full);padding:4px 8px;display:flex;gap:1px;opacity:0;visibility:hidden;pointer-events:none;transition:all .2s var(--ease-spring);box-shadow:var(--sh-lg);z-index:50}
.pa:hover .react-fly,.react-fly.show{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) scale(1) translateY(0)}
.react-btn{font-size:20px;cursor:pointer;border-radius:var(--r-full);width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:transform .15s var(--ease-spring)}
.react-btn:hover{transform:scale(1.3)}

/* Post poll */
.post-poll{margin:10px 0;background:var(--bg);border-radius:var(--r);padding:14px}
.poll-q{font-weight:700;margin-bottom:10px;font-size:14px}
.poll-opt{display:flex;align-items:center;padding:10px 12px;background:var(--surface);border-radius:var(--r-sm);margin-bottom:6px;cursor:pointer;position:relative;overflow:hidden;border:1.5px solid var(--border);transition:all .15s}
.poll-opt:hover{border-color:var(--pr)}
.poll-bar{position:absolute;left:0;top:0;bottom:0;background:rgba(99,102,241,.08);transition:width .3s var(--ease-inout)}
.poll-txt{position:relative;z-index:1;flex:1;font-size:13px;font-weight:600}
.poll-pct{position:relative;z-index:1;font-weight:700;font-size:13px;color:var(--pr)}
.poll-total{font-size:11px;color:var(--tx3);margin-top:6px;text-align:center}

/* Comments */
.cmt-box{background:var(--bg);border-radius:0 0 var(--r) var(--r);margin:0 -16px -16px;padding:14px;display:none;border-top:1px solid var(--border-lt)}
.cmt-box.on{display:block}
.cmt{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start}
.cmt-bub{background:var(--surface);border-radius:var(--r);padding:10px 12px;flex:1;border:1px solid var(--border-lt)}
.cmt-name{font-size:12px;font-weight:700;color:var(--pr);margin-bottom:3px}
.cmt-txt{font-size:13px;color:var(--tx2);line-height:1.6}
.cmt-time{font-size:10px;color:var(--tx3);margin-top:4px}
.cmt-inp-row{display:flex;gap:6px;margin-top:10px;align-items:center}
.cmt-inp{flex:1;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-full);padding:10px 14px;font-family:var(--font);font-size:13px;color:var(--tx);outline:none;transition:all .15s}
.cmt-inp:focus{border-color:var(--pr);box-shadow:0 0 0 3px rgba(99,102,241,.08)}
.cmt-send{background:var(--grad);border:none;color:#fff;padding:10px 16px;border-radius:var(--r-full);cursor:pointer;font-size:13px;font-weight:700;white-space:nowrap}

/* ═══════════════════════════════════════════
   PEOPLE PAGE
   ═══════════════════════════════════════════ */
.wa-hdr{background:var(--grad);padding:16px 16px 0}
.wa-hdr-title{color:#fff;font-size:22px;font-weight:900;margin-bottom:10px;letter-spacing:-.5px}
.wa-tabs{display:flex;border-bottom:2px solid rgba(255,255,255,.15)}
.wa-tab{flex:1;padding:10px 6px;text-align:center;color:rgba(255,255,255,.5);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;position:relative;border:none;background:none}
.wa-tab.on{color:#fff}
.wa-tab.on::after{content:'';position:absolute;bottom:-2px;left:20%;right:20%;height:2px;background:#fff;border-radius:2px}
.wa-tbadge{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--pr);border-radius:var(--r-full);min-width:16px;height:16px;font-size:9px;font-weight:800;padding:0 3px;margin-right:3px}
.wa-search{padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--border-lt)}
.wa-body{background:var(--surface);min-height:200px}
.wa-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-lt);cursor:pointer;background:var(--surface);transition:background .1s}
.wa-row:last-child{border-bottom:none}
.wa-row:hover{background:var(--bg)}
.wa-row:active{background:var(--border-lt)}
.wa-row-av{position:relative;flex-shrink:0}
.wa-row-meta{flex:1;min-width:0}
.wa-row-name{font-size:15px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-row-sub{font-size:12px;color:var(--tx2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-row-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.wa-row-time{font-size:11px;color:var(--tx3)}
.wa-row-badge{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-full);background:var(--ok);color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.wa-row-unread{background:rgba(99,102,241,.03)!important}
.wa-row-unread .wa-row-name{font-weight:800;color:var(--pr)}

/* ═══════════════════════════════════════════
   CHAT — WhatsApp Style
   ═══════════════════════════════════════════ */
.chat-grid{display:block}
.chat-side{display:none}
.chat-main{display:flex;flex-direction:column}
.chat-box-wa{flex:1;overflow-y:auto;padding:12px;min-height:50vh;max-height:70vh;display:flex;flex-direction:column;gap:2px;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%239C92AC' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,#f0f2f5,#e5e7eb)}
[data-theme=dark] .chat-box-wa{background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23fff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,#0b1120,#0f172a)}

.wa-msg{max-width:82%;padding:6px 10px 4px;border-radius:12px;position:relative;font-size:14px;line-height:1.55;word-break:break-word;animation:msgIn .2s var(--ease-out);box-shadow:0 1px 1px rgba(0,0,0,.06)}
[data-theme=dark] .wa-msg{box-shadow:0 1px 2px rgba(0,0,0,.3)}
@keyframes msgIn{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.wa-msg.sent{align-self:flex-end;background:#d9fdd3;border-bottom-right-radius:4px}
[data-theme=dark] .wa-msg.sent{background:#005c4b}
.wa-msg.received{align-self:flex-start;background:#fff;border-bottom-left-radius:4px}
[data-theme=dark] .wa-msg.received{background:#202c33}
.wa-msg .msg-text{margin-bottom:2px;white-space:pre-wrap}
.wa-msg .msg-time{font-size:10px;opacity:.5;display:flex;align-items:center;gap:3px;justify-content:flex-end;margin-top:1px}
.wa-msg.sent .msg-time{color:rgba(0,0,0,.35)}
[data-theme=dark] .wa-msg.sent .msg-time{color:rgba(255,255,255,.35)}
.wa-msg.received .msg-time{color:rgba(0,0,0,.3)}
[data-theme=dark] .wa-msg.received .msg-time{color:rgba(255,255,255,.3)}
.wa-msg .msg-status{font-size:11px;margin-left:2px}
.wa-msg .msg-status.sent-tick{color:rgba(0,0,0,.25)}
.wa-msg .msg-status.read-tick{color:#53bdeb}
.wa-msg .msg-reply{background:rgba(0,0,0,.04);border-left:3px solid #06cf9c;border-radius:6px;padding:5px 8px;margin-bottom:5px;font-size:12px;cursor:pointer}
[data-theme=dark] .wa-msg.sent .msg-reply{background:rgba(0,0,0,.12)}
.wa-msg .msg-reply-name{font-weight:700;color:#06cf9c;font-size:11px}
.wa-msg .msg-img{max-width:280px;border-radius:8px;margin:4px -4px;display:block;cursor:pointer}
.wa-msg .msg-audio{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.04);border-radius:var(--r-full);padding:6px 10px;margin:4px -2px;min-width:200px}
.wa-msg .msg-audio audio{flex:1;height:28px;border-radius:var(--r-full)}
.wa-msg .msg-reactions{display:flex;gap:2px;margin-top:3px;flex-wrap:wrap}
.wa-msg .msg-reaction{font-size:14px;padding:2px 5px;background:rgba(0,0,0,.04);border-radius:var(--r-full);cursor:pointer;transition:transform .15s;border:1px solid rgba(0,0,0,.04)}
[data-theme=dark] .wa-msg .msg-reaction{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.06)}
.wa-msg .msg-reaction:hover{transform:scale(1.15)}
.wa-msg .msg-edit-indicator{font-size:9px;opacity:.35;margin-left:3px;font-style:italic}
.wa-msg .msg-forward-badge{font-size:10px;color:var(--tx3);display:flex;align-items:center;gap:4px;margin-bottom:3px;font-style:italic}

/* Chat input bar */
.chat-bar{display:flex;gap:6px;align-items:flex-end;padding:8px 12px;background:var(--surface);border-top:1px solid var(--border-lt);position:sticky;bottom:0}
.chat-inp{flex:1;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-full);padding:10px 16px;font-family:var(--font);font-size:14px;color:var(--tx);outline:none;resize:none;max-height:100px;line-height:1.5;transition:all .15s}
.chat-inp:focus{border-color:var(--pr);background:var(--surface);box-shadow:0 0 0 3px rgba(99,102,241,.08)}
.chat-send{width:40px;height:40px;background:var(--grad);border:none;color:#fff;border-radius:var(--r-full);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh);transition:all .15s var(--ease-spring);flex-shrink:0}
.chat-send:hover{transform:scale(1.05);box-shadow:var(--sh-md)}
.chat-send:active{transform:scale(.95)}

/* Chat threads */
.chat-threads{padding:6px 10px;max-height:200px;overflow:auto}
.chat-th{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r);margin-bottom:4px;cursor:pointer;transition:background .1s}
.chat-th:hover{background:var(--bg)}
.chat-th.unread{background:rgba(99,102,241,.04)}
.chat-th.unread .chat-th-name{font-weight:800;color:var(--pr)}
.chat-th-meta{flex:1;min-width:0}
.chat-th-name{font-size:14px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-th-last{font-size:12px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-th-time{font-size:10px;color:var(--tx3);flex-shrink:0}
.chat-th-badge{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-full);background:var(--ok);color:#fff;font-size:9px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}

/* Reply / Forward bars */
#replyBar,#forwardBar{padding:8px 12px;font-size:12px;display:flex;align-items:center;gap:8px}
#replyBar{border-left:3px solid var(--pr);background:rgba(99,102,241,.04)}
#forwardBar{border-left:3px solid var(--warn);background:rgba(245,158,11,.04)}

/* ═══════════════════════════════════════════
   GROUPS — Facebook Style
   ═══════════════════════════════════════════ */
.group-card{background:var(--surface);border-radius:var(--r-md);margin-bottom:10px;overflow:hidden;box-shadow:var(--sh);border:1px solid var(--border-lt);cursor:pointer;transition:all .2s var(--ease-inout)}
.group-card:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.group-card:active{transform:translateY(0) scale(.99)}
.group-card-cover{height:80px;display:flex;align-items:center;justify-content:center;position:relative}
.group-card-icon{font-size:28px;background:rgba(255,255,255,.15);width:48px;height:48px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.group-card-body{padding:12px}
.group-card-name{font-size:15px;font-weight:800;color:var(--tx);margin-bottom:3px}
.group-card-desc{font-size:12px;color:var(--tx2);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.group-card-meta{display:flex;gap:10px;font-size:11px;color:var(--tx3);margin-bottom:8px;flex-wrap:wrap}
.group-card-meta span{display:flex;align-items:center;gap:3px}
.group-card-actions{display:flex;gap:6px}

/* Group room */
.group-cover{position:relative;height:180px;overflow:hidden;border-radius:0 0 var(--r-lg) var(--r-lg)}
.group-cover-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.4) 100%)}
.group-cover-content{position:absolute;bottom:16px;left:0;right:0;padding:0 16px;display:flex;flex-direction:column;align-items:center}
.group-avatar-lg{width:72px;height:72px;border-radius:var(--r-full);background:var(--surface);border:3px solid #fff;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;color:var(--pr);box-shadow:var(--sh-lg);margin-bottom:6px}
.group-meta-row{display:flex;gap:14px;color:rgba(255,255,255,.8);font-size:11px}
.group-meta-item{display:flex;align-items:center;gap:3px}

/* Group nav tabs */
.group-nav-tabs{display:flex;background:var(--surface);border-bottom:1px solid var(--border-lt);overflow-x:auto;-webkit-overflow-scrolling:touch;position:sticky;top:var(--topbar-h);z-index:50}
.group-nav-tab{flex:1;min-width:max-content;padding:12px 14px;background:none;border:none;font-family:var(--font);font-size:12px;font-weight:600;color:var(--tx3);cursor:pointer;position:relative;transition:color .15s;white-space:nowrap;border-bottom:2px solid transparent}
.group-nav-tab.on{color:var(--pr);border-bottom-color:var(--pr)}
.group-nav-tab:hover{color:var(--tx);background:var(--bg)}

/* Group composer */
.group-post-composer{background:var(--surface);border-radius:var(--r-md);margin:12px;padding:12px;box-shadow:var(--sh);border:1px solid var(--border-lt)}
.composer-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.composer-input{flex:1;background:var(--bg);border-radius:var(--r-full);padding:10px 16px;font-size:14px;color:var(--tx3);cursor:pointer;transition:background .15s}
.composer-input:hover{background:var(--border-lt)}
.composer-actions{display:flex;gap:6px;flex-wrap:wrap}
.composer-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-full);background:none;border:none;font-family:var(--font);font-size:12px;font-weight:600;color:var(--tx2);cursor:pointer;transition:all .15s}
.composer-btn:hover{background:var(--bg);color:var(--tx)}
.composer-btn i{font-size:14px}

/* Group posts */
.group-post{background:var(--surface);border-radius:var(--r-md);margin:8px 0;padding:14px;box-shadow:var(--sh);border:1px solid var(--border-lt)}
.group-post:hover{box-shadow:var(--sh-md)}
.group-post.pinned{border-color:var(--pr);background:rgba(99,102,241,.02)}
.group-post.pinned::before{content:'📌 مثبت';font-size:11px;font-weight:700;color:var(--pr);display:inline-block;margin-bottom:8px;padding:2px 8px;background:rgba(99,102,241,.06);border-radius:var(--r-full)}
.group-post-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.group-post-info{flex:1}
.group-post-name{font-weight:700;font-size:14px;color:var(--tx)}
.group-post-time{font-size:11px;color:var(--tx3)}
.group-post-type{font-size:10px;padding:2px 6px;border-radius:var(--r-sm);background:var(--bg);color:var(--tx2);font-weight:600}
.group-post-body{font-size:14px;line-height:1.6;color:var(--tx);margin-bottom:10px}
.group-post-actions{display:flex;border-top:1px solid var(--border-lt);padding-top:6px;margin-top:4px}
.gp-action{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px;background:none;border:none;border-radius:var(--r-sm);font-family:var(--font);font-size:13px;font-weight:600;color:var(--tx2);cursor:pointer;transition:all .1s}
.gp-action:hover{background:var(--bg);color:var(--tx)}
.gp-action.liked{color:var(--err)}
.gp-action i{font-size:16px}

/* ═══════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════ */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:500;display:none;align-items:center;justify-content:center;padding:16px}
.ov.on{display:flex}
.modal{background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:480px;max-height:85vh;display:flex;flex-direction:column;box-shadow:var(--sh-xl);animation:modalIn .25s var(--ease-out)}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-lt)}
.modal-title{font-size:16px;font-weight:800}
.modal-close{width:32px;height:32px;border-radius:var(--r-full);border:none;background:transparent;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--tx2);transition:all .15s}
.modal-close:hover{background:var(--bg);color:var(--tx)}
.modal-fld{margin-bottom:14px}
.modal-lbl{display:block;font-size:12px;font-weight:700;color:var(--tx2);margin-bottom:6px}

/* Context menu */
.ctx{position:fixed;z-index:600;background:var(--surface);border:1px solid var(--border-lt);border-radius:var(--r-md);padding:6px;min-width:180px;box-shadow:var(--sh-xl);display:none;animation:ctxPop .15s var(--ease-spring)}
.ctx.on{display:block}
@keyframes ctxPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.ctx-i{padding:10px 12px;border-radius:var(--r-sm);cursor:pointer;font-size:13px;color:var(--tx);display:flex;align-items:center;gap:8px;transition:background .1s}
.ctx-i:hover{background:var(--bg)}
.ctx-i.red{color:var(--err)}

/* Image viewer */
.imgv{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:800;display:none;align-items:center;justify-content:center;padding:20px}
.imgv.on{display:flex}
.imgv img{max-width:100%;max-height:100%;border-radius:var(--r);object-fit:contain}
.imgv-close{position:absolute;top:16px;left:16px;width:40px;height:40px;border-radius:var(--r-full);background:rgba(255,255,255,.1);border:none;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.imgv-close:hover{background:rgba(255,255,255,.2)}

/* ═══════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════ */
.toast-c{position:fixed;bottom:calc(var(--nav-h) + 12px);left:50%;transform:translateX(-50%);z-index:9000;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;width:min(400px,90vw)}
.toast{background:var(--tx);color:var(--surface);padding:12px 20px;border-radius:var(--r-full);font-size:13px;font-weight:600;box-shadow:var(--sh-lg);animation:toastIn .3s var(--ease-out);display:flex;align-items:center;gap:8px;pointer-events:auto;max-width:100%}
.toast.ok{background:var(--ok);color:#fff}
.toast.warn{background:var(--warn);color:#000}
.toast.err{background:var(--err);color:#fff}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════════════
   PROFILE
   ═══════════════════════════════════════════ */
.prof-cover{height:140px;background:var(--grad);border-radius:var(--r-md) var(--r-md) 0 0;position:relative;overflow:hidden}
.prof-av{margin-top:-36px;border:3px solid var(--surface);width:72px;height:72px;font-size:28px;box-shadow:var(--sh-md);margin-right:16px}
.prof-body{padding:12px 16px 20px}
.prof-name{font-size:20px;font-weight:900;display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:2px}
.prof-id{font-size:11px;color:var(--tx3);font-family:monospace;background:var(--bg);padding:2px 8px;border-radius:var(--r-sm);cursor:pointer;border:1px solid var(--border-lt)}
.prof-id:hover{border-color:var(--pr)}
.prof-bio{font-size:14px;color:var(--tx2);line-height:1.7;margin-top:6px}

/* Profile stats */
.prof-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.prof-stat{background:var(--bg);border-radius:var(--r);padding:12px 8px;text-align:center;border:1px solid var(--border-lt)}
.prof-stat .v{font-size:18px;font-weight:900;color:var(--pr)}
.prof-stat .l{font-size:10px;color:var(--tx3);margin-top:2px}

/* Profile tabs */
.prof-tabs{display:flex;border-top:1px solid var(--border-lt);background:var(--surface);border-radius:var(--r-md) var(--r-md) 0 0}
.prof-tab{flex:1;padding:12px 4px;border:none;background:none;font-family:var(--font);font-size:12px;font-weight:700;color:var(--tx3);cursor:pointer;transition:color .15s;position:relative;min-height:44px}
.prof-tab.on{color:var(--pr)}
.prof-tab.on::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;background:var(--grad);border-radius:2px}

/* ═══════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════ */
.tabs{display:flex;background:var(--bg);border-radius:var(--r);padding:3px;margin-bottom:12px;gap:2px;border:1px solid var(--border-lt)}
.tab{flex:1;padding:8px;text-align:center;border-radius:var(--r-sm);cursor:pointer;font-size:13px;font-weight:700;color:var(--tx3);transition:all .15s}
.tab.on{background:var(--surface);color:var(--tx);box-shadow:var(--sh-sm)}

/* ═══════════════════════════════════════════
   FILTER BAR
   ═══════════════════════════════════════════ */
.filter-bar{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px;margin-bottom:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filter-bar::-webkit-scrollbar{display:none}
.fb{padding:7px 14px;border-radius:var(--r-full);border:1.5px solid var(--border-lt);background:var(--surface);color:var(--tx2);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0}
.fb.on{background:var(--pr);color:#fff;border-color:var(--pr);box-shadow:var(--sh-sm)}
.fb:hover:not(.on){border-color:var(--pr);color:var(--pr)}

/* ═══════════════════════════════════════════
   PUSH NOTIFICATIONS
   ═══════════════════════════════════════════ */
#wawNC{position:fixed;top:calc(var(--topbar-h) + 8px);left:50%;transform:translateX(-50%);width:min(380px,92vw);z-index:4000;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.wn{background:var(--surface);border-radius:var(--r-md);overflow:hidden;pointer-events:auto;cursor:pointer;transform:translateY(-100px) scale(.94);opacity:0;transition:all .35s var(--ease-spring);border:1px solid var(--border-lt);box-shadow:var(--sh-lg);display:flex;align-items:stretch}
.wn.show{transform:translateY(0) scale(1);opacity:1}
.wn.bye{transform:translateY(-60px) scale(.92);opacity:0;transition:all .2s}
.wn-bar{width:4px;flex-shrink:0}
.wn-bar.m{background:var(--ok)}.wn-bar.f{background:var(--pr)}.wn-bar.l{background:var(--sc)}.wn-bar.c{background:var(--warn)}
.wn-in{display:flex;align-items:center;gap:10px;padding:10px 12px;flex:1;min-width:0}
.wn-av{width:38px;height:38px;border-radius:var(--r-full);flex-shrink:0;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;overflow:hidden}
.wn-c{flex:1;min-width:0}
.wn-t{font-size:13px;font-weight:700;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wn-m{font-size:12px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wn-x{width:28px;height:28px;border-radius:var(--r-full);background:var(--bg);border:none;cursor:pointer;color:var(--tx3);font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:auto 4px auto 0}
.push-notif{display:none!important}

/* ═══════════════════════════════════════════
   LEVEL UP MODAL
   ═══════════════════════════════════════════ */
.lvup-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:700;display:none;align-items:center;justify-content:center;padding:20px}
.lvup-ov.on{display:flex}
.lvup-card{background:var(--surface);border-radius:var(--r-xl);padding:40px 32px;max-width:340px;width:100%;text-align:center;box-shadow:var(--sh-xl);animation:lvlUp .4s var(--ease-spring)}
@keyframes lvlUp{from{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:none}}
.lvup-ico{font-size:56px;margin-bottom:12px}
.lvup-new{font-size:48px;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.lvup-title{font-size:18px;font-weight:800;margin:8px 0}
.lvup-sub{font-size:13px;color:var(--tx2);margin-bottom:20px}

/* ═══════════════════════════════════════════
   LEADERBOARD
   ═══════════════════════════════════════════ */
.lb-tabs{display:flex;gap:2px;padding:8px 16px;border-bottom:1px solid var(--border-lt)}
.lb-tab{flex:1;padding:8px;text-align:center;border:none;background:none;font-family:var(--font);font-size:12px;font-weight:700;color:var(--tx3);cursor:pointer;border-radius:var(--r-sm);transition:all .15s}
.lb-tab.on{background:var(--pr);color:#fff}

/* ═══════════════════════════════════════════
   FOCUS MODE
   ═══════════════════════════════════════════ */
.focus-mode-bar{position:fixed;top:0;left:0;right:0;z-index:300;background:var(--grad);color:#fff;padding:8px 16px;display:none;align-items:center;justify-content:space-between;font-size:13px;font-weight:700}
.focus-mode-bar.on{display:flex}
.focus-end-btn{background:rgba(255,255,255,.2);border:none;color:#fff;padding:6px 14px;border-radius:var(--r-full);cursor:pointer;font-family:var(--font);font-size:12px;font-weight:700}
.sound-bars{display:flex;gap:2px;align-items:flex-end;height:20px}
.sound-bar{width:3px;background:rgba(255,255,255,.6);border-radius:2px;animation:soundBar 1s ease-in-out infinite alternate}
.sound-bar:nth-child(2){animation-delay:.15s}.sound-bar:nth-child(3){animation-delay:.3s}
.sound-bar:nth-child(4){animation-delay:.45s}.sound-bar:nth-child(5){animation-delay:.6s}
@keyframes soundBar{from{height:4px}to{height:18px}}

/* ═══════════════════════════════════════════
   PULL TO REFRESH
   ═══════════════════════════════════════════ */
.ptr-indicator{position:absolute;top:-50px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--tx3);transition:top .2s;opacity:0;z-index:5}
.ptr-indicator.show{top:0;opacity:1}
.ptr-spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--pr);border-radius:var(--r-full);animation:spin .6s linear infinite}
.ptr-bar{height:3px;background:var(--grad);border-radius:2px;transform-origin:left center;transition:transform .1s}
.ptr-bar.active{animation:ptrPulse .8s ease infinite}
@keyframes ptrPulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ═══════════════════════════════════════════
   WORD OF DAY / QUOTE
   ═══════════════════════════════════════════ */
.wod-card{background:linear-gradient(135deg,rgba(99,102,241,.06),rgba(139,92,246,.04));border:1px solid rgba(99,102,241,.1);border-radius:var(--r-md);padding:14px;margin-bottom:10px}
.wod-word{font-size:18px;font-weight:900;color:var(--pr);margin-bottom:4px}
.wod-def{font-size:13px;color:var(--tx2);line-height:1.6;margin-bottom:4px}
.wod-en{font-size:12px;color:var(--tx3);font-style:italic}
.quote-card{background:var(--surface);border-radius:var(--r-md);padding:16px;margin-bottom:10px;border:1px solid var(--border-lt);box-shadow:var(--sh-sm);position:relative}
.quote-card::before{content:'"';position:absolute;top:4px;right:12px;font-size:48px;color:var(--border);font-family:Georgia,serif;line-height:1}
.quote-txt{font-size:14px;line-height:1.8;color:var(--tx);margin-bottom:6px;font-style:italic}
.quote-auth{font-size:12px;color:var(--tx3);font-weight:600}

/* ═══════════════════════════════════════════
   QUIZ
   ═══════════════════════════════════════════ */
.quiz-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.quiz-card{background:var(--surface);border:1px solid var(--border-lt);border-radius:var(--r);padding:14px;cursor:pointer;transition:all .15s;box-shadow:var(--sh-sm)}
.quiz-card:hover{box-shadow:var(--sh-md);border-color:var(--pr)}
.quiz-icon{width:40px;height:40px;border-radius:var(--r);background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:8px}
.quiz-title{font-size:13px;font-weight:700;color:var(--tx);margin-bottom:2px}
.quiz-sub{font-size:11px;color:var(--tx3)}
.quiz-player{min-height:200px}
.quiz-combo{position:fixed;top:70px;left:12px;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;font-size:12px;font-weight:900;padding:5px 12px;border-radius:var(--r-full);z-index:500;pointer-events:none;box-shadow:var(--sh-lg);animation:fadeSlide .3s ease}

/* ═══════════════════════════════════════════
   CLASSES
   ═══════════════════════════════════════════ */
.class-card{background:var(--surface);border:1px solid var(--border-lt);border-radius:var(--r-md);padding:16px;margin-bottom:10px;box-shadow:var(--sh-sm)}
.class-title{font-size:16px;font-weight:800;margin-bottom:12px}
.class-sub{font-size:13px;color:var(--tx2);margin-bottom:8px}
.class-row{display:flex;gap:6px;flex-wrap:wrap}
.class-room-frame{width:100%;height:60vh;border:none;border-radius:var(--r)}

/* ═══════════════════════════════════════════
   RECORDING BAR
   ═══════════════════════════════════════════ */
.rec-bar{display:none;background:rgba(239,68,68,.06);border-radius:var(--r);padding:10px 14px;align-items:center;gap:10px;border:1px solid rgba(239,68,68,.15)}
.rec-bar.on{display:flex}
.rec-dot{width:10px;height:10px;border-radius:var(--r-full);background:var(--err);animation:blink 1s infinite;flex-shrink:0}
.rec-time{font-size:13px;color:var(--err);font-weight:700;flex:1}
.rec-stop{background:var(--err);border:none;color:#fff;padding:6px 14px;border-radius:var(--r-full);cursor:pointer;font-size:13px;font-weight:700}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ═══════════════════════════════════════════
   SKIN SELECTOR
   ═══════════════════════════════════════════ */
.skin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.skin-btn{border:1.5px solid var(--border-lt);background:var(--surface);border-radius:var(--r-sm);padding:10px 6px;cursor:pointer;font-size:12px;font-weight:700;color:var(--tx2)}
.skin-btn.on{border-color:var(--pr);box-shadow:0 0 0 2px rgba(99,102,241,.12);color:var(--pr)}

/* ═══════════════════════════════════════════
   CONTEXT MENU (WhatsApp-style)
   ═══════════════════════════════════════════ */
.msg-context-menu{position:fixed;z-index:9999;background:var(--surface);border:1px solid var(--border-lt);border-radius:var(--r-md);padding:6px;min-width:160px;box-shadow:var(--sh-xl);animation:ctxPop .15s var(--ease-spring)}
.msg-ctx-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r-sm);cursor:pointer;font-size:13px;color:var(--tx);transition:background .1s}
.msg-ctx-item:hover{background:var(--bg)}
.msg-ctx-item.danger{color:var(--err)}
.msg-ctx-item i{width:16px;text-align:center}

/* Typing indicator */
.typing-dots{display:inline-flex;gap:3px;padding:4px 0}
.typing-dots span{width:6px;height:6px;background:var(--tx3);border-radius:var(--r-full);animation:typingBounce 1.2s infinite}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

/* Emoji picker */
.emoji-picker{position:fixed;z-index:9998;bottom:76px;left:12px;right:12px;max-width:320px;margin:0 auto;background:var(--surface);border:1px solid var(--border-lt);border-radius:var(--r-md);box-shadow:var(--sh-xl);padding:12px;animation:ctxPop .15s var(--ease-spring)}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.emoji-item{font-size:22px;padding:6px;text-align:center;cursor:pointer;border-radius:var(--r-sm);transition:background .1s}
.emoji-item:hover{background:var(--bg)}

/* ═══════════════════════════════════════════
   SETTINGS
   ═══════════════════════════════════════════ */
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border-lt)}
.setting-row:last-child{border-bottom:none}
.setting-l{flex:1}
.setting-title{font-size:14px;font-weight:700;color:var(--tx)}
.setting-sub{font-size:12px;color:var(--tx2);margin-top:2px}
.font-size-btns{display:flex;gap:6px}
.fz-btn{width:32px;height:32px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--surface);cursor:pointer;font-weight:700;font-size:13px;color:var(--tx2);transition:all .15s}
.fz-btn.on{background:var(--pr);color:#fff;border-color:var(--pr)}

/* ═══════════════════════════════════════════
   ADMIN
   ═══════════════════════════════════════════ */
.admin-card{background:var(--surface);border:1px solid var(--border-lt);border-radius:var(--r-md);padding:16px;margin-bottom:10px;box-shadow:var(--sh-sm)}
.admin-title{font-size:16px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.stat-card{background:var(--bg);border-radius:var(--r);padding:14px;text-align:center;border:1px solid var(--border-lt)}
.stat-card .v{font-size:24px;font-weight:900;color:var(--pr)}
.stat-card .l{font-size:11px;color:var(--tx3);margin-top:2px}
.user-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-lt)}
.user-row:last-child{border-bottom:none}

/* ═══════════════════════════════════════════
   SCROLL TO TOP
   ═══════════════════════════════════════════ */
#scrollTopBtn{position:fixed;bottom:calc(var(--nav-h) + 20px);left:16px;width:40px;height:40px;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border-lt);box-shadow:var(--sh-md);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(10px);transition:all .2s var(--ease-inout);z-index:100;color:var(--tx2)}
#scrollTopBtn.show{opacity:1;transform:translateY(0)}
#scrollTopBtn:hover{box-shadow:var(--sh-lg);color:var(--pr)}

/* ═══════════════════════════════════════════
   CONFETTI
   ═══════════════════════════════════════════ */
.confetti-piece{position:fixed;width:8px;height:16px;z-index:9999;pointer-events:none;animation:confettiFall 2.5s ease-out forwards}
@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:0;transform:translateY(100vh) rotate(720deg)}}

/* ═══════════════════════════════════════════
   MISC
   ═══════════════════════════════════════════ */
.quiz-mini{font-size:12px;color:var(--tx2);line-height:1.6}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip-link{position:absolute;top:-40px;left:16px;background:var(--pr);color:#fff;padding:8px 16px;border-radius:var(--r);z-index:9999;font-weight:700;font-size:13px;transition:top .2s}
.skip-link:focus{top:8px}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media(min-width:768px){
  .chat-grid{display:grid;grid-template-columns:320px 1fr;min-height:72vh;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border-lt)}
  .chat-side{display:flex;flex-direction:column;border-left:1px solid var(--border-lt);background:var(--surface)}
  .chat-main{display:flex;flex-direction:column}
  .chat-threads{flex:1;overflow-y:auto}
  .bnav{max-width:768px;left:50%;transform:translateX(-50%);border-radius:var(--r-lg) var(--r-lg) 0 0}
}

@media(max-width:480px){
  .pages{padding:8px}
  .card{padding:14px;border-radius:var(--r)}
  .wa-msg{max-width:88%}
  .quick-actions{grid-template-columns:repeat(4,1fr);gap:6px}
  .qa-btn{padding:10px 4px 8px;font-size:9px}
  .qa-btn i{font-size:18px}
  .noon-header{padding:14px;border-radius:var(--r)}
  .noon-name{font-size:16px}
  .noon-stat{padding:8px 6px}
  .noon-num{font-size:18px}
  .group-nav-tab{padding:10px 10px;font-size:11px}
  .group-cover{height:140px}
  .group-avatar-lg{width:56px;height:56px;font-size:22px}
  .composer-btn span{display:none}
  .prof-stats{grid-template-columns:repeat(2,1fr)}
}

/* Dark mode adjustments */
[data-theme=dark] .auth-card{background:var(--surface)}
[data-theme=dark] .wa-msg.sent{color:#e2e8f0}
[data-theme=dark] .wa-msg.received{color:#e2e8f0}
[data-theme=dark] body{background:radial-gradient(ellipse 70% 40% at 80% 0%,rgba(99,102,241,.08),transparent),var(--bg)}

/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */
@keyframes fadeSlide{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes shakeEl{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}



/* ═══════════════════════════════════════════
   ADDITIONAL CLASSES (JS-generated HTML support)
   ═══════════════════════════════════════════ */

/* Toast enhancements */
.toast{display:flex;align-items:flex-start;gap:10px;padding:12px 16px}
.toast-ico{font-size:18px;flex-shrink:0;margin-top:1px}
.toast-body{flex:1;min-width:0}
.toast-title{font-size:13px;font-weight:700}
.toast-msg{font-size:12px;opacity:.85;margin-top:2px}

/* Group pill */
.group-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;background:rgba(99,102,241,.06);color:var(--pr);font-size:11px;font-weight:700;border-radius:var(--r-full);border:1px solid rgba(99,102,241,.1)}

/* Profile stat rows */
.stat-row{display:flex;gap:8px;flex-wrap:wrap}
.stat-i{flex:1;min-width:80px;background:var(--bg);border-radius:var(--r);padding:10px 8px;text-align:center;border:1px solid var(--border-lt)}
.stat-v{font-size:18px;font-weight:900;color:var(--pr)}
.stat-l{font-size:10px;color:var(--tx3);margin-top:2px}

/* User profile cover & modal */
.cov-img{width:100%;height:100%;object-fit:cover}
.upc-cls{position:absolute;top:10px;left:12px;width:32px;height:32px;border-radius:var(--r-full);background:rgba(0,0,0,.3);border:none;color:#fff;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.upc-cls:hover{background:rgba(239,68,68,.7)}
.upc-av{border:4px solid var(--surface);width:76px;height:76px;font-size:28px;box-shadow:var(--sh-md)}
.upc-name{font-size:19px;font-weight:900;display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:2px}
.upc-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.rank-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:var(--r-full);font-size:10px;font-weight:700}
.rank-badge.gold{background:rgba(245,158,11,.1);color:#b45309}
.rank-badge.silver{background:rgba(148,163,184,.1);color:var(--tx2)}
.rank-badge.bronze{background:rgba(217,119,6,.1);color:#92400e}

/* User profile card layout */
.upc-cov{height:140px;position:relative;flex-shrink:0;background:var(--grad);overflow:hidden;border-radius:var(--r-lg) var(--r-lg) 0 0}
.upc-body{padding:10px 16px 20px}
.upc-wid{font-size:11px;color:var(--tx3);font-family:monospace;background:var(--bg);padding:2px 9px;border-radius:var(--r-sm);display:inline-block;border:1px solid var(--border-lt);margin-bottom:7px}
.upc-bio{font-size:13px;color:var(--tx2);line-height:1.7;margin-bottom:8px}
.upc-stats{display:flex;background:var(--bg);border:1px solid var(--border-lt);border-radius:var(--r-md);overflow:hidden;margin-bottom:12px}
.upc-stat{flex:1;padding:12px 6px;text-align:center;border-left:1px solid var(--border-lt)}
.upc-stat:last-child{border-left:none}
.upc-stat .v{font-size:18px;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.upc-stat .l{font-size:10px;color:var(--tx3);margin-top:2px}
.upc-acts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.upc-acts .btn,.upc-acts .btn-out{flex:1;min-width:0;font-size:13px;padding:10px}
.upc-tabs{display:flex;border-bottom:2px solid var(--border-lt);margin-bottom:10px}
.upc-tab{flex:1;padding:10px 5px;text-align:center;border:none;background:none;font-family:var(--font);font-size:12px;font-weight:700;color:var(--tx3);cursor:pointer;transition:.2s;position:relative}
.upc-tab.on{color:var(--pr)}
.upc-tab.on::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--grad);border-radius:2px}
.upc-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.upc-pthumb{aspect-ratio:1;background:var(--bg);overflow:hidden;cursor:pointer;position:relative}
.upc-pthumb img{width:100%;height:100%;object-fit:cover;transition:.2s}
.upc-pthumb:hover img{transform:scale(1.06)}
.upc-pthumb-ov{position:absolute;inset:0;background:rgba(0,0,0,.32);display:flex;align-items:center;justify-content:center;opacity:0;transition:.18s;color:#fff;font-size:12px;font-weight:700;gap:5px}
.upc-pthumb:hover .upc-pthumb-ov{opacity:1}
.upc-ptxt{aspect-ratio:1;background:var(--bg);border:1px solid var(--border-lt);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;font-size:11px;color:var(--tx2);text-align:center;overflow:hidden}
.upc-grow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-lt);cursor:pointer}
.upc-grow:last-child{border-bottom:none}
.upc-gico{width:38px;height:38px;border-radius:var(--r-sm);background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;color:#fff;font-weight:700}
.upc-gname{font-size:13px;font-weight:700;color:var(--pr-d)}
.upc-gsub{font-size:11px;color:var(--tx2);margin-top:1px}

/* Announcement reply */
.ann-reply-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(5px);z-index:750;display:none;align-items:flex-end;justify-content:center}
.ann-reply-ov.on{display:flex}
.ann-reply-card{background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;width:100%;max-width:500px;padding:20px 18px 28px;animation:slideUp .25s var(--ease-out)}
.ann-reply-cov{width:100%;height:120px;object-fit:cover;border-radius:var(--r);margin-bottom:12px;display:block}
.ann-reply-title{font-size:17px;font-weight:900;color:var(--tx);margin-bottom:4px}
.ann-reply-sub{font-size:13px;color:var(--tx2);line-height:1.6;margin-bottom:12px}
.ann-reply-time{font-size:11px;color:var(--tx3);margin-bottom:14px}
.ann-reply-sep{height:1px;background:var(--border-lt);margin:10px 0 14px}
.ann-reply-hint{font-size:12px;color:var(--tx3);margin-bottom:8px;display:flex;align-items:center;gap:5px}

/* Legacy announcement (group ann) */
.ann-wrap{display:flex;align-items:center;gap:8px}
.ann-nav{width:30px;height:30px;border:none;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border-lt);cursor:pointer;color:var(--pr-d)}
.ann-ind{font-size:11px;color:var(--tx3)}

/* Profile badges */
.prof-badges{display:flex;gap:6px;flex-wrap:wrap}

/* Composer elements */
.comp-ta{flex:1;background:transparent;border:none;font-family:var(--font);font-size:15px;color:var(--tx);resize:none;outline:none;min-height:60px;line-height:1.7}
.comp-ta::placeholder{color:var(--tx2)}
.comp-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-lt);gap:8px}
.comp-tools{display:flex;gap:6px;align-items:center;position:relative}
.comp-count{font-size:12px;color:var(--tx3);flex-shrink:0}
.comp-prev{margin-top:10px;border-radius:var(--r);overflow:hidden;position:relative}
.comp-prev img,.comp-prev video{width:100%;max-height:200px;object-fit:cover}
.comp-prev-rm{position:absolute;top:8px;left:8px;width:28px;height:28px;border-radius:var(--r-full);background:rgba(0,0,0,.6);color:#fff;border:none;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:.2s}
.comp-prev-rm:hover{background:rgba(239,68,68,.8)}
.poll-box{display:none;margin-top:12px;background:var(--bg);border-radius:var(--r);padding:12px}
.poll-box.on{display:block}
.emoji-box{display:none;position:absolute;bottom:100%;left:0;background:var(--surface);border:1px solid var(--border-lt);border-radius:var(--r-md);padding:10px;margin-bottom:6px;z-index:50;width:280px;box-shadow:var(--sh-lg)}
.emoji-box.on{display:block}
.emi{font-size:20px;cursor:pointer;border-radius:var(--r-sm);text-align:center;padding:4px;transition:.15s}
.emi:hover{background:var(--bg);transform:scale(1.2)}
.rec-bar{display:none;background:rgba(239,68,68,.06);border-radius:var(--r);padding:10px 14px;margin-top:10px;align-items:center;gap:10px;border:1px solid rgba(239,68,68,.15)}
.rec-bar.on{display:flex}
.rec-dot{width:10px;height:10px;border-radius:var(--r-full);background:var(--err);animation:blink 1s infinite;flex-shrink:0}
.rec-time{font-size:13px;color:var(--err);font-weight:700;flex:1}
.rec-stop{background:var(--err);border:none;color:#fff;padding:6px 14px;border-radius:var(--r-full);cursor:pointer;font-size:13px;font-weight:700}

/* Quiz result card */
.qrc{background:var(--surface);border:1px solid var(--border-lt);border-radius:var(--r-md);padding:12px;margin-bottom:8px;box-shadow:var(--sh-sm);display:flex;align-items:center;gap:12px;transition:var(--ease-inout)}
.qrc:hover{box-shadow:var(--sh-md);border-color:var(--pr-h)}
.qrc-ico{width:42px;height:42px;border-radius:var(--r-sm);background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;color:#fff}
.qrc-info{flex:1;min-width:0}
.qrc-t{font-size:13px;font-weight:700;color:var(--pr-d);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qrc-s{font-size:11px;color:var(--tx2)}
.qrc-score{flex-shrink:0;text-align:center}
.qrc-pct{font-size:18px;font-weight:900}
.qrc-pct.h{color:var(--ok)}.qrc-pct.m{color:var(--warn)}.qrc-pct.l{color:var(--err)}
.qrc-lbl{font-size:10px;color:var(--tx3)}

/* About rows */
.about-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-lt);font-size:13px}
.about-row:last-child{border-bottom:none}
.about-ico{font-size:16px;flex-shrink:0;width:22px;text-align:center;margin-top:1px}
.about-lbl{color:var(--tx3);font-size:10px;font-weight:700;margin-bottom:2px}
.about-val{color:var(--tx);font-weight:600}
.adm-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(239,68,68,.08);color:var(--err);font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r-full);margin-bottom:8px}

/* Forum separator */
.forum-sep{display:flex;align-items:center;gap:8px;padding:12px 0 6px;color:var(--pr-d);font-size:13px;font-weight:900}
.forum-sep::after{content:'';flex:1;height:1px;background:var(--border-lt)}

/* User card */
.ucard{background:var(--surface);border:1px solid var(--border-lt);border-radius:var(--r-md);padding:12px;display:flex;align-items:center;gap:10px;margin-bottom:9px;transition:var(--ease-inout);box-shadow:var(--sh-sm)}
.ucard:hover{border-color:var(--pr-h);box-shadow:var(--sh-md);transform:translateY(-1px)}
.u-info{flex:1;min-width:0;cursor:pointer}
.u-name{font-weight:800;font-size:14px;color:var(--pr-d);display:flex;align-items:center;gap:6px}
.u-id{font-size:10px;color:var(--tx3);font-family:monospace;margin-top:2px}
.u-bio{font-size:12px;color:var(--tx2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-acts{display:flex;gap:4px;align-items:center;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.odot{width:10px;height:10px;border-radius:var(--r-full);flex-shrink:0;transition:.3s}
.odot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.odot.off{background:var(--tx3)}

/* Rooms grid */
.rooms-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.room-card{background:var(--bg);border-radius:var(--r-md);padding:14px;text-align:center;cursor:pointer;border:1px solid var(--border-lt);transition:all .15s}
.room-card:hover{border-color:var(--pr);box-shadow:var(--sh-md);transform:translateY(-2px)}
.room-ico{width:44px;height:44px;border-radius:var(--r-md);background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:20px;margin:0 auto 8px;color:#fff}
.room-name{font-size:13px;font-weight:700;color:var(--tx);margin-bottom:2px}
.room-meta{font-size:11px;color:var(--tx3)}

/* Stories */
.stories-bar{display:flex;gap:10px;overflow-x:auto;padding:8px 0;scrollbar-width:none}
.stories-bar::-webkit-scrollbar{display:none}
.story-item{flex-shrink:0;text-align:center;cursor:pointer;width:64px}
.story-ring{width:60px;height:60px;border-radius:var(--r-full);padding:2px;background:var(--grad);margin:0 auto 4px}
.story-ring.seen{background:var(--border-lt)}
.story-ring img{width:100%;height:100%;border-radius:var(--r-full);object-fit:cover;border:2px solid var(--surface)}
.story-label{font-size:10px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-composer{background:var(--surface);border-radius:var(--r-md);padding:14px;margin:8px 0;border:1px solid var(--border-lt)}
.story-type-tabs{display:flex;gap:6px;margin-bottom:10px}
.story-type-tab{flex:1;padding:8px;text-align:center;border-radius:var(--r-sm);background:var(--bg);font-size:12px;font-weight:700;color:var(--tx2);cursor:pointer;transition:.15s}
.story-type-tab.on{background:var(--pr);color:#fff}

/* Chat friend empty */
.chat-f-empty{font-size:12px;color:var(--tx3);padding:4px;text-align:center}

/* Class cards */
.class-card{background:var(--surface);border:1px solid var(--border-lt);border-radius:var(--r-md);padding:16px;margin-bottom:10px;box-shadow:var(--sh-sm)}
.class-title{font-size:16px;font-weight:800;margin-bottom:12px}
.class-sub{font-size:13px;color:var(--tx2);margin-bottom:8px}
.class-row{display:flex;gap:6px;flex-wrap:wrap}
.class-room-frame{width:100%;height:60vh;border:none;border-radius:var(--r)}

/* Buddy matching */
.buddy-card{background:var(--surface);border:1px solid var(--border-lt);border-radius:var(--r-md);padding:14px;margin-bottom:8px;box-shadow:var(--sh-sm)}
.buddy-match-score{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:rgba(16,185,129,.08);color:var(--ok);font-size:11px;font-weight:700;border-radius:var(--r-full)}

/* Mood tracker */
.mood-btn{padding:10px;border-radius:var(--r);border:1.5px solid var(--border-lt);background:var(--surface);cursor:pointer;font-size:22px;text-align:center;transition:all .15s}
.mood-btn:hover{border-color:var(--pr);transform:scale(1.05)}
.mood-btn.on{border-color:var(--pr);background:rgba(99,102,241,.06)}
.mood-row{display:flex;gap:6px;flex-wrap:wrap}

/* Exam schedule */
.exam-item{background:var(--surface);border:1px solid var(--border-lt);border-radius:var(--r-md);padding:14px;margin-bottom:8px;display:flex;align-items:center;gap:12px}
.exam-badge{min-width:48px;height:48px;border-radius:var(--r-sm);background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0}
.exam-info{flex:1}

/* Fun fact card */
.funfact-card{background:var(--surface);border:1px solid var(--border-lt);border-radius:var(--r-md);padding:14px;margin-bottom:10px;font-size:13px;color:var(--tx2);line-height:1.7;cursor:pointer;transition:all .15s}
.funfact-card:hover{border-color:var(--pr);box-shadow:var(--sh-md)}

/* Leaderboard */
.lb-item{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--border-lt)}
.lb-item:last-child{border-bottom:none}
.lb-rank{width:28px;height:28px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;flex-shrink:0}
.lb-rank.r1{background:rgba(245,158,11,.1);color:#b45309}
.lb-rank.r2{background:rgba(148,163,184,.1);color:var(--tx2)}
.lb-rank.r3{background:rgba(217,119,6,.1);color:#92400e}
.lb-rank.rn{background:var(--bg);color:var(--tx3)}

/* Achievement badges */
.ach-i{border:1px solid var(--border-lt);background:var(--bg);border-radius:var(--r-sm);padding:8px;font-size:12px}
.ach-i.on{border-color:rgba(16,185,129,.5);background:rgba(16,185,129,.06)}
.ach-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}

/* Search results */
.search-res{background:var(--surface);min-height:0}

/* Notification list */
.notif-item{display:flex;gap:10px;padding:12px;border-bottom:1px solid var(--border-lt);cursor:pointer;transition:background .1s}
.notif-item:hover{background:var(--bg)}
.notif-item.unread{background:rgba(99,102,241,.03)}

/* Global search */
.global-search-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:500;display:none;align-items:flex-start;justify-content:center;padding:60px 16px 16px}
.global-search-ov.on{display:flex}
.global-search-card{background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:500px;max-height:70vh;overflow-y:auto;box-shadow:var(--sh-xl);animation:modalIn .25s var(--ease-out)}
.gs-input{width:100%;padding:14px 16px;border:none;border-bottom:1px solid var(--border-lt);font-family:var(--font);font-size:16px;color:var(--tx);background:transparent;outline:none}

/* Quick search result row */
.qs-row{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .1s}
.qs-row:hover{background:var(--bg)}

/* Quiz draft */
.quiz-draft-q{background:var(--bg);border-radius:var(--r);padding:10px;margin-bottom:8px;border:1px solid var(--border-lt)}

/* Admin */
.admin-ann-card{background:var(--bg);border-radius:var(--r);padding:12px;margin-bottom:8px;border:1px solid var(--border-lt)}

/* Login page */
.login-hero{text-align:center;padding:24px 16px}
.login-av{width:64px;height:64px;border-radius:var(--r-full);margin:0 auto 12px}

/* Grade calculator */
.grade-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.grade-input{width:80px;padding:8px;border:1.5px solid var(--border-lt);border-radius:var(--r-sm);font-family:var(--font);font-size:13px;text-align:center}

/* Spin wheel */
.spin-canvas{display:block;margin:0 auto;max-width:100%}

/* Collab notes */
.collab-note{background:var(--surface);border:1px solid var(--border-lt);border-radius:var(--r-md);padding:12px;margin-bottom:8px}

/* Notes */
.note-card{background:var(--surface);border:1px solid var(--border-lt);border-radius:var(--r-md);padding:12px;margin-bottom:8px}

/* Flashcards */
.flashcard{background:var(--surface);border:2px solid var(--border-lt);border-radius:var(--r-lg);padding:24px;text-align:center;cursor:pointer;min-height:180px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.flashcard.flipped{border-color:var(--pr);background:rgba(99,102,241,.02)}

/* Timer */
.timer-display{font-size:48px;font-weight:900;font-family:monospace;text-align:center;color:var(--tx);margin:20px 0}

/* Missions */
.mission-card{background:var(--surface);border:1px solid var(--border-lt);border-radius:var(--r-md);padding:14px;margin-bottom:8px;display:flex;align-items:center;gap:12px}
.mission-progress{flex:1;height:6px;background:var(--bg);border-radius:3px;overflow:hidden}
.mission-progress-bar{height:100%;background:var(--grad);border-radius:3px;transition:width .3s}

/* Mood history */
.mood-history{display:flex;gap:4px;flex-wrap:wrap}
.mood-history-item{font-size:20px;padding:4px;border-radius:var(--r-sm)}

/* Buddy online indicator */
.buddy-online{width:8px;height:8px;border-radius:var(--r-full);background:var(--ok);flex-shrink:0}

/* Daily challenge */
.dc-card{background:var(--surface);border:1px solid var(--border-lt);border-radius:var(--r-md);padding:16px;margin-bottom:10px}
.dc-opt{display:flex;align-items:center;padding:10px 12px;background:var(--bg);border-radius:var(--r-sm);margin-bottom:6px;cursor:pointer;border:1.5px solid var(--border-lt);transition:all .15s}
.dc-opt:hover{border-color:var(--pr)}
.dc-opt.correct{border-color:var(--ok);background:rgba(16,185,129,.06)}
.dc-opt.wrong{border-color:var(--err);background:rgba(239,68,68,.06)}

/* Word of day card */
.wod-card{background:linear-gradient(135deg,rgba(99,102,241,.06),rgba(139,92,246,.04));border:1px solid rgba(99,102,241,.1);border-radius:var(--r-md);padding:14px;margin-bottom:10px}

/* Quote card */
.quote-card{background:var(--surface);border-radius:var(--r-md);padding:16px;margin-bottom:10px;border:1px solid var(--border-lt);box-shadow:var(--sh-sm);position:relative}
.quote-card::before{content:'"';position:absolute;top:4px;right:12px;font-size:48px;color:var(--border-lt);font-family:Georgia,serif;line-height:1}

/* Profile tabs in settings */
.settings-section{background:var(--surface);border-radius:var(--r-md);margin-bottom:12px;overflow:hidden;border:1px solid var(--border-lt)}
.settings-header{padding:14px 16px;font-size:14px;font-weight:800;color:var(--tx);border-bottom:1px solid var(--border-lt)}

/* Library center */
.library-item{background:var(--surface);border:1px solid var(--border-lt);border-radius:var(--r-md);padding:12px;margin-bottom:8px;display:flex;align-items:center;gap:12px}
.library-icon{width:40px;height:40px;border-radius:var(--r-sm);background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0}

/* Chat sidebar for desktop */
@media(min-width:768px){
  .rooms-grid{grid-template-columns:repeat(3,1fr)}
  .quick-actions{grid-template-columns:repeat(6,1fr)}
}

/* === Profile Page === */
.prof-av-wrap{position:relative;margin-top:-40px;padding:0 16px;z-index:2}
.xp-wrap{margin:12px 0 8px;text-align:center}
.lv-badge{display:inline-block;background:var(--grad);color:var(--text-on-primary);padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;margin-bottom:6px}
.xp-track{width:100%;height:6px;background:var(--bg);border-radius:3px;overflow:hidden;margin:6px 0}
.xp-fill{height:100%;background:var(--grad);border-radius:3px;transition:width .4s ease}

/* === Privacy/Settings Sections === */
.priv-section{background:var(--card);border-radius:12px;margin:0 12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.priv-section+.priv-section{margin-top:12px}
.priv-hdr{padding:10px 14px;font-size:13px;font-weight:700;color:var(--pr);background:var(--bg-alt);border-bottom:1px solid var(--border)}
.priv-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}
.priv-row:last-child{border-bottom:none}
.priv-l{flex:1;min-width:0}
.priv-tit{font-size:13px;font-weight:600;color:var(--text-primary)}
.priv-sub{font-size:11px;color:var(--tx3);margin-top:2px}

/* === Button Variants === */
.btn-red{background:var(--danger);color:#fff;border:none}
.btn-red:hover{background:var(--danger-hover);transform:translateY(-1px)}


/* === Library Center === */
.lib-header{text-align:center;padding:20px 16px 12px}
.lib-header h2{font-size:22px;font-weight:900;color:var(--text-primary);margin:0}
.lib-subtitle{font-size:13px;color:var(--tx3);margin:4px 0 0}

/* === Chat Info Modal === */
.chat-info-modal{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:420px;background:var(--card);z-index:1000;transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;box-shadow:-4px 0 24px rgba(0,0,0,.15)}
.chat-info-modal.open{transform:translateX(0)}
.ci-header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card);z-index:1}
.ci-close{width:36px;height:36px;border-radius:50%;border:none;background:var(--bg);color:var(--text-primary);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ci-avatar{width:48px;height:48px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.ci-info{flex:1;min-width:0}
.ci-name{font-size:16px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-meta{font-size:12px;color:var(--tx3)}
.ci-section{padding:12px 16px;border-bottom:1px solid var(--border)}
.ci-section:last-child{border-bottom:none}
.ci-section-title{font-size:12px;font-weight:700;color:var(--pr);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.ci-desc{font-size:14px;color:var(--text-secondary);line-height:1.6}
.ci-member-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.ci-member-item:last-child{border-bottom:none}
.ci-member-av{width:32px;height:32px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.ci-member-name{flex:1;font-size:14px;color:var(--text-primary)}
.ci-member-role{font-size:11px;color:var(--tx3);background:var(--bg);padding:2px 8px;border-radius:10px}
.ci-action{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.ci-action:last-child{border-bottom:none}
.ci-action-l{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-primary)}
.ci-danger{color:var(--danger)}


/* === Home Page === */
.noon-deco{position:absolute;top:-20px;right:-20px;width:80px;height:80px;border-radius:50%;background:var(--grad);opacity:.15;pointer-events:none}
.insight{background:var(--card);border-radius:12px;padding:14px;margin:8px 0;box-shadow:var(--shadow-sm);border-left:4px solid var(--pr)}

/* === Composer === */
.composer{background:var(--card);border-radius:12px;padding:12px;margin:8px 12px;box-shadow:var(--shadow-sm)}
.comp-row{display:flex;gap:8px;margin-top:8px}

/* === Chat Header === */
.wa-hdr-top{display:flex;align-items:center;gap:8px}
.wa-hbtn{width:32px;height:32px;border-radius:50%;border:none;background:var(--bg);color:var(--text-primary);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* === Group Tabs === */
.g-tabs{display:flex;gap:4px;padding:8px 12px;overflow-x:auto;border-bottom:1px solid var(--border)}
.g-tab{padding:6px 14px;border-radius:20px;border:none;background:var(--bg);color:var(--tx3);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .2s}
.g-tab.on{background:var(--grad);color:var(--text-on-primary)}

/* === Chat Friends === */
.chat-friends{padding:12px}
.chat-f-tabs{display:flex;gap:4px;margin-bottom:8px}
.chat-f-tab{flex:1;padding:6px;border-radius:8px;border:none;background:var(--bg);color:var(--tx3);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s}
.chat-f-tab.on{background:var(--pr);color:#fff}
.chat-f-list{display:flex;flex-direction:column;gap:6px}

/* === Admin Dashboard === */
.adm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px}
.adm-stat{background:var(--card);border-radius:12px;padding:16px;text-align:center;box-shadow:var(--shadow-sm)}
.adm-sv{font-size:24px;font-weight:900;color:var(--pr)}
.adm-sl{font-size:11px;color:var(--tx3);margin-top:4px}

/* === Login Page === */
.login-page-card{background:var(--card);border-radius:20px;padding:24px;margin:16px;box-shadow:var(--shadow-lg)}
.login-page-logo{width:80px;height:80px;border-radius:50%;background:var(--grad);margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:36px}
.login-page-edu{font-size:12px;color:var(--tx3);margin-top:8px}
.login-page-title{font-size:22px;font-weight:900;text-align:center;color:var(--text-primary)}
.login-page-sub{font-size:13px;text-align:center;color:var(--tx3);margin:4px 0 16px}
.login-features{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
.login-feat{background:var(--bg);border-radius:12px;padding:12px;text-align:center}

/* === Flashcards === */
.fc-counter{font-size:12px;color:var(--tx3);text-align:center;margin:8px 0}
.fc-scene{perspective:1000px;margin:12px 0}
.fc-card{position:relative;width:100%;min-height:200px;transition:transform .6s;transform-style:preserve-3d}
.fc-card.flipped{transform:rotateY(180deg)}
.fc-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:16px;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--card);box-shadow:var(--shadow-md)}
.fc-front{z-index:2}
.fc-back{transform:rotateY(180deg)}
.fc-hint{font-size:11px;color:var(--tx3);text-align:center;margin:8px 0}
.fc-actions{display:flex;gap:8px;justify-content:center;margin-top:12px}
.fc-btn{padding:8px 20px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer}
.fc-btn.again{background:#fee;color:#c00}
.fc-btn.unsure{background:#fff3cd;color:#856404}
.fc-btn.know{background:#d4edda;color:#155724}

/* === Timer === */
.timer-modes{display:flex;gap:6px;margin:8px 0}
.timer-mode{flex:1;padding:6px;border-radius:8px;border:none;background:var(--bg);color:var(--tx3);font-size:12px;cursor:pointer}
.timer-mode.on{background:var(--pr);color:#fff}
.timer-ring{width:120px;height:120px;border-radius:50%;border:4px solid var(--bg);margin:12px auto;display:flex;align-items:center;justify-content:center;position:relative}
.timer-ring .track{position:absolute;inset:0;border-radius:50%;border:4px solid transparent;border-top-color:var(--pr);transform:rotate(var(--pct,0deg))}
.timer-ring .prog{position:absolute;inset:-4px;border-radius:50%;border:4px solid var(--pr);clip-path:polygon(50% 50%,50% 0%,var(--pct-x,100%) 0%,var(--pct-y,0%) 50%)}
.timer-num{font-size:32px;font-weight:900;color:var(--text-primary)}
.timer-min{font-size:14px;color:var(--tx3)}
.timer-label{font-size:12px;color:var(--tx3);text-align:center}
.timer-btns{display:flex;gap:8px;justify-content:center;margin-top:12px}
.timer-btn{padding:8px 24px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;background:var(--pr);color:#fff}
.timer-btn.reset{background:var(--bg);color:var(--text-primary)}
.timer-btn.start{background:var(--grad);color:var(--text-on-primary)}

/* === Chat Info Modal CSS overrides === */