/* ═══════════════════════════════════════════════════════════════════
   V-Routes — theme tokens (light + dark)
   Modernized: flat surfaces, one blue accent, no gloss/gradient noise.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;

  /* Surfaces — cool-neutral, premium */
  --bg:        #f7f8fa;   /* app canvas */
  --bg-elev-1: #ffffff;   /* sidebar */
  --bg-elev-2: #ffffff;   /* cards */
  --bg-elev-3: #f4f6f9;   /* tinted surfaces / hovered rows */
  --panel-2:   #f1f4f8;   /* inset panels (toggles, chips) */
  --field:     #ffffff;   /* form controls */

  /* Text */
  --text:      #0b1220;
  --text-2:    #404a60;
  --mut:       #8993a5;
  --mut-2:     #aab2c1;

  /* Borders — hairline */
  --border:    #ecedf1;
  --border-2:  #e2e4ea;
  --border-3:  #cfd4de;

  /* Brand blue */
  --blue-50:   #eef3ff;
  --blue-100:  #dbe6ff;
  --blue-200:  #bcd2ff;
  --blue-300:  #93b6fb;
  --blue-400:  #5b8dff;
  --blue:      #2563eb;   /* primary */
  --blue-hi:   #1d4ed8;   /* hover / active */
  --blue-ink:  #1e40af;
  --blue-deep: #1e3a8a;

  /* Accent-tinted surfaces (semantic, theme-aware) */
  --accent-soft:   #eef3ff;   /* nav hover / soft blue fill */
  --accent-soft-2: #dbe6ff;
  --accent-border: #d7e3ff;

  /* Status — fg (text/icon), bg (fill), border for each. Muted & refined. */
  --green:#16a34a; --green-fg:#15803d; --green-bg:#e9f7ee; --green-border:#c6ebd3;
  --red:#dc2626;   --red-fg:#b42318;   --red-bg:#fdecec;   --red-border:#f6d4d4;
  --orange:#ea7a20;--orange-fg:#b7590f;--orange-bg:#fdf1e6;--orange-border:#f6dcbf;
  --yellow:#d97706;--yellow-fg:#b45309;--yellow-bg:#fdf3e7;--yellow-border:#f5dcb8;
  --indigo:#4f46e5;--indigo-fg:#4338ca;--indigo-bg:#eef0fe;--indigo-border:#d6dafb;

  /* Legacy tint aliases (kept so older selectors still resolve) */
  --green-tint:var(--green-bg);
  --red-tint:var(--red-bg);
  --orange-tint:var(--orange-bg);
  --yellow-tint:var(--yellow-bg);
  --indigo-tint:var(--indigo-bg);

  --accent:    var(--blue);
  --accent-hi: var(--blue-hi);

  /* Chart direction categories (validated categorical set) */
  --dir-in:  #16a34a;   /* inbound  */
  --dir-out: #2563eb;   /* outbound */
  --dir-int: #d97706;   /* internal */

  /* Skeleton shimmer */
  --skeleton:      #eceff4;
  --skeleton-sheen:rgba(255,255,255,.7);

  /* Focus ring + scrollbar */
  --ring:      rgba(37,99,235,.16);
  --scroll:    rgba(16,24,40,.16);
  --scroll-hi: rgba(16,24,40,.26);

  /* Shadows — soft, layered */
  --shadow-1: 0 1px 2px rgba(16,24,40,.05);
  --shadow-2: 0 6px 18px rgba(16,24,40,.07);
  --shadow-3: 0 16px 40px rgba(16,24,40,.12);
  --shadow-blue: 0 1px 2px rgba(37,99,235,.35);

  /* Radii */
  --r-sm: 6px;  --r-md: 9px;  --r-lg: 13px;  --r-xl: 15px;  --r-2xl: 20px;

  /* Shared height for the topbar + sidebar brand band (keeps them aligned) */
  --topbar-h: 72px;

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --fast: 120ms var(--ease);
  --med:  220ms var(--ease);
}

/* ─────── Dark theme ─────── */
:root[data-theme="dark"]{
  color-scheme: dark;

  --bg:        #0b0e14;
  --bg-elev-1: #12161f;
  --bg-elev-2: #12161f;
  --bg-elev-3: #171c27;
  --panel-2:   #1b212d;
  --field:     #141922;

  --text:      #eaedf3;
  --text-2:    #aeb7c6;
  --mut:       #7c8698;
  --mut-2:     #5a6474;

  --border:    #20262f;
  --border-2:  #2a313d;
  --border-3:  #38414f;

  --blue-50:   #151d2c;   /* soft blue fill on dark */
  --blue-100:  #1c2740;
  --blue-200:  #26365a;
  --blue-300:  #5b8dff;
  --blue-400:  #7ba5ff;
  --blue:      #5b8dff;
  --blue-hi:   #7ba5ff;
  --blue-ink:  #a9c4ff;
  --blue-deep: #cfe0ff;

  --accent-soft:   rgba(91,141,255,.13);
  --accent-soft-2: rgba(91,141,255,.22);
  --accent-border: rgba(91,141,255,.30);

  --green:#22c55e; --green-fg:#4ade80; --green-bg:rgba(34,197,94,.13);  --green-border:rgba(34,197,94,.30);
  --red:#ef4444;   --red-fg:#f87171;   --red-bg:rgba(239,68,68,.13);    --red-border:rgba(239,68,68,.32);
  --orange:#f97316;--orange-fg:#fb923c;--orange-bg:rgba(249,115,22,.13);--orange-border:rgba(249,115,22,.30);
  --yellow:#f59e0b;--yellow-fg:#fbbf24;--yellow-bg:rgba(245,158,11,.13);--yellow-border:rgba(245,158,11,.30);
  --indigo:#818cf8;--indigo-fg:#a5b4fc;--indigo-bg:rgba(129,140,248,.14);--indigo-border:rgba(129,140,248,.32);

  --green-tint:var(--green-bg);
  --red-tint:var(--red-bg);
  --orange-tint:var(--orange-bg);
  --yellow-tint:var(--yellow-bg);
  --indigo-tint:var(--indigo-bg);

  /* Chart direction categories — dark steps (validated) */
  --dir-in:  #059669;
  --dir-out: #3b82f6;
  --dir-int: #d97706;

  --skeleton:      #1c2740;
  --skeleton-sheen:rgba(255,255,255,.06);

  --ring:      rgba(59,130,246,.32);
  --scroll:    rgba(255,255,255,.14);
  --scroll-hi: rgba(255,255,255,.26);

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 6px 18px rgba(0,0,0,.5);
  --shadow-3: 0 16px 40px rgba(0,0,0,.6);
  --shadow-blue: 0 1px 2px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font: 14px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  letter-spacing:-0.005em;
  transition:background var(--med), color var(--med);
}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-hi)}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

/* Scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:20px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--scroll-hi);background-clip:padding-box}

/* Shared wordmark (login + sidebar) */
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-0.02em;color:var(--text)}
.logo-badge{
  width:38px;height:38px;border-radius:11px;
  background:var(--blue);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:17px;
  letter-spacing:-0.01em;
}

/* ─────── Login — split brand stage + form ─────── */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:
    radial-gradient(760px 460px at 12% 8%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 60%),
    var(--bg);
}
.login-shell{
  width:100%;max-width:940px;
  display:grid;grid-template-columns:1.06fr .94fr;
  background:var(--bg-elev-2);
  border:1px solid var(--border);
  border-radius:var(--r-2xl);
  box-shadow:var(--shadow-3);
  overflow:hidden;
}
@media (max-width:820px){
  .login-shell{grid-template-columns:1fr;max-width:430px}
  .login-stage{display:none}
}

