/* =====================================================================
 * 03 窗帘遮光率怎么选 · 独立视觉：暮色光影 / 织物光谱
 * 大幅窗景模拟 + 浮动参数板 + 横向遮光率光谱，与前两页版式完全不同。
 * ===================================================================== */

.hc.hc--cbr { --hc-a: #6b5ca5; --hc-a-soft: #ece9f7; --cbr-leak: .15; }
:root[data-theme="dark"] .hc.hc--cbr { --hc-a: #b5a4ee; --hc-a-soft: #262039; }

.cbr-hero { padding-top: 34px; }
.cbr-hero-copy { max-width: 820px; }

.cbr-stage {
    display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr);
    gap: 22px; margin-top: 26px; align-items: stretch;
}

/* ---------- 窗景模拟 ---------- */
.cbr-window {
    position: relative; min-height: 430px; border-radius: var(--hc-r); overflow: hidden;
    background: #11131d; border: 1px solid var(--hc-line);
    box-shadow: var(--hc-shadow); isolation: isolate;
}
.cbr-sky {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 18%, #ffd9a0 0%, #e8a878 32%, #8d7bb0 68%, #2a2b45 100%);
    opacity: calc(.12 + var(--cbr-leak) * 2.2); transition: opacity .35s ease;
}
.cbr-rays {
    position: absolute; inset: -20% -10%;
    background: repeating-linear-gradient(112deg, rgba(255, 236, 190, .6) 0 22px, transparent 22px 74px);
    mix-blend-mode: screen; opacity: calc(var(--cbr-leak) * .62); transition: opacity .35s ease;
}
.cbr-room-floor {
    position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
    background: linear-gradient(180deg, #3a3550 0%, #1d1b2a 100%);
    border-top: 1px solid rgba(255,255,255,.08);
    filter: brightness(calc(.7 + var(--cbr-leak) * 1.5)); transition: filter .35s ease;
}
.cbr-frame {
    position: absolute; left: 12%; right: 12%; top: 9%; bottom: 27%;
    border: 12px solid rgba(28, 25, 40, .92); border-radius: 4px;
    box-shadow: 0 0 0 2px rgba(255,255,255,.07), inset 0 0 60px rgba(0,0,0,.25);
}
.cbr-mullion { position: absolute; left: 50%; top: 0; bottom: 0; width: 10px; margin-left: -5px; background: rgba(28,25,40,.92); }
.cbr-cloth {
    position: absolute; top: 6%; bottom: 26%; width: 20%;
    background: repeating-linear-gradient(90deg, #4b4368 0 9px, #3b3554 9px 18px);
    box-shadow: inset -8px 0 18px rgba(0,0,0,.35), 8px 0 22px rgba(0,0,0,.25);
    opacity: calc(.62 + var(--cbr-leak) * .38); transition: opacity .35s ease;
}
.cbr-cloth--l { left: 4%; border-radius: 3px 0 0 3px; }
.cbr-cloth--r { right: 4%; border-radius: 0 3px 3px 0; box-shadow: inset 8px 0 18px rgba(0,0,0,.35), -8px 0 22px rgba(0,0,0,.25); }
.cbr-light-pool {
    position: absolute; left: 18%; right: 18%; bottom: 2%; height: 24%;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 221, 165, .85), transparent 72%);
    opacity: calc(var(--cbr-leak) * .9); transition: opacity .35s ease; mix-blend-mode: screen;
}
.cbr-window-tag {
    position: absolute; top: 18px; left: 18px; padding: 9px 14px; border-radius: 10px;
    background: rgba(14, 14, 24, .72); color: #fff; backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.14);
}
.cbr-window-tag span { display: block; font-size: 10.5px; letter-spacing: .08em; opacity: .8; }
.cbr-window-tag strong { display: block; font-family: var(--hc-serif); font-size: 26px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.cbr-window-foot {
    position: absolute; left: 18px; right: 18px; bottom: 12px; display: flex; justify-content: space-between;
    font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.72);
}
.cbr-window-foot span:last-child { font-family: var(--hc-serif); }

/* ---------- 浮动参数板 ---------- */
.cbr-panel {
    padding: 20px; border: 1px solid var(--hc-line); border-radius: var(--hc-r);
    background: var(--hc-card); box-shadow: var(--hc-shadow);
}
.cbr-panel-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 16px; font-weight: 720; padding-bottom: 12px; border-bottom: 1px dashed var(--hc-line);
}
.cbr-panel-head small { font-size: 11.5px; font-weight: 400; color: var(--hc-muted); }
.cbr-room-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 15px 0; }
.cbr-room-pick button {
    padding: 9px 4px; border: 1px solid var(--hc-line); border-radius: var(--hc-r-sm);
    background: var(--hc-card-2); font-family: inherit; cursor: pointer; transition: all .18s; text-align: center;
}
.cbr-room-pick button b { display: block; font-size: 13px; color: var(--hc-ink-2); }
.cbr-room-pick button small { display: block; font-size: 10px; color: var(--hc-muted); margin-top: 2px; }
.cbr-room-pick button:hover { border-color: var(--hc-a); }
.cbr-room-pick button.is-on { border-color: var(--hc-a); background: var(--hc-a-soft); }
.cbr-room-pick button.is-on b { color: var(--hc-a); }
.cbr-fields { grid-template-columns: 1.2fr 1fr; }
.cbr-slider { margin-top: 14px; }
.cbr-slider label { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 650; color: var(--hc-ink-2); }
.cbr-slider label b { font-family: var(--hc-serif); color: var(--hc-a); font-size: 15px; }
.cbr-slider input[type="range"] { margin-top: 7px; }
.cbr-slider-ticks { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--hc-muted); }
.cbr-switches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
.cbr-panel .hc-btn-row { gap: 8px; }
.cbr-panel .hc-btn { flex: 1 1 auto; font-size: 13px; padding: 9px 10px; }

