:root{
  --bg:#0e1218; --card:#151a22; --head-bg:#131822; --raise:#1d232d;
  --line:#252c37; --line2:#333b48;
  --txt:#e8edf3; --txt2:#b3bcc9; --dim:#8892a1; --dim2:#68717f;
  /* цветовой код маршрутов: мята — боевой и живое, сталь — запасной и наготове */
  --accent:#6fe0a8; --accent-dark:#57c791; --accent-soft:rgba(111,224,168,.11);
  --accent-line:rgba(111,224,168,.34);
  --steel:#74a9e6; --steel-soft:rgba(116,169,230,.11); --steel-line:rgba(116,169,230,.34);
  --danger:#ec7f74; --danger-soft:rgba(236,127,116,.12); --danger-line:rgba(236,127,116,.34);
  --shadow:0 1px 0 rgba(255,255,255,.028) inset, 0 20px 44px -30px rgba(0,0,0,.95);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
     font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
     font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased;
     background-image:
       radial-gradient(900px 380px at 50% -8%, rgba(111,224,168,.07) 0%, transparent 72%),
       radial-gradient(760px 440px at 96% 106%, rgba(116,169,230,.06) 0%, transparent 70%);
     background-attachment:fixed}

/* фон: бегущие волны пульса — от них и название */
.bg{position:fixed;inset:auto 0 0 0;height:min(32vh,260px);pointer-events:none;z-index:0;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);
    mask-image:linear-gradient(180deg,transparent,#000 55%)}
.bg-l{position:absolute;left:0;bottom:0;width:200%;height:100%;will-change:transform}
.bg-l svg{width:100%;height:100%;display:block}
.bg path{fill:none;stroke:var(--accent);vector-effect:non-scaling-stroke;stroke-linejoin:round}
/* сдвиг ровно на половину: вторая половина повторяет первую, стык не виден */
.bg-slow{animation:ap-drift 96s linear infinite}
.bg-slow path{stroke:var(--steel);stroke-width:1.6;opacity:.05}
.bg-fast{animation:ap-drift 54s linear infinite}
.bg-fast path{stroke:var(--accent);stroke-width:1.4;opacity:.07}
@keyframes ap-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){ .bg-l{animation:none} }
header,main,.toasts{position:relative;z-index:1}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code,.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:12.5px}

header{display:flex;align-items:center;gap:11px;padding:0 26px;height:56px;
       border-bottom:1px solid var(--line);background:var(--head-bg);position:sticky;top:0;z-index:10}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
              background:linear-gradient(90deg,var(--accent-line),transparent 55%)}
header .logo{width:30px;height:30px;flex:none;border-radius:8px;display:block}
.brand{font-weight:700;font-size:16.5px;letter-spacing:-.01em;color:var(--txt);line-height:1.15}
.brand span{color:var(--accent)}
.brand small{display:block;font-weight:500;font-size:9.5px;letter-spacing:.14em;
             text-transform:uppercase;color:var(--dim2)}
header .brand{flex:1}
/* меню по центру и заметное: сегменты, а не три бледные ссылки в углу */
header nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:2px;
           font-size:13.5px;background:var(--raise);border:1px solid var(--line);
           border-radius:9px;padding:3px}
header nav a,header nav button{color:var(--dim);padding:6px 16px;border-radius:7px;font-weight:550;
             white-space:nowrap;transition:color .12s,background .12s;font:inherit;font-weight:550;
             border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
header nav a:hover,header nav button:hover{color:var(--txt);background:rgba(255,255,255,.05);
                                           text-decoration:none}
header nav a.cur,header nav button.cur{color:var(--accent);background:var(--accent-soft);
                 box-shadow:inset 0 0 0 1px var(--accent-line)}
.chev{width:9px;height:6px;opacity:.7;transition:transform .16s}
button.opened .chev{transform:rotate(180deg)}

.menu{position:relative}
.menu-p{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);
        min-width:270px;max-width:min(340px,calc(100vw - 32px));padding:6px;z-index:30;
        background:var(--card);border:1px solid var(--line2);border-radius:11px;
        box-shadow:0 26px 60px -22px rgba(0,0,0,.95);animation:ap-drop .16s ease-out}
