:root{
  --primary:#2E5BFF; --primary-dark:#1F44C8; --danger:#E5484D; --warning:#F5A524; --success:#06C167;
  --text:#111418; --sec:#6B7280; --surface:#FFFFFF; --border:#E8EAED; --soft:#EAF0FF; --bg:#F6F6F4;
  --r:20px; --shadow:0 1px 2px rgba(17,20,24,.04),0 4px 16px rgba(17,20,24,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
.ic{width:18px;height:18px;flex:none}

/* ===== Экран входа ===== */
.login-screen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:20px;z-index:5000}
.login-screen.hidden{display:none}
.login-card{width:400px;max-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);padding:32px}
.login-logo{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.login-logo .mark{width:44px;height:44px;border-radius:14px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.login-logo .t{font-weight:800;font-size:20px}

/* ===== Анимированный глаз (логотип ОКО) ===== */
.eye-mark{width:76px;height:76px;border-radius:22px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.eye-mark .svgwrapper{position:relative;width:44px;height:26px}
.eye-mark svg{width:44px;height:26px;display:block;position:absolute;left:0;top:0}
.eye-mark svg path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.eye-mark .outline{stroke:#fff}
.eye-mark .pupil-group{animation:gazeShift 5.2s ease-in-out infinite;transform-origin:center}

@keyframes gazeShift{
  0%{transform:translateX(0)}
  15%{transform:translateX(5px)}
  35%{transform:translateX(5px)}
  50%{transform:translateX(0)}
  65%{transform:translateX(-5px)}
  85%{transform:translateX(-5px)}
  100%{transform:translateX(0)}
}
.login-sub{font-size:13px;color:var(--sec);margin-bottom:24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--sec);margin-bottom:8px}
.field input{width:100%;border:1.5px solid var(--border);border-radius:14px;padding:13px;font-size:14px;outline:none}
.field input:focus{border-color:var(--primary)}
.login-err{display:none;background:#FDECEC;color:#B3261E;border:1px solid #F5C6C6;border-radius:12px;padding:10px 13px;font-size:13px;margin-bottom:16px}
.login-err.show{display:block}
.login-btn{width:100%;padding:14px;border-radius:14px;background:var(--primary);color:#fff;font-size:15px;font-weight:700}
.login-btn:hover{background:var(--primary-dark)}
.login-btn:disabled{opacity:.55;cursor:not-allowed}
.login-hint{margin-top:16px;font-size:11.5px;color:var(--sec);line-height:1.6}
.login-hint b{color:var(--text)}

/* ===== Каркас приложения ===== */
.app{position:relative;width:100%;height:100%;background:var(--bg);overflow:hidden;display:flex;flex-direction:column}
.app.hidden{display:none}

.app-header{height:64px;display:flex;align-items:center;gap:12px;padding:0 20px;background:var(--surface);border-bottom:1px solid var(--border);flex:none}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none}
.h-hello{line-height:1.25}
.h-hello .greet{font-weight:700;font-size:15px}
.h-hello .sub{font-size:12px;color:var(--sec)}
.h-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--text);position:relative}
.icon-btn:hover{background:#F1F1EF}
.icon-btn.logout{color:var(--danger)}
.icon-btn .n-badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;border-radius:8px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}

.layout{flex:1;display:flex;min-height:0}

.sidebar{width:280px;flex:none;border-right:1px solid var(--border);background:var(--surface);overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.center{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;overflow-y:auto}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.sec-title{font-size:13px;font-weight:700;color:var(--sec);text-transform:uppercase;letter-spacing:.4px;margin:2px 2px 8px}

/* ===== Быстрые действия ===== */
.qa{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qa-btn{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border:1px solid var(--border);border-radius:16px;background:#fff;font-size:12.5px;font-weight:600;text-align:left}
.qa-btn .ic{width:20px;height:20px}
.qa-btn.blue{color:var(--primary)} .qa-btn.green{color:var(--success)} .qa-btn.red{color:var(--danger)}
.qa-btn.sos{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:center;gap:10px;background:var(--danger);color:#fff;border-color:var(--danger);font-size:13px;padding:14px;position:relative;overflow:hidden}
.qa-btn.sos small{font-weight:500;opacity:.85}
.hold-fill{position:absolute;left:0;bottom:0;height:4px;width:0;background:rgba(255,255,255,.9);border-radius:2px}

/* ===== Дашборд: шапка с вкладками ===== */
.dash-head{flex:none;display:flex;align-items:center;gap:16px;height:60px;padding:0 28px;background:rgba(255,255,255,.7);border-bottom:1px solid var(--border)}
.tabs{display:flex;gap:6px;background:#f3f4f6;padding:5px;border-radius:13px}
.tab{background:transparent;color:var(--sec);font-weight:700;font-size:13px;padding:9px 14px;border-radius:9px;transition:.22s;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.active{color:var(--primary);background:#fff;box-shadow:0 2px 9px rgba(20,25,35,.08)}
.top-actions{margin-left:auto;display:flex;gap:10px;align-items:center}
.auto-control{display:flex;align-items:center;gap:9px;background:#f5f6f8;border:1px solid var(--border);border-radius:999px;padding:5px 7px 5px 11px;color:var(--sec);font-size:12px;font-weight:700;white-space:nowrap}
.switch{width:37px;height:22px;padding:3px;border-radius:999px;background:#cfd4dc;transition:.2s;position:relative;flex:none}
.switch i{display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}
.switch.on{background:var(--primary)}
.switch.on i{transform:translateX(15px)}
.live{display:flex;align-items:center;gap:7px;background:#ebfbf3;color:#087c45;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700;white-space:nowrap}
.live i{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(6,193,103,.14);animation:pulse 1.8s infinite}

/* ===== Дашборд: контент и экраны ===== */
.content{flex:1;min-height:0;position:relative}
.screen{position:absolute;inset:0;padding:22px 28px 28px;overflow:auto;display:flex;flex-direction:column;opacity:0;transform:translateY(12px) scale(.99);pointer-events:none;transition:.35s ease}
.screen > *{flex:none;min-width:0}
.screen.active{opacity:1;transform:none;pointer-events:auto}

/* ===== Обзор: метрики ===== */
.overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{padding:19px;min-height:158px;position:relative;overflow:hidden}
.kpi:before{content:"";position:absolute;width:140px;height:140px;right:-42px;top:-46px;border-radius:50%;background:radial-gradient(circle,rgba(46,91,255,.10),transparent 68%)}
.kpi .icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--soft);color:var(--primary)}
.kpi .icon .ic{width:20px;height:20px}
.kpi.green .icon{background:#e7faef;color:var(--success)}
.kpi.orange .icon{background:#fff5df;color:#d88c04}
.kpi .number{font-size:40px;line-height:1;font-weight:800;letter-spacing:-1.6px;margin-top:16px}
.kpi .label{font-size:13px;color:var(--sec);margin-top:6px}
.kpi .change{font-size:12px;font-weight:700;margin-top:11px;color:var(--success)}

/* ===== Обзор: карта + статус ===== */
.main-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.82fr);gap:14px;margin-top:14px;flex:1;min-height:0}
.map-card{padding:20px;display:flex;flex-direction:column;min-height:0;min-width:0}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.section-head h2{font-size:16px;letter-spacing:-.25px;margin:0}
.section-head p{font-size:12px;color:var(--sec);margin:5px 0 0}
.tools{display:flex;gap:7px}
.tool{width:32px;height:32px;background:#fff;border:1px solid var(--border);border-radius:10px;font-weight:800;font-size:17px;display:grid;place-items:center}
.tool:hover{border-color:var(--primary);color:var(--primary)}
.map-shell{position:relative;flex:1;margin-top:18px;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#f7f9ff,#eef3ff);border:1px solid #e8edff;min-height:0;display:flex}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(46,91,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(46,91,255,.055) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.map-shell .map-layout{position:relative;z-index:1;flex:1;margin:14px}
.map-shell .district-map-wrap{border:0}
.legend{display:flex;gap:13px;flex-wrap:wrap;font-size:11px;color:var(--sec);margin-top:14px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.side-stack{display:grid;grid-template-rows:auto 1fr;gap:14px;min-height:0;min-width:0}
.signal{padding:20px;background:linear-gradient(135deg,#2E5BFF,#203fd2);border:0;color:#fff;position:relative;overflow:hidden}
.signal:before{content:"";position:absolute;right:-20%;bottom:-100%;width:240px;height:240px;border-radius:50%;border:35px solid rgba(255,255,255,.08)}
.signal small{opacity:.76;font-weight:700}
.signal .big{font-size:54px;font-weight:800;line-height:1;margin:10px 0 4px;letter-spacing:-2px}
.signal p{font-size:13px;opacity:.8;margin:0}
.progress{height:8px;background:rgba(255,255,255,.2);border-radius:10px;overflow:hidden;margin-top:18px}
.progress div{height:100%;border-radius:inherit;background:#fff;animation:grow 1.4s ease}
.feed{padding:19px;overflow:auto;min-height:0}
.feed h3{font-size:15px;margin:0 0 12px}
.feed-item{display:flex;gap:10px;padding:11px 0;border-top:1px solid var(--border);transition:.2s;cursor:pointer;text-align:left;background:transparent;width:100%}
.feed-item:hover{transform:translateX(3px)}
.feed-item:first-of-type{border-top:0}
.feed-item b{display:block;font-size:12.5px}
.feed-item span{display:block;font-size:11.5px;color:var(--sec);margin-top:3px}
.dot{width:10px;height:10px;border-radius:50%;margin-top:4px;background:var(--primary);box-shadow:0 0 0 4px rgba(46,91,255,.1);flex:none}
.dot.green{background:var(--success);box-shadow:0 0 0 4px rgba(6,193,103,.1)}
.dot.yellow{background:var(--warning);box-shadow:0 0 0 4px rgba(245,165,36,.13)}
.feed-link{margin-top:10px;width:100%;padding:10px;border-radius:11px;background:#eef3ff;color:var(--primary);font-size:12px;font-weight:800}
.feed-link:hover{background:#dfe8ff}

/* ===== Фактчек ===== */
.fake-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fake-card{padding:22px;min-height:190px;position:relative;overflow:hidden}
.fake-card:after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-70px;bottom:-85px;background:radial-gradient(circle,rgba(46,91,255,.12),transparent 67%)}
.fake-card .title{font-size:13px;color:var(--sec);font-weight:700}
.fake-card .fake-num{font-size:62px;line-height:1;letter-spacing:-3px;font-weight:850;margin-top:25px;color:var(--primary)}
.fake-card.detected .fake-num{color:#d98908}
.fake-card.resolved .fake-num{color:var(--success)}
.fake-card .note{font-size:12px;color:var(--sec);margin-top:8px}
.fake-card .tag{display:inline-block;font-size:11px;font-weight:800;padding:5px 8px;border-radius:999px;margin-top:13px;background:#eef3ff;color:var(--primary)}
.fake-card.detected .tag{background:#fff4dc;color:#bd7900}
.fake-card.resolved .tag{background:#e9fbf1;color:#07854a}
.fake-main{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;margin-top:14px}
.donut-card,.messages-card{padding:22px}
.donut-card h2,.messages-card h2{font-size:16px;margin:0}
.donut-sub{font-size:12px;color:var(--sec);margin-top:5px}
.donut-area{height:280px;display:flex;align-items:center;justify-content:center;position:relative}
.donut{width:205px;height:205px;border-radius:50%;position:relative;box-shadow:0 14px 30px rgba(46,91,255,.12)}
.donut:after{content:"";position:absolute;inset:28px;border-radius:50%;background:#fff}
.donut-center{position:absolute;z-index:2;text-align:center}
.donut-center strong{font-size:38px;letter-spacing:-2px;display:block}
.donut-center span{font-size:12px;color:var(--sec)}
.breakdown{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.breakdown span{font-size:12px;color:var(--sec);display:flex;align-items:center;gap:6px}
.breakdown i{width:9px;height:9px;border-radius:3px;background:var(--success)}
.breakdown .w{background:var(--warning)}
.breakdown .b{background:var(--primary)}

/* ===== Сообщения ===== */
.message-list{margin-top:15px}
.message{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-top:1px solid var(--border);cursor:pointer;transition:.2s}
.message:hover{transform:translateX(3px)}
.message:first-child{border-top:0}
.message .m-icon{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:11px;background:#eef3ff;color:var(--primary);font-weight:850}
.message b{font-size:13px;display:block}
.message p{font-size:11.5px;color:var(--sec);margin:4px 0 0;line-height:1.35}
.message time{margin-left:auto;color:var(--sec);font-size:11px;white-space:nowrap}
.messages-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:14px}
.messages-page-card{padding:22px}
.messages-page-card h1{font-size:24px;letter-spacing:-.7px;margin:0}
.message-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.filter{font-size:12px;color:var(--sec);font-weight:700}
.pill{border-radius:999px;padding:7px 10px;background:#eef3ff;color:var(--primary);font-size:12px;font-weight:800}
.full-list .message{padding:17px 0}
.full-list .message .m-icon{width:40px;height:40px}
.full-list .message b{font-size:14px}
.full-list .message p{font-size:12px;max-width:600px}
.message-side{padding:21px}
.message-side h3{font-size:15px;margin:0 0 16px}
.side-metric{padding:16px;border-radius:16px;background:#f6f8ff;margin-bottom:11px}
.side-metric b{font-size:30px;display:block;letter-spacing:-1px;color:var(--primary)}
.side-metric span{font-size:12px;color:var(--sec)}
.notes{font-size:12px;line-height:1.5;color:var(--sec);padding-top:8px}

/* ===== Аналитика ===== */
.analytics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hero-stat{padding:28px;min-height:230px;position:relative;overflow:hidden}
.hero-stat.primary{background:linear-gradient(135deg,#2E5BFF,#1838bc);color:#fff;border:0}
.hero-stat.primary:after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-100px;bottom:-190px;border:40px solid rgba(255,255,255,.1)}
.hero-stat h2,.hero-stat h3{margin:0;font-size:15px}
.hero-stat .huge{font-size:82px;letter-spacing:-4px;font-weight:850;line-height:1;margin-top:34px}
.hero-stat .caption{font-size:13px;opacity:.78;margin-top:10px}
.mini-trend{margin-top:19px;display:inline-block;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800;background:rgba(255,255,255,.16)}
.plain-huge{font-size:70px;letter-spacing:-3px;color:var(--primary);font-weight:850;margin-top:39px;line-height:1}
.status-row{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--sec);margin-top:18px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(6,193,103,.12);flex:none}
.chart-card{grid-column:span 3;padding:24px;min-height:265px}
.chart-title{display:flex;justify-content:space-between;align-items:center}
.chart-title h2{font-size:16px;margin:0}
.period{font-size:12px;color:var(--sec);background:#f4f5f7;padding:8px 11px;border-radius:10px}
.chart{height:180px;display:flex;align-items:end;gap:12px;padding:18px 2px 0}
.bar-wrap{height:100%;flex:1;display:flex;align-items:end;justify-content:center;position:relative}
.bar{width:100%;max-width:48px;border-radius:12px 12px 6px 6px;background:linear-gradient(180deg,#6b8cff,#2E5BFF);height:var(--h);animation:bar 1.1s cubic-bezier(.16,1,.3,1);box-shadow:0 8px 16px rgba(46,91,255,.15)}
.bar-wrap span{position:absolute;bottom:-22px;color:var(--sec);font-size:11px}

/* ===== Дашборд: модалка сообщения ===== */
.dm-modal{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(17,20,24,.32);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.25s}
.dm-modal.open{opacity:1;visibility:visible}
.dm-box{width:min(590px,100%);max-height:min(700px,90vh);overflow:auto;background:#fff;border-radius:26px;box-shadow:0 30px 80px rgba(10,20,50,.25);transform:translateY(14px) scale(.98);transition:.25s}
.dm-modal.open .dm-box{transform:none}
.dm-head{display:flex;align-items:flex-start;gap:14px;padding:22px 22px 16px;border-bottom:1px solid var(--border)}
.dm-icon{width:44px;height:44px;flex:none;border-radius:15px;background:#eef3ff;color:var(--primary);display:grid;place-items:center;font-size:20px;font-weight:850}
.dm-head h2{font-size:18px;line-height:1.25;margin:1px 0 0}
.dm-head p{font-size:12px;color:var(--sec);margin:5px 0 0}
.dm-close{margin-left:auto;width:34px;height:34px;border-radius:11px;background:#f4f5f7;font-size:20px;color:var(--sec);flex:none}
.dm-body{padding:20px 22px 24px}
.dm-text{font-size:14px;line-height:1.55;color:#374151;word-break:break-word}
.dm-note{margin-top:16px;padding:13px 14px;border-radius:13px;background:#f8f9fb;font-size:12px;line-height:1.45;color:var(--sec)}

/* ===== Дашборд: анимации ===== */
@keyframes pulse{50%{transform:scale(1.2);opacity:.6}}
@keyframes grow{from{width:0}}
@keyframes bar{from{height:0}}
@keyframes uikBlink{0%,100%{opacity:.45}50%{opacity:1}}
.map-card .map-sub{font-size:12.5px;color:var(--sec);margin-bottom:12px;min-height:17px}
.map-card .map-sub b{color:var(--text)}
.map-layout{flex:1;min-height:0;display:flex;gap:14px;align-items:stretch;position:relative}
.district-map-wrap{flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:transparent}
.district-map-svg{display:block;width:100%;height:100%;transform-origin:50% 50%}
.district-map-svg .region{fill:#E4E6F0;stroke:#FFFFFF;stroke-width:1.5;cursor:pointer;transition:fill .15s ease}
.district-map-svg .region.green{fill:#B7E6C8}
.district-map-svg .region.yellow{fill:#F5D98B}
.district-map-svg .region.red{fill:#F1A9A9}
.district-map-svg .region.gray{fill:#4B5563;opacity:1;pointer-events:none}
.district-map-svg .region:hover{fill:var(--primary)}
.district-map-svg .region.on{fill:var(--primary-dark)}
.district-map-svg .uik{fill:var(--success);stroke:rgba(255,255,255,.85);stroke-width:1;pointer-events:none;filter:drop-shadow(0 0 3px rgba(6,193,103,.9));animation:uikBlink 1.8s ease-in-out infinite}

/* Модалка района (клик по карте) */
.dm-district-box{position:relative}
.dm-district-close{position:absolute;right:18px;top:18px;width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.18);color:#fff;font-size:20px;flex:none;z-index:2}
.dm-district-hero{padding:22px;background:linear-gradient(135deg,#2E5BFF,#1838bc);color:#fff}
.dm-district-hero h2{font-size:26px;letter-spacing:-.8px;margin:0}
.dm-district-hero p{font-size:13px;opacity:.8;margin:7px 0 0}
.dm-district-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:18px 22px;border-bottom:1px solid var(--border)}
.dm-district-kpi{padding:13px;border-radius:15px;background:#f6f8ff}
.dm-district-kpi b{display:block;font-size:24px;color:var(--primary);letter-spacing:-1px}
.dm-district-kpi span{display:block;font-size:11px;color:var(--sec);margin-top:4px}
.dm-district-body{padding:18px 22px 23px}
.dm-district-body h3{font-size:14px;margin:0 0 12px}
.dm-district-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--border);font-size:13px}
.dm-district-row span{color:var(--sec)}
.dm-district-row b{font-size:13px}

.turnout,.violations{padding:16px}
.turnout h3,.violations h3{font-size:14px;margin-bottom:12px}
.turnout-bar{height:12px;background:#F0F0EE;border-radius:6px;overflow:hidden;margin-bottom:10px}
.turnout-fill{height:100%;background:linear-gradient(90deg,var(--success),var(--primary));border-radius:6px}
.turnout-stats{display:flex;justify-content:space-between;font-size:12.5px;color:var(--sec)}
.turnout-stats b{color:var(--text)}

.violation-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:14px;margin-bottom:8px}
.violation-list{max-height:180px;overflow-y:auto}
.violation-list .violation-item:last-child{margin-bottom:0}
.violation-item .sev{width:10px;height:10px;border-radius:50%;flex:none}
.sev.info{background:var(--primary)} .sev.mid{background:var(--warning)} .sev.crit{background:var(--danger)}
.violation-item .v-body{flex:1}
.violation-item .v-title{font-weight:600;font-size:13.5px}
.violation-item .v-meta{font-size:11.5px;color:var(--sec);margin-top:2px}
.violation-item .count{font-size:12px;font-weight:700;color:var(--sec);background:#F0F0EE;padding:4px 10px;border-radius:999px}

/* ===== Очередь нарушений на проверку (координатор) ===== */
.review-panel{padding:16px 16px 0}
.review-panel h3{font-size:14px;margin-bottom:12px}
.review-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--border);border-radius:14px;margin-bottom:8px;background:#fff}
.review-item .sev{width:10px;height:10px;border-radius:50%;flex:none;margin-top:4px}
.review-item .v-desc{font-size:12.5px;color:var(--sec);margin-top:4px;line-height:1.4;word-break:break-word}
.review-actions{display:flex;flex-direction:column;gap:6px;flex:none}
.review-btn{padding:7px 12px;border-radius:10px;font-size:12px;font-weight:700;border:1.5px solid var(--border);background:#fff;cursor:pointer}
.review-btn.ok{border-color:var(--success);color:#067A46}
.review-btn.no{border-color:var(--danger);color:#B3261E}

/* ===== Координатор: сетка УИК ===== */
.view-switcher{display:flex;gap:6px;padding:14px 16px 0;flex:none}
.view-tab{padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;color:var(--sec);border:1px solid transparent}
.view-tab.on{background:var(--text);color:#fff}
.view{display:none;flex-direction:column;flex:1;min-height:0}
.view.on{display:flex}

.coord-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px}
.station-card{padding:14px}
.station-card .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.station-card .st-num{font-weight:700;font-size:15px}
.station-card .st-status{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px}
.st-status.ok{background:#E6F9F0;color:#067A46}
.st-status.warn{background:#FFF6E5;color:#8A5A00}
.st-status.bad{background:#FDECEC;color:#B3261E}
.station-card .obs{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.station-card .obs .avatar{width:32px;height:32px;font-size:12px}
.station-card .obs .name{font-size:13px;font-weight:600}
.station-card .obs .status{font-size:11px;color:var(--sec)}
.station-card .metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.metric{background:#F8F8F7;border-radius:10px;padding:10px}
.metric .v{font-size:18px;font-weight:700}
.metric .l{font-size:11px;color:var(--sec);margin-top:2px}

/* Индикатор присутствия */
.presence-dot{width:9px;height:9px;border-radius:50%;flex:none}
.presence-dot.active{background:var(--success);box-shadow:0 0 0 3px rgba(6,193,103,.18)}
.presence-dot.inactive{background:var(--warning);box-shadow:0 0 0 3px rgba(245,165,36,.18)}
.presence-label{font-size:11px;font-weight:600}
.presence-label.active{color:#067A46}
.presence-label.inactive{color:#8A5A00}

/* ===== Чат ===== */
.chat-panel{width:320px;flex:none;border-left:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column}
.chat-panel.hidden{display:none}
.chat-list{padding:12px;border-bottom:1px solid var(--border);max-height:200px;overflow-y:auto}
.chat-item{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:12px;cursor:pointer;font-size:13px;font-weight:600}
.chat-item:hover{background:#F6F6F4}
.chat-item.on{background:var(--soft);color:var(--primary-dark)}
.chat-item .badge{margin-left:auto;background:var(--danger);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.ci-body{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px}
.ci-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-last{font-size:11px;color:var(--sec);font-weight:400}
.chat-head{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid var(--border);background:#fff}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px;background:#FBFBFA}
.msg .meta{font-size:11px;color:var(--sec)}
.msg .who{font-weight:700;font-size:12px}
.bubble{background:#F1F1EF;border-radius:4px 16px 16px 16px;padding:10px 13px;font-size:13px;margin-top:5px;line-height:1.5;width:fit-content;max-width:90%;word-break:break-word}
.msg.me .meta{text-align:right}
.msg.me .bubble{background:var(--soft);border-radius:16px 4px 16px 16px;margin-left:auto}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border)}
.chat-input input{flex:1;border:1px solid var(--border);border-radius:12px;padding:11px 13px;font-size:13px;outline:none}
.chat-input input:focus{border-color:var(--primary)}
.chat-input .send{background:var(--primary);color:#fff;border-color:var(--primary)}
.chat-input .send:hover{background:var(--primary-dark)}

/* ===== Нижняя навигация (мобильный адаптив наблюдателя) ===== */
.bottom-nav{display:none}
.app.mobile .bottom-nav{display:flex;position:absolute;left:0;right:0;bottom:0;height:66px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid var(--border);align-items:stretch;justify-content:space-around;padding:0 6px;z-index:100}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--sec)}
.bn-item .ic{width:21px;height:21px}
.bn-item.on{color:var(--primary)}
.fab-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:6px}
.fab{width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:-30px;box-shadow:0 6px 18px rgba(46,91,255,.4);position:relative;overflow:hidden}
.fab .ic{width:22px;height:22px}
.fab-l{font-size:10.5px;font-weight:600;color:var(--sec);margin-top:2px}

/* ===== Модалка ===== */
.modal-backdrop{position:absolute;inset:0;background:rgba(17,20,24,.45);backdrop-filter:blur(3px);z-index:2000;display:none;align-items:center;justify-content:center;padding:20px}
.modal-backdrop.on{display:flex}
.modal{width:460px;max-width:100%;max-height:92%;overflow-y:auto;background:var(--surface);border-radius:24px;padding:20px;box-shadow:0 8px 40px rgba(17,20,24,.14)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modal-title{font-size:17px;font-weight:800}
.m-label{font-size:12.5px;font-weight:700;color:var(--sec);margin:0 0 8px}
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.type-chip{padding:13px 12px;border:1.5px solid var(--border);border-radius:14px;font-size:13px;font-weight:600;text-align:left;background:#fff}
.type-chip.on{border-color:var(--primary);background:var(--soft);color:var(--primary-dark)}
.type-chip small{display:block;font-weight:500;color:var(--sec);margin-top:2px;font-size:11px}
.m-textarea{width:100%;min-height:96px;border:1.5px solid var(--border);border-radius:14px;padding:12px;font-size:13.5px;outline:none;resize:vertical}
.m-textarea:focus{border-color:var(--primary)}
.m-select{width:100%;border:1.5px solid var(--border);border-radius:14px;padding:12px;font-size:13.5px;outline:none;background:#fff}
.voters-input{flex:1;min-width:0;border:1.5px solid var(--border);border-radius:14px;padding:12px;font-size:15px;font-weight:700;outline:none}
.voters-input:focus{border-color:var(--primary)}
.modal-foot{display:flex;gap:8px;margin-top:18px}
.btn{flex:1;padding:13px;border-radius:14px;font-size:14px;font-weight:700;text-align:center}
.btn.ghost{border:1.5px solid var(--border);color:var(--sec)}
.btn.danger{background:var(--danger);color:#fff}
.btn.primary{background:var(--primary);color:#fff}

/* ===== Тосты ===== */
.toasts{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;z-index:3000;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.app.mobile .toasts{bottom:84px}
.toast{background:#141414;color:#fff;padding:11px 18px;border-radius:13px;font-size:13px;font-weight:500;box-shadow:0 8px 40px rgba(17,20,24,.14);animation:tin .25s}
.toast.ok{background:var(--success)} .toast.err{background:var(--danger)}
@keyframes tin{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.toast.out{transition:.3s;opacity:0;transform:translateY(6px)}

/* ===== Мобильный адаптив ===== */
.app.mobile .app-header{height:56px;padding:0 14px}
.app.mobile .h-hello .greet{font-size:14px}
.app.mobile .h-hello .sub{font-size:11px}
.app.mobile .layout{flex-direction:column;min-height:0;overflow:hidden}
.app.mobile .sidebar{display:none}
.app.mobile .view-switcher{display:none}
.app.mobile .chat-panel{width:100%}
.app.mobile .turnout,.app.mobile .violations{padding:12px 16px}
.app.mobile .coord-grid{grid-template-columns:1fr;padding:12px}
.app.mobile .map-layout{flex-direction:column}
.app.mobile .dash-head{padding:10px 14px;gap:8px}
.app.mobile .tabs{width:100%;justify-content:center;overflow-x:auto}
.app.mobile .tab{padding:8px 11px;font-size:12px}
.app.mobile .top-actions{margin-left:0}
.app.mobile .screen{padding:14px}
.app.mobile .overview-grid{grid-template-columns:1fr 1fr}
.app.mobile .main-grid{grid-template-columns:1fr}
.app.mobile .fake-grid{grid-template-columns:1fr}
.app.mobile .fake-main{grid-template-columns:1fr}
.app.mobile .messages-layout{grid-template-columns:1fr}
.app.mobile .analytics{grid-template-columns:1fr 1fr}
.app.mobile .chart-card{grid-column:span 2}
.app.mobile .map-shell .map-layout{margin:10px}
.app.mobile .center{padding-bottom:66px}

/* Центр как полноэкранный чат на мобильном */
.app.mobile .center.chat-open .view{display:none}
.app.mobile .chat-panel.full{position:absolute;inset:0;bottom:66px;width:auto;z-index:50;display:flex}

@media (max-width:900px){
  .dash-head{padding:0 16px}
  .screen{padding:16px}
  .overview-grid{grid-template-columns:repeat(2,1fr)}
  .main-grid{grid-template-columns:1fr}
  .side-stack{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .fake-grid{grid-template-columns:repeat(2,1fr)}
  .fake-main{grid-template-columns:1fr}
  .messages-layout{grid-template-columns:1fr}
  .analytics{grid-template-columns:repeat(2,1fr)}
  .chart-card{grid-column:span 2}
  .dm-district-kpis{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:767px){
  body{overflow:hidden}
  .top-actions .auto-control span:first-child{display:none}
  .top-actions .live{display:none}
}

/* ===== Показатели: легенда карты и индикаторы ===== */
.map-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--sec);margin-bottom:10px}
.map-legend .lg{display:inline-flex;align-items:center;gap:6px}
.lg-dot{width:10px;height:10px;border-radius:3px;display:inline-block}
.lg-dot.green{background:var(--success)}
.lg-dot.yellow{background:var(--warning)}
.lg-dot.red{background:var(--danger)}
.lg-dot.gray{background:#4B5563}

/* Числовые индикаторы: красный/чёрный/жёлтый */
.ind{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;flex:none}
.ind.red{background:var(--danger)}
.ind.black{background:#1A1A1A}
.ind.yellow{background:var(--warning);color:#4A3800}
.ind.green{background:var(--success)}

/* Сводка по региону */
.summary{padding:16px}
.summary h3{font-size:14px;margin-bottom:12px}
.indicator-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:14px;font-size:12.5px;color:var(--sec)}
.indicator-row > span:not(.ind){margin-right:10px}
.summary-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.summary-label{flex:none;width:190px;font-size:12.5px;color:var(--sec)}
.scale{flex:1;height:12px;background:#F0F0EE;border-radius:6px;overflow:hidden}
.scale-fill{height:100%;border-radius:6px}
.scale-fill.green{background:var(--success)}
.scale-fill.blue{background:var(--primary)}
.summary-val{flex:none;font-size:12px;color:var(--sec);white-space:nowrap}
.summary-val b{color:var(--text)}

/* Счётчики в списке районов */
.d-counts{display:flex;gap:4px;flex:none;align-items:center}
.dc{min-width:20px;height:20px;padding:0 5px;border-radius:6px;font-size:10.5px;font-weight:700;color:#fff;display:inline-flex;align-items:center;justify-content:center}
.dc.red{background:var(--danger)}
.dc.black{background:#1A1A1A}
.dc.yellow{background:var(--warning);color:#4A3800}
.dc.gray{background:#F0F0EE;color:var(--sec)}

/* Бейджи статуса УИК у координатора */
.st-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.st-badge{font-size:10.5px;font-weight:700;padding:4px 8px;border-radius:999px;background:#F0F0EE;color:var(--sec)}
.st-badge.on{background:#E6F9F0;color:#067A46}

/* Кнопка «Фейк» в очереди проверки */
.review-btn.fake{border-color:#1A1A1A;color:#1A1A1A}

/* Чип «Сообщение» в форме отчёта */
.type-chip.info{border-style:dashed}

/* Toggle у наблюдателя */
.toggle-btn{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1.5px solid var(--border);border-radius:12px;background:#fff;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;text-align:left}
.toggle-btn:hover{border-color:var(--primary)}
.toggle-btn:disabled{opacity:.55;cursor:default}
.toggle-pill{width:38px;height:20px;border-radius:999px;background:#E0E0DC;position:relative;flex:none;transition:background .15s ease}
.toggle-pill::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(17,20,24,.2);transition:left .15s ease}
.toggle-btn.on .toggle-pill{background:var(--success)}
.toggle-btn.on .toggle-pill::after{left:20px}

.app.mobile .summary-label{width:auto;flex:1}
.app.mobile .summary-row{flex-wrap:wrap}