/* 💸 Донаты SaSiTe — кабинет стримера (/app). Токены и компоненты — base.css. Телефон — в конце файла. */

.page-app .wrap { max-width:1080px; }
.page-app .bar-in { max-width:1080px; }

/* шапка: ссылка на страницу, ник, выход */
.my-link { font-family:var(--mono); font-size:12.5px; max-width:320px; overflow:hidden; gap:0; }
.my-link-host { color:var(--text2); }
.who { display:inline-flex; align-items:center; gap:8px; font-weight:500; max-width:200px; }
.who-ava { width:28px; height:28px; flex:none; border-radius:50%; background:var(--accent); color:var(--accent-text); display:grid; place-items:center; font-size:13px; font-weight:700; }
.who-nick { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* вкладки разделов */
.app-tabs { margin:0 0 18px; }
a.tab { display:inline-flex; align-items:center; gap:7px; text-decoration:none; position:relative; }
a.tab:hover { text-decoration:none; }
.tab-i { font-size:15px; line-height:1; }
.tab-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); margin-left:2px; }
.boot { display:flex; align-items:center; justify-content:center; gap:10px; min-height:220px; }
.panel { min-height:420px; }

/* общие формы настроек */
.set-form .field + .field, .set-form .field + .check, .set-form .check + .check, .set-form .check + .field, .set-form .two + .check, .set-form .field + .two { margin-top:14px; }
.set-form .check { padding:2px 0; }
.check-t { display:block; font-weight:500; }
.check .hint { margin-top:2px; }
.two { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.two .field + .field { margin-top:0; }
.usd-in { position:relative; }
.usd-in .pre { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text2); pointer-events:none; }
.usd-in input { padding-left:26px; }
input.num { max-width:180px; }
.usd-in { max-width:180px; }
.range-row { display:flex; align-items:center; gap:12px; }
.range { flex:1; accent-color:var(--accent); min-height:auto; padding:0; border:0; }
.range:focus { box-shadow:none; }
.range-v { width:44px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.save-bar { display:flex; align-items:center; gap:12px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); min-height:56px; }
.save-st { font-size:13px; color:var(--text2); min-width:0; flex:1; }
.save-st.ok { color:var(--ok); }
.save-st.err { color:var(--bad); }

/* ---------- Донаты ---------- */
.nowallet { border-color:var(--accent); background:linear-gradient(90deg, var(--accent-soft), transparent 70%), var(--card); margin-bottom:12px; }
.nowallet-in { display:flex; align-items:center; gap:16px; }
.nowallet-i { width:48px; height:48px; flex:none; border-radius:14px; display:grid; place-items:center; font-size:24px; background:var(--card); border:1px solid var(--line); }
.nowallet h2 { margin-bottom:4px; }
.nowallet p { margin:0; font-size:13px; }
.don-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.don-top-l { min-width:0; }
.don-top-l .label { color:var(--text2); font-weight:500; margin-bottom:4px; }
.my-page { font-size:15px; font-weight:600; color:var(--text); overflow-wrap:anywhere; }
.don-stats { margin-top:6px; font-size:13px; color:var(--text2); min-height:1.45em; }
.don-top-r { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.don-head-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.don-head-row h2 { margin:0; }
.don-head-row .live { margin-left:auto; }
.seg { display:inline-flex; padding:3px; border-radius:18px; background:var(--chip); gap:2px; }
.seg-b { border:0; background:transparent; color:var(--text2); font-size:13px; font-weight:500; height:28px; padding:0 12px; border-radius:14px; cursor:pointer; }
.seg-b[aria-pressed=true] { background:var(--card); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.12); }
.don-top-l .row { gap:8px; }
.onair { margin-bottom:4px; }
.unm { border-color:var(--warn); margin-top:12px; }
.unm h2 { margin:0; }
.unm > p { margin:6px 0 0; }
.unm-list { list-style:none; margin:8px 0 0; padding:0; }
.unm-row { display:grid; grid-template-columns:150px minmax(0, 1fr); gap:16px; padding:12px 0; border-top:1px solid var(--line); }
.unm-sum { display:flex; flex-direction:column; gap:2px; }
.unm-sum b { font-size:17px; }
.unm-main { display:grid; gap:8px; min-width:0; }
.unm-tx { margin-left:8px; }
.unm-dispute { margin:0; font-size:13px; color:var(--warn); }
.unm-sel { min-height:32px; padding:4px 8px; font-size:13px; }
.don-card { margin-top:12px; }
.live { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text2); min-width:200px; justify-content:flex-end; }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); animation:livep 2s ease-in-out infinite; }
.live.off .live-dot { background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft); animation:none; }
@keyframes livep { 50% { opacity:.45; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation:none; } }

