/* ============================================================
   UptimeVault — Futuristic Design System v2
   Light background · Blue palette · Sci-fi aesthetic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ── Tokens ───────────────────────────────────────────────── */
:root {
  --uv-50:  #f0f6ff;
  --uv-100: #dbeafe;
  --uv-200: #bfdbfe;
  --uv-300: #93c5fd;
  --uv-400: #60a5fa;
  --uv-500: #3b82f6;
  --uv-600: #2563eb;
  --uv-700: #1d4ed8;
  --uv-800: #1e3a8a;
  --uv-900: #0d1f4f;

  --bg:          #f5f8ff;
  --bg-card:     #ffffff;
  --bg-glass:    rgba(255,255,255,0.72);
  --bg-code:     #f0f5ff;

  --border:      rgba(37,99,235,0.14);
  --border-med:  rgba(37,99,235,0.26);
  --border-hi:   rgba(37,99,235,0.5);

  --grid-line:   rgba(37,99,235,0.06);

  --text:        #0d1f4f;
  --text-muted:  #4b6080;
  --text-faint:  #8ba3c1;

  --glow:        0 0 32px rgba(59,130,246,0.22);
  --glow-sm:     0 0 16px rgba(59,130,246,0.14);
  --glow-xs:     0 0 8px  rgba(59,130,246,0.10);

  --r:   4px;
  --r-lg: 8px;

  --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Space Mono', 'JetBrains Mono', ui-monospace, monospace;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Grid background ──────────────────────────────────────── */
.uv-grid-bg {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── Scanline overlay (subtle) ────────────────────────────── */
.uv-scanlines::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(37,99,235,0.018) 2px,
    rgba(37,99,235,0.018) 4px
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Wrap ─────────────────────────────────────────────────── */
.uv-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ── Nav ──────────────────────────────────────────────────── */
.uv-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245,248,255,0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-med);
}
.uv-nav-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 24px;
  height: 58px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.uv-logo {
  font-family: var(--font-mono);
  font-size: 0.88rem; font-weight: 700;
  color: var(--uv-700);
  display: flex; align-items: center; gap: 8px;
  letter-spacing: 0.02em;
}
.uv-logo-bracket { color: var(--uv-400); font-weight: 400; }
.uv-logo-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.6);
  flex-shrink: 0;
  animation: uvPulse 2.4s ease-out infinite;
}
.uv-nav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.uv-nav-link {
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em;
  color: var(--text-muted); padding: 5px 10px; border-radius: var(--r);
  transition: color .15s, background .15s;
  text-transform: uppercase;
}
.uv-nav-link:hover { color: var(--uv-600); background: var(--uv-50); }

/* ── Buttons ──────────────────────────────────────────────── */
.uv-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: var(--r); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: all .18s;
}
.uv-btn-primary {
  background: var(--uv-600); color: #fff;
  border-color: var(--uv-500);
  box-shadow: 0 2px 12px rgba(37,99,235,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
}
.uv-btn-primary:hover {
  background: var(--uv-700);
  box-shadow: 0 4px 22px rgba(37,99,235,0.38), inset 0 1px 0 rgba(255,255,255,0.14);
  transform: translateY(-1px);
}
.uv-btn-ghost {
  background: transparent; color: var(--uv-600);
  border-color: var(--border-hi);
}
.uv-btn-ghost:hover {
  background: var(--uv-50); border-color: var(--uv-500);
  box-shadow: var(--glow-xs);
}
.uv-btn-lg  { padding: 14px 34px; font-size: 0.88rem; }
.uv-btn-sm  { padding: 6px 13px; font-size: 0.72rem; }

/* ── Status dot / pulse ───────────────────────────────────── */
.uv-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.55);
  flex-shrink: 0; display: inline-block;
}
.uv-dot-pulse { animation: uvPulse 2.4s ease-out infinite; }
@keyframes uvPulse {
  0%   { box-shadow: 0 0 0 0   rgba(34,197,94,0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0   rgba(34,197,94,0); }
}
.uv-dot-down    { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.5); }
.uv-dot-pending { background: #94a3b8; box-shadow: none; }

/* ── Section label ────────────────────────────────────────── */
.uv-label {
  font-family: var(--font-mono);
  font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--uv-500);
  display: flex; align-items: center; gap: 10px;
}
.uv-label::before {
  content: ''; display: block;
  width: 20px; height: 1px; background: var(--uv-400);
}

/* ── Typography ───────────────────────────────────────────── */
.uv-h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.06;
  color: var(--text);
}
.uv-h2 {
  font-size: clamp(1.55rem, 3.2vw, 2.25rem);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.18;
  color: var(--text);
}
.uv-h3 {
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--uv-800);
}
.uv-accent { color: var(--uv-500); }
.uv-muted  { color: var(--text-muted); }
.uv-mono   { font-family: var(--font-mono); }

