/* Dizayn tokenlari: barcha ranglar va o'lchamlar shu yerda */
:root {
  /* Prava Garant logotipi ranglari: to'q ko'k-kulrang, to'q moviy-yashil, yorqin moviy (faqat urg'u uchun) */
  --c-bg: #f3f6f8;
  --c-surface: #ffffff;
  --c-surface-2: #eaf0f3;
  --c-text: #222b38;
  --c-text-muted: #5d6b78;
  --c-border: #dce4ea;
  --c-primary: #0b7189;
  --c-primary-strong: #085a6e;
  --c-primary-text: #ffffff;
  --c-primary-soft: #e3f3f7;
  --c-accent: #18c3dd;
  --c-brand-cyan: #0a97b0;
  --c-success: #13915a;
  --c-success-soft: #e1f4ea;
  --c-danger: #cf4040;
  --c-danger-soft: #fceaea;
  --c-warning: #a86b12;
  --c-warning-soft: #fdf3e1;
  --c-focus: #0b7189;
  --c-overlay: rgba(10, 16, 24, 0.5);
  --c-on-hero: #ffffff;
  --c-on-hero-muted: rgba(255, 255, 255, 0.8);
  --c-hero-glass: rgba(255, 255, 255, 0.12);
  --grad-hero: linear-gradient(135deg, #1f2a38 0%, #193a4c 55%, #0b6f86 100%);
  --grad-accent: linear-gradient(90deg, #0b8fa8 0%, #18c3dd 100%);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Montserrat", var(--font);
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-xxl: 1.75rem;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(34, 43, 56, 0.05), 0 4px 14px rgba(11, 113, 137, 0.06);
  --shadow-2: 0 12px 32px rgba(34, 43, 56, 0.14);
  --shadow-hero: 0 14px 34px rgba(31, 42, 56, 0.28);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 150ms;
  --icon: 22px;
  --icon-bubble: 44px;
  --ring: 96px;

  --w-content: 720px;
  --w-wide: 1100px;
  --tap: 44px;
  --thumb: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #0f1720;
    --c-surface: #17212c;
    --c-surface-2: #1f2b38;
    --c-text: #e7edf2;
    --c-text-muted: #98a6b3;
    --c-border: #2a3846;
    --c-primary: #3cc4dc;
    --c-primary-strong: #6fd4e6;
    --c-primary-text: #0a2a33;
    --c-primary-soft: #133846;
    --c-brand-cyan: #3cc4dc;
    --c-success: #34c27b;
    --c-success-soft: #12382a;
    --c-danger: #ef6b6b;
    --c-danger-soft: #3a1d22;
    --c-warning: #e3a84f;
    --c-warning-soft: #3a2c14;
    --c-focus: #6fd4e6;
    --grad-hero: linear-gradient(135deg, #18222e 0%, #16364a 55%, #0a5d71 100%);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-hero: 0 14px 34px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.5;
}
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
img, video { max-width: 100%; }
[hidden] { display: none !important; }

h1, h2, h3 { letter-spacing: -0.01em; }
h1 { font-family: var(--font-brand); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-4);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text);
  font: inherit; font-weight: var(--fw-medium); cursor: pointer; text-decoration: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn:hover { background: var(--c-surface-2); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-text); box-shadow: 0 4px 12px rgba(11, 113, 137, 0.22); }
.btn-primary:hover { background: var(--c-primary-strong); border-color: var(--c-primary-strong); }
.btn-success { background: var(--c-success); border-color: var(--c-success); color: var(--c-primary-text); box-shadow: 0 4px 12px rgba(18, 154, 85, 0.25); }
.btn-success:hover { background: var(--c-success); filter: brightness(1.06); }
.ico { display: inline-flex; flex: none; }
.ico svg { width: var(--icon); height: var(--icon); }
.btn-danger { color: var(--c-danger); }
.btn-danger:hover { background: var(--c-danger-soft); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-sm { min-height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }

.input, select.input, textarea.input {
  width: 100%; min-height: var(--tap); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text); font: inherit;
}
textarea.input { min-height: 96px; resize: vertical; }
.label { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text-muted); }
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.muted { color: var(--c-text-muted); }

