/* ═══════════════════════════════════════════════
   CypheraX · CYBERNET Dark UI v5.0
   Premium Cyber Social — Inter font · Teal accent
═══════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --bg:        #0B0F19;
  --bg2:       #0d1120;
  --card:      #131b2e;
  --card2:     #18243a;
  --card3:     #1e2d47;
  --card4:     #243354;

  --sb-from:   #0a1a15;
  --sb-to:     #0d1729;
  --sb-act-bg: rgba(20,184,166,.14);
  --sb-act-bd: #14b8a6;
  --sb-act-cl: #5eead4;

  --border:    rgba(255,255,255,.06);
  --border2:   rgba(255,255,255,.11);
  --border3:   rgba(255,255,255,.18);

  --accent:    #8b5cf6;
  --accent-d:  #6d28d9; /* New variable */
  --accent-l:  #a78bfa;
  --accent-dim:rgba(124,58,237,.17); /* Kept existing as not explicitly changed */
  --accent-gw: rgba(124,58,237,.4); /* Kept existing as not explicitly changed */

  --teal:      #14b8a6;
  --teal-l:    #2dd4bf; /* Kept existing as not explicitly changed */
  --teal-dim:  rgba(20,184,166,0.12);
  --teal-gw:   rgba(20,184,166,0.4);

  --green:     #10b981;
  --green-dim: rgba(74,222,128,.14); /* Kept existing as not explicitly changed */
  --rose:      #f43f5e;
  --rose-dim:  rgba(244,63,94,0.12);
  --amber:     #f59e0b;
  --amber-dim: rgba(245,158,11,.14); /* Kept existing as not explicitly changed */
  --sky:       #0ea5e9; /* New variable */

  --text:      #f8fafc;
  --text2:     #e2e8f0;
  --text3:     #94a3b8;
  --text4:     #64748b;

  --font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --r-xs: 4px;  --r-s: 8px;   --r: 14px;
  --r-l:  18px; --r-xl: 22px; --r-f: 9999px;

  --sh-s:  0 2px 8px rgba(0,0,0,.32);
  --sh:    0 4px 24px rgba(0,0,0,.42);
  --sh-l:  0 8px 40px rgba(0,0,0,.52);
  --sh-xl: 0 16px 64px rgba(0,0,0,.64);
  --glow-t:0 0 24px var(--teal-gw);
  --glow-a:0 0 24px var(--accent-gw);

  --tb-h:  62px;
  --sb-w:  272px;
  --rb-w:  290px;

  --ease:   cubic-bezier(.4,0,.2,1);
  --ease-b: cubic-bezier(.34,1.56,.64,1);
  --d:      .17s;
  --d2:     .28s;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;line-height:inherit}
input,textarea,select{font-family:inherit;line-height:inherit}
img{display:block;max-width:100%}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--card3);border-radius:4px}

/* ── UTILITY ── */
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}
.status-msg{font-size:.82rem;color:var(--text2);padding:6px 28px;min-height:1.3em}

/* ── KEYFRAMES ── */
@keyframes fadeIn  {from{opacity:0}to{opacity:1}}
@keyframes slideUp {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn {from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
@keyframes skPulse {0%,100%{opacity:.4}50%{opacity:.8}}
@keyframes bounce  {0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
@keyframes glow    {0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}50%{box-shadow:0 0 0 7px rgba(74,222,128,0)}}
@keyframes toastIn {from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}

/* ── TOAST ── */
.toast{
  position:fixed;bottom:28px;right:28px;z-index:9999;
  padding:13px 20px;border-radius:var(--r);
  background:var(--card2);border:1px solid var(--border2);
  color:var(--text);font-size:.9rem;font-weight:500;
  box-shadow:var(--sh-l);animation:toastIn .22s var(--ease);
  max-width:330px;pointer-events:none;
}
.toast.error{border-color:rgba(244,63,94,.45);color:#fca5a5}

/* Mobile backdrop */
.sb-backdrop{
  position:fixed;inset:0;z-index:148;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(3px);
  animation:fadeIn .2s var(--ease);
}

/* ═══════════════════════════════════════════════
   AUTH
═══════════════════════════════════════════════ */
#auth-panel{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 800px 600px at 20% 30%,rgba(20,184,166,.12),transparent),
    radial-gradient(ellipse 600px 500px at 80% 70%,rgba(124,58,237,.10),transparent),
    var(--bg);
}
.auth-bg-glow{
  position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 1000px 800px at 50% 50%,rgba(20,184,166,.04),transparent);
}
.auth-card{
  position:relative;z-index:1;width:100%;max-width:440px;
  background:var(--card);border:1px solid var(--border2);
  border-radius:var(--r-xl);padding:40px 36px;
  box-shadow:var(--sh-xl),0 0 0 1px rgba(20,184,166,.07);
  animation:scaleIn .3s var(--ease);
}
.auth-logo{display:flex;align-items:center;gap:16px;margin-bottom:30px}
.auth-icon{
  width:52px;height:52px;border-radius:var(--r);
  background:linear-gradient(135deg,var(--teal),#059669);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:#fff;
  box-shadow:0 4px 24px var(--teal-gw);flex-shrink:0;
}
.auth-brand{font-size:1.6rem;font-weight:900;letter-spacing:-.03em}
.auth-tagline{font-size:.8rem;color:var(--text3);margin-top:3px}
.auth-tabs{
  display:flex;gap:4px;margin-bottom:28px;
  background:var(--bg2);border-radius:var(--r-s);
  padding:4px;border:1px solid var(--border);
}
.atab{
  flex:1;padding:9px;border-radius:6px;
  font-size:.88rem;font-weight:600;color:var(--text3);
  transition:all var(--d) var(--ease);
}
.atab.active{background:var(--card3);color:var(--text);box-shadow:var(--sh-s)}
.atab:hover:not(.active){color:var(--text2)}
.auth-form{display:flex;flex-direction:column;gap:16px}
.afield{display:flex;flex-direction:column;gap:6px}
.afield label{font-size:.8rem;font-weight:700;color:var(--text2);letter-spacing:.01em}
.ainput{position:relative}
.ainput i{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--text3);font-size:.85rem;pointer-events:none;
}
.ainput input{
  width:100%;padding:12px 16px 12px 42px;
  border-radius:var(--r-s);background:var(--bg2);
  border:1px solid var(--border2);color:var(--text);
  font-size:.9rem;transition:all var(--d) var(--ease);
}
.ainput input:focus{
  outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-dim);background:var(--card3);
}
.auth-submit{
  margin-top:6px;padding:13px;width:100%;
  border-radius:var(--r-s);
  background:linear-gradient(135deg,var(--teal),#059669);
  color:#fff;font-size:.95rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:all var(--d) var(--ease);letter-spacing:.01em;
}
.auth-submit:hover{transform:translateY(-2px);box-shadow:var(--glow-t)}
.auth-submit:active{transform:translateY(0)}
.auth-msg{text-align:center;margin-top:12px;font-size:.83rem;color:var(--text2);min-height:1.3em}

/* ═══════════════════════════════════════════════
   APP SHELL
═══════════════════════════════════════════════ */
#app-panel{min-height:100vh;background:var(--bg)}

/* ── TOPBAR ── */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--tb-h);
  background:rgba(11,15,25,.92);
  backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:14px;
  padding:0 20px;
}
.tb-l{display:flex;align-items:center;gap:10px;flex-shrink:0}
.ham-btn{
  width:38px;height:38px;border-radius:10px;
  display:none;align-items:center;justify-content:center;
  color:var(--text2);font-size:1rem;
  transition:all var(--d) var(--ease);
}
.ham-btn:hover{background:var(--card2);color:var(--text)}
.tb-brand{display:flex;align-items:center;gap:10px}
.tb-shield{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--teal),#059669);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:#fff;box-shadow:0 2px 12px var(--teal-gw);
}
.tb-name{font-size:1.1rem;font-weight:900;letter-spacing:-.025em}
.tb-mid{flex:1;max-width:520px;position:relative}
.tb-search-wrap{position:relative;display:flex;align-items:center}
.tb-search-wrap i{
  position:absolute;left:13px;color:var(--text3);font-size:.85rem;pointer-events:none;z-index:1;
}
#top-search-user{
  width:100%;padding:10px 16px 10px 38px;
  border-radius:var(--r-f);background:var(--card2);
  border:1px solid var(--border);color:var(--text);font-size:.88rem;
  transition:all var(--d) var(--ease);
}
#top-search-user:focus{
  outline:none;border-color:var(--teal);
  background:var(--card3);box-shadow:0 0 0 3px var(--teal-dim);
}
.search-drop{
  position:absolute;top:calc(100% + 9px);left:0;right:0;
  background:var(--card2);border:1px solid var(--border2);
  border-radius:var(--r);z-index:310;max-height:290px;overflow-y:auto;
  box-shadow:var(--sh-l);animation:slideDown .16s var(--ease);
}
.search-result-item{
  width:100%;padding:11px 16px;font-size:.88rem;
  color:var(--text2);text-align:left;
  border-bottom:1px solid var(--border);
  transition:all var(--d) var(--ease);display:block;cursor:pointer;
}
.search-result-item:last-child{border-bottom:none}
.search-result-item:hover{background:var(--card3);color:var(--text)}
.tb-r{display:flex;align-items:center;gap:5px;margin-left:auto;flex-shrink:0}
.tb-btn{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text2);font-size:.95rem;
  transition:all var(--d) var(--ease);position:relative;
}
.tb-btn:hover{background:var(--card2);color:var(--text)}
.tb-logout:hover{background:var(--rose-dim);color:var(--rose)}
.tb-ava-btn{position:relative;border:none;background:none;cursor:pointer;padding:0}
.tb-ava{
  width:34px;height:34px;border-radius:50%;object-fit:cover;
  border:2px solid var(--border2);display:block;
  transition:border-color var(--d) var(--ease);
}
.tb-ava-btn:hover .tb-ava{border-color:var(--teal)}
.tb-green-dot{
  position:absolute;bottom:1px;right:1px;
  width:10px;height:10px;border-radius:50%;
  background:var(--green);border:2px solid var(--bg);
  animation:glow 3s ease-in-out infinite;
}
.nb{
  position:absolute;top:4px;right:4px;
  min-width:17px;height:17px;border-radius:var(--r-f);
  background:var(--rose);color:#fff;
  font-size:.64rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  padding:0 3px;border:2px solid var(--bg);
}
.notif-wrap{position:relative}
.notif-pop,#notification-dropdown{
  position:absolute;top:calc(100% + 11px);right:0;width:350px;
  background:var(--card);border:1px solid var(--border2);
  border-radius:var(--r-xl);box-shadow:var(--sh-xl);z-index:410;overflow:hidden;
  animation:slideDown .18s var(--ease);
}
.notif-pop-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 17px 11px;border-bottom:1px solid var(--border);
  font-size:.92rem;font-weight:800;
}
.notif-pop-acts{display:flex;gap:4px}
.npbtn{
  font-size:.76rem;color:var(--text3);padding:4px 9px;
  border-radius:7px;transition:all var(--d) var(--ease);
  display:flex;align-items:center;gap:4px;
}
.npbtn:hover{background:var(--card3);color:var(--text2)}
.notif-pop-list{max-height:350px;overflow-y:auto;padding:8px}

