/*
 * ═══════════════════════════════════════════════════════════════════
 *  APOLLO ADMIN PANEL — STYLESHEET
 *  Version : 6.1.0 · Luxury Monochrome v3.1.0
 *  Dark mode: BLOCKED — light only
 *  Orange: Sparse accent — black · white · grayscale dominant
 *  PHP Use  : wp_enqueue_style('apollo-admin-panel', APOLLO_ADMIN_URL . 'assets/css/admin-panel.css');
 * ═══════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════
   DESIGN TOKENS — Luxury Monochrome v3.1.0
   Merged with admin-panel backward-compat aliases
   ═══════════════════════════════════════════════ */
:root {
  block-size: 100%; inline-size: 100%;
  color-scheme: light;

  /* Typography */
  --ff-main    : "Space Grotesk", system-ui, -apple-system, sans-serif;
  --ff-mono    : "Space Mono", monospace;
  --ff-fun     : "Syne", sans-serif;
  --ff-display : "Shrikhand", cursive;
  --font       : 400 13.5px/1.5 var(--ff-main);

  --fs-h1: clamp(2.25rem, 1.957rem + 1.46vi, 3rem);
  --fs-h2: clamp(1.75rem, 1.555rem + 0.98vi, 2.25rem);
  --fs-h3: clamp(1.5rem, 1.354rem + 0.73vi, 1.875rem);
  --fs-h4: clamp(1.25rem, 1.153rem + 0.49vi, 1.5rem);
  --fs-h5: clamp(1rem, 0.951rem + 0.24vi, 1.125rem);
  --fs-h6: 0.625rem;
  --fs-p : clamp(0.875rem, 0.826rem + 0.24vi, 1rem);

  /* Brand — precious, sparse */
  --primary       : #f45f00;
  --primary-light : #fb923c;
  --primary-pale  : rgba(244,95,0,.08);
  --accent        : #651fff;
  --accent-violet : #651FFF;
  --accent-acid   : #D7FF00;

  /* Ink system */
  --txt-rgb     : 19, 21, 23;
  --txt-color   : rgba(var(--txt-rgb), 0.77);
  --txt-hover   : rgba(var(--txt-rgb), 0.9);
  --txt-heading : rgba(var(--txt-rgb), 0.92);
  --muted       : rgba(var(--txt-rgb), 0.45);
  --muted-txt   : rgba(var(--txt-rgb), 0.3);
  --muted-bg    : rgba(var(--txt-rgb), 0.08);
  /* Backward compat aliases */
  --txt         : var(--txt-color);
  --txt-head    : var(--txt-heading);
  --txt-muted   : var(--muted);

  /* Surfaces */
  --bg         : #ffffff;
  --bg-neutral : #fcfbf7;
  --surface    : rgba(0,0,0,0.025);
  --surface-hover : rgba(0,0,0,0.045);
  --surf-hover : var(--surface-hover);
  --glass      : rgba(255,255,255,0.72);

  /* Borders — restored, structural */
  --border        : rgba(0,0,0,0.10);
  --border-hover  : rgba(0,0,0,0.18);
  --border-strong : rgba(0,0,0,0.22);
  --border-light  : rgba(0,0,0,0.05);

  /* Palette */
  --white-1 : #fff;
  --white-2 : #fcfbf7;
  --white-3 : #fafafa;
  --white-4 : #eeeeee;
  --gray-1  : #f8f8f9;
  --gray-5  : #dfdfe1;
  --gray-8  : #bfbfc1;
  --gray-9  : #9e9ea0;
  --gray-10 : #6e6e73;
  --black-1 : #121214;
  --black-2 : #0f0f11;
  --black-3 : #0c0c0d;
  --black-4 : #0a0a0a;
  --black-5 : #090909;
  --black-10: #000;

  /* Semantic */
  --red        : #ef4444;  --red-pale    : #fef2f2;
  --green      : #22c55e;  --green-pale  : #f0fdf4;
  --blue       : #3b82f6;  --blue-pale   : #eff6ff;
  --yellow     : #eab308;  --yellow-pale : #fefce8;
  --purple     : #8b5cf6;  --purple-pale : #f5f3ff;

  /* Shadows — whisper-soft, luxury feel */
  --shadow-sm : 0 1px 2px rgba(0,0,0,.02);
  --shadow-md : 0 2px 8px rgba(0,0,0,.03);
  --shadow-lg : 0 4px 20px rgba(0,0,0,.05);

  /* Radius */
  --r-xs   : 6px;
  --r-sm   : 10px;
  --r      : 16px;
  --r-lg   : 24px;
  --r-pill : 100px;

  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px;
  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:32px; --s-6:48px; --s-7:64px;

  /* Layout */
  --sidebar-w   : 68px;
  --topbar-h    : 58px;
  --sub-tabs-h  : 44px;

  /* Motion */
  --ease        : cubic-bezier(.16, 1, .3, 1);
  --ease-smooth : cubic-bezier(.25, 1, .5, 1);
  --ease-snappy : cubic-bezier(.2, .9, .3, 1);
  --t-ui        : .25s var(--ease);
  --ui          : .2s var(--ease);

  /* Z-index */
  --z-ui: 10; --z-pop: 100; --z-modal: 1000;
}

/* ── DARK MODE BLOCKED — light only ── */

/* ═══════════════════════════════════════
   RESET — Luxury Monochrome
   ═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: var(--fs-p); line-height: 1.5;
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  height: 100%;
}
body {
  background: var(--bg); color: var(--txt-color);
  font-family: var(--ff-main); font: var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; height: 100%;
}
a { text-decoration: none; color: inherit; outline: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; color: inherit; }
input, textarea, select { border: none; background: none; font-family: inherit; resize: none; outline: none; font-size: 13px; color: var(--txt-color); }
ul { list-style: none; }
img { display: block; max-width: 100%; }
::selection { background-color: rgba(244,95,0,0.15); color: var(--black-1); }
p, h1, h2, h3, h4, h5, h6 { margin-block: 0; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--gray-8); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gray-9); }

/* ═══════════════════════════════════════
   TYPOGRAPHY — Luxury Monochrome
   ═══════════════════════════════════════ */
h1, h2, h3, h4, h5 {
  font-family: var(--ff-mono); color: var(--txt-heading);
  letter-spacing: -0.03em; font-weight: 700; line-height: 1.15;
}
.display-text {
  font-family: var(--ff-fun); font-size: clamp(2.8rem, 6vw, 4.5rem);
  line-height: 1.05; letter-spacing: -0.02em; color: var(--black-1);
}
.h1 { font-size: var(--fs-h1); } .h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); } .h4 { font-size: var(--fs-h4); font-weight: 600; }
.txt-secondary { color: var(--txt-color); font-size: 0.95rem; line-height: 1.6; }
.txt-mono {
  font-family: var(--ff-mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: rgba(0,0,0,0.45);
  background: var(--surface); padding: 3px 8px; border-radius: var(--r-xs);
  display: inline-block;
}
.label-section {
  font-family: var(--ff-mono); text-transform: uppercase; font-size: 0.65rem;
  letter-spacing: 0.14em; color: var(--txt-color); margin-bottom: var(--s-3); display: block;
}
.type-badge {
  display: inline-block; font-family: var(--ff-mono); font-size: 9px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary);
  border: 1px solid var(--primary); padding: 3px 8px; margin-bottom: 24px;
}

/* ─────────────────────────────────────────────────────────────────
   LAYOUT SHELL
   ───────────────────────────────────────────────────────────────── */
.shell {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────
   LEFT SIDEBAR — icon-only 68 px
   ───────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--black-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 18px;
  z-index: 100;
  border-right: 1px solid var(--black-3);
  position: relative;
}

.sidebar-logo {
  width: 36px; height: 36px;
  background: var(--primary);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-family: var(--ff-fun);
  font-size: 18px;
  padding: 0 0 2px 3px;
  margin-bottom: 22px;
  flex-shrink: 0;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 0 8px;
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display:none; }

.nav-btn {
  width: 52px; height: 42px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-9);
  font-size: 20px;
  transition: var(--ui);
  position: relative;
}
.nav-btn:hover { color:white; background:rgba(255,255,255,.07); }
.nav-btn.active { color:white; background:rgba(244,95,0,.18); }
.nav-btn.active::before {
  content:'';
  position:absolute; left:-8px; top:50%;
  transform:translateY(-50%);
  width:3px; height:22px;
  background:var(--primary);
  border-radius:0 3px 3px 0;
}

/* Sidebar tooltip */
.nav-tip {
  position:absolute; left:calc(100% + 10px); top:50%;
  transform:translateY(-50%) translateX(4px);
  background:var(--black-1); color:white;
  padding:5px 10px; border-radius:var(--r-xs);
  font-size:10px; font-family:var(--ff-mono);
  text-transform:uppercase; letter-spacing:.06em;
  white-space:nowrap; opacity:0; pointer-events:none;
  transition:.15s; z-index:9999;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--shadow-md);
}
.nav-btn:hover .nav-tip { opacity:1; transform:translateY(-50%) translateX(0); }

/* Separator line in sidebar */
.nav-sep {
  width:32px; height:1px;
  background:rgba(255,255,255,.08);
  margin:4px 0;
}

.sidebar-bottom {
  display:flex; flex-direction:column; align-items:center;
  gap:6px; padding:0 8px;
  border-top:1px solid rgba(255,255,255,.07);
  padding-top:12px; margin-top:8px;
}
.sidebar-avatar {
  width:32px; height:32px; border-radius:50%;
  border:2px solid rgba(255,255,255,.12);
  background:var(--black-2);
  display:flex; align-items:center; justify-content:center;
  color:var(--gray-9); font-size:22px; cursor:pointer;
  transition:.2s;
}
.sidebar-avatar:hover { border-color:var(--primary); }

/* ─────────────────────────────────────────────────────────────────
   MAIN AREA
   ───────────────────────────────────────────────────────────────── */
.main-area {
  flex:1;
  display:flex; flex-direction:column;
  overflow:hidden; min-width:0;
}

