:root {
  color-scheme: dark;
  --bg: #0a0f1d;
  --surface: #141b2c;
  --surface-2: #1b2438;
  --text: #f6f8ff;
  --muted: #94a0b8;
  --line: #263149;
  --accent: #7c8cff;
  --yes: #3dd598;
  --no: #ff6b7f;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 15% -5%, #1d2a50 0, transparent 35%), var(--bg); color: var(--text); font-size: 16px; }
button, input { font: inherit; }
button { color: inherit; }
.app-shell { width: min(100%, 720px); min-height: 100vh; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 18px 110px; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 64px; margin-bottom: 20px; }
.eyebrow { color: var(--muted); font-size: .82rem; }
h1 { font-size: 1.75rem; line-height: 1.15; margin: 4px 0 0; }
h2 { margin: 0; font-size: 1.05rem; }
p { margin: 0; }
.arrow { border: 0; background: var(--surface-2); border-radius: 50%; width: 44px; height: 44px; cursor: pointer; }
.view { display: none; animation: enter .18s ease-out; }
.view.active { display: block; }
@keyframes enter { from { opacity: .45; transform: translateY(4px); } }
.card { background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 14px 35px rgba(0,0,0,.16); }
.date-switcher { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; padding: 8px; }
.date-label { display: grid; place-items: center; cursor: pointer; min-height: 48px; font-weight: 700; }
.date-label input { position: absolute; opacity: 0; pointer-events: none; }
.arrow { font-size: 2rem; line-height: 1; }
.progress-row { display: flex; justify-content: space-between; gap: 12px; padding: 14px 4px 9px; color: var(--muted); font-size: .8rem; }
.save-state { opacity: 0; transition: opacity .2s; }
.save-state.visible { opacity: 1; }
.event-list { display: grid; gap: 10px; }
.event-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
.event-name { display: flex; align-items: center; gap: 10px; font-weight: 650; }
.event-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--event); box-shadow: 0 0 14px var(--event); }
.binary { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: #0d1322; border-radius: 14px; }
.binary button { width: 54px; min-height: 40px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 750; }
.binary button.selected.yes { background: color-mix(in srgb, var(--yes) 22%, var(--surface)); color: #85f0c4; }
.binary button.selected.no { background: color-mix(in srgb, var(--no) 20%, var(--surface)); color: #ff9aa8; }
.empty { color: var(--muted); padding: 30px 16px; text-align: center; }
.hidden { display: none !important; }
.section-toolbar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; text-align: center; margin-bottom: 12px; }
.calendar-options { padding: 13px 16px; margin-bottom: 12px; }
.calendar-options label { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .85rem; }
.calendar-options select { min-width: 72px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 28px 8px 12px; background: var(--surface-2); color: var(--text); }
.calendars { display: grid; gap: 12px; }
.calendar { padding: 14px 10px; }
.calendar h3 { margin: 2px 0 12px; text-align: center; font-size: .95rem; text-transform: capitalize; }
.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.weekdays span { color: var(--muted); font-size: .7rem; padding: 5px 0 12px; text-align: center; }
.day-cell { display: grid; place-items: center; border: 0; background: transparent; min-width: 0; height: 52px; cursor: pointer; }
.day-ring { width: 39px; height: 39px; display: grid; place-items: center; position: relative; border-radius: 50%; background: var(--ring, var(--surface-2)); }
.day-ring::after { content: ''; position: absolute; inset: 4px; border-radius: inherit; background: var(--surface); }
.day-number { position: relative; z-index: 1; font-size: .8rem; }
.day-cell.today .day-number { color: var(--accent); font-weight: 800; }
.day-cell.muted { opacity: .28; }
.filter-hint { margin: 14px 3px 0; color: var(--muted); font-size: .75rem; }
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.legend-item { display: flex; gap: 7px; align-items: center; color: var(--text); font-size: .77rem; }
.legend-item i { width: 8px; height: 8px; border-radius: 50%; background: var(--event); }
.filter-chip { border: 1px solid color-mix(in srgb, var(--event) 35%, var(--line)); border-radius: 999px; padding: 8px 11px; background: color-mix(in srgb, var(--event) 10%, var(--surface)); cursor: pointer; transition: opacity .15s, filter .15s; }
.filter-chip.off { opacity: .42; filter: grayscale(1); text-decoration: line-through; }
.filter-chip.archived { border-style: dashed; }
.filter-chip small { color: var(--muted); font-size: .64rem; }
.filter-empty { color: var(--muted); font-size: .78rem; padding: 5px 2px; }
.summary-range { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 10px; align-items: end; padding: 14px; }
.summary-range label { display: grid; gap: 7px; color: var(--muted); font-size: .75rem; }
.summary-range input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--surface-2); color: var(--text); }
.summary-range > span { color: var(--muted); padding-bottom: 10px; }
.summary-filters { margin-bottom: 12px; }
.summary-period { color: var(--muted); margin: 14px 4px 10px; font-size: .85rem; }
.summary-list { display: grid; gap: 10px; }
.summary-card { padding: 16px; overflow: hidden; }
.summary-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.summary-orb { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; background: color-mix(in srgb, var(--event) 18%, var(--surface)); color: var(--event); font-weight: 800; }
.summary-copy strong { display: block; margin-bottom: 3px; }
.summary-copy span { color: var(--muted); font-size: .78rem; }
.summary-value { font-size: 1.35rem; font-weight: 800; }
.trend-title { color: var(--muted); font-size: .72rem; margin: 16px 0 8px; }
.trend-scroll { overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.trend { display: grid; gap: 7px; min-width: max-content; align-items: end; }
.trend-column { width: 48px; display: grid; grid-template-rows: 17px 68px 18px; gap: 4px; align-items: end; text-align: center; }
.trend-percent { color: var(--muted); font-size: .64rem; }
.trend-track { position: relative; width: 17px; height: 68px; margin: 0 auto; border-radius: 7px; background: var(--surface-2); overflow: hidden; }
.trend-bar { position: absolute; inset: auto 0 0; min-height: 2px; border-radius: inherit; background: var(--event); }
.trend-bar.empty { background: var(--line); }
.trend-month { color: var(--muted); font-size: .65rem; white-space: nowrap; }
.settings-card { padding: 18px; }
.setting-heading, .settings-title { display: flex; justify-content: space-between; align-items: center; }
.setting-heading p, .settings-title p { color: var(--muted); font-size: .78rem; margin-top: 4px; }
.switch input { position: absolute; opacity: 0; }
.switch span { display: block; width: 50px; height: 30px; padding: 3px; border-radius: 999px; background: #313c52; cursor: pointer; transition: .2s; }
.switch span::after { content: ''; display: block; width: 24px; height: 24px; border-radius: 50%; background: white; transition: .2s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(20px); }
.field { display: grid; grid-template-columns: 1fr auto; align-items: center; border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.field input { color: var(--text); border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 9px 12px; }
.timezone { color: var(--muted); font-size: .75rem; margin-top: 10px; }
.settings-title { margin: 24px 4px 10px; }
.settings-events { overflow: hidden; }
.settings-event-wrap { border-bottom: 1px solid var(--line); }
.settings-event-wrap:last-child { border-bottom: 0; }
.settings-event { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 9px; align-items: center; padding: 13px 15px; }
.color-button { width: 32px; height: 32px; border: 2px solid color-mix(in srgb, var(--event) 55%, white); border-radius: 10px; background: var(--event); cursor: pointer; box-shadow: 0 0 14px color-mix(in srgb, var(--event) 35%, transparent); }
.settings-event input[type="text"] { width: 100%; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: 9px; color: var(--text); padding: 7px 8px; outline: none; text-overflow: ellipsis; }
.settings-event input[type="text"][readonly] { cursor: default; }
.settings-event.editing input[type="text"] { border-color: var(--accent); background: var(--surface-2); }
.edit-name-button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--muted); cursor: pointer; font-size: 1rem; }
.settings-event.editing .edit-name-button { color: #86efc4; background: color-mix(in srgb, var(--yes) 18%, var(--surface-2)); }
.preset-palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; padding: 0 15px 14px 57px; }
.preset-color { width: 100%; aspect-ratio: 1; max-width: 34px; border: 2px solid transparent; border-radius: 10px; background: var(--preset); cursor: pointer; justify-self: center; }
.preset-color.selected { border-color: white; box-shadow: 0 0 0 2px var(--preset); }
.add-event { display: grid; grid-template-columns: minmax(0,1fr) minmax(124px, auto); gap: 8px; padding: 10px; margin-top: 10px; }
.add-event input[type="text"], .add-event input:not([type]) { min-width: 0; border: 0; color: var(--text); background: transparent; padding: 0 8px; outline: none; }
.add-event button { min-width: 124px; min-height: 48px; border: 0; border-radius: 13px; padding: 0 18px; color: white; background: var(--accent); font-weight: 700; cursor: pointer; }
.feedback-card { display: grid; gap: 16px; margin-top: 22px; padding: 18px; }
.feedback-card p { color: var(--muted); font-size: .78rem; margin-top: 4px; }
.feedback-card button { min-height: 48px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); color: #cbd2ff; font-weight: 700; cursor: pointer; }
.bottom-nav { position: fixed; z-index: 10; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 720px); display: grid; grid-template-columns: repeat(4,1fr); padding: 9px 8px calc(9px + env(safe-area-inset-bottom)); background: rgba(12,17,30,.92); border-top: 1px solid var(--line); backdrop-filter: blur(18px); }
.nav-item { display: grid; gap: 3px; place-items: center; border: 0; background: transparent; color: var(--muted); font-size: .69rem; cursor: pointer; }
.nav-item span { display: grid; place-items: center; width: 34px; height: 30px; border-radius: 12px; font-size: 1rem; }
.nav-item.active { color: var(--text); }
.nav-item.active span { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 92px; transform: translate(-50%, 20px); background: #edf1ff; color: #111827; padding: 11px 16px; border-radius: 14px; opacity: 0; pointer-events: none; transition: .2s; box-shadow: 0 12px 30px rgba(0,0,0,.3); font-size: .85rem; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 640px) {
  .app-shell { padding-inline: 28px; }
  .day-cell { height: 64px; }
  .day-ring { width: 44px; height: 44px; }
  .calendars.multi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendars.multi .day-cell { height: 46px; }
  .calendars.multi .day-ring { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }