/* ═══════════════════════════════════════════════════════════════════════
   豬場飼料管理系統 — 必能 2026 房屋風格（bienen-web-app 規範）
   配色：必能橘只當色塊（主要按鈕、active、重點）；內文炭灰；表頭沙米；
         狀態用功能色（成功綠／資訊藍／注意黃／錯誤紅），橘色不代表警告。
   字體：英數 Inter（本機 woff2）＋ 中文 思源黑體 → 微軟正黑體；數字等寬 tabular-nums。
   版型：置頂頁首（標記＋系統名）→ 水平分組導覽 → 置中內容 → 頁尾；手機版底部分頁列。
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* 色譜 */
  --orange-50:#FFF5E8;--orange-100:#FEEACC;--orange-200:#FED397;--orange-300:#FEB856;--orange-400:#F5A21D;--orange-500:#DA8A08;--orange-600:#B46E0C;--orange-700:#8F5206;--orange-800:#6B3903;--orange-900:#482200;
  --sand-50:#FCF7E5;--sand-100:#F3EDD9;--sand-200:#E2DBC3;--sand-300:#CCC4A7;--sand-400:#BCB499;--sand-500:#A69F85;--sand-600:#86806A;--sand-700:#696350;--sand-800:#4C4837;--sand-900:#322E1F;
  --charcoal-50:#FBF8F6;--charcoal-100:#F2EFEE;--charcoal-200:#E4E0DF;--charcoal-300:#D0CDCB;--charcoal-400:#ADAAA9;--charcoal-500:#888584;--charcoal-600:#6B6867;--charcoal-700:#524F4E;--charcoal-800:#3C3A39;--charcoal-900:#1C1A19;
  /* 語意變數（元件只用這些） */
  --brand:var(--orange-400);--brand-hover:var(--orange-500);--brand-text:var(--orange-700);--brand-soft:var(--orange-50);--brand-ring:var(--orange-100);--on-brand:var(--charcoal-900);
  --label:var(--charcoal-700);
  --ink:var(--charcoal-800);--ink-strong:var(--charcoal-900);--ink-soft:var(--charcoal-600);--ink-faint:var(--charcoal-400);
  --paper:var(--charcoal-50);--panel:#FFFFFF;--panel-2:var(--charcoal-100);--head-bg:var(--sand-100);--line:var(--charcoal-200);--line-strong:var(--charcoal-300);
  --dark:var(--charcoal-900);--dark-2:var(--charcoal-800);--on-dark:var(--charcoal-100);--on-dark-soft:var(--charcoal-300);--on-dark-accent:var(--orange-300);
  --pass:#2F8247;--pass-bg:#E3F6E6;--pass-text:#045725;--info:#2A73A0;--info-bg:#E3F3FF;--info-text:#034D73;
  --warn:#DCBC33;--warn-bg:#F8F0D4;--warn-text:#554703;--fail:#C13D34;--fail-bg:#FFEBE8;--fail-text:#870F0E;--idle:var(--charcoal-500);--idle-bg:var(--charcoal-100);
  --head-glass:rgba(251,248,246,.94);--shadow:0 1px 2px rgba(28,26,25,.04),0 3px 12px rgba(28,26,25,.05);--shadow-lg:0 10px 32px rgba(28,26,25,.16);
  --hover-tint:rgba(28,26,25,.05);--row-hover:var(--brand-soft);
  /* 舊頁面仍在用的別名（PHP 內的 inline style） */
  --up:var(--fail-text);--up-ink:var(--fail-text);--up-bg:var(--fail-bg);--down:var(--pass-text);--down-bg:var(--pass-bg);
  --orange:var(--brand);--orange-ink:var(--brand-text);--orange-tint:var(--brand-soft);
  --ink-2:var(--ink-soft);--ink-3:var(--ink-faint);--wash:var(--panel-2);--fill:var(--panel-2);--line-2:var(--line-strong);--taupe:var(--sand-300);
  --blue:var(--info);--blue-ink:var(--info-text);--blue-tint:var(--info-bg);--bg:var(--paper);--on-ink:#FFFFFF;
  --ok-bg:var(--pass-bg);--sens-bg:#FFF6F4;
  /* 字體與字級 */
  --sans:"Inter","Noto Sans TC","Source Han Sans TC","Microsoft JhengHei","PingFang TC","Segoe UI",sans-serif;
  --display:var(--sans);--mono:var(--sans);--code:"SFMono-Regular",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  --fs-h1:24px;--fs-h2:18px;--fs-body:14px;--fs-note:12px;
  --r-lg:12px;--r:10px;--r-sm:8px;--gut:clamp(16px,3vw,36px);--wrap:1280px;
  color-scheme:light;
}
/* ── 深色模式：跟隨系統（自動）或手動選「深色」。同一套色譜，只換底與字 ── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand-text:var(--orange-300);--brand-soft:rgba(245,162,29,.12);--brand-ring:rgba(245,162,29,.28);
    --label:var(--charcoal-300);--ink:var(--charcoal-200);--ink-strong:#FFFFFF;--ink-soft:var(--charcoal-400);--ink-faint:var(--charcoal-500);
    --paper:#171514;--panel:#221F1D;--panel-2:#2C2927;--head-bg:#2F2A24;--line:#3C3A39;--line-strong:#524F4E;
    --pass-bg:rgba(47,130,71,.18);--pass-text:#8FD6A0;--info-bg:rgba(42,115,160,.2);--info-text:#8CC4EA;
    --warn-bg:rgba(220,188,51,.16);--warn-text:#E8D27A;--fail-bg:rgba(193,61,52,.2);--fail-text:#F4A59C;--idle-bg:#2C2927;
    --head-glass:rgba(23,21,20,.92);--shadow:0 0 0 1px rgba(255,255,255,.05),0 4px 16px rgba(0,0,0,.4);--shadow-lg:0 0 0 1px rgba(255,255,255,.07),0 10px 32px rgba(0,0,0,.6);
    --hover-tint:rgba(255,255,255,.06);--sens-bg:rgba(193,61,52,.08);--on-ink:var(--charcoal-900);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --brand-text:var(--orange-300);--brand-soft:rgba(245,162,29,.12);--brand-ring:rgba(245,162,29,.28);
  --label:var(--charcoal-300);--ink:var(--charcoal-200);--ink-strong:#FFFFFF;--ink-soft:var(--charcoal-400);--ink-faint:var(--charcoal-500);
  --paper:#171514;--panel:#221F1D;--panel-2:#2C2927;--head-bg:#2F2A24;--line:#3C3A39;--line-strong:#524F4E;
  --pass-bg:rgba(47,130,71,.18);--pass-text:#8FD6A0;--info-bg:rgba(42,115,160,.2);--info-text:#8CC4EA;
  --warn-bg:rgba(220,188,51,.16);--warn-text:#E8D27A;--fail-bg:rgba(193,61,52,.2);--fail-text:#F4A59C;--idle-bg:#2C2927;
  --head-glass:rgba(23,21,20,.92);--shadow:0 0 0 1px rgba(255,255,255,.05),0 4px 16px rgba(0,0,0,.4);--shadow-lg:0 0 0 1px rgba(255,255,255,.07),0 10px 32px rgba(0,0,0,.6);
  --hover-tint:rgba(255,255,255,.06);--sens-bg:rgba(193,61,52,.08);--on-ink:var(--charcoal-900);
  color-scheme:dark;
}

/* Inter（SIL OFL）：只負責英文、數字與符號；中文交給思源黑體／微軟正黑體 */
@font-face{font-family:"Inter";src:url("fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── 基礎 ── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:120px}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:var(--fs-body);line-height:1.65;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;font-feature-settings:"tnum","kern"}
a{color:var(--brand-text);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:3px solid var(--brand-ring);outline-offset:2px;border-radius:6px}
h1,h2,h3,h4{margin:0;color:var(--ink-strong);font-weight:700;line-height:1.3}
b,strong{font-weight:700}
.num,td.num,th.num{text-align:right;white-space:nowrap}
.muted{color:var(--ink-soft)}
.small{font-size:var(--fs-note)}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--label);font-weight:600}
[hidden]{display:none!important}
.no-print{}