/* ─────────────────────────────────────────────────────────────────
   TOP BAR — primary tabs (icon-only with tooltip)
   ───────────────────────────────────────────────────────────────── */
.topbar {
  height:var(--topbar-h);
  min-height:var(--topbar-h);
  background:var(--bg);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  padding:0 20px 0 0;
  z-index:50;
  flex-shrink:0;
}

.topbar-tabs-wrap { flex:1; min-width:0; }

.topbar-tabs {
  display:flex; height:var(--topbar-h);
  overflow-x:auto; scrollbar-width:none;
}
.topbar-tabs::-webkit-scrollbar { display:none; }
.topbar-tabs.hidden { display:none; }

.tab-btn {
  height:100%; padding:0 18px;
  font-size:12px; font-weight:400;
  color:var(--gray-10);
  border-bottom:2px solid transparent;
  white-space:nowrap; transition:.15s;
  display:flex; align-items:center; gap:7px;
  position:relative;
  flex-shrink:0;
}
.tab-btn i { font-size:16px; opacity:.65; }
.tab-btn span.label { font-size:12px; }
.tab-btn:hover { color:var(--txt-head); }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.tab-btn.active i { opacity:1; }

/* Tab badge (count pill) */
.tab-badge {
  height:16px; padding:0 6px;
  background:var(--primary-pale); color:var(--primary);
  border-radius:100px; font-size:9px;
  font-family:var(--ff-mono); font-weight:600;
  display:inline-flex; align-items:center;
}
.tab-btn.active .tab-badge { background:var(--primary); color:white; }

/* Topbar right actions */
.topbar-right {
  display:flex; align-items:center; gap:8px;
  flex-shrink:0; padding-left:12px;
  height:100%;  
& i { font-size:17px; margin: 0 4px; } }
    

/* Save button with sweep animation */
.btn-save {
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 14px;
  background:var(--black-1); color:white;
  border-radius:var(--r-sm);
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  transition:.2s; position:relative; overflow:hidden;
}
.btn-save::before {
  content:''; position:absolute; inset:0;
  background:var(--primary); transform:translateX(-101%);
  transition:.35s var(--ease);
}
.btn-save:hover::before { transform:translateX(0); }
.btn-save span,.btn-save i { position:relative; z-index:1; }
.btn-save.saving { pointer-events:none; }
.btn-save.saved::before { transform:translateX(0); }

/* Icon button */
.topbar-icon {
  width:34px; height:32px;
  border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--gray-10); font-size:18px; transition:.15s;
}
.topbar-icon:hover { color:var(--txt-head); background:var(--surf-hover); }
.topbar-icon.active { color:var(--primary); border-color:var(--primary-pale); background:var(--primary-pale); }

/* ─────────────────────────────────────────────────────────────────
   CONTENT AREA
   ───────────────────────────────────────────────────────────────── */
.content-area {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:24px;
  background:var(--bg);
}

/* ─────────────────────────────────────────────────────────────────
   SUB-TABS (sticky within content)
   ───────────────────────────────────────────────────────────────── */
.sub-tabs {
  display:flex; gap:0;
  border-bottom:1px solid var(--border);
  margin:-24px -24px 24px;
  padding:0 20px;
  background:var(--bg);
  position:sticky; top:-24px; z-index:20;
  overflow-x:auto; scrollbar-width:none;
  flex-shrink:0;
}
.sub-tabs::-webkit-scrollbar { display:none; }

.sub-tab {
  height:var(--sub-tabs-h);
  padding:0 14px; font-size:12px; font-weight:500;
  color:var(--gray-10); border-bottom:2px solid transparent;
  white-space:nowrap; transition:.15s;
  display:flex; align-items:center; gap:6px;
  flex-shrink:0;
}
.sub-tab i { font-size:14px; opacity:.7; }
.sub-tab:hover { color:var(--txt-head); }
.sub-tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.sub-tab.active i { opacity:1; }

/* ─────────────────────────────────────────────────────────────────
   PAGE / SUB-CONTENT VISIBILITY
   ───────────────────────────────────────────────────────────────── */
.page        { display:none; }
.page.visible { display:block; }
.sub-pane     { display:none; }
.sub-pane.visible { display:block; }

/* ═══════════════════════════════════════
   STAT CARDS — Luxury Monochrome
   ═══════════════════════════════════════ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 22px;
}
.stat-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 18px 14px;
  position: relative; overflow: hidden;
  transition: all var(--t-ui);
  display: flex; flex-direction: column; justify-content: space-between;
}
.stat-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.stat-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.stat-card.orange::after { background:var(--primary); }
.stat-card.green::after  { background:var(--green); }
.stat-card.blue::after   { background:var(--blue); }
.stat-card.yellow::after { background:var(--yellow); }
.stat-card.purple::after { background:var(--purple); }
.stat-card.red::after    { background:var(--red); }

.stat-icon {
  position:absolute; top:10px; left:12px;
  font-size:28px;
}
.stat-icon.orange { color:var(--primary); }
.stat-icon.green  { color:var(--green); }
.stat-icon.blue   { color:var(--blue); }
.stat-icon.yellow { color:var(--yellow); }
.stat-icon.purple { color:var(--purple); }

.stat-label { font-size:11px; color:var(--txt-muted); display:block; text-align:right; }
.stat-value {
  font-size:36px; font-weight:700; letter-spacing:-.03em;
  line-height:1; display:block; text-align:right; padding:8px 0 4px;
}
.stat-delta {
  font-size:11px; font-family:var(--ff-mono);
  display:flex; align-items:center; justify-content:flex-end; gap:4px;
}
.stat-delta.up   { color:var(--green); }
.stat-delta.down { color:var(--red); }
.stat-delta.flat { color:var(--txt-muted); }

/* Mini sparkline bars */
.mini-bars {
  display:flex; align-items:flex-end;
  gap:2px; height:32px;
  position:absolute; bottom:10px; left:12px;
}
.mini-bar { width:5px; border-radius:2px 2px 0 0; background:var(--primary); opacity:.25; }
.mini-bar:nth-child(odd)  { opacity:.4; }
.mini-bar:last-child      { opacity:.9; }
.stat-card:hover .mini-bar { opacity:.7; }

/* ═══════════════════════════════════════
   CARDS & PANELS — Luxury Monochrome
   ═══════════════════════════════════════ */
.card {
  background: var(--bg); border-radius: var(--r);
  padding: var(--s-5); border: 1px solid var(--border);
  transition: transform 0.25s var(--ease-snappy), border-color 0.25s;
}
.card-hover:hover { transform: translateY(-3px); border-color: var(--border-hover); }

.panel {
  background: var(--bg);
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: border-color 0.25s;
}
.panel:hover { border-color: var(--border-hover); }
.panel-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 13px;
}
.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 13px;
  color: var(--txt-heading);
}
.panel-head > span { display: flex; align-items: center; gap: 8px; }
.panel-head > span > i { font-size: 18px; color: var(--primary); opacity: .8; }
.panel-header > i { font-size: 22px; color: var(--primary); }
.panel-header .ph-desc {
  font-size: 11px; color: var(--muted);
  font-weight: 400; margin-left: 2px;
}
.panel-header .ph-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.panel-body { padding: 18px; }
.panel-footer {
  padding: 12px 18px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
}

/* CTA card */
.cta-card { background: var(--black-1); color: #fff; border-radius: var(--r); padding: var(--s-4); border: none; }
.cta-card h4 { color: #fff; font-family: var(--ff-main); }
.cta-card p { color: rgba(255,255,255,0.55); font-size: 0.85rem; }
.cta-card .btn { background: #fff; color: var(--black-1); border: none; font-weight: 700; }
.cta-card .btn:hover { background: rgba(255,255,255,0.85); }

/* ─────────────────────────────────────────────────────────────────
   PLUGIN ROW (active/inactive plugin list)
   ───────────────────────────────────────────────────────────────── */
.plugin-row {
  display:flex; align-items:center; gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--border-light);
}
.plugin-row:last-child { border-bottom:none; }
.plugin-icon {
  width:36px; height:36px; border-radius:var(--r-sm);
  background:var(--primary-pale); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.plugin-icon.green  { background:var(--green-pale);  color:#16a34a; }
.plugin-icon.blue   { background:var(--blue-pale);   color:#2563eb; }
.plugin-icon.yellow { background:var(--yellow-pale); color:#a16207; }
.plugin-icon.purple { background:var(--purple-pale); color:var(--purple); }
.plugin-info { flex:1; min-width:0; }
.plugin-name { font-weight:600; font-size:13px; }
.plugin-slug { font-family:var(--ff-mono); font-size:10px; color:var(--txt-muted); text-transform:uppercase; }
.plugin-meta { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }

/* ─────────────────────────────────────────────────────────────────
   FORM GRID + FIELDS
   ───────────────────────────────────────────────────────────────── */
.form-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.form-grid.cols-1 { grid-template-columns:1fr; }
.form-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.form-grid.cols-4 { grid-template-columns:repeat(4,1fr); }

.field { display:flex; flex-direction:column; gap:5px; }
.field.full { grid-column:1/-1; }

.field-label {
  font-size:12px; font-weight:500;
  color:var(--txt-head);
  display:flex; align-items:center; gap:6px;
}
.field-label .req { color:var(--primary); }

.field-hint { font-size:11px; color:var(--txt-muted); line-height:1.4; }

/* Info-tip icon inline */
.field-tip {
  width:14px; height:14px; border-radius:50%;
  background:var(--surf-hover); color:var(--txt-muted);
  font-size:9px; cursor:help;
  display:inline-flex; align-items:center; justify-content:center;
  transition:.15s; flex-shrink:0;
}
.field-tip:hover { background:var(--primary-pale); color:var(--primary); }

/* ═══════════════════════════════════════
   FORM INPUTS — Luxury Monochrome + Admin compat
   ═══════════════════════════════════════ */

/* Admin compact input (backward compat) */
.input {
  height: 38px; padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--bg); font-size: 13px;
  transition: all var(--t-ui); width: 100%;
  color: var(--txt-color);
}
.input:hover { border-color: var(--border-hover); }
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(244,95,0,.08); outline: none; }
.input::placeholder { color: var(--muted); }
.input.mono { font-family: var(--ff-mono); font-size: 12px; }

textarea.input {
  height: auto; min-height: 82px;
  padding: 10px 12px; resize: vertical; line-height: 1.5;
}

.select {
  height: 38px; padding: 0 32px 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--bg); font-size: 12.5px;
  appearance: none; cursor: pointer; width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: all var(--t-ui); color: var(--txt-color);
}
.select:hover { border-color: var(--border-hover); }
.select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(244,95,0,.08); }

/* Apollo floating-label input (Luxury Monochrome) */
.input-group { position: relative; margin-bottom: 35px; }
.apollo-label {
  position: absolute; top: 12px; left: 0;
  font-family: var(--ff-mono); font-size: 12px; color: var(--muted);
  pointer-events: none; transition: all 0.4s var(--ease); text-transform: uppercase;
}
.apollo-input {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--border); padding: 12px 0;
  font-family: var(--ff-main); font-size: 16px; color: var(--black-1);
  border-radius: 0; transition: border-color 0.4s var(--ease);
}
.apollo-input:focus { border-bottom-color: var(--primary); outline: none; }
.apollo-input:focus ~ .apollo-label,
.apollo-input:not(:placeholder-shown) ~ .apollo-label {
  top: -10px; font-size: 10px; color: var(--primary);
}

/* Input with icon prefix */
.input-wrap { position: relative; }
.input-wrap .input { padding-left: 36px; }
.input-wrap .input-icon {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); font-size: 16px;
  color: var(--muted); pointer-events: none;
}

