:root{
  --bg: #F5F6FA;
  --surface: #FFFFFF;
  --surface-2: #F0F2F7;
  --border: #E1E5EC;
  --teal: #0EA894;
  --teal-dim: #E3FBF6;
  --red: #E5484D;
  --red-dim: #FDECEC;
  --amber: #D97706;
  --amber-dim: #FEF3E2;
  --text: #1A2130;
  --muted: #6B7385;
  --muted-2: #A0A7B5;
  --radius: 14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Inter', sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden;}
.mono{font-family:'JetBrains Mono', monospace;}
.disp{font-family:'Space Grotesk', sans-serif;}
.hidden{display:none !important;}

/* ---------- LOGIN ---------- */
#loginScreen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{width:380px; max-width:100%; background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:34px 30px;}
.login-brand{display:flex; align-items:center; justify-content:center; margin-bottom:26px;}
.login-logo-full{width:100%; max-width:200px; height:auto; display:block;}
.login-icon{width:44px;height:44px;border-radius:11px; background:#fff; display:flex; align-items:center; justify-content:center; padding:4px; box-shadow:0 0 0 1px var(--border);}
.login-title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14.5px; line-height:1.35;}
.login-sub{font-size:11.5px; color:var(--muted); letter-spacing:.4px; text-transform:uppercase;}
.login-error{background:var(--red-dim); color:#ffb3b6; font-size:12.5px; padding:9px 12px; border-radius:9px; margin-bottom:14px; display:none;}

/* ---------- LAYOUT ---------- */
#app{display:flex; min-height:100vh;}
.sidebar{width:236px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:22px 16px; position:sticky; top:0; height:100vh;}
.brand{display:flex; align-items:center; justify-content:center; padding:14px 10px 20px 10px; border-bottom:1px solid var(--border); margin-bottom:18px;}
.brand-logo-full{width:100%; max-width:150px; height:auto; display:block;}
.brand-icon{width:38px; height:38px; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; padding:3px; box-shadow:0 0 0 1px var(--border);}
.brand-name{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15.5px;}
.brand-sub{font-size:10.5px; color:var(--muted); letter-spacing:.5px; text-transform:uppercase;}
.nav{display:flex; flex-direction:column; gap:3px; flex:1;}
.nav-item{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; color:var(--muted); font-size:14px; font-weight:500; cursor:pointer; transition:.15s; border:1px solid transparent; user-select:none;}
.nav-item svg{width:18px; height:18px; flex-shrink:0;}
.nav-item:hover{background:var(--surface-2); color:var(--text);}
.nav-item.active{background:var(--teal-dim); color:var(--teal); border-color:rgba(14,168,148,.25);}
.nav-badge{position:absolute; top:6px; right:10px; background:var(--red); color:#fff; font-size:10.5px; font-weight:700; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 5px; box-shadow:0 0 0 2px var(--surface);}
.sidebar-foot{border-top:1px solid var(--border); padding-top:14px; margin-top:10px; display:flex; flex-direction:column; gap:8px;}
.status-pill{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); padding:8px 10px; background:var(--surface); border-radius:10px; border:1px solid var(--border);}
.dot{width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 6px var(--teal); flex-shrink:0;}
.dot.pulse{animation:pulse 2s infinite;}
.dot.off{background:var(--red); box-shadow:0 0 6px var(--red);}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}

main{flex:1; min-width:0; padding:26px 34px 60px; max-width:1400px;}
.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:14px;}
.page-title{font-family:'Space Grotesk',sans-serif; font-size:23px; font-weight:700;}
.page-sub{color:var(--muted); font-size:13px; margin-top:3px;}
.clock-box{text-align:right;}
.clock{font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:600; color:var(--teal); letter-spacing:1px;}
.date-line{font-size:12px; color:var(--muted); margin-top:2px;}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px;}
.grid{display:grid; gap:16px;}
.stats-grid{grid-template-columns:repeat(4,1fr); margin-bottom:20px;}
.stat-card{display:flex; flex-direction:column; gap:8px;}
.stat-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;}
.stat-icon svg{width:17px;height:17px;}
.stat-value{font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700;}
.stat-label{font-size:12.5px; color:var(--muted);}

