/* ============================================================
   Labyrinth v2 — ElectricBoogaloo Design System
   ============================================================ */

/* --- Design tokens (pick up EB CSS vars, fall back to EB defaults) --- */
:root {
  --v2-bg:        var(--color-bg,            #04040a);
  --v2-surface:   var(--color-surface,       #0d0d19);
  --v2-header:    var(--color-header,        #12121e);
  --v2-bg-bright: var(--color-bg-bright,     #04191b);

  --v2-cyan:      var(--text-primary,        #00fff7);
  --v2-cyan-dim:  var(--text-primary-hover,  #1e9894);
  --v2-cyan-br:   var(--text-primary-bright, #83fffb);
  --v2-magenta:   var(--text-secondary,      #ff3df8);
  --v2-magenta-d: var(--text-secondary-hover,#b11dac);
  /* Muted body text. The legacy #7f7fd5 (HSL 240,50%,66%) was
     ~3.2:1 against the dark navy background — below WCAG AA. Lifted
     to ~5.8:1 while keeping the cool-violet brand hue. */
  --v2-muted:     var(--text-muted,          #b4c1e8);
  --v2-white:     var(--text-white,          #f8faff);

  --v2-blue:      var(--accent-blue,         #00b7ff);
  --v2-green:     var(--accent-green,        #39ff14);
  --v2-red:       var(--accent-red,          #ff1744);
  --v2-amber:     var(--accent-amber,        #ffb347);

  --v2-border:    var(--border-color,        #00f0ff55);

  --v2-font:      var(--font-primary, 'Orbitron', 'IBM Plex Mono', 'Courier New', monospace);
  --v2-font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Aliases used across components */
  --v2-fg:           var(--v2-white);
  --v2-text:         var(--v2-white);
  --v2-text-muted:   var(--v2-muted);
  --v2-accent:       var(--v2-cyan);
  --v2-purple:       var(--v2-magenta);
  --v2-surface-raised: color-mix(in srgb, var(--v2-surface) 80%, var(--v2-cyan) 20%);

  --v2-sidebar-w:           240px;
  --v2-sidebar-w-collapsed:  56px;
  --v2-topbar-h:             56px;

  --v2-glow-cyan:    0 0 6px rgba(0,255,247,.7),  0 0 18px rgba(0,255,247,.25);
  --v2-glow-magenta: 0 0 6px rgba(255,61,248,.7), 0 0 18px rgba(255,61,248,.25);
  --v2-glow-blue:    0 0 6px rgba(0,183,255,.7),  0 0 18px rgba(0,183,255,.25);
  --v2-glow-green:   0 0 6px rgba(57,255,20,.7),  0 0 18px rgba(57,255,20,.2);
}

/* --- Reset & base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; }

body {
  font-family: var(--v2-font-mono);
  background: var(--v2-bg);
  color: var(--v2-cyan);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* scanline overlay */
body::before {
  content: '';
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    rgba(0,0,0,.12) 2px,
    rgba(0,0,0,.12) 4px
  );
}

a { color: var(--v2-blue); text-decoration: none; }
a:hover { color: var(--v2-cyan); text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--v2-font);
  color: var(--v2-cyan);
  letter-spacing: .04em;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--v2-bg); }
::-webkit-scrollbar-thumb { background: var(--v2-magenta-d); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--v2-magenta); }

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width: var(--v2-sidebar-w);
  min-height: 100vh;
  background: var(--v2-surface);
  border-right: 1px solid var(--v2-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width .25s ease;
  position: relative;
  z-index: 100;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--v2-magenta-d) transparent;
}

.sidebar.collapsed { width: var(--v2-sidebar-w-collapsed); }

.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .sidebar-section-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
}
.sidebar.collapsed .sidebar-brand-name {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  margin: 0;
}
.sidebar.collapsed .sidebar-brand {
  padding: .75rem .5rem;
}
.sidebar.collapsed .sidebar-brand-icon {
  width: 28px; height: 28px;
}

/* Brand */
.sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 1.1rem 1rem;
  border-bottom: 1px solid var(--v2-border);
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
  transition: padding .2s;
}

.sidebar-brand-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  stroke: var(--v2-cyan);
  fill: none;
  filter: drop-shadow(0 0 8px var(--v2-cyan));
  transition: width .2s, height .2s;
}

.sidebar-brand-name {
  font-family: var(--v2-font);
  font-size: .72rem;
  font-weight: 700;
  color: var(--v2-cyan);
  text-shadow: var(--v2-glow-cyan);
  letter-spacing: .22em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .2s, max-height .2s, margin .2s;
}
.sidebar-brand-game {
  font-size: .64rem;
  font-weight: 500;
  color: var(--v2-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
  transition: opacity .2s, max-height .2s, margin .2s;
}
.sidebar.collapsed .sidebar-brand-game {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  margin: 0;
}

/* Nav */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: .5rem 0;
}

.sidebar-section-label {
  font-family: var(--v2-font);
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--v2-magenta);
  padding: .75rem 1rem .25rem;
  white-space: nowrap;
  opacity: .85;
  transition: opacity .2s, width .25s;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem 1rem;
  color: var(--v2-muted);
  font-family: var(--v2-font-mono);
  font-size: .8125rem;
  white-space: nowrap;
  transition: color .15s, background .15s, border-color .15s;
  cursor: pointer;
  border-left: 2px solid transparent;
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
}

.sidebar-item:hover {
  color: var(--v2-cyan);
  background: rgba(0,255,247,.05);
  border-left-color: var(--v2-cyan-dim);
}

.sidebar-item.active {
  color: var(--v2-cyan);
  background: rgba(0,255,247,.08);
  border-left-color: var(--v2-cyan);
}

.sidebar-item.active .sidebar-icon {
  filter: drop-shadow(0 0 4px var(--v2-cyan));
}

.sidebar-item.active::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--v2-cyan);
  box-shadow: var(--v2-glow-cyan);
}

.sidebar-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .2s, width .25s;
}

/* Footer */
.sidebar-footer {
  border-top: 1px solid var(--v2-border);
  padding: .5rem 0;
  flex-shrink: 0;
}

.sidebar-toggle-btn {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem 1rem;
  color: var(--v2-muted);
  font-family: var(--v2-font-mono);
  font-size: .8125rem;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  white-space: nowrap;
  transition: color .15s;
}
.sidebar-toggle-btn:hover { color: var(--v2-magenta); }
.sidebar-toggle-btn svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s;
  flex-shrink: 0;
}
.sidebar.collapsed .sidebar-toggle-btn svg { transform: rotate(180deg); }

/* Mobile overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4,4,10,.85);
  z-index: 99;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  /* scanline bg */
  background: var(--v2-bg);
  background-image: repeating-linear-gradient(
    to top,
    var(--v2-bg),
    var(--v2-bg),
    var(--v2-bg-bright),
    var(--v2-bg-bright)
  );
  background-size: 100% 5.5px;
}

.topbar {
  height: var(--v2-topbar-h);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 1.25rem;
  background: var(--v2-header);
  border-bottom: 1px solid var(--v2-border);
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

.topbar-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--v2-muted);
  border-radius: 4px;
  transition: color .15s;
}
.topbar-hamburger:hover { color: var(--v2-cyan); }
.topbar-hamburger svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

.topbar-breadcrumb {
  flex: 1;
  font-family: var(--v2-font);
  font-size: .8rem;
  font-weight: 600;
  color: var(--v2-cyan);
  letter-spacing: .05em;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: .625rem;
}

/* Notification bell */
.notif-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: none;
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--v2-muted);
  transition: color .15s, border-color .15s, box-shadow .15s;
}
.notif-btn:hover {
  color: var(--v2-cyan);
  border-color: var(--v2-cyan-dim);
  box-shadow: 0 0 8px rgba(0,255,247,.15);
}
.notif-btn svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

.notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  background: var(--v2-magenta);
  color: #000;
  font-size: .6rem;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  box-shadow: var(--v2-glow-magenta);
}

/* User chip */
.user-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .625rem .25rem .25rem;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  text-decoration: none !important;
}
.user-chip:hover {
  border-color: var(--v2-cyan-dim);
  box-shadow: 0 0 8px rgba(0,255,247,.12);
}
.user-chip-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--v2-cyan-dim);
  box-shadow: 0 0 6px rgba(0,255,247,.3);
}
.user-chip-handle {
  font-family: var(--v2-font);
  font-size: .7rem;
  font-weight: 600;
  color: var(--v2-cyan);
  letter-spacing: .04em;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-chip-score {
  font-family: var(--v2-font-mono);
  font-size: .7rem;
  color: var(--v2-magenta);
}

/* Notification drawer */
.notif-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 320px;
  height: 100vh;
  background: var(--v2-surface);
  border-left: 1px solid var(--v2-border);
  box-shadow: -4px 0 24px rgba(0,255,247,.06);
  z-index: 200;
  transform: translateX(100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
}
.notif-drawer.open { transform: translateX(0); }
.notif-drawer-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--v2-border);
  font-family: var(--v2-font);
  font-size: .75rem;
  font-weight: 700;
  color: var(--v2-cyan);
  letter-spacing: .08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notif-drawer-body { flex: 1; overflow-y: auto; padding: .5rem; }
.notif-item {
  padding: .625rem .75rem;
  font-size: .8125rem;
  color: var(--v2-muted);
  border-bottom: 1px solid rgba(0,240,255,.08);
  font-family: var(--v2-font-mono);
}
.notif-empty {
  padding: 2rem;
  text-align: center;
  color: var(--v2-muted);
  font-size: .8rem;
  font-family: var(--v2-font);
  letter-spacing: .04em;
}

/* ============================================================
   PAGE CONTENT
   ============================================================ */
.page-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  scrollbar-width: thin;
  scrollbar-color: var(--v2-magenta-d) transparent;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  padding: 1.25rem;
  position: relative;
  transition: border-color .2s, box-shadow .2s;
}
.card:hover {
  border-color: rgba(0,240,255,.35);
  box-shadow: 0 0 20px rgba(0,255,247,.05);
}
.card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 32px; height: 2px;
  background: linear-gradient(90deg, var(--v2-cyan), transparent);
  box-shadow: 0 0 6px rgba(0,255,247,.4);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(0,240,255,.12);
}
.card-title {
  font-family: var(--v2-font);
  font-size: .75rem;
  font-weight: 700;
  color: var(--v2-cyan);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0,255,247,.3);
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.stat-card:hover {
  border-color: rgba(0,255,247,.4);
  box-shadow: 0 0 20px rgba(0,255,247,.08);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--v2-cyan), var(--v2-magenta));
  box-shadow: 0 0 8px rgba(0,255,247,.5);
}
.stat-icon {
  width: 20px; height: 20px;
  stroke: var(--v2-magenta);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px var(--v2-magenta));
  margin-bottom: .25rem;
}
.stat-label {
  font-family: var(--v2-font);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v2-muted);
}
.stat-value {
  font-family: var(--v2-font);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--v2-cyan);
  text-shadow: var(--v2-glow-cyan);
  line-height: 1.1;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .45rem .875rem;
  font-family: var(--v2-font);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  text-decoration: none !important;
  outline: none;
}
.btn svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.btn-primary {
  background: transparent;
  color: var(--v2-cyan);
  border-color: var(--v2-cyan);
  box-shadow: 0 0 8px rgba(0,255,247,.2), inset 0 0 8px rgba(0,255,247,.04);
}
.btn-primary:hover {
  background: rgba(0,255,247,.1);
  box-shadow: var(--v2-glow-cyan), inset 0 0 12px rgba(0,255,247,.08);
  color: var(--v2-cyan-br);
  text-shadow: var(--v2-glow-cyan);
}

.btn-secondary {
  background: transparent;
  color: var(--v2-magenta);
  border-color: var(--v2-magenta);
  box-shadow: 0 0 6px rgba(255,61,248,.15);
}
.btn-secondary:hover {
  background: rgba(255,61,248,.1);
  box-shadow: var(--v2-glow-magenta);
  color: var(--v2-magenta);
}

.btn-ghost {
  background: transparent;
  color: var(--v2-muted);
  border-color: rgba(127,127,213,.35);
}
.btn-ghost:hover {
  color: var(--v2-cyan);
  border-color: var(--v2-cyan-dim);
  background: rgba(0,255,247,.04);
}

.btn-danger {
  background: transparent;
  color: var(--v2-red);
  border-color: var(--v2-red);
}
.btn-danger:hover {
  background: rgba(255,23,68,.1);
  box-shadow: 0 0 8px rgba(255,23,68,.4);
}

.btn-sm { padding: .3rem .625rem; font-size: .65rem; }
.btn-lg { padding: .625rem 1.25rem; font-size: .78rem; }
.btn-full { width: 100%; }

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: 1rem; }

.form-label {
  display: block;
  font-family: var(--v2-font);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v2-cyan);
  margin-bottom: .4rem;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: .55rem .75rem;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(0,240,255,.25);
  border-radius: 4px;
  color: var(--v2-cyan);
  font-family: var(--v2-font-mono);
  font-size: .875rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}
.form-input::placeholder { color: rgba(0,255,247,.2); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--v2-cyan);
  box-shadow: 0 0 0 2px rgba(0,255,247,.12), 0 0 12px rgba(0,255,247,.08);
}
.form-hint {
  display: block;
  font-family: var(--v2-font-mono);
  font-size: .75rem;
  color: var(--v2-muted);
  margin-top: .3rem;
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .75rem 1rem;
  border-radius: 4px;
  font-family: var(--v2-font-mono);
  font-size: .8125rem;
  margin-bottom: .75rem;
  border: 1px solid transparent;
}
.alert svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0; margin-top: 1px;
}
.alert-danger  { background: rgba(255,23,68,.08);  color: #ff6b88; border-color: rgba(255,23,68,.3); }
.alert-warning { background: rgba(255,179,71,.08); color: var(--v2-amber); border-color: rgba(255,179,71,.3); }
.alert-info    { background: rgba(0,183,255,.08);  color: var(--v2-blue);  border-color: rgba(0,183,255,.3); }
.alert-success { background: rgba(57,255,20,.08);  color: var(--v2-green); border-color: rgba(57,255,20,.3); }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .15rem .45rem;
  font-family: var(--v2-font);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 3px;
  border: 1px solid transparent;
}
.badge-cyan    { color: var(--v2-cyan);    border-color: rgba(0,255,247,.4);   background: rgba(0,255,247,.08); }
.badge-magenta { color: var(--v2-magenta); border-color: rgba(255,61,248,.4);  background: rgba(255,61,248,.08); }
.badge-green   { color: var(--v2-green);   border-color: rgba(57,255,20,.4);   background: rgba(57,255,20,.08); }
.badge-red     { color: var(--v2-red);     border-color: rgba(255,23,68,.4);   background: rgba(255,23,68,.08); }
.badge-amber   { color: var(--v2-amber);   border-color: rgba(255,179,71,.4);  background: rgba(255,179,71,.08); }
.badge-muted   { color: var(--v2-muted);   border-color: rgba(127,127,213,.3); background: rgba(127,127,213,.06); }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress {
  height: 6px;
  background: rgba(0,255,247,.06);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(0,240,255,.1);
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--v2-cyan), var(--v2-blue));
  box-shadow: 0 0 8px rgba(0,255,247,.5);
  border-radius: 3px;
  transition: width .6s ease;
  min-width: 2px;
}

/* ============================================================
   DIVIDER
   ============================================================ */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--v2-border), transparent);
  margin: .75rem 0;
}

/* ============================================================
   AUTH LAYOUT
   ============================================================ */
.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--v2-bg);
  background-image: repeating-linear-gradient(
    to top,
    var(--v2-bg),
    var(--v2-bg),
    var(--v2-bg-bright),
    var(--v2-bg-bright)
  );
  background-size: 100% 5.5px;
  position: relative;
  z-index: 1;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: rgba(13,13,25,.92);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  padding: 2.5rem 2rem;
  box-shadow:
    0 0 40px rgba(0,255,247,.07),
    0 0 80px rgba(255,61,248,.04);
  position: relative;
  backdrop-filter: blur(12px);
}
/* corner bracket decoration */
.auth-card::before, .auth-card::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border-style: solid;
  pointer-events: none;
}
.auth-card::before {
  top: -1px; left: -1px;
  border-width: 2px 0 0 2px;
  border-color: var(--v2-cyan);
  box-shadow: -2px -2px 8px rgba(0,255,247,.35);
}
.auth-card::after {
  bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0;
  border-color: var(--v2-magenta);
  box-shadow: 2px 2px 8px rgba(255,61,248,.35);
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2rem;
}
.auth-brand-icon {
  width: 48px; height: 48px;
  stroke: var(--v2-cyan);
  fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 10px var(--v2-cyan));
}
.auth-brand-name {
  font-family: var(--v2-font);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--v2-cyan);
  text-shadow: var(--v2-glow-cyan);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.auth-title {
  font-family: var(--v2-font);
  font-size: .95rem;
  font-weight: 700;
  color: var(--v2-cyan);
  letter-spacing: .06em;
  text-align: center;
  margin-bottom: .25rem;
}
.auth-subtitle {
  font-family: var(--v2-font-mono);
  font-size: .8rem;
  color: var(--v2-muted);
  text-align: center;
  margin-bottom: 1.5rem;
}
.auth-links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}
.auth-link {
  font-family: var(--v2-font-mono);
  font-size: .75rem;
  color: var(--v2-blue);
  transition: color .15s, text-shadow .15s;
}
.auth-link:hover {
  color: var(--v2-cyan);
  text-shadow: var(--v2-glow-cyan);
}

/* ============================================================
   TOASTS
   ============================================================ */
#v2-toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}
.toast {
  padding: .7rem 1rem;
  border-radius: 4px;
  font-family: var(--v2-font-mono);
  font-size: .8125rem;
  pointer-events: auto;
  max-width: 320px;
  border: 1px solid transparent;
  animation: toastIn .25s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(1rem); }
  to   { opacity: 1; transform: translateX(0); }
}
.toast-info    { background: rgba(0,183,255,.12);  color: var(--v2-blue);    border-color: rgba(0,183,255,.35);  box-shadow: 0 0 12px rgba(0,183,255,.2); }
.toast-success { background: rgba(57,255,20,.1);   color: var(--v2-green);   border-color: rgba(57,255,20,.35);  box-shadow: 0 0 12px rgba(57,255,20,.15); }
.toast-warning { background: rgba(255,179,71,.1);  color: var(--v2-amber);   border-color: rgba(255,179,71,.35); box-shadow: 0 0 12px rgba(255,179,71,.15); }
.toast-error   { background: rgba(255,23,68,.1);   color: var(--v2-red);     border-color: rgba(255,23,68,.35);  box-shadow: 0 0 12px rgba(255,23,68,.15); }

/* ============================================================
   CANVAS / EB ANIMATION LAYER
   ============================================================ */
body > canvas#c, canvas#c {
  position: fixed !important;
  top: 0; left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0;
  pointer-events: none;
}
.app-shell, .auth-body { position: relative; z-index: 1; }

body:has(canvas#c) .auth-card {
  background: rgba(4,4,10,.9);
  backdrop-filter: blur(18px);
  box-shadow:
    0 0 40px rgba(0,255,247,.12),
    0 0 80px rgba(255,61,248,.06),
    inset 0 0 40px rgba(0,0,0,.4);
}

/* ============================================================
   UTILITY
   ============================================================ */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.grid { display: grid; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.text-xs { font-size: .75rem; }
.text-sm { font-size: .875rem; }
.text-muted    { color: var(--v2-muted); }
.text-cyan     { color: var(--v2-cyan); }
.text-magenta  { color: var(--v2-magenta); }
.text-green    { color: var(--v2-green); }
.text-red      { color: var(--v2-red); }
.font-mono     { font-family: var(--v2-font-mono); }
.font-orbitron { font-family: var(--v2-font); }
.glow-cyan     { text-shadow: var(--v2-glow-cyan); }
.glow-magenta  { text-shadow: var(--v2-glow-magenta); }
.w-full        { width: 100%; }
.ml-auto       { margin-left: auto; }
.truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.hidden { display: none; }
.block  { display: block; }

/* ============================================================
   CONFIGURATION PAGE
   ============================================================ */
.cfg-card { padding: 0; overflow: hidden; }
.cfg-card .card-header { padding: 1rem 1.25rem; }

.cfg-section-icon {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle; margin-right: .35rem;
}

.cfg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.25rem;
  border-top: 1px solid rgba(0,240,255,.06);
  flex-wrap: wrap;
}
.cfg-row:hover { background: rgba(0,255,247,.02); }

.cfg-field { flex: 1; min-width: 180px; }
.cfg-hint {
  font-family: var(--v2-font-mono);
  font-size: .72rem;
  color: var(--v2-muted);
  margin-top: .2rem;
  line-height: 1.5;
}

.cfg-control { flex-shrink: 0; display: flex; align-items: center; }
.cfg-input { width: 220px; }
@media (max-width: 600px) { .cfg-input { width: 100%; } }

/* Exercise mode radio toggle */
.cfg-mode-toggle { display: flex; gap: .5rem; }
.cfg-mode-opt { display: flex; cursor: pointer; }
.cfg-mode-opt input[type="radio"] { display: none; }
.cfg-mode-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  font-size: .78rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  color: var(--v2-muted);
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
}
.cfg-mode-label svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.cfg-mode-opt input[type="radio"]:checked + .cfg-mode-label {
  background: rgba(103,58,183,.2);
  border-color: rgba(103,58,183,.55);
  color: var(--v2-purple);
}

/* Toggle switch */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  cursor: pointer;
  user-select: none;
}
.toggle input[type="checkbox"] { display: none; }
.toggle-track {
  width: 40px; height: 22px;
  border-radius: 11px;
  background: rgba(127,127,213,.2);
  border: 1px solid rgba(127,127,213,.35);
  position: relative;
  transition: background .2s, border-color .2s, box-shadow .2s;
  flex-shrink: 0;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--v2-muted);
  transition: transform .2s, background .2s, box-shadow .2s;
}
.toggle input:checked + .toggle-track {
  background: rgba(0,255,247,.15);
  border-color: var(--v2-cyan);
  box-shadow: 0 0 8px rgba(0,255,247,.25);
}
.toggle input:checked + .toggle-track::after {
  transform: translateX(18px);
  background: var(--v2-cyan);
  box-shadow: 0 0 6px rgba(0,255,247,.7);
}
.toggle-label {
  font-family: var(--v2-font-mono);
  font-size: .78rem;
  color: var(--v2-muted);
  transition: color .2s;
  min-width: 70px;
}
.toggle input:checked ~ .toggle-label { color: var(--v2-cyan); }

/* ============================================================
   MISSIONS LIST
   ============================================================ */
.missions-level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .875rem;
  padding-bottom: .625rem;
  border-bottom: 1px solid rgba(0,240,255,.12);
}
.level-name {
  font-size: .95rem;
  margin: 0;
}
.level-lock-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.level-locked {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  background: rgba(127,127,213,.05);
  border: 1px solid rgba(127,127,213,.2);
  border-radius: 6px;
  font-family: var(--v2-font-mono);
  font-size: .8125rem;
  color: var(--v2-muted);
}
.level-locked-icon {
  width: 20px; height: 20px;
  stroke: var(--v2-muted);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.box-card {
  display: flex;
  flex-direction: column;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none !important;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  position: relative;
}
.box-card:hover {
  border-color: rgba(0,255,247,.4);
  box-shadow: 0 0 20px rgba(0,255,247,.08);
  transform: translateY(-2px);
}
.box-card-complete {
  border-color: rgba(57,255,20,.3);
}
.box-card-complete:hover {
  border-color: rgba(57,255,20,.55);
  box-shadow: 0 0 20px rgba(57,255,20,.08);
}
.box-card-glow-complete {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--v2-green), transparent);
  box-shadow: 0 0 6px rgba(57,255,20,.5);
}
.box-avatar-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: rgba(0,0,0,.4);
}
.box-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85) brightness(.9);
  transition: filter .2s;
}
.box-card:hover .box-avatar {
  filter: saturate(1) brightness(1);
}
.box-complete-badge {
  position: absolute;
  top: .5rem; right: .5rem;
  width: 22px; height: 22px;
  background: var(--v2-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(57,255,20,.6);
}
.box-complete-badge svg {
  width: 12px; height: 12px;
  stroke: #000;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.box-card-body {
  padding: .75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.box-card-name {
  font-family: var(--v2-font);
  font-size: .72rem;
  font-weight: 700;
  color: var(--v2-cyan);
  letter-spacing: .04em;
  line-height: 1.3;
}
.box-card-meta {
  font-family: var(--v2-font-mono);
  font-size: .7rem;
  color: var(--v2-magenta);
}
.box-card-os {
  font-family: var(--v2-font-mono);
  font-size: .7rem;
  color: var(--v2-muted);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.os-icon {
  width: 12px; height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.box-card-progress {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding-top: .5rem;
}
.progress-bar-green {
  background: linear-gradient(90deg, var(--v2-green), rgba(57,255,20,.6));
  box-shadow: 0 0 8px rgba(57,255,20,.4);
}

/* ============================================================
   BOX DETAIL
   ============================================================ */
.box-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.box-detail-avatar {
  width: 80px; height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--v2-border);
  flex-shrink: 0;
}
.box-detail-info { flex: 1; min-width: 0; }
.box-detail-title {
  font-size: 1.1rem;
  margin: 0 0 .25rem;
}
.box-description {
  font-family: var(--v2-font-mono);
  font-size: .8125rem;
  color: var(--v2-muted);
  line-height: 1.7;
  padding-top: .75rem;
  border-top: 1px solid rgba(0,240,255,.1);
  white-space: pre-wrap;
}

/* Flag table */
.flag-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--v2-font-mono);
  font-size: .8rem;
}
.flag-table thead tr {
  border-bottom: 1px solid var(--v2-border);
}
.flag-table th {
  font-family: var(--v2-font);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--v2-muted);
  padding: .5rem .75rem;
  text-align: left;
}
.flag-table th.center { text-align: center; }
.flag-table td {
  padding: .625rem .75rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0,240,255,.06);
  color: var(--v2-muted);
}
.flag-table .center { text-align: center; }
.flag-row { transition: background .15s; }
.flag-row:hover { background: rgba(0,255,247,.03); }
.flag-captured { background: rgba(57,255,20,.03); }
.flag-maxed { background: rgba(127,127,213,.03); opacity: .75; }
.flag-status-bar { width: 4px; padding: 0 !important; }
.flag-status-success { background: var(--v2-green); }
.flag-status-gray { background: var(--v2-muted); }
.flag-num { font-family: var(--v2-font); font-size: .65rem; color: var(--v2-muted); width: 28px; }
.flag-name { font-family: var(--v2-font); font-size: .72rem; font-weight: 700; color: var(--v2-cyan); min-width: 80px; }
.flag-desc { max-width: 360px; color: var(--v2-muted); font-size: .78rem; line-height: 1.5; }
.flag-desc-text { display: block; }
.flag-choices { margin-top: .25rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.flag-choice-item {
  display: inline-block;
  padding: .15rem .4rem;
  border: 1px solid rgba(0,240,255,.2);
  border-radius: 3px;
  font-size: .7rem;
  color: var(--v2-muted);
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4,4,10,.85);
  backdrop-filter: blur(4px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-box {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 0 40px rgba(0,255,247,.08), 0 0 80px rgba(255,61,248,.04);
  position: relative;
  animation: modalIn .2s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--v2-border);
}
.modal-title {
  font-family: var(--v2-font);
  font-size: .75rem;
  font-weight: 700;
  color: var(--v2-cyan);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0,255,247,.3);
}
.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--v2-muted);
  padding: 2px;
  transition: color .15s;
  display: flex;
}
.modal-close:hover { color: var(--v2-red); }
.modal-close svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round;
}
.modal-body {
  padding: 1.25rem;
}
.flag-choice-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* [x-cloak] hides Alpine elements before init */
[x-cloak] { display: none !important; }

