/* ═══════════════════════════════════════════════════════════════
   LiveOps Design System v1.0 — Applied Tokens & Components
   Source: https://design-system.shinp.ai/liveops
   ═══════════════════════════════════════════════════════════════ */

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

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  /* Accent */
  --lo-coral: #FF5A3D;
  --lo-coral-hover: #E24A2E;
  --lo-coral-active: #C63F27;
  --lo-coral-light: #FFE3DC;
  --lo-amber: #FFB020;
  --lo-amber-hover: #E69E1C;
  --lo-amber-light: #FFF3D6;
  --lo-raspberry: #E11D74;
  --lo-raspberry-hover: #C41964;
  --lo-raspberry-light: #FCE7F3;
  --lo-teal: #14B8A6;
  --lo-teal-hover: #0D9488;
  --lo-teal-light: #CCFBF1;
  --lo-navy: #172033;
  --lo-navy-light: #E8EEF8;

  /* Background */
  --lo-bg-screen: #FFF8F4;
  --lo-bg-elevated: #FFFFFF;
  --lo-bg-neutral: #F3F4F8;
  --lo-bg-warm: #FFF1E8;
  --lo-bg-soft-coral: #FFE3DC;
  --lo-bg-overlay: rgba(22, 26, 35, 0.06);

  /* Content */
  --lo-content-primary: #161A23;
  --lo-content-secondary: #5B6472;
  --lo-content-tertiary: #98A1B2;
  --lo-content-link: #E24A2E;

  /* Borders */
  --lo-border: #D8DEE8;
  --lo-border-warm: #F5DDD4;
  --lo-border-overlay: #D9DCE4;

  /* Sentiment */
  --lo-positive: #16A34A;
  --lo-negative: #DC2626;
  --lo-warning: #F59E0B;
  --lo-info: #2563EB;
  --lo-fb-success-bg: #DCFCE7;
  --lo-fb-warning-bg: #FEF3C7;
  --lo-fb-error-bg: #FEE2E2;
  --lo-fb-info-bg: #DBEAFE;

  /* Status */
  --lo-live: #14B8A6;
  --lo-paused: #98A1B2;
  --lo-expired: #5B6472;
  --lo-upcoming: #FFB020;
  --lo-featured: #E11D74;

  /* Chart */
  --lo-chart-1: #FF5A3D;
  --lo-chart-2: #FFB020;
  --lo-chart-3: #E11D74;
  --lo-chart-4: #14B8A6;
  --lo-chart-5: #2563EB;
  --lo-chart-6: #7C3AED;
  --lo-chart-7: #172033;
  --lo-chart-8: #98A1B2;

  /* Spacing */
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px;
  --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --sp-40: 40px;
  --sp-48: 48px; --sp-56: 56px; --sp-64: 64px;

  /* Radius */
  --radius-sm: 16px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-xl: 40px;
  --radius-pill: 9999px;

  /* Elevation */
  --elevation-low: 0 2px 8px rgba(22,26,35,0.08);
  --elevation-md: 0 4px 16px rgba(22,26,35,0.12);
  --elevation-high: 0 8px 32px rgba(22,26,35,0.16);

  /* Motion */
  --motion-fast: 150ms ease-out;
  --motion-normal: 300ms ease-out;

  /* Sizes */
  --size-xs: 24px;
  --size-md: 40px;
  --size-lg: 48px;
  --size-xl: 56px;

  /* Legacy compat — mapped to design system */
  --bg: var(--lo-bg-screen);
  --bg-card: var(--lo-bg-elevated);
  --bg-sidebar: var(--lo-navy);
  --bg-hover: var(--lo-bg-warm);
  --border: var(--lo-border);
  --text: var(--lo-content-primary);
  --text-muted: var(--lo-content-secondary);
  --text-dim: var(--lo-content-tertiary);
  --accent: var(--lo-coral);
  --accent-light: var(--lo-coral);
  --green: var(--lo-positive);
  --red: var(--lo-negative);
  --yellow: var(--lo-warning);
  --orange: #F97316;
  --blue: var(--lo-info);
  --purple: #7C3AED;
  --pink: var(--lo-raspberry);
  --cyan: var(--lo-teal);
  --radius: var(--radius-md);
  --shadow: var(--elevation-low);
  --card-bg: var(--lo-bg-elevated);
}

/* ── Reset ──────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: hidden; }

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--lo-bg-screen);
  color: var(--lo-content-primary);
  display: flex;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.57;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--lo-content-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Global text overflow guard */
p, h1, h2, h3, h4, h5, h6, li, td, th, span, div {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  width: 260px;
  min-width: 260px;
  background: var(--lo-navy);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,0.06);
}

.sidebar-brand {
  padding: var(--sp-24) var(--sp-24) var(--sp-16);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-brand h1 {
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.sidebar-brand h1 .brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: var(--lo-coral);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
}

.sidebar-brand p {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.sidebar-nav { padding: var(--sp-12) 0; flex: 1; }

.sidebar-nav .nav-group-label {
  padding: var(--sp-16) var(--sp-24) var(--sp-4);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
}

.sidebar-nav .nav-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin: var(--sp-8) 0;
}

.sidebar-nav a {
  display: block;
  padding: 9px 20px;
  color: rgba(255,255,255,0.65);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 160ms ease-out, color 160ms ease-out;
  border-radius: 8px;
  margin: 1px var(--sp-12);
  text-decoration: none;
  position: relative;
  line-height: 1.3;
}

.sidebar-nav a:hover {
  background: rgba(255,255,255,0.08);
  color: #FFFFFF;
  text-decoration: none;
}

.sidebar-nav a:focus-visible {
  outline: 2px solid var(--lo-amber);
  outline-offset: 2px;
}

.sidebar-nav a.active {
  color: #FFFFFF;
  background: rgba(255,90,61,0.18);
  font-weight: 600;
}

.sidebar-nav a.active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--lo-teal);
  border-radius: 0 2px 2px 0;
}

.sidebar-nav a.active:hover {
  background: rgba(255,90,61,0.25);
}

/* nav-icon and sub-link removed — clean text-only nav */

/* Mobile hamburger */
.mobile-nav-toggle {
  display: none;
  position: fixed;
  top: 12px; left: 12px;
  z-index: 200;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--lo-border);
  background: var(--lo-bg-elevated);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--lo-content-primary);
  box-shadow: var(--elevation-low);
}

.sidebar-close {
  display: none;
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 18px;
  align-items: center;
  justify-content: center;
}

.sidebar-close:hover { background: rgba(255,255,255,0.2); color: #fff; }

.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(22,26,35,0.5);
  z-index: 90;
}

/* ── Main Layout ────────────────────────────────────────────── */
.main {
  margin-left: 260px;
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: hidden;
  width: calc(100vw - 260px);
  max-width: calc(100vw - 260px);
}

.topbar {
  padding: var(--sp-32) var(--sp-48) 0;
}

.topbar h2 {
  font-size: 30px;
  font-weight: 600;
  color: var(--lo-content-primary);
  letter-spacing: -0.025em;
  line-height: 34px;
}

.topbar p {
  font-size: 14px;
  color: var(--lo-content-secondary);
  margin-top: var(--sp-4);
}

.content {
  padding: var(--sp-24) var(--sp-48) var(--sp-64);
  flex: 1;
  max-width: 1200px;
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

/* ── Typography ────────────────────────────────────────────── */
.lo-display-sm {
  font-size: 40px;
  font-weight: 700;
  line-height: 85%;
  letter-spacing: 0.015em;
}

.lo-title-screen {
  font-size: 30px;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: -0.025em;
}

.lo-title-section {
  font-size: 26px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.015em;
}

.lo-title-subsection {
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.015em;
}

.lo-title-body {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.lo-title-group {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.lo-body-lg {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.005em;
}

.lo-body {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.01em;
}

/* ── KPI Grid ───────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-16);
  margin-bottom: var(--sp-32);
}

.kpi-card {
  background: var(--lo-bg-elevated);
  border: 1px solid var(--lo-border);
  border-radius: var(--radius-sm);
  padding: var(--sp-20) var(--sp-24);
  transition: box-shadow var(--motion-fast);
}

.kpi-card:hover { box-shadow: var(--elevation-low); }

.kpi-card .kpi-label {
  font-size: 11px;
  color: var(--lo-content-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.kpi-card .kpi-value {
  font-size: 32px;
  font-weight: 700;
  margin-top: var(--sp-4);
  line-height: 1;
  color: var(--lo-content-primary);
}

.kpi-card .kpi-sub {
  font-size: 12px;
  color: var(--lo-content-tertiary);
  margin-top: var(--sp-8);
}

/* ── Section ────────────────────────────────────────────────── */
.section {
  margin-bottom: var(--sp-32);
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--sp-16);
  color: var(--lo-content-primary);
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  letter-spacing: -0.01em;
}

.lo-section-head {
  margin-bottom: var(--sp-20);
}

.lo-overline {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lo-coral);
  margin-bottom: var(--sp-4);
}

.lo-section-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--lo-content-primary);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.lo-section-sub {
  font-size: 14px;
  color: var(--lo-content-secondary);
  margin-top: var(--sp-4);
}

