*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;background:#eef2f7;color:#1f2d3d}
a{color:#22568f;text-decoration:none}
/* ---------- 頂部列 ---------- */
header.top{background:#16263d;color:#fff;padding:0 24px;height:60px;display:flex;align-items:center;gap:16px;flex-shrink:0}
header.top .logo{font-size:17px;font-weight:800;letter-spacing:1px}
header.top .tag{background:#22568f;font-size:12px;padding:4px 11px;border-radius:12px;white-space:nowrap}
header.top .tag.county{background:#3f7d20}
header.top .spacer{flex:1}
header.top .who{font-size:13px;opacity:.9;text-align:right;line-height:1.5}
header.top .who b{display:block;opacity:1}
header.top .out{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;font-size:12.5px;padding:6px 14px;border-radius:7px;cursor:pointer}
header.top .out:hover{background:rgba(255,255,255,.12)}
.savebar{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#c8dcf0}
.dot{width:8px;height:8px;border-radius:50%;background:#7cb342;display:inline-block}
.tabs{background:#1e3a5f;padding:0 24px;display:flex;gap:2px;position:sticky;top:0;z-index:40;box-shadow:0 2px 8px rgba(0,0,0,.12);overflow-x:auto}
.tabs a{padding:13px 20px;color:#b9cde4;font-size:14px;cursor:pointer;border-bottom:3px solid transparent;transition:all .15s;white-space:nowrap}
.tabs a:hover{color:#fff;background:rgba(255,255,255,.06)}
.tabs a.active{color:#fff;border-bottom-color:#7cb342;font-weight:700;background:rgba(255,255,255,.08)}
.wrap{padding:20px 24px 60px;max-width:1680px;margin:0 auto}
/* ---------- 卡片 ---------- */
.card{background:#fff;border:1px solid #d8e0ea;border-radius:12px;box-shadow:0 1px 4px rgba(22,38,61,.05);margin-bottom:16px}
.card-h{padding:15px 20px;border-bottom:1px solid #eef2f7;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.card-h h3{font-size:16px;color:#16263d;letter-spacing:.5px}
.card-h .sub{font-size:12.5px;color:#7a8b9e}
.card-h .spacer{flex:1}
.card-b{padding:18px 20px}
/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid #d8e0ea;border-radius:12px;padding:16px 18px}
.kpi .lb{font-size:12.5px;color:#7a8b9e;margin-bottom:8px}
.kpi .v{font-size:30px;font-weight:800;color:#1e3a5f;line-height:1}
.kpi .v small{font-size:14px;color:#8496a9;font-weight:500;margin-left:3px}
.kpi .d{font-size:12px;margin-top:7px;color:#8496a9}
.kpi .d.up{color:#3f7d20}
.kpi .d.warn{color:#c0392b}
.kpi.hl{background:linear-gradient(135deg,#22568f,#1e3a5f);border:none}
.kpi.hl .lb,.kpi.hl .d{color:#b9cde4}
.kpi.hl .v{color:#fff}
/* ---------- 矩陣 ---------- */
table.grid{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
table.grid th,table.grid td{padding:0;text-align:center}
table.grid thead th{padding:9px 6px;background:#f2f6fb;color:#22568f;font-size:12.5px;font-weight:700;border-bottom:2px solid #dde5ee}
table.grid thead th:first-child{text-align:left;padding-left:14px}
table.grid td.cty{text-align:left;padding:0 14px;font-weight:600;color:#16263d;font-size:13.5px;border-bottom:1px solid #f0f4f8;white-space:nowrap}
table.grid td.cell{border-bottom:1px solid #f0f4f8;padding:5px 4px}
table.grid tr:hover td{background:#f8fafd}
.b{display:block;height:26px;line-height:26px;border-radius:5px;font-size:11.5px;font-weight:700;cursor:pointer;transition:transform .12s;border:none;width:100%;font-family:inherit}
.b:hover{transform:scale(1.07)}
.b.f{background:#3f7d20;color:#fff}
.b.p{background:#f0c14b;color:#5c4708}
.b.l{background:#e8734a;color:#fff}
.b.n{background:#e6ecf3;color:#a8b6c5}
td.tot{border-bottom:1px solid #f0f4f8;font-weight:800;color:#22568f;font-size:13.5px;width:56px}
.lg{display:flex;gap:16px;font-size:12.5px;color:#5a6b80;align-items:center;flex-wrap:wrap}
.lg i{display:inline-block;width:15px;height:15px;border-radius:4px;margin-right:5px;vertical-align:-3px}
/* ---------- 條圖 ---------- */
.bars{display:flex;flex-direction:column;gap:11px}
.brow{display:flex;align-items:center;gap:12px;font-size:13px}
.brow .nm{width:180px;color:#31435a;font-weight:600;flex-shrink:0}
.brow .nm small{display:block;font-weight:400;color:#8496a9;font-size:11.5px;margin-top:2px}
.brow .tr{flex:1;height:24px;background:#f0f4f8;border-radius:5px;overflow:hidden;position:relative}
.brow .fl{height:100%;border-radius:5px;transition:width .6s;display:flex;align-items:center;padding-left:9px;color:#fff;font-size:11.5px;font-weight:700}
.brow .vv{width:92px;text-align:right;color:#22568f;font-weight:700;flex-shrink:0}
/* ---------- 一般表格 ---------- */
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th,table.t td{border:1px solid #dde5ee;padding:10px 12px;text-align:left;vertical-align:top}
table.t th{background:#f2f6fb;color:#22568f;font-weight:700;font-size:12.5px;white-space:nowrap}
table.t td.c{font-weight:700;color:#16263d;white-space:nowrap}
table.t tr:hover td{background:#fafcfe}
table.t.cmp{min-width:2400px}
table.t.cmp th:not(:first-child),table.t.cmp td:not(:first-child){min-width:105px}
.diff{background:#fdf3e0 !important;box-shadow:inset 3px 0 0 #e8a33d;font-weight:600;color:#8a5a00}
.tagx{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;background:#e8f2e2;color:#3f7d20;margin:1px 2px 1px 0}
.tagx.o{background:#fdf1e0;color:#b8730f}
.tagx.g{background:#eaf2fb;color:#22568f}
.tagx.r{background:#fbe4de;color:#c0392b}
/* ---------- 縣市清單 ---------- */
.clist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.c-item{border:1px solid #d8e0ea;border-radius:10px;padding:14px 16px;background:#fff;cursor:pointer;transition:all .15s;text-align:left;font-family:inherit;width:100%}
.c-item:hover{border-color:#22568f;box-shadow:0 2px 8px rgba(34,86,143,.12)}
.c-item .top{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.c-item .nm{font-size:15px;font-weight:700;color:#16263d;flex:1;white-space:nowrap}
.st{font-size:11.5px;padding:3px 10px;border-radius:11px;font-weight:600;white-space:nowrap;flex-shrink:0}
.st.a{background:#e8f2e2;color:#3f7d20}
.st.b{background:#fdf1e0;color:#b8730f}
.st.c{background:#fbe4de;color:#c0392b}
.st.d{background:#eef2f7;color:#8496a9}
.c-item .mini{height:6px;background:#eef2f7;border-radius:3px;overflow:hidden;margin-bottom:9px}
.c-item .mini>div{height:100%;background:linear-gradient(90deg,#3f7d20,#7cb342)}
.c-item .meta{display:flex;gap:14px;font-size:12px;color:#7a8b9e}
.c-item .meta b{color:#31435a}
/* ---------- 篩選列 ---------- */
.filt{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.filt select,.filt input{padding:8px 11px;border:1px solid #ccd6e0;border-radius:7px;font-size:13px;font-family:inherit;background:#fff}
.filt .lbl{font-size:13px;color:#5a6b80;font-weight:600}
/* ---------- 按鈕 ---------- */
button{font-family:inherit;font-size:13.5px;padding:9px 18px;border-radius:7px;border:none;cursor:pointer;font-weight:600;transition:all .15s}
button:disabled{opacity:.5;cursor:not-allowed}
.btn-p{background:#22568f;color:#fff}.btn-p:hover:not(:disabled){background:#1a4373}
.btn-s{background:#fff;color:#22568f;border:1.5px solid #22568f}.btn-s:hover:not(:disabled){background:#eaf2fb}
.btn-g{background:#3f7d20;color:#fff}.btn-g:hover:not(:disabled){background:#356a1b}
.btn-d{background:#fff;color:#c0392b;border:1.5px solid #e2b5ad}.btn-d:hover:not(:disabled){background:#fdf0ee}
.btn-sm{font-size:12.5px;padding:6px 13px}
/* ---------- 產出 ---------- */
.outs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.out{border:1px solid #d8e0ea;border-radius:10px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
.out .ic{width:42px;height:42px;border-radius:10px;background:#eaf2fb;color:#22568f;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;flex-shrink:0}
.out .bd{flex:1}
.out h4{font-size:14.5px;color:#16263d;margin-bottom:5px}
.out p{font-size:12.5px;color:#7a8b9e;line-height:1.6;margin-bottom:9px}
.out .rd{font-size:11.5px;color:#3f7d20;font-weight:600}
.out .rd.no{color:#b8730f}
/* ---------- 填報版面 ---------- */
.layout{display:flex;align-items:flex-start;gap:18px;padding:18px 24px 60px;max-width:1560px;margin:0 auto}
aside{width:280px;position:sticky;top:80px;flex-shrink:0}
main.fill{flex:1;min-width:0}
.prog{padding:16px 18px;margin-bottom:14px}
.prog h3{font-size:13px;color:#5a6b80;font-weight:600;letter-spacing:1px;margin-bottom:10px}
.prog .num{font-size:34px;font-weight:800;color:#1e3a5f;line-height:1}
.prog .num span{font-size:15px;color:#7a8b9e;font-weight:500}
.bar{height:9px;background:#e6ecf3;border-radius:5px;overflow:hidden;margin-top:11px}
.bar>div{height:100%;background:linear-gradient(90deg,#3f7d20,#7cb342);width:0;transition:width .45s}
.prog .hint{font-size:12px;color:#7a8b9e;margin-top:9px;line-height:1.6}
nav.secnav{overflow:hidden}
nav.secnav .nav-h{padding:13px 18px;border-bottom:1px solid #e6ecf3;font-size:13px;font-weight:700;color:#16263d;letter-spacing:1px}
nav.secnav a{display:flex;align-items:center;gap:11px;padding:13px 18px;border-bottom:1px solid #f0f4f8;cursor:pointer;color:#31435a;transition:background .15s}
nav.secnav a:last-child{border-bottom:none}
nav.secnav a:hover{background:#f5f9fd}
nav.secnav a.on{background:#eaf2fb;border-left:4px solid #22568f;padding-left:14px}
nav.secnav a .k{width:26px;height:26px;border-radius:7px;background:#dde6f0;color:#22568f;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
nav.secnav a.on .k{background:#22568f;color:#fff}
nav.secnav a.done .k{background:#3f7d20;color:#fff}
nav.secnav a .t{flex:1;font-size:14px;font-weight:600;line-height:1.4}
nav.secnav a .t small{display:block;font-size:11.5px;color:#8496a9;font-weight:400;margin-top:2px}
nav.secnav a .pct{font-size:12px;color:#7a8b9e;font-weight:600}
section.sec{padding:22px 26px 26px;margin-bottom:16px}
.sec-h{display:flex;align-items:flex-start;gap:14px;padding-bottom:14px;border-bottom:2px solid #eef2f7;margin-bottom:20px}
.sec-h .k{width:38px;height:38px;border-radius:10px;background:#22568f;color:#fff;font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sec-h h2{font-size:19px;color:#16263d;letter-spacing:.5px}
.sec-h p{font-size:13px;color:#6b7c91;margin-top:5px;line-height:1.6}
.grp{margin-bottom:22px}
.grp>h4{font-size:14.5px;color:#22568f;font-weight:700;margin-bottom:12px;padding-left:10px;border-left:4px solid #22568f}
.row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:13px}
.f{flex:1;min-width:190px}
.f.w2{flex:2;min-width:300px}
.f.w3{flex:3;min-width:300px}
.f label{display:block;font-size:13px;color:#43566e;font-weight:600;margin-bottom:6px}
.f label .req{color:#c0392b;margin-left:3px}
.f input[type=text],.f input[type=password],.f input[type=number],.f input[type=date],.f select,.f textarea{
width:100%;padding:9px 11px;border:1px solid #ccd6e0;border-radius:7px;font-size:13.5px;
font-family:inherit;background:#fff;color:#1f2d3d;transition:border-color .15s,box-shadow .15s}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:#22568f;box-shadow:0 0 0 3px rgba(34,86,143,.12)}
.f textarea{resize:vertical;min-height:72px;line-height:1.6}
.f .note{font-size:11.5px;color:#8496a9;margin-top:5px;line-height:1.5}
/* ---------- 受控詞彙 chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 14px;border:1.5px solid #ccd6e0;border-radius:18px;font-size:13px;cursor:pointer;
background:#fff;color:#43566e;user-select:none;transition:all .15s;display:flex;align-items:center;gap:6px;font-family:inherit;font-weight:400}
.chip:hover{border-color:#22568f;color:#22568f}
.chip.on{background:#22568f;border-color:#22568f;color:#fff;font-weight:600}
.chip.on::before{content:"✓";font-size:12px}
.chip.seq.on::before{content:attr(data-seq)}
.vocab-tip{font-size:11.5px;color:#96733a;background:#fdfaf0;border-left:3px solid #d4a017;padding:7px 11px;border-radius:5px;margin-top:9px;line-height:1.6}
.mini-chips{display:flex;flex-wrap:wrap;gap:5px}
.mini-chip{font-size:11.5px;padding:4px 9px;border:1px solid #ccd6e0;border-radius:12px;cursor:pointer;background:#fff;color:#5a6b80;user-select:none;font-family:inherit;font-weight:400}
.mini-chip.on{background:#3f7d20;border-color:#3f7d20;color:#fff}
/* ---------- 補助項目卡 ---------- */
.items{display:flex;flex-direction:column;gap:12px}
.item{border:1px solid #d8e0ea;border-radius:10px;overflow:hidden;background:#fff}
.item-h{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;background:#f8fafd}
.item-h:hover{background:#f2f7fc}
.item-h .nm{flex:1;font-size:14.5px;font-weight:700;color:#16263d}
.item-h .nm small{display:block;font-size:12px;color:#7a8b9e;font-weight:400;margin-top:3px}
.item-h .badge{font-size:11.5px;padding:3px 9px;border-radius:10px;background:#e8f2e2;color:#3f7d20;font-weight:600}
.item-h .badge.warn{background:#fdf1e0;color:#b8730f}
.item-h .arw{color:#8496a9;font-size:13px;transition:transform .2s}
.item.open .arw{transform:rotate(90deg)}
.item-b{padding:18px 16px;border-top:1px solid #e6ecf3}
/* ---------- 介接矩陣 ---------- */
table.mx{width:100%;border-collapse:collapse;font-size:13px}
table.mx th,table.mx td{border:1px solid #dde5ee;padding:9px 11px;text-align:left;vertical-align:top}
table.mx th{background:#f2f6fb;color:#22568f;font-weight:700;font-size:12.5px}
table.mx td select,table.mx td input{width:100%;padding:6px 8px;border:1px solid #ccd6e0;border-radius:5px;font-size:12.5px;font-family:inherit}
table.mx .src{font-weight:700;color:#16263d}
table.mx .src small{display:block;font-weight:400;color:#8496a9;font-size:11.5px;margin-top:3px}
/* ---------- 上傳 ---------- */
.up{border:2px dashed #ccd6e0;border-radius:10px;padding:24px;text-align:center;color:#7a8b9e;transition:all .15s;background:#fafcfe}
.up:hover{border-color:#22568f;color:#22568f;background:#f5f9fd}
.up b{display:block;font-size:14px;color:#43566e;margin-bottom:5px}
.up input[type=file]{margin-top:12px;font-family:inherit;font-size:12.5px}
.files{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.file{display:flex;align-items:center;gap:10px;padding:9px 13px;background:#f5f9fd;border:1px solid #dde5ee;border-radius:7px;font-size:13px}
.file .ic{color:#22568f;font-weight:700}
.file .nm{flex:1;color:#31435a}
.file .sz{font-size:11.5px;color:#8496a9}
.file .del{color:#c0392b;cursor:pointer;font-size:12px;background:none;border:none;padding:0;font-weight:400}
/* ---------- 疑義 ---------- */
.query{background:#fdf6e3;border:1px solid #e8d9a8;border-left:4px solid #d4a017;border-radius:8px;padding:13px 16px;margin-bottom:16px}
.query .qh{font-size:13px;font-weight:700;color:#8a6100;margin-bottom:6px}
.query p{font-size:13px;color:#6b5518;line-height:1.65}
.query .from{font-size:11.5px;color:#96844a;margin-top:7px}
.query .reply{background:#fff;border:1px solid #e8d9a8;border-radius:6px;padding:10px 12px;margin-top:10px;font-size:13px;color:#43566e;line-height:1.65}
.query textarea{width:100%;min-height:70px;padding:9px 11px;border:1px solid #ccd6e0;border-radius:7px;font-family:inherit;font-size:13px;margin-top:10px}
.returned{background:#fbe4de;border:1px solid #e9bdb3;border-left:4px solid #c0392b;border-radius:8px;padding:13px 16px;margin-bottom:16px;font-size:13px;color:#8d2c1c;line-height:1.65}
/* ---------- 底部操作 ---------- */
.actions{display:flex;align-items:center;gap:12px;padding:16px 26px;background:#fff;border:1px solid #d8e0ea;border-radius:12px;position:sticky;bottom:14px;box-shadow:0 -2px 12px rgba(22,38,61,.08);flex-wrap:wrap}
.actions .msg{flex:1;font-size:12.5px;color:#7a8b9e;min-width:200px}
/* ---------- 提示與對話框 ---------- */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);background:#16263d;color:#fff;
padding:13px 26px;border-radius:24px;font-size:14px;opacity:0;transition:all .3s;z-index:100;box-shadow:0 4px 16px rgba(0,0,0,.25);pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.mask{position:fixed;inset:0;background:rgba(22,38,61,.5);display:flex;align-items:center;justify-content:center;z-index:90;padding:24px}
.modal{background:#fff;border-radius:14px;width:100%;max-width:620px;max-height:88vh;overflow:auto}
.modal.sm{max-width:560px}
.modal-h{padding:18px 24px;border-bottom:1px solid #e6ecf3;display:flex;align-items:center}
.modal-h h3{font-size:17px;color:#16263d;flex:1}
.modal-h .x{cursor:pointer;color:#8496a9;font-size:20px;background:none;border:none;padding:0}
.modal-b{padding:22px 24px;font-size:13.5px;color:#43566e;line-height:1.75}
.modal-b textarea{width:100%;min-height:90px;padding:10px;border:1px solid #ccd6e0;border-radius:7px;font-family:inherit;font-size:13px;margin-top:10px}
.modal-f{padding:16px 24px;border-top:1px solid #e6ecf3;display:flex;gap:10px;justify-content:flex-end}
/* ---------- 登入 ---------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* 圖示一律線條風格，填色由 fill="currentColor" 的個別節點自行覆寫 */
.login svg use,.login .pts .ic svg,.login .box .ic,.login .eye svg,.login .notes svg,.login .go svg{
fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px;position:relative;
background:#0a2240;overflow:hidden}
/* 背景沿用面板同一張現地照片，大幅模糊壓暗後僅作氛圍；放大避免模糊後邊緣露出底色 */
.login-wrap::before{content:"";position:absolute;inset:-4%;background:url("img/login-photo.jpg") center/cover no-repeat;
filter:blur(26px) brightness(.82) saturate(.95)}
.login-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(8,30,56,.6),rgba(14,52,95,.4))}
.login{position:relative;z-index:1;background:#fff;border-radius:18px;width:100%;max-width:1080px;display:flex;
overflow:hidden;box-shadow:0 26px 64px rgba(4,18,36,.45)}
/* 左側品牌面板 */
.login .side{position:relative;flex:0 0 57%;padding:34px 46px 30px;color:#fff;overflow:hidden;
background:linear-gradient(168deg,#10396f 0%,#0a2b51 46%,#061f3b 100%)}
.login .side .pic{position:absolute;inset:0 0 0 46%;background:url("img/login-photo.jpg") center/cover no-repeat;
-webkit-mask-image:linear-gradient(to right,transparent,#000 14%);
mask-image:linear-gradient(to right,transparent,#000 14%);opacity:.95}
/* 文字一律收在左半深藍區，不得延伸到右側照片上 */
.login .side .inner{position:relative;max-width:252px}
.login .mark{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.login .mark .logo{width:38px;height:27px;flex-shrink:0}
.login .mark .en{font-size:13px;letter-spacing:5px;font-weight:700;color:#eaf3fc}
.login .side h1{font-size:26px;line-height:1.38;letter-spacing:1.5px;font-weight:800}
.login .side .rule{width:48px;height:3px;border-radius:2px;background:#6fb3e8;margin:14px 0 12px}
.login .side p{font-size:12.5px;color:#c6dcf2;line-height:1.85}
.login .pts{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px}
.login .pts li{display:flex;align-items:center;gap:12px;font-size:13.5px;color:#eaf3fc;letter-spacing:.5px}
.login .pts .ic{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1);flex-shrink:0;
display:flex;align-items:center;justify-content:center}
.login .pts .ic svg{width:16px;height:16px;color:#fff}
/* 台灣島與手寫標語須落在深藍區內，寬度不可延伸到右側照片上，否則難以辨讀 */
.login .map{position:absolute;left:30px;bottom:18px;width:44px;height:auto;pointer-events:none}
.login .map .land{fill:rgba(190,220,250,.13);stroke:rgba(170,210,248,.5);stroke-width:1.8;stroke-linejoin:round}
.login .map .net{fill:none;stroke:rgba(155,203,246,.38);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.login .map circle{fill:#bcd9f5;opacity:.75}
.login .map circle.hi{fill:#fff}
.login .side .deco{position:absolute;left:98px;bottom:8px;width:38%;max-width:230px;height:auto;pointer-events:none}
/* 右側登入面板 */
.login .panel{position:relative;flex:1;min-width:0;padding:36px 46px 28px;display:flex;flex-direction:column}
.login .panel>*{position:relative;z-index:1}
.login .panel>.hill{position:absolute;left:0;bottom:0;z-index:0;width:100%;height:auto;pointer-events:none}
.login .motto{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.login .motto .shield{width:30px;height:34px;flex-shrink:0}
.login .motto .txt{border-left:1px solid #d3dfeb;padding-left:14px;font-size:13.5px;color:#4a5a6f;line-height:1.85}
.login .motto .txt span{display:block;letter-spacing:1px}
.login .panel h2{font-size:24px;color:#14263f;letter-spacing:2px;margin-bottom:7px}
.login .panel .lead{font-size:13px;color:#4a5a6f;line-height:1.7;margin-bottom:18px}
.login .err{background:#fbe4de;border:1px solid #e9bdb3;color:#8f2619;font-size:13.5px;padding:11px 14px;
border-radius:8px;margin-bottom:18px;line-height:1.6}
.login .fld{margin-bottom:15px}
.login .fld label{display:block;font-size:14px;font-weight:700;color:#14263f;margin-bottom:9px;letter-spacing:1px}
.login .fld .req{color:#a23024;margin-left:4px}
.login .box{position:relative;display:flex;align-items:center}
.login .box .ic{position:absolute;left:15px;width:20px;height:20px;color:#31557f;pointer-events:none}
.login .box input{width:100%;height:50px;padding:0 16px 0 46px;border:1px solid #dae4ef;border-radius:12px;
font-family:inherit;font-size:15px;color:#1f2d3d;background:#fff;
transition:border-color .15s,box-shadow .15s}
.login .box input::placeholder{color:#4d5a6a}
.login .box input:focus{outline:none;border-color:#22568f;box-shadow:0 0 0 3px rgba(34,86,143,.18)}
.login .box:has(input[type=password]) input,.login .box:has(.eye) input{padding-right:50px}
.login .eye{position:absolute;right:8px;width:38px;height:38px;border:none;background:none;cursor:pointer;color:#31557f;
border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0}
.login .eye:hover{background:#f0f5fa}
.login .eye:focus-visible{outline:2px solid #22568f;outline-offset:1px}
.login .eye svg{width:21px;height:21px}
.login .eye .on-show,.login .eye.on .on-hide{display:none}
.login .eye.on .on-show{display:block}
.login .go{width:100%;height:52px;margin-top:2px;border:none;border-radius:12px;cursor:pointer;
font-family:inherit;font-size:19px;font-weight:700;letter-spacing:5px;color:#fff;
display:flex;align-items:center;justify-content:center;gap:4px;
background:linear-gradient(90deg,#257ac0,#165ca2 52%,#144883)}
.login .go:hover{background:linear-gradient(90deg,#1e6cae,#124f8d 52%,#0f3c70)}
.login .go:focus-visible{outline:3px solid #0d2d52;outline-offset:2px}
.login .go svg{width:22px;height:22px;stroke-width:2.2}
.login .notes{list-style:none;margin-top:20px;padding-top:18px;border-top:1px solid #e3eaf2;
display:flex;flex-direction:column;gap:10px}
.login .notes li{display:flex;align-items:flex-start;gap:16px;font-size:13.5px;color:#485a70;line-height:1.7}
.login .notes svg{width:19px;height:19px;flex-shrink:0;margin-top:1px;color:#1f4d87}
/* ---------- 其他 ---------- */
.empty{text-align:center;padding:40px 20px;color:#8496a9;font-size:13.5px;line-height:1.8}
.inline-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.blazor-error-boundary{background:#b32121;padding:12px 20px;color:#fff;border-radius:8px;margin:12px 0}
#blazor-error-ui{background:#ffeb3b;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000}
#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem}
@media (max-width:1180px){
.kpis{grid-template-columns:repeat(3,1fr)}
.outs{grid-template-columns:1fr}
}
/* 並排寬度不足時改為上下堆疊，品牌面板僅保留標題與說明 */
@media (max-width:1100px){
.login{flex-direction:column;max-width:560px}
.login .side{flex:none;padding:32px 30px 28px}
.login .side .inner{max-width:none}
.login .side h1{font-size:25px}
.login .side p{font-size:13px}
/* 堆疊時文字為整列寬度，照片須再壓淡，否則字會落在亮處 */
.login .side .pic{inset:0 0 0 50%;opacity:.28}
.login .pts,.login .side .deco,.login .map{display:none}
.login .panel{padding:32px 30px 30px}
}
@media (max-width:480px){
.login-wrap{padding:16px}
.login .side,.login .panel{padding:26px 22px}
.login .side h1{font-size:22px}
.login .motto{margin-bottom:24px}
}
/* 系統管理：帳號維護、稽核紀錄、變更密碼 */
header.top a.out{text-decoration:none;display:inline-block;line-height:1.4}
header.top .out.ghost{border-color:rgba(255,255,255,.2);opacity:.85}
.tabs .sep{width:1px;background:rgba(255,255,255,.22);margin:10px 10px}
.wrap.narrow{max-width:620px}
.notice{background:#fdf1e0;border:1px solid #f0d6a8;color:#8a5a0b;font-size:13px;padding:11px 14px;border-radius:7px;margin-bottom:16px;line-height:1.7}
.err{background:#fbe4de;border:1px solid #e9bdb3;color:#c0392b;font-size:13px;padding:10px 13px;border-radius:7px;margin-bottom:16px}
.hint{font-size:12px;color:#8496a9;margin-top:6px;line-height:1.6}
.dim{color:#8496a9}
.pw-form .f{margin-bottom:14px}
.pw-form .acts{display:flex;gap:10px;align-items:center;margin-top:18px}
.pw-form .acts a{text-decoration:none;display:inline-flex;align-items:center}
/* 表格內編輯控制項：沿用表單外觀但壓縮高度，使整列仍可一眼掃讀 */
table.t .ed{width:100%;padding:5px 8px;border:1px solid #ccd6e0;border-radius:5px;font-family:inherit;font-size:13px;background:#fff}
table.t .ed:focus{outline:none;border-color:#22568f;box-shadow:0 0 0 2px rgba(34,86,143,.12)}
table.t td.nw{white-space:nowrap}
table.t td.ops{display:flex;gap:6px;align-items:center;border:none;flex-wrap:wrap}
table.t tr.off td{background:#fafbfc;color:#9aa8b8}
table.t tr.off td.c{color:#9aa8b8}
table.t tr.sub-row td{background:#f7fafd}
.tagx.w{background:#fdf1e0;color:#b8730f}
.filt .cnt{margin-left:auto;font-size:12.5px;color:#7a8b9e}
.btn-o{background:#fff;color:#b8730f;border:1.5px solid #e8c89a}
.btn-o:hover:not(:disabled){background:#fdf7ee}
.card-sec{margin-top:22px;padding-top:18px;border-top:1px solid #eef2f7}
.card-sec h4{font-size:14px;color:#16263d;margin-bottom:12px}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:16px;font-size:13px;color:#5a6b80}
@media (max-width:820px){
.layout{flex-direction:column}
aside{width:100%;position:static}
.kpis{grid-template-columns:repeat(2,1fr)}
}