/* ============================================
   OS Algorithm Visualizer — Design System
   Matches Indian Servers Algorithms Visualization
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--surface);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* ── CSS Variables ── */
:root {
  --ink: #14212f;
  --muted: #607080;
  --surface: #edf4fb;
  --panel: #ffffff;
  --line: #c9d8e8;
  --accent: #1673c7;
  --accent-2: #d85f3f;
  --accent-3: #d59a26;

  --blue-1: #f8fbff;
  --blue-2: #dceeff;
  --blue-3: #9bc8ef;
  --blue-4: #1673c7;
  --blue-5: #0f4f8d;

  /* Category accent colors */
  --cpu-color: #1673c7;
  --cpu-light: #dceeff;
  --mem-color: #22a06b;
  --mem-light: #d4f0e3;
  --disk-color: #ef6c3e;
  --disk-light: #fde8df;
  --deadlock-color: #5865f2;
  --deadlock-light: #e0e2fd;
  --alloc-color: #0f9f9a;
  --alloc-light: #ccf0ef;
  --process-color: #7c5bb0;
  --process-light: #ede5f8;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  --sidebar-width: 260px;
  --nav-height: 60px;

  --shadow-sm: 0 1px 3px rgba(19, 55, 90, 0.08);
  --shadow-md: 0 4px 16px rgba(19, 55, 90, 0.10);
  --shadow-lg: 0 8px 32px rgba(19, 55, 90, 0.13);
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --ink: #f3f7fb;
  --muted: #b8c7d6;
  --surface: #101722;
  --panel: #172434;
  --line: #2a3f55;
  --blue-1: #172434;
  --blue-2: #1e344f;
  --blue-3: #3768a3;
}

/* ── Top Navigation ── */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: linear-gradient(180deg, #ffffff, #eef7ff);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 #fff inset, 0 10px 28px rgba(32, 88, 139, 0.08);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-4);
}
[data-theme="dark"] .top-nav {
  background: linear-gradient(180deg, #172434, #0f1c2e);
  border-color: var(--line);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}
.nav-brand-mark {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #ffd56e, #d89a20);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 18px; color: #3d2300;
  box-shadow: 0 2px 8px rgba(200,130,0,0.3);
  flex-shrink: 0;
}
.nav-brand-text { font-weight: 700; font-size: 1rem; color: var(--blue-5); line-height: 1.2; }
.nav-brand-sub { font-size: 0.72rem; color: var(--muted); font-weight: 500; }
[data-theme="dark"] .nav-brand-text { color: var(--blue-3); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }

.nav-link {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem; font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: var(--blue-2); color: var(--blue-5); }
.nav-link.active { background: var(--blue-2); color: var(--blue-4); font-weight: 600; }
.nav-link .dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
[data-theme="dark"] .nav-link:hover { background: var(--blue-2); color: var(--blue-3); }

.nav-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

/* ── Theme Toggle ── */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #f8fbff, #e8f2fc);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: all 0.15s;
}
.theme-toggle:hover { box-shadow: var(--shadow-sm); }
[data-theme="dark"] .theme-toggle { background: linear-gradient(180deg, #1e344f, #152033); border-color: var(--line); }

/* ── Page Layout ── */
.page-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - var(--nav-height));
}

.page-layout-3 {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 280px;
  min-height: calc(100vh - var(--nav-height));
}

/* ── Control Panel ── */
.control-panel {
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow-y: auto;
  max-height: calc(100vh - var(--nav-height));
  position: sticky;
  top: var(--nav-height);
}
[data-theme="dark"] .control-panel { background: #172434; }

/* ── Visualization Panel ── */
.viz-panel {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
}

/* ── Info Panel ── */
.info-panel {
  background: var(--panel);
  border-left: 1px solid var(--line);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
  max-height: calc(100vh - var(--nav-height));
  position: sticky;
  top: var(--nav-height);
}
[data-theme="dark"] .info-panel { background: #172434; }

/* ── Section Headers ── */
.section-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.panel-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-4);
}