/* ── Hero Section ──────────────────────────────────────────── */
.lo-hero {
  padding: var(--sp-8) 0 var(--sp-32);
}

.lo-hero-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--lo-content-primary);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.lo-hero-title .lo-accent { color: var(--lo-coral); }

.lo-hero-desc {
  max-width: 580px;
  font-size: 15px;
  color: var(--lo-content-secondary);
  margin-top: var(--sp-8);
  line-height: 1.65;
}

.lo-hero-meta {
  font-size: 12px;
  color: var(--lo-content-tertiary);
  margin-top: var(--sp-8);
}

.lo-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: var(--sp-20);
}

/* ── Cover (dark hero) ─────────────────────────────────────── */
.lo-cover {
  background: linear-gradient(135deg, #172033 0%, #1E293B 50%, #2D1B12 100%);
  color: #FFFFFF;
  padding: var(--sp-48);
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  border-bottom: 1px solid var(--lo-border);
  margin: calc(-1 * var(--sp-32)) calc(-1 * var(--sp-48)) var(--sp-32);
}

.lo-cover h1 {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.lo-cover h1 .lo-accent { color: var(--lo-coral); }

.lo-cover-meta {
  display: flex;
  gap: var(--sp-24);
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}

.lo-cover-meta strong { color: #FFFFFF; }

/* ── Cards ──────────────────────────────────────────────────── */
.lo-card {
  background: var(--lo-bg-elevated);
  border: 1px solid var(--lo-border);
  border-radius: var(--radius-md);
  padding: var(--sp-24);
  transition: box-shadow var(--motion-fast);
  min-width: 0;
  max-width: 100%;
}

.lo-card:hover { box-shadow: var(--elevation-low); }

.lo-card-warm {
  background: var(--lo-bg-warm);
  border-color: var(--lo-border-warm);
}

.lo-card-neutral {
  background: var(--lo-bg-neutral);
  border-color: transparent;
}

.lo-card-clickable {
  cursor: pointer;
}

.lo-card-clickable:hover {
  box-shadow: var(--elevation-md);
}

/* Cards grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: var(--sp-20);
}

/* Value prop 3-col */
.lo-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-16);
}

.lo-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-16);
}

.lo-vp-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: var(--sp-12);
  background: var(--lo-bg-neutral);
  color: var(--lo-content-secondary);
}
.lo-vp-icon-coral { background: rgba(255,90,61,0.1); color: var(--lo-coral); }
.lo-vp-icon-teal { background: rgba(20,184,166,0.1); color: var(--lo-teal); }
.lo-vp-icon-amber { background: rgba(255,176,32,0.1); color: #B87A00; }

.lo-vp-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--lo-content-primary);
  margin-bottom: var(--sp-4);
}

.lo-vp-text {
  font-size: 13px;
  color: var(--lo-content-secondary);
  line-height: 1.55;
}

/* ── Event Card ─────────────────────────────────────────────── */
.event-card {
  background: var(--lo-bg-elevated);
  border: 1px solid var(--lo-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--motion-fast);
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.event-card:hover {
  border-color: var(--lo-coral);
  box-shadow: var(--elevation-md);
}

.event-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--lo-bg-neutral);
  display: block;
  flex-shrink: 0;
}

.event-card-img-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 120px;
  background: linear-gradient(135deg, var(--lo-bg-neutral) 0%, var(--lo-bg-warm) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lo-content-tertiary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.event-card-body {
  padding: var(--sp-16) var(--sp-20) var(--sp-20);
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.event-card-body h3 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--sp-8);
  color: var(--lo-content-primary);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.event-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-12);
}

.event-card-desc {
  font-size: 13.5px;
  color: var(--lo-content-secondary);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--sp-12);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.event-card-dates {
  font-size: 12px;
  color: var(--lo-content-tertiary);
  margin-bottom: var(--sp-12);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.event-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: auto;
}

/* ── Badges / Chips ─────────────────────────────────────────── */
.chip, .lo-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.lo-badge-live { background: rgba(20,184,166,0.12); color: var(--lo-teal); }
.lo-badge-upcoming { background: rgba(255,176,32,0.12); color: #B87A00; }
.lo-badge-expired { background: rgba(91,100,114,0.1); color: var(--lo-expired); }
.lo-badge-featured { background: rgba(225,29,116,0.1); color: var(--lo-raspberry); }
.lo-badge-paused { background: rgba(152,161,178,0.12); color: var(--lo-paused); }
.lo-badge-ok, .lo-badge-active { background: rgba(22,163,74,0.1); color: var(--lo-positive); }
.lo-badge-warn { background: rgba(245,158,11,0.1); color: #B87A00; }
.lo-badge-off { background: rgba(152,161,178,0.08); color: var(--lo-content-tertiary); }
.lo-badge-coral { background: var(--lo-bg-soft-coral); color: var(--lo-coral); }
.lo-badge-info { background: rgba(37,99,235,0.08); color: var(--lo-info); }

/* Chip colors */
.chip-games { background: rgba(255,90,61,0.1); color: var(--lo-coral); }
.chip-entertainment { background: rgba(225,29,116,0.1); color: var(--lo-raspberry); }
.chip-shopping { background: rgba(255,176,32,0.1); color: #B87A00; }
.chip-finance { background: rgba(22,163,74,0.1); color: var(--lo-positive); }
.chip-social { background: rgba(20,184,166,0.1); color: var(--lo-teal); }
.chip-outro { background: rgba(152,161,178,0.1); color: var(--lo-content-tertiary); }
.chip-event-type { background: rgba(124,58,237,0.08); color: var(--purple); }
.chip-days { background: rgba(255,176,32,0.1); color: #B87A00; }
.chip-days.urgent { background: rgba(220,38,38,0.08); color: var(--lo-negative); }

/* Store badges */
.lo-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--lo-border);
}

.lo-store-badge-apple { background: var(--lo-bg-neutral); color: var(--lo-content-primary); }
.lo-store-badge-android { background: rgba(22,163,74,0.06); color: var(--lo-positive); border-color: rgba(22,163,74,0.15); }
.lo-store-badge-visual { background: rgba(225,29,116,0.06); color: var(--lo-raspberry); border-color: rgba(225,29,116,0.15); }
.lo-store-badge-keyword { background: rgba(255,176,32,0.06); color: #B87A00; border-color: rgba(255,176,32,0.15); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn, .lo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  height: var(--size-lg);
  padding: 0 var(--sp-24);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--motion-fast);
  text-decoration: none;
  line-height: 1;
}

.lo-btn:hover { text-decoration: none; }

.lo-btn-primary {
  background: var(--lo-coral);
  color: #FFFFFF;
}
.lo-btn-primary:hover { background: var(--lo-coral-hover); }

.lo-btn-secondary {
  background: var(--lo-bg-elevated);
  color: var(--lo-content-primary);
  border: 2px solid var(--lo-border);
}
.lo-btn-secondary:hover {
  border-color: var(--lo-coral);
  color: var(--lo-coral);
}

.lo-btn-ghost {
  background: transparent;
  color: var(--lo-content-secondary);
  border: 1px solid var(--lo-border);
}
.lo-btn-ghost:hover {
  background: var(--lo-bg-warm);
  border-color: var(--lo-border-warm);
  color: var(--lo-coral);
}

.lo-btn-accent {
  background: var(--lo-amber);
  color: #3A2500;
}
.lo-btn-accent:hover { background: var(--lo-amber-hover); }

.lo-btn-sm { height: 34px; padding: 0 var(--sp-16); font-size: 13px; }

.lo-btn:disabled, .lo-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Legacy btn */
.btn {
  height: auto;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--lo-bg-elevated);
  color: var(--lo-content-secondary);
  border: 1px solid var(--lo-border);
}
.btn:hover {
  background: var(--lo-coral);
  color: white;
  border-color: var(--lo-coral);
  text-decoration: none;
}
.btn-sm { padding: 6px 14px; font-size: 12px; }

