/* === ANTI MANAGER Design System — Sajid methodology === */
/* 4-color HSL formula, 8px grid, glassmorphism, class-based dark theme */

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* --- Design Tokens (Light) --- */
:root {
  /* 4-Color Formula */
  --color-primary-h: 220;
  --color-brand-h: 25;

  --color-primary:   hsl(var(--color-primary-h), 15%, 95%);
  --color-secondary: hsl(var(--color-primary-h), 15%, 10%);
  --color-tertiary:  hsl(var(--color-brand-h), 80%, 45%);
  --color-accent:    hsl(340, 70%, 50%);

  --color-bg:             var(--color-primary);
  --color-bg-secondary:   hsl(var(--color-primary-h), 15%, 98%);
  --color-bg-tertiary:    hsl(var(--color-primary-h), 15%, 88%);
  --color-text:           var(--color-secondary);
  --color-text-secondary: hsl(var(--color-primary-h), 10%, 40%);
  --color-text-tertiary:  hsl(var(--color-primary-h), 8%, 55%);
  --color-border:         hsl(var(--color-primary-h), 10%, 82%);
  --color-border-light:   hsl(var(--color-primary-h), 10%, 90%);
  --color-border-dark:    hsl(var(--color-primary-h), 10%, 68%);
  --color-text-on-primary: hsl(var(--color-primary-h), 15%, 98%);

  /* Semantic */
  --color-success: hsl(145, 65%, 40%);
  --color-warning: hsl(40, 90%, 50%);
  --color-error:   hsl(0, 75%, 50%);
  --color-info:    hsl(200, 85%, 50%);

  /* 5-ray sector colors (for map) */
  --ray-strategy:    hsl(210, 60%, 45%);
  --ray-processes:   hsl(25,  80%, 45%);
  --ray-information: hsl(180, 50%, 40%);
  --ray-people:      hsl(340, 60%, 45%);
  --ray-adaptation:  hsl(80,  50%, 35%);

  /* Typography — fluid scale */
  --font-sans:    'Inter', system-ui, sans-serif;
  --font-heading: 'Manrope', 'Inter', sans-serif;
  --text-xs:  0.75rem;   --text-sm:  0.875rem;
  --text-base: 1rem;     --text-lg:  1.125rem;
  --text-xl:  1.25rem;   --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;  --text-4xl: 2.25rem;
  --text-5xl: 3rem;      --text-6xl: 3.75rem;

  /* Typography — fluid via clamp */
  --text-hero: clamp(2rem, 5vw + 1rem, 4rem);
  --text-h1:   clamp(1.75rem, 3vw + 0.75rem, 2.5rem);
  --text-h2:   clamp(1.375rem, 2vw + 0.5rem, 2rem);
  --text-h3:   clamp(1.125rem, 1.5vw + 0.25rem, 1.5rem);
  --text-body: clamp(0.9375rem, 1vw + 0.5rem, 1.125rem);

  /* 8px Grid Spacing */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px;

  /* Layout */
  --header-height: 52px;
  --sidebar-width: 280px;
  --container-max: 1280px;
  --content-max: 720px;

  /* Layers & Depth */
  --layer-bg:          hsl(var(--color-primary-h), 15%, 96%);
  --layer-surface:     hsl(var(--color-primary-h), 15%, 100%);
  --layer-interactive: hsl(var(--color-primary-h), 15%, 93%);
  --layer-highlight:   hsl(var(--color-primary-h), 15%, 98%);

  --shadow-sm:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg:
    0 8px 24px rgba(0,0,0,0.12);
  --shadow-active:
    inset 0 2px 4px rgba(0,0,0,0.1),
    0 1px 2px rgba(0,0,0,0.06);

  /* Glassmorphism */
  --glass-bg:       hsla(220, 15%, 100%, 0.7);
  --glass-border:   hsla(220, 10%, 90%, 0.5);
  --glass-blur:     blur(12px);

  /* Animation */
  --transition-fast: 150ms;
  --transition-base: 250ms;
  --transition-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Borders */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 9999px;
}

