:root { color-scheme: dark; font: 15px/1.5 system-ui, sans-serif; background: #14161a; color: #e4e7ec; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 960px; margin: auto; padding: 28px 24px 56px; }
nav { display: flex; justify-content: space-between; color: #a9b1bd; }
a { color: #93c5fd; }
h1 { font-size: 2rem; margin-bottom: 4px; }
h2 { font-size: 1.1rem; margin: 0 0 16px; }
.intro, .muted { color: #adb6c3; }
section { background: #1c2027; border: 1px solid #343c48; border-radius: 10px; padding: 22px; margin: 20px 0; }
.row { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; }
label { display: flex; flex-direction: column; gap: 6px; }
.target { flex: 1; min-width: 230px; }
input, select, button { font: inherit; border: 1px solid #536071; border-radius: 5px; min-height: 42px; padding: 8px 12px; background: #12161c; color: inherit; }
button { cursor: pointer; background: #303844; }
button.primary { background: #c84425; border-color: #eb795e; color: #fff; }
button:disabled { opacity: .45; cursor: default; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #93c5fd; outline-offset: 3px; }
[hidden] { display: none !important; }
#vin-target { font-family: ui-monospace, monospace; letter-spacing: .05em; }
dl { display: grid; grid-template-columns: 120px 1fr; margin: 0 0 22px; gap: 7px 14px; }
dt { color: #adb6c3; } dd { margin: 0; overflow-wrap: anywhere; font-family: ui-monospace, monospace; }
#vin-status { border-left: 3px solid #93c5fd; padding: 10px 14px; background: #12161c; }
#vin-status.error { border-color: #fb927a; color: #ffb6a5; }
#vin-records { width: 100%; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 300px; overflow: auto; font-size: .85rem; }
@media (max-width: 600px) { main { padding: 20px 14px; } section { padding: 16px; } .row > label { width: 100%; } dl { grid-template-columns: 92px 1fr; } }