:root{--bg: #f4f6fa;--panel: #ffffff;--border: #e3e8ef;--text: #1a2233;--muted: #6b7688;--primary: #2563eb;--primary-d: #1d4ed8;--green: #16a34a;--amber: #d97706;--red: #dc2626;--shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04)}*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,system-ui,-apple-system,Arial,sans-serif;background:var(--bg);color:var(--text)}a{color:var(--primary);text-decoration:none}.layout{display:flex;min-height:100vh}.sidebar{width:230px;background:#0f172a;color:#cbd5e1;padding:18px 0;flex-shrink:0}.sidebar .brand{font-size:17px;font-weight:700;color:#fff;padding:0 20px 16px;line-height:1.3}.sidebar .brand small{display:block;font-weight:400;font-size:11px;color:#64748b;margin-top:4px}.sidebar nav a{display:block;padding:11px 20px;color:#cbd5e1;font-size:14px;border-left:3px solid transparent}.sidebar nav a:hover{background:#1e293b;color:#fff}.sidebar nav a.active{background:#1e293b;color:#fff;border-left-color:var(--primary)}.sidebar .userbox{padding:14px 20px;border-top:1px solid #1e293b;margin-top:14px;font-size:13px}.sidebar .userbox .role{color:#64748b;font-size:12px}.sidebar .logout{margin-top:8px;background:none;border:1px solid #334155;color:#cbd5e1;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px}.sidebar .logout:hover{background:#1e293b}.main{flex:1;padding:24px 32px;overflow:auto}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.topbar h1{font-size:22px;margin:0}.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:18px}.grid{display:grid;gap:16px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.stat{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:18px;box-shadow:var(--shadow)}.stat .num{font-size:30px;font-weight:700}.stat .lbl{color:var(--muted);font-size:13px;margin-top:4px}.stat.green .num{color:var(--green)}.stat.amber .num{color:var(--amber)}.stat.red .num{color:var(--red)}.stat.blue .num{color:var(--primary)}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)}th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.02em}tbody tr:hover{background:#f8fafc;cursor:pointer}button,.btn{font-family:inherit}.btn{display:inline-flex;align-items:center;gap:6px;background:var(--primary);color:#fff;border:none;padding:9px 16px;border-radius:8px;font-size:14px;cursor:pointer}.btn:hover{background:var(--primary-d)}.btn.sec{background:#fff;color:var(--text);border:1px solid var(--border)}.btn.sec:hover{background:#f1f5f9}.btn.sm{padding:5px 10px;font-size:12px}.btn.danger{background:var(--red)}input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;background:#fff}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary)}label{display:block;font-size:13px;color:var(--muted);margin:10px 0 5px}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.row>*{flex:1}.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600}.b-new{background:#dbeafe;color:#1e40af}.b-assigned{background:#ede9fe;color:#6d28d9}.b-in_progress{background:#fef3c7;color:#92400e}.b-waiting{background:#fde68a;color:#854d0e}.b-done{background:#dcfce7;color:#166534}.b-closed{background:#e2e8f0;color:#475569}.b-rejected{background:#fee2e2;color:#991b1b}.b-skud{background:#e0f2fe;color:#075985}.b-cctv{background:#f3e8ff;color:#7e22ce}.b-fire{background:#fee2e2;color:#b91c1c}.b-other{background:#f1f5f9;color:#475569}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e293b,#0f172a)}.login-card{background:#fff;padding:36px;border-radius:16px;width:360px;box-shadow:0 20px 50px #0000004d}.login-card h2{margin:0 0 4px}.login-card p.sub{color:var(--muted);margin:0 0 20px;font-size:13px}.err{color:var(--red);font-size:13px;margin:10px 0}.hint{color:var(--muted);font-size:12px;margin-top:16px;line-height:1.6}.muted{color:var(--muted)}.flexbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;flex-wrap:wrap}.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.toolbar select,.toolbar input{width:auto;min-width:140px}.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a80;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:#fff;border-radius:14px;padding:24px;width:520px;max-width:92vw;max-height:90vh;overflow:auto}.modal h3{margin-top:0}.timeline{list-style:none;padding:0;margin:0}.timeline li{padding:10px 0 10px 20px;border-left:2px solid var(--border);position:relative}.timeline li:before{content:"";position:absolute;left:-6px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--primary)}.timeline .t-time{font-size:12px;color:var(--muted)}.timeline .t-actor{font-weight:600;font-size:13px}.atts{display:flex;gap:10px;flex-wrap:wrap}.atts img{width:130px;height:100px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}.atts video{max-width:100%;border-radius:8px;border:1px solid var(--border);background:#000}.spinner-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#ffffff8c;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;z-index:3000;color:var(--text);font-weight:600}.spinner{width:44px;height:44px;border:4px solid #cbd5e1;border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.statusline{display:flex;gap:8px;align-items:center;font-size:13px}.dot{width:9px;height:9px;border-radius:50%;display:inline-block}.dot.ok{background:var(--green)}.dot.bad{background:var(--red)}.leaflet-container{height:460px;border-radius:12px}@media (max-width: 820px){.layout{flex-direction:column}.sidebar{width:auto;padding:10px 12px}.sidebar .brand{padding:0 0 8px;font-size:15px}.sidebar .brand small{font-size:10px}.sidebar nav{display:flex;flex-wrap:wrap;gap:6px}.sidebar nav a{padding:8px 12px;border-left:none!important;border-radius:8px;font-size:13px}.sidebar nav a.active{background:var(--primary);color:#fff}.sidebar .userbox{border-top:1px solid #1e293b;margin-top:10px;padding:10px 0 0;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}.sidebar .userbox .logout{margin-top:0;margin-left:auto}.main{padding:12px}.topbar{flex-wrap:wrap;gap:8px}.topbar h1,.flexbar h1{font-size:19px}.grid{grid-template-columns:1fr!important}.cards{grid-template-columns:repeat(2,1fr);gap:10px}.stat{padding:14px}.stat .num{font-size:24px}.panel{padding:14px;overflow-x:auto}table{font-size:12.5px}th,td{padding:7px 8px}.row{flex-direction:row;flex-wrap:wrap;align-items:stretch}.row>input,.row>select,.row>textarea,.row>div{flex:1 1 100%}.row>.btn,.row>button,.row>label,.row>span{flex:0 0 auto}.toolbar{gap:8px}.toolbar select,.toolbar input{width:100%;min-width:0}.modal{width:94vw;max-height:88vh;padding:18px}.leaflet-container{height:340px}.toast{left:12px;right:12px;bottom:12px;max-width:none}input,select,textarea{font-size:16px;padding:11px 12px}.btn{padding:11px 16px}.btn.sm{padding:8px 12px;font-size:13px}.sidebar nav a{font-size:14px;padding:10px 14px}table{font-size:13px}.panel{-webkit-overflow-scrolling:touch}}html,body{max-width:100%;overflow-x:hidden}@media (max-width: 420px){.cards{grid-template-columns:1fr 1fr}.topbar h1,.flexbar h1{font-size:17px}}.op-box{position:relative}.op-type{position:absolute;right:10px;top:9px;pointer-events:none}.op-drop{position:absolute;z-index:1500;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 30px #10182826;max-height:320px;overflow:auto}.op-item{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;cursor:pointer;border-bottom:1px solid #f1f5f9}.op-item:last-child{border-bottom:none}.op-item.hi{background:#eff6ff}.op-item.sel{background:#dbeafe}.op-ic{font-size:18px;line-height:1.2}.op-main{display:flex;flex-direction:column;min-width:0}.op-name{font-size:14px;font-weight:600}.op-addr{font-size:12px;color:var(--muted)}.op-empty{padding:12px;color:var(--muted);font-size:13px}.toast{position:fixed;right:24px;bottom:24px;z-index:2000;display:flex;align-items:center;gap:12px;background:#0f172a;color:#fff;padding:14px 16px;border-radius:12px;box-shadow:0 10px 30px #00000059;max-width:380px;cursor:pointer;animation:slidein .25s ease;border-left:4px solid var(--primary)}.toast:hover{background:#1e293b}.toast-x{background:none;border:none;color:#94a3b8;cursor:pointer;font-size:14px;padding:4px}@keyframes slidein{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}