/* 金碳洁內部系統 — 樸素、看得清楚、手機也能用。
   現場作業員用手機、業務用電腦,所以字要大、按鈕要好按。 */
:root{
  --ink:#1a1a1a; --muted:#6b6b6b; --line:#d8d8d8; --bg:#f5f5f3; --card:#fff;
  --accent:#1a4d3a; --accent-2:#2a6b52; --warn:#b8542a; --err:#b3261e; --ok:#1a4d3a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.6 "Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--accent)}

.topbar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--accent); color:#fff; padding:12px 20px;
}
.topbar .brand{color:#fff; font-weight:700; font-size:18px; text-decoration:none}
.topbar nav{margin-left:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.topbar nav a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4)}
.topbar .who{color:rgba(255,255,255,.85); font-size:14px}
.topbar .out{border:0; background:rgba(255,255,255,.15); padding:4px 10px; border-radius:4px}

main{max-width:1000px; margin:0 auto; padding:24px 20px 60px}
main.center{max-width:420px; padding-top:8vh}
.page-title{font-size:24px; margin-bottom:18px}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:22px; margin-bottom:20px;
}
.card h2{font-size:18px; margin-bottom:14px}
.card.login h1{font-size:20px; margin-bottom:18px; text-align:center}

label{display:block; margin-bottom:14px; font-size:14px; color:var(--muted)}
input[type=text],input[type=password],select{
  display:block; width:100%; margin-top:5px; padding:11px 12px;
  border:1px solid var(--line); border-radius:6px; font-size:16px; background:#fff; color:var(--ink);
}
input:focus,select:focus{outline:2px solid var(--accent-2); outline-offset:1px}

button{
  font:inherit; font-weight:600; cursor:pointer;
  background:var(--accent); color:#fff; border:0; border-radius:6px; padding:11px 18px;
}
button:hover{background:var(--accent-2)}
.ops button{background:#efefec; color:var(--ink); border:1px solid var(--line); padding:6px 10px; font-size:14px; font-weight:400}
.ops button:hover{background:#e4e4e0}
form.inline{display:flex; gap:6px; flex-wrap:wrap}

.hint{color:var(--muted); font-size:13px; margin-top:12px}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px}

.flash{padding:12px 14px; border-radius:6px; margin-bottom:16px; font-size:15px; line-height:1.7}
.flash.ok{background:#e8f2ec; border:1px solid #bcd9c9; color:var(--ok)}
.flash.err{background:#fbeae9; border:1px solid #f0c4c1; color:var(--err)}
.flash.warn{background:#fdf1e7; border:1px solid #f0d5bd; color:var(--warn)}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.card.work{display:block; text-decoration:none; color:inherit; position:relative; transition:.15s}
.card.work:hover{border-color:var(--accent); transform:translateY(-2px)}
.card.work .tag{
  display:inline-block; background:var(--accent); color:#fff; font-weight:700;
  width:28px; height:28px; line-height:28px; text-align:center; border-radius:6px; margin-bottom:10px;
}
.card.work h2{margin:0 0 8px}
.card.work p{color:var(--muted); font-size:14px}
.card.work .state{display:inline-block; margin-top:14px; font-size:14px; color:var(--muted)}
.card.work .state.go{color:var(--accent); font-weight:600}
.card.work.soon{opacity:.55}
.card.work.soon:hover{transform:none; border-color:var(--line)}

.grid{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line);
      border-radius:8px; overflow:hidden; margin-bottom:24px; font-size:15px}
.grid th,.grid td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle}
.grid th{background:#efefec; font-size:14px}
.grid tr:last-child td{border-bottom:0}
.grid tr.off{color:var(--muted); background:#faf9f7}

.flow{margin:12px 0 12px 20px}
.flow li{margin-bottom:6px}
.mgr-note{margin-top:22px; font-size:14px; color:var(--muted)}

@media (max-width:640px){
  main{padding:16px 14px 50px}
  .grid{display:block; overflow-x:auto; white-space:nowrap}
  .topbar{padding:10px 14px; gap:10px}
}

/* ── 型號主檔 ───────────────────────────────────────────── */
.lead{color:var(--muted); font-size:14px; margin-bottom:16px}
.hi{background:#e8f2ec; padding:1px 5px; border-radius:3px; color:var(--accent); font-weight:600}
.big{font-size:16px; font-weight:600}

.toolbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:16px}
.toolbar .right{margin-left:auto; display:flex; gap:10px; align-items:center}
.btn-link{color:var(--accent); text-decoration:none; border:1px solid var(--line);
          background:#fff; padding:8px 12px; border-radius:6px; font-size:14px}
.btn-link:hover{border-color:var(--accent)}
.btn-solid{background:var(--accent); color:#fff; text-decoration:none;
           padding:9px 14px; border-radius:6px; font-size:14px; font-weight:600}
.btn-solid:hover{background:var(--accent-2)}

.row{display:flex; gap:14px; flex-wrap:wrap}
.row label{flex:1; min-width:120px}

.preview{background:#f7f6f2; border:1px dashed var(--line); border-radius:8px;
         padding:16px; margin-bottom:20px; text-align:center}
.preview .lbl{display:block; font-size:12px; color:var(--muted); margin-bottom:6px}
.preview .code{font-size:26px; letter-spacing:2px; color:var(--muted)}
.preview .code.done{color:var(--accent); font-weight:700}
.preview .rule{display:block; font-size:12px; color:var(--muted); margin-top:8px}

.grid td form.inline input[type=text]{padding:6px 8px; font-size:14px; display:inline-block;
                                      width:auto; margin-top:0}
.ok-tag{margin-left:8px; font-size:12px; color:#fff; background:var(--accent);
        padding:1px 7px; border-radius:10px}