:root {
  color-scheme: dark;
  --background: #07090d;
  --surface: #10141c;
  --surface-light: #151a24;
  --surface-raised: #1a202c;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --text: #f4f7fa;
  --muted: #94a3b8;
  --primary: #53fc18;
  --primary-light: #6cff38;
  --accent: #53fc18;
  --success: #53fc18;
  --warning: #f6c453;
  --danger: #ff647c;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --shadow: 0 18px 50px rgba(0,0,0,.28);
  font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--background);scroll-behavior:smooth}
body{margin:0;color:var(--text);background:var(--background);font-family:inherit;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit}
a,button,input,select,textarea{outline:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
a{color:inherit}
.app-shell{display:grid!important;grid-template-columns:264px minmax(0,1fr)!important;min-height:100vh}
.sidebar{position:sticky!important;top:0;display:flex!important;flex-direction:column;height:100vh!important;padding:24px 16px!important;background:#0b0e13!important;border-right:1px solid var(--border)!important}
.brand{display:flex!important;align-items:center;gap:12px;padding:4px 8px 24px!important}
.brand-mark,.dk-mark{display:grid!important;place-items:center;width:42px!important;height:42px!important;min-width:42px;border:1px solid rgba(83,252,24,.35)!important;border-radius:10px!important;color:#071006!important;background:var(--primary)!important;box-shadow:none!important;font-size:14px!important;font-weight:900!important;letter-spacing:-.04em}
.brand-name{font-size:16px!important;font-weight:800!important;letter-spacing:-.01em}
.brand-subtitle{margin-top:2px;color:var(--muted)!important;font-size:11px!important}
.nav{display:grid!important;gap:4px!important}
.nav-link,.nav-item,.nav-button{display:flex!important;align-items:center;min-height:42px;padding:10px 12px!important;border:1px solid transparent!important;border-radius:8px!important;color:var(--muted)!important;background:transparent!important;text-decoration:none!important;font-size:14px!important;font-weight:600!important;box-shadow:none!important;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}
.nav-link:hover,.nav-item:hover,.nav-button:hover{color:var(--text)!important;background:rgba(255,255,255,.045)!important;transform:translateX(2px)}
.nav-link.active,.nav-item.active{color:var(--text)!important;background:rgba(83,252,24,.08)!important;border-color:rgba(83,252,24,.2)!important}
.sidebar-account{margin-top:auto!important;padding:16px 10px!important;border-top:1px solid var(--border);display:grid!important;gap:6px!important}
.sidebar-account strong{font-size:13px}
.account-label{color:var(--muted)!important;font-size:11px!important;text-transform:uppercase;letter-spacing:.08em}
.logout-button{justify-self:start!important;margin:4px 0 0!important;padding:0!important;min-height:auto!important;border:0!important;color:var(--muted)!important;background:none!important;font-size:12px!important}
.logout-button:hover{color:var(--text)!important}
.sidebar-footer{display:flex!important;align-items:center!important;gap:9px!important;margin:0!important;padding:12px 10px 4px!important;color:var(--muted)!important;font-size:12px!important}
.connection-indicator{width:8px!important;height:8px!important;border-radius:50%!important;background:var(--warning)!important;box-shadow:none!important}
.connection-indicator.connected{background:var(--primary)!important;box-shadow:0 0 0 4px rgba(83,252,24,.08)!important}
.connection-indicator.error{background:var(--danger)!important}
.main-content{width:min(1480px,100%)!important;margin:0 auto!important;padding:40px clamp(20px,4vw,56px)!important}
.page-header,.topbar{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:24px!important;margin-bottom:28px!important}
.eyebrow{margin:0 0 8px!important;color:var(--primary)!important;font-size:10px!important;font-weight:800!important;letter-spacing:.14em!important;text-transform:uppercase}
h1,h2,h3,h4{color:var(--text);letter-spacing:-.025em}
h1{margin:0;font-size:clamp(30px,4vw,44px)!important;line-height:1.05}
h2{font-size:22px}
.page-description,.description,.login-description,.subtitle,.muted{color:var(--muted)!important;line-height:1.6}
.header-actions{display:flex!important;align-items:flex-end!important;gap:10px!important;flex-wrap:wrap}
.button,button:not(.nav-link):not(.nav-item):not(.logout-button):not(.modal-close){display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 14px;border:1px solid var(--border-strong);border-radius:8px;color:var(--text);background:var(--surface-light);text-decoration:none;cursor:pointer;font-weight:700;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.button:hover,button:not(.nav-link):not(.nav-item):not(.logout-button):not(.modal-close):hover{border-color:rgba(255,255,255,.22);background:var(--surface-raised);transform:translateY(-1px)}
.button-primary{border-color:var(--primary)!important;color:#071006!important;background:var(--primary)!important}
.button-primary:hover{background:var(--primary-light)!important}
.button-secondary{background:var(--surface-light)!important}
.button-ghost,.button-subtle{border-color:transparent!important;background:transparent!important}
.danger-button,.button-danger{border-color:rgba(255,100,124,.35)!important;color:#ff9aac!important;background:rgba(255,100,124,.08)!important}
button:disabled{cursor:not-allowed!important;opacity:.55;transform:none!important}
.field,label{color:#cbd5e1}
.field span,label>span{font-size:12px;font-weight:700}
input,select,textarea{min-height:42px;padding:9px 12px;border:1px solid var(--border-strong);border-radius:8px;color:var(--text);background:#0c1017}
input:focus,select:focus,textarea:focus{border-color:rgba(83,252,24,.65);box-shadow:0 0 0 3px rgba(83,252,24,.1)}
.stats-grid,.metrics{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;gap:14px!important}
.stat-card,.metric-card,.card,.panel,.widgets-section,.console-card,.integration-card,.info-card{border:1px solid var(--border)!important;border-radius:var(--radius-lg)!important;background:var(--surface)!important;box-shadow:none!important}
.stat-card,.metric-card{position:relative;padding:20px!important;overflow:hidden;transition:border-color .2s ease,transform .2s ease}
.stat-card:hover,.metric-card:hover{border-color:rgba(83,252,24,.22)!important;transform:translateY(-2px)}
.stat-label,.metric-label{color:var(--muted)!important;font-size:12px!important}
.stat-value,.metric-value{display:block;margin-top:12px;font-size:30px!important;letter-spacing:-.04em}
.status-badge,.pill,.status-pill{display:inline-flex!important;align-items:center!important;gap:7px;padding:6px 9px!important;border:1px solid var(--border)!important;border-radius:7px!important;background:var(--surface-light)!important;color:var(--muted)!important;font-size:11px!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.06em}
.status-badge.connected,.pill.good,.realtime-live{border-color:rgba(83,252,24,.25)!important;color:var(--primary)!important;background:rgba(83,252,24,.07)!important}
.empty-state{padding:48px 24px!important;border:1px dashed var(--border-strong)!important;border-radius:var(--radius)!important;color:var(--muted)!important;background:rgba(255,255,255,.015)!important;text-align:center}
.loading-spinner{border-color:rgba(255,255,255,.12)!important;border-top-color:var(--primary)!important}
.toast,.notification{position:fixed;right:24px;bottom:24px;z-index:1000;max-width:380px;padding:14px 16px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface-raised);box-shadow:var(--shadow);animation:toast-in .24s ease}
.modal-backdrop{background:rgba(3,5,8,.82)!important;backdrop-filter:blur(8px)}
.modal,dialog{border:1px solid var(--border-strong)!important;border-radius:var(--radius-lg)!important;color:var(--text)!important;background:var(--surface)!important;box-shadow:var(--shadow)!important}
.table-wrap{border-color:var(--border)!important;background:#0c1017}
table{color:var(--text)}
th{color:var(--muted)!important;background:var(--surface-light)!important}
th,td{border-color:var(--border)!important}
tbody tr{transition:background .14s ease,transform .14s ease}
tbody tr:hover{background:rgba(83,252,24,.035)!important}
.skeleton{position:relative;overflow:hidden;background:var(--surface-light)}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:shimmer 1.5s infinite}
.realtime-dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.realtime-live .realtime-dot{animation:live-pulse 1.8s infinite}
.metric-updated{animation:metric-flash .7s ease}
.activity-item{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--border);animation:activity-in .25s ease}
.activity-item:last-child{border-bottom:0}
.activity-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--surface-light)}
.activity-item small{color:var(--muted)}
.empty-copy{max-width:480px;margin:auto;color:var(--muted);line-height:1.65}
.stream-safe-control{position:fixed!important;right:18px!important;bottom:18px!important;z-index:1200!important;min-height:34px!important;padding:7px 11px!important;border-radius:999px!important;border-color:rgba(83,252,24,.35)!important;background:#0b0e13!important;color:var(--primary)!important;box-shadow:0 10px 30px rgba(0,0,0,.35)!important;font-size:11px!important;text-transform:uppercase;letter-spacing:.06em}
.stream-safe-control.off{border-color:rgba(255,191,71,.4)!important;color:var(--warning)!important}
.stream-safe-dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(83,252,24,.08)}
.stream-safe-control.off .stream-safe-dot{box-shadow:0 0 0 4px rgba(255,191,71,.08)}
@keyframes live-pulse{0%,100%{box-shadow:0 0 0 0 rgba(83,252,24,.35)}50%{box-shadow:0 0 0 6px rgba(83,252,24,0)}}
@keyframes metric-flash{0%{border-color:rgba(83,252,24,.7);background:rgba(83,252,24,.08)}100%{border-color:var(--border);background:var(--surface)}}
@keyframes activity-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes shimmer{to{transform:translateX(100%)}}
@media(max-width:1024px){.app-shell{grid-template-columns:220px minmax(0,1fr)!important}.main-content{padding:32px 24px!important}}
@media(max-width:768px){.app-shell{display:block!important}.sidebar{position:relative!important;width:100%;height:auto!important;padding:14px!important}.brand{padding-bottom:12px!important}.nav{display:flex!important;overflow-x:auto;padding-bottom:4px}.nav-link,.nav-item,.nav-button{white-space:nowrap}.sidebar-account,.sidebar-footer{display:none!important}.main-content{padding:24px 16px!important}.page-header,.topbar{flex-direction:column!important}.header-actions{width:100%}.header-actions>*{flex:1}.reset-grid{grid-template-columns:1fr!important}}
@media(max-width:480px){.stats-grid,.metrics{grid-template-columns:1fr!important}.main-content{padding:20px 12px!important}.header-actions{align-items:stretch!important;flex-direction:column}.header-actions>*{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}