* { box-sizing: border-box; }
body {
    margin:0; background:#f4f7fb; color:#172033;
    font-family:Inter,Segoe UI,Arial,sans-serif;
}
.topbar {
    height:64px; background:#111a2d; color:#fff;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 28px; box-shadow:0 2px 10px #0002;
}
.brand { font-size:20px; font-weight:800; letter-spacing:.2px; }
.brand span { color:#66d4b5; font-weight:600; }
.badge {
    padding:9px 14px; border-radius:20px; font-size:12px; font-weight:700;
}
.online { background:#0d8f68; color:white; }
.offline { background:#6b7280; color:white; }
.content { max-width:1100px; margin:35px auto; padding:0 20px; }
.page-title h1 { margin:0 0 6px; font-size:30px; }
.page-title p { margin:0 0 24px; color:#68748a; }
.customer-card {
    background:#fff; border:1px solid #e1e7ef; border-radius:14px;
    padding:22px; display:grid; grid-template-columns:1fr 1.5fr 1fr;
    gap:20px; box-shadow:0 5px 20px #1720330b;
}
label { display:block; color:#7a8496; font-size:12px; margin-bottom:7px; text-transform:uppercase; }
select { width:100%; padding:10px; border:1px solid #d5dce7; border-radius:8px; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px; }
.card {
    background:#fff; border:1px solid #e1e7ef; border-radius:16px;
    padding:35px; text-align:center; box-shadow:0 5px 20px #1720330b;
}
.fingerprint-art {
    width:90px; height:90px; border-radius:50%; margin:0 auto 20px;
    display:flex; align-items:center; justify-content:center;
    background:#eef4ff; color:#2d5bea; font-size:50px;
}
.card h2 { margin:0 0 10px; }
.card p { color:#68748a; min-height:45px; }
button {
    border:0; border-radius:9px; padding:13px 22px; color:#fff;
    background:#2358d6; font-weight:700; cursor:pointer;
}
button.secondary { background:#0b8065; }
button:disabled { opacity:.55; cursor:not-allowed; }
.message { min-height:28px; margin-top:18px; font-weight:600; }
.success { color:#087a5b; }
.error { color:#c33d45; }
@media(max-width:760px) {
    .customer-card,.grid { grid-template-columns:1fr; }
    .content { margin-top:20px; }
}