:root { color-scheme: dark; --bg:#0d1113; --sidebar:#12181b; --panel:#171e22; --panel2:#1d262b; --line:#2b373d; --text:#edf3f2; --muted:#91a09e; --green:#47c99a; --blue:#66a6ff; --amber:#f0bd62; --red:#ee716d; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:0; }
button,input { font:inherit; letter-spacing:0; }
button { border:1px solid var(--line); border-radius:6px; background:var(--panel2); color:var(--text); padding:9px 13px; cursor:pointer; }
button:hover { border-color:#46575f; }
button.primary { background:var(--green); border-color:var(--green); color:#07120f; font-weight:700; }
input { width:100%; margin-top:6px; border:1px solid var(--line); border-radius:5px; padding:10px 11px; color:var(--text); background:#101619; }
label { color:#c5d0ce; font-weight:600; }
[hidden] { display:none !important; }
.login-view { min-height:100vh; display:grid; place-items:center; padding:24px; background:#0b0f11; }
.login-panel { width:min(390px,100%); display:grid; gap:18px; border:1px solid var(--line); border-radius:8px; padding:30px; background:var(--panel); box-shadow:0 20px 55px #0008; }
.login-panel h1,.login-panel p { margin:0; }.login-panel p { color:var(--muted); }.form-error { color:#ffaaa6 !important; }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:7px; background:var(--green); color:#07120f; font-weight:900; font-size:17px; }.brand-mark.small { width:38px; height:38px; font-size:14px; }
.app { width:100%; min-width:0; min-height:100vh; display:grid; grid-template-columns:230px minmax(0,1fr); overflow-x:hidden; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; border-right:1px solid var(--line); background:var(--sidebar); padding:18px 14px; }
.brand { display:flex; align-items:center; gap:11px; padding:4px 6px 24px; }.brand span:last-child { display:grid; }.brand small { color:var(--muted); }
nav { display:grid; gap:4px; }.nav-item { text-align:left; border-color:transparent; background:transparent; color:#aebbb9; padding:11px 12px; }.nav-item.active { color:var(--text); background:#202b30; border-color:#304047; box-shadow:inset 3px 0 var(--green); }
.sidebar-footer { margin-top:auto; display:flex; gap:8px; align-items:center; color:var(--muted); padding:12px 8px; border-top:1px solid var(--line); }.status-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px #47c99a20; }
.content { min-width:0; }.topbar { min-height:88px; display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid var(--line); padding:18px 28px; background:#101518; }.topbar h1,.topbar p { margin:0; }.topbar h1 { font-size:22px; }.eyebrow { color:var(--green); font-size:11px; font-weight:800; }.top-actions { display:flex; align-items:center; gap:8px; }.top-actions span { color:var(--muted); margin-right:6px; }
.view { display:none; padding:24px 28px 40px; }.view.active { display:block; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }.metrics article { display:grid; gap:5px; min-height:125px; padding:18px; border:1px solid var(--line); border-radius:7px; background:var(--panel); }.metrics span,.metrics small { color:var(--muted); }.metrics strong { font-size:29px; line-height:1.15; }
.panel { margin-bottom:16px; border:1px solid var(--line); border-radius:7px; background:var(--panel); overflow:hidden; }.panel-head { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:17px 18px; border-bottom:1px solid var(--line); }.panel-head h2,.panel-head p { margin:0; }.panel-head h2,.settings-section h2 { font-size:16px; }.panel-head p,.settings-section p { color:var(--muted); margin-top:3px; }
.endpoint-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--line); }.endpoint { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; background:var(--panel); }.endpoint strong,.endpoint span { display:block; }.endpoint span { color:var(--muted); }.badge { display:inline-flex; align-items:center; border-radius:4px; padding:4px 7px; font-size:11px; font-weight:800; text-transform:uppercase; }.badge.online,.badge.answered { color:#76dfb8; background:#47c99a18; }.badge.offline,.badge.no-answer { color:#c1cbc9; background:#ffffff0b; }.badge.busy { color:var(--amber); background:#f0bd6215; }.badge.failed { color:#ff9691; background:#ee716d18; }
.table-wrap { overflow:auto; }table { width:100%; border-collapse:collapse; white-space:nowrap; }th,td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); }th { color:var(--muted); font-size:11px; text-transform:uppercase; }tbody tr:last-child td { border-bottom:0; }.empty { color:var(--muted); text-align:center; padding:28px; }.actions { display:flex; gap:6px; }.danger { color:#ffaaa6; }
.settings-form { display:grid; gap:14px; }.settings-section { display:grid; grid-template-columns:minmax(210px,1fr) minmax(300px,2fr); gap:32px; padding:22px; border:1px solid var(--line); border-radius:7px; background:var(--panel); }.settings-section h2,.settings-section p { margin:0; }.field-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.toggles { display:grid; gap:10px; }.toggles label { display:flex; align-items:center; gap:9px; padding:12px; border:1px solid var(--line); border-radius:5px; }.toggles input { width:auto; margin:0; }.save-bar { position:sticky; bottom:0; display:flex; justify-content:flex-end; align-items:center; gap:14px; padding:12px; border:1px solid var(--line); background:#11181beF; }
dialog { width:min(500px,calc(100% - 30px)); border:1px solid var(--line); border-radius:8px; padding:22px; color:var(--text); background:var(--panel); }dialog::backdrop { background:#000a; backdrop-filter:blur(3px); }dialog form { display:grid; gap:16px; }.dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.dialog-head h2,.dialog-head p { margin:0; }.dialog-head p { color:var(--muted); }.dialog-head button { font-size:20px; padding:3px 9px; }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; }.credentials { display:grid; gap:1px; background:var(--line); }.credentials div { display:grid; grid-template-columns:120px 1fr; padding:12px; background:var(--panel2); }.credentials dt { color:var(--muted); }.credentials dd { margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }.toast { position:fixed; right:20px; bottom:20px; max-width:360px; border:1px solid #47c99a50; border-radius:6px; padding:12px 15px; background:#163228; box-shadow:0 10px 30px #0008; }
.qr-frame { display:grid; place-items:center; margin:18px auto 12px; width:min(360px,100%); aspect-ratio:1; padding:12px; border-radius:6px; background:#fff; }.qr-frame img { display:block; width:100%; height:100%; object-fit:contain; }.qr-expiry { text-align:center; color:var(--amber); }.qr-steps { margin:16px 0 0; padding-left:22px; color:#cbd5d3; }.qr-steps li { margin:7px 0; }
@media (max-width:900px) { .app { grid-template-columns:1fr; }.sidebar { position:static; height:auto; padding:12px; border-right:0; border-bottom:1px solid var(--line); }.brand { padding:3px 4px 12px; }nav { display:flex; overflow:auto; }.nav-item { white-space:nowrap; }.sidebar-footer { display:none; }.metrics { grid-template-columns:repeat(2,1fr); }.topbar,.view { padding-left:16px; padding-right:16px; }.settings-section { grid-template-columns:1fr; gap:16px; } }
@media (max-width:560px) { .sidebar,.content,.topbar,.view { min-width:0; }.topbar { align-items:flex-start; flex-direction:column; }.top-actions { width:100%; justify-content:flex-end; }.top-actions span { display:none; }.metrics { grid-template-columns:1fr 1fr; }.metrics article { min-height:105px; padding:13px; }.metrics strong { font-size:23px; }.panel-head { align-items:flex-start; }.field-grid { grid-template-columns:1fr; }.view { padding-top:16px; }.actions { flex-direction:column; } }