/* Number input with unit suffix */
.input-unit {
  display: flex; align-items: center;
  border: 1px solid var(--border); border-radius: var(--r-xs);
  overflow: hidden; transition: all var(--t-ui);
}
.input-unit:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(244,95,0,.08); }
.input-unit .input { border: none; box-shadow: none; border-radius: 0; flex: 1; }
.input-unit .input:focus { box-shadow: none; }
.input-unit .unit {
  padding: 0 10px; background: var(--surface);
  border-left: 1px solid var(--border);
  font-size: 11px; font-family: var(--ff-mono);
  color: var(--muted); white-space: nowrap;
  display: flex; align-items: center;
}

/* ═══════════════════════════════════════
   TOGGLE SWITCH ROW — Luxury Monochrome
   ═══════════════════════════════════════ */
.toggle-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  transition: all var(--t-ui);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row:hover { background: var(--surface); margin: 0 -18px; padding-left: 18px; padding-right: 18px; border-radius: var(--r-sm); border-bottom-color: transparent; }

.toggle-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.toggle-title { font-size: 13px; font-weight: 500; color: var(--txt-heading); display: flex; align-items: center; gap: 6px; }
.toggle-desc  { font-size: 11px; color: var(--muted); line-height: 1.4; }
.toggle-meta  { font-size: 10px; font-family: var(--ff-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* The actual switch control */
.switch {
  position: relative; width: 34px; height: 20px; flex-shrink: 0; margin-top: 2px;
}
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch-track {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--gray-8); border-radius: 20px; transition: .25s;
}
.switch-track::before {
  content: ''; position: absolute;
  width: 14px; height: 14px; left: 3px; bottom: 3px;
  background: white; border-radius: 50%;
  transition: .25s var(--ease);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::before { transform: translateX(14px); }
.switch input:disabled + .switch-track { opacity: .4; cursor: not-allowed; }

/* Toolkit toggle-track style */
.toggle-track {
  width: 42px; height: 22px; background: var(--black-1);
  border-radius: 20px; position: relative; cursor: pointer;
}
.toggle-thumb {
  width: 18px; height: 18px; background: #fff;
  border-radius: 50%; position: absolute; right: 2px; top: 2px;
}

/* ─────────────────────────────────────────────────────────────────
   COLOR PICKER
   ───────────────────────────────────────────────────────────────── */
.color-field {
  display:flex; align-items:center; gap:8px;
}
.color-swatch {
  width:38px; height:38px;
  border-radius:var(--r-xs);
  border:2px solid var(--border);
  cursor:pointer; padding:0; overflow:hidden;
  flex-shrink:0; transition:.15s;
}
.color-swatch:hover { border-color:var(--border-hover); }
.color-swatch::-webkit-color-swatch-wrapper { padding:0; }
.color-swatch::-webkit-color-swatch { border:none; }
.color-hex {
  width:110px; height:38px; padding:0 10px;
  border:1px solid var(--border); border-radius:var(--r-xs);
  font-family:var(--ff-mono); font-size:12px; text-transform:uppercase;
  background:var(--bg); color:var(--txt);
  transition:.15s;
}
.color-hex:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(244,95,0,.08); }

/* ═══════════════════════════════════════
   ACCORDION — Luxury Monochrome
   ═══════════════════════════════════════ */
.accordion {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden; margin-bottom: 10px;
  background: var(--bg);
  transition: border-color 0.25s;
}
.accordion:hover { border-color: var(--border-hover); }
.accordion-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  cursor: pointer; user-select: none;
  font-weight: 600; font-size: 13px;
  transition: background var(--t-ui);
}
.accordion-head:hover { background: var(--surface); }
.accordion-head > i.icon { font-size: 20px; color: var(--primary); }
.accordion-head > i.arr  { margin-left: auto; font-size: 14px; color: var(--muted); transition: .2s; }
.accordion-head .acc-badge {
  font-size: 10px; font-family: var(--ff-mono);
  padding: 2px 7px; border-radius: 100px;
  background: var(--surface); color: var(--muted);
  font-weight: 400;
}
.accordion.open .accordion-head { border-bottom: 1px solid var(--border); }
.accordion.open .accordion-head > i.arr { transform: rotate(180deg); }
.accordion-body { padding: 16px; display: none; }
.accordion.open .accordion-body { display: block; }

/* ═══════════════════════════════════════
   STATUS PILL / BADGE / TAGS — Luxury Monochrome
   ═══════════════════════════════════════ */
.pill {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 9px;
  border-radius: 100px;
  font-family: var(--ff-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.pill.active   { background: var(--green-pale);  color: #16a34a; }
.pill.inactive { background: var(--gray-1);       color: var(--gray-10); }
.pill.warning  { background: var(--yellow-pale); color: #a16207; }
.pill.error    { background: var(--red-pale);    color: var(--red); }
.pill.info     { background: var(--blue-pale);   color: #2563eb; }
.pill.primary  { background: var(--primary-pale); color: var(--primary); }
.pill.purple   { background: var(--purple-pale); color: var(--purple); }

/* Dot pulse animation for live status */
.pill.active::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: #16a34a;
  margin-right: 4px;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.8); }
}

/* Tags — Luxury Monochrome */
.tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--r-xs);
  font-family: var(--ff-mono); font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--surface); color: rgba(0,0,0,0.45);
  border: 1px solid var(--border);
}
.tag-primary { background: var(--surface); color: var(--black-1); border-color: var(--border-strong); }
.tag-success { background: rgba(119,224,0,0.08); color: #3d7a00; border-color: rgba(119,224,0,0.15); }
.tag-danger  { background: rgba(229,57,53,0.07); color: #b71c1c; border-color: rgba(229,57,53,0.12); }

/* ═══════════════════════════════════════
   BUTTONS — Luxury Monochrome
   ═══════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 26px;
  font-family: var(--ff-main); font-size: 0.9rem; font-weight: 600;
  border-radius: var(--r); border: 1px solid transparent;
  cursor: pointer; transition: all var(--t-ui);
  white-space: nowrap; position: relative; overflow: hidden;
  flex-shrink: 0;
}
.btn:active { transform: scale(0.97); }
.btn-sm  { padding: 8px 18px; font-size: 0.8rem; }
.btn-xs  { padding: 4px 10px; font-size: 11px; height: 24px; border-radius: var(--r-xs); }
.btn-lg  { padding: 16px 34px; font-size: 1rem; }

.btn-primary { background: var(--black-1); color: #fff; border-color: var(--black-1); }
.btn-primary:hover { background: var(--black-10); }
.btn-secondary { background: var(--surface); color: var(--txt-heading); border-color: transparent; }
.btn-secondary:hover { background: var(--surface-hover); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--txt-color); }
.btn-ghost:hover { border-color: var(--border-hover); background: var(--surface); }
.btn-icon {
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  background: var(--bg); color: var(--txt-color); border: 1px solid var(--border);
}
.btn-icon:hover { background: var(--surface); border-color: var(--border-hover); }
.btn-dark    { background: var(--black-1); color: white; }
.btn-dark:hover { background: var(--black-2); }
.btn-orange  { background: var(--primary); color: white; border-color: var(--primary); }
.btn-orange:hover { background: var(--primary-light); }
.btn-outline { border: 1px solid var(--border); color: var(--txt-heading); background: var(--bg); }
.btn-outline:hover { background: var(--surface); border-color: var(--border-hover); }
.btn-danger  { background: var(--red); color: white; border-color: var(--red); }
.btn-danger:hover { background: #dc2626; }
.btn-success { background: var(--green); color: white; border-color: var(--green); }
.btn-success:hover { background: #16a34a; }

/* Ripple effect */
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(0,0,0,0.06);
  transform: scale(0); animation: ripple-anim 0.55s linear; pointer-events: none;
}
@keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }

/* ═══════════════════════════════════════
   DATA TABLE — Luxury Monochrome
   ═══════════════════════════════════════ */
