*{box-sizing:border-box}
:root{
  --ink:#172033;
  --muted:#647084;
  --line:#dde4ee;
  --soft:#f5f7fb;
  --panel:#ffffff;
  --brand:#111827;
  --accent:#e85d2a;
  --green:#157347;
  --red:#b42318;
  --blue:#2563eb;
  --gold:#a16207;
  --radius:8px;
}
body{margin:0;min-height:100vh;background:var(--soft);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select,textarea{font:inherit}
button{height:38px;border:0;border-radius:6px;padding:0 13px;background:var(--brand);color:#fff;font-weight:650;cursor:pointer}
button.secondary{background:#e7ecf4;color:var(--ink)}
button.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
button.compact{height:32px;padding:0 10px;font-size:12px}
button:disabled{opacity:.55;cursor:not-allowed}
input,select{height:38px;width:100%;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);padding:0 10px}
textarea{width:100%;min-height:82px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);padding:10px;line-height:1.45;resize:vertical}
textarea.tall{min-height:170px}
textarea.code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:12px}
label{display:block;margin-bottom:5px;color:var(--muted);font-size:12px;font-weight:650}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:11px;text-transform:uppercase;color:var(--muted);letter-spacing:0}
pre{max-height:360px;overflow:auto;background:#0f172a;color:#e5e7eb;border-radius:6px;padding:12px;white-space:pre-wrap}
summary{cursor:pointer;font-weight:700;color:var(--ink)}
.boot{min-height:100vh;display:grid;place-items:center;color:var(--muted)}
.login{min-height:100vh;display:grid;grid-template-columns:minmax(280px,420px) 1fr}
.login-panel{background:#fff;padding:44px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--line)}
.login-panel h1{font-size:30px;margin:0 0 6px}
.login-panel p{color:var(--muted);line-height:1.5;margin:0 0 28px}
.login-art{background:linear-gradient(135deg,#111827 0%,#213145 48%,#e85d2a 100%);position:relative;overflow:hidden}
.login-art:after{content:"";position:absolute;inset:auto -8% -24% 20%;height:44%;background:rgba(255,255,255,.12);transform:rotate(-8deg);border-radius:8px}
.form-row{display:grid;gap:14px;margin-bottom:14px}
.status{margin-top:14px;min-height:18px;color:var(--muted);font-size:13px}
.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.side{background:#101827;color:#f8fafc;display:flex;flex-direction:column;border-right:1px solid #111827}
.brand{padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand strong{display:block;font-size:18px}
.brand span{display:block;color:#b7c0cf;font-size:12px;margin-top:3px}
.user{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px;color:#b7c0cf}
.org-list{padding:14px;overflow:auto;display:grid;gap:6px}
.org-button{height:auto;text-align:left;background:transparent;color:#dce3ee;border:1px solid transparent;padding:10px 12px}
.org-button:hover,.org-button.active{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.08)}
.org-button strong{display:block;font-size:13px;color:#fff}
.org-button span{font-size:12px;color:#aeb8c8}
.side-footer{margin-top:auto;padding:14px;border-top:1px solid rgba(255,255,255,.08)}
.main{padding:30px;min-width:0}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.topbar h1{margin:0;font-size:26px}
.topbar p{margin:4px 0 0;color:var(--muted);font-size:13px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 14px;border-bottom:1px solid var(--line);padding-bottom:8px}
.tab{height:36px;background:transparent;color:var(--muted);border:1px solid transparent;padding:0 12px}
.tab:hover{background:#eef2f7;color:var(--ink)}
.tab.active{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:0 1px 2px rgba(15,23,42,.05)}
.tab-panel{min-height:420px}
.grid{display:grid;gap:14px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card h2,.card h3{margin:0 0 12px}
.card h2{font-size:17px}
.card h3{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:0}
.card p{margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.metric{display:grid;gap:4px}
.metric span{color:var(--muted);font-size:12px}
.metric strong{font-size:24px}
.mini-metric{border:1px solid var(--line);border-radius:6px;padding:12px;background:#f8fafc;display:grid;gap:4px}
.mini-metric span{color:var(--muted);font-size:12px}
.mini-metric strong{font-size:18px}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700;background:#eef2f7;color:#334155}
.badge.green{background:#dcfce7;color:var(--green)}
.badge.red{background:#fee2e2;color:var(--red)}
.badge.blue{background:#dbeafe;color:var(--blue)}
.badge.gold{background:#fef3c7;color:var(--gold)}
.notice{min-height:0;margin:0 0 12px;font-size:13px;font-weight:650}
.notice:empty{display:none}
.notice.ok{color:var(--green)}
.notice.err{color:var(--red)}
.muted{color:var(--muted)}
.small{font-size:12px}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.span-2{grid-column:span 2}
.subpanel{border:1px solid var(--line);border-radius:6px;padding:14px;background:#fff;margin-top:12px}
.subpanel:first-of-type{margin-top:0}
.subpanel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.check-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.check{border:1px solid var(--line);border-radius:6px;padding:10px;background:#f8fafc;display:grid;gap:3px}
.check strong{font-size:11px;text-transform:uppercase}
.check span{font-size:13px;color:var(--muted)}
.check.ok strong{color:var(--green)}
.check.warn strong{color:var(--gold)}
.summary-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.summary-list div{border:1px solid var(--line);border-radius:6px;padding:10px;background:#f8fafc;min-width:0}
.summary-list span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
.summary-list strong{display:block;font-size:14px;word-break:break-word}
.action-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.action-list button{text-align:left}
.telnyx-live{border-top:1px solid var(--line);padding-top:12px}
.hours{display:grid;gap:8px}
.hour-row{display:grid;grid-template-columns:120px 82px 1fr 1fr;gap:10px;align-items:center}
.empty{border:1px dashed var(--line);border-radius:var(--radius);padding:20px;text-align:center;color:var(--muted)}
.customer-row{cursor:pointer}
.customer-row:hover td{background:#f8fafc}
.section-space{margin-top:14px}
@media(max-width:920px){
  .app{grid-template-columns:1fr}
  .side{position:static}
  .main{padding:18px}
  .grid.cols-2,.grid.cols-3,.grid.cols-4,.field-grid,.check-grid,.summary-list,.action-list{grid-template-columns:1fr}
  .span-2{grid-column:span 1}
  .hour-row{grid-template-columns:1fr 1fr;gap:8px}
  .login{grid-template-columns:1fr}
  .login-art{display:none}
}