/* KATON 報價查詢系統 樣式。
   視覺語言比照 production.maxmold.com（膠料生產管理系統，Mick 2026-10-05）：
   同一組配色變數、系統字體、圓角卡片、膠囊標籤、分段按鈕、表格密度。
   不載入任何字體檔：Windows 用 Segoe UI＋微軟正黑體，Mac／iOS 用 PingFang，其餘用系統預設。
   內容安全政策不允許行內 style，所以畫面上的間距一律用類別。 */
:root{
  --bg:#f4f6f8; --surface:#fff; --surface2:#fafbfc; --border:#e3e7ec; --ink:#1a2230; --muted:#5b6472; --faint:#8a93a1;
  --accent:#1a6fb5; --accent-bg:#e8f1fa; --accent-ink:#fff;
  --good:#1a7f5a; --good-bg:#e5f4ee; --warn:#b5730f; --warn-bg:#fbf0dc; --crit:#c0392b; --crit-bg:#fbe9e7;
  --pm:#7b3fa0; --pm-bg:#f2e9f7; --track:#dfe4ea;
}
/* 深色跟系統設定。⚠ 下面兩塊變數必須逐字相同 */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#11151b; --surface:#191e26; --surface2:#1e242d; --border:#2b323d; --ink:#e8ecf2; --muted:#9aa4b2; --faint:#6b7482;
  --accent:#4aa3e0; --accent-bg:#122234; --accent-ink:#0b1722;
  --good:#4cc79a; --good-bg:#12312a; --warn:#e0a53f; --warn-bg:#332715; --crit:#f0776a; --crit-bg:#3a1c18;
  --pm:#c98fce; --pm-bg:#2a1f2d; --track:#39414d;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#11151b; --surface:#191e26; --surface2:#1e242d; --border:#2b323d; --ink:#e8ecf2; --muted:#9aa4b2; --faint:#6b7482;
  --accent:#4aa3e0; --accent-bg:#122234; --accent-ink:#0b1722;
  --good:#4cc79a; --good-bg:#12312a; --warn:#e0a53f; --warn-bg:#332715; --crit:#f0776a; --crit-bg:#3a1c18;
  --pm:#c98fce; --pm-bg:#2a1f2d; --track:#39414d;
  color-scheme:dark}

html{-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased;
     font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif}
button,input,select{font-family:inherit;font-size:13.5px;color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:16px 14px 60px}
/* 數字：同一套字體，只把數字改成等寬，直行才對得齊 */
.num{font-variant-numeric:tabular-nums}

/* ── 抬頭：logo ＋ 一條細線 ＋ 系統名稱與時鐘；右邊是登入者與開關 ── */
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 20px;flex-wrap:wrap;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.logo{height:30px;width:auto;display:block;flex:none}
.brandtext{border-left:2px solid var(--border);padding-left:14px;min-width:0}
.sys{font-size:18px;font-weight:700;letter-spacing:.5px;line-height:1.25}
.clock{margin-top:5px;font-size:14px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.5px}
.who{font-size:12px;color:var(--muted);display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.wholine{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.wholine b{color:var(--ink);font-size:13px;overflow-wrap:anywhere}
.whobtns{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:640px){
  .brand{gap:10px}.logo{height:24px}
  .brandtext{border-left:none;padding-left:0}
  .sys{font-size:16px}.clock{font-size:12.5px}
  .who{align-items:flex-start;width:100%}.wholine,.whobtns{justify-content:flex-start}
}

/* ── 膠囊標籤 ── */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;line-height:1.5}
.p-type{background:var(--accent-bg);color:var(--accent)}
.pill.ok{background:var(--good-bg);color:var(--good)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.info{background:var(--pm-bg);color:var(--pm)}
.tag{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:5px;background:var(--surface2);border:1px solid var(--border);color:var(--muted);white-space:nowrap;vertical-align:1px}

/* ── 開關（滑動式）：真正的 checkbox 疊在上面，鍵盤與讀屏軟體照常可用 ── */
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:12px;font-weight:600;color:var(--muted)}
.sw{position:relative;width:36px;height:20px;flex:none}
.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.sw .trk{position:absolute;inset:0;border-radius:999px;background:var(--track);transition:background .18s}
.sw i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .18s}
.sw input:checked~.trk{background:var(--accent)}
.sw input:checked~i{left:18px}
.sw input:focus-visible~.trk{outline:2px solid var(--accent);outline-offset:2px}

/* ── 按鈕：尺寸只有 lg／預設／xs 三種 ── */
.btn{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);border-radius:9px;padding:9px 20px;
     font-size:13px;font-weight:600;cursor:pointer;line-height:1.4;white-space:nowrap}
.btn.lg{padding:11px 26px;font-size:15px;width:100%}
.btn.xs{padding:4px 12px;font-size:12px;border-radius:7px}
.btn.ghost{background:transparent;color:var(--accent)}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.45;cursor:default;filter:none}
.linkbtn{border:0;background:none;color:var(--accent);cursor:pointer;padding:0;font-size:12.5px;font-weight:600}
.linkbtn:hover{text-decoration:underline}
.linkbtn:disabled{color:var(--faint);text-decoration:none;cursor:default}

/* ── 卡片 ── */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px}
h2{font-size:14.5px;font-weight:700;margin:0 0 12px;line-height:1.5}