/* ═══ 頁首：標記＋系統名＋狀態 → 水平分組導覽 ═══ */
.apphead{position:sticky;top:0;z-index:40;background:var(--head-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.headbar{display:flex;align-items:center;gap:16px;padding:10px var(--gut);max-width:var(--wrap);margin-inline:auto;min-height:60px}
.brand{display:flex;align-items:center;gap:11px;min-width:0;color:var(--ink-strong)}
.brand:hover{text-decoration:none}
.brand .logo{width:36px;height:36px;flex:0 0 auto;object-fit:contain;display:block}
.brand .bt{min-width:0}
.brand .bt b{display:block;font-size:17px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .bt span{display:block;font-size:10.5px;color:var(--ink-soft);letter-spacing:.12em;text-transform:uppercase;margin-top:1px}
.headr{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.today{font-size:var(--fs-note);color:var(--ink-soft);white-space:nowrap}
.chip{font-size:var(--fs-note);background:var(--head-bg);color:var(--label);padding:5px 12px;border-radius:999px;font-weight:600;white-space:nowrap}
.farm-switch label{font-size:var(--fs-note);color:var(--label);display:flex;align-items:center;gap:8px;white-space:nowrap;font-weight:600}
.farm-switch select{padding:6px 30px 6px 10px;font-size:13px;width:auto;max-width:220px;background-color:var(--panel)}
.umenu{display:flex;align-items:center;gap:8px;font-size:var(--fs-note);color:var(--ink-soft);padding-left:10px;border-left:1px solid var(--line)}
.umenu b{color:var(--ink);font-weight:600;white-space:nowrap}
.umenu a{white-space:nowrap}
.topnav{display:flex;align-items:center;gap:2px;padding:0 var(--gut) 8px;max-width:var(--wrap);margin-inline:auto;overflow-x:auto;scrollbar-width:thin}
.topnav::-webkit-scrollbar{height:5px}
.topnav::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.topnav a{white-space:nowrap;font-size:13px;font-weight:600;color:var(--ink-soft);padding:6px 11px;border-radius:8px;transition:background .15s,color .15s}
.topnav a:hover{background:var(--panel-2);color:var(--ink);text-decoration:none}
.topnav a.active{background:var(--brand);color:var(--on-brand)}
.navsep{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);padding:0 6px 0 12px;border-left:1px solid var(--line-strong);margin-left:6px;white-space:nowrap;font-weight:600}
.navsep:first-child{border-left:none;margin-left:0;padding-left:2px}

/* 手機抽屜（桌機隱藏） */
.side,.scrim,.tabbar,.side-close,.menu-btn,.ph-actions{display:none}

/* ═══ 內容 ═══ */
main{min-width:0;display:flex;flex-direction:column;min-height:calc(100vh - 110px)}
.wrap{padding:26px var(--gut) 24px;max-width:var(--wrap);width:100%;margin-inline:auto}
.crumbs{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:var(--fs-note);color:var(--ink-soft);margin-bottom:8px}
.crumbs a{color:var(--ink-soft)}
.crumbs a:hover{color:var(--brand-text)}
.crumbs i{font-style:normal;color:var(--ink-faint)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--line-strong)}
.page-head h1{font-size:var(--fs-h1);line-height:1.25}
.page-head p{margin:4px 0 0;color:var(--ink-soft);max-width:80ch;font-size:13px}
.page-head .ph-l{min-width:0}
.page-head .ph-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.app-foot{margin-top:auto;padding:22px var(--gut) 26px;font-size:var(--fs-note);color:var(--ink-soft);border-top:1px solid var(--line);background:var(--panel)}
.app-foot .fin{max-width:var(--wrap);margin-inline:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.app-foot img{height:30px;width:auto;display:block}
.app-foot .fr{margin-left:auto;text-align:right}

/* ── 區塊卡片 ── */
.sec{margin:0 0 20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px 20px;box-shadow:var(--shadow)}
.sec .sec{box-shadow:none;border:none;padding:0;background:transparent}
.sec-h{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.sec-h h2{font-size:var(--fs-h2)}
.sec-h .aside{font-size:var(--fs-note);color:var(--ink-soft);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px}
.cols > .sec{margin-bottom:20px}
.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}

/* ── 數字小卡 ── */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.fig{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px}
.fig b{display:block;font-size:28px;font-weight:700;line-height:1.1;color:var(--ink-strong)}
.fig span{display:block;margin-top:4px;font-size:var(--fs-note);color:var(--ink-soft)}
.fig a{color:inherit;display:block}
.fig a:hover{text-decoration:none}
.fig a:hover b{color:var(--brand-text)}

/* ── 資料表：沙米表頭、細分隔線、hover 淡橘 ── */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-sm)}
table.t{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-body)}
.t th{text-align:left;font-size:var(--fs-note);font-weight:700;color:var(--label);padding:9px 12px;border-bottom:1.5px solid var(--line-strong);white-space:nowrap;background:var(--head-bg)}
.t td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.t tbody tr:last-child td{border-bottom:none}
.t tbody tr:hover td{background:var(--row-hover)}
.t tfoot td{border-top:1.5px solid var(--line-strong);border-bottom:none;font-weight:700;background:var(--panel-2)}
.t .rowlink{color:var(--ink-strong);font-weight:600}
.t .rowlink:hover{color:var(--brand-text)}
.t .sub{display:block;font-size:var(--fs-note);color:var(--ink-soft);font-weight:400}
.t tr.off td{color:var(--ink-faint)}
.t td.act{white-space:nowrap;text-align:right}
.t input,.t select{font-size:13px;padding:5px 8px}
.t .rowact{display:inline-flex;gap:4px;opacity:.55;transition:opacity .15s}
.t tr:hover .rowact{opacity:1}

