/* ═══════════════════════════════════════════════════════════════════════════
   THE CEO CRM — Design System (LMS-matched)
   Clean, light, Skool-inspired · Inter throughout
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ─── Design Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --void:       #f5f6fa;
  --deep:       #f5f6fa;
  --surface:    #ffffff;
  --raised:         #f2f3f7;
  --surface-raised: #f2f3f7;   /* alias for --raised — used in inline styles */
  --card:           #ffffff;
  --card-hover: #e8e9f0;

  /* Borders — visible, not invisible */
  --border:       rgba(20,22,31,0.08);
  --border-hi:    rgba(20,22,31,0.14);
  --border-focus: rgba(79,107,251,0.55);

  /* Brand / Accent — single indigo accent (matches LMS) */
  --signal:      #4f6bfb;
  --signal-dim:  rgba(79,107,251,0.10);
  --signal-glow: rgba(79,107,251,0.22);

  --accent:      #4f6bfb;
  --accent-2:    #3d56e0;
  --accent-dark: #2f42b8;
  --accent-gradient: linear-gradient(135deg, #5b7bfd 0%, #3d56e0 100%);
  --accent-dim:  rgba(79,107,251,0.10);
  --accent-glow: rgba(79,107,251,0.22);

  /* Semantic */
  --fire:       #dc2626;
  --fire-dim:   rgba(220,38,38,0.10);
  --growth:     #16a34a;
  --growth-dim: rgba(22,163,74,0.12);
  --info:       #3b82f6;
  --info-dim:   rgba(59,130,246,0.12);
  --gold:       #b45309;
  --gold-dim:   rgba(234,179,8,0.14);

  /* Text — real contrast ratios */
  --ink:       #14161f;
  --ink-dim:   #5b6072;
  --ink-ghost: #8b8fa3;

  /* Text color to use ON TOP of --signal/--accent/--accent-gradient — flips
     per theme since a light accent (gold) needs dark text, a dark accent
     (indigo/red) needs light text. Never hardcode #fff on an accent bg. */
  --on-accent: #ffffff;

  /* Shadows */
  --shadow-sm:    0 1px 2px rgba(20,22,31,0.06);
  --shadow-card:  0 8px 22px rgba(20,22,31,0.08);
  --shadow-modal: 0 20px 46px rgba(20,22,31,0.14);
  --shadow-glow:  0 0 0 1px rgba(79,107,251,0.18), 0 8px 20px rgba(79,107,251,0.14);

  /* Radii */
  --r-xs: 8px;  --r-sm: 8px;  --r-md: 14px;
  --r-lg: 14px; --r-xl: 18px; --r-2xl: 18px;

  /* Transitions */
  --t-fast: 0.15s ease;
  --t-med:  0.2s ease;
  --t-slow: 0.3s ease;

  /* Layout */
  --sidebar-w: 244px;
  --topbar-h:  56px;

  /* Fonts */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── Obsidian — the dark theme (opt-in via the theme toggle) ───────────────
   Neutral near-black surfaces with a single confident indigo-violet accent —
   the same design language behind Linear, Stripe's dashboard, and other
   products widely regarded as having the best dark-mode UI in software.
   Restrained, high-contrast, timeless rather than trend-chasing. ─────────── */
:root[data-theme="dark"] {
  --void: #08080b;
  --deep: #08080b;
  --surface: #121218;
  --raised: #1a1a22;
  --surface-raised: #1a1a22;
  --card: #16161d;
  --card-hover: #202029;

  --border: rgba(255,255,255,0.08);
  --border-hi: rgba(255,255,255,0.14);
  --border-focus: rgba(108,92,231,0.55);

  --signal: #6c5ce7;
  --signal-dim: rgba(108,92,231,0.16);
  --signal-glow: rgba(108,92,231,0.3);

  --accent: #6c5ce7;
  --accent-2: #8b7ff5;
  --accent-dark: #4c3fc9;
  --accent-gradient: linear-gradient(135deg, #8b7ff5 0%, #6c5ce7 100%);
  --accent-dim: rgba(108,92,231,0.16);
  --accent-glow: rgba(108,92,231,0.3);

  /* Semantic colors — crisp, rich tones that read clearly against the
     neutral-violet base instead of muddying into it. */
  --fire: #f2495c;
  --fire-dim: rgba(242,73,92,0.16);
  --growth: #3ecf8e;
  --growth-dim: rgba(62,207,142,0.16);
  --info: #4fa3f7;
  --info-dim: rgba(79,163,247,0.16);
  --gold: #e0a72e;
  --gold-dim: rgba(224,167,46,0.16);

  --ink: #f2f2f7;
  --ink-dim: #a8a8b8;
  --ink-ghost: #6b6b7c;

  /* Violet is saturated/dark enough that white text still reads cleanly. */
  --on-accent: #ffffff;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-card: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-modal: 0 20px 48px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 0 1px rgba(108,92,231,0.25), 0 8px 24px rgba(108,92,231,0.22);
}
:root[data-theme="dark"] .auth-page,
:root[data-theme="dark"] .landing {
  background: radial-gradient(circle at 20% 20%, rgba(108,92,231,0.12), transparent 40%), var(--void);
}
/* A few shadow/glow accents are hardcoded to the light theme's blue tint above —
   re-tint them to violet so buttons/highlights glow on-brand in the dark theme. */
:root[data-theme="dark"] .logo-mark,
:root[data-theme="dark"] .auth-logo .logo-mark { box-shadow: 0 0 20px rgba(108,92,231,0.4); }
:root[data-theme="dark"] .sidebar-nav a.active { border-color: rgba(108,92,231,0.3); }
:root[data-theme="dark"] .btn-primary { box-shadow: 0 4px 12px rgba(108,92,231,0.35); }
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .btn-gold:hover { box-shadow: 0 6px 18px rgba(108,92,231,0.48); }
:root[data-theme="dark"] .pricing-card.featured { box-shadow: 0 0 32px rgba(108,92,231,0.22); }
:root[data-theme="dark"] .la-type-btn--call { border-color: rgba(108,92,231,.5); background: rgba(108,92,231,.1); color: #6c5ce7; }

/* ─── Theme toggle ────────────────────────────────────────────────────────
   Floating version (#themeToggleBtn, from head.php) is the fallback for
   pages with no topbar (admin, standalone auth pages). Pages that render a
   real topbar (app/employee via topbar.php, portal via topbar-portal.php)
   get a small inline icon there instead (#themeToggleBtnBar) and hide the
   floating one to avoid showing both. */
.theme-toggle-btn {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9400;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--accent-gradient);
  border: 2px solid #fff;
  box-shadow: 0 8px 22px rgba(79,107,251,0.45);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 21px;
  line-height: 1;
  transition: box-shadow .15s ease, transform .15s ease, background-color .2s ease, border-color .2s ease;
}
body:has(#themeToggleBtnBar) #themeToggleBtn { display: none; }
.theme-toggle-btn:hover { box-shadow: 0 10px 28px rgba(79,107,251,0.55); transform: translateY(-2px) scale(1.04); }
.theme-toggle-btn:active { transform: scale(0.96); }
.theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: inline; }
:root[data-theme="dark"] .theme-toggle-btn { border-color: var(--deep); box-shadow: 0 8px 22px rgba(108,92,231,0.5); }
:root[data-theme="dark"] .theme-toggle-btn:hover { box-shadow: 0 10px 28px rgba(108,92,231,0.6); }
/* Inline topbar variant — sizing/chrome comes from .notif-btn; just needs
   the emoji glyphs to size sensibly inside a 34px icon button. */
#themeToggleBtnBar, #tcBubble { font-size: 14px; }

/* ─── Accessibility ──────────────────────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ─── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
  background: var(--deep);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent-2); }
button { cursor: pointer; font-family: inherit; }
img { max-width: 100%; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink); line-height: 1.2;
}
::selection { background: var(--accent); color: var(--on-accent); }
code { background: var(--card-hover); color: var(--gold); padding: 2px 7px; border-radius: 6px; font-size: 0.92em; }
input, select, textarea { font-family: inherit; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-ghost); }

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

/* ─── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed; left: 0; top: 0;
  width: var(--sidebar-w); height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  z-index: 100;
  overflow-y: hidden; overflow-x: hidden;
  transition: transform var(--t-med);
}
/* The regular nav groups (Overview…Admin) now scroll in their own region so
   the Pinned dock below stays genuinely fixed at the bottom of the panel
   instead of just being "last in the list" — matches the VS Code/Slack-style
   dock the user asked for rather than a section you have to scroll to. */
.sidebar-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 16px 16px;
  border-bottom: 1px solid var(--border);
  text-decoration: none; flex-shrink: 0;
}
.sidebar-logo:hover { background: transparent; }
.logo-mark {
  width: 34px; height: 34px;
  background: var(--signal);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; color: var(--on-accent);
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(79,107,251,0.3);
}
.logo-text {
  font-family: var(--font-display);
  font-size: 14px; color: var(--ink); line-height: 1.25;
}
.logo-text small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; color: var(--ink-ghost);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1px;
}