.dlist { list-style:none; margin:0; padding:0; }
.don { display:grid; grid-template-columns:150px minmax(0, 1fr) auto; gap:16px; align-items:start; padding:14px 4px; border-bottom:1px solid var(--line); }
.don:last-child { border-bottom:0; }
.don.fresh { animation:fresh 2.4s ease-out; }
@keyframes fresh { from { background:var(--accent-soft); } to { background:transparent; } }
.don-sum { display:flex; flex-direction:column; gap:2px; min-width:0; }
.don-sum b { font-size:20px; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.don-coin { font-size:12px; color:var(--text2); overflow-wrap:anywhere; }
.don-net { font-size:11.5px; color:var(--text2); }
.don.st-expired .don-sum b, .don.st-pending .don-sum b { color:var(--text2); }
.don-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.don-name { font-weight:600; font-size:15px; margin-right:2px; overflow-wrap:anywhere; }
.don-time { font-size:12px; color:var(--text2); margin-left:auto; white-space:nowrap; }
.don-msg { margin:6px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; }
.don-msg.empty { color:var(--text2); font-style:italic; font-size:13px; }
.don-note { display:block; margin-top:4px; font-size:12px; color:var(--warn); }
.don-acts { display:flex; flex-direction:column; gap:6px; align-items:stretch; min-width:120px; }
.dempty { text-align:center; padding:40px 12px; }
.dempty-t { font-size:16px; font-weight:600; margin-bottom:4px; }
#p-donations .btn.block { margin-top:12px; }

.soon { text-align:center; padding:48px 16px; }
.soon-i { font-size:40px; display:block; margin-bottom:8px; }

/* ---------- Оверлей ---------- */
.ov-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:12px; align-items:start; }
.ov-col > .card + .card { margin-top:12px; }
.ov-side { position:sticky; top:72px; }
.ov-link { margin-top:4px; }
.ov-link-acts { margin-top:10px; }
.ov-link-acts:empty { display:none; }
.howto { margin:0; padding-left:20px; display:grid; gap:6px; }
.howto li { padding-left:2px; }
.ov-stage { position:relative; width:100%; aspect-ratio:4 / 3; overflow:hidden; border-radius:var(--r-sm); margin-top:6px;
  background-color:#1c1c1f; background-image:linear-gradient(45deg, #26262a 25%, transparent 25%, transparent 75%, #26262a 75%), linear-gradient(45deg, #26262a 25%, transparent 25%, transparent 75%, #26262a 75%);
  background-size:24px 24px; background-position:0 0, 12px 12px; }
.ov-frame { position:absolute; left:0; top:0; width:800px; height:600px; border:0; transform-origin:0 0; background:transparent; pointer-events:none;
  color-scheme:light; }   /* как у страницы оверлея — иначе в тёмной теме браузер подкладывает под рамку белый фон */
.ov-empty { position:absolute; inset:0; display:grid; place-items:center; margin:0; padding:16px; text-align:center; color:#bbb; }
.ov-prev-acts { margin-top:12px; }
.ov-prev h2 { margin:0; }

/* ---------- Страница ---------- */
.pg-link { display:flex; gap:20px; align-items:center; }
.pg-link-l { flex:1; min-width:0; }
.pg-link .copy { margin-top:4px; }
.pg-acts { margin-top:10px; }
.pg-qr { width:168px; flex:none; padding:8px; border-radius:var(--r); background:#fff; border:1px solid var(--line); }
.pg-qr .qr { border-radius:0; }

/* ---------- Безопасность ---------- */
.sec-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:12px; align-items:start; }
.sec-col > .card + .card { margin-top:12px; }
.sec-h { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.sec-h h2 { margin:0; }
.sec-card > p { font-size:13.5px; }
.sec-acts { margin-top:12px; }
.totp-setup { display:grid; grid-template-columns:180px minmax(0, 1fr); gap:18px; align-items:start; }
.totp-qr { padding:8px; background:#fff; border-radius:var(--r-sm); border:1px solid var(--line); }
.totp-steps > * + * { margin-top:10px; }
.totp-steps p { margin:0; }
.totp-secret .copy-v { font-size:12px; letter-spacing:.04em; }
.codes { list-style:none; margin:0; padding:12px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px 16px; background:var(--chip); border-radius:var(--r-sm); font-size:15px; counter-reset:c; }
.codes li { counter-increment:c; }
.codes li::before { content:counter(c) ". "; color:var(--text2); font-size:12px; display:inline-block; width:24px; }
.klist, .slist { list-style:none; margin:10px 0 0; padding:0; }
.krow, .srow { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.k-i, .s-i { width:36px; height:36px; flex:none; border-radius:10px; background:var(--chip); display:grid; place-items:center; font-size:17px; }
.k-name, .s-name { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.k-name b, .s-name b { overflow-wrap:anywhere; }

@media (max-width:980px) {
  .ov-grid { grid-template-columns:minmax(0, 1fr); }
  .ov-side { position:static; grid-row:1; }
  .sec-grid { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:760px) {
  .my-link { display:none; }
  .who-nick { max-width:120px; }
  .app-tabs { margin:0 -12px 14px; padding:0 8px; }
  .app-tabs .tab { padding:10px 8px; font-size:13.5px; }
  .tab-i { display:none; }
  .panel { min-height:320px; }
  .nowallet-in { flex-direction:column; align-items:flex-start; gap:10px; }
  .nowallet-in .btn { width:100%; }
  .don-top { flex-direction:column; align-items:stretch; }
  .don-top-r { justify-content:stretch; }
  .don-top-r .btn { flex:1; padding:0 10px; }
  .live { min-width:0; width:100%; justify-content:flex-start; }
  .don-head-row .live { margin-left:0; }
  .unm-row { grid-template-columns:minmax(0, 1fr); gap:8px; }
  .unm-sum { flex-direction:row; align-items:baseline; gap:8px; }
  .don { grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"main main" "sum acts"; gap:8px 12px; padding:12px 0; }
  .don-main { grid-area:main; }
  .don-sum { grid-area:sum; flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:2px 8px; }
  .don-sum b { font-size:17px; }
  .don-acts { grid-area:acts; flex-direction:row; min-width:0; align-self:center; }
  .don-time { margin-left:0; width:100%; order:9; }
  .two { grid-template-columns:minmax(0, 1fr); gap:0; }
  .two .field + .field { margin-top:14px; }
  .pg-link { flex-direction:column-reverse; align-items:stretch; }
  .pg-qr { width:180px; margin:0 auto; }
  .totp-setup { grid-template-columns:minmax(0, 1fr); }
  .totp-qr { width:180px; margin:0 auto; }
  .codes { font-size:14px; gap:6px 10px; }
  .save-bar .btn { flex:none; }
}