:root {
  color-scheme: light;
  font-family: Inter, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --bg: #f5f1ec;
  --card: #fffdfb;
  --ink: #59443f;
  --muted: #8c7c76;
  --line: #ded4cf;
  --accent: #b7757d;
  --accent-soft: #f1d9dc;
  --green: #d9ebdc;
  --blue: #dce7f2;
  --purple: #e7deee;
  --shadow: 0 12px 30px rgba(78, 56, 51, .08);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 1px solid var(--line); border-radius: 11px; background: #fff; padding: .65rem .9rem; cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { color: white; background: var(--accent); border-color: var(--accent); }
button.danger { color: #983b48; background: #fff2f3; border-color: #e7b7bd; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.5rem clamp(1rem, 4vw, 3rem); background: rgba(255,253,251,.94); border-bottom: 1px solid var(--line); }
.topbar h1 { margin: .15rem 0; font-size: clamp(1.8rem, 4vw, 2.7rem); color: #b36873; }
.eyebrow { margin: 0; letter-spacing: .16em; font-size: .72rem; color: var(--muted); font-weight: 800; }
.subtitle { margin: .25rem 0 0; color: var(--muted); }
.topbar-actions, .view-switch, .month-nav { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; }
.view-switch .active { background: var(--ink); color: white; border-color: var(--ink); }
main { padding: 1.25rem clamp(.75rem, 3vw, 2.5rem) 3rem; max-width: 1600px; margin: auto; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.summary-grid article { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.summary-grid span, .summary-grid small { display: block; color: var(--muted); }
.summary-grid strong { display: block; font-size: 1.8rem; margin: .15rem 0; }
.workspace { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.calendar-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.calendar-toolbar h2 { margin: 0; font-size: 1.45rem; text-align: center; }
.source-status { text-align: right; color: var(--muted); font-size: .85rem; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays span { padding: .7rem; text-align: center; font-weight: 800; border-bottom: 1px solid var(--line); }
.calendar-day { min-height: 145px; padding: .6rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fffdfb; overflow: hidden; }
.calendar-day:nth-child(7n) { border-right: 0; background: #fff7f6; }
.calendar-day:nth-child(7n - 1) { background: #faf8ff; }
.calendar-day.outside { opacity: .45; background: #f4f0ec; }
.calendar-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.day-number { display: flex; align-items: center; justify-content: space-between; font-weight: 800; margin-bottom: .45rem; }
.day-number button { padding: .15rem .42rem; border: 0; background: transparent; color: var(--accent); }
.calendar-item { display: block; width: 100%; margin: .28rem 0; padding: .36rem .45rem; border: 0; border-radius: 9px; text-align: left; font-size: .78rem; line-height: 1.35; overflow: hidden; }
.calendar-item.maruko { background: var(--purple); }
.calendar-item.deyi { background: var(--green); }
.patient-line { color: #4e6780; font-size: .75rem; margin-top: .3rem; }
.external-line { background: var(--blue); padding: .3rem .4rem; border-radius: 8px; font-size: .75rem; margin-top: .25rem; }
.filters { display: grid; grid-template-columns: 2fr repeat(4, minmax(140px, 1fr)); gap: .8rem; padding: 1rem; border-bottom: 1px solid var(--line); }
label span { display: block; font-size: .76rem; font-weight: 800; color: var(--muted); margin-bottom: .35rem; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: white; padding: .68rem .75rem; }
textarea { resize: vertical; }
.list-summary { padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.entry-list { display: grid; gap: .7rem; padding: 1rem; }
.entry-card { display: grid; grid-template-columns: 105px 130px minmax(0, 1fr) auto; align-items: start; gap: 1rem; padding: .85rem; border: 1px solid var(--line); border-radius: 13px; background: white; }
.entry-card time, .entry-card small { color: var(--muted); }
.entry-card p { margin: 0; white-space: pre-wrap; }
.category-pill { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .25rem .55rem; font-size: .78rem; }
.analytics-workspace { padding-bottom: 1rem; }
.analytics-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.analytics-toolbar h2 { margin: .2rem 0 0; }
.analytics-toolbar label { min-width: 180px; }
.analytics-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; padding: 1rem; }
.analytics-kpis article, .analytics-panel { border: 1px solid var(--line); border-radius: 14px; background: white; padding: 1rem; }
.analytics-kpis span { color: var(--muted); font-size: .82rem; }
.analytics-kpis strong { display: block; margin-top: .25rem; font-size: 1.65rem; }
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding: 0 1rem; }
.analytics-panel h3 { margin: 0 0 .8rem; }
.stats-table-wrap { max-height: 440px; overflow: auto; }
.stats-table-wrap table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.stats-table-wrap th, .stats-table-wrap td { padding: .52rem .35rem; border-bottom: 1px solid var(--line); text-align: right; }
.stats-table-wrap th:first-child, .stats-table-wrap td:first-child { text-align: left; }
.stats-bar-row { margin: .7rem 0; }
.stats-bar-row > div:first-child { display: flex; justify-content: space-between; gap: 1rem; }
.stats-bar-track { height: 9px; margin: .3rem 0; overflow: hidden; border-radius: 999px; background: #eee8e4; }
.stats-bar-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b7757d, #8c76ae); }
.stats-bar-row small, .empty-state { color: var(--muted); }
.error-panel { margin-bottom: 1rem; padding: .8rem 1rem; border: 1px solid #e7b7bd; color: #983b48; background: #fff2f3; border-radius: 12px; }
.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; background: #4f3e39; color: white; padding: .8rem 1rem; border-radius: 10px; box-shadow: var(--shadow); }
dialog { width: min(680px, calc(100vw - 2rem)); border: 0; border-radius: 18px; padding: 0; box-shadow: 0 24px 80px rgba(55,35,30,.28); }
dialog::backdrop { background: rgba(54,41,37,.42); }
dialog form > header, dialog form > footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
dialog form > footer { border-top: 1px solid var(--line); border-bottom: 0; }
dialog h2 { margin: .15rem 0 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; padding: 1.2rem; }
.form-grid .wide { grid-column: 1 / -1; }
.icon-button { border: 0; font-size: 1.6rem; background: transparent; }
[hidden] { display: none !important; }
@media (max-width: 900px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .filters { grid-template-columns: 1fr 1fr; }
  .calendar-toolbar { grid-template-columns: 1fr; }
  .source-status { text-align: center; }
  .calendar-day { min-height: 110px; padding: .35rem; }
  .entry-card { grid-template-columns: 1fr; gap: .35rem; }
  .analytics-kpis, .analytics-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .calendar-weekdays span { font-size: .72rem; padding: .5rem .15rem; }
  .calendar-item { font-size: 0; min-height: 10px; padding: 0; }
  .calendar-item::before { content: ""; display: block; height: 8px; border-radius: 6px; }
  .calendar-item.maruko::before { background: #a985c4; }
  .calendar-item.deyi::before { background: #5d9a72; }
  .patient-line, .external-line { font-size: .64rem; }
  .filters, .form-grid { grid-template-columns: 1fr; }
  .analytics-toolbar { align-items: stretch; flex-direction: column; }
  .analytics-kpis, .analytics-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
}