/* ============================================================
   MATRIX / KANBAN
   ============================================================ */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.kanban-col {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  padding: .75rem;
  transition: border-color .15s;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.kanban-col.drop-active {
  border-color: var(--v2-cyan);
  box-shadow: 0 0 0 1px var(--v2-cyan) inset, var(--v2-glow-cyan);
}

.kanban-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .25rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--v2-border);
}
.kanban-col-title {
  font-family: var(--v2-font);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--v2-cyan);
  text-transform: uppercase;
}
.kanban-col-badge {
  background: rgba(0,255,247,.12);
  color: var(--v2-cyan);
  border: 1px solid var(--v2-border);
  border-radius: 99px;
  font-size: .65rem;
  font-family: var(--v2-font);
  padding: 1px 8px;
  min-width: 22px;
  text-align: center;
}

.kanban-empty-drop {
  flex: 1;
  min-height: 60px;
  border: 2px dashed var(--v2-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v2-muted);
  font-size: .7rem;
  letter-spacing: .05em;
  transition: border-color .15s, color .15s;
}
.kanban-empty-drop.drop-highlight {
  border-color: var(--v2-cyan);
  color: var(--v2-cyan);
}

/* Per-queue add button (in column header) */
.kanban-add-btn {
  background: none;
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  padding: 3px 5px;
  cursor: pointer;
  color: var(--v2-muted);
  line-height: 0;
  transition: color .12s, border-color .12s, background .12s;
}
.kanban-add-btn:hover { color: var(--v2-cyan); border-color: var(--v2-cyan); background: rgba(0,255,247,.07); }
.kanban-add-btn svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none;
  stroke-width: 2.5; stroke-linecap: round;
}

/* User-group label inside a column */
.kanban-user-group { display: flex; flex-direction: column; gap: .35rem; }
.kanban-user-label {
  font-size: .6rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  margin-top: .2rem;
  font-family: var(--v2-font);
}
.kanban-user-label-all  { color: var(--v2-cyan);    background: rgba(0,255,247,.07);  border-left: 2px solid var(--v2-cyan);    padding-left: 6px; }
.kanban-user-label-user { color: var(--v2-magenta); background: rgba(255,61,248,.07); border-left: 2px solid var(--v2-magenta); padding-left: 6px; }

/* Matrix card */
.matrix-card {
  position: relative;
  cursor: grab;
  user-select: none;
}
.matrix-card.dragging {
  opacity: .4;
  cursor: grabbing;
}
.matrix-card:active { cursor: grabbing; }

/* ALL-user card: cyan accent */
.matrix-card-inner {
  background: var(--v2-header);
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  padding: .6rem .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: border-color .15s, box-shadow .15s;
  border-left: 3px solid transparent;
}
.matrix-card-inner:hover {
  border-color: rgba(0,255,247,.5);
  box-shadow: 0 0 8px rgba(0,255,247,.1);
}

/* User-specific card: magenta left accent + tinted background */
.matrix-card-user .matrix-card-inner {
  background: rgba(255,61,248,.06);
  border-color: rgba(255,61,248,.25);
  border-left-color: var(--v2-magenta);
}
.matrix-card-user .matrix-card-inner:hover {
  border-color: rgba(255,61,248,.6);
  box-shadow: 0 0 8px rgba(255,61,248,.15);
}

.matrix-card-drag {
  flex-shrink: 0;
  color: var(--v2-muted);
  cursor: grab;
  line-height: 0;
}
.matrix-card-drag svg {
  width: 14px; height: 14px;
  fill: currentColor;
}

.matrix-card-body { flex: 1; min-width: 0; }

.matrix-card-box {
  font-family: var(--v2-font);
  font-size: .7rem;
  color: var(--v2-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: .3rem;
}

.matrix-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.matrix-badge {
  font-size: .6rem;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--v2-border);
  background: rgba(0,255,247,.06);
  color: var(--v2-cyan-dim);
  letter-spacing: .04em;
  font-family: var(--v2-font-mono);
}
.matrix-badge-group { color: var(--v2-magenta); background: rgba(255,61,248,.06); border-color: rgba(255,61,248,.25); }
.matrix-badge-flags { color: var(--v2-green);   background: rgba(57,255,20,.06);  border-color: rgba(57,255,20,.25);  }
.matrix-badge-rush  { color: #ffb86b;           background: rgba(255,180,80,.10); border-color: rgba(255,180,80,.45); }

.matrix-card-rush {
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(255,255,255,.08);
  padding: 3px;
  cursor: pointer;
  color: var(--v2-muted);
  line-height: 0;
  border-radius: 6px;
  transition: color .12s, background .12s, border-color .12s, box-shadow .12s;
}
.matrix-card-rush:hover { color: #ffb86b; border-color: rgba(255,180,80,.4); }
.matrix-card-rush-on {
  color: #ffb86b;
  background: rgba(255,180,80,.14);
  border-color: rgba(255,180,80,.55);
  box-shadow: 0 0 8px rgba(255,180,80,.3);
}
.matrix-card-rush svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round;
}

.matrix-card-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--v2-muted);
  line-height: 0;
  border-radius: 3px;
  transition: color .12s, background .12s;
}
.matrix-card-remove:hover { color: var(--v2-red); background: rgba(255,23,68,.12); }
.matrix-card-remove svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round;
}

/* Drop position indicator */
.drop-indicator {
  height: 2px;
  margin: 2px 0;
  background: var(--v2-cyan);
  border-radius: 2px;
  box-shadow: var(--v2-glow-cyan);
}

/* ── Add-item modal ─────────────────────────────────────── */
.modal-overlay-tall {
  align-items: center;
  padding: 1rem;
}

.mx-add-modal {
  max-width: 660px;
  width: 100%;
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
}
/* Header never scrolls */
.mx-add-modal .modal-header { flex-shrink: 0; }
/* Body scrolls; min-height:0 is required to let a flex child shrink & scroll */
.mx-add-modal .modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,255,247,.2) transparent;
}
.mx-add-modal .modal-body::-webkit-scrollbar { width: 4px; }
.mx-add-modal .modal-body::-webkit-scrollbar-thumb { background: rgba(0,255,247,.2); border-radius: 2px; }
/* Actions row anchored below the scrollable body */
.mx-add-modal .mx-actions {
  flex-shrink: 0;
  border-top: 1px solid var(--v2-border);
  padding: .9rem 1.25rem;
  margin: 0;
}

.mx-field { margin-bottom: 1.1rem; }

.mx-label {
  font-family: var(--v2-font);
  font-size: .65rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--v2-cyan);
  margin-bottom: .45rem;
}
.mx-sub {
  font-family: var(--v2-font-mono);
  text-transform: none;
  letter-spacing: 0;
  font-size: .65rem;
  color: var(--v2-muted);
}

/* Queue pill buttons */
.mx-pills { display: flex; gap: .45rem; flex-wrap: wrap; }
.mx-pill {
  font-family: var(--v2-font);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .32rem .9rem;
  border-radius: 99px;
  border: 1px solid var(--v2-border);
  background: transparent;
  color: var(--v2-muted);
  cursor: pointer;
  transition: all .15s;
}
.mx-pill:hover { border-color: var(--v2-cyan); color: var(--v2-cyan); background: rgba(0,255,247,.06); }
.mx-pill-on {
  background: rgba(0,255,247,.13);
  border-color: var(--v2-cyan);
  color: var(--v2-cyan);
  box-shadow: 0 0 10px rgba(0,255,247,.2);
}

/* Search combo (input + scrollable list) */
.mx-combo {
  border: 1px solid var(--v2-border);
  border-radius: 7px;
  overflow: hidden;
  background: rgba(4,4,10,.85);
  transition: border-color .15s;
}
.mx-combo:focus-within { border-color: rgba(0,255,247,.5); }

.mx-search-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--v2-border);
}
.mx-search-icon {
  flex-shrink: 0;
  width: 14px; height: 14px;
  stroke: var(--v2-muted); fill: none;
  stroke-width: 2; stroke-linecap: round;
}
.mx-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--v2-white);
  font-family: var(--v2-font-mono);
  font-size: .8rem;
}
.mx-search-input::placeholder { color: var(--v2-muted); }

.mx-clear {
  background: none; border: none; padding: 0;
  cursor: pointer; color: var(--v2-muted); line-height: 0;
  transition: color .12s;
}
.mx-clear:hover { color: var(--v2-red); }
.mx-clear svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; }

/* Scrollable option list */
.mx-list {
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,255,247,.2) transparent;
}
.mx-list::-webkit-scrollbar { width: 4px; }
.mx-list::-webkit-scrollbar-track { background: transparent; }
.mx-list::-webkit-scrollbar-thumb { background: rgba(0,255,247,.2); border-radius: 2px; }

.mx-opt {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; text-align: left;
  padding: .42rem .75rem;
  background: transparent; border: none;
  cursor: pointer;
  font-family: var(--v2-font-mono); font-size: .78rem;
  color: var(--v2-muted);
  transition: background .1s, color .1s;
}
.mx-opt:hover { background: rgba(0,255,247,.05); color: var(--v2-white); }
.mx-opt-on { background: rgba(0,255,247,.1) !important; color: var(--v2-cyan) !important; }

/* ALL USERS item */
.mx-opt-all {
  color: var(--v2-cyan-dim);
  font-style: italic;
  border-bottom: 1px solid var(--v2-border);
}

/* Checkmark icon */
.mx-check {
  flex-shrink: 0;
  width: 12px; height: 12px;
  stroke: currentColor; fill: none;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
}
.mx-opt-on .mx-check { opacity: 1; }

.mx-empty {
  padding: .55rem .75rem;
  color: var(--v2-muted);
  font-family: var(--v2-font-mono); font-size: .75rem; font-style: italic;
}

/* Selection chips shown below combo */
.mx-selection {
  margin-top: .4rem;
  display: inline-flex; align-items: center;
  font-family: var(--v2-font-mono); font-size: .72rem;
  padding: 2px 10px;
  border-radius: 99px;
}
.mx-selection-box  { background: rgba(0,255,247,.1);  border: 1px solid rgba(0,255,247,.3);  color: var(--v2-cyan);    }
.mx-selection-user { background: rgba(255,61,248,.1); border: 1px solid rgba(255,61,248,.3); color: var(--v2-magenta); }

/* Segmented control (max flag group) */
.mx-seg {
  display: inline-flex;
  border: 1px solid var(--v2-border);
  border-radius: 7px;
  overflow: hidden;
}
.mx-seg-btn {
  min-width: 56px;
  padding: .4rem 0;
  border: none;
  border-right: 1px solid var(--v2-border);
  background: transparent;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.mx-seg-btn:last-child { border-right: none; }
.mx-seg-btn:hover { background: rgba(0,255,247,.07); }
.mx-seg-on { background: rgba(0,255,247,.15); box-shadow: inset 0 0 8px rgba(0,255,247,.1); }
.mx-seg-num {
  font-family: var(--v2-font);
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--v2-muted);
  transition: color .15s;
}
.mx-seg-on .mx-seg-num { color: var(--v2-cyan); text-shadow: 0 0 8px rgba(0,255,247,.5); }

/* Modal footer (base rule — specific override in .mx-add-modal .mx-actions above) */
.mx-actions {
  display: flex; gap: .75rem; justify-content: flex-end;
}

/* Toast notification */
.mx-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  padding: .65rem 1.1rem;
  border-radius: 6px;
  font-size: .8rem;
  font-family: var(--v2-font-mono);
  border: 1px solid var(--v2-border);
  pointer-events: none;
}
.mx-toast.toast-ok  { background: rgba(57,255,20,.1);  border-color: var(--v2-green);   color: var(--v2-green);   }
.mx-toast.toast-err { background: rgba(255,23,68,.1);  border-color: var(--v2-red);     color: var(--v2-red);     }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 200;
    width: var(--v2-sidebar-w) !important;
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-overlay { display: block; }
  .page-content { padding: 1rem; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .auth-card { padding: 2rem 1.25rem; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   BOX ADMIN PAGE  (bx-*)
   ============================================================ */

.bx-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--v2-bg);
}

/* ── Toolbar ──────────────────────────────────────────────── */
.bx-toolbar {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--v2-border);
  background: var(--v2-surface);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.bx-search-wrap {
  flex: 1;
  min-width: 220px;
  position: relative;
  display: flex;
  align-items: center;
}
.bx-search-icon {
  position: absolute;
  left: .625rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--v2-cyan-dim);
  pointer-events: none;
  width: 15px; height: 15px;
  flex-shrink: 0;
}
.bx-search {
  width: 100%;
  height: 2rem;
  padding: 0 .75rem 0 2.1rem;
  line-height: 2rem;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(0,240,255,.2);
  border-radius: 4px;
  color: var(--v2-cyan);
  font-family: var(--v2-font-mono);
  font-size: .84rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.bx-search:focus {
  border-color: var(--v2-cyan);
  box-shadow: 0 0 0 2px rgba(0,255,247,.1), 0 0 10px rgba(0,255,247,.06);
}
.bx-search::placeholder { color: rgba(0,255,247,.22); }
.bx-search-clear {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--v2-muted);
  display: flex;
  padding: 3px;
  border-radius: 3px;
  transition: color .15s;
}
.bx-search-clear:hover { color: var(--v2-cyan); }

.bx-filter-sel {
  padding: 0 1.6rem 0 .55rem;
  height: 2rem;
  line-height: 2rem;
  background: rgba(0,0,0,.35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300fff7' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .4rem center;
  border: 1px solid rgba(0,240,255,.18);
  border-radius: 4px;
  color: var(--v2-cyan);
  font-family: var(--v2-font-mono);
  font-size: .75rem;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color .15s;
  vertical-align: middle;
}
.bx-filter-sel:focus { border-color: var(--v2-cyan); }
.bx-filter-sel option { background: #0d0d19; color: var(--v2-cyan); }

.bx-count {
  font-family: var(--v2-font-mono);
  font-size: .7rem;
  color: var(--v2-muted);
  white-space: nowrap;
  padding: 0 .2rem;
  letter-spacing: .02em;
}
.bx-new-btn { display: flex; align-items: center; gap: .35rem; white-space: nowrap; }

/* ── View toggle ─────────────────────────────────────── */
.bx-view-toggle {
  display: flex;
  gap: 2px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--v2-border);
  border-radius: 5px;
  padding: 2px;
}
.bx-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  background: none;
  border: none;
  border-radius: 3px;
  color: var(--v2-text-muted);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.bx-view-btn:hover { background: rgba(255,255,255,.07); color: var(--v2-white); }
.bx-view-btn-active { background: rgba(0,229,255,.12) !important; color: var(--v2-cyan) !important; }

.bx-tab-switcher {
  display: flex;
  align-items: center;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(0,255,247,.15);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}
.bx-tab-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.45);
  font-family: var(--v2-font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .2rem .65rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.bx-tab-btn:hover { color: rgba(255,255,255,.8); }
.bx-tab-btn-active { background: rgba(0,255,247,.12) !important; color: var(--v2-cyan) !important; }

/* ── Body ─────────────────────────────────────────────────── */
.bx-body {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* ── Table wrap ───────────────────────────────────────────── */
.bx-table-wrap {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,255,247,.14) transparent;
}

.bx-empty {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .875rem;
  padding: 4rem 2rem;
  color: var(--v2-muted);
  font-family: var(--v2-font-mono);
  font-size: .84rem;
  text-align: center;
}

/* ── Table ────────────────────────────────────────────────── */
.bx-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--v2-font-mono);
  font-size: .8rem;
}
.bx-table thead tr {
  border-bottom: 1px solid var(--v2-border);
}
.bx-table th {
  padding: .55rem 1rem;
  text-align: left;
  font-family: var(--v2-font);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v2-muted);
  white-space: nowrap;
  background: var(--v2-surface);
  position: sticky;
  top: 0;
  z-index: 2;
}
.bx-row {
  border-bottom: 1px solid rgba(0,240,255,.07);
  cursor: pointer;
  transition: background .1s;
}
.bx-row:hover       { background: rgba(0,255,247,.04); }
.bx-row-active      { background: rgba(0,255,247,.07) !important; }
.bx-row td {
  padding: .55rem 1rem;
  vertical-align: middle;
  color: var(--v2-white);
}

/* Name cell */
.bx-name-cell {
  display: flex !important;
  align-items: center;
  gap: .4rem;
  min-width: 130px;
}
.bx-name-text { color: var(--v2-cyan); }
.bx-name-link { text-decoration: none; }
.bx-name-link:hover { text-decoration: underline; text-decoration-color: rgba(0,229,255,.4); }
.bx-lock-icon { color: var(--v2-amber); flex-shrink: 0; opacity: .75; }
.bx-cat-tag {
  font-size: .68rem;
  padding: .12rem .42rem;
  border-radius: 3px;
  background: rgba(127,127,213,.18);
  border: 1px solid rgba(127,127,213,.45);
  color: rgba(225,225,255,.9);
  white-space: nowrap;
  flex-shrink: 0;
}
.bx-corp-cell {
  color: rgba(248,250,255,.82) !important;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bx-num-cell {
  text-align: right;
  color: rgba(248,250,255,.85) !important;
  font-variant-numeric: tabular-nums;
}
.bx-actions-cell {
  text-align: right;
  white-space: nowrap;
  padding-right: .75rem !important;
}

/* Level badge */
.bx-level-badge {
  display: inline-block;
  font-family: var(--v2-font);
  font-size: .58rem;
  font-weight: 700;
  padding: .14rem .42rem;
  border-radius: 3px;
  border: 1px solid rgba(0,183,255,.38);
  color: var(--v2-blue);
  background: rgba(0,183,255,.07);
  white-space: nowrap;
  letter-spacing: .04em;
}

/* OS badges */
.bx-os-badge {
  display: inline-block;
  font-size: .64rem;
  padding: .11rem .38rem;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.bx-os-linux   { color: var(--v2-green);   border-color: rgba(57,255,20,.32);   background: rgba(57,255,20,.06); }
.bx-os-windows { color: var(--v2-blue);    border-color: rgba(0,183,255,.32);   background: rgba(0,183,255,.06); }
.bx-os-mac     { color: var(--v2-muted);   border-color: rgba(127,127,213,.32); background: rgba(127,127,213,.06); }
.bx-os-bsd     { color: var(--v2-amber);   border-color: rgba(255,179,71,.32);  background: rgba(255,179,71,.06); }
.bx-os-mobile  { color: var(--v2-cyan);    border-color: rgba(0,255,247,.25);   background: rgba(0,255,247,.05); }
.bx-os-other   { color: rgba(248,250,255,.4); border-color: rgba(248,250,255,.14); }

/* Difficulty badges */
.bx-diff-badge {
  display: inline-block;
  font-size: .64rem;
  font-weight: 600;
  padding: .11rem .38rem;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.bx-diff-easy   { color: var(--v2-green);   border-color: rgba(57,255,20,.35);   background: rgba(57,255,20,.06); }
.bx-diff-med    { color: var(--v2-amber);   border-color: rgba(255,179,71,.35);  background: rgba(255,179,71,.06); }
.bx-diff-hard   { color: var(--v2-magenta); border-color: rgba(255,61,248,.35);  background: rgba(255,61,248,.06); }
.bx-diff-insane { color: var(--v2-red);     border-color: rgba(255,23,68,.38);   background: rgba(255,23,68,.07); }
.bx-diff-other  { color: rgba(248,250,255,.4); border-color: rgba(248,250,255,.14); }

/* Flag count */
.bx-flag-count {
  display: inline-block;
  min-width: 18px;
  text-align: center;
  font-size: .68rem;
  color: var(--v2-muted);
  font-family: var(--v2-font);
}

/* Row action buttons */
.bx-action-btn {
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--v2-muted);
  padding: .28rem .35rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  transition: color .15s, border-color .15s, background .15s;
}
.bx-action-btn:hover {
  color: var(--v2-cyan);
  border-color: rgba(0,255,247,.22);
  background: rgba(0,255,247,.05);
}
.bx-action-btn.bx-action-danger:hover {
  color: var(--v2-red);
  border-color: rgba(255,23,68,.28);
  background: rgba(255,23,68,.06);
}

/* ── Drawer ───────────────────────────────────────────────── */
.bx-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4,4,10,.55);
  z-index: 149;
}

.bx-drawer {
  position: fixed;
  top: var(--v2-topbar-h);
  right: 0;
  bottom: 0;
  width: 480px;
  background: var(--v2-surface);
  border-left: 1px solid var(--v2-border);
  display: flex;
  flex-direction: column;
  z-index: 150;
  box-shadow: -8px 0 32px rgba(0,0,0,.55);
}
.bx-drawer-anim    { transition: transform .25s cubic-bezier(.4,0,.2,1) !important; }
.bx-drawer-offscreen { transform: translateX(100%) !important; }
.bx-drawer-inner {
  display: contents;
}

.bx-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--v2-border);
  flex-shrink: 0;
  background: rgba(0,0,0,.22);
}
.bx-drawer-mode {
  font-family: var(--v2-font);
  font-size: .52rem;
  letter-spacing: .16em;
  color: var(--v2-cyan-dim);
  font-weight: 700;
  margin-bottom: .2rem;
}
.bx-drawer-title {
  font-family: var(--v2-font);
  font-size: .82rem;
  font-weight: 700;
  color: var(--v2-cyan);
  text-shadow: 0 0 8px rgba(0,255,247,.28);
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.125rem 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,255,247,.14) transparent;
}

/* Form sections */
.bx-form-section    { margin-bottom: 1.4rem; }
.bx-form-section-label {
  font-family: var(--v2-font);
  font-size: .52rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--v2-cyan-dim);
  font-weight: 700;
  margin-bottom: .8rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid rgba(0,240,255,.1);
}
.bx-form-row   { margin-bottom: .8rem; }
.bx-form-label {
  display: block;
  font-family: var(--v2-font);
  font-size: .56rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(0,255,247,.65);
  margin-bottom: .3rem;
}
.bx-req { color: var(--v2-magenta); }

.bx-form-input,
.bx-form-select,
.bx-form-textarea {
  width: 100%;
  padding: .42rem .68rem;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(0,240,255,.18);
  border-radius: 4px;
  color: var(--v2-cyan);
  font-family: var(--v2-font-mono);
  font-size: .81rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}
.bx-form-input::placeholder,
.bx-form-textarea::placeholder { color: rgba(0,255,247,.18); }
.bx-form-input:focus,
.bx-form-select:focus,
.bx-form-textarea:focus {
  border-color: var(--v2-cyan);
  box-shadow: 0 0 0 2px rgba(0,255,247,.1);
}
.bx-form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300fff7' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  padding-right: 1.75rem;
  cursor: pointer;
}
.bx-form-select option { background: #0d0d19; color: var(--v2-cyan); }
.bx-form-textarea { resize: vertical; min-height: 76px; line-height: 1.55; }

.bx-form-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
}

/* Radio group */
.bx-radio-group { display: flex; flex-direction: column; gap: .35rem; }
.bx-radio-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  padding: .45rem .65rem;
  border-radius: 4px;
  border: 1px solid rgba(0,240,255,.14);
  background: rgba(0,0,0,.28);
  transition: border-color .15s, background .15s;
  font-size: .79rem;
  color: rgba(248,250,255,.8);
}
.bx-radio-label:has(input:checked) {
  border-color: rgba(0,255,247,.38);
  background: rgba(0,255,247,.05);
  color: var(--v2-cyan);
}
.bx-radio-label input[type="radio"] {
  accent-color: var(--v2-cyan);
  flex-shrink: 0;
  cursor: pointer;
}
.bx-radio-name { font-weight: 600; }
.bx-radio-hint {
  font-size: .63rem;
  color: var(--v2-muted);
  margin-left: auto;
  text-align: right;
}

/* Form error */
.bx-form-error {
  padding: .45rem .7rem;
  background: rgba(255,23,68,.09);
  border: 1px solid rgba(255,23,68,.28);
  border-radius: 4px;
  color: var(--v2-red);
  font-size: .77rem;
  margin-bottom: .875rem;
}
.bx-form-error-foot { margin: 0 0 .5rem; }

/* Drawer footer */
.bx-drawer-footer {
  flex-shrink: 0;
  padding: .8rem 1.25rem;
  border-top: 1px solid var(--v2-border);
  background: rgba(0,0,0,.15);
}
.bx-drawer-actions {
  display: flex;
  justify-content: flex-end;
  gap: .55rem;
}

/* ── Delete modal ─────────────────────────────────────────── */
.bx-del-modal { max-width: 420px; }
.bx-del-body {
  padding: 1.25rem;
  font-family: var(--v2-font-mono);
  font-size: .84rem;
  color: var(--v2-white);
  line-height: 1.75;
}
.bx-del-body strong { color: var(--v2-cyan); }
.bx-del-warn {
  margin-top: .5rem;
  font-size: .72rem;
  color: rgba(255,23,68,.8);
}
.bx-del-footer {
  display: flex;
  justify-content: flex-end;
  gap: .55rem;
  padding: .8rem 1.25rem;
  border-top: 1px solid var(--v2-border);
}

/* ── Table thumbnail ──────────────────────────────────────────── */
.bx-thumb-cell {
  width: 40px;
  padding: 4px 0 4px 8px !important;
}
.bx-thumb {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  border: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.bx-thumb-ph {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Tile grid ────────────────────────────────────────────────── */
.bx-tile-wrap {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,255,247,.14) transparent;
}
.bx-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  justify-content: start;
  gap: 1rem;
  padding: 1rem;
  align-content: start;
}

/* Grouped tile view */
.bx-tile-groups { display: flex; flex-direction: column; gap: .25rem; padding: 0; }
.bx-tile-group  { padding: 0 .25rem 1rem; }
.bx-tile-group-header {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: 1rem 1rem .5rem;
  border-bottom: 1px solid var(--v2-border);
  margin: 0 .25rem;
}
.bx-tile-group-eyebrow {
  font-family: var(--v2-font-mono);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--v2-cyan);
  text-transform: uppercase;
}
.bx-tile-group-label {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--v2-text);
  letter-spacing: .02em;
}
.bx-tile-group-count {
  font-family: var(--v2-font-mono);
  font-size: .7rem;
  color: var(--v2-text-muted);
}
.bx-tile-group .bx-tile-grid { padding-top: .85rem; padding-bottom: .25rem; }

/* ──────────────────────────────────────────────────────────────
   Hierarchical catalog view — Subject ▸ Topic ▸ Boxes.
   Designed to read like a course catalog: confident subject headlines,
   subtle topic dividers, densely packed tiles so the page reads as
   "we have a LOT of content".
   ────────────────────────────────────────────────────────────── */
.bx-catalog {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: .5rem 0 1.5rem;
}

.bx-cat-subject {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.bx-cat-subj-header {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: 1.1rem 1.2rem 1rem;
  margin: 0 .25rem;
  background:
    linear-gradient(90deg,
      rgba(0,229,255,.10) 0%,
      rgba(127,63,191,.08) 45%,
      rgba(13,13,25,0) 100%);
  border-left: 3px solid var(--v2-cyan);
  border-radius: 0 8px 8px 0;
  position: relative;
  overflow: hidden;
}
.bx-cat-subj-header::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 40%;
  background: radial-gradient(
    ellipse at right center,
    rgba(0,229,255,.06) 0%,
    transparent 70%);
  pointer-events: none;
}
.bx-cat-subj-body { flex: 1; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.bx-cat-subj-eyebrow {
  font-family: var(--v2-font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--v2-cyan);
  text-transform: uppercase;
}
.bx-cat-subj-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--v2-fg);
}
.bx-cat-subj-stats {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  flex-shrink: 0;
  font-family: var(--v2-font-mono);
}
.bx-cat-stat-num {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--v2-cyan);
  letter-spacing: .02em;
}
.bx-cat-stat-lbl {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--v2-text-muted);
  margin-right: .35rem;
}
.bx-cat-stat-divider {
  width: 1px;
  align-self: stretch;
  margin: .15rem .35rem .15rem .15rem;
  background: rgba(255,255,255,.12);
}

.bx-cat-topic {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: 0 .5rem;
}
.bx-cat-topic-header {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .65rem .75rem .15rem;
}
.bx-cat-topic-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--v2-magenta);
  box-shadow: 0 0 6px rgba(255,61,248,.5);
  transform: translateY(1px);
  flex-shrink: 0;
}
.bx-cat-topic-eyebrow {
  font-family: var(--v2-font-mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--v2-magenta);
  text-transform: uppercase;
}
.bx-cat-topic-title {
  margin: 0;
  flex: 1;
  font-size: .95rem;
  font-weight: 600;
  color: var(--v2-fg);
  letter-spacing: .01em;
}
.bx-cat-topic-count {
  font-family: var(--v2-font-mono);
  font-size: .68rem;
  color: var(--v2-text-muted);
}

