/* =====================================================================
   ЕЦПВ — единая оболочка. Премиальный строгий официальный стиль.
   Палитра согласована с модулями «Протокол-48». Светлая и тёмная темы.
   ===================================================================== */
:root{
  --bg:#eef1f5; --bg2:#e6ebf1; --panel:#fff; --panel2:#f7f9fc;
  --ink:#0f1e30; --muted:#5b6a80; --faint:#8a97a8;
  --line:#dbe2ec; --line2:#e9eef4;
  --brand:#123a6b; --brand2:#1d5aa8; --brand-soft:#e8f0fb;
  --gold:#b3892f; --gold-soft:#f7efdc;
  --ok:#0f7a48; --warn:#9a6800; --err:#b0201a;
  --shadow:0 1px 2px rgba(15,27,45,.06),0 10px 30px rgba(15,27,45,.07);
  --shadow-lg:0 18px 55px rgba(15,27,45,.22);
  /* Шрифты только системные. Прежде подключались Inter и JetBrains Mono с
     fonts.googleapis.com: это внешняя зависимость (без доступа к Google интерфейс
     теряет вид), передача адресов пользователей стороннему сервису за рубежом и
     нарушение политики безопасности содержимого, которая разрешает только свои
     ресурсы. Для служебной системы избирательных комиссий ни одно из трёх
     неприемлемо. */
  --mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,"SF Mono","Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Liberation Sans",Arial,sans-serif;
  --r:12px; --r-sm:9px;
}
:root[data-theme="dark"]{
  --bg:#0b111d; --bg2:#080d16; --panel:#121b2a; --panel2:#0e1624;
  --ink:#e9eff7; --muted:#98a6bb; --faint:#697690;
  --line:#243248; --line2:#1b2536;
  --brand:#7fb0ea; --brand2:#9cc4f5; --brand-soft:#15263e;
  --gold:#d9b463; --gold-soft:#2a2415;
  --ok:#57c98a; --warn:#e0b25a; --err:#f08a84;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.4);
  --shadow-lg:0 22px 60px rgba(0,0,0,.6);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b111d; --bg2:#080d16; --panel:#121b2a; --panel2:#0e1624;
  --ink:#e9eff7; --muted:#98a6bb; --faint:#697690;
  --line:#243248; --line2:#1b2536;
  --brand:#7fb0ea; --brand2:#9cc4f5; --brand-soft:#15263e;
  --gold:#d9b463; --gold-soft:#2a2415;
  --ok:#57c98a; --warn:#e0b25a; --err:#f08a84;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.4);
  --shadow-lg:0 22px 60px rgba(0,0,0,.6);
}}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}

/* ---------- загрузка ---------- */
.booting{height:100vh;display:grid;place-items:center}
.boot{text-align:center}
.boot-mark{font-weight:800;letter-spacing:.16em;font-size:38px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.boot-txt{color:var(--muted);margin-top:10px;font-size:13px}

/* ===================== ВХОД ===================== */
.gate{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}
.gate-hero{position:relative;overflow:hidden;padding:54px 58px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;
  background:radial-gradient(900px 480px at 115% -10%,rgba(179,137,47,.30),transparent 55%),linear-gradient(160deg,#0b2547,#123a6b 46%,#1d5aa8)}
.gate-hero::after{content:"";position:absolute;inset:0;opacity:.10;background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);background-size:26px 26px}
.gate-emblem{position:relative;z-index:1;display:block;width:104px;height:auto;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.35))}
.gate-hero h1{position:relative;z-index:1;font-size:33px;line-height:1.16;margin:22px 0 12px;font-weight:800;letter-spacing:-.02em;max-width:16ch}
.gate-hero p{position:relative;z-index:1;color:rgba(255,255,255,.84);max-width:46ch;margin:0}
/* Официальная символика: эмблема ЦИК России вверху — принадлежность к системе
   избирательных комиссий. Знак платформы остаётся главным и стоит в центре. */
.gate-top{position:relative;z-index:1;display:flex;align-items:center;gap:13px;
  padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.16)}