/* ── Tables ─────────────────────────────────────────────────── */
.table-wrap, .lo-table-wrap {
  overflow-x: auto;
  background: var(--lo-bg-elevated);
  border: 1px solid var(--lo-border);
  border-radius: var(--radius-md);
}

table, .lo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead th {
  padding: var(--sp-12) var(--sp-16);
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--lo-content-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--lo-border);
  white-space: nowrap;
  background: var(--lo-bg-neutral);
}

tbody td {
  padding: var(--sp-12) var(--sp-16);
  font-size: 13px;
  border-bottom: 1px solid var(--lo-border);
  vertical-align: middle;
  color: var(--lo-content-primary);
}

tbody tr:hover { background: var(--lo-bg-warm); }
tbody tr:last-child td { border-bottom: none; }
.td-app { font-weight: 600; }

/* ── Status Badges ──────────────────────────────────────────── */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}

.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
}

.status-success .status-dot { background: var(--lo-positive); }
.status-success { color: var(--lo-positive); }
.status-error .status-dot { background: var(--lo-negative); }
.status-error { color: var(--lo-negative); }
.status-partial .status-dot { background: var(--lo-warning); }
.status-partial { color: #B87A00; }
.status-pending .status-dot { background: var(--lo-content-tertiary); }
.status-pending { color: var(--lo-content-tertiary); }

/* ── Vertical / Channel Cards ───────────────────────────────── */
.vertical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--sp-16);
}

.vertical-card {
  background: var(--lo-bg-elevated);
  border: 1px solid var(--lo-border);
  border-radius: var(--radius-md);
  padding: var(--sp-24);
  transition: box-shadow var(--motion-fast);
}

.vertical-card:hover { box-shadow: var(--elevation-low); }

.vertical-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--sp-16);
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  color: var(--lo-content-primary);
}

.vertical-card .v-stat {
  display: flex;
  justify-content: space-between;
  padding: var(--sp-8) 0;
  border-bottom: 1px solid rgba(226,229,235,0.5);
  font-size: 13px;
}

.vertical-card .v-stat:last-child { border-bottom: none; }
.vertical-card .v-stat .v-label { color: var(--lo-content-secondary); }
.vertical-card .v-stat .v-value { font-weight: 600; color: var(--lo-content-primary); }

/* ── Insights Box ───────────────────────────────────────────── */
.insight-box {
  background: var(--lo-bg-warm);
  border: 1px solid var(--lo-border-warm);
  border-radius: var(--radius-md);
  padding: var(--sp-16) var(--sp-24);
  margin-bottom: var(--sp-24);
  font-size: 14px;
  color: var(--lo-content-primary);
  line-height: 1.6;
}

.insight-box strong { color: var(--lo-coral); }

/* ── Timeline ───────────────────────────────────────────────── */
.timeline-group {
  margin-bottom: var(--sp-32);
}

.timeline-group h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--lo-content-tertiary);
  margin-bottom: var(--sp-12);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--lo-border);
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-12) var(--sp-16);
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast);
}

.timeline-item:hover { background: var(--lo-bg-warm); }

.timeline-item-img {
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--lo-bg-neutral);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lo-content-tertiary);
  font-size: 20px;
}

.timeline-item-body { flex: 1; min-width: 0; }

.timeline-item-body h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--lo-content-primary);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.timeline-item-body p {
  font-size: 12px;
  color: var(--lo-content-secondary);
  margin-top: 2px;
}

.timeline-item-badge { flex-shrink: 0; }

/* ── Filters ────────────────────────────────────────────────── */
.filters {
  display: flex;
  gap: var(--sp-12);
  margin-bottom: var(--sp-20);
  flex-wrap: wrap;
  align-items: center;
}

.filters select, .filters input {
  background: var(--lo-bg-elevated);
  border: 1px solid var(--lo-border);
  color: var(--lo-content-primary);
  padding: var(--sp-8) var(--sp-16);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--motion-fast);
}

.filters select:focus, .filters input:focus {
  border-color: var(--lo-coral);
}

/* ── Empty State ────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--sp-64) var(--sp-24);
  color: var(--lo-content-tertiary);
}

.empty-state .empty-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--lo-bg-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto var(--sp-16);
}

.empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--lo-content-secondary);
  margin-bottom: var(--sp-8);
}

.empty-state p {
  font-size: 14px;
  line-height: 1.6;
  max-width: 400px;
  margin: 0 auto;
  color: var(--lo-content-secondary);
}

.empty-state .lo-btn {
  margin-top: var(--sp-24);
}

/* ── Error Page ─────────────────────────────────────────────── */
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}
.error-page h2 { color: var(--lo-negative); margin-bottom: var(--sp-8); }

/* ── Alert / Banner ─────────────────────────────────────────── */
.lo-alert {
  padding: var(--sp-16) var(--sp-24);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: var(--sp-16);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
}

.lo-alert-info {
  background: var(--lo-fb-info-bg);
  border: 1px solid rgba(37,99,235,0.15);
  color: var(--lo-info);
}

.lo-alert-warn {
  background: var(--lo-fb-warning-bg);
  border: 1px solid rgba(245,158,11,0.15);
  color: #92400E;
}

.lo-alert-coral {
  background: var(--lo-bg-soft-coral);
  border: 1px solid var(--lo-border-warm);
  color: var(--lo-coral-active);
}

.lo-alert-success {
  background: var(--lo-fb-success-bg);
  border: 1px solid rgba(22,163,74,0.15);
  color: var(--lo-positive);
}

/* ── Health Pills ───────────────────────────────────────────── */
.lo-health-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.lo-health-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  background: var(--lo-bg-elevated);
  border: 1px solid var(--lo-border);
  color: var(--lo-content-secondary);
}

.lo-health-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}

.lo-health-dot-ok { background: var(--lo-positive); }
.lo-health-dot-warn { background: var(--lo-warning); }
.lo-health-dot-off { background: var(--lo-content-tertiary); }

/* ── Metric Row (for source cards) ──────────────────────────── */
.lo-metric-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(226,229,235,0.5);
}

.lo-metric-row:last-child { border-bottom: none; }
.lo-metric-label { color: var(--lo-content-secondary); }
.lo-metric-value { font-weight: 600; color: var(--lo-content-primary); }

.lo-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px var(--sp-16);
}

/* ── Coverage Bars ──────────────────────────────────────────── */
.lo-bar-row {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-8) 0;
}

.lo-bar-row + .lo-bar-row { border-top: 1px solid rgba(226,229,235,0.5); }
.lo-bar-name { width: 140px; font-size: 13px; color: var(--lo-content-secondary); flex-shrink: 0; font-weight: 500; }
.lo-bar-track { flex: 1; height: 6px; background: var(--lo-bg-neutral); border-radius: 3px; overflow: hidden; }
.lo-bar-fill { height: 100%; border-radius: 3px; }
.lo-bar-stat { width: 70px; font-size: 12px; font-weight: 600; text-align: right; flex-shrink: 0; color: var(--lo-content-secondary); }

/* ── Module Grid ────────────────────────────────────────────── */
.lo-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--sp-12);
}

.lo-module {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  background: var(--lo-bg-elevated);
  border: 1px solid var(--lo-border);
  border-radius: var(--radius-sm);
  padding: var(--sp-16) var(--sp-20);
  text-decoration: none;
  transition: all var(--motion-fast);
}

.lo-module:hover {
  border-color: var(--lo-coral);
  box-shadow: var(--elevation-low);
  text-decoration: none;
}

.lo-module-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  background: var(--lo-bg-neutral);
  color: var(--lo-content-secondary);
}
.lo-module-icon-coral { background: rgba(255,90,61,0.1); color: var(--lo-coral); }
.lo-module-icon-teal { background: rgba(20,184,166,0.1); color: var(--lo-teal); }
.lo-module-icon-amber { background: rgba(255,176,32,0.1); color: #B87A00; }
.lo-module-icon-raspberry { background: rgba(225,29,116,0.1); color: var(--lo-raspberry); }

.lo-module-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--lo-content-primary);
}

.lo-module-sub {
  font-size: 12px;
  color: var(--lo-content-tertiary);
  margin-top: 2px;
}

/* ── Source Card (2-col) ────────────────────────────────────── */
.lo-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--sp-16);
}

