:root { --orange:#f28c28; --orange-dark:#c45a00; --orange-btn:#d0620a; --bg:#fff6ec; --card:#fff; --text:#1c1c1e; --muted:#8e8e93; --line:#e5e5ea; --blue:#c45a00; --green:#34c759; --red:#ff3b30; --brown:#6f4e37; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; background:var(--bg); color:var(--text); font:17px/1.35 -apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif; }
.top { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px; padding:calc(10px + env(safe-area-inset-top)) 24px 10px; background:rgba(255,246,236,.92); backdrop-filter:blur(20px); }
.top h1 { font-size:30px; margin:0; font-weight:700; }
.sync { background:#ff9500; color:#fff; font-size:14px; padding:4px 10px; border-radius:20px; }
main { padding:0 24px calc(96px + env(safe-area-inset-bottom)); }
.tabbar { position:fixed; bottom:0; left:0; right:0; display:flex; background:rgba(255,250,244,.95); backdrop-filter:blur(20px); border-top:.5px solid #f0d6bd; padding-bottom:env(safe-area-inset-bottom); z-index:5; }
.tabbar a { flex:1; text-align:center; padding:8px 0 10px; font-size:12px; color:var(--muted); text-decoration:none; }
.tabbar a span { display:block; font-size:24px; filter:grayscale(1) opacity(.6); }
.tabbar a.on { color:var(--blue); } .tabbar a.on span { filter:none; }
.card { background:var(--card); border-radius:14px; padding:16px; margin:0 0 16px; }
.card h2 { font-size:15px; font-weight:600; color:var(--muted); margin:0 0 10px; letter-spacing:.5px; }
.datebar { display:flex; align-items:center; gap:10px; margin:6px 0 16px; flex-wrap:wrap; }
.datebar strong { font-size:22px; }
.btn { background:var(--card); color:var(--blue); text-decoration:none; padding:8px 16px; border-radius:10px; font-size:18px; }
.btn[aria-disabled] { pointer-events:none; opacity:.3; }
input[type=date] { font:inherit; border:0; background:var(--card); border-radius:10px; padding:8px 10px; color:var(--blue); }
.switch-row { margin-left:auto; display:flex; align-items:center; gap:8px; font-weight:600; }
input.ios { appearance:none; -webkit-appearance:none; width:51px; height:31px; border-radius:31px; background:#e9e9eb; position:relative; transition:.2s; margin:0; flex:none; }
input.ios::after { content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.2); transition:.2s; }
input.ios:checked { background:var(--green); } input.ios:checked::after { left:22px; }
.today { display:grid; grid-template-columns:1fr 1.25fr; gap:16px; }
@media (max-width:960px) { .today { grid-template-columns:1fr; } }
.today.is-closed .col { opacity:.45; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; }
.field,.item { font:inherit; border:0; border-radius:12px; background:var(--bg); padding:12px; text-align:left; color:var(--text); min-height:64px; }
.field span,.item span { display:block; font-size:14px; color:var(--muted); }
.field small { margin-left:6px; font-size:11px; }
.field b { font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; }
.item { min-height:76px; text-align:center; }
.item span { font-size:18px; color:var(--text); font-weight:600; }
.item b { font-size:16px; color:var(--blue); font-weight:500; }
.item small { display:block; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item.on { background:#e5f1ff; box-shadow:inset 0 0 0 2px var(--blue); }
.item.retired { background:#f7f7f7; } .item.retired span::after { content:"（舊）"; font-size:12px; color:var(--muted); }
.field:active,.item:active,.keys button:active { transform:scale(.97); background:#d1d1d6; }
.tfield { display:flex; align-items:center; gap:12px; border-top:.5px solid var(--line); padding:10px 2px; }
.tfield span { width:80px; color:var(--muted); font-size:15px; }
.tfield input,.list input:not(.ios) { flex:1; font:inherit; border:0; outline:0; background:transparent; min-width:0; }
.summary,.kpis { display:flex; gap:10px; }
.summary div,.kpis div { flex:1; text-align:center; }
.summary span,.kpis span { display:block; font-size:14px; color:var(--muted); }
.summary b { font-size:28px; font-variant-numeric:tabular-nums; } .kpis b { font-size:22px; }
.kpis.inline { margin-bottom:12px; }
.neg { color:var(--red); }
.muted { color:var(--muted); }
.scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:15px; font-variant-numeric:tabular-nums; }
th { font-weight:600; color:var(--muted); font-size:13px; padding:6px 8px; text-align:right; white-space:nowrap; border-bottom:.5px solid var(--line); }
td { padding:8px; text-align:right; border-bottom:.5px solid var(--line); white-space:nowrap; }
th:first-child,td:first-child,td.left { text-align:left; } td.muted { text-align:center; }
tbody tr[data-go],tbody tr[data-month] { cursor:pointer; } tbody tr:active { background:var(--bg); }
tfoot td { font-weight:700; border-bottom:0; }
.settings { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:960px) { .settings { grid-template-columns:1fr; } }
.list { list-style:none; margin:0; padding:0; }
.list li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:.5px solid var(--line); min-height:50px; }
.list li:last-child { border-bottom:0; } .list small { font-size:12px; }
button.primary,button.ghost { font:inherit; border:0; border-radius:12px; padding:14px; font-weight:600; }
button.primary { background:var(--blue); color:#fff; } button.ghost { background:var(--bg); color:var(--red); }
button.small { padding:8px 14px; font-size:15px; border-radius:10px; }
.sheet { position:fixed; inset:0; background:rgba(0,0,0,.3); display:flex; align-items:flex-end; justify-content:center; z-index:10; }
.sheet[hidden] { display:none; }
.sheet-card { background:var(--bg); width:min(420px,100%); border-radius:16px 16px 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom)); }
.pad-label { color:var(--muted); text-align:center; }
.pad-value { font-size:44px; font-weight:600; text-align:center; margin:4px 0 10px; font-variant-numeric:tabular-nums; }
.pad-value::before { content:"$"; color:var(--muted); font-size:28px; margin-right:4px; }
.pad-note { width:100%; font:inherit; border:0; border-radius:10px; padding:10px 12px; margin-bottom:10px; }
.keys { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.keys button { font:500 28px -apple-system,sans-serif; border:0; border-radius:12px; background:#fff; height:62px; color:var(--text); }
.pad-actions { display:grid; grid-template-columns:1fr 2fr; gap:8px; margin-top:8px; }
@media (max-width:960px) { table { font-size:13px; } td,th { padding:7px 4px; } }

/* ---------- 品牌色：橘 ---------- */
body { background:linear-gradient(180deg,#fff1e2 0,#fff6ec 220px,#fff8f1 100%) fixed; }
.top { border-bottom:3px solid var(--orange); }
.logo { width:46px; height:46px; flex:none; }
.titles { display:flex; flex-direction:column; }
.brand { font-size:13px; font-weight:700; letter-spacing:1.5px; color:var(--orange-dark); text-transform:uppercase; }
.top h1 { font-size:26px; line-height:1.15; }
.sync { background:#d93f0b; }
.card { box-shadow:0 1px 3px rgba(150,80,10,.08); }
.btn { color:var(--orange-dark); box-shadow:0 1px 2px rgba(150,80,10,.1); font-weight:600; }
input[type=date] { color:var(--orange-dark); }
input.ios:checked { background:var(--orange); }
button.primary { background:var(--orange-btn); }
.tabbar a.on { color:var(--orange-dark); font-weight:600; }
.pad-actions .primary { font-size:20px; }
.keys button { box-shadow:0 1px 0 rgba(0,0,0,.08); }
.sheet-card { background:#fff3e6; }

/* 各區塊不同淺色：底色 --t，標題 --h，選取 --s */
.tint { background:var(--t); }
.tint h2 { color:var(--h); }
[data-sec="營收"]     { --t:#ffe9d2; --h:#a84a00; --s:#f28c28; }
[data-sec="進貨"]     { --t:#eaf4e1; --h:#3f6b12; --s:#6aa834; }
[data-sec="雜項"]     { --t:#fbe8ec; --h:#a3324d; --s:#d9577a; }
[data-sec="行動支付"] { --t:#e5f0fa; --h:#1d5f93; --s:#3b8fd0; }
[data-sec="現金匯入"] { --t:#fbf3d4; --h:#86600a; --s:#d1a521; }
[data-sec="發票"]     { --t:#fff0e0; --h:#a84a00; --s:#f28c28; }
[data-sec="公休"]     { --t:#efeaf7; --h:#5b4596; --s:#7d64c4; }
.tint .field, .tint .item { background:rgba(255,255,255,.85); }
.tint .item.on { background:#fff; box-shadow:inset 0 0 0 2.5px var(--s); }
.tint .item.on b, .tint .item b { color:var(--h); }
.tint .item.retired { background:rgba(255,255,255,.5); }
.tint .tfield, .tint .list li, .tint td, .tint th { border-color:rgba(0,0,0,.08); }
.summary { background:linear-gradient(135deg,#c75f0c,#9e4300); color:#fff; }
.summary span { color:rgba(255,255,255,.9); font-weight:600; }
.summary b { color:#fff; text-shadow:0 1px 1px rgba(120,50,0,.25); }
.summary b.neg { color:#fff; background:#7a1410; border-radius:10px; padding:0 10px; }
.kpis b { color:#5a2a00; }
thead th { background:#fff3e6; }
.scroll:not(.tint) tbody tr:nth-child(even) { background:#fffaf4; }
tfoot td { background:#ffe9d2; color:#5a2a00; }
.tint tfoot td { background:transparent; }
.neg { color:#c2261b; }
.settings { margin-top:14px; }

/* 尚未連線提示 */
.notconn { display:block; text-decoration:none; color:#5a2a00; background:#fff3e0; border:2px dashed var(--orange); border-radius:14px; padding:14px 16px; margin:6px 0 16px; }
.notconn b { display:block; font-size:18px; margin-bottom:4px; }
.notconn span { display:block; font-size:15px; }
.notconn em { display:inline-block; margin-top:8px; font-style:normal; font-weight:700; color:#fff; background:var(--orange-btn); padding:6px 14px; border-radius:10px; }
.card.need { box-shadow:0 0 0 3px var(--orange); }
.notconn.err { background:#fdecea; border-color:#c2261b; color:#7a1a12; } .notconn.err em { background:#b3261e; }