/* Left brand stage — deliberately dark in both themes */
.login-stage{
  position:relative;overflow:hidden;isolation:isolate;
  color:#e9f0ff;
  padding:36px 34px 30px;
  display:flex;flex-direction:column;justify-content:space-between;gap:26px;
  min-height:520px;
  background:
    radial-gradient(560px 280px at 82% -12%, rgba(59,130,246,.34), transparent 64%),
    linear-gradient(162deg,#0d1730 0%, #0a1122 58%, #090e1c 100%);
}
.login-stage::before{ /* faint dot-grid signal texture */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 10%,transparent 88%);
}
.stage-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stage-brand{display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:16px;letter-spacing:-.02em;color:#fff}
.stage-brand .logo-badge{width:34px;height:34px;border-radius:10px;font-size:16px;box-shadow:0 6px 18px rgba(37,99,235,.45)}
.stage-tag{
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#9fb6e6;padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
}
.stage-mid{display:flex;flex-direction:column;gap:14px}
.stage-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7aa2f0}
.stage-head{margin:0;font-size:27px;line-height:1.12;font-weight:700;letter-spacing:-.03em;color:#fff;text-wrap:balance;max-width:15ch}
.stage-sub{margin:0;font-size:13px;line-height:1.55;color:#a9bbdd;max-width:34ch}
.stage-live{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#c6d4ef;font-weight:500;margin-top:2px}
.stage-live .live-dot{
  width:8px;height:8px;border-radius:50%;background:#34d399;
  box-shadow:0 0 0 0 rgba(52,211,153,.55);animation:live-pulse 1.9s ease-out infinite;
}
.stage-live b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
@keyframes live-pulse{
  0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}
  70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
}

/* Live voice waveform */
.wave{display:flex;align-items:center;gap:3px;height:60px;margin-top:6px}
.wave-bar{
  flex:1 1 0;min-width:2px;max-width:6px;height:100%;border-radius:3px;
  background:linear-gradient(180deg,#7db0ff,#3b82f6);
  opacity:.85;transform:scaleY(.2);transform-origin:center;
  animation:wave-bounce 1s var(--ease) infinite;
}
@keyframes wave-bounce{
  0%,100%{transform:scaleY(var(--lo,.2))}
  50%{transform:scaleY(var(--hi,1))}
}

.stage-feats{display:flex;flex-direction:column;gap:11px}
.stage-feat{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#c2d0ec;font-weight:500}
.stage-feat svg{width:16px;height:16px;flex-shrink:0;color:#5b9bff}

@media (prefers-reduced-motion:reduce){
  .wave-bar{animation:none;transform:scaleY(var(--hi,.7))}
  .stage-live .live-dot{animation:none}
}

/* Right form panel */
.login-panel{padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
@media (max-width:820px){.login-panel{padding:34px 30px}}
.login-head{margin-bottom:22px}
.login-head h1{margin:0 0 6px;font-size:22px;font-weight:700;letter-spacing:-0.02em;color:var(--text)}
.login-head p{margin:0;color:var(--mut);font-size:13px}
.login-head .login-host{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  padding:5px 11px;border-radius:999px;
  background:var(--accent-soft);color:var(--blue-hi);border:1px solid var(--accent-border);
  font-size:11.5px;font-weight:600;letter-spacing:.2px;
}
.login-host .host-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.login-body label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin:14px 0 5px}
.login-body label:first-child{margin-top:0}
.login-foot{margin-top:22px;font-size:11.5px;color:var(--mut-2);text-align:center;line-height:1.5}

/* ─────── Input field with leading icon + optional reveal ─────── */
.field{position:relative;display:flex;align-items:center}
.field .field-ic{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  display:inline-flex;color:var(--mut-2);pointer-events:none;line-height:0;
  transition:color var(--fast);
}
.field .field-ic svg{width:17px;height:17px;display:block}
.field .input{width:100%;padding-left:40px}
.field:focus-within .field-ic{color:var(--blue)}
.field.has-reveal .input{padding-right:44px}
.field .field-reveal{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border:0;border-radius:8px;
  background:transparent;color:var(--mut);cursor:pointer;
  transition:background var(--fast),color var(--fast);
}
.field .field-reveal:hover{background:var(--panel-2);color:var(--blue-hi)}
.field .field-reveal svg{width:16px;height:16px;display:block}

/* ─────── Forms ─────── */
label{display:block;font-size:12px;color:var(--text-2);margin:18px 0 6px;font-weight:600;letter-spacing:-0.005em}
.input{
  width:100%;padding:11px 14px;
  background:var(--field);border:1px solid var(--border-2);color:var(--text);
  border-radius:var(--r-md);outline:none;font-size:14px;
  transition:border-color var(--fast), box-shadow var(--fast), background var(--fast);
  letter-spacing:-0.005em;
}
.input::placeholder{color:var(--mut-2)}
.input:hover{border-color:var(--border-3)}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--ring)}
.input[readonly]{background:var(--bg-elev-3);color:var(--text-2)}
select.input{appearance:none;padding-right:32px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2394a3b8' d='M5 6L0 0h10z'/></svg>");background-repeat:no-repeat;background-position:right 12px center;background-size:9px}

/* ─────── Buttons ─────── */
.btn{
  cursor:pointer;border:0;border-radius:var(--r-md);padding:9px 14px;
  font-weight:600;font-size:13px;color:#fff;letter-spacing:-0.01em;
  display:inline-flex;align-items:center;gap:6px;justify-content:center;
  transition:background var(--fast), transform 60ms ease, box-shadow var(--fast), opacity var(--fast), border-color var(--fast), color var(--fast);
  -webkit-tap-highlight-color:transparent;
}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:active:not(:disabled){transform:scale(.97)}
.btn svg{width:14px;height:14px}

.btn-prim{
  background:var(--blue);
  color:#fff;padding:10px 16px;
  box-shadow:var(--shadow-blue);
}
.btn-prim:hover:not(:disabled){background:var(--blue-hi)}
.btn-prim:active:not(:disabled){background:var(--blue-ink)}
.btn-prim.login-full{width:100%;margin-top:24px;padding:13px;font-size:14px;border-radius:var(--r-md)}

.btn-ok{background:var(--green);color:#fff}
.btn-ok:hover:not(:disabled){filter:brightness(1.06)}

.btn-err{background:var(--red);color:#fff}
.btn-err:hover:not(:disabled){filter:brightness(1.06)}

.btn-sec{background:var(--bg-elev-3);color:var(--text);border:1px solid var(--border-2)}
.btn-sec:hover:not(:disabled){background:var(--panel-2);border-color:var(--border-3)}

.btn-ghost{background:transparent;color:var(--text-2);border:1px solid var(--border-2)}
.btn-ghost:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent-border);color:var(--blue-hi)}

.btn-sm{padding:6px 11px;font-size:12px;border-radius:8px;gap:4px}
.btn-sm svg{width:12px;height:12px}
.btn-xs{padding:4px 9px;font-size:11.5px;border-radius:7px}

.btn-pill{
  background:var(--accent-soft);
  color:var(--blue-hi);
  border:1px solid var(--accent-border);
  padding:6px 12px;font-size:12px;border-radius:999px;gap:5px;font-weight:600;
}
.btn-pill:hover:not(:disabled){background:var(--accent-soft-2);border-color:var(--blue-300)}
.btn-pill.danger{color:var(--red-fg);background:var(--red-bg);border-color:var(--red-border)}
.btn-pill.danger:hover:not(:disabled){filter:brightness(1.04)}

.login-err{margin-top:14px;padding:11px 14px;border:1px solid var(--red-border);background:var(--red-bg);border-radius:var(--r-md);color:var(--red-fg);font-size:13px;text-align:center;font-weight:500}

/* ─────── Layout ─────── */
.layout{display:grid;grid-template-columns:244px 1fr;grid-template-rows:minmax(0,1fr);height:100vh;overflow:hidden}
/* Theme-following sidebar (modern SaaS: light on light, dark on dark). */
.sidebar{
  background:var(--bg-elev-1);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  padding:0 12px 14px;
  position:relative;color:var(--text-2);
}

/* Brand header — same height as the topbar so the two bottom borders align */
.side-brand{
  display:flex;align-items:center;gap:11px;flex-shrink:0;
  height:var(--topbar-h);
  margin:0 -12px 10px;padding:0 20px;
  border-bottom:1px solid var(--border);
}
.side-brand .logo-badge{
  width:34px;height:34px;border-radius:9px;font-size:15px;
  background:linear-gradient(140deg,#5b9bff,#2563eb 70%);
  box-shadow:0 4px 12px rgba(37,99,235,.4);
}
.side-brand-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.side-brand-name{font-weight:700;font-size:15px;letter-spacing:-0.02em;color:var(--text)}
.side-brand-sub{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mut-2);margin-top:2px}

.nav{display:flex;flex-direction:column;gap:15px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:6px 0 4px}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-group-label{
  font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mut-2);padding:0 12px 5px;
}
/* Collapsible sections */
.nav-group.collapsible{gap:0}
.nav-group.collapsible > .nav-group-label{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:0;cursor:pointer;padding:7px 12px;border-radius:8px;
  transition:color var(--fast),background var(--fast);
}
.nav-group.collapsible > .nav-group-label:hover{color:var(--text-2);background:var(--panel-2)}
.nav-group.collapsible > .nav-group-label .ngl-chev{display:inline-flex;line-height:0;transition:transform 160ms ease}
.nav-group.collapsible > .nav-group-label .ngl-chev svg{width:13px;height:13px}
.nav-group.collapsible:not(.open) > .nav-group-label .ngl-chev{transform:rotate(-90deg)}
.nav-group-items{display:flex;flex-direction:column;gap:2px;overflow:hidden}
.nav-group.collapsible:not(.open) > .nav-group-items{display:none}
.nav a{
  display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:9px;
  color:var(--text-2);font-weight:500;font-size:13.5px;cursor:pointer;user-select:none;
  transition:background var(--fast), color var(--fast);
  letter-spacing:-0.005em;position:relative;
}
.nav a .nav-ic{display:inline-flex;line-height:0;flex-shrink:0}
.nav a svg{width:18px;height:18px;color:var(--mut);flex-shrink:0;transition:color var(--fast)}
.nav a:hover{background:var(--panel-2);color:var(--text)}
.nav a:hover svg{color:var(--text-2)}
.nav a.active{
  background:var(--accent-soft);
  color:var(--blue-hi);font-weight:600;
}
.nav a.active svg{color:var(--blue)}
.nav .badge{
  margin-left:auto;background:var(--blue);color:#fff;
  font-size:10px;font-weight:700;border-radius:999px;padding:2px 7px;
  min-width:20px;text-align:center;letter-spacing:0;line-height:1.5;
}

.side-foot{border-top:1px solid var(--border);padding:12px 4px 0;margin-top:8px;display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.side-user{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-md)}
.avatar{
  width:36px;height:36px;border-radius:10px;
  background:var(--blue);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;
  letter-spacing:-0.01em;flex-shrink:0;
}
.side-user-name{font-weight:600;font-size:13.5px;color:var(--text);letter-spacing:-0.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.side-user-ext{color:var(--mut);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}

.side-user-wrap{position:relative}
.side-user{
  width:100%;background:transparent;border:0;cursor:pointer;
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-md);
  color:var(--text);font-family:inherit;text-align:left;
  transition:background 120ms;
}
.side-user:hover{background:var(--panel-2)}
.side-user-chev{margin-left:auto;color:var(--mut);display:inline-flex;align-items:center;line-height:0}
.side-user-chev svg{width:14px;height:14px;transition:transform 120ms}
.side-user[aria-expanded="true"] .side-user-chev svg{transform:rotate(180deg)}
.side-user-menu{
  display:none;position:absolute;left:0;right:0;bottom:calc(100% + 6px);
  background:var(--bg-elev-2);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-2);
  padding:6px;z-index:30;
}
.side-user-menu.open{display:block;animation:side-menu-in 140ms ease}
@keyframes side-menu-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.side-user-item{
  width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;
  background:transparent;border:0;border-radius:6px;cursor:pointer;
  font:600 13px/1 inherit;color:var(--text);text-align:left;
}
.side-user-item:hover{background:var(--panel-2);color:var(--blue-hi)}
.side-user-item svg{width:14px;height:14px}
.sign-out{
  display:inline-flex;align-self:flex-start;align-items:center;gap:6px;
  padding:6px 12px;margin-left:8px;
  background:var(--bg-elev-3);color:var(--blue-hi);
  border:1px solid var(--border-2);border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:-0.01em;
  cursor:pointer;
  transition:background var(--fast), color var(--fast), transform 60ms, border-color var(--fast);
}
.sign-out:hover{background:var(--accent-soft);color:var(--blue-hi);border-color:var(--accent-border)}
.sign-out:active{transform:scale(.96)}
.sign-out svg{width:12px;height:12px}

/* Always render the vertical scrollbar (never appear/disappear between tabs or
   while a page's async content settles) and reserve its gutter, so the layout
   never shifts sideways. */
.main{overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:stable;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--border-2) transparent}
.main::-webkit-scrollbar{width:10px}
.main::-webkit-scrollbar-track{background:transparent}
.main::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:6px;border:3px solid transparent;background-clip:content-box}
.main::-webkit-scrollbar-thumb:hover{background:var(--mut-2);background-clip:content-box}
.topbar{
  position:sticky;top:0;
  background:color-mix(in srgb, var(--bg-elev-1) 82%, transparent);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--border);
  padding:0 30px;
  display:flex;align-items:center;gap:16px;z-index:5;height:var(--topbar-h);flex-shrink:0;
}
.topbar-lead{display:flex;align-items:center;gap:13px;min-width:0}
.topbar-ic{
  width:38px;height:38px;flex-shrink:0;border-radius:10px;
  display:grid;place-items:center;background:var(--accent-soft);color:var(--blue);
}
.topbar-ic svg{width:19px;height:19px}
.topbar-head{min-width:0;display:flex;flex-direction:column}
.topbar h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-0.02em;color:var(--text);line-height:1.2}
.topbar-desc{margin:2px 0 0;font-size:12px;color:var(--mut);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:56ch}
.topbar-desc:empty{display:none}
.topbar .spacer{flex:1}
.topbar-actions{display:flex;align-items:center;gap:8px}
.topbar-actions:empty{display:none}
@media (max-width:900px){.topbar-desc{display:none}.topbar-ic{display:none}}

