/* YPtun Panel — стили панели (редакция 5: чёрно-белая). Спецификация: docs/DESIGN.md. Цвета только через переменные. */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{color-scheme:dark;
--bg:#000;--surface:#0a0a0a;--surface-2:rgba(255,255,255,.05);--surface-3:rgba(255,255,255,.09);--field:rgba(255,255,255,.04);--hover:rgba(255,255,255,.06);
--border:rgba(255,255,255,.13);--border-hi:rgba(255,255,255,.28);
--text:#b4b4b4;--text-strong:#fff;--text-dim:#8a8a8a;--text-faint:#5c5c5c;
--accent-rgb:255,255,255;--accent:#fff;--accent-hi:#fff;--accent-lo:#d0d0d0;--accent-ink:#000;--accent-soft:rgba(var(--accent-rgb),.12);--ring:rgba(var(--accent-rgb),.35);
--violet-rgb:200,200,200;--grad:linear-gradient(135deg,#fff 0%,#d9d9d9 100%);
--success-rgb:74,186,141;--danger-rgb:226,110,124;--warning-rgb:217,164,65;
--success:rgb(var(--success-rgb));--danger:rgb(var(--danger-rgb));--warning:rgb(var(--warning-rgb));
--success-soft:rgba(var(--success-rgb),.14);--danger-soft:rgba(var(--danger-rgb),.14);--warning-soft:rgba(var(--warning-rgb),.14);
--glass:linear-gradient(180deg,#0f0f0f,#0a0a0a);--glass-solid:#0a0a0a;
--aur1:rgba(255,255,255,0);--aur2:rgba(255,255,255,0);--aur3:rgba(255,255,255,0);--noise:0;
--scrim:rgba(0,0,0,.72);--on-danger:#fff;
--shadow-card:none;--shadow-2:0 24px 64px -12px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.14);
--font:"Onest","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,Consolas,"Liberation Mono",monospace;
--side:240px;--r:10px;--r-lg:16px}
@media(prefers-color-scheme:light){:root{color-scheme:light;
--bg:#fff;--surface:#fff;--surface-2:rgba(0,0,0,.04);--surface-3:rgba(0,0,0,.07);--field:#fff;--hover:rgba(0,0,0,.05);
--border:rgba(0,0,0,.14);--border-hi:rgba(0,0,0,.3);
--text:#3a3a3a;--text-strong:#000;--text-dim:#6b6b6b;--text-faint:#9a9a9a;
--accent-rgb:0,0,0;--accent:#000;--accent-hi:#000;--accent-lo:#333;--accent-ink:#fff;--grad:linear-gradient(135deg,#000 0%,#333 100%);
--success-rgb:20,138,96;--danger-rgb:200,60,80;--warning-rgb:166,108,12;
--glass:linear-gradient(180deg,#fff,#fff);--glass-solid:#fff;
--scrim:rgba(0,0,0,.4);--shadow-card:none;--shadow-2:0 24px 60px -12px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.1)}}

*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--border-hi) transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 var(--font);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;min-height:100vh}
/* фон: медленно плывущее северное сияние и лёгкое зерно */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(48% 42% at 14% 10%,var(--aur1),transparent 70%),radial-gradient(44% 40% at 90% 6%,var(--aur2),transparent 70%),radial-gradient(52% 46% at 72% 104%,var(--aur3),transparent 70%)}
::selection{background:rgba(var(--accent-rgb),.38);color:var(--text-strong)}
a{color:var(--accent-hi);text-decoration:none;border-radius:4px;transition:color .15s}a:hover{color:var(--text-strong)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
.ico{flex:none}
.brand-logo{display:block;object-fit:contain;border-radius:9px}

/* ---------- меню ---------- */
.side{position:fixed;inset:0 auto 0 0;width:var(--side);background:linear-gradient(180deg,#0b0b0b,#000);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:16px 12px 12px;z-index:5;overflow-y:auto}
@media(prefers-color-scheme:light){.side{background:linear-gradient(180deg,#fff,#f6f6f6)}}
.brand{display:flex;align-items:center;gap:11px;padding:2px 8px 14px}
.brand .mark{flex:none;display:grid;place-items:center;filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.35))}
.brand b{display:block;font-size:14px;font-weight:650;line-height:1.2;letter-spacing:-.01em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.brand small{color:var(--text-dim);font-size:12px}
.cmdk-btn{box-sizing:border-box;max-width:100%;overflow:hidden;display:flex;align-items:center;gap:9px;width:100%;min-height:36px;margin:0 0 6px;padding:0 12px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);font:inherit;font-weight:400;box-shadow:none;transition:background .15s,border-color .15s,color .15s}
.cmdk-btn:hover{background:var(--surface-3);border-color:var(--border-hi);color:var(--text-strong);transform:none;filter:none}.cmdk-btn::after{display:none}.cmdk-btn span{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis}
.nav-label{display:block;margin:16px 10px 4px;color:var(--text-faint);font-size:12px;font-weight:500}
.nav{display:flex;align-items:center;gap:11px;min-height:38px;padding:0 11px;margin:2px 0;border-radius:var(--r);color:var(--text-dim);font-weight:500;position:relative;transition:background .18s,color .18s,transform .18s}
.nav svg{opacity:.85;transition:filter .18s,opacity .18s}
.nav:hover{background:var(--hover);color:var(--text-strong);transform:translateX(2px)}
.nav.on{background:linear-gradient(90deg,rgba(var(--accent-rgb),.2),rgba(var(--accent-rgb),.03));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.25);color:var(--text-strong);font-weight:600}
.nav.on svg{opacity:1;color:var(--accent-hi)}
.nav.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--grad);box-shadow:0 0 10px rgba(var(--accent-rgb),.5)}
.side .me{margin-top:auto;padding:12px 8px 2px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:var(--accent-ink);font-weight:700;text-transform:uppercase;box-shadow:0 6px 16px -6px rgba(var(--accent-rgb),.7)}
.me .who{min-width:0;flex:1;line-height:1.3}.me .who b{display:block;color:var(--text-strong);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.me .who small{color:var(--text-dim)}
.icon-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r);border:0;background:transparent;color:var(--text-dim);cursor:pointer;transition:background .15s,color .15s;box-shadow:none;padding:0}
.icon-btn:hover{background:var(--hover);color:var(--text-strong);transform:none;filter:none}.icon-btn::after{display:none}

