/*
  Knowledge OS visual theme
  Scope: visual language only. Do not add layout, grid, sizing, ordering, or data rules here.
  Reference cues: obsidian work surface, layered graphite panels, restrained emerald states.
*/
:root {
  --g: #23d98b;
  --gd: #0c9a61;
  --b: #5f9bff;
  --p: #b495ff;
  --a: #e3b35e;
  --bg: #080a0a;
  --panel: #0f1212;
  --ink: #f0f4f1;
  --muted: #a5afaa;
  --dim: #68736e;
  --line: rgba(225, 235, 229, .11);
  --theme-surface: #0f1212;
  --theme-raised: #151919;
  --theme-input: #0a0d0d;
  --theme-outline: rgba(227, 236, 230, .13);
  --theme-highlight: rgba(255, 255, 255, .055);
  --theme-shadow: 0 18px 44px rgba(0, 0, 0, .31), inset 0 1px 0 rgba(255, 255, 255, .045);
  color-scheme: dark;
}

html,
body {
  background: #080a0a !important;
  color: var(--ink);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 17% -12%, rgba(35, 217, 139, .075), transparent 24rem),
    linear-gradient(115deg, rgba(255, 255, 255, .018), transparent 28%, transparent 72%, rgba(255, 255, 255, .012));
  opacity: .9;
}

.glass,
.panel,
.summary,
.summary-card,
.module,
.finance-pane,
.setting-card,
.health-wide,
.habit-month-wrap,
.dialog,
.settings,
.modal {
  background-color: var(--theme-surface) !important;
  background-image: linear-gradient(180deg, var(--theme-highlight), transparent 3.2rem) !important;
  border-color: var(--theme-outline) !important;
  box-shadow: var(--theme-shadow) !important;
}

.header,
.topbar,
.nav,
.settings-tabs,
.panel-head,
.module-head,
.panel-title,
.finance-pane-head,
.dialog-top,
.settings-top {
  border-color: var(--theme-outline) !important;
}

.summary.daily,
.summary.health,
.summary.finance,
.summary.growth,
.summary-card.health,
.summary-card.finance,
.summary-card.growth,
.summary-card.weekly-growth {
  background-image: linear-gradient(140deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015) 60%, rgba(35, 217, 139, .045)) !important;
}

/* The reference uses color as a focal cue on a small number of summary cards.
   Keep the surrounding workbench neutral; only these overview cards receive a soft, low-saturation glow. */