.table-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--border); }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table thead th {
  font-family: var(--ff-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: rgba(0,0,0,0.35); font-weight: 700;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg); white-space: nowrap;
  position: sticky; top: 0; z-index: 1; user-select: none;
}
.data-table tbody td {
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; vertical-align: middle;
}
.data-table tbody tr:hover { background: var(--surface); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* Sheet Card — Spreadsheet component (Luxury Monochrome) */
.sheet-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
}
.sheet-header {
  padding: 16px 24px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg);
}
.sheet-header h4 { font-size: 1rem; display: flex; align-items: center; gap: 10px; }
.sheet-badge {
  font-family: var(--ff-mono); font-size: 10px; background: var(--surface);
  border: 1px solid var(--border); padding: 2px 8px; border-radius: var(--r-pill);
  color: rgba(0,0,0,0.45); font-weight: 700;
}
.sheet-toolbar {
  padding: 10px 24px; display: flex; gap: 8px; align-items: center;
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.sheet-toolbar .btn { height: 28px; padding: 0 12px; font-size: 11px; border-radius: var(--r-pill); }
.sheet-scroll { overflow: auto; max-height: 340px; }
.sheet-scroll table { width: max-content; min-width: 100%; border-spacing: 0; border-collapse: separate; }
.sheet-scroll thead { position: sticky; top: 0; z-index: 20; background: var(--bg); }
.sheet-scroll thead::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border); }
.sheet-scroll th {
  text-align: left; font-family: var(--ff-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; color: rgba(0,0,0,0.35); padding: 12px 16px;
  white-space: nowrap; background: var(--bg); user-select: none; border-bottom: 1px solid var(--border);
}
.sheet-scroll th:first-child, .sheet-scroll td:first-child {
  position: sticky; left: 0; z-index: 25; background: var(--bg);
  border-right: 1px solid var(--border); width: 50px; text-align: center; padding: 0 12px;
}
.sheet-scroll th:first-child { z-index: 30; }
.sheet-scroll td {
  border-bottom: 1px solid var(--border); padding: 0 12px;
  height: 44px; vertical-align: middle; background: var(--bg);
}
.sheet-scroll table input {
  width: 100%; min-width: 120px; border: none; background: transparent;
  font-family: var(--ff-main); font-size: 13px; color: var(--black-1); padding: 4px 0;
}
/* Ghost mode */
.sheet-scroll table:hover tbody tr,
.sheet-scroll table:focus-within tbody tr {
  filter: blur(1.5px); opacity: 0.5; transition: 0.3s ease;
}
.sheet-scroll table tbody tr:hover,
.sheet-scroll table tbody tr:focus-within {
  filter: blur(0) !important; opacity: 1 !important;
  background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  z-index: 10; position: relative;
}
.sheet-scroll table tbody tr:hover td:first-child,
.sheet-scroll table tbody tr:focus-within td:first-child {
  background: #fff; color: var(--black-1); font-weight: 700;
}
.sheet-scroll table input:focus { color: var(--primary); outline: none; }

/* Editable cell (inline edit) */
[contenteditable] {
  padding: 3px 6px; border-radius: 4px; transition: all var(--t-ui);
}
[contenteditable]:hover { background: var(--primary-pale); }
[contenteditable]:focus {
  background: var(--bg); outline: 2px solid var(--primary); outline-offset: -1px;
}

/* ─────────────────────────────────────────────────────────────────
   FILTER / SEARCH BAR
   ───────────────────────────────────────────────────────────────── */
.filter-bar {
  display:flex; align-items:center; gap:10px;
  margin-bottom:18px; flex-wrap:wrap;
}
.search-input {
  height:34px; padding:0 10px 0 34px;
  border:1px solid var(--border); border-radius:var(--r-xs);
  background:var(--bg); font-size:12px; width:240px; max-width:100%;
  background-image:url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%23a1a1aa' stroke-width='2'/%3E%3Cpath d='M16 16L21 21' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:10px center;
  transition:.15s; color:var(--txt);
}
.search-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(244,95,0,.08); outline:none; }

/* ─────────────────────────────────────────────────────────────────
   SECTION TITLE DIVIDER
   ───────────────────────────────────────────────────────────────── */
.sec-title {
  font-family:var(--ff-mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--txt-muted);
  padding:18px 0 10px;
  display:flex; align-items:center; gap:10px;
}
.sec-title::after {
  content:''; flex:1; height:1px; background:var(--border);
}

/* ─────────────────────────────────────────────────────────────────
   TWO / THREE COLUMN LAYOUT
   ───────────────────────────────────────────────────────────────── */
.two-cols   { display:grid; grid-template-columns:1fr 1fr;   gap:18px; }
.three-cols { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }
.side-layout { display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start; }

/* ─────────────────────────────────────────────────────────────────
   DASHBOARD OVERVIEW WIDGETS
   ───────────────────────────────────────────────────────────────── */
/* Health indicator (traffic light) */
.health-bar {
  height:6px; border-radius:3px; overflow:hidden;
  background:var(--surface);
}
.health-fill { height:100%; border-radius:3px; transition:.6s var(--ease); }

/* Plugin health card */
.health-card {
  border:1px solid var(--border); border-radius:var(--r-sm);
  padding:12px 14px;
  display:flex; align-items:center; gap:12px;
  transition:.15s;
}
.health-card:hover { border-color:var(--border-hover); box-shadow:var(--shadow-sm); }
.health-dot {
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
}
.health-dot.ok      { background:var(--green); }
.health-dot.warn    { background:var(--yellow); }
.health-dot.error   { background:var(--red); }
.health-dot.missing { background:var(--gray-8); }
.health-name { flex:1; font-size:12px; font-weight:500; }
.health-layer { font-family:var(--ff-mono); font-size:10px; color:var(--txt-muted); }
.health-version { font-family:var(--ff-mono); font-size:10px; color:var(--txt-muted); }

