/* ═══════════════════════════════════════════════════════════════════
   وحدة السايبر — Enterprise Professional Design System v5.0
   Premium Official Dark Theme — Stable & Refined — RTL Native
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. DESIGN TOKENS — Single Source of Truth
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {

  /* ── Surface Hierarchy ── */
  --color-page:           #0A0E17;   /* deepest background            */
  --color-surface-deep:   #0E1420;   /* slightly lighter surface      */
  --color-surface-card:   #131C2E;   /* card / panel background       */
  --color-surface-raised: #1A2540;   /* hover / raised state          */
  --color-surface-inset:  #080C14;   /* input background              */
  --color-black:          #000000;
  --color-white:          #FFFFFF;

  /* ── Brand Palette — White Primary + Blue Hover ── */
  --color-accent:         #FFFFFF;   /* primary accent — white default */
  --color-accent-light:   #EAF3FF;   /* lighter white-blue             */
  --color-accent-deep:    #38BDF8;   /* hover / accent active          */
  --color-accent-dim:     rgba(255,255,255,0.08);
  --color-accent-glow:    rgba(56,189,248,0.18);
  --color-accent-border:  rgba(56,189,248,0.30);

  --color-gold:           #E2A832;   /* secondary accent — warm gold  */
  --color-gold-light:     #F0C060;
  --color-gold-dim:       rgba(226,168,50,0.15);

  /* ── Text Hierarchy ── */
  --color-text-primary:   #EBF0FA;   /* headings, important text      */
  --color-text-secondary: #8A96AE;   /* body text, descriptions       */
  --color-text-muted:     #535E72;   /* timestamps, labels            */

  /* ── Structural Borders ── */
  --color-border:         rgba(79,142,247,0.12);
  --color-border-strong:  rgba(79,142,247,0.22);
  --color-border-subtle:  rgba(255,255,255,0.05);
  --color-border-focus:   #4F8EF7;

  /* ── Status Colors ── */
  --color-success:        #2DD4A0;
  --color-success-dim:    rgba(45,212,160,0.12);
  --color-warning:        #E2A832;
  --color-warning-dim:    rgba(226,168,50,0.12);
  --color-danger:         #F05473;
  --color-danger-dim:     rgba(240,84,115,0.12);

  --color-transparent: transparent;

  /* ── Overlay Scales ── */
  --color-overlay-accent-0:  rgba(79,142,247,0);
  --color-overlay-accent-5:  rgba(79,142,247,0.05);
  --color-overlay-accent-6:  rgba(79,142,247,0.06);
  --color-overlay-accent-8:  rgba(79,142,247,0.08);
  --color-overlay-accent-10: rgba(79,142,247,0.10);
  --color-overlay-accent-12: rgba(79,142,247,0.12);
  --color-overlay-accent-15: rgba(79,142,247,0.15);
  --color-overlay-accent-18: rgba(79,142,247,0.18);
  --color-overlay-accent-20: rgba(79,142,247,0.20);
  --color-overlay-accent-22: rgba(79,142,247,0.22);
  --color-overlay-accent-25: rgba(79,142,247,0.25);
  --color-overlay-accent-30: rgba(79,142,247,0.30);
  --color-overlay-accent-32: rgba(79,142,247,0.32);
  --color-overlay-accent-40: rgba(79,142,247,0.40);
  --color-overlay-accent-45: rgba(79,142,247,0.45);
  --color-overlay-accent-50: rgba(79,142,247,0.50);
  --color-overlay-accent-55: rgba(79,142,247,0.55);

  --color-overlay-danger-8:  rgba(240,84,115,0.08);
  --color-overlay-danger-10: rgba(240,84,115,0.10);
  --color-overlay-danger-15: rgba(240,84,115,0.15);
  --color-overlay-danger-20: rgba(240,84,115,0.20);
  --color-overlay-danger-25: rgba(240,84,115,0.25);
  --color-overlay-danger-30: rgba(240,84,115,0.30);
  --color-overlay-danger-50: rgba(240,84,115,0.50);
  --color-overlay-danger-60: rgba(240,84,115,0.60);

  --color-overlay-warning-8:  rgba(226,168,50,0.08);
  --color-overlay-warning-20: rgba(226,168,50,0.20);
  --color-overlay-warning-25: rgba(226,168,50,0.25);

  --color-overlay-ink-22: rgba(0,0,0,0.22);
  --color-overlay-ink-24: rgba(0,0,0,0.24);
  --color-overlay-ink-25: rgba(0,0,0,0.25);
  --color-overlay-ink-30: rgba(0,0,0,0.30);
  --color-overlay-ink-40: rgba(0,0,0,0.40);
  --color-overlay-ink-50: rgba(0,0,0,0.50);
  --color-overlay-ink-55: rgba(0,0,0,0.55);
  --color-overlay-ink-78: rgba(0,0,0,0.78);
  --color-overlay-ink-85: rgba(0,0,0,0.85);
  --color-overlay-ink-90: rgba(0,0,0,0.90);
  --color-overlay-ink-94: rgba(0,0,0,0.94);
  --color-overlay-ink-96: rgba(0,0,0,0.96);
  --color-overlay-ink-98: rgba(0,0,0,0.98);

  --color-overlay-paper-2:   rgba(255,255,255,0.020);
  --color-overlay-paper-2-5: rgba(255,255,255,0.025);
  --color-overlay-paper-3:   rgba(255,255,255,0.030);
  --color-overlay-paper-6:   rgba(255,255,255,0.060);
  --color-overlay-paper-8:   rgba(255,255,255,0.080);
  --color-overlay-paper-20:  rgba(255,255,255,0.200);

  /* ── Semantic Aliases (used by main.css & page-level CSS) ── */
  --bg-main:        var(--color-page);
  --bg-primary:     var(--color-page);
  --bg-secondary:   var(--color-surface-deep);
  --bg-card:        var(--color-surface-card);
  --bg-card-hover:  var(--color-surface-raised);
  --bg-glass:       rgba(255,255,255,0.030);

  --border:         var(--color-border);
  --border-bright:  var(--color-border-strong);
  --border-color:   var(--color-border);

  --text-primary:   var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-dim:       var(--color-text-muted);
  --text-muted:     var(--color-text-muted);

  --accent-primary:    var(--color-accent);
  --accent-hover:      var(--color-accent-light);
  --accent-secondary:  var(--color-accent-light);
  --accent-sky:        #60A5FA;
  --accent-lavender:   #818CF8;
  --accent-glow:       var(--color-accent-glow);

  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger:  var(--color-danger);

  --green:      var(--color-success);
  --green-dim:  #34D6AA;
  --green-glow: rgba(45,212,160,0.18);

  --cyan:       var(--color-accent);
  --cyan-glow:  var(--color-accent-glow);

  --purple:      #818CF8;
  --purple-glow: rgba(129,140,248,0.18);

  --orange:      #FB923C;
  --orange-glow: rgba(251,146,60,0.18);

  --red:  var(--color-danger);
  --gold: var(--color-gold);

  /* ── Typography ── */
  --font-arabic:  'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
  --font-main:    var(--font-arabic);
  --font-heading: 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  --font-brand:   var(--font-heading);

  /* ── Geometry ── */
  --radius:    8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ── Motion ── */
  --ease-out:  cubic-bezier(0.25, 0, 0, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  0.15s;
  --dur-base:  0.22s;
  --transition: all var(--dur-base) var(--ease-out);

  /* ── Elevation ── */
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.35);
  --shadow-card:  0 4px 20px rgba(0,0,0,0.40);
  --shadow-panel: 0 12px 40px rgba(0,0,0,0.55);
  --shadow-modal: 0 24px 64px rgba(0,0,0,0.65);
  --shadow-glow:  0 0 24px rgba(79,142,247,0.18);

  --card-padding: 20px;
  --panel-gap:    16px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. FOUNDATION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html, body {
  background-color: var(--color-page) !important;
  color:       var(--color-text-primary) !important;
  font-family: var(--font-main) !important;
  font-size:   15px !important;
  line-height: 1.70 !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

html:root:root, html:root:root body {
  background: var(--color-page) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-main) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.70 !important;
}

