/* =====================================================================
 * 03 葡萄酒侍酒温度 · 视觉母题「醒酒器 / 酒杯侧影 + 温度弧刻度」
 * ---------------------------------------------------------------------
 * 色板：酒紫（--wine-pri #7b2d52）+ 玫瑰副色；版式 D 仪表盘中心舞台，
 * 参数环绕圆形刻度盘四周。与 02 果绿横向条版式完全不同的深紫与圆形构图。
 * 纯 CSS / SVG，零图片请求；本页只作用于 .b11--wine 容器。
 * ===================================================================== */

.b11--wine {
    --wine-pri: #7b2d52;
    --wine-pri2: #b0527e;
    --wine-deep: #4d1832;
    --wine-tint: #f4e2ea;
    --wine-line: #d9bfcd;
    --wine-card: #ffffff;
    --wine-mute: #8b7581;
    --b11-pri: #7b2d52;
    --b11-pri2: #b0527e;
    --b11-tint: #f4e2ea;
    --b11-bg: #f5f0f2;
    --b11-bg2: #e8dfe3;
    --b11-card2: #faf6f8;
    background-image:
        repeating-radial-gradient(circle at 0 0, color-mix(in srgb, var(--wine-line) 30%, transparent) 0 1px, transparent 1px 26px),
        linear-gradient(to bottom, color-mix(in srgb, var(--wine-line) 16%, transparent) 1px, transparent 1px);
    background-size: auto, 100% 30px;
}
:root[data-theme="dark"] .b11.b11--wine {
    --wine-pri: #d98cb0;
    --wine-pri2: #eaa9c4;
    --wine-deep: #f0c6da;
    --wine-tint: #2e1a24;
    --wine-line: #4a3040;
    --wine-card: #1a1d23;
    --wine-mute: #a08b97;
    --b11-pri: #d98cb0;
    --b11-pri2: #eaa9c4;
    --b11-tint: #2e1a24;
    --b11-bg: #161013;
    --b11-bg2: #1e161b;
    --b11-card2: #211a1f;
}

/* ---------- 首屏 ---------- */
.wine-hero {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 30px; align-items: center; padding: 36px 0 24px;
    border-bottom: 1.5px solid var(--wine-line);
}
.wine-hero .b11-h1 em { color: var(--wine-pri); }
.wine-hero .b11-lead b { box-shadow: inset 0 -.42em 0 var(--wine-tint); }
.wine-glass { display: grid; place-items: center; }
.wine-glass svg { width: min(220px, 62vw); height: auto; }

/* ---------- 中心舞台：仪表盘 ---------- */
.wine-console {
    margin-top: 24px; padding: 24px 26px 20px;
    background: var(--b11-card); border: 1px solid var(--b11-line);
    border-top: 4px solid var(--wine-pri); box-shadow: var(--b11-shadow);
    clip-path: polygon(0 0, calc(100% - var(--b11-cut)) 0, 100% var(--b11-cut), 100% 100%, 0 100%);
}
.wine-micro {
    display: block; font-family: var(--b11-mono); font-size: var(--b11-xs);
    letter-spacing: .16em; color: var(--wine-pri); margin-bottom: 6px;
}
.wine-console-h2 { font-size: var(--b11-lg); margin-bottom: 16px; }

.wine-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 14px 16px; align-items: stretch;
}
.wine-slot {
    position: relative; background: var(--b11-card2);
    border: 1px solid var(--b11-line); padding: 14px 15px 12px;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.wine-slot--a { grid-area: 1 / 1; }
.wine-slot--b { grid-area: 1 / 3; }
.wine-slot--c { grid-area: 2 / 1; }
.wine-slot--d { grid-area: 2 / 3; }
.wine-slot-no {
    position: absolute; top: 10px; right: 12px;
    font-family: var(--b11-mono); font-size: 11px; font-weight: 800;
    color: var(--wine-pri); border: 1.5px solid var(--wine-pri);
    width: 20px; height: 20px; display: grid; place-items: center;
}

.wine-dial-wrap {
    grid-area: 1 / 2 / 3 / 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 50% 42%, var(--wine-tint) 0 46%, transparent 47%),
        var(--b11-card2);
    border: 1px dashed var(--wine-line); padding: 10px 8px;
}
.wine-dial { width: min(320px, 74vw); }
.wine-dial svg { width: 100%; height: auto; }
.wine-dial-cap {
    margin: 6px 0 0; font-size: var(--b11-xs); color: var(--wine-mute);
    font-family: var(--b11-mono); text-align: center; letter-spacing: .02em;
}

/* ---------- 结果读数 ---------- */
.wine-readout { display: grid; gap: 0; margin-bottom: var(--b11-gap); }
.wine-readout .b11-readout-row { border-left: 3px solid var(--wine-pri); }
.wine-readout .b11-readout-row.is-hot { background: var(--wine-tint); border-color: transparent; border-left-color: var(--wine-pri2); }
.wine-readout .b11-readout-row.is-hot .vl { color: var(--wine-pri); }

.wine-grid2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--b11-gap); }

/* ---------- 开瓶顺序 ---------- */
.wine-decanter { display: grid; place-items: center; margin-bottom: 12px; }
.wine-decanter svg { width: min(240px, 68vw); height: auto; }
.wine-order { list-style: none; margin: 0; padding: 0; counter-reset: wn; }
.wine-order li {
    position: relative; counter-increment: wn;
    padding: 10px 0 10px 40px; font-size: var(--b11-sm); color: var(--b11-sub);
    border-bottom: 1px dotted var(--wine-line); line-height: 1.74;
}
.wine-order li:last-child { border-bottom: 0; }
.wine-order li::before {
    content: counter(wn, decimal-leading-zero);
    position: absolute; left: 0; top: 10px;
    font-family: var(--b11-mono); font-size: 13px; font-weight: 800; color: var(--wine-pri);
    border: 1.5px solid var(--wine-pri); width: 26px; height: 24px;
    display: grid; place-items: center;
}
.wine-order li b { color: var(--b11-ink); }

/* ---------- 批量清洗条 ---------- */
.wine-clean {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    margin-top: 14px; padding: 12px 14px; background: var(--b11-card2);
    border: 1px solid var(--b11-line); font-size: var(--b11-sm);
}
.wine-clean > b { color: var(--wine-pri); font-family: var(--b11-mono); font-size: var(--b11-xs); letter-spacing: .08em; }
.wine-clean code { margin-left: auto; }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
    .wine-hero, .wine-grid2 { grid-template-columns: minmax(0, 1fr); }
    .wine-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
    .wine-slot--a, .wine-slot--b, .wine-slot--c, .wine-slot--d { grid-area: auto; }
    .wine-dial-wrap { order: -1; }
    .wine-clean code { margin-left: 0; }
}

/* ---------- 首屏 CTA：保证主操作入口落在第一屏 ---------- */
.b11-herocta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 20px;
}
.b11-herocta span {
    font-size: var(--b11-xs); color: var(--b11-mute);
    font-family: var(--b11-mono); letter-spacing: .02em; line-height: 1.6;
}
.b11-herocta .b11-btn { padding: 11px 24px; font-size: var(--b11-sm); }