:root{
  --bg:#0e0e0e; --panel:#161616; --panel2:#1c1c1c; --line:rgba(201,168,76,.20);
  --ink:#e8e0d0; --mute:#8a7f70; --gold:#c9a84c; --gold-bright:#e3c46a; --gold-dim:#8a6e2f;
  --ok:#7fc98a; --bad:#e07a72; --radius:7px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Mono',monospace;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.6;min-height:100vh}
.hidden{display:none !important}
.grow{flex:1}
code{color:var(--gold-bright);font-size:.9em}

.btn{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.05em;background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:#1a1407;border:none;border-radius:8px;padding:11px 20px;cursor:pointer;font-size:14px;transition:filter .15s}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--mute)}
.btn.ghost:hover{color:var(--gold);border-color:var(--gold-dim)}

.brand{font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.06em;font-size:18px;color:var(--gold-bright);display:flex;align-items:center;gap:9px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}

/* login */
.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:radial-gradient(900px 600px at 50% -10%,rgba(201,168,76,.07),transparent),var(--bg)}
.login{width:min(380px,92vw);background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:12px;padding:30px 26px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.login .brand{justify-content:center;font-size:20px;margin-bottom:6px}
.login p{color:var(--mute);font-size:13px;text-align:center;margin:0 0 20px}
.login input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--ink);font-family:inherit;font-size:15px;padding:12px 14px}
.login input:focus{outline:none;border-color:var(--gold-dim)}
.login .btn{width:100%;margin-top:14px;padding:12px}
.err{color:var(--bad);font-size:13px;min-height:18px;margin-top:12px;text-align:center}

/* bar */
.bar{display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--panel),transparent)}

/* main */
.wrap{max-width:680px;margin:0 auto;padding:40px 22px 80px}
.checker{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.fld{display:flex;flex-direction:column;gap:6px}
.fld.num{flex:1;min-width:220px}
.fld.cc{width:90px}
.fld span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim)}
.fld span em{font-style:normal;color:var(--mute);text-transform:none;letter-spacing:0}
.fld input{background:var(--panel);border:1px solid var(--line);border-radius:9px;color:var(--ink);font-family:inherit;font-size:16px;padding:12px 14px;width:100%}
.fld input:focus{outline:none;border-color:var(--gold-dim)}
.fld.cc input{text-transform:uppercase;text-align:center}
.checker .btn{padding:12px 26px;height:46px}
.hint{color:var(--mute);font-size:12px;margin-top:14px}

/* result */
.result{margin-top:30px;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:12px;overflow:hidden}
.r-body{display:flex;flex-wrap:wrap}
/* International format gets its own prominent box on the left */
.r-intl{flex:0 0 250px;padding:22px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.r-intl-top{display:flex;align-items:center;gap:12px}
.r-flag{font-size:34px;line-height:1}
.r-intl .k{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim)}
.r-intl-num{font-family:'Oswald',sans-serif;font-size:25px;font-weight:600;letter-spacing:.02em;color:var(--gold-bright);word-break:break-word;line-height:1.15}
.r-badge{margin-left:auto;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.08em;font-size:13px;padding:6px 14px;border-radius:999px;text-transform:uppercase}
.r-badge.ok{background:rgba(127,201,138,.14);color:var(--ok);border:1px solid rgba(127,201,138,.4)}
.r-badge.bad{background:rgba(224,122,114,.14);color:var(--bad);border:1px solid rgba(224,122,114,.4)}
.r-details{flex:1;min-width:230px}
.r-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);height:100%}
.r-cell{background:var(--panel);padding:15px 22px}
.r-cell .k{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:4px}
.r-cell .v{font-size:15px;color:var(--ink);word-break:break-word}
.r-cell .v.dim{color:var(--mute)}
.r-note{padding:11px 22px;border-top:1px solid var(--line);background:var(--panel);font-size:11.5px;color:var(--mute);line-height:1.5}
.result.err-box{border-color:rgba(224,122,114,.4);padding:20px 22px;color:var(--bad);font-size:14px}
@media(max-width:560px){.r-body{flex-direction:column}.r-intl{flex-basis:auto;border-right:none;border-bottom:1px solid var(--line)}.r-grid{grid-template-columns:1fr}}