/* styles.css — 畫面樣式。顏色都定義在 :root 的變數裡，改顏色只要改這裡（也有深色模式）。 */
:root {
  --bg: #F1F5F3; --surface: #FFFFFF; --ink: #15292E; --muted: #5B6E72; --line: #D5E0DD;
  --sea: #0E7470; --sea-soft: #DCEEEB; --on-sea: #F7FBFA;
  --coral: #B4472A; --coral-soft: #FAE4DB;
  --ok: #2C7A4B; --ok-soft: #DDF0E4;
  --amber: #85560F; --amber-soft: #FBEFD6;
  --night: #15292E; --on-night: #EAF2F0;
  --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0E191C; --surface: #16252A; --ink: #E5EEEC; --muted: #9AAFAC; --line: #2B4045;
  --sea: #4CBDB6; --sea-soft: #173937; --on-sea: #0E191C;
  --coral: #F0907A; --coral-soft: #3B231C; --ok: #74CC97; --ok-soft: #173424;
  --amber: #E5B860; --amber-soft: #3A2E17; --night: #0A1416; --on-night: #E5EEEC; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0E191C; --surface: #16252A; --ink: #E5EEEC; --muted: #9AAFAC; --line: #2B4045;
  --sea: #4CBDB6; --sea-soft: #173937; --on-sea: #0E191C;
  --coral: #F0907A; --coral-soft: #3B231C; --ok: #74CC97; --ok-soft: #173424;
  --amber: #E5B860; --amber-soft: #3A2E17; --night: #0A1416; --on-night: #E5EEEC; color-scheme: dark; }

* { box-sizing: border-box; }
html, body { background: var(--bg); }
body { color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.55; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--night); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }

.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--night); color: var(--on-night);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 10px 0; }
.top-in { max-width: 760px; margin: 0 auto; display: grid; gap: 8px; }
.brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand b { font-size: 17px; font-weight: 900; letter-spacing: .03em; }
.brand b span { font-weight: 500; opacity: .75; margin-left: 6px; }
#who { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
#who select { background: transparent; color: var(--on-night); border: 1px solid color-mix(in srgb, var(--on-night) 35%, transparent); border-radius: 8px; padding: 3px 8px; }
#who select option { color: #15292E; }
.clock { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.clock .now { font-family: var(--mono); font-weight: 600; }
.clock .lbl { opacity: .7; }
.clock button { background: color-mix(in srgb, var(--on-night) 12%, transparent); border: 0; color: var(--on-night); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; background: none; border: 0; color: color-mix(in srgb, var(--on-night) 70%, transparent); padding: 8px 12px 10px; font-size: 14.5px; border-bottom: 3px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--on-night); font-weight: 700; border-bottom-color: #F08A6C; }
.tabs .badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: #F08A6C; color: #15292E; font-size: 11.5px; font-weight: 700; line-height: 18px; text-align: center; }

main { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 18px 48px; }
.wrap { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 12px; min-width: 0; }
.card h2 { margin: 0; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card h2 .count { font-family: var(--mono); font-size: 13px; color: var(--muted); font-weight: 500; }
.hint { color: var(--muted); font-size: 13.5px; margin: 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: grid; gap: 4px; min-width: 0; }
.field label { font-size: 12.5px; color: var(--muted); }
input[type=text], input[type=date], input[type=time], input[type=number], select, textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; min-width: 0; }
textarea { resize: vertical; min-height: 64px; }
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 14px; font-weight: 500; }
.btn.primary { background: var(--sea); border-color: var(--sea); color: var(--on-sea); font-weight: 700; }
.btn.warn { background: var(--coral); border-color: var(--coral); color: var(--surface); font-weight: 700; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: var(--surface); font-weight: 700; }
.btn.small { padding: 4px 10px; font-size: 13px; border-radius: 8px; }
.btn.block { width: 100%; padding: 12px; font-size: 15.5px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 12px; font-size: 13.5px; }
.chip[aria-pressed="true"] { background: var(--sea); border-color: var(--sea); color: var(--on-sea); font-weight: 700; }
.pill { display: inline-block; border-radius: 999px; padding: 1px 10px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.st-reserved { background: var(--amber-soft); color: var(--amber); }
.st-paid { background: var(--ok-soft); color: var(--ok); }
.st-done { background: var(--sea-soft); color: var(--sea); }
.st-released, .st-cancelled { background: var(--coral-soft); color: var(--coral); }
.cap { border-radius: 10px; padding: 10px 12px; font-weight: 700; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cap.good { background: var(--ok-soft); color: var(--ok); }
.cap.bad { background: var(--coral-soft); color: var(--coral); }
.cap.na { background: var(--bg); color: var(--muted); font-weight: 500; }
.msg { white-space: pre-wrap; background: var(--ok-soft); border-radius: 14px 14px 14px 4px; padding: 12px 14px; font-size: 14.5px; line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
.msg.alt { background: var(--coral-soft); }
.msg.plain { background: var(--bg); }
.code { font-family: var(--mono); font-size: 13px; }
.list { display: grid; gap: 8px; }
.item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; min-width: 0; }
.item.over { border-color: var(--coral); background: var(--coral-soft); }
.item .t { font-weight: 700; }
.item .s { font-size: 13.5px; color: var(--muted); }
.money { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.empty { color: var(--muted); font-size: 14px; text-align: center; padding: 14px 8px; border: 1px dashed var(--line); border-radius: 12px; }
.session { border-left: 4px solid var(--sea); padding-left: 12px; display: grid; gap: 8px; }
.session.miss { border-left-color: var(--coral); }
.todo { display: flex; gap: 10px; align-items: flex-start; }
.todo input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--sea); flex: none; }
.todo .done { color: var(--muted); text-decoration: line-through; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.tile .k { font-size: 12.5px; color: var(--muted); }
.tile .v { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tile.amber { background: var(--amber-soft); border-color: transparent; } .tile.amber .k { color: var(--amber); }
.tile.coral { background: var(--coral-soft); border-color: transparent; } .tile.coral .k { color: var(--coral); }
.bar { display: grid; grid-template-columns: 56px 1fr 34px; gap: 10px; align-items: center; font-size: 14px; }
.bar .track { height: 14px; background: var(--bg); border-radius: 7px; overflow: hidden; }
.bar .fill { height: 100%; background: var(--sea); border-radius: 7px; }
.progress { height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; }
.progress > div { height: 100%; background: var(--ok); }
.fmt { background: var(--amber-soft); color: var(--ink); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--night); color: var(--on-night); padding: 8px 16px; border-radius: 999px; font-size: 14px; z-index: 20; }
.danger { border-color: color-mix(in srgb, var(--coral) 45%, transparent); }
details summary { cursor: pointer; font-size: 13.5px; color: var(--muted); }
@media (max-width: 560px) {
  .tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) { .btn, .chip { transition: background-color .15s, border-color .15s; } }
.warn-t { color: var(--coral); }
.todo label { flex: 1; min-width: 0; }
.clock[hidden] { display: none; }