/* Sidebar nav */
.sidebar-section { padding: 16px 10px 6px; }
.sidebar-section-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-ghost);
  padding: 0 6px; margin-bottom: 4px;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--ink-ghost); font-size: 13px; font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  text-decoration: none; border: 1px solid transparent;
  position: relative;
}
.sidebar-nav a:hover {
  background: var(--raised); color: var(--ink-dim);
  border-color: var(--border);
}
.sidebar-nav a.active {
  background: var(--accent-dim); color: var(--accent);
  border-color: rgba(79,107,251,0.2);
}
.sidebar-nav a.active::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; background: var(--accent); border-radius: 1px;
}
.sidebar-nav a svg { flex-shrink: 0; opacity: 0.5; transition: opacity var(--t-fast); }
.sidebar-nav a:hover svg { opacity: 0.7; }
.sidebar-nav a.active svg { opacity: 1; }
.sb-badge {
  margin-left: auto;
  padding: 1px 7px; border-radius: 20px;
  background: var(--fire); color: #fff;
  font-size: 10px; font-weight: 700;
}

.sidebar-footer {
  margin-top: auto; padding: 10px;
  border-top: 1px solid var(--border); flex-shrink: 0;
}
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-md);
  transition: background var(--t-fast);
  cursor: pointer; text-decoration: none;
  border: 1px solid transparent;
}
.sidebar-user:hover { background: var(--raised); border-color: var(--border); }
.sidebar-user .su-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.sidebar-user .su-role { font-size: 10.5px; color: var(--ink-ghost); margin-top: 1px; }

.sb-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.65); z-index: 99;
  backdrop-filter: blur(2px);
}
.sb-overlay.open { display: block; }

/* ─── Sidebar collapse ────────────────────────────────────────────────────── */
.sb-hd { display:flex; align-items:center; border-bottom:1px solid var(--border); flex-shrink:0; }
.sb-hd .sidebar-logo { flex:1; border-bottom:none; min-width:0; }
.sb-hd .sb-toggle-btn { margin-right:10px; flex-shrink:0; }
.sb-toggle-btn {
  width:28px; height:28px;
  background:var(--raised); border:1px solid var(--border);
  border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-ghost); cursor:pointer; flex-shrink:0;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast); outline:none;
}
.sb-toggle-btn:hover { background:var(--card); color:var(--ink); border-color:var(--border-hi); }
.sb-toggle-btn svg { transition:transform var(--t-med); }
.sb-lbl { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* Smooth collapse transitions */
.sidebar      { transition: transform var(--t-med), width var(--t-med); }
.topbar       { transition: left var(--t-med); }
.page-content { transition: margin-left var(--t-med); }

:root { --sidebar-w-col: 62px; }

@media (min-width: 769px) {
  html.sb-collapsed .sidebar      { width:var(--sidebar-w-col); overflow-x:hidden; overflow-y:auto; }
  html.sb-collapsed .page-content { margin-left:var(--sidebar-w-col); }
  html.sb-collapsed .topbar       { left:var(--sidebar-w-col); }

  /* Header: stack logo + button */
  html.sb-collapsed .sb-hd                { flex-direction:column; padding:10px 0 8px; gap:6px; align-items:center; }
  html.sb-collapsed .sb-hd .sidebar-logo  { padding:0; justify-content:center; flex:none; }
  html.sb-collapsed .sb-hd .sb-toggle-btn { margin-right:0; }
  html.sb-collapsed .sb-toggle-btn svg    { transform:rotate(180deg); }
  html.sb-collapsed .logo-text            { display:none; }

  /* Nav sections */
  html.sb-collapsed .sidebar-section       { padding:6px 0 4px; }
  html.sb-collapsed .sidebar-section-label { display:none; }

  /* Nav links: center icon, hide text via .sb-lbl */
  html.sb-collapsed .sidebar-nav a          { justify-content:center; padding:9px 0; gap:0; }
  html.sb-collapsed .sidebar-nav a .sb-lbl  { display:none; }
  html.sb-collapsed .sidebar-nav a::before  { display:none !important; }
  html.sb-collapsed .sidebar-nav a.active   { border-left:3px solid var(--accent); border-radius:0 var(--r-sm) var(--r-sm) 0; }
  html.sb-collapsed .sb-badge               { display:none; }

  /* Footer */
  html.sb-collapsed .sidebar-footer { padding:8px 6px; }
  html.sb-collapsed .sidebar-user   { justify-content:center; padding:9px 0; gap:0; }
  html.sb-collapsed .su-texts       { display:none; }
  html.sb-collapsed .sb-logout-btn  { display:none; }
}

/* ─── Topbar ──────────────────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0;
  left: var(--sidebar-w); right: 0;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; z-index: 99;
  gap: 12px;
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-title {
  font-size: 13.5px; font-weight: 600; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Hamburger */
.hamburger {
  display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--raised); border: 1px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer; color: var(--ink-dim);
  transition: all var(--t-fast);
}
.hamburger:hover { background: var(--card); color: var(--ink); }

/* Notification button */
.notif-btn {
  position: relative;
  width: 34px; height: 34px;
  background: var(--raised); border: 1px solid var(--border); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-ghost); transition: all var(--t-fast); cursor: pointer;
}
.notif-btn:hover { background: var(--card); color: var(--ink); border-color: var(--border-hi); }
.notif-badge {
  position: absolute; top: -5px; right: -5px;
  background: var(--fire); color: #fff;
  font-size: 9.5px; font-weight: 800; min-width: 16px; height: 16px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  padding: 0 3px; border: 2px solid var(--surface);
}

/* ─── Page Content ────────────────────────────────────────────────────────── */
.page-content {
  margin-left: var(--sidebar-w);
  padding-top: var(--topbar-h);
  min-height: 100vh;
  background: var(--deep);
}
.page-body { padding: 28px 28px 48px; }
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 28px; gap: 16px;
}
.page-header-left h1 { font-size: 26px; }
.page-header-left p { color: var(--ink-dim); font-size: 13px; margin-top: 4px; line-height: 1.5; }

