.sv-public-tools-shell { width:min(1080px,calc(100% - 40px)); padding-bottom:45px; }
.sv-tools-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-height:58px; color:var(--muted); font-size:12px; }
.sv-tools-breadcrumb strong { color:var(--ink); font-weight:650; }
.sv-tools-breadcrumb a:hover { color:var(--blue); }
.sv-tools-hero { display:flex; align-items:center; gap:20px; padding:25px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(125deg,var(--soft),var(--surface)); }
.sv-tools-hero > span { flex:0 0 62px; height:62px; display:grid; place-items:center; border-radius:15px; background:var(--surface); color:var(--blue); }
.sv-tools-hero .sv-icon { width:32px; height:32px; }
.sv-tools-hero p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.sv-tools-hero p:first-child { color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.12em; }
.sv-tools-hero h1 { margin:5px 0; color:var(--ink); font-size:30px; }
.sv-tools-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:23px; }
.sv-tools-tool { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:25px; border:1px solid var(--line); border-radius:13px; background:var(--surface); box-shadow:0 5px 22px rgba(25,54,89,.06); }
.sv-tools-tool-icon { width:52px; height:52px; display:grid; place-items:center; color:var(--blue); background:var(--soft); border-radius:12px; }
.sv-tools-tool-icon .sv-icon { width:30px; height:30px; }
.sv-tools-tool-labels { display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; }
.sv-tools-tool-labels span { padding:4px 8px; color:var(--muted); background:var(--soft); border-radius:5px; font-size:10px; }
.sv-tools-tool h2 { margin:11px 0 9px; color:var(--ink); font-size:20px; line-height:1.35; }
.sv-tools-tool p { margin:0 0 20px; color:var(--muted); font-size:13px; line-height:1.7; }
.sv-tools-tool .button { margin-top:auto; }
.sv-tools-empty { padding:25px; border:1px solid var(--line); border-radius:12px; color:var(--muted); background:var(--surface); }
.sv-energy-card { padding:28px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 8px 28px rgba(21,47,79,.07); }
.sv-energy-heading { display:flex; gap:13px; align-items:flex-start; margin-bottom:24px; }
.sv-energy-heading > span { flex:0 0 42px; height:42px; display:grid; place-items:center; border-radius:11px; color:#c17905; background:#fff0c9; }
.sv-energy-heading .sv-icon { width:26px; height:26px; }
.sv-energy-heading h1 { margin:0 0 7px; color:var(--ink); font-size:clamp(20px,2.4vw,27px); line-height:1.35; }
.sv-energy-heading p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }
.sv-energy-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px 23px; }
.sv-energy-fields label { position:relative; display:block; color:var(--ink); font-size:13px; font-weight:650; }
.sv-energy-fields label > span { color:var(--muted); font-size:11px; font-weight:500; }
.sv-energy-fields .is-wide { grid-column:1/-1; }
.sv-energy-fields input { display:block; width:100%; min-width:0; min-height:48px; margin-top:7px; padding:11px 16px; border:1px solid var(--line); border-radius:12px; outline:0; color:var(--ink); background:var(--canvas); font:16px/1.4 Inter,Arial,sans-serif; font-variant-numeric:tabular-nums; }
.sv-energy-fields input:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 13%,transparent); }
.sv-energy-fields input[aria-invalid='true'] { border-color:#c63f49; }
.sv-energy-help { margin:0; color:var(--muted); font-size:11px; line-height:1.6; }
.sv-energy-error { margin:0; padding:11px 13px; border:1px solid #edc0c4; border-radius:8px; color:#a82636; background:#fff2f3; font-size:12px; line-height:1.6; }
.sv-energy-error[hidden],.sv-energy-copy-fallback[hidden] { display:none !important; }
.sv-energy-results { margin-top:25px; padding-top:25px; border-top:1px solid var(--line); }
.sv-energy-costs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.sv-energy-costs article { padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--soft); }
.sv-energy-costs article > span { display:block; color:var(--muted); font-size:12px; }
.sv-energy-costs strong { display:block; margin-top:7px; color:var(--ink); font-size:25px; font-weight:800; font-variant-numeric:tabular-nums; }
.sv-energy-costs small { display:block; margin-top:6px; color:var(--muted); font-size:11px; }
.sv-energy-saving { margin-top:22px; padding:21px 15px; border:1px solid #bcdecf; border-radius:13px; color:#167051; background:#edf8f2; text-align:center; }
.sv-energy-saving h2 { margin:0; color:inherit; font-size:14px; line-height:1.5; font-weight:700; }
.sv-energy-saving > strong { display:block; margin:9px 0; font-size:32px; font-weight:850; font-variant-numeric:tabular-nums; }
.sv-energy-saving p { margin:0; color:inherit; font-size:12px; line-height:1.6; }
.sv-energy-saving.is-extra-cost { color:#91500d; border-color:#e4caa2; background:#fff5e5; }
.sv-energy-buttons { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.sv-energy-buttons .button { min-height:44px; padding:10px 16px; font-size:12px; }
.sv-energy-buttons [data-energy-copy] { flex:1 1 200px; }
.sv-energy-buttons button:disabled { opacity:.5; cursor:not-allowed; }
.sv-energy-copy-status { margin:10px 0 0; min-height:18px; color:var(--muted); font-size:11px; line-height:1.5; }
.sv-energy-copy-fallback { display:block; margin-top:12px; color:var(--muted); font-size:12px; }
.sv-energy-copy-fallback textarea { display:block; width:100%; margin-top:7px; padding:12px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--canvas); font:12px/1.6 Inter,Arial,sans-serif; resize:vertical; }
.sv-energy-explanation { margin-top:16px; padding-top:17px; border-top:1px solid var(--line); font-size:12px; }
.sv-energy-explanation summary { color:var(--ink); font-weight:700; cursor:pointer; }
.sv-energy-explanation > div { color:var(--muted); line-height:1.7; }
.sv-energy-explanation p { margin:10px 0 0; }
.sv-energy-after { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:19px; color:var(--muted); font-size:11px; line-height:1.6; }
.sv-energy-after a { color:var(--blue); font-weight:700; }
.sv-energy-after p { margin:0; }
[data-theme='dark'] .sv-energy-heading > span { background:#3d3320; color:#efc465; }
[data-theme='dark'] .sv-energy-saving { color:#a5e1c7; background:#153a30; border-color:#356b56; }
[data-theme='dark'] .sv-energy-saving.is-extra-cost { color:#f2c990; background:#3c2d1e; border-color:#775536; }
[data-theme='dark'] .sv-energy-error { color:#f2bcc4; background:#3d222d; border-color:#834355; }
@media(max-width:680px) {
  .sv-public-tools-shell { width:calc(100% - 24px); padding-bottom:28px; }
  .sv-tools-breadcrumb { min-height:48px; font-size:10px; }
  .sv-tools-hero { padding:18px; gap:13px; align-items:flex-start; }
  .sv-tools-hero > span { flex-basis:43px; height:43px; }
  .sv-tools-hero h1 { font-size:25px; }
  .sv-tools-grid { grid-template-columns:1fr; }
  .sv-tools-tool { padding:21px; }
  .sv-energy-card { padding:18px 15px; border-radius:13px; }
  .sv-energy-heading { gap:10px; margin-bottom:20px; }
  .sv-energy-heading > span { flex-basis:34px; height:34px; }
  .sv-energy-heading h1 { font-size:19px; }
  .sv-energy-fields { grid-template-columns:1fr; gap:16px; }
  .sv-energy-costs { grid-template-columns:1fr; gap:12px; }
  .sv-energy-costs article { padding:15px; }
  .sv-energy-saving > strong { font-size:28px; }
}

/* Shared card/input/result treatment for additional public tools. */
.sv-tool-card { padding:27px; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--ink); box-shadow:0 6px 25px rgba(20,45,80,.06); }
.sv-tool-heading { display:flex; align-items:flex-start; gap:14px; margin-bottom:21px; }
.sv-tool-heading > span { display:grid; place-items:center; flex:0 0 44px; height:44px; border-radius:11px; background:var(--soft); color:var(--blue); }
.sv-tool-heading .sv-icon { width:27px; height:27px; }
.sv-tool-heading h1,.sv-tool-heading h2 { margin:0 0 6px; color:var(--ink); font-size:clamp(20px,2.2vw,27px); line-height:1.35; }
.sv-tool-heading p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }
.sv-tool-presets,.sv-tool-buttons { display:flex; flex-wrap:wrap; gap:9px; margin:17px 0; }
.sv-tool-presets button { padding:8px 12px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:var(--soft); font:650 11px/1.5 Inter,Arial,sans-serif; cursor:pointer; }
.sv-tool-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px 21px; }
.sv-tool-fields label,.sv-tire-form label { display:block; min-width:0; color:var(--ink); font-size:12px; font-weight:650; }
.sv-tool-fields small,.sv-tire-form small { color:var(--muted); font-size:10px; font-weight:500; }
.sv-tool-fields input,.sv-tool-fields select,.sv-tire-form input { display:block; width:100%; min-width:0; min-height:45px; margin-top:6px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--canvas); font:16px/1.4 Inter,Arial,sans-serif; font-variant-numeric:tabular-nums; }
.sv-tool-fields input:focus,.sv-tool-fields select:focus,.sv-tire-form input:focus { outline:2px solid var(--blue); outline-offset:1px; }
.sv-tool-fields input[aria-invalid='true'],.sv-tire-form input[aria-invalid='true'] { border-color:#c54953; }
.sv-tool-fields .is-wide { grid-column:1/-1; }
.sv-tool-help { margin:0; color:var(--muted); font-size:11px; line-height:1.6; }
.sv-tool-error { margin:12px 0; padding:11px 13px; color:#a32a39; background:#fff0f3; border:1px solid #e5b5bf; border-radius:8px; font-size:12px; line-height:1.5; }
.sv-tool-error[hidden],.sv-tool-copy-fallback[hidden],.sv-tire-diagram[hidden] { display:none !important; }
.sv-tool-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin:21px 0; }
.sv-tool-results article { min-width:0; padding:16px; border:1px solid var(--line); border-radius:11px; background:var(--soft); }
.sv-tool-results article > span { display:block; color:var(--muted); font-size:11px; }
.sv-tool-results article > strong { display:block; margin-top:7px; color:var(--ink); font-size:clamp(20px,2vw,26px); line-height:1.25; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.sv-tool-results article > small { display:block; margin-top:7px; color:var(--muted); font-size:10px; line-height:1.5; }
.sv-tool-copy-status { min-height:17px; margin:8px 0; color:var(--muted); font-size:11px; line-height:1.5; }
.sv-tool-copy-fallback { display:block; color:var(--muted); font-size:12px; }
.sv-tool-copy-fallback textarea { display:block; width:100%; margin-top:6px; padding:12px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--canvas); font:12px/1.6 Inter,Arial,sans-serif; }
.sv-tool-explanation { margin-top:16px; padding-top:17px; border-top:1px solid var(--line); font-size:12px; }
.sv-tool-explanation summary { color:var(--ink); font-weight:700; cursor:pointer; }
.sv-tool-explanation p { color:var(--muted); line-height:1.7; }
.sv-tool-note { padding:11px 13px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--soft); font-size:11px; line-height:1.6; }
.sv-tool-note.is-highlight { color:#865112; background:#fff6e4; border-color:#e6d0a1; }
.sv-tire-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.sv-tire-form fieldset { min-width:0; margin:0; padding:16px; border:1px solid var(--line); border-radius:10px; }
.sv-tire-form legend { padding:0 6px; color:var(--blue); font-size:13px; font-weight:700; }
.sv-tire-inputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.sv-tire-form .sv-tool-error { grid-column:1/-1; }
.sv-tire-diagram { max-width:580px; margin:22px auto; padding:15px; border:1px solid var(--line); border-radius:12px; background:var(--canvas); }
.sv-tire-diagram svg { display:block; width:100%; height:auto; }
.sv-tire-outer { fill:#334660; stroke:#819cb9; stroke-width:3; }
.sv-tire-outer.is-new { fill:#265a80; stroke:#73c8e3; }
.sv-tire-rim { fill:#c5d5e7; stroke:#829ab5; stroke-width:5; }
.sv-tire-diagram text { fill:var(--ink); font:700 15px Arial,sans-serif; text-anchor:middle; }
.sv-tool-table-wrap { overflow-x:auto; }
.sv-tool-table { width:100%; border-collapse:collapse; font-size:12px; }
.sv-tool-table caption { text-align:left; margin-bottom:10px; font-weight:750; color:var(--ink); }
.sv-tool-table th,.sv-tool-table td { padding:11px 10px; border-bottom:1px solid var(--line); text-align:left; color:var(--ink); }
.sv-tool-table thead { background:var(--soft); }
.sv-tool-table tbody th { color:var(--muted); font-weight:600; }
.sv-range-soc { margin-top:22px; padding:15px; border:1px solid var(--line); border-radius:10px; background:var(--soft); }
.sv-range-soc > span { display:block; margin-bottom:9px; color:var(--ink); font-size:13px; font-weight:750; }
.sv-range-soc-track { position:relative; height:14px; border-radius:7px; overflow:hidden; background:var(--line); }
.sv-range-soc-track i,.sv-range-soc-track b { position:absolute; inset-block:0; }
.sv-range-soc-track i { left:0; background:#7895b7; }
.sv-range-soc-track b { background:#249c72; }
.sv-guitar-auto { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:18px 0; color:var(--ink); font-size:12px; }
.sv-guitar-auto small { color:var(--muted); font-size:10px; }
.sv-guitar-strings { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; }
.sv-guitar-strings button { min-width:0; padding:11px 5px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--canvas); cursor:pointer; }
.sv-guitar-strings button span,.sv-guitar-strings button small { display:block; color:var(--muted); font-size:9px; }
.sv-guitar-strings button b { display:block; margin:5px 0; font-size:18px; color:var(--ink); }
.sv-guitar-strings button[aria-pressed='true'] { border-color:var(--blue); background:var(--soft); box-shadow:0 0 0 1px var(--blue); }
.sv-guitar-display { margin:21px 0; padding:24px; border:1px solid var(--line); border-radius:13px; background:var(--canvas); text-align:center; }
.sv-guitar-source { display:inline-block; padding:5px 9px; border-radius:6px; color:var(--muted); background:var(--soft); font-size:10px; }
[data-guitar-mode='demo'] .sv-guitar-source { color:#825815; background:#fff0d0; }
.sv-guitar-note { display:block; margin:12px 0 5px; color:var(--ink); font-size:64px; line-height:1.1; }
.sv-guitar-frequency { display:flex; justify-content:center; flex-wrap:wrap; gap:13px; color:var(--muted); font-size:12px; }
.sv-guitar-gauge { position:relative; height:37px; margin:22px 8px 9px; background:linear-gradient(to right,#c19b6a,var(--soft) 45%,#5eaf88 45%,#5eaf88 55%,var(--soft) 55%,#c19b6a); border:1px solid var(--line); border-radius:8px; }
.sv-guitar-center { position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--ink); opacity:.5; }
.sv-guitar-gauge i { position:absolute; top:-5px; bottom:-5px; left:50%; width:4px; border-radius:3px; background:var(--ink); transform:translateX(-50%); transition:left .1s linear; }
.sv-guitar-scale { display:flex; justify-content:space-between; gap:7px; color:var(--muted); font-size:10px; }
.sv-guitar-guidance { min-height:20px; margin:18px 0 4px; color:var(--ink); font-size:15px; font-weight:700; }
.sv-guitar-display > span:last-child { color:var(--muted); font:12px Consolas,monospace; }
.sv-guitar-display.is-tuned .sv-guitar-note,.sv-guitar-display.is-tuned .sv-guitar-guidance { color:#18845b; }
.sv-guitar-demo { margin-top:20px; padding:17px; border:1px dashed var(--line); border-radius:11px; background:var(--soft); }
.sv-guitar-demo header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:7px; }
.sv-guitar-demo h3 { margin:0; color:var(--ink); font-size:14px; }
.sv-guitar-demo header > span { color:var(--muted); font-size:9px; }
.sv-guitar-demo p { color:var(--muted); font-size:11px; line-height:1.6; }
.sv-guitar-demo label { display:block; color:var(--ink); font-size:12px; }
.sv-guitar-demo label b { float:right; }
.sv-guitar-demo input[type='range'] { display:block; width:100%; margin:16px 0; accent-color:var(--blue); }
.sv-tool-buttons button:disabled { opacity:.5; cursor:not-allowed; }
.sv-tools-demo-link { margin:20px 0 0; }
.sv-tools-demo-notice { padding:15px; border:1px solid #e2cd9d; border-radius:10px; color:#75571d; background:#fff6df; font-size:12px; line-height:1.7; }
.sv-tools-demo-nav { display:flex; flex-wrap:wrap; gap:9px; margin:18px 0; }
.sv-tools-demo-nav a { padding:8px 11px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--blue); font-size:11px; font-weight:650; }
.sv-tools-demo-section { margin-top:29px; scroll-margin-top:20px; }
.sv-tools-demo-section-label { margin:0 0 9px; color:var(--muted); font-size:10px; letter-spacing:.03em; }
.sv-tools-demo-section-label a { color:var(--blue); }
[data-theme='dark'] .sv-tool-error { color:#f2bdc8; background:#392631; border-color:#795064; }
[data-theme='dark'] .sv-tool-note.is-highlight,[data-theme='dark'] .sv-tools-demo-notice { color:#ead095; background:#352e21; border-color:#756342; }
[data-theme='dark'] [data-guitar-mode='demo'] .sv-guitar-source { color:#e3c889; background:#403725; }
[data-theme='dark'] .sv-guitar-display.is-tuned .sv-guitar-note,[data-theme='dark'] .sv-guitar-display.is-tuned .sv-guitar-guidance { color:#8bdfbb; }
@media(max-width:680px) {
  .sv-tool-card { padding:17px 13px; border-radius:12px; }
  .sv-tool-heading { gap:10px; }
  .sv-tool-heading > span { flex-basis:35px; height:35px; }
  .sv-tool-heading h1,.sv-tool-heading h2 { font-size:19px; }
  .sv-tool-fields,.sv-tire-form { grid-template-columns:1fr; gap:15px; }
  .sv-tool-results { grid-template-columns:1fr; gap:10px; }
  .sv-tire-form fieldset { padding:12px; }
  .sv-tire-inputs { gap:6px; }
  .sv-tire-inputs input { padding-inline:8px; }
  .sv-tool-table th,.sv-tool-table td { padding:9px 5px; font-size:10px; }
  .sv-guitar-strings { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sv-guitar-display { padding:18px 10px; }
  .sv-guitar-note { font-size:52px; }
  .sv-guitar-scale { font-size:8px; }
  .sv-guitar-demo { padding:13px; }
  .sv-tools-demo-link .button { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .sv-guitar-gauge i { transition:none; } }