.tag{display:inline-block;font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--panel-2);color:var(--label);white-space:nowrap;line-height:1.7;vertical-align:middle}
.tag.o{background:var(--orange-100);color:var(--orange-800)}
.tag.k{background:var(--charcoal-700);color:#FFFFFF}
.tag.g{background:var(--pass-bg);color:var(--pass-text)}
.tag.w{background:var(--warn-bg);color:var(--warn-text)}
.tag.r{background:var(--fail-bg);color:var(--fail-text)}
.tag.i{background:var(--info-bg);color:var(--info-text)}
a.tag:hover{text-decoration:none;background:var(--brand-soft);color:var(--brand-text)}
.chg{font-size:var(--fs-note);font-weight:700;white-space:nowrap}
.chg.up{color:var(--fail-text)}.chg.down{color:var(--pass-text)}.chg.flat{color:var(--ink-faint)}
.best{color:var(--pass-text);font-weight:700}

/* ── 表單 ── */
label.f{display:flex;flex-wrap:wrap;align-items:center;gap:5px 6px;font-size:var(--fs-note);font-weight:600;color:var(--label)}
label.f > input,label.f > select,label.f > textarea,label.f > .pick,label.f > div{flex:1 1 100%}
label.f .req{color:var(--fail-text);font-weight:600;font-size:11px}
label.f.row{flex-wrap:nowrap;min-width:auto;align-self:end;padding-bottom:8px}
label.f.row > input{flex:0 0 auto}
input,select,textarea{font-family:var(--sans);font-size:var(--fs-body);color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:8px 11px;width:100%;min-width:0;transition:border-color .15s,box-shadow .15s}
select{appearance:none;-webkit-appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888584' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
input[disabled]{background:var(--panel-2);color:var(--ink-soft)}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
textarea{min-height:76px;resize:vertical}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--orange-500)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px 16px}
.fgrid .wide{grid-column:1/-1}
.fbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow)}
.sec .panel{background:var(--paper);box-shadow:none}
.panel h3{font-size:15px;font-weight:700;margin-bottom:12px}
.panel h3 .muted{font-weight:400}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px}
.sec .filters{border:none;padding:0;background:transparent}
.filters label.f{min-width:140px}
.filters .grow{flex:1;min-width:200px}
.filters .spacer{flex:1}

