/* DMPay · стили новых экранов (диалоги, звонки, отчёты, журнал). Дополняет style.css */
:root{
  --busy:#b69cff;
  --ok-g:rgba(78,227,160,.16);--warn-g:rgba(255,193,90,.16);--busy-g:rgba(166,136,255,.18);--bad-g:rgba(255,93,122,.17);
}

/* ---------- общие мелочи ---------- */
.link{background:none;border:0;padding:4px 2px;color:var(--acc1);font-size:13px;font-weight:600;cursor:pointer;transition:opacity .2s,transform .2s var(--ease)}
.link:active{transform:scale(.94);opacity:.7}
.head-left{display:flex;align-items:center;gap:10px;min-width:0}
.back-btn{width:34px;height:34px;flex:none;border-radius:11px;border:1px solid var(--stroke);background:var(--glass);font-size:22px;line-height:1;
  padding:0 0 3px;cursor:pointer;transition:transform .2s var(--ease),border-color .2s}
.back-btn:active{transform:scale(.88)}.back-btn:hover{border-color:var(--stroke-hi)}
.found{margin:4px 4px 10px}
.num{font-variant-numeric:tabular-nums}
.tab-badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 5px;border-radius:999px;font-style:normal;font-size:10px;font-weight:800;
  display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#ff6a86,#ff3d6a);box-shadow:0 0 12px rgba(255,80,110,.65);animation:badgePop .5s var(--ease) both}
