:root{--bg:#fff;--fg:#111;--mut:#4a4a4a;--line:#d6d9de;--card:#f5f7fa;--pri:#0b5cad;--pri2:#084a8c;--ok:#0a7a3b;--bad:#b3261e;--warn:#8a5a00;--r:14px}
[data-theme=dark]{--bg:#0f1115;--fg:#f2f2f2;--mut:#b9bec7;--line:#2c313a;--card:#181b21;--pri:#5aa9ff;--pri2:#8cc4ff;--ok:#4cd187;--bad:#ff8a80;--warn:#ffcc66}
*{box-sizing:border-box}html{font-size:20px;-webkit-text-size-adjust:100%}
html[data-fs="1"]{font-size:23px}html[data-fs="2"]{font-size:26px}
body{margin:0;background:var(--bg);color:var(--fg);font:1rem/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--pri)}a:hover{color:var(--pri2)}
.wrap{max-width:860px;margin:0 auto;padding:0 16px}
header.site{border-bottom:1px solid var(--line);background:var(--bg)}
.hdr{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.1rem;text-decoration:none;color:var(--fg)}
.logo svg{flex:none}
nav.main{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto;font-size:.9rem}
nav.main a{text-decoration:none;font-weight:600;padding:6px 2px}
.ctl{display:flex;gap:6px}
.ctl button{font:inherit;font-size:.8rem;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:10px;padding:6px 10px;cursor:pointer;min-height:40px}
main{padding:18px 0 40px}
h1{font-size:1.75rem;line-height:1.25;margin:.4em 0 .4em}h2{font-size:1.35rem;margin:1.6em 0 .5em;line-height:1.3}h3{font-size:1.1rem;margin:1.2em 0 .4em}
.lead{font-size:1.05rem;color:var(--mut);margin-top:0}
.tool{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:14px 0}
.tool label{display:block;font-weight:700;margin-bottom:8px}
.vinrow{display:flex;gap:10px;flex-wrap:wrap}
#vin{flex:1 1 320px;font:700 1.35rem/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;padding:16px 14px;border:2px solid var(--line);border-radius:12px;background:var(--bg);color:var(--fg);min-width:0}
#vin:focus{outline:3px solid var(--pri);border-color:var(--pri)}
.btn{font:700 1.15rem/1 system-ui,sans-serif;background:var(--pri);color:#fff;border:0;border-radius:12px;padding:16px 26px;cursor:pointer;min-height:58px}
.btn:hover{background:var(--pri2)}.btn.sec{background:transparent;color:var(--pri);border:2px solid var(--pri)}
[data-theme=dark] .btn{color:#081320}
.hint{font-size:.85rem;color:var(--mut);margin:8px 0 0}
.cnt{font-variant-numeric:tabular-nums}
.msg{margin-top:12px;padding:12px 14px;border-radius:12px;font-weight:600}
.msg.bad{background:rgba(179,38,30,.1);color:var(--bad)}.msg.ok{background:rgba(10,122,59,.1);color:var(--ok)}.msg.warn{background:rgba(138,90,0,.12);color:var(--warn)}
.res{margin-top:16px}
.big{font-size:1.6rem;font-weight:800;line-height:1.25;margin:.2em 0}
table{width:100%;border-collapse:collapse;margin:10px 0;font-size:.95rem}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{width:42%;color:var(--mut);font-weight:600}
.vinchars{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0}
.vinchars span{display:inline-flex;flex-direction:column;align-items:center;min-width:2.1em;padding:6px 4px;border-radius:8px;background:var(--bg);border:1px solid var(--line);font:700 1.1rem ui-monospace,monospace}
.vinchars small{font:500 .6rem system-ui;color:var(--mut)}
.vinchars .w{border-color:#0b5cad}.vinchars .d{border-color:#7a4cc2}.vinchars .c{border-color:#c27a00;background:rgba(194,122,0,.1)}.vinchars .s{border-color:#0a7a3b}
.rc{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:12px 0;background:var(--bg)}
.rc h3{margin:.1em 0 .3em;font-size:1.05rem}.rc p{margin:.4em 0}
.tag{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--card);border:1px solid var(--line);margin-right:6px}
.tag.red{color:var(--bad);border-color:var(--bad)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:0;list-style:none}
.grid a{display:block;padding:14px 12px;border:1px solid var(--line);border-radius:12px;text-decoration:none;font-weight:700;background:var(--card);min-height:52px}
.grid small{display:block;font-weight:500;color:var(--mut);font-size:.75rem}
.crumbs{font-size:.85rem;color:var(--mut);margin:6px 0 0}.crumbs a{color:var(--mut)}
.note{font-size:.85rem;color:var(--mut)}
.ad{margin:18px 0;min-height:100px;display:flex;align-items:center;justify-content:center}
.ad.ph{border:1px dashed var(--line);color:var(--mut);font-size:.8rem}
footer.site{border-top:1px solid var(--line);padding:20px 0 40px;font-size:.85rem;color:var(--mut)}
footer.site a{color:var(--mut);margin-right:14px;display:inline-block;padding:6px 0}
.faq details{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:8px 0}.faq summary{font-weight:700;cursor:pointer}
@media(max-width:560px){h1{font-size:1.5rem}.btn{width:100%}nav.main{margin-left:0;width:100%}}
#vin::placeholder{text-transform:none;letter-spacing:0;font-weight:500}