.btn{appearance:none;cursor:pointer;font-family:var(--sans);font-size:var(--fs-body);font-weight:600;padding:7px 14px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;line-height:1.5;transition:background .15s,border-color .15s}
.btn:hover{background:var(--panel-2);text-decoration:none;border-color:var(--charcoal-400)}
.btn.p{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.p:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--on-brand)}
.btn.d{background:var(--fail-bg);border-color:transparent;color:var(--fail-text)}
.btn.d:hover{background:var(--fail);color:#fff}
.btn.s{padding:4px 10px;font-size:13px}
.btn.q{background:transparent;border-color:transparent;color:var(--brand-text);padding-left:8px;padding-right:8px}
.btn.q:hover{background:var(--brand-soft);border-color:transparent}
.btn.ghost{background:transparent}
.inline{display:inline}

/* ── 訊息 ── */
.note{padding:11px 14px;border-radius:var(--r-sm);background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--idle);margin-bottom:14px;font-size:var(--fs-body);color:var(--ink)}
.note.ok{border-left-color:var(--pass);background:var(--pass-bg);color:var(--pass-text);border-color:transparent;border-left-color:var(--pass)}
.note.err{border-left-color:var(--fail);background:var(--fail-bg);color:var(--fail-text);border-color:transparent;border-left-color:var(--fail)}
.note.warn{border-left-color:var(--warn);background:var(--warn-bg);color:var(--warn-text);border-color:transparent;border-left-color:var(--warn)}
.note.info{border-left-color:var(--info);background:var(--info-bg);color:var(--info-text);border-color:transparent;border-left-color:var(--info)}
.note a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ── 定義清單（基本資料） ── */
dl.kv{display:grid;grid-template-columns:max-content 1fr;margin:0;font-size:var(--fs-body)}
dl.kv dt,dl.kv dd{padding:8px 0;border-bottom:1px solid var(--line)}
dl.kv dt{color:var(--label);font-weight:600;font-size:var(--fs-note);padding-right:20px;padding-top:10px}
dl.kv dd{margin:0;word-break:break-word}
dl.kv dt:last-of-type,dl.kv dd:last-of-type{border-bottom:none}

/* ── 圖表 ── */
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .ax{font-size:11px;fill:var(--ink-soft);font-family:var(--sans)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-note);color:var(--ink-soft);margin-top:8px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}