/* ── Badge (eyebrow) ──────────────────────────────────────── */
.uv-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: var(--bg-glass);
  border: 1px solid var(--border-hi);
  border-radius: 100px;
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--uv-600);
  backdrop-filter: blur(8px);
}

/* ── Cards ────────────────────────────────────────────────── */
.uv-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: relative; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.uv-card:hover { border-color: var(--border-med); box-shadow: var(--glow-sm); }

.uv-card-accent::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--uv-600), var(--uv-300), transparent);
}

/* Corner markers (sci-fi feel) */
.uv-corner::after, .uv-corner::before {
  content: ''; position: absolute; width: 10px; height: 10px;
  border-color: var(--uv-400); border-style: solid;
}
.uv-corner::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.uv-corner::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

/* ── Glow card ────────────────────────────────────────────── */
.uv-glow-card {
  background: var(--bg-card);
  border: 1px solid var(--border-med);
  border-radius: var(--r-lg);
  box-shadow: var(--glow-sm);
}

/* ── Feature icon box ─────────────────────────────────────── */
.uv-icon {
  width: 44px; height: 44px;
  background: var(--uv-50);
  border: 1px solid var(--border-med);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
}

/* ── Step number ──────────────────────────────────────────── */
.uv-step {
  width: 36px; height: 36px;
  border: 1px solid var(--border-hi);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
  color: var(--uv-600); background: var(--uv-50); flex-shrink: 0;
}

/* ── Code / terminal block ────────────────────────────────── */
.uv-code {
  background: var(--bg-code);
  border: 1px solid var(--border-med);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  font-family: var(--font-mono); font-size: 0.8rem;
  color: var(--uv-800); line-height: 1.8;
  position: relative;
}
.uv-code::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--uv-500), var(--uv-300), transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* ── Plan cards ───────────────────────────────────────────── */
.uv-plan {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: border-color .22s, box-shadow .22s;
}
.uv-plan:hover { border-color: var(--border-med); box-shadow: var(--glow-sm); }
.uv-plan.featured {
  border: 1.5px solid var(--uv-500);
  box-shadow: var(--glow);
}
.uv-plan.featured::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--uv-600), var(--uv-400));
}

/* ── Plan badge ───────────────────────────────────────────── */
.uv-plan-badge {
  display: inline-block; padding: 2px 8px;
  border-radius: 100px; font-size: 0.7rem; font-weight: 600;
}
.badge-free        { background: #f1f5f9; color: #475569; }
.badge-premium     { background: #dbeafe; color: #1d4ed8; }
.badge-premiumplus { background: #ede9fe; color: #6d28d9; }
.badge-enterprise  { background: #fef3c7; color: #92400e; }

/* ── Form elements ────────────────────────────────────────── */
.uv-label-field {
  display: block;
  font-family: var(--font-mono); font-size: 0.68rem;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--uv-700); margin-bottom: 6px;
}
.uv-input, .uv-select {
  width: 100%; padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border-med);
  border-radius: var(--r); font-size: 0.875rem;
  color: var(--text); font-family: var(--font-body);
  transition: border-color .15s, box-shadow .15s; outline: none;
  appearance: none;
}
.uv-input:focus, .uv-select:focus {
  border-color: var(--uv-500);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.13);
}
.uv-input::placeholder { color: var(--text-faint); }
.uv-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231d4ed8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 36px;
}
.uv-checkbox-label {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.84rem; color: var(--text-muted); cursor: pointer;
}
.uv-checkbox-label input[type="checkbox"] {
  margin-top: 2px; flex-shrink: 0;
  accent-color: var(--uv-600);
}

/* ── Uptime bar ───────────────────────────────────────────── */
.uv-bar-wrap { display: flex; gap: 2px; height: 30px; }
.uv-bar-wrap .bar { flex: 1; border-radius: 2px; min-width: 3px; }
.bar-up      { background: var(--uv-400); }
.bar-down    { background: #ef4444; }
.bar-unknown { background: #cbd5e1; }

/* ── Alerts & flash ───────────────────────────────────────── */
.uv-alert { border-radius: var(--r); padding: 11px 15px; font-size: 0.84rem; }
.uv-alert-ok  { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.uv-alert-err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* ── Tick ─────────────────────────────────────────────────── */
.uv-tick { color: var(--uv-500); font-weight: 700; }

/* ── Divider ──────────────────────────────────────────────── */
.uv-divider { border: none; border-top: 1px solid var(--border); }

/* ── Footer ───────────────────────────────────────────────── */
.uv-footer {
  background: #fff;
  border-top: 1px solid var(--border-med);
  padding: 36px 0; margin-top: auto;
}
.uv-footer-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center; gap: 16px;
}
.uv-footer-links { display: flex; flex-wrap: wrap; gap: 4px; }
.uv-footer-link {
  font-size: 0.78rem; color: var(--text-faint); padding: 4px 8px;
  border-radius: var(--r); transition: color .15s;
}
.uv-footer-link:hover { color: var(--uv-600); }

/* ── Stat bar (colored left border) ──────────────────────── */
.uv-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--uv-500);
  border-radius: var(--r-lg);
  padding: 24px;
}

