/*
 * 淺色是「戶外模式」。司機是在太陽底下、隔著一段距離、可能還戴著手套在看，
 * 所以文字與底色的對比一定要夠。下面這組值都調整過，
 * 主要文字與狀態標籤至少 4.5:1，主要按鈕的白字至少 4.5:1。
 * 深色模式本來就夠，維持原樣。
 */
:root{
  --ground:#EDEFF2; --surface:#FFFFFF; --surface-2:#F5F6F8; --line:#D6DAE0; --line-soft:#E6E9EE;
  --ink:#1A222C; --ink-2:#3F4954;
  /* 原本的 #7B8592 對白底只有 3.7:1，說明文字和空狀態都看不清楚 */
  --ink-3:#5F6975;
  --brand:#1E3F66; --brand-ink:#FFFFFF;
  /* 按鈕上的白字要 4.5:1，橘色必須壓深。原本的 #E0651A 只有 3.5:1 */
  --accent:#B24A08; --accent-ink:#FFFFFF; --accent-soft:#FBEBDF;
  --good:#146B39; --good-soft:#E3F1E8;
  --warn:#7A4E08; --warn-soft:#FBF0DC;
  --bad:#9E2823; --bad-soft:#F9E5E4;
  --bar:#2F6FB3; --bar-hover:#1E3F66;
  --shadow:0 1px 2px rgba(20,30,45,.06),0 4px 14px rgba(20,30,45,.06);
  --r:8px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#151A20; --surface:#1E242C; --surface-2:#252C35; --line:#39424E; --line-soft:#2C343E;
    --ink:#E8ECF1; --ink-2:#B4BCC7; --ink-3:#7F8995;
    --brand:#16304F; --brand-ink:#EEF3F9;
    --accent:#F0793A; --accent-ink:#1A1208; --accent-soft:#3A2617;
    --good:#4FBF7E; --good-soft:#1C3527;
    --warn:#E0A94B; --warn-soft:#3A2E17;
    --bad:#E36A64; --bad-soft:#3B2222;
    --bar:#5A93D6; --bar-hover:#9CC0EE;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --ground:#151A20; --surface:#1E242C; --surface-2:#252C35; --line:#39424E; --line-soft:#2C343E;
  --ink:#E8ECF1; --ink-2:#B4BCC7; --ink-3:#7F8995;
  --brand:#16304F; --brand-ink:#EEF3F9;
  --accent:#F0793A; --accent-ink:#1A1208; --accent-soft:#3A2617;
  --good:#4FBF7E; --good-soft:#1C3527;
  --warn:#E0A94B; --warn-soft:#3A2E17;
  --bad:#E36A64; --bad-soft:#3B2222;
  --bar:#5A93D6; --bar-hover:#9CC0EE;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35);
}
*{box-sizing:border-box}

/*
 * 字級。
 *
 * 全站的字都是 rem，也就是跟著 html 的字級走，所以只要改這一個地方，
 * 整個畫面連同按鈕、輸入框、表格會一起放大，不會只有字變大、框沒變大。
 *
 * 司機五十幾歲、在駕駛座上、光線又差，預設值對他們常常太小。
 * 這個設定存在各自的手機裡，一人一個，不會互相影響。
 */
:root{--k:1}
:root[data-fs="l"]{--k:1.15}
:root[data-fs="xl"]{--k:1.32}
html{font-size:calc(15px * var(--k))}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none !important}

/* ---- 頂部 ---- */
.top{background:var(--brand);color:var(--brand-ink);position:sticky;top:0;z-index:20}
.top-in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:10px}
.brand b{font-size:1.3333rem;font-weight:900;letter-spacing:.04em}
.brand span{font-size:0.8rem;opacity:.75;letter-spacing:.06em}
.whoami{position:relative;margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px;font-size:0.9333rem}
.whoami #me-name,.whoami .badge{white-space:nowrap}
.whoami .badge{background:rgba(255,255,255,.16);border-radius:999px;padding:3px 11px;font-size:0.8rem;font-weight:700}
/* 頂部列是深色底，按鈕改成半透明白框才看得清楚 */
.whoami .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);color:var(--brand-ink)}
.whoami .btn:hover{background:rgba(255,255,255,.24)}
.wrap{max-width:1180px;margin:0 auto;padding:14px 16px 60px}
.wrap.narrow{max-width:560px}

