:root {
  --navy:#14204A; --navy2:#1E2D63; --blue:#2F6DA8; --bg:#F3F5F9; --card:#FFFFFF; --line:#D9DEE7; --text:#1B2233; --mute:#6E7687;
  --green:#0B7A55; --red:#B4232C; --amber:#B36B00; --radius:12px; --shadow:0 1px 2px rgba(20,32,74,.06), 0 4px 14px rgba(20,32,74,.06);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; padding:0; background:#E4E8EF; color:var(--text); font-size:16px; line-height:1.5;
  font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC","Segoe UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
#app { max-width:640px; min-height:100vh; margin:0 auto; background:var(--bg); position:relative; box-shadow:0 0 40px rgba(20,32,74,.08); }
a { color:var(--blue); }

/* 頁首 */
header.bar { background:var(--card); border-bottom:3px solid var(--navy); padding:10px 14px; display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:5; }
header.bar h1 { font-size:19px; margin:0; color:var(--navy); flex:1; letter-spacing:.5px; }
header.bar img { height:28px; }
button.back { background:transparent; color:var(--navy); padding:8px 10px 8px 4px; font-size:16px; font-weight:600; border-radius:8px; }
button.back:active { background:#EEF1F6; }

/* 按鈕 */
button { font-family:inherit; font-size:16px; border:0; border-radius:10px; padding:11px 16px; background:var(--navy); color:#fff; font-weight:600; cursor:pointer; transition:filter .12s, transform .05s; }
button:active { transform:translateY(1px); filter:brightness(.92); }
button:disabled { opacity:.5; cursor:default; }
button.primary { background:var(--navy); }
button.big { padding:15px 18px; font-size:18px; border-radius:12px; }
button.wide { width:100%; display:block; }
button.sm { padding:7px 12px; font-size:14px; border-radius:8px; white-space:nowrap; }
button.ghost { background:#fff; color:var(--navy); border:1px solid var(--line); }
button.danger { background:#fff; color:var(--red); border:1px solid #E9C4C7; }

/* 首頁與登入 */
.hero { background:var(--card); text-align:center; padding:34px 20px 22px; border-bottom:3px solid var(--navy); }
.hero img { width:62%; max-width:300px; }
.hero h2 { color:var(--navy); margin:18px 0 2px; font-size:23px; letter-spacing:2px; }
.hero .sub { color:var(--mute); font-size:13px; }
.menu { padding:16px 16px 4px; }
.tile { display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin:10px 0; text-decoration:none; color:var(--text); box-shadow:var(--shadow); }
.tile:active { background:#F7F9FC; }
.tile .ico { width:42px; height:42px; border-radius:11px; background:#EEF2F8; color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:21px; font-weight:700; flex:none; }
.tile .tt { flex:1; min-width:0; display:flex; flex-direction:column; }
.tile .tt b { font-size:17px; color:var(--navy); }
.tile .tt i { font-style:normal; font-size:13px; color:var(--mute); }
.tile .arr { color:#A9B1C0; font-size:24px; }
.tile.primary { background:var(--navy); border-color:var(--navy); }
.tile.primary .ico { background:rgba(255,255,255,.14); color:#fff; }
.tile.primary .tt b { color:#fff; } .tile.primary .tt i { color:#C5CCE0; } .tile.primary .arr { color:#8C97BD; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:2px 0 12px; }
.stats.four { grid-template-columns:repeat(2,1fr); margin:12px 0; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px 8px; text-align:center; }
a.stat { text-decoration:none; display:block; } a.stat:active { background:#F7F9FC; }
.who.small { font-size:12px; margin-top:6px; }
.stat b { display:block; font-size:24px; color:var(--navy); line-height:1.2; }
.stat i { font-style:normal; font-size:12px; color:var(--mute); }
.stat.alert b { color:var(--red); } .stat.alert { border-color:#E9C4C7; background:#FFF8F8; }
.who { text-align:center; color:var(--mute); font-size:13px; margin:16px 0 0; }
.foot { text-align:center; color:#8A93A6; font-size:11px; padding:20px 8px 26px; }

/* 版面 */
.pad { padding:14px; } .pad.tight { padding-bottom:8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin:10px 0; box-shadow:var(--shadow); display:block; }
.card.nopad { padding:6px 8px 10px 4px; }
.card.dim { opacity:.62; }
.card.err { color:var(--red); border-color:#E9C4C7; background:#FFF8F8; }
a.card.link { text-decoration:none; color:inherit; } a.card.link:active { background:#F7F9FC; }
.row { display:flex; gap:8px; align-items:flex-start; } .row > .grow { flex:1; min-width:0; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.h3 { font-weight:700; color:var(--navy); font-size:16px; margin:20px 0 6px; padding-left:9px; border-left:4px solid var(--blue); line-height:1.25; }
.h3 small { font-weight:400; color:var(--mute); font-size:12px; margin-left:8px; }
.h3row { align-items:center; margin-top:18px; } .h3row .h3 { margin:0; }
.hd { font-weight:700; color:var(--text); word-break:break-word; }
.bd { margin-top:6px; white-space:pre-wrap; word-break:break-word; font-size:15px; }
.bd.clip { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; }
.meta, .mute { color:var(--mute); font-size:13px; }
.hint { color:var(--mute); font-size:12.5px; margin:4px 0 0; }
.center { text-align:center; padding:56px 20px; } .center-t { text-align:center; }
.spin { width:28px; height:28px; border:3px solid #D5DBE6; border-top-color:var(--navy); border-radius:50%; margin:0 auto 12px; animation:sp 0.8s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }

/* 表單 */
.f { margin:10px 0; }
label { display:block; font-size:13.5px; font-weight:600; color:#3B4458; margin:0 0 5px; }
label em { font-style:normal; font-weight:600; color:var(--red); font-size:12px; margin-left:4px; }
input, select, textarea { width:100%; font-family:inherit; font-size:16px; padding:11px 12px; border:1px solid #C9D0DC; border-radius:9px; background:#fff; color:inherit; outline:none; transition:border-color .12s, box-shadow .12s; }
input:focus, select:focus, textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,109,168,.16); }
input::placeholder, textarea::placeholder { color:#A3ABBA; }
textarea { resize:vertical; line-height:1.5; }
.sec { font-weight:700; color:var(--navy); font-size:16px; margin:0 0 4px; padding-bottom:8px; border-bottom:1px solid #EBEEF3; }
.sec span { font-weight:400; color:var(--mute); font-size:12.5px; margin-left:8px; }
.checks { border:1px solid #C9D0DC; border-radius:9px; background:#fff; padding:4px 10px; max-height:230px; overflow:auto; }
.checks .hint { padding:8px 0; margin:0; }
label.check { display:flex; align-items:center; gap:10px; padding:9px 0; margin:0; font-weight:400; font-size:15px; color:var(--text); border-bottom:1px solid #F0F2F6; }
label.check:last-child { border-bottom:0; }
label.check input { width:20px; height:20px; flex:none; accent-color:var(--navy); }
label.check span:first-of-type { flex:1; min-width:0; }
.sticky { position:sticky; bottom:0; background:linear-gradient(to top, var(--bg) 72%, rgba(243,245,249,0)); padding:14px 0 12px; text-align:center; z-index:4; }
.sticky a { display:inline-block; margin-top:8px; }

/* 分段切換與清單 */
.seg { display:flex; background:#E6EAF1; border-radius:10px; padding:3px; margin-bottom:10px; }
.seg button { flex:1; background:transparent; color:#4A5263; font-size:14px; padding:8px 4px; border-radius:8px; font-weight:600; }
.seg button.on { background:#fff; color:var(--navy); box-shadow:0 1px 3px rgba(20,32,74,.15); }
.seg.quick { margin:12px 0; }
.count { color:var(--mute); font-size:12.5px; padding:0 16px 6px; }
.list { background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.item { padding:12px 14px; border-bottom:1px solid #ECEFF4; border-left:4px solid transparent; }
.item:last-child { border-bottom:0; }
.item.over { border-left-color:var(--red); } .item.over .meta, .item-c.over .meta { color:var(--red); }
.item-c.over { border-left:4px solid var(--red); }

/* 標籤 */
.chip { display:inline-block; font-size:12px; font-weight:600; padding:1px 9px; border-radius:20px; white-space:nowrap; vertical-align:middle; line-height:1.6; }
.chip.mp { background:#DDF3E9; color:#0B6A46; } .chip.ok { background:#DCF1F2; color:#0E6570; } .chip.run { background:#E1ECF8; color:#1F5C96; }
.chip.quote { background:#FBEFD9; color:#8A5200; } .chip.new { background:#ECEFF4; color:#4A5263; } .chip.off { background:#F3E3E4; color:#8E2A31; }
.chip.plain { background:#F1F3F7; color:#4A5263; font-weight:500; }

/* 客戶查詢 */
.card.head { border-top:3px solid var(--navy); }
.big-t { font-size:20px; font-weight:700; color:var(--navy); }
.mini { display:flex; gap:16px; margin-top:10px; padding-top:10px; border-top:1px solid #EBEEF3; font-size:13px; color:var(--mute); flex-wrap:wrap; }
.mini b { color:var(--navy); font-size:16px; }
.acts { display:flex; gap:6px; flex:none; }
.kv { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px; background:#F6F8FB; border-radius:8px; padding:8px; }
.kv span { font-size:14px; font-weight:600; color:var(--text); text-align:center; word-break:break-all; }
.kv i { display:block; font-style:normal; font-weight:400; font-size:11.5px; color:var(--mute); }
.line { font-size:14px; margin-top:7px; word-break:break-word; }
.line i { font-style:normal; color:var(--mute); font-size:12.5px; margin-right:8px; }

/* 管理總覽 */
.kpi { background:linear-gradient(135deg, var(--navy), var(--navy2)); color:#fff; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.kpi i { font-style:normal; font-size:12.5px; color:#C5CCE0; display:block; }
.kpi b { display:block; font-size:28px; letter-spacing:.5px; margin:2px 0 6px; } .kpi b small { font-size:14px; font-weight:400; color:#C5CCE0; }
.kpi span { font-size:12.5px; color:#DCE1EE; display:block; }
.bars { padding:10px 6px 0 0; }
.yr { display:flex; justify-content:space-between; font-size:14px; } .yr b { color:var(--navy); }
.bar-y, .bar-s { background:#EDF0F5; border-radius:6px; height:10px; margin:5px 0 12px; overflow:hidden; }
.bar-y div { height:100%; background:var(--green); border-radius:6px; }
.stg { display:grid; grid-template-columns:64px 1fr 30px 108px; gap:8px; align-items:center; padding:5px 0; font-size:13px; }
.stg .bar-s { margin:0; } .stg .bar-s div { height:100%; background:var(--blue); border-radius:6px; }
.stg b { text-align:right; color:var(--navy); } .stg i { font-style:normal; color:var(--mute); font-size:12px; text-align:right; }
.rank { width:26px; height:26px; border-radius:50%; background:#EEF2F8; color:var(--navy); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex:none; margin-top:1px; }
.amt { text-align:right; flex:none; } .amt b { display:block; color:var(--navy); font-size:16px; } .amt i { font-style:normal; font-size:11px; color:var(--mute); }

/* 出差報告預覽 */
.paper { padding:0 14px 24px; }
.rpt { background:#fff; padding:16px; border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); overflow-x:auto; }

/* 訊息列 */
#toast { position:fixed; left:50%; transform:translateX(-50%); top:12px; max-width:600px; width:92%; padding:12px 16px; border-radius:10px; color:#fff; z-index:50; display:none; font-size:15px; box-shadow:0 6px 20px rgba(0,0,0,.2); }
#toast.ok { background:#0B6A46; } #toast.err { background:#B4232C; } #toast.info { background:#3A4660; }

@media (max-width:380px) { .row2 { grid-template-columns:1fr; } .kv { grid-template-columns:repeat(2,1fr); } .stg { grid-template-columns:60px 1fr 26px; } .stg i { display:none; } }