:root{
  --bg:#f4f6fa;--panel:#fff;--ink:#1b2333;--muted:#6b7588;--line:#e3e7ef;
  --side:#141b2b;--side-ink:#c6cddc;--accent:#4f46e5;--accent-soft:#eef0ff;
  --ok:#15803d;--ok-soft:#e7f6ec;--warn:#b45309;--warn-soft:#fdf3e2;--bad:#b91c1c;--bad-soft:#fdecec;--info:#0e7490;--info-soft:#e3f5f8;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;color:var(--ink);background:var(--bg);display:flex;min-height:100vh}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:22px;margin:0 0 4px}
h2{font-size:16px;margin:0 0 12px}
h3{font-size:14px;margin:0 0 8px}
.sub{color:var(--muted);margin:0 0 18px}
.side{width:220px;flex:0 0 220px;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;color:#fff;padding:16px 16px 8px}
.brand.big{color:var(--ink);font-size:18px;justify-content:center;margin-bottom:12px}
.logo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;font-size:12px;font-weight:800}
.side nav{flex:1;padding:4px 8px}
.side .group{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#7b859a;margin:14px 8px 4px}
.side nav a{display:flex;align-items:center;gap:8px;color:var(--side-ink);padding:7px 8px;border-radius:7px}
.side nav a:hover{background:#1f2840;text-decoration:none}
.side nav a.on{background:#262f4a;color:#fff}
.side .ic{width:18px;text-align:center;opacity:.8}
.pill{margin-left:auto;background:#2f3a5c;color:#fff;border-radius:10px;padding:0 7px;font-size:11px;min-width:22px;text-align:center}
.pill.hot{background:var(--ok)}
.me{padding:12px 16px;font-size:12px;border-top:1px solid #222b40}
.me a{color:#a5b4fc}
main{flex:1;min-width:0;padding:24px 28px;max-width:1400px}
main.wide{max-width:none}
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.head .sub{margin:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px}
.card.flush{padding:0;overflow:auto}
.card.flush h2{padding:14px 16px 0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.kpi .l{color:var(--muted);font-size:12px}
.kpi .v{font-size:22px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi .s{color:var(--muted);font-size:12px;margin-top:2px}
.kpi.main{border-color:#c7c9ff;background:linear-gradient(180deg,#fff, #f6f6ff)}
.delta{font-size:12px;font-weight:600;margin-left:4px}
.delta.up{color:var(--ok)}.delta.down{color:var(--bad)}
table{width:100%;border-collapse:collapse}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap}
th{font-size:12px;color:var(--muted);font-weight:600;background:#fafbfd;position:sticky;top:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
td.wrap{white-space:normal}
tr:hover td{background:#fafbff}
tfoot td{font-weight:700;background:#fafbfd}
.badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;background:#eef1f6;color:#3b4456}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.bad{background:var(--bad-soft);color:var(--bad)}
.badge.info{background:var(--info-soft);color:var(--info)}
.badge.muted{color:var(--muted)}
.mno{display:inline-block;padding:1px 7px;border-radius:5px;font-size:12px;font-weight:600;background:#eef1f6}
.mno-orange{background:#fff1e6;color:#c2410c}.mno-sfr{background:#fdeaea;color:#b91c1c}.mno-bouygues{background:#e6f0ff;color:#1d4ed8}.mno-free{background:#f0f0f0;color:#111}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:12px;background:var(--ok-soft);color:var(--ok);border:1px solid #c9ead4}
.flash.bad{background:var(--bad-soft);color:var(--bad);border-color:#f5caca}
.flash.warn{background:var(--warn-soft);color:var(--warn);border-color:#f4dcb4}
.alerts .flash{margin-bottom:8px}
form.inline{display:inline}
label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:10px}
label input,label select,label textarea{display:block;width:100%;margin-top:4px}
input,select,textarea,button{font:inherit}
input,select,textarea{border:1px solid #cfd5e1;border-radius:7px;padding:7px 9px;background:#fff;color:var(--ink)}
input[type=checkbox]{width:auto;display:inline;margin:0 6px 0 0}
textarea{min-height:80px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
button,.btn{display:inline-block;border:1px solid #cfd5e1;background:#fff;border-radius:7px;padding:7px 14px;cursor:pointer;color:var(--ink);font-weight:600}
button:hover,.btn:hover{background:#f3f5fa;text-decoration:none}
button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary:hover,.btn.primary:hover{background:#4338ca}
button.danger{color:var(--bad);border-color:#f0c4c4}
button.sm,.btn.sm{padding:3px 9px;font-size:12px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row>label{flex:1;min-width:140px}
.chk{display:flex;align-items:center;gap:4px;font-weight:500;color:var(--ink);font-size:13px}
.chks{display:flex;gap:12px;flex-wrap:wrap;margin:4px 0 10px}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.period{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.period input{padding:5px 8px}
.presets a{margin-left:8px;font-size:13px}
.presets a.on{font-weight:700;text-decoration:underline}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filters input,.filters select{padding:5px 8px}
.chart{position:relative;height:260px}
.chart.sm{height:200px}
.bar{height:8px;background:#eef1f6;border-radius:4px;overflow:hidden;min-width:80px}
.bar>i{display:block;height:100%;background:var(--accent)}
.bar.full>i{background:var(--bad)}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:6px;animation:pulse 1.5s infinite}
@keyframes pulse{50%{opacity:.3}}
.st-ivr{color:var(--info)}.st-dialing{color:var(--warn)}.st-bridged{color:var(--ok)}
.trace{margin:0;padding-left:18px}.trace li{margin:2px 0}
.tree{border-left:2px solid var(--line);padding-left:14px;margin-left:6px}
.menu-card{border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-bottom:12px;background:#fcfcfe}
.menu-card.entry{border-color:#c7c9ff}
.opt{display:grid;grid-template-columns:60px 1.3fr 1fr 1fr 1fr 1fr auto;gap:8px;align-items:end}
.opt label{margin:0}
.help{font-size:12px;color:var(--muted);margin:-4px 0 10px}
code{background:#f1f3f8;padding:1px 5px;border-radius:4px;font-size:12.5px}
.empty{color:var(--muted);text-align:center;padding:24px}
body.login{display:grid;place-items:center;background:linear-gradient(135deg,#141b2b,#2c2f6b)}
.login-card{width:340px}
.login-card button{width:100%;margin-top:6px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tabs a{padding:8px 12px;border-bottom:2px solid transparent;color:var(--muted);font-weight:600}
.tabs a.on{border-color:var(--accent);color:var(--ink)}
@media (max-width:900px){
  body{flex-direction:column}
  .side{width:auto;height:auto;position:static;flex:none}
  .side nav{display:flex;flex-wrap:wrap}.side .group{width:100%}
  main{padding:16px}
  .g2,.g3{grid-template-columns:1fr}
  .opt{grid-template-columns:1fr 1fr}
}