/* Segmented control (time range) */
.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--border);border-radius:9px;padding:2px}
.seg button{border:0;background:transparent;color:var(--mut);font:600 12px/1 inherit;padding:6px 12px;border-radius:7px;cursor:pointer;transition:var(--fast)}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--bg-elev-2);color:var(--text);box-shadow:var(--shadow-1)}

/* Generic icon button (topbar bell etc.) */
.tb-icon{width:34px;height:34px;border-radius:9px;border:1px solid var(--border-2);background:var(--bg-elev-2);color:var(--text-2);display:grid;place-items:center;cursor:pointer;transition:var(--fast);position:relative;flex-shrink:0}
.tb-icon:hover{background:var(--panel-2);color:var(--blue-hi);border-color:var(--accent-border)}
.tb-icon svg{width:17px;height:17px}

/* Sidebar search / ⌘K trigger */
.side-search{
  display:flex;align-items:center;gap:8px;margin:2px 2px 10px;padding:8px 10px;width:calc(100% - 4px);
  border:1px solid var(--border-2);border-radius:9px;background:var(--bg-elev-3);color:var(--mut);
  font:inherit;font-size:12.5px;cursor:text;transition:var(--fast);
}
.side-search:hover{border-color:var(--border-3);color:var(--text-2)}
.side-search .ss-ic{display:inline-flex;line-height:0}
.side-search .ss-ic svg{width:15px;height:15px}
.side-search .ss-k{margin-left:auto;font-size:11px;font-weight:600;border:1px solid var(--border-2);border-radius:5px;padding:1px 6px;color:var(--mut-2)}

/* ⌘K command palette */
.cmdk-back{position:fixed;inset:0;z-index:300;background:rgba(8,12,20,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding:14vh 20px 20px;animation:tin 140ms var(--ease)}
.cmdk{width:100%;max-width:560px;background:var(--bg-elev-2);border:1px solid var(--border-2);border-radius:14px;box-shadow:var(--shadow-3);overflow:hidden}
.cmdk-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.cmdk-ic{display:inline-flex;color:var(--mut)}
.cmdk-ic svg{width:17px;height:17px}
.cmdk-input{flex:1;border:0;background:transparent;outline:none;color:var(--text);font-size:15px}
.cmdk-input::placeholder{color:var(--mut-2)}
.cmdk-esc{font-size:10.5px;font-weight:700;color:var(--mut-2);border:1px solid var(--border-2);border-radius:5px;padding:2px 6px}
.cmdk-list{max-height:340px;overflow-y:auto;padding:6px}
.cmdk-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;background:transparent;color:var(--text);padding:9px 10px;border-radius:9px;cursor:pointer}
.cmdk-row.on{background:var(--accent-soft)}
.cmdk-row-ic{width:30px;height:30px;flex-shrink:0;border-radius:8px;display:grid;place-items:center;background:var(--bg-elev-3);color:var(--mut)}
.cmdk-row.on .cmdk-row-ic{background:var(--bg-elev-2);color:var(--blue)}
.cmdk-row-ic svg{width:16px;height:16px}
.cmdk-row-t{font-size:13.5px;font-weight:600}
.cmdk-row-d{font-size:11.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:420px}
.cmdk-empty{padding:24px;text-align:center;color:var(--mut);font-size:13px}

/* Notification bell */
.notif-wrap{position:relative}
.notif-dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--red);border:1.5px solid var(--bg-elev-2)}
.notif-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);width:320px;background:var(--bg-elev-2);border:1px solid var(--border-2);border-radius:12px;box-shadow:var(--shadow-3);z-index:40;overflow:hidden}
.notif-menu.open{display:block;animation:tin 140ms var(--ease)}
.notif-head{padding:12px 14px;font-size:12.5px;font-weight:700;border-bottom:1px solid var(--border)}
.notif-body{max-height:340px;overflow-y:auto;padding:6px}
.notif-loading{padding:26px;display:flex;justify-content:center}
.notif-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;background:transparent;padding:9px 10px;border-radius:9px;cursor:pointer;color:var(--text)}
.notif-item:hover{background:var(--panel-2)}
.notif-i{width:30px;height:30px;flex-shrink:0;border-radius:8px;display:grid;place-items:center}
.notif-i svg{width:15px;height:15px}
.notif-i.vm{background:var(--accent-soft);color:var(--blue)}
.notif-i.miss{background:var(--red-bg);color:var(--red-fg)}
.notif-t{font-size:13px;font-weight:600}
.notif-d{font-size:11.5px;color:var(--mut)}
.notif-empty{padding:26px;text-align:center;color:var(--mut);font-size:12.5px}

/* Theme toggle */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border-radius:var(--r-md);
  background:var(--bg-elev-3);border:1px solid var(--border-2);color:var(--text-2);
  cursor:pointer;flex-shrink:0;
  transition:background var(--fast), color var(--fast), border-color var(--fast), transform 60ms;
}
.theme-toggle:hover{background:var(--accent-soft);border-color:var(--accent-border);color:var(--blue-hi)}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle svg{width:17px;height:17px;display:block}
.theme-toggle .ic-sun{display:none}
.theme-toggle .ic-moon{display:block}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}

.reg-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border:1px solid var(--border-2);
  background:var(--bg-elev-3);border-radius:999px;
  font-size:12px;color:var(--mut);font-weight:600;
}
.reg-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--mut-2)}
.reg-chip.on {background:var(--green-bg);border-color:var(--green-border);color:var(--green-fg)}
.reg-chip.on .dot{background:var(--green);box-shadow:0 0 8px rgba(16,185,129,.55)}
.reg-chip.off{background:var(--red-bg);border-color:var(--red-border);color:var(--red-fg)}
.reg-chip.off .dot{background:var(--red)}
.reg-chip.pend{background:var(--yellow-bg);border-color:var(--yellow-border);color:var(--yellow-fg)}
.reg-chip.pend .dot{background:var(--yellow)}

.page{padding:24px 30px 40px;max-width:1480px;width:100%;display:flex;flex-direction:column;gap:18px}

/* ─────── Cards & grids ─────── */
.card{
  background:var(--bg-elev-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:20px;
  box-shadow:var(--shadow-1);
  transition:border-color var(--fast), box-shadow var(--fast);
}
.card:hover{border-color:var(--border-2);box-shadow:var(--shadow-2)}
.card h3{margin:0 0 14px;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--mut);text-transform:uppercase}

.grid{display:grid;gap:16px}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.g-4{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:1fr}}
@media (max-width:720px){.layout{grid-template-columns:1fr}.sidebar{display:none}.g-2{grid-template-columns:1fr}}

.stat-card{
  display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden;
}
.stat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.stat-label{font-size:11px;color:var(--mut);letter-spacing:.06em;font-weight:700;text-transform:uppercase}
.stat-ic{
  width:38px;height:38px;flex-shrink:0;border-radius:10px;
  display:grid;place-items:center;
  background:var(--accent-soft);color:var(--blue);
}
.stat-ic svg{width:19px;height:19px}
.stat-ic.ok  {background:var(--green-bg); color:var(--green)}
.stat-ic.err {background:var(--red-bg);   color:var(--red)}
.stat-ic.warn{background:var(--yellow-bg);color:var(--yellow)}
.stat-main{display:flex;align-items:baseline;gap:8px;margin-top:12px;flex-wrap:wrap}
.stat-value{
  font-size:30px;font-weight:700;letter-spacing:-0.03em;line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.stat-unit{font-size:13px;font-weight:600;color:var(--mut);letter-spacing:-.01em}
.stat-delta{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11.5px;font-weight:700;padding:2px 7px 2px 5px;border-radius:999px;
  font-variant-numeric:tabular-nums;line-height:1.4;
}
.stat-delta svg{width:12px;height:12px}
.stat-delta.up{color:var(--green-fg);background:var(--green-bg)}
.stat-delta.down{color:var(--red-fg);background:var(--red-bg)}
.stat-delta.flat{color:var(--mut);background:var(--panel-2)}
.stat-foot{margin-top:12px;min-height:32px;display:flex;align-items:flex-end}
.stat-sub{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:6px}
.stat-spark{width:100%;display:block}
.stat-prog{width:100%;display:flex;flex-direction:column;gap:6px}
.stat-prog-track{height:6px;background:var(--panel-2);border-radius:4px;overflow:hidden}
.stat-prog-fill{height:100%;background:var(--blue);border-radius:4px;width:0;transition:width .8s var(--ease)}
.stat-prog-lbl{font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.stat-card:hover{transform:translateY(-2px)}
.stat-card{transition:border-color var(--fast),box-shadow var(--fast),transform var(--fast)}

/* ─────── Skeleton loading ─────── */
.skeleton{
  position:relative;overflow:hidden;background:var(--skeleton);
  border-radius:6px;display:block;
}
.skeleton::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--skeleton-sheen),transparent);
  animation:skel-sheen 1.35s ease-in-out infinite;
}
@keyframes skel-sheen{100%{transform:translateX(100%)}}
.skel-value{height:30px;width:76px;border-radius:8px}
.skel-chart{height:150px;width:100%;border-radius:10px}
.skel-line{height:12px;width:100%;border-radius:6px}
@media (prefers-reduced-motion:reduce){.skeleton::after{animation:none}}