.lo-source-card {
  background: var(--lo-bg-elevated);
  border: 1px solid var(--lo-border);
  border-radius: var(--radius-md);
  padding: var(--sp-24);
  transition: box-shadow var(--motion-fast);
}

.lo-source-card:hover { box-shadow: var(--elevation-low); }

.lo-source-header {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin-bottom: var(--sp-16);
}

.lo-source-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lo-source-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--lo-content-primary);
}

.lo-source-status {
  font-size: 12px;
  color: var(--lo-content-tertiary);
  margin-top: 1px;
}

.lo-source-body {
  font-size: 13px;
  color: var(--lo-content-secondary);
  line-height: 1.6;
  margin-top: var(--sp-12);
}

.lo-source-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--lo-coral);
  font-weight: 600;
  margin-top: var(--sp-12);
}

.lo-source-link:hover { text-decoration: underline; }

/* ── Signal Tags ────────────────────────────────────────────── */
.lo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lo-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--lo-bg-neutral);
  color: var(--lo-content-secondary);
  border: 1px solid var(--lo-border);
}

/* ── Trust / Limitation ─────────────────────────────────────── */
.lo-trust-list {
  list-style: none;
  padding: 0; margin: 0;
}

.lo-trust-list li {
  font-size: 13px;
  color: var(--lo-content-secondary);
  line-height: 1.65;
  padding: 4px 0 4px var(--sp-16);
  position: relative;
}

.lo-trust-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--lo-content-tertiary);
}

/* ── Roadmap ────────────────────────────────────────────────── */
.lo-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--sp-12);
}

.lo-roadmap-item {
  background: var(--lo-bg-elevated);
  border: 1px solid var(--lo-border);
  border-radius: var(--radius-sm);
  padding: var(--sp-16) var(--sp-20);
  display: flex;
  gap: var(--sp-12);
}

.lo-roadmap-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.lo-roadmap-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--lo-content-primary);
}

.lo-roadmap-desc {
  font-size: 12px;
  color: var(--lo-content-secondary);
  margin-top: 4px;
  line-height: 1.5;
}

/* ── Footer ─────────────────────────────────────────────────── */
.lo-footer {
  text-align: center;
  padding: var(--sp-32) var(--sp-16) var(--sp-16);
  color: var(--lo-content-tertiary);
  font-size: 12px;
  border-top: 1px solid var(--lo-border);
  margin-top: var(--sp-48);
}

/* ── Dot Indicators (for coverage matrix) ───────────────────── */
.lo-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
}

.lo-dot-strong { background: var(--lo-positive); }
.lo-dot-active { background: var(--lo-coral); }
.lo-dot-partial { background: var(--lo-warning); }
.lo-dot-gap { background: var(--lo-border); }
.lo-dot-off { background: var(--lo-content-tertiary); }

/* ── Signal/Intel stats ────────────────────────────────────── */
.lo-stat-row {
  display: flex;
  gap: var(--sp-24);
  flex-wrap: wrap;
  padding-top: var(--sp-12);
  border-top: 1px solid var(--lo-border);
}

.lo-stat-item {
  font-size: 13px;
  color: var(--lo-content-secondary);
}

.lo-stat-item strong {
  color: var(--lo-content-primary);
}

/* ── Limitation Note ───────────────────────────────────────── */
.lo-note {
  font-size: 12px;
  color: var(--lo-content-tertiary);
  line-height: 1.55;
  padding: var(--sp-12) var(--sp-16);
  background: rgba(37,99,235,0.04);
  border: 1px solid rgba(37,99,235,0.08);
  border-radius: var(--radius-sm);
}

.lo-footnote {
  font-size: 11px;
  color: var(--lo-content-tertiary);
  margin-top: var(--sp-8);
}

/* ═══════════════════════════════════════════════════════════════
   Page-Specific Styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Apple Signals Page ───────────────────────────────────── */
.as-hero { padding: 1.5rem 0 1rem; }
.as-mark { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lo-coral); margin-bottom: 4px; }
.as-desc { font-size: 14px; color: var(--lo-content-secondary); max-width: 560px; line-height: 1.6; margin-top: 6px; }

.as-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-12); margin: var(--sp-24) 0; }
.as-kpi { background: var(--lo-bg-elevated); border: 1px solid var(--lo-border); border-radius: var(--radius-sm); padding: var(--sp-16) var(--sp-20); }
.as-kpi-val { font-size: 28px; font-weight: 700; color: var(--lo-content-primary); }
.as-kpi-lbl { font-size: 11px; color: var(--lo-content-tertiary); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }

.as-sec { margin-top: var(--sp-32); }
.as-sec-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lo-coral); margin-bottom: 4px; }
.as-sec-title { font-size: 18px; font-weight: 700; color: var(--lo-content-primary); letter-spacing: -0.01em; }
.as-sec-sub { font-size: 13px; color: var(--lo-content-tertiary); margin-top: 2px; }
.as-sec-head { margin-bottom: var(--sp-16); }

.as-card { background: var(--lo-bg-elevated); border: 1px solid var(--lo-border); border-radius: var(--radius-md); padding: var(--sp-20) var(--sp-24); }
.as-card p { font-size: 13px; color: var(--lo-content-secondary); line-height: 1.6; margin: 6px 0; }

.as-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-12) 0; }
.as-tag { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--lo-bg-warm); color: var(--lo-content-secondary); border: 1px solid var(--lo-border); }

.as-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--sp-16); }
.as-m { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid rgba(226,229,235,0.6); }
.as-m-l { color: var(--lo-content-secondary); }
.as-m-v { font-weight: 600; color: var(--lo-content-primary); }

.as-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-8); }
.as-cat { background: var(--lo-bg-elevated); border: 1px solid var(--lo-border); border-radius: var(--radius-sm); padding: var(--sp-12) var(--sp-16); }
.as-cat-name { font-size: 13px; font-weight: 600; color: var(--lo-content-primary); }
.as-cat-count { font-size: 11px; color: var(--lo-content-tertiary); margin-top: 2px; }

.as-note { font-size: 12px; color: var(--lo-content-tertiary); line-height: 1.55; margin-top: var(--sp-12); padding: var(--sp-12) var(--sp-16); background: rgba(37,99,235,0.04); border: 1px solid rgba(37,99,235,0.08); border-radius: var(--radius-sm); }

/* ── Coverage Page ──────────────────────────────────────────── */
.cv-hero { padding: 1.5rem 0 1rem; }
.cv-mark { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lo-coral); margin-bottom: 4px; }
.cv-desc { font-size: 14px; color: var(--lo-content-secondary); max-width: 620px; line-height: 1.6; margin-top: 6px; }

.cv-sec { margin-top: var(--sp-32); }
.cv-sec-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lo-coral); margin-bottom: 4px; }
.cv-sec-title { font-size: 18px; font-weight: 700; color: var(--lo-content-primary); letter-spacing: -0.01em; }
.cv-sec-sub { font-size: 13px; color: var(--lo-content-tertiary); margin-top: 2px; }
.cv-sec-head { margin-bottom: var(--sp-16); }

.cv-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-12); margin: var(--sp-24) 0; }
.cv-kpi { background: var(--lo-bg-elevated); border: 1px solid var(--lo-border); border-radius: var(--radius-sm); padding: var(--sp-16) var(--sp-20); }
.cv-kpi-val { font-size: 28px; font-weight: 700; color: var(--lo-content-primary); }
.cv-kpi-lbl { font-size: 11px; color: var(--lo-content-tertiary); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }
.cv-chip { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 3px; margin-top: 4px; }
.cv-chip-ok { background: rgba(22,163,74,0.1); color: var(--lo-positive); }
.cv-chip-warn { background: rgba(245,158,11,0.1); color: var(--lo-warning); }
.cv-chip-info { background: rgba(124,58,237,0.08); color: var(--purple); }
.cv-chip-off { background: rgba(152,161,178,0.1); color: var(--lo-content-secondary); }

.cv-card { background: var(--lo-bg-elevated); border: 1px solid var(--lo-border); border-radius: var(--radius-md); padding: var(--sp-20) var(--sp-24); }

.cv-bar-row { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-8) 0; }
.cv-bar-row + .cv-bar-row { border-top: 1px solid rgba(226,229,235,0.6); }
.cv-bar-name { width: 160px; font-size: 13px; color: var(--lo-content-secondary); flex-shrink: 0; }
.cv-bar-track { flex: 1; height: 6px; background: rgba(226,229,235,0.6); border-radius: 3px; overflow: hidden; }
.cv-bar-fill { height: 100%; border-radius: 3px; }
.cv-bar-stat { width: 90px; font-size: 12px; font-weight: 600; text-align: right; flex-shrink: 0; color: var(--lo-content-secondary); }