/* ---- 離線列 ---- */
.offbar{background:var(--warn-soft);color:var(--warn);text-align:center;padding:7px 12px;font-size:0.9rem;font-weight:700}

/* ---- 卡片與表單 ---- */
.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.card + .card{margin-top:14px}
h2{font-size:1.1333rem;margin:0 0 12px;font-weight:700;text-wrap:balance}
h3{font-size:0.9333rem;margin:0 0 8px;color:var(--ink-2);font-weight:700}
.eyebrow{font-size:0.7333rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:1fr 1fr}
@media (max-width:640px){
  .g2.stack{grid-template-columns:1fr}
  /*
   * 時間和數字這類只有幾個字的欄位，在窄螢幕維持兩欄。
   * 全部拉成一欄的話，一趟出車要捲過三個畫面，而司機一天要填八到十二次。
   */
  .g2.stack > .pair{grid-column:auto}
}
.pair{min-width:0}
label.f{display:flex;flex-direction:column;gap:5px;font-size:0.8667rem;color:var(--ink-2);font-weight:500}
label.f > span b{color:var(--bad);font-weight:700;margin-left:2px}
.in{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:9px 10px;font-size:1.0667rem;color:var(--ink);width:100%;min-height:42px}
/* 不要把 outline 關掉。關掉之後用鍵盤操作就看不出游標在哪一格，
   而原本用來代替的淡色陰影在淺色底上幾乎看不見。 */
.in:focus{border-color:var(--accent)}
.in:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.in.unit{padding-right:44px}
.unitwrap{position:relative}
.unitwrap em{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--ink-3);font-size:0.8667rem;pointer-events:none}
textarea.in{min-height:60px;resize:vertical}
/* color 一定要寫死。不寫的話按鈕會繼承所在容器的文字顏色，
   放在深色的頂部列上就會變成白底白字，整顆按鈕看不見。 */
.btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:6px;padding:9px 14px;cursor:pointer;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;min-height:40px}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.btn.primary:hover{filter:brightness(.95)}
.btn.danger{color:var(--bad)}
/* 手指要點得到。30px 對戴手套的手來說太小了 */
.btn.sm{padding:6px 12px;min-height:36px;font-size:0.8667rem}
.btn.big{width:100%;padding:13px;font-size:1.1333rem;justify-content:center}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.muted{color:var(--ink-3);font-size:0.8667rem}
.err{background:var(--bad-soft);color:var(--bad);border-radius:6px;padding:9px 12px;font-size:0.9333rem;font-weight:500;margin-bottom:12px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto}
.tabs button{border:0;background:transparent;padding:10px 14px;cursor:pointer;color:var(--ink-2);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:700}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;min-height:36px;cursor:pointer;font-size:0.8667rem}
.chip.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.segbtn{display:flex;gap:6px;flex-wrap:wrap}
.segbtn button{border:1px solid var(--line);background:var(--surface-2);border-radius:6px;padding:8px 12px;cursor:pointer;font-size:0.9333rem;min-height:40px}
.segbtn button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--surface);padding:10px 18px;border-radius:999px;font-weight:700;opacity:0;transition:.25s;pointer-events:none;z-index:60;max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}
.pill{display:inline-block;border-radius:4px;padding:1px 7px;font-size:0.8rem;font-weight:700;background:var(--surface-2);border:1px solid var(--line-soft);color:var(--ink-2);white-space:nowrap}
.pill.plate{letter-spacing:.06em;background:var(--ink);color:var(--surface);border-color:var(--ink)}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.pill.good{background:var(--good-soft);color:var(--good);border-color:transparent}
.pill.edited{background:var(--accent-soft);color:var(--accent);border-color:transparent}