/* ─── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.card:hover { border-color: var(--border-hi); }
.card-title    { font-family: var(--font-display); font-size: 16px; color: var(--ink); margin-bottom: 4px; }
.card-subtitle { font-size: 12px; color: var(--ink-ghost); margin-bottom: 18px; }

/* ─── Stat Cards ──────────────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin-bottom: 28px;
}
.stat-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px;
  position: relative; overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.stat-card:hover { border-color: var(--border-hi); box-shadow: var(--shadow-card); }
.stat-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px; background: transparent;
  transition: background var(--t-fast);
}
.stat-card:hover::after { background: var(--signal); opacity: 0.4; }
.stat-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-ghost); margin-bottom: 10px;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 34px; color: var(--ink); line-height: 1; margin-bottom: 6px;
}
.stat-sub { font-size: 12px; color: var(--ink-dim); }
.stat-signal .stat-value { color: var(--signal); }
.stat-growth .stat-value { color: var(--growth); }
.stat-fire   .stat-value { color: var(--fire); }
.stat-accent .stat-value { color: var(--accent); }
.text-signal { color: var(--signal); }
.text-growth { color: var(--growth); }
.text-fire   { color: var(--fire); }
.text-accent { color: var(--accent); }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 600; font-family: inherit;
  border: 1px solid transparent;
  transition: all var(--t-fast);
  white-space: nowrap; text-decoration: none; cursor: pointer;
  line-height: 1;
}
.btn:hover { text-decoration: none; }
.btn svg { flex-shrink: 0; }

.btn-primary {
  background: var(--accent-gradient); color: var(--on-accent);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(79,107,251,0.28);
}
.btn-primary:hover {
  color: var(--on-accent);
  box-shadow: 0 6px 18px rgba(79,107,251,0.38);
}

.btn-gold {
  background: var(--accent-gradient); color: var(--on-accent);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(79,107,251,0.28);
}
.btn-gold:hover {
  color: var(--on-accent);
  box-shadow: 0 6px 18px rgba(79,107,251,0.38);
}

.btn-ghost {
  background: var(--raised); color: var(--ink-dim);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--card); color: var(--ink); border-color: var(--border-hi); }

.btn-danger  { background: var(--fire-dim);   color: var(--fire);   border-color: rgba(244,63,94,0.25); }
.btn-danger:hover  { background: var(--fire);   color: #fff; border-color: var(--fire); }

.btn-success { background: var(--growth-dim); color: var(--growth); border-color: rgba(16,185,129,0.25); }
.btn-success:hover { background: var(--growth); color: #fff; border-color: var(--growth); }

.btn-sm { padding: 6px 13px; font-size: 12px; border-radius: var(--r-sm); gap: 5px; }
.btn-lg { padding: 13px 28px; font-size: 15px; border-radius: var(--r-lg); }
.btn-icon { padding: 7px; width: 34px; height: 34px; border-radius: var(--r-sm); justify-content: center; }
.btn-icon-sm { padding: 5px; width: 28px; height: 28px; }

/* ─── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
}
.badge-signal  { background: var(--signal-dim);  color: var(--signal);  border: 1px solid rgba(79,107,251,0.2);  }
.badge-fire    { background: var(--fire-dim);    color: var(--fire);    border: 1px solid rgba(244,63,94,0.2);   }
.badge-growth  { background: var(--growth-dim);  color: var(--growth);  border: 1px solid rgba(16,185,129,0.2);  }
.badge-info    { background: var(--info-dim);    color: var(--info);    border: 1px solid rgba(59,130,246,0.2);  }
.badge-accent  { background: var(--accent-dim);  color: var(--accent);  border: 1px solid rgba(79,107,251,0.2); }
.badge-neutral { background: var(--raised);      color: var(--ink-dim); border: 1px solid var(--border); }

/* ─── Forms ───────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--ink-dim); margin-bottom: 7px; letter-spacing: 0.03em;
}
.form-label.required::after { content: ' *'; color: var(--fire); }
.form-input, .form-select, .form-textarea, .form-control {
  width: 100%;
  background: var(--raised); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--ink);
  font-size: 13.5px; font-family: 'Inter', sans-serif;
  padding: 10px 14px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
  appearance: none;
}
.form-input:hover, .form-select:hover,
.form-textarea:hover, .form-control:hover { border-color: var(--border-hi); }
.form-input:focus, .form-select:focus,
.form-textarea:focus, .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.form-select, select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 36px; cursor: pointer;
}
.form-textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--ink-ghost); }
.form-hint  { font-size: 11.5px; color: var(--ink-ghost); margin-top: 5px; line-height: 1.5; }
.form-error { font-size: 11.5px; color: var(--fire);    margin-top: 5px; }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ─── Table ───────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  background: var(--raised); color: var(--ink-ghost);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; padding: 12px 16px; text-align: left;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table td {
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  color: var(--ink-dim); vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--raised); color: var(--ink); }
.table .td-name    { color: var(--ink); font-weight: 600; }
.table .td-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ─── Kanban ──────────────────────────────────────────────────────────────── */
.kanban-wrap  { overflow-x: auto; padding-bottom: 20px; }
.kanban-board {
  display: flex; gap: 14px;
  min-height: calc(100vh - 200px); align-items: flex-start;
}
.kanban-col {
  flex: 0 0 274px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 200px);
  transition: border-color var(--t-fast);
}
.kanban-col.drag-over { border-color: var(--accent); background: var(--accent-dim); }
.kanban-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.kanban-col-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.stage-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex-shrink: 0; }
.kanban-col-meta { font-size: 11px; color: var(--ink-ghost); }
.kanban-col-meta strong { color: var(--ink-dim); }
.kanban-cards { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; }
.kanban-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px; cursor: grab;
  transition: box-shadow var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  user-select: none;
}
.kanban-card:hover { border-color: var(--border-hi); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.kanban-card:active { cursor: grabbing; transform: rotate(1deg) scale(1.01); }
.kanban-card.dragging { opacity: 0.35; }
.kc-title   { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.kc-title-link { color: inherit; text-decoration: none; }
.kc-title-link:hover { color: var(--signal); }
.kc-company { font-size: 12px; color: var(--ink-ghost); margin-bottom: 10px; }
.kc-footer  { display: flex; align-items: center; justify-content: space-between; }
.kc-value   { font-size: 13px; font-weight: 700; color: var(--signal); }
.kc-avatar  { width: 24px; height: 24px; border-radius: 50%; background: var(--raised); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--ink-dim); }
.kc-due     { font-size: 11px; color: var(--ink-ghost); }
.kc-due.overdue { color: var(--fire); }
.kanban-add-btn {
  margin: 10px; padding: 9px;
  background: transparent; border: 1px dashed var(--border); border-radius: var(--r-md);
  color: var(--ink-ghost); font-size: 12px; font-weight: 500;
  width: calc(100% - 20px); transition: all var(--t-fast);
}
.kanban-add-btn:hover { background: var(--raised); border-color: var(--accent); color: var(--accent); border-style: solid; }

/* ─── Score & Progress ────────────────────────────────────────────────────── */
.score-circle {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.score-circle.high { background: var(--growth-dim); color: var(--growth); }
.score-circle.mid  { background: var(--signal-dim); color: var(--signal); }
.score-circle.low  { background: var(--fire-dim);   color: var(--fire); }
.score-circle.crit { background: var(--fire-dim); color: var(--fire); box-shadow: 0 0 0 1px var(--fire); }
.prog-bar  { height: 4px; background: var(--raised); border-radius: 3px; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 3px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
.prog-fill.growth { background: var(--growth); }
.prog-fill.signal { background: var(--signal); }
.prog-fill.fire   { background: var(--fire); }
.prog-fill.accent { background: var(--accent); }

/* ─── Avatar ──────────────────────────────────────────────────────────────── */
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-dim); border: 1px solid rgba(79,107,251,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--accent); flex-shrink: 0;
}
.avatar-sm { width: 28px; height: 28px; font-size: 10px; }
.avatar-lg { width: 46px; height: 46px; font-size: 17px; }

/* ─── Log Activity Quick-Log tiles ───────────────────────────────────────── */
.log-type-btn:hover { border-color: var(--border-hi) !important; filter: brightness(1.15); transform: translateY(-1px); }
.log-type-btn:active { transform: translateY(0); }

/* ─── Tags ────────────────────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center;
  background: var(--raised); border: 1px solid var(--border); border-radius: 20px;
  padding: 3px 10px; font-size: 11px; color: var(--ink-dim); font-weight: 500;
}

/* ─── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; opacity: 0; pointer-events: none;
  transition: opacity var(--t-med);
  padding: 16px;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--card); border: 1px solid var(--border-hi);
  border-radius: var(--r-xl); box-shadow: var(--shadow-modal);
  width: 92%; max-width: 520px; max-height: 90vh;
  display: flex; flex-direction: column;
  transform: translateY(16px) scale(0.98);
  transition: transform var(--t-med);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-lg { max-width: 720px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.modal-header h3,
.modal-title {
  font-family: var(--font-display);
  font-size: 17px; color: var(--ink); line-height: 1.2;
}
.modal-close {
  width: 32px; height: 32px; background: var(--raised); border: 1px solid var(--border);
  border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center;
  color: var(--ink-dim); transition: all var(--t-fast); cursor: pointer;
}
.modal-close:hover { background: var(--fire-dim); color: var(--fire); border-color: rgba(244,63,94,0.3); }
.modal-body   { padding: 24px; overflow-y: auto; flex: 1; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; flex-shrink: 0; }

/* ─── Alerts / Toast ──────────────────────────────────────────────────────── */
.alert {
  padding: 13px 16px; border-radius: var(--r-md);
  font-size: 13px; margin-bottom: 16px;
  display: flex; align-items: flex-start; gap: 10px;
}
.alert-success { background: var(--growth-dim); color: var(--growth); border: 1px solid rgba(16,185,129,0.22); }
.alert-error   { background: var(--fire-dim);   color: var(--fire);   border: 1px solid rgba(244,63,94,0.22); }
.alert-warning { background: var(--signal-dim); color: var(--signal); border: 1px solid rgba(79,107,251,0.22); }
.alert-info    { background: var(--info-dim);   color: var(--info);   border: 1px solid rgba(59,130,246,0.22); }

/* Toast container */
#toastContainer {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 9999; pointer-events: none;
}
.toast-item {
  min-width: 280px; max-width: 400px;
  padding: 13px 16px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(255,255,255,0.06);
  pointer-events: all;
  display: flex; align-items: center; gap: 10px;
  animation: toastIn 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.toast-item.alert-success { background: var(--card); color: var(--growth); border: 1px solid rgba(16,185,129,0.3); box-shadow: var(--shadow-card), 0 0 0 1px rgba(16,185,129,0.06); }
.toast-item.alert-error   { background: var(--card); color: var(--fire);   border: 1px solid rgba(244,63,94,0.3); box-shadow: var(--shadow-card), 0 0 0 1px rgba(244,63,94,0.06); }
.toast-item.alert-warning { background: var(--card); color: var(--signal); border: 1px solid rgba(79,107,251,0.3); box-shadow: var(--shadow-card), 0 0 0 1px rgba(79,107,251,0.06); }
.toast-item.alert-info    { background: var(--card); color: var(--info);   border: 1px solid rgba(59,130,246,0.3); box-shadow: var(--shadow-card), 0 0 0 1px rgba(59,130,246,0.06); }
@keyframes toastIn {
  from { transform: translateX(100%) scale(0.9); opacity: 0; }
  to   { transform: translateX(0) scale(1); opacity: 1; }
}

/* ─── Dropdown ────────────────────────────────────────────────────────────── */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 186px;
  background: var(--card); border: 1px solid var(--border-hi);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  z-index: 200; opacity: 0; pointer-events: none;
  transform: translateY(-8px) scale(0.97);
  transition: opacity var(--t-fast), transform var(--t-fast);
  padding: 4px;
}
.dropdown-menu.open { opacity: 1; pointer-events: all; transform: translateY(0) scale(1); }
.dropdown-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; font-size: 13px; color: var(--ink-dim);
  transition: background var(--t-fast), color var(--t-fast);
  cursor: pointer; text-decoration: none; border-radius: var(--r-sm);
}
.dropdown-item:hover { background: var(--raised); color: var(--ink); }
.dropdown-item.danger { color: var(--fire); }
.dropdown-item.danger:hover { background: var(--fire-dim); }
.dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ─── Pagination ──────────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; gap: 4px; margin-top: 20px; }
.page-btn {
  min-width: 34px; height: 34px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--raised); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink-dim); transition: all var(--t-fast);
  cursor: pointer; text-decoration: none;
}
.page-btn:hover { background: var(--card); color: var(--ink); border-color: var(--border-hi); }
.page-btn.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.page-btn:disabled, .page-btn.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* ─── Timeline ────────────────────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item { display: flex; gap: 14px; position: relative; padding-bottom: 22px; }
.timeline-item::before {
  content: ''; position: absolute; left: 15px; top: 32px; bottom: 0;
  width: 1px; background: var(--border);
}
.timeline-item:last-child::before { display: none; }
.timeline-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--raised); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--ink-ghost);
}
.timeline-content { flex: 1; padding-top: 4px; }
.timeline-desc { font-size: 13px; color: var(--ink-dim); line-height: 1.5; }
.timeline-desc strong { color: var(--ink); }
.timeline-time { font-size: 11px; color: var(--ink-ghost); margin-top: 3px; }

