:root {
    --bg: #0d1117; --panel: #161b22; --panel2: #1c2129; --border: #30363d;
    --text: #e6edf3; --muted: #8b949e; --accent: #58a6ff; --ok: #3fb950; --err: #f85149;
    --code-bg: #0a0d12; --chip: #21262d;
    --mono: ui-monospace, "JetBrains Mono", "Cascadia Code", Consolas, Menlo, monospace;
  }
  * { box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none; }
  *::-webkit-scrollbar { display: none; width: 0; height: 0; }
  [hidden] { display: none !important; } /* id 选择器的 display 会压过 hidden 的 UA 样式，统一兜底 */
  html, body { margin: 0; height: 100%; overflow: hidden; }
  body {
    background: var(--bg); color: var(--text);
    font: 14px/1.65 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    display: flex; flex-direction: column;
    height: 100dvh;
  }
  header {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--panel);
    flex: none;
  }
  header h1 { font-size: 15px; margin: 0; font-weight: 600; }
  header h1 em { color: var(--accent); font-style: normal; }
  .tabs { display: flex; gap: 6px; }
  .tabs button {
    background: transparent; color: var(--muted); border: 1px solid transparent;
    padding: 5px 14px; border-radius: 6px; cursor: pointer; font-size: 13px;
  }
  .tabs button.on { color: var(--text); background: var(--chip); border-color: var(--border); }
  header .tip { margin-left: auto; color: var(--muted); font-size: 12px; }

  main { flex: 1; display: flex; min-height: 0; }
  #leftPane {
    flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 14px 18px 40px;
  }

  /* —— 教程 —— */
  details.chapter { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; background: var(--panel); }
  details.chapter > summary {
    cursor: pointer; padding: 9px 14px; font-weight: 600; font-size: 13.5px; user-select: none;
    list-style: none; display: flex; align-items: center; gap: 8px;
  }
  details.chapter > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
  details.chapter[open] > summary::before { transform: rotate(90deg); }
  .ch-body { padding: 2px 16px 14px; color: var(--text); font-size: 13.5px; }
  .ch-body p { margin: 8px 0; }
  .ch-body h4 { margin: 14px 0 4px; font-size: 13px; color: var(--accent); }
  code {
    font-family: var(--mono); font-size: 12.5px; background: var(--code-bg);
    border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: #79c0ff;
  }
  pre.code {
    font-family: var(--mono); font-size: 12px; line-height: 1.55;
    background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 12px 14px; overflow-x: auto; color: #c9d1d9; margin: 8px 0;
  }
  pre.code .k { color: #79c0ff; } pre.code .s { color: #a5d6ff; } pre.code .c { color: #6e7681; }
  table.rules { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 12.5px; }
  table.rules th, table.rules td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; vertical-align: top; }
  table.rules th { background: var(--panel2); color: var(--muted); font-weight: 600; }
  table.rules td:first-child { font-family: var(--mono); color: #79c0ff; white-space: nowrap; }
  .try {
    display: inline-block; background: var(--chip); color: var(--accent); border: 1px solid var(--border);
    border-radius: 5px; padding: 1px 9px; font-size: 12px; cursor: pointer; margin-left: 6px;
    font-family: var(--mono);
  }
  .try:hover { border-color: var(--accent); }
  .note { border-left: 3px solid var(--accent); background: var(--panel2); padding: 7px 12px; border-radius: 0 6px 6px 0; margin: 10px 0; font-size: 12.5px; color: #b6c2cf; }
  .note.warn { border-color: #d29922; }
  .tag { color: var(--muted); font-size: 12px; }

  /* —— 生成器表单 —— */
  .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 12px; margin: 8px 0; }
  .form-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
  .form-grid .full { grid-column: 1 / -1; }
  .fi {
    background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); padding: 6px 9px; font-size: 12.5px; font-family: var(--mono); width: 100%;
  }
  .fi:focus { outline: none; border-color: var(--accent); }
  textarea.fi { resize: vertical; min-height: 52px; line-height: 1.5; }
  .btn {
    background: var(--chip); color: var(--text); border: 1px solid var(--border);
    border-radius: 6px; padding: 6px 16px; cursor: pointer; font-size: 13px;
  }
  .btn:hover { border-color: var(--accent); color: var(--accent); }
  .btn.primary { background: #1f3a5f; border-color: #2f5a8f; }

  /* —— 演练场 —— */
  #playContent { display: flex; flex-direction: column; gap: 10px; }
  .play-head { display: flex; align-items: center; gap: 10px; flex: none; }
  .play-head .btn { white-space: nowrap; }
  select.fi { padding: 5px 8px; }
  #jsonArea { flex: none; height: 38vh; min-height: 160px; font-size: 12.5px; line-height: 1.55; }
  .rule-row { display: flex; gap: 8px; align-items: center; flex: none; }
  .rule-row label { color: var(--muted); font-size: 12px; flex: none; }
  #ruleInput { flex: 1; }
  .opts { display: flex; gap: 16px; align-items: center; flex: none; color: var(--muted); font-size: 12px; }
  .opts label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
  #resultBox {
    flex: none; height: 32vh; min-height: 140px; overflow: auto; font-family: var(--mono); font-size: 12.5px;
    background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 13px;
    white-space: pre-wrap; word-break: break-all;
  }
  #resultBox.ok { border-color: var(--ok); }
  #resultBox.err { border-color: var(--err); }
  .mini { font-size: 11.5px; color: var(--muted); }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
  .chips button {
    background: var(--chip); color: var(--muted); border: 1px solid var(--border); border-radius: 12px;
    padding: 2px 10px; font-size: 11.5px; cursor: pointer; font-family: var(--mono);
  }
  .chips button:hover { color: var(--accent); border-color: var(--accent); }
  .chips button.on { color: var(--accent); border-color: var(--accent); }

  #genPreviewWrap { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 10px; }
  #genPreviewWrap .ph { background: var(--panel2); padding: 5px 12px; font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  #genPreview { margin: 0; border: none; border-radius: 0; max-height: 300px; }

  /* —— 源调试器 —— */
  .dbg-table { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: 12px; font-family: var(--mono); }
  .dbg-table th, .dbg-table td {
    border: 1px solid var(--border); padding: 3px 7px; text-align: left;
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dbg-table th { background: var(--panel2); color: var(--muted); font-weight: 500; }
  .dbg-table td.miss { color: var(--err); }
  /* 窄屏：表格转卡片布局（th 变行内前缀、允许换行），避免横向截断显示不全 */
  @media (max-width: 640px) {
    .dbg-table, .dbg-table tbody { display: block; }
    .dbg-table tr { display: block; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; padding: 3px 8px; }
    .dbg-table th { display: none; }
    .dbg-table td {
      display: flex; border: none; padding: 1px 0; max-width: none;
      overflow: visible; white-space: normal; word-break: break-all;
    }
    .dbg-table td::before { content: attr(data-th) ": "; color: var(--muted); flex: none; margin-right: 6px; }
  }

  /* —— JSON 树查看器（可收起分支，点键名复制 $ 路径）—— */
  .jtree {
    font-family: var(--mono); font-size: 12px; line-height: 1.6;
    background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 12px; overflow: auto; max-height: 380px;
  }
  .jtree ul { list-style: none; margin: 0; padding-left: 18px; }
  .jtree > ul { padding-left: 2px; }
  .jrow { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
  .jcaret { width: 11px; flex: none; color: var(--muted); cursor: pointer; user-select: none; }
  .jkey, .jindex, .jroot { cursor: pointer; }
  .jkey { color: #79c0ff; }
  .jindex { color: var(--muted); }
  .jroot { color: var(--text); font-weight: 600; }
  .jkey:hover, .jindex:hover, .jroot:hover { color: var(--accent); text-decoration: underline; }
  .jcolon { color: var(--muted); }
  .js { color: #a5d6ff; } .jn { color: #d2a8ff; } .jb { color: #ffa657; } .jz { color: #6e7681; }
  .jrow .js { display: inline-block; max-width: 56ch; overflow: hidden; text-overflow: ellipsis; vertical-align: baseline; }
  .jmeta { color: var(--muted); font-size: 11px; cursor: pointer; }
  .jmeta:hover { color: var(--accent); }
  .jbar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
  .jbar .btn { padding: 2px 10px; font-size: 11px; }
  .jpath {
    font-family: var(--mono); background: var(--panel2); border: 1px solid var(--border);
    border-radius: 4px; padding: 1px 8px; color: #79c0ff; word-break: break-all;
  }
  #p_treeWrap .jtree { max-height: 38vh; } /* 与 jsonArea 高度对齐 */

  /* —— 响应式 —— */
  @media (max-width: 960px) {
    header .tip { display: none; }
    #jsonArea { height: 30vh; }
    #resultBox { height: 26vh; }
    /* 头部换行重排：样例下拉独占一行，避免文字挤压 */
    .play-head { flex-wrap: wrap; row-gap: 6px; }
    .play-head select.fi { order: 10; flex: 1 1 100%; min-width: 0; }
    #ctxNote { display: none; }
  }
  /* 窄屏（手机）：进一步压缩留白与字号 */
  @media (max-width: 640px) {
    header { padding: 8px 12px; gap: 10px; }
    header h1 { font-size: 13.5px; }
    #leftPane { padding: 10px 12px 14px; }
    #jsonArea { height: 26vh; }
    #resultBox { height: 22vh; font-size: 11.5px; }
    .rule-row { flex-wrap: wrap; }
    .rule-row input#ruleInput { width: 100%; flex: none; }
    .chips button { font-size: 11px; padding: 2px 8px; }
    pre.code { font-size: 11px; padding: 10px 11px; }
    table.rules { font-size: 11.5px; }
  }

/* —— 全局轻提示（复用播放器 swipe.css 的 .toast 实现与视觉）—— */
.toast-wrap {
  position: fixed; left: 0; right: 0; top: 62px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 200; pointer-events: none;
}
.toast {
  font-size: 12px; padding: 6px 14px; border-radius: 999px;
  background: rgba(0,0,0,.72); color: #fff;
  animation: tin .2s ease;
  max-width: 86%; text-align: center;
}
.toast.ok   { background: rgba(46,204,113,.9); }
.toast.warn { background: rgba(255,186,58,.92); color: #241703; }
.toast.err  { background: rgba(239,83,80,.92); }
@keyframes tin { from { opacity: 0; transform: translateY(-8px); } }