:root {
  color-scheme: light;
  --bg: #f6f5f1;
  --surface: #ffffff;
  --ink: #292e28;
  --muted: #73776f;
  --line: #e8e9e2;
  --accent: #b44d38;
  --accent-hover: #9c402e;
  --accent-light: #fcf1ec;
  --green: #526b46;
  --green-light: #eef3e9;
  --abandoned: #8a7b6a;
  --record-bg: #f7f9f4;
  --day-hover: #f0f3eb;
  --blank-bg: #fafbf8;
  --empty-ink: #c4c8bd;
  --panel-bg: #fcfcf9;
  --hover-bg: #f1f2ec;
  --weekend-ink: #7c7061;
  --inactive: #a0a59a;
  --notice-bg: #f8f3e7;
  --notice-ink: #786033;
  --error-bg: #fcf0ec;
  --error-ink: #a34330;
  --input-bg: #fcfcf9;
  --input-line: #d9dcd2;
  --focus-ring: #b44d3826;
  --dialog-shadow: #23291d1a;
  --backdrop: #23291d55;
  --radius: 14px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #191b18;
    --surface: #22251f;
    --ink: #e6e9df;
    --muted: #a3aa99;
    --line: #363b30;
    --accent: #eea08a;
    --accent-hover: #f7b29d;
    --accent-light: #3c2c25;
    --green: #b0c99a;
    --green-light: #34412b;
    --abandoned: #b7a995;
    --record-bg: #272e22;
    --day-hover: #303a28;
    --blank-bg: #1f231c;
    --empty-ink: #59634f;
    --panel-bg: #242820;
    --hover-bg: #30372a;
    --weekend-ink: #909985;
    --inactive: #88927b;
    --notice-bg: #363122;
    --notice-ink: #e0c68e;
    --error-bg: #3f2b24;
    --error-ink: #f1ac96;
    --input-bg: #1d2119;
    --input-line: #4a5540;
    --focus-ring: #eea08a30;
    --dialog-shadow: #00000055;
    --backdrop: #00000088;
  }
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; cursor: pointer; color: inherit; }
button, input { min-height: 44px; }
button:disabled { cursor: default; opacity: .4; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }
.icon { display: block; flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header-inner { max-width: 1424px; min-height: 72px; padding: 0 48px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 23px; font-weight: 720; letter-spacing: -1px; }
.brand-dot { color: var(--accent); }
.device-button { display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 12px; font-weight: 500; }
.device-button:hover { background: var(--hover-bg); }
.device-button > .icon:first-child { width: 16px; height: 16px; color: var(--muted); }
.device-chevron { width: 14px; height: 14px; margin-left: 6px; color: var(--muted); }
.device-light { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.connected .device-light { display: block; }
.connected > .icon:first-child { display: none; }

main { max-width: 1424px; padding: 36px 48px 48px; margin: auto; }
.intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
h1 { font-size: 28px; line-height: 1.5; font-weight: 650; letter-spacing: -.5px; }
.today-stamp { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; line-height: 20px; white-space: nowrap; }
.today-stamp > .icon { width: 16px; height: 16px; }
.today-date { display: inline-flex; color: var(--ink); }
.today-date strong { font-weight: 500; }
.today-stamp > span:last-child { padding-left: 10px; border-left: 1px solid var(--line); }

/* One calendar workspace: month at left, overview and selected day at right. */
.calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 292px; grid-template-rows: auto 1fr; grid-template-areas: "calendar summary" "calendar detail"; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.calendar-panel { grid-area: calendar; min-width: 0; padding: 24px; border-right: 1px solid var(--line); }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.calendar-toolbar h2 { font-size: 20px; line-height: 28px; font-weight: 620; letter-spacing: -.3px; }
.month-controls { display: flex; align-items: center; gap: 12px; }
.month-controls > .text-button { border: 1px solid var(--line); padding: 0 15px; }
.month-arrows { display: flex; gap: 2px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; padding: 0; border-radius: 7px; background: transparent; }
.text-button { border-radius: 7px; padding: 0 12px; background: transparent; font-size: 12px; font-weight: 500; white-space: nowrap; }
.icon-button:hover, .text-button:hover { background: var(--hover-bg); }
.weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding-bottom: 12px; color: var(--muted); font-size: 11px; line-height: 20px; text-align: center; }
.weekdays span:nth-child(n+6) { color: var(--weekend-ink); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.calendar-day, .calendar-blank { min-width: 0; min-height: 106px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.calendar-day { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; text-align: left; background: var(--surface); }
.calendar-blank { background: var(--blank-bg); }
.calendar-day.has-records { background: var(--record-bg); }
.calendar-day:hover { background: var(--day-hover); }
.calendar-day.selected { z-index: 1; background: var(--accent-light); box-shadow: inset 0 0 0 1.5px var(--accent); border-radius: 3px; }
.calendar-day:focus-visible { z-index: 2; outline-offset: -4px; }
.day-number { display: flex; align-items: center; justify-content: space-between; gap: 3px; min-height: 20px; font-size: 12px; line-height: 20px; font-variant-numeric: tabular-nums; }
.day-number-value { display: inline-flex; width: 22px; height: 22px; justify-content: center; align-items: center; margin-left: -4px; border-radius: 50%; }
.today .day-number-value { color: var(--surface); background: var(--accent); font-weight: 650; }
.today-mark { color: var(--accent); font-size: 10px; }
.day-numbers { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px; margin-top: auto; font-variant-numeric: tabular-nums; }
.day-numbers > span { display: flex; flex-shrink: 0; align-items: baseline; gap: 4px; white-space: nowrap; }
.day-numbers strong { font-size: 25px; line-height: 1.1; font-weight: 550; letter-spacing: -.8px; }
.day-numbers small { font-size: 9px; line-height: 14px; font-weight: 400; letter-spacing: 0; }
.completed-count { color: var(--green); }
.day-numbers .abandoned-count { color: var(--abandoned); }
.abandoned-count strong { font-size: 15px; font-weight: 500; letter-spacing: 0; }
.day-focus { display: block; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.day-focus-compact { display: none; }
.day-empty { display: flex; flex: 1; align-items: center; color: var(--empty-ink); font-size: 14px; }
.large-counts .day-numbers { flex-direction: column; align-items: flex-start; gap: 3px; }
.large-counts .day-numbers strong { font-size: 20px; letter-spacing: 0; }
.large-counts .abandoned-count strong { font-size: 14px; }

.section-label { color: var(--muted); font-size: 12px; line-height: 20px; font-weight: 500; }
.summary { grid-area: summary; min-width: 0; padding: 28px 24px; border-bottom: 1px solid var(--line); }
.summary-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; margin-top: 24px; }
.summary-item { min-width: 0; }
.metric-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; line-height: 18px; }
.dot { display: inline-block; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; }
.completed-dot { background: var(--green); }
.abandoned-dot { background: var(--abandoned); }
.summary-item > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin-top: 7px; }
.summary-item strong { font-size: 30px; line-height: 36px; font-weight: 550; font-variant-numeric: tabular-nums; letter-spacing: -1px; overflow-wrap: anywhere; }
.summary-completed strong { color: var(--green); }
.summary-item > div > span { color: var(--muted); font-size: 11px; }

.day-panel { grid-area: detail; min-width: 0; display: flex; flex-direction: column; padding: 26px 24px 22px; background: var(--panel-bg); border-radius: 0 0 var(--radius) 0; }
.day-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 14px; }
.day-title h2 { font-size: 26px; line-height: 36px; font-weight: 600; letter-spacing: -.6px; }
.day-title > span { color: var(--muted); font-size: 11px; }
.day-count { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.day-count > div > span { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.day-count > div > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin-top: 8px; }
.day-count strong { font-size: 32px; line-height: 40px; font-weight: 550; font-variant-numeric: tabular-nums; letter-spacing: -1px; overflow-wrap: anywhere; }
.day-completed-count strong { color: var(--green); }
.day-count small { color: var(--muted); font-size: 11px; }
.day-count.large-counts strong { font-size: 24px; letter-spacing: -.6px; white-space: nowrap; }
.day-duration { display: flex; flex-direction: column; gap: 12px; padding: 22px 0 28px; }
.day-duration > span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.day-duration .icon { width: 14px; height: 14px; }
.day-duration strong { font-size: 21px; line-height: 30px; font-weight: 500; font-variant-numeric: tabular-nums; }
.sync-info { display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 18px; }
.sync-info > .icon { width: 13px; height: 13px; }
.sync-info p { overflow-wrap: anywhere; }

.notice { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; padding: 10px 14px; border-radius: 7px; background: var(--notice-bg); color: var(--notice-ink); font-size: 12px; line-height: 1.8; }
.notice .text-button { min-height: 32px; }
.error-notice { background: var(--error-bg); color: var(--error-ink); }
.calendar-panel[aria-busy="true"] .calendar-grid { opacity: .45; }
dialog { width: min(420px, calc(100% - 32px)); padding: 32px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px var(--dialog-shadow); }
dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(4px); }
dialog form { position: relative; display: flex; flex-direction: column; }
.dialog-close { position: absolute; top: -20px; right: -20px; color: var(--muted); }
.dialog-device-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 20px; background: var(--accent-light); color: var(--accent); border-radius: 12px; }
.dialog-device-icon .icon { width: 24px; height: 24px; }
dialog h2 { font-size: 24px; line-height: 34px; font-weight: 600; margin-bottom: 28px; }
dialog label { font-size: 12px; margin-bottom: 9px; }
input { width: 100%; padding: 15px 14px; border: 1px solid var(--input-line); border-radius: 8px; outline: none; background: var(--input-bg); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 18px; line-height: 24px; letter-spacing: 2px; text-transform: uppercase; }
input::placeholder { color: var(--muted); opacity: .7; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.primary-button { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; padding: 14px 16px; border-radius: 8px; background: var(--accent); color: var(--surface); font-size: 13px; font-weight: 550; }
.primary-button:hover { background: var(--accent-hover); }
.form-error { margin-top: 12px; color: var(--error-ink); font-size: 12px; line-height: 1.8; }

@media (max-width: 1160px) {
  .header-inner { padding: 0 32px; }
  main { padding: 30px 32px 40px; }
  .calendar-layout { grid-template-columns: minmax(0, 1fr) 256px; }
  .calendar-panel { padding: 20px; }
  .calendar-day { padding: 9px; }
  .day-numbers > span { flex-direction: column; gap: 0; }
  .summary, .day-panel { padding-left: 22px; padding-right: 22px; }
  .summary-metrics { column-gap: 12px; }
  .summary-item strong { font-size: 28px; }
  .large-counts .day-numbers > span { flex-direction: row; gap: 3px; }
}

@media (max-width: 960px) {
  .calendar-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "summary" "calendar" "detail"; }
  .summary { padding: 22px 24px; }
  .summary > .section-label { margin-bottom: 18px; }
  .summary-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; }
  .summary-item + .summary-item { padding-left: 22px; border-left: 1px solid var(--line); }
  .calendar-panel { padding: 24px; border-right: 0; }
  .day-numbers > span { flex-direction: row; gap: 4px; }
  .calendar-day { padding: 10px 12px; }
  .day-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; padding: 24px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
  .day-title { grid-column: 1; margin-top: 10px; }
  .day-count { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; padding: 0; border: 0; }
  .day-duration { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; margin-top: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
  .day-duration strong { font-size: 18px; }
  .sync-info { grid-column: 1 / -1; padding-top: 14px; }
}

