:root {
  /* Ambient backdrop the glass refracts */
  --canvas: #eef1f7;
  --wash-1: rgb(120 170 255 / 0.55);
  --wash-2: rgb(196 170 255 / 0.45);
  --wash-3: rgb(140 225 205 / 0.40);

  /* Liquid Glass material */
  --glass: rgb(255 255 255 / 0.58);
  --glass-strong: rgb(255 255 255 / 0.72);
  --glass-bar: rgb(255 255 255 / 0.46);
  --glass-rim: rgb(15 23 42 / 0.08);
  --glass-edge: rgb(255 255 255 / 0.85);
  --glass-lens: rgb(255 255 255 / 0.3);
  --glass-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0) 42%);
  --glass-shadow: 0 12px 32px -14px rgb(15 23 42 / 0.28), 0 2px 6px -2px rgb(15 23 42 / 0.08);
  --blur: 28px;

  /* Apple fills for controls on glass */
  --fill: rgb(118 118 128 / 0.12);
  --fill-2: rgb(118 118 128 / 0.2);
  --hairline: rgb(15 23 42 / 0.09);
  --inset: rgb(15 23 42 / 0.045);

  --text: #0b0d12;
  --text-2: #3a4150;
  --text-3: #5b6372;
  --control-border: #8a93a1;

  --accent: #0057b8;
  --accent-fill: #0a6cff;
  --accent-hover: #0058c2;
  --accent-tint: rgb(0 122 255 / 0.14);
  --on-accent: #ffffff;
  --thumb: rgb(255 255 255 / 0.95);

  --ok: #1a6a2e;
  --ok-tint: rgb(52 199 89 / 0.16);
  --warn: #9a4a00;
  --warn-tint: rgb(255 149 0 / 0.18);
  --err: #c4001a;
  --err-tint: rgb(255 59 48 / 0.13);

  --json-key: #8a2db5;
  --json-string: #1a6a2e;
  --json-number: #0057b8;
  --json-literal: #9a4a00;

  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --radius: 14px;
  --radius-lg: 20px;
  --gutter: 16px;

  color-scheme: light;
  accent-color: var(--accent-fill);
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #06080d;
    --wash-1: rgb(40 90 220 / 0.42);
    --wash-2: rgb(110 60 200 / 0.34);
    --wash-3: rgb(10 120 110 / 0.30);

    --glass: rgb(30 34 44 / 0.52);
    --glass-strong: rgb(24 27 36 / 0.70);
    --glass-bar: rgb(28 32 42 / 0.44);
    --glass-rim: rgb(255 255 255 / 0.09);
    --glass-edge: rgb(255 255 255 / 0.16);
    --glass-lens: rgb(255 255 255 / 0.05);
    --glass-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0) 40%);
    --glass-shadow: 0 14px 36px -14px rgb(0 0 0 / 0.7), 0 2px 6px -2px rgb(0 0 0 / 0.4);

    --fill: rgb(118 118 128 / 0.24);
    --fill-2: rgb(118 118 128 / 0.34);
    --hairline: rgb(255 255 255 / 0.09);
    --inset: rgb(0 0 0 / 0.28);

    --text: #f5f6f8;
    --text-2: #c3c9d3;
    --text-3: #9aa3b1;
    --control-border: #6b7686;

    --accent: #5aa9ff;
    --accent-fill: #0a6cff;
    --accent-hover: #0058e0;
    --accent-tint: rgb(10 132 255 / 0.26);
    --on-accent: #ffffff;
    --thumb: rgb(120 120 128 / 0.55);

    --ok: #4fd377;
    --ok-tint: rgb(48 209 88 / 0.18);
    --warn: #ffb340;
    --warn-tint: rgb(255 159 10 / 0.18);
    --err: #ff6b62;
    --err-tint: rgb(255 69 58 / 0.18);

    --json-key: #d5a6ff;
    --json-string: #7ee29b;
    --json-number: #7cbcff;
    --json-literal: #ffc46b;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