/* ---------- контент ---------- */
.main{margin-left:var(--side);padding:30px 36px 56px;max-width:calc(1420px + var(--side))}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
h1{margin:0;font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.025em;background:linear-gradient(180deg,var(--text-strong) 30%,var(--text-dim));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin:6px 0 0;color:var(--text-dim);max-width:72ch}
h2,h3{color:var(--text-strong);margin:0 0 14px;font-size:15px;font-weight:620;letter-spacing:-.005em}
.crumb{display:inline-flex;align-items:center;gap:6px;color:var(--text-dim);margin-bottom:10px}.crumb:hover{color:var(--accent-hi)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:16px;align-items:stretch}.grid.top{align-items:start}
.grid.stats{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid>.card{display:flex;flex-direction:column;margin-bottom:0}.grid>.card>.tablewrap,.grid>.card>.chartbox{flex:1}

/* карточка-стекло: градиентная рамка, которая загорается у курсора */
.card{position:relative;isolation:isolate;background:var(--glass);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;margin-bottom:16px;box-shadow:var(--shadow-card);content-visibility:auto;contain-intrinsic-size:auto 280px}
.card::before{display:none}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(var(--accent-rgb),.09),transparent 65%)}
.card:hover::after{opacity:1}
.fade{animation:rise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*55ms)}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* плитки-показатели */
.stat{display:flex;flex-direction:row;align-items:center;gap:16px;min-height:96px}
.stat .ic{width:48px;height:48px;flex:none;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,rgba(var(--accent-rgb),.42),rgba(var(--violet-rgb),.32));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 10px 24px -10px rgba(var(--accent-rgb),.5)}
.stat .n{font-size:32px;font-weight:700;line-height:1.1;letter-spacing:-.03em;background:linear-gradient(180deg,var(--text-strong) 35%,var(--text-dim));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .n small{font-size:16px;-webkit-text-fill-color:var(--text-dim);font-weight:500}.stat .l{color:var(--text-dim);font-size:13px;margin-top:3px}

/* ---------- таблицы ---------- */
.tablewrap{overflow-x:auto;margin:0 -20px;padding:0 20px}
table{border-collapse:collapse;width:100%}
th{color:var(--text-dim);font-weight:500;font-size:12.5px;text-align:left;padding:10px 12px;border-bottom:1px solid var(--border-hi);white-space:nowrap}
td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr{transition:background .15s}tbody tr:hover{background:linear-gradient(90deg,rgba(var(--accent-rgb),.09),rgba(var(--accent-rgb),.015))}tbody tr:hover td{background:none}tr:last-child td{border-bottom:0}
td>a:first-child{font-weight:560}
.kv{width:100%}.kv td:first-child{color:var(--text-dim);width:190px;white-space:nowrap}.kv tr:hover td{background:transparent}
.mono,code{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
code{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:2px 8px;word-break:break-all}
.copyrow{display:flex;align-items:center;gap:8px;margin:3px 0}.copyrow code{flex:1;min-width:0;padding:6px 10px}
td.mono,td .mono{white-space:nowrap}

/* ---------- статусы, теги, полосы ---------- */
.badge{display:inline-flex;align-items:center;gap:7px;padding:3px 11px;border-radius:999px;font-size:12.5px;font-weight:560;background:var(--surface-2);color:var(--text-dim);white-space:nowrap;box-shadow:inset 0 0 0 1px var(--border)}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.badge.ok{background:var(--success-soft);color:var(--success);box-shadow:inset 0 0 0 1px rgba(var(--success-rgb),.32)}
.badge.ok::before{box-shadow:0 0 8px rgba(var(--success-rgb),.55)}
.badge.bad{background:var(--danger-soft);color:var(--danger);box-shadow:inset 0 0 0 1px rgba(var(--danger-rgb),.32)}
.badge.warn{background:var(--warning-soft);color:var(--warning);box-shadow:inset 0 0 0 1px rgba(var(--warning-rgb),.32)}
.badge.plain,.badge.acc{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--border-hi);font-weight:500}
.badge.plain::before,.badge.acc::before{display:none}
.badge.acc{background:linear-gradient(135deg,rgba(var(--accent-rgb),.2),rgba(var(--violet-rgb),.16));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3)}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(var(--success-rgb),0),0 0 8px rgba(var(--success-rgb),.55)}}
.ok{color:var(--success)}.bad{color:var(--danger)}.dim{color:var(--text-dim)}small{font-size:12px}
.bar{height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden;min-width:80px}
.bar>i{display:block;height:100%;border-radius:inherit;background:var(--grad);box-shadow:0 0 10px rgba(var(--accent-rgb),.3);transform-origin:left;position:relative;overflow:hidden;animation:grow .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleX(0)}}
.bar.mid>i{background:var(--warning);box-shadow:0 0 10px rgba(var(--warning-rgb),.3)}.bar.full>i{background:var(--danger);box-shadow:0 0 10px rgba(var(--danger-rgb),.3)}
h1 .cc{font-size:26px;vertical-align:-3px;-webkit-text-fill-color:initial}
.cc{display:inline-block;font-family:"Twemoji Country Flags","Apple Color Emoji","Segoe UI Emoji",sans-serif;font-size:18px;line-height:1;vertical-align:-2px;letter-spacing:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{display:inline-flex;align-items:center;gap:7px;padding:3px 11px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border-hi);font-size:12.5px;font-weight:500;color:var(--text);white-space:nowrap}
.chip.off{opacity:.5;text-decoration:line-through}.dot{width:7px;height:7px;border-radius:50%;background:var(--text-faint);display:inline-block}.dot.ok{background:var(--success);box-shadow:0 0 7px rgba(var(--success-rgb),.55)}.dot.bad{background:var(--danger);box-shadow:0 0 7px rgba(var(--danger-rgb),.5)}

