/* Euclid 內部工具（登入頁 / 管理後台）— 與遊戲同一套紙面語彙，但更緊湊 */
:root {
  --paper:#faf7f1; --card:#fffdf8; --ink:#2b2823; --ink-soft:#6b6459;
  --line:#e4dcc9; --accent:#c05b3c; --gold:#c9a227; --green:#4a7c59;
  --serif:Georgia,'Songti TC','Hiragino Mincho ProN',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang TC','Noto Sans TC',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--sans); background:var(--paper); color:var(--ink); line-height:1.6; font-size:14px; }
button, input, select, textarea { font-family:inherit; font-size:14px; }
a { color:var(--accent); }

/* ---- 登入 ---- */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.login-card {
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:34px 30px; width:100%; max-width:340px;
  box-shadow:0 8px 30px rgba(90,78,50,.09);
}
.login-card h1 { font-family:var(--serif); font-size:30px; color:var(--accent); text-align:center; font-weight:600; }
.login-card .sub { text-align:center; color:var(--ink-soft); font-size:13px; margin-bottom:22px; }
.login-card label { display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:14px; }
.login-card input {
  display:block; width:100%; margin-top:5px; padding:10px 12px;
  border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--ink);
}
.login-card input:focus { outline:2px solid rgba(192,91,60,.35); outline-offset:1px; }
.login-card .btn { width:100%; margin-top:6px; }
.err { color:var(--accent); font-size:13px; margin-top:12px; text-align:center; min-height:19px; }

/* ---- 共用元件 ---- */
.btn {
  border:1.5px solid var(--ink); background:var(--card); color:var(--ink);
  border-radius:9px; padding:8px 16px; cursor:pointer;
}
.btn:hover { background:var(--paper); }
.btn.primary { background:var(--ink); color:var(--card); }
.btn.primary:hover { opacity:.9; background:var(--ink); }
.btn.small { padding:5px 11px; font-size:13px; border-radius:7px; }
.btn.danger { border-color:var(--accent); color:var(--accent); }
.btn:disabled { opacity:.45; cursor:default; }

/* ---- 後台版面 ---- */
.topbar {
  display:flex; align-items:center; gap:16px; padding:0 22px; height:56px;
  background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.topbar .logo { font-family:var(--serif); font-size:19px; color:var(--accent); font-weight:600; }
.topbar .who { margin-left:auto; color:var(--ink-soft); font-size:13px; }
.tabs { display:flex; gap:6px; padding:14px 22px 0; flex-wrap:wrap; }
.tabs button {
  border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
  border-radius:999px; padding:6px 16px; cursor:pointer;
}
.tabs button.on { border-color:var(--ink); color:var(--ink); font-weight:600; }
main { padding:18px 22px 60px; max-width:1180px; }
.panel { display:none; }
.panel.on { display:block; }

h2 { font-family:var(--serif); font-size:19px; font-weight:600; margin:22px 0 10px; }
h2:first-child { margin-top:4px; }
.hint { color:var(--ink-soft); font-size:13px; margin-bottom:12px; }

.card {
  background:var(--card); border:1px solid var(--line); border-radius:13px;
  padding:18px; margin-bottom:16px;
}

/* 指標磚 */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.kpi .n { font-family:var(--serif); font-size:27px; line-height:1.2; }
.kpi .k { font-size:12px; color:var(--ink-soft); letter-spacing:.03em; }
.kpi .sub { font-size:11.5px; color:var(--ink-soft); margin-top:2px; }

/* 表格 */
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th, td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); }
th { font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tbody tr:hover { background:rgba(201,162,39,.06); }
.bar { height:6px; background:var(--line); border-radius:3px; overflow:hidden; min-width:60px; }
.bar i { display:block; height:100%; background:var(--green); }
.bar.warn i { background:var(--accent); }
.scroll { max-height:460px; overflow:auto; }

/* 迷你長條圖 */
.spark { display:flex; align-items:flex-end; gap:3px; height:56px; margin-top:8px; }
.spark div { flex:1; background:var(--gold); border-radius:2px 2px 0 0; min-height:2px; opacity:.85; }

/* 表單列 */
.row { display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.row label { font-size:12.5px; color:var(--ink-soft); }
input[type=text], input[type=number], input[type=date], select, textarea {
  border:1px solid var(--line); border-radius:8px; padding:7px 10px;
  background:var(--paper); color:var(--ink);
}
textarea { width:100%; font-family:var(--mono); font-size:12.5px; min-height:120px; }
.grow { flex:1; min-width:160px; }
.status { font-size:13px; color:var(--ink-soft); }
.status.ok { color:var(--green); }
.status.bad { color:var(--accent); }
.pill {
  display:inline-block; font-size:11px; padding:1px 8px; border-radius:999px;
  border:1px solid var(--gold); color:var(--gold);
}
code { font-family:var(--mono); font-size:12.5px; background:rgba(44,42,38,.06); padding:1px 5px; border-radius:4px; }
.empty { color:var(--ink-soft); font-style:italic; padding:16px 0; }