:root{
  --bg:#f2f5f7; --card:#fff; --sunk:#e9eef2; --raise:#f7fafc;
  --tx:#0d1317; --tx2:#4a5661; --tx3:#78848f;
  --line:#dce3e9; --line2:#c9d3db;
  --accent:#0d7490; --accent-tx:#fff; --ok:#177a4c; --bad:#b0362f;
  --sh:0 1px 2px rgba(13,19,23,.04), 0 3px 10px rgba(13,19,23,.05);
  --sh-h:0 2px 4px rgba(13,19,23,.06), 0 12px 26px rgba(13,19,23,.10);
  --sh-modal:0 24px 60px rgba(13,19,23,.24);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#090e12; --card:#131b21; --sunk:#0e151a; --raise:#1a242c;
    --tx:#e7eef4; --tx2:#a7b4bf; --tx3:#707e8a;
    --line:#1f2a33; --line2:#2c3944;
    --accent:#22d3ee; --accent-tx:#04222a; --ok:#4ec78d; --bad:#e2706a;
    --sh:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.3);
    --sh-h:0 2px 6px rgba(0,0,0,.5), 0 16px 32px rgba(0,0,0,.42);
    --sh-modal:0 28px 70px rgba(0,0,0,.62);
  }
}
:root[data-theme="light"]{
  --bg:#f2f5f7; --card:#fff; --sunk:#e9eef2; --raise:#f7fafc;
  --tx:#0d1317; --tx2:#4a5661; --tx3:#78848f;
  --line:#dce3e9; --line2:#c9d3db;
  --accent:#0d7490; --accent-tx:#fff; --ok:#177a4c; --bad:#b0362f;
  --sh:0 1px 2px rgba(13,19,23,.04), 0 3px 10px rgba(13,19,23,.05);
  --sh-h:0 2px 4px rgba(13,19,23,.06), 0 12px 26px rgba(13,19,23,.10);
  --sh-modal:0 24px 60px rgba(13,19,23,.24);
}
:root[data-theme="dark"]{
  --bg:#090e12; --card:#131b21; --sunk:#0e151a; --raise:#1a242c;
  --tx:#e7eef4; --tx2:#a7b4bf; --tx3:#707e8a;
  --line:#1f2a33; --line2:#2c3944;
  --accent:#22d3ee; --accent-tx:#04222a; --ok:#4ec78d; --bad:#e2706a;
  --sh:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.3);
  --sh-h:0 2px 6px rgba(0,0,0,.5), 0 16px 32px rgba(0,0,0,.42);
  --sh-modal:0 28px 70px rgba(0,0,0,.62);
}

*{box-sizing:border-box; min-width:0}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--tx);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.5; overflow-x:hidden;
}
.boot{padding:60px 20px; text-align:center; color:var(--tx3); font-size:.9rem}

/* ─── общие элементы ─── */
button{font:inherit; cursor:pointer}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 16px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--tx); font-size:.88rem; font-weight:550;
  transition:border-color .15s, background .15s, transform .1s;
}
.btn:hover{border-color:var(--line2)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn.pri{background:var(--accent); border-color:var(--accent); color:var(--accent-tx)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.danger{color:var(--bad); border-color:color-mix(in srgb,var(--bad) 30%,var(--line))}
.btn.ico-only{padding:9px; border-radius:9px}
.btn[disabled]{opacity:.55; cursor:default; transform:none}

.field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.field label{font-size:.78rem; color:var(--tx2); font-weight:550}
.field input, .field select{
  width:100%; padding:11px 13px; font:inherit; font-size:.92rem;
  border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--tx);
}
.field input:focus, .field select:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.field .hint{font-size:.74rem; color:var(--tx3)}
.check{display:flex; align-items:center; gap:9px; font-size:.86rem; color:var(--tx2); cursor:pointer}
.check input{width:17px; height:17px; accent-color:var(--accent); flex:none}
.err{color:var(--bad); font-size:.83rem; margin:0 0 12px; min-height:1.2em}

/* ─── экран входа ─── */
.gate{min-height:100vh; display:grid; place-items:center; padding:24px 16px}
.gate-card{
  width:100%; max-width:380px; background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:30px 26px; box-shadow:var(--sh-h);
}
.gate-logo{display:flex; align-items:center; gap:11px; margin-bottom:6px}
.gate h1{margin:0; font-size:1.2rem; font-weight:650; letter-spacing:-.02em}
.gate h1 em{font-style:normal; color:var(--accent)}
.gate .lead{margin:0 0 20px; color:var(--tx3); font-size:.85rem}
.gate .btn{width:100%; padding:12px}

/* ─── шапка пульта ─── */
.wrap{width:100%; max-width:1120px; margin:0 auto; padding:24px 16px 56px}
.top{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:18px}
.logo{display:flex; align-items:center; gap:10px}
.logo h1{margin:0; font-size:1.16rem; font-weight:650; letter-spacing:-.02em; white-space:nowrap}
.logo h1 em{font-style:normal; color:var(--accent)}
.spacer{flex:1 1 auto}
.state{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:99px;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--sh);
  font-size:.77rem; color:var(--tx2); font-variant-numeric:tabular-nums;
}
.state .pulse{width:7px; height:7px; border-radius:50%; background:var(--tx3); flex:none}
.state.ok .pulse{background:var(--ok)}
.state.bad{color:var(--bad); border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.state.bad .pulse{background:var(--bad); animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .state.bad .pulse{animation:none} }

.search{position:relative; margin-bottom:22px}
.search .mag{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--tx3); pointer-events:none}
#q{
  width:100%; padding:12px 14px 12px 42px; font:inherit; font-size:.93rem;
  border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--tx);
  box-shadow:var(--sh);
}
#q::placeholder{color:var(--tx3)}
#q:focus{outline:none; border-color:var(--accent);
  box-shadow:var(--sh), 0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
