/* Тёмная «петрольная» тема. Роли цвета: лёд — выбранное, жёлтый — действие и цена,
   зелёный — успех, красный — опасность. Отступы и направления — логические
   (inline-start/end), чтобы страница зеркалилась для арабского. */
:root {
  color-scheme: dark;
  --bg: #0a1519;
  --surface: #0f2026;
  --surface-2: #142a32;
  --line: #21414b;
  --line-soft: #1a3640;
  --text: #e8f1f2;
  --muted: #8ea7ae;
  --faint: #62808a;
  --sel: #d7f0ec;
  --sel-ink: #0b2a2e;
  --link: #9fe3d8;
  --accent: #f4d35e;
  --accent-hi: #ffe07a;
  --accent-ink: #231d02;
  --good: #58d6a6;
  --bad: #ff6f61;
  --warn: #ffb057;
  --radius: 14px;
  --radius-s: 10px;
  --z-menu: 20;
  --z-toast: 30;
  --sans: "Manrope", system-ui, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  background: radial-gradient(1100px 520px at 50% -180px, #14323b 0%, rgba(20, 50, 59, 0) 70%) no-repeat, var(--bg);
  color: var(--text);
  font: 500 15px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; border-radius: 6px; }

/* ---------------------------------------------------------------- шапка */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid var(--line-soft);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none;
         font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
/* знак — зелёный веник (tools/make_logo.py); тот же рисунок в иконке вкладки */
.brand-mark { width: 24px; height: 24px; flex: none; }
/* пояснение к имени — часть названия, на всех языках одно; в узком окне уступает место кнопкам */
.brand-tag { padding-inline-start: 10px; border-inline-start: 1px solid var(--line-soft); color: var(--muted);
             font-weight: 500; font-size: 13px; letter-spacing: 0; white-space: nowrap; }
@media (max-width: 900px) { .brand-tag { display: none; } }
.top-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.user-box { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.credits { color: var(--muted); text-decoration: none; font-size: 14px; }
.credits b { color: var(--accent); font-size: 17px; font-weight: 800; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.pill.on::before { background: var(--good); box-shadow: 0 0 0 3px rgba(88, 214, 166, .18); }
.pill.off::before { background: var(--warn); }

.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; background: transparent;
            color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-s); font-size: 13px; }
.lang-btn:hover { border-color: var(--faint); }
.lang-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: var(--z-menu);
             display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 2px; padding: 6px;
             background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s);
             box-shadow: 0 8px 8px rgba(3, 12, 15, .45); }
.lang-menu button { text-align: start; padding: 8px 10px; background: transparent; color: var(--text);
                    border-radius: 7px; font-weight: 500; font-size: 14px; }
.lang-menu button:hover { background: var(--line-soft); }
.lang-menu button[aria-selected="true"] { background: var(--sel); color: var(--sel-ink); font-weight: 700; }

/* --------------------------------------------------------------- каркас */
main { max-width: 940px; margin: 0 auto; padding: 22px 16px 64px; display: grid; gap: 16px; }
body[data-view="scan"] main, body[data-view="admin"] main { max-width: 1180px; }
section { display: grid; gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
        padding: 22px; min-width: 0; }
.card.accent { border-color: var(--line); background: var(--surface-2); }
h1 { font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; text-wrap: balance; }
h2 { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
p { margin: 0 0 12px; }
.lead { color: var(--muted); margin: 0 0 16px; max-width: 65ch; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 13px; margin-top: 6px; }
.hint:empty { display: none; }
.warn { color: var(--warn); }
.error { color: var(--bad); font-size: 14px; }
.error:empty { display: none; }
.error a { color: var(--link); }

/* вкладки «Балансы | NFT»: один переключатель, выбранная — «лёд» */
.tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; border: 1px solid var(--line);
        border-radius: 999px; background: var(--bg); }
.tab { padding: 8px 20px; border-radius: 999px; color: var(--muted); font-weight: 700; font-size: 14px;
       text-decoration: none; transition: background-color .15s var(--ease), color .15s var(--ease); }
.tab:hover { color: var(--text); }
.tab.on { background: var(--sel); color: var(--sel-ink); }

/* ---------------------------------------------------------- поля и кнопки */
textarea, input[type=text], input[type=password], select {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: 11px 13px;
  font: 13px/1.55 var(--mono); transition: border-color .15s var(--ease);
}
select { width: auto; font: 500 14px var(--sans); }
textarea { min-height: 170px; resize: vertical; direction: ltr; }
textarea::placeholder, input::placeholder { color: var(--faint); font-family: var(--sans); }
textarea:hover, input[type=text]:hover { border-color: var(--faint); }
textarea:focus, input:focus, select:focus { outline: none; border-color: var(--sel); }

