:root { --bg:#0b1020; --fg:#e5e7eb; --muted:#9ca3af; --card:#111827; --line:#1f2937; --accent:#22d3ee; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang TC","Microsoft JhengHei",sans-serif;
}
.wrap { max-width: 780px; margin: 0 auto; padding: 20px; }
header { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom: 14px; }
h1 { font-size: 20px; margin: 0; }
.actions { display:flex; gap:8px; }
.card { background: var(--card); border:1px solid var(--line); border-radius: 14px; padding: 16px; }
.row { display:grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: start; margin-bottom: 12px; }
.row.tail { grid-template-columns: 1fr auto; align-items:center; }
.label { color: var(--muted); padding-top: 8px; }
.switcher { display:flex; gap:8px; }
.chip { background: transparent; color: var(--fg); border:1px solid var(--line); border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.chip.active { border-color: var(--accent); }
.io { display:grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
.io textarea {
  width: 100%; min-height: 100px; resize: vertical; padding: 10px 12px;
  background: #0e152b; color: var(--fg); border:1px solid var(--line); border-radius: 10px;
}
.io-actions { display:flex; flex-direction: column; gap:8px; }
.io-actions button { height: 40px; }
button { color: var(--fg); background:#141a2f; border:1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
button.primary { background: #0f172a; border-color: var(--accent); }
button.ghost { background: transparent; }
.muted { color: var(--muted); }
.foot { text-align: center; color: var(--muted); margin-top: 12px; font-size: 12px; }
dialog::backdrop{ background: rgba(0,0,0,.3); }
dialog .sheet { min-width: min(92vw, 520px); background: var(--card); border:1px solid var(--line); border-radius: 14px; padding: 16px; color: var(--fg); }
dialog h2 { margin-top: 0; }
dialog label { display:block; margin: 8px 0; }
dialog input, dialog select {
  width: 100%; padding: 8px 10px; background: #0e152b; color: var(--fg); border:1px solid var(--line); border-radius: 10px;
}
menu { display:flex; gap:8px; justify-content:flex-end; padding:0; margin-top: 8px; }
@media (max-width: 640px) {
  .row { grid-template-columns: 1fr; }
  .label { display:none; }
}