.scan-hero{display:grid; grid-template-columns:170px 1fr; gap:26px; align-items:center; margin-bottom:20px; background:linear-gradient(120deg, var(--surface), #101823);}
.scan-ring-wrap{position:relative; width:140px; height:140px; margin:0 auto;}
.scan-ring{width:140px;height:140px;border-radius:50%;border:2px solid #1d2a38; position:relative; display:flex; align-items:center; justify-content:center;}
.scan-sweep{position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, rgba(14,168,148,0) 0deg, rgba(14,168,148,.55) 60deg, rgba(14,168,148,0) 100deg); animation:spin 2.6s linear infinite;}
.scan-sweep.paused{animation-play-state:paused; opacity:.3;}
@keyframes spin{to{transform:rotate(360deg);}}
.scan-core{width:96px;height:96px;border-radius:50%;background:#0d1520; border:1px solid #223145; display:flex;align-items:center;justify-content:center; z-index:2;}
.scan-core svg{width:38px;height:38px; color:var(--teal);}
.scan-caption{text-align:center; font-size:11px; color:var(--muted); margin-top:10px; letter-spacing:.4px;}
.hero-text h2{font-family:'Space Grotesk',sans-serif; font-size:19px; margin-bottom:6px;}
.hero-text p{color:var(--muted); font-size:13.5px; line-height:1.55; max-width:520px;}
.hero-metrics{display:flex; gap:26px; margin-top:14px; flex-wrap:wrap;}
.hero-metric b{font-family:'JetBrains Mono',monospace; font-size:19px; display:block; color:var(--text);}
.hero-metric span{font-size:11.5px; color:var(--muted);}

.dash-cols{grid-template-columns:1.3fr 1fr;}
.section-title{font-family:'Space Grotesk',sans-serif; font-size:14.5px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between;}
.section-title svg{width:16px; height:16px; flex-shrink:0;}
.tag{font-size:10.5px; padding:2px 8px; border-radius:20px; background:var(--surface-2); color:var(--muted); font-weight:500;}

.feed-row{display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--border);}
.feed-row:last-child{border-bottom:none;}
.avatar{width:34px;height:34px;border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; font-family:'Space Grotesk',sans-serif; flex-shrink:0; color:#0A0E14; overflow:hidden;}
.avatar img{width:100%;height:100%;object-fit:cover;}
.feed-info{flex:1; min-width:0;}
.feed-name{font-size:13.5px; font-weight:600;}
.feed-meta{font-size:11.5px; color:var(--muted);}
.feed-time{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); text-align:right; flex-shrink:0;}
.badge{font-size:10.5px; padding:2.5px 8px; border-radius:6px; font-weight:600;}
.badge.in{background:var(--teal-dim); color:var(--teal);}
.badge.out{background:var(--amber-dim); color:var(--amber);}
.badge.absent{background:var(--red-dim); color:var(--red);}
.cam-fullscreen-target{user-select:none; -webkit-user-select:none; -moz-user-select:none;}
.cam-fullscreen-target:fullscreen{background:#000; display:flex; align-items:center; justify-content:center;}
.cam-fullscreen-target:fullscreen iframe{pointer-events:auto;}
.badge.amber{background:var(--amber-dim); color:var(--amber);}

.person-chip{display:flex;align-items:center; gap:10px; padding:8px 6px; border-radius:9px;}
.person-chip:hover{background:var(--surface-2);}
.person-name{font-size:13px; font-weight:600;}
.person-dept{font-size:11px; color:var(--muted);}

.btn{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; padding:9px 15px; border-radius:9px; border:1px solid var(--border); cursor:pointer; background:var(--surface-2); color:var(--text); transition:.15s; font-family:'Inter',sans-serif;}
.btn svg{width:15px;height:15px;}
.btn:hover{border-color:var(--muted-2);}
.btn:disabled{opacity:.6; cursor:not-allowed;}
.btn-primary{background:var(--teal); color:#062622; border-color:var(--teal);}
.btn-primary:hover{background:#2ee0c4;}
.btn-ghost{background:transparent;}
.btn-block{width:100%; justify-content:center;}

table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; padding:10px 12px; border-bottom:1px solid var(--border);}
td{padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto;}

.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; justify-content:space-between;}
.input, select{background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:9px 12px; border-radius:9px; font-size:13px; font-family:'Inter',sans-serif;}
input[type=file]{color:var(--muted); font-size:12px;}
.search-box{position:relative;}
.search-box svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:14px;height:14px; color:var(--muted-2);}
.search-box input{padding-left:32px; width:230px;}
.faceid-status{display:flex; align-items:center; gap:6px; font-size:12px;}
.faceid-status svg{width:14px;height:14px;}

.overlay{position:fixed; inset:0; background:rgba(5,8,12,.7); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal{background:var(--surface); border:1px solid var(--border); border-radius:16px; width:480px; max-width:100%; max-height:90vh; overflow-y:auto; padding:24px;}
.modal h3{font-family:'Space Grotesk',sans-serif; font-size:17px; margin-bottom:4px;}
.modal .modal-sub{font-size:12.5px; color:var(--muted); margin-bottom:18px;}
.form-row{margin-bottom:13px;}
.form-row label{font-size:12px; color:var(--muted); display:block; margin-bottom:6px;}
.form-row .input, .form-row select{width:100%;}
.form-grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}
.upload-preview{width:64px;height:64px;border-radius:12px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px dashed var(--border); flex-shrink:0;}
.upload-preview img{width:100%;height:100%;object-fit:cover;}
.upload-row{display:flex; align-items:center; gap:14px;}
.progress-track{height:6px; background:var(--surface-2); border-radius:6px; overflow:hidden; margin-top:10px;}
.progress-fill{height:100%; background:var(--teal); width:0%; transition:width .25s;}
.scan-msg{font-size:12px; color:var(--muted); margin-top:8px; display:flex; align-items:center; gap:6px;}
.scan-msg.error{color:var(--red);}

.settings-grid{grid-template-columns:1fr 1fr; align-items:start;}
.field-block{margin-bottom:16px;}
.field-block label{font-size:12.5px; color:var(--muted); display:block; margin-bottom:6px;}
.switch-row{display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border);}
.switch-row:last-child{border-bottom:none;}
.switch-label{font-size:13.5px;}
.switch-desc{font-size:11.5px; color:var(--muted); margin-top:2px;}
.switch{width:40px; height:22px; border-radius:20px; background:var(--surface-2); border:1px solid var(--border); position:relative; cursor:pointer; flex-shrink:0;}
.switch.on{background:var(--teal-dim); border-color:var(--teal);}
.switch-knob{width:16px;height:16px; border-radius:50%; background:var(--muted); position:absolute; top:2px; left:2px; transition:.2s;}
.switch.on .switch-knob{left:20px; background:var(--teal);}
.conn-status{display:flex; align-items:center; gap:9px; padding:12px 14px; background:var(--surface-2); border-radius:10px; margin-bottom:16px;}
.conn-dot{width:9px;height:9px;border-radius:50%; flex-shrink:0;}

.toast{position:fixed; bottom:24px; right:24px; background:var(--surface-2); border:1px solid var(--teal); color:var(--text); padding:12px 18px; border-radius:10px; font-size:13px; display:flex; align-items:center; gap:9px; z-index:200; box-shadow:0 8px 24px rgba(0,0,0,.4); max-width:360px;}
.toast.error{border-color:var(--red);}

@media(max-width:900px){
  .sidebar{position:fixed; left:-260px; z-index:50; transition:.2s; box-shadow:0 0 30px rgba(0,0,0,.5);}
  .sidebar.open{left:0;}
  main{padding:20px 16px 60px;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .scan-hero{grid-template-columns:1fr; text-align:center;}
  .dash-cols, .settings-grid{grid-template-columns:1fr;}
  .form-grid2{grid-template-columns:1fr;}
  .menu-btn{display:flex !important;}
}
.menu-btn{display:none; align-items:center; justify-content:center; width:38px;height:38px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); cursor:pointer;}

/* ---------- Devices (multi-terminal) ---------- */
.device-row{display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--border);}
.device-row:last-child{border-bottom:none;}
.device-dot{width:9px;height:9px;border-radius:50%; flex-shrink:0;}
.device-dot.online{background:var(--teal); box-shadow:0 0 0 3px var(--teal-dim);}
.device-dot.offline{background:var(--red); box-shadow:0 0 0 3px var(--red-dim);}
.device-dot.unknown{background:var(--muted);}
.device-info{flex:1; min-width:0;}
.device-name{font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:8px;}
.device-meta{font-size:11.5px; color:var(--muted); margin-top:2px;}
.device-actions{display:flex; gap:6px; flex-shrink:0;}
.role-pill{font-size:10px; padding:2px 7px; border-radius:20px; font-weight:600; text-transform:uppercase; letter-spacing:.3px;}
.role-pill.kirish{background:var(--teal-dim); color:var(--teal);}
.role-pill.chiqish{background:var(--amber-dim); color:var(--amber);}
.role-pill.both{background:var(--surface-2); color:var(--muted);}