button, .button {
  font: 700 14px/1 var(--sans); cursor: pointer; border-radius: var(--radius-s); padding: 11px 16px;
  border: 1px solid transparent; text-decoration: none; display: inline-block; white-space: nowrap;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease),
              transform .1s var(--ease);
}
button:active, .button:active { transform: translateY(1px); }
.primary { background: var(--accent); color: var(--accent-ink); }
.primary:hover { background: var(--accent-hi); }
.primary:disabled { opacity: .5; cursor: default; }
.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.ghost:hover { border-color: var(--faint); }
.ghost.danger { color: var(--bad); }
.link { background: none; border: none; padding: 0; color: var(--link); font-weight: 600; font-size: 13px; }
.link:hover { text-decoration: underline; }
button.small, .button.small { padding: 8px 12px; font-size: 13px; }
.big-btn { padding: 15px 30px; font-size: 16px; }

.row { display: flex; gap: 12px; align-items: center; margin-top: 16px; }
.row.spread { justify-content: space-between; }
.row.wrap, .row.spread { flex-wrap: wrap; }
.row.nomargin, .row .row { margin-top: 0; }
.row .row { flex-wrap: wrap; }
.spacer { flex: 1; }
input.grow { flex: 1; min-width: 200px; width: auto; }
.row > input[type=text] { width: 200px; }
.row > input.grow { width: auto; }

/* ---------------------------------------------------- группы и «таблетки» */
.group { margin-top: 22px; }
.dust-row { margin-top: 12px; }
.group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; min-height: 22px; }
.label { color: var(--muted); font-size: 13px; font-weight: 600; }
.count { color: var(--text); font-weight: 700; margin-inline-start: 4px; }
.tag { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; color: var(--muted);
       background: var(--line-soft); white-space: nowrap; }