/* Catalog tile grid — middle ground between dense ops list and
   showroom poster. ~280px keeps avatars prominent without losing the
   "lots of boxes" feel; about 4 per row at 1200px. */
.bx-tile-grid-dense {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .85rem;
  padding: .35rem .75rem 1.1rem;
}
.bx-tile-grid-dense .bx-tile-name      { font-size: .88rem; }
.bx-tile-grid-dense .bx-tile-flagcount { font-size: .7rem; }
.bx-tile-grid-dense .bx-tile-footer    { padding: .6rem .75rem .7rem; gap: .35rem; }

/* Card */
.bx-tile-card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, transform .12s, box-shadow .15s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bx-tile-card:hover {
  border-color: rgba(0,229,255,.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
}
.bx-tile-active {
  border-color: var(--v2-cyan) !important;
  box-shadow: 0 0 0 1px var(--v2-cyan) !important;
}

/* Cover image — matches the canonical box-avatar aspect (500x250 = 2:1)
   so uploaded artwork renders without distortion. The legacy
   `height: 150px` collapsed at certain widths and didn't track the
   avatar's native aspect; aspect-ratio fixes both. */
.bx-tile-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  background: rgba(0,0,0,.4);
  overflow: hidden;
  flex-shrink: 0;
}
.bx-tile-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .22s;
}
.bx-tile-card:hover .bx-tile-cover-img { transform: scale(1.06); }
.bx-tile-cover-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px,
    transparent 1px, transparent 10px
  );
}

/* Top-right badges on cover */
.bx-tile-top-badges {
  position: absolute;
  top: 7px;
  right: 7px;
  display: flex;
  gap: 4px;
  align-items: center;
}
.bx-tile-lock-badge {
  background: rgba(0,0,0,.7);
  border-radius: 3px;
  padding: 3px 4px;
  color: var(--v2-text-muted);
  display: flex;
  align-items: center;
}

/* Hover overlay with actions */
.bx-tile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  opacity: 0;
  transition: opacity .15s;
}
.bx-tile-card:hover .bx-tile-overlay { opacity: 1; }
.bx-tile-overlay-btn {
  font-family: var(--v2-font-mono);
  font-size: .72rem;
  font-weight: 600;
  color: var(--v2-cyan);
  text-decoration: none;
  padding: .3rem .7rem;
  border: 1px solid rgba(0,229,255,.5);
  border-radius: 5px;
  background: rgba(0,229,255,.1);
  backdrop-filter: blur(2px);
  transition: background .12s;
}
.bx-tile-overlay-btn:hover { background: rgba(0,229,255,.22); }
.bx-tile-overlay-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 5px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(2px);
  color: var(--v2-white);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.bx-tile-overlay-icon:hover { background: rgba(255,255,255,.2); }
.bx-tile-overlay-del { border-color: rgba(255,82,82,.35); }
.bx-tile-overlay-del:hover { background: rgba(255,82,82,.25); border-color: rgba(255,82,82,.6); }

/* Footer */
.bx-tile-footer {
  padding: .55rem .7rem .6rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.bx-tile-name {
  font-weight: 600;
  font-size: .82rem;
  color: var(--v2-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bx-tile-sub {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
}
.bx-os-badge-xs, .bx-diff-badge-xs {
  font-size: .6rem !important;
  padding: 1px 5px !important;
}
.bx-tile-flagcount {
  font-family: var(--v2-font-mono);
  font-size: .68rem;
  color: rgba(225,235,255,.78);
  margin-left: auto;
}

/* ── Avatar picker in drawer ──────────────────────────────────── */
.bx-avatar-row {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-bottom: .75rem;
}
.bx-avatar-preview-wrap {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--v2-border);
  background: rgba(0,0,0,.25);
}
.bx-avatar-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bx-avatar-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bx-avatar-btns { display: flex; flex-direction: column; gap: .4rem; }
.bx-avatar-remove-btn { color: #ff5252 !important; border-color: rgba(255,82,82,.3) !important; }
.bx-avatar-presets { margin-top: .25rem; }
.bx-avatar-presets-label {
  font-size: .67rem;
  font-family: var(--v2-font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--v2-text-muted);
  margin-bottom: .4rem;
}
.bx-avatar-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px;
}
.bx-avatar-preset-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .12s, opacity .12s;
  opacity: .75;
  display: block;
}
.bx-avatar-preset-img:hover { opacity: 1; border-color: rgba(0,229,255,.4); }
.bx-avatar-preset-active { border-color: var(--v2-cyan) !important; opacity: 1 !important; }


/* ═══════════════════════════════════════════════════════════════════
   BOX DETAIL PAGE  (bd- prefix)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────── */
.bd-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--v2-bg);
  overflow: hidden;
}

/* ── Header bar ─────────────────────────────────────────────────── */
.bd-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1.25rem;
  border-bottom: 1px solid var(--v2-border);
  background: var(--v2-surface);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.bd-back {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--v2-font-mono);
  font-size: .72rem;
  color: var(--v2-cyan);
  text-decoration: none;
  opacity: .75;
  transition: opacity .15s;
  white-space: nowrap;
}
.bd-back:hover { opacity: 1; }
.bd-header-name {
  font-family: var(--v2-font-display);
  font-size: .9rem;
  font-weight: 700;
  color: var(--v2-white);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bd-header-meta {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.bd-meta-pill {
  font-family: var(--v2-font-mono);
  font-size: .68rem;
  color: var(--v2-text-muted);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--v2-border);
  border-radius: 3px;
  padding: .15rem .5rem;
  white-space: nowrap;
}

/* ── Body split ─────────────────────────────────────────────────── */
.bd-body {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* ── Left panel ─────────────────────────────────────────────────── */
.bd-list-panel {
  width: 300px;
  min-width: 220px;
  max-width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--v2-border);
  background: var(--v2-surface);
  overflow: hidden;
}
.bd-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--v2-border);
  flex-shrink: 0;
}
.bd-list-header span {
  font-family: var(--v2-font-display);
  font-size: .7rem;
  font-weight: 600;
  color: var(--v2-text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.bd-add-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--v2-font-mono);
  font-size: .7rem;
  color: var(--v2-cyan);
  background: rgba(0,229,255,.07);
  border: 1px solid rgba(0,229,255,.25);
  border-radius: 4px;
  padding: .25rem .6rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.bd-add-btn:hover {
  background: rgba(0,229,255,.15);
  border-color: rgba(0,229,255,.5);
}
.bd-list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: .5rem;
}
.bd-list-empty {
  font-family: var(--v2-font-mono);
  font-size: .72rem;
  color: var(--v2-text-muted);
  text-align: center;
  padding: 2rem 1rem;
  line-height: 1.8;
  opacity: .6;
}

