/* Premium Theme (presentation-only). Safe CSS overrides without changing markup or JS. */

/* Typography: Inter as primary */
html, body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

:root {
  /* Neutral surfaces (refined international palette) */
  --surface-0: #090f1a; /* deep navy */
  --surface-1: #0e1525; /* page background */
  --surface-2: #121a2b; /* cards/panels */
  --surface-3: #162036; /* hovers */
  --border-1: #23314f;
  /* Text */
  --text-1: #e6eefb;
  --text-2: #9db0d0;
  /* Brand and semantic (balanced saturation) */
  --brand: #4f9cff; /* azure blue */
  --brand-2: #7aa8ff; /* light brand for gradients */
  --accent-attn: #f59e0b; /* amber for emphasis (better contrast on dark) */
  --info: #6bb8ff;
  --success: #14caa5;
  --warning: #ffb454;
  --danger: #ff6b6b;
  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  /* Elevation */
  --elev-1: 0 8px 20px rgba(3, 8, 20, 0.28);
  --elev-2: 0 14px 34px rgba(3, 8, 20, 0.38);
  --elev-3: 0 20px 48px rgba(3, 8, 20, 0.45);
  /* Motion */
  --t-fast: 120ms;
  --t-med: 200ms;
  --t-slow: 320ms;
}

/* ===== Dashboard P0: Three-column layout and Unboxed KPIs ===== */
/* Main dashboard grid: center content + 360px right rail (becomes single column below 1280px) */
.dashboard-grid { display: grid; gap: 24px; }
/* Two columns from 1025px up (center + 360px right rail). At <=1024px it stacks to one column. */
@media (min-width: 1025px) { .dashboard-grid { grid-template-columns: minmax(0, 1fr) 360px; } }

