/* ===========================
   THEME & BASE
   =========================== */
:root{
  /* ── Base surfaces ── */
  --bg:           #0f1117;
  --fg:           #1a1d24;
  --card:         #121a28;
  --panel:        #0f1623;
  --input-bg:     #0b1220;

  /* ── Borders ── */
  --border:       #2d333b;
  --border-hover: #2b3b56;
  --border-card:  #1e2a3d;

  /* ── Text ── */
  --text:         #e5e7eb;
  --muted:        #9ca3af;

  /* ── Primary (blue) ── */
  --pri:          #6aa0ff;
  --pri-dark:     #4d84ee;
  --pri-bright:   #3b82f6;
  --pri-deep:     #2563eb;
  --pri-focus:    #9ec3ff;

  /* ── Interactive surfaces ── */
  --surface-btn:    #1a2537;
  --surface-hover:  #22324c;
  --surface-menu:   #182232;
  --surface-nav:    #151e2d;
  --surface-count:  #172133;
  --surface-active: #1a2436;

  /* ── Semantic: Success (green) ── */
  --success-bg:     #0f2a1f;
  --success-border: #1f5a40;
  --success-text:   #aef5cf;

  /* ── Semantic: Danger (red) ── */
  --danger-bg:      #2a0f12;
  --danger-border:  #5a1f27;
  --danger-text:    #ffc6cd;
  --danger:         #dc2626;
  --danger-hover:   #b91c1c;
  --danger-dashed:  #3b1f1f;

  /* ── Semantic: Warning (amber) ── */
  --warn-bg:        #2a1f0f;
  --warn-border:    #5a3f1f;
  --warn-text:      #ffe1b6;

  /* ── Semantic: Info (blue tint) ── */
  --info-bg:        #0f2233;
  --info-border:    #1f3a5a;
  --info-text:      #cfe1ff;

  /* ── Semantic: Private (purple) ── */
  --priv-bg:        #21122f;
  --priv-border:    #3b2356;
  --priv-text:      #d6b8ff;

  /* ── Edit link (amber accent) ── */
  --edit-text:      #f7b955;
  --edit-border:    #70530d;

  /* ── Hierarchy levels ── */
  --level1-start:   #1c2a45;
  --level1-end:     #141c2e;
  --level1-text:    #dbeafe;
  --level2-start:   #234029;
  --level2-end:     #152e1b;
  --level2-text:    #dcfce7;
  --level3-start:   #43302c;
  --level3-end:     #2b1d1a;
  --level3-text:    #fee2e2;

  /* ── Layout ── */
  --filters-width:  560px;
}

/* ── Light theme overrides ── */
html.light{
  --bg:           #f8f9fa;
  --fg:           #ffffff;
  --card:         #ffffff;
  --panel:        #f1f3f5;
  --input-bg:     #ffffff;

  --border:       #d1d5db;
  --border-hover: #9ca3af;
  --border-card:  #e5e7eb;

  --text:         #1f2937;
  --muted:        #6b7280;

  --pri:          #2563eb;
  --pri-dark:     #1d4ed8;
  --pri-bright:   #3b82f6;
  --pri-deep:     #1e40af;
  --pri-focus:    #1d4ed8;

  --surface-btn:    #e5e7eb;
  --surface-hover:  #d1d5db;
  --surface-menu:   #f3f4f6;
  --surface-nav:    #f9fafb;
  --surface-count:  #e5e7eb;
  --surface-active: #dbeafe;

  --success-bg:     #ecfdf5;
  --success-border: #a7f3d0;
  --success-text:   #065f46;

  --danger-bg:      #fef2f2;
  --danger-border:  #fecaca;
  --danger-text:    #991b1b;
  --danger:         #dc2626;
  --danger-hover:   #b91c1c;
  --danger-dashed:  #fecaca;

  --warn-bg:        #fffbeb;
  --warn-border:    #fde68a;
  --warn-text:      #92400e;

  --info-bg:        #eff6ff;
  --info-border:    #bfdbfe;
  --info-text:      #1e40af;

  --priv-bg:        #faf5ff;
  --priv-border:    #e9d5ff;
  --priv-text:      #6b21a8;

  --edit-text:      #b45309;
  --edit-border:    #fcd34d;

  --level1-start:   #dbeafe;
  --level1-end:     #eff6ff;
  --level1-text:    #1e40af;
  --level2-start:   #dcfce7;
  --level2-end:     #ecfdf5;
  --level2-text:    #065f46;
  --level3-start:   #fee2e2;
  --level3-end:     #fef2f2;
  --level3-text:    #991b1b;
}

/* ── Theme toggle button ── */
.theme-toggle{position:relative;width:36px;height:36px}
html.dark .icon-sun{display:block}
html.dark .icon-moon{display:none}
html.light .icon-sun{display:none}
html.light .icon-moon{display:block}
.theme-toggle svg{fill:var(--text)}

html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,Segoe UI,Roboto,Arial}
img{max-width:100%;display:block}
a{color:var(--pri);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ===========================
   A11Y
   =========================== */
.sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===========================
   APP SHELL — sidebar + main
   =========================== */
:root{
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 60px;
  --topbar-h: 56px;
}

.app-shell{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height:100vh;
  transition:grid-template-columns .2s ease;
}
.app-shell.is-collapsed{ grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* ----- Sidebar ----- */
.sidebar{
  position:sticky; top:0; align-self:start;
  height:100vh;
  display:flex; flex-direction:column;
  background:var(--bg);
  border-right:1px solid var(--border);
  overflow:hidden;
  z-index:1000;
  transition:width .2s ease;
}
.sidebar:hover{ overflow-y:auto; }

.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
.brand-name{white-space:nowrap;font-weight:700}

.sidebar-head{
  display:flex; align-items:center; gap:8px;
  height:var(--topbar-h);            /* aligné pixel-près avec .topbar */
  padding:0 14px;
  border-bottom:1px solid var(--border);
  flex:0 0 auto; box-sizing:border-box;
}
.sidebar-brand{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px; }
.sidebar-brand img{ flex:0 0 26px; width:26px; height:26px; }
.sidebar-collapse{
  flex:0 0 auto;
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--muted);
  border:1px solid var(--border); border-radius:8px;
  cursor:pointer;
  transition:background .12s ease, color .12s ease, transform .2s ease;
}
.sidebar-collapse:hover{ background:var(--surface-hover); color:var(--text); }
.is-collapsed .sidebar-collapse .ic-collapse{ transform:rotate(180deg); }

.side-nav{flex:1 1 auto; padding:12px 8px; display:flex; flex-direction:column; gap:16px; overflow-y:auto;}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-group-title{
  margin:0 0 4px;
  padding:0 12px;
  font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
  transition:opacity .15s ease;
}
.side-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.side-nav li::marker{content:none}
.side-nav a{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  color:var(--text); text-decoration:none;
  border-radius:8px; line-height:1.2;
  border-left:3px solid transparent;
  white-space:nowrap;
  transition:background .12s ease, border-color .12s ease;
}
.side-nav a:hover{background:var(--surface-hover);text-decoration:none}
.side-nav a.active,
.side-nav a[aria-current="page"]{
  background:var(--surface-active);
  border-left-color:var(--pri);
  font-weight:600;
}
.nav-icon{
  flex:0 0 auto;
  width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted);
}
.side-nav a.active .nav-icon,
.side-nav a:hover .nav-icon{ color:var(--text); }
.nav-icon svg{ width:100%; height:100%; }
.nav-label{
  overflow:hidden; text-overflow:ellipsis;
  transition:opacity .15s ease;
}

.sidebar-footer{
  padding:12px 14px;
  border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:10px;
  font-size:12px;
}
.sidebar-footer a{color:var(--muted);text-decoration:none}
.sidebar-footer a:hover{color:var(--text)}

/* ----- Collapsed state ----- */
.is-collapsed .sidebar{ width:var(--sidebar-w-collapsed); }
.is-collapsed .nav-label,
.is-collapsed .nav-group-title,
.is-collapsed .sidebar-footer,
.is-collapsed .brand-name{
  opacity:0; pointer-events:none;
  width:0; height:0; overflow:hidden;
}
.is-collapsed .sidebar-head{ justify-content:center; padding:0 8px; }
/* In collapsed mode the logo would get squashed — hide it, keep only the toggle */
.is-collapsed .sidebar-brand{ display:none; }
.is-collapsed .side-nav a{ justify-content:center; padding:10px 8px; }
.is-collapsed .side-nav a{ border-left-width:0; border-right:3px solid transparent; }
.is-collapsed .side-nav a.active{ border-right-color:var(--pri); border-left-color:transparent; }
.is-collapsed .nav-group{ gap:4px; }
.is-collapsed .nav-group + .nav-group{ padding-top:8px; border-top:1px solid var(--border); }

/* ----- Topbar ----- */
.app-main{display:flex;flex-direction:column;min-width:0}
.topbar{
  position:sticky; top:0; z-index:900;
  display:flex; align-items:center; gap:10px;
  height:var(--topbar-h);
  padding:0 20px;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  box-sizing:border-box;
}
.topbar-spacer{flex:1 1 auto}
.topbar-actions{display:flex;align-items:center;gap:10px}

/* Burger — shown only when sidebar is hidden (< breakpoint) */
.nav-toggle{
  display:none;
  font-size:22px; line-height:1;
  background:none; border:0; color:var(--text); cursor:pointer;
  padding:6px 10px; border-radius:8px;
}
.nav-toggle:hover{background:var(--surface-hover)}

/* Login pill (topbar) */
.nav-login-btn{
  color:var(--text); text-decoration:none;
  background:var(--surface-btn); border:1px solid var(--border);
  padding:7px 12px; border-radius:10px; line-height:1;
}
.nav-login-btn:hover{background:var(--surface-hover);text-decoration:none}
.nav-login-btn.active,.nav-login-btn[aria-current="page"]{box-shadow:inset 0 -2px 0 0 var(--pri)}

/* Language switcher (topbar) */
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--border);border-radius:10px;background:var(--surface-btn)}
.lang-opt{display:inline-block;padding:4px 8px;border-radius:8px;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--muted);text-decoration:none;line-height:1}
.lang-opt:hover{color:var(--text);background:var(--surface-hover);text-decoration:none}
.lang-opt.is-active{color:var(--text);background:var(--surface-active);box-shadow:inset 0 -2px 0 0 var(--pri)}

/* Topbar search button — quieter than before, matches theme-toggle */
.topbar .header-search{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  background:transparent; color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  transition:background .12s ease;
}
.topbar .header-search:hover{background:var(--surface-hover)}
.topbar .header-search svg{fill:currentColor}

/* Sidebar backdrop (drawer mode) */
.sidebar-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  z-index:999;
  opacity:0; transition:opacity .18s ease;
  pointer-events:none;
}
.sidebar-backdrop.is-open{opacity:1;pointer-events:auto}

/* ----- Responsive: drawer mode ----- */
@media (max-width:960px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{
    position:fixed; top:0; left:0; bottom:0;
    width:min(280px, 82vw);
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:10px 0 24px rgba(0,0,0,.45);
  }
  .sidebar.is-open{transform:translateX(0)}
  .nav-toggle{display:inline-flex; align-items:center}
  body.menu-open{overflow:hidden}
}
@media (min-width:961px){
  .sidebar-backdrop{display:none !important}
}

/* ===========================
   HERO
   =========================== */
.hero{
  position:relative; overflow:hidden;
  padding:36px 0 24px; text-align:center;
  border-bottom:1px solid var(--border);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(106,160,255,.10), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(168,85,247,.08), transparent 55%);
}
html.light .hero::before{
  background:
    radial-gradient(ellipse at 0% 0%, rgba(96,165,250,.10), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(168,85,247,.06), transparent 55%);
}
.hero>*{ position:relative; z-index:1; }
.hero .lead{color:var(--muted);margin-bottom:12px}
.hero-logo { margin-bottom: 16px; }
.hero-logo-img {
  max-width: 300px; height: auto;
  display: block; margin: 0 auto;
}

/* ===========================
   BUTTONS
   =========================== */
