:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#07101f; color:#e7edf9; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; background:radial-gradient(circle at 75% -10%,rgba(67,110,255,.2),transparent 31rem),radial-gradient(circle at 5% 70%,rgba(0,215,185,.11),transparent 30rem),#07101f; }
button,input,textarea { font:inherit; } button { cursor:pointer; } button:disabled { cursor:wait; opacity:.6; } .hidden { display:none!important; } .muted { color:#98a8c3; line-height:1.55; } .eyebrow { margin:0 0 7px; color:#83aaff; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; } .login-card { width:min(450px,100%); padding:46px; border:1px solid rgba(173,198,255,.17); border-radius:24px; background:rgba(15,27,49,.84); box-shadow:0 30px 100px rgba(0,0,0,.42); backdrop-filter:blur(18px); } .brand-orbit { display:grid; place-items:center; width:62px; height:62px; border-radius:18px; margin-bottom:24px; background:linear-gradient(135deg,#688dff,#52eee8); box-shadow:0 0 35px rgba(82,238,232,.22); font-size:28px; font-weight:900; color:#07101f; } .login-card h1 { margin:0; font-size:31px; letter-spacing:-.04em; } .login-card>p { color:#adbad1; line-height:1.6; } .login-card small { display:block; margin-top:26px; color:#62718e; font-size:12px; }
label { display:block; margin:22px 0 8px; color:#cbd6e9; font-size:13px; font-weight:650; } input,textarea { width:100%; border:1px solid #2c3c59; border-radius:10px; padding:13px 14px; outline:0; background:#0a1529; color:#eef3ff; } textarea { min-height:116px; resize:vertical; line-height:1.5; } input:focus,textarea:focus { border-color:#809fff; box-shadow:0 0 0 3px rgba(104,141,255,.15); } .form-error { min-height:18px; margin:10px 0 0; color:#ff9da7; font-size:13px; }
.primary-button,.apply-button,.ai-button,.danger-button { border:0; border-radius:10px; padding:12px 16px; color:#07101f; font-weight:800; background:linear-gradient(135deg,#a9c6ff,#56ece6); box-shadow:0 8px 25px rgba(82,238,232,.16); } .primary-button span { padding-left:7px; font-size:18px; }.compact { width:auto; padding:10px 14px; }.ghost-button { border:1px solid rgba(172,193,230,.2); border-radius:10px; padding:10px 14px; color:#c9d5eb; background:rgba(30,45,73,.55); }.danger-button { color:#fff; background:#b33950; }.primary-button:hover,.apply-button:hover,.ai-button:hover { filter:brightness(1.08); transform:translateY(-1px); }
.app { min-height:100vh; display:flex; }.sidebar { position:fixed; inset:0 auto 0 0; z-index:4; width:250px; display:flex; flex-direction:column; padding:24px 14px; border-right:1px solid rgba(183,200,232,.1); background:rgba(9,18,34,.9); backdrop-filter:blur(18px); }.sidebar-brand { display:flex; align-items:center; gap:11px; padding:2px 12px 31px; }.sidebar-brand strong { display:block; font-size:18px; letter-spacing:-.04em; }.sidebar-brand span { display:block; color:#71809d; font-size:9px; letter-spacing:.15em; margin-top:2px; }.brand-mini { display:grid; place-items:center; height:34px; width:34px; border-radius:10px; color:#081120; background:linear-gradient(135deg,#a9c6ff,#56ece6); font-weight:900; }.side-nav { display:grid; gap:5px; }.nav-link { display:flex; gap:13px; align-items:center; padding:12px; color:#96a6c0; text-decoration:none; border-left:3px solid transparent; border-radius:8px; font-size:14px; }.nav-link i { width:18px; color:#7d91b5; font-style:normal; text-align:center; }.nav-link:hover,.nav-link.active { color:#e8efff; background:rgba(120,150,210,.1); border-left-color:#8faaff; }.nav-link.active i { color:#69e7e2; }.sidebar-bottom { margin-top:auto; padding:14px 10px 0; border-top:1px solid rgba(183,200,232,.1); }.ai-mini { display:flex; align-items:center; gap:9px; margin-bottom:14px; }.ai-mini b,.ai-mini small { display:block; }.ai-mini b { font-size:12px; }.ai-mini small { margin-top:2px; color:#8393ad; font-size:10px; }.live-dot,.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#56ece6; box-shadow:0 0 14px #56ece6; }.sidebar .ghost-button { width:100%; font-size:12px; }
.workspace { width:calc(100% - 250px); margin-left:250px; }.topbar { position:sticky; top:0; z-index:3; min-height:65px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 42px; border-bottom:1px solid rgba(183,200,232,.1); background:rgba(7,16,31,.78); backdrop-filter:blur(15px); }.topbar-status { display:flex; align-items:center; gap:9px; color:#b5c1d8; font-size:13px; }.header-actions,.heading-buttons,.assistant-actions,.dialog-actions { display:flex; align-items:center; gap:9px; }.pill { padding:7px 10px; border:1px solid rgba(125,161,230,.18); border-radius:999px; color:#9aadd0; font-size:11px; }.pill.warning { color:#ffd581; border-color:rgba(255,194,97,.35); background:rgba(185,122,27,.11); }.mobile-brand { display:none; }.content { width:min(1440px,100%); margin:auto; padding:44px 42px 70px; }.hero-section,.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }.hero-section { margin-bottom:27px; }.hero-section h1 { margin:0; font-size:clamp(29px,3vw,43px); letter-spacing:-.05em; }.hero-section .muted { margin:9px 0 0; }.refresh-button { font-size:13px; }
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:18px; }.metric-card,.surface-card,.assistant-guide { border:1px solid rgba(183,200,232,.12); border-radius:16px; background:linear-gradient(145deg,rgba(22,36,63,.79),rgba(13,25,46,.82)); box-shadow:0 16px 42px rgba(0,0,0,.16); }.metric-card { display:flex; gap:13px; padding:19px; }.metric-icon { display:grid; place-items:center; flex:0 0 37px; height:37px; border-radius:11px; font-size:18px; font-weight:900; }.metric-icon.blue { color:#a9c6ff; background:rgba(125,161,255,.15); }.metric-icon.green { color:#61ece3; background:rgba(71,223,203,.13); }.metric-icon.amber { color:#ffd581; background:rgba(255,185,84,.13); }.metric-icon.purple { color:#d6b7ff; background:rgba(180,120,255,.13); }.metric-card small { color:#94a3be; font-size:11px; }.metric-card strong { display:block; margin:3px 0; font-size:24px; letter-spacing:-.05em; }.metric-card p { margin:0; color:#71809c; font-size:11px; }.ai-card { border-color:rgba(133,99,255,.2); }.operation-message { min-height:0; margin:0 0 18px; color:#74e7de; }.operation-message.error { color:#ff9da7; }
.surface-card { margin-top:18px; padding:25px; }.section-heading { align-items:flex-start; margin-bottom:20px; }.section-heading h2 { margin:0; font-size:20px; letter-spacing:-.03em; }.section-heading .muted { margin:7px 0 0; font-size:13px; }.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; min-width:650px; } th,td { padding:14px 10px; border-bottom:1px solid rgba(183,200,232,.1); text-align:left; } th { color:#8595b0; font-size:10px; text-transform:uppercase; letter-spacing:.1em; } td { color:#d8e1f0; font-size:13px; } tbody tr:hover { background:rgba(119,149,208,.05); }.row-actions { display:flex; justify-content:flex-end; gap:7px; }.row-actions button { width:auto; border:1px solid rgba(183,200,232,.15); border-radius:7px; padding:6px 9px; color:#b8c8df; background:#172640; font-size:12px; }.row-actions .danger { color:#ff9da7; border-color:rgba(255,104,121,.22); }
.state { font-size:11px; font-weight:700; }.state.enabled { color:#6ce3d7; }.state.disabled { color:#f1c06c; }
.assistant-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(250px,.7fr); gap:18px; margin-top:18px; }.assistant-layout .surface-card { margin:0; }.assistant-card { border-color:rgba(104,141,255,.25); }.ai-label { padding:7px 9px; border:1px solid rgba(119,145,255,.23); border-radius:999px; color:#b8c8ff; background:rgba(100,122,255,.1); font-size:10px; font-weight:800; }.assistant-form { margin-top:19px; }.assistant-actions { justify-content:flex-end; margin-top:10px; }.assistant-status { min-height:20px; margin:16px 0 0; color:#81dfe5; font-size:13px; }.warnings-list { display:grid; gap:8px; margin-top:10px; }.warning-item { padding:10px 12px; border-left:3px solid #f0b759; border-radius:7px; color:#ffd78e; background:rgba(141,93,23,.15); font-size:12px; }.commit-button { margin-top:13px; }.assistant-guide { align-self:stretch; padding:29px; background:radial-gradient(circle at 30% 5%,rgba(99,127,255,.26),transparent 15rem),rgba(16,27,51,.91); }.guide-symbol { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:#e1d2ff; background:rgba(175,125,255,.15); font-size:20px; }.assistant-guide h3 { margin:17px 0 8px; }.assistant-guide p,.assistant-guide li { color:#a5b3ca; line-height:1.55; font-size:13px; }.assistant-guide ul { padding-left:18px; }.assistant-guide li { margin:8px 0; }
.monitoring-card { border-color:rgba(77,227,213,.17); }.alerts-list { display:grid; gap:10px; }.alert-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:13px; align-items:start; padding:15px; border:1px solid rgba(183,200,232,.12); border-radius:11px; background:rgba(6,15,29,.48); }.alert-severity { width:8px; height:8px; margin-top:6px; border-radius:50%; background:#f0b759; box-shadow:0 0 12px rgba(240,183,89,.55); }.alert-item.error .alert-severity,.alert-item.critical .alert-severity { background:#ff6377; box-shadow:0 0 12px rgba(255,99,119,.55); }.alert-title { display:flex; justify-content:space-between; gap:12px; font-size:13px; }.alert-title small { color:#6e7d98; }.alert-detail { margin:7px 0 0; color:#9baac1; white-space:pre-wrap; font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }.ai-analysis { margin-top:11px; padding:12px; border-left:3px solid #70dfeb; border-radius:6px; color:#c7d7f6; background:rgba(47,120,150,.13); font-size:12px; line-height:1.55; }.ai-analysis b { color:#77e8e2; }.alert-actions { display:flex; gap:7px; }.alert-actions button { width:auto; border:1px solid rgba(183,200,232,.15); border-radius:7px; padding:6px 8px; color:#c4d0e6; background:#182944; font-size:11px; }.logs-details { margin-top:14px; border:1px solid rgba(183,200,232,.1); border-radius:10px; background:#060e1b; }.logs-details summary { display:flex; justify-content:space-between; padding:13px 14px; color:#9eafca; cursor:pointer; font-size:12px; }.logs-console { max-height:390px; overflow:auto; margin:0; padding:15px; border-top:1px solid rgba(183,200,232,.1); color:#9cd7ce; white-space:pre-wrap; font:11px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }
dialog { width:min(500px,calc(100% - 28px)); border:1px solid #334765; border-radius:17px; padding:26px; color:#e7edf9; background:#101d33; box-shadow:0 25px 80px #000; } dialog::backdrop { background:rgba(0,0,0,.7); backdrop-filter:blur(3px); } dialog h2 { margin:0; } .password-row { display:flex; gap:8px; }.password-row input { flex:1; }.checkbox { display:flex; align-items:center; gap:9px; }.checkbox input { width:auto; }.dialog-actions { justify-content:flex-end; margin-top:19px; }
@media(max-width:1050px){.metrics-grid{grid-template-columns:repeat(2,1fr)}.assistant-layout{grid-template-columns:1fr}.assistant-guide{display:none}}@media(max-width:760px){.app{display:block}.sidebar{display:none}.workspace{width:100%;margin:0}.topbar{padding:11px 17px}.mobile-brand{display:block;font-size:15px;font-weight:800}.mobile-brand span{color:#69e7e2;font-size:10px;letter-spacing:.12em}.topbar-status{display:none}.content{padding:28px 17px 55px}.hero-section,.section-heading{align-items:flex-start;flex-direction:column}.metrics-grid{grid-template-columns:1fr 1fr}.header-actions{margin-left:auto}.pill{display:none}.surface-card{padding:18px}.heading-buttons{flex-wrap:wrap}.alert-item{grid-template-columns:auto minmax(0,1fr)}.alert-actions{grid-column:2}.assistant-actions{justify-content:space-between}.primary-button.compact,.ghost-button{font-size:12px}}@media(max-width:440px){.metrics-grid{grid-template-columns:1fr}.login-card{padding:32px 25px}.header-actions .apply-button{padding:9px 11px;font-size:12px}}