/* Chart entrance — a gentle rise/fade when data draws in */
.chart-in{animation:chart-in .5s var(--ease) both}
@keyframes chart-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ─────── Dashboard charts ─────── */
.chart{position:relative}
.chart-svg{display:block;width:100%;overflow:visible}
.chart-line{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:chart-draw 1s var(--ease) forwards}
@keyframes chart-draw{to{stroke-dashoffset:0}}
.chart-area{opacity:0;animation:chart-fade .7s ease .25s forwards}
@keyframes chart-fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .chart-line{stroke-dashoffset:0;animation:none}
  .chart-area{opacity:1;animation:none}
}
/* Crosshair + tooltip */
.chart-tip{
  position:absolute;pointer-events:none;z-index:4;opacity:0;transform:translate(-50%,-100%);
  transition:opacity .12s;
  background:var(--bg-elev-2);border:1px solid var(--border-2);border-radius:9px;
  box-shadow:var(--shadow-2);padding:7px 10px;min-width:104px;white-space:nowrap;
}
.chart-tip.show{opacity:1}
.chart-tip-d{font-size:11px;color:var(--mut);font-weight:600;margin-bottom:3px}
.chart-tip-v{font-size:13px;color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.chart-tip-row{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2)}
.chart-tip-row .d{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.chart-tip-row b{margin-left:auto;color:var(--text);font-variant-numeric:tabular-nums}

/* Donut */
/* Direction-breakdown card: center the donut+legend group in the stretched card */
.donut-card-center{display:flex;flex-direction:column}
.donut-card-center > h3{flex:0 0 auto}
.chart-center{flex:1;display:flex;align-items:center;justify-content:center}
.chart-center .donut-wrap{justify-content:center}

.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.donut{position:relative;flex-shrink:0}
.donut-seg{transition:opacity var(--fast)}
.donut-center{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;
}
.donut-center .n{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;line-height:1}
.donut-center .l{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-top:3px}
.donut-legend{display:flex;flex-direction:column;gap:10px;flex:1;min-width:150px}
.donut-leg{display:flex;align-items:center;gap:10px;font-size:13px}
.donut-leg .d{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.donut-leg .lbl{color:var(--text-2);font-weight:500}
.donut-leg .val{margin-left:auto;color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.donut-leg .pct{color:var(--mut);font-size:11.5px;width:38px;text-align:right;font-variant-numeric:tabular-nums}

/* Hourly heatmap */
.heat{display:grid;grid-template-columns:34px repeat(24,minmax(0,1fr));gap:3px;margin-top:8px}
.heat-h{font-size:9px;color:var(--mut-2);text-align:center;font-variant-numeric:tabular-nums}
.heat-d{font-size:11px;color:var(--mut);padding-right:6px;display:flex;align-items:center;justify-content:flex-end;font-weight:600}
.heat-c{height:19px;border-radius:4px;background:var(--bg-elev-3);transition:transform var(--fast)}
.heat-c[data-v]:hover{transform:scale(1.18);outline:2px solid var(--bg-elev-2)}
.heat-scale{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11px;color:var(--mut)}
.heat-scale .ramp{display:flex;gap:2px}
.heat-scale .ramp i{width:16px;height:10px;border-radius:2px;display:block}

/* Ranked list rows (top callers / by-extension) */
.rank-row{display:flex;align-items:center;gap:11px;padding:8px 2px;border-bottom:1px solid var(--border);font-size:13px}
.rank-row:last-child{border-bottom:0}
.rank-no{width:20px;height:20px;flex-shrink:0;border-radius:6px;background:var(--bg-elev-3);color:var(--mut);font-size:11px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.rank-row:nth-child(2) .rank-no{background:var(--accent-soft);color:var(--blue)}
.rank-main{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-val{margin-left:auto;color:var(--mut);font-variant-numeric:tabular-nums;flex-shrink:0}
.ext-bar-row{display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
.ext-bar-top{display:flex;justify-content:space-between;font-size:12.5px;gap:8px}
.ext-bar-track{height:7px;background:var(--panel-2);border-radius:4px;overflow:hidden}
.ext-bar-fill{height:100%;background:var(--blue);border-radius:4px;width:0;transition:width .8s var(--ease)}

/* ─────── Tables ─────── */
.table-wrap{overflow-x:auto;margin:0 -4px}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.table th{
  text-align:left;color:var(--mut);font-weight:600;letter-spacing:.04em;
  font-size:10.5px;padding:11px 12px;border-bottom:1px solid var(--border);
  text-transform:uppercase;position:sticky;top:0;white-space:nowrap;
  background:var(--bg-elev-2);z-index:1;
}
.table th:first-child,.table td:first-child{padding-left:6px}
.table th:last-child,.table td:last-child{padding-right:6px}
.table th.num,.table td.num{text-align:right;font-variant-numeric:tabular-nums}
.table td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text)}
.table tbody tr{transition:background var(--fast)}
.table tbody tr:hover td{background:var(--bg-elev-3)}
.table tbody tr.clickable{cursor:pointer}
.table tbody tr:last-child td{border-bottom:0}

/* ─────── Data-table console (toolbar, summary, rich rows) ─────── */
.tbl-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.tbl-summary{display:flex;gap:8px;flex-wrap:wrap}
.sum-pill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;
  background:var(--bg-elev-3);border:1px solid var(--border);
  font-size:12.5px;font-weight:600;color:var(--mut);
}
.sum-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--mut-2)}
.sum-pill.on .dot{background:var(--green);box-shadow:0 0 7px color-mix(in srgb,var(--green) 55%,transparent)}
.sum-pill.off .dot{background:var(--mut-2)}
.sum-pill b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:700}
.tbl-search{position:relative;display:flex;align-items:center;flex:1;max-width:280px;min-width:180px;margin-left:auto}
.tbl-search .field-ic{position:absolute;left:12px;color:var(--mut-2);pointer-events:none;display:inline-flex;line-height:0}
.tbl-search .field-ic svg{width:16px;height:16px}
.tbl-search .input{width:100%;padding-left:38px;padding-top:8px;padding-bottom:8px}

/* ─────── Data-page system (unified across every table page) ─────── */
/* Card wrapper */
.dpage{background:var(--bg-elev-2);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-1);overflow:hidden}
/* Toolbar: search + inline filters + actions, in one row */
.dtoolbar{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
/* Dedicated search section (its own row), with the filters on the row below */
.dsearchbar{display:flex;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.dsearchbar .dsearch{flex:1}
.dsearchbar .dsearch input{height:42px;font-size:14px}
.dfilters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 16px;border-bottom:1px solid var(--border)}
.dfilters-sp{flex:1}
/* count badge on the Advanced-filters button */
.dbtn .cnt{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--blue);color:#fff;font-size:10.5px;font-weight:700}
/* Advanced filters panel (collapsible) */
.dadv{display:none;gap:18px 22px;flex-wrap:wrap;align-items:flex-end;padding:15px 16px;border-bottom:1px solid var(--border);background:var(--bg-elev-3)}
.dadv.open{display:flex}
.dadv-f{display:flex;flex-direction:column;gap:6px}
.dadv-f > label{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.dadv-f .input,.dadv-f .dsel{height:36px}
.dadv-range{display:flex;align-items:center;gap:7px;color:var(--mut);font-size:12px}
.dadv-range .input{max-width:190px}
.dadv-dur{display:flex;align-items:center;gap:7px;color:var(--mut);font-size:12px}
.dadv-dur .input{width:86px;text-align:right}
.dadv-reset{margin-left:auto;align-self:center;border:0;background:transparent;color:var(--blue);font-weight:650;font-size:12.5px;cursor:pointer;padding:6px 8px;border-radius:7px}
.dadv-reset:hover{background:var(--accent-soft)}
/* Search field */
.dsearch{position:relative;display:flex;align-items:center;flex:1;min-width:220px}
.dsearch .mag{position:absolute;left:12px;color:var(--mut);pointer-events:none;display:flex;line-height:0}
.dsearch .mag svg{width:16px;height:16px}
.dsearch input{width:100%;height:38px;border:1px solid var(--border-2);border-radius:10px;background:var(--bg-elev-3);color:var(--text);
  padding:0 74px 0 38px;font:inherit;font-size:13.5px;outline:none;transition:border-color var(--fast),box-shadow var(--fast),background var(--fast)}
.dsearch input::placeholder{color:var(--mut-2)}
.dsearch input:focus{border-color:var(--accent-border);background:var(--bg-elev-2);box-shadow:0 0 0 3px var(--accent-soft)}
.dsearch .clr{position:absolute;right:38px;display:none;border:0;background:transparent;color:var(--mut);cursor:pointer;padding:4px;border-radius:6px;line-height:0}
.dsearch .clr:hover{background:var(--panel-2);color:var(--text)}
.dsearch .clr svg{width:15px;height:15px}
.dsearch .kbd{position:absolute;right:11px;font-size:11px;font-weight:700;color:var(--mut-2);border:1px solid var(--border-2);border-radius:5px;padding:1px 6px;pointer-events:none}
.dsearch.filled .clr{display:flex}
.dsearch.filled .kbd{display:none}
/* Select + ghost button in the toolbar */
.dsel{height:38px;border:1px solid var(--border-2);border-radius:10px;background:var(--bg-elev-2);color:var(--text);padding:0 30px 0 12px;font:inherit;font-size:13px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238993a5' stroke-width='2.2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center}
.dsel:focus{outline:none;border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-soft)}
.dbtn{height:38px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-2);background:var(--bg-elev-2);color:var(--text-2);border-radius:10px;padding:0 13px;font-weight:600;font-size:13px;cursor:pointer;transition:var(--fast);white-space:nowrap}
.dbtn:hover{background:var(--panel-2);color:var(--text);border-color:var(--border-3)}
.dbtn.on{color:var(--blue);border-color:var(--accent-border);background:var(--accent-soft)}
.dbtn svg{width:15px;height:15px}
.dbtn-ic{padding:0;width:38px;justify-content:center}
/* Active-filter chips */
.fchips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 16px;border-bottom:1px solid var(--border);background:var(--bg-elev-3)}
.fchips-lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.fchip{display:inline-flex;align-items:center;gap:6px;background:var(--bg-elev-2);border:1px solid var(--border-2);border-radius:7px;padding:4px 6px 4px 10px;font-size:12.5px;color:var(--text-2);font-weight:500}
.fchip b{color:var(--text);font-weight:650}
.fchip button{border:0;background:transparent;color:var(--mut);cursor:pointer;padding:2px;border-radius:5px;line-height:0}
.fchip button:hover{background:var(--red-bg);color:var(--red-fg)}
.fchip button svg{width:13px;height:13px}
.fchip-clear{margin-left:2px;border:0;background:transparent;color:var(--blue);font-weight:650;font-size:12.5px;cursor:pointer;padding:4px 6px;border-radius:6px}
.fchip-clear:hover{background:var(--accent-soft)}
/* Result count row */
.dcount{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--mut)}
.dcount b{color:var(--text);font-variant-numeric:tabular-nums}
.dcount-sp{flex:1}
/* Sortable header carets */
.table th.th-sort{cursor:pointer;user-select:none}
.table th.th-sort:hover{color:var(--text-2)}
.table th .carent{display:inline-flex;vertical-align:middle;margin-left:5px;opacity:0;transition:var(--fast)}
.table th.th-sort:hover .carent{opacity:.45}
.table th.sorted{color:var(--text-2)}
.table th.sorted .carent{opacity:1;color:var(--blue)}
.table th .carent svg{width:13px;height:13px}
/* Status pills */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px 3px 8px;border-radius:999px;white-space:nowrap}
.pill .dot{width:6px;height:6px;border-radius:50%}
.pill.ok{background:var(--green-bg);color:var(--green-fg)} .pill.ok .dot{background:var(--green)}
.pill.err{background:var(--red-bg);color:var(--red-fg)} .pill.err .dot{background:var(--red)}
.pill.warn{background:var(--yellow-bg);color:var(--yellow-fg)} .pill.warn .dot{background:var(--yellow)}
.pill.mut{background:var(--panel-2);color:var(--mut)} .pill.mut .dot{background:var(--mut)}
/* Two-line time cell */
.tstack .rel{line-height:1.25}
.tstack .abs{font-size:11.5px;color:var(--mut)}
/* Hover row-actions */
.rowact{display:flex;justify-content:flex-end;gap:4px;opacity:.5;transition:var(--fast)}
.table tbody tr:hover .rowact{opacity:1}
.rowact .iact{width:30px;height:30px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--mut);cursor:pointer;display:grid;place-items:center}
.rowact .iact:hover{background:var(--bg-elev-2);border-color:var(--border-2);color:var(--blue)}
.rowact .iact svg{width:15px;height:15px}
/* Play button (recording) */
.play-cell{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-2);background:var(--bg-elev-2);color:var(--text-2);border-radius:8px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;transition:var(--fast)}
.play-cell:hover{border-color:var(--accent-border);color:var(--blue);background:var(--accent-soft)}
.play-cell svg{width:12px;height:12px}
/* Footer: range + pager */
.dfoot{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--border);font-size:12.5px;color:var(--mut)}
.dfoot b{color:var(--text-2);font-variant-numeric:tabular-nums}
.dfoot-sp{flex:1}
.dpg{display:inline-flex;align-items:center;gap:4px}
.dpg button{min-width:32px;height:32px;border:1px solid var(--border-2);background:var(--bg-elev-2);color:var(--text-2);border-radius:8px;cursor:pointer;font-weight:600;font-size:12.5px;padding:0 8px}
.dpg button:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent-border);color:var(--blue)}
.dpg button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.dpg button:disabled{opacity:.4;cursor:not-allowed}
/* Rich empty state */
.dempty{padding:52px 24px;text-align:center}
.dempty-ic{width:52px;height:52px;border-radius:14px;margin:0 auto 14px;display:grid;place-items:center;background:var(--panel-2);color:var(--mut)}
.dempty-ic svg{width:24px;height:24px}
.dempty h4{font-size:15px;font-weight:650;margin:0 0 5px}
.dempty p{color:var(--mut);font-size:13px;margin:0 0 16px}
/* Roomier rows for the data-page table; compact modifier */
.dpage .table td{height:56px;padding-top:0;padding-bottom:0}
.dpage.compact .table td{height:42px}
/* Align the table's outer edges with the 16px-inset toolbar/count/footer rows
   (default .table insets first/last cells only 6px, which looks flush to the card border) */