/* ─── Accessibility: visible keyboard focus app-wide (was missing — mouse
   users saw hover states everywhere, keyboard users got no visual cue at
   all) ───────────────────────────────────────────────────────────────────── */
.btn:focus-visible, .tab-item:focus-visible, .page-btn:focus-visible,
.dropdown-item:focus-visible, .kanban-card:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 2px;
}

/* ─── Empty State ─────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 60px 20px; color: var(--ink-ghost); }
.empty-state svg { margin-bottom: 16px; opacity: 0.25; }
.empty-state h3 { font-size: 18px; color: var(--ink-dim); margin-bottom: 8px; }
.empty-state p  { font-size: 13px; max-width: 320px; margin: 0 auto 20px; line-height: 1.65; }

/* ─── Tab Bar ─────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex; gap: 2px;
  background: var(--raised); border-radius: var(--r-md);
  padding: 4px; border: 1px solid var(--border); width: fit-content;
}
.tab-item {
  padding: 6px 14px; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 500; color: var(--ink-ghost);
  text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast); cursor: pointer;
  border: 1px solid transparent;
}
.tab-item:hover { color: var(--ink-dim); background: var(--card); }
.tab-item.active {
  background: var(--card); color: var(--ink); font-weight: 600;
  border-color: var(--border-hi); box-shadow: var(--shadow-sm);
}

/* ─── Filter Bar ──────────────────────────────────────────────────────────── */
.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.search-wrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-ghost); pointer-events: none; }
.search-wrap .form-input { padding-left: 34px; }