/* ---------- формы и кнопки ---------- */
label{color:var(--text-dim);font-size:13px;font-weight:500}
input,select,textarea{min-height:38px;background:var(--field);color:var(--text-strong);border:1px solid var(--border);border-radius:var(--r);padding:7px 12px;font:inherit;max-width:100%;box-shadow:inset 0 1px 2px rgba(0,0,0,.25);transition:border-color .15s,box-shadow .15s,background .15s}
input:hover,select:hover,textarea:hover{border-color:var(--border-hi)}input:focus,select:focus,textarea:focus{border-color:rgba(var(--accent-rgb),.8);box-shadow:0 0 0 3px var(--ring),0 0 18px -6px rgba(var(--accent-rgb),.4)}
input::placeholder,textarea::placeholder{color:var(--text-faint)}textarea{width:100%;font-family:var(--mono);font-size:13px;line-height:1.55}
select{cursor:pointer}option,optgroup{background-color:var(--glass-solid);color:var(--text-strong)}
input[type=checkbox]{min-height:0;width:17px;height:17px;accent-color:var(--accent);vertical-align:middle;box-shadow:none}
.btn,button{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 18px;border:0;border-radius:var(--r);font:inherit;font-weight:620;cursor:pointer;background:var(--grad);color:var(--accent-ink);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 10px 24px -12px rgba(var(--accent-rgb),.5);transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s;white-space:nowrap}
.btn::after,button::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-130%);transition:transform .7s}
.btn:hover,button:hover{text-decoration:none;color:var(--accent-ink);filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 14px 30px -12px rgba(var(--accent-rgb),.6)}
.btn:hover::after,button:hover::after{transform:translateX(130%)}
.btn:active,button:active{transform:translateY(0) scale(.98);filter:brightness(.96)}
button:disabled,.btn[disabled]{opacity:.42;cursor:not-allowed;transform:none;filter:none}
button.ghost,.btn.ghost{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--border-hi)}button.ghost::after,.btn.ghost::after{display:none}
button.ghost:hover,.btn.ghost:hover{background:var(--surface-3);color:var(--text-strong);filter:none;box-shadow:inset 0 0 0 1px var(--border-hi),0 8px 22px -12px rgba(0,0,0,.6)}
button.bad,.btn.bad{background:var(--danger-soft);color:var(--danger);box-shadow:inset 0 0 0 1px rgba(var(--danger-rgb),.38)}button.bad::after,.btn.bad::after{display:none}
button.bad:hover,.btn.bad:hover{background:rgb(var(--danger-rgb));color:var(--on-danger);filter:none;box-shadow:0 10px 26px -8px rgba(var(--danger-rgb),.8)}
button.sm,.btn.sm{min-height:30px;padding:0 13px;font-size:13px;border-radius:9px}
form.inline,.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0}
.field{display:grid;gap:6px;margin-bottom:14px}.field input{width:100%}.hint{color:var(--text-dim);font-size:12.5px}
.actions{display:grid;gap:4px}.actions .divider{height:1px;background:var(--border);margin:10px 0}
details.card>summary{cursor:pointer;list-style:none;color:var(--text-strong);font-weight:600}details.card>summary::-webkit-details-marker{display:none}
details.card>summary::before{content:"›";display:inline-block;width:14px;margin-right:6px;color:var(--text-dim);transition:transform .2s}details.card[open]>summary::before{transform:rotate(90deg)}