.cbars{display:flex;flex-direction:column;gap:10px;margin:4px 0 6px}
.cbar{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:12px}
.cbar-l{font-size:var(--fs-note);color:var(--label);font-weight:600}
.cbar-track{display:flex;height:32px;background:var(--panel-2);border-radius:var(--r-sm);overflow:hidden}
.seg{height:100%;display:flex;align-items:center;overflow:hidden;border-right:2px solid var(--panel);min-width:0}
.seg span{font-size:11px;color:#fff;padding:0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.seg.rest{background:var(--sand-300)}
.seg.rest span{color:var(--charcoal-800)}

.headline{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.headline > div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 16px}
.headline b{display:block;font-size:24px;font-weight:700;line-height:1.15;color:var(--ink-strong)}
.headline b.big{font-size:34px;color:var(--brand-text)}
.headline span{display:block;margin-top:2px;font-size:var(--fs-note);color:var(--ink-soft)}

/* ── 登入：左深色品牌版、右表單 ── */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);background:var(--paper)}
.login-l{position:relative;overflow:hidden;padding:52px clamp(28px,6vw,72px);display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,var(--dark),var(--dark-2));color:var(--on-dark)}
.login-l::after{content:"";position:absolute;right:-120px;bottom:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(245,162,29,.32),transparent 62%);pointer-events:none}
.login-l img{width:160px;position:relative}
.login-l .eyebrow{color:var(--on-dark-accent);margin-bottom:12px}
.login-l h1{font-size:clamp(28px,3.6vw,40px);line-height:1.2;font-weight:700;color:#fff;position:relative}
.login-l p{color:var(--on-dark-soft);max-width:38ch;position:relative}
.login-l .muted{color:var(--on-dark-soft);position:relative}
.login-r{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.login-box{width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--brand);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:30px 28px}
.login-box h2{font-size:22px;font-weight:700;margin-bottom:2px}
.login-box .btn{justify-content:center;padding:10px;font-size:15px;border-radius:var(--r)}
.login-foot{font-size:var(--fs-note);color:var(--ink-soft);text-align:center;margin:4px 0 0}
.login-l img.logo-l{display:none}.login-l img.logo-d{display:block}

/* ── 分頁籤 ── */
.tabs{display:inline-flex;gap:2px;padding:3px;background:var(--panel-2);border-radius:10px;margin:0 0 18px;border:1px solid var(--line)}
.tabs a{padding:5px 14px;color:var(--ink-soft);font-weight:600;font-size:13px;border-radius:7px}
.tabs a:hover{text-decoration:none;color:var(--ink)}
.tabs a.on{background:var(--panel);color:var(--ink-strong);box-shadow:0 1px 2px rgba(28,26,25,.12)}
.seg-ctl{display:inline-flex;gap:2px;padding:2px;background:var(--panel-2);border-radius:9px;border:1px solid var(--line)}
.seg-ctl a{padding:3px 12px;font-size:var(--fs-note);color:var(--ink-soft);border-radius:7px;font-weight:600}
.seg-ctl a.on{background:var(--panel);color:var(--ink-strong);box-shadow:0 1px 2px rgba(28,26,25,.12)}
.seg-ctl a:hover{text-decoration:none;color:var(--ink)}
table.pivot td,table.pivot th{padding:6px 8px}
table.pivot td.m{text-align:right;white-space:nowrap;font-size:13px;color:var(--ink-soft)}
table.pivot td.m.up{color:var(--fail-text);font-weight:700}
table.pivot td.m.down{color:var(--pass-text);font-weight:700}
table.pivot td.m.none{color:var(--line-strong)}
table.pivot .sticky{position:sticky;left:0;background:var(--panel);z-index:1;min-width:190px;max-width:240px}
table.pivot thead .sticky{background:var(--head-bg);z-index:2}
table.pivot tbody tr:hover .sticky{background:var(--row-hover)}
table.pivot th.m{text-align:right}
.spark{display:block}

/* ── BOM 成本圓餅圖 ── */
.donut-wrap{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:36px;align-items:center}
.donut{width:100%;height:auto;display:block}
.donut .seg{transition:opacity .15s}
.donut-wrap.hovering .donut .seg{opacity:.35}
.donut-wrap.hovering .donut .seg.hl{opacity:1}
.donut .pct{font-size:12px;font-weight:700;font-family:var(--sans);pointer-events:none}
.donut .c-k{font-size:13px;fill:var(--ink-soft);font-family:var(--sans)}
.donut .c-v{font-size:40px;font-weight:700;fill:var(--ink-strong);font-family:var(--sans)}
.donut-legend .sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:9px;vertical-align:-1px}
.donut-legend tr.hl td{background:var(--brand-soft)}
@media (max-width:880px){.donut-wrap{grid-template-columns:1fr}.donut-box{max-width:320px;margin:0 auto}}
@media print{.donut-wrap{grid-template-columns:260px 1fr}}