::selection {
  background: rgba(79,142,247,0.28);
  color: #fff;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. TYPOGRAPHY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html:root:root body :is(h1,h2,h3,h4,h5,h6,
  .section-title,.page-title,.chatroom-title,
  [class*="title"],[class*="heading"]) {
  font-family:   var(--font-heading) !important;
  font-weight:   700 !important;
  color:         var(--color-text-primary) !important;
  letter-spacing:-0.01em !important;
  line-height:    1.3 !important;
}

html:root:root body h1 { font-size: clamp(22px,2.8vw,32px) !important; }
html:root:root body h2 { font-size: clamp(18px,2.2vw,26px) !important; }
html:root:root body h3 { font-size: clamp(16px,1.8vw,22px) !important; }

html:root:root body :is(strong,b,.font-bold,.font-extrabold) {
  color:       var(--color-text-primary) !important;
  font-weight: 700 !important;
}

html:root:root body :is(p,small,label,
  .description,.subtitle,.text-muted,
  .text-secondary,.muted,.helper-text) {
  color: var(--color-text-secondary) !important;
}

html:root:root body :is(.stat,.metric,.count,.score,
  [class*="stat-"],.badge,.pill,.chip,.font-mono) {
  font-family:            var(--font-mono) !important;
  font-feature-settings:  "tnum" 1 !important;
  font-variant-numeric:   tabular-nums !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. LINKS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html:root:root body :is(a:not(.idx-cat):not(.idx-cat-tag):not(.nav-link):not(.btn):not(.idx-post-title):not(.idx-post-author):not(.idx-community-member), a[class*="text-"]:not(.idx-cat):not(.idx-cat-tag):not(.nav-link):not(.btn)) {
  color: var(--color-accent) !important;
  text-decoration: none !important;
  transition: color var(--dur-fast) var(--ease-out) !important;
}
html:root:root body :is(a:hover:not(.idx-cat):not(.idx-cat-tag):not(.nav-link):not(.btn):not(.idx-post-title):not(.idx-post-author):not(.idx-community-member), a:focus-visible:not(.idx-cat):not(.idx-cat-tag):not(.nav-link):not(.btn):not(.idx-post-title):not(.idx-post-author):not(.idx-community-member)) {
  color: var(--color-accent-light) !important;
}
html:root:root body a.fx-post-title {
  color: var(--color-text-primary) !important;
}
html:root:root body a.fx-post-title:hover {
  color: var(--color-accent) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. SITE HEADER — Sticky, Frosted Glass
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html:root:root body .site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1100 !important;
  background: rgba(10,14,23,0.88) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: 0 1px 0 rgba(79,142,247,0.08) !important;
}

/* Brand Icon */
html:root:root body .brand-icon {
  background: var(--color-accent-dim) !important;
  border: 1px solid var(--color-accent-border) !important;
  box-shadow: none !important;
  color: var(--color-accent) !important;
  border-radius: 8px !important;
}

/* Brand Accent text */
html:root:root body .brand-accent {
  color: var(--color-accent) !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
  text-fill-color: unset !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. NAVIGATION LINKS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html:root:root body .nav-link {
  color:         var(--color-text-secondary) !important;
  background:    transparent !important;
  border:        1px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  font-weight:   600 !important;
  font-size:     13.5px !important;
  transition:    all var(--dur-base) var(--ease-out) !important;
  padding:       7px 11px !important;
}
html:root:root body .nav-link i {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
  transition: color var(--dur-fast) ease !important;
}
html:root:root body .nav-link:hover {
  color:            var(--color-text-primary) !important;
  background:       rgba(79,142,247,0.07) !important;
  border-color:     rgba(79,142,247,0.15) !important;
  transform:        none !important;
}
html:root:root body .nav-link:hover i {
  color: var(--color-accent) !important;
}
html:root:root body .nav-link.active {
  color:        var(--color-accent) !important;
  background:   rgba(79,142,247,0.10) !important;
  border-color: rgba(79,142,247,0.22) !important;
}
html:root:root body .nav-link.active i {
  color: var(--color-accent) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. BUTTONS — Tiered System
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Base (ghost) ── */
html:root:root body :is(button,.btn,[role="button"],
  input[type="submit"],input[type="button"],a.btn) {
  background:    var(--color-surface-card) !important;
  border:        1px solid var(--color-border-strong) !important;
  border-radius: var(--radius) !important;
  color:         var(--color-text-secondary) !important;
  font-family:   var(--font-main) !important;
  font-weight:   600 !important;
  font-size:     14px !important;
  transition:    background var(--dur-base) var(--ease-out),
                 border-color var(--dur-base) var(--ease-out),
                 color var(--dur-base) var(--ease-out) !important;
  box-shadow:    none !important;
}
html:root:root body :is(button:hover,.btn:hover,[role="button"]:hover,
  input[type="submit"]:hover,input[type="button"]:hover,
  a.btn:hover,button:focus-visible,a.btn:focus-visible) {
  background:   var(--color-surface-raised) !important;
  border-color: var(--color-border-strong) !important;
  color:        var(--color-text-primary) !important;
  transform:    none !important;
  box-shadow:   none !important;
}

/* ── Primary (filled) ── */
html:root:root body :is(.btn-primary,button[type="submit"],
  input[type="submit"],[role="button"].primary) {
  background:    var(--color-accent) !important;
  border-color:  var(--color-accent) !important;
  color:         #fff !important;
  font-weight:   700 !important;
  box-shadow:    0 2px 12px rgba(79,142,247,0.28) !important;
}
html:root:root body :is(.btn-primary:hover,button[type="submit"]:hover,
  input[type="submit"]:hover) {
  background:   var(--color-accent-deep) !important;
  border-color: var(--color-accent-deep) !important;
  color:        #fff !important;
  box-shadow:   0 4px 18px rgba(79,142,247,0.35) !important;
  transform:    none !important;
}

/* Force delete confirmation button styling to red regardless of generic primary submit rules */
html:root:root body button.btn.delete-confirm-btn,
html:root:root body button.btn.delete-confirm-btn[type="submit"] {
  background: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 100%) !important;
  border-color: rgba(254, 202, 202, 0.6) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(239, 68, 68, 0.18) !important;
}
html:root:root body button.btn.delete-confirm-btn:hover,
html:root:root body button.btn.delete-confirm-btn[type="submit"]:hover {
  background: linear-gradient(180deg, #991b1b 0%, #5b1111 100%) !important;
  border-color: rgba(254, 202, 202, 0.8) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 22px rgba(239, 68, 68, 0.24) !important;
  transform: translateY(-1px) !important;
}

html:root:root body button.btn.report-post-btn,
html:root:root body button.btn.report-post-btn[type="submit"] {
  background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(9,12,18,0.98)) !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  color: #f8fafc !important;
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.08) !important;
}
html:root:root body button.btn.report-post-btn:hover,
html:root:root body button.btn.report-post-btn[type="submit"]:hover {
  background: linear-gradient(180deg, rgba(17,24,39,0.98), rgba(15,23,42,0.98)) !important;
  border-color: rgba(96, 165, 250, 0.42) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 22px rgba(59, 130, 246, 0.12) !important;
  transform: translateY(-1px) !important;
}

/* ── Register Button ── */
html:root:root body .site-header .btn-register,
html:root:root body .site-header .nav-drawer-auth .btn-register,
html:root:root body #navbar a.btn-register {
  background: linear-gradient(135deg, #10b981 0%, #0ea5e9 100%) !important;
  border-color: rgba(16,185,129,0.9) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 20px rgba(16,185,129,0.24) !important;
}
html:root:root body .site-header .btn-register:hover,
html:root:root body .site-header .nav-drawer-auth .btn-register:hover,
html:root:root body #navbar a.btn-register:hover {
  background: linear-gradient(135deg, #059669 0%, #0284c7 100%) !important;
  border-color: rgba(5,150,105,0.95) !important;
  box-shadow: 0 10px 24px rgba(14,165,233,0.28) !important;
  transform: none !important;
}
html:root:root body .site-header .btn-register :is(i,svg),
html:root:root body .site-header .nav-drawer-auth .btn-register :is(i,svg),
html:root:root body #navbar a.btn-register :is(i,svg),
html:root:root body .site-header .btn-register:hover :is(i,svg),
html:root:root body .site-header .nav-drawer-auth .btn-register:hover :is(i,svg),
html:root:root body #navbar a.btn-register:hover :is(i,svg) {
  color: #fff !important;
}

