:root {
  --bg: #0f1216;
  --card: #171b21;
  --line: #262c36;
  --fg: #e6e9ee;
  --muted: #8b95a5;
  --accent: #4c8dff;
  --good: #3ecf8e;
  --bad: #ff6b6b;
  --warn: #ffb454;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.6 ui-sans-serif, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  padding-bottom: 48px;
}

header {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
h1 { font-size: 18px; margin: 0; letter-spacing: .5px; }
h2 { font-size: 15px; margin: 0 0 14px; color: var(--muted); font-weight: 600; }
/* 根目录三块（已接的通道 / 建通道许可票 / Token）：蓝色标题，一眼认出 */
h2.blue { color: #0284c7; font-size: 17px; }
h3 { font-size: 15px; margin: 0 0 8px; }

main, #gate { padding: 16px 20px; max-width: 1080px; margin: 0 auto; }

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

label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
input, select, textarea {
  width: 100%; margin-top: 4px; padding: 8px 10px;
  background: #0c0f13; color: var(--fg);
  border: 1px solid var(--line); border-radius: 6px; font-size: 14px;
  font-family: inherit;
}
textarea, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
.wide { grid-column: 1 / -1; }

button {
  padding: 8px 14px; border-radius: 6px; border: 1px solid transparent;
  background: var(--accent); color: #fff; font-size: 14px; cursor: pointer;
}
button:hover { filter: brightness(1.12); }
button.small { padding: 4px 9px; font-size: 12px; margin-right: 6px; }
button.ghost { background: transparent; border-color: var(--line); color: var(--muted); }
button.bad { background: #7a2b2b; }

/* 一屏没有 tab 了：退出按钮挂在标题右侧 */
.head-right { display: flex; align-items: center; gap: 10px; }
.head-right #signout { margin-left: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); word-break: break-all; }
th { color: var(--muted); font-weight: 500; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.muted { color: var(--muted); }

.msg { white-space: pre-wrap; margin: 10px 0 0; font-size: 13px; color: var(--good); word-break: break-all; }
.msg.err { color: var(--bad); }
.msg.mono { background: #0c0f13; border: 1px solid var(--line); border-radius: 6px; padding: 10px; }

.card pre {
  background: #0c0f13; border: 1px solid var(--line); border-radius: 6px;
  padding: 10px; white-space: pre-wrap; word-break: break-all; font-size: 12.5px;
}
details { margin-bottom: 10px; }
summary { font-size: 13px; color: var(--muted); cursor: pointer; margin-bottom: 8px; }

dialog {
  background: var(--card); color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px; padding: 18px; max-width: 460px; width: 92vw;
}
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog pre {
  background: #0c0f13; border: 1px solid var(--line); border-radius: 6px;
  padding: 10px; white-space: pre-wrap; word-break: break-all;
}
.row { display: flex; gap: 8px; }

/* 生成结果下面那一行：只放「复制」，手机上没有它等于没做完 */
.outbar { margin-top: 8px; }