.cta-row{display:flex;justify-content:center;gap:12px;margin-top:14px}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;line-height:1;font-weight:600;border:1px solid var(--border);box-shadow:0 8px 22px rgba(0,0,0,.25)}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--pri-focus);outline-offset:2px;box-shadow:0 0 0 3px rgba(106,160,255,.25)}
.btn-primary{background:linear-gradient(180deg,var(--pri) 0%,var(--pri-dark) 100%);color:#07101f;border:0}
.btn-secondary{background:var(--surface-btn);color:var(--text)}
.btn-secondary:hover{background:var(--surface-hover)}
.btn-danger{background:var(--danger);color:#fff;border:0}
.btn-danger:hover{background:var(--danger-hover)}
.btn-sm{ padding:6px 10px; font-size:.9rem }
.btn.btn-secondary.active{ box-shadow: inset 0 -2px 0 0 var(--pri) }

/* ===========================
   METRICS / GRIDS / CARDS
   =========================== */
.metrics-section{
  padding:32px 24px;
  border-top:1px solid var(--border);
}
.metrics-section:first-of-type{border-top:0}
.metrics-section .section-title{max-width:1200px;margin:0 auto 16px;padding:0 4px;font-size:20px;font-weight:700;color:var(--text)}
.metrics-section .metrics-grid{max-width:1200px;margin:0 auto;gap:24px}
.metrics-section .container { padding-top: 6px; }

.metrics-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:24px; align-items:stretch;
}

.metric-card{
  height:100%; min-height:72px;
  display:flex;flex-direction:column;justify-content:center;
  padding:12px 14px;
  background:linear-gradient(180deg,var(--card) 0%,var(--panel) 100%);
  border:1px solid var(--border-card); border-radius:12px;
  transition:transform .06s ease,border-color .2s ease,box-shadow .2s ease;
}
.metric-card:hover{transform:translateY(-1px);border-color:var(--border-hover);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.metric-label{color:var(--muted);font-size:12.5px}
.metric-value{font-size:22px;font-weight:800;letter-spacing:.2px;margin-top:2px}
.metric-sublabel{color:var(--muted);font-size:11.5px;margin-top:2px}

@media (max-width:520px){
  .metrics-section{padding-left:16px;padding-right:16px}
  .metrics-section .section-title{margin:0 auto 10px;padding:0 2px;font-size:16.5px}
  .metrics-section .metrics-grid{gap:34px !important}
  .metrics-section .metrics-grid > .metric-card{margin:0 !important}
  .metric-card{min-height:64px;padding:10px 12px;border-radius:10px}
  .metric-label{font-size:12px;margin-bottom:1px}
  .metric-value{font-size:18px;font-weight:700;line-height:1.15;margin-top:0}
  .metric-sublabel{font-size:10.5px;opacity:.75;margin-top:1px}
}

/* ===========================
   LISTS / ACTIVITY
   =========================== */
.recent-activity .activity-list{display:grid;gap:10px;padding:0;list-style:none}
.activity-item{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px;
  transition:background .2s ease,border-color .2s ease
}
.activity-item:hover{border-color:var(--border-hover);background:var(--card)}

/* ===========================
   TABLE
   =========================== */
.table-card{
  background: var(--fg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  overflow: hidden;
}
.table-scroll{ width:100%; overflow-x:auto; }

.rl-table{
  width:100%; border-collapse:collapse;
  min-width:720px; font-size:.95rem;
}
.rl-table thead th{
  position:sticky; top:0; z-index:1;
  background:var(--card); color:var(--text);
  text-align:left; font-weight:700; padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.rl-table tbody td{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);
  vertical-align:top; color:var(--text);
}
.rl-table tbody tr:hover{ background:var(--panel); }
.rl-table time{ color: var(--muted); }

/* Mobile: card layout */
@media (max-width: 640px){
  .rl-table{ min-width:0; border-collapse:separate; }
  .rl-table thead{ display:none; }
  .rl-table tbody{ display:block; }
  .rl-table tbody tr{
    display:block; background:var(--fg);
    border:1px solid var(--border); border-radius:12px;
    padding:12px; margin-bottom:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
  }
  .rl-table tbody td{ display:block; border:0; padding:6px 0; }
  .rl-table tbody td:nth-child(1){ font-weight:600; }
  .rl-table tbody td:nth-child(2){ margin-top:4px; }
  .rl-table tbody td:nth-child(3){ color:var(--muted); font-size:12px; }
  .rl-table tbody td:nth-child(4){ margin-top:4px; }
  .rl-table tbody td:nth-child(5){ margin-top:6px; }
}

/* Recent: mobile cards variant */
@media (max-width: 520px){
  .table-card{ background:transparent; border:0; box-shadow:none; }
  .table-scroll{ overflow:visible; }
  .rl-table{ min-width: 0; border-collapse: separate; }
  .rl-table thead{ display:none; }
  .rl-table tbody{ display:block; }
  .rl-table tbody tr{
    display:block; background: var(--fg);
    border:1px solid var(--border); border-radius:12px;
    padding:12px; margin-bottom:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
  }
  .rl-table tbody td{ display:block; border:0; padding:4px 0; }
  .rl-table tbody td:nth-child(1){ font-size:12px; color:var(--muted); margin-bottom:2px; }
  .rl-table tbody td:nth-child(2){ font-size:15.5px; font-weight:600; line-height:1.35; }
  .rl-table tbody td:nth-child(3){ margin-top:6px; }
  .rl-table tbody td:nth-child(3) a{
    display:inline-block; padding:2px 8px;
    border:1px solid var(--border); border-radius:999px;
    color:var(--muted); text-decoration:none;
  }
  .rl-table tbody td:nth-child(3) a:hover{ text-decoration:underline; }
}

/* ===========================
   ANCHOR LIST
   =========================== */
.anchor-list{
  list-style:none; padding:0; margin:0 0 16px;
  display:flex; flex-wrap:wrap; gap:8px;
}
.anchor-list li a{
  display:inline-block; padding:4px 10px;
  border:1px solid var(--border); border-radius:999px;
  color:var(--muted); text-decoration:none;
}
.anchor-list li a:hover{ text-decoration:underline; }

/* ===========================
   BREADCRUMB
   =========================== */
.breadcrumb{
  display:flex; align-items:center; gap:8px;
  color:var(--muted); font-size:.95rem; margin-bottom:8px;
}
.breadcrumb a{ color:var(--muted); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }

/* ===========================
   PROFILES (groups / markets)
   =========================== */
.profile{ margin-bottom:36px; }
.profile-header{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:12px;
}
.profile-title{ margin:0; font-size:22px; }
.profile-title a{ color:var(--text); text-decoration:none; }
.profile-title a:hover{ text-decoration:underline; }
.profile-desc { margin-bottom: 16px; }
.link-private{ color:var(--priv-text); }

.edit-link{
  color:var(--edit-text); text-decoration:none; font-size:14px;
  border:1px dashed var(--edit-border); padding:4px 8px; border-radius:8px; margin-left:10px;
}
.edit-link:hover{ text-decoration:underline; }

/* ===========================
   BADGES
   =========================== */
.profile-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.badge-status{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px; font-size:12px;
  border:1px solid var(--border);
}
.badge-up{ background:var(--success-bg); border-color:var(--success-border); color:var(--success-text); }
.badge-degraded{ background:var(--warn-bg); border-color:var(--warn-border); color:var(--warn-text); }
.badge-down{ background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger-text); }
.badge-neutral,
.badge-info,
.badge-private,
.badge-noactive{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px; font-size:12px;
  border:1px solid var(--border);
}
.badge-neutral{ background:var(--surface-count); border-color:var(--border-hover); color:var(--info-text); }
.badge-info{ background:var(--info-bg); border-color:var(--info-border); color:var(--info-text); }
.badge-private{ background:var(--priv-bg); border-color:var(--priv-border); color:var(--priv-text); }
.badge-noactive{ background:var(--muted); border-color:var(--priv-border); color:var(--bg); }
.url-cell.is-private{ color:var(--danger-text); }

/* Log-specific badges */
.badge{ padding:2px 8px; border-radius:999px; font-size:.85rem; }
.badge-danger { background:rgba(220, 38, 38, .15); color:var(--danger-text); border:1px solid rgba(220,38,38,.35); }
.badge-warn   { background:rgba(234,179, 8, .12); color:#fde68a; border:1px solid rgba(234,179,8,.35); }
.badge-ok     { background:rgba(34,197, 94,.12); color:var(--success-text);  border:1px solid rgba(34,197,94,.35); }

/* ===========================
   LOGOS
   =========================== */
.logo-grid{
  display:flex; flex-wrap:wrap; gap:12px; margin-bottom:12px;
}
.logo-grid img{
  max-height:150px; max-width:150px; height:auto; width:auto;
  background: var(--fg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* ===========================
   THUMBNAILS
   =========================== */
.thumb-cell{ text-align:center; }
.thumb{
  width:88px; height:56px; object-fit:cover;
  border:1px solid var(--border); border-radius:8px;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .2s ease;
}
.thumb:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow:0 10px 22px rgba(0,0,0,.25);
}

/* ===========================
   SECTION BLOCKS / ACCORDION
   =========================== */
.section-block { margin: 18px 0 22px; }

.section-summary {
  list-style: none;
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  outline: none;
}
.section-summary::-webkit-details-marker { display: none; }
.section-summary:hover{ filter: brightness(1.06); }
.section-summary:focus-visible{ box-shadow: 0 0 0 3px rgba(106,160,255,.25); }

.section-block[open] .section-summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.section-summary .count{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-count); border: 1px solid var(--border-hover); color: var(--info-text);
  font-size: 12px; font-weight: 700;
}

.section-block > .table-card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Caret (closed) */
.section-summary::before{
  content: "\25B6"; /* ▶ */
  font-size: 0.9rem; line-height: 1;
  display: inline-block; margin-right: 8px;
  transform-origin: center;
  transition: transform .18s ease, opacity .18s ease;
  opacity: .9;
}
/* Caret (open) */
.section-block[open] > .section-summary::before{
  content: "\25BC"; /* ▼ */
  transform: translateY(1px);
}

/* Hierarchy colors */
.section-block.level-1 > .section-summary {
  background: linear-gradient(180deg,var(--level1-start) 0%,var(--level1-end) 100%);
  color: var(--level1-text);
}
.section-block.level-2 > .section-summary {
  background: linear-gradient(180deg,var(--level2-start) 0%,var(--level2-end) 100%);
  color: var(--level2-text);
}
.section-block.level-3 > .section-summary {
  background: linear-gradient(180deg,var(--level3-start) 0%,var(--level3-end) 100%);
  color: var(--level3-text);
}

/* Indentation by level */
.section-block.level-2{ margin-left: 12px; }
.section-block.level-3{ margin-left: 24px; }

@media (max-width: 520px){
  .section-block.level-2{ margin-left: 8px; }
  .section-block.level-3{ margin-left: 16px; }
}

/* ===========================
   ABOUT PAGE
   =========================== */
.about-section{padding:36px 0;border-top:1px solid var(--border)}
.about-section:first-of-type{border-top:0}
.about-hero img {
  background: var(--fg);
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  max-width: 300px;
  margin: 0 auto 16px;
  display: block;
}
.prose{color:var(--text)}
.prose p{margin:0 0 12px;color:var(--muted)}
.prose ul{margin:0 0 12px;padding-left:20px;color:var(--muted)}
.prose a{color:var(--pri)} .prose a:hover{text-decoration:underline}

/* ===========================
   FOOTER
   =========================== */
.site-footer{
  border-top:1px solid var(--border);
  padding:16px 20px;
  font-size:.9rem;color:var(--muted);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px
}
.site-footer a{color:var(--pri)} .site-footer a:hover{text-decoration:underline}

/* ===========================
   FORMS (shared)
   =========================== */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label{ color: var(--muted); font-size:.95rem; }
.label{ display:block; color:var(--muted); font-size:.9rem; margin-bottom:4px; }

.input,
.form-card input[type="text"],
.form-card input[type="password"]{
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}
.input:focus,
.form-card input[type="text"]:focus,
.form-card input[type="password"]:focus{
  border-color:var(--border-hover);
  box-shadow:0 0 0 3px rgba(106,160,255,.25);
}

.form-card{
  background: var(--fg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  max-width: 420px;
  margin: 0 auto;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

.form-error{ color:var(--danger-text); background:var(--danger-bg); border:1px solid var(--danger-border);
  padding:6px 8px; border-radius:8px; font-size:.9rem; }

.actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.actions .btn{ min-width:120px; }
@media (max-width:520px){
  .actions{ justify-content:stretch; }
  .actions .btn{ width:100%; }
}

/* ===========================
   AUTH / LOGIN
   =========================== */
.auth-section{ padding: 28px 0 48px; }
.auth-section .container{ max-width: 640px; }

/* Flash messages */
.auth-section .flash-container{
  max-width: 420px;
  margin: 0 auto 14px;
}
.auth-section .flash-container ul,
.auth-section .flash-container ol{
  list-style: none !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}
.auth-section .flash-container li{
  list-style: none !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
/* Flash alerts — global */
.alert{
  border-radius:10px; padding:12px 16px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  display:flex; align-items:center; gap:8px;
  margin:0 0 12px;
}
.alert-info{    background:var(--info-bg); border:1px solid var(--info-border); color:var(--info-text); }
.alert-success{ background:var(--success-bg); border:1px solid var(--success-border); color:var(--success-text); }
.alert-warning{ background:var(--warn-bg); border:1px solid var(--warn-border); color:var(--warn-text); }
.alert-danger,
.alert-error{   background:var(--danger-bg); border:1px solid var(--danger-border); color:var(--danger-text); }
.alert .btn-close{ filter:invert(1); opacity:.7; margin-left:auto; }

/* Auth-section overrides (keep for specificity) */
.auth-section .flash-container .alert{
  margin:0;
}
.auth-section .flash-container .btn-close:hover{ opacity:1; }

/* ===========================
   MODALS
   =========================== */
body.modal-open{ overflow: hidden; }

/* --- modal-root (leaks / RF) --- */
.modal-root[aria-hidden="true"] { display: none; }
.modal-root[aria-hidden="false"] { display: block; }

.modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 2000;
}
.modal-dialog{
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: min(920px, 92vw);
  max-height: 86vh; overflow: auto;
  background: var(--fg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
  z-index: 2001;
}
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.modal-header h2{ margin:0; font-size: 1.1rem; }
.modal-close{
  background: transparent; border: 0; color: var(--text);
  font-size: 22px; line-height: 1; cursor: pointer; opacity: .8;
}
.modal-close:hover{ opacity: 1; }
.modal-body{ padding: 14px; }
.modal-footnote{ color: var(--muted); font-size: .9rem; margin-top: 8px; }

/* --- chart-modal (stats / group) --- */
.chart-modal{ display:none; position:fixed; inset:0; z-index:1400; }
.chart-modal.is-open,
.chart-modal[aria-hidden="false"]{ display:block; }
.chart-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(2px); }
.chart-modal__dialog{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background: var(--bg); border:1px solid var(--border); border-radius:14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  padding: 14px; width: min(96vw, 1100px); max-height: 90vh; overflow: auto;
  box-sizing: border-box;
}
.chart-modal__header{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.chart-modal__title{ margin:0; font-size:1.1rem; }
.chart-modal__close{ background:none; border:0; color:var(--text); font-size:22px; cursor:pointer; border-radius:8px; padding:4px; }
.chart-modal__close:hover{ background: rgba(255,255,255,.08); }
#chart-modal-plot{ width:100%; height:calc(90vh - 48px); }

/* RF modal specifics */
.rf-modal .rl-table { width:100%; border-collapse: collapse; }
.rf-modal .rl-table th,
.rf-modal .rl-table td { border:1px solid var(--border); padding:8px 10px; vertical-align: top; }
.rf-modal .rl-table th { background:var(--card); text-align:left; }
.rf-modal .table-card { background: var(--fg); border:1px solid var(--border); border-radius: 12px; }
.rf-modal .table-scroll { overflow:auto; }

/* ===========================
   FILTERS & SEARCH
   =========================== */
.search-card .filters-wrap{ width: min(var(--filters-width), 100%); margin: 0 auto; }
.search-card .filters{ display:flex; justify-content:center; gap:0; flex-wrap:nowrap; align-items:stretch; }
.search-card .filters .field{ width: 100%; position:relative; }

.field--search { position: relative; }
.field--search::before{
  content: "";
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  background: rgba(255,255,255,.9);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat center / contain;
  pointer-events: none;
}
.field--search .input{
  height: 48px; padding-left: 44px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
}
.field--search .input::placeholder{ color: rgba(255,255,255,.75); }
.field--search .input:focus{
  box-shadow:
    0 0 0 2px rgba(59,130,246,.55),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

.input-clear{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  border-radius:8px; padding:2px 8px; line-height:1; cursor:pointer;
}
.input-clear:hover{ background: rgba(59,130,246,.35); }

.search-card .filters-meta{ text-align:center; margin-top:8px; font-size:.9rem; color:var(--muted); }

/* Alpha filter bar */
.search-card .alpha-bar{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:10px; width:100%; }
.alpha-btn{ all: unset; cursor: pointer; font:600 12px/1 var(--font);
  padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--input-bg); color:var(--text); }
.alpha-btn[disabled]{ opacity:.35; cursor: not-allowed; }
.alpha-btn:focus{ outline: 2px solid rgba(106,160,255,.6); outline-offset: 2px; }
.alpha-btn.is-active{
  background:var(--surface-active);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Scroll to top */
.scroll-top{
  position:fixed; right:24px; bottom:24px; z-index:1000;
  width: 56px; height: 56px;
  display:flex; align-items:center; justify-content:center;
  border: none;
  background: linear-gradient(180deg, var(--pri-bright) 0%, var(--pri-deep) 100%);
  color: #fff; font-size: 20px; font-weight: 700;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  cursor:pointer; opacity:0; pointer-events:none;
  transition: transform .15s ease, opacity .15s ease;
}
.scroll-top:hover{ transform: translateY(-2px) scale(1.03); }
.scroll-top.is-visible{
  opacity: 1; pointer-events: auto;
  animation: st-pulse .9s ease 1;
}
@keyframes st-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(59,130,246,.45) }
  100%{ box-shadow: 0 0 0 12px transparent }
}

/* ===========================
   ADMIN: LINK EDITOR
   =========================== */
.link-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
  margin-bottom: 16px;
}
.link-card__head{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  background: var(--panel);
  border-bottom:1px solid var(--border);
}
.link-card__title{ font-weight:700; color:var(--text); }
.link-card__badge{
  margin-left:auto;
  font-size:.85rem; color:var(--info-text);
  background:var(--surface-count); border:1px solid var(--info-border);
  padding:4px 10px; border-radius:999px;
}

.link-card__body{
  padding:12px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
}
@media (max-width: 900px){
  .link-card__body{ grid-template-columns:1fr; }
}

.link-card .input,
.link-card input[type="text"],
.link-card input[type="url"],
.link-card input[type="number"],
.link-card select,
.link-card textarea{
  width:100%; box-sizing:border-box;
  background:var(--input-bg); color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:8px 10px;
}
.link-card .label{
  display:block; color:var(--muted);
  font-size:.9rem; margin-bottom:4px;
}

.link-card__switches{
  grid-column: 1 / -1;
  display:flex; flex-wrap:wrap; gap:14px 18px;
  align-items:center; padding-top:2px;
}
.link-card__switches label{
  display:inline-flex; gap:8px; align-items:center;
  color:var(--text); font-size:.95rem;
}

.link-card__row{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns: 220px 220px 1fr 1fr;
  gap:10px;
}
@media (max-width: 1100px){
  .link-card__row{ grid-template-columns: 1fr 1fr; }
}

.link-card__mini{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center;
}

.link-card__script{ grid-column:1 / -1; }
.link-card__script textarea{ min-height:140px; }

.link-card__meta{
  grid-column:1 / -1;
  display:grid; gap:10px;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 900px){
  .link-card__meta{ grid-template-columns:1fr; }
}

.link-card .delete-link{ color:var(--danger-text) !important; text-decoration:none; }
.link-card .delete-link:hover{ text-decoration:underline; }
.link-card input[type="number"]{ max-width:110px; }

/* Link block grid layout */
.link-block .form-grid.three{
  grid-template-columns:
    140px minmax(0,1fr)
    120px minmax(0,1fr)
    120px minmax(0,1fr);
  gap: 10px 14px;
}
.link-block .form-grid.three > label{
  align-self: center; color: var(--muted);
}
.link-block .form-grid.three .span2{
  grid-column: 2 / span 4;
}
.link-block .block-label{ margin-top: 12px; }
.link-block .switch-row{ margin-top: 10px; margin-bottom: 8px; }

@media (max-width: 1200px){
  .link-block .form-grid.three{
    grid-template-columns: 140px minmax(0,1fr);
  }
  .link-block .form-grid.three .span2{
    grid-column: 2 / -1;
  }
}

/* ===========================
   ADMIN: LOGO MANAGEMENT
   =========================== */
.logo-grid.admin-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 12px;
}
.logo-card {
  border: 1px solid var(--border);
  background: var(--fg);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.logo-imgwrap {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1.8 / 1;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.logo-imgwrap img {
  max-width: 100%; max-height: 160px;
  object-fit: contain; padding: 10px;
}
.logo-fields { padding: 10px; }
.empty-note { padding: 14px; color: var(--muted); }

.dropzone {
  display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center;
  border: 2px dashed var(--border); border-radius: 12px;
  min-height: 120px; cursor: pointer;
  text-align: center; padding: 16px;
  color: var(--muted); background: var(--fg);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.dropzone.dragover {
  border-color: var(--pri);
  background: var(--panel);
  color: var(--text);
}

/* ===========================
   ADMIN: POST EDITOR
   =========================== */
.post-card .grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 12px 16px;
  align-items: start;
}
.post-card .field,
.post-card .field > .input,
.post-card .field > textarea { width: 100%; }
.post-card textarea { min-height: 160px; resize: vertical; }

.post-card .preview {
  background: var(--panel, #0f1623);
  border: 1px solid var(--border, #2d333b);
  border-radius: 10px;
  min-height: 220px; padding: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted, #9ca3af); overflow: hidden;
}
.post-card .preview img {
  max-width: 100%; max-height: 100%;
  border-radius: 8px; display: block;
}

.post-card .file-row {
  display: flex; gap: 12px;
  align-items: center; flex-wrap: wrap;
}
.post-card .file-row label { white-space: nowrap; margin: 0; }
.post-card .inline-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

@media (max-width: 900px) {
  .post-card .grid { grid-template-columns: 1fr; }
  .post-card .inline-2 { grid-template-columns: 1fr; }
  .post-card .preview { min-height: 180px; }
}

/* Post grid (detail editor) */
.post-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  align-items: start;
}
@media (max-width: 1100px){
  .post-grid{ grid-template-columns: 1fr; }
}

.post-main, .post-aside{ min-width: 0; }
.post-main .field,
.post-main .input,
.post-main textarea,
.post-main input[type="text"]{ width: 100%; }
.post-main input[type="url"],
.post-main input[type="datetime"],
.post-main select{ width: 100%; box-sizing: border-box; }
.post-main textarea{ min-height: 160px; }

.preview-box{
  height: 260px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-size: .95rem; color: var(--muted);
  text-align: center; padding: 10px;
}

.aside-row{ display:flex; gap:12px; align-items:center; }
.aside-row .spacer{ flex:1; }
.post-card:not([open]) .post-grid{ display:none; }

/* Edit posts scoped overrides */
.editposts .post-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: var(--panel, #0f1623);
  margin-bottom: 14px;
}
.editposts .post-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px 18px;
  align-items: start;
}
.editposts .post-grid > * { min-width: 0; }
.editposts .field input,
.editposts .field textarea,
.editposts .field select { width: 100%; box-sizing: border-box; }
.editposts .preview-col {
  grid-column: 2;
  grid-row: 1 / span 10;
  min-width: 0;
}
.editposts .preview-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  height: 260px; padding: 8px;
  display: flex; align-items: center; justify-content: center;
  overflow: auto;
}
.editposts .preview-box img {
  max-width: 100%; max-height: 100%;
  height: auto; display: block;
}
.editposts .inline-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 980px) {
  .editposts .post-grid { grid-template-columns: 1fr; }
  .editposts .preview-col { grid-column: 1; grid-row: auto; }
  .editposts .inline-2 { grid-template-columns: 1fr; }
}
.editposts .badge {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .85rem;
}

/* ===========================
   SEARCH MODAL (base.html)
   =========================== */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
.rl-modal[hidden]{display:none}
.rl-modal{position:fixed; inset:0; z-index:1400; display:grid; place-items:center;}
.rl-modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:saturate(120%) blur(2px);}
.rl-modal__panel{position:relative; width:min(600px,92vw); background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:0 18px 50px rgba(0,0,0,.45); animation:rl-pop .16s ease-out;}
@keyframes rl-pop{from{transform:scale(.98);opacity:0}to{transform:scale(1);opacity:1}}
.rl-modal__title{margin:0 0 12px; font-size:18px; font-weight:700; color:var(--text);}
.rl-modal__close{position:absolute; top:10px; right:10px; background:transparent; border:1px solid var(--border); color:var(--text); width:34px; height:34px; border-radius:10px; cursor:pointer;}
.rl-modal__close:hover{background:var(--surface-menu)}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:var(--surface-btn); border:1px solid var(--border); color:var(--text); cursor:pointer;}
.icon-btn:hover{background:var(--surface-hover)}
.header-search{margin-left:8px}
.rl-search-form{display:flex; gap:10px; align-items:center; margin-top:6px;}
.rl-search-input{flex:1; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:12px 14px; font-size:16px; line-height:1.2;}
.rl-search-input::placeholder{color:var(--muted)}
@media (max-width:480px){.rl-search-form{flex-direction:column; align-items:stretch}.rl-modal__close{top:8px; right:8px}}

/* ===========================
   NAV: MORE DROPDOWN (base.html)
   =========================== */
.nav-links .more summary.active { background:var(--surface-btn); border-color:var(--border); }
.nav-links .more details{position:relative}
.nav-links .more summary{list-style:none; cursor:pointer; padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:var(--surface-nav)}
.nav-links .more summary::-webkit-details-marker{display:none}
.nav-links .more[open] summary{background:var(--surface-btn)}
.nav-links .more .more-menu{position:absolute; top:calc(100% + 8px); left:0; min-width:220px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:6px; box-shadow:0 12px 40px rgba(0,0,0,.35); z-index:1200}
.nav-links .more .more-menu li{margin:0}
.nav-links .more .more-menu a{display:block; padding:8px 10px; border-radius:8px}
.nav-links .more .more-menu a:hover{background:var(--surface-hover)}
@media (max-width: 880px){ .nav-links{gap:8px} }

/* ===========================
   LIGHTBOX (group.html + groups.html)
   =========================== */
.rl-modal--lightbox .rl-modal__panel{
  background: transparent; border: none; box-shadow: none; border-radius: 0;
  width: min(84vw, 1300px); height: min(82vh, 92svh); padding: 0;
  display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center;
}
.rl-modal--lightbox .rl-modal__backdrop{ background: rgba(0,0,0,.75); }
.rl-modal__panel--image .img-stage{
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#imgModalImg{ max-width: 82vw; max-height: 74vh; object-fit: contain; display: block; border-radius: 8px; }
.img-caption{
  width: 100%; padding: 12px 18px; text-align: center;
  color: var(--muted); font-size: 14px; line-height: 1.4; border-top: 1px solid var(--border);
  background: rgba(0,0,0,.25); backdrop-filter: blur(2px);
}
.img-caption:empty{ display:none; }
.rl-modal--lightbox .rl-modal__close{
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px;
  border: 1px solid var(--border); background: rgba(0,0,0,.25); color: var(--text);
  border-radius: 12px; cursor: pointer;
}
.rl-modal--lightbox .rl-modal__close:hover{ background: rgba(255,255,255,.12); }
.img-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border: 1px solid var(--border);
  background: rgba(0,0,0,.25); color: var(--text); border-radius: 14px; cursor: pointer;
}
.img-prev{ left: 16px; } .img-next{ right: 16px; }
.img-nav:hover{ background: rgba(255,255,255,.12); }
.rl-modal--lightbox:focus{ outline: none; }

/* ===========================
   GROUP: BADGES & SPARK (group.html)
   =========================== */
.badge-unknown{background:var(--fg);color:var(--muted);border-color:var(--border)}
.spark{width:120px;height:28px}
.uptime-cell{white-space:nowrap}

/* ===========================
   NOTE OVERLAY (group.html)
   =========================== */
#noteLayer:not([data-open="1"]) { display: none !important; }
#noteLayer[data-open="1"]        { display: grid; }

#noteLayer{
  --note-bg: var(--card, #121a28);
  --note-fg: var(--text);
  --note-border: var(--border, #2d333b);
  --note-muted: var(--text);
  --note-shadow: 0 20px 60px rgba(0,0,0,.45);
}
#noteLayer [role="dialog"]{
  background: var(--note-bg) !important;
  color: var(--note-fg) !important;
  border: 1px solid var(--note-border);
  border-radius: 12px;
  box-shadow: var(--note-shadow);
}
#noteLayer header{
  background: linear-gradient(180deg, rgba(0,0,0,.03), transparent);
  border-bottom: 1px solid var(--note-border);
}
#noteLayerTitle{
  margin: 0; font-size: 14px; font-weight: 600;
  letter-spacing: .2px; color: var(--note-muted);
}
#noteLayerText{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13.5px; line-height: 1.6;
  color: var(--note-fg); background: transparent;
}
#noteLayerHtml, #noteLayerHtml *{
  color: var(--note-fg) !important;
  background: transparent !important;
}
#noteLayerHtml a{ text-decoration: underline; }
#noteLayerHtml img{ max-width: 100%; height: auto; }
#noteLayer [role="dialog"],
#noteLayerText,
#noteLayerHtml,
#noteLayerHtml * { color: var(--text) !important; }