/* ═══════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════ */
.layout{
  display:grid;
  grid-template-columns:var(--sb-w) 1fr var(--rb-w);
  min-height:100vh;
  padding-top:var(--tb-h);
}

/* ═══════════════════════════════════════════════
   LEFT SIDEBAR
═══════════════════════════════════════════════ */
.sidebar{
  position:sticky;top:var(--tb-h);
  height:calc(100vh - var(--tb-h));
  overflow:hidden;
  background:linear-gradient(180deg,var(--sb-from) 0%,var(--sb-to) 100%);
  border-right:1px solid rgba(20,184,166,.14);
  display:flex;flex-direction:column;
  transition:transform var(--d2) var(--ease);
}
.sb-scroll{
  flex:1;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;
  padding:0 10px 20px;
}

/* Brand */
.sb-top-brand{
  display:flex;align-items:center;gap:10px;
  padding:18px 10px 14px;flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:10px;
}
.sb-shield{
  width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,var(--teal),#059669);
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;color:#fff;box-shadow:0 2px 12px var(--teal-gw);flex-shrink:0;
}
.sb-top-brand span{font-size:1rem;font-weight:900;letter-spacing:-.02em}

/* Profile card */
.sb-profile{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-l);overflow:hidden;margin-bottom:12px;
  text-align:center;flex-shrink:0;
}
.sb-cover-strip{
  height:52px;
  background:linear-gradient(135deg,rgba(20,184,166,.45),rgba(124,58,237,.32));
}
.sb-profile-inner{padding:0 14px 16px}
.sb-ava-wrap{margin-top:-24px;display:inline-block;position:relative}
.sb-ava{
  width:52px;height:52px;border-radius:50%;object-fit:cover;
  border:3px solid var(--sb-from);background:var(--card3);
}
.sb-dot{
  position:absolute;bottom:3px;right:3px;width:14px;height:14px;
  border-radius:50%;background:var(--green);border:2px solid var(--sb-from);
  animation:glow 3s ease-in-out infinite;
}
.sb-name{font-size:.92rem;font-weight:800;margin-top:8px;color:var(--text)}
.sb-status{font-size:.74rem;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-edit{
  margin-top:9px;font-size:.74rem;color:var(--text3);
  padding:5px 14px;border-radius:7px;
  border:1px solid rgba(255,255,255,.08);
  display:inline-flex;align-items:center;gap:5px;
  transition:all var(--d) var(--ease);cursor:pointer;
}
.sb-edit:hover{background:rgba(255,255,255,.06);color:var(--text)}

/* Nav */
.sb-nav{display:flex;flex-direction:column;gap:2px;padding:4px 0;flex-shrink:0}
.sb-link{
  display:flex;align-items:center;gap:13px;
  padding:11px 13px;border-radius:var(--r-s);
  color:rgba(255,255,255,.55);font-size:.9rem;font-weight:500;
  transition:all var(--d) var(--ease);cursor:pointer;
  border:1px solid transparent;position:relative;
}
.sb-link:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.9)}
.sb-link.active{
  background:var(--sb-act-bg);color:var(--sb-act-cl);
  font-weight:700;border-color:rgba(20,184,166,.18);
}
.sb-link.active::before{
  content:'';position:absolute;left:0;top:22%;bottom:22%;
  width:3px;border-radius:0 2px 2px 0;background:var(--sb-act-bd);
}
.sb-link i{width:20px;text-align:center;font-size:.92rem;flex-shrink:0}

/* Sections */
.sb-sec{padding:10px 6px;border-top:1px solid rgba(255,255,255,.05);flex-shrink:0}
.sb-sec-label{
  font-size:.64rem;font-weight:800;letter-spacing:.11em;
  color:rgba(255,255,255,.22);text-transform:uppercase;
  margin-bottom:9px;padding:0 5px;
}
.chip-row{display:flex;flex-wrap:wrap;gap:5px}
.chip{
  display:inline-flex;align-items:center;
  padding:3px 11px;border-radius:var(--r-f);
  font-size:.72rem;font-weight:600;
  background:rgba(20,184,166,.12);color:var(--teal);
  border:1px solid rgba(20,184,166,.22);
}

/* Stats */
.sb-stats{
  display:flex;background:rgba(255,255,255,.04);
  border-radius:var(--r-s);overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
.sb-stat{flex:1;text-align:center;padding:11px 4px;border-right:1px solid rgba(255,255,255,.06)}
.sb-stat:last-child{border-right:none}
.sb-stat strong{display:block;font-size:1.2rem;font-weight:900;color:var(--teal)}
.sb-stat span{font-size:.68rem;color:rgba(255,255,255,.3)}

/* Footer */
.sb-footer{
  margin-top:auto;display:flex;flex-direction:column;gap:9px;
  padding:12px 4px 0;flex-shrink:0;
}
.new-post-btn{
  width:100%;padding:12px 16px;border-radius:var(--r);
  background:linear-gradient(135deg,var(--teal),#059669);
  color:#fff;font-size:.9rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:all var(--d) var(--ease);
  box-shadow:0 3px 14px var(--teal-gw);
}
.new-post-btn:hover{transform:translateY(-2px);box-shadow:0 6px 22px var(--teal-gw)}
.new-post-btn:active{transform:translateY(0)}
.sb-user-row{
  display:flex;align-items:center;gap:10px;padding:10px 11px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-s);
}
.sb-mini-ava{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--card3)}
.sb-mini-info{flex:1;min-width:0}
.sb-mini-name{font-size:.82rem;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-mini-handle{font-size:.72rem;color:rgba(255,255,255,.3);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-mini-logout{
  width:30px;height:30px;border-radius:8px;
  color:rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;transition:all var(--d) var(--ease);flex-shrink:0;
}
.sb-mini-logout:hover{background:var(--rose-dim);color:var(--rose)}

/* ═══════════════════════════════════════════════
   CENTER
═══════════════════════════════════════════════ */
.center{
  border-right:1px solid var(--border);
  min-width:0;padding-bottom:90px;
}
.view{display:flex;flex-direction:column;animation:fadeIn .2s var(--ease)}

/* View headers */
.vhdr{padding:26px 28px 0}
.vhdr h2{
  font-size:1.3rem;font-weight:900;
  display:flex;align-items:center;gap:10px;letter-spacing:-.02em;
}
.vhdr h2 i{color:var(--teal);font-size:1.1rem}
.vhdr p{font-size:.82rem;color:var(--text3);margin-top:4px}
.vhdr-row{display:flex;align-items:flex-start;justify-content:space-between;padding:26px 28px 0}
.vhdr-row h2{font-size:1.3rem;font-weight:900;display:flex;align-items:center;gap:10px}
.vhdr-row h2 i{color:var(--teal)}
.vhdr-row p{font-size:.82rem;color:var(--text3);margin-top:4px}
.sec-divider{
  padding:20px 28px 10px;
  font-size:.82rem;font-weight:800;color:var(--text3);
  display:flex;align-items:center;gap:8px;
  text-transform:uppercase;letter-spacing:.07em;
}
.sec-divider i{color:var(--teal)}

/* ─── SIGNALS BAR ─── */
.signals{
  padding:16px 28px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;
  overflow-x:auto;scrollbar-width:none;
}
.signals::-webkit-scrollbar{display:none}
.signals-lbl{
  font-size:.73rem;font-weight:900;letter-spacing:.09em;
  color:var(--text4);text-transform:uppercase;white-space:nowrap;
  flex-shrink:0;display:flex;align-items:center;gap:6px;
}
.signals-lbl i{color:var(--amber)}
.signals-chips{display:flex;gap:8px;flex-shrink:0}
#topic-list{display:flex;gap:8px}
.topic-chip{
  font-size:.78rem;font-weight:600;padding:6px 14px;
  border-radius:var(--r-f);white-space:nowrap;
  background:var(--card2);border:1px solid var(--border2);
  color:var(--text2);cursor:pointer;
  transition:all var(--d) var(--ease);flex-shrink:0;
}
.topic-chip:hover{background:var(--teal-dim);color:var(--teal);border-color:rgba(20,184,166,.32)}
.signals-more,#topic-toggle{
  font-size:.78rem;color:var(--teal);padding:4px 9px;
  border-radius:7px;white-space:nowrap;flex-shrink:0;
  transition:all var(--d) var(--ease);
}
.signals-more:hover,#topic-toggle:hover{background:var(--teal-dim)}

/* ─── COMPOSER ─── */
.composer{
  border-bottom:1px solid var(--border);
  padding:20px 28px;
  transition:background var(--d) var(--ease);
}
.composer:focus-within{background:rgba(20,184,166,.018)}
.composer-row{display:flex;gap:14px;align-items:flex-start}
.comp-ava,#composer-avatar{
  width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:2px solid var(--border2);background:var(--card3);flex-shrink:0;
}
.comp-body{flex:1;min-width:0}
.comp-editing,#editing-indicator{
  font-size:.77rem;color:var(--amber);margin-bottom:7px;
  display:flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:8px;background:var(--amber-dim);
}
#post-form{width:100%}
.comp-ta,#post-content{
  width:100%;min-height:76px;resize:none;padding:4px 0;
  background:none;border:none;outline:none;
  color:var(--text);font-size:.95rem;line-height:1.65;
}
.comp-ta::placeholder,#post-content::placeholder{color:var(--text3)}
.comp-preview,#post-image-preview{
  border-radius:var(--r-s);overflow:hidden;margin-top:11px;
  position:relative;display:inline-block;
}
.comp-preview img,#post-image-preview img{max-height:240px;border-radius:var(--r-s)}
.remove-preview-btn{
  position:absolute;top:7px;right:7px;
  width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.78);color:#fff;font-size:.72rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background var(--d) var(--ease);border:none;
}
.remove-preview-btn:hover{background:var(--rose)}
.comp-sep{height:1px;background:var(--border);margin:13px 0}
.comp-bar{display:flex;align-items:center;justify-content:space-between}
.comp-tools{display:flex;align-items:center;gap:2px}
.comp-right{display:flex;align-items:center;gap:7px}
.ctool,.comp-tool{
  width:34px;height:34px;border-radius:8px;
  color:var(--text3);font-size:.88rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--d) var(--ease);border:none;background:none;
}
.ctool:hover,.comp-tool:hover{background:var(--teal-dim);color:var(--teal)}
.comp-ctr,#char-counter{
  font-size:.75rem;color:var(--text3);padding:0 4px;
  font-variant-numeric:tabular-nums;font-weight:600;
}
.comp-discard,#discard-draft-btn{
  font-size:.82rem;color:var(--text3);padding:6px 11px;
  border-radius:8px;transition:all var(--d) var(--ease);
}
.comp-discard:hover,#discard-draft-btn:hover{background:var(--card2);color:var(--text2)}
.comp-cancel,#cancel-edit-btn{
  font-size:.82rem;color:var(--rose);padding:6px 11px;
  border-radius:8px;border:1px solid var(--rose-dim);
  display:flex;align-items:center;gap:5px;
  transition:all var(--d) var(--ease);
}
.comp-cancel:hover,#cancel-edit-btn:hover{background:var(--rose-dim)}
.comp-post,#post-submit-btn{
  padding:8px 22px;border-radius:var(--r-f);
  background:linear-gradient(135deg,var(--teal),#059669);
  color:#fff;font-size:.88rem;font-weight:800;
  border:none;cursor:pointer;
  display:flex;align-items:center;gap:7px;
  transition:all var(--d) var(--ease);
}
.comp-post:hover:not(:disabled),#post-submit-btn:hover:not(:disabled){
  transform:translateY(-1px);box-shadow:var(--glow-t);
}
.comp-post:disabled,#post-submit-btn:disabled{opacity:.32;cursor:not-allowed}
.comp-hint{font-size:.74rem;color:var(--text4);margin-top:10px;display:flex;align-items:center;gap:5px}

