/* ========================================================
   SafeMeAI - theme system
   Light is the default. Dark is opt-in via the header toggle
   (html[data-theme="dark"], set by js/theme-init.js before paint).
   All colours below are tokens; the rest of this file only uses them.
   ======================================================== */
:root {
  color-scheme: light;
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* surfaces */
  --bg-deep: #f3f5f9;
  --bg-surface: #eaeff6;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --panel-a: #ffffff;
  --panel-b: #f8fafc;
  --panel-c: #f8fafc;
  --surface-solid: #ffffff;
  --input-bg: #ffffff;
  --code-bg: #f1f5f9;
  --footer-bg: #e9eef5;
  --fill-1: rgba(15, 23, 42, 0.04);
  --fill-2: rgba(15, 23, 42, 0.07);
  --fill-3: rgba(15, 23, 42, 0.10);
  --fill-dark: rgba(15, 23, 42, 0.05);
  --border-glass: #d3dae6;
  --border-glass-accent: rgba(29, 78, 216, 0.4);
  --border-input: #64748b;
  --line-soft: rgba(15, 23, 42, 0.09);

  /* text */
  --text-main: #1f2937;
  --text-strong: #111827;
  --text-body: #1f2937;
  --text-soft: #374151;
  --text-muted: #475569;
  --text-dim: #5b6678;
  --link: #1d4ed8;
  --focus: #1d4ed8;

  /* semantic text: green = verified/safe, amber = unverified/careful, red = dangerous */
  --c-red-text: #991b1b;
  --sos-text: #7f1d1d;
  --c-amber-text: #92400e;
  --c-green-text: #166534;
  --c-blue-text: #1e40af;
  --c-purple-text: #5b21b6;

  /* accents / fills */
  --accent-cyan: #0369a1;
  --accent-blue: #1d4ed8;
  --accent-purple: #6d28d9;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #e11d48;
  --accent-danger: #dc2626;
  --sos-border: #fecaca;

  --grad-primary: #1d4ed8;
  --grad-hero: #1d4ed8;
  --grad-alt: #6d28d9;
  --grad-green: #047857;
  --grad-bar: #2563eb;
  --hero-title-grad: linear-gradient(135deg, #0f2a5c 30%, #1d4ed8 100%);
  --body-bg-image: none;

  --disabled-bg: #e5e7eb;
  --disabled-fg: #4b5563;

  /* subtle elevation instead of glow */
  --glow: 0 1px 2px rgba(15, 23, 42, 0.18);
  --glow-focus: 0 0 0 3px rgba(29, 78, 216, 0.25);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 14px rgba(15, 23, 42, 0.06);
  --shadow-glow-cyan: none;
  --shadow-glow-rose: none;
  --shadow-glow-emerald: none;
}

:root[data-theme="dark"], .phone-frame {
  color-scheme: dark;
  --bg-deep: #070a13;
  --bg-surface: #0c1222;
  --bg-card: rgba(15, 23, 42, 0.75);
  --bg-card-hover: rgba(22, 33, 58, 0.9);
  --panel-a: rgba(15, 23, 42, 0.92);
  --panel-b: rgba(10, 15, 29, 0.78);
  --panel-c: rgba(15, 23, 42, 0.55);
  --surface-solid: #0f172a;
  --input-bg: rgba(10, 15, 29, 0.8);
  --code-bg: #050811;
  --footer-bg: #04060d;
  --fill-1: rgba(255, 255, 255, 0.04);
  --fill-2: rgba(255, 255, 255, 0.08);
  --fill-3: rgba(255, 255, 255, 0.13);
  --fill-dark: rgba(0, 0, 0, 0.4);
  --border-glass: rgba(255, 255, 255, 0.12);
  --border-glass-accent: rgba(56, 189, 248, 0.35);
  --border-input: #64748b;
  --line-soft: rgba(255, 255, 255, 0.06);

  --text-main: #f8fafc;
  --text-strong: #ffffff;
  --text-body: #e2e8f0;
  --text-soft: #cbd5e1;
  --text-muted: #a3b1c6;
  --text-dim: #8fa0b8;
  --link: #7dd3fc;
  --focus: #38bdf8;

  --c-red-text: #fca5a5;
  --sos-text: #fecaca;
  --c-amber-text: #fcd34d;
  --c-green-text: #6ee7b7;
  --c-blue-text: #7dd3fc;
  --c-purple-text: #c4b5fd;

  --accent-cyan: #22d3ee;
  --accent-blue: #3b82f6;
  --accent-purple: #8b5cf6;
  --accent-rose: #f43f5e;

  --grad-primary: linear-gradient(135deg, #0369a1, #1d4ed8);
  --grad-hero: linear-gradient(135deg, #0369a1, #1d4ed8);
  --grad-alt: linear-gradient(135deg, #6d28d9, #1d4ed8);
  --grad-green: linear-gradient(135deg, #047857, #065f46);
  --grad-bar: linear-gradient(90deg, #06b6d4, #3b82f6);
  --hero-title-grad: linear-gradient(135deg, #ffffff 40%, #22d3ee 85%, #3b82f6 100%);
  --body-bg-image:
    radial-gradient(circle at 15% 15%, rgba(14, 165, 233, 0.09) 0%, transparent 40%),
    radial-gradient(circle at 85% 25%, rgba(139, 92, 246, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 50% 85%, rgba(16, 185, 129, 0.07) 0%, transparent 50%);

  --disabled-bg: #334155;
  --disabled-fg: #cbd5e1;

  /* dark keeps the original glow look: unset so each rule's own fallback applies */
  --glow: initial;
  --glow-focus: initial;
  --shadow-card: initial;
  --shadow-glow-cyan: 0 0 25px rgba(6, 182, 212, 0.2);
  --shadow-glow-rose: 0 0 25px rgba(239, 68, 68, 0.25);
  --shadow-glow-emerald: 0 0 25px rgba(16, 185, 129, 0.2);
}
.phone-frame { --accent-cyan: #06b6d4; }

/* ========================================================
   SafeMeAI Cyber Defense Platform — Ultra-Premium Dark Theme
   ======================================================== */


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

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-deep);
  background-image: 
    var(--body-bg-image);
  background-attachment: fixed;
  color: var(--text-main);
  font-family: var(--font-sans);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ========================================================
   HEADER & CLOUD BADGES
   ======================================================== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 2rem;
  background: var(--panel-b);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-glass);
  position: sticky;
  top: 0;
  z-index: 1000;
  gap: 1rem;
}

.header-left .logo-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.shield-icon {
  font-size: 2rem;
  filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.5));
}

.brand-name {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand-name .highlight {
  color: var(--accent-cyan);
}

.enterprise-tag {
  font-size: 0.7rem;
  font-weight: 800;
  background: var(--grad-primary);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  color: #fff;
  vertical-align: middle;
  margin-left: 0.3rem;
  letter-spacing: 0.05em;
}

.sub-brand {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cloud-stack-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--panel-c);
  border: 1px solid var(--border-glass);
  padding: 0.35rem 0.85rem;
  border-radius: 30px;
}

.stack-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

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

.pulse-green { background: var(--accent-emerald); box-shadow: var(--glow, 0 0 8px var(--accent-emerald)); }
.pulse-blue { background: var(--accent-blue); box-shadow: var(--glow, 0 0 8px var(--accent-blue)); }
.pulse-purple { background: var(--accent-purple); box-shadow: var(--glow, 0 0 8px var(--accent-purple)); }
.pulse-cyan { background: var(--accent-cyan); box-shadow: var(--glow, 0 0 8px var(--accent-cyan)); }

.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-emergency-helpline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: var(--c-red-text);
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  font-size: 0.82rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-emergency-helpline:hover {
  background: rgba(239, 68, 68, 0.3);
  transform: translateY(-1px);
}

.btn-app-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--grad-primary);
  color: #fff;
  padding: 0.5rem 0.95rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--glow, 0 0 15px rgba(6, 182, 212, 0.3));
  transition: all 0.2s ease;
}

.btn-app-link:hover {
  box-shadow: var(--glow, 0 0 25px rgba(6, 182, 212, 0.6));
  transform: translateY(-1px);
}

/* ========================================================
   NAVIGATION TABS
   ======================================================== */
.nav-tabs-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 2rem;
  background: var(--panel-a);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid var(--border-glass);
  position: sticky;
  top: 61px;
  z-index: 900;
  overflow-x: auto;
}