.gate-cik{display:block;width:46px;height:auto;flex:0 0 auto}
.gate-cik-txt{color:rgba(255,255,255,.82);font-size:12.5px;line-height:1.35;font-weight:600;letter-spacing:.01em}
/* Сведения о системе — по центру полотна. */
.gate-main{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center}
.gate-form{display:flex;align-items:center;justify-content:center;padding:32px;background:var(--panel)}
.gate-card{width:100%;max-width:384px}
.gate-card .lead{font-size:23px;font-weight:800;letter-spacing:-.01em}
.gate-card .sub{color:var(--muted);font-size:13.5px;margin:6px 0 26px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.inp{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel2);transition:.15s}
.inp:focus{outline:none;border-color:var(--brand2);box-shadow:0 0 0 3px var(--brand-soft)}
.btn-primary{width:100%;padding:12px;border:0;border-radius:var(--r-sm);cursor:pointer;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:var(--shadow)}
.btn-primary:hover{filter:brightness(1.06)} .btn-primary:disabled{opacity:.55;cursor:default}
.gate-err{color:var(--err);font-size:13px;margin-top:12px;min-height:18px;font-weight:500}
@media (max-width:860px){.gate{grid-template-columns:1fr}.gate-hero{padding:32px 24px;gap:20px}.gate-hero h1{font-size:25px}}

/* ===================== КАРКАС ===================== */
.app{display:flex;flex-direction:column;height:100vh}
.topbar{display:flex;align-items:center;gap:18px;padding:0 20px;height:60px;background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand .em{width:40px;height:auto;display:block;flex:0 0 auto}
.brand .nm{font-weight:800;letter-spacing:.01em;line-height:1.05;white-space:nowrap}
.brand .nm small{display:block;font-weight:500;color:var(--muted);font-size:11px;letter-spacing:.02em;margin-top:2px}
.nav{display:flex;gap:4px;margin-left:8px;overflow-x:auto}
.nav button{border:0;background:none;cursor:pointer;color:var(--muted);font-weight:600;padding:9px 15px;border-radius:9px;white-space:nowrap}
.nav button:hover{background:var(--panel2);color:var(--ink)}
.nav button.active{background:var(--brand-soft);color:var(--brand2)}
.top-r{margin-left:auto;display:flex;align-items:center;gap:10px}
/* Герб Липецкой области — принадлежность территории, дополнение к знаку платформы. */
.top-r .coat{display:block;height:34px;width:auto;flex:0 0 auto}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--gold-soft);color:var(--gold);border-radius:99px;padding:6px 13px;font-size:12.5px;font-weight:700;white-space:nowrap}
.who{display:flex;align-items:center;gap:10px}
.who .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--brand);color:#fff;font-size:13px}
.who .info{line-height:1.1}
.who .info b{font-size:13px} .who .info span{display:block;color:var(--muted);font-size:11.5px}
.iconbtn{width:36px;height:36px;border:1px solid var(--line);background:var(--panel);border-radius:9px;cursor:pointer;color:var(--muted);display:grid;place-items:center}
.iconbtn:hover{color:var(--ink);border-color:var(--brand2)}
.iconbtn.spin{color:var(--brand2);border-color:var(--brand2)}
.iconbtn.spin{animation:ecpv-spin .7s linear}
@keyframes ecpv-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* содержимое: iframe рабочих модулей */
.stage{flex:1;min-height:0;position:relative;background:var(--bg)}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--bg)}
.stage iframe.hidden{display:none}

/* меню пользователя */
.menu{position:absolute;top:56px;right:14px;z-index:60;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);min-width:220px;overflow:hidden}
.menu button{display:flex;width:100%;gap:10px;align-items:center;border:0;background:none;cursor:pointer;padding:11px 15px;text-align:left;color:var(--ink);font-weight:500}
.menu button:hover{background:var(--panel2)}
.menu .sep{height:1px;background:var(--line)}
.menu .uinfo{padding:12px 15px;border-bottom:1px solid var(--line)}
.menu .uinfo b{display:block} .menu .uinfo span{color:var(--muted);font-size:12.5px}

