/* Kioku web brand: the connection page is the visual reference for every surface. */
:root {
  --color-scheme: dark;
  color-scheme: var(--color-scheme);
  --page: #08111f;
  --bg: var(--page);
  --surface: rgba(15, 29, 49, 0.94);
  --surface-strong: #13243b;
  --surface-subtle: #0b1728;
  --surface-hover: #1a2d46;
  --field-bg: var(--surface-subtle);
  --header-bg: rgba(8, 17, 31, 0.92);
  --modal-backdrop: rgba(8, 17, 31, 0.85);
  --shadow-overlay: 0 10px 30px rgba(0, 0, 0, 0.35);
  --grid-line: rgba(255, 255, 255, 0.025);
  --page-glow-primary: rgba(59, 153, 169, 0.22);
  --page-glow-secondary: rgba(50, 94, 165, 0.18);
  --bg-card: var(--surface);
  --bg-elevated: var(--surface-strong);
  --line: #2b415f;
  --border: var(--line);
  --border-strong: #47617f;
  --text: #f4f8ff;
  --text-main: var(--text);
  --muted: #a9b8cd;
  --text-muted: var(--muted);
  --text-faint: #91a3ba;
  --accent: #56c5d0;
  --accent-strong: #7ee2e9;
  --accent-soft: rgba(86, 197, 208, 0.12);
  --accent-dim: var(--accent-soft);
  --accent-border: rgba(86, 197, 208, 0.32);
  --accent-glow: rgba(86, 197, 208, 0.25);
  --text-on-accent: #07131d;
  --gold: #f5a623;
  --warning-text: #f5a623;
  --highlight-bg: #f5a623;
  --highlight-text: #07131d;
  --media-bg: #000;
  --media-control-bg: rgba(0, 0, 0, 0.5);
  --media-control-hover: rgba(0, 0, 0, 0.8);
  --text-on-media: #fff;
  --gold-soft: rgba(245, 166, 35, 0.12);
  --gold-border: rgba(245, 166, 35, 0.35);
  --danger: #ffb4b4;
  --text-on-danger: #07131d;
  --red: var(--danger);
  --danger-soft: rgba(255, 180, 180, 0.08);
  --danger-border: rgba(255, 180, 180, 0.3);
  --green: #8cdec1;
  --success-soft: rgba(140, 222, 193, 0.1);
  --success-border: rgba(140, 222, 193, 0.28);
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  --shadow-card: var(--shadow);
  --shadow-glow: 0 0 60px rgba(86, 197, 208, 0.08);
  --primary-gradient: linear-gradient(135deg, #7ee2e9, #4fb8c5);
  --primary-hover: #7ee2e9;
  --font-sans: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Explicit selection wins over the OS. The controller sets the resolved theme before first paint. */
:root[data-theme="light"] {
  --color-scheme: light;
  --page: #f3f7fc;
  --surface: rgba(255, 255, 255, 0.96);
  --surface-strong: #e8f0f7;
  --surface-subtle: #f8fbfd;
  --surface-hover: #dde9f3;
  --header-bg: rgba(243, 247, 252, 0.96);
  --modal-backdrop: rgba(23, 32, 51, 0.62);
  --shadow-overlay: 0 10px 30px rgba(33, 56, 83, 0.16);
  --grid-line: rgba(23, 32, 51, 0.05);
  --page-glow-primary: rgba(59, 153, 169, 0.09);
  --page-glow-secondary: rgba(50, 94, 165, 0.08);
  --line: #c7d6e4;
  --border-strong: #8296aa;
  --text: #172033;
  --muted: #526178;
  --text-faint: #526178;
  --accent: #176d79;
  --accent-strong: #145b68;
  --accent-soft: rgba(23, 109, 121, 0.09);
  --accent-border: rgba(23, 109, 121, 0.32);
  --accent-glow: rgba(23, 109, 121, 0.15);
  --warning-text: #8b5500;
  --gold-soft: rgba(245, 166, 35, 0.12);
  --gold-border: rgba(139, 85, 0, 0.35);
  --danger: #9f303e;
  --text-on-danger: #fff;
  --danger-soft: rgba(159, 48, 62, 0.08);
  --danger-border: rgba(159, 48, 62, 0.3);
  --green: #1c6b4f;
  --success-soft: rgba(28, 107, 79, 0.08);
  --success-border: rgba(28, 107, 79, 0.3);
  --shadow: 0 18px 50px rgba(33, 56, 83, 0.1);
  --shadow-glow: 0 0 60px rgba(23, 109, 121, 0.06);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-scheme: light;
    --page: #f3f7fc;
    --surface: rgba(255, 255, 255, 0.96);
    --surface-strong: #e8f0f7;
    --surface-subtle: #f8fbfd;
    --surface-hover: #dde9f3;
    --header-bg: rgba(243, 247, 252, 0.96);
    --modal-backdrop: rgba(23, 32, 51, 0.62);
    --shadow-overlay: 0 10px 30px rgba(33, 56, 83, 0.16);
    --grid-line: rgba(23, 32, 51, 0.05);
    --page-glow-primary: rgba(59, 153, 169, 0.09);
    --page-glow-secondary: rgba(50, 94, 165, 0.08);
    --line: #c7d6e4;
    --border-strong: #8296aa;
    --text: #172033;
    --muted: #526178;
    --text-faint: #526178;
    --accent: #176d79;
    --accent-strong: #145b68;
    --accent-soft: rgba(23, 109, 121, 0.09);
    --accent-border: rgba(23, 109, 121, 0.32);
    --accent-glow: rgba(23, 109, 121, 0.15);
    --warning-text: #8b5500;
    --gold-soft: rgba(245, 166, 35, 0.12);
    --gold-border: rgba(139, 85, 0, 0.35);
    --danger: #9f303e;
    --text-on-danger: #fff;
    --danger-soft: rgba(159, 48, 62, 0.08);
    --danger-border: rgba(159, 48, 62, 0.3);
    --green: #1c6b4f;
    --success-soft: rgba(28, 107, 79, 0.08);
    --success-border: rgba(28, 107, 79, 0.3);
    --shadow: 0 18px 50px rgba(33, 56, 83, 0.1);
    --shadow-glow: 0 0 60px rgba(23, 109, 121, 0.06);
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background:
    radial-gradient(circle at 18% 15%, var(--page-glow-primary), transparent 32rem),
    radial-gradient(circle at 86% 82%, var(--page-glow-secondary), transparent 30rem),
    var(--page);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

::selection { background: var(--primary-hover); color: var(--text-on-accent); }


/* A native control stays usable with keyboards, touch, and assistive technology. */
.theme-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  flex: 0 0 auto;
  color: var(--text-muted);
  font: 500 12px var(--font-sans);
}
.theme-control select {
  width: auto;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  background: var(--field-bg);
  color-scheme: var(--color-scheme);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.auth-tools { display: flex; justify-content: flex-end; margin-bottom: 18px; }

/* The auth shell is also used by the short-lived provider return pages. */
.brand-auth {
  display: grid;
  place-items: center;
  padding: 32px 18px;
  overflow-x: hidden;
}
.brand-auth main { position: relative; z-index: 1; width: min(100%, 470px); }
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
  color: var(--text);
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
}
.auth-brand img { width: 38px; height: 38px; border-radius: 10px; }
.auth-card {
  padding: clamp(26px, 6vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.auth-eyebrow {
  margin: 0 0 10px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.auth-card h1 { margin: 0; font-size: clamp(29px, 8vw, 38px); line-height: 1.06; letter-spacing: -0.035em; }
.auth-status { margin: 15px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.auth-footer { margin: 18px auto 0; color: var(--text-faint); font-size: 12px; text-align: center; }
.auth-footer a { color: var(--muted); text-underline-offset: 3px; }

@media (max-width: 480px) {
  .brand-auth { padding: 22px 14px; }
  .auth-card { border-radius: 20px; }
}

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

@media print {
  :root, :root[data-theme] {
    --color-scheme: light;
    color-scheme: light;
    --page: #fff;
    --surface: #fff;
    --surface-strong: #f3f5f8;
    --surface-subtle: #f8fafc;
    --surface-hover: #e8edf2;
    --line: #d9e0ea;
    --border-strong: #b8c4d4;
    --text: #172033;
    --muted: #526178;
    --text-faint: #526178;
    --accent: #1d6f8f;
    --accent-strong: #1d6f8f;
    --text-on-accent: #172033;
    --primary-gradient: linear-gradient(#e8edf2, #e8edf2);
    --danger: #9f2525;
    --green: #247a55;
    --gold: #9b6000;
    --warning-text: #8b5500;
    --header-bg: #fff;
    --shadow: none;
    --shadow-glow: none;
  }
  body { color: var(--text); background: #fff; }
  body::before, .theme-control { display: none; }
}