/* Shared Predictor-matched theme for the non-Predictor apps.
   These apps are built on a common set of :root tokens (--surface, --accent, --r,
   --font, …) that both the app markup and the shared app bar consume. Redefining
   those tokens here — loaded AFTER each page's inline <style> — restyles every app
   to Predictor's design language (midnight-navy palette, Inter + JetBrains Mono,
   rounded surfaces) without rewriting per-app CSS. Header ITEMS and each page's
   layout are untouched; only the shared design tokens + base element polish change.
   The 'Dhivehi' font fallback is preserved for Dhivehi script. */

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

:root {
  --bg: #07121F;
  --surface: #10243A;
  --surface2: #18324E;
  --border: #20354D;
  --accent: #3B82F6;
  --accent2: #38BDF8;
  --text: #F8FAFC;
  --muted: #94A3B8;
  --danger: #EF4444;
  --success: #10B981;
  --warning: #F59E0B;
  --r: 12px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  --grad: linear-gradient(135deg, #3B82F6, #2563EB);
  --font: 'Inter', 'Dhivehi', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Dhivehi', ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
}

/* Subtle navy gradient backdrop, like Predictor. */
body {
  background: linear-gradient(180deg, #07121F 0%, #0A1830 100%) fixed;
  color: var(--text);
}

/* Inputs / selects / textareas: rounded with a blue focus ring. */
input, select, textarea {
  border-radius: var(--r);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* Controls: consistent rounding + smooth transitions (colour comes from the tokens). */
button, .btn, a.btn {
  border-radius: var(--r);
  transition: filter .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Links + monospace + tables inherit the new tokens. */
a { color: var(--accent2); }
code, pre, kbd, samp { font-family: var(--font-mono); }
table { border-color: var(--border); }

/* Scrollbars, selection, focus ring. */
* { scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: rgba(59, 130, 246, 0.35); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  button, .btn, a.btn { transition: none; }
}