/* --- Dark Theme --- */
.dark {
  --color-primary:   hsl(var(--color-primary-h), 15%, 10%);
  --color-secondary: hsl(var(--color-primary-h), 15%, 92%);
  --color-tertiary:  hsl(var(--color-brand-h), 80%, 55%);
  --color-accent:    hsl(340, 70%, 65%);

  --color-bg:             var(--color-primary);
  --color-bg-secondary:   hsl(var(--color-primary-h), 15%, 14%);
  --color-bg-tertiary:    hsl(var(--color-primary-h), 15%, 20%);
  --color-text:           var(--color-secondary);
  --color-text-secondary: hsl(var(--color-primary-h), 10%, 60%);
  --color-text-tertiary:  hsl(var(--color-primary-h), 8%, 45%);
  --color-border:         hsl(var(--color-primary-h), 10%, 25%);
  --color-border-light:   hsl(var(--color-primary-h), 10%, 18%);
  --color-border-dark:    hsl(var(--color-primary-h), 10%, 35%);
  --color-text-on-primary: hsl(var(--color-primary-h), 15%, 10%);

  --layer-bg:          hsl(var(--color-primary-h), 15%, 10%);
  --layer-surface:     hsl(var(--color-primary-h), 15%, 16%);
  --layer-interactive: hsl(var(--color-primary-h), 15%, 22%);
  --layer-highlight:   hsl(var(--color-primary-h), 15%, 20%);

  --glass-bg:       hsla(220, 15%, 10%, 0.8);
  --glass-border:   hsla(220, 10%, 25%, 0.5);

  --shadow-sm:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:
    0 8px 24px rgba(0,0,0,0.5);
  --shadow-active:
    inset 0 2px 4px rgba(0,0,0,0.3),
    0 1px 2px rgba(0,0,0,0.2);
}

/* --- Theme Init (no-flash: set by inline script in <head>) --- */
/* See: inline script in base.html */

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--color-text); }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); margin-bottom: var(--space-4); }
h3 { font-size: var(--text-h3); margin-bottom: var(--space-2); }
p  { font-size: var(--text-body); color: var(--color-text-secondary); margin-bottom: var(--space-4); }
a  { color: var(--color-tertiary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-accent); }
small, .text-sm { font-size: var(--text-sm); }
.text-muted { color: var(--color-text-tertiary); }
.text-balance { text-wrap: balance; }

/* --- Layout: App Shell (used on map-heavy pages) --- */
.app-shell {
  display: grid;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
  height: 100vh;
  overflow: hidden;
  background: var(--layer-bg);
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 0 1fr;
}

/* --- Header --- */
.site-header {
  grid-area: header;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  height: var(--header-height);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
}
.header-left  { display: flex; align-items: center; gap: var(--space-3); }
.header-right { display: flex; align-items: center; gap: var(--space-3); }

.logo {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.02em;
  text-decoration: none;
  display: flex; align-items: center; gap: var(--space-2);
}
.logo span { color: var(--color-tertiary); }
.logo svg { width: 28px; height: 28px; }

/* --- Sidebar --- */
.sidebar {
  grid-area: sidebar;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--glass-border);
  padding: var(--space-4);
  transition: width var(--transition-base) var(--ease-out),
              padding var(--transition-base) var(--ease-out),
              opacity var(--transition-fast) var(--ease-out);
  -webkit-backdrop-filter: var(--glass-blur);
  scrollbar-width: thin;
}
.app-shell.sidebar-collapsed .sidebar {
  width: 0; min-width: 0; padding: 0; opacity: 0; overflow: hidden;
}
.sidebar-section {
  margin-bottom: var(--space-6);
}
.sidebar-title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-3);
}
.sidebar-nav { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
.sidebar-link {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.sidebar-link:hover { background: var(--layer-interactive); color: var(--color-text); }
.sidebar-link.active { background: var(--color-tertiary); color: white !important; }
.sidebar-link .ray-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* --- Main Content Area --- */
.main {
  grid-area: main;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.main-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

/* --- Content (reading-oriented pages) --- */
.content-page .main-inner {
  max-width: var(--content-max);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast) var(--ease-out);
  text-decoration: none;
  border: 2px solid transparent;
  line-height: 1.4;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--color-tertiary);
  color: white;
  border-color: var(--color-tertiary);
}
.btn-primary:hover { background: hsl(var(--color-brand-h), 80%, 38%); border-color: hsl(var(--color-brand-h), 80%, 38%); color: white; }
.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-outline:hover { border-color: var(--color-tertiary); color: var(--color-tertiary); background: var(--layer-interactive); }
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--layer-interactive); color: var(--color-text); }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--radius-sm); }
.btn-icon svg { width: 18px; height: 18px; }

/* --- Theme Toggle --- */
.theme-toggle { cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--color-text-secondary); transition: all var(--transition-fast); }
.theme-toggle:hover { background: var(--layer-interactive); color: var(--color-text); }

/* --- Cards --- */
.card {
  background: var(--layer-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base) var(--ease-out);
  cursor: pointer;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-tertiary);
}
.card-number {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-tertiary);
  opacity: 0.5;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-5);
  margin: var(--space-6) 0;
}

/* --- Badge / Tag --- */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  gap: var(--space-1);
  white-space: nowrap;
}
.badge-gray   { background: var(--layer-interactive); color: var(--color-text-secondary); }
.badge-orange { background: hsl(var(--color-brand-h), 50%, 90%); color: hsl(var(--color-brand-h), 80%, 30%); }
.dark .badge-orange { background: hsl(var(--color-brand-h), 30%, 20%); color: hsl(var(--color-brand-h), 60%, 70%); }
.badge-green  { background: hsl(145, 30%, 90%); color: hsl(145, 60%, 25%); }
.badge-red    { background: hsl(0, 30%, 90%); color: hsl(0, 60%, 35%); }
.badge-blue   { background: hsl(210, 30%, 90%); color: hsl(210, 60%, 30%); }

/* --- Ray-specific badges --- */
.badge-ray-strategy    { background: hsl(210, 40%, 90%); color: hsl(210, 60%, 30%); }
.badge-ray-processes   { background: hsl(25, 40%, 90%); color: hsl(25, 60%, 30%); }
.badge-ray-information { background: hsl(180, 30%, 88%); color: hsl(180, 50%, 25%); }
.badge-ray-people      { background: hsl(340, 30%, 90%); color: hsl(340, 50%, 30%); }
.badge-ray-adaptation  { background: hsl(80, 30%, 88%); color: hsl(80, 50%, 25%); }
.dark .badge-ray-strategy    { background: hsl(210, 30%, 20%); color: hsl(210, 50%, 70%); }
.dark .badge-ray-processes   { background: hsl(25, 30%, 20%); color: hsl(25, 50%, 70%); }
.dark .badge-ray-information { background: hsl(180, 20%, 18%); color: hsl(180, 40%, 65%); }
.dark .badge-ray-people      { background: hsl(340, 20%, 20%); color: hsl(340, 40%, 70%); }
.dark .badge-ray-adaptation  { background: hsl(80, 20%, 18%); color: hsl(80, 40%, 65%); }

/* --- Hero Section (not a full-page hero, just chapter hero) --- */
.chapter-hero {
  padding: var(--space-12) 0 var(--space-8);
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-8);
}
.chapter-hero h1 { font-size: var(--text-hero); margin-bottom: var(--space-3); }
.chapter-hero .subtitle { font-size: var(--text-lg); color: var(--color-text-secondary); max-width: 600px; text-wrap: balance; }
.chapter-hero .ray-label { margin-bottom: var(--space-3); }

/* --- Hero (full-page dark, for landing) --- */
.hero-full {
  background: linear-gradient(135deg, hsl(210, 30%, 15%), hsl(210, 40%, 10%));
  color: white;
  padding: var(--space-16) 0;
  text-align: center;
}
.hero-full h1 { color: white; }
.hero-full p  { color: hsla(220, 15%, 80%, 0.9); }

/* --- Filters --- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  align-items: center;
}
.filter-btn {
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.filter-btn:hover { border-color: var(--color-tertiary); color: var(--color-tertiary); }
.filter-btn.active { background: var(--color-tertiary); color: white; border-color: var(--color-tertiary); }

/* --- Map Container --- */
.map-container {
  background: var(--layer-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  padding: var(--space-6);
  margin: var(--space-6) 0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.map-container svg { max-width: 100%; height: auto; }

/* --- Context Layer Switches --- */
.layer-switches {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.layer-switch {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.layer-switch:hover { background: var(--layer-interactive); }
.layer-switch.active { background: var(--color-tertiary); color: white; }
.layer-switch .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.layer-switch .dot.strategy    { background: var(--ray-strategy); }
.layer-switch .dot.processes   { background: var(--ray-processes); }
.layer-switch .dot.information { background: var(--ray-information); }
.layer-switch .dot.people      { background: var(--ray-people); }
.layer-switch .dot.adaptation  { background: var(--ray-adaptation); }

/* --- Chapter Grid (inside map view) --- */
.ray-chapters {
  margin: var(--space-6) 0;
}
.ray-header {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid;
}
.ray-header h2 { margin-bottom: 0; }
.ray-header .ray-color { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

.chapter-card {
  background: var(--layer-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base) var(--ease-out);
  cursor: pointer;
}
.chapter-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-tertiary);
}
.chapter-card h4 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.chapter-card p  { font-size: var(--text-sm); color: var(--color-text-tertiary); margin-bottom: var(--space-2); }
.chapter-card .meta { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* --- Interactive Widgets --- */
.widget {
  background: var(--layer-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  padding: var(--space-6);
  margin: var(--space-8) 0;
  box-shadow: var(--shadow-sm);
}
.widget-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
}
.form-group { margin-bottom: var(--space-4); }
.form-group label { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-1); color: var(--color-text); }
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  background: var(--layer-interactive);
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none;
  border-color: var(--color-tertiary);
  box-shadow: 0 0 0 3px hsl(var(--color-brand-h), 50%, 90%);
}

/* --- Progress Bar --- */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--layer-interactive);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: var(--space-4) 0;
}
.progress-fill {
  height: 100%;
  background: var(--color-tertiary);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow) var(--ease-out);
}