/* Feed header */
.feed-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px 13px;border-bottom:1px solid var(--border);
}
.feed-title{font-size:.95rem;font-weight:800;color:var(--text2)}
.feed-tabs{
  display:flex;gap:3px;background:var(--card);
  border-radius:9px;padding:3px;border:1px solid var(--border);
}
.ftab{
  padding:6px 16px;border-radius:7px;font-size:.8rem;font-weight:600;
  color:var(--text3);transition:all var(--d) var(--ease);cursor:pointer;
}
.ftab.active{background:var(--card3);color:var(--text)}
.ftab:hover:not(.active){color:var(--text2)}

/* Selected profile banner */
.sel-banner,#selected-profile-card{
  padding:13px 28px;border-bottom:1px solid var(--border);
  background:var(--teal-dim);border-left:3px solid var(--teal);
  animation:slideDown .18s var(--ease);
}

/* ─── SKELETONS ─── */
.sk-wrap,#skeleton-feed{
  display:flex;flex-direction:column;gap:14px;padding:20px 28px;
}
.sk-post{display:flex;gap:14px;animation:skPulse 1.6s ease-in-out infinite}
.sk-ava{width:46px;height:46px;border-radius:50%;background:var(--card2);flex-shrink:0}
.sk-lines{flex:1;display:flex;flex-direction:column;gap:9px;padding-top:4px}
.sk-l{height:13px;border-radius:7px;background:var(--card2)}
.sk-l.w75{width:75%}.sk-l.w55{width:55%}.sk-l.w85{width:85%}
.sk-l.w60{width:60%}.sk-l.w80{width:80%}.sk-l.w50{width:50%}

/* ─── POST CARDS ─── */
.post-list,#post-list{display:flex;flex-direction:column;padding:12px 20px}
.post-list>.post,.post-list>.forum-post,
#post-list>.post{margin-bottom:12px}

.post,.forum-post{
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl);padding:22px;
  transition:all var(--d) var(--ease);
  animation:slideUp .2s var(--ease);
  cursor:default;
}
.post:hover,.forum-post:hover{
  border-color:rgba(255,255,255,.14);
  box-shadow:0 6px 28px rgba(0,0,0,.28);
  transform:translateY(-2px);
}

/* Post head */
.post-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:13px}
.post-head .mini-avatar,.post .mini-avatar{
  width:46px!important;height:46px!important;
  border-radius:50%!important;object-fit:cover!important;
  flex-shrink:0!important;
  border:2px solid rgba(255,255,255,.1)!important;
  background:var(--card3)!important;display:block!important;
}
.post-meta{display:flex;flex-direction:column;gap:1px;flex:1}
.post-meta strong{font-size:.95rem;font-weight:800}
.post-meta .small{font-size:.76rem;color:var(--text3)}

/* Post text */
.post>p{
  font-size:.93rem;line-height:1.7;
  color:var(--text);margin-bottom:12px;word-break:break-word;
}

/* Post image */
.post-image{
  width:100%!important;max-width:100%!important;
  max-height:440px!important;object-fit:cover!important;
  border-radius:var(--r-l)!important;
  margin:11px 0 13px!important;display:block!important;
  cursor:zoom-in;
  border:1px solid rgba(255,255,255,.07)!important;
  transition:opacity var(--d) var(--ease);
}
.post-image:hover{opacity:.93}

/* Tag chips */
.chip-wrap{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.tag-chip{
  font-size:.76rem;padding:4px 11px;border-radius:var(--r-f);
  background:rgba(20,184,166,.1);color:var(--teal);
  cursor:pointer;transition:background var(--d) var(--ease);
  border:1px solid rgba(20,184,166,.2);display:inline-block;
}
.tag-chip:hover{background:var(--teal-dim)}

/* Action bar */
.action-bar{
  display:flex;align-items:center;gap:3px;
  margin-top:13px;padding-top:13px;
  border-top:1px solid rgba(255,255,255,.06);
  flex-wrap:wrap;
}
.action-bar .icon-action{
  padding:7px 13px;border-radius:9px;font-size:.83rem;
  color:var(--text3);display:inline-flex;align-items:center;gap:6px;
  transition:all var(--d) var(--ease);border:none;background:none;cursor:pointer;
}
.action-bar .icon-action:hover{background:var(--teal-dim);color:var(--teal)}
.action-bar .icon-action.active-like{color:var(--rose)}
.action-bar .danger{
  padding:7px 13px;border-radius:9px;font-size:.83rem;
  color:var(--rose);background:none;border:none;cursor:pointer;
  transition:all var(--d) var(--ease);
}
.action-bar .danger:hover{background:var(--rose-dim)}

/* Reply */
.reply-wrap{display:none;margin-top:11px}
.reply-wrap.open{display:block;animation:slideDown .15s var(--ease)}
.reply-wrap .row{display:flex;align-items:center;gap:9px}
.reply-input{
  flex:1;padding:9px 15px;border-radius:var(--r-f);
  background:var(--card2);border:1px solid var(--border);
  color:var(--text);font-size:.88rem;transition:all var(--d) var(--ease);
}
.reply-input:focus{outline:none;border-color:var(--teal)}
.reply-send-btn{
  width:34px;height:34px;border-radius:50%;background:var(--teal);
  color:#fff;border:none;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.88rem;transition:all var(--d) var(--ease);
}
.reply-send-btn:hover{transform:scale(1.1);box-shadow:var(--glow-t)}

/* Comments */
.comment{
  padding:9px 13px;border-radius:var(--r-s);
  background:var(--card2);border-left:2px solid rgba(255,255,255,.08);
  margin-top:7px;font-size:.85rem;
}
.comment strong{font-weight:700;color:var(--text)}
.comment p{margin-top:2px;color:var(--text2)}
.nested-comment{border-left-color:var(--teal)}
.thread-toggle{
  font-size:.8rem;color:var(--teal);padding:4px 9px;border-radius:7px;
  margin-top:7px;cursor:pointer;
  transition:background var(--d) var(--ease);border:none;background:none;
}
.thread-toggle:hover{background:var(--teal-dim)}
.thread-wrap{margin-top:5px;display:flex;flex-direction:column;gap:5px}

/* Feed empty */
.feed-empty{
  padding:64px 24px;text-align:center;color:var(--text3);
  display:flex;flex-direction:column;align-items:center;gap:15px;
}
.feed-empty-icon{font-size:3rem;opacity:.22}
.feed-empty p{font-size:.92rem}
.feed-empty button{
  padding:10px 24px;border-radius:var(--r-f);
  background:var(--teal);color:#fff;border:none;cursor:pointer;
  font-size:.9rem;font-weight:700;transition:all var(--d) var(--ease);
}
.feed-empty button:hover{transform:translateY(-2px);box-shadow:var(--glow-t)}

#feed-sentinel{height:1px}
.load-more,#load-more-posts{
  align-self:center;margin:18px auto;padding:10px 26px;
  border-radius:var(--r-f);border:1px solid var(--border2);
  color:var(--text2);font-size:.9rem;cursor:pointer;
  display:flex;align-items:center;gap:8px;
  transition:all var(--d) var(--ease);
}
.load-more:hover,#load-more-posts:hover{background:var(--card2);color:var(--text)}

/* Reply menu */
.reply-head{display:flex;align-items:center;gap:9px}
.reply-menu{position:relative;margin-left:auto}
.reply-menu-trigger{
  width:26px;height:26px;border-radius:6px;font-size:.88rem;
  color:var(--text3);transition:all var(--d) var(--ease);
  display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;
}
.reply-menu-trigger:hover{background:var(--card3);color:var(--text)}
.reply-menu-panel{
  position:absolute;right:0;top:calc(100% + 5px);
  background:var(--card2);border:1px solid var(--border2);
  border-radius:var(--r-s);min-width:136px;
  box-shadow:var(--sh-l);z-index:50;overflow:hidden;
  animation:slideDown .15s var(--ease);
}
.reply-menu-item{
  width:100%;padding:9px 13px;font-size:.84rem;text-align:left;
  color:var(--text2);display:block;transition:background var(--d) var(--ease);
  border:none;background:none;cursor:pointer;
}
.reply-menu-item:hover{background:var(--card3)}
.reply-menu-item.danger{color:var(--rose)}
.reply-menu-item.danger:hover{background:var(--rose-dim)}
.reply-menu-item.muted{color:var(--text3);cursor:default}

/* ═══════════════════════════════════════════════
   NETWORK
═══════════════════════════════════════════════ */
.net-search{
  position:relative;display:flex;align-items:center;
  margin:18px 28px 15px;
}
.net-search i{position:absolute;left:14px;color:var(--text3);font-size:.85rem;pointer-events:none}
#search-user{
  width:100%;padding:11px 16px 11px 40px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--border2);
  color:var(--text);font-size:.9rem;transition:all var(--d) var(--ease);
}
#search-user:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-dim)}
.user-grid,#user-results,#friend-requests{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px;padding:0 28px;
}
.user-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:20px 16px;
  background:var(--card);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl);transition:all var(--d) var(--ease);text-align:center;
}
.user-card:hover{border-color:rgba(20,184,166,.22);box-shadow:0 6px 22px rgba(0,0,0,.25);transform:translateY(-2px)}
.user-card-ava{
  width:56px;height:56px;border-radius:50%;object-fit:cover;
  background:var(--card3);border:3px solid rgba(255,255,255,.1);cursor:pointer;
  transition:border-color var(--d) var(--ease);
}
.user-card:hover .user-card-ava{border-color:var(--teal)}
.user-card-name{font-size:.92rem;font-weight:800;color:var(--text)}
.user-card-sub{font-size:.76rem;color:var(--text3);margin-top:1px}
.user-card-status{
  display:flex;align-items:center;justify-content:center;
  gap:6px;margin-top:2px;font-size:.75rem;color:var(--text3);
}
.sdot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.sdot.online{background:var(--green);animation:glow 3s ease-in-out infinite}
.sdot.offline{background:var(--text4)}
.user-card-actions{display:flex;gap:7px;margin-top:4px}
.follow-btn{
  padding:7px 16px;border-radius:var(--r-f);
  background:var(--teal-dim);border:1px solid rgba(20,184,166,.3);
  color:var(--teal);font-size:.82rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:5px;
  transition:all var(--d) var(--ease);
}
.follow-btn:hover{background:var(--teal);color:#fff;border-color:var(--teal);transform:translateY(-1px)}
.follow-btn:disabled{opacity:.48;cursor:not-allowed;transform:none}
.follow-btn.friends{background:var(--green-dim);border-color:rgba(74,222,128,.3);color:var(--green)}
.pending-badge{
  font-size:.73rem;color:var(--amber);padding:3px 9px;
  border-radius:var(--r-f);background:var(--amber-dim);
}
.row{
  display:flex;align-items:center;gap:11px;padding:12px 16px;
  background:var(--card);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-l);transition:all var(--d) var(--ease);
}
.row:hover{border-color:rgba(255,255,255,.13)}
.clickable-user{flex:1;cursor:pointer;font-size:.9rem}
.clickable-user:hover{color:var(--teal)}
.actions{display:flex;gap:5px;align-items:center}

/* ═══════════════════════════════════════════════
   FORUM
═══════════════════════════════════════════════ */
.forum-grid{display:grid;grid-template-columns:210px 1fr;min-height:420px;margin-top:16px}
.forum-aside,#forum-topic-list{
  border-right:1px solid var(--border);padding:10px 9px;
  display:flex;flex-direction:column;gap:4px;overflow-y:auto;
}
.forum-topic-btn{
  width:100%;text-align:left;padding:11px 13px;
  border-radius:var(--r-s);border:none;background:none;cursor:pointer;
  transition:all var(--d) var(--ease);display:flex;flex-direction:column;gap:2px;
}
.forum-topic-btn strong{font-size:.88rem;color:var(--text2)}
.forum-topic-btn .small{font-size:.74rem;color:var(--text3)}
.forum-topic-btn:hover{background:var(--card2)}
.forum-topic-btn.active{background:var(--teal-dim);border-left:2px solid var(--teal)}
.forum-topic-btn.active strong{color:var(--teal)}
.forum-main{display:flex;flex-direction:column;gap:13px;padding:18px 22px}
.forum-banner,#forum-topic-header{
  padding:13px 17px;border-radius:var(--r-s);
  background:var(--teal-dim);color:var(--teal);
  font-size:.9rem;display:flex;align-items:center;gap:9px;
  border:1px solid rgba(20,184,166,.22);
}
.forum-tabs{
  display:flex;gap:3px;background:var(--card);
  border-radius:var(--r-s);padding:3px;align-self:flex-start;
  border:1px solid var(--border);
}
.ftab-forum{
  padding:7px 16px;border-radius:7px;font-size:.84rem;font-weight:600;
  color:var(--text3);transition:all var(--d) var(--ease);
  display:flex;align-items:center;gap:7px;cursor:pointer;border:none;background:none;
}
.ftab-forum.active{background:var(--card3);color:var(--text)}
.forum-compose,#forum-post-form{
  background:var(--card);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl);padding:18px;
  display:flex;flex-direction:column;gap:11px;
}
.forum-compose textarea,#forum-post-input{
  width:100%;min-height:110px;resize:vertical;padding:11px 15px;
  border-radius:var(--r-s);background:var(--bg2);
  border:1px solid var(--border2);color:var(--text);font-size:.9rem;
  transition:all var(--d) var(--ease);
}
.forum-compose textarea:focus,#forum-post-input:focus{
  outline:none;border-color:var(--teal);
}
.forum-compose-foot{display:flex;align-items:center;justify-content:space-between}
.fvis,#forum-visibility{
  padding:7px 13px;border-radius:8px;background:var(--bg2);
  border:1px solid var(--border2);color:var(--text);font-size:.82rem;cursor:pointer;
}
.manage-card{
  background:var(--card);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl);padding:22px;
}
.manage-card h3{font-size:.94rem;font-weight:800;margin-bottom:16px}
.manage-form{display:flex;flex-direction:column;gap:11px}
.manage-form input,.manage-form textarea,
#forum-topic-name,#forum-topic-description{
  width:100%;padding:11px 15px;border-radius:var(--r-s);
  background:var(--bg2);border:1px solid var(--border2);
  color:var(--text);font-size:.9rem;transition:all var(--d) var(--ease);
}
.manage-form input:focus,.manage-form textarea:focus,
#forum-topic-name:focus,#forum-topic-description:focus{
  outline:none;border-color:var(--teal);
}
.manage-form textarea,#forum-topic-description{min-height:82px;resize:vertical}
.forum-comment{
  padding:7px 11px;font-size:.84rem;color:var(--text2);
  border-left:2px solid var(--border2);margin-top:5px;
}
.forum-comments{margin-top:9px}
.forum-comment-form{display:flex;gap:9px;margin-top:9px}
.forum-comment-form input{
  flex:1;padding:8px 13px;border-radius:var(--r-f);
  background:var(--bg2);border:1px solid var(--border2);
  color:var(--text);font-size:.84rem;transition:all var(--d) var(--ease);
}
.forum-comment-form input:focus{outline:none;border-color:var(--teal)}
.forum-comment-form button{
  padding:8px 15px;border-radius:var(--r-f);background:var(--teal);
  color:#fff;font-size:.82rem;font-weight:700;border:none;cursor:pointer;
  transition:all var(--d) var(--ease);
}
.forum-comment-form button:hover{background:var(--teal-l)}