.summary.daily,
.summary-card.daily {
  background-image:
    radial-gradient(circle at 82% 18%, rgba(227, 74, 149, .52), transparent 46%),
    radial-gradient(circle at 20% 105%, rgba(35, 217, 139, .22), transparent 55%),
    linear-gradient(135deg, #343336, #191d1d 61%, #232127) !important;
}

.summary.health,
.summary-card.health {
  background-image:
    radial-gradient(circle at 78% 14%, rgba(45, 194, 236, .54), transparent 48%),
    radial-gradient(circle at 10% 105%, rgba(95, 155, 255, .26), transparent 56%),
    linear-gradient(135deg, #26383e, #151b1d 62%, #1c3037) !important;
}

.summary.finance,
.summary-card.finance {
  background-image:
    radial-gradient(circle at 80% 16%, rgba(180, 149, 255, .5), transparent 45%),
    radial-gradient(circle at 15% 112%, rgba(227, 179, 94, .3), transparent 54%),
    linear-gradient(135deg, #373039, #1d1a20 61%, #342a31) !important;
}

.summary.growth,
.summary-card.growth,
.summary-card.weekly-growth {
  background-image:
    radial-gradient(circle at 78% 16%, rgba(35, 217, 139, .48), transparent 48%),
    radial-gradient(circle at 16% 110%, rgba(65, 175, 227, .25), transparent 56%),
    linear-gradient(135deg, #253936, #151c1a 62%, #1c3129) !important;
}

.summary.health,
.summary-card.health { box-shadow: inset 2px 0 0 rgba(95, 155, 255, .5), var(--theme-shadow) !important; }
.summary.finance,
.summary-card.finance { box-shadow: inset 2px 0 0 rgba(180, 149, 255, .48), var(--theme-shadow) !important; }
.summary.growth,
.summary-card.growth { box-shadow: inset 2px 0 0 rgba(35, 217, 139, .5), var(--theme-shadow) !important; }

.module.blue { border-color: rgba(95, 155, 255, .38) !important; }
.module.purple { border-color: rgba(180, 149, 255, .38) !important; }
.module.amber { border-color: rgba(227, 179, 94, .38) !important; }

.finance-kpi:nth-child(1),
.weekly-kpi:nth-child(1) {
  background-image: radial-gradient(circle at 85% 4%, rgba(35, 217, 139, .28), transparent 54%) !important;
}
.finance-kpi:nth-child(2),
.weekly-kpi:nth-child(2) {
  background-image: radial-gradient(circle at 85% 4%, rgba(95, 155, 255, .28), transparent 54%) !important;
}
.finance-kpi:nth-child(3),
.weekly-kpi:nth-child(3) {
  background-image: radial-gradient(circle at 85% 4%, rgba(227, 179, 94, .25), transparent 54%) !important;
}

.module,
.record,
.book,
.topic,
.ledger,
.weekly-kpi,
.side-stat,
.habit-card,
.todo-row,
.line-item,
.route-node,
.finance-kpi,
.finance-pane,
.setting-card,
.weekly-page,
.advice-item,
.review-row,
.stage-column,
.diet-day,
.month-day,
.habit-month-cell {
  border-color: rgba(225, 235, 229, .105) !important;
}

h1,
h2,
h3,
.brand strong,
.brand h1,
.summary strong,
.finance-kpi strong,
.hero-box h1,
.life-vision p {
  color: #f4f7f5 !important;
  font-weight: 760;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

p,
small,
.muted,
.hint,
.empty,
.summary h3,
.summary-card h3,
.summary p,
.summary-card p,
.module p,
.panel-head p,
.finance-pane-head p,
.field-label,
.field,
.advice-label,
.weekly-kpi span,
.side-stat span {
  color: var(--muted) !important;
}

.live,
.summary-actions .edit,
.summary-actions button,
.side-stat b,
.module .foot,
.node small,
.record small,
.life-vision small,
.life-copy small,
.eyebrow,
.section-label,
.pill,
.habit-card:has(input:checked) small,
.habit-month-cell.on small {
  color: var(--g) !important;
}

button,
.button,
.edit,
.action-btn,
.secondary,
.close-settings,
.settings-tabs button,
.period-switch button,
.finance-segment button,
.advice-nav,
.weekly-nav,
.nav button,
.summary-actions button {
  background-color: #141818 !important;
  border-color: rgba(230, 238, 233, .13) !important;
  color: #dfe8e2 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 5px 14px rgba(0, 0, 0, .16);
}

button:hover,
.button:hover,
.edit:hover,
.action-btn:hover,
.secondary:hover,
.close-settings:hover,
.settings-tabs button:hover,
.period-switch button:hover,
.finance-segment button:hover,
.summary-actions button:hover {
  border-color: rgba(35, 217, 139, .5) !important;
  background-color: #18201d !important;
}

.primary,
.settings-tabs button.active,
.period-switch button.active,
.finance-segment button.active,
.nav button[aria-pressed="true"],
.nav button.active,
.advice-dot.active,
.weekly-dot.active,
.habit-month-cell.on,
.habit-card:has(input:checked) {
  background: linear-gradient(180deg, #146a48, #0e4f36) !important;
  border-color: rgba(71, 235, 161, .58) !important;
  color: #eafff3 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(35, 217, 139, .12), 0 8px 20px rgba(5, 116, 68, .24) !important;
}

.primary { color: #effff6 !important; }

input,
textarea,
select,
.field {
  background-color: var(--theme-input) !important;
  border-color: rgba(230, 238, 233, .16) !important;
  color: #edf5f0 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .28) !important;
}

input::placeholder,
textarea::placeholder { color: #65716b !important; }
input:focus,
textarea:focus,
select:focus { border-color: rgba(35, 217, 139, .68) !important; }
input[type="checkbox"],
input[type="radio"] { accent-color: var(--g); }

.overlay { background: rgba(1, 3, 3, .82) !important; }
.overlay.open { backdrop-filter: blur(.22rem) saturate(.75); }
.toast,
#captainNotice,
.tip { background: #111816 !important; border-color: rgba(35, 217, 139, .42) !important; }

.track,
.finance-bill-chart,
.line-chart,
.diet-board,
.month-calendar { background-color: rgba(255, 255, 255, .025) !important; }
.track span,
.finance-bill-bar,
.diet-dot,
.node:before { background: var(--g) !important; }

@media (max-width: 760px) {
  .nav { background-color: rgba(15, 18, 18, .94) !important; }
}