.cv-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.cv-matrix th { text-align: left; padding: var(--sp-8) var(--sp-12); color: var(--lo-content-tertiary); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--lo-border); position: sticky; top: 0; background: var(--lo-bg-elevated); }
.cv-matrix td { padding: var(--sp-8) var(--sp-12); border-bottom: 1px solid rgba(226,229,235,0.6); color: var(--lo-content-primary); }
.cv-matrix tr:hover td { background: rgba(255,90,61,0.03); }
.cv-matrix .cv-cat { font-weight: 600; color: var(--lo-content-primary); }
.cv-pri { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px; }
.cv-pri-0 { background: rgba(220,38,38,0.08); color: var(--lo-negative); }
.cv-pri-1 { background: rgba(245,158,11,0.1); color: var(--lo-warning); }
.cv-pri-2 { background: rgba(152,161,178,0.1); color: var(--lo-content-secondary); }
.cv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.cv-dot-strong { background: var(--lo-positive); }
.cv-dot-partial { background: var(--lo-warning); }
.cv-dot-gap { background: var(--lo-content-tertiary); }
.cv-dot-active { background: var(--lo-info); }

.cv-ch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-12); }
.cv-ch { background: var(--lo-bg-elevated); border: 1px solid var(--lo-border); border-radius: var(--radius-md); padding: var(--sp-20); }
.cv-ch-top { display: flex; align-items: center; gap: var(--sp-8); margin-bottom: var(--sp-8); }
.cv-ch-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cv-ch-name { font-weight: 600; font-size: 15px; color: var(--lo-content-primary); }
.cv-ch-status { font-size: 11px; color: var(--lo-content-tertiary); }
.cv-ch-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--sp-12); margin-bottom: var(--sp-12); }
.cv-sm { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px solid rgba(226,229,235,0.6); }
.cv-sm-l { color: var(--lo-content-secondary); }
.cv-sm-v { font-weight: 600; color: var(--lo-content-primary); }
.cv-ch-body { font-size: 12px; color: var(--lo-content-tertiary); line-height: 1.55; }
.cv-ch-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--lo-coral); font-weight: 600; margin-top: var(--sp-8); }
.cv-ch-link:hover { text-decoration: underline; }

.cv-kw-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-12); }
.cv-kw-batch { background: var(--lo-bg-elevated); border: 1px solid var(--lo-border); border-radius: var(--radius-sm); padding: var(--sp-12) var(--sp-16); }
.cv-kw-batch-name { font-size: 13px; font-weight: 600; color: var(--lo-content-primary); }
.cv-kw-batch-count { font-size: 22px; font-weight: 700; color: var(--lo-content-primary); margin-top: 2px; }
.cv-kw-batch-status { font-size: 10px; margin-top: 2px; }

.cv-note { font-size: 12px; color: var(--lo-content-tertiary); line-height: 1.55; margin-top: var(--sp-12); padding: var(--sp-12) var(--sp-16); background: rgba(37,99,235,0.04); border: 1px solid rgba(37,99,235,0.08); border-radius: var(--radius-sm); }

/* ── Native Events Page ─────────────────────────────────────── */
.ne-hero { margin-bottom: var(--sp-32); }
.ne-hero-title { font-size: 26px; font-weight: 800; color: var(--lo-content-primary); letter-spacing: -0.02em; }
.ne-hero-sub { font-size: 14px; color: var(--lo-content-secondary); margin-top: 4px; }

.nav-tabs { display: flex; gap: 4px; margin-bottom: var(--sp-24); border-bottom: 1px solid var(--lo-border); padding-bottom: 0; }
.nav-tab { padding: var(--sp-8) var(--sp-16); font-size: 13px; color: var(--lo-content-tertiary); text-decoration: none; border-bottom: 2px solid transparent; transition: all var(--motion-fast); }
.nav-tab:hover { color: var(--lo-content-primary); text-decoration: none; }
.nav-tab.active { color: var(--lo-coral); border-bottom-color: var(--lo-coral); font-weight: 600; }

.scope-note { font-size: 12px; color: var(--lo-content-tertiary); padding: var(--sp-8) var(--sp-12); border: 1px dashed rgba(226,229,235,0.5); border-radius: var(--radius-sm); margin-bottom: var(--sp-24); }

.ne-kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-12); margin-bottom: var(--sp-24); }
.ne-kpi { background: var(--lo-bg-elevated); border: 1px solid var(--lo-border); border-radius: var(--radius-sm); padding: var(--sp-16); transition: border-color var(--motion-fast); }
.ne-kpi:hover { border-color: rgba(255,90,61,0.2); }
.ne-kpi-val { font-size: 28px; font-weight: 700; color: var(--lo-content-primary); }
.ne-kpi-label { font-size: 11px; color: var(--lo-content-tertiary); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }

/* Native filter bar */
.ne-filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: center; margin-bottom: var(--sp-24); padding: var(--sp-12); background: var(--lo-bg-elevated); border: 1px solid var(--lo-border); border-radius: var(--radius-sm); }
.ne-filter-bar input[type="text"] { flex: 1; min-width: 180px; padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--lo-border); background: var(--lo-bg-neutral); color: var(--lo-content-primary); font-size: 13px; outline: none; font-family: inherit; }
.ne-filter-bar input[type="text"]:focus { border-color: var(--lo-coral); }
.ne-filter-bar input[type="text"]::placeholder { color: var(--lo-content-tertiary); }
.ne-filter-bar select { padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--lo-border); background: var(--lo-bg-neutral); color: var(--lo-content-primary); font-size: 12px; cursor: pointer; outline: none; font-family: inherit; }
.ne-filter-bar select:focus { border-color: var(--lo-coral); }
.ne-clear-btn { padding: 5px 10px; border-radius: var(--radius-sm); border: 1px solid rgba(220,38,38,0.3); background: rgba(220,38,38,0.08); color: var(--lo-negative); font-size: 12px; cursor: pointer; transition: all var(--motion-fast); font-family: inherit; }
.ne-clear-btn:hover { background: rgba(220,38,38,0.15); }
.ne-counter { font-size: 12px; color: var(--lo-content-tertiary); margin-left: auto; white-space: nowrap; }

