/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root {
  --bg: #05060a;
  --bg-panel: #10131c;
  --accent: #35f0c5;
  --accent-soft: #35f0c533;
  --text-main: #e5f5ff;
  --text-muted: #8a9bb5;
  --danger: #ff4b81;
  --shadow: 0 0 24px #000000cc;
  --radius: 8px;
  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Fira Code", "JetBrains Mono", Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-main);
  background: radial-gradient(circle at top, #151b2b 0, #05060a 55%, #000000 100%);
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 1.5rem 3rem;
  position: relative;
  overflow: hidden;
}

/* subtle CRT / scanline overlay */
.scanlines {
  pointer-events: none;
  position: fixed;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px
  );
  background-size: 100% 2px;
  mix-blend-mode: soft-light;
  opacity: 0.25;
  z-index: 0;
}

.site-header,
.content,
.site-footer {
  position: relative;
  z-index: 1;
}

.site-header {
  text-align: center;
  margin-bottom: 2rem;
}

.logo {
  font-family: var(--font-mono);
  font-size: 2.4rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  color: var(--accent);
  text-shadow: 0 0 12px #35f0c588;
}

.logo span {
  color: var(--danger);
}

.tagline {
  margin: 0.5rem 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.content {
  width: 100%;
  max-width: 960px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
  gap: 1.5rem;
}

.panel {
  background: linear-gradient(145deg, var(--bg-panel), #05060f);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--accent-soft);
  padding: 1.5rem 1.75rem;
  position: relative;
  overflow: hidden;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, #35f0c511, transparent 55%);
  pointer-events: none;
}

.panel-main h2,
.panel-side h3 {
  margin-top: 0;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-main h2 {
  font-size: 1.2rem;
}

.panel-side h3 {
  font-size: 1rem;
  color: var(--accent);
}

.panel p {
  line-height: 1.6;
  font-size: 0.98rem;
}

.panel ul {
  margin: 0.75rem 0 1rem;
  padding-left: 1.2rem;
  font-size: 0.95rem;
}

.panel li {
  margin-bottom: 0.35rem;
}

.status {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--accent-soft);
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.status-label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
}

.status-value {
  color: var(--accent);
}

.small {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.site-footer {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* responsive */
@media (max-width: 768px) {
  body {
    padding: 1.5rem 1rem 2.5rem;
  }

  .content {
    grid-template-columns: 1fr;
  }

  .panel {
    padding: 1.25rem 1.4rem;
  }

  .logo {
    font-size: 2rem;
  }
}