/* ─── AI / KPI Styles ─────────────────────────────────────────────────────── */
.ai-briefing-box { background: var(--raised); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; }
.ai-headline { font-family: var(--font-display); font-size: 20px; color: var(--ink); margin-bottom: 16px; line-height: 1.35; }
.ai-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-ghost); margin-bottom: 8px; }
.ai-risks  { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.ai-risk-item {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--fire-dim); border: 1px solid rgba(244,63,94,0.15); border-radius: var(--r-md);
  padding: 10px 14px; font-size: 13px; color: var(--ink-dim);
}
.ai-risk-item::before { content: '!'; font-size: 13px; font-weight: 800; color: var(--fire); flex-shrink: 0; width: 18px; text-align: center; }
.ai-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.ai-action-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--signal-dim); border: 1px solid rgba(79,107,251,0.15); border-radius: var(--r-md);
  padding: 10px 14px; font-size: 13px; color: var(--ink-dim);
}
.ai-action-num { color: var(--signal); font-weight: 700; font-size: 15px; flex-shrink: 0; }
.ai-summary { font-size: 14px; color: var(--ink-dim); line-height: 1.8; }
.team-status-list { display: flex; flex-direction: column; gap: 10px; }
.team-status-item {
  background: var(--raised); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px; display: flex; align-items: center; gap: 12px;
  transition: border-color var(--t-fast);
}
.team-status-item:hover { border-color: var(--border-hi); }
.tsi-info { flex: 1; }
.tsi-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.tsi-role { font-size: 11px; color: var(--ink-ghost); }
.warning-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px; border: 1px solid rgba(244,63,94,0.2);
  border-left: 3px solid var(--fire);
  border-radius: var(--r-md); background: rgba(244,63,94,0.04); margin-bottom: 10px;
}
.wi-content { flex: 1; }
.wi-msg  { font-size: 13px; color: var(--ink-dim); }
.wi-meta { font-size: 11px; color: var(--ink-ghost); margin-top: 4px; }
.directive-list { display: flex; flex-direction: column; gap: 0; }
.directive-item {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 16px; display: flex; gap: 14px; margin-bottom: 10px;
  transition: border-color var(--t-fast);
}
.directive-item-lg { padding: 18px; margin-bottom: 12px; }
.directive-item.done { opacity: 0.4; }
.directive-item:hover { border-color: var(--border-hi); }
.directive-num, .di-num {
  width: 28px; height: 28px; background: var(--signal-dim); color: var(--signal);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.directive-num-lg {
  width: 36px; height: 36px; background: var(--signal-dim); color: var(--signal);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; flex-shrink: 0;
}
.directive-body { flex: 1; min-width: 0; }
.directive-action, .di-action { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.directive-action-lg { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.directive-reason, .di-reason { font-size: 12px; color: var(--ink-ghost); line-height: 1.55; }
.di-link { font-size: 11px; color: var(--accent); margin-top: 6px; }
.directive-history-row { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.directive-history-row:last-child { border-bottom: none; }
.directive-history-date { font-size: 12px; font-weight: 600; color: var(--ink-dim); white-space: nowrap; min-width: 130px; }
.directive-history-preview { flex: 1; overflow: hidden; }
.directive-history-expand { background: var(--raised); }

/* ─── KPI Board ───────────────────────────────────────────────────────────── */
.kpi-defs-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; }
.kpi-def-chip {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px 14px; min-width: 180px; display: flex; flex-direction: column; gap: 3px;
  position: relative;
}
.kpi-def-name    { font-size: 13px; font-weight: 600; color: var(--ink); }
.kpi-def-meta    { font-size: 11px; color: var(--ink-ghost); }
.kpi-def-actions { display: flex; gap: 4px; margin-top: 8px; }
.kpi-board-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kpi-board-table th {
  background: var(--raised); padding: 10px 14px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-ghost);
  border-bottom: 1px solid var(--border); white-space: nowrap; text-align: left;
}
.kpi-member-col { min-width: 180px; position: sticky; left: 0; background: var(--raised); z-index: 2; }
.kpi-metric-col { min-width: 130px; text-align: center; }
.kpi-th-name    { font-weight: 600; color: var(--ink-dim); font-size: 12px; }
.kpi-th-target  { font-size: 10px; color: var(--ink-ghost); margin-top: 2px; }
.kpi-board-row  { border-bottom: 1px solid var(--border); transition: background var(--t-fast); }
.kpi-board-row:hover { background: var(--raised); }
.kpi-board-row:hover .kpi-member-cell { background: var(--raised); }
.kpi-member-cell { padding: 12px 14px; background: var(--surface); position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--border); }
.kpi-value-cell  { padding: 10px 14px; text-align: center; cursor: pointer; border-right: 1px solid var(--border); transition: background var(--t-fast); }
.kpi-value-cell:hover { background: var(--signal-dim); }
.kpi-val     { font-size: 18px; font-weight: 700; line-height: 1; }
.kpi-val-pct { font-size: 11px; margin-top: 2px; }

/* ─── AI Command Center ───────────────────────────────────────────────────── */
.section-header-sm { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-ghost); margin: 0 0 10px; }
.briefing-headline { font-size: 18px; font-weight: 700; color: var(--signal); line-height: 1.4; margin-bottom: 14px; }
.briefing-forecast { display: inline-block; background: var(--raised); border: 1px solid var(--border); border-radius: 20px; padding: 4px 14px; font-size: 12px; color: var(--ink-dim); margin-bottom: 14px; }
.briefing-section-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-ghost); margin: 16px 0 8px; }
.briefing-risks { display: flex; flex-direction: column; gap: 8px; }
.briefing-risk-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-dim); }
.risk-num { flex-shrink: 0; width: 20px; height: 20px; background: var(--fire-dim); color: var(--fire); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; margin-top: 1px; }
.briefing-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.briefing-action-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-dim); }
.action-num { flex-shrink: 0; width: 20px; height: 20px; background: var(--signal-dim); color: var(--signal); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; margin-top: 1px; }
.team-analysis-card { border-bottom: 1px solid var(--border); transition: background var(--t-fast); }
.team-analysis-card:last-child { border-bottom: none; }
.team-analysis-card.focused { background: var(--raised); }
.tac-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; user-select: none; }
.tac-header:hover { background: var(--raised); }
.tac-chevron { transition: transform .2s; color: var(--ink-ghost); flex-shrink: 0; }
.tac-detail { padding: 0 18px 16px; border-top: 1px solid var(--border); }

/* ─── Landing Page ────────────────────────────────────────────────────────── */
.landing { min-height: 100vh; background: var(--void); }
.landing-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 60px; border-bottom: 1px solid var(--border); }
.hero {
  position: relative; overflow: hidden;
  text-align: center; padding: 80px 20px 60px; max-width: 940px; margin: 0 auto;
}
.hero::before {
  content: ''; position: absolute; z-index: -1;
  top: -80px; left: 50%; width: 140%; height: 460px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at center, var(--signal-glow), transparent 70%);
  pointer-events: none;
}
.hero-eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--signal);
  margin-bottom: 18px; text-wrap: balance;
}
.hero h1 { font-size: 44px; line-height: 1.18; letter-spacing: -0.01em; margin-bottom: 22px; text-wrap: balance; }
.hero h1 .hero-accent { color: var(--signal); }
.hero p { font-size: 17px; color: var(--ink-dim); max-width: 620px; margin: 0 auto 36px; line-height: 1.7; text-wrap: pretty; }
.features-section { padding: 80px 20px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; }
.feature-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; transition: border-color var(--t-fast); }
.feature-card:hover { border-color: var(--border-hi); }
.feature-icon { width: 44px; height: 44px; background: var(--accent-dim); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--accent); }
.feature-card h3 { font-size: 16px; margin-bottom: 8px; }
.feature-card p { font-size: 13.5px; color: var(--ink-dim); line-height: 1.6; }
.pricing-section { padding: 80px 20px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 960px; margin: 0 auto; }
.pricing-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px; position: relative; transition: border-color var(--t-fast); }
.pricing-card.featured { border-color: var(--signal); box-shadow: 0 0 32px rgba(79,107,251,0.15); }
.pricing-badge { position: absolute; top: -12px; right: 24px; background: var(--signal); color: var(--on-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; }
.pricing-name  { font-size: 14px; color: var(--ink-dim); font-weight: 600; margin-bottom: 8px; }
.pricing-price { font-family: var(--font-display); font-size: 44px; color: var(--ink); line-height: 1; }
.pricing-price span { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink-ghost); }
.pricing-features { margin: 20px 0; display: flex; flex-direction: column; gap: 10px; }
.pricing-feature { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-dim); }
.pricing-feature::before { content: '✓'; font-weight: 700; color: var(--growth); flex-shrink: 0; }

