/* TeslaBytes TCO Calculator */
.calc-hero { text-align: center; padding: 3rem 1.5rem 1rem; }
.calc-hero h1 { font-size: 2.6rem; font-weight: 800; color: #fff; }
.calc-hero h1 .accent { color: #E31937; }
.calc-hero p { color: #888; max-width: 640px; margin: 0.75rem auto 0; font-size: 1.05rem; }
.calc-badges { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-top:1rem; }
.calc-badges span { background:#15151f; border:1px solid #2A2A3A; color:#bbb; font-size:.72rem; font-weight:700; padding:.35rem .8rem; border-radius:50px; text-transform:uppercase; letter-spacing:.03em; }

.calc-toolbar { max-width:1180px; margin:0 auto; padding:0 1.5rem; display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; align-items:center; }
.calc-toolbar .mode-seg { order:1; }
.calc-toolbar .tools { order:2; display:flex; gap:.5rem; }
.calc-toolbar .presets { order:3; flex:1 1 100%; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.solar-cta { display:flex; gap:1rem; align-items:flex-start; margin:1.25rem 0; padding:1.1rem 1.25rem; border-radius:14px; background:linear-gradient(135deg, rgba(255,180,40,.12), rgba(255,120,40,.05)); border:1px solid rgba(255,180,40,.32); }
.solar-cta-ic { font-size:1.9rem; line-height:1; }
.solar-cta-body h3 { margin:0 0 .35rem; font-size:1.02rem; color:#ffd27a; }
.solar-cta-body p { margin:0 0 .8rem; font-size:.9rem; color:#cdd; line-height:1.55; }
.solar-cta-btn { display:inline-block; background:linear-gradient(135deg,#ffb02e,#ff7a2e); color:#1a1206; font-weight:800; font-size:.85rem; padding:.55rem 1.1rem; border-radius:50px; text-decoration:none; transition:.15s; }
.solar-cta-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.calc-toolbar .preset, .calc-toolbar .tbtn { background:#15151f; border:1px solid #2A2A3A; color:#cbd; font:inherit; font-size:.78rem; font-weight:700; padding:.45rem .85rem; border-radius:50px; cursor:pointer; transition:.15s; }
.calc-toolbar .preset:hover { border-color:#E31937; color:#fff; }
.calc-toolbar .tbtn { border-radius:8px; background:#1a1a26; }
.calc-toolbar .tbtn:hover { border-color:#3B82F6; color:#fff; }

.calc-grid { max-width: 1180px; margin: 1rem auto 1.5rem; padding: 0 1.5rem 3rem; display: grid; grid-template-columns: 360px 1fr; gap: 1.75rem; align-items: start; }
@media (max-width: 880px) { .calc-grid { grid-template-columns: 1fr; } }

#calc-form { background:#10101a; border:1px solid #1E1E2E; border-radius:14px; padding:.5rem 1rem 1rem; position:sticky; top:90px; }
@media (max-width: 880px){ #calc-form{ position:static; } }
.grp { border-bottom:1px solid #1E1E2E; }
.grp:last-child{ border-bottom:0; }
.grp > summary { cursor:pointer; font-weight:800; color:#fff; padding:.85rem .25rem; font-size:.92rem; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.grp > summary::-webkit-details-marker{ display:none; }
.grp > summary::after{ content:'+'; color:#E31937; font-weight:800; }
.grp[open] > summary::after{ content:'–'; }
.grp-note { color:#eab308; font-size:.78rem; margin:0 .25rem .5rem; }
.flds { display:grid; gap:.6rem; padding:0 .25rem .9rem; }
.fld { display:flex; flex-direction:column; gap:.25rem; }
.fld > span { font-size:.78rem; color:#9aa; font-weight:600; display:flex; align-items:center; gap:.35rem; }
.fld .inwrap { display:flex; align-items:center; background:#0a0a12; border:1px solid #2A2A3A; border-radius:8px; padding:0 .6rem; }
.fld .inwrap:focus-within { border-color:#E31937; }
.fld .inwrap i { color:#666; font-style:normal; font-size:.85rem; }
.fld .inwrap em { color:#666; font-style:normal; font-size:.72rem; white-space:nowrap; }
.fld input[type=number], .fld select { background:transparent; border:0; color:#fff; font:inherit; font-size:.92rem; padding:.5rem .35rem; width:100%; outline:none; }
.fld select { background:#0a0a12; border:1px solid #2A2A3A; border-radius:8px; padding:.5rem; }
.fld-toggle { flex-direction:row; justify-content:space-between; align-items:center; }
.fld-toggle input { width:18px; height:18px; accent-color:#E31937; }
.tip { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:#2A2A3A; color:#bbb; font-size:.65rem; cursor:help; }

#calc-results { min-height:300px; }
.verdict { background:linear-gradient(135deg,#1a0f12,#10101a); border:1px solid #2A2A3A; border-left:4px solid #E31937; border-radius:12px; padding:1.1rem 1.3rem; color:#ddd; font-size:1.05rem; }
.verdict.ice { border-left-color:#3B82F6; }
.verdict strong { color:#fff; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:1.25rem 0; }
@media (max-width:720px){ .cards { grid-template-columns:repeat(2,1fr); } }
.card { background:#10101a; border:1px solid #1E1E2E; border-radius:12px; padding:1rem; }
.card-h { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#888; font-weight:700; }
.card-v { font-size:1.65rem; font-weight:800; color:#fff; margin:.2rem 0; }
.card-s { font-size:.74rem; color:#777; }
.chart-wrap { background:#10101a; border:1px solid #1E1E2E; border-radius:12px; padding:1.1rem 1.2rem; margin:1.1rem 0; }
.chart-wrap h3 { color:#fff; font-size:1rem; margin-bottom:.5rem; }
.tco-chart { width:100%; height:auto; }
.cap { color:var(--dim); font-size:.78rem; margin-top:.4rem; }
.maint-detail { margin-top:1rem; border-top:1px solid #1E1E2E; padding-top:.75rem; }
.maint-detail > summary { cursor:pointer; color:#cbd; font-weight:700; font-size:.9rem; }
.maint-detail > summary b { color:#fff; }
.maint-table { width:100%; border-collapse:collapse; margin-top:.75rem; font-size:.85rem; }
.maint-table th, .maint-table td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid #1A1A26; }
.maint-table th { color:#888; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; }
.maint-table td:nth-child(2), .maint-table th:nth-child(2), .maint-table td:nth-child(3), .maint-table th:nth-child(3) { text-align:right; width:90px; }
.maint-table td { color:#cbd; }
.maint-table .skip { color:#22c55e; font-size:.72rem; }
.fun { background:#0e1a12; border:1px solid #14331f; border-radius:10px; padding:.9rem 1.1rem; color:#bcd; font-size:.9rem; }
.fun b { color:#22c55e; }

.aff { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.75rem; margin:1.25rem 0; }
.aff-card { display:flex; flex-direction:column; gap:.2rem; background:#10101a; border:1px solid #2A2A3A; border-radius:10px; padding:.85rem 1rem; text-decoration:none; transition:.15s; }
.aff-card:hover { border-color:#E31937; transform:translateY(-2px); }
.aff-card b { color:#fff; font-size:.9rem; }
.aff-card span { color:#888; font-size:.78rem; }
.ad-slot { min-height:90px; margin:1rem 0; }

/* Affiliate product showcase */
.products { max-width:1180px; margin:1.5rem auto; padding:0 1.5rem; }
.products .section-head h2 { color:#fff; font-size:1.6rem; font-weight:800; }
.products .section-head p { color:#888; font-size:.95rem; margin:.3rem 0 1rem; }
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.prod-card { display:flex; flex-direction:column; gap:.35rem; background:#10101a; border:1px solid #1E1E2E; border-radius:12px; padding:1.1rem; text-decoration:none; transition:.15s; }
.prod-card:hover { border-color:#E31937; transform:translateY(-3px); }
.prod-icon { font-size:1.6rem; }
.prod-name { color:#fff; font-weight:800; font-size:1rem; }
.prod-blurb { color:#9aa; font-size:.82rem; line-height:1.45; flex:1; }
.prod-cta { color:#E31937; font-weight:700; font-size:.85rem; margin-top:.3rem; }
.prod-card:hover .prod-cta { color:#ff3850; }
.aff-disclosure { color:var(--dim); font-size:.74rem; margin-top:1rem; font-style:italic; }
.fresh { color:var(--dim); font-size:.76rem; margin-top:1rem; }
.fresh a { color:#3B82F6; text-decoration:none; }

.calc-seo { max-width:820px; margin:0 auto; padding:1rem 1.5rem 4rem; color:#aaa; line-height:1.7; }
.calc-seo h2 { color:#fff; font-size:1.5rem; margin:2rem 0 .6rem; }
.calc-seo h3 { color:#E31937; font-size:1.05rem; margin:1.4rem 0 .4rem; }
.calc-seo p, .calc-seo li { font-size:.96rem; }
.calc-seo ul { margin-left:1.2rem; }
.calc-seo a { color:#3B82F6; }

/* ===== Precision-Instrument refresh (overrides; aligns with style.css tokens) ===== */
.calc-hero { padding:3.5rem 1.5rem 1rem; }
.calc-hero h1 { font-family:var(--display); font-size:clamp(2.3rem,5.2vw,3.6rem); font-weight:800; letter-spacing:-.025em; }
.calc-hero h1 .accent { color:var(--red); }
.calc-hero p { color:var(--muted); }
.calc-badges span { background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; }

#calc-form { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
.grp > summary { font-family:var(--display); letter-spacing:-.01em; }
.grp > summary::after { color:var(--red); }
.fld > span { color:var(--muted); }
.fld .inwrap { background:var(--bg-2); border:1px solid var(--line); border-radius:10px; transition:border-color .18s var(--ease), box-shadow .18s var(--ease); }
.fld .inwrap:focus-within { border-color:var(--red); box-shadow:0 0 0 3px rgba(227,25,55,.16); }
.fld input[type=number], .fld select { font-family:var(--mono); font-variant-numeric:tabular-nums; color:#fff; }
.fld select { background:var(--bg-2); border:1px solid var(--line); border-radius:10px; }
.fld-toggle input { accent-color:var(--red); }

.calc-toolbar .preset, .calc-toolbar .tbtn { background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--muted); font-weight:600; }
.calc-toolbar .preset:hover { border-color:var(--red); color:#fff; }

.verdict { background:linear-gradient(135deg, rgba(227,25,55,.10), var(--surface)); border:1px solid var(--line); border-left:3px solid var(--red); border-radius:var(--r); font-size:1.06rem; }
.verdict.ice { border-left-color:var(--ice); background:linear-gradient(135deg, rgba(110,162,255,.10), var(--surface)); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
.card-h { color:var(--dim); font-family:var(--mono); letter-spacing:.08em; }
.card-v { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; font-weight:700; color:#fff; }
.card-v.pos { color:var(--green); }   /* saves money → green */
.card-v.neg { color:var(--red); }     /* costs money → red */
.card-s { color:var(--dim); }
.chart-wrap { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
.chart-wrap h3 { font-family:var(--display); }
.fun { background:linear-gradient(135deg, rgba(47,210,122,.07), var(--surface)); border:1px solid rgba(47,210,122,.18); }
.fun b { color:var(--green); }
.maint-table .num, .maint-table td:nth-child(2), .maint-table td:nth-child(3) { font-family:var(--mono); font-variant-numeric:tabular-nums; }

.aff-card { background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.aff-card:hover { border-color:var(--red); }
.prod-card { background:var(--surface); border:1px solid var(--line); }
.prod-card:hover { border-color:var(--red); transform:translateY(-3px); box-shadow:var(--shadow); }
.prod-cta { color:var(--red); }
.products .section-head h2 { font-family:var(--display); }

.calc-seo h2, .calc-seo h3, .calc-seo h1 { font-family:var(--display); }
.calc-seo a { color:var(--ice); }

/* Year-by-year breakdown table */
.maint-table.yt td:nth-child(n+2), .maint-table.yt th:nth-child(n+2) { text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; width:auto; }
.maint-table.yt th { font-family:var(--body); }
.maint-table .pos { color:var(--green); }
.maint-table .neg { color:var(--red); }

/* Basic / Advanced mode segmented control */
.mode-seg { display:inline-flex; background:var(--bg-2); border:1px solid var(--line); border-radius:50px; padding:3px; }
.mode-seg .seg { background:transparent; border:0; color:var(--muted); font:inherit; font-weight:700; font-size:.82rem; padding:.4rem 1.1rem; border-radius:50px; cursor:pointer; transition:.18s var(--ease); }
.mode-seg .seg.on { background:var(--red-deep); color:#fff; box-shadow:0 6px 18px -8px rgba(227,25,55,.6); }
.mode-seg .seg:not(.on):hover { color:#fff; }
.go-advanced { text-align:center; margin:1.75rem 0 .5rem; }
/* Mirrors the verdict banner's scheme: subtle red wash over the surface + a red accent border. */
.go-advanced button { display:block; width:100%; text-align:center; background:linear-gradient(135deg, rgba(227,25,55,.13), var(--surface)); border:1px solid var(--line); border-left:3px solid var(--red); color:#fff; font:inherit; font-weight:800; font-size:1.05rem; padding:1.05rem 1.6rem; border-radius:12px; cursor:pointer; transition:.18s var(--ease); }
.go-advanced button:hover { background:linear-gradient(135deg, rgba(227,25,55,.21), var(--surface)); transform:translateY(-1px); box-shadow:0 10px 26px -14px rgba(227,25,55,.6); }
/* Plain white letters (button + affiliate card titles) */
.ga-grad { color:#fff; -webkit-text-fill-color:#fff; }

/* Chart entrance animation — only when #calc-results carries .anim (load / mode-switch) */
#calc-results.anim .bars rect { transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; animation: growbar .6s var(--ease) forwards; }
@keyframes growbar { to { transform: scaleY(1); } }
#calc-results.anim .tornado { animation: fadeUpChart .55s var(--ease) both; }
@keyframes fadeUpChart { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ #calc-results.anim .bars rect, #calc-results.anim .tornado { animation:none; transform:none; } }

/* Rich product tiles (photo-ready: real image when available, designed icon tile otherwise) */
.prod-media { display:block; aspect-ratio: 16/11; border-radius:10px; background: linear-gradient(135deg,#1b1b26,#101018); border:1px solid var(--line); position:relative; overflow:hidden; margin-bottom:.7rem; }
.prod-media::before { content: attr(data-icon); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.7rem; opacity:0; }
.prod-media.noimg::before { opacity:.92; }
.prod-img { width:100%; height:100%; object-fit:contain; background:#fff; display:block; }
.prod-media.noimg .prod-img { display:none; }
.prod-media.hasart { display:flex; align-items:center; justify-content:center; }
.prod-media.hasart::before { display:none; }
.prod-art { width:78%; height:78%; display:block; }
.prod-card:hover .prod-art { transform:scale(1.04); transition:transform .18s ease; }
.prod-price { color:var(--green); font-family:var(--mono); font-size:.82rem; font-weight:700; }

/* Per-state snapshot chips — makes the state cascade visible */
.state-chips { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:0 0 1.25rem; padding:.7rem .85rem;
  background:linear-gradient(135deg, rgba(110,162,255,.06), var(--surface)); border:1px solid var(--line);
  border-left:3px solid var(--ice); border-radius:var(--r); animation:chipsIn .35s var(--ease, ease) both; }
@keyframes chipsIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.schip-h { font-weight:700; font-size:.82rem; color:var(--ice); letter-spacing:.01em; margin-right:.15rem; white-space:nowrap; }
.schip { display:inline-flex; align-items:baseline; gap:.35rem; padding:.28rem .6rem; background:var(--bg-2);
  border:1px solid var(--line); border-radius:50px; white-space:nowrap; }
.schip-k { color:var(--muted); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; }
.schip-v { color:#eef; font-family:var(--mono); font-size:.8rem; font-weight:600; }
.schip-live { margin-left:.4rem; padding:.05rem .35rem; border-radius:50px; background:rgba(47,210,122,.14);
  color:var(--green); font-family:var(--mono); font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  position:relative; top:-1px; }
@media (max-width:560px) { .state-chips { gap:.4rem; padding:.6rem .65rem; } .schip { padding:.24rem .5rem; } .schip-k { font-size:.62rem; } }

/* Gas-price parity stress-test line under the verdict */
.parity { margin:.5rem 0 0; font-size:.82rem; color:var(--muted); line-height:1.5; }
.parity strong { color:#eef; font-family:var(--mono); font-weight:600; }

/* Accessible tooltip — shows on hover AND keyboard focus; aria-label carries it to AT */
.tip { position:relative; cursor:help; }
.tip::after {
  content:attr(data-tip);
  position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
  width:max-content; max-width:230px; padding:.5rem .65rem;
  background:#1b1b26; color:#e8e8f0; border:1px solid var(--line); border-radius:8px;
  font-size:.74rem; font-weight:400; line-height:1.45; text-transform:none; letter-spacing:normal;
  white-space:normal; text-align:left; box-shadow:0 10px 28px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transition:opacity .15s var(--ease); z-index:60; pointer-events:none;
}
.tip:hover::after, .tip:focus-visible::after { opacity:1; visibility:visible; }

/* ---- Tesla lease estimator tool ---- */
.lease-est { background: linear-gradient(180deg, var(--bg-2), var(--bg)); border:1px solid var(--line); border-radius:16px; padding:1.4rem 1.4rem 1.2rem; margin:1.5rem 0 2rem; }
.lease-controls { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:1rem; align-items:end; }
.lease-field { display:flex; flex-direction:column; gap:.35rem; font-size:.82rem; color:var(--dim); font-weight:600; }
.lease-field > span { letter-spacing:.01em; }
.lease-field select, .lease-field input { width:100%; background:#0a0a10; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:.6rem .7rem; font-size:1rem; font-family:var(--mono); }
.lease-field select:focus, .lease-field input:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(255,45,77,.18); }
.lease-field .le-static { padding:.6rem .2rem; color:var(--text); font-family:var(--mono); font-size:.92rem; }
.lease-result { display:flex; align-items:center; gap:2rem; flex-wrap:wrap; margin-top:1.3rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.le-big { display:flex; align-items:baseline; gap:.15rem; }
.le-num { font-family:var(--display); font-weight:800; font-size:3rem; line-height:1; color:#fff; letter-spacing:-.03em; }
.le-unit { font-size:1.1rem; color:var(--dim); font-weight:700; }
.le-grid { display:flex; gap:1.8rem; flex-wrap:wrap; }
.le-grid > div { display:flex; flex-direction:column; gap:.15rem; }
.le-sub { font-family:var(--mono); font-size:1.25rem; font-weight:700; color:var(--text); }
.le-grid label { font-size:.74rem; color:var(--dim); text-transform:uppercase; letter-spacing:.04em; }
.le-down-warn { margin:1rem 0 0; font-size:.84rem; color:#ffd9a0; background:rgba(255,170,60,.08); border-left:2px solid #ffb23c; padding:.5rem .75rem; border-radius:0 8px 8px 0; }
.le-note { margin:.9rem 0 0; font-size:.8rem; color:var(--dim); line-height:1.5; }
.le-note a { color:var(--red); }
@media (max-width:640px){
  .lease-controls { grid-template-columns:1fr; }
  .lease-result { gap:1.2rem; }
  .le-num { font-size:2.4rem; }
  .le-grid { gap:1.2rem; }
}

/* Conspicuous (but tasteful) calculator disclaimer */
.calc-disclaimer { max-width:980px; margin:1rem auto 0; padding:.7rem 1rem; font-size:.8rem; line-height:1.5;
  color:var(--dim); background:rgba(255,170,60,.06); border:1px solid rgba(255,170,60,.18);
  border-radius:10px; }
.calc-disclaimer strong { color:#ffd9a0; }
.calc-disclaimer a { color:var(--red); }

/* ---- Tesla referral / deals page ---- */
.ref-cta-wrap { text-align:center; margin:1.6rem 0 .4rem; }
.ref-cta-btn { display:inline-block; background:linear-gradient(135deg,var(--red),var(--red-deep)); color:#fff; font-weight:800;
  font-size:1.05rem; padding:.95rem 1.8rem; border-radius:12px; text-decoration:none; box-shadow:0 8px 28px rgba(255,45,77,.32);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease); }
.ref-cta-btn:hover { transform:translateY(-2px); box-shadow:0 12px 34px rgba(255,45,77,.42); color:#fff; }
.ref-perks { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; margin:1.1rem 0; }
.ref-perk { background:linear-gradient(180deg,var(--bg-2),var(--bg)); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.2rem; }
.ref-perk-h { font-family:var(--display); font-weight:800; color:#fff; font-size:1.15rem; }
.ref-perk-v { color:var(--text); font-size:.95rem; margin:.35rem 0 .25rem; line-height:1.4; }
.ref-perk-s { color:#22c55e; font-size:.82rem; font-weight:700; }
.nav-deal { font-weight:800; }

/* Battery degradation estimator — battery graphic + range ladder + gradient slider */
.bd-est { --bdc:#2fd27a; }
.bd-visual { display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:1.6rem; align-items:center; margin:1.3rem 0 .4rem; padding:1.25rem 1.3rem; background:radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,.04), transparent 55%), rgba(255,255,255,.02); border:1px solid var(--line); border-radius:14px; }
@media (max-width:640px){ .bd-visual { grid-template-columns:1fr; gap:.9rem; } }
.bd-batt { width:100%; height:auto; filter:drop-shadow(0 0 18px color-mix(in srgb, var(--bdc) 34%, transparent)); }
.bd-shell { fill:#0a0a12; stroke:#3a3a4a; stroke-width:2.5; }
.bd-cap { fill:#3a3a4a; }
#bd-fill { fill:var(--bdc); opacity:.92; transition:width .35s var(--ease), fill .35s; }
.bd-cells line { stroke:#0a0a12; stroke-width:3.5; opacity:.55; }
#bd-pct { font-family:var(--display); font-weight:800; font-size:30px; fill:#fff; paint-order:stroke; stroke:#0a0a0e; stroke-width:5px; stroke-linejoin:round; }
.bd-readout { display:flex; flex-direction:column; gap:.15rem; }
.bd-range-big { font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,6vw,3.6rem); color:#fff; line-height:1; letter-spacing:-.02em; }
.bd-range-big em { font-style:normal; font-size:.45em; color:var(--bdc); margin-left:.25rem; transition:color .35s; }
.bd-range-sub { color:var(--muted); font-size:.86rem; text-transform:uppercase; letter-spacing:.06em; }
.bd-range-new { color:var(--dim); font-size:.82rem; margin-top:.3rem; }
.bd-sliderblock { margin:1rem 0 .4rem; padding:1rem 1.1rem 1.5rem; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:12px; }
.bd-slider-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.6rem; }
.bd-slider-head span { font-size:.78rem; color:var(--dim); text-transform:uppercase; letter-spacing:.05em; }
.bd-slider-head b { font-family:var(--display); font-size:1.6rem; color:var(--bdc); transition:color .35s; }
#bd-slider { -webkit-appearance:none; appearance:none; width:100%; height:10px; border-radius:6px; background:linear-gradient(90deg,#2fd27a 0%,#a3e635 27%,#fbbf24 44%,#ff2d4d 64%); outline:none; cursor:pointer; }
#bd-slider::-webkit-slider-thumb { -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid #0a0a0e; box-shadow:0 0 0 2px var(--bdc), 0 4px 14px -4px rgba(0,0,0,.8); transition:box-shadow .35s; }
#bd-slider::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid #0a0a0e; box-shadow:0 0 0 2px var(--bdc); }
.bd-floor { position:relative; height:18px; margin-top:.35rem; }
.bd-floor-tick { position:absolute; top:-4px; width:2px; height:10px; background:#ff2d4d; opacity:.85; transform:translateX(-1px); }
.bd-floor-lab { position:absolute; top:7px; transform:translateX(-50%); font-size:.66rem; color:var(--dim); white-space:nowrap; }
.bd-manual-note { margin:.55rem 0 0; font-size:.75rem; color:var(--dim); }
.bd-manual-note a { color:var(--dim); text-decoration:underline; }
.bd-ladder { display:flex; flex-direction:column; gap:.55rem; margin:1.1rem 0 .3rem; padding:1.1rem 1.2rem; background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:12px; }
.bd-lrow { display:grid; grid-template-columns:210px 1fr 72px; gap:.8rem; align-items:center; }
@media (max-width:560px){ .bd-lrow { grid-template-columns:130px 1fr 62px; } }
.bd-llab { font-size:.78rem; color:var(--muted); }
.bd-ltrack { height:14px; background:#0a0a12; border:1px solid #1e1e2e; border-radius:7px; overflow:hidden; }
.bd-lfill { display:block; height:100%; border-radius:6px; width:3%; transition:width .4s var(--ease); }
.bd-l-new { background:#3a3a4a; }
.bd-l-today { background:linear-gradient(90deg, color-mix(in srgb, var(--bdc) 70%, #0a0a12), var(--bdc)); }
.bd-l-winter { background:linear-gradient(90deg,#1e5f8a,#7dd3fc); }
.bd-l-deep { background:linear-gradient(90deg,#173a5e,#3b82f6); }
.bd-l-hot { background:linear-gradient(90deg,#8a5a12,#fbbf24); }
.bd-lval { font-size:.84rem; color:#fff; text-align:right; font-variant-numeric:tabular-nums; }
.bd-badge { margin:.7rem 0 0; font-size:.82rem; line-height:1.5; color:#cdd; background:rgba(255,255,255,.03); border:1px solid var(--line); border-left:3px solid #fbbf24; border-radius:8px; padding:.6rem .8rem; }