/* TeslaBytes TCO Calculator */
.calc-hero { text-align: center; padding: 3rem 1.5rem 1rem; }
.calc-hero h1 { font-size: 2.6rem; font-weight: 900; 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 .presets { display:flex; flex-wrap:wrap; gap:.5rem; }
.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 .tools { display:flex; gap:.5rem; }
.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:900; }
.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(auto-fit,minmax(150px,1fr)); gap:1rem; margin:1.25rem 0; }
.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:900; 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:#777; 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:900; }
.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:#666; font-size:.74rem; margin-top:1rem; font-style:italic; }
.fresh { color:#666; 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-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); }