.tag.good { color: var(--good); background: rgba(88, 214, 166, .12); }
.result { font-weight: 700; color: var(--accent); }
.result.error { color: var(--bad); font-size: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { display: inline-flex; cursor: pointer; user-select: none; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip > span {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px;
  font-size: 13.5px; font-weight: 600; color: var(--muted); background: transparent;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.chip:hover > span { border-color: var(--faint); color: var(--text); }
.chip:active > span { transform: scale(.97); }
.chip input:checked + span { color: var(--sel-ink); background: var(--sel); border-color: var(--sel); }
.chip input:focus-visible + span { outline: 2px solid var(--sel); outline-offset: 2px; }
.chip.off { cursor: not-allowed; }
.chip.off > span, .chip.off:hover > span { opacity: .42; border-style: dashed; color: var(--muted); border-color: var(--line); }
.chip.ends > span { border-color: var(--bad); color: var(--bad); }
.chip.ends input:checked + span { background: var(--bad); border-color: var(--bad); color: #2a0703; }
.chip-timer { font: 700 11px/1 var(--mono); }
.chip small { font-size: 11.5px; font-weight: 700; opacity: .8; }

/* значок «?» с пояснением: показывается при наведении и по нажатию (на телефоне) */
.chips.tips { position: relative; }
.tip { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent;
       color: var(--muted); font: 700 12px/1 var(--sans); cursor: help; }
.tip:hover, .tip:focus-visible { color: var(--text); border-color: var(--faint); }
.tip::after { content: attr(data-tip); position: absolute; inset-inline-start: 0; top: calc(100% + 8px);
              width: max-content; max-width: min(380px, 100%); padding: 10px 13px; border-radius: var(--radius-s);
              background: var(--sel); color: var(--sel-ink); font: 600 13px/1.45 var(--sans); text-align: start;
              white-space: normal; z-index: var(--z-menu); opacity: 0; visibility: hidden;
              transition: opacity .15s var(--ease), visibility .15s; pointer-events: none; }
.tip:hover::after, .tip:focus::after { opacity: 1; visibility: visible; }

/* свой вариант — та же «таблетка», только с полем ввода */
.own { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px;
       padding: 0 12px; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.own:hover { border-color: var(--faint); }
.own:focus-within { border-color: var(--sel); }
.own-sign { color: var(--muted); font-weight: 700; font-size: 13.5px; }
.own-input, .own-input[type=text] { width: 76px; padding: 7px 2px; border: none; background: transparent;
             color: var(--text); font: 600 13.5px var(--sans); }
.own-input:focus { outline: none; }
.own.on { background: var(--sel); border-color: var(--sel); }
.own.on .own-sign, .own.on .own-input { color: var(--sel-ink); }

.closing { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 14px;
           border-radius: var(--radius-s); color: var(--bad); background: rgba(255, 111, 97, .09);
           border: 1px solid rgba(255, 111, 97, .45); font-size: 14px; font-weight: 600; }
.closing b { font: 700 14px var(--mono); color: #ffd5cf; }
.closing .link { color: #ffd5cf; text-decoration: underline; margin-inline-start: auto; }

/* ------------------------------------------------- бесплатные кредиты */
.free { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
        padding: 12px 16px; border-radius: var(--radius); border: 1px solid rgba(244, 211, 94, .35);
        background: rgba(244, 211, 94, .07); }
.free b { color: var(--accent); }

/* -------------------------------------------------- цена и кнопка запуска */
.ticket { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; padding: 16px 18px;
          background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius); }
.ticket-price .label { display: block; margin-bottom: 2px; }
.ticket-total { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--accent); }
.ticket-balance { margin-inline-start: auto; font-size: 14px; color: var(--muted); text-align: end; }
.ticket-balance.short { color: var(--bad); }
#form-error { margin-top: 10px; }
/* суммы, счётчики и адреса читаются слева направо в любом языке */
#cost-usd, #chains-count, #closing-timer, .result, .tag, #inv-amount, #inv-address, #pay-packs, #dust label,
.own, #user-credits, .holder, .tile-meta { direction: ltr; unicode-bidi: isolate; }
#cost-usd, .tag, #user-credits { display: inline-block; }

/* ----------------------------------------------------------- результат */
.bar { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; margin: 16px 0 10px; }
#bar-fill { height: 100%; width: 100%; background: var(--accent); transform: scaleX(0);
            transform-origin: left; transition: transform .4s var(--ease); }
[dir=rtl] #bar-fill { transform-origin: right; }
.status { font-size: 14px; font-weight: 600; }
.totals { font-size: 16px; }

.table-wrap { overflow-x: auto; margin-top: 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-s); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 8px 11px; text-align: start; white-space: nowrap; border-bottom: 1px solid var(--line-soft); }
th { position: sticky; top: 0; background: var(--surface-2); color: var(--muted); font-weight: 700; user-select: none; }
#rows th { cursor: pointer; }
#rows th:hover { color: var(--text); }
th.sorted::after { content: " ▾"; color: var(--accent); }
th.sorted.asc::after { content: " ▴"; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: end; }
td.mono, .mono { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; }
td.mono { font-size: 12px; }
td.copy { cursor: copy; }
td.copy:hover { color: var(--link); }
tr.native td { background: rgba(215, 240, 236, .045); }
td.low { color: var(--warn); }

/* ------------------------------------------------------ результат NFT */
.nft-notes { display: grid; gap: 4px; margin-top: 10px; font-size: 13px; color: var(--warn); }
.nft-notes:empty { display: none; }
.nft-notes .link { margin-inline-start: 8px; }
#nft-rows th { cursor: pointer; }
#nft-rows th:hover { color: var(--text); }
tr.nft-row { cursor: pointer; }
tr.nft-row:hover td { background: rgba(215, 240, 236, .045); }
tr.nft-row.open td { background: var(--surface-2); border-bottom-color: transparent; }
.coll { display: flex; align-items: center; gap: 10px; min-width: 200px; max-width: 340px; }
.coll-name { overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 13.5px; }
.thumb { width: 32px; height: 32px; flex: none; border-radius: 8px; object-fit: cover; background: var(--line-soft); }
.thumb.blank { display: inline-block; }
td.value { color: var(--accent); font-weight: 700; }
tr.nft-detail td { white-space: normal; background: var(--surface-2); padding: 4px 14px 18px; }
/* раскрытая коллекция не шире окна: таблица на телефоне прокручивается вбок, а плитки — нет */
tr.nft-detail td > div { position: sticky; inset-inline-start: 14px; width: min(100%, calc(min(100vw, 1180px) - 96px)); }
.nft-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 13px; }
.holders { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.holder { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent;
          color: var(--muted); font: 500 12px/1 var(--mono); cursor: copy;
          max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.holder:hover { color: var(--text); border-color: var(--faint); }
.holder b { color: var(--text); font-weight: 700; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; margin-top: 14px; }
.tile { display: grid; gap: 3px; padding: 6px 6px 8px; border: 1px solid var(--line-soft); border-radius: var(--radius-s);
        background: var(--surface); color: var(--text); text-decoration: none; font-size: 12px; min-width: 0;
        transition: border-color .15s var(--ease); }
.tile:hover { border-color: var(--faint); }
.tile-img { display: block; width: 100%; aspect-ratio: 1; border-radius: 7px; object-fit: cover; background: var(--line-soft); }
.tile-id { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-rank { color: var(--accent); font-weight: 700; }
.tile-meta { color: var(--muted); font: 500 11px/1.3 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-sale { color: var(--good); font-weight: 600; }
.tiles-more { margin-top: 12px; }

/* ----------------------------------------------------------- сбор */
.keys { display: flex; align-items: center; gap: 10px; color: var(--good); }
textarea.short { min-height: 96px; }
input.wide { width: 100%; font-size: 14px; }
th.pick, td.pick { width: 34px; padding-inline-end: 0; }
td.pick input, th.pick input { width: 16px; height: 16px; accent-color: var(--sel); cursor: pointer; }
tr.unpicked td:not(.pick) { opacity: .45; }
#sw-rows td.st { white-space: normal; min-width: 180px; }
#sw-rows td.st.ok { color: var(--good); font-weight: 700; }
#sw-rows td.st.bad { color: var(--bad); }
#sw-rows td.st.skip { color: var(--muted); }
#sw-rows td.st.busy { color: var(--accent); }
.confirm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px;
           border: 1px solid rgba(244, 211, 94, .45); border-radius: var(--radius-s); background: rgba(244, 211, 94, .07);
           font-weight: 700; }
#sw-confirm-text { overflow-wrap: anywhere; }
#sw-result { margin-top: 12px; }

/* -------------------------------------------------------------- вход */
.steps { margin: 6px 0 0; padding-inline-start: 20px; display: grid; gap: 10px; }

/* ------------------------------------------------------------ оплата */
.send { display: grid; gap: 14px; }
.send-row { display: grid; grid-template-columns: 130px 1fr; column-gap: 12px; align-items: baseline; }
.send-row .hint { grid-column: 2; margin-top: 3px; }
.send-val { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.big { font-size: 22px; color: var(--accent); }
.addr { font-size: 15px; overflow-wrap: anywhere; }
.notes { margin: 16px 0 0; padding-inline-start: 18px; color: var(--muted); font-size: 13.5px; display: grid; gap: 5px; }
.notes:empty { display: none; }
.more { margin-top: 10px; font-size: 13px; color: var(--muted); }
.more summary { cursor: pointer; color: var(--link); font-weight: 600; width: fit-content; }
.more .notes { margin-top: 8px; }
.pay-status { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); display: grid; gap: 10px; }
.pay-paid:empty, .pay-pending:empty { display: none; }
.pay-paid { padding: 11px 14px; border-radius: var(--radius-s); font-weight: 700; color: var(--good);
            background: rgba(88, 214, 166, .1); border: 1px solid rgba(88, 214, 166, .55); }
.pay-pending { padding: 11px 14px; border-radius: var(--radius-s); font-weight: 600; color: var(--warn);
               background: rgba(255, 176, 87, .09); border: 1px solid rgba(255, 176, 87, .5); }
.pending-item { padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.pending-item:last-child { border-bottom: none; }

/* -------------------------------------------------- кабинет владельца */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.stat { border: 1px solid var(--line-soft); border-radius: var(--radius-s); padding: 10px 12px; background: var(--bg); }
.stat-value { font-size: 18px; font-weight: 800; margin-top: 2px; }

.wallet-list { margin-top: 14px; display: grid; gap: 8px; }
.wallet-list textarea { min-height: 200px; }

.toast { position: fixed; inset-inline: 0; margin-inline: auto; width: fit-content; max-width: calc(100vw - 32px);
         bottom: 24px; background: var(--sel); color: var(--sel-ink); font-weight: 700;
         padding: 11px 18px; border-radius: var(--radius-s); font-size: 14px; z-index: var(--z-toast); }

@media (max-width: 720px) {
  .card { padding: 16px; }
  h1 { font-size: 22px; }
  .row { flex-wrap: wrap; }
  .ticket { gap: 12px; }
  .ticket-balance { margin-inline-start: 0; text-align: start; flex-basis: 100%; order: 3; }
  .ticket .big-btn { flex: 1 1 100%; order: 4; }
  .send-row { grid-template-columns: 1fr; }
  .send-row .hint { grid-column: 1; }
  .user-name { display: none; }
  .pill { font-size: 0; gap: 0; }
  .top { padding: 10px 14px; }
  .lang-menu { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}