/* ---- 數字磚 ---- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:760px){.tiles{grid-template-columns:1fr 1fr}}
.tile{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px;border-left:4px solid var(--bar)}
.tile .v{font-weight:700;font-size:2.1333rem;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}
.tile .v small{font-size:0.9333rem;font-weight:600;color:var(--ink-3);margin-left:4px}
.tile.accent{border-left-color:var(--accent)}
.totals{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.totals div{background:var(--surface-2);border-radius:6px;padding:10px 12px}
.totals .v{font-weight:700;font-size:1.6rem;line-height:1.15;font-variant-numeric:tabular-nums}
.totals .v small{font-size:0.8rem;color:var(--ink-3);margin-left:3px;font-weight:600}

/* ---- 提醒 ---- */
.alerts{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px;margin-top:14px;border-left:4px solid var(--warn)}
.alert{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:0.9333rem}
.alert:last-child{border-bottom:0}
.alert .k{flex:none;width:82px}
.alert .t{flex:1;min-width:0}
.alert .t small{display:block;color:var(--ink-3);font-size:0.8333rem}

/* ---- 表格 ---- */
.tblwrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:6px}
table{border-collapse:collapse;width:100%;font-size:0.9333rem}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line-soft);white-space:nowrap;vertical-align:middle}
th{background:var(--surface-2);font-size:0.8rem;color:var(--ink-2);letter-spacing:.04em;font-weight:700;position:sticky;top:0}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
tfoot td{font-weight:700;background:var(--surface-2);border-top:2px solid var(--line)}
.note{color:var(--ink-3);max-width:200px;overflow:hidden;text-overflow:ellipsis}
.empty{padding:28px;text-align:center;color:var(--ink-3)}
tr.flagged td:first-child{box-shadow:inset 3px 0 0 var(--warn)}

/* ---- 司機的紀錄列表 ---- */
.daygroup{margin-top:14px}
.daygroup h4{margin:0 0 6px;font-size:0.8667rem;color:var(--ink-2);display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.daygroup h4 span{font-weight:500;color:var(--ink-3)}
.trip{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;background:var(--surface-2);border-radius:6px;margin-bottom:6px}
.trip .t{font-size:1.0667rem;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.trip .t small{display:block;font-size:0.8rem;color:var(--ink-3);font-weight:500}
.trip .d{font-size:0.9333rem;min-width:0}
.trip .d small{display:block;color:var(--ink-3);font-size:0.8rem;overflow:hidden;text-overflow:ellipsis}
.trip .m{text-align:right;font-size:1.1333rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.trip .m small{display:block;font-size:0.8rem;color:var(--ink-3);font-weight:500}
.trip .m button{margin-top:4px}
.trip.pending{opacity:.7;border:1px dashed var(--warn)}

/* ---- 圖表 ---- */
.chart{position:relative}
.chart svg{width:100%;height:auto;display:block}
.chart .tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--surface);font-size:0.8rem;padding:6px 9px;border-radius:5px;transform:translate(-50%,-110%);white-space:nowrap;opacity:0;transition:opacity .1s}
.chart rect.bar{fill:var(--bar)}
.chart rect.bar:hover{fill:var(--bar-hover)}
.chart .hit{fill:transparent}
.chart text{fill:var(--ink-3);font-size:11px}
.chart line.grid{stroke:var(--line-soft)}
.chart line.axis{stroke:var(--line)}

/* ---- 後台版面：左邊功能選單，右邊內容 ---- */
.adminlayout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;align-items:start}
.mainarea{min-width:0}

.sidenav{
  position:sticky;top:70px;background:var(--surface);border-radius:var(--r);
  box-shadow:var(--shadow);padding:8px 6px;max-height:calc(100vh - 90px);overflow-y:auto;
}
.sidenav .grp{
  font-size:0.7333rem;letter-spacing:.1em;color:var(--ink-3);font-weight:700;
  padding:10px 10px 4px;
}
.sidenav .grp:first-child{padding-top:4px}
.sidenav button{
  display:flex;justify-content:space-between;align-items:center;gap:6px;
  width:100%;text-align:left;border:0;background:transparent;
  padding:8px 10px;border-radius:6px;cursor:pointer;font-size:0.9333rem;color:var(--ink-2);
}
.sidenav button:hover{background:var(--surface-2);color:var(--ink)}
.sidenav button.on{background:var(--accent-soft);color:var(--accent);font-weight:700}
.sidenav .dot{
  flex:none;min-width:18px;height:18px;border-radius:9px;background:var(--warn-soft);
  color:var(--warn);font-size:0.7333rem;font-weight:700;display:inline-flex;
  align-items:center;justify-content:center;padding:0 5px;
}
.navselect{display:none}