.dpage .table th:first-child,.dpage .table td:first-child{padding-left:16px}
.dpage .table th:last-child,.dpage .table td:last-child{padding-right:16px}
.who .nm{font-weight:600;letter-spacing:-.01em;line-height:1.25}
.who .sub{font-size:11.5px;color:var(--mut);font-family:var(--mono,ui-monospace,Menlo,monospace)}

/* ─────── Embedded webphone page ─────── */
.wp-wrap{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start}
@media (max-width:900px){.wp-wrap{grid-template-columns:1fr}}
.wp-panel{background:var(--bg-elev-2);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:18px}
.wp-panel h3{font-size:14px;font-weight:680;margin:0 0 4px}
.wp-panel .sub{font-size:12.5px;color:var(--mut);margin:0 0 16px}
.wp-field{margin-bottom:14px}
.wp-field > label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.wp-field .dsel{width:100%;height:40px}
.wp-cred{display:flex;align-items:center;gap:8px;background:var(--bg-elev-3);border:1px solid var(--border-2);border-radius:10px;padding:7px 8px 7px 12px}
.wp-cred code{flex:1;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:13px;color:var(--text);letter-spacing:.4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-copy{border:1px solid var(--border-2);background:var(--bg-elev-2);color:var(--text-2);border-radius:8px;height:30px;padding:0 9px;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.wp-copy:hover{border-color:var(--accent-border);color:var(--blue);background:var(--accent-soft)}
.wp-copy svg{width:14px;height:14px}
.wp-steps{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.wp-steps li{display:flex;gap:10px;font-size:12.5px;color:var(--text-2);line-height:1.4;align-items:flex-start}
.wp-steps .n{flex-shrink:0;width:19px;height:19px;border-radius:50%;background:var(--accent-soft);color:var(--blue);font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:1px}
.wp-stage{display:flex;flex-direction:column;align-items:center;min-width:0}
.wp-device{width:100%;max-width:430px;height:clamp(460px, calc(100vh - 190px), 860px);border:1px solid var(--border);border-radius:22px;overflow:hidden;background:var(--bg-elev-2);box-shadow:var(--shadow-2)}
.wp-device iframe{width:100%;height:100%;border:0;display:block}
.wp-empty{display:grid;place-items:center;height:100%;color:var(--mut);font-size:13px;text-align:center;padding:24px}
/* Connected: hide the Browser-phone panel and center the phone on the page */
.wp-wrap.connected{grid-template-columns:1fr}
.wp-wrap.connected .wp-panel{display:none}
.wp-wrap.connected .wp-device{max-width:384px}
.wp-bar{display:none;align-items:center;gap:10px;width:100%;max-width:430px;margin:0 0 14px}
.wp-wrap.connected .wp-bar{display:flex}
.wp-bar-id{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13.5px;color:var(--text);min-width:0}
.wp-bar-id span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-bar-id .ic{flex-shrink:0;width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--blue);display:grid;place-items:center}
.wp-bar-id .ic svg{width:15px;height:15px}
.wp-bar .sp{flex:1}

/* ── Operator Panel ── */
.op-card h3{display:flex;align-items:center;gap:8px}
.op-count{font-size:12px;font-weight:600;color:var(--mut)}
.op-empty{padding:16px;color:var(--mut);font-size:13px;text-align:center}
.op-hint{font-size:11.5px;color:var(--mut);padding:2px 4px 10px}
.op-call{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--border);cursor:grab}
.op-call.dragging{opacity:.5}
.op-grip{color:var(--mut-3);display:inline-flex;flex-shrink:0}
.op-grip svg{width:16px;height:16px}
.op-mbtns{display:flex;gap:5px}
.op-mbtn{height:28px;padding:0 10px;border-radius:7px;border:1px solid var(--border-2);background:var(--bg-elev-3);color:var(--text-2);font-size:11.5px;font-weight:600;cursor:pointer}
.op-mbtn:hover{border-color:var(--blue);color:var(--blue);background:var(--accent-soft)}
.op-mbtn.on{border-color:var(--blue);color:#fff;background:var(--blue)}
.op-call.monitored{background:var(--accent-soft)}
.op-monbadge{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:1px 8px;border-radius:20px;background:var(--blue);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.02em}
.op-mondot{width:6px;height:6px;border-radius:50%;background:#fff;animation:wpdpulse 1.3s ease-in-out infinite}
.op-tile.drop{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue) inset;background:var(--accent-soft)}
.op-call:last-child{border-bottom:0}
.op-call-ic{width:32px;height:32px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--blue)}
.op-call-ic.inbound{background:var(--dir-in-soft,var(--accent-soft))}
.op-call-ic svg{width:16px;height:16px}
.op-call-main{flex:1;min-width:0}
.op-call-parties{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--text)}
.op-call-parties .op-arrow{color:var(--mut-2)}
.op-call-sub{font-size:11.5px;color:var(--mut);margin-top:2px;text-transform:capitalize}
.op-call-time{font-size:12.5px;color:var(--text-2);font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
.op-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.op-tile{border:1px solid var(--border);border-radius:12px;padding:12px 13px;background:var(--bg-elev-2);position:relative;transition:border-color var(--fast)}
.op-tile.oncall{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
.op-tile-top{display:flex;align-items:center;gap:8px}
.op-tdot{width:9px;height:9px;border-radius:50%;background:var(--mut-3);flex-shrink:0}
.op-tile.online .op-tdot{background:var(--green)}
.op-tile.oncall .op-tdot{background:var(--blue);animation:wpdpulse 1.3s ease-in-out infinite}
.op-tile.offline{opacity:.72}
.op-ext{font-size:15px;font-weight:700;letter-spacing:-.01em;flex:1}
.op-acts{display:flex;gap:5px}
.op-act{width:28px;height:28px;border-radius:7px;border:1px solid var(--border-2);background:var(--bg-elev-3);color:var(--text-2);cursor:pointer;display:grid;place-items:center}
.op-act:hover{border-color:var(--blue);color:var(--blue);background:var(--accent-soft)}
.op-act.danger:hover{border-color:var(--red);color:var(--red);background:var(--red-tint)}
.op-act svg{width:15px;height:15px}
.op-name{font-size:12.5px;color:var(--text-2);margin-top:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-state{font-size:11.5px;color:var(--mut);margin-top:2px}
.op-tile.oncall .op-state{color:var(--blue);font-weight:600}

/* ── Extension mode picker (softphone vs portal, shown after ext login) ── */
.extpick-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:40px 20px;background:var(--bg)}
.extpick-head{text-align:center;max-width:520px}
.extpick-badge{width:46px;height:46px;border-radius:13px;margin:0 auto 16px;display:grid;place-items:center;font-weight:800;font-size:22px;color:#fff;background:linear-gradient(135deg,var(--blue),#1d4ed8);box-shadow:0 8px 22px rgba(37,99,235,.28)}
.extpick-head h1{font-size:22px;font-weight:750;letter-spacing:-.02em;margin:0 0 6px;color:var(--text)}
.extpick-head p{margin:0;color:var(--mut);font-size:14px}
.extpick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:18px;width:100%;max-width:640px}
@media (max-width:680px){.extpick-grid{grid-template-columns:1fr;max-width:340px}}
.extpick-card{position:relative;text-align:left;display:flex;flex-direction:column;gap:10px;padding:24px 22px 22px;border-radius:18px;border:1px solid var(--border);background:var(--bg-elev-2);box-shadow:var(--shadow-1);cursor:pointer;transition:transform .13s ease,border-color .13s ease,box-shadow .13s ease}
.extpick-card:hover{transform:translateY(-3px);border-color:var(--accent-border);box-shadow:var(--shadow-2)}
.extpick-card.last{border-color:var(--blue)}
.extpick-tag{position:absolute;top:14px;right:14px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);background:var(--accent-soft);border:1px solid var(--accent-border);padding:3px 8px;border-radius:999px}
.extpick-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--blue);background:var(--accent-soft)}
.extpick-ic svg{width:22px;height:22px}
.extpick-t{font-size:16px;font-weight:700;color:var(--text)}
.extpick-s{font-size:13px;color:var(--mut);line-height:1.45}
.extpick-list{list-style:none;margin:6px 0 4px;padding:0;display:flex;flex-direction:column;gap:7px}
.extpick-list li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2)}
.extpick-tick{width:16px;height:16px;flex-shrink:0;color:var(--green)}
.extpick-tick svg{width:16px;height:16px;display:block}
.extpick-go{margin-top:8px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:650;color:var(--blue)}
.extpick-out{background:none;border:0;color:var(--mut);font-size:13px;cursor:pointer;text-decoration:underline}
.extpick-out:hover{color:var(--text-2)}

