/* ==========================================================================
   591 拋轉雲端版 — 樣式整套照搬本機「591 本機中控台」（jifu-591-run/panel.html）
   淺色底＋深色字、高對比。只換資料層與文案，版面與視覺不動。
   ========================================================================== */
:root{
  --bg:#f1ece3; --panel:#ffffff; --panel2:#faf7f1; --line:#e2dace; --line2:#cfc3b2;
  --tx:#13293d; --tx2:#4a5a6b; --tx3:#63717f;
  --accent:#1b4f7a; --accent-dk:#1b4f7a;
  --ok:#256a4c; --warn:#855a0b; --err:#b31212; --gold:#c9a24b;
  --rowA:#fbf3df; --row:#ffffff; --row2:#fdfbf7; --rowsel:#e7eef5;
  --mono:"Cascadia Mono","Consolas","JetBrains Mono","Courier New",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font-family:"Microsoft JhengHei UI","Microsoft JhengHei","Noto Sans TC","PingFang TC",
              "Segoe UI",system-ui,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:14.5px;color:inherit}
h4{margin:0;font-size:13.5px;font-weight:700;color:var(--tx2);letter-spacing:.5px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}

/* ── 頂列 ───────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;
  padding:11px 16px;background:var(--tx);
  border-bottom:3px solid var(--gold);
  box-shadow:0 1px 8px rgba(19,41,61,.18);
}
.brand{font-weight:800;font-size:16.5px;letter-spacing:.5px;color:#f4efe6}
.brand .sub{font-weight:400;font-size:13px;color:#a9bdd0;margin-left:8px;letter-spacing:0}
.lamps{margin-left:auto;display:flex;gap:14px;align-items:center;font-size:13.5px;color:#c3d2df}
.lamp-item{display:flex;align-items:center;gap:5px;white-space:nowrap}
.lamp{width:9px;height:9px;border-radius:50%;background:#cfc3b2;box-shadow:0 0 0 1px #cfc3b2 inset;display:inline-block}
.lamp.on{background:var(--ok);box-shadow:0 0 6px rgba(63,185,80,.8)}
.lamp.off{background:var(--err);box-shadow:0 0 6px rgba(248,81,73,.55)}
.lamp.wait{background:var(--warn);box-shadow:0 0 6px rgba(210,153,34,.6)}

/* ── 版面 ───────────────────────────────────────────────────────────── */
main{padding:12px 14px 40px;display:flex;flex-direction:column;gap:12px;max-width:1200px;margin:0 auto;width:100%}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px}
.card>header{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  border-bottom:1px solid var(--line);background:var(--panel2);border-radius:8px 8px 0 0;
}
.card>header h3{margin:0;font-size:13px;font-weight:700;letter-spacing:.5px}
.card>header .hint{font-size:13px;color:var(--tx3)}
.card>.body{padding:10px 12px}
.spacer{margin-left:auto}

