/* assets/style.css — v1.3 */

/* ===== 變數與全域 ===== */
:root{
  --bg:#0f1320; --card:#151a2c; --soft:#1b2136;
  --text:#eaf1ff; --muted:#a7b7cc; --accent:#6aa8ff; --accent2:#9dd4ff;
  --good:#22c55e; --bad:#ef4444; --warn:#f59e0b;
  --border:#26304a; --chip:#1d2741;
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:"Noto Sans TC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif
}

/* ===== 頁首與版面 ===== */
.site-header{padding:20px 16px 8px;max-width:980px;margin:0 auto}
h1{margin:0 0 6px;font-size:1.6rem}
.subtitle{margin:0;color:var(--muted);font-size:.95rem}

main{max-width:980px;margin:0 auto;padding:12px 16px 80px}
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:16px 16px 12px;margin:12px 0;
  box-shadow:0 6px 24px rgba(0,0,0,.25)
}
.card h2{margin:.2rem 0 1rem;font-size:1.15rem;color:#fff}
.grid{display:grid;gap:12px}
@media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}

/* ===== 欄位樣式 ===== */
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.field > span, .field legend{font-weight:600}
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field textarea{
  background:var(--soft);border:1px solid var(--border);
  color:var(--text);border-radius:10px;padding:10px 12px;outline:none
}
.field textarea{resize:vertical}
.help{color:var(--muted);font-size:.85rem}

/* 選項群 */
.radios label, .chips label{
  display:inline-flex;align-items:center;gap:6px;margin:6px 8px 0 0;cursor:pointer
}
.radios input, .chips input{transform:scale(1.1)}
.chips label{background:var(--chip);border:1px solid var(--border);padding:8px 10px;border-radius:999px}

/* 滑桿 */
.slider input[type=range]{width:100%}
.slider output{margin-left:8px;background:var(--soft);padding:2px 8px;border-radius:8px;border:1px solid var(--border)}

/* 動作區 */
.form-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin:18px 0}
.btn{
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  border:0;color:#0b1220;padding:12px 18px;border-radius:12px;font-weight:700;cursor:pointer
}
.btn:disabled{opacity:.5;cursor:not-allowed}
.tos{color:var(--muted);font-size:.85rem;margin:0}

/* 結果區塊 */
.result h2{margin-top:0}
.result .ok{color:var(--good)}
.result .err{
  color:#fff;background:rgba(239,68,68,.12);
  border:1px solid var(--bad);padding:10px;border-radius:10px
}
.result pre{
  background:#0a1020;border:1px solid var(--border);
  padding:10px;border-radius:10px;overflow:auto
}

/* 蜜罐（隱藏） */
.hp{position:absolute;left:-9999px;opacity:0}

/* ===== 驗證提示 ===== */
.field.invalid, fieldset.invalid{outline:2px solid var(--bad);border-radius:10px}
.err-msg{color:var(--bad);font-size:.9rem;margin-top:6px}

/* ===== 送出明細表 ===== */
.kv-table{width:100%;border-collapse:collapse;margin-top:8px}
.kv-table th,.kv-table td{border:1px solid var(--border);padding:8px 10px;vertical-align:top}
.kv-table th{width:220px;text-align:left;background:var(--soft);color:#eaf1ff;font-weight:600}
.kv-table tr:nth-child(even) td{background:#10172a}
.kv-table code{background:#0a1020;border:1px solid var(--border);padding:2px 6px;border-radius:6px}

/* ===== 列印優化（只印明細） ===== */
@media print{
  header, form, .tos{display:none !important}
  .card.result{border:none;box-shadow:none}
  body{background:#fff;color:#000}
  .kv-table th,.kv-table td{border:1px solid #ccc}
}

/* --- 新增：切換時隱藏區塊 --- */
.hidden{display:none !important}