:root { --ink:#2b2622; --muted:#6f655c; --line:#e3dbd2; --bg:#f6f3ef; --card:#fff;
  --brand:#c46f1f; --brand-dark:#94520f; --brand-soft:#fbefe1; --side:#2f2925; --side-ink:#e9e1d8;
  --accent:#94520f; --ok:#1a7f37; --warn:#9a6700; --bad:#b42318; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font: 16px/1.5 system-ui, "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
a { color:var(--accent); }

/* Shell: menu on the left, content on the right */
.nav-toggle { position:absolute; opacity:0; pointer-events:none; }
.side { position:fixed; inset:0 auto 0 0; width:220px; overflow-y:auto; background:var(--side); color:var(--side-ink);
  padding:14px 10px 24px; z-index:20; }
.side-brand { display:flex; gap:10px; align-items:center; color:#fff; text-decoration:none; padding:4px 8px 16px; }
.side-brand img { background:#fff; border-radius:8px; padding:3px; }
.side-brand span { display:flex; flex-direction:column; line-height:1.25; }
.side-brand small { color:#c9bdb0; font-size:.8rem; letter-spacing:.08em; }
.nav-group { margin-top:10px; }
.nav-title { font-size:.75rem; color:#a99b8c; letter-spacing:.1em; padding:6px 10px 2px; }
.nav-item { display:flex; justify-content:space-between; align-items:center; padding:7px 10px; border-radius:6px;
  color:var(--side-ink); text-decoration:none; font-size:.95rem; }
a.nav-item:hover { background:#433a34; }
.nav-item.on { background:var(--brand); color:#fff; font-weight:600; }
.nav-item.planned { color:#7d7064; cursor:default; }
.nav-item small { font-size:.7rem; border:1px solid #5d5148; border-radius:999px; padding:0 6px; }
.frame { margin-left:220px; min-height:100vh; }
.bar { display:flex; align-items:center; gap:12px; padding:10px 20px; background:var(--card);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.bar-title { font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-button { display:none; border:1px solid var(--line); border-radius:6px; padding:4px 10px; cursor:pointer; }
.who { display:flex; gap:10px; align-items:center; margin:0; color:var(--muted); font-size:.92rem; }
.role { font-size:.78rem; border:1px solid var(--line); border-radius:999px; padding:0 8px; }
.nav-shade { display:none; }
main { max-width:1080px; padding:20px; }
body.plain main { margin:0 auto; max-width:640px; }
@media (max-width: 860px) {
  .side { transform:translateX(-100%); transition:transform .2s; }
  .nav-toggle:checked ~ .side { transform:none; }
  .nav-toggle:checked ~ .nav-shade { display:block; position:fixed; inset:0; background:#0006; z-index:15; }
  .frame { margin-left:0; }
  .menu-button { display:inline-block; }
  .bar { padding:10px 16px; }
  .who a, .role { display:none; }
  main { padding:16px; }
}

/* Sign-in */
body.auth { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px;
  background:linear-gradient(160deg, var(--brand-soft), var(--bg) 55%); }
.auth-box { width:100%; max-width:380px; padding:0; }
.auth-brand { text-align:center; margin-bottom:8px; }
.auth-brand img { background:#fff; border-radius:16px; padding:6px; box-shadow:0 1px 4px #0001; }
.auth-brand h1 { margin:10px 0 2px; font-size:1.35rem; letter-spacing:.06em; }
.auth-brand h1 span { display:block; font-size:.95rem; color:var(--muted); font-weight:500; letter-spacing:.2em; }
.auth .card { padding:22px; border-radius:12px; box-shadow:0 2px 12px #0000000d; }
.auth button[type=submit] { width:100%; }
.check { display:flex; gap:8px; align-items:center; font-weight:400; margin:14px 0 0; color:var(--muted); }
.auth-foot { text-align:center; margin-top:14px; }

/* Today */
.kpis { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin:4px 0 8px; }
@media (max-width: 860px) { .kpis { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.kpi { display:block; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  color:var(--ink); text-decoration:none; }
a.kpi:hover { border-color:var(--brand); }
.kpi .num { display:block; font-size:1.9rem; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums; }
.kpi .label { color:var(--muted); font-size:.9rem; }
.kpi.alert .num { color:var(--warn); }
.columns { display:grid; grid-template-columns:2fr 1fr; gap:0 16px; }
@media (max-width: 860px) { .columns { grid-template-columns:1fr; } }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--muted); margin-right:6px; }
.dot.ok { background:var(--ok); } .dot.bad { background:var(--bad); } .dot.warn { background:var(--warn); }

/* Content */
h1 { font-size:1.3rem; margin:4px 0 12px; }
h2 { font-size:1.05rem; margin:22px 0 8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px; margin:10px 0; }
.row { display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap; }
.muted { color:var(--muted); font-size:.9rem; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size:.85rem; word-break:break-all; }
.tag { display:inline-block; padding:1px 8px; border-radius:999px; font-size:.85rem;
  border:1px solid var(--line); background:var(--bg); white-space:nowrap; }
.tag.ok { color:var(--ok); border-color:var(--ok); }
.tag.warn { color:var(--warn); border-color:var(--warn); }
.tag.bad { color:var(--bad); border-color:var(--bad); }
dl { display:grid; grid-template-columns:7em 1fr; gap:4px 12px; margin:0; }
dt { color:var(--muted); }
dd { margin:0; }
ul.plain { list-style:none; padding:0; margin:0; }
ul.plain li { padding:6px 0; border-top:1px solid var(--line); }
ul.plain li:first-child { border-top:0; }
label { display:block; margin:10px 0 4px; font-weight:500; }
input[type=text], input[type=tel], input[type=date], input[type=number], input[type=password], select, textarea {
  width:100%; padding:9px 10px; font:inherit; border:1px solid var(--line); border-radius:6px; background:#fff; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--brand-soft); border-color:var(--brand); }
fieldset { border:1px solid var(--line); border-radius:8px; margin:12px 0; padding:4px 14px 14px; background:var(--card); }
legend { padding:0 6px; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:0 12px; }
button { font:inherit; padding:10px 16px; border-radius:6px; border:1px solid var(--brand);
  background:var(--brand); color:#fff; cursor:pointer; }
button:hover { background:var(--brand-dark); border-color:var(--brand-dark); }
button.secondary { background:#fff; color:var(--brand-dark); }
button.secondary:hover { background:var(--brand-soft); }
button.danger { background:#fff; color:var(--bad); border-color:var(--bad); }
button.link { background:none; border:0; color:var(--accent); padding:0; text-decoration:underline; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; align-items:center; }
.actions form { margin:0; }
.notice { border-left:4px solid var(--warn); background:#fff8e6; padding:10px 12px; border-radius:4px; margin:10px 0; }
.error { border-left-color:var(--bad); background:#fdecea; }
.card.fresh { border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-soft); }
details summary { cursor:pointer; margin:4px 0; }

/* Tables */
.table-wrap { overflow-x:auto; padding:6px 14px; }
table.data { width:100%; border-collapse:collapse; font-size:.95rem; font-variant-numeric:tabular-nums; }
table.data th { text-align:left; color:var(--muted); font-weight:500; font-size:.85rem; padding:8px 8px 6px;
  border-bottom:1px solid var(--line); white-space:nowrap; }
table.data td { padding:7px 8px; border-top:1px solid var(--line); white-space:nowrap; }
table.data tbody tr:first-child td { border-top:0; }
table.data tr.on td { background:var(--brand-soft); }
table.data meter { width:90px; vertical-align:middle; }
table.hours td { padding:3px 8px; border:0; }
table.hours meter { width:100%; min-width:80px; }
.tabs { display:flex; gap:14px; flex-wrap:wrap; font-size:.92rem; }