/* ---------- уведомления, пустые состояния ---------- */
.flash{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r-lg);margin-bottom:18px;border:1px solid transparent}
.flash.err{background:var(--warning-soft);color:var(--warning);border-color:rgba(var(--warning-rgb),.3)}.flash.good{background:var(--success-soft);color:var(--success);border-color:rgba(var(--success-rgb),.3)}
.flash button{min-height:28px;padding:0 6px;background:transparent;color:inherit;box-shadow:none}.flash button::after{display:none}
.empty{display:grid;place-items:center;gap:8px;padding:30px 14px;color:var(--text-dim);text-align:center;border:1px dashed var(--border-hi);border-radius:var(--r-lg)}.empty .ico{opacity:.7}
td>.empty,td .empty{border:0}

/* ---------- вход ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative}
.login{position:relative;isolation:isolate;width:100%;max-width:410px;background:var(--glass);border-radius:22px;padding:36px;box-shadow:var(--shadow-2);animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.login::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:2;pointer-events:none;background:conic-gradient(from var(--ang),rgba(255,255,255,.08) 0 55%,rgba(var(--accent-rgb),.95) 72%,rgba(var(--violet-rgb),.9) 84%,rgba(255,255,255,.08) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}
.login .mark{display:grid;place-items:center;margin:0 auto 16px;filter:drop-shadow(0 0 22px rgba(var(--accent-rgb),.6))}
.login h1{text-align:center;font-size:23px}.login .lead{text-align:center;margin:8px auto 26px}.login button{width:100%;min-height:44px}

/* ---------- вкладки, график, прочее ---------- */
.tabs{display:inline-flex;gap:4px;flex-wrap:wrap;margin-bottom:16px;padding:4px;border-radius:14px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border)}
.tabs a{padding:6px 15px;border-radius:10px;color:var(--text-dim);font-weight:560;transition:background .18s,color .18s}
.tabs a:hover{color:var(--text-strong);background:var(--hover)}.tabs a.on{color:var(--accent-ink);background:var(--grad);box-shadow:0 8px 20px -10px rgba(var(--accent-rgb),.55)}.tabs a small{opacity:.7;margin-left:5px}
.chartbox{position:relative;padding-top:16px}.ymax{position:absolute;left:0;top:0;font-size:11px;color:var(--text-faint);font-family:var(--mono)}
.chart{width:100%;height:160px;display:block;overflow:visible}
.chart .a{fill-opacity:1;opacity:0;animation:fadein .9s .25s ease forwards}.chart .ln{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:drawline 1.2s .1s cubic-bezier(.2,.8,.2,1) forwards}
.chart .ln.i{stroke:var(--accent);color:rgba(var(--accent-rgb),.7)}.chart .ln.o{stroke:var(--warning);color:rgba(var(--warning-rgb),.6)}
.chart line{stroke:var(--border);vector-effect:non-scaling-stroke;stroke-dasharray:3 5}
@keyframes drawline{to{stroke-dashoffset:0}}
.chart-x{display:flex;justify-content:space-between;margin-top:4px;font-size:11px;color:var(--text-faint);font-family:var(--mono)}
.cline{position:absolute;top:16px;bottom:22px;width:1px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.9),transparent);pointer-events:none;opacity:0;transition:opacity .15s}
.ctip{position:absolute;top:8px;z-index:5;min-width:130px;padding:8px 11px;border-radius:11px;background:var(--glass-solid);box-shadow:var(--shadow-2);font-size:12px;pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap}
.ctip b{display:block;color:var(--text-strong);margin-bottom:3px}.ctip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.chartbox:hover .cline,.chartbox:hover .ctip{opacity:1}
.legend{display:flex;gap:16px;color:var(--text-dim);font-size:12.5px;margin-top:8px}.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
.pager{display:flex;gap:6px;align-items:center;margin-top:16px;flex-wrap:wrap}.pager a,.pager span{min-width:36px;min-height:36px;display:inline-grid;place-items:center;border-radius:11px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border-hi);color:var(--text);transition:background .15s}.pager a:hover{background:var(--surface-3)}.pager span{background:var(--grad);color:var(--accent-ink);font-weight:700}
.mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.mini.s3{grid-template-columns:repeat(3,1fr)}.mini.s4{grid-template-columns:repeat(4,1fr)}
.mini .m{display:flex;flex-direction:column;justify-content:center;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);border-radius:13px;padding:11px 14px;transition:box-shadow .2s,transform .2s,background .2s}.mini a.m:hover{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5),0 10px 24px -14px rgba(var(--accent-rgb),.7);background:var(--surface-3);transform:translateY(-2px)}
.mini .m b{display:block;color:var(--text-strong);font-size:21px;font-weight:700;line-height:1.2;letter-spacing:-.02em}.mini .m span{color:var(--text-dim);font-size:12.5px}
.card.compact{padding:16px 18px}.compact h3{margin-bottom:12px}.compact .chart{height:104px}
.srv-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));margin-bottom:16px}
.srv{display:flex;flex-direction:column;gap:12px;margin:0;color:var(--text)}
.acc-srv{margin:6px 0 10px}.acc-srv>b{display:block;color:var(--text-strong);font-size:13px;margin-bottom:2px}
.ld{display:flex;align-items:center;gap:10px;min-width:120px;margin:2px 0}.ld small:first-child{width:36px}.ld .bar{flex:1}.ld small.mono{width:38px;text-align:right}
.bulk{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:14px 0 0}
.striped tbody tr:nth-child(even){background:rgba(255,255,255,.022)}.striped tbody tr:hover{background:linear-gradient(90deg,rgba(var(--accent-rgb),.09),rgba(var(--accent-rgb),.015))}
.striped small.mono{white-space:nowrap}.rowlink{cursor:pointer}.rowlink td:first-child a{color:var(--text-strong);font-weight:620}