/* ── Group section ──────────────────────────────────────────────── */
.bd-group {
  margin-bottom: .75rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.05);
  padding: .25rem .25rem .4rem;
  min-height: 4rem;
  transition: background .15s;
}
.bd-group-dragover {
  background: rgba(0,229,255,.06);
  outline: 1px dashed rgba(0,229,255,.35);
}
.bd-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .3rem .5rem .4rem;
  font-family: var(--v2-font-display);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 5px 5px 0 0;
  border-left: 3px solid transparent;
}
.bd-group-label-1 { color: #f5c030; border-left-color: #f5c030; background: rgba(245,192,48,.06); }
.bd-group-label-2 { color: #00fff7; border-left-color: #00fff7; background: rgba(0,255,247,.05); }
.bd-group-label-3 { color: #bf7fff; border-left-color: #bf7fff; background: rgba(191,127,255,.05); }
.bd-group-count {
  background: rgba(255,255,255,.1);
  border-radius: 10px;
  padding: .05rem .4rem;
  font-size: .6rem;
}

/* Group segmented control (form) */
.bd-group-seg { display: flex; gap: .3rem; }
.bd-group-seg-btn {
  flex: 1; padding: .3rem .5rem; border-radius: 6px; cursor: pointer;
  font-size: .72rem; font-weight: 600; font-family: var(--v2-font-mono);
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  color: var(--v2-muted); transition: all .15s;
}
.bd-group-seg-btn:hover { background: rgba(255,255,255,.08); color: var(--v2-text); }
.bd-group-seg-1.active { border-color: #f5c030; background: rgba(245,192,48,.12); color: #f5c030; }
.bd-group-seg-2.active { border-color: #00fff7; background: rgba(0,255,247,.1);  color: #00fff7; }
.bd-group-seg-3.active { border-color: #bf7fff; background: rgba(191,127,255,.1); color: #bf7fff; }

/* ── Flag card ──────────────────────────────────────────────────── */
.bd-flag-card {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .6rem;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
  margin-bottom: .25rem;
  user-select: none;
}
.bd-flag-card:hover {
  background: rgba(255,255,255,.05);
  border-color: var(--v2-border);
}
.bd-flag-active {
  background: rgba(0,229,255,.08) !important;
  border-color: rgba(0,229,255,.3) !important;
}
.bd-flag-ai {
  border-left: 2px solid rgba(236,64,122,.5);
}
.bd-flag-dragging {
  opacity: .4;
}
.bd-flag-drop-above {
  border-top: 2px solid var(--v2-cyan) !important;
  margin-top: -1px;
}
.bd-flag-drop-below {
  border-bottom: 2px solid var(--v2-cyan) !important;
  margin-bottom: -1px;
}
.bd-flag-lock-icon {
  color: rgba(0,229,255,.55);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.bd-flag-drag {
  color: var(--v2-text-muted);
  opacity: .35;
  flex-shrink: 0;
  cursor: grab;
  padding: .1rem;
}
.bd-flag-drag:active { cursor: grabbing; }
.bd-flag-card-body { flex: 1; min-width: 0; }
.bd-flag-card-name {
  font-family: var(--v2-font-mono);
  font-size: .74rem;
  color: var(--v2-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bd-flag-card-meta {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .2rem;
}
.bd-flag-val {
  font-family: var(--v2-font-mono);
  font-size: .63rem;
  color: var(--v2-text-muted);
}

/* ── Type pills (small, on flag cards) ─────────────────────────── */
.bd-type-pill {
  font-family: var(--v2-font-mono);
  font-size: .59rem;
  border-radius: 3px;
  padding: .1rem .35rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(255,255,255,.07);
  color: var(--v2-text-muted);
}
.bd-type-static      { background: rgba(100,255,218,.1);  color: #64ffda; }
.bd-type-regex       { background: rgba(0,229,255,.1);    color: var(--v2-cyan); }
.bd-type-file        { background: rgba(255,214,0,.1);    color: #ffd600; }
.bd-type-datetime    { background: rgba(129,212,250,.1);  color: #81d4fa; }
.bd-type-choice      { background: rgba(165,214,167,.1);  color: #a5d6a7; }
.bd-type-upload      { background: rgba(206,147,216,.1);  color: #ce93d8; }
.bd-type-text        { background: rgba(255,204,128,.1);  color: #ffcc80; }
.bd-type-ai_command  { background: rgba(236,64,122,.15);  color: #ec407a; }
.bd-type-ai_generic  { background: rgba(171,71,188,.15);  color: #ab47bc; }
.bd-type-cleancode_ex{ background: rgba(38,198,218,.1);   color: #26c6da; }

/* ── Right: editor panel ────────────────────────────────────────── */
.bd-editor-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bd-editor-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  color: var(--v2-text-muted);
  font-family: var(--v2-font-mono);
  font-size: .78rem;
  opacity: .5;
  text-align: center;
}
.bd-editor-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bd-editor-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Form section ───────────────────────────────────────────────── */
.bd-section {
  padding: 1rem;
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  background: var(--v2-surface);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.bd-section-label {
  font-family: var(--v2-font-display);
  font-size: .68rem;
  font-weight: 600;
  color: var(--v2-text-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.bd-optional {
  font-family: var(--v2-font-mono);
  font-size: .65rem;
  color: var(--v2-text-muted);
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  opacity: .7;
}
.bd-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
.bd-field { display: flex; flex-direction: column; gap: .3rem; }
.bd-field-sm { max-width: 180px; }
.bd-label {
  font-family: var(--v2-font-mono);
  font-size: .7rem;
  color: var(--v2-text-muted);
}
.bd-input, .bd-textarea {
  background: rgba(0,0,0,.35);
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  color: var(--v2-white);
  font-family: var(--v2-font-mono);
  font-size: .8rem;
  padding: .45rem .65rem;
  transition: border-color .15s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.bd-input:focus, .bd-textarea:focus {
  border-color: var(--v2-cyan);
}
.bd-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.55;
}
.bd-textarea-xl {
  min-height: 220px;
  font-size: .78rem;
}
.bd-mono { font-family: var(--v2-font-mono); }
.bd-type-desc {
  font-family: var(--v2-font-mono);
  font-size: .7rem;
  color: var(--v2-text-muted);
  opacity: .7;
  margin: 0;
  line-height: 1.5;
}
.bd-checkbox-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--v2-font-mono);
  font-size: .75rem;
  color: var(--v2-text-muted);
  cursor: pointer;
  user-select: none;
}
.bd-checkbox-row input[type="checkbox"] {
  accent-color: var(--v2-cyan);
  width: 14px;
  height: 14px;
}

/* ── Type selector grid ─────────────────────────────────────────── */
.bd-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .4rem;
}
.bd-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .55rem .4rem;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--v2-border);
  border-radius: 5px;
  color: var(--v2-text-muted);
  font-family: var(--v2-font-mono);
  font-size: .68rem;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  text-align: center;
}
.bd-type-btn:disabled {
  cursor: default;
  opacity: .6;
}
.bd-type-btn:not(:disabled):hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(0,229,255,.35);
  color: var(--v2-white);
}
.bd-type-btn-active {
  background: rgba(0,229,255,.1) !important;
  border-color: var(--v2-cyan) !important;
  color: var(--v2-cyan) !important;
}
.bd-type-btn-ai { border-color: rgba(236,64,122,.2); }
.bd-type-btn-ai:not(:disabled):hover {
  background: rgba(236,64,122,.08);
  border-color: rgba(236,64,122,.5);
  color: #ec407a;
}
.bd-type-btn-ai-active {
  background: rgba(236,64,122,.12) !important;
  border-color: #ec407a !important;
  color: #ec407a !important;
}
.bd-type-btn-icon {
  font-family: var(--v2-font-mono);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  letter-spacing: -.03em;
}

/* ── AI section ─────────────────────────────────────────────────── */
.bd-ai-section {
  border-color: rgba(236,64,122,.3);
  background: rgba(236,64,122,.04);
}
.bd-ai-label {
  color: #ec407a !important;
}
.bd-ai-note {
  font-family: var(--v2-font-mono);
  font-size: .71rem;
  color: rgba(236,64,122,.8);
  line-height: 1.5;
}
.bd-textarea-ai {
  min-height: 260px;
  border-color: rgba(236,64,122,.3);
  font-size: .78rem;
}
.bd-textarea-ai:focus { border-color: #ec407a; }
.bd-ai-strict { color: rgba(236,64,122,.75); }

/* ── Flag test sandbox ──────────────────────────────────────────── */
.bd-test-panel {
  margin-top: .85rem;
  padding: .75rem;
  background: rgba(103,58,183,.05);
  border: 1px solid rgba(103,58,183,.25);
  border-radius: 6px;
}
.bd-test-panel-ai { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; }
.bd-test-label {
  color: #b39ddb;
  font-family: var(--v2-font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.bd-test-row {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.bd-test-btn {
  flex-shrink: 0;
  padding: .38rem .9rem;
  background: rgba(103,58,183,.15);
  border: 1px solid rgba(103,58,183,.4);
  border-radius: 5px;
  color: #b39ddb;
  font-family: var(--v2-font-mono);
  font-size: .78rem;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.bd-test-btn:not(:disabled):hover {
  background: rgba(103,58,183,.28);
  border-color: rgba(149,117,205,.7);
  color: #ce93d8;
}
.bd-test-btn:disabled { opacity: .45; cursor: default; }
.bd-test-result {
  margin-top: .5rem;
  font-size: .8rem;
}
.bd-test-verdict { display: flex; align-items: center; gap: .3rem; margin-bottom: .4rem; }
.bd-test-pass { color: #00e676; display: flex; align-items: center; gap: .35rem; font-weight: 600; }
.bd-test-fail { color: #ff5252; display: flex; align-items: center; gap: .35rem; font-weight: 600; }
.bd-test-warn { color: #ffb300; font-size: .75rem; }
.bd-test-err  { color: #ff9800; font-size: .75rem; }
.bd-test-ai-textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  font-size: .78rem;
}
.bd-test-reasoning {
  margin-top: .5rem;
  padding: .6rem .75rem;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(103,58,183,.2);
  border-radius: 5px;
  color: var(--v2-text-muted);
  font-size: .76rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
}

/* ── Choices ────────────────────────────────────────────────────── */
.bd-choices-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.bd-choice-row {
  display: flex;
  gap: .4rem;
  align-items: center;
}
.bd-choice-input { flex: 1; }
.bd-choice-remove {
  background: transparent;
  border: 1px solid rgba(255,23,68,.3);
  border-radius: 4px;
  color: rgba(255,23,68,.6);
  padding: .35rem .4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.bd-choice-remove:hover {
  background: rgba(255,23,68,.1);
  color: #ff1744;
}
.bd-choice-add {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--v2-font-mono);
  font-size: .7rem;
  color: var(--v2-cyan);
  background: transparent;
  border: 1px dashed rgba(0,229,255,.3);
  border-radius: 4px;
  padding: .35rem .65rem;
  cursor: pointer;
  transition: background .12s;
  width: fit-content;
}
.bd-choice-add:hover { background: rgba(0,229,255,.07); }

/* ── Editor footer ──────────────────────────────────────────────── */
.bd-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1.5rem;
  border-top: 1px solid var(--v2-border);
  background: var(--v2-surface);
  flex-shrink: 0;
  gap: .5rem;
}
.bd-footer-left { display: flex; gap: .5rem; }
.bd-footer-right { display: flex; gap: .5rem; }

.bd-btn-save {
  background: var(--v2-cyan);
  color: #04040a;
  font-family: var(--v2-font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  padding: .5rem 1.1rem;
  cursor: pointer;
  transition: opacity .15s;
}
.bd-btn-save:disabled { opacity: .5; cursor: not-allowed; }
.bd-btn-save:not(:disabled):hover { opacity: .85; }

.bd-btn-cancel {
  background: transparent;
  color: var(--v2-text-muted);
  font-family: var(--v2-font-mono);
  font-size: .72rem;
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  padding: .5rem .9rem;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.bd-btn-cancel:hover {
  border-color: rgba(255,255,255,.25);
  color: var(--v2-white);
}

.bd-btn-del {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: transparent;
  color: rgba(255,23,68,.65);
  font-family: var(--v2-font-mono);
  font-size: .72rem;
  border: 1px solid rgba(255,23,68,.25);
  border-radius: 4px;
  padding: .5rem .9rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.bd-btn-del:hover {
  background: rgba(255,23,68,.1);
  color: #ff1744;
}

/* ── Delete confirm modal ───────────────────────────────────────── */
.bd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4,4,10,.7);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-modal {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  width: min(400px, 90vw);
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 1.5rem 1.25rem;
  gap: .75rem;
}
.bd-modal-icon {
  color: #ff1744;
  opacity: .8;
}
.bd-modal-title {
  font-family: var(--v2-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--v2-white);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.bd-modal-body {
  font-family: var(--v2-font-mono);
  font-size: .78rem;
  color: var(--v2-text-muted);
  text-align: center;
  line-height: 1.7;
}
.bd-modal-body strong { color: var(--v2-white); }
.bd-modal-footer {
  display: flex;
  gap: .6rem;
  margin-top: .25rem;
}


/* ═══════════════════════════════════════════════════════════════════
   MARKDOWN EDITOR  (bd-md- prefix)
   ═══════════════════════════════════════════════════════════════════ */

.bd-md-section { gap: 0; padding: 0; }

.bd-md-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1rem .5rem;
  border-bottom: 1px solid var(--v2-border);
}
.bd-md-tabs {
  display: flex;
  gap: 0;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  overflow: hidden;
}
.bd-md-tab {
  font-family: var(--v2-font-mono);
  font-size: .68rem;
  padding: .25rem .65rem;
  background: transparent;
  border: none;
  color: var(--v2-text-muted);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.bd-md-tab.active {
  background: var(--v2-cyan);
  color: #04040a;
  font-weight: 600;
}
.bd-md-tab:not(.active):hover { background: rgba(255,255,255,.07); color: var(--v2-white); }

/* ── Toolbar ─────────────────────────────────────────────────────── */
.bd-md-toolbar {
  display: flex;
  align-items: center;
  gap: .15rem;
  padding: .35rem .65rem;
  border-bottom: 1px solid var(--v2-border);
  background: rgba(0,0,0,.2);
  flex-wrap: wrap;
}
.bd-md-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--v2-text-muted);
  font-family: var(--v2-font-mono);
  font-size: .78rem;
  width: 28px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .1s, border-color .1s, color .1s;
  padding: 0;
  line-height: 1;
}
.bd-md-btn:hover {
  background: rgba(0,229,255,.1);
  border-color: rgba(0,229,255,.25);
  color: var(--v2-cyan);
}
.bd-md-bold  { font-weight: 700; }
.bd-md-italic{ font-style: italic; }
.bd-md-mono  { font-family: var(--v2-font-mono); letter-spacing: -.02em; }
.bd-md-sep {
  width: 1px;
  height: 18px;
  background: var(--v2-border);
  margin: 0 .25rem;
  flex-shrink: 0;
}

/* ── Textarea & Preview ──────────────────────────────────────────── */
.bd-md-textarea {
  border-radius: 0;
  border: none;
  border-top: 1px solid transparent;
  resize: none;
  min-height: 280px;
  line-height: 1.6;
  tab-size: 2;
}
.bd-md-textarea:focus { border-color: transparent; outline: none; box-shadow: inset 0 0 0 1px var(--v2-cyan); }

.bd-md-preview {
  min-height: 280px;
  padding: 1.1rem 1.25rem;
  overflow-y: auto;
  font-family: var(--v2-font-mono);
  font-size: .82rem;
  line-height: 1.75;
  color: var(--v2-white);
}
/* Prose styles for rendered markdown */
.bd-md-preview h1, .bd-md-preview h2, .bd-md-preview h3,
.bd-md-preview h4, .bd-md-preview h5, .bd-md-preview h6 {
  font-family: var(--v2-font-display);
  color: var(--v2-cyan);
  margin: 1rem 0 .4rem;
  letter-spacing: .04em;
  font-weight: 700;
}
.bd-md-preview h1 { font-size: 1.2rem; }
.bd-md-preview h2 { font-size: 1rem; }
.bd-md-preview h3 { font-size: .88rem; }
.bd-md-preview p  { margin: .5rem 0; }
.bd-md-preview ul, .bd-md-preview ol { padding-left: 1.4rem; margin: .4rem 0; }
.bd-md-preview li { margin: .2rem 0; }
.bd-md-preview code {
  font-family: var(--v2-font-mono);
  background: rgba(0,229,255,.08);
  color: var(--v2-cyan);
  border-radius: 3px;
  padding: .1em .35em;
  font-size: .85em;
}
.bd-md-preview pre {
  background: rgba(0,0,0,.4);
  border: 1px solid var(--v2-border);
  border-radius: 5px;
  padding: .75rem 1rem;
  overflow-x: auto;
  margin: .6rem 0;
}
.bd-md-preview pre code {
  background: none;
  color: #64ffda;
  padding: 0;
  font-size: .8rem;
}
.bd-md-preview blockquote {
  border-left: 3px solid var(--v2-magenta);
  padding-left: .85rem;
  color: var(--v2-text-muted);
  margin: .5rem 0;
}
.bd-md-preview a { color: var(--v2-cyan); }
.bd-md-preview hr {
  border: none;
  border-top: 1px solid var(--v2-border);
  margin: .75rem 0;
}
.bd-md-preview strong { color: var(--v2-white); font-weight: 600; }
.bd-md-preview em { color: var(--v2-magenta); font-style: italic; }
.bd-md-empty-hint { color: var(--v2-text-muted); opacity: .5; font-size: .78rem; }


/* ── PTBS / School Solution (amber theme) ────────────────────────── */
.bd-ptbs-section {
  border-color: rgba(255,214,0,.3);
  background: rgba(255,214,0,.03);
}
.bd-ptbs-label {
  color: #ffd600 !important;
}
.bd-ptbs-tabs .bd-md-tab.active {
  background: #ffd600;
  color: #04040a;
}
.bd-ptbs-tabs .bd-md-tab:not(.active):hover {
  background: rgba(255,214,0,.1);
  color: #ffd600;
}
.bd-ptbs-toolbar {
  border-bottom-color: rgba(255,214,0,.15);
  background: rgba(255,214,0,.03);
}
.bd-ptbs-btn:hover {
  background: rgba(255,214,0,.12) !important;
  border-color: rgba(255,214,0,.35) !important;
  color: #ffd600 !important;
}
.bd-ptbs-textarea {
  border-color: rgba(255,214,0,.15);
}
.bd-ptbs-textarea:focus { box-shadow: inset 0 0 0 1px #ffd600; }
.bd-ptbs-preview {
  border-top: 1px solid rgba(255,214,0,.15);
}
.bd-ptbs-preview h1, .bd-ptbs-preview h2, .bd-ptbs-preview h3,
.bd-ptbs-preview h4, .bd-ptbs-preview h5 {
  color: #ffd600;
}
.bd-ptbs-preview code { color: #ffd600; background: rgba(255,214,0,.08); }
.bd-ptbs-preview pre  { border-color: rgba(255,214,0,.2); }
.bd-ptbs-preview pre code { color: #ffe57f; background: none; }

/* ── Attachments section ──────────────────────────────────────────── */
.bd-att-section { gap: .65rem; }

.bd-att-list {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.bd-att-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  font-family: var(--v2-font-mono);
  font-size: .73rem;
}
.bd-att-icon { color: var(--v2-text-muted); flex-shrink: 0; opacity: .6; }
.bd-att-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--v2-white); }
.bd-att-size { color: var(--v2-text-muted); font-size: .65rem; white-space: nowrap; flex-shrink: 0; }
.bd-att-dl {
  color: var(--v2-cyan);
  font-size: .72rem;
  text-decoration: none;
  flex-shrink: 0;
  padding: .15rem .35rem;
  border: 1px solid rgba(0,229,255,.25);
  border-radius: 3px;
  transition: background .12s;
}
.bd-att-dl:hover { background: rgba(0,229,255,.1); }
.bd-att-del {
  background: transparent;
  border: none;
  color: rgba(255,23,68,.5);
  font-size: .9rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 .2rem;
  transition: color .12s;
  flex-shrink: 0;
}
.bd-att-del:hover { color: #ff1744; }
.bd-att-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--v2-font-mono);
  font-size: .7rem;
  color: var(--v2-cyan);
  border: 1px dashed rgba(0,229,255,.3);
  border-radius: 4px;
  padding: .3rem .65rem;
  cursor: pointer;
  width: fit-content;
  transition: background .12s;
}
.bd-att-upload-btn:hover { background: rgba(0,229,255,.07); }

/* Solution file area */
.bd-att-solution-area {
  border-top: 1px solid var(--v2-border);
  padding-top: .55rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.bd-att-solution-label {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--v2-font-mono);
  font-size: .68rem;
  color: #ffd600;
  opacity: .8;
}
.bd-att-solution-label svg { opacity: .8; }
.bd-att-solution-row { border-color: rgba(255,214,0,.25); }
.bd-att-dl-sol { color: #ffd600; border-color: rgba(255,214,0,.3); }
.bd-att-dl-sol:hover { background: rgba(255,214,0,.1); }
.bd-att-upload-sol {
  color: #ffd600;
  border-color: rgba(255,214,0,.3);
}
.bd-att-upload-sol:hover { background: rgba(255,214,0,.07); }


/* ============================================================
   Live Monitor (lm-*)
   ============================================================ */

/* ── Animations ── */
@keyframes lm-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(239,83,80,.6); }
  50%       { opacity: .7; transform: scale(.85); box-shadow: 0 0 0 5px rgba(239,83,80,0); }
}
@keyframes lm-new-capture {
  0%   { background: rgba(102,187,106,.28); }
  60%  { background: rgba(102,187,106,.1); }
  100% { background: transparent; }
}
@keyframes lm-spin {
  to { transform: rotate(360deg); }
}

/* ── Top bar ── */
.lm-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1rem;
}
.lm-topbar-left  { display: flex; align-items: center; gap: .75rem; }
.lm-topbar-right { display: flex; align-items: center; gap: .75rem; }

.lm-live-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #ef5350;
  background: rgba(239,83,80,.1);
  border: 1px solid rgba(239,83,80,.35);
  border-radius: 100px;
  padding: .25rem .6rem;
}
.lm-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ef5350;
  animation: lm-pulse-dot 1.6s ease-in-out infinite;
}
.lm-topbar-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--v2-fg);
}
.lm-updated {
  font-size: .7rem;
  color: var(--v2-muted);
}
.lm-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-family: var(--v2-font-mono);
  color: var(--v2-fg);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--v2-border);
  border-radius: 5px;
  padding: .3rem .75rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.lm-refresh-btn:hover:not(:disabled) { background: rgba(103,58,183,.2); border-color: var(--v2-purple); }
.lm-refresh-btn:disabled { opacity: .5; cursor: not-allowed; }
.lm-refresh-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.lm-spin-icon { animation: lm-spin .7s linear infinite; }

/* ── Countdown ring ── */
.lm-ring-wrap { width: 36px; height: 36px; cursor: default; }
.lm-ring-svg  { width: 36px; height: 36px; }
.lm-ring-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 3; }
.lm-ring-fg {
  fill: none;
  stroke-width: 3;
  stroke-dasharray: 87.96;   /* 2π × 14 ≈ 87.96 */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-linecap: round;
}
.lm-ring-text {
  fill: var(--v2-muted);
  font-size: 9px;
  font-family: var(--v2-font-mono);
  text-anchor: middle;
  dominant-baseline: auto;
}
.lm-ring-text-spin { font-size: 12px; fill: var(--v2-cyan); }

/* ── Stats row ── */
.lm-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.lm-stat-card {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 7px;
  padding: .45rem .8rem;
  transition: border-color .2s;
}
.lm-stat-card:hover { border-color: rgba(103,58,183,.4); }
.lm-stat-icon {
  width: 26px; height: 26px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lm-stat-icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.lm-sicon-purple { background: rgba(103,58,183,.2);  color: var(--v2-purple); }
.lm-sicon-cyan   { background: rgba(0,229,255,.12);  color: var(--v2-cyan); }
.lm-sicon-green  { background: rgba(102,187,106,.15); color: #66bb6a; }
.lm-sicon-orange { background: rgba(255,152,0,.15);  color: #ff9800; }
.lm-sicon-indigo { background: rgba(92,107,192,.18); color: #7986cb; }
.lm-stat-val  { font-size: 1.1rem; font-weight: 700; color: var(--v2-fg); line-height: 1; }
.lm-stat-lbl  { font-size: .6rem; color: var(--v2-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: .1rem; }

/* ── Controls bar ── */
.lm-controls-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.lm-search-wrap {
  flex: 1;
  min-width: 180px;
  position: relative;
  display: flex;
  align-items: center;
}
.lm-search-icon {
  position: absolute;
  left: .55rem;
  width: 14px; height: 14px;
  stroke: var(--v2-muted);
  fill: none;
  stroke-width: 2;
  pointer-events: none;
}
.lm-search-input {
  width: 100%;
  height: 2rem;
  padding: 0 .75rem 0 2rem;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 5px;
  color: var(--v2-fg);
  font-size: .78rem;
  outline: none;
  transition: border-color .15s;
}
.lm-search-input:focus { border-color: var(--v2-purple); }
.lm-controls-right { display: flex; align-items: center; gap: .5rem; }
.lm-ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  color: var(--v2-muted);
  background: none;
  border: 1px solid var(--v2-border);
  border-radius: 5px;
  padding: .3rem .65rem;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.lm-ctrl-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.lm-ctrl-btn:hover { color: var(--v2-fg); border-color: rgba(255,255,255,.25); }

/* ── Box cards ── */
.lm-box-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-left: 3px solid var(--bcolor, var(--v2-purple));
  border-radius: 8px;
  margin-bottom: .65rem;
  overflow: hidden;
  transition: border-color .3s;
}
.lm-box-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .9rem;
  cursor: pointer;
  user-select: none;
  transition: background .12s;
  gap: .75rem;
}
.lm-box-hd:hover { background: rgba(255,255,255,.03); }
.lm-box-hd-left  { display: flex; align-items: center; gap: .65rem; min-width: 0; flex: 1; }
.lm-box-hd-right { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

/* Mini rate ring in card header */
.lm-box-ring { flex-shrink: 0; }
.lm-box-ring-svg { width: 42px; height: 42px; }
.lm-box-ring-fg {
  fill: none;
  stroke-width: 3;
  stroke-dasharray: 87.96;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1), stroke .4s;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-linecap: round;
}

.lm-box-info { min-width: 0; }
.lm-box-name {
  font-size: .85rem;
  font-weight: 600;
  color: var(--v2-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lm-box-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.lm-badge {
  font-size: .6rem;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 500;
  white-space: nowrap;
}
.lm-badge-corp  { background: rgba(103,58,183,.2); color: var(--v2-purple); border: 1px solid rgba(103,58,183,.3); }
.lm-badge-level { background: rgba(0,229,255,.08); color: var(--v2-cyan);   border: 1px solid rgba(0,229,255,.2); }
.lm-badge-count { background: rgba(255,255,255,.06); color: var(--v2-muted); border: 1px solid rgba(255,255,255,.08); }
.lm-badge-hint  { background: rgba(255,214,0,.1); color: #ffd600; border: 1px solid rgba(255,214,0,.25); display: inline-flex; align-items: center; gap: 3px; }

.lm-box-cap-count { text-align: right; }
.lm-cap-num { display: block; font-size: 1.1rem; font-weight: 700; color: var(--v2-fg); line-height: 1; }
.lm-cap-lbl { font-size: .58rem; color: var(--v2-muted); text-transform: uppercase; letter-spacing: .05em; }

.lm-chevron {
  width: 16px; height: 16px;
  stroke: var(--v2-muted); fill: none; stroke-width: 2; stroke-linecap: round;
  transition: transform .25s ease;
  flex-shrink: 0;
}
.lm-chevron-open { transform: rotate(180deg); }

/* ── Flag table ── */
.lm-box-body { border-top: 1px solid var(--v2-border); }
.lm-flag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .77rem;
}
.lm-flag-table th {
  padding: .35rem .65rem;
  text-align: left;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--v2-muted);
  border-bottom: 1px solid var(--v2-border);
  background: rgba(0,0,0,.12);
}
.lm-flag-table td {
  padding: .32rem .65rem;
  border-bottom: 1px solid rgba(255,255,255,.03);
  vertical-align: middle;
  /* body color is var(--v2-cyan) for the brand effect, but uncoloured
     cells (flag name, plain text) inherit that cyan and read as dim
     on most monitors. Pin cells to the white foreground token so
     names, numbers, and labels are crisp; specific color classes
     (lm-green / lm-red / lm-zero / etc.) still win where set. */
  color: var(--v2-fg);
}
.lm-flag-table tr:last-child td { border-bottom: none; }
.lm-flag-table tr.lm-group-sep td { border-top: 1px solid rgba(103,58,183,.25); }
.lm-flag-table tr.lm-new-cap { animation: lm-new-capture 4s ease-out forwards; }
.lm-flag-table tr:hover td { background: rgba(255,255,255,.018); }

/* ── Progress bar ── */
.lm-bar-wrap {
  position: relative;
  background: rgba(255,255,255,.09);
  border-radius: 4px;
  height: 17px;
  min-width: 80px;
}
.lm-bar {
  height: 100%;
  border-radius: 4px;
  transition: width .8s cubic-bezier(.4,0,.2,1), background .4s;
  min-width: 2px;
}
.lm-bar-lbl {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  text-align: center;
  font-size: .64rem;
  font-weight: 600;
  line-height: 17px;
  color: #fff;
  text-shadow: 0 0 4px rgba(0,0,0,.7);
}

/* ── Misc table helpers ── */
.lm-num   { color: var(--v2-muted); text-align: right; width: 2rem; }
.lm-tc    { text-align: center; }
.lm-fw    { font-weight: 600; }
.lm-zero  { color: rgba(255,255,255,.55); }
.lm-green  { color: #66bb6a; }
.lm-red    { color: #ef5350; }
.lm-yellow { color: #ffd600; }
.lm-blue   { color: #42a5f5; }
.lm-muted  { color: var(--v2-muted); }
.lm-mono   { font-family: var(--v2-font-mono); font-size: .73em; }

.lm-grp-badge {
  font-size: .6rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(103,58,183,.2);
  color: var(--v2-purple);
  border: 1px solid rgba(103,58,183,.3);
}
.lm-lock-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: .62rem;
  color: var(--v2-muted);
  margin-left: .35rem;
  opacity: .65;
}
.lm-lock-tag svg { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.lm-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: none;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  cursor: pointer;
  color: var(--v2-muted);
  transition: color .12s, border-color .12s, background .12s;
}
.lm-detail-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.lm-detail-btn:hover { color: var(--v2-fg); border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.05); }

/* ── Slide transitions ── */
.lm-slide-enter { transition: opacity .2s ease, transform .2s ease; overflow: hidden; }
.lm-slide-enter-start { opacity: 0; transform: translateY(-6px); }
.lm-slide-enter-end   { opacity: 1; transform: translateY(0); }

/* ── Fade transitions (backdrop) ── */
.lm-fade-enter { transition: opacity .2s ease; }
.lm-fade-enter-start { opacity: 0; }
.lm-fade-enter-end   { opacity: 1; }

/* ── Empty states ── */
.lm-empty { color: var(--v2-muted); font-size: .78rem; padding: .5rem .65rem; }
.lm-empty-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 4rem 2rem;
  color: var(--v2-muted);
  font-size: .85rem;
  text-align: center;
}
.lm-empty-page svg { width: 48px; height: 48px; stroke: var(--v2-muted); fill: none; stroke-width: 1.5; stroke-linecap: round; opacity: .4; }

/* ── Detail slide-in panel ── */
.lm-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 900;
  backdrop-filter: blur(2px);
}
.lm-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 520px;
  max-width: 95vw;
  height: 100vh;
  background: var(--v2-surface);
  border-left: 1px solid var(--v2-border);
  z-index: 950;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 32px rgba(0,0,0,.4);
}
.lm-panel-open { transform: translateX(0); }

.lm-panel-hd {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--v2-border);
  background: rgba(103,58,183,.08);
  flex-shrink: 0;
}
.lm-panel-title-col { flex: 1; min-width: 0; }
.lm-panel-flag-name { font-size: .95rem; font-weight: 700; color: var(--v2-fg); }
.lm-panel-flag-desc { font-size: .72rem; color: var(--v2-muted); margin-top: .2rem; }
.lm-panel-close {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--v2-muted); border-radius: 4px;
  transition: color .12s, background .12s;
  flex-shrink: 0;
}
.lm-panel-close:hover { color: var(--v2-fg); background: rgba(255,255,255,.07); }
.lm-panel-close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.lm-panel-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--v2-border);
  flex-shrink: 0;
}
.lm-pill {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .68rem;
  padding: .2rem .5rem;
  border-radius: 100px;
  border: 1px solid;
}
.lm-pill svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; }
.lm-pill-green  { color: #66bb6a; border-color: rgba(102,187,106,.35); background: rgba(102,187,106,.08); }
.lm-pill-red    { color: #ef5350; border-color: rgba(239,83,80,.35);   background: rgba(239,83,80,.08); }
.lm-pill-grey   { color: var(--v2-muted); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.lm-pill-yellow { color: #ffd600; border-color: rgba(255,214,0,.3);    background: rgba(255,214,0,.06); }
.lm-pill-blue   { color: #42a5f5; border-color: rgba(66,165,245,.3);   background: rgba(66,165,245,.06); }

.lm-panel-rate-wrap {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1rem;
  border-bottom: 1px solid var(--v2-border);
  flex-shrink: 0;
}
.lm-panel-rate-bar-bg {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  overflow: hidden;
}
.lm-panel-rate-bar {
  height: 100%;
  border-radius: 3px;
  transition: width .6s cubic-bezier(.4,0,.2,1), background .4s;
}
.lm-panel-rate-pct { font-size: .7rem; font-weight: 700; color: var(--v2-fg); min-width: 2.5rem; text-align: right; }

.lm-panel-loading {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1.5rem 1rem;
  color: var(--v2-muted);
  font-size: .8rem;
}
.lm-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.12);
  border-top-color: var(--v2-purple);
  border-radius: 50%;
  animation: lm-spin .7s linear infinite;
  flex-shrink: 0;
}

.lm-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: .75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

/* ── Panel inner sections ── */
.lm-section { display: flex; flex-direction: column; gap: .3rem; }
.lm-sec-head {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--v2-border);
}
.lm-sec-head svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; }
.lm-sec-green  { color: #66bb6a; }
.lm-sec-red    { color: #ef5350; }
.lm-sec-grey   { color: var(--v2-muted); }
.lm-sec-yellow { color: #ffd600; }
.lm-sec-blue   { color: #42a5f5; }

.lm-dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: .75rem;
}
.lm-dtable th {
  padding: .25rem .45rem;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--v2-muted);
  border-bottom: 1px solid var(--v2-border);
  text-align: left;
}
.lm-dtable td { padding: .28rem .45rem; border-bottom: 1px solid rgba(255,255,255,.03); color: var(--v2-fg); }
.lm-dtable tr:last-child td { border-bottom: none; }
.lm-dtable tr:hover td { background: rgba(255,255,255,.02); }

.lm-tag-cloud { display: flex; flex-wrap: wrap; gap: .3rem; padding: .2rem 0; }
.lm-tag {
  font-size: .72rem;
  padding: 3px 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 3px;
  color: var(--v2-fg);
}

/* ── Manual Capture UI ── */
.lm-capture-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .45rem;
  padding: .5rem .6rem;
  background: rgba(103,58,183,.07);
  border: 1px solid rgba(103,58,183,.2);
  border-radius: 6px;
}
.lm-capture-sel {
  flex: 1;
  min-width: 160px;
  height: 1.9rem;
  padding: 0 .55rem;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(103,58,183,.3);
  border-radius: 4px;
  color: var(--v2-fg);
  font-size: .73rem;
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
}
.lm-capture-sel:focus { border-color: var(--v2-purple); }
.lm-capture-sel option { background: #0d0d19; }
.lm-capture-sel:disabled { opacity: .5; cursor: not-allowed; }

.lm-capture-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  height: 1.9rem;
  padding: 0 .75rem;
  font-size: .72rem;
  font-weight: 600;
  font-family: var(--v2-font-mono);
  background: rgba(103,58,183,.25);
  border: 1px solid rgba(103,58,183,.5);
  border-radius: 4px;
  color: var(--v2-purple);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.lm-capture-btn svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.lm-capture-btn:hover:not(:disabled) { background: rgba(103,58,183,.4); border-color: var(--v2-purple); }
.lm-capture-btn:disabled { opacity: .4; cursor: not-allowed; }
.lm-capture-btn-confirm {
  background: rgba(102,187,106,.2);
  border-color: rgba(102,187,106,.5);
  color: #66bb6a;
}
.lm-capture-btn-confirm:hover { background: rgba(102,187,106,.35); border-color: #66bb6a; }
.lm-capture-btn-cancel {
  font-size: .7rem;
  color: var(--v2-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 .3rem;
  transition: color .12s;
}
.lm-capture-btn-cancel:hover { color: var(--v2-fg); }

.lm-capture-confirm-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.lm-capture-confirm-label {
  font-size: .72rem;
  color: var(--v2-muted);
}
.lm-capture-loading {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  color: var(--v2-muted);
}

/* ── Live monitor queue filter pills ── */
.lm-queue-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .75rem;
}
.lm-qf-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  height: 1.75rem;
  padding: 0 .75rem;
  font-size: .72rem;
  font-family: var(--v2-font-mono);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--v2-border);
  border-radius: 100px;
  color: var(--v2-muted);
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
}
.lm-qf-pill:hover { color: var(--v2-fg); border-color: rgba(255,255,255,.2); }
.lm-qf-pill-on {
  background: rgba(103,58,183,.25);
  border-color: rgba(103,58,183,.55);
  color: var(--v2-purple);
}
.lm-qf-count {
  font-size: .62rem;
  padding: 0 4px;
  background: rgba(255,255,255,.1);
  border-radius: 6px;
  min-width: 1.2em;
  text-align: center;
}
.lm-qf-pill-on .lm-qf-count { background: rgba(103,58,183,.35); }

/* ── Live monitor info card (description + solution) ── */
.lm-info-card {
  background: rgba(103,58,183,.07);
  border: 1px solid rgba(103,58,183,.2);
  border-radius: 6px;
  padding: .5rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.lm-info-row {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.lm-info-lbl {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--v2-muted);
  display: flex;
  align-items: center;
}
.lm-info-val {
  font-size: .78rem;
  color: var(--v2-fg);
  line-height: 1.4;
}
.lm-info-token {
  font-family: var(--v2-font-mono);
  font-size: .75rem;
  color: var(--v2-cyan);
  background: rgba(0,229,255,.07);
  border: 1px solid rgba(0,229,255,.18);
  border-radius: 4px;
  padding: .15rem .45rem;
  word-break: break-all;
}
.lm-info-solution { border-top: 1px solid rgba(103,58,183,.2); padding-top: .4rem; }
.lm-info-sol-link {
  font-size: .75rem;
  color: #ffd600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.lm-info-sol-link:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════
   USERS PAGE  (usr-*)
   ═══════════════════════════════════════════════════════════════ */

/* Panel backdrop & slide-in */
.usr-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 900;
}
.usr-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 400px;
  background: var(--v2-bg);
  border-left: 1px solid var(--v2-border);
  z-index: 901;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.usr-panel-open { transform: translateX(0); }

.usr-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Form fields */
.usr-field-row {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.usr-field-tall { /* semantic modifier, no extra styles */ }
.usr-lbl {
  font-size: .68rem;
  color: var(--v2-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.usr-req { color: #ef5350; }
.usr-input {
  width: 100%;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 5px;
  color: var(--v2-fg);
  font-size: .82rem;
  padding: .45rem .65rem;
  outline: none;
  transition: border-color .15s;
  font-family: inherit;
}
.usr-input:focus { border-color: var(--v2-purple); }
.usr-textarea { resize: vertical; min-height: 72px; }

/* Role toggle */
.usr-role-toggle {
  display: flex;
  gap: .4rem;
}
.usr-role-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .45rem .75rem;
  font-size: .78rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  color: var(--v2-muted);
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
}
.usr-role-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.usr-role-btn.usr-role-on { color: var(--v2-fg); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); }
.usr-role-admin.usr-role-on { color: var(--v2-purple); border-color: rgba(103,58,183,.55); background: rgba(103,58,183,.15); }

/* Toggle switch */
.usr-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
}
.usr-toggle-inp { display: none; }
.usr-toggle-track {
  width: 36px; height: 20px;
  background: rgba(255,255,255,.1);
  border: 1px solid var(--v2-border);
  border-radius: 100px;
  position: relative;
  transition: background .15s, border-color .15s;
}
.usr-toggle-inp:checked ~ .usr-toggle-track {
  background: rgba(239,83,80,.3);
  border-color: rgba(239,83,80,.5);
}
.usr-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: var(--v2-muted);
  border-radius: 50%;
  transition: transform .15s, background .15s;
}
.usr-toggle-inp:checked ~ .usr-toggle-track .usr-toggle-thumb {
  transform: translateX(16px);
  background: #ef5350;
}
.usr-toggle-lbl { font-size: .78rem; color: var(--v2-muted); }

/* Panel actions */
.usr-panel-actions {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding-top: .5rem;
  border-top: 1px solid var(--v2-border);
  margin-top: .5rem;
}
.usr-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  padding: .6rem;
  font-size: .82rem;
  font-weight: 600;
  background: var(--v2-purple);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity .15s;
}
.usr-save-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; }
.usr-save-btn:disabled { opacity: .55; cursor: not-allowed; }
.usr-save-btn:not(:disabled):hover { opacity: .85; }

.usr-delete-wrap { display: flex; flex-direction: column; gap: .4rem; }
.usr-del-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  color: #ef5350;
  background: none;
  border: 1px solid rgba(239,83,80,.3);
  border-radius: 5px;
  padding: .35rem .7rem;
  cursor: pointer;
  transition: background .13s;
}
.usr-del-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.usr-del-btn:hover { background: rgba(239,83,80,.1); }
.usr-del-confirm {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .75rem;
  color: var(--v2-muted);
}
.usr-del-confirm-yes {
  padding: .25rem .6rem;
  background: #ef5350;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: .72rem;
  cursor: pointer;
}
.usr-del-confirm-yes:disabled { opacity: .55; cursor: not-allowed; }
.usr-del-cancel {
  padding: .25rem .6rem;
  background: none;
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  color: var(--v2-muted);
  font-size: .72rem;
  cursor: pointer;
}

/* ── Page header ── */
.usr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.usr-header-left { display: flex; align-items: center; gap: .6rem; }
.usr-page-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--v2-fg);
  margin: 0;
}
.usr-count-badge {
  font-size: .7rem;
  color: var(--v2-muted);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--v2-border);
  border-radius: 100px;
  padding: .15rem .55rem;
}
.usr-header-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.usr-new-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .9rem;
  font-size: .78rem;
  font-weight: 600;
  background: var(--v2-purple);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity .15s;
}
.usr-new-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; }
.usr-new-btn:hover { opacity: .85; }

.usr-students-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .9rem; font-size: .78rem; font-weight: 600;
  background: rgba(0,240,255,.12); color: var(--v2-cyan);
  border: 1px solid rgba(0,240,255,.3); border-radius: 6px;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.usr-students-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.usr-students-btn:hover { background: rgba(0,240,255,.2); border-color: rgba(0,240,255,.55); }

/* ── Students bulk dialog ── */
.usr-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.72); backdrop-filter: blur(5px); padding: 1rem;
}
.usr-students-dialog {
  background: var(--v2-surface); border: 1px solid var(--v2-border);
  border-radius: 10px; width: 100%; max-width: 520px;
  box-shadow: 0 0 40px rgba(0,240,255,.07), 0 4px 32px rgba(0,0,0,.5);
  display: flex; flex-direction: column; max-height: 90vh; overflow: hidden;
}
.usd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--v2-border); flex-shrink: 0;
}
.usd-title {
  display: flex; align-items: center; gap: .45rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--v2-cyan);
  text-shadow: 0 0 8px rgba(0,240,255,.3);
}
.usd-close {
  background: none; border: none; cursor: pointer; color: var(--v2-muted);
  padding: 2px; display: flex; transition: color .15s;
}
.usd-close:hover { color: var(--v2-red); }
.usd-body { padding: 1.1rem 1.25rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
.usd-mode-tabs { display: flex; gap: .4rem; }
.usd-tab {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .75rem; font-size: .73rem; font-weight: 600; border-radius: 5px;
  border: 1px solid var(--v2-border); background: none; color: var(--v2-muted);
  cursor: pointer; transition: background .13s, color .13s, border-color .13s;
}
.usd-tab svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.usd-tab:hover { color: var(--v2-text); border-color: rgba(255,255,255,.2); }
.usd-tab-on { background: rgba(0,240,255,.1) !important; color: var(--v2-cyan) !important; border-color: rgba(0,240,255,.35) !important; }
.usd-section { display: flex; flex-direction: column; gap: .4rem; }
.usd-lbl { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--v2-muted); }
.usd-sublbl { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .7; }
.usd-req { color: var(--v2-cyan); }
.usd-input {
  width: 100%; padding: .5rem .75rem; font-size: .85rem;
  background: rgba(0,0,0,.4); border: 1px solid rgba(0,240,255,.2);
  border-radius: 5px; color: var(--v2-text); font-family: var(--v2-font-mono);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.usd-input:focus { border-color: var(--v2-cyan); box-shadow: 0 0 0 2px rgba(0,255,247,.1); }
.usd-textarea { resize: vertical; min-height: 56px; }
.usd-count-row { display: flex; align-items: center; gap: .75rem; }
.usd-count-row .usd-input { width: 120px; }
.usd-count-hint { font-size: .8rem; color: var(--v2-muted); font-family: var(--v2-font-mono); }
.usd-count-hint span { color: var(--v2-cyan); }
.usd-preview-wrap {
  background: rgba(0,0,0,.3); border: 1px solid rgba(0,240,255,.1);
  border-radius: 7px; padding: .75rem;
}
.usd-preview-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .5rem;
}
.usd-preview-label { font-size: .7rem; font-weight: 700; color: var(--v2-muted); letter-spacing: .06em; text-transform: uppercase; }
.usd-preview-legend { display: flex; align-items: center; gap: .6rem; font-size: .68rem; color: var(--v2-muted); }
.usd-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.usd-dot-new { background: #39ff14; }
.usd-dot-upd { background: var(--v2-cyan); }
.usd-chips { display: flex; flex-wrap: wrap; gap: .3rem; max-height: 120px; overflow-y: auto; }
.usd-chip {
  padding: .15rem .45rem; border-radius: 3px; font-size: .72rem;
  font-family: var(--v2-font-mono); font-weight: 600;
}
.usd-chip-new { background: rgba(57,255,20,.1); color: #39ff14; border: 1px solid rgba(57,255,20,.25); }
.usd-chip-upd { background: rgba(0,240,255,.1); color: var(--v2-cyan); border: 1px solid rgba(0,240,255,.25); }
.usd-results { display: flex; flex-direction: column; gap: .35rem; padding: .65rem .8rem; background: rgba(0,0,0,.25); border-radius: 6px; }
.usd-result-row { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--v2-text); }
.usd-result-err { color: var(--v2-red); }
.usd-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
  padding: .85rem 1.25rem; border-top: 1px solid var(--v2-border); flex-shrink: 0;
}
.usd-cancel-btn {
  padding: .4rem .85rem; font-size: .78rem; border-radius: 5px;
  border: 1px solid var(--v2-border); background: none; color: var(--v2-muted);
  cursor: pointer; transition: background .13s;
}
.usd-cancel-btn:hover { background: rgba(255,255,255,.05); }
.usd-submit-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem 1.1rem; font-size: .8rem; font-weight: 700;
  background: var(--v2-cyan); color: #000; border: none; border-radius: 6px;
  cursor: pointer; transition: opacity .15s; letter-spacing: .04em;
}
.usd-submit-btn:hover { opacity: .85; }
.usd-submit-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Bulk lock/unlock ── */
.usr-bulk-wrap { position: relative; display: flex; align-items: center; }
.usr-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .75rem;
  font-size: .75rem;
  font-weight: 500;
  background: none;
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  color: var(--v2-muted);
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
  white-space: nowrap;
}
.usr-bulk-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.usr-bulk-btn:disabled { opacity: .45; cursor: not-allowed; }
.usr-bulk-lock:not(:disabled):hover   { color: #ef5350; border-color: rgba(239,83,80,.45); background: rgba(239,83,80,.08); }
.usr-bulk-unlock:not(:disabled):hover { color: #66bb6a; border-color: rgba(102,187,106,.45); background: rgba(102,187,106,.08); }

.usr-bulk-confirm {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .73rem;
  color: var(--v2-muted);
  white-space: nowrap;
}
.usr-bulk-confirm-yes {
  padding: .25rem .55rem;
  font-size: .72rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  color: #fff;
}
.usr-bulk-lock-yes   { background: #ef5350; }
.usr-bulk-unlock-yes { background: #66bb6a; }
.usr-bulk-cancel {
  padding: .25rem .55rem;
  font-size: .72rem;
  background: none;
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  color: var(--v2-muted);
  cursor: pointer;
}

/* ── Stats row ── */
.usr-stats-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  padding: .6rem 1.2rem;
  margin-bottom: 1rem;
}
.usr-stat { display: flex; flex-direction: column; align-items: center; flex: 1; }
.usr-stat-val { font-size: 1.35rem; font-weight: 700; color: var(--v2-fg); line-height: 1; }
.usr-stat-lbl { font-size: .6rem; color: var(--v2-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: .15rem; }
.usr-val-purple { color: var(--v2-purple); }
.usr-val-cyan   { color: var(--v2-cyan); }
.usr-val-red    { color: #ef5350; }
.usr-stat-div { width: 1px; background: var(--v2-border); align-self: stretch; }

/* ── Filter bar ── */
.usr-filter-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .85rem;
  flex-wrap: wrap;
}
.usr-filter-pills {
  display: flex;
  gap: .3rem;
}
.usr-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  height: 1.75rem;
  padding: 0 .65rem;
  font-size: .7rem;
  font-family: var(--v2-font-mono);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--v2-border);
  border-radius: 100px;
  color: var(--v2-muted);
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
}
.usr-pill:hover { color: var(--v2-fg); border-color: rgba(255,255,255,.2); }
.usr-pill-on { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: var(--v2-fg); }
.usr-pill-purple.usr-pill-on { background: rgba(103,58,183,.2); border-color: rgba(103,58,183,.5); color: var(--v2-purple); }
.usr-pill-cyan.usr-pill-on   { background: rgba(0,229,255,.1);  border-color: rgba(0,229,255,.4);  color: var(--v2-cyan); }
.usr-pill-green.usr-pill-on  { background: rgba(102,187,106,.15); border-color: rgba(102,187,106,.4); color: #66bb6a; }
.usr-pill-red.usr-pill-on    { background: rgba(239,83,80,.15); border-color: rgba(239,83,80,.4); color: #ef5350; }

/* ── Table ── */
.usr-table-wrap {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  overflow: hidden;
}
.usr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}
.usr-table thead th {
  padding: .55rem .75rem;
  text-align: left;
  font-size: .63rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--v2-muted);
  border-bottom: 1px solid var(--v2-border);
  white-space: nowrap;
}
.usr-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .1s;
}
.usr-table tbody tr:last-child { border-bottom: none; }
.usr-table tbody tr:hover { background: rgba(255,255,255,.03); }
.usr-row-locked { opacity: .65; }
.usr-row-admin  td:first-child { border-left: 2px solid rgba(103,58,183,.6); }
.usr-table td { padding: .55rem .75rem; vertical-align: middle; }
.usr-th-avatar { width: 44px; }
.usr-td-avatar { width: 44px; padding-left: .6rem !important; }
.usr-tc { text-align: center; }
.usr-avatar-img {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--v2-border);
}
.usr-handle { font-family: var(--v2-font-mono); font-weight: 600; color: var(--v2-fg); }
.usr-muted   { color: var(--v2-muted); }
.usr-mono    { font-family: var(--v2-font-mono); font-size: .75rem; }

