/* tire_size_calculator — tool-specific design (instrument cluster: dark panels, cyan current / amber new). Shared: nav, footer, ad script only. */
body[data-tool="tire_size_calculator"] {
  --ts-bg: #EDEEF0; --ts-dark: #16191D; --ts-dark2: #20242A; --ts-dark3: #2C3138; --ts-ink: #121417; --ts-ink2: #4A5059; --ts-mute: #8B919A; --ts-line: #D7DAE0;
  --ts-a: #36C5F0; --ts-b: #FFB020; --ts-ok: #3DDC84; --ts-warn: #FF6B3D;
  --ts-disp: Rajdhani, "Arial Narrow", system-ui, sans-serif; --ts-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--ts-bg); color: var(--ts-ink); font-family: var(--ts-sans);
}
body[data-tool="tire_size_calculator"] .dt-nav { background: var(--ts-dark); border-bottom: 0; }
body[data-tool="tire_size_calculator"] .dt-nav .navbar-brand, body[data-tool="tire_size_calculator"] .dt-nav .nav-link { color: #fff; }
body[data-tool="tire_size_calculator"] .dt-nav .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.dt-bare { display: block; width: 100%; flex: 1; }
.tsx { max-width: 1160px; margin: 0 auto; padding: 32px 20px 64px; }
.ts-hero h1 { margin: 0; font-family: var(--ts-disp); font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }
.ts-hero p { margin: 10px 0 0; font-size: 17px; color: var(--ts-ink2); }

.ts { margin-top: 22px; background: var(--ts-dark); border-radius: 16px; color: #E8EAED; overflow: hidden; box-shadow: 0 20px 44px rgba(18,20,23,.25); }
.ts-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 20px; background: var(--ts-dark2); border-bottom: 1px solid var(--ts-dark3); }
.ts-tire label { display: flex; align-items: center; gap: 8px; font-family: var(--ts-disp); font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #AEB4BD; }
.ts-tire label i { width: 12px; height: 12px; border-radius: 50%; }
.ts-ta label i { background: var(--ts-a); } .ts-tb label i { background: var(--ts-b); }
.ts-tire input { margin-top: 6px; width: 100%; background: var(--ts-dark); border: 2px solid var(--ts-dark3); border-radius: 10px; color: #fff; font-family: var(--ts-disp); font-size: 34px; font-weight: 700; letter-spacing: .02em; padding: 6px 14px; outline: none; }
.ts-ta input:focus { border-color: var(--ts-a); } .ts-tb input:focus { border-color: var(--ts-b); }
.ts-tire input.bad { border-color: var(--ts-warn); }
.ts-tire small { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ts-mute); }
.ts-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ts-chips button { border: 1px solid var(--ts-dark3); background: transparent; color: #C5CAD1; font: inherit; font-size: 12.5px; padding: 4px 9px; border-radius: 999px; cursor: pointer; }
.ts-ta .ts-chips button:hover { border-color: var(--ts-a); color: var(--ts-a); } .ts-tb .ts-chips button:hover { border-color: var(--ts-b); color: var(--ts-b); }
.ts-swap { margin-top: 34px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ts-dark3); background: var(--ts-dark); color: #fff; font-size: 20px; cursor: pointer; }
.ts-unit { margin-top: 30px; display: inline-flex; border: 2px solid var(--ts-dark3); border-radius: 10px; overflow: hidden; }
.ts-unit button { border: 0; background: transparent; color: #AEB4BD; font-family: var(--ts-disp); font-size: 16px; font-weight: 700; padding: 8px 12px; cursor: pointer; }
.ts-unit button[aria-pressed="true"] { background: #E8EAED; color: var(--ts-dark); }

.ts-out { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 20px; padding: 20px; }
.ts-gauge { background: radial-gradient(120% 140% at 50% 120%, #2A3038 0%, #16191D 60%); border: 1px solid var(--ts-dark3); border-radius: 14px; padding: 16px 18px; text-align: center; }
.ts-gauge span { display: block; font-family: var(--ts-disp); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-mute); }
.ts-big { display: block; font-family: var(--ts-disp); font-size: 72px; line-height: 1; font-weight: 700; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.ts-big.ok { color: var(--ts-ok); } .ts-big.warn { color: var(--ts-warn); }
.ts-gauge em { font-style: normal; font-size: 13.5px; color: #AEB4BD; }
.ts-fig { margin-top: 12px; background: #1B1F24; border: 1px solid var(--ts-dark3); border-radius: 14px; padding: 8px; }
.ts-fig svg { display: block; width: 100%; height: auto; }
.ts-fig .gnd { stroke: #4A5059; stroke-width: 2; }
.ts-fig .ta { fill: rgba(54,197,240,.08); stroke: var(--ts-a); stroke-width: 10; }
.ts-fig .tb { fill: rgba(255,176,32,.08); stroke: var(--ts-b); stroke-width: 10; }
.ts-fig .rim { fill: #2C3138; stroke-width: 3; } .ts-fig .ta-r { stroke: #6FD6F5; } .ts-fig .tb-r { stroke: #FFCB6B; }
.ts-fig .ref { stroke: #8B919A; stroke-width: 1.5; stroke-dasharray: 5 5; }
.ts-fig text { font-family: var(--ts-disp); font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ts-fig .la { fill: var(--ts-a); } .ts-fig .lb { fill: var(--ts-b); }
.ts-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ts-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ts-table th { text-align: right; font-family: var(--ts-disp); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-mute); padding: 6px 10px; border-bottom: 1px solid var(--ts-dark3); white-space: nowrap; }
.ts-table th:first-child { text-align: left; }
.ts-table th i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; } .ts-table .sa { background: var(--ts-a); } .ts-table .sb { background: var(--ts-b); }
.ts-table td { padding: 9px 10px; border-bottom: 1px solid #23272D; text-align: right; font-variant-numeric: tabular-nums; }
.ts-table td:first-child { text-align: left; color: #AEB4BD; }
.ts-table td:nth-child(2) { color: #9BE3FA; } .ts-table td:nth-child(3) { color: #FFD48A; } .ts-table td:last-child { color: #fff; font-weight: 700; }
.ts-table tr.sub td { color: var(--ts-mute); font-size: 13.5px; } .ts-table tr.sub td:last-child { color: #fff; }
.ts-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ts-card { background: var(--ts-dark2); border: 1px solid var(--ts-dark3); border-radius: 12px; padding: 14px 16px; }
.ts-card h3 { margin: 0 0 8px; font-family: var(--ts-disp); font-size: 17px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #E8EAED; }
.ts-speed { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ts-speed th { text-align: left; font-size: 12px; color: var(--ts-mute); font-weight: 600; padding: 4px 0; }
.ts-speed td { padding: 4px 0; font-variant-numeric: tabular-nums; } .ts-speed td:last-child { color: var(--ts-b); font-weight: 600; }
.ts-f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #AEB4BD; }
.ts-f input { background: var(--ts-dark); border: 2px solid var(--ts-dark3); border-radius: 8px; color: #fff; font-family: var(--ts-disp); font-size: 24px; font-weight: 700; padding: 4px 10px; outline: none; width: 120px; }
.ts-f input:focus { border-color: var(--ts-b); }
.ts-gear { display: block; margin-top: 10px; font-family: var(--ts-disp); font-size: 44px; line-height: 1; font-weight: 700; color: var(--ts-b); }
.ts-card small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ts-mute); }

.ts-adwrap { margin: 40px 0 8px; }
.ts-article, .ts-faq, .ts-more { max-width: 800px; margin: 0 auto; }
.ts-article { margin-top: 44px; font-size: 17px; line-height: 1.75; color: var(--ts-ink2); }
.ts-article h2, .ts-faq h2, .ts-more h2 { font-family: var(--ts-disp); font-size: 34px; line-height: 1.1; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; color: var(--ts-ink); margin: 52px 0 12px; }
.ts-article h2:first-child { margin-top: 0; }
.ts-article p { margin: 0 0 14px; } .ts-article b { color: var(--ts-ink); }
.ts-eq { margin: 14px 0 16px; padding: 14px 16px; background: var(--ts-dark); color: #E8EAED; border-left: 6px solid var(--ts-b); border-radius: 6px; font-family: var(--ts-disp); font-size: 20px; font-weight: 600; line-height: 1.5; }
.ts-tbl { overflow-x: auto; margin: 16px 0; background: #fff; border: 1px solid var(--ts-line); border-radius: 10px; }
.ts-tbl table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ts-tbl th { text-align: left; padding: 10px 12px; background: var(--ts-dark); color: #fff; font-family: var(--ts-disp); font-size: 15px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.ts-tbl td { padding: 9px 12px; border-bottom: 1px solid #EEF0F3; color: var(--ts-ink); font-variant-numeric: tabular-nums; }
.ts-tbl td:first-child { font-weight: 700; white-space: nowrap; }
.ts-tbl tr:last-child td { border-bottom: 0; }
.ts-q { border-bottom: 1px solid var(--ts-line); }
.ts-q summary { list-style: none; cursor: pointer; padding: 16px 32px 16px 0; position: relative; font-size: 18px; font-weight: 600; color: var(--ts-ink); }
.ts-q summary::-webkit-details-marker { display: none; }
.ts-q summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 24px; color: var(--ts-b); }
.ts-q[open] summary::after { content: "\2212"; }
.ts-q p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: var(--ts-ink2); }
.ts-more > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ts-more a { display: block; text-decoration: none; padding: 14px 16px; border: 1px solid var(--ts-line); border-radius: 10px; background: #fff; color: var(--ts-ink); }
.ts-more a:hover { border-color: var(--ts-ink); }
.ts-more b { display: block; font-size: 16px; } .ts-more span { display: block; font-size: 14px; color: var(--ts-mute); margin-top: 2px; }

@media (max-width: 980px) { .ts-out { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .ts-in { grid-template-columns: minmax(0, 1fr); }
  .ts-swap { margin: 0 auto; transform: rotate(90deg); }
  .ts-unit { margin-top: 0; }
}
@media (max-width: 640px) {
  .tsx { padding: 22px 12px 48px; }
  .ts-hero h1 { font-size: 40px; } .ts-hero p { font-size: 16px; }
  .ts-in, .ts-out { padding: 14px; }
  .ts-tire input { font-size: 28px; }
  .ts-big { font-size: 58px; }
  .ts-table { font-size: 13.5px; } .ts-table td, .ts-table th { padding: 7px 5px; }
  .ts-2 { grid-template-columns: minmax(0, 1fr); }
  .ts-article { font-size: 16px; }
  .ts-article h2, .ts-faq h2, .ts-more h2 { font-size: 28px; margin-top: 40px; }
  .ts-more > div { grid-template-columns: minmax(0, 1fr); }
}