*{box-sizing:border-box}body{margin:0;font-family:system-ui,Arial;background:#f3f6fa;color:#172033}header{padding:16px 20px;background:#0d6efd;color:white;display:flex;justify-content:space-between}main{max-width:1000px;margin:auto;padding:20px}.card{background:white;border-radius:14px;padding:18px;margin-bottom:16px;box-shadow:0 3px 15px #00000012}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.stats{grid-template-columns:repeat(3,minmax(0,1fr))}.stats>div{background:white;padding:16px;border-radius:12px;display:flex;flex-direction:column;gap:8px}input,select,button{width:100%;padding:12px;margin:6px 0;border:1px solid #ccd4df;border-radius:9px}button{background:#0d6efd;color:white;border:0;font-weight:700;cursor:pointer}.status{font-size:24px;font-weight:800;padding:12px}.status.on{color:#087f23}.status.off{color:#b42318}pre{white-space:pre-wrap;word-break:break-word}@media(max-width:700px){.grid,.stats{grid-template-columns:1fr}main{padding:12px}}

.auth-link {
    text-align: center;
    margin-top: 15px;
}

.auth-link a {
    font-weight: 600;
    text-decoration: none;
}

.auth-link a:hover {
    text-decoration: underline;
}

#registerMsg,
#loginMsg {
    min-height: 20px;
}

#registerBox p:first-of-type {
    font-size: 14px;
    opacity: .75;
}

.handset-card {
    margin-top: 20px;
}

.handset-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.handset-header h3 {
    margin-bottom: 4px;
}

.handset-header small {
    opacity: .7;
}

.handset-item {
    border: 1px solid rgba(127,127,127,.25);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
}

.handset-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.handset-name {
    font-weight: 700;
    font-size: 16px;
}

.handset-info {
    margin-top: 10px;
    display: grid;
    gap: 5px;
    font-size: 13px;
    opacity: .8;
}

.handset-status {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.handset-status.active {
    background: #d1fae5;
    color: #065f46;
}

.handset-status.inactive {
    background: #fee2e2;
    color: #991b1b;
}

.handset-actions {
    margin-top: 12px;
}

.handset-actions button {
    width: auto;
    padding: 8px 12px;
    font-size: 13px;
}

.handset-loading,
.handset-empty {
    padding: 20px;
    text-align: center;
    opacity: .7;
}