:root {
  --bg: #0b0d10;
  --surface: #111419;
  --surface-2: #161a20;
  --surface-3: #1b2027;
  --border: #252b33;
  --border-soft: #1e242b;
  --text: #eef2f6;
  --muted: #8e99a8;
  --muted-2: #687382;
  --good: #42c978;
  --warn: #e2b64d;
  --bad: #e35d6a;
  --info: #5ba8ff;
  --radius: 7px;
  --gap: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height: 100vh; }
button, input, select { font: inherit; }
.app { min-height: 100vh; display: grid; grid-template-rows: 58px 1fr; }
header { background: #0e1115; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 22px; gap: 22px; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 195px; }
.brand-mark { width: 27px; height: 27px; border: 1px solid #495361; border-radius: 5px; display: grid; place-items: center; font-weight: 700; font-size: 12px; letter-spacing: -.5px; }
.brand-name { font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.brand-name span { color: var(--muted); font-weight: 500; }
.global-status { height: 30px; padding: 0 11px; border: 1px solid var(--border); border-radius: 5px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #cbd3dc; }
.header-spacer { flex: 1; }
.header-meta { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 12px; }
.user { color: var(--text); padding-left: 18px; border-left: 1px solid var(--border); }
main { padding: var(--gap); display: grid; grid-template-columns: 1.1fr 1.45fr 1fr; grid-template-rows: auto auto minmax(230px,1fr); gap: var(--gap); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; overflow: hidden; }
.panel-header { height: 42px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; padding: 0 14px; }
.panel-title { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #bcc5cf; }
.panel-header .right { margin-left: auto; font-size: 11px; color: var(--muted-2); }
.panel-body { padding: 14px; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.good { background: var(--good); }.warn { background: var(--warn); }.bad { background: var(--bad); }.info { background: var(--info); }
.status-text { display: inline-flex; gap: 7px; align-items: center; }
.server-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 15px; }
.resource { display: grid; grid-template-columns: 58px 1fr 58px; align-items: center; gap: 10px; margin: 9px 0; font-size: 11px; }
.resource-name { color: var(--muted); }
.bar { height: 5px; overflow: hidden; background: #252a31; border-radius: 20px; }
.bar > span { display: block; height: 100%; background: #8f9baa; border-radius: inherit; transition: width .25s ease; }
.resource-value { text-align: right; color: #c7ced7; font-variant-numeric: tabular-nums; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th { text-align: left; color: var(--muted-2); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 9px 10px; border-bottom: 1px solid var(--border); }
td { padding: 10px; border-bottom: 1px solid var(--border-soft); font-size: 11px; color: #cad2db; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
tr:last-child td { border-bottom: 0; }
.mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; }
.pbx-summary { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--border); }
.pbx-stat { padding: 14px; border-right: 1px solid var(--border); }
.pbx-stat:last-child { border-right: 0; }
.pbx-stat strong { display: block; font-size: 18px; font-weight: 600; }
.pbx-stat span { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.call { display: grid; grid-template-columns: 75px 28px 75px 1fr 60px; gap: 7px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--border-soft); font-size: 11px; }
.arrow { color: var(--muted-2); text-align: center; }.call-duration { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.service-list { display: grid; }.service { min-height: 41px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 15px; padding: 0 13px; border-bottom: 1px solid var(--border-soft); font-size: 11px; }.service:last-child { border-bottom: 0; }.service-latency { color: var(--muted); font-variant-numeric: tabular-nums; }
.disk { margin-bottom: 16px; }.disk:last-child { margin-bottom: 0; }.disk-header { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 11px; }.disk-header span:last-child { color: var(--muted); }
.events { grid-column: 1/-1; }.event-table td:nth-child(1) { width: 82px; color: var(--muted-2); }.event-table td:nth-child(2) { width: 90px; }.event-table td:nth-child(3) { color: #d7dde4; }.event-table td:nth-child(4) { width: 140px; color: var(--muted); }.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; }
.focus-hidden { display: none !important; }
.auth-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(7,9,12,.94); display: grid; place-items: center; padding: 24px; backdrop-filter: blur(3px); }
.auth-overlay[hidden] { display: none; }
.auth-card { width: min(430px,100%); background: #101318; border: 1px solid #2c333d; border-radius: 8px; padding: 26px; text-align: center; }
.auth-card h1 { margin: 0 0 9px; font-size: 18px; letter-spacing: -.02em; }.auth-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.qr-wrap { margin: 22px auto 15px; background: #fff; width: 220px; height: 220px; padding: 10px; border-radius: 6px; display: grid; place-items: center; }.qr-wrap img { width: 100%; height: 100%; image-rendering: pixelated; }
.code { font: 600 18px "SFMono-Regular",Consolas,monospace; letter-spacing: .1em; margin: 11px 0 8px; }.auth-meta { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; font-size: 10px; color: var(--muted-2); }
.auth-error { color: var(--bad); font-size: 11px; margin-top: 10px; min-height: 16px; }
.stale-banner { display:none; background:#201b0d; color:#e7c56f; border-bottom:1px solid #4b3d19; font-size:11px; padding:7px 14px; text-align:center; }.stale-banner.show { display:block; }

/* Controller */
.controller { max-width: 620px; margin: 0 auto; padding: 18px; }.controller-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }.controller-top h1 { font-size:17px; margin:0; }.controller-sub { color:var(--muted); font-size:11px; margin-top:4px; }.control-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:14px; overflow:hidden; }.control-section h2 { margin:0; padding:12px 14px; font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:#bcc5cf; border-bottom:1px solid var(--border-soft); }.control-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px; }.control-btn { min-height:48px; border:1px solid #343c47; background:#171b21; color:var(--text); border-radius:6px; padding:9px 12px; text-align:left; cursor:pointer; }.control-btn:hover { background:#1b2027; }.control-btn:active { transform:translateY(1px); }.control-btn strong { display:block; font-size:12px; }.control-btn span { display:block; color:var(--muted); font-size:10px; margin-top:4px; }.control-btn.danger { border-color:#5a3138; }.control-row { display:flex; justify-content:space-between; align-items:center; min-height:46px; padding:0 14px; border-bottom:1px solid var(--border-soft); font-size:11px; }.control-row:last-child { border-bottom:0; }.pill { border:1px solid var(--border); border-radius:999px; padding:4px 8px; font-size:10px; color:var(--muted); }

@media (max-width:1000px) { main { grid-template-columns:1fr 1fr; }.events{grid-column:1/-1;} }
@media (max-width:700px) { .header-meta .hide-small{display:none;} main{grid-template-columns:1fr;}.events{grid-column:auto;}.pbx-summary{grid-template-columns:1fr 1fr;}.pbx-stat:nth-child(2){border-right:0;}.pbx-stat:nth-child(-n+2){border-bottom:1px solid var(--border);} .control-grid{grid-template-columns:1fr;} }