:root {
  --crimson: #E8192C;
  --crimson-2: #FF2D42;
  --crimson-dim: rgba(232,25,44,0.1);
  --crimson-glow: rgba(232,25,44,0.3);
  --crimson-border: rgba(232,25,44,0.25);
  --bg: #080A0E;
  --bg-2: #0D0F14;
  --surface: #10131A;
  --surface-2: #161920;
  --surface-3: #1C2028;
  --border: rgba(255,255,255,0.06);
  --border-2: rgba(255,255,255,0.03);
  --text: #EDEFF5;
  /* Secondary/tertiary text lightened for legibility on the dark surfaces —
     the old #9098A8 / #6B7280 read too faint (esp. small labels & captions). */
  --text-muted: #AAB2C2;
  --text-dim: #8C95A6;
  --green: #10B981;
  --yellow: #F59E0B;
  --blue: #6366F1;
  --orange: #F97316;
  --sidebar-w: 248px;

  /* ── Redesign tokens (2026-06 dashboard reskin) ───────────────────────────
     Added on top of the originals (names above untouched so older rules keep
     working). The reskin layer at the foot of this file consumes these. */
  --gold: #FFD700;            /* reserved for Ultimate / premium cues only */
  --gold-2: #FFC02E;
  --gold-dim: rgba(255,215,0,0.10);
  --purple: #A855F7;
  --teal: #14B8A6;
  --pink: #FF2D42;

  /* Layered crimson identity — glows + gradient strokes */
  --glow-crimson: rgba(232,25,44,0.45);
  --glow-soft:    rgba(232,25,44,0.16);
  --grad-crimson: linear-gradient(135deg, #FF2D42 0%, #E8192C 45%, #A60F1E 100%);
  --grad-gold:    linear-gradient(135deg, #FFE680 0%, #FFD700 45%, #E0A800 100%);
  --stroke-grad:  linear-gradient(135deg, rgba(232,25,44,0.55), rgba(232,25,44,0) 55%);

  /* Glass surfaces */
  --glass:    rgba(20,23,31,0.72);
  --glass-2:  rgba(26,30,40,0.62);
  --glass-brd: rgba(255,255,255,0.08);

  /* Shape + depth */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-md: 0 12px 32px rgba(0,0,0,0.45);
  --shadow-glow: 0 16px 48px -12px var(--glow-crimson);

  /* Motion */
  --ease: cubic-bezier(0.22,1,0.36,1);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
}

/* ─── LIGHT MODE ────────────────────────────────────────────────────────
   Activated by setting `data-theme="light"` on <html>.
   We invert the neutrals (bg/surface/text) while keeping the crimson
   accents and semantic colors (green/yellow/blue) intact so the brand
   identity stays consistent.
   ──────────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  --bg:        #F4F5F8;
  --bg-2:      #ECEDF1;
  --surface:   #FFFFFF;
  --surface-2: #F7F8FA;
  --surface-3: #ECEDF1;
  --border:    rgba(10,12,18,0.08);
  --border-2:  rgba(10,12,18,0.04);
  --text:      #1A1D24;
  --text-muted:#5A6170;
  --text-dim:  #7C8492;
  /* Slightly desaturate the crimson glow so it doesn't burn against white */
  --crimson-glow: rgba(232,25,44,0.18);
}
/* In light mode, inverted-color image-style overlays look better with
   reduced opacity. Discord-style bubbles in previews keep their tone. */
html[data-theme="light"] body::before {
  opacity: 0.5;
}

/* The dashboard topbar has its background baked in as a dark rgba() value
   (so it stays semi-transparent over the gradient). Override it explicitly
   for light mode so it doesn't remain a black bar. */
html[data-theme="light"] .dash-topbar {
  background: rgba(247, 248, 250, 0.9);
  border-bottom-color: var(--border);
}
html[data-theme="light"] .topbar-section {
  color: var(--text);
}
html[data-theme="light"] .topbar-guild {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
}
/* Sidebar surface — uses a couple of inline gradients/rgba colors */
html[data-theme="light"] .sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
}
html[data-theme="light"] .sb-top,
html[data-theme="light"] .sb-foot {
  border-color: var(--border);
}
html[data-theme="light"] .server-switcher {
  background: var(--surface-2);
  border-color: var(--border);
}
html[data-theme="light"] .nav-item.active {
  background: rgba(232,25,44,0.08);
  color: var(--text);
}
html[data-theme="light"] .nav-item:hover {
  background: var(--surface-2);
  color: var(--text);
}
/* The crimson voter / message bubbles, etc., need their borders re-tinted */
html[data-theme="light"] .config-panel,
html[data-theme="light"] .info-card,
html[data-theme="light"] .activity-panel,
html[data-theme="light"] .broadcast-panel,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .sys-card,
html[data-theme="light"] .module-card,
html[data-theme="light"] .ach-box,
html[data-theme="light"] .feed-card,
html[data-theme="light"] .poll-card,
html[data-theme="light"] .botsugg-card,
html[data-theme="light"] .autorole-row,
html[data-theme="light"] .backup-row {
  background: var(--surface);
}
html[data-theme="light"] .ch-dropdown,
html[data-theme="light"] .mention-dropdown,
html[data-theme="light"] .sb-menu {
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid rgba(10, 12, 18, 0.22) !important;
  box-shadow: 0 18px 56px rgba(10, 12, 18, 0.22),
              0 2px 6px rgba(10, 12, 18, 0.10) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .sb-menu a,
html[data-theme="light"] .sb-menu button {
  background: transparent;
  color: var(--text);
}
html[data-theme="light"] .sb-menu a:hover,
html[data-theme="light"] .sb-menu button:hover {
  background: rgba(232, 25, 44, 0.08);
}
/* The picker-page user-pill dropdown floats in a stacking context above the
   noise overlay — bump its z-index so the panel surface always paints solid. */
.sb-menu, .sb-menu-down { z-index: 9999; }
html[data-theme="light"] .field-input,
html[data-theme="light"] .ch-picker-btn,
html[data-theme="light"] .ch-search input {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="light"] .field-input::placeholder {
  color: var(--text-dim);
}
html[data-theme="light"] .ch-list::-webkit-scrollbar-thumb {
  background: rgba(220,20,60,0.3);
}

/* Server-picker top bar — has its own hardcoded dark rgba background.
   Override it for light mode so it blends with the rest of the page. */
html[data-theme="light"] .picker-nav {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: var(--border);
}
html[data-theme="light"] .user-pill {
  background: var(--surface);
  border-color: var(--border);
}
html[data-theme="light"] .user-pill-name,
html[data-theme="light"] .logo-text {
  color: var(--text);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  font-size:15px;
  line-height:1.5;
  overflow-x:hidden;
  min-height:100vh;
}

/* ══════════════════════════════════════
   LOADING SCREEN
══════════════════════════════════════ */
#loading-screen {
  position:fixed;inset:0;
  background:#050508;
  display:flex;align-items:center;justify-content:center;
  z-index:9999;overflow:hidden;
  transition:opacity .18s ease, visibility .18s ease;
}
#loading-screen.hidden,
html.skip-dash-hud #loading-screen{opacity:0;visibility:hidden;pointer-events:none;}
.loading-hud{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;pointer-events:none;
}
.loading-center{
  position:relative;z-index:1;text-align:center;
  padding:0 28px;max-width:540px;
}
.loading-kicker{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:3.2px;text-transform:uppercase;
  color:#FF2D42;margin-bottom:10px;
  text-shadow:0 0 14px rgba(232,25,44,0.55);
}
.loading-logo{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(40px,6.2vw,72px);
  letter-spacing:5px;line-height:1;color:#fff;
  text-shadow:0 0 28px rgba(232,25,44,0.55);
  margin-bottom:10px;
}
#loading-screen.is-running .loading-logo{animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.55;}}
.loading-sub{
  font-size:13px;color:#c9ced8;letter-spacing:.6px;
  margin:0 0 22px;line-height:1.45;
}
.loading-bar-track{
  width:188px;height:3px;margin:0 auto;
  background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden;
  box-shadow:0 0 12px rgba(232,25,44,0.18);
}
.loading-bar-fill{height:100%;width:0;background:var(--crimson);border-radius:3px;}
#loading-screen.is-running .loading-bar-fill{animation:load 1.6s ease-in-out forwards;}
@keyframes load{from{width:0;}to{width:100%;}}
@media (prefers-reduced-motion:reduce){
  #loading-screen.is-running .loading-logo{animation:none;}
  #loading-screen.is-running .loading-bar-fill{animation:none;width:100%;}
}

/* ══════════════════════════════════════
   VIEWS
══════════════════════════════════════ */
.view{display:none;}
.view.active{display:flex;}
#view-picker.active{flex-direction:column;min-height:100vh;}
#view-dashboard.active{min-height:100vh;}

/* ══════════════════════════════════════
   BACKGROUND EFFECTS
══════════════════════════════════════ */
.bg-grid{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(232,25,44,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,25,44,0.03) 1px, transparent 1px);
  background-size:40px 40px;
}
.bg-glow{
  position:fixed;top:-200px;right:-200px;
  width:600px;height:600px;
  background:radial-gradient(circle, rgba(232,25,44,0.06) 0%, transparent 70%);
  pointer-events:none;z-index:0;
}
.bg-glow-2{
  position:fixed;bottom:-200px;left:-100px;
  width:500px;height:500px;
  background:radial-gradient(circle, rgba(99,102,241,0.04) 0%, transparent 70%);
  pointer-events:none;z-index:0;
}
/* Hide the crimson page-tint effects in light mode — they bleed pink
   behind dropdowns / panels and make backgrounds look semi-transparent. */
html[data-theme="light"] .bg-grid,
html[data-theme="light"] .bg-glow,
html[data-theme="light"] .bg-glow-2 {
  display: none;
}

/* ══════════════════════════════════════
   SERVER PICKER
══════════════════════════════════════ */
.picker-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 48px;
  border-bottom:1px solid var(--border);
  background:rgba(8,10,14,0.9);
  backdrop-filter:blur(20px);
  position:sticky;top:0;z-index:50;
  position:relative;z-index:10;
}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;}
.logo-mark{
  width:40px;height:40px;
  background:url('/logo-256.png') center/contain no-repeat;
  flex-shrink:0;
}
.logo-text{
  font-family:'Bebas Neue',sans-serif;font-size:26px;font-weight:400;letter-spacing:3px;line-height:1;
  background:var(--grad-crimson);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--crimson-2);
  text-shadow:0 0 18px var(--crimson-glow);
}

.user-pill{
  position:relative;
  display:flex;align-items:center;gap:10px;
  padding:7px 16px 7px 8px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:100px;cursor:pointer;
  transition:all .2s;
  user-select:none;
}
.user-pill:hover{border-color:var(--crimson-border);}
.user-pill .sb-caret{
  margin-left:4px;color:var(--text-dim);font-size:9px;
  transition:transform .2s;flex-shrink:0;
}
.user-pill.menu-open .sb-caret{transform:rotate(180deg);}
/* The sidebar's .sb-menu drops UP. For the picker top-bar pill we need it
   to drop DOWN — flip the anchor with this modifier. */
.sb-menu-down{
  top:calc(100% + 8px);bottom:auto;
  left:auto;right:0;min-width:200px;
  box-shadow:0 12px 40px rgba(0,0,0,0.4);
}
html[data-theme="light"] .sb-menu-down{
  box-shadow:0 12px 40px rgba(0,0,0,0.15);
}
.user-av-sm{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--crimson),#7B0000);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;overflow:hidden;
}
.user-av-sm img{width:100%;height:100%;object-fit:cover;}
.user-pill-name{font-size:13px;font-weight:600;color:var(--text);}

.picker-body{
  flex:1;
  padding:72px 48px;
  max-width:1200px;
  margin:0 auto;
  width:100%;
  position:relative;z-index:1;
}

.picker-hero{margin-bottom:56px;}
.picker-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;color:var(--crimson);
  letter-spacing:3px;text-transform:uppercase;
  margin-bottom:16px;
  display:flex;align-items:center;gap:10px;
}
.picker-eyebrow::before{content:'';width:24px;height:1px;background:var(--crimson);}
.picker-hero h1{
  font-family:'Bebas Neue';font-size:48px;font-weight:900;
  line-height:1;letter-spacing:2px;
  margin-bottom:16px;
}
.picker-hero h1 span{color:var(--crimson);}
.picker-hero p{color:var(--text-muted);font-size:15px;max-width:480px;font-weight:400;}

.section-label{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:16px;
  display:flex;align-items:center;gap:12px;
}
.section-label::after{content:'';flex:1;height:1px;background:var(--border);}

.servers-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;
  margin-bottom:56px;
}

.server-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px;
  cursor:pointer;
  transition:all .25s;
  position:relative;overflow:hidden;
  animation:cardIn .4s ease both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.server-card:nth-child(1){animation-delay:.05s;}
.server-card:nth-child(2){animation-delay:.1s;}
.server-card:nth-child(3){animation-delay:.15s;}
.server-card:nth-child(4){animation-delay:.2s;}
.server-card:nth-child(5){animation-delay:.25s;}
.server-card:hover{
  border-color:var(--crimson-border);
  background:var(--surface-2);
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,0.5),0 0 0 1px var(--crimson-border);
}
.server-card::after{
  content:'';position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--crimson),transparent);
  opacity:0;transition:opacity .3s;
}
.server-card:hover::after{opacity:1;}

.server-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;}
.server-icon-wrap{position:relative;}
.server-icon{
  width:56px;height:56px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;overflow:hidden;
  background:var(--surface-3);
  border:1px solid var(--border);
}
.server-icon img{width:100%;height:100%;object-fit:cover;border-radius:14px;}
.server-badge{
  position:absolute;bottom:-4px;right:-4px;
  font-size:9px;font-weight:700;
  padding:2px 6px;border-radius:4px;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.5px;
  border:1.5px solid var(--bg);
}
.badge-online{background:var(--green);color:#fff;}
.badge-invite{background:var(--surface-3);color:var(--text-muted);}

.server-status-label{
  font-size:10px;font-weight:600;
  padding:4px 8px;border-radius:6px;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.5px;text-transform:uppercase;
}
.status-ready{background:rgba(16,185,129,0.1);color:var(--green);border:1px solid rgba(16,185,129,0.2);}
.status-invite{background:var(--crimson-dim);color:var(--crimson);border:1px solid var(--crimson-border);}

.server-name{font-family:'DM Sans';font-size:14px;font-weight:700;letter-spacing:.5px;margin-bottom:4px;}
.server-meta{font-size:12px;color:var(--text-muted);font-weight:400;margin-bottom:18px;}

.server-btn{
  width:100%;padding:9px;
  background:var(--crimson-dim);
  border:1px solid var(--crimson-border);
  border-radius:10px;
  color:var(--crimson-2);font-size:12px;font-weight:700;
  font-family:'DM Sans',sans-serif;letter-spacing:.5px;text-transform:uppercase;
  cursor:pointer;transition:all .2s;
}
.server-btn:hover{background:var(--crimson);color:#fff;border-color:var(--crimson);box-shadow:0 4px 20px var(--crimson-glow);}

.invite-card{
  background:transparent;border:1px dashed var(--border);
  border-radius:16px;padding:24px;cursor:pointer;
  transition:all .25s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:180px;gap:12px;
}
.invite-card:hover{border-color:var(--crimson-border);background:var(--crimson-dim);}
.invite-plus{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--text-dim);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--text-dim);transition:all .2s;
}
.invite-card:hover .invite-plus{border-color:var(--crimson);color:var(--crimson);}
.invite-label{font-size:13px;color:var(--text-muted);}

/* ══════════════════════════════════════
   MAIN DASHBOARD
══════════════════════════════════════ */
#view-dashboard{display:none;min-height:100vh;}
#view-dashboard.active{display:flex;}

/* SIDEBAR */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  /* No outer overflow — the inner .sb-nav scrolls, and .sb-foot stays pinned. */
  overflow:hidden;
  transition:width .2s var(--ease), border-color .2s var(--ease);
}
/* Collapsed: width→0 reclaims the space for .dash-main automatically, since
   it's already flex:1 in the same flex row — no extra layout math needed. */
#view-dashboard.sidebar-collapsed .sidebar{
  width:0; min-width:0; border-right-color:transparent;
}

.sb-top{
  padding:20px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.sb-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:0 4px;}
.sb-logo-mark{
  width:38px;height:38px;
  background:url('/logo-256.png') center/contain no-repeat;
  filter:drop-shadow(0 0 6px var(--crimson-glow));
  /* The Cyndrix slime mascot logo (matches the marketing site nav). The
     dashboard's nav has two .sb-logo-mark slots: the normal sidebar and the
     owner sidebar (which keeps its 👑 text). Hide non-image text on this base
     class so only the mark renders. */
  font-size:0;
  flex-shrink:0;
}
/* Owner sidebar uses an emoji as the mark — restore a tiny text container
   for it instead of the round logo background. */
.sb-logo-mark.sb-logo-mark-text{
  background:var(--crimson);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue';font-size:14px;font-weight:900;color:#fff;
  box-shadow:0 0 12px var(--crimson-glow);
}
.sb-logo-text{
  font-family:'Bebas Neue',sans-serif;font-size:24px;font-weight:400;letter-spacing:3px;line-height:1;
  background:var(--grad-crimson);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--crimson-2);
  text-shadow:0 0 18px var(--crimson-glow);
}

.server-switcher{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
  cursor:pointer;transition:all .2s;
}
.server-switcher:hover{border-color:var(--crimson-border);}
.sw-icon{
  width:32px;height:32px;border-radius:9px;
  background:var(--crimson);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;flex-shrink:0;overflow:hidden;
}
.sw-icon img{width:100%;height:100%;object-fit:cover;border-radius:7px;}
.sw-info{flex:1;overflow:hidden;}
.sw-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'DM Sans';letter-spacing:.5px;}
.sw-role{font-size:11px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;}
.sw-caret{color:var(--text-dim);font-size:10px;}

.sb-nav{
  flex:1 1 auto;min-height:0;
  padding:12px 10px;
  overflow-y:auto;
  scrollbar-width:thin;
}
.sb-nav::-webkit-scrollbar{width:6px;}
.sb-nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.sb-nav::-webkit-scrollbar-thumb:hover{background:var(--text-dim);}
.nav-group-title{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-muted);padding:0 10px;margin:18px 0 6px;
}
.nav-group-title:first-child{margin-top:4px;}

/* ── Collapsible nav groups ───────────────────────────────────────────────
   Modules sidebar got too long once we hit ~25 tabs. Each .nav-group wraps
   a header + its items so the user can fold the ones they don't currently
   need. State persists in localStorage so a refresh doesn't undo it. */
.nav-group{ margin-bottom:4px; }
.nav-group-header{
  display:flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-muted);padding:8px 10px;margin:14px 0 4px;
  cursor:pointer;user-select:none;
  border-radius:6px;
  transition:color .15s, background .15s;
}
.nav-group:first-child .nav-group-header{ margin-top:4px; }
.nav-group-header:hover{ color:var(--text); background:var(--surface-2); }
.nav-group-caret{
  display:inline-block;
  transition:transform .18s;
  font-size:10px;
  color:var(--text-muted);
  width:8px;
}
.nav-group.collapsed .nav-group-caret{ transform:rotate(-90deg); }
.nav-group-label{ flex:1; }
.nav-group-count{
  font-size:8px;
  background:var(--surface-2);
  color:var(--text-dim);
  padding:2px 6px;
  border-radius:8px;
  font-weight:500;
  letter-spacing:0;
}
.nav-group-body{
  display:flex;flex-direction:column;
  overflow:hidden;
  max-height:1200px;
  transition:max-height .25s ease-out;
}
.nav-group.collapsed .nav-group-body{
  max-height:0;
}

/* ── PREMIUM UPGRADE MODAL ──────────────────────────────────────────────────
   Fires when a free guild tries to flip a locked Enable toggle. Renders as
   an overlay with a Subscribe button that posts to /api/billing/checkout —
   same code path as the Billing tab's Subscribe buttons, just inline so the
   user doesn't have to navigate away from the feature they wanted. */
#pg-upgrade-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:10000;
  align-items:center;
  justify-content:center;
}
#pg-upgrade-modal.open{ display:flex; }
/* ═════ PREMIUM PANEL LOCK ═════
   Show the feature, softly blurred, instead of hiding it behind an upsell —
   seeing what you would get sells better than a wall, and the layout stays put.

   The blur goes on the CONTENT rather than as a backdrop-filter on the veil,
   so the card's own text renders perfectly sharp on top of it. `filter` also
   creates a containing block for fixed-position descendants, which is fine
   here: the only fixed thing inside a panel is the mention dropdown, and that
   is parented to <body>. */
.pg-locked{ position:relative; }
.pg-locked > :not(.pg-lock-veil){
  filter:blur(2.4px) saturate(0.7);
  opacity:0.42;
  pointer-events:none;   /* can't edit what you can't save */
  user-select:none;
  /* Applied instantly, deliberately — a fade leaves a moment where locked
     content still looks editable. */
}
.pg-lock-veil{
  position:absolute; inset:0; z-index:6;
  border-radius:inherit;
  background:radial-gradient(120% 90% at 50% 50%, rgba(10,12,18,0.28), rgba(10,12,18,0.64));
}
.pg-lock-card{
  /* Centred on the WINDOW, not on the panel. These panels run past a screen in
     height, so anchoring to the panel puts the message at the top edge or below
     the fold; positionPanelLockCard() keeps it in the middle of whatever part
     of the panel you are actually looking at. `top` is set from JS; this is the
     fallback for the first paint before that runs. */
  position:absolute; top:50%; left:50%;
  /* Centred ON the point JS sets, so its own height never enters the sum —
     measuring the card mid-layout used to put it ~55px out and leave it there. */
  transform:translate(-50%, -50%);
  width:min(420px, calc(100% - 32px)); text-align:center;
  background:linear-gradient(180deg, rgba(26,29,38,0.985), rgba(16,18,25,0.985));
  border:1px solid var(--crimson-border); border-radius:16px;
  padding:22px 24px;
  box-shadow:0 28px 70px -22px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.05);
}
.pg-lock-pill{
  display:inline-block; margin-bottom:12px;
  padding:4px 11px; border-radius:999px;
  background:var(--crimson-dim); border:1px solid var(--crimson-border);
  color:var(--crimson-2); font-size:10.5px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase;
}
.pg-lock-title{ font-size:17px; font-weight:700; color:var(--text); margin-bottom:7px; }
.pg-lock-sub{ font-size:12.5px; line-height:1.55; color:var(--text-dim); margin-bottom:16px; }
.pg-lock-sub a{ color:var(--crimson-2); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.pg-lock-sub a:hover{ color:#FF6B76; }
.pg-lock-sub:last-child{ margin-bottom:0; }
.pg-lock-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; }
.pg-lock-btn{
  padding:9px 18px; border-radius:11px; border:none; cursor:pointer;
  background:var(--grad-crimson); color:#fff;
  font-family:inherit; font-size:12.5px; font-weight:700;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.pg-lock-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(232,25,44,0.75); }
.pg-lock-link{
  background:none; border:none; padding:4px 2px; cursor:pointer;
  color:var(--crimson-2); font-family:inherit; font-size:12.5px; font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
}
.pg-lock-link:hover{ color:#FF6B76; }

/* On a narrow screen the panel is tall and the centred card can fall below the
   fold, so pin it near the top instead. */
@media (max-width: 860px){
  .pg-lock-veil{ align-items:flex-start; padding-top:40px; }
}

.pg-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(4px);
  animation:pgFade .2s ease;
}
@keyframes pgFade{ from{opacity:0} to{opacity:1} }
.pg-modal-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:32px;
  max-width:480px;
  width:calc(100% - 40px);
  box-shadow:0 24px 80px rgba(0,0,0,0.5);
  animation:pgSlide .25s cubic-bezier(.2,.9,.3,1);
}
@keyframes pgSlide{ from{opacity:0;transform:translateY(20px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
.pg-modal-close{
  position:absolute;
  top:14px;right:14px;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;
  color:var(--text-muted);
  font-size:24px;line-height:1;
  cursor:pointer;border-radius:6px;
  transition:all .15s;
}
.pg-modal-close:hover{ color:var(--text); background:var(--surface-2); }
.pg-modal-tier-pill{
  display:inline-block;
  background:linear-gradient(135deg,#FFD700,#FFA500);
  color:#1a1d24;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;
  letter-spacing:1.5px;
  padding:5px 12px;border-radius:100px;
  margin-bottom:18px;
}
.pg-modal-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:30px;
  letter-spacing:1px;
  line-height:1.1;
  color:var(--text);
  margin-bottom:14px;
}
.pg-modal-desc{
  font-size:14px;
  line-height:1.6;
  color:var(--text-muted);
  margin-bottom:18px;
}
.pg-modal-currenttier{
  font-size:12px;
  color:var(--text-muted);
  padding:10px 14px;
  background:var(--surface-2);
  border-radius:8px;
  border:1px solid var(--border);
  margin-bottom:20px;
}
.pg-modal-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.pg-modal-btn-primary{
  flex:1;
  min-width:200px;
  padding:12px 20px;
  background:linear-gradient(135deg,var(--crimson),#F02028);
  color:white;
  border:none;
  border-radius:8px;
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  letter-spacing:0.3px;
  transition:all .2s;
}
.pg-modal-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(220,31,38,0.35);
}
.pg-modal-btn-primary:disabled{
  opacity:0.6;
  cursor:wait;
  transform:none;
  box-shadow:none;
}
.pg-modal-btn-ghost{
  padding:12px 20px;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-muted);
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  transition:all .15s;
}
.pg-modal-btn-ghost:hover{
  color:var(--text);
  border-color:var(--text-muted);
  background:var(--surface-2);
}
.pg-modal-fineprint{
  margin-top:16px;
  font-size:11px;
  color:var(--text-dim);
  text-align:center;
}
.pg-modal-fineprint a{ color:var(--crimson); text-decoration:none; }
.pg-modal-fineprint a:hover{ text-decoration:underline; }

/* Lock visual on premium-gated toggles — subtle so it doesn't shout */
.toggle input[data-pg-locked="1"] + .toggle-track,
input[data-pg-locked="1"] + .toggle-track{
  opacity:0.55;
}
input[data-pg-locked="1"]{ cursor:not-allowed; }

.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:10px;
  color:var(--text-muted);font-size:13px;font-weight:600;
  cursor:pointer;transition:all .18s;
  margin-bottom:2px;border:1px solid transparent;
  letter-spacing:.3px;
}
.nav-item:hover{background:var(--surface-2);color:var(--text);}
.nav-item.active{
  background:var(--crimson-dim);
  color:var(--crimson-2);
  border-color:var(--crimson-border);
}
.nav-item.active .nav-ic{color:var(--crimson);}
.nav-ic{font-size:14px;width:18px;text-align:center;flex-shrink:0;}
.nav-badge{
  margin-left:auto;
  background:var(--crimson);color:white;
  font-size:9px;font-weight:700;
  padding:2px 7px;border-radius:10px;
  font-family:'JetBrains Mono',monospace;
}

/* Status dot shown on each module nav-item. Green = enabled, gray = off. */
.nav-status{
  margin-left:auto;flex-shrink:0;
  width:8px;height:8px;border-radius:50%;
  background:var(--text-dim);
  transition:background .2s, box-shadow .2s;
}
.nav-status[data-on="true"]{
  background:var(--green);
  box-shadow:0 0 8px rgba(16,185,129,0.6);
}

.sb-foot{
  padding:12px 10px;
  border-top:1px solid var(--border);
  flex-shrink:0;
  background:var(--surface);
}
.sb-user{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:10px;cursor:pointer;transition:background .18s;
}
.sb-user:hover{background:var(--surface-2);}
.sb-avatar{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--crimson),#7B0000);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;
}
.sb-avatar img{width:100%;height:100%;object-fit:cover;}
.sb-uname{font-size:12px;font-weight:700;font-family:'DM Sans';letter-spacing:.3px;}
.sb-tag{font-size:11px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;}
.sb-logout{
  margin-left:auto;color:var(--text-dim);font-size:14px;
  cursor:pointer;background:none;border:none;transition:color .2s;padding:4px;
}
.sb-logout:hover{color:var(--crimson);}

/* ─── Sidebar profile dropdown (Dashboard / Mode / Logout) ─── */
.sb-user{position:relative;}
.sb-user .sb-caret{
  margin-left:auto;color:var(--text-dim);font-size:9px;
  transition:transform .2s;flex-shrink:0;
}
.sb-user.menu-open .sb-caret{transform:rotate(180deg);}

.sb-menu{
  position:absolute;
  bottom:calc(100% + 6px);left:0;right:0;
  background:var(--surface-2);
  /* Stronger border in dark mode so the menu reads as a card, not as floating
     items — light mode overrides this further below. */
  border:1px solid rgba(255,255,255,0.10);
  border-radius:12px;
  box-shadow:0 -12px 40px rgba(0,0,0,0.55);
  padding:6px;
  z-index:9999;
  display:none;
  flex-direction:column;
  gap:2px;
}
.sb-menu.open{display:flex;}
.sb-menu a, .sb-menu button{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;font-size:13px;color:var(--text);
  background:none;border:none;border-radius:7px;
  text-align:left;cursor:pointer;text-decoration:none;
  font-family:inherit;
  transition:background .12s;
}
.sb-menu a:hover, .sb-menu button:hover{
  background:var(--crimson-dim);
}
.sb-menu .sb-menu-ic{
  font-size:14px;width:16px;text-align:center;opacity:0.85;flex-shrink:0;
}
.sb-menu .sb-menu-logout{color:#FF6B73;}
.sb-menu .sb-menu-sep{
  height:1px;background:rgba(255,255,255,0.08);margin:4px 2px;
}
html[data-theme="light"] .sb-menu .sb-menu-sep{
  background:rgba(10,12,18,0.10);
}

/* MAIN */
.dash-main{flex:1;overflow-y:auto;background:var(--bg-2);display:flex;flex-direction:column;}

/* TOPBAR */
.dash-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 28px;
  margin:14px 18px 6px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(13,15,20,0.9);
  backdrop-filter:blur(12px);
  position:sticky;top:14px;z-index:40;flex-shrink:0;
  box-shadow:0 12px 32px -20px rgba(0,0,0,0.75);
}
.topbar-left{display:flex;align-items:center;gap:14px;}
.topbar-crumb{display:flex;align-items:center;gap:8px;}
.crumb-sep{color:var(--text-dim);font-size:12px;}
.topbar-section{
  font-family:'DM Sans';font-size:14px;font-weight:700;
  letter-spacing:2px;color:var(--text);
}
.topbar-right{display:flex;align-items:center;gap:8px;}
.topbar-guild{
  display:flex;align-items:center;gap:8px;
  padding:6px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  font-size:12px;font-weight:600;color:var(--text-muted);
}
.online-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);}
.icon-btn{
  width:34px;height:34px;border-radius:9px;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:14px;transition:all .2s;
}
.icon-btn:hover{border-color:var(--crimson-border);background:var(--surface-2);}

/* TAB PAGES */
.dash-content{flex:1;overflow-y:auto;}
.tab-page{display:none;padding:28px 32px;animation:fadeUp .3s ease;min-width:0;}
.tab-page.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ══════════════════════════════════════
   OVERVIEW TAB
══════════════════════════════════════ */
.page-header{margin-bottom:20px;}
.page-title{font-family:'Bebas Neue';font-size:22px;font-weight:800;letter-spacing:1px;margin-bottom:4px;}
.page-sub{font-size:13px;color:var(--text-muted);font-weight:400;}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;margin-bottom:24px;
}
.stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px 20px;
  position:relative;overflow:hidden;
  transition:border-color .2s;
}
.stat-card:hover{border-color:rgba(255,255,255,0.1);}
.stat-card::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:2px;
}
.stat-card.c-red::before{background:linear-gradient(90deg,var(--crimson),transparent);}
.stat-card.c-green::before{background:linear-gradient(90deg,var(--green),transparent);}
.stat-card.c-yellow::before{background:linear-gradient(90deg,var(--yellow),transparent);}
.stat-card.c-blue::before{background:linear-gradient(90deg,var(--blue),transparent);}
.stat-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;}
.stat-icon{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
}
.stat-card.c-red .stat-icon{background:rgba(232,25,44,0.1);}
.stat-card.c-green .stat-icon{background:rgba(16,185,129,0.1);}
.stat-card.c-yellow .stat-icon{background:rgba(245,158,11,0.1);}
.stat-card.c-blue .stat-icon{background:rgba(99,102,241,0.1);}
.stat-trend{font-size:11px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;}
.stat-num{
  font-family:'Bebas Neue';font-size:34px;font-weight:800;
  letter-spacing:1px;line-height:1;margin-bottom:6px;
}
.stat-card.c-red .stat-num{color:var(--crimson);}
.stat-card.c-green .stat-num{color:var(--green);}
.stat-card.c-yellow .stat-num{color:var(--yellow);}
.stat-card.c-blue .stat-num{color:var(--blue);}
.stat-label{font-size:11px;color:var(--text-muted);font-weight:600;letter-spacing:.5px;text-transform:uppercase;font-family:'JetBrains Mono',monospace;}

/* Modules grid */
.modules-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;margin-bottom:24px;
}
.module-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:22px;
  transition:all .2s;cursor:default;
}
.module-card:hover{border-color:rgba(255,255,255,0.1);}
.module-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.module-title-row{display:flex;align-items:center;gap:10px;}
.module-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.dot-on{background:var(--green);box-shadow:0 0 8px var(--green);}
.dot-off{background:var(--text-dim);}
.module-name{font-family:'DM Sans';font-size:13px;font-weight:700;letter-spacing:.5px;}
.module-status{
  font-size:10px;font-weight:700;
  padding:3px 8px;border-radius:6px;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.5px;text-transform:uppercase;
}
.ms-on{background:rgba(16,185,129,0.1);color:var(--green);border:1px solid rgba(16,185,129,0.2);}
.ms-off{background:var(--surface-3);color:var(--text-dim);border:1px solid var(--border);}
.module-stats{display:flex;gap:20px;}
.mstat{display:flex;flex-direction:column;gap:2px;}
.mstat-val{font-family:'Bebas Neue';font-size:18px;font-weight:700;}
.mstat-key{font-size:10px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;letter-spacing:.5px;}
.mstat-link{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;color:var(--crimson);font-weight:600;
  cursor:pointer;text-decoration:none;letter-spacing:.3px;
  margin-top:12px;transition:opacity .2s;
}
.mstat-link:hover{opacity:.7;}

/* Recent activity */
.activity-panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;margin-bottom:24px;
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;border-bottom:1px solid var(--border);
}
.panel-title{
  font-family:'DM Sans';font-size:12px;font-weight:700;
  letter-spacing:1px;color:var(--text-muted);
}
.panel-link{font-size:11px;color:var(--crimson);cursor:pointer;font-weight:600;letter-spacing:.3px;}
.panel-link:hover{opacity:.7;}

.activity-list{}
.activity-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 22px;
  border-bottom:1px solid var(--border-2);
  transition:background .15s;
}
.activity-row:last-child{border-bottom:none;}
.activity-row:hover{background:rgba(255,255,255,0.015);}
.act-tag{
  font-size:9px;font-weight:700;
  padding:3px 8px;border-radius:5px;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.5px;text-transform:uppercase;
  white-space:nowrap;flex-shrink:0;
  min-width:56px;text-align:center;
}
.tag-ban{background:rgba(232,25,44,0.12);color:#FF4D5E;border:1px solid rgba(232,25,44,0.2);}
.tag-warn{background:rgba(245,158,11,0.12);color:#FBB740;border:1px solid rgba(245,158,11,0.2);}
.tag-mute{background:rgba(99,102,241,0.12);color:#A5B4FC;border:1px solid rgba(99,102,241,0.2);}
.tag-kick{background:rgba(249,115,22,0.12);color:#FB923C;border:1px solid rgba(249,115,22,0.2);}
.tag-unban{background:rgba(16,185,129,0.12);color:#34D399;border:1px solid rgba(16,185,129,0.2);}
.act-info{flex:1;display:flex;flex-direction:column;gap:2px;}
.act-user{font-size:13px;font-weight:700;}
.act-reason{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px;}
.act-meta{font-size:11px;color:var(--text-dim);text-align:right;flex-shrink:0;font-family:'JetBrains Mono',monospace;}

/* ══════════════════════════════════════
   MODLOG / LEVELS / BIRTHDAYS TAB
══════════════════════════════════════ */
.settings-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:20px;
  align-items:start;
}
.settings-layout > *{ min-width:0; }
.settings-layout.full{grid-template-columns:1fr;}
/* Discovery tab — explicit 60/40 edit/preview split (wider than the default
   1fr/380px sidebar so the preview card reads clearly, not just a strip). */
.settings-layout.discovery-split{grid-template-columns:3fr 2fr;}
@media (max-width:900px){ .settings-layout.discovery-split{grid-template-columns:1fr;} }

.config-panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;
  /* No overflow:hidden — would clip every channel/role picker dropdown
     that opens near the bottom of the panel. */
}
.cp-head{
  padding:20px 24px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.cp-title-row{display:flex;align-items:center;gap:10px;}
.cp-title{font-family:'DM Sans';font-size:14px;font-weight:700;letter-spacing:.5px;}
.cp-subtitle{font-size:12px;color:var(--text-muted);margin-top:3px;}
.cp-badge{
  font-size:9px;font-weight:700;
  padding:3px 8px;border-radius:6px;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.5px;text-transform:uppercase;
}
.cp-badge.on{background:rgba(16,185,129,0.1);color:var(--green);border:1px solid rgba(16,185,129,0.2);}
.cp-badge.off{background:var(--surface-3);color:var(--text-dim);border:1px solid var(--border);}

.cp-body{padding:24px;}
.cp-section{margin-bottom:28px;}
.cp-section:last-child{margin-bottom:0;}
.cp-section-title{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--text-muted);
  margin-bottom:16px;
  display:flex;align-items:center;gap:10px;
}
.cp-section-title::after{content:'';flex:1;height:1px;background:var(--border);}

.field-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field-row:last-child{margin-bottom:0;}
.field-label{font-size:12px;font-weight:600;color:var(--text);letter-spacing:.3px;}
.field-desc{font-size:11px;color:var(--text-muted);}
.field-input{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:10px;padding:10px 14px;
  color:var(--text);font-size:13px;
  font-family:'JetBrains Mono',monospace;
  outline:none;transition:border-color .2s;width:100%;
}
.field-input:focus{border-color:var(--crimson-border);}
.field-input::placeholder{color:var(--text-dim);}
textarea.field-input{resize:vertical;min-height:80px;}

.field-row-inline{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 0;border-bottom:1px solid var(--border-2);
}
.field-row-inline:last-child{border-bottom:none;}
.fri-info{flex:1;padding-right:20px;}
.fri-label{font-size:13px;font-weight:600;}
.fri-desc{font-size:11px;color:var(--text-muted);margin-top:2px;}

/* Toggle — must be a box. <label> is inline, so width/height are ignored
   unless we set display; the absolute track then collapses and overlaps
   the next field (Cross-Channel “Multi-user blast”). */
.toggle{display:inline-block;position:relative;width:42px;height:24px;flex-shrink:0;vertical-align:middle;}
.toggle input{opacity:0;width:0;height:0;position:absolute;}
.toggle-track{
  position:absolute;inset:0;background:var(--surface-3);
  border-radius:12px;cursor:pointer;transition:.25s;
  border:1px solid var(--border);
}
.toggle-track::before{
  content:'';position:absolute;
  left:3px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;border-radius:50%;
  background:var(--text-dim);transition:.25s;
}
.toggle input:checked+.toggle-track{background:var(--crimson);border-color:var(--crimson);}
.toggle input:checked+.toggle-track::before{left:21px;background:#fff;}

.fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* Module toggles */
.module-toggle-list{}
.mod-toggle-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--border-2);
}
.mod-toggle-row:last-child{border-bottom:none;}
.mod-toggle-icon{
  width:34px;height:34px;border-radius:9px;
  background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}
.mod-toggle-info{flex:1;}
.mod-toggle-name{font-size:13px;font-weight:700;margin-bottom:2px;}
.mod-toggle-ch{font-size:11px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;}

/* Save button */
.save-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 28px;
  background:var(--crimson);
  border:none;border-radius:12px;
  color:#fff;font-size:13px;font-weight:700;
  font-family:'DM Sans',sans-serif;
  letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;transition:all .2s;width:100%;margin-top:20px;
}
.save-btn:hover{background:var(--crimson-2);box-shadow:0 6px 24px var(--crimson-glow);}
.save-btn:active{transform:scale(0.99);}
.save-btn.loading{opacity:.7;pointer-events:none;}

/* Info card */
.info-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;
  position:sticky;top:20px;
}
.info-section{padding:20px 22px;border-bottom:1px solid var(--border);}
.info-section:last-child{border-bottom:none;}
.info-section-title{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--text-muted);
  margin-bottom:14px;
}
/* "How it works" + tips body text — many modules use an inline
   color:var(--text-dim) on the wrapper div, which is the LIGHTEST text
   color in the palette (intended for placeholders, not paragraphs).
   The !important defeats those inline wrapper styles so the body copy
   stays readable in both themes without touching every module's HTML.
   We only touch the WRAPPER color — paragraphs inside inherit by default,
   so warnings with their own explicit `color:#ffcc66` style still render
   yellow as intended. font-weight 500 + 13px adds enough stroke that
   12-13px reads crisply. */
.info-section > div { color: var(--text-muted) !important; }
.info-section > div p,
.info-section > div > p {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.7;
}
.info-section strong { color: var(--text); font-weight: 700; }
.info-section a { font-weight: 600; }
/* Field-row description (the small hint under labels) — bump from
   11px / weight 400 to 12px / weight 500 for legibility. */
.field-desc { font-size: 12px; font-weight: 500; }

/* When .field-row contains a 2/3-column grid (used in AI chat, tickets,
   counters, giveaways, automod, etc.), each column's child block has its own
   .field-label + .field-desc + input. Because field-desc text lengths vary,
   inputs end up at different vertical positions across columns. align-items:end
   pushes inputs to the bottom of each cell so they line up. The labels and
   descs sit on top, free to be different heights. This covers both inline-style
   grids and the .u-grid2/.u-grid2-14 class helpers.
   Exception: a cell whose description sits BELOW its input (e.g. the counting
   emoji row) must opt out with an inline align-items:start, since there
   bottom-alignment would push the shorter cell's input down instead. */
.field-row[style*="grid-template-columns"],
.field-row.u-grid2,
.field-row.u-grid2-14 {
  align-items: end;
}
/* But on phone where the grid collapses to 1 column, align-items:end is
   a no-op so we don't need a media-query override. */
/* Subtitle under cp-title (cards' second line) — same treatment. */
.cp-subtitle, .cp-sub { font-weight: 500; }
.info-stat-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;}
.info-stat-row+.info-stat-row{border-top:1px solid var(--border-2);}
.isr-left{display:flex;align-items:center;gap:10px;}
.isr-ic{font-size:14px;width:20px;text-align:center;}
.isr-label{font-size:12px;font-weight:600;color:var(--text-muted);}
.isr-val{font-size:14px;font-weight:700;font-family:'JetBrains Mono',monospace;}

/* Toast */
.toast{
  position:fixed;bottom:28px;right:28px;z-index:999;
  display:flex;align-items:center;gap:10px;
  padding:12px 20px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  transform:translateY(80px);opacity:0;
  transition:all .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.toast.show{transform:translateY(0);opacity:1;}
.toast.success{border-color:rgba(16,185,129,0.3);}
.toast.error{border-color:rgba(232,25,44,0.3);}
.toast-ic{font-size:16px;}
.toast-msg{font-size:13px;font-weight:600;}

/* ══════════════════════════════════════
   LEADERBOARD TAB
══════════════════════════════════════ */
.lb-grid{display:flex;flex-direction:column;gap:10px;}
.lb-row{
  display:flex;align-items:center;gap:16px;
  padding:14px 20px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;transition:all .2s;
}
.lb-row:hover{border-color:var(--crimson-border);}
.lb-rank{
  font-family:'Bebas Neue';font-size:18px;font-weight:800;
  width:36px;text-align:center;flex-shrink:0;
}
.lb-rank.gold{color:#F59E0B;}
.lb-rank.silver{color:#94A3B8;}
.lb-rank.bronze{color:#CA8A04;}
.lb-rank.other{color:var(--text-dim);}
.lb-av{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--crimson),#7B0000);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;flex-shrink:0;overflow:hidden;
}
.lb-info{flex:1;}
.lb-name{font-size:14px;font-weight:700;margin-bottom:2px;}
.lb-xp{font-size:11px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;}
.lb-level{
  font-family:'Bebas Neue';font-size:18px;font-weight:800;
  color:var(--crimson);
}
.lb-level-label{font-size:10px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;text-align:right;}

/* ══════════════════════════════════════
   WARNINGS TAB
══════════════════════════════════════ */
.warn-list{display:flex;flex-direction:column;gap:10px;}
.warn-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;
  transition:border-color .2s;
}
.warn-card:hover{border-color:var(--crimson-border);}
.warn-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--border-2);
}
.warn-id{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:600;letter-spacing:.5px;
  color:var(--text-dim);flex-shrink:0;
}
.warn-target{font-size:13px;font-weight:700;flex:1;}
.warn-count{
  font-family:'Bebas Neue';font-size:14px;font-weight:800;color:var(--yellow);
}
.warn-count-label{font-size:10px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;text-align:right;}
.warn-body{padding:12px 18px;}
.warn-entry{
  display:flex;align-items:flex-start;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--border-2);
}
.warn-entry:last-child{border-bottom:none;}
.warn-entry-num{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  font-weight:700;color:var(--crimson);
  width:20px;flex-shrink:0;padding-top:2px;
}
.warn-entry-reason{font-size:12px;color:var(--text);flex:1;}
.warn-entry-meta{font-size:10px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;white-space:nowrap;}

/* ══════════════════════════════════════
   AUDIT LOG (dashboard changes feed)
══════════════════════════════════════ */
.audit-list{display:flex;flex-direction:column;}
.audit-entry{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 22px;
  border-bottom:1px solid var(--border-2);
}
.audit-entry:last-child{border-bottom:none;}
.audit-entry:hover{background:var(--surface-2);}
.audit-icon{
  font-size:16px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;flex-shrink:0;
}
.audit-body{flex:1;min-width:0;}
.audit-line{
  font-size:13px;color:var(--text);line-height:1.45;
}
.audit-line strong{color:var(--text);font-weight:700;}
.audit-line .audit-module{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;color:var(--crimson);
  background:var(--crimson-dim);padding:1px 6px;border-radius:4px;
  border:1px solid var(--crimson-border);
}
.audit-details{
  font-size:11px;color:var(--text-muted);margin-top:4px;
  font-family:'JetBrains Mono',monospace;
  word-break:break-word;
}
.audit-time{
  font-size:10px;color:var(--text-dim);
  margin-top:6px;font-family:'JetBrains Mono',monospace;
}

/* ══════════════════════════════════════
   MODERATION SEARCH BAR
══════════════════════════════════════ */
.mod-search{
  position:relative;
  margin-bottom:16px;
}
.mod-search-icon{
  position:absolute;
  left:14px;top:50%;transform:translateY(-50%);
  font-size:14px;color:var(--text-dim);
  pointer-events:none;
}
.mod-search input{
  width:100%;
  padding:10px 14px 10px 40px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);
  font-size:13px;font-family:inherit;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.mod-search input::placeholder{
  color:var(--text-dim);
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
}
.mod-search input:focus{
  border-color:var(--crimson-border);
  box-shadow:0 0 0 3px rgba(232,25,44,0.08);
}

/* ══════════════════════════════════════
   UNIFIED MODERATION CARDS (warnings, bans, mutes)
══════════════════════════════════════ */
.mod-list{display:flex;flex-direction:column;gap:14px;}
.mod-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;
  transition:border-color .2s;
}
.mod-card:hover{border-color:var(--crimson-border);}
.mod-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;border-bottom:1px solid var(--border-2);
}
.mod-card-user{flex:1;min-width:0;}
.mod-card-name{
  font-family:'DM Sans',sans-serif;
  font-size:14px;font-weight:700;color:var(--text);
  letter-spacing:.3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mod-card-id{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;color:var(--text-muted);margin-top:3px;
  cursor:pointer;user-select:all;
  transition:color .12s;
}
.mod-card-id:hover{color:var(--crimson);}
.mod-card-counter{text-align:right;flex-shrink:0;}
.mod-card-counter-num{
  font-family:'Bebas Neue',sans-serif;font-size:20px;font-weight:800;
  color:var(--crimson);line-height:1;
}
.mod-card-counter-label{
  font-size:10px;color:var(--text-muted);
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.5px;margin-top:4px;
}
.mod-card-counter-sub{
  font-size:9px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;margin-top:2px;
}
.mod-card-entries{padding:6px 18px 14px;}

.mod-entry{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--border-2);
}
.mod-entry:last-child{border-bottom:none;}
.mod-entry.mod-entry-inactive{opacity:0.7;}
.mod-entry-num{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  font-weight:700;color:var(--crimson);
  min-width:24px;flex-shrink:0;padding-top:2px;
}
.mod-entry-body{flex:1;min-width:0;}
.mod-entry-reason{
  font-size:13px;color:var(--text);line-height:1.5;
  word-break:break-word;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.mod-entry-meta{
  display:flex;flex-direction:column;gap:4px;
  margin-top:8px;
  font-size:11px;color:var(--text-muted);
}
.mod-entry-meta .mod-meta-row strong{
  color:var(--text-dim);font-weight:500;margin-right:4px;
}
.mod-entry-meta .mod-meta-row{
  font-family:'JetBrains Mono',monospace;
}
.mod-pill{
  font-size:9px;font-weight:700;letter-spacing:.5px;
  padding:2px 7px;border-radius:4px;
  font-family:'JetBrains Mono',monospace;
}
.mod-pill-active{
  background:rgba(220,20,60,0.15);color:#FF6B8A;
  border:1px solid rgba(220,20,60,0.25);
}
.mod-pill-inactive{
  background:rgba(120,120,120,0.15);color:var(--text-muted);
  border:1px solid var(--border);
}

/* ══════════════════════════════════════
   EMPTY STATES
══════════════════════════════════════ */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:64px 32px;text-align:center;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
}
.empty-ic{font-size:48px;margin-bottom:16px;opacity:.4;}
.empty-title{font-family:'DM Sans';font-size:16px;font-weight:700;margin-bottom:8px;letter-spacing:.5px;}
.empty-sub{font-size:13px;color:var(--text-muted);max-width:300px;}

/* ══════════════════════════════════════
   FEEDS TAB
══════════════════════════════════════ */
.feed-list{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}

/* Live count above the list */
.feed-summary{
  display:flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.5px;
  color:var(--text-dim);text-transform:uppercase;
  padding:2px 2px 6px;
}
.feed-count{color:var(--text-muted);font-weight:600;}
.feed-count-active{color:var(--green);font-weight:600;}
.feed-count-dot{opacity:.5;}

.feed-card{
  --pf:var(--crimson);
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:15px 18px;
  display:flex;align-items:center;gap:15px;
  box-shadow:inset 3px 0 0 var(--pf);
  transition:border-color .2s,box-shadow .2s,opacity .2s;
}
.feed-card:hover{border-color:color-mix(in srgb,var(--pf) 40%,var(--border));}
.feed-icon{
  width:40px;height:40px;border-radius:10px;
  background:color-mix(in srgb,var(--pf) 15%,transparent);
  color:var(--pf);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.feed-icon svg{width:22px;height:22px;display:block;}
/* Slime platform mascots: let the art breathe — no tile tint, slightly larger. */
.feed-icon.has-img{width:46px;height:46px;background:none;}
.feed-icon.has-img img{width:46px;height:46px;object-fit:contain;display:block;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,0.45));}
.feed-card.is-paused .feed-icon.has-img img{filter:grayscale(1) opacity(.7);}
.feed-info{flex:1;min-width:0;}
.feed-source{
  font-size:13.5px;font-weight:700;margin-bottom:4px;
  font-family:'JetBrains Mono',monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.feed-meta{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:11.5px;color:var(--text-muted);
}
.feed-plat{color:var(--pf);font-weight:700;}
.feed-meta-dot{opacity:.5;}
.feed-arrow{opacity:.55;}
.feed-target{
  color:var(--text);font-weight:600;
  background:var(--surface-3);border-radius:5px;padding:1px 7px;
  max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Pause / resume switch */
.feed-toggle{
  position:relative;flex-shrink:0;
  width:40px;height:23px;border-radius:99px;
  border:1px solid var(--border);background:var(--surface-3);
  cursor:pointer;padding:0;transition:background .2s,border-color .2s;
}
.feed-toggle-knob{
  position:absolute;top:2px;left:2px;
  width:17px;height:17px;border-radius:50%;
  background:var(--text-dim);transition:transform .2s,background .2s;
}
.feed-toggle.on{background:rgba(16,185,129,0.18);border-color:rgba(16,185,129,0.35);}
.feed-toggle.on .feed-toggle-knob{background:var(--green);transform:translateX(17px);}
.feed-toggle:hover{border-color:color-mix(in srgb,var(--green) 40%,var(--border));}
.feed-card.is-paused{opacity:.62;box-shadow:inset 3px 0 0 var(--text-dim);}
.feed-card.is-paused .feed-icon{background:var(--surface-3);color:var(--text-dim);}
.feed-card.is-paused .feed-icon.has-img{background:none;}
.feed-card.is-paused .feed-plat{color:var(--text-dim);}
.feed-del{
  width:30px;height:30px;border-radius:8px;
  background:rgba(232,25,44,0.08);border:1px solid rgba(232,25,44,0.15);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;cursor:pointer;color:var(--crimson);
  transition:all .2s;flex-shrink:0;
}
.feed-del:hover{background:var(--crimson);color:#fff;}
.feed-anime-results{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.feed-anime-row{
  display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer;
  padding:8px 10px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font:inherit;
}
.feed-anime-row:hover{ border-color:rgba(232,25,44,0.4); }
.feed-anime-row img, .feed-anime-ph{
  width:36px; height:50px; object-fit:cover; border-radius:6px; flex-shrink:0;
  background:var(--surface-3); display:flex; align-items:center; justify-content:center;
}
.feed-anime-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.feed-anime-title{ font-weight:700; font-size:13px; }
.feed-anime-sub{ font-size:11px; color:var(--text-muted); }
.feed-anime-empty, .feed-anime-picked{ font-size:12px; color:var(--text-muted); padding:6px 2px; }

/* Add Feed form */
.add-feed-panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;
}

/* Contextual "how to add this" helper under the source box */
.feed-help{
  margin-top:14px;padding:14px 16px;
  background:color-mix(in srgb,var(--crimson) 6%,var(--surface-2));
  border:1px solid var(--border);border-left:3px solid var(--crimson);
  border-radius:10px;
}
.feed-help-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:var(--text);margin-bottom:8px;}
.feed-help-ic{font-size:15px;}
.feed-help-steps{margin:0 0 10px;padding-left:20px;display:flex;flex-direction:column;gap:4px;}
.feed-help-steps li{font-size:12.5px;color:var(--text-muted);line-height:1.5;}
.feed-help-eg{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.feed-help-eg span{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;color:var(--text-dim);}
.feed-help-eg code{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--crimson-2);
  background:var(--surface-3);border:1px solid var(--border);border-radius:6px;padding:3px 9px;}
.feed-help-posts{font-size:12px;color:var(--text-dim);line-height:1.5;}

/* Platform picker — trigger looks like the channel picker; the chooser is a
   fixed overlay (not a dropdown) so the long list isn't clipped by the form. */
.feed-plat-btn{
  --pf:var(--crimson);
  display:flex;align-items:center;gap:10px;
  width:100%;min-height:46px;padding:8px 12px 8px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014)),
    rgba(8,10,14,0.72);
  border:1px solid rgba(255,255,255,0.105);
  border-radius:12px;
  color:var(--text);cursor:pointer;text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.045), 0 1px 0 rgba(0,0,0,0.28);
  transition:border-color .16s, box-shadow .16s;
}
.feed-plat-btn:hover,.feed-plat-btn[aria-expanded="true"]{
  border-color:color-mix(in srgb,var(--pf) 55%,var(--border));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pf) 16%,transparent);
}
.feed-plat-btn-ic{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--pf) 16%,transparent);
}
.feed-plat-btn-ic img{width:28px;height:28px;object-fit:contain;display:block;}
.feed-plat-btn-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.feed-plat-btn-name{font-size:13.5px;font-weight:750;color:var(--text);line-height:1.2;}
.feed-plat-btn-kind{font-size:11px;color:var(--text-muted);line-height:1.2;}
.feed-plat-btn .ch-caret{margin-left:4px;}

#feed-plat-modal{
  display:none;position:fixed;inset:0;z-index:10020;
  align-items:center;justify-content:center;padding:20px;
}
#feed-plat-modal.open{display:flex;}
.feed-plat-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.68);
  backdrop-filter:blur(5px);
  animation:pgFade .2s ease;
}
.feed-plat-modal-card{
  position:relative;z-index:1;
  width:min(760px,100%);
  max-height:min(88vh,820px);
  overflow:auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:26px 26px 22px;
  box-shadow:0 24px 80px rgba(0,0,0,0.55);
  animation:pgSlide .25s cubic-bezier(.2,.9,.3,1);
}
.feed-plat-modal-close{
  position:absolute;top:12px;right:12px;
  width:32px;height:32px;border:none;border-radius:8px;
  background:transparent;color:var(--text-muted);
  font-size:24px;line-height:1;cursor:pointer;
}
.feed-plat-modal-close:hover{color:var(--text);background:var(--surface-2);}
.feed-plat-modal-head{margin:0 28px 18px 0;}
.feed-plat-modal-head h2{
  font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:.6px;
  line-height:1;color:var(--text);margin:0 0 6px;
}
.feed-plat-modal-head p{margin:0;font-size:13px;color:var(--text-muted);}
.feed-plat-modal-body{display:flex;flex-direction:column;gap:16px;}
.feed-plat-group-label{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:8px;
}
.feed-plat-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
}
.feed-plat-opt{
  --pf:var(--crimson);
  display:flex;align-items:center;gap:10px;
  min-height:58px;padding:8px 10px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;color:var(--text);cursor:pointer;text-align:left;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.feed-plat-opt:hover,.feed-plat-opt:focus-visible{
  border-color:color-mix(in srgb,var(--pf) 50%,var(--border));
  background:color-mix(in srgb,var(--pf) 10%,var(--surface-2));
  outline:none;
}
.feed-plat-opt.is-on{
  border-color:color-mix(in srgb,var(--pf) 70%,var(--border));
  background:color-mix(in srgb,var(--pf) 14%,var(--surface-2));
  box-shadow:inset 3px 0 0 var(--pf);
}
.feed-plat-opt.is-soon{
  opacity:.55;cursor:not-allowed;
}
.feed-plat-opt.is-soon:hover{border-color:var(--border);background:var(--surface-2);}
.feed-plat-opt-ic{
  width:36px;height:36px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--pf) 16%,transparent);
}
.feed-plat-opt-ic img{width:30px;height:30px;object-fit:contain;display:block;}
.feed-plat-opt-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.feed-plat-opt-name{
  font-size:13px;font-weight:750;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.feed-plat-opt-kind{font-size:11px;color:var(--text-muted);line-height:1.2;}
.feed-plat-soon{
  flex-shrink:0;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--text-dim);
  background:var(--surface-3);border:1px solid var(--border);
  border-radius:99px;padding:2px 6px;
}
@media (max-width:720px){
  .feed-plat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .feed-plat-modal-card{padding:20px 16px 16px;}
}
@media (max-width:420px){
  .feed-plat-grid{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════
   OWNER PANEL
══════════════════════════════════════ */
.owner-section{display:none;}
.owner-section.visible{display:block;}
.sys-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px;}
.sys-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:20px;position:relative;overflow:hidden;
}
.sys-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.sys-card.c-red::before{background:linear-gradient(90deg,var(--crimson),transparent);}
.sys-card.c-green::before{background:linear-gradient(90deg,var(--green),transparent);}
.sys-card.c-blue::before{background:linear-gradient(90deg,var(--blue),transparent);}
.sys-card.c-yellow::before{background:linear-gradient(90deg,var(--yellow),transparent);}
.sys-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;}
.sys-val{font-family:'Bebas Neue';font-size:28px;font-weight:800;margin-bottom:4px;}
.sys-card.c-red .sys-val{color:var(--crimson);}
.sys-card.c-green .sys-val{color:var(--green);}
.sys-card.c-blue .sys-val{color:var(--blue);}
.sys-card.c-yellow .sys-val{color:var(--yellow);}
.sys-sub{font-size:11px;color:var(--text-muted);}
.sys-bar{height:4px;background:var(--surface-3);border-radius:2px;margin-top:12px;overflow:hidden;}
.sys-bar-fill{height:100%;border-radius:2px;transition:width .5s ease;}
.sys-card.c-red .sys-bar-fill{background:var(--crimson);}
.sys-card.c-green .sys-bar-fill{background:var(--green);}
.sys-card.c-blue .sys-bar-fill{background:var(--blue);}
.sys-card.c-yellow .sys-bar-fill{background:var(--yellow);}

.broadcast-panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;margin-bottom:24px;}
.broadcast-textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--border);
  border-radius:10px;padding:14px;color:var(--text);font-size:14px;
  font-family:'DM Sans',sans-serif;outline:none;resize:vertical;min-height:100px;
  transition:border-color .2s;
}
.broadcast-textarea:focus{border-color:var(--crimson-border);}
.broadcast-textarea::placeholder{color:var(--text-dim);}
/* Game-announcement target-mode selector (radio chips) */
.ga-mode-row{display:flex;flex-wrap:wrap;gap:8px;}
.ga-mode{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 14px;border-radius:10px;font-size:13px;font-weight:600;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);
  transition:border-color .2s,color .2s,background .2s;
}
.ga-mode:hover{border-color:var(--crimson-border);color:var(--text);}
.ga-mode.active{border-color:var(--crimson-border);color:#fff;background:linear-gradient(135deg,var(--surface-2),rgba(232,25,44,0.08));}
.ga-mode input{accent-color:var(--crimson);margin:0;}

/* ═════ OWNER · CIV LOOKUP — detail grid + activity log ═════ */
.civ-detail-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;margin:0 0 14px;
}
.civ-detail-cell{
  background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:8px 10px;
}
.civ-detail-label{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);margin-bottom:2px;}
.civ-detail-val{font-size:13.5px;font-weight:600;color:var(--text);}
.civ-logs-head{
  display:flex;align-items:center;justify-content:space-between;
  margin:16px 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-muted);
}
.civ-logs-refresh{
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
  color:var(--text-muted);cursor:pointer;font-size:13px;line-height:1;padding:5px 9px;transition:.2s;
}
.civ-logs-refresh:hover{border-color:var(--crimson-border);color:#fff;}
/* The separate scrollable box — the page itself never grows with the log. */
.civ-logs-box{
  max-height:270px;overflow-y:auto;overflow-x:hidden;
  background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  padding:4px 2px;
}
.civ-log-row{
  display:flex;align-items:flex-start;gap:9px;padding:8px 12px;
  border-bottom:1px solid var(--border);font-size:12.5px;line-height:1.4;
}
.civ-log-row:last-child{border-bottom:none;}
.civ-log-row.is-actor{border-left:2px solid var(--crimson-border);}
.civ-log-ic{flex-shrink:0;font-size:13px;width:16px;text-align:center;}
.civ-log-text{flex:1;min-width:0;color:var(--text);word-break:break-word;}
.civ-log-time{flex-shrink:0;font-size:11px;color:var(--text-dim);white-space:nowrap;}
.civ-logs-empty{font-size:12.5px;color:var(--text-dim);text-align:center;padding:18px;}
.civ-logs-more{
  margin-top:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
  color:var(--text-muted);cursor:pointer;font-size:12.5px;font-weight:600;padding:8px 20px;transition:.2s;
}
.civ-logs-more:hover{border-color:var(--crimson-border);color:#fff;}
.civ-logs-more:disabled{opacity:.6;cursor:default;}
.broadcast-result{
  display:none;padding:14px 16px;border-radius:10px;margin-top:12px;
  font-size:13px;font-weight:600;font-family:'JetBrains Mono',monospace;
}
.broadcast-result.success{background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.2);color:var(--green);}
.broadcast-result.error{background:var(--crimson-dim);border:1px solid var(--crimson-border);color:var(--crimson);}

.log-list{display:flex;flex-direction:column;gap:8px;}
.log-entry{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:14px 18px;
}
.log-entry-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.log-tag{font-size:10px;font-weight:700;padding:3px 8px;border-radius:5px;font-family:'JetBrains Mono',monospace;letter-spacing:.5px;}
.log-tag.error{background:var(--crimson-dim);color:var(--crimson);border:1px solid var(--crimson-border);}
.log-tag.info{background:rgba(99,102,241,0.1);color:#A5B4FC;border:1px solid rgba(99,102,241,0.2);}
.log-time{font-size:10px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;margin-left:auto;}
.log-msg{font-size:12px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;word-break:break-all;}

.history-list{display:flex;flex-direction:column;gap:8px;}
.history-entry{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:14px 18px;
}
.history-msg{font-size:13px;color:var(--text);margin-bottom:8px;}
.history-meta{display:flex;gap:16px;font-size:11px;font-family:'JetBrains Mono',monospace;}
.history-sent{color:var(--green);}
.history-failed{color:var(--crimson);}
.history-time{color:var(--text-dim);margin-left:auto;}

/* Scrollbar */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.1);}

/* ══════════════════════════════════════
   REACTION ROLES
══════════════════════════════════════ */
.rr-list{display:flex;flex-direction:column;gap:12px;}
.rr-card{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;padding:14px 16px;
}
.rr-card-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:10px;
}
.rr-card-title{
  font-size:14px;font-weight:600;color:var(--text);margin-bottom:6px;
}
.rr-card-meta{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.rr-card-actions{display:flex;gap:4px;flex-shrink:0;}
.rr-icon-btn{
  width:32px;height:32px;border-radius:8px;
  background:var(--surface-3);border:1px solid var(--border);
  color:var(--text);font-size:14px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s, border-color .15s;
}
.rr-icon-btn:hover:not(:disabled){background:var(--crimson-dim);border-color:var(--crimson-border);}
.rr-icon-btn:disabled{opacity:0.4;cursor:not-allowed;}
.rr-icon-danger:hover{background:rgba(232,25,44,0.18);border-color:rgba(232,25,44,0.5);}
.rr-card-buttons{display:flex;flex-wrap:wrap;gap:6px;}
.rr-btn-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:6px;
  font-size:12px;font-family:'DM Sans',sans-serif;
  color:#fff;border:1px solid transparent;
}
.rr-btn-emoji{font-size:13px;}
.rr-btn-arrow{opacity:0.55;}
.rr-btn-roleref{
  font-family:'JetBrains Mono',monospace;font-size:10px;opacity:0.85;
  background:rgba(255,255,255,0.10);padding:2px 6px;border-radius:4px;
}
.rr-btn-primary  {background:#5865F2;}
.rr-btn-secondary{background:#4F545C;}
.rr-btn-success  {background:#3BA55C;}
.rr-btn-danger   {background:#ED4245;}
.rr-pill{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:100px;
  font-size:9px;font-weight:700;letter-spacing:1.2px;font-family:'JetBrains Mono',monospace;
}
.rr-pill-on  {background:rgba(59,165,92,0.18);color:#3BA55C;border:1px solid rgba(59,165,92,0.4);}
.rr-pill-off {background:rgba(255,170,0,0.14);color:#FFA500;border:1px solid rgba(255,170,0,0.35);}
.rr-pill-mode{background:rgba(232,25,44,0.14);color:#E8192C;border:1px solid rgba(232,25,44,0.35);}

/* Editor modal */
.rr-modal-overlay{
  position:fixed;inset:0;z-index:10000;
  background:rgba(0,0,0,0.55);
  display:flex;align-items:center;justify-content:center;
  padding:20px;backdrop-filter:blur(4px);
}
.rr-modal{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;
  width:100%;max-width:760px;max-height:90vh;
  display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
html[data-theme="light"] .rr-modal{
  background:#FFFFFF;border-color:rgba(10,12,18,0.14);
  box-shadow:0 20px 60px rgba(10,12,18,0.20);
}
.rr-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);
}
.rr-modal-title{font-size:16px;font-weight:600;color:var(--text);}
.rr-modal-close{
  width:32px;height:32px;border-radius:8px;
  background:transparent;border:1px solid var(--border);
  color:var(--text);font-size:18px;cursor:pointer;line-height:1;
}
.rr-modal-close:hover{background:rgba(232,25,44,0.18);border-color:rgba(232,25,44,0.5);}
.rr-modal-body{padding:18px 20px;overflow-y:auto;flex:1 1 auto;}
.rr-modal-foot{
  display:flex;justify-content:flex-end;gap:8px;
  padding:14px 20px;border-top:1px solid var(--border);
}

.rr-mode-row{display:flex;gap:10px;flex-wrap:wrap;}
.rr-mode-opt{
  flex:1 1 220px;display:flex;align-items:center;gap:10px;
  padding:10px 12px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface-2);cursor:pointer;font-size:12px;
}
.rr-mode-opt input{flex-shrink:0;}
.rr-mode-opt:has(input:checked){
  border-color:var(--crimson);background:rgba(232,25,44,0.10);
}

.rr-buttons-list{display:flex;flex-direction:column;gap:8px;}
.rr-btn-row{
  display:flex;gap:10px;align-items:center;
  padding:10px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface-2);
}
.rr-btn-row-num{
  width:24px;height:24px;border-radius:50%;
  background:var(--crimson);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex-shrink:0;
}
.rr-btn-row-fields{
  flex:1 1 auto;display:grid;grid-template-columns:1fr 1fr 1fr 100px;gap:8px;
}
.rr-btn-row-fields .rr-btn-field label{
  display:block;font-size:9px;letter-spacing:1.2px;
  color:var(--text-dim);text-transform:uppercase;margin-bottom:4px;
}
.rr-btn-row-controls{display:flex;gap:4px;flex-shrink:0;}
@media (max-width: 720px){
  .rr-btn-row-fields{grid-template-columns:1fr 1fr;}
}

.rr-preview{
  border:1px solid var(--border);border-radius:10px;
  padding:14px;background:var(--surface-2);
}
.rr-preview-embed{
  border-left:4px solid var(--crimson);
  padding:10px 14px;background:var(--surface);border-radius:6px;
}
html[data-theme="light"] .rr-preview-embed{background:#F4F5F8;}
.rr-preview-title{font-size:14px;font-weight:600;margin-bottom:6px;color:var(--text);}
.rr-preview-desc{font-size:13px;color:var(--text);margin-bottom:10px;white-space:pre-wrap;}
.rr-preview-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.rr-preview-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:6px;color:#fff;font-size:12px;font-weight:500;
}
.rr-preview-foot{
  margin-top:8px;font-size:10px;color:var(--text-dim);font-style:italic;
}

/* ══════════════════════════════════════
   CHANNEL PICKER
══════════════════════════════════════ */
.ch-picker-wrap{position:relative;}

/* Multi-channel picker — chips above the picker button */
.multi-ch-picker{position:relative;}
.multi-ch-chips{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;min-height:0;
}
.multi-ch-empty{
  font-size:12px;color:var(--text-dim);
  padding:8px 0;font-style:italic;
}
.multi-ch-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 6px 5px 10px;border-radius:100px;
  background:rgba(232,25,44,0.12);
  border:1px solid rgba(232,25,44,0.35);
  font-size:12px;font-family:'JetBrains Mono',monospace;
  color:var(--text);
  max-width:100%;
}
html[data-theme="light"] .multi-ch-chip{
  background:rgba(232,25,44,0.10);
  border-color:rgba(232,25,44,0.30);
  color:#1a1d24;
}
.multi-ch-chip-ic{font-size:12px;flex-shrink:0;}
.multi-ch-chip-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;
}
.multi-ch-chip-x{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:rgba(255,255,255,0.10);border:none;color:inherit;
  font-size:14px;line-height:1;cursor:pointer;padding:0;
  transition:background .15s;
}
.multi-ch-chip-x:hover{background:rgba(232,25,44,0.4);color:#fff;}
html[data-theme="light"] .multi-ch-chip-x{
  background:rgba(10,12,18,0.08);
}
html[data-theme="light"] .multi-ch-chip-x:hover{
  background:rgba(232,25,44,0.6);color:#fff;
}

.ch-picker-btn{
  display:flex;align-items:center;gap:8px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:10px;padding:10px 14px;
  color:var(--text);font-size:13px;
  font-family:'JetBrains Mono',monospace;
  cursor:pointer;transition:border-color .2s;width:100%;
  text-align:left;
}
.ch-picker-btn:hover{border-color:var(--crimson-border);}
.ch-picker-btn .ch-hash{color:var(--crimson);font-size:14px;flex-shrink:0;}
.ch-picker-btn .ch-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ch-picker-btn .ch-caret{color:var(--text-dim);font-size:10px;flex-shrink:0;}
.ch-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;
  /* High z so it floats above sibling cards / sticky sidebars */
  z-index:9999;
  box-shadow:0 16px 48px rgba(0,0,0,0.6);
  /* Constrain to viewport so very-tall server channel lists don't overflow */
  max-height:min(360px,60vh);
  display:none;
  flex-direction:column;
}
.ch-dropdown.ch-dropdown-portal{
  position:fixed;
  right:auto;
  z-index:11050 !important;
}
.ch-dropdown.open{display:flex;}
.ch-search{
  padding:10px 12px;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.ch-search input{
  width:100%;background:var(--surface-3);border:1px solid var(--border);
  border-radius:8px;padding:7px 12px;color:var(--text);font-size:12px;
  font-family:'JetBrains Mono',monospace;outline:none;
}
.ch-search input::placeholder{color:var(--text-dim);}
.ch-list{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;
  /* Custom scrollbar so users see the scroll affordance */
  scrollbar-width:thin;
  scrollbar-color:rgba(220,20,60,0.5) transparent;
}
.ch-list::-webkit-scrollbar{width:8px;}
.ch-list::-webkit-scrollbar-track{background:transparent;}
.ch-list::-webkit-scrollbar-thumb{
  background:rgba(220,20,60,0.4);border-radius:4px;
}
.ch-list::-webkit-scrollbar-thumb:hover{background:rgba(220,20,60,0.6);}
.ch-category{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--text-muted);
  padding:10px 14px 4px;
}
.ch-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;cursor:pointer;transition:background .15s;
  font-size:13px;font-family:'JetBrains Mono',monospace;
}
.ch-item:hover{background:var(--surface-3);}
.ch-item.selected{color:var(--crimson);}
.ch-item-hash{color:var(--text-dim);font-size:13px;flex-shrink:0;}
.ch-item-name{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ch-clear{
  font-size:11px;color:var(--text-dim);padding:8px 14px;
  border-top:1px solid var(--border);cursor:pointer;
  transition:color .15s;text-align:center;
}
.ch-clear:hover{color:var(--crimson);}

/* ══════════════════════════════════════
   MENTION AUTOCOMPLETE
══════════════════════════════════════ */
.mention-wrap{position:relative;}
.mention-dropdown{
  position:absolute;bottom:calc(100% + 6px);left:0;right:0;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;z-index:9999;overflow:hidden;
  box-shadow:0 -8px 32px rgba(0,0,0,0.5);
  display:none;
}
.mention-dropdown.open{display:block;}
.mention-dropdown-float{
  position:fixed !important;
  bottom:auto !important;
  right:auto !important;
  z-index:4000 !important;
  /* The base rule sets overflow:hidden, which would CLIP a long list rather
     than scroll it once JS caps the height to the space available. */
  overflow-y:auto !important;
  overscroll-behavior:contain;
  box-shadow:0 12px 36px rgba(0,0,0,0.55);
}
.mention-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;cursor:pointer;transition:background .15s;
}
.mention-item:hover,.mention-item.active{background:var(--surface-3);}
.mention-tag{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  color:var(--crimson);background:var(--crimson-dim);
  padding:2px 7px;border-radius:5px;border:1px solid var(--crimson-border);
  flex-shrink:0;
}
.mention-desc{font-size:12px;color:var(--text-muted);}

/* ═════ WELCOME PREVIEW ═════ */
.welcome-msg-wrap .mention-dropdown{
  max-height:240px;overflow-y:auto;
}
.welcome-preview-card{position:sticky;top:20px;min-width:0;overflow:visible;}
.welcome-preview{
  display:flex;background:var(--surface-3);border-radius:8px;
  overflow:hidden;border:1px solid var(--border);
  max-width:100%;min-width:0;
}
.welcome-preview-bar{
  width:4px;background:#DC143C;flex-shrink:0;
}
.welcome-preview-body{
  flex:1;padding:14px 16px;font-size:13px;line-height:1.45;
  min-width:0;
}
.welcome-preview-author{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
.welcome-preview-avatar{
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,#DC143C,#8B0000);flex-shrink:0;
  object-fit:cover;display:block;
}
.welcome-preview-author-name{
  font-size:12px;font-weight:600;color:var(--text-muted);
}
.welcome-preview-title{
  font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px;
  word-break:break-word;
}
.welcome-preview-desc{
  font-size:13px;color:var(--text);margin-bottom:10px;
  white-space:pre-wrap;word-break:break-word;
}
.welcome-preview-desc .mention{
  background:rgba(220,20,60,0.15);color:#FF6B8A;
  padding:0 3px;border-radius:3px;font-weight:500;
}
.welcome-preview-desc .ch-mention{
  background:rgba(88,101,242,0.15);color:#7289DA;
  padding:0 3px;border-radius:3px;font-weight:500;
}
/* Global Discord-token chips & custom-emoji images, used wherever saved message
   content is rendered in dashboard lists/previews (stickies, counters, schedule…). */
.mention{
  background:rgba(220,20,60,0.15);color:#FF6B8A;
  padding:0 3px;border-radius:3px;font-weight:500;
}
.ch-mention{
  background:rgba(88,101,242,0.15);color:#7289DA;
  padding:0 3px;border-radius:3px;font-weight:500;
}
.dc-emoji{
  width:1.35em;height:1.35em;vertical-align:-0.28em;
  object-fit:contain;display:inline-block;
}
.welcome-preview-fields{
  display:flex;gap:18px;margin-bottom:10px;flex-wrap:wrap;
}
.welcome-preview-field-name{
  font-size:11px;font-weight:700;color:var(--text);margin-bottom:2px;
}
.welcome-preview-field-val{
  font-size:12px;color:var(--text-muted);
}
.welcome-preview-footer{
  font-size:11px;color:var(--text-dim);padding-top:8px;
  border-top:1px solid rgba(255,255,255,0.05);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.wprev-ficon{ width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0; }
.welcome-ch-item-hash{color:var(--text-muted);margin-right:4px;}

/* ═════ MESSAGE-BUBBLE PREVIEW (birthdays, feeds, anything text-only) ═════ */
.preview-side{position:sticky;top:20px;}
.msg-bubble{
  display:flex;gap:12px;padding:12px 14px;
  background:var(--surface-3);border:1px solid var(--border);
  border-radius:8px;
}
.msg-bubble-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#DC143C,#8B0000);
}
.msg-bubble-body{flex:1;min-width:0;}
.msg-bubble-author{
  display:flex;align-items:center;gap:6px;margin-bottom:3px;
}
.msg-bubble-name{
  font-size:13px;font-weight:600;color:#FF6B8A;
}
.msg-bubble-badge{
  font-size:9px;font-weight:700;color:#FFFFFF;
  background:#5865F2;padding:1px 5px;border-radius:3px;
  letter-spacing:0.5px;
}
.msg-bubble-time{
  font-size:11px;color:var(--text-dim);margin-left:4px;
}
.msg-bubble-content{
  font-size:13px;line-height:1.45;color:var(--text);
  word-break:break-word;white-space:pre-wrap;
}
.msg-bubble-content .mention{
  background:rgba(220,20,60,0.15);color:#FF6B8A;
  padding:0 3px;border-radius:3px;font-weight:500;
}
.msg-bubble-content .ch-mention{
  background:rgba(88,101,242,0.15);color:#7289DA;
  padding:0 3px;border-radius:3px;font-weight:500;
}

/* ═════ BOT SUGGESTIONS ═════ */
.botsugg-list{display:flex;flex-direction:column;gap:12px;}
.botsugg-card{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:10px;padding:16px 18px;
}
.botsugg-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:12px;margin-bottom:8px;
}
.botsugg-meta{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--text-dim);}
.botsugg-meta strong{color:var(--text-muted);font-weight:500;}
.botsugg-id{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--text-dim);background:var(--surface-3);
  padding:2px 6px;border-radius:4px;
}
.botsugg-status{
  font-size:10px;font-weight:700;letter-spacing:0.6px;
  padding:3px 8px;border-radius:5px;flex-shrink:0;
}
.botsugg-status.pending{background:rgba(245,158,11,0.15);color:#F59E0B;}
.botsugg-status.approved{background:rgba(16,185,129,0.15);color:#10B981;}
.botsugg-status.rejected{background:rgba(239,68,68,0.15);color:#EF4444;}
.botsugg-text{
  font-size:14px;color:var(--text);line-height:1.5;
  white-space:pre-wrap;word-break:break-word;
  padding:8px 0;border-top:1px solid var(--border);margin-top:4px;
}
.botsugg-decision{
  margin-top:8px;padding-top:10px;border-top:1px solid var(--border);
  font-size:12px;color:var(--text-muted);
}
.botsugg-decision-reason{
  font-size:12px;color:var(--text-dim);font-style:italic;margin-top:4px;
}
.botsugg-actions{display:flex;gap:8px;margin-top:12px;}
.botsugg-btn{
  padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;
  border:1px solid;cursor:pointer;font-family:inherit;
}
.botsugg-btn.approve{
  background:rgba(16,185,129,0.1);border-color:rgba(16,185,129,0.3);color:#10B981;
}
.botsugg-btn.approve:hover{background:rgba(16,185,129,0.2);}
.botsugg-btn.reject{
  background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.3);color:#EF4444;
}
.botsugg-btn.reject:hover{background:rgba(239,68,68,0.2);}

/* ═════ POLLS TAB LAYOUT ═════ */
.poll-head-stats{
  display:flex; flex-wrap:wrap; gap:8px 14px; margin-left:auto;
  font-size:12px; color:var(--text-dim);
}
.poll-stat strong{ color:var(--text); font-weight:700; margin-right:4px; }
.poll-make-layout{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,380px); gap:20px; align-items:start;
}
.poll-preview-col{ position:sticky; top:20px; }
.poll-preview-col .field-label{ margin-bottom:8px; }
.poll-more{
  margin:4px 0 12px; border:1px solid var(--border); border-radius:12px;
  background:var(--surface-2);
}
.poll-more > summary{
  list-style:none; cursor:pointer; padding:11px 14px;
  font-size:13px; font-weight:650; color:var(--text);
}
.poll-more > summary::-webkit-details-marker{ display:none; }
.poll-more > summary::after{ content:'▸'; float:right; color:var(--text-dim); }
.poll-more[open] > summary::after{ content:'▾'; }
.poll-more-body{ padding:0 14px 14px; }
.poll-make-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.poll-make-actions .save-btn{ flex:1 1 160px; }
.poll-schedule-btn{
  background:rgba(99,102,241,0.15) !important; color:#6366F1 !important;
  border:1px solid rgba(99,102,241,0.3) !important;
}
.poll-schedule-btn:disabled{ opacity:.45; cursor:not-allowed; }
@media (max-width:1000px){
  .poll-make-layout{ grid-template-columns:1fr; }
  .poll-preview-col{ position:static; }
  .poll-head-stats{ margin-left:0; width:100%; }
}

/* ═════ POLLS LIST ═════ */
.poll-list{display:flex;flex-direction:column;gap:14px;}
.poll-card{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;padding:18px 20px;
}
.poll-card-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  margin-bottom:6px;
}
.poll-card-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.poll-card-status{
  font-size:10px;font-weight:700;letter-spacing:0.6px;
  padding:3px 8px;border-radius:5px;flex-shrink:0;
}
.poll-card-status.active{background:rgba(16,185,129,0.15);color:#10B981;}
.poll-card-status.ended{background:rgba(120,120,120,0.15);color:var(--text-muted);}
.poll-card-q{
  font-size:15px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.poll-card-actions{display:flex;gap:6px;}
.poll-del{
  background:transparent;border:none;color:var(--text-muted);
  cursor:pointer;font-size:18px;padding:4px 8px;border-radius:6px;
}
.poll-del:hover{background:rgba(220,20,60,0.15);color:#FF6B8A;}
.poll-card-meta{
  display:flex;flex-wrap:wrap;gap:8px;
  font-size:11px;color:var(--text-dim);
  margin-bottom:14px;
}
.poll-options-list{display:flex;flex-direction:column;gap:8px;}
.poll-option-head{
  display:flex;justify-content:space-between;
  font-size:12px;margin-bottom:4px;
}
.poll-option-name{color:var(--text);font-weight:500;}
.poll-option-count{color:var(--text-muted);}
.poll-option-bar{
  height:6px;background:var(--surface-3);
  border-radius:3px;overflow:hidden;
}
.poll-option-fill{
  height:100%;
  background:linear-gradient(90deg,#DC143C,#FF6B8A);
  transition:width 0.3s ease;
}
.poll-option-voters{
  font-size:10px;color:var(--text-dim);
  margin-top:6px;line-height:1.5;
  display:flex;flex-wrap:wrap;gap:4px;
}
.poll-voter-pill{
  background:var(--surface-3);
  padding:2px 8px;border-radius:10px;
  font-family:'JetBrains Mono',monospace;
}
.poll-scheduled-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;margin-bottom:8px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
}
.poll-scheduled-row:last-child{margin-bottom:0;}
.poll-scheduled-info{flex:1;min-width:0;}
.poll-scheduled-q{
  font-size:13px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px;
}
.poll-scheduled-meta{font-size:11px;color:var(--text-dim);}
.poll-scheduled-actions{display:flex;gap:6px;}
.poll-scheduled-btn{
  background:var(--surface-3);color:var(--text);
  border:1px solid var(--border);border-radius:6px;
  padding:6px 12px;font-size:11px;cursor:pointer;font-family:inherit;
}
.poll-scheduled-btn.publish:hover{background:#10B981;border-color:#10B981;color:white;}
.poll-scheduled-btn.cancel:hover{background:rgba(239,68,68,0.2);border-color:rgba(239,68,68,0.5);color:#EF4444;}

/* ═════ POLL MAKER PREVIEW ═════ */
.poll-preview-card{
  display:flex;background:var(--surface-3);border-radius:8px;
  overflow:hidden;border:1px solid var(--border);min-height:120px;
}
.poll-preview-bar{
  width:4px;background:#DC143C;flex-shrink:0;
}
.poll-preview-body{flex:1;padding:14px 18px;min-width:0;}
.poll-preview-author{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
}
.poll-preview-avatar{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#DC143C,#8B0000);
}
.poll-preview-name{
  font-size:12px;font-weight:600;color:#FF6B8A;
}
.poll-preview-badge{
  font-size:9px;font-weight:700;color:#fff;
  background:#5865F2;padding:1px 5px;border-radius:3px;
}
.poll-preview-title{
  font-size:15px;font-weight:600;color:var(--text);margin-bottom:10px;
  word-break:break-word;
}
.poll-preview-options{
  display:flex;flex-direction:column;gap:6px;margin-bottom:10px;
}
.poll-preview-opt{
  display:flex;align-items:center;gap:8px;
  background:var(--surface-2);border:1px solid var(--border);
  padding:7px 12px;border-radius:6px;font-size:13px;
}
.poll-preview-opt-emoji{
  font-size:14px;flex-shrink:0;width:18px;text-align:center;
}
.poll-preview-opt-text{flex:1;color:var(--text);word-break:break-word;}
.poll-preview-footer{
  font-size:11px;color:var(--text-dim);
  border-top:1px solid rgba(255,255,255,0.05);padding-top:8px;
}
.poll-preview-options .mention{
  background:rgba(220,20,60,0.15);color:#FF6B8A;
  padding:0 3px;border-radius:3px;font-weight:500;
}
.poll-preview-options .ch-mention{
  background:rgba(88,101,242,0.15);color:#7289DA;
  padding:0 3px;border-radius:3px;font-weight:500;
}
.poll-preview-options .everyone-mention{
  background:rgba(245,158,11,0.15);color:#F59E0B;
  padding:0 3px;border-radius:3px;font-weight:500;
}
.poll-preview-title .mention,
.poll-preview-title .ch-mention,
.poll-preview-title .everyone-mention{
  font-size:14px;padding:0 4px;
}

/* ═════ BACKUP MODULE ═════ */
.backup-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
@media (max-width:1100px){
  .backup-grid{grid-template-columns:1fr;}
}
.backup-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;margin-bottom:8px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
}
.backup-row-info{flex:1;min-width:0;}
.backup-row-name{
  font-size:12px;font-weight:600;color:var(--text);
  font-family:'JetBrains Mono',monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.backup-row-meta{
  font-size:11px;color:var(--text-dim);margin-top:2px;
}
.backup-row-actions{display:flex;gap:6px;}
.backup-btn-sm{
  background:var(--surface-3);color:var(--text);
  border:1px solid var(--border);border-radius:6px;
  padding:5px 12px;font-size:11px;cursor:pointer;
  text-decoration:none;display:inline-block;
}
.backup-btn-sm:hover{background:var(--crimson);border-color:var(--crimson);}
.backup-empty{
  font-size:12px;color:var(--text-dim);
  text-align:center;padding:24px 14px;
  background:var(--surface-2);border:1px dashed var(--border);border-radius:8px;
}

/* ═════ AUTO ROLE LIST ═════ */
.autorole-list{display:flex;flex-direction:column;gap:8px;}
.autorole-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--border);
}
.autorole-row .ar-dot{
  width:12px;height:12px;border-radius:50%;flex-shrink:0;
  background:#7289DA;
}
.autorole-row .ar-name{
  flex:1;font-size:13px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.autorole-row select.ar-target{
  background:var(--surface-3);color:var(--text);
  border:1px solid var(--border);border-radius:6px;
  padding:5px 8px;font-size:12px;font-family:inherit;
}
.autorole-row .ar-remove{
  background:transparent;border:none;color:var(--text-muted);
  cursor:pointer;font-size:18px;padding:4px 8px;border-radius:6px;
}
.autorole-row .ar-remove:hover{background:rgba(220,20,60,0.15);color:#FF6B8A;}
.autorole-empty{
  text-align:center;padding:24px 18px;
  font-size:13px;color:var(--text-dim);
  background:var(--surface-2);border:1px dashed var(--border);
  border-radius:10px;
}

/* ══════════════════════════════════════
   RESPONSIVE — tablet and phone breakpoints
   for the new Tier 1 + Tier 2 modules
   ══════════════════════════════════════ */

/* Tablet — stack the 2-column settings layouts so info cards drop below
   the config panel instead of squeezing it. */
@media (max-width: 980px) {
  .settings-layout { grid-template-columns: 1fr; }
  .ach-setup-extra { grid-template-columns: 1fr; }
  .module-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .sys-grid { grid-template-columns: 1fr 1fr; }
  .dash-topbar { padding: 14px 20px; }
  .page-header { padding: 18px 20px 0; }
  .config-panel,
  .info-card { border-radius: 12px; }
}

/* Tighter phone breakpoint — collapse every interior grid to one column,
   hide the desktop sidebar (users can still navigate by URL or once we add
   a hamburger), and shrink modal padding. The trade-off: no in-page tab
   switching on small phones — that needs a hamburger which is a JS change. */
@media (max-width: 680px) {
  .sidebar { display: none; }
  .dash-topbar { padding: 12px 16px; }
  .topbar-section { font-size: 11px; }
  .topbar-guild { display: none; }
  .page-header { padding: 16px 16px 0; }
  .page-title { font-size: 22px; }
  .cp-body, .cp-head { padding-left: 16px; padding-right: 16px; }
  .stat-grid { grid-template-columns: 1fr; }
  .sys-grid { grid-template-columns: 1fr; }
  .fields-grid { grid-template-columns: 1fr; }

  /* Reaction-role builder: stack the button-row fields and controls */
  .rr-btn-row { flex-direction: column; align-items: stretch; }
  .rr-btn-row-num { align-self: flex-start; }
  .rr-btn-row-fields { grid-template-columns: 1fr; }
  .rr-btn-row-controls { justify-content: flex-end; }

  /* Reaction-role card list: action buttons drop below the title */
  .rr-card-head { flex-direction: column; align-items: stretch; }
  .rr-card-actions { justify-content: flex-end; }

  /* Auto-mod: the per-rule grids (3-column inputs) collapse */
  .field-row[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Modal: more breathing room on a small screen */
  .rr-modal { max-height: 95vh; }
  .rr-modal-body { padding: 14px 16px; }
  .rr-modal-foot { padding: 12px 16px; flex-wrap: wrap; }
  .rr-modal-foot .save-btn { flex: 1 1 100%; }

  /* Multi-channel chips wrap more aggressively */
  .multi-ch-chip-name { max-width: 140px; }

  /* Page header sub-title can wrap onto multiple lines */
  .page-sub { font-size: 12px; line-height: 1.4; }
}

/* ████████████████████████████████████████████████████████████████████████████
   CYNDRIX RESKIN LAYER · 2026-06 · dark-only
   Appended after the original sheet so these rules win on equal specificity.
   Restyles chrome (sidebar/topbar/picker), the Overview centerpiece, the
   Statistics area, and the responsive drawer. Nothing here renames an element
   id — it only reshapes wrappers + repaints surfaces.
   ████████████████████████████████████████████████████████████████████████████ */

/* ─── Atmosphere ───────────────────────────────────────────────────────────
   Layered crimson + gold radial wash with a very slow drift, plus a fine
   grain overlay for depth. Sits behind everything (z-index 0). */
body::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 600px at 78% -8%, rgba(232,25,44,0.16), transparent 60%),
    radial-gradient(700px 520px at 8% 4%, rgba(232,25,44,0.08), transparent 58%),
    radial-gradient(800px 600px at 92% 108%, rgba(255,215,0,0.05), transparent 60%);
  animation: ovx-drift 26s var(--ease) infinite alternate;
}
@keyframes ovx-drift{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,-22px,0); } }
.bg-glow{ background:radial-gradient(circle, rgba(232,25,44,0.10) 0%, transparent 70%); width:720px; height:720px; }
.bg-glow-2{ background:radial-gradient(circle, rgba(255,215,0,0.045) 0%, transparent 70%); }
.bg-grid{ opacity:.6; }
/* Keep real content above the wash */
#view-picker, #view-dashboard, .dash-main, .sidebar{ position:relative; z-index:1; }

/* ─── Reusable glass-card mixin via class ─────────────────────────────────── */
.ovx-card{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 40%),
    var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:var(--r-lg);
  backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.ovx-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--stroke-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.5; pointer-events:none; transition:opacity .35s var(--ease);
}
.ovx-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-glow); border-color:var(--crimson-border); }
.ovx-card:hover::before{ opacity:1; }

/* ═══════════════════ SIDEBAR / CHROME ═══════════════════ */
.sidebar{
  background:
    linear-gradient(180deg, rgba(232,25,44,0.05), transparent 220px),
    rgba(11,13,18,0.86);
  border-right:1px solid var(--glass-brd);
  backdrop-filter:blur(18px);
}
/* Desktop app-shell: lock the dashboard to one viewport tall so the sidebar is
   full-height and ONLY .dash-main scrolls. Without this the sidebar relies on
   `position:sticky`, which breaks when the body is the scroller (e.g. "Request
   Desktop Site" on a phone, where body{overflow-x:hidden} makes the body scroll)
   — leaving the sidebar scrolled away with an empty column beneath it. */
@media (min-width:901px){
  #view-dashboard.active{ height:100vh; min-height:0; overflow:hidden; }
  .sidebar{ height:100vh; position:relative; top:auto; }
  .dash-main{ height:100vh; }
}
.server-switcher{
  background:var(--glass-2);
  border:1px solid var(--glass-brd);
  border-radius:var(--r-md);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.server-switcher:hover{ border-color:var(--crimson-border); background:rgba(232,25,44,0.06); }
.nav-group-header{ border-radius:var(--r-sm); letter-spacing:.5px; }
.nav-group-count{
  background:rgba(255,255,255,0.05); color:var(--text-dim);
  border-radius:999px; padding:1px 7px; font-size:10px;
}
.nav-item{
  border-radius:var(--r-sm);
  transition:background .2s var(--ease), color .2s var(--ease), padding .2s var(--ease);
}
.nav-item:hover{ background:rgba(255,255,255,0.045); }
.nav-item.active{
  background:linear-gradient(90deg, rgba(232,25,44,0.18), rgba(232,25,44,0.04));
  color:#fff; box-shadow:inset 0 0 0 1px var(--crimson-border);
}
.nav-item.active::before{
  content:""; position:absolute; left:0; top:18%; bottom:18%; width:3px;
  border-radius:0 3px 3px 0; background:var(--grad-crimson);
  box-shadow:0 0 10px var(--glow-crimson);
}
.nav-item{ position:relative; }

/* Sidebar tier badge — crimson for Premium, gold for Ultimate (set via data-tier in B4) */
#nav-billing-tier{
  background:rgba(255,255,255,0.06); color:var(--text-muted);
  border:1px solid var(--glass-brd); border-radius:999px;
  font-size:9px; font-weight:800; letter-spacing:.6px; padding:2px 8px;
}
#nav-billing-tier[data-tier="tier2"]{ background:var(--grad-crimson); color:#fff; border-color:transparent; box-shadow:0 4px 14px -4px var(--glow-crimson); }
#nav-billing-tier[data-tier="tier3"]{ background:var(--grad-gold); color:#1a1206; border-color:transparent; box-shadow:0 4px 14px -4px rgba(255,215,0,.4); }

/* Generic premium nav badge pills (PREMIUM / ULTIMATE) */
.nav-badge{ border-radius:999px; font-weight:800; letter-spacing:.5px; }
.nav-badge.tier-premium{ background:var(--grad-crimson); color:#fff; }
.nav-badge.tier-ultimate{ background:var(--grad-gold); color:#1a1206; }

/* Topbar — glass bar + hamburger */
.dash-topbar{
  background:rgba(8,10,14,0.72);
  backdrop-filter:blur(18px) saturate(1.1);
  border:1px solid var(--glass-brd);
}
.topbar-section{
  font-family:'Bebas Neue',sans-serif; letter-spacing:2px; font-size:20px;
  background:linear-gradient(90deg,#fff,var(--crimson-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.topbar-guild{
  background:var(--glass-2); border:1px solid var(--glass-brd); border-radius:999px;
}
.dash-hamburger{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; flex-shrink:0; margin-right:6px;
  background:var(--glass-2); border:1px solid var(--glass-brd); border-radius:12px;
  color:var(--text); font-size:18px; cursor:pointer; transition:.2s var(--ease);
}
.dash-hamburger:hover{ border-color:var(--crimson-border); color:#fff; }

/* Desktop sidebar collapse — separate from the mobile hamburger/drawer above
   (that's an overlay; this reclaims the sidebar's width for the content). */
.sb-collapse-btn{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex-shrink:0; margin-right:10px;
  background:var(--glass-2); border:1px solid var(--glass-brd); border-radius:9px;
  color:var(--text-muted); font-size:12px; cursor:pointer; transition:.2s var(--ease);
}
.sb-collapse-btn:hover{ border-color:var(--crimson-border); color:#fff; }
#view-dashboard.sidebar-collapsed .sb-collapse-btn{ transform:rotate(180deg); }
@media (max-width:900px){ .sb-collapse-btn{ display:none; } }
.dash-scrim{
  display:none; position:fixed; inset:0; z-index:40;
  background:rgba(4,5,8,0.6); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .3s var(--ease);
}
.dash-scrim.show{ display:block; opacity:1; }

/* ═══════════════════ OVERVIEW CENTERPIECE ═══════════════════ */
.ovx{ display:flex; flex-direction:column; gap:30px; }
.ovx > *{ animation:ovx-rise .55s var(--ease-out) both; }
.ovx > *:nth-child(1){ animation-delay:.02s; }
.ovx > *:nth-child(2){ animation-delay:.07s; }
.ovx > *:nth-child(3){ animation-delay:.12s; }
.ovx > *:nth-child(4){ animation-delay:.17s; }
.ovx > *:nth-child(5){ animation-delay:.22s; }
.ovx > *:nth-child(6){ animation-delay:.27s; }
@keyframes ovx-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* Greeting hero */
.ovx-hero{
  position:relative; overflow:hidden;
  padding:30px 32px; border-radius:var(--r-xl);
  background:
    radial-gradient(560px 280px at 88% -40%, rgba(232,25,44,0.22), transparent 60%),
    linear-gradient(120deg, rgba(20,23,31,0.86), rgba(12,14,19,0.86));
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-md);
}
.ovx-hero::after{
  content:""; position:absolute; right:-60px; top:-80px; width:320px; height:320px;
  background:radial-gradient(circle, rgba(232,25,44,0.28), transparent 65%);
  filter:blur(6px); pointer-events:none;
}
.ovx-hero-greet{
  font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--crimson-2); display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.ovx-hero-title{
  font-family:'Bebas Neue',sans-serif; font-size:clamp(34px,5vw,52px); line-height:.98;
  letter-spacing:1px; color:#fff; margin:0;
  background:linear-gradient(90deg,#fff 30%, #FFD9DD 70%, var(--crimson-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.ovx-hero-meta{
  margin-top:12px; display:flex; flex-wrap:wrap; gap:18px;
  font-size:13px; color:var(--text-muted);
}
.ovx-hero-meta b{ color:var(--text); font-weight:700; }
.ovx-hero-meta .dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); margin-right:7px; vertical-align:middle; }

/* Stat cards */
.ovx-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.ovx-stat{ padding:20px; border-radius:var(--r-lg); }
.ovx-stat-ic{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  font-size:19px; margin-bottom:16px;
  background:var(--crimson-dim); color:var(--crimson-2);
  box-shadow:inset 0 0 0 1px var(--crimson-border);
}
.ovx-stat.c-members  .ovx-stat-ic{ background:rgba(99,102,241,0.14); color:#8b8df6; box-shadow:inset 0 0 0 1px rgba(99,102,241,.3); }
.ovx-stat.c-warns    .ovx-stat-ic{ background:rgba(245,158,11,0.14); color:#fbbf24; box-shadow:inset 0 0 0 1px rgba(245,158,11,.3); }
.ovx-stat.c-mutes    .ovx-stat-ic{ background:rgba(20,184,166,0.14); color:#2dd4bf; box-shadow:inset 0 0 0 1px rgba(20,184,166,.3); }
.ovx-stat-val{ font-family:'Bebas Neue',sans-serif; font-size:40px; line-height:1; color:#fff; letter-spacing:1px; }
.ovx-stat-lbl{ margin-top:6px; font-size:13px; font-weight:600; color:var(--text); }
.ovx-stat-sub{ margin-top:2px; font-size:11px; color:var(--text-dim); }
.ovx-stat .soon{ font-size:9px; font-weight:800; letter-spacing:.5px; color:var(--text-dim); border:1px solid var(--border); border-radius:999px; padding:1px 7px; }

/* Community banner */
.ovx-banner{
  display:flex; align-items:center; gap:18px; padding:20px 24px;
  border-radius:var(--r-lg);
  background:
    radial-gradient(400px 200px at 0% 0%, rgba(232,25,44,0.2), transparent 60%),
    linear-gradient(120deg, rgba(20,23,31,0.9), rgba(12,14,19,0.9));
  border:1px solid var(--crimson-border);
}
.ovx-banner-ic{ width:48px; height:48px; flex-shrink:0; border-radius:14px; display:grid; place-items:center; font-size:24px; background:var(--grad-crimson); box-shadow:0 8px 24px -6px var(--glow-crimson); }
.ovx-banner-tx{ flex:1; }
.ovx-banner-tx h3{ margin:0; font-size:16px; color:#fff; }
.ovx-banner-tx p{ margin:3px 0 0; font-size:13px; color:var(--text-muted); }
.ovx-banner-btn{
  flex-shrink:0; padding:11px 20px; border-radius:12px; border:none; cursor:pointer;
  background:var(--grad-crimson); color:#fff; font-weight:700; font-size:13px; text-decoration:none;
  box-shadow:0 8px 22px -8px var(--glow-crimson); transition:.25s var(--ease);
}
.ovx-banner-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px var(--glow-crimson); }

/* Low / out-of AI Action Points warning banner (amber when low, red when out) */
.ovx-apwarn{
  display:flex; align-items:center; gap:18px; padding:18px 22px; margin-bottom:18px;
  border-radius:var(--r-lg);
  background:
    radial-gradient(420px 200px at 0% 0%, rgba(245,176,65,0.18), transparent 62%),
    linear-gradient(120deg, rgba(28,24,14,0.92), rgba(14,13,10,0.92));
  border:1px solid rgba(245,176,65,0.45);
}
/* The display:flex above outranks the UA [hidden]{display:none}, so the JS
   `hidden` toggle wouldn't actually hide it — re-assert it explicitly. */
.ovx-apwarn[hidden]{ display:none; }
.ovx-apwarn[data-level="out"]{
  background:
    radial-gradient(420px 200px at 0% 0%, rgba(232,25,44,0.24), transparent 62%),
    linear-gradient(120deg, rgba(30,16,18,0.94), rgba(15,11,12,0.94));
  border-color:var(--crimson-border);
}
.ovx-apwarn-ic{
  width:46px; height:46px; flex-shrink:0; border-radius:14px; display:grid; place-items:center; font-size:23px;
  background:linear-gradient(135deg,#F5B041,#C77F12); box-shadow:0 8px 24px -8px rgba(245,176,65,0.5);
}
.ovx-apwarn[data-level="out"] .ovx-apwarn-ic{ background:var(--grad-crimson); box-shadow:0 8px 24px -6px var(--glow-crimson); }
.ovx-apwarn-tx{ flex:1; }
.ovx-apwarn-tx h3{ margin:0; font-size:16px; color:#fff; }
.ovx-apwarn-tx p{ margin:3px 0 0; font-size:13px; color:var(--text-muted); }
.ovx-apwarn-btn{
  flex-shrink:0; padding:11px 20px; border-radius:12px; border:none; cursor:pointer;
  background:linear-gradient(135deg,#F5B041,#C77F12); color:#1a1206; font-weight:700; font-size:13px; text-decoration:none;
  box-shadow:0 8px 22px -8px rgba(245,176,65,0.5); transition:.25s var(--ease);
}
.ovx-apwarn[data-level="out"] .ovx-apwarn-btn{ background:var(--grad-crimson); color:#fff; box-shadow:0 8px 22px -8px var(--glow-crimson); }
.ovx-apwarn-btn:hover{ transform:translateY(-2px); }
@media (max-width:640px){ .ovx-apwarn{ flex-wrap:wrap; } .ovx-apwarn-btn{ width:100%; text-align:center; } }

/* Section header */
.ovx-sec{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:-12px; }
.ovx-sec-title{ display:flex; align-items:center; gap:10px; font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:1.5px; color:#fff; }
.ovx-sec-title .ic{ color:var(--crimson-2); }
.ovx-pill{ font-family:'DM Sans',sans-serif; font-size:10px; font-weight:800; letter-spacing:.5px; color:var(--crimson-2); background:var(--crimson-dim); border:1px solid var(--crimson-border); border-radius:999px; padding:2px 9px; }
.ovx-sec-link{ font-size:12px; color:var(--text-dim); }

/* Recommendations */
.ovx-recs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.ovx-rec{ padding:18px; border-radius:var(--r-md); display:flex; flex-direction:column; gap:14px; }
.ovx-rec-top{ display:flex; gap:13px; }
.ovx-rec-ic{ width:38px; height:38px; flex-shrink:0; border-radius:11px; display:grid; place-items:center; font-size:17px; }
.ovx-rec-ic.red{ background:var(--crimson-dim); color:var(--crimson-2); box-shadow:inset 0 0 0 1px var(--crimson-border); }
.ovx-rec-ic.orange{ background:rgba(249,115,22,0.14); color:#fb923c; box-shadow:inset 0 0 0 1px rgba(249,115,22,.3); }
.ovx-rec-ic.blue{ background:rgba(99,102,241,0.14); color:#8b8df6; box-shadow:inset 0 0 0 1px rgba(99,102,241,.3); }
.ovx-rec-ic.gold{ background:var(--gold-dim); color:var(--gold); box-shadow:inset 0 0 0 1px rgba(255,215,0,.3); }
.ovx-rec-title{ font-size:14px; font-weight:700; color:#fff; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ovx-rec-tag{ font-size:9px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; border-radius:999px; padding:2px 7px; }
.ovx-rec-tag.high{ background:var(--crimson-dim); color:var(--crimson-2); }
.ovx-rec-tag.medium{ background:rgba(245,158,11,0.14); color:#fbbf24; }
.ovx-rec-tag.low{ background:rgba(99,102,241,0.14); color:#8b8df6; }
.ovx-rec-body{ margin-top:5px; font-size:12.5px; line-height:1.5; color:var(--text-muted); }
.ovx-rec-cta{ align-self:flex-start; font-size:12px; font-weight:700; color:var(--crimson-2); cursor:pointer; transition:gap .2s var(--ease); display:inline-flex; align-items:center; gap:5px; }
.ovx-rec:hover .ovx-rec-cta{ gap:9px; }

/* Manage by Area */
.ovx-areas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.ovx-area{ padding:0; overflow:hidden; border-radius:var(--r-lg); }
.ovx-area-head{ position:relative; padding:18px 18px 16px; overflow:hidden; }
.ovx-area-glow{ position:absolute; inset:0; opacity:.5; pointer-events:none; }
.ovx-area.protection  .ovx-area-glow{ background:radial-gradient(140px 90px at 85% 0%, rgba(232,25,44,0.5), transparent 70%); }
.ovx-area.engagement  .ovx-area-glow{ background:radial-gradient(140px 90px at 85% 0%, rgba(249,115,22,0.45), transparent 70%); }
.ovx-area.community   .ovx-area-glow{ background:radial-gradient(140px 90px at 85% 0%, rgba(99,102,241,0.45), transparent 70%); }
.ovx-area.growth      .ovx-area-glow{ background:radial-gradient(140px 90px at 85% 0%, rgba(168,85,247,0.45), transparent 70%); }
.ovx-area-name{ position:relative; font-size:15px; font-weight:800; color:#fff; }
.ovx-area-count{ position:relative; margin-top:3px; font-size:11px; color:var(--text-muted); }
.ovx-area-items{ padding:6px; display:flex; flex-direction:column; }
.ovx-area-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; border-radius:10px; cursor:pointer; font-size:13px; color:var(--text); transition:background .18s var(--ease); }
.ovx-area-item:hover{ background:rgba(255,255,255,0.045); }
.ovx-area-item .lhs{ display:flex; align-items:center; gap:9px; min-width:0; }
.ovx-dot{ width:7px; height:7px; border-radius:50%; background:var(--text-dim); flex-shrink:0; transition:.2s var(--ease); }
.ovx-dot.on{ background:var(--green); box-shadow:0 0 8px var(--green); }
.ovx-reco-label{ font-size:9px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--crimson-2); background:var(--crimson-dim); border-radius:999px; padding:2px 7px; flex-shrink:0; }

/* Quick Actions */
.ovx-qa{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
.ovx-qa-item{ display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:var(--r-md); background:var(--glass-2); border:1px solid var(--glass-brd); cursor:pointer; transition:.25s var(--ease); }
.ovx-qa-item:hover{ transform:translateY(-2px); border-color:var(--crimson-border); background:rgba(232,25,44,0.06); }
.ovx-qa-ic{ width:38px; height:38px; flex-shrink:0; border-radius:11px; display:grid; place-items:center; font-size:18px; background:var(--crimson-dim); box-shadow:inset 0 0 0 1px var(--crimson-border); }
.ovx-qa-name{ font-size:13px; font-weight:700; color:#fff; }
.ovx-qa-sub{ font-size:11px; color:var(--text-dim); }
.ovx-qa-arrow{ margin-left:auto; color:var(--crimson-2); transition:transform .2s var(--ease); }
.ovx-qa-item:hover .ovx-qa-arrow{ transform:translateX(3px); }

/* ═══════════════════ STATISTICS AREA ═══════════════════ */
.statx-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.statx-card{ padding:20px; border-radius:var(--r-lg); }
.statx-ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:18px; margin-bottom:14px; background:rgba(99,102,241,0.14); color:#8b8df6; box-shadow:inset 0 0 0 1px rgba(99,102,241,.3); }
.statx-card.teal .statx-ic{ background:rgba(20,184,166,0.14); color:#2dd4bf; box-shadow:inset 0 0 0 1px rgba(20,184,166,.3); }
.statx-card.green .statx-ic{ background:rgba(16,185,129,0.14); color:#34d399; box-shadow:inset 0 0 0 1px rgba(16,185,129,.3); }
.statx-card.gold .statx-ic{ background:var(--gold-dim); color:var(--gold); box-shadow:inset 0 0 0 1px rgba(255,215,0,.3); }
.statx-val{ font-family:'Bebas Neue',sans-serif; font-size:38px; line-height:1; color:#fff; letter-spacing:1px; }
.statx-lbl{ margin-top:6px; font-size:12px; font-weight:600; color:var(--text); }
.statx-sub{ margin-top:2px; font-size:11px; color:var(--text-dim); }
.statx-soon{ position:relative; padding:40px 20px; border-radius:var(--r-lg); border:1px dashed var(--border); display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; color:var(--text-dim); }
.statx-soon .badge{ font-size:9px; font-weight:800; letter-spacing:.6px; color:var(--crimson-2); background:var(--crimson-dim); border:1px solid var(--crimson-border); border-radius:999px; padding:3px 10px; }

/* ═══════════════════ RESPONSIVE / MOBILE DRAWER ═══════════════════ */
@media (max-width:900px){
  .dash-hamburger{ display:flex; }
  /* Off-canvas drawer. display:flex !important overrides the older
     `@media (max-width:680px){ .sidebar{ display:none } }` rule that predates
     the hamburger — without it the drawer would open to nothing on phones. */
  .sidebar{
    display:flex !important;
    position:fixed; top:0; left:0; bottom:0; z-index:50;
    width:min(86vw,300px);
    transform:translateX(-104%);
    transition:transform .34s var(--ease-out);
    box-shadow:24px 0 60px rgba(0,0,0,0.5);
  }
  .sidebar.is-open{ transform:translateX(0); }
  body.drawer-open{ overflow:hidden; }
  /* Pin the topbar on mobile. Sticky fails here because .dash-main owns the
     sticky context (overflow-y:auto) but the BODY is what actually scrolls, so
     the bar scrolls away with the page and the hamburger goes out of reach.
     Fixed + content padding keeps ☰ always tappable. z below the scrim (40) so
     it dims when the drawer is open. */
  .dash-topbar{
    position:fixed !important; top:0; left:0; right:0; z-index:30;
    padding-top:env(safe-area-inset-top, 0px);
  }
  .dash-content{ padding-top:calc(env(safe-area-inset-top, 0px) + 72px); }
  /* Stack the audit-log + deleted-mod-log row (inline columns). */
  .overview-grid{ grid-template-columns:1fr !important; }
  .ovx-stats{ grid-template-columns:repeat(2,1fr); }
  .ovx-hero{ padding:24px 20px; }
  .ovx-banner{ flex-wrap:wrap; }
  .ovx-banner-btn{ width:100%; text-align:center; }
}
@media (max-width:520px){
  .ovx-stats{ grid-template-columns:1fr; }
  .ovx-sec{ flex-direction:column; align-items:flex-start; gap:2px; }
  /* Audit controls stack so the filter dropdown isn't crushed next to search */
  .audit-controls{ flex-wrap:wrap; }
  .audit-filter-sel{ max-width:none; flex:1; }
  /* Quick-action + area + recs already auto-fit to 1 column at this width */
  .ovx-qa-name, .ovx-stat-val{ font-size: clamp(13px, 4vw, 16px); }
}

/* ═══════════════════ AUDIT LOG CONTROLS ═══════════════════ */
.audit-controls{
  display:flex; gap:8px; padding:12px 16px;
  border-bottom:1px solid var(--glass-brd);
}
.audit-search-box{
  flex:1; display:flex; align-items:center; gap:8px;
  background:var(--glass-2); border:1px solid var(--glass-brd); border-radius:10px;
  padding:0 12px; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.audit-search-box:focus-within{ border-color:var(--crimson-border); box-shadow:0 0 0 3px var(--crimson-dim); }
.audit-search-ic{ font-size:12px; opacity:.6; }
.audit-search-box input{
  flex:1; background:none; border:none; outline:none; color:var(--text);
  font-family:'DM Sans',sans-serif; font-size:13px; padding:9px 0;
}
.audit-search-box input::placeholder{ color:var(--text-dim); }
.audit-filter-sel{
  background:var(--glass-2); border:1px solid var(--glass-brd); border-radius:10px;
  color:var(--text); font-family:'DM Sans',sans-serif; font-size:13px;
  padding:9px 12px; cursor:pointer; max-width:160px; transition:border-color .2s var(--ease);
}
.audit-filter-sel:hover{ border-color:var(--crimson-border); }
.audit-filter-sel:focus{ outline:none; border-color:var(--crimson-border); }
.audit-more-btn{
  display:block; width:100%; padding:11px; border:none; cursor:pointer;
  background:rgba(255,255,255,0.02); border-top:1px solid var(--glass-brd);
  color:var(--crimson-2); font-family:'DM Sans',sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.3px; transition:background .2s var(--ease);
}
.audit-more-btn:hover{ background:var(--crimson-dim); }
/* Audit entries — slightly richer rows + hover */
.audit-entry{ transition:background .18s var(--ease); border-radius:10px; }
.audit-entry:hover{ background:rgba(255,255,255,0.03); }
.audit-module{ color:var(--crimson-2); font-weight:600; }

/* ═══════════════════ EXTRA POLISH — "go all out" ═══════════════════ */
/* Animated shimmer across the hero title */
.ovx-hero-title{
  background-size:200% auto;
  animation:ovx-shimmer 6s linear infinite;
}
@keyframes ovx-shimmer{ to{ background-position:200% center; } }

/* Hero gets a faint moving scanline sheen */
.ovx-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.04) 45%, transparent 60%);
  background-size:250% 100%;
  animation:ovx-sheen 7s var(--ease) infinite;
}
@keyframes ovx-sheen{ 0%{ background-position:140% 0; } 60%,100%{ background-position:-40% 0; } }

/* Light sweep across glass cards on hover */
.ovx-card{ overflow:hidden; }
.ovx-card > *{ position:relative; z-index:1; }
.ovx-card::after{
  content:""; position:absolute; top:0; left:-60%; width:50%; height:100%; z-index:0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.06), transparent);
  transform:skewX(-18deg); opacity:0; transition:none; pointer-events:none;
}
.ovx-card:hover::after{ animation:ovx-swipe .8s var(--ease) forwards; }
@keyframes ovx-swipe{ from{ left:-60%; opacity:1; } to{ left:130%; opacity:1; } }

/* Recommendation cards get a left priority accent bar */
.ovx-rec{ position:relative; }
.ovx-rec::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0;
  background:var(--text-dim); opacity:.5;
}
.ovx-rec:has(.ovx-rec-tag.high)::before{ background:var(--grad-crimson); opacity:1; box-shadow:0 0 12px var(--glow-crimson); }
.ovx-rec:has(.ovx-rec-tag.medium)::before{ background:linear-gradient(180deg,#fbbf24,#F59E0B); opacity:1; }
.ovx-rec:has(.ovx-rec-tag.low)::before{ background:linear-gradient(180deg,#8b8df6,#6366F1); opacity:1; }

/* Stat numbers get a crimson-to-white vertical gradient + tabular figures */
.ovx-stat-val, .statx-val{
  background:linear-gradient(180deg,#fff, #FFD9DD);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;
}

/* Sidebar active item — soft breathing glow on the accent bar */
.nav-item.active::before{ animation:ovx-pulse 2.6s var(--ease) infinite; }
@keyframes ovx-pulse{ 0%,100%{ box-shadow:0 0 8px var(--glow-crimson); } 50%{ box-shadow:0 0 16px var(--glow-crimson); } }

/* Custom scrollbars to match the theme */
.dash-main::-webkit-scrollbar, .sidebar::-webkit-scrollbar{ width:10px; }
.dash-main::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track{ background:transparent; }
.dash-main::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(232,25,44,0.4), rgba(232,25,44,0.15));
  border-radius:999px; border:2px solid transparent; background-clip:padding-box;
}
.dash-main::-webkit-scrollbar-thumb:hover{ background:var(--crimson); background-clip:padding-box; }

/* Clickable stat cards — route to their module on click */
.statx-clickable{ cursor:pointer; }
.statx-clickable .statx-sub, .statx-clickable .ovx-stat-sub{ color:var(--crimson-2); transition:color .2s var(--ease), letter-spacing .2s var(--ease); }
.statx-clickable:hover .statx-sub, .statx-clickable:hover .ovx-stat-sub{ letter-spacing:.3px; }
.statx-clickable:active{ transform:translateY(-1px) scale(.99); }

/* ═══════════════════ CUSTOM BACKGROUND — "Cyndrix Aurora" ═══════════════════
   A designed, layered backdrop instead of flat black: a deep graded base, two
   slow-drifting crimson/maroon aurora blobs, a center-weighted crimson dot
   lattice, and a fine film-grain overlay for texture. All fixed + pointer-none,
   sitting behind the z-index:1 app shell. */
body{
  background:
    radial-gradient(1300px 760px at 50% -12%, #170a0e 0%, transparent 56%),
    radial-gradient(900px 700px at 100% 100%, #120a10 0%, transparent 60%),
    linear-gradient(180deg, #0a0b11 0%, #070809 58%, #050506 100%) !important;
  background-attachment:fixed !important;
}
/* Film grain */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
/* Aurora blobs — reuse the existing fixed bg elements, supersized + drifting */
.bg-glow{
  top:-300px; right:-240px; width:880px; height:880px; filter:blur(22px);
  background:radial-gradient(circle, rgba(232,25,44,0.24) 0%, rgba(232,25,44,0.07) 38%, transparent 70%);
  animation:ovx-aurora-1 26s var(--ease) infinite alternate;
}
.bg-glow-2{
  bottom:-320px; left:-220px; width:820px; height:820px; filter:blur(26px);
  background:radial-gradient(circle, rgba(176,22,52,0.18) 0%, rgba(255,215,0,0.045) 46%, transparent 72%);
  animation:ovx-aurora-2 33s var(--ease) infinite alternate;
}
@keyframes ovx-aurora-1{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-70px,46px) scale(1.14); } }
@keyframes ovx-aurora-2{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(58px,-34px) scale(1.1); } }
/* Center-weighted crimson dot lattice */
.bg-grid{
  background-image:radial-gradient(rgba(232,25,44,0.11) 1px, transparent 1.5px);
  background-size:28px 28px; opacity:.55;
  -webkit-mask:radial-gradient(circle at 50% 24%, #000 0%, rgba(0,0,0,0.35) 48%, transparent 78%);
  mask:radial-gradient(circle at 50% 24%, #000 0%, rgba(0,0,0,0.35) 48%, transparent 78%);
}

/* Respect reduced-motion preference — kill the looping/atmosphere animations */
@media (prefers-reduced-motion: reduce){
  body::after, .bg-glow, .bg-glow-2, .ovx-hero-title, .ovx-hero::before,
  .ovx-card::after, .nav-item.active::before, .ovx > *{ animation:none !important; }
  .ovx > *{ opacity:1 !important; transform:none !important; }
}

/* ████████████████████████████████████████████████████████████████████████████
   COMMAND DECK — Cyndrix's signature overview hero (replaces the generic
   greeting + stat-card row). Asymmetric: big branded vitals on the left, a
   gamified "Readiness" ring on the right. This is the part that makes the
   dashboard read as Cyndrix, not a notoq clone.
   ████████████████████████████████████████████████████████████████████████████ */
.cmd-deck{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center;
  padding:32px 34px; border-radius:var(--r-xl);
  background:
    radial-gradient(600px 320px at 80% -30%, rgba(232,25,44,0.28), transparent 62%),
    linear-gradient(120deg, rgba(22,10,13,0.92), rgba(10,11,16,0.92));
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-md);
}
.cmd-deck::before{ /* angled crimson edge strip */
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:var(--grad-crimson); box-shadow:0 0 26px var(--glow-crimson);
}
.cmd-deck::after{ /* faint scan sheen */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.035) 48%, transparent 62%);
  background-size:250% 100%; animation:ovx-sheen 8s var(--ease) infinite;
}
/* Giant clipped CYNDRIX wordmark watermark behind the deck */
.cmd-emblem{
  position:absolute; right:-12px; bottom:-34px; z-index:0; pointer-events:none;
  font-family:'Bebas Neue',sans-serif; font-size:150px; line-height:.8; letter-spacing:6px;
  color:transparent; -webkit-text-stroke:1.5px rgba(232,25,44,0.10);
  user-select:none; white-space:nowrap;
}
.cmd-left{ position:relative; z-index:1; min-width:0; }
.cmd-eyebrow{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; color:var(--crimson-2); margin-bottom:10px;
}
.cmd-tick{ width:9px; height:9px; border-radius:2px; background:var(--grad-crimson); box-shadow:0 0 10px var(--glow-crimson); }
.cmd-sep{ color:var(--text-dim); }
.cmd-title{
  margin:0; font-family:'Bebas Neue',sans-serif; line-height:.92; letter-spacing:1px;
  font-size:clamp(40px,5.5vw,68px);
  background:linear-gradient(92deg,#fff 24%, #FFD9DD 62%, var(--crimson-2));
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:ovx-shimmer 7s linear infinite;
}
.cmd-online{ margin-top:12px; font-size:12.5px; color:var(--text-muted); display:flex; align-items:center; gap:8px; }
.cmd-online-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); animation:ovx-pulse-dot 2s var(--ease) infinite; }
@keyframes ovx-pulse-dot{ 0%,100%{ box-shadow:0 0 8px var(--green); } 50%{ box-shadow:0 0 16px var(--green); } }
.cmd-hide{ display:none; }
/* Vitals strip — editorial, divided by hairlines (not boxed cards) */
.cmd-vitals{ display:flex; flex-wrap:wrap; gap:0; margin-top:20px; }
.cmd-vital{ position:relative; padding:4px 22px; }
.cmd-vital:first-child{ padding-left:0; }
.cmd-vital + .cmd-vital::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:linear-gradient(180deg, transparent, var(--glass-brd), transparent); }
.cmd-vital-num{
  font-family:'Bebas Neue',sans-serif; font-size:34px; line-height:1; letter-spacing:1px;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,#FFD9DD); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.cmd-vital-lbl{ margin-top:3px; font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-dim); }
.cmd-vital.statx-clickable .cmd-vital-lbl{ color:var(--crimson-2); }
.cmd-vital.statx-clickable:hover{ transform:translateY(-2px); }
.cmd-vital{ transition:transform .2s var(--ease); }

/* Readiness ring */
.cmd-right{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; }
.cmd-ring{ position:relative; width:140px; height:140px; }
.cmd-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.cmd-ring-track{ fill:none; stroke:rgba(255,255,255,0.06); stroke-width:9; }
.cmd-ring-fill{
  fill:none; stroke:url(#cmdRingGrad); stroke-width:9; stroke-linecap:round;
  filter:drop-shadow(0 0 6px var(--glow-crimson));
  transition:stroke-dashoffset 1.1s var(--ease-out);
}
.cmd-ring-mid{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 22px; box-sizing:border-box; text-align:center; }
.cmd-ring-pct{ font-family:'Bebas Neue',sans-serif; font-size:34px; line-height:1; color:#fff; letter-spacing:1px; white-space:nowrap; text-shadow:0 1px 10px rgba(0,0,0,0.55), 0 0 14px rgba(255,255,255,0.18); }
.cmd-ring-cap{ font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:1.5px; color:var(--text-dim); margin-top:3px; white-space:nowrap; }
.cmd-rank{
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:2px;
  padding:4px 12px; border-radius:999px; border:1px solid var(--crimson-border);
  background:var(--crimson-dim); color:var(--crimson-2);
}
.cmd-rank[data-rank="EXPOSED"]{ color:#ff5a68; border-color:rgba(255,45,66,.4); background:rgba(255,45,66,.1); }
.cmd-rank[data-rank="DEVELOPING"]{ color:#fb923c; border-color:rgba(249,115,22,.4); background:rgba(249,115,22,.1); }
.cmd-rank[data-rank="ESTABLISHED"]{ color:#8b8df6; border-color:rgba(99,102,241,.4); background:rgba(99,102,241,.1); }
.cmd-rank[data-rank="FORTIFIED"]{ color:#34d399; border-color:rgba(16,185,129,.4); background:rgba(16,185,129,.1); }
.cmd-rank[data-rank="FORTRESS"]{ color:var(--gold); border-color:rgba(255,215,0,.45); background:var(--gold-dim); }
.cmd-armed{ font-size:11.5px; color:var(--text-muted); }
.cmd-armed b{ color:var(--text); font-variant-numeric:tabular-nums; }

/* Tactical section titles — crimson tick + mono feel */
.ovx-sec-title{ position:relative; padding-left:14px; }
.ovx-sec-title::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:20px; border-radius:2px; background:var(--grad-crimson); box-shadow:0 0 10px var(--glow-crimson); }
.ovx-sec-title .ic{ display:none; } /* replaced by the tick bar */

/* Command Deck responsive */
@media (max-width:760px){
  .cmd-deck{ grid-template-columns:1fr; gap:22px; padding:26px 20px; text-align:left; }
  .cmd-right{ flex-direction:row; align-items:center; gap:16px; justify-content:flex-start; flex-wrap:wrap; }
  .cmd-ring{ width:112px; height:112px; }
  .cmd-ring-pct{ font-size:30px; }
  .cmd-emblem{ font-size:104px; bottom:-22px; }
}
@media (max-width:420px){
  .cmd-vital{ padding:4px 14px; }
  .cmd-vital-num{ font-size:28px; }
}
@media (prefers-reduced-motion: reduce){
  .cmd-deck::after, .cmd-title, .cmd-online-dot, .cmd-ring-fill{ animation:none !important; transition:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   LEVEL ROLE REWARDS (auto-rank roles) — Levels tab
   ═══════════════════════════════════════════════════════════════════ */
.lvl-rewards-list{ display:flex; flex-direction:column; gap:8px; margin:10px 0 14px; }
.lvl-rewards-empty{
  font-size:12px; color:var(--text-dim); padding:14px;
  text-align:center; border:1px dashed var(--border);
  border-radius:var(--r-md, 12px); background:rgba(255,255,255,.02);
}
.lvl-reward-row{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border:1px solid var(--border);
  border-radius:var(--r-md, 12px);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  transition:border-color .15s var(--ease, ease), transform .15s var(--ease, ease);
}
.lvl-reward-row:hover{ border-color:rgba(232,25,44,.45); transform:translateX(2px); }
.lvl-reward-lv{
  flex:0 0 auto; font-weight:800; font-size:12px; letter-spacing:.04em;
  color:#fff; padding:3px 9px; border-radius:999px;
  background:var(--grad-crimson, linear-gradient(135deg,#E8192C,#b3101f));
  box-shadow:0 2px 8px rgba(232,25,44,.3);
}
.lvl-reward-arrow{ color:var(--text-dim); font-size:13px; flex:0 0 auto; }
.lvl-reward-chip{
  display:inline-flex; align-items:center; gap:7px; flex:1 1 auto; min-width:0;
  font-size:13px; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lvl-reward-dot{ font-size:11px; line-height:1; flex:0 0 auto; }
.lvl-reward-del{
  flex:0 0 auto; width:26px; height:26px; border-radius:8px;
  border:1px solid var(--border); background:transparent;
  color:var(--text-dim); font-size:16px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .15s var(--ease, ease);
}
.lvl-reward-del:hover{ background:rgba(232,25,44,.12); border-color:rgba(232,25,44,.5); color:#ff6b78; }

.lvl-reward-add{ display:flex; align-items:stretch; gap:8px; }
.lvl-reward-add-level{ flex:0 0 90px; }
.lvl-reward-add-level .field-input{ width:100%; }
.lvl-reward-add-role{ flex:1 1 auto; min-width:0; }
.lvl-reward-add-role .ch-picker-wrap{ width:100%; }
.lvl-reward-add-role .ch-picker-btn{ width:100%; }
.lvl-reward-add-btn{
  flex:0 0 auto; padding:0 18px; border-radius:10px;
  border:1px solid rgba(232,25,44,.5); cursor:pointer;
  background:var(--grad-crimson, linear-gradient(135deg,#E8192C,#b3101f));
  color:#fff; font-weight:700; font-size:13px; letter-spacing:.02em;
  transition:filter .15s var(--ease, ease), transform .1s var(--ease, ease);
}
.lvl-reward-add-btn:hover{ filter:brightness(1.1); }
.lvl-reward-add-btn:active{ transform:translateY(1px); }
@media (max-width:560px){
  .lvl-reward-add{ flex-wrap:wrap; }
  .lvl-reward-add-level{ flex:1 1 100px; }
  .lvl-reward-add-role{ flex:1 1 100%; order:3; }
}

/* ─── Rank Cards: shared component (de-dupes the two near-identical editors) ───
   Static presentation only. Every id is preserved; levels.js sets all dynamic
   styles inline (bg, accent, bar width, text color) so it always wins. */
.rankcards-group-head{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:36px 2px 16px;
}
.rankcards-group-head h2{
  font-family:'DM Sans',sans-serif; font-size:17px; font-weight:750;
  letter-spacing:-.01em; color:var(--text); margin:0;
}
.rankcards-group-head p{
  font-size:12.5px; color:var(--text-dim); margin:0; flex:1 1 280px; line-height:1.5; min-width:0;
}
.config-panel + .config-panel{ margin-top:18px; }
/* Side-by-side grids already separate the cards with gap. The stacked-panel
   margin was dropping the right card 18px below the left one. */
.overview-grid > .config-panel,
.rm-layout > .config-panel{ margin-top:0; min-width:0; height:100%; }
/* The right column is narrower, so its subtitle wrapped and the header
   rule sat a line below the audit log. Reserve two lines on both. */
.overview-grid .cp-subtitle{ min-height:2.7em; line-height:1.35; }

/* premium gate banner — one class, both cards */
.premium-gate{
  display:flex; gap:12px; align-items:flex-start;
  background:linear-gradient(135deg, var(--crimson-dim), rgba(255,255,255,0.015));
  border:1px solid var(--crimson-border); border-radius:12px;
  padding:14px 16px; margin-bottom:20px; color:var(--text); font-size:13px; line-height:1.5;
}
.premium-gate::before{ content:"✦"; color:var(--crimson-2); font-size:15px; line-height:1.35; flex:0 0 auto; }
.premium-gate a{ color:var(--crimson-2); text-decoration:underline; font-weight:600; white-space:nowrap; }

/* panel action row (save + secondary + status) */
.cp-actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:4px; }
.cp-actions .save-btn{ width:auto; margin-top:0; }
.cp-actions-status{ color:var(--text-muted); font-size:13px; }
.btn-ghost{
  padding:12px 20px; border-radius:13px; background:transparent;
  border:1px solid var(--border); color:var(--text-muted);
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all .18s;
}
.btn-ghost:hover{ border-color:var(--crimson-border); color:var(--text); }
.btn-ghost-sm{ padding:8px 14px; letter-spacing:.5px; border-radius:10px; }
.mod-filter-bar{ margin:0 0 14px; }
.btn-ghost.is-on{
  border-color:rgba(232,25,44,0.55);
  color:var(--text);
  background:rgba(232,25,44,0.12);
}

/* inline helpers that were repeated as inline styles */
.field-color{ height:42px; padding:4px; cursor:pointer; }
.field-row-split{ display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:14px; }
.field-row-split .field-label{ margin:0; }
.upload-row{ display:flex; gap:10px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.upload-status{ color:var(--text-muted); font-size:12px; }
.usercard-scope-label{ display:flex; align-items:center; gap:8px; margin:6px 0; cursor:pointer; color:var(--text); }

/* ── Rank card live preview ─────────────────────────────────────────────────
   This used to be a hand-built HTML mock-up of the card (~38 CSS rules) that
   had to be kept in step with rankCardRenderer by hand — and drifted: it still
   drew a stacked LEVEL column and an invisible progress track long after the
   real card had changed. It is now an <img> of the ACTUAL server render, so it
   cannot disagree with what Discord receives. Aspect is fixed to the card's
   600×180 so the panel does not jump while a render is in flight. */
.rcp-wrap{ position:relative; width:100%; max-width:600px; margin:0 auto; }
.rcp-live{ display:block; width:100%; aspect-ratio:600/180; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border); object-fit:cover; }
.rcp-busy{ position:absolute; right:10px; bottom:8px; font-size:10px; letter-spacing:.04em;
  color:var(--text-dim); background:rgba(10,12,18,0.72); padding:2px 8px; border-radius:999px; }
.rcp-caption{ font-size:11px; color:var(--text-dim); margin-top:8px; text-align:center; }

/* 2-col card layout: setup (left) | sticky preview + save (right), split
   EVENLY. The right column used to be a fixed 320px, which — with the preview
   image separately capped at 340px — showed a 600px-wide card as a thumbnail
   you could not judge a background image from. Half the panel each: the controls
   are short enough to live in it, and the preview gets to be readable. */
.rc-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px; align-items:start; }
.rc-body .cp-section{ margin-bottom:20px; }
.rc-controls{ min-width:0; }
.rc-side{ position:sticky; top:16px; min-width:0; display:flex; flex-direction:column; gap:14px; }
.rc-side .cp-section{ margin-bottom:0; }
/* The preview fills its half of the panel, capped at the card's own 600px so it
   is never upscaled past the real render and never goes soft. THIS IS THE ONLY
   max-width for it — there used to be three (none / 300px / 340px) scattered
   down the file, and the last one silently won, which is how a 600px card ended
   up previewing as a 340px thumbnail. */
.rc-side .rcp-wrap{ max-width:600px; }
.rc-side .cp-actions{ margin-top:0; }
/* tighten the background-image block so it stops dominating the panel */
.rc-controls .upload-row{ margin-bottom:6px; }
.rc-controls .field-row + .field-row{ margin-top:14px; }
@media (max-width:900px){
  .rc-body{ grid-template-columns:1fr; gap:18px; }
  .rc-side{ position:static; }
}

/* denser rank-card panels — smaller header + body, compact color pickers */
#rankcard-panel .cp-head, #usercard-panel .cp-head{ padding:14px 20px; }
#rankcard-panel .cp-subtitle, #usercard-panel .cp-subtitle{ font-size:12px; }
.rc-body{ padding:18px 20px; gap:22px; }
.rc-body .cp-section{ margin-bottom:14px; }
.rc-body .cp-section-title{ margin-bottom:9px; }
.rc-body .field-desc{ font-size:11.5px; line-height:1.45; }
/* compact color pickers: a small swatch + stacked label/hint in a pill */
.rc-colors{ display:flex; gap:10px; flex-wrap:wrap; }
.rc-color{
  display:flex; align-items:center; gap:9px; flex:1 1 150px; cursor:pointer; margin:0;
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:6px 10px;
}
.rc-color:hover{ border-color:var(--crimson-border); }
.rc-color input[type=color]{
  width:32px; height:32px; padding:2px; border:none; border-radius:8px; background:none; cursor:pointer; flex:0 0 auto;
}
.rc-color-txt{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.rc-color-label{ font-size:12.5px; font-weight:600; color:var(--text); }
.rc-color-hint{ font-size:10.5px; color:var(--text-dim); }

/* Upload + Clear buttons share one height and sit flush on the same baseline */
.upload-row{ align-items:center; }
.upload-row .save-btn, .upload-row .btn-ghost{
  height:38px; margin-top:0; padding-top:0; padding-bottom:0;
  display:inline-flex; align-items:center;
}

/* Notoq-style upload dropzone (click to open the file picker) */
.dropzone{
  border:1.5px dashed var(--border); border-radius:12px; background:var(--surface-2);
  padding:24px 18px; text-align:center; cursor:pointer; color:var(--text-dim);
  transition:border-color .18s, background .18s, color .18s;
}
.dropzone:hover{ border-color:var(--crimson-border); background:var(--surface-3); color:var(--text-muted); }
.dz-ic{ display:block; margin:0 auto 8px; color:var(--text-dim); transition:color .18s; }
.dropzone:hover .dz-ic{ color:var(--crimson-2); }
.dz-title{ font-weight:700; font-size:14px; color:var(--text); }
.dz-sub{ font-size:11.5px; color:var(--text-dim); margin-top:4px; }
.dz-status{ display:block; font-size:11.5px; color:var(--crimson-2); margin-top:8px; }
.dz-actions{ margin-top:10px; }

/* ═══ Command palette (⌘K) ═══ */
.cmdk-overlay{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:flex-start; justify-content:center;
  padding:12vh 20px 20px;
  background:rgba(4,5,8,0.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .16s ease;
  pointer-events:none;
}
/* [hidden] alone can't hide a display:flex element — force it, and never let a
   transparent overlay capture clicks (this froze the page after closing). */
.cmdk-overlay[hidden]{ display:none !important; }
.cmdk-overlay.open{ opacity:1; pointer-events:auto; }
.cmdk-modal{
  width:min(580px,94vw); max-height:76vh; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(232,25,44,0.08);
  overflow:hidden; transform:translateY(-8px) scale(.985); transition:transform .16s ease;
}
.cmdk-overlay.open .cmdk-modal{ transform:none; }
.cmdk-search{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); }
.cmdk-search-ic{ font-size:15px; opacity:.65; flex:0 0 auto; }
.cmdk-input{
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--text); font-family:'DM Sans',system-ui,sans-serif; font-size:16px;
}
.cmdk-input::placeholder{ color:var(--text-dim); }
.cmdk-kbd{
  flex:0 0 auto; font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600;
  color:var(--text-dim); background:var(--surface-2); border:1px solid var(--border);
  padding:3px 7px; border-radius:6px; letter-spacing:.5px;
}
.cmdk-list{ overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:2px; }
.cmdk-item{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px;
  cursor:pointer; border:1px solid transparent;
}
.cmdk-item.active{ background:var(--crimson-dim); border-color:var(--crimson-border); }
.cmdk-ic{ font-size:15px; flex:0 0 auto; width:20px; text-align:center; }
.cmdk-label{ flex:1; min-width:0; font-size:14px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk-item.active .cmdk-label{ color:#fff; }
.cmdk-group{
  flex:0 0 auto; font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600;
  letter-spacing:.6px; text-transform:uppercase; color:var(--text-dim);
}
.cmdk-empty{ padding:26px 16px; text-align:center; color:var(--text-dim); font-size:13.5px; }
.cmdk-foot{
  display:flex; gap:16px; padding:10px 16px; border-top:1px solid var(--border);
  font-size:11px; color:var(--text-dim); flex-wrap:wrap;
}
.cmdk-foot kbd{
  font-family:'JetBrains Mono',monospace; font-size:10px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:4px; padding:1px 5px; margin-right:2px; color:var(--text-muted);
}
/* Sidebar search trigger (also = the "searchable sidebar") */
.cmdk-trigger{
  display:flex; align-items:center; gap:9px; width:100%; margin-top:10px;
  padding:9px 12px; border-radius:11px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim);
  font-family:'DM Sans',system-ui,sans-serif; font-size:13px; transition:all .15s;
}
.cmdk-trigger:hover{ border-color:var(--crimson-border); color:var(--text-muted); }
.cmdk-trigger-ic{ font-size:13px; opacity:.7; }
.cmdk-trigger-lbl{ flex:1; text-align:left; }
@media (prefers-reduced-motion:reduce){
  .cmdk-overlay, .cmdk-modal{ transition:none; }
}

/* ████████████████████████████████████████████████████████████████████████████
   CYNDRIX MODULE POLISH LAYER · 2026-06-15
   Appended last so it wins on equal specificity. Elevates the SHARED component
   primitives (every module uses these) + a richer living background. No element
   id is renamed; this only repaints surfaces.
   ████████████████████████████████████████████████████████████████████████████ */

/* ─── Living background: deeper base + translucent cards so the aurora shows
   through instead of reading as flat black. ─────────────────────────────── */
body{
  background:
    radial-gradient(1200px 820px at 82% -12%, rgba(232,25,44,0.14) 0%, transparent 58%),
    radial-gradient(1000px 760px at 6% 6%, rgba(124,18,40,0.12) 0%, transparent 55%),
    radial-gradient(1100px 900px at 100% 105%, rgba(176,22,52,0.10) 0%, transparent 60%),
    linear-gradient(180deg, #0b0d13 0%, #08090e 55%, #060709 100%) !important;
  background-attachment:fixed !important;
}
/* Stronger aurora blobs */
.bg-glow{
  background:radial-gradient(circle, rgba(232,25,44,0.30) 0%, rgba(232,25,44,0.09) 40%, transparent 70%) !important;
}
.bg-glow-2{
  background:radial-gradient(circle, rgba(176,22,52,0.22) 0%, rgba(255,215,0,0.05) 46%, transparent 72%) !important;
}
.bg-grid{ opacity:.7 !important; }
/* Soft vignette so edges fall off and content pops */
.dash-content::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(125% 90% at 50% 0%, transparent 55%, rgba(0,0,0,0.45) 100%);
}

/* ─── Cards → glass. Translucent surfaces let the background glow through. ── */
.config-panel,
.info-card,
.module-card{
  background:linear-gradient(180deg, rgba(24,28,38,0.78), rgba(14,17,24,0.82)) !important;
  border:1px solid rgba(255,255,255,0.07) !important;
  border-radius:18px !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 20px 44px -28px rgba(0,0,0,0.9) !important;
  position:relative;
}
/* Live Preview must stay in view while the editor scrolls. The glass
   rule above sets position:relative on every .info-card and would
   otherwise cancel the earlier sticky. */
#tab-welcome .welcome-preview-card{
  position:sticky !important;
  top:16px;
  z-index:6;
  align-self:start;
  min-width:0;
  overflow:visible !important;
}
/* Gradient top hairline for that premium edge-lit look */
.config-panel::before,
.info-card::before,
.module-card::before{
  content:""; position:absolute; left:18px; right:18px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,25,44,0.55), rgba(255,255,255,0.18), transparent);
  opacity:.8; pointer-events:none;
}
.module-card{
  transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.module-card:hover{
  transform:translateY(-3px);
  border-color:rgba(232,25,44,0.35) !important;
  box-shadow:0 26px 50px -26px rgba(0,0,0,0.95), 0 0 0 1px rgba(232,25,44,0.18) !important;
}

/* ─── Module header: crimson emblem bar + gradient divider ───────────────── */
.cp-head{ position:relative; padding:22px 24px !important; }
.cp-head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, rgba(232,25,44,0.4), rgba(255,255,255,0.06) 40%, transparent);
}
.cp-title-row{ position:relative; }
.cp-title-row::before{
  content:""; width:4px; height:17px; border-radius:3px; flex-shrink:0;
  background:var(--grad-crimson);
  box-shadow:0 0 12px rgba(232,25,44,0.55);
}
.cp-title{ font-size:15px !important; letter-spacing:.4px !important; }

/* ─── Page header: bigger title + gradient accent rule ───────────────────── */
.page-title{
  font-size:25px !important; letter-spacing:1px !important; line-height:1.05;
  background:linear-gradient(180deg, #fff 0%, #d6d9e0 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#fff;
}
.page-header{ position:relative; }
.page-header::after{
  content:""; display:block; width:48px; height:3px; margin-top:14px;
  border-radius:2px; background:var(--grad-crimson);
  box-shadow:0 0 14px rgba(232,25,44,0.6);
}

/* ─── Section titles: crimson tick before the label ──────────────────────── */
.cp-section-title{ color:var(--text-muted); }
.cp-section-title::before{
  content:""; width:14px; height:2px; border-radius:2px; flex-shrink:0;
  background:var(--grad-crimson); box-shadow:0 0 8px rgba(232,25,44,0.5);
}
.cp-section-title::after{
  background:linear-gradient(90deg, rgba(255,255,255,0.10), transparent) !important;
}

/* ─── Inputs: deeper field + crimson focus ring ──────────────────────────── */
.field-input{
  background:rgba(10,12,18,0.6) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:11px !important;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease) !important;
}
.field-input:hover{ border-color:rgba(255,255,255,0.14) !important; }
.field-input:focus{
  border-color:var(--crimson) !important;
  background:rgba(14,16,24,0.85) !important;
  box-shadow:0 0 0 3px rgba(232,25,44,0.16) !important;
}

/* ─── Channel/role picker buttons: glass + focus ─────────────────────────── */
.ch-picker-btn{
  background:rgba(10,12,18,0.6) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:11px !important;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease) !important;
}
.ch-picker-btn:hover{ border-color:rgba(232,25,44,0.4) !important; box-shadow:0 0 0 3px rgba(232,25,44,0.08) !important; }
.ch-dropdown{
  background:rgba(16,19,27,0.96) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 24px 60px -16px rgba(0,0,0,0.85) !important;
}

/* ─── Toggle: gradient + glow when on, smoother knob ─────────────────────── */
.toggle-track{
  background:rgba(255,255,255,0.07) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
}
.toggle-track::before{
  background:#cfd3dc !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.5) !important;
}
.toggle input:checked+.toggle-track{
  background:var(--grad-crimson) !important;
  border-color:rgba(232,25,44,0.7) !important;
  box-shadow:0 0 16px -2px rgba(232,25,44,0.6) !important;
}
.toggle input:checked+.toggle-track::before{ background:#fff !important; }

/* ─── Save button: gradient + animated shine sweep ───────────────────────── */
.save-btn{
  background:var(--grad-crimson);
  border-radius:13px;
  box-shadow:0 8px 22px -10px rgba(232,25,44,0.6);
  position:relative; overflow:hidden;
}
.save-btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.28) 50%, transparent 80%);
  transform:translateX(-120%); transition:transform .6s var(--ease);
}
.save-btn:hover{
  background:var(--grad-crimson);
  filter:brightness(1.08);
  box-shadow:0 12px 30px -8px rgba(232,25,44,0.7) !important;
}
.save-btn:hover::after{ transform:translateX(120%); }

/* ─── Badges: refined pills ──────────────────────────────────────────────── */
.cp-badge.on{
  background:rgba(16,185,129,0.14) !important;
  border:1px solid rgba(16,185,129,0.35) !important;
  box-shadow:0 0 12px -4px rgba(16,185,129,0.5);
}
.cp-badge.off{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
}

/* ─── Info-card stat rows + section titles share the crimson identity ────── */
.info-section-title{ color:var(--text-muted); }

/* ─── Logging modules → premium card grid (modlog tab) ───────────────────── */
.module-toggle-list#modlog-modules-list,
#modlog-modules-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(248px, 1fr));
  gap:14px;
}
.modlog-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; padding:14px 15px;
  transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
  position:relative; overflow:hidden;
}
.modlog-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--mc-accent, var(--crimson));
  opacity:0; transition:opacity .2s var(--ease);
}
.modlog-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--mc-accent, #E8192C) 45%, transparent);
  box-shadow:0 18px 36px -22px rgba(0,0,0,0.95);
}
.modlog-card.is-on{
  border-color:color-mix(in srgb, var(--mc-accent, #E8192C) 40%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mc-accent, #E8192C) 18%, transparent),
             0 14px 30px -24px var(--mc-accent, #E8192C);
}
.modlog-card.is-on::before{ opacity:1; }
.modlog-card-head{ display:flex; align-items:center; gap:12px; }
.modlog-card-icon{
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  border:1px solid rgba(255,255,255,0.1);
}
.modlog-card-info{ flex:1; min-width:0; }
.modlog-card-name{ font-size:14px; font-weight:700; letter-spacing:.2px; }
.modlog-card-desc{ font-size:11px; color:var(--text-muted); margin-top:2px; line-height:1.35; }
.modlog-card-ch{ margin-top:12px; }
.modlog-card-ch .ch-picker-wrap{ width:100%; }
.modlog-card-ch .ch-picker-btn{ width:100%; }
.modlog-card-ch select.field-input{ height:36px; padding:6px 32px 6px 10px; font-size:12px; }
.modlog-card-note{ margin-top:8px; font-size:11px; line-height:1.4; color:var(--text-muted); }

/* ─── Sidebar scrollbar: slim crimson gradient w/ fade track ─────────────── */
.sb-nav{ scrollbar-width:thin; scrollbar-color:rgba(232,25,44,0.55) transparent; }
.sb-nav::-webkit-scrollbar{ width:8px; }
.sb-nav::-webkit-scrollbar-track{
  background:transparent; margin:6px 0;
}
.sb-nav::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(255,45,66,0.75), rgba(232,25,44,0.55) 55%, rgba(166,15,30,0.6));
  border-radius:99px;
  border:2px solid transparent; background-clip:padding-box;
  box-shadow:0 0 10px -2px rgba(232,25,44,0.5);
  transition:background .2s var(--ease);
}
.sb-nav::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, #FF2D42, #E8192C 55%, #A60F1E);
  background-clip:padding-box;
}
/* Match the main content scrollbar to the same identity */
.dash-content::-webkit-scrollbar{ width:10px; }
.dash-content::-webkit-scrollbar-track{ background:transparent; }
.dash-content::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(232,25,44,0.5), rgba(120,18,40,0.5));
  border-radius:99px; border:2px solid transparent; background-clip:padding-box;
}
.dash-content::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(255,45,66,0.8), rgba(232,25,44,0.7));
  background-clip:padding-box;
}

/* ─── Segmented sub-switcher (Welcome/Goodbye, and any 2-mode module) ─────── */
.seg-switch{
  position:relative; display:inline-flex; gap:4px; margin:0 0 22px;
  padding:5px; border-radius:14px;
  background:linear-gradient(180deg, rgba(10,12,18,0.7), rgba(14,17,24,0.7));
  border:1px solid rgba(255,255,255,0.08);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
.seg-thumb{
  position:absolute; top:5px; left:5px; bottom:5px; width:calc(50% - 5px);
  border-radius:10px; background:var(--grad-crimson);
  box-shadow:0 6px 18px -6px rgba(232,25,44,0.7);
  transition:transform .28s var(--ease), width .28s var(--ease);
  z-index:0; pointer-events:none;
}
/* Pre-JS default for a 3-segment switch (JS sizes it from button geometry once
   the tab is visible). */
.seg-switch.seg-2 .seg-thumb{ width:calc(50% - 5px); }
.seg-switch.seg-3 .seg-thumb{ width:calc(33.333% - 3.33px); }
.seg-switch.seg-4 .seg-thumb{ width:calc(25% - 3.75px); }
.seg-switch.seg-5 .seg-thumb{ width:calc(20% - 4px); }
.seg-switch.seg-6 .seg-thumb{ width:calc(16.666% - 4.16px); }
/* Five segments at the default min-width:150px need 776px of row before any
   shrinking is allowed, which overflows the panel. Let them share the row
   instead of forcing it wider. */
.seg-switch.seg-6{ display:flex; width:100%; }
.seg-switch.seg-6 .seg-btn{ min-width:0; padding:9px 8px; gap:5px; }
.seg-switch.seg-6 .seg-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:760px){
  .seg-switch.seg-6 .seg-ic{ display:none; }
  .seg-switch.seg-6 .seg-btn{ padding:9px 5px; font-size:11.5px; }
}
.seg-switch.seg-5{ display:flex; width:100%; }
.seg-switch.seg-5 .seg-btn{ min-width:0; padding:9px 10px; gap:6px; }
.seg-switch.seg-5 .seg-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:700px){
  .seg-switch.seg-5 .seg-ic{ display:none; }
  .seg-switch.seg-5 .seg-btn{ padding:9px 6px; font-size:12px; }
}
.seg-btn{
  position:relative; z-index:1; flex:1 1 auto; min-width:150px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 20px; border:none; background:transparent; cursor:pointer;
  color:var(--text-muted); font-family:'DM Sans',sans-serif;
  font-size:13px; font-weight:700; letter-spacing:.4px; border-radius:10px;
  transition:color .2s var(--ease);
}
.seg-btn:hover{ color:var(--text); }
.seg-btn.active{ color:#fff; }
.seg-ic{ font-size:15px; line-height:1; }
.seg-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  transition:background .2s var(--ease), box-shadow .2s var(--ease);
}
.seg-dot.on{ background:#3BD17A; box-shadow:0 0 8px rgba(59,209,122,0.8); }
.seg-dot.off{ background:rgba(255,255,255,0.22); }
.seg-btn.active .seg-dot.off{ background:rgba(255,255,255,0.5); }

/* Panes: only the active one shows */
.wg-pane{ display:none; animation:fadeUp .25s var(--ease); }
.wg-pane.wg-active{ display:block; }

/* Welcome pane — green accent, matching the green embed the bot sends on join
   (goodbye stays the default crimson = red for leaves). */
#wg-pane-welcome .welcome-preview-bar{ background:#10B981; }

/* Boost pane — pink accent, matching Discord's Nitro boost branding (and the
   pink embed the bot actually sends). Overrides the crimson builder/preview
   bars just for this pane. */
.wg-boost .welcome-preview-bar{ background:#F47FFF; }

@media (max-width:560px){
  .seg-switch{ display:flex; width:100%; }
  .seg-btn{ min-width:0; padding:9px 12px; }
}

/* ─── Sidebar clarity: more solid surface + brighter, higher-contrast text ── */
.sidebar{
  background:
    linear-gradient(180deg, rgba(232,25,44,0.06), transparent 220px),
    rgba(13,15,21,0.96) !important;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-right:1px solid rgba(255,255,255,0.08) !important;
}
/* Nav links: lighter by default so they read clearly, not greyed-out */
.nav-item{ color:#CDD2DE !important; font-weight:600; }
.nav-item .nav-ic{ color:#C2C7D4; }
.nav-item:hover{ background:rgba(255,255,255,0.05) !important; color:#FFFFFF !important; }
.nav-item:hover .nav-ic{ color:#FFFFFF; }
.nav-item.active{
  background:var(--crimson-dim) !important;
  color:#FF5566 !important;
  border-color:var(--crimson-border) !important;
}
.nav-item.active .nav-ic{ color:var(--crimson-2); }
/* Section / group headers: brighter + crisper */
.nav-group-label,
.nav-group-header,
.nav-group-title{ color:#9BA2B2 !important; }
.nav-group-count{ color:#7E8596 !important; }

/* Footer user card: a clear, slightly elevated panel — no fade into the bg */
.sb-foot{
  background:rgba(16,19,27,0.98) !important;
  border-top:1px solid rgba(255,255,255,0.1) !important;
  box-shadow:0 -8px 20px -12px rgba(0,0,0,0.7);
}
.sb-user{ border:1px solid transparent; }
.sb-user:hover{ background:rgba(255,255,255,0.06) !important; border-color:rgba(255,255,255,0.08); }
.sb-avatar{ box-shadow:0 0 0 2px rgba(255,255,255,0.1), 0 4px 12px -4px rgba(232,25,44,0.5); }
.sb-uname{ color:#F2F4F8 !important; font-size:13px !important; }
.sb-tag{ color:#A7AEBD !important; }
.sb-logout{ color:#9098A8 !important; }
.sb-logout:hover{ color:#FF5566 !important; }

/* ─── Welcome embed builder (the embed IS the editor) ────────────────────── */
.emb-canvas{
  display:flex; align-items:stretch;
  min-width:0; max-width:100%;
  background:rgba(8,10,14,0.55);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px; overflow:hidden;
}
.emb-input{
  width:100%; background:rgba(255,255,255,0.03);
  border:1px dashed rgba(255,255,255,0.13); border-radius:8px;
  padding:9px 12px; color:var(--text); font-family:inherit; outline:none;
  transition:border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.emb-input::placeholder{ color:var(--text-dim); }
.emb-input:hover{ border-color:rgba(255,255,255,0.22); }
.emb-input:focus{ border-style:solid; border-color:var(--crimson); background:rgba(232,25,44,0.05); box-shadow:0 0 0 3px rgba(232,25,44,0.12); }
.emb-input-desc{ font-size:13px; line-height:1.5; resize:vertical; min-height:88px; }

/* ─── Server Discovery tab ────────────────────────────────────────────────── */
.discovery-status-banner{ border-radius:10px; padding:12px 16px; margin-bottom:16px; font-size:13px; line-height:1.5; }
.discovery-status-banner.st-pending{ background:rgba(243,156,18,0.1); border:1px solid rgba(243,156,18,0.3); color:#f5b041; }
.discovery-status-banner.st-approved{ background:rgba(46,204,113,0.1); border:1px solid rgba(46,204,113,0.3); color:#5fd38d; }
.discovery-status-banner.st-rejected{ background:rgba(232,25,44,0.1); border:1px solid rgba(232,25,44,0.3); color:var(--crimson-2); }
.discovery-status-banner a{ color:inherit; text-decoration:underline; }
.discovery-guild-tag-row{ display:flex; align-items:center; gap:8px; margin:6px 0 8px; flex-wrap:wrap; }
.discovery-guild-tag-label{ font-size:10px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; font-weight:700; }
.discovery-guild-tag-badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#fff;
  background:linear-gradient(135deg, rgba(88,101,242,0.25), rgba(232,25,44,0.10)); border:1px solid rgba(88,101,242,0.45);
  border-radius:999px; padding:5px 10px; font-weight:800; font-family:'JetBrains Mono',monospace; }
.discovery-guild-tag-badge::before{ content:"◆"; color:#8EA1FF; font-size:10px; }
.discovery-tags-selected{ display:flex; flex-wrap:wrap; gap:7px; margin-top:6px; }
.discovery-tags-selected:empty{ display:none; }
.discovery-tag-pill{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text);
  background:rgba(232,25,44,0.1); border:1px solid var(--crimson-border); border-radius:999px; padding:6px 8px 6px 13px; }
.discovery-tag-pill button{ background:none; border:none; color:var(--text-muted); font-size:15px; line-height:1;
  cursor:pointer; padding:0 2px; }
.discovery-tag-pill button:hover{ color:var(--crimson-2); }
.discovery-tag-search-wrap{ position:relative; margin-top:8px; max-width:360px; }
.discovery-tag-search-wrap input{ width:100%; background:rgba(255,255,255,0.03); border:1px dashed rgba(255,255,255,0.13);
  border-radius:8px; padding:9px 12px; color:var(--text); font-family:inherit; font-size:13px; outline:none;
  transition:border-color .15s; }
.discovery-tag-search-wrap input:focus{ border-style:solid; border-color:var(--crimson); }
.discovery-tag-validation{ min-height:18px; margin-top:7px; font-size:12px; color:var(--text-dim); font-weight:600; line-height:1.45; }
.discovery-tag-validation.error{ color:#FF6B78; }
.discovery-tag-validation.ok{ color:#5FD38D; }
.discovery-tag-dropdown{ position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20; max-height:220px;
  overflow-y:auto; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:5px;
  box-shadow:0 12px 32px rgba(0,0,0,0.4); }
.discovery-tag-option{ font-size:12.5px; color:var(--text-muted); padding:7px 9px; border-radius:6px; cursor:pointer; transition:.1s; }
.discovery-tag-option:hover,.discovery-tag-option.hl{ background:rgba(232,25,44,0.12); color:var(--text); }
.discovery-tag-empty{ font-size:12px; color:var(--text-dim); padding:7px 9px; }

.discovery-media-row{ display:flex; gap:12px; align-items:stretch; }
.discovery-icon-zone{ flex:0 0 104px; width:104px; height:104px; border:1px dashed rgba(255,255,255,0.14); border-radius:13px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:var(--text-dim); font-size:11px; cursor:pointer; background:rgba(255,255,255,0.02);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:border-color .18s var(--ease), color .18s var(--ease); position:relative; }
.discovery-icon-zone:hover{ border-color:rgba(232,25,44,0.5); color:var(--text-muted); }
.discovery-icon-zone.has-img{ border-style:solid; border-color:rgba(255,255,255,0.12); align-items:flex-end; justify-content:flex-end; padding:8px; }
.discovery-banner-zone{ flex:1; min-height:140px; border:1px dashed rgba(255,255,255,0.14); border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:var(--text-dim); font-size:12px; cursor:pointer; background:rgba(255,255,255,0.02);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:border-color .18s var(--ease), color .18s var(--ease); position:relative; }
.discovery-banner-zone:hover{ border-color:rgba(232,25,44,0.5); color:var(--text-muted); }
.discovery-banner-zone.has-img{ border-style:solid; border-color:rgba(255,255,255,0.12); justify-content:flex-end; align-items:flex-end; padding:10px; }

/* Locked media zones (icon is always locked to the server icon; banner locks
   when the server has its own Discord banner). Solid border, no hover affordance,
   no upload/clear controls — just a small lock badge to signal it's automatic. */
.cbotcrop-stage{ position:relative; width:100%; overflow:hidden; background:#0d0f14; border:1px solid var(--border,#2a2d36); cursor:grab; touch-action:none; }
.cbotcrop-stage.is-avatar{ aspect-ratio:1; max-width:360px; margin:0 auto; border-radius:50%; }
.cbotcrop-stage.is-banner{ aspect-ratio:680/240; border-radius:10px; }
.discovery-icon-zone.locked,.discovery-banner-zone.locked{ cursor:default; border-style:solid; border-color:rgba(255,255,255,0.10); }
.discovery-icon-zone.locked:hover,.discovery-banner-zone.locked:hover{ border-color:rgba(255,255,255,0.10); color:var(--text-dim); }
.discovery-lock-badge{ display:none; position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:8px;
  align-items:center; justify-content:center; font-size:12px; background:rgba(0,0,0,0.55);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.discovery-icon-zone.locked .discovery-lock-badge,.discovery-banner-zone.locked .discovery-lock-badge{ display:flex; }
.discovery-media-note{ font-size:11px; color:var(--text-muted); margin-top:8px; line-height:1.5; }

@media (max-width:560px){ .discovery-media-row{ flex-direction:column; } .discovery-icon-zone{ width:100%; height:140px; } }

/* Live listing preview — keep in sync with /root/Website/discovery.html .dsc-card-* */
#tab-discovery .info-card{ position:sticky; top:20px; }
.discovery-preview-card{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface-2); }
.discovery-preview-banner{ width:100%; aspect-ratio:16/7; background:radial-gradient(130% 150% at 0% 0%,rgba(232,25,44,0.14),transparent 60%),var(--surface-3);
  background-size:cover; background-position:center; background-repeat:no-repeat; }
.discovery-preview-body{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:7px; }
.discovery-preview-head{ display:flex; align-items:center; gap:10px; }
.discovery-preview-icon{ width:38px; height:38px; border-radius:10px; object-fit:cover; background:var(--surface-3); flex:0 0 auto; border:2px solid var(--surface-2); box-shadow:0 2px 8px rgba(0,0,0,.35); }
.discovery-preview-name{ font-size:15.5px; font-weight:700; color:var(--text); line-height:1.3; }
.discovery-preview-members{ font-size:11.5px; color:var(--text-dim); }
.discovery-preview-tagline{ font-size:13px; color:var(--text-muted); line-height:1.5; }
.discovery-preview-tags{ display:flex; flex-wrap:wrap; gap:5px; }
.discovery-preview-tags:empty{ display:none; }
.discovery-preview-tag{ font-size:10.5px; color:var(--text-dim); background:rgba(255,255,255,0.04);
  border:1px solid var(--border); border-radius:999px; padding:2px 9px; }
.discovery-preview-guild-tag{ color:#C9D4FF; background:rgba(88,101,242,0.14); border-color:rgba(88,101,242,0.34); }
.discovery-preview-guild-tag::before{ content:"◆ "; color:#8EA1FF; }

/* Display-mode visibility (class lives on #wb-stack so editor + preview share it) */
.wb-mode-embed .wb-text-only{ display:none !important; }
.wb-mode-text .wb-embed-only{ display:none !important; }

/* Compact welcome (Welcome pane only) */
.wb-compact .cp-body{ padding-top:12px; }
.wb-compact .cp-section{ margin-top:14px; }
.wb-top{ display:flex; flex-direction:column; gap:12px; }
.wb-top .wb-look .seg-switch{ margin:0; width:100%; max-width:280px; }
.wb-top .wb-look .seg-btn{ min-width:0; padding:9px 14px; }
.wb-top .wb-channel{ margin-bottom:0; }
.wb-top .ch-picker-wrap{ width:100%; min-width:0; }
.wb-pics{ display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px; margin:8px 0; }
.wb-pic{
  aspect-ratio:16/8; border-radius:8px; border:1px solid var(--border);
  background:var(--surface-2) center/cover no-repeat; cursor:pointer;
  position:relative; overflow:hidden;
}
.wb-pic.is-on{ outline:2px solid var(--crimson-2); outline-offset:1px; }
.wb-pic.is-empty{ display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--text-dim); text-align:center; padding:6px; }

/* Upload + Default tiles. Uploading used to be reachable only from the embed
   editor's image zone, so Simple Text mode had no way to add a picture at all. */
.wb-pic-upload, .wb-pic-default, .wb-pic-gallery{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:rgba(255,255,255,0.03); border:1px dashed rgba(255,255,255,0.16);
  color:var(--text-muted); cursor:pointer;
}
.wb-pic-upload:hover, .wb-pic-default:hover, .wb-pic-gallery:hover{
  border-color:var(--crimson-border); color:var(--crimson-2);
  background:rgba(232,25,44,0.06);
}
.wb-pic-upload span, .wb-pic-default span, .wb-pic-gallery span{ font-size:18px; line-height:1; }
.wb-pic-upload small, .wb-pic-default small, .wb-pic-gallery small{ font-size:10px; letter-spacing:.02em; }
/* The gallery tile is the one that opens the 16-banner dialog, so it reads as
   the primary choice in the row rather than another dashed placeholder. */
.wb-pic-gallery{
  border-style:solid; border-color:var(--crimson-border);
  background:rgba(232,25,44,0.08); color:var(--text);
}

/* An embed image zone with the picture removed — visibly empty rather than
   just showing whatever the fallback would be. */
.emb-image.is-off{
  border-style:dashed !important;
  border-color:rgba(255,255,255,0.16) !important;
  background-color:rgba(255,255,255,0.02) !important;
  color:var(--text-dim);
}

/* "Attach a picture" switch. With it off the greeting goes out as a genuinely
   plain message — no custom banner and no Cyndrix default either. */
.wb-img-toggle{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px;
}
.wb-img-toggle input{ width:15px; height:15px; accent-color:var(--crimson); cursor:pointer; }
/* Off: the tiles stay readable but clearly inert — you can still see which
   banner is chosen, it just isn't going to be sent. */
.wb-pics.is-off{ opacity:0.35; pointer-events:none; filter:saturate(0.5); }

.wprev-card{ width:100%; max-height:160px; object-fit:cover; border-radius:8px; margin-top:10px; }
.wprev-card-img{
  display:block; width:100%; aspect-ratio:920/320; object-fit:cover;
  border-radius:8px; margin-top:10px; background:#10060a;
  box-shadow:0 8px 24px -12px rgba(0,0,0,0.7);
}
.welcome-preview-body .wprev-card-img{ margin-top:8px; }
.wb-card-tools{
  display:grid; grid-template-columns:minmax(0,1fr) 88px; gap:14px;
  align-items:end; margin-top:14px;
}
.wb-card-tools .field-row{ margin-bottom:0; }
.wb-card-tools input[type=range]{
  width:100%; accent-color:var(--crimson-2); cursor:pointer;
  height:22px;
}
#welcome-blur-val{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--crimson-2);
}
.wcard{
  position:relative; width:100%; aspect-ratio:920/320; margin-top:10px;
  border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding:10px 12px 12px; text-align:center;
}
.wcard-bg{
  position:absolute; inset:-10px;
  background:#10060a url('/assets/welcome-default.jpg') center/cover no-repeat;
  filter:blur(3.5px); transform:scale(1.06);
}
.wcard-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,6,10,0.12), rgba(10,6,10,0.28) 50%, rgba(10,6,10,0.5));
}
.wcard-mark{
  position:absolute; left:0; right:0; top:52%;
  font-family:'Inter Bold','DM Sans',sans-serif; font-weight:800; font-size:clamp(14px,3.6vw,22px);
  letter-spacing:.08em; color:rgba(255,255,255,0.08); pointer-events:none;
}
.wcard-av{
  position:relative; z-index:1; width:28%; max-width:72px; aspect-ratio:1;
  border-radius:50%; object-fit:cover; background:#2a1420;
  border:3px solid rgba(255,255,255,0.94);
  box-shadow:0 0 0 3px rgba(232,25,44,0.45);
  margin-bottom:6px;
}
.wcard-av:not([src]), .wcard-av[src=""]{ opacity:0; }
.wcard-name{
  position:relative; z-index:1;
  font-family:'Inter Bold','DM Sans',sans-serif; font-weight:700;
  font-size:clamp(11px,2.4vw,14px); color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,0.7);
  line-height:1.25; max-width:100%;
}
.wcard-count{
  position:relative; z-index:1; margin-top:3px;
  font-size:clamp(10px,1.8vw,12px); font-weight:600; color:rgba(255,255,255,0.86);
  text-shadow:0 1px 6px rgba(0,0,0,0.65);
}
.welcome-preview-body .wcard{ margin-top:8px; }
.lvl-card-mock{
  margin-top:10px; display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; overflow:hidden;
  background:linear-gradient(90deg,#1b2433,#121820);
}
.lvl-card-av{ width:42px; height:42px; border-radius:50%; background:#2b3546; flex:0 0 auto; }
.lvl-card-meta{ min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.lvl-card-meta b{ font-size:13px; color:#fff; }
.lvl-card-meta span{ font-size:10px; color:#c5ccda; letter-spacing:.04em; }
.lvl-card-meta i{ display:block; height:6px; border-radius:99px; background:linear-gradient(90deg,var(--crimson-2),#7a1020 55%,rgba(255,255,255,.12) 55%); }

/* Plain-text preview bubble */
.wprev-text{ background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:14px 16px; }
.wprev-text-ping{ font-size:13px; color:var(--text); margin-bottom:6px; }
.wprev-text-body{ font-size:14px; color:var(--text); line-height:1.55; white-space:pre-wrap; word-break:break-word; }

.sb-filter{ padding:0 10px 10px; }
.sb-filter input{
  width:100%; min-height:36px; padding:8px 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,0.08); background:rgba(8,10,14,0.55);
  color:var(--text); font-size:12px;
}
.sb-filter input:focus{ outline:none; border-color:rgba(232,25,44,0.45); }

/* ─── Economy tab ────────────────────────────────────────────────────────── */
#tab-economy .eco-side{ position:sticky !important; top:16px; z-index:6; align-self:start; }
#tab-economy .eco-chip{
  display:flex; align-items:center; gap:12px;
  padding:14px 14px; border-radius:14px;
  background:linear-gradient(135deg, rgba(232,184,74,0.16), rgba(232,25,44,0.06));
  border:1px solid rgba(232,184,74,0.28);
}
.eco-chip-ic{ font-size:28px; line-height:1; }
.eco-chip-name{ font-family:'DM Sans',sans-serif; font-size:16px; font-weight:800; color:#F5E6B8; }
.eco-chip-sub{ font-size:11px; color:var(--text-muted); margin-top:2px; }
.eco-help{ font-size:13px; color:var(--text); line-height:1.55; }
.eco-help p{ margin:0 0 10px; }
.eco-help p:last-child{ margin-bottom:0; }
.eco-help b{ color:#F5E6B8; }
.eco-shop-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.eco-shop-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 12px; border-radius:12px;
  background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.08);
}
.eco-si-ic{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(232,184,74,0.12); border:1px solid rgba(232,184,74,0.22);
  font-size:16px;
}
.eco-si-main{ flex:1; min-width:0; }
.eco-si-name{ font-weight:700; font-size:14px; }
.eco-si-meta{ font-size:12px; color:var(--text-dim); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eco-si-price{
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700;
  color:#F5E6B8; white-space:nowrap;
}
.eco-si-del{
  background:rgba(232,25,44,.14); color:#ff6b78; border:none;
  border-radius:8px; padding:6px 10px; cursor:pointer; font-size:12px; font-weight:700;
}
.eco-si-del:hover{ background:rgba(232,25,44,.3); }
.eco-lb{ display:flex; flex-direction:column; gap:6px; }
.eco-lb-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 8px; border-radius:10px;
}
.eco-lb-row:nth-child(odd){ background:rgba(255,255,255,0.03); }
.eco-lb-rank{ width:28px; text-align:center; font-weight:800; font-size:13px; flex-shrink:0; }
.eco-lb-av{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#E8B84A,#7B0000); color:#fff;
  font-size:11px; font-weight:800;
}
.eco-lb-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:13px; }
.eco-lb-total{ margin-left:auto; font-variant-numeric:tabular-nums; color:#F5E6B8; font-size:12px; font-weight:700; white-space:nowrap; }
.eco-guess-more{
  display:block; width:100%; margin-top:10px; padding:8px 12px;
  border-radius:10px; cursor:pointer; font-weight:700; font-size:12px;
  color:var(--text); background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
}
.eco-guess-more:hover{ border-color:rgba(232,25,44,0.4); }
.eco-btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.eco-btn-row .save-btn, .eco-btn-row .btn-ghost{ width:auto; margin-top:0; }
.eco-btn-reset:hover{ border-color:rgba(232,25,44,0.5); color:#ff6b78; }
@media (max-width:720px){
  .eco-shop-item{ flex-wrap:wrap; }
  .eco-si-price{ margin-left:48px; }
}

/* My Account panes: /assets/dashboard/account-ui.css */

/* ─── Auto-mod module cards + settings modal ─────────────────────────────── */
.am-mod-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px;
  align-items:stretch;
}
@media (max-width:900px){ .am-mod-grid{ grid-template-columns:1fr; } }
.am-mod-card{
  display:flex; flex-direction:column; gap:14px; padding:16px 16px 14px;
  height:100%; min-height:168px; box-sizing:border-box;
  border-radius:16px; border:1px solid rgba(255,255,255,0.09);
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), opacity .18s var(--ease);
}
.am-mod-card:hover{ border-color:rgba(232,25,44,0.35); box-shadow:0 16px 36px -28px rgba(232,25,44,0.45); }
.am-mod-card.is-off{ opacity:.72; }
/* Fixed header band so every card's top row matches height */
.am-mod-card-top{
  display:flex; align-items:flex-start; gap:12px;
  min-height:58px; flex:0 0 auto;
}
.am-mod-ic{
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  background:rgba(232,25,44,0.12); border:1px solid rgba(232,25,44,0.22);
}
.am-mod-meta{ flex:1; min-width:0; }
.am-mod-name{ font-size:14px; font-weight:700; color:var(--text); letter-spacing:.2px; line-height:1.25; }
/* Always reserve 2 description lines so footers line up across the grid */
.am-mod-desc{
  font-size:12px; color:var(--text-muted); line-height:1.4; margin-top:4px;
  min-height:calc(1.4em * 2);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
/* Footer pinned to bottom of every card — log channel always same row */
.am-mod-card-foot{
  margin-top:auto;
  display:grid; grid-template-columns:minmax(0, 1fr) 118px;
  align-items:center; gap:10px;
  width:100%; box-sizing:border-box;
  padding-top:12px; border-top:1px solid rgba(255,255,255,0.06);
}
.am-mod-log{ min-width:0; width:100%; }
.am-mod-log .ch-picker-wrap,
.am-mod-log.ch-picker-wrap{ width:100%; }
.am-mod-log .ch-picker-btn{
  width:100%; min-height:40px; height:40px; font-size:12px;
  box-sizing:border-box;
}
.am-mod-log .ch-name{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.am-mod-settings-btn{
  width:118px; height:40px; padding:0 12px; border-radius:11px; cursor:pointer;
  box-sizing:border-box; white-space:nowrap;
  border:1px solid rgba(232,25,44,0.35);
  background:linear-gradient(180deg, rgba(232,25,44,0.18), rgba(232,25,44,0.08));
  color:#fff; font-size:12px; font-weight:800; font-family:inherit;
  letter-spacing:.3px; box-shadow:0 6px 16px -10px rgba(232,25,44,0.7);
  transition:all .15s var(--ease);
}
.am-mod-settings-btn:hover{
  border-color:rgba(232,25,44,0.65); background:var(--grad-crimson);
  transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(232,25,44,0.75);
}
.am-mod-settings-btn:active{ transform:translateY(0) scale(.98); }

/* Defaults: ladder + decay as two cards. The old 2-col field-row reused the
   118px Settings button for "Edit ladder", which overflowed into decay and
   then sat on top of the tester's "Test message" button. */
.am-strikes-block{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(196px,240px);
  gap:12px;
  align-items:stretch;
  margin-top:4px;
}
.am-strikes-col, .am-decay-col{
  display:flex; flex-direction:column; gap:10px;
  min-width:0;
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface-2);
}
.am-strikes-col-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.am-strikes-col-head .field-desc{ margin-top:4px; }
.am-strikes-col-head .toggle{ flex-shrink:0; margin-top:2px; }
.am-action-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 16px; border-radius:11px;
  box-sizing:border-box; white-space:nowrap; cursor:pointer;
  border:1px solid rgba(232,25,44,0.35);
  background:linear-gradient(180deg, rgba(232,25,44,0.18), rgba(232,25,44,0.08));
  color:#fff; font-size:12px; font-weight:800; font-family:inherit;
  letter-spacing:.3px;
  box-shadow:0 6px 16px -10px rgba(232,25,44,0.7);
  transition:all .15s var(--ease);
}
.am-action-btn:hover{
  border-color:rgba(232,25,44,0.65); background:var(--grad-crimson);
  transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(232,25,44,0.75);
}
.am-action-btn:active{ transform:translateY(0) scale(.98); }
.am-strikes-col .am-action-btn{ width:100%; margin-top:auto; }
.am-decay-field{
  display:flex; align-items:center; gap:10px;
  margin-top:auto;
}
.am-decay-field .field-input{
  width:96px; flex:0 0 96px; max-width:96px;
  height:46px; min-height:46px; margin:0; text-align:center;
}
.am-decay-unit{ font-size:12px; font-weight:700; color:var(--text-muted); white-space:nowrap; }
.am-bw-pack-row{ display:flex; align-items:center; gap:10px; }
.am-bw-pack-row .field-input{ flex:1; min-width:0; }
.am-bw-pack-row .am-action-btn{ width:auto; min-width:118px; flex:0 0 auto; }
.am-bw-words-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.am-bw-count{
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
  color:var(--text-dim); letter-spacing:.3px; white-space:nowrap;
}
.am-harvest-list{ display:flex; flex-direction:column; gap:6px; max-height:420px; overflow:auto; }
.am-harvest-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2);
}
.am-harvest-word{
  font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:700; color:var(--text);
  overflow-wrap:anywhere;
}
.am-harvest-meta{ font-size:11px; color:var(--text-dim); white-space:nowrap; }
@media (max-width:520px){
  .am-bw-pack-row{ flex-direction:column; align-items:stretch; }
  .am-bw-pack-row .am-action-btn{ width:100%; }
}
@media (max-width:720px){
  .am-strikes-block{ grid-template-columns:1fr; }
}

/* ── Strike ladder editor ─────────────────────────────────────────────── */
.am-ladder-summary{
  margin-top:0; padding:7px 11px; border-radius:9px;
  background:var(--surface-3); border:1px solid var(--border);
  color:var(--text-dim); font-size:12px; font-weight:700; letter-spacing:.2px;
  overflow-wrap:anywhere;
}
.am-ladder-controls{ display:flex; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap; }
.am-ladder-list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.am-ladder-row{
  display:grid; grid-template-columns:28px minmax(0,1fr) 104px auto;
  align-items:center; gap:10px;
  padding:8px; border-radius:11px;
  background:var(--surface-2); border:1px solid var(--border);
}
.am-ladder-num{
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(232,25,44,0.16); border:1px solid rgba(232,25,44,0.32);
  color:#fff; font-size:12px; font-weight:800;
}
.am-ladder-row .field-input{ height:36px; margin:0; }
.am-ladder-mute{ display:flex; align-items:center; gap:6px; }
.am-ladder-mute .field-input{ width:66px; text-align:center; padding-left:6px; padding-right:6px; }
.am-ladder-unit{ font-size:11px; color:var(--text-dim); font-weight:700; }
.am-ladder-btns{ display:flex; gap:4px; }
.am-ladder-btns .rr-icon-btn{ width:28px; height:28px; font-size:12px; }
.am-ladder-empty{
  padding:14px; text-align:center; font-size:12px; font-style:italic;
  color:var(--text-dim); border:1px dashed var(--border); border-radius:11px;
}
.am-ladder-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.am-ladder-add, .am-ladder-reset{
  height:36px; padding:0 14px; border-radius:10px; cursor:pointer;
  font-size:12px; font-weight:800; font-family:inherit; letter-spacing:.3px;
  border:1px solid var(--border); background:var(--surface-3); color:var(--text);
  transition:background .15s, border-color .15s, opacity .15s;
}
.am-ladder-add:hover:not(:disabled), .am-ladder-reset:hover{
  background:var(--crimson-dim); border-color:var(--crimson-border);
}
.am-ladder-add:disabled{ opacity:.4; cursor:not-allowed; }
@media (max-width:560px){
  .am-ladder-row{ grid-template-columns:28px minmax(0,1fr); row-gap:8px; }
  .am-ladder-mute{ grid-column:2; }
  .am-ladder-btns{ grid-column:2; justify-content:flex-end; }
}
.am-settings-modal{ width:min(640px, 96vw) !important; max-height:86vh; }
.am-settings-modal.is-wide{ width:min(920px, 96vw) !important; max-height:92vh; }
.am-bw-board{
  display:flex; flex-wrap:wrap; align-content:flex-start; gap:8px;
  min-height:220px; max-height:min(44vh, 420px); overflow:auto;
  padding:12px; border:1px solid var(--border); border-radius:12px;
  background:var(--surface-2);
}
.am-bw-empty{
  width:100%; padding:28px 12px; text-align:center;
  font-size:13px; color:var(--text-dim);
}
.am-bw-chip{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  padding:5px 6px 5px 10px; border-radius:999px;
  background:var(--surface-3); border:1px solid var(--border);
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text);
}
.am-bw-chip-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.am-bw-chip-x{
  width:18px; height:18px; border:none; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,0.08); color:var(--text-muted);
  font-size:13px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
}
.am-bw-chip-x:hover{ background:var(--crimson); color:#fff; }
.am-bw-add-row{ display:flex; align-items:center; gap:10px; }
.am-bw-add-row .field-input{ flex:1; min-width:0; }
.am-bw-add-row .am-action-btn{ width:auto; min-width:88px; flex:0 0 auto; }
/* This modal drops the account modal's side-nav, so the body goes display:block —
   which takes .acct-modal-content out of the flex flow and strips the height bound
   that made it the scroller. Without a scroller here, a pane taller than the modal
   is silently clipped by .acct-modal{overflow:hidden}. Scroll on the body instead. */
.am-settings-body-only{ display:block !important; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.am-settings-body-only > .acct-modal-content{ overflow:visible; }
.am-settings-head-ic{
  width:48px; height:48px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:24px;
  background:rgba(232,25,44,0.14); border:1px solid rgba(232,25,44,0.28);
}
.am-settings-actions{
  display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap;
  margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.08);
}
/* Distinct modal buttons (not two identical save-btns) */
.am-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 22px; border-radius:12px; cursor:pointer;
  font-size:13px; font-weight:800; font-family:'DM Sans',sans-serif;
  letter-spacing:.4px; border:1px solid transparent;
  transition:all .16s var(--ease); user-select:none;
}
.am-btn:active{ transform:scale(.98); }
.am-btn-ghost{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.14);
  color:var(--text);
}
.am-btn-ghost:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.22);
}
.am-btn-primary{
  background:var(--grad-crimson, linear-gradient(135deg,#e8192c,#c41220));
  border-color:rgba(232,25,44,0.5);
  color:#fff;
  box-shadow:0 8px 22px -10px rgba(232,25,44,0.75);
}
.am-btn-primary:hover{
  filter:brightness(1.06);
  box-shadow:0 12px 28px -10px rgba(232,25,44,0.85);
  transform:translateY(-1px);
}
/* Chip-style toggle buttons for match options */
.am-chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.am-chip-btn{ position:relative; cursor:pointer; margin:0; display:block; }
.am-chip-btn input{
  position:absolute; opacity:0; pointer-events:none; width:0; height:0;
}
.am-chip-face{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:40px; padding:0 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.03);
  color:var(--text-muted); font-size:12px; font-weight:700;
  transition:all .15s var(--ease); user-select:none;
}
.am-chip-btn:hover .am-chip-face{
  border-color:rgba(255,255,255,0.2); color:var(--text);
  background:rgba(255,255,255,0.06);
}
.am-chip-btn input:checked + .am-chip-face{
  border-color:rgba(232,25,44,0.55);
  background:linear-gradient(180deg, rgba(232,25,44,0.22), rgba(232,25,44,0.1));
  color:#fff;
  box-shadow:0 0 0 1px rgba(232,25,44,0.15), 0 8px 18px -12px rgba(232,25,44,0.6);
}
.am-chip-btn input:focus-visible + .am-chip-face{
  outline:2px solid rgba(232,25,44,0.55); outline-offset:2px;
}

/* My Account modal: /assets/dashboard/account-ui.css */

/* ─── Billing: plan comparison + add-ons ─────────────────────────────────── */
.cmp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cmp-col{
  position:relative; padding:22px 20px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border:1px solid rgba(255,255,255,0.09);
  display:flex; flex-direction:column;
}
.cmp-col-ultimate{
  border-color:rgba(255,215,0,0.45);
  background:linear-gradient(180deg, rgba(255,215,0,0.07), rgba(255,255,255,0.012));
  box-shadow:0 18px 40px -28px rgba(255,215,0,0.5);
}
.cmp-flag{
  position:absolute; top:-10px; right:16px; font-size:9px; font-weight:800; letter-spacing:1px;
  padding:3px 10px; border-radius:999px; font-family:'JetBrains Mono',monospace;
  background:var(--grad-gold); color:#241a00; box-shadow:0 4px 12px -2px rgba(255,215,0,0.6);
}
.cmp-name{ font-family:'DM Sans',sans-serif; font-size:16px; font-weight:800; color:#fff; }
.cmp-price{ font-family:'Bebas Neue',sans-serif; font-size:40px; line-height:1; letter-spacing:1px; color:var(--text); margin-top:6px; }
.cmp-price span{ font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; color:var(--text-muted); letter-spacing:0; }
.cmp-tag{ font-size:12px; color:var(--text-muted); margin-top:4px; margin-bottom:14px; }
.cmp-feats{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
.cmp-feats li{ position:relative; padding-left:24px; font-size:13px; color:var(--text); line-height:1.4; }
.cmp-feats li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--crimson-2); font-weight:800; }
.cmp-feats-gold li::before{ color:var(--gold); }
.cmp-cta{ width:100%; }
.cmp-cta-gold{ background:var(--grad-gold) !important; color:#241a00 !important; }
.cmp-cta-gold::after{ display:none; }

.addon-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
@media (max-width:900px){ .addon-grid{ grid-template-columns:1fr 1fr; } }
.addon-card{
  display:flex; align-items:center; gap:14px; padding:16px;
  border-radius:14px; border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.02); position:relative;
  transition:.2s var(--ease);
}
.addon-card:hover{ border-color:var(--crimson-border); background:rgba(232,25,44,0.04); }
.addon-card.is-soon{ filter:saturate(.85); opacity:.92; border-style:dashed; }
.addon-buy{
  flex-shrink:0; padding:9px 16px; border-radius:10px; border:none; cursor:pointer;
  background:var(--grad-crimson); color:#fff; font-weight:800; font-size:13px;
  font-family:'JetBrains Mono',monospace; letter-spacing:.5px;
  box-shadow:0 6px 18px -8px var(--glow-crimson); transition:.2s var(--ease);
}
.addon-buy:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -8px var(--glow-crimson); }
.addon-buy:disabled{ opacity:.6; cursor:default; transform:none; }
.addon-ic{
  width:42px; height:42px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
}
.addon-info{ flex:1; min-width:0; }
.addon-title{ font-size:14px; font-weight:700; color:var(--text); }
.addon-desc{ font-size:12px; color:var(--text-muted); margin-top:2px; line-height:1.4; }
.addon-soon{
  flex-shrink:0; font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; font-family:'JetBrains Mono',monospace;
  background:rgba(255,165,0,0.12); color:#FFB444; border:1px solid rgba(255,165,0,0.3);
}
.addon-note{
  margin-top:14px; padding:12px 16px; border-radius:10px; font-size:12px; color:var(--text); line-height:1.5;
  background:linear-gradient(135deg, rgba(255,215,0,0.06), rgba(232,25,44,0.04));
  border:1px solid rgba(255,215,0,0.18);
}
@media (max-width:680px){
  .cmp-grid, .addon-grid{ grid-template-columns:1fr; }
}

/* ─── Let the aurora show through the main area ───────────────────────────── */
.dash-main{ background:transparent !important; }
.dash-content{ background:transparent !important; }
#view-dashboard, #view-picker, #view-owner, #view-cs, #view-survey-panel{ background:transparent !important; }

/* ─── Member Growth analytics (Statistics tab) ───────────────────────────── */
.mgrowth-panel{ padding:18px 20px; }
.mgrowth-head{ display:flex; justify-content:flex-end; margin-bottom:14px; }
.mgrowth-ranges{ display:inline-flex; gap:4px; padding:4px; border-radius:10px;
  background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.08); }
.mgrowth-range{
  border:none; background:transparent; cursor:pointer; color:var(--text-muted);
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
  padding:5px 12px; border-radius:7px; transition:all .15s var(--ease);
}
.mgrowth-range:hover{ color:var(--text); }
.mgrowth-range.active{ background:var(--grad-crimson); color:#fff; box-shadow:0 4px 12px -4px rgba(232,25,44,0.6); }
.mgrowth-stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:18px; }
.mgrowth-stat{ padding:14px; border-radius:12px; background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07); text-align:center; }
.mgrowth-stat-val{ font-family:'Bebas Neue',sans-serif; font-size:30px; line-height:1; letter-spacing:1px; color:var(--text); }
.mgrowth-stat-lbl{ font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-top:6px; font-weight:600; }
.mgrowth-stat.green .mgrowth-stat-val{ color:#3BD17A; }
.mgrowth-stat.red .mgrowth-stat-val{ color:#FF5566; }
.mgrowth-stat.teal .mgrowth-stat-val{ color:#2DD4BF; }
.mgrowth-chart{ width:100%; }
.mgrowth-note{ font-size:12px; color:var(--text-muted); margin-top:12px; text-align:center; line-height:1.5; }

.cx-svg{ width:100%; height:auto; display:block; }
.cx-axislbl{ fill:var(--text-dim); font-size:11px; font-family:'JetBrains Mono',monospace; }
.cx-grid{ stroke:rgba(255,255,255,0.08); stroke-width:1; }
.cx-empty{ padding:28px 14px; text-align:center; font-size:13px; color:var(--text-muted); }

@media (max-width:680px){
  .mgrowth-stats{ grid-template-columns:repeat(2,1fr); }
}

/* ─── Analytics: section subtitle + horizontal bar list (top channels) ────── */
.stx-subtitle{ font-size:11px; text-transform:uppercase; letter-spacing:1.5px; font-weight:700;
  color:var(--text-muted); margin:18px 0 10px; }
.cx-barlist{ display:flex; flex-direction:column; gap:8px; }
.cx-bar-row{ display:flex; align-items:center; gap:12px; }
.cx-bar-label{ flex:0 0 140px; font-size:12px; color:var(--text); font-family:'JetBrains Mono',monospace;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-bar-track{ flex:1; height:10px; border-radius:99px; background:rgba(255,255,255,0.05); overflow:hidden; }
.cx-bar-fill{ height:100%; border-radius:99px; transition:width .4s var(--ease); min-width:3%; }
.cx-bar-val{ flex:0 0 auto; min-width:54px; text-align:right; font-size:12px; font-weight:700;
  color:var(--text); font-family:'JetBrains Mono',monospace; }
@media (max-width:560px){ .cx-bar-label{ flex-basis:88px; } }

/* ═══════════════════════════════════════════
   TICKET ARCHIVE — closed-ticket transcripts
   ═══════════════════════════════════════════ */
.ticket-archive-search-row{ display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.ticket-archive-search-row .field-input{ flex:1 1 240px; }
.ticket-archive-list{ display:flex; flex-direction:column; gap:8px; }
.ta-empty{ font-size:12px; color:var(--text-dim); padding:14px 4px; text-align:center; }

.ta-row{ display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--border); cursor:pointer;
  transition:border-color .15s var(--ease), transform .15s var(--ease), background .15s var(--ease); }
.ta-row:hover{ border-color:var(--crimson); background:var(--crimson-dim); transform:translateX(2px); }
.ta-row-main{ flex:1; min-width:0; }
.ta-row-id{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; color:var(--crimson-2); }
.ta-row-subject{ font-size:13px; color:var(--text); margin:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ta-row-meta{ font-size:11px; color:var(--text-dim); }
.ta-status{ display:inline-block; margin-left:8px; padding:1px 7px; border-radius:5px; font-size:9px;
  font-weight:700; letter-spacing:.4px; text-transform:uppercase; vertical-align:middle; border:1px solid; }
.ta-status-ok{ color:#7ee2a8; background:rgba(59,165,93,0.12); border-color:rgba(59,165,93,0.4); }
.ta-status-bad{ color:#f0a0a3; background:rgba(232,25,44,0.12); border-color:rgba(232,25,44,0.4); }
.ta-status-dim{ color:var(--text-muted); background:var(--surface); border-color:var(--border); }
.ta-row-actions{ display:flex; gap:6px; flex:0 0 auto; }
.tk-check{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--text); margin:8px 0; line-height:1.45; }
.tk-check input{ margin-top:2px; }
.ta-stars{ color:#f5c542; letter-spacing:1px; font-size:12px; margin-left:6px; }
.ta-skip{ font-size:10px; color:var(--text-dim); margin-left:6px; }

/* Conversation viewer (chat-style) */
.ta-viewer-sub{ font-size:11px; color:var(--text-dim); margin-top:3px; }
.ta-chat{ display:flex; flex-direction:column; gap:10px; max-height:60vh; overflow-y:auto; padding-right:4px; }
.ta-msg{ padding:9px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--crimson); }
.ta-msg-bot{ border-left-color:#5865F2; opacity:0.9; }
.ta-msg-head{ display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.ta-msg-author{ font-size:12px; font-weight:700; color:var(--text); }
.ta-msg-tag{ font-size:9px; font-weight:700; letter-spacing:.5px; background:#5865F2; color:#fff;
  padding:1px 5px; border-radius:4px; }
.ta-msg-time{ font-size:10px; color:var(--text-dim); margin-left:auto; font-family:'JetBrains Mono',monospace; }
.ta-msg-body{ font-size:13px; color:var(--text); line-height:1.5; word-break:break-word; }
.ta-msg-atts{ margin-top:5px; display:flex; flex-direction:column; gap:3px; }
.ta-msg-atts a{ font-size:11px; color:var(--crimson-2); text-decoration:none; }
.ta-msg-atts a:hover{ text-decoration:underline; }
@media (max-width:560px){ .ta-row-actions{ flex-wrap:wrap; } .ta-chat{ max-height:70vh; } }

/* ═══════════════════════════════════════════
   TICKET TYPES — multi-type list, inline editor, intake form builder
   ═══════════════════════════════════════════ */
/* Right-side "How to set up" numbered guide */
.tk-guide{ list-style:none; margin:0; padding:0; counter-reset:tkstep; display:flex; flex-direction:column; gap:9px; }
.tk-guide li{ counter-increment:tkstep; position:relative; padding-left:30px; font-size:12px;
  line-height:1.5; color:var(--text-muted); }
.tk-guide li::before{ content:counter(tkstep); position:absolute; left:0; top:0;
  width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff; background:var(--crimson);
  box-shadow:0 4px 10px -4px rgba(232,25,44,0.6); }
.tk-guide li b{ color:var(--text); font-weight:600; }
.tk-guide a{ text-decoration:none; }
.tk-guide a:hover{ text-decoration:underline; }

/* ── Setup / Duty frame: step strip, folded groups, help panel ──
   Replaces the right-hand info-card wall. The strip is instructions for a new
   server and a status line for a configured one, in the same space. */
.tk-frame{ display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap;
  margin:0 0 16px; }
.tk-steps{ flex:1 1 520px; min-width:0; display:flex; align-items:stretch; gap:0;
  border:1px solid var(--border); border-radius:14px; background:var(--surface);
  padding:4px; overflow:hidden; }
.tk-step{ flex:1 1 0; min-width:0; display:flex; align-items:center; gap:8px;
  padding:9px 10px; border-radius:10px; font-size:12px; color:var(--text-muted);
  line-height:1.3; position:relative; }
.tk-step + .tk-step::before{ content:''; position:absolute; left:-1px; top:50%;
  width:1px; height:18px; margin-top:-9px; background:var(--border); }
.tk-step-num{ flex:0 0 20px; height:20px; border-radius:6px; display:flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:700;
  color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border); }
.tk-step-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-step.done .tk-step-num{ color:#7ee2a8; background:rgba(59,165,93,0.14);
  border-color:rgba(59,165,93,0.4); }
.tk-step.current{ background:var(--surface-2); color:var(--text); }
.tk-step.current .tk-step-num{ color:#fff; background:var(--crimson); border-color:transparent;
  box-shadow:0 4px 10px -4px rgba(232,25,44,0.6); }
.tk-steps-done{ display:flex; align-items:center; gap:9px; padding:11px 14px;
  font-size:12.5px; color:var(--text); }
.tk-steps-done .tk-ok{ color:#7ee2a8; font-weight:700; }
.tk-frame-btn{ flex:0 0 auto; font-size:12px; font-weight:600; color:var(--text-muted);
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:11px 14px; cursor:pointer; transition:border-color .15s var(--ease), color .15s var(--ease); }
.tk-frame-btn:hover{ border-color:var(--crimson); color:var(--crimson-2); }
.tk-frame-btn[aria-expanded="true"]{ border-color:var(--crimson); color:var(--crimson-2); }
.tk-help{ display:none; border:1px solid var(--border); border-radius:14px;
  background:var(--surface); margin:0 0 16px; }
.tk-help.open{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.tk-help .info-section{ border-bottom:none; border-right:1px solid var(--border); }
.tk-help .info-section:last-child{ border-right:none; }

/* Two essentials side by side; one column once the pane gets narrow. */
.field-row.tk-two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:820px){ .field-row.tk-two{ grid-template-columns:1fr; } }

/* Folded settings group — one collapsible look with the Polls tab. */
.tk-fold{ border:1px solid var(--border); border-radius:12px; background:var(--surface-2);
  margin-bottom:10px; }
.tk-fold:last-of-type{ margin-bottom:0; }
.tk-fold > summary{ list-style:none; cursor:pointer; padding:12px 14px; display:flex;
  align-items:center; gap:10px; }
.tk-fold > summary::-webkit-details-marker{ display:none; }
.tk-fold > summary::after{ content:'▸'; margin-left:auto; color:var(--text-dim); font-size:12px; }
.tk-fold[open] > summary::after{ content:'▾'; }
.tk-fold-title{ font-size:13px; font-weight:650; color:var(--text); flex:0 0 auto; }
.tk-fold-sum{ font-size:11.5px; color:var(--text-dim); min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.tk-fold-body{ padding:2px 14px 16px; }
.tk-fold-body .field-row:last-child{ margin-bottom:0; }

@media (max-width:900px){
  .tk-steps{ flex-wrap:wrap; }
  .tk-step{ flex:1 1 45%; }
  .tk-step + .tk-step::before{ display:none; }
  .tk-frame-btn{ width:100%; }
}

/* ── Live panel preview (Discord-accurate embed + buttons) ── */
.tk-preview{ padding:16px; border-radius:14px; background:#313338;
  border:1px solid rgba(0,0,0,0.4); box-shadow:0 10px 30px -18px rgba(0,0,0,0.8); }
.tk-embed{ display:flex; background:#2b2d31; border-radius:8px; overflow:hidden; max-width:520px; }
.tk-embed-bar{ flex:0 0 4px; background:var(--crimson); }
.tk-embed-content{ padding:12px 16px 14px; min-width:0; flex:1; }
.tk-embed-title{ font-size:15px; font-weight:700; color:#f2f3f5; line-height:1.3; outline:none;
  border-radius:4px; padding:1px 3px; margin:-1px -3px 4px; }
.tk-embed-desc{ font-size:13.5px; color:#dbdee1; line-height:1.5; white-space:pre-wrap; outline:none;
  border-radius:4px; padding:2px 3px; margin:0 -3px; }
.tk-embed-title:focus, .tk-embed-desc:focus{ background:rgba(88,101,242,0.14); box-shadow:0 0 0 1px rgba(88,101,242,0.5); }
.tk-embed-title:hover, .tk-embed-desc:hover{ background:rgba(255,255,255,0.04); cursor:text; }
[contenteditable][data-ph]:empty::before{ content:attr(data-ph); color:#8a8d93; pointer-events:none; }
.tk-embed-footer{ font-size:11px; color:#949ba4; margin-top:10px; }

.tk-embed-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; max-width:520px; }
.tk-pv-btn{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:none;
  border-radius:8px; font-size:13px; font-weight:600; color:#fff; cursor:pointer;
  transition:filter .15s var(--ease), transform .1s var(--ease); }
.tk-pv-btn:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.tk-pv-btn .tk-pv-emoji{ font-size:15px; }
.tk-pv-btn.style-primary{ background:#5865F2; }
.tk-pv-btn.style-secondary{ background:#4e5058; }
.tk-pv-btn.style-success{ background:#248046; }
.tk-pv-btn.style-danger{ background:#da373c; }
.tk-pv-add{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px;
  font-size:12px; font-weight:600; color:var(--text-muted); cursor:pointer;
  background:transparent; border:1.5px dashed var(--border);
  transition:border-color .15s var(--ease), color .15s var(--ease); }
.tk-pv-add:hover{ border-color:var(--crimson); color:var(--crimson-2); }
/* Dropdown-mode preview (6+ options) */
.tk-embed-actions.tk-dropmode{ flex-direction:column; align-items:stretch; }
.tk-pv-select{ max-width:400px; background:#1e1f22; border:1px solid rgba(0,0,0,0.3); border-radius:8px; overflow:hidden; }
.tk-pv-select-head{ display:flex; align-items:center; justify-content:space-between; padding:9px 12px;
  font-size:13px; color:#b5bac1; border-bottom:1px solid rgba(0,0,0,0.35); }
.tk-pv-opts{ display:flex; flex-direction:column; }
.tk-pv-opt{ display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:13px; color:#dbdee1;
  cursor:pointer; transition:background .12s var(--ease); }
.tk-pv-opt:hover{ background:rgba(88,101,242,0.16); }
.tk-mode-hint{ font-size:11px; color:var(--text-dim); margin-top:10px; }

/* ── Per-option popup editor ── */
.tk-modal-overlay{ position:fixed; inset:0; z-index:2100; display:flex; align-items:flex-start;
  justify-content:center; padding:8vh 20px 20px; background:rgba(4,5,8,0.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .16s ease; pointer-events:none; }
.tk-modal-overlay[hidden]{ display:none !important; }
.tk-modal-overlay.open{ opacity:1; pointer-events:auto; }
.tk-modal{ width:min(560px,96vw); max-height:84vh; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(232,25,44,0.08);
  transform:translateY(-8px) scale(.99); transition:transform .16s ease; }
.tk-modal-overlay.open .tk-modal{ transform:none; }
.tk-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--border); font-size:14px; font-weight:700; color:var(--text); }
.tk-modal-body{ padding:14px 16px; overflow-y:auto; }
.tk-modal-foot{ display:flex; align-items:center; gap:8px; padding:12px 16px;
  border-top:1px solid var(--border); background:var(--surface-2); }
.tk-modal-foot .save-btn{ width:auto; padding:9px 16px; }
.tk-btn-ghost{ background:transparent !important; border:1px solid var(--border) !important; color:var(--text-muted) !important; }
.tk-btn-danger{ background:transparent !important; border:1px solid rgba(232,25,44,0.4) !important; color:var(--crimson-2) !important; }
.tk-btn-danger:hover{ background:var(--crimson-dim) !important; }
/* Pickers flow inline inside the modal (no clipping by the scroll container) */
.tk-modal .ch-dropdown{ position:static; margin-top:6px; box-shadow:none; }

/* Form builder */
.tk-form-builder{ margin-top:14px; padding:12px; border-radius:10px; background:var(--surface-2);
  border:1px dashed var(--border); }
.tk-form-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tk-mini-btn{ font-size:11px; font-weight:600; color:var(--text); background:var(--surface);
  border:1px solid var(--border); border-radius:7px; padding:5px 10px; cursor:pointer;
  transition:border-color .15s var(--ease), color .15s var(--ease); }
.tk-mini-btn:hover:not(:disabled){ border-color:var(--crimson); color:var(--crimson-2); }
.tk-mini-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* Tickets → Duty: one row per support role → its duty role → live head count */
.tk-duty-row{ display:grid; grid-template-columns:minmax(90px,1fr) minmax(110px,1.2fr) minmax(90px,.9fr) auto;
  gap:10px; align-items:center; padding:9px 10px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface); margin-bottom:6px; font-size:12px; }
.tk-duty-team{ font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-duty-map{ color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-duty-role{ color:var(--crimson-2); font-weight:600; }
.tk-duty-count{ color:var(--text); }
@media (max-width:640px){
  .tk-duty-row{ grid-template-columns:1fr auto; row-gap:4px; }
  .tk-duty-map{ grid-column:1 / -1; }
}
.tk-form-fields{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.tk-form-empty{ font-size:11px; color:var(--text-dim); font-style:italic; padding:6px 2px; }
.tk-field-row{ padding:9px 10px; border-radius:9px; background:var(--surface); border:1px solid var(--border);
  display:flex; flex-direction:column; gap:7px; }
.tk-field-top{ display:grid; grid-template-columns:1fr 120px auto auto; gap:8px; align-items:center; }
.tk-field-req{ display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text-muted);
  white-space:nowrap; cursor:pointer; }
.tk-field-req input{ accent-color:var(--crimson); }
.tk-field-row .field-input{ padding:7px 9px; font-size:12px; }
@media (max-width:640px){
  .tk-field-top{ grid-template-columns:1fr auto; }
  .tk-field-style{ grid-column:1 / -1; }
}

/* ═══════════════════════════════════════════
   MODULE EMBLEMS — per-tab crimson glass icon chip in the page header.
   Injected by module-emblems.js. Gives every module a designed identity.
   ═══════════════════════════════════════════ */
.page-header-row{ display:flex; align-items:center; gap:16px; }
.page-header-text{ min-width:0; }
.page-emblem{
  flex:0 0 auto;
  width:54px; height:54px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; line-height:1;
  background:linear-gradient(160deg, rgba(232,25,44,0.18), rgba(14,17,24,0.55));
  border:1px solid rgba(232,25,44,0.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 12px 28px -14px rgba(232,25,44,0.6);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  position:relative;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.page-emblem::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(82% 80% at 50% 16%, rgba(255,255,255,0.16), transparent 72%);
}
.tab-page.active .page-emblem{ animation:emblemPop .45s var(--ease) both; }
.page-header:hover .page-emblem{
  transform:translateY(-2px) rotate(-3deg);
  border-color:rgba(232,25,44,0.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 16px 34px -12px rgba(232,25,44,0.75);
}
@keyframes emblemPop{ from{ opacity:0; transform:scale(.7) translateY(6px);} to{ opacity:1; transform:scale(1) translateY(0);} }
@media (max-width:560px){
  .page-emblem{ width:46px; height:46px; font-size:22px; border-radius:13px; }
  .page-header-row{ gap:12px; }
}

/* ─── Recurring sub-component polish (applies across all modules) ─────────── */
/* Icon buttons → crimson hover + lift */
.rr-icon-btn{ transition:background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease), color .15s var(--ease); }
.rr-icon-btn:hover{
  border-color:rgba(232,25,44,0.55) !important;
  background:var(--crimson-dim) !important;
  color:#fff !important;
  transform:translateY(-1px);
}
.rr-icon-danger:hover{ border-color:rgba(232,25,44,0.7) !important; color:var(--crimson-2) !important; }

/* Empty states → soft crimson aura behind the glyph so they read intentional */
.empty-state{
  background:linear-gradient(180deg, rgba(24,28,38,0.55), rgba(14,17,24,0.6)) !important;
  border:1px dashed rgba(255,255,255,0.1) !important;
}
.empty-ic{
  opacity:.85 !important;
  filter:drop-shadow(0 6px 20px rgba(232,25,44,0.45));
}

/* Native <select> styled as a field with a crimson caret */
select.field-input{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E8192C' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  padding-right:36px !important;
}

/* ═══════════════════════════════════════════
   UTILITY CLASSES — extracted from repeated inline styles in dashboard.html
   (cosmetic-only; JS-toggled display + dynamic + one-off styles left inline).
   Defined last so single-class utilities win over base component widths.
   ═══════════════════════════════════════════ */
.u-crimson{ color:var(--crimson); }
.u-text{ color:var(--text); }
.u-muted{ color:var(--text-muted); }
.u-dim{ color:var(--text-dim); font-weight:400; }
.u-muted-13{ font-size:13px; color:var(--text-muted); }
.u-dim-12{ font-size:12px; color:var(--text-dim); }
.u-hint{ font-size:11px; color:var(--text-dim); line-height:1.7; }
.u-hint2{ font-size:12px; color:var(--text-dim); line-height:1.6; }
.u-eyebrow{ font-size:11px; color:var(--text-muted); letter-spacing:1.5px; text-transform:uppercase; font-weight:600; }
.u-mt20{ margin-top:20px; }
.u-mt8{ margin-top:8px; }
.u-mb8{ margin-bottom:8px; }
.u-mb10{ margin-bottom:10px; }
.u-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.u-grid2-14{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.u-row-between{ display:flex; justify-content:space-between; align-items:center; }
.u-stat-line{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-muted); font-weight:500; }
.u-truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.u-btn-sm{ width:auto; padding:8px 16px; font-size:12px; }
.u-btn-md{ width:auto; padding:10px 18px; }
.u-btn-md2{ width:auto; padding:8px 18px; }
/* AI-chat personality quick-preset chips (fill the system-prompt box). */
.aichat-preset-btn{ width:auto; padding:7px 14px; font-size:12px; font-weight:700; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.aichat-preset-btn:hover{ color:#fff; border-color:var(--crimson); background:rgba(232,25,44,0.12); }

/* ═══ Owner Command Center (overview landing) ═══════════════════════════════ */
.occ{ display:flex; flex-direction:column; gap:16px; }
.occ-mono{ font-family:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; }
/* Reactor hero */
.occ-hero{ position:relative; overflow:hidden; border:1px solid var(--border); border-radius:16px;
  background:radial-gradient(120% 150% at 0% 0%, rgba(220,31,38,0.15), transparent 55%), rgba(255,255,255,0.02);
  padding:22px 24px; }
.occ-hero::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 3px); }
.occ-eyebrow{ display:flex; align-items:center; gap:9px; font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); position:relative; z-index:1; }
.occ-pulse{ width:9px; height:9px; border-radius:50%; background:#3BD17A; box-shadow:0 0 10px rgba(59,209,122,.9); animation:occPulse 2.4s ease-in-out infinite; }
.occ-pulse.warn{ background:#FFB020; box-shadow:0 0 10px rgba(255,176,32,.9); }
.occ-pulse.crit{ background:var(--crimson); box-shadow:0 0 10px rgba(220,31,38,.9); }
@keyframes occPulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.8);} }
@media (prefers-reduced-motion: reduce){ .occ-pulse{ animation:none; } }
.occ-hero-metrics{ display:flex; flex-wrap:wrap; gap:38px; margin:18px 0 12px; position:relative; z-index:1; }
.occ-metric-val{ font-size:46px; font-weight:700; line-height:1; color:var(--text); }
.occ-age-val{ font-size:30px; letter-spacing:0.5px; white-space:nowrap; align-self:flex-end; }
.occ-metric-lbl{ margin-top:8px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); }
.occ-metric-since{ margin-top:4px; font-size:11px; letter-spacing:0.3px; color:var(--text-dim); opacity:0.8; }
.occ-telem{ font-size:12px; color:var(--text-dim); letter-spacing:.3px; position:relative; z-index:1; }
.occ-telem b{ color:var(--text-muted); font-weight:600; }
/* Metric cards */
.occ-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.occ-card{ border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,0.02); padding:16px 18px; }
.occ-card-h{ font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; }
.occ-card-big{ font-size:30px; font-weight:700; color:var(--text); line-height:1; }
.occ-card-sub{ margin-top:8px; font-size:12px; color:var(--text-muted); }
.occ-fuel{ height:8px; border-radius:99px; background:rgba(255,255,255,0.07); overflow:hidden; margin-top:13px; }
.occ-fuel-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--crimson),#ff6a5f); transition:width .5s ease; }
.occ-fuel-fill.low{ background:linear-gradient(90deg,#FFB020,#ff6a5f); }
.occ-vital{ display:flex; align-items:center; gap:10px; margin-top:11px; }
.occ-vital:first-of-type{ margin-top:2px; }
.occ-vital-lbl{ width:40px; font-size:11px; color:var(--text-muted); letter-spacing:.5px; }
.occ-meter{ flex:1; height:6px; border-radius:99px; background:rgba(255,255,255,0.07); overflow:hidden; }
.occ-meter-fill{ height:100%; border-radius:99px; background:var(--crimson); transition:width .5s ease; }
.occ-meter-fill.hot{ background:linear-gradient(90deg,#FFB020,var(--crimson)); }
.occ-vital-val{ width:44px; text-align:right; font-size:12px; color:var(--text); }
/* Row 2 */
.occ-row2{ display:grid; grid-template-columns:1.2fr 1fr 1.1fr; gap:16px; }
.occ-panel{ border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,0.02); padding:16px 18px; min-height:158px; }
.occ-panel-h{ font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:12px; display:flex; justify-content:space-between; align-items:baseline; }
.occ-panel-h > span{ font-size:11px; letter-spacing:.3px; text-transform:none; font-weight:600; color:var(--text-dim); }
.occ-spark{ width:100%; height:64px; display:block; }
.occ-integ-row{ display:flex; align-items:center; gap:9px; padding:7px 0; font-size:13px; color:var(--text); border-bottom:1px solid rgba(255,255,255,0.045); }
.occ-integ-row:last-child{ border-bottom:none; }
.occ-led{ width:9px; height:9px; border-radius:50%; flex:none; }
.occ-led.up{ background:#3BD17A; box-shadow:0 0 7px rgba(59,209,122,.7); }
.occ-led.down{ background:var(--crimson); box-shadow:0 0 7px rgba(220,31,38,.7); }
.occ-led.idle{ background:rgba(255,255,255,0.22); }
.occ-integ-detail{ margin-left:auto; font-size:11px; color:var(--text-dim); }
.occ-feed-row{ display:flex; gap:10px; padding:7px 0; font-size:12.5px; border-bottom:1px solid rgba(255,255,255,0.045); }
.occ-feed-row:last-child{ border-bottom:none; }
.occ-feed-when{ color:var(--text-dim); flex:none; white-space:nowrap; }
.occ-feed-what{ color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.occ-feed-what b{ color:var(--text); font-weight:700; }
.occ-feed-what span{ color:var(--text-muted); }
.occ-empty{ color:var(--text-dim); font-size:12.5px; padding:8px 0; }
@media (max-width:900px){ .occ-cards, .occ-row2{ grid-template-columns:1fr; } .occ-metric-val{ font-size:38px; } .occ-hero-metrics{ gap:26px; } }
/* The two-column utility grids collapse to one column on narrow screens. */
@media (max-width:560px){ .u-grid2, .u-grid2-14{ grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════
   EMOJI PICKER — `:)` text button on message / embed fields + popover
   ═══════════════════════════════════════════ */
.ep-wrap, .ep-host{ position:relative; display:block; width:100%; min-width:0; }
.mention-wrap.ep-host{ display:block; }
.ep-wrap > .field-input,
.ep-wrap > .emb-input{ width:100%; box-sizing:border-box; }
/* Overlay (non-builder inputs): leave room so text doesn't slide under the button. */
.ep-wrap > input.field-input,
.ep-wrap > input.emb-input,
.ep-host:not(.ep-host-inline) > input.field-input,
.ep-host:not(.ep-host-inline) > input.emb-input{ padding-right:28px !important; }
.ep-wrap-area > textarea.field-input,
.ep-wrap-area > textarea.emb-input,
.ep-host-area:not(.ep-host-inline) > textarea.field-input,
.ep-host-area:not(.ep-host-inline) > textarea.emb-input{ padding-right:28px !important; }
/* Single-emoji fields shrink to fit, so the picker trigger sits right beside
   the emoji instead of at the far edge of the column. */
.ep-wrap-single{ display:inline-block; width:auto; max-width:100%; }
.ep-wrap-single > input.field-input{ width:110px; padding-right:26px; }

.ep-btn{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; padding:0;
  border-radius:5px; cursor:pointer; line-height:1;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
  z-index:3;
}
.ep-btn-glyph{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9px; font-weight:700; letter-spacing:-0.08em;
  color:#f0f1f5; line-height:1; pointer-events:none;
  text-shadow:0 1px 0 rgba(0,0,0,0.35);
}
.ep-wrap > input.field-input + .ep-btn:hover,
.ep-wrap > input.emb-input + .ep-btn:hover,
.ep-host:not(.ep-host-inline) > input.field-input + .ep-btn:hover,
.ep-host:not(.ep-host-inline) > input.emb-input + .ep-btn:hover{ transform:translateY(-50%) scale(1.08); }
.ep-wrap-area .ep-btn:not(.ep-btn-inline),
.ep-host-area:not(.ep-host-inline) .ep-btn{ top:auto; bottom:6px; transform:none; }
.ep-wrap-area .ep-btn:not(.ep-btn-inline):hover,
.ep-host-area:not(.ep-host-inline) .ep-btn:hover{ transform:scale(1.08); }
.ep-btn:hover{ background:rgba(232,25,44,0.18); border-color:rgba(232,25,44,0.55); }
/* Builders: button sits BESIDE the field so stacked rows (Add field) never overlap. */
.ep-host-inline{
  display:flex !important;
  align-items:center;
  gap:6px;
  min-width:0;
}
.ep-host-inline.ep-host-area{ align-items:flex-start; }
.ep-host-inline > input,
.ep-host-inline > textarea,
.ep-host-inline > [contenteditable]{
  flex:1 1 auto; min-width:0; padding-right:8px !important; box-sizing:border-box;
}
.ep-btn-inline{
  position:static !important;
  transform:none !important;
  flex:0 0 18px;
  align-self:center;
  margin:0;
}
.ep-host-inline.ep-host-area > .ep-btn-inline{ align-self:flex-start; margin-top:4px; }
.ep-btn-inline:hover{ transform:scale(1.08) !important; }
.ebx-btn-row .ep-wrap-btn-emoji{ grid-area:emoji; min-width:0; }
.ep-wrap-btn-emoji .ep-btn{ width:16px; height:16px; right:3px; }
.ep-wrap-btn-emoji .ep-btn-glyph{ font-size:8px; }
.ep-wrap-btn-emoji > input{ padding-right:20px !important; width:100%; box-sizing:border-box; }

#ep-pop{
  position:fixed; z-index:9999; width:320px; max-width:calc(100vw - 16px);
  background:rgba(16,19,27,0.98); border:1px solid rgba(255,255,255,0.12);
  border-radius:14px; padding:10px;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 28px 64px -18px rgba(0,0,0,0.9);
}
.ep-tabs{ display:flex; gap:4px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; }
.ep-tab{
  flex:0 0 auto; padding:5px 10px; border-radius:8px; cursor:pointer;
  font-size:11px; font-weight:600; white-space:nowrap;
  background:rgba(255,255,255,0.05); border:1px solid transparent; color:var(--text-dim);
  transition:background .15s var(--ease), color .15s var(--ease);
}
.ep-tab:hover{ color:var(--text); }
.ep-tab.active{ background:var(--grad-crimson); color:#fff; }
.ep-search{
  width:100%; margin:2px 0 8px; padding:8px 10px; border-radius:9px;
  background:rgba(10,12,18,0.6); border:1px solid rgba(255,255,255,0.1);
  color:var(--text); font-size:12px; outline:none;
}
.ep-search:focus{ border-color:var(--crimson); }
.ep-grid{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:2px;
  max-height:240px; overflow-y:auto;
}
.ep-emoji{
  aspect-ratio:1; border:none; background:transparent; cursor:pointer;
  border-radius:8px; font-size:20px; line-height:1; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s var(--ease), transform .12s var(--ease);
}
.ep-emoji:hover{ background:rgba(232,25,44,0.2); transform:scale(1.15); }
.ep-emoji-img img{ width:24px; height:24px; object-fit:contain; }
.ep-empty{ grid-column:1 / -1; padding:24px 8px; text-align:center; font-size:12px; color:var(--text-dim); }

/* ═══════════════════════════════════════════
   STATISTICS — collapsible (accordion) analytics sections
   ═══════════════════════════════════════════ */
.statx-acc{
  margin:14px 0; border:1px solid var(--border); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, rgba(24,28,38,0.5), rgba(14,17,24,0.55));
  transition:border-color .2s var(--ease);
}
.statx-acc.open{ border-color:rgba(232,25,44,0.28); }
.statx-acc-head{
  width:100%; display:flex; align-items:center; gap:14px; padding:15px 18px;
  cursor:pointer; background:transparent; border:none; text-align:left; color:var(--text);
  transition:background .15s var(--ease);
}
.statx-acc-head:hover{ background:rgba(232,25,44,0.06); }
.statx-acc-ic{
  flex:0 0 auto; width:42px; height:42px; font-size:20px;
  display:flex; align-items:center; justify-content:center; border-radius:12px;
  background:linear-gradient(160deg, rgba(232,25,44,0.16), rgba(14,17,24,0.5));
  border:1px solid rgba(232,25,44,0.28);
}
.statx-acc-tt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.statx-acc-title{ font-family:'Bebas Neue'; font-size:18px; letter-spacing:.6px; color:#fff; }
.statx-acc-sub{ font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.statx-acc-pill{
  flex:0 0 auto; font-size:10px; font-weight:700; letter-spacing:.5px; padding:3px 8px;
  border-radius:6px; background:rgba(232,25,44,0.15); color:var(--crimson-2);
  border:1px solid rgba(232,25,44,0.3);
}
.statx-acc-chev{ flex:0 0 auto; font-size:14px; color:var(--text-dim); transition:transform .25s var(--ease); }
.statx-acc.open .statx-acc-chev{ transform:rotate(180deg); }
.statx-acc-body{ display:none; padding:0 16px 16px; }
.statx-acc.open .statx-acc-body{ display:block; animation:fadeUp .25s var(--ease) both; }
/* Inner analytics card sheds its own chrome so it blends into the accordion. */
.statx-acc-body .ovx-card{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; }
.statx-acc-body .ovx-card::before{ display:none !important; }

/* AI Insights panel */
.aix-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.aix-card{ border:1px solid var(--border); border-radius:12px; padding:14px 16px; background:var(--surface-2); margin-bottom:10px; }
.aix-card h4{ margin:0 0 6px; font-size:13px; color:var(--crimson-2); letter-spacing:.3px; }
.aix-card p{ margin:0; font-size:13px; color:var(--text); line-height:1.6; }
.aix-rec{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--border); }
.aix-rec:first-child{ border-top:none; }
.aix-rec-ic{ flex:0 0 auto; font-size:16px; }
.aix-locked{ text-align:center; padding:30px 18px; }
.aix-locked .lock-ic{ font-size:34px; filter:drop-shadow(0 6px 18px rgba(232,25,44,0.5)); }
.aix-locked .lock-title{ font-family:'Bebas Neue'; font-size:22px; letter-spacing:.6px; margin:10px 0 4px; }
.aix-locked .lock-sub{ font-size:13px; color:var(--text-muted); max-width:420px; margin:0 auto 16px; line-height:1.6; }
.aix-meta{ font-size:11px; color:var(--text-dim); margin-top:10px; }

/* ═══════════════════════════════════════════
   CYNDRIX AI — dashboard assistant
══════════════════════════════════════════ */
/* Pinned sidebar item — subtle crimson glow so it reads as special. */
.nav-item-ai{
  background:linear-gradient(135deg,rgba(232,25,44,0.14),rgba(232,25,44,0.04));
  border:1px solid rgba(232,25,44,0.22);
  border-radius:10px; margin-bottom:8px; font-weight:600;
}
.nav-item-ai:hover{ border-color:rgba(232,25,44,0.4); }
.nav-item-ai.active{ background:var(--grad-crimson); color:#fff; }

.ca-locked{ text-align:center; padding:40px 18px; }
.ca-locked .lock-ic{ font-size:36px; filter:drop-shadow(0 6px 18px rgba(232,25,44,0.5)); }
.ca-locked .lock-title{ font-family:'Bebas Neue'; font-size:24px; letter-spacing:.6px; margin:10px 0 4px; }
.ca-locked .lock-sub{ font-size:13px; color:var(--text-muted); max-width:440px; margin:0 auto 16px; line-height:1.6; }
.ca-locked .save-btn{ display:inline-flex; margin:0 auto; }

/* Chat tab fills the content pane so the window reads as a real conversation. */
#tab-cyndrixai.tab-page.active{
  display:flex; flex-direction:column;
  padding:0 18px 16px;
  height:var(--ca-avail, calc(100dvh - 118px));
  max-height:var(--ca-avail, calc(100dvh - 118px));
  min-height:0;
  overflow:hidden;
}
#tab-cyndrixai .ca-locked,
#tab-cyndrixai .ca-gate{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }

.ca-wrap{
  display:flex; flex-direction:column; flex:1; min-height:0;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(232,25,44,0.10), transparent 46%),
    var(--surface);
  border:1px solid var(--border); border-radius:20px; overflow:hidden;
  box-shadow:0 20px 50px -28px rgba(0,0,0,0.7);
}

.ca-log{
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:18px 16px 10px;
  display:flex; flex-direction:column; gap:12px;
  background:
    linear-gradient(180deg, rgba(8,10,14,0.18), transparent 48px),
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(255,255,255,0.012) 28px);
}

.ca-msg{ display:flex; gap:8px; max-width:min(72%, 560px); align-items:flex-end; animation:caIn .22s ease both; }
.ca-user{ align-self:flex-end; flex-direction:row-reverse; }
.ca-assistant{ align-self:flex-start; }
@keyframes caIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.ca-av{ flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; overflow:hidden; user-select:none; }
.ca-av img{ width:100%; height:100%; object-fit:cover; }
.ca-av-bot{ background:var(--grad-crimson); color:#fff; box-shadow:0 4px 12px -5px var(--crimson-glow); }
.ca-av-user{ background:var(--surface-3); color:var(--text); border:1px solid var(--border); }
.ca-col{ display:flex; flex-direction:column; min-width:0; }
.ca-user .ca-col{ align-items:flex-end; }
.ca-meta{ display:flex; align-items:baseline; gap:7px; padding:0 4px 4px; font-size:11px; color:var(--text-dim); }
.ca-user .ca-meta{ flex-direction:row-reverse; }
.ca-who{ font-weight:700; color:var(--text-muted); }
.ca-user .ca-who{ color:#ff8a93; }
.ca-meta time{ font-variant-numeric:tabular-nums; opacity:.8; }

.ca-bubble{
  padding:10px 14px; border-radius:18px; font-size:14.5px; line-height:1.55; font-weight:400;
  border:1px solid var(--border); white-space:normal; word-wrap:break-word; overflow-wrap:anywhere;
}
.ca-user .ca-bubble{ background:var(--grad-crimson); color:#fff; border-color:transparent; border-bottom-right-radius:6px; }
.ca-assistant .ca-bubble{ background:#1c212b; color:var(--text); border-color:rgba(255,255,255,0.06); border-bottom-left-radius:6px; }

.ca-typing{ display:flex; gap:5px; align-items:center; min-width:46px; min-height:18px; }
.ca-typing span{ width:7px; height:7px; border-radius:50%; background:var(--crimson-2); opacity:.5; animation:caBlink 1.2s infinite; }
.ca-typing span:nth-child(2){ animation-delay:.2s; }
.ca-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes caBlink{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

.ca-proposal{
  align-self:flex-start; max-width:min(72%, 560px); margin-left:40px;
  border:1px solid rgba(232,25,44,0.35); border-radius:16px;
  background:linear-gradient(180deg,rgba(232,25,44,0.10),rgba(14,17,24,0.72));
  padding:14px 16px; animation:caIn .26s ease both;
}
.ca-prop-head{ font-weight:700; font-size:13px; color:var(--crimson-2); margin-bottom:10px; display:flex; gap:7px; align-items:center; }
.ca-prop-preview{
  background:var(--surface); border:1px solid var(--border); border-radius:9px;
  padding:11px 13px; font-size:13px; line-height:1.55; color:var(--text);
  white-space:pre-wrap; word-wrap:break-word; margin:0 0 12px; font-family:inherit; max-height:240px; overflow:auto;
}
.ca-prop-actions{ display:flex; gap:9px; flex-wrap:wrap; }
.ca-btn-confirm, .ca-btn-cancel{
  font-family:inherit; font-size:13px; font-weight:600; padding:10px 16px; border-radius:10px; cursor:pointer; border:1px solid transparent;
}
.ca-btn-confirm{ background:var(--grad-crimson); color:#fff; }
.ca-btn-confirm:hover{ filter:brightness(1.08); }
.ca-btn-cancel{ background:transparent; color:var(--text-muted); border-color:var(--border); }
.ca-btn-cancel:hover{ color:var(--text); border-color:var(--text-dim); }
.ca-btn-confirm:disabled, .ca-btn-cancel:disabled{ opacity:.5; cursor:default; }
.ca-prop-status{ font-size:12px; color:var(--text-muted); margin-top:9px; min-height:0; }
.ca-prop-done{ opacity:.85; }

.ca-composer{
  display:flex; flex-direction:column; gap:6px; flex:0 0 auto;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--border); background:rgba(16,19,26,0.92); backdrop-filter:blur(12px);
}
.ca-box{ display:flex; align-items:flex-end; gap:8px; }
.ca-input{
  flex:1; resize:none; background:#12151c; border:1px solid rgba(255,255,255,0.10); border-radius:22px;
  padding:11px 16px; color:var(--text); font-family:inherit; font-size:16px; font-weight:400; line-height:1.45;
  max-height:140px; outline:none; min-height:44px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ca-input:focus{ border-color:var(--crimson-border); box-shadow:0 0 0 3px rgba(232,25,44,0.12); }
.ca-send{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:var(--grad-crimson); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:filter .15s ease, transform .12s ease, opacity .15s ease;
}
.ca-send:hover{ filter:brightness(1.08); }
.ca-send:active{ transform:scale(.96); }
.ca-send:disabled{ opacity:.35; cursor:default; filter:none; transform:none; }
@media (max-width:900px){
  #tab-cyndrixai.tab-page.active{
    padding:0;
    min-height:0;
    height:var(--ca-avail, calc(100dvh - env(safe-area-inset-top, 0px) - 72px));
    max-height:var(--ca-avail, calc(100dvh - env(safe-area-inset-top, 0px) - 72px));
    overflow:hidden;
  }
  #tab-cyndrixai .ca-wrap{
    border-radius:0; border-left:none; border-right:none; border-bottom:none;
    box-shadow:none;
  }
  #tab-cyndrixai .ca-locked,
  #tab-cyndrixai .ca-gate{ padding:28px 18px; }
  .ca-log{ padding:14px 12px 8px; gap:10px; }
  .ca-msg, .ca-proposal{ max-width:88%; }
  .ca-proposal{ margin-left:0; }
  .ca-prop-actions{ flex-direction:column; }
  .ca-btn-confirm, .ca-btn-cancel{ width:100%; min-height:44px; }
  .ca-composer{ padding:8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
}

/* Cyndrix AI — header, formatted replies, notes, starters, link buttons (2026-11-12) */
.ca-top{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex:0 0 auto;
  padding:12px 16px; border-bottom:1px solid var(--border); background:rgba(16,19,26,0.6);
}
.ca-top-id{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ca-top-name{ font-weight:700; font-size:14px; color:var(--text); }
.ca-top-sub{ font-size:12px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ca-new{
  flex:none; font-family:inherit; font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:10px; cursor:pointer;
  background:transparent; color:var(--text-muted); border:1px solid var(--border);
  transition:color .15s ease, border-color .15s ease;
}
.ca-new:hover{ color:var(--text); border-color:var(--crimson-border); }
.ca-new:focus-visible, .ca-starter:focus-visible, .ca-link:focus-visible{ outline:2px solid var(--crimson); outline-offset:2px; }

.ca-bubble p{ margin:0; }
.ca-bubble p + p, .ca-bubble p + ul, .ca-bubble p + ol, .ca-bubble ul + p, .ca-bubble ol + p{ margin-top:8px; }
.ca-bubble ul, .ca-bubble ol{ margin:6px 0 0; padding-left:20px; }
.ca-bubble li{ margin:3px 0; }
.ca-bubble li::marker{ color:var(--text-dim); }
.ca-bubble strong{ font-weight:700; color:#fff; }
.ca-bubble code{
  font-family:'JetBrains Mono',monospace; font-size:12.5px; padding:1px 5px; border-radius:5px;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.06);
}
.ca-note{ font-size:11.5px; color:var(--text-dim); padding:5px 6px 0; max-width:100%; }
.ca-sep{
  align-self:center; font-size:11px; color:var(--text-dim); letter-spacing:.04em;
  display:flex; align-items:center; gap:10px; width:100%; max-width:420px;
}
.ca-sep::before, .ca-sep::after{ content:''; flex:1; height:1px; background:var(--border); }

.ca-starters{ display:flex; flex-wrap:wrap; gap:8px; margin-left:40px; max-width:min(72%, 560px); }
.ca-starter{
  font-family:inherit; font-size:13px; font-weight:500; text-align:left; cursor:pointer;
  padding:9px 13px; border-radius:12px; color:var(--text-muted);
  background:rgba(255,255,255,0.025); border:1px solid var(--border);
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.ca-starter:hover{ color:var(--text); border-color:var(--crimson-border); background:rgba(232,25,44,0.08); }
.ca-links{ display:flex; flex-wrap:wrap; gap:8px; margin-left:40px; }
.ca-link{
  font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; padding:8px 13px; border-radius:10px;
  color:#ff8a93; background:rgba(232,25,44,0.08); border:1px solid var(--crimson-border);
}
.ca-link:hover{ color:#fff; background:rgba(232,25,44,0.16); }
.ca-prop-tag{
  margin-left:auto; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim); border:1px solid var(--border); border-radius:6px; padding:2px 7px;
}
@media (max-width:900px){
  .ca-top{ padding:10px 12px; }
  .ca-top-sub{ display:none; }
  .ca-starters, .ca-links{ margin-left:0; max-width:100%; }
  .ca-prop-tag{ display:none; }
}

/* Cyndrix AI — one-time disclaimer gate */
.ca-gate{ text-align:center; padding:48px 20px; max-width:560px; margin:0 auto; }
.ca-gate-ic{ font-size:40px; filter:drop-shadow(0 6px 18px rgba(232,25,44,0.5)); }
.ca-gate-ic img{ width:72px; height:72px; object-fit:contain; filter:drop-shadow(0 6px 18px rgba(232,25,44,0.5)); }
.ca-gate-title{ font-family:'Bebas Neue'; font-size:26px; letter-spacing:.6px; margin:12px 0 8px; }
.ca-gate-sub{ font-size:13.5px; color:var(--text-muted); line-height:1.7; margin-bottom:20px; }
.ca-gate-sub strong{ color:var(--text); }
.ca-gate-btn{
  font-family:inherit; font-size:14px; font-weight:600; padding:12px 26px; border-radius:11px; cursor:pointer; border:none;
  background:var(--grad-crimson); color:#fff; box-shadow:0 10px 28px -12px var(--crimson-glow);
}
.ca-gate-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }

/* ─── Multi-persona AI chat tab bar (CyndrixAI Chat module) ─── */
.ai-persona-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.ai-persona-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.ai-persona-tab{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted);
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:all .15s;
}
.ai-persona-tab:hover{ color:var(--text); border-color:var(--crimson-border); }
.ai-persona-tab.active{
  background:var(--grad-crimson); color:#fff; border-color:transparent;
  box-shadow:0 8px 22px -10px var(--crimson-glow);
}
.ai-persona-tab .ai-persona-dot{ width:8px; height:8px; border-radius:50%; background:#4b5563; flex:none; }
.ai-persona-tab.is-on .ai-persona-dot{ background:#3BA55C; }
.ai-persona-tab.active.is-on .ai-persona-dot{ background:#fff; }
.ai-persona-tab .ai-persona-star{ font-size:11px; color:#FFD700; }
.ai-persona-tab.active .ai-persona-star{ color:#fff; }
.ai-persona-tab.locked{ cursor:pointer; opacity:.5; border-style:dashed; }
.ai-persona-tab.locked:hover{ opacity:.8; color:var(--text-muted); border-color:var(--crimson-border); }
.ai-persona-add{
  padding:8px 14px; border-radius:10px; border:1px dashed var(--border); background:transparent;
  color:var(--text-muted); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:all .15s;
}
.ai-persona-add:hover{ color:var(--crimson-2); border-color:var(--crimson-border); }
.ai-persona-add:disabled{ opacity:.4; cursor:not-allowed; }
.ai-persona-note{ font-size:12px; color:var(--text-dim); margin-bottom:14px; }
.ai-persona-note .u-link{ color:var(--crimson-2); text-decoration:none; }

/* ==========================================================================
   Premium Form Controls
   Cosmetic-only refinement layer for settings forms and pickers.
   ========================================================================== */
.field-row{
  gap:8px !important;
  margin-bottom:18px !important;
}
.field-row:last-child{ margin-bottom:0 !important; }
.field-label,
.fri-label{
  color:#F5F7FB !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  line-height:1.25 !important;
}
.field-desc,
.fri-desc,
.multi-ch-empty,
.ai-persona-note{
  color:#9EA7B8 !important;
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1.55 !important;
}
.fri-info{ min-width:0; }
.field-row-inline{
  padding:15px 0 !important;
  gap:18px !important;
}

.field-input,
.broadcast-textarea,
.emb-input,
.ep-search,
.discovery-tag-search-wrap input{
  min-height:46px;
  padding:12px 15px !important;
  color:#F8FAFC !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014)),
    rgba(8,10,14,0.72) !important;
  border:1px solid rgba(255,255,255,0.105) !important;
  border-radius:12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    0 1px 0 rgba(0,0,0,0.28) !important;
  font-family:'DM Sans',sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.45 !important;
  letter-spacing:0 !important;
  transition:
    border-color .16s var(--ease),
    background .16s var(--ease),
    box-shadow .16s var(--ease),
    transform .16s var(--ease) !important;
}
.field-input:hover,
.broadcast-textarea:hover,
.emb-input:hover,
.ep-search:hover,
.discovery-tag-search-wrap input:hover{
  border-color:rgba(255,255,255,0.18) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.058), rgba(255,255,255,0.018)),
    rgba(11,13,19,0.78) !important;
}
.field-input:focus,
.broadcast-textarea:focus,
.emb-input:focus,
.ep-search:focus,
.discovery-tag-search-wrap input:focus{
  border-color:rgba(255,45,66,0.82) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.018)),
    rgba(13,16,24,0.92) !important;
  box-shadow:
    0 0 0 3px rgba(232,25,44,0.16),
    0 14px 34px -24px rgba(232,25,44,0.7),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  outline:none !important;
}
.field-input::placeholder,
.broadcast-textarea::placeholder,
.emb-input::placeholder,
.ep-search::placeholder,
.discovery-tag-search-wrap input::placeholder,
.audit-search-box input::placeholder,
.mod-search input::placeholder,
.ch-search input::placeholder,
.ca-input::placeholder{
  color:#737D90 !important;
  font-family:'DM Sans',sans-serif !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}
.field-input:not(:placeholder-shown),
.broadcast-textarea:not(:placeholder-shown),
.emb-input:not(:placeholder-shown){
  color:#FFFFFF !important;
}
textarea.field-input,
.broadcast-textarea,
.emb-input-desc{
  min-height:108px;
  line-height:1.58 !important;
}
textarea.field-input{ resize:vertical; }
.field-input[disabled],
.field-input:disabled,
.broadcast-textarea:disabled,
.emb-input:disabled,
select:disabled,
.ch-picker-btn:disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
  background:rgba(255,255,255,0.035) !important;
  border-color:rgba(255,255,255,0.07) !important;
  box-shadow:none !important;
}
.field-row.error .field-input,
.field-input.error,
.field-input[aria-invalid="true"],
.broadcast-textarea[aria-invalid="true"],
.emb-input[aria-invalid="true"]{
  border-color:rgba(255,78,95,0.86) !important;
  box-shadow:
    0 0 0 3px rgba(232,25,44,0.18),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

select.field-input,
.audit-filter-sel,
.autorole-row select.ar-target{
  min-height:46px;
  color:#F8FAFC !important;
  font-weight:700 !important;
  background-color:rgba(8,10,14,0.72) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M2 3l5 5 5-5' stroke='%23FF2D42' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:0 0, right 15px center !important;
  padding-right:42px !important;
  cursor:pointer;
}
select.field-input option,
.audit-filter-sel option,
.autorole-row select.ar-target option{
  background:#11141C;
  color:#EDEFF5;
}

input[type="number"].field-input{
  font-family:'JetBrains Mono',monospace !important;
  font-weight:700 !important;
  font-variant-numeric:tabular-nums;
}
input[type="datetime-local"].field-input,
input[list].field-input{
  font-family:'JetBrains Mono',monospace !important;
  font-size:13px !important;
}
input[type="color"].field-input,
.field-row input[type="color"]{
  width:64px;
  min-height:44px;
  padding:5px !important;
  border-radius:12px !important;
  cursor:pointer;
}
input[type="color"].field-input::-webkit-color-swatch-wrapper,
.field-row input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; }
input[type="color"].field-input::-webkit-color-swatch,
.field-row input[type="color"]::-webkit-color-swatch{
  border:1px solid rgba(255,255,255,0.16);
  border-radius:8px;
}

.mod-search input,
.audit-search-box,
.ch-search input{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)),
    rgba(8,10,14,0.72) !important;
  border:1px solid rgba(255,255,255,0.105) !important;
  border-radius:12px !important;
  color:#F8FAFC !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.mod-search input{
  min-height:44px;
  padding:11px 14px 11px 42px !important;
  font-size:14px !important;
  font-weight:600 !important;
}
.mod-search-icon,
.audit-search-ic{
  color:var(--crimson-2) !important;
  opacity:.9 !important;
  filter:drop-shadow(0 0 10px rgba(232,25,44,0.28));
}
.audit-search-box{
  min-height:44px;
  padding:0 12px !important;
}
.audit-search-box input{
  color:#F8FAFC !important;
  font-weight:600 !important;
}
.audit-search-box:focus-within,
.mod-search:focus-within input{
  border-color:rgba(255,45,66,0.82) !important;
  box-shadow:0 0 0 3px rgba(232,25,44,0.14), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.ch-picker-btn{
  min-height:46px;
  gap:10px !important;
  padding:11px 14px !important;
  color:#8D97AA !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014)),
    rgba(8,10,14,0.72) !important;
  border:1px solid rgba(255,255,255,0.105) !important;
  border-radius:12px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.045), 0 1px 0 rgba(0,0,0,0.28) !important;
}
.ch-picker-btn:hover,
.ch-picker-wrap:focus-within .ch-picker-btn,
.multi-ch-picker:focus-within .ch-picker-btn{
  border-color:rgba(255,45,66,0.62) !important;
  box-shadow:0 0 0 3px rgba(232,25,44,0.10), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.ch-picker-wrap.has-value .ch-picker-btn,
.multi-ch-picker.has-value .ch-picker-btn{
  color:#FFFFFF !important;
  border-color:rgba(255,255,255,0.16) !important;
  background:
    linear-gradient(180deg, rgba(232,25,44,0.105), rgba(255,255,255,0.018)),
    rgba(12,15,22,0.86) !important;
}
.ch-picker-btn .ch-hash{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:7px;
  color:#FF4456 !important;
  background:rgba(232,25,44,0.12);
  border:1px solid rgba(232,25,44,0.24);
  font-family:'JetBrains Mono',monospace;
  font-weight:800;
}
.ch-picker-btn .ch-name{
  color:inherit !important;
  font-family:'DM Sans',sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
}
.ch-picker-wrap.has-value .ch-name,
.multi-ch-picker.has-value .ch-name{ font-weight:800 !important; }
.ch-picker-btn .ch-caret{
  color:#778196 !important;
  transition:transform .16s var(--ease), color .16s var(--ease);
}
.ch-picker-wrap:has(.ch-dropdown.open) .ch-caret,
.multi-ch-picker:has(.ch-dropdown.open) .ch-caret{
  color:var(--crimson-2) !important;
  transform:rotate(180deg);
}

.ch-dropdown,
.mention-dropdown,
.discovery-tag-dropdown{
  padding:7px !important;
  border-radius:14px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.018)),
    rgba(12,15,22,0.985) !important;
  border:1px solid rgba(255,255,255,0.13) !important;
  box-shadow:
    0 28px 72px -24px rgba(0,0,0,0.92),
    0 0 0 1px rgba(232,25,44,0.08),
    inset 0 1px 0 rgba(255,255,255,0.055) !important;
}
.ch-search{
  padding:6px 6px 9px !important;
  border-bottom:1px solid rgba(255,255,255,0.08) !important;
}
.ch-search input{
  min-height:38px;
  padding:9px 11px !important;
  font-size:13px !important;
  font-weight:600 !important;
}
.ch-search input:focus{
  border-color:rgba(255,45,66,0.72) !important;
  box-shadow:0 0 0 3px rgba(232,25,44,0.13) !important;
}
.ch-list{ padding:5px 0; }
.ch-category{
  color:#B0B8C8 !important;
  padding:11px 10px 5px !important;
  font-size:10px !important;
  letter-spacing:.13em !important;
}
.ch-item,
.mention-item,
.discovery-tag-option{
  position:relative;
  gap:10px !important;
  margin:2px 0;
  padding:9px 10px !important;
  border-radius:9px;
  color:#C9D0DD !important;
  transition:background .14s var(--ease), color .14s var(--ease), transform .14s var(--ease) !important;
}
.ch-item:hover,
.mention-item:hover,
.mention-item.active,
.discovery-tag-option:hover,
.discovery-tag-option.hl{
  color:#FFFFFF !important;
  background:rgba(232,25,44,0.115) !important;
}
.ch-item.selected{
  color:#FFFFFF !important;
  background:linear-gradient(135deg, rgba(232,25,44,0.2), rgba(232,25,44,0.08)) !important;
  box-shadow:inset 0 0 0 1px rgba(232,25,44,0.28);
}
.ch-item.selected::after{
  content:"";
  width:7px;
  height:12px;
  margin-left:auto;
  border-right:2px solid var(--crimson-2);
  border-bottom:2px solid var(--crimson-2);
  transform:rotate(45deg);
  flex:0 0 auto;
}
.ch-item-hash{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:7px;
  color:#A9B2C3 !important;
  background:rgba(255,255,255,0.055);
  border:1px solid rgba(255,255,255,0.07);
  font-weight:800;
}
.ch-item-name{
  color:inherit !important;
  font-size:13px !important;
  font-weight:650 !important;
}
.ch-clear{
  margin:4px 0 0;
  padding:10px 12px !important;
  border-top:1px solid rgba(255,255,255,0.08) !important;
  border-radius:0 0 9px 9px;
  color:#A7B0C0 !important;
  font-weight:700;
}
.ch-clear:hover{
  color:#FFFFFF !important;
  background:rgba(232,25,44,0.11);
}

.multi-ch-chips{
  gap:7px !important;
  margin-bottom:10px !important;
}
.multi-ch-empty{
  width:100%;
  padding:9px 0 !important;
  font-style:normal !important;
}
.multi-ch-chip,
.discovery-tag-pill{
  min-height:30px;
  padding:6px 7px 6px 10px !important;
  border-radius:999px !important;
  color:#FFFFFF !important;
  background:linear-gradient(135deg, rgba(232,25,44,0.20), rgba(255,255,255,0.045)) !important;
  border:1px solid rgba(232,25,44,0.38) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07);
  font-family:'DM Sans',sans-serif !important;
  font-size:12.5px !important;
  font-weight:700 !important;
}
.multi-ch-chip-x,
.discovery-tag-pill button{
  color:#DDE2EA !important;
  background:rgba(255,255,255,0.10) !important;
}

.toggle{
  display:inline-block !important;
  width:48px !important;
  height:28px !important;
  vertical-align:middle;
}
.toggle-track,
.toggle-slider{
  position:absolute;
  inset:0;
  display:block;
  border-radius:999px !important;
  cursor:pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025)),
    rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.13) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04) !important;
  transition:background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease) !important;
}
.toggle-track::before,
.toggle-slider::before{
  content:"";
  position:absolute;
  left:4px;
  top:50%;
  width:20px;
  height:20px;
  border-radius:50%;
  transform:translateY(-50%);
  background:linear-gradient(180deg, #F4F7FB, #BFC7D4) !important;
  box-shadow:0 5px 13px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.75) !important;
  transition:left .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease) !important;
}
.toggle input:focus-visible + .toggle-track,
.toggle input:focus-visible + .toggle-slider{
  box-shadow:0 0 0 3px rgba(232,25,44,0.18), inset 0 1px 2px rgba(0,0,0,0.42) !important;
}
.toggle input:checked + .toggle-track,
.toggle input:checked + .toggle-slider{
  background:var(--grad-crimson) !important;
  border-color:rgba(255,45,66,0.86) !important;
  box-shadow:0 0 22px -5px rgba(232,25,44,0.9), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.toggle input:checked + .toggle-track::before,
.toggle input:checked + .toggle-slider::before{
  left:22px !important;
  background:#FFFFFF !important;
}
.toggle input:disabled + .toggle-track,
.toggle input:disabled + .toggle-slider{
  opacity:.55;
  cursor:not-allowed;
}

.field-row > input[type="checkbox"],
label:not(.toggle) > input[type="checkbox"],
.rr-mode-opt input[type="radio"],
.ga-mode input[type="radio"]{
  -webkit-appearance:none;
  appearance:none;
  width:18px !important;
  height:18px !important;
  margin:0;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(8,10,14,0.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  cursor:pointer;
  transition:background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field-row > input[type="checkbox"],
label:not(.toggle) > input[type="checkbox"]{ border-radius:6px; }
.rr-mode-opt input[type="radio"],
.ga-mode input[type="radio"]{ border-radius:50%; }
.field-row > input[type="checkbox"]:checked,
label:not(.toggle) > input[type="checkbox"]:checked{
  border-color:rgba(255,45,66,0.95);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), transparent 45%),
    var(--grad-crimson);
  box-shadow:0 0 0 3px rgba(232,25,44,0.13);
}
.field-row > input[type="checkbox"]:checked::after,
label:not(.toggle) > input[type="checkbox"]:checked::after{
  content:"";
  display:block;
  width:5px;
  height:9px;
  margin:2px 0 0 5px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg);
}
.rr-mode-opt input[type="radio"]:checked,
.ga-mode input[type="radio"]:checked{
  border:5px solid var(--crimson-2);
  background:#FFFFFF;
  box-shadow:0 0 0 3px rgba(232,25,44,0.13);
}
.field-row > input[type="checkbox"]:focus-visible,
label:not(.toggle) > input[type="checkbox"]:focus-visible,
.rr-mode-opt input[type="radio"]:focus-visible,
.ga-mode input[type="radio"]:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(232,25,44,0.18);
}

.rr-mode-row,
.ga-mode-row{
  gap:10px !important;
}
.rr-mode-opt,
.ga-mode{
  min-height:44px;
  border-radius:12px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)),
    rgba(8,10,14,0.66) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  color:#B7C0CF !important;
}
.rr-mode-opt:hover,
.ga-mode:hover{
  border-color:rgba(255,45,66,0.48) !important;
  color:#F8FAFC !important;
}
.rr-mode-opt:has(input:checked),
.ga-mode.active{
  color:#FFFFFF !important;
  background:linear-gradient(135deg, rgba(232,25,44,0.18), rgba(255,255,255,0.035)) !important;
  border-color:rgba(255,45,66,0.56) !important;
  box-shadow:inset 0 0 0 1px rgba(232,25,44,0.14), 0 10px 26px -20px rgba(232,25,44,0.8);
}

input[type="range"]{
  height:28px;
  accent-color:var(--crimson);
  cursor:pointer;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045)),
    rgba(255,255,255,0.08);
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.45);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px;
  height:20px;
  margin-top:-6px;
  border-radius:50%;
  border:2px solid #FFFFFF;
  background:var(--grad-crimson);
  box-shadow:0 8px 20px rgba(0,0,0,0.42), 0 0 0 4px rgba(232,25,44,0.14);
}
input[type="range"]::-moz-range-track{
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
}
input[type="range"]::-moz-range-progress{
  height:8px;
  border-radius:999px;
  background:var(--grad-crimson);
}
input[type="range"]::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid #FFFFFF;
  background:var(--crimson);
}

.mention-dropdown{
  padding:6px !important;
}
.mention-tag{
  border-radius:7px !important;
  background:rgba(232,25,44,0.15) !important;
  border-color:rgba(232,25,44,0.34) !important;
  color:#FF5365 !important;
}
.mention-desc{ color:#AAB3C3 !important; }

#tab-cyndrixai .ca-input{
  background:#12151c !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  color:var(--text) !important;
  font-weight:400 !important;
}
#tab-cyndrixai .ca-input:focus{
  border-color:var(--crimson-border) !important;
  box-shadow:0 0 0 3px rgba(232,25,44,0.12) !important;
}

@media (max-width:560px){
  .field-row{ margin-bottom:16px !important; }
  .field-input,
  .broadcast-textarea,
  .emb-input,
  .ch-picker-btn{
    min-height:44px;
    font-size:13.5px !important;
  }
  .field-row-inline{
    align-items:flex-start !important;
    gap:12px !important;
  }
}

/* ─── Security module (tab-security) ─── */
.sec-th-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; max-width: 560px; }
.sec-th-row { display: grid; grid-template-columns: 1fr 84px 96px; gap: 10px; align-items: center; }
.sec-th-row > span:first-child { font-size: 13px; color: var(--text-muted); }
.sec-th-row .field-input { padding: 7px 10px; text-align: center; }
.sec-th-head span { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); text-align: center; }
.sec-th-head span:first-child { text-align: left; }
.sec-inc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.sec-inc-row:first-child { border-top: none; }
/* Security tab — anti-nuke easy setup (2026-09-28) */
.sec-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
/* .field-row etc. set their own display, which beats the hidden attribute. */
#tab-security [hidden] { display: none !important; }
#sec-levels + .field-desc, .sec-status + .field-row { margin-top: 14px; }
.sec-fieldset:disabled .cp-section { opacity: .72; }
.sec-owner-lock { margin: 10px 0 4px; padding: 10px 14px; border-radius: 10px; font-size: 12.5px; color: var(--text);
  background: rgba(255,192,46,.08); border: 1px solid rgba(255,192,46,.4); }
.sec-status { margin: 12px 0 6px; }
.sec-status-head { font-size: 13px; font-weight: 600; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); }
.sec-status-head.is-on { color: #5eead4; background: rgba(20,184,166,.08); border-color: rgba(20,184,166,.35); }
.sec-status-head.is-wait { color: #ffd479; background: rgba(255,192,46,.07); border-color: rgba(255,192,46,.3); font-weight: 500; }
.sec-status-head.is-off { color: var(--text-muted); }
.sec-checks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.sec-checks .ok { color: var(--text-muted); }
.sec-checks .bad { color: #ff8a94; }
.sec-levels { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--border); flex-wrap: wrap; }
.sec-level { appearance: none; border: 0; background: transparent; color: var(--text-muted); font: 600 13px inherit; padding: 8px 16px; border-radius: 9px; cursor: pointer; }
.sec-level:hover { color: var(--text); background: rgba(255,255,255,.04); }
.sec-level.is-on { color: #fff; background: rgba(232,25,44,.16); box-shadow: inset 0 0 0 1px rgba(232,25,44,.45); }
.sec-level:focus-visible, .sec-trust-hit:focus-visible, .sec-trust-chip button:focus-visible { outline: 2px solid #ff6b7a; outline-offset: 2px; }
.sec-guards { display: flex; flex-direction: column; gap: 8px; }
.sec-guard { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.02); cursor: pointer; }
.sec-guard.is-info { cursor: default; }
.sec-guard input { margin-top: 3px; accent-color: #E8192C; }
.sec-guard b { display: block; font-size: 13px; color: var(--text); }
.sec-guard small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.sec-trust-search { position: relative; max-width: 520px; margin-top: 8px; }
.sec-trust-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--surface-2, #161920); border: 1px solid var(--border); border-radius: 10px; padding: 4px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.8); }
.sec-trust-hit { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.sec-trust-hit:hover { background: rgba(255,255,255,.05); }
.sec-trust-none { padding: 10px; font-size: 12px; color: var(--text-dim); }
.sec-trust-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; margin-bottom: 18px; }
.sec-trust-empty { font-size: 12px; color: var(--text-dim); font-style: italic; }
.sec-trust-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px 4px 4px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid var(--border); font-size: 12.5px; }
.sec-trust-chip img { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3, #1C2028); }
.sec-trust-chip em { font-style: normal; font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: #5865F2; color: #fff; margin-left: 2px; }
.sec-trust-chip button { border: 0; background: transparent; color: var(--text-dim); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; }
.sec-trust-chip button:hover { color: #ff8a94; }
@media (max-width: 620px) { .sec-th-row { grid-template-columns: 1fr 66px 82px; } }

/* ═══════════════════════════════════════════
   QUICK SETUP WIZARD
   ═══════════════════════════════════════════ */
.qs-wrap { max-width: 680px; margin: 0 auto; }

/* Progress rail */
.qs-rail { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 22px; flex-wrap: wrap; }
.qs-rail-node { display: flex; align-items: center; gap: 8px; }
.qs-rail-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: var(--bg-2); border: 1px solid var(--border); color: var(--text-dim); flex-shrink: 0; }
.qs-rail-lab { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.qs-rail-node.active .qs-rail-dot { background: var(--crimson); border-color: var(--crimson); color: #fff; box-shadow: 0 0 12px var(--crimson-glow); }
.qs-rail-node.active .qs-rail-lab { color: var(--text); }
.qs-rail-node.done .qs-rail-dot { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.4); color: var(--green); }
.qs-rail-line { flex: 0 0 16px; height: 1px; background: var(--border); }
@media (max-width: 620px) { .qs-rail-lab { display: none; } .qs-rail-line { flex-basis: 10px; } }

/* Steps */
.qs-step { display: none; }
.qs-step.active { display: block; animation: qsFade .25s ease; }
@keyframes qsFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.qs-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px; }

/* Intro / done splash */
.qs-intro { text-align: center; }
.qs-intro-ic { font-size: 46px; line-height: 1; }
.qs-intro-title { font-size: 22px; font-weight: 800; margin-top: 14px; }
.qs-intro-title span { color: var(--crimson-2); }
.qs-intro-sub { font-size: 14px; color: var(--text-dim); margin: 10px auto 20px; max-width: 460px; line-height: 1.55; }
.qs-intro-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 440px; margin: 0 auto 22px; }
.qs-intro-item { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; text-align: left;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; }
.qs-intro-item span { font-size: 17px; }
@media (max-width: 520px) { .qs-intro-list { grid-template-columns: 1fr; } }

/* Step header */
.qs-step-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.qs-step-ic { font-size: 26px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.qs-step-title { font-size: 17px; font-weight: 700; }
.qs-step-desc { font-size: 13px; color: var(--text-dim); margin-top: 4px; line-height: 1.55; }
.qs-done-pill { margin-left: auto; flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: var(--green); background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }

/* Protection toggle rows */
.qs-toggle-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); }
.qs-toggle-row:first-of-type { border-top: none; }
.qs-toggle-meta { flex: 1; }
.qs-toggle-title { font-size: 14px; font-weight: 700; }
.qs-toggle-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

/* Nav buttons */
.qs-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.qs-nav-right { display: flex; align-items: center; gap: 10px; }
.qs-btn-ghost, .qs-btn-skip { background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 9px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.qs-btn-ghost:hover, .qs-btn-skip:hover { color: var(--text); border-color: var(--text-dim); }
.qs-btn-skip { border-style: dashed; }

/* Summary */
.qs-summary { display: flex; flex-direction: column; gap: 2px; }
.qs-summary-row { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-top: 1px solid var(--border); }
.qs-summary-row:first-child { border-top: none; }
.qs-summary-ic { font-size: 20px; flex-shrink: 0; }
.qs-summary-text { display: flex; flex-direction: column; gap: 2px; }
.qs-summary-text strong { font-size: 14px; font-weight: 700; }
.qs-summary-text span { font-size: 12px; color: var(--text-dim); }
.qs-summary-empty { text-align: center; padding: 20px; font-size: 13px; color: var(--text-dim); }

.qs-done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Mod log — per-module ignore picker inside a module card */
.modlog-card-ignore{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
.modlog-ignore-label{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px;}
.modlog-card-ignore .multi-ch-picker{margin:0;}

/* Per-event opt-outs inside a mod-log module card. A module used to be one
   switch covering every event it could emit. */
.modlog-event-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px 14px;}
/* Mod log health + test (2026-09-28) */
.modlog-health{margin:0 0 12px;padding:10px 14px;border:1px solid rgba(255,192,46,.45);background:rgba(255,192,46,.08);border-radius:10px;font-size:12.5px;color:var(--text);}
.modlog-health-title{font-weight:700;margin-bottom:4px;}
.modlog-health ul{margin:0;padding-left:18px;}
.modlog-health li{margin:2px 0;}
.modlog-save-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.modlog-test-btn{background:var(--surface-3);color:var(--text);box-shadow:none;border:1px solid var(--border);}
.modlog-test-btn:disabled{opacity:.6;cursor:wait;}
.modlog-event-item{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--text-muted);line-height:1.3;}
.modlog-event-item:hover{color:var(--text);}
.modlog-event-item input{accent-color:var(--mc-accent,#E8192C);width:14px;height:14px;flex:0 0 auto;cursor:pointer;margin:0;}

/* AutoMod rule tester */
.am-test-bar{display:flex;align-items:flex-end;gap:12px;margin-top:10px;flex-wrap:wrap;}
.am-test-mentions{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--text-dim);font-weight:600;}
.am-test-mentions .field-input{width:90px;height:40px;margin:0;}
.am-test-bar .am-action-btn{width:auto;min-width:148px;flex:0 0 auto;}
/* Same trap as .save-result: the markup carries `hidden`, but an author display
   overrides the UA rule, so the empty results box showed before any test ran. */
.am-test-results[hidden]{display:none !important;}
.am-test-results{display:flex;flex-direction:column;gap:6px;margin-top:14px;}
.am-test-verdict{padding:11px 14px;border-radius:10px;font-size:13.5px;border:1px solid var(--border);background:var(--surface-2);margin-bottom:4px;}
.am-test-verdict.is-trip{border-color:rgba(232,25,44,0.45);background:rgba(232,25,44,0.10);color:#fff;}
.am-test-verdict.is-pass{border-color:rgba(16,185,129,0.4);background:rgba(16,185,129,0.09);color:#fff;}
.am-test-note{font-size:11.5px;color:var(--text-dim);margin-top:5px;font-weight:400;}
.am-test-row{display:grid;grid-template-columns:150px 58px minmax(0,1fr);align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);background:var(--surface-2);border-radius:9px;}
.am-test-row.is-dim{opacity:.45;}
.am-test-name{font-size:13px;color:var(--text);font-weight:600;}
.am-test-badge{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.5px;text-align:center;padding:3px 0;border-radius:5px;border:1px solid var(--border);color:var(--text-dim);}
.am-test-badge.is-trip{background:rgba(232,25,44,0.16);color:var(--crimson-2);border-color:var(--crimson-border);}
.am-test-badge.is-pass{background:rgba(16,185,129,0.12);color:var(--green,#10b981);border-color:rgba(16,185,129,0.3);}
.am-test-detail{font-size:12px;color:var(--text-dim);overflow-wrap:anywhere;}
@media (max-width:640px){ .am-test-row{grid-template-columns:1fr auto;} .am-test-detail{grid-column:1/-1;} }

/* small control variants used by this tab */
.save-btn-sm{ padding:9px 16px; font-size:12px; }
.toggle-sm{ transform:scale(.85); transform-origin:left center; }

/* Saved/History pane heads — keep the action button compact so the title
   ("Saved embeds" + counter badge) never wraps. */
#emb-pane-saved .cp-head .save-btn, #emb-pane-saved .cp-head .save-btn-sm{ width:auto; white-space:nowrap; }
#emb-pane-saved .cp-title, #emb-pane-history .cp-title{ white-space:nowrap; }

/* Unsaved-changes prompt (replaces window.confirm on tab switch) */
.dash-unsaved-ov{ position:fixed; inset:0; z-index:11000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); animation:fadeUp .15s ease; padding:20px; }
.dash-unsaved-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px 24px 20px; width:min(400px,100%); text-align:center; box-shadow:0 24px 60px -24px rgba(0,0,0,.7); }
.dash-unsaved-ic{ width:52px; height:52px; margin:0 auto 12px; border-radius:14px; display:grid; place-items:center; font-size:24px; background:rgba(232,25,44,.12); color:var(--crimson,#e8192c); }
.dash-unsaved-title{ font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--text); }
.dash-unsaved-sub{ font-size:13.5px; color:var(--text-muted); margin:6px 0 18px; line-height:1.5; }
.dash-unsaved-actions{ display:flex; flex-direction:column; gap:9px; }
.dash-unsaved-actions .save-btn{ width:100%; margin:0; }
.dash-unsaved-discard, .dash-unsaved-stay{ width:100%; height:40px; border-radius:10px; cursor:pointer; font-weight:700; font-size:13px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); }
.dash-unsaved-discard:hover{ border-color:rgba(232,25,44,.5); color:#ff6b78; background:rgba(232,25,44,.08); }
.dash-unsaved-stay:hover{ border-color:var(--crimson-border,rgba(232,25,44,.4)); }

/* Cap gate: .premium-gate is display:flex, which beats the `hidden` attribute —
   so an unlimited (null cap) plan still saw the gate ("capped at null"). Make
   [hidden] win. (Only affects gates that use the hidden attribute; the ones
   toggled via inline style.display are untouched.) */
.premium-gate[hidden]{ display:none !important; }

/* ── Temp Voice (JTC) ─────────────────────────────────────────── */
.jtc-btn-toggles{ display:flex; flex-wrap:wrap; gap:8px; }
.jtc-btn-toggle{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:10px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border);
  font-size:12px; font-weight:600; color:var(--text);
}
.jtc-btn-toggle input{ accent-color:var(--crimson); }
.jtc-room{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; background:var(--surface-2); border-radius:10px;
  margin-bottom:8px; border:1px solid var(--border);
}
.jtc-room-name{ font-size:13px; font-weight:650; color:var(--text); }
.jtc-room-meta{ font-size:11px; color:var(--text-dim); margin-top:2px; }
.jtc-end-btn{ width:auto; padding:8px 12px; background:#3a1c1f; color:#ffb4b8; }
.jtc-end-btn:hover{ filter:brightness(1.08); }
.jtc-timeout{ display:flex; align-items:center; gap:10px; max-width:220px; }
.jtc-timeout .field-input{ width:88px; flex:0 0 88px; max-width:88px; }
.jtc-timeout-unit{ font-size:12px; color:var(--text-muted); white-space:nowrap; flex:0 0 auto; }
.dc-chip{
  display:inline; padding:0 4px; border-radius:4px; font-weight:600;
  user-select:all; white-space:nowrap;
}
.tk-embed-content .mention-wrap{ display:block; }
.tk-preview .mention-dropdown{ max-height:220px; overflow-y:auto; }

/* Server templates */
.tpld-group{ margin-bottom:28px; }
.tpld-group-h{ display:flex; align-items:baseline; gap:12px; margin-bottom:12px; }
.tpld-group-h b{ font-size:16px; }
.tpld-group-h span{ font-size:13px; color:var(--text-muted); }
.tpld-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media(max-width:1100px){ .tpld-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px){ .tpld-cards{ grid-template-columns:1fr; } }

/* ── Template library toolbar: search + size + tag chips ── */
.tpld-toolbar{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:4px 0 12px; }
.tpld-search-wrap{ position:relative; flex:1 1 320px; display:flex; align-items:center; }
.tpld-search-ic{ position:absolute; left:12px; font-size:14px; opacity:0.6; pointer-events:none; }
.tpld-search{
  width:100%; height:40px; padding:0 12px 0 34px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  font:inherit; font-size:14px; outline:none;
}
.tpld-search:focus{ border-color:rgba(232,25,44,0.5); }
.tpld-clear{
  position:absolute; right:8px; height:26px; padding:0 10px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-3); color:var(--text-muted);
  font:inherit; font-size:12px; cursor:pointer;
}
.tpld-clear:hover{ color:var(--text); border-color:rgba(232,25,44,0.45); }
.tpld-sizes{ display:flex; gap:6px; flex-wrap:wrap; }
.tpld-chip{
  height:34px; padding:0 14px; border-radius:999px; cursor:pointer; font:inherit; font-size:13px; font-weight:600;
  border:1px solid var(--border); background:var(--surface); color:var(--text-muted);
}
.tpld-chip:hover{ color:var(--text); border-color:rgba(232,25,44,0.45); }
.tpld-chip.is-on{ color:#fff; border-color:rgba(232,25,44,0.55); background:linear-gradient(180deg, rgba(232,25,44,0.28), rgba(232,25,44,0.14)); }
.tpld-tagbar{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 16px; }
.tpld-tag{
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 10px; border-radius:999px; cursor:pointer; font:inherit; font-size:12px; font-weight:600;
  border:1px solid var(--border); background:var(--surface-3); color:var(--text-muted);
}
.tpld-tag:hover{ color:var(--text); border-color:rgba(232,25,44,0.45); }
.tpld-tag.is-on{ color:#fff; border-color:rgba(232,25,44,0.6); background:linear-gradient(180deg, rgba(232,25,44,0.30), rgba(232,25,44,0.16)); }
.tpld-tag-n{ font-size:10px; opacity:0.7; font-variant-numeric:tabular-nums; }
.tpld-count{ font-size:12px; color:var(--text-muted); margin:0 0 10px; letter-spacing:0.3px; }
.tpld-card-pills{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.tpld-pill{
  font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:999px;
  background:var(--surface-3); border:1px solid var(--border); color:var(--text-muted);
}
.tpld-noresult{ text-align:center; padding:48px 16px; color:var(--text-muted); display:flex; flex-direction:column; align-items:center; gap:12px; }
.tpld-card{
  text-align:left; cursor:pointer; color:inherit; font:inherit;
  display:flex; flex-direction:column; gap:4px;
  padding:16px; border-radius:16px;
  background:var(--surface); border:1px solid var(--border);
  transition:border-color .15s, transform .15s;
}
.tpld-card:hover{ border-color:rgba(232,25,44,0.45); transform:translateY(-1px); }
.tpld-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tpld-card-ic{ font-size:22px; }
.tpld-heart{
  display:inline-flex; align-items:center; gap:5px;
  height:28px; padding:0 9px; border-radius:999px; cursor:pointer;
  border:1px solid var(--border); background:var(--surface-3);
  color:var(--text-muted); font-size:13px; font-weight:700; font-family:inherit;
}
.tpld-heart:hover{ border-color:rgba(232,25,44,0.45); color:#ff6b78; }
.tpld-heart.is-on{
  color:#fff; border-color:rgba(232,25,44,0.55);
  background:linear-gradient(180deg, rgba(232,25,44,0.28), rgba(232,25,44,0.14));
}
.tpld-heart-ic{ font-size:14px; line-height:1; }
.tpld-heart-n{ font-variant-numeric:tabular-nums; min-width:0.8em; }
.tpld-studio-name .tpld-heart{ margin-left:10px; vertical-align:middle; }
.tpld-card-k{ font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-dim); font-weight:700; }
.tpld-card-name{ font-size:18px; font-weight:800; letter-spacing:-.02em; }
.tpld-card-mem{ font-size:12px; color:var(--crimson-2); font-weight:700; }
.tpld-card-blurb{ font-size:13px; color:var(--text-muted); line-height:1.45; margin-top:8px; }
.tpld-card-stats{ font-size:11px; color:var(--text-dim); margin-top:6px; }
.tpld-peek{
  margin-top:10px; border-radius:12px; overflow:hidden;
  background:#111318; border:1px solid rgba(255,255,255,0.08);
  pointer-events:none;
}
.tpld-peek-bar{
  display:flex; align-items:center; gap:7px;
  padding:7px 10px; font-size:11px; font-weight:700; color:#d7dbe6;
  background:linear-gradient(180deg,#1a1d26,#14171e);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.tpld-peek-dot{ width:8px; height:8px; border-radius:50%; background:#ed4245; box-shadow:10px 0 0 #faa61a, 20px 0 0 #3ba55d; margin-right:18px; }
.tpld-peek-body{ padding:6px 8px 8px; max-height:168px; overflow:hidden;
  mask-image:linear-gradient(180deg,#000 72%,transparent);
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);
}
.tpld-peek-cath{
  font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:800;
  color:#8b90a0; padding:7px 4px 3px;
}
.tpld-peek-ch{ display:flex; align-items:center; gap:6px; padding:2px 6px; border-radius:4px; color:#b5bac1; font-size:11.5px; }
.tpld-peek-ch.is-vc{ color:#3ba55d; }
.tpld-peek-ch.is-lock{ color:#80848e; }
.tpld-peek-hash{ width:12px; flex-shrink:0; text-align:center; font-size:11px; opacity:.8; }
.tpld-peek-nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tpld-peek-more{ font-size:10px; color:#6d717c; padding:2px 8px 4px; }
.tpld-exist{ font-size:12.5px; color:var(--text-muted); padding:10px 12px; border:1px dashed var(--border); border-radius:10px; }
.tpld-studio-bar{ display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; }
.tpld-back{
  height:36px; padding:0 12px; border-radius:10px; cursor:pointer;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-weight:700;
}
.tpld-studio-name{ font-size:22px; font-weight:800; letter-spacing:-.02em; display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.tpld-studio-sub{ font-size:13px; color:var(--text-muted); margin-top:3px; max-width:70ch; }
.tpld-layout{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,0.85fr); gap:16px; align-items:start; }
@media(max-width:900px){ .tpld-layout{ grid-template-columns:1fr; } }
.tpld-col-label{ font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); font-weight:700; margin-bottom:8px; }
.tpld-disc{
  background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:10px 8px 12px;
  max-height:min(70vh,720px); overflow:auto;
}
.tpld-cat{ margin-bottom:10px; }
.tpld-cat-h, .tpld-row, .tpld-role{
  display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:8px;
}
.tpld-row:hover, .tpld-role:hover, .tpld-cat-h:hover{ background:rgba(255,255,255,0.03); }
.tpld-rename{
  flex:1; min-width:0; background:transparent; border:none; color:var(--text);
  font:inherit; font-size:13.5px; padding:4px 0;
}
.tpld-rename-cat{ font-size:12px; font-weight:800; letter-spacing:.02em; color:var(--text-muted); }
.tpld-eye, .tpld-mini{
  border:none; background:transparent; color:var(--text-dim); cursor:pointer; font-size:12px; padding:2px 4px;
}
.tpld-mini{ border:1px solid var(--border); border-radius:6px; }
.tpld-tags{ display:flex; gap:4px; flex-shrink:0; }
.tpld-tags i{
  font-style:normal; font-size:9.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-dim); border:1px solid var(--border); border-radius:4px; padding:1px 5px;
}
.tpld-row.is-skip, .tpld-cat.is-skip, .tpld-role.is-skip{ opacity:.38; }
.tpld-row.is-vc .tpld-rename{ color:#2bd0c6; }
.tpld-panel{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px; margin-bottom:12px; }
.tpld-role-list{ display:flex; flex-direction:column; gap:2px; }
.tpld-sw{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.tpld-add{
  margin-top:8px; width:100%; height:34px; border-radius:10px; cursor:pointer;
  border:1px dashed var(--border); background:transparent; color:var(--text-muted); font-weight:700;
}
.tpld-mod{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--border); cursor:pointer; }
.tpld-mod:first-child{ border-top:none; }
.tpld-mod b{ display:block; font-size:13px; }
.tpld-mod small{ display:block; font-size:12px; color:var(--text-muted); font-weight:500; }
.tpld-note{ font-size:12.5px; color:var(--text-muted); line-height:1.5; }
.tpld-apply-bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--border);
}
.tpld-apply-meta{ font-size:13px; color:var(--text-muted); }
.tpld-apply-bar .save-btn{ width:auto; padding:10px 22px; }
.tpld-log{
  margin-top:12px; padding:12px 14px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border);
  font-family:'JetBrains Mono',monospace; font-size:11.5px; white-space:pre-wrap; color:var(--text-dim); max-height:240px; overflow:auto;
}
.tpld-build{
  min-height:58vh; display:flex; align-items:center; justify-content:center; padding:20px 0 40px;
}
.tpld-build[hidden]{ display:none !important; }
.tpld-build-card{
  width:min(560px,100%); text-align:center;
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:36px 32px 28px; box-shadow:0 20px 50px -28px rgba(0,0,0,0.7);
}
.tpld-build-card.is-done{ border-color:rgba(16,185,129,0.35); }
.tpld-build-card.is-fail{ border-color:rgba(232,25,44,0.4); }
.tpld-build-kicker{
  font-size:11px; letter-spacing:1.4px; text-transform:uppercase; font-weight:800;
  color:var(--text-dim); margin-bottom:8px;
}
.tpld-build-card h3{ margin:0 0 10px; font-size:26px; letter-spacing:-.03em; }
.tpld-build-sub{ margin:0 auto 18px; max-width:42ch; font-size:14px; color:var(--text-muted); line-height:1.55; }
.tpld-build-line{ font-size:13.5px; font-weight:700; color:var(--crimson-2); min-height:1.4em; }
.tpld-build-spin{
  width:46px; height:46px; margin:0 auto 18px; border-radius:50%;
  border:3px solid rgba(255,255,255,0.08); border-top-color:var(--crimson);
  animation:tpldSpin .8s linear infinite;
}
@keyframes tpldSpin{ to{ transform:rotate(360deg); } }
.tpld-build-mark{
  width:52px; height:52px; margin:0 auto 16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800;
}
.is-done .tpld-build-mark{ background:rgba(16,185,129,0.16); color:#34d399; }
.is-fail .tpld-build-mark{ background:rgba(232,25,44,0.14); color:#ff6b78; }
.tpld-build-stats{
  display:flex; justify-content:center; gap:18px; flex-wrap:wrap;
  margin:8px 0 22px; font-size:12px; color:var(--text-muted);
}
.tpld-build-stats strong{ display:block; font-size:18px; color:var(--text); }
.tpld-build-actions{ display:flex; justify-content:center; align-items:stretch; gap:10px; flex-wrap:wrap; }
/* Both buttons share one height/box so they sit evenly side by side; on a
   narrow card they stack full-width cleanly instead of wrapping lopsided. */
.tpld-build-actions .save-btn,
.tpld-build-actions .tpld-back{
  width:auto; height:42px; padding:0 22px; margin:0;
  display:inline-flex; align-items:center; justify-content:center;
  box-sizing:border-box; white-space:nowrap;
}
@media(max-width:520px){
  .tpld-build-actions{ flex-direction:column; }
  .tpld-build-actions .save-btn,
  .tpld-build-actions .tpld-back{ width:100%; }
}
.tpld-confirm{
  position:fixed; inset:0; z-index:10030;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.tpld-confirm[hidden]{ display:none !important; }
.tpld-confirm-back{
  position:absolute; inset:0;
  background:rgba(0,0,0,0.68); backdrop-filter:blur(6px);
  animation:pgFade .2s ease;
}
.tpld-confirm-card{
  position:relative; z-index:1;
  width:min(460px,100%);
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:28px 26px 22px;
  box-shadow:0 28px 80px rgba(0,0,0,0.55);
  animation:pgSlide .25s cubic-bezier(.2,.9,.3,1);
}
.tpld-confirm-kicker{
  font-size:11px; letter-spacing:1.3px; text-transform:uppercase; font-weight:800;
  color:var(--crimson-2); margin-bottom:8px;
}
.tpld-confirm-card h3{ margin:0 0 10px; font-size:22px; letter-spacing:-.03em; line-height:1.2; }
.tpld-confirm-card p{ margin:0 0 16px; font-size:14px; color:var(--text-muted); line-height:1.55; }
.tpld-confirm-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  margin-bottom:20px;
}
@media(max-width:420px){ .tpld-confirm-stats{ grid-template-columns:repeat(2,1fr); } }
.tpld-confirm-stats span{
  display:flex; flex-direction:column; gap:2px; text-align:center;
  padding:10px 6px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border);
  font-size:11px; color:var(--text-muted);
}
.tpld-confirm-stats strong{ font-size:18px; color:var(--text); }
.tpld-confirm-actions{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.tpld-confirm-actions .save-btn{ width:auto; padding:10px 18px; }
.tpld-confirm-card.is-wide{ width:min(560px,100%); }
.tpld-confirm-modes{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.tpld-mode{
  text-align:left; cursor:pointer; color:inherit; font:inherit;
  padding:12px 14px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border);
}
.tpld-mode b{ display:block; font-size:14px; margin-bottom:3px; }
.tpld-mode span{ font-size:12.5px; color:var(--text-muted); line-height:1.45; }
.tpld-mode:hover{ border-color:rgba(232,25,44,0.4); }
.tpld-mode.is-danger:hover{ border-color:rgba(232,25,44,0.7); background:rgba(232,25,44,0.08); }
.tpld-cap-warn{
  margin:0 0 14px; font-size:12.5px; color:#fbbf24; line-height:1.45;
}
.tpld-build-warn{
  margin:0 auto 16px; max-width:44ch; font-size:12.5px; color:#fbbf24; line-height:1.5;
  background:rgba(251,191,36,0.08); border:1px solid rgba(251,191,36,0.25);
  border-radius:10px; padding:9px 12px;
}
.tpld-phases{ list-style:none; margin:0 0 16px; padding:0; text-align:left; max-width:320px; margin-left:auto; margin-right:auto; }
.tpld-phases li{
  padding:7px 0 7px 22px; position:relative; font-size:13px; color:var(--text-dim); font-weight:600;
}
.tpld-phases li::before{ content:''; position:absolute; left:0; top:11px; width:8px; height:8px; border-radius:50%; background:var(--border); }
.tpld-phases li.is-on{ color:var(--text); }
.tpld-phases li.is-on::before{ background:var(--crimson); box-shadow:0 0 0 4px rgba(232,25,44,0.18); }
.tpld-phases li.is-done{ color:var(--text-muted); }
.tpld-phases li.is-done::before{ background:#34d399; }

/* ─── Viewport-centered popups (hoisted onto <body> by core.js) ─────────── */
body > .acct-modal-overlay,
body > .rr-modal-overlay,
body > .tk-modal-overlay,
body > .tpld-confirm,
body > #rankcrop-modal,
body > #cbotcrop-modal,
body > #feed-plat-modal,
body > #pg-upgrade-modal{
  position:fixed !important;
  inset:0 !important;
  align-items:center !important;
  justify-content:center !important;
  padding:max(12px, env(safe-area-inset-top, 0px)) 14px max(12px, env(safe-area-inset-bottom, 0px)) !important;
  box-sizing:border-box;
}
body > .acct-modal-overlay,
body > .rr-modal-overlay{ z-index:10050; }
body > .tk-modal-overlay{ z-index:10050; align-items:center !important; }
body > .acct-modal-overlay > .acct-modal,
body > .rr-modal-overlay > .rr-modal,
body > .tk-modal-overlay > .tk-modal,
body > .tpld-confirm > .tpld-confirm-card{
  max-height:min(90vh, calc(100dvh - 28px));
  overflow:hidden;
}
body > .rr-modal-overlay > .rr-modal,
body > .acct-modal-overlay > .acct-modal{
  display:flex; flex-direction:column;
}

/* ─── Phone / small-tablet: every tab stays usable ──────────────────────── */
@media (max-width:900px){
  .tab-page{ padding:16px 14px 28px; }
  .page-header{ padding:4px 0 10px; }
  .dash-hamburger{ width:44px; height:44px; }
  .dash-content{ overflow-x:hidden; }
  .config-panel, .info-card, .module-card{ min-width:0; }
  .cp-head{ flex-wrap:wrap; gap:12px; }
  .fields-grid, .u-grid2, .u-grid2-14{ grid-template-columns:1fr !important; }
  .wb-card-tools{ grid-template-columns:1fr; }
  .ch-picker-btn, .save-btn, .am-mod-settings-btn, .am-action-btn{
    min-height:44px;
  }
  .save-btn{ width:100%; }
  .cp-head .save-btn, .eco-btn-row .save-btn, .cmp-cta{ width:auto; }
  .mod-search{ width:100%; }
  .mod-list, .mod-card, .rr-list, .rr-card{ max-width:100%; }
  .wprev-card-img, .welcome-preview, .emb-canvas{ max-width:100%; }
  #tab-welcome .welcome-preview-card,
  #tab-economy .eco-side{ position:relative !important; top:auto; }
  .seg-switch{
    display:flex; width:100%;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .seg-switch::-webkit-scrollbar{ display:none; }
  .seg-btn{ min-width:0; flex:1 1 auto; padding:10px 10px; }
  .seg-label{ font-size:12px; }
  .seg-switch.seg-4 .seg-label{ font-size:11px; }
  .mgrowth-stats{ grid-template-columns:repeat(2,1fr); }
  .am-settings-modal, .am-settings-modal.is-wide{ width:min(640px, 100%) !important; max-height:min(92vh, 100dvh - 24px); }
}

.ovx-health{
  display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:stretch;
  margin:0 0 22px; padding:18px 18px; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.08);
}
.ovx-health[data-level="good"] .ovx-health-num{ color:#3BD17A; }
.ovx-health[data-level="ok"] .ovx-health-num{ color:#FFB020; }
.ovx-health[data-level="low"] .ovx-health-num{ color:#FF6B78; }
.ovx-health-score{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.ovx-health-num{ font-family:'Bebas Neue',sans-serif; font-size:52px; line-height:1; letter-spacing:1px; }
.ovx-health-lbl{ font-size:12px; font-weight:700; color:var(--text-muted); margin-top:6px; }
.ovx-health-list{ display:flex; flex-wrap:wrap; gap:8px; align-content:center; }
.ovx-health-item{
  border:1px solid rgba(255,255,255,0.1); background:rgba(0,0,0,0.2); color:var(--text);
  border-radius:999px; padding:7px 12px; font-size:12px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.ovx-health-item.is-on{ border-color:rgba(59,209,122,0.35); color:#b7f0c9; }
.ovx-health-item.is-off{ opacity:.75; }
.ovx-health-item:hover{ border-color:var(--crimson-border); }
.ovx-recent{ display:flex; flex-direction:column; gap:6px; margin:0 0 22px; }
.ovx-recent-row{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.07);
  background:rgba(255,255,255,0.03); color:var(--text); cursor:pointer; font-size:13px;
}
.ovx-recent-row:hover{ border-color:var(--crimson-border); }
.ovx-recent-ic{ flex:0 0 auto; }
.ovx-recent-main{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ovx-recent-time{ flex:0 0 auto; font-size:11px; color:var(--text-dim); }
.ovx-recent-empty{ font-size:13px; color:var(--text-dim); padding:8px 2px; }
@media (max-width:720px){
  .ovx-health{ grid-template-columns:1fr; }
}

#am-pane-trap .am-trap-ebx{ max-width:100%; }

@media (max-width:560px){
  .tab-page{ padding:12px 10px 24px; }
  .seg-ic{ display:none; }
  .seg-switch.seg-4 .seg-btn{ padding:10px 6px; }
  .cp-body, .cp-head{ padding-left:14px; padding-right:14px; }
  .wb-pics{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .info-stat-row{ flex-wrap:wrap; }
  .am-mod-card-foot{ flex-wrap:wrap; }
}

/* ═══════════════════════════════════════════
   SUPPORT / FEEDBACK  (topbar button, submission modal, tickets, owner queue)
   ═══════════════════════════════════════════ */
.topbar-feedback-btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:7px 14px; border-radius:10px; font-size:12px; font-weight:700;
  color:var(--text); background:rgba(232,25,44,0.12);
  border:1px solid rgba(232,25,44,0.4); transition:all .15s var(--ease);
}
.topbar-feedback-btn:hover{ background:rgba(232,25,44,0.22); border-color:rgba(232,25,44,0.7); }

/* Support + CS: /assets/dashboard/support-ui.css
   My Account tabs/cards: /assets/dashboard/account-ui.css */
@media (max-width:640px){
  .topbar-feedback-btn span:not(:first-child){ display:inline; }
}

/* ═══════════════════════════════════════════
   ADMIN TAB — access + how-it-works + Nexus
   ═══════════════════════════════════════════ */
#tab-admin .admin-maincol{ display:flex; flex-direction:column; gap:20px; min-width:0; }
#tab-admin .admin-maincol > .config-panel,
#tab-admin .admin-maincol > .config-panel + .config-panel{ margin-top:0; }
#tab-admin #cbot-look{ margin: 8px 0 22px; padding-top: 4px; }
#tab-admin #cbot-look-status:empty{ display:none; }
#tab-admin #cbot-look-status{ margin: 8px 0 12px; }

#tab-admin .admin-gated-body{
  text-align:center; padding:56px 28px;
}
#tab-admin .admin-gated-ic{
  width:56px; height:56px; margin:0 auto 14px;
  border-radius:16px; font-size:26px; line-height:56px;
  background:linear-gradient(160deg, rgba(232,25,44,0.18), rgba(14,17,24,0.55));
  border:1px solid rgba(232,25,44,0.34);
}

#tab-admin .admin-how{ align-self:start; }
#tab-admin .admin-how .info-section{ padding:20px 18px 18px; }
#tab-admin .admin-rules{ display:flex; flex-direction:column; gap:6px; }
#tab-admin .admin-rule{
  display:flex; gap:11px; align-items:flex-start;
  padding:10px 11px; border-radius:12px;
  background:rgba(255,255,255,0.028);
  border:1px solid rgba(255,255,255,0.06);
}
#tab-admin .admin-rule-ic{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; line-height:1; overflow:visible;
  background:rgba(232,25,44,0.12);
  border:1px solid rgba(232,25,44,0.22);
}
#tab-admin .admin-rule-title{
  font-size:13px; font-weight:700; color:var(--text); letter-spacing:.2px;
}
#tab-admin .admin-rule-desc{
  font-size:12px; font-weight:500; color:var(--text-muted);
  margin-top:3px; line-height:1.45;
}

#tab-admin .admin-inline-save{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
#tab-admin .admin-inline-save .field-input{ min-width:240px; flex:1 1 220px; }
#tab-admin .admin-inline-save .save-btn{
  width:auto; margin-top:0; padding:10px 18px;
}

#tab-admin .admin-nexus{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:20px; align-items:start;
}
#tab-admin .admin-nexus > .config-panel,
#tab-admin .admin-nexus > .config-panel + .config-panel{ margin-top:0; }
#tab-admin .admin-nexus-cta{
  background:linear-gradient(135deg,#A78BFA,#7C3AED);
}
#tab-admin .admin-cbot-stats{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px; margin-bottom:16px;
}
#tab-admin .admin-cbot-stat{
  padding:12px 12px 11px; border-radius:12px;
  background:rgba(255,255,255,0.028);
  border:1px solid rgba(255,255,255,0.06);
  min-width:0;
}
#tab-admin .admin-cbot-stat-label{
  font-family:'JetBrains Mono',monospace;
  font-size:9px; font-weight:600; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:6px;
}
#tab-admin .admin-cbot-stat-val{
  font-size:13px; font-weight:700; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#tab-admin #cbot-hint:empty{ display:none; }
#tab-admin #cbot-hint{ margin-bottom:16px; }

#tab-admin .admin-steps{ display:flex; flex-direction:column; gap:0; }
#tab-admin .admin-step{
  display:grid; grid-template-columns:28px 1fr; gap:12px;
  position:relative; padding-bottom:18px;
}
#tab-admin .admin-step:last-child{ padding-bottom:0; }
#tab-admin .admin-step:not(:last-child)::before{
  content:""; position:absolute; left:13px; top:30px; bottom:0; width:1px;
  background:linear-gradient(180deg, rgba(232,25,44,0.45), rgba(255,255,255,0.06));
}
#tab-admin .admin-step-n{
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
  color:#fff; background:var(--crimson);
  box-shadow:0 4px 12px -4px rgba(232,25,44,0.7);
  position:relative; z-index:1;
}
#tab-admin .admin-step-body{ min-width:0; padding-top:3px; }
#tab-admin .admin-step-title{
  font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px;
}
#tab-admin .admin-step-body .field-desc{ margin-bottom:8px; }
#tab-admin .admin-step-actions{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0 4px;
}
#tab-admin .admin-step-btn,
#tab-admin .admin-step-actions .save-btn,
#tab-admin a.admin-step-btn{
  width:auto; margin-top:0; padding:9px 16px; text-decoration:none;
  display:inline-flex;
}
#tab-admin a.admin-step-link{
  display:inline-flex; width:auto; text-decoration:none; margin-top:4px;
}
#tab-admin .cbot-howto{ margin:8px 0 0; }
#tab-admin .cbot-howto a{ color:var(--crimson-2); font-weight:600; text-decoration:none; }
#tab-admin .cbot-howto a:hover{ text-decoration:underline; }
#tab-admin .admin-danger{ color:#f87171; }
#tab-admin .admin-warn{ color:var(--yellow); }
#tab-admin .admin-warn:empty,
#tab-admin #cbot-validate-msg:empty{ display:none; }

@media (max-width:900px){
  #tab-admin .admin-cbot-stats{ grid-template-columns:1fr; }
  #tab-admin .admin-how{ position:relative !important; top:auto; }
}

.page-header-row .page-header-text{ flex:1; min-width:0; }
.poll-head-stats{ margin-left:auto; }

.cmd-mod{
  background:rgba(16,19,26,0.55);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cmd-mod + .cmd-mod{ margin-top:8px; }
.cmd-mod.is-on{ border-color:rgba(232,25,44,0.22); }
.cmd-mod.is-open{ border-color:rgba(232,25,44,0.35); }
.cmd-mod-head{ display:flex; align-items:center; gap:12px; }
.cmd-mod-ic{
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  background:linear-gradient(160deg, rgba(232,25,44,0.16), rgba(14,17,24,0.5));
  border:1px solid rgba(232,25,44,0.22);
}
.cmd-mod-info{
  flex:1; min-width:0; text-align:left; background:none; border:0;
  color:inherit; cursor:pointer; padding:0; font:inherit;
}
.cmd-mod-name{ font-weight:700; font-size:13.5px; color:var(--text); display:flex; align-items:center; gap:8px; }
.cmd-mod-opt{
  font-size:10px; font-weight:600; letter-spacing:.4px; text-transform:uppercase;
  color:var(--text-dim); border:1px solid var(--border); border-radius:6px; padding:1px 6px;
}
.cmd-mod-meta{ font-size:11.5px; color:var(--text-muted); margin-top:3px; }
.cmd-mod-jump{
  background:none; border:0; color:var(--crimson-2); cursor:pointer;
  font-size:12px; font-weight:600; white-space:nowrap; padding:4px 0;
}
.cmd-mod-jump:hover{ text-decoration:underline; }
.cmd-mod-cmds{
  display:flex; flex-wrap:wrap; gap:6px 4px;
  padding:10px 0 2px 50px; margin-top:10px;
  border-top:1px solid var(--border);
}
.cmd-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; color:var(--text-muted);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:8px; padding:4px 8px;
}
.cmd-chip code{ font-size:11px; color:var(--text); }
.cmd-chip input{ accent-color:var(--crimson); }
@media (max-width:560px){
  .cmd-mod-cmds{ padding-left:0; }
}

.sch-pro{ font-size:13px; color:#5865F2; font-weight:400; letter-spacing:0; margin-left:8px; }
/* Same editor-left / preview-right split as Embed Builder (.emb-build-layout). */
.sch-repeat-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sch-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; flex-wrap:wrap; }
.sch-actions .save-btn{ width:auto; margin-top:0; }
.sch-list-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.sch-list-head .save-btn{ width:auto; margin-top:0; }
.sch-card{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin-bottom:10px;
  background:rgba(16,19,26,0.55);
}
.sch-card-main{ flex:1; min-width:240px; }
.sch-card-ch{ font-weight:700; color:var(--text); }
.sch-card-body{ margin-top:6px; color:var(--text); font-size:13px; line-height:1.5; }
.sch-card-meta{ margin-top:6px; color:var(--text-muted); font-size:12px; }
.sch-card-actions{ display:flex; gap:6px; flex-shrink:0; flex-wrap:wrap; }
.sch-badge{ padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; margin-left:8px; }
.sch-badge-pause{ background:rgba(255,170,0,0.15); color:#FFA500; border:1px solid rgba(255,170,0,0.4); }
/* A schedule that keeps failing to send (auto-paused after 5 tries). */
.sch-badge-fail{ background:rgba(220,31,38,0.15); color:#FF6B72; border:1px solid rgba(220,31,38,0.45); cursor:help; }
.sch-fired{ color:var(--text-muted); font-size:11px; margin-left:8px; }

/* ── Embed Builder: Message/Embed switch + "Schedule for later" ─────────────
   Scheduled Announcements was merged into the Embed Builder. There is ONE
   action button — the checkbox in the publish bar only decides whether it
   sends now or queues. */
/* Superseded by the class-based guards in embed-ui.css (.ebx-embed[hidden] et
   al) once the editor became a composer mount — this id no longer exists. */
#emb-when-later-fields[hidden]{ display:none !important; }
.emb-kind-row{ display:flex; align-items:center; margin-bottom:12px; }

/* Compact segmented control — the full-size one dwarfs a 2-option choice. */
.seg-switch.seg-mini{ gap:2px; padding:3px; border-radius:10px; margin:0; }
.seg-switch.seg-mini .seg-thumb{ top:3px; left:3px; bottom:3px; border-radius:7px; }
.seg-switch.seg-mini.seg-2 .seg-thumb{ width:calc(50% - 3px); }
.seg-switch.seg-mini .seg-btn{
  min-width:0; padding:5px 14px; font-size:11.5px; gap:5px; border-radius:7px; letter-spacing:.3px;
}
.seg-switch.seg-mini .seg-ic{ font-size:12px; }

/* Schedule-for-later toggle: sits left of the action buttons. */
.emb-sched-toggle{
  display:inline-flex; align-items:center; gap:7px;
  margin:0 auto 0 0; align-self:center; height:44px;
  font-size:12.5px; font-weight:600; color:var(--text-muted); cursor:pointer;
  user-select:none; white-space:nowrap;
}
.emb-sched-toggle:hover{ color:var(--text); }
.emb-sched-toggle input{ width:14px; height:14px; accent-color:var(--crimson,#DC1F26); cursor:pointer; margin:0; }
.emb-sched-locked{ opacity:0.62; }
.emb-sched-locked:hover{ opacity:0.8; }
.seg-lock{ margin-left:6px; font-size:11px; opacity:0.85; }
.seg-btn-locked{ opacity:0.62; }
.seg-btn-locked:hover{ opacity:0.8; }

/* ── CYNDRIX CARDS — the shared banner gallery ──────────────────────────────
   One dialog backs both the rank card background and the greeting banners.
   Modelled on .pg-modal-* so it reads as the same family of dialog. */
#bp-modal{ position:fixed; inset:0; z-index:1200; display:none; }
#bp-modal.open{ display:block; }
.bp-backdrop{ position:absolute; inset:0; background:rgba(6,8,12,0.72); backdrop-filter:blur(4px); }
.bp-card{
  position:relative; margin:4vh auto 0; width:min(960px, 94vw); max-height:92vh;
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg, rgba(24,28,38,0.98), rgba(14,17,24,0.99));
  border:1px solid rgba(255,255,255,0.09); border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
}
.bp-head{ display:flex; align-items:flex-start; gap:12px; padding:18px 20px 12px; }
.bp-title{ font-size:17px; font-weight:700; color:var(--text); }
.bp-sub{ font-size:12px; color:var(--text-dim); margin-top:2px; }
.bp-close{
  margin-left:auto; width:32px; height:32px; flex:0 0 auto; border:none; border-radius:8px;
  background:none; color:var(--text-dim); font-size:22px; line-height:1; cursor:pointer;
}
.bp-close:hover{ color:var(--text); background:var(--surface-2); }

/* The big preview. Fixed 10:3 — the rank card's own ratio — so what you see is
   the crop the card will actually take, not the source image's full frame. */
.bp-stage{
  position:relative; margin:0 20px; border-radius:12px; overflow:hidden;
  aspect-ratio:600/180; background:var(--surface-2); border:1px solid var(--border);
  /* A 16:9 stage on a 920px dialog is ~520px tall and swallowed the grid, so it
     is capped at 300px. openBannerPicker() then caps the WIDTH to match, or the
     cap would win over aspect-ratio and quietly show a crop the caller will
     never produce. Keep this number and BP_STAGE_MAX_H in step. */
  max-height:300px; flex:0 0 auto; margin-inline:auto; width:100%;
}
.bp-stage-img{ width:100%; height:100%; object-fit:cover; display:block; }
.bp-stage-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim);
}
/* The UA sheet's [hidden]{display:none} LOSES to any author display: rule, and
   both of the above set one — so el.hidden = true left "NO IMAGE" printed over
   the selected banner. These two rules are what actually makes .hidden work. */
.bp-stage-img[hidden], .bp-stage-empty[hidden]{ display:none; }
#bp-modal [hidden]{ display:none !important; }
.bp-stage-name{
  position:absolute; left:10px; bottom:8px; font-size:11px; font-weight:600;
  color:#fff; background:rgba(8,10,16,0.66); padding:3px 9px; border-radius:999px;
}

.bp-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px;
  grid-auto-rows:96px; align-content:start;
  /* flex:1 plus min-height:0 is what makes this region scroll inside the
     dialog. Without it the grid grew with its tiles and the ones past the
     card's max-height were clipped, with no scrollbar. */
  flex:1 1 auto; min-height:0;
  padding:14px 20px; overflow-y:auto;
}
.bp-tile{
  position:relative; padding:0; border:2px solid transparent; border-radius:10px;
  overflow:hidden; cursor:pointer; background:var(--surface-2);
  /* A FIXED height, not aspect-ratio. As a grid item in a height-constrained
     scroll container the ratio fought the row sizing and the rows overlapped
     each other. The thumbnails are already cropped by object-fit, so a fixed
     row height is both simpler and stable. */
  height:96px;
  transition:border-color .15s, transform .15s;
}
.bp-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.bp-tile:hover{ transform:translateY(-2px); border-color:var(--crimson-border); }
.bp-tile.is-on{ border-color:var(--crimson); }
.bp-tile.is-on::after{
  content:"✓"; position:absolute; top:6px; right:6px; width:20px; height:20px;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
  color:#fff; background:var(--crimson); border-radius:50%;
}
.bp-tile-name{
  position:absolute; left:0; right:0; bottom:0; padding:14px 8px 5px; text-align:left;
  font-size:10.5px; font-weight:600; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(6,8,12,0.85));
}
.bp-empty{ grid-column:1/-1; padding:28px 0; text-align:center; font-size:12.5px; color:var(--text-dim); }

.bp-actions{ display:flex; align-items:center; gap:10px; padding:12px 20px 18px; }
.bp-spacer{ flex:1; }
.bp-btn-primary{
  padding:9px 18px; border:none; border-radius:9px; cursor:pointer;
  font-size:13px; font-weight:700; color:#fff; background:var(--crimson);
}
.bp-btn-primary:hover{ filter:brightness(1.08); }
.bp-btn-primary:disabled{ opacity:.45; cursor:default; filter:none; }
.bp-btn-ghost{
  padding:9px 14px; border:1px solid var(--border); border-radius:9px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--text-dim); background:transparent;
}
.bp-btn-ghost:hover{ color:var(--text); border-color:var(--crimson-border); }
.bp-btn-ghost.is-on{ color:var(--text); border-color:var(--crimson); }

/* The button that opens all this. Sits beside the upload zone. */
.bp-open-btn{
  display:inline-flex; align-items:center; gap:8px; padding:9px 14px;
  border:1px solid var(--crimson-border); border-radius:9px; cursor:pointer;
  font-size:12.5px; font-weight:700; color:var(--text); background:rgba(232,25,44,0.08);
}
.bp-open-btn:hover{ background:rgba(232,25,44,0.16); }
.bp-open-btn .bp-open-ic{ font-size:14px; line-height:1; }

@media (max-width:640px){
  .bp-card{ margin:0; width:100vw; max-height:100vh; height:100vh; border-radius:0; }
  .bp-grid{ grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
}

/* Cyndrix Cards row inside the rank card panel — the gallery button sits ABOVE
   the (premium-locked) upload zone, so a free server sees what it CAN do first. */
.rc-cards-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.rc-cards-hint{ font-size:11.5px; color:var(--text-dim); }

/* Language add-ons under the banned-word pack selector. These LAYER on top of
   the chosen pack rather than replacing it — the packs are English and strictly
   nested, so a language list cannot be a fifth tier. */
.am-bw-addons{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.am-bw-addon{
  display:flex; align-items:baseline; gap:9px; cursor:pointer;
  padding:8px 10px; border:1px solid var(--border); border-radius:9px;
  background:var(--surface-2);
}
.am-bw-addon:hover{ border-color:var(--crimson-border); }
.am-bw-addon input{ flex:0 0 auto; }
.am-bw-addon-t{ font-size:12.5px; font-weight:600; color:var(--text); flex:0 0 auto; }
.am-bw-addon-d{ font-size:11px; color:var(--text-dim); min-width:0; }

/* Counting emoji preview. The input holds the raw Discord token because that is
   what the bot must send; this shows the admin what it actually looks like. */
.counting-emoji-preview{ display:flex; align-items:center; gap:8px; margin-top:6px; min-height:22px; }
.counting-emoji-shown{ font-size:20px; line-height:1; display:inline-flex; align-items:center; }
.counting-emoji-shown .dc-emoji{ width:22px; height:22px; vertical-align:middle; }
.counting-emoji-name{ font-size:11px; color:var(--text-dim); font-family:"JetBrains Mono", ui-monospace, monospace; }

/* ── AI Moderation layout ────────────────────────────────────────────────────
   Was one 2585px column of eight stacked sections, most of it prose, so every
   actual setting sat below the fold. Now three panes plus a side panel that
   holds the primer and the usage meter — liebe: "a little how it work will be
   better on the right side". */
.aimod-layout{ align-items:start; }
.aimod-main{ min-width:0; }
.aimod-side{ position:sticky; top:16px; }
.aimod-side .info-section:last-child{ border-bottom:none; }

/* Numbered primer. Reads as steps rather than a paragraph nobody finishes. */
.am-how{ margin:0; padding-left:18px; font-size:12.5px; line-height:1.6; color:var(--text-muted); }
.am-how li + li{ margin-top:7px; }
.am-how-note{
  margin-top:12px; padding:10px 12px; border-radius:8px;
  background:rgba(88,101,242,0.08); border:1px solid rgba(88,101,242,0.25);
  font-size:12px; line-height:1.55; color:var(--text-muted);
}

.am-usage-num{ font-family:'Bebas Neue', sans-serif; font-size:30px; line-height:1; letter-spacing:1px; color:var(--text); }
.am-usage-cap{ color:var(--text-dim); font-size:20px; }
.am-usage-meta{ font-size:11.5px; color:var(--text-dim); margin-top:6px; }

/* A label + description with its switch on the right. Replaces four separate
   inline style="display:flex…" blocks that had drifted apart. */
.am-inline-toggle{
  display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 14px; margin-top:12px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:9px;
}
.am-inline-toggle > div:first-child{ min-width:0; flex:1; }
.am-inline-toggle .toggle{ flex-shrink:0; }
.am-inline-t{ font-size:13px; font-weight:600; color:var(--text); margin-bottom:3px; }
.am-inline-d{ font-size:11.5px; color:var(--text-muted); line-height:1.5; }

.am-tier-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.am-save-row{ display:flex; justify-content:flex-end; margin-top:14px; }

@media (max-width:900px){
  .aimod-side{ position:static; }
  .am-tier-grid{ grid-template-columns:1fr; }
}

/* ── Auto-mod › pre-send blocking, on the module cards ───────────────────── */
.am-presend{
  display:flex;gap:9px;align-items:flex-start;cursor:pointer;
  margin:0;padding:9px 11px;border-radius:8px;flex:0 0 auto;
  background:rgba(255,192,46,.07);border:1px solid rgba(255,192,46,.2);
}
.am-presend:hover{border-color:rgba(255,192,46,.4);}
.am-presend input{margin-top:2px;flex:0 0 auto;}
.am-presend span{display:flex;flex-direction:column;gap:2px;min-width:0;}
.am-presend strong{font-size:12px;font-weight:600;color:#ffd36b;}
.am-presend em{font-style:normal;font-size:11px;line-height:1.45;color:var(--cp-text-dim,#949ba4);}
.am-presend em em{font-style:italic;}
.am-mod-note{
  margin:0;padding:9px 11px;flex:0 0 auto;border-radius:8px;font-size:11px;line-height:1.5;
  background:rgba(20,184,166,.08);border:1px solid rgba(20,184,166,.22);color:var(--cp-text-dim,#a9b2ba);
}
.am-mod-note strong{color:#7fe3d5;}
.am-mod-desc code,.am-mod-note code{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;
  background:rgba(0,0,0,.3);padding:0 3px;border-radius:3px;
}
.am-presend-status{margin-bottom:14px;padding:9px 12px;border-radius:8px;font-size:12px;line-height:1.5;}
.am-presend-status.is-ok{background:rgba(20,184,166,.12);border:1px solid rgba(20,184,166,.3);color:#7fe3d5;}
.am-presend-status.is-error{background:rgba(232,25,44,.12);border:1px solid rgba(232,25,44,.34);color:#ff9aa4;}
/* Links & Invites is one module with two halves — the sub-switches sit between
   the header and the foot so the log picker still lines up across the grid. */
.am-subrule{
  display:flex;align-items:center;gap:7px;cursor:pointer;
  padding:6px 10px;border-radius:999px;font-size:11.5px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);
  color:var(--cp-text-dim,#a9b2ba);
}
.am-subrule:hover{border-color:rgba(232,25,44,.35);}
.am-subrule input{margin:0;flex:0 0 auto;}
.am-subrule input:checked + span{color:var(--cp-text,#dbdee1);font-weight:600;}
.am-subrule.is-off{opacity:.45;}
.am-set-group{
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--cp-text-dim,#8a929b);margin:4px 0 2px;padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.am-set-group + .field-row,.am-set-group + .field-row.u-grid2{margin-top:10px;}

/* Active rules: a strip across the top. It used to be a stacked list in a
   400px right-hand column, which cost the module grid a third of the window
   to show a handful of short labels. */
.am-active-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 18px;padding:10px 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.028);
}
.am-active-label{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cp-text-dim,#8a929b);flex:0 0 auto;
}
.am-active-chips{display:flex;flex-wrap:wrap;gap:7px;min-width:0;}
.am-active-chip{
  font-size:11.5px;padding:4px 10px;border-radius:999px;white-space:nowrap;
  background:rgba(232,25,44,.12);border:1px solid rgba(232,25,44,.3);color:#ffb3bb;
}
.am-active-none{font-size:11.5px;color:var(--cp-text-dim,#8a929b);}
.am-howto{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.am-howto > div{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--cp-text-dim,#a9b2ba);}
.am-howto-n{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;background:rgba(232,25,44,.16);color:#ff9aa4;
}
/* With the sidebar gone the grid has the full window — fit a third column on
   wide screens rather than stretching two cards across it. */
@media (min-width:1280px){ .am-mod-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:560px){ .am-active-bar{gap:8px;} }
/* A control the strike ladder overrides: still editable (it is the fallback when
   the ladder is off) but visibly not the one in charge right now. */
.is-superseded{opacity:.5;}
.is-superseded .field-label::after{content:' · ladder overrides';font-weight:400;opacity:.8;font-size:10.5px;}

/* Save result: stays until dismissed. A toast is gone in three seconds, and an
   auto-mod save can return several notes that are the whole point of reading it. */
/* An author `display` beats the UA's [hidden]{display:none}, so the attribute
   alone does NOT hide a flex element — the × set the property and the banner
   stayed on screen, and it showed before any save at all. */
.save-result[hidden]{display:none !important;}
.save-result{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:14px;padding:13px 14px;border-radius:12px;
  border:1px solid rgba(20,184,166,.3);background:rgba(20,184,166,.1);
}
.save-result.is-error{border-color:rgba(232,25,44,.34);background:rgba(232,25,44,.1);}
.save-result.has-notes{border-color:rgba(255,192,46,.32);background:rgba(255,192,46,.09);}
.save-result-ic{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;background:rgba(20,184,166,.22);color:#7fe3d5;
}
.save-result.is-pending{border-color:rgba(232,25,44,.34);background:rgba(232,25,44,.08);}
.save-result.is-pending .save-result-ic{
  background:transparent;color:transparent;
  border:2px solid rgba(255,255,255,.22);border-top-color:#ff8a96;
  animation:am-save-spin .7s linear infinite;
}
.save-result.is-pending .save-result-x{visibility:hidden;pointer-events:none;}
@keyframes am-save-spin{ to{ transform:rotate(360deg); } }
.save-result.is-error .save-result-ic{background:rgba(232,25,44,.2);color:#ff9aa4;}
.save-result.has-notes .save-result-ic{background:rgba(255,192,46,.2);color:#ffd36b;}
.save-result-body{flex:1 1 auto;min-width:0;}
.save-result-title{font-size:13px;font-weight:600;color:var(--cp-text,#dbdee1);}
.save-result-notes{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;}
.save-result-notes:empty,.save-result-notes[hidden]{display:none;}
.save-result-notes li{font-size:12px;line-height:1.55;color:var(--cp-text-dim,#a9b2ba);}
.save-result-x{
  flex:0 0 auto;background:none;border:0;cursor:pointer;line-height:1;
  font-size:18px;padding:0 2px;color:var(--cp-text-dim,#8a929b);
}
.save-result-x:hover{color:var(--cp-text,#dbdee1);}

/* ═══════════════════════════════════════════════════════════════════════════
   STAFF & ROLES (2026-09-16) — the admin-panel roster
   Consumes the existing reskin tokens; adds no new colour of its own.
   ═══════════════════════════════════════════════════════════════════════════ */

.admin-grant-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* One row per person. The left stripe encodes privilege: the more a role can
   reach, the louder its row reads, so the rows worth a second look are the
   ones that catch the eye. */
.admin-row {
  position: relative; display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; padding: 14px 16px 14px 18px;
  border: 1px solid var(--border, rgba(255,255,255,.06));
  border-radius: var(--r-md, 14px);
  background: var(--surface-2, #161920);
  margin-bottom: 10px;
}
.admin-row::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px;
  border-radius: 2px; background: rgba(255,255,255,.10);
}
.admin-row[data-role="abu"]::before       { background: var(--gold, #FFD700); }
.admin-row[data-role="senior_cs"]::before { background: rgba(168,85,247,.55); }

.admin-av {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  display: grid; place-items: center; overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 600; color: var(--text, #EDEFF5);
  background: var(--surface-3, #1C2028);
  border: 1px solid var(--border, rgba(255,255,255,.06));
}
.admin-av img { width: 100%; height: 100%; object-fit: cover; }
.admin-row[data-role="abu"] .admin-av {
  background: linear-gradient(135deg, rgba(255,215,0,.22), rgba(255,215,0,.05));
  border-color: rgba(255,215,0,.28);
}

.admin-who { flex: 1; min-width: 160px; }
.admin-nm { font-size: 14px; font-weight: 500; color: var(--text, #EDEFF5); }

/* The two-door indicator: which login methods this person actually has.
   A plain staff table hides this; it is the thing you need before revoking one. */
.admin-doors { display: flex; gap: 7px; margin-top: 5px; flex-wrap: wrap; }
.admin-door {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px;
  padding: 2px 7px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--border, rgba(255,255,255,.06));
  background: var(--bg, #080A0E); color: var(--text-dim, #8C95A6);
}
.admin-door.on {
  color: var(--text-muted, #AAB2C2);
  border-color: rgba(255,255,255,.12);
  background: var(--surface, #10131A);
}
.admin-door i { width: 5px; height: 5px; border-radius: 50%; background: #3A4150; flex: none; }
.admin-door.on i { background: var(--green, #10B981); }
.admin-door span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.admin-role { text-align: right; min-width: 130px; }
.admin-role-nm {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted, #AAB2C2);
}
.admin-row[data-role="abu"] .admin-role-nm       { color: var(--gold, #FFD700); }
.admin-row[data-role="senior_cs"] .admin-role-nm { color: var(--purple, #A855F7); }
.admin-role-desc { font-size: 11.5px; color: var(--text-dim, #8C95A6); margin-top: 2px; }
/* Extras render as a visible diff from the preset, not hidden in a settings page. */
.admin-role-plus {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: var(--teal, #14B8A6); margin-top: 3px;
}

.admin-acts { display: flex; gap: 7px; flex: none; }
.admin-danger {
  border-color: rgba(232,25,44,.30) !important;
  color: var(--crimson-2, #FF2D42) !important;
  background: rgba(232,25,44,.08) !important;
}

.admin-role-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.admin-pick {
  border: 1px solid var(--border, rgba(255,255,255,.06));
  background: var(--bg, #080A0E); color: var(--text-muted, #AAB2C2);
  border-radius: var(--r-sm, 10px); padding: 8px 14px; cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
  transition: all .16s var(--ease-out, ease);
}
.admin-pick:hover { border-color: rgba(255,255,255,.16); color: var(--text, #EDEFF5); }
.admin-pick[aria-pressed="true"] {
  border-color: var(--crimson-border, rgba(232,25,44,.25));
  background: var(--crimson-dim, rgba(232,25,44,.10));
  color: var(--crimson-2, #FF2D42);
}

/* Showing what a role CANNOT reach is what stops an accidental over-grant. */
.admin-blocked {
  margin-top: 16px; padding: 13px 15px; border-radius: var(--r-sm, 10px);
  border: 1px solid rgba(255,215,0,.18); background: rgba(255,215,0,.05);
}
.admin-blocked h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--gold, #FFD700); }
.admin-blocked-list { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-blocked-list span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px;
  color: var(--text-muted, #AAB2C2); padding: 2px 7px; border-radius: 5px;
  border: 1px solid var(--border, rgba(255,255,255,.06)); background: var(--bg, #080A0E);
}

.admin-extra { margin-top: 16px; }
.admin-extra > summary {
  cursor: pointer; font-size: 12.5px; color: var(--text-muted, #AAB2C2);
  padding: 8px 0; list-style: revert;
}
.admin-extra-body { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 0 2px; }
.admin-extra-item {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--text-muted, #AAB2C2); cursor: pointer;
  border: 1px solid var(--border, rgba(255,255,255,.06));
  border-radius: var(--r-sm, 10px); padding: 7px 11px; background: var(--bg, #080A0E);
}
.admin-extra-none { font-size: 12.5px; color: var(--text-dim, #8C95A6); }

.admin-matrix-scroll { overflow-x: auto; }
.admin-matrix { border-collapse: collapse; width: 100%; min-width: 600px; font-size: 13px; }
.admin-matrix th, .admin-matrix td {
  text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--border-2, rgba(255,255,255,.03));
}
.admin-matrix thead th {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-dim, #8C95A6); font-weight: 500;
  background: var(--bg-2, #0D0F14);
  border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
}
.admin-matrix tbody th { font-weight: 500; color: var(--text-muted, #AAB2C2); white-space: nowrap; }
.admin-matrix td { text-align: center; width: 84px; }
.admin-yes { color: var(--green, #10B981); }
.admin-no { color: #39404E; }

.admin-form-msg { margin-left: 12px; font-size: 12.5px; color: var(--text-dim, #8C95A6); }
.admin-form-msg.is-ok { color: var(--green, #10B981); }
.admin-form-msg.is-error { color: var(--crimson-2, #FF2D42); }

.admin-legacy > summary { cursor: pointer; list-style: none; }
.admin-legacy > summary::-webkit-details-marker { display: none; }

@media (max-width: 640px) {
  .admin-row { gap: 10px; padding: 12px 14px 12px 16px; }
  .admin-role { text-align: left; width: 100%; min-width: 0; padding-left: 50px; }
  .admin-acts { width: 100%; padding-left: 50px; }
  .admin-who { min-width: 0; }
}

/* Broadcast queue status strip — delivery is asynchronous now, so the outcome
   needs somewhere to land after the request returns. */
.bq-strip { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.bq-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--r-sm, 10px);
  border: 1px solid rgba(245,158,11,.22); background: rgba(245,158,11,.06);
  font-size: 12.5px; color: var(--text-muted, #AAB2C2);
}
.bq-row b { color: var(--yellow, #F59E0B); font-weight: 600; }
.bq-row.is-done {
  border-color: rgba(16,185,129,.22); background: rgba(16,185,129,.06);
}
.bq-row.is-done b { color: var(--green, #10B981); }


/* ─────────────────────────────────────────────────────────────────────────
   Tickets → Team. A showcase, so the podium gets the height and the colour
   and everything else stays quiet. The ribbon is the one idea worth looking
   at twice: the shape of someone's ratings, which an average hides.
   ───────────────────────────────────────────────────────────────────────── */
.tk-podium{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:end;
  margin:18px 0 6px; min-height:210px; }
.tk-podium-empty{ grid-column:1 / -1; align-self:center; }
.tk-pod{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px; }
.tk-pod-medal{ font-size:20px; line-height:1; }
.tk-pod-disc{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:19px; color:var(--text); background:var(--surface-2);
  border:2px solid var(--border); }
.tk-pod-1 .tk-pod-disc{ border-color:#F5B31B; box-shadow:0 0 18px rgba(245,179,27,.35); }
.tk-pod-2 .tk-pod-disc{ border-color:#C6CDD6; }
.tk-pod-3 .tk-pod-disc{ border-color:#CD7F32; }
.tk-pod-name{ font-size:12.5px; font-weight:700; color:var(--text); max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-pod-score{ font-size:22px; font-weight:800; color:#F5B31B; line-height:1.1; }
.tk-pod-sub{ font-size:10.5px; color:var(--text-dim); }
.tk-pod-plinth{ width:100%; border-radius:10px 10px 0 0; background:var(--surface-2);
  border:1px solid var(--border); border-bottom:0; display:grid; place-items:center;
  font-weight:800; font-size:16px; color:var(--text-dim); margin-top:4px; }
.tk-pod-1 .tk-pod-plinth{ height:92px; background:linear-gradient(180deg,rgba(245,179,27,.20),transparent);
  border-color:rgba(245,179,27,.45); color:#F5B31B; }
.tk-pod-2 .tk-pod-plinth{ height:64px; }
.tk-pod-3 .tk-pod-plinth{ height:46px; }

.tk-spread{ display:flex; flex-direction:column; gap:6px; }
.tk-spread-row{ display:grid; grid-template-columns:34px 1fr 40px; gap:10px; align-items:center;
  font-size:11.5px; color:var(--text-dim); }
.tk-spread-label{ font-weight:700; color:var(--text); }
.tk-spread-track{ height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.tk-spread-fill{ display:block; height:100%; border-radius:99px; transition:width .5s ease; }
.tk-spread-count{ text-align:right; }

.tk-board{ display:flex; flex-direction:column; gap:6px; }
.tk-board-row{ display:grid; grid-template-columns:34px minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
  gap:10px; align-items:center; padding:9px 10px; background:var(--surface);
  border:1px solid var(--border); border-radius:10px; }
.tk-board-rank{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:800; background:var(--surface-2); color:var(--text-dim);
  border:1px solid var(--border); }
.tk-board-rank-1{ color:#F5B31B; border-color:rgba(245,179,27,.5); }
.tk-board-rank-2{ color:#C6CDD6; border-color:rgba(198,205,214,.45); }
.tk-board-rank-3{ color:#CD7F32; border-color:rgba(205,127,50,.5); }
.tk-board-who{ min-width:0; }
.tk-board-name{ font-size:12.5px; font-weight:700; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-board-meta{ font-size:10.5px; color:var(--text-dim); }
.tk-board-need{ color:#F5B31B; }
.tk-board-rating{ text-align:right; }
.tk-stars{ color:#F5B31B; font-size:13px; letter-spacing:1px; }
.tk-stars-dim{ color:var(--border); }
.tk-stars-empty{ font-size:11px; color:var(--text-dim); font-style:italic; }
.tk-board-avg{ font-size:10.5px; color:var(--text-dim); }
.tk-ribbon{ display:flex; height:10px; border-radius:99px; overflow:hidden;
  background:var(--surface-2); }
.tk-ribbon-empty{ background:repeating-linear-gradient(90deg,var(--surface-2),var(--surface-2) 4px,transparent 4px,transparent 8px); }
.tk-ribbon-seg{ display:block; height:100%; }

@media (max-width:760px){
  .tk-board-row{ grid-template-columns:28px 1fr; row-gap:6px; }
  .tk-board-rating{ text-align:left; grid-column:2; }
  .tk-board-ribbon{ grid-column:2; }
  .tk-pod-plinth{ font-size:13px; }
}
@media (prefers-reduced-motion:reduce){
  .tk-spread-fill{ transition:none; }
}

/* ── Records → Blacklist ─────────────────────────────────────────── */
.sbl-add{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:16px 18px; margin-bottom:14px;
}
.sbl-add-title{ font-size:14px; font-weight:700; color:var(--text); }
.sbl-add-sub{ font-size:12.5px; line-height:1.5; color:var(--text-dim); margin-top:4px; }
.sbl-add-sub code{ font-size:12px; padding:1px 5px; border-radius:5px; background:rgba(255,255,255,0.06); }
.sbl-add-row{ display:flex; gap:10px; margin-top:12px; align-items:stretch; }
.sbl-add-row .field-input{ margin:0; min-width:0; }
.sbl-add-row .sbl-id{ flex:0 0 230px; font-variant-numeric:tabular-nums; }
.sbl-add-row .sbl-reason{ flex:1 1 auto; }
.sbl-add-row .sbl-add-btn{ width:auto; margin-top:0; padding:0 26px; flex-shrink:0; }
.sbl-add-hint{ font-size:11.5px; color:var(--text-dim); margin-top:9px; }
.sbl-count{ font-size:11.5px; color:var(--text-dim); letter-spacing:.4px; margin:0 2px 10px; }
.mod-entry .sbl-remove{ align-self:center; flex-shrink:0; margin-left:10px; }
@media (max-width: 700px){
  .sbl-add-row{ flex-direction:column; }
  .sbl-add-row .sbl-id{ flex:none; }
  .sbl-add-row .sbl-add-btn{ padding:11px 20px; }
}

/* ── Records → Bans / Blacklist: appeal settings ─────────────────── */
.apl-card{
  display:flex; gap:18px; align-items:center; justify-content:space-between;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:14px 18px; margin-bottom:14px;
}
.apl-text{ min-width:0; flex:1 1 auto; }
.apl-title{ font-size:14px; font-weight:700; color:var(--text); }
.apl-sub{ font-size:12.5px; line-height:1.5; color:var(--text-dim); margin-top:4px; }
.apl-sub code{ font-size:12px; padding:1px 5px; border-radius:5px; background:rgba(255,255,255,0.06); }
.apl-hint{ font-size:12px; line-height:1.5; color:#E8A33D; margin-top:7px; }
.apl-role{ flex:0 0 230px; display:flex; flex-direction:column; gap:5px; }
.apl-role-label{ font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); }
.apl-role .field-input{ margin:0; }
@media (max-width: 760px){
  .apl-card{ flex-direction:column; align-items:stretch; }
  .apl-role{ flex:none; }
}

/* Statistics ranges past the plan's history (Free 60 days) */
.mgrowth-range.is-locked{ opacity:.55; cursor:not-allowed; }
.mgrowth-range.is-locked:hover{ color:var(--text-dim); }

/* ── Warning ladder (Records → Warnings, warnladder.js) ──────────────────── */
.wl-card{ padding:14px 18px; border-radius:16px; background:var(--surface); border:1px solid var(--border); margin-bottom:14px; }
.wl-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.wl-text{ min-width:0; }
.wl-summary{ margin-top:10px; font-size:12.5px; font-weight:600; color:var(--crimson-2, #ff5a6e); }
.wl-summary.is-off{ color:var(--text-dim); }
.wl-steps{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.wl-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 10px; border-radius:10px;
  background:rgba(255,255,255,0.03); border:1px solid var(--border); }
.wl-at{ font-size:13px; color:var(--text-muted); }
.wl-row .field-input{ width:auto; min-width:0; padding:6px 10px; }
.wl-count{ width:64px !important; text-align:center; }
.wl-action{ min-width:110px; }
.wl-dur{ min-width:130px; }
.wl-dur-none{ flex:0 0 0; }
.wl-del{ margin-left:auto; background:none; border:1px solid var(--border); color:var(--text-dim); border-radius:8px;
  width:30px; height:30px; cursor:pointer; }
.wl-del:hover{ color:#ff6b73; border-color:rgba(255,107,115,0.45); }
.wl-empty{ font-size:12.5px; color:var(--text-dim); padding:6px 2px; }
.wl-actions{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.wl-status{ flex:1; font-size:12px; color:#3BA55C; }

/* ── Mod Log extras (modlog-extras.js) ───────────────────────────────────── */
.mlx-none{ font-size:12px; color:var(--text-dim); padding:6px 0; font-style:italic; }
.mlx-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.mlx-user-add{ display:flex; gap:8px; margin-top:8px; max-width:360px; }
.mlx-user-add .field-input{ flex:1; }

/* Bot Profile health banner (failover, 2026-09-29) */
.cbot-health.cbot-health-down{border-color:rgba(232,25,44,0.55) !important;background:linear-gradient(180deg,rgba(232,25,44,0.10),transparent 70%),var(--surface);}
.cbot-health.cbot-health-down .cp-badge{background:rgba(232,25,44,0.18);color:#FF6B7A;border-color:rgba(232,25,44,0.4);}
.cbot-health.cbot-health-cover{border-color:rgba(20,184,166,0.5) !important;background:linear-gradient(180deg,rgba(20,184,166,0.10),transparent 70%),var(--surface);}
.cbot-health.cbot-health-cover .cp-badge{background:rgba(20,184,166,0.16);color:#6EE7D8;border-color:rgba(20,184,166,0.4);}

/* ═══════════════════════════════════════════════════════════════════════════
   BOT PROFILE ONBOARDING (2026-10-01) — one centred step at a time, then the
   "Your bot" manage page. Markup: tabs/tab-admin.html #cbot-main · logic:
   assets/dashboard/custombot.js (cbotPaintFlow).
   ═══════════════════════════════════════════════════════════════════════════ */
.cbw{ overflow:hidden; padding:20px 22px 26px; }
/* The step / progress rules set display, which would beat the hidden attribute. */
.cbw [hidden]{ display:none !important; }
.cbw-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:6px; }
.cbw-actions .save-btn, .cbw-actions .btn-ghost, .cbw-field .save-btn{ width:auto; min-width:0; }
@media (max-width:520px){ .cbw{ padding:16px 14px 22px; } }

.cbw-progress{ list-style:none; display:flex; gap:0; margin:18px auto 6px; padding:0; max-width:560px; counter-reset:none; }
.cbw-progress li{ flex:1; position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; color:var(--text-dim); font-size:12px; font-weight:600; }
.cbw-progress li::before{ content:""; position:absolute; top:14px; left:calc(-50% + 18px); right:calc(50% + 18px); height:2px; border-radius:2px; background:var(--border); }
.cbw-progress li:first-child::before{ display:none; }
.cbw-progress li.is-done::before, .cbw-progress li.is-now::before{ background:linear-gradient(90deg, var(--crimson), var(--crimson-2)); }
.cbw-dot{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:700 13px 'JetBrains Mono',monospace;
  background:var(--surface-3); border:1px solid var(--border); color:var(--text-dim); position:relative; z-index:1; transition:all .3s var(--ease); }
.cbw-progress li.is-done .cbw-dot{ background:var(--crimson); border-color:var(--crimson); color:#fff; font-size:0; }
.cbw-progress li.is-done .cbw-dot::after{ content:"✓"; font-size:14px; }
.cbw-progress li.is-now .cbw-dot{ background:var(--crimson-dim); border-color:var(--crimson); color:#fff; box-shadow:0 0 0 4px var(--crimson-dim), 0 0 18px var(--glow-soft); }
.cbw-progress li.is-now{ color:var(--text); }
@media (max-width:520px){ .cbw-lbl{ display:none; } }

.cbw-step{ max-width:520px; margin:22px auto 6px; text-align:center; animation:cbwIn .35s var(--ease-out); }
@keyframes cbwIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .cbw-step{ animation:none; } }
.cbw-icon{ width:64px; height:64px; margin:0 auto 14px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:30px;
  background:linear-gradient(160deg, rgba(232,25,44,0.16), rgba(232,25,44,0.03)); border:1px solid var(--crimson-border); box-shadow:0 10px 30px -10px var(--glow-crimson); }
.cbw-pulse{ animation:cbwPulse 1.8s ease-in-out infinite; }
@keyframes cbwPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
.cbw-h{ margin:0 0 8px; font-size:22px; font-weight:700; color:var(--text); letter-spacing:.2px; }
.cbw-lead{ margin:0 auto 18px; max-width:460px; font-size:14.5px; line-height:1.6; color:var(--text-muted); }
.cbw-field{ display:flex; gap:10px; align-items:center; max-width:480px; margin:0 auto; }
.cbw-field .field-input{ flex:1; min-width:0; margin:0; height:46px; text-align:left; }
.cbw-field .save-btn{ white-space:nowrap; margin:0; height:46px; padding-top:0; padding-bottom:0; }
@media (max-width:520px){ .cbw-field{ flex-direction:column; } }
.cbw-msg{ min-height:18px; margin-top:10px; font-size:13px; color:var(--text-muted); }
.cbw-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:4px; }
.cbw-big{ padding:13px 26px !important; font-size:15px !important; }
.cbw-skip, .cbw-link{ appearance:none; background:none; border:0; padding:0; cursor:pointer; font:inherit; color:var(--crimson-2); }
.cbw-skip{ margin-top:14px; font-size:13.5px; font-weight:600; }
.cbw-link{ text-decoration:underline; text-underline-offset:3px; }
.cbw-skip:hover, .cbw-link:hover{ color:#fff; }
.cbw-note{ margin:16px auto 0; max-width:460px; font-size:12.5px; color:var(--text-dim); line-height:1.55; }

.cbw-help{ margin:18px auto 0; max-width:480px; text-align:left; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2); padding:0 14px; }
.cbw-help summary{ cursor:pointer; padding:11px 0; font-size:13.5px; font-weight:600; color:var(--text-muted); list-style:none; }
.cbw-help summary::-webkit-details-marker{ display:none; }
.cbw-help summary::before{ content:"＋ "; color:var(--crimson-2); }
.cbw-help[open] summary::before{ content:"－ "; }
.cbw-help ol{ margin:0 0 8px; padding-left:18px; font-size:13.5px; color:var(--text-muted); line-height:1.6; }
.cbw-help p{ font-size:13px; color:var(--text-dim); margin:0 0 12px; }

.cbw-checks{ list-style:none; margin:0 auto 18px; padding:0; max-width:440px; text-align:left; display:grid; gap:8px; }
.cbw-checks li{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--border); }
.cbw-checks li b{ display:block; font-size:14px; color:var(--text); }
.cbw-checks li small{ display:block; font-size:12.5px; color:var(--text-dim); margin-top:2px; }
.cbw-tick{ flex:0 0 28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; }
.cbw-checks li.is-on .cbw-tick{ background:rgba(16,185,129,0.14); color:var(--green); }
.cbw-checks li.is-off{ border-color:rgba(232,25,44,0.35); background:linear-gradient(90deg, rgba(232,25,44,0.08), transparent 70%); }
.cbw-checks li.is-off .cbw-tick{ background:rgba(232,25,44,0.16); color:var(--crimson-2); }

.cbw-botcard{ display:flex; align-items:center; gap:14px; max-width:360px; margin:0 auto 18px; padding:14px 16px; border-radius:var(--r-lg); text-align:left;
  background:var(--surface-2); border:1px solid var(--border); }
.cbw-ava{ flex:0 0 52px; width:52px; height:52px; border-radius:50%; background:var(--surface-3) center/cover no-repeat; border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; font:700 20px 'DM Sans',sans-serif; color:var(--text-muted); }
.cbw-botname{ font-size:16px; font-weight:700; color:var(--text); word-break:break-word; }
.cbw-sub{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }

.cbw-wait{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; font-size:13.5px; color:var(--text-muted); }
.cbw-spin{ width:16px; height:16px; border-radius:50%; border:2px solid var(--border); border-top-color:var(--crimson-2); animation:cbwSpin .9s linear infinite; }
@keyframes cbwSpin{ to{ transform:rotate(360deg); } }

/* Your bot */
.cbw-manage{ margin-top:14px; animation:cbwIn .35s var(--ease-out); }
.cbw-hero{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); background:var(--surface-2); }
.cbw-hero-banner{ height:110px; background:linear-gradient(120deg, rgba(232,25,44,0.55), rgba(166,15,30,0.25) 55%, rgba(20,23,31,0.9)) center/cover no-repeat; }
.cbw-hero-row{ display:flex; align-items:flex-end; gap:14px; padding:0 18px 16px; margin-top:-34px; }
.cbw-ava-lg{ flex:0 0 84px; width:84px; height:84px; font-size:30px; border:4px solid var(--surface-2); box-shadow:var(--shadow-sm); }
.cbw-hero-id{ padding-bottom:4px; min-width:0; }
.cbw-state{ display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.cbw-state::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--text-dim); }
.cbw-state.is-on{ color:var(--green); } .cbw-state.is-on::before{ background:var(--green); box-shadow:0 0 8px var(--green); }
.cbw-state.is-warn{ color:var(--yellow); } .cbw-state.is-warn::before{ background:var(--yellow); }
.cbw-state.is-off{ color:var(--text-dim); }
.cbw-meta{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; margin:12px 2px 4px; font-size:12.5px; color:var(--text-dim); }
.cbw-meta b{ color:var(--text-muted); }
.cbw-section{ margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.cbw-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
@media (max-width:640px){ .cbw-grid2{ grid-template-columns:1fr; } }
.cbw-danger{ margin-top:18px; border:1px solid var(--border); border-radius:var(--r-md); padding:0 14px; }
.cbw-danger summary{ cursor:pointer; padding:11px 0; font-size:13px; font-weight:600; color:var(--text-dim); list-style:none; }
.cbw-danger summary::-webkit-details-marker{ display:none; }
.cbw-danger summary::before{ content:"⚙ "; }
.cbw-danger-body{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.cbw-danger .field-desc{ margin:0 0 12px; }

/* Tickets → Extra panel channels: picker + remove button per row (2026-10-02). */
.tk-extra-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.tk-extra-row .ch-picker-wrap{ flex:1; min-width:0; }

/* Polls: details, image, colour, hidden-results note (2026-10-02). */
.poll-img-row{ display:flex; gap:8px; align-items:center; }
.poll-img-row .field-input{ flex:1; min-width:0; }
.poll-color{ height:42px; padding:4px 6px; cursor:pointer; }
.poll-preview-desc{ font-size:13px; color:var(--text-muted); margin:-4px 0 10px; white-space:pre-wrap; word-break:break-word; }
.poll-preview-img{ display:block; max-width:100%; max-height:220px; border-radius:6px; margin:0 0 10px; object-fit:cover; }
.poll-preview-img[hidden], .poll-preview-desc[hidden]{ display:none; }
.poll-preview-hidden{ font-size:12px; color:var(--text-dim); font-style:italic; padding:4px 2px 0; }

/* Tickets → Panels list + per-panel builder (2026-10-02). */
.tk-panel-list{ display:grid; gap:8px; }
.tk-panel-card{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; padding:12px 14px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); color:var(--text); font:inherit;
  transition:border-color .15s var(--ease), background .15s var(--ease); }
.tk-panel-card:hover{ border-color:var(--crimson-border); background:var(--surface-3); }
.tk-panel-ico{ flex:0 0 36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; background:var(--surface-3); }
.tk-panel-main{ flex:1; min-width:0; }
.tk-panel-main b{ display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-panel-main small{ display:block; font-size:12px; color:var(--text-dim); margin-top:2px; }
.tk-panel-pub{ font-size:12px; font-weight:600; color:var(--text-dim); white-space:nowrap; }
.tk-panel-pub.on{ color:var(--green); }
.tk-builder-tools{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.tk-builder-state{ margin-left:auto; font-size:12px; color:var(--text-dim); }
.tk-mini-danger:not([disabled]):hover{ color:var(--crimson-2); border-color:var(--crimson-border); }
.tk-mini-btn[disabled]{ opacity:.45; cursor:not-allowed; }
#tk-panels-list[hidden], #tk-panel-builder[hidden]{ display:none !important; }

/* Feeds → Add: live preview cards (anime episode card, Instagram picture) */
.feed-prev-embed{
  display:flex;gap:12px;margin-top:6px;max-width:420px;
  background:var(--surface-2);border:1px solid var(--border);
  border-left:4px solid var(--pf,#DC143C);border-radius:4px;padding:10px 12px;
  white-space:normal;
}
.feed-prev-embed-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.feed-prev-embed-title{font-size:13px;font-weight:600;color:#00A8FC;}
.feed-prev-embed-field{display:flex;flex-direction:column;font-size:12px;color:var(--text);}
.feed-prev-embed-field b{font-size:11px;color:var(--text-muted);}
.feed-prev-embed-foot{font-size:11px;color:var(--text-dim);}
.feed-prev-embed-thumb{width:56px;height:76px;flex-shrink:0;border-radius:4px;background:linear-gradient(135deg,var(--surface-3),var(--border));}
.feed-prev-embed-img{
  flex:1;height:150px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--text-dim);
  background:linear-gradient(135deg,rgba(225,48,108,.18),rgba(131,58,180,.18));
}
.feed-prev-note{margin-top:6px;font-size:11px;color:var(--text-dim);white-space:normal;}

#tab-achievements .info-card{position:static;}
.ach-seg-slime{display:inline-flex;width:16px;height:16px;}
.ach-seg-slime img{width:16px;height:16px;object-fit:contain;display:block;}
.ach-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px;}
.ach-stat{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;}
.ach-stat b{display:block;font-size:18px;color:var(--text);}
.ach-stat span{color:var(--text-muted);font-size:12px;}
.ach-setup-extra{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:20px;margin-top:20px;align-items:stretch;}
#tab-achievements .ach-setup-extra > .config-panel{margin-top:0;}
.ach-list-bar{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap;}
.ach-list-bar .field-input{max-width:280px;}
.ach-box-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch;}
.ach-box{
  display:flex;flex-direction:column;gap:12px;width:100%;min-height:188px;box-sizing:border-box;
  padding:16px;text-align:left;color:var(--text);cursor:pointer;font:inherit;
  border-radius:16px;border:1px solid rgba(255,255,255,0.09);
  background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease), opacity .18s var(--ease);
}
.ach-box:hover{border-color:rgba(232,25,44,0.4);box-shadow:0 16px 36px -28px rgba(232,25,44,0.5);transform:translateY(-1px);}
.ach-box.is-off{opacity:.72;}
.ach-box-new{border-style:dashed;}
.ach-box-top{display:flex;align-items:flex-start;gap:12px;min-height:76px;}
.ach-box-face{
  width:88px;height:88px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;
}
.ach-box-slime{width:88px;height:88px;object-fit:contain;display:block;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4));}
.ach-box-meta{flex:1;min-width:0;}
.ach-box-name{font-size:15px;font-weight:800;letter-spacing:.2px;line-height:1.25;display:flex;align-items:center;gap:8px;}
.ach-box-kind{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border);border-radius:999px;padding:1px 6px;}
.ach-box-desc{
  font-size:12px;color:var(--text-muted);line-height:1.4;margin-top:4px;min-height:calc(1.4em * 2);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.ach-box-foot{
  margin-top:auto;display:flex;justify-content:space-between;gap:8px;
  padding-top:10px;border-top:1px solid rgba(255,255,255,0.06);
  font-size:11px;font-weight:700;letter-spacing:.3px;color:var(--text-muted);
}
.ach-box-empty{grid-column:1 / -1;margin:0;}
.ach-tiers{display:flex;flex-wrap:wrap;gap:6px;}
.ach-chip{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--border);color:var(--text-muted);}
.ach-chip.on{color:var(--text);border-color:var(--crimson-border);}
.ach-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ach-editor-grid .field-input:first-child{grid-column:1 / -1;}
.ach-tier-head,.ach-tier-row{display:grid;grid-template-columns:108px minmax(0,1fr) minmax(72px,.7fr) minmax(72px,.7fr) minmax(110px,1.2fr);gap:8px;align-items:center;}
.ach-tier-head{margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);}
.ach-tier-row{margin:8px 0;}
.ach-field{min-width:0;display:block;}
.ach-field span{display:none;}
.ach-field .field-input{width:100%;}
.ach-note{font-size:12px;color:var(--text-muted);margin:8px 0;}
.ach-rank{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;}
.ach-rank:last-child{border-bottom:none;}
.ach-rank-who{flex:1;min-width:0;}
.ach-rank-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650;line-height:1.25;}
.ach-rank-name span{color:var(--text-muted);font-weight:500;}
.ach-rank-id{margin-top:1px;font-size:11px;line-height:1.2;color:var(--text-dim);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ach-rank b{font-variant-numeric:tabular-nums;flex-shrink:0;white-space:nowrap;}
.ach-rank-n{
  width:22px;height:22px;border-radius:7px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(232,25,44,0.16);color:var(--text);font-size:12px;font-weight:800;
}
.ach-preview-msg{display:flex;gap:10px;padding:12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);}
.ach-preview-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;background:rgba(0,0,0,.25);}
.ach-preview-name{font-weight:700;font-size:14px;color:var(--text);}
.ach-preview-name span{margin-left:6px;font-size:10px;font-weight:800;letter-spacing:.4px;background:#5865F2;color:#fff;border-radius:4px;padding:1px 4px;vertical-align:1px;}
.ach-preview-body{font-size:13px;line-height:1.45;margin-top:2px;color:var(--text);}
.ach-preview-body strong{font-weight:800;}
.ach-preview-banner{display:block;width:100%;height:auto;margin-top:10px;border-radius:10px;border:1px solid var(--border);}
.ach-mention{color:#00A8FC;font-weight:600;}
.ach-modal-ic{background:transparent;border:none;width:64px;height:64px;padding:0;}
.ach-modal-ic img{width:64px;height:64px;object-fit:contain;display:block;}
@media (min-width:1280px){
  .ach-box-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:900px){
  .ach-stats{grid-template-columns:1fr 1fr;}
  .ach-editor-grid,.ach-tier-head,.ach-tier-row,.ach-setup-extra,.ach-box-grid{grid-template-columns:1fr;}
  .ach-tier-head{display:none;}
  .ach-field span{display:block;margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);}
  .ach-list-bar{display:grid;grid-template-columns:1fr 1fr;}
  .ach-list-bar .field-input{max-width:none;min-width:0;width:100%;}
  #ach-cap{grid-column:1 / -1;justify-self:start;}
}

/* Roles tab */
.rm-layout{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:20px;align-items:stretch;}
.rm-layout > .config-panel{min-width:0;height:100%;}
.rm-list{display:flex;flex-direction:column;gap:4px;max-height:min(70vh,760px);overflow:auto;margin-top:12px;}
.rm-row{display:flex;gap:10px;align-items:center;text-align:left;width:100%;padding:8px 10px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--text);cursor:pointer;font:inherit;}
.rm-row:hover{background:rgba(232,25,44,0.06);}
.rm-row.is-on{border-color:var(--crimson-border);background:rgba(232,25,44,0.08);}
.rm-row-main{min-width:0;display:flex;flex-direction:column;gap:2px;}
.rm-row-name{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rm-row-meta{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rm-swatch{width:12px;height:12px;border-radius:4px;flex:none;background:var(--rm-c,#99aabb);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2);}
.rm-swatch-lg{width:18px;height:18px;border-radius:6px;}
.rm-title{display:flex;align-items:center;gap:10px;}
.rm-perm-wrap{position:relative;margin-top:8px;}
.rm-perm-menu{display:none;position:absolute;z-index:5;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,0.35);}
.rm-perm-menu.open{display:flex;flex-direction:column;}
.rm-perm-menu button,.rm-members button{text-align:left;background:transparent;border:none;color:var(--text);font:inherit;font-size:13px;padding:8px 12px;cursor:pointer;}
.rm-perm-menu button:hover,.rm-members button:hover{background:rgba(232,25,44,0.1);}
#rm-perm-clear{margin-top:8px;}
#rm-perm-clear .btn-ghost{width:auto;}
.rm-badges,.rm-chips{display:flex;flex-wrap:wrap;gap:6px;}
.rm-badge{font-size:11px;font-weight:700;letter-spacing:.2px;border:1px solid var(--border);border-radius:999px;padding:2px 8px;color:var(--text-muted);}
.rm-badge.warn{color:#ffcc66;border-color:rgba(255,204,102,0.45);}
.rm-group{margin-top:14px;}
.rm-group h3,.rm-assign h3{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted);}
.rm-group-toggle{
  display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 8px; padding:6px 8px; border-radius:8px; background:transparent; border:none; cursor:pointer;
  font:inherit; font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--text-muted);
}
.rm-group-toggle:hover{ color:var(--text); background:rgba(255,255,255,0.04); }
.rm-group-toggle.is-on{ color:var(--text); background:rgba(232,25,44,0.12); }
.rm-group-count{ font-variant-numeric:tabular-nums; letter-spacing:0; color:var(--text-dim); }
.rm-group-toggle.is-on .rm-group-count{ color:var(--crimson, #E8192C); }
.rm-progress{ margin-top:14px; padding:14px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,0.02); }
.rm-progress-top{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.rm-progress-title{ font-weight:750; }
.rm-progress-time{ font-size:12px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.rm-bar{ height:6px; border-radius:99px; background:rgba(255,255,255,0.08); overflow:hidden; margin:10px 0 12px; }
.rm-bar > i{ display:block; height:100%; width:0; background:var(--crimson); border-radius:inherit; transition:width .25s ease; }
.rm-bar.is-busy > i{ width:38%; animation:rm-slide 1.1s ease-in-out infinite; }
@keyframes rm-slide{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(320%); } }
.rm-stats{ display:flex; flex-wrap:wrap; gap:8px; }
.rm-stat{ font-size:12px; color:var(--text-muted); border:1px solid var(--border); border-radius:999px; padding:4px 10px; }
.rm-stat b{ color:var(--text); font-variant-numeric:tabular-nums; }
.rm-plan-num{ font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1; }
.rm-plan-label{ margin-top:6px; color:var(--text); font-size:14px; }
.rm-plan-rows{ margin-top:12px; display:flex; flex-direction:column; gap:4px; color:var(--text-muted); font-size:13px; }
#rm-go:disabled{ opacity:.55; cursor:wait; }
#tab-roles .field-input{ width:100%; margin-top:6px; }
#tab-roles .field-label{ display:block; margin-top:12px; }
.rm-assign{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);}
.rm-assign .field-input,.rm-assign .field-label{margin-top:8px;}
.rm-checks{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;}
.rm-check{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--text);}
.rm-check:has(input:disabled){opacity:.45;}
.rm-color-row{margin:10px 0;}
.rm-color-row input[type="color"]{width:36px;height:28px;padding:0;border:none;background:transparent;}
.rm-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.rm-actions .save-btn,.rm-actions .btn-ghost{width:auto;margin-top:0;}
.rm-status,.rm-note,.rm-lock{font-size:13px;line-height:1.45;margin:8px 0 0;}
.rm-status,.rm-note{color:var(--text-muted);}
.rm-lock{color:#ffcc66;}
.rm-members{display:flex;flex-direction:column;margin-top:6px;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.rm-members:empty{display:none;}
.rm-delete{margin-top:18px;}
.rm-danger{color:#ff8b8b;border-color:rgba(232,25,44,0.45);}
.rm-danger:hover{color:#fff;background:rgba(232,25,44,0.2);}
#rm-detail .field-input{width:100%;margin-top:6px;}
#rm-detail .field-label{display:block;margin-top:12px;}
@media (max-width:900px){
  .rm-layout,.rm-checks{grid-template-columns:1fr;}
}

/* Deleted mod log, overview column */
.mdl-list{display:flex;flex-direction:column;}
.mdl-entry{padding:14px 16px;border-bottom:1px solid var(--border-2);}
.mdl-entry:last-child{border-bottom:none;}
.mdl-meta{font-size:12px;color:var(--text-muted);margin-bottom:6px;}
.mdl-meta strong{color:var(--text);font-weight:700;}
.mdl-text{font-size:13px;line-height:1.45;color:var(--text);white-space:pre-wrap;word-break:break-word;}
.mdl-media-row{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.mdl-media{display:block;max-width:100%;max-height:220px;border-radius:10px;background:#000;object-fit:contain;}
.mdl-missing{margin-top:6px;font-size:11px;color:var(--text-dim);}
#modlog-delete-list{max-height:640px;overflow:auto;}
@media (max-width:720px){
  #topbar-suggest-btn .topbar-suggest-label{display:none !important;}
}

/* ████████████████████████████████████████████████████████████████████████████
   UI POLISH — picker, dashboard shell, and every tab that shares this chrome.
   Motion stays on transform and opacity, under 300ms, ease-out. Pressed
   controls scale to 0.97. Nothing here changes layout or copy.
   ████████████████████████████████████████████████████████████████████████████ */
:root{
  --ease-ui: cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes picker-card-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
@keyframes dash-tab-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}
@keyframes dash-fade{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes dash-pop{
  from{ opacity:0; transform:translateY(6px) scale(0.97); }
  to{ opacity:1; transform:none; }
}
@keyframes dash-pop-down{
  from{ opacity:0; transform:translateY(-4px) scale(0.98); }
  to{ opacity:1; transform:none; }
}
@keyframes emblemPop{
  from{ opacity:0; transform:scale(0.96); }
  to{ opacity:1; transform:none; }
}
@keyframes ovx-rise{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}

/* ── Server picker ───────────────────────────────────────────────────────── */
#view-picker.active .picker-eyebrow,
#view-picker.active .picker-hero h1,
#view-picker.active .picker-hero p{
  animation:dash-tab-in 280ms var(--ease-ui) backwards;
}
#view-picker.active .picker-hero h1{ animation-delay:40ms; }
#view-picker.active .picker-hero p{ animation-delay:80ms; }

.picker-refresh{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-muted);
  padding:6px 14px;
  border-radius:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:1px;
  cursor:pointer;
  transition:transform 140ms var(--ease-ui), border-color 160ms ease, color 160ms ease;
}
.picker-refresh:hover{ border-color:var(--crimson-border); color:var(--text); }
.picker-refresh:active{ transform:scale(0.97); }
.picker-refresh:focus-visible{ outline:2px solid var(--crimson-2); outline-offset:2px; }

.user-pill{
  transition:transform 140ms var(--ease-ui), border-color 160ms ease, background-color 160ms ease;
}
.user-pill:active{ transform:scale(0.98); }
.user-pill:focus-visible{ outline:2px solid var(--crimson-2); outline-offset:2px; }

.server-card,
.invite-card{
  animation:picker-card-in 260ms var(--ease-ui) backwards;
  transition:transform 180ms var(--ease-ui), border-color 180ms ease, background-color 180ms ease, box-shadow 180ms var(--ease-ui);
}
.server-card:nth-child(1){ animation-delay:0ms; }
.server-card:nth-child(2){ animation-delay:40ms; }
.server-card:nth-child(3){ animation-delay:80ms; }
.server-card:nth-child(4){ animation-delay:120ms; }
.server-card:nth-child(5){ animation-delay:160ms; }
.server-card:nth-child(6){ animation-delay:200ms; }
.server-card:nth-child(7){ animation-delay:240ms; }
.server-card:nth-child(8){ animation-delay:280ms; }
.server-card:nth-child(n+9){ animation-delay:280ms; }
.server-card::after{ transition:opacity 180ms ease; }
.server-card:hover,
.invite-card:hover{
  transform:none;
  border-color:var(--crimson-border);
}
.server-card:active,
.invite-card:active{ transform:scale(0.985); }
.server-btn,
.invite-plus{
  transition:transform 140ms var(--ease-ui), background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.server-btn:active{ transform:scale(0.97); }
.server-btn:focus-visible,
.nav-item:focus-visible,
.seg-btn:focus-visible,
.save-btn:focus-visible,
.icon-btn:focus-visible{
  outline:2px solid var(--crimson-2);
  outline-offset:2px;
}

/* Menus scale in from the control that opened them. Close stays instant
   (display:none) so a second click is never waiting on an exit. */
.sb-menu.open{
  transform-origin:bottom center;
  animation:dash-pop 150ms var(--ease-ui) backwards;
}
.sb-menu.sb-menu-down.open{
  transform-origin:top right;
  animation-name:dash-pop-down;
}

/* ── Dashboard shell ─────────────────────────────────────────────────────── */
.nav-item{
  transition:background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 140ms var(--ease-ui);
}
.nav-item:active{ transform:scale(0.985); }
.nav-item.active::before{ animation:none; }
.server-switcher{
  transition:transform 140ms var(--ease-ui), border-color 160ms ease, background-color 160ms ease;
}
.server-switcher:active{ transform:scale(0.985); }
.icon-btn,
.dash-hamburger{
  transition:transform 140ms var(--ease-ui), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.icon-btn:active,
.dash-hamburger:active{ transform:scale(0.97); }
.sb-collapse-btn{
  transition:transform 140ms var(--ease-ui), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.sb-collapse-btn:active{ transform:scale(0.97); }
#view-dashboard.sidebar-collapsed .sb-collapse-btn:active{ transform:rotate(180deg) scale(0.97); }

.topbar-section.is-in{ animation:dash-tab-in 180ms var(--ease-ui) backwards; }

/* Every module tab, including owner tabs, shares .tab-page. The entrance
   uses fill-mode backwards so a transform does not stick around and force
   channel menus to portal after the animation ends. */
.tab-page{ animation:none; }
.tab-page.active{ animation:dash-tab-in 180ms var(--ease-ui) backwards; }
.wg-pane{ animation:none; }
.wg-pane.wg-active{ animation:dash-tab-in 160ms var(--ease-ui) backwards; }
.tab-page.active .page-emblem{ animation:emblemPop 200ms var(--ease-ui) backwards; }
.page-header:hover .page-emblem{ transform:none; }

.ovx > *{ animation:ovx-rise 260ms var(--ease-ui) backwards; }

.seg-thumb{ transition:transform 200ms var(--ease-ui), width 200ms var(--ease-ui); }
.seg-btn{ transition:color 160ms ease, transform 140ms var(--ease-ui); }
.seg-btn:active{ transform:scale(0.97); }

.ch-picker-btn{
  transition:transform 140ms var(--ease-ui), border-color 160ms ease, box-shadow 160ms ease !important;
}
.ch-picker-btn:active{ transform:scale(0.985); }
.ch-dropdown.open{
  transform-origin:top center;
  animation:dash-pop-down 150ms var(--ease-ui) backwards;
}

.save-btn{
  transition:transform 140ms var(--ease-ui), filter 160ms ease, box-shadow 160ms var(--ease-ui), background-color 160ms ease;
}
.save-btn:active{ transform:scale(0.97); }
.save-btn:hover::after{ transition:transform 420ms var(--ease-ui); }
.save-btn.loading{
  opacity:1;
  cursor:progress;
}
.save-btn.loading::after{
  animation:save-sweep 900ms linear infinite;
}
.save-btn.loading::before,
.am-btn.loading::before,
.btn-ghost.loading::before,
.picker-refresh.loading::before,
.cs-refresh-btn.loading::before{
  content:"";
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid color-mix(in srgb, currentColor 35%, transparent);
  border-top-color:currentColor;
  animation:am-save-spin .7s linear infinite;
  flex:0 0 auto;
}
.am-btn.loading,
.btn-ghost.loading,
.picker-refresh.loading,
.cs-refresh-btn.loading{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:progress;
  pointer-events:none;
}
.icon-btn.loading{
  animation:am-save-spin .7s linear infinite;
  pointer-events:none;
  cursor:progress;
}
#am-settings-save.is-saved{
  background:#047857;
  color:#fff;
  box-shadow:0 8px 22px -10px rgba(16,185,129,.85);
}
#am-settings-save.is-failed{
  background:#14080c;
  color:#ffe4e6;
  box-shadow:inset 0 0 0 1.5px #fb7185;
  animation:save-shake 280ms var(--ease-ui);
}
@keyframes save-sweep{
  from{ transform:translateX(-120%); }
  to{ transform:translateX(120%); }
}
.save-btn.is-saved{
  background:#047857 !important;
  color:#fff !important;
  box-shadow:0 8px 22px -10px rgba(16,185,129,0.85) !important;
}
.save-btn.is-failed{
  background:#14080c !important;
  color:#ffe4e6 !important;
  box-shadow:inset 0 0 0 1.5px #fb7185 !important;
  animation:save-shake 280ms var(--ease-ui);
}
@keyframes save-shake{
  0%,100%{ transform:translateX(0); }
  30%{ transform:translateX(-3px); }
  70%{ transform:translateX(3px); }
}
.save-btn.is-saved::after,
.save-btn.is-failed::after{
  animation:none;
  opacity:0;
}

.toggle-track{
  transition:background-color 180ms var(--ease-ui), border-color 180ms ease, box-shadow 180ms ease !important;
}
.toggle-track::before{
  left:3px !important;
  transition:transform 180ms var(--ease-ui), background-color 160ms ease !important;
}
.toggle input:checked + .toggle-track::before{
  left:3px !important;
  transform:translate(18px, -50%) !important;
}

.toast{
  transform:translateY(100%);
  opacity:0;
  transition:transform 220ms var(--ease-ui), opacity 200ms ease;
}
.toast.show{ transform:translateY(0); opacity:1; }

.ovx-card{
  transition:transform 180ms var(--ease-ui), box-shadow 180ms var(--ease-ui), border-color 180ms ease;
}
.ovx-card:hover{ transform:none; }
.ovx-card:active{ transform:scale(0.985); }
.ovx-qa-item,
.ovx-banner-btn,
.ovx-apwarn-btn{
  transition:transform 160ms var(--ease-ui), border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.ovx-qa-item:active,
.ovx-banner-btn:active,
.ovx-apwarn-btn:active{ transform:scale(0.98); }

@media (hover:hover) and (pointer:fine){
  .server-card:hover{ transform:translateY(-2px); }
  .server-card:hover:active{ transform:translateY(-1px) scale(0.985); }
  .ovx-card:hover{ transform:translateY(-2px); }
  .ovx-card:hover:active{ transform:translateY(-1px) scale(0.985); }
  .page-header:hover .page-emblem{ transform:translateY(-1px); }
  .ovx-qa-item:hover{ transform:translateY(-2px); }
  .ovx-qa-item:hover:active{ transform:translateY(-1px) scale(0.98); }
}

@media (prefers-reduced-motion:reduce){
  .picker-eyebrow,
  .picker-hero h1,
  .picker-hero p,
  .server-card,
  .invite-card,
  .tab-page.active,
  .wg-pane.wg-active,
  .tab-page.active .page-emblem,
  .topbar-section.is-in,
  .ch-dropdown.open,
  .sb-menu.open,
  .ovx > *{
    animation:dash-fade 160ms ease both !important;
  }
  .save-btn.loading::after,
  .save-btn.loading::before,
  .am-btn.loading::before,
  .btn-ghost.loading::before,
  .picker-refresh.loading::before,
  .cs-refresh-btn.loading::before,
  .icon-btn.loading,
  #am-settings-save.is-failed,
  .save-result.is-pending .save-result-ic,
  .save-btn.is-failed{
    animation:none !important;
  }
  .sb-menu.open,
  .toast,
  .seg-thumb,
  .toggle-track,
  .toggle-track::before,
  .server-card,
  .invite-card,
  .nav-item,
  .save-btn,
  .seg-btn,
  .icon-btn,
  .server-btn,
  .picker-refresh,
  .ovx-card,
  .ovx-qa-item{
    transition:color 160ms ease, background-color 160ms ease, border-color 160ms ease, opacity 160ms ease, box-shadow 160ms ease !important;
  }
  .server-card:hover,
  .server-card:active,
  .invite-card:active,
  .nav-item:active,
  .save-btn:active,
  .seg-btn:active,
  .icon-btn:active,
  .dash-hamburger:active,
  .server-btn:active,
  .user-pill:active,
  .picker-refresh:active,
  .server-switcher:active,
  .ch-picker-btn:active,
  .ovx-card:hover,
  .ovx-card:active,
  .ovx-qa-item:hover,
  .ovx-qa-item:active,
  .page-header:hover .page-emblem,
  .sb-collapse-btn:active,
  #view-dashboard.sidebar-collapsed .sb-collapse-btn:active{
    transform:none !important;
  }
}

.lvl-import-busy{
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 0 4px;
}
.lvl-import-busy .cbw-spin{ width:22px; height:22px; flex:0 0 22px; }
#lvl-import-error{ color:var(--crimson-2); }

.nav-beta{
  display:inline-flex;
  align-items:center;
  margin-left:6px;
  padding:1px 6px;
  border:1px solid var(--crimson-border);
  color:var(--crimson-2);
  border-radius:999px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1.4;
  vertical-align:middle;
}
.seg-ic.twitch-slime,
.seg-ic.kick-slime{display:inline-flex;width:16px;height:16px;}
.seg-ic.twitch-slime img,
.seg-ic.kick-slime img{width:16px;height:16px;object-fit:contain;display:block;}
.twitch-channel-row,
.kick-channel-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.twitch-channel-row img,
.kick-channel-row img{width:28px;height:28px;object-fit:contain;}
.twitch-login,
.kick-login{font-weight:700;}
.twitch-counts,
.kick-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px;}
.twitch-counts div,
.kick-counts div{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center;}
.twitch-counts b,
.kick-counts b{display:block;font-size:22px;}
.twitch-counts span,
.kick-counts span{display:block;color:var(--text-muted);font-size:12px;margin-top:2px;}
.twitch-member-card,
.kick-member-card{text-align:center;}
.twitch-member-card img,
.kick-member-card img{width:64px;height:64px;object-fit:contain;margin-bottom:8px;}
.twitch-layout,
.kick-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);column-gap:20px;row-gap:22px;align-items:start;}
.twitch-layout > .seg-switch,
.kick-layout > .seg-switch{grid-column:1 / -1;justify-self:start;margin:0;}
.twitch-main,
.kick-main{min-width:0;}
.twitch-howto,
.kick-howto{margin-top:0;}
.twitch-howto .twitch-steps,
.kick-howto .kick-steps{list-style:none;margin:0 0 14px;padding:0;counter-reset:socialstep;display:flex;flex-direction:column;gap:10px;}
.twitch-howto .twitch-steps li,
.kick-howto .kick-steps li{counter-increment:socialstep;position:relative;padding-left:30px;color:var(--text-muted);font-size:13px;line-height:1.45;}
.twitch-howto .twitch-steps li::before,
.kick-howto .kick-steps li::before{content:counter(socialstep);position:absolute;left:0;top:0;width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;background:var(--crimson);}
@media (max-width:900px){.twitch-layout,.kick-layout{grid-template-columns:1fr;}}

/* ==========================================================================
   AI Chat tab (2026-11-12 rebuild)
   One usage strip, two cards (this chat / all chats), switch tiles, a fact
   list and a save bar that stays in view. Scoped to .aic-* and #tab-aichat.
   ========================================================================== */
.aic-bar{ margin-bottom:14px; }
.aic-bar-note{ margin:0 0 0 auto !important; text-align:right; }

.aic-stats{
  display:grid; grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,1fr); gap:0;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  margin-bottom:18px; overflow:hidden;
}
.aic-stat-group{ padding:14px 20px 16px; border-left:1px solid var(--border); min-width:0; }
.aic-stat-group:first-child{ border-left:0; }
.aic-stat-title{
  font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:var(--text-dim); margin-bottom:10px;
}
.aic-stat-row{ display:flex; gap:26px; flex-wrap:wrap; }
.aic-stat{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.aic-stat-v{
  font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:700; line-height:1.15;
  color:var(--text); font-variant-numeric:tabular-nums;
}
.aic-stat-k{ font-size:11.5px; font-weight:600; color:var(--text-dim); white-space:nowrap; }

.aic-layout{ grid-template-columns:minmax(0,1fr) minmax(0,320px); }
.aic-main{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.aic-main > .config-panel + .config-panel{ margin-top:0; }

.aic-pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:18px; }
.aic-pair > .field-row{ margin-bottom:0 !important; }
.aic-fields{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
  align-items:start; margin-bottom:18px;
}
.aic-fields > .field-row{ margin-bottom:0 !important; }
.aic-fields .field-input{ font-variant-numeric:tabular-nums; }

.aic-label-line{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.aic-chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.aic-chips .aichat-preset-btn{ padding:5px 11px; font-size:11.5px; }
.aic-chips--tight{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.aic-chips--tight .aichat-preset-btn{ padding:4px 0; font-size:11px; text-align:center; min-width:0; }
.aichat-preset-btn.is-active{ color:#fff; border-color:var(--crimson); background:rgba(232,25,44,0.16); }
.aic-under{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.aic-count{ font-size:11px; color:var(--text-dim); white-space:nowrap; font-variant-numeric:tabular-nums; padding-top:2px; }
.aic-lead{ margin:-4px 0 12px; }

/* Switch tile: label + one line on the left, toggle on the right. */
.aic-switches{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.aic-switch{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:13px 14px; border:1px solid var(--border); border-radius:12px;
  background:rgba(255,255,255,0.018); min-width:0;
}
.aic-switch > div{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.aic-switch .toggle{ margin-top:1px; }
.aic-switch--line{ margin-bottom:14px; align-items:center; }

.aic-more{ border:1px solid var(--border); border-radius:12px; }
.aic-more > summary{
  cursor:pointer; list-style:none; padding:12px 14px; font-size:12.5px; font-weight:700;
  color:var(--text); display:flex; align-items:center; gap:8px; user-select:none;
}
.aic-more > summary::-webkit-details-marker{ display:none; }
.aic-more > summary::before{ content:'▸'; color:var(--text-dim); font-size:11px; transition:transform .15s var(--ease); }
.aic-more[open] > summary::before{ transform:rotate(90deg); }
.aic-more > summary:focus-visible{ outline:2px solid var(--crimson); outline-offset:2px; border-radius:10px; }
.aic-more-body{ padding:4px 14px 14px; margin-bottom:0; }

.aic-facts{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.aic-fact{ display:flex; gap:8px; align-items:center; }
.aic-fact .field-input{ flex:1; min-width:0; padding-top:9px; padding-bottom:9px; font-size:13px; }
.aic-fact-rm{ flex:none; width:34px !important; height:34px; padding:0 !important; }
.aic-facts-empty{
  font-size:12px; color:var(--text-dim); padding:12px 14px;
  border:1px dashed var(--border); border-radius:10px;
}
.aic-fact-add{ display:flex; gap:8px; align-items:center; }
.aic-fact-add .field-input{ flex:1; min-width:0; }
.aic-add-btn{ flex:none; padding:10px 16px !important; font-size:12.5px !important; white-space:nowrap; }

.aic-savebar{
  position:sticky; bottom:14px; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 14px 12px 18px; border-radius:14px;
  background:rgba(16,19,26,0.92); border:1px solid var(--glass-brd);
  box-shadow:0 14px 34px -12px rgba(0,0,0,0.7);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.aic-savebar-note{ font-size:12px; color:var(--text-dim); }
.aic-savebar .save-btn{ width:auto; flex:none; margin:0; padding:11px 26px; }

#tab-aichat .cp-section{ margin-bottom:24px; }
#tab-aichat .cp-section:last-child{ margin-bottom:0; }

@media (max-width:1180px){
  .aic-fields{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .aic-layout{ grid-template-columns:1fr; }
  .aic-stats{ grid-template-columns:1fr; }
  .aic-stat-group{ border-left:0; border-top:1px solid var(--border); }
  .aic-stat-group:first-child{ border-top:0; }
  .aic-bar-note{ margin-left:0 !important; text-align:left; flex-basis:100%; }
}
@media (max-width:640px){
  .aic-pair, .aic-switches{ grid-template-columns:1fr; }
  .aic-savebar{ flex-direction:column; align-items:stretch; bottom:8px; }
  .aic-savebar-note{ display:none; }
  .aic-savebar .save-btn{ width:100%; }
}