/* ── Animated gradient text ───────────────────────────────── */
.uv-gradient-text {
  background: linear-gradient(135deg, var(--uv-600) 0%, var(--uv-400) 60%, var(--uv-600) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: uvTextShimmer 4s linear infinite;
}
@keyframes uvTextShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Fade-up on load ──────────────────────────────────────── */
.uv-fade { opacity: 0; transform: translateY(18px); animation: uvFade .55s ease forwards; }
.uv-fade-1 { animation-delay: .08s; }
.uv-fade-2 { animation-delay: .18s; }
.uv-fade-3 { animation-delay: .28s; }
.uv-fade-4 { animation-delay: .38s; }
@keyframes uvFade { to { opacity: 1; transform: none; } }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .uv-nav-link { display: none; }
  .uv-nav-link.always { display: block; }
}
/* Content prose */
.uv-content{color:#475569;font-size:0.88rem;line-height:1.75;display:flex;flex-direction:column;gap:14px}
.uv-content p{margin:0}
/* Tailwind-compat sr-only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
/* Plan badge compat for plan.php */
.bg-blue-100.text-blue-700,.badge-premium{background:#dbeafe;color:#1e40af}
.bg-purple-100.text-purple-700,.badge-premiumplus{background:#ede9fe;color:#5b21b6}
.bg-amber-100.text-amber-700,.badge-enterprise{background:#fef3c7;color:#92400e}
.bg-gray-100.text-gray-600,.badge-free{background:var(--uv-100);color:var(--uv-700)}
/* wrap-sm override */
.uv-wrap-sm{max-width:600px;margin:0 auto;padding:0 24px}
.uv-wrap-md{max-width:840px;margin:0 auto;padding:0 24px}
/* Danger link */
.uv-danger{color:#dc2626;font-size:0.75rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;text-decoration:none}
.uv-danger:hover{color:#991b1b}
/* Accent inline */
.uv-accent{color:var(--uv-500)}
/* Checkbox compat */
input[type=checkbox].uv-checkbox{accent-color:var(--uv-600)}
/* Remaining Tailwind compat (fallback) */
.text-green-600{color:#16a34a}
.text-red-600{color:#dc2626}
.text-yellow-600{color:#ca8a04}
.text-primary-600,.uv-accent{color:var(--uv-600)}
.bg-primary-600{background:var(--uv-600)}
.animate-pulse{animation:uvPulse 1.5s ease-in-out infinite}
.space-y-6>*+*{margin-top:24px}
.space-y-4>*+*{margin-top:16px}
.space-y-3>*+*{margin-top:12px}
/* Grid layouts for plan page */
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,1fr)}
.gap-6{gap:24px}
.gap-4{gap:16px}
.gap-3{gap:12px}
@media(min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.lg\:grid-cols-4{grid-template-columns:repeat(4,1fr)}}
/* Flex utils */
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.flex-col{flex-direction:column}.flex-1{flex:1}.gap-2{gap:8px}.gap-1{gap:4px}
.hidden{display:none}.block{display:block}
/* Text utils */
.text-center{text-align:center}.font-medium{font-weight:500}.font-semibold{font-weight:600}
.text-sm{font-size:0.875rem}.text-xs{font-size:0.75rem}.text-base{font-size:1rem}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.p-4{padding:16px}.p-6{padding:24px}.p-8{padding:32px}.p-12{padding:48px}
.px-2{padding-left:8px;padding-right:8px}.py-0\.5{padding-top:2px;padding-bottom:2px}
.rounded-full{border-radius:9999px}.rounded-lg{border-radius:6px}
.w-full{width:100%}.max-w-5xl{max-width:1024px}.mx-auto{margin-left:auto;margin-right:auto}
.relative{position:relative}.absolute{position:absolute}.-top-3{top:-12px}.left-1\/2{left:50%}
.-translate-x-1\/2{transform:translateX(-50%)}
.shadow-lg{box-shadow:0 10px 30px rgba(0,0,0,.08)}
.border-2{border-width:2px}
.opacity-30{opacity:.3}
.flex-shrink-0{flex-shrink:0}
.w-3{width:12px}.h-3{height:12px}.w-2{width:8px}.h-2{height:8px}.rounded-full{border-radius:9999px}
.bg-green-500{background:#22c55e}.bg-red-500{background:#ef4444}.bg-gray-400{background:#9ca3af}