/* ---------- окна и палитра команд ---------- */
dialog.modal{border:0;padding:0;background:transparent;color:var(--text);width:min(540px,calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);overflow:visible;margin:auto}
dialog.modal::backdrop{background:var(--scrim);transition:opacity .2s}
dialog.modal[open] .modal-box{animation:pop .32s cubic-bezier(.2,.9,.25,1.05) both}
dialog.modal.closing .modal-box{animation:pop-out .18s ease both}dialog.modal.closing::backdrop{opacity:0}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(14px)}}@keyframes pop-out{to{opacity:0;transform:scale(.96) translateY(8px)}}
.modal-box{position:relative;isolation:isolate;background:linear-gradient(180deg,#121212,#0a0a0a);border-radius:22px;box-shadow:var(--shadow-2);padding:26px;max-height:calc(100vh - 24px);overflow-y:auto}
@media(prefers-color-scheme:light){.modal-box{background:linear-gradient(180deg,#fff,#fafafa)}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.modal-head h3{margin:0;font-size:18px;font-weight:680}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:20px}
.cmdk{width:min(580px,calc(100vw - 24px))}.cmdk .modal-box{padding:10px 10px 8px}
.cmdk input{width:100%;min-height:48px;border:0;background:transparent;box-shadow:none;font-size:16px;padding:6px 14px}.cmdk input:focus{box-shadow:none}
.cmdk ul{list-style:none;margin:6px 0 0;padding:6px 0 0;border-top:1px solid var(--border);max-height:50vh;overflow:auto}
.cmdk li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;color:var(--text);cursor:pointer;transition:background .12s}.cmdk li svg{opacity:.8}.cmdk li small{margin-left:auto;color:var(--text-faint)}
.cmdk li.sel{background:linear-gradient(90deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.05));color:var(--text-strong);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3)}
.cmdk .none{padding:20px;text-align:center;color:var(--text-dim)}
.wait{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:11px 14px;border-radius:12px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);color:var(--text-dim)}
.wait .dot{animation:pulse2 1.4s ease-in-out infinite}.wait.done{color:var(--success);background:var(--success-soft)}.wait.done .dot{background:var(--success);animation:none}
@keyframes pulse2{50%{opacity:.3}}
.flash.toast{position:fixed;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:12px;padding:14px 16px;overflow:hidden;background:var(--glass-solid);border:0;border-radius:16px;box-shadow:var(--shadow-2);color:var(--text);animation:toastin .45s cubic-bezier(.2,.9,.25,1.1) both}
.flash.err.toast{animation:toastin .45s cubic-bezier(.2,.9,.25,1.1) both,shake .45s .45s;box-shadow:var(--shadow-2),inset 3px 0 0 var(--warning),0 0 40px -12px rgba(var(--warning-rgb),.5)}
.flash.good.toast{box-shadow:var(--shadow-2),inset 3px 0 0 var(--success),0 0 40px -12px rgba(var(--success-rgb),.5)}
.fl-ico{display:grid;place-items:center;margin-top:1px}.flash.err .fl-ico{color:var(--warning)}.flash.good .fl-ico{color:var(--success)}
.fl-body{min-width:0;color:var(--text)}.fl-body b{display:block;font-weight:620;color:var(--text-strong)}.fl-body p{margin:5px 0 0;font-size:13px;line-height:1.5;color:var(--text)}.fl-body small{display:block;margin-top:7px}
.fl-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:currentColor;opacity:.7;transform-origin:left;animation:flbar 14s linear forwards}.flash.good .fl-bar{animation-duration:6s}.toast:hover .fl-bar{animation-play-state:paused}
.flash.err .fl-bar{color:var(--warning)}.flash.good .fl-bar{color:var(--success)}
.flash.out{opacity:0;transform:translateX(30px);transition:opacity .25s,transform .25s}
.fl-ico.draw .tick{stroke-dasharray:20;stroke-dashoffset:20;animation:draw .5s .2s ease forwards}
@keyframes toastin{from{opacity:0;transform:translateX(40px) scale(.95)}to{opacity:1;transform:none}}
@keyframes flbar{to{transform:scaleX(0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.form-error{margin-top:12px;padding:11px 14px;border-radius:12px;background:var(--danger-soft);color:var(--danger);box-shadow:inset 0 0 0 1px rgba(var(--danger-rgb),.32);animation:shake .45s}
.form-error b{display:block;font-weight:620}.form-error p{margin:4px 0 0;color:var(--text);font-size:13px}
input:user-invalid,select:user-invalid{border-color:var(--danger)}
.err-page{max-width:450px;text-align:center}.err-code{color:var(--text-faint);font-size:14px;margin-bottom:2px}.err-id{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px}
.loadbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);box-shadow:0 0 12px rgba(var(--accent-rgb),.55);z-index:100;opacity:0}
body.navigating .loadbar{opacity:1;width:82%;transition:width 8s cubic-bezier(.1,.7,.1,1)}
button.loading{color:transparent!important;pointer-events:none}
button.loading::after{content:"";inset:0;margin:auto;width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,.25);border-top-color:var(--accent-ink);background:none;transform:none;animation:spin2 .7s linear infinite}
button.ghost.loading::after,button.bad.loading::after{display:block;border-color:var(--border-hi);border-top-color:var(--text-strong)}
@keyframes spin2{to{transform:rotate(360deg)}}
.toast{top:18px;right:18px;z-index:80;max-width:min(430px,calc(100vw - 36px))}
.topbar,.tabbar,.scrim{display:none}
.sublink{margin:2px 0 12px}.sublink>b{display:block;color:var(--text-strong);font-weight:600}.sublink .hint{display:block;margin-bottom:4px}
ul.plain{margin:8px 0 0;padding-left:20px}ul.plain li{margin:4px 0}
.logo{display:block;flex:none}.logo .lg-sh{stroke:var(--accent);fill:rgba(var(--accent-rgb),.14)}.logo .lg-q{stroke:var(--accent-hi);fill:none}
.login.err-page .mark.err{width:46px;height:46px;border-radius:14px;background:var(--surface-3);color:var(--text-strong);filter:none}.login.err-page .mark.warn{color:var(--warning);background:var(--warning-soft);filter:drop-shadow(0 0 16px rgba(var(--warning-rgb),.5))}
.err-page .modal-foot button,.err-page .modal-foot .btn{width:auto;min-width:130px}