/* ===========================
   ACTOR PAGE (actor.html)
   =========================== */
.ta-grid{ display:grid; grid-template-columns:minmax(0,2.1fr) minmax(0,1fr); gap:14px; align-items:start; }
.ta-grid > *{ min-width:0; }
.col-main{ display:flex; flex-direction:column; gap:12px; }
.col-side{ display:flex; flex-direction:column; gap:12px; }
.card-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-bottom:1px solid var(--border); }
.card-title{ font-weight:600; }
.pad{ padding:10px 12px; }
.muted{ color:var(--muted); }
.h4{ margin:0 0 6px 0; font-weight:600; }
.tight{ margin:0; padding-left:18px; }
.rel-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }

/* Actor thumbnails */
.thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.thumbs img{ width:100%; height:90px; object-fit:cover; border-radius:10px; border:1px solid var(--border); transition:transform .15s ease; background:var(--input-bg); }
.thumbs img:hover{ transform:scale(1.02); }
.thumb-link{ display:block; }

/* Actor lightbox */
.ta-lightbox[hidden]{ display:none; }
.ta-lightbox{ position:fixed; inset:0; z-index:1000; }
.lb-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.lb-figure{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-width:min(92vw,1100px); max-height:90vh; padding:0; margin:0; }
#lb-img{ max-width:100%; max-height:80vh; display:block; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.5); background:var(--input-bg); }
#lb-cap{ text-align:center; margin-top:6px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-close{ position:absolute; top:-10px; right:-10px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--border); background:var(--panel); color:var(--text); cursor:pointer; }
.lb-close:hover{ opacity:.9; }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border); background:var(--panel); color:var(--text); cursor:pointer; opacity:.95;
  display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1; }