/* ─── Auth Pages ──────────────────────────────────────────────────────────── */
.auth-page { min-height: 100vh; background: var(--void); display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 38px; width: 100%; max-width: 420px; box-shadow: var(--shadow-modal); }
.auth-logo { text-align: center; margin-bottom: 30px; }
.auth-logo .logo-mark { width: 50px; height: 50px; background: var(--signal); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 24px; color: var(--on-accent); margin: 0 auto 14px; box-shadow: 0 0 20px rgba(79,107,251,0.3); }
.auth-logo h2 { font-size: 22px; }
.auth-logo p  { font-size: 13px; color: var(--ink-dim); margin-top: 4px; }

/* ─── Utilities ───────────────────────────────────────────────────────────── */
.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4  { gap: 4px; }   .gap-8  { gap: 8px; }   .gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }  .gap-20 { gap: 20px; }   .gap-24 { gap: 24px; }
.mt-4  { margin-top: 4px; }    .mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }   .mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }   .mt-24 { margin-top: 24px; }
.mb-4  { margin-bottom: 4px; }  .mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; }
.text-signal { color: var(--signal); }
.text-fire   { color: var(--fire);   }
.text-growth { color: var(--growth); }
.text-info   { color: var(--info);   }
.text-accent { color: var(--accent); }
.text-dim    { color: var(--ink-dim);   }
.text-ghost  { color: var(--ink-ghost); }
.text-sm  { font-size: 12.5px; }
.text-xs  { font-size: 11px; }
.font-bold { font-weight: 700; }
.font-semi { font-weight: 600; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.w-full  { width: 100%; }
.grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.divider { height: 1px; background: var(--border); margin: 20px 0; }
.hidden  { display: none; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spin { animation: _spin 0.8s linear infinite; }
@keyframes _spin { to { transform: rotate(360deg); } }

/* ─── CSS-only Toggle Switch (pin notes) ─────────────────────────────────── */
.pin-wrap  { position:relative; display:inline-flex; align-items:center; flex-shrink:0; }
.pin-cb    { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.pin-track { display:block; width:36px; height:20px; background:var(--border-hi); border-radius:20px;
             position:relative; transition:background .2s; cursor:pointer; }
.pin-thumb { display:block; width:14px; height:14px; background:#fff; border-radius:50%;
             position:absolute; top:3px; left:3px; transition:transform .2s; pointer-events:none; }
.pin-cb:checked + .pin-track              { background:var(--accent); }
.pin-cb:checked + .pin-track .pin-thumb  { transform:translateX(16px); }

/* ─── Log Activity type buttons ──────────────────────────────────────────── */
.la-type-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:12px 8px; border-radius:var(--r-md); border:1px solid var(--border);
  background:var(--raised); color:var(--ink-dim); font-size:12px; font-weight:600;
  cursor:pointer; transition:all var(--t-fast); letter-spacing:.02em;
}
.la-type-btn:hover                { border-color:var(--border-hi); color:var(--ink); background:var(--card-hover); }
.la-type-btn--call                { border-color:rgba(79,107,251,.5); background:rgba(79,107,251,.08); color:#4f6bfb; }
.la-type-btn--email               { border-color:rgba(59,130,246,.5); background:rgba(59,130,246,.08); color:var(--info); }
.la-type-btn--meeting             { border-color:var(--growth); background:var(--growth-dim); color:var(--growth); }

/* ─── Impersonation Bar ───────────────────────────────────────────────────── */
.impersonate-bar {
  background: var(--fire); color: #fff;
  text-align: center; padding: 7px 16px;
  font-size: 12px; font-weight: 600;
  position: sticky; top: 0; z-index: 200;
  letter-spacing: 0.03em;
}
.impersonate-bar a { color: #fff; text-decoration: underline; margin-left: 16px; }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); z-index: 150; }
  .sidebar.mobile-open { transform: translateX(0); }
  .page-content { margin-left: 0; }
  .topbar { left: 0; }
  .hamburger { display: flex; }
  .page-body { padding: 16px 14px 40px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .form-row  { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .landing-nav { padding: 16px 20px; }
  .hero h1 { font-size: 32px; line-height: 1.2; }
  .modal { width: 96%; max-width: none; }
  .modal-overlay { padding: 12px; align-items: flex-end; }
  .modal { border-radius: var(--r-xl) var(--r-xl) var(--r-sm) var(--r-sm); }
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tab-bar { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  #toastContainer { bottom: 16px; right: 16px; left: 16px; }
  .toast-item { min-width: unset; }
}
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-value { font-size: 26px; }
  .stat-card { padding: 16px; }
  .page-body { padding: 12px 12px 36px; }
}

/* Select option backgrounds — browsers paint dropdowns natively */
select option { background-color: #ffffff; color: #14161f; }
:root[data-theme="dark"] select option { background-color: #16161d; color: #f2f2f7; }

/* ─── Print ───────────────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .btn, .modal-overlay, .filter-bar, .hamburger { display: none !important; }
  .page-content { margin-left: 0 !important; padding-top: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
  .card { border-color: #ddd !important; background: #fff !important; }
}

/* ─── Global Animations ───────────────────────────────────────────────────── */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.animate-fade { animation: fadeIn  0.2s ease forwards; }

/* ─── Favorites / Pin + Command Palette ──────────────────────────────────────
   Shared by app/dashboard.php (Favorites/Frequently Used/Recently Visited
   zones + the All Modules star toggle), includes/layout/sidebar-ceo.php +
   sidebar-employee.php (Favorites nav group), and assets/js/favorites.js
   (the Ctrl/Cmd+K command palette, global on every CEO/employee page). ──── */
.fav-tile-wrap { position: relative; }
.fav-star-btn {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--ink-ghost); cursor: pointer; transition: all var(--t-fast);
  opacity: 0;
}
.fav-tile-wrap:hover .fav-star-btn, .fav-star-btn.is-fav { opacity: 1; }
.fav-star-btn.is-fav { color: #f5b400; border-color: rgba(245,180,0,0.35); background: rgba(245,180,0,0.08); }
.fav-star-btn:hover { color: #f5b400; border-color: rgba(245,180,0,0.5); }
.fav-star-btn svg { pointer-events: none; }
.fav-zone-empty {
  padding: 20px; text-align: center; color: var(--ink-ghost); font-size: 12.5px;
  border: 1px dashed var(--border); border-radius: var(--r-md);
}

/* Pinned dock — went through two prior iterations (always-expanded felt
   intrusive; a hover-triggered floating flyout felt flaky — hover-reveal
   panels are a known-weak pattern, the same complaint people have about
   macOS's auto-hide Dock). Settled on the pattern real products actually
   use for this — Slack/Notion-style: a plain click-to-expand/collapse
   accordion, no hover logic anywhere, no floating overlay. Collapsed by
   default (zero footprint), one deliberate click reveals it inline with a
   smooth height transition, state persisted (localStorage). The dock only
   exists in the DOM at all once something is pinned. */
.sidebar-pinned {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}
.sidebar-pinned-header {
  width: 100%; display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; background: none; border: none; cursor: pointer;
  font-family: inherit; text-align: left;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-ghost);
  transition: color var(--t-fast);
}
.sidebar-pinned-header:hover { color: var(--ink-dim); }
.sidebar-pinned-header svg:first-child { color: var(--signal); flex-shrink: 0; opacity: .8; }
.sidebar-pinned-count {
  background: var(--raised); color: var(--ink-ghost);
  font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 10px;
}
.sidebar-pinned-chevron { margin-left: auto; flex-shrink: 0; transition: transform var(--t-med); }
.sidebar-pinned.open .sidebar-pinned-chevron { transform: rotate(180deg); }

/* Inline accordion body — max-height transition (capped generously above
   any realistic pin count) gives a smooth slide open/close with zero JS
   height-measuring and zero hover-timing to get wrong. */
.sidebar-pinned-flyout {
  max-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 1px;
  padding: 0 6px; transition: max-height var(--t-med) ease, padding var(--t-med) ease;
}
.sidebar-pinned.open .sidebar-pinned-flyout { max-height: 400px; overflow-y: auto; padding: 2px 6px 8px; }

/* Pinned items — back to icon + visible label rows (same shape as a normal
   sidebar-nav link). Icon-only squares saved height but made pins hard to
   tell apart at a glance; a scannable label matters more than the extra
   few px, especially since the dock is collapsed by default now anyway. */
.sb-fav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--ink-dim); font-size: 13px; font-weight: 500;
  text-decoration: none; border: 1px solid transparent; position: relative;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.sb-fav-item:hover { background: var(--raised); color: var(--ink); border-color: var(--border); }
.sb-fav-item.active { background: var(--accent-dim); color: var(--accent); border-color: rgba(79,107,251,0.2); }
.sb-fav-item svg { flex-shrink: 0; opacity: 0.6; }
.sb-fav-item:hover svg, .sb-fav-item.active svg { opacity: 1; }
.sb-fav-item .sb-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-fav-item .sb-fav-remove {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-ghost); opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.sb-fav-item:hover .sb-fav-remove { opacity: 1; }
.sb-fav-item .sb-fav-remove:hover { background: var(--fire); color: #fff; }
.sb-fav-item[draggable="true"] { cursor: grab; }
.sb-fav-item.dragging { opacity: 0.4; }

/* Right-click context menu — reuses .dropdown-menu/.dropdown-item's visual
   language (same card/border/shadow tokens) but is positioned at the cursor
   instead of relative to a trigger button. */
.sb-ctx-menu {
  position: fixed; min-width: 190px;
  background: var(--card); border: 1px solid var(--border-hi);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  z-index: 6000; padding: 4px;
  opacity: 0; pointer-events: none; transform: scale(0.97);
  transform-origin: top left;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.sb-ctx-menu.open { opacity: 1; pointer-events: all; transform: scale(1); }
.sb-ctx-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 500; color: var(--ink-dim);
  cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.sb-ctx-item:hover { background: var(--raised); color: var(--ink); }
.sb-ctx-item svg { flex-shrink: 0; opacity: 0.7; color: #f5b400; }

.cmd-overlay {
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast);
}
.cmd-overlay.open { opacity: 1; pointer-events: all; }
.cmd-box {
  width: 100%; max-width: 560px; max-height: 60vh;
  background: var(--card); border: 1px solid var(--border-hi);
  border-radius: var(--r-xl); box-shadow: var(--shadow-modal);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(-10px); transition: transform var(--t-fast);
}
.cmd-overlay.open .cmd-box { transform: translateY(0); }
.cmd-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cmd-input-row svg { color: var(--ink-ghost); flex-shrink: 0; }
.cmd-input { flex: 1; border: none; background: transparent; outline: none; font-size: 15px; color: var(--ink); font-family: inherit; }
.cmd-input::placeholder { color: var(--ink-ghost); }
.cmd-hint { font-size: 10.5px; color: var(--ink-ghost); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; flex-shrink: 0; }
.cmd-results { overflow-y: auto; flex: 1; padding: 6px; }
.cmd-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-ghost); padding: 8px 10px 4px; }
.cmd-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: var(--r-md); color: var(--ink-dim); text-decoration: none;
  font-size: 13.5px; cursor: pointer;
}
.cmd-item svg { flex-shrink: 0; opacity: 0.6; }
.cmd-item.active { background: var(--accent-dim); color: var(--accent); }
.cmd-item.active svg { opacity: 1; }
.cmd-empty { padding: 30px 10px; text-align: center; color: var(--ink-ghost); font-size: 12.5px; }

/* ─── Legal / policy pages (privacy, terms, refund, contact) ────────────── */
.legal-wrap { max-width: 780px; margin: 0 auto; padding: 50px 24px 100px; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.legal-tab {
  font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 99px;
  border: 1px solid var(--border); color: var(--ink-dim); text-decoration: none;
  transition: all var(--t-fast);
}
.legal-tab:hover { border-color: var(--border-hi); color: var(--ink); }
.legal-tab.active { background: var(--signal-dim); border-color: rgba(79,107,251,0.3); color: var(--signal); }
.legal-content h1 { font-size: 32px; margin-bottom: 6px; }
.legal-updated { font-size: 12.5px; color: var(--ink-ghost); margin-bottom: 32px; }
.legal-content h2 { font-size: 19px; margin: 34px 0 12px; }
.legal-content h3 { font-size: 15px; margin: 20px 0 8px; color: var(--ink); }
.legal-content p { font-size: 14px; color: var(--ink-dim); line-height: 1.75; margin-bottom: 12px; }
.legal-content ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; }
.legal-content li { font-size: 14px; color: var(--ink-dim); line-height: 1.75; margin-bottom: 8px; }
.legal-content a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }
.legal-content strong { color: var(--ink); }

/* ─── Landing page: extended marketing sections ──────────────────────────
   Additive only — the existing .hero/.features-grid/.pricing-grid rules
   above are untouched; these are new sections layered around them.
   Kept deliberately restrained per this user's established preference
   (see feedback_ui_restraint memory): no eyebrow badges, icon-in-circle
   chrome, or filled "banner" boxes — plain typography + hairline
   section dividers only. */
.section-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.section-head h2 { font-size: clamp(24px, 4vw, 32px); margin-bottom: 10px; }
.section-head p { font-size: 15px; color: var(--ink-dim); line-height: 1.65; }

.hero-note { text-align: center; margin-top: 20px; font-size: 12px; color: var(--ink-ghost); text-wrap: balance; }

.cta-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

.problem-band { padding: 80px 20px; }
.problem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; }
.problem-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; transition: border-color var(--t-fast); }
.problem-card:hover { border-color: var(--border-hi); }
.problem-card h4 { font-size: 16px; margin-bottom: 6px; }
.problem-card p { font-size: 13.5px; color: var(--ink-dim); line-height: 1.65; }

.steps-section { padding: 80px 20px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; }
.step-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; transition: border-color var(--t-fast); }
.step-card:hover { border-color: var(--border-hi); }
.step-n { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; color: var(--signal); letter-spacing: 0.04em; margin-bottom: 8px; }
.step-card h3 { font-size: 16px; margin-bottom: 8px; }
.step-card p { font-size: 13.5px; color: var(--ink-dim); line-height: 1.65; }

.spec-section { padding: 80px 20px; }
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto; }
.spec-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; transition: border-color var(--t-fast); }
.spec-card:hover { border-color: var(--border-hi); }
.spec-card h3 { font-size: 18px; margin-bottom: 10px; }
.spec-card > p { font-size: 13.5px; color: var(--ink-dim); line-height: 1.7; margin-bottom: 16px; }
.spec-list { display: flex; flex-direction: column; gap: 10px; }
.spec-list li { font-size: 13.5px; color: var(--ink-dim); line-height: 1.6; padding-left: 20px; position: relative; }
.spec-list li::before { content: '✓'; position: absolute; left: 0; font-weight: 700; color: var(--growth); }

