*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif}
body{background:#eef2f6;display:flex;justify-content:center;padding:24px;min-height:100vh}
#app{max-width:1440px;width:100%}
.mockup-container{background:#fff;border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,.1);padding:24px;display:flex;flex-direction:column;gap:20px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:2px solid #e9edf2;flex-wrap:wrap;gap:12px}
.brand{display:flex;align-items:center;gap:12px}.brand i{font-size:28px;color:#1a365d}.brand h1{font-size:24px;font-weight:700;color:#1a365d}.brand span{font-weight:300;color:#4a6a8b}
.topbar-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nav-tabs{display:flex;gap:12px;flex-wrap:wrap}
.nav-tab{padding:12px 22px;border-radius:12px;font-weight:600;font-size:14px;background:#f7fafc;color:#4a6a8b;border:1px solid #e2e8f0;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:10px}
.nav-tab:hover{background:#edf2f7;color:#1a365d}.nav-tab.active{background:#1a365d;color:#fff;border-color:#1a365d}
.view{animation:fadeIn .3s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.btn{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:.2s;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn-primary{background:#2b6cb0;color:#fff}.btn-primary:hover{background:#1a4f7a}.btn-danger{background:#e53e3e;color:#fff}.btn-danger:hover{background:#c53030}
.btn-success{background:#38a169;color:#fff}.btn-success:hover{background:#2f855a}.btn-warn{background:#d69e2e;color:#fff}
.btn-outline{background:#fff;border:1px solid #cbd5e0;color:#4a6a8b}.btn-outline:hover{background:#f7fafc}.btn-sm{padding:5px 10px;font-size:12px}
.tag{background:#edf2f7;padding:4px 12px;border-radius:30px;font-size:12px;font-weight:500;color:#1a365d;display:inline-flex;align-items:center;gap:6px}
.card{background:#fff;border-radius:16px;border:1px solid #e2e8f0;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.02);display:flex;flex-direction:column}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.card-header h3{font-size:16px;font-weight:600;color:#1a365d;display:flex;align-items:center;gap:10px}
.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.col{display:flex;flex-direction:column;gap:20px;min-width:0}
@media(max-width:1024px){.dashboard-grid{grid-template-columns:1fr}}
.search-bar{display:flex;gap:10px;background:#f7fafc;padding:12px;border-radius:12px;border:1px solid #e2e8f0;margin-bottom:8px;flex-wrap:wrap}
.search-bar select,.search-bar input,.fi{flex:1;min-width:110px;padding:10px;border-radius:8px;border:1px solid #cbd5e0;font-size:14px;font-weight:500;outline:none;background:#fff}
.fi{margin-bottom:8px;width:100%}
#map{height:350px;border-radius:12px;z-index:1}
.custom-marker{background:#fff;border-radius:50%;border:3px solid #38a169;width:16px;height:16px;box-shadow:0 0 10px rgba(56,161,105,.5)}
.custom-marker.red{border-color:#e53e3e}.custom-marker.blue{border-color:#2b6cb0}.custom-marker.amber{border-color:#d69e2e}.custom-marker.grey{border-color:#a0aec0}.custom-marker.navy{border-color:#1a365d;border-radius:4px}
.video-container{background:#1a202c;border-radius:12px;aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden}
.video-overlay{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;font-size:12px;font-weight:500;z-index:2}
.live-badge{background:#e53e3e;padding:4px 10px;border-radius:20px;display:flex;align-items:center;gap:6px}
.live-badge .dot{width:6px;height:6px;background:#fff;border-radius:50%;animation:blink 1s infinite}@keyframes blink{50%{opacity:0}}
.video-controls{margin-top:12px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.share-dropdown{position:relative;display:inline-block}
.share-menu{display:none;position:absolute;right:0;bottom:100%;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);width:220px;z-index:10;margin-bottom:8px}
.share-menu.show{display:block}.share-menu div{padding:12px 16px;font-size:13px;color:#4a6a8b;cursor:pointer;border-bottom:1px solid #edf2f7}.share-menu div:hover{background:#f7fafc;color:#1a365d}
.incident-list{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto}
.incident-item{display:flex;justify-content:space-between;align-items:center;background:#f7fafc;padding:14px;border-radius:12px;border-left:4px solid #e53e3e;flex-wrap:wrap;gap:10px}
.incident-item.yellow{border-left-color:#d69e2e}.incident-item.blue{border-left-color:#3182ce}.incident-item.green{border-left-color:#38a169}
.incident-info .title{font-weight:600;font-size:14px;color:#1a365d;margin-bottom:4px}.incident-info .meta,.muted{font-size:12px;color:#4a6a8b}
.histogram-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}.party-name{width:50px;font-weight:600;font-size:13px;color:#1a365d}
.bar-bg{flex:1;height:22px;background:#edf2f7;border-radius:6px;overflow:hidden}.bar-fill{height:100%;border-radius:6px;transition:width 1s ease}.pct{width:90px;text-align:right;font-weight:600;font-size:12px}
.radio-module{background:#1a202c;border-radius:12px;padding:16px;color:#fff}
.radio-log{background:#0d1117;border-radius:8px;padding:10px;margin-top:12px;height:90px;overflow-y:auto;font-family:'JetBrains Mono';font-size:12px}
.radio-log div{padding:2px 0;border-bottom:1px solid #1e2630}.radio-log .time{color:#718096;margin-right:8px}.radio-log .alert{color:#fc8181}
.contact-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto}
.contact-item{display:flex;justify-content:space-between;align-items:center;background:#f7fafc;padding:12px;border-radius:8px;border:1px solid #e2e8f0;gap:8px;flex-wrap:wrap}
.contact-item .info{font-size:13px;color:#1a365d}.contact-item .role{font-weight:600}.contact-item .loc{color:#4a6a8b;font-size:12px}
.obs-code{font-family:'JetBrains Mono';font-size:12px;background:#edf2f7;padding:4px 8px;border-radius:4px}
table{border-collapse:collapse;width:100%;font-size:12px}th,td{padding:8px;border-bottom:1px solid #e2e8f0;text-align:left;white-space:nowrap}th{color:#1a365d;background:#f7fafc}
.tw{overflow-x:auto}.mono{font-family:'JetBrains Mono',monospace}
.observer-layout{display:flex;gap:40px;justify-content:center;padding:20px 0;flex-wrap:wrap}
.phone-mockup{width:380px;height:780px;background:#000;border-radius:40px;padding:12px;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);position:relative;flex-shrink:0}
.phone-screen{width:100%;height:100%;background:#1a202c;border-radius:32px;overflow:hidden;display:flex;flex-direction:column;color:#fff}
.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:150px;height:30px;background:#000;border-bottom-left-radius:16px;border-bottom-right-radius:16px;z-index:10}
.app-header{padding:40px 20px 15px;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:500;border-bottom:1px solid #2d3748;gap:6px}
.app-content{flex:1;padding:16px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.camera-view{background:#2d3748;border-radius:16px;aspect-ratio:4/3;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid #4a5568;overflow:hidden;flex-shrink:0}
.camera-overlay{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;font-size:11px;font-family:'JetBrains Mono',monospace;z-index:2;text-shadow:0 1px 2px #000}
.stream-controls{position:absolute;bottom:10px;left:10px;right:10px;display:flex;gap:10px;z-index:2}
.stream-controls button{flex:1;padding:10px;border-radius:8px;border:none;font-weight:600;font-size:13px;cursor:pointer}
.tally-panel{background:rgba(45,55,72,.9);border-radius:16px;padding:16px;border:1px solid #4a5568;flex-shrink:0}
.tally-title{color:#a0aec0;font-size:12px;font-weight:600;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.tally-row{display:flex;justify-content:space-between;font-size:18px;font-weight:600;padding:8px 0;border-bottom:1px solid #4a5568;font-family:'JetBrains Mono',monospace;cursor:pointer}
.tally-row:hover{background:rgba(255,255,255,.1)}
.correction-controls{display:flex;gap:8px;margin-top:12px}
.correction-controls input,.dk{flex:1;min-width:0;background:#1a202c;border:1px solid #4a5568;border-radius:8px;padding:8px;color:#fff;font-family:'JetBrains Mono';font-size:15px;text-align:center;outline:none}
.correction-controls button{width:40px;height:40px;border-radius:8px;border:none;color:#fff;cursor:pointer;font-size:18px}
.app-footer{padding:14px 20px;background:#1a202c;border-top:1px solid #2d3748;display:flex;flex-direction:column;gap:10px}
.btn-report{background:#e53e3e;color:#fff;padding:16px;border-radius:12px;border:none;font-weight:700;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}
.instructions-panel{width:420px;display:flex;flex-direction:column;gap:16px}.instruction-card{background:#fff;padding:20px;border-radius:12px;border:1px solid #e2e8f0}
.instruction-card h4{color:#1a365d;font-size:16px;margin-bottom:8px}.instruction-card p{color:#4a6a8b;font-size:14px;line-height:1.5}
.toast{position:fixed;bottom:30px;right:30px;background:#1a365d;color:#fff;padding:16px 24px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);font-weight:500;z-index:9999;display:none;animation:slideUp .3s ease;max-width:90vw}
.toast.show{display:block}@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.login{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.pill{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;color:#fff}.g{background:#38a169}.a{background:#d69e2e}.r{background:#e53e3e}.s{background:#a0aec0}
.clock{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;color:#fff;user-select:none}
@media(max-width:520px){body{padding:0}.phone-mockup{width:100vw;height:100vh;border-radius:0;padding:0}.phone-screen{border-radius:0}.notch{display:none}.app-header{padding-top:14px}.observer-layout{padding:0}.mockup-container{border-radius:0;padding:12px}}
.pill.b{background:#2b6cb0}.pill.r{background:#e53e3e}.pill.s{background:#a0aec0}.pill.g{background:#38a169}.pill.a{background:#d69e2e}