/* Badges */
.usr-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .63rem;
  font-weight: 600;
  padding: .15rem .45rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.usr-badge-admin  { background: rgba(103,58,183,.2); color: var(--v2-purple); }
.usr-badge-player { background: rgba(0,229,255,.1);  color: var(--v2-cyan); }
.usr-badge-active { background: rgba(102,187,106,.15); color: #66bb6a; }
.usr-badge-locked { background: rgba(239,83,80,.15); color: #ef5350; }

/* Expiry */
.usr-expire { font-size: .73rem; font-family: var(--v2-font-mono); color: var(--v2-muted); }
.usr-expired { color: #ef5350; }

/* Action buttons */
.usr-actions { white-space: nowrap; }
.usr-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 26px; height: 26px;
  background: none;
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--v2-muted);
  transition: background .13s, color .13s, border-color .13s;
  text-decoration: none;
}
.usr-act-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.usr-act-edit:hover   { color: var(--v2-cyan);   border-color: rgba(0,229,255,.4);   background: rgba(0,229,255,.08); }
.usr-act-lock:hover   { color: #ef5350;           border-color: rgba(239,83,80,.4);  background: rgba(239,83,80,.08); }
.usr-act-unlock:hover { color: #66bb6a;           border-color: rgba(102,187,106,.4); background: rgba(102,187,106,.08); }
.usr-act-view:hover   { color: var(--v2-muted);   border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); }

/* Empty state row */
.usr-empty-row {
  text-align: center;
  padding: 3rem 1rem !important;
  color: var(--v2-muted);
}
.usr-empty-row svg {
  display: block;
  margin: 0 auto .5rem;
  width: 32px; height: 32px;
  stroke: var(--v2-muted);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: .4;
}


/* ═══════════════════════════════════════════════════════════════
   EXERCISES PAGE  (ex-*)
   ═══════════════════════════════════════════════════════════════ */

.ex-filter-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.ex-filter-pills { display: flex; gap: .3rem; }
.ex-stats { margin-left: auto; }
.ex-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  color: var(--v2-muted);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--v2-border);
  border-radius: 100px;
  padding: .2rem .65rem;
}
.ex-stat-chip svg { width: 11px; height: 11px; stroke: #66bb6a; fill: none; stroke-width: 2.5; stroke-linecap: round; }

/* Level section */
.ex-level-section { margin-bottom: 2.25rem; }
.ex-level-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--v2-border);
}
.ex-level-hd-left { display: flex; align-items: center; gap: .6rem; }
.ex-level-icon {
  width: 16px; height: 16px;
  fill: none; stroke-width: 2; stroke-linecap: round;
  flex-shrink: 0;
}
.ex-level-icon-open { stroke: var(--v2-cyan); }
.ex-level-icon-lock { stroke: var(--v2-muted); }
.ex-level-name { font-size: 1rem; font-weight: 700; color: var(--v2-fg); margin: 0; }
.ex-level-desc { font-size: .72rem; color: var(--v2-muted); font-family: var(--v2-font-mono); }
.ex-level-progress {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 140px;
}
.ex-prog-lbl { font-size: .65rem; color: var(--v2-muted); font-family: var(--v2-font-mono); white-space: nowrap; }
.ex-prog-bar-bg {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,.08);
  border-radius: 100px;
  overflow: hidden;
}
.ex-prog-bar {
  height: 100%;
  background: var(--v2-purple);
  border-radius: 100px;
  transition: width .4s;
}
.ex-prog-bar-done { background: #66bb6a; }

/* Box grid */
.ex-box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

/* Box card */
.ex-box-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--v2-fg);
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.ex-box-card:hover {
  border-color: rgba(103,58,183,.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.ex-box-done {
  border-color: rgba(102,187,106,.35);
}
.ex-box-done:hover { border-color: rgba(102,187,106,.65); }

.ex-box-avatar-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2/1;
  overflow: hidden;
  background: rgba(255,255,255,.03);
}
.ex-box-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ex-box-done-badge {
  position: absolute;
  top: .5rem; right: .5rem;
  width: 24px; height: 24px;
  background: #66bb6a;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.ex-box-done-badge svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; }

.ex-box-body { padding: .75rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.ex-box-corp { font-size: .65rem; color: var(--v2-muted); margin-right: .25rem; }
.ex-box-name { font-size: .85rem; font-weight: 600; color: var(--v2-fg); line-height: 1.3; }
.ex-box-cat  { font-size: .68rem; color: var(--v2-muted); font-family: var(--v2-font-mono); }
.ex-box-meta { display: flex; align-items: center; gap: .5rem; margin-top: .1rem; flex-wrap: wrap; }
.ex-os-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .65rem;
  color: var(--v2-muted);
}
.ex-os-badge svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.ex-flag-count {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .65rem;
  color: var(--v2-muted);
  font-family: var(--v2-font-mono);
}
.ex-flag-count svg { width: 9px; height: 9px; stroke: var(--v2-purple); fill: none; stroke-width: 2; stroke-linecap: round; }

.ex-box-progress { margin-top: .35rem; display: flex; align-items: center; gap: .4rem; }
.ex-prog-mini { font-size: .62rem; color: var(--v2-muted); font-family: var(--v2-font-mono); white-space: nowrap; }

.ex-box-glow {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(102,187,106,.4);
  pointer-events: none;
}

/* Locked level */
.ex-level-locked {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: rgba(255,255,255,.03);
  border: 1px dashed var(--v2-border);
  border-radius: 8px;
  font-size: .8rem;
  color: var(--v2-muted);
}
.ex-level-locked svg { width: 16px; height: 16px; stroke: var(--v2-muted); fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }

/* Empty state */
.ex-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 4rem 1rem;
  color: var(--v2-muted);
  font-size: .82rem;
}
.ex-empty svg { width: 40px; height: 40px; stroke: var(--v2-muted); fill: none; stroke-width: 1.5; stroke-linecap: round; opacity: .35; }

/* ============================================================
   BOX DETAIL PAGE — redesigned
   ============================================================ */

/* Hero */
.bx-hero {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(0,240,255,.04) 0%, rgba(255,61,248,.03) 100%);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
  flex-wrap: wrap;
}
.bx-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, rgba(0,240,255,.06) 0%, transparent 60%);
  pointer-events: none;
}
.bx-hero-avatar {
  width: 260px; height: 165px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(0,240,255,.3);
  box-shadow: 0 0 28px rgba(0,240,255,.15), 0 4px 20px rgba(0,0,0,.4);
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.bx-hero-placeholder {
  width: 260px; height: 165px;
  border-radius: 8px;
  border: 1px dashed var(--v2-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--v2-muted);
  position: relative; z-index: 1;
}
.bx-hero-placeholder svg { width: 52px; height: 52px; stroke: currentColor; fill: none; stroke-width: 1.5; opacity: .35; }
.bx-hero-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.bx-hero-corp {
  font-size: .68rem; color: rgba(0,240,255,.6); font-family: var(--v2-font);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: .2rem;
}
.bx-hero-title {
  font-size: 1.65rem; font-weight: 900; color: #ffffff;
  margin: 0 0 .5rem; letter-spacing: -.02em; line-height: 1.1;
}

/* Maze background */
.bx-maze-bg {
  position: absolute;
  right: -60px; top: 50%;
  transform: translateY(-50%);
  width: 400px; height: 400px;
  pointer-events: none;
  z-index: 0;
  opacity: .10;
}
.bx-maze-bg svg { width: 100%; height: 100%; }
.bx-maze-outer {
  transform-box: fill-box;
  transform-origin: center;
  animation: bx-maze-cw 100s linear infinite;
}
.bx-maze-inner {
  transform-box: fill-box;
  transform-origin: center;
  animation: bx-maze-ccw 65s linear infinite;
}
@keyframes bx-maze-cw  { to { transform: rotate(360deg); } }
@keyframes bx-maze-ccw { to { transform: rotate(-360deg); } }
.bx-hero-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.bx-hero-progress { display: flex; align-items: center; gap: .75rem; }
.bx-hero-prog-bg {
  flex: 1; height: 4px; background: rgba(255,255,255,.06);
  border-radius: 2px; overflow: hidden; max-width: 200px;
}
.bx-hero-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--v2-cyan), var(--v2-purple));
  border-radius: 2px; transition: width .6s ease;
}
.bx-hero-prog-fill.bx-complete { background: var(--v2-green); }
.bx-hero-prog-label {
  font-size: .68rem; font-family: var(--v2-font-mono);
  color: var(--v2-muted); white-space: nowrap;
}
.bx-hero-prog-label.bx-complete { color: var(--v2-green); }
.bx-hero-actions {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: .5rem; flex-shrink: 0; position: relative; z-index: 1;
}

/* Lab button */
.bx-lab-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .85rem;
  border-radius: 6px;
  font-family: var(--v2-font-mono); font-size: .78rem; font-weight: 600;
  cursor: pointer; border: 1px solid; white-space: nowrap;
  transition: background .2s, border-color .2s, box-shadow .2s;
  letter-spacing: .04em;
}
.bx-lab-btn:disabled { cursor: not-allowed; }
.bx-lab-loading {
  background: rgba(127,127,213,.08); border-color: rgba(127,127,213,.25);
  color: var(--v2-muted);
}
.bx-lab-stopped {
  background: rgba(57,255,20,.07); border-color: rgba(57,255,20,.35);
  color: var(--v2-green);
}
.bx-lab-stopped:hover {
  background: rgba(57,255,20,.14); border-color: rgba(57,255,20,.65);
  box-shadow: 0 0 12px rgba(57,255,20,.2);
}
.bx-lab-running {
  background: rgba(255,23,68,.07); border-color: rgba(255,23,68,.35);
  color: var(--v2-red);
}
.bx-lab-running:hover {
  background: rgba(255,23,68,.14); border-color: rgba(255,23,68,.65);
  box-shadow: 0 0 12px rgba(255,23,68,.2);
}
.bx-lab-icon { width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; }
.bx-lab-icon svg { width: 13px; height: 13px; display: block; }
.bx-lab-spin { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.bx-lab-play { fill: currentColor; stroke: none; }
.bx-lab-stop { fill: currentColor; stroke: none; }
.bx-lab-loading .bx-lab-play, .bx-lab-loading .bx-lab-stop { display: none; }
.bx-lab-stopped .bx-lab-spin, .bx-lab-stopped .bx-lab-stop { display: none; }
.bx-lab-running .bx-lab-spin, .bx-lab-running .bx-lab-play { display: none; }
@keyframes bx-spin { to { transform: rotate(360deg); } }
.bx-lab-spin { animation: bx-spin .9s linear infinite; }
.bx-lab-info-txt {
  font-size: .7rem; color: var(--v2-red);
  font-family: var(--v2-font-mono); text-align: right; max-width: 180px;
}

/* Description */
.bx-desc {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  margin-bottom: 1.25rem;
  background: rgba(255,255,255,.018);
}
.bx-section-label {
  font-size: .58rem; font-family: var(--v2-font); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--v2-muted); margin-bottom: .75rem;
  display: flex; align-items: center; gap: .5rem;
}
.bx-section-label::after { content: ''; flex: 1; height: 1px; background: var(--v2-border); }
.bx-desc-body {
  font-size: .85rem; line-height: 1.75; color: var(--v2-fg);
}
.bx-desc-body h1, .bx-desc-body h2, .bx-desc-body h3, .bx-desc-body h4 {
  color: var(--v2-cyan); margin: 1rem 0 .4rem;
}
.bx-desc-body h1 { font-size: 1.1rem; }
.bx-desc-body h2 { font-size: .95rem; }
.bx-desc-body h3 { font-size: .85rem; }
.bx-desc-body h4 { font-size: .8rem; }
.bx-desc-body p { margin: 0 0 .7rem; }
.bx-desc-body p:last-child { margin-bottom: 0; }
.bx-desc-body code {
  font-family: var(--v2-font-mono);
  background: rgba(0,240,255,.08); border: 1px solid rgba(0,240,255,.15);
  border-radius: 3px; padding: .1em .35em; font-size: .85em; color: var(--v2-cyan);
}
.bx-desc-body pre {
  background: rgba(0,0,0,.4); border: 1px solid var(--v2-border);
  border-radius: 6px; padding: .875rem 1rem; overflow-x: auto; margin: .75rem 0;
}
.bx-desc-body pre code { background: none; border: none; padding: 0; color: var(--v2-fg); }
.bx-desc-body ul, .bx-desc-body ol { padding-left: 1.5rem; margin-bottom: .7rem; }
.bx-desc-body li { margin-bottom: .2rem; }
.bx-desc-body a { color: var(--v2-cyan); text-decoration: underline; }
.bx-desc-body blockquote {
  border-left: 3px solid var(--v2-cyan); padding-left: 1rem;
  color: var(--v2-muted); margin: .75rem 0; font-style: italic;
}
.bx-desc-body strong { color: var(--v2-fg); }
.bx-desc-body table { border-collapse: collapse; width: 100%; margin: .75rem 0; }
.bx-desc-body th, .bx-desc-body td { border: 1px solid var(--v2-border); padding: .4rem .75rem; font-size: .8rem; }
.bx-desc-body th { color: var(--v2-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.bx-desc-body hr { border: none; border-top: 1px solid var(--v2-border); margin: 1rem 0; }

/* Flag cards */
.bx-flags-section { margin-bottom: 1.25rem; }
.bx-flags-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem;
}
.bx-flags-count {
  font-size: .68rem; font-family: var(--v2-font-mono); color: var(--v2-muted);
}
.bx-flag-card {
  border: 1px solid var(--v2-border); border-radius: 8px;
  margin-bottom: .625rem; background: var(--v2-surface);
  position: relative; overflow: hidden; transition: border-color .2s, box-shadow .2s;
}
.bx-flag-card:hover { border-color: rgba(0,240,255,.2); box-shadow: 0 0 12px rgba(0,240,255,.05); }
.bx-flag-card-captured {
  border-color: rgba(57,255,20,.25) !important;
  background: rgba(57,255,20,.022) !important;
  box-shadow: 0 0 18px rgba(57,255,20,.06) !important;
}
.bx-flag-card-maxed { opacity: .55; }
.bx-flag-card-locked { opacity: .5; }
.bx-flag-stripe {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.bx-flag-stripe-default { background: rgba(0,240,255,.3); }
.bx-flag-stripe-captured { background: var(--v2-green); }
.bx-flag-stripe-maxed { background: var(--v2-muted); }
.bx-flag-stripe-locked { background: rgba(255,255,255,.08); }
.bx-flag-inner { padding: .875rem 1.1rem .875rem 1.3rem; }
.bx-flag-top { display: flex; align-items: flex-start; gap: .75rem; }
.bx-flag-num {
  font-size: .58rem; font-family: var(--v2-font-mono); color: var(--v2-muted);
  background: rgba(255,255,255,.04); border: 1px solid var(--v2-border);
  border-radius: 4px; padding: .15rem .4rem; flex-shrink: 0;
  margin-top: .08rem; min-width: 24px; text-align: center;
}
.bx-flag-main { flex: 1; min-width: 0; }
.bx-flag-name {
  font-size: .82rem; font-weight: 700; color: var(--v2-cyan);
  margin-bottom: .2rem; letter-spacing: .01em;
}
.bx-flag-name-muted { color: var(--v2-muted); }
.bx-flag-desc {
  font-size: .8rem; color: var(--v2-muted); line-height: 1.65;
  position: relative;
}
.bx-flag-desc p { margin: 0 0 .45rem; }
.bx-flag-desc p:last-child { margin-bottom: 0; }
.bx-flag-desc code {
  font-family: var(--v2-font-mono); background: rgba(0,240,255,.08);
  border: 1px solid rgba(0,240,255,.14);
  border-radius: 3px; padding: .05em .35em; font-size: .82em; color: var(--v2-cyan);
}
.bx-flag-desc pre {
  background: rgba(0,0,0,.4); border: 1px solid var(--v2-border);
  border-radius: 6px; padding: .75rem 1rem; overflow-x: auto; margin: .5rem 0;
  font-size: .78rem;
}
.bx-flag-desc pre code { background: none; border: none; padding: 0; color: var(--v2-fg); }
.bx-flag-desc strong { color: var(--v2-fg); }
.bx-flag-desc em { color: rgba(255,255,255,.55); }
.bx-flag-desc ul, .bx-flag-desc ol { padding-left: 1.25rem; margin-bottom: .4rem; }
.bx-flag-desc li { margin-bottom: .15rem; }
.bx-flag-desc h1, .bx-flag-desc h2, .bx-flag-desc h3 { color: var(--v2-cyan); font-size: .82rem; margin: .5rem 0 .2rem; }
.bx-flag-desc blockquote { border-left: 2px solid var(--v2-cyan); padding-left: .75rem; color: var(--v2-muted); margin: .4rem 0; font-style: italic; }
/* Collapsible for captured flags */
.bx-flag-desc.bx-desc-collapsed {
  max-height: 3.3em;
  overflow: hidden;
}
.bx-flag-desc.bx-desc-collapsed::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2em;
  background: linear-gradient(to bottom, transparent, #0d0d19);
  pointer-events: none;
}
.bx-flag-card-captured .bx-flag-desc.bx-desc-collapsed::after {
  background: linear-gradient(to bottom, transparent, #0d1019);
}
.bx-desc-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-top: .3rem; padding: 0;
  font-size: .68rem; font-family: var(--v2-font-mono);
  color: var(--v2-cyan); background: none; border: none;
  cursor: pointer; opacity: .65; transition: opacity .15s;
  letter-spacing: .02em;
}
.bx-desc-toggle:hover { opacity: 1; }
.bx-desc-toggle svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .2s; }
.bx-desc-toggle.bx-desc-open svg { transform: rotate(180deg); }
.bx-flag-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; flex-shrink: 0;
}
.bx-flag-captured-badge {
  display: flex; align-items: center; gap: .3rem; font-size: .7rem;
  color: var(--v2-green); font-family: var(--v2-font); font-weight: 700;
}
.bx-flag-captured-badge svg { width: 14px; height: 14px; stroke: var(--v2-green); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.bx-flag-card-pending {
  border-color: rgba(255,190,60,.25) !important;
  background: rgba(255,190,60,.022) !important;
}
.bx-flag-stripe-pending { background: #ffbe3c; }
.bx-flag-pending-badge {
  display: flex; align-items: center; gap: .3rem; font-size: .7rem;
  color: #ffbe3c; font-family: var(--v2-font); font-weight: 700;
}
.bx-flag-pending-badge svg { width: 13px; height: 13px; stroke: #ffbe3c; fill: none; stroke-width: 2; }
.bx-pending-status {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; color: #ffbe3c; font-family: var(--v2-font-mono); opacity: .9;
}
.bx-admin-note {
  display: flex; align-items: flex-start; gap: .4rem;
  margin-top: .4rem; padding: .4rem .6rem;
  background: rgba(0,240,255,.06); border: 1px solid rgba(0,240,255,.14);
  border-radius: 5px; font-size: .75rem; color: rgba(255,255,255,.7); line-height: 1.5;
}
.bx-admin-note svg { stroke: var(--v2-cyan); flex-shrink: 0; margin-top: .1rem; }
.bx-flag-atts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.bx-flag-att-link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .55rem; border-radius: 5px;
  background: rgba(0,183,255,.08); border: 1px solid rgba(0,183,255,.25);
  color: var(--v2-blue); font-size: .72rem; font-family: var(--v2-font-mono);
  text-decoration: none; transition: background .15s, border-color .15s;
}
.bx-flag-att-link:hover { background: rgba(0,183,255,.16); border-color: rgba(0,183,255,.5); color: var(--v2-blue); }
.bx-flag-reward { font-size: .7rem; font-family: var(--v2-font-mono); color: var(--v2-muted); }
.bx-flag-reward-earned { color: var(--v2-cyan); font-weight: 700; }
.bx-flag-meta {
  display: flex; align-items: center; gap: 1rem;
  margin-top: .6rem; padding-top: .5rem;
  border-top: 1px solid rgba(255,255,255,.04);
  flex-wrap: wrap;
}
.bx-flag-meta-item {
  display: flex; align-items: center; gap: .25rem;
  font-size: .65rem; font-family: var(--v2-font-mono); color: var(--v2-muted);
}
.bx-flag-meta-item svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.bx-flag-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

/* Special submit button */
.bx-submit-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem 1rem;
  background: linear-gradient(135deg, rgba(0,240,255,.14) 0%, rgba(127,127,213,.14) 100%);
  border: 1px solid rgba(0,240,255,.45);
  border-radius: 6px;
  color: var(--v2-cyan);
  font-family: var(--v2-font);
  font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: background .2s, border-color .2s, box-shadow .2s, color .15s;
  text-shadow: 0 0 8px rgba(0,240,255,.4);
  box-shadow: 0 0 10px rgba(0,240,255,.1), inset 0 1px 0 rgba(0,240,255,.08);
  white-space: nowrap;
}
.bx-submit-btn:hover {
  background: linear-gradient(135deg, rgba(0,240,255,.26) 0%, rgba(127,127,213,.22) 100%);
  border-color: rgba(0,240,255,.75);
  box-shadow: 0 0 22px rgba(0,240,255,.28), 0 0 44px rgba(0,240,255,.1), inset 0 1px 0 rgba(0,240,255,.2);
  color: #fff;
}
.bx-submit-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  transition: left .5s ease;
}
.bx-submit-btn:hover::before { left: 150%; }
.bx-submit-btn:active { transform: scale(.97); }
.bx-submit-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.bx-submit-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; flex-shrink: 0; }