/* ── 生產儀表板：橫向長條 ── */
.hbars{display:flex;flex-direction:column;gap:7px}
.hbar{display:grid;grid-template-columns:minmax(90px,150px) 1fr 74px;gap:10px;align-items:center;font-size:13px}
.hbar-l{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-t{height:12px;background:var(--panel-2);border-radius:999px;overflow:hidden}
.hbar-t div{height:100%;border-radius:999px}
.hbar-v{text-align:right;color:var(--ink-soft);white-space:nowrap}

/* ── 交易品項勾選清單 ── */
.pick{border-top:1px solid var(--line);padding-top:4px}
.pick-q{margin:10px 0}
.pick-box{max-height:300px;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:4px 14px 10px;columns:3 210px;column-gap:20px}
.pick-g{column-span:all;font-size:var(--fs-note);font-weight:700;color:var(--label);padding:10px 0 4px;border-bottom:1px solid var(--line);margin-bottom:4px}
.pick-i{display:flex;gap:8px;align-items:baseline;font-size:var(--fs-body);padding:3px 0;break-inside:avoid;cursor:pointer}
.pick-i .muted{font-size:11px;margin-left:auto;padding-left:6px;white-space:nowrap}
.pick-i:has(input:checked){color:var(--brand-text);font-weight:600}
.pick-n{margin:6px 0 0}
.items-cell{min-width:220px;max-width:360px}

/* ── 生產儀表板：成本敏感度欄 ── */
.t th.sens-h{background:var(--fail-bg);color:var(--fail-text);line-height:1.35;white-space:nowrap}
.t td.sens{background:var(--sens-bg)}
.t tbody tr:hover td.sens{background:var(--fail-bg)}

/* ── 資料表分頁 ── */
tr.pg-off{display:none}
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:12px 0 4px;font-size:13px}
.pager button{appearance:none;font-family:var(--sans);cursor:pointer;min-width:32px;height:32px;padding:0 10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;font-size:13px}
.pager button:hover:not(:disabled){background:var(--panel-2)}
.pager .pg-arrow{font-size:18px;line-height:1;font-weight:600;min-width:38px;color:var(--brand-text)}
.pager .pg-num.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:700}
.pager button:disabled{opacity:.35;cursor:default}
.pager .pg-gap{color:var(--ink-faint);padding:0 2px}
.pager .pg-info{color:var(--ink-soft);margin-left:8px}
.pager .pg-size{display:flex;align-items:center;gap:6px;margin-left:auto;color:var(--ink-soft);white-space:nowrap}
.pager .pg-size select{width:auto;padding:4px 28px 4px 10px;font-size:13px}
@media print{tr.pg-off{display:table-row}.pager{display:none}}

/* ── 可排序表頭 ── */
.t th.sortable a{color:inherit;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.t th.sortable a:hover{color:var(--ink-strong);text-decoration:none}
.t th.sortable .sort-ic{font-size:10px;color:var(--ink-faint)}
.t th.sortable.on{color:var(--ink-strong)}
.t th.sortable.on .sort-ic{color:var(--brand-text)}
.t th.num.sortable a{justify-content:flex-end}

/* ── 每張表下方的「匯出 CSV」 ── */
.csv-holder{display:flex;justify-content:flex-end;margin:8px 0 0}
.pg-csv{appearance:none;font-family:var(--sans);cursor:pointer;font-size:var(--fs-note);font-weight:600;padding:4px 12px;border:1px solid var(--line);background:var(--panel);color:var(--brand-text);border-radius:999px}
.pg-csv:hover{background:var(--brand-soft)}
@media print{.csv-holder{display:none}}

/* ── 儀表板 ── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:22px}
.kpi{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.kpi:hover{text-decoration:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.kpi-ic{grid-row:1/4;width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.kpi b{font-size:26px;font-weight:700;line-height:1.1;color:var(--ink-strong)}
.kpi-l{font-size:var(--fs-note);color:var(--label);font-weight:600}
.kpi-s{font-size:11px;color:var(--ink-soft)}
.bbars{display:flex;flex-direction:column;gap:8px}
.bbar{display:grid;grid-template-columns:minmax(110px,170px) 1fr 118px;gap:12px;align-items:center;color:var(--ink);padding:3px 6px;margin:0 -6px;border-radius:6px}
.bbar:hover{background:var(--brand-soft);text-decoration:none}
.bbar-l{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.bbar-t{position:relative;height:14px;background:var(--panel-2);border-radius:999px}
.bbar-f{position:absolute;left:0;top:0;bottom:0;border-radius:999px;min-width:4px}
.bbar-old{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink-strong);border-radius:2px;transform:translateX(-1px)}
.bbar-v{text-align:right;font-size:13px;white-space:nowrap}
.dot-warn{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--fail);flex:none}
.donut-row{display:grid;grid-template-columns:minmax(150px,200px) 1fr;gap:20px;align-items:center}
.dash-donut{width:100%;height:auto;display:block}
.dash-donut .dd-k{font-size:12px;fill:var(--ink-soft);font-family:var(--sans)}
.dash-donut .dd-v{font-size:24px;font-weight:700;fill:var(--ink-strong);font-family:var(--sans)}
.dlegend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.dlegend li{display:grid;grid-template-columns:12px 1fr auto;gap:8px;align-items:center}
.dlegend i{width:12px;height:12px;border-radius:3px}
.dlegend b{font-weight:700}
.rings{display:flex;flex-direction:column;gap:14px}
.ring{display:flex;align-items:center;gap:14px}
.ring svg{flex:none}
.ring .ring-v{font-size:22px;font-weight:700;fill:var(--ink-strong);font-family:var(--sans)}
.ring-l{display:flex;flex-direction:column}
.ring-l b{font-size:14px;font-weight:700}
.ring-l span{font-size:var(--fs-note);color:var(--ink-soft)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tile{display:flex;flex-direction:column;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;color:var(--ink)}
.tile:hover{text-decoration:none;background:var(--brand-soft);border-color:var(--brand)}
.tile-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tile-h b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-v{font-size:22px;font-weight:700;display:flex;align-items:baseline;gap:6px;color:var(--ink-strong)}
.tile-v small{font-size:var(--fs-note);color:var(--ink-soft);font-weight:400}
.tile-v .chg{font-size:13px;margin-left:auto}
.tile .spark{width:100%;height:44px}
.tile .spark path{stroke:var(--charcoal-400);stroke-width:2}
.todo{display:flex;flex-direction:column;gap:8px}
.todo a{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);background:var(--paper)}
.todo a:hover{text-decoration:none;border-color:var(--brand);background:var(--brand-soft)}
.todo a b{font-size:18px;min-width:34px;text-align:right;color:var(--ink-strong)}
.todo a .st{width:8px;height:8px;border-radius:50%;flex:none}
.todo a span{flex:1}

/* ── 亮／暗模式切換 ── */
.theme-sw{display:flex;gap:2px;padding:2px;background:var(--panel-2);border-radius:8px;border:1px solid var(--line)}
.theme-sw button{appearance:none;border:none;background:transparent;color:var(--ink-soft);font-family:var(--sans);font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;cursor:pointer;white-space:nowrap}
.theme-sw button:hover:not(.on){color:var(--ink)}
.theme-sw button.on{background:var(--panel);color:var(--ink-strong);box-shadow:0 1px 2px rgba(28,26,25,.12)}
.login-box .theme-sw{margin:6px auto 0;width:100%;max-width:240px}
.login-box .theme-sw button{flex:1;padding:5px 6px;font-size:var(--fs-note)}
/* 公司 Logo：深色模式改用淺色字版本 */
img.logo-d{display:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) img.logo-l{display:none!important}:root:not([data-theme="light"]) img.logo-d{display:block!important}}
:root[data-theme="dark"] img.logo-l{display:none!important}
:root[data-theme="dark"] img.logo-d{display:block!important}
.login-l img.logo-l{display:none!important}.login-l img.logo-d{display:block!important}
@media print{img.logo-l{display:block!important}img.logo-d{display:none!important}.theme-sw{display:none}}