/* ---------- Segmented control (Kunlik/Oylik) ---------- */
.segmented{display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:3px; gap:2px;}
.segmented-opt{padding:7px 16px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; user-select:none;}
.segmented-opt.active{background:var(--teal); color:#04211c;}

/* ---------- Expandable report row ---------- */
.rep-expand-btn{cursor:pointer; color:var(--teal); font-size:11.5px; font-weight:600;}
.rep-day-table{margin-top:8px; background:var(--surface-2); border-radius:8px; padding:10px 12px;}
.notes-list{font-size:11px; color:var(--muted); line-height:1.7;}
.stats-grid-5{grid-template-columns:repeat(5,1fr);}
@media(max-width:900px){ .stats-grid-5{grid-template-columns:1fr 1fr;} }
.stats-grid-6{grid-template-columns:repeat(6,1fr);}
@media(max-width:1100px){ .stats-grid-6{grid-template-columns:repeat(3,1fr);} }
@media(max-width:900px){ .stats-grid-6{grid-template-columns:1fr 1fr;} }

/* ---------- Topbar: bell + profile ---------- */
.topbar-actions{display:flex; align-items:center; gap:10px;}
.icon-btn{position:relative; width:40px; height:40px; border-radius:11px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); transition:.15s;}
.icon-btn:hover{color:var(--text); border-color:var(--teal);}
.bell-wrap, .profile-wrap{position:relative;}
.bell-badge{position:absolute; top:-4px; right:-4px; background:var(--red); color:#fff; font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px;}
.bell-dropdown{position:absolute; top:48px; right:0; width:300px; max-height:360px; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 30px rgba(20,30,50,.14); z-index:60; padding:8px;}
.bell-item{display:flex; gap:10px; padding:10px 8px; border-radius:8px; font-size:12.5px;}
.bell-item:hover{background:var(--surface-2);}
.bell-item-icon{flex-shrink:0; width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center;}
.bell-empty{padding:18px 8px; text-align:center; color:var(--muted); font-size:12.5px;}
.profile-btn{width:40px; height:40px; padding:0;}
.profile-avatar{width:100%; height:100%; border-radius:11px; background:var(--teal-dim); color:var(--teal); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; font-family:'Space Grotesk',sans-serif;}
.profile-dropdown-item{padding:10px 10px; border-radius:8px; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:9px;}
.profile-dropdown-item svg{width:16px; height:16px; flex-shrink:0;}
.profile-dropdown-item:hover{background:var(--surface-2);}

/* ---------- System status (bottom of dashboard) ---------- */
.sysstat-row{display:flex; align-items:flex-start; gap:12px; padding:6px 0;}
.sysstat-row .sysstat-dot{margin-top:4px;}
.sysstat-dot{width:9px;height:9px;border-radius:50%; flex-shrink:0;}
.sysstat-dot.ok{background:var(--teal); box-shadow:0 0 0 3px var(--teal-dim);}
.sysstat-dot.warn{background:var(--amber); box-shadow:0 0 0 3px var(--amber-dim);}
.sysstat-dot.bad{background:var(--red); box-shadow:0 0 0 3px var(--red-dim);}

/* ---------- Auto-scrolling (marquee) present/absent lists ---------- */
.marquee-viewport{height:312px; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);}
.marquee-track{display:flex; flex-direction:column;}
.marquee-row{display:flex; align-items:center; gap:11px; padding:9px 4px;}
.marquee-row .avatar{overflow:hidden;}
.marquee-row .avatar img{width:100%; height:100%; object-fit:cover;}

