/* Palette adapted to shared PayPage tokens by the operator acceptance update of 2026-10-06. */ /* =========================================================================== * ОБМЕННИК — CSS ИЗ МОКАПА M1 (артефакт 59a345b6), перенесён ДОСЛОВНО. * * ⚠ ЭТО НЕ «ВДОХНОВЛЕНО МОКАПОМ», А ОН САМ. Первую попытку я сделал иначе — * взял из мокапа палитру и наложил на свою разметку, — и получил, по словам * оператора, «два разных сайта». Токены без структуры не дают того экрана, * который согласовали. * * ⚠ И ВТОРОЕ, ЧТО СТОИЛО ЖИВОЙ ПОЛОМКИ: у мокапа обработчики ИНЛАЙНОВЫЕ * (`onclick="go('wallet')"`), а наш CSP держит `script-src 'self'` без * `unsafe-inline` и режет их МОЛЧА — кнопки выглядят рабочими и не делают * ничего. Поэтому переносится СТИЛЬ, а поведение вешает JS. * ========================================================================= */ :root{ --bg:var(--pay-bg); --bg2:var(--pay-bg-inset); --panel:var(--pay-surface); --panel2:var(--pay-surface-low); --line:var(--pay-line); --line2:var(--pay-line-strong); --teal:var(--pay-accent); --teal-dim:var(--pay-accent-fill); --green:var(--pay-mint); --amber:var(--pay-amber-text); --red:var(--pay-red); --tx:var(--pay-text); --mut:var(--pay-text-muted); --faint:var(--pay-text-quiet); --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:"SF Mono",ui-monospace,"Roboto Mono",Menlo,Consolas,monospace; } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.5} .wrap{max-width:1180px;margin:0 auto;padding:0 22px} h1,h2,h3{margin:0;letter-spacing:-.02em;text-wrap:balance} .num{font-variant-numeric:tabular-nums;font-family:var(--mono)} .eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);font-weight:600} .mut{color:var(--mut)} .faint{color:var(--faint)} button{font-family:inherit} .amb{position:fixed;inset:0;z-index:0;pointer-events:none; background:radial-gradient(760px 440px at 80% -8%,color-mix(in srgb,var(--pay-accent) 13%,transparent),transparent 60%),radial-gradient(620px 400px at 6% 6%,color-mix(in srgb,var(--pay-mint) 6%,transparent),transparent 60%)} .content{position:relative;z-index:1} /* NAV */ header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--pay-bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} nav{display:flex;align-items:center;justify-content:space-between;padding:15px 0} .brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:18px;letter-spacing:-.02em;cursor:pointer} .logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(150deg,var(--teal),var(--teal-dim));position:relative} .logo::after{content:"";position:absolute;inset:8px 8px auto 8px;height:5px;border-radius:3px;background:var(--pay-bg);box-shadow:0 8px 0 var(--pay-bg)} .navlinks{display:flex;gap:6px} .navlinks button{background:none;border:0;color:var(--mut);font-size:14px;font-weight:500;padding:8px 13px;border-radius:9px;cursor:pointer} .navlinks button:hover{color:var(--tx);background:var(--panel2)} .navlinks button.on{color:var(--teal);background:color-mix(in srgb,var(--pay-accent) 8%,transparent)} .navright{display:flex;gap:10px;align-items:center} .btn-ghost{background:none;border:1px solid var(--line2);color:var(--tx);font-size:13px;font-weight:600;padding:9px 15px;border-radius:10px;cursor:pointer} .btn-ghost:hover{border-color:var(--teal);color:var(--teal)} /* * ⚠ ВЫБРАННОЕ СОСТОЯНИЕ ОБЯЗАНО БЫТЬ ВИДНО. Скрипт вешает `.on` на выбранный * сохранённый счёт, а правила под это имя не было — выбор происходил и никак * не отображался, то есть человек не мог убедиться, куда попросил заплатить. * Третий за день «голый класс», рождённый скриптом: сторож разметки их не * видит, потому что в HTML их нет. */ .btn-ghost.on{border-color:var(--teal);color:var(--teal);background:color-mix(in srgb,var(--pay-accent) 10%,transparent)} /* Ссылка, выглядящая кнопкой: без этого `u-mt24` на не работает — вертикальные поля к строчному элементу не применяются. */ .u-inline-block{display:inline-block;text-decoration:none} /* Гейты подключения и требования к ключу — блоком, чтобы список читался целиком, а не растворялся между полями формы. */ .gates{margin-top:12px;padding-top:10px;border-top:1px solid var(--line,var(--pay-line))} .btn-fill{border:0;color:var(--pay-accent-ink);font-size:13px;font-weight:700;padding:10px 16px;border-radius:10px;cursor:pointer;background:linear-gradient(120deg,var(--green),var(--teal))} /* Кнопка-ссылка («Добавить в Chrome»): у `a` нет ни inline-block, ни сброса подчёркивания, и без них заливка кнопки рвётся по строке. */ a.btn-fill{display:inline-block;text-decoration:none} .view{display:none;animation:fade .3s ease} .view.on{display:block} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* HERO / SECTION 1 */ .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding:52px 0 34px} .hero h1{font-size:50px;font-weight:750;line-height:1.03} .hero h1 b{color:var(--teal);font-weight:750} .hero p{color:var(--mut);font-size:17px;max-width:440px;margin:20px 0 26px} .pills{display:flex;gap:10px;flex-wrap:wrap} .pill{font-size:12.5px;color:var(--mut);border:1px solid var(--line);background:var(--panel2);border-radius:999px;padding:7px 13px;display:flex;align-items:center;gap:7px} .dot{width:6px;height:6px;border-radius:50%;background:var(--green)} /* CALCULATOR */ .calc{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line2);border-radius:22px;padding:8px;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)} .calc-inner{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:20px} .tabs{display:flex;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:16px} .tab{flex:1;text-align:center;font-size:13.5px;font-weight:600;color:var(--mut);padding:9px;border-radius:9px;cursor:pointer;border:0;background:none} .tab.on{background:linear-gradient(180deg,color-mix(in srgb,var(--pay-accent) 16%,transparent),color-mix(in srgb,var(--pay-accent) 6%,transparent));color:var(--teal)} .fx{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px} .fx+.fx{margin-top:10px} .fx .lab{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.14em} .fx input{background:none;border:0;color:var(--tx);font-size:25px;font-weight:700;font-family:var(--mono);width:100%;padding:3px 0 0;outline:none} .curbtn{display:flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line2);border-radius:11px;padding:7px 11px 7px 8px;font-weight:600;font-size:14px;white-space:nowrap;cursor:pointer;min-width:150px} .curbtn:hover{border-color:var(--teal)} .curbtn .nm{display:flex;flex-direction:column;line-height:1.15;text-align:left} .curbtn .nm small{font-size:10.5px;color:var(--faint);font-weight:500} .curbtn .arw{margin-left:auto;color:var(--faint);font-size:11px} .swap{display:flex;justify-content:center;margin:-11px 0;position:relative;z-index:2} .swap button{width:34px;height:34px;border-radius:10px;background:var(--panel);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--teal);cursor:pointer;font-size:15px} .rateline{display:flex;align-items:center;justify-content:space-between;margin:14px 2px;font-size:13px;color:var(--mut)} .rateline b{color:var(--tx);font-weight:600} .live{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-size:12px} .fld{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0 14px;display:flex;align-items:center;gap:10px;margin-bottom:12px} .fld input{background:none;border:0;color:var(--tx);font-size:14px;padding:13px 0;width:100%;outline:none} .fld input::placeholder{color:var(--faint)} .cta{width:100%;border:0;border-radius:13px;padding:15px;font-size:15px;font-weight:700;color:var(--pay-accent-ink);background:linear-gradient(120deg,var(--green),var(--teal));cursor:pointer} .fine{text-align:center;font-size:11.5px;color:var(--faint);margin-top:11px} /* logo marks */ .mk{width:24px;height:24px;border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px} /* CURRENCY PICKER */ .overlay{position:fixed;inset:0;z-index:60;background:rgba(4,7,12,.72);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:80px 20px} .overlay.on{display:flex} /* ⚠ `overflow:hidden` ОБРЕЗАЛ СОДЕРЖИМОЕ БЕЗ ПРОКРУТКИ. Живьём 02.09: в форму подключения добавились требования к ключу, окно переросло экран, и нижняя часть — включая текст ОШИБКИ — стала недоступна: прокрутить нельзя, а скрытое выглядит как отсутствующее. Высота ограничивается видимой областью, переполнение прокручивается. */ .picker{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line2);border-radius:18px;max-height:88vh;overflow-y:auto;box-shadow:0 40px 90px -30px var(--pay-black);animation:pop .22s ease} @keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}} .pk-head{padding:16px 18px 12px;border-bottom:1px solid var(--line)} .pk-head .row{display:flex;align-items:center;justify-content:space-between} .pk-head h3{font-size:16px} .pk-x{background:none;border:0;color:var(--faint);font-size:20px;cursor:pointer;line-height:1} .search{margin-top:12px;background:var(--bg2);border:1px solid var(--line);border-radius:11px;display:flex;align-items:center;gap:9px;padding:0 12px} .search input{background:none;border:0;color:var(--tx);padding:11px 0;width:100%;outline:none;font-size:14px} .search input::placeholder{color:var(--faint)} .chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px} .fchip{font-size:12px;color:var(--mut);border:1px solid var(--line2);background:var(--panel2);border-radius:999px;padding:6px 12px;cursor:pointer} .fchip.on{color:var(--teal);border-color:var(--teal);background:color-mix(in srgb,var(--pay-accent) 8%,transparent)} .pk-list{max-height:340px;overflow-y:auto;padding:8px} .opt{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;cursor:pointer} .opt:hover{background:var(--panel2)} .opt .mk{width:30px;height:30px;border-radius:9px;font-size:14px} .opt .nm{font-weight:600;font-size:14px} .opt .nm small{display:block;color:var(--faint);font-size:11.5px;font-weight:500} .opt .tick{margin-left:auto;color:var(--teal);opacity:0;font-size:14px} .opt.sel .tick{opacity:1} .opt.hide{display:none} .pk-empty{text-align:center;color:var(--faint);font-size:13px;padding:26px} /* generic section */ .sec{padding:64px 0} .sec-h{text-align:center;max-width:640px;margin:0 auto 34px} .sec-h h2{font-size:34px;font-weight:740} .sec-h p{color:var(--mut);font-size:16px;margin-top:10px} .cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .cardbox{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px} .il{height:150px;border-radius:14px;border:1px solid var(--line2);position:relative;overflow:hidden;background:radial-gradient(120px 90px at 70% 20%,color-mix(in srgb,var(--pay-accent) 18%,transparent),transparent 60%),linear-gradient(160deg,var(--pay-surface),var(--pay-bg-inset));display:flex;align-items:center;justify-content:center} .il .cube{width:70px;height:70px;border-radius:16px;background:linear-gradient(150deg,var(--teal),var(--teal-dim));transform:rotate(45deg) skew(-6deg,-6deg)} .il .cube.g{background:linear-gradient(150deg,var(--green),var(--pay-mint))} .il .cube.a{background:linear-gradient(150deg,var(--amber),var(--pay-amber))} .il .tag{position:absolute;bottom:8px;right:10px;font-size:10px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase} .cardbox h3{font-size:18px} .cardbox p{color:var(--mut);font-size:13.5px;margin:0} .stepno{width:26px;height:26px;border-radius:8px;background:color-mix(in srgb,var(--pay-accent) 12%,transparent);color:var(--teal);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px} /* traders section */ .split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center} .il-big{height:320px;border-radius:20px;border:1px solid var(--line2);position:relative;overflow:hidden;background:radial-gradient(220px 160px at 30% 20%,color-mix(in srgb,var(--pay-mint) 16%,transparent),transparent 60%),radial-gradient(200px 160px at 80% 80%,color-mix(in srgb,var(--pay-accent) 14%,transparent),transparent 60%),linear-gradient(160deg,var(--pay-surface),var(--pay-bg));display:flex;align-items:center;justify-content:center;gap:18px} .il-big .cube{width:96px;height:96px} .kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px} .kpi .b{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px} .kpi .b .k{font-size:24px;font-weight:750} .kpi .b .v{font-size:12px;color:var(--mut);margin-top:3px} .ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:10px} .ul li{display:flex;gap:10px;font-size:14px;color:var(--mut)} .ul li b{color:var(--tx)} .ck{color:var(--teal);flex:none} /* footer */ footer{border-top:1px solid var(--line);margin-top:20px;padding:44px 0 40px} .foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px} .foot h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 12px} .foot a{display:block;color:var(--mut);font-size:13.5px;padding:4px 0;cursor:pointer} .foot a:hover{color:var(--tx)} .foot .co{color:var(--faint);font-size:12.5px;margin-top:12px;max-width:260px} .foot-bot{border-top:1px solid var(--line);margin-top:30px;padding-top:18px;display:flex;justify-content:space-between;color:var(--faint);font-size:12px;flex-wrap:wrap;gap:8px} /* generic page (rules/support) */ .page{padding:44px 0 30px} .page h1{font-size:38px;font-weight:740} .page .lead{color:var(--mut);font-size:16px;margin:12px 0 26px;max-width:620px} .doc{display:grid;grid-template-columns:220px 1fr;gap:28px} .toc{position:sticky;top:90px;align-self:start;display:flex;flex-direction:column;gap:4px} .toc button{background:none;border:0;text-align:left;color:var(--mut);font-size:13.5px;padding:8px 11px;border-radius:9px;cursor:pointer} .toc button:hover{background:var(--panel2);color:var(--tx)} .docblock{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:16px} .docblock h3{font-size:18px;margin-bottom:8px} .docblock p{color:var(--mut);font-size:14px;margin:0} .ph-line{height:9px;border-radius:5px;background:var(--line2);margin-top:9px} .ph-line.w70{width:70%} .ph-line.w90{width:90%} .ph-line.w50{width:50%} /* register */ .authwrap{max-width:440px;margin:36px auto;background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line2);border-radius:20px;padding:8px;box-shadow:0 40px 90px -40px var(--pay-black)} .auth{background:var(--bg2);border:1px solid var(--line);border-radius:15px;padding:26px} .auth h2{font-size:23px;font-weight:730} .auth .sub{color:var(--mut);font-size:14px;margin:8px 0 22px} .authtabs{display:flex;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:4px;margin-bottom:20px} .lab2{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:14px 0 6px} .inp{background:var(--panel);border:1px solid var(--line);border-radius:11px;display:flex;align-items:center;gap:10px;padding:0 13px} .inp input{background:none;border:0;color:var(--tx);padding:13px 0;width:100%;outline:none;font-size:14px} .inp .ic{color:var(--faint);font-size:13px;flex:none} .oauth{display:flex;gap:10px;margin:16px 0} .oauth button{flex:1;background:var(--panel);border:1px solid var(--line2);border-radius:11px;padding:11px;color:var(--tx);font-size:13px;font-weight:600;cursor:pointer} /* * ⚠ ОТКЛЮЧЁННАЯ КНОПКА ОБЯЗАНА ВЫГЛЯДЕТЬ ОТКЛЮЧЁННОЙ. Google и телефон у нас * не подключены; кнопка того же вида, что рабочая, читается как поломка — * человек жмёт и не понимает, почему ничего не произошло. */ .oauth button:disabled{opacity:.45;cursor:not-allowed;color:var(--mut)} .auth .line{font-size:12.5px;margin-top:12px} .auth .line.ok{color:var(--green)} .auth .line.bad{color:var(--red)} .divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px;margin:8px 0} .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)} .kycnote{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:12.5px;color:var(--mut);margin-top:16px} /* ⚠ КОЛОНКА СЕТКИ НЕ УЖЕ СВОЕГО СОДЕРЖИМОГО — и на 390 это выносило витрину за экран (scrollWidth 409). `1fr` это `minmax(auto, 1fr)`: одна длинная строка внутри держит колонку шире телефона, и страница едет горизонтально ВСЯ, а не в том месте, где она длинная. Тот же guard уже стоит в консоли (`.grid > *`), и причина та же: на десктопе запаса хватает, на телефоне — нет. */ .hero > *, .cols3 > *, .split > *, .kpi > *, .foot > *{min-width:0} @media(max-width:900px){ .hero{grid-template-columns:1fr;gap:26px;padding-top:30px} .hero h1{font-size:36px} .cols3{grid-template-columns:1fr} .split{grid-template-columns:1fr} .kpi{grid-template-columns:repeat(3,1fr)} .foot{grid-template-columns:1fr 1fr} .doc{grid-template-columns:1fr} .toc{position:static;flex-direction:row;flex-wrap:wrap} .navlinks{display:none} } /* Нижняя панель вкладок (M2). У мокапа она приклеена к рамке телефона, у нас — к окну: рамка это леса прототипа, а поведение переносится. */ .tabbar{display:none;position:fixed;bottom:0;left:0;right:0;background:color-mix(in srgb,var(--pay-bg) 92%,transparent);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:8px 4px calc(10px + env(safe-area-inset-bottom));z-index:40} .tabbar button{flex:1;background:none;border:0;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:600;cursor:pointer;padding:4px;font-family:inherit} .tabbar button .ic{font-size:20px;line-height:1} .tabbar button.on{color:var(--teal)} /* ⚠ ПОКАЗ ИДЁТ ПОСЛЕ БАЗОВОГО ПРАВИЛА, А НЕ В МЕДИАБЛОКЕ ВЫШЕ. Первая редакция включала панель в блоке `max-width:900`, который стоит РАНЬШЕ, — и базовое `display:none` перекрывало его по порядку источника: на телефоне панели не появлялось, хотя правило «показать» существовало. */ /* Липкая шапка (75 px) и нижняя панель на телефоне накрывали то, к чему ведёт фокус, якорь или scrollIntoView: заголовок формы «Пополнить» уезжал под шапку (WCAG 2.4.11). */ html{scroll-padding-top:88px} @media(max-width:900px){ html{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom))} .tabbar{display:flex} /* Место под панель, иначе она накрывает последний блок страницы. */ .content{padding-bottom:76px} } #v-wallet .assets{display:flex;flex-direction:column;gap:9px} #v-wallet .arow{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:13px 15px} #v-wallet .arow .mk{width:34px;height:34px;border-radius:10px;font-size:15px} #v-wallet .arow .nm{font-weight:600;font-size:14px} #v-wallet .arow .nm small{display:block;color:var(--faint);font-size:11.5px;font-weight:500} #v-wallet .arow .bal{margin-left:auto;text-align:right} #v-wallet .arow .bal .q{font-weight:700;font-family:var(--mono)} #v-wallet .arow .bal .u{font-size:11.5px;color:var(--faint);font-family:var(--mono)} #v-wallet .hrow{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:12px 15px;font-size:13px} #v-wallet .hic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;background:var(--panel2);border:1px solid var(--line2);flex:none} #v-wallet .hrow .amt{margin-left:auto;font-family:var(--mono);font-weight:600;white-space:nowrap} #v-wallet .colhead{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 12px 2px} #v-wallet .totalcard{background:linear-gradient(160deg,var(--panel),var(--panel2));border:1px solid var(--line2);border-radius:18px;padding:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px} #v-wallet .arow,#v-wallet .hrow{cursor:pointer} #v-wallet .arow:hover,#v-wallet .hrow:hover{border-color:var(--line2)} #v-wallet .eyebtn{background:none;border:0;color:var(--faint);cursor:pointer;font-size:13px;padding:0;line-height:1} #v-wallet .eyebtn:hover{color:var(--teal)} #v-wallet.bal-hidden .hideable{filter:blur(9px);user-select:none} #v-wallet .wpanel{border:1px solid var(--line);border-radius:16px;padding:8px;background:var(--panel2)} #v-wallet .wpanel.hist{background:transparent} #v-wallet .wpanel-head{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:10px 12px 8px;display:flex;justify-content:space-between;align-items:center} #v-wallet .chev{margin-left:10px;color:var(--faint)} #v-asset .linkback,#v-op .linkback{background:none;border:0;color:var(--mut);font-size:13px;cursor:pointer;padding:6px 0;margin-bottom:12px} #v-asset .linkback:hover,#v-op .linkback:hover{color:var(--teal)} #v-asset .assethero{display:flex;align-items:center;gap:16px;background:linear-gradient(160deg,var(--panel),var(--panel2));border:1px solid var(--line2);border-radius:18px;padding:20px;flex-wrap:wrap} #v-asset .wpanel,#v-op .wpanel{border:1px solid var(--line);border-radius:16px;padding:8px;background:var(--panel2)} #v-asset .wpanel.hist{background:transparent} #v-asset .wpanel-head{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:10px 12px 8px} #v-asset .assets{display:flex;flex-direction:column;gap:8px} #v-asset .hrow{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-size:13px;cursor:pointer} #v-asset .hrow:hover{border-color:var(--line2)} #v-asset .hic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--panel2);border:1px solid var(--line2);flex:none} #v-asset .hrow .amt{margin-left:auto;font-family:var(--mono);font-weight:600} #v-asset .kv,#v-op .kv{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:10px 0;border-bottom:1px solid var(--line)} #v-asset .kv:last-child,#v-op .kv:last-child{border-bottom:0} #v-op .opcard{background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:24px;text-align:center} #v-op .opic{width:52px;height:52px;border-radius:14px;background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 8px} #v-op .okchip{display:inline-flex;background:color-mix(in srgb,var(--pay-mint) 14%,transparent);color:var(--green);font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;margin:10px 0 4px} #v-op .opdetails{text-align:left;background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:4px 14px;margin:16px 0} #v-requisites .linkback,#v-security .linkback{background:none;border:0;color:var(--mut);font-size:13px;cursor:pointer;padding:6px 0;margin-bottom:8px} #v-requisites .linkback:hover,#v-security .linkback:hover{color:var(--teal)} #v-requisites .reqrow,#v-security .secrow{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px} #v-requisites .reqrow .mk{width:36px;height:36px;border-radius:10px;font-size:15px;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none} #v-requisites .reqrow b{font-size:14px} #v-requisites .reqrow small{display:block;color:var(--faint);font-size:11.5px} #v-requisites .acts{margin-left:auto;display:flex;gap:8px} #v-requisites .acts button{border:1px solid var(--line2);background:none;color:var(--mut);border-radius:8px;padding:6px 11px;font-size:12px;cursor:pointer} #v-requisites .acts button:hover{border-color:var(--teal);color:var(--teal)} #v-security .secrow b{font-size:14px} #v-security .secrow small{display:block;color:var(--faint);font-size:11.5px} #v-security .secrow .act{margin-left:auto;border:1px solid var(--line2);background:none;color:var(--tx);border-radius:9px;padding:8px 13px;font-size:12.5px;font-weight:600;cursor:pointer} #v-security .secrow .act:hover{border-color:var(--teal);color:var(--teal)} /* * ⚠ ОТКЛЮЧЁННАЯ КНОПКА ОБЯЗАНА ВЫГЛЯДЕТЬ ОТКЛЮЧЁННОЙ, и здесь это НЕ даётся * браузером: правило выше задаёт `color` явно, а явный цвет отменяет тусклость * по умолчанию. 2FA и уведомления о входе не построены — кнопка того же вида, * что рабочая, читается как поломка. Тот же случай уже был у oauth-кнопок. */ #v-security .secrow .act:disabled{opacity:.45;cursor:not-allowed;color:var(--mut)} #v-security .secrow .act:disabled:hover{border-color:var(--line2);color:var(--mut)} #v-orders .linkback{background:none;border:0;color:var(--mut);font-size:13px;cursor:pointer;padding:6px 0;margin-bottom:8px} #v-orders .linkback:hover{color:var(--teal)} #v-orders .olist{display:flex;flex-direction:column;gap:9px} #v-orders .orow2{display:grid;grid-template-columns:80px 1fr auto;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px 16px;font-size:13.5px;cursor:pointer} #v-orders .orow2:hover{border-color:var(--line2)} #v-orders .oid{font-family:var(--mono);color:var(--mut)} #v-orders .chip{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap} #v-orders .chip.wait{background:color-mix(in srgb,var(--pay-amber-text) 14%,transparent);color:var(--amber)} #v-orders .chip.ok{background:color-mix(in srgb,var(--pay-mint) 14%,transparent);color:var(--green)} #v-orders .chip.done{background:var(--panel2);color:var(--mut)} @media(max-width:700px){#v-orders .orow2{grid-template-columns:70px 1fr}} /* ⚠ ВЕСЬ КАБИНЕТ ТРЕЙДЕРА БЫЛ ЗАПЕРТ СЕЛЕКТОРОМ `#v-trader` — id ВИДА МОКАПА, которого на нашей странице нет вовсе. Правила перенесли, а применяться им было негде: `trader.html` рисовался голой лентой — вкладки без сегментов, счета без карточек, кнопки во всю ширину. Выглядело это как «кабинет не сверстан», хотя вёрстка лежала рядом и ждала чужого предка. Тот же класс уже ловился на «Моих обменах» (`.ocard` под `#v-order`) — и лечится так же: базовые правила становятся общими, а не получают ещё один id. */ .linkback{background:none;border:0;color:var(--mut);font-size:13px;cursor:pointer;padding:6px 0;margin-bottom:6px} .linkback:hover{color:var(--teal)} .ttabs{display:flex;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:4px;margin:16px 0 22px;max-width:420px} .ttab{flex:1;text-align:center;font-size:13.5px;font-weight:600;color:var(--mut);padding:10px;border-radius:9px;cursor:pointer;border:0;background:none} .ttab.on{background:color-mix(in srgb,var(--pay-accent) 10%,transparent);color:var(--teal)} .acc{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:12px} .acc .top{display:flex;align-items:center;gap:11px;flex-wrap:wrap} .xlogo{width:34px;height:34px;border-radius:10px;background:var(--pay-blue-soft);color:var(--pay-amber-text);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:none} .badge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:4px} .badge.merchant{background:color-mix(in srgb,var(--pay-amber-text) 16%,transparent);color:var(--pay-amber-text)} .badge.basic{background:color-mix(in srgb,var(--pay-blue) 16%,transparent);color:var(--pay-blue)} .toggle{margin-left:auto;width:44px;height:25px;border-radius:999px;background:var(--green);position:relative;cursor:pointer;flex:none} .toggle.off{background:var(--line2)} .toggle::after{content:"";position:absolute;top:2px;right:2px;width:21px;height:21px;border-radius:50%;background:var(--pay-white)} .toggle.off::after{right:auto;left:2px} .accgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px} .accgrid .b{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:11px} .accgrid .b .kk{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.07em} .accgrid .b .vv{font-weight:700;font-size:15px;margin-top:4px} .statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px} .stat .kk{font-size:11px;color:var(--faint)} .stat .vv{font-size:22px;font-weight:750;margin-top:5px} .ttable{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px} .ttable th{text-align:left;color:var(--faint);font-weight:500;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;padding:8px 10px;border-bottom:1px solid var(--line)} .ttable td{padding:12px 10px;border-bottom:1px solid var(--line)} .split{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0} .split .p{background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:12.5px;color:var(--mut)} .split .p b{color:var(--tx)} .ref{background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:16px} .reflink{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;display:flex;align-items:center;justify-content:between;gap:10px;font-family:var(--mono);font-size:12.5px;color:var(--teal)} @media(max-width:820px){.accgrid,.statgrid{grid-template-columns:repeat(2,1fr)}} #v-order{padding:30px 0 44px} #v-order .back{background:none;border:0;color:var(--mut);font-size:13px;cursor:pointer;padding:4px 0;display:block;width:100%;max-width:480px;margin:0 auto 8px;text-align:left} #v-order .back:hover{color:var(--teal)} #v-order .ocard{max-width:480px;margin:0 auto;background:var(--panel);border:1px solid var(--line2);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:13px} #v-order .ohead{display:flex;align-items:center;justify-content:space-between;gap:10px} #v-order .ohead h2{font-size:18px;font-weight:730} #v-order .chip{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap} #v-order .chip.wait{background:color-mix(in srgb,var(--pay-amber-text) 14%,transparent);color:var(--amber)} #v-order .chip.ok{background:color-mix(in srgb,var(--pay-mint) 14%,transparent);color:var(--green)} #v-order .chip.info{background:color-mix(in srgb,var(--pay-accent) 12%,transparent);color:var(--teal)} #v-order .sumbar{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px} #v-order .sumbar .b{font-size:19px;font-weight:750;font-family:var(--mono)} #v-order .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:2px 0 -4px} #v-order .reqbox{background:var(--bg2);border:1px solid color-mix(in srgb,var(--pay-accent) 32%,transparent);border-radius:14px;padding:4px 16px} #v-order .reqbox.plain{border-color:var(--line)} #v-order .rl{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);gap:12px} #v-order .rl:last-child{border-bottom:0} #v-order .rl .l{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.1em;flex:none} #v-order .rl .v{font-family:var(--mono);font-weight:600;font-size:15px;display:flex;align-items:center;gap:9px;text-align:right} #v-order .cp{border:1px solid var(--line2);border-radius:7px;padding:4px 8px;font-size:10px;color:var(--mut);cursor:pointer;background:none;font-family:var(--font)} #v-order .cp:hover{border-color:var(--teal);color:var(--teal)} #v-order .timer{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:11px} #v-order .timer .t{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--amber)} #v-order .upload{border:1.5px dashed var(--line2);border-radius:12px;padding:14px;text-align:center;color:var(--mut);font-size:13px;cursor:pointer} #v-order .upload:hover{border-color:var(--teal)} #v-order .qr{width:112px;height:112px;border-radius:12px;background:conic-gradient(from 0deg,var(--pay-bg-inset) 25%,var(--pay-surface) 0 50%,var(--pay-bg-inset) 0 75%,var(--pay-surface) 0);background-size:13px 13px;border:1px solid var(--line2);position:relative;margin:6px auto} #v-order .qr::after{content:"";position:absolute;inset:38px;border-radius:6px;background:linear-gradient(150deg,var(--teal),var(--teal-dim))} #v-order .note{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12px;color:var(--mut)} #v-order .note b{color:var(--tx)} #v-order .opt2{display:flex;gap:8px} #v-order .opt2 .btn2{border:1px solid var(--line2);background:var(--bg2);color:var(--tx);border-radius:10px;padding:10px;font-size:13px;font-weight:600;cursor:pointer;flex:1} #v-order .opt2 .btn2:hover{border-color:var(--teal);color:var(--teal)} #v-order .btn2.on2{border-color:var(--teal);color:var(--teal);background:color-mix(in srgb,var(--pay-accent) 8%,transparent)} #v-order .oinp{background:none;border:0;color:var(--tx);font-family:var(--mono);font-size:13px;text-align:right;outline:none;width:160px} #v-order .oinp::placeholder{color:var(--faint)} #v-order .leg{border:1px solid var(--line);border-radius:12px;padding:12px 14px;position:relative;margin-top:4px;cursor:pointer} #v-order .leg:hover{border-color:var(--line2)} #v-order .leg.a{border-color:color-mix(in srgb,var(--pay-blue) 35%,transparent)} #v-order .leg.b{border-color:color-mix(in srgb,var(--pay-amber-text) 35%,transparent)} #v-order .lb{position:absolute;top:-8px;left:12px;font-size:9.5px;font-weight:700;letter-spacing:.1em;padding:2px 8px;border-radius:6px;background:var(--panel)} #v-order .leg.a .lb{color:var(--pay-blue)} #v-order .leg.b .lb{color:var(--pay-amber-text)} #v-order .chip.dispute{background:color-mix(in srgb,var(--pay-red) 14%,transparent);color:var(--red)} #v-order .chatline{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:12px;color:var(--mut)} #v-order .ochat{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:7px} #v-order .cm{font-size:12px;padding:7px 10px;border-radius:10px;line-height:1.4;max-width:90%} #v-order .cm.them{background:var(--panel);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:3px} #v-order .cm.bot{background:color-mix(in srgb,var(--pay-accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--pay-accent) 25%,transparent);color:var(--pay-text-soft);align-self:flex-start} #v-order .cm b{color:var(--teal)} #v-deposit .kv,#v-withdraw .kv{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:10px 0;border-bottom:1px solid var(--line)} #v-deposit .kv:last-child,#v-withdraw .kv:last-child{border-bottom:0} #v-deposit .sel,#v-withdraw .sel{display:flex;align-items:center;gap:11px;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:10px 13px;cursor:pointer;margin:14px 0 6px;font-weight:600;font-size:14px} #v-deposit .sel .mk,#v-withdraw .sel .mk{width:30px;height:30px;border-radius:9px;font-size:14px;display:flex;align-items:center;justify-content:center;font-weight:800} #v-deposit .sel small,#v-withdraw .sel small{font-weight:500} #v-deposit .qr{width:120px;height:120px;border-radius:12px;background:conic-gradient(from 0deg,var(--pay-bg-inset) 25%,var(--pay-surface) 0 50%,var(--pay-bg-inset) 0 75%,var(--pay-surface) 0);background-size:14px 14px;border:1px solid var(--line2);position:relative;margin:14px auto} #v-deposit .qr::after{content:"";position:absolute;inset:42px;border-radius:6px;background:linear-gradient(150deg,var(--teal),var(--teal-dim))} #v-deposit .addrbox{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-bottom:10px} #v-deposit .copy{border:1px solid var(--line2);border-radius:8px;padding:6px 10px;font-size:11px;color:var(--mut);cursor:pointer;background:none} #v-deposit .warn,#v-withdraw .warn{background:color-mix(in srgb,var(--pay-amber-text) 10%,transparent);border:1px solid color-mix(in srgb,var(--pay-amber-text) 30%,transparent);border-radius:10px;padding:10px 12px;font-size:12px;color:var(--amber);margin-top:12px} #v-withdraw .amtrow{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:2px 13px} #v-withdraw .amtrow input{background:none;border:0;color:var(--tx);font-size:17px;font-family:var(--mono);font-weight:700;padding:12px 0;width:100%;outline:none} #v-withdraw .maxbtn{border:1px solid var(--line2);border-radius:7px;padding:5px 9px;font-size:11px;color:var(--teal);background:none;cursor:pointer} #v-withdraw .lab3{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:14px 0 6px} #v-flow{padding:26px 0 40px} #v-flow .flowhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:8px} #v-flow .flowhead h2{font-size:22px;font-weight:730} #v-flow .flowhint{font-size:12.5px;color:var(--faint)} #v-flow .flowlayout{display:grid;grid-template-columns:236px 1fr;gap:26px;align-items:start} #v-flow .rail{position:sticky;top:86px;display:flex;flex-direction:column;gap:15px;max-height:calc(100vh - 110px);overflow-y:auto;padding-right:4px} #v-flow .railgrp h5{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin:0 0 6px 8px} #v-flow .railitem{display:block;width:100%;text-align:left;background:none;border:0;color:var(--mut);font-size:13px;padding:8px 11px;border-radius:9px;cursor:pointer} #v-flow .railitem:hover{background:var(--panel2);color:var(--tx)} #v-flow .railitem.on{background:color-mix(in srgb,var(--pay-accent) 10%,transparent);color:var(--teal);font-weight:600} #v-flow .stage{min-height:560px} #v-flow .fstate{display:none} #v-flow .fstate.on{display:flex;justify-content:center;animation:fade .25s} #v-flow .appcard{width:100%;max-width:460px;background:var(--panel);border:1px solid var(--line2);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px} #v-flow .appcard.center{text-align:center;align-items:center;padding-top:30px} #v-flow .appcard.appwide{max-width:780px} #v-flow .apphead{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:15px} #v-flow .sm{font-size:12.5px;color:var(--mut);margin:0} #v-flow .card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px} #v-flow .card.hl{border-color:color-mix(in srgb,var(--pay-accent) 40%,transparent)} #v-flow .row{display:flex;align-items:center;justify-content:space-between;gap:10px} #v-flow .k{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.12em} #v-flow .big{font-size:22px;font-weight:700} #v-flow .chip{font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap} #v-flow .chip.wait{background:color-mix(in srgb,var(--pay-amber-text) 14%,transparent);color:var(--amber)} #v-flow .chip.ok{background:color-mix(in srgb,var(--pay-mint) 14%,transparent);color:var(--green)} #v-flow .chip.info{background:color-mix(in srgb,var(--pay-accent) 12%,transparent);color:var(--teal)} #v-flow .chip.dispute{background:color-mix(in srgb,var(--pay-red) 14%,transparent);color:var(--red)} #v-flow .req{font-family:var(--mono);font-size:17px;letter-spacing:.03em;font-weight:600} #v-flow .copy{border:1px solid var(--line2);border-radius:8px;padding:6px 10px;font-size:11px;color:var(--mut);cursor:pointer} #v-flow .timer{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:11px} #v-flow .timer .t{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--amber)} #v-flow .steps{display:flex;flex-direction:column} #v-flow .step{display:flex;gap:11px;padding:5px 0} #v-flow .st-ic{width:20px;height:20px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;margin-top:1px} #v-flow .st-done{background:var(--green);color:var(--pay-action-ink)} #v-flow .st-now{border:2px solid var(--teal);color:var(--teal)} #v-flow .st-next{border:2px solid var(--line2);color:var(--faint)} #v-flow .st-tx{font-size:12.5px} #v-flow .st-tx small{display:block;color:var(--faint);font-size:11px} #v-flow .connector{width:2px;background:var(--line2);margin-left:9px;height:6px} #v-flow .connector.d{background:var(--green)} #v-flow .chat{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:7px} #v-flow .msg{max-width:84%;font-size:12px;padding:7px 10px;border-radius:10px;line-height:1.4} #v-flow .msg.them{background:var(--panel2);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:3px} #v-flow .msg.us{background:linear-gradient(120deg,color-mix(in srgb,var(--pay-mint) 20%,transparent),color-mix(in srgb,var(--pay-accent) 14%,transparent));align-self:flex-end;border-bottom-right-radius:3px} #v-flow .msg.bot{background:color-mix(in srgb,var(--pay-accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--pay-accent) 25%,transparent);align-self:flex-start;color:var(--pay-text-soft)} #v-flow .msg b{color:var(--teal)} #v-flow .chatbar{display:flex;gap:8px;color:var(--faint);font-size:12px;border:1px solid var(--line);border-radius:10px;padding:9px 11px} #v-flow .qr{width:104px;height:104px;border-radius:12px;margin:2px auto;background:conic-gradient(from 0deg,var(--pay-bg-inset) 25%,var(--pay-surface) 0 50%,var(--pay-bg-inset) 0 75%,var(--pay-surface) 0);background-size:13px 13px;border:1px solid var(--line2);position:relative} #v-flow .qr::after{content:"";position:absolute;inset:36px;border-radius:6px;background:linear-gradient(150deg,var(--teal),var(--teal-dim))} #v-flow .conf{display:flex;gap:5px;justify-content:center;margin-top:6px} #v-flow .conf i{width:20px;height:5px;border-radius:3px;background:var(--line2)} #v-flow .conf i.f{background:var(--green)} #v-flow .leg{border:1px solid var(--line);border-radius:12px;padding:11px;position:relative;margin-top:8px} #v-flow .leg.a{border-color:color-mix(in srgb,var(--pay-blue) 35%,transparent)} #v-flow .leg.b{border-color:color-mix(in srgb,var(--pay-amber-text) 35%,transparent)} #v-flow .legbadge{position:absolute;top:-8px;left:12px;font-size:9.5px;font-weight:700;letter-spacing:.1em;padding:2px 8px;border-radius:6px;background:var(--panel)} #v-flow .leg.a .legbadge{color:var(--pay-blue)} #v-flow .leg.b .legbadge{color:var(--pay-amber-text)} #v-flow .note{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12px;color:var(--mut)} #v-flow .note b{color:var(--tx)} #v-flow .cta{margin-top:4px} #v-flow .btn2{border:1px solid var(--line2);background:var(--bg2);color:var(--tx);border-radius:11px;padding:12px;font-size:14px;font-weight:600;cursor:pointer;width:100%} #v-flow .btn2:hover{border-color:var(--teal);color:var(--teal)} #v-flow .uploads{display:grid;grid-template-columns:1fr 1fr;gap:10px} #v-flow .uptile{border:1.5px dashed var(--line2);border-radius:14px;padding:16px 10px;text-align:center;cursor:pointer} #v-flow .uptile:hover{border-color:var(--teal)} #v-flow .uptile .upic{font-size:26px;margin-bottom:6px} #v-flow .uptile b{font-size:13px} #v-flow .uptile small{display:block;color:var(--faint);font-size:11px;margin-top:2px} #v-flow .fld2{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:12px 13px;color:var(--faint);font-size:13px} #v-flow .pbar{height:8px;border-radius:5px;background:var(--panel2);overflow:hidden} #v-flow .pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--teal))} #v-flow .spinner{width:44px;height:44px;border-radius:50%;border:3px solid var(--line2);border-top-color:var(--teal);animation:spin 1s linear infinite;margin:4px auto 8px} @keyframes spin{to{transform:rotate(360deg)}} #v-flow .bigcheck{width:52px;height:52px;border-radius:50%;background:linear-gradient(150deg,var(--green),var(--teal));color:var(--pay-action-ink);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;margin:2px auto 6px} #v-flow .bigx{width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--pay-red) 16%,transparent);color:var(--red);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;margin:2px auto 6px} #v-flow .linkbtn{background:none;border:0;color:var(--teal);font-size:12px;cursor:pointer;padding:0} .accel{background:linear-gradient(160deg,color-mix(in srgb,var(--pay-accent) 7%,transparent),color-mix(in srgb,var(--pay-accent) 2%,transparent));border:1px solid color-mix(in srgb,var(--pay-accent) 28%,transparent);border-radius:14px;padding:13px 14px;margin:12px 0} .accel-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;margin-bottom:10px} .accel-badge{margin-left:auto;font-size:10px;font-weight:700;color:var(--teal);background:color-mix(in srgb,var(--pay-accent) 14%,transparent);border-radius:999px;padding:2px 8px} .accel-lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin:8px 0 5px} .accel-seg{display:flex;gap:6px} .asg{flex:1;background:var(--bg2);border:1px solid var(--line2);color:var(--mut);border-radius:9px;padding:8px 6px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit} .asg:hover{border-color:var(--teal)} .asg.on{background:color-mix(in srgb,var(--pay-accent) 14%,transparent);border-color:var(--teal);color:var(--teal)} .accel-out{display:flex;justify-content:space-between;align-items:center;margin:12px 0 4px;font-size:13px} .accel-out b{font-size:16px} .accel-out .sm{font-size:11px;color:var(--faint);text-align:right} .cta2{width:100%;background:var(--teal);color:var(--pay-action-ink);border:0;border-radius:11px;padding:11px;font-size:13.5px;font-weight:750;cursor:pointer;font-family:inherit;margin-top:6px} .accel.applied{display:flex;align-items:center;gap:10px;justify-content:space-between;font-size:12.5px} #v-flow .otable{display:flex;flex-direction:column;gap:8px} #v-flow .orow{display:grid;grid-template-columns:90px 1fr 130px 110px;gap:12px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13px;cursor:pointer} #v-flow .orow:hover{border-color:var(--line2)} #v-flow .orow .id{font-family:var(--mono);color:var(--mut)} @media(max-width:820px){#v-flow .flowlayout{grid-template-columns:1fr}#v-flow .rail{position:static;flex-direction:row;flex-wrap:wrap;max-height:none}#v-flow .railgrp{width:100%}#v-flow .orow{grid-template-columns:70px 1fr 90px}} .walletchip{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:9px 13px;color:var(--tx);font-weight:600;font-size:13px;cursor:pointer} .walletchip:hover{border-color:var(--teal)} .walletchip .dot{width:6px;height:6px;border-radius:50%;background:var(--green)} .avatarbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line2);background:linear-gradient(150deg,var(--teal),var(--teal-dim));color:var(--pay-bg);font-weight:800;cursor:pointer} .modal{position:fixed;inset:0;z-index:70;background:rgba(6,9,14,.42);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;padding:24px} .modal.on{display:flex} .mcard{width:100%;max-width:452px;background:var(--panel);border:1px solid var(--line2);border-radius:20px;padding:20px;box-shadow:0 40px 90px -30px var(--pay-black);animation:pop .2s ease;max-height:88vh;overflow-y:auto} .mcard .mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px} .mcard .mhead h3{font-size:17px;font-weight:700} .mcard .mx{background:none;border:0;color:var(--faint);font-size:20px;cursor:pointer} .mcard .kv{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--line)} .mcard .kv:last-of-type{border-bottom:0} .mcard .achips{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 6px} .mcard .achip{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;border:1px solid var(--line2);background:var(--bg2);border-radius:999px;padding:6px 11px 6px 6px;cursor:pointer;color:var(--mut)} .mcard .achip.on{border-color:var(--teal);color:var(--teal)} .mcard .achip .mk{width:20px;height:20px;border-radius:6px;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:800} .mcard .seg{display:flex;gap:6px;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:4px;margin:10px 0} .mcard .seg button{flex:1;background:none;border:0;color:var(--mut);font-size:12.5px;font-weight:600;padding:9px;border-radius:8px;cursor:pointer} .mcard .seg button.on{background:color-mix(in srgb,var(--pay-accent) 14%,transparent);color:var(--teal)} .mcard .qr{width:120px;height:120px;border-radius:12px;background:conic-gradient(from 0deg,var(--pay-bg-inset) 25%,var(--pay-surface) 0 50%,var(--pay-bg-inset) 0 75%,var(--pay-surface) 0);background-size:14px 14px;border:1px solid var(--line2);position:relative;margin:14px auto} .mcard .qr::after{content:"";position:absolute;inset:42px;border-radius:6px;background:linear-gradient(150deg,var(--teal),var(--teal-dim))} .mcard .addrbox{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-bottom:6px} .mcard .req{font-family:var(--mono);font-size:16px;font-weight:600;margin-top:4px} .mcard .copy{border:1px solid var(--line2);border-radius:8px;padding:6px 10px;font-size:11px;color:var(--mut);cursor:pointer;background:none} .mcard .warn{background:color-mix(in srgb,var(--pay-amber-text) 10%,transparent);border:1px solid color-mix(in srgb,var(--pay-amber-text) 30%,transparent);border-radius:10px;padding:10px 12px;font-size:12px;color:var(--amber);margin-top:12px} .mcard .lab3{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:14px 0 6px} .mcard .inp{background:var(--bg2);border:1px solid var(--line);border-radius:11px;display:flex;align-items:center;gap:10px;padding:0 13px} .mcard .inp input{background:none;border:0;color:var(--tx);padding:12px 0;width:100%;outline:none;font-size:14px} .mcard .amtrow{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:2px 13px} .mcard .amtrow input{background:none;border:0;color:var(--tx);font-size:17px;font-family:var(--mono);font-weight:700;padding:12px 0;width:100%;outline:none} .mcard .maxbtn{border:1px solid var(--line2);border-radius:7px;padding:5px 9px;font-size:11px;color:var(--teal);background:none;cursor:pointer} .mcard .code{display:flex;gap:8px;justify-content:center;margin:16px 0} .mcard .code span{width:40px;height:48px;border:1px solid var(--line2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:20px;font-weight:700;background:var(--bg2);color:var(--faint)} .mcard .code span.f{border-color:var(--teal);color:var(--teal)} .mcard .reqcard{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:6px 0} .mcard .mk{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px} .mcard .exfx{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;margin-top:8px} .mcard .exfx .v{font-size:20px;font-weight:700;font-family:var(--mono)} .mcard .savedlist{display:flex;flex-direction:column;gap:7px} .mcard .savedopt{text-align:left;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:11px 13px;font-size:13px;color:var(--tx);cursor:pointer} .mcard .savedopt.on{border-color:var(--teal);color:var(--teal)} .mcard .balrow{display:flex;justify-content:space-between;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:13px;margin:12px 0 4px} .mcard .tgl{width:38px;height:22px;border-radius:999px;background:var(--line2);position:relative;cursor:pointer;flex:none} .mcard .tgl.on{background:var(--teal)} .mcard .tgl::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--pay-white);transition:.15s} .mcard .tgl.on::after{left:18px} .avmenu{position:fixed;top:62px;right:22px;z-index:82;width:248px;background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:8px;box-shadow:0 4px 8px -4px color-mix(in srgb,var(--pay-black) 45%,transparent);display:none;animation:pop .16s} .avmenu.on{display:block} .avback{position:fixed;inset:0;z-index:81;display:none} .avback.on{display:block} .avmenu .prof{display:flex;align-items:center;gap:10px;padding:8px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px} .avmenu .prof .av{width:36px;height:36px;border-radius:10px;background:var(--pay-accent-fill);color:var(--pay-accent-ink);font-weight:800;display:flex;align-items:center;justify-content:center;flex:none} .avmenu .mi{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;color:var(--mut);font-size:13.5px;padding:9px 10px;border-radius:9px;cursor:pointer} .avmenu .mi:hover{background:var(--panel2);color:var(--tx)} .kycdemo{background:none;border:1px solid var(--line2);border-radius:6px;padding:2px 8px;font-size:11px;color:var(--mut);cursor:pointer} .kycdemo.on{border-color:var(--teal);color:var(--teal)} .mcard .lab3{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:12px 0 6px} .mcard .mchat{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto} .mcard .cmm{font-size:12px;padding:8px 11px;border-radius:10px;line-height:1.4;max-width:90%} .mcard .cmm.them{background:var(--panel2);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:3px} .mcard .cmm.us{background:linear-gradient(120deg,color-mix(in srgb,var(--pay-mint) 18%,transparent),color-mix(in srgb,var(--pay-accent) 12%,transparent));align-self:flex-end;border-bottom-right-radius:3px} .mcard .cmm.tag{align-self:center;background:none;color:var(--faint);font-size:10.5px;font-style:italic;padding:1px} .mcard .opt2{display:flex;gap:8px;margin-top:4px} .mcard .btn2{flex:1;border:1px solid var(--line2);background:var(--bg2);color:var(--tx);border-radius:10px;padding:11px;font-size:13px;font-weight:600;cursor:pointer} .mcard .btn2:hover{border-color:var(--teal);color:var(--teal)} .mcard .note{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12px;color:var(--mut);margin-top:10px} .mcard .note b{color:var(--tx)} /* =========================================================================== * ⚠ ПРЕДОХРАНИТЕЛЬ: атрибут `hidden` ДОЛЖЕН ПОБЕЖДАТЬ. * * Этот же дефект уже стоил живой поломки в админке: `.loginwrap{display:flex}` * побеждал `hidden`, форма входа накрывала экран, и вход выглядел «кнопка не * работает». Здесь блоки заявки скрываются именно атрибутом, а классы вроде * `.inp{display:flex}` рядом — поэтому правило стоит ЗАРАНЕЕ, а не после того, * как поймаем. * ========================================================================= */ [hidden] { display: none !important; } /* Направление — список с бэка в оболочке мокапа. */ .dirsel{background:none;border:0;color:var(--tx);font-size:16px;font-weight:600; font-family:var(--font);width:100%;padding:4px 0 0;outline:none} .dirsel option{background:var(--panel);color:var(--tx)} #v-flow .inp select{background:none;border:0;color:var(--tx);padding:13px 0;width:100%; outline:none;font-size:14px;font-family:var(--font)} #v-flow .inp select option{background:var(--panel);color:var(--tx)} .mono-block{font-family:var(--mono);font-size:13px;background:var(--bg2); border:1px solid var(--line);border-radius:11px;padding:12px;word-break:break-all;margin:10px 0} #v-orders .olist{display:flex;flex-direction:column;gap:9px} #v-orders .orow2{display:grid;grid-template-columns:90px 1fr auto;gap:12px;align-items:center; background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px 16px; font-size:13.5px;cursor:pointer} #v-orders .orow2:hover{border-color:var(--line2)} #v-orders .oid{font-family:var(--mono);color:var(--mut)} #v-orders .chip{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap} #v-orders .chip.wait{background:color-mix(in srgb,var(--pay-amber-text) 14%,transparent);color:var(--amber)} #v-orders .chip.ok{background:color-mix(in srgb,var(--pay-mint) 14%,transparent);color:var(--green)} #v-orders .chip.flat{background:var(--panel2);color:var(--mut)} /* =========================================================================== * МОСТ: классы, которыми рисует `exchange.js`, — в язык мокапа. * * ⚠ БЕЗ ЭТОГО БЛОКА ВЕСЬ ЖИВОЙ ТЕКСТ ЭКРАНА БЫЛ ГОЛЫМ. Мокап описывает * статичную разметку, а всё, что человек реально читает по своей заявке — * расчёт, ошибка, статус, реквизиты, адрес, — рисуется скриптом классами * `line`/`muted`/`bad`/`ok`/`money`/`mono`, которых в CSS мокапа НЕТ ВОВСЕ. * Механическая сверка «наш класс против правил в CSS» нашла ровно семь таких. * * ⚠ И ЭТО ТОТ ЖЕ ДЕФЕКТ, ЧТО ОПЕРАТОР НАЗВАЛ СЛОВАМИ «интерфейс вообще никакой, * ничего нет». В админке он вылез при переносе и лечился таким же мостом; здесь * его нашли ДО показа — потому что после переноса разметки классы рендерера * остаются прежними, а CSS под ними уходит целиком. * * ⚠ ЦВЕТА БЕРУТСЯ ИЗ ТОКЕНОВ МОКАПА, А НЕ НАЗНАЧАЮТСЯ ЗАНОВО. Второй набор * значений рядом с первым разошёлся бы при первой же правке палитры — и * «красный» на одном экране перестал бы совпадать с «красным» на соседнем. * ========================================================================= */ /* * ⚠ БАЗОВОЕ ПРАВИЛО НЕ ЗАУЖИВАЕТСЯ ПО ВИДАМ, И ЭТО ИСПРАВЛЕНИЕ, А НЕ ВКУС. * Здесь стояло `#v-flow .line, #v-home .line`, то есть перечисление ВИДОВ, где * класс уже пригодился. Класс рождается СКРИПТОМ (`el("div", "line")`), а он не * знает, в каком виде окажется: строка «мои средства в сделке» вышла в * `#v-orders` и получила НОЛЬ правил — «RUB49850.00Выплата RUB» одним слипшимся * словом. * * Заужение по видам не защищает ни от чего (в мокапе класса `.line` нет вовсе), * а ломает каждый следующий экран молча — и чинится добавлением ещё одного id, * то есть тем же способом, каким создано. */ .line { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .line:last-child { border-bottom: 0; } /* * ⚠ ТО ЖЕ САМОЕ И ХУЖЕ: `.ocard` С `.ohead` ОПРЕДЕЛЕНЫ ТОЛЬКО ПОД `#v-order` — * это ВИД МОКАПА, которого у нас нет. Наша разметка носит те же классы в * `#v-flow`, `#v-orders` и `#v-wallet`, то есть ДЕВЯТЬ карточек заявки * рисовались голыми `div`. Классический здешний случай: разметку перенесли, а * правило осталось под чужим id. * * Центрирование и предел ширины сюда НЕ переносятся — они относятся к одной * карточке посреди пустого экрана, а наши стоят в колонке страницы. * `#v-order .ocard` выше по файлу специфичнее и продолжает выигрывать у себя. */ .ocard { background: var(--panel); border: 1px solid var(--line2); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 13px; } .ohead { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ohead h2 { font-size: 18px; font-weight: 730; } .muted, .faint { color: var(--mut); font-size: 13px; } /* * ⚠ ИМЯ `.k` ПРИНАДЛЕЖИТ МОКАПУ — это ЧИСЛО в плитке KPI (`.kpi .b .k`, * 24px, вес 750). Наш ключ строки, названный так же, перебивал его и делал * числа «70 / 30» тусклой подписью. Тот же класс ошибки, что с `.grid`: * одинаковое имя на два разных смысла, и побеждает тот, кто ниже в файле. */ .kv-k { color: var(--faint); font-size: 12px; min-width: 132px; } .money, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .headline { font-size: 20px; font-weight: 730; letter-spacing: -.02em; margin: 4px 0 8px; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* * ⚠ ГЛОБАЛЬНОГО `.tag` ЗДЕСЬ БЫТЬ НЕ ДОЛЖНО — четвёртое столкновение имён подряд * (после `.grid`, `.reqcard`, `.k`). В мокапе правило ОДНО и оно ЗАУЖЕНО до * `.il .tag`: подпись у маленькой карточки — капслок вразрядку, а у большой * иллюстрации — обычный текст. Мой глобальный `.tag` накрывал обе, и * «3D · трейдер-заработок» печаталось капсом, которого в эталоне нет. * `.il .tag` (выше по файлу) покрывает все три карточки «в три шага». */ /* Тон — из токенов мокапа. */ .ok, .positive, .approved { color: var(--green); } .bad, .negative { color: var(--red); } .warn { color: var(--amber); } /* Строка результата — тонированная плашка, без цветной полосы слева (запрет side-tab, повторный проход 07.10). */ .line.ok, .line.bad, .line.warn { border-radius: 10px; padding: 10px 12px; } .line.ok { background: var(--pay-green-soft); } .line.bad { background: color-mix(in srgb, var(--pay-red) 12%, transparent); } .line.warn { background: var(--pay-amber-soft); } /* Расчёт под калькулятором — карточка, а не голый текст. */ #quote:not(:empty) { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 4px 15px; margin-top: 14px; } #quote .line { border-bottom-color: var(--line2); } /* Результаты шагов заявки. */ #order-result:not(:empty), #pay-result:not(:empty), #address-result:not(:empty), #requisite-result:not(:empty), #confirm-result:not(:empty), #chat-result:not(:empty) { margin-top: 12px; font-size: 13.5px; } /* Кнопка расчёта уже .cta из мокапа; кнопки внутри списков — компактные. */ #v-flow button:not(.btn-fill):not(.btn-ghost):not(.cta) { background: var(--panel); border: 1px solid var(--line2); color: var(--tx); border-radius: 10px; padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer; } #v-flow button:not(.btn-fill):not(.btn-ghost):not(.cta):hover { border-color: var(--teal); color: var(--teal); } /* Лента переписки — язык мокапа админки: собеседник / мы / бот. */ .ochatb { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; padding: 4px 0; } .ochatb .msg { max-width: 78%; padding: 9px 12px; border-radius: 12px; font-size: 13px; background: var(--panel); border: 1px solid var(--line); } .ochatb .msg.us { align-self: flex-end; background: color-mix(in srgb,var(--pay-accent) 10%,transparent); border-color: color-mix(in srgb,var(--pay-accent) 35%,transparent); } .ochatb .msg.bot { border-style: dashed; color: var(--mut); } .ochatb .msg b { display: block; font-size: 11px; color: var(--faint); font-weight: 600; margin-bottom: 3px; } /* ============================================================================ * УТИЛИТАРНЫЙ СЛОЙ — БЫВШИЕ ИНЛАЙНОВЫЕ СТИЛИ. * * ⚠ ЭТО НЕ ВКУСОВЩИНА, А ТРЕБОВАНИЕ БОЕВОЙ ПОЛИТИКИ. Прод отдаёт * `style-src 'self'` без `unsafe-inline`, то есть КАЖДЫЙ `style="…"` там * молча не применяется: браузер пишет «Applying inline style violates…» и * рисует элемент без этих правил. Экраны, сверенные 1:1 на превью без * политики, в бою разъезжались именно здесь — 64 атрибута на трёх страницах. * * ⚠ ПРАВИЛА ПЕРЕНЕСЕНЫ ДОСЛОВНО, БЕЗ ПЕРЕИМЕНОВАНИЙ И ОБЪЕДИНЕНИЙ. Соблазн * дать им семантические имена велик, но эти экраны уже приняты по мокапам: * любое «заодно причешем» здесь — это непроверенное изменение вёрстки под * видом рефакторинга. Совпадение снято сличением снимков до и после. * ==========================================================================*/ .u-corner-br { position:absolute; bottom:10px; right:12px; } .u-cursor-default { cursor:default; } .u-display-num { font-size:32px; font-weight:740; margin-top:8px; } .u-fs11 { font-size:11px; } .u-fs12 { font-size:12.5px; } .u-fs13 { font-size:13px; } .u-fs13-w600 { font-weight:600; font-size:13px; } .u-fs15-mt12 { font-size:15px; margin-top:12px; } .u-full { width:100%; } .u-full-mt12 { margin-top:12px; width:100%; } .u-full-mt14 { width:100%; margin-top:14px; } .u-grid3-mt26 { grid-template-columns:repeat(3,1fr); margin-top:26px; } .u-grow { flex:1; } .u-mb18 { margin-bottom:18px; } .u-mb26 { margin-bottom:26px; } .u-mt-auto { margin-top:auto; } .u-mt12 { margin-top:12px; } .u-mt14 { margin-top:14px; } .u-mt14-panel2 { margin-top:14px; background:var(--panel2); } .u-mt16 { margin-top:16px; } .u-mt20 { margin-top:20px; } .u-mt24 { margin-top:24px; } .u-mt6 { margin-top:6px; } .u-mt8 { margin-top:8px; } .u-narrow680 { max-width:680px; margin:0 auto; } .u-narrow720 { max-width:720px; margin:0 auto; } .u-narrow780 { max-width:780px; margin:0 auto; } .u-pad-card { padding:16px 18px; } .u-pull-up { margin:-4px 0 10px; } .u-row { display:flex; align-items:center; gap:10px; } .u-row-gap8-mb10 { display:flex; gap:8px; margin-bottom:10px; } .u-row-mt12 { display:flex; gap:10px; margin-top:12px; } .u-row-mt14 { display:flex; gap:10px; margin-top:14px; } .u-row-split-end { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:12px; } .u-tx { color:var(--tx); } /* Продолжение утилитарного слоя: классы вместо `element.style.cssText`. * * ⚠ CSSOM политика НЕ БЛОКИРУЕТ — правила применяются, — но Chrome СООБЩАЕТ о * каждом таком присваивании: «Applying inline style violates…». Ошибка в * консоли на каждой загрузке страницы, где всё работает, — это ровно тот * сторож, который «кричит там, где всё исправно, и обесценивает строки рядом * с собой». Приёмка экрана требует чистой консоли, иначе настоящая поломка * теряется среди постоянного шума. */ .u-mk-on { background: var(--teal); color: var(--pay-accent-ink); } .u-row-block { display: block; width: 100%; text-align: left; margin-bottom: 8px; } .u-mt4 { margin-top: 4px; } .u-signout { color: var(--red); } /* ============================================================================ * ЗДЕСЬ БЫЛ ПЕРЕНЕСЁН БЛОК `