@media (max-width: 600px) {
  .header-inner { min-height: 64px; padding: 0 20px; gap: 12px; }
  .brand { gap: 7px; font-size: 21px; }
  .brand img { width: 25px; height: 25px; }
  .device-button { flex-shrink: 0; gap: 7px; padding: 0 9px; font-size: 11px; white-space: nowrap; }
  .device-chevron { margin-left: 0; width: 12px; }
  main { padding: 26px 16px 28px; }
  .intro { align-items: flex-start; gap: 14px; margin-bottom: 22px; }
  h1 { font-size: 24px; line-height: 34px; }
  .today-stamp { flex-wrap: wrap; justify-content: flex-end; gap: 0 5px; max-width: 130px; font-size: 10px; line-height: 17px; }
  .today-stamp > .icon { display: none; }
  .today-stamp > span:last-child { width: 100%; padding: 0; border: 0; text-align: right; }
  .calendar-layout { border-radius: 12px; }
  .summary { padding: 20px; }
  .summary > .section-label { margin-bottom: 18px; }
  .summary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
  .summary-item + .summary-item { padding: 0; border: 0; }
  .summary-item strong { font-size: 28px; line-height: 34px; }
  .metric-label, .summary-item > div > span { font-size: 11px; }
  .calendar-panel { padding: 20px 10px 12px; }
  .calendar-toolbar { gap: 8px; margin: 0 8px 20px; }
  .calendar-toolbar h2 { font-size: 18px; }
  .month-controls { gap: 3px; }
  .month-controls > .text-button { padding: 0 11px; }
  .icon-button { width: 36px; }
  .month-arrows { gap: 0; }
  .weekdays { padding-bottom: 10px; font-size: 10px; }
  .calendar-grid { border-radius: 5px; }
  .calendar-day, .calendar-blank { min-height: 112px; }
  .calendar-day { padding: 7px 4px; gap: 6px; }
  .day-number { min-height: 18px; line-height: 18px; font-size: 10px; }
  .day-number-value { width: 19px; height: 19px; margin-left: -1px; }
  .today-mark { font-size: 7px; }
  .day-numbers { flex: 1; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; margin-top: 0; }
  .day-numbers > span { flex-direction: row; align-items: baseline; gap: 2px; }
  .day-numbers .completed-count { flex-direction: column; align-items: flex-start; gap: 0; }
  .day-numbers strong { font-size: 21px; letter-spacing: -.5px; }
  .day-numbers small { font-size: 8px; line-height: 11px; }
  .abandoned-count strong { font-size: 12px; letter-spacing: 0; }
  .day-focus { font-size: 9px; line-height: 13px; }
  .day-focus-full { display: none; }
  .day-focus-compact { display: inline; }
  .large-counts .day-numbers > span { display: block; white-space: nowrap; }
  .large-counts .day-numbers strong { display: block; font-size: 10px; letter-spacing: -.5px; }
  .large-counts .day-numbers small { display: block; }
  .day-panel { padding: 22px 20px 18px; column-gap: 18px; }
  .day-title { gap: 2px 6px; }
  .day-title h2 { font-size: 22px; line-height: 32px; }
  .day-title > span { font-size: 10px; }
  .day-count { gap: 10px; }
  .day-count strong { font-size: 28px; line-height: 36px; }
  .day-count.large-counts strong { font-size: 17px; }
  .day-duration { margin-top: 18px; }
  .notice { margin: 0 6px 16px; padding: 8px 10px; font-size: 11px; }
  dialog { padding: 28px 24px; }
  .dialog-close { top: -16px; right: -12px; }
}

@media (max-width: 360px) {
  .today-mark { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  button { transition: background-color .15s, box-shadow .15s; }
  dialog[open] { animation: appear .18s ease-out; }
  @keyframes appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
}