/* ═══════════════════════════════════════════════
   MESSAGES
═══════════════════════════════════════════════ */
.dm-grid{
  display:grid;grid-template-columns:250px 1fr;
  height:calc(100vh - var(--tb-h) - 108px);margin-top:18px;min-height:420px;
}
.dm-aside,#dm-friend-list{
  border-right:1px solid var(--border);overflow-y:auto;
  padding:9px;display:flex;flex-direction:column;gap:3px;
}
.dm-panel{display:flex;flex-direction:column;position:relative;overflow:hidden}
.dm-empty,#dm-empty-state{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:15px;color:var(--text3);text-align:center;padding:44px;
}
.dm-empty-ico{
  width:76px;height:76px;border-radius:50%;
  background:var(--card2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;color:var(--teal);
}
.dm-empty h3{font-size:.98rem;color:var(--text2);font-weight:700}
.dm-empty p{font-size:.82rem}
.dm-friend-item{
  width:100%;padding:11px 13px;border-radius:var(--r-s);
  background:none;border:none;cursor:pointer;text-align:left;
  transition:all var(--d) var(--ease);position:relative;
}
.dm-friend-item:hover{background:var(--card)}
.dm-friend-item.active{background:var(--teal-dim);border-left:2px solid var(--teal)}
.dm-conv-head{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.dm-conv-head strong{font-size:.87rem;font-weight:700;color:var(--text);flex:1}
.dm-conv-head .small{font-size:.72rem;color:var(--text3)}
.dm-preview{color:var(--text3)!important;font-size:.8rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-unread{
  position:absolute;top:11px;right:11px;min-width:19px;height:19px;
  border-radius:var(--r-f);background:var(--teal);color:#fff;
  font-size:.66rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
}
.dm-presence-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--text4)}
.dm-presence-dot.online{background:var(--green);animation:glow 3s ease-in-out infinite}
.dm-presence-dot.idle{background:var(--amber)}
.dm-hdr,#dm-chat-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 17px;border-bottom:1px solid var(--border);
  flex-shrink:0;background:var(--bg);
}
.dm-hdr-user{display:flex;align-items:center;gap:11px}
.dm-ava,#dm-chat-avatar{
  width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--card3);
}
.dm-hdr strong,#dm-chat-name{font-size:.9rem;display:block}
.dm-stat-txt,#dm-chat-status{font-size:.74rem;color:var(--text3)}
.dm-hdr-acts{display:flex;gap:3px}
.icon-btn{
  width:34px;height:34px;border-radius:8px;color:var(--text3);
  display:flex;align-items:center;justify-content:center;
  font-size:.88rem;transition:all var(--d) var(--ease);
}
.icon-btn:hover{background:var(--card3);color:var(--text)}
.msg-thread,#message-thread{
  flex:1;overflow-y:auto;padding:17px;
  display:flex;flex-direction:column;gap:11px;
}
.message-bubble{
  max-width:74%;width:fit-content;padding:11px 15px;
  border-radius:var(--r-l) var(--r-l) var(--r-l) var(--r-xs);
  background:var(--card2);border:1px solid var(--border);
  align-self:flex-start;animation:slideUp .16s var(--ease);word-break:break-word;
}
.message-bubble.mine{
  align-self:flex-end;
  background:linear-gradient(135deg,var(--teal),#059669);
  border-color:transparent;
  border-radius:var(--r-l) var(--r-l) var(--r-xs) var(--r-l);
}
.message-bubble strong{font-size:.8rem;font-weight:600;display:block;margin-bottom:4px;opacity:.65}
.message-bubble p{font-size:.9rem;line-height:1.55}
.message-bubble .small{font-size:.7rem;margin-top:7px;opacity:.55;display:block}
.message-bubble .actions{display:flex;gap:2px;margin-top:7px}
.message-image{max-width:100%;border-radius:var(--r-s);margin-top:7px;cursor:zoom-in}
.message-reply-ref{
  font-size:.77rem;color:rgba(255,255,255,.48);padding:5px 9px;
  border-left:2px solid rgba(255,255,255,.28);border-radius:0 5px 5px 0;
  margin-bottom:7px;background:rgba(0,0,0,.22);
}
.typing-ind,#typing-indicator{
  padding:7px 17px;font-size:.77rem;color:var(--text3);
  display:flex;align-items:center;gap:9px;flex-shrink:0;
}
.tdots{display:flex;gap:3px;align-items:center}
.tdots span{
  width:5px;height:5px;border-radius:50%;
  background:var(--text3);animation:bounce 1.2s infinite;
}
.tdots span:nth-child(2){animation-delay:.2s}
.tdots span:nth-child(3){animation-delay:.4s}
.scroll-dn,#dm-scroll-bottom{
  position:absolute;bottom:86px;right:15px;
  width:32px;height:32px;border-radius:50%;
  background:var(--card3);border:1px solid var(--border2);
  color:var(--text2);display:flex;align-items:center;justify-content:center;
  font-size:.84rem;cursor:pointer;transition:all var(--d) var(--ease);
}
.scroll-dn:hover,#dm-scroll-bottom:hover{background:var(--teal);color:#fff}
.msg-form,#message-form{
  padding:11px 15px;border-top:1px solid var(--border);
  flex-shrink:0;background:var(--bg);
}
.msg-input-wrap{
  display:flex;align-items:flex-end;gap:7px;
  background:var(--card);border:1px solid var(--border2);
  border-radius:var(--r-xl);padding:9px 9px 9px 15px;
  transition:border-color var(--d) var(--ease);
}
.msg-input-wrap:focus-within{border-color:var(--teal)}
#message-input{
  flex:1;background:none;border:none;outline:none;resize:none;
  color:var(--text);font-size:.9rem;line-height:1.55;
  min-height:24px;max-height:104px;
}
#message-input::placeholder{color:var(--text3)}
.msg-tools{display:flex;align-items:center;gap:2px;flex-shrink:0}
.mtool{
  width:32px;height:32px;border-radius:8px;color:var(--text3);
  display:flex;align-items:center;justify-content:center;
  font-size:.88rem;cursor:pointer;transition:all var(--d) var(--ease);
  border:none;background:none;
}
.mtool:hover{background:var(--teal-dim);color:var(--teal)}
.msg-send-btn,#message-send{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal),#059669);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:.84rem;cursor:pointer;transition:all var(--d) var(--ease);
  border:none;flex-shrink:0;
}
.msg-send-btn:hover,#message-send:hover{transform:scale(1.12);box-shadow:var(--glow-t)}
.file-label,#message-image-name{
  padding:4px 15px;font-size:.75rem;color:var(--text3);
  display:flex;align-items:center;gap:5px;
}
.dm-hint{padding:4px 15px 9px;font-size:.72rem;color:var(--text4)}

