/* =====================================================================
   MOT Check Online — Vehicle Lookup v6 · "Midnight & Sky"
   ---------------------------------------------------------------------
   Brand rules carried into the UI:
   · Midnight #0B1B2B and Deep Navy #12304A carry the brand.
   · Sky #38BDF8 / Ice #7DD3FC are accents on dark; Sky-700 #0369A1 is
     the accent for text on light (Sky itself is too pale for text).
   · Amber #F5B700 is reserved for the number plate and the gauge dot.
   · Green, red and amber-orange only ever mean PASS, FAIL and ADVISORY,
     and always travel with an icon and a word (WCAG 1.4.1).
   Everything is scoped under .dmc-shell / .dmc-search, so nothing leaks
   into the theme. Dark mode is one class: .dmc-shell.is-dark
   ================================================================== */

.dmc-shell,
.dmc-search {
  --mid: #0B1B2B;
  --navy: #12304A;
  --navy-line: #1E3A55;
  --sky: #38BDF8;
  --sky-500: #0EA5E9;
  --ice: #7DD3FC;
  --amber: #F5B700;

  --paper: #F7F4EC;
  --surface: #FFFFFF;
  --surface-2: #FBF9F4;
  --line: #E4DFD2;
  --line-soft: #EFEBE1;
  --head: #0B1B2B;
  --ink: #1E293B;
  --muted: #5B6B7C;
  --faint: #94A3B3;
  --link: #0369A1;
  --focus: #0284C7;

  --pass: #15803D;  --pass-bg: #EDF7F0;  --pass-line: #BFE2CA;
  --fail: #B91C1C;  --fail-bg: #FCEFEF;  --fail-line: #F0C9C9;
  --adv:  #B45309;  --adv-bg:  #FDF5E9;  --adv-line:  #F0D8B4;
  --info: #0369A1;  --info-bg: #ECF6FC;  --info-line: #C3E3F5;
  --note: #5B6B7C;  --note-bg: #F3F1EA;  --note-line: #E4DFD2;

  --chart-line: #0284C7;
  --chart-fill: #38BDF8;

  --r-xl: 24px; --r-lg: 18px; --r-md: 14px; --r-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(11, 27, 43, .05);
  --shadow: 0 1px 2px rgba(11, 27, 43, .05), 0 22px 44px -28px rgba(11, 27, 43, .32);
  --shadow-lg: 0 30px 60px -30px rgba(11, 27, 43, .55);

  --font-h: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-b: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.dmc-shell.is-dark,
.dmc-shell.is-dark .dmc-search {
  --paper: #07121D;
  --surface: #0E1F30;
  --surface-2: #11263A;
  --line: #1E3A55;
  --line-soft: #173048;
  --head: #F2F7FB;
  --ink: #DCE6EF;
  --muted: #9DB1C4;
  --faint: #6C849B;
  --link: #7DD3FC;
  --focus: #38BDF8;

  --pass: #4ADE80;  --pass-bg: rgba(74, 222, 128, .10);  --pass-line: rgba(74, 222, 128, .28);
  --fail: #F87171;  --fail-bg: rgba(248, 113, 113, .10); --fail-line: rgba(248, 113, 113, .30);
  --adv:  #FBBF24;  --adv-bg:  rgba(251, 191, 36, .10);  --adv-line:  rgba(251, 191, 36, .28);
  --info: #7DD3FC;  --info-bg: rgba(125, 211, 252, .10); --info-line: rgba(125, 211, 252, .26);
  --note: #9DB1C4;  --note-bg: rgba(157, 177, 196, .10); --note-line: rgba(157, 177, 196, .24);

  --chart-line: #7DD3FC;
  --chart-fill: #38BDF8;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 22px 44px -28px rgba(0, 0, 0, .8);
}

/* ── scoped reset ─────────────────────────────────────────────────── */
.dmc-shell *, .dmc-shell *::before, .dmc-shell *::after,
.dmc-search, .dmc-search *, .dmc-search *::before, .dmc-search *::after { box-sizing: border-box; }
.dmc-app :where(h1, h2, h3, p, ul, ol, dl, dd, figure, table),
.dmc-search :where(h1, h2, h3, p, ul, ol, form) { margin: 0; padding: 0; }
.dmc-app :where(ul, ol), .dmc-search :where(ul, ol) { list-style: none; }
.dmc-app img { display: block; max-width: 100%; height: auto; }
.dmc-app a { color: var(--link); text-decoration: none; }
.dmc-app a:hover { color: var(--head); text-decoration: none; }
.dmc-app button, .dmc-search button { font: inherit; }
.dmc-app .dmc-ico, .dmc-search .dmc-ico { width: 1.1em; height: 1.1em; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.dmc-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.dmc-app :focus-visible, .dmc-search :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* ── shell ────────────────────────────────────────────────────────── */
.dmc-shell { background: var(--paper); width: 100%; transition: background-color .3s ease; }
.dmc-app {
  max-width: 1080px; margin: 0 auto; padding: 22px 20px 72px;
  font-family: var(--font-b); font-size: 1rem; line-height: 1.55; color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}
.dmc-app :where(h1, h2, h3) { font-family: var(--font-h); color: var(--head); letter-spacing: -.01em; line-height: 1.2; font-weight: 600; }
/* Report headings follow the report theme, whatever colour the site theme gives headings. */
.dmc-shell .dmc-app :is(h1, h2, h3, h4):not(.dmc-vehicle):not(.dmc-search-title) { color: var(--head); }

/* ── top bar ──────────────────────────────────────────────────────── */
.dmc-topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dmc-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .84rem; color: var(--muted); min-width: 0; }
.dmc-app .dmc-crumbs a { color: var(--muted); }
.dmc-app .dmc-crumbs a:hover { color: var(--link); }
.dmc-crumbs [aria-current] { color: var(--head); font-weight: 600; letter-spacing: .02em; }
.dmc-crumb-sep { opacity: .45; }
.dmc-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.dmc-app .dmc-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 42px; height: 42px; margin: 0; padding: 0 16px 0 14px; border-radius: 999px; cursor: pointer;
  font: 600 .84rem/1 var(--font-b); text-transform: none; letter-spacing: 0;
  background: var(--surface); color: var(--head); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); transition: border-color .2s, transform .2s, color .2s;
}
.dmc-app .dmc-icon-btn:hover, .dmc-app .dmc-icon-btn:focus { background: var(--surface); color: var(--link); border-color: var(--link); transform: translateY(-1px); }
.dmc-app .dmc-icon-btn .dmc-ico { width: 19px; height: 19px; }

.dmc-app .dmc-theme {
  position: relative; display: inline-flex !important; align-items: center; gap: 10px;
  height: 42px; margin: 0; padding: 0 5px 0 15px; border-radius: 999px; cursor: pointer;
  font: 600 .84rem/1 var(--font-b); color: var(--head); text-transform: none; letter-spacing: 0;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: border-color .2s, transform .2s;
}
.dmc-app .dmc-theme:hover, .dmc-app .dmc-theme:focus { background: var(--surface); border-color: var(--link); color: var(--head); transform: translateY(-1px); }
.dmc-theme-lbl { white-space: nowrap; }
.dmc-theme-track {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between;
  width: 62px; height: 32px; padding: 0 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-soft);
}
.dmc-theme .dmc-ico { width: 15px; height: 15px; position: relative; z-index: 1; transition: color .25s; color: var(--muted); }
.dmc-theme .dmc-theme-sun { color: #fff; }
.dmc-theme-thumb {
  position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--mid); box-shadow: 0 2px 6px rgba(11, 27, 43, .35);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), background .3s;
}
.dmc-shell.is-dark .dmc-theme-thumb { transform: translateX(30px); background: var(--sky); }
.dmc-shell.is-dark .dmc-theme .dmc-theme-sun { color: var(--muted); }
.dmc-shell.is-dark .dmc-theme .dmc-theme-moon { color: var(--mid); }

/* =====================================================================
   NUMBER PLATE — realistic UK rear plate (input and display)
   ================================================================== */