/* 窄螢幕改用下拉選單。十五個項目排成一條橫的捲軸，看不到的等於不存在。 */
@media (max-width:900px){
  .adminlayout{grid-template-columns:1fr;gap:0}
  .sidenav{display:none}
  .navselect{
    display:block;position:sticky;top:0;z-index:18;
    background:var(--ground);padding:8px 0 10px;margin-bottom:4px;
  }
  .navselect .in{font-size:1.0667rem;font-weight:700;min-height:46px}
  /* 手機上把最上面那條標題列改成不固定，讓功能選單留在視線內 */
  .top{position:static}
}

/* ---- 篩選 ---- */
.filters{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end}
@media (max-width:900px){.filters{grid-template-columns:repeat(2,1fr)}}
.filters .in{font-size:0.9333rem;min-height:40px}
.exportbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
@media (max-width:600px){.exportbar .btn{flex:1 1 30%;justify-content:center}.exportbar .eyebrow{flex-basis:100%}}

/* ---- 登入 ---- */
.authwrap{max-width:400px;margin:8vh auto;padding:0 20px}
.authwrap .logo{text-align:center;margin-bottom:22px}
.authwrap .logo b{font-size:1.7333rem;font-weight:900;letter-spacing:.05em;display:block}
.authwrap .logo span{color:var(--ink-3);font-size:0.8667rem}

/* ---- 對話框 ---- */
.mask{position:fixed;inset:0;background:rgba(12,18,26,.55);z-index:40;display:flex;align-items:flex-start;justify-content:center;padding:20px;overflow:auto}
.modal{background:var(--surface);border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.3);padding:20px;width:100%;max-width:560px;margin:auto}
.hist{border-top:1px solid var(--line-soft);margin-top:14px;padding-top:12px}
.hist ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:190px;overflow:auto}
.hist li{font-size:0.8667rem;color:var(--ink-2);border-left:2px solid var(--line);padding-left:10px}
.hist li b{display:block;color:var(--ink);font-size:0.8667rem}
.hist li span{display:block;color:var(--ink-3);font-size:0.8rem}

.perm td:first-child{font-weight:700}
.perm .y{color:var(--good);font-weight:700}
.perm .n{color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){*{transition:none !important}}


/* ========== 出車流程 ========== */

.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}

/*
 * 狀態按鈕。司機戴著手套、在晃動的車上按，所以每一顆都要夠大，
 * 而且要看得出哪些按過了。最小 64px 高是為了手指按得準。
 */
.flowgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.flowbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:64px;padding:8px 4px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink)}
.flowbtn b{font-size:1rem;font-weight:700}
.flowbtn span{font-size:0.8rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.flowbtn:active{transform:scale(.97)}
.flowbtn.done{background:var(--good-soft);border-color:transparent}
.flowbtn.done span{color:var(--good);font-weight:700}
.flowbtn.off{opacity:.45;cursor:not-allowed}

/* 時效倒數 */
.freshbar{margin-top:10px}
.bar{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;border-radius:4px;background:var(--ink-3);transition:width .4s}
.bar i.good{background:var(--good)}
.bar i.warn{background:var(--warn)}
.bar i.bad{background:var(--bad)}

/* 今天的派工 */
.joblet{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--line-soft)}
.joblet:last-child{border-bottom:0}
.joblet b{display:block;font-size:1rem}
.joblet small{display:block;margin-top:2px}

/* ========== 工地簽收 ========== */

/*
 * 簽名板。touch-action 一定要關掉，不然在手機上一畫就變成捲頁面，
 * 根本簽不出東西來。
 */
.sigpad{width:100%;height:180px;background:#fff;border:1px dashed var(--line);
  border-radius:var(--r);touch-action:none;cursor:crosshair;display:block}
.podthumb{max-width:220px;border-radius:var(--r);border:1px solid var(--line);margin-top:8px;display:block}
.podthumb.sm{max-width:64px;max-height:48px;object-fit:cover;margin:0}