@keyframes ap-drop{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
.menu-p a{display:block;padding:9px 12px;border-radius:7px;white-space:normal}
.menu-p a b{display:block;font-size:13.5px;font-weight:600;color:var(--txt)}
.menu-p a span{display:block;font-size:11.5px;color:var(--dim2);overflow:hidden;
               text-overflow:ellipsis;white-space:nowrap}
.menu-p a:hover{background:var(--raise)}
.menu-p a.cur{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.menu-p a.cur b{color:var(--accent)}
.menu-empty{padding:11px 12px;font-size:13px;color:var(--dim2)}
.menu-add{display:flex !important;align-items:center;gap:8px;margin-top:5px;
          border-top:1px solid var(--line);border-radius:0 0 7px 7px;
          padding-top:11px;color:var(--accent);font-size:13.5px;font-weight:600}
.menu-plus{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;flex:none;
           background:var(--accent-soft);color:var(--accent)}
.menu-plus svg{width:11px;height:11px;display:block}

/* профиль */
.me{display:flex;align-items:center;gap:9px;padding:5px 13px 5px 6px;border-radius:999px;
    border:1px solid var(--line2);background:var(--card);color:var(--txt);font:inherit;
    font-size:13.5px;font-weight:550;cursor:pointer;transition:border-color .12s,background .12s}
.me:hover{border-color:var(--accent-line);background:var(--raise)}
.me-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
       background:var(--accent);color:#0e1218;font-weight:800;font-size:13px;letter-spacing:-.02em}
.me-av.big{width:44px;height:44px;font-size:20px}
.me-head{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid var(--line);
         border-radius:9px;background:var(--raise);margin-bottom:16px}
.me-head b{display:block;font-size:14.5px}
.me-head span{font-size:12.5px;color:var(--dim)}
.me-tbl td:first-child{color:var(--txt2)}
.me-tbl td:last-child{text-align:right;font-weight:600}
@media (max-width:820px){
  header nav{position:static;transform:none;margin-left:auto}
  header .brand{flex:none}
  .me-t{display:none}
  .me{padding:5px}
}

main{max-width:1180px;margin:0 auto;padding:26px}
h1{font-size:23px;margin:0 0 3px;letter-spacing:-.015em;font-weight:700}
h2{font-size:15px;margin:0 0 15px;font-weight:650;letter-spacing:-.005em}
.sub{color:var(--dim);margin:0 0 22px;font-size:13.5px}

.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:20px 22px;
      margin-bottom:16px;box-shadow:var(--shadow)}

/* ---------- шапка панели ---------- */
.deck{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;
      padding:20px 22px 18px;margin-bottom:16px;box-shadow:var(--shadow);overflow:hidden}
/* пульс сервиса — общий онлайн по всей панели */
.pulsebox{margin-top:14px;border:1px solid var(--line);border-radius:9px;background:var(--raise);
          padding:11px 14px 0;overflow:hidden}
.pulsebox-l{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.pulsebox-l span:first-child{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
                             font-weight:700;color:var(--accent)}
.pulsebox-l span:last-child{font-size:11.5px;color:var(--dim2)}
.pulse{display:block;width:100%;height:64px;pointer-events:none}
.pulse polyline{fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linejoin:round;
                stroke-linecap:round;vector-effect:non-scaling-stroke}
.pulse polygon{fill:var(--accent);opacity:.1;stroke:none}
.deck-top{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin:22px 0 18px;position:relative}
.deck-top h1{margin:0 0 2px}
.deck-top .pill{margin-left:auto}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
      background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.kpi{background:var(--card);padding:13px 16px;display:flex;flex-direction:column;gap:2px}
.kpi-n{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.15;
       font-variant-numeric:tabular-nums}
.kpi-n i{font-style:normal;font-size:14px;font-weight:500;color:var(--dim2)}
.kpi-n.ok{color:var(--accent)} .kpi-n.muted{color:var(--dim)}
.kpi-l{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim2);font-weight:600}

/* ---------- маршрут трафика ---------- */
.spine-route{border-left:2px solid var(--accent-line)}
.route{display:flex;align-items:stretch;gap:0;margin-bottom:18px}
.route-side{flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;padding:12px 14px;
            display:flex;flex-direction:column;gap:3px;background:var(--raise);opacity:.55;
            transition:opacity .2s,border-color .2s,background .2s}
.route-side b{font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.route-tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--dim2)}
.route-meta{font-size:12px;color:var(--dim)}
.route-side.live{opacity:1}
.route-side.primary.live{border-color:var(--accent-line);background:var(--accent-soft)}
.route-side.primary.live .route-tag{color:var(--accent)}
.route-side.backup.live{border-color:var(--steel-line);background:var(--steel-soft)}
.route-side.backup.live .route-tag{color:var(--steel)}
.route-arrow{display:flex;align-items:center;padding:0 8px;flex:none;color:var(--line2)}
.route-arrow svg{display:block;width:40px;height:12px}
.route-form{display:grid;gap:12px}
.route-form>div{min-width:0}
.route-form input,.route-form select{margin-bottom:0}
.route-form .btn{margin-bottom:1px}