/* REST API tester row */
.api-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--border-light);
}
.api-row:last-child { border-bottom:none; }
.api-method {
  font-family:var(--ff-mono); font-size:9px; font-weight:700;
  padding:2px 7px; border-radius:4px; flex-shrink:0;
}
.api-method.get    { background:#dbeafe; color:#1d4ed8; }
.api-method.post   { background:#dcfce7; color:#15803d; }
.api-method.put    { background:#fef9c3; color:#a16207; }
.api-method.delete { background:#fee2e2; color:#b91c1c; }
.api-endpoint { font-family:var(--ff-mono); font-size:11px; color:var(--txt-muted); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.api-status { font-family:var(--ff-mono); font-size:10px; }
.api-status.ok  { color:var(--green); }
.api-status.err { color:var(--red); }

/* ─────────────────────────────────────────────────────────────────
   GAMIFICATION / MEMBERSHIP WIDGETS
   ───────────────────────────────────────────────────────────────── */
.rank-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--border-light);
}
.rank-row:last-child { border-bottom:none; }
.rank-badge {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex; align-items:center; justify-content:center;
  color:white; font-size:14px; flex-shrink:0;
}
.rank-info { flex:1; }
.rank-name  { font-weight:600; font-size:13px; }
.rank-pts   { font-size:11px; color:var(--txt-muted); font-family:var(--ff-mono); }
.rank-bar-wrap { width:120px; }
.rank-bar   { height:4px; border-radius:2px; background:var(--surface); overflow:hidden; }
.rank-fill  { height:100%; background:linear-gradient(90deg,var(--primary),var(--accent)); border-radius:2px; }

/* ─────────────────────────────────────────────────────────────────
   EMAIL TEMPLATE CARD
   ───────────────────────────────────────────────────────────────── */
.email-tpl-card {
  border:1px solid var(--border); border-radius:var(--r-sm);
  overflow:hidden; transition:.15s;
}
.email-tpl-card:hover { border-color:var(--primary); box-shadow:var(--shadow-sm); }
.email-tpl-preview {
  height:120px; background:linear-gradient(160deg,var(--surface),var(--surf-hover));
  display:flex; align-items:center; justify-content:center;
  font-size:32px; color:var(--txt-muted); border-bottom:1px solid var(--border);
}
.email-tpl-meta { padding:12px; }
.email-tpl-name { font-weight:600; font-size:13px; }
.email-tpl-type { font-size:11px; color:var(--txt-muted); font-family:var(--ff-mono); text-transform:uppercase; }

/* ─────────────────────────────────────────────────────────────────
   TOAST NOTIFICATIONS
   ───────────────────────────────────────────────────────────────── */
#toast-container {
  position:fixed; bottom:24px; right:24px;
  display:flex; flex-direction:column-reverse; gap:8px;
  z-index:9999; pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:10px;
  background:var(--black-1); color:white;
  padding:12px 16px; border-radius:var(--r-sm);
  font-size:13px; min-width:260px; max-width:380px;
  box-shadow:var(--shadow-lg);
  animation:toast-in .3s var(--ease) forwards;
  pointer-events:all;
  border-left:3px solid var(--primary);
}
.toast.error   { border-left-color:var(--red); }
.toast.success { border-left-color:var(--green); }
.toast.warning { border-left-color:var(--yellow); }
.toast i { font-size:18px; flex-shrink:0; }
.toast.error i   { color:var(--red); }
.toast.success i { color:var(--green); }
.toast.warning i { color:var(--yellow); }
.toast-msg { flex:1; }
.toast-close { font-size:16px; color:rgba(255,255,255,.5); cursor:pointer; transition:.15s; padding:2px; }
.toast-close:hover { color:white; }
@keyframes toast-in  { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }
@keyframes toast-out { from { opacity:1; transform:none; } to { opacity:0; transform:translateX(20px); } }
.toast.hiding { animation:toast-out .2s forwards; }

/* ─────────────────────────────────────────────────────────────────
   MODAL
   ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:2000; display:none;
  align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
.modal-overlay.open { display:flex; }
.modal {
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r); width:520px; max-width:94vw; max-height:90vh;
  display:flex; flex-direction:column; box-shadow:var(--shadow-lg);
  animation:modal-in .25s var(--ease);
}
@keyframes modal-in { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
.modal-head {
  display:flex; align-items:center; gap:10px;
  padding:16px 20px; border-bottom:1px solid var(--border);
  font-weight:700; font-size:14px;
}
.modal-head i { font-size:22px; color:var(--primary); }
.modal-head .modal-close { margin-left:auto; font-size:20px; color:var(--txt-muted); cursor:pointer; transition:.15s; }
.modal-head .modal-close:hover { color:var(--txt-head); }
.modal-body { padding:20px; overflow-y:auto; flex:1; }
.modal-foot { padding:14px 20px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }

/* ─────────────────────────────────────────────────────────────────
   MOBILE / RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
.mobile-bar {
  display:none; height:50px;
  background:var(--black-1); align-items:center;
  padding:0 14px; gap:10px; color:white; flex-shrink:0;
}
.mobile-logo { font-family:var(--ff-fun); font-size:18px; color:var(--primary); }
.mobile-menu { width:34px; height:34px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:22px; margin-left:auto; }

.mobile-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.55); z-index:9998;
}
.mobile-overlay.active { display:block; }

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

@media (max-width:1024px) {
  .form-grid.cols-3,.form-grid.cols-4 { grid-template-columns:repeat(2,1fr); }
  .two-cols { grid-template-columns:1fr; }
  .side-layout { grid-template-columns:1fr; }
  .three-cols { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
  .sidebar { display:none; }
  .sidebar.mobile-open {
    display:flex; position:fixed;
    left:0; top:0; height:100vh; z-index:9999;
  }
  .mobile-bar   { display:flex; }
  .content-area { padding:16px; }
  .sub-tabs { margin:-16px -16px 16px; padding:0 14px; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .form-grid  { grid-template-columns:1fr; }
  .form-grid.cols-3,.form-grid.cols-4 { grid-template-columns:1fr; }
  .tab-btn { padding:0 12px; }
  .tab-btn .label { display:none; }
}

@media (max-width:480px) {
  .stats-grid  { grid-template-columns:1fr; }
  .stat-value  { font-size:28px; }
}

/* ─────────────────────────────────────────────────────────────────
   UTILS / HELPERS
   ───────────────────────────────────────────────────────────────── */
.flex       { display:flex; }
.items-center { align-items:center; }
.gap-2      { gap:8px; }
.gap-3      { gap:12px; }
.ml-auto    { margin-left:auto; }
.mt-3       { margin-top:12px; }
.mb-3       { margin-bottom:12px; }
.text-muted { color:var(--txt-muted); }
.text-sm    { font-size:12px; }
.text-xs    { font-size:11px; }
.mono       { font-family:var(--ff-mono); }
.fw-6       { font-weight:600; }
.w-full     { width:100%; }
.truncate   { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Dirty indicator (unsaved changes) */
.dirty-dot {
  display:inline-block; width:7px; height:7px;
  border-radius:50%; background:var(--yellow);
  animation:pulse-dot 1.5s ease-in-out infinite;
  margin-left:6px; vertical-align:middle;
}

/* Loading spinner */
.spinner {
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:white;
  animation:spin .6s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Code block */
.code-block {
  background:var(--black-1); color:#e2e8f0;
  padding:12px 14px; border-radius:var(--r-sm);
  font-family:var(--ff-mono); font-size:11.5px;
  line-height:1.6; overflow-x:auto;
}
.code-block .comment { color:#718096; }
.code-block .key     { color:#fc8181; }
.code-block .val     { color:#68d391; }
.code-block .fn      { color:#76e4f7; }

/* Key-value pair row (raw options display) */
.kv-row {
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--border-light);
}
.kv-row:last-child { border-bottom:none; }
.kv-key   { font-family:var(--ff-mono); font-size:11px; color:var(--primary); flex-shrink:0; min-width:220px; }
.kv-val   { font-size:12px; flex:1; color:var(--txt); }
.kv-src   { font-size:10px; color:var(--txt-muted); font-family:var(--ff-mono); }

/* Drag handle */
.drag-handle { color:var(--txt-muted); cursor:grab; font-size:16px; }
.drag-handle:active { cursor:grabbing; }
/* --- MODULAR TOPBAR SWITCH --- */
#topbar-switch {
  display: flex;
  flex: 1;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}
#topbar-switch [data-role="topbar"] {
  display: none;
  flex: 1;
  height: 100%;
  min-width: 0;
}
#topbar-switch [data-role="topbar"].is-active {
  display: flex;
  align-items: center;
}
.topbar-tabs .tab-btn i[data-apollo-icon] {
  display: inline-block;
  width: 18px;
  height: 18px;
  font-size: 0;
  vertical-align: middle;
  -webkit-mask: var(--apollo-mask) center / contain no-repeat;
  mask: var(--apollo-mask) center / contain no-repeat;
  background-color: currentColor;
}
.topbar-tabs .tab-btn.active i[data-apollo-icon] {
  background-color: var(--primary, #f45f00);
}

/* ────────────────────────────────────────────────────────────────
   AS2-SELECT (multi-role dropdown, avatar, chips)
   ──────────────────────────────────────────────────────────────── */
.as2-select {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--bg);
  padding: 6px 10px;
  transition: .15s;
}
.as2-select:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(244,95,0,.08);
}
.as2-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary-pale);
  color: var(--primary);
  border-radius: 100px;
  font-size: 11px;
  font-family: var(--ff-mono);
  padding: 0 10px;
  height: 24px;
  margin: 2px 0;
}
.as2-chip .chip-remove {
  font-size: 13px;
  color: var(--primary);
  cursor: pointer;
  margin-left: 2px;
}
.as2-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gray-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-right: 6px;
}
.as2-dropdown {
  position: absolute;
  z-index: 1000;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  padding: 6px 0;
}
.as2-dropdown-option {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  transition: .13s;
}
.as2-dropdown-option:hover {
  background: var(--primary-pale);
  color: var(--primary);
}

/* ────────────────────────────────────────────────────────────────
   QUIZ EDITOR (cards, answer list, add/remove)
   ──────────────────────────────────────────────────────────────── */
.quiz-question-card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 18px;
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: .15s;
}
.quiz-question-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}
.quiz-q-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--primary);
  margin-right: 10px;
  cursor: pointer;
}
.quiz-answer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 60px;
}
.quiz-answer {
  display: flex;
  gap: 8px;
  align-items: center;
}
.quiz-answer input[type="radio"] {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
.quiz-answer .input {
  flex: 1;
}
.quiz-answer .btn {
  margin-left: 2px;
}
.quiz-answer .btn-ghost {
  color: var(--txt-muted);
}
.quiz-answer .btn-ghost:hover {
  color: var(--primary);
}
.quiz-answer .btn-add {
  color: var(--primary);
  font-size: 13px;
}
.quiz-question-card .btn-ghost {
  color: var(--txt-muted);
}
.quiz-question-card .btn-ghost:hover {
  color: var(--red);
}

/* ────────────────────────────────────────────────────────────────
   LEADERBOARD (gamification)
   ──────────────────────────────────────────────────────────────── */
.leaderboard {
  width: 100%;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
  overflow: hidden;
}
.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-light);
  transition: .13s;
}
.leaderboard-row:last-child {
  border-bottom: none;
}
.leaderboard-rank {
  font-family: var(--ff-mono);
  font-size: 13px;
  color: var(--primary);
  width: 32px;
  text-align: center;
}
.leaderboard-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gray-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-right: 6px;
}
.leaderboard-name {
  font-weight: 600;
  font-size: 13px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leaderboard-score {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--txt-muted);
  min-width: 60px;
  text-align: right;
}

/* ────────────────────────────────────────────────────────────────
   TAGS (tag input/list)
   ──────────────────────────────────────────────────────────────── */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.tag {
  display: inline-flex;
  align-items: center;
  background: var(--blue-pale);
  color: var(--blue);
  border-radius: 100px;
  font-size: 11px;
  font-family: var(--ff-mono);
  padding: 0 10px;
  height: 22px;
  margin: 2px 0;
}
.tag .tag-remove {
  font-size: 13px;
  color: var(--blue);
  cursor: pointer;
  margin-left: 4px;
}
.tag-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary);
  font-size: 12px;
  cursor: pointer;
  padding: 0 8px;
  height: 22px;
  border-radius: 100px;
  background: var(--primary-pale);
  margin-left: 6px;
}

/* ────────────────────────────────────────────────────────────────
   AJUSTES VISUAIS EXTRAS (quiz/gamification)
   ──────────────────────────────────────────────────────────────── */
.quiz-question-card input.input[placeholder] {
  font-weight: 600;
  font-size: 14px;
}
.quiz-question-card .field-hint {
  font-size: 11px;
  color: var(--txt-muted);
}
.quiz-question-card .btn-outline {
  margin-top: 10px;
}
.quiz-question-card .btn-orange {
  background: var(--primary);
  color: white;
  border-radius: var(--r-xs);
}
.quiz-question-card .btn-orange:hover {
  background: var(--primary-light);
}

/* ────────────────────────────────────────────────────────────────
   HEALTH TABLE & AUDIT LOG — pill states, btn-xs, badges
   ──────────────────────────────────────────────────────────────── */
.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.pill.active {
  background: #dcfce7;
  color: #166534;
}
.pill.inactive {
  background: #fee2e2;
  color: #991b1b;
}
.btn-xs {
  padding: 2px 8px;
  font-size: 11px;
  height: 24px;
  border-radius: var(--r-xs);
}
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  font-size: 11px;
  font-weight: 600;
}
.badge-green { background: #dcfce7; color: #166534; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-orange { background: #ffedd5; color: #9a3412; }
.badge-muted { background: var(--subtle); color: var(--txt-muted); }

/* KV Grid (Ecosystem Info) */
.kv-grid { display: grid; gap: 12px; }
.kv-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .kv-grid.cols-3 { grid-template-columns: 1fr 1fr; } }
.kv-row { display: flex; flex-direction: column; gap: 2px; }
.kv-label { font-size: 12px; color: var(--txt-muted); font-weight: 500; }
.kv-value { font-size: 14px; font-weight: 600; font-family: var(--ff-mono); }

