:root {
  color-scheme: dark;
  --bg: rgb(8, 8, 10);
  --font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --grain-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.18'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.48'/%3E%3C/svg%3E");
  --glass-blur: 24px;
  --surface-smoke: rgba(15, 15, 15, 0.6);
  --emissive-crimson: rgba(160, 22, 58, 0.46);
  --emissive-emerald: rgba(28, 151, 112, 0.32);
  --emissive-indigo: rgba(66, 78, 190, 0.36);
  --ink: #f7f9f7;
  --ink-soft: #d9dfdc;
  --muted: #9da6a1;
  --muted-strong: #c0c9c5;
  --panel: rgba(255, 255, 255, 0.03);
  --panel-strong: rgba(255, 255, 255, 0.045);
  --panel-deep: rgba(15, 15, 20, 0.9);
  --panel-faint: rgba(255, 255, 255, 0.03);
  --glass-fill: rgba(255, 255, 255, 0.03);
  --glass-fill-strong: rgba(255, 255, 255, 0.05);
  --glass-surface: rgba(255, 255, 255, 0.03);
  --glass-surface-strong: rgba(255, 255, 255, 0.05);
  --glass-tint-green: rgba(126, 226, 168, 0.08);
  --glass-tint-warm: rgba(255, 255, 255, 0.03);
  --glass-line: rgba(255, 255, 255, 0.05);
  --glass-line-soft: rgba(255, 255, 255, 0.05);
  --glass-highlight: rgba(255, 255, 255, 0.42);
  --glass-shadow: none;
  --stroke-soft: rgba(255, 255, 255, 0.055);
  --stroke-active: rgba(255, 255, 255, 0.09);
  --shadow-ambient: 0 28px 90px rgba(20, 22, 31, 0.1);
  --shadow-card:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.018),
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 28px 90px rgba(20, 22, 31, 0.1);
  --shadow-elevated:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    inset 0 -1px 0 rgba(255, 255, 255, 0.018),
    0 20px 44px rgba(0, 0, 0, 0.46),
    0 44px 110px rgba(20, 22, 31, 0.12);
  --line: rgba(255, 255, 255, 0.05);
  --line-strong: rgba(255, 255, 255, 0.08);
  --line-warm: rgba(255, 255, 255, 0.08);
  --accent: #c9fff0;
  --accent-2: #ff7846;
  --accent-3: #f7c557;
  --good: #7ee2a8;
  --warn: #e9bf74;
  --danger: #f39aa9;
  --shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.32);
  --radius: 20px;
  --rail-collapsed: 76px;
  --rail-expanded: 252px;
  --ease-decel: cubic-bezier(0.08, 0.88, 0.12, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --quick-left: 18px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: 0;
  color: var(--ink);
  overflow-x: hidden;
  background: var(--bg);
  isolation: isolate;
}

body.app-page {
  height: 100vh;
  overflow: hidden;
}

body.app-page::after {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grain-texture);
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
  opacity: 0.38;
  content: "";
}

body.app-page > .app-shell {
  position: relative;
  z-index: 2;
}

/* Ambient backdrop hooks remain in the markup, but the app surface now stays visually flat. */
.cinematic-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient-bleed {
  position: absolute;
  width: 52vmax;
  height: 52vmax;
  border-radius: 999px;
  filter: blur(46px);
  opacity: 0.74;
  transform: translate3d(0, 0, 0);
}

.ambient-bleed-crimson {
  top: -22vmax;
  left: 14vw;
  background: radial-gradient(circle, var(--emissive-crimson), transparent 66%);
}

.ambient-bleed-emerald {
  right: -18vmax;
  bottom: 4vh;
  background: radial-gradient(circle, var(--emissive-emerald), transparent 64%);
}

.ambient-bleed-indigo {
  bottom: -24vmax;
  left: 34vw;
  background: radial-gradient(circle, var(--emissive-indigo), transparent 68%);
}

@media (min-width: 781px) {
  body.app-page {
    position: fixed;
    inset: 0;
    width: 100%;
  }
}

.app-shell.has-open-detail {
  position: relative;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: blur(24px) saturate(1.06);
  -webkit-backdrop-filter: blur(24px) saturate(1.06);
  cursor: pointer;
}

button:hover,
button:focus-visible {
  border-color: rgba(255, 255, 255, 0.06);
  background-image: none;
  background-color: rgba(255, 255, 255, 0.035);
  outline: none;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(120, 224, 210, 0.38);
  outline-offset: 2px;
}

input,
textarea,
select {
  color: var(--ink);
}

.glass-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--stroke-soft);
  background-image: none;
  background-color: var(--surface-smoke);
  background-clip: padding-box;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
}

.glass-panel:not(.login-card)::before,
.daily-card::before,
.calendar-card::before,
.recent-card::before,
.list-item::before,
.stat-card::before,
.note-editor::before,
.frontmatter-box::before,
.mode-card::before,
.result-card::before,
.todo-meta-card::before,
.todo-description::before,
.todo-checklist::before,
.raw-note-panel::before {
  content: "";
  display: none;
}

.glass-panel:not(.topbar):not(.login-card)::after,
.daily-card::after,
.calendar-card::after,
.recent-card::after,
.list-item::after,
.stat-card::after,
.note-editor::after,
.frontmatter-box::after,
.mode-card::after,
.result-card::after,
.todo-meta-card::after,
.todo-description::after,
.todo-checklist::after,
.raw-note-panel::after {
  content: "";
  display: none;
}

.daily-card,
.calendar-card,
.recent-card,
.list-item,
.stat-card,
.note-editor,
.frontmatter-box,
.mode-card,
.result-card,
.todo-meta-card,
.todo-description,
.todo-checklist,
.raw-note-panel,
.metric-pill,
.mode-buttons button,
.folder-button,
.quick-input,
.toast {
  background-image: none;
  background-color: rgba(255, 255, 255, 0.03);
  background-clip: padding-box;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px) saturate(1.02);
  -webkit-backdrop-filter: blur(12px) saturate(1.02);
}

.eyebrow {
  margin: 0 0 5px;
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.muted {
  color: var(--muted);
}

.login-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.login-shell {
  width: min(100%, 460px);
}

.login-card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(7, 16, 20, 0.86), rgba(15, 28, 34, 0.64)),
    rgba(7, 16, 20, 0.68);
}

.login-card::before {
  content: "";
  display: block;
  height: 132px;
  margin: -30px -30px 24px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(4, 9, 12, 0.06), rgba(4, 9, 12, 0.28)),
    url("/static/brain-orbital-observatory.webp");
  background-position: center;
  background-size: cover;
}

.login-card h1 {
  margin: 0;
  max-width: 11ch;
  color: var(--ink);
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 0.96;
}

.login-card p {
  max-width: 34rem;
}

.login-form {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.login-form input,
.pane-heading input,
.quick-input textarea,
.quick-input select,
.note-editor textarea,
.mode-card textarea,
.mode-card input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(4, 9, 12, 0.44);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

.login-form input {
  min-height: 48px;
  padding: 0 12px;
}

.login-form button,
.quick-input button,
.note-editor button,
.mode-card button {
  color: #031011;
  border-color: rgba(120, 224, 210, 0.48);
  background: linear-gradient(135deg, var(--accent), #d8f7ef);
  box-shadow: none;
  font-weight: 600;
}