/* ---------- планшет и телефон ---------- */
@media(max-width:1023px){
html{scroll-padding-top:64px}body.menu-open{overflow:hidden}
.topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20;height:56px;padding:0 8px 0 4px;padding-top:env(safe-area-inset-top);box-sizing:content-box;background:rgba(9,13,24,.96);border-bottom:1px solid var(--border)}
@media(prefers-color-scheme:light){.topbar,.tabbar{background:rgba(255,255,255,.8)!important}}
.topbar .mark{display:grid;place-items:center;filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.5))}
.topbar b{flex:1;min-width:0;font-size:15px;font-weight:680;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar .icon-btn{width:46px;height:46px}
.side{width:min(86vw,310px);transform:translateX(-104%);transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:40;padding:calc(16px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));box-shadow:var(--shadow-2);background:linear-gradient(180deg,rgba(11,16,28,.97),rgba(8,11,20,.99))}
@media(prefers-color-scheme:light){.side{background:rgba(255,255,255,.97)}}
body.menu-open .side{transform:none}
.scrim{position:fixed;inset:0;z-index:30;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .25s}
body.menu-open .scrim{display:block;opacity:1;pointer-events:auto}
.nav{min-height:46px}.nav.on::before{left:-12px}
.side .me{margin-top:16px;position:sticky;bottom:0;background:rgb(9,13,24)}
@media(prefers-color-scheme:light){.side .me{background:#fff}}
.main{margin-left:0;max-width:none;padding:18px 16px calc(92px + env(safe-area-inset-bottom))}
.tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;inset:auto 10px calc(10px + env(safe-area-inset-bottom)) 10px;z-index:20;background:rgba(12,17,30,.97);border-radius:20px;box-shadow:var(--shadow-2);padding:4px}
.tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;padding:6px 4px;border:0;border-radius:16px;background:transparent;color:var(--text-dim);font:inherit;font-size:12px;font-weight:560;transform:none;box-shadow:none;filter:none}
.tabbar button::after{display:none}.tabbar a:hover,.tabbar button:hover{background:transparent;color:var(--text-strong);transform:none;box-shadow:none;filter:none}
.tabbar .on{color:var(--text-strong);background:linear-gradient(180deg,rgba(var(--accent-rgb),.24),rgba(var(--accent-rgb),.06));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3)}.tabbar .on svg{color:var(--accent-hi)}
.toast{top:calc(64px + env(safe-area-inset-top));left:12px;right:12px;max-width:none}
body::before{animation:none}
}
@media(max-width:639px){
body{font-size:15px}
h1{font-size:23px}
.page-head{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:18px}.page-head>.btn,.page-head>form,.page-head>form button,.page-head>.inline,.page-head>.inline>*{width:100%}
.grid,.grid.stats{grid-template-columns:minmax(0,1fr)!important;gap:12px}.grid.stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.srv-grid{grid-template-columns:1fr}
.card{padding:16px;border-radius:18px;margin-bottom:12px;background:linear-gradient(180deg,#0e0e0e,#0a0a0a)}
@media(prefers-color-scheme:light){.card{background:rgba(255,255,255,.92)}}
.modal-box{padding:20px}.modal-foot>*{flex:1 1 auto}
.stat{flex-direction:column;align-items:flex-start;gap:10px;min-height:0}.stat .ic{width:40px;height:40px;border-radius:13px}.stat .n{font-size:26px}.stat .l{font-size:12.5px}
.mini,.mini.s4,.mini.s3{grid-template-columns:1fr 1fr}.mini .m b{font-size:20px}
input,select,textarea{font-size:16px;min-height:46px}input[type=checkbox]{width:22px;height:22px;min-height:0}
.btn,button{min-height:46px}button.sm,.btn.sm{min-height:40px;padding:0 15px}
.inline,form.inline{gap:10px}.inline>input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.inline>select,.inline>.field{flex:1 1 100%;width:100%!important;min-width:0}
.inline>label{display:flex;align-items:center;gap:10px;min-height:44px}
.field input,.field select{width:100%!important}
.bulk{flex-direction:column;align-items:stretch}.bulk>*{width:100%!important}
.copyrow{flex-wrap:wrap}.copyrow code{flex:1 1 100%}.copyrow button{flex:1 1 100%}
.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 14px;padding:4px 16px;border-radius:0;box-shadow:none;background:none;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tabs a{flex:none;min-height:40px;display:inline-flex;align-items:center;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border)}.tabs a.on{box-shadow:0 8px 20px -8px rgba(var(--accent-rgb),.8)}
.pager a,.pager span{min-width:44px;min-height:44px}
.chart{height:120px}
details>summary{min-height:44px;display:flex;align-items:center}
.tablewrap{margin:0;padding:0;overflow:visible}
table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
table.stack thead{display:none}
table.stack tr{position:relative;box-shadow:inset 0 0 0 1px var(--border);border-radius:16px;background:var(--surface-2);padding:8px 14px;margin:0 0 10px}
table.stack tr:last-child{margin-bottom:0}
table.stack td{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:7px 0;border:0;text-align:right;min-height:0}
table.stack tbody tr:hover{background:var(--surface-2)}table.stack tbody tr:hover td{background:transparent}
table.stack td::before{content:attr(data-label);flex:none;max-width:42%;color:var(--text-dim);font-size:12.5px;text-align:left}
table.stack td[data-label=""]::before{display:none}
table.stack td:first-child{justify-content:flex-start;text-align:left;font-size:15px;padding-top:2px}
table.stack td[colspan]{justify-content:center}
table.stack td>.v{min-width:0;max-width:100%;flex:1 1 auto;word-break:break-word}table.stack td>.v>.bar{min-width:0;margin:2px 0}
table.stack td:not(:first-child)>.v{text-align:right}table.stack td:first-child>.v{text-align:left}
table.stack td input:not([type=checkbox]),table.stack td select{width:100%!important;max-width:100%;min-width:0}
table.stack td.act>.v{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
table.stack td form{margin:0}
table.stack td[style*="text-align:right"],table.stack td.act{justify-content:flex-end;flex-wrap:wrap;gap:8px}
table.stack td input[type=checkbox]{margin:0}
table.stack td.pri{justify-content:flex-start;font-size:15px;padding-top:2px}table.stack td.pri::before{display:none}table.stack td.pri>.v{text-align:left}
table.stack td.sel{position:absolute;top:8px;right:12px;width:auto;padding:0}
table.stack td.sel+td{padding-right:40px}
.ld small.mono{width:auto}
.kv,.kv tbody,.kv tr,.kv td{display:block;width:100%}
.kv tr{padding:8px 0;border-bottom:1px solid var(--border)}.kv tr:last-child{border-bottom:0}
.kv td{padding:2px 0;border:0;word-break:break-word}.kv td:first-child{width:auto;font-size:12.5px;color:var(--text-dim)}
table.stack td.mono,table.stack .mono,table.stack small.mono,.kv .mono,.kv td{white-space:normal;overflow-wrap:anywhere}table.stack .badge,.kv .badge{white-space:normal}
.tablewrap table:not(.stack) td,.tablewrap table:not(.stack) .mono{white-space:normal;overflow-wrap:anywhere}
.card:has(>.tablewrap:only-child){background:none;border:0;padding:0;box-shadow:none}.card:has(>.tablewrap:only-child)::before,.card:has(>.tablewrap:only-child)::after{display:none}
.login-wrap{padding:16px;align-items:start;padding-top:12vh}.login{padding:28px;border-radius:22px}
.flash{padding:12px 14px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.chart .a{opacity:1}.chart .ln{stroke-dashoffset:0}}
.grid>.card.stat{flex-direction:row;align-items:center}
@media(max-width:639px){.grid>.card.stat{flex-direction:column;align-items:flex-start}}
.kv td,.kv td .mono,.kv td.mono{white-space:normal;overflow-wrap:anywhere}.kv td:first-child{white-space:nowrap;overflow-wrap:normal}
.card{min-width:0}.grid>.card{min-width:0}

/* плавность: слои, которые не видны, не рисуются; анимируются только transform и opacity */
.srv-grid,.tablewrap{contain:layout style}
.topbar,.tabbar{transform:translateZ(0)}
.side{will-change:transform}  /* не transform: на телефоне им прячется меню */
h1:has(.cc){background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--text-strong)}
h1 .cc{font-size:26px;vertical-align:-3px;margin-right:4px}

details.sublink-d{margin:2px 0 6px}details.sublink-d>summary{cursor:pointer;list-style:none;color:var(--text-dim);font-weight:560;padding:4px 0}details.sublink-d>summary::-webkit-details-marker{display:none}
details.sublink-d>summary::before{content:"›";display:inline-block;width:14px;transition:transform .2s}details.sublink-d[open]>summary::before{transform:rotate(90deg)}details.sublink-d>summary:hover{color:var(--text-strong)}
details.sublink-d .hint{display:block;margin:2px 0 4px}
.qrbox{display:grid;place-items:center;padding:6px}.qrbox svg{width:min(320px,80vw);height:auto;border-radius:14px;background:#fff;box-shadow:0 0 0 6px #fff}

/* ---------- публичная страница подписки ---------- */
body.pub{min-height:100vh}.pub-main{max-width:600px;margin:0 auto;padding:28px 16px 64px}
.pub-brand{display:flex;align-items:center;gap:10px;margin:0 4px 18px}.pub-brand .mark{display:grid;place-items:center;filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.4))}
.pub-brand b{font-size:15px;font-weight:650;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pub-hero{padding:24px}.pub-hero h1{margin:14px 0 4px;font-size:26px}.pub-hero .lead{margin:0}.pub-hero .lead b{color:var(--text-strong)}
.pub-why{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:var(--warning-soft);color:var(--warning);box-shadow:inset 0 0 0 1px rgba(var(--warning-rgb),.3)}
.pub-meters{display:grid;gap:14px;margin-top:20px}.pm-h{display:flex;justify-content:space-between;gap:12px;color:var(--text-dim);margin-bottom:6px}.pm-h b{color:var(--text-strong);font-weight:600}
.pub-meters>.pm-h{margin-bottom:0}
.pub-note{display:flex;gap:12px;align-items:flex-start;box-shadow:var(--shadow-card),inset 3px 0 0 var(--accent)}.pub-note p{margin:0;color:var(--text)}.pub-note svg{color:var(--accent-hi);margin-top:2px}
.steps{list-style:none;counter-reset:s;padding:0;margin:0 0 18px}.steps li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;padding:7px 0}
.steps li::before{content:counter(s);flex:none;width:26px;height:26px;margin-top:-1px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-hi);font-weight:700;font-size:13px;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3)}
.bigbtn{display:flex;width:100%;min-height:50px;font-size:16px;margin-top:4px}
.pub-more{margin-top:14px}.pub-more>summary{cursor:pointer;list-style:none;color:var(--text-dim);font-weight:560;padding:6px 0}.pub-more>summary::-webkit-details-marker{display:none}
.pub-more>summary::before{content:"›";display:inline-block;width:14px;transition:transform .2s}.pub-more[open]>summary::before{transform:rotate(90deg)}
.pub-more .copyrow{margin-top:8px}
a.bigbtn.ghost{margin-top:0}
@media(max-width:639px){.pub-main{padding:18px 14px 56px}.pub-hero{padding:18px}.pub-hero h1{font-size:23px}}
.sublink .copyrow,details.sublink-d .copyrow{flex-wrap:wrap}.sublink .copyrow code,details.sublink-d .copyrow code{flex:1 1 100%}

