/* 💸 Донаты SaSiTe — общие токены и компоненты (как у sasite.world: rec.css; акцент SST #C62828).
   Страницы добавляют свои файлы (app.css, donate.css, overlay.css); общие классы — здесь, не дублировать.
   Телефон (~440 px) — правила в @media (max-width:760px) в конце файла. Без inline-стилей (CSP). */
:root {
  --bg:#F9F9F9; --card:#FFFFFF; --text:#0F0F0F; --text2:#606060; --line:#E5E5E5; --hover:#F2F2F2; --chip:#F2F2F2;
  --blue:#065FD4; --blue-soft:rgba(6,95,212,.12);
  --accent:#C62828; --accent-text:#FFFFFF; --accent-soft:rgba(198,40,40,.10);
  --ok:#0B8043; --ok-soft:rgba(11,128,67,.12); --warn:#B07800; --warn-soft:rgba(176,120,0,.12); --bad:#C5221F; --bad-soft:rgba(197,34,31,.10);
  --body:"Roboto", "Roboto Fallback", Arial, "Helvetica Neue", sans-serif;
  --mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r:12px; --r-sm:8px; --shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0F0F0F; --card:#1F1F1F; --text:#F1F1F1; --text2:#AAAAAA; --line:#3A3A3A; --hover:#2A2A2A; --chip:#2A2A2A;
    --blue:#3EA6FF; --blue-soft:rgba(62,166,255,.16);
    --accent:#E0453F; --accent-soft:rgba(224,69,63,.16);
    --ok:#34C77B; --ok-soft:rgba(52,199,123,.14); --warn:#F2C14E; --warn-soft:rgba(242,193,78,.14); --bad:#FF6B5E; --bad-soft:rgba(255,107,94,.14);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3); }
}
@font-face { font-family:"Roboto Fallback"; src:local("Arial"); size-adjust:100.3%; ascent-override:92.7%; descent-override:24.4%; line-gap-override:0%; }

* { box-sizing:border-box; }
html { color-scheme:light dark; scrollbar-gutter:stable; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.45 var(--body); -webkit-text-size-adjust:100%; }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }
h1 { font-size:24px; font-weight:700; margin:0 0 8px; letter-spacing:-.01em; }
h2 { font-size:17px; font-weight:600; margin:0 0 10px; }
h3 { font-size:14px; font-weight:600; margin:0 0 6px; }
p { margin:0 0 10px; }
.muted { color:var(--text2); }
.small { font-size:12px; }
.mono { font-family:var(--mono); }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* шапка и обёртка */
.bar { position:sticky; top:0; z-index:5; background:var(--card); border-bottom:1px solid var(--line); }
.bar-in { max-width:960px; margin:0 auto; padding:0 16px; height:56px; display:flex; align-items:center; gap:12px; }
.logo { display:flex; align-items:center; gap:8px; font-weight:700; font-size:18px; color:var(--text); text-decoration:none; }
.logo:hover { text-decoration:none; }
.logo-mark { width:28px; height:28px; border-radius:8px; background:var(--accent); color:var(--accent-text); display:grid; place-items:center; font-size:13px; font-weight:800; letter-spacing:.02em; }
.bar-end { margin-left:auto; display:flex; align-items:center; gap:8px; }
.wrap { max-width:960px; margin:0 auto; padding:20px 16px 48px; }
.narrow { max-width:440px; margin:0 auto; }

/* карточки и строки */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; }
.card + .card { margin-top:12px; }
.stack > * + * { margin-top:12px; }
.row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.row.between { justify-content:space-between; }
.grow { flex:1; min-width:0; }
.sep { height:1px; background:var(--line); margin:14px 0; border:0; }

/* кнопки */
button { font:inherit; color:inherit; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 16px; border-radius:20px;
  border:1px solid var(--line); background:var(--card); color:var(--text); font-weight:500; white-space:nowrap; cursor:pointer;
  transition:background-color .15s, border-color .15s; text-decoration:none; }