/* Native event cards */
.ne-event-card { display: flex; gap: var(--sp-12); align-items: flex-start; padding: var(--sp-16); border-radius: var(--radius-sm); border: 1px solid var(--lo-border); background: var(--lo-bg-elevated); transition: border-color var(--motion-fast), background var(--motion-fast); cursor: pointer; }
.ne-event-card:hover { border-color: rgba(255,90,61,0.2); background: var(--lo-bg-warm); }
.ne-event-card + .ne-event-card { margin-top: var(--sp-8); }
.ne-event-status-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.ne-dot-new { background: var(--lo-positive); box-shadow: 0 0 6px rgba(22,163,74,0.4); }
.ne-dot-recurring { background: var(--lo-info); }
.ne-dot-expiring { background: var(--lo-warning); }
.ne-dot-ended { background: var(--lo-content-tertiary); }
.ne-dot-unknown { background: var(--lo-content-tertiary); }
.ne-event-body { flex: 1; min-width: 0; }
.ne-event-app { font-size: 13px; font-weight: 600; color: var(--lo-content-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ne-event-title { font-size: 12px; color: var(--lo-content-secondary); margin-top: 2px; }
.ne-event-meta { font-size: 11px; color: var(--lo-content-tertiary); margin-top: var(--sp-4); display: flex; gap: var(--sp-8); flex-wrap: wrap; align-items: center; }
.ne-event-timing { font-size: 11px; color: var(--lo-content-tertiary); margin-top: 4px; }

/* Native badge overrides */
.ne-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 600; white-space: nowrap; }
.ne-badge-green { background: rgba(22,163,74,0.12); color: var(--lo-positive); border: 1px solid rgba(22,163,74,0.25); }
.ne-badge-amber { background: rgba(245,158,11,0.12); color: var(--lo-warning); border: 1px solid rgba(245,158,11,0.25); }
.ne-badge-blue { background: rgba(37,99,235,0.12); color: var(--lo-info); border: 1px solid rgba(37,99,235,0.25); }
.ne-badge-purple { background: rgba(124,58,237,0.12); color: var(--purple); border: 1px solid rgba(124,58,237,0.25); }
.ne-badge-red { background: rgba(220,38,38,0.12); color: var(--lo-negative); border: 1px solid rgba(220,38,38,0.25); }
.ne-badge-muted { background: rgba(152,161,178,0.08); color: var(--lo-content-tertiary); border: 1px solid rgba(152,161,178,0.15); }
.ne-badge-cyan { background: rgba(20,184,166,0.12); color: var(--lo-teal); border: 1px solid rgba(20,184,166,0.25); }
.ne-badge-rose { background: rgba(225,29,116,0.12); color: var(--lo-raspberry); border: 1px solid rgba(225,29,116,0.25); }

/* Native drawer */
.ne-drawer-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(22,26,35,0.3); z-index: 999; }
.ne-drawer-overlay.open { display: block; }
.ne-drawer { position: fixed; top: 0; right: -460px; width: 440px; max-width: 90vw; height: 100vh; background: var(--lo-bg-elevated); border-left: 1px solid var(--lo-border); z-index: 1000; overflow-y: auto; transition: right 0.25s ease; padding: var(--sp-24); }
.ne-drawer.open { right: 0; }
.ne-drawer-close { position: absolute; top: 12px; right: 12px; background: none; border: none; color: var(--lo-content-tertiary); font-size: 20px; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); }
.ne-drawer-close:hover { color: var(--lo-content-primary); background: var(--lo-bg-warm); }
.ne-drawer h3 { font-size: 18px; font-weight: 700; color: var(--lo-content-primary); margin-bottom: var(--sp-8); padding-right: 2rem; }
.ne-drawer-app { font-size: 13px; color: var(--lo-content-secondary); margin-bottom: var(--sp-16); word-break: break-all; }
.ne-drawer-section { margin-bottom: var(--sp-20); }
.ne-drawer-label { font-size: 11px; color: var(--lo-content-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; font-weight: 500; }
.ne-drawer-value { font-size: 13px; color: var(--lo-content-primary); }
.ne-drawer-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* Native table */
.ne-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ne-tbl th { text-align: left; padding: var(--sp-8); color: var(--lo-content-tertiary); font-weight: 500; border-bottom: 1px solid var(--lo-border); white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; user-select: none; }
.ne-tbl th:hover { color: var(--lo-content-secondary); }
.ne-tbl th .sort-icon { font-size: 10px; margin-left: 4px; opacity: 0.4; }
.ne-tbl th.sorted .sort-icon { opacity: 1; color: var(--lo-coral); }
.ne-tbl td { padding: var(--sp-8); border-bottom: 1px solid rgba(226,229,235,0.5); color: var(--lo-content-primary); }
.ne-tbl tr { cursor: pointer; transition: background 0.1s; }
.ne-tbl tr:hover td { background: var(--lo-bg-warm); }

.ne-empty { text-align: center; padding: var(--sp-48) var(--sp-24); color: var(--lo-content-tertiary); }
.ne-empty-icon { font-size: 48px; opacity: 0.3; margin-bottom: var(--sp-8); }
.ne-empty-title { font-size: 16px; font-weight: 600; color: var(--lo-content-secondary); margin-bottom: 4px; }
.ne-empty-text { font-size: 13px; max-width: 480px; margin: 0 auto; line-height: 1.5; }

.ne-view-toggle { display: flex; gap: 0; border: 1px solid var(--lo-border); border-radius: var(--radius-sm); overflow: hidden; }
.ne-view-btn { padding: 5px 10px; font-size: 12px; border: none; background: transparent; color: var(--lo-content-tertiary); cursor: pointer; transition: all var(--motion-fast); font-family: inherit; }
.ne-view-btn.active { background: rgba(255,90,61,0.12); color: var(--lo-coral); }

/* ── Progress Bar ──────────────────────────────────────────── */
.lo-progress-track {
  height: 8px;
  background: var(--lo-bg-neutral);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.lo-progress-fill {
  height: 100%;
  background: var(--lo-coral);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.lo-progress-label {
  font-size: 12px;
  color: var(--lo-content-secondary);
}

/* ── Spinner ───────────────────────────────────────────────── */
.lo-spinner {
  width: 36px; height: 36px;
  border: 4px solid var(--lo-bg-neutral);
  border-top-color: var(--lo-coral);
  border-radius: 50%;
  animation: lo-spin 0.8s linear infinite;
  display: inline-block;
}

@keyframes lo-spin {
  to { transform: rotate(360deg); }
}

/* ── Tabs ──────────────────────────────────────────────────── */
.lo-tabs {
  display: flex;
  border-bottom: 1px solid var(--lo-border);
  gap: var(--sp-24);
  margin-bottom: var(--sp-24);
}

.lo-tab {
  padding: var(--sp-12) 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--lo-content-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--motion-fast);
  text-decoration: none;
}

.lo-tab:hover { color: var(--lo-content-primary); text-decoration: none; }

.lo-tab.active {
  color: var(--lo-coral);
  border-bottom-color: var(--lo-coral);
  font-weight: 600;
}

/* ── Chips (filter) ────────────────────────────────────────── */
.lo-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--lo-border);
  background: transparent;
  color: var(--lo-content-primary);
  cursor: pointer;
  transition: all var(--motion-fast);
}

.lo-chip.active {
  background: var(--lo-coral);
  color: #FFFFFF;
  border-color: var(--lo-coral);
}

/* ── Action Prompt ─────────────────────────────────────────── */
.lo-action-prompt {
  padding: var(--sp-24);
  border-radius: var(--radius-md);
  border: 1px solid var(--lo-border);
  background: var(--lo-bg-elevated);
  border-left: 4px solid var(--lo-border);
}

.lo-action-prompt-error { border-left-color: var(--lo-negative); }
.lo-action-prompt-warning { border-left-color: var(--lo-warning); }
.lo-action-prompt-success { border-left-color: var(--lo-positive); }
.lo-action-prompt-live { border-left-color: var(--lo-teal); }

.lo-action-prompt-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--sp-8);
}

.lo-action-prompt-desc {
  font-size: 14px;
  color: var(--lo-content-secondary);
  margin-bottom: var(--sp-16);
  line-height: 1.5;
}

.lo-action-prompt-actions {
  display: flex;
  gap: var(--sp-12);
}

/* ── Native Shared Components ──────────────────────────────── */
/* Shared across native.ejs, native-apps, native-coverage, native-discovery, native-comparison */

.hero { margin-bottom: 2rem; }
.hero-title { font-size: 1.6rem; font-weight: 800; color: var(--lo-content-primary); letter-spacing: -0.02em; }
.hero-sub { font-size: 0.85rem; color: var(--lo-content-secondary); margin-top: 0.25rem; }

.badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 500; }
.badge-green { background: rgba(22,163,74,0.12); color: var(--lo-positive); border: 1px solid rgba(22,163,74,0.25); }
.badge-amber { background: rgba(245,158,11,0.12); color: var(--lo-warning); border: 1px solid rgba(245,158,11,0.25); }
.badge-blue { background: rgba(37,99,235,0.12); color: var(--lo-info); border: 1px solid rgba(37,99,235,0.25); }
.badge-muted { background: rgba(152,161,178,0.08); color: var(--lo-content-tertiary); border: 1px solid rgba(152,161,178,0.15); }
.badge-purple { background: rgba(124,58,237,0.12); color: var(--purple); border: 1px solid rgba(124,58,237,0.25); }
.badge-red { background: rgba(220,38,38,0.12); color: var(--lo-negative); border: 1px solid rgba(220,38,38,0.25); }
.badge-cyan { background: rgba(20,184,166,0.12); color: var(--lo-teal); border: 1px solid rgba(20,184,166,0.25); }
.badge-emerald { background: rgba(22,163,74,0.12); color: var(--lo-positive); border: 1px solid rgba(22,163,74,0.25); }
.badge-rose { background: rgba(225,29,116,0.12); color: var(--lo-raspberry); border: 1px solid rgba(225,29,116,0.25); }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; margin-bottom: 1.5rem; }
.kpi { background: var(--card-bg, var(--lo-bg-elevated)); border: 1px solid var(--border, var(--lo-border)); border-radius: 0.5rem; padding: 0.85rem; transition: border-color 0.15s; }
.kpi:hover { border-color: rgba(255,90,61,0.2); }
.kpi-val { font-size: 1.4rem; font-weight: 700; color: var(--lo-content-primary); }
.kpi-label { font-size: 0.68rem; color: var(--lo-content-tertiary); margin-top: 0.15rem; text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-accent { color: var(--lo-positive); }
.kpi-warn { color: var(--lo-warning); }
.kpi-danger { color: var(--lo-negative); }

.section { margin-bottom: 2rem; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.section-title { font-size: 1rem; font-weight: 700; color: var(--lo-content-primary); }
.section-sub { font-size: 0.72rem; color: var(--lo-content-tertiary); }
.section-action { font-size: 0.72rem; color: var(--lo-info); text-decoration: none; }
.section-action:hover { text-decoration: underline; }

.card { background: var(--card-bg, var(--lo-bg-elevated)); border: 1px solid var(--border, var(--lo-border)); border-radius: 0.5rem; padding: 1rem; }
.card + .card { margin-top: 0.5rem; }

.tbl { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.tbl th { text-align: left; padding: 0.45rem 0.5rem; color: var(--lo-content-tertiary); font-weight: 500; border-bottom: 1px solid var(--border, var(--lo-border)); white-space: nowrap; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; user-select: none; }
.tbl th:hover { color: var(--lo-content-secondary); }
.tbl td { padding: 0.45rem 0.5rem; border-bottom: 1px solid rgba(226,229,235,0.5); color: var(--lo-content-primary); }
.tbl tr { cursor: pointer; transition: background 0.1s; }
.tbl tr:hover td { background: var(--lo-bg-warm); }

.empty { text-align: center; padding: 2.5rem 1.5rem; color: var(--lo-content-tertiary); }
.empty-icon { font-size: 2.5rem; opacity: 0.3; margin-bottom: 0.5rem; }
.empty-title { font-size: 0.9rem; font-weight: 600; color: var(--lo-content-secondary); margin-bottom: 0.25rem; }
.empty-text { font-size: 0.78rem; max-width: 480px; margin: 0 auto; line-height: 1.5; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1.5rem; padding: 0.75rem; background: var(--card-bg, var(--lo-bg-elevated)); border: 1px solid var(--border, var(--lo-border)); border-radius: 0.5rem; }
.filter-bar input[type="text"] { flex: 1; min-width: 180px; padding: 0.4rem 0.7rem; border-radius: 0.35rem; border: 1px solid var(--border, var(--lo-border)); background: var(--lo-bg-neutral); color: var(--lo-content-primary); font-size: 0.75rem; outline: none; }
.filter-bar input[type="text"]:focus { border-color: var(--lo-coral); }
.filter-bar input[type="text"]::placeholder { color: var(--lo-content-tertiary); }
.filter-bar select { padding: 0.4rem 0.5rem; border-radius: 0.35rem; border: 1px solid var(--border, var(--lo-border)); background: var(--lo-bg-neutral); color: var(--lo-content-primary); font-size: 0.72rem; cursor: pointer; outline: none; }
.filter-bar select:focus { border-color: var(--lo-coral); }
.clear-btn { padding: 0.35rem 0.6rem; border-radius: 0.35rem; border: 1px solid rgba(220,38,38,0.3); background: rgba(220,38,38,0.08); color: var(--lo-negative); font-size: 0.7rem; cursor: pointer; transition: all 0.15s; }
.clear-btn:hover { background: rgba(220,38,38,0.15); }
.counter { font-size: 0.7rem; color: var(--lo-content-tertiary); margin-left: auto; white-space: nowrap; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6rem; }
.cat-card { background: var(--card-bg, var(--lo-bg-elevated)); border: 1px solid var(--border, var(--lo-border)); border-radius: 0.5rem; padding: 0.85rem; transition: border-color 0.15s; }
.cat-card:hover { border-color: rgba(255,90,61,0.2); }
.cat-card-name { font-size: 0.8rem; font-weight: 600; color: var(--lo-content-primary); margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.3rem; }
.cat-card-stats { font-size: 0.7rem; color: var(--lo-content-secondary); display: flex; flex-direction: column; gap: 0.15rem; }
.cat-card-stat { display: flex; justify-content: space-between; }
.cat-stat { display: flex; justify-content: space-between; }

/* ── Native Radar Page ─────────────────────────────────────── */
.event-card { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid var(--border, var(--lo-border)); background: var(--card-bg, var(--lo-bg-elevated)); }
.event-card + .event-card { margin-top: 0.5rem; }
.event-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lo-positive); margin-top: 0.35rem; flex-shrink: 0; }
.event-dot-inactive { background: var(--lo-content-tertiary); }
.event-body { flex: 1; min-width: 0; }
.event-app { font-size: 0.8rem; font-weight: 600; color: var(--lo-content-primary); }
.event-title { font-size: 0.75rem; color: var(--lo-content-secondary); margin-top: 0.1rem; }
.event-meta { font-size: 0.68rem; color: var(--lo-content-tertiary); margin-top: 0.25rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }

.score-bar { height: 6px; background: var(--lo-bg-neutral); border-radius: 3px; overflow: hidden; }
.score-fill { height: 100%; border-radius: 3px; }
.score-green { background: linear-gradient(90deg, var(--lo-positive), var(--lo-positive)); }
.score-amber { background: linear-gradient(90deg, var(--lo-warning), var(--lo-warning)); }
.score-red { background: linear-gradient(90deg, var(--lo-negative), var(--lo-negative)); }

.cov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.5rem; }
.cov-item { display: flex; justify-content: space-between; padding: 0.3rem 0; }
.cov-label { font-size: 0.72rem; color: var(--lo-content-tertiary); }
.cov-val { font-size: 0.75rem; font-weight: 600; color: var(--lo-content-primary); }

.gaps-list { margin-top: 0.5rem; padding-left: 1.2rem; }
.gaps-list li { font-size: 0.72rem; color: var(--lo-content-secondary); margin-bottom: 0.2rem; line-height: 1.4; }

/* ── Native Apps Page ──────────────────────────────────────── */
.ranking-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.ranking-card { background: var(--card-bg, var(--lo-bg-elevated)); border: 1px solid var(--border, var(--lo-border)); border-radius: 0.5rem; padding: 1rem; }
.ranking-card h3 { font-size: 0.85rem; font-weight: 700; color: var(--lo-content-primary); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.4rem; }
.ranking-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(226,229,235,0.5); font-size: 0.75rem; }
.ranking-item:last-child { border-bottom: none; }
.ranking-pos { width: 20px; font-weight: 700; color: var(--lo-content-tertiary); text-align: center; font-size: 0.7rem; }
.ranking-pos.top3 { color: var(--lo-warning); }
.ranking-name { flex: 1; color: var(--lo-content-primary); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-stat { font-weight: 600; font-size: 0.72rem; white-space: nowrap; }

.crash-bar { display: inline-block; height: 6px; border-radius: 3px; min-width: 4px; }
.crash-low { background: var(--lo-positive); }
.crash-med { background: var(--lo-warning); }
.crash-high { background: var(--lo-negative); }

.drawer-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(22,26,35,0.3); z-index: 999; }
.drawer-overlay.open { display: block; }
.drawer { position: fixed; top: 0; right: -480px; width: 460px; max-width: 90vw; height: 100vh; background: var(--card-bg, var(--lo-bg-elevated)); border-left: 1px solid var(--border, var(--lo-border)); z-index: 1000; overflow-y: auto; transition: right 0.25s ease; padding: 1.5rem; }
.drawer.open { right: 0; }
.drawer-close { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; color: var(--lo-content-tertiary); font-size: 1.2rem; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 0.25rem; }
.drawer-close:hover { color: var(--lo-content-primary); background: var(--lo-bg-warm); }
.drawer h3 { font-size: 1.1rem; font-weight: 700; color: var(--lo-content-primary); margin-bottom: 0.25rem; padding-right: 2rem; }
.drawer-appid { font-size: 0.72rem; color: var(--lo-content-tertiary); margin-bottom: 0.75rem; word-break: break-all; }
.drawer-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 1rem; }
.drawer-section { margin-bottom: 1rem; }
.drawer-label { font-size: 0.68rem; color: var(--lo-content-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem; font-weight: 500; }
.drawer-value { font-size: 0.8rem; color: var(--lo-content-primary); }
.drawer-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.drawer-stat { background: var(--lo-bg-neutral); border: 1px solid var(--border, var(--lo-border)); border-radius: 0.35rem; padding: 0.5rem; }
.drawer-stat-val { font-size: 1.1rem; font-weight: 700; color: var(--lo-content-primary); }
.drawer-stat-label { font-size: 0.65rem; color: var(--lo-content-tertiary); text-transform: uppercase; }
.drawer-event { padding: 0.4rem 0; border-bottom: 1px solid rgba(226,229,235,0.5); font-size: 0.75rem; }
.drawer-event:last-child { border-bottom: none; }
.drawer-event-title { color: var(--lo-content-primary); }
.drawer-event-meta { color: var(--lo-content-tertiary); font-size: 0.68rem; margin-top: 0.1rem; }

/* ── Native Coverage Page ──────────────────────────────────── */
.shard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; margin-bottom: 2rem; }
.shard-card { background: var(--card-bg, var(--lo-bg-elevated)); border: 1px solid var(--border, var(--lo-border)); border-radius: 0.5rem; padding: 1rem; transition: border-color 0.15s; position: relative; }
.shard-card:hover { border-color: rgba(255,90,61,0.2); }
.shard-card.shard-off { border-style: dashed; opacity: 0.6; }
.shard-name { font-size: 0.85rem; font-weight: 700; color: var(--lo-content-primary); margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.4rem; }
.shard-detail { font-size: 0.7rem; color: var(--lo-content-secondary); margin-bottom: 0.15rem; display: flex; justify-content: space-between; }
.shard-status { position: absolute; top: 0.75rem; right: 0.75rem; }