/* 排趟次時勾選司機與車輛 */
.checkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;
  border:1px solid var(--line);border-radius:var(--r);padding:10px;max-height:180px;overflow:auto}
.checkgrid label{display:flex;align-items:center;gap:6px;font-size:0.9333rem;cursor:pointer}

@media (max-width:760px){
  .flowgrid{grid-template-columns:repeat(2,1fr)}
  .flowbtn{min-height:72px}
  .joblet{flex-direction:column;align-items:flex-start}
}


/* ========== 顯示設定 ========== */

/*
 * 深色模式原本只跟著手機的系統設定走，司機自己不能選。
 * 但是很多司機的手機一輩子都是預設的淺色，晚上在駕駛座上開這個系統
 * 等於拿一片白光照自己的臉，看完再看路會有幾秒什麼都看不到。
 * 所以要讓他自己按，而且選擇要記在他自己的手機裡。
 */

/*
 * 面板貼齊「上方那一列的右緣」，不是貼齊按鈕。
 * 貼按鈕的話，按鈕在手機上位於畫面中間偏右，280px 的面板往左展開會
 * 整個掉出畫面外，左邊那一排「標準」「自動」按不到。
 */
.gear{position:static}
.panel{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:14px;width:min(280px,calc(100vw - 24px));text-align:left}
.panel h3{margin:0 0 10px;font-size:0.9333rem}
.panel .grp{margin-bottom:12px}
.panel .grp:last-child{margin-bottom:0}
.panel .lbl{font-size:0.8rem;color:var(--ink-3);margin-bottom:6px;font-weight:600}
.panel .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.panel .opts button{
  border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--ink);
  padding:9px 4px;cursor:pointer;font-size:0.8667rem;min-height:40px}
.panel .opts button.on{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:700}
.panel .note{font-size:0.7867rem;color:var(--ink-3);margin:10px 0 0;line-height:1.45}

/* 字級預覽用的三個大小，不跟著 --k 走，才看得出差別 */
.panel .opts button[data-fs="m"]{font-size:0.8rem}
.panel .opts button[data-fs="l"]{font-size:0.9333rem}
.panel .opts button[data-fs="xl"]{font-size:1.0667rem}

/*
 * 夜間模式。比一般深色再暗一階，而且把橘色的彩度壓下來。
 * 在全暗的車內，一般深色模式的亮度還是偏高。
 */
:root[data-theme="night"]{
  --ground:#0B0E12; --surface:#131820; --surface-2:#1A2029; --line:#2B3440; --line-soft:#212932;
  --ink:#D7DDE5; --ink-2:#9BA5B2; --ink-3:#6B7683;
  --brand:#101C2C; --brand-ink:#C9D6E5;
  --accent:#C7692F; --accent-ink:#0B0E12; --accent-soft:#2A1B10;
  --good:#3E9E68; --good-soft:#12251A;
  --warn:#B8883A; --warn-soft:#2A2110;
  --bad:#C2554F; --bad-soft:#2B1919;
  --bar:#3F6E9E; --bar-hover:#6F9BC8;
  --shadow:0 1px 2px rgba(0,0,0,.6),0 4px 14px rgba(0,0,0,.5);
}

@media print{
  @page{size:A4 landscape;margin:12mm}
  body{background:#fff;color:#000;font-size:11px}
  .top,.offbar,.filters,.chips,.exportbar,.tabs,.alerts,.toast,.mask,.del-col,.chart .tip{display:none !important}
  .print-head{display:block !important;margin-bottom:10px;border-bottom:2px solid #000;padding-bottom:6px}
  .print-head b{font-size:19px;display:block}
  .print-head span{font-size:11px;color:#444}
  .wrap{max-width:none;padding:0}
  .card,.tile{box-shadow:none;border:1px solid #bbb;break-inside:avoid;padding:9px 11px}
  .tblwrap{max-height:none !important;overflow:visible !important}
  th{background:#eee;color:#000;position:static}
  td,th{padding:3px 5px;border-bottom:1px solid #ccc}
  tr{break-inside:avoid}
  .pill.plate{background:#000;color:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .chart rect.bar{fill:#2F6FB3;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  p.muted{display:none}
}
.print-head{display:none}