:root {
  --green: #37c0fb;
  --green-dark: #1698cf;
  --green-pale: #e7f7fe;
  --ink: #1f252a;
  --dark: #282a35;
  --muted: #64707b;
  --line: #d9dee3;
  --soft: #f4f6f7;
  --paper: #ffffff;
  --amber: #d98200;
  --amber-pale: #fff4d6;
  --red: #c53737;
  --red-pale: #ffe3e3;
  --blue: #2878b5;
  --blue-pale: #e2f0fa;
  --purple: #7a53a6;
  --shadow: 0 4px 18px rgba(31, 37, 42, .08);
  --radius: 10px;
  --topbar-h: 66px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--soft);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background-color: var(--soft);
  background-image:
    radial-gradient(circle at 36px 36px, rgba(55,192,251,.10) 0 3px, transparent 4px),
    radial-gradient(circle at 174px 112px, rgba(40,120,181,.08) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 12%, rgba(55,192,251,.06), transparent 23%),
    radial-gradient(circle at 12% 78%, rgba(40,120,181,.045), transparent 25%);
  background-size: 240px 220px, 240px 220px, 100% 100%, 100% 100%;
  background-attachment: fixed;
  color: var(--ink);
}

button, input, select { font: inherit; }

button { cursor: pointer; }

button:disabled { cursor: not-allowed; opacity: .48; }

input, select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #bcc5cc;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 8px 10px;
}

input:focus, select:focus, button:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(55, 192, 251, .32);
  outline-offset: 1px;
  border-color: var(--green);
}

label {
  display: grid;
  gap: 6px;
  color: #3e4850;
  font-size: .82rem;
  font-weight: 700;
}

h1, h2, h3, p { margin-top: 0; }

h1 { margin-bottom: 8px; font-size: clamp(1.7rem, 2.4vw, 2.35rem); line-height: 1.12; }
h2 { margin-bottom: 5px; font-size: 1.05rem; }
h3 { margin-bottom: 5px; font-size: .95rem; }
p { color: var(--muted); line-height: 1.48; }
small { line-height: 1.35; }

.skip-link {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 5px;
  color: white;
  background: var(--green-dark);
}

.skip-link:focus { top: 10px; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.math { font-family: Georgia, "Times New Roman", serif; font-style: italic; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--topbar-h);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(330px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 8px 22px;
  color: #fff;
  background: var(--dark);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand strong { display: block; font-size: .98rem; white-space: nowrap; }
.brand small { display: block; color: #cbd0d4; font-size: .72rem; }
.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border-radius: 7px;
  background: var(--green);
  color: white;
  font-family: Georgia, serif;
  font-size: 1.35rem;
  font-weight: 800;
}

.tabs { display: flex; align-self: stretch; }
.tab {
  min-width: 88px;
  border: 0;
  border-bottom: 4px solid transparent;
  background: transparent;
  color: #e6e8ea;
  padding: 0 15px;
  font-size: .86rem;
  font-weight: 700;
}
.tab:hover { background: rgba(255, 255, 255, .08); }
.tab.active { border-bottom-color: var(--green); background: #16171d; color: #fff; }

.header-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }

.btn {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 14px;
  font-weight: 750;
  font-size: .84rem;
  transition: background .15s ease, transform .08s ease, border-color .15s ease;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: var(--green); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--green-dark); }
.btn.secondary { border-color: #b9c1c8; background: #fff; color: var(--ink); }
.topbar .btn.secondary { border-color: #5c626b; background: #3a3d49; color: #fff; }
.btn.secondary:hover:not(:disabled) { border-color: #7e8a93; background: #f4f5f6; }
.topbar .btn.secondary:hover:not(:disabled) { background: #4a4e5c; }
.btn.danger { background: var(--red); color: #fff; }
.btn.compact { min-height: 34px; padding: 6px 10px; }
.btn.wide { width: 100%; }

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.status-pill.good { color: #d8f4ff; background: rgba(55,192,251,.22); border: 1px solid rgba(55,192,251,.5); }
.status-pill.bad { color: #ffdada; background: rgba(197, 55, 55, .25); border: 1px solid rgba(255,120,120,.45); }
.status-pill.pending { color: #ffe8ad; background: rgba(217,130,0,.2); border: 1px solid rgba(217,130,0,.5); }

main { min-height: calc(100vh - var(--topbar-h)); }