:root {
  --ui-bg: #17151b;
  --ui-surface: #211d25;
  --ui-surface-raised: #2c2631;
  --ui-text: #f4efe9;
  --ui-muted: #b3aab9;
  --ui-border: #403844;
  --ui-primary: #b9ed74;
  --ui-accent: #ed6eb5;
  --ui-danger: #ff8b83;
  --ui-focus-ring: 0 0 0 3px #17151b, 0 0 0 5px var(--ui-primary);
  --ui-font: "Quicksand", sans-serif;
}

.ui-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.65rem 1rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font: 700 0.9rem/1.2 var(--ui-font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.ui-button:hover:not(:disabled) { transform: translateY(-1px); }
.ui-button:focus-visible, .ui-field__control:focus-visible, .ui-appbar a:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-ring);
}
.ui-button:disabled { cursor: not-allowed; opacity: 0.52; }
.ui-button--primary { background: var(--ui-primary); color: #211d25; }
.ui-button--primary:hover:not(:disabled) { background: #d0f6a3; }
.ui-button--secondary { border-color: #695878; background: transparent; color: var(--ui-text); }
.ui-button--secondary:hover:not(:disabled) { background: var(--ui-surface-raised); }
.ui-button--quiet { background: transparent; color: var(--ui-primary); }
.ui-button--quiet:hover:not(:disabled) { background: rgb(185 237 116 / 9%); }
.ui-button--small { min-height: 44px; padding: 0.5rem 0.75rem; font-size: 0.82rem; }

.ui-field { display: grid; gap: 0.45rem; width: 100%; }
.ui-field__label { color: var(--ui-text); font-size: 0.88rem; font-weight: 700; }
.ui-field__control {
  width: 100%;
  min-height: 46px;
  padding: 0.7rem 0.8rem;
  border: 1px solid #5b505f;
  border-radius: 4px;
  background: #19171d;
  color: var(--ui-text);
  font: 500 0.95rem/1.5 var(--ui-font);
}
.ui-field__control::placeholder { color: #938a98; opacity: 1; }
.ui-field__control:hover { border-color: #8b7892; }
.ui-field__control[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-field__control:disabled { background: var(--ui-surface-raised); color: var(--ui-muted); cursor: not-allowed; }
textarea.ui-field__control { min-height: 112px; resize: vertical; }
.ui-field__hint { margin: 0; color: var(--ui-muted); font-size: 0.78rem; }
.ui-field__error { margin: 0; color: var(--ui-danger); font-size: 0.78rem; }

.ui-appbar {
  border-bottom: 1px solid var(--ui-border);
  background: rgb(23 21 27 / 96%);
  color: var(--ui-text);
}
.ui-appbar__inner {
  display: flex;
  min-height: 72px;
  max-width: 1120px;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-inline: auto;
  padding: 0 1.5rem;
}
.ui-appbar__brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.65rem; color: var(--ui-text); font-weight: 700; text-decoration: none; }
.ui-appbar__logo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.ui-appbar__links { display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
.ui-appbar__links a { color: var(--ui-muted); font-size: 0.88rem; font-weight: 700; text-decoration: none; }
.ui-appbar__links a:hover { color: var(--ui-primary); }
.ui-appbar__action { flex: 0 0 auto; }

@media (max-width: 620px) {
  .ui-appbar__inner { min-height: 64px; flex-wrap: wrap; gap: 0.75rem; padding: 0.7rem 1rem; }
  .ui-appbar__links { order: 3; flex: 1 0 100%; justify-content: space-around; padding-top: 0.6rem; border-top: 1px solid var(--ui-border); }
}

@media (prefers-reduced-motion: reduce) {
  .ui-button { transition: none; }
}