/* --- Modal --- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
}
.modal.open { display: flex; }
.modal-content {
  background: var(--layer-surface);
  max-width: 640px;
  width: 100%;
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-close {
  position: absolute;
  top: var(--space-4); right: var(--space-4);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  font-size: var(--text-xl);
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.modal-close:hover { background: var(--layer-interactive); color: var(--color-text); }

/* --- Accordion --- */
.accordion-item {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.accordion-header {
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background var(--transition-fast);
  font-size: var(--text-sm);
}
.accordion-header:hover { background: var(--layer-interactive); }
.accordion-body {
  padding: 0 var(--space-4) var(--space-4);
  display: none;
  border-top: 1px solid var(--color-border-light);
}
.accordion-item.active .accordion-body { display: block; }
.accordion-sign { font-size: var(--text-lg); transition: transform var(--transition-fast); }
.accordion-item.active .accordion-sign { transform: rotate(45deg); }

/* --- Table --- */
.table-wrap { overflow-x: auto; margin: var(--space-4) 0; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
th, td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
}
th { font-weight: 700; color: var(--color-text); background: var(--layer-interactive); }
tr:hover td { background: var(--layer-highlight); }

/* --- Example Block --- */
.example-block {
  background: var(--layer-interactive);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0;
  border-left: 3px solid var(--color-tertiary);
  font-size: var(--text-sm);
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-border-dark); }

/* --- Scroll to Top --- */
.scroll-top {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  pointer-events: none;
  color: var(--color-text-secondary);
}
.scroll-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--color-border-light);
  padding: var(--space-8) 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}
.site-footer a { color: var(--color-text-secondary); }

/* --- NotFound / Empty State --- */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-4);
  color: var(--color-text-tertiary);
}
.empty-state svg { width: 64px; height: 64px; margin-bottom: var(--space-4); opacity: 0.4; }
.empty-state h3 { color: var(--color-text-secondary); margin-bottom: var(--space-2); }

/* --- Animations (transform + opacity only) --- */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- Ray flow animations (system map) --- */
@keyframes rayFlow {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -40; }
}
@keyframes rayParticle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  30%      { opacity: 0.9; transform: scale(1); }
  70%      { opacity: 0.9; transform: scale(1); }
}
.ray-flow {
  stroke-dasharray: 6 20;
  animation: rayFlow 2.5s linear infinite;
  will-change: stroke-dashoffset;
}
.ray-particle {
  animation: rayParticle 3s ease-in-out infinite;
  will-change: opacity, transform;
}
.dark .ray-particle { opacity: 0.7; }

.animate-in  { animation: fade-in-up 0.5s var(--ease-out) forwards; }
.animate-fade { animation: fade-in 0.3s var(--ease-out) forwards; }
.animate-scale { animation: scale-in 0.3s var(--ease-out) forwards; }

/* --- Mobile: collapse sidebar --- */
@media (max-width: 768px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform var(--transition-base) var(--ease-out);
    z-index: 90;
    backdrop-filter: var(--glass-blur);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 80;
  }
  .sidebar.open + .sidebar-backdrop { display: block; }
  .app-shell.sidebar-collapsed .sidebar { width: 280px; padding: var(--space-4); opacity: 1; }
  .main-inner { padding: var(--space-4); }
  h1 { font-size: var(--text-3xl); }
  .card-grid { grid-template-columns: 1fr; }
  .hero-full { padding: var(--space-10) 0; }
}

/* --- Print --- */
@media print {
  .site-header, .sidebar, .site-footer, .btn, .widget, .modal, .scroll-top { display: none !important; }
  .app-shell { display: block; height: auto; overflow: visible; }
  .main { overflow: visible; }
  body { background: white; color: black; font-size: 12pt; }
}