/* ═══════════════════════════════════════════════
   PROFILE
═══════════════════════════════════════════════ */
.profile-banner,#profile-activity-summary{
  padding:24px 28px;border-bottom:1px solid var(--border);
}
.profile-cols{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--border);
}
.pcol{padding:20px 28px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.pcol.full{grid-column:1/-1;border-right:none}
.profile-cols .pcol:last-child{border-right:none}
.pcol-title{
  font-size:.88rem;font-weight:800;color:var(--text2);margin-bottom:13px;
  display:flex;align-items:center;gap:8px;padding-bottom:11px;
  border-bottom:1px solid var(--border);
}
.pcol-title i{color:var(--teal)}
.mini-avatar{
  width:38px;height:38px;border-radius:50%;object-fit:cover;
  background:var(--card3);flex-shrink:0;
}
.profile-mini{display:flex;align-items:center;gap:11px}

/* ═══════════════════════════════════════════════
   NOTIFICATIONS
═══════════════════════════════════════════════ */
.notif-list,#notification-list{display:flex;flex-direction:column}
.notif-item{
  padding:15px 28px;border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;gap:3px;
  transition:background var(--d) var(--ease);
}
.notif-item:hover{background:rgba(255,255,255,.015)}
.notif-item.unread{background:rgba(20,184,166,.04);border-left:3px solid var(--teal)}
.notif-item p{font-size:.9rem}
.notif-item .small{font-size:.75rem;color:var(--text3)}
.notif-row-unread{background:rgba(20,184,166,.04);border-left:3px solid var(--teal)}
.item{
  padding:13px 15px;border-radius:var(--r-l);
  background:var(--card);border:1px solid rgba(255,255,255,.08);font-size:.9rem;
}

/* ═══════════════════════════════════════════════
   SETTINGS
═══════════════════════════════════════════════ */
.settings-form{display:flex;flex-direction:column}
.setsec{border-bottom:1px solid var(--border);transition:background var(--d) var(--ease)}
.setsec:hover{background:rgba(255,255,255,.01)}
.setsec-head{padding:22px 28px 15px}
.setsec-head h3{
  font-size:1.02rem;font-weight:800;color:var(--text);
  display:flex;align-items:center;gap:9px;
}
.setsec-head h3 i{font-size:.95rem}
.setsec-head p{font-size:.8rem;color:var(--text3);margin-top:4px}
.setsec-body{padding:0 28px 22px;display:flex;flex-direction:column;gap:15px}
.sf{display:flex;flex-direction:column;gap:7px;max-width:500px}
.sf label{font-size:.82rem;font-weight:700;color:var(--text2)}
.sf input[type="text"],.sf input[type="email"],.sf input[type="password"],
#status-input,#new-password,#new-email{
  padding:11px 15px;border-radius:var(--r-s);
  background:var(--card);border:1px solid var(--border2);
  color:var(--text);font-size:.9rem;
  transition:all var(--d) var(--ease);width:100%;
}
.sf input:focus,#status-input:focus,#new-password:focus,#new-email:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-dim);
}
.sf-file-row{display:flex;align-items:center;gap:11px}
.sf-file-btn{
  padding:9px 15px;border-radius:var(--r-s);font-size:.82rem;
  background:var(--card2);border:1px solid var(--border2);
  color:var(--text2);cursor:pointer;transition:all var(--d) var(--ease);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
}
.sf-file-btn:hover{background:var(--card3);color:var(--text)}
.sf-fname,#profile-image-name{font-size:.77rem;color:var(--text3)}
.sf-toggle{display:flex;align-items:center;justify-content:space-between;gap:22px}
.sf-tlabel{font-size:.9rem;font-weight:600;display:block}
.sf-tsub{font-size:.77rem;color:var(--text3);margin-top:2px;display:block}
.toggle-switch{position:relative;flex-shrink:0;cursor:pointer}
.toggle-switch input{position:absolute;opacity:0;width:0;height:0}
.ts-track{
  display:flex;align-items:center;width:46px;height:26px;
  border-radius:var(--r-f);background:var(--card3);
  border:1px solid var(--border2);transition:all var(--d2) var(--ease);
  padding:2px;cursor:pointer;
}
.toggle-switch input:checked+.ts-track{background:var(--teal);border-color:var(--teal)}
.ts-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--text3);
  transition:all var(--d2) var(--ease-b);
}
.toggle-switch input:checked+.ts-track .ts-thumb{background:#fff;transform:translateX(20px)}
.settings-save{
  margin:22px 28px;padding:12px 30px;border-radius:var(--r);
  background:linear-gradient(135deg,var(--teal),#059669);
  color:#fff;font-size:.94rem;font-weight:800;
  border:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  transition:all var(--d) var(--ease);align-self:flex-start;
}
.settings-save:hover{transform:translateY(-2px);box-shadow:var(--glow-t)}

/* ═══════════════════════════════════════════════
   RIGHT SIDEBAR
═══════════════════════════════════════════════ */
.rsb,#right-panel{
  position:sticky;top:var(--tb-h);height:calc(100vh - var(--tb-h));
  overflow-y:auto;padding:15px 13px;
  display:flex;flex-direction:column;gap:13px;background:var(--bg);
}
.rcard{
  background:var(--card);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl);overflow:hidden;
  transition:border-color var(--d) var(--ease);
}
.rcard:hover{border-color:rgba(255,255,255,.13)}
.rcard-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 15px;border-bottom:1px solid var(--border);
}
.rcard-title{font-size:.84rem;font-weight:800;display:flex;align-items:center;gap:8px}
.live-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--green);display:inline-block;animation:glow 2.5s ease-in-out infinite;
}
.rmark,#mark-all-read-panel{
  font-size:.73rem;color:var(--text3);padding:3px 9px;
  border-radius:7px;transition:all var(--d) var(--ease);
  display:flex;align-items:center;gap:4px;
}
.rmark:hover,#mark-all-read-panel:hover{background:var(--card3);color:var(--text2)}
.rcard-body{padding:11px;display:flex;flex-direction:column;gap:6px}
.rsearch{
  position:relative;display:flex;align-items:center;
  background:var(--bg2);border-radius:9px;border:1px solid var(--border);
}
.rsearch i{position:absolute;left:10px;font-size:.8rem;color:var(--text3);pointer-events:none}
#online-search{
  width:100%;padding:8px 11px 8px 31px;
  background:none;border:none;color:var(--text);font-size:.82rem;
}
#online-search:focus{outline:none}
.rlist,#online-friends-list{display:flex;flex-direction:column;gap:5px;min-height:22px;padding:0 2px 3px}
.radd,#online-add-friend-cta{
  width:100%;padding:9px;border-radius:9px;
  border:1px dashed rgba(255,255,255,.1);font-size:.8rem;color:var(--text3);
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:all var(--d) var(--ease);margin-top:4px;cursor:pointer;
}
.radd:hover,#online-add-friend-cta:hover{
  background:var(--teal-dim);color:var(--teal);border-color:rgba(20,184,166,.32);
}
.trend-item{
  display:flex;align-items:center;gap:11px;padding:9px 11px;
  border-radius:var(--r-s);transition:background var(--d) var(--ease);cursor:pointer;
}
.trend-item:hover{background:var(--card2)}
.trend-info{flex:1;min-width:0}
.trend-tag{font-size:.84rem;font-weight:800;color:var(--text)}
.trend-cnt{font-size:.74rem;color:var(--text3);margin-top:1px}
.trend-plus{
  width:27px;height:27px;border-radius:50%;
  border:1px solid var(--border2);color:var(--text3);
  display:flex;align-items:center;justify-content:center;
  font-size:.84rem;transition:all var(--d) var(--ease);flex-shrink:0;
}
.trend-plus:hover{background:var(--teal);color:#fff;border-color:var(--teal)}

/* ═══════════════════════════════════════════════
   SHARED BUTTONS
═══════════════════════════════════════════════ */
.ac-btn{
  padding:9px 20px;border-radius:var(--r-s);
  background:linear-gradient(135deg,var(--teal),#059669);
  color:#fff;font-size:.9rem;font-weight:800;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:all var(--d) var(--ease);
}
.ac-btn:hover{transform:translateY(-1px);box-shadow:var(--glow-t)}
.ac-btn.sm{padding:7px 13px;font-size:.8rem}
.icon-action{
  padding:6px 11px;border-radius:8px;font-size:.83rem;
  color:var(--text3);display:inline-flex;align-items:center;gap:6px;
  transition:all var(--d) var(--ease);border:none;background:none;cursor:pointer;
}
.icon-action:hover{background:var(--teal-dim);color:var(--teal)}
.icon-action.active-like{color:var(--rose)}
.danger{
  padding:6px 11px;border-radius:8px;font-size:.83rem;
  color:var(--rose);background:none;border:none;cursor:pointer;
  transition:all var(--d) var(--ease);
}
.danger:hover{background:var(--rose-dim)}

/* ═══════════════════════════════════════════════
   CONFIRM MODAL
═══════════════════════════════════════════════ */
.confirm-modal-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.72);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(7px);animation:fadeIn .18s var(--ease);
}
.confirm-modal{
  background:var(--card2);border:1px solid var(--border2);
  border-radius:var(--r-xl);padding:28px;
  min-width:310px;max-width:420px;
  box-shadow:var(--sh-xl);animation:scaleIn .2s var(--ease-b);
}
.confirm-modal p{font-size:.93rem;margin-bottom:22px;line-height:1.65}
.confirm-modal-actions{display:flex;gap:9px;justify-content:flex-end}
.confirm-modal-actions button{
  padding:9px 20px;border-radius:var(--r-s);font-size:.9rem;
  border:1px solid var(--border2);color:var(--text2);
  cursor:pointer;transition:all var(--d) var(--ease);background:none;
}
.confirm-modal-actions button:hover{background:var(--card3);color:var(--text)}
.confirm-modal-actions button.danger{background:var(--rose);border-color:var(--rose);color:#fff}
.confirm-modal-actions button.danger:hover{background:#e0304f}

/* ─── MISC ─── */
#active-status{font-size:.8rem;color:var(--text3)}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media(max-width:1280px){:root{--rb-w:255px}}
@media(max-width:1100px){:root{--sb-w:240px;--rb-w:230px}}

@media(max-width:1024px){
  .rsb,#right-panel{display:none}
  .layout{grid-template-columns:var(--sb-w) 1fr}
  .center{border-right:none}
}

@media(max-width:820px){
  :root{--sb-w:0px}
  .ham-btn{display:flex!important}
  .sidebar{
    position:fixed;top:var(--tb-h);left:0;bottom:0;width:272px;
    z-index:150;transform:translateX(-101%);
    box-shadow:none;
    border-right:1px solid rgba(20,184,166,.18);
  }
  .sidebar.open{
    transform:translateX(0);
    box-shadow:10px 0 52px rgba(0,0,0,.72);
  }
  .layout{grid-template-columns:1fr}
  .center{padding-bottom:78px}
  .tb-name{display:none}
  .forum-grid{grid-template-columns:1fr}
  .forum-aside,#forum-topic-list{border-right:none;border-bottom:1px solid var(--border)}
  .dm-grid{grid-template-columns:1fr;height:auto}
  .dm-aside,#dm-friend-list{max-height:210px}
  .profile-cols{grid-template-columns:1fr}
  .profile-cols .pcol{border-right:none}
  .user-grid,#user-results,#friend-requests{grid-template-columns:1fr}
  .setsec-body,.setsec-head{padding-left:20px;padding-right:20px}
  .settings-save{margin:18px 20px}
}

@media(max-width:520px){
  .auth-card{padding:28px 20px}
  :root{--tb-h:56px}
  .comp-bar{flex-wrap:wrap;gap:9px}
  .action-bar .icon-action{padding:6px 9px;font-size:.78rem}
  .topbar{padding:0 13px;gap:9px}
  .post-list,#post-list{padding:9px 11px}
  .post,.forum-post{padding:16px}
  .composer{padding:16px 18px}
  .vhdr,.vhdr-row{padding:18px 18px 0}
  .signals{padding:14px 18px}
  .feed-hdr{padding:13px 18px}
}
/* ═══════════════════════════════════════════════
   EXPLORE / NETWORK — SOC Dashboard Style
═══════════════════════════════════════════════ */

/* Command-line search bar */
.net-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 20px 28px 6px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(20,184,166,.35);
  border-radius: var(--r-s);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 18px rgba(20,184,166,.08);
  transition: all .2s;
}
.net-search:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20,184,166,.12), 0 0 24px rgba(20,184,166,.18);
}
.net-search::before {
  content: '>';
  color: var(--teal);
  font-family: 'JetBrains Mono','Fira Code','Courier New',monospace;
  font-size: .95rem;
  font-weight: 700;
  padding: 0 4px 0 14px;
  flex-shrink: 0;
  opacity: .85;
}
.net-search i { display: none; }
#search-user {
  width: 100%;
  padding: 12px 14px 12px 6px;
  border-radius: var(--r-s);
  background: none;
  border: none;
  color: var(--teal);
  font-family: 'JetBrains Mono','Fira Code','Courier New',monospace;
  font-size: .88rem;
  letter-spacing: .03em;
}
#search-user::placeholder {
  color: rgba(20,184,166,.38);
  font-style: italic;
}
#search-user:focus { outline: none; }

/* Network stats bar */
.net-stats-bar {
  display: flex;
  gap: 10px;
  padding: 10px 28px 18px;
  font-family: 'JetBrains Mono','Fira Code',monospace;
  font-size: .73rem;
  color: var(--text3);
}
.net-stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(20,184,166,.06);
  border: 1px solid rgba(20,184,166,.14);
  border-radius: 5px;
}
.net-stat-item i { color: var(--teal); font-size: .75rem; }

/* Recommended professionals horizontal scroll */
.net-recommended {
  padding: 0 28px 20px;
}
.net-recommended-title {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--text4);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.net-recommended-title i { color: var(--teal); }
.net-recommended-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.net-recommended-scroll::-webkit-scrollbar { display: none; }
.net-rec-card {
  flex-shrink: 0;
  width: 130px;
  background: rgba(20,184,166,.04);
  border: 1px solid rgba(20,184,166,.12);
  border-radius: var(--r);
  padding: 14px 12px;
  text-align: center;
  transition: all .18s;
  cursor: pointer;
}
.net-rec-card:hover {
  border-color: rgba(20,184,166,.32);
  background: rgba(20,184,166,.09);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(20,184,166,.1);
}
.net-rec-ava {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(20,184,166,.3);
  margin: 0 auto 8px;
  background: var(--card3);
  display: block;
}
.net-rec-name {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.net-rec-role {
  font-size: .68rem;
  color: var(--teal);
  margin-top: 2px;
  font-family: 'JetBrains Mono','Courier New',monospace;
}
.net-rec-btn {
  margin-top: 9px;
  width: 100%;
  padding: 5px;
  border-radius: 6px;
  font-size: .73rem;
  font-weight: 700;
  background: rgba(20,184,166,.12);
  border: 1px solid rgba(20,184,166,.25);
  color: var(--teal);
  cursor: pointer;
  transition: all .16s;
}
.net-rec-btn:hover {
  background: var(--teal);
  color: #fff;
}

/* Grid section label */
.net-grid-label {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--text4);
  text-transform: uppercase;
  padding: 4px 28px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.net-grid-label i { color: var(--teal); }

/* Operator cards grid */
.user-grid, #user-results, #friend-requests {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 0 28px;
}