#q::-webkit-search-cancel-button{-webkit-appearance:none}

/* ─── плитки ─── */
.grp{margin-bottom:26px}
.grp-head{margin-bottom:10px; padding-bottom:7px; border-bottom:1px solid var(--line)}
.grp-head h2{margin:0; font-size:.71rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); overflow-wrap:anywhere}
.grp-head p{margin:2px 0 0; color:var(--tx3); font-size:.77rem; overflow-wrap:anywhere}

.tiles{display:grid; gap:11px; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.tile{position:relative}
.tile a{
  display:flex; gap:12px; align-items:center; padding:13px 14px; text-decoration:none;
  color:inherit; background:var(--card); border:1px solid var(--line); border-radius:13px;
  box-shadow:var(--sh); transition:transform .13s, box-shadow .18s, border-color .18s;
}
.tile a:hover{transform:translateY(-2px); box-shadow:var(--sh-h); border-color:var(--line2)}
.tile a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .tile a{transition:none} .tile a:hover{transform:none} }

.ico{width:42px; height:42px; flex:0 0 42px; border-radius:10px; display:grid;
  place-items:center; overflow:hidden; background:var(--raise); border:1px solid var(--line)}
.ico img{width:28px; height:28px; object-fit:contain; display:block}
.ico.mono{border:none; color:#fff; font-weight:700; font-size:.92rem; letter-spacing:-.02em}
.meat{flex:1 1 auto; min-width:0}
.title{display:flex; align-items:center; gap:7px}
.dot{width:7px; height:7px; border-radius:50%; flex:0 0 7px; background:var(--ok)}
.dot.down{background:var(--bad); box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 20%,transparent)}
.nm{font-weight:600; font-size:.93rem; line-height:1.3; overflow-wrap:anywhere}
.sub{color:var(--tx3); font-size:.775rem; line-height:1.35; margin-top:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:anywhere}
.tile.offline a{border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.tile.offline .sub{color:var(--bad); -webkit-line-clamp:1}

.edit{
  position:absolute; top:6px; right:6px; width:26px; height:26px; padding:0;
  border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--tx3);
  display:grid; place-items:center; opacity:0; transition:opacity .15s;
}
.tile:hover .edit, .edit:focus-visible{opacity:1}
.edit:hover{color:var(--tx); border-color:var(--line2)}
@media (hover:none){ .edit{opacity:.6} }

.none{color:var(--tx3); padding:20px 2px; font-size:.9rem}
.hint-bar{margin-top:4px; padding-top:15px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:7px 15px; color:var(--tx3); font-size:.76rem}
kbd{display:inline-block; min-width:19px; text-align:center; background:var(--sunk);
  border:1px solid var(--line2); border-bottom-width:2px; border-radius:6px;
  padding:0 5px; font:inherit; font-size:.86em; color:var(--tx2)}

/* ─── модальные окна ─── */
.veil{position:fixed; inset:0; background:rgba(5,10,14,.55); backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:20px 16px; z-index:20; overflow-y:auto}
.modal{
  width:100%; max-width:440px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:22px; box-shadow:var(--sh-modal); margin:auto;
}
.modal h3{margin:0 0 4px; font-size:1.02rem; font-weight:650}
.modal .lead{margin:0 0 18px; color:var(--tx3); font-size:.83rem}
.modal-foot{display:flex; gap:9px; margin-top:18px; flex-wrap:wrap}
.modal-foot .btn{flex:1 1 auto}
.modal-foot .btn.ghost{flex:0 0 auto}
.sep{height:1px; background:var(--line); margin:20px 0}

@media (max-width:600px){
  .wrap{padding:18px 13px 44px}
  .state{order:5}
  .ico{width:38px; height:38px; flex-basis:38px}
  .ico img{width:25px; height:25px}
}

/* ─── второй фактор ─── */
.qr{display:grid; place-items:center; padding:14px; background:#fff; border:1px solid var(--line);
  border-radius:12px}
.qr img{display:block; width:100%; max-width:210px; height:auto; image-rendering:pixelated}
.secret{background:var(--sunk); border:1px solid var(--line); border-radius:9px; padding:9px 11px;
  text-align:center; margin-bottom:14px}
.secret code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem;
  letter-spacing:.06em; color:var(--tx2); overflow-wrap:anywhere}
.codes{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:7px}
.codes code{
  display:block; text-align:center; padding:8px 4px; background:var(--sunk);
  border:1px solid var(--line); border-radius:8px; font-size:.85rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--tx);
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}