/* ── Cards ── */
.card {
  background: linear-gradient(180deg, #ffffff, #f4f9ff);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: inset 0 1px 0 #fff, var(--shadow-sm);
}
[data-theme="dark"] .card { background: linear-gradient(180deg, #1e344f, #172434); border-color: var(--line); box-shadow: none; }

.card-header {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.card-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.card-title { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.card-subtitle { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

/* ── Form Controls ── */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label { font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.form-hint { font-size: 0.75rem; color: var(--muted); }

input[type="text"],
input[type="number"],
select,
textarea {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(22, 115, 199, 0.15);
}
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background: #1e344f; border-color: var(--line); color: var(--ink);
}
input[type="range"] {
  padding: 0;
  accent-color: var(--accent);
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.825rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.btn:disabled { opacity: 0.48; cursor: not-allowed; filter: grayscale(0.3); }
.btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(19,88,148,0.14); }
.btn:not(:disabled):active { transform: translateY(0); box-shadow: inset 0 2px 4px rgba(0,0,0,0.08); }

.btn-primary {
  background: linear-gradient(180deg, #2280d8, #1267b5);
  color: #fff;
  border-color: #0f5799;
  box-shadow: 0 1px 3px rgba(13,70,140,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary:not(:disabled):hover { background: linear-gradient(180deg, #2a8ae0, #1673c7); }

.btn-secondary {
  background: linear-gradient(180deg, #f8fbff, #e8f2fc);
  color: var(--blue-5);
  border-color: var(--blue-3);
}
.btn-secondary:not(:disabled):hover { background: linear-gradient(180deg, #eef6ff, #dceeff); }
[data-theme="dark"] .btn-secondary { background: linear-gradient(180deg, #1e344f, #172434); color: var(--blue-3); border-color: var(--line); }

.btn-success {
  background: linear-gradient(180deg, #2db87a, #1d8f5c);
  color: #fff;
  border-color: #156040;
}

.btn-danger {
  background: linear-gradient(180deg, #fff1ed, #f8c8ba);
  color: #8b2500;
  border-color: #e28d75;
}

.btn-warning {
  background: linear-gradient(180deg, #fff7dc, #f2d37a);
  color: #5a3800;
  border-color: #d5a833;
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--blue-2); color: var(--blue-5); }

.btn-sm { padding: 5px 10px; font-size: 0.775rem; }
.btn-lg { padding: 11px 20px; font-size: 0.925rem; }
.btn-icon { padding: 8px; width: 36px; height: 36px; }
.btn-icon.btn-sm { padding: 5px; width: 28px; height: 28px; }

.btn-group { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ── Process Colors ── */
.proc-colors {
  --p0: #1673c7; --p1: #d85f3f; --p2: #22a06b; --p3: #7c5bb0;
  --p4: #ef9c00; --p5: #0f9f9a; --p6: #db2777; --p7: #65a30d;
}

/* ── Tables ── */
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--line); }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
thead { background: linear-gradient(180deg, #f4f9ff, #edf4fb); }
[data-theme="dark"] thead { background: linear-gradient(180deg, #1e344f, #172434); }
th {
  padding: 9px 12px;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--blue-1); }
[data-theme="dark"] tbody tr:hover { background: #1e344f; }

/* ── Process Table Input ── */
.process-table input {
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  text-align: center;
  min-width: 50px;
}

/* ── Gantt Chart ── */
.gantt-wrap {
  background: var(--blue-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  overflow-x: auto;
}
.gantt-chart {
  position: relative;
  min-height: 80px;
}
.gantt-row {
  display: flex;
  align-items: center;
  gap: 0;
  height: 44px;
  position: relative;
}
.gantt-block {
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700;
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: opacity 0.2s;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.1);
}
.gantt-block::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 40%;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.gantt-block.idle {
  background: repeating-linear-gradient(45deg, #d0dde8, #d0dde8 4px, #dde8f2 4px, #dde8f2 8px);
  color: var(--muted);
  border-color: var(--line);
}
.gantt-timeline {
  display: flex;
  position: relative;
  margin-top: var(--space-1);
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 600;
}
.gantt-tick {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.gantt-cursor {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--accent-2);
  pointer-events: none;
  transition: left 0.3s ease;
}
.gantt-cursor::before {
  content: '';
  position: absolute;
  top: -5px; left: -4px;
  border: 5px solid transparent;
  border-top-color: var(--accent-2);
}

/* ── Page Frame Visualization ── */
.page-frames {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.page-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.page-frame-label { font-size: 0.7rem; color: var(--muted); font-weight: 600; }
.page-frame-slots {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.page-slot {
  width: 54px; height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--blue-1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700;
  color: var(--ink);
  transition: all 0.3s ease;
  position: relative;
}
.page-slot.hit {
  background: linear-gradient(135deg, #d4f0e3, #b4e6cc);
  border-color: #5dbb8a;
  color: #135b49;
  box-shadow: 0 0 0 2px rgba(34, 160, 107, 0.25);
  animation: slot-hit 0.5s ease;
}
.page-slot.fault {
  background: linear-gradient(135deg, #fde8df, #fbbfa3);
  border-color: #e67a5a;
  color: #8b2500;
  box-shadow: 0 0 0 2px rgba(239, 108, 62, 0.25);
  animation: slot-fault 0.5s ease;
}
.page-slot.empty { color: var(--muted); font-size: 0.75rem; }
.page-slot.use-bit::after {
  content: attr(data-use);
  position: absolute;
  top: 3px; right: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent-3);
}

@keyframes slot-hit {
  0% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes slot-fault {
  0%, 25%, 50%, 75%, 100% { transform: translateX(0); }
  12.5% { transform: translateX(-3px); }
  37.5% { transform: translateX(3px); }
  62.5% { transform: translateX(-2px); }
  87.5% { transform: translateX(2px); }
}

/* ── Reference String ── */
.ref-string {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--blue-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.ref-token {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 700;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: all 0.2s;
  flex-shrink: 0;
}
.ref-token.current {
  background: var(--accent);
  color: #fff;
  border-color: var(--blue-5);
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(22,115,199,0.35);
}
.ref-token.hit { background: var(--mem-light); border-color: var(--mem-color); color: #135b49; }
.ref-token.fault { background: var(--disk-light); border-color: var(--disk-color); color: #8b2500; }

/* ── Disk Chart ── */
.disk-chart-wrap {
  background: var(--blue-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  overflow: hidden;
}
.disk-svg { width: 100%; display: block; }

/* ── Memory Map ── */
.memory-map {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--blue-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.mem-block {
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
}
.mem-block.free {
  background: repeating-linear-gradient(45deg, #edf4fb, #edf4fb 5px, #e2edf7 5px, #e2edf7 10px);
  border-color: var(--line);
  color: var(--muted);
}
.mem-block.allocated {
  color: #fff;
}
.mem-block-size {
  margin-left: auto;
  font-size: 0.72rem;
  opacity: 0.9;
}
.mem-block-addr {
  font-size: 0.68rem;
  opacity: 0.7;
  font-family: monospace;
}

/* ── Matrix Grid ── */
.matrix-grid {
  display: grid;
  gap: 4px;
}
.matrix-cell {
  background: var(--blue-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 600;
  color: var(--ink);
  aspect-ratio: 1;
  min-width: 42px;
  min-height: 38px;
  padding: 4px;
  transition: all 0.3s ease;
}
.matrix-cell.highlight {
  background: #fff3d4;
  border-color: #e69f00;
  box-shadow: 0 0 0 2px rgba(230, 159, 0, 0.2);
}
.matrix-cell.active {
  background: var(--blue-2);
  border-color: var(--blue-4);
  box-shadow: 0 0 0 2px rgba(22, 115, 199, 0.2);
}
.matrix-cell.safe {
  background: var(--mem-light);
  border-color: var(--mem-color);
  color: #135b49;
}
.matrix-cell.unsafe {
  background: var(--disk-light);
  border-color: var(--disk-color);
  color: #8b2500;
}

/* ── Status Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.badge-blue { background: var(--cpu-light); color: #1a4a82; }
.badge-green { background: var(--mem-light); color: #135b49; }
.badge-red { background: var(--disk-light); color: #8b2500; }
.badge-purple { background: var(--deadlock-light); color: #2d3191; }
.badge-teal { background: var(--alloc-light); color: #0a5c59; }
.badge-gold { background: #fff3d4; color: #7a4800; }

/* ── Metric Cards ── */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
}
.metric-card {
  background: var(--blue-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  text-align: center;
}
.metric-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.metric-label {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Playback Controls ── */
.playback-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.playback-speed {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.speed-btn {
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--blue-1);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.speed-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--blue-5);
}
.step-counter {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  min-width: 80px;
}

/* ── Progress Bar ── */
.progress-bar {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--blue-3));
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* ── Log/Steps Panel ── */
.step-log {
  background: var(--blue-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  max-height: 220px;
  overflow-y: auto;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.step-entry {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  line-height: 1.4;
  color: var(--ink);
  border-left: 3px solid var(--line);
}
.step-entry.current {
  background: var(--blue-2);
  border-left-color: var(--accent);
  font-weight: 600;
}
.step-entry.success { border-left-color: var(--mem-color); background: #f4fdf8; }
.step-entry.warning { border-left-color: var(--accent-3); background: #fffbf0; }
.step-entry.error { border-left-color: var(--accent-2); background: #fff7f5; }
[data-theme="dark"] .step-entry.success { background: #0f2a1e; }
[data-theme="dark"] .step-entry.warning { background: #251c00; }
[data-theme="dark"] .step-entry.error { background: #2a0e00; }

/* ── Algorithm Selector ── */
.algo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.algo-option {
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--blue-1);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  user-select: none;
}
.algo-option:hover { border-color: var(--blue-3); background: var(--blue-2); }
.algo-option.selected {
  border-color: var(--accent);
  background: var(--blue-2);
  color: var(--accent);
  box-shadow: 0 0 0 2px rgba(22,115,199,0.15);
}

/* ── Legend ── */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--muted); font-weight: 500;
}
.legend-swatch {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── Divider ── */
.divider { height: 1px; background: var(--line); margin: 2px 0; }
hr { border: none; border-top: 1px solid var(--line); }

/* ── Tooltip ── */
[data-tip] { position: relative; cursor: help; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%; transform: translateX(-50%);
  background: #14212f;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 200;
}
[data-tip]:hover::after { opacity: 1; }

/* ── Home Page ── */
.hero {
  background: linear-gradient(135deg, #0f2d52 0%, #1673c7 60%, #3a8fd4 100%);
  padding: var(--space-6) var(--space-6) 40px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(255,255,255,0.08) 0%, transparent 70%);
}
.hero-content { position: relative; max-width: 900px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
  backdrop-filter: blur(4px);
}
.hero-title {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: var(--space-3);
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.hero-sub {
  font-size: 1.05rem;
  opacity: 0.85;
  font-weight: 400;
  max-width: 560px;
  line-height: 1.6;
}

.algo-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
  padding: var(--space-6);
}
.algo-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  text-decoration: none;
  display: block;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.algo-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-accent, var(--accent));
}
.algo-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--card-accent, var(--accent));
}
[data-theme="dark"] .algo-card { background: #172434; }

.algo-card-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: var(--space-4);
  border: 1px solid rgba(0,0,0,0.08);
}
.algo-card-title {
  font-size: 1.05rem; font-weight: 800; color: var(--ink);
  margin-bottom: 6px;
}
.algo-card-desc {
  font-size: 0.82rem; color: var(--muted); line-height: 1.5;
  margin-bottom: var(--space-4);
}
.algo-card-tags {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.tag {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid;
}

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue-3); }

/* ── Animations ── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.fade-in { animation: fadeIn 0.3s ease; }
.spin { animation: spin 1s linear infinite; }

/* ── State Indicators ── */
.state-dot {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block;
}
.state-dot.running { background: var(--mem-color); animation: pulse 1s infinite; }
.state-dot.waiting { background: var(--accent-3); }
.state-dot.ready { background: var(--accent); }
.state-dot.done { background: var(--muted); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .page-layout { grid-template-columns: 280px minmax(0, 1fr); }
  .page-layout-3 { grid-template-columns: 280px minmax(0, 1fr); }
  .page-layout-3 .info-panel { display: none; }
}
@media (max-width: 760px) {
  .page-layout, .page-layout-3 { grid-template-columns: 1fr; }
  .control-panel {
    position: static; max-height: none;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  .info-panel {
    position: static; max-height: none;
    border-left: none; border-top: 1px solid var(--line);
  }
  .nav-links { display: none; }
  .hero-title { font-size: 1.6rem; }
  .algo-cards-grid { padding: var(--space-4); grid-template-columns: 1fr; }
}

/* ── Utility Classes ── */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.text-muted { color: var(--muted); }
.text-sm { font-size: 0.82rem; }
.text-xs { font-size: 0.72rem; }
.font-bold { font-weight: 700; }
.font-mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.hidden { display: none !important; }

/* Animated State Transitions */
:root {
  --motion-fast: 180ms;
  --motion-med: 360ms;
  --motion-slow: 620ms;
  --motion-pop: cubic-bezier(.2, 1.25, .35, 1);
  --motion-smooth: cubic-bezier(.22, .61, .36, 1);
}

@keyframes state-enter {
  0% { opacity: 0; transform: translateY(8px) scale(.94); }
  65% { opacity: 1; transform: translateY(-2px) scale(1.035); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes state-change-flash {
  0% { box-shadow: 0 0 0 0 rgba(22,115,199,.38); }
  55% { box-shadow: 0 0 0 5px rgba(22,115,199,.18); }
  100% { box-shadow: 0 0 0 0 rgba(22,115,199,0); }
}
@keyframes page-load-in {
  0% { opacity: 0; transform: translateY(-18px) scale(.72) rotate(-3deg); }
  70% { opacity: 1; transform: translateY(2px) scale(1.08) rotate(1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes page-evict-out {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  45% { transform: translateX(14px) scale(.96); opacity: .72; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes page-hit-pulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.12); }
}
@keyframes disk-head-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(239,108,62,0)); }
  50% { filter: drop-shadow(0 0 10px rgba(239,108,62,.65)); }
}
@keyframes disk-dot-service {
  0% { transform: translate(-50%,-50%) scale(.75); opacity: .35; }
  55% { transform: translate(-50%,-50%) scale(1.55); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.4); opacity: 1; }
}
@keyframes running-breathe {
  0%, 100% { box-shadow: inset 3px 0 0 var(--mem-color), 0 0 0 rgba(34,160,107,0); }
  50% { box-shadow: inset 3px 0 0 var(--mem-color), 0 0 0 4px rgba(34,160,107,.12); }
}

.state-enter { animation: state-enter var(--motion-med) var(--motion-pop); }
.state-changed { animation: state-change-flash var(--motion-slow) var(--motion-smooth); }

.frame-cell,
.page-slot,
.ref-token,
.mem-block,
.mem-block-row,
.disk-block,
.memory-line,
.avail-cell,
.actor-state,
.actor-row,
.process-state-card,
.proc-row,
.state-chip,
.request-dot,
.head-marker,
.head-label,
.track-rail-done,
.gantt-cell,
.gantt-block {
  transition-property: background-color, border-color, color, opacity, transform, box-shadow, left, width, filter;
  transition-duration: var(--motion-med);
  transition-timing-function: var(--motion-smooth);
}

.frame-cell.fault,
.page-slot.fault { animation: page-load-in var(--motion-slow) var(--motion-pop); }
.frame-cell.hit,
.page-slot.hit { animation: page-hit-pulse var(--motion-med) var(--motion-pop); }
.frame-cell.evict { animation: page-evict-out var(--motion-slow) var(--motion-smooth); }
.frame-cell:not(.empty),
.page-slot:not(.empty) { will-change: transform, background-color, border-color; }

.head-marker { transition-duration: var(--motion-slow); }
.head-marker.moving,
.head-marker.state-changed { animation: disk-head-pulse var(--motion-slow) ease; }
.head-marker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -11px;
  width: 22px;
  background: linear-gradient(90deg, transparent, rgba(239,108,62,.18), transparent);
  opacity: .75;
  pointer-events: none;
}
.request-dot.current { animation: disk-dot-service var(--motion-med) var(--motion-pop); }
.request-dot.served { transform: translate(-50%,-50%) scale(.78); }

.proc-row.state-running,
.process-state-card.state-running,
.actor-state.run { animation: running-breathe 1.1s ease-in-out infinite; }
.proc-row.state-ready,
.process-state-card.state-ready,
.actor-state.wait { transform: translateX(2px); }
.proc-row.state-done,
.process-state-card.state-done { transform: scale(.985); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Global Teaching UI */
.has-global-sidebar { padding-left: 238px; }
.global-sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 220;
  width: 238px; padding: 14px;
  background: linear-gradient(180deg, var(--panel), var(--blue-1));
  border-right: 1px solid var(--line);
  overflow-y: auto;
  box-shadow: var(--shadow-md);
}
.global-sidebar-brand { display:flex; flex-direction:column; gap:2px; margin-bottom:14px; color:var(--ink); }
.global-sidebar-brand span { color:var(--muted); font-size:.74rem; font-weight:600; }
.global-sidebar-section { margin-bottom:16px; }
.global-sidebar-title {
  font-size:.68rem; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px;
}
.global-mode { display:grid; grid-template-columns:1fr; gap:6px; }
.global-mode button,
.global-actions button,
.global-timeline button,
.scenario-list button {
  border:1px solid var(--line); background:var(--blue-1); color:var(--ink);
  border-radius:var(--radius-md); padding:7px 9px; font:inherit; font-size:.78rem;
  font-weight:700; cursor:pointer; text-align:left;
}
.global-mode button.active { background:var(--accent); color:#fff; border-color:var(--blue-5); }
.global-module-list { display:flex; flex-direction:column; gap:5px; }
.global-module-list a {
  display:flex; justify-content:space-between; gap:8px; align-items:center;
  padding:7px 8px; border-radius:var(--radius-md); text-decoration:none;
  color:var(--ink); border:1px solid transparent; font-size:.79rem; font-weight:700;
}
.global-module-list a small { color:var(--muted); font-weight:600; }
.global-module-list a:hover, .global-module-list a.active { background:var(--blue-2); border-color:var(--line); color:var(--accent); }
.global-setting-stack { display:flex; flex-direction:column; gap:8px; }
.global-check { display:flex; gap:7px; align-items:center; color:var(--muted); font-size:.78rem; font-weight:700; }
.scenario-list { display:flex; flex-direction:column; gap:6px; }
.scenario-list button { display:flex; flex-direction:column; gap:3px; line-height:1.35; }
.scenario-list span { color:var(--muted); font-size:.7rem; font-weight:500; }
.coverage-panel { display:flex; flex-direction:column; gap:6px; }
.global-sidebar-toggle { display:none; }

.breadcrumb-bar {
  display:flex; align-items:center; gap:8px; padding:8px 20px;
  background:var(--blue-1); border-bottom:1px solid var(--line);
  font-size:.78rem; color:var(--muted); font-weight:700;
}
.breadcrumb-bar a { color:var(--accent); text-decoration:none; }
.breadcrumb-bar strong { color:var(--ink); }

.ui-badge-row { display:flex; flex-wrap:wrap; gap:5px; margin:5px 0 8px; }
.ui-badge-row span {
  border-radius:20px; padding:2px 8px; font-size:.66rem; font-weight:800;
  border:1px solid var(--line); background:var(--blue-1); color:var(--muted);
}
.difficulty.beginner { background:var(--mem-light); color:#135b49; border-color:var(--mem-color); }
.difficulty.intermediate { background:var(--cpu-light); color:#1a4a82; border-color:var(--cpu-color); }
.difficulty.advanced { background:var(--deadlock-light); color:#2d3191; border-color:var(--deadlock-color); }
.best-badge { background:var(--mem-light) !important; color:#135b49 !important; }
.watch-badge { background:#fff3d4 !important; color:#7a4800 !important; }

.algorithm-index-panel { padding:18px 24px 0; }
.algorithm-search-row { display:flex; gap:10px; align-items:center; max-width:980px; }
.algorithm-search-row input { max-width:520px; }
.algorithm-search-row span { color:var(--muted); font-size:.8rem; font-weight:800; }
.algorithm-index { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.algorithm-index a {
  text-decoration:none; color:var(--ink); background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius-md);
  padding:8px 10px; display:flex; flex-direction:column; gap:2px;
}
.algorithm-index a span { font-size:.7rem; color:var(--muted); }

.onboarding-tip {
  position:fixed; right:22px; top:78px; z-index:260; max-width:300px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:14px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:8px;
  animation: fadeIn .35s ease;
}
.onboarding-tip span { color:var(--muted); font-size:.82rem; line-height:1.45; }
.onboarding-tip button { align-self:flex-start; }

.global-explain-panel, .teacher-summary {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-4); box-shadow:var(--shadow-sm);
}
#globalExplainText, .teacher-summary span { color:var(--muted); font-size:.84rem; line-height:1.55; display:block; }
.teacher-summary strong { display:block; margin-bottom:4px; color:var(--ink); }

.global-timeline {
  position:fixed; left:258px; right:20px; bottom:12px; z-index:210;
  display:flex; gap:8px; align-items:center; padding:8px;
  background:rgba(255,255,255,.94); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  backdrop-filter: blur(8px);
}
[data-theme="dark"] .global-timeline { background:rgba(23,36,52,.94); }
.global-timeline input { flex:1; }
.global-timeline select { width:86px; }

.global-actions {
  position:fixed; right:20px; bottom:70px; z-index:211;
  display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;
  max-width:360px;
}
.global-actions button { text-align:center; background:var(--panel); box-shadow:var(--shadow-sm); }
.global-toast {
  position:fixed; left:50%; bottom:82px; transform:translateX(-50%) translateY(10px);
  background:#14212f; color:#fff; border-radius:var(--radius-md);
  padding:9px 12px; font-size:.82rem; font-weight:700; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; z-index:280;
}
.global-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.colorblind-safe {
  --cpu-color:#0072b2; --mem-color:#009e73; --disk-color:#d55e00;
  --deadlock-color:#cc79a7; --accent:#0072b2; --accent-2:#d55e00; --accent-3:#e69f00;
}

@media (max-width: 900px) {
  .has-global-sidebar { padding-left:0; padding-bottom:78px; }
  .global-sidebar {
    top:auto; width:auto; right:0; height:72vh; border-right:none; border-top:1px solid var(--line);
    transform:translateY(calc(100% - 52px)); transition:transform .2s ease;
    border-radius:14px 14px 0 0;
  }
  .sidebar-open .global-sidebar { transform:translateY(0); }
  .global-sidebar-toggle {
    display:block; position:fixed; left:14px; bottom:22px; z-index:260;
    border:1px solid var(--line); background:var(--accent); color:#fff;
    border-radius:var(--radius-md); padding:9px 12px; font-weight:800;
  }
  .global-timeline { left:10px; right:10px; bottom:10px; }
  .global-actions { right:10px; bottom:62px; max-width:calc(100vw - 20px); }
  .onboarding-tip { left:14px; right:14px; top:72px; max-width:none; }
}

@media print {
  .top-nav, .global-sidebar, .global-sidebar-toggle, .global-timeline, .global-actions, .onboarding-tip, .playback-bar, .control-panel { display:none !important; }
  .has-global-sidebar { padding-left:0; }
  body { background:#fff; color:#000; }
  .card, .global-explain-panel, .teacher-summary { box-shadow:none; break-inside:avoid; }
  .viz-panel { display:block; overflow:visible; }
  .print-report .teacher-summary::before {
    content:"OS Algorithm Lesson Report"; display:block; font-size:22px; font-weight:900; margin-bottom:12px;
  }
}

/* ============================================================
   Enhancement Pack — 25 UI Features
   ============================================================ */

/* ── Feature 3: Floating Keyboard Shortcuts Panel ── */
.shortcuts-fab {
  position: fixed; right: 20px; top: 82px; z-index: 250;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #fff;
  border: 2px solid rgba(255,255,255,0.25);
  font-size: 1rem; font-weight: 900; line-height: 1;
  cursor: pointer; box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.shortcuts-fab:hover { transform: scale(1.12); box-shadow: var(--shadow-lg); }

.shortcuts-modal {
  position: fixed; right: 64px; top: 72px; z-index: 260;
  width: 310px; max-height: calc(100vh - 96px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 16px; animation: fadeIn 0.18s ease;
}
[data-theme="dark"] .shortcuts-modal { background: #172434; }

.shortcuts-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.shortcuts-header strong { font-size: 0.9rem; color: var(--ink); }
.shortcuts-header button {
  background: none; border: none; font-size: 1.3rem;
  cursor: pointer; color: var(--muted); padding: 0 4px; line-height: 1;
}
.shortcuts-list { display: flex; flex-direction: column; gap: 7px; }
.shortcut-row { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; }
.shortcut-row span { color: var(--ink); }
.shortcut-row kbd {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 7px; min-width: 52px; flex-shrink: 0;
  background: var(--blue-1); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-family: monospace;
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 2px 0 var(--line); color: var(--ink);
}

/* ── Feature 5: Module Progress Checklist ── */
.module-checklist { display: flex; flex-direction: column; gap: 5px; }
.checklist-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 600; color: var(--ink);
}
.checklist-item small { color: var(--muted); font-weight: 500; margin-left: auto; }
.checklist-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--line); background: transparent;
  transition: background 0.25s, border-color 0.25s;
}
.checklist-dot.done { background: var(--mem-color); border-color: var(--mem-color); }

/* ── Feature 9: Gantt Zoom & Pan ── */
.gantt-wrap[data-zoom-init] { position: relative; }
.gantt-zoom-hint {
  position: absolute; top: 5px; right: 8px;
  font-size: 0.62rem; color: var(--muted); font-weight: 600;
  pointer-events: none; opacity: 0.65; white-space: nowrap;
}

/* ── Feature 16: Metrics Comparison Bar Chart ── */
.metrics-chart-panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .metrics-chart-panel { background: #172434; }
.chart-empty-msg { color: var(--muted); font-size: 0.8rem; }
.chart-metric-group { margin-bottom: 14px; }
.chart-metric-group:last-child { margin-bottom: 0; }
.chart-metric-label {
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); margin-bottom: 6px;
}
.chart-bar-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.chart-algo-name {
  width: 90px; flex-shrink: 0; font-size: 0.75rem; font-weight: 600;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chart-bar-track {
  flex: 1; height: 14px; background: var(--blue-1);
  border-radius: 3px; overflow: hidden; border: 1px solid var(--line);
}
.chart-bar-fill {
  height: 100%; min-width: 2px;
  background: linear-gradient(90deg, var(--accent), var(--blue-3));
  border-radius: 3px; transition: width 0.5s ease;
}
.chart-bar-val {
  width: 40px; flex-shrink: 0; text-align: right;
  font-size: 0.74rem; font-weight: 700; color: var(--ink);
}

/* ── Feature 19: Algorithm Complexity Badges ── */
.complexity-badge {
  display: inline-block; margin-left: 5px;
  padding: 1px 5px; border-radius: 8px;
  background: var(--blue-2); color: var(--blue-5);
  border: 1px solid var(--blue-3);
  font-size: 0.6rem; font-weight: 700;
  vertical-align: middle; line-height: 1.5;
  pointer-events: none;
}
.algo-tab.active .complexity-badge,
.algo-option.selected .complexity-badge {
  background: rgba(255,255,255,0.22);
  color: #fff;
  border-color: rgba(255,255,255,0.38);
}

/* ── Feature 20: Trace Mode Annotations ── */
.trace-annotation {
  position: absolute; top: 0; right: 0; z-index: 20;
  background: var(--accent-2); color: #fff;
  font-size: 0.55rem; font-weight: 900; letter-spacing: 0.06em;
  padding: 1px 5px; border-radius: 0 var(--radius-sm) 0 var(--radius-sm);
  pointer-events: none; animation: pulse 0.9s ease-in-out infinite;
}
body.trace-mode .step-entry.current {
  outline: 2px solid var(--accent-2); outline-offset: 2px;
}
body.trace-mode .frame-cell.fault,
body.trace-mode .page-slot.fault,
body.trace-mode .ref-token.current {
  outline: 2px solid var(--accent-2); outline-offset: 2px;
}

/* ── Feature 15: Drag-to-Reorder Table Rows ── */
.drag-handle {
  cursor: grab !important; text-align: center;
  color: var(--muted); font-size: 1rem; user-select: none;
  width: 22px !important; padding: 0 3px !important; opacity: 0.45;
}
.drag-handle:hover { opacity: 1; color: var(--accent); cursor: grab; }
.drag-handle-th { width: 22px !important; padding: 0 !important; }
tr.dragging { opacity: 0.4; }
tr.drag-over { box-shadow: 0 -2px 0 0 var(--accent) inset; }

/* ── Feature 21: High-Contrast Theme ── */
[data-theme="high-contrast"] {
  --ink: #000000;
  --muted: #333333;
  --surface: #ffffff;
  --panel: #ffffff;
  --line: #000000;
  --accent: #0000cc;
  --accent-2: #cc0000;
  --accent-3: #886600;
  --blue-1: #f0f0ff;
  --blue-2: #ccccff;
  --blue-3: #6666cc;
  --blue-4: #0000cc;
  --blue-5: #000077;
  --cpu-color: #0000cc;     --cpu-light: #ddddff;
  --mem-color: #006600;     --mem-light: #ccffcc;
  --disk-color: #cc0000;    --disk-light: #ffdddd;
  --deadlock-color: #660066;--deadlock-light: #ffccff;
  --alloc-color: #006666;   --alloc-light: #ccffff;
  --process-color: #440044; --process-light: #ffccff;
  --shadow-sm: 0 0 0 1px #000;
  --shadow-md: 0 0 0 2px #000;
  --shadow-lg: 0 0 0 3px #000;
}
[data-theme="high-contrast"] .top-nav {
  background: #fff !important; border-bottom: 3px solid #000 !important;
}
[data-theme="high-contrast"] .global-sidebar {
  background: #fff !important; border-right: 3px solid #000 !important;
}
[data-theme="high-contrast"] input,
[data-theme="high-contrast"] select,
[data-theme="high-contrast"] textarea {
  border: 2px solid #000 !important; background: #fff !important; color: #000 !important;
}
[data-theme="high-contrast"] .card {
  border: 2px solid #000 !important; background: #fff !important;
}
[data-theme="high-contrast"] .btn { border-width: 2px !important; }
[data-theme="high-contrast"] .btn-primary { background: #0000cc !important; }
[data-theme="high-contrast"] .algo-card { border: 2px solid #000 !important; }
[data-theme="high-contrast"] .tag { border-width: 2px !important; font-weight: 800 !important; }
[data-theme="high-contrast"] .global-timeline {
  background: #fff !important; border: 3px solid #000 !important;
}
[data-theme="high-contrast"] .badge-blue,
[data-theme="high-contrast"] .badge-green,
[data-theme="high-contrast"] .badge-red,
[data-theme="high-contrast"] .badge-purple,
[data-theme="high-contrast"] .badge-teal,
[data-theme="high-contrast"] .badge-gold {
  border: 2px solid currentColor !important;
}

/* ── Feature 25: Restored-input flash ── */
@keyframes restored-flash {
  0%   { box-shadow: 0 0 0 3px rgba(22,115,199,0.55); }
  100% { box-shadow: none; }
}
.restored-input { animation: restored-flash 0.9s ease; }

/* ── Responsive adjustments for new elements ── */
@media (max-width: 900px) {
  .shortcuts-fab { top: auto; bottom: 64px; right: 14px; }
  .shortcuts-modal { right: 14px; left: 14px; width: auto; top: auto; bottom: 106px; }
}
@media print {
  .shortcuts-fab, .shortcuts-modal, .metrics-chart-panel { display: none !important; }
}

/* ============================================================
   UI/CSS Enhancement Pack — MODs 1, 5, 6, 8, 11, 13, 14, 17,
   26, 27, 28 + Utility Classes
   ============================================================ */

/* ── MOD 1: Collapsible Side Panels ── */
.panel-collapse-btn {
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--muted);
  z-index: 10;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.panel-collapse-btn:hover {
  background: var(--blue-2);
  color: var(--accent);
}
.info-panel .panel-collapse-btn {
  right: auto;
  left: -1px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.control-panel.collapsed {
  width: 0;
  padding: 0;
  overflow: hidden;
  transition: width 0.25s ease;
}
.info-panel.collapsed {
  width: 0;
  padding: 0;
  overflow: hidden;
  transition: width 0.25s ease;
}
.page-layout-3.left-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) 280px;
}
.page-layout-3.right-collapsed {
  grid-template-columns: 300px minmax(0, 1fr) 0;
}

/* ── MOD 5: Full-Screen Viz Mode ── */
.fullscreen-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--muted);
  flex-shrink: 0;
  transition: all 0.15s;
}
.fullscreen-btn:hover {
  background: var(--blue-2);
  color: var(--accent);
  border-color: var(--blue-3);
}
.viz-panel.fullscreen-mode {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--surface);
  overflow-y: auto;
  padding: 20px;
}
.viz-panel.fullscreen-mode ~ * {
  display: none;
}

/* ── MOD 6: Persistent Panel Widths / Resize Handle ── */
.panel-resize-handle {
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  background: transparent;
  z-index: 10;
  transition: background 0.15s;
}
.panel-resize-handle:hover,
.panel-resize-handle.dragging {
  background: var(--accent);
  opacity: 0.5;
}

/* ── MOD 8: Process Color Legend ── */
.proc-color-legend {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding: 6px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
}
.pcl-item {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-weight: 600;
}
.pcl-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── MOD 11: Metric Delta Indicators ── */
.metric-delta {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  margin-top: 2px;
}
.metric-delta.better { color: var(--mem-color); }
.metric-delta.worse  { color: var(--accent-2); }
.metric-delta.same   { color: var(--muted); }

/* ── MOD 13: Zoom +/- Buttons ── */
.gantt-zoom-controls {
  position: absolute;
  top: 5px;
  left: 8px;
  display: flex;
  gap: 3px;
  z-index: 10;
}
.zoom-ctrl-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: all 0.15s;
}
.zoom-ctrl-btn:hover {
  background: var(--blue-2);
  border-color: var(--blue-3);
}

/* ── MOD 14: Animated Metric Number Rollup ── */
@keyframes metric-rollup {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.metric-value.rollup { animation: metric-rollup 0.5s ease; }

/* ── MOD 17: Full-Row Page Fault Flash ── */
@keyframes row-fault-flash {
  0%   { background: rgba(239, 108, 62, 0.35); }
  100% { background: transparent; }
}
@keyframes row-hit-flash {
  0%   { background: rgba(34, 160, 107, 0.35); }
  100% { background: transparent; }
}
.frame-row-fault { animation: row-fault-flash 0.6s ease; }
.frame-row-hit   { animation: row-hit-flash 0.6s ease; }

/* ── MOD 26: Accessible Colorblind Mode Button (Prominent) ── */
.colorblind-quick-btn {
  position: fixed;
  right: 62px;
  top: 14px;
  z-index: 200;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.colorblind-quick-btn.active {
  background: #009e73;
  color: #fff;
  border-color: #007a5a;
}

/* ── MOD 27: ARIA Live Region ── */
.aria-live-region {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── MOD 28: Reduced-Motion Safe Animations ── */
@media (prefers-reduced-motion: reduce) {
  .head-marker.moving       { animation: none !important; }
  .frame-cell.fault         { animation: none !important; }
  .page-slot.fault          { animation: none !important; }
  .proc-row.state-running   { animation: none !important; }
}

/* ── Input History Dropdown ── */
.input-history-wrap { position: relative; display: inline-block; }
.input-history-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 0.8rem;
  color: var(--muted); padding: 2px; line-height: 1;
}
.input-history-btn:hover { color: var(--accent); }
.input-history-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 300;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  max-height: 160px; overflow-y: auto;
}
.input-history-item {
  padding: 6px 10px; font-size: 0.78rem; cursor: pointer; color: var(--ink);
  border-bottom: 1px solid var(--line); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.input-history-item:last-child { border-bottom: none; }
.input-history-item:hover { background: var(--blue-2); }

/* ── Seek Rate Input ── */
.seek-rate-panel { font-size: 0.78rem; }
.seek-time-display {
  font-size: 0.72rem; color: var(--muted); margin-top: 4px; padding: 4px 8px;
  background: var(--blue-1); border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

/* ── SCAN Direction Toggle ── */
.direction-toggle-group { display: flex; gap: 4px; }
.direction-btn {
  flex: 1; padding: 5px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); font-size: 0.75rem; font-weight: 700;
  cursor: pointer; background: var(--blue-1); color: var(--muted);
  transition: all 0.15s; text-align: center;
}
.direction-btn.active {
  background: var(--disk-color); color: #fff; border-color: #c04a1c;
}

/* ── Starvation Indicator (SSTF) ── */
.starv-indicator {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  background: #fffbf0; border: 1px solid #d59a26;
  font-size: 0.78rem; margin-bottom: 4px;
}
.starv-indicator strong { color: #5a3800; }

/* ── Compaction Animation ── */
@keyframes compact-slide {
  0%   { transform: translateX(0);    opacity: 1; }
  40%  { transform: translateX(-8px); opacity: 0.7; }
  100% { transform: translateX(0);    opacity: 1; }
}
.mem-block.compacting { animation: compact-slide 0.6s ease; }

/* 2026 compact application shell: sidebar owns navigation; no duplicate top menu. */
.has-global-sidebar>.top-nav{display:none!important}.has-global-sidebar .breadcrumb-bar{position:sticky;top:0;z-index:190;min-height:36px;background:rgba(248,251,255,.94);backdrop-filter:blur(14px)}[data-theme="dark"] .has-global-sidebar .breadcrumb-bar{background:rgba(15,30,48,.94)}
.sidebar-icon{width:20px;height:20px;display:grid;place-items:center;flex:0 0 20px;color:var(--accent)}.sidebar-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.global-mode button{display:flex;align-items:center;gap:9px}.global-module-list a{display:grid;grid-template-columns:20px minmax(0,1fr) auto;justify-content:initial}.sidebar-collapse-btn{position:sticky;bottom:-1px;width:100%;min-height:34px;margin-top:8px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--muted);display:flex;align-items:center;justify-content:center;gap:7px;font:700 .7rem/1 inherit;cursor:pointer;box-shadow:0 -7px 16px color-mix(in srgb,var(--panel),transparent 20%)}.sidebar-collapse-btn>span:first-child{font-size:1.2rem;line-height:1}.sidebar-collapse-btn:hover{color:var(--accent);border-color:var(--accent)}
.has-global-sidebar,.global-sidebar,.global-timeline{transition:padding-left .24s,width .24s,left .24s}.has-global-sidebar.sidebar-collapsed{padding-left:68px}.sidebar-collapsed .global-sidebar{width:68px;padding-left:9px;padding-right:9px;overflow-x:hidden}.sidebar-collapsed .global-sidebar-brand>span:not(.premium-brand-mark),.sidebar-collapsed .global-sidebar-title,.sidebar-collapsed .sidebar-label,.sidebar-collapsed .global-module-list small,.sidebar-collapsed .module-checklist,.sidebar-collapsed .global-setting-stack,.sidebar-collapsed .scenario-list,.sidebar-collapsed .coverage-panel,.sidebar-collapsed .premium-sidebar-quote,.sidebar-collapsed .sidebar-collapse-label{display:none!important}.sidebar-collapsed .global-sidebar-brand{justify-content:center;margin-bottom:12px}.sidebar-collapsed .global-mode button{justify-content:center;padding:7px}.sidebar-collapsed .global-module-list a{display:grid;grid-template-columns:1fr;place-items:center;padding:7px}.sidebar-collapsed .sidebar-icon{width:22px;height:22px}.sidebar-collapsed .sidebar-icon svg{width:18px;height:18px}.sidebar-collapsed .global-sidebar-section{margin-bottom:10px}.sidebar-collapsed .global-timeline{left:82px}
@media(min-width:901px){.has-global-sidebar .control-panel,.has-global-sidebar .info-panel{top:36px;max-height:calc(100vh - 36px)}}
@media(max-width:900px){.sidebar-collapse-btn{display:none}.has-global-sidebar.sidebar-collapsed{padding-left:0}.sidebar-collapsed .global-sidebar{width:auto;padding:14px}.sidebar-collapsed .global-sidebar-brand>span:not(.premium-brand-mark),.sidebar-collapsed .global-sidebar-title,.sidebar-collapsed .sidebar-label,.sidebar-collapsed .global-module-list small,.sidebar-collapsed .module-checklist{display:initial!important}.sidebar-collapsed .global-module-list a{display:grid;grid-template-columns:20px minmax(0,1fr) auto;place-items:initial}.sidebar-collapsed .global-mode button{justify-content:flex-start}}

/* Shared application sidebar — canonical CPU Scheduling navigation shell. */
@media(min-width:901px){.has-global-sidebar{padding-left:244px}.global-sidebar{width:244px}}
.global-sidebar{padding:12px 14px 18px;background:radial-gradient(circle at 90% 2%,#19477c 0,transparent 34%),linear-gradient(180deg,#0b2b58 0%,#071f43 72%,#0b315d 100%);border-right:1px solid #153d6c;box-shadow:10px 0 30px #0b2b5820;color:#edf6ff;scrollbar-width:thin;scrollbar-color:#325d8b transparent}
.global-sidebar-brand{height:56px;display:flex;flex-direction:row;align-items:center;gap:11px;margin:0 0 13px;color:#fff;text-decoration:none;border-radius:10px}
.global-sidebar-brand:hover{color:#fff}.global-sidebar-brand:focus-visible,.global-module-list a:focus-visible,.breadcrumb-bar a:focus-visible{outline:3px solid #69b0ff;outline-offset:2px}
.premium-brand-mark{width:46px;height:46px;border-radius:12px;background:linear-gradient(145deg,#ffd76c,#f0aa28);color:#2f1e00!important;display:grid;place-items:center;font-size:20px!important;font-weight:900;box-shadow:0 7px 16px #0004,0 0 0 1px #fff6 inset;flex:0 0 auto}
.global-sidebar-brand>span:last-child{display:flex;flex-direction:column}.global-sidebar-brand strong{font-size:16px;line-height:1.2}.global-sidebar-brand>span:last-child>span{color:#bad0ea;font-size:11px;margin-top:2px}
.global-sidebar-section{margin-bottom:13px}.global-sidebar-title{color:#8eb1da;font-size:.63rem;letter-spacing:.16em;margin:0 4px 7px}
.global-mode{gap:4px}.global-mode button{height:38px;padding:0 12px;border:1px solid #ffffff0b;background:#ffffff08;color:#eaf4ff;border-radius:9px;display:flex;align-items:center;gap:11px;font-size:.8rem}.global-mode button:hover{background:#ffffff14}.global-mode button.active{background:linear-gradient(135deg,#2786ff,#2b6be3);border-color:#5899ef;color:#fff;box-shadow:0 7px 17px #006cff45}
.global-module-list{gap:2px}.global-module-list a{min-height:34px;padding:0 8px;color:#e9f3ff;border:1px solid transparent;font-size:.72rem;border-radius:8px;display:grid;grid-template-columns:23px minmax(0,1fr) auto}.global-module-list a .sidebar-icon{color:#6cc7ff}.global-module-list a small{color:#86a9d0;font-size:.61rem}.global-module-list a:hover,.global-module-list a.active{background:#ffffff10;border-color:#3e77b2;color:#fff}.global-module-list a.active{background:linear-gradient(90deg,#1767c6,#1d5da659);box-shadow:inset 3px 0 0 #4aa0ff}
.module-checklist{display:grid;gap:5px}.checklist-item{color:#c5d9ef!important;font-size:.68rem!important}.checklist-item small{color:#82a5cd!important;font-size:.58rem!important}.checklist-dot{border-color:#89a9cd!important}.checklist-dot.done{background:#31d987!important;border-color:#31d987!important}
.global-sidebar-section.sidebar-compact-hide{display:none}.premium-sidebar-quote{margin-top:auto;border:1px solid #ffffff0b;border-radius:10px;padding:11px;color:#bbd0e9;font-size:.68rem;line-height:1.45;display:flex;gap:9px;align-items:center}.premium-sidebar-quote .sidebar-icon{color:#ffd45d}.premium-sidebar-quote svg{width:21px;height:21px}
.sidebar-collapse-btn{background:#102f58;border-color:#31577f;color:#bad0ea}.sidebar-collapse-btn:hover{color:#fff;border-color:#69a9e7}
.breadcrumb-bar a{border-radius:5px;padding:2px 4px}.breadcrumb-bar a:hover{text-decoration:underline;background:var(--blue-2)}
[data-theme="dark"] .global-sidebar{background:radial-gradient(circle at 90% 2%,#19477c 0,transparent 34%),linear-gradient(180deg,#0b2b58 0%,#071f43 72%,#0b315d 100%);border-right-color:#153d6c}
[data-theme="high-contrast"] .global-sidebar{background:#000!important;border-right:3px solid #fff!important;color:#fff}.has-global-sidebar[data-theme="high-contrast"]{background:#000}.global-sidebar a{pointer-events:auto}
@media(max-width:900px){.global-sidebar{padding:12px 14px 18px}.global-sidebar-brand{height:48px}.premium-brand-mark{width:40px;height:40px}}

/* ── Tie-Breaking Selector ── */
.tie-break-select { font-size: 0.78rem; padding: 5px 8px; }

/* ── Fragmentation Formula Tooltip ── */
.frag-formula-reveal {
  font-size: 0.72rem; color: var(--accent); cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted;
}
.frag-formula-box {
  margin-top: 6px; padding: 8px 10px; background: var(--blue-1);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 0.72rem; font-family: monospace; color: var(--muted);
  display: none;
}
.frag-formula-box.visible { display: block; }

/* ── Next Fit Rover Pointer ── */
.next-fit-rover {
  position: absolute; left: -2px; top: 0; bottom: 0;
  width: 3px; background: var(--disk-color); border-radius: 2px;
  transition: top 0.4s ease;
}
.next-fit-rover-label {
  position: absolute; left: 4px; font-size: 0.6rem; font-weight: 800;
  color: var(--disk-color); white-space: nowrap;
}

/* ── Working Set Window ── */
.working-set-window {
  display: flex; gap: 3px; padding: 6px 10px;
  background: var(--process-light); border: 1px solid var(--deadlock-light);
  border-radius: var(--radius-sm); flex-wrap: wrap;
}
.ws-token {
  padding: 2px 7px; border-radius: 10px; font-size: 0.72rem; font-weight: 700;
  background: var(--panel); border: 1px solid var(--line);
}
.ws-token.in-window {
  background: var(--process-light); border-color: var(--process-color);
  color: var(--process-color);
}
.ws-token.out-of-window { opacity: 0.5; }

/* ── Resource Request Panel (Deadlock) ── */
.resource-request-panel {
  background: var(--blue-1); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-4);
}
.request-result-safe   { color: var(--mem-color);  font-weight: 700; }
.request-result-unsafe { color: var(--accent-2);   font-weight: 700; }

/* Workspace tabs shared by every module: Learn · Visualize · Practice · Compare. */
.has-global-sidebar .viz-panel{padding-bottom:84px}
.viz-panel.has-ws-tabs>.ws-tabbar{order:-5}
.viz-panel.has-ws-tabs>.visualization-hero{order:-4;margin-top:0;top:0}
.viz-panel.has-ws-tabs>.ws-pane{display:none}
.viz-panel.has-ws-tabs>.ws-pane.active{display:flex;flex-direction:column;gap:14px}
.viz-panel.has-ws-tabs:not([data-ws-tab="visualize"])>:not(.ws-tabbar):not(.ws-pane.active){display:none!important}
.ws-tabbar{display:flex;gap:4px;padding:4px;margin-right:34px;background:var(--blue-1);border:1px solid var(--line);border-radius:12px;overflow-x:auto;scrollbar-width:none;flex-shrink:0}
.ws-tabbar::-webkit-scrollbar{display:none}
.ws-tab{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 14px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);font:700 .82rem/1 inherit;cursor:pointer;white-space:nowrap}
.ws-tab .sidebar-icon{width:18px;height:18px;flex-basis:18px;color:currentColor}
.ws-tab .sidebar-icon svg{width:16px;height:16px}
.ws-tab:hover{color:var(--accent);background:var(--panel)}
.ws-tab.active{background:var(--panel);color:var(--accent);border-color:var(--line);box-shadow:0 2px 8px #133a6414}
.ws-tab:focus-visible,.ws-subtab:focus-visible,.ws-log-tab:focus-visible,.ws-compare-row:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ws-pane{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 8px 24px #133a6410}
.ws-eyebrow{display:block;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ws-intro{margin:0;font-size:.86rem;line-height:1.55;color:var(--muted)}
.ws-method-callout{padding:12px 14px;border-left:4px solid var(--accent);border-radius:10px;background:var(--blue-1)}
.ws-method-name{display:block;color:var(--accent);font-size:.95rem}
.ws-method-rule,.ws-method-try{margin:5px 0 0;font-size:.85rem;line-height:1.5;color:var(--ink)}
.ws-lesson{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ws-subtabs{display:flex;gap:2px;padding:6px 6px 0;background:var(--blue-1);border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.ws-subtabs::-webkit-scrollbar{display:none}
.ws-subtab{padding:8px 12px;border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;background:transparent;color:var(--muted);font:700 .78rem/1.2 inherit;cursor:pointer;white-space:nowrap;margin-bottom:-1px}
.ws-subtab:hover{color:var(--accent)}
.ws-subtab.active{background:var(--panel);color:var(--accent);border-color:var(--line)}
.ws-subpanel{padding:16px 18px;min-height:110px}
.ws-subpanel-title{margin:0 0 6px;font-size:.95rem;color:var(--ink)}
.ws-subpanel p{margin:0;font-size:.9rem;line-height:1.65;color:var(--ink)}
.ws-lesson-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-top:1px solid var(--line);background:var(--blue-1)}
.ws-lesson-count{font-size:.75rem;font-weight:700;color:var(--muted)}
.ws-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}
.ws-prereq{margin-right:auto;font-size:.78rem;color:var(--muted)}
.ws-link{color:var(--accent);font-weight:700;font-size:.84rem}
.ws-question,.ws-walkthrough{padding:14px 16px;border:1px solid var(--line);border-radius:12px}
.ws-question-text{margin:0 0 10px;font-size:.95rem;font-weight:700;color:var(--ink)}
.ws-answer{margin:10px 0 0;padding:9px 12px;border-radius:9px;background:var(--mem-light,#e2f6ef);color:var(--ink);font-weight:700;font-size:.88rem}
.ws-walkthrough ol{margin:0;padding-left:20px;display:grid;gap:7px}
.ws-walkthrough li{font-size:.86rem;line-height:1.55;color:var(--ink)}
.ws-compare-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ws-compare-row{display:flex;flex-direction:column;gap:5px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--ink);cursor:pointer;font:inherit}
.ws-compare-row:hover{border-color:var(--accent)}
.ws-compare-row strong{color:var(--accent);font-size:.88rem}
.ws-compare-row span{font-size:.8rem;line-height:1.5}
.ws-compare-row small{font-size:.74rem;line-height:1.45;color:var(--muted)}
.ws-compare-row.active{border-color:var(--accent);background:var(--blue-1);box-shadow:inset 3px 0 0 var(--accent)}
.ws-log-tabs{display:flex;gap:4px;margin-bottom:calc(-1 * var(--space-4) + 2px);padding-left:10px;flex-shrink:0}
.ws-log-tab{padding:7px 14px;border:1px solid var(--line);border-bottom:0;border-radius:9px 9px 0 0;background:var(--blue-1);color:var(--muted);font:700 .74rem/1 inherit;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.ws-log-tab.active{background:var(--panel);color:var(--accent)}
.viz-panel>.ws-log-card.ws-log-hidden{display:none!important}
.viz-panel>.ws-log-card>.section-title{display:none}
.algo-option[role=button]:focus-visible,.algo-tab[role=button]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(max-width:700px){.ws-pane{padding:14px}.ws-tab{padding:0 10px}.ws-actions{justify-content:stretch}.ws-actions .btn{flex:1}}
@media print{.ws-tabbar,.ws-log-tabs{display:none!important}.viz-panel>.ws-log-card.ws-log-hidden{display:block!important}}