/* ======================================================================
   CSS Grid 演练场 · 独立设计（工程蓝图 / 绘图纸主题）
   浅色 = 淡蓝图纸 + 钴蓝墨线；深色 = 深夜晒图版
   ====================================================================== */
.gr{
  --ink:#12263f; --sub:#4c6382; --faint:#8ba0ba;
  --bg:#e9f1f8; --card:#f6fafd; --card2:#e2ecf6; --line:#c3d5e8; --line2:#d6e3f0;
  --pri:#1d4ed8; --pri-2:#3b82f6; --pri-soft:#dbeafe; --pri-ink:#1e40af;
  --tile:#2563eb; --tile-ink:#12263f;
  --ok:#15803d; --err:#c2363b;
  --r:4px;
  --shadow:0 1px 0 rgba(18,38,63,.06),0 12px 28px rgba(18,38,63,.10);
  color:var(--ink);
  font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px;line-height:1.75;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(29,78,216,.07) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(29,78,216,.07) 23px 24px),
    var(--bg);
  padding:0 16px 56px;
}
:root[data-theme="dark"] .gr{
  --ink:#dbe7f5; --sub:#8fa6c2; --faint:#5a6f8a;
  --bg:#0b1626; --card:#101f33; --card2:#152840; --line:#24405f; --line2:#1c3550;
  --pri:#60a5fa; --pri-2:#93c5fd; --pri-soft:rgba(96,165,250,.14); --pri-ink:#bfdbfe;
  --tile:#3b82f6; --tile-ink:#0b1626;
  --ok:#4ade80; --err:#f87171;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(96,165,250,.09) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(96,165,250,.09) 23px 24px),
    var(--bg);
}
.gr *{box-sizing:border-box;}
.gr-wrap{max-width:1160px;margin:0 auto;}
.gr textarea,.gr input,.gr select,.gr code,.gr pre{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;}

.gr-hero{margin-top:22px;border:2px solid var(--pri);border-radius:var(--r);background:var(--card);padding:18px 24px;box-shadow:var(--shadow);position:relative;}
.gr-hero::after{content:"BLUEPRINT · GRID";position:absolute;right:16px;top:10px;font-size:10px;letter-spacing:.22em;color:var(--faint);font-weight:800;}
.gr-hero h1{margin:0 0 4px;font-size:clamp(21px,3vw,27px);font-weight:900;color:var(--pri-ink);}
.gr-hero p{margin:0;color:var(--sub);font-size:14px;max-width:820px;}
.gr-hero p b{color:var(--pri-ink);}

.gr-desk{display:grid;grid-template-columns:340px 1fr;gap:16px;margin-top:16px;}
@media (max-width:960px){.gr-desk{grid-template-columns:1fr;}}
.gr-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);}
.gr-panel h2{margin:0 0 12px;font-size:13px;font-weight:900;letter-spacing:.14em;color:var(--pri);border-bottom:1px dashed var(--line);padding-bottom:8px;}
.gr-field{margin-bottom:12px;}
.gr-field label{display:block;font-size:12px;font-weight:800;color:var(--sub);margin-bottom:4px;}
.gr-in{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--card2);color:var(--ink);font-size:13px;outline:none;}
.gr-in:focus{border-color:var(--pri-2);box-shadow:0 0 0 3px var(--pri-soft);}
.gr-in.bad{border-color:var(--err);background:rgba(194,54,59,.06);}
.gr-sep{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

.gr-stage{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;}
.gr-canvas{flex:1;min-height:340px;border:1px solid var(--pri);border-radius:var(--r);padding:10px;background:
  repeating-linear-gradient(0deg, transparent 0 15px, rgba(29,78,216,.05) 15px 16px),
  repeating-linear-gradient(90deg, transparent 0 15px, rgba(29,78,216,.05) 15px 16px), var(--card2);}
.gr-box{display:grid;}
.gr-item{background:color-mix(in srgb, var(--tile) 16%, transparent);border:1.5px dashed var(--tile);color:var(--pri-ink);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;min-height:44px;font-family:Consolas,monospace;}
:root[data-theme="dark"] .gr-item{color:var(--pri-ink);}
.gr-code{margin-top:14px;}
.gr-code textarea{width:100%;min-height:150px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card2);color:var(--ink);font-size:12.5px;line-height:1.7;resize:vertical;outline:none;}
.gr-msg{font-size:13px;font-weight:700;min-height:20px;margin-top:8px;}
.gr-msg.err{color:var(--err);}
.gr-msg.ok{color:var(--ok);}
.gr-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.gr-btn{border:1px solid var(--pri);background:var(--pri);color:#fff;border-radius:var(--r);padding:8px 16px;font-size:13px;font-weight:800;cursor:pointer;}
.gr-btn:hover{background:var(--pri-2);border-color:var(--pri-2);}
.gr-btn-ghost{background:var(--card2);color:var(--pri-ink);}
.gr-btn-ghost:hover{background:var(--pri-soft);}

/* ---------- 场景预设 / 轨道可视化 / 跨列 ---------- */
.gr-extra{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}
@media (max-width:900px){.gr-extra{grid-template-columns:1fr;}}
.gr-extra-col{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);min-width:0;}
.gr-extra-col h2{margin:0 0 8px;font-size:13px;font-weight:900;letter-spacing:.14em;color:var(--pri);border-bottom:1px dashed var(--line);padding-bottom:8px;}
.gr-hint{margin:0 0 10px;font-size:12.5px;color:var(--sub);}
.gr-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
@media (max-width:420px){.gr-presets{grid-template-columns:1fr;}}
.gr-preset{border:1px solid var(--line);background:var(--card2);color:var(--pri-ink);border-radius:var(--r);padding:7px 10px;font-size:12.5px;font-weight:700;text-align:left;cursor:pointer;transition:all .15s;line-height:1.4;}
.gr-preset:hover{border-color:var(--pri);background:var(--pri-soft);}
.gr-range{width:100%;accent-color:var(--pri);}
.gr-trackviz{margin-top:8px;background:var(--card2);border:1px solid var(--line2);border-radius:var(--r);padding:8px 10px;overflow-x:auto;}
.gr-trackviz svg{display:block;width:100%;height:auto;min-width:540px;}
.gr-trackviz .gr-vt{fill:var(--sub);font-size:12px;font-weight:700;font-family:inherit;}
.gr-trackviz .gr-vl{fill:var(--ink);font-size:12px;font-weight:800;}
.gr-trackviz .gr-vn{fill:var(--sub);font-size:11px;}
.gr-trackviz .gr-vbar{fill:var(--card);font-size:11px;font-weight:800;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;}
.gr-track-empty{color:var(--faint);font-size:12.5px;padding:18px 4px;text-align:center;}

.gr-faq{margin-top:32px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;box-shadow:var(--shadow);}
.gr-faq h2{margin:0 0 10px;font-size:19px;font-weight:900;color:var(--pri-ink);}
.gr-faq h3{margin:16px 0 4px;font-size:15px;font-weight:800;}
.gr-faq p{margin:0;color:var(--sub);font-size:14px;}
.gr-faq p b{color:var(--ink);}