/* ---------- живые элементы ---------- */
.pill.live{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft);
           display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.pill.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
                   animation:ap-pulse 2.2s ease-in-out infinite}
@keyframes ap-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.bump{animation:ap-bump .5s ease-out}
@keyframes ap-bump{0%{color:var(--accent)}100%{color:inherit}}
.num{font-variant-numeric:tabular-nums}
.sparkcell{width:110px}
.spark{width:92px;height:24px;display:block;overflow:visible}
.spark polyline{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linejoin:round;
                stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.85}
tr:hover .spark polyline{opacity:1}
@media (prefers-reduced-motion:reduce){
  .pill.live::before,.bump,.pulse-head circle{animation:none}
}
.row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.row>.card{flex:1;min-width:320px}

label{display:block;font-size:12.5px;color:var(--txt2);margin:0 0 5px;font-weight:500}
input,select{width:100%;padding:9px 11px;border-radius:6px;border:1px solid var(--line2);
             background:#121418;color:var(--txt);font:inherit;font-size:14px;margin-bottom:13px}
input::placeholder{color:var(--dim2)}
input:focus,select:focus{outline:none;border-color:var(--accent-line);
                         box-shadow:0 0 0 3px var(--accent-soft)}
select{appearance:none;
       background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
                        linear-gradient(135deg,var(--dim) 50%,transparent 50%);
       background-position:calc(100% - 17px) 17px,calc(100% - 12px) 17px;
       background-size:5px 5px,5px 5px;background-repeat:no-repeat}

.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:6px;
     border:1px solid var(--line2);background:var(--raise);color:var(--txt);font:inherit;
     font-size:13.5px;font-weight:550;cursor:pointer;transition:background .12s,border-color .12s}
.btn:hover{background:#2a2f38;border-color:#4a5160;text-decoration:none}
.btn.primary{background:var(--accent);color:#121418;border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn.danger{color:var(--danger);border-color:var(--danger-line)}
.btn.sm{padding:6px 12px;font-size:13px}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim2);
   font-weight:600;padding:0 10px 9px}
td{padding:10px;border-top:1px solid var(--line)}
tr:hover td{background:rgba(255,255,255,.022)}

.pill{display:inline-block;padding:2px 9px;border-radius:4px;font-size:11.5px;font-weight:600;
      border:1px solid transparent}