.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.nav-tab:hover {
  color: var(--text-main);
  background: var(--fill-1);
}

.nav-tab.active {
  color: var(--text-strong);
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow: var(--glow, 0 0 15px rgba(6, 182, 212, 0.15));
}

.badge-pulse {
  background: var(--accent-emerald);
  color: #000;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.badge-alert {
  background: var(--accent-danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  animation: pulseAlert 1.5s infinite;
}

@keyframes pulseAlert {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

.badge-tech {
  background: rgba(139, 92, 246, 0.3);
  color: var(--c-purple-text);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

/* ========================================================
   HERO BANNER
   ======================================================== */
.hero-section {
  padding: 3rem 2rem 2rem 2rem;
  max-width: 1300px;
  margin: 0 auto;
}

.hero-content {
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
}

.hero-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.hero-tag-badge {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: var(--c-blue-text);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
}

.hero-status-pill {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: var(--c-green-text);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
}

.hero-title {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.03em;
  background: var(--hero-title-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

.hero-subtitle strong {
  color: var(--text-body);
}

.hero-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--grad-hero);
  color: #fff;
  padding: 0.85rem 1.75rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--glow, 0 0 30px rgba(37, 99, 235, 0.4));
  transition: all 0.25s ease;
}

.btn-hero-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow, 0 0 40px rgba(37, 99, 235, 0.7));
}

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: var(--c-green-text);
  padding: 0.85rem 1.5rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-hero-secondary:hover {
  background: rgba(16, 185, 129, 0.25);
  transform: translateY(-2px);
}

.btn-hero-panic {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: var(--c-red-text);
  padding: 0.85rem 1.5rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-hero-panic:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: translateY(-2px);
}

/* LIVE NATIONAL METRICS BAR */
.hero-metrics-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  background: var(--panel-b);
  border: 1px solid var(--border-glass);
  padding: 1.25rem;
  border-radius: 14px;
}

.metric-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.metric-num {
  font-size: 1.6rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-strong);
}

.metric-lbl {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ========================================================
   MAIN CONTENT & TAB MANAGEMENT
   ======================================================== */
.main-content-area {
  max-width: 1300px;
  margin: 0 auto;
  padding: 1rem 2rem 3rem 2rem;
}

.tab-content-panel {
  display: none;
}

.tab-content-panel.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-lead-header {
  margin-bottom: 1.5rem;
}

.section-kicker {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent-cyan);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.emergency-kicker {
  color: var(--accent-danger);
}

.section-lead-header h2 {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin: 0.2rem 0 0.4rem 0;
}

.section-lead-header p {
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 850px;
}

/* ========================================================
   GLASS BOX UTILITY
   ======================================================== */
.glass-box {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: var(--glow, 0 10px 30px rgba(0, 0, 0, 0.4));
}

.box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.box-header h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-strong);
}

/* ========================================================
   TAB 1: SCAM CHECKER ENGINE
   ======================================================== */
.specimens-bar {
  margin-bottom: 1.25rem;
}

.specimens-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.specimen-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.specimen-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--panel-b);
  border: 1px solid var(--border-glass);
  color: var(--text-main);
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.specimen-chip:hover {
  transform: translateY(-2px);
  border-color: var(--border-glass-accent);
}

.chip-critical { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.1); }
.chip-danger { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.1); }
.chip-warning { border-color: rgba(234, 179, 8, 0.4); background: rgba(234, 179, 8, 0.1); }
.chip-safe { border-color: rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0.1); }

.checker-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 1.5rem;
}

.input-box textarea {
  width: 100%;
  background: var(--panel-b);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  padding: 1rem;
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.5;
  resize: vertical;
  margin-bottom: 1rem;
  transition: border 0.2s ease;
}

.input-box textarea:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: var(--glow-focus, 0 0 15px rgba(6, 182, 212, 0.2));
}

.btn-text-clear {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 0.8rem;
  cursor: pointer;
}

.btn-text-clear:hover {
  color: var(--text-main);
}

.btn-primary-glow {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--grad-primary);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.85rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: var(--glow, 0 0 20px rgba(6, 182, 212, 0.35));
  transition: all 0.2s ease;
}

.btn-primary-glow:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow, 0 0 30px rgba(6, 182, 212, 0.6));
}

.tip-box {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem;
  background: var(--fill-1);
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* VERDICT CARD */
.status-badge {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  text-transform: uppercase;
  background: var(--fill-2);
  color: var(--text-muted);
}

.badge-critical { background: rgba(239, 68, 68, 0.25); color: var(--c-red-text); border: 1px solid rgba(239, 68, 68, 0.5); }
.badge-danger { background: rgba(245, 158, 11, 0.25); color: var(--c-amber-text); border: 1px solid rgba(245, 158, 11, 0.5); }
.badge-safe { background: rgba(16, 185, 129, 0.25); color: var(--c-green-text); border: 1px solid rgba(16, 185, 129, 0.5); }

.verdict-summary-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-glass);
}

.gauge-container {
  flex-shrink: 0;
}

.gauge-ring {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 4px solid var(--border-glass);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--panel-a);
  transition: all 0.3s ease;
}

.gauge-ring.critical { border-color: var(--accent-danger); box-shadow: var(--shadow-glow-rose); }
.gauge-ring.high { border-color: var(--accent-amber); }
.gauge-ring.safe { border-color: var(--accent-emerald); box-shadow: var(--shadow-glow-emerald); }

.gauge-value {
  font-size: 1.5rem;
  font-weight: 900;
  font-family: var(--font-mono);
  color: var(--text-strong);
  line-height: 1;
}

.gauge-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
}

.verdict-headline-col h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-strong);
  margin-bottom: 0.3rem;
}

.verdict-headline-col p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.scam-type-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.sub-heading {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.red-flags-list {
  list-style: none;
  margin-bottom: 1.25rem;
}

.red-flags-list li {
  font-size: 0.88rem;
  color: var(--text-soft);
  padding: 0.4rem 0.6rem;
  background: rgba(239, 68, 68, 0.08);
  border-left: 3px solid var(--accent-danger);
  border-radius: 0 4px 4px 0;
  margin-bottom: 0.4rem;
}

.red-flags-list li.empty-state {
  border-left-color: var(--text-dim);
  background: var(--fill-1);
  color: var(--text-dim);
}

.action-card {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 0.85rem;
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-body);
  margin-bottom: 1rem;
}

.action-card ul {
  padding-left: 1.2rem;
  margin-top: 0.4rem;
}

.action-card li {
  margin-bottom: 0.3rem;
}

.legal-badge {
  font-size: 0.78rem;
  color: var(--text-muted);
  background: var(--fill-1);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

/* ========================================================
   TAB 2: DIGITAL ARREST EMERGENCY RAPID SCREENER
   ======================================================== */
.panic-container {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.5rem;
}

.panic-questions-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.panic-q-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-glass);
}

.panic-q-item .q-text strong {
  font-size: 0.95rem;
  color: var(--text-strong);
  display: block;
  margin-bottom: 0.25rem;
}

.panic-q-item .q-text p {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.q-toggle-group {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.btn-toggle {
  background: var(--panel-b);
  border: 1px solid var(--border-glass);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45rem 0.95rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-toggle.active {
  background: var(--accent-danger);
  border-color: var(--accent-danger);
  color: #fff;
  box-shadow: var(--glow, 0 0 15px rgba(239, 68, 68, 0.4));
}

.btn-primary-panic {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 800;
  padding: 0.85rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: var(--glow, 0 0 25px rgba(220, 38, 38, 0.4));
  transition: all 0.2s ease;
}

.btn-primary-panic:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow, 0 0 35px rgba(220, 38, 38, 0.7));
}

.emergency-verdict-box {
  background: var(--panel-b);
  border-color: rgba(239, 68, 68, 0.3);
}

.emergency-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: var(--c-red-text);
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

.emergency-verdict-box h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-strong);
  margin-bottom: 0.5rem;
}

