@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root{
  color-scheme: dark;
  --bg-start:#0A0F1A;
  --bg-end:#0F1826;
  --text:#E6EAF2;
  --muted:#9AA5B1;
  --glass-bg:rgba(16,24,38,.55);
  --glass-border:rgba(255,255,255,.08);
  --glass-shadow:0 10px 30px rgba(0,0,0,.35);
  --accent:#00C4E6;
  --accent-2:#1EA7F7;
  --ok:#22c55e; --warn:#f59e0b; --down:#ef4444; --info:#60a5fa; --maint:#64748b;
  --hero-pad-y: 1.8rem;
  --hero-pad-x: 2.0rem;
}

html, body{
  background: linear-gradient(180deg,var(--bg-start),var(--bg-end)) fixed !important;
  background-color: var(--bg-start) !important;
  color: var(--text) !important;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100%;
}

main, .main, .section, .container, .content, .columns, .column, .hero{
  background: transparent !important;
  color: var(--text) !important;
}

header, .navbar, nav, .header{
  position: sticky; top: 0; z-index: 50;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}
.navbar a, .navbar .navbar-item{ color: var(--text) !important; opacity:.9 }
.navbar a:hover{ opacity:1 }

.box, .panel, .card, .tile, .message, .monitor, .history, .incident, .hero{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--glass-shadow);
  color: var(--text) !important;
  padding: 1.25rem 1.6rem !important;
}
.card-header, .message-header{ background: transparent !important; border-bottom: 1px solid var(--glass-border) !important; }

h1,h2,h3{ color: var(--text) !important; letter-spacing: -.015em }
.subtitle, .has-text-grey, small{ color: var(--muted) !important }

a{ color: var(--accent) }
a:hover{ opacity:.9 }
.button, .btn, .tag.is-link{
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 35%, transparent), color-mix(in srgb, var(--accent-2) 30%, transparent)) !important;
  border: 1px solid var(--glass-border) !important;
  color:#e6faff !important; border-radius:10px !important;
}
.button.is-light, .button.is-white{ background: var(--glass-bg) !important; color: var(--text) !important; }

.status, .status-badge, .tag, .badge{
  border-radius: 999px !important; padding: .35rem .7rem; font-weight: 600;
  border: 1px solid var(--glass-border) !important;
}
.status-up, .is-success     { background: color-mix(in srgb, var(--ok)   22%, transparent) !important; color: var(--ok) !important; }
.status-degraded, .is-warning{ background: color-mix(in srgb, var(--warn) 22%, transparent) !important; color: var(--warn) !important; }
.status-down, .is-danger     { background: color-mix(in srgb, var(--down) 22%, transparent) !important; color: var(--down) !important; }
.status-info, .is-info       { background: color-mix(in srgb, var(--info) 22%, transparent) !important; color: var(--info) !important; }
.status-maintenance          { background: color-mix(in srgb, var(--maint)22%, transparent) !important; color: var(--maint) !important; }

img, .chart, .graph, .graphs, .response-time, .uptime{
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.35));
  border-radius: 10px !important;
  background: transparent !important;
}

.graphs img,
img.graph,
img.response-time,
img.uptime,
.content img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  background: transparent !important;
}

.incident, .incident-banner{ border-inline-start: 4px solid var(--down) !important; }

footer{ color: var(--muted) !important; background: transparent !important; border-top: none !important; }

section{ margin-block: 20px; }

.hero:first-of-type{
  padding: var(--hero-pad-y) var(--hero-pad-x) !important;
  margin-block: 22px !important;
  border-radius: 16px !important;
}

.hero .title, h1.title{
  margin: 0 0 .8rem 0 !important;
  line-height: 1.15;
}
.hero .subtitle, .hero p{
  margin: .45rem 0 0 0 !important;
  line-height: 1.7;
}

/*
.box, .panel, .card, .tile, .message, .monitor, .history, .incident{
  padding: var(--hero-pad-y) var(--hero-pad-x) !important;
}
*/

#solay-footer { display: block !important; }
footer.svelte-jbr799 { display: none !important; }