.toast {
  position: fixed; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
  max-width: calc(100% - var(--sp-6)); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); background: var(--c-text); color: var(--c-bg);
  box-shadow: var(--shadow-2); z-index: 100;
}
.toast.error { background: var(--c-danger); color: var(--c-primary-text); }

/* ===== Yagona to'q ko'k mavzu (logotip ranglari asosida) =====
   Fon — chuqur to'q ko'k, bloklar — bir pog'ona ochroq ko'k va aniq chegarali,
   urg'u — logotipdagi moviy-yashil. Kompyuterning yorug'/qorong'i rejimidan qat'i nazar bir xil ko'rinadi. */
:root {
  color-scheme: dark;
  --c-bg: #0d1520;
  --c-surface: #152030;
  --c-surface-2: #1c2a3c;
  --c-surface-3: #23344a;
  --c-text: #e8eef4;
  --c-text-muted: #9fb0c1;
  --c-border: #2b3d53;
  --c-border-strong: #3a5069;
  --c-primary: #2cbcd4;
  --c-primary-strong: #5cd0e3;
  --c-primary-text: #ffffff;
  --c-primary-soft: #133447;
  --c-btn: #0c7f98;
  --c-btn-hover: #0e93ae;
  --c-accent: #18c3dd;
  --c-brand-cyan: #2cbcd4;
  --c-success: #3cc483;
  --c-success-soft: #123a2c;
  --c-danger: #f07070;
  --c-danger-soft: #3d1e26;
  --c-warning: #eab25c;
  --c-warning-soft: #3a2d16;
  --c-focus: #5cd0e3;
  --c-overlay: rgba(4, 8, 14, 0.7);
  --c-card: rgba(21, 32, 48, 0.94);
  --grad-hero: linear-gradient(135deg, #1a2533 0%, #15364a 55%, #0b6378 100%);
  --grad-accent: linear-gradient(90deg, #0b8fa8 0%, #18c3dd 100%);
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 2px 10px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 14px 34px rgba(0, 0, 0, 0.45);
  --shadow-hero: 0 16px 40px rgba(0, 0, 0, 0.45);
  /* Jiddiyroq ko'rinish: burchaklar kamroq yumaloq */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-xl: 16px;
  --wm-opacity: 0.06;
}
body { background: var(--c-bg); color: var(--c-text); }

/* Tugmalar: oddiy tugma — ko'k-kulrang, asosiy tugma — logotip moviy-yashili, oq yozuv */
.btn { background: var(--c-surface-2); border-color: var(--c-border-strong); color: var(--c-text); }
.btn:hover { background: var(--c-surface-3); border-color: var(--c-primary); }
.btn-primary { background: var(--c-btn); border-color: var(--c-btn); color: #fff; box-shadow: 0 4px 14px rgba(12, 127, 152, 0.35); }
.btn-primary:hover { background: var(--c-btn-hover); border-color: var(--c-btn-hover); }
.btn-success { color: #fff; }
.btn-danger { color: var(--c-danger); }
.btn-danger:hover { background: var(--c-danger-soft); border-color: var(--c-danger); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--c-surface-2); border-color: transparent; }

/* Kiritish maydonlari */
.input, select.input, textarea.input { background: var(--c-bg); border-color: var(--c-border-strong); color: var(--c-text); }
.input::placeholder { color: #6f8396; }
.input:focus { border-color: var(--c-primary); outline: none; box-shadow: 0 0 0 3px rgba(44, 188, 212, 0.18); }
select.input option, select.input optgroup { background: var(--c-surface); color: var(--c-text); }

/* Bloklar aniq ajralib turadi */
.card { background: var(--c-surface); border-color: var(--c-border); box-shadow: var(--shadow-1); }
.toast { background: #e8eef4; color: #0d1520; }

/* Kompyuter: fonda katta, xira kurs logotipi */
@media (min-width: 1024px) {
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: url("/brand/emblem.png") no-repeat center / min(68vmin, 720px);
    opacity: var(--wm-opacity); filter: saturate(0.7);
  }
  .card { background: var(--c-card); }
  html { font-size: 106.25%; }
}