:root {
    /* Catppuccin Latte (mode clair) */
    --base:#eff1f5; --mantle:#e6e9ef; --crust:#dce0e8; --text:#4c4f69; --subtext:#6c6f85;
    --surface0:#ccd0da; --surface1:#bcc0cc; --overlay:#9ca0b0;
    --blue:#1e66f5; --lavender:#7287fd; --green:#40a02b; --yellow:#df8e1d; --red:#d20f39;
    --peach:#fe640b; --mauve:#8839ef; --teal:#179299; --sky:#04a5e5; --pink:#ea76cb;
    --glass:rgba(239,241,245,.55); --glass-border:rgba(76,79,105,.14); --glass-strong:rgba(239,241,245,.75);
    --shadow:0 10px 30px rgba(76,79,105,.12);
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dark:1; } }
  :root[data-theme="dark"], :root:not([data-theme="light"]) { }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --base:#1e1e2e; --mantle:#181825; --crust:#11111b; --text:#cdd6f4; --subtext:#a6adc8;
      --surface0:#313244; --surface1:#45475a; --overlay:#6c7086;
      --blue:#89b4fa; --lavender:#b4befe; --green:#a6e3a1; --yellow:#f9e2af; --red:#f38ba8;
      --peach:#fab387; --mauve:#cba6f7; --teal:#94e2d5; --sky:#89dceb; --pink:#f5c2e7;
      --glass:rgba(30,30,46,.55); --glass-border:rgba(205,214,244,.12); --glass-strong:rgba(24,24,37,.72);
      --shadow:0 12px 40px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"] {
    --base:#1e1e2e; --mantle:#181825; --crust:#11111b; --text:#cdd6f4; --subtext:#a6adc8;
    --surface0:#313244; --surface1:#45475a; --overlay:#6c7086;
    --blue:#89b4fa; --lavender:#b4befe; --green:#a6e3a1; --yellow:#f9e2af; --red:#f38ba8;
    --peach:#fab387; --mauve:#cba6f7; --teal:#94e2d5; --sky:#89dceb; --pink:#f5c2e7;
    --glass:rgba(30,30,46,.55); --glass-border:rgba(205,214,244,.12); --glass-strong:rgba(24,24,37,.72);
    --shadow:0 12px 40px rgba(0,0,0,.35);
  }
  * { box-sizing:border-box; }
  html, body { margin:0; min-height:100%; }
  body {
    font: 15px/1.5 -apple-system, "Inter", "Segoe UI", system-ui, sans-serif;
    color:var(--text); background:var(--base); overflow-x:hidden;
  }
  .bg { position:fixed; inset:0; z-index:-1; overflow:hidden; background:var(--base); }
  .bg span { position:absolute; border-radius:50%; filter:blur(90px); opacity:.45; animation:float 22s ease-in-out infinite alternate; }
  .bg .a { width:52vw; height:52vw; left:-12vw; top:-18vw; background:var(--mauve); }
  .bg .b { width:44vw; height:44vw; right:-10vw; top:8vw; background:var(--blue); animation-delay:-7s; }
  .bg .c { width:40vw; height:40vw; left:28vw; bottom:-20vw; background:var(--peach); animation-delay:-14s; }
  @keyframes float { to { transform:translate(6vw,4vw) scale(1.08); } }
  .wrap { max-width:1180px; margin:0 auto; padding:24px 16px 56px; }
  .glass { background:var(--glass); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
           border:1px solid var(--glass-border); border-radius:18px; box-shadow:var(--shadow); }
  header.glass { display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; padding:16px 20px; margin-bottom:18px; }
  header h1 { font-size:18px; margin:0; font-weight:650; letter-spacing:.2px; display:flex; align-items:center; gap:10px; }
  .dot { width:10px; height:10px; border-radius:50%; background:var(--overlay); box-shadow:0 0 0 4px color-mix(in srgb, var(--overlay) 25%, transparent); }
  .dot.on { background:var(--green); box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 25%, transparent); }
  .dot.off { background:var(--red); box-shadow:0 0 0 4px color-mix(in srgb, var(--red) 25%, transparent); }
  .meta { display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--subtext); font-size:13px; }
  .meta b { color:var(--text); font-weight:600; }
  .kpis { margin-left:auto; display:flex; gap:10px; }
  .kpi { padding:8px 14px; border-radius:12px; background:var(--glass-strong); border:1px solid var(--glass-border); text-align:center; min-width:82px; }
  .kpi .v { font-size:20px; font-weight:700; line-height:1.1; }
  .kpi .l { font-size:11px; color:var(--subtext); text-transform:uppercase; letter-spacing:.6px; }
  .grid { display:grid; grid-template-columns:1fr; gap:18px; }
  @media (min-width: 900px) { .grid { grid-template-columns: 1.35fr .65fr; } }
  .grid.one { grid-template-columns:1fr; }
  section.glass { padding:18px 20px; }
  h2 { margin:0 0 12px; font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--subtext); font-weight:600; display:flex; align-items:center; gap:8px; }
  h2 .count { background:var(--surface0); color:var(--text); border-radius:999px; padding:0 8px; font-size:12px; }
  .empty { color:var(--subtext); font-size:14px; padding:14px 0; }
  .call { display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:14px 16px; border-radius:14px; margin-bottom:10px;
          background:var(--glass-strong); border:1px solid var(--glass-border); }
  .call .who { font-size:17px; font-weight:650; }
  .call .who .arrow { color:var(--overlay); margin:0 8px; }
  .call .sub { color:var(--subtext); font-size:13px; }
  .badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
  .badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
  .badge.ringing { background:color-mix(in srgb, var(--yellow) 22%, transparent); color:var(--yellow); }
  .badge.connecting { background:color-mix(in srgb, var(--blue) 22%, transparent); color:var(--blue); }
  .badge.connected { background:color-mix(in srgb, var(--green) 22%, transparent); color:var(--green); }
  .badge.ended { background:color-mix(in srgb, var(--overlay) 25%, transparent); color:var(--subtext); }
  .badge.connected::before { animation:pulse 1.2s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity:.3; } }
  .timer { font-variant-numeric:tabular-nums; font-weight:600; font-size:15px; text-align:right; }
  .stats { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--subtext); }
  .stats span b { color:var(--text); font-variant-numeric:tabular-nums; }
  .dtmf { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:2px; color:var(--mauve); }
  table { width:100%; border-collapse:collapse; font-size:13.5px; }
  th { text-align:left; color:var(--subtext); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.6px; padding:6px 8px; border-bottom:1px solid var(--glass-border); }
  td { padding:9px 8px; border-bottom:1px solid var(--glass-border); vertical-align:middle; }
  tr.row { cursor:pointer; transition:background .15s; }
  tr.row:hover { background:color-mix(in srgb, var(--lavender) 12%, transparent); }
  tr.row.sel { background:color-mix(in srgb, var(--lavender) 20%, transparent); }
  td.num { font-variant-numeric:tabular-nums; text-align:right; color:var(--subtext); }
  .reason { color:var(--subtext); font-size:12.5px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .log { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; max-height:260px; overflow:auto; }
  .log div { padding:3px 0; border-bottom:1px dashed var(--glass-border); display:flex; gap:10px; }
  .log time { color:var(--overlay); flex:none; }
  .log .warn { color:var(--yellow); } .log .error { color:var(--red); } .log .debug { color:var(--subtext); }
  /* Diagramme en échelle */
  .ladder { margin-top:18px; }
  .ladder .head { display:grid; grid-template-columns:1fr 1fr 1fr; text-align:center; font-size:12px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; }
  .ladder .head span { padding:8px 6px; border-radius:10px; background:var(--glass-strong); border:1px solid var(--glass-border); margin:0 6px; }
  .ladder .head .pbx { color:var(--peach); } .ladder .head .gw { color:var(--lavender); } .ladder .head .aws { color:var(--teal); }
  .lanes { position:relative; margin-top:8px; }
  .lanes::before, .lanes::after, .lanes .mid { content:""; position:absolute; top:0; bottom:0; width:2px; background:linear-gradient(var(--surface1), transparent); }
  .lanes::before { left:calc(16.66% - 1px); } .lanes .mid { left:calc(50% - 1px); } .lanes::after { left:calc(83.33% - 1px); }
  .ev { position:relative; height:44px; }
  .ev .t { position:absolute; left:0; top:12px; font-size:11px; color:var(--overlay); font-variant-numeric:tabular-nums; width:60px; }
  .ev .line { position:absolute; top:22px; height:2px; background:var(--overlay); }
  .ev .line::after { content:""; position:absolute; top:-4px; border:5px solid transparent; }
  .ev .line.r::after { right:-2px; border-left-color:var(--overlay); }
  .ev .line.l::after { left:-2px; border-right-color:var(--overlay); }
  .ev .lbl { position:absolute; top:0; transform:translateX(-50%); font-size:12.5px; font-weight:600; white-space:nowrap; padding:1px 8px; border-radius:8px; background:var(--glass-strong); border:1px solid var(--glass-border); }
  .ev .det { position:absolute; top:26px; transform:translateX(-50%); font-size:11px; color:var(--subtext); white-space:nowrap; max-width:46%; overflow:hidden; text-overflow:ellipsis; }
  .ev.sip .line { background:var(--peach); } .ev.sip .line.r::after { border-left-color:var(--peach); } .ev.sip .line.l::after { border-right-color:var(--peach); }
  .ev.aws .line { background:var(--teal); } .ev.aws .line.r::after { border-left-color:var(--teal); } .ev.aws .line.l::after { border-right-color:var(--teal); }
  .ev.note .lbl { left:50%; background:color-mix(in srgb, var(--lavender) 25%, var(--glass-strong)); top:10px; }
  .ev.err .lbl { color:var(--red); }
  .toolbar { display:flex; gap:10px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
  .toolbar .id { font-family:ui-monospace, Menlo, monospace; font-size:12px; color:var(--subtext); }
  button { font:inherit; font-size:13px; padding:6px 12px; border-radius:10px; border:1px solid var(--glass-border); background:var(--glass-strong); color:var(--text); cursor:pointer; }
  button:hover { border-color:var(--lavender); }

  a.btn, button.btn { display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-size:13px; padding:6px 12px; border-radius:10px;
    border:1px solid var(--glass-border); background:var(--glass-strong); color:var(--text); cursor:pointer; white-space:nowrap; }
  a.btn:hover, button.btn:hover { border-color:var(--lavender); color:var(--lavender); }
  a.back { color:var(--subtext); text-decoration:none; font-size:13px; } a.back:hover { color:var(--lavender); }
  .facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px 18px; }
  .fact { padding:10px 12px; border-radius:12px; background:var(--glass-strong); border:1px solid var(--glass-border); }
  .fact .l { font-size:11px; color:var(--subtext); text-transform:uppercase; letter-spacing:.6px; }
  .fact .v { font-size:15px; font-weight:600; word-break:break-all; font-variant-numeric:tabular-nums; }
  .fact .v.mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; font-weight:500; }
  .ladder.big .ev { height:52px; }
  .ladder.big .ev .det { max-width:60%; }
  td.act { text-align:right; white-space:nowrap; }