.dmc-plate {
  position: relative; display: flex; align-items: stretch;
  background: linear-gradient(180deg, #FFD23F 0%, #F7BC00 46%, #EFB000 100%);
  border-radius: 11px; padding: 6px;
  box-shadow:
    0 0 0 2px #10171F,
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -2px 0 rgba(0, 0, 0, .08),
    0 14px 28px -14px rgba(0, 0, 0, .55);
  overflow: hidden; isolation: isolate;
}
/* the thin black border line printed on most UK plates */
.dmc-plate::after {
  content: ''; position: absolute; inset: 3px; border: 1.5px solid rgba(16, 23, 31, .82);
  border-radius: 8px; pointer-events: none; z-index: 2;
}
/* acrylic sheen */
.dmc-plate::before,
.dmc-plate-sheen {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(108deg, transparent 38%, rgba(255, 255, 255, .22) 48%, transparent 58%);
}
.dmc-plate.is-input::before { content: none; }

.dmc-band-uk {
  position: relative; z-index: 3; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 44px; border-radius: 5px; margin-right: 6px;
  background: linear-gradient(180deg, #0F4AAE 0%, #0A3683 100%);
  color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.dmc-flag-uk { width: 26px; height: 13px; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); }
.dmc-band-uk b { font: 700 13px/1 var(--font-h); letter-spacing: .06em; color: #fff; }

/* display plate */
.dmc-plate.is-display { display: inline-flex; vertical-align: middle; }
.dmc-plate-text {
  position: relative; z-index: 3; display: flex; align-items: center;
  padding: 0 18px 0 12px; color: #0D0D0D;
  font: 700 clamp(2rem, 4.6vw, 2.75rem)/1 var(--font-h); letter-spacing: .07em; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
.dmc-plate.is-xl { min-height: 72px; }
.dmc-plate.is-xl .dmc-plate-text { padding-bottom: 6px; }
.dmc-plate.is-md { min-height: 58px; }
.dmc-plate.is-md .dmc-band-uk { width: 40px; }
.dmc-plate.is-md .dmc-plate-text { font-size: 1.85rem; padding: 0 14px 0 10px; }
.dmc-plate-maker {
  position: absolute; z-index: 3; left: 56px; right: 0; bottom: 6px; text-align: center;
  font: 600 7.5px/1 var(--font-b); letter-spacing: .14em; text-transform: uppercase; color: rgba(16, 23, 31, .55);
}

/* input plate */
.dmc-plate.is-input { cursor: text; transition: box-shadow .25s ease, transform .25s ease; }
.dmc-search .dmc-plate input.dmc-plate-input {
  position: relative; z-index: 3; flex: 1 1 auto; min-width: 0; width: 100% !important;
  height: auto !important; min-height: 0 !important; margin: 0 !important;
  padding: 0 12px 0 8px !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; outline: none !important;
  color: #0D0D0D !important; caret-color: #0B1B2B;
  font-family: var(--font-h) !important; font-weight: 700 !important; font-size: 30px !important;
  line-height: 1 !important; letter-spacing: .08em !important; text-transform: uppercase !important;
  text-align: center !important; -webkit-appearance: none; appearance: none;
}
.dmc-search .dmc-plate input.dmc-plate-input::placeholder { color: rgba(11, 27, 43, .66); opacity: 1; letter-spacing: .1em; font-weight: 700; }
.dmc-search .dmc-plate input.dmc-plate-input:focus { outline: none !important; box-shadow: none !important; }
.dmc-search .dmc-plate.is-input:focus-within {
  box-shadow:
    0 0 0 2px #10171F,
    0 0 0 5px var(--plate-ring, #0284C7),
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 18px 34px -14px rgba(0, 0, 0, .55);
}
.dmc-search.is-lg .dmc-plate.is-input { height: 70px; }
.dmc-search.is-md .dmc-plate.is-input { height: 60px; }
.dmc-search.is-md .dmc-plate input.dmc-plate-input { font-size: 25px !important; }
.dmc-search.is-md .dmc-band-uk { width: 40px; }

/* =====================================================================
   SEARCH BOX — the [dmc_form] shortcode
   ================================================================== */
.dmc-search {
  position: relative; width: 100%; max-width: 720px; margin-left: auto; margin-right: auto;
  font-family: var(--font-b); color: var(--ink); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.dmc-search.is-left { margin-left: 0; }
.dmc-search.is-center { text-align: center; }
.dmc-search.is-left { text-align: left; }

/* variants */
.dmc-search.is-midnight,
.dmc-search.is-glass,
.dmc-search.is-light { padding: 24px; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; }
.dmc-search.is-midnight {
  --plate-ring: #38BDF8;
  color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(56, 189, 248, .20) 0%, rgba(56, 189, 248, 0) 52%),
    linear-gradient(135deg, #12304A 0%, #0B1B2B 100%);
  border: 1px solid rgba(125, 211, 252, .18);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.dmc-search.is-midnight::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.dmc-search.is-glass {
  --plate-ring: #38BDF8;
  color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.dmc-search.is-light {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.dmc-search-glow {
  position: absolute; left: 10%; right: 10%; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0), #38BDF8 30%, #7DD3FC 60%, rgba(125, 211, 252, 0));
}
.dmc-search-glow::after {
  content: ''; position: absolute; left: 20%; right: 20%; top: 0; height: 40px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(56, 189, 248, .22), transparent 70%);
}

.dmc-search .dmc-search-title {
  font: 600 clamp(1.5rem, 3.4vw, 2.25rem)/1.15 var(--font-h); letter-spacing: -.02em;
  color: var(--head); margin: 0 0 8px;
}
.dmc-search .dmc-search-title span {
  background: linear-gradient(90deg, #0369A1, #0EA5E9);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dmc-search .dmc-search-sub { color: var(--muted); font-size: 1rem; max-width: 56ch; margin: 0 0 18px; }
.dmc-search.is-center .dmc-search-sub { margin-left: auto; margin-right: auto; }
.dmc-search .dmc-search-label {
  font: 600 1rem/1.3 var(--font-h); color: var(--head); margin: 0 0 14px; letter-spacing: -.005em;
}
.dmc-search :is(.dmc-search-title, .dmc-search-label) { position: relative; }
.dmc-search:is(.is-midnight, .is-glass) .dmc-search-title,
.dmc-search:is(.is-midnight, .is-glass) .dmc-search-label { color: #fff; }
.dmc-search:is(.is-midnight, .is-glass) .dmc-search-title span {
  background: linear-gradient(90deg, #38BDF8, #7DD3FC); -webkit-background-clip: text; background-clip: text;
}
.dmc-search:is(.is-midnight, .is-glass) .dmc-search-sub { color: #B9C8D6; }

/* form row: wraps the button under the plate when space runs out */
.dmc-search .dmc-form { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; position: relative; }
.dmc-search .dmc-plate.is-input { flex: 999 1 300px; }
.dmc-search .dmc-go { flex: 1 0 auto; min-width: max-content; }

.dmc-search .dmc-go {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 0; margin: 0; padding: 0 14px 0 24px; border: 0; border-radius: 14px; cursor: pointer;
  font: 600 1.0625rem/1 var(--font-h); letter-spacing: .005em; text-transform: none; text-decoration: none;
  background: var(--mid); color: #fff;
  box-shadow: 0 12px 24px -14px rgba(11, 27, 43, .8), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, background .2s ease, filter .2s;
  overflow: hidden; white-space: nowrap;
}
.dmc-search.is-lg .dmc-go { height: 70px; }
.dmc-search.is-md .dmc-go { height: 60px; font-size: 1rem; }
.dmc-search .dmc-go:hover,
.dmc-search .dmc-go:focus { background: var(--navy); color: #fff; transform: translateY(-1px); box-shadow: 0 16px 28px -14px rgba(11, 27, 43, .85); }
.dmc-search .dmc-go:active { transform: translateY(0) scale(.99); }
.dmc-search .dmc-go::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .28), transparent);
  transition: left .6s ease;
}
.dmc-search .dmc-go:hover::after { left: 130%; }
.dmc-go-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .12);
  transition: transform .25s ease;
}
.dmc-go-icon .dmc-ico { width: 18px; height: 18px; }
.dmc-search .dmc-go:hover .dmc-go-icon { transform: translateX(3px); }

/* sky button on dark surfaces */
.dmc-search:is(.is-midnight, .is-glass) .dmc-go {
  background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%); color: #0B1B2B;
  box-shadow: 0 14px 28px -14px rgba(56, 189, 248, .75), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.dmc-search:is(.is-midnight, .is-glass) .dmc-go:hover,
.dmc-search:is(.is-midnight, .is-glass) .dmc-go:focus {
  background: linear-gradient(135deg, #7DD3FC 0%, #38BDF8 100%); color: #0B1B2B;
  box-shadow: 0 18px 32px -14px rgba(56, 189, 248, .9), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.dmc-search:is(.is-midnight, .is-glass) .dmc-go-icon { background: rgba(11, 27, 43, .12); }
.dmc-search:is(.is-midnight, .is-glass) .dmc-go:focus-visible { outline-color: #F5B700; }

/* busy state */
.dmc-spin {
  position: absolute; inset: 7px; border-radius: 50%; opacity: 0;
  border: 2.5px solid currentColor; border-right-color: transparent;
}
.dmc-search .dmc-form.is-busy .dmc-go { cursor: progress; }
.dmc-search .dmc-form.is-busy .dmc-go-icon .dmc-ico { opacity: 0; }
.dmc-search .dmc-form.is-busy .dmc-spin { opacity: 1; animation: dmcSpin .7s linear infinite; }
@keyframes dmcSpin { to { transform: rotate(360deg); } }

/* hint + validation */
.dmc-search .dmc-hint { min-height: 0; margin: 0; font-size: .875rem; font-weight: 500; color: var(--fail); text-align: inherit; }
.dmc-search .dmc-hint:not(:empty) { margin-top: 10px; }
.dmc-search .dmc-hint:not(:empty)::before { content: '!'; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 7px; border-radius: 50%; background: currentColor; color: inherit; font: 700 12px/1 var(--font-b); vertical-align: -3px; -webkit-text-fill-color: #fff; }
.dmc-search:is(.is-midnight, .is-glass) .dmc-hint { color: #FCA5A5; }
.dmc-search:is(.is-midnight, .is-glass) .dmc-hint:not(:empty)::before { -webkit-text-fill-color: #0B1B2B; }
.dmc-search.has-error .dmc-plate.is-input { box-shadow: 0 0 0 2px #10171F, 0 0 0 5px #EF4444, 0 14px 28px -14px rgba(0, 0, 0, .55); }
.dmc-search .dmc-form.is-shake { animation: dmcShake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes dmcShake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.dmc-search .dmc-search-note {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .85rem; color: var(--muted);
}
.dmc-search.is-center .dmc-search-note { justify-content: center; }
.dmc-search .dmc-search-note .dmc-ico { width: 17px; height: 17px; color: var(--link); }
.dmc-search:is(.is-midnight, .is-glass) .dmc-search-note { color: #B9C8D6; }
.dmc-search:is(.is-midnight, .is-glass) .dmc-search-note .dmc-ico { color: #7DD3FC; }

/* =====================================================================
   SEARCH DESIGNS — [dmc_form design="plate|anpr|cluster|flap|ticket|rear"]
   All share one input (.dmc-plate-input) and one submit (.dmc-go), so
   formatting, validation and the busy state work the same everywhere.
   Each design has one signature motion; reduced motion turns it off.
   ================================================================== */

/* Follow the site's dark theme (Site Kit) on light surfaces… */
html[data-theme="dark"] .dmc-search:not(.mco-on-dark) {
  --surface: #0E1F30; --surface-2: #11263A; --line: #1E3A55; --line-soft: #173048;
  --head: #F2F7FB; --ink: #DCE6EF; --muted: #9DB1C4; --faint: #6C849B; --link: #7DD3FC; --focus: #38BDF8;
}
/* …but inside a report, the report's own theme decides. */
html[data-theme="dark"] .dmc-shell:not(.is-dark) .dmc-search {
  --surface: #FFFFFF; --surface-2: #FBF9F4; --line: #E4DFD2; --line-soft: #EFEBE1;
  --head: #0B1B2B; --ink: #1E293B; --muted: #5B6B7C; --faint: #94A3B3; --link: #0369A1; --focus: #0284C7;
}

.dmc-search:is(.is-d-anpr, .is-d-cluster, .is-d-flap, .is-d-ticket, .is-d-rear, .is-d-console) .dmc-form { display: block; }
.dmc-search.is-d-anpr, .dmc-search.is-d-flap, .dmc-search.is-d-rear { max-width: 700px; }
.dmc-search.is-d-cluster { max-width: 820px; }
.dmc-search.is-d-ticket { max-width: 760px; }

/* sky button on the dark scenes */
.dmc-search:is(.is-d-anpr, .is-d-flap, .is-d-rear) .dmc-go {
  background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%); color: #0B1B2B;
  box-shadow: 0 14px 28px -14px rgba(56, 189, 248, .75), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.dmc-search:is(.is-d-anpr, .is-d-flap, .is-d-rear) .dmc-go:hover,
.dmc-search:is(.is-d-anpr, .is-d-flap, .is-d-rear) .dmc-go:focus { background: linear-gradient(135deg, #7DD3FC 0%, #38BDF8 100%); color: #0B1B2B; }
.dmc-search:is(.is-d-anpr, .is-d-flap, .is-d-rear) .dmc-go-icon { background: rgba(11, 27, 43, .12); }

/* ── 2 · PLATE CAMERA ─────────────────────────────────────────────── */
.dmc-anpr {
  position: relative; isolation: isolate; overflow: hidden; padding: 16px 22px 20px; border-radius: 22px; text-align: left;
  color: #DCE6EF; background: radial-gradient(120% 90% at 50% 0%, #143552 0%, #07121D 72%);
  border: 1px solid rgba(125, 211, 252, .16);
  box-shadow: 0 30px 60px -30px rgba(7, 18, 29, .85), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.dmc-anpr::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px);
}
.dmc-anpr-hud { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font: 600 .7rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; color: rgba(185, 200, 214, .78); }
.dmc-anpr-rec { display: inline-flex; align-items: center; gap: 7px; color: #FCA5A5; }
.dmc-anpr-rec i { width: 8px; height: 8px; border-radius: 50%; background: #EF4444; box-shadow: 0 0 10px #EF4444; animation: dmcRec 1.4s steps(2, jump-none) infinite; }
@keyframes dmcRec { 50% { opacity: .15; } }
.dmc-anpr-cam { margin-right: auto; margin-left: 12px; }
.dmc-anpr-view { position: relative; padding: 26px 32px; }
.dmc-anpr-c {
  position: absolute; width: 32px; height: 32px; border: 3px solid #38BDF8; pointer-events: none; z-index: 4;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, .7)); transition: all .5s cubic-bezier(.22, 1, .36, 1);
}
.dmc-anpr-c.is-tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 9px; }
.dmc-anpr-c.is-tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 9px; }
.dmc-anpr-c.is-bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 9px; }
.dmc-anpr-c.is-br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 9px; }
.dmc-search.is-d-anpr:focus-within .dmc-anpr-c.is-tl, .dmc-search.is-d-anpr.has-value .dmc-anpr-c.is-tl { top: 12px; left: 18px; }
.dmc-search.is-d-anpr:focus-within .dmc-anpr-c.is-tr, .dmc-search.is-d-anpr.has-value .dmc-anpr-c.is-tr { top: 12px; right: 18px; }
.dmc-search.is-d-anpr:focus-within .dmc-anpr-c.is-bl, .dmc-search.is-d-anpr.has-value .dmc-anpr-c.is-bl { bottom: 12px; left: 18px; }
.dmc-search.is-d-anpr:focus-within .dmc-anpr-c.is-br, .dmc-search.is-d-anpr.has-value .dmc-anpr-c.is-br { bottom: 12px; right: 18px; }
.dmc-search.is-d-anpr.is-ready .dmc-anpr-c { border-color: #4ADE80; filter: drop-shadow(0 0 8px rgba(74, 222, 128, .8)); }
.dmc-anpr-laser {
  position: absolute; left: 26px; right: 26px; top: 12%; height: 2px; z-index: 5; pointer-events: none; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #7DD3FC 18%, #fff 50%, #7DD3FC 82%, transparent);
  box-shadow: 0 0 14px 3px rgba(56, 189, 248, .65);
  animation: dmcScan 2.4s cubic-bezier(.45, 0, .55, 1) infinite alternate; transition: opacity .3s;
}
@keyframes dmcScan { from { top: 12%; } to { top: 86%; } }
.dmc-search.is-d-anpr:focus-within .dmc-anpr-laser { animation-duration: 1.3s; }
.dmc-search.is-d-anpr.is-ready .dmc-anpr-laser { opacity: 0; }
.dmc-anpr .dmc-plate.is-input { width: 100%; }
.dmc-search.is-d-anpr.is-ready .dmc-plate.is-input { box-shadow: 0 0 0 2px #10171F, 0 0 0 5px #4ADE80, inset 0 1px 0 rgba(255, 255, 255, .6), 0 18px 34px -14px rgba(0, 0, 0, .6); }
.dmc-anpr-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.dmc-anpr-read { margin: 0; font: 600 .78rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; color: #7DD3FC; }
.dmc-anpr-read::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 2px; background: currentColor; vertical-align: 1px; }
.dmc-search.is-d-anpr.is-ready .dmc-anpr-read { color: #4ADE80; }
.dmc-search.is-d-anpr .dmc-go { height: 54px; }

/* ── 3 · DASHBOARD ────────────────────────────────────────────────── *
 * Six finishes, chosen with skin="…": midnight (default), pearl, glass,
 * sky, heritage, titanium. Every colour is a --cl-* variable below.   */
.dmc-cl {
  /* midnight */
  --cl-bg: radial-gradient(90% 130% at 18% 0%, #18385A 0%, #0A1622 62%), #0A1622;
  --cl-border: rgba(125, 211, 252, .14);
  --cl-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -24px 40px rgba(0, 0, 0, .35), 0 30px 60px -30px rgba(7, 18, 29, .9);
  --cl-text: #DCE6EF; --cl-muted: rgba(185, 200, 214, .75);
  --cl-face: transparent; --cl-bezel: none;
  --cl-track: rgba(255, 255, 255, .07); --cl-red: rgba(239, 68, 68, .5);
  --cl-prog: #38BDF8; --cl-prog-glow: rgba(56, 189, 248, .8); --cl-ok: #4ADE80; --cl-ok-glow: rgba(74, 222, 128, .8);
  --cl-tick: rgba(220, 230, 239, .35); --cl-tick-major: rgba(220, 230, 239, .85); --cl-num: rgba(220, 230, 239, .8);
  --cl-needle: linear-gradient(to top, #F5B700 0%, #FFD23F 100%); --cl-needle-glow: 0 0 12px rgba(245, 183, 0, .7);
  --cl-hub: radial-gradient(circle at 40% 35%, #3B5B7A, #0A1622 70%); --cl-hub-ring: rgba(255, 255, 255, .16);
  --cl-lcd-bg: linear-gradient(180deg, #02070C, #0A1724); --cl-lcd-border: rgba(125, 211, 252, .45);
  --cl-lcd-inset: inset 0 2px 12px rgba(0, 0, 0, .8); --cl-lcd-text: #E0F2FE; --cl-lcd-glow: 0 0 14px rgba(56, 189, 248, .75);
  --cl-lcd-ph: rgba(186, 230, 253, .5); --cl-lcd-lbl: #7DD3FC; --cl-lcd-scan: rgba(0, 0, 0, .28); --cl-caret: #F5B700;
  --cl-focus: #38BDF8;
  --cl-btn: radial-gradient(circle at 50% 28%, #3A5B7C 0%, #12263A 55%, #08121C 100%);
  --cl-btn-hover: radial-gradient(circle at 50% 28%, #44698E 0%, #14304A 55%, #08121C 100%);
  --cl-btn-text: #DCE6EF; --cl-btn-text-on: #fff;
  --cl-btn-rim: 0 0 0 7px #172839, 0 0 0 8px rgba(255, 255, 255, .12), 0 20px 30px -12px rgba(0, 0, 0, .85), inset 0 2px 2px rgba(255, 255, 255, .18), inset 0 -8px 16px rgba(0, 0, 0, .55);
  --cl-ring: rgba(56, 189, 248, .22); --cl-ring-on: #38BDF8; --cl-ring-glow: rgba(56, 189, 248, .7);

  display: grid; grid-template-columns: 196px minmax(0, 1fr) 148px; gap: 26px; align-items: center; text-align: left;
  position: relative; overflow: hidden; isolation: isolate;
  padding: 22px 28px; border-radius: 30px; color: var(--cl-text);
  background: var(--cl-bg); border: 1px solid var(--cl-border); box-shadow: var(--cl-shadow);
}

/* pearl — white ceramic, silver bezels, a navy display as the one dark accent */
.is-skin-pearl .dmc-cl {
  --cl-bg: radial-gradient(70% 120% at 15% 0%, #FFFFFF 0%, #F1F5F9 60%, #E7EDF3 100%);
  --cl-border: #DCE4EC;
  --cl-shadow: inset 0 1px 0 #fff, inset 0 -18px 30px rgba(18, 48, 74, .05), 0 30px 60px -32px rgba(11, 27, 43, .35);
  --cl-text: #0B1B2B; --cl-muted: #5B6B7C;
  --cl-face: radial-gradient(circle at 50% 38%, #FFFFFF 0%, #F4F7FA 70%, #E9EEF3 100%);
  --cl-bezel: 0 0 0 5px #E3E9EF, 0 0 0 6px #C9D3DD, 0 10px 22px -10px rgba(11, 27, 43, .35), inset 0 2px 6px rgba(11, 27, 43, .08);
  --cl-track: rgba(11, 27, 43, .07); --cl-red: rgba(220, 38, 38, .45);
  --cl-prog: #0EA5E9; --cl-prog-glow: rgba(14, 165, 233, .45); --cl-ok: #16A34A; --cl-ok-glow: rgba(22, 163, 74, .4);
  --cl-tick: rgba(11, 27, 43, .25); --cl-tick-major: #12304A; --cl-num: #12304A;
  --cl-needle: linear-gradient(to top, #E8A300 0%, #F5B700 100%); --cl-needle-glow: 0 2px 6px rgba(180, 120, 0, .35);
  --cl-hub: radial-gradient(circle at 40% 35%, #FFFFFF, #C3CDD7 75%); --cl-hub-ring: #AEB9C4;
  --cl-lcd-bg: linear-gradient(180deg, #0B1B2B, #12304A); --cl-lcd-border: #0B1B2B;
  --cl-lcd-inset: inset 0 2px 10px rgba(0, 0, 0, .55); --cl-lcd-scan: rgba(0, 0, 0, .18);
  --cl-btn: radial-gradient(circle at 50% 28%, #FFFFFF 0%, #EDF2F6 55%, #D5DEE7 100%);
  --cl-btn-hover: radial-gradient(circle at 50% 28%, #FFFFFF 0%, #F4F8FB 55%, #DCE5ED 100%);
  --cl-btn-text: #12304A; --cl-btn-text-on: #0369A1;
  --cl-btn-rim: 0 0 0 7px #EEF2F6, 0 0 0 8px #C9D3DD, 0 18px 28px -12px rgba(11, 27, 43, .35), inset 0 2px 2px #fff, inset 0 -8px 14px rgba(11, 27, 43, .08);
  --cl-ring: rgba(14, 165, 233, .25); --cl-ring-on: #0EA5E9; --cl-ring-glow: rgba(14, 165, 233, .45);
}

/* glass — frosted ice over soft sky light */
.is-skin-glass .dmc-cl {
  --cl-bg:
    radial-gradient(40% 70% at 12% 10%, rgba(255, 255, 255, .95), transparent 70%),
    radial-gradient(45% 80% at 95% 100%, rgba(56, 189, 248, .45), transparent 70%),
    radial-gradient(40% 60% at 60% 0%, rgba(125, 211, 252, .5), transparent 70%),
    linear-gradient(135deg, #E0F2FE 0%, #F0F9FF 50%, #DBEFFC 100%);
  --cl-border: rgba(255, 255, 255, .9);
  --cl-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .5), 0 30px 60px -30px rgba(3, 105, 161, .45);
  --cl-text: #0B1B2B; --cl-muted: #31556F;
  --cl-face: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .35) 75%);
  --cl-bezel: 0 0 0 1px rgba(255, 255, 255, .95), 0 12px 26px -12px rgba(3, 105, 161, .45), inset 0 0 18px rgba(255, 255, 255, .7);
  --cl-track: rgba(3, 105, 161, .1); --cl-red: rgba(220, 38, 38, .4);
  --cl-prog: #0284C7; --cl-prog-glow: rgba(2, 132, 199, .45); --cl-ok: #16A34A; --cl-ok-glow: rgba(22, 163, 74, .4);
  --cl-tick: rgba(3, 105, 161, .3); --cl-tick-major: #0369A1; --cl-num: #0C4A6E;
  --cl-needle: linear-gradient(to top, #0B1B2B 0%, #12304A 100%); --cl-needle-glow: 0 2px 6px rgba(11, 27, 43, .3);
  --cl-hub: radial-gradient(circle at 40% 35%, #FFFFFF, #BAE6FD 80%); --cl-hub-ring: #fff;
  --cl-lcd-bg: rgba(255, 255, 255, .55); --cl-lcd-border: rgba(255, 255, 255, .95);
  --cl-lcd-inset: inset 0 1px 8px rgba(3, 105, 161, .12); --cl-lcd-text: #0B1B2B; --cl-lcd-glow: none;
  --cl-lcd-ph: rgba(3, 105, 161, .5); --cl-lcd-lbl: #0C4A6E; --cl-lcd-scan: transparent; --cl-caret: #0B1B2B; --cl-focus: #0284C7;
  --cl-btn: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .98) 0%, rgba(240, 249, 255, .9) 60%, rgba(186, 230, 253, .9) 100%);
  --cl-btn-hover: radial-gradient(circle at 50% 28%, #FFFFFF 0%, #F0F9FF 60%, #C7EBFD 100%);
  --cl-btn-text: #0C4A6E; --cl-btn-text-on: #0369A1;
  --cl-btn-rim: 0 0 0 7px rgba(255, 255, 255, .55), 0 0 0 8px rgba(255, 255, 255, .95), 0 18px 30px -12px rgba(3, 105, 161, .5), inset 0 2px 2px #fff;
  --cl-ring: rgba(2, 132, 199, .25); --cl-ring-on: #0284C7; --cl-ring-glow: rgba(2, 132, 199, .45);
}
.is-skin-glass .dmc-cl { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* sky — the brand blue, bright and confident */
.is-skin-sky .dmc-cl {
  --cl-bg: radial-gradient(70% 120% at 10% 0%, rgba(255, 255, 255, .28), transparent 60%), linear-gradient(135deg, #38BDF8 0%, #0EA5E9 45%, #0369A1 100%);
  --cl-border: rgba(255, 255, 255, .35);
  --cl-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 30px 60px -28px rgba(3, 105, 161, .75);
  --cl-text: #fff; --cl-muted: rgba(255, 255, 255, .82);
  --cl-face: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 75%);
  --cl-bezel: 0 0 0 1px rgba(255, 255, 255, .45), inset 0 0 20px rgba(255, 255, 255, .15);
  --cl-track: rgba(255, 255, 255, .22); --cl-red: rgba(254, 202, 202, .75);
  --cl-prog: #FFFFFF; --cl-prog-glow: rgba(255, 255, 255, .8); --cl-ok: #BBF7D0; --cl-ok-glow: rgba(187, 247, 208, .9);
  --cl-tick: rgba(255, 255, 255, .5); --cl-tick-major: #fff; --cl-num: #fff;
  --cl-needle: linear-gradient(to top, #F5B700 0%, #FFE07A 100%); --cl-needle-glow: 0 0 10px rgba(255, 210, 63, .8);
  --cl-hub: radial-gradient(circle at 40% 35%, #FFFFFF, #7DD3FC 80%); --cl-hub-ring: rgba(255, 255, 255, .7);
  --cl-lcd-bg: linear-gradient(180deg, #062B47, #0B3A5E); --cl-lcd-border: rgba(255, 255, 255, .45);
  --cl-lcd-inset: inset 0 2px 10px rgba(0, 0, 0, .5); --cl-lcd-text: #E0F2FE; --cl-lcd-glow: 0 0 10px rgba(125, 211, 252, .8);
  --cl-lcd-ph: rgba(224, 242, 254, .55); --cl-lcd-lbl: #E0F2FE; --cl-focus: #fff;
  --cl-btn: radial-gradient(circle at 50% 28%, #FFFFFF 0%, #F0F9FF 60%, #CDEBFB 100%);
  --cl-btn-hover: radial-gradient(circle at 50% 28%, #FFFFFF 0%, #FFFFFF 60%, #E0F2FE 100%);
  --cl-btn-text: #0369A1; --cl-btn-text-on: #0B1B2B;
  --cl-btn-rim: 0 0 0 7px rgba(255, 255, 255, .22), 0 0 0 8px rgba(255, 255, 255, .55), 0 18px 30px -12px rgba(3, 60, 100, .6), inset 0 2px 2px #fff, inset 0 -8px 14px rgba(3, 105, 161, .12);
  --cl-ring: rgba(3, 105, 161, .25); --cl-ring-on: #0369A1; --cl-ring-glow: rgba(255, 255, 255, .9);
}

/* heritage — ivory dial, chrome rims, amber display, like a classic British dashboard */
.is-skin-heritage .dmc-cl {
  --cl-bg: linear-gradient(160deg, #12304A 0%, #0E2639 100%);
  --cl-border: #B9C2CC;
  --cl-shadow: inset 0 0 0 4px #12304A, inset 0 0 0 5px rgba(201, 210, 219, .55), 0 30px 60px -30px rgba(11, 27, 43, .7);
  --cl-text: #F4F1EA; --cl-muted: rgba(244, 241, 234, .72);
  --cl-face: radial-gradient(circle at 50% 38%, #FFFDF8 0%, #F6F1E6 70%, #E9E1D0 100%);
  --cl-bezel: 0 0 0 6px #D9DEE4, 0 0 0 7px #8E99A4, 0 0 0 9px #E8EBEF, 0 14px 24px -10px rgba(0, 0, 0, .6), inset 0 3px 8px rgba(70, 50, 20, .15);
  --cl-track: rgba(18, 48, 74, .08); --cl-red: rgba(185, 28, 28, .55);
  --cl-prog: #12304A; --cl-prog-glow: transparent; --cl-ok: #15803D; --cl-ok-glow: transparent; --cl-ok-text: #86EFAC;
  --cl-tick: rgba(18, 48, 74, .4); --cl-tick-major: #12304A; --cl-num: #12304A;
  --cl-needle: linear-gradient(to top, #B45309 0%, #E0782A 100%); --cl-needle-glow: 0 2px 4px rgba(0, 0, 0, .35);
  --cl-hub: radial-gradient(circle at 40% 35%, #FFFFFF, #9AA5B0 75%); --cl-hub-ring: #6B7682;
  --cl-lcd-bg: linear-gradient(180deg, #1A1206, #2A1D0A); --cl-lcd-border: #C9D0D8;
  --cl-lcd-inset: inset 0 2px 10px rgba(0, 0, 0, .7), 0 0 0 3px #8E99A4; --cl-lcd-text: #F5B700; --cl-lcd-glow: 0 0 10px rgba(245, 183, 0, .65);
  --cl-lcd-ph: rgba(245, 183, 0, .5); --cl-lcd-lbl: #F5B700; --cl-caret: #F5B700; --cl-focus: #F5B700;
  --cl-btn: radial-gradient(circle at 50% 25%, #FFFFFF 0%, #DCE1E6 45%, #A9B3BD 100%);
  --cl-btn-hover: radial-gradient(circle at 50% 25%, #FFFFFF 0%, #E6EAEE 45%, #B6BFC8 100%);
  --cl-btn-text: #12304A; --cl-btn-text-on: #0B1B2B;
  --cl-btn-rim: 0 0 0 6px #12304A, 0 0 0 8px #C9D0D8, 0 18px 28px -12px rgba(0, 0, 0, .7), inset 0 2px 2px #fff, inset 0 -8px 14px rgba(0, 0, 0, .18);
  --cl-ring: rgba(18, 48, 74, .3); --cl-ring-on: #B45309; --cl-ring-glow: rgba(180, 83, 9, .45);
}
.is-skin-heritage .dmc-cl-unit, .is-skin-pearl .dmc-cl-unit, .is-skin-glass .dmc-cl-unit { color: #5B6B7C; }

/* titanium — brushed silver, engineered and calm */
.is-skin-titanium .dmc-cl {
  --cl-bg: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, rgba(255, 255, 255, 0) 1px 3px), linear-gradient(160deg, #EEF1F4 0%, #CBD3DB 55%, #B5BFC9 100%);
  --cl-border: #A9B4BF;
  --cl-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .12), 0 30px 60px -30px rgba(30, 41, 59, .55);
  --cl-text: #1E293B; --cl-muted: #475569;
  --cl-face: radial-gradient(circle at 50% 35%, #2B3846 0%, #17212B 75%);
  --cl-bezel: 0 0 0 5px #DDE3E9, 0 0 0 6px #8C98A4, 0 12px 22px -10px rgba(15, 23, 42, .55), inset 0 2px 10px rgba(0, 0, 0, .6);
  --cl-track: rgba(255, 255, 255, .08); --cl-red: rgba(248, 113, 113, .6);
  --cl-prog: #7DD3FC; --cl-prog-glow: rgba(125, 211, 252, .7);
  --cl-tick: rgba(226, 232, 240, .35); --cl-tick-major: #E2E8F0; --cl-num: #E2E8F0; --cl-ok: #16A34A; --cl-ok-glow: rgba(74, 222, 128, .6);
  --cl-hub: radial-gradient(circle at 40% 35%, #F1F5F9, #64748B 75%); --cl-hub-ring: rgba(255, 255, 255, .5);
  --cl-lcd-bg: linear-gradient(180deg, #17212B, #22303D); --cl-lcd-border: #8C98A4;
  --cl-lcd-lbl: #BAE6FD;
  --cl-btn: radial-gradient(circle at 50% 25%, #FFFFFF 0%, #E2E8EE 45%, #AEB8C2 100%);
  --cl-btn-hover: radial-gradient(circle at 50% 25%, #FFFFFF 0%, #EAEFF3 45%, #BAC3CC 100%);
  --cl-btn-text: #1E293B; --cl-btn-text-on: #0369A1;
  --cl-btn-rim: 0 0 0 7px #D9DFE5, 0 0 0 8px #8C98A4, 0 18px 28px -12px rgba(15, 23, 42, .5), inset 0 2px 2px #fff, inset 0 -8px 14px rgba(0, 0, 0, .14);
  --cl-ring: rgba(3, 105, 161, .25); --cl-ring-on: #0284C7; --cl-ring-glow: rgba(2, 132, 199, .45);
}
.is-skin-titanium .dmc-cl-unit { color: rgba(226, 232, 240, .65); }

.dmc-cl-dial { position: relative; width: 196px; aspect-ratio: 1; }
.dmc-cl-dial::before { content: ''; position: absolute; inset: 2%; z-index: -1; border-radius: 50%; background: var(--cl-face); box-shadow: var(--cl-bezel); }
.dmc-cl-dial svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dmc-cl-track { fill: none; stroke: var(--cl-track); stroke-width: 7; stroke-linecap: round; }
.dmc-cl-red { fill: none; stroke: var(--cl-red); stroke-width: 7; }
.dmc-cl-prog {
  fill: none; stroke: var(--cl-prog); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--dmc-p, 0) * 100); opacity: 0;
  filter: drop-shadow(0 0 5px var(--cl-prog-glow));
  transition: stroke-dashoffset .55s cubic-bezier(.34, 1.4, .64, 1), stroke .3s, opacity .3s;
}
.dmc-search.is-d-cluster.has-value .dmc-cl-prog { opacity: 1; }
.dmc-search.is-d-cluster.is-ready .dmc-cl-prog { stroke: var(--cl-ok); filter: drop-shadow(0 0 6px var(--cl-ok-glow)); }
.dmc-cl-ticks line { stroke: var(--cl-tick); stroke-width: 1.5; stroke-linecap: round; }
.dmc-cl-ticks line.is-major { stroke: var(--cl-tick-major); stroke-width: 2.6; }
.dmc-cl-ticks line.is-red { stroke: var(--cl-red); }
.dmc-cl-nums text { fill: var(--cl-num); font: 600 14px var(--font-h); text-anchor: middle; }
.dmc-cl-needle {
  position: absolute; left: 50%; top: 13%; width: 4px; height: 37%; margin-left: -2px; border-radius: 4px; transform-origin: 50% 100%;
  background: var(--cl-needle); box-shadow: var(--cl-needle-glow);
  transform: rotate(calc(-120deg + var(--dmc-p, 0) * 240deg));
  transition: transform .6s cubic-bezier(.34, 1.5, .64, 1);
}
.dmc-cl-hub { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--cl-hub); box-shadow: 0 0 0 2px var(--cl-hub-ring), 0 4px 8px rgba(0, 0, 0, .35); }
.dmc-cl-unit { position: absolute; left: 0; right: 0; bottom: 17%; text-align: center; font-size: .72rem; color: var(--cl-muted); }
.dmc-search.is-d-cluster.is-rev .dmc-cl-needle { transform: rotate(134deg); transition: transform .45s cubic-bezier(.5, 0, .2, 1); }
.dmc-search.is-d-cluster.is-rev .dmc-cl-prog { stroke-dashoffset: 0; }

.dmc-cl-lcd {
  position: relative; display: block; padding: 14px 20px 14px; border-radius: 16px; cursor: text; overflow: hidden;
  background: var(--cl-lcd-bg); border: 1px solid var(--cl-lcd-border);
  box-shadow: var(--cl-lcd-inset); transition: border-color .25s, box-shadow .25s;
}
.dmc-cl-lcd::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, var(--cl-lcd-scan) 0 1px, transparent 1px 3px); }
.dmc-search.is-d-cluster .dmc-cl-lcd:focus-within { border-color: var(--cl-focus); box-shadow: var(--cl-lcd-inset), 0 0 0 4px color-mix(in srgb, var(--cl-focus) 22%, transparent); }
.dmc-cl-lcd-lbl { display: block; font: 600 .8rem/1 var(--font-b); letter-spacing: .02em; color: var(--cl-lcd-lbl); margin-bottom: 8px; }
.dmc-search .dmc-cl-lcd input.dmc-plate-input {
  display: block; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; outline: none !important; height: auto !important; min-height: 0 !important;
  font: 700 2.4rem/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; letter-spacing: .16em !important; text-transform: uppercase;
  color: var(--cl-lcd-text) !important; text-shadow: var(--cl-lcd-glow); caret-color: var(--cl-caret); -webkit-appearance: none; appearance: none;
}
.dmc-search .dmc-cl-lcd input.dmc-plate-input::placeholder { color: var(--cl-lcd-ph); text-shadow: none; opacity: 1; }
.dmc-cl-state { margin: 10px 2px 0; font-size: .9rem; color: var(--cl-muted); }
.dmc-search.is-d-cluster.is-ready .dmc-cl-state { color: var(--cl-ok-text, var(--cl-ok)); font-weight: 600; }

.dmc-search.is-d-cluster .dmc-go.dmc-cl-start {
  position: relative; justify-self: center; width: 140px; height: 140px; min-width: 0; padding: 0; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; color: var(--cl-btn-text);
  background: var(--cl-btn); box-shadow: var(--cl-btn-rim);
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), color .3s;
}
.dmc-search.is-d-cluster .dmc-go.dmc-cl-start:hover, .dmc-search.is-d-cluster .dmc-go.dmc-cl-start:focus { background: var(--cl-btn-hover); color: var(--cl-btn-text-on); transform: none; }
.dmc-search.is-d-cluster .dmc-go.dmc-cl-start:active { transform: scale(.95); }
.dmc-cl-ring { position: absolute; inset: 9px; border-radius: 50%; border: 2px solid var(--cl-ring); transition: border-color .3s, box-shadow .3s; }
.dmc-search.is-d-cluster.is-ready .dmc-cl-ring { border-color: var(--cl-ring-on); box-shadow: 0 0 16px var(--cl-ring-glow), inset 0 0 12px var(--cl-ring-glow); animation: dmcPulse 1.6s ease-in-out infinite; }
.dmc-search.is-d-cluster.is-ready .dmc-go.dmc-cl-start { color: var(--cl-btn-text-on); }
@keyframes dmcPulse { 50% { box-shadow: 0 0 3px transparent, inset 0 0 3px transparent; } }
.dmc-cl-face { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.dmc-cl-power { position: relative; width: 18px; height: 18px; border: 2.5px solid currentColor; border-top-color: transparent; border-radius: 50%; margin-bottom: 2px; }
.dmc-cl-power::after { content: ''; position: absolute; left: 50%; top: -6px; width: 2.5px; height: 10px; margin-left: -1.25px; border-radius: 2px; background: currentColor; }
.dmc-search.is-d-cluster.is-ready .dmc-cl-power { color: var(--cl-ring-on); }
.dmc-cl-start .dmc-go-label { font: 700 1.05rem/1 var(--font-h); letter-spacing: .02em; }
.dmc-cl-face small { font: 600 .6rem/1 var(--font-b); letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.dmc-search.is-d-cluster .dmc-form.is-busy .dmc-go-label { font-size: .78rem; }

.dmc-search.is-d-cluster.is-nogauge .dmc-cl { grid-template-columns: minmax(0, 1fr) 148px; }
@media (max-width: 760px) { .dmc-search.is-d-cluster.is-nogauge .dmc-cl { grid-template-columns: 1fr; } }

/* ── CONSOLE · [dmc_form design="console" finish="…"] ─────────────── *
 * A large registration display and a push-to-start button. Ten
 * finishes; the button pulses once a registration looks complete.   */
.dmc-search.is-d-console { max-width: 600px; }
.dmc-con { display: flex; align-items: center; gap: 20px; position: relative; text-align: left; }
.dmc-con-field { flex: 1 1 auto; min-width: 0; display: block; position: relative; cursor: text; }
.dmc-con-lbl { display: block; margin-bottom: 4px; font: 600 .66rem/1.2 var(--font-b); letter-spacing: .16em; text-transform: uppercase; }
.dmc-con-in { display: block; }
.dmc-search .dmc-con input.dmc-plate-input {
  display: block; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important;
  font: 700 2.3rem/1.15 var(--font-h) !important; letter-spacing: .1em !important; text-transform: uppercase; -webkit-appearance: none; appearance: none;
}
.dmc-search .dmc-con input.dmc-plate-input::placeholder { opacity: 1; text-transform: uppercase; }
.dmc-search.is-d-console .dmc-go.dmc-con-start {
  position: relative; flex: none; display: grid; place-items: center; width: 100px; height: 100px; min-width: 0; padding: 0;
  border: 0; border-radius: 50%; overflow: visible; text-transform: none;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s, filter .2s;
}
.dmc-search.is-d-console .dmc-go.dmc-con-start::after { display: none; }
.dmc-search.is-d-console .dmc-go.dmc-con-start:hover { transform: translateY(-2px); filter: brightness(1.05); }
.dmc-search.is-d-console .dmc-go.dmc-con-start:active, .dmc-search.is-d-console.is-sent .dmc-go.dmc-con-start { transform: scale(.93); }
.dmc-con-face { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dmc-con-start .dmc-go-label { font: 700 .95rem/1 var(--font-h); letter-spacing: .03em; }
.dmc-con-face small { font: 600 .55rem/1 var(--font-b); letter-spacing: .22em; text-transform: uppercase; opacity: .7; }
.dmc-con-pw { position: relative; width: 18px; height: 18px; margin-bottom: 2px; border: 2.4px solid currentColor; border-top-color: transparent; border-radius: 50%; }
.dmc-con-pw::after { content: ''; position: absolute; left: 50%; top: -6px; width: 2.4px; height: 9px; margin-left: -1.2px; border-radius: 2px; background: currentColor; }
.dmc-search.is-d-console .dmc-form.is-busy .dmc-go-label { font-size: .72rem; }
.dmc-search.is-d-console.is-ready .dmc-go.dmc-con-start { animation: dmcConPulse 1.8s ease-in-out infinite; }
@keyframes dmcConPulse { 50% { box-shadow: var(--con-p2, none); } }
.dmc-search.is-d-console .dmc-hint { text-align: left; }

/* Ivory heritage */
.is-con-ivory .dmc-con { padding: 18px; border-radius: 26px; background: linear-gradient(180deg, #FFFDF8, #F2ECDF); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #DDD3C0, 0 0 0 6px #FFFFFF, 0 0 0 7px #C9CFD5, 0 26px 44px -24px rgba(62, 39, 22, .45); }
.is-con-ivory .dmc-con-field { padding: 12px 20px; border-radius: 15px; background: linear-gradient(180deg, #12304A, #0E2639); box-shadow: 0 0 0 3px #D9DEE4, 0 0 0 4px #8E99A4, inset 0 2px 10px rgba(0, 0, 0, .5); }
.is-con-ivory .dmc-con-lbl { color: #F5DEB3; }
.dmc-search.is-con-ivory .dmc-con input.dmc-plate-input { color: #FFF6E0 !important; caret-color: #F5B700; }
.dmc-search.is-con-ivory .dmc-con input.dmc-plate-input::placeholder { color: rgba(255, 246, 224, .42); }
.is-con-ivory .dmc-con-field:focus-within { box-shadow: 0 0 0 3px #F5B700, 0 0 0 4px #B45309, inset 0 2px 10px rgba(0, 0, 0, .5); }
.dmc-search.is-con-ivory .dmc-go.dmc-con-start { color: #12304A; background: radial-gradient(circle at 50% 25%, #FFFFFF, #E2E6EA 45%, #A9B3BD); box-shadow: 0 0 0 5px #12304A, 0 0 0 7px #C9D0D8, 0 16px 24px -10px rgba(62, 39, 22, .55), inset 0 2px 2px #fff; --con-p2: 0 0 0 5px #12304A, 0 0 0 7px #F5B700, 0 0 22px rgba(245, 183, 0, .6), inset 0 2px 2px #fff; }
.is-con-ivory .dmc-con-pw { color: #B45309; }

/* Pearl console */
.is-con-pearl .dmc-con { padding: 16px 16px 16px 18px; border-radius: 32px; background: linear-gradient(160deg, #FFFFFF, #EDF2F6); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #DCE4EC, 0 26px 44px -26px rgba(11, 27, 43, .4); }
.is-con-pearl .dmc-con-field { padding: 12px 20px; border-radius: 18px; background: linear-gradient(180deg, #0B1B2B, #12304A); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .55); }
.is-con-pearl .dmc-con-lbl { color: #7DD3FC; }
.dmc-search.is-con-pearl .dmc-con input.dmc-plate-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; letter-spacing: .14em !important; color: #E0F2FE !important; text-shadow: 0 0 12px rgba(56, 189, 248, .6); caret-color: #F5B700; }
.dmc-search.is-con-pearl .dmc-con input.dmc-plate-input::placeholder { color: rgba(186, 230, 253, .45); text-shadow: none; }
.is-con-pearl .dmc-con-field:focus-within { box-shadow: inset 0 2px 10px rgba(0, 0, 0, .55), 0 0 0 3px rgba(56, 189, 248, .6); }
.dmc-search.is-con-pearl .dmc-go.dmc-con-start { width: 104px; height: 104px; color: #12304A; background: radial-gradient(circle at 50% 28%, #FFFFFF, #E6ECF1 55%, #C9D3DD); box-shadow: 0 0 0 6px #F1F5F9, 0 0 0 7px #C9D3DD, 0 0 0 10px rgba(56, 189, 248, .12), 0 14px 22px -10px rgba(11, 27, 43, .4); --con-p2: 0 0 0 6px #F1F5F9, 0 0 0 7px #C9D3DD, 0 0 0 11px rgba(56, 189, 248, .5), 0 14px 22px -10px rgba(11, 27, 43, .4); }
.is-con-pearl .dmc-con-pw { color: #0284C7; }

/* Plate console */
.is-con-plate .dmc-con { padding: 12px; gap: 14px; border-radius: 24px; background: linear-gradient(160deg, #12304A, #0B1B2B); border: 1px solid rgba(125, 211, 252, .2); box-shadow: 0 26px 44px -24px rgba(11, 27, 43, .7); }
.is-con-plate .dmc-con-plate { display: flex; align-items: stretch; height: 84px; padding: 6px; border-radius: 12px; background: linear-gradient(180deg, #FFD54A 0%, #F7BC00 50%, #EFB000 100%); box-shadow: 0 0 0 2px #10171F, inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 28px -14px rgba(0, 0, 0, .6); }
.is-con-plate .dmc-con-plate .dmc-band-uk { width: 46px; margin-right: 6px; }
.dmc-search.is-con-plate .dmc-con input.dmc-plate-input { align-self: center; text-align: center; font-size: 2.5rem !important; letter-spacing: .08em !important; color: #0D0D0D !important; caret-color: #0B1B2B; }
.dmc-search.is-con-plate .dmc-con input.dmc-plate-input::placeholder { color: rgba(13, 13, 13, .35); }
.is-con-plate .dmc-con-plate:focus-within { box-shadow: 0 0 0 2px #10171F, 0 0 0 5px #38BDF8, 0 16px 28px -14px rgba(0, 0, 0, .6); }
.dmc-search.is-con-plate .dmc-go.dmc-con-start { width: 86px; height: 86px; color: #0B1B2B; background: radial-gradient(circle at 50% 30%, #BAE6FD, #38BDF8 55%, #0284C7); box-shadow: 0 0 0 4px #0B1B2B, 0 0 0 6px rgba(125, 211, 252, .45), 0 0 14px rgba(56, 189, 248, .45); --con-p2: 0 0 0 4px #0B1B2B, 0 0 0 6px rgba(125, 211, 252, .9), 0 0 28px rgba(56, 189, 248, .85); }

/* Glass capsule */
.is-con-glass .dmc-con { padding: 10px 10px 10px 30px; border-radius: 999px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 #fff, 0 26px 50px -26px rgba(3, 105, 161, .5); }
.dmc-search.is-con-glass { background: radial-gradient(45% 80% at 10% 10%, #BAE6FD, transparent 70%), radial-gradient(45% 80% at 95% 95%, #C7D2FE, transparent 70%), linear-gradient(135deg, #E0F2FE, #F8FAFC); padding: 28px; border-radius: 28px; }
.is-con-glass .dmc-con-lbl { color: #31556F; }
.dmc-search.is-con-glass .dmc-con input.dmc-plate-input { color: #0B1B2B !important; caret-color: #0284C7; }
.dmc-search.is-con-glass .dmc-con input.dmc-plate-input::placeholder { color: rgba(11, 27, 43, .3); }
.is-con-glass .dmc-con:focus-within { border-color: #7DD3FC; }
.dmc-search.is-con-glass .dmc-go.dmc-con-start { width: 92px; height: 92px; color: #fff; background: radial-gradient(circle at 50% 30%, #38BDF8, #0369A1 70%); box-shadow: 0 0 0 5px rgba(255, 255, 255, .8), 0 14px 24px -10px rgba(3, 105, 161, .7); --con-p2: 0 0 0 5px rgba(255, 255, 255, .8), 0 0 0 16px rgba(56, 189, 248, .22), 0 14px 24px -10px rgba(3, 105, 161, .7); }

/* Touchscreen */
.is-con-touch .dmc-con { padding: 8px; gap: 8px; border-radius: 26px; background: #0B1B2B; box-shadow: 0 26px 44px -22px rgba(11, 27, 43, .6); }
.is-con-touch .dmc-con-field { padding: 14px 22px; border-radius: 20px; background: linear-gradient(160deg, #FFFFFF, #EEF3F8); }
.is-con-touch .dmc-con-lbl { color: #64748B; text-transform: none; letter-spacing: 0; font-size: .78rem; font-weight: 500; }
.dmc-search.is-con-touch .dmc-con input.dmc-plate-input { color: #0B1B2B !important; caret-color: #0284C7; }
.dmc-search.is-con-touch .dmc-con input.dmc-plate-input::placeholder { color: #A9B6C3; }
.is-con-touch .dmc-con-field:focus-within { box-shadow: inset 0 0 0 2px #38BDF8; }
.dmc-search.is-con-touch .dmc-go.dmc-con-start { width: 116px; height: 96px; border-radius: 20px; overflow: hidden; color: #fff; background: linear-gradient(160deg, #38BDF8, #0369A1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.dmc-search.is-con-touch .dmc-go.dmc-con-start::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); background-size: 250% 100%; animation: dmcSweep 2.6s ease-in-out infinite; }
@keyframes dmcSweep { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.dmc-search.is-con-touch.is-ready .dmc-go.dmc-con-start { animation: none; background: linear-gradient(160deg, #22C55E, #15803D); }

/* Machined aluminium */
.is-con-aluminium .dmc-con { padding: 18px; border-radius: 22px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 1px, rgba(255, 255, 255, 0) 1px 3px), linear-gradient(160deg, #F4F6F8, #C5CDD5); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .12), 0 0 0 1px #A9B4BF, 0 24px 40px -22px rgba(30, 41, 59, .5); }
.is-con-aluminium .dmc-con-field { padding: 12px 20px; border-radius: 14px; background: linear-gradient(180deg, #CBD3DB, #E6EBEF); box-shadow: inset 0 3px 8px rgba(15, 23, 42, .3), inset 0 -1px 0 #fff; }
.is-con-aluminium .dmc-con-lbl { color: #334155; }
.dmc-search.is-con-aluminium .dmc-con input.dmc-plate-input { color: #0F172A !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); caret-color: #0369A1; }
.dmc-search.is-con-aluminium .dmc-con input.dmc-plate-input::placeholder { color: rgba(15, 23, 42, .32); }
.is-con-aluminium .dmc-con-field:focus-within { box-shadow: inset 0 3px 8px rgba(15, 23, 42, .3), 0 0 0 3px rgba(2, 132, 199, .45); }
.dmc-search.is-con-aluminium .dmc-go.dmc-con-start { color: #0F172A; background: repeating-conic-gradient(from 0deg, #B9C2CB 0 4deg, #E9EDF1 4deg 8deg); box-shadow: 0 10px 18px -8px rgba(15, 23, 42, .6); --con-p2: 0 0 0 3px rgba(2, 132, 199, .55), 0 10px 18px -8px rgba(15, 23, 42, .6); }
.dmc-search.is-con-aluminium .dmc-go.dmc-con-start::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #FFFFFF, #D3DAE1 70%); box-shadow: inset 0 1px 2px #fff, 0 2px 4px rgba(0, 0, 0, .25); }
.is-con-aluminium .dmc-con-pw { color: #0284C7; }

/* Leather and chrome */
.is-con-leather .dmc-con { padding: 18px; border-radius: 22px; background: radial-gradient(circle at 30% 20%, #8B5A3C, #5C3920 70%); box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .12), 0 22px 40px -18px rgba(0, 0, 0, .7); }
.is-con-leather .dmc-con::before { content: ''; position: absolute; inset: 7px; border-radius: 16px; border: 1.5px dashed rgba(245, 222, 179, .55); pointer-events: none; }
.is-con-leather .dmc-con-field { padding: 10px 14px 12px; border-radius: 12px; background: linear-gradient(180deg, #DDE3E9, #AEB8C2); box-shadow: 0 0 0 2px #6E7883, inset 0 1px 0 #fff, 0 6px 12px -6px rgba(0, 0, 0, .6); }
.is-con-leather .dmc-con-lbl { color: #374151; margin-bottom: 6px; }
.is-con-leather .dmc-con-in { padding: 8px 12px; border-radius: 8px; background: #0E1620; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .9); }
.dmc-search.is-con-leather .dmc-con input.dmc-plate-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 2rem !important; letter-spacing: .12em !important; color: #F5B700 !important; text-shadow: 0 0 10px rgba(245, 183, 0, .55); caret-color: #F5B700; }
.dmc-search.is-con-leather .dmc-con input.dmc-plate-input::placeholder { color: rgba(245, 183, 0, .38); text-shadow: none; }
.dmc-search.is-con-leather .dmc-go.dmc-con-start { width: 98px; height: 98px; color: #3A2414; background: radial-gradient(circle at 50% 25%, #FFFFFF, #DCE1E6 45%, #9AA5B0); box-shadow: 0 0 0 5px #3A2414, 0 0 0 7px #C9D0D8, 0 14px 22px -8px rgba(0, 0, 0, .7), inset 0 2px 2px #fff; --con-p2: 0 0 0 5px #3A2414, 0 0 0 7px #F5B700, 0 0 20px rgba(245, 183, 0, .55), inset 0 2px 2px #fff; }
.is-con-leather .dmc-con-pw { color: #B45309; }

/* Carbon race */
.is-con-carbon .dmc-con { padding: 16px; border-radius: 20px; background: repeating-linear-gradient(45deg, #1C1F24 0 4px, #15171B 4px 8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 22px 40px -20px rgba(0, 0, 0, .9); }
.is-con-carbon .dmc-con-field { padding: 10px 18px 12px; border-radius: 12px; background: #050607; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .9), 0 0 0 1px rgba(239, 68, 68, .3); }
.is-con-carbon .dmc-con-lbl { color: #9CA3AF; }
.dmc-search.is-con-carbon .dmc-con input.dmc-plate-input { font-style: italic; color: #fff !important; caret-color: #EF4444; }
.dmc-search.is-con-carbon .dmc-con input.dmc-plate-input::placeholder { color: rgba(255, 255, 255, .3); }
.is-con-carbon .dmc-con-field:focus-within { box-shadow: inset 0 2px 8px rgba(0, 0, 0, .9), 0 0 0 2px #EF4444; }
.dmc-search.is-con-carbon .dmc-go.dmc-con-start { color: #fff; background: radial-gradient(circle at 50% 30%, #3A3F46, #111316 72%); box-shadow: 0 0 0 4px #0A0B0D, 0 0 0 7px #7F1D1D, 0 0 6px rgba(239, 68, 68, .2); --con-p2: 0 0 0 4px #0A0B0D, 0 0 0 7px #DC2626, 0 0 26px rgba(239, 68, 68, .7); }
.is-con-carbon .dmc-con-face small { color: #FCA5A5; opacity: 1; }
.is-con-carbon .dmc-con-pw { color: #F87171; }

/* Ambient light */
.is-con-ambient .dmc-con { padding: 14px 14px 14px 24px; border-radius: 22px; background: linear-gradient(180deg, #13202E, #0A121B); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(125, 211, 252, .14), 0 22px 40px -20px rgba(0, 0, 0, .8); }
.is-con-ambient .dmc-con::after { content: ''; position: absolute; left: 24px; right: 130px; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #38BDF8, #A78BFA, #38BDF8, transparent); background-size: 200% 100%; animation: dmcFlow 3s linear infinite; box-shadow: 0 0 18px 2px rgba(56, 189, 248, .6); }
@keyframes dmcFlow { from { background-position: 0 0; } to { background-position: 200% 0; } }
.is-con-ambient .dmc-con-lbl { color: #7DD3FC; }
.dmc-search.is-con-ambient .dmc-con input.dmc-plate-input { color: #F0F9FF !important; caret-color: #38BDF8; }
.dmc-search.is-con-ambient .dmc-con input.dmc-plate-input::placeholder { color: rgba(224, 242, 254, .38); }
.dmc-search.is-con-ambient .dmc-go.dmc-con-start { width: 92px; height: 92px; color: #E0F2FE; background: radial-gradient(circle at 50% 30%, #1F3448, #0A121B 72%); box-shadow: 0 0 0 2px rgba(56, 189, 248, .55), 0 0 10px rgba(56, 189, 248, .3); --con-p2: 0 0 0 2px #38BDF8, 0 0 28px rgba(56, 189, 248, .7), inset 0 0 14px rgba(56, 189, 248, .35); }

/* Neon */
.is-con-neon .dmc-con { padding: 14px 14px 14px 28px; border-radius: 999px; background: radial-gradient(70% 120% at 50% 0%, #10233A, #050A12); border: 1.5px solid #7DD3FC; box-shadow: 0 0 14px rgba(56, 189, 248, .6), inset 0 0 14px rgba(56, 189, 248, .25); }
.is-con-neon .dmc-con-lbl { color: #7DD3FC; }
.dmc-search.is-con-neon .dmc-con input.dmc-plate-input { font-weight: 500 !important; letter-spacing: .14em !important; color: #F0F9FF !important; text-shadow: 0 0 10px rgba(125, 211, 252, .9), 0 0 24px rgba(56, 189, 248, .5); caret-color: #F5B700; }
.dmc-search.is-con-neon .dmc-con input.dmc-plate-input::placeholder { color: rgba(186, 230, 253, .4); text-shadow: none; }
.dmc-search.is-con-neon .dmc-go.dmc-con-start { width: 88px; height: 88px; color: #F5B700; background: #050A12; border: 1.5px solid #F5B700; box-shadow: 0 0 8px rgba(245, 183, 0, .4), inset 0 0 8px rgba(245, 183, 0, .25); --con-p2: 0 0 22px rgba(245, 183, 0, .85), inset 0 0 16px rgba(245, 183, 0, .5); }

@media (max-width: 600px) {
  .dmc-con { gap: 12px; }
  .dmc-search .dmc-con input.dmc-plate-input { font-size: 1.6rem !important; }
  .dmc-search.is-con-plate .dmc-con input.dmc-plate-input { font-size: 1.35rem !important; letter-spacing: .04em !important; }
  .is-con-plate .dmc-con-plate .dmc-band-uk { width: 34px; margin-right: 4px; }
  .dmc-search.is-con-leather .dmc-con input.dmc-plate-input { font-size: 1.3rem !important; letter-spacing: .08em !important; }
  .is-con-leather .dmc-con-field { padding: 8px 10px 10px; }
  .is-con-leather .dmc-con-in { padding: 6px 8px; }
  .dmc-search.is-con-touch .dmc-con-start .dmc-go-label { font-size: .78rem; white-space: normal; text-align: center; line-height: 1.15; }
  .dmc-con-face small { letter-spacing: .12em; font-size: .5rem; }
  .dmc-search.is-d-console .dmc-go.dmc-con-start { width: 76px !important; height: 76px !important; }
  .dmc-search.is-con-touch .dmc-go.dmc-con-start { width: 84px !important; height: 84px !important; }
  .is-con-ivory .dmc-con, .is-con-aluminium .dmc-con, .is-con-leather .dmc-con, .is-con-carbon .dmc-con { padding: 12px; }
  .is-con-glass .dmc-con, .is-con-neon .dmc-con, .is-con-ambient .dmc-con { padding-left: 18px; }
  .dmc-search.is-con-glass { padding: 16px; }
  .is-con-plate .dmc-con-plate { height: 68px; }
  .is-con-ambient .dmc-con::after { right: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .dmc-search.is-d-console .dmc-go.dmc-con-start, .dmc-search.is-con-touch .dmc-go.dmc-con-start::before, .is-con-ambient .dmc-con::after { animation: none !important; }
}

/* ── 4 · FLAP BOARD ───────────────────────────────────────────────── */
.dmc-flap {
  padding: 22px; border-radius: 22px; background: linear-gradient(180deg, #111C27 0%, #060B11 100%);
  border: 1px solid #1E2C3A; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -30px rgba(0, 0, 0, .85);
  transition: border-color .3s, box-shadow .3s;
}
.dmc-search.is-d-flap:focus-within .dmc-flap { border-color: rgba(56, 189, 248, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 4px rgba(56, 189, 248, .12), 0 30px 60px -30px rgba(0, 0, 0, .85); }
.dmc-flap-board { position: relative; display: block; cursor: text; container-type: inline-size; }
.dmc-flap-tiles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1.5cqw; }
.dmc-flap-t {
  position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; perspective: 260px;
  border-radius: 1.3cqw; background: linear-gradient(180deg, #1D2732 0%, #141C25 49.6%, #0F161E 50.4%, #19222C 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .6), 0 8px 12px -8px rgba(0, 0, 0, .9);
}
.dmc-flap-t::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; z-index: 2; background: rgba(0, 0, 0, .9); box-shadow: 0 1px 0 rgba(255, 255, 255, .05); }
.dmc-flap-t b { display: block; font: 700 8.6cqw/1 var(--font-h); color: #F5B700; text-shadow: 0 0 2.2cqw rgba(245, 183, 0, .35); transform-origin: 50% 50%; }
.dmc-flap-t.is-ghost b { color: rgba(245, 183, 0, .17); text-shadow: none; }
.dmc-flap-t.is-flip b { animation: dmcFlap .09s linear; }
@keyframes dmcFlap { 0% { transform: rotateX(0); } 50% { transform: rotateX(-90deg); filter: brightness(.5); } 100% { transform: rotateX(0); } }
.dmc-flap-t.is-cursor > i { position: absolute; left: 24%; right: 24%; bottom: 9%; height: 3px; border-radius: 2px; background: #38BDF8; box-shadow: 0 0 10px #38BDF8; animation: dmcBlink 1s steps(1) infinite; }
@keyframes dmcBlink { 50% { opacity: 0; } }
.dmc-search.is-d-flap:not(:focus-within) .dmc-flap-t > i { display: none; }
.dmc-search .dmc-flap-board input.dmc-plate-input {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
  opacity: 0; font-size: 16px !important; color: transparent !important; background: transparent !important; caret-color: transparent; cursor: text; z-index: 3;
}
.dmc-search.is-d-flap .dmc-go { width: 100%; height: 58px; margin-top: 16px; }

/* ── 5 · CERTIFICATE ──────────────────────────────────────────────── */
.dmc-tk {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 184px; text-align: left; color: #0B1B2B;
  filter: drop-shadow(0 26px 28px rgba(11, 27, 43, .16)) drop-shadow(0 2px 3px rgba(11, 27, 43, .1));
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.dmc-search.is-d-ticket:focus-within .dmc-tk { transform: translateY(-3px); }
.dmc-tk-main {
  position: relative; overflow: hidden; padding: 24px 30px 24px; border-radius: 20px 0 0 20px;
  background-color: #FFFFFF;
  background-image:
    repeating-radial-gradient(circle at 108% 130%, transparent 0 9px, rgba(3, 105, 161, .055) 9px 10px),
    repeating-radial-gradient(circle at -10% -40%, transparent 0 13px, rgba(3, 105, 161, .035) 13px 14px);
  -webkit-mask: radial-gradient(circle 13px at 100% 0, transparent 12.5px, #000 13px) top / 100% 51% no-repeat, radial-gradient(circle 13px at 100% 100%, transparent 12.5px, #000 13px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 13px at 100% 0, transparent 12.5px, #000 13px) top / 100% 51% no-repeat, radial-gradient(circle 13px at 100% 100%, transparent 12.5px, #000 13px) bottom / 100% 51% no-repeat;
}
.dmc-tk-stub {
  position: relative; display: grid; place-items: center; padding: 18px; border-radius: 0 20px 20px 0;
  background: linear-gradient(160deg, #EEF7FD 0%, #E2F0FA 100%);
  -webkit-mask: radial-gradient(circle 13px at 0 0, transparent 12.5px, #000 13px) top / 100% 51% no-repeat, radial-gradient(circle 13px at 0 100%, transparent 12.5px, #000 13px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 13px at 0 0, transparent 12.5px, #000 13px) top / 100% 51% no-repeat, radial-gradient(circle 13px at 0 100%, transparent 12.5px, #000 13px) bottom / 100% 51% no-repeat;
}
.dmc-tk-stub::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; border-left: 2px dashed rgba(11, 27, 43, .2); }
.dmc-search .dmc-tk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.dmc-tk-brand { display: inline-flex; align-items: center; gap: 8px; font: 600 .84rem/1 var(--font-h); color: #12304A; }
.dmc-tk-brand .dmc-mark { border-radius: 6px; }
.dmc-tk-date { font-size: .78rem; color: #5B6B7C; font-variant-numeric: tabular-nums; }
.dmc-search .dmc-tk-title { margin: 16px 0 14px; font: 600 1.4rem/1.2 var(--font-h); letter-spacing: -.01em; color: #0B1B2B; }
.dmc-tk-field { position: relative; display: block; cursor: text; }
.dmc-tk-lbl { display: block; margin-bottom: 4px; font-size: .78rem; font-weight: 600; color: #5B6B7C; }
.dmc-search .dmc-tk-field input.dmc-plate-input {
  display: block; width: 100% !important; margin: 0 !important; padding: 2px 0 8px !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; outline: none !important; height: auto !important; min-height: 0 !important;
  font: 700 2.1rem/1.1 var(--font-h) !important; letter-spacing: .14em !important; text-transform: uppercase; color: #0B1B2B !important; caret-color: #0369A1;
}
.dmc-search .dmc-tk-field input.dmc-plate-input::placeholder { color: #C9D2DB; opacity: 1; }
.dmc-tk-rule { position: relative; display: block; height: 2px; background: #DCE3EA; }
.dmc-tk-rule::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0369A1, #38BDF8); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.dmc-tk-field:focus-within .dmc-tk-rule::after { transform: scaleX(1); }
.dmc-search .dmc-tk-covers { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; }
.dmc-tk-covers li { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: #5B6B7C; }
.dmc-tk-covers li::before { content: ''; width: 9px; height: 5px; border-left: 2px solid #0369A1; border-bottom: 2px solid #0369A1; transform: rotate(-45deg) translateY(-2px); }
.dmc-tk-imprint {
  position: absolute; right: 26px; top: 38%; padding: 6px 14px; border: 3px solid #15803D; border-radius: 9px;
  font: 700 1.25rem/1 var(--font-h); letter-spacing: .16em; text-transform: uppercase; color: #15803D;
  opacity: 0; transform: rotate(-12deg) scale(1.7); pointer-events: none; mix-blend-mode: multiply;
  -webkit-mask: repeating-radial-gradient(circle at 30% 40%, #000 0 2px, rgba(0, 0, 0, .7) 2px 3px); mask: repeating-radial-gradient(circle at 30% 40%, #000 0 2px, rgba(0, 0, 0, .7) 2px 3px);
}
.dmc-search.is-d-ticket.is-stamped .dmc-tk-imprint { animation: dmcImprint .3s .2s cubic-bezier(.3, 1.4, .5, 1) forwards; }
@keyframes dmcImprint { to { opacity: .88; transform: rotate(-12deg) scale(1); } }
.dmc-search.is-d-ticket .dmc-go.dmc-tk-stamp {
  position: relative; width: 132px; height: 132px; min-width: 0; padding: 0; border-radius: 50%; overflow: visible;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 50% 32%, #1F4A72 0%, #12304A 50%, #0B1B2B 100%);
  box-shadow: 0 0 0 5px #E8F3FB, 0 0 0 7px #12304A, 0 16px 24px -10px rgba(11, 27, 43, .6), inset 0 2px 2px rgba(255, 255, 255, .2);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.dmc-search.is-d-ticket .dmc-go.dmc-tk-stamp::after { display: none; }
.dmc-search.is-d-ticket .dmc-go.dmc-tk-stamp:hover, .dmc-search.is-d-ticket .dmc-go.dmc-tk-stamp:focus { background: radial-gradient(circle at 50% 32%, #285A88 0%, #14385A 50%, #0B1B2B 100%); transform: rotate(-6deg) translateY(-2px); }
.dmc-tk-ringtext { position: absolute; inset: 0; width: 100%; height: 100%; animation: dmcSpin 22s linear infinite; animation-play-state: paused; }
.dmc-search.is-d-ticket .dmc-tk-stamp:is(:hover, :focus-visible) .dmc-tk-ringtext,
.dmc-search.is-d-ticket.is-ready .dmc-tk-ringtext { animation-play-state: running; }
.dmc-tk-ringtext text { fill: rgba(255, 255, 255, .72); font: 600 9.2px var(--font-b); letter-spacing: 1.6px; }
.dmc-tk-stamp .dmc-go-label { position: relative; font: 700 1.15rem/1 var(--font-h); }
.dmc-search.is-d-ticket.is-stamped .dmc-tk-stamp { animation: dmcThump .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes dmcThump { 0% { transform: rotate(-6deg) scale(1); } 40% { transform: rotate(-12deg) scale(.86); } 100% { transform: rotate(-6deg) scale(1); } }
.dmc-search.is-d-ticket .dmc-form.is-busy .dmc-go-label { font-size: .8rem; }

/* ── 6 · CAR REAR ─────────────────────────────────────────────────── */
.dmc-rear {
  position: relative; isolation: isolate; overflow: hidden; padding: 26px 22px 22px; border-radius: 24px;
  background: radial-gradient(70% 55% at 50% 0%, rgba(56, 189, 248, .16), transparent 70%), linear-gradient(180deg, #0D2236 0%, #07121D 64%, #04090F 100%);
  border: 1px solid rgba(125, 211, 252, .14); box-shadow: 0 30px 60px -30px rgba(4, 9, 15, .9);
}
.dmc-rear::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent); border-top: 1px solid rgba(255, 255, 255, .04); }
.dmc-rear-car { position: relative; max-width: 600px; margin: 0 auto; container-type: inline-size; }
.dmc-rear-svg { display: block; width: 100%; height: auto; overflow: visible; }
.dmc-rear-shadow { fill: rgba(0, 0, 0, .6); }
.dmc-rear-tyre { fill: #03070B; }
.dmc-rear-roof { fill: #13304B; stroke: rgba(125, 211, 252, .2); stroke-width: 1.5; }
.dmc-rear-glass { fill: url(#dmcRearGlass); }
.dmc-rear-shine { fill: rgba(255, 255, 255, .06); }
.dmc-rear-body { fill: url(#dmcRearBody); stroke: rgba(125, 211, 252, .24); stroke-width: 1.5; }
.dmc-rear-crease { stroke: rgba(255, 255, 255, .07); stroke-width: 2; }
.dmc-rear-recess { fill: #08141F; stroke: rgba(255, 255, 255, .06); }
.dmc-rear-bumper { stroke: rgba(255, 255, 255, .1); stroke-width: 3; stroke-linecap: round; }
.dmc-rear-diff { fill: #07111A; }
.dmc-rear-lamp { fill: #4A1619; stroke: rgba(255, 120, 120, .22); stroke-width: 1.2; transition: fill .35s, filter .35s; }
.dmc-rear-strip { fill: #3A1215; transition: fill .35s; }
.dmc-rear-ind rect { fill: #4A3308; }
.dmc-search.is-d-rear:focus-within .dmc-rear-lamp,
.dmc-search.is-d-rear.has-value .dmc-rear-lamp { fill: url(#dmcRearLamp); filter: drop-shadow(0 0 8px rgba(239, 68, 68, .95)) drop-shadow(0 0 22px rgba(239, 68, 68, .5)); }
.dmc-search.is-d-rear:focus-within .dmc-rear-strip,
.dmc-search.is-d-rear.has-value .dmc-rear-strip { fill: #F87171; }
.dmc-rear-glow { position: absolute; top: 74%; width: 34%; height: 30%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 68, 68, .45), transparent); opacity: 0; transition: opacity .4s; pointer-events: none; }
.dmc-rear-glow.is-l { left: 6%; } .dmc-rear-glow.is-r { right: 6%; }
.dmc-search.is-d-rear:focus-within .dmc-rear-glow, .dmc-search.is-d-rear.has-value .dmc-rear-glow { opacity: 1; }
.dmc-search.is-d-rear.is-hazard .dmc-rear-ind rect { animation: dmcHazard .5s steps(1) infinite; }
@keyframes dmcHazard { 0% { fill: #FFB020; filter: drop-shadow(0 0 8px #F59E0B); } 50% { fill: #4A3308; filter: none; } }

.dmc-search.is-d-rear .dmc-plate.dmc-rear-plate {
  position: absolute; left: 30.6%; top: 55%; width: 38.8%; height: 19.4%; min-height: 0; padding: .7cqw; border-radius: 1.1cqw; flex: none;
}
.dmc-search.is-d-rear .dmc-rear-plate .dmc-band-uk { width: 5.4cqw; margin-right: .7cqw; gap: .4cqw; border-radius: .7cqw; }
.dmc-search.is-d-rear .dmc-rear-plate .dmc-flag-uk { width: 3.2cqw; height: auto; }
.dmc-search.is-d-rear .dmc-rear-plate .dmc-band-uk b { font-size: 1.5cqw; }
.dmc-search.is-d-rear .dmc-rear-plate::after { inset: .35cqw; border-radius: .8cqw; }
.dmc-search.is-d-rear .dmc-rear-plate input.dmc-plate-input { font-size: 4.6cqw !important; padding: 0 .8cqw !important; letter-spacing: .06em !important; }
.dmc-search.is-d-rear .dmc-rear-plate input.dmc-plate-input::placeholder { letter-spacing: .06em; }
.dmc-search.is-d-rear .dmc-go { display: flex; width: min(100%, 420px); height: 56px; margin: 20px auto 0; }

/* ── small screens ───────────────────────────────────────────────── */
@media (max-width: 760px) {
  .dmc-cl { grid-template-columns: 1fr; justify-items: center; gap: 18px; padding: 22px 18px; text-align: center; }
  .dmc-cl-dial { width: 168px; }
  .dmc-cl-mid { width: 100%; text-align: left; }
  .dmc-tk { grid-template-columns: 1fr; }
  .dmc-tk-main { border-radius: 20px 20px 0 0; -webkit-mask: none; mask: none; padding: 22px 22px 20px; }
  .dmc-tk-stub { border-radius: 0 0 20px 20px; -webkit-mask: none; mask: none; }
  .dmc-tk-stub::before { left: 18px; right: 18px; top: 0; bottom: auto; border-left: 0; border-top: 2px dashed rgba(11, 27, 43, .2); }
  .dmc-tk-imprint { top: auto; bottom: 18px; right: 18px; }
}
@media (max-width: 600px) {
  .dmc-anpr { padding: 14px 14px 16px; }
  .dmc-anpr-view { padding: 20px 18px; }
  .dmc-anpr-cam { display: none; }
  .dmc-anpr-foot .dmc-go { flex-basis: 100%; }
  .dmc-search .dmc-cl-lcd input.dmc-plate-input { font-size: 1.85rem !important; }
  .dmc-search .dmc-tk-field input.dmc-plate-input { font-size: 1.7rem !important; }
  .dmc-rear { padding: 22px 0 18px; }
  .dmc-rear-car { width: 132%; max-width: none; margin-left: -16%; }
  .dmc-search.is-d-rear .dmc-go { width: calc(100% - 36px); }
  .dmc-flap { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .dmc-anpr-laser, .dmc-anpr-rec i, .dmc-tk-ringtext, .dmc-flap-t.is-flip b, .dmc-flap-t > i, .dmc-cl-ring, .dmc-rear-ind rect { animation: none !important; }
  .dmc-cl-needle, .dmc-cl-prog, .dmc-anpr-c { transition: none !important; }
}

/* =====================================================================
   SEARCH DESIGNS, 6.1 SET — live · pill · gauge · command
   ================================================================== */
/* shared input reset for the non-plate designs */
.dmc-search :is(.dmc-field, .dmc-pill-body, .dmc-cmd-field) input.dmc-plate-input {
  display: block; width: 100% !important; min-width: 0; height: auto !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; outline: none !important;
  -webkit-appearance: none; appearance: none; line-height: 1.2 !important;
}

/* ── LIVE PLATE (design="live") ───────────────────────────────────────────────── */
.dmc-live-stage { position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 0 26px; perspective: 900px; }
.dmc-search.is-left .dmc-live-stage { align-items: flex-start; }
.dmc-plate.is-live {
  position: relative; z-index: 1; min-height: 86px; min-width: min(100%, 430px);
  transform: rotateX(14deg) translateY(2px); transform-origin: 50% 100%;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s;
}
.dmc-search.is-d-live:focus-within .dmc-plate.is-live,
.dmc-search.is-d-live.has-value .dmc-plate.is-live { transform: none; box-shadow: 0 0 0 2px #10171F, inset 0 1px 0 rgba(255, 255, 255, .6), 0 26px 40px -18px rgba(0, 0, 0, .65); }
.dmc-plate.is-live .dmc-band-uk { width: 50px; }
.dmc-plate.is-live .dmc-plate-text { flex: 1 1 auto; justify-content: center; font-size: clamp(2.3rem, 7vw, 3.5rem); padding: 0 24px 0 16px; letter-spacing: .08em; }
.dmc-live-text { display: inline-block; min-width: 1ch; }
.dmc-live-text.is-ph { color: rgba(13, 13, 13, .26); }
.dmc-live-caret { display: inline-block; width: 3px; height: .9em; margin-left: 4px; border-radius: 2px; background: #0B1B2B; opacity: 0; }
.dmc-search.is-d-live:focus-within .dmc-live-caret { animation: dmcBlink 1.05s steps(1) infinite; }
@keyframes dmcBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.dmc-live-text.is-pop { animation: dmcPopChar .22s ease; }
@keyframes dmcPopChar { 40% { transform: translateY(-2px) scale(1.03); } }
.dmc-live-floor { position: absolute; bottom: 8px; left: 50%; width: min(80%, 380px); height: 22px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent); filter: blur(4px); }
.dmc-search.is-left .dmc-live-floor { left: 0; transform: none; }

.dmc-search .dmc-field {
  flex: 999 1 280px; display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0;
  padding: 0 20px; border-radius: 14px; cursor: text; text-align: left;
  background: var(--surface-2); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s, background .2s;
}
.dmc-search.is-lg .dmc-field { height: 70px; }
.dmc-search.is-md .dmc-field { height: 60px; }
.dmc-search .dmc-field:focus-within { border-color: var(--focus); box-shadow: 0 0 0 4px rgba(56, 189, 248, .22); }
.dmc-field-lbl { font: 600 .66rem/1 var(--font-b); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dmc-search .dmc-field input.dmc-plate-input { font: 600 1.3rem/1.2 var(--font-h) !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--head) !important; }
.dmc-search .dmc-field input.dmc-plate-input::placeholder { color: var(--faint); opacity: 1; }
.dmc-search:is(.is-midnight, .is-glass) .dmc-field { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.dmc-search:is(.is-midnight, .is-glass) .dmc-field:focus-within { border-color: #38BDF8; background: rgba(255, 255, 255, .09); }
.dmc-search:is(.is-midnight, .is-glass) .dmc-field-lbl { color: #7DD3FC; }
.dmc-search:is(.is-midnight, .is-glass) .dmc-field input.dmc-plate-input { color: #fff !important; }
.dmc-search:is(.is-midnight, .is-glass) .dmc-field input.dmc-plate-input::placeholder { color: rgba(255, 255, 255, .38); }

/* ── MINIMAL PILL (design="pill") ─────────────────────────────────────────────── */
.dmc-search.is-d-pill .dmc-form { display: block; }
.dmc-pill {
  display: flex; align-items: center; gap: 12px; padding: 7px; border-radius: 999px; text-align: left;
  background: #fff; border: 1px solid #E4DFD2;
  box-shadow: 0 1px 2px rgba(11, 27, 43, .06), 0 28px 56px -30px rgba(11, 27, 43, .45);
  transition: border-color .25s, box-shadow .25s;
}
.dmc-pill:hover { border-color: #CFC8B8; }
.dmc-pill:focus-within { border-color: #0284C7; box-shadow: 0 0 0 5px rgba(56, 189, 248, .22), 0 28px 56px -30px rgba(11, 27, 43, .45); }
.dmc-pill-uk { display: flex; align-self: stretch; }
.dmc-pill .dmc-band-uk { width: 52px; margin: 0; border-radius: 999px 10px 10px 999px; padding-left: 4px; }
.dmc-pill-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 4px 4px 4px 0; cursor: text; }
.dmc-pill-lbl { font: 600 .66rem/1 var(--font-b); letter-spacing: .14em; text-transform: uppercase; color: #5B6B7C; }
.dmc-search .dmc-pill input.dmc-plate-input { font: 700 1.45rem/1.15 var(--font-h) !important; letter-spacing: .12em !important; text-transform: uppercase; color: #0B1B2B !important; }
.dmc-search .dmc-pill input.dmc-plate-input::placeholder { color: #A8B3BF; opacity: 1; }
.dmc-search.is-d-pill .dmc-go { height: 56px; border-radius: 999px; padding: 0 8px 0 24px; flex: 0 0 auto; }
.dmc-search.is-d-pill.is-md .dmc-go { height: 50px; }
.dmc-search.is-d-pill .dmc-go-icon { width: 40px; height: 40px; background: rgba(255, 255, 255, .14); }
.dmc-search.is-d-pill .dmc-hint { padding-left: 24px; text-align: left; }
.dmc-search.is-d-pill.has-error .dmc-pill { border-color: #EF4444; box-shadow: 0 0 0 5px rgba(239, 68, 68, .18); }

/* ── GAUGE (design="gauge") ──────────────────────────────────────────── */
.dmc-gs { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 26px; align-items: center; text-align: left; }
.dmc-gs-dial { position: relative; width: 148px; aspect-ratio: 1; }
.dmc-gs-dial svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dmc-gs-track, .dmc-gs-fill { fill: none; stroke-width: 9; stroke-linecap: round; }
.dmc-gs-track { stroke: rgba(255, 255, 255, .1); }
.dmc-gs-fill { stroke: #38BDF8; filter: drop-shadow(0 0 6px rgba(56, 189, 248, .55)); transition: stroke-dasharray .35s cubic-bezier(.22, 1, .36, 1), stroke .3s; }
.dmc-gs-read { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 42px; gap: 3px; }
.dmc-gs-read b { font: 600 2.4rem/1 var(--font-h); color: #fff; letter-spacing: -.02em; }
.dmc-gs-read small { font: 600 .9rem/1 var(--font-h); color: rgba(255, 255, 255, .5); }
.dmc-gs-state {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); white-space: nowrap;
  font: 600 .62rem/1 var(--font-b); letter-spacing: .14em; text-transform: uppercase; color: #7DD3FC;
}
.dmc-search.is-ready .dmc-gs-fill { stroke: #4ADE80; filter: drop-shadow(0 0 7px rgba(74, 222, 128, .6)); }
.dmc-search.is-ready .dmc-gs-state { color: #4ADE80; }
.dmc-search.is-d-gauge .dmc-hint { text-align: left; }
.dmc-search.is-d-gauge:not(.is-midnight):not(.is-glass) .dmc-gs-track { stroke: var(--line-soft); }
.dmc-search.is-d-gauge:not(.is-midnight):not(.is-glass) .dmc-gs-read b { color: var(--head); }
.dmc-search.is-d-gauge:not(.is-midnight):not(.is-glass) .dmc-gs-read small { color: var(--muted); }
.dmc-search.is-d-gauge:not(.is-midnight):not(.is-glass) .dmc-gs-state { color: var(--link); }

/* ── SPOTLIGHT (design="command") ────────────────────────────────────── */
.dmc-search.is-d-command { max-width: 780px; }
.dmc-search.is-d-command .dmc-form { display: block; }
.dmc-cmd {
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 18px; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(11, 27, 43, .05), 0 30px 60px -32px rgba(11, 27, 43, .4);
  transition: border-color .2s, box-shadow .2s;
}
.dmc-search.is-light.is-d-command .dmc-cmd { background: var(--surface-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.dmc-cmd:focus-within { border-color: var(--focus); box-shadow: 0 0 0 5px rgba(56, 189, 248, .2), 0 30px 60px -32px rgba(11, 27, 43, .4); }
.dmc-cmd-ico { display: inline-flex; color: var(--muted); transition: color .2s, transform .3s; }
.dmc-cmd-ico .dmc-ico { width: 24px; height: 24px; }
.dmc-cmd:focus-within .dmc-cmd-ico { color: var(--link); transform: scale(1.06); }
.dmc-cmd-field { flex: 1 1 auto; min-width: 0; cursor: text; }
.dmc-search .dmc-cmd input.dmc-plate-input { font: 600 1.2rem/1.3 var(--font-h) !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--head) !important; padding: 10px 0 !important; }
.dmc-search .dmc-cmd input.dmc-plate-input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 500; font-family: var(--font-b); color: var(--faint); opacity: 1; }
.dmc-cmd-kbd {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 7px;
  font: 600 .8rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 -2px 0 var(--line-soft);
}
.dmc-cmd:focus-within .dmc-cmd-kbd, .dmc-search.has-value .dmc-cmd-kbd { display: none; }
.dmc-search.is-d-command .dmc-go { height: 54px; border-radius: 13px; padding: 0 10px 0 20px; }
.dmc-search.is-d-command.is-md .dmc-go { height: 48px; }
.dmc-search.is-d-command .dmc-hint { text-align: left; padding-left: 4px; }
.dmc-cmd-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-top: 16px; text-align: left; }
.dmc-cmd-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dmc-cmd-recent[hidden] { display: none; }
.dmc-cmd-recent[hidden] + .dmc-cmd-feat { margin-right: auto; }
.dmc-cmd-cap { font: 600 .68rem/1 var(--font-b); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dmc-cmd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dmc-search a.dmc-mini-plate {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 0 0; border-radius: 6px; overflow: hidden;
  font: 700 .82rem/1 var(--font-h); letter-spacing: .06em; color: #0D0D0D; text-decoration: none;
  background: linear-gradient(180deg, #FFD23F, #F2B400); box-shadow: 0 0 0 1.5px #10171F, 0 6px 12px -8px rgba(0, 0, 0, .6);
  transition: transform .2s;
}
.dmc-search a.dmc-mini-plate::before { content: ''; align-self: stretch; width: 8px; background: #0A3683; }
.dmc-search a.dmc-mini-plate:hover { transform: translateY(-1px); color: #0D0D0D; }
.dmc-search .dmc-cmd-clear { border: 0; background: transparent; padding: 4px; cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.dmc-search .dmc-cmd-clear:hover { color: var(--link); background: transparent; }
.dmc-cmd-feat { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.dmc-cmd-feat li { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 500; color: var(--muted); }
.dmc-cmd-feat .dmc-ico { width: 15px; height: 15px; color: var(--link); }
.dmc-search:is(.is-midnight, .is-glass).is-d-command .dmc-cmd { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
.dmc-search:is(.is-midnight, .is-glass).is-d-command .dmc-cmd input.dmc-plate-input { color: #fff !important; }
.dmc-search:is(.is-midnight, .is-glass).is-d-command :is(.dmc-cmd-feat li, .dmc-cmd-cap, .dmc-cmd-ico) { color: #B9C8D6; }
.dmc-search:is(.is-midnight, .is-glass).is-d-command .dmc-cmd-kbd { background: transparent; color: #B9C8D6; border-color: rgba(255, 255, 255, .2); box-shadow: none; }

@media (max-width: 600px) {
  .dmc-plate.is-live { min-width: 0; width: 100%; min-height: 70px; }
  .dmc-plate.is-live .dmc-band-uk { width: 40px; }
  .dmc-plate.is-live .dmc-plate-text { font-size: clamp(1.7rem, 8.6vw, 2.4rem); padding: 0 12px 0 8px; }
  .dmc-gs-state { bottom: 6px; }
  .dmc-gs { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  .dmc-gs-main { width: 100%; }
  .dmc-gs-dial { width: 126px; }
  .dmc-gs-read { padding-top: 36px; }
  .dmc-gs-read b { font-size: 2rem; }
  .dmc-pill { gap: 8px; padding: 6px; }
  .dmc-pill .dmc-band-uk { width: 40px; }
  .dmc-search .dmc-pill input.dmc-plate-input { font-size: 1.2rem !important; }
  .dmc-search.is-d-pill .dmc-go { flex-basis: auto; padding: 0; width: 52px; height: 52px; }
  .dmc-search.is-d-pill .dmc-go-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .dmc-search.is-d-pill .dmc-go-icon { background: transparent; }
  .dmc-cmd { flex-wrap: wrap; padding: 8px 8px 8px 14px; }
  .dmc-cmd-field { flex-basis: calc(100% - 50px); }
  .dmc-cmd-kbd { display: none; }
  .dmc-search.is-d-command .dmc-go { flex: 1 1 100%; }
}

html[data-theme="dark"] .dmc-search.is-d-command:not(.is-midnight):not(.is-glass):not(.mco-on-dark) .dmc-go { background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%); color: #0B1B2B; }
html[data-theme="dark"] .dmc-search.is-d-command:not(.is-midnight):not(.is-glass):not(.mco-on-dark) .dmc-go-icon { background: rgba(11, 27, 43, .12); }

/* =====================================================================
   REPORT — hero
   ================================================================== */
.dmc-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 28px 30px 0; border-radius: var(--r-xl); color: #fff;
  background:
    radial-gradient(80% 120% at 88% 0%, rgba(56, 189, 248, .20) 0%, rgba(56, 189, 248, 0) 55%),
    linear-gradient(135deg, #12304A 0%, #0B1B2B 72%);
  box-shadow: var(--shadow-lg);
}
.dmc-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .06) 1px, transparent 0);
  background-size: 24px 24px;
}
.dmc-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, #0EA5E9 0%, #7DD3FC 60%, rgba(125, 211, 252, 0) 100%);
}
.dmc-hero-arc { position: absolute; z-index: -1; right: -70px; bottom: -120px; width: 420px; height: 420px; color: rgba(56, 189, 248, .11); pointer-events: none; }
.dmc-hero-arc svg { width: 100%; height: 100%; display: block; }
.dmc-hero-arc circle { fill: rgba(245, 183, 0, .45); }

.dmc-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 28px; align-items: center; }
.dmc-hero-main { min-width: 0; }
.dmc-hero .dmc-plate { margin-bottom: 22px; }

.dmc-ident { display: flex; align-items: center; gap: 14px; }
.dmc-logo {
  flex: 0 0 auto; width: 56px; height: 56px; padding: 8px; border-radius: 16px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(11, 27, 43, .06);
}
.dmc-logo img { max-height: 100%; width: auto; object-fit: contain; }
.dmc-logo.is-empty { display: none; }
.dmc-ident-text { min-width: 0; }
.dmc-shell .dmc-hero .dmc-eyebrow { font: 600 .72rem/1 var(--font-b); letter-spacing: .18em; text-transform: uppercase; color: #7DD3FC !important; margin: 0 0 6px; }
.dmc-shell .dmc-hero .dmc-vehicle,
.dmc-shell .dmc-hero h1.dmc-vehicle {
  margin: 0; font: 600 clamp(1.5rem, 3.4vw, 2.25rem)/1.12 var(--font-h) !important; letter-spacing: .005em;
  color: #fff !important; -webkit-text-fill-color: currentColor; overflow-wrap: anywhere; text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}
.dmc-shell .dmc-hero .dmc-vehicle-make { color: #fff !important; }
.dmc-shell .dmc-hero .dmc-vehicle-model { color: #BAE6FD !important; font-weight: 500; }
.dmc-specline { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.dmc-shell .dmc-hero .dmc-specline li { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; color: rgba(255, 255, 255, .86) !important; }
.dmc-specline .dmc-ico { width: 17px; height: 17px; color: #7DD3FC; }
.dmc-swatch {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  background: var(--dmc-swatch, #94A3B8); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 0 0 1.5px rgba(255, 255, 255, .5);
}

.dmc-lamps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.dmc-lamp {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 5px; border-radius: 999px;
  font-size: .85rem; font-weight: 600; color: #fff !important;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
.dmc-lamp-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; }
.dmc-lamp-ico .dmc-ico { width: 14px; height: 14px; stroke-width: 2.8; }
.dmc-lamp.is-pass .dmc-lamp-ico { background: #16A34A; box-shadow: 0 0 14px rgba(34, 197, 94, .45); }
.dmc-lamp.is-fail .dmc-lamp-ico { background: #DC2626; box-shadow: 0 0 14px rgba(239, 68, 68, .45); }
.dmc-lamp.is-adv  .dmc-lamp-ico { background: #D97706; box-shadow: 0 0 14px rgba(245, 158, 11, .45); }
.dmc-lamp.is-info .dmc-lamp-ico { background: #0284C7; box-shadow: 0 0 14px rgba(56, 189, 248, .45); }
.dmc-lamp.is-note .dmc-lamp-ico { background: #475569; }

/* showroom photo card */
.dmc-showroom {
  position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 18%, #FFFFFF 0%, #EEF2F6 58%, #D9E2EA 100%);
  box-shadow: 0 24px 44px -24px rgba(0, 0, 0, .7), inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.dmc-showroom::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 13%; height: 12%; z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(11, 27, 43, .28), transparent 72%);
}
.dmc-showroom .dmc-showroom-img {
  position: relative; z-index: 1; max-width: 86%; max-height: 74%; width: auto; object-fit: contain;
  mix-blend-mode: multiply; opacity: 0; transform: translateY(6px) scale(.98);
  transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.dmc-showroom .dmc-showroom-img.is-loaded { opacity: 1; transform: none; }
.dmc-showroom-fallback { display: none; position: relative; z-index: 1; width: 72%; color: #12304A; opacity: .62; }
.dmc-showroom-fallback svg { width: 100%; height: auto; display: block; }
.dmc-showroom.is-fallback .dmc-showroom-img { display: none; }
.dmc-showroom.is-fallback::after { display: none; }
.dmc-showroom.is-fallback .dmc-showroom-fallback { display: block; }
.dmc-showroom-cap {
  position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .7rem; font-weight: 500; color: #5B6B7C; letter-spacing: .02em;
}
.dmc-app .dmc-showroom-credit { color: #5B6B7C; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(91, 107, 124, .4); }
.dmc-app .dmc-showroom-credit:hover { color: #0369A1; }

.dmc-hero-foot {
  display: flex; align-items: center; gap: 9px; margin: 24px -30px 0; padding: 13px 30px 15px;
  border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .12);
  font-size: .8rem; color: rgba(255, 255, 255, .66);
}
.dmc-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #38BDF8; flex-shrink: 0; }
.dmc-live::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #38BDF8; opacity: 0; animation: dmcPing 2.4s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes dmcPing { 0% { transform: scale(.6); opacity: .8; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

/* ── jump links ───────────────────────────────────────────────────── */
.dmc-jump {
  display: flex; gap: 8px; margin: 16px 0; overflow-x: auto; scrollbar-width: none; padding: 2px;
}
.dmc-jump::-webkit-scrollbar { display: none; }
.dmc-app .dmc-jump a {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 8px 15px 8px 12px; border-radius: 999px; font-size: .86rem; font-weight: 600;
  color: var(--head); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: border-color .2s, color .2s, transform .2s;
}
.dmc-app .dmc-jump a:hover { color: var(--link); border-color: var(--link); transform: translateY(-1px); }
.dmc-jump .dmc-ico { width: 16px; height: 16px; color: var(--link); }

/* =====================================================================
   STATUS CARDS + GAUGE
   ================================================================== */
.dmc-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; scroll-margin-top: 90px; }
.dmc-scard {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 20px; align-items: center;
  padding: 20px 22px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.dmc-scard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--line); }
.dmc-scard.is-pass::before { background: var(--pass); }
.dmc-scard.is-fail::before { background: var(--fail); }
.dmc-scard.is-adv::before  { background: var(--adv); }
.dmc-scard.is-info::before { background: linear-gradient(90deg, #0EA5E9, #7DD3FC); }
.dmc-scard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dmc-app .dmc-scard-title { font-size: 1.2rem; }

.dmc-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.dmc-rows dt { font-size: .86rem; color: var(--muted); white-space: nowrap; }
.dmc-rows dd { font-size: .92rem; font-weight: 600; color: var(--head); text-align: right; }

.dmc-gauge { position: relative; width: 136px; aspect-ratio: 1; }
.dmc-gauge svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dmc-gauge-ticks line { stroke: var(--line); stroke-width: 1.4; stroke-linecap: round; }
.dmc-gauge-ticks line.is-major { stroke: var(--faint); stroke-width: 2; }
.dmc-gauge-track { fill: none; stroke: var(--line-soft); stroke-width: 10; stroke-linecap: round; }
.dmc-gauge-fill { fill: none; stroke-width: 10; stroke-linecap: round; animation: dmcGauge 1.3s cubic-bezier(.22, 1, .36, 1) .15s both; }
.dmc-gauge-dot { fill: #F5B700; stroke: var(--surface); stroke-width: 3; animation: dmcFade .35s ease 1.2s both; }
.dmc-gauge.is-pass .dmc-gauge-fill { stroke: var(--pass); }
.dmc-gauge.is-fail .dmc-gauge-fill { stroke: var(--fail); opacity: .92; }
.dmc-gauge.is-adv  .dmc-gauge-fill { stroke: var(--adv); }
.dmc-gauge.is-fail .dmc-gauge-dot, .dmc-gauge.is-adv .dmc-gauge-dot { display: none; }
@keyframes dmcGauge { from { stroke-dasharray: 0 var(--dmc-c, 302); } }
@keyframes dmcFade { from { opacity: 0; } to { opacity: 1; } }

.dmc-gauge-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 4px; }
.dmc-gauge-big { font: 600 1.85rem/1 var(--font-h); color: var(--head); letter-spacing: -.02em; }
.dmc-gauge-small { margin-top: 5px; font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); max-width: 72px; line-height: 1.25; white-space: nowrap; }
.dmc-gauge-icon { display: inline-flex; width: 38px; height: 38px; }
.dmc-gauge-icon .dmc-ico { width: 100%; height: 100%; stroke-width: 2.4; }
.dmc-gauge.is-fail .dmc-gauge-icon { color: var(--fail); }
.dmc-gauge.is-adv .dmc-gauge-icon { color: var(--adv); }
.dmc-gauge.is-off .dmc-gauge-icon, .dmc-gauge.is-sky .dmc-gauge-icon { color: var(--muted); }

/* ── chips ────────────────────────────────────────────────────────── */
.dmc-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px;
  font: 600 .76rem/1.2 var(--font-b); letter-spacing: .015em; white-space: nowrap;
  border: 1px solid transparent;
}
.dmc-chip .dmc-ico { width: 14px; height: 14px; stroke-width: 2.7; }
.dmc-chip.is-pass   { color: var(--pass); background: var(--pass-bg); border-color: var(--pass-line); }
.dmc-chip.is-fail,
.dmc-chip.is-major  { color: var(--fail); background: var(--fail-bg); border-color: var(--fail-line); }
.dmc-chip.is-adv,
.dmc-chip.is-minor  { color: var(--adv);  background: var(--adv-bg);  border-color: var(--adv-line); }
.dmc-chip.is-info,
.dmc-chip.is-prs    { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }
.dmc-chip.is-note   { color: var(--note); background: var(--note-bg); border-color: var(--note-line); }
.dmc-chip.is-danger { color: #fff; background: #B91C1C; border-color: #B91C1C; }
.dmc-chip.is-solid.is-pass { color: #fff; background: #15803D; border-color: #15803D; }
.dmc-chip.is-solid.is-fail { color: #fff; background: #B91C1C; border-color: #B91C1C; }
.dmc-chip.is-latest { color: var(--surface); background: var(--head); border-color: var(--head); }

/* =====================================================================
   AT A GLANCE
   ================================================================== */
.dmc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.dmc-stat {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.dmc-stat-lbl { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dmc-stat-val { font: 600 1.65rem/1.15 var(--font-h); color: var(--head); letter-spacing: -.02em; }
.dmc-stat-val small { font-size: .5em; font-weight: 600; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.dmc-stat-val.is-text { font-size: 1.4rem; }
.dmc-stat-sub { font-size: .8rem; color: var(--muted); }
.dmc-meter { display: block; height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin: 2px 0 2px; }
.dmc-meter i { display: block; height: 100%; border-radius: 999px; background: var(--pass); transform-origin: left; animation: dmcGrow 1s cubic-bezier(.22, 1, .36, 1) .2s both; }
@keyframes dmcGrow { from { transform: scaleX(0); } }

/* =====================================================================
   FLAGS
   ================================================================== */
.dmc-flags { display: grid; gap: 10px; margin-top: 16px; }
.dmc-flag {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-md);
  border: 1px solid var(--note-line); background: var(--note-bg);
}
.dmc-flag-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: var(--note); }
.dmc-flag-ico .dmc-ico { width: 20px; height: 20px; }
.dmc-app .dmc-flag h3 { font-size: 1rem; margin: 1px 0 3px; }
.dmc-flag p, .dmc-flag li { font-size: .92rem; color: var(--ink); line-height: 1.6; }
.dmc-flag ul { display: grid; gap: 4px; margin-top: 6px; }
.dmc-flag li { position: relative; padding-left: 16px; }
.dmc-flag li::before { content: ''; position: absolute; left: 3px; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--info); }
.dmc-flag.is-fail { background: var(--fail-bg); border-color: var(--fail-line); }
.dmc-flag.is-fail .dmc-flag-ico { background: #B91C1C; }
.dmc-flag.is-adv { background: var(--adv-bg); border-color: var(--adv-line); }
.dmc-flag.is-adv .dmc-flag-ico { background: #B45309; }
.dmc-flag.is-info { background: var(--info-bg); border-color: var(--info-line); }
.dmc-flag.is-info .dmc-flag-ico { background: linear-gradient(135deg, #0369A1, #0EA5E9); }
.dmc-tally { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--muted); white-space: nowrap; }

.dmc-callout {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r-sm);
  font-size: .9rem; font-weight: 600;
}
.dmc-callout .dmc-ico { width: 19px; height: 19px; }
.dmc-callout.is-fail { color: var(--fail); background: var(--fail-bg); border: 1px solid var(--fail-line); }

/* =====================================================================
   PANELS
   ================================================================== */
.dmc-panel {
  margin-top: 16px; border-radius: var(--r-lg); overflow: hidden; scroll-margin-top: 90px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.dmc-panel-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 22px; border-bottom: 1px solid var(--line-soft); }
.dmc-panel-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; color: var(--link); background: var(--info-bg); }
.dmc-panel-ico .dmc-ico { width: 20px; height: 20px; }
.dmc-app .dmc-panel-head h2 { font-size: 1.15rem; }
.dmc-panel-head .dmc-tally, .dmc-panel-head .dmc-seg { margin-left: auto; }
.dmc-panel-body { padding: 20px 22px 22px; }
.dmc-muted-line { color: var(--muted); font-size: .95rem; }

/* ── record strip ─────────────────────────────────────────────────── */
.dmc-record { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: end; }
.dmc-record-lbl { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.dmc-pips { display: flex; flex-wrap: wrap; gap: 6px; }
.dmc-pip {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px;
  border: 1px solid; animation: dmcPop .35s cubic-bezier(.34, 1.56, .64, 1) both;
}
.dmc-pip .dmc-ico { width: 15px; height: 15px; stroke-width: 3; }
.dmc-pip.is-pass { color: var(--pass); background: var(--pass-bg); border-color: var(--pass-line); }
.dmc-pip.is-fail { color: var(--fail); background: var(--fail-bg); border-color: var(--fail-line); }
.dmc-pips li:nth-child(2) { animation-delay: .04s; } .dmc-pips li:nth-child(3) { animation-delay: .08s; }
.dmc-pips li:nth-child(4) { animation-delay: .12s; } .dmc-pips li:nth-child(5) { animation-delay: .16s; }
.dmc-pips li:nth-child(n+6) { animation-delay: .2s; }
@keyframes dmcPop { from { opacity: 0; transform: scale(.6); } }
.dmc-record-strip { display: inline-flex; flex-direction: column; max-width: 100%; justify-self: start; }
.dmc-pips-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: .74rem; color: var(--muted); }
.dmc-record-sum { display: flex; gap: 8px; }
.dmc-record-sum > div { min-width: 82px; padding: 10px 12px; text-align: center; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line-soft); }
.dmc-record-sum b { display: block; font: 600 1.4rem/1.1 var(--font-h); color: var(--head); }
.dmc-record-sum span { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dmc-record-sum .is-pass b { color: var(--pass); }
.dmc-record-sum .is-fail b { color: var(--fail); }

/* ── timeline ─────────────────────────────────────────────────────── */
.dmc-tl { position: relative; margin-top: 22px; padding-left: 46px; }
.dmc-tl::before { content: ''; position: absolute; left: 16px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--line), var(--line-soft)); }
.dmc-tl-item { position: relative; margin-bottom: 12px; }
.dmc-tl-item:last-child { margin-bottom: 0; }
.dmc-tl-node {
  position: absolute; left: -46px; top: 13px; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 2px solid; background: var(--surface);
}
.dmc-tl-node .dmc-ico { width: 16px; height: 16px; stroke-width: 3; }
.dmc-tl-item.is-pass .dmc-tl-node { color: var(--pass); border-color: var(--pass-line); background: var(--pass-bg); }
.dmc-tl-item.is-fail .dmc-tl-node { color: var(--fail); border-color: var(--fail-line); background: var(--fail-bg); }

.dmc-test { border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.dmc-test[open] { box-shadow: var(--shadow); }
.dmc-tl-item.is-fail .dmc-test { border-color: var(--fail-line); }
.dmc-test > summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; cursor: pointer; list-style: none;
  border-radius: var(--r-md);
}
.dmc-test > summary::-webkit-details-marker { display: none; }
.dmc-test > summary::marker { content: ''; }
.dmc-test > summary:hover { background: var(--surface-2); }
.dmc-test-date { font-family: var(--font-h); font-size: .95rem; color: var(--muted); min-width: 100px; }
.dmc-test-date b { font-weight: 600; font-size: 1.05rem; color: var(--head); }
.dmc-counts { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.dmc-count { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: .74rem; font-weight: 700; border: 1px solid; }
.dmc-count .dmc-ico { width: 12px; height: 12px; stroke-width: 3; }
.dmc-count.is-danger { color: #fff; background: #B91C1C; border-color: #B91C1C; }
.dmc-count.is-major { color: var(--fail); background: var(--fail-bg); border-color: var(--fail-line); }
.dmc-count.is-minor, .dmc-count.is-adv { color: var(--adv); background: var(--adv-bg); border-color: var(--adv-line); }
.dmc-count.is-prs { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }
.dmc-count.is-note { color: var(--note); background: var(--note-bg); border-color: var(--note-line); }
.dmc-test-odo { margin-left: auto; font: 600 1rem/1 var(--font-h); color: var(--head); }
.dmc-test-odo small { font-size: .72rem; font-weight: 500; color: var(--muted); margin-left: 3px; }
.dmc-test-chev { display: inline-flex; color: var(--muted); transition: transform .25s ease; }
.dmc-test-chev .dmc-ico { width: 20px; height: 20px; }
.dmc-test[open] .dmc-test-chev { transform: rotate(180deg); }

.dmc-test-body { padding: 4px 16px 16px; }
.dmc-test-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.dmc-test-meta dt { font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.dmc-test-meta dd { display: inline-flex; align-items: center; gap: 5px; font-size: .92rem; font-weight: 600; color: var(--head); }
.dmc-test-meta dd.is-fail { color: var(--fail); }
.dmc-test-meta dd .dmc-ico { width: 15px; height: 15px; }

.dmc-defects { display: grid; gap: 8px; }
.dmc-defects li {
  display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line-soft);
}
.dmc-defects li.is-danger, .dmc-defects li.is-major { border-left: 3px solid var(--fail); }
.dmc-defects li.is-adv, .dmc-defects li.is-minor { border-left: 3px solid var(--adv); }
.dmc-defects li.is-prs { border-left: 3px solid var(--info); }
.dmc-defects .dmc-chip { justify-self: start; }
.dmc-defect-txt { font-size: .92rem; line-height: 1.55; color: var(--ink); padding-top: 1px; }
.dmc-clean { display: flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; color: var(--pass); }
.dmc-clean .dmc-ico { width: 18px; height: 18px; stroke-width: 2.8; }

/* =====================================================================
   MILEAGE
   ================================================================== */
.dmc-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.dmc-app .dmc-seg button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: .8rem; font-weight: 600; color: var(--muted); background: transparent; box-shadow: none; line-height: 1.2;
}
.dmc-app .dmc-seg button:hover, .dmc-app .dmc-seg button:focus { background: transparent; color: var(--head); }
.dmc-app .dmc-seg button.is-on { background: var(--head); color: var(--surface); }
.dmc-seg .dmc-ico { width: 15px; height: 15px; }

.dmc-chart { position: relative; min-height: 250px; }
.dmc-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.dmc-chart-axis { font: 500 11px var(--font-b); fill: var(--muted); }
.dmc-chart-grid { stroke: var(--line-soft); stroke-dasharray: 3 4; }
.dmc-chart-guide { stroke: var(--faint); stroke-dasharray: 3 3; }
.dmc-tip {
  position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, calc(-100% - 12px));
  padding: 7px 11px; border-radius: 10px; white-space: nowrap;
  background: #0B1B2B; color: #fff; font-size: .78rem; line-height: 1.35; text-align: center;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .15s ease;
}
.dmc-tip b { display: block; font: 600 .95rem/1.2 var(--font-h); }
.dmc-tip.is-show { opacity: 1; }
.dmc-tip .is-drop { color: #FCA5A5; font-weight: 600; }

.dmc-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: .8rem; color: var(--muted); }
.dmc-legend span { display: inline-flex; align-items: center; gap: 7px; }
.dmc-legend i { width: 10px; height: 10px; border-radius: 50%; }
.dmc-legend i.is-line { background: var(--chart-line); }
.dmc-legend i.is-latest { background: #F5B700; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px #F5B700; }
.dmc-legend i.is-drop { background: var(--fail); }

.dmc-readings { margin-top: 16px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.dmc-readings > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: .9rem; font-weight: 600; color: var(--link);
}
.dmc-readings > summary::-webkit-details-marker { display: none; }
.dmc-readings > summary::marker { content: ''; }
.dmc-readings > summary .dmc-ico { width: 18px; height: 18px; transition: transform .25s; }
.dmc-readings[open] > summary .dmc-ico { transform: rotate(180deg); }

.dmc-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .9rem; }
.dmc-app .dmc-table th { padding: 10px 12px; text-align: left; font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.dmc-app .dmc-table td { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); background: transparent; }
.dmc-table th:nth-child(n+2), .dmc-table td:nth-child(n+2) { text-align: right; }
.dmc-table tbody tr:hover td { background: var(--surface-2); }
.dmc-delta { color: var(--muted); }
.dmc-delta.is-up { color: var(--ink); font-weight: 600; }
.dmc-delta.is-down { display: inline-flex; align-items: center; gap: 5px; color: var(--fail); font-weight: 700; }
.dmc-delta .dmc-ico { width: 15px; height: 15px; }

/* =====================================================================
   SPECIFICATION + CO2
   ================================================================== */
.dmc-spec.has-co2 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.dmc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.dmc-grid > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.dmc-grid dt { font-size: .86rem; color: var(--muted); }
.dmc-grid dd { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; color: var(--head); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.dmc-grid .dmc-swatch { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 0 0 1.5px var(--line); }

.dmc-co2 { margin: 0; padding: 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line-soft); }
.dmc-co2 figcaption { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: .9rem; color: var(--muted); }
.dmc-co2 figcaption b { font: 600 1.45rem/1 var(--font-h); color: var(--head); }
.dmc-co2-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: var(--link); background: var(--info-bg); }
.dmc-co2-ico .dmc-ico { width: 18px; height: 18px; }
.dmc-co2-desc { margin-left: auto; font-size: .8rem; font-weight: 600; }
.dmc-co2-scale { display: grid; gap: 4px; }
.dmc-co2-scale li { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.dmc-co2-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 24px; width: var(--dmc-w, 50%);
  padding: 0 20px 0 10px; color: var(--dmc-c, #475569); background: var(--line-soft);
  background: color-mix(in srgb, var(--dmc-c, #94A3B8) 16%, var(--surface));
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  border-radius: 5px 0 0 5px; transition: opacity .3s, transform .3s;
}
.dmc-co2-bar b { font: 700 .85rem/1 var(--font-h); }
.dmc-co2-bar span { font-size: .66rem; font-weight: 600; opacity: .8; white-space: nowrap; }
.dmc-co2-scale li.is-here .dmc-co2-bar { color: #fff; background: var(--dmc-c, #475569); height: 30px; box-shadow: 0 8px 16px -10px var(--dmc-c, #000); }
.dmc-co2-scale li.is-here .dmc-co2-bar span { opacity: .95; }
.dmc-co2-tag {
  position: relative; display: inline-flex; align-items: center; height: 26px; padding: 0 10px 0 12px; margin-left: 6px;
  border-radius: 6px; background: var(--head); color: var(--surface); font: 600 .78rem/1 var(--font-h); white-space: nowrap;
}
.dmc-co2-tag::before { content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left: 0; border-right-color: var(--head); }

/* =====================================================================
   CHECK ANOTHER · NOTE · TOAST · EMPTY STATES
   ================================================================== */
.dmc-again { margin-top: 24px; }
.dmc-again .dmc-search { max-width: none; }
.dmc-search.is-compact .dmc-form { max-width: 640px; margin: 0 auto; }

.dmc-note { display: flex; align-items: flex-start; gap: 14px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.dmc-note .dmc-mark { flex: 0 0 auto; border-radius: 9px; box-shadow: var(--shadow-sm); }
.dmc-note p { font-size: .8rem; line-height: 1.65; color: var(--muted); max-width: 90ch; }
.dmc-note strong { color: var(--head); font-weight: 600; }
.dmc-app .dmc-note a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

.dmc-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 99999; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px;
  background: #0B1B2B; color: #fff; font: 600 .9rem/1.2 var(--font-b);
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(125, 211, 252, .2);
  transition: opacity .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.dmc-toast .dmc-ico { width: 18px; height: 18px; color: #4ADE80; }
.dmc-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

.dmc-empty {
  text-align: center; padding: 40px 24px 34px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.dmc-empty-badge { position: relative; width: 112px; height: 112px; margin: 0 auto 10px; }
.dmc-empty-badge svg { width: 100%; height: 100%; display: block; }
.dmc-empty-track { fill: none; stroke: var(--line-soft); stroke-width: 10; stroke-linecap: round; }
.dmc-empty-dot { fill: #F5B700; stroke: var(--surface); stroke-width: 3; }
.dmc-empty-badge > .dmc-ico { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); stroke-width: 2.2; }
.dmc-empty-badge.is-info > .dmc-ico { color: var(--link); }
.dmc-empty-badge.is-adv > .dmc-ico { color: var(--adv); }
.dmc-empty .dmc-plate { margin: 4px auto 14px; }
.dmc-app .dmc-empty-title { font-size: clamp(1.35rem, 3vw, 1.75rem); margin: 6px 0 8px; }
.dmc-empty-text { max-width: 54ch; margin: 0 auto 24px; color: var(--muted); font-size: 1rem; }
.dmc-empty .dmc-search { max-width: 600px; }

/* =====================================================================
   v6.1 — status tints, photo states, unavailable states, mileage
   ================================================================== */

/* Light green for a valid MOT / tax, light red for expired or untaxed. */
.dmc-shell { --ok-tint: #EAF7EE; --ok-tint-2: #F6FBF7; --bad-tint: #FDECEC; --bad-tint-2: #FEF6F6; --adv-tint: #FDF4E6; --info-tint: #EEF7FD; }
.dmc-shell.is-dark { --ok-tint: rgba(74, 222, 128, .13); --ok-tint-2: rgba(74, 222, 128, .04); --bad-tint: rgba(248, 113, 113, .14); --bad-tint-2: rgba(248, 113, 113, .04); --adv-tint: rgba(251, 191, 36, .11); --info-tint: rgba(125, 211, 252, .09); }
.dmc-scard.is-pass { background: linear-gradient(160deg, var(--ok-tint) 0%, var(--ok-tint-2) 70%); border-color: var(--pass-line); }
.dmc-scard.is-fail { background: linear-gradient(160deg, var(--bad-tint) 0%, var(--bad-tint-2) 70%); border-color: var(--fail-line); }
.dmc-scard.is-adv  { background: linear-gradient(160deg, var(--adv-tint) 0%, var(--surface) 75%); border-color: var(--adv-line); }
.dmc-scard.is-info { background: linear-gradient(160deg, var(--info-tint) 0%, var(--surface) 75%); border-color: var(--info-line); }
.dmc-scard::after {
  content: ''; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--dmc-glow, transparent), transparent);
}
.dmc-scard.is-pass { --dmc-glow: rgba(34, 197, 94, .16); }
.dmc-scard.is-fail { --dmc-glow: rgba(239, 68, 68, .16); }
.dmc-scard.is-pass .dmc-rows > div, .dmc-scard.is-fail .dmc-rows > div { border-top-color: color-mix(in srgb, var(--line-soft) 70%, transparent); }
.dmc-scard.is-pass .dmc-gauge-track { stroke: color-mix(in srgb, var(--pass) 14%, var(--surface)); }
.dmc-scard.is-fail .dmc-gauge-track { stroke: color-mix(in srgb, var(--fail) 14%, var(--surface)); }
.dmc-scard.is-pass .dmc-gauge-fill, .dmc-scard.is-pass .dmc-gauge.is-sky .dmc-gauge-fill { stroke: var(--pass); }

/* timeline cards carry the same, softer tint */
.dmc-tl-item.is-pass .dmc-test { background: linear-gradient(90deg, var(--ok-tint-2), var(--surface) 55%); }
.dmc-tl-item.is-fail .dmc-test { background: linear-gradient(90deg, var(--bad-tint-2), var(--surface) 55%); }
.dmc-tl-item.is-pass .dmc-test[open] > summary { background: var(--ok-tint); }
.dmc-tl-item.is-fail .dmc-test[open] > summary { background: var(--bad-tint); }
.dmc-test[open] > summary { border-radius: var(--r-md) var(--r-md) 0 0; }

/* labelled action buttons */
.dmc-btn-txt { white-space: nowrap; }

/* ── photo states ─────────────────────────────────────────────────── */
.dmc-showroom-img:not([src]) { display: none; }
.dmc-showroom-shimmer { display: none; }
.dmc-showroom.is-loading .dmc-showroom-shimmer {
  display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .7) 45%, transparent 70%);
  background-size: 220% 100%; animation: dmcShimmer 1.3s ease-in-out infinite;
}
.dmc-showroom.is-loading .dmc-showroom-fallback { display: flex; opacity: .28; }
@keyframes dmcShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.dmc-showroom-fallback { flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.dmc-showroom.is-fallback .dmc-showroom-fallback { display: flex; }
.dmc-app .dmc-showroom-badge {
  width: auto; max-width: 46%; max-height: 92px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(11, 27, 43, .18));
  animation: dmcFade .5s ease both;
}
.dmc-showroom-fallback:has(.dmc-showroom-badge:not(.is-gone)) svg { width: 62%; opacity: .55; }
.dmc-showroom-badge.is-gone { display: none !important; }

/* ── buttons used inside the report ───────────────────────────────── */
.dmc-app .dmc-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 0 16px; border-radius: 999px; cursor: pointer;
  font: 600 .86rem/1 var(--font-b); text-transform: none; letter-spacing: 0; text-decoration: none;
  color: #fff; background: var(--mid); border: 1px solid var(--mid); box-shadow: var(--shadow-sm);
  transition: transform .2s, background .2s;
}
.dmc-app .dmc-btn:hover, .dmc-app .dmc-btn:focus { color: #fff; background: var(--navy); transform: translateY(-1px); }
.dmc-app .dmc-btn .dmc-ico { width: 16px; height: 16px; }
.dmc-app .dmc-btn.is-ghost { color: var(--head); background: var(--surface); border-color: var(--line); }
.dmc-app .dmc-btn.is-ghost:hover { color: var(--link); border-color: var(--link); background: var(--surface); }
.dmc-shell.is-dark .dmc-app .dmc-btn:not(.is-ghost) { color: var(--mid); background: var(--sky); border-color: var(--sky); }

/* ── "history unavailable" and "no tests yet" ─────────────────────── */
.dmc-unavail {
  display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r-md);
  background: var(--adv-tint); border: 1px solid var(--adv-line);
}
.dmc-unavail.is-calm { background: var(--info-tint); border-color: var(--info-line); }
.dmc-unavail-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: #B45309; }
.dmc-unavail.is-calm .dmc-unavail-ico { background: linear-gradient(135deg, #0369A1, #0EA5E9); }
.dmc-unavail-ico .dmc-ico { width: 22px; height: 22px; }
.dmc-app .dmc-unavail h3 { font-size: 1.02rem; margin: 2px 0 4px; }
.dmc-unavail p { font-size: .92rem; color: var(--ink); line-height: 1.6; max-width: 70ch; }
.dmc-unavail .dmc-btn { margin-top: 12px; }
.dmc-diag { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-md); border: 1px dashed var(--line); background: var(--surface-2); font-size: .86rem; }
.dmc-diag-head { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--muted); margin-bottom: 8px !important; }
.dmc-diag-head .dmc-ico { width: 16px; height: 16px; }
.dmc-diag dl > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; padding: 4px 0; }
.dmc-diag dt { color: var(--muted); }
.dmc-diag code { font-size: .82rem; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--head); background: transparent; padding: 0; }
.dmc-diag p:last-child { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ── mileage ──────────────────────────────────────────────────────── */
.dmc-msum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.dmc-msum li { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line-soft); }
.dmc-msum span { font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dmc-msum b { font: 600 1.25rem/1.15 var(--font-h); color: var(--head); letter-spacing: -.01em; }
.dmc-msum b small { font-size: .62em; color: var(--muted); font-weight: 600; }
.dmc-msum em { font-style: normal; font-size: .76rem; color: var(--muted); }

.dmc-seg { position: relative; }
.dmc-seg-glider { display: none; }
.dmc-app .dmc-seg button { position: relative; z-index: 1; transition: color .2s, background .2s; }
.dmc-legend-hint { margin-left: auto; font-style: italic; opacity: .8; }

.dmc-chart .dmc-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: dmcBar .6s cubic-bezier(.22, 1, .36, 1) both; }
.dmc-chart.is-static .dmc-bar, .dmc-chart.is-static .dmc-line { animation: none; }
.dmc-chart .dmc-bar:hover, .dmc-chart .dmc-bar.is-hot { filter: brightness(1.12); }
@keyframes dmcBar { from { transform: scaleY(0); } }
.dmc-chart .dmc-line { stroke-dasharray: var(--dmc-len, 2000); stroke-dashoffset: 0; animation: dmcDraw 1s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes dmcDraw { from { stroke-dashoffset: var(--dmc-len, 2000); } }
.dmc-chart-val { font: 600 10.5px var(--font-b); fill: var(--muted); }
.dmc-chart-val.is-last { fill: var(--head); font-weight: 700; }
.dmc-chart-empty { display: grid; place-items: center; min-height: 200px; color: var(--muted); font-size: .9rem; }

/* ── CO2 label: readable in both themes ───────────────────────────── */
.dmc-co2-bar { color: color-mix(in srgb, var(--dmc-c) 82%, #000); background: color-mix(in srgb, var(--dmc-c, #94A3B8) 18%, var(--surface)); }
.dmc-shell.is-dark .dmc-co2-bar { color: color-mix(in srgb, var(--dmc-c) 45%, #fff); background: color-mix(in srgb, var(--dmc-c, #94A3B8) 34%, var(--surface)); }
.dmc-shell.is-dark .dmc-co2-scale li.is-here .dmc-co2-bar { color: #fff; background: var(--dmc-c); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 8px 18px -8px var(--dmc-c); }
.dmc-co2 figcaption b, .dmc-co2-desc { color: var(--head); }
.dmc-co2-tag { background: var(--head); color: var(--surface); }

@media (max-width: 760px) {
  .dmc-msum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dmc-btn-txt, .dmc-theme-lbl { display: none; }
  .dmc-app .dmc-icon-btn { padding: 0; width: 42px; }
  .dmc-app .dmc-theme { padding: 0 4px; gap: 0; }
  .dmc-legend-hint { display: none; }
  .dmc-unavail { flex-direction: column; gap: 10px; }
}
@media print {
  .dmc-scard.is-pass, .dmc-scard.is-fail, .dmc-tl-item .dmc-test { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dmc-diag, .dmc-unavail .dmc-btn, .dmc-seg { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .dmc-chart .dmc-bar, .dmc-chart .dmc-line, .dmc-showroom-shimmer { animation: none !important; }
}

/* =====================================================================
   MOTION
   ================================================================== */
@keyframes dmcRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dmc-app .rise { animation: dmcRise .55s cubic-bezier(.22, 1, .36, 1) both; }
.dmc-app .dmc-jump.rise { animation-delay: .05s; }
.dmc-app .dmc-status.rise { animation-delay: .08s; }
.dmc-app .dmc-stats.rise { animation-delay: .12s; }
.dmc-app .dmc-flags.rise { animation-delay: .16s; }
.dmc-app .dmc-panel.rise { animation-delay: .2s; }

/* =====================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 920px) {
  .dmc-hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .dmc-showroom { max-width: 520px; width: 100%; aspect-ratio: 16 / 9; }
  .dmc-spec.has-co2 { grid-template-columns: 1fr; }
  .dmc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .dmc-status { grid-template-columns: 1fr; }
  .dmc-record { grid-template-columns: 1fr; gap: 16px; }
  .dmc-record-sum > div { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 600px) {
  .dmc-app { padding: 14px 14px 52px; }
  .dmc-topbar { margin-bottom: 12px; }
  .dmc-crumbs { font-size: .78rem; }
  .dmc-hero { padding: 20px 18px 0; border-radius: 20px; }
  .dmc-hero-foot { margin: 20px -18px 0; padding: 12px 18px 14px; }
  .dmc-hero-arc { width: 300px; height: 300px; right: -90px; bottom: -110px; }
  .dmc-plate-text { font-size: clamp(1.8rem, 9vw, 2.3rem); padding: 0 12px 0 8px; }
  .dmc-plate.is-xl { min-height: 64px; }
  .dmc-band-uk { width: 38px; }
  .dmc-plate-maker { left: 46px; font-size: 6.5px; }
  .dmc-logo { width: 48px; height: 48px; border-radius: 14px; }
  .dmc-ident { align-items: flex-start; }
  .dmc-specline { gap: 6px 12px; }
  .dmc-specline li { font-size: .84rem; }
  .dmc-scard { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 18px 16px; }
  .dmc-gauge { width: 112px; }
  .dmc-gauge-big { font-size: 1.55rem; }
  .dmc-gauge-small { font-size: .56rem; letter-spacing: .04em; max-width: 60px; }
  .dmc-test-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .dmc-co2-bar span { display: none; }
  .dmc-stats { gap: 10px; }
  .dmc-stat { padding: 14px; }
  .dmc-stat-val { font-size: 1.4rem; }
  .dmc-panel-head { padding: 14px 16px; }
  .dmc-panel-body { padding: 16px; }
  .dmc-grid { grid-template-columns: 1fr; }
  .dmc-tl { padding-left: 38px; }
  .dmc-tl::before { left: 13px; }
  .dmc-tl-node { left: -38px; width: 28px; height: 28px; top: 14px; }
  .dmc-tl-node .dmc-ico { width: 14px; height: 14px; }
  .dmc-test > summary { padding: 12px; gap: 8px; }
  .dmc-test-date { min-width: 0; }
  .dmc-test-body { padding: 2px 12px 12px; }
  .dmc-defects li { grid-template-columns: 1fr; gap: 6px; }
  .dmc-search.is-midnight, .dmc-search.is-glass, .dmc-search.is-light { padding: 18px; border-radius: 20px; }
  .dmc-search.is-lg .dmc-plate.is-input, .dmc-search.is-lg .dmc-go { height: 64px; }
  .dmc-search .dmc-plate input.dmc-plate-input { font-size: 26px !important; }
  .dmc-search .dmc-go { flex-basis: 100%; }
  .dmc-seg button span { display: none; }
  .dmc-table th:nth-child(1), .dmc-table td:nth-child(1) { white-space: nowrap; }
}
@media (max-width: 380px) {
  .dmc-stats { grid-template-columns: 1fr; }
  .dmc-scard { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .dmc-scard-body { width: 100%; text-align: left; }
}

/* =====================================================================
   PRINT
   ================================================================== */
@media print {
  .dmc-shell { background: #fff !important; }
  .dmc-no-print, .dmc-toast, .dmc-test-chev { display: none !important; }
  .dmc-app { padding: 0; max-width: none; }
  .dmc-hero, .dmc-plate, .dmc-chip, .dmc-pip, .dmc-tl-node, .dmc-lamp-ico, .dmc-co2-bar, .dmc-count, .dmc-flag-ico {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .dmc-panel, .dmc-scard, .dmc-test, .dmc-stat, .dmc-hero { box-shadow: none !important; }
  .dmc-scard, .dmc-flag, .dmc-tl-item, .dmc-stat, .dmc-co2 { break-inside: avoid; }
  .dmc-panel { break-inside: auto; }
  .dmc-panel-head { break-after: avoid; }
  .dmc-showroom, .dmc-hero-arc { display: none !important; }
  .dmc-hero-grid { grid-template-columns: 1fr; }
  .dmc-hero { padding-top: 20px; }
  .dmc-status { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dmc-scard { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .dmc-gauge { width: 104px; }
  .dmc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .dmc-spec.has-co2 { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; }
  .dmc-grid { grid-template-columns: 1fr; }
  .dmc-test[open] { box-shadow: none; }
  .dmc-app .rise, .dmc-gauge-fill, .dmc-gauge-dot, .dmc-meter i, .dmc-pip { animation: none !important; }
  @page { margin: 12mm 14mm; size: A4; }
}

@media (prefers-reduced-motion: reduce) {
  .dmc-app .rise, .dmc-gauge-fill, .dmc-gauge-dot, .dmc-meter i, .dmc-pip, .dmc-live::after, .dmc-search .dmc-form.is-shake { animation: none !important; }
  .dmc-showroom .dmc-showroom-img { transition: none; opacity: 1; transform: none; }
  .dmc-search .dmc-go, .dmc-theme-thumb, .dmc-icon-btn, .dmc-jump a { transition: none; }
}

/* A report switched to dark on a light site reads as one dark card. */
html:not([data-theme="dark"]) .dmc-shell.is-dark { border-radius: 28px; }
html[data-theme="dark"] .dmc-shell:not(.is-dark) { border-radius: 28px; }
.dmc-showroom.is-fallback .dmc-showroom-fallback:has(.dmc-showroom-badge:not(.is-gone)) { opacity: 1; }