/* File picker for upload flag */
.bx-file-pick {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem .5rem .75rem;
  background: rgba(0,0,0,.45); border: 1px solid rgba(0,240,255,.25);
  border-radius: 4px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  min-width: 0;
}
.bx-file-pick:hover {
  border-color: var(--v2-cyan);
  box-shadow: 0 0 0 2px rgba(0,255,247,.1);
}
.bx-file-pick-icon {
  width: 14px; height: 14px; flex-shrink: 0;
  stroke: var(--v2-cyan); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  opacity: .6;
}
.bx-file-pick-name {
  flex: 1; min-width: 0;
  font-family: var(--v2-font-mono); font-size: .8rem;
  color: var(--v2-text-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.bx-file-pick-name:not(:empty).has-file { color: var(--v2-cyan); }
.bx-file-pick-btn {
  flex-shrink: 0; padding: .2rem .55rem;
  background: rgba(0,240,255,.1); border: 1px solid rgba(0,240,255,.3);
  border-radius: 3px; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; color: var(--v2-cyan);
  font-family: var(--v2-font-mono); text-transform: uppercase;
}

.bx-flag-choices { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.bx-flag-choice-chip {
  padding: .1rem .4rem; border: 1px solid rgba(0,240,255,.18);
  border-radius: 3px; font-size: .65rem; font-family: var(--v2-font-mono); color: var(--v2-muted);
}

/* Hint inline row */
.bx-hint-inline {
  background: rgba(255,199,0,.04); border: 1px solid rgba(255,199,0,.15);
  border-radius: 6px; padding: .6rem .875rem;
  margin-top: .625rem; font-size: .78rem; color: #ffc700; line-height: 1.5;
}
.bx-hint-inline-label {
  font-size: .58rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,199,0,.45); margin-bottom: .15rem;
}

/* Section card */
.bx-section {
  border: 1px solid var(--v2-border); border-radius: 10px;
  margin-bottom: 1.25rem; background: var(--v2-surface); overflow: hidden;
}
.bx-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1.25rem; border-bottom: 1px solid var(--v2-border);
  background: rgba(255,255,255,.018);
}
.bx-section-body { padding: 1rem 1.25rem; }

/* Box-level hints */
.bx-hint-row {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.bx-hint-row:last-child { border-bottom: none; }
.bx-hint-num {
  font-size: .62rem; font-family: var(--v2-font-mono); color: var(--v2-muted);
  background: rgba(255,255,255,.04); border: 1px solid var(--v2-border);
  border-radius: 4px; padding: .12rem .4rem; flex-shrink: 0;
  min-width: 26px; text-align: center; margin-top: .05rem;
}
.bx-hint-content { flex: 1; font-size: .8rem; }
.bx-hint-text { color: var(--v2-fg); line-height: 1.5; }
.bx-hint-text-muted { color: var(--v2-muted); font-style: italic; }
.bx-hint-cost { font-size: .7rem; font-family: var(--v2-font-mono); color: rgba(255,199,0,.7); }
.bx-hint-status { font-size: .68rem; color: var(--v2-muted); }

/* IP addresses */
.bx-ip-row {
  display: flex; align-items: center; gap: 1.25rem;
  padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: .8rem;
}
.bx-ip-row:last-child { border-bottom: none; }
.bx-ip-addr { font-family: var(--v2-font-mono); color: var(--v2-cyan); flex: 1; }
.bx-ip-meta { font-family: var(--v2-font-mono); color: var(--v2-muted); font-size: .72rem; }

/* Inline modal error */
.bx-modal-error {
  background: rgba(255,50,50,.08); border: 1px solid rgba(255,50,50,.25);
  border-radius: 6px; padding: .5rem .75rem;
  font-size: .78rem; color: var(--v2-red); margin-bottom: .75rem;
}
.bx-modal-info {
  background: rgba(0,240,255,.05); border: 1px solid rgba(0,240,255,.18);
  border-radius: 6px; padding: .5rem .75rem;
  font-size: .78rem; color: var(--v2-cyan); margin-bottom: .75rem;
}

/* Celebration overlay */
.bx-celebrate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
  background: rgba(4,4,10,.75);
  backdrop-filter: blur(8px);
  animation: bx-cel-in .25s ease;
}
.bx-celebrate.bx-cel-out { animation: bx-cel-out .5s ease forwards; }
@keyframes bx-cel-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bx-cel-out { from { opacity: 1; } to { opacity: 0; } }
.bx-celebrate-ring { width: 130px; height: 130px; position: relative; margin-bottom: 1.5rem; }
.bx-celebrate-ring svg { width: 130px; height: 130px; }
.bx-cel-circle { stroke: rgba(57,255,20,.2); stroke-width: 2; fill: rgba(57,255,20,.04); }
.bx-cel-check {
  stroke: var(--v2-green); stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round; fill: none;
  stroke-dasharray: 65; stroke-dashoffset: 65;
  animation: bx-draw-check .55s .15s cubic-bezier(.2,.8,.4,1) forwards;
}
@keyframes bx-draw-check { to { stroke-dashoffset: 0; } }
.bx-cel-glow {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 60px rgba(57,255,20,.3), 0 0 100px rgba(57,255,20,.15);
  animation: bx-glow-pulse 1.5s ease infinite alternate;
}
@keyframes bx-glow-pulse {
  from { opacity: .6; transform: scale(.95); }
  to   { opacity: 1;  transform: scale(1.05); }
}
.bx-cel-title {
  font-size: 1.6rem; font-weight: 900; color: var(--v2-green);
  letter-spacing: .04em; text-shadow: 0 0 40px rgba(57,255,20,.7);
  animation: bx-pop .4s .3s ease backwards;
}
.bx-cel-sub {
  font-size: .82rem; color: var(--v2-muted); margin-top: .35rem;
  font-family: var(--v2-font-mono);
  animation: bx-pop .4s .4s ease backwards;
}
.bx-cel-pts {
  font-size: 1.15rem; font-weight: 700; color: var(--v2-cyan);
  font-family: var(--v2-font-mono); margin-top: .25rem;
  animation: bx-pop .4s .5s ease backwards;
  text-shadow: 0 0 14px rgba(0,240,255,.5);
}
@keyframes bx-pop {
  from { opacity: 0; transform: scale(.7) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.bx-cel-cd {
  margin-top: 1rem; padding: .45rem 1.1rem; border-radius: 8px;
  background: rgba(0,240,255,.13); border: 1px solid rgba(0,240,255,.35);
  font-size: .95rem; font-weight: 700; color: #00f0ff;
  letter-spacing: .04em; text-shadow: 0 0 10px rgba(0,240,255,.5);
  animation: bx-pop .4s .8s ease backwards;
}
.bx-cel-cd span {
  font-weight: 900; font-size: 1.2rem; color: #fff;
  display: inline-block; min-width: 1.2ch; text-align: center;
  text-shadow: 0 0 16px #00f0ff;
}
.bx-confetti {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  animation: bx-conf-fall linear forwards;
}
@keyframes bx-conf-fall {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(0); opacity: 0; }
}
@keyframes bx-shake {
  0%,100% { transform: translateX(0); }
  20%  { transform: translateX(-7px); }
  40%  { transform: translateX(7px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
}
.bx-shake { animation: bx-shake .4s ease; }

/* Newly-captured highlight flash on card */
@keyframes bx-captured-flash {
  0%   { box-shadow: 0 0 0 0 rgba(57,255,20,.6); }
  50%  { box-shadow: 0 0 0 8px rgba(57,255,20,.2); }
  100% { box-shadow: 0 0 18px rgba(57,255,20,.06); }
}
.bx-flag-card-flash { animation: bx-captured-flash .8s ease forwards; }

/* ============================================================
   Settings page  (st-*)
   ============================================================ */

/* Alerts */
.st-alert {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem 1rem; border-radius: 8px; border: 1px solid;
  font-size: .82rem; font-family: var(--v2-font-mono);
  margin-bottom: .75rem;
}
.st-alert svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.st-alert-error   { background: rgba(255,23,68,.07);  border-color: rgba(255,23,68,.3);  color: var(--v2-red); }
.st-alert-success { background: rgba(57,255,20,.07);  border-color: rgba(57,255,20,.3);  color: var(--v2-green); }

/* Profile card */
.st-profile-card {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(0,240,255,.04) 0%, rgba(255,61,248,.03) 100%);
  border: 1px solid var(--v2-border); border-radius: 10px;
  margin-bottom: 1.25rem;
}
.st-profile-avatar {
  width: 72px; height: 72px; border-radius: 8px; object-fit: cover;
  border: 1px solid rgba(0,240,255,.25);
  box-shadow: 0 0 16px rgba(0,240,255,.1);
  flex-shrink: 0;
}
.st-profile-avatar-placeholder {
  width: 72px; height: 72px; border-radius: 8px; flex-shrink: 0;
  border: 1px dashed var(--v2-border);
  display: flex; align-items: center; justify-content: center; color: var(--v2-muted);
}
.st-profile-avatar-placeholder svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.5; opacity: .5; }
.st-profile-handle {
  font-family: var(--v2-font); font-size: 1.15rem; font-weight: 700;
  color: var(--v2-white); letter-spacing: -.01em; margin-bottom: .2rem;
}
.st-profile-team {
  display: flex; align-items: center; gap: .3rem;
  font-size: .75rem; color: var(--v2-cyan); font-family: var(--v2-font-mono);
  margin-bottom: .15rem;
}
.st-profile-team svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
.st-profile-email { font-size: .72rem; color: var(--v2-muted); font-family: var(--v2-font-mono); }

/* Settings section */
.st-section {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border); border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.st-section-hd {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--v2-font); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--v2-cyan); margin-bottom: 1rem;
  padding-bottom: .65rem; border-bottom: 1px solid rgba(0,240,255,.1);
}
.st-section-hd svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.st-form { margin: 0; }
.st-subsection-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--v2-muted); margin: .75rem 0 .5rem;
}

/* Avatar grid */
.st-avatar-grid {
  display: flex; flex-wrap: wrap; gap: .5rem;
  max-height: 220px; overflow-y: auto; padding: .25rem 0;
}
.st-avatar-grid::-webkit-scrollbar { width: 4px; }
.st-avatar-grid::-webkit-scrollbar-thumb { background: rgba(0,255,247,.2); border-radius: 2px; }
.st-av-thumb {
  position: relative; cursor: pointer; background: none; border: 2px solid transparent;
  border-radius: 6px; padding: 2px; transition: border-color .15s;
  flex-shrink: 0;
}
.st-av-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; display: block; }
.st-av-thumb:hover { border-color: rgba(0,240,255,.4); }
.st-av-thumb.st-av-selected { border-color: var(--v2-cyan); box-shadow: 0 0 8px rgba(0,240,255,.3); }
.st-av-used { opacity: .55; }
.st-av-badge {
  position: absolute; top: 3px; right: 3px;
  font-size: 8px; color: var(--v2-cyan); line-height: 1;
}

/* Theme grid */
.st-theme-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.st-theme-opt {
  display: flex; align-items: center; gap: .4rem;
  padding: .35rem .75rem; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(0,240,255,.2); font-size: .8rem;
  font-family: var(--v2-font-mono); color: var(--v2-muted);
  transition: border-color .15s, color .15s;
}
.st-theme-opt input[type=radio] { display: none; }
.st-theme-opt:hover { border-color: rgba(0,240,255,.4); color: var(--v2-white); }
.st-theme-opt.st-theme-active,
.st-theme-opt:has(input:checked) {
  border-color: var(--v2-cyan); color: var(--v2-cyan);
  background: rgba(0,240,255,.06);
}

/* UI preference option buttons */
.st-ui-opt {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(0,240,255,.2); font-size: .82rem;
  font-family: var(--v2-font-mono); color: var(--v2-muted);
  transition: border-color .15s, color .15s, background .15s;
}
.st-ui-opt svg { width: 18px; height: 18px; flex-shrink: 0; }
.st-ui-opt input[type=radio] { display: none; }
.st-ui-opt:hover { border-color: rgba(0,240,255,.4); color: var(--v2-white); }
.st-ui-opt.st-ui-active,
.st-ui-opt:has(input:checked) {
  border-color: var(--v2-cyan); color: var(--v2-cyan);
  background: rgba(0,240,255,.07);
}