/* Visible "switch to softphone" button in the scoped-user sidebar footer. */
.side-mode-switch{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;margin-bottom:10px;border-radius:12px;border:1px solid var(--accent-border);background:var(--accent-soft);cursor:pointer;text-align:left;transition:border-color .13s ease,transform .13s ease}
.side-mode-switch:hover{border-color:var(--blue);transform:translateY(-1px)}
.side-mode-switch .sms-ic{width:32px;height:32px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;color:#fff;background:var(--blue)}
.side-mode-switch .sms-ic svg{width:17px;height:17px}
.side-mode-switch .sms-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.side-mode-switch .sms-txt strong{font-size:13px;font-weight:650;color:var(--text)}
.side-mode-switch .sms-txt small{font-size:11px;color:var(--mut)}
.side-mode-switch .sms-go{flex-shrink:0;color:var(--mut)}
.side-mode-switch .sms-go svg{width:16px;height:16px;display:block}

/* ─────── Sticky webphone dock (bottom-left, on every page) ─────── */
/* Anchored to the bottom-right of the screen. */
.wpd{position:fixed;right:24px;bottom:22px;z-index:200;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
@media (max-width:760px){.wpd{right:16px}}
.wpd-fab{width:56px;height:56px;border-radius:50%;border:0;background:var(--blue);color:#fff;box-shadow:var(--shadow-blue),0 10px 26px rgba(37,99,235,.42);cursor:pointer;display:grid;place-items:center;transition:var(--fast)}
.wpd-fab:hover{background:var(--blue-hi);transform:translateY(-1px)}
.wpd-fab.active{background:var(--blue-hi)}
.wpd-fab svg{width:24px;height:24px}
/* Active-call pill — replaces the FAB when a call is live and the dock is closed. */
.wpd-callpill{display:none;align-items:center;gap:9px;height:52px;padding:0 18px 0 15px;border:0;border-radius:26px;background:var(--green);color:#fff;box-shadow:0 10px 26px rgba(16,185,129,.42);cursor:pointer;font-weight:650;font-size:13px;letter-spacing:-.01em}
.wpd-callpill:hover{filter:brightness(1.05)}
.wpd-callpill svg{width:17px;height:17px}
.wpd-callpill .wpd-cp-time{font-variant-numeric:tabular-nums;opacity:.9;min-width:34px}
.wpd-cp-dot{width:9px;height:9px;border-radius:50%;background:#fff;flex-shrink:0;animation:wpdpulse 1.3s ease-in-out infinite}
@keyframes wpdpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.82)}}
.wpd.in-call:not(.open) .wpd-fab{display:none}
.wpd.in-call:not(.open) .wpd-callpill{display:inline-flex}
.wpd-panel{display:none;flex-direction:column;width:352px;height:651px;max-height:calc(100vh - 112px);background:var(--bg-elev-2);border:1px solid var(--border-2);border-radius:16px;box-shadow:var(--shadow-3);overflow:hidden}
.wpd.open .wpd-panel{display:flex;animation:tin 160ms var(--ease)}
.wpd-head{display:flex;align-items:center;gap:10px;padding:11px 11px 11px 14px;border-bottom:1px solid var(--border)}
.wpd-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.wpd-logo{width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--blue);display:grid;place-items:center;flex-shrink:0}
.wpd-logo svg{width:17px;height:17px}
.wpd-t{font-weight:700;font-size:14px;letter-spacing:-.01em;line-height:1.15}
.wpd-sub{font-size:11.5px;color:var(--mut)}
.wpd-selrow{padding:10px 12px;border-bottom:1px solid var(--border);background:var(--bg-elev-3)}
.wpd-sel{width:100%;height:38px}
.wpd-x{width:32px;height:32px;border-radius:8px;border:1px solid var(--border-2);background:var(--bg-elev-2);color:var(--mut);cursor:pointer;display:grid;place-items:center;flex-shrink:0}
.wpd-x:hover{background:var(--panel-2);color:var(--text)}
.wpd-x svg{width:15px;height:15px}
.wpd-body{flex:1;min-height:0;position:relative}
.wpd-body iframe{width:100%;height:100%;border:0;display:block}
.wpd-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--mut);font-size:13px;text-align:center;padding:20px}
@media (max-width:520px){.wpd-panel{width:calc(100vw - 32px)}}

/* Extension identity cell */
.ext-id{display:flex;align-items:center;gap:12px;min-width:0}
.ext-id-av{
  position:relative;width:38px;height:38px;flex-shrink:0;border-radius:10px;
  display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.ext-id-av .pres{
  position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;
  border:2.5px solid var(--bg-elev-2);
}
.ext-id-av .pres.on{background:var(--green)}
.ext-id-av .pres.off{background:var(--mut-2)}
.ext-id-txt{min-width:0;display:flex;flex-direction:column;gap:3px}
.ext-id-name{font-weight:600;color:var(--text);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ext-id-meta{display:flex;align-items:center;gap:7px;min-width:0}
.ext-num{
  font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:11.5px;
  color:var(--blue);background:var(--accent-soft);border:1px solid var(--accent-border);
  padding:1px 7px;border-radius:6px;flex-shrink:0;
}
.ext-desc{font-size:11.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Feature chips — only rendered when a feature is actually set */
.feat-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.feat-chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:7px;
  font-size:11px;font-weight:600;letter-spacing:-.005em;
  background:var(--bg-elev-3);border:1px solid var(--border);color:var(--text-2);
}
.feat-chip svg{width:12px;height:12px}
.feat-chip.ok  {background:var(--green-bg); border-color:var(--green-border); color:var(--green-fg)}
.feat-chip.warn{background:var(--yellow-bg);border-color:var(--yellow-border);color:var(--yellow-fg)}
.feat-none{color:var(--mut-2);font-size:12px}

/* Icon-only row actions — visible, brighten on row hover */
.row-actions{display:flex;gap:4px;justify-content:flex-end}
.icon-btn{
  width:30px;height:30px;padding:0;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--mut);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--fast),color var(--fast);
}
.icon-btn svg{width:15px;height:15px}
.icon-btn:hover{background:var(--accent-soft);color:var(--blue-hi)}
.icon-btn.danger:hover{background:var(--red-bg);color:var(--red-fg)}
.table tbody tr .icon-btn{opacity:.55}
.table tbody tr:hover .icon-btn{opacity:1}

/* Avatar + name/sub cell for identity columns */
.cell-user{display:flex;align-items:center;gap:10px;min-width:0}
.cell-avatar{
  width:30px;height:30px;flex-shrink:0;border-radius:8px;
  display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;
  letter-spacing:-.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.cell-user-txt{min-width:0}
.cell-user-name{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em}
.cell-user-sub{font-size:11.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dir{font-size:10.5px;padding:3px 9px;border-radius:6px;font-weight:700;display:inline-block;letter-spacing:.05em;text-transform:uppercase}
.dir.inbound  {background:var(--green-bg); color:var(--green-fg)}
.dir.outbound {background:var(--accent-soft-2); color:var(--blue-ink)}
.dir.local    {background:var(--yellow-bg); color:var(--yellow-fg)}

.dir-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;vertical-align:middle}
.dir-ic svg,.dir-ic span > svg{width:14px;height:14px;display:block}
.dir-ic > span{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.dir-ic.inbound {background:var(--green-bg); color:var(--green-fg)}
.dir-ic.outbound{background:var(--accent-soft-2);   color:var(--blue-ink)}
.dir-ic.local   {background:var(--yellow-bg);color:var(--yellow-fg)}
.dir-ic.missed  {background:var(--red-bg);   color:var(--red-fg)}

.muted{color:var(--mut)}
.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:.95em;letter-spacing:-0.01em}

.tag{display:inline-block;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:600;background:var(--bg-elev-3);color:var(--text-2);letter-spacing:-0.005em;border:1px solid var(--border)}
.tag.ok  {background:var(--green-bg);  color:var(--green-fg);  border-color:var(--green-border)}
.tag.err {background:var(--red-bg);    color:var(--red-fg);  border-color:var(--red-border)}
.tag.warn{background:var(--orange-bg); color:var(--orange-fg);  border-color:var(--orange-border)}
.tag.blue{background:var(--accent-soft-2);    color:var(--blue-ink); border-color:var(--accent-border)}

/* ─────── Forms & toolbars ─────── */
.row{display:flex;gap:10px;align-items:center}
.row>*{flex:1}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar .input{max-width:260px;padding:9px 12px;font-size:13px}
.toolbar select.input{max-width:170px;padding:9px 32px 9px 12px}

.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.switch input{display:none}
.switch .track{width:38px;height:22px;background:var(--border-3);border-radius:999px;position:relative;transition:background var(--fast);flex-shrink:0}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:left var(--fast);box-shadow:0 1px 3px rgba(15,23,42,.25)}
.switch input:checked + .track{background:var(--blue)}
.switch input:checked + .track::after{left:18px}

/* Read-only field (e.g. fixed extension number in the edit modal) */
.ext-readonly{display:flex;align-items:center;background:var(--bg-elev-3);color:var(--text-2);cursor:not-allowed;font-weight:600}

/* Enabled toggle row in the extension edit modal */
.ext-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding:12px 14px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r-md)}
.ext-toggle-title{font-size:13px;font-weight:600;color:var(--text)}
.ext-toggle-sub{font-size:11.5px;color:var(--mut);margin-top:2px}
.ext-toggle-sw{display:inline-flex;align-items:center;flex-shrink:0}

/* SIP password cell with reveal/copy */
.pw-cell{display:flex;align-items:center;gap:4px}
.pw-cell .pw-text{letter-spacing:.06em;min-width:70px}
.pw-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--mut);cursor:pointer;transition:background var(--fast),color var(--fast)}
.pw-btn:hover{background:var(--panel-2);color:var(--blue-hi)}
.pw-btn svg{width:15px;height:15px;display:block}

/* Password input with inline reveal toggle (edit modal) */
.pw-input-wrap{position:relative;display:flex}
.pw-input-wrap .input{width:100%;padding-right:44px}
.pw-input-wrap .pw-reveal{position:absolute;right:7px;top:50%;transform:translateY(-50%)}

/* Inline enable/disable dropdown in the extensions table */
.ext-enabled-sel{width:auto;min-width:108px;padding:6px 30px 6px 11px;font-size:12px;font-weight:600;background-position:right 10px center}
.ext-enabled-sel[data-state="1"]{color:var(--green-fg);border-color:var(--green-border);background-color:var(--green-bg)}
.ext-enabled-sel[data-state="0"]{color:var(--red-fg);border-color:var(--red-border);background-color:var(--red-bg)}
.ext-enabled-sel:disabled{opacity:.6}

/* ─────── Softphone ─────── */
.phone{display:grid;grid-template-columns:1fr 340px;gap:18px}
@media (max-width:1100px){.phone{grid-template-columns:1fr}}
.phone-panel{
  background:var(--bg-elev-2);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:22px;
  box-shadow:var(--shadow-1);
}
.phone-display{
  background:var(--bg-elev-3);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:18px;text-align:center;min-height:70px;
  font-family:ui-monospace,Menlo,monospace;font-size:26px;letter-spacing:1.2px;color:var(--text);
}
.phone-state{color:var(--mut);font-size:12px;margin-bottom:10px;letter-spacing:-0.005em;font-weight:500}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.key{
  background:var(--bg-elev-1);color:var(--text);border-radius:var(--r-md);
  padding:16px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:20px;font-weight:600;cursor:pointer;user-select:none;
  border:1px solid var(--border-2);
  transition:background var(--fast), transform 60ms, border-color var(--fast), box-shadow var(--fast);
}
.key:hover{background:var(--accent-soft);border-color:var(--accent-border);color:var(--blue-hi);box-shadow:var(--shadow-1)}
.key:active{transform:scale(.96);background:var(--accent-soft-2)}
.key small{color:var(--mut-2);font-size:9px;margin-top:3px;letter-spacing:1px;font-weight:600}

