:root{--bg:#f3f5f9;--card:#fff;--ink:#1c2430;--mut:#667085;--line:#e3e8ef;--pri:#1f4fd8;--pri-d:#173fb0;--side:#0f1b33;--green:#16a085;--amber:#e08e0b;--red:#d64545;--blue:#1f6feb;--grey:#8792a2;--r:10px}
@media (prefers-color-scheme:dark){:root{--bg:#0e1420;--card:#172033;--ink:#e6ebf4;--mut:#93a0b8;--line:#27324a;--side:#0a1020}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--pri);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:22px;margin:0}h2{font-size:17px;margin:0}h3{font-size:15px;margin:0}h4{margin:14px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--mut)}
small,.muted{color:var(--mut)}small{font-size:12px}
#app{display:flex;min-height:100vh}
#side{width:220px;background:var(--side);color:#cdd6e6;flex:none;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:10px;align-items:center;padding:16px}.brand b{display:block;color:#fff}.brand small{color:#8fa0c0}
.logo{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#2f6bff,#16a085);color:#fff;font-weight:800;display:grid;place-items:center;font-size:20px}
#side nav{flex:1;overflow:auto;padding:4px 8px}#side nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:#cdd6e6;margin-bottom:2px}
#side nav a:hover{background:#18284a;text-decoration:none}#side nav a.on{background:#2346b8;color:#fff}.ic{width:20px;text-align:center}.lb{flex:1}
.side-foot{padding:14px;color:#6f81a3}
.badge{background:var(--red);color:#fff;border-radius:10px;padding:0 6px;font-size:11px;font-style:normal}
#main{flex:1;min-width:0}
header{display:flex;gap:12px;align-items:center;padding:10px 20px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.burger{display:none;background:none;border:0;font-size:22px;color:var(--ink)}
.search{flex:1;position:relative;max-width:560px}.search input{width:100%}
.gres{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px #0003;max-height:60vh;overflow:auto;z-index:30}
.gres a,.gres i{display:block;padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink)}.gres a:hover{background:var(--bg);text-decoration:none}
.bell{position:relative;font-size:18px;text-decoration:none!important}.bell .badge{position:absolute;top:-6px;right:-8px}
.who{line-height:1.2;text-align:right}.who b{display:block}
#view{padding:20px;max-width:1500px;margin:auto}
.ph{margin-bottom:14px}.ph.row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%;min-height:38px}
input:focus,select:focus,textarea:focus{outline:2px solid #1f6feb55;border-color:var(--pri)}
input[type=checkbox]{width:auto;min-height:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:var(--card);cursor:pointer;min-height:38px;white-space:nowrap}
.btn:hover{text-decoration:none;filter:brightness(.97)}.btn.pri{background:var(--pri);border-color:var(--pri);color:#fff}.btn.pri:hover{background:var(--pri-d)}
.btn.ghost{background:transparent}.btn.sm{padding:4px 10px;min-height:30px;font-size:13px}.btn.big{min-height:48px;font-size:16px;padding:10px 22px}.btn.block{width:100%}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:16px}.ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px;flex-wrap:wrap}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}.cols>.card{margin-bottom:16px}.cols2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px}.kpis.big{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.kpis.sm{grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:8px}
.kpi{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--grey);border-radius:var(--r);padding:12px 14px;display:block;color:var(--ink)}a.kpi:hover{text-decoration:none;box-shadow:0 2px 10px #0002}
.kpi small{display:block}.kpi b{font-size:26px;line-height:1.2}.kpis.sm .kpi b{font-size:20px}.kpi em{font-style:normal;font-size:12px;color:var(--red)}
.kpi.blue{border-left-color:var(--blue)}.kpi.green{border-left-color:var(--green)}.kpi.amber{border-left-color:var(--amber)}.kpi.red{border-left-color:var(--red);background:#d645450f}.kpi.grey{border-left-color:var(--grey)}
.pill{display:inline-block;padding:2px 9px;border-radius:12px;font-size:12px;font-weight:600;background:#e9edf3;color:#445;white-space:nowrap}
.p-low{background:#e8f1ff;color:#2a5db0}.p-norm{background:#eef0f4}.p-high{background:#fff0d9;color:#a15c00}.p-crit{background:#ffe0e0;color:#b32020}
.s-new{background:#e3ecff;color:#2346b8}.s-act{background:#dff5f0;color:#0e7a65}.s-wait{background:#fff0d9;color:#a15c00}.s-done{background:#e6e9ee;color:#556}.s-cancel{background:#eee;color:#999;text-decoration:line-through}
.sla-ok{background:#d9f5e6;color:#0b7a45}.sla-met{background:#dde9ff;color:#1d4fb0}.sla-risk{background:#fff0b8;color:#8a6200}.sla-breached{background:#ffd9d9;color:#b01c1c}.sla-na{background:#eee;color:#888}
@media (prefers-color-scheme:dark){.pill{background:#26324a;color:#c4cee0}.sla-ok{background:#12402c;color:#6fe0a8}.sla-met{background:#1b2f5c;color:#9bbcff}.sla-risk{background:#4a3a05;color:#ffd96b}.sla-breached{background:#531b1b;color:#ff9b9b}.p-crit{background:#531b1b;color:#ff9b9b}.p-high{background:#4a3205;color:#ffc66b}.s-new{background:#1b2f5c;color:#9bbcff}.s-act{background:#103d34;color:#6fe0c4}}
.bar{height:6px;background:#e5e9f0;border-radius:4px;overflow:hidden;margin:8px 0}.bar i{display:block;height:100%;background:var(--green)}.bar.sla-risk i{background:#f2b705}.bar.sla-breached i{background:var(--red)}.bar.sla-met i,.bar.sla-na i{background:var(--blue)}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--mut);white-space:nowrap}
tr.row-breached td:first-child{box-shadow:inset 4px 0 var(--red)}tr.row-risk td:first-child{box-shadow:inset 4px 0 #f2b705}tr.row-ok td:first-child{box-shadow:inset 4px 0 var(--green)}tr.row-met td:first-child,tr.row-na td:first-child{box-shadow:inset 4px 0 var(--blue)}tr.row-new td:first-child{box-shadow:inset 4px 0 var(--blue)}
tbody tr:hover{background:#8aa5d614}
.cf,.score{display:inline-block;min-width:40px;text-align:center;padding:2px 8px;border-radius:6px;font-weight:700}.cf.good,.score.good{background:#d9f5e6;color:#0b7a45}.cf.mid,.score.mid{background:#fff0b8;color:#8a6200}.cf.bad,.score.bad{background:#ffd9d9;color:#b01c1c}.bad-t{color:var(--red);font-weight:700}
.score{font-size:15px}.score-k b{font-size:30px}
table.rank td:first-child{font-weight:700}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}.seg button{border:0;background:none;padding:7px 12px;cursor:pointer;white-space:nowrap}.seg button.on{background:var(--pri);color:#fff}.seg.scroll{max-width:100%;overflow-x:auto;margin-bottom:14px}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:16px}
.filters .fld{min-width:130px;flex:1 1 130px}.filters .grow{flex:3 1 260px}.expbtn{display:flex;gap:8px;margin-left:auto}
.fld{display:block}.fld>span{display:block;font-size:12px;color:var(--mut);margin-bottom:3px}.fld em{color:var(--red);font-style:normal}.fld.wide{grid-column:1/-1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.chk{display:flex;gap:7px;align-items:center}.multi{display:flex;flex-wrap:wrap;gap:6px 16px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
dl{margin:0}.dl2{display:grid;grid-template-columns:140px 1fr;gap:5px 10px}.dl2 dt{color:var(--mut)}.dl2 dd{margin:0}
.mini4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.mini4 div{background:var(--bg);border-radius:8px;padding:8px}.mini4 small{display:block}
.sla-panel{border-top:4px solid var(--green)}.sla-panel.sla-b-risk{border-top-color:#f2b705}.sla-panel.sla-b-breached{border-top-color:var(--red)}.sla-panel.sla-b-met,.sla-panel.sla-b-na{border-top-color:var(--blue)}
.timeline{list-style:none;margin:0;padding:0;position:relative}.timeline li{display:grid;grid-template-columns:78px 1fr;gap:14px;padding:0 0 14px;position:relative}
.timeline li:before{content:"";position:absolute;left:90px;top:6px;bottom:-6px;width:2px;background:var(--line)}.timeline li:last-child:before{display:none}
.timeline li:after{content:"";position:absolute;left:85px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--blue);border:2px solid var(--card)}
.timeline .tl-sla:after{background:var(--red)}.timeline .tl-note:after,.timeline .tl-visit:after{background:var(--grey)}.timeline .tl-assign:after{background:var(--amber)}
.timeline time{font-size:12px;color:var(--mut);text-align:right}.timeline li>div{padding-left:14px}.timeline small{display:block}
.tcards{display:grid;gap:10px}.tcard{display:block;background:var(--card);border:1px solid var(--line);border-left:6px solid var(--green);border-radius:var(--r);padding:12px 14px;color:var(--ink)}.tcard:hover{text-decoration:none;box-shadow:0 2px 10px #0002}
.tcard.sla-b-risk{border-left-color:#f2b705}.tcard.sla-b-breached{border-left-color:var(--red)}.tcard.sla-b-met,.tcard.sla-b-na{border-left-color:var(--blue)}
.tcard .r1{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.tcard .r2{font-weight:600;margin-top:4px}.tcard .r3{color:var(--mut)}
.cres a,.cres i{display:block;padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin-top:4px;color:var(--ink)}.cres a:hover{background:var(--bg);text-decoration:none}
.cinfo{background:var(--bg);border-radius:var(--r);padding:12px;margin-top:10px}.warn{background:#fff3cd;color:#7a5800;border-radius:8px;padding:8px 10px;margin:8px 0}
.slabox{background:var(--bg);border-radius:8px;padding:10px;margin:12px 0}
.tel{display:inline-block;padding:3px 10px;background:#dff5f0;color:#0e7a65;border-radius:14px;margin:0 4px 4px 0;font-weight:600}.callrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.visit{border-top:1px solid var(--line);padding:10px 0}.photos{display:flex;gap:8px;flex-wrap:wrap}.photos img{height:100px;border-radius:8px}.photos figure{margin:0}.photos figcaption{font-size:11px;color:var(--mut)}
.matrow{display:grid;grid-template-columns:1fr 70px 30px;gap:6px;margin-bottom:6px}
.hb{display:grid;gap:7px}.hbr{display:grid;grid-template-columns:minmax(90px,170px) 1fr 44px;gap:8px;align-items:center}.hbr .l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hbr .t{background:var(--bg);border-radius:5px;height:16px;overflow:hidden}.hbr .t i{display:block;height:100%;border-radius:5px}.hbr b{text-align:right}
.chart{width:100%;height:auto}.chart text{font-size:10px;fill:var(--mut)}.chart .gl{stroke:var(--line);stroke-width:1}.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;font-size:12px}.legend i,.donut li i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.donut{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.donut svg{width:130px;flex:none}.donut ul{list-style:none;margin:0;padding:0;font-size:13px}.dc{font-size:18px;font-weight:700;fill:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.chip{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:3px 10px}.chip a{margin-left:6px;color:var(--mut)}
.nlist{list-style:none;margin:0;padding:0}.nlist li{padding:10px 4px;border-bottom:1px solid var(--line)}.nlist li.unread{background:#1f6feb12;border-left:3px solid var(--blue);padding-left:10px}.nlist a{color:var(--ink);display:block}.nlist small{display:block}
.empty{padding:26px;text-align:center;color:var(--mut)}
.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;z-index:50;padding:12px}.mbox{background:var(--card);border-radius:12px;width:min(520px,100%);max-height:94vh;display:flex;flex-direction:column}.mbox.wide{width:min(760px,100%)}
.mh{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}.mb{padding:16px;overflow:auto}.mf{padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}.x{background:none;border:0;cursor:pointer;font-size:16px;color:var(--mut)}
.mb .fld{margin-bottom:10px}.mb .grid2 .fld{margin-bottom:0}
#toasts{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:90;display:grid;gap:8px}.toast{background:#173a2e;color:#fff;padding:10px 16px;border-radius:8px;box-shadow:0 4px 16px #0005}.toast.err{background:#8a1f1f}
.login{min-height:100vh;display:grid;place-items:center;width:100%;padding:16px}.login form{width:min(400px,100%);display:grid;gap:12px}.brand.big{padding:0 0 8px}.brand.big b{color:var(--ink);font-size:18px}.hint{font-size:12px;color:var(--mut);margin:0}
.grow{flex:1}
@media (max-width:900px){
 #side{position:fixed;left:-240px;z-index:40;transition:left .2s;width:230px}#side.open{left:0}.burger{display:block}
 header{padding:8px 12px;flex-wrap:wrap}.search{order:5;flex-basis:100%;max-width:none}.who small{display:none}
 #view{padding:12px}.cols,.grid2,.cols2{grid-template-columns:1fr}.dl2{grid-template-columns:110px 1fr}.mini4{grid-template-columns:repeat(2,1fr)}
 .kpi b{font-size:22px}.actions .btn{flex:1 1 auto}.btn.big{width:100%}.expbtn{margin-left:0}
 th,td{padding:7px 6px;font-size:13px}
}
@media print{#side,header,.actions,.seg,.filters{display:none!important}body{background:#fff}.card{border:0}}
.sync{font-size:12px;white-space:nowrap}.sync.ok{color:var(--green)}.sync.off{color:var(--red);font-weight:700}
@media (max-width:900px){.sync{display:none}}
.contact{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.btn.call{background:#16a085;border-color:#16a085;color:#fff;font-weight:600;min-height:44px}.btn.wa{background:#25d366;border-color:#25d366;color:#fff;font-weight:600;min-height:44px}