.lb-nav:hover{ opacity:1; }
.lb-prev{ left:-12px; } .lb-next{ right:-12px; }
.lb-count{ position:absolute; right:0; bottom:-30px; font-size:.9rem; opacity:.8; }

@media (max-width: 900px){ .ta-grid{ grid-template-columns:1fr; } }
@media (max-width: 600px){ .lb-prev{ left:0; } .lb-next{ right:0; } }

/* Alias chips */
.alias-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px; border-radius:999px;
  font-size:13px; line-height:1; border:1px solid var(--border);
  background:var(--bg-muted, var(--panel)); color:var(--text, #e5e7eb);
}
.chip:hover{ filter:brightness(1.1); }

/* ===========================
   CRYPTO DETAIL (cryptodetail.html)
   =========================== */
.src-badge{display:inline-block;min-width:1.2em;padding:0 .25em;margin-left:.35em;
           border-radius:.35em;font:600 12px/1 var(--font-sans);text-align:center;
           background:var(--surface-count);color:var(--muted);vertical-align:baseline}
.src-badge[data-src^="ransomwhe.re"]{background:var(--info-bg)}
.src-badge[data-src^="ransomlook"]{background:var(--priv-bg)}
.src-badge[data-src^="manual"]{background:var(--level2-start)}
.src-legend{font-size:12px;color:var(--muted);margin:.5rem 0 1rem}
.flash-border{box-shadow:0 0 0 2px rgba(100,180,255,.35) inset}
.addr{word-break:break-all}
.mono{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace)}
.hash-full, .hash-full code{
  white-space: normal !important; word-break: break-all !important;
  overflow: visible !important; text-overflow: clip !important;
}

/* ===========================
   NOTES DETAIL (notesdetails.html)
   =========================== */
.note-body{
  margin:0; padding:12px;
  white-space:pre-wrap; word-break:break-word;
  background:var(--panel); border:1px solid var(--border);
  border-radius:10px; line-height:1.45;
}

/* ===========================
   LOGS (logs.html)
   =========================== */
.log-summary{
  display:block; max-height:2.4em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.log-details[open] .log-summary{
  white-space:var(--log-wrap, nowrap); max-height:none;
}
.log-pre{
  margin:8px 0 0; padding:10px;
  border:1px solid var(--border); border-radius:10px;
  background:var(--panel); white-space:var(--log-wrap, pre); overflow:auto;
}

/* ===========================
   RF DUMPS (RF.html)
   =========================== */
.th-sort{ all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.th-sort:focus{ outline: 2px solid rgba(106,160,255,.6); outline-offset: 2px; border-radius: 6px; }
.th-sort .ind{ opacity:.6; font-size:.9em }

/* ===========================
   ADMIN: TYPE TOGGLE & PICKER (edit.html, compare.html)
   =========================== */
.type-toggle{ display:flex; gap:8px; align-items:center; }
.type-toggle input{ display:none; }
.type-toggle label{ cursor:pointer; }
.type-toggle input:checked + label{ box-shadow: inset 0 -2px 0 0 var(--pri); }
.picker-row{ display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:end; }
@media (max-width: 640px){ .picker-row{ grid-template-columns: 1fr; } }

/* ===========================
   COMPARE PAGE (compare.html)
   =========================== */
.compare-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.actions-row{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.actions-row .spacer{ flex:1; }
.soft-divider{ border:0; border-top:1px solid var(--border); margin:18px 0; }
.compare-result-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 900px){ .compare-grid, .compare-result-grid{ grid-template-columns: 1fr; } }
.metric-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px }
.metric-list li{ display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--panel) }
@media (max-width: 900px){ .metric-list{ grid-template-columns:1fr; } }

/* ===========================
   ADMIN: COMMON HELPERS
   =========================== */
.textarea{ width:90%; min-height:170px; resize:vertical;
  background:var(--input-bg); border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; color:var(--text); }
#kw.textarea{ min-height:520px; }
select{
  background:var(--panel); color:var(--text);
  border:1px solid var(--border); border-radius:10px; padding:8px 10px;
}
.table-card.overflow-visible, .admin-form .prose{ overflow:visible; }
.hint{ font-size:.85rem; color:var(--muted); }
.counter{ font-size:.85rem; color:var(--muted); text-align:right; margin-top:6px; }
.toolbar{ display:flex; gap:8px; justify-content:flex-end; }
.toolbar-right{ margin-left:auto; display:flex; gap:8px; }
.pill{ font:600 12px/1 var(--font); padding:6px 10px; border-radius:999px;
  background:var(--card); border:1px solid var(--border); color:var(--muted); }
.kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:.95rem; }
.kv dt{ color:var(--muted); }
.kv dd{ margin:0; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stack{ display:flex; flex-direction:column; gap:10px; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--pri-bright); opacity:.7; }
.chev{ transform:rotate(-90deg); transition:transform .18s ease; opacity:.7; }
details[open] .chev{ transform:rotate(0deg); }
.badge code{ background:transparent; color:inherit; }
.post-head .title{ flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.post-body{ padding:12px; }
.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.container.wrap{ max-width:1100px; margin:0 auto; }
.wrap .row{ display:grid; grid-template-columns:1.2fr .8fr; gap:16px; }
@media (max-width: 920px){ .wrap .row{ grid-template-columns:1fr; } }
.kw-badge{ display:inline-block; margin:2px 6px 2px 0; padding:.2rem .5rem;
  border:1px solid var(--border); border-radius:999px; background:var(--card);
  color:var(--text); font-size:.85rem; }

/* ===========================
   ADMIN: ADD POST ENTRY (addpostentry.html)
   =========================== */
.add-wrap{ max-width:1100px; margin:0 auto; }
.post-form{ display:grid; grid-template-columns:1.1fr .9fr; gap:16px; }
.add-wrap .card{ border:1px solid var(--border); background:var(--panel); border-radius:12px; }
.add-wrap .card + .card{ margin-top:12px; }
.card-hd{ padding:10px 12px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; }
.card-bd{ padding:12px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 920px){ .post-form{ grid-template-columns:1fr; } }

/* ===========================
   ADMIN: EDIT POST (editpost.html)
   =========================== */
.edit-wrap{ max-width:1100px; margin:0 auto; }
details.post{ border:1px solid var(--border); border-radius:12px;
  background:var(--panel); margin-bottom:10px; overflow:hidden; }
details.post[open]{ box-shadow:0 0 0 1px rgba(255,255,255,.04) inset; }
summary.post-head{ list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:10px; padding:10px 12px; }
summary.post-head::-webkit-details-marker{ display:none; }
.badge-id{ padding:4px 8px; border:1px solid var(--border); border-radius:8px;
  background:var(--input-bg); color:var(--muted); font-size:.8rem; }

/* ===========================
   ADMIN: ACTOR FORMS (editactor.html, addactor.html)
   =========================== */
.admin-form .two-col{
  display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);
  gap:14px; align-items:start;
}
.admin-form .two-col > *{ min-width:0; }
.admin-form .split-2{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px;
}
.admin-form .full{ grid-column:1 / -1; }
.admin-form .input{ width:92%; }
.admin-form textarea.input{
  height:auto !important; min-height:140px; width:95%; box-sizing:border-box;
  line-height:1.35; padding:10px 12px; resize:vertical; white-space:pre-wrap;
}
.admin-form .prose .input{ margin-bottom:10px; }
.tokens{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.token{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px;
  border:1px solid var(--border); border-radius:999px; max-width:100%; }
.token .x{ cursor:pointer; opacity:.7; }
.token .x:hover{ opacity:1; }
@media (max-width: 900px){
  .admin-form .two-col{ grid-template-columns:1fr; }
  .admin-form .split-2{ grid-template-columns:1fr; }
}

/* ===========================
   ADMIN: ALERTS (alerts.html)
   =========================== */
.panel{ border:1px solid var(--border); background:var(--panel); border-radius:12px; }
.panel + .panel{ margin-top:14px; }
.panel-hd{ padding:10px 12px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; }
.panel-bd{ padding:12px; }
.result{ border:1px solid var(--border); border-radius:10px;
  background:var(--input-bg); padding:10px; min-height:120px; white-space:pre-wrap; }

/* ===========================
   ADMIN: RANSOM NOTES (ransomnotes_group.html)
   =========================== */
.admin-form .picker-row{
  display:grid; grid-template-columns: 1fr 180px 180px; gap:12px; align-items:end;
}
@media (max-width: 900px){ .admin-form .picker-row{ grid-template-columns: 1fr; } }

.adm-modal[hidden]{ display:none !important; }
.adm-modal{ position:fixed; inset:0; z-index:1300; display:grid; place-items:center; }
.adm-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.adm-modal__panel{
  position:relative; margin:auto; width:min(1100px,97vw); max-height:97vh;
  padding:0; overflow:hidden; display:flex; flex-direction:column;
}
.adm-modal__header{
  flex:0 0 auto; display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-bottom:1px solid var(--border);
}
.adm-modal__close{ background:transparent; border:0; font-size:22px; line-height:1; cursor:pointer; }
.adm-modal__footer{
  position:sticky; bottom:0; background:var(--card); border-top:1px solid var(--border);
  padding:12px 16px; margin-top:8px; display:flex; gap:8px;
}
#adm-note-form{ flex:1 1 auto; overflow:auto; padding:12px 16px; }
#adm-content{ min-height:40vh; }

#aliases-card, #notes-card{ width:100%; grid-column:1 / -1; }
#aliases-card .picker-row{
  display:flex; align-items:center; gap:12px;
}
#aliases-card .picker-row > :first-child{ flex:1 1 auto; min-width:0; }
#aliases-card .picker-row > :last-child{ flex:0 0 auto; }
#aliases-card .picker-row .btn{ position:static !important; margin:0 !important; }
#aliases-card .picker-row .input{ width:97%; }
#notes-card .table-scroll{ width:100%; }
#notes-card .table{ width:100% !important; table-layout:auto !important; }
@media (max-width: 768px){
  #aliases-card .picker-row{ flex-direction:column; align-items:stretch; }
  #aliases-card .picker-row > :last-child{ align-self:flex-start; }
}
@media (max-width: 900px){ #adm-content{ min-height:30vh; } }

/* ===========================
   ADMIN: EDIT ENTRY (editentry.html)
   =========================== */
.admin-card{ padding:12px; margin-bottom:20px; }
.admin-save-bar{
  position:sticky; bottom:0; z-index:90;
  background:var(--panel); border-top:1px solid var(--border);
  padding:10px 0; box-shadow:0 -2px 8px rgba(0,0,0,.3);
}
.form-grid{
  display:grid; grid-template-columns:180px 1fr;
  gap:10px 14px; align-items:center; margin:12px 0;
}
.form-grid.two{ grid-template-columns:180px 1fr; }
.form-grid.three{
  grid-template-columns:180px 1fr 180px 1fr;
}
.form-grid.three .span2{ grid-column:2 / -1; }
.switch-row{
  display:flex; gap:16px; align-items:center; padding:6px 2px;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin:10px 0;
}
.switch-row.wrap{ flex-wrap:wrap; }
.switch{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.danger-switch{ margin-left:auto; color:var(--danger); }
.danger-switch:hover{ color:var(--danger-text); }
.block-label{ display:block; margin:10px 0 6px; color:var(--muted); }
.link-block{
  border:1px solid var(--border); border-radius:12px; padding:12px; margin:12px 0;
  background:linear-gradient(180deg,var(--card) 0%,var(--panel) 100%);
}
.link-block legend{ padding:0 6px; font-weight:700; color:var(--text); }
.meta-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:10px; }
.edit-actions{
  position:fixed; bottom:20px; right:20px; z-index:900;
  display:flex; flex-direction:column; gap:8px; align-items:flex-end;
}
.edit-actions .btn{ box-shadow:0 4px 16px rgba(0,0,0,.5); }
.edit-actions .btn-unsaved{
  animation:pulse-save 1.5s infinite;
  background:#d97706; border-color:#d97706;
}
@keyframes pulse-save{
  0%,100%{ box-shadow:0 4px 16px rgba(217,119,6,.4); }
  50%{ box-shadow:0 4px 24px rgba(217,119,6,.8); }
}
.unsaved-badge{
  background:var(--warn-bg); color:var(--warn-text);
  border:1px solid var(--warn-border); border-radius:6px;
  padding:4px 12px; font-size:.75rem; font-weight:600;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}
.form-actions{ display:flex; gap:10px; justify-content:flex-end; }
.danger-row{
  display:flex; align-items:center; gap:12px;
  padding:10px; border:1px dashed var(--danger-dashed); border-radius:10px;
}
.tabs{ margin-top:10px; }
.tabs-nav{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.tab{
  background:var(--panel); border:1px solid var(--border); border-radius:999px;
  padding:8px 12px; cursor:pointer; color:var(--text);
}
.tab.active{ box-shadow:inset 0 -2px 0 0 var(--pri); }
.tab-pane{ display:none; }
.tab-pane.active{ display:block; }
.pane-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:6px; color:var(--muted);
}
@media (max-width: 860px){
  .form-grid, .form-grid.two{ grid-template-columns:1fr; }
  .form-grid.three{ grid-template-columns:1fr 1fr; }
  .form-grid.three .span2{ grid-column:1 / -1; }
  .meta-row{ grid-template-columns:1fr; }
}

/* ===========================
   UTILITY CLASSES
   =========================== */

/* --- Spacing --- */
.m-0{ margin:0; }
.mt-4{ margin-top:4px; }
.mt-6{ margin-top:6px; }
.mt-8{ margin-top:8px; }
.mt-10{ margin-top:10px; }
.mt-12{ margin-top:12px; }
.mt-14{ margin-top:14px; }
.mt-16{ margin-top:16px; }
.mt-24{ margin-top:24px; }
.mb-8{ margin-bottom:8px; }
.mb-10{ margin-bottom:10px; }
.mb-12{ margin-bottom:12px; }
.mb-14{ margin-bottom:14px; }
.p-12{ padding:12px; }
.p-16{ padding:16px; }
.pad-mb{ padding:12px; margin-bottom:12px; }

/* --- Text --- */
.fw-600{ font-weight:600; }
.text-center{ text-align:center; }
.text-right{ text-align:right; }
.no-underline{ text-decoration:none; }
.break-all{ word-break:break-all; }
.d-inline{ display:inline; }
.d-none{ display:none; }

/* --- Layout --- */
.w-full{ width:100%; }
.max-w-520{ max-width:520px; }
.self-end{ align-self:end; }
.bb{ border-bottom:1px solid var(--border); }
.spacer-8{ height:8px; }
.text-danger{ color:red; }

/* --- Component utilities --- */
.field-error{ color:var(--danger-text); margin-top:4px; }
.field-input{
  width:100%; max-width:520px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--panel); color:var(--text);
}
/* --- Stats page --- */
.chart-h{ height:420px; }
.stats-controls{ display:flex; flex-wrap:wrap; gap:14px; align-items:end; }
.stats-controls .ctrl-group{ display:flex; flex-wrap:wrap; gap:14px; align-items:end; }
.stats-controls .ctrl-check{ display:flex; gap:8px; align-items:center; padding:0 6px 6px; }
.stats-controls .ctrl-actions{ margin-left:auto; display:flex; gap:8px; }
.stats-picker{ margin-top:12px; }
.stats-picker summary{ cursor:pointer; font-weight:600; color:var(--text); padding:6px 0; user-select:none; }
.stats-picker summary .muted{ font-weight:400; }
.stats-picker .picker-bar{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.stats-picker .chip-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:6px;
  padding:4px 0;
}
.stats-picker .chip-grid .btn{ justify-content:center; white-space:nowrap; font-size:.85rem; padding:6px 8px; }
.stats-status{ font-size:.9rem; color:var(--muted); margin-bottom:14px; }
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:18px; }
.card-toolbar-actions{ display:flex; gap:6px; }
.auto-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px;
}
.stat-link{
  display:flex; align-items:center; justify-content:center;
  padding:12px 10px; border-radius:12px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--card) 0%,var(--panel) 100%);
  text-decoration:none; color:var(--text); font-weight:600; text-align:center;
}
.light-divider{
  border:0; border-top:1px solid var(--border); margin:10px 0; opacity:.5;
}

/* ===========================
   SEARCH DROPDOWN (reusable)
   =========================== */