.phone-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.phone-incall{
  display:flex;flex-direction:column;gap:10px;
  background:var(--accent-soft);
  border:1px solid var(--accent-border);
  border-radius:var(--r-md);padding:18px;margin-top:16px;
}
.phone-incall .who{font-size:15px;font-weight:700;letter-spacing:-0.01em;color:var(--text)}
.phone-incall .who .mono{font-size:13px;color:var(--mut);margin-left:6px;font-weight:400}
.timer{font-family:ui-monospace,Menlo,monospace;color:var(--green);font-size:13px;font-weight:600;letter-spacing:.02em}

.call-btn{
  width:48px;height:48px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;border:0;
  transition:transform 80ms, background var(--fast), box-shadow var(--fast), filter var(--fast);
  box-shadow:var(--shadow-2);
}
.call-btn svg{width:19px;height:19px}
.call-btn.answer{background:var(--green)}
.call-btn.answer:hover{filter:brightness(1.08)}
.call-btn.hangup{background:var(--red)}
.call-btn.hangup:hover{filter:brightness(1.08)}
.call-btn.mute   {background:var(--bg-elev-1);border:1px solid var(--border-2);color:var(--text-2)}
.call-btn.mute.active{background:var(--orange-bg);color:var(--orange-fg);border-color:var(--orange-border)}
.call-btn.hold   {background:var(--bg-elev-1);border:1px solid var(--border-2);color:var(--text-2)}
.call-btn.hold.active{background:var(--accent-soft-2);color:var(--blue-ink);border-color:var(--blue-300)}
.call-btn:active{transform:scale(.92)}

.call-controls{display:flex;gap:12px;justify-content:center}

/* ─────── Call view (incoming / outgoing / in-call) ─────── */
.call-view{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:28px 20px 24px;
  border-radius:var(--r-xl);
  background:var(--accent-soft);
  border:1px solid var(--accent-border);
}
.call-view.active{background:var(--bg-elev-3)}
.call-status{font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--blue);margin-bottom:2px}
.call-view.active .call-status{color:var(--green)}

.call-avatar{
  position:relative;
  width:108px;height:108px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:42px;font-weight:700;letter-spacing:-0.02em;
  background:var(--blue);
  box-shadow:var(--shadow-blue);
  margin:6px 0 4px;
}
.call-view.ringing .call-avatar{animation:shake 1.2s ease-in-out infinite}
@keyframes shake{
  0%,100%{transform:translateX(0) rotate(0)}
  25%{transform:translateX(-3px) rotate(-3deg)}
  75%{transform:translateX(3px) rotate(3deg)}
}
.pulse-ring{
  position:absolute;inset:-6px;border-radius:50%;
  border:3px solid var(--blue);opacity:0;pointer-events:none;
  animation:pr 1.8s ease-out infinite;
}
.pulse-ring.delay{animation-delay:.9s}
@keyframes pr{
  0%{transform:scale(.95);opacity:.65}
  80%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}

.call-name{font-size:20px;font-weight:700;letter-spacing:-0.02em;color:var(--text);text-align:center}
.call-number{font-size:13.5px;color:var(--mut);font-weight:500;margin-top:-4px}
.call-timer{
  font-family:ui-monospace,Menlo,monospace;color:var(--green);
  font-size:22px;font-weight:700;letter-spacing:.04em;margin:2px 0 6px;
}

/* Big Answer/Decline buttons */
.big-call-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:36px;
  margin-top:18px;width:100%;max-width:340px;
  justify-items:center;
}
.big-call-actions.single{grid-template-columns:1fr;max-width:180px}
.big-call-btn{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  background:transparent;border:0;cursor:pointer;padding:0;
  transition:transform 80ms;
}
.big-call-btn:active{transform:scale(.94)}
.big-call-ic{
  width:64px;height:64px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:var(--shadow-2);
  transition:filter var(--fast), box-shadow var(--fast);
}
.big-call-ic svg{width:26px;height:26px}
.big-call-btn.answer .big-call-ic{background:var(--green)}
.big-call-btn.decline .big-call-ic{background:var(--red)}
.big-call-btn.answer .big-call-ic{animation:ring-bob 1.2s ease-in-out infinite}
@keyframes ring-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.big-call-btn:hover .big-call-ic{filter:brightness(1.05)}
.big-call-lbl{font-size:12px;font-weight:700;color:var(--text);letter-spacing:-0.005em}
.big-call-btn.answer .big-call-lbl{color:var(--green-fg)}
.big-call-btn.decline .big-call-lbl{color:var(--red-fg)}

.incall-actions{display:flex;gap:18px;justify-content:center;margin-top:10px}

/* Dialing progress dots */
.dial-dots{display:flex;gap:7px;margin-top:4px}
.dial-dots span{
  width:9px;height:9px;border-radius:50%;background:var(--blue);
  opacity:.35;animation:dotwave 1.2s ease-in-out infinite;
}
.dial-dots span:nth-child(2){animation-delay:.15s}
.dial-dots span:nth-child(3){animation-delay:.3s}
@keyframes dotwave{
  0%,80%,100%{opacity:.25;transform:scale(.8)}
  40%{opacity:1;transform:scale(1.1)}
}

/* Compact DTMF keypad (during an established call) */
.dtmf-keypad{
  display:grid;grid-template-columns:repeat(3,1fr);gap:7px;
  margin-top:12px;width:100%;max-width:300px;
}
.dtmf-keypad .key{
  padding:10px 0;font-size:16px;font-weight:600;
  background:var(--bg-elev-1);border:1px solid var(--border-2);
  border-radius:9px;
}
.dtmf-keypad .key small{font-size:8px;margin-top:1px}

/* ─────── Voicemail ─────── */
.vm-item{display:grid;grid-template-columns:auto 1fr auto;gap:14px;padding:14px 16px;border-bottom:1px solid var(--border);align-items:center}
.vm-item:last-child{border-bottom:0}
.vm-check{width:16px;height:16px;cursor:pointer;accent-color:var(--blue);margin:0}
.vm-title{margin:0 0 16px;font-size:18px;font-weight:700;letter-spacing:-0.02em}

/* Shared filters panel (voicemail + call history) */
.filters{display:flex;flex-direction:column;gap:14px;padding:16px;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:18px}
.filters-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.filters-search-row{align-items:stretch}
.filters-search-row .btn{padding-top:0;padding-bottom:0}
.filters-search{flex:1 1 280px;min-width:200px;display:flex}
.filters-search .input{width:100%}
.filters-spacer{flex:1 1 auto}
.filter-field{display:flex;flex-direction:column;gap:5px}
.filter-field .input{width:100%}
.filter-field-lbl{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.filter-daterange{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:12px}
.filter-daterange .input{min-width:0}

/* Bulk-selection bar */
.vm-selbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 16px;background:var(--bg-elev-3);border-bottom:1px solid var(--border)}
.vm-selbar-all{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer;user-select:none;line-height:1}
.vm-selbar-all input{width:16px;height:16px;flex:0 0 auto;cursor:pointer;accent-color:var(--blue);margin:0}
.vm-selbar-right{display:flex;align-items:center;gap:12px}
.vm-selbar-count{font-size:12.5px;color:var(--mut);white-space:nowrap}
.vm-unread-dot{width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px rgba(37,99,235,.55)}
.vm-caller{font-weight:700;font-size:13.5px;letter-spacing:-0.01em;color:var(--text)}
.vm-meta{color:var(--mut);font-size:12px;margin-top:2px}
.vm-trans{
  font-size:12.5px;color:var(--text-2);margin-top:8px;padding:10px 12px;
  background:var(--accent-soft);border-left:3px solid var(--blue);border-radius:6px;font-style:normal;
}
audio{height:34px;filter:none}

/* ─────── Reports (admin) ─────── */
.rep-head{padding:14px 16px}
.rep-toolbar{align-items:center}
.rep-range{display:flex;gap:6px;flex-wrap:wrap}
.rep-range-btn{
  background:var(--panel-2);border:1px solid var(--border);color:var(--text-2);
  padding:7px 14px;border-radius:999px;cursor:pointer;font:600 12px/1 inherit;
  transition:all 120ms;
}
.rep-range-btn:hover{background:var(--bg-elev-2);border-color:var(--border-3)}
.rep-range-btn.active{background:var(--blue);color:#fff;border-color:var(--blue-hi);box-shadow:var(--shadow-blue)}
.rep-custom{display:flex;gap:8px;flex-wrap:wrap}
.rep-group{display:flex;gap:6px}
.rep-range-label{margin-top:10px}
.rep-kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:14px 0;
}
.rep-kpi{
  background:var(--bg-elev-2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:4px;min-height:110px;position:relative;overflow:hidden;
  border-left:3px solid var(--accent);
}
.rep-kpi-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.rep-kpi-value{font-size:24px;font-weight:800;letter-spacing:-0.02em;line-height:1.15;font-family:Inter,Arial;color:var(--text)}
.rep-kpi-sub{font-size:11.5px;color:var(--mut);min-height:14px}
.rep-kpi-spark{margin-top:2px;opacity:.95}
.rep-card{padding:16px}
.rep-trend{margin-top:0}
.rep-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-top:14px;
}
.rep-tables{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;margin-top:14px;
}
.rep-table{margin-top:14px}

/* ─────── Performance Report ─────── */
.perf-head{padding:14px 16px}
.perf-toolbar .input{min-width:120px}
.perf-top{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.perf-chip{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
  background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--blue-hi);cursor:pointer;
  font-family:inherit;font-size:12px;transition:background 120ms,border-color 120ms;
}
.perf-chip:hover{background:var(--accent-soft-2);border-color:var(--blue-300)}
.perf-kpis{display:flex;flex-direction:column;gap:14px;margin:14px 0}
.perf-kpi-section{background:var(--bg-elev-2);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.perf-kpi-hdr{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.perf-kpi-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:6px;color:#fff;font-weight:700;font-size:11.5px;
}
.perf-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:1000px){.perf-kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.perf-kpi-grid{grid-template-columns:1fr}}
.perf-kpi{
  background:var(--bg-elev-3);border:1px solid var(--border);border-radius:10px;padding:12px;
  display:flex;flex-direction:column;gap:4px;min-height:110px;position:relative;overflow:hidden;
}
.perf-kpi-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.perf-kpi-value{font-size:22px;font-weight:800;letter-spacing:-0.02em;line-height:1.15;font-family:Inter,Arial}
.perf-kpi-meta{display:flex;align-items:center;gap:8px;min-height:16px}
.perf-kpi-spark{position:absolute;right:10px;bottom:8px;opacity:.9}
.perf-delta{font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.02em}
.perf-delta.up{color:var(--green-fg);background:var(--green-bg)}
.perf-delta.down{color:var(--red-fg);background:var(--red-bg)}
.perf-chart{padding:16px;margin-top:0}
.perf-chart-hdr{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.perf-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:14px}
.perf-donut-card{padding:14px 16px}
.perf-donut-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-bottom:10px}
.perf-table{padding:14px 16px}
.perf-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle}
.perf-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.perf-legend-item{display:flex;align-items:center;gap:6px;font-size:12px}