.faq-section { padding: 80px 20px; max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 20px 4px; font-size: 15px; font-weight: 600;
  color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 20px; color: var(--ink-ghost); flex-shrink: 0; transition: transform var(--t-fast); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { font-size: 13.5px; color: var(--ink-dim); line-height: 1.7; padding: 0 4px 20px; }

.final-cta { text-align: center; padding: 80px 20px; border-top: 1px solid var(--border); }
.final-cta h2 { font-size: clamp(24px, 4vw, 32px); margin-bottom: 10px; }
.final-cta p { font-size: 14.5px; color: var(--ink-dim); margin-bottom: 26px; }

.landing-footer { text-align: center; padding: 40px 20px; border-top: 1px solid var(--border); color: var(--ink-ghost); font-size: 13px; }
.landing-footer p { text-wrap: pretty; }
.landing-footer a { color: var(--ink-ghost); }
.landing-footer a:hover { color: var(--ink-dim); }

.billing-toggle.active { background: var(--signal-dim); border-color: rgba(79,107,251,0.3); color: var(--signal); }

/* ─── Landing page: world-class visual pass ──────────────────────────────
   Typography, depth and motion layered on top of the base Landing Page
   block above — nothing there is edited, and every selector here is either
   scoped under .landing or targets a class only the landing page uses, so
   none of this reaches the internal dashboard that shares this stylesheet. */

.landing { --font-display: 'Bricolage Grotesque', var(--font-body); }
.landing h1, .landing h2, .landing h3 { letter-spacing: -0.02em; }
.landing .logo-mark { box-shadow: 0 3px 10px rgba(79,107,251,0.35); }

/* Nav gains weight once the page has scrolled past it */
.landing-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(245,246,250,0.7);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: box-shadow var(--t-med), border-color var(--t-med);
}
:root[data-theme="dark"] .landing-nav { background: rgba(8,8,11,0.6); }
.landing-nav.is-scrolled { box-shadow: var(--shadow-sm); border-color: var(--border-hi); }