/* Right rail width is fixed by grid; make its inner stack sticky */
.right-rail { position: sticky; top: 84px; display: grid; gap: 24px; grid-auto-rows: max-content; min-width: 0; max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
/* Prevent grid overflow by long content */
.right-rail * { min-width: 0; }
#unifiedFeedList li { overflow: hidden; }
#unifiedFeedList li .flex-1 p { overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: break-word; }

/* Unbox the right rail sections */
.rail-section { background: transparent; border: 0; }
.rail-title { color: #e5e7eb; font-weight: 600; letter-spacing: .2px; }

/* Light card aesthetic for items */
.rail-section .action-item,
.rail-section .feed-card { background: rgba(18,26,43,.28); border: 1px solid var(--border-1); box-shadow: none; }
.rail-section .action-item:hover,
.rail-section .feed-card:hover { background: rgba(18,26,43,.42); }

/* Chip size and active styling */
.feed-chips .feed-chip { font-size: .8rem; padding: 4px 12px; border-radius: 9999px; border: 1px solid var(--border-1); background: transparent; color: #cbd5e1; }
.feed-chips .feed-chip.active { background: linear-gradient(180deg, #22e6bd, var(--success)); color: white; border-color: transparent; }

/* Unboxed KPI component */
.kpi-grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kpi { display: grid; grid-template-columns: 1fr 44px; align-items: center; column-gap: 8px; padding: 8px 8px; border-radius: 10px; border: 1px solid transparent; background: transparent; overflow: hidden; }
.kpi:hover { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
.kpi > div { display: grid; grid-template-areas: 'label label' 'value value' 'delta delta'; justify-items: center; align-items: center; row-gap: 4px; }
.kpi .kpi-label { font-size: 0.85rem; color: var(--text-2); grid-area: label; text-align: center; }
.kpi .kpi-value { font-size: 2.25rem; font-weight: 700; letter-spacing: .2px; color: var(--text-1); font-variant-numeric: tabular-nums; text-align: center; grid-area: value; }
.kpi .kpi-delta { align-self: center; grid-area: delta; }
.kpi .kpi-icon { width: 36px; height: 36px; opacity: .85; color: var(--brand); justify-self: end; }

/* KPI delta chip */
.kpi-delta { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:9999px; font-size:.75rem; border:1px solid rgba(255,255,255,.12); margin-top:6px; }
.kpi-delta.up { color:#34d399; background:rgba(16,185,129,.14); border-color:rgba(52,211,153,.35); }
.kpi-delta.down { color:#fca5a5; background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); }
.kpi-delta .arrow { font-weight:700; }
.kpi-delta .lbl { opacity:.8; }
/* KPI hover: show a compact panel left of the icon area (visual-only) */
.kpi:hover::after { content: none; }

/* Time filter toolbar */
.time-filter { display:flex; align-items:center; gap:8px; row-gap:6px; flex-wrap:wrap; margin-bottom: 16px; }
.time-btn { padding:6px 10px; border:1px solid var(--border-1); border-radius:9999px; color:var(--text-2); background:transparent; cursor:pointer; white-space: nowrap; transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease; }
.time-btn:hover { background: rgba(18,26,43,.45); color:#c7d6ef; }
.time-btn.active { color:#bfdbfe; border-color: var(--brand); background: rgba(79,156,255,.12); }
.time-custom { display:flex; gap:8px; align-items:center; padding-left:10px; border-left:1px solid var(--border-1); }
.time-custom input[type="date"] { background:#1b263b; color:var(--text-1); border:1px solid var(--border-1); border-radius:8px; padding:6px 8px; min-width: 140px; }

/* Quick actions row */
.quick-actions { display:grid; gap:10px; margin-bottom: 16px; }
@media (min-width: 640px) { .quick-actions { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.quick-action { display:flex; align-items:center; gap:10px; padding:14px 16px; border:1px solid rgba(20,202,165,.28); border-radius:12px; background: rgba(20,202,165,.12); color:var(--text-1); text-decoration:none; }
.quick-action:hover { background: rgba(20,202,165,.18); }
.quick-action svg { width:22px; height:22px; color:var(--success); }

/* Compact cards on right rail */
.compact-card { padding: 1rem !important; }

/* Stacked bar for difficulty balance */
.stacked-bars { width: 100%; display: grid; gap: 12px; }
.stacked-item { }
.stacked-label { display:flex; justify-content: space-between; font-size:.85rem; color: var(--text-2); margin-bottom: 6px; }
.stacked-bar { display:flex; height: 18px; border-radius: 6px; overflow:hidden; border:1px solid var(--border-1); background: rgba(18,26,43,.35); }
.stacked-bar .seg { height: 100%; cursor: pointer; }
.seg.easy { background: linear-gradient(90deg, rgba(16,185,129,.9), rgba(16,185,129,.7)); }
.seg.medium { background: linear-gradient(90deg, rgba(245,158,11,.9), rgba(245,158,11,.7)); }
.seg.hard { background: linear-gradient(90deg, rgba(239,68,68,.9), rgba(239,68,68,.7)); }

/* ===== Right rail visual polish ===== */
.feed-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap: wrap; }
.feed-chips { display:flex; align-items:center; gap:6px; flex-wrap: wrap; }
.time-btn.feed-chip { height: 26px; line-height: 26px; padding: 0 10px; }
/* Chips + search grouped on the right */
.feed-controls { display:flex; align-items:center; gap:10px; flex-wrap: wrap; }
.feed-controls .feed-search { min-width: 160px; max-width: 220px; }

.feed-card { display:grid; grid-template-columns: 34px 1fr 90px; gap:10px; align-items:center; padding:10px; border-radius:10px; background: rgba(55,65,81,.35); border:1px solid var(--border-1); }
.feed-icon { width:28px; height:28px; border-radius:9999px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-1); }
.feed-icon svg { width:16px; height:16px; }
.feed-icon.ai { background: rgba(168,85,247,.16); }
.feed-icon.ocr { background: rgba(34,211,238,.16); }
.feed-icon.exams { background: rgba(59,130,246,.16); }
.feed-icon.tip { background: rgba(245,158,11,.16); }
.feed-icon.news { background: rgba(16,185,129,.16); }
.feed-content { min-width: 0; }
.feed-content .feed-text { color:#e5e7eb; font-size: 0.95rem; line-height: 1.35; margin:0; }
.feed-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right; }
.feed-meta .feed-time { font-size: .70rem; color:#9ca3af; }
.feed-meta .feed-tag { font-size:.70rem; padding:2px 8px; border:1px solid var(--border-1); border-radius:9999px; background:#111827; color:#d1d5db; position: relative; z-index: 1; }
.feed-meta .feed-tag.live { background: rgba(148,163,184,.16); color:#cbd5e1; border-color: rgba(148,163,184,.35); }
.feed-meta .feed-tag.feature { background: rgba(16,185,129,.14); color:#34d399; border-color: rgba(52,211,153,.35); }
.feed-meta .feed-tag.tip { background: rgba(245,158,11,.14); color:#fbbf24; border-color: rgba(245,158,11,.35); }
.feed-meta .feed-tag.update { background: rgba(59,130,246,.14); color:#93c5fd; border-color: rgba(59,130,246,.35); }
/* Prevent icon overlap with tags */
.feed-card .feed-meta { position: relative; padding-left: 6px; }
.feed-card .feed-meta a.feed-tag { margin-left: 0; }

/* Feed group separator */
.feed-separator { display:flex; align-items:center; gap:8px; color:#9ca3af; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; padding:6px 2px; margin-top:6px; }
.feed-separator::before, .feed-separator::after { content:""; flex:1; height:1px; background: rgba(255,255,255,.08); }

/* Exam dropdown visual unification */
#examFilter { background-color: rgba(18,26,43,.35) !important; border:1px solid var(--border-1) !important; color: var(--text-1) !important; border-radius: 10px !important; }
#examFilter:focus { outline: none !important; box-shadow: 0 0 0 2px rgba(79,156,255,0.20); border-color: var(--brand) !important; }

/* Dark dropdown list for selects (match theme) */
#examFilter,
select { appearance: none; -webkit-appearance: none; -moz-appearance: none; }
#examFilter option,
select option { background-color: #0e1525; color: var(--text-1); }
#examFilter option:checked,
select option:checked { background-color: rgba(79,156,255,.20); color: #bfdbfe; }
#examFilter option:hover,
select option:hover { background-color: rgba(79,156,255,.12); }

/* Compact mode for long forms (toggle by setting body[data-density="compact"]) */
[data-density="compact"] .compact-form .p-6 { padding: 12px !important; }
[data-density="compact"] .compact-form .p-8 { padding: 14px !important; }
[data-density="compact"] .compact-form .grid { gap: 8px !important; }
[data-density="compact"] .compact-form label { margin-bottom: 4px !important; font-size: 0.85rem !important; }
[data-density="compact"] .compact-form select,
[data-density="compact"] .compact-form input[type="text"],
[data-density="compact"] .compact-form input[type="number"],
[data-density="compact"] .compact-form textarea { padding: 6px 8px !important; }
[data-density="compact"] .compact-form .quill-editor { min-height: 100px !important; }
[data-density="compact"] .compact-form .btn,
[data-density="compact"] .compact-form button { padding-top: 8px !important; padding-bottom: 8px !important; }

/* Focus mode: emphasize content editors, hide setup */
[data-focus="content"] #setupSection { display: none !important; }
[data-focus="content"] .content-section .quill-editor { min-height: 60vh !important; }
[data-focus="content"] .content-section { scroll-margin-top: 80px; }

/* Fullscreen editor overlay */
.fs-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(3,8,20,.92); display: none; }
.fs-overlay.open { display: block; }
.fs-modal { width: 92vw; max-width: 1100px; margin: 24px auto; border:1px solid var(--border-1); border-radius:12px; background:#0e1525; box-shadow: 0 20px 48px rgba(0,0,0,.45); overflow:hidden; }
.fs-overlay .fs-bar { display:flex; justify-content: space-between; align-items:center; padding:10px 14px; background: #121a2b; border-bottom:1px solid var(--border-1); }
.fs-overlay .fs-title { color: var(--text-1); font-weight: 600; }
.fs-overlay .fs-body { padding: 10px 14px; }
.fs-overlay .quill-editor { height: 40vh !important; min-height: 40vh !important; }
.fs-q-editor .quill-editor { height: 28vh !important; min-height: 28vh !important; }
.fs-s-editor .quill-editor { height: 16vh !important; min-height: 16vh !important; }
.fs-tabs { display:flex; gap:8px; padding:8px 14px; background:#121a2b; border-bottom:1px solid var(--border-1); }
.fs-tab { padding:6px 12px; border:1px solid var(--border-1); border-radius:9999px; color:#cbd5e1; background:transparent; cursor:pointer; }
.fs-tab.active { background: rgba(79,156,255,.18); color:#bfdbfe; border-color: var(--brand); }
/* FS options layout */
.fs-layout { display: grid; grid-template-rows: auto auto auto; gap: 12px; }
.fs-q-editor { background: rgba(18,26,43,.35); border:1px solid var(--border-1); border-radius:10px; padding:8px; }
.fs-options { background: rgba(18,26,43,.35); border:1px solid var(--border-1); border-radius:10px; padding:8px; }
.fs-options #fsA { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.fs-option-row { display:flex; align-items:center; gap:8px; }
.fs-option-row textarea { flex:1; min-height: 64px; background:#1b263b; color:var(--text-1); border:1px solid var(--border-1); border-radius:8px; padding:8px; }
.fs-option-row .radio { width:18px; height:18px; }
.fs-s-editor { background: rgba(18,26,43,.35); border:1px solid var(--border-1); border-radius:10px; padding:8px; }
.fs-actions { display:flex; flex-wrap: wrap; gap:8px; }
.fs-actions .chip-toggle { padding:6px 10px; }

.fs-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.fs-section-head span { color:#cbd5e1; font-weight:600; letter-spacing:.2px; }
.fs-parse { margin-top:10px; }

/* Option row visual cleanup: remove outer light panel */
.option-row { background: transparent !important; border-color: var(--border-1) !important; }
.chip-toggle { padding:6px 12px; border:1px solid var(--border-1); border-radius:9999px; color:#cbd5e1; background:transparent; cursor:pointer; }
.chip-toggle.active { background: rgba(79,156,255,.18); color:#bfdbfe; border-color: var(--brand); }
.fs-bar .fs-inline { display:flex; align-items:center; gap:8px; }
.fs-bar select { background:#0e1525; color:var(--text-1); border:1px solid var(--border-1); border-radius:9999px; padding:6px 10px; }
.fs-bar label { color:#9ca3af; font-size:.85rem; }

/* KPI sparkline */
.kpi-sparkline { margin-top: 6px; height: 18px; width: 100px; }
.kpi-sparkline svg { width: 100%; height: 100%; display:block; }
.kpi-sparkline .line { stroke: #34d399; fill: none; stroke-width: 2; opacity: .9; }
.kpi-sparkline .area { fill: rgba(52,211,153,.18); }

/* Feed search (non-functional style only; no functional change) */
.feed-search { display:flex; align-items:center; gap:8px; border:1px solid var(--border-1); border-radius:10px; padding:6px 8px; background: rgba(18,26,43,.28); }
.feed-search input { background: transparent; border: 0; outline: none; color: var(--text-1); width: 100%; }
.feed-search svg { width:16px; height:16px; color:#9ca3af; }

/* Feed pagination */
.feed-more { display:flex; align-items:center; justify-content:center; padding:8px 10px; border:1px dashed var(--border-1); border-radius: 10px; color:#cbd5e1; background: transparent; cursor:pointer; }
.feed-more:hover { background: rgba(18,26,43,.35); }
/* Heatmap legend swatches (centralized palette) */
.heat-legend { display:inline-flex; align-items:center; gap:8px; }
.heat-legend .label { color:#9ca3af; }
.heat-0 { background: rgba(148,163,184,.18); }
.heat-1 { background: rgba(79,156,255,.22); }
.heat-2 { background: rgba(79,156,255,.42); }
.heat-3 { background: rgba(79,156,255,.65); }
/* Feed empty state */
.feed-empty { color:#9ca3af; text-align:center; padding: 16px 0; }
.feed-empty svg { width: 38px; height: 38px; color:#64748b; margin: 0 auto 6px auto; display:block; }

/* Primary micro-polish */
.hover-lift { transition: transform var(--t-fast) ease, background-color var(--t-fast) ease, box-shadow var(--t-med) ease; }
.hover-lift:hover { transform: translateY(-2px); background-color: rgba(18,26,43,.35); box-shadow: var(--elev-2); }

/* Credits pill for header (aligned with theme brand) */
.credits-pill { display:inline-flex; align-items:center; gap:8px; padding:4px 12px; border-radius:9999px; border:1px solid var(--brand); background: rgba(79,156,255,.14); color:#bfdbfe; font-weight:600; line-height:1; }
.credits-pill .label { opacity:.95; font-weight:600; color:#cfe1ff; }

/* Calendar icon for date inputs (visual only) */
.date-input-wrap { position: relative; }
.date-input-wrap input { padding-right: 28px !important; }
.date-input-wrap .icon { position:absolute; right:8px; top:50%; transform: translateY(-50%); width:16px; height:16px; color:#9ca3af; pointer-events:none; }

/* Quality health tiles text wrapping */
.health-tiles .tile { display:block; min-width: 0; }
.health-tiles .tile .label { color:#9ca3af; font-size:.85rem; display:flex; align-items:center; justify-content:space-between; gap:8px; max-width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.health-tiles .tile .value { color:#e5e7eb; font-weight:700; font-size:1.5rem; }
/* Right rail legibility */
.right-rail .health-tiles .tile { background: rgba(18,26,43,.35); border:1px solid var(--border-1); }
.right-rail .health-tiles .tile .value { font-size: 1.6rem; }
/* Add icon chips and right arrow affordance */
.health-tiles .tile .label::after { content: ''; }
/* Grid density fix in rail */
.right-rail .health-tiles .grid { gap: 10px; }

/* Command Palette (Cmd/Ctrl+K) */
.cmdk-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 60; display: none; }
.cmdk-panel { max-width: 640px; margin: 10vh auto 0; background: #1a243a; border: 1px solid var(--border-1); border-radius: 12px; box-shadow: var(--elev-3); overflow: hidden; }
.cmdk-input { width: 100%; background: #0f172a; color: var(--text-1); border: 1px solid var(--border-1); border-radius: 10px; padding: 10px 12px; outline: none; }
.cmdk-list { max-height: 360px; overflow-y: auto; margin-top: 8px; }
.cmdk-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; color: var(--text-1); cursor: pointer; }
.cmdk-item:hover, .cmdk-item[aria-selected="true"] { background: rgba(18,26,43,.45); }
.cmdk-item .hint { color: #9ca3af; font-size: .8rem; margin-left: 10px; }
.cmdk-kbd { font-size: .75rem; border: 1px solid var(--border-1); padding: 2px 6px; border-radius: 6px; color: #cbd5e1; background: rgba(18,26,43,.35); }

/* Feed search input */
.feed-search input:disabled { opacity: .8; }

/* Action Items alignment */
.action-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border-radius:10px; }
.action-main { display:flex; align-items:flex-start; gap:12px; }
.action-text { min-width:0; }
.action-text .title-row { display:flex; align-items:center; gap:8px; }
.action-text .title { color:#fff; font-weight:600; }
.action-text .title { font-size: 1rem; }
.action-text .badge { font-size:.70rem; padding:2px 8px; border-radius:9999px; background:#111827; color:#e5e7eb; border:1px solid var(--border-1); }
.action-avatar { width:32px; height:32px; border-radius:9999px; background:#111827; border:1px solid var(--border-1); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:600; color:#e5e7eb; }
/* Softer amber background for attention tone */
.action-item.attention { background: rgba(245,158,11,.14); }

/* Base colors and contrast (dark theme) */
body {
  background-color: var(--surface-1);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links */
a { color: #93c5fd; }
a:hover { color: #bfdbfe; }

/* Focus ring for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Elevation and hover polish on common card/panel combinations used in templates */
.bg-gray-800.rounded-lg.shadow-md,
.bg-gray-800.rounded-lg.shadow,
.bg-gray-800.shadow-md,
.panel,
.card {
  background-color: var(--surface-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  transition: transform var(--t-med) ease, box-shadow var(--t-med) ease, background-color var(--t-med) ease;
}

.bg-gray-800.rounded-lg.shadow-md:hover,
.bg-gray-800.rounded-lg.shadow:hover,
.bg-gray-800.shadow-md:hover,
.panel:hover,
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}

/* Dashboard tiles and quick-action tiles */
.dashboard-tile,
.tile,
.quick-action {
  border-radius: var(--radius-md);
  transition: transform var(--t-fast) ease, box-shadow var(--t-med) ease;
}
.dashboard-tile:hover,
.tile:hover,
.quick-action:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--elev-2);
}

/* Creation Hub anchors look neutral; KPI div tiles look unboxed */
a.dashboard-tile {
  background: rgba(18, 26, 43, 0.25) !important;
  background-image: none !important; /* neutralize bright gradients like bg-blue-600 */
  border: 1px solid var(--border-1) !important;
  color: var(--text-1) !important;
  box-shadow: var(--elev-1) !important;
}
a.dashboard-tile:hover { box-shadow: var(--elev-2) !important; }
a.dashboard-tile svg { color: var(--brand) !important; }

.dashboard-tile:not(a) {
  background-color: transparent !important;
  border: 1px solid var(--border-1) !important;
  box-shadow: none !important;
}
.dashboard-tile:not(a) h2 { font-size: 2.25rem !important; line-height: 1.15 !important; }
.dashboard-tile:not(a) svg { opacity: .8; }

/* Sidebar active/hover cues without touching markup */
.sidebar a {
  border-left: 4px solid transparent;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.sidebar a:hover {
  background-color: #1f2937; /* gray-800 */
}
.sidebar a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(59,130,246,0.18), rgba(59,130,246,0));
  border-left-color: var(--brand);
  color: #93c5fd; /* blue-300 */
}
.sidebar a svg { transition: transform var(--t-fast) ease; }
.sidebar a:hover svg { transform: translateX(2px); }

/* Subtle headers with backdrop on sticky bars */
.sticky-header { 
  background: linear-gradient(180deg, rgba(12,18,34,0.65), rgba(12,18,34,0.35));
  backdrop-filter: saturate(140%) blur(2px);
}
.sticky-header.with-shadow {
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  border-bottom: 1px solid var(--border-1);
}

/* Live hub items (list entries) */
.live-hub-panel li {
  transition: background-color var(--t-fast) ease, transform var(--t-fast) ease;
  border-radius: var(--radius-md);
}
.live-hub-panel li:hover { background-color: rgba(55,65,81,.6); transform: translateX(2px); }
.live-hub-panel .text-xs { font-size: 0.8rem !important; }

/* Micro-interaction utilities (can be applied in markup without logic change) */
.ui-lift { transition: transform var(--t-fast) ease, box-shadow var(--t-med) ease, background-color var(--t-med) ease; will-change: transform; }
.ui-lift:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
.ui-icon-move svg { transition: transform var(--t-fast) ease; }
.ui-icon-move:hover svg { transform: translateY(-2px) scale(1.05); }

/* Badges and pills (non-invasive defaults) */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 9999px; font-size: 12px; line-height: 1; }
.badge.info { background: rgba(59,130,246,.18); color: #bfdbfe; }
.badge.warn { background: rgba(245,158,11,.18); color: #fde68a; }
.badge.ok { background: rgba(16,185,129,.18); color: #a7f3d0; }

/* International-grade buttons: smooth gradients and subtle glow */
.bg-blue-600, .bg-blue-700,
.bg-purple-600, .bg-purple-700,
.bg-green-600, .bg-green-700,
.bg-red-600, .bg-red-700,
.bg-orange-600, .bg-orange-700,
.bg-indigo-600, .bg-indigo-700,
.bg-gray-700, .bg-gray-600 {
  background-image: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0) 40%);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.08);
}
.bg-blue-600:hover, .bg-blue-700:hover,
.bg-purple-600:hover, .bg-purple-700:hover,
.bg-green-600:hover, .bg-green-700:hover,
.bg-red-600:hover, .bg-red-700:hover,
.bg-orange-600:hover, .bg-orange-700:hover,
.bg-indigo-600:hover, .bg-indigo-700:hover,
.bg-gray-700:hover, .bg-gray-600:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.10);
}

/* Primary accent buttons (blue) get a premium gradient */
.bg-blue-600, .hover\:bg-blue-700:hover {
  background-color: #2f78ff !important;
  background-image: linear-gradient(180deg, #4f9cff, #2f78ff);
}

/* Warning and success accents tuned for dark surfaces */
.bg-yellow-600, .hover\:bg-yellow-700:hover { background-color: #d79a31 !important; }
.bg-green-600, .hover\:bg-green-700:hover { background-color: #14caa5 !important; }

/* Cards: border and soft inner glow for depth */
.bg-gray-800 { border: 1px solid var(--border-1); }
.bg-gray-800.rounded-lg.shadow-md::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(1200px 300px at 50% -10%, rgba(127,178,255,0.06), rgba(0,0,0,0) 40%);
}

/* Heading hierarchy polish */
.text-3xl.font-bold.text-white { letter-spacing: 0.2px; color: var(--text-1) !important; }
.text-xl.font-semibold.text-white { letter-spacing: 0.15px; color: var(--text-1) !important; }
.text-sm.text-gray-400 { color: var(--text-2) !important; }

/* Unbox dashboard/creation tiles for a lighter feel */
.dashboard-tile { 
  background-color: rgba(18, 26, 43, 0.35) !important;
  border: 1px solid var(--border-1) !important;
  box-shadow: var(--elev-1) !important;
}
.dashboard-tile:hover { box-shadow: var(--elev-2) !important; }
.dashboard-tile svg { color: var(--brand) !important; }

/* Unify older gray cards to subtle, bordered cards */
.bg-gray-700.rounded-lg.p-6 { 
  background-color: rgba(18, 26, 43, 0.35) !important;
  border: 1px solid var(--border-1) !important;
}

/* View Textbook: lighter question cards and subtle answer toggle */
.question-card { 
  background: transparent !important; 
  border: 0 !important; 
  border-bottom: 1px solid var(--border-1) !important; 
  border-radius: 0 !important; 
  padding-bottom: 1rem !important;
}
.answer-toggle { background: transparent !important; border: 0 !important; color: var(--info) !important; padding: 0 !important; }
.answer-toggle:hover { text-decoration: underline; }

/* View Question Textbook — keep filters expanded (no hover collapse) */
body:has(#exportToolbar) .grid > .bg-gray-800.rounded-lg.shadow-md.p-6:first-of-type {
  position: static; top: auto; z-index: auto;
  max-height: none; overflow: visible; cursor: default;
  padding-top: 24px; padding-bottom: 24px;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
}
body:has(#exportToolbar) .grid > .bg-gray-800.rounded-lg.shadow-md.p-6:first-of-type:hover {
  max-height: none; overflow: visible;
}
/* Chips should remain visible */
body:has(#exportToolbar) .grid > .bg-gray-800.rounded-lg.shadow-md.p-6:first-of-type .time-btn.feed-chip { display: inline-flex; }
body:has(#exportToolbar) .grid > .bg-gray-800.rounded-lg.shadow-md.p-6:first-of-type:hover .time-btn.feed-chip { display: inline-flex; }
/* Remove collapsed-header affordance */
body:has(#exportToolbar) .grid > .bg-gray-800.rounded-lg.shadow-md.p-6:first-of-type h2::after {
  content: ' — Edit Filters';
  color: var(--text-2); font-weight: 500; margin-left: 8px; opacity: .85;
}
/* Live counts bar should be visible on View Questions */
/* Restored: do not hide #liveCounts */
/* Smart Lock tooltip (no markup change) */
#viewLockBtn { position: relative; }
#viewLockBtn:hover::after {
  content: 'Lock these filters for your current session';
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: rgba(17,24,39,.95); color: #e5e7eb; font-size: 12px; line-height: 1; white-space: nowrap;
  padding: 6px 8px; border-radius: 6px; box-shadow: var(--elev-1);
}
#viewLockBtn:hover::before {
  content: ''; position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, 6px);
  border: 6px solid transparent; border-top-color: rgba(17,24,39,.95);
}

/* De‑emphasize Find Duplicates as a secondary/ghost action */
button[onclick^="findDuplicates"] {
  background: transparent !important; color: #fca5a5 !important;
  border: 1px solid rgba(239,68,68,.40) !important;
}
button[onclick^="findDuplicates"]:hover { background: rgba(239,68,68,.12) !important; }

/* Card actions (Move/Edit/Similar/Delete) always visible */
.question-card { position: relative; }
.question-card .flex.gap-2:has([onclick^="editQuestion"]) { opacity: 1; pointer-events: auto; }

/* Tighten visual hierarchy: question text stands out, options stay regular */
.question-card h4 { font-weight: 500 !important; letter-spacing: .2px; }

/* Replace verbose toggle labels visually (no JS change) */
.answer-toggle { position: relative; color: transparent !important; }
.answer-toggle::after { content: 'Hide Answer'; color: var(--info); }
.answer-toggle.bg-gray-700::after { content: 'Show Answer'; }

/* Export toolbar becomes contextual (bulk-only) */
#exportToolbar { display: none; }
body:has(.clsCheckboxes:checked) #exportToolbar { display: block; }

/* Question card actions → subtle */
.question-card [onclick^="editQuestion"] {
  background: transparent !important; 
  color: var(--text-1) !important; 
  border: 1px solid var(--border-1) !important; 
}
.question-card [onclick^="editQuestion"]:hover { background: rgba(18,26,43,.35) !important; }
.question-card [onclick^="deleteQuestion"] {
  background: transparent !important; border: 0 !important; 
  color: var(--danger) !important; 
}
.question-card [onclick^="deleteQuestion"]:hover { text-decoration: underline; }

/* Export toolbar: promote primary, quiet secondary */
#exportToolbar button { border: 1px solid var(--border-1); }
#exportToolbar button { background: transparent; color: var(--text-1); }
/* Hide legacy separate export buttons in favor of unified Export */
#exportToolbar #linkPPTView,
#exportToolbar #linkClassplusView,
#exportToolbar #linkAppxView,
#exportToolbar #linkTelegram { display: none !important; }

/* Unified Export dropdown */
#exportMenu { position:absolute; right:0; top:100%; margin-top:8px; background: var(--surface-2); border:1px solid var(--border-1); border-radius: 10px; box-shadow: var(--elev-2); width: 220px; display:none; z-index:50; }
#exportMenu .item { display:flex; align-items:center; gap:8px; padding:10px 12px; color: var(--text-1); cursor:pointer; }
#exportMenu .item:hover { background: rgba(18,26,43,.35); }

/* Global premium button look to match system theme (applies widely but keeps semantics) */
.btn,
button.bg-blue-600,
button.bg-purple-600,
button.bg-green-600,
button.bg-red-600,
button.bg-indigo-600,
button.bg-gray-700,
button.bg-gray-600 {
  background-image: linear-gradient(180deg, #4f9cff, #2f78ff) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.45), inset 0 -1px 0 rgba(255,255,255,.10) !important;
}
.btn:hover,
button.bg-blue-600:hover,
button.bg-purple-600:hover,
button.bg-green-600:hover,
button.bg-red-600:hover,
button.bg-indigo-600:hover,
button.bg-gray-700:hover,
button.bg-gray-600:hover { filter: brightness(1.05) !important; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(2,6,23,.55), inset 0 -1px 0 rgba(255,255,255,.12) !important; }
.btn:active,
button.bg-blue-600:active,
button.bg-purple-600:active,
button.bg-green-600:active,
button.bg-red-600:active,
button.bg-indigo-600:active,
button.bg-gray-700:active,
button.bg-gray-600:active { transform: translateY(0); filter: brightness(.98); box-shadow: 0 8px 18px rgba(2,6,23,.40), inset 0 -1px 0 rgba(255,255,255,.08) !important; }

/* Soft variants */
.btn.secondary, .btn.gray, button.bg-gray-700, button.bg-gray-600 { background-image: linear-gradient(180deg, #1d2740, #0f172a) !important; color:#cfe1ff !important; }
.btn.warn { background-image: linear-gradient(180deg, #ffb454, #b45309) !important; color:#0b1220 !important; }
.btn.success { background-image: linear-gradient(180deg, #34d399, #16a34a) !important; color:#0b1220 !important; }
.btn.destructive { background-image: linear-gradient(180deg, #f87171, #dc2626) !important; color:#fff !important; }

/* Bulk selection sticky action bar */
#bulkActionBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display:none; }
#bulkActionBar .inner { max-width: 1200px; margin: 0 auto; background: rgba(14,21,37,.96); backdrop-filter: saturate(140%) blur(2px); border-top:1px solid var(--border-1); padding: 10px 16px; display:flex; align-items:center; justify-content: space-between; }


/* Tables: sticky headers and row hover */
.overflow-x-auto table thead th { 
  position: sticky; top: 0; z-index: 5; 
  background-color: var(--surface-2); 
  backdrop-filter: saturate(120%) blur(2px);
}
.overflow-x-auto table tbody tr:hover { background-color: rgba(22, 32, 54, 0.55); }

/* Needs Attention → softer amber, reserve red for destructive only */
.bg-red-700\/25 { background-color: rgba(245, 158, 11, 0.20) !important; border: 1px solid rgba(245, 158, 11, 0.45) !important; }

/* Forms: unify input/select/textarea when no Tailwind bg class is present */
input[type="text"], input[type="number"], input[type="password"],
select, textarea {
  background-color: #1b263b;
  color: var(--text-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
}
input::placeholder, textarea::placeholder { color: var(--text-2); }

/* Form labels */
.block.text-sm.font-medium.text-gray-300 { margin-bottom: 6px !important; color: var(--text-2) !important; }

/* Modals (Bootstrap) */
.modal-content.bg-gray-800 { border: 1px solid var(--border-1); box-shadow: var(--elev-3); }
.modal.show .modal-dialog { transform: translateY(0) scale(1); transition: transform var(--t-slow) ease, opacity var(--t-med) ease; }
.modal .modal-dialog { transform: translateY(8px) scale(0.98); }

/* Dashboard KPI skeleton overlay until reveal */
.reveal:not(.revealed) .dashboard-tile { position: relative; color: transparent; }
.reveal:not(.revealed) .dashboard-tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; 
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 100%);
  animation: shimmer 1.1s infinite;
  background-size: 200% 100%;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Simple tooltip using data-tip attribute */
[data-tip] { position: relative; }
[data-tip]::after, [data-tip]::before { pointer-events: none; opacity: 0; transition: opacity var(--t-fast) ease, transform var(--t-fast) ease; }
[data-tip]:hover::after, [data-tip]:focus::after, [data-tip]:hover::before, [data-tip]:focus::before { opacity: 1; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px);
  background: rgba(17,24,39,0.95); color: #e5e7eb; font-size: 12px; line-height: 1;
  padding: 6px 8px; border-radius: 6px; white-space: nowrap; box-shadow: var(--elev-1);
}
[data-tip]::before {
  content: ''; position: absolute; bottom: calc(100% - 4px); left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: rgba(17,24,39,0.95);
}

/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--surface-0); }
*::-webkit-scrollbar-thumb { background: #374151; border-radius: 10px; border: 2px solid var(--surface-0); }
*::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}



/* === Global unboxed look (remove bulky card style across site) === */
/* Light, airy panels instead of heavy filled cards */
.bg-gray-800.rounded-lg.shadow-md,
.bg-gray-800.rounded-lg.shadow,
.bg-gray-800.shadow-md {
  background-color: rgba(18, 26, 43, 0.28) !important;
  border: 1px solid var(--border-1) !important;
  box-shadow: none !important;
}
.bg-gray-800.rounded-lg.shadow-md::after { content: none !important; }

/* Neutralize bright brand tiles in Creation Hub while keeping interactivity */
a.dashboard-tile.bg-blue-600,
a.dashboard-tile.bg-purple-600,
a.dashboard-tile.bg-green-600,
a.dashboard-tile.bg-gray-700,
a.dashboard-tile.bg-orange-600,
a.dashboard-tile.bg-red-600,
a.dashboard-tile.bg-indigo-600 {
  background-color: rgba(18, 26, 43, 0.28) !important;
  background-image: none !important;
  color: var(--text-1) !important;
  border: 1px solid var(--border-1) !important;
}

/* Question Management: convert legacy colorful cards to neutral Creation Hub style */
.bg-gray-700.rounded-lg.p-6.text-center.border,
.bg-gray-700.rounded-lg.p-6.text-center {
  background-color: rgba(18, 26, 43, 0.28) !important;
  border: 1px solid var(--border-1) !important;
  box-shadow: none !important;
}
.bg-gray-700.rounded-lg.p-6.text-center h3 { color: var(--text-1) !important; }
.bg-gray-700.rounded-lg.p-6.text-center .w-20.h-20.rounded-full { background: rgba(18,26,43,.2) !important; border: 1px solid var(--border-1) !important; }
.bg-gray-700.rounded-lg.p-6.text-center a { background: transparent !important; color: var(--text-1) !important; border: 1px solid var(--border-1) !important; }
.bg-gray-700.rounded-lg.p-6.text-center a:hover { background: rgba(18,26,43,.35) !important; }
.bg-gray-700.rounded-lg.p-6 .w-20.h-20.rounded-full,
.bg-gray-700.rounded-lg.p-6 .w-20.h-20.rounded-full.bg-blue-600,
.bg-gray-700.rounded-lg.p-6 .w-20.h-20.rounded-full.bg-green-600,
.bg-gray-700.rounded-lg.p-6 .w-20.h-20.rounded-full.bg-purple-600 {
  background-color: rgba(18, 26, 43, 0.2) !important;
  border: 1px solid var(--border-1) !important;
}
/* Emphasis card variant using amber to avoid blue/purple merge */
.ch-card-emph {
  border-color: rgba(245, 158, 11, .6) !important;
}
.ch-card-emph .emph-chip {
  background: rgba(245, 158, 11, .15) !important;
  color: #f8d089 !important;
  border: 1px solid rgba(245, 158, 11, .4) !important;
}
.bg-gray-700.rounded-lg.p-6 .w-20.h-20.rounded-full svg { color: var(--brand) !important; }

/* Universal button polish for Bootstrap buttons still used on some pages */
.btn { 
  border-radius: var(--radius-md) !important; 
  border: 1px solid rgba(255,255,255,0.06) !important; 
  background-image: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0) 40%) !important; 
  transition: transform var(--t-fast) ease, box-shadow var(--t-med) ease, filter var(--t-fast) ease !important; 
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 22px rgba(0,0,0,.45) !important; }
.btn:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(180deg, var(--brand-2), var(--brand)) !important; color: #fff !important; }
.btn-secondary, .btn-default { background: transparent !important; color: var(--text-1) !important; border-color: var(--border-1) !important; }
.btn-danger { background: var(--danger) !important; color: #fff !important; border-color: transparent !important; }

/* Add Question: stepper-like labels without changing markup */
form.space-y-8 > .bg-gray-700.rounded-lg.p-6 { position: relative; background-color: transparent !important; border: 1px solid transparent !important; box-shadow: none !important; }
form.space-y-8 > .bg-gray-700.rounded-lg.p-6::before {
  position: absolute; top: -10px; left: 12px; content: '';
  display: inline-block; padding: 2px 10px; font-size: 12px; line-height: 1; letter-spacing: .2px;
  background: var(--surface-1); color: var(--text-2); border: 1px solid var(--border-1); border-radius: 9999px;
}
form.space-y-8 > .bg-gray-700.rounded-lg.p-6:nth-of-type(1)::before { content: '1. Setup'; }
form.space-y-8 > .bg-gray-700.rounded-lg.p-6:nth-of-type(2)::before { content: '2. Content'; }
form.space-y-8 > .bg-gray-700.rounded-lg.p-6:nth-of-type(3)::before { content: '3. Answers'; }
form.space-y-8 > .bg-gray-700.rounded-lg.p-6:nth-of-type(4)::before { content: '4. Review'; }

/* Add Question: sticky actions at the bottom of the form */
.bg-gray-800.rounded-lg.shadow-md form.space-y-8 > div:last-child {
  position: sticky; bottom: 0; z-index: 5; 
  background: linear-gradient(180deg, rgba(14,21,37,0), rgba(14,21,37,0.95));
  backdrop-filter: saturate(140%) blur(2px);
  border-top: 1px solid var(--border-1);
}

/* Add Question wrapper: remove heavy container background */
.max-w-4xl .bg-gray-800.rounded-lg.shadow-md { background-color: transparent !important; border: 1px solid var(--border-1) !important; box-shadow: none !important; }

/* Form typography hierarchy */
form.space-y-8 h3.text-lg.font-medium.text-white { color: var(--text-1) !important; font-weight: 600 !important; letter-spacing: .2px; }
form.space-y-8 label.block.text-sm.font-medium.text-gray-300 { color: var(--text-2) !important; font-weight: 500 !important; }
form.space-y-8 .text-gray-400 { color: var(--text-2) !important; font-size: 12px !important; }

/* Unify form control styling in Add Question */
form.space-y-8 select,
form.space-y-8 input[type="text"],
form.space-y-8 input[type="number"],
form.space-y-8 textarea {
  background-color: #1b263b !important;
  border: 1px solid var(--border-1) !important;
  color: var(--text-1) !important;
  border-radius: var(--radius-md) !important;
}
form.space-y-8 select:disabled,
form.space-y-8 input:disabled,
form.space-y-8 textarea:disabled {
  opacity: .7; cursor: not-allowed;
  border-style: dashed !important;
}

/* Answer Options buttons */
#add-option-btn { background: transparent !important; border: 1px solid var(--border-1) !important; color: var(--text-1) !important; }
#add-option-btn:hover { background: rgba(18,26,43,.35) !important; }
.delete-option-btn { background: transparent !important; border: 0 !important; color: var(--danger) !important; }
.delete-option-btn:hover { text-decoration: underline; }

/* Add Question: tighten select + plus button spacing and avoid size clash */
#exam_name, #subject_id { min-width: 0; }
.select-row { display: flex; align-items: center; gap: 8px; }
.select-row .addon-btn { padding: 10px; border-radius: 8px; }
.select-row select { flex: 1 1 auto; }

/* Remove button color: use subtle red on dark surfaces */
.delete-option-btn { color: #fca5a5 !important; background: rgba(239,68,68,0.12) !important; border: 1px solid rgba(239,68,68,0.25) !important; }
.delete-option-btn:hover { background: rgba(239,68,68,0.18) !important; color: #fecaca !important; text-decoration: none !important; }

/* Tables: universal row hover fallback (for pages without overflow wrappers) */
table tbody tr:hover { background-color: rgba(22, 32, 54, 0.55); }

/* Smart Lock chips */
.lock-chips { display: inline-flex; gap: 6px; margin-left: 10px; flex-wrap: wrap; vertical-align: middle; }
.lock-chip { background: rgba(59,130,246,.12); color: #bfdbfe; border: 1px solid var(--border-1); border-radius: 9999px; padding: 2px 8px; font-size: 12px; line-height: 1.2; }
.lock-chip .k { opacity: .8; margin-right: 4px; }


/* === Community Hub refinements === */
.ch-card {
  border: 1px solid var(--border-1) !important;
  box-shadow: none !important;
}
.ch-card .p-4 > p {
  font-size: 1.05rem;
  line-height: 1.7;
}
.ch-card .like-btn svg,
.ch-card .save-btn svg,
.ch-card .share-btn svg {
  width: 20px; height: 20px;
}
.ch-card .like-btn,
.ch-card .save-btn,
.ch-card .share-btn { gap: 6px; }
.ch-card.ring-2.ring-blue-500 {
  background: rgba(79,156,255,0.08) !important;
  border-left: 3px solid var(--brand) !important;
  box-shadow: none !important;
}

/* === Telegram Tests: condensed actions and tabs === */
.tg-tabs { border-bottom: 1px solid var(--border-1); margin-bottom: 12px; }
.tg-tab {
  padding: 10px 12px; font-size: 14px; color: var(--text-2);
  border-bottom: 2px solid transparent; transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.tg-tab:hover { color: #c7d6ef; }
.tg-tab.active { color: #bfdbfe; border-bottom-color: var(--brand); }

[data-tg-section] { display: none; }
[data-tg-section][data-active="true"] { display: block; }

.row-actions-wrap { position: relative; display: inline-block; }
.row-actions-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9999px;
  background: rgba(18,26,43,.35); border: 1px solid var(--border-1);
}
.row-actions-menu {
  position: absolute; right: 0; top: 36px; width: 220px;
  background: var(--surface-2); border: 1px solid var(--border-1); border-radius: 10px; box-shadow: var(--elev-2);
  display: none; z-index: 40; overflow: hidden;
}
.row-actions-menu.open { display: block; }
.row-actions-menu .item {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: var(--text-1); cursor: pointer;
}
.row-actions-menu .item:hover { background: rgba(18,26,43,.35); }

/* === Academy: Pill styling for filters (search/category/sort) === */
#academySearch,
#categoryFilter,
#sortSelect {
  border-radius: 9999px !important;
  background-color: rgba(18, 26, 43, 0.35) !important;
  border: 1px solid var(--border-1) !important;
  color: var(--text-1) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  transition: background-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
#academySearch:hover,
#categoryFilter:hover,
#sortSelect:hover {
  background-color: rgba(18, 26, 43, 0.45) !important;
}
#academySearch:focus,
#categoryFilter:focus,
#sortSelect:focus {
  background-color: rgba(18, 26, 43, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(79, 156, 255, 0.20);
}
#academySearch::placeholder { color: var(--text-2); }