.emergency-verdict-box p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.emergency-steps-box {
  background: var(--fill-dark);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.emergency-steps-box h4 {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--c-amber-text);
  margin-bottom: 0.6rem;
}

.emergency-steps-box ul {
  padding-left: 1.2rem;
  font-size: 0.85rem;
  color: var(--text-soft);
}

.emergency-steps-box li {
  margin-bottom: 0.4rem;
}

.emergency-hotline-bar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.btn-call-1930 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--accent-danger);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  padding: 0.85rem;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: var(--glow, 0 0 20px rgba(239, 68, 68, 0.5));
  transition: all 0.2s ease;
}

.btn-call-1930:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow, 0 0 30px rgba(239, 68, 68, 0.8));
}

.btn-open-portal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--fill-2);
  border: 1px solid var(--border-glass);
  color: var(--text-strong);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.75rem;
  border-radius: 8px;
  text-decoration: none;
}

/* ========================================================
   TAB 3: DOCUMENT AI FORENSIC SCANNER
   ======================================================== */
.doc-lab-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 1.5rem;
}

.specimens-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
}

.specimen-card {
  background: var(--panel-b);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.specimen-card:hover {
  border-color: var(--border-glass-accent);
  background: var(--panel-a);
}

.specimen-card.active {
  border-color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.1);
  box-shadow: var(--glow, 0 0 15px rgba(6, 182, 212, 0.15));
}

.specimen-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  margin-bottom: 0.25rem;
}

.specimen-badge.danger { background: rgba(239, 68, 68, 0.2); color: var(--c-red-text); }
.specimen-badge.warning { background: rgba(245, 158, 11, 0.2); color: var(--c-amber-text); }
.specimen-badge.safe { background: rgba(16, 185, 129, 0.2); color: var(--c-green-text); }

.specimen-card h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 0.2rem;
}

.specimen-card p {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.divider-text {
  text-align: center;
  position: relative;
  margin: 1.25rem 0;
}

.divider-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--border-glass);
}

.divider-text span {
  position: relative;
  background: var(--surface-solid);
  padding: 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
}

.custom-doc-box textarea {
  width: 100%;
  background: var(--panel-b);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  padding: 0.75rem;
  color: var(--text-strong);
  font-size: 0.88rem;
  font-family: var(--font-sans);
  margin-bottom: 0.75rem;
}

.btn-primary {
  width: 100%;
  background: var(--grad-alt);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.75rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--glow, 0 0 20px rgba(139, 92, 246, 0.4));
}

.doc-scores-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.doc-score-card {
  background: var(--panel-b);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}

.doc-score-card.danger {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}

.score-title {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.score-number {
  font-size: 1.8rem;
  font-weight: 900;
  font-family: var(--font-mono);
  display: block;
  margin: 0.2rem 0;
}

.safe-val { color: var(--c-green-text); }
.danger-val { color: var(--c-red-text); }

.score-sub {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.report-box {
  margin-bottom: 1rem;
}

.report-box h4 {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.terminal-view {
  background: var(--code-bg);
  border: 1px solid var(--border-glass);
  border-radius: 6px;
  padding: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--c-blue-text);
  max-height: 140px;
  overflow-y: auto;
  white-space: pre-wrap;
}

.findings-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.finding-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--fill-1);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.82rem;
}

.finding-status {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.finding-status.failed { background: rgba(239, 68, 68, 0.25); color: var(--c-red-text); }
.finding-status.passed { background: rgba(16, 185, 129, 0.25); color: var(--c-green-text); }

.action-alert {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--c-amber-text);
}

/* ========================================================
   TAB 4: GEMINI FRAUD REASONER
   ======================================================== */
.gemini-chat-container {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  padding: 1.5rem;
}

.gemini-prompt-pills {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.pills-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}

.gemini-pill {
  background: var(--fill-1);
  border: 1px solid var(--border-glass);
  color: var(--c-blue-text);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gemini-pill:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
}

.chat-display-box {
  background: var(--panel-b);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  padding: 1.25rem;
  height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.chat-message {
  display: flex;
  gap: 0.75rem;
  max-width: 85%;
}

.chat-message.assistant {
  align-self: flex-start;
}

.chat-message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.msg-avatar {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.chat-message.user .msg-body {
  background: var(--grad-hero);
  color: #fff;
  border-radius: 12px 12px 2px 12px;
}

.chat-message.assistant .msg-body {
  background: var(--panel-a);
  border: 1px solid var(--border-glass);
  color: var(--text-body);
  border-radius: 12px 12px 12px 2px;
}

.msg-body {
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.msg-body strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text-strong);
}

.chat-input-row {
  display: flex;
  gap: 0.75rem;
}

.chat-input-row input {
  flex: 1;
  background: var(--panel-b);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: 0.95rem;
}

.chat-input-row input:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

.chat-input-row button {
  width: auto;
  padding: 0.85rem 1.5rem;
}

/* ========================================================
   TAB 5: BIGQUERY MULE MATRIX
   ======================================================== */
.bq-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 1.5rem;
}

.threat-bars-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 1rem 0;
}

.threat-bar-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.bar-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 600;
}

.bar-track {
  height: 8px;
  background: var(--fill-1);
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--grad-bar);
}

.insight-box {
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.3);
  padding: 0.85rem;
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--c-blue-text);
}

.mule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin: 1rem 0;
}

.mule-table th {
  text-align: left;
  padding: 0.6rem;
  background: var(--fill-1);
  color: var(--text-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--border-glass);
}

.mule-table td {
  padding: 0.6rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-body);
}

.sql-preview {
  margin-top: 1rem;
}

.sql-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
}

.sql-code {
  background: var(--code-bg);
  border: 1px solid var(--border-glass);
  padding: 0.75rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--c-green-text);
  margin-top: 0.3rem;
  overflow-x: auto;
}

/* ========================================================
   TAB 6: CITIZEN SCAM REPORTER
   ======================================================== */
.report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.report-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-group label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--panel-b);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  padding: 0.75rem;
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: 0.9rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

.success-banner {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: var(--c-green-text);
  padding: 0.85rem;
  border-radius: 8px;
  font-size: 0.88rem;
  margin-top: 0.5rem;
}

.reports-feed-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
  max-height: 480px;
  overflow-y: auto;
}

.report-feed-item {
  background: var(--panel-b);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.feed-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feed-item-badge {
  font-size: 0.65rem;
  font-weight: 800;
  background: rgba(239, 68, 68, 0.2);
  color: var(--c-red-text);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.feed-item-time {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.feed-item-target {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--c-blue-text);
  font-weight: 700;
}

.feed-item-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ========================================================
   TAB 7: ANDROID APP SHOWCASE
   ======================================================== */
.app-showcase-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 2.5rem;
  align-items: center;
}

.phone-card {
  display: flex;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
}

.phone-frame {
  width: 290px;
  height: 580px;
  background: #030712;
  border: 10px solid #1e293b;
  border-radius: 38px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(6, 182, 212, 0.15);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.phone-notch {
  width: 100px;
  height: 18px;
  background: #1e293b;
  margin: 0 auto;
  border-radius: 0 0 12px 12px;
}

.phone-screen {
  flex: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: radial-gradient(circle at 50% 30%, #0f172a 0%, #020617 100%);
}

.phone-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.app-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
}

.app-live-dot {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent-emerald);
}

.simulated-shield {
  background: rgba(220, 38, 38, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.6);
  border-radius: 12px;
  padding: 0.85rem;
  text-align: center;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

.shield-badge-danger {
  font-size: 0.65rem;
  font-weight: 800;
  color: #fca5a5;
  margin-bottom: 0.3rem;
}

.simulated-shield h4 {
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.25rem;
}

.simulated-shield p {
  font-size: 0.72rem;
  color: #cbd5e1;
  margin-bottom: 0.5rem;
}

.simulated-metrics {
  font-size: 0.68rem;
  color: #f87171;
  font-weight: 700;
}

.simulated-notification {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.notif-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--accent-cyan);
  font-weight: 700;
}

.notif-body strong {
  font-size: 0.78rem;
  color: #fff;
  display: block;
}

.notif-body p {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.download-details-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.release-badge {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tag-version {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: var(--c-blue-text);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
}

.tag-target {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: var(--c-green-text);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
}

.download-details-card h3 {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--text-strong);
}

.download-details-card p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.features-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-soft);
}