/* ── Login Button ── */
html:root:root body .btn-login {
  background:   transparent !important;
  border-color: var(--color-border-strong) !important;
  color:        var(--color-text-secondary) !important;
}
html:root:root body .btn-login:hover {
  background:   var(--color-accent-dim) !important;
  border-color: var(--color-accent-border) !important;
  color:        var(--color-accent) !important;
  transform:    none !important;
}

/* ── Icon Buttons (Notif, User, Toggle) ── */
html:root:root body .notif-btn {
  background:    transparent !important;
  border:        1px solid var(--color-border-strong) !important;
  border-radius: 8px !important;
  color:         var(--color-text-secondary) !important;
}
html:root:root body .notif-btn:hover {
  background:   var(--color-accent-dim) !important;
  border-color: var(--color-accent-border) !important;
  color:        var(--color-accent) !important;
  transform:    none !important;
  box-shadow:   none !important;
}

html:root:root body .user-btn {
  background:    transparent !important;
  border:        1px solid var(--color-border-strong) !important;
  border-radius: 10px !important;
}
html:root:root body .user-btn:hover {
  background:   var(--color-accent-dim) !important;
  border-color: var(--color-accent-border) !important;
  transform:    none !important;
  box-shadow:   none !important;
}

html:root:root body .nav-toggle {
  background:    transparent !important;
  border:        1px solid var(--color-border-strong) !important;
}
html:root:root body .site-header .nav-toggle span {
  background: var(--color-text-secondary) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. FORMS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html:root:root body :is(input,textarea,select) {
  background-color: var(--color-surface-inset) !important;
  border:           1px solid var(--color-border-strong) !important;
  border-radius:    var(--radius) !important;
  color:            var(--color-text-primary) !important;
  font-family:      var(--font-main) !important;
  font-size:        15px !important;
  transition:       border-color var(--dur-base) ease,
                    box-shadow var(--dur-base) ease !important;
}
html:root:root body :is(input,textarea,select):focus {
  border-color: var(--color-accent) !important;
  outline:      none !important;
  box-shadow:   0 0 0 3px rgba(79,142,247,0.12) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. CARDS & SURFACES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html:root:root body :is(.card,.widget,.panel,.form-card,
  .post-item,.tool-card,.member-card,.stat-item,
  .category-card,.fx-post,.member-row,.leaderboard-item,
  .notif-panel,.dropdown-menu,.chatroom-main,
  .chat-sidebar,.chat-messages,
  [class*="-card"],[class$="card"],article) {
  background-color: var(--color-surface-card) !important;
  border:           1px solid var(--color-border) !important;
  border-radius:    var(--radius) !important;
  transition:       background-color var(--dur-base) ease,
                    border-color var(--dur-base) ease !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. DROPDOWNS & MENUS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html:root:root body :is(.notif-panel,.user-menu) {
  background:     var(--color-surface-deep) !important;
  border:         1px solid var(--color-border-strong) !important;
  border-radius:  var(--radius-lg) !important;
  box-shadow:     var(--shadow-panel), 0 0 0 1px rgba(79,142,247,0.06) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* Mark-read button */
html:root:root body #notifDropdown .notif-header .mark-read-btn {
  display:       inline-flex !important;
  align-items:   center !important;
  gap:           6px !important;
  padding:       5px 10px !important;
  background:    var(--color-accent-dim) !important;
  border:        1px solid var(--color-accent-border) !important;
  border-radius: 6px !important;
  color:         var(--color-accent) !important;
  font-size:     12px !important;
  font-weight:   600 !important;
  transition:    all var(--dur-base) ease !important;
  min-height:    32px !important;
}
html:root:root body #notifDropdown .notif-header .mark-read-btn i {
  color: var(--color-accent) !important;
}
html:root:root body #notifDropdown .notif-header .mark-read-btn:hover {
  background:   rgba(79,142,247,0.18) !important;
  border-color: var(--color-accent) !important;
  color:        var(--color-accent) !important;
  transform:    none !important;
}
html:root:root body #notifDropdown .notif-header .mark-read-btn:focus-visible {
  outline: 2px solid var(--color-accent) !important;
}

