*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f0f1a;--bg-card: #1a1a2e;--bg-hover: #16213e;--border: #2a2a4a;--text: #e2e8f0;--text-muted: #94a3b8;--accent: #6366f1;--accent-hover: #818cf8;--success: #22c55e;--warning: #f59e0b;--danger: #ef4444;--sidebar-w: 220px}[data-theme=light]{--bg: #f8fafc;--bg-card: #ffffff;--bg-hover: #f1f5f9;--border: #e2e8f0;--text: #1e293b;--text-muted: #64748b;--accent: #6366f1;--accent-hover: #4f46e5}html,body,#root{height:100%;font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:14px}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}button{cursor:pointer;font:inherit;border:none;border-radius:6px;padding:8px 16px;transition:background .15s,color .15s}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg-hover);color:var(--text)}.btn-danger{background:var(--danger);color:#fff}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px}input,select,textarea{font:inherit;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:8px 12px;width:100%;transition:border-color .15s}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}label{display:block;margin-bottom:6px;color:var(--text-muted);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.05em}.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:9999px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.badge-ok{background:#14532d;color:var(--success)}.badge-warning{background:#451a03;color:var(--warning)}.badge-critical{background:#450a0a;color:var(--danger)}.badge-running{background:#14532d;color:var(--success)}.badge-stopped{background:#1e293b;color:var(--text-muted)}.layout{display:flex;height:100%}.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--bg-card);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:16px 0}.sidebar-logo{padding:0 16px 16px;border-bottom:1px solid var(--border);margin-bottom:8px;font-size:16px;font-weight:700;color:var(--accent)}.nav-item{display:flex;align-items:center;gap:10px;padding:10px 16px;color:var(--text-muted);border-radius:0;font-size:14px;transition:background .1s,color .1s;width:100%;text-align:left;background:transparent;border:none}.nav-item:hover{background:var(--bg-hover);color:var(--text)}.nav-item.active{background:var(--bg-hover);color:var(--accent)}.main-content{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}.topbar{height:56px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:var(--bg-card);flex-shrink:0}.page{flex:1;overflow-y:auto;padding:24px}.page-title{font-size:20px;font-weight:600;margin-bottom:20px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}@media (max-width: 1024px){.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}}@media (max-width: 640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}:root{--sidebar-w: 0px}}.stat-card{text-align:center}.stat-card .stat-value{font-size:28px;font-weight:700;color:var(--accent)}.stat-card .stat-label{font-size:12px;color:var(--text-muted);margin-top:4px}.table{width:100%;border-collapse:collapse}.table th{text-align:left;padding:10px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:1px solid var(--border)}.table td{padding:12px;border-bottom:1px solid var(--border)}.table tr:last-child td{border-bottom:none}.table tr:hover td{background:var(--bg-hover)}.form-row{margin-bottom:16px}.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}.error-msg{color:var(--danger);font-size:13px;margin-top:8px}.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}.empty-state h3{font-size:16px;margin-bottom:8px;color:var(--text)}.loading{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--text-muted)}.progress-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:8px}.progress-fill{height:100%;border-radius:3px;transition:width .3s;background:var(--accent)}.progress-fill.warn{background:var(--warning)}.progress-fill.danger{background:var(--danger)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-4{gap:16px}.mb-4{margin-bottom:16px}.mt-4{margin-top:16px}.w-full{width:100%}.severity-ok{color:var(--success)}.severity-warning{color:var(--warning)}.severity-critical{color:var(--danger)}pre{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:16px;overflow-x:auto;font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-word}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:spin .7s linear infinite;display:inline-flex}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}.badge-down{background:#450a0a;color:var(--danger)}.keyword-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.keyword-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:9999px;background:var(--bg-hover);border:1px solid var(--border);font-size:12px;color:var(--text)}.dashboard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}@media (max-width: 1024px){.dashboard-grid{grid-template-columns:1fr}}.widget-edit-wrapper{border-radius:10px;border:1px dashed var(--accent);overflow:hidden}.widget-edit-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:color-mix(in srgb,var(--accent) 8%,var(--bg-card));border-bottom:1px dashed var(--accent)}.widget-drag-handle{cursor:grab;color:var(--text-muted);padding:4px;border-radius:4px;display:flex;align-items:center;background:none;border:none}.widget-drag-handle:hover{color:var(--text);background:var(--bg-hover)}.widget-drag-handle:active{cursor:grabbing}.dashboard-grid>*{grid-column:span 1}.progress-danger{background:var(--danger)!important}.progress-warn{background:var(--warning)!important}