.btn:hover { background:var(--hover); text-decoration:none; }
.btn:disabled { opacity:.5; cursor:default; }
.btn.primary { background:var(--text); color:var(--bg); border-color:var(--text); }
.btn.primary:hover { opacity:.9; }
.btn.accent { background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
.btn.accent:hover { opacity:.92; }
.btn.danger { color:var(--bad); border-color:var(--bad-soft); }
.btn.danger:hover { background:var(--bad-soft); }
.btn.quiet { border-color:transparent; background:transparent; color:var(--text2); }
.btn.quiet:hover { color:var(--text); background:var(--hover); }
.btn.big { min-height:52px; font-size:16px; padding:0 24px; border-radius:26px; }
.btn.small { min-height:32px; padding:0 12px; font-size:13px; border-radius:16px; }
.btn.block { width:100%; }
.btn.icon { width:40px; padding:0; }

/* поля */
.field { display:block; }
.field + .field { margin-top:12px; }
.label { display:block; font-size:13px; font-weight:500; margin-bottom:6px; }
.hint { display:block; font-size:12px; color:var(--text2); margin-top:4px; min-height:1.45em; }
.hint.err { color:var(--bad); }
input[type=text], input[type=password], input[type=number], input[type=search], input:not([type]), textarea, select {
  width:100%; min-height:40px; padding:8px 12px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--card);
  color:var(--text); font:inherit; }
textarea { min-height:84px; resize:vertical; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
input.mono, textarea.mono { font-family:var(--mono); font-size:13px; }
.check { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.check input { margin-top:3px; width:16px; height:16px; accent-color:var(--accent); flex:none; }

/* вкладки */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { padding:10px 14px; border:0; background:none; color:var(--text2); font-weight:500; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; }
.tab:hover { color:var(--text); }
.tab[aria-selected=true] { color:var(--text); border-bottom-color:var(--accent); }

/* метки и заметки */
.badge { display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px; border-radius:11px; font-size:12px; font-weight:500; background:var(--chip); color:var(--text2); white-space:nowrap; }
.badge.ok { background:var(--ok-soft); color:var(--ok); }
.badge.warn { background:var(--warn-soft); color:var(--warn); }
.badge.bad { background:var(--bad-soft); color:var(--bad); }
.badge.accent { background:var(--accent-soft); color:var(--accent); }
.note { border-radius:var(--r-sm); padding:10px 12px; background:var(--chip); font-size:13px; }
.note.warn { background:var(--warn-soft); }
.note.bad { background:var(--bad-soft); }
.note.ok { background:var(--ok-soft); }

/* адрес / сумма с кнопкой «копировать» */
.copy { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 6px 6px 12px; background:var(--card); }
.copy-v { flex:1; min-width:0; font-family:var(--mono); font-size:13px; overflow-wrap:anywhere; }

/* таблица */
.table { width:100%; border-collapse:collapse; }
.table th, .table td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.table th { font-size:12px; font-weight:500; color:var(--text2); }

/* окно */
.modal-back { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.45); display:grid; place-items:center; padding:16px; }
.modal { width:100%; max-width:440px; max-height:calc(100vh - 32px); overflow:auto; background:var(--card); border-radius:16px; padding:20px; box-shadow:var(--shadow); }
.modal h2 { margin-bottom:12px; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap; }

/* всплывашка «Скопировано» */
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60; background:var(--text); color:var(--bg); padding:10px 16px; border-radius:20px; font-size:13px; box-shadow:var(--shadow); }

/* загрузка */
.spin { width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--text2); border-radius:50%; animation:spin .8s linear infinite; flex:none; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration:2s; } }

@media (max-width:760px) {
  .wrap { padding:14px 12px 40px; }
  .bar-in { padding:0 12px; }
  .card { padding:14px; }
  h1 { font-size:21px; }
  .modal { padding:16px; border-radius:14px; }
  .modal-actions .btn { flex:1; }
  .table th, .table td { padding:8px 4px; }
}

/* дополнения страниц — общие классы страниц (index / app / donate), не меняют ничего выше */
html.modal-open { overflow:hidden; }
.modal.wide { max-width:560px; }
.modal-body > * + * { margin-top:12px; }
.modal-body p { margin:0; }
.modal-err:empty { visibility:hidden; }
.modal.is-busy { cursor:progress; }
.toast.bad { background:var(--bad); color:#fff; }
.toast.ok { background:var(--ok); color:#fff; }
.or { display:flex; align-items:center; gap:12px; color:var(--text2); font-size:12.5px; margin:12px 0; }
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--line); }
.chip { display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:13px; background:var(--chip); color:var(--text); font-size:12.5px; font-weight:500; white-space:nowrap; }
.qr { display:block; width:100%; height:auto; border-radius:var(--r-sm); background:#fff; }
.code-in { font-family:var(--mono); font-size:18px; letter-spacing:.12em; text-align:center; }
.input-row { display:flex; gap:8px; align-items:stretch; }
.input-row > input, .input-row > select { flex:1; min-width:0; }
.copy-v.big { font-size:18px; font-weight:600; }
.copy-v.masked { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal; }
.ext::after { content:" ↗"; }