:root { color-scheme: dark; --panel: rgba(15, 23, 36, .78); --line: rgba(255,255,255,.07); --cyan: #22d3ee; }
* { box-sizing: border-box; }
html { background: #070b12; }
body { min-height: 100vh; font-family: "DM Sans", sans-serif; }
[v-cloak] { display: none; }
button, input, textarea, select { font: inherit; }
button:not(:disabled) { cursor: pointer; }
button:disabled { cursor: not-allowed; }
summary::-webkit-details-marker { display: none; }
.mono { font-family: "JetBrains Mono", monospace; }
.ambient { position: fixed; pointer-events: none; z-index: -1; border-radius: 999px; filter: blur(100px); opacity: .12; }
.ambient-one { width: 440px; height: 440px; top: -220px; right: 5%; background: #0ea5e9; }
.ambient-two { width: 360px; height: 360px; bottom: -240px; left: 25%; background: #7c3aed; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; width: 264px; flex-direction: column; background: rgba(8, 13, 22, .94); border-right: 1px solid var(--line); backdrop-filter: blur(22px); transition: transform .25s ease; }
.brand-mark { display: grid; height: 40px; width: 40px; place-items: center; border: 1px solid rgba(34,211,238,.25); border-radius: 12px; color: #67e8f9; background: linear-gradient(145deg, rgba(34,211,238,.16), rgba(14,165,233,.04)); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 8px 25px rgba(6,182,212,.08); }
.nav-caption { padding: 0 12px 8px; color: #475569; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.nav-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #7c8aa0; font-size: 14px; font-weight: 500; transition: .18s ease; }
.nav-link i { width: 19px; font-size: 16px; }
.nav-link:hover { color: #dbeafe; background: rgba(255,255,255,.035); }
.nav-link.active { color: #ecfeff; background: linear-gradient(90deg, rgba(6,182,212,.13), rgba(6,182,212,.035)); }
.nav-link.active::before { content: ""; position: absolute; left: 0; height: 20px; width: 2px; border-radius: 2px; background: #22d3ee; box-shadow: 0 0 12px #22d3ee; }
.sidebar-backdrop { position: fixed; inset: 0; z-index: 35; display: none; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.mobile-header { position: sticky; top: 0; z-index: 30; display: flex; height: 60px; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 0 16px; background: rgba(7,11,18,.86); backdrop-filter: blur(18px); }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.page-heading h1 { margin-top: 5px; color: white; font-size: clamp(27px, 3vw, 34px); font-weight: 650; letter-spacing: -.035em; }
.page-heading p { margin-top: 7px; color: #64748b; font-size: 14px; }
.eyebrow { color: #22d3ee; font-size: 10px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.panel { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: inset 0 1px rgba(255,255,255,.02), 0 18px 45px rgba(0,0,0,.12); backdrop-filter: blur(16px); }
.stat-card { display: flex; align-items: center; gap: 14px; min-height: 92px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(15,23,36,.64); }
.stat-icon { display: grid; height: 42px; width: 42px; flex: 0 0 auto; place-items: center; border-radius: 11px; }
.stat-icon.cyan { background: rgba(34,211,238,.1); color: #22d3ee; }.stat-icon.violet { background: rgba(167,139,250,.1); color: #a78bfa; }.stat-icon.blue { background: rgba(96,165,250,.1); color: #60a5fa; }.stat-icon.emerald { background: rgba(52,211,153,.1); color: #34d399; }
.live-pill, .count-badge { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; background: rgba(15,23,42,.65); color: #94a3b8; font-size: 12px; font-weight: 600; }
.live-pill span, .status-dot { height: 7px; width: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 9px rgba(52,211,153,.8); }
.search-field { position: relative; width: min(100%, 360px); }
.event-filter-form { display:grid;grid-template-columns:minmax(0,1fr) 208px auto auto;align-items:center;gap:12px;padding:16px; }.event-filter-search { width:100%;min-width:0;max-width:none; }.event-filter-type { width:208px; }
.search-field i { position: absolute; left: 14px; top: 50%; color: #475569; transform: translateY(-50%); }
.form-input { width: 100%; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; outline: none; padding: 10px 12px; background: rgba(5,9,16,.72); color: #e2e8f0; font-size: 14px; transition: .18s; }
.form-input::placeholder { color: #3f4c60; }.form-input:focus { border-color: rgba(34,211,238,.5); box-shadow: 0 0 0 3px rgba(34,211,238,.07); }
.form-label { display: block; margin-bottom: 7px; color: #94a3b8; font-size: 12px; font-weight: 600; }.form-help { margin-top: 5px; color: #475569; font-size: 11px; }
.input-with-icon { position: relative; }.input-with-icon > i { position: absolute; left: 15px; top: 50%; z-index: 1; color: #475569; transform: translateY(-50%); }.input-with-icon .form-input { padding-left: 44px; }
.search-field .form-input { padding-left: 40px; }
.checkbox { height: 16px; width: 16px; accent-color: #06b6d4; }
.primary-button, .secondary-button, .danger-button { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; padding: 9px 14px; font-size: 13px; font-weight: 650; transition: .18s ease; }
.primary-button { color: #06222a; background: linear-gradient(135deg,#67e8f9,#22d3ee); box-shadow: 0 8px 24px rgba(34,211,238,.12); }.primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.secondary-button { border: 1px solid var(--line); color: #cbd5e1; background: rgba(255,255,255,.035); }.secondary-button:hover { border-color: rgba(34,211,238,.25); color: white; }
.danger-button { color: #fb7185; background: rgba(244,63,94,.1); }.danger-button:hover { background: rgba(244,63,94,.18); }
.icon-button { display: grid; height: 36px; width: 36px; place-items: center; border-radius: 9px; color: #64748b; transition: .18s; }.icon-button:hover { color: #e2e8f0; background: rgba(255,255,255,.06); }
.project-row { display: grid; grid-template-columns: minmax(240px,1.6fr) minmax(160px,.8fr) 120px 160px 36px; align-items: center; gap: 18px; padding: 17px 21px; border-top: 1px solid var(--line); transition: .16s; }.project-row:hover { background: rgba(255,255,255,.018); }
.project-avatar, .user-avatar { display: grid; height: 39px; width: 39px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(34,211,238,.14); border-radius: 11px; background: linear-gradient(145deg,rgba(34,211,238,.1),rgba(59,130,246,.05)); color: #67e8f9; font-size: 11px; font-weight: 700; }.project-avatar.large { width: 54px; height: 54px; border-radius: 15px; font-size: 14px; }.user-avatar { border-color: rgba(167,139,250,.14); background: rgba(167,139,250,.08); color: #c4b5fd; }
.table-head { display: grid; grid-template-columns: minmax(240px,1.6fr) minmax(160px,.8fr) 120px 160px 36px; gap: 18px; padding: 12px 21px; color: #475569; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.status-badge { display: inline-flex; align-items: center; gap: 4px; width: fit-content; border-radius: 999px; padding: 4px 8px; font-size: 10px; font-weight: 700; }.status-badge.ok { color: #6ee7b7; background: rgba(52,211,153,.1); }.status-badge.muted { color: #64748b; background: rgba(100,116,139,.1); }.status-badge.warn { color: #fcd34d; background: rgba(251,191,36,.1); }
.empty-state { padding: 60px 24px; border: 1px dashed rgba(255,255,255,.1); border-radius: 16px; text-align: center; }.empty-state > i { display:block; margin-bottom: 14px; color: #334155; font-size: 34px; }.empty-state h3 { color:#cbd5e1; font-weight:600; }.empty-state p { margin-top:5px; color:#475569; font-size:13px; }
.flash { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 22px; border: 1px solid; border-radius: 11px; padding: 12px 14px; font-size: 13px; }.flash.success { border-color: rgba(52,211,153,.15); color:#86efac; background:rgba(52,211,153,.06); }.flash.error { border-color:rgba(244,63,94,.16); color:#fda4af; background:rgba(244,63,94,.07); }
.popover-form { position: absolute; z-index: 60; max-height: calc(100vh - 32px); overflow-y: auto; border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:18px; background:#101827; box-shadow:0 24px 70px rgba(0,0,0,.45); }
.info-card { display:flex; flex-direction:column; gap:7px; border:1px solid var(--line); border-radius:13px; padding:17px 19px; background:rgba(15,23,36,.58); }.info-card span { color:#64748b; font-size:11px; }.info-card strong { overflow:hidden; color:#e2e8f0; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.back-link { display:inline-flex; align-items:center; gap:7px; color:#64748b; font-size:12px; transition:.15s; }.back-link:hover { color:#67e8f9; }
.server-icon,.description-icon { display:grid; width:44px; height:44px; flex:0 0 auto; place-items:center; border:1px solid rgba(96,165,250,.14); border-radius:12px; color:#60a5fa; background:rgba(96,165,250,.08); }
.description-card { display:flex; align-items:center; gap:18px; min-height:132px; border:1px solid var(--line); border-radius:16px; padding:23px; background:rgba(15,23,36,.65); transition:.2s; }.description-card:hover { border-color:rgba(34,211,238,.18); background:rgba(15,23,36,.84); transform:translateY(-2px); }.description-card h2 { color:#f1f5f9; font-weight:600; }.description-card p { margin-top:5px; color:#64748b; font-size:13px; line-height:1.55; }
.description-section { scroll-margin-top: 24px; }.description-section h2 { margin-bottom:14px; color:#f1f5f9; font-size:18px; font-weight:650; letter-spacing:-.015em; }.description-section > p { margin-top:10px; color:#a8b4c5; font-size:14px; line-height:1.8; }.description-section ul { margin-top:14px; display:grid; gap:9px; padding-left:20px; list-style:disc; color:#a8b4c5; font-size:14px; line-height:1.65; }.description-section li::marker { color:#22d3ee; }.description-section pre { margin-top:18px; overflow-x:auto; border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:17px 19px; background:#050912; color:#a5f3fc; font-family:"JetBrains Mono",monospace; font-size:12px; line-height:1.75; white-space:pre; }.guide-callout { display:flex; align-items:flex-start; gap:11px; margin-top:17px; border:1px solid; border-radius:11px; padding:13px 15px; font-size:13px; line-height:1.65; }.guide-callout i { margin-top:2px; flex:0 0 auto; }.guide-callout.note { border-color:rgba(34,211,238,.14); color:#a5f3fc; background:rgba(34,211,238,.055); }.guide-callout.warning { border-color:rgba(251,191,36,.17); color:#fde68a; background:rgba(251,191,36,.06); }
.event-card { position:relative; margin-left:18px; padding:0 0 21px 31px; border-left:1px solid rgba(255,255,255,.08); }.event-card:last-child { border-left-color:transparent; }.event-dot { position:absolute; left:-10px; top:17px; display:grid; height:20px; width:20px; place-items:center; border:3px solid #070b12; border-radius:50%; font-size:8px; }.event-dot.snapshot { color:#22d3ee;background:#164e63;}.event-dot.initial_snapshot { color:#a78bfa;background:#4c1d95;}.event-dot.rollback { color:#fbbf24;background:#78350f;}.event-dot.retention { color:#fb7185;background:#881337;}
.event-inner { border:1px solid var(--line); border-radius:14px; background:rgba(15,23,36,.62); overflow:hidden; }.event-summary { display:flex; align-items:center; gap:14px; padding:16px 18px; }.snapshot-code { overflow:hidden; border-radius:7px; padding:5px 8px; color:#64748b; background:rgba(2,6,12,.45); font-family:"JetBrains Mono",monospace; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.diff-list { max-height:330px; overflow:auto; border-top:1px solid var(--line); }.diff-row { display:grid; grid-template-columns:24px 1fr; gap:10px; padding:8px 18px; border-bottom:1px solid rgba(255,255,255,.035); font-family:"JetBrains Mono",monospace; font-size:11px; }.diff-op.add {color:#34d399}.diff-op.remove {color:#fb7185}.diff-op.modify {color:#fbbf24}
.event-feed-row { display:grid; grid-template-columns:42px minmax(0,1fr) 20px; align-items:center; gap:15px; padding:17px 20px; border-top:1px solid var(--line); transition:.16s; }.event-feed-row:first-of-type { border-top:0; }.event-feed-row:hover { background:rgba(255,255,255,.02); }.event-feed-icon { display:grid; height:38px; width:38px; place-items:center; border-radius:11px; font-size:14px; }.event-feed-icon.snapshot {color:#67e8f9;background:rgba(6,182,212,.11)}.event-feed-icon.initial_snapshot {color:#c4b5fd;background:rgba(139,92,246,.11)}.event-feed-icon.rollback {color:#fcd34d;background:rgba(245,158,11,.11)}.event-feed-icon.retention {color:#fda4af;background:rgba(244,63,94,.11)}.event-detail-chip { display:inline-flex; max-width:100%; overflow:hidden; border-radius:6px; padding:4px 7px; background:rgba(2,6,12,.45); text-overflow:ellipsis; white-space:nowrap; }
.diff-rule-editor { border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:14px;background:rgba(2,6,12,.24); }
.notification-setting-card { border:1px solid rgba(255,255,255,.07);border-radius:13px;padding:17px;background:rgba(2,6,12,.2); }
.notification-filter-form { display:grid;grid-template-columns:minmax(220px,1fr) repeat(3,160px) auto auto;align-items:center;gap:12px;padding:16px; }.notification-delivery-row { display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:15px;padding:17px 20px;border-top:1px solid var(--line); }.notification-delivery-row:first-of-type { border-top:0; }.status-badge.error { color:#fda4af;background:rgba(244,63,94,.1); }
.login-page { font-family:"DM Sans",sans-serif; overflow:hidden; }.ascii-smoke { position:fixed; inset:0; z-index:0; display:block; width:100vw; height:100vh; pointer-events:none; opacity:.88; background:transparent; mask-image:radial-gradient(ellipse 92% 88% at center,black 38%,rgba(0,0,0,.82) 70%,transparent 100%); }.login-grid { position:fixed;inset:0;z-index:1;opacity:.62;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at center,black,transparent 70%);pointer-events:none; }.ambient-login { width:540px;height:540px;top:50%;left:50%;z-index:2;background:#0891b2;opacity:.1;transform:translate(-50%,-50%); }.login-card { border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:36px;background:rgba(9,15,25,.78);box-shadow:0 30px 100px rgba(0,0,0,.48);backdrop-filter:blur(22px); }
.turnstile-shell { min-height:61px; }.turnstile-frame { padding:0 8px;border-radius:9px;background:#313131; }.turnstile-crop { height:61px;overflow:hidden;border-radius:7px;background:#313131; }.turnstile-shell .cf-turnstile { width:calc(100% + 4px);transform:translate(-2px,-2px); }.turnstile-shell iframe { max-width:none; }
.totp-qr { overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:#fff;padding:10px;box-shadow:0 18px 45px rgba(0,0,0,.28); }.totp-qr img { display:block;width:100%;height:auto; }.recovery-code-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }.recovery-code-grid code { display:block;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(0,0,0,.2);padding:11px 12px;text-align:center;color:#cffafe;font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:.08em; }
@media(max-width:1023px){.sidebar{transform:translateX(-100%)}body.sidebar-open .sidebar{transform:translateX(0)}body.sidebar-open .sidebar-backdrop{display:block}}
@media(min-width:1024px){.mobile-header{display:none!important}}
@media(max-width:1100px){.notification-filter-form{grid-template-columns:minmax(0,1fr) 1fr 1fr}.notification-filter-form .search-field{grid-column:1/-1}}
@media(max-width:767px){.page-heading{align-items:flex-start;flex-direction:column}.table-head{display:none}.project-row{grid-template-columns:1fr 36px;gap:10px}.project-row .project-meta{grid-column:1}.project-row .hide-mobile{display:none}.event-filter-form,.notification-filter-form{grid-template-columns:minmax(0,1fr)}.notification-filter-form .search-field{grid-column:auto}.event-filter-type{width:100%}.notification-delivery-row{grid-template-columns:36px minmax(0,1fr)}.notification-delivery-row>div:last-child{grid-column:2;text-align:left}.login-card{padding:28px 22px}}
@media(max-width:520px){.recovery-code-grid{grid-template-columns:1fr}}