/* ======================================================================
 * 28 · 游戏加速器怎么选 —— 「网络遥测仪表」
 * 视觉：NOC 监控台、环形仪表 + 折线遥测、荧光绿 / 青色状态灯、
 *       四格数字读数条；与前面所有页面的视觉语言不同。
 * ====================================================================== */

.dg3.gbg {
    --bg: #f2f7f3;
    --bg2: #e6f0e9;
    --card: #ffffff;
    --card2: #f3f9f4;
    --ink: #16281f;
    --ink2: #3c5547;
    --muted: #6f8879;
    --line: #cbded1;
    --line2: #e0eee4;
    --accent: #157a4c;
    --accent-ink: #ffffff;
    --accent-soft: #dcf0e4;
    --accent2: #0e7490;
    --accent2-soft: #dceef3;
    --ok: #157a4c;
    --ok-bg: #dcf0e4;
    --warn: #96620d;
    --warn-bg: #fbf0d9;
    --bad: #ad3527;
    --bad-bg: #f9e3df;
    --shadow: 0 3px 18px rgba(20, 62, 40, .1);
    --radius: 8px;
    --radius-sm: 5px;
    --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;
    --head-weight: 800;
    --gbg-neon: #2fbf76;

    background:
        linear-gradient(rgba(21, 122, 76, .035) 1px, transparent 1px) 0 0 / 100% 28px,
        var(--bg);
    border-top: 4px solid var(--accent);
}
:root[data-theme="dark"] .dg3.gbg {
    --bg: #0f1a15;
    --bg2: #16251d;
    --card: #17261e;
    --card2: #1e3127;
    --ink: #e2f2e8;
    --ink2: #b4d0be;
    --muted: #84a291;
    --line: #30493a;
    --line2: #24382c;
    --accent: #55c98b;
    --accent-ink: #082317;
    --accent-soft: #1e3a2a;
    --accent2: #5bc4da;
    --accent2-soft: #1b3640;
    --ok: #5cc394;
    --ok-bg: #1c3528;
    --warn: #dcb055;
    --warn-bg: #372c18;
    --bad: #e08076;
    --bad-bg: #3a2220;
    --shadow: 0 3px 22px rgba(0, 0, 0, .45);
    --gbg-neon: #55e6a0;
    background:
        linear-gradient(rgba(85, 201, 139, .045) 1px, transparent 1px) 0 0 / 100% 28px,
        var(--bg);
}

/* ---------- 首屏监控台 ---------- */
.gbg-console {
    margin: 22px 0 24px; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden;
}
.gbg-console-hd {
    display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 18px; align-items: center;
    padding: 22px 26px 18px;
    background: linear-gradient(120deg, #123a28 0%, #155a3c 62%, #0f6a62 100%);
    color: #e6f7ec;
}
:root[data-theme="dark"] .gbg-console-hd { background: linear-gradient(120deg, #0a1f15 0%, #103a28 62%, #0d3d3a 100%); }
.gbg-kicker {
    font: 700 10.5px var(--font-mono); letter-spacing: .18em; color: var(--gbg-neon);
    margin: 0 0 9px; display: flex; align-items: center; gap: 8px;
}
.gbg-live {
    width: 8px; height: 8px; border-radius: 50%; background: var(--gbg-neon);
    box-shadow: 0 0 0 4px rgba(47, 191, 118, .2), 0 0 12px var(--gbg-neon);
}
.gbg-console h1 { color: #fff; font-size: clamp(28px, 3.4vw, 39px); margin-bottom: 9px; }
.gbg-lede { font-size: 14.5px; line-height: 1.88; color: #d4ebde; margin: 0; }
.gbg-lede b { color: #b9f5c9; border-bottom: 1px solid rgba(185, 245, 201, .55); }

.gbg-gauge svg { width: 100%; height: auto; }
.gbg-gauge-bg { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 12; }
.gbg-gauge-fg {
    fill: none; stroke: var(--gbg-neon); stroke-width: 12; stroke-linecap: round;
    transform: rotate(-90deg); transform-origin: 90px 90px;
    stroke-dasharray: 0 452; transition: stroke-dasharray .5s ease;
}
.gbg-gauge-val { fill: #fff; font: 800 34px var(--font-mono); }
.gbg-gauge-unit { fill: #a8d9bd; font: 500 10px var(--font-mono); }
.gbg-gauge-cap { fill: var(--gbg-neon); font: 600 9px var(--font-mono); }

.gbg-readouts {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--line); background: var(--card2);
}
.gbg-readouts > div {
    padding: 12px 16px; border-right: 1px solid var(--line2);
    display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
}
.gbg-readouts > div:last-child { border-right: 0; }
.gbg-readouts span { font: 700 9.5px var(--font-mono); letter-spacing: .12em; color: var(--muted); width: 100%; }
.gbg-readouts b { font: 800 20px var(--font-mono); color: var(--accent); }
.gbg-readouts small { font-size: 11.5px; color: var(--muted); }

.gbg-probe { padding: 18px 24px 20px; }
.gbg-probe-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.gbg .dg3-field > label { font-size: 12.2px; }
.gbg .dg3-field .tip { font-size: 11.2px; }
.gbg-flags {
    display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; padding: 10px 12px;
    background: var(--card2); border: 1px solid var(--line2); border-radius: var(--radius-sm);
}
.gbg-flags .checkline { font-size: 13px; }
.gbg .dg3-btn--main { background: var(--accent); border-color: var(--accent); }

/* ---------- 结果 ---------- */
.gbg-spark { margin-bottom: 14px; border: 1px solid var(--line2); border-radius: var(--radius-sm); background: var(--card2); }
.gbg-spark svg { width: 100%; height: auto; display: block; }
.gbg-spark-mid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; }
.gbg-spark-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.gbg-spark-cap { fill: var(--muted); font: 600 9px var(--font-mono); letter-spacing: .1em; }
.gbg .gbg-paths th { background: var(--accent-soft); color: var(--accent); }
:root[data-theme="dark"] .gbg .gbg-paths th { color: var(--accent2); }
.gbg .gbg-paths tr.is-best td, .gbg .gbg-paths tr.is-best th { background: var(--ok-bg); }
.gbg .dg3-kv > div { border-left: 3px solid var(--gbg-neon); }
.gbg .dg3-kv dd { color: var(--accent); font-size: 17px; }
.gbg #gbgChecks { display: grid; gap: 8px; }
.gbg #gbgChecks .dg3-note { font-size: 13.2px; }
.gbg-steps { margin: 10px 0 0; padding-left: 22px; }
.gbg-steps li { font-size: 13.7px; line-height: 1.85; color: var(--ink2); margin-bottom: 7px; }
.gbg-steps li b { color: var(--accent); }
.gbg #gbgEscape { margin-top: 12px; }
.gbg-ai-sec .dg3-card { border-left: 4px solid var(--accent2); }
.gbg .gbg-batch-ok { color: var(--ok); font-weight: 700; }
.gbg .gbg-batch-bad { color: var(--bad); font-weight: 700; }

@media (max-width: 940px) {
    .gbg-console-hd { grid-template-columns: minmax(0, 1fr) 140px; }
    .gbg-probe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .gbg-console-hd { grid-template-columns: minmax(0, 1fr); padding: 20px 15px; }
    .gbg-gauge { max-width: 150px; }
    .gbg-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gbg-readouts > div:nth-child(2) { border-right: 0; }
    .gbg-probe { padding: 16px 14px 18px; }
    .gbg-probe-grid { grid-template-columns: minmax(0, 1fr); }
}