/* ======================================================================
 * #04 无畏契约准星代码生成 · 独立视觉：准星实验室
 * VALORANT 品牌红 + 深枪灰；切角卡；靶场网格画布；控制台式代码框
 * ====================================================================== */
.vc-page {
    --g-accent: #E0414C;
    --g-accent-deep: #B92C38;
    --g-accent-ink: #A3222E;
    --g-accent-soft: #FDECEE;
    --g-accent-2: #2E9BB8;
    --g-accent-2-soft: #E5F4F8;
    --vc-red: #FF4655;
    --vc-ink: #0F1923;
    --vc-panel: #131F2B;
    background:
      linear-gradient(115deg, rgba(255, 70, 85, .055) 0 28%, transparent 28% 100%),
      var(--g-bg);
}
:root[data-theme="dark"] .vc-page {
    --g-accent: #FF7B86;
    --g-accent-deep: #FFA0A8;
    --g-accent-ink: #FFC0C6;
    --g-accent-soft: rgba(255, 123, 134, .13);
    --g-accent-2: #66CBE4;
    --g-accent-2-soft: rgba(102, 203, 228, .13);
    --vc-red: #FF6B77;
    --vc-ink: #080E14;
    --vc-panel: #0D1620;
    background:
      linear-gradient(115deg, rgba(255, 107, 119, .05) 0 28%, transparent 28% 100%),
      var(--g-bg);
}
.vc-page .hero-kicker { background: var(--vc-red); border-color: var(--vc-red); color: #fff; font-family: var(--g-mono); letter-spacing: .08em; }
:root[data-theme="dark"] .vc-page .hero-kicker { color: #17070A; }
.vc-hero { border-bottom: 2px solid var(--vc-red); }

/* 代码读数：深色控制台，切右下角 */
.vc-code-readout {
    background: var(--vc-ink); border-color: #26313E;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.vc-code-readout::before { background: linear-gradient(90deg, var(--vc-red), #FFB454); }
.vc-code-readout .lab { color: #8FA1B3; font-family: var(--g-mono); }
.vc-code-readout .big { font-size: 13px; line-height: 1.7; color: #FFE9A8; word-break: break-all; font-weight: 600; letter-spacing: 0; }
.vc-code-readout .hint { color: #8FA1B3; }
.vc-readout-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed #2D3A48; font: 650 11px var(--g-mono); color: #8FA1B3; }
.vc-readout-foot i { flex: 1; height: 1px; background: #2D3A48; }

/* 控制台：左参数列更宽 */
.vc-bench { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.vc-controls { border-top: 3px solid var(--vc-red); }
.vc-group { padding: 14px 0; border-bottom: 1px dashed var(--g-line); }
.vc-group:first-of-type { padding-top: 0; }
.vc-group:last-of-type { border-bottom: 0; padding-bottom: 0; }
.vc-group-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.vc-group-head b { font-size: 14.5px; }
.vc-group-head span { font: 650 11px var(--g-mono); color: var(--g-ink-3); }
.vc-toggle { margin-bottom: 8px; }
.vc-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-color {
    width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
    border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
    position: relative; transition: transform .13s, border-color .13s;
}
.vc-color:hover { transform: translateY(-2px); }
.vc-color.on { border-color: var(--g-ink); box-shadow: 0 0 0 3px var(--g-accent-soft); }
:root[data-theme="dark"] .vc-color.on { border-color: #fff; }
.vc-color span { position: absolute; bottom: -19px; left: 50%; transform: translateX(-50%); font: 600 10px var(--g-mono); color: var(--g-ink-3); white-space: nowrap; }
.vc-colors { padding-bottom: 18px; }

/* 滑块行 */
.vc-sliders { display: grid; gap: 9px; }
.vc-slider { display: grid; grid-template-columns: 108px minmax(0, 1fr) 54px; gap: 10px; align-items: center; }
.vc-slider label { font-size: 12.5px; color: var(--g-ink-2); font-weight: 650; }
.vc-slider input[type="range"] { min-height: 20px; }
.vc-slider output { font: 700 12.5px var(--g-mono); color: var(--g-accent-ink); text-align: right; }
.vc-slider.disabled { opacity: .42; }

/* 预览画布 */
.vc-preview { background: var(--g-surface); }
.vc-bgseg { display: inline-flex; gap: 4px; }
.vc-bgseg button { padding: 3px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 700; background: var(--g-surface-3); color: var(--g-ink-3); cursor: pointer; }
.vc-bgseg button.on { background: var(--vc-red); color: #fff; }
.vc-stage { position: relative; border-radius: var(--g-r-sm); overflow: hidden; border: 1px solid var(--g-line); background: #1B2836; }
.vc-stage canvas { display: block; width: 100%; height: auto; }
.vc-stage-tag {
    position: absolute; left: 10px; bottom: 9px; padding: 3px 10px; border-radius: 999px;
    background: rgba(8, 15, 22, .7); color: #C8D6E2; font: 650 10.5px var(--g-mono); letter-spacing: .08em;
}
.vc-preview-tip { margin-top: 11px; font-size: 12.5px; color: var(--g-ink-3); line-height: 1.8; }
.vc-code-box { margin-top: 14px; border-radius: var(--g-r-sm); background: var(--vc-ink); border: 1px solid #26313E; overflow: hidden; }
.vc-code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #26313E; }
.vc-code-head span { font: 650 10.5px var(--g-mono); color: #8FA1B3; letter-spacing: .06em; }
.vc-code-head .btn { background: #243444; border-color: #33465A; color: #DCE8F2; }
.vc-code-box code { display: block; padding: 12px; font: 12px/1.75 var(--g-mono); color: #FFE9A8; word-break: break-all; }
.vc-fields-out { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.vc-fields-out span { padding: 3px 9px; border-radius: 7px; background: var(--g-surface-2); border: 1px solid var(--g-line); font: 650 11px var(--g-mono); color: var(--g-ink-2); }

/* 反解区 */
.vc-import { border-style: dashed; }
.vc-lead { font-size: 13.5px; color: var(--g-ink-2); margin-bottom: 12px; }
.vc-import textarea { font-size: 12.5px; }
.vc-import-out { margin-top: 12px; font-size: 13px; color: var(--g-ink-2); line-height: 1.85; }
.vc-import-out b { color: var(--g-accent-ink); }

/* 映射表 / 预设 */
.vc-map { padding: 0; overflow-x: auto; }
.vc-map table { min-width: 560px; border-radius: 0; }
.vc-map td:first-child, .vc-map td:nth-child(4) { font-family: var(--g-mono); font-weight: 700; color: var(--g-accent-ink); }
.vc-presets .tile { border-top: 3px solid var(--vc-red); cursor: pointer; transition: transform .16s, box-shadow .16s; }
.vc-presets .tile:hover { transform: translateY(-3px); box-shadow: var(--g-shadow-2); }
.vc-presets .tile .num { display: block; margin-bottom: 8px; }
.vc-presets .tile .vc-mini { display: block; height: 46px; margin-top: 12px; border-radius: 8px; background: #16232F; position: relative; }
.vc-presets .tile .vc-mini::before, .vc-presets .tile .vc-mini::after {
    content: ''; position: absolute; left: 50%; top: 50%; background: var(--vc-red); transform: translate(-50%, -50%);
}
.vc-presets .tile .vc-mini::before { width: 2px; height: 22px; }
.vc-presets .tile .vc-mini::after { width: 22px; height: 2px; }

/* 二维码弹层（节点在 .gv11 之外，单独写全局样式） */
#vcQrModal .vc-qr {
    width: 208px; height: 208px; margin: 18px auto 12px; padding: 10px;
    background: #fff; border-radius: 12px; border: 1px solid #E3E2D9;
}
#vcQrModal .vc-qr img, #vcQrModal .vc-qr canvas { width: 100% !important; height: 100% !important; }
#vcQrModal .vc-qr-code {
    display: block; text-align: center; font-size: 11px; line-height: 1.7;
    word-break: break-all; color: #465451; padding: 0 6px;
}
:root[data-theme="dark"] #vcQrModal .vc-qr-code { color: #AFBEB8; }

@media (max-width: 900px) { .vc-bench { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
    .vc-slider { grid-template-columns: 88px minmax(0, 1fr) 46px; gap: 7px; }
    .vc-slider label { font-size: 11.5px; }
}