:root {
    color-scheme: dark;
    --bg: #090b0d;
    --panel: #14171b;
    --panel-2: #1b1f24;
    --line: #353a42;
    --gold: #d3a64c;
    --gold-light: #f0d083;
    --text: #f7f3e9;
    --muted: #bbb7ad;
    --green: #64d99b;
    --red: #f08787;
    --amber: #f0c36a;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 18% 4%, #2b2416 0, transparent 32%), linear-gradient(145deg, #090b0d, #0e1217); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.validator-shell { width: min(860px, calc(100% - 30px)); margin: 0 auto; padding: 28px 0 50px; }
.brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.brand img { width: 64px; height: 72px; object-fit: contain; }
.brand div { display: grid; gap: 3px; }
.brand strong { font-size: 1.14rem; }
.brand span { color: var(--muted); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.validator-card { padding: clamp(24px, 5vw, 48px); border: 1px solid var(--line); border-radius: 24px; background: rgba(20, 23, 27, .96); box-shadow: 0 26px 80px rgba(0,0,0,.38); }
.eyebrow { margin: 0 0 8px; color: var(--gold); font-weight: 800; font-size: .78rem; letter-spacing: .15em; }
h1 { margin: 0 0 28px; font-size: clamp(2rem, 7vw, 3.8rem); letter-spacing: -.045em; }
h2 { margin: 0 0 8px; font-size: 1.2rem; }
p { line-height: 1.55; }
.result { display: flex; align-items: center; gap: 17px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel-2); }
.result strong { display: block; font-size: 1.23rem; }
.result p { margin: 5px 0 0; color: var(--muted); }
.result-icon { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 50%; font-size: 1.6rem; font-weight: 850; }
.result-valid { color: var(--green); border-color: #286946; background: #10251a; }
.result-revoked, .result-invalid { color: var(--red); border-color: #744047; background: #2a1518; }
.result-warning { color: var(--amber); border-color: #705c31; background: #281f10; }
.result-neutral { color: var(--gold-light); }
.notice { margin-top: 16px; padding: 13px 15px; border-radius: 11px; line-height: 1.45; }
.notice-warning { color: #f6daa0; border: 1px solid #705c31; background: #281f10; }
.document-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 24px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); }
.document-data > div { min-width: 0; padding: 16px; background: var(--panel-2); }
.document-data .wide { grid-column: 1 / -1; }
dt { margin-bottom: 6px; color: var(--gold); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
dd { margin: 0; font-weight: 690; }
.hash { overflow-wrap: anywhere; color: #dedbd2; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; line-height: 1.55; }
.file-check { margin-top: 24px; padding: 20px; border: 1px solid #5f4c29; border-radius: 14px; background: #211c13; }
.file-check p { margin: 0 0 17px; color: var(--muted); }
.file-button { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; padding: 10px 18px; border-radius: 10px; background: linear-gradient(135deg, var(--gold-light), #bd8a36); color: #17130c; font-weight: 850; cursor: pointer; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-result { min-height: 24px; margin-top: 15px; font-weight: 750; }
.file-result.valid { color: var(--green); }
.file-result.invalid { color: var(--red); }
.validator-card > footer { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); }
.validator-card > footer strong { color: var(--gold-light); }
.validator-card > footer p { margin: 6px 0 0; }
@media (max-width: 620px) {
    .validator-shell { width: min(100% - 20px, 860px); padding-top: 18px; }
    .validator-card { border-radius: 18px; }
    .document-data { grid-template-columns: 1fr; }
    .document-data .wide { grid-column: auto; }
    .result { align-items: flex-start; }
}