:root {
  color-scheme: dark;
  --bg: #08090a;
  --panel: #101214;
  --panel-2: #15181b;
  --line: #25292d;
  --line-soft: #1c2023;
  --text: #f2f5f4;
  --muted: #89928f;
  --green: #62e6aa;
  --green-deep: #12382a;
  --cyan: #52b7e8;
  --amber: #f0b65b;
  --red: #ff6b67;
  --red-deep: #371918;
  --sidebar: 238px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { min-width: 320px; letter-spacing: 0; }
button, input, select { font: inherit; letter-spacing: 0; }
button { color: inherit; }
.is-hidden { display: none !important; }

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(620px, 1fr) minmax(420px, 520px);
  background: #070809;
}
.login-brand {
  position: relative;
  overflow: hidden;
  padding: 38px 46px 34px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-soft);
  background-color: #0b0d0e;
  background-image: linear-gradient(#14181a 1px, transparent 1px), linear-gradient(90deg, #14181a 1px, transparent 1px);
  background-size: 44px 44px;
}
.login-brand-head { display:flex; align-items:center; gap:14px; position:relative; z-index:2; }
.login-brand strong, .side-brand strong { display: block; font-size: 18px; }
.login-brand span, .side-brand span { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.brand-mark { width: 42px; height: 42px; display: flex; align-items: flex-end; gap: 4px; padding: 9px; border: 1px solid #2c3432; background: #111513; border-radius: 7px; }
.brand-mark i { display: block; width: 6px; background: var(--green); border-radius: 1px; }
.brand-mark i:nth-child(1) { height: 11px; opacity: .55; }
.brand-mark i:nth-child(2) { height: 22px; }
.brand-mark i:nth-child(3) { height: 16px; opacity: .76; }
.brand-mark.compact { width: 34px; height: 34px; padding: 7px; }
.brand-mark.compact i { width: 5px; }
.brand-mark.compact i:nth-child(1) { height: 9px; }
.brand-mark.compact i:nth-child(2) { height: 18px; }
.brand-mark.compact i:nth-child(3) { height: 13px; }
.login-network { width:min(880px,100%); margin:auto; padding:26px 0 0; }
.network-heading p { margin:0 0 8px; color:#66716d; font-size:9px; font-weight:800; text-transform:uppercase; }
.network-heading h2 { margin:0; font-size:38px; font-weight:720; }
.network-heading > span { display:flex; align-items:center; gap:8px; margin-top:12px; color:var(--green); font-size:10px; font-weight:700; }
.network-heading > span i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px rgba(98,230,170,.55); animation:network-status 2.4s ease-in-out infinite; }
.network-stage { position:relative; width:min(760px,92%); height:430px; margin:12px auto 0; }
.server-unit { position:absolute; z-index:3; width:214px; padding:13px 13px 12px; border:1px solid #30373a; border-radius:7px; background:#111416; box-shadow:0 20px 44px rgba(0,0,0,.34); }
.server-core { width:238px; top:19px; left:50%; transform:translateX(-50%); border-color:#2d5746; background:#101715; }
.server-msk { left:2%; bottom:22px; }
.server-ufa { right:2%; bottom:22px; }
.server-unit-head { display:grid; grid-template-columns:8px 1fr auto; gap:8px; align-items:center; height:27px; padding:0 5px; }
.server-unit-head > span { width:7px; height:7px; margin:0; border-radius:50%; background:var(--green); box-shadow:0 0 10px rgba(98,230,170,.45); }
.server-unit-head b { font-size:10px; letter-spacing:0; }
.server-unit-head em { color:#63706c; font-size:8px; font-style:normal; font-weight:800; }
.server-slots { display:grid; gap:6px; }
.server-slots > i { position:relative; display:flex; align-items:center; gap:5px; height:35px; padding:0 10px; border:1px solid #282e30; border-radius:4px; background:#171b1d; }
.server-core .server-slots > i { border-color:#244538; background:#13231c; }
.server-slots > i > b { width:6px; height:6px; border-radius:50%; background:#4b5652; }
.server-slots > i > b:first-child { background:var(--green); animation:port-blink 2.1s step-end infinite; }
.server-slots > i > b:nth-child(2) { background:var(--cyan); opacity:.72; animation:port-blink 2.1s .7s step-end infinite; }
.server-slots > i > span { width:54px; height:9px; margin:0 0 0 auto; background:repeating-linear-gradient(90deg,#39413f 0 2px,transparent 2px 8px); opacity:.7; }
.server-unit > small { display:block; margin-top:9px; color:#67716e; font-size:8px; text-transform:uppercase; }
.network-link { position:absolute; z-index:1; top:200px; left:50%; width:300px; height:2px; background:#25493b; transform-origin:0 50%; box-shadow:0 0 10px rgba(98,230,170,.1); }
.network-link::before { content:""; position:absolute; inset:-4px 0; border-top:1px dashed #2e3935; }
.link-msk { transform:rotate(139deg); }
.link-ufa { transform:rotate(41deg); }
.network-link > i { position:absolute; top:-4px; width:9px; height:9px; border:2px solid #102019; border-radius:50%; background:var(--green); box-shadow:0 0 12px rgba(98,230,170,.7); animation:packet-flow 2.8s linear infinite; }
.network-link > i:nth-child(2) { animation-delay:-.95s; }
.network-link > i:nth-child(3) { animation-delay:-1.9s; }
.network-flow-label { position:absolute; z-index:4; display:flex; align-items:center; gap:6px; padding:5px 7px; border:1px solid #25302c; border-radius:4px; background:#0c0f0e; color:#78827e; font-size:8px; }
.network-flow-label i { width:5px; height:5px; border-radius:50%; background:var(--green); }
.flow-msk { left:24%; top:248px; }.flow-ufa { right:24%; top:248px; }
.network-legend { display:flex; align-items:center; gap:22px; height:42px; padding:0 13px; border-top:1px solid #23282a; border-bottom:1px solid #23282a; color:#717b77; font-size:9px; }
.network-legend span { display:flex; align-items:center; gap:8px; margin:0; color:#717b77; font-size:9px; }
.network-legend i { display:block; margin:0; }.legend-live { width:16px; height:2px; background:#315e4b; }.legend-packet { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(98,230,170,.55); }
.network-legend b { margin-left:auto; color:var(--green); font-size:9px; }
@keyframes network-status { 50% { opacity:.45; box-shadow:0 0 4px rgba(98,230,170,.3); } }
@keyframes port-blink { 0%,72% { opacity:1; } 73%,82% { opacity:.25; } 83%,100% { opacity:1; } }
@keyframes packet-flow { from { left:0; } to { left:calc(100% - 9px); } }
.login-panel { align-self: center; padding: 64px 70px; max-width: 520px; width: 100%; }
.login-status { color: var(--green); font-size: 12px; text-transform: uppercase; font-weight: 700; margin-bottom: 34px; }
.login-status span, .live-label i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 8px; box-shadow: 0 0 12px rgba(98,230,170,.6); }
.login-panel h1 { font-size: 38px; margin: 0 0 10px; letter-spacing: 0; }
.login-panel > p { color: var(--muted); margin: 0 0 38px; }
.login-panel label { display: block; font-size: 12px; color: #aab1af; margin: 0 0 19px; font-weight: 650; }
.login-panel input { display: block; width: 100%; height: 48px; margin-top: 8px; border: 1px solid #2b3033; border-radius: 6px; background: #0c0e0f; color: var(--text); padding: 0 14px; outline: none; transition: border-color .18s, box-shadow .18s; }
.login-panel input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(98,230,170,.1); }
.primary-button, .secondary-button, .icon-text-button, .text-button, .square-button { border: 0; cursor: pointer; }
.primary-button { width: 100%; height: 48px; border-radius: 6px; background: var(--green); color: #07120d; font-weight: 800; margin-top: 8px; }
.primary-button:hover { background: #7aefba; }
.form-error { min-height: 20px; color: var(--red); font-size: 12px; }
.login-foot { display: flex; gap: 18px; color: #68716e; font-size: 10px; text-transform: uppercase; margin-top: 30px; }
.login-stage { animation:login-stage-in .22s ease-out; }.login-stage .otp-mark { display:flex; gap:6px; margin:0 0 25px; }.otp-mark i { width:9px; height:9px; border-radius:50%; border:1px solid #587064; background:#17231e; }.otp-mark i:nth-child(3),.otp-mark i:nth-child(6) { background:var(--green); border-color:var(--green); box-shadow:0 0 12px rgba(98,230,170,.35); }.login-back { display:block; border:0; background:transparent; color:#7f8985; padding:0; margin:-7px 0 15px; font-size:10px; cursor:pointer; }.login-back:hover { color:var(--text); }@keyframes login-stage-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); background: #0b0d0e; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; padding: 22px 14px 16px; z-index: 20; }
.side-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 23px; }
.side-brand strong { font-size: 15px; }
.side-brand span { font-size: 10px; text-transform: uppercase; }
.sidebar nav { display: flex; flex-direction: column; gap: 3px; }
.sidebar nav button { width: 100%; border: 0; background: transparent; color: #9ba3a0; display: flex; align-items: center; text-align: left; height: 43px; padding: 0 11px; border-radius: 5px; cursor: pointer; font-weight: 600; font-size: 13px; }
.sidebar nav button:hover { background: #121517; color: #e9edeb; }
.sidebar nav button.active { background: #17221d; color: var(--green); }
.nav-sign { width: 31px; color: #59615f; font-size: 10px; font-variant-numeric: tabular-nums; }
.sidebar nav button.active .nav-sign { color: var(--green); }
#incident-badge { display: none; margin-left: auto; min-width: 19px; height: 19px; align-items: center; justify-content: center; background: var(--red-deep); color: var(--red); border-radius: 9px; font-size: 10px; }
#incident-badge.visible { display: inline-flex; }
.side-footer { margin-top: auto; border-top: 1px solid var(--line-soft); padding: 16px 7px 0; }
.operator { width:100%; display:flex; align-items:center; gap:10px; margin-bottom:13px; padding:5px 4px; border:0; border-radius:5px; background:transparent; color:inherit; text-align:left; cursor:pointer; }.operator:hover { background:#121617; }.operator > i { margin-left:auto; color:#5f6865; font-size:18px; font-style:normal; }
.operator > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #1c2f27; color: var(--green); font-size: 12px; font-weight: 800; }
.operator strong, .operator small { display: block; }
.operator strong { font-size: 12px; }.operator small { color: var(--muted); font-size: 10px; margin-top: 2px; }.operator small.secured { color:var(--green); }
.icon-text-button { width: 100%; height: 34px; background: #131619; border: 1px solid var(--line); border-radius: 5px; color: #aab1af; font-size: 11px; }
.mobile-header { display: none; }
.workspace { grid-column: 2; min-width: 0; padding: 0 32px 56px; }
.topbar { min-height: 104px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line-soft); margin-bottom: 27px; }
.eyebrow { color: #65706c; font-size: 10px; font-weight: 800; margin: 0 0 7px; }
.topbar h1 { font-size: 25px; margin: 0; }
.top-actions { display: flex; align-items: center; gap: 16px; }
.freshness { display: flex; align-items: center; gap: 9px; }
.freshness > span { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.freshness > span.ok { background: var(--green); }.freshness > span.error { background: var(--red); }
.freshness b, .freshness small { display: block; }.freshness b { font-size: 11px; }.freshness small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.secondary-button { height: 36px; background: #15181a; border: 1px solid #2a2e31; border-radius: 5px; padding: 0 14px; font-size: 11px; font-weight: 700; }
.secondary-button:hover { border-color: #42494d; }
.secondary-button:disabled { opacity: .55; cursor: wait; }
.page { display: none; animation: page-in .2s ease-out; }
.page.active { display: block; }
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.system-banner { min-height: 112px; border: 1px solid #214d3a; background: #0d1713; border-radius: 7px; padding: 25px 27px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.system-banner > div { display: flex; align-items: center; gap: 16px; }.system-banner small, .system-banner strong { display: block; }
.system-banner small { color: #7e8d87; font-size: 11px; margin-bottom: 5px; }.system-banner strong { font-size: 20px; }
.system-banner p { color: #a1aaa7; font-size: 12px; max-width: 440px; margin: 0; text-align: right; line-height: 1.5; }
.system-banner.critical { border-color: #5b2827; background: #1a0f0f; }.system-banner.warning { border-color: #584220; background: #18140e; }
.system-orbit { width: 42px; height: 42px; border: 1px solid rgba(98,230,170,.32); border-radius: 50%; display: grid; place-items: center; }
.system-orbit i { width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 18px rgba(98,230,170,.6); }
.critical .system-orbit { border-color: rgba(255,107,103,.35); }.critical .system-orbit i { background: var(--red); box-shadow: 0 0 18px rgba(255,107,103,.5); }
.warning .system-orbit i, .loading .system-orbit i { background: var(--amber); box-shadow: 0 0 18px rgba(240,182,91,.5); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 30px; }
.metric-card { min-height: 108px; border: 1px solid var(--line); background: var(--panel); border-radius: 7px; padding: 18px; }
.metric-card small { color: var(--muted); font-size: 11px; display: block; margin-bottom: 13px; }.metric-card strong { font-size: 27px; font-variant-numeric: tabular-nums; }.metric-card p { color: #6f7875; font-size: 10px; margin: 7px 0 0; }
.metric-card.green strong { color: var(--green); }.metric-card.red strong { color: var(--red); }.metric-card.cyan strong { color: var(--cyan); }.metric-card.amber strong { color: var(--amber); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; margin: 0 0 14px; }
.section-heading.spaced { margin-top: 30px; }.section-heading h2 { font-size: 16px; margin: 0 0 5px; }.section-heading p { color: var(--muted); font-size: 11px; margin: 0; }
.live-label { color: var(--green); font-size: 9px; font-weight: 800; }.live-label i { width: 6px; height: 6px; margin-right: 5px; }
.counter { border: 1px solid var(--line); padding: 5px 10px; border-radius: 5px; color: var(--muted); font-size: 11px; }
.topology { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
.topology-zone { min-height: 215px; border: 1px solid var(--line); border-radius: 7px; background-color: #0d0f10; background-image: linear-gradient(#151819 1px, transparent 1px), linear-gradient(90deg, #151819 1px, transparent 1px); background-size: 30px 30px; padding: 18px; }
.zone-label { font-size: 10px; color: #66706d; font-weight: 800; margin-bottom: 17px; text-transform: uppercase; }
.node-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.node { position: relative; border: 1px solid #292f31; background: #121517; border-radius: 6px; padding: 14px; min-height: 76px; }
.node::before { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; right: 12px; top: 12px; background: var(--red); }
.node.ok::before { background: var(--green); box-shadow: 0 0 9px rgba(98,230,170,.45); }.node.pending::before { background: var(--amber); }
.node b, .node small, .node em { display: block; }.node b { font-size: 12px; }.node small { color: var(--muted); margin-top: 6px; font-size: 10px; }.node em { color: var(--cyan); font-style: normal; font-size: 10px; margin-top: 5px; }
.split-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 12px; }
.panel { border: 1px solid var(--line); background: var(--panel); border-radius: 7px; overflow: hidden; }
.panel-head { min-height: 64px; padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
.panel-head h3 { font-size: 13px; margin: 0 0 4px; }.panel-head p { color: var(--muted); font-size: 10px; margin: 0; }
.text-button { background: transparent; color: var(--green); font-size: 10px; }
.empty-state, .notice { color: var(--muted); padding: 28px; text-align: center; font-size: 12px; }
.agent-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; align-items: center; min-height: 58px; padding: 10px 17px; border-bottom: 1px solid var(--line-soft); font-size: 11px; }.agent-row:last-child { border-bottom: 0; }
.agent-name { display: flex; align-items: center; gap: 9px; }.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }.status-dot.ok { background: var(--green); }
.agent-row small { color: var(--muted); display: block; margin-top: 3px; }.agent-value { font-variant-numeric: tabular-nums; color: #c7cdcb; }
.usage, .quality-track { appearance: none; border: 0; overflow: hidden; padding: 0; }
.usage { display: block; width: 76px; height: 4px; background: #252a2c; margin-top: 6px; }
.usage::-webkit-progress-bar, .quality-track::-webkit-progress-bar { background: #252a2c; }
.usage::-webkit-progress-value { background: var(--green); }.usage::-moz-progress-bar { background: var(--green); }
.event-item { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); align-items: start; }.event-item:last-child { border-bottom: 0; }
.event-item > i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-top: 3px; }.event-item.closed > i { background: var(--green); }
.event-item b { display: block; font-size: 11px; }.event-item p { color: var(--muted); font-size: 10px; margin: 5px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.event-item time { color: #69726f; font-size: 9px; }

.data-table { width: 100%; border: 1px solid var(--line); background: var(--panel); border-radius: 7px; overflow: hidden; }
.table-row { display: grid; grid-template-columns: 1.4fr .75fr .65fr .65fr .75fr; min-height: 52px; align-items: center; padding: 0 15px; border-bottom: 1px solid var(--line-soft); font-size: 11px; }.table-row:last-child { border-bottom: 0; }.table-row.head { min-height: 38px; color: #707976; background: #0d0f10; text-transform: uppercase; font-size: 9px; font-weight: 800; }.table-row strong { font-size: 11px; }.table-row small { color: var(--muted); display: block; margin-top: 3px; }.table-row .right { text-align: right; }
.state-pill { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-size: 10px; font-weight: 700; }.state-pill::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.state-pill.ok { color: var(--green); }.state-pill.pending { color: var(--amber); }
.server-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }.server-card { border: 1px solid var(--line); background: var(--panel); border-radius: 7px; padding: 17px; }.server-title { display:flex; justify-content:space-between; align-items:start; margin-bottom:19px; }.server-title b { font-size:13px; }.server-title small { display:block; color:var(--muted); margin-top:4px; font-size:10px; }.server-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.server-stat { background:#0c0e0f; border:1px solid var(--line-soft); padding:11px; border-radius:5px; }.server-stat small,.server-stat strong { display:block; }.server-stat small { color:var(--muted); font-size:9px; }.server-stat strong { margin-top:5px; font-size:14px; font-variant-numeric:tabular-nums; }.service-line { margin-top:13px; display:flex; flex-wrap:wrap; gap:5px; }.service-tag { border:1px solid #2b3032; padding:4px 6px; font-size:9px; color:var(--muted); border-radius:4px; }.service-tag.ok { color:var(--green); border-color:#254b3a; }
.metric-grid.large { grid-template-columns: repeat(5,minmax(0,1fr)); }.call-health { min-height:240px; }.quality-bars { padding:22px; display:grid; gap:18px; }.quality-row { display:grid; grid-template-columns:100px 1fr 64px; gap:12px; align-items:center; font-size:11px; }.quality-track { width:100%; height:7px; background:#252a2c; }.quality-track.cyan::-webkit-progress-value { background:var(--cyan); }.quality-track.cyan::-moz-progress-bar { background:var(--cyan); }.quality-track.amber::-webkit-progress-value { background:var(--amber); }.quality-track.amber::-moz-progress-bar { background:var(--amber); }.quality-track.red::-webkit-progress-value { background:var(--red); }.quality-track.red::-moz-progress-bar { background:var(--red); }.quality-row strong { text-align:right; font-variant-numeric:tabular-nums; }.checklist { padding:19px; display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }.checklist span { border:1px solid var(--line-soft); background:#0c0e0f; border-radius:5px; padding:11px; color:#a9b1ae; font-size:10px; }.checklist span::before { content:"✓"; color:var(--green); margin-right:8px; }
.call-registry { margin-top: 4px; }
.call-registry-head { min-height: 68px; }
.call-filters { display:grid; grid-template-columns:minmax(260px,1fr) 140px 150px 130px; gap:9px; padding:13px 15px; border-bottom:1px solid var(--line-soft); background:#0d0f10; }
.call-filters label { min-width:0; }
.call-filters label > span { display:block; color:#707976; font-size:8px; font-weight:800; text-transform:uppercase; margin:0 0 6px 2px; }
.call-filters input,.call-filters select { width:100%; height:37px; border:1px solid #2a2f31; background:#111416; color:#d9dddc; border-radius:5px; padding:0 11px; outline:none; font-size:11px; }
.call-filters input:focus,.call-filters select:focus { border-color:#4b7464; box-shadow:0 0 0 2px rgba(98,230,170,.08); }
.call-list { min-height:180px; }
.call-more { display:flex; justify-content:center; padding:15px; border-top:1px solid var(--line-soft); background:#0d0f10; }.call-more .secondary-button { min-width:190px; }
.call-row { width:100%; border:0; border-bottom:1px solid var(--line-soft); background:var(--panel); color:inherit; display:grid; grid-template-columns:94px minmax(220px,1.5fr) 135px 100px 100px 130px; gap:12px; align-items:center; min-height:66px; padding:9px 15px; text-align:left; font-size:10px; cursor:pointer; }
.call-row:last-child { border-bottom:0; }.call-row:not(.call-row-head):hover { background:#14181a; }
.call-row-head { min-height:35px; background:#0b0d0e; color:#68716e; text-transform:uppercase; font-size:8px; font-weight:800; cursor:default; }
.call-id { color:var(--cyan); font:700 11px ui-monospace,SFMono-Regular,Consolas,monospace; }
.call-people { min-width:0; display:grid; grid-template-columns:auto 14px auto; align-items:center; justify-content:start; column-gap:5px; }
.call-people strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:145px; }.call-people i { color:#56605d; font-style:normal; }.call-people small { grid-column:1/-1; color:#707976; margin-top:4px; }
.call-row time { color:#a2aaa7; }.call-status { font-weight:700; }.call-status.ended { color:var(--green); }.call-status.missed,.call-status.rejected { color:var(--red); }.call-status.ringing,.call-status.accepted { color:var(--cyan); }
.quality-pill { display:inline-flex; width:max-content; max-width:100%; padding:5px 7px; border:1px solid #303537; border-radius:4px; color:#828b88; font-weight:700; white-space:nowrap; }.quality-pill.good { color:var(--green); border-color:#285441; background:#0d1914; }.quality-pill.ok { color:#9ddabf; border-color:#355247; }.quality-pill.warn { color:var(--amber); border-color:#554323; }.quality-pill.bad { color:var(--red); border-color:#5a2b29; background:#1a1010; }
body.drawer-open { overflow:hidden; }
.call-drawer { position:fixed; inset:0; z-index:90; pointer-events:none; visibility:hidden; }
.call-drawer.open { pointer-events:auto; visibility:visible; }
.drawer-backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(0,0,0,.7); opacity:0; transition:opacity .2s ease; }
.call-drawer.open .drawer-backdrop { opacity:1; }
.call-drawer aside { position:absolute; inset:0 0 0 auto; width:min(720px,94vw); background:#0b0d0e; border-left:1px solid #282d2f; overflow-y:auto; transform:translateX(100%); transition:transform .24s ease-out; box-shadow:-22px 0 60px rgba(0,0,0,.45); }
.call-drawer.open aside { transform:none; }.drawer-loading { min-height:100%; display:grid; place-items:center; color:var(--muted); gap:12px; }
.drawer-head { min-height:112px; position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; padding:25px 27px 20px; background:rgba(11,13,14,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.drawer-head small { color:var(--muted); font-size:9px; text-transform:uppercase; }.drawer-head h2 { margin:5px 0 7px; font:750 24px ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--cyan); }
.copy-id { border:0; background:transparent; color:#68716e; padding:0; font:10px ui-monospace,SFMono-Regular,Consolas,monospace; cursor:pointer; }.copy-id:hover { color:var(--text); }
.drawer-close { width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:#131719; color:#b9c0be; font-size:20px; cursor:pointer; }
.call-hero { display:grid; grid-template-columns:1fr 28px 1fr; align-items:center; gap:12px; padding:23px 27px; border-bottom:1px solid var(--line-soft); background:#0e1112; }.call-hero > i { color:#56605d; font-style:normal; text-align:center; }.call-hero div:last-child { text-align:right; }.call-hero small,.call-hero strong,.call-hero span { display:block; }.call-hero small { color:#68716e; font-size:8px; text-transform:uppercase; }.call-hero strong { margin-top:7px; font-size:15px; }.call-hero span { color:#747d7a; font-size:9px; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detail-section { padding:22px 27px; border-bottom:1px solid var(--line-soft); }.detail-section h3 { margin:0 0 14px; color:#cbd1cf; font-size:11px; text-transform:uppercase; }.detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.detail-stat { min-width:0; padding:11px; background:#101315; border:1px solid #202527; border-radius:5px; }.detail-stat small,.detail-stat strong { display:block; }.detail-stat small { color:#68716e; font-size:8px; text-transform:uppercase; }.detail-stat strong { margin-top:6px; color:#d6dbd9; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.detail-stat strong.mono { font:9px ui-monospace,SFMono-Regular,Consolas,monospace; }
.quality-summary { display:flex; align-items:center; gap:15px; padding:15px; border:1px solid #252b2d; background:#101315; border-radius:6px; }.quality-score { width:52px; height:52px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; border:1px solid #3a4240; font-size:17px; }.quality-score.good { color:var(--green); border-color:#2d6c52; }.quality-score.ok { color:#a4ddc3; }.quality-score.warn { color:var(--amber); border-color:#68522a; }.quality-score.bad { color:var(--red); border-color:#6c302e; }.quality-summary strong,.quality-summary span { display:block; }.quality-summary strong { font-size:13px; }.quality-summary span { color:#7c8582; font-size:9px; margin-top:5px; }
.device-report { border:1px solid #272c2e; border-radius:6px; background:#0f1213; margin-bottom:9px; overflow:hidden; }.device-report:last-child { margin-bottom:0; }.device-report-head { display:flex; align-items:center; justify-content:space-between; padding:13px 14px; border-bottom:1px solid var(--line-soft); }.device-report-head strong,.device-report-head span { display:block; }.device-report-head strong { font-size:12px; }.device-report-head span { color:#747d7a; font-size:9px; margin-top:4px; }.device-report-head i { color:var(--amber); font-style:normal; font-size:8px; text-transform:uppercase; }.device-report-head i.final { color:var(--green); }
.report-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); }.report-metrics .detail-stat { border:0; border-radius:0; background:#101315; }
.selected-route { padding:13px 14px; }.selected-route small,.selected-route strong,.selected-route span { display:block; }.selected-route small { color:#68716e; font-size:8px; text-transform:uppercase; }.selected-route strong { color:var(--cyan); font-size:10px; margin-top:7px; word-break:break-word; }.selected-route span { color:#7b8581; font-size:9px; margin-top:5px; }
.route-chips { display:grid; gap:6px; }.route-chips span { display:grid; grid-template-columns:78px 1fr; gap:4px 9px; align-items:center; min-height:45px; padding:8px 11px; border:1px solid #252a2c; background:#101315; border-radius:5px; color:#7d8683; font-size:9px; }.route-chips b { color:var(--cyan); grid-row:1/3; }.route-chips em { font-style:normal; color:#a1aaa7; }.route-chips small { color:#68716e; }.detail-empty { padding:18px; border:1px dashed #2a2f31; color:#747d7a; text-align:center; font-size:10px; }
.event-timeline { display:grid; }.event-timeline > div { display:grid; grid-template-columns:62px 10px 1fr; gap:9px; min-height:45px; }.event-timeline time { color:#68716e; font-size:9px; text-align:right; padding-top:2px; }.event-timeline i { position:relative; width:7px; height:7px; border:1px solid var(--cyan); border-radius:50%; margin-top:2px; }.event-timeline i::after { content:""; position:absolute; width:1px; height:38px; top:7px; left:2px; background:#273033; }.event-timeline > div:last-child i::after { display:none; }.event-timeline b,.event-timeline small { display:block; }.event-timeline b { font-size:10px; }.event-timeline small { color:#747d7a; margin-top:4px; font-size:9px; word-break:break-word; }
.route-summary { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:10px; margin-bottom:18px; }.route-tile { border:1px solid var(--line); background:var(--panel); border-radius:7px; min-height:116px; padding:17px; }.route-tile.primary { border-color:#275140; background:#0d1713; }.route-tile small,.route-tile strong,.route-tile span { display:block; }.route-tile small { color:var(--muted); font-size:9px; text-transform:uppercase; }.route-tile strong { font-size:18px; margin-top:13px; }.route-tile span { color:#77807d; font-size:10px; margin-top:7px; }
.incident-list { border:1px solid var(--line); border-radius:7px; overflow:hidden; }.incident-row { display:grid; grid-template-columns:12px minmax(220px,1fr) 160px 160px 120px; align-items:center; gap:12px; min-height:65px; padding:10px 16px; border-bottom:1px solid var(--line-soft); background:var(--panel); }.incident-row:last-child { border-bottom:0; }.incident-row > i { width:8px; height:8px; border-radius:50%; background:var(--red); }.incident-row.closed > i { background:var(--green); }.incident-row b { font-size:11px; }.incident-row p { margin:4px 0 0; color:var(--muted); font-size:10px; }.incident-row time,.incident-duration { color:#8d9693; font-size:10px; }.ack-button { border:1px solid #313638; background:#15181a; color:#b7bfbc; border-radius:4px; height:29px; font-size:9px; cursor:pointer; }.ack-button:disabled { opacity:.5; cursor:default; }
#incident-filter { height:34px; border:1px solid var(--line); background:#111416; color:#c8cfcc; border-radius:5px; padding:0 10px; font-size:10px; }
.security-strip { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #214d3a; background:#0d1713; border-radius:7px; margin-bottom:16px; }.security-strip div { padding:17px; border-right:1px solid #1e3b30; }.security-strip div:last-child { border-right:0; }.security-strip small,.security-strip strong { display:block; }.security-strip small { color:#789087; font-size:9px; text-transform:uppercase; }.security-strip strong { color:var(--green); font-size:11px; margin-top:6px; }
.security-strip strong.security-warning { color:var(--amber); }
.profile-open { overflow:hidden; }.profile-modal { position:fixed; inset:0; z-index:110; display:grid; place-items:center; visibility:hidden; pointer-events:none; }.profile-modal.open { visibility:visible; pointer-events:auto; }.profile-backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(0,0,0,.76); opacity:0; transition:opacity .2s; }.profile-modal.open .profile-backdrop { opacity:1; }.profile-dialog { position:relative; width:min(520px,calc(100vw - 30px)); max-height:min(760px,calc(100vh - 30px)); overflow:auto; border:1px solid #2b3032; border-radius:8px; background:#0c0e0f; box-shadow:0 28px 90px rgba(0,0,0,.65); opacity:0; transform:translateY(14px) scale(.985); transition:opacity .2s,transform .22s ease-out; }.profile-modal.open .profile-dialog { opacity:1; transform:none; }.profile-dialog > header { position:sticky; top:0; z-index:2; min-height:82px; display:flex; justify-content:space-between; align-items:flex-start; padding:20px 22px; border-bottom:1px solid var(--line); background:rgba(12,14,15,.96); backdrop-filter:blur(10px); }.profile-dialog header small { color:#68716e; font-size:8px; text-transform:uppercase; }.profile-dialog header h2 { margin:5px 0 0; font-size:21px; }.profile-security { padding:22px; min-height:330px; }.profile-security .drawer-loading { min-height:286px; }
.security-hero { display:grid; grid-template-columns:54px 1fr; gap:15px; align-items:start; padding-bottom:19px; border-bottom:1px solid var(--line-soft); }.security-hero.compact { padding-bottom:17px; }.security-shield { width:50px; height:56px; display:grid; place-items:center; border:1px solid #504126; background:#18150e; clip-path:polygon(50% 0,92% 16%,88% 70%,50% 100%,12% 70%,8% 16%); }.security-shield i { width:10px; height:10px; border-radius:50%; background:var(--amber); box-shadow:0 0 14px rgba(240,182,91,.42); }.security-hero.enabled .security-shield { border-color:#285641; background:#0d1914; }.security-hero.enabled .security-shield i { background:var(--green); box-shadow:0 0 14px rgba(98,230,170,.45); }.security-hero small { color:#737c79; font-size:8px; text-transform:uppercase; }.security-hero h3 { margin:6px 0 7px; font-size:17px; }.security-hero p,.setup-heading p { margin:0; color:#89928f; font-size:10px; line-height:1.55; }
.setup-benefits { display:grid; gap:8px; padding:17px 0; }.setup-benefits span { color:#aeb5b2; font-size:10px; }.setup-benefits i { display:inline-block; width:6px; height:6px; margin-right:9px; border-radius:50%; background:var(--green); }.profile-field,.disable-2fa-form label,.confirm-code label { display:block; color:#aab1af; font-size:10px; font-weight:650; }.profile-field input,.disable-2fa-form input,.confirm-code input { display:block; width:100%; height:43px; margin-top:7px; border:1px solid #2b3033; border-radius:5px; background:#090b0c; color:var(--text); padding:0 12px; outline:none; }.profile-field input:focus,.disable-2fa-form input:focus,.confirm-code input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(98,230,170,.08); }.profile-primary { margin-top:3px; }
.security-facts { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:17px 0; }.security-facts div { padding:12px; border:1px solid var(--line-soft); background:#101315; border-radius:5px; }.security-facts small,.security-facts strong { display:block; }.security-facts small { color:#68716e; font-size:8px; text-transform:uppercase; }.security-facts strong { margin-top:6px; font-size:10px; }.danger-text-button { border:0; background:transparent; color:#aa625f; padding:5px 0; font-size:9px; cursor:pointer; }.disable-2fa-form { margin-top:14px; padding-top:15px; border-top:1px solid #32201f; }.disable-2fa-form p { color:#9b8583; font-size:10px; line-height:1.5; }.disable-2fa-form label { margin-top:11px; }.danger-button { width:100%; height:42px; border:1px solid #6a2e2c; border-radius:5px; background:#2a1211; color:#ff8b87; font-size:10px; font-weight:750; cursor:pointer; }
.setup-heading small { color:var(--green); font-size:8px; text-transform:uppercase; font-weight:800; }.setup-heading h3 { margin:6px 0 8px; font-size:18px; }.qr-shell { width:264px; height:264px; display:grid; place-items:center; margin:20px auto 13px; padding:16px; border-radius:7px; background:#fff; }.qr-shell canvas { width:232px; height:232px; }.manual-secret { margin:0 0 18px; border:1px solid var(--line-soft); border-radius:5px; background:#101315; }.manual-secret summary { padding:11px 13px; color:#8c9592; font-size:9px; cursor:pointer; }.manual-secret code { display:block; padding:0 13px 12px; color:var(--cyan); font-size:10px; word-break:break-all; }.confirm-code input { text-align:center; font:700 20px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:4px; }.recovery-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:18px 0 12px; }.recovery-grid code { display:block; padding:10px; border:1px solid #2a3032; background:#101315; border-radius:4px; color:#d8dddb; text-align:center; font-size:10px; }.recovery-warning { padding:12px; border:1px solid #554323; background:#18140d; border-radius:5px; color:#c3a36f; font-size:9px; line-height:1.5; }.profile-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }.profile-actions .primary-button { margin:0; height:36px; }.profile-actions .secondary-button { height:36px; }
.toast { position:fixed; right:22px; bottom:22px; max-width:340px; background:#f2f5f4; color:#111; padding:12px 15px; border-radius:5px; font-size:11px; font-weight:700; opacity:0; transform:translateY(8px); pointer-events:none; transition:.2s; z-index:120; }.toast.show { opacity:1; transform:none; }

@media (max-width: 1100px) {
  .login-shell { grid-template-columns:minmax(520px,1fr) minmax(400px,480px); }
  .login-brand { padding-left:30px; padding-right:30px; }
  .network-heading h2 { font-size:31px; }
  .network-stage { transform:scale(.86); transform-origin:50% 20%; margin-bottom:-54px; }
  .metric-grid.large { grid-template-columns:repeat(3,1fr); }
  .server-grid { grid-template-columns:1fr 1fr; }
  .route-summary { grid-template-columns:1fr 1fr; }
  .call-row { grid-template-columns:90px minmax(200px,1fr) 125px 90px 120px; }.call-row > :nth-child(5) { display:none; }
}
@media (max-width: 980px) {
  .login-shell { grid-template-columns:1fr; }
  .login-brand { display:none; }
  .login-panel { padding:42px 25px; margin:auto; }
}
@media (max-width: 820px) {
  .app-shell { display:block; }.sidebar { transform:translateX(-100%); transition:transform .2s; box-shadow:12px 0 28px rgba(0,0,0,.45); }.sidebar.open { transform:none; }
  .mobile-header { display:flex; position:sticky; top:0; height:60px; align-items:center; justify-content:space-between; background:#0b0d0e; border-bottom:1px solid var(--line); padding:0 15px; z-index:15; }.mobile-header .side-brand { padding:0; }.square-button { width:36px; height:36px; border:1px solid var(--line); background:#15181a; border-radius:5px; }
  .workspace { padding:0 15px 40px; }.topbar { min-height:86px; }.topbar h1 { font-size:20px; }.freshness { display:none; }
  .metric-grid,.metric-grid.large { grid-template-columns:repeat(2,1fr); }.topology,.split-layout { grid-template-columns:1fr; }.server-grid { grid-template-columns:1fr; }.incident-row { grid-template-columns:10px 1fr auto; }.incident-row time,.incident-duration { display:none; }.security-strip { grid-template-columns:1fr 1fr; }.security-strip div:nth-child(2) { border-right:0; }.security-strip div:nth-child(-n+2) { border-bottom:1px solid #1e3b30; }
  .table-row { grid-template-columns:1.4fr .7fr .7fr; }.table-row > :nth-child(3),.table-row > :nth-child(4) { display:none; }
  .call-filters { grid-template-columns:1fr 1fr; }.call-search { grid-column:1/-1; }.call-row { grid-template-columns:82px minmax(150px,1fr) 115px; }.call-row > :nth-child(4),.call-row > :nth-child(5),.call-row > :nth-child(6) { display:none; }
}
@media (max-width: 520px) {
  .login-panel h1 { font-size:31px; }.login-foot { gap:10px; font-size:8px; }
  .metric-grid,.metric-grid.large { grid-template-columns:1fr 1fr; gap:8px; }.metric-card { min-height:96px; padding:14px; }.metric-card strong { font-size:22px; }
  .system-banner { display:block; padding:20px; }.system-banner p { text-align:left; margin-top:17px; }.node-row { grid-template-columns:1fr; }.route-summary { grid-template-columns:1fr; }.security-strip { grid-template-columns:1fr; }.security-strip div { border-right:0; border-bottom:1px solid #1e3b30; }.security-strip div:last-child { border-bottom:0; }
  .top-actions { gap:8px; }.secondary-button { padding:0 10px; }.agent-row { grid-template-columns:1fr 1fr; }.agent-row > :nth-child(3),.agent-row > :nth-child(4) { display:none; }
  .call-filters { grid-template-columns:1fr 1fr; }.call-row { grid-template-columns:78px minmax(0,1fr); }.call-row > :nth-child(3) { display:none; }.call-people strong { max-width:110px; }.detail-section,.drawer-head,.call-hero { padding-left:17px; padding-right:17px; }.detail-grid,.report-metrics { grid-template-columns:1fr 1fr; }.call-hero { grid-template-columns:1fr 18px 1fr; }
  .profile-security { padding:17px; }.security-hero { grid-template-columns:44px 1fr; }.security-shield { width:42px; height:48px; }.qr-shell { width:244px; height:244px; padding:12px; }.qr-shell canvas { width:220px!important; height:220px!important; }.recovery-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .network-heading > span i,.server-slots > i > b,.network-link > i { animation:none; }
  .network-link > i:nth-child(1) { left:18%; }.network-link > i:nth-child(2) { left:50%; }.network-link > i:nth-child(3) { left:82%; }
}