/* ---------- правки редакции 5: карточка с кнопкой, окно операций, срок, группы ---------- */
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}.cardhead h3{margin:0}
dialog.modal.modal-wide{width:min(760px,calc(100vw - 24px))}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:0 14px}
.expiry-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.expiry-row input[type=date]{width:auto;min-width:170px;color-scheme:inherit}
.chk-grid{display:flex;flex-wrap:wrap;gap:8px}
.chk{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:var(--r);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);cursor:pointer;transition:background .15s,box-shadow .15s}
.chk:hover{background:var(--surface-3)}.chk:has(input:checked){box-shadow:inset 0 0 0 1px var(--accent)}
.chk input{width:16px;height:16px;margin:0;accent-color:var(--accent)}.chk span{display:grid;line-height:1.25}.chk b{color:var(--text-strong);font-weight:600}.chk small{font-size:12px}
fieldset.plainset{border:0;padding:0;margin:0;min-width:0}fieldset.plainset:disabled .chk{opacity:.6;cursor:default}
.modal-box .divider{height:1px;background:var(--border);margin:18px 0 14px}
.fgrid .field,.expiry{align-content:start;min-width:0}.fgrid input,.fgrid select,.fgrid textarea{width:100%;min-width:0}
@media(max-width:560px){.modal-box{padding:18px}.expiry-row input[type=date]{flex:1 1 100%}.modal-foot>button{flex:1}}

.badge.ok.live::before{animation:pulse 2s ease-in-out infinite}.badge.ok.live{position:relative}
@media (prefers-reduced-motion:reduce){.badge.ok.live::before{animation:none}}