/* ---------- 遮光率光谱 ---------- */
.cbr-spectrum {
    margin-top: 20px; padding: 18px 20px; border: 1px solid var(--hc-line);
    border-radius: var(--hc-r); background: var(--hc-card); box-shadow: var(--hc-shadow-sm);
}
.cbr-spectrum-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 13px; }
.cbr-spectrum-head span { font-size: 15px; font-weight: 720; }
.cbr-spectrum-head small { font-size: 11.5px; color: var(--hc-muted); }
.cbr-spectrum-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cbr-grade {
    position: relative; padding: 12px 6px 10px; border: 1px solid var(--hc-line); border-radius: var(--hc-r-sm);
    background: var(--hc-card-2); text-align: center; cursor: pointer; font-family: inherit; transition: all .18s;
}
.cbr-grade:hover { border-color: var(--hc-a); transform: translateY(-2px); }
.cbr-grade b { display: block; font-family: var(--hc-serif); font-size: 20px; color: var(--hc-ink); }
.cbr-grade small { display: block; font-size: 10.5px; color: var(--hc-muted); margin-top: 2px; }
.cbr-grade.is-cur { border-color: var(--hc-a); background: var(--hc-a-soft); }
.cbr-grade.is-cur b { color: var(--hc-a); }
.cbr-grade.is-key::after {
    content: "◆ 推荐"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    padding: 1px 7px; border-radius: 999px; background: var(--hc-warm); color: #fff; font-size: 9.5px; white-space: nowrap;
}

/* ---------- 结论 ---------- */
.cbr-verdict { margin-top: 14px; }
.cbr-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 15px; }
.cbr-plan { padding: 18px 19px; border: 1px solid var(--hc-line-2); border-radius: var(--hc-r); background: var(--hc-card); box-shadow: var(--hc-shadow-sm); }
.cbr-plan .tag { font-family: var(--hc-serif); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--hc-a); }
.cbr-plan h3 { margin: 7px 0 9px; font-size: 17px; }
.cbr-plan p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--hc-ink-2); }
.cbr-plan ul { margin: 10px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--hc-ink-2); }
.cbr-plan li { margin-bottom: 5px; }
.cbr .hc-table tr.is-key { background: var(--hc-a-soft); }
.cbr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 980px) {
    .cbr-stage { grid-template-columns: 1fr; }
    .cbr-window { min-height: 330px; }
    .cbr-plans, .cbr-two { grid-template-columns: 1fr; }
    .cbr-spectrum-row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
    .cbr-window { min-height: 270px; }
    .cbr-room-pick { grid-template-columns: repeat(2, 1fr); }
    .cbr-fields, .cbr-switches { grid-template-columns: 1fr; }
    .cbr-spectrum-row { grid-template-columns: repeat(2, 1fr); }
    .cbr-panel { padding: 15px; }
}