/* Toggle-pill (rank exclusion, 2FA roles) */
.toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid var(--border);
  font-size: 12px;
  cursor: pointer;
  transition: .15s;
  margin: 2px 4px 2px 0;
}
.toggle-pill:has(input:checked) {
  background: var(--primary-pale);
  border-color: var(--primary);
  color: var(--primary);
}
.toggle-pill input { display: none; }

/* ─────────────────────────────────────────────────────────────────
   APOLLO SHEETS TABLE (ghost-mode bulk editor)
   Force-comply: apollo-sheets design pattern
   ───────────────────────────────────────────────────────────────── */
.apollo-sheets-container {
  flex: 1;
  overflow: auto;
  background: var(--bg);
  padding: 0;
  position: relative;
  border: 1px solid var(--border-light);
  border-radius: var(--r);
}
.apollo-sheets {
  width: max-content;
  min-width: 100%;
  background: var(--bg);
  position: relative;
}
.apollo-sheets table {
  width: auto;
  min-width: 100%;
  border-spacing: 0;
  border-collapse: separate;
}
.apollo-sheets thead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
}
.apollo-sheets thead::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--border-light);
}
.apollo-sheets th {
  text-align: left;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--txt-muted);
  padding: 10px 16px;
  white-space: nowrap;
  background: var(--bg);
  user-select: none;
  border: none;
}
.apollo-sheets .resize-handle {
  display: inline-block;
  width: 2px; height: 10px;
  background: var(--border-light);
  margin-left: 8px;
  vertical-align: middle;
}
/* Sticky ID column */
.apollo-sheets th:first-child,
.apollo-sheets td:first-child {
  position: sticky;
  left: 0;
  z-index: 25;
  background: var(--bg);
  border-right: 1px solid var(--border-light);
  width: 50px;
  text-align: center;
  padding: 0 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--txt-muted);
}
.apollo-sheets th:first-child { z-index: 30; }
.apollo-sheets td {
  border-bottom: 1px solid var(--border-light);
  padding: 0 12px;
  height: 44px;
  vertical-align: middle;
  background: var(--bg);
  font-size: 13px;
}
.apollo-sheets table input {
  width: 100%;
  min-width: 120px;
  border: none;
  background: transparent;
  font-family: var(--ff-main);
  font-size: 13px;
  color: var(--txt);
  padding: 4px 0;
}
.apollo-sheets table input:focus {
  color: var(--primary);
  outline: none;
}

/* Ghost Mode — blur inactive rows on hover */
.apollo-sheets:hover tbody tr,
.apollo-sheets:focus-within tbody tr {
  filter: blur(2px);
  opacity: 0.5;
  transition: .3s ease;
}
.apollo-sheets tbody tr:hover,
.apollo-sheets tbody tr:focus-within {
  filter: blur(0) !important;
  opacity: 1 !important;
  background: var(--bg);
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
  z-index: 10;
  position: relative;
}
.apollo-sheets tbody tr:hover td:first-child,
.apollo-sheets tbody tr:focus-within td:first-child {
  background: var(--bg);
  color: var(--txt-head);
  font-weight: 700;
}

/* Sheets Header/Toolbar */
.apollo-bulk-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: var(--bg);
}
.apollo-bulk-toolbar {
  padding: 8px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg);
}
.apollo-bulk-badge {
  font-family: var(--ff-mono);
  font-size: 10px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  padding: 2px 6px;
  border-radius: 100px;
  color: var(--txt-muted);
}
.apollo-search-composite {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 100px;
  padding: 2px;
  flex: 1 1 200px;
  max-width: 340px;
}
.apollo-composite-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--ff-main);
  color: var(--txt);
  min-width: 0;
}
.apollo-composite-input:focus { outline: none; }
.apollo-composite-btn {
  width: 26px; height: 26px;
  background: var(--black-1);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
}
.apollo-bulk-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  padding: 2px;
  border-radius: 100px;
  border: 1px solid var(--border-light);
  font-size: 10px;
}
.apollo-bulk-pagination button {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: var(--bg);
  color: var(--txt-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
}
.apollo-bulk-pagination button:hover { border-color: var(--border); }
.apollo-bulk-page-input {
  width: 28px; height: 18px;
  border: none;
  background: transparent;
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 10px;
}

/* ─────────────────────────────────────────────────────────────────
   RANGE SLIDER (parametric EQ / admin sliders)
   Force-comply: equalizer design pattern
   ───────────────────────────────────────────────────────────────── */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 32px;
  background: transparent;
  margin: 0;
  cursor: pointer;
}
input[type=range]:focus { outline: none; }

/* Track — Webkit */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  transition: background .3s var(--ease);
}
/* Track — Firefox */
input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 4px;
}
/* Thumb — Webkit */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--black-1);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  cursor: grab;
  margin-top: -8px;
  transition: transform .2s var(--ease), background .2s, border-color .2s;
}
/* Thumb — Firefox */
input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--black-1);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  cursor: grab;
}
/* Hover */
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.15); }
input[type=range]:hover::-moz-range-thumb { transform: scale(1.15); }
/* Active (dragging) */
input[type=range]:active::-webkit-slider-thumb {
  cursor: grabbing;
  background: var(--black-1);
  transform: scale(.9);
}
input[type=range]:active::-moz-range-thumb {
  cursor: grabbing;
  background: var(--black-1);
  transform: scale(.9);
}
input[type=range]:active::-webkit-slider-runnable-track { background: var(--surf-hover); }
input[type=range]:active::-moz-range-track { background: var(--surf-hover); }

/* Range with value display */
.range-group { display: flex; align-items: center; gap: 12px; }
.range-group input[type=range] { flex: 1; }
.range-value {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--txt-head);
  min-width: 36px;
  text-align: right;
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────
   AS2 ADMIN SELECT (CDN forms.js compliant)
   Replaces native <select> with as2 writable dropdown
   ───────────────────────────────────────────────────────────────── */
.as2-admin {
  position: relative;
  display: inline-block;
  min-width: 180px;
}
.as2-admin .as2-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--r-xs);
  padding: 8px 32px 8px 12px;
  font-family: var(--ff-main);
  font-size: 13px;
  color: var(--txt);
  cursor: pointer;
  transition: border-color .15s;
}
.as2-admin .as2-input:focus,
.as2-admin.is-open .as2-input {
  border-color: var(--primary);
  outline: none;
}
.as2-admin .as2-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--txt-muted);
  pointer-events: none;
  transition: transform .3s var(--ease), color .2s;
}
.as2-admin.is-open .as2-arrow {
  transform: translateY(-50%) rotate(180deg);
  color: var(--primary);
}
.as2-admin .as2-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 100;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--r-xs);
  box-shadow: var(--shadow-md);
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s .25s;
}
.as2-admin.is-open .as2-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s 0s;
}
.as2-admin .as2-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--txt);
  border-radius: var(--r-xs);
  transition: background .12s;
}
.as2-admin .as2-opt:hover { background: rgba(244,95,0,.04); }
.as2-admin .as2-opt.is-selected { background: rgba(244,95,0,.08); color: var(--txt-head); }
.as2-admin .as2-opt-check {
  margin-left: auto;
  width: 12px; height: 12px;
  color: var(--primary);
  opacity: 0;
  transition: opacity .15s;
}
.as2-admin .as2-opt.is-selected .as2-opt-check { opacity: 1; }
.as2-admin .as2-line {
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--primary);
  transition: width .3s var(--ease), left .3s var(--ease);
  pointer-events: none;
}
.as2-admin.is-open .as2-line,
.as2-admin .as2-input:focus ~ .as2-line {
  left: 0;
  width: 100%;
}
.as2-admin .as2-opt.is-focused {
  background: rgba(244,95,0,.06);
  outline: 1px solid var(--primary);
  outline-offset: -1px;
}

/* Membership badge icon preview */
.icon-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  font-size: 18px;
  color: var(--txt);
  transition: .15s;
}
.icon-preview:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Membership user table inside admin */
.membership-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.membership-user-row:last-child { border-bottom: none; }
.membership-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--txt-muted);
  flex-shrink: 0;
}
.membership-user-info { flex: 1; min-width: 0; }
.membership-user-name { font-size: 13px; font-weight: 600; color: var(--txt-head); }
.membership-user-meta {
  font-size: 11px;
  font-family: var(--ff-mono);
  color: var(--txt-muted);
}

/* ═══════════════════════════════════════════════
   SELECT TYPE 1 — FORM INLINE (Luxury Monochrome)
   ═══════════════════════════════════════════════ */