.search-dropdown{
  position:absolute; top:100%; left:0; right:0; z-index:50;
  max-height:260px; overflow-y:auto;
  background:var(--card-bg, var(--panel)); border:1px solid var(--border);
  border-radius:0 0 8px 8px; box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.search-dropdown-item{
  padding:7px 12px; cursor:pointer; font-size:.9rem;
}
.search-dropdown-item:hover,
.search-dropdown-item.active{
  background:var(--accent, var(--pri-deep)); color:#fff;
}
.search-dropdown-empty{
  padding:8px 12px; color:var(--muted); font-size:.85rem; font-style:italic;
}

/* ===========================
   BROWSE PAGE (/browse)
   =========================== */

/* --- Tabs --- */
.browse-tabs{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:6px; margin:0;
  background:var(--surface-nav);
  border:1px solid var(--border);
  border-radius:12px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.browse-tabs .tab-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:8px;
  background:transparent; color:var(--text);
  border:1px solid transparent;
  font-size:14px; font-weight:500; line-height:1;
  cursor:pointer; white-space:nowrap;
  scroll-snap-align:start;
  transition:background .12s ease, border-color .12s ease;
}
.browse-tabs .tab-btn:hover{ background:var(--surface-hover); }
.browse-tabs .tab-btn.is-active,
.browse-tabs .tab-btn[aria-selected="true"]{
  background:var(--surface-active);
  border-color:var(--border-hover);
  box-shadow:inset 0 -2px 0 0 var(--pri);
}
.browse-tabs .tab-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; padding:0 6px; height:18px;
  border-radius:999px;
  background:var(--surface-count); color:var(--muted);
  font-size:11px; font-weight:600;
}
.browse-tabs .tab-btn.is-active .tab-count{
  background:var(--pri-deep); color:#fff;
}

/* --- Alphabet active state --- */
.alpha-bar .alpha-btn.is-active{
  background:var(--pri-deep); color:#fff; border-color:var(--pri-deep);
}
.alpha-bar .alpha-clear{ font-weight:600; }

