@charset "UTF-8";

:root {
  color-scheme: light;
  --page: #ededed;
  --surface: rgb(255 255 255 / 92%);
  --ink: #272727;
  --secondary: #575757;
  --muted: #575757;
  --line: #e3e3e3;
  --purple: #7c3aed;
  --purple-soft: #ede9fe;
  --blue: #2563eb;
  --blue-soft: #dbeafe;
  --peach: #ea580c;
  --peach-soft: #ffedd5;
  --green: #059669;
  --green-soft: #d1fae5;
  --shadow: inset 0 1px 0 #fff, 0 6px 22px -12px #00000024;
  --sidebar-width: 232px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse 65% 80% at 0% 0%, #ede9fe, transparent 72%),
    radial-gradient(ellipse 60% 70% at 100% 5%, #dbeafe, transparent 78%),
    radial-gradient(ellipse 80% 70% at 50% 100%, #ffedd5, transparent 75%),
    linear-gradient(135deg, #f5f3ff, #fdfdff 58%, #fff7ed);
  background-attachment: fixed;
}
button, input, select, textarea { font: inherit; accent-color: #414141; caret-color: #333; }
::selection { background: #d3d3d3; color: #202020; }
html { scrollbar-color: #999 #ededed; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button, a { touch-action: manipulation; }
button:disabled { opacity: .5; cursor: not-allowed; }
button { border: 0; }
input, select, textarea { min-width: 0; }
button, a, input, select, textarea { outline: none; }
:focus-visible { outline: 3px solid #b4b4b4; outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
svg { display: block; flex-shrink: 0; }
ul { padding: 0; margin: 0; list-style: none; }
[hidden] { display: none !important; }
.icon { width: 20px; height: 20px; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted { color: var(--secondary); font-size: 12px; }
.color-purple { --accent: var(--purple); --accent-soft: var(--purple-soft); }
.color-blue { --accent: var(--blue); --accent-soft: var(--blue-soft); }
.color-peach { --accent: var(--peach); --accent-soft: var(--peach-soft); }
.color-green { --accent: var(--green); --accent-soft: var(--green-soft); }
.color-dawn { --accent: var(--peach); --accent-soft: var(--peach-soft); }
.color-dusk { --accent: var(--blue); --accent-soft: var(--blue-soft); }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 50; background: var(--ink); color: #ffffff; border-radius: 8px; padding: 10px 18px; }
.skip-link:focus { top: 10px; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); display: flex; flex-direction: column; background: linear-gradient(180deg, #ffffffee, #fdfdfdd9); border-right: 1px solid #ffffffb3; box-shadow: 0 20px 50px -30px #4c1d9540; padding: 36px 20px 22px; z-index: 10; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px; font-weight: 650; font-size: 21px; letter-spacing: .2px; }
.brand-mark { width: 38px; height: 38px; border-radius: 13px; background: linear-gradient(150deg, #6d28d9, #2563eb 65%, #0891b2); color: white; display: grid; place-items: center; box-shadow: inset 0 1px 0 #ffffff66, 0 8px 18px -8px #4338ca80; }
.brand-mark svg { width: 29px; height: 29px; }
.brand-caption { display: block; font-size: 7px; font-weight: 500; letter-spacing: 1.35px; color: var(--muted); margin-top: 2px; }
.nav-label { color: var(--muted); font-size: 11px; letter-spacing: 1.2px; padding: 0 17px; margin-top: 30px; margin-bottom: 13px; }
#desktop-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-link { display: flex; align-items: center; gap: 14px; min-height: 45px; padding: 10px 17px; border-radius: 10px; color: var(--secondary); font-size: 14px; transition: background .18s, color .18s; }
.nav-link:hover { color: var(--ink); background: #f5f5f5; }
.nav-link.is-active { background: #ededed; color: #5e5e5e; font-weight: 600; }
.nav-count { margin-left: auto; font-size: 11px; color: #5e5e5e; font-weight: 500; font-variant-numeric: tabular-nums; }
.nav-link.is-active .nav-count { color: #5e5e5e; }
.sidebar-note { margin-top: auto; padding: 28px 16px 24px; }
.note-spark { width: 31px; height: 31px; color: #5e5e5e; margin-bottom: 17px; }
.sidebar-note p { font-size: 12px; line-height: 2; color: #5e5e5e; }
.sidebar-note > span { display: block; font-size: 10px; color: #5e5e5e; margin-top: 12px; letter-spacing: .7px; }
.profile { position: relative; display: flex; align-items: center; gap: 11px; padding: 19px 6px 0; border-top: 1px solid var(--line); }
.avatar { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: #e9e9e9; color: #5e5e5e; font-size: 13px; }
.profile strong { display: block; font-size: 12px; font-weight: 550; }
.profile div > span { font-size: 9px; color: var(--muted); }
.profile .avatar { flex-shrink: 0; }
.profile-text { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.hidden-edit { position: absolute; inset: 0; width: 100%; padding: 0; background: transparent; color: #5e5e5e; border-radius: 6px; }
.hidden-edit svg { position: absolute; width: 15px; height: 15px; opacity: 0; transition: opacity .15s; }
.hidden-edit:hover svg, .hidden-edit:focus-visible svg { opacity: 1; }
.profile-edit svg { right: 2px; top: 50%; transform: translateY(-50%); }
.greeting-edit-area { position: relative; display: inline-block; }
.greeting-edit svg { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.workspace { margin-left: var(--sidebar-width); }
.topbar { display: flex; justify-content: space-between; align-items: center; height: 78px; border-bottom: 1px solid var(--line); padding: 0 42px; background: #fdfdfdb3; }
.breadcrumb { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--secondary); }
.breadcrumb-slash { color: #5e5e5e; }
#breadcrumb-current { color: #565656; }
.topbar-actions { display: flex; align-items: center; gap: 24px; }
.header-date { color: var(--secondary); font-size: 11px; }
.button { min-height: 40px; border-radius: 999px; padding: 9px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 550; white-space: nowrap; transition: background .18s, box-shadow .18s, transform .16s var(--ease); }
.button:active { transform: scale(.97); }
.button-primary { color: #fff; background: linear-gradient(150deg, #6d28d9, #2563eb 65%, #0891b2); box-shadow: inset 0 1px 0 #ffffff66, 0 8px 22px -10px #4338ca80; }
.button-primary:hover { background: linear-gradient(150deg, #5b21b6, #1d4ed8 65%, #0e7490); box-shadow: inset 0 1px 0 #ffffff66, 0 10px 26px -10px #4338ca99; }
.button-secondary { background: #ffffffd9; color: #414141; box-shadow: inset 0 0 0 1px #e5e7eb; }
.button-secondary:hover { background: #fff; box-shadow: inset 0 0 0 1px #d1d5db; }
.button-small { min-height: 34px; padding: 6px 13px; font-size: 11px; }
.plus-sign { font-size: 19px; font-weight: 300; line-height: 1; }
.button .icon { width: 16px; height: 16px; }
.account-switch { display: flex; gap: 8px; margin: 0 0 18px; }
.account-mode { flex: 1; min-height: 36px; border: 1px solid #e5e7eb; border-radius: 999px; background: #ffffffd9; color: #555; font-size: 11px; }
.account-mode.is-active { color: #fff; border-color: transparent; background: linear-gradient(150deg, #6d28d9, #2563eb); }
.account-error { color: #9f1239; white-space: pre-wrap; }
.cloud-status { display: inline-flex; align-items: center; gap: 6px; }
.cloud-status .status-dot { width: 6px; height: 6px; }
main { padding: 34px 42px 0; max-width: 1420px; margin: 0 auto; min-height: calc(100vh - 145px); }
main:focus { outline: none; }
.page-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.eyebrow { color: #575757; font-size: 9px; font-weight: 550; letter-spacing: 2.1px; }
h1 { font-size: 34px; letter-spacing: -.9px; font-weight: 650; line-height: 1.45; margin-top: 8px; }
.heading-dot { color: #575757; }
.page-intro p { font-size: 13px; color: var(--secondary); margin-top: 7px; letter-spacing: .2px; }
.intro-stamp { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: #575757; white-space: nowrap; margin-top: 25px; }
.intro-stamp .icon { color: #5e5e5e; width: 17px; height: 17px; }
.card { position: relative; border: 1px solid #ffffffd9; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: 22px; }
.greeting-card { padding: 26px 30px; background: linear-gradient(125deg, #ffffffe6, #ffffffb3 58%, #ede9fecc); border-color: #ffffffcc; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #ffffffb3, 0 16px 40px -22px #4c1d9540; overflow: hidden; position: relative; }
.greeting-top { display: flex; align-items: center; justify-content: space-between; }
.hello-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: #5e5e5e; }
.hello-pill > span { width: 6px; height: 6px; background: linear-gradient(135deg, #7c3aed, #2563eb); border-radius: 50%; }
.tiny-label { font-size: 8px; letter-spacing: 1.8px; color: #5e5e5e; }
.greeting-card h2 { margin-top: 17px; font-size: 18px; font-weight: 500; color: #4f4f4f; letter-spacing: -.2px; }
.greeting-wave { color: #5e5e5e; display: inline-block; font-size: 24px; margin-left: 4px; vertical-align: -2px; }
.clock-wrap { position: relative; display: flex; align-items: center; height: 111px; }
.digital-clock { position: relative; z-index: 1; font-size: clamp(64px, 6.3vw, 91px); font-weight: 320; letter-spacing: -.04em; color: #333; line-height: 1; font-family: "Segoe UI", "Arial", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock-colon { display: inline-block; transform: translateY(-4px); padding: 0 3px; }
.clock-seconds { font-size: 23px; color: #5e5e5e; letter-spacing: -1px; margin-left: 11px; vertical-align: 8px; }
.sun-drawing { position: absolute; width: 139px; height: 139px; right: -6px; bottom: -4px; transform: rotate(9deg); opacity: .9; }
.clock-date { display: flex; align-items: center; gap: 12px; margin-top: 8px; color: #5e5e5e; font-size: 11px; flex-wrap: wrap; }
.date-divider { height: 10px; width: 1px; background: #d1d1d1; }
.quote-card { padding: 23px 26px 21px; display: flex; flex-direction: column; background: linear-gradient(130deg, #ffffffcf, #ffffff80), #ededed; }
.card-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.card-heading h2 { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.card-heading h2 > .icon { color: #5e5e5e; width: 18px; height: 18px; }
.card-heading p { color: var(--muted); font-size: 10px; margin-top: 6px; }
.card-heading > span { color: var(--muted); font-size: 10px; }
.icon-button { background: transparent; color: #5e5e5e; width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 7px; transition: background .16s, color .16s, transform .16s; }
.icon-button:hover { background: #efefef; color: var(--purple); }
.icon-button:active { transform: scale(.91); }
.icon-button .icon { width: 16px; height: 16px; }
.danger-hover:hover { color: #5e5e5e; background: #f3f3f3; }
.quote-mark { height: 37px; margin-top: 13px; color: #5e5e5e; font-family: Georgia, serif; font-size: 59px; line-height: 1; }
.quote-content { min-height: 91px; }
.quote-chinese { font-size: 17px; color: #545454; font-weight: 500; line-height: 1.9; letter-spacing: .4px; text-wrap: pretty; }
.quote-english { font-family: Georgia, "Times New Roman", serif; color: #5e5e5e; font-size: 12px; line-height: 1.85; margin-top: 9px; font-style: italic; max-width: 340px; }
.quote-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 17px; font-size: 9px; color: #5e5e5e; }
.quote-bottom > span:first-child::before { content: ""; display: inline-block; width: 17px; height: 1px; background: #d1d1d1; margin-right: 9px; vertical-align: middle; }
.quote-counter { font-size: 9px; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.rhythm-section { margin-top: 29px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-heading h2 { font-size: 14px; font-weight: 600; }
.section-heading > span { color: var(--muted); font-size: 10px; }
.period-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.period-card { position: relative; display: block; overflow: hidden; padding: 19px 21px 20px; background: linear-gradient(145deg, #fffffff2, #ffffffa6), #ffffff; border: 1px solid #ffffffcc; border-radius: 16px; box-shadow: var(--shadow); transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.period-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent 78%); opacity: .55; }
.period-card:hover { border-color: #c9c9c9; box-shadow: inset 0 1px 0 #fff, 0 10px 24px -12px #00000038; }
.period-card:active { transform: translateY(0); }
.period-card-top { display: flex; align-items: center; gap: 9px; }
.module-icon { display: grid; place-items: center; background: linear-gradient(145deg, #ffffffcc, var(--accent-soft)); color: var(--accent); width: 33px; height: 33px; border-radius: 11px; box-shadow: inset 0 1px 0 #ffffffcc; }
.module-icon .icon { width: 17px; height: 17px; }
.period-card-label { font-size: 11px; font-weight: 500; }
.period-arrow { margin-left: auto; color: #5e5e5e; width: 14px; height: 14px; }
.period-card-bottom { display: flex; align-items: baseline; justify-content: space-between; margin: 15px 0 12px; }
.period-card-bottom > div { display: flex; align-items: baseline; gap: 8px; }
.period-card-bottom strong { font-size: 24px; font-weight: 550; line-height: 1.15; font-variant-numeric: tabular-nums; }
.period-card-bottom strong span { color: #5e5e5e; font-size: 13px; font-weight: 400; }
.period-card-bottom .muted { font-size: 9px; }
.mini-percent { color: var(--accent); font-size: 11px; font-variant-numeric: tabular-nums; }
.progress-track { height: 6px; background: var(--accent-soft); border-radius: 999px; overflow: hidden; }
.progress-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); }
.home-bottom { margin-top: 25px; display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(260px, 1fr); align-items: start; gap: 22px; }
.today-card { overflow: hidden; }
.today-card > .card-heading { padding: 22px 24px 20px; }
.title-icon { color: #5e5e5e; }
.title-icon .icon { width: 17px; height: 17px; }
.count-badge { display: inline-grid; place-items: center; min-width: 21px; height: 21px; font-size: 10px; font-weight: 550; background: #ede9fe; color: #6d28d9; border-radius: 7px; padding: 0 6px; }
.text-button { padding: 5px 2px; display: inline-flex; align-items: center; gap: 4px; color: #5e5e5e; background: transparent; font-size: 11px; border-radius: 4px; transition: color .15s; }
.text-button:hover { color: #5e5e5e; }
.text-button .icon { width: 15px; height: 15px; }
.task-row { display: flex; align-items: flex-start; gap: 13px; padding: 19px 26px; border-top: 1px solid #f1f1f1; transition: background .16s; }
.task-row:hover { background: #fcfcfc; }
.task-checkbox { flex-shrink: 0; position: relative; display: grid; place-items: center; width: 26px; height: 28px; margin-left: -4px; cursor: pointer; }
.task-checkbox input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; opacity: 0; z-index: 1; }
.task-checkbox > span { width: 18px; height: 18px; border: 1.5px solid #d8d8d8; border-radius: 6px; background: white; display: grid; place-items: center; transition: background .15s, border-color .15s; }
.task-checkbox .icon { width: 13px; height: 13px; opacity: 0; color: white; stroke-width: 2.4px; }
.task-checkbox input:checked + span { background: var(--accent); border-color: var(--accent); }
.task-checkbox input:checked + span .icon { opacity: 1; }
.task-checkbox input:focus-visible + span { outline: 3px solid #b4b4b4; outline-offset: 4px; }
.task-checkbox:hover > span { border-color: #9d9d9d; }
.task-copy { flex: 1; min-width: 0; padding-top: 3px; }
.task-title { display: block; font-size: 14px; color: #5a5a5a; overflow-wrap: anywhere; line-height: 1.8; }
.task-note { color: #5e5e5e; font-size: 11px; line-height: 1.8; margin-top: 4px; overflow-wrap: anywhere; }
.home-task-list .task-note { display: none; }
.task-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 7px; min-height: 18px; }
.tag { color: var(--accent); background: var(--accent-soft); font-size: 9px; padding: 1px 7px; border-radius: 4px; line-height: 1.8; }
.category-tag { font-weight: 600; letter-spacing: .3px; }
.task-tag { color: #5e5e5e; background: #e7e7e7; }
.period-label, .task-duration, .task-due { color: #5e5e5e; font-size: 9px; }
.task-duration { display: inline-flex; align-items: center; gap: 3px; }
.task-duration .icon { width: 11px; height: 11px; }
.task-due { margin-left: 2px; }
.task-actions { display: flex; margin-right: -7px; padding-top: 0; opacity: 0; transition: opacity .15s; }
.task-row:hover .task-actions, .task-row:focus-within .task-actions { opacity: 1; }
.task-actions .icon-button { width: 29px; height: 29px; }
.task-actions .icon { width: 14px; height: 14px; }
.is-done .task-title { text-decoration: line-through; text-decoration-color: #c9c9c9; color: #5e5e5e; }
.is-done .task-note, .is-done .task-meta { opacity: 1; }
.card-footer-link { display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid var(--line); padding: 15px; color: #5e5e5e; font-size: 10px; transition: background .15s; }
.card-footer-link:hover { background: #fafafa; }
.card-footer-link .icon { width: 13px; height: 13px; }
.right-column { display: flex; flex-direction: column; gap: 19px; min-width: 0; }
.birthday-card { padding: 20px 21px 0; overflow: hidden; }
.birthday-card .card-heading h2 { font-size: 13px; }
.birthday-card .card-heading h2 > .icon { color: #5e5e5e; }
.birthday-list { margin-top: 13px; max-height: 315px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.birthday-row { display: flex; align-items: center; gap: 10px; padding: 17px 0; position: relative; }
.birthday-row + .birthday-row { border-top: 1px dashed var(--line); }
.birthday-avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-size: 12px; flex-shrink: 0; }
.birthday-copy { flex: 1; min-width: 0; }
.birthday-copy strong { display: block; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.birthday-copy > span { display: block; font-size: 9px; color: var(--muted); margin-top: 3px; }
.birthday-days { white-space: nowrap; display: flex; align-items: baseline; gap: 5px; }
.birthday-days strong { font-size: 24px; font-weight: 400; color: #5e5e5e; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.birthday-days > span { font-size: 9px; color: #5e5e5e; }
.birthday-days .birthday-today { font-size: 16px; }
.birthday-delete { width: 23px; height: 25px; opacity: 0; margin-left: -5px; }
.birthday-delete .icon { width: 12px; height: 12px; }
.birthday-row:hover .birthday-delete, .birthday-row:focus-within .birthday-delete { opacity: 1; }
.birthday-footnote { display: flex; align-items: center; justify-content: center; gap: 6px; color: #5e5e5e; font-size: 9px; padding: 14px 0; border-top: 1px solid var(--line); }
.birthday-footnote .icon { width: 12px; height: 12px; }
.gentle-note { position: relative; overflow: hidden; background: #efefef; border: 1px solid #eaeaea; padding: 23px 25px 9px; border-radius: 12px; min-height: 158px; }
.gentle-note .tiny-label { color: #5e5e5e; font-size: 8px; letter-spacing: 1.6px; }
.gentle-note p { margin-top: 10px; color: #5e5e5e; font-size: 15px; line-height: 1.9; letter-spacing: 1.1px; }
.gentle-note > svg { width: 102px; height: 34px; margin-left: auto; color: #5e5e5e; }
.note-corner { position: absolute; right: 0; top: 0; width: 22px; height: 22px; background: linear-gradient(225deg, var(--page) 48%, #e0e0e0 50%); border-bottom-left-radius: 4px; }
.demo-note { font-size: 10px; color: #575757; margin-top: 21px; text-align: center; }
.page-footer { max-width: 1420px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; padding: 23px 42px 28px; color: #575757; font-size: 9px; }
.page-footer > span:first-child { display: flex; align-items: center; gap: 6px; }
.status-dot { display: inline-block; width: 6px; height: 6px; background: linear-gradient(135deg, #7c3aed, #2563eb); border-radius: 50%; }
.mobile-nav { display: none; }
.period-date-label { color: #5e5e5e; font-size: 11px; background: #efefef; padding: 6px 12px; border-radius: 7px; white-space: nowrap; }
.period-overview { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(270px, 1fr); gap: 22px; margin-bottom: 25px; }
.completion-card { display: flex; align-items: center; gap: 25px; padding: 27px 29px; background: linear-gradient(130deg, #ffffff, #ffffffd9 55%, var(--accent-soft)); }
.progress-ring { width: 135px; height: 135px; position: relative; flex-shrink: 0; }
.progress-ring > svg { width: 100%; height: 100%; }
.ring-pencil { stroke: var(--accent); opacity: .16; stroke-width: 1px; }
.ring-track { stroke: var(--accent-soft); stroke-width: 5; }
.ring-value { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; opacity: .85; }
.ring-doodle { stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-label > strong { font-size: 31px; font-weight: 450; color: var(--accent); line-height: 1.35; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.ring-label small { font-size: 14px; margin-left: 2px; }
.ring-label > span { color: #5e5e5e; font-size: 9px; margin-top: 1px; }
.completion-copy h2 { font-size: 16px; font-weight: 550; line-height: 1.7; margin-top: 8px; text-wrap: balance; }
.completion-copy p { margin-top: 9px; color: var(--secondary); font-size: 10px; }
.completion-copy p strong { font-weight: 550; color: var(--accent); }
.completion-copy .eyebrow { font-size: 9px; letter-spacing: 1.5px; color: #5e5e5e; }
.completion-tag { display: inline-flex; align-items: center; gap: 5px; color: #5e5e5e; font-size: 9px; margin-top: 17px; }
.completion-tag .icon { width: 13px; height: 13px; }
.other-progress { padding: 22px; }
.other-progress .card-heading h2 { font-size: 12px; }
.other-progress .card-heading > span { font-size: 9px; }
.progress-capsules { display: flex; flex-direction: column; gap: 10px; margin-top: 17px; }
.progress-capsule { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 11px; background: linear-gradient(120deg, #ffffffd9, var(--accent-soft)); box-shadow: inset 0 1px 0 #ffffffb3; transition: transform .18s var(--ease), filter .18s; }
.progress-capsule:hover { background: #e2e2e2; }
.capsule-icon { color: var(--accent); }
.capsule-icon .icon { width: 15px; height: 15px; }
.progress-capsule > span:nth-child(2) { font-size: 10px; color: #5e5e5e; }
.capsule-track { flex: 1; min-width: 24px; height: 3px; border-radius: 2px; background: #ffffffb3; margin: 0 3px; }
.capsule-track > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.progress-capsule strong { color: var(--accent); font-size: 10px; font-weight: 500; min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.progress-capsule > .icon { width: 11px; height: 11px; color: var(--accent); opacity: .65; }
.sop-card { overflow: hidden; }
.sop-card > .card-heading { padding: 24px 28px; }
.list-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; border-top: 1px solid var(--line); padding: 16px 27px; }
.filter-tabs { display: flex; align-items: center; gap: 5px; }
.filter-tabs button { display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 6px; background: transparent; color: #5e5e5e; font-size: 11px; min-height: 32px; white-space: nowrap; }
.filter-tabs button span { font-size: 9px; opacity: 1; font-variant-numeric: tabular-nums; }
.filter-tabs button[aria-pressed="true"] { background: #fff; color: #4338ca; box-shadow: inset 0 0 0 1px #ffffff, 0 3px 10px -6px #4338ca80; font-weight: 650; }
.filter-tabs button:hover { background: #f6f6f6; }
.search-box { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; color: #5e5e5e; }
.search-box:focus-within { border-color: #b6b6b6; }
.search-box .icon { width: 14px; height: 14px; }
.search-box input { width: 130px; border: 0; outline: none; font-size: 10px; color: var(--ink); background: transparent; }
.search-box input::placeholder { color: #5e5e5e; }
.list-bottom { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding: 17px 28px; font-size: 9px; color: #5e5e5e; }
.list-bottom > span:first-child { display: flex; align-items: center; gap: 6px; }
.list-bottom .icon { width: 12px; height: 12px; }
.sop-group + .sop-group { border-top: 1px solid var(--line); }
.sop-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 28px 11px; background: #fafafab3; }
.sop-group-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.group-marker { width: 4px; height: 17px; border-radius: 4px; background: #777; flex-shrink: 0; box-shadow: inset 0 1px 0 #ffffffb3; }
.sop-group-name h3 { font-size: 12px; font-weight: 600; color: #3f3f3f; overflow-wrap: anywhere; }
.group-count { color: #626262; font-size: 9px; background: #ededed; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.group-progress { color: #626262; font-size: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.group-progress strong { color: #3f3f3f; font-weight: 650; }
.group-progress-track { height: 3px; margin: 0 28px 6px; border-radius: 999px; background: #ebebeb; overflow: hidden; }
.group-progress-track > span { display: block; height: 100%; border-radius: inherit; background: #777; transition: width .2s var(--ease); }
.sop-group .task-row:first-child { border-top: 0; }
.empty-state { text-align: center; padding: 47px 20px; }
.empty-icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 12px; color: #6d28d9; background: linear-gradient(145deg, #ffffffcc, #ede9fe); border-radius: 16px; box-shadow: inset 0 1px 0 #ffffffcc; }
.empty-state h3 { font-weight: 500; font-size: 13px; color: #5e5e5e; }
.empty-state p { color: #5e5e5e; font-size: 11px; margin: 7px auto 15px; max-width: 300px; }
.birthday-card .empty-state { padding: 24px 0; }
.birthday-card .empty-state h3 { font-size: 11px; }
.birthday-card .empty-state p { font-size: 10px; }
.modal { color: var(--ink); border: 1px solid #e5e5e5; border-radius: 18px; padding: 28px; width: min(510px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; box-shadow: 0 20px 90px #27272728; }
.modal::backdrop { background: #22222235; backdrop-filter: blur(4px); }
.modal[open] { animation: modal-enter .22s var(--ease); }
.modal-narrow { max-width: 430px; }
.modal-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; gap: 16px; }
.modal-heading h2 { font-size: 21px; font-weight: 550; margin-top: 6px; }
.modal-heading .eyebrow { font-size: 8px; }
.modal-heading .icon-button { font-size: 25px; font-weight: 300; }
.field { display: block; color: #5e5e5e; font-size: 11px; margin-bottom: 18px; }
.field input, .field textarea, .field select { display: block; width: 100%; border: 1px solid #e6e6e6; border-radius: 7px; background: #fcfcfc; padding: 10px 12px; margin-top: 7px; color: #585858; font-size: 12px; min-height: 41px; transition: border-color .16s, box-shadow .16s; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #aeaeae; box-shadow: 0 0 0 3px #9d9d9d15; outline: none; }
.field input::placeholder, .field textarea::placeholder { color: #5e5e5e; }
.field textarea { resize: vertical; min-height: 87px; max-height: 190px; }
.quick-field { margin-bottom: 16px; }
.field-label { display: block; color: #5e5e5e; font-size: 11px; }
.quick-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.quick-tags button { border: 1px solid #d9d9d9; border-radius: 999px; padding: 5px 11px; background: #ffffffb3; color: #4f4f4f; font-size: 11px; line-height: 1.6; transition: background .16s, border-color .16s, transform .16s var(--ease); }
.quick-tags button:hover { background: #fff; border-color: #8f8f8f; color: #272727; }
.quick-tags button:active { transform: scale(.95); }
.quick-field .field-label + .quick-tags { margin-bottom: 2px; }
.field-hint { display: block; font-size: 9px; color: #5e5e5e; margin-top: 6px; line-height: 1.7; }
.optional { font-size: 9px; color: #5e5e5e; margin-left: 6px; }
.required-mark { color: #5e5e5e; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); margin-top: 5px; }
.form-note { color: #5e5e5e; font-size: 10px; margin-bottom: 24px; }
.toast { position: fixed; z-index: 30; bottom: 29px; left: calc(50% + var(--sidebar-width) / 2); transform: translateX(-50%); display: flex; align-items: center; gap: 18px; padding: 12px 19px; background: #464646; color: #fcfcfc; border: 1px solid #ffffff18; border-radius: 10px; box-shadow: 0 5px 25px #23232320; font-size: 12px; max-width: calc(100vw - 32px); width: max-content; opacity: 1; transition: opacity .18s var(--ease), transform .18s var(--ease); }
.toast button { background: transparent; color: #5e5e5e; padding: 3px 0; font-size: 12px; flex-shrink: 0; }
.noscript-notice { position: fixed; bottom: 20px; left: 20px; right: 20px; background: var(--ink); color: white; padding: 20px; z-index: 100; }
@keyframes modal-enter { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@starting-style { .toast { opacity: 0; transform: translate(-50%, 6px); } }
html[data-input="keyboard"] button:active { transform: none; }

@media (hover: hover) and (pointer: fine) {
  .period-card:hover { transform: translateY(-3px); }
  .period-card:active { transform: translateY(0); }
  .progress-capsule:hover { transform: translateX(3px); }
}

@media (min-width: 1500px) {
  main { padding-top: 41px; }
  .greeting-card { padding: 29px 34px; }
  .clock-wrap { height: 125px; }
  .digital-clock { font-size: 101px; }
  .sun-drawing { width: 157px; height: 157px; right: 15px; }
  .quote-card { padding: 27px 31px; }
  .quote-chinese { font-size: 19px; }
}

@media (max-width: 1200px) {
  :root { --sidebar-width: 205px; }
  .sidebar { padding-left: 14px; padding-right: 14px; }
  .brand { font-size: 19px; gap: 9px; padding-left: 5px; }
  .brand-caption { font-size: 6px; }
  .topbar { padding: 0 28px; }
  main { padding: 29px 28px 0; }
  .page-footer { padding-left: 28px; padding-right: 28px; }
  .intro-stamp { display: none; }
  .home-hero { gap: 17px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .greeting-card { padding: 23px; }
  .greeting-card h2 { font-size: 16px; }
  .sun-drawing { width: 102px; height: 102px; right: -13px; bottom: 7px; opacity: .75; }
  .digital-clock { font-size: 71px; }
  .clock-seconds { font-size: 18px; margin-left: 6px; }
  .quote-card { padding: 22px; }
  .quote-chinese { font-size: 15px; }
  .quote-english { font-size: 11px; }
  .clock-date { font-size: 9px; gap: 7px; }
  .period-grid { gap: 12px; }
  .period-card { padding: 15px; }
  .period-card-label { font-size: 10px; }
  .period-card-top { gap: 7px; }
  .module-icon { width: 26px; height: 26px; }
  .period-card-bottom .muted { display: none; }
  .home-bottom { gap: 17px; grid-template-columns: minmax(0, 1.7fr) minmax(245px, 1fr); }
  .task-row { padding-left: 22px; padding-right: 22px; gap: 9px; }
  .task-title { font-size: 13px; }
  .birthday-card { padding-left: 17px; padding-right: 17px; }
  .birthday-days strong { font-size: 22px; }
  .period-overview { grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: 17px; }
  .completion-card { padding: 22px; gap: 17px; }
  .progress-ring { width: 105px; height: 105px; }
  .completion-copy h2 { font-size: 13px; }
  .completion-copy p { font-size: 9px; }
  .completion-tag { font-size: 8px; }
}

@media (max-width: 1000px) and (min-width: 761px) {
  :root { --sidebar-width: 176px; }
  .brand { font-size: 16px; gap: 7px; }
  .brand-mark { width: 31px; height: 31px; border-radius: 10px; }
  .brand-caption { letter-spacing: .6px; font-size: 5px; }
  .profile { gap: 7px; }
  .profile strong { font-size: 11px; }
  .profile div > span { font-size: 8px; }
  main { padding: 24px 22px 0; }
  .topbar { padding: 0 22px; }
  .greeting-card { padding: 20px; }
  .greeting-top .tiny-label { display: none; }
  .greeting-card h2 { font-size: 14px; }
  .digital-clock { font-size: 64px; }
  .sun-drawing { width: 79px; height: 79px; right: -11px; bottom: 3px; opacity: .55; }
  .clock-date { gap: 3px 8px; }
  .clock-date .date-divider { display: none; }
  .clock-date > span:last-child { width: 100%; }
  .quote-card { padding: 20px; }
  .quote-chinese { font-size: 14px; }
  .home-bottom { grid-template-columns: minmax(0, 1fr); }
  .right-column { display: grid; grid-template-columns: 1.2fr 1fr; }
  .period-card-top { flex-wrap: wrap; }
  .period-arrow { display: none; }
  .period-overview { grid-template-columns: 1fr; }
  .other-progress { padding: 20px; }
  .progress-capsules { flex-direction: row; gap: 10px; }
  .progress-capsule { flex: 1; min-width: 0; }
  .completion-card { gap: 25px; }
  .completion-copy h2 { font-size: 17px; }
}

@media (max-width: 760px) {
  :root { --sidebar-width: 0px; }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .sidebar { display: none; }
  .workspace { margin-left: 0; }
  .topbar { height: 64px; padding: 0 21px; }
  .desktop-only { display: none; }
  .breadcrumb { font-size: 15px; font-weight: 600; }
  .topbar-actions { gap: 13px; }
  .header-date { font-size: 10px; }
  .button-small { min-height: 34px; font-size: 10px; padding: 5px 10px; }
  main { padding: 27px 20px 0; min-height: calc(100dvh - 230px); }
  .page-intro { margin-bottom: 23px; gap: 14px; }
  .eyebrow { font-size: 8px; letter-spacing: 1.6px; }
  h1 { font-size: 25px; margin-top: 7px; letter-spacing: -.7px; }
  .page-intro p { font-size: 11px; line-height: 1.9; margin-top: 6px; }
  .home-hero { grid-template-columns: 1fr; gap: 17px; }
  .greeting-card { padding: 23px 25px 25px; }
  .greeting-card h2 { font-size: 18px; margin-top: 14px; }
  .clock-wrap { height: 112px; }
  .digital-clock { font-size: 82px; }
  .clock-seconds { font-size: 22px; margin-left: 8px; }
  .sun-drawing { width: 131px; height: 131px; right: -2px; bottom: -1px; opacity: .8; }
  .clock-date { font-size: 10px; gap: 10px; }
  .quote-card { padding: 18px 22px; }
  .card-heading h2 { font-size: 13px; }
  .quote-mark { height: 27px; font-size: 48px; margin-top: 9px; }
  .quote-content { min-height: 0; }
  .quote-chinese { font-size: 16px; line-height: 1.8; }
  .quote-english { font-size: 12px; max-width: none; margin-top: 6px; }
  .quote-bottom { padding-top: 15px; }
  .rhythm-section { margin-top: 26px; }
  .section-heading h2 { font-size: 13px; }
  .section-heading > span { font-size: 9px; }
  .period-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .period-card { padding: 17px; }
  .period-card-label { font-size: 11px; }
  .period-card-bottom { margin-top: 13px; }
  .period-card-bottom .muted { display: inline; }
  .home-bottom { grid-template-columns: 1fr; gap: 19px; margin-top: 22px; }
  .today-card > .card-heading { padding: 20px; }
  .task-row { padding: 17px 19px; gap: 10px; }
  .task-checkbox { width: 30px; height: 32px; margin-left: -5px; }
  .task-copy { padding-top: 5px; }
  .task-title { font-size: 13px; }
  .task-note { font-size: 10px; }
  .task-meta { gap: 8px; }
  .task-actions { opacity: 1; padding-top: 2px; }
  .task-actions .icon-button { width: 29px; height: 32px; }
  .task-actions .icon { width: 14px; height: 14px; }
  .right-column { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .birthday-card { padding: 20px 22px 0; }
  .birthday-days strong { font-size: 25px; }
  .birthday-delete { opacity: 1; width: 28px; height: 32px; margin-left: 5px; }
  .birthday-copy strong { font-size: 12px; }
  .birthday-copy > span { font-size: 10px; }
  .birthday-row { gap: 12px; padding: 17px 0; }
  .gentle-note { min-height: 138px; padding-top: 19px; }
  .gentle-note p { font-size: 14px; }
  .gentle-note > svg { margin-top: -19px; }
  .page-footer { padding: 23px 20px 12px; justify-content: center; }
  .page-footer > span:last-child { display: none; }
  .demo-note { font-size: 9px; line-height: 1.9; padding: 0 10px; }
  .mobile-nav { display: grid; grid-template-columns: repeat(7, 1fr); position: fixed; bottom: 0; left: 0; right: 0; border-top: 1px solid #e7e7e7; background: #fdfdfded; padding: 7px 6px calc(8px + env(safe-area-inset-bottom)); z-index: 20; box-shadow: 0 -3px 17px #2c2c2c04; }
  .mobile-nav .nav-link { min-height: 54px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 5px 2px; border-radius: 10px; font-size: 9px; }
  .mobile-nav .nav-link .icon { width: 19px; height: 19px; }
  .mobile-nav .nav-count { display: none; }
  .mobile-nav .nav-link.is-active { background: #efefef; color: #5e5e5e; }
  .period-date-label { font-size: 9px; padding: 5px 8px; align-self: flex-start; margin-top: 21px; }
  .period-overview { grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px; }
  .completion-card { gap: 19px; padding: 23px 20px; }
  .progress-ring { width: 108px; height: 108px; }
  .completion-copy h2 { font-size: 14px; }
  .completion-copy p { font-size: 10px; }
  .completion-copy .eyebrow { font-size: 8px; }
  .completion-tag { font-size: 8px; margin-top: 12px; }
  .other-progress { padding: 18px 20px; }
  .progress-capsules { flex-direction: column; gap: 8px; margin-top: 13px; }
  .progress-capsule { padding: 10px 13px; }
  .progress-capsule > span:nth-child(2) { font-size: 11px; }
  .sop-card > .card-heading { padding: 20px; }
  .sop-card > .card-heading .button { font-size: 11px; padding: 8px 11px; min-height: 36px; }
  .list-toolbar { padding: 13px 17px; flex-wrap: wrap; gap: 13px; }
  .filter-tabs { flex: 1; }
  .filter-tabs button { padding: 6px 10px; font-size: 10px; }
  .search-box { width: 100%; padding: 9px 12px; }
  .search-box input { width: 100%; font-size: 11px; }
  .list-bottom { padding: 15px 19px; font-size: 8px; }
  .sop-group-heading { padding: 15px 18px 10px; flex-wrap: wrap; gap: 6px; }
  .group-progress { font-size: 9px; }
  .group-progress-track { margin-left: 18px; margin-right: 18px; }
  .sop-group .task-row { padding-left: 18px; padding-right: 18px; }
  .quick-tags { gap: 6px; }
  .quick-tags button { padding: 5px 10px; font-size: 11px; }
  .toast { bottom: calc(89px + env(safe-area-inset-bottom)); left: 50%; font-size: 11px; padding: 12px 16px; }
  .modal { padding: 25px 21px; border-radius: 16px; max-height: calc(100dvh - 32px); }
  .modal-heading { margin-bottom: 22px; }
  .field input, .field textarea, .field select { font-size: 16px; padding: 9px 10px; }
  .field input::placeholder, .field textarea::placeholder { font-size: 12px; }
  .form-grid { gap: 12px; }
}

@media (max-width: 390px) {
  main { padding-left: 15px; padding-right: 15px; }
  .topbar { padding-left: 17px; padding-right: 17px; }
  .header-date { display: none; }
  h1 { font-size: 23px; }
  .greeting-card { padding-left: 20px; padding-right: 20px; }
  .greeting-card h2 { font-size: 16px; }
  .digital-clock { font-size: 73px; }
  .clock-seconds { font-size: 18px; }
  .sun-drawing { width: 103px; height: 103px; right: -8px; bottom: 5px; }
  .clock-date { gap: 6px; font-size: 9px; }
  .period-card { padding: 15px; }
  .period-card-bottom .muted { display: none; }
  .task-row { padding-left: 16px; padding-right: 16px; gap: 8px; }
  .task-actions { flex-direction: column; }
  .completion-card { padding: 21px 16px; gap: 13px; }
  .progress-ring { width: 92px; height: 92px; }
  .ring-label > strong { font-size: 27px; }
  .completion-copy h2 { font-size: 12px; }
  .completion-copy p { font-size: 9px; }
  .completion-tag { font-size: 7px; }
  .period-date-label { display: none; }
}

@media (hover: none) {
  .task-actions, .birthday-delete { opacity: 1; }
  .icon-button { min-width: 32px; min-height: 32px; }
  .task-checkbox { min-width: 32px; min-height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .button:active, .icon-button:active, .period-card:hover, .progress-capsule:hover { transform: none; }
}


/* Ice-white glass: one material system, with opaque defaults before blur support. */
:root {
  --glass-base: #f4f4f4;
  --glass-tint: rgb(255 255 255 / 62%);
  --glass-light: linear-gradient(145deg, #ffffffb3, #ffffff00 42%, #ffffff33 80%, #ffffff99);
  --glass-rim: rgb(255 255 255 / 94%);
  --glass-depth: inset 0 1px 0 #fff, inset 0 -1px 0 #ffffff99,
    0 1px 2px #0000000a, 0 12px 32px -14px #00000038;
  --glass-focus: #3f3f3f;
}
body {
  background:
    radial-gradient(ellipse 65% 80% at 0% 0%, #ede9fe, transparent 72%),
    radial-gradient(ellipse 60% 70% at 100% 5%, #dbeafe, transparent 78%),
    radial-gradient(ellipse 80% 70% at 50% 100%, #ffedd5, transparent 75%),
    linear-gradient(135deg, #f5f3ff, #fdfdff 58%, #fff7ed);
  background-attachment: fixed;
}
.sidebar, .topbar, .mobile-nav, .modal {
  background: var(--glass-light), var(--glass-base);
  border: 1px solid var(--glass-rim);
  box-shadow: var(--glass-depth);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar, .topbar, .mobile-nav, .modal {
    background: var(--glass-light), var(--glass-tint);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }
  .greeting-card, .quote-card, .period-card, .completion-card, .other-progress {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
.greeting-card { background: linear-gradient(125deg, #ffffffe6, #ffffffcc 58%, #ede9fecc); }
.quote-card, .other-progress { background: linear-gradient(130deg, #ffffffcc, #ffffff99); }
.period-card { background: linear-gradient(145deg, #ffffffe6, #ffffffb3); }
.completion-card { background: linear-gradient(125deg, #ffffffe6, #ffffffcc 55%, var(--accent-soft)); }
}
.sidebar { inset: 12px auto 12px 12px; width: calc(var(--sidebar-width) - 12px); border-radius: 26px; overflow-y: auto; }
.topbar { position: sticky; top: 12px; z-index: 8; height: 64px; margin: 12px 20px 0; padding: 0 21px; border-radius: 22px; }
main { scroll-margin-top: 90px; }
.nav-link { border-radius: 15px; color: #575757; transition: background-color .18s, box-shadow .18s, transform .18s var(--ease); }
.nav-link:hover { background: #ffffff80; color: #272727; }
.nav-link:active { transform: scale(.97); }
html[data-input="keyboard"] .nav-link:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-input="keyboard"] *, html[data-input="keyboard"] *::before, html[data-input="keyboard"] *::after { animation: none !important; transition: none !important; }
}
.sidebar .nav-link.is-active, .mobile-nav .nav-link.is-active {
  background: linear-gradient(155deg, #fff, #ffffffb3);
  box-shadow: inset 0 0 0 1px #fff, inset 0 1px 0 #fff, 0 3px 9px #00000014;
  color: #272727;
  font-weight: 650;
}
.nav-link.is-active .nav-count { color: #4c4c4c; }
.button { border-radius: 999px; }
.button-secondary { background: #ffffffd9; color: #414141; box-shadow: inset 0 0 0 1px #e5e7eb; }
.button-secondary:hover { background: #fff; box-shadow: inset 0 0 0 1px #d1d5db; }
.filter-tabs { background: #ededed; border-radius: 999px; padding: 3px; }
.filter-tabs button { border-radius: 999px; transition: background .18s, box-shadow .18s, color .18s; }
.filter-tabs button[aria-pressed="true"] { color: #4338ca; background: #fff; box-shadow: inset 0 0 0 1px #ffffff, 0 3px 10px -6px #4338ca80; font-weight: 650; }
.modal { --glass-tint: rgb(255 255 255 / 90%); border-radius: 24px; box-shadow: var(--glass-depth), 0 24px 80px #00000026; }
.modal::backdrop { background: #20202033; backdrop-filter: none; }
.modal[open] { animation-duration: .18s; }
.modal .field input, .modal .field textarea, .modal .field select { border-radius: 10px; background: #ffffffed; border-color: #cecece; }
.modal .quick-tags button { background: #ffffffcc; border-color: #cecece; border-radius: 999px; }
.modal .quick-tags button:hover { background: #fff; border-color: #626262; }
.sop-group-heading { background: #ffffff80; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #626262; box-shadow: 0 0 0 3px #0000000d; }
:focus-visible { outline-color: var(--glass-focus); }
.task-checkbox input:focus-visible + span { outline-color: var(--glass-focus); }
.task-checkbox input:checked + span { background: var(--accent); border-color: var(--accent); }
.task-checkbox > span { border-color: #8b8b8b; }
.is-done .task-title { color: #626262; text-decoration-color: #858585; }
.task-title { color: #333; }
.task-note { color: #5e5e5e; }
.today-card, .sop-card, .birthday-card { background: #ffffffed; }
.module-icon, .capsule-icon, .title-icon { color: var(--accent); }
.module-icon { background: linear-gradient(145deg, #ffffffcc, var(--accent-soft)); box-shadow: inset 0 1px 0 #ffffffcc; }
.period-card-bottom strong { font-weight: 600; }
.progress-track { height: 5px; }
.ring-value { opacity: 1; }
.clock-seconds { color: #626262; }
.greeting-card h2 { overflow-wrap: anywhere; }
.gentle-note { background: linear-gradient(135deg, #ffffffb3, #ffffff4d); border-color: #ffffffb3; box-shadow: inset 0 1px 0 #fff; }
.gentle-note p { color: #575757; }
.status-dot { background: #626262; }
.toast { background: #333; color: #fff; }
.toast button { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .topbar { height: 58px; top: 8px; margin: 8px 12px 0; padding: 0 14px; border-radius: 20px; }
  .mobile-nav { bottom: calc(8px + env(safe-area-inset-bottom)); left: max(10px, calc((100% - 470px) / 2)); right: max(10px, calc((100% - 470px) / 2)); padding: 5px; gap: 3px; border-radius: 27px; }
  .mobile-nav .nav-link { border-radius: 21px; min-height: 49px; padding-inline: 2px; }
  body { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-link { transition: none !important; }
  .nav-link:active { transform: none; }
}
@media (max-width: 350px) {
  .digital-clock { font-size: 60px; }
  .sun-drawing { width: 80px; height: 80px; }
}
@media (max-height: 820px) and (min-width: 761px) {
  .sidebar-note { padding: 14px 16px 12px; }
  .note-spark { width: 22px; height: 22px; margin-bottom: 8px; }
  .sidebar-note p { font-size: 11px; line-height: 1.8; }
  .sidebar-note > span { margin-top: 6px; }
}
@media (max-height: 660px) and (min-width: 761px) {
  .sidebar-note { display: none; }
  .profile { margin-top: auto; }
}
@media (prefers-reduced-transparency: reduce) {
  body { background: #fafafa; }
  .sidebar, .topbar, .mobile-nav, .modal, .card, .period-card, .gentle-note {
    background: #fafafa; border-color: #dedede;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  body { background: #fafafa; }
  .sidebar, .topbar, .mobile-nav, .modal, .card, .period-card, .gentle-note {
    background: #fafafa; border-color: #999;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (forced-colors: active) {
  .sidebar .nav-link.is-active, .mobile-nav .nav-link.is-active, .filter-tabs button[aria-pressed="true"] { outline: 1px solid Highlight; }
  .task-checkbox > span { border-color: ButtonText; }
  .task-checkbox input:checked + span { background: Highlight; border-color: Highlight; }
  .task-checkbox input:checked + span .icon { color: HighlightText; }
}