.as1 { position: relative; }
.as1-trigger {
  display: flex; align-items: center; width: 100%; background: transparent;
  border: none; border-bottom: 1px solid var(--border);
  padding: 12px 28px 12px 0; font-family: var(--ff-main); font-size: 16px;
  color: var(--black-1); cursor: pointer; text-align: left; position: relative;
}
.as1-trigger::after {
  content: ''; position: absolute; bottom: -1px; left: 50%; width: 0; height: 2px;
  background: var(--primary); transition: width 0.4s var(--ease), left 0.4s var(--ease);
}
.as1.is-open .as1-trigger::after { left: 0; width: 100%; }
.as1-trigger.is-placeholder { color: transparent; }
.as1-trigger.is-placeholder ~ .apollo-label { top: 12px; font-size: 12px; color: var(--muted); }
.as1.is-open .apollo-label, .as1.has-value .apollo-label { top: -10px; font-size: 10px; color: var(--primary); }
.as1-val { flex: 1; display: flex; align-items: center; gap: 10px; }
.as1-val-icon {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all 0.3s var(--ease); overflow: hidden;
}
.as1-val-icon svg { width: 12px; height: 12px; color: #fff; }
.as1-trigger.is-placeholder .as1-val-icon { width: 0; opacity: 0; }
.as1-val-text { font-weight: 400; }
.as1-arrow {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--muted);
  transition: transform 0.4s var(--ease), color 0.3s; pointer-events: none;
}
.as1.is-open .as1-arrow { transform: translateY(-50%) rotate(180deg); color: var(--primary); }
.as1-drop {
  position: absolute; top: calc(100% + 2px); left: -16px; right: -16px;
  z-index: var(--z-pop); padding: 8px 0; max-height: 300px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.25s var(--ease), transform 0.3s var(--ease), visibility 0s 0.3s;
}
.as1.is-open .as1-drop {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.25s var(--ease), transform 0.3s var(--ease), visibility 0s 0s;
}
.as1-opt {
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  height: 0; overflow: hidden; opacity: 0; cursor: pointer;
  transition: height 0.35s var(--ease), opacity 0.3s, background 0.15s;
}
.as1.is-open .as1-opt {
  padding: 1px 8px; background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid var(--border); border-radius: var(--r); height: 52px; opacity: 1;
}
.as1.is-open .as1-opt:nth-child(1) { transition-delay: 0.02s; }
.as1.is-open .as1-opt:nth-child(2) { transition-delay: 0.06s; }
.as1.is-open .as1-opt:nth-child(3) { transition-delay: 0.10s; }
.as1.is-open .as1-opt:nth-child(4) { transition-delay: 0.14s; }
.as1.is-open .as1-opt:hover { background: rgba(244,95,0,0.04); }
.as1.is-open .as1-opt.is-selected { background: rgba(244,95,0,0.08); }
.as1-opt.is-selected .as1-opt-check { opacity: 1; transform: scale(1); }
.as1-opt-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.as1-opt:hover .as1-opt-icon { transform: scale(1.1); box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.as1-opt-icon svg { width: 14px; height: 14px; color: #fff; }
.as1-opt-text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.as1-opt-name { font-weight: 500; font-size: 14px; color: var(--black-1); line-height: 1.2; }
.as1-opt-hint { font-size: 11px; font-family: var(--ff-mono); color: var(--muted); line-height: 1.2; }
.as1-opt-check {
  width: 16px; height: 16px; color: var(--primary);
  opacity: 0; transform: scale(0.5); transition: opacity 0.25s, transform 0.3s var(--ease); flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   SELECT TYPE 2 — PALETTE WRITABLE (MANDATORY)
   ═══════════════════════════════════════════════ */
.as2 { position: relative; }
.as2-input-full {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--border);
  padding: 12px 40px 12px 0; font-family: var(--ff-main); font-size: 16px;
  color: var(--black-1); border-radius: 0; outline: none;
  transition: border-color 0.4s var(--ease);
}
.as2-input-full::placeholder { color: transparent; }
.as2 .as2-line {
  position: absolute; bottom: 0; left: 50%; width: 0; height: 2px;
  background: var(--primary);
  transition: width 0.4s var(--ease), left 0.4s var(--ease); pointer-events: none;
}
.as2-input-full:focus ~ .as2-line,
.as2.is-open .as2-line { left: 0; width: 100%; }
.as2-input-full:focus,
.as2.is-open .as2-input-full { border-bottom-color: transparent; }
.as2-input-full:focus ~ .apollo-label,
.as2-input-full:not(:placeholder-shown) ~ .apollo-label,
.as2.has-value .apollo-label { top: -10px; font-size: 10px; color: var(--primary); }
.as2-swatch {
  position: absolute; left: 0; bottom: 14px;
  width: 16px; height: 16px; border-radius: 4px;
  pointer-events: none; opacity: 0;
  transform: scale(0.4) rotate(-10deg); transition: all 0.35s var(--ease);
}
.as2.has-value .as2-swatch { opacity: 1; background: transparent; transform: scale(1) rotate(0); }
.as2.has-value .as2-input-full { padding-left: 28px; }
.as2 > .as2-arrow {
  position: absolute; right: 0; bottom: 12px;
  width: 18px; height: 18px; color: var(--muted);
  pointer-events: none; transition: color 0.3s, transform 0.4s var(--ease);
}
.as2.is-open > .as2-arrow { transform: rotate(180deg); color: var(--primary); }
.as2 > .as2-drop {
  position: absolute; top: calc(100% + 2px); left: -12px; right: -12px;
  z-index: 100; max-height: 240px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.25s var(--ease), transform 0.3s var(--ease), visibility 0s 0.3s;
}
.as2.is-open > .as2-drop {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.25s var(--ease), transform 0.3s var(--ease), visibility 0s 0s;
}
.as2 > .as2-drop .as2-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 8px; cursor: pointer; font-size: 14px; color: var(--txt-color);
  transition: background 0.15s, transform 0.2s var(--ease);
  background-color: rgba(255,255,255,0.35);
  backdrop-filter: blur(5px) saturate(200%);
  -webkit-backdrop-filter: blur(5px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.10); border-radius: var(--r);
}
.as2 > .as2-drop .as2-opt:hover { background: rgba(244,95,0,0.04); }
.as2 > .as2-drop .as2-opt:active { transform: scale(0.985); }
.as2 > .as2-drop .as2-opt.is-selected { background: rgba(244,95,0,0.099); }
.as2 > .as2-drop .as2-opt[hidden] { display: none; }
.as2-opt-swatch {
  width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(255,255,255,0.15);
  transition: transform 0.25s var(--ease);
}
.as2 > .as2-drop .as2-opt:hover .as2-opt-swatch { transform: scale(1.18); }
.as2-opt-name { font-weight: 500; color: var(--black-1); }
.as2-opt-desc { color: var(--muted); font-size: 12px; margin-left: 6px; }
.as2-opt-check {
  margin-left: auto; width: 14px; height: 14px; color: var(--primary);
  opacity: 0; transition: opacity 0.2s; flex-shrink: 0;
}
.as2 > .as2-drop .as2-opt.is-selected .as2-opt-check { opacity: 1; }
.as2-empty {
  padding: 16px; text-align: center; color: var(--muted);
  font-family: var(--ff-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.05em; display: none;
}
.as2-empty.is-visible { display: block; }
.as2.is-open > .as2-drop .as2-opt { animation: slideL 0.25s var(--ease) backwards; }
.as2.is-open > .as2-drop .as2-opt:nth-child(1) { animation-delay: 0.02s; }
.as2.is-open > .as2-drop .as2-opt:nth-child(2) { animation-delay: 0.05s; }
.as2.is-open > .as2-drop .as2-opt:nth-child(3) { animation-delay: 0.08s; }
.as2.is-open > .as2-drop .as2-opt:nth-child(4) { animation-delay: 0.11s; }
.as2.is-open > .as2-drop .as2-opt:nth-child(5) { animation-delay: 0.14s; }
@keyframes slideL {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════════
   SELECT TYPE 3 — GLASS PANEL (OPTION COOL)
   ═══════════════════════════════════════════════ */
.as3 { position: relative; }
.as3-trigger {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 16px; font-family: var(--ff-main); font-size: 14px;
  color: var(--black-1); border-radius: 10px; cursor: pointer;
  outline: none; text-align: left; line-height: 1.4;
  transition: border-color 0.25s var(--ease);
  background: transparent !important; color: var(--txt-hover);
}
.as3-trigger:hover { border-color: rgba(0,0,0,0.22); }
.as3.is-open .as3-trigger { border-bottom: 1px solid gray; }
.as3-swatch {
  width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0;
  transition: background 0.3s var(--ease);
}
.as3-label {
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.as3-trigger.is-placeholder .as3-label { color: var(--muted); }
.as3-lbl-name { font-weight: 500; color: var(--black-1); }
.as3-lbl-desc { color: var(--muted); margin-left: 4px; font-size: 13px; }
.as3-chevron {
  width: 18px; height: 18px; flex-shrink: 0; color: var(--muted);
  transition: transform 0.3s var(--ease), color 0.2s;
}
.as3.is-open .as3-chevron { transform: rotate(180deg); color: var(--primary); }
.as3-drop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 100;
  padding: 6px; background-color: rgba(255,255,255,0.15);
  backdrop-filter: blur(5px) saturate(200%);
  -webkit-backdrop-filter: blur(5px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.10); border-radius: var(--r);
  max-height: 280px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98);
  transition: opacity 0.2s var(--ease), transform 0.25s var(--ease), visibility 0s 0.25s;
}
.as3.is-open .as3-drop {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  transition: opacity 0.25s var(--ease), transform 0.3s var(--ease), visibility 0s 0s;
}
.as3-search-wrap { position: sticky; top: 0; z-index: 2; padding: 0px 2px 6px; }
.as3-search {
  width: 100%; padding: 2px 12px 2px 32px;
  font-family: var(--ff-main); font-size: 13px; color: var(--txt-color); outline: none;
  transition: border-color 0.2s var(--ease);
  background-color: rgba(255,255,255,0.15);
  backdrop-filter: blur(5px) saturate(200%);
  -webkit-backdrop-filter: blur(5px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.10); border-radius: var(--r);
}
.as3-search::placeholder { color: var(--muted); }
.as3-search:focus { border-color: var(--primary); }
.as3-search-icon {
  position: absolute; left: 14px; top: 5px;
  width: 14px; height: 14px; color: var(--muted); pointer-events: none;
}
.as3-opt {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background-color: rgba(255,255,255,0.15);
  backdrop-filter: blur(5px) saturate(200%);
  -webkit-backdrop-filter: blur(5px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.10); border-radius: var(--r);
  cursor: pointer; color: var(--txt-color); font-size: 14px;
  transition: background 0.15s var(--ease);
}
.as3-opt:hover, .as3-opt.is-focused { background: rgba(244,95,0,0.04); }
.as3-opt.is-selected { background: rgba(244,95,0,0.099); color: var(--black-1); }
.as3-opt[hidden] { display: none; }
.as3-opt-sw { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.as3-opt-name { font-weight: 500; color: var(--black-1); }
.as3-opt-desc { color: var(--muted); font-size: 13px; margin-left: 4px; }
.as3-opt-check {
  margin-left: auto; width: 16px; height: 16px; color: var(--primary);
  opacity: 0; transition: opacity 0.2s; flex-shrink: 0;
}
.as3-opt.is-selected .as3-opt-check { opacity: 1; }
.as3-empty {
  padding: 20px 12px; text-align: center; color: var(--muted);
  font-size: 12px; font-family: var(--ff-mono); text-transform: uppercase;
  letter-spacing: 0.05em; display: none;
}
.as3-empty.is-visible { display: block; }
.as3.is-open .as3-opt { animation: fadeUp 0.3s var(--ease) backwards; }
.as3.is-open .as3-opt:nth-child(1) { animation-delay: 0.03s; }
.as3.is-open .as3-opt:nth-child(2) { animation-delay: 0.06s; }
.as3.is-open .as3-opt:nth-child(3) { animation-delay: 0.09s; }
.as3.is-open .as3-opt:nth-child(4) { animation-delay: 0.12s; }
.as3.is-open .as3-opt:nth-child(5) { animation-delay: 0.15s; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════
   MEDIA CONTROLLER — Luxury Monochrome
   ═══════════════════════════════════════════════ */
.media-widget {
  width: 100%; max-width: 370px;
  background: var(--surface); border-radius: var(--r);
  padding: var(--s-4); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 20px;
}
.media-cover-art {
  width: 100%; aspect-ratio: 1;
  border-radius: var(--r); overflow: hidden; background: rgba(0,0,0,0.04);
}
.media-cover-art img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease-smooth), filter 0.6s;
  filter: grayscale(100%) contrast(1.05);
}
.media-widget:hover .media-cover-art img { transform: scale(1.04); filter: grayscale(0%) contrast(1); }
.media-info { text-align: center; }
.media-info h3 { font-family: var(--ff-mono); font-size: 1.1rem; margin-bottom: 2px; color: var(--txt-heading); }
.media-info p { color: rgba(0,0,0,0.45); font-weight: 500; font-size: 0.8rem; }
.media-progress {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ff-mono); font-size: 0.65rem; color: var(--txt-color);
  font-variant-numeric: tabular-nums;
}
.progress-bar-container { flex-grow: 1; height: 3px; background: rgba(0,0,0,0.08); border-radius: 2px; position: relative; cursor: pointer; }
.progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 35%; background: var(--black-1); border-radius: 2px; }
.progress-knob {
  position: absolute; left: 35%; top: 50%; transform: translate(-50%,-50%);
  width: 11px; height: 11px; background: var(--bg); border: 3px solid var(--black-1);
  border-radius: 50%; transition: transform 0.15s, opacity 0.15s; opacity: 0;
}
.progress-bar-container:hover .progress-knob { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
.media-controls { display: flex; justify-content: center; align-items: center; gap: var(--s-4); }
.ctrl-btn {
  background: none; border: none; color: rgba(0,0,0,0.25);
  cursor: pointer; transition: color 0.2s; font-size: 20px; display: flex; align-items: center;
}
.ctrl-btn:hover { color: var(--txt-heading); }
.play-pause-btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--black-1); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; transition: transform 0.2s var(--ease-snappy);
}
.play-pause-btn:hover { transform: scale(1.06); }
.play-pause-btn span { font-size: 28px; }

