/* OFS Garant — Mini App, общая тема (2026-08-08).
   Палитра фиксированная, а не из --tg-theme-*: у сервиса свой узнаваемый вид
   (чёрный, фиолетовый, белый), и он не должен «плыть» вслед за темой клиента. */

:root {
  /* Ширина «телефонной» колонки. Mini App на десктопе можно растянуть на
     половину экрана — без ограничения карточки превращаются в полосы. */
  --app-width: 460px;

  --bg:        #0B0813;
  --bg-soft:   #110C1D;
  --surface:   #17112A;
  --surface-2: #201738;
  --line:      #2C2249;

  --text:      #FFFFFF;
  --muted:     #A79CC4;
  --dim:       #6F6690;

  --accent:    #7C4DFF;
  --accent-2:  #A97BFF;
  --accent-dim: rgba(124, 77, 255, .16);

  --ok:        #3ED598;
  --warn:      #FFC15E;
  --danger:    #FF6B6B;

  --radius:    16px;
  --radius-sm: 12px;
  --gap:       10px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font: 15px/1.45 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "ss03" 1;   /* однознаковая «l», ровные кавычки */
  letter-spacing: -.006em;
}

/* Мягкое фиолетовое свечение сверху — фирменный акцент, а не просто чёрный фон */
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 320px; z-index: -1;
  background: radial-gradient(120% 100% at 50% 0%, rgba(124, 77, 255, .22), transparent 70%);
  pointer-events: none;
}

button, input, textarea { font: inherit; color: inherit; }
/* WebView рисует белую рамку на последней нажатой кнопке — на тёмном фоне
   это выглядит как случайно подсвеченный элемент. Клавиатурный фокус
   оставляем видимым. */
button:focus { outline: none; }
button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
button { cursor: pointer; }

/* ---------- карточки ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px;
}
.card-tight { padding: 12px; }

.row { display: flex; align-items: center; gap: 10px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: 13px; }
.tiny { font-size: 11px; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center { text-align: center; }
.hidden { display: none !important; }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px; border: none; border-radius: 14px; width: 100%;
  background: var(--surface-2); color: var(--text); font-weight: 600;
  transition: transform .08s, opacity .15s;
}
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .45; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #5B2BE0);
  box-shadow: 0 6px 20px rgba(124, 77, 255, .35);
}
.btn-ghost { background: transparent; border: 1px solid var(--line); }
/* Нейтральная кнопка: серая подложка, белый текст — для действий, которые
   не должны спорить с основной фиолетовой кнопкой. */
.btn-soft { background: #241D38; color: #EDE9F7; font-weight: 500; }
.btn-sm { padding: 9px 14px; font-size: 14px; width: auto; border-radius: 11px; }

/* ---------- бейджи статусов ---------- */
.badge {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); white-space: nowrap;
}
.badge.active    { background: rgba(124, 77, 255, .18); color: var(--accent-2); }
.badge.dispute   { background: rgba(255, 193, 94, .16); color: var(--warn); }
.badge.completed { background: rgba(62, 213, 152, .14); color: var(--ok); }
.badge.pending   { background: rgba(167, 156, 196, .14); color: var(--muted); }

/* ---------- поля ввода ---------- */
.field {
  width: 100%; padding: 13px 14px; border-radius: 14px;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--text);
  outline: none; transition: border-color .15s;
}
.field:focus { border-color: var(--accent); }
.field::placeholder { color: var(--dim); }
textarea.field { resize: none; min-height: 96px; line-height: 1.4; }

.label { font-size: 12px; color: var(--muted); margin: 0 0 6px 2px; }

/* ---------- сегменты ---------- */
.seg {
  display: flex; gap: 4px; padding: 4px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
}
.seg button {
  flex: 1; padding: 8px 12px; border: none; border-radius: 999px;
  background: transparent; color: var(--muted); font-size: 13px; font-weight: 600;
}
.seg button.on { background: var(--accent); color: #fff; }

/* ---------- аватар ---------- */
.ava {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  background: var(--surface-2); flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 700; color: var(--accent-2);
}
.ava-lg { width: 88px; height: 88px; font-size: 30px; border: 2px solid var(--accent); }

/* ---------- служебное ---------- */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 48px 24px; text-align: center; color: var(--muted);
}
.empty b { color: var(--text); font-size: 16px; }

.fatal {
  margin: auto; padding: 24px; text-align: center; color: var(--muted);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.fatal b { color: var(--text); font-size: 16px; }

.spinner {
  width: 22px; height: 22px; border-radius: 50%; margin: 32px auto;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }