:root{
  --text: #0f2032;
  --muted: #54738f;
  --brand: linear-gradient(135deg,#2b8bfd 0%, #00c6ff 100%);
  --bg: #e8f4ff;
  --bg-accent1: #d4ecff;
  --bg-accent2: #ddfff5;
  --card: #ffffffee;
}
.dark{
  --text: #e6f2fa;
  --muted: #98b2c6;
  --brand: linear-gradient(135deg,#0a6adb 0%, #0086c2 100%);
  --bg: #09131c;
  --bg-accent1: #0c2434;
  --bg-accent2: #082a2d;
  --card: #0c1f30ee;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 600px at 10% 10%, var(--bg-accent1) 0%, transparent 55%),
    radial-gradient(900px 600px at 85% 0%, var(--bg-accent2) 0%, transparent 50%),
    radial-gradient(1000px 600px at 90% 100%, var(--bg-accent1) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100%;
}
.container{max-width:1080px;margin:0 auto;padding:0 20px}
.site-header{
  background: var(--brand);
  color: #fff;
  position: sticky; top:0; z-index:10;
  box-shadow: 0 8px 24px #00000025;
}
.site-header .container{display:flex;align-items:center;gap:20px;min-height:70px}
.brand{color:#fff;text-decoration:none;font-weight:800;letter-spacing:.3px;display:flex;flex-direction:column;line-height:1.2}
.brand .name{font-size:1.1rem}
.brand .tag{opacity:.85;font-size:.85rem;font-weight:500}
.nav{list-style:none;display:flex;gap:16px;margin:0;padding:0}
.nav a{color:#fff;text-decoration:none;opacity:.9;font-weight:500}
.nav a:hover{opacity:1;text-decoration:underline}
.nav a.nav-alert{background:linear-gradient(135deg,#f97316,#dc2626);padding:6px 12px;border-radius:8px;opacity:1;animation:pulse-alert 2s infinite}
@keyframes pulse-alert{0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,0.5)}50%{box-shadow:0 0 12px 4px rgba(249,115,22,0.3)}}
.theme-toggle{margin-left:auto;background:#ffffff26;border:1px solid #ffffff3d;color:#fff;padding:7px 11px;border-radius:10px;cursor:pointer;font-size:1rem}
.page{min-height:calc(100vh - 140px)}
.site-footer{background: var(--brand); color:#fff;margin-top:60px}
.site-footer .container{min-height:84px;display:flex;align-items:center;justify-content:center;font-weight:500}

.hero{padding:60px 0 20px}
.hero h1{font-size:44px;margin:0;color:#0f1f33;font-weight:700}
.dark .hero h1{color:#e6f2fa}
.hero p{color:var(--muted);margin:12px 0 24px;max-width:720px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{background:#0f6ca8;color:#fff;border:0;padding:12px 18px;border-radius:12px;cursor:pointer;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;box-shadow:0 10px 25px #0f6ca84d;transition: all 0.2s ease;}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px #0f6ca866;}
.btn.secondary{background:#fff;color:#0f6ca8;border:1px solid #0f6ca8}
.dark .btn.secondary{background:#0c1f30;color:#76c4ff;border-color:#76c4ff}
.btn.small{padding:8px 12px;font-size:.95rem}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;padding:16px 0 48px}
.card{background:var(--card);backdrop-filter: blur(6px);border:1px solid #00000014;border-radius:20px;padding:20px;box-shadow:0 18px 45px #0000001a}
.card h3{margin:0 0 6px;font-size:1.15rem}
.card p{margin:0;color:var(--muted);font-size:.95rem}

.section-title{font-size:1.8rem;margin:0 0 12px;font-weight:650}
.section-muted{color:var(--muted);margin:0 0 24px}

.two-columns{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

/* Admin */
.admin h1{margin-top:0}
.admin .tabs{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 24px}
.admin .tabs a{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;text-decoration:none;color:#0f2032;background:#ffffffd4;border:1px solid #00000012;box-shadow:0 8px 24px #00000018;font-weight:600;transition: all 0.2s ease;}
.dark .admin .tabs a{color:#e6f2fa;background:#0c1f30;border-color:#0c354f}
.admin .tabs a:hover{transform:translateY(-2px);box-shadow:0 12px 32px #00000024;}
.admin .tabs a.active{background:linear-gradient(135deg,#2b8bfd,#00c6ff);color:#fff;border-color:transparent;box-shadow:0 12px 32px #1d6fdc40;transform:translateY(0);}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.stat-card{background:var(--card);border:1px solid #00000012;border-radius:18px;padding:18px;box-shadow:0 12px 32px #00000018;transition: all 0.2s ease;}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 16px 42px #00000024;}
.stat-card .k{color:var(--muted);font-size:.88rem;margin-bottom:6px;font-weight:500;}
.stat-card .v{font-size:1.35rem;font-weight:700;line-height:1.3;}
.muted{color:var(--muted)}
.tiny{font-size:.85rem}
.log-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.log-item{padding:12px;border:1px solid #00000012;border-radius:12px;background:var(--card);box-shadow:0 10px 30px #00000018}
.log-item .time{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-size:.85rem;color:var(--muted)}
.log-item .msg{margin-top:5px;white-space:pre-wrap;word-break:break-word}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #00000018;padding:10px 12px;text-align:left;font-size:.95rem}
.table th{background:#ffffffbb}
.dark .table th{background:#0c1f30}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:6px;background:#ffffffee;border:1px solid #00000012;border-radius:999px;padding:6px 12px;font-size:.95rem;font-weight:500}
.dark .chip{background:#0c1f30;border-color:#0c354f}
.chip .count{background:#00000012;border-radius:999px;padding:2px 8px;font-size:.85rem}
.chip.tiny{padding:2px 8px;font-size:.8rem}
.chip-disk{background:#ede9fe;border-color:#c4b5fd;color:#4c1d95}
.dark .chip-disk{background:#2e1e66;border-color:#5b21b6;color:#ede9fe}

.code{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;white-space:pre-wrap;background:#0000000f;padding:12px;border-radius:12px}
.dark .code{background:#0c354f4d}

.narrow{max-width:520px;margin:0 auto;padding:40px 20px}
.form-group{margin:12px 0}
.form-group label{display:block;font-weight:600;margin-bottom:6px}
.form-control{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #00000022;background:#ffffffd8;color:#0f2032;font-size:1rem}
.dark .form-control{background:#0c1f30;color:#e6f2fa;border-color:#0c354f}
.form-hint{color:var(--muted);font-size:.9rem;margin-top:8px}

.notice{padding:12px;border-radius:12px;border:1px solid #0f6ca8;color:#0f2032;background:#0f6ca814}
.dark .notice{color:#76c4ff;border-color:#76c4ff;background:#0c1f3026}

.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:9999}
.toast{background:var(--card);border:1px solid #00000020;box-shadow:0 12px 32px #00000024;border-radius:12px;padding:12px 14px;min-width:220px}
.toast.success{border-color:#16a34a50}
.toast.error{border-color:#dc262660}
.toast .title{font-weight:600;margin-bottom:4px}

.timeline-card{margin-bottom:32px}
.timeline-filter{display:flex;gap:18px;align-items:flex-end;margin-bottom:16px;flex-wrap:wrap}
.timeline-meta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px}
.timeline-meta .meta-item{flex:1 1 150px;background:#fffffffa;border:1px solid #00000012;border-radius:14px;padding:12px 14px;box-shadow:0 6px 18px #00000015}
.dark .timeline-meta .meta-item{background:#0c1f30;border-color:#0c354f;box-shadow:0 6px 18px #00000040}
.timeline-meta .k{font-size:.85rem;color:var(--muted);margin-bottom:4px}
.timeline-meta .v{font-size:1.2rem;font-weight:600}
.chart-wrapper{margin-top:10px;border:1px solid #00000012;border-radius:16px;padding:12px;background:#ffffffc7;box-shadow:inset 0 1px 4px #00000018}
.dark .chart-wrapper{background:#0c1f30d4;border-color:#0c354f;box-shadow:inset 0 1px 6px #00000066}
.chart-wrapper canvas{width:100%;height:260px;display:block}
.timeline-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:.9rem;color:var(--muted)}
.timeline-legend .dot{display:inline-block;width:12px;height:12px;border-radius:999px;margin-right:6px;border:1px solid #00000026}
.timeline-legend .dot.square{border-radius:3px}
.timeline-legend .dot.log{background:#0284c7}
.timeline-legend .dot.disk{background:#8b5cf6}
.timeline-legend .dot.stub{background:#facc15}
.timeline-legend .dot.missing{background:#ef4444}
.timeline-alerts{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.timeline-alerts li{padding:8px 12px;border-radius:10px;background:#fff;border:1px solid #00000014;font-size:.95rem;box-shadow:0 6px 16px #00000014}
.dark .timeline-alerts li{background:#0c1f30;border-color:#0c354f}
.timeline-issues{margin-top:12px}
.small-note{font-size:.9rem;color:var(--muted);margin:8px 0 0}

@media (max-width:720px){
  .hero h1{font-size:34px}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .theme-toggle{margin-left:0}
  .site-header .container{flex-wrap:wrap;gap:12px;padding:14px 20px}
}