/* v0.8 UI — Xero/FreshBooks style */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600;700&display=swap");
:root{--xero:#13b5ea;--ink:#10233d;--paper:#f3f6fb;--line:#d7e2ee;--muted:#5b6f86;--ok:#0b8f55;--warn:#c47b00;--bad:#c62828;--radius:16px;--bottom-nav-h:64px}
body.ui-v08{background:var(--paper);color:var(--ink);font-family:"IBM Plex Sans","PingFang HK","Noto Sans TC",sans-serif}
body.ui-v08 .disclaimer-bar{background:#fff1f2;color:#9f1239}
body.ui-v08 .retention-bar{background:#fff8e8;color:#8a5a00}
body.ui-v08 .app-header{background:#0b2a4a;border-bottom:3px solid var(--xero)}
body.ui-v08 .btn-primary{background:var(--xero);color:#053246;border-radius:12px}
body.ui-v08 .btn-add{background:#0b2a4a}
body.ui-v08 .nav-item.active{background:#e7f7fd;border-left-color:var(--xero);color:#0b2a4a}
body.ui-v08 table.data td,body.ui-v08 table.data th{font-variant-numeric:tabular-nums}
.ui-hero{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:0 0 1rem}
.ui-hero .tile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem 1.05rem .9rem;min-height:108px;cursor:pointer;box-shadow:0 8px 24px rgba(16,35,61,.05);text-align:left}
.ui-hero .tile:hover{border-color:var(--xero)}
.ui-hero .k{font-size:.78rem;color:var(--muted);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ui-hero .v{margin-top:.35rem;font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#0b2a4a;line-height:1.15}
.ui-hero .s{margin-top:.25rem;font-size:.8rem;color:var(--muted)}
.ui-hero .tile.bad .v{color:var(--bad)}.ui-hero .tile.ok .v{color:var(--ok)}.ui-hero .tile.warn .v{color:var(--warn)}
.ui-map-wrap{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1rem;margin-bottom:1rem}
.ui-map-wrap h3{margin:0 0 .35rem;color:#0b2a4a}
.ui-map-legend{color:var(--muted);font-size:.88rem;margin:0 0 .85rem}
.ui-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem}
.ui-node{border:1px solid var(--line);border-radius:14px;padding:.7rem .75rem;background:#f8fbfe;cursor:pointer;min-height:88px;text-align:left}
.ui-node:hover{outline:2px solid var(--xero);background:#eef9fe}
.ui-node .n-k{font-size:.75rem;font-weight:700;color:var(--muted)}
.ui-node .n-v{font-size:1.12rem;font-weight:700;font-variant-numeric:tabular-nums;margin-top:.2rem;color:#0b2a4a;letter-spacing:-.02em}
.ui-node .n-l{font-size:.75rem;color:#3d6a88;margin-top:.2rem;line-height:1.35}
.ui-node.span2{grid-column:span 2}
.ui-node.tone-in{background:#eef8f3;border-color:#b7e0c9}
.ui-node.tone-out{background:#fff6ee;border-color:#f3d0a8}
.ui-node.tone-stock{background:#eef4ff;border-color:#c3d4f5}
.ui-node.tone-tax{background:#f6f0ff;border-color:#d9c8f3}
.ui-node.tone-bad{background:#fff1f1;border-color:#f3b4b4}
.ui-linkbox{margin-top:.85rem;padding:.75rem .85rem;border-radius:12px;background:#f3f7fb;color:#355068;font-size:.9rem}
.ui-linkbox strong{color:#0b2a4a}
.ui-bottom{display:none}
@media (max-width:1023px){.ui-hero,.ui-map{grid-template-columns:1fr 1fr}.ui-node.span2{grid-column:span 2}}
@media (max-width:800px){body.ui-v08 .main{padding-bottom:calc(5.2rem + env(safe-area-inset-bottom))}.ui-hero{grid-template-columns:1fr 1fr;gap:.5rem}.ui-hero .v{font-size:1.28rem}.ui-map{grid-template-columns:1fr}.ui-node.span2{grid-column:auto}.ui-bottom{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:280;background:#0b2a4a;color:#fff;min-height:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));padding:.35rem .2rem calc(.35rem + env(safe-area-inset-bottom));border-top:3px solid var(--xero)}.ui-bottom button{background:transparent;border:0;color:#cfe8f5;font-weight:700;font-size:.72rem;min-height:52px;border-radius:10px}.ui-bottom button.active{color:#fff;background:rgba(19,181,234,.22)}}