/* ============================================================
   Qarz — дизайн-система v2 (современный минимализм)
   Светло-серый фон · белые карточки · мягкие тени · зелёный акцент.
   Размеры шрифта — в rem (масштабируются настройкой размера шрифта).
   ============================================================ */

:root {
  /* — поверхности — */
  --paper:     #FFFFFF;   /* карточки */
  --paper-2:   #F4F5F7;   /* фон приложения */
  --paper-3:   #EDEFF2;   /* утопленные блоки, поля */
  --line:      #E8EAEE;   /* волосяные границы */
  --line-2:    #DDE0E6;

  /* — текст — */
  --ink:       #191C22;
  --ink-2:     #69707E;
  --ink-3:     #A3A9B4;

  /* — фирменный зелёный (акцент) — */
  --green:     #1FA651;
  --green-d:   #178441;
  --green-t:   #E7F6EC;
  --green-ink: #0E6A33;

  /* — семантика сумм — */
  --debt:      #E5544B;   /* долг */
  --debt-t:    #FCEAE8;
  --debt-ink:  #BE362C;
  --warn:      #E5922F;   /* просрочка */
  --warn-t:    #FBEEDB;
  --paid:      #1FA651;   /* получено */

  /* — цвета иконок-плиток — */
  --blue:      #3D6CE0;   --blue-t:   #E9EEFC;
  --violet:    #7A6CEF;   --violet-t: #ECEAFD;
  --info:      #3D6CE0;

  /* — тени: волосяное кольцо + микро-подсветка (лёгкие, не «тяжёлые») — */
  --sh-1:  0 0 0 1px rgba(22,27,38,.04), 0 1px 3px rgba(22,27,38,.05);
  --sh-2:  0 0 0 1px rgba(22,27,38,.04), 0 4px 16px rgba(22,27,38,.07);
  --sh-nav:0 2px 8px rgba(22,27,38,.06), 0 12px 30px rgba(22,27,38,.12);
  --sh-pop:0 0 0 1px rgba(22,27,38,.05), 0 16px 44px rgba(22,27,38,.18);

  /* — скругления — */
  --r-xs: 10px;
  --r-sm: 13px;
  --r:    17px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  --tap:      52px;
  --nav-h:    66px;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --num:  "SF Mono", "Roboto Mono", ui-monospace, monospace;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}

[data-theme="dark"] {
  /* глубокий нейтральный графит — не чёрный и не синий; карточки на ступень
     светлее фона, поэтому «висят» без тяжёлых теней */
  --paper:     #1B1E24;   /* карточки */
  --paper-2:   #101216;   /* фон приложения */
  --paper-3:   #262A31;   /* поля, утопленные блоки */
  --line:      #2B2F38;
  --line-2:    #383D48;
  --ink:       #ECEEF1;
  --ink-2:     #969DAA;
  --ink-3:     #5F6571;
  --green:     #2EBE63;
  --green-d:   #27A957;
  --green-t:   #16331F;
  --green-ink: #62DA8E;
  --debt:      #FF635A;
  --debt-t:    #35211F;
  --debt-ink:  #FF948D;
  --warn:      #ECA552;
  --warn-t:    #33270F;
  --paid:      #2EBE63;
  --blue:      #6E92F0;  --blue-t:   #1F2942;
  --violet:    #9A8FF4;  --violet-t: #272442;
  --info:      #6E92F0;
  /* в тёмной теме карточки определяет тонкое светлое кольцо (тени не видны) */
  --sh-1:  0 0 0 1px rgba(255,255,255,.05);
  --sh-2:  0 0 0 1px rgba(255,255,255,.06), 0 6px 22px rgba(0,0,0,.5);
  --sh-nav:0 0 0 1px rgba(255,255,255,.05), 0 10px 28px rgba(0,0,0,.6);
  --sh-pop:0 0 0 1px rgba(255,255,255,.06), 0 16px 44px rgba(0,0,0,.66);
  color-scheme: dark;
}

/* — масштаб шрифта (настройка для пожилых продавцов) — */
html { font-size: 16px; }
html[data-fs="sm"] { font-size: 14.5px; }
html[data-fs="lg"] { font-size: 18px; }
html[data-fs="xl"] { font-size: 20px; }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
::selection { background: var(--green-t); color: var(--green-ink); }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 22px;
  font-size: 1rem; font-weight: 650; letter-spacing: -.01em;
  border-radius: var(--r-sm);
  transition: transform .12s var(--ease), background .15s, opacity .15s;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--green); color: #fff; box-shadow: 0 3px 10px rgba(31,166,81,.20); }
.btn--primary:active { background: var(--green-d); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--ghost { background: var(--paper-3); color: var(--ink); }
.btn--danger { background: var(--debt); color: #fff; }
.btn--block { display: flex; width: 100%; }
.btn--lg { min-height: 56px; font-size: 1.0625rem; border-radius: var(--r); }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: .875rem; border-radius: var(--r-sm); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--sm svg { width: 17px; height: 17px; }

/* ---------- поля ввода ---------- */
.field { display: block; margin-bottom: 14px; }
.field__label {
  display: block; font-size: .8125rem; font-weight: 600;
  color: var(--ink-2); margin-bottom: 7px;
}
.input, .select, .textarea {
  width: 100%; min-height: var(--tap);
  padding: 13px 15px; font-size: 1rem;
  background: var(--paper-3);
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  transition: border-color .15s, background .15s;
}
.input::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--green); background: var(--paper);
}
.textarea { min-height: 90px; resize: vertical; line-height: 1.5; }

.card {
  background: var(--paper);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}

/* флаг страны (flagcdn) */
.flag {
  display: inline-block; vertical-align: middle;
  width: 24px; height: 18px; border-radius: 4px; object-fit: cover; flex: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset; background: var(--paper-3);
}

/* ---------- утилиты ---------- */
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.center { text-align: center; }
.hidden { display: none !important; }

@keyframes shimmer { 100% { background-position: -200% 0; } }
.skeleton {
  background: linear-gradient(90deg, var(--paper-3) 25%, var(--paper-2) 50%, var(--paper-3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite linear;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}