:root{
  --blue:#4a7ebb; --blue-dark:#33587f; --blue-light:#eaf1f9;
  --ink:#1d2733; --muted:#6b7887; --line:#dfe5ec; --bg:#f4f6f9;
  --ok:#1f8a5b; --ok-bg:#e6f5ee; --bad:#c0392b; --bad-bg:#fbeae8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* A class such as .boot{display:flex} beats the browser's built-in rule for the
   hidden attribute, which would leave "hidden" elements on screen. This makes
   hidden always win. */
[hidden]{display:none !important}
body{font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
     background:var(--bg);color:var(--ink);line-height:1.5}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}

/* ---------- boot ---------- */
.boot{position:fixed;inset:0;background:#fff;display:flex;flex-direction:column;
      align-items:center;justify-content:center;gap:20px;z-index:100}
.spinner{width:30px;height:30px;border:3px solid var(--blue-light);
         border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- logo ---------- */
.logo-big{font-size:34px;font-weight:700;color:var(--blue);letter-spacing:-.5px}
.logo-big span{color:var(--ink)}
.logo{font-size:22px;font-weight:700;color:var(--blue)}
.logo span{color:var(--ink)}
.tagline{color:var(--muted);font-size:14px;margin:2px 0 22px}

/* ---------- auth ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:12px;
           padding:30px;width:100%;max-width:420px}
.tabs{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.tab{flex:1;background:none;border:none;border-bottom:3px solid transparent;
     padding:9px 6px;font-size:13px;font-weight:600;color:var(--muted);
     cursor:pointer;font-family:inherit}
.tab.on{color:var(--blue);border-bottom-color:var(--blue)}
.hint{font-size:12px;color:var(--muted);margin:10px 0 0}

.demo-box{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.demo-title{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.5px;
            margin-bottom:8px}
.demo{width:100%;display:flex;justify-content:space-between;align-items:center;
      background:#f7f9fc;border:1px solid var(--line);border-radius:7px;
      padding:9px 12px;margin-bottom:6px;cursor:pointer;font-family:inherit;text-align:left}
.demo:hover{background:var(--blue-light);border-color:var(--blue)}
.d-role{font-size:13px;font-weight:600}
.d-mail{font-size:12px;color:var(--muted)}

/* ---------- header / nav ---------- */
header{background:#fff;border-bottom:1px solid var(--line)}
.head{display:flex;align-items:center;justify-content:space-between;
      padding-top:12px;padding-bottom:12px;gap:12px;flex-wrap:wrap}
.who{display:flex;align-items:center;gap:10px;font-size:13px}
.role-chip{background:var(--blue-light);color:var(--blue-dark);font-size:11px;
           font-weight:700;padding:3px 9px;border-radius:20px;text-transform:uppercase}
.link{background:none;border:none;color:var(--blue);cursor:pointer;
      font-size:13px;font-family:inherit;text-decoration:underline;padding:0}
nav{background:#fff;border-bottom:1px solid var(--line);overflow-x:auto}
nav .wrap{display:flex;gap:2px}
nav button{background:none;border:none;border-bottom:3px solid transparent;
           padding:11px 15px;font-size:14px;font-weight:600;color:var(--muted);
           cursor:pointer;white-space:nowrap;font-family:inherit}
nav button:hover{color:var(--ink);background:var(--blue-light)}
nav button.on{color:var(--blue);border-bottom-color:var(--blue)}

main{padding-top:22px;padding-bottom:40px}
footer{padding:20px;text-align:center;font-size:12px;color:var(--muted)}

/* ---------- cards & forms ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:9px;
      padding:22px;margin-bottom:18px}
h2{margin:0 0 4px;font-size:20px}
h3{margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.5px;
   color:var(--muted)}
.sub{color:var(--muted);font-size:14px;margin:0 0 18px}
label{display:block;font-size:13px;font-weight:600;margin:12px 0 4px}
input,select{width:100%;padding:10px 12px;border:1px solid var(--line);
             border-radius:7px;font-size:15px;font-family:inherit;background:#fff}
input:focus,select:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.btn{background:var(--blue);color:#fff;border:none;border-radius:8px;
     padding:12px 22px;font-size:15px;font-weight:600;cursor:pointer;
     font-family:inherit;margin-top:18px;width:100%}
.btn:hover{background:var(--blue-dark)}
.btn:disabled{opacity:.55;cursor:default}
.btn.ghost{background:#fff;color:var(--blue);border:1px solid var(--blue)}
.btn.sm{width:auto;padding:8px 16px;font-size:13px}
.err{color:var(--bad);font-size:13px;font-weight:600;margin-top:10px}
.ok-msg{color:var(--ok);font-size:13px;font-weight:600;margin-top:10px}
.linkbtn{display:block;width:100%;background:none;border:none;color:var(--blue);
         cursor:pointer;font-size:13px;font-family:inherit;margin-top:12px;
         text-decoration:underline;padding:4px}
.field-err{color:var(--bad);font-size:12px;margin-top:4px;min-height:0}

/* ---------- results ---------- */
.result{border-radius:9px;padding:20px;margin-top:20px;border:2px solid}
.r-ok{background:var(--ok-bg);border-color:var(--ok)}
.r-bad{background:var(--bad-bg);border-color:var(--bad)}
.r-title{font-size:22px;font-weight:700;margin-bottom:6px}
.r-ok .r-title{color:var(--ok)} .r-bad .r-title{color:var(--bad)}

.pill{display:inline-block;padding:3px 10px;border-radius:20px;
      font-size:11px;font-weight:700;letter-spacing:.3px}
.p-ok{background:var(--ok-bg);color:var(--ok)}
.p-bad{background:var(--bad-bg);color:var(--bad)}
.p-grey{background:#eef1f5;color:var(--muted)}

.hash{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;
      word-break:break-all;color:var(--blue-dark);background:var(--blue-light);
      padding:6px 8px;border-radius:4px;display:block;margin-top:3px}
.kv{font-size:12px;color:var(--muted);margin-top:8px}

table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;color:var(--muted);
   border-bottom:2px solid var(--line);padding:8px 6px}
td{border-bottom:1px solid var(--line);padding:10px 6px;vertical-align:top}

.item{border:1px solid var(--line);border-left:4px solid var(--blue);
      border-radius:7px;padding:14px;margin-bottom:10px}
.item.bad{border-left-color:var(--bad);background:var(--bad-bg)}
.item-head{display:flex;justify-content:space-between;align-items:flex-start;
           gap:10px;margin-bottom:6px}
.item-title{font-weight:700;font-size:15px}

.empty{color:var(--muted);font-size:14px;padding:26px;text-align:center;
       border:1px dashed var(--line);border-radius:7px;margin-top:10px}
.note{background:var(--blue-light);border-left:4px solid var(--blue);
      padding:12px 14px;border-radius:0 7px 7px 0;font-size:13px;margin-top:16px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:8px;
      padding:14px;text-align:center}
.stat .n{font-size:26px;font-weight:700;color:var(--blue)}
.stat .l{font-size:11px;color:var(--muted);text-transform:uppercase}

.qr{display:block;margin:14px auto;background:#fff;padding:10px;
    border:1px solid var(--line);border-radius:8px}
.cid-big{font-family:ui-monospace,Consolas,monospace;font-size:20px;
         font-weight:700;color:var(--blue-dark);text-align:center;
         letter-spacing:1px;margin:10px 0}

@media(max-width:640px){
  .row,.stats{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .auth-card{padding:22px}
}