/* Settings-scoped overrides (immune to theme CSS) */
.st-input {
  display: block; width: 100%;
  padding: .45rem .75rem;
  background: rgba(0,0,0,.5) !important;
  border: 1px solid rgba(0,240,255,.3) !important;
  border-radius: 4px;
  color: #00fff7 !important;
  font-family: 'IBM Plex Mono','Courier New',monospace;
  font-size: .82rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.st-input::placeholder { color: rgba(0,255,247,.25) !important; }
.st-input:focus {
  border-color: rgba(0,240,255,.6) !important;
  box-shadow: 0 0 0 2px rgba(0,240,255,.12) !important;
}
.st-btn-cy {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .3rem .7rem;
  background: transparent !important;
  color: #00fff7 !important;
  border: 1px solid #00fff7 !important;
  border-radius: 4px;
  font-family: 'Orbitron','IBM Plex Mono',monospace;
  font-size: .65rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 8px rgba(0,255,247,.2) !important;
  transition: all .15s;
}
.st-btn-cy:hover {
  background: rgba(0,255,247,.1) !important;
  box-shadow: 0 0 14px rgba(0,255,247,.35) !important;
  color: #83fffb !important;
}
.st-file-row {
  display: flex; align-items: center; gap: .6rem;
}
.st-browse-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .28rem .6rem;
  background: rgba(0,240,255,.08);
  border: 1px solid rgba(0,240,255,.3);
  border-radius: 4px;
  color: #00fff7;
  font-family: 'Orbitron','IBM Plex Mono',monospace;
  font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
  transition: background .15s;
}
.st-browse-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.st-browse-btn:hover { background: rgba(0,240,255,.16); }
.st-file-name {
  flex: 1; min-width: 0;
  font-family: 'IBM Plex Mono','Courier New',monospace; font-size: .78rem;
  color: rgba(0,255,247,.45);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Docs page ─────────────────────────────────────────────── */
.dc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.dc-card {
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(0,240,255,.2);
  border-radius: 8px;
  padding: 1.25rem 1.25rem 1rem;
  display: flex; flex-direction: column; gap: .6rem;
  transition: border-color .2s, box-shadow .2s;
}
.dc-card:hover {
  border-color: rgba(0,240,255,.45);
  box-shadow: 0 0 18px rgba(0,240,255,.07);
}
.dc-icon {
  width: 48px; height: 48px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(0,240,255,.05);
  padding: 5px;
}
.dc-name {
  font-family: 'Orbitron','IBM Plex Mono',monospace;
  font-size: .88rem; font-weight: 700;
  color: var(--v2-cyan);
  text-shadow: var(--v2-glow-cyan);
}
.dc-desc {
  font-size: .8rem;
  color: var(--v2-muted);
  line-height: 1.55;
  flex: 1;
}
.dc-link {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .65rem;
  background: transparent;
  color: #00fff7;
  border: 1px solid rgba(0,240,255,.35);
  border-radius: 4px;
  font-family: 'Orbitron','IBM Plex Mono',monospace;
  font-size: .62rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; width: fit-content; flex-shrink: 0;
  transition: all .15s;
}
.dc-link:hover {
  background: rgba(0,255,247,.1);
  border-color: var(--v2-cyan);
  box-shadow: 0 0 10px rgba(0,255,247,.18);
  color: #00fff7;
}
.dc-empty {
  text-align: center; padding: 3.5rem 1rem;
  color: var(--v2-muted); font-size: .88rem;
}
/* Admin docs table */
.dc-admin-table {
  width: 100%; border-collapse: collapse; font-size: .82rem;
}
.dc-admin-table th {
  text-align: left;
  font-family: 'Orbitron','IBM Plex Mono',monospace;
  font-size: .66rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--v2-muted);
  border-bottom: 1px solid rgba(0,240,255,.2);
  padding: .5rem .75rem;
}
.dc-admin-table td {
  padding: .6rem .75rem;
  border-bottom: 1px solid rgba(0,240,255,.07);
  color: var(--v2-white);
  vertical-align: middle;
}
.dc-admin-table tr:last-child td { border-bottom: none; }
.dc-admin-icon {
  width: 32px; height: 32px; object-fit: contain;
  border-radius: 4px; background: rgba(0,240,255,.05);
}
.dc-admin-name { color: var(--v2-cyan); font-weight: 600; }
.dc-admin-url {
  display: block;
  font-family: 'IBM Plex Mono','Courier New',monospace; font-size: .74rem;
  color: rgba(0,240,255,.5); text-decoration: none;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dc-admin-url:hover { color: var(--v2-cyan); text-decoration: underline; }
.dc-del-btn {
  border-color: rgba(255,60,60,.4) !important;
  color: #ff5555 !important;
  box-shadow: none !important;
}
.dc-del-btn:hover {
  background: rgba(255,60,60,.1) !important;
  border-color: rgba(255,60,60,.7) !important;
  box-shadow: 0 0 8px rgba(255,60,60,.2) !important;
}

/* ── Open Boxes admin page ─────────────────────────────────── */
.ob-search-row {
  display: flex; align-items: center; gap: .4rem;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(0,240,255,.25);
  border-radius: 5px;
  padding: .3rem .6rem;
  margin-bottom: .4rem;
}
.ob-search-row svg {
  width: 13px; height: 13px; stroke: rgba(0,240,255,.4); fill: none; stroke-width: 2; flex-shrink: 0;
}
.ob-search-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--v2-white); font-family: 'IBM Plex Mono','Courier New',monospace; font-size: .8rem;
}
.ob-search-input::placeholder { color: rgba(0,240,255,.25); }
.ob-clear {
  background: transparent; border: none; cursor: pointer; padding: 0; line-height: 0;
  color: rgba(0,240,255,.35);
}
.ob-clear:hover { color: var(--v2-cyan); }
.ob-clear svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.ob-list {
  border: 1px solid rgba(0,240,255,.15);
  border-radius: 5px;
  max-height: 200px;
  overflow-y: auto;
  background: rgba(0,0,0,.35);
  scrollbar-width: thin;
  scrollbar-color: rgba(0,240,255,.2) transparent;
}
.ob-opt {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .45rem .75rem; background: transparent; border: none;
  color: var(--v2-white); font-size: .82rem; text-align: left; cursor: pointer;
  transition: background .12s;
}
.ob-opt:hover { background: rgba(0,240,255,.07); }
.ob-opt.ob-opt-on { background: rgba(0,240,255,.1); color: var(--v2-cyan); }
.ob-check { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; opacity: 0; flex-shrink: 0; }
.ob-opt.ob-opt-on .ob-check { opacity: 1; }
.ob-selection {
  margin-top: .4rem; padding: .25rem .6rem;
  background: rgba(0,240,255,.08); border-radius: 4px;
  color: var(--v2-cyan); font-size: .78rem; font-family: 'IBM Plex Mono',monospace;
  width: fit-content;
}
/* Scope toggle */
.ob-scope-row { display: flex; gap: .5rem; }
.ob-scope-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .85rem;
  background: transparent; border: 1px solid rgba(0,240,255,.2); border-radius: 5px;
  color: var(--v2-muted); font-size: .78rem; font-family: 'IBM Plex Mono',monospace;
  cursor: pointer; transition: all .15s;
}
.ob-scope-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.ob-scope-btn:hover { border-color: rgba(0,240,255,.4); color: var(--v2-white); }
.ob-scope-btn.ob-scope-on {
  border-color: var(--v2-cyan); color: var(--v2-cyan);
  background: rgba(0,240,255,.07);
  box-shadow: 0 0 8px rgba(0,240,255,.1);
}
/* User opt row */
.ob-user-opt {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .75rem; cursor: pointer; transition: background .1s;
}
.ob-user-opt:hover { background: rgba(0,240,255,.05); }
.ob-user-opt input[type=checkbox] { accent-color: var(--v2-cyan); width: 14px; height: 14px; flex-shrink: 0; }
.ob-user-handle { font-size: .82rem; color: var(--v2-white); }
.ob-empty-msg { padding: .75rem; color: var(--v2-muted); font-size: .8rem; text-align: center; }
/* Badges */
.ob-badge {
  display: inline-block; padding: .15rem .5rem; border-radius: 4px;
  font-family: 'Orbitron','IBM Plex Mono',monospace;
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.ob-badge-all      { background: rgba(0,240,255,.1);  color: var(--v2-cyan);  border: 1px solid rgba(0,240,255,.25); }
.ob-badge-specific { background: rgba(127,63,191,.15); color: #b070ff;         border: 1px solid rgba(127,63,191,.3); }

/* ── Homework (amber / gold accent) ────────────────────────── */
.hw-section { border-color: rgba(245,192,48,.25) !important; }
.hw-hd {
  color: #f5c030 !important;
  text-shadow: 0 0 8px rgba(245,192,48,.4) !important;
}
.hw-hd svg { stroke: #f5c030 !important; }
.hw-search-row { border-color: rgba(245,192,48,.25) !important; }
.hw-search-row svg { stroke: rgba(245,192,48,.4) !important; }
.hw-list { border-color: rgba(245,192,48,.15) !important; }
.hw-opt { color: var(--v2-white); }
.hw-opt:hover { background: rgba(245,192,48,.06) !important; }
.hw-opt-on { background: rgba(245,192,48,.1) !important; color: #f5c030 !important; }
.hw-opt .ob-check { stroke: #f5c030; }
.hw-selection { background: rgba(245,192,48,.1) !important; color: #f5c030 !important; }
/* Segmented group control */
.hw-seg { display: flex; gap: .4rem; }
.hw-seg-btn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(245,192,48,.2); border-radius: 6px;
  color: var(--v2-muted); cursor: pointer; transition: all .15s;
}
.hw-seg-btn:hover { border-color: rgba(245,192,48,.4); color: var(--v2-white); }
.hw-seg-btn.hw-seg-on {
  border-color: #f5c030; color: #f5c030;
  background: rgba(245,192,48,.1);
  box-shadow: 0 0 8px rgba(245,192,48,.15);
}
.hw-seg-num { font-family: 'Orbitron','IBM Plex Mono',monospace; font-size: .9rem; font-weight: 700; }
/* Submit button */
.hw-btn-amber {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .8rem;
  background: transparent;
  color: #f5c030;
  border: 1px solid #f5c030;
  border-radius: 4px;
  font-family: 'Orbitron','IBM Plex Mono',monospace;
  font-size: .65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 8px rgba(245,192,48,.15);
  transition: all .15s;
}
.hw-btn-amber:hover {
  background: rgba(245,192,48,.1);
  box-shadow: 0 0 14px rgba(245,192,48,.3);
}
.hw-btn-amber:disabled { opacity: .35; cursor: not-allowed; }
/* Due date in add form */
.hw-date-input {
  color-scheme: dark;
}
/* Admin table cells */
.hw-name { color: #f5c030; font-weight: 600; }
.hw-group-badge {
  display: inline-block; padding: .12rem .45rem; border-radius: 4px;
  font-family: 'Orbitron','IBM Plex Mono',monospace;
  font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(245,192,48,.1); color: #f5c030; border: 1px solid rgba(245,192,48,.3);
}
.hw-due-label {
  font-family: 'IBM Plex Mono','Courier New',monospace; font-size: .78rem; color: rgba(245,192,48,.65);
}
/* Student homework cards */
.hw-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.hw-card {
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(245,192,48,.22);
  border-radius: 8px;
  padding: 1.1rem 1.1rem .9rem;
  display: flex; flex-direction: column; gap: .6rem;
  transition: border-color .2s, box-shadow .2s;
}
.hw-card-done { opacity: .55; }
.hw-card-done:hover { opacity: .8; }
.hw-card:hover {
  border-color: rgba(245,192,48,.45);
  box-shadow: 0 0 18px rgba(245,192,48,.07);
}
.hw-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.hw-card-name {
  font-family: 'Orbitron','IBM Plex Mono',monospace;
  font-size: .88rem; font-weight: 700;
  color: #f5c030;
  text-shadow: 0 0 8px rgba(245,192,48,.4);
  line-height: 1.25;
}
.hw-card-meta { display: flex; flex-wrap: wrap; gap: .3rem; }
.hw-meta-tag {
  display: inline-block; padding: .1rem .4rem;
  border-radius: 3px; font-size: .68rem;
  background: rgba(245,192,48,.07); color: rgba(245,192,48,.6);
  border: 1px solid rgba(245,192,48,.15);
}
.hw-meta-group {
  display: inline-block; padding: .1rem .4rem;
  border-radius: 3px; font-size: .68rem;
  background: rgba(0,240,255,.05); color: rgba(0,240,255,.45);
  border: 1px solid rgba(0,240,255,.12);
  font-family: 'IBM Plex Mono',monospace;
}
/* Progress */
.hw-progress-wrap { display: flex; align-items: center; gap: .6rem; }
.hw-progress-bar {
  flex: 1; height: 5px; background: rgba(245,192,48,.12); border-radius: 3px; overflow: hidden;
}
.hw-progress-fill {
  height: 100%; background: #f5c030;
  border-radius: 3px; transition: width .4s;
  box-shadow: 0 0 6px rgba(245,192,48,.4);
}
.hw-progress-label {
  font-family: 'IBM Plex Mono','Courier New',monospace;
  font-size: .72rem; color: rgba(245,192,48,.55); white-space: nowrap;
}
/* View button */
.hw-view-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .65rem;
  background: transparent; color: #f5c030;
  border: 1px solid rgba(245,192,48,.35); border-radius: 4px;
  font-family: 'Orbitron','IBM Plex Mono',monospace;
  font-size: .62rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; width: fit-content;
  transition: all .15s;
}
.hw-view-btn:hover {
  background: rgba(245,192,48,.1);
  border-color: #f5c030;
  box-shadow: 0 0 10px rgba(245,192,48,.2);
  color: #f5c030;
}
/* Due date badges */
.hw-due-badge { display: none; } /* legacy — kept for Done pill only */
.hw-done-pill {
  display: inline-block; padding: .18rem .5rem; border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem; font-weight: 600;
  background: rgba(57,255,20,.07); color: #39ff14; border: 1px solid rgba(57,255,20,.2);
  flex-shrink: 0;
}
.hw-due-line {
  display: flex; align-items: center; gap: .4rem;
  font-family: 'IBM Plex Mono', monospace; font-size: .75rem;
  margin: .3rem 0 .5rem;
}
.hw-due-line.hw-due-overdue { color: #ff5555; }
.hw-due-line.hw-due-today   { color: #ff8c00; }
.hw-due-line.hw-due-soon    { color: #f5c030; }
.hw-due-line.hw-due-ok      { color: #39ff14; }
/* Empty state */
.hw-empty {
  text-align: center; padding: 4rem 1rem;
  color: var(--v2-muted); font-size: .88rem;
}

/* ── Homework weekly schedule table ────────────────────────────── */
.hw-sched-table {
  border-top: 1px solid rgba(0,255,247,.08);
}
.hw-sched-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1.25rem;
  border-bottom: 1px solid rgba(0,255,247,.05);
  flex-wrap: wrap;
}
.hw-sched-row:last-child { border-bottom: none; }
.hw-sched-day {
  min-width: 90px;
  font-family: var(--v2-font-mono);
  font-size: .82rem;
  color: var(--v2-cyan);
  letter-spacing: .04em;
}
.hw-sched-modes {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.hw-sched-opt {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: 6px;
  border: 1px solid rgba(0,255,247,.15);
  font-size: .78rem;
  color: var(--v2-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  user-select: none;
}
.hw-sched-opt input[type="radio"] { display: none; }
.hw-sched-opt:hover {
  border-color: rgba(0,255,247,.35);
  color: var(--v2-text);
}
.hw-sched-opt-on {
  border-color: rgba(245,192,48,.5);
  color: #f5c030;
  background: rgba(245,192,48,.07);
}
.hw-sched-time { display: flex; align-items: center; margin-left: auto; }
.hw-sched-time-input {
  width: 120px;
  font-family: var(--v2-font-mono);
  font-size: .82rem;
}

/* ── Submitted Flags (sf-*) ─────────────────────────────────── */
.sf-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; margin-bottom: 1rem;
  background: rgba(0,255,247,.03); border: 1px solid rgba(0,255,247,.08);
  border-radius: 8px;
}
.sf-toolbar-right { display: flex; align-items: center; gap: 1rem; }
.sf-toggle-wrap   { display: flex; align-items: center; gap: .75rem; }
.sf-toggle-label  { font-size: .82rem; color: var(--v2-muted); }
.sf-count { font-family: var(--v2-font-mono); font-size: .8rem; color: var(--v2-muted); }

.sf-table { width: 100%; border-collapse: collapse; }
.sf-table thead th {
  padding: .7rem 1rem; text-align: left;
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--v2-cyan); border-bottom: 1px solid rgba(0,255,247,.15);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.sf-table thead th.active { color: #fff; }
.sf-sort-icon { margin-left: .3rem; opacity: .6; font-style: normal; }
.sf-row td { padding: .65rem 1rem; border-bottom: 1px solid rgba(0,255,247,.05); vertical-align: middle; }
.sf-row:hover td { background: rgba(0,255,247,.02); }
.sf-row:last-child td { border-bottom: none; }

.sf-handle    { font-weight: 600; font-size: .88rem; }
.sf-flag-name { font-size: .88rem; display: block; }
.sf-flag-box  { font-size: .72rem; color: var(--v2-muted); display: block; margin-top: .15rem; }
.sf-td-date   { font-family: var(--v2-font-mono); font-size: .78rem; color: var(--v2-muted); white-space: nowrap; }

.sf-status {
  display: inline-block; padding: .18rem .55rem; border-radius: 4px;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  font-family: var(--v2-font-mono);
}
.sf-status-pending  { background: rgba(245,192,48,.1);  color: #f5c030; border: 1px solid rgba(245,192,48,.25); }
.sf-status-reviewed { background: rgba(57,255,20,.07);  color: #39ff14; border: 1px solid rgba(57,255,20,.2); }
.sf-status-rejected { background: rgba(255,50,50,.1);   color: #ff5555; border: 1px solid rgba(255,50,50,.25); }
.sf-status-error    { background: rgba(255,100,50,.1);  color: #ff6432; border: 1px solid rgba(255,100,50,.25); }

.sf-note-btn {
  display: inline-flex; align-items: center; gap: .25rem;
  margin-left: .4rem; padding: .1rem .35rem; border-radius: 3px;
  background: rgba(245,192,48,.08); border: 1px solid rgba(245,192,48,.2);
  color: #f5c030; font-size: .68rem; cursor: pointer;
}
.sf-note-btn:hover { background: rgba(245,192,48,.18); }

.sf-grade-wrap  { display: flex; align-items: center; gap: .4rem; }
.sf-grade-input {
  width: 56px; padding: .25rem .4rem; border-radius: 5px;
  background: rgba(0,255,247,.04); border: 1px solid rgba(0,255,247,.15);
  color: var(--v2-text); font-family: var(--v2-font-mono); font-size: .82rem; text-align: center;
}
.sf-grade-input:focus { outline: none; border-color: var(--v2-cyan); box-shadow: 0 0 0 2px rgba(0,255,247,.12); }
.sf-grade-pct { font-family: var(--v2-font-mono); font-size: .78rem; color: var(--v2-muted); min-width: 2.5rem; }

.sf-view-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .55rem; border-radius: 5px;
  background: rgba(0,255,247,.05); border: 1px solid rgba(0,255,247,.15);
  color: var(--v2-cyan); font-size: .75rem; cursor: pointer; text-decoration: none;
}
.sf-view-btn:hover { background: rgba(0,255,247,.12); border-color: rgba(0,255,247,.35); color: #fff; }
.sf-dl-btn { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; }

.sf-reject-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .6rem; border-radius: 5px;
  background: rgba(255,50,50,.08); border: 1px solid rgba(255,50,50,.2);
  color: #ff5555; font-size: .78rem; cursor: pointer;
}
.sf-reject-btn:hover { background: rgba(255,50,50,.18); border-color: rgba(255,50,50,.45); }
.sf-action-done { color: var(--v2-muted); font-size: .8rem; }

.sf-confirm-reject-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,50,50,.15); border: 1px solid rgba(255,50,50,.35);
  color: #ff5555; padding: .5rem 1.1rem; border-radius: 7px; font-size: .85rem; cursor: pointer;
}
.sf-confirm-reject-btn:hover { background: rgba(255,50,50,.28); }
.sf-confirm-reject-btn:disabled { opacity: .5; cursor: not-allowed; }

.sf-reject-note {
  width: 100%; resize: vertical; min-height: 90px;
  font-family: var(--v2-font-mono); font-size: .85rem;
}

.sf-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.sf-modal {
  background: var(--v2-card-bg, #0e1621); border: 1px solid rgba(0,255,247,.15);
  border-radius: 10px; width: 90%; max-width: 560px; max-height: 80vh;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.sf-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.2rem; border-bottom: 1px solid rgba(0,255,247,.1);
  font-weight: 700; font-size: .9rem; color: var(--v2-cyan);
}
.sf-modal-close {
  background: none; border: none; color: var(--v2-muted);
  font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.sf-modal-close:hover { color: var(--v2-text); }
.sf-modal-body {
  padding: 1.1rem 1.2rem; overflow-y: auto; flex: 1;
  font-family: var(--v2-font-mono); font-size: .85rem; white-space: pre-wrap;
  line-height: 1.6; color: var(--v2-text);
}

.sf-empty {
  text-align: center; padding: 4rem 1rem;
  color: var(--v2-muted); font-size: .88rem;
}

/* ── Review dialog (rv-) ───────────────────────────────── */
.rv-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.72); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.rv-dialog {
  width: 100%; max-width: 860px; max-height: 92vh;
  background: #0b1120; border: 1px solid rgba(0,255,247,.18);
  border-radius: 12px; box-shadow: 0 32px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(0,255,247,.06);
  display: flex; flex-direction: column; overflow: hidden;
}

/* Header */
.rv-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid rgba(0,255,247,.1);
  background: rgba(0,255,247,.025); flex-shrink: 0;
}
.rv-header-meta { display: flex; flex-direction: column; gap: .2rem; }
.rv-header-flag {
  font-size: .95rem; font-weight: 700; color: var(--v2-cyan); letter-spacing: .02em;
}
.rv-header-student {
  display: flex; align-items: center; gap: .3rem;
  font-size: .75rem; color: var(--v2-muted); font-family: var(--v2-font-mono);
}
.rv-header-student svg { stroke: var(--v2-muted); }
.rv-close {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px; color: var(--v2-muted); cursor: pointer;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s; flex-shrink: 0;
}
.rv-close:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Scrollable body */
.rv-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

/* Side-by-side split */
.rv-split {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(0,255,247,.08); min-height: 220px;
}
.rv-panel {
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .7rem;
  overflow: hidden;
}
.rv-panel-ref { border-right: 1px solid rgba(0,255,247,.08); background: rgba(0,255,247,.018); }
.rv-panel-sub { background: rgba(0,0,0,.15); }
.rv-panel-label {
  display: flex; align-items: center; gap: .35rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v2-muted); padding-bottom: .5rem; border-bottom: 1px solid rgba(255,255,255,.05);
  flex-shrink: 0;
}
.rv-panel-label svg { flex-shrink: 0; }

/* Reference panel content */
.rv-ref-block { display: flex; flex-direction: column; gap: .3rem; }
.rv-ref-tag {
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--v2-cyan); opacity: .65;
}
.rv-ref-tag-sol  { color: #39ff14; }
.rv-ref-tag-note { color: #ffc700; }
.rv-ref-text {
  font-size: .8rem; color: rgba(255,255,255,.75); line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
}
.rv-solution-pre {
  background: rgba(0,0,0,.4); border: 1px solid rgba(57,255,20,.15);
  border-radius: 6px; padding: .6rem .8rem; margin: 0;
  font-size: .78rem; font-family: var(--v2-font-mono); color: #a8ff80;
  white-space: pre-wrap; word-break: break-word; overflow-y: auto; max-height: 160px;
}
.rv-dl-link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; color: var(--v2-cyan); text-decoration: none;
  border: 1px solid rgba(0,255,247,.2); border-radius: 5px;
  padding: .25rem .6rem; background: rgba(0,255,247,.05);
  transition: background .15s;
}
.rv-dl-link:hover { background: rgba(0,255,247,.12); }
.rv-empty-hint { font-size: .78rem; color: var(--v2-muted); font-style: italic; margin: 0; }

/* Submission panel content */
.rv-sub-pre {
  flex: 1; background: rgba(0,0,0,.35); border: 1px solid rgba(0,255,247,.08);
  border-radius: 6px; padding: .75rem .9rem; margin: 0;
  font-size: .82rem; font-family: var(--v2-font-mono); color: var(--v2-text);
  white-space: pre-wrap; word-break: break-word; overflow-y: auto; max-height: 260px;
}
.rv-upload-area {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem; background: rgba(0,0,0,.25); border: 1px dashed rgba(0,255,247,.12);
  border-radius: 8px; padding: 1.5rem;
}
.rv-dl-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.1rem; border-radius: 7px; font-size: .82rem; cursor: pointer;
  background: rgba(0,255,247,.08); border: 1px solid rgba(0,255,247,.25);
  color: var(--v2-cyan); text-decoration: none; transition: background .15s;
}
.rv-dl-btn:hover { background: rgba(0,255,247,.18); }

.rv-student-note {
  margin-top: .75rem; padding: .65rem .8rem;
  background: rgba(255,199,0,.05); border: 1px solid rgba(255,199,0,.2);
  border-radius: 6px; width: 100%;
}
.rv-student-note-label {
  display: flex; align-items: center; gap: .3rem;
  font-size: .65rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #ffc700; opacity: .8; margin-bottom: .35rem;
}
.rv-student-note-body {
  font-size: .82rem; color: var(--v2-text); line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}

/* Decision section */
.rv-decision {
  padding: .9rem 1.1rem; border-bottom: 1px solid rgba(0,255,247,.08);
  background: rgba(0,0,0,.1);
}
.rv-decision-label {
  display: flex; align-items: center; gap: .35rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v2-muted); margin-bottom: .75rem;
}
.rv-decision-row { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.rv-grade-wrap { display: flex; flex-direction: column; gap: .3rem; flex-shrink: 0; }
.rv-note-wrap { display: flex; flex-direction: column; gap: .3rem; flex: 1; min-width: 180px; }
.rv-field-label { font-size: .7rem; color: rgba(255,255,255,.5); font-weight: 600; }
.rv-grade-input-wrap { display: flex; align-items: center; gap: .4rem; }
.rv-grade-input {
  width: 80px; background: rgba(0,0,0,.4); border: 1px solid rgba(0,255,247,.2);
  border-radius: 6px; padding: .4rem .6rem; color: var(--v2-text);
  font-size: .9rem; font-family: var(--v2-font-mono); text-align: center;
  outline: none; transition: border-color .15s;
}
.rv-grade-input:focus { border-color: rgba(0,255,247,.5); }
.rv-grade-unit { font-size: .75rem; color: var(--v2-muted); font-family: var(--v2-font-mono); }
.rv-note-input {
  width: 100%; background: rgba(0,0,0,.4); border: 1px solid rgba(0,255,247,.15);
  border-radius: 6px; padding: .45rem .7rem; color: var(--v2-text);
  font-size: .82rem; font-family: var(--v2-font); resize: vertical; outline: none;
  transition: border-color .15s; min-height: 58px;
}
.rv-note-input:focus { border-color: rgba(0,255,247,.4); }
.rv-note-input::placeholder { color: rgba(255,255,255,.22); }

/* History */
.rv-history {
  padding: .75rem 1.1rem; background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(0,255,247,.06);
}
.rv-history-label {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v2-muted); margin-bottom: .5rem;
}
.rv-history-row {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  padding: .3rem 0; border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: .77rem;
}
.rv-history-row:last-child { border-bottom: none; }
.rv-history-date { font-family: var(--v2-font-mono); color: var(--v2-muted); min-width: 85px; }
.rv-history-badge {
  font-size: .67rem; font-weight: 700; padding: .1rem .4rem; border-radius: 3px;
  font-family: var(--v2-font-mono); text-transform: uppercase; letter-spacing: .05em;
}
.rv-badge-pending  { background: rgba(255,190,60,.15); color: #ffbe3c; border: 1px solid rgba(255,190,60,.25); }
.rv-badge-reviewed { background: rgba(57,255,20,.1);  color: #39ff14; border: 1px solid rgba(57,255,20,.2); }
.rv-badge-rejected { background: rgba(255,80,80,.1);  color: #ff5555; border: 1px solid rgba(255,80,80,.2); }
.rv-history-grade { font-family: var(--v2-font-mono); color: #39ff14; font-size: .77rem; }
.rv-history-note { color: rgba(255,255,255,.4); font-style: italic; flex: 1; font-size: .75rem; }

/* Footer */
.rv-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.1rem; border-top: 1px solid rgba(0,255,247,.1);
  background: rgba(0,0,0,.2); flex-shrink: 0;
}
.rv-footer-right { display: flex; gap: .6rem; }
.rv-btn-cancel {
  background: none; border: 1px solid rgba(255,255,255,.1); border-radius: 7px;
  color: var(--v2-muted); padding: .5rem 1rem; font-size: .83rem; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.rv-btn-cancel:hover { border-color: rgba(255,255,255,.25); color: var(--v2-text); }
.rv-btn-reject {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.15rem; border-radius: 7px; font-size: .85rem; font-weight: 600; cursor: pointer;
  background: rgba(255,60,60,.1); border: 1px solid rgba(255,60,60,.3); color: #ff6060;
  transition: background .15s, border-color .15s;
}
.rv-btn-reject:hover { background: rgba(255,60,60,.22); border-color: rgba(255,60,60,.5); }
.rv-btn-reject:disabled { opacity: .4; cursor: not-allowed; }
.rv-btn-accept {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.3rem; border-radius: 7px; font-size: .85rem; font-weight: 600; cursor: pointer;
  background: rgba(57,255,20,.12); border: 1px solid rgba(57,255,20,.35); color: #39ff14;
  transition: background .15s, box-shadow .15s;
}
.rv-btn-accept:hover { background: rgba(57,255,20,.24); box-shadow: 0 0 12px rgba(57,255,20,.15); }
.rv-btn-accept:disabled { opacity: .4; cursor: not-allowed; }

@media (max-width: 600px) {
  .rv-split { grid-template-columns: 1fr; }
  .rv-panel-ref { border-right: none; border-bottom: 1px solid rgba(0,255,247,.08); }
}
.sf-attempt-badge {
  display: inline-block; margin-left: .4rem; padding: .1rem .35rem;
  background: rgba(0,255,247,.07); border: 1px solid rgba(0,255,247,.15);
  border-radius: 3px; font-size: .68rem; color: var(--v2-cyan);
  font-family: var(--v2-font-mono);
}
.sf-note-preview {
  background: none; border: none; color: var(--v2-muted); font-size: .78rem;
  cursor: pointer; text-align: left; padding: 0; max-width: 180px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block;
}
.sf-note-preview:hover { color: var(--v2-text); text-decoration: underline; }
.sf-note-empty { color: var(--v2-muted); font-size: .78rem; }
.sf-review-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .6rem; border-radius: 5px; cursor: pointer; font-size: .78rem;
  background: rgba(0,255,247,.05); border: 1px solid rgba(0,255,247,.15); color: var(--v2-cyan);
}

/* ── Subjects & Categories page (sc-) ─────────────────────────────── */
.sc-tabs {
  display: flex; gap: .25rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--v2-border); padding-bottom: 0;
}
.sc-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1.1rem; border-radius: 8px 8px 0 0;
  background: none; border: 1px solid transparent; border-bottom: none;
  color: var(--v2-muted); font-size: .82rem; font-weight: 600; cursor: pointer;
  position: relative; bottom: -1px; letter-spacing: .02em;
  transition: color .15s, background .15s;
}
.sc-tab:hover { color: var(--v2-text); }
.sc-tab.active {
  color: var(--v2-cyan); background: var(--v2-surface);
  border-color: var(--v2-border); border-bottom-color: var(--v2-surface);
}
.sc-tab-count {
  display: inline-block; padding: .05rem .38rem; border-radius: 999px;
  background: rgba(0,255,247,.1); color: var(--v2-cyan);
  font-size: .7rem; font-family: var(--v2-font-mono); min-width: 18px; text-align: center;
}

.sc-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .75rem; gap: 1rem;
}
.sc-toolbar-hint { font-size: .78rem; color: var(--v2-muted); }
.sc-btn-new {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem 1rem; border-radius: 7px; font-size: .82rem; font-weight: 600; cursor: pointer;
  background: rgba(0,255,247,.08); border: 1px solid rgba(0,255,247,.25); color: var(--v2-cyan);
  transition: background .15s;
}
.sc-btn-new:hover { background: rgba(0,255,247,.16); }

.sc-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.sc-table thead th {
  padding: .6rem 1rem; text-align: left; font-size: .68rem;
  color: var(--v2-muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--v2-border); background: rgba(0,255,247,.02);
}
.sc-row { border-bottom: 1px solid rgba(0,255,247,.05); transition: background .1s; }
.sc-row:last-child { border-bottom: none; }
.sc-row:hover { background: rgba(0,255,247,.03); }
.sc-row td { padding: .75rem 1rem; vertical-align: middle; }

.sc-cat-badge {
  display: inline-block; padding: .18rem .55rem; border-radius: 4px;
  background: rgba(0,255,247,.08); border: 1px solid rgba(0,255,247,.18);
  color: var(--v2-cyan); font-family: var(--v2-font-mono); font-size: .8rem; font-weight: 600;
}
.sc-num-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(185,0,255,.1); border: 1px solid rgba(185,0,255,.25);
  color: var(--v2-magenta); font-family: var(--v2-font-mono); font-size: .82rem; font-weight: 700;
}
.sc-name { color: var(--v2-text); font-weight: 600; }
.sc-desc-cell { color: var(--v2-muted); font-size: .8rem; max-width: 280px; }
.sc-count-pill {
  display: inline-block; padding: .1rem .45rem; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: var(--v2-muted); font-family: var(--v2-font-mono); font-size: .75rem;
}
.sc-actions { display: flex; gap: .3rem; justify-content: flex-end; }
.sc-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 5px; cursor: pointer; border: none;
  background: rgba(255,255,255,.05); color: var(--v2-muted); transition: background .15s, color .15s;
}
.sc-btn-icon:hover { background: rgba(0,255,247,.1); color: var(--v2-cyan); }
.sc-btn-del:hover { background: rgba(255,60,60,.12) !important; color: #ff5555 !important; }
.sc-btn-icon:disabled { opacity: .3; cursor: not-allowed; pointer-events: none; }

.sc-empty { padding: 3rem 1.5rem; text-align: center; color: var(--v2-muted); font-size: .85rem; }

/* Dialog */
.sc-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(0,0,0,.72); backdrop-filter: blur(6px);
}
.sc-dialog {
  width: 100%; max-width: 480px;
  background: #0b1120; border: 1px solid rgba(0,255,247,.18);
  border-radius: 12px; box-shadow: 0 32px 80px rgba(0,0,0,.7);
  display: flex; flex-direction: column; overflow: hidden;
}
.sc-dialog-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.25rem; border-bottom: 1px solid rgba(0,255,247,.1);
  font-weight: 700; font-size: .9rem; color: var(--v2-cyan);
}
.sc-dialog-close {
  background: none; border: none; color: var(--v2-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 5px;
}
.sc-dialog-close:hover { background: rgba(255,255,255,.08); color: var(--v2-text); }
.sc-dialog-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .9rem; }
.sc-field { display: flex; flex-direction: column; gap: .3rem; }
.sc-field-row { display: flex; gap: .75rem; align-items: flex-start; }
.sc-label { font-size: .7rem; font-weight: 600; color: rgba(255,255,255,.5); letter-spacing: .04em; text-transform: uppercase; }
.sc-required { color: #ff5555; }
.sc-optional { color: var(--v2-muted); font-weight: 400; text-transform: none; }
.sc-input {
  background: rgba(0,0,0,.3); border: 1px solid rgba(0,255,247,.15); border-radius: 6px;
  color: var(--v2-text); font-size: .84rem; padding: .5rem .75rem; width: 100%;
  font-family: var(--v2-font-mono); outline: none; transition: border-color .15s;
}
.sc-input:focus { border-color: rgba(0,255,247,.45); }
.sc-textarea {
  background: rgba(0,0,0,.3); border: 1px solid rgba(0,255,247,.15); border-radius: 6px;
  color: var(--v2-text); font-size: .83rem; padding: .5rem .75rem; width: 100%;
  resize: vertical; outline: none; font-family: inherit; transition: border-color .15s;
}
.sc-textarea:focus { border-color: rgba(0,255,247,.4); }
.sc-error {
  padding: .55rem .85rem; border-radius: 6px;
  background: rgba(255,60,60,.1); border: 1px solid rgba(255,60,60,.25); color: #ff6060;
  font-size: .8rem;
}
.sc-dialog-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: .6rem;
  padding: .9rem 1.25rem; border-top: 1px solid rgba(0,255,247,.08);
}
.sc-btn-cancel {
  padding: .45rem .9rem; border-radius: 7px; font-size: .82rem; cursor: pointer;
  background: none; border: 1px solid rgba(255,255,255,.12); color: var(--v2-muted);
  transition: border-color .15s, color .15s;
}
.sc-btn-cancel:hover { border-color: rgba(255,255,255,.25); color: var(--v2-text); }
.sc-btn-save {
  padding: .45rem 1.1rem; border-radius: 7px; font-size: .82rem; font-weight: 600; cursor: pointer;
  background: rgba(0,255,247,.1); border: 1px solid rgba(0,255,247,.3); color: var(--v2-cyan);
  transition: background .15s;
}
.sc-btn-save:hover { background: rgba(0,255,247,.2); }
.sc-btn-save:disabled { opacity: .4; cursor: not-allowed; }

/* ============================================================
   BOX DETAIL — PRESENTATION PANEL (bd-pres-*)
   ============================================================ */
.bd-pres-section {
  flex-shrink: 0;
  border-top: 1px solid rgba(0,255,247,.1);
  padding: .9rem .75rem .75rem;
}
.bd-pres-header {
  display: flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 700; color: var(--v2-muted);
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: .55rem;
}
.bd-pres-attach-btn {
  margin-left: auto;
  background: rgba(0,255,247,.07); border: 1px solid rgba(0,255,247,.22);
  color: var(--v2-cyan); border-radius: 6px; padding: .22rem .6rem;
  font-size: .68rem; cursor: pointer;
  display: flex; align-items: center; gap: .25rem;
  transition: background .15s;
}
.bd-pres-attach-btn:hover { background: rgba(0,255,247,.16); }
.bd-pres-list { display: flex; flex-direction: column; gap: .3rem; }
.bd-pres-item {
  display: flex; align-items: center; gap: .45rem;
  background: rgba(0,0,0,.2); border: 1px solid rgba(0,255,247,.1);
  border-radius: 6px; padding: .32rem .55rem;
}
.bd-pres-link {
  flex: 1; display: flex; align-items: center; gap: .38rem;
  color: var(--v2-cyan-dim); font-size: .76rem;
  text-decoration: none; min-width: 0; overflow: hidden;
}
.bd-pres-link:hover { color: var(--v2-cyan); }
.bd-pres-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-pres-slides { font-size: .63rem; color: var(--v2-muted); white-space: nowrap; flex-shrink: 0; }
.bd-pres-unlink {
  background: none; border: none; color: var(--v2-muted);
  cursor: pointer; padding: .1rem; line-height: 1;
  display: flex; align-items: center; border-radius: 4px;
  transition: color .15s;
}
.bd-pres-unlink:hover { color: var(--v2-red); }
.bd-pres-empty { font-size: .73rem; color: var(--v2-muted); text-align: center; padding: .4rem 0; }

/* Pres picker dialog */
.bd-pres-picker {
  width: 100%; max-width: 500px;
  background: #0b1120; border: 1px solid rgba(0,255,247,.2);
  border-radius: 12px; box-shadow: 0 32px 80px rgba(0,0,0,.7);
  display: flex; flex-direction: column; overflow: hidden;
}
.bd-pres-picker-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.25rem; border-bottom: 1px solid rgba(0,255,247,.1);
  font-size: .88rem; font-weight: 700; color: var(--v2-cyan);
}
.bd-pres-picker-close {
  background: none; border: none; color: var(--v2-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 5px;
}
.bd-pres-picker-close:hover { background: rgba(255,255,255,.08); color: var(--v2-white); }
.bd-pres-picker-body { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .7rem; }
.bd-pres-search {
  background: rgba(0,0,0,.3); border: 1px solid rgba(0,255,247,.15); border-radius: 7px;
  color: var(--v2-white); font-size: .84rem; padding: .45rem .75rem; width: 100%;
  font-family: var(--v2-font-mono); outline: none; transition: border-color .15s;
}
.bd-pres-search:focus { border-color: rgba(0,255,247,.4); }
.bd-pres-modal-grid {
  display: flex; flex-direction: column; gap: .35rem;
  max-height: 300px; overflow-y: auto;
}
.bd-pres-modal-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .75rem; border-radius: 8px;
  border: 1px solid rgba(0,255,247,.1); background: rgba(0,0,0,.2);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.bd-pres-modal-item:hover { border-color: rgba(0,255,247,.35); background: rgba(0,255,247,.07); }
.bd-pres-modal-info { flex: 1; min-width: 0; }
.bd-pres-modal-name { font-size: .84rem; color: var(--v2-cyan); }
.bd-pres-modal-desc {
  font-size: .72rem; color: var(--v2-muted); margin-top: .12rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-pres-modal-count { font-size: .7rem; color: var(--v2-muted); white-space: nowrap; }
.bd-pres-modal-empty { text-align: center; color: var(--v2-muted); font-size: .82rem; padding: 1.5rem 0; }

/* ============================================================
   PLAYER BOX — PRESENTATION BUTTON (bx-pres-*)
   ============================================================ */
.bx-pres-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.bx-pres-btn {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .45rem .9rem; border-radius: 8px;
  border: 1px solid rgba(0,255,247,.22); background: rgba(0,255,247,.06);
  color: var(--v2-cyan); font-size: .8rem; text-decoration: none;
  font-family: var(--v2-font-mono);
  transition: border-color .15s, background .15s;
}
.bx-pres-btn:hover {
  border-color: rgba(0,255,247,.45); background: rgba(0,255,247,.13);
  color: var(--v2-cyan);
}

/* ============================================================
   PRESENTATION VIEWER (pv-*)
   ============================================================ */
.pv-shell {
  position: fixed; inset: 0;
  background: #000;
  display: flex; flex-direction: column;
  user-select: none; outline: none;
}

.pv-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem 1rem;
  background: linear-gradient(to bottom, rgba(0,0,0,.72) 0%, transparent 100%);
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.pv-topbar.pv-ui-visible { opacity: 1; pointer-events: auto; cursor: auto; }

.pv-back {
  display: flex; align-items: center; gap: .32rem;
  color: rgba(255,255,255,.72); font-size: .76rem; text-decoration: none;
  white-space: nowrap; font-family: var(--v2-font-mono);
}
.pv-back:hover { color: #fff; }

.pv-title-block { flex: 1; min-width: 0; text-align: center; }
.pv-title {
  font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--v2-font);
}

.pv-topbar-right { display: flex; align-items: center; gap: .5rem; }
.pv-counter { font-size: .76rem; color: rgba(255,255,255,.55); font-family: var(--v2-font-mono); }
.pv-counter-sep { margin: 0 .05rem; }

.pv-fs-btn {
  background: none; border: 1px solid rgba(255,255,255,.2); border-radius: 6px;
  color: rgba(255,255,255,.65); cursor: pointer; padding: .32rem;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.pv-fs-btn:hover { border-color: rgba(255,255,255,.5); color: #fff; }

.pv-stage {
  flex: 1; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pv-slide-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.pv-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity .35s ease;
  pointer-events: none;
}
.pv-slide-active { opacity: 1; }
.pv-slide-prev   { opacity: 0; }

.pv-zone {
  position: absolute; top: 0; bottom: 0; width: 35%;
  z-index: 5; display: flex; align-items: center;
  cursor: pointer;
}
.pv-zone.disabled { cursor: default; }
.pv-zone-left  { left: 0;  padding-left:  1.5rem; justify-content: flex-start; }
.pv-zone-right { right: 0; padding-right: 1.5rem; justify-content: flex-end; }

.pv-arrow {
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.38);
  border-radius: 50%; padding: .55rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
  backdrop-filter: blur(4px);
}
.pv-arrow.pv-ui-visible { opacity: 1; pointer-events: auto; }
.pv-zone:hover .pv-arrow { background: rgba(0,0,0,.62); }

.pv-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: .38rem;
  padding: .65rem 1rem .9rem;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, transparent 100%);
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.pv-bottom.pv-ui-visible { opacity: 1; pointer-events: auto; }

.pv-dots { display: flex; gap: .38rem; flex-wrap: wrap; justify-content: center; }
.pv-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.28); border: none;
  cursor: pointer; padding: 0;
  transition: background .2s, transform .2s;
}
.pv-dot.active { background: var(--v2-cyan); transform: scale(1.38); }
.pv-dot:hover  { background: rgba(255,255,255,.62); }

.pv-hint {
  font-size: .63rem; color: rgba(255,255,255,.32);
  letter-spacing: .05em; font-family: var(--v2-font-mono);
}
.sf-review-btn:hover { background: rgba(0,255,247,.12); }

/* ============================================================
   PRESENTATIONS ADMIN PAGE (pm-*)
   ============================================================ */
.pm-page {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
}
.pm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.4rem; flex-shrink: 0;
  border-bottom: 1px solid var(--v2-border);
  background: var(--v2-header);
}
.pm-header-title {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--v2-font); font-size: .82rem; font-weight: 700;
  color: var(--v2-cyan); letter-spacing: .06em; text-transform: uppercase;
}
.pm-new-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .42rem .95rem; border-radius: 7px;
  background: rgba(0,255,247,.1); border: 1px solid rgba(0,255,247,.3);
  color: var(--v2-cyan); font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.pm-new-btn:hover { background: rgba(0,255,247,.2); }

.pm-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }

/* Left list panel */
.pm-list-panel {
  width: 280px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--v2-border);
  background: var(--v2-surface);
}
.pm-search-wrap {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .8rem; border-bottom: 1px solid rgba(0,255,247,.08);
  flex-shrink: 0;
}
.pm-search {
  flex: 1; background: none; border: none; outline: none;
  color: var(--v2-white); font-size: .8rem; font-family: var(--v2-font-mono);
}
.pm-search::placeholder { color: var(--v2-muted); }
.pm-list-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: .4rem; }
.pm-list-empty {
  font-size: .75rem; color: var(--v2-muted); text-align: center;
  padding: 2rem 1rem; line-height: 1.8;
}
.pm-list-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .7rem; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.pm-list-item:hover { background: rgba(0,255,247,.04); border-color: rgba(0,255,247,.1); }
.pm-list-item.active { background: rgba(0,255,247,.08); border-color: rgba(0,255,247,.22); }
.pm-list-item-icon { color: var(--v2-muted); flex-shrink: 0; display: flex; }
.pm-list-item.active .pm-list-item-icon { color: var(--v2-cyan); }
.pm-list-item-body { flex: 1; min-width: 0; }
.pm-list-item-name { font-size: .82rem; color: var(--v2-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-list-item.active .pm-list-item-name { color: var(--v2-cyan); }
.pm-list-item-meta { font-size: .68rem; color: var(--v2-muted); margin-top: .08rem; }
.pm-list-item-arrow { color: var(--v2-muted); font-size: .9rem; }

/* Right detail panel */
.pm-detail-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.pm-detail-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .85rem;
  color: var(--v2-muted); font-size: .82rem; text-align: center; padding: 2rem;
}
.pm-detail-content { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

.pm-detail-toolbar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .75rem 1.2rem; border-bottom: 1px solid rgba(0,255,247,.08);
  flex-shrink: 0; background: var(--v2-header);
}
.pm-detail-name {
  font-family: var(--v2-font); font-size: .82rem; font-weight: 700;
  color: var(--v2-cyan); letter-spacing: .04em; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-detail-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pm-tool-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .32rem .72rem; border-radius: 6px; font-size: .74rem; cursor: pointer;
  border: 1px solid; font-family: var(--v2-font-mono); text-decoration: none;
  transition: background .15s; line-height: 1;
}
.pm-tool-edit   { background: rgba(0,183,255,.07); border-color: rgba(0,183,255,.28); color: var(--v2-blue); }
.pm-tool-edit:hover { background: rgba(0,183,255,.16); }
.pm-tool-upload { background: rgba(57,255,20,.07); border-color: rgba(57,255,20,.28); color: var(--v2-green); }
.pm-tool-upload:hover { background: rgba(57,255,20,.16); }
.pm-tool-preview { background: rgba(0,255,247,.07); border-color: rgba(0,255,247,.28); color: var(--v2-cyan); }
.pm-tool-preview:hover { background: rgba(0,255,247,.16); }
.pm-tool-delete { background: rgba(255,23,68,.07); border-color: rgba(255,23,68,.28); color: var(--v2-red); }
.pm-tool-delete:hover { background: rgba(255,23,68,.16); }
/* Semantic aliases used on action buttons */
.pm-tool-btn:not([class*="pm-tool-"]):not(.pm-tool-btn-primary):not(.pm-tool-btn-danger) {
  background: rgba(0,255,247,.05); border-color: rgba(0,255,247,.2); color: var(--v2-cyan);
}
.pm-tool-btn:not([class*="pm-tool-"]):not(.pm-tool-btn-primary):not(.pm-tool-btn-danger):hover {
  background: rgba(0,255,247,.12);
}
.pm-tool-btn-primary { background: rgba(0,255,247,.1); border-color: rgba(0,255,247,.35); color: var(--v2-cyan); }
.pm-tool-btn-primary:hover { background: rgba(0,255,247,.2); }
.pm-tool-btn-danger  { background: rgba(255,23,68,.07); border-color: rgba(255,23,68,.28); color: var(--v2-red); }
.pm-tool-btn-danger:hover  { background: rgba(255,23,68,.16); }

.pm-upload-progress {
  position: relative; height: 3px; background: rgba(0,255,247,.12); flex-shrink: 0;
}
.pm-upload-bar { height: 100%; background: var(--v2-cyan); transition: width .2s; }
.pm-upload-label {
  position: absolute; top: 4px; left: 0; right: 0;
  font-size: .7rem; color: var(--v2-cyan); text-align: center; letter-spacing: .04em;
}

.pm-slides-area { flex: 1; overflow-y: auto; padding: 1.2rem; }
.pm-slides-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem; padding: 3rem 1rem; color: var(--v2-muted); font-size: .8rem; text-align: center;
}
.pm-slides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.pm-slide-card {
  position: relative; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(0,255,247,.12);
  background: rgba(0,0,0,.3);
  transition: border-color .15s, box-shadow .15s;
  cursor: pointer;
}
.pm-slide-card:hover { border-color: rgba(0,255,247,.35); box-shadow: 0 0 0 1px rgba(0,255,247,.15); }
.pm-slide-card.pm-slide-preview-active { border-color: var(--v2-cyan); box-shadow: 0 0 0 2px rgba(0,255,247,.25); }
.pm-slide-num {
  position: absolute; top: .35rem; left: .45rem; z-index: 2;
  font-size: .6rem; color: rgba(255,255,255,.55); font-family: var(--v2-font-mono);
  background: rgba(0,0,0,.5); border-radius: 3px; padding: .05rem .3rem;
}
.pm-slide-thumb { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.pm-slide-del {
  position: absolute; top: .3rem; right: .35rem; z-index: 3;
  background: rgba(20,0,0,.7); border: none; color: rgba(255,255,255,.6);
  border-radius: 50%; width: 20px; height: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, color .15s;
}
.pm-slide-card:hover .pm-slide-del { opacity: 1; }
.pm-slide-del:hover { color: var(--v2-red); background: rgba(40,0,0,.85); }

/* Lightbox */
.pm-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.9); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
}
.pm-lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.pm-lightbox-close {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.8); border-radius: 50%; width: 36px; height: 36px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.pm-lightbox-close:hover { background: rgba(255,255,255,.2); color: #fff; }

/* Modals */
.pm-modal-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,.72); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.pm-modal {
  width: 100%; max-width: 480px;
  background: #0b1120; border: 1px solid rgba(0,255,247,.2);
  border-radius: 12px; box-shadow: 0 32px 80px rgba(0,0,0,.7);
  display: flex; flex-direction: column; overflow: hidden;
}
.pm-modal-sm { max-width: 380px; }
.pm-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.25rem; border-bottom: 1px solid rgba(0,255,247,.1);
  font-size: .88rem; font-weight: 700; color: var(--v2-cyan);
}
.pm-modal-head-danger { color: var(--v2-red); border-color: rgba(255,23,68,.2); }
.pm-modal-close {
  background: none; border: none; color: var(--v2-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 5px;
}
.pm-modal-close:hover { background: rgba(255,255,255,.08); color: var(--v2-white); }
.pm-modal-body { padding: 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .85rem; }
.pm-modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: .6rem;
  padding: .85rem 1.25rem; border-top: 1px solid rgba(0,255,247,.08);
}
.pm-field { display: block; }
.pm-field > .pm-label { display: block; margin-bottom: .3rem; }
.pm-field-row { display: flex; gap: .75rem; }
.pm-field-row > .pm-field { flex: 1; min-width: 0; }
.pm-label { font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .05em; }
.pm-required { color: var(--v2-red); }
.pm-optional { color: var(--v2-muted); font-weight: 400; text-transform: none; }
.pm-input {
  background: rgba(0,0,0,.3); border: 1px solid rgba(0,255,247,.15); border-radius: 7px;
  color: var(--v2-white); font-size: .84rem; padding: .48rem .75rem; width: 100%;
  font-family: var(--v2-font-mono); outline: none; transition: border-color .15s;
}
.pm-input:focus { border-color: rgba(0,255,247,.4); }
.pm-textarea {
  background: rgba(0,0,0,.3); border: 1px solid rgba(0,255,247,.15); border-radius: 7px;
  color: var(--v2-white); font-size: .83rem; padding: .48rem .75rem; width: 100%;
  font-family: inherit; resize: vertical; outline: none; transition: border-color .15s;
}
.pm-textarea:focus { border-color: rgba(0,255,247,.4); }
.pm-select {
  background: rgba(0,0,0,.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(0,255,247,.45)'/%3E%3C/svg%3E") no-repeat right .75rem center;
  background-size: 10px 6px;
  border: 1px solid rgba(0,255,247,.15); border-radius: 7px;
  color: var(--v2-white); font-size: .84rem; width: 100%;
  height: 2.35rem; line-height: 2.35rem; padding: 0 2rem 0 .75rem;
  font-family: var(--v2-font-mono); outline: none; transition: border-color .15s;
  appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
}
.pm-select:focus { border-color: rgba(0,255,247,.4); }
.pm-select option { background: #0b1120; color: var(--v2-white); }
.pm-error {
  padding: .5rem .8rem; border-radius: 6px;
  background: rgba(255,60,60,.1); border: 1px solid rgba(255,60,60,.25); color: #ff6060;
  font-size: .78rem;
}
.pm-btn-cancel, .pm-btn-save, .pm-btn-del {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.1rem; padding: 0 .9rem;
  border-radius: 7px; font-size: .82rem; cursor: pointer; line-height: 1;
  transition: border-color .15s, color .15s, background .15s;
}
.pm-btn-cancel {
  background: none; border: 1px solid rgba(255,255,255,.12); color: var(--v2-muted);
}
.pm-btn-cancel:hover { border-color: rgba(255,255,255,.25); color: var(--v2-white); }
.pm-btn-save {
  padding: .44rem 1.1rem; font-weight: 600;
  background: rgba(0,255,247,.1); border: 1px solid rgba(0,255,247,.3); color: var(--v2-cyan);
}
.pm-btn-save:hover { background: rgba(0,255,247,.2); }
.pm-btn-save:disabled { opacity: .4; cursor: not-allowed; }
.pm-btn-del {
  padding: .44rem 1.1rem; font-weight: 600;
  background: rgba(255,23,68,.12); border: 1px solid rgba(255,23,68,.35); color: var(--v2-red);
}
.pm-btn-del:hover { background: rgba(255,23,68,.22); }
.pm-btn-del:disabled { opacity: .4; cursor: not-allowed; }


/* ═══════════════════════════════════════════════════════════════════════════
   REPORTS — shared table & list styles (reports list page)
   ═══════════════════════════════════════════════════════════════════════════ */

.rpt-tabs { display:flex; margin-bottom:1.25rem; border-bottom:1px solid rgba(0,255,247,.15); }
.rpt-tab {
  padding:.6rem 1.2rem; background:none; border:none;
  color:var(--v2-muted); font-family:var(--v2-font-mono); font-size:.82rem;
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .15s, border-color .15s;
}
.rpt-tab.active { color:var(--v2-cyan); border-bottom-color:var(--v2-cyan); }
.rpt-tab:hover:not(.active) { color:var(--v2-white); }

.rpt-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; gap:.75rem; }
.rpt-count   { font-size:.8rem; color:var(--v2-muted); font-family:var(--v2-font-mono); }

.rpt-table { width:100%; border-collapse:collapse; }
.rpt-table thead th {
  padding:.65rem 1rem; text-align:left;
  font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--v2-cyan); border-bottom:1px solid rgba(0,255,247,.15); white-space:nowrap;
}
.rpt-row td { padding:.65rem 1rem; border-bottom:1px solid rgba(0,255,247,.05); vertical-align:middle; }
.rpt-row:hover td { background:rgba(0,255,247,.02); }
.rpt-row:last-child td { border-bottom:none; }
.rpt-id    { font-family:var(--v2-font-mono); font-size:.8rem; color:var(--v2-muted); }
.rpt-dates { font-family:var(--v2-font-mono); font-size:.83rem; }
.rpt-num   { font-family:var(--v2-font-mono); font-size:.83rem; color:var(--v2-cyan); text-align:center; }
.rpt-empty { text-align:center; padding:2.5rem 1rem; color:var(--v2-muted); font-size:.85rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   REPORT DETAIL PAGE — layout & header
   ═══════════════════════════════════════════════════════════════════════════ */

.rpt-wrap { max-width:1280px; margin:0 auto; }

.rpt-page-header {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.75rem;
  padding:.9rem 1.1rem; margin-bottom:.75rem;
  background:var(--v2-surface); border:1px solid rgba(0,255,247,.1); border-radius:8px;
}
.rpt-period-badge { display:flex; align-items:baseline; gap:.5rem; }
.rpt-period-label { font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:var(--v2-muted); }
.rpt-period-range { font-family:var(--v2-font-mono); font-size:.9rem; color:var(--v2-white); }
.rpt-header-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* Tab bar */
.rpt-tabbar {
  display:flex; gap:2px; margin-bottom:1rem;
  background:var(--v2-surface); border:1px solid rgba(0,255,247,.1); border-radius:8px;
  padding:4px; width:fit-content;
}
.rpt-tabbar-btn {
  display:flex; align-items:center; gap:.4rem;
  padding:.38rem .85rem; border:none; border-radius:5px;
  font-family:var(--v2-font-mono); font-size:.78rem;
  background:none; color:var(--v2-muted); cursor:pointer;
  transition:background .15s, color .15s;
}
.rpt-tabbar-btn:hover { background:rgba(255,255,255,.05); color:var(--v2-white); }
.rpt-tabbar-btn.active { background:rgba(0,255,247,.12); color:var(--v2-cyan); }

/* Generic empty state */
.rpt-empty-state {
  text-align:center; padding:2rem 1rem;
  color:var(--v2-muted); font-size:.85rem; font-family:var(--v2-font-mono);
}

/* ── Search bar ── */
.rpt-search-wrap {
  display:flex; align-items:center; gap:.4rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:5px; padding:.3rem .65rem;
}
.rpt-search-wrap svg { color:var(--v2-muted); flex-shrink:0; }
.rpt-search-input {
  background:none; border:none; outline:none;
  color:var(--v2-white); font-family:var(--v2-font-mono); font-size:.8rem; width:200px;
}
.rpt-search-input::placeholder { color:var(--v2-muted); }

/* ── Grades tab toolbar ── */
.rpt-grades-toolbar {
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin-bottom:.75rem;
}
.rpt-ctrl-btn {
  background:none; border:1px solid rgba(255,255,255,.1); border-radius:4px;
  color:var(--v2-muted); font-family:var(--v2-font-mono); font-size:.73rem;
  padding:.25rem .6rem; cursor:pointer; transition:color .12s, border-color .12s;
}
.rpt-ctrl-btn:hover { color:var(--v2-cyan); border-color:rgba(0,255,247,.3); }

/* ═══════════════════════════════════════════════════════════════════════════
   STUDENT CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.rpt-student-list { display:flex; flex-direction:column; gap:.5rem; }

.rpt-student-card {
  border:1px solid rgba(255,255,255,.07); border-radius:8px;
  overflow:hidden; transition:border-color .15s;
}
.rpt-student-card:hover { border-color:rgba(0,255,247,.15); }

/* Card header */
.rpt-sc-head {
  display:flex; align-items:center; gap:.65rem;
  padding:.7rem 1rem; cursor:pointer; user-select:none;
  background:rgba(255,255,255,.025);
  transition:background .12s;
}
.rpt-sc-head:hover { background:rgba(255,255,255,.05); }
.rpt-sc-chevron { color:var(--v2-muted); font-size:.8rem; width:.9rem; flex-shrink:0; }
.rpt-sc-name    { flex:1; font-size:.88rem; font-weight:600; color:var(--v2-white); }
.rpt-sc-final   { display:flex; align-items:center; gap:.4rem; }
.rpt-sc-final-label { font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; color:var(--v2-muted); }
.rpt-sc-final-val   { font-family:var(--v2-font-mono); font-size:.9rem; color:var(--v2-cyan); font-weight:700; }

/* Card body */
.rpt-sc-body {
  padding:.75rem 1rem 1rem;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUBJECT GROUPS (inside student card)
   ═══════════════════════════════════════════════════════════════════════════ */

.rpt-subj-group {
  margin-bottom:.5rem;
  border:1px solid rgba(255,255,255,.06); border-radius:6px;
  overflow:hidden;
}
.rpt-subj-group--temp    { border-color:rgba(0,255,247,.15); }
.rpt-subj-group--mission { border-color:rgba(255,179,71,.15); }

/* Subject header row */
.rpt-subj-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:.45rem .75rem;
  background:rgba(255,255,255,.03);
}
.rpt-subj-group--temp    .rpt-subj-head { background:rgba(0,255,247,.04); }
.rpt-subj-group--mission .rpt-subj-head { background:rgba(255,179,71,.04); }

.rpt-subj-name { font-size:.8rem; font-weight:600; color:var(--v2-white); }
.rpt-subj-group--temp    .rpt-subj-name { color:var(--v2-cyan); }
.rpt-subj-group--mission .rpt-subj-name { color:var(--v2-amber); }

/* Grade display next to subject name */
.rpt-subj-grade-wrap { display:flex; align-items:center; }
.rpt-subj-grade-display { display:flex; align-items:center; gap:.35rem; }
.rpt-subj-auto  { font-family:var(--v2-font-mono); font-size:.7rem; color:var(--v2-muted); }
.rpt-subj-grade { font-family:var(--v2-font-mono); font-size:.88rem; color:var(--v2-white); font-weight:600; min-width:3rem; text-align:right; }

/* ── Box rows under a subject ── */
.rpt-box-list { padding:.25rem 0; }

.rpt-box-row {
  display:flex; align-items:center; gap:.5rem;
  padding:.28rem .75rem .28rem 2rem;
  border-top:1px solid rgba(255,255,255,.03);
  transition:background .1s;
}
.rpt-box-row:hover { background:rgba(255,255,255,.025); }
.rpt-box-captured .rpt-box-name { color:var(--v2-white); }
.rpt-box-excluded .rpt-box-name { color:var(--v2-muted); text-decoration:line-through; opacity:.6; }

.rpt-box-status {
  width:14px; flex-shrink:0; text-align:center;
  font-size:.75rem;
}
.rpt-box-captured .rpt-box-status { color:var(--v2-green); }
.rpt-box-excluded .rpt-box-status { color:var(--v2-red); }

.rpt-box-name    { flex:1; font-size:.78rem; color:var(--v2-muted); }
.rpt-box-grade   { font-family:var(--v2-font-mono); font-size:.78rem; color:var(--v2-white); min-width:3.2rem; text-align:right; }
.rpt-box-actions { display:flex; align-items:center; gap:2px; margin-left:.2rem; opacity:0; transition:opacity .12s; }
.rpt-box-row:hover .rpt-box-actions { opacity:1; }

/* Exclude toggle button */
.rpt-excl-toggle {
  background:none; border:1px solid transparent; border-radius:3px;
  font-family:var(--v2-font-mono); font-size:.65rem; padding:1px 6px; cursor:pointer;
  transition:all .12s; opacity:0;
}
.rpt-box-row:hover .rpt-excl-toggle { opacity:1; }
.rpt-excl-off { color:var(--v2-muted); border-color:rgba(255,255,255,.1); }
.rpt-excl-off:hover { color:var(--v2-red); border-color:rgba(255,23,68,.4); }
.rpt-excl-on  { color:var(--v2-red); border-color:rgba(255,23,68,.35); opacity:1 !important; }
.rpt-excl-on:hover { background:rgba(255,23,68,.08); }

/* Box-level grade input (inline) */
.rpt-box-grade-inp {
  width:55px; background:rgba(255,255,255,.06);
  border:1px solid rgba(0,255,247,.4); border-radius:3px;
  color:var(--v2-white); font-family:var(--v2-font-mono); font-size:.78rem;
  padding:.1rem .3rem; text-align:right;
}

/* ── Icon buttons ── */
.rpt-icon-btn {
  background:none; border:none; cursor:pointer; padding:3px;
  color:var(--v2-muted); border-radius:3px; line-height:0;
  transition:color .12s, background .12s;
}
.rpt-icon-btn:hover              { color:var(--v2-white); background:rgba(255,255,255,.08); }
.rpt-icon-btn--edit:hover        { color:var(--v2-cyan); }
.rpt-icon-btn--reset:hover       { color:var(--v2-amber); }

/* ── Grade input (subject / final) ── */
.rpt-grade-inp {
  width:72px; background:rgba(255,255,255,.07);
  border:1px solid rgba(0,255,247,.45); border-radius:4px;
  color:var(--v2-cyan); font-family:var(--v2-font-mono); font-size:.88rem;
  padding:.25rem .45rem; text-align:center;
}
.rpt-grade-inp:focus { outline:none; box-shadow:0 0 0 2px rgba(0,255,247,.15); }

/* ── Overridden value highlight ── */
.rpt-override { color:var(--v2-amber) !important; }

/* ── Manual mission add row ── */
.rpt-add-mission-row {
  padding:.5rem 0 .25rem;
}
.rpt-add-btn {
  display:inline-flex; align-items:center; gap:.35rem;
  background:none; border:1px dashed rgba(255,255,255,.15); border-radius:5px;
  color:var(--v2-muted); font-family:var(--v2-font-mono); font-size:.74rem;
  padding:.3rem .75rem; cursor:pointer; transition:all .12s;
}
.rpt-add-btn:hover { color:var(--v2-cyan); border-color:rgba(0,255,247,.35); }

.rpt-mission-inputs { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.rpt-mission-inp    { font-size:.78rem !important; padding:.3rem .5rem !important; height:auto !important; }
.rpt-mission-inp--sm { width:70px !important; }

/* ── Final grade row ── */
.rpt-final-row {
  display:flex; align-items:center; gap:.75rem;
  margin-top:.75rem; padding-top:.65rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.rpt-final-label { font-size:.75rem; color:var(--v2-muted); text-transform:uppercase; letter-spacing:.06em; }
.rpt-final-val   { font-family:var(--v2-font-mono); font-size:1rem; color:var(--v2-cyan); font-weight:700; }

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS TAB
   ═══════════════════════════════════════════════════════════════════════════ */

.rpt-settings-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:1rem; margin-bottom:1rem;
}
.rpt-settings-panel {
  background:var(--v2-surface); border:1px solid rgba(0,255,247,.1);
  border-radius:8px; padding:1rem;
}
.rpt-panel-title {
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--v2-cyan); margin-bottom:.75rem; padding-bottom:.5rem;
  border-bottom:1px solid rgba(0,255,247,.12);
}
.rpt-box-group-head {
  font-size:.67rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--v2-muted); margin-bottom:.3rem; margin-top:.5rem;
  padding-left:.1rem;
}