/* ---------- Door control chips ---------- */
.door-mode-chip{font-size:10px; padding:2px 7px; border-radius:20px; font-weight:600;}
.door-mode-chip.normal{background:var(--surface-2); color:var(--muted);}
.door-mode-chip.alwaysOpen{background:var(--teal-dim); color:var(--teal);}
.door-mode-chip.alwaysClose{background:var(--red-dim); color:var(--red);}
.bell-new-dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--red); margin-left:5px;}
.meta-list-scroll{max-height:360px; overflow-y:auto;}
.pagination-footer{display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); flex-wrap:wrap; gap:10px;}

/* ---------- Profile dropdown (redesigned) ---------- */
.profile-header{display:flex; align-items:center; gap:11px; padding:6px 8px 14px; border-bottom:1px solid var(--border); margin-bottom:8px;}
.profile-header-avatar{width:40px; height:40px; border-radius:11px; background:linear-gradient(135deg, var(--teal), #0b8f7c); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; font-family:'Space Grotesk',sans-serif; flex-shrink:0;}
.profile-header-name{font-weight:700; font-size:13.5px;}
.profile-header-role{font-size:11px; color:var(--teal); font-weight:600; margin-top:1px;}
.profile-dropdown-item.danger{color:var(--red);}
.profile-dropdown-divider{height:1px; background:var(--border); margin:6px 4px;}

/* ---------- Admin management cards ---------- */
.admin-card{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border);}
.admin-role-select{margin-top:4px; font-size:11.5px; padding:4px 8px; border-radius:7px; border:1px solid var(--border); background:var(--surface); color:var(--text); width:100%; max-width:220px;}
.modal-section-label{font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin:14px 0 8px;}