.pill.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.pill.off{background:var(--raise);color:var(--dim);border-color:var(--line2)}
.pill.bad{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.pill.kind{background:var(--raise);color:var(--dim);border-color:var(--line2)}

.note{padding:11px 15px;border-radius:7px;margin-bottom:16px;font-size:13.5px;border:1px solid}
.note.ok{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.note.err{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger)}

.plan{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;
      padding:20px 22px;margin-bottom:16px;background:var(--card)}
.plan h2{color:var(--txt)}
.plan ul{margin:5px 0 15px;padding-left:19px;color:var(--txt2)}
.plan li{margin:3px 0}
.warn{color:var(--danger);font-weight:600}

.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:7px;margin-bottom:13px}
.checks label{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid var(--line);
              border-radius:6px;color:var(--txt);font-size:13.5px;margin:0;cursor:pointer;
              font-weight:400;background:#171a1f}
.checks label:hover{border-color:var(--line2);background:var(--raise)}
.checks input{width:auto;margin:0;accent-color:var(--accent)}
.empty{color:var(--dim);font-size:13.5px;padding:8px 0}

.hint{background:#171a1f;border:1px solid var(--line);border-radius:7px;padding:12px 15px;
      margin:0 0 12px;color:var(--txt2);font-size:13px;line-height:1.6}
.hint b{color:var(--txt);font-weight:600}
.hint ol{margin:6px 0 0;padding-left:17px}
.hint li{margin:3px 0}
.switchbox{display:flex;align-items:flex-start;gap:9px;margin-bottom:14px;color:var(--txt);
           font-size:14px;cursor:pointer;font-weight:400}
.switchbox input{width:auto;margin:3px 0 0;flex:none;accent-color:var(--accent)}
.divider{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}

/* ---------- действия: настройка живёт в самой кнопке ---------- */
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:16px}
.actions form{display:contents}
.act{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
     padding:12px 15px;border:1px solid var(--line2);border-radius:9px;background:var(--card);
     color:var(--txt);font:inherit;text-align:left;cursor:pointer;
     transition:border-color .14s,background .14s,transform .14s}
.act:hover:not(:disabled){border-color:var(--accent-line);background:var(--raise);transform:translateY(-1px)}
.act:disabled{opacity:.45;cursor:not-allowed}
.act-t{font-size:14px;font-weight:650}
.act-v{font-size:12px;color:var(--dim)}
.act.on{border-color:var(--accent-line);background:var(--accent-soft)}
.act.on .act-v{color:var(--accent);font-weight:600}
.act.on .act-t::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
                      background:var(--accent);margin-left:7px;vertical-align:middle}
