:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --border:#dfe3ee;
  --line-strong: #cfd5e4;
  --text: #1f2433;
  --muted: #66708a;
  --primary: #6f5ef1;
  --primary-dark: #5e4be4;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --shadow-soft: 0 18px 45px rgba(22, 30, 58, 0.08);
  --container: 1280px;

  --font-base:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;

  --text-base:1rem;
  --text-small:.92rem;
  --text-large:1.1rem;

  --h1:clamp(2.2rem,3.5vw,3rem);
  --h2:clamp(1.4rem,2.1vw,1.7rem);
  --h3:clamp(1rem,1.7vw,1.1rem);
  --h4:clamp(1rem,1.6vw,1.1rem);
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family:var(--font-base);
  font-size:var(--text-base);
  line-height:1.6;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);

 
}

p{
  font-size:var(--text-base);
  color:var(--muted);
  line-height:1.7;
}

h1{
  font-size:var(--h1);
  font-weight:800;
  line-height:1.15;
}

h2{
  font-size:var(--h2);
  font-weight:700;
  line-height:1.18;
}

h3{
  font-size:var(--h3);
  font-weight:700;
}

h4{
  font-size:var(--h4);
  font-weight:700;
}




a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}
main { min-height: 40vh; }
.flash-wrap { padding-top: 16px; }
.alert {
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  background: #eef2ff;
  color: #38405a;
  border: 1px solid #d8def8;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 30px;
  font-weight: 700;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn-outline {
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 14px 28px rgba(92, 70, 238, .22);
}
@media (max-width: 767px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
}