/* ── 按鈕 ───────────────────────────────────────────────────────────── */
button{
  background:#ffffff;border:1px solid var(--line2);color:var(--tx);
  padding:5px 11px;border-radius:5px;cursor:pointer;transition:.12s;white-space:nowrap;
}
button:hover:not(:disabled){background:#f0eade;border-color:#cfc3b2}
button:active:not(:disabled){transform:translateY(1px)}
/* 停用狀態：不用 opacity（會把字壓到看不見），改用實色淺底＋灰字，字仍讀得到 */
button:disabled{background:#e8e2d6;border-color:#d8d0c0;color:#645d50;cursor:not-allowed}
/* 深色底按鈕的字一律象牙色，不可繼承 --tx（深藍），否則深字壓深底＝看不到 */
button.primary,button.go,button.danger{color:#f4efe6}
button.primary:disabled,button.go:disabled,button.danger:disabled{background:#e8e2d6;border-color:#d8d0c0;color:#645d50}
button.primary{background:var(--accent-dk);border-color:#1b4f7a;font-weight:700}
button.primary:hover:not(:disabled){background:#16405f;border-color:#16405f}
button.go{background:#256a4c;border-color:#256a4c;font-weight:700}
button.go:hover:not(:disabled){background:#1c5540;border-color:#1c5540}
button.danger{background:#b31212;border-color:#b31212;font-weight:700}
button.danger:hover:not(:disabled){background:#8f0f0f;border-color:#8f0f0f}
button.mini{padding:3px 8px;font-size:13.5px}
.tip{font-size:13px;color:var(--tx3)}
.tip b{color:var(--tx2)}

/* ── 清單工具列 ──────────────────────────────────────────────────────── */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--line)}
.toolbar .grp{display:flex;align-items:center;gap:7px}
.toolbar .sep{width:1px;height:18px;background:var(--line2)}
.toolbar label{display:flex;align-items:center;gap:5px;font-size:13.5px;color:var(--tx2);cursor:pointer;white-space:nowrap}
.toolbar input[type=number]{width:52px;background:#ffffff;border:1px solid var(--line2);border-radius:4px;padding:4px 6px}
.toolbar input[type=search],.toolbar input[type=text]{
  background:#ffffff;border:1px solid var(--line2);border-radius:4px;padding:5px 8px;width:min(280px,60vw);
}
.toolbar input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(77,163,255,.18)}
.count{font-size:13.5px;color:var(--tx2);white-space:nowrap}
.count b{color:var(--tx)}

/* ── 表格（雙軸 sticky：header 凍頂 + 案名欄凍左） ───────────────────── */
/* 🔴 寬表雙軸凍結：只寫 overflow-x 會讓 sticky top 完全失效，一定要 overflow:auto + max-height */
.tbl-wrap{overflow:auto;max-height:44vh;min-height:150px;border-radius:0 0 8px 8px}
table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:14px}
thead th{
  position:sticky;top:0;z-index:3;background:#f0eade;color:var(--tx2);
  font-weight:700;text-align:left;white-space:nowrap;
  padding:6px 8px;border-bottom:1px solid var(--line2);
}
tbody td{padding:5px 8px;border-bottom:1px solid #ece5d9;white-space:nowrap;vertical-align:middle}
tbody tr{background:var(--row)}
tbody tr:nth-child(even){background:var(--row2)}
tbody tr.sel{background:var(--rowsel)}
tbody tr:hover{background:#f7f2e8}
td.sticky,th.sticky{position:sticky;background:inherit}
th.sticky{background:#f0eade;z-index:5}
/* 雲端版沒有勾選欄 → 案名欄直接貼齊最左 */
td.c-name,th.c-name{left:0;max-width:280px;min-width:180px;overflow:hidden;text-overflow:ellipsis;z-index:4}
td.c-name{font-weight:600}
th.c-name{z-index:6}
.empty{padding:26px;text-align:center;color:var(--tx3);font-size:13.5px}

/* 徽章 */
.badge{display:inline-block;padding:1px 6px;border-radius:9px;font-size:13.5px;font-weight:700;line-height:17px}
.b-red{background:rgba(248,81,73,.16);color:#b31212;border:1px solid rgba(248,81,73,.35)}
.b-black{background:rgba(110,124,139,.15);color:var(--tx3);border:1px solid #cfc3b2}
.b-A{background:rgba(227,179,65,.18);color:var(--gold);border:1px solid rgba(227,179,65,.45)}
.b-B{background:rgba(77,163,255,.12);color:#1b4f7a;border:1px solid rgba(77,163,255,.3)}
.b-dash{color:var(--tx3)}
.b-ok{background:rgba(63,185,80,.15);color:#256a4c;border:1px solid rgba(63,185,80,.35)}
.b-wait{background:rgba(210,153,34,.14);color:var(--warn);border:1px solid rgba(210,153,34,.35)}
.b-open{background:rgba(248,81,73,.14);color:#b31212;border:1px solid rgba(248,81,73,.35)}
.dim{color:var(--tx3)}
.warnx{color:var(--warn)}

/* ── 進度／佇列（沿用本機執行區視覺） ─────────────────────────────────── */
.progress{position:relative;height:20px;background:#ffffff;border:1px solid var(--line2);border-radius:5px;overflow:hidden;margin-bottom:9px}
.progress .bar{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#e3d3ab,#c9a24b);transition:width .35s}
.progress .txt{position:relative;z-index:1;display:block;text-align:center;font-size:13px;line-height:18px;color:#13293d;font-weight:600}
.queue{display:flex;gap:6px;flex-wrap:wrap;min-height:22px}
.q{padding:2px 8px;border-radius:11px;font-size:13px;border:1px solid var(--line2);background:#faf7f1;color:var(--tx2)}
.q.doing{border-color:var(--accent);color:#1b4f7a;background:rgba(77,163,255,.1);font-weight:700}
.q.done{border-color:rgba(63,185,80,.5);color:#256a4c;background:rgba(63,185,80,.1)}
.q.fail{border-color:rgba(248,81,73,.5);color:#b31212;background:rgba(248,81,73,.1)}
.q.abort{border-color:var(--line2);color:var(--tx3);text-decoration:line-through}

/* ── 警示盒（紅色致命／黃色等待，照搬本機閘門卡樣式） ─────────────────── */
.gate-desc{font-size:13.5px;color:var(--tx2);margin-bottom:10px;padding:7px 10px;background:#faf7f1;border-left:3px solid var(--line2);border-radius:0 4px 4px 0}
.blocked{
  margin-top:10px;padding:9px 12px;border-radius:6px;font-size:13px;font-weight:700;
  background:rgba(248,81,73,.16);border:1px solid rgba(248,81,73,.5);color:#b31212;
}
.warnbox{
  margin-top:10px;padding:9px 12px;border-radius:6px;font-size:13px;font-weight:700;
  background:rgba(210,153,34,.14);border:1px solid #d9bf7a;color:#855a0b;
}
.fatal-msg{font-size:13.5px;color:#b31212;font-weight:700;word-break:break-all;
  background:rgba(248,81,73,.1);border:1px solid rgba(248,81,73,.35);border-radius:6px;padding:10px 12px}
.foot-note{margin-left:auto;font-size:13px;color:var(--tx3);text-align:right}
.blink{animation:bk 1s steps(2,start) infinite}
@keyframes bk{to{opacity:.35}}

/* ══════════════════════════════════════════════════════════════════════
   以下為雲端版新增區塊（沿用上面同一套 token 與元件視覺）
   ══════════════════════════════════════════════════════════════════════ */
.hidden{display:none !important}

/* 頂列右側導覽（本機版沒有換頁，雲端補上，樣式跟燈號列同一排） */
.topbar nav{display:flex;align-items:center;gap:8px}
.topbar nav a{
  color:#c3d2df;font-size:13.5px;border:1px solid rgba(244,239,230,.35);
  border-radius:5px;padding:4px 10px;white-space:nowrap;
}
.topbar nav a:hover{color:var(--gold);border-color:var(--gold);text-decoration:none}
.topbar nav button{
  background:transparent;border:1px solid rgba(244,239,230,.35);color:#c3d2df;
  padding:4px 10px;border-radius:5px;font-size:13.5px;
}
.topbar nav button:hover:not(:disabled){background:rgba(244,239,230,.1);border-color:var(--gold);color:var(--gold)}

/* 登入／未開通置中卡（照搬本機彈出卡 modal 的視覺） */
.center-wrap{display:flex;justify-content:center;padding:12vh 16px 40px}
.center-card{
  width:min(460px,96vw);background:#ffffff;
  border:1px solid #cfc3b2;border-radius:10px;box-shadow:0 18px 50px rgba(26,29,33,.22);
  overflow:hidden;
}
.center-card .mh{padding:11px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.center-card .mh .t{font-size:16px;font-weight:800;letter-spacing:.5px}
.center-card.gate1 .mh{background:linear-gradient(90deg,rgba(77,163,255,.18),transparent)}
.center-card.gatef .mh{background:linear-gradient(90deg,rgba(248,81,73,.3),transparent)}
.center-card .mb{padding:14px 16px}
.center-card .mb p{margin:0 0 14px;color:var(--tx2);font-size:13.5px}
.center-card .mb button{width:100%;padding:9px 20px;font-size:14px}

/* 訊息列（成功綠／失敗紅，用本機的警示盒配色） */
.msg{padding:9px 12px;border-radius:6px;font-size:13.5px;font-weight:700;margin:0}
.msg.ok{background:rgba(63,185,80,.12);border:1px solid rgba(63,185,80,.45);color:var(--ok)}
.msg.err{background:rgba(248,81,73,.16);border:1px solid rgba(248,81,73,.5);color:var(--err)}

/* 任務卡（沿用本機 pane／閘門卡視覺：一般＝米白面板、排隊＝黃、卡住＝紅） */
.tasks{display:flex;flex-direction:column;gap:8px}
.task{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:8px 11px}
.task.queued{border-color:#d9bf7a;background:#fffdf4}
.task.running{border-color:rgba(77,163,255,.45)}
.task.stuck{border-color:rgba(248,81,73,.5);background:#ffffff}
.task .stuck-head{
  margin:-8px -11px 8px;padding:8px 11px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(248,81,73,.3),transparent);
  font-weight:800;letter-spacing:.5px;
}
.task-head{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.task-title{font-weight:700}
.task-meta{font-size:13px;color:var(--tx3);white-space:nowrap}
.task .task-prog{margin-top:6px;font-size:13.5px;color:var(--accent);font-weight:600}
.task .task-link{margin-top:6px;font-size:13.5px}
.task .error-text{margin-top:6px}
.task details{margin-top:8px}
.task details summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--accent)}
.task pre.report{
  font-family:var(--mono);font-size:13.5px;line-height:1.55;
  background:#faf7f1;border:1px solid var(--line);border-radius:6px;padding:8px 10px;
  white-space:pre-wrap;word-break:break-all;max-height:40vh;overflow:auto;margin:8px 0 0;
}
.task img.shot{max-width:100%;border:1px solid var(--line2);border-radius:6px;margin-top:8px;display:block}

/* 我的設定表單（沿用本機 cred 輸入框視覺） */
.field{display:block;margin-bottom:14px}
.field .name{display:block;font-weight:700;font-size:13.5px;color:var(--tx2);margin-bottom:5px;letter-spacing:.5px}
.field input[type=text],.field input[type=tel]{
  width:100%;max-width:420px;background:#ffffff;border:1px solid var(--line2);
  border-radius:4px;padding:6px 9px;
}
.field textarea{
  width:100%;min-height:220px;font:14px/1.7 var(--mono);
  padding:10px 12px;border:1px solid var(--line2);border-radius:6px;
  background:#fff;color:var(--tx);resize:vertical;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(77,163,255,.18)}
.field input[type=file]{font-size:13.5px}
.cover-preview{max-width:100%;max-height:300px;border:1px solid var(--line2);border-radius:6px;display:block;margin-top:8px}

@media (max-width:640px){
  .topbar{flex-wrap:wrap;gap:8px}
  .lamps{margin-left:0;width:100%;justify-content:flex-end}
  main{padding:10px 8px 40px}
}