:root{
  --void: #F7F7F8; --steel: #FFFFFF; --steel-raised: #FFFFFF;
  --line: #E9EAEC; --line-bright: #D7D9DD;
  --accent: #3B82F6; --accent-bright: #2563EB; --accent-text: #1D4ED8;
  --paper: #1A1A1A; --paper-dim: #6B7280;
  --lamp-amber: #D97706; --lamp-green: #16A34A; --lamp-red: #DC2626;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
*{ box-sizing: border-box; }
body{
  background: var(--void); color: var(--paper); font-family: var(--font-display);
  margin: 0; min-height: 100vh;
}
.shell{ max-width: 1100px; margin: 0 auto; padding: 32px 20px 80px; }
header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 26px; background: var(--steel);
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 20px;
}
header h1{ margin: 0; font-size: 22px; letter-spacing: -0.01em; font-weight: 700; }
header h1 span{ color: var(--accent-text); }
.sub{ font-family: var(--font-mono); font-size: 11px; color: var(--paper-dim); text-transform: uppercase; margin-top: 2px; }
nav{ display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
nav button{
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0; font-weight: 500;
  background: var(--steel); border: 1px solid var(--line); color: var(--paper-dim);
  padding: 10px 16px; border-radius: 10px; cursor: pointer; transition: all 0.15s ease;
}
nav button.active{ background: rgba(59,130,246,0.1); color: var(--accent-text); border-color: rgba(59,130,246,0.25); }
nav button:not(.active):hover{ border-color: var(--line-bright); color: var(--paper); background: #FAFAFA; }
section{ display: none; }
section.active{ display: block; animation: rise 0.35s ease; }
@keyframes rise{ from{opacity:0; transform: translateY(6px)} to{opacity:1; transform: translateY(0)} }
.card{
  background: var(--steel);
  border: 1px solid var(--line); border-radius: 12px; padding: 22px; margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.03), 0 1px 3px rgba(16,24,40,0.04);
}
.card h2{ margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--paper-dim); text-transform: uppercase; font-family: var(--font-display); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
table{ width: 100%; border-collapse: collapse; font-family: var(--font-display); font-size: 13px; }
th{ text-align: left; padding: 8px 10px; color: var(--paper-dim); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--line-bright); }
td{ padding: 10px 10px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12.5px; }
tr:hover td{ background: #FAFAFB; }
.pill{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 100px; border: 1px solid transparent; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.pill.active{ color: #15803D; background: #EAF7EE; }
.pill.dial{ color: #B45309; background: #FEF3E2; }
.pill.bridged{ color: #15803D; background: #EAF7EE; }
.pill.fail{ color: #B91C1C; background: #FDECEC; }
.pill.hold{ color: #B45309; background: #FEF3E2; }
button.danger-btn{margin-left:6px;padding:3px 10px;border-radius:100px;border:1px solid #F3C6C6;background:#FDECEC;color:#B91C1C;font-family:inherit;font-size:11px;cursor:pointer}
button.danger-btn:hover{background:#FBDADA}
.holdBtn{margin-left:6px;padding:3px 10px;border-radius:100px;border:1px solid var(--line-bright);background:transparent;color:var(--paper-dim);font-family:inherit;font-size:11px;cursor:pointer}
.holdBtn:hover{border-color:var(--accent-bright);color:var(--accent-text)}
.pill.idle{ color: var(--paper-dim); background: var(--void); }
input, select{
  font-family: var(--font-display); background: #FFFFFF; border: 1px solid var(--line-bright);
  border-radius: 8px; padding: 9px 12px; color: var(--paper); font-size: 13.5px; width: 100%;
}
input:focus, select:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
label{ font-size: 11.5px; color: var(--paper-dim); font-weight: 500; letter-spacing: 0.02em; display: block; margin-bottom: 6px; }
.row{ display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > div{ flex: 1; min-width: 180px; }
.btn{
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0; text-transform: none;
  border-radius: 10px; cursor: pointer; padding: 11px 20px; font-size: 13.5px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent)); border: 1px solid #1D4ED8; color: #FFFFFF;
}
.btn:disabled{ background: var(--void); border-color: var(--line); color: var(--paper-dim); cursor: not-allowed; }
.btn.ghost{ background: #FFFFFF; color: var(--paper-dim); border-color: var(--line-bright); }
.cid-edit{ display: none; gap: 8px; margin-top: 4px; }
.cid-edit.active{ display: flex; }
.cid-edit input{ flex: 1; }
.small-btn{ font-family: var(--font-display); font-size: 11.5px; font-weight: 500; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line-bright); background: #FFFFFF; color: var(--paper-dim); cursor: pointer; }
.small-btn:hover{ color: var(--paper); border-color: #C6C9CE; background: #FAFAFB; }
.console{ background: var(--void); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; height: 160px; overflow-y: auto; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: #2F6B45; }
.console p{ margin: 0; }
.console .t{ color: var(--paper-dim); margin-right: 8px; }
#webrtcStatus{ display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 12.5px; color: var(--paper-dim); margin-top: 10px; }
#webrtcStatus .dot{ width: 8px; height: 8px; border-radius: 50%; background: #C6C9CE; }
#webrtcStatus.registered .dot{ background: var(--lamp-green); box-shadow: 0 0 6px rgba(22,163,74,0.4); }
.flash{ padding: 10px 14px; border-radius: 8px; font-family: var(--font-display); font-size: 12.5px; margin-top: 10px; display: none; }
.flash.show{ display: block; }
.flash.ok{ background: #EAF7EE; border: 1px solid #CDEBD7; color: #15803D; }
.flash.err{ background: #FDECEC; border: 1px solid #F3C6C6; color: #B91C1C; }

/* -- Sidebar: white surface, soft-tinted pill on the active item, quiet
   status row pinned to the bottom -- matches the reference structure. -- */
.app-layout{ display: flex; min-height: 100vh; align-items: stretch; }
.sidebar{
  width: 216px; flex-shrink: 0; background: #FFFFFF;
  border-right: 1px solid var(--line); padding: 24px 14px; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar-brand{ padding: 0 8px; margin-bottom: 28px; }
.sidebar-brand h1{ margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.sidebar-brand h1 span{ color: var(--accent-text); }
.sidebar-brand .sub{ margin-top: 4px; }
.sidebar nav{ display: flex; flex-direction: column; gap: 2px; margin-bottom: 0; }
.sidebar nav button{
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  justify-content: flex-start; padding: 10px 12px; filter: grayscale(0.6);
}
.sidebar nav button.active{ filter: none; }
.sidebar-foot{ margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--line); }
.main-content{ flex: 1; min-width: 0; padding: 28px 32px 80px; }
.main-topbar{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.topbar-status{ display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 12px; font-weight: 500; color: var(--paper-dim); background: var(--void); border: 1px solid var(--line); padding: 5px 12px 5px 10px; border-radius: 100px; }
.pulse-dot{ width: 6px; height: 6px; border-radius: 50%; background: #C6C9CE; flex-shrink: 0; }
.pulse-dot.on{ background: var(--lamp-green); box-shadow: 0 0 5px rgba(22,163,74,0.5); animation: dot-pulse 2s ease-in-out infinite; }
@keyframes dot-pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: 0.45; } }
.topbar-clock{ font-family: var(--font-mono); font-size: 12.5px; color: var(--paper-dim); font-variant-numeric: tabular-nums; }
@media (max-width: 760px){
  .app-layout{ flex-direction: column; }
  .sidebar{ position: static; height: auto; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sidebar-brand{ margin-bottom: 0; margin-right: 16px; }
  .sidebar nav{ flex-direction: row; flex-wrap: wrap; flex: 1; }
  .sidebar-foot{ display: none; }
}

/* -- Single sidebar logout control (replaces the old per-tab login/logout
   forms -- one identity, one session, one place to end it). -- */
.sidebar-user{ font-family: var(--font-mono); font-size: 11px; color: var(--paper-dim); padding: 10px 8px 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.sidebar-user strong{ color: var(--paper); text-transform: none; font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }
#gateLogoutBtn{ width: 100%; padding: 9px 12px; font-size: 12.5px; }