/* survschool.com brand, inspected 2026-10-30. Scoped to generator surfaces. */
body[data-surface="generator"] {
  --ink: #f5eff5;
  --muted: #b8aebb;
  --green: #ee0b91;
  --lime: #ee0b91;
  --paper: #100c13;
  --line: #d5b5d522;
  --white: #19131c;
  --amber: #392e1d;
  --red: #ff9c99;
  color-scheme: dark;
  display: flow-root;
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
}
body[data-surface="generator"] .brand-generator img {
  display: block;
  width: 185px;
  max-width: 100%;
  height: auto;
}
body[data-surface="generator"] .brand-generator small {
  display: block;
  margin: 12px 0 0;
  font: 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 2px;
  color: var(--muted);
}
body[data-surface="generator"] h1,
body[data-surface="generator"] h2,
body[data-surface="generator"] .big {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  letter-spacing: -.045em;
}
body[data-surface="generator"] h1 span { color: var(--green); }
body[data-surface="generator"] .eyebrow {
  font: 11px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 1.4px;
}
body[data-surface="generator"] .sidebar {
  background: #130e17;
}
body[data-surface="generator"] .sidebar nav button.active {
  background: #32192b;
  color: #ffb6df;
  box-shadow: inset 2px 0 #ee0b91;
}
body[data-surface="generator"] .card,
body[data-surface="generator"] .pill {
  background: #19131c;
  border-color: var(--line);
}
body[data-surface="generator"] .card {
  border-radius: 8px;
}
body[data-surface="generator"] button {
  background: #221827;
  border-color: #876d86;
  color: var(--ink);
  border-radius: 5px;
}
body[data-surface="generator"] button:hover {
  background: #382035;
  border-color: #ee0b91;
}
body[data-surface="generator"] button.primary {
  background: #ee0b91;
  border-color: #ee0b91;
  color: #100c13;
}
body[data-surface="generator"] button.primary:hover {
  background: #ff4fb4;
  border-color: #ff4fb4;
}
body[data-surface="generator"] button.danger { color: #ff9c99; }
body[data-surface="generator"] .sidebar nav button { background: transparent; }
body[data-surface="generator"] .sidebar nav button.active { background: #32192b; }
body[data-surface="generator"] input,
body[data-surface="generator"] textarea,
body[data-surface="generator"] select,
body[data-surface="generator"] fieldset:disabled input,
body[data-surface="generator"] fieldset:disabled textarea,
body[data-surface="generator"] fieldset:disabled select {
  background: #100c13;
  border-color: #876d86;
  color: #f5eff5;
}
body[data-surface="generator"] input::placeholder,
body[data-surface="generator"] textarea::placeholder { color: #b8aebb; }
body[data-surface="generator"] .pill.green {
  background: #32192b;
  color: #ffb6df;
  border-color: #72415f;
}
body[data-surface="generator"] .pill.amber,
body[data-surface="generator"] .warning {
  background: #392e1d;
  color: #ffe8ad;
  border-color: #9e7a3a;
}
body[data-surface="generator"] .note {
  background: #261423;
  border-color: #ee0b91;
}
body[data-surface="generator"] .note.warning { background: #392e1d; border-color: #9e7a3a; }
body[data-surface="generator"] .login { gap: 60px; }
body[data-surface="generator"] .login-art {
  height: 150px;
  justify-items: start;
  font: 13px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: #ee0b91;
  letter-spacing: 1px;
  background: radial-gradient(ellipse at left, #ee0b9119, transparent 65%);
}
body[data-surface="generator"] #notice {
  color: #f5eff5;
  background: #32192b;
  border: 1px solid #72415f;
}
body[data-surface="generator"] :is(button,a,input,textarea,select):focus-visible {
  outline-color: #ff75c4;
}
@media (max-width:650px) {
  body[data-surface="generator"] .brand-generator img { width: 180px; }
  body[data-surface="generator"] .brand-generator small { margin-top: 8px; }
  body[data-surface="generator"] .login { gap: 24px; }
}
/* A lighter accent for small text keeps contrast above 4.5:1 on panels. */
body[data-surface="generator"] a,
body[data-surface="generator"] .eyebrow,
body[data-surface="generator"] .login-art { color: #ff75c4; }

/* Two peer destinations, with a single column on smaller screens. */
body[data-surface="generator"] .destination-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:900px) { body[data-surface="generator"] .destination-grid { grid-template-columns:1fr; } }