.check-icon {
  background: rgba(16, 185, 129, 0.2);
  color: var(--c-green-text);
  font-weight: 800;
  font-size: 0.75rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.btn-download-apk {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: var(--grad-green);
  color: #fff;
  padding: 1rem 1.75rem;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: var(--glow, 0 0 30px rgba(16, 185, 129, 0.4));
  transition: all 0.25s ease;
}

.btn-download-apk:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow, 0 0 40px rgba(16, 185, 129, 0.7));
}

.dl-icon {
  font-size: 1.8rem;
}

.dl-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
}

.dl-sub {
  display: block;
  font-size: 0.75rem;
  opacity: 0.85;
}

.qr-code-box {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--panel-b);
  border: 1px solid var(--border-glass);
  padding: 1rem;
  border-radius: 12px;
  margin-top: 0.5rem;
}

.qr-placeholder img {
  width: 90px;
  height: 90px;
  border-radius: 8px;
  border: 2px solid #fff;
}

.qr-info strong {
  display: block;
  font-size: 0.88rem;
  color: var(--text-strong);
  margin-bottom: 0.25rem;
}

.qr-info p {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ========================================================
   GLOBAL FOOTER
   ======================================================== */
.app-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--border-glass);
  padding: 3rem 2rem 1.5rem 2rem;
  margin-top: 4rem;
}

.footer-top {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.25fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.footer-tagline {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 0.75rem;
  max-width: 380px;
}

.footer-col h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 1rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.footer-links a {
  color: var(--accent-cyan);
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-bottom {
  max-width: 1300px;
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-dim);
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-disclaimer {
  max-width: 600px;
  text-align: right;
}

/* ========================================================
   DOMAIN CHECKER & FILE UPLOAD STYLES
   ======================================================== */
.domain-input-field {
  width: 100%;
  background: var(--panel-b);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 1rem;
  margin-bottom: 1rem;
  transition: border 0.2s ease;
}

.domain-input-field:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: var(--glow-focus, 0 0 15px rgba(6, 182, 212, 0.25));
}

.domain-heuristics-note {
  margin-top: 1.25rem;
  background: var(--fill-1);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  padding: 0.85rem;
}

.domain-heuristics-note h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.domain-heuristics-note ul {
  padding-left: 1.2rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.domain-heuristics-note li {
  margin-bottom: 0.3rem;
}

/* DOCUMENT AI DROPZONE */
.doc-upload-container {
  margin-bottom: 1rem;
}

.doc-upload-dropzone {
  border: 2px dashed rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.05);
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.doc-upload-dropzone:hover,
.doc-upload-dropzone.dragover {
  border-color: var(--accent-purple);
  background: rgba(139, 92, 246, 0.12);
  transform: translateY(-2px);
  box-shadow: var(--glow, 0 0 20px rgba(139, 92, 246, 0.2));
}

.upload-icon {
  font-size: 2.2rem;
}

.upload-prompt strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text-strong);
  margin-bottom: 0.2rem;
}

.upload-prompt p {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.file-selected-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--panel-a);
  border: 1px solid var(--accent-purple);
  padding: 0.65rem 1rem;
  border-radius: 8px;
  margin-top: 0.5rem;
}

.file-icon {
  font-size: 1.1rem;
}

.file-name {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--c-purple-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-primary-small {
  background: var(--grad-alt);
  color: #fff;
  border: none;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.btn-remove-file {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 0.3rem;
}

.btn-remove-file:hover {
  color: var(--accent-danger);
}

/* ========================================================
   REAL-TIME TELEMETRY & AGENTIC AI BOX
   ======================================================== */
.realtime-telemetry-box {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  background: var(--panel-b);
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: 12px;
  box-shadow: var(--glow, 0 4px 20px rgba(0, 0, 0, 0.3));
}

.telemetry-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-glass);
}

.telemetry-header h5 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: var(--glow, 0 0 10px #10b981);
  animation: pulse-glow 1.5s infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.telemetry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.telemetry-item {
  background: var(--panel-c);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.telemetry-lbl {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-weight: 500;
}

.telemetry-val {
  font-size: 0.82rem;
  color: var(--text-main);
  font-family: var(--font-mono);
  word-break: break-all;
}

.telemetry-val.badge-safe { color: var(--c-green-text); font-weight: 600; }
.telemetry-val.badge-warn { color: var(--c-amber-text); font-weight: 600; }
.telemetry-val.badge-crit { color: var(--c-red-text); font-weight: 600; }

.telemetry-ai-rationale {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-soft);
  background: rgba(99, 102, 241, 0.08);
  border-left: 3px solid #6366f1;
  padding: 0.6rem 0.85rem;
  border-radius: 0 6px 6px 0;
  margin-top: 0.5rem;
}

/* ========================================================
   RESPONSIVE DESIGN (Mobile & Tablet)
   ======================================================== */
@media (max-width: 992px) {
  .app-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.75rem 1rem;
  }
  
  .cloud-stack-bar {
    width: 100%;
    justify-content: space-between;
    overflow-x: auto;
  }

  .checker-grid,
  .panic-container,
  .doc-lab-grid,
  .bq-dashboard-grid,
  .report-grid,
  .app-showcase-grid,
  .footer-top {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: 2.1rem;
  }

  .nav-tabs-bar {
    padding: 0.5rem 1rem;
  }
}