/* ═══════════════════════════════════════════════
   STAT CARDS — Toolkit variant
   ═══════════════════════════════════════════════ */
.stat-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--s-3); }
.stat-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--ff-mono); font-size: 0.7rem; font-weight: 600;
  padding: 3px 8px; border-radius: var(--r-xs); margin-top: var(--s-3); width: fit-content;
}
.trend-up { background: rgba(119,224,0,0.08); color: #3d7a00; }
.trend-down { background: rgba(229,57,53,0.07); color: #b71c1c; }

/* ═══════════════════════════════════════════════
   EVENT LIST — date-box style (Luxury Monochrome)
   ═══════════════════════════════════════════════ */
.event-list-container { width: 100%; }
.event-row {
  display: grid; grid-template-columns: 68px 1fr auto;
  gap: var(--s-4); padding: var(--s-4) 0;
  border-bottom: 1px solid var(--border);
  transition: transform 0.25s var(--ease-snappy); cursor: pointer; align-items: center;
}
.event-row:last-child { border-bottom: none; }
.event-row:hover { transform: translateX(6px); }
.date-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r);
  width: 64px; height: 64px; background: #fff; transition: all 0.35s ease;
}
.event-row:hover .date-box { border-color: var(--border-strong); background: var(--surface); }
.date-day { font-family: var(--ff-mono); font-size: 1.3rem; font-weight: 700; line-height: 1; color: var(--black-4); }
.date-month { font-family: var(--ff-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); margin-top: 3px; font-weight: 500; }
.event-row.featured .date-box { border-color: var(--black-1); background: var(--surface); }
.event-row.featured .date-day { color: var(--black-1); }
.event-details h4 { font-family: var(--ff-main); font-size: 1rem; font-weight: 600; margin-bottom: 3px; color: var(--txt-heading); }
.event-meta { display: flex; gap: 14px; color: rgba(0,0,0,0.35); font-size: 0.8rem; align-items: center; }
.event-meta span { display: flex; align-items: center; gap: 5px; }
.event-meta .material-symbols-rounded { font-size: 1rem; }
.event-action .status {
  font-family: var(--ff-mono); font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 5px 10px; background: var(--surface); border-radius: var(--r-xs);
  color: rgba(0,0,0,0.35); border: 1px solid var(--border);
}
.event-action .status.active { background: var(--surface-hover); color: var(--black-4); border-color: var(--border-hover); }
.event-list-container .event-row.soldout { opacity: 0.35; }

/* ═══════════════════════════════════════════════
   PARAMETRIC EQ — Range Sliders (Luxury Monochrome)
   ═══════════════════════════════════════════════ */
.eq-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 40px; box-shadow: 0 32px 64px -24px rgba(0,0,0,0.06);
  animation: panelIn 0.6s var(--ease); max-width: 100%; overflow-x: auto;
}
@keyframes panelIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.eq-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.eq-title { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; color: var(--black-1); display: flex; align-items: center; gap: 12px; }
.eq-badge {
  font-family: var(--ff-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--surface); border: 1px solid var(--border);
  padding: 6px 14px; border-radius: var(--r-pill); color: rgba(0,0,0,0.45);
}
.eq-board { display: flex; align-items: stretch; gap: 12px; }
.eq-y-axis {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 200px; padding-right: 16px; font-family: var(--ff-mono);
  font-size: 9px; color: rgba(0,0,0,0.35); font-weight: 700; text-align: right; user-select: none;
}
.eq-channel { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.eq-channel.pre-amp { padding-right: 24px; margin-right: 12px; border-right: 1px dashed var(--border); }
.eq-label {
  font-family: var(--ff-mono); font-size: 11px; color: rgba(0,0,0,0.45);
  font-weight: 700; text-align: center; transition: color 0.3s var(--ease); user-select: none;
}
.eq-channel:hover .eq-label { color: var(--black-1); }
.eq-slider-wrapper {
  position: relative; width: 32px; height: 200px;
  display: flex; align-items: center; justify-content: center;
}
.eq-slider-wrapper::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 8px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, var(--border) 0px, var(--border) 1px, transparent 1px, transparent 10%);
  pointer-events: none; z-index: 0;
}
.eq-slider-wrapper::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: rgba(0,0,0,0.18); transform: translateY(-50%); pointer-events: none; z-index: 0;
}
.eq-slider-wrapper input[type=range] {
  width: 200px; height: 32px;
  transform: rotate(-90deg); z-index: 1;
}

/* ═══════════════════════════════════════════════
   PROFILE IDENTITY — Luxury Monochrome
   ═══════════════════════════════════════════════ */
.profile-identity { display: flex; flex-direction: column; line-height: 1.2; }
.profile-identity .name {
  display: flex; align-items: center; gap: 6px;
  font-size: 16.5px; font-weight: 700; color: var(--black-4); margin: 0;
}
.user-membership-badge { display: flex; align-items: center; gap: 3px; }
.user-membership-badge i {
  display: inline-block; width: 15px; height: 15px;
  -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;
  mask-size: contain; mask-position: center; mask-repeat: no-repeat;
}
.icon-shield-check-s {
  background-color: var(--border-strong) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z'/%3E%3C/svg%3E");
}
.profile-identity .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.profile-identity .tag { font-family: var(--ff-mono); font-size: 9px; color: rgba(0,0,0,0.35); text-transform: uppercase; letter-spacing: 0.03em; background: transparent; padding: 2px 8px; border: none !important; }
.profile-identity .handle { font-family: var(--ff-mono); font-size: 11px; color: var(--black-1); margin-top: 3px; }
.post-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 40px 0 24px; }
.post-meta { display: flex; gap: 14px; }
.av-md { width: 48px; height: 48px; border-radius: 50%; background: var(--surface-hover); overflow: hidden; flex-shrink: 0; }
.av-md img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter 0.4s; }
.post-header:hover .av-md img { filter: grayscale(0%); }

/* ═══════════════════════════════════════════════
   LAYOUT UTILITIES — Luxury Monochrome
   ═══════════════════════════════════════════════ */
.apollo-wrapper { max-width: 1400px; margin: 0 auto; padding: var(--s-6) var(--s-4); }
.section { margin-bottom: 100px; padding-bottom: 25px; border-bottom: 1px solid var(--border); }
.section:last-child { border-bottom: none; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 25px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5); }
.flex-col { display: flex; flex-direction: column; gap: var(--s-4); }
.flex-row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.flex-between { display: flex; justify-content: space-between; align-items: center; width: 100%; }

/* ═══════════════════════════════════════════════
   RESPONSIVE — Toolkit additions
   ═══════════════════════════════════════════════ */
@media (pointer: coarse) {
  .as1.is-open .as1-opt { height: 56px; }
  .as2 > .as2-drop .as2-opt { min-height: 44px; }
  .as3-opt { min-height: 44px; padding: 12px; }
  .as3-trigger { padding: 14px 16px; }
  input, select, textarea { font-size: max(16px, 1em); }
  * { -webkit-tap-highlight-color: transparent; }
  a, button, [role="button"], summary, label { touch-action: manipulation; }
  button, [role="button"], a { min-block-size: 44px; }
}