/* --- Card grid --- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;
  margin-top:16px;
}

/* --- Card --- */
.item-card{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:12px;
  padding:12px;
  background:var(--card);
  border:1px solid var(--border-card);
  border-left:3px solid var(--border-card);
  border-radius:12px;
  color:var(--text); text-decoration:none;
  transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease;
  min-height:110px;
}
.item-card:hover{
  border-top-color:var(--border-hover);
  border-right-color:var(--border-hover);
  border-bottom-color:var(--border-hover);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  text-decoration:none;
}
.item-card.card-type-group  { border-left-color:#6aa0ff; }
.item-card.card-type-market { border-left-color:#b48cff; }
.item-card.card-type-actor  { border-left-color:#f7b955; }

.card-logo{
  width:56px; height:56px;
  border-radius:10px;
  background:var(--panel);
  border:1px solid var(--border);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.card-logo img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.card-logo-placeholder{
  font-size:22px; font-weight:700; color:var(--muted);
  font-family:system-ui, sans-serif;
}

.card-body{ min-width:0; display:flex; flex-direction:column; gap:6px; }

.card-head{
  display:flex; align-items:center; gap:8px;
  min-width:0;
}
.card-title{
  margin:0;
  font-size:15px; font-weight:600; line-height:1.2;
  color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  min-width:0; flex:1;
}
.card-type-chip{
  padding:1px 7px; border-radius:999px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  border:1px solid var(--border);
  background:var(--surface-count); color:var(--muted);
  flex-shrink:0;
}
.card-type-chip--group  { color:#6aa0ff; border-color:rgba(106,160,255,.35); }
.card-type-chip--market { color:#b48cff; border-color:rgba(180,140,255,.35); }
.card-type-chip--actor  { color:#f7b955; border-color:rgba(247,185,85,.35); }

.card-badges{
  display:flex; flex-wrap:wrap; gap:6px;
}
.card-badges .badge-status,
.card-badges .badge-neutral,
.card-badges .badge-private{ font-size:11px; }

.card-meta{
  margin:0;
  font-size:13px; color:var(--muted); line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* --- Mobile tweaks --- */
@media (max-width:640px){
  .card-grid{ grid-template-columns:1fr; gap:10px; }
  .item-card{ grid-template-columns:48px 1fr; padding:10px; min-height:auto; }
  .card-logo{ width:48px; height:48px; }
  .card-title{ font-size:14px; }
  .browse-tabs .tab-btn{ padding:7px 10px; font-size:13px; }
  .field--search{ width:100%; }
}

/* Light theme tweaks: subtle shadow on hover */
html.light .item-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.10); }

/* ===========================
   BROWSE — health chips
   =========================== */
.health-chips{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:6px; margin:0;
  background:var(--surface-nav);
  border:1px solid var(--border);
  border-radius:10px;
}
.health-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px;
  background:transparent; color:var(--text);
  border:1px solid var(--border);
  font-size:12px; font-weight:500; line-height:1;
  cursor:pointer; white-space:nowrap;
  transition:background .12s ease, border-color .12s ease;
}
.health-chip:hover{ background:var(--surface-hover); }
.health-chip.is-active{
  background:var(--surface-active);
  border-color:var(--border-hover);
  box-shadow:inset 0 -2px 0 0 var(--pri);
}
.health-chip .dot{
  width:9px; height:9px; border-radius:50%;
  display:inline-block; flex-shrink:0;
}
.dot-healthy { background:var(--success-border); }
.dot-degraded{ background:var(--warn-border); }
.dot-offline { background:var(--danger-border); }

@media (max-width:640px){
  .health-chips{ width:100%; }
  .health-chip{ flex:1 1 auto; justify-content:center; }
}

/* ===========================
   BROWSE — compact filter bar (overrides width-constrained legacy)
   =========================== */
.browse-filters{
  display:flex; flex-direction:column; gap:10px;
  padding:12px;
  background:var(--card);
  border:1px solid var(--border-card);
  border-radius:12px;
}
.bf-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}

/* Row 1 — Search (full width) */
.bf-row--search .bf-search{ flex:1 1 100%; position:relative; }
.bf-row--search .bf-search .input{ width:100%; height:40px; padding-left:40px; }
.bf-row--search .bf-search::before{ top:50%; }

/* Row 2 — Tabs (left) + Health chips (right) */
.bf-row--filters{
  justify-content:space-between; gap:8px;
}
.browse-filters .browse-tabs,
.browse-filters .health-chips{
  flex:0 0 auto;
  padding:4px; gap:4px;
  display:inline-flex; align-items:center;
}
.browse-filters .browse-tabs .tab-btn{
  height:32px; padding:0 10px; font-size:13px;
  display:inline-flex; align-items:center;
}
.browse-filters .health-chip{
  height:32px; padding:0 10px; font-size:12px;
  display:inline-flex; align-items:center;
}

/* Row 3 — Alphabet (centered, may wrap on narrow viewports) + count below */
.bf-row--alpha{
  flex-direction:column; align-items:center; gap:6px;
}
.browse-filters .alpha-bar{
  display:flex; flex-wrap:wrap; gap:6px; row-gap:6px;
  justify-content:center; align-items:center;
  margin:0; width:100%;
}
.browse-filters .alpha-btn{
  min-width:32px; height:32px; padding:0 10px;
  font-size:12px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
}
.browse-filters .alpha-btn.alpha-clear{ padding:0 14px; }

.browse-filters .filters-meta{
  margin:0; color:var(--muted); font-size:.85rem; text-align:center;
}

/* Mobile: stack the filters row */
@media (max-width:720px){
  .bf-row--filters{ flex-direction:column; align-items:stretch; }
  .browse-filters .browse-tabs,
  .browse-filters .health-chips{
    width:100%; justify-content:flex-start; flex-wrap:wrap;
  }
}
@media (max-width:480px){
  .browse-filters .alpha-btn{ min-width:28px; height:28px; padding:0 6px; font-size:11px; }
}

/* ===========================
   LIGHT THEME — search field readability
   =========================== */
html.light .field--search::before{
  background: rgba(0,0,0,.55);
}
html.light .field--search .input::placeholder{
  color: rgba(0,0,0,.5);
}
html.light .input-clear{
  border-color: rgba(0,0,0,.15);
  background: rgba(0,0,0,.06);
  color: var(--text);
}
html.light .input-clear:hover{
  background: rgba(59,130,246,.18);
}

/* ===========================
   RECENT PAGE
   =========================== */

.spark-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:12px; color:var(--muted);
}
.spark-total{ color:var(--text); font-weight:600; }
.spark-axis{
  display:flex; justify-content:space-between;
  font-size:10px; color:var(--muted);
}

/* Filters row */
.recent-filters{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:10px 12px;
  background:var(--card);
  border:1px solid var(--border-card);
  border-radius:12px;
}
/* Force identical 40px total height on the search input AND the select.
   Base .input has padding:10px 12px without box-sizing, so we normalize here. */
.recent-filters .input{
  height:40px; padding:0 12px;
  box-sizing:border-box;
  line-height:38px;
}
.recent-search{ flex:1 1 280px; position:relative; margin-bottom:0; }
.recent-search .input{ padding-left:40px; width:100%; }
.recent-search.field--search::before{ top:50%; transform:translateY(-50%); }
.recent-group{ flex:0 0 auto; min-width:180px; }
.recent-count{ color:var(--muted); font-size:.9rem; white-space:nowrap; align-self:center; }

/* Time cell (shared by /recent and /hot) */
.recent-date{
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.recent-date time{ display:flex; flex-direction:column; gap:2px; }
.recent-date .t-primary{ color:var(--text); font-weight:500; }
.recent-date .t-rel{ color:var(--muted); font-size:12px; }
.rl-table--recent .recent-title{ word-break:break-word; }

/* Group cell with colored dot */
.recent-group-link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--text); text-decoration:none;
}
.recent-group-link:hover{ text-decoration:underline; }
.group-dot{
  width:10px; height:10px; border-radius:50%;
  flex-shrink:0;
  box-shadow:0 0 0 2px rgba(0,0,0,.15) inset;
}

@media (max-width:640px){
  .recent-filters{ padding:8px 10px; }
  .recent-group{ flex:1 1 auto; min-width:0; width:100%; }
  .recent-date .t-rel{ display:none; }  /* save space on tiny screens */
}

/* Collapsible legend block above the recent table — keeps the page scannable
   while giving first-time visitors a one-click breakdown of each column. */
.recent-legend {
  background: var(--card);
  border: 1px solid var(--border-card);
  border-radius: 10px;
  padding: 10px 14px;
}
.recent-legend > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .92rem;
  color: var(--text);
  list-style: none;
}
.recent-legend > summary::before {
  content: "▸ ";
  display: inline-block;
  margin-right: 4px;
  transition: transform .15s ease;
}
.recent-legend[open] > summary::before { content: "▾ "; }
.recent-legend__body {
  margin-top: 10px;
  font-size: .9rem;
  color: var(--muted);
}
.recent-legend__body ul { margin: 0; padding-left: 18px; }
.recent-legend__body li { margin: 4px 0; }
.recent-legend__body strong { color: var(--text); }

/* ===========================
   HOT / TRENDING PAGE
   =========================== */

.hot-form{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0;
}
.hot-form .input{ height:40px; padding:0 12px; box-sizing:border-box; line-height:38px; }
.hot-search{ flex:1 1 240px; position:relative; margin-bottom:0; }
.hot-search .input{ padding-left:40px; width:100%; height:40px; padding:0 12px 0 40px; box-sizing:border-box; line-height:38px; }
.hot-search.field--search::before{ top:50%; transform:translateY(-50%); }

/* Medals for top 3 ranks */
.medal{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  font-size:12px; font-weight:700; color:#1a1d24;
  box-shadow:0 0 0 1px rgba(0,0,0,.2) inset, 0 2px 6px rgba(0,0,0,.3);
}
.medal-gold   { background:linear-gradient(180deg,#fde68a,#d4a017); }
.medal-silver { background:linear-gradient(180deg,#e5e7eb,#9ca3af); }
.medal-bronze { background:linear-gradient(180deg,#fbbf77,#b45309); color:#fff; }

/* Delta badges — color semantics encode direction + magnitude */
.delta-badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:12px; font-weight:600; font-variant-numeric:tabular-nums;
  border:1px solid;
  white-space:nowrap;
}
.delta-up-strong   { background:var(--success-bg); color:var(--success-text); border-color:var(--success-border); }
.delta-up          { background:var(--success-bg); color:var(--success-text); border-color:var(--success-border); opacity:.85; }
.delta-down-strong { background:var(--danger-bg);  color:var(--danger-text);  border-color:var(--danger-border); }
.delta-down        { background:var(--danger-bg);  color:var(--danger-text);  border-color:var(--danger-border); opacity:.85; }
.delta-flat        { background:var(--surface-count); color:var(--muted);     border-color:var(--border); }
.delta-new         { background:var(--info-bg);    color:var(--info-text);    border-color:var(--info-border); }
/* Inline use inside paragraphs (hero) */
.delta-up,.delta-up-strong{ color:var(--success-text); }
.delta-down,.delta-down-strong{ color:var(--danger-text); }

/* Per-row mini sparkline */
.row-spark{ width:80px; height:24px; display:block; }
.row-spark rect{ fill:var(--pri); opacity:.9; }
.row-spark:hover rect{ fill:var(--pri-focus); }

.rl-table--hot .hot-rank{ font-variant-numeric:tabular-nums; }

/* Mobile: hide the mini sparkline + last-post column, keep the essentials */
@media (max-width:640px){
  .rl-table--hot th:nth-child(5),
  .rl-table--hot td:nth-child(5){ display:none; }  /* Trend */
  .rl-table--hot th:nth-child(6),
  .rl-table--hot td:nth-child(6){ display:none; }  /* Last post */
  .hot-search{ flex:1 1 100%; }
}

/* ===========================
   STATS PAGE — summary + movers + grid
   =========================== */
.stats-summary{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:14px;
}
.stats-summary-kpis{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.movers-head{
  display:flex; align-items:center; justify-content:space-between;
  margin:0 0 10px;
}
.movers-head h3{ margin:0; }
.movers-trend{
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:999px;
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
  border:1px solid; white-space:nowrap;
  background:var(--surface-count); color:var(--muted); border-color:var(--border);
}
.movers-trend.delta-up-strong  { background:var(--success-bg); color:var(--success-text); border-color:var(--success-border); }
.movers-trend.delta-down-strong{ background:var(--danger-bg);  color:var(--danger-text);  border-color:var(--danger-border); }
.movers-trend.delta-flat       { background:var(--surface-count); color:var(--muted); border-color:var(--border); }
.kpi{
  display:flex; flex-direction:column; gap:4px;
  padding:14px;
  background:var(--card);
  border:1px solid var(--border-card);
  border-radius:10px;
  min-width:0;
}
.kpi-label{
  color:var(--muted); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
}
.kpi-value{
  color:var(--text); font-size:22px; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kpi-value.delta-up-strong,
.kpi-value.delta-down-strong,
.kpi-value.delta-flat{
  padding:2px 0; border:none; background:none;
  font-size:22px;
}
.kpi-value.delta-up-strong{ color:var(--success-text); }
.kpi-value.delta-down-strong{ color:var(--danger-text); }
.kpi-value.delta-flat{ color:var(--muted); }
.kpi-sub{ color:var(--muted); font-size:12px; }

.stats-movers{
  padding:14px;
  background:var(--card);
  border:1px solid var(--border-card);
  border-radius:10px;
}
.stats-movers h3{
  margin:0 0 10px;
  font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.stats-movers ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.stats-movers li{
  display:flex; align-items:center; gap:8px;
  font-size:13px;
  color:var(--text);
}
.mover-dot{
  width:9px; height:9px; border-radius:50%;
  flex:0 0 auto;
}
.mover-name{
  flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mover-name{ text-transform:capitalize; }

/* Stats grid: 2×2 but Timeline (3rd child) spans full width */
.stats-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.stats-grid > .table-card:nth-child(3){
  grid-column: 1 / -1;
}

@media (max-width:960px){
  .stats-summary{ grid-template-columns: 1fr; }
  .stats-summary-kpis{ grid-template-columns: repeat(2, 1fr); }
  .stats-grid{ grid-template-columns: 1fr; }
  .stats-grid > .table-card:nth-child(3){ grid-column: auto; }
}

/* ===========================
   HOME PAGE — editorial landing
   =========================== */

/* Hero with radial gradient + dot-pattern overlay */
.home-hero{
  position:relative; overflow:hidden;
  padding:80px 0 56px;
  border-bottom:1px solid var(--border);
}
.home-hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at 20% -20%, rgba(106,160,255,.18), transparent 60%),
    radial-gradient(ellipse at 85% 120%, rgba(168,85,247,.12), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(15,17,23,0), var(--bg) 80%);
  pointer-events:none;
}
.home-hero__bg::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(to bottom, black 30%, transparent 95%);
  -webkit-mask-image:linear-gradient(to bottom, black 30%, transparent 95%);
}
html.light .home-hero__bg{
  background:
    radial-gradient(ellipse at 20% -20%, rgba(96,165,250,.12), transparent 60%),
    radial-gradient(ellipse at 85% 120%, rgba(168,85,247,.08), transparent 55%);
}
html.light .home-hero__bg::after{
  background-image:radial-gradient(rgba(0,0,0,.07) 1px, transparent 1px);
}

.home-hero__inner{ position:relative; z-index:1; text-align:center; }

/* Split layout: logo on the left, text on the right (desktop) */
.home-hero__split{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(24px, 5vw, 56px);
  text-align:left;
  max-width:1080px; margin:0 auto;
}
.home-hero__text{ min-width:0; flex:1 1 auto; }

/* Hero logo (config-driven, random per load via generic.json "logos" weights) */
.home-hero__logo{
  flex:0 0 auto;
  width:clamp(160px, 20vw, 240px);
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.45));
}
.home-hero__logo img{
  width:100%; height:100%;
  object-fit:contain;
  border-radius:50%;
  background:var(--panel);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 40px rgba(106,160,255,.12);
}
html.light .home-hero__logo img{
  background:var(--card);
  box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 0 40px rgba(37,99,235,.10);
}

.home-hero__title{
  font-size:clamp(40px, 6vw, 72px);
  line-height:1.05;
  font-weight:800;
  margin:0 0 18px;
  letter-spacing:-0.02em;
}
.hl-number{
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
  color:var(--text);
  background:linear-gradient(180deg, #fff, #9ec3ff);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  padding-right:8px;
}
html.light .hl-number{
  background:linear-gradient(180deg, var(--pri-deep), var(--pri-bright));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hl-sub{ color:var(--text); }
.hl-muted{ color:var(--muted); font-weight:700; }

.home-hero__lead{
  max-width:540px; margin:0 0 22px;
  color:var(--muted); font-size:17px; line-height:1.5;
}

.home-hero__ctas{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-bottom:38px;
}
.btn-hero{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:12px;
  font-weight:600; font-size:15px; line-height:1;
  text-decoration:none; transition:transform .15s ease, box-shadow .15s ease;
}
.btn-hero--primary{
  background:linear-gradient(180deg, var(--pri-bright), var(--pri-deep));
  color:#fff;
  box-shadow: 0 8px 20px rgba(59,130,246,.35),
              inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-hero--primary:hover{ transform:translateY(-1px); box-shadow: 0 10px 24px rgba(59,130,246,.45), inset 0 1px 0 rgba(255,255,255,.2); text-decoration:none; }
.btn-hero--ghost{
  color:var(--text);
  background:transparent;
  border:1px solid var(--border);
}
.btn-hero--ghost:hover{ background:var(--surface-hover); text-decoration:none; }

.activity-head{
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--muted);
  margin-bottom:8px;
}
.activity-label{ flex:1 1 auto; text-align:left; }
.activity-delta{ font-weight:600; }
.live-dot{
  width:8px; height:8px; border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 4px rgba(16,185,129,.25);
  animation:live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse{
  0%,100% { box-shadow:0 0 0 0    rgba(16,185,129,.45); }
  50%     { box-shadow:0 0 0 10px rgba(16,185,129,0);    }
}
/* Section eyebrow */
.section-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  margin:0 0 14px;
}

/* This week — 4 KPIs */
.home-week{ padding:48px 0 16px; }
.week-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
}
.week-kpi{
  position:relative;
  padding:20px; border-radius:14px;
  background:var(--card);
  border:1px solid var(--border-card);
  display:flex; flex-direction:column; gap:6px;
}
.week-kpi::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--pri), transparent);
  border-radius:14px 14px 0 0;
  opacity:.6;
}
.week-kpi__value{
  font-size:32px; font-weight:800; color:var(--text);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  letter-spacing:-0.02em;
  display:flex; align-items:center; gap:8px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.week-kpi__label{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.week-kpi__delta{ margin-top:auto; }

/* Movers + Latest */
.home-insights{ padding:32px 0 16px; }
.insights-grid{
  display:grid; grid-template-columns:1fr 1.3fr; gap:14px;
}
.insight-card{
  padding:18px;
  background:var(--card);
  border:1px solid var(--border-card);
  border-radius:14px;
}
.insight-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:12px;
}
.insight-head h3{ margin:0; }
.insight-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.insight-list li{
  display:grid; grid-template-columns:10px 1fr auto auto; gap:10px;
  align-items:center;
  font-size:14px;
}
/* Specific grid for latest posts (time | title | name-right) */
.insight-card:last-of-type .insight-list li{
  grid-template-columns: 70px 1fr auto;
}
.insight-name{ color:var(--text); text-decoration:none; display:inline-flex; align-items:center; gap:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.insight-name:hover{ text-decoration:underline; }
.insight-name--right{ justify-self:end; }
.insight-meta{ color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.insight-time{
  color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.insight-title{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--text);
}

/* Coverage strip */
.home-coverage{
  padding:36px 0 56px;
  margin-top:8px;
  border-top:1px solid var(--border);
}
.coverage-row{
  display:flex; flex-wrap:wrap; gap:10px 18px;
  justify-content:center; align-items:center;
  color:var(--muted); font-size:14px;
}
.coverage-row strong{
  color:var(--text); font-weight:700;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.coverage-row .sep{ color:var(--border); }

/* Responsive */
@media (max-width:960px){
  .week-grid{ grid-template-columns:repeat(2, 1fr); }
  .insights-grid{ grid-template-columns:1fr; }
  .home-hero__split{
    flex-direction:column; text-align:center; gap:20px;
  }
  .home-hero__lead{ margin:0 auto 22px; }
  .home-hero__ctas{ justify-content:center; }
  .home-hero__logo{ width:clamp(140px, 30vw, 180px); }
}
@media (max-width:540px){
  .home-hero{ padding:48px 0 36px; }
  .home-hero__title{ font-size:36px; }
  .btn-hero{ padding:10px 16px; font-size:14px; }
  .insight-card:last-of-type .insight-list li{ grid-template-columns: 54px 1fr; }
  .insight-card:last-of-type .insight-list .insight-name--right{ grid-column: 1 / -1; justify-self:start; }
  /* Homepage KPI sections: wrap the eyebrow + muted subtitle instead of
     forcing them on one line, and make the torrent CTAs wrap too. */
  .insight-head{ flex-wrap:wrap; gap:4px 10px; }
  .home-torrent .home-hero__ctas{ flex-wrap:wrap; }
}
@media (max-width:420px){
  /* Very narrow viewports (small phones in portrait): stack KPI cards so
     values stay legible instead of getting squeezed into two columns. */
  .week-grid{ grid-template-columns:1fr; }
}

/* ===========================
   ERROR PAGES (40x / 500)
   =========================== */
.err-page{
  min-height:calc(100vh - var(--topbar-h));
  display:flex; align-items:center; justify-content:center;
  padding:48px 0;
  position:relative; overflow:hidden;
}
.err-page::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(106,160,255,.12), transparent 65%),
    radial-gradient(ellipse at 80% 90%, rgba(239,68,68,.08), transparent 55%);
  pointer-events:none;
}
.err-inner{
  position:relative; z-index:1;
  text-align:center;
  max-width:640px;
}
.err-code{
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size:clamp(96px, 18vw, 180px); font-weight:800;
  line-height:0.9; letter-spacing:-0.04em;
  background:linear-gradient(180deg, #9ec3ff, #3b82f6);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:16px;
}
.err-code--danger{
  background:linear-gradient(180deg, #fca5a5, #dc2626);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.err-title{
  margin:0 0 10px;
  font-size:clamp(24px, 3.5vw, 36px); font-weight:700;
  color:var(--text);
}
.err-msg{
  margin:0 0 28px;
  color:var(--muted); font-size:16px; line-height:1.5;
}
.err-ctas{
  display:inline-flex; gap:10px; align-items:center; flex-wrap:wrap;
  justify-content:center;
}

/* ===========================
   GROUP DETAIL — hero
   =========================== */
.group-hero{
  position:relative; overflow:hidden;
  padding:36px 0 28px;
  border-bottom:1px solid var(--border);
}
.group-hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(106,160,255,.10), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(168,85,247,.08), transparent 55%);
  pointer-events:none;
}
html.light .group-hero__bg{
  background:
    radial-gradient(ellipse at 0% 0%, rgba(96,165,250,.10), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(168,85,247,.06), transparent 55%);
}
.group-hero__inner{ position:relative; z-index:1; }

.group-hero__head{
  display:flex; align-items:center; gap:18px;
  flex-wrap:wrap; margin-bottom:20px;
}
.group-hero__logo{
  flex:0 0 auto;
  width:72px; height:72px;
  border-radius:16px;
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.group-hero__logo img{ width:100%; height:100%; object-fit:cover; }
.group-hero__logo--placeholder{
  color:#fff; font-weight:800; font-size:30px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.group-hero__ident{ flex:1 1 auto; min-width:0; }
.group-hero__title{
  display:flex; align-items:center; gap:12px;
  margin:0 0 8px;
  font-size:clamp(28px, 4vw, 40px); font-weight:800;
  color:var(--text);
  letter-spacing:-0.02em;
}
.group-hero__title .group-dot{ width:14px; height:14px; }
.group-hero__actions{
  display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.btn-hero.btn-sm{ padding:7px 14px; font-size:13px; }

/* Hero KPIs */
.group-hero__kpis{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
  margin-bottom:16px;
}
.g-kpi{
  padding:12px 14px;
  background:var(--card);
  border:1px solid var(--border-card);
  border-radius:10px;
  display:flex; flex-direction:column; gap:2px;
}
.g-kpi__value{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:22px; font-weight:700; color:var(--text);
}
.g-kpi__label{
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}

.activity-meta{ color:var(--muted); font-size:12px; margin-left:auto; }

@media (max-width:720px){
  .group-hero__kpis{ grid-template-columns:repeat(2, 1fr); }
  .group-hero__head{ gap:12px; }
  .group-hero__logo{ width:56px; height:56px; border-radius:12px; }
  .group-hero__logo--placeholder{ font-size:22px; }
}

/* ===========================
   SHARED hero sparkline (replaces .spark-svg, .home-spark)
   =========================== */
.hero-spark{
  display:block; width:100%; height:48px;
  color:var(--pri);
}
.hero-spark rect{ fill:url(#hero-spark-grad); }
.hero-spark rect:hover{ fill:var(--pri-focus); }

/* ===========================
   SHARED spark-band container (standardized from /group hero style)
   =========================== */
.spark-band{
  padding:10px 14px;
  background:var(--card);
  border:1px solid var(--border-card);
  border-radius:12px;
  width:100%;
  box-sizing:border-box;
}
.spark-band .activity-head{ display:flex; align-items:center; gap:10px; margin-bottom:4px; font-size:13px; color:var(--muted); }
.spark-band .activity-label{ flex:1 1 auto; text-align:left; }
.spark-band .spark-total{ font-weight:600; color:var(--text); }
.spark-band .spark-axis{ display:flex; justify-content:space-between; font-size:10px; color:var(--muted); margin-top:2px; }

/* ===========================
   ACTOR DETAIL — hero + graph
   =========================== */
.actor-hero{
  position:relative; overflow:hidden;
  padding:36px 0 28px;
  border-bottom:1px solid var(--border);
}
.actor-hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(106,160,255,.10), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(168,85,247,.08), transparent 55%);
  pointer-events:none;
}
html.light .actor-hero__bg{
  background:
    radial-gradient(ellipse at 0% 0%, rgba(96,165,250,.10), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(168,85,247,.06), transparent 55%);
}
.actor-hero__inner{ position:relative; z-index:1; }

.actor-hero__head{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-bottom:14px;
}
.actor-hero__logo{
  flex:0 0 auto;
  width:72px; height:72px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:30px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  box-shadow:0 0 0 3px rgba(255,255,255,.15);
}
.actor-hero__ident{ flex:1 1 auto; min-width:0; }
.actor-hero__title{
  display:flex; align-items:center; gap:12px;
  margin:0 0 8px;
  font-size:clamp(28px, 4vw, 40px); font-weight:800;
  color:var(--text); letter-spacing:-0.02em;
}
.actor-hero__title .group-dot{ width:14px; height:14px; }
.actor-hero__actions{ display:inline-flex; gap:8px; align-items:center; }

.actor-hero__aliases{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:14px;
}
.actor-hero__aliases .muted{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; }

/* Wanted banner */
.actor-wanted-banner{
  display:flex; align-items:center; gap:14px;
  padding:12px 18px;
  background:var(--danger-bg);
  border:1px solid var(--danger-border);
  border-radius:12px;
  margin-top:14px;
}
.wanted-icon{ font-size:24px; }
.wanted-links{ display:flex; gap:10px; flex-wrap:wrap; }
.wanted-link{
  display:inline-flex; align-items:center;
  padding:6px 14px; border-radius:8px;
  font-size:13px; font-weight:700; text-decoration:none;
  color:#fff; transition:transform .12s ease;
}
.wanted-link:hover{ transform:translateY(-1px); text-decoration:none; }
.wanted-link--fbi     { background:#003366; }
.wanted-link--europol { background:#002e6e; }
.wanted-link--interpol{ background:#e81c2e; }

/* Cytoscape graph container */
.cy-container{
  width:100%; height:420px;
  border-radius:0 0 12px 12px;
  background:var(--bg);
}
@media (max-width:720px){
  .cy-container{ height:320px; }
  .actor-hero__head{ gap:12px; }
  .actor-hero__logo{ width:56px; height:56px; font-size:22px; }
}

/* Cytoscape graph legend */
.cy-legend{
  display:flex; flex-wrap:wrap; gap:14px;
  padding:10px 16px;
  border-top:1px solid var(--border);
  font-size:12px; color:var(--muted);
}
.cy-legend__item{
  display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap;
}
.cy-legend__shape{
  display:inline-block; width:14px; height:14px;
  background:var(--pri); flex-shrink:0;
}
.cy-legend__circle{ border-radius:50%; }
.cy-legend__rect{ border-radius:3px; }
.cy-legend__diamond{
  width:12px; height:12px;
  transform:rotate(45deg);
  border-radius:2px;
}
.cy-legend--self{
  width:18px; height:18px;
  border:2px solid #fff;
  box-shadow:0 0 0 1px var(--border);
}
.cy-legend--unknown{ opacity:.45; }

/* ===========================
   GLOSSARY
   =========================== */
.glossary-layout{
  display:grid; grid-template-columns:180px 1fr; gap:32px;
  align-items:start;
}
.glossary-toc{
  position:sticky; top:calc(var(--topbar-h) + 16px);
  padding:14px 0;
}
.glossary-toc ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:6px;
}
.glossary-toc a{
  display:block; padding:6px 12px;
  color:var(--text); text-decoration:none;
  border-radius:8px; font-size:13px;
  border-left:3px solid transparent;
  transition:background .12s ease, border-color .12s ease;
}
.glossary-toc a:hover{ background:var(--surface-hover); }

.glossary-content h2{
  margin:32px 0 14px; padding-top:16px;
  border-top:1px solid var(--border);
  font-size:20px; font-weight:700;
  scroll-margin-top:calc(var(--topbar-h) + 16px);
}
.glossary-content h2:first-child{ border-top:none; margin-top:0; padding-top:0; }

.glossary-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px;
}
.glossary-card{
  padding:14px 16px;
  background:var(--card);
  border:1px solid var(--border-card);
  border-left:3px solid var(--pri);
  border-radius:10px;
}
.glossary-card dt{
  font-weight:700; font-size:14px; color:var(--text);
  margin-bottom:4px;
}
.glossary-card dd{
  margin:0;
  font-size:13px; line-height:1.45; color:var(--muted);
}

@media (max-width:768px){
  .glossary-layout{ grid-template-columns:1fr; gap:16px; }
  .glossary-toc{ position:static; }
  .glossary-toc ul{ flex-direction:row; flex-wrap:wrap; gap:4px; }
  .glossary-toc a{ padding:4px 10px; font-size:12px; border-left:0; border-bottom:2px solid transparent; }
}

/* ===========================
   ABOUT
   =========================== */
.about-hero-split{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(20px, 4vw, 40px);
  text-align:left;
}
.about-hero-logo{
  width:clamp(120px, 18vw, 200px); height:auto;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 40px rgba(106,160,255,.12);
  flex-shrink:0;
}
html.light .about-hero-logo{
  box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 0 40px rgba(37,99,235,.10);
}

.about-section{
  padding:24px 0;
  border-bottom:1px solid var(--border);
}
.about-section:last-of-type{ border-bottom:none; }
.about-section h2{
  margin-top:0;
  scroll-margin-top:calc(var(--topbar-h) + 16px);
}

@media (max-width:640px){
  .about-hero-split{ flex-direction:column; text-align:center; }
  .about-hero-logo{ width:140px; }
}

/* ===========================
   COMPARE PAGE
   =========================== */
.compare-table-card{ padding:0; overflow:hidden; }
.compare-header,
.compare-rows li{
  display:grid;
  grid-template-columns: 140px 1fr 1fr;
  gap:0;
}
.compare-header{
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  font-weight:700;
}
.cmp-name{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px;
}
.cmp-name a{ color:var(--text); text-decoration:none; }
.cmp-name a:hover{ text-decoration:underline; }

.compare-rows{
  list-style:none; margin:0; padding:0;
}
.compare-rows li{
  padding:10px 18px;
  border-bottom:1px solid var(--border);
  align-items:center;
}
.compare-rows li:last-child{ border-bottom:none; }
.compare-rows li:hover{ background:var(--surface-hover); }
.cmp-label{
  font-size:13px; color:var(--muted); font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
}
.cmp-val{
  font-size:18px; font-weight:700; color:var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric:tabular-nums;
}
.cmp-win{
  color:var(--success-text);
  position:relative;
}
.cmp-win::after{
  content:"▲"; font-size:10px; margin-left:6px; vertical-align:middle;
}
.cmp-lose{
  color:var(--muted);
  opacity:.7;
}

@media (max-width:640px){
  .compare-header,
  .compare-rows li{
    grid-template-columns: 100px 1fr 1fr;
  }
  .cmp-val{ font-size:15px; }
}

/* ===========================
   CHIP GRID PAGES (crypto, notes)
   =========================== */
.auto-grid .group-chip{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:8px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.auto-grid .group-chip:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.auto-grid .group-chip .group-dot{
  width:8px; height:8px;
  flex-shrink:0;
}

/* ===== Markdown analysis page (rendered FULL_ANALYSIS.md) ===== */
.markdown-section{
  max-width: 980px;
  margin: 0 auto;
  color: var(--text);
  line-height: 1.6;
}
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4{
  margin: 1.6em 0 .6em;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: .25em;
}
.markdown-section h3,
.markdown-section h4{ border-bottom: 0; }
.markdown-section p{ margin: .6em 0; }
.markdown-section a{ color: #6aa9ff; }
.markdown-section a:hover{ text-decoration: underline; }
.markdown-section ul,
.markdown-section ol{ padding-left: 1.4em; }
.markdown-section li{ margin: .25em 0; }
.markdown-section blockquote{
  border-left: 3px solid var(--border-hover);
  margin: 1em 0;
  padding: .4em 1em;
  background: var(--panel);
  color: var(--muted);
}
.markdown-section code{
  font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}
.markdown-section pre{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
}
.markdown-section pre code{
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 12.5px;
}

/* Tables rendered from Markdown (no class on <table>) */
.markdown-section table{
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  font-size: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.markdown-section thead th{
  background: var(--bg);
  text-align: left;
  font-weight: 600;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap;
}
.markdown-section tbody td{
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  vertical-align: top;
}
.markdown-section tbody tr:hover{ background: rgba(255,255,255,.02); }
.markdown-section tbody td code,
.markdown-section thead th code{ font-size: 12.5px; }
@media (max-width: 720px){
  .markdown-section table{ display: block; overflow-x: auto; }
}