:root {
  --bg: #08131a;
  --surface: #0f1f28;
  --surface-soft: #132733;
  --text: #e8f0f4;
  --text-muted: #93a8b4;
  --brand-orange: #ff7a18;
  --brand-orange-soft: #ff9a3d;
  --brand-turquoise: #c4ced6;
  --brand-turquoise-soft: #d7dee4;
  --danger: #ff4d67;
  --success: #20d7a0;
  --border: #21404f;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

html[data-theme="light"] {
  --bg: #f4f7f9;
  --surface: #ffffff;
  --surface-soft: #edf4f7;
  --text: #10202b;
  --text-muted: #50697a;
  --brand-orange: #f96a0e;
  --brand-orange-soft: #ff8b38;
  --brand-turquoise: #c8d0d8;
  --brand-turquoise-soft: #e2e7ec;
  --danger: #c12743;
  --success: #0ea573;
  --border: #d5e2ea;
  --shadow: 0 10px 30px rgba(4, 28, 45, 0.08);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top right, rgba(255, 122, 24, 0.08), transparent 42%),
    radial-gradient(circle at top left, rgba(200, 208, 216, 0.09), transparent 38%),
    var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Trebuchet MS", sans-serif;
  line-height: 1.55;
}

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

.container {
  width: min(1180px, 94vw);
  margin: 0 auto;
}

.section {
  padding: 2rem 0;
}

.narrow {
  max-width: 700px;
}

h1,
h2,
h3,
h4 {
  line-height: 1.2;
  margin-top: 0;
}

p {
  color: var(--text-muted);
}

.muted {
  color: var(--text-muted);
}

.btn {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.65rem 1.05rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.btn.solid {
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-turquoise));
  color: #fff;
}

.btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn.icon {
  min-width: 72px;
}

.btn.block {
  width: 100%;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text);
  border-radius: 10px;
  padding: 0.62rem 0.7rem;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.stack {
  display: grid;
  gap: 0.75rem;
}

.flash {
  border-radius: 12px;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}

.flash.success {
  background: rgba(32, 215, 160, 0.1);
  border-color: rgba(32, 215, 160, 0.35);
}

.flash.error {
  background: rgba(255, 77, 103, 0.12);
  border-color: rgba(255, 77, 103, 0.35);
}

.flash.warning {
  background: rgba(255, 122, 24, 0.12);
  border-color: rgba(255, 122, 24, 0.35);
}

@media (max-width: 900px) {
  .section {
    padding: 1.35rem 0;
  }
}