/* Shared by the Amazon and Charter fleet pages and the chooser at the root. */
:root { --ink:#0f172a; --bg:#f8fafc; --card:#303e4a; --card-text:#ffffff; --muted:#94a3b8; --ring:#0f172a33; }
*{ box-sizing:border-box; }
body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--ink); }
.wrap{ max-width:780px; margin:0 auto; padding:24px; }
h1{ font-size:clamp(22px,4vw,28px); margin:0 0 6px; color:var(--card-text); }
.sub{ color:var(--muted); font-size:14px; margin-bottom:16px; }
.card{ background:var(--card); border-radius:18px; box-shadow:0 1px 2px rgba(0,0,0,.06), 0 10px 16px rgba(0,0,0,.03); padding:18px; color:var(--card-text); }
.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
button{ appearance:none; border:1px solid #e5e7eb; background:#fff; padding:12px 16px; border-radius:14px; cursor:pointer; font-weight:700; font-size:16px; color:var(--ink); }
button:focus{ outline:2px solid var(--ring); outline-offset:2px; }
.primary{ background:#ffffff; color:var(--card); border-color:#ffffff; }
.primary:hover{ background:#f1f5f9; }
.status{ color:var(--muted); font-size:12px; margin-top:8px; }
.pill{ display:inline-block; font-size:12px; color:var(--card); background:#e2e8f0; border-radius:999px; padding:4px 8px; }
.input{ width:100%; padding:14px 16px; border-radius:14px; border:1px solid #e5e7eb; font-size:18px; font-family: ui-monospace, Menlo, monospace; background:#ffffff; color:var(--ink); }
.input:focus{ outline:2px solid #ffffff; border-color:#ffffff; }
.results{ margin-top:12px; }
.result{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-top:1px solid rgba(255,255,255,0.2); }
.kbd{ user-select:none; display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:12px; }
.kbd button{ padding:14px 0; font-weight:700; }
.hide{ display:none; }
.center{ text-align:center; }
.logo{ display:block; width:220px; height:220px; max-width:80vw; max-height:30vh; object-fit:contain; margin:0 auto 18px; transition:width 0.2s,height 0.2s; }
video{ width:100%; max-height:240px; border-radius:12px; margin-top:12px; background:#000; }
/* Every line inside a result renders the same: one font, one weight, one color. */
.result-field {
  font-size: 20px;
  font-weight: 700;
  color: var(--card-text);
  margin-bottom: 2px;
  font-family: inherit;
  letter-spacing: .2px;
}
.result-field b, .result-field span:not(.gbadge) { font-weight: 700; color: inherit; font-family: inherit; }
/* Current-graphic status badge */
.gbadge {
  display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .3px;
  padding: 3px 10px; border-radius: 999px; vertical-align: middle;
  font-family: inherit;
}
.gbadge-expired    { background:#fdecea; color:#c0392b; }
.gbadge-active     { background:#e7f6ec; color:#12855a; }
.gbadge-nocampaign { background:#2b3550; color:#aeb9d6; }
.gbadge-unknown    { background:#2a3441; color:#9fb0c3; }
/* Charter's Unit No. / Kit Type / Layout — what the installer works from. */
.result-field-lg {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--card-text);
  font-family: inherit;
  letter-spacing: .2px;
  margin-bottom: 4px;
}
.result-field-lg .label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1px;
}
.result-highlight {
  background: rgba(255,255,255,0.09);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 8px 0 10px;
}
/* Fleet chooser at the site root */
.chooser{ display:grid; gap:12px; margin-top:18px; }
.chooser a{
  display:block; text-decoration:none; text-align:center;
  background:#ffffff; color:var(--card); border-radius:14px;
  padding:20px 16px; font-size:20px; font-weight:800; letter-spacing:.3px;
}
.chooser a small{ display:block; margin-top:4px; font-size:13px; font-weight:600; color:#64748b; letter-spacing:0; }
@media (min-width:640px){ .kbd{ grid-template-columns:repeat(10,1fr);} }