/* ── 提示條 ── */
.banner{font-size:12.5px;padding:10px 13px;border-radius:9px;line-height:1.6}
.banner.warn{background:var(--warn-bg);color:var(--warn)}
.banner.err{background:var(--crit-bg);color:var(--crit)}
.banner b{font-weight:700}
.syncnote{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-bottom:14px}
.note{font-size:11.5px;color:var(--muted);line-height:1.7}
.note a,.login a{color:var(--accent);font-weight:600}

/* ── 登入與「無此權限」 ── */
.login{max-width:420px;margin:56px auto 0;padding:26px 28px;display:grid;gap:14px}
.login h1{font-size:22px;margin:0;line-height:1.3}
.login p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.login .note{font-size:11.5px}
.login .form{gap:14px}
.login .inline{display:flex;flex-wrap:wrap;gap:6px 18px}
input.code{font-size:22px;font-weight:700;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums;padding:9px}
@media(max-width:480px){.login{margin-top:24px;padding:22px 18px}}

/* ── 表單 ── */
.cols{display:grid;grid-template-columns:328px minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:860px){.cols{grid-template-columns:minmax(0,1fr)}}
.form{display:grid;gap:15px}
.field{display:grid;gap:6px;min-width:0}
.field>label,.lbl{font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.5}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
input[type=text],input[type=email],input[type=number],select{width:100%;min-width:0;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;line-height:1.4}
input[type=number]{font-variant-numeric:tabular-nums}
input:focus,select:focus{outline:none;border-color:var(--accent)}
input::placeholder{color:var(--faint)}
.hint{font-size:11.5px;color:var(--muted);line-height:1.6}
.hint .num{color:var(--ink);font-weight:600}
/* 分段按鈕：一整條、等寬、選中那格反白 */
.seg{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface2)}
.seg button{flex:1;appearance:none;border:0;border-right:1px solid var(--border);background:transparent;color:var(--muted);
            font-size:12.5px;font-weight:600;padding:8px 6px;cursor:pointer;white-space:nowrap;letter-spacing:.02em}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.seg button small{font-size:10.5px;font-weight:600;opacity:.8}

/* ── 結果 ── */
.result{display:grid;gap:14px;min-width:0}
.busy{opacity:.55;transition:opacity .15s}
.spec{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:2px 2px 0}
.spec h1{font-size:20px;margin:0;font-weight:700;line-height:1.35;font-variant-numeric:tabular-nums}
.spec .sub{color:var(--muted);font-size:12.5px}
/* 三欄價格：比照 production 的統計磚 */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:620px){.cards{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 15px 12px;display:grid;gap:2px;align-content:start}
.card.now{border-color:var(--accent);background:var(--accent-bg)}
.card .cap{font-size:11.5px;color:var(--muted);font-weight:600}
.card.now .cap{color:var(--accent)}
.card .qty{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.card .price{font-size:26px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.card .price small{font-size:12px;font-weight:600;color:var(--muted)}
.card .foot{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.card .save{display:inline-block;margin-top:3px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--good-bg);color:var(--good)}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
@media(max-width:860px){.grid2{grid-template-columns:minmax(0,1fr)}}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--muted);font-weight:600;font-size:11px;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--border);white-space:nowrap;line-height:1.5}
tr:last-child td{border-bottom:none}
td.r,th.r{text-align:right}
td.num{font-weight:600}
tr.cur td{background:var(--accent-bg)}
tr.cur td:first-child{border-radius:8px 0 0 8px} tr.cur td:last-child{border-radius:0 8px 8px 0}
/* 成本明細：一排小磚，標籤在上、數字在下（值那一行等高，數字才會落在同一條水平線上） */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tile{display:flex;flex-direction:column;gap:4px;min-width:0;border:1px solid var(--border);border-radius:8px;padding:8px 11px;background:var(--surface2)}
.tile.wide{grid-column:span 2}
.tile .l{font-size:11px;color:var(--muted);line-height:1.4}
.tile .v{font-size:15px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
@media(max-width:520px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.moldbox{display:flex;gap:16px;align-items:flex-start}
.moldbox svg{flex:none;width:84px;height:84px}
.moldbox .txt{min-width:0;display:grid;gap:4px;font-size:13px;line-height:1.6}
.big{font-size:18px;font-weight:700;line-height:1.35;font-variant-numeric:tabular-nums}
/* 相近的現有模具：編號清單，規格用強調色粗體 */
.near{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.neartitle{font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:8px}
.nearlist{margin:0;padding:0;list-style:none;counter-reset:near;display:grid;gap:6px}
.nearlist li{counter-increment:near;display:flex;align-items:baseline;gap:8px;font-size:13.5px;line-height:1.5}
.nearlist .nl{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 6px;min-width:0}
.nearlist li::before{content:counter(near) ".";min-width:16px;color:var(--faint);font-weight:700;font-variant-numeric:tabular-nums}
.nearlist b{color:var(--accent);font-weight:700}
.nearlist .dim{color:var(--ink)}
.tag.t-warn{background:var(--warn-bg);border-color:transparent;color:var(--warn)}
.stamp{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:11.5px;color:var(--muted);padding:2px 4px 0}
.stamp b{color:var(--ink);font-weight:600}

/* 取代行內 style 的小工具類別 */
.mt10{margin:10px 0 0}
.mt20{margin-top:20px}
@media (prefers-reduced-motion:no-preference){.card,.seg button{transition:background-color .12s,border-color .12s}}
@media(max-width:520px){th,td{padding-left:6px;padding-right:6px}.panel{padding:16px 14px}}