*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #f5f3ef;
      --surface: #fff;
      --border: #ddd8cf;
      --text: #1a1a1a;
      --muted: #6b6860;
      --green: #2d5a27;
      --green-light: #e6efe5;
      --green-mid: #4a8c42;
      --green-hover: #3b7533;
      --weekend-bg: #fdf5f0;
      --today-bg: #fffbe6;
      --today-col: #fff8dc;
      --red: #b03030;
      /* ── Typography scale ── */
      --fs-xs: 11px;
      --fs-sm: 12px;
      --fs-base: 14px;
      --fs-md: 15px;
      --fs-lg: 16px;
      --fs-xl: 18px;
      --fs-2xl: 20px;
      --fs-date: var(--fs-base);
      --fs-weekday: var(--fs-sm);
      --fs-detail-date: var(--fs-xl);
      --fs-detail-weekday: var(--fs-xl);
      /* ── Control heights / layout ── */
      --ctl-h-sm: 28px; --ctl-h: 34px; --content-max: 1600px;
      --bar-h: 38px; --mobile-tabbar-h: 49px;
    }

    body {
      font-family: system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
      background: var(--bg);
      color: var(--text);
      height: 100vh;
      height: 100dvh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* ── Header ── */
    .header {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      height: 52px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      gap: 16px;
      flex-shrink: 0;
    }

    .logo { font-size:var(--fs-lg); font-weight: 800; color: var(--green); white-space: nowrap; }
    .sep { width: 1px; height: 22px; background: var(--border); }

    .month-nav { display: flex; align-items: center; gap: 8px; }
    .nav-btn {
      width: var(--ctl-h-sm); height: var(--ctl-h-sm); border: 1px solid var(--border);
      background: transparent; border-radius: 4px; cursor: pointer;
      font-size:var(--fs-base); color: var(--muted); display: flex; align-items: center; justify-content: center;
      transition: background 0.1s;
    }
    .nav-btn:hover { background: var(--green-light); color: var(--green); }
    .month-label { font-size:var(--fs-lg); font-weight: 700; min-width: 90px; text-align: center; }

    .today-btn {
      height:var(--ctl-h-sm); display:flex; align-items:center; justify-content:center; padding: 0 10px; font-size:var(--fs-base); border: 1px solid var(--border);
      background: transparent; border-radius: 4px; cursor: pointer; color: var(--muted);
      transition: all 0.1s;
    }
    .today-btn:hover { border-color: var(--green); color: var(--green); }

    .user-bar { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
    .user-label { font-size:var(--fs-base); color: var(--muted); }
    .logout-btn {
      height:var(--ctl-h-sm); display:flex; align-items:center; justify-content:center; padding: 0 10px; font-size:var(--fs-base); border: 1px solid var(--border);
      background: transparent; border-radius: 4px; cursor: pointer; color: var(--muted);
      transition: all 0.1s; font-family: inherit;
    }
    .logout-btn:hover { border-color: #b03030; color: #b03030; }
    .print-btn {
      height:var(--ctl-h-sm); display:flex; align-items:center; justify-content:center; padding: 0 12px; font-size:var(--fs-base); border: 1px solid var(--border);
      background: transparent; border-radius: 4px; cursor: pointer; color: var(--muted);
      transition: all 0.1s; font-family: inherit;
    }
    .print-btn:hover { border-color: var(--green); color: var(--green); }

    .tabs { margin-left: auto; display: flex; gap: 3px; }
    .tab {
      min-height:var(--ctl-h-sm); padding: 5px 14px; font-size:var(--fs-base); border: 1px solid var(--border);
      background: transparent; border-radius: 4px; cursor: pointer; color: var(--muted);
      transition: all 0.1s;
    }
    .tab.active:not(.mobile-tab) { background: var(--green); color: #fff; border-color: var(--green); }

    /* ── Views ── */
    .view { flex: 1; overflow: hidden; display: none; }
    .view.active { display: flex; flex-direction: column; }