:root {
  --radius: 12px;
}

.h2 { font-size: clamp(22px, 3vw, 28px); margin-bottom: 12px; }

.input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius);
}
.input:focus { outline: 2px solid var(--primary-20); }

.checkbox { color: var(--muted); display:flex; gap:8px; align-items:flex-start; }

.badge { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; color: var(--muted); }

:root{
  --maxw: 1200px;
  --pad: 16px;             /* mobil ichki chekka */
  --hgap: 16px;            /* gorizontal gap */
  --gold: #C39A6F;
  --text: #EDEDED;
  --muted:#B2B2B2;
}

/* Fluid font: mobil kichik, desktop katta */
html { font-size: clamp(14px, 1.6vw, 16px); }
body { line-height: 1.6; color: var(--text); }

.container{
  width: min(100%, var(--maxw));
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.h1{ font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.2; }
.h2{ font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1.25; }
.h3{ font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.3; }

img, video { max-width: 100%; height: auto; display: block; }