/* Layout rules (display: grid/flex) must never override the hidden attribute */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--fill-2) transparent; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
}

/* Static ambient wallpaper behind every glass surface (no motion) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60vmax 50vmax at 22% 14%, var(--wash-1), transparent 62%),
    radial-gradient(55vmax 45vmax at 76% 34%, var(--wash-2), transparent 62%),
    radial-gradient(60vmax 50vmax at 50% 92%, var(--wash-3), transparent 60%),
    var(--canvas);
  pointer-events: none;
}

::selection { background: var(--accent-fill); color: var(--on-accent); }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-fill) 55%, transparent);
  outline-offset: 2px;
}

button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Liquid Glass material: one recipe, two weights */

.glass,
.glass-strong {
  background-color: var(--glass);
  background-image: var(--glass-sheen);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  border: 1px solid var(--glass-rim);
  /* Bright top edge + faint lower rim: the edge light the material reads by */
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 var(--glass-lens), var(--glass-shadow);
}
.glass-strong { background-color: var(--glass-strong); }

/* ------------------------------------------------------------------ */
/* Buttons: capsules */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 16px;
  border: 1px solid var(--glass-rim);
  border-radius: 999px;
  background: var(--fill);
  color: var(--text);
  font-weight: 590;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 120ms var(--ease-out), background-color 150ms ease, color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn .icon { width: 16px; height: 16px; flex: none; }

.btn-primary {
  border-color: transparent;
  background: var(--accent-fill);
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 4px 10px -4px rgb(15 23 42 / 0.35);
}
.btn.is-done {
  border-color: transparent;
  background: #1f7a36;
  color: #ffffff;
  box-shadow: none;
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text-2);
}

.btn-small { min-height: 30px; padding: 0 12px; font-size: 13px; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--fill-2); }
  .btn-primary:hover { background: var(--accent-hover); }
  .btn-ghost:hover { background: var(--fill); color: var(--text); }
  .btn.is-done:hover { background: #1f7a36; }
}

/* Inputs: filled fields with a visible edge */

.input {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--control-border);
  border-radius: 10px;
  background: var(--fill);
  color: var(--text);
}
.input::placeholder { color: var(--text-3); }
.input:focus-visible { outline-offset: 0; border-color: var(--accent-fill); }

/* Badges: tinted capsules */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 590;
  letter-spacing: 0;
  white-space: nowrap;
}
.badge-ok { background: var(--ok-tint); color: var(--ok); }
.badge-warn { background: var(--warn-tint); color: var(--warn); }
.badge-err { background: var(--err-tint); color: var(--err); }
.badge-accent { background: var(--accent-tint); color: var(--accent); }

/* ------------------------------------------------------------------ */
/* Accessibility fallbacks */

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color 150ms ease; }
  .btn:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass: #f7f8fb;
    --glass-strong: #fbfcfd;
    --glass-bar: #fbfcfd;
    --glass-sheen: none;
  }
  .glass, .glass-strong, .notice { -webkit-backdrop-filter: none; backdrop-filter: none; }
  body::before { background: var(--canvas); }
}
@media (prefers-reduced-transparency: reduce) and (prefers-color-scheme: dark) {
  :root { --glass: #1b1f27; --glass-strong: #161a21; --glass-bar: #161a21; }
}

@media (prefers-contrast: more) {
  :root {
    --glass: #ffffff;
    --glass-strong: #ffffff;
    --glass-bar: #ffffff;
    --glass-rim: #5b6372;
    --hairline: #8a93a1;
    --text-2: #1f2430;
    --text-3: #3a4150;
  }
  .glass, .glass-strong, .notice { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .notice { background: var(--glass); border-color: var(--err); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --glass: #0f1218;
    --glass-strong: #0f1218;
    --glass-bar: #0f1218;
    --glass-rim: #9aa3b1;
    --hairline: #6b7686;
    --text-2: #e2e6ec;
    --text-3: #c3c9d3;
  }
}