@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";
@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{--background:#080a12;--foreground:#e2e8f0;--panel-bg:#0f142399;--panel-border:#ffffff12;--accent:#0fc;--accent-2:#7c3aed;--accent-glow:#0fc6;--danger:#f43f5e;--success:#10b981;--warning:#f59e0b;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--nav-height:70px;--bottom-nav-height:70px;--sidebar-width:220px;--radius:14px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{background-color:var(--background);color:var(--foreground);font-family:var(--font-sans);background:radial-gradient(at 10% 20%,#00ffcc12 0%,#0000 50%),radial-gradient(at 90% 80%,#7c3aed14 0%,#0000 50%),radial-gradient(#0000 0%,#080a12 80%);background-color:var(--background);background-attachment:fixed;font-size:14px}.glass-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--panel-border);border-radius:var(--radius);transition:border-color .2s,box-shadow .2s,transform .2s;box-shadow:0 4px 20px #0006,inset 0 1px #ffffff0d}.glass-panel:hover{border-color:#ffffff1f;box-shadow:0 8px 30px #00000080,inset 0 1px #ffffff14}.btn{color:var(--foreground);border:1px solid var(--panel-border);cursor:pointer;font-family:var(--font-sans);white-space:nowrap;background:#ffffff0d;border-radius:10px;align-items:center;gap:6px;padding:8px 14px;font-size:.85rem;font-weight:500;transition:all .15s;display:inline-flex}.btn:hover{background:#ffffff1a;border-color:#fff3;transform:translateY(-1px)}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:#000;box-shadow:0 0 16px var(--accent-glow);border:none;font-weight:600}.btn-primary:hover{box-shadow:0 0 24px var(--accent-glow);background:#00e6b8;transform:translateY(-1px)}.btn-danger{background:var(--danger);color:#fff;border:none}.btn-sm{border-radius:7px;padding:5px 10px;font-size:.78rem}.input{border:1px solid var(--panel-border);color:var(--foreground);font-family:var(--font-sans);background:#00000040;border-radius:10px;outline:none;width:100%;padding:9px 13px;font-size:.875rem;transition:border-color .2s,box-shadow .2s}.input:focus:not(:disabled){border-color:var(--accent);box-shadow:0 0 0 3px #00ffcc26}.input:disabled{opacity:.4;cursor:not-allowed}.label{color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px;font-size:.78rem;font-weight:600;display:block}.switch{flex-shrink:0;width:46px;height:25px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;border:1px solid var(--panel-border);background-color:#ffffff1a;border-radius:25px;transition:all .3s;position:absolute;inset:0}.slider:before{content:"";background-color:#94a3b8;border-radius:50%;width:19px;height:19px;transition:all .3s;position:absolute;bottom:2px;left:2px}input:checked+.slider{background-color:var(--accent);border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}input:checked+.slider:before{background-color:#000;transform:translate(21px)}input:disabled+.slider,input[type=range]:disabled,input[type=color]:disabled{opacity:.4;cursor:not-allowed}.status-indicator{border-radius:50%;flex-shrink:0;width:8px;height:8px;display:inline-block}.status-online{background-color:var(--success);box-shadow:0 0 8px var(--success)}.status-offline{background-color:var(--danger);box-shadow:0 0 8px var(--danger)}.status-connecting{background-color:var(--warning);box-shadow:0 0 8px var(--warning);animation:1.2s infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.app-container{width:100vw;height:100vh;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-width);border-right:1px solid var(--panel-border);-webkit-backdrop-filter:blur(24px);z-index:20;background:#080a12b3;flex-direction:column;flex-shrink:0;display:flex}.sidebar-logo{border-bottom:1px solid var(--panel-border);color:var(--accent);letter-spacing:-.02em;align-items:center;gap:10px;padding:18px 20px;font-size:1.15rem;font-weight:700;display:flex}.sidebar-logo .logo-icon{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#000;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:1rem;display:flex}.sidebar-nav{flex-direction:column;flex:1;gap:2px;padding:12px 8px;display:flex}.nav-item{color:#64748b;cursor:pointer;border-radius:10px;align-items:center;gap:10px;padding:10px 12px;font-size:.875rem;font-weight:500;transition:all .15s;display:flex}.nav-item:hover{color:var(--foreground);background:#ffffff0d}.nav-item.active{color:var(--accent);background:#00ffcc1a;border:1px solid #0fc3}.sidebar-footer{border-top:1px solid var(--panel-border);padding:12px 8px}.main-content{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.header{height:var(--nav-height);border-bottom:1px solid var(--panel-border);-webkit-backdrop-filter:blur(16px);z-index:10;background:#080a1280;flex-shrink:0;justify-content:space-between;align-items:center;padding:0 20px;display:flex;position:relative}.header-title{color:var(--foreground);font-size:1rem;font-weight:600}.scroll-area{scrollbar-width:thin;scrollbar-color:#ffffff1a transparent;flex:1;padding:16px;animation:.2s fadeIn;overflow-y:auto}.scroll-area::-webkit-scrollbar{width:4px}.scroll-area::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.dashboard-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;padding-bottom:20px;display:grid}.widget-full{grid-column:1/-1}.edit-mode-active .glass-panel{border:1px dashed #0fc6;position:relative}.edit-mode-active .glass-panel:hover{border-color:#00ffccb3;transform:translateY(-2px)}.section-title{text-transform:uppercase;letter-spacing:.08em;color:#475569;margin-top:12px;margin-bottom:6px;padding:0 4px;font-size:.7rem;font-weight:700}.log-entry{border-bottom:1px solid var(--panel-border);align-items:flex-start;gap:10px;padding:10px 0;font-size:.82rem;animation:.3s fadeIn;display:flex}.log-entry:last-child{border-bottom:none}.log-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-top:4px}.log-time{color:#475569;white-space:nowrap;flex-shrink:0;font-size:.75rem}.badge{letter-spacing:.03em;border-radius:100px;align-items:center;padding:2px 8px;font-size:.72rem;font-weight:600;display:inline-flex}.badge-success{color:var(--success);background:#10b98126}.badge-danger{color:var(--danger);background:#f43f5e26}.badge-warning{color:var(--warning);background:#f59e0b26}.badge-info{color:var(--accent);background:#00ffcc1a}.stat-card{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:var(--radius);flex-direction:column;gap:6px;padding:16px;transition:all .2s;display:flex}.stat-card:hover{border-color:#ffffff1f;transform:translateY(-2px)}.stat-value{color:var(--accent);font-size:1.6rem;font-weight:700}.stat-label{color:#64748b;text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:500}.connection-bar{border:1px solid var(--panel-border);background:#0003;border-radius:10px;align-items:center;gap:8px;padding:6px 12px;font-size:.8rem;display:flex}.bottom-nav{height:var(--bottom-nav-height);-webkit-backdrop-filter:blur(24px);border-top:1px solid var(--panel-border);z-index:100;padding:0 8px;padding-bottom:env(safe-area-inset-bottom);background:#080a12d9;display:none;position:fixed;bottom:0;left:0;right:0}.bottom-nav-inner{align-items:stretch;height:100%;display:flex}.bottom-nav-item{color:#475569;cursor:pointer;letter-spacing:.02em;text-transform:uppercase;-webkit-user-select:none;user-select:none;border-radius:12px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;padding:6px 4px;font-size:.6rem;font-weight:600;transition:all .15s;display:flex}.bottom-nav-item:active{transform:scale(.92)}.bottom-nav-item.active{color:var(--accent)}.bottom-nav-item.active .bottom-nav-icon{color:var(--accent);background:#00ffcc1f}.bottom-nav-icon{border-radius:8px;justify-content:center;align-items:center;width:36px;height:28px;transition:all .15s;display:flex}.drag-handle{cursor:grab;color:#475569;border-radius:4px;padding:2px 4px;transition:color .15s}.drag-handle:hover{color:var(--foreground)}.drag-handle:active{cursor:grabbing}.divider{background:var(--panel-border);height:1px;margin:12px 0}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;background:#0009;justify-content:center;align-items:flex-end;animation:.15s fadeIn;display:flex;position:fixed;inset:0}@media (min-width:640px){.modal-overlay{align-items:center}}.modal-sheet{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--panel-border);background:#0f1423f2;border-radius:20px 20px 0 0;width:100%;max-height:90vh;padding:20px;animation:.25s slideUp;overflow-y:auto}@media (min-width:640px){.modal-sheet{border-radius:20px;max-width:560px;max-height:85vh}}.modal-handle{background:#ffffff26;border-radius:2px;width:36px;height:4px;margin:0 auto 16px}@media (max-width:768px){.sidebar{display:none}.bottom-nav{display:flex}.main-content{padding-bottom:var(--bottom-nav-height)}.scroll-area{padding:12px;padding-bottom:calc(var(--bottom-nav-height) + 12px)}.dashboard-grid{grid-template-columns:1fr 1fr;gap:10px}.hide-on-mobile{display:none!important}.header{height:56px;padding:0 14px}.btn{padding:7px 12px;font-size:.8rem}}@media (max-width:480px){.dashboard-grid{grid-template-columns:1fr}}@media (min-width:769px){.show-mobile-only{display:none!important}}