:root { color-scheme: light; --bg: #f4f7f4; --surface: #fff; --ink: #183028; --muted: #52665f; --brand: #176b4d; --brand-soft: #dcefe5; --line: #d4ded8; --danger: #8f2f2f; --shadow: 0 10px 30px rgba(26, 58, 46, .08); font-family: ui-rounded, "SF Pro Rounded", "Noto Sans TC", system-ui, sans-serif; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--ink); background: linear-gradient(180deg, #e8f3ed 0, var(--bg) 220px); min-height: 100vh; padding-bottom: 92px; }
button, summary { font: inherit; }
button { min-height: 44px; }
button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #a34f00; outline-offset: 3px; }
.site-header { max-width: 1120px; margin: auto; padding: 20px 18px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.site-header > div { display: flex; align-items: center; gap: 10px; }
.site-header p { margin: 0 0 2px; color: var(--muted); font-size: .78rem; }
.site-header strong { font-size: 1.05rem; }
.mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #fff; background: var(--brand); font-weight: 800; }
.privacy { color: var(--brand); background: rgba(255,255,255,.7); border: 1px solid rgba(23,107,77,.24); padding: 7px 10px; border-radius: 999px; font-size: .75rem; white-space: nowrap; }
main { width: min(100% - 28px, 1120px); margin: 16px auto 32px; }
.view-header { margin: 6px 2px 20px; }
.view-header h1 { margin: 4px 0 8px; font-size: clamp(1.75rem, 6vw, 2.7rem); letter-spacing: -.04em; }
.view-header p:not(.eyebrow) { margin: 0; color: var(--muted); }
.eyebrow { margin: 0; color: var(--brand); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.card-grid, .week-grid { display: grid; gap: 14px; }
.card { min-width: 0; padding: 18px; border: 1px solid rgba(66,96,83,.12); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.sleep-card { background: linear-gradient(145deg, #f4f0ff, #fff); }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.card h2 { margin: 3px 0 0; font-size: 1.15rem; }
.card-heading strong { text-align: right; color: var(--brand); font-size: 1.08rem; }
.progress { height: 8px; margin: 16px 0 12px; border-radius: 99px; background: #e5ece8; overflow: hidden; }
.progress span { display: block; width: var(--progress); max-width: 100%; height: 100%; background: var(--brand); border-radius: inherit; }
details { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 4px; }
summary { min-height: 44px; display: flex; align-items: center; color: var(--brand); font-weight: 750; cursor: pointer; list-style: none; }
summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; }
details[open] summary::after { content: "−"; }
.time-list, .record-group ul { margin: 2px 0 0; padding: 0; list-style: none; }
.time-list li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--line); }
.time-list small, .record-item small { color: var(--muted); }
.detail-empty, .end-state { color: var(--muted); text-align: center; }
.week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.week-card strong { display: block; margin-top: 18px; color: var(--brand); font-size: 1.7rem; }
.week-card p { margin: 2px 0 0; color: var(--muted); }
.record-group { margin: 0 0 18px; }
.record-group > h2 { margin: 0 0 10px 4px; font-size: 1rem; }
.record-group ul { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.record-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px; border-bottom: 1px solid var(--line); }
.record-item:last-child { border-bottom: 0; }
.record-item div { min-width: 0; display: grid; gap: 4px; }
.record-item span { color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.state { min-height: 300px; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; }
.state > span { font-size: 2.3rem; }
.state h1, .state p { margin: 0; }
.state p { color: var(--muted); }
.skeleton { width: min(100%, 420px); height: 92px; border-radius: 20px; background: linear-gradient(90deg, #e3ebe6 25%, #f4f7f4 50%, #e3ebe6 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.skeleton.short { height: 60px; }
.primary, .secondary { border: 0; border-radius: 14px; padding: 10px 18px; font-weight: 750; cursor: pointer; }
.primary { color: #fff; background: var(--brand); }
.secondary { width: 100%; color: var(--brand); background: var(--brand-soft); }
.filter-bar { position: fixed; z-index: 5; left: 50%; bottom: 78px; transform: translateX(-50%); width: min(calc(100% - 28px), 420px); padding: 5px; display: flex; gap: 4px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); }
.filter-bar[hidden] { display: none; }
.filter-bar button { flex: 1; border: 0; border-radius: 12px; color: var(--muted); background: transparent; cursor: pointer; }
.filter-bar button[aria-pressed="true"] { color: #fff; background: var(--brand); }
.bottom-nav { position: fixed; z-index: 4; left: 0; right: 0; bottom: 0; min-height: 70px; padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(18px); }
.bottom-nav button { position: relative; display: grid; place-items: center; align-content: center; gap: 2px; border: 0; border-radius: 13px; color: var(--muted); background: transparent; font-size: .78rem; cursor: pointer; }
.bottom-nav button span { font-size: 1.1rem; }
.bottom-nav button.active { color: var(--brand); background: var(--brand-soft); font-weight: 800; }
.bottom-nav button:disabled { cursor: not-allowed; opacity: .58; }
.bottom-nav small { position: absolute; top: 3px; right: 5px; font-size: .55rem; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (min-width: 768px) { body { padding-bottom: 30px; } main { margin-top: 30px; } .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sleep-card { grid-column: 1 / -1; } .week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bottom-nav { position: sticky; left: auto; right: auto; bottom: 18px; width: min(560px, calc(100% - 32px)); margin: auto; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); } .filter-bar { bottom: 96px; } }
@media (min-width: 1200px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .site-header { padding-top: 28px; } .record-group { width: min(760px, 100%); margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }