:root{--navy:#102b40;--navy2:#193d55;--ink:#22313f;--muted:#6f7e8b;--paper:#f1f4f6;--line:#dfe6eb;--orange:#e77736;--pale:#fff1e6;--white:#fff;--green:#2d7866;--greenbg:#e6f2ec;--red:#b84e43;--redbg:#fcece8;--blue:#3d6f8d;--bluebg:#e8f0f5;--radius:12px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#e6ebef;color:var(--ink);font-family:system-ui,-apple-system,'Noto Sans CJK TC','PingFang TC','Microsoft JhengHei',sans-serif;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,[role=button]:focus-visible{outline:3px solid #e7773680;outline-offset:2px}
[hidden]{display:none!important}

.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,30px);background:#14212cf2;color:#fff;font-size:12.5px;padding:10px 16px;border-radius:9px;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:88vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
dialog{border:0;border-radius:14px;padding:18px;max-width:min(560px,92vw);box-shadow:0 20px 60px #0005}
dialog::backdrop{background:#0b233d80}
dialog h2{margin:0 0 8px;font-size:17px;color:var(--navy)}dialog h3{font-size:13px;margin:14px 0 4px;color:var(--navy)}
dialog p{font-size:12.5px;line-height:1.7;margin:0 0 6px;color:var(--ink)}
dialog textarea{width:100%;min-height:90px;border:1px solid var(--line);border-radius:8px;padding:9px;font-size:13px}
.dialogBtns{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.dialogBtns button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 14px;font-size:12.5px}
.dialogBtns .primary{background:var(--navy);color:#fff;border-color:var(--navy)}
/* ---------- 手機 App 畫面 ---------- */
.app{font-size:13px;line-height:1.45;color:var(--ink);display:flex;flex-direction:column;flex:1;min-height:0;background:var(--paper);position:relative}
.app svg.ic{flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.statusbar{height:26px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:11px;font-weight:700;color:var(--navy);background:#fff}
.statusbar i{display:inline-block;width:20px;height:9px;border:1.5px solid var(--navy);border-radius:3px;position:relative}
.statusbar i::after{content:'';position:absolute;inset:1.5px;background:var(--navy);border-radius:1px}
.appbar{flex:none;height:46px;background:#fff;display:flex;align-items:center;gap:4px;padding:0 6px 0 4px;border-bottom:1px solid var(--line)}
.appbar .ib{width:38px;height:38px;border:0;background:none;border-radius:10px;display:grid;place-items:center;color:var(--navy);position:relative;flex:none}
.appbar .ib:active{background:var(--paper)}
.appbar .ttl{flex:1;min-width:0;padding-left:2px}
.appbar .ttl b{display:block;font-size:15px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.appbar .ttl span{display:block;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{position:absolute;top:4px;right:3px;background:var(--orange);color:#fff;font-size:9px;font-weight:700;min-width:15px;height:15px;border-radius:8px;display:grid;place-items:center;padding:0 3px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none;margin-left:8px}
.demoTag{font-size:9px;font-weight:700;letter-spacing:.8px;color:#ad5d2d;background:var(--pale);border-radius:4px;padding:2px 5px;flex:none}
.tabs{flex:none;display:flex;gap:2px;overflow-x:auto;background:#fff;border-bottom:1px solid var(--line);padding:0 8px;scrollbar-width:none}
.tabs::-webkit-scrollbar,.hscroll::-webkit-scrollbar,.chips::-webkit-scrollbar,.bar::-webkit-scrollbar{display:none}
.tabs button{flex:none;border:0;background:none;padding:9px 10px 8px;font-size:12.5px;color:var(--muted);border-bottom:2.5px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--navy);font-weight:750;border-color:var(--orange)}
.tabs button em{font-style:normal;font-size:10px;color:var(--muted);margin-left:3px;font-weight:500}
.body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:10px 12px 22px;display:flex;flex-direction:column;gap:9px;scroll-behavior:auto}
.body>*{flex:none}
.bar{flex:none;display:flex;gap:7px;overflow-x:auto;background:#fff;border-top:1px solid var(--line);padding:7px 10px;scrollbar-width:none}
.bar .btn{flex:none}
.bar .btn:first-child{flex:1 0 auto}
.nav{flex:none;display:flex;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.nav button{flex:1;border:0;background:none;padding:6px 0 5px;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:10px;color:var(--muted);position:relative}
.nav button.on{color:var(--navy);font-weight:750}.nav button.on svg{color:var(--orange)}
.nav button.on::before{content:'';position:absolute;top:0;width:24px;height:2.5px;background:var(--orange);border-radius:2px}

.hl{outline:2.5px solid var(--orange)!important;outline-offset:1px;border-radius:8px;position:relative;z-index:1}
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:3px 2px -3px}
.sec h3{font-size:13px;margin:0;color:var(--navy);font-weight:750}
.sec a,.more{font-size:11px;color:var(--blue);text-decoration:none;cursor:pointer;white-space:nowrap;border:0;background:none;padding:0}
.card{background:#fff;border-radius:var(--radius);padding:10px 12px}
.sum{background:#fff;border-radius:var(--radius);padding:9px 12px;display:flex;gap:10px;align-items:flex-start;border-left:3px solid var(--orange)}
.sum.dark{background:var(--navy);border-left-color:var(--orange);color:#fff}
.sum.dark b{color:#fff}.sum.dark small,.sum.dark .k{color:#a9bfce}
.sum .k{font-size:9.5px;color:var(--muted);letter-spacing:.6px;display:block}
.sum b{display:block;font-size:14.5px;color:var(--navy);line-height:1.35;white-space:pre-line}
.sum small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.sum .mini{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.sum .mini span{font-size:10.5px;background:var(--paper);border-radius:5px;padding:2px 6px;color:var(--ink)}
.sum>div{flex:1;min-width:0}
.alert{display:flex;gap:8px;align-items:flex-start;border-radius:10px;padding:7px 10px;background:var(--pale);color:#a5501c;font-size:11.5px}
.alert.green{background:var(--greenbg);color:var(--green)}.alert.red{background:var(--redbg);color:var(--red)}
.alert b{display:block;font-size:12px;line-height:1.4}.alert span{display:block;color:var(--ink);font-size:10.5px;line-height:1.45}
.kpis{display:grid;gap:6px}
.kpis.c4{grid-template-columns:repeat(4,1fr)}.kpis.c3{grid-template-columns:repeat(3,1fr)}.kpis.c2{grid-template-columns:repeat(2,1fr)}
.kpi{background:#fff;border-radius:10px;padding:7px 8px 6px;min-width:0;cursor:pointer}
.kpi span{display:block;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi b{display:block;font-size:18px;color:var(--navy);line-height:1.25;white-space:nowrap}
.kpi b.s{font-size:14px;line-height:1.6}
.kpi small{display:block;font-size:9.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi.warn b{color:var(--orange)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px}
.chip{flex:none;border:1px solid var(--line);background:#fff;border-radius:15px;padding:4px 11px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.list{background:#fff;border-radius:var(--radius);overflow:hidden}
.row{display:flex;align-items:center;gap:9px;padding:8px 10px;min-height:46px;cursor:pointer}
.row+.row{border-top:1px solid #eef2f5}
.row .ico{width:28px;height:28px;border-radius:8px;background:var(--bluebg);color:var(--blue);display:grid;place-items:center;flex:none}
.row .ico.o{background:var(--pale);color:var(--orange)}.row .ico.g{background:var(--greenbg);color:var(--green)}
.row .tx{flex:1;min-width:0}
.row .tx b{display:block;font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tx span{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tr{flex:none;font-size:10px;font-weight:650;color:var(--green);background:var(--greenbg);border-radius:5px;padding:2px 6px;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tr.o{color:#b55a20;background:var(--pale)}.row .tr.n{color:var(--muted);background:var(--paper)}
.row .chev{color:#b3bec7;flex:none}
.chk{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--orange);flex:none;display:grid;place-items:center;color:#fff}
.chk.done{background:var(--green);border-color:var(--green)}
.stack{display:flex;flex-direction:column;gap:7px}
.pcard{background:#fff;border-radius:var(--radius);padding:9px 11px 9px 13px;position:relative;cursor:pointer;overflow:hidden}
.pcard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange)}
.pcard .h{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.pcard .h b{font-size:13px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .h i{font-style:normal;font-size:10px;font-weight:650;flex:none;border-radius:5px;padding:1px 6px;background:var(--greenbg);color:var(--green)}
.pcard .h i.o{background:var(--pale);color:#b55a20}.pcard .h i.n{background:var(--paper);color:var(--muted)}
.pcard p{margin:1px 0 0;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard p.m{color:var(--ink);font-size:11px}
.prog{display:flex;align-items:center;gap:7px;margin-top:5px}
.prog div{flex:1;height:4px;background:#e9eef2;border-radius:3px;overflow:hidden}
.prog div i{display:block;height:100%;background:var(--green);border-radius:3px}
.prog span{font-size:10.5px;font-weight:700;color:var(--green);width:30px;text-align:right}
.hscroll{display:flex;gap:8px;overflow-x:auto;margin:0 -12px;padding:0 12px;scrollbar-width:none;scroll-snap-type:x proximity}
.hscroll>*{flex:none;width:236px;scroll-snap-align:start}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#eaeff3;border-radius:var(--radius);overflow:hidden}
.fld{background:#fff;padding:7px 10px;min-width:0;cursor:pointer;display:block}
.fld.wide{grid-column:1/-1}
.fl{display:block;font-size:10px;color:var(--muted);line-height:1.35}
.fv{display:block;font-size:12.5px;font-weight:550;color:var(--ink);line-height:1.4;overflow-wrap:anywhere}
.fv.box{border:1px solid #d5dfe6;border-radius:6px;padding:5px 8px;margin-top:3px;background:#fff;font-weight:500;display:flex;justify-content:space-between;gap:6px}
.fv.ro{background:#f5f7f8}.fv.ta{min-height:44px}
.fld small{display:block;font-size:9.5px;color:var(--muted);margin-top:2px}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;margin-top:2px}
.kv>div{min-width:0}
.st{display:inline-block;font-size:10.5px;font-weight:650;border-radius:5px;padding:1px 7px;background:var(--greenbg);color:var(--green)}
.st.o{background:var(--pale);color:#b55a20}.st.n{background:var(--paper);color:var(--muted)}.st.r{background:var(--redbg);color:var(--red)}
.btns{display:flex;flex-wrap:wrap;gap:6px}
.btn{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:9px;padding:8px 12px;font-size:12px;font-weight:650;text-align:center;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:5px;max-width:100%}
.btns .btn{flex:1 1 calc(50% - 3px);white-space:normal;line-height:1.3}
.btn.pri{background:var(--navy);border-color:var(--navy);color:#fff}
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;font-size:11.5px}
.tbl th{background:#e5edf2;color:var(--blue);font-size:10px;text-align:left;padding:6px 9px;font-weight:650}
.tbl td{padding:6px 9px;border-top:1px solid #eef2f5;vertical-align:top}
.tbl td:last-child{font-weight:650;color:var(--navy)}
.tl{background:#fff;border-radius:var(--radius);padding:10px 12px 4px}
.tl .it{display:flex;gap:9px;padding-bottom:8px;position:relative}
.tl .it::before{content:'';position:absolute;left:4.5px;top:12px;bottom:-2px;width:1.5px;background:#d6dfe6}
.tl .it:last-child::before{display:none}
.tl .dot{width:10px;height:10px;border-radius:50%;background:var(--green);flex:none;margin-top:4px;position:relative}
.tl .it:last-child .dot{background:var(--orange)}
.tl .tx{flex:1;min-width:0}
.tl .tx i{font-style:normal;font-size:10px;color:var(--muted);display:block}
.tl .tx b{font-size:12px;display:block;font-weight:650}
.tl .tx span{font-size:10.5px;color:var(--muted);display:block}
.viz{background:#fff;border-radius:var(--radius);padding:9px 11px}
.viz h4{margin:0;font-size:12px;color:var(--navy)}.viz small{font-size:9.5px;color:var(--muted)}
.viz svg{display:block;width:100%;height:auto}
.donut{display:flex;gap:14px;align-items:center}
.donut ul{list-style:none;margin:0;padding:0;font-size:11px;flex:1}
.donut li{display:flex;align-items:center;gap:6px;padding:2px 0}
.donut li i{width:8px;height:8px;border-radius:2px;flex:none}.donut li b{margin-left:auto}
.cal{background:#fff;border-radius:var(--radius);padding:8px 8px 6px}
.cal .ch{display:flex;justify-content:space-between;align-items:center;padding:0 4px 4px;font-size:13px;font-weight:750;color:var(--navy)}
.cal .cg{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11.5px}
.cal .cg span{font-size:9.5px;color:var(--muted);padding:2px 0}
.cal .cg div{height:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;position:relative;line-height:1.1}
.cal .cg div.t{background:var(--navy);color:#fff;font-weight:700}
.cal .cg div u{width:4px;height:4px;border-radius:50%;background:var(--green);margin-top:2px;text-decoration:none;display:block}
.cal .cg div.t u{background:var(--orange)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:#fff;border-radius:var(--radius);padding:6px 4px}
.tile{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;border-radius:9px;min-width:0;position:relative}
.tile:active{background:var(--paper)}
.tile .ti{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--bluebg);color:var(--blue)}
.tile .ti.o{background:var(--pale);color:var(--orange)}.tile .ti.g{background:var(--greenbg);color:var(--green)}.tile .ti.n{background:#e9edf1;color:var(--navy)}.tile .ti.p{background:#efeaf7;color:#6b55a0}
.tile span{font-size:10.5px;line-height:1.25;text-align:center;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
.tile em{position:absolute;top:2px;right:8px;font-style:normal;font-size:9px;font-weight:700;background:var(--orange);color:#fff;border-radius:8px;min-width:15px;height:15px;display:grid;place-items:center;padding:0 3px}
.tile em.x{background:#6b55a0}
.grp{background:#fff;border-radius:var(--radius);overflow:hidden}
.grp>summary,.grp>.gh{display:flex;align-items:center;gap:6px;padding:8px 11px;font-size:12.5px;font-weight:700;color:var(--navy);cursor:pointer;list-style:none}
.grp>summary::-webkit-details-marker{display:none}
.grp>summary::after{content:'';margin-left:auto;width:6px;height:6px;border-right:1.5px solid #9aa8b3;border-bottom:1.5px solid #9aa8b3;transform:rotate(45deg);transition:.15s}
.grp[open]>summary::after{transform:rotate(-135deg)}
.grp>summary em{font-style:normal;font-size:10px;font-weight:500;color:var(--muted)}
.grp .gb{padding:0 8px 8px;display:flex;flex-direction:column;gap:7px}
.grp .gb .fgrid,.grp .gb .list,.grp .gb .tiles{border:1px solid #eaeff3}
.grp .gb .grp{border:1px solid #eaeff3}
.rules{background:#fff;border-radius:var(--radius)}
.rules>summary{padding:8px 11px;font-size:11.5px;font-weight:650;color:var(--green);cursor:pointer;list-style:none;display:flex;gap:6px;align-items:center}
.rules>summary::-webkit-details-marker{display:none}
.rules>summary::after{content:'展開';margin-left:auto;font-size:10px;color:var(--muted);font-weight:500}
.rules[open]>summary::after{content:'收合'}
.rule{display:flex;gap:7px;padding:6px 11px;border-top:1px solid #eef2f5;font-size:11.5px;line-height:1.45;cursor:pointer}
.rule svg{color:var(--green);margin-top:2px}
.rule span{display:block;font-size:10px;color:var(--muted)}
.facade{background:#e3ebf0;border-radius:var(--radius);padding:8px 10px}
.facade b{font-size:11.5px;color:var(--navy)}.facade small{font-size:9px;color:var(--muted);display:block}
.facade .fg{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin:6px 0 4px}
.facade .fg i{height:13px;background:#b7c8d3;border-radius:2px}.facade .fg i.x{background:var(--orange)}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gal div{background:#fff;border-radius:9px;padding:5px;font-size:10px;line-height:1.3}
.gal div i{display:block;height:54px;border-radius:5px;background:repeating-linear-gradient(90deg,#b9c9d4 0 14px,#dbe6ed 14px 18px);margin-bottom:4px;position:relative}
.gal div small{display:block;color:var(--muted);font-size:9px}
.paper{background:#fff;border:1px solid #d7e0e7;border-top:5px solid var(--navy);padding:12px 14px;font-size:11.5px}
.paper h4{margin:0;font-size:14px;color:var(--navy)}.paper h5{margin:8px 0 4px;font-size:13px;color:var(--navy)}
.paper em{font-style:normal;font-size:9.5px;color:var(--orange);font-weight:650}
.paper dl{margin:8px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;border-top:1px solid var(--line);padding-top:8px}
.paper dt{color:var(--muted);font-size:10.5px}.paper dd{margin:0;font-weight:650}
.map{border-radius:var(--radius);overflow:hidden;background:#e8eef0}
.map svg{display:block;width:100%;height:auto}
.wx{display:flex;align-items:center;gap:9px;background:#fff;border-radius:10px;padding:7px 10px;cursor:pointer}
.wx .t{font-size:17px;font-weight:750;color:var(--navy)}
.wx .d{flex:1;min-width:0;font-size:11px;line-height:1.35}.wx .d span{display:block;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.todo{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.todo button{border:0;background:#fff;border-radius:10px;padding:7px 8px;text-align:left;min-width:0}
.todo b{font-size:17px;color:var(--navy);line-height:1.15;display:block}.todo b.o{color:var(--orange)}
.todo span{display:block;font-size:10.5px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.todo small{display:block;font-size:9px;color:var(--muted);line-height:1.3;height:23px;overflow:hidden}
.seg{display:flex;background:#e7edf1;border-radius:9px;padding:2px;gap:2px}
.seg button{flex:1;border:0;background:none;border-radius:7px;padding:5px 2px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.seg button.on{background:#fff;color:var(--navy);font-weight:700;box-shadow:0 1px 2px #0001}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.fin{background:#fff;border-radius:var(--radius);padding:8px 10px;cursor:pointer;min-width:0}
.fin span{font-size:10px;color:var(--muted);display:flex;justify-content:space-between}
.fin b{display:block;font-size:17px;color:var(--navy);line-height:1.3}
.fin small{font-size:9.5px;color:var(--muted);display:block}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;background:#fff;border-radius:var(--radius);padding:7px 6px}
.week div{text-align:center;border-radius:8px;padding:4px 0;font-size:10px;color:var(--muted);line-height:1.3}
.week div b{display:block;font-size:13px;color:var(--ink)}.week div i{font-style:normal;font-size:9px;color:var(--green);font-weight:700}
.week div.t{background:var(--navy);color:#b9cbd8}.week div.t b{color:#fff}.week div.t i{color:#ffb98a}
.foot{font-size:10px;color:var(--muted);line-height:1.6;padding:0 2px}
.foot span{cursor:pointer}.foot .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:4px}
.fab{position:absolute;right:14px;bottom:70px;width:46px;height:46px;border-radius:50%;border:0;background:var(--orange);color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px #e7773666;z-index:3}
.searchbar{display:flex;align-items:center;gap:8px;background:#fff;border-radius:10px;padding:8px 11px;color:var(--muted);font-size:12px;cursor:pointer}
.bigav{width:54px;height:54px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:700;margin:2px auto}
.sheetWrap{position:absolute;inset:0;background:#0b233d99;z-index:8;display:flex;align-items:flex-end}
.sheet{background:#fff;border-radius:20px 20px 0 0;width:100%;padding:8px 18px 16px;max-height:86%;overflow:auto}
.sheet::before{content:'';display:block;width:44px;height:4px;border-radius:2px;background:#cbd6de;margin:2px auto 10px}
.sheet .k{font-size:9.5px;font-weight:700;letter-spacing:1px;color:var(--orange)}
.sheet h4{margin:3px 0 2px;font-size:16px;color:var(--navy);line-height:1.4}.sheet h4.ok{color:var(--green)}
.sheet .ctx{font-size:11px;color:var(--muted)}
.sheet .f{font-size:10px;color:var(--muted);margin-top:10px;font-weight:650}
.sheet .v{background:#f3f6f8;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12.5px;margin-top:4px}
.sheet p{font-size:11.5px;color:var(--muted);margin:9px 0}
.sheet .sb{display:flex;gap:8px;margin-top:6px}
.sheet .sb .btn{padding:11px 12px}.sheet .sb .btn:last-child{flex:1}
.sheet .opts{display:flex;flex-direction:column;gap:6px;margin:8px 0}


.roleTag{flex:none;border:1px solid #f3d6c0;background:var(--pale);color:#a5501c;border-radius:13px;font-size:10.5px;font-weight:700;padding:3px 8px;white-space:nowrap}
.lock{display:inline-block;font-size:10.5px;font-weight:600;color:var(--muted);background:#eef1f4;border-radius:5px;padding:1px 7px}
.lock::before{content:'🔒 ';font-size:9px}
.nolook{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:11.5px;background:#eef1f4;border:1px dashed #cfd8df}
.noperm{margin:auto 0;text-align:center;padding:26px 18px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px;flex:1 0 auto!important;justify-content:center}
.noperm b{font-size:14.5px;color:var(--navy)}.noperm p{margin:0;font-size:11.5px;line-height:1.6}.noperm .btns{width:100%;margin-top:8px}
.task .h{display:flex;justify-content:space-between;align-items:center;gap:8px}.task .h b{font-size:14px;color:var(--navy)}
.task p{margin:2px 0 0;font-size:11px;color:var(--muted)}
.task .steps{display:flex;gap:4px;margin:8px 0;flex-wrap:wrap}
.task .steps span{font-size:10px;border-radius:5px;padding:2px 6px;background:var(--paper);color:var(--muted)}
.task .steps span.ok{background:var(--greenbg);color:var(--green);font-weight:650}
.todo.two{grid-template-columns:repeat(2,1fr)}

/* ---------- PWA 外殼 ---------- */
html,body{height:100%;margin:0;background:#0c2233;overflow:hidden;overscroll-behavior:none}
body{-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text}
#app,.login{position:fixed;top:0;bottom:0;left:0;right:0;margin:0 auto;width:100%;max-width:520px}
#app[hidden],.login[hidden]{display:none}
.appbar{height:calc(46px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
.nav{padding-bottom:env(safe-area-inset-bottom)}
button.avatar{border:0;padding:0;cursor:pointer}
.roleTag{cursor:pointer}
.fab{bottom:calc(70px + env(safe-area-inset-bottom))}
.list:empty{display:none}
.previewBar{flex:none;display:flex;align-items:center;gap:6px;background:var(--pale);color:#a5501c;font-size:11.5px;font-weight:650;padding:5px 12px;border-bottom:1px solid #f3d6c0}
.previewBar span{flex:1}
.previewBar button{border:1px solid #e9b995;background:#fff;color:#a5501c;border-radius:12px;font-size:11px;padding:2px 10px}
.offlineBar{flex:none;background:#3a4753;color:#fff;font-size:11px;text-align:center;padding:3px 10px}
.login{background:var(--paper);display:flex;flex-direction:column;overflow-y:auto;z-index:30}
.lg-top{flex:none;background:var(--navy);color:#fff;padding:calc(30px + env(safe-area-inset-top)) 24px 24px;border-bottom:4px solid var(--orange)}
.lg-mark{width:54px;height:54px;border-radius:15px;background:var(--orange);color:var(--navy);display:grid;place-items:center;font:900 26px/1 system-ui,sans-serif;letter-spacing:-2px}
.lg-top h1{margin:14px 0 2px;font-size:24px;letter-spacing:1px}
.lg-top p{margin:0;font-size:12.5px;color:#b9cbd8}
.lg-body{flex:1;padding:16px 14px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.lg-body h2{margin:2px 2px 0;font-size:14px;color:var(--navy)}
.lg-body .row{min-height:58px}
.lg-note{margin:0 2px;font-size:11px;line-height:1.65;color:var(--muted)}
.lg-ver{margin:auto 2px 0;font-size:10px;color:#98a5b0;text-align:center;padding-top:10px}
.acct{display:flex;align-items:center;gap:10px}
.acct .avatar{margin:0;width:40px;height:40px;font-size:17px}
.acct b{display:block;font-size:16px;color:var(--navy)}.acct span{font-size:11.5px;color:var(--muted)}
.updateBar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(74px + env(safe-area-inset-bottom));z-index:50;display:flex;align-items:center;gap:10px;background:#14212cf5;color:#fff;font-size:12.5px;padding:8px 8px 8px 14px;border-radius:22px;box-shadow:0 8px 24px #0005;white-space:nowrap}
.updateBar[hidden]{display:none}
.updateBar button{border:0;background:var(--orange);color:#fff;border-radius:16px;font-size:12px;font-weight:700;padding:6px 12px}
.toast{bottom:calc(76px + env(safe-area-inset-bottom))}
@media (min-width:560px){#app,.login{box-shadow:0 0 0 1px #0004,0 20px 60px #0008}}

/* ---------- 正式版：登入表單與「預覽畫面」標示 ---------- */
.lg-form{display:grid;gap:12px;margin:4px 0 14px}
.lg-form label{display:grid;gap:5px;font-size:12px;font-weight:700;color:var(--muted)}
.lg-form input{height:46px;border:1px solid #cfd8df;border-radius:12px;padding:0 13px;font:inherit;font-size:16px;background:#fff;color:inherit;width:100%;box-sizing:border-box}
.lg-form input:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.lg-form .btn{height:46px;font-size:15px;justify-content:center}
.lg-form .xerr{min-height:16px;margin:0}
.pvnote{display:flex;align-items:center;gap:6px;margin:0 0 10px;padding:7px 10px;border-radius:10px;background:#fff7e6;border:1px solid #f3d9a4;color:#8a5a00;font-size:11px;font-weight:700;line-height:1.4}
.pvnote svg{flex:none}

/* ---------- 擴充模組 ---------- */
.searchbar input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:16px;color:var(--ink);padding:0}
.btn.sm{padding:5px 10px;font-size:11.5px;border-radius:8px;flex:none}
.btn[disabled]{cursor:default}
.xempty{color:var(--muted);font-size:12px;text-align:center;padding:18px 12px}
.xf{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
.fi{grid-column:1/-1;display:block;min-width:0}.fi.half{grid-column:auto}
.fi>span{display:block;font-size:10.5px;color:var(--muted);font-weight:650;margin-bottom:3px}
.fi>span i{color:var(--red);font-style:normal}
.fi input,.fi select,.fi textarea{width:100%;border:1px solid #cfd9e0;border-radius:9px;padding:9px 10px;font-size:16px;background:#fff;color:var(--ink);font-family:inherit}
.fi textarea{min-height:72px;resize:vertical;line-height:1.5}
.fi.fchk{display:flex;align-items:center;gap:9px}.fi.fchk input{width:20px;height:20px;flex:none;padding:0}.fi.fchk span{margin:0;font-size:12.5px;color:var(--ink);font-weight:500;line-height:1.45}
.fstatic{border:1px solid #e3e9ee;border-radius:9px;padding:10px;font-size:14px;background:#f5f7f8;color:var(--muted)}
.fnote{grid-column:1/-1;margin:-4px 0 0;font-size:10.5px;color:var(--muted);line-height:1.5}
.fimg{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.fimg img{width:72px;height:54px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.xerr{color:var(--red);font-size:12px;font-weight:650;margin:8px 0 0;min-height:0}
.xerr:empty{display:none}
.kv2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.kv2 div{background:#f3f6f8;border-radius:9px;padding:7px 10px}.kv2 span{display:block;font-size:10px;color:var(--muted)}.kv2 b{font-size:13.5px;color:var(--navy)}
.sheet .btns .btn{flex:1 1 auto}
.kcard{background:#fff;border-radius:var(--radius);overflow:hidden}
.kcard>summary{list-style:none;cursor:pointer}.kcard>summary::-webkit-details-marker{display:none}
.khead{background:var(--navy);color:#fff;padding:10px 12px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.khead b{display:block;font-size:14px}.khead span{display:block;font-size:10.5px;color:#b9cbd8;margin-top:1px}
.kcnt{text-align:right;flex:none}.kcnt b{font-size:15px;color:#ffb98a}
.klist{padding:2px 0}
.kit{display:flex;align-items:center;gap:9px;padding:7px 10px;min-height:48px}
.kit+.kit{border-top:1px solid #eef2f5}
.kit[hidden]{display:none}
.kchk{width:24px;height:24px;border-radius:7px;border:1.8px solid #9fb0bd;background:#fff;flex:none;display:grid;place-items:center;color:#fff;padding:0}
.kit.on .kchk{background:var(--green);border-color:var(--green)}
.kit.on .tx b{color:var(--muted);text-decoration:line-through;text-decoration-color:#b8c4cd}
.kthumb{width:36px;height:36px;border-radius:8px;background:#eef2f5;color:#8a99a6;display:grid;place-items:center;flex:none;overflow:hidden}
.kthumb img{width:100%;height:100%;object-fit:cover}
.kit .tx{flex:1;min-width:0}.kit .tx b{display:block;font-size:13px;font-weight:600}.kit .tx b em{font-style:normal;font-weight:500;color:var(--muted);font-size:11.5px}
.kit .tx span{display:block;font-size:10.5px;color:var(--muted)}
.mini{border:0;background:none;color:#8a99a6;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none;padding:0}
.kmeta{font-size:10.5px;color:var(--muted);padding:6px 12px}
.kremoved{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 10px;font-size:10.5px;color:var(--muted);border-top:1px dashed var(--line)}
.vthumb{width:44px;height:32px;border-radius:7px;background:var(--navy);color:#fff;display:grid;place-items:center;flex:none}
.vprog{display:flex;justify-content:space-between;align-items:center;gap:10px}
.vprog b{display:block;font-size:13.5px;color:var(--navy)}.vprog span{font-size:10.5px;color:var(--muted)}
.vplayer{width:100%;border-radius:10px;margin-top:10px;background:#000;max-height:240px}
.vopen{display:flex;margin-top:10px;text-decoration:none;padding:11px}
.row[hidden]{display:none}
.row .tx span+span{margin-top:1px}
.lrow .btn,.row>.btn{margin-left:4px}
.rtags{display:flex;flex-direction:column;gap:3px;align-items:flex-end;flex:none}
.row .tr.r{color:var(--red);background:var(--redbg)}
.st.g{background:var(--greenbg);color:var(--green)}.st.b{background:var(--bluebg);color:var(--blue)}
.kpi[data-x]{cursor:pointer}
.tbl.perm th,.tbl.perm td{padding:6px 4px;text-align:center}
.tbl.perm th:first-child,.tbl.perm td:first-child{text-align:left;padding-left:9px;font-weight:500;color:var(--ink)}
.tbl.perm .yes{color:var(--green)}.tbl.perm .no{color:#c2ccd4;font-style:normal;font-weight:400}
.shead,.mhead{display:flex;align-items:center;gap:10px}
.shead>div,.mhead>div{flex:1;min-width:0}.shead b,.mhead b{display:block;font-size:16px;color:var(--navy)}.shead div span,.mhead div span{font-size:11px;color:var(--muted)}
.idslot{border:1.5px dashed #c3ced7;background:#fff;border-radius:var(--radius);height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);font-size:11.5px;overflow:hidden;padding:0}
.idslot img{width:100%;height:100%;object-fit:cover}
.cert .ch{display:flex;justify-content:space-between;align-items:center;gap:8px}.cert .ch b{font-size:13.5px;color:var(--navy)}
.cert p{margin:2px 0 0;font-size:11px;color:var(--muted)}
.cimg{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.cimg img{width:84px;height:60px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.cimg>span:first-child{font-size:11px;color:var(--muted)}
.cbtn{display:flex;gap:5px;margin-left:auto}
.pay span{font-size:10.5px;color:var(--muted)}.pay b{display:block;font-size:18px;color:var(--navy);margin:2px 0}.pay small{font-size:11px;color:var(--muted)}
.mcal{background:#fff;border-radius:var(--radius);padding:8px}
.mh{display:grid;grid-template-columns:repeat(7,1fr);background:var(--navy);border-radius:7px;color:#fff;font-size:10.5px;text-align:center;padding:4px 0}
.mh span:first-child{color:#ff9d8f}
.mg{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:4px}
.mg div{min-height:42px;border-radius:7px;background:#f4f6f8;padding:3px 2px 2px;text-align:center;border-top:3px solid transparent;position:relative}
.mg div b{display:block;font-size:12px;line-height:1.2;color:var(--ink)}
.mg div i{display:block;font-style:normal;font-size:8.5px;color:var(--muted);height:11px;line-height:11px;overflow:hidden}
.mg div u{display:flex;justify-content:center;gap:2px;height:6px;text-decoration:none}
.mg div.s{border-top-color:#2f5fc4;background:#eef3fb}
.mg div.l{border-top-color:var(--red);background:var(--redbg)}.mg div.l i{color:var(--red);font-weight:650}
.mg div.t{outline:2px solid var(--orange);outline-offset:-1px}.mg div.t b{color:var(--orange);font-weight:800}
.mcal em{display:inline-block;width:6px;height:6px;border-radius:50%}.mcal em.g{background:#2fae62}.mcal em.o{background:#f0a030}
.mleg{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:10.5px;color:var(--muted);padding:8px 2px 2px;align-items:center}
.mleg span{display:flex;align-items:center;gap:4px}
.mleg i{display:inline-block;width:10px;height:10px;border-radius:2px}.mleg i.b{background:#2f5fc4}.mleg i.r{background:var(--red)}.mleg i.td{border:2px solid var(--orange);border-radius:50%;width:11px;height:11px}
.rings{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rcard{background:#fff;border-radius:var(--radius);padding:10px 8px 9px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.rcard>span{font-size:12.5px;font-weight:650;color:var(--ink)}.rcard small{font-size:10px;color:var(--muted);min-height:13px}
.salary .stop{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.salary .stop span{font-size:10.5px;color:var(--muted)}.salary .stop b{display:block;font-size:22px;color:var(--navy);line-height:1.3}.salary .stop small{font-size:10.5px;color:var(--muted)}
.sbar{padding:6px 0;border-top:1px solid #eef2f5}
.sbar>div:first-child{display:flex;justify-content:space-between;font-size:12px}.sbar b{color:var(--navy)}
.bar2{height:7px;background:#edf1f4;border-radius:4px;overflow:hidden;margin:4px 0 2px}.bar2 i{display:block;height:100%;border-radius:4px}
.sbar small{font-size:10px;color:var(--muted)}
.rtoday{display:flex;flex-direction:column;gap:9px;border-left:3px solid var(--orange)}
.rtoday b{display:block;font-size:14px;color:var(--navy)}.rtoday span{font-size:11.5px;color:var(--muted)}
.seg.prog button.on.g{background:var(--green);color:#fff}.seg.prog button.on.b{background:var(--blue);color:#fff}.seg.prog button.on.o{background:var(--orange);color:#fff}
.seg.prog button{padding:9px 2px;font-size:13px}
.phcard{padding:10px}
.pht{display:flex;justify-content:space-between;align-items:baseline}.pht b{font-size:13px;color:var(--navy)}.pht span{font-size:10.5px;color:var(--muted)}
.pht.sub{margin-top:8px}.pht.sub b{font-size:11.5px}
.phgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.ph{aspect-ratio:1;border-radius:8px;overflow:hidden;position:relative;background:#dfe7ec;cursor:pointer}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.seed i,.bigph.seed i{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#c3d1da 0 10px,#d9e3e9 10px 20px)}
.ph.seed em{position:absolute;left:4px;bottom:3px;font-style:normal;font-size:9px;color:#5d6e7b;background:#ffffffc0;border-radius:3px;padding:0 4px}
.phx{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:0;background:#14212cd0;color:#fff;display:grid;place-items:center;padding:0}
.phadd{aspect-ratio:1;border-radius:8px;border:1.5px dashed #b9c6d0;background:#fff;color:var(--blue);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:9.5px;padding:0}
.phnone{grid-column:1/-1;font-size:11px;color:var(--muted)}
.phpath{display:flex;gap:5px;align-items:flex-start;font-size:9.5px;color:var(--muted);margin-top:7px;line-height:1.45;word-break:break-all}
.phpath svg{flex:none;margin-top:1px}
.phcard>.more{display:block;margin-top:6px;font-size:10.5px;color:#8a99a6}
.bigph{display:block;width:100%;max-height:52vh;object-fit:contain;border-radius:10px;margin-top:10px;background:#111}
.bigph.seed{height:200px;position:relative;overflow:hidden;background:#dfe7ec}.bigph.seed em{position:absolute;left:10px;bottom:8px;font-style:normal;font-size:11px;color:#4d5e6b;background:#ffffffd0;border-radius:4px;padding:2px 7px}
.rhead .h{display:flex;justify-content:space-between;align-items:center}.rhead .h b{font-size:15px;color:var(--navy)}
.rhead p{margin:2px 0 0;font-size:11px;color:var(--muted)}
.rprog{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:11px;color:var(--muted)}
.nav button{min-width:0;white-space:nowrap}

/* ---------- 打卡卡片 ---------- */
.clk{display:flex;align-items:center;gap:10px;justify-content:space-between}
.clk>div{min-width:0}.clk b{display:block;font-size:15px;color:var(--navy)}.clk>div span{font-size:11px;color:var(--muted);line-height:1.5}
.clk .btn{flex:none;height:46px;padding:0 16px;font-size:14px}.clk.on{box-shadow:inset 0 0 0 1.5px var(--orange)}