:root { color-scheme: light; font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; background: #f5f7fb; color: #17263b; }
* { box-sizing: border-box; }
body { margin: 0; }
.shell { max-width: 1120px; margin: auto; padding: 28px 20px 70px; }
.topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.topbar .quiet { margin-left: auto; }
.mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: #dceaff; color: #1263d6; font-size: 30px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: 24px; letter-spacing: -.04em; margin: 0; }
h2 { font-size: 20px; letter-spacing: -.03em; margin-bottom: 8px; }
.eyebrow { margin-bottom: 3px; color: #4470aa; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.muted { color: #63748c; line-height: 1.5; font-size: 14px; }
.card { background: #fff; border: 1px solid #e5ebf4; border-radius: 22px; box-shadow: 0 12px 36px #1d3d7010; }
.login { max-width: 480px; margin: 11vh auto 0; padding: 32px; }
label { display: block; color: #3f5066; font-size: 13px; font-weight: 650; margin-bottom: 8px; }
input { width: 100%; min-height: 42px; padding: 10px 13px; border: 1px solid #cfd9e8; border-radius: 11px; font: inherit; color: inherit; background: #fff; }
input:focus { outline: 3px solid #bfd9ff; border-color: #2d73d9; }
button { min-height: 42px; border: 0; border-radius: 11px; padding: 10px 16px; color: #fff; background: #1f6fdb; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
button:hover { background: #155cbd; }
button:disabled { opacity: .5; cursor: wait; }
.quiet { background: #eaf1fc; color: #315e9b; }
.quiet:hover { background: #d9e7fa; }
.danger { color: #b53434; background: #fde9e9; }
.danger:hover { background: #f9d5d5; }
.login button { width: 100%; margin-top: 14px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.stat { padding: 20px 24px; }
.stat span { display: block; color: #677892; font-size: 13px; }
.stat strong { font-size: 32px; letter-spacing: -.05em; }
.pin-panel, .devices-panel { padding: 24px; margin-bottom: 16px; }
.pin-panel { display: grid; grid-template-columns: 1fr minmax(250px, 420px); gap: 28px; align-items: center; }
.inline { display: flex; gap: 10px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.devices { margin-top: 18px; }
.device { padding: 18px 0; border-top: 1px solid #e9edf4; display: grid; grid-template-columns: minmax(190px, 1fr) auto; align-items: center; gap: 16px; }
.device-name { font-weight: 750; font-size: 16px; }
.device-meta { color: #74839a; font-size: 12px; margin-top: 4px; overflow-wrap: anywhere; }
.device-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.device-actions input { width: 145px; min-height: 38px; }
.device-actions button { min-height: 38px; }
.badge { border-radius: 999px; padding: 5px 9px; background: #e8f4ea; color: #26753a; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.badge.pending { background: #fff2d8; color: #996415; }
.badge.blocked { background: #fde7e7; color: #af3939; }
#message { min-height: 20px; color: #a13b30; font-size: 14px; }
@media (max-width: 720px) { .stats { gap: 8px; } .stat { padding: 15px; } .pin-panel { grid-template-columns: 1fr; } .device { grid-template-columns: 1fr; } .device-actions { justify-content: flex-start; } }