:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#102033;background:#eef4f8}
body{margin:0;min-height:100vh;background:radial-gradient(circle at top left,#dff7ef,#eef4f8 35%,#f7fbff)}
button,input,select,textarea{font:inherit}
button{border:0;border-radius:14px;background:#0d6f7b;color:white;padding:12px 16px;font-weight:700;cursor:pointer;box-shadow:0 12px 25px #0d6f7b2b}
button.secondary{background:#18304a}
a{color:#0d6f7b;font-weight:800;text-decoration:none}
button:disabled{opacity:.55;cursor:wait}
.hidden{display:none!important}
.login-card{width:min(420px,calc(100vw - 32px));margin:9vh auto;background:white;padding:30px;border-radius:28px;box-shadow:0 25px 80px #12345624;display:grid;gap:14px}
.brand{font-size:28px;font-weight:900;color:#0d6f7b}
.login-card input,.panel input,.panel select,.panel textarea{width:100%;box-sizing:border-box;border:1px solid #d6e3eb;background:#f9fcfd;border-radius:14px;padding:12px 13px;color:#102033}
.shell{padding:28px;max-width:1240px;margin:auto}
header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
h1,h2,p{margin-top:0}
h1{font-size:40px;margin-bottom:8px}
h2{font-size:20px}
.eyebrow{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#0d6f7b;font-weight:800}
.grid{display:grid;grid-template-columns:1fr 390px;gap:20px}
.span-2{grid-column:span 2}
.panel{background:rgba(255,255,255,.88);border:1px solid #dce9ef;border-radius:28px;padding:20px;box-shadow:0 18px 50px #18304a14}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.preview{min-height:520px;background:#07111c;border-radius:22px;display:grid;place-items:center;overflow:hidden;position:relative}
.preview img{width:100%;height:100%;object-fit:contain;display:none}
#previewEmpty{color:#b8c6d4;text-align:center;max-width:420px;padding:30px}
form{display:grid;gap:12px}
label{display:grid;gap:6px;font-weight:700;color:#26384b}
label.switch{display:flex;align-items:center}
label.switch input{width:auto}
small{color:#537083}
.history{display:grid;gap:10px}
.item{border:1px solid #e2edf2;background:#fbfdff;border-radius:16px;padding:12px;display:flex;justify-content:space-between;gap:12px}
.camera-list{display:grid;gap:14px}
.camera-card{border:1px solid #dce9ef;background:#fbfdff;border-radius:22px;padding:16px;display:grid;gap:14px}
.camera-title{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.camera-title strong{display:block;font-size:18px;color:#102033}
.camera-title small{display:block;margin-top:4px}
.camera-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.camera-grid .wide{grid-column:1/-1}
.camera-actions{display:flex;gap:10px;flex-wrap:wrap}
.empty{border:1px dashed #b8cbd7;background:#f7fbff;border-radius:18px;padding:18px;color:#537083;text-align:center}
.ok{color:#11815d;font-weight:800}
.bad{color:#b42318;font-weight:800}
@media(max-width:900px){.grid{grid-template-columns:1fr}.span-2{grid-column:span 1}.shell{padding:16px}header,.panel-head,.camera-title{display:grid}.actions{justify-content:stretch}.actions button{width:100%}.camera-grid{grid-template-columns:1fr}.camera-actions button{width:100%}h1{font-size:30px}.preview{min-height:320px}}