/* Menu header */
html:root:root body .user-menu-header {
  background: rgba(79,142,247,0.06) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
/* Menu items */
html:root:root body .user-menu a {
  color:      var(--color-text-secondary) !important;
  transition: background var(--dur-fast) ease,color var(--dur-fast) ease !important;
}
html:root:root body .user-menu a:hover,
html:root:root body .user-menu a:focus-visible {
  background: var(--color-accent-dim) !important;
  color:      var(--color-accent) !important;
  transform:  none !important;
}
html:root:root body .user-menu a i {
  background:   rgba(79,142,247,0.10) !important;
  border-color: rgba(79,142,247,0.18) !important;
  color:        var(--color-accent) !important;
}
html:root:root body .user-menu .logout-link,
html:root:root body .user-menu .logout-link i {
  color: var(--color-danger) !important;
}
html:root:root body .user-menu .logout-link:hover {
  background: var(--color-danger-dim) !important;
  color:      var(--color-danger) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. POST EDITOR BUTTONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html:root:root body :is(.np-btn,.np-btn.cancel,.np-card) {
  background:   var(--color-surface-card) !important;
  border-color: var(--color-border-strong) !important;
  border-radius: var(--radius) !important;
  color:        var(--color-text-primary) !important;
  box-shadow:   none !important;
}

html:root:root body .np-actions .np-btn,
html:root:root body .np-actions .np-btn.cancel,
html:root:root body .np-actions .np-btn.submit,
html:root:root body .np-actions #submitPostBtn.np-btn.submit {
  background:   linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(11, 17, 26, 0.98)) !important;
  border-color: rgba(0, 255, 65, 0.32) !important;
  color:        #f8fafc !important;
  box-shadow:   0 10px 20px rgba(0, 255, 65, 0.08) !important;
}
html:root:root body .np-actions .np-btn.submit,
html:root:root body .np-actions #submitPostBtn.np-btn.submit {
  background:   linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(11, 17, 26, 0.98)) !important;
  border-color: rgba(0, 255, 65, 0.38) !important;
  color:        #f8fafc !important;
  font-weight:  700 !important;
}
html:root:root body .np-actions .np-btn.submit:hover,
html:root:root body .np-actions #submitPostBtn.np-btn.submit:hover {
  background:   #142235 !important;
  border-color: rgba(0, 255, 65, 0.58) !important;
  color:        #f8fafc !important;
  transform:    translateY(-1px) !important;
  box-shadow:   0 14px 26px rgba(0, 255, 65, 0.12) !important;
}
html:root:root body .np-actions :is(.np-btn,.np-btn.cancel):hover {
  background:   #142235 !important;
  border-color: rgba(148, 163, 184, 0.26) !important;
  color:        #f3f4f6 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. ICONS — Font Awesome Fix
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html:root:root body :is(i[class*="fa-"]) {
  display:        inline-flex !important;
  align-items:    center !important;
  justify-content:center !important;
  font-style:     normal !important;
  font-variant:   normal !important;
  line-height:    1 !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
}

html:root:root body :is(a:hover i, a:hover svg,
  .active i, .active svg,
  .is-active i, .is-active svg,
  [aria-current] i, [aria-current] svg) {
  color: var(--color-accent) !important;
}

html:root:root body svg.icon-outline {
  width:    1em; height: 1em;
  flex-shrink:    0;
  vertical-align: -0.125em;
  fill:   none;
  stroke: currentColor;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. INTERACTION STATES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html:root:root body .post-like-button.is-liked,
html:root:root body .post-like-button.is-liked :is(i,svg) {
  color: var(--color-danger) !important;
}
html:root:root body button.td-cta-btn.like.is-liked {
  background:   var(--color-danger-dim) !important;
  border-color: var(--color-danger) !important;
  color:        var(--color-danger) !important;
}
html:root:root body button.td-cta-btn.like.is-liked :is(i,svg) {
  color: var(--color-danger) !important;
}
html:root:root body button.td-cta-btn.like.is-liked:hover {
  background:   rgba(240,84,115,0.18) !important;
  border-color: var(--color-danger) !important;
  transform:    none !important;
}
html:root:root body button#bookmarkToolBtn.is-saved svg.icon-outline {
  fill:   var(--color-accent) !important;
  stroke: var(--color-accent) !important;
}
html:root:root body .td-rating-control .td-star-btn:is(.is-selected,:hover,:focus-visible),
html:root:root body .td-rating-control .td-star-btn:is(.is-selected,:hover,:focus-visible) :is(i,svg) {
  color: var(--color-gold) !important;
  fill:  var(--color-gold) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14. FORUM ITEMS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html:root:root body :is(.fx-post,.fx-post:hover,.fx-post::before,.fx-post-last) {
  border-color: var(--color-border) !important;
  outline-color: var(--color-accent) !important;
}
html:root:root body .fx-post::before {
  background: var(--color-accent) !important;
}
html:root:root body .fx-post-title:focus-visible::after {
  outline: 2px solid var(--color-accent) !important;
}
html:root:root body :is(.notif-item.unread,.post-item.pinned) {
  border-inline-start: 3px solid var(--color-accent) !important;
}

/* Forum buttons */
html:root:root body :is(a.forum-category-link,
  a.forum-category-link:hover,a.forum-category-link:focus-visible,
  .forum-dark-btn,.forum-dark-btn:hover,
  .forum-soft-btn,.forum-soft-btn:hover) {
  background-color: var(--color-surface-card) !important;
  border-color:     var(--color-border) !important;
  color:            var(--color-text-primary) !important;
  box-shadow:       none !important;
}
html:root:root body a.forum-category-link:hover {
  background-color: var(--color-surface-raised) !important;
  border-color:     var(--color-border-strong) !important;
}
html:root:root body :is(a.forum-category-link div,
  a.forum-category-link span, a.forum-category-link i,
  .forum-dark-btn *, .forum-soft-btn *) {
  color: var(--color-text-primary) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   15. CATEGORY FILTER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html:root:root:root:root body #allCategoryFilter.all-category-active,
html:root:root:root:root body #allCategoryFilter.all-category-active:hover {
  background:   var(--color-accent-dim) !important;
  border-color: var(--color-accent-border) !important;
  color:        var(--color-accent) !important;
  box-shadow:   none !important;
  transform:    none !important;
}
html:root:root:root:root body #allCategoryFilter.all-category-active :is(i,span) {
  color: var(--color-accent) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   16. STATUS INDICATORS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html:root:root body .notif-badge {
  background:  var(--color-danger) !important;
  color:       #fff !important;
  box-shadow:  0 2px 8px rgba(240,84,115,0.40) !important;
}

html:root:root body :is(.fx-beacon,.pulse-beacon,
  .idx-widget-head .pulse-beacon) {
  background:  var(--color-success) !important;
  border-color: var(--color-surface-card) !important;
  box-shadow:  0 0 0 3px rgba(45,212,160,0.20) !important;
  animation:   pulse-beacon 2.4s ease-in-out infinite !important;
}

/* ── Accent text shortcuts ── */
html:root:root body :is(.brand-accent,.idx-accent,.idx-stat-value,
  .idx-top-rank,.idx-top-pts,
  [class*="c-green"],[class*="c-cyan"]) {
  color: var(--color-accent) !important;
}
html:root:root body :is([class*="c-gold"]) {
  color: var(--color-gold) !important;
}
html:root:root body .st-points-badge { color: var(--color-gold) !important; }

html:root:root body :is([class$="-eyebrow"],.pv-body,
  .st-breadcrumb-current,.chat-status,
  .online-count-button,.online-panel-count,
  .count,.rl-points-cell) {
  color: var(--color-text-secondary) !important;
}
html:root:root body :is(.pv-num,.rl-article-num,
  .points-display,.chat-new-messages-count) {
  color: var(--color-text-primary) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   17. FOOTER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html:root:root body :is(.site-footer,.footer-bottom) {
  background:  var(--color-surface-deep) !important;
  border-color: var(--color-border) !important;
}
html:root:root body :is(.footer-logo i,.footer-logo span) {
  color:            var(--color-accent) !important;
  background-color: transparent !important;
  text-shadow:      none !important;
}
html:root:root body .footer-col h4 {
  color:       var(--color-text-primary) !important;
  box-shadow:  none !important;
  text-shadow: none !important;
}
html:root:root body .footer-col a { color: var(--color-text-secondary) !important; }
html:root:root body .footer-col a:hover,
html:root:root body .footer-col a:focus-visible { color: var(--color-accent) !important; }
html:root:root body .footer-social a {
  background:   var(--color-surface-card) !important;
  border-color: var(--color-border) !important;
  color:        var(--color-text-secondary) !important;
}
html:root:root body .footer-social a:hover {
  background:   var(--color-accent-dim) !important;
  border-color: var(--color-accent-border) !important;
  color:        var(--color-accent) !important;
  transform:    none !important;
}
html:root:root body .footer-disclaimer {
  background:  var(--color-surface-deep) !important;
  border-color: var(--color-border) !important;
  color:        var(--color-text-muted) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   18. TAILWIND COLOR OVERRIDES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html:root:root body :is([class*="text-green-"],[class*="text-emerald-"],[class*="text-teal-"]) {
  color: var(--color-success) !important;
}
html:root:root body :is([class*="text-cyan-"],[class*="text-sky-"]) {
  color: var(--color-accent) !important;
}
html:root:root body [class*="text-purple-"] { color: var(--purple) !important; }
html:root:root body [class*="text-yellow-"] { color: var(--color-gold) !important; }
html:root:root body [class*="text-white"]   { color: var(--color-text-primary) !important; }

html:root:root body :is([class*="bg-green-"],[class*="bg-emerald-"],
  [class*="bg-teal-"],[class*="bg-cyan-"],
  [class*="bg-sky-"],[class*="bg-purple-"]) {
  background-color: var(--color-surface-card) !important;
  border-color:     var(--color-border-strong) !important;
}
html:root:root body :is([class*="border-green-"],[class*="border-cyan-"],
  [class*="border-sky-"],[class*="border-purple-"]) {
  border-color: var(--color-border-strong) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   19. LAYOUT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html:root:root body .main-content {
  background:  transparent !important;
  padding-top: 16px !important;
}

/* Matrix / animated canvas — hidden */
html:root:root body #matrixCanvas,
html:root:root body .matrix-bg,
html:root:root body .grid-bg { display: none !important; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   20. CODE BLOCKS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html:root:root body .code-copy-row { position:relative; min-width:0; margin:16px 0; }
html:root:root body .code-copy-row > pre { margin:0 !important; }
html:root:root body :is(pre,.td-term-code-wrap,.td-term-code) {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(79,142,247,0.3) transparent !important;
}
html:root:root body :is(pre::-webkit-scrollbar,
  .td-term-code-wrap::-webkit-scrollbar,
  .td-term-code::-webkit-scrollbar) {
  width: 3px !important; height: 3px !important;
}
html:root:root body :is(pre::-webkit-scrollbar-thumb,
  .td-term-code-wrap::-webkit-scrollbar-thumb) {
  background: rgba(79,142,247,0.35) !important;
  border-radius: 3px !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   21. TOAST NOTIFICATIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.toast-container {
  position:        fixed !important;
  inset-inline:    12px !important;
  bottom:          calc(12px + env(safe-area-inset-bottom,0px)) !important;
  z-index:         20000 !important;
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  gap:             8px !important;
  pointer-events:  none !important;
}
.toast {
  display:         flex !important;
  align-items:     center !important;
  gap:             10px !important;
  width:           min(440px,100%) !important;
  padding:         13px 18px !important;
  background:      var(--color-surface-raised) !important;
  border:          1px solid var(--color-border-strong) !important;
  border-radius:   10px !important;
  color:           var(--color-text-primary) !important;
  box-shadow:      var(--shadow-panel) !important;
  pointer-events:  auto !important;
  animation:       toast-enter 0.28s var(--ease-back) both !important;
  transition:      opacity 0.22s ease,transform 0.22s ease !important;
}
.toast.success { border-color: rgba(45,212,160,0.40) !important; }
.toast.error   { border-color: rgba(240,84,115,0.40) !important; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   22. SCROLLBAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

::-webkit-scrollbar         { width:5px; height:5px; }
::-webkit-scrollbar-track   { background: var(--color-page); }
::-webkit-scrollbar-thumb   { background: rgba(79,142,247,0.20); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(79,142,247,0.40); }
*                           { scrollbar-width:thin; scrollbar-color: rgba(79,142,247,0.20) transparent; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   23. FOCUS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html:root:root body :focus-visible {
  outline:        2px solid var(--color-accent) !important;
  outline-offset: 2px !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   24. KEYFRAMES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@keyframes toast-enter {
  from { opacity:0; transform:translateY(10px) scale(0.98); }
  to   { opacity:1; transform:translateY(0) scale(1);       }
}
@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-10px); }
  to   { opacity:1; transform:translateY(0);     }
}
@keyframes pulse-beacon {
  0%,100% { box-shadow: 0 0 0 2px rgba(45,212,160,0.25); }
  50%     { box-shadow: 0 0 0 6px rgba(45,212,160,0.06); }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   25. RESPONSIVE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width:992px) {
  html:root:root body :is(.site-header,.navbar,.site-header .nav-container) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
@media (max-width:768px) {
  html:root:root body :is(p,li,.description,.subtitle,.helper-text) {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }
  html:root:root body :is(input,textarea,select) { font-size:1rem !important; }
  html:root:root body .main-content { padding-top:8px !important; }
  html:root:root body .code-copy-row {
    display:block !important; direction:ltr !important; margin:12px 0 !important;
  }
  html:root:root body .code-copy-row > pre {
    display:block !important; width:100% !important;
    max-width:100% !important; margin:0 !important; padding:16px !important;
  }
  html:root:root body .code-copy-row > .code-copy-btn { display:none !important; }
}