/* ===================== АДМИНИСТРИРОВАНИЕ ===================== */
.admin{position:absolute;inset:0;overflow:auto;padding:24px 26px 60px}
.admin .wrap{max-width:1120px;margin:0 auto}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.section-head h2{font-size:23px;font-weight:800;letter-spacing:-.02em;margin:0}
.section-head p{color:var(--muted);margin:4px 0 0;font-size:13.5px}
.subtabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.subtabs button{border:0;background:none;cursor:pointer;color:var(--muted);font-weight:600;padding:10px 15px;border-bottom:2px solid transparent}
.subtabs button.active{color:var(--brand2);border-bottom-color:var(--brand2)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 4px;font-size:16px;font-weight:800}
.card .hint{color:var(--muted);font-size:13px;margin:0 0 14px}
.callout{border-radius:10px;padding:12px 15px;font-size:13.5px;margin-bottom:16px;border:1px solid}
.callout.warn{background:var(--gold-soft);border-color:#eecf92;color:var(--gold)}
.callout.info{background:var(--brand-soft);border-color:#bcd3ee;color:var(--brand)}
.kc{font-family:var(--mono);background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 7px;font-size:.92em}
.btn{border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 15px;font-weight:700;cursor:pointer;background:var(--panel);color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.btn:hover{border-color:var(--brand2)}
.btn.primary{border:0;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand2))}
.btn.gold{border:0;color:#3a2a06;background:linear-gradient(135deg,#d9b463,var(--gold))}
.btn.danger{color:var(--err);border-color:#f0bcb8;background:transparent}
.btn.sm{padding:6px 11px;font-size:13px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:11px 12px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:middle}
.table th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);font-weight:700;background:var(--panel2)}
.table tr:hover td{background:var(--panel2)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.mono{font-family:var(--mono)} .nowrap{white-space:nowrap} .muted{color:var(--muted)}
.role{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12px;border-radius:99px;padding:3px 10px}
.role.admin{background:var(--gold-soft);color:var(--gold)}
.role.tik{background:var(--brand-soft);color:var(--brand2)}
.role.uik{background:#f2ecfb;color:#6b3fa0}
:root[data-theme="dark"] .role.uik{background:#211a33;color:#b79ae6}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:3px 11px;font-size:12px;font-weight:700}
.badge .d{width:8px;height:8px;border-radius:50%}
.badge.on{background:#e6f5ec;color:var(--ok)} .badge.on .d{background:var(--ok)}
.badge.off{background:var(--panel2);color:var(--muted)} .badge.off .d{background:var(--faint)}
:root[data-theme="dark"] .badge.on{background:#122a1f}

/* аудит */
.audit-row{display:grid;grid-template-columns:160px 140px 1fr;gap:12px;padding:9px 12px;border-bottom:1px solid var(--line2);font-size:13px}
.audit-row .ts{font-family:var(--mono);color:var(--muted);font-size:12px}
.audit-row .who2{font-weight:600}

/* модальное окно */
.scrim{position:fixed;inset:0;background:rgba(6,12,22,.55);display:grid;place-items:center;z-index:90;padding:20px}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:520px;max-height:90vh;overflow:auto}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--line)}
.modal-h h3{margin:0;font-size:17px;font-weight:800}
.modal-b{padding:20px} .modal-f{padding:15px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
.x{width:34px;height:34px;border:0;background:var(--panel2);border-radius:9px;cursor:pointer;color:var(--muted);font-size:18px}
.check{display:flex;gap:8px;align-items:center;font-size:14px;margin-top:8px}

/* уведомления */
.toasts{position:fixed;right:18px;bottom:18px;z-index:100;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--ink);color:var(--panel);padding:12px 16px;border-radius:10px;box-shadow:var(--shadow-lg);font-size:13.5px;font-weight:500;max-width:360px;animation:tin .2s ease}
.toast.ok{background:var(--ok);color:#fff} .toast.err{background:var(--err);color:#fff}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.empty{text-align:center;color:var(--muted);padding:44px 20px}
.hidden{display:none!important}

@media (max-width:720px){
  .topbar{gap:10px;padding:0 12px}
  .brand .nm small{display:none}
  .who .info{display:none}
  .admin{padding:16px 12px 50px}
}