/* ═══ 響應式 ═══ */
@media (max-width:1080px){.c4,.c5,.c6,.c7,.c8{grid-column:span 12}}
@media (max-width:880px){
  html{scroll-padding-top:70px}
  html.no-scroll,html.no-scroll body{overflow:hidden}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .headbar{padding:8px 14px;padding-top:calc(8px + env(safe-area-inset-top));min-height:54px;gap:10px}
  .brand .logo{width:30px;height:30px}
  .brand .bt b{font-size:15px}.brand .bt span{display:none}
  .headr{gap:8px}
  .today,.umenu,.headr .theme-sw{display:none}
  .farm-switch select{max-width:160px;font-size:14px;padding:6px 28px 6px 10px}
  .topnav{display:none}
  .wrap{padding:16px 14px 24px}
  .page-head{margin-bottom:16px;padding-bottom:12px;flex-direction:column;align-items:stretch}
  .page-head h1{font-size:22px}
  .page-head .ph-actions{margin-left:0}
  .sec{padding:14px 14px 16px}
  .sec-h h2{font-size:17px}
  .app-foot{padding:14px 14px 20px;text-align:center}
  .app-foot .fin{justify-content:center}.app-foot .fr{margin-left:0;text-align:center}
  .login{grid-template-columns:1fr}
  .login-l{padding:calc(24px + env(safe-area-inset-top)) 24px 24px;min-height:0}
  .login-l h1{font-size:26px}
  .login-l img{width:130px}
  .login-r{padding:24px 16px calc(24px + env(safe-area-inset-bottom))}
  .login-box{padding:24px 20px}
  .fig b{font-size:24px}
  .headline b.big{font-size:28px}
  /* 底部分頁列 */
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--head-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 0;color:var(--ink-soft);font-size:10.5px;font-weight:600;background:none;border:none;font-family:var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tabbar a:hover{text-decoration:none}
  .tabbar .on{color:var(--brand-text)}
  .tabbar svg{width:25px;height:25px}
  /* 「更多」抽屜：從左側滑出 */
  .side{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;z-index:50;width:min(320px,86vw);overflow-y:auto;background:var(--panel);border-right:1px solid var(--line);transform:translateX(-100%);transition:transform .25s cubic-bezier(.2,.8,.2,1);padding:calc(14px + env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom))}
  .side.open{transform:none;box-shadow:var(--shadow-lg)}
  .side-close{display:block;align-self:flex-end;appearance:none;border:none;background:none;color:var(--brand-text);font:600 15px var(--sans);padding:4px 8px;margin:-2px 0 4px;cursor:pointer}
  .side .brand{padding:4px 8px 14px}
  .side-nav{display:flex;flex-direction:column;gap:1px;flex:1}
  .side-nav a{display:block;padding:10px 12px;color:var(--ink);font-size:15px;border-radius:8px;font-weight:600}
  .side-nav a:hover{background:var(--hover-tint);text-decoration:none}
  .side-nav a.active{background:var(--brand);color:var(--on-brand)}
  .nav-group{font-size:var(--fs-note);font-weight:700;color:var(--label);padding:16px 12px 6px;letter-spacing:.06em}
  .side-user{margin:14px 6px 0;padding:12px 10px;background:var(--panel-2);border-radius:var(--r);font-size:13px;display:flex;flex-direction:column;gap:1px}
  .side-user b{font-weight:700}
  .side-user span{color:var(--ink-soft);font-size:var(--fs-note)}
  .side-user a{font-size:var(--fs-note);margin-top:4px;align-self:flex-start}
  .side .theme-sw{margin:12px 6px 0}
  .side .theme-sw button{flex:1;padding:6px;font-size:var(--fs-note)}
  .scrim{display:block;position:fixed;inset:0;z-index:45;background:rgba(28,26,25,.4);opacity:0;pointer-events:none;transition:opacity .25s}
  .scrim.on{opacity:1;pointer-events:auto}
  /* 觸控 */
  input,select,textarea{font-size:16px}
  .btn{min-height:40px;font-size:15px}
  .btn.s{min-height:34px;font-size:14px}
  .filters{padding:12px}
  .filters label.f,.filters .grow{flex:1 1 140px;min-width:0}
  .filters .btn{flex:1 1 auto;justify-content:center}
  .fgrid{grid-template-columns:1fr 1fr;gap:12px}
  .pager button{min-width:40px;height:40px}
}
@media (max-width:640px){
  .fgrid{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:12px;column-gap:10px}
  .kpi-ic{width:36px;height:36px;border-radius:9px}
  .kpi b{font-size:22px}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .tile,.kpi,.cols > *,.donut-row > *{min-width:0}
  .tile-h b{min-width:0}
  .cols{column-gap:0}
  .donut-row{grid-template-columns:1fr}.dash-donut{max-width:220px;margin:0 auto}.bbar{grid-template-columns:1fr 92px}.bbar-t{grid-column:1/-1;grid-row:2}
  /* 資料表 → 卡片清單 */
  .tablewrap:has(> table.cardify){overflow:visible;border:none;border-radius:0}
  table.t.cardify td{min-width:0!important}
  table.t.cardify,table.t.cardify tbody,table.t.cardify tfoot,table.t.cardify tr{display:block;width:100%}
  table.t.cardify thead{display:none}
  table.t.cardify tbody tr,table.t.cardify tfoot tr{padding:12px 2px;border-bottom:1px solid var(--line)}
  table.t.cardify tbody tr:last-child{border-bottom:none}
  table.t.cardify tr[hidden],table.t.cardify tr.pg-off{display:none!important}
  table.t.cardify td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:3px 0;border:none!important;text-align:right;white-space:normal;background:none!important;min-height:0}
  table.t.cardify td::before{content:attr(data-label);flex:none;max-width:48%;text-align:left;font-size:var(--fs-note);color:var(--label);font-weight:600}
  table.t.cardify td:not([data-label])::before,table.t.cardify td[data-label=""]::before{display:none}
  table.t.cardify td:first-child{display:block;text-align:left;font-size:16px;padding-bottom:6px}
  table.t.cardify td:first-child::before{display:none}
  table.t.cardify td.span{display:block;text-align:left}
  table.t.cardify td.act{justify-content:flex-end;padding-top:8px}
  table.t.cardify td.act::before{display:none}
  table.t.cardify td input,table.t.cardify td select{max-width:60%}
  table.t.cardify td.num{font-size:15px}
  table.t.cardify tfoot td{font-weight:700}
  table.t.cardify td{flex-wrap:wrap}
  table.t.cardify td:not(:first-child) .sub{flex-basis:100%;text-align:right;margin-top:0}
  .t .rowact{opacity:1}
  .t .sub{margin-top:2px}
  .tablewrap:not(:has(> table.cardify)){margin:0 -14px;padding:0;border-radius:0;border-left:none;border-right:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{
  :root{color-scheme:light}
  body{background:#fff;color:#1C1A19;font-size:12px;padding:0}
  .apphead,.side,.scrim,.tabbar,.fbar,.btn,.filters,.no-print,.app-foot,.ph-actions,.side-close,.crumbs{display:none!important}
  .wrap{padding:0;max-width:none}
  .sec,.fig,.panel,.headline > div,.kpi{box-shadow:none;border:1px solid #ddd}
  .t td,.t th{padding:4px 6px}
}