:root {
  --reg-bg-color: #000000;
  --reg-bg-surface: #252525;
  --reg-text-main: #f0f0f5;
  --reg-text-muted: #9aa0a6;
  /* Единственное место, где задаётся основной акцентный цвет всего приложения. */
  --reg-accent-primary: #ee0b00;
  --reg-accent-secondary: color-mix(in srgb, var(--reg-accent-primary) 70%, #000);
  --reg-border-color: rgba(86, 32, 245, 0.2);
  --reg-header-vpad: clamp(0.65rem, 1.1vw, 1rem);
  --reg-header-hpad: clamp(1rem, 4%, 2.25rem);
  --reg-header-min-h: clamp(58px, 6.2vw, 74px);
  --reg-logo-size: clamp(20px, 1.5vw, 22px);
  --reg-brand-size: clamp(1.15rem, 1.6vw, 1.4rem);
  --text-primary: var(--reg-text-main);
  --text-secondary: var(--reg-text-muted);
  --text-error: #ff6b6b;
  --accent-primary: var(--reg-accent-primary);
  --accent-secondary: var(--reg-accent-secondary);
  --fill-primary: #050505;
  --fill-secondary: #101010;
  --fill-surface: #151515;
  --fill-accent: var(--reg-accent-primary);
  --fill-accent-secondary: var(--reg-accent-secondary);
  --fill-yellow: #f2c24f;
  --fill-yellow-light: rgba(242, 194, 79, 0.14);
  --fill-mint: #67ad5b;
  --fill-mint-light: rgba(103, 173, 91, 0.14);
  --fill-red: #ff6b6b;
  --border-primary: #2e2e2e;
  --border-secondary: rgba(255, 255, 255, 0.08);
  --border-error-1: rgba(255, 107, 107, 0.45);
  --border-error-2: rgba(255, 107, 107, 0.3);
  --border-accent: var(--reg-accent-primary);
  --border-accent-secondary: var(--reg-accent-secondary);
  --border-violet: rgba(86, 32, 245, 0.35);
  --fill-logo-light: transparent;
  --fill-logo-dark: transparent;
  --border-yellow: rgba(242, 194, 79, 0.5);
  --border-mint: rgba(103, 173, 91, 0.55);
  --shadow-soft: 0 20px 40px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.45);
  --content-width: min(95vw, 1680px);
  --sidebar-width: clamp(208px, 15vw, 268px);
  --header-height: var(--reg-header-min-h);
  --card-gap: clamp(12px, 1.4vw, 18px);
  --card-padding-y: clamp(10px, 1.2vw, 16px);
  --card-padding-x: clamp(14px, 1.4vw, 20px);
  --text-base: clamp(14px, 0.95vw, 16px);
  --text-title: clamp(24px, 2.2vw, 36px);
  --hover-color: #0074ff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-primary);
  font-size: var(--text-base);
  background:
    radial-gradient(900px 420px at 100% -10%, color-mix(in srgb, var(--reg-accent-primary) 24%, transparent) 0%, transparent 70%),
    radial-gradient(900px 420px at -10% 100%, color-mix(in srgb, var(--reg-accent-secondary) 20%, transparent) 0%, transparent 70%),
    var(--reg-bg-color);
}

a {
  color: inherit;
  text-decoration: none;
}

#root {
  min-height: 100vh;
}

.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: var(--ctf-color-ink, var(--text-primary));
}

.form-group input {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: var(--ctf-radius-control, 4px);
  border: 1px solid var(--border-secondary);
  background: rgba(255, 255, 255, 0.02);
  color: #ffffff;
  font-size: var(--text-base);
}

.form-group input:focus {
  outline: none;
  border-color: var(--border-accent);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}

.btn {
  width: 100%;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: var(--ctf-radius-button, 8px);
  border: none;
  background: var(--fill-accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: var(--text-base);
}

.btn:hover {
  filter: brightness(0.92);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border: 1px solid var(--border-secondary);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

.alert {
  width: 100%;
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
}

.alert-success {
  background: var(--fill-mint-light);
  color: var(--fill-mint);
  border: 1px solid var(--border-mint);
}

.alert-danger {
  background: #fdeaea;
  color: var(--fill-red);
  border: 1px solid var(--border-error-1);
}

.alert-info {
  background: var(--fill-yellow-light);
  color: var(--text-primary);
  border: 1px solid var(--border-yellow);
}

@media (max-width: 900px) {
  :root {
    --content-width: 100vw;
    --sidebar-width: 100%;
    --header-height: clamp(56px, 14vw, 68px);
    --reg-header-min-h: var(--header-height);
    --reg-header-hpad: clamp(0.75rem, 4vw, 1.25rem);
    --reg-logo-size: clamp(16px, 4vw, 18px);
    --reg-brand-size: clamp(1rem, 4vw, 1.15rem);
  }

  .form-group {
    margin-bottom: 12px;
  }
}

@media (max-width: 480px) {
  :root {
    --text-title: clamp(22px, 7vw, 28px);
    --card-gap: 12px;
    --card-padding-y: 12px;
    --card-padding-x: 14px;
  }

  body {
    min-width: 0;
  }
}