.tab-badge.live{background:linear-gradient(135deg,#3fe6a0,#19b97a);box-shadow:0 0 12px rgba(60,230,160,.6);color:#04281a}
@keyframes badgePop{from{transform:scale(0)}to{transform:scale(1)}}

/* ---------- фильтры-пилюли ---------- */
.pills{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 10px;padding:2px 16px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pills::-webkit-scrollbar{display:none}
.pill{flex:none;padding:8px 14px;border-radius:999px;border:1px solid var(--stroke);background:rgba(34,37,52,.5);color:#b9c0e3;font-size:12.5px;font-weight:600;cursor:pointer;
  white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .25s var(--ease),background .3s,border-color .3s,box-shadow .3s,color .3s}
.pill:active{transform:scale(.92)}
.pill.active{color:#fff;border-color:rgba(160,180,255,.5);background:linear-gradient(135deg,rgba(80,120,255,.5),rgba(150,100,255,.45));box-shadow:0 0 18px rgba(130,130,255,.35)}
.pill.p-ok.active{border-color:rgba(78,227,160,.55);background:linear-gradient(135deg,rgba(40,170,120,.55),rgba(30,120,100,.45));box-shadow:0 0 18px rgba(78,227,160,.3)}
.pill.p-warn.active{border-color:rgba(255,193,90,.55);background:linear-gradient(135deg,rgba(200,140,40,.55),rgba(140,100,30,.45));box-shadow:0 0 18px rgba(255,193,90,.28)}
.pill.p-busy.active{border-color:rgba(182,156,255,.55);background:linear-gradient(135deg,rgba(120,90,230,.55),rgba(80,60,170,.45));box-shadow:0 0 18px rgba(166,136,255,.32)}
.pill.p-bad.active{border-color:rgba(255,93,122,.55);background:linear-gradient(135deg,rgba(210,60,90,.55),rgba(140,40,70,.45));box-shadow:0 0 18px rgba(255,93,122,.3)}

.search{display:flex;align-items:center;gap:10px;padding:0 14px;margin-bottom:10px;border-radius:14px;transition:border-color .25s,box-shadow .25s}
.search:focus-within{border-color:rgba(150,170,255,.6);box-shadow:0 0 0 3px rgba(127,160,255,.15),0 0 22px rgba(127,160,255,.15)}
.search input{flex:1;min-width:0;background:none;border:0;outline:none;padding:13px 0;font-size:15px}
.search input::placeholder{color:var(--muted)}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
.kpi{position:relative;overflow:hidden;padding:14px 14px 13px;display:flex;flex-direction:column;gap:2px;transition:transform .25s var(--ease),border-color .25s}
.kpi:hover{transform:translateY(-2px);border-color:var(--stroke-hi)}
.kpi b{font-size:25px;font-weight:800;line-height:1.15;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.kpi b small{font-size:13px;font-weight:600;color:var(--muted);margin-left:2px}
.kpi span{font-size:11.5px;color:var(--muted)}
.kpi::before{content:"";position:absolute;right:-26px;top:-26px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,var(--kc,rgba(127,224,255,.18)),transparent 70%);pointer-events:none}
.kpi.ok{--kc:var(--ok-g)}.kpi.ok b{color:var(--ok)}
.kpi.warn{--kc:var(--warn-g)}.kpi.warn b{color:var(--warn)}
.kpi.busy{--kc:var(--busy-g)}.kpi.busy b{color:var(--busy)}
.kpi.bad{--kc:var(--bad-g)}.kpi.bad b{color:var(--bad)}
.kbar{display:block;height:5px;border-radius:5px;background:rgba(255,255,255,.07);margin-top:8px;overflow:hidden}
.kbar u{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--acc1),var(--acc2));transition:width 1s var(--ease)}
.kpi.ok .kbar u{background:linear-gradient(90deg,#2fd08c,#7bf2c0)}
.kpi.warn .kbar u{background:linear-gradient(90deg,#f0a93a,#ffd98a)}
.kpi.bad .kbar u{background:linear-gradient(90deg,#ff4d6d,#ff9bb0)}
.kpi.busy .kbar u{background:linear-gradient(90deg,#8d6bff,#c8b6ff)}

/* ---------- плитки «Ещё» ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:18px 16px;text-align:left;cursor:pointer;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.tile:hover{transform:translateY(-3px);border-color:var(--stroke-hi);box-shadow:0 0 28px rgba(127,224,255,.16),0 10px 30px rgba(0,0,0,.4)}
.tile:active{transform:scale(.96)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.1) 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.tile:hover::after{transform:translateX(120%)}
.tile-ico{font-size:28px;filter:drop-shadow(0 0 12px rgba(127,224,255,.35));margin-bottom:6px}
.tile b{font-size:14.5px}
.tile small{font-size:11.5px;color:var(--muted)}
.tile-badge{position:absolute;top:12px;right:12px;min-width:22px;height:22px;padding:0 7px;border-radius:999px;font-style:normal;font-size:11.5px;font-weight:800;display:grid;place-items:center;
  background:linear-gradient(135deg,#ff6a86,#ff3d6a);color:#fff;box-shadow:0 0 14px rgba(255,80,110,.55)}

/* ---------- LIVE ---------- */
.live-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:1.4px;color:var(--ok);
  background:var(--ok-g);border:1px solid rgba(78,227,160,.3)}
.live-pill i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:pulse 1.4s ease-in-out infinite}
.live-pill.off{color:var(--bad);background:var(--bad-g);border-color:rgba(255,93,122,.3)}
.live-pill.off i{background:var(--bad);box-shadow:0 0 10px var(--bad);animation:none}
.live-sum{display:grid;grid-template-columns:repeat(3,1fr);padding:16px 8px;text-align:center}
.ls{position:relative}
.ls+.ls::before{content:"";position:absolute;left:0;top:8%;bottom:8%;width:1px;background:var(--stroke)}
.ls b{display:block;font-size:34px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.ls span{display:block;margin-top:6px;font-size:11.5px;color:var(--muted)}
.ls.ok b{color:var(--ok);text-shadow:0 0 18px rgba(78,227,160,.45)}
.ls.warn b{color:var(--warn);text-shadow:0 0 18px rgba(255,193,90,.4)}

.line-load{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ll{padding:10px 12px;border-radius:14px;background:rgba(34,37,52,.5);border:1px solid var(--stroke);display:flex;flex-direction:column;gap:7px;transition:border-color .3s,background .3s}
.ll.busy{border-color:rgba(127,224,255,.28);background:rgba(40,52,84,.5)}
.ll.full{border-color:rgba(255,193,90,.45)}
.ll-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px}
.ll-top b{font-weight:700}.ll-top em{font-style:normal;color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.ll-top span{color:var(--muted);font-weight:400;margin-left:4px}
.ll-bar{display:block;height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.ll-bar u{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--acc1),var(--acc2));transition:width .8s var(--ease)}
.ll.full .ll-bar u{background:linear-gradient(90deg,#f0a93a,#ff6a86)}

.dlg{position:relative;overflow:hidden;padding:14px;animation:rise .5s var(--ease) both}
.dlg::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--dc,var(--acc1));box-shadow:0 0 14px var(--dc,var(--acc1))}
.dlg.talking{--dc:var(--ok)}.dlg.ringing{--dc:var(--warn)}.dlg.connecting{--dc:var(--acc1)}
.dlg-top{display:flex;align-items:center;gap:12px}
.dlg-ico{width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.06);position:relative}
.dlg.talking .dlg-ico{background:var(--ok-g)}.dlg.ringing .dlg-ico{background:var(--warn-g)}
.eq{display:flex;align-items:flex-end;gap:3px;height:20px}
.eq i{width:4px;border-radius:3px;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:eq 1s ease-in-out infinite;height:30%}
.eq i:nth-child(2){animation-delay:.18s}.eq i:nth-child(3){animation-delay:.36s}.eq i:nth-child(4){animation-delay:.12s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.ring{font-size:20px;display:inline-block;transform-origin:50% 20%;animation:ringing 1.2s ease-in-out infinite}
@keyframes ringing{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(-16deg)}20%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}50%{transform:rotate(-6deg)}}
.dlg-main{flex:1;min-width:0}
.dlg-num{font-size:17px;font-weight:800;letter-spacing:.2px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlg-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:5px;font-size:11.5px;color:var(--muted)}
.line-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;color:#cfe9ff;
  background:rgba(127,224,255,.12);border:1px solid rgba(127,224,255,.25)}
.line-badge.dim{color:var(--muted);background:rgba(255,255,255,.05);border-color:var(--stroke)}
.dlg-timer{text-align:right;flex:none}
.dlg-timer b{display:block;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--dc,#fff)}
.dlg-timer small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.dlg-state{display:inline-block;padding:2px 8px;border-radius:999px;font-weight:700;font-size:10.5px;color:var(--dc);background:rgba(255,255,255,.06)}
.dlg-bar{display:block;height:3px;border-radius:3px;margin-top:12px;background:rgba(255,255,255,.06);overflow:hidden}
.dlg-bar u{display:block;height:100%;width:40%;border-radius:3px;background:var(--dc);opacity:.85;animation:slide 1.8s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(280%)}}
.radar{position:relative;width:86px;height:86px;margin:0 auto 14px;border-radius:50%;border:1px solid rgba(127,224,255,.3);overflow:hidden}
.radar::before{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(127,224,255,.5),transparent 30%);animation:spin 3s linear infinite}
.radar::after{content:"";position:absolute;inset:30%;border-radius:50%;border:1px solid rgba(127,224,255,.35)}
.empty small{display:block;margin-top:6px;font-size:12px;opacity:.8}

/* ---------- звонки ---------- */
.day-div{margin:16px 4px 2px;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.3px;display:flex;align-items:center;gap:10px}
.day-div::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--stroke),transparent)}
.call{position:relative;overflow:hidden;padding:12px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;width:100%;text-align:left;
  transition:transform .25s var(--ease),border-color .25s,background .25s}
.call:hover{transform:translateX(3px);border-color:var(--stroke-hi)}
.call:active{transform:scale(.98)}
.call::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rc);box-shadow:0 0 12px var(--rc)}
.r-ok{--rc:var(--ok)}.r-warn{--rc:var(--warn)}.r-busy{--rc:var(--busy)}.r-bad{--rc:var(--bad)}
.call-ico{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:17px;background:rgba(255,255,255,.06)}
.r-ok .call-ico{background:var(--ok-g)}.r-warn .call-ico{background:var(--warn-g)}.r-busy .call-ico{background:var(--busy-g)}.r-bad .call-ico{background:var(--bad-g)}
.call-main{flex:1;min-width:0}
.call-num{font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums}
.call-sub{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px;font-size:11.5px;color:var(--muted)}
.call-side{text-align:right;flex:none}
.call-time{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.call-dur{display:block;margin-top:4px;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.res{display:inline-block;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:800;color:var(--rc);background:rgba(255,255,255,.06)}
.r-ok .res{background:var(--ok-g)}.r-warn .res{background:var(--warn-g)}.r-busy .res{background:var(--busy-g)}.r-bad .res{background:var(--bad-g)}

/* лист деталей */
.cs-head{text-align:center;padding:4px 0 14px}
.cs-ico{width:58px;height:58px;margin:0 auto 10px;border-radius:18px;display:grid;place-items:center;font-size:27px;background:rgba(255,255,255,.06)}
.cs-head.r-ok .cs-ico{background:var(--ok-g);box-shadow:0 0 28px rgba(78,227,160,.25)}
.cs-head.r-warn .cs-ico{background:var(--warn-g)}.cs-head.r-busy .cs-ico{background:var(--busy-g)}
.cs-head.r-bad .cs-ico{background:var(--bad-g);box-shadow:0 0 28px rgba(255,93,122,.25)}
.cs-num{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums}
.cs-head .res{margin-top:8px;font-size:11.5px}
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 14px}
.cs-grid div{padding:10px 12px;border-radius:13px;background:rgba(255,255,255,.04);border:1px solid var(--stroke)}
.cs-grid small{display:block;font-size:10.5px;color:var(--muted)}
.cs-grid b{display:block;margin-top:3px;font-size:14px;font-variant-numeric:tabular-nums}
.sheet h4{margin:14px 2px 10px;font-size:12px;color:#c9d0f5;text-transform:uppercase;letter-spacing:1.2px}
.legs{display:flex;flex-direction:column;gap:0;margin-bottom:8px}
.leg{position:relative;display:flex;gap:12px;padding:0 0 14px 2px}
.leg:not(:last-child)::before{content:"";position:absolute;left:8px;top:18px;bottom:0;width:2px;background:linear-gradient(var(--stroke-hi),var(--stroke))}
.leg-dot{width:14px;height:14px;margin-top:3px;border-radius:50%;flex:none;background:var(--rc);box-shadow:0 0 10px var(--rc);border:2px solid #14162a}
.leg-body{flex:1;min-width:0;font-size:13px}
.leg-body b{font-weight:700}
.leg-body small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.leg-r{flex:none;text-align:right;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.note{font-size:12px;color:var(--muted);line-height:1.45;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px dashed var(--stroke)}

/* ---------- отчёты ---------- */
.rep-hero{display:flex;align-items:center;gap:16px;padding:18px;position:relative;overflow:hidden}
.donut{position:relative;width:132px;height:132px;flex:none}
.donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:13}
.donut .d-bg{stroke:rgba(255,255,255,.07)}
.donut .d-seg{stroke-linecap:butt;transition:stroke-dasharray 1.1s var(--ease),stroke-dashoffset 1.1s var(--ease);filter:drop-shadow(0 0 5px currentColor)}
.donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-c b{font-size:30px;font-weight:800;line-height:1;color:var(--ok);text-shadow:0 0 18px rgba(78,227,160,.4)}
.donut-c span{font-size:10.5px;color:var(--muted);margin-top:4px;letter-spacing:.6px;text-transform:uppercase}
.legend{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.lg{display:flex;align-items:center;gap:8px;font-size:12.5px}
.lg i{width:10px;height:10px;border-radius:50%;flex:none;background:var(--c);box-shadow:0 0 8px var(--c)}
.lg span{flex:1;color:#c4cbef}
.lg b{font-variant-numeric:tabular-nums}
.lg em{font-style:normal;color:var(--muted);min-width:42px;text-align:right;font-variant-numeric:tabular-nums}
.c-ok{--c:var(--ok)}.c-warn{--c:var(--warn)}.c-busy{--c:var(--busy)}.c-bad{--c:var(--bad)}
.rep-total{margin:12px 2px 0;font-size:12px;color:var(--muted);text-align:center}

.panel{padding:16px;margin-top:2px}
.bars-h{display:flex;flex-direction:column;gap:11px}
.bh{display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:center;font-size:12px}
.bh span{color:#c4cbef}
.bh i{display:block;height:9px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden}
.bh u{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--acc1),var(--acc2));box-shadow:0 0 10px rgba(127,160,255,.45);transition:width 1s var(--ease)}
.bh em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums;min-width:68px;text-align:right}

.hourly{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;align-items:end;height:120px}
.hr{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:1px}
.hr u,.hr s{display:block;width:100%;border-radius:3px 3px 0 0;transition:height 1s var(--ease)}
.hr u{background:linear-gradient(180deg,#7bf2c0,#2fd08c)}
.hr s{background:linear-gradient(180deg,rgba(255,193,90,.8),rgba(255,120,110,.55));text-decoration:none;border-radius:3px 3px 0 0}
.hr u+s{border-radius:3px 3px 0 0}
.hours-ax{display:flex;justify-content:space-between;margin-top:7px;font-size:10px;color:var(--muted)}
.chart-leg{display:flex;gap:14px;margin-top:10px;font-size:11px;color:var(--muted)}
.chart-leg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}

.daily{display:flex;align-items:flex-end;gap:5px;height:130px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.daily::-webkit-scrollbar{display:none}
.dy{flex:1 0 22px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:1px}
.dy u,.dy s,.dy em,.dy b{display:block;width:100%;text-decoration:none;font-style:normal}
.dy .a{background:linear-gradient(180deg,#7bf2c0,#2fd08c)}
.dy .n{background:linear-gradient(180deg,#ffd98a,#f0a93a)}
.dy .b{background:linear-gradient(180deg,#c8b6ff,#8d6bff)}
.dy .e{background:linear-gradient(180deg,#ff9bb0,#ff4d6d)}
.dy>*:first-child{border-radius:4px 4px 0 0}
.daily-ax{display:flex;gap:5px;margin-top:6px;overflow:hidden;font-size:9.5px;color:var(--muted)}
.daily-ax span{flex:1 0 22px;text-align:center}

.ltab{display:flex;flex-direction:column;gap:12px}
.lt{padding:12px 13px;border-radius:15px;background:rgba(255,255,255,.04);border:1px solid var(--stroke)}
.lt-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.lt-top b{font-size:14px}.lt-top span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.stack{display:flex;height:9px;border-radius:9px;overflow:hidden;background:rgba(255,255,255,.07)}
.stack u{display:block;height:100%;width:0;transition:width 1s var(--ease)}
.stack .a{background:var(--ok)}.stack .n{background:var(--warn)}.stack .b{background:var(--busy)}.stack .e{background:var(--bad)}
.lt-st{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:9px;font-size:11.5px;color:var(--muted)}
.lt-st b{color:var(--text);font-weight:700}
.lt-st .ok{color:var(--ok)}

/* ---------- журнал событий ---------- */
.ev-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.evs{padding:12px 8px;text-align:center;border-radius:15px;border:1px solid var(--stroke);background:rgba(34,37,52,.5)}
.evs b{display:block;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.evs span{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.evs.bad b{color:var(--bad)}.evs.warn b{color:var(--warn)}.evs.info b{color:var(--acc1)}
.timeline{display:flex;flex-direction:column;gap:10px}
.tl{position:relative;display:flex;gap:12px;padding:13px 14px;overflow:hidden;border-radius:16px;background:var(--glass);border:1px solid var(--stroke);animation:rise .45s var(--ease) both;
  transition:transform .25s var(--ease),border-color .25s}
.tl:hover{transform:translateX(3px);border-color:var(--stroke-hi)}
.tl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--lc);box-shadow:0 0 14px var(--lc)}
.tl.lv-critical,.tl.lv-error{--lc:var(--bad)}.tl.lv-warn{--lc:var(--warn)}.tl.lv-info{--lc:var(--acc1)}
.tl.lv-critical{background:linear-gradient(90deg,rgba(255,93,122,.12),var(--glass) 55%)}
.tl-ico{width:36px;height:36px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:17px;background:rgba(255,255,255,.06)}
.lv-critical .tl-ico,.lv-error .tl-ico{background:var(--bad-g)}.lv-warn .tl-ico{background:var(--warn-g)}.lv-info .tl-ico{background:rgba(127,224,255,.12)}
.tl-body{flex:1;min-width:0}
.tl-title{font-size:13.5px;font-weight:700;line-height:1.35}
.tl-detail{margin-top:3px;font-size:12px;color:var(--muted);line-height:1.4;word-break:break-word}
.tl-time{flex:none;text-align:right;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.5}
.tl-time b{display:block;color:var(--text);font-size:12.5px}
.tl.mini-p{padding:10px 12px}

.err-box{padding:14px;border-radius:14px;color:#ffc9d3;background:var(--bad-g);border:1px solid rgba(255,93,122,.3);font-size:13px;line-height:1.45}

@media (max-width:370px){
  .rep-hero{flex-direction:column}.line-load{grid-template-columns:1fr}.kpis.k3{grid-template-columns:1fr 1fr}
  .dlg-num{font-size:15px}.tiles{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .eq i,.ring,.dlg-bar u,.radar::before,.live-pill i{animation:none!important}
}