:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; color: #17324d; background: #eaf0f5; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; padding: 28px 18px; background: linear-gradient(145deg, #eef4f8, #dbe7ef); }
.shell { width: min(760px, 100%); margin: 5vh auto 0; }
.panel { overflow: hidden; border: 1px solid #c5d5e1; border-radius: 14px; background: #fff; box-shadow: 0 16px 42px rgba(25, 61, 92, .16); }
.panel-header { padding: 27px 30px; color: #fff; background: linear-gradient(135deg, #173f65, #2678af); }
.eyebrow { margin-bottom: 7px; color: #bee4ff; font-size: 11px; font-weight: 800; letter-spacing: .13em; }
h1, h2, p { margin-top: 0; }
.panel-header h1 { margin-bottom: 6px; }
.panel-header p { margin-bottom: 0; color: #e2f2fc; }
.panel-body { padding: 28px 30px 32px; }
label { display: block; margin: 15px 0 6px; font-size: 12px; font-weight: 800; }
input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #aec2d1; border-radius: 7px; font-size: 16px; }
button, .button { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; padding: 10px 17px; border: 0; border-radius: 7px; cursor: pointer; color: #fff; background: #176fb0; font-weight: 800; text-decoration: none; }
button:hover, .button:hover { background: #10588e; }
.login-button { width: 100%; margin-top: 22px; }
.error { margin: 0 0 15px; padding: 11px 13px; border: 1px solid #e2a2a2; border-radius: 7px; color: #841b1b; background: #fff1f1; }
.signed-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; color: #566c7e; }
.signed-in strong { color: #173f65; }
.camera-list { display: grid; gap: 13px; }
.camera-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 18px; border: 1px solid #cbd8e2; border-radius: 9px; background: #f8fbfd; }
.camera-card h2 { margin-bottom: 4px; font-size: 19px; }
.camera-card p { margin-bottom: 0; color: #64798a; }
.camera-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.secondary { color: #17649b; background: #fff; box-shadow: inset 0 0 0 1px #176fb0; }
.secondary:hover { color: #fff; }
.logout-form { margin: 0; }
.logout-form button { min-height: 36px; padding: 7px 12px; color: #28506e; background: #e8f0f5; }
@media (max-width: 620px) { .camera-card { grid-template-columns: 1fr; } .camera-actions { display: grid; grid-template-columns: 1fr 1fr; } .signed-in { align-items: flex-start; flex-direction: column; } }