:root {
  color-scheme: light dark;
  --navy: #0e2130; --teal: #12857d; --mint: #57e0ad; --blue: #61ade8;
  --bg: #f2f2f7; --card: #fff; --text: #000; --secondary: #727277; --tertiary: #9c9ca1;
  --line: #dedee4; --segment: #e3e3e9; --segment-active: #fff; --tab-bg: #fafafaeF;
  --indigo: #5856d6; --orange: #ff9500; --chart-passive: #61ade87a; --shadow: 0 5px 12px #0000000b;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 17px;
  -webkit-text-size-adjust: 100%; font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; border: 0; }
button:disabled { cursor: default; opacity: .45; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, summary:focus-visible, pre:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
h1, h2, p { margin: 0; }
.icon { width: 24px; height: 24px; flex-shrink: 0; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.launch { min-height: 100dvh; display: flex; gap: 18px; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--navy), var(--teal)); color: white; }
.launch h1 { font: 700 28px ui-rounded, -apple-system, sans-serif; }
.spinner { display: inline-block; width: 22px; height: 22px; border: 2px solid currentColor; border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.login { min-height: 100svh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; padding: max(70px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom)); background: linear-gradient(140deg, var(--navy), var(--teal)); color: #fff; }
.login-brand { text-align: center; margin: auto 0; padding: 30px 0 60px; }
.brand-mark { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: #ffffff24; margin: 0 auto 28px; }
.brand-mark .icon { width: 54px; height: 54px; stroke-width: 1.8; }
.login h1 { font: 700 38px ui-rounded, -apple-system, sans-serif; letter-spacing: -.8px; }
.login-brand p { font-size: 20px; line-height: 1.4; color: #ffffffc7; margin-top: 12px; }
.login-actions { width: 100%; margin: 0 auto; max-width: 440px; }
.google-button { display: flex; gap: 12px; justify-content: center; align-items: center; width: 100%; background: white; color: var(--navy); border-radius: 18px; padding: 17px 10px; font-weight: 600; min-height: 58px; }
.google-button:disabled { opacity: .8; }
.privacy-note { color: #ffffff9e; font-size: 13px; line-height: 1.45; text-align: center; margin-top: 18px; }
.privacy-link { display: block; text-align: center; text-decoration: underline; color: #ffffffb8; font-size: 12px; margin-top: 10px; padding: 4px 0; }
.privacy-page { max-width: 660px; min-height: 100dvh; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom)); background: var(--bg); }
.privacy-page h1 { font-size: 30px; margin: 20px 0 8px; overflow-wrap: anywhere; }
.privacy-updated { color: var(--secondary); font-size: 13px; margin-bottom: 24px; }
.privacy-page .card { margin: 16px 0; }
.privacy-page h2 { font-size: 19px; margin-bottom: 12px; }
.privacy-page p:not(.privacy-updated) { font-size: 15px; line-height: 1.6; margin-top: 12px; }
.privacy-page a { color: var(--teal); overflow-wrap: anywhere; }
.privacy-back { display: inline-block; padding: 10px 0; font-size: 15px; }
.login-install { display: flex; align-items: center; justify-content: center; gap: 7px; color: #ffffffb0; background: transparent; margin: 18px auto 0; font-size: 13px; padding: 8px; }
.login-install .icon { width: 17px; height: 17px; }
.login-error { padding: 14px; margin: 0 0 16px; border-radius: 14px; background: #ffffff1f; font-size: 14px; line-height: 1.4; }
.app-shell { max-width: 480px; min-height: 100dvh; margin: 0 auto; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.navigation { padding: env(safe-area-inset-top) 20px 9px; }
.toolbar { min-height: 44px; display: flex; justify-content: space-between; align-items: center; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 10px; color: var(--teal); background: transparent; border-radius: 50%; }
.icon-button .icon { width: 22px; height: 22px; }
.syncing .icon { animation: spin 1.3s linear infinite; }
.navigation h1 { font-size: 34px; line-height: 1.2; letter-spacing: .3px; font-weight: 700; }
.page { padding: 0 16px 28px; display: flex; flex-direction: column; gap: 18px; outline: none; }
.segments { display: flex; border-radius: 9px; padding: 2px; background: var(--segment); margin-top: 4px; }
.segments button { flex: 1; min-width: 0; border-radius: 7px; color: var(--text); background: transparent; font-size: 13px; line-height: 18px; font-weight: 500; padding: 5px 4px; position: relative; }
.segments button[aria-pressed="true"] { background: var(--segment-active); box-shadow: 0 2px 4px #0002, 0 0 1px #0001; font-weight: 600; }
.energy-hero { background: linear-gradient(135deg, var(--navy), var(--teal)); border-radius: 28px; padding: 22px; box-shadow: 0 10px 18px #0e213038; color: white; }
.energy-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.energy-top p { font-size: 14px; font-weight: 500; color: #ffffffb8; }
.energy-total { font: 700 clamp(30px, 9.5vw, 42px)/1.25 ui-rounded, -apple-system, sans-serif; letter-spacing: -.8px; margin-top: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.energy-total small { font: 600 17px -apple-system, sans-serif; letter-spacing: 0; color: #ffffffbf; margin-left: 7px; }
.flame-badge { display: grid; place-items: center; width: 59px; height: 59px; flex-shrink: 0; border-radius: 50%; background: #ffffff24; color: var(--orange); }
.flame-badge .icon { width: 31px; height: 31px; }
.energy-pills { display: flex; gap: 12px; margin-top: 20px; }
.energy-pill { width: 50%; display: flex; flex-direction: column; gap: 5px; padding: 12px; border-radius: 15px; background: #ffffff24; min-width: 0; }
.energy-pill.active { background: #57e0ad33; }
.energy-pill > span { color: #ffffffad; font-size: 12px; }
.energy-pill strong { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.energy-pill small { font-size: 12px; font-weight: 400; }
.card { padding: 18px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); min-width: 0; }
.card-title { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.card-title .icon { width: 19px; height: 19px; }
.chart { height: 210px; width: 100%; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart-grid { stroke: var(--line); stroke-width: .5; }
.chart-tick { font-size: 9px; fill: var(--secondary); font-variant-numeric: tabular-nums; }
.chart-date { font-size: 10px; }
.legend { display: flex; gap: 12px; font-size: 11px; color: var(--secondary); }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend i { width: 8px; height: 8px; border-radius: 2px; }
.legend .mint { background: var(--mint); }
.legend .blue { background: var(--chart-passive); }
.chart-table { margin-top: 12px; font-size: 11px; color: var(--secondary); }
.chart-table summary { cursor: pointer; }
.chart-table table { width: 100%; text-align: right; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.chart-table th { font-size: 9px; font-weight: 500; }
.chart-table td, .chart-table th { padding: 5px 1px; border-bottom: .5px solid var(--line); }
.chart-table td:first-child, .chart-table th:first-child { text-align: left; }
.highlights { display: flex; gap: 12px; }
.compact-card { display: flex; align-items: center; gap: 11px; width: 50%; min-width: 0; padding: 15px; border-radius: 19px; background: var(--card); }
.compact-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.compact-icon .icon { width: 21px; height: 21px; }
.orange { background: #ff95001f; color: var(--orange); }
.indigo { background: #5856d61f; color: var(--indigo); }
.compact-card strong { display: block; font-size: 18px; font-weight: 600; white-space: nowrap; }
.compact-card div > span { display: block; font-size: 11px; color: var(--secondary); margin-top: 3px; }
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; display: flex; justify-content: space-around; align-items: flex-start; padding: 7px 8px max(8px, env(safe-area-inset-bottom)); border-top: .5px solid var(--line); background: var(--tab-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); z-index: 10; }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 25%; min-height: 42px; color: #99999f; font-size: 10px; font-weight: 500; }
.tabbar a[aria-current] { color: var(--teal); }
.tabbar .icon { width: 26px; height: 26px; }
.tabbar a[aria-current] .icon { stroke-width: 2.3; }
.record-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.record { display: flex; align-items: center; gap: 14px; background: var(--card); border-radius: 20px; padding: 14px; min-width: 0; }
.record-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; }
.record-icon .icon { width: 24px; height: 24px; }
.teal-gradient { background: linear-gradient(135deg, var(--teal), #27b0a0); color: #fff; }
.indigo-gradient { background: linear-gradient(135deg, var(--indigo), #8683eb); color: #fff; }
.record-body { min-width: 0; flex: 1; }
.record h2 { font-size: 17px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.record p { font-size: 13px; color: var(--secondary); margin-top: 5px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.record-date { display: flex; align-items: center; gap: 4px; }
.record p .icon { width: 12px; height: 12px; }
.record-meta { display: flex; gap: 12px; flex-wrap: wrap; }
.record-meta span { display: inline-flex; align-items: center; gap: 4px; }
.disclosure { width: 11px; height: 15px; color: var(--tertiary); stroke-width: 2.5; margin-left: -6px; }
.sleep-record { padding: 16px; gap: 12px; }
.sleep-record h2 { font-size: 15px; }
.sleep-record .record-body p { font-size: 15px; }
.sleep-value { text-align: right; flex-shrink: 0; max-width: 90px; }
.sleep-value strong { font-size: 15px; font-weight: 600; white-space: nowrap; }
.sleep-value span { display: block; color: var(--secondary); font-size: 10px; line-height: 1.35; margin-top: 4px; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 45px 10px; text-align: center; min-height: 130px; color: var(--secondary); }
.empty > .icon { width: 42px; height: 42px; margin-bottom: 16px; }
.empty h2 { color: var(--text); font-size: 19px; font-weight: 600; }
.empty p { font-size: 15px; line-height: 1.4; max-width: 300px; margin-top: 6px; }
.card .empty { padding: 25px 0; }
.card .empty > .icon { display: none; }
.card .empty h2 { color: var(--secondary); font-size: 15px; font-weight: 400; }
.secondary-button { padding: 12px 20px; border-radius: 14px; background: var(--card); color: var(--teal); font-weight: 600; align-self: center; min-height: 44px; }
.profile-person { display: flex; align-items: center; gap: 14px; background: var(--card); border-radius: 10px; padding: 16px; margin-top: 18px; }
.profile-avatar { color: var(--teal); }
.profile-avatar .icon { width: 48px; height: 48px; }
.profile-person div { min-width: 0; }
.profile-person h2 { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.profile-person p { font-size: 13px; color: var(--secondary); margin-top: 5px; }
.profile-section { margin-top: 10px; }
.profile-section > h2 { font-size: 13px; font-weight: 400; text-transform: uppercase; color: var(--secondary); margin: 0 16px 7px; }
.profile-rows { background: var(--card); border-radius: 10px; padding: 0 16px; }
.profile-rows .detail-row { font-size: 16px; padding: 12px 0; }
.profile-rows .detail-row > span:first-child { color: var(--text); }
.profile-rows .detail-row > span:last-child { color: var(--secondary); }
.profile-rows .detail-row + .detail-row { border-top: .5px solid var(--line); }
.profile-action { display: flex; width: 100%; align-items: center; gap: 10px; padding: 12px 0; color: var(--teal); background: none; text-align: left; font-size: 16px; }
.profile-action .icon:last-child { margin-left: auto; width: 12px; color: var(--tertiary); }
.logout-button { background: var(--card); color: #ff3b30; border-radius: 10px; padding: 13px 16px; text-align: left; margin-top: 10px; }
.detail-navigation { display: flex; align-items: center; justify-content: center; position: sticky; top: 0; min-height: calc(52px + env(safe-area-inset-top)); padding-bottom: 0; background: var(--tab-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); z-index: 5; border-bottom: .5px solid var(--line); }
.detail-navigation h1 { font-size: 17px; letter-spacing: 0; font-weight: 600; }
.back-button { position: absolute; left: 10px; bottom: 2px; min-height: 44px; display: flex; gap: 2px; align-items: center; color: var(--teal); }
.back-button .icon { width: 24px; }
.detail-page { padding-top: 16px; gap: 16px; }
.detail-hero { display: flex; align-items: center; gap: 16px; padding: 18px; background: var(--card); border-radius: 22px; }
.detail-icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 19px; flex-shrink: 0; }
.detail-icon .icon { width: 28px; height: 28px; }
.detail-hero h2 { font-size: 22px; font-weight: 700; line-height: 1.2; }
.detail-hero p { font-size: 15px; color: var(--secondary); margin-top: 6px; line-height: 1.3; }
.detail-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; font-size: 15px; line-height: 1.35; padding: 5.5px 0; }
.detail-row > span:first-child { color: var(--secondary); flex: 1; min-width: 0; }
.detail-row > span:last-child { text-align: right; max-width: 62%; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; user-select: text; }
.raw { border-top: .5px solid var(--line); }
.raw:first-of-type { border-top: 0; }
.raw summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; padding: 12px 0; font-size: 15px; color: var(--teal); }
.raw summary::-webkit-details-marker { display: none; }
.raw summary .icon { width: 13px; height: 13px; transition: transform .15s; }
.raw[open] summary .icon { transform: rotate(90deg); }
.raw pre { max-width: 100%; overflow: auto; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0 0 10px; color: var(--secondary); user-select: text; }
.stage { padding: 10px 0; border-top: .5px solid var(--line); }
.stage:first-of-type { border-top: 0; }
.stage > div { display: flex; justify-content: space-between; gap: 14px; font-size: 15px; }
.stage strong { font-weight: 600; }
.stage small { display: block; font-size: 11px; color: var(--secondary); margin-top: 4px; }
.stage-time { text-align: right; font-variant-numeric: tabular-nums; }
.stage .raw summary { font-size: 12px; padding: 10px 0 2px; }
.detail-loading { display: grid; place-items: center; min-height: 250px; color: var(--teal); }
.notice { background: var(--card); padding: 14px; border-radius: 14px; font-size: 14px; line-height: 1.4; color: var(--secondary); }
.notice.error { color: #c7352d; }
.notice button { color: var(--teal); background: transparent; padding: 10px 0 0; display: block; font-size: 14px; font-weight: 600; }
.loading-line { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--secondary); font-size: 13px; padding: 8px; }
.loading-line .spinner { width: 16px; height: 16px; }
.sync-status { position: sticky; top: max(8px, env(safe-area-inset-top)); z-index: 6; display: flex; align-items: center; gap: 12px; padding: 15px; background: var(--card); border: 1px solid #12857d33; border-radius: 16px; box-shadow: var(--shadow); color: var(--teal); }
.sync-status .spinner { flex-shrink: 0; }
.sync-status strong { display: block; font-size: 14px; font-weight: 600; }
.sync-status span:not(.spinner) { display: block; color: var(--secondary); font-size: 12px; line-height: 1.4; margin-top: 3px; }
.install-dialog { width: min(360px, calc(100% - 36px)); border: none; border-radius: 24px; padding: 28px; background: var(--card); color: var(--text); text-align: center; box-shadow: 0 20px 80px #0003; }
.install-dialog::backdrop { background: #0006; backdrop-filter: blur(4px); }
.install-dialog .dialog-close { position: absolute; right: 6px; top: 6px; }
.install-dialog h2 { font-size: 21px; margin: 14px 0; }
.install-dialog p { font-size: 15px; line-height: 1.5; color: var(--secondary); margin: 12px 0; }
.install-dialog p .icon { width: 17px; height: 17px; color: var(--teal); }
.install-dialog small { font-size: 12px; color: var(--secondary); line-height: 1.5; }
@media (min-width: 600px) {
  body { background: #e8edef; }
  .app-shell { background: var(--bg); box-shadow: 0 0 80px #0e213014; }
  .login { max-width: 480px; margin: 0 auto; box-shadow: 0 0 80px #0e213020; }
}
@media (max-width: 360px) {
  .energy-hero { padding: 18px; }
  .energy-total { font-size: 32px; }
  .energy-pill strong { font-size: 15px; }
  .compact-card { padding: 12px; gap: 7px; }
  .compact-card strong { font-size: 15px; }
  .record { gap: 9px; padding: 12px; }
  .sleep-record h2 { font-size: 14px; }
  .sleep-value strong { font-size: 13px; }
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #000; --card: #1c1c1e; --text: #fff; --secondary: #98989f; --tertiary: #636368; --line: #38383a; --segment: #1c1c1e; --segment-active: #636366; --tab-bg: #161618ec; --teal: #29b5a7; --indigo: #7d7aff; --chart-passive: #61ade87a; }
  body { background: var(--bg); }
  .login, .energy-hero { background: linear-gradient(140deg, #0e2130, #12857d); }
  .google-button { color: #0e2130; }
  .notice.error { color: #ff6961; }
}
@media (min-width: 600px) and (prefers-color-scheme: dark) { body { background: #0b1014; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } .syncing .icon { animation: none; } }