.cam-tyre-tool,
.cam-tyre-tool * { box-sizing: border-box; }

.cam-tyre-tool {
  --cam-ink: #172033;
  --cam-muted: #667187;
  --cam-line: #dce2eb;
  --cam-surface: #fff;
  --cam-soft: #f5f7fa;
  --cam-primary: #2158d5;
  --cam-primary-dark: #183f9b;
  --cam-ok: #16834b;
  --cam-ok-soft: #eaf8f0;
  --cam-bad: #c3392f;
  --cam-bad-soft: #fff0ef;
  --cam-warn: #a56800;
  --cam-warn-soft: #fff7df;
  background: var(--cam-surface);
  border: 1px solid var(--cam-line);
  border-radius: 24px;
  box-shadow: 0 18px 55px rgba(23,32,51,.1);
  color: var(--cam-ink);
  font-family: inherit;
  line-height: 1.5;
  margin: 2rem auto;
  max-width: 1180px;
  overflow: hidden;
}

.cam-tyre-tool button,
.cam-tyre-tool input,
.cam-tyre-tool select { font: inherit; }

.cam-tyre-tool__header {
  align-items: center;
  background: linear-gradient(135deg,#172033 0%,#243457 100%);
  color: #fff;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  padding: clamp(1.5rem,4vw,3rem);
}

.cam-tyre-tool__header h2 { color:#fff; font-size:clamp(1.65rem,3vw,2.45rem); line-height:1.15; margin:0 0 .65rem; }
.cam-tyre-tool__header p { color:rgba(255,255,255,.78); margin:0; max-width:780px; }
.cam-tyre-tool__eyebrow { font-size:.75rem; font-weight:850; letter-spacing:.13em; margin:0 0 .7rem; text-transform:uppercase; }
.cam-tyre-tool__badge { align-items:center; aspect-ratio:1; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24); border-radius:50%; display:flex; flex:0 0 104px; flex-direction:column; justify-content:center; text-align:center; }
.cam-tyre-tool__badge span { font-size:1.45rem; font-weight:850; line-height:1; }
.cam-tyre-tool__badge small { color:rgba(255,255,255,.72); font-size:.7rem; margin-top:.35rem; text-transform:uppercase; }

.cam-tyre-form { padding:clamp(1.25rem,3vw,2.25rem); }
.cam-tyre-grid { align-items:stretch; display:grid; gap:1rem; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
.cam-tyre-card { background:var(--cam-soft); border:1px solid var(--cam-line); border-radius:18px; margin:0; min-width:0; padding:1.35rem; }
.cam-tyre-card legend { align-items:center; color:var(--cam-ink); display:flex; font-size:1.08rem; font-weight:800; padding:0 .4rem; }
.cam-tyre-step { align-items:center; background:var(--cam-primary); border-radius:50%; color:#fff; display:inline-flex; font-size:.8rem; height:1.75rem; justify-content:center; margin-right:.55rem; width:1.75rem; }
.cam-tyre-help { color:var(--cam-muted); font-size:.88rem; margin:.15rem 0 1.1rem; }

.cam-tyre-size-inputs { align-items:end; display:grid; gap:.45rem; grid-template-columns:1fr auto .85fr auto .8fr; }
.cam-tyre-size-inputs label,
.cam-tyre-index-grid label,
.cam-tyre-speed-field { display:block; min-width:0; }
.cam-tyre-size-inputs label>span,
.cam-tyre-index-grid label>span,
.cam-tyre-speed-field>span:first-child,
.cam-equivalent-filters label>span { color:var(--cam-muted); display:block; font-size:.72rem; font-weight:780; margin-bottom:.35rem; text-transform:uppercase; }
.cam-tyre-size-inputs label { position:relative; }
.cam-tyre-size-inputs input,
.cam-tyre-index-grid input,
.cam-tyre-index-grid select,
.cam-tyre-speed-field input,
.cam-equivalent-filters select { background:#fff; border:1px solid #cbd3df; border-radius:10px; color:var(--cam-ink); min-height:48px; outline:none; padding:.7rem .75rem; transition:border-color .16s ease,box-shadow .16s ease; width:100%; }
.cam-tyre-size-inputs input { font-size:1.15rem; font-weight:750; padding-right:2.2rem; }
.cam-tyre-size-inputs input:focus,
.cam-tyre-index-grid input:focus,
.cam-tyre-index-grid select:focus,
.cam-tyre-speed-field input:focus,
.cam-equivalent-filters select:focus { border-color:var(--cam-primary); box-shadow:0 0 0 3px rgba(33,88,213,.14); }
.cam-tyre-size-inputs label small { bottom:.86rem; color:var(--cam-muted); font-size:.72rem; pointer-events:none; position:absolute; right:.65rem; }
.cam-tyre-separator,.cam-tyre-r { color:#8b95a8; font-size:1.3rem; font-weight:800; padding-bottom:.65rem; }
.cam-tyre-index-grid { border-top:1px dashed #cbd3df; display:grid; gap:.85rem; grid-template-columns:1fr 1fr; margin-top:1rem; padding-top:1rem; }
.cam-tyre-swap { align-self:center; background:#fff; border:1px solid var(--cam-line); border-radius:50%; box-shadow:0 6px 20px rgba(23,32,51,.12); color:var(--cam-primary); cursor:pointer; font-size:1.35rem; height:48px; padding:0; transition:transform .18s ease,box-shadow .18s ease; width:48px; }
.cam-tyre-swap:hover,.cam-tyre-swap:focus-visible { box-shadow:0 8px 26px rgba(23,32,51,.2); transform:rotate(180deg); }

.cam-tyre-toolbar { align-items:end; border-top:1px solid var(--cam-line); display:flex; gap:1.25rem; justify-content:space-between; margin-top:1.45rem; padding-top:1.35rem; }
.cam-tyre-speed-field { max-width:340px; }
.cam-tyre-speed-field__input { display:flex; position:relative; }
.cam-tyre-speed-field__input input { padding-right:4rem; }
.cam-tyre-speed-field__input small { color:var(--cam-muted); position:absolute; right:.8rem; top:50%; transform:translateY(-50%); }
.cam-tyre-actions { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:flex-end; }
.cam-tyre-button { border:1px solid transparent; border-radius:11px; cursor:pointer; font-weight:800; min-height:46px; padding:.7rem 1rem; }
.cam-tyre-button:disabled { cursor:not-allowed; opacity:.45; }
.cam-tyre-button--primary { background:var(--cam-primary); color:#fff; }
.cam-tyre-button--primary:hover,.cam-tyre-button--primary:focus-visible { background:var(--cam-primary-dark); }
.cam-tyre-button--ghost { background:#fff; border-color:var(--cam-line); color:var(--cam-ink); }
.cam-tyre-form-error { background:var(--cam-bad-soft); border-left:4px solid var(--cam-bad); border-radius:8px; color:#86221c; margin:1rem 0 0; padding:.85rem 1rem; }

.cam-tyre-results { background:#f7f9fc; border-top:1px solid var(--cam-line); padding:clamp(1.25rem,3vw,2.25rem); }
.cam-tyre-status { align-items:center; border:1px solid; border-radius:16px; display:flex; gap:1rem; padding:1.15rem 1.25rem; }
.cam-tyre-status.is-ok { background:var(--cam-ok-soft); border-color:#b9e4ca; }
.cam-tyre-status.is-bad { background:var(--cam-bad-soft); border-color:#f0c0bc; }
.cam-tyre-status.is-incomplete { background:var(--cam-warn-soft); border-color:#edd695; }
.cam-tyre-status__icon { align-items:center; border:2px solid currentColor; border-radius:50%; display:flex; flex:0 0 46px; font-size:1.4rem; font-weight:900; height:46px; justify-content:center; }
.is-ok .cam-tyre-status__icon { color:var(--cam-ok); }
.is-bad .cam-tyre-status__icon { color:var(--cam-bad); }
.is-incomplete .cam-tyre-status__icon { color:var(--cam-warn); }
.cam-tyre-status__label { color:var(--cam-muted); font-size:.7rem; font-weight:850; letter-spacing:.1em; margin:0 0 .15rem; }
.cam-tyre-status h3 { color:var(--cam-ink); font-size:1.25rem; margin:0 0 .15rem; }
.cam-tyre-status p:last-child { color:#4f5b71; margin:0; }

.cam-tyre-summary-grid { display:grid; gap:.85rem; grid-template-columns:1fr 1fr 1fr; margin:1.3rem 0 1rem; }
.cam-tyre-summary-grid article { background:#fff; border:1px solid var(--cam-line); border-radius:13px; padding:1rem; text-align:center; }
.cam-tyre-summary-grid span,.cam-tyre-summary-grid small { color:var(--cam-muted); display:block; }
.cam-tyre-summary-grid span { font-size:.72rem; font-weight:800; text-transform:uppercase; }
.cam-tyre-summary-grid strong { display:block; font-size:1.25rem; margin:.3rem 0 .1rem; }
.cam-tyre-meter { background:linear-gradient(90deg,#f0c0bc 0 20%,#bfe7cf 20% 80%,#f0c0bc 80% 100%); border-radius:999px; height:10px; margin:1rem auto 0; max-width:520px; position:relative; }
.cam-tyre-meter__marker { background:#fff; border:3px solid currentColor; border-radius:50%; height:21px; position:absolute; top:50%; transform:translate(-50%,-50%); width:21px; }
.cam-tyre-meter__marker.is-ok { color:var(--cam-ok); }
.cam-tyre-meter__marker.is-bad { color:var(--cam-bad); }
.cam-tyre-meter-caption { color:var(--cam-muted); font-size:.75rem; margin:.5rem 0 1.5rem; text-align:center; }
.cam-tyre-metrics { display:grid; gap:.85rem; grid-template-columns:repeat(3,minmax(0,1fr)); }
.cam-tyre-metrics article { background:#fff; border:1px solid var(--cam-line); border-radius:13px; min-width:0; padding:1rem; }
.cam-tyre-metrics span,.cam-tyre-metrics small { color:var(--cam-muted); display:block; }
.cam-tyre-metrics span { font-size:.72rem; font-weight:800; text-transform:uppercase; }
.cam-tyre-metrics strong { display:block; font-size:1rem; margin:.35rem 0 .15rem; }
.cam-tyre-metrics small { font-size:.77rem; }
.cam-tyre-checks { background:#fff; border:1px solid var(--cam-line); border-radius:16px; margin-top:1.2rem; padding:1.2rem; }
.cam-tyre-checks h3 { font-size:1.05rem; margin:0 0 .8rem; }
.cam-tyre-checks ul { display:grid; gap:.65rem; list-style:none; margin:0; padding:0; }
.cam-tyre-checks li { align-items:flex-start; border-radius:10px; display:flex; gap:.7rem; padding:.75rem; }
.cam-tyre-checks li>span { align-items:center; border:2px solid currentColor; border-radius:50%; display:flex; flex:0 0 24px; font-size:.77rem; font-weight:900; height:24px; justify-content:center; }
.cam-tyre-checks li p { margin:0; }
.cam-tyre-checks .is-ok { background:var(--cam-ok-soft); color:#10683a; }
.cam-tyre-checks .is-bad { background:var(--cam-bad-soft); color:#902921; }
.cam-tyre-checks .is-warning { background:var(--cam-warn-soft); color:#7d5100; }

.cam-equivalents { border-top:1px solid var(--cam-line); padding:clamp(1.25rem,3vw,2.25rem); }
.cam-equivalents__heading { align-items:center; display:flex; gap:2rem; justify-content:space-between; }
.cam-equivalents__heading .cam-tyre-tool__eyebrow { color:var(--cam-primary); }
.cam-equivalents__heading h3 { font-size:clamp(1.35rem,2.5vw,2rem); margin:0 0 .35rem; }
.cam-equivalents__heading p { color:var(--cam-muted); margin:0; max-width:800px; }
.cam-equivalents__count { align-items:center; background:var(--cam-primary); border-radius:50%; color:#fff; display:flex; flex:0 0 106px; height:106px; flex-direction:column; justify-content:center; text-align:center; }
.cam-equivalents__count strong { font-size:1.65rem; line-height:1; }
.cam-equivalents__count span { font-size:.72rem; margin-top:.25rem; text-transform:uppercase; }
.cam-equivalent-filters { background:var(--cam-soft); border:1px solid var(--cam-line); border-radius:16px; display:grid; gap:.85rem; grid-template-columns:repeat(4,minmax(0,1fr)); margin:1.5rem 0 1rem; padding:1rem; }
.cam-equivalent-actions { align-items:center; display:flex; gap:1rem; justify-content:space-between; margin-bottom:1rem; }
.cam-equivalent-actions p { color:var(--cam-muted); margin:0; }
.cam-equivalent-table-wrap { border:1px solid var(--cam-line); border-radius:14px; overflow:auto; }
.cam-equivalent-table { border-collapse:collapse; font-size:.88rem; min-width:980px; width:100%; }
.cam-equivalent-table th { background:#eef2f7; color:#4f5b71; font-size:.72rem; letter-spacing:.03em; padding:.8rem; text-align:left; text-transform:uppercase; white-space:nowrap; }
.cam-equivalent-table td { border-top:1px solid var(--cam-line); padding:.8rem; vertical-align:middle; }
.cam-equivalent-table tbody tr:hover { background:#f8faff; }
.cam-equivalent-table td small { color:var(--cam-muted); display:block; font-size:.73rem; margin-top:.12rem; }
.cam-equivalent-badge { border-radius:999px; display:inline-block; font-size:.75rem; font-weight:850; padding:.28rem .55rem; white-space:nowrap; }
.cam-equivalent-badge.is-excellent { background:var(--cam-ok-soft); color:#10683a; }
.cam-equivalent-badge.is-valid { background:#edf3ff; color:#1b4aae; }
.cam-equivalent-empty { color:var(--cam-muted); padding:2rem !important; text-align:center; }
.cam-equivalent-pagination { align-items:center; display:flex; gap:1rem; justify-content:center; margin-top:1rem; }
.cam-equivalent-pagination span { color:var(--cam-muted); font-size:.85rem; }
.cam-tyre-note { background:#eef2f7; border-left:4px solid #7b8799; border-radius:10px; margin-top:1rem; padding:.95rem 1rem; }
.cam-tyre-note strong { display:block; margin-bottom:.15rem; }
.cam-tyre-note p { color:#4f5b71; font-size:.87rem; margin:0; }
.cam-tyre-method { border-top:1px solid var(--cam-line); padding:1rem clamp(1.25rem,3vw,2.25rem) 1.25rem; }
.cam-tyre-method summary { color:var(--cam-primary); cursor:pointer; font-weight:800; }
.cam-tyre-method>div { color:var(--cam-muted); padding-top:.65rem; }
.cam-tyre-method p { margin:.35rem 0; }

@media (max-width:960px) {
  .cam-tyre-grid { grid-template-columns:1fr; }
  .cam-tyre-swap { justify-self:center; transform:rotate(90deg); }
  .cam-tyre-swap:hover,.cam-tyre-swap:focus-visible { transform:rotate(270deg); }
  .cam-tyre-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cam-equivalent-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:680px) {
  .cam-tyre-tool { border-radius:16px; }
  .cam-tyre-tool__header { align-items:flex-start; }
  .cam-tyre-tool__badge { display:none; }
  .cam-tyre-size-inputs { grid-template-columns:1fr auto 1fr; }
  .cam-tyre-size-inputs .cam-tyre-r { display:none; }
  .cam-tyre-size-inputs label:last-child { grid-column:1/-1; }
  .cam-tyre-index-grid,.cam-tyre-metrics,.cam-tyre-summary-grid,.cam-equivalent-filters { grid-template-columns:1fr; }
  .cam-tyre-toolbar,.cam-equivalent-actions,.cam-equivalents__heading { align-items:stretch; flex-direction:column; }
  .cam-tyre-speed-field { max-width:none; }
  .cam-tyre-actions { display:grid; grid-template-columns:1fr; }
  .cam-equivalents__count { border-radius:14px; flex:0 0 auto; height:auto; padding:.8rem; width:100%; }
  .cam-equivalents__count strong,.cam-equivalents__count span { display:inline; }
  .cam-equivalents__count span { margin-left:.35rem; }
  .cam-tyre-status { align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce) {
  .cam-tyre-tool *, .cam-tyre-tool *::before, .cam-tyre-tool *::after { scroll-behavior:auto !important; transition:none !important; }
}