:root{--bg:#0c0f17;--surface:#111624;--muted:#7c86a2;--text:#e7ecf7;--border:#1c2335;--accent:#7f6bff;--accent-2:#18c8ff;--success:#4ade80;--warning:#f59e0b;--danger:#f87171;--glow:0 10px 40px rgba(127,107,255,.2);--radius-lg:20px;--radius-md:14px}[data-theme=light]{--bg:#f6f7fb;--surface:#fff;--muted:#475569;--text:#0f172a;--border:#e2e8f0;--accent:#4f46e5;--accent-2:#0891b2;--glow:0 10px 30px rgba(79,70,229,.15)}*,:after,:before{box-sizing:border-box}body{background:radial-gradient(circle at 20% 20%,rgba(127,107,255,.08),transparent 30%),radial-gradient(circle at 80% 0,rgba(24,200,255,.07),transparent 32%),var(--bg);color:var(--text);font-family:Space Grotesk,Inter,system-ui,-apple-system,sans-serif;line-height:1.4;margin:0;min-height:100vh}.login-page{display:grid;min-height:100vh;padding:20px;place-items:center}.login-card{display:grid;gap:12px;width:min(420px,92vw)}.login-form{display:grid;gap:10px}.login-form input{background:#0c1020;border:1px solid var(--border);border-radius:12px;color:var(--text);outline:none;padding:12px 14px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.login-form input:focus{border-color:#7f6bff99;box-shadow:0 0 0 3px #7f6bff26}a{color:inherit;text-decoration:none}button{font:inherit}.page{margin:0 auto;max-width:1400px;padding:32px 24px 64px}.header{align-items:center;display:flex;gap:16px;justify-content:space-between;margin-bottom:24px}.badge{background:linear-gradient(120deg,#7f6bff29,#18c8ff1f);border:1px solid var(--border);border-radius:999px;box-shadow:var(--glow);color:var(--text);font-weight:600;letter-spacing:.02em;padding:6px 12px}.title{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:0}.muted{color:var(--muted)}.topbar{align-items:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-bottom:16px}.topbar .title{font-size:22px}.topbar-right{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.user-pill{background:#ffffff05;border:1px solid var(--border);border-radius:12px;display:grid;gap:2px;padding:10px 14px}.toolbar{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.pill{background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--muted);cursor:pointer;padding:10px 14px;transition:.2s ease}.pill.active{border-color:#7f6bff80;box-shadow:var(--glow);color:var(--text)}.logout{background:transparent;border-color:#f8727266;color:var(--danger)}.switch{align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--muted);display:inline-flex;gap:8px;padding:8px 12px}.switch-toggle{background:var(--border);border-radius:999px;height:22px;position:relative;transition:background .2s ease;width:42px}.switch-toggle:after{background:var(--surface);border-radius:50%;box-shadow:0 5px 15px #00000059;content:"";height:18px;left:3px;position:absolute;top:2px;transition:transform .2s ease;width:18px}[data-theme=light] .switch-toggle:after{transform:translate(18px)}.surface{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--glow);padding:18px 20px}.grid{display:grid;gap:14px}.grid.metrics{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.grid.twocol{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.section-title{align-items:center;display:flex;font-weight:600;justify-content:space-between;margin-bottom:10px}.chart{overflow:hidden;position:relative}.chart:before{background:radial-gradient(circle at 30% 20%,rgba(127,107,255,.25),transparent 45%),radial-gradient(circle at 80% 10%,rgba(24,200,255,.2),transparent 40%);content:"";top:0;right:0;bottom:0;left:0;opacity:.3;pointer-events:none;position:absolute}.list{display:flex;flex-direction:column;gap:10px}.list-item{align-items:center;background:#ffffff05;border:1px solid var(--border);border-radius:var(--radius-md);display:grid;gap:10px;grid-template-columns:1fr auto auto;padding:10px 12px}.chip{border-radius:8px;font-size:13px;font-weight:600;padding:4px 10px}.chip.success{background:#4ade8014;border:1px solid rgba(74,222,128,.2);color:#4ade80}.chip.warning{background:#f59e0b14;border:1px solid rgba(245,158,11,.2);color:#fbbf24}.chip.muted{background:#ffffff0a;border:1px solid var(--border);color:var(--muted)}.sparkline{height:58px;width:100%}.big{font-size:24px;font-weight:700;letter-spacing:-.02em}.subgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.pill-stack{display:flex;flex-wrap:wrap;gap:8px}.pill.dropdown select{background:transparent;border:none;color:var(--muted);font:inherit;outline:none;padding:0 4px}.date-picker{align-items:center;display:flex;gap:6px}.date-picker input{background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:6px 8px}.ar-metrics{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.panel{background:#ffffff05;border:1px solid var(--border);border-radius:14px;padding:12px 14px}.skeleton{display:grid;gap:8px}.skeleton .bar{animation:shimmer 1s ease-in-out infinite;background:linear-gradient(90deg,#ffffff0d,#ffffff26,#ffffff0d);background-size:200% 100%;border-radius:8px;display:block;height:14px}.skeleton .w60{width:60%}.skeleton .w70{width:70%}.skeleton .w80{width:80%}.skeleton.stack .bar:first-child{height:18px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.compare-grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}.compare-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;padding:20px;position:relative}.compare-card.meritking{border-top:3px solid var(--accent)}.compare-card.kingroyal{border-top:3px solid var(--accent-2)}.compare-card .brand-name{align-items:center;display:flex;font-size:18px;font-weight:700;gap:8px;margin-bottom:16px}.compare-card.meritking .brand-name:before{background:var(--accent);border-radius:50%;content:"";height:12px;width:12px}.compare-card.kingroyal .brand-name:before{background:var(--accent-2);border-radius:50%;content:"";height:12px;width:12px}.compare-metrics{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}.compare-metric{background:#ffffff05;border:1px solid var(--border);border-radius:var(--radius-md);padding:12px}.compare-metric .label{color:var(--muted);font-size:12px;letter-spacing:.05em;margin-bottom:4px;text-transform:uppercase}.compare-metric .value{font-size:22px;font-weight:700}.dau-card{background:linear-gradient(135deg,#7f6bff1a,#18c8ff0d)}.source-badge{align-items:center;border-radius:6px;display:inline-flex;font-size:11px;font-weight:500;gap:4px;letter-spacing:.03em;padding:4px 8px;text-transform:uppercase}.source-badge.clickhouse{background:#4ade801a;border:1px solid rgba(74,222,128,.2);color:var(--success)}.source-badge.mariadb{background:#18c8ff1a;border:1px solid rgba(24,200,255,.2);color:var(--accent-2)}.status-dot{border-radius:50%;display:inline-block;height:8px;width:8px}.status-dot.ok{background:var(--success);box-shadow:0 0 8px var(--success)}.status-dot.error{background:var(--danger);box-shadow:0 0 8px var(--danger)}.status-dot.degraded{background:var(--warning);box-shadow:0 0 8px var(--warning)}.surface:hover{border-color:#7f6bff4d;transition:border-color .2s ease}.trend-indicator{align-items:center;border-radius:4px;display:inline-flex;font-size:12px;font-weight:600;gap:4px;padding:2px 6px}.trend-indicator.up{background:#4ade801a;color:var(--success)}.trend-indicator.down{background:#f872721a;color:var(--danger)}.view-tabs{background:var(--surface);border:1px solid var(--border);border-radius:12px;display:flex;gap:4px;padding:4px}.view-tab{background:transparent;border:none;border-radius:8px;color:var(--muted);cursor:pointer;font-weight:500;padding:8px 16px;transition:all .2s ease}.view-tab.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}.view-tab:hover:not(.active){background:#ffffff0d}.empty-state{color:var(--muted);padding:40px 20px;text-align:center}.empty-state i{font-size:48px;margin-bottom:16px;opacity:.5}.loading-overlay{align-items:center;background:#0c0f17cc;border-radius:inherit;display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;position:absolute}.spinner{animation:spin 1s linear infinite;border:3px solid var(--border);border-radius:50%;border-top-color:var(--accent);height:32px;width:32px}@keyframes spin{to{transform:rotate(1turn)}}@media(max-width:900px){.header{align-items:flex-start;flex-direction:column}.compare-grid,.compare-metrics,.list-item{grid-template-columns:1fr}}@media(max-width:600px){.page{padding:16px 12px 48px}.topbar{align-items:flex-start;flex-direction:column}.topbar-right{justify-content:space-between;width:100%}.title{font-size:22px}.big{font-size:20px}}