/* Operator card */
.net-op-card {
  background: rgba(10,26,21,.65);
  border: 1px solid rgba(20,184,166,.14);
  border-radius: var(--r);
  overflow: hidden;
  transition: all .18s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.net-op-card:hover {
  border-color: rgba(20,184,166,.32);
  box-shadow: 0 6px 24px rgba(0,0,0,.3), 0 0 18px rgba(20,184,166,.08);
  transform: translateY(-2px);
}
.noc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 6px;
  background: rgba(20,184,166,.06);
  border-bottom: 1px solid rgba(20,184,166,.1);
}
.noc-status-bar { display: flex; align-items: center; gap: 5px; }
.noc-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.noc-status-dot.online {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: glow 2.5s ease-in-out infinite;
}
.noc-status-dot.idle { background: var(--amber); }
.noc-status-dot.offline { background: var(--text4); }
.noc-status-txt {
  font-family: 'JetBrains Mono','Courier New',monospace;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text3);
}
.noc-view-btn {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  color: var(--text3);
  font-size: .72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.noc-view-btn:hover { background: var(--teal-dim); color: var(--teal); }
.noc-body {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  cursor: pointer;
}
.noc-ava-wrap { position: relative; flex-shrink: 0; }
.noc-ava {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(20,184,166,.22);
  background: var(--card3);
  display: block;
}
.noc-ava-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--card);
}
.noc-ava-dot.online { background: var(--green); animation: glow 2.5s ease-in-out infinite; }
.noc-ava-dot.idle { background: var(--amber); }
.noc-ava-dot.offline { background: var(--text4); }
.noc-info { flex: 1; min-width: 0; }
.noc-handle {
  font-size: .85rem;
  font-weight: 800;
  font-family: 'JetBrains Mono','Courier New',monospace;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.noc-meta {
  font-size: .72rem;
  color: var(--text3);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.noc-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 10px;
  border-top: 1px solid rgba(255,255,255,.05);
  flex-wrap: wrap;
}
.noc-btn {
  flex: 1;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: .76rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all .16s;
  cursor: pointer;
  border: 1px solid transparent;
}
.noc-btn-add {
  background: rgba(20,184,166,.1);
  border-color: rgba(20,184,166,.28);
  color: var(--teal);
}
.noc-btn-add:hover:not(:disabled) {
  background: var(--teal);
  color: #fff;
  transform: translateY(-1px);
}
.noc-btn-pending {
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.22);
  color: var(--amber);
  cursor: not-allowed;
}
.noc-btn-msg {
  background: rgba(124,58,237,.1);
  border-color: rgba(124,58,237,.28);
  color: var(--accent-l);
}
.noc-btn-msg:hover {
  background: var(--accent);
  color: #fff;
}
.noc-btn-rej {
  background: var(--rose-dim);
  border-color: rgba(244,63,94,.28);
  color: var(--rose);
}
.noc-btn-rej:hover { background: var(--rose); color: #fff; }
.noc-btn.sm { flex: 0 0 auto; padding: 5px 9px; font-size: .72rem; }
.noc-connected {
  font-size: .72rem;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: .7;
}

/* Empty & request states */
.net-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--text3);
}
.net-empty-icon {
  font-size: 2.2rem;
  opacity: .22;
  color: var(--teal);
}
.net-empty-title {
  font-size: .92rem;
  font-weight: 700;
  font-family: 'JetBrains Mono','Courier New',monospace;
  color: var(--text2);
}
.net-empty-sub { font-size: .8rem; }
.net-no-requests {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  font-size: .82rem;
  color: var(--text3);
  background: rgba(255,255,255,.02);
  border-radius: var(--r-s);
  border: 1px dashed var(--border);
}
.net-req-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r);
  transition: all .18s;
}
.net-req-row:hover { border-color: rgba(20,184,166,.18); }
.net-req-ava {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.08);
}
.net-req-info { flex: 1; min-width: 0; }
.net-req-info strong { font-size: .88rem; display: block; }
.net-req-info span { font-size: .74rem; color: var(--text3); }
.net-req-acts { display: flex; gap: 6px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════
   RIGHT SIDEBAR — Trending pulse & empty states
═══════════════════════════════════════════════ */

/* Live pulse on trending tags */
@keyframes trendPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.85); }
}
.trend-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose);
  flex-shrink: 0;
  animation: trendPulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 6px var(--rose);
}
.trend-item { position: relative; }
.trend-item:hover .trend-live-dot { animation-play-state: paused; }

/* Scanning animation for empty online state */
@keyframes scanDot {
  0%, 80%, 100% { transform: scale(0); opacity: 0; }
  40%           { transform: scale(1); opacity: 1; }
}
.rsb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 10px;
  text-align: center;
}
.rsb-scanning {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
.scan-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  animation: scanDot 1.4s ease-in-out infinite;
}
.scan-dot:nth-child(2) { animation-delay: .16s; }
.scan-dot:nth-child(3) { animation-delay: .32s; }
.rsb-empty-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text2);
  font-family: 'JetBrains Mono','Courier New',monospace;
  letter-spacing: .02em;
}
.rsb-empty-sub {
  font-size: .73rem;
  color: var(--text3);
  font-style: italic;
}

/* Alerts items */
.rsb-alert-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background .16s;
  border-left: 2px solid transparent;
}
.rsb-alert-item:hover { background: var(--card2); }
.rsb-alert-item.unread {
  border-left-color: var(--teal);
  background: rgba(20,184,166,.04);
}
.rsb-alert-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  margin-top: 5px;
  animation: trendPulse 2s ease-in-out infinite;
}
.rsb-alert-text {
  font-size: .78rem;
  color: var(--text2);
  line-height: 1.45;
}
/* Always-visible Delete button for post owner */
.post-delete-btn{
  padding: 7px 12px;
  border-radius: 9px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;

  color: #fecaca; /* soft red */
  background: rgba(244,63,94,.10);
  border: 1px solid rgba(244,63,94,.28);

  cursor: pointer;
  transition: all .16s ease;
}
.post-delete-btn:hover{
  background: rgba(244,63,94,.20);
  border-color: rgba(244,63,94,.45);
  transform: translateY(-1px);
}
.post-delete-btn:active{
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════
   STORIES BAR
═══════════════════════════════════════════════ */
.stories-section{
  padding:16px 20px 0;
  border-bottom:1px solid var(--border);
}
.stories-scroll{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding-bottom:16px;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
}
.stories-scroll::-webkit-scrollbar{display:none}
.story-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  flex-shrink:0;cursor:pointer;scroll-snap-align:start;
  transition:transform .18s var(--ease);
  min-width:68px;
}
.story-item:hover{transform:scale(1.06)}
.story-item:active{transform:scale(.96)}
.story-ring{
  width:62px;height:62px;border-radius:50%;
  padding:3px;
  background:linear-gradient(135deg,var(--card3),var(--card2));
  display:flex;align-items:center;justify-content:center;
  position:relative;
  transition:all .2s var(--ease);
}
.story-ring.has-story{
  background:linear-gradient(135deg,#f43f5e,#f59e0b,#14b8a6,#7c3aed);
  background-size:300% 300%;
  animation:storyGradient 4s ease infinite;
}
.story-ring.create{
  background:var(--card2);
  border:2px dashed rgba(20,184,166,.35);
}
@keyframes storyGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.story-ava{
  width:54px;height:54px;border-radius:50%;object-fit:cover;
  border:3px solid var(--bg);background:var(--card3);
  display:block;
}
.story-avatar-wrap{position:relative}
.story-plus{
  position:absolute;bottom:-2px;right:-2px;
  width:22px;height:22px;border-radius:50%;
  background:var(--teal);color:#fff;
  font-size:.85rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);
  box-shadow:0 2px 8px var(--teal-gw);
}
.story-name{
  font-size:.68rem;font-weight:600;color:var(--text3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:68px;text-align:center;
}

/* ═══════════════════════════════════════════════
   EMOJI REACTION PICKER
═══════════════════════════════════════════════ */
.reaction-wrap{
  position:relative;
  display:inline-flex;
}
.reaction-picker{
  position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) scale(.85);
  background:var(--card2);
  border:1px solid var(--border2);
  border-radius:var(--r-f);
  padding:6px 8px;
  display:flex;gap:4px;
  box-shadow:var(--sh-l);
  opacity:0;pointer-events:none;
  transition:all .16s var(--ease-b);
  z-index:50;
  white-space:nowrap;
}
.reaction-wrap:hover .reaction-picker{
  opacity:1;pointer-events:all;
  transform:translateX(-50%) scale(1);
}
.reaction-emoji{
  width:32px;height:32px;border-radius:50%;
  font-size:1.15rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:none;background:none;
  transition:transform .12s var(--ease-b);
}
.reaction-emoji:hover{
  transform:scale(1.35);
  background:rgba(255,255,255,.08);
  border-radius:50%;
}

/* ═══════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION
═══════════════════════════════════════════════ */
.mobile-bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  height:68px;
  background:rgba(11,15,25,.88);
  backdrop-filter:blur(28px) saturate(1.5);
  -webkit-backdrop-filter:blur(28px) saturate(1.5);
  border-top:1px solid var(--border);
  align-items:center;justify-content:space-around;
  padding:0 8px;
  box-shadow:0 -4px 24px rgba(0,0,0,.35);
}
.mob-nav-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 14px;border-radius:var(--r);
  color:var(--text3);font-size:.68rem;font-weight:600;
  cursor:pointer;border:none;background:none;
  transition:all .18s var(--ease);position:relative;
}
.mob-nav-item i{font-size:1.1rem;transition:transform .18s var(--ease-b)}
.mob-nav-item span{font-size:.64rem}
.mob-nav-item.active{color:var(--teal)}
.mob-nav-item.active i{transform:scale(1.15)}
.mob-nav-item.active::after{
  content:'';position:absolute;bottom:2px;
  width:4px;height:4px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 6px var(--teal-gw);
}
.mob-nav-item:active{transform:scale(.9)}
.mob-nav-compose{
  width:46px;height:46px;border-radius:50%!important;
  padding:0!important;
  background:linear-gradient(135deg,var(--teal),#059669)!important;
  color:#fff!important;
  box-shadow:0 4px 18px var(--teal-gw);
  margin-top:-18px;
}
.mob-nav-compose i{font-size:1.2rem;color:#fff!important}
.mob-nav-compose span{display:none}
.mob-nav-compose.active::after{display:none}
.mob-nav-compose:active{transform:scale(.85)}

@media(max-width:820px){
  .mobile-bottom-nav{display:flex!important}
  .center{padding-bottom:84px!important}
}

/* ═══════════════════════════════════════════════
   ENHANCED PROFILE HERO
═══════════════════════════════════════════════ */
.profile-hero{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
}
.profile-hero-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(20,184,166,.35),rgba(124,58,237,.25),rgba(244,63,94,.15));
  background-size:300% 300%;
  animation:storyGradient 6s ease infinite;
  filter:blur(0);
}
.profile-hero-content{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:18px;
  padding:28px 24px 16px;
  flex-wrap:wrap;
}
.profile-hero-ava-wrap{position:relative;flex-shrink:0}
.profile-hero-ava{
  width:80px;height:80px;border-radius:50%;object-fit:cover;
  border:4px solid var(--bg);background:var(--card3);
  box-shadow:0 4px 22px rgba(0,0,0,.4);
}
.profile-hero-dot{
  position:absolute;bottom:4px;right:4px;
  width:16px;height:16px;border-radius:50%;
  background:var(--green);border:3px solid var(--bg);
  animation:glow 3s ease-in-out infinite;
}
.profile-hero-info h2{
  font-size:1.3rem;font-weight:900;letter-spacing:-.02em;
  text-shadow:0 2px 8px rgba(0,0,0,.3);
}
.profile-hero-status{
  font-size:.82rem;color:rgba(255,255,255,.7);margin-top:4px;
}
.profile-stats-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.1);
}
.profile-stat{
  text-align:center;padding:16px 8px;
  background:rgba(11,15,25,.5);
  backdrop-filter:blur(6px);
}
.profile-stat strong{
  display:block;font-size:1.3rem;font-weight:900;
  color:var(--teal);margin-bottom:2px;
}
.profile-stat span{font-size:.72rem;color:var(--text3);font-weight:600}

