/* ======================================================================
 * 43 · 演唱会与赛事场馆座位视野对照 —— 「场馆看台剖面图」
 * 视觉：暗夜紫 + 金 + 墨；环形看台剖面 SVG；金色分区高亮；
 *       票档阶梯用金色渐变；与其余 29 页不共用配色与构图。
 * ====================================================================== */

.hx.vsc {
    --bg: #14101f;
    --bg2: #1c1730;
    --card: #201a35;
    --card2: #282142;
    --card3: #322a50;
    --ink: #f0ebfa;
    --ink2: #c8bfdd;
    --muted: #9187ad;
    --line: #3b3159;
    --line2: #2e2745;
    --accent: #f0b429;
    --accent-ink: #201607;
    --accent-soft: #3a2f16;
    --accent2: #8b6ff0;
    --accent2-soft: #2a2148;
    --ok: #5cc48c;
    --ok-bg: #17351f;
    --warn: #dcb45f;
    --warn-bg: #342a16;
    --bad: #e5847a;
    --bad-bg: #38211e;
    --info: #62b7d0;
    --info-bg: #182f38;
    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 3px 12px rgba(0, 0, 0, .5), 0 18px 44px rgba(0, 0, 0, .45);

    background:
        radial-gradient(circle at 50% -10%, rgba(240, 180, 41, .14), transparent 55%),
        var(--bg);
}
:root[data-theme="dark"] .hx.vsc {
    --bg: #0d0a16;
    --bg2: #140f22;
    --card: #191330;
    --card2: #201934;
    --card3: #292145;
    --ink: #f2edfb;
    --ink2: #c9c0de;
    --muted: #948ab0;
    --line: #3d335c;
    --line2: #2c2544;
    --accent: #f5c04a;
    --accent-ink: #1c1206;
    --accent-soft: #3c3017;
    --accent2: #9c82ff;
    --accent2-soft: #2b2249;
    --shadow: 0 3px 12px rgba(0, 0, 0, .6), 0 18px 44px rgba(0, 0, 0, .55);
}

.vsc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(282px, .9fr);
    gap: 0;
    margin: 22px 0 26px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.vsc-hero-main { padding: 26px 26px 24px; min-width: 0; }
.vsc-kicker {
    font: 700 11px var(--font-mono); letter-spacing: .2em; text-transform: uppercase;
    color: var(--accent); margin: 0 0 8px;
}
.vsc-hero h1 { font-size: clamp(28px, 3.5vw, 40px); margin-bottom: 10px; }
.vsc-lede { font-size: 14.8px; line-height: 1.9; color: var(--ink2); margin: 0 0 18px; max-width: 58em; }
.vsc-lede b { color: var(--accent); border-bottom: 2px solid var(--accent-soft); }
.vsc-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vsc-input {
    width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--card2); color: var(--ink); font: 600 14.5px/1.6 var(--font-body); padding: 9px 12px; outline: none;
}
.vsc-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
select.vsc-input { cursor: pointer; }

.vsc-block { border-top: 1px solid var(--line2); padding-top: 15px; margin-top: 16px; }
.vsc-block-hd { display: block; font: 700 12.5px var(--font-mono); letter-spacing: .05em; color: var(--accent2); margin-bottom: 10px; }
.vsc-zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 7px; }
.vsc-zone {
    background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 8px 10px; cursor: pointer; text-align: left; color: var(--ink2); font-family: var(--font-body);
    transition: .15s;
}
.vsc-zone:hover { border-color: var(--accent); color: var(--accent); }
.vsc-zone.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.vsc-zone b { display: block; font-size: 13.5px; }
.vsc-zone small { display: block; font-size: 11px; opacity: .8; margin-top: 2px; }
.vsc-picked {
    margin-top: 10px; font-size: 13px; color: var(--ink2); background: var(--card2);
    border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 9px 12px; line-height: 1.75;
}
.vsc-picked b { color: var(--accent); }