/* KPI matrix (≥3 extensions) */
.perf-matrix{padding:14px 16px}
.perf-matrix-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.perf-matrix-scroll{overflow-x:auto}
.perf-matrix-table th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.perf-matrix-table td{vertical-align:middle}
.perf-matrix-table .perf-delta{display:inline-block}

/* Chip multi-select */
.perf-multi{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:260px;flex:1;min-height:36px}
.perf-multi-chips{display:flex;flex-wrap:wrap;gap:6px}
.perf-multi-chip{
  display:inline-flex;align-items:center;gap:8px;padding:4px 6px 4px 10px;border-radius:999px;
  background:var(--bg-elev-2);border:2px solid var(--border);font-size:12px;
}
.perf-multi-x{
  background:transparent;border:0;color:var(--mut);cursor:pointer;
  width:20px;height:20px;padding:0;border-radius:50%;font-size:14px;line-height:1;
}
.perf-multi-x:hover{background:var(--panel-2);color:var(--red-fg)}
.perf-multi-wrap{position:relative}
.perf-multi-add{
  background:var(--panel-2);border:1px dashed var(--border-3);color:var(--text-2);
  padding:7px 12px;border-radius:999px;cursor:pointer;font:600 12px/1 inherit;
  transition:border-color 120ms,background 120ms;
}
.perf-multi-add:hover{background:var(--bg-elev-2);border-color:var(--mut);color:var(--text)}
.perf-multi-pop{
  display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:30;
  width:320px;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--shadow-2);
  padding:10px;
}
.perf-multi-pop.open{display:block}
.perf-multi-list{max-height:280px;overflow-y:auto;margin-top:8px;display:flex;flex-direction:column;gap:2px}
.perf-multi-row{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;
  background:transparent;border:0;cursor:pointer;font:inherit;color:var(--text);text-align:left;
}
.perf-multi-row:hover{background:var(--panel-2)}

/* ─────── Custom audio player (shared with the webphone) ─────── */
.oct-player{
  padding:8px 10px;
  background:var(--bg-elev-3);
  border:1px solid var(--border);border-radius:10px;
  display:flex;flex-direction:column;gap:6px;
}
.oct-player audio{display:none}
.oct-player-row{display:flex;align-items:center;gap:10px;min-width:0}
.oct-play{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;padding:0;border:0;
  background:var(--blue);color:#fff;
  box-shadow:var(--shadow-blue);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.oct-play:hover{background:var(--blue-hi)}
.oct-play:active{transform:scale(.96)}
.oct-play svg{width:13px;height:13px}
.oct-play[data-state="loading"] svg{display:none}
.oct-play[data-state="loading"]::before{
  content:"";width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:oct-spin 700ms linear infinite;
}
@keyframes oct-spin{to{transform:rotate(360deg)}}
.oct-play[data-state="paused"] .oct-ic-pause,
.oct-play[data-state="loading"] .oct-ic-pause,
.oct-play[data-state="playing"] .oct-ic-play{display:none}
.oct-bar-wrap{flex:1 1 auto;display:flex;flex-direction:column;gap:3px;min-width:0}
.oct-bar{position:relative;height:6px;border-radius:3px;background:var(--accent-soft-2);cursor:pointer;overflow:hidden}
.oct-bar-played{position:absolute;inset:0 auto 0 0;background:var(--blue);border-radius:3px;width:0%;transition:width 80ms linear}
.oct-bar-buffered{position:absolute;inset:0 auto 0 0;background:var(--accent-soft);border-radius:3px;width:0%}
.oct-times{display:flex;justify-content:space-between;align-items:center;font:500 10.5px ui-monospace,Menlo,monospace;color:var(--mut);letter-spacing:.3px}
.oct-dl{
  flex:0 0 auto;background:transparent;color:var(--mut);
  width:28px;height:28px;padding:0;border-radius:8px;border:0;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;
  transition:background 120ms,color 120ms;
}
.oct-dl:hover{background:var(--bg-elev-2);color:var(--text)}
.oct-dl svg{width:13px;height:13px}
.oct-player-msg{font-size:11.5px;color:var(--red-fg);font-weight:500}
.oct-player-msg:empty{display:none}

/* ─────── Contacts ─────── */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.contact-card{
  background:var(--bg-elev-2);border:1px solid var(--border);
  border-radius:var(--r-md);padding:14px;display:flex;gap:12px;align-items:center;cursor:pointer;
  transition:border-color var(--fast), transform 60ms, background var(--fast), box-shadow var(--fast);
}
.contact-card:hover{border-color:var(--accent-border);background:var(--accent-soft);box-shadow:var(--shadow-1)}
.contact-card:active{transform:scale(.98)}
.contact-name{font-weight:700;font-size:13.5px;letter-spacing:-0.01em;color:var(--text)}
.contact-ext{color:var(--mut);font-size:11.5px;margin-top:2px}

/* ─────── Chart / bars ─────── */
.bars{display:flex;align-items:flex-end;gap:6px;height:140px;padding:8px 2px;border-bottom:1px solid var(--border)}
.bar{
  flex:1;
  background:var(--blue);
  border-radius:4px 4px 0 0;min-height:3px;
  transition:opacity var(--fast), filter var(--fast);
}
.bar.zero{background:var(--bg-elev-3)}
.bar:hover{filter:brightness(1.1)}
.bar-lbl{display:flex;gap:6px;margin-top:8px;font-size:10.5px;color:var(--mut);font-weight:500}
.bar-lbl span{flex:1;text-align:center}

/* ─────── Toast ─────── */
.toast-wrap{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:100}
.toast{
  background:var(--bg-elev-2);border:1px solid var(--border-2);
  border-radius:var(--r-md);padding:12px 16px;color:var(--text);
  font-size:13px;box-shadow:var(--shadow-2);min-width:240px;
  animation:tin 180ms var(--ease);letter-spacing:-0.005em;font-weight:600;
  border-left:3px solid var(--blue);
}
.toast.err{border-left-color:var(--red)}
.toast.ok {border-left-color:var(--green)}
@keyframes tin{from{opacity:0;transform:translateY(8px) scale(.98)} to{opacity:1;transform:none}}

/* ─────── Misc ─────── */
.loader{display:inline-block;width:14px;height:14px;border:2px solid var(--accent-soft-2);border-top-color:var(--blue);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* Button loading state — hides label, shows a centred spinner */
.btn.is-loading{color:transparent !important;pointer-events:none;position:relative}
.btn.is-loading::after{content:'';position:absolute;left:calc(50% - 7px);top:calc(50% - 7px);width:14px;height:14px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
.btn-ghost.is-loading::after,.btn-sec.is-loading::after{border-color:var(--accent-soft-2);border-top-color:var(--blue)}

/* Full-screen app boot loader */
.boot-loader{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--bg);z-index:9999}
.boot-loader .boot-logo{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:28px;color:#fff;background:var(--blue)}
.boot-loader .boot-txt{font-size:13px;color:var(--mut);letter-spacing:.02em}

/* V-Routes animated loader (adapted from Uiverse.io by satyamchaudharydev) */
.vr-loader{--loader:var(--blue);--loader-size:30px;position:relative;width:100px;height:40px;overflow:hidden}
.vr-loader span{position:absolute}
.vr-loader span:nth-child(1){top:0;left:-100%;width:100%;height:var(--loader-size);background:linear-gradient(90deg,transparent,var(--loader));animation:vr-loader1 1s linear infinite}
@keyframes vr-loader1{0%{left:-100%}50%,100%{left:100%}}
.vr-loader span:nth-child(2){top:-100%;right:0;width:var(--loader-size);height:100%;background:linear-gradient(180deg,transparent,var(--loader));animation:vr-loader2 1s linear infinite;animation-delay:.25s}
@keyframes vr-loader2{0%{top:-100%}50%,100%{top:100%}}
.vr-loader span:nth-child(3){bottom:0;right:-100%;width:100%;height:var(--loader-size);background:linear-gradient(270deg,transparent,var(--loader));animation:vr-loader3 1s linear infinite;animation-delay:.5s}
@keyframes vr-loader3{0%{right:-100%}50%,100%{right:100%}}
.vr-loader span:nth-child(4){bottom:-100%;left:0;width:var(--loader-size);height:100%;background:linear-gradient(360deg,transparent,var(--loader));animation:vr-loader4 1s linear infinite;animation-delay:.75s}
@keyframes vr-loader4{0%{bottom:-100%}50%,100%{bottom:100%}}

.empty{text-align:center;padding:40px 24px;color:var(--mut);font-size:13px;font-weight:500}
.pager{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;align-items:center}
.pager button{
  padding:7px 13px;background:var(--bg-elev-2);border:1px solid var(--border-2);color:var(--text);
  border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;
  transition:background var(--fast), border-color var(--fast), color var(--fast);
}
.pager button:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent-border);color:var(--blue-hi)}
.pager button:disabled{opacity:.4;cursor:not-allowed}

.kvs{display:grid;grid-template-columns:160px 1fr;gap:10px 18px;font-size:13px}
.kvs .k{color:var(--mut);font-size:12px;padding-top:2px;letter-spacing:-0.005em;font-weight:500}
.kvs .v{color:var(--text);font-weight:500}
.kvs .v.mono{font-size:12.5px}

.sec-title{font-size:11.5px;color:var(--mut);font-weight:700;letter-spacing:.06em;margin:6px 0 8px;text-transform:uppercase}
hr.sep{border:0;border-top:1px solid var(--border);margin:18px 0}

/* ─────── Modal / Drawer ─────── */
.modal-back{
  position:fixed;inset:0;
  background:rgba(8,12,20,.52);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
  animation:tin 160ms var(--ease);
}
.modal-box{width:100%;max-width:520px;max-height:90vh;overflow:auto;background:var(--bg-elev-2);border:1px solid var(--border-2);border-radius:var(--r-xl);box-shadow:var(--shadow-3)}
.modal-box.wide{max-width:760px}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--border)}
.modal-head h3{margin:0;font-size:15.5px;font-weight:700;color:var(--text);text-transform:none;letter-spacing:-0.02em}
.modal-x{
  background:transparent;border:0;color:var(--mut);font-size:22px;cursor:pointer;
  width:30px;height:30px;line-height:1;padding:0;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--fast), color var(--fast);
}
.modal-x:hover{background:var(--accent-soft);color:var(--blue-hi)}
.modal-body{padding:20px 24px}
.modal-foot{padding:14px 24px;border-top:1px solid var(--border);background:var(--bg-elev-3);display:flex;gap:8px;justify-content:flex-end}

/* ─────── Heatmap ─────── */
.heatmap-wrap{overflow-x:auto}

/* small screens */
@media (max-width:900px){
  .topbar{padding:13px 18px}
  .page{padding:18px 18px 32px;gap:14px}
  .card{padding:16px}
  .stat-value{font-size:24px}
}