.act.go{border-color:var(--accent);background:var(--accent);color:#0e1218}
.act.go .act-v{color:rgba(14,18,24,.72)}
.act.go:hover:not(:disabled){background:var(--accent-dark);border-color:var(--accent-dark)}

/* ---------- окна настроек ---------- */
.dlg{width:min(560px,calc(100vw - 32px));border:1px solid var(--line2);border-radius:12px;
     background:var(--card);color:var(--txt);padding:22px 24px 20px;position:relative;
     box-shadow:0 40px 90px -30px rgba(0,0,0,.95)}
.dlg.wide{width:min(760px,calc(100vw - 32px))}
.dlg::backdrop{background:rgba(6,9,13,.72)}
.dlg h2{margin:0 0 4px;font-size:17px}
.dlg-sub{color:var(--dim);font-size:13px;margin:0 0 18px}
.dlg-x{position:absolute;top:12px;right:13px;width:28px;height:28px;border-radius:7px;
       border:1px solid transparent;background:none;color:var(--dim);font-size:20px;line-height:1;
       cursor:pointer}
.dlg-x:hover{background:var(--raise);color:var(--txt)}
.dlg-foot{display:flex;gap:9px;justify-content:flex-end;margin-top:18px;
          border-top:1px solid var(--line);padding-top:16px}
.dlg .plan{margin:0 0 4px;background:var(--raise)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.grp{border-top:1px solid var(--line);padding-top:15px;margin-top:15px}
.grp-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.newgrp{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.newgrp>div{flex:1;min-width:150px}
.newgrp input,.newgrp select{margin-bottom:0}
@media (max-width:560px){ .grid2{grid-template-columns:1fr} }

/* ---------- уведомления ---------- */
.toasts{position:fixed;top:68px;right:20px;z-index:60;display:flex;flex-direction:column;gap:9px;
        max-width:min(420px,calc(100vw - 40px));pointer-events:none}
.toast{pointer-events:auto;cursor:pointer;padding:12px 16px;border-radius:9px;font-size:13.5px;
       border:1px solid;background:var(--card);box-shadow:0 18px 40px -16px rgba(0,0,0,.85);
       animation:ap-slide .28s cubic-bezier(.2,.8,.3,1);transition:opacity .35s,transform .35s}
.toast::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
               margin-right:9px;vertical-align:middle;background:currentColor}
.toast.ok{border-color:var(--accent-line);color:var(--accent)}
.toast.err{border-color:var(--danger-line);color:var(--danger)}
.toast.err::after{content:" — нажми, чтобы скрыть";color:var(--dim2);font-size:12px}
.toast.gone{opacity:0;transform:translateX(14px)}
@keyframes ap-slide{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}

/* кнопка в работе — видно, что нажатие поймано */
.act.busy{pointer-events:none;position:relative;overflow:hidden}
.act.busy .act-v{color:var(--accent)}
.act.busy::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:38%;
                 background:var(--accent);animation:ap-run 1.05s ease-in-out infinite}
@keyframes ap-run{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@media (prefers-reduced-motion:reduce){
  .toast{animation:none} .act.busy::after{animation:none;width:100%}
}

/* объяснение «зачем это» — в окне настройки, а не в документации */
.why{border-left:2px solid var(--accent-line);padding:2px 0 2px 15px;margin:0 0 20px}
.why p{margin:0 0 11px;font-size:13px;line-height:1.65;color:var(--txt2)}
.why p:last-child{margin-bottom:0}
.why b{color:var(--txt);font-weight:650}

/* возврат туда, откуда пришли */
.back{display:inline-flex;align-items:center;gap:6px;margin-bottom:16px;font-size:13.5px;
      color:var(--dim);padding:6px 12px;border:1px solid var(--line);border-radius:6px;
      background:var(--card)}
.back:hover{color:var(--txt);border-color:var(--line2);text-decoration:none}

.grp-del{margin-left:auto}

/* ---------- дверь: первый запуск, вход, активация ---------- */
body.gate{display:grid;place-items:center;min-height:100vh;padding:24px}
.gate-box{position:relative;z-index:1;width:min(440px,100%);background:var(--card);
          border:1px solid var(--line2);border-radius:14px;padding:26px 28px;
          box-shadow:0 40px 90px -34px rgba(0,0,0,.95)}
.gate-brand{display:flex;align-items:center;gap:12px;margin-bottom:20px;
            padding-bottom:18px;border-bottom:1px solid var(--line)}
.gate-brand .logo{width:42px;height:42px;flex:none;border-radius:11px;display:block}
.gate-sub{color:var(--dim);font-size:13px;line-height:1.6;margin:0 0 18px}
.gate-box textarea{width:100%;padding:10px 12px;border-radius:7px;border:1px solid var(--line2);
                   background:#121418;color:var(--txt);font-family:ui-monospace,Menlo,monospace;
                   font-size:12px;line-height:1.5;resize:vertical;margin-bottom:14px}
.gate-box textarea:focus{outline:none;border-color:var(--accent-line);
                         box-shadow:0 0 0 3px var(--accent-soft)}
.btn.wide{width:100%;justify-content:center;padding:11px 20px}
.gate-out{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);text-align:center}