/* Hero: guaranteed CSS-only entrance (no JS/observer dependency, since it's
   above the fold from first paint) plus a slow ambient drift on its glow. */
.hero-eyebrow, .hero h1, .hero p, .hero .cta-row, .hero-note {
  animation: heroRise .8s cubic-bezier(.16,1,.3,1) both;
}
.hero h1     { animation-delay: .08s; }
.hero p      { animation-delay: .16s; }
.hero .cta-row { animation-delay: .24s; }
.hero-note   { animation-delay: .3s; }
@keyframes heroRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.hero::before { animation: heroDrift 18s ease-in-out infinite; }
@keyframes heroDrift {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50%      { transform: translateX(-50%) translateY(14px) scale(1.06); }
}

/* Card depth — resting shadow + hover lift, layered on each card's existing
   border-color transition. */
.feature-card, .problem-card, .step-card, .spec-card, .pricing-card {
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-med), transform var(--t-med);
}
.feature-card:hover, .problem-card:hover, .step-card:hover, .spec-card:hover, .pricing-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.pricing-card.featured:hover { box-shadow: 0 14px 40px rgba(79,107,251,0.24); }

/* CTA buttons on the landing page get a touch more presence on hover than
   the app-wide .btn defaults used throughout the dashboard. */
.landing .btn { transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-med), transform var(--t-fast); }
.landing .btn-primary:hover { transform: translateY(-2px); }
.landing .btn-ghost:hover   { transform: translateY(-1px); }

/* Scroll reveal for everything below the fold — JS (assets/js/app.js)
   toggles .is-visible via IntersectionObserver; both states are defined in
   CSS so content is never stuck invisible if JS fails to run. */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero h1, .hero p, .hero .cta-row, .hero-note, .hero::before { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .feature-card:hover, .problem-card:hover, .step-card:hover, .spec-card:hover,
  .pricing-card:hover, .landing .btn-primary:hover, .landing .btn-ghost:hover { transform: none; }
}

/* ─── Landing page: mobile responsiveness ────────────────────────────────
   Additive breakpoints layered on top of the base .landing-nav/.hero/
   .features-grid/.pricing-grid rules above — nothing there is edited. */
.nav-extra { display: inline-flex; }
.nav-actions { margin-left: auto; }
@media (max-width: 900px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid  { grid-template-columns: 1fr; max-width: 460px; }
  .problem-grid  { max-width: 640px; }
  .steps-grid    { grid-template-columns: 1fr; max-width: 460px; }
  .spec-grid     { max-width: 640px; }
}
@media (max-width: 640px) {
  .landing-nav { padding: 14px 16px; }
  .nav-extra { display: none; }
  .nav-actions { display: none; }
  .hero { padding: 48px 16px 44px; }
  .hero h1 { font-size: 23px; line-height: 1.28; }
  .hero-eyebrow { font-size: 11px; }
  .hero p { font-size: 15px; max-width: 100%; margin-bottom: 28px; }
  .hero-note { font-size: 11px; margin-top: 26px; }
  .cta-row { flex-direction: column; align-items: center; gap: 12px; }
  .cta-row .btn-primary { width: 100%; text-align: center; }
  .cta-row .btn-ghost {
    width: auto; background: none; border-color: transparent;
    padding: 2px 4px; font-size: 13px; text-decoration: underline; text-underline-offset: 2px;
    box-shadow: none;
  }
  /* One consistent mobile rhythm for every landing-page content section. */
  .problem-band, .features-section, .spec-section, .steps-section,
  .pricing-section, .faq-section, .final-cta { padding: 48px 16px; }
  .features-grid, .problem-grid, .steps-grid, .pricing-grid, .spec-grid { grid-template-columns: 1fr; gap: 16px; }
  .auth-page { padding: 12px; }
  .auth-card { padding: 24px; }
  .form-row { grid-template-columns: 1fr; }
  .auth-card .btn-lg { font-size: 13px; padding: 12px 10px; letter-spacing: -0.01em; }
  .landing-footer { padding: 32px 16px; }
}
@media (max-width: 420px) {
  .landing-nav .btn { padding: 6px 10px; font-size: 12px; }
  .pricing-price { font-size: 26px; }
  .hero h1 { font-size: 21px; }
}
.animate-up   { animation: slideUp 0.22s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* ─── Scrollbars: easy to see and grab (left/right ones especially) ─────── */
::-webkit-scrollbar { width: 9px; height: 12px; }
::-webkit-scrollbar-track { background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 99px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; min-width: 40px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 48%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--signal); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
html { scrollbar-color: color-mix(in srgb, var(--ink) 32%, transparent) color-mix(in srgb, var(--ink) 5%, transparent); }
/* the left menu keeps its slim, quiet scrollbar */
.sidebar ::-webkit-scrollbar, .sidebar::-webkit-scrollbar { width: 5px; height: 5px; }
.sidebar ::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar, .sidebar * { scrollbar-width: thin; }