.vsc-section { background: var(--bg2); border-left: 1px solid var(--line); padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.vsc-section-hd { font: 700 11px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.vsc-svg { width: 100%; height: auto; }
.vsc-svg-t { font: 700 10px var(--font-mono); fill: var(--muted); }
.vsc-svg-z { cursor: pointer; }
.vsc-svg-z path { fill: var(--card3); stroke: var(--line); stroke-width: 1.2; }
.vsc-svg-z.on path { fill: var(--accent); stroke: var(--accent); }
.vsc-svg-z text { font: 700 8.5px var(--font-mono); fill: var(--ink2); text-anchor: middle; }
.vsc-svg-z.on text { fill: var(--accent-ink); }
.vsc-section-note { margin-top: auto; border-top: 1px solid var(--line); padding-top: 10px; }
.vsc-section-note b { display: block; font-size: 13px; margin-bottom: 4px; color: var(--accent); }
.vsc-section-note p { font-size: 12.2px; line-height: 1.78; color: var(--ink2); margin: 0; }

/* 结果 */
.vsc-result { display: none; }
.vsc-result.is-on { display: block; }
.vsc-zonecard { background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px 17px; margin-bottom: 16px; }
.vsc-zonecard h3 { font-size: 19px; margin-bottom: 4px; }
.vsc-zonecard .vsc-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.vsc-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.vsc-metric { background: var(--card3); border-radius: var(--radius-sm); padding: 10px 12px; }
.vsc-metric dt { font-size: 11.5px; color: var(--muted); margin: 0 0 3px; }
.vsc-metric dd { margin: 0; font: 800 19px var(--font-mono); color: var(--accent); }
.vsc-metric dd small { font-size: 12px; font-weight: 500; color: var(--muted); }
.vsc-metric.is-warn dd { color: var(--warn); }
.vsc-metric.is-bad dd { color: var(--bad); }

.vsc-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 14px; }
.vsc-tier { border-radius: var(--radius-sm); padding: 11px 13px; color: #1c1206; }
.vsc-tier b { display: block; font-size: 13.5px; }
.vsc-tier span { display: block; font-size: 11.5px; opacity: .9; }
.vsc-tier em { font-style: normal; font: 700 15px var(--font-mono); display: block; margin: 2px 0; }
.vsc-tier.t1 { background: linear-gradient(135deg, #f5c04a, #e09b12); }
.vsc-tier.t2 { background: linear-gradient(135deg, #d9b57a, #bd8f45); }
.vsc-tier.t3 { background: linear-gradient(135deg, #b7a58a, #91826a); }
.vsc-tier.t4 { background: linear-gradient(135deg, #8b8375, #6b6459); color: #f2edfb; }

.vsc-advice { display: grid; gap: 10px; }
.vsc-adv { background: var(--card2); border: 1px solid var(--line); border-left: 3px solid var(--accent2); border-radius: var(--radius-sm); padding: 13px 15px; }
.vsc-adv h4 { font-size: 14.5px; margin-bottom: 5px; color: var(--accent2); }
.vsc-adv p { font-size: 13.4px; line-height: 1.82; color: var(--ink2); margin: 0; }
.vsc-adv.is-pick { border-left-color: var(--accent); background: var(--accent-soft); }
.vsc-adv.is-pick h4 { color: var(--accent); }
.vsc-adv.is-avoid { border-left-color: var(--bad); }
.vsc-adv.is-avoid h4 { color: var(--bad); }

.vsc-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 11px; }
.vsc-check { background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; }
.vsc-check b { display: block; font-size: 14px; margin-bottom: 6px; color: var(--accent); }
.vsc-check ul { margin: 0; padding-left: 19px; }
.vsc-check li { font-size: 12.8px; line-height: 1.78; color: var(--ink2); margin-bottom: 4px; }

@media (max-width: 980px) {
    .vsc-hero { grid-template-columns: minmax(0, 1fr); }
    .vsc-section { border-left: 0; border-top: 1px solid var(--line); }
    .vsc-picker { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .vsc-hero-main { padding: 20px 15px; }
}