/* ═══════════════════════════════════════════════
   NOTIFICATION ENHANCEMENTS
═══════════════════════════════════════════════ */
.notif-row-inner{
  display:flex;align-items:flex-start;gap:11px;
}
.notif-icon{
  width:32px;height:32px;border-radius:8px;
  background:rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;
  font-size:.88rem;flex-shrink:0;
}
.notif-content{flex:1;min-width:0}
.notif-content p{font-size:.88rem;line-height:1.5}
.notif-content .small{font-size:.73rem;color:var(--text3);margin-top:2px;display:block}
.notif-group-label{
  font-size:.72rem;font-weight:800;letter-spacing:.1em;
  color:var(--text4);text-transform:uppercase;
  padding:14px 28px 6px;
}

/* ═══════════════════════════════════════════════
   GLASS MORPHISM ENHANCEMENTS
═══════════════════════════════════════════════ */
.post,.forum-post{
  background:rgba(19,27,46,.75);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.rcard{
  background:rgba(19,27,46,.65);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.composer{
  background:rgba(19,27,46,.4);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* Shimmer skeleton */
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.sk-l{
  background:linear-gradient(90deg,var(--card2) 25%,var(--card3) 50%,var(--card2) 75%)!important;
  background-size:200% 100%!important;
  animation:shimmer 1.6s ease-in-out infinite!important;
}
.sk-ava{
  background:linear-gradient(90deg,var(--card2) 25%,var(--card3) 50%,var(--card2) 75%)!important;
  background-size:200% 100%!important;
  animation:shimmer 1.6s ease-in-out infinite!important;
}

/* Animated view transitions */
@keyframes viewSlideIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.view{animation:viewSlideIn .25s var(--ease)!important}

/* Enhanced post hover */
.post:hover,.forum-post:hover{
  border-color:rgba(20,184,166,.18)!important;
  box-shadow:0 8px 32px rgba(0,0,0,.32),0 0 0 1px rgba(20,184,166,.06)!important;
}

/* Lightbox overlay */
.lightbox-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(12px);
  animation:fadeIn .2s var(--ease);
  cursor:zoom-out;
}
.lightbox-overlay img{
  max-width:90vw;max-height:90vh;border-radius:var(--r-l);
  box-shadow:0 16px 64px rgba(0,0,0,.6);
}

/* ═══════════════════════════════════════════════
   MESSAGES (DM) - Newly Added UI
═══════════════════════════════════════════════ */
.dm-grid {
  display: flex;
  height: calc(100vh - var(--tb-h) - 86px);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.dm-aside {
  width: 340px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.dm-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--card);
  position: relative;
  min-width: 0;
}
@media (max-width: 768px) {
  .dm-aside { width: 100%; transition: transform 0.3s ease; }
  body.chat-active .dm-aside { display: none; }
  body:not(.chat-active) .dm-panel { display: none; }
}

.dm-friend-item {
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  cursor: pointer;
  transition: all var(--d) var(--ease);
  text-align: left;
  background: transparent;
}
.dm-friend-item:hover { background: rgba(255,255,255,0.02); }
.dm-friend-item.active { background: var(--teal-dim); border-left: 3px solid var(--teal); }

.dm-conv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.dm-conv-head strong { font-size: 0.95rem; font-weight: 700; color: var(--text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-conv-head .small { font-size: 0.72rem; color: var(--text4); white-space: nowrap; }

.dm-presence-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--bg); flex-shrink: 0; }
.dm-presence-dot.online { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dm-presence-dot.idle { background: var(--amber); }
.dm-presence-dot.offline { background: var(--text4); }

.dm-preview { font-size: 0.82rem; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; }
.dm-unread {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal); color: #fff; border-radius: var(--r-f);
  padding: 2px 7px; font-size: 0.72rem; font-weight: 800; margin-top: 6px;
  align-self: flex-start;
}

.dm-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text3); text-align: center; padding: 20px; }
.dm-empty-ico { font-size: 3.5rem; opacity: 0.15; margin-bottom: 20px; color: var(--teal); }
.dm-empty h3 { font-size: 1.3rem; font-weight: 800; color: var(--text2); margin-bottom: 8px; }

.dm-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: 1px solid var(--border);
  background: rgba(19,27,46,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  z-index: 10;
}
.dm-hdr-user { display: flex; align-items: center; gap: 14px; }
/* Mobile back button */
.dm-back-btn { display: none; color: var(--text2); font-size: 1.1rem; padding: 5px; cursor: pointer; }
@media (max-width: 768px) { .dm-back-btn { display: block; } }

.dm-ava { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--teal-dim); }
.dm-hdr-user strong { font-size: 1.05rem; font-weight: 800; line-height: 1.2; display: block; }
.dm-stat-txt { font-size: 0.78rem; color: var(--teal); display: block; margin-top: 2px; }
.dm-hdr-acts .icon-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--card2); color: var(--text2); display: flex; align-items: center; justify-content: center; transition: all var(--d) var(--ease); border: none; cursor: pointer; }
.dm-hdr-acts .icon-btn:hover { background: var(--teal-dim); color: var(--teal); }

.msg-thread {
  flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px;
  background: radial-gradient(circle at bottom, rgba(20,184,166,.04) 0%, transparent 60%);
}
.message-bubble {
  max-width: 78%; padding: 12px 18px;
  background: var(--card2); color: var(--text2); position: relative;
  align-self: flex-start;
  border-radius: 18px 18px 18px 4px; border: 1px solid var(--border2);
  box-shadow: 0 4px 15px rgba(0,0,0,.15);
  animation: slideUp .2s var(--ease);
}
.message-bubble.mine {
  align-self: flex-end; border-radius: 18px 18px 4px 18px; border: none;
  background: linear-gradient(135deg, var(--teal), #059669); color: #fff;
  box-shadow: 0 4px 15px rgba(20,184,166,.25);
}
.message-bubble strong { display: block; font-size: 0.75rem; opacity: 0.65; margin-bottom: 6px; letter-spacing: 0.02em; }
.message-bubble p { font-size: 0.95rem; line-height: 1.5; word-wrap: break-word; margin: 0; }
.message-image { max-width: 260px; border-radius: 10px; margin-top: 8px; cursor: zoom-in; }
.message-reply-ref {
  font-size: 0.8rem; padding: 8px 12px; background: rgba(0,0,0,.15);
  border-radius: 8px; margin-bottom: 10px; border-left: 3px solid rgba(255,255,255,.4);
}
.message-bubble .actions { display: flex; gap: 4px; margin-top: 8px; opacity: 0; transition: opacity .2s; }
.message-bubble:hover .actions { opacity: 1; }
.message-bubble .icon-action { font-size: 0.8rem; color: rgba(255,255,255,.6); cursor: pointer; padding: 4px 8px; border-radius: 6px; border: none; background: transparent; }
.message-bubble .icon-action:hover { background: rgba(255,255,255,.1); color: #fff; }
.message-bubble .icon-action.danger:hover { color: #fca5a5; background: rgba(244,63,94,.2); }
.message-bubble .small { font-size: 0.72rem; opacity: 0.6; display: block; text-align: right; margin-top: 6px; }

.typing-ind { font-size: 0.82rem; color: var(--text3); padding: 0 24px 12px; display: flex; align-items: center; gap: 8px; }
.tdots span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); animation: skPulse 1s infinite alternate; margin-right: 3px; }
.tdots span:nth-child(2) { animation-delay: .2s; }
.tdots span:nth-child(3) { animation-delay: .4s; }

.scroll-dn {
  position: absolute; bottom: 85px; right: 24px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--card3); color: var(--text); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.3); cursor: pointer; z-index: 100;
  transition: all var(--d) var(--ease); border: 1px solid rgba(255,255,255,.05);
}
.scroll-dn:hover { transform: translateY(-4px); background: var(--teal); color: #fff; border-color: transparent; }

.msg-form { padding: 16px 24px; border-top: 1px solid var(--border); background: var(--card); }
.msg-input-wrap {
  display: flex; align-items: flex-end; gap: 10px; background: rgba(255,255,255,0.03);
  border: 1px solid var(--border2); border-radius: 24px; padding: 8px 8px 8px 20px;
  transition: all var(--d) var(--ease);
}
.msg-input-wrap:focus-within { border-color: var(--teal); background: rgba(20,184,166,0.02); box-shadow: 0 0 0 3px var(--teal-dim); }
#message-input {
  flex: 1; border: none; background: transparent; color: var(--text);
  font-size: 0.95rem; resize: none; max-height: 120px; padding: 9px 0; outline: none;
}
#message-input::placeholder { color: var(--text4); }
.msg-tools { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.mtool { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text3); cursor: pointer; transition: all var(--d) var(--ease); border: none; background: none; }
.mtool:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.msg-send-btn {
  width: 40px; height: 40px; border-radius: 50%; background: var(--teal); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all var(--d) var(--ease); margin-left: 2px;
}
.msg-send-btn:hover { transform: scale(1.08); box-shadow: 0 4px 16px var(--teal-gw); background: #2dd4bf; }
.file-label { display: block; font-size: 0.8rem; color: var(--teal); padding: 5px 24px; background: var(--teal-dim); border-top: 1px solid var(--teal-gw); }
.dm-hint { text-align: center; font-size: 0.75rem; color: var(--text4); padding: 10px 0; margin: 0; }