:root { --bg:#14161a; --panel:#1c1f25; --line:#2b3038; --line2:#3a4149; --fg:#e8eaed; --muted:#a8b1bb; --accent:#f77514; }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.5 -apple-system,"PingFang HK","Noto Sans TC",sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; gap:12px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); z-index:2; }
h1 { font-size:15px; margin:0; color:var(--accent); white-space:nowrap; }
.spend { color:var(--muted); font-variant-numeric:tabular-nums; font-size:13px; }

/* every control shares one dark theme — no default browser chrome anywhere */
button {
  background:#262b33; border:1px solid var(--line2); color:var(--fg);
  padding:8px 14px; border-radius:6px; cursor:pointer; font:inherit;
  white-space:nowrap; flex:0 0 auto;
}
button:hover { background:#2f3640; border-color:#4a525c; }
button:active { transform:translateY(1px); }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
button.primary:hover { background:#ff8a2b; border-color:#ff8a2b; }

input, textarea, select {
  background:#0f1114; border:1px solid var(--line2); color:var(--fg);
  border-radius:6px; padding:8px; font:inherit;
}
input:focus, textarea:focus { outline:none; border-color:var(--accent); }
::placeholder { color:#7d8792; opacity:1; }
#token { margin-left:auto; min-width:230px; }

main { display:grid; grid-template-columns:220px 300px 1fr; gap:1px; background:var(--line); min-height:calc(100vh - 49px); }
nav,section { background:var(--panel); padding:10px; overflow:auto; max-height:calc(100vh - 49px); }
nav button,.ep { display:block; width:100%; text-align:left; background:none; border:0; color:var(--fg); padding:8px; border-radius:6px; cursor:pointer; white-space:normal; }
nav button:hover,.ep:hover,.ep.active { background:#262b33; }
.ep small { display:block; color:var(--muted); font-size:12px; }
.row { display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
#path { flex:1 1 240px; font-family:ui-monospace,Menlo,monospace; }
textarea { width:100%; height:150px; font-family:ui-monospace,Menlo,monospace; font-size:13px; }
.cost { color:var(--accent); font-variant-numeric:tabular-nums; font-size:13px; }
h2 { font-size:13px; margin:14px 0 6px; color:var(--muted); font-weight:600; }
pre { background:#0f1114; border:1px solid var(--line); border-radius:6px; padding:10px; max-height:38vh; overflow:auto; margin:0 0 10px; font-size:12.5px; }
pre:empty::before { content:"（未使用）"; color:#7d8792; }
#doc:empty::before { content:"按「載入官方文件」睇 endpoint 用法"; color:#7d8792; }
#out:empty::before { content:"執行結果會顯示在這裡"; color:#7d8792; }
nav:empty::before { content:"載入目錄中…"; color:#7d8792; }
@media (max-width:820px){
  main { grid-template-columns:1fr; }
  nav,section { max-height:none; }
  #token { min-width:150px; }
  h1 { font-size:14px; }
}

/* ── presets（常用組合） ── */
.presets { display:flex; gap:6px; flex-wrap:wrap; }
.presets button { padding:6px 10px; font-size:12.5px; }

/* ── 參數表格（表單） ── */
#form details.fg { border:1px solid var(--line2); border-radius:8px; margin-bottom:10px; background:#181b20; }
#form summary { cursor:pointer; padding:8px 10px; font-weight:600; }
#form:empty::before { content:"揀上面其中一個 endpoint，參數表會自動出在這裡"; color:#7d8792; }
table.form { width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed; }
table.form th:first-child { width:29%; }
table.form th:nth-child(2) { width:30%; }
table.form th:nth-child(3) { width:41%; }
table.form th, table.form td { border-top:1px solid var(--line); padding:6px 8px; vertical-align:top; text-align:left; white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
table.form input[type=checkbox] { accent-color:var(--accent); width:17px; height:17px; margin:0; vertical-align:middle; }
table.form thead th { color:var(--muted); font-size:12px; border-top:0; }
table.form th label { display:block; font-weight:600; }
table.form th small { color:var(--muted); font-weight:400; font-family:ui-monospace,Menlo,monospace; font-size:11.5px; }
table.form td input[type=text], table.form td input[type=number], table.form td select, table.form td textarea { width:100%; }
table.form td textarea { height:70px; }
table.form td.help { color:var(--muted); font-size:12px; max-width:38ch; }
tr.req .star { color:var(--accent); }
td.help em.cond { display:block; margin-top:3px; color:var(--accent); font-style:normal; font-size:11.5px; }
#advanced { margin:8px 0; }
#advanced summary, #docbox summary { color:var(--muted); cursor:pointer; }
#advanced textarea { height:120px; }
#docbox pre { max-height:32vh; }
#preview:empty::before { content:"（按「執行」前會顯示實際會送出嘅內容）"; color:#7d8792; }