.kw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6rem; }
.kw-card { background: var(--card-bg, var(--lo-bg-elevated)); border: 1px solid var(--border, var(--lo-border)); border-radius: 0.5rem; padding: 0.85rem; transition: border-color 0.15s; }
.kw-card:hover { border-color: rgba(255,90,61,0.2); }
.kw-title { font-size: 0.72rem; color: var(--lo-content-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
.kw-val { font-size: 1.3rem; font-weight: 700; color: var(--lo-content-primary); }
.kw-sub { font-size: 0.68rem; color: var(--lo-content-tertiary); margin-top: 0.2rem; }

.health-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; }
.health-item { background: var(--card-bg, var(--lo-bg-elevated)); border: 1px solid var(--border, var(--lo-border)); border-radius: 0.35rem; padding: 0.6rem 0.75rem; display: flex; justify-content: space-between; align-items: center; }
.health-label { font-size: 0.7rem; color: var(--lo-content-secondary); }
.health-val { font-size: 0.72rem; font-weight: 600; }

.expansion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6rem; }
.expansion-card { background: var(--card-bg, var(--lo-bg-elevated)); border: 1px solid var(--border, var(--lo-border)); border-radius: 0.5rem; padding: 0.85rem; }
.expansion-title { font-size: 0.72rem; color: var(--lo-content-tertiary); text-transform: uppercase; margin-bottom: 0.3rem; }
.expansion-val { font-size: 0.85rem; font-weight: 600; color: var(--lo-content-primary); }
.expansion-sub { font-size: 0.68rem; color: var(--lo-content-tertiary); margin-top: 0.2rem; }

/* ── Native Discovery Page ─────────────────────────────────── */
.rec-tabs { display: flex; gap: 0.25rem; margin-bottom: 1rem; flex-wrap: wrap; }
.rec-tab { padding: 0.4rem 0.8rem; font-size: 0.72rem; border-radius: 9999px; border: 1px solid var(--border, var(--lo-border)); background: transparent; color: var(--lo-content-secondary); cursor: pointer; transition: all 0.15s; }
.rec-tab:hover { color: var(--lo-content-primary); border-color: rgba(255,90,61,0.2); }
.rec-tab.active { background: rgba(255,90,61,0.12); color: var(--lo-coral); border-color: rgba(255,90,61,0.4); }

.cat-bar-chart { display: flex; flex-direction: column; gap: 0.35rem; }
.cat-bar-row { display: flex; align-items: center; gap: 0.5rem; }
.cat-bar-label { width: 100px; font-size: 0.72rem; color: var(--lo-content-secondary); text-align: right; flex-shrink: 0; }
.cat-bar-track { flex: 1; height: 18px; background: var(--lo-bg-warm); border-radius: 3px; overflow: hidden; }
.cat-bar-fill { height: 100%; border-radius: 3px; min-width: 2px; }
.cat-bar-count { width: 60px; font-size: 0.68rem; color: var(--lo-content-tertiary); flex-shrink: 0; }

.shard-rec { background: var(--card-bg, var(--lo-bg-elevated)); border: 1px dashed rgba(255,90,61,0.2); border-radius: 0.5rem; padding: 1rem; margin-top: 1rem; }
.shard-rec-title { font-size: 0.85rem; font-weight: 600; color: var(--lo-content-primary); margin-bottom: 0.5rem; }

.scoring-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.5rem; }
.scoring-item { padding: 0.5rem 0.75rem; border: 1px solid var(--border, var(--lo-border)); border-radius: 0.35rem; }
.scoring-factor { font-size: 0.75rem; font-weight: 600; color: var(--lo-content-primary); }
.scoring-desc { font-size: 0.68rem; color: var(--lo-content-secondary); margin-top: 0.15rem; }

/* ── Native Comparison Page ────────────────────────────────── */
.insight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
.insight-card { background: var(--card-bg, var(--lo-bg-elevated)); border: 1px solid var(--border, var(--lo-border)); border-radius: 0.5rem; padding: 1rem; }
.insight-count { font-size: 1.8rem; font-weight: 800; color: var(--lo-content-primary); }
.insight-msg { font-size: 0.75rem; color: var(--lo-content-secondary); margin-top: 0.25rem; line-height: 1.4; }
.insight-type { font-size: 0.65rem; color: var(--lo-content-tertiary); margin-top: 0.4rem; text-transform: uppercase; letter-spacing: 0.04em; }

.status-both { color: var(--lo-positive); }
.status-native_only { color: var(--lo-info); }
.status-web_only { color: var(--purple); }
.status-mismatch { color: var(--lo-warning); }

/* ── Native Pages Responsive ──────────────────────────────── */
@media (max-width: 768px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .cov-grid { grid-template-columns: 1fr; }
  .ranking-grid { grid-template-columns: 1fr; }
  .filter-bar { flex-direction: column; }
  .filter-bar input[type="text"] { min-width: 100%; }
  .drawer { width: 100vw; max-width: 100vw; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .shard-grid { grid-template-columns: 1fr; }
  .kw-grid { grid-template-columns: 1fr 1fr; }
  .scoring-grid { grid-template-columns: 1fr; }
  .insight-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .lo-source-grid { grid-template-columns: 1fr; }
  .lo-module-grid { grid-template-columns: repeat(2, 1fr); }
  .lo-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .sidebar { display: none; }
  .sidebar.mobile-open { display: flex; width: 280px; z-index: 200; }
  .sidebar-close { display: flex; }
  .sidebar-overlay.mobile-open { display: block; }
  .mobile-nav-toggle { display: flex; }
  .main { margin-left: 0; width: 100vw; max-width: 100vw; }
  .topbar { padding: var(--sp-20) var(--sp-24) 0; padding-left: 60px; }
  .topbar h2 { font-size: 24px; }
  .content { padding: var(--sp-16) var(--sp-24); max-width: 100%; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .cards-grid { grid-template-columns: 1fr; }
  .lo-module-grid { grid-template-columns: 1fr; }
  .lo-roadmap-grid { grid-template-columns: 1fr; }
  .lo-grid-3 { grid-template-columns: 1fr; }
  .lo-grid-2 { grid-template-columns: 1fr; }
  .lo-hero-title { font-size: 28px; }
  .lo-cover { padding: var(--sp-32) var(--sp-24); margin: calc(-1 * var(--sp-20)) calc(-1 * var(--sp-24)) var(--sp-24); }
  .lo-cover h1 { font-size: 32px; }

  /* Apple page */
  .as-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .as-cat-grid { grid-template-columns: 1fr; }

  /* Coverage page */
  .cv-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .cv-ch-grid { grid-template-columns: 1fr; }
  .cv-kw-grid { grid-template-columns: repeat(3, 1fr); }
  .cv-bar-name { width: 100px; font-size: 12px; }

  /* Native events */
  .ne-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .ne-filter-bar { flex-direction: column; }
  .ne-filter-bar input[type="text"] { min-width: 100%; }
  .ne-drawer { width: 100vw; max-width: 100vw; }
}

@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .cv-kpi-grid { grid-template-columns: 1fr; }
  .cv-kw-grid { grid-template-columns: repeat(2, 1fr); }
  .as-kpi-grid { grid-template-columns: 1fr; }
}

/* ── Accessibility ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

*:focus-visible {
  outline: 2px solid var(--lo-coral);
  outline-offset: 2px;
}