.rpt-weight-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; padding:.3rem 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.rpt-weight-row:last-child { border-bottom:none; }
.rpt-weight-name { font-size:.8rem; color:var(--v2-white); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rpt-weight-inp-wrap { display:flex; align-items:center; gap:.3rem; flex-shrink:0; }
.rpt-weight-inp {
  width:75px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:4px; color:var(--v2-white); font-family:var(--v2-font-mono); font-size:.8rem;
  padding:.25rem .4rem; text-align:right;
}
.rpt-weight-inp:focus { outline:none; border-color:rgba(0,255,247,.4); }

.rpt-save-bar {
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.75rem 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REVIEWS TAB
   ═══════════════════════════════════════════════════════════════════════════ */

.rpt-reviews-layout { display:flex; gap:1rem; align-items:flex-start; min-height:400px; }

.rpt-rv-sidebar { width:210px; flex-shrink:0; }
.rpt-rv-list    { display:flex; flex-direction:column; gap:2px; max-height:65vh; overflow-y:auto; }
.rpt-rv-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:.38rem .65rem; border-radius:5px; cursor:pointer;
  font-size:.82rem; color:var(--v2-white);
  background:rgba(255,255,255,.025); transition:background .1s;
}
.rpt-rv-item:hover  { background:rgba(255,255,255,.06); }
.rpt-rv-item.active { background:rgba(0,255,247,.1); color:var(--v2-cyan); }
.rpt-rv-badge {
  font-size:.64rem; font-weight:700; padding:1px 5px; border-radius:3px;
}
.badge-done    { background:rgba(0,255,247,.15); color:var(--v2-cyan); }
.badge-pending { background:rgba(255,255,255,.07); color:var(--v2-muted); }

.rpt-rv-editor { flex:1; min-width:0; display:flex; flex-direction:column; gap:.5rem; }
.rpt-rv-student-name { font-size:.9rem; font-weight:600; color:var(--v2-white); }
.rpt-rv-textarea {
  width:100%; min-height:260px; resize:vertical;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:6px; color:var(--v2-white); font-family:var(--v2-font-mono);
  font-size:.83rem; padding:.75rem; line-height:1.55;
  transition:border-color .12s;
}
.rpt-rv-textarea:focus { outline:none; border-color:rgba(0,255,247,.35); }
.rpt-rv-footer {
  display:flex; justify-content:space-between; align-items:center;
}
.rpt-rv-charcount { font-size:.72rem; color:var(--v2-muted); font-family:var(--v2-font-mono); }
.rpt-rv-saving    { font-size:.75rem; color:var(--v2-muted); font-family:var(--v2-font-mono); }

/* ═══════════════════════════════════════════════════════════════════════════
   TEMPLATES TAB
   ═══════════════════════════════════════════════════════════════════════════ */

.rpt-tmpl-toolbar {
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap:.75rem; margin-bottom:1rem;
}
.rpt-tmpl-hint {
  font-size:.8rem; color:var(--v2-muted); font-family:var(--v2-font-mono);
  margin:0; flex:1; line-height:1.55; max-width:580px;
}
.rpt-tmpl-hint code { color:var(--v2-cyan); }

.rpt-tmpl-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:.75rem;
}

.rpt-tmpl-card {
  position:relative; overflow:hidden;
  background:var(--v2-surface); border:1px solid rgba(255,255,255,.07);
  border-radius:8px; display:flex; flex-direction:column;
  transition:border-color .15s;
}
.rpt-tmpl-card.tmpl-match    { border-color:rgba(0,255,150,.28); }
.rpt-tmpl-card.tmpl-mismatch { border-color:rgba(255,179,71,.22); }

.rpt-tmpl-stripe { height:3px; width:100%; flex-shrink:0; }
.rpt-tmpl-stripe.tmpl-match    { background:var(--v2-green); }
.rpt-tmpl-stripe.tmpl-mismatch { background:var(--v2-amber); }

.rpt-tmpl-body {
  flex:1; padding:.75rem 1rem; display:flex; flex-direction:column; gap:.3rem;
}
.rpt-tmpl-name     { font-size:.88rem; font-weight:600; color:var(--v2-white); }
.rpt-tmpl-filename { font-size:.7rem; color:var(--v2-muted); font-family:var(--v2-font-mono); }

.rpt-tmpl-pills { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.25rem; }
.rpt-tmpl-pill {
  font-family:var(--v2-font-mono); font-size:.67rem;
  padding:2px 7px; border-radius:3px; font-weight:600;
}
.pill-ok   { background:rgba(0,255,150,.12); color:var(--v2-green); border:1px solid rgba(0,255,150,.28); }
.pill-warn { background:rgba(255,179,71,.12); color:var(--v2-amber); border:1px solid rgba(255,179,71,.32); }

.rpt-tmpl-match-label { font-size:.74rem; font-weight:600; margin-top:.2rem; }

.rpt-tmpl-actions {
  display:flex; gap:.4rem; padding:.5rem .75rem;
  border-top:1px solid rgba(255,255,255,.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPORT PPTX MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.rpt-export-warn-box {
  background:rgba(255,23,68,.07); border:1px solid rgba(255,23,68,.28);
  border-radius:6px; padding:.6rem .9rem; margin-bottom:.85rem;
}
.rpt-export-warn-title {
  display:flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:700; color:var(--v2-red); margin-bottom:.3rem;
}
.rpt-export-warn-list {
  margin:0 0 0 1.1rem; padding:0; list-style:disc;
}
.rpt-export-warn-list li {
  font-size:.78rem; color:var(--v2-red); font-family:var(--v2-font-mono);
  padding:.05rem 0;
}

.rpt-export-section { margin-bottom:.75rem; }
.rpt-export-section:last-child { margin-bottom:0; }
.rpt-export-section-label {
  font-size:.68rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--v2-muted); margin-bottom:.35rem; font-weight:700;
}

.rpt-export-tmpl-row {
  display:flex; align-items:flex-start; gap:.65rem;
  padding:.5rem .65rem; border-radius:5px; cursor:pointer;
  border:1px solid rgba(255,255,255,.06); margin-bottom:.3rem;
  transition:background .1s, border-color .1s;
}
.rpt-export-tmpl-row:hover   { background:rgba(255,255,255,.03); }
.rpt-export-tmpl-row.selected {
  background:rgba(0,255,247,.06); border-color:rgba(0,255,247,.28);
}

.rpt-export-tmpl-dot {
  width:12px; height:12px; border-radius:50%; flex-shrink:0; margin-top:3px;
  border:2px solid rgba(255,255,255,.2);
  transition:border-color .12s, background .12s;
}
.rpt-export-tmpl-dot.active { border-color:var(--v2-cyan); background:var(--v2-cyan); }

.rpt-export-tmpl-name { font-size:.83rem; color:var(--v2-white); }
.rpt-export-tmpl-meta { font-size:.72rem; margin-top:.1rem; font-family:var(--v2-font-mono); }

/* Legacy compat — report detail header (old template) */
.rpt-detail-header {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:.75rem; margin-bottom:1rem;
}
.rpt-detail-label { font-size:.65rem; text-transform:uppercase; letter-spacing:.07em; color:var(--v2-muted); }
.rpt-detail-range { font-family:var(--v2-font-mono); font-size:.88rem; color:var(--v2-white); }
.rpt-section-title {
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--v2-cyan); margin:.25rem 0 .6rem; padding-bottom:.4rem;
  border-bottom:1px solid rgba(0,255,247,.12);
}