:root {
  color-scheme: dark;
  --green: #2ecc71;
  --red: #ff4d4d;
  --orange: #ffa500;
  --grey: #d3d3d3;
  --bg: #0a0f22;
  --card: #111b3e;
  --card-alt: #0b132b;
  --text: #e5ecff;
  --muted: #9bb0ff;
  --border: #25335e;
  --group-sep: #3a56aa;
  --title-color: #ffffff;
  --field: #0e1630;
  --button: #153063;
  --button-hover: #1c3d7e;
  --cyan: #59d9ff;
  --violet: #a98cff;
  --brand-title: #ffd400;
  --surface-gradient: linear-gradient(145deg, rgb(17 27 62 / 98%), rgb(11 19 43 / 96%));
  --table-head: #0f1731;
  --table-row: #111b3e;
  --table-row-alt: #0e1835;
  --table-selected: #172b5b;
  --table-hover: #14234b;
  --row-border: #1b2750;
  --error-text: #ffd4d4;
}

:root[data-theme="light"] {
  color-scheme: light;
  --green: #137a45;
  --red: #b42318;
  --orange: #985d00;
  --grey: #46536c;
  --bg: #f4f7fc;
  --card: #ffffff;
  --card-alt: #edf2fa;
  --text: #17213a;
  --muted: #536486;
  --border: #c8d3e6;
  --group-sep: #7390ca;
  --title-color: #101a31;
  --field: #ffffff;
  --button: #dce7fb;
  --button-hover: #c9daf7;
  --cyan: #007b9f;
  --violet: #6846ad;
  --brand-title: #806b00;
  --surface-gradient: linear-gradient(145deg, #ffffff, #edf3fc);
  --table-head: #e7edf8;
  --table-row: #ffffff;
  --table-row-alt: #f4f7fc;
  --table-selected: #dce9ff;
  --table-hover: #e6efff;
  --row-border: #d9e1ef;
  --error-text: #8f1d18;
}

* { box-sizing: border-box; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 8px 12px;
  color: var(--bg);
  background: var(--green);
  border-radius: 6px;
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 15px;
  line-height: 1.4;
}

header {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 24px clamp(20px, 3vw, 42px) 30px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

header h1 {
  margin: 0 0 14px;
  color: var(--brand-title);
  font-size: clamp(25px, 2.35vw, 38px);
  line-height: 1.15;
}

header p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
}

.back-link {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.back-link:hover { color: var(--text); }

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
}

.site-nav {
  display: flex;
  gap: 6px;
}

.site-nav a {
  padding: 8px 12px;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.site-nav a:hover { color: var(--text); background: var(--card-alt); }
.site-nav a.active { color: var(--text); background: var(--button); border-color: var(--border); }

.eyebrow {
  color: var(--orange);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.17em;
}

main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 18px clamp(20px, 3vw, 42px) 40px;
}

.workspace-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin: 0 calc(clamp(20px, 3vw, 42px) * -1) 18px;
  padding: 0 clamp(20px, 3vw, 42px) 18px;
  border-bottom: 1px solid var(--border);
}

.workspace-heading h2 { margin: 0; color: var(--text); font-size: 1.18rem; }

.workspace-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 24px;
  color: var(--muted);
  font-size: 0.83rem;
}

.legend-chip {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 1px solid rgb(0 0 0 / 25%);
  border-radius: 3px;
  vertical-align: -2px;
}

.legend-chip.ready { background: var(--green); }
.legend-chip.overlap { background: var(--orange); }
.legend-chip.missing { background: var(--red); }

#query-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

#query-form > .panel { margin: 0; }
.region-panel,
#query-form > .actions { grid-column: 1 / -1; }

.panel {
  margin: 16px 0;
  padding: clamp(18px, 3vw, 26px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.section-title {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.section-title span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  color: var(--text);
  background: var(--button);
  border: 1px solid var(--group-sep);
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 800;
}

h2 {
  margin: 0;
  color: var(--title-color);
  font-size: 1.25rem;
  line-height: 1.2;
}

.section-kicker {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.grid { display: grid; gap: 14px; margin-top: 20px; }
.grid.four { grid-template-columns: repeat(4, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }

label {
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}

label span { float: right; color: var(--muted); font-weight: 500; }

input,
select {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
}

input:hover,
select:hover { border-color: var(--group-sep); }

input:focus,
select:focus,
button:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }
input[type="checkbox"] { accent-color: var(--green); }

button {
  cursor: pointer;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

button:hover { transform: translateY(-1px); }
button:disabled { cursor: wait; opacity: 0.65; transform: none; }

.switch {
  display: inline-flex;
  padding: 3px;
  background: var(--card-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.switch button {
  padding: 7px 20px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 7px;
}

.switch button.active {
  color: var(--text);
  background: var(--button);
  box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
}

.tile-plan {
  margin-top: 18px;
  padding: 12px 14px;
  color: var(--text);
  background: var(--card-alt);
  border: 1px solid var(--border);
  border-left: 4px solid var(--green);
  border-radius: 0 8px 8px 0;
}

.tile-plan span { color: var(--orange); }
.hint { color: var(--muted); }

.filter-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
  margin: 10px 0;
}

.remove {
  width: 40px;
  height: 40px;
  color: var(--red);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 1.25rem;
}

.remove:hover { background: rgb(255 77 77 / 10%); border-color: var(--red); }

.secondary,
.primary { padding: 9px 14px; border-radius: 8px; }

.secondary {
  color: var(--text);
  background: var(--button);
  border: 1px solid var(--border);
}

.secondary:hover { background: var(--button-hover); border-color: var(--group-sep); }

.primary {
  color: var(--text);
  background: var(--button);
  border: 1px solid var(--group-sep);
}

.primary:hover { background: var(--button-hover); }
.primary span { margin-left: 24px; }

.column-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: -5px 0 14px 42px;
}

.text-button {
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--group-sep);
}

.text-button:hover { color: var(--text); }

.column-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.column-group {
  padding: 14px;
  background: var(--card-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.column-group h3 {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.checks { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.checks label { font-weight: 500; }
.checks input { width: auto; margin: 0 5px 0 0; }

.actions {
  display: flex;
  justify-content: flex-end;
  align-items: end;
  gap: 10px;
  margin: 22px 0;
}

.limit { width: 130px; margin-right: auto; }

.result-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-bottom: 16px;
}

#result-meta { color: var(--muted); font-size: 0.75rem; text-align: right; }

.table-wrap {
  max-height: 75vh;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

table {
  width: 100%;
  background: var(--card);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.78rem;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 14px;
  color: var(--muted);
  background: var(--table-head);
  border-bottom: 1px solid var(--border);
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
}

tbody td {
  padding: 13px 12px;
  background: var(--card);
  border-bottom: 1px solid var(--row-border);
  white-space: nowrap;
}

tbody tr:nth-child(even) td { background: var(--card-alt); }
tbody tr:hover td { background: var(--table-hover); }
tbody tr:last-child td { border-bottom: 0; }

.error {
  margin-bottom: 12px;
  padding: 12px 14px;
  color: var(--error-text);
  background: rgb(255 77 77 / 12%);
  border: 1px solid rgb(255 77 77 / 55%);
  border-radius: 8px;
}

.hidden { display: none !important; }

.theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  min-width: 108px;
  padding: 9px 13px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
  font-size: 0.76rem;
  font-weight: 750;
}

.theme-toggle:hover { background: var(--button); border-color: var(--group-sep); }
.theme-toggle:focus-visible { outline: 3px solid var(--group-sep); outline-offset: 2px; }

:root[data-theme="light"] .availability.available,
:root[data-theme="light"] .account-state.active { color: #17663d; }
:root[data-theme="light"] .availability.planned { color: #63429e; }
:root[data-theme="light"] .role-admin { color: #765000; }
:root[data-theme="light"] .role-reporter { color: #62429b; }
:root[data-theme="light"] .role-user { color: #28568f; }
:root[data-theme="light"] .account-state.inactive,
:root[data-theme="light"] .danger-button { color: #9b2923; }

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

.noscript {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  padding: 12px 14px;
  color: var(--error-text);
  background: var(--card);
  border: 1px solid var(--red);
  border-radius: 8px;
}

footer {
  padding: 24px 16px 36px;
  color: var(--muted);
  text-align: center;
  font-size: 0.75rem;
}

/* Catalogue gateway */
.catalogue-home {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background:
    radial-gradient(circle at 16% 20%, rgb(47 86 183 / 18%), transparent 30%),
    radial-gradient(circle at 84% 62%, rgb(89 217 255 / 8%), transparent 28%),
    var(--bg);
}

.home-header {
  position: relative;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--bg);
  background: var(--brand-title);
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 900;
}

.brand strong,
.brand small { display: block; }
.brand strong { font-size: 1.05rem; letter-spacing: 0.14em; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 0.72rem; }

.header-status {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgb(46 204 113 / 12%);
}

.catalogue-home-main {
  width: min(1180px, 100%);
  margin: auto;
  padding-top: clamp(54px, 8vw, 110px);
  padding-bottom: clamp(54px, 8vw, 100px);
}

.catalogue-intro { max-width: 820px; margin-bottom: 48px; }
.catalogue-intro h1 {
  margin: 10px 0 18px;
  color: var(--title-color);
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 720;
  letter-spacing: -0.045em;
  line-height: 0.98;
}
.catalogue-intro p {
  max-width: 640px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}

.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.catalogue-card {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  padding: 24px;
  color: var(--text);
  background: var(--surface-gradient);
  border: 1px solid var(--border);
  border-radius: 18px;
  text-decoration: none;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.catalogue-card:hover,
.catalogue-card:focus-visible {
  border-color: var(--group-sep);
  box-shadow: 0 24px 70px rgb(0 0 0 / 30%);
  transform: translateY(-4px);
}

.catalogue-card-topline {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.catalogue-number { color: var(--muted); font-size: 0.75rem; font-weight: 800; }
.availability {
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.availability i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
}
.availability.available { color: #9af0bd; }
.availability.available i { background: var(--green); }
.availability.planned { color: #d1c4ff; }
.availability.planned i { background: var(--violet); }

.sky-orbit { position: absolute; top: 32px; right: 2%; width: 56%; height: 210px; }
.sky-orbit::before,
.sky-orbit::after {
  position: absolute;
  inset: 18% 8%;
  border: 1px solid rgb(89 217 255 / 28%);
  border-radius: 50%;
  content: "";
  transform: rotate(-22deg);
}
.sky-orbit::after { inset: 30% 20%; border-color: rgb(255 212 0 / 32%); transform: rotate(22deg); }
.sky-orbit span { position: absolute; width: 5px; height: 5px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 9px var(--cyan); }
.sky-orbit span:nth-child(1) { top: 28%; left: 18%; }
.sky-orbit span:nth-child(2) { top: 62%; left: 70%; width: 8px; height: 8px; background: #ffd400; }
.sky-orbit span:nth-child(3) { top: 15%; left: 72%; }
.sky-orbit span:nth-child(4) { top: 52%; left: 36%; background: var(--violet); }

.catalogue-card-copy { position: absolute; right: 24px; bottom: 24px; left: 24px; z-index: 2; }
.catalogue-kicker { color: var(--cyan); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.extragalactic-card .catalogue-kicker { color: #c5b6ff; }
.catalogue-card h2 { margin: 7px 0 10px; font-size: clamp(1.55rem, 3vw, 2.25rem); }
.catalogue-card p { max-width: 490px; margin: 0 0 22px; color: var(--muted); }
.card-action { display: flex; justify-content: space-between; padding-top: 17px; border-top: 1px solid var(--border); font-weight: 800; }
.card-action b { color: var(--cyan); font-size: 1.2rem; }
.extragalactic-card .card-action b { color: var(--violet); }

.home-footer { display: flex; justify-content: space-between; padding-inline: clamp(20px, 3vw, 42px); border-top: 1px solid var(--border); }

/* Authentication */
.auth-home-main {
  display: grid;
  width: min(1180px, 100%);
  min-height: calc(100vh - 178px);
  margin: auto;
  place-items: center;
  padding-top: clamp(42px, 7vw, 90px);
  padding-bottom: clamp(42px, 7vw, 90px);
}

.auth-loading { color: var(--muted); font-weight: 700; }
.auth-loading.error { max-width: 620px; }

.login-layout {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
  gap: clamp(42px, 9vw, 110px);
  align-items: center;
}

.login-intro h1 {
  max-width: 680px;
  margin: 10px 0 20px;
  color: var(--title-color);
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.login-intro p {
  max-width: 600px;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
}

.login-card {
  padding: clamp(24px, 4vw, 38px);
  background: var(--surface-gradient);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 26px 80px rgb(0 0 0 / 25%);
}

.login-card-heading { display: flex; gap: 14px; align-items: center; margin-bottom: 26px; }
.login-lock {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--green);
  background: rgb(46 204 113 / 10%);
  border: 1px solid rgb(46 204 113 / 32%);
  border-radius: 50%;
  font-size: 0.62rem;
  box-shadow: inset 0 0 0 6px var(--card-alt);
}
.login-card label { display: block; margin-top: 18px; }
.remember-option { display: flex !important; align-items: center; gap: 9px; color: var(--muted); font-weight: 500; }
.remember-option input { width: 17px; height: 17px; margin: 0; }
.login-button { width: 100%; margin-top: 24px; padding: 12px 15px; }
.login-button span { float: right; }

.account-nav { display: flex; align-items: center; gap: 14px; }
.account-nav > span { color: var(--text); font-size: 0.82rem; font-weight: 700; }
.account-nav a { color: var(--muted); font-size: 0.78rem; font-weight: 700; text-decoration: none; }
.account-nav a:hover { color: var(--text); }
.account-nav .text-button { font-size: 0.78rem; }
.catalogue-workspace { width: 100%; }

/* User administration */
.nav-button {
  padding: 8px 12px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 0.82rem;
}
.nav-button:hover { color: var(--text); background: var(--card-alt); }
.admin-main { max-width: 1280px; }
.admin-main .workspace-heading { align-items: center; }
.admin-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-form-grid label small { display: block; margin-top: 6px; color: var(--muted); font-weight: 500; }
.catalogue-access-field { border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; }
.catalogue-access-field legend { padding: 0 6px; font-weight: 700; }
.catalogue-access-field label { display: inline-flex; align-items: center; gap: 8px; margin-right: 22px; }
.catalogue-access-field input { width: auto; }
.catalogue-access-field small { display: block; margin-top: 8px; color: var(--muted); }
.password-field #password-label { float: none; color: var(--text); font-weight: 700; }
.active-option { display: flex; align-items: center; gap: 9px; align-self: end; min-height: 42px; }
.active-option input { width: 18px; height: 18px; margin: 0; }
.editor-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.admin-summary { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.admin-summary span { color: var(--muted); font-size: 0.78rem; }
.admin-users-table th { text-align: left; }
.admin-users-table td:first-child strong,
.admin-users-table td:first-child small { display: block; }
.admin-users-table td:first-child small { margin-top: 3px; color: var(--muted); }
.admin-users-table .inactive-user td { opacity: 0.6; }
.role-badge,
.account-state { display: inline-block; padding: 5px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.68rem; font-weight: 800; }
.role-admin { color: #ffd58a; border-color: rgb(255 165 0 / 38%); }
.role-reporter { color: #cfc4ff; border-color: rgb(169 140 255 / 38%); }
.role-user { color: #b9d8ff; border-color: rgb(89 160 255 / 38%); }
.account-state.active { color: #9af0bd; border-color: rgb(46 204 113 / 32%); }
.account-state.inactive { color: #ffb0b0; border-color: rgb(255 77 77 / 32%); }
.user-actions { display: flex; justify-content: flex-end; gap: 7px; }
.compact-button { padding: 6px 9px; font-size: 0.72rem; }
.danger-button { padding: 6px 9px; color: #ffb0b0; background: rgb(255 77 77 / 8%); border: 1px solid rgb(255 77 77 / 35%); border-radius: 8px; font-size: 0.72rem; }
.danger-button:hover { background: rgb(255 77 77 / 16%); }

/* Extragalactic placeholder */
.coming-soon-main { display: grid; min-height: calc(100vh - 210px); place-items: center; }
.coming-soon-panel {
  display: grid;
  width: min(980px, 100%);
  grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.coming-soon-visual {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgb(169 140 255 / 30%), rgb(14 22 48 / 75%) 24%, #080d20 64%);
}
.galaxy-core { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; background: white; border-radius: 50%; box-shadow: 0 0 18px 8px #a98cff, 0 0 70px 30px rgb(89 217 255 / 30%); transform: translate(-50%, -50%); }
.coming-soon-visual span { position: absolute; inset: 20%; border: 1px solid rgb(169 140 255 / 38%); border-radius: 50%; transform: rotate(28deg); }
.coming-soon-visual span:nth-of-type(2) { inset: 28% 8%; transform: rotate(-19deg); }
.coming-soon-visual span:nth-of-type(3) { inset: 37% 2%; border-color: rgb(89 217 255 / 28%); transform: rotate(12deg); }
.coming-soon-visual span:nth-of-type(4) { top: 13%; left: 21%; width: 5px; height: 5px; background: white; border: 0; box-shadow: 150px 240px 0 var(--cyan), 220px 35px 0 #ffd400; }
.coming-soon-visual span:nth-of-type(5) { inset: 9% 35%; border-color: rgb(255 255 255 / 15%); transform: rotate(55deg); }
.coming-soon-copy { align-self: center; padding: clamp(30px, 6vw, 68px); }
.coming-soon-copy h2 { margin: 9px 0 16px; font-size: clamp(2rem, 4vw, 3.3rem); }
.coming-soon-copy > p { color: var(--muted); font-size: 1rem; line-height: 1.65; }
.planned-features { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 30px; }
.planned-features span { padding: 7px 10px; color: #d6cbff; background: rgb(169 140 255 / 9%); border: 1px solid rgb(169 140 255 / 30%); border-radius: 6px; font-size: 0.72rem; font-weight: 700; }
.link-button { display: inline-block; text-decoration: none; }

@media (max-width: 750px) {
  .site-header { align-items: start; flex-direction: column; }
  .workspace-heading { align-items: start; flex-direction: column; }
  .workspace-legend { justify-content: flex-start; gap: 12px; }
  #query-form { grid-template-columns: 1fr; }
  #query-form > .panel,
  #query-form > .actions { grid-column: 1; }
  .grid.four,
  .grid.three,
  .column-groups { grid-template-columns: 1fr 1fr; }
  .filter-row { grid-template-columns: 1fr 1fr; }
  .filter-row label:first-child { grid-column: span 2; }
  .catalogue-grid { grid-template-columns: 1fr; }
  .catalogue-card { min-height: 380px; }
  .coming-soon-panel { grid-template-columns: 1fr; }
  .coming-soon-visual { min-height: 260px; }
  .login-layout { grid-template-columns: 1fr; gap: 32px; }
  .login-intro h1 { font-size: clamp(2.5rem, 12vw, 4rem); }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-users-table th:nth-child(2),
  .admin-users-table td:nth-child(2) { display: none; }
}

@media (max-width: 480px) {
  .grid.four,
  .grid.three,
  .column-groups { grid-template-columns: 1fr; }
  .actions { flex-wrap: wrap; }
  .actions .primary,
  .actions .secondary { flex: 1; }
  .result-heading { align-items: start; flex-direction: column; }
  #result-meta { text-align: left; }
  .header-status { display: none; }
  .catalogue-intro h1 br { display: none; }
  .home-footer { align-items: start; flex-direction: column; gap: 6px; text-align: left; }
  .account-nav > span { display: none; }
  .user-actions { align-items: stretch; flex-direction: column; }
}