/* ---- Verdict semantics, data-source labels ---- */
.gauge-ring.unverified { border-color: var(--accent-amber); border-style: dashed; box-shadow: none; }
.badge-unverified { background: rgba(245, 158, 11, 0.18); color: var(--c-amber-text); border: 1px dashed rgba(245, 158, 11, 0.7); }
.src-badge { display: inline-block; font-size: 0.68rem; padding: 0.1rem 0.45rem; border-radius: 4px; font-weight: 700; vertical-align: middle; }
.src-live { background: rgba(16, 185, 129, 0.18); color: var(--c-green-text); border: 1px solid rgba(16, 185, 129, 0.5); }
.src-rules { background: rgba(245, 158, 11, 0.18); color: var(--c-amber-text); border: 1px solid rgba(245, 158, 11, 0.5); }
.datasource-note { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.5rem; font-style: italic; }
.ai-head { margin-bottom: 0.35rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; color: var(--c-blue-text); }
.ai-conf { font-size: 0.72rem; color: var(--c-blue-text); }
.ai-body { color: var(--text-soft); font-size: 0.82rem; line-height: 1.4; }
.adv-signals { margin-top: 0.6rem; font-size: 0.8rem; color: var(--text-muted); }
.adv-signals ul { padding-left: 1.2rem; margin-top: 0.2rem; }
.adv-action { margin-top: 0.6rem; padding: 0.5rem; background: rgba(16, 185, 129, 0.1); border-left: 3px solid #10b981; border-radius: 4px; font-size: 0.82rem; color: var(--c-green-text); }
.pre { white-space: pre-line; }
.mt-s { margin-top: 0.3rem; }
.official-link, .official-link a { margin-top: 0.4rem; color: var(--c-green-text); font-weight: 700; }
.risk-pct { color: var(--c-red-text); font-weight: 700; }
button:disabled { opacity: 0.6; cursor: progress; }
button:focus-visible, [role="button"]:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ========================================================
   UI REFRESH: plain-language UI, honest status, accessibility, mobile
   ======================================================== */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
.sr-only { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; background: #fff; color: #000; padding: 0.6rem 1rem; border-radius: 6px; z-index: 3000; font-weight: 700; }
.skip-link:focus { top: 8px; }
a { color: var(--c-blue-text); }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tab-content-panel { scroll-margin-top: 64px; }
[hidden] { display: none !important; }

/* header: not sticky (saves phone screen); only the tab bar sticks */
.app-header { position: static; flex-wrap: wrap; row-gap: 0.6rem; }
.header-right { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.dot-grey { background: #64748b; }
.dot-green { background: var(--accent-emerald); box-shadow: var(--glow, 0 0 8px var(--accent-emerald)); }
.dot-amber { background: var(--accent-amber); }
.stack-state { font-size: 0.68rem; color: var(--text-soft); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.cloud-stack-bar { flex-wrap: wrap; }
.lang-toggle { display: inline-flex; border: 1px solid var(--border-glass-accent); border-radius: 8px; overflow: hidden; }
.lang-btn { background: transparent; color: var(--text-soft); border: 0; padding: 0.5rem 0.8rem; font: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer; min-height: 40px; }
.lang-btn.active { background: #0e7490; color: #fff; }
.btn-sos-call { display: inline-flex; align-items: center; gap: 0.45rem; background: #b91c1c; color: #fff; font-weight: 800; font-size: 0.88rem; padding: 0.55rem 0.95rem; border-radius: 8px; text-decoration: none; border: 2px solid var(--sos-border); min-height: 44px; }
.btn-sos-call:hover { background: #dc2626; }
.btn-emergency-helpline, .btn-app-link { min-height: 44px; }

/* tabs: wrap on wide screens (nothing hidden), scroll with edge fades on phones */
.nav-wrap { position: sticky; top: 0; z-index: 900; background: var(--panel-a); border-bottom: 1px solid var(--border-glass); }
.nav-tabs-bar { position: static; flex-wrap: wrap; overflow-x: visible; border-bottom: 0; background: transparent; row-gap: 0.25rem; }
.nav-tab { min-height: 44px; color: var(--text-soft); }
.nav-tab-sos { color: var(--c-red-text); }
.badge-demo { background: rgba(245, 158, 11, 0.25); color: var(--c-amber-text); font-size: 0.62rem; font-weight: 800; padding: 0.1rem 0.4rem; border-radius: 4px; border: 1px solid rgba(245, 158, 11, 0.6); }
.badge-pulse { color: #022c22; }

/* hero */
.hero-tag-badge { background: var(--fill-2); }
.btn-hero-sos { background: #b91c1c !important; color: #fff !important; border: 2px solid var(--sos-border) !important; font-weight: 800; }
.btn-hero-primary, .btn-hero-secondary, .btn-hero-panic { min-height: 48px; text-align: center; }
.metric-pill { padding: 0.4rem 0.5rem 0.6rem; }
.metric-pill[hidden] { display: none; }
.metric-lbl { text-align: center; color: var(--text-soft); }
.datasource-note { color: var(--text-muted); font-size: 0.78rem; }

/* result states: fixed minimum height so nothing jumps */
.result-box { min-height: 340px; }
.state-block { padding: 1rem 0; color: var(--text-soft); }
.error-state { background: rgba(245, 158, 11, 0.10); border: 1px dashed rgba(245, 158, 11, 0.7); border-radius: 10px; padding: 1rem; color: var(--c-amber-text); }
.error-state strong { display: block; font-size: 1.05rem; margin-bottom: 0.35rem; }
.btn-retry { margin-top: 0.7rem; background: #0e7490; color: #fff; border: 0; padding: 0.7rem 1.2rem; border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; min-height: 44px; }
.btn-retry:disabled { background: #334155; }
.detected-type { min-height: 1.4rem; margin-top: 0.4rem; font-size: 0.82rem; color: var(--c-blue-text); }
.verdict-headline-col h4 { font-size: 1.2rem; line-height: 1.3; }
.verdict-headline-col p { color: var(--text-soft); }
.action-card ul { padding-left: 1.2rem; }
.action-card li { margin-bottom: 0.35rem; }
.badge-unverified { color: var(--c-amber-text); }
.badge-danger { color: var(--c-amber-text); }
.badge-critical { color: var(--c-red-text); }
.status-badge { text-transform: none; }

.tech-details { margin-top: 1rem; border: 1px solid var(--border-glass); border-radius: 10px; background: var(--panel-c); }
.tech-details > summary { cursor: pointer; padding: 0.7rem 0.9rem; font-weight: 700; color: var(--text-soft); min-height: 44px; display: flex; align-items: center; }
.tech-body { padding: 0 0.9rem 0.9rem; font-size: 0.82rem; }
.tech-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px solid var(--border-glass); }
.tech-row span { color: var(--text-muted); }
.tech-row strong { color: var(--text-body); text-align: right; overflow-wrap: anywhere; }
.tech-ops { background: rgba(245, 158, 11, 0.07); }
.tech-details .telemetry-grid { display: grid; gap: 0.5rem; }
.tech-details .telemetry-val { overflow-wrap: anywhere; }
.badge-safe, .badge-crit, .badge-warn { padding: 0 0.3rem; border-radius: 4px; }
.badge-crit { color: var(--c-red-text); } .badge-warn { color: var(--c-amber-text); }

/* panic check */
.sos-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: rgba(185, 28, 28, 0.2); border: 2px solid #ef4444; border-radius: 12px; padding: 1rem 1.25rem; margin: 0.75rem 0 1rem; }
.sos-banner p { color: var(--c-red-text); margin-top: 0.25rem; }
.btn-call-big { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: #16a34a; color: #fff !important; font-size: 1.35rem; font-weight: 900; padding: 1rem 1.6rem; border-radius: 12px; text-decoration: none; min-height: 60px; box-shadow: var(--glow, 0 0 0 3px rgba(255,255,255,0.15)); }
.btn-call-big:hover { background: #15803d; }
.panic-progress { font-size: 0.85rem; color: var(--text-soft); margin-bottom: 0.5rem; }
.q-toggle-group { gap: 0.5rem; }
.btn-toggle { min-width: 64px; min-height: 44px; font-family: var(--font-sans); font-size: 1rem; color: var(--text-body); }
.btn-toggle.q-yes.active { background: #b91c1c; border-color: #fecaca; color: #fff; box-shadow: var(--glow, 0 0 12px rgba(239, 68, 68, 0.5)); }
.btn-toggle.q-no.active { background: #15803d; border-color: #bbf7d0; color: #fff; box-shadow: var(--glow, 0 0 12px rgba(34, 197, 94, 0.4)); }
.emergency-verdict-box { transition: border-color 0.2s; }
.emergency-verdict-box[data-level="none"] { border-color: #16a34a; }
.emergency-verdict-box[data-level="warn"] { border-color: #f59e0b; }
.emergency-verdict-box[data-level="likely"], .emergency-verdict-box[data-level="confirmed"] { border-color: #ef4444; }
.warning-meter { margin: 0.75rem 0; }
.wm-track { height: 12px; background: var(--fill-2); border-radius: 8px; overflow: hidden; margin: 0.35rem 0; }
.wm-fill { height: 100%; width: 0; background: linear-gradient(90deg, #22c55e, #f59e0b 50%, #ef4444); background-size: 100vw 100%; transition: width 0.3s ease; }
.wm-note { color: var(--text-muted); }
.emergency-steps-box ol { padding-left: 1.3rem; }
.emergency-steps-box li { margin-bottom: 0.4rem; }
.emergency-hotline-bar { display: flex; flex-direction: column; gap: 0.6rem; }
.btn-open-portal { min-height: 44px; display: flex; align-items: center; justify-content: center; }

/* doc lab */
.mode-badge { display: inline-block; margin-top: 0.6rem; padding: 0.35rem 0.7rem; border: 1px dashed rgba(245,158,11,0.7); border-radius: 8px; color: var(--c-amber-text); font-size: 0.85rem; background: rgba(245,158,11,0.1); }
.mode-badge.mode-on { color: var(--c-green-text); border-color: rgba(34,197,94,0.6); background: rgba(34,197,94,0.1); }
.score-number { color: var(--text-body); }
.warn-val { color: var(--c-amber-text); }
.status-pill { display: inline-block; font-size: 0.78rem; font-weight: 800; padding: 0.25rem 0.65rem; border-radius: 6px; background: var(--fill-2); color: var(--text-soft); }
.status-pill.danger { background: rgba(239,68,68,0.25); color: var(--c-red-text); }
.status-pill.warning { background: rgba(245,158,11,0.25); color: var(--c-amber-text); }
.status-pill.safe { background: rgba(16,185,129,0.25); color: var(--c-green-text); }
.specimen-card { cursor: pointer; }
.specimen-card:focus-visible { outline: 3px solid var(--focus); }
.doc-lab-grid > *, .checker-grid > *, .report-grid > *, .app-showcase-grid > *, .bq-dashboard-grid > * { min-width: 0; }
.terminal-view { max-height: 260px; overflow: auto; }
.action-alert ul { padding-left: 1.2rem; }

/* advisor */
.risk-high { color: var(--c-red-text); } .risk-med { color: var(--c-amber-text); } .risk-low { color: var(--c-blue-text); }
.chat-input-row input { min-height: 44px; }

/* report */
.error-banner { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.6); color: var(--c-amber-text); padding: 0.85rem; border-radius: 8px; font-size: 0.9rem; margin-top: 0.5rem; }
.tag-sample { background: rgba(245,158,11,0.2); color: var(--c-amber-text); font-size: 0.72rem; font-weight: 800; padding: 0.2rem 0.5rem; border-radius: 4px; border: 1px dashed rgba(245,158,11,0.7); }
.sample-item { opacity: 0.85; border-style: dashed; }
.sample-chip-tag { background: #f59e0b; color: #1c1100; font-size: 0.68rem; font-weight: 900; padding: 0.1rem 0.45rem; border-radius: 4px; }
.sample-note { margin-top: 0; }
.report-form input, .report-form select, .report-form textarea { min-height: 44px; }

/* android */
.dataflow-note { margin-top: 0.6rem; padding: 0.6rem 0.8rem; border-left: 3px solid #38bdf8; background: rgba(56,189,248,0.08); border-radius: 0 8px 8px 0; color: var(--text-body); font-size: 0.9rem; }
.sample-label { text-align: center; font-size: 0.8rem; color: var(--c-amber-text); margin-bottom: 0.5rem; font-weight: 700; }
.app-live-dot { color: #fcd34d; }
.apk-verify { margin-top: 1rem; padding: 0.9rem; border: 1px solid var(--border-glass-accent); border-radius: 10px; background: var(--panel-c); font-size: 0.85rem; }
.apk-hash { display: block; margin: 0.4rem 0; padding: 0.5rem; background: var(--code-bg); border-radius: 6px; color: var(--c-blue-text); font-family: var(--font-mono); font-size: 0.78rem; overflow-wrap: anywhere; word-break: break-all; user-select: all; }
.apk-note { color: var(--text-soft); margin-top: 0.4rem; }
.apk-caution { color: var(--c-amber-text); margin-top: 0.5rem; padding: 0.5rem 0.7rem; border-left: 3px solid #f59e0b; background: rgba(245,158,11,0.08); border-radius: 0 6px 6px 0; }
.btn-download-apk { min-height: 56px; }

/* footer */
.footer-legal { margin-top: 0.75rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-legal a, .footer-links a { color: var(--c-blue-text); }
.footer-bottom { flex-wrap: wrap; gap: 0.5rem; }
.footer-disclaimer { color: var(--text-soft); }

/* legal pages */
.legal-page { max-width: 820px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; line-height: 1.7; color: var(--text-body); }
.legal-page h1 { font-size: 1.9rem; margin: 0.5rem 0 0.25rem; }
.legal-page h2 { font-size: 1.2rem; margin: 1.6rem 0 0.4rem; color: var(--text-strong); }
.legal-page ul { padding-left: 1.3rem; }
.legal-page li { margin: 0.25rem 0; }
.legal-page .todo { background: rgba(245,158,11,0.15); border: 1px dashed #f59e0b; padding: 0 0.35rem; border-radius: 4px; color: var(--c-amber-text); }
.legal-page table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; font-size: 0.92rem; }
.legal-page th, .legal-page td { border: 1px solid var(--border-glass); padding: 0.45rem 0.6rem; text-align: left; vertical-align: top; }
.legal-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.8rem 1.25rem; border-bottom: 1px solid var(--border-glass); }
.legal-meta { color: var(--text-muted); font-size: 0.88rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- tablet / phone ---- */
@media (max-width: 992px) {
  .app-header { padding: 0.6rem 1rem; flex-direction: column; align-items: stretch; }
  .cloud-stack-bar { width: 100%; justify-content: flex-start; overflow-x: visible; border-radius: 12px; }
  .header-right { width: 100%; }
  .btn-sos-call { flex: 1 1 100%; justify-content: center; font-size: 1rem; }
  .btn-emergency-helpline, .btn-app-link { flex: 1 1 calc(50% - 0.3rem); justify-content: center; }
  .nav-tabs-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding: 0.4rem 0.75rem; -webkit-overflow-scrolling: touch; }
  .nav-wrap::before, .nav-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 28px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.2s; }
  .nav-wrap::before { left: 0; background: linear-gradient(90deg, var(--surface-solid), transparent); }
  .nav-wrap::after { right: 0; background: linear-gradient(270deg, var(--surface-solid), transparent); }
  .nav-wrap.can-scroll-left::before, .nav-wrap.can-scroll-right::after { opacity: 1; }
  .main-content-area { padding: 0.75rem 1rem 2rem; }
  .hero-section { padding-left: 1rem; padding-right: 1rem; }
  .hero-title { font-size: 1.9rem; }
  .hero-subtitle { font-size: 1rem; }
  .hero-actions-row { flex-direction: column; align-items: stretch; }
  .hero-actions-row a { justify-content: center; width: 100%; }
}
@media (max-width: 600px) {
  .hero-title { font-size: 1.6rem; }
  .hero-metrics-bar { grid-template-columns: 1fr 1fr; padding: 0.75rem; gap: 0.6rem; }
  .metric-num { font-size: 1.15rem; }
  .metric-lbl { font-size: 0.68rem; }
  .verdict-summary-row { flex-direction: column; align-items: flex-start; }
  .panic-q-item { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .q-toggle-group .btn-toggle { flex: 1; }
  .btn-call-big { width: 100%; font-size: 1.25rem; }
  .sos-banner { padding: 0.9rem; }
  .specimen-chips { gap: 0.4rem; }
  .specimen-chip { flex: 1 1 calc(50% - 0.4rem); justify-content: center; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .chat-input-row { flex-direction: column; }
  .chat-input-row > * { width: 100%; }
  .tech-row { flex-direction: column; gap: 0.1rem; }
  .tech-row strong { text-align: left; }
  .footer-bottom { flex-direction: column; text-align: left; }
  .mule-clusters-table-wrap { overflow-x: auto; }
  .qr-code-box { flex-direction: column; align-items: flex-start; }
  .download-action-row .btn-download-apk { width: 100%; }
  .release-badge { flex-wrap: wrap; }
}

/* ---- Hero only on the home tab; compact bar elsewhere; sticky-nav aware scrolling ---- */
.hero-sub-short { display: none; }
body:not(.is-home) .hero-section { display: none; }
.tab-content-panel, .glass-box, #scam-card, #domain-card { scroll-margin-top: 76px; }
.scam-type-tag:empty, [class*="badge"]:empty, [class*="-pill"]:empty, .tag:empty, .pill:empty { display: none; }

@media (max-width: 700px) {
  .app-header { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.5rem; padding: 0.4rem 0.75rem; row-gap: 0.3rem; }
  .app-header .sub-brand, .app-header .cloud-stack-bar, .app-header .btn-app-link { display: none; }
  .logo-badge { gap: 0.4rem; }
  .shield-icon { font-size: 1.3rem; }
  .brand-name { font-size: 1.05rem; }
  .header-left { flex: 0 0 auto; }
  .header-right { width: auto; flex: 1 1 auto; justify-content: flex-end; flex-wrap: nowrap; gap: 0.4rem; }
  .lang-btn { padding: 0.25rem 0.5rem; min-height: 34px; font-size: 0.78rem; }
  .btn-sos-call { flex: 0 1 auto; font-size: 0.7rem; line-height: 1.15; padding: 0.25rem 0.5rem; min-height: 38px; gap: 0.3rem; max-width: 150px; text-align: left; }
  .btn-emergency-helpline { display: none; }
  /* home keeps a 1930 shortcut */
  body.is-home .btn-emergency-helpline { display: inline-flex; flex: 0 0 auto; min-height: 38px; padding: 0.25rem 0.5rem; font-size: 0.78rem; }
  body.is-home .btn-emergency-helpline .helpline-text span { display: none; }
  body.is-home .btn-sos-call { display: none; }
  .nav-tabs-bar { padding: 0.25rem 0.5rem; }
  .nav-tab { min-height: 44px; padding: 0.4rem 0.7rem; }
  .tab-content-panel, .glass-box, #scam-card, #domain-card { scroll-margin-top: 66px; }
  .main-content-area { padding-top: 0.5rem; }
  .section-lead-header { margin-bottom: 0.6rem; }
  .section-lead-header p { font-size: 0.85rem; line-height: 1.4; }

  .hero-section { padding: 0.5rem 0.75rem 0.4rem; }
  .hero-tagline { margin-bottom: 0.4rem; }
  .hero-tag-badge { font-size: 0.68rem; padding: 0.15rem 0.5rem; }
  .hero-title { font-size: 1.3rem; line-height: 1.2; margin-bottom: 0.4rem; }
  .hero-sub-long { display: none; }
  .hero-sub-short { display: block; font-size: 0.85rem; line-height: 1.4; margin-bottom: 0.6rem; }
  .hero-actions-row { flex-direction: row; gap: 0.5rem; margin-bottom: 0.6rem; flex-wrap: nowrap; }
  .hero-actions-row a { width: auto; flex: 1 1 0; min-height: 44px; padding: 0.4rem 0.5rem; font-size: 0.82rem; }
  .hero-actions-row .btn-hero-secondary { display: none; }
  .hero-metrics-bar { display: flex; overflow-x: auto; gap: 0.5rem; padding: 0.4rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .metric-pill { flex: 0 0 132px; scroll-snap-align: start; padding-bottom: 0.3rem; }
  .metric-num { font-size: 1rem; }
  .metric-lbl { font-size: 0.6rem; line-height: 1.2; }
  .datasource-note { display: none; }
}
@media (max-width: 700px) {
  .section-lead-header .section-kicker, .section-lead-header p { display: none; }
  .section-lead-header h2 { font-size: 1.2rem; line-height: 1.25; margin: 0 0 0.4rem; }
  .specimens-bar { margin-bottom: 0.5rem; }
  .specimens-label { display: none; }
  .specimen-chips { flex-wrap: nowrap; overflow-x: auto; gap: 0.4rem; padding-bottom: 0.2rem; -webkit-overflow-scrolling: touch; }
  .specimen-chip { flex: 0 0 auto; white-space: nowrap; min-height: 40px; padding: 0.3rem 0.6rem; font-size: 0.8rem; }
}
@media (max-width: 700px) {
  .doc-lab-grid .glass-box > h3, .doc-lab-grid .panel-desc { margin-bottom: 0.4rem; }
  .doc-lab-grid .panel-desc { display: none; }
  .specimens-stack { display: flex; flex-direction: row; overflow-x: auto; gap: 0.5rem; -webkit-overflow-scrolling: touch; padding-bottom: 0.2rem; }
  .specimens-stack .specimen-card { flex: 0 0 70%; padding: 0.5rem 0.7rem; }
  .specimens-stack .specimen-card p { display: none; }
  .specimens-stack .specimen-card h4 { font-size: 0.85rem; margin: 0.2rem 0 0; }
  .mode-badge { display: none; }
  .gemini-prompt-pills { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0.4rem; -webkit-overflow-scrolling: touch; }
  .gemini-prompt-pills .pills-title { display: none; }
  .gemini-pill { flex: 0 0 auto; max-width: 70%; white-space: normal; font-size: 0.78rem; padding: 0.35rem 0.6rem; }
  .chat-display-box { height: 170px; padding: 0.7rem; margin-bottom: 0.6rem; }
  .doc-upload-dropzone { padding: 0.6rem; }
  .doc-upload-dropzone .upload-prompt p, .doc-upload-dropzone .upload-icon { display: none; }
  .doc-lab-grid .divider-text { margin: 0.5rem 0; }
}
@media (max-width: 700px) {
  /* home: hero already states the purpose, so drop the repeated heading */
  #tab-scam-checker .section-lead-header { display: none; }
}

/* ========================================================
   THEME LAYER: readability, trust, contrast (both themes)
   ======================================================== */
html { font-size: 16px; }
body { font-size: 1rem; line-height: 1.6; background-color: var(--bg-deep); color: var(--text-main); }
.glass-box { box-shadow: var(--shadow-card, 0 10px 30px rgba(0, 0, 0, 0.4)); }
.app-header { background: var(--panel-a); }
::placeholder { color: var(--text-muted); opacity: 1; }
input, textarea, select { color: var(--text-strong); }
.input-box textarea, .custom-doc-box textarea, .chat-input-row input, .form-group input, .form-group select, .form-group textarea, .domain-input-field {
  background: var(--input-bg); border-color: var(--border-input); color: var(--text-strong);
}
.input-box textarea, .custom-doc-box textarea, .chat-input-row input, .form-group input, .form-group select, .form-group textarea { font-size: 1rem; }
.input-box textarea:focus, .domain-input-field:focus, .chat-input-row input:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 1px; }
select option { background: var(--input-bg); color: var(--text-strong); }

/* trusted, calm look: no neon / hover-lift on action buttons in light */
:root:not([data-theme="dark"]) .btn-hero-primary:hover,
:root:not([data-theme="dark"]) .btn-primary-glow:hover,
:root:not([data-theme="dark"]) .btn-primary-panic:hover,
:root:not([data-theme="dark"]) .btn-call-1930:hover,
:root:not([data-theme="dark"]) .btn-download-apk:hover,
:root:not([data-theme="dark"]) .btn-app-link:hover { transform: none; filter: brightness(1.1); }
.pulse-green, .pulse-blue, .pulse-purple, .pulse-cyan, .dot-green, .pulse-dot { box-shadow: var(--glow, 0 0 8px currentColor); }
.pulse-dot { background: var(--accent-emerald); }

.nav-tab { color: var(--text-soft); }
.nav-tab.active { color: var(--text-strong); border-color: var(--accent-cyan); background: rgba(29, 78, 216, 0.10); }
:root[data-theme="dark"] .nav-tab.active { background: rgba(6, 182, 212, 0.15); border-color: rgba(6, 182, 212, 0.5); }
.nav-tab-sos { color: var(--c-red-text); }
.emergency-kicker { color: var(--c-red-text); }
.emergency-verdict-box { background: var(--bg-card); }
:root[data-theme="dark"] .emergency-verdict-box { background: rgba(22, 12, 18, 0.85); }
.badge-pulse { background: var(--accent-emerald); color: #022c22; }
.badge-alert { background: var(--accent-danger); color: #fff; }
.badge-tech { background: rgba(139, 92, 246, 0.18); color: var(--c-purple-text); }
.btn-hero-secondary { color: var(--c-green-text); }
.btn-hero-panic, .btn-emergency-helpline { color: var(--c-red-text); }
.btn-hero-sos { color: #fff !important; }
.sample-chip-tag { background: #f59e0b; color: #1c1100; }
.metric-num { color: var(--text-strong); opacity: 1; }
.metric-lbl { color: var(--text-soft); }
.btn-text-clear { color: var(--text-muted); text-decoration: underline; min-height: 44px; padding: 0 0.5rem; }
.wm-note, .datasource-note, .legal-meta { color: var(--text-muted); }
.score-number { color: var(--text-strong); }
.score-number.safe-val { color: var(--c-green-text); }
.score-number.danger-val { color: var(--c-red-text); }
.score-number.warn-val { color: var(--c-amber-text); }
.finding-status.failed { color: var(--c-red-text); }
.terminal-view { color: var(--c-blue-text); background: var(--code-bg); }
.sql-code { color: var(--c-green-text); background: var(--code-bg); }
.apk-hash { background: var(--code-bg); color: var(--c-blue-text); border: 1px solid var(--border-glass); }
.qr-placeholder img { border-color: #fff; background: #fff; }
.app-footer { background: var(--footer-bg); }
.legal-page { color: var(--text-body); }
.legal-page h1 { color: var(--text-strong); }
.legal-page th { background: var(--fill-1); }
.legal-top { background: var(--panel-a); gap: 0.75rem; }
.legal-top .brand-name { color: var(--text-strong); text-decoration: none; }

/* disabled controls: readable, not just faded */
button:disabled, .btn-retry:disabled { opacity: 1; background: var(--disabled-bg) !important; background-image: none !important; color: var(--disabled-fg) !important; box-shadow: none !important; cursor: not-allowed; }

/* focus ring */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, select:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, .specimen-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- theme toggle (header + legal pages) ---- */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0.4rem 0.75rem;
  border: 1px solid var(--border-glass-accent); border-radius: 8px; background: var(--panel-a); color: var(--text-main);
  font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer; white-space: nowrap;
}
.theme-toggle:hover { background: var(--fill-2); }
.theme-toggle .theme-ico { font-size: 1.05rem; line-height: 1; }

/* ---- readable minimum sizes ---- */
.sub-brand { font-size: 0.8rem; }
.tip-box, .legal-badge, .finding-row, .check-item, .footer-links, .footer-tagline, .domain-heuristics-note ul, .qr-info p, .upload-prompt p, .specimen-card p, .feed-item-desc, .q-text p { font-size: 0.92rem; }
.red-flags-list li, .action-card, .msg-body, .mule-table, .insight-box, .verdict-headline-col p, .action-alert, .tech-body, .error-state, .error-banner, .success-banner { font-size: 0.98rem; }
.section-lead-header p { font-size: 1rem; }
.stack-item { font-size: 0.8rem; }
.stack-state, .badge-pulse, .badge-alert, .badge-tech, .badge-demo, .specimen-badge, .finding-status, .feed-item-badge, .tag-sample, .sample-chip-tag, .feed-item-time, .sql-label, .score-sub, .gauge-label, .src-badge { font-size: 0.78rem; }
.pills-title, .specimens-label, .metric-lbl, .telemetry-lbl, .telemetry-val, .score-title, .scam-type-tag, .ai-conf, .sub-heading, .report-box h4, .datasource-note, .dl-sub, .bar-meta { font-size: 0.85rem; }
.specimen-chip, .gemini-pill, .btn-toggle { font-size: 0.95rem; }
.btn-toggle { min-height: 44px; }
.specimen-chip, .gemini-pill { min-height: 44px; }
.btn-primary-small, .btn-remove-file { min-height: 44px; }
.nav-tab { font-size: 0.95rem; }
.btn-emergency-helpline, .btn-app-link, .lang-btn { font-size: 0.92rem; }
.lang-btn { min-height: 44px; }

@media (max-width: 700px) {
  .theme-toggle { min-height: 40px; padding: 0.2rem 0.45rem; font-size: 0.78rem; gap: 0.25rem; }
  .app-header .header-right { gap: 0.3rem; }
  .lang-btn { min-height: 40px; padding: 0.2rem 0.45rem; font-size: 0.8rem; }
  .btn-sos-call { font-size: 0.78rem; min-height: 40px; }
  body.is-home .btn-emergency-helpline { min-height: 40px; font-size: 0.8rem; padding: 0.2rem 0.4rem; }
  .specimen-chip { min-height: 44px; font-size: 0.85rem; }
  .metric-lbl { font-size: 0.72rem; }
  .metric-num { font-size: 1.1rem; }
  .hero-title { font-size: 1.45rem; }
  .hero-sub-short { font-size: 0.95rem; }
  .section-lead-header p { font-size: 0.95rem; }
}
@media (max-width: 400px) {
  .app-header .shield-icon { display: none; }
}
.legal-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

.sos-banner p { color: var(--sos-text); }
.phone-frame { color: var(--text-main); }
.chat-message.user .msg-body, .chat-message.user .msg-body strong { color: #fff; }
.sample-item { opacity: 1; }
.dl-sub { opacity: 1; }
button:disabled { transition: none !important; }
/* no colour fades on buttons (avoids low-contrast in-between frames when enabling/disabling) */
button, .btn-primary-glow, .btn-primary, .btn-primary-panic, .btn-primary-small, .nav-tab, .specimen-chip { transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease; }
/* warning meter: colour follows the level (the old viewport-wide gradient showed only green on wide screens) */
.wm-fill { background: #16a34a; }
.emergency-verdict-box[data-level="warn"] .wm-fill { background: #d97706; }
.emergency-verdict-box[data-level="likely"] .wm-fill, .emergency-verdict-box[data-level="confirmed"] .wm-fill { background: #dc2626; }

/* ---------- Live analytics (dependency-free SVG/CSS charts) ---------- */
#an-empty[hidden], #an-content[hidden], #an-sql-wrap[hidden] { display: none; }
.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin: 0 0 1.25rem; }
.an-kpi { background: var(--panel-b); border: 1px solid var(--border-glass); border-radius: 12px; padding: 0.75rem 0.9rem; min-width: 0; }
.an-kpi-num { display: block; font-family: var(--font-mono); font-weight: 800; font-size: 1.5rem; color: var(--text-strong); overflow-wrap: anywhere; }
.an-kpi-lbl { display: block; font-size: 0.8rem; color: var(--text-muted); }
.an-intel, .an-sql { margin-top: 1.5rem; }
.an-spark { width: 100%; height: auto; display: block; }
.an-spark .an-area { fill: var(--accent-blue); opacity: 0.15; }
.an-spark .an-line { fill: none; stroke: var(--accent-blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.an-spark .an-dot { fill: var(--accent-blue); }
.an-spark-axis { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }
.an-bar-fill { background: var(--accent-blue); }
.an-bar-fill.lvl-SAFE { background: var(--accent-emerald); }
.an-bar-fill.lvl-LOW { background: #0ea5e9; }
.an-bar-fill.lvl-MEDIUM { background: var(--accent-amber); }
.an-bar-fill.lvl-HIGH { background: #ea580c; }
.an-bar-fill.lvl-CRITICAL { background: var(--accent-danger); }
.an-bar-fill.lvl-UNSCORED { background: var(--text-dim); }
.bar-meta span:first-child { min-width: 0; overflow-wrap: anywhere; padding-right: 0.5rem; }
.bar-meta span:last-child { white-space: nowrap; font-family: var(--font-mono); }
.an-sql pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.5rem 0 1rem; padding: 0.75rem; border-radius: 8px; font-size: 0.78rem; }
.an-sql h4 { margin: 0.5rem 0 0; font-size: 0.85rem; }
.an-sql-note { font-size: 0.8rem; color: var(--text-muted); }
#an-latency th, #an-latency td { text-align: left; padding: 0.4rem 0.5rem; }
.an-empty-title { font-weight: 700; margin: 0 0 0.25rem; }