:root {
  color: #0b1424;
  background: #f4f6fb;
  --ink: #0b1424;
  --navy: #071b3a;
  --royal: #0a3dff;
  --cyan: #0ea5e9;
  --mint: #10b981;
  --gold: #d6a229;
  --coral: #ef5a3c;
  --cloud: #f4f6fb;
  --mist: #edf0f7;
  --line: #e3e7f0;
  --muted: #5e6b85;
  color: var(--ink);
  background: var(--cloud);
}

* {

body {
  margin: 0;
  font-family: "Geist", system-ui, sans-serif;
  background: #f4f6fb;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--cloud);
}

a {
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.display {
  font-family: "Fraunces", serif;
  font-family: Georgia, "Times New Roman", serif;
}

.mono {
  font-family: "Geist Mono", monospace;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: #0a3dff;
  background: var(--royal);
  color: white;
  font-weight: 700;
  letter-spacing: -0.03em;
  letter-spacing: 0;
}

#loader {
  display: grid;
  place-content: center;
  gap: 20px;
  background: #f4f6fb;
  background: var(--cloud);
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.loader-row,
.admin-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.loader-title {
  font-size: 15px;
  font-weight: 700;
}

.loader-subtitle {
  color: var(--muted);
  font-size: 11px;
}

.loaded #loader {
  opacity: 0;
  visibility: hidden;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3e7f0;
  background: var(--line);
}

.loader-bar span {
  width: 70%;
  height: 100%;