/* ═══════════════════════════════════════════════════════════════════════ AutoSMO — тема Terminal Витрина переписана в build/*.twig; кабинет остаётся стоковым Bootstrap 3 и красится только отсюда. Ничего не завязано на разметку кабинета кроме её собственных классов — id и data-* платформы не трогаем. ═══════════════════════════════════════════════════════════════════════ */ @font-face{ font-family:'AS Sans'; src:url(https://storage.perfectcdn.com/8ab5bf/z26fltry63m1zgor.woff2) format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; } @font-face{ font-family:'AS Mono'; src:url(https://storage.perfectcdn.com/8ab5bf/ewfwm6caylh1ous1.woff2) format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; } :root{ --ink:#1E1D1F; /* самый тёмный: шапка, подвал, карточки-врезки */ --bg:#252427; /* фон страницы */ --card:#2F2E31; /* поднятая поверхность */ --line:#3B393D; /* видимая граница */ --line-soft:#333136; /* хайрлайн между строками */ --txt:#FFFFFF; --dim:#A8A2A6; /* вторичный текст */ --dim2:#7C767B; /* метки, подписи */ --or:#FF8355; /* акцент */ --or-d:#E6764D; /* нажатие, границы */ --or-l:#FF9C77; /* ховер */ --ok:#3ED07E; --warn:#FFC107; --bad:#F0614B; --sans:'AS Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'AS Mono',ui-monospace,'SF Mono',Menlo,monospace; --wrap:1180px; } /* ── база ─────────────────────────────────────────────────────────── */ *{box-sizing:border-box} /* clip, а не hidden: hidden сделал бы из html скролл-контейнер и убил бы position:sticky внутри страниц. Страховка от горизонтального сдвига, какой бы элемент его ни вызвал. */ html{-webkit-text-size-adjust:100%;overflow-x:clip} body{ margin:0;background:var(--bg);color:var(--txt);overflow-x:clip; font-family:var(--sans);font-size:15px;line-height:1.55; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } a{color:var(--or);text-decoration:none} a:hover,a:focus{color:var(--or-l);text-decoration:none} h1,h2,h3,h4,h5{font-family:var(--sans);font-weight:600;letter-spacing:-.02em;color:var(--txt);margin:0 0 .6em} h1{font-size:clamp(28px,4.4vw,42px);line-height:1.1;text-wrap:balance} h2{font-size:22px;line-height:1.2} h3{font-size:18px} h4{font-size:16px} p{margin:0 0 1em} hr{border:0;border-top:1px solid var(--line-soft);margin:28px 0} small{font-size:12.5px;color:var(--dim)} code,pre,kbd{font-family:var(--mono)} pre{background:var(--ink);color:#DDD8DA;border:1px solid var(--line);border-radius:0;padding:16px} code,kbd{background:var(--ink);color:var(--or);border-radius:0;padding:1px 5px;font-size:.9em} ::selection{background:var(--or);color:var(--ink)} :focus-visible{outline:2px solid var(--or);outline-offset:2px} /* числа везде табличные — иначе колонки цен пляшут */ .as-num,.as-rate,td,th,.badge,.label,input[type="number"]{font-variant-numeric:tabular-nums} .as-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px} @media (min-width:768px){.as-wrap{padding:0 32px}} .as-lbl{ font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--dim2);display:block } .as-mono{font-family:var(--mono)} /* ── контейнеры Bootstrap ─────────────────────────────────────────── */ .container,.container-fluid,.container-lg{ max-width:var(--wrap);margin:0 auto;padding:0 20px;width:100% } @media (min-width:768px){.container,.container-fluid,.container-lg{padding:0 32px}} .container-fluid{max-width:1480px} .row{display:flex;flex-wrap:wrap;margin:0 -12px} /* Ширину по умолчанию задаём селектором в ОДИН класс. Раньше здесь стояло `.row>[class*="col-"]{width:100%}` — это специфичность 0,2,0, и она била `.col-md-8{width:66.66%}` (0,1,0) при любом порядке правил. Вся сетка молча схлопывалась в одну колонку на всех ширинах, а замечалось это только там, где колонки должны стоять рядом — например, в ветке тикета отступ col-md-1 не работал и реплики клиента и поддержки совпадали. */ [class*="col-"]{width:100%} .row>[class*="col-"]{padding:0 12px; /* min-width:auto у flex-элемента даёт колонке раздуться под широкую таблицу и утащить за собой всю страницу — прокрутка внутри карточки при этом не срабатывает. */ min-width:0} @media (min-width:992px){ .col-md-1{width:8.333%}.col-md-2{width:16.66%}.col-md-3{width:25%}.col-md-4{width:33.33%} .col-md-5{width:41.66%}.col-md-6{width:50%}.col-md-7{width:58.33%}.col-md-8{width:66.66%} .col-md-9{width:75%}.col-md-10{width:83.33%}.col-md-11{width:91.66%}.col-md-12{width:100%} .col-md-offset-1{margin-left:8.333%}.col-md-offset-2{margin-left:16.66%}.col-md-offset-3{margin-left:25%} .col-lg-8{width:66.66%}.col-lg-offset-2{margin-left:16.66%} } @media (min-width:768px) and (max-width:991px){ .col-sm-6{width:50%}.col-sm-4{width:33.33%}.col-sm-12{width:100%} } .text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left} .pull-right{float:right}.pull-left{float:left} .hidden{display:none!important} .h-100{height:100%}.w-100{width:100%} .d-flex{display:flex}.justify-content-center{justify-content:center}.align-items-center{align-items:center} /* ── шапка ────────────────────────────────────────────────────────── */ .navbar{ background:var(--ink);border:0;border-bottom:1px solid var(--line-soft); margin:0;border-radius:0;min-height:0 } .navbar .container,.navbar .container-fluid{ display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap } .navbar-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0} .navbar-brand{ display:flex;align-items:center;gap:10px;height:auto;padding:0;float:none; font-family:var(--sans);font-weight:800;font-size:20px;letter-spacing:-.025em;color:var(--txt) } .navbar-brand:hover,.navbar-brand:focus{color:var(--txt)} .navbar-brand img{max-height:30px;width:auto} .as-brand-mark{display:block;flex:0 0 auto} .as-brand-txt em{font-style:normal;color:var(--or)} .navbar-nav{display:flex;align-items:center;gap:22px;margin:0;padding:0;list-style:none;flex-wrap:wrap} .navbar-nav>li>a{ font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--dim); padding:8px 0;display:block } .navbar-nav>li>a:hover,.navbar-nav>li>a:focus{color:var(--txt);background:none} .navbar-nav>li.active>a{color:var(--or);background:none} .navbar-collapse{display:flex;align-items:center;gap:26px;flex:1;justify-content:flex-end;padding:0;border:0;box-shadow:none} .navbar-right{margin-right:0} .navbar-icon{margin-right:6px} .navbar-toggle{ display:none;background:none;border:1px solid var(--line);padding:8px 10px;border-radius:0;margin:0 } .navbar-toggle .icon-bar{display:block;width:18px;height:1.5px;background:var(--txt);margin:4px 0} .navbar-static-top{border-width:0 0 1px} @media (max-width:991px){ .navbar .container,.navbar .container-fluid{display:block} .navbar-header{width:100%} .navbar-toggle{display:block} /* Bootstrap держит .navbar-collapse.collapse{display:block!important} начиная с 768px, поэтому на 768–991px меню оставалось развёрнутым вертикальным списком. Перебиваем тем же оружием. */ .navbar-collapse,.navbar-collapse.collapse{display:none!important;flex-direction:column;align-items:stretch;gap:0;padding-bottom:12px} .navbar-collapse.in,.navbar-collapse.collapse.in{display:flex!important} .navbar-nav{flex-direction:column;align-items:stretch;gap:0;width:100%} .navbar-nav>li>a{padding:11px 0;border-top:1px solid var(--line-soft)} } /* баланс в шапке кабинета */ .navbar-nav .badge{ background:var(--or);color:var(--ink);font-family:var(--mono);font-weight:700; border-radius:0;padding:4px 9px;font-size:12.5px } /* ── кабинет: меню слева, зафиксированное ──────────────────────────── В кабинете четырнадцать пунктов плюс баланс, Account и Logout — в одну строку они не влезают и шапка переносилась на два ряда, с осиротевшим Logout справа внизу. Вертикальная колонка вмещает их без переносов и не уезжает при прокрутке. Разметку не трогаем: платформенный JS завязан на #navbar и data-toggle="collapse", поэтому перестраиваем только CSS, и только на широких экранах — на мобильном остаётся обычное бургер-меню. ------------------------------------------------------------------- */ @media (min-width:992px){ .as-cab .navbar{ position:fixed;top:0;left:0;bottom:0;width:228px;z-index:1030; background:var(--ink);border:0;border-right:1px solid var(--line-soft); overflow-y:auto;overflow-x:hidden } .as-cab .navbar .container-fluid{ display:flex;flex-direction:column;align-items:stretch;gap:0; /* justify-content обязателен: в базовом правиле шапки стоит space-between, и в колонке высотой во весь экран он растаскивал бренд к верху, а меню к низу — первый пункт оказывался посередине. */ justify-content:flex-start; min-height:100%;padding:0 } .as-cab .navbar-header{ padding:18px 18px 16px;border-bottom:1px solid var(--line-soft);width:100% } .as-cab .navbar-collapse{ display:flex;flex-direction:column;align-items:stretch;gap:0; flex:1;padding:0;justify-content:flex-start } /* width:100% только левому списку: у правой полосы позиция fixed, и сотня процентов считалась бы от окна — баланс уезжал за правый край. */ .as-cab .navbar-left-block{ flex-direction:column;align-items:stretch;gap:0;width:100%;margin:0 } .as-cab .navbar-left-block>li>a{ padding:9px 18px;border-left:2px solid transparent;font-size:13px } .as-cab .navbar-left-block>li>a:hover{background:#232225;color:var(--txt)} .as-cab .navbar-left-block>li.active>a{ border-left-color:var(--or);background:#232225;color:var(--or) } /* Баланс, Account и Logout уводим в узкую полосу сверху справа: в колонке они теряются, а баланс должен быть на виду всегда. */ .as-cab .navbar-right-block{ position:fixed;top:0;left:228px;right:0;height:52px; display:flex;flex-direction:row;align-items:center;justify-content:flex-end; gap:18px;margin:0;padding:0 24px;width:auto; background:var(--ink);border-bottom:1px solid var(--line-soft);z-index:1029 } .as-cab .navbar-right-block>li>a{padding:6px 0} .as-cab .navbar-right-block .dropdown-menu{top:100%;right:0;left:auto} /* Содержимое сдвигаем под колонку и полосу. */ /* Ниже в файле лежит `.navbar+.as-main{padding-top:30px}` той же специфичности, и она выигрывала по порядку — контент подлезал под верхнюю полосу. Добавляем третий класс. */ .as-cab .as-main{margin-left:228px} .as-cab .navbar+.as-main{padding-top:52px} .as-cab .navbar-toggle{display:none} } /* ── лента цен ────────────────────────────────────────────────────── */ /* clip, а не hidden: в Safari на телефоне hidden оставляет контейнер прокручиваемым пальцем, и лента шириной 4600 px таскалась вбок вместе с ощущением, что едет вся страница. clip прокрутку запрещает вовсе. */ .as-tape{background:var(--ink);border-bottom:1px solid var(--line-soft); overflow:hidden;overflow:clip;position:relative} .as-tape__in{ display:flex;width:max-content;animation:as-tape 46s linear infinite; font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:9px 0 } .as-tape__in span{padding:0 16px;color:var(--dim);white-space:nowrap;border-right:1px solid var(--line-soft)} .as-tape__in b{color:var(--or);font-weight:400} @keyframes as-tape{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){ /* Без анимации ленту можно листать рукой, но в Safari на телефоне жест с такого контейнера уходил на страницу, и вбок ехала вся вёрстка: экран 390 px против 4604 px содержимого. overscroll-behavior держит жест внутри ленты, touch-action разрешает ей только горизонталь. */ .as-tape{overflow-x:auto;scrollbar-width:none; overscroll-behavior-x:contain;touch-action:pan-x} .as-tape::-webkit-scrollbar{display:none} .as-tape__in{animation:none} } /* ── кнопки ───────────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--sans);font-size:14px;font-weight:600;line-height:1; padding:12px 20px;border:1px solid transparent;border-radius:0;cursor:pointer; transition:background .12s ease,color .12s ease,border-color .12s ease;white-space:nowrap } .btn:focus{outline:2px solid var(--or);outline-offset:2px} .btn-primary,.btn-success,.btn-actions{background:var(--or);border-color:var(--or);color:var(--ink)} .btn-primary:hover,.btn-success:hover,.btn-actions:hover, .btn-primary:focus,.btn-success:focus{background:var(--or-l);border-color:var(--or-l);color:var(--ink)} .btn-primary:active,.btn-success:active{background:var(--or-d);border-color:var(--or-d)} .btn-default,.btn-secondary{background:transparent;border-color:var(--line);color:var(--txt)} .btn-default:hover,.btn-secondary:hover,.btn-default:focus{border-color:var(--or);color:var(--or);background:transparent} .btn-danger{background:transparent;border-color:var(--bad);color:var(--bad)} .btn-danger:hover{background:var(--bad);color:var(--ink)} .btn-link{background:none;border:0;color:var(--or);padding:0} .btn-sm,.btn-xs{padding:7px 12px;font-size:12.5px} .btn-lg{padding:15px 26px;font-size:15px} .btn-block{display:flex;width:100%} .btn[disabled],.btn.disabled{opacity:.45;cursor:not-allowed} /* ── формы ────────────────────────────────────────────────────────── */ .form-group{margin-bottom:16px;display:block} .control-label,label{ display:block;margin-bottom:6px;font-family:var(--mono);font-size:10px; letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);font-weight:400 } .form-control,input[type="text"],input[type="password"],input[type="email"], input[type="number"],input[type="url"],textarea,select{ display:block;width:100%;max-width:560px; background:var(--ink);border:1px solid var(--line);border-radius:0;color:var(--txt); font-family:var(--sans);font-size:14px;line-height:1.4;padding:11px 13px; transition:border-color .12s ease } /* macOS строит нативный список селекта по ОБЪЯВЛЕННОЙ ширине, а не по отрисованной: max-width его не удержит, список уезжает за окно. */ select,select.form-control{width:560px;max-width:100%;height:auto;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%); /* Стрелка 5px в 13px от края на широком поле читалась как прижатая в угол — делаем крупнее и отодвигаем внутрь. */ background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%; background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px} .form-control:focus,input:focus,textarea:focus,select:focus{border-color:var(--or);outline:none;box-shadow:none} .form-control::placeholder{color:var(--dim2)} textarea,textarea.form-control{min-height:120px;resize:vertical} .form-control[readonly],.form-control[disabled]{opacity:.6} .input-sm,.form-control.input-sm{padding:7px 10px;font-size:13px;height:auto} /* Safari на iPhone увеличивает страницу, когда фокус попадает в поле мельче 16px, и после расфокуса масштаб не возвращает: visualViewport.scale становится 1.14, и страницу можно таскать вбок, хотя по метрикам документ ровно по экрану (окно 402 · документ 402 · body 402 — снято с айфона). Это и принимали за переполнение на главной: там форма входа. 16px — порог, ниже которого Safari зумит. */ @media (max-width:767px){ .form-control,input[type="text"],input[type="password"],input[type="email"], input[type="number"],input[type="url"],input[type="search"],input[type="tel"], textarea,select,.input-sm,.form-control.input-sm{font-size:16px} } .form-inline{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .form-inline .form-group{margin-bottom:0} .help-block,.text-muted{color:var(--dim);font-size:12.5px} .has-error .form-control{border-color:var(--bad)} .has-error .help-block{color:var(--bad)} .checkbox,.radio{display:flex;align-items:flex-start;gap:9px;margin:0 0 12px} .checkbox label,.radio label{ text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:14px; color:var(--txt);margin:0 } /* Нативная галка на тёмном фоне рисуется белым квадратом: accent-color красит только отмеченное состояние. Рисуем свою — input остаётся настоящим, платформенный JS по .terms-accept-checkbox продолжает работать. */ input[type="checkbox"],input[type="radio"]{ appearance:none;-webkit-appearance:none;flex:0 0 auto; width:17px;height:17px;margin:1px 0 0;cursor:pointer; background:var(--ink);border:1px solid var(--line);display:inline-grid;place-content:center } input[type="radio"]{border-radius:50%} input[type="checkbox"]:hover,input[type="radio"]:hover{border-color:var(--or)} input[type="checkbox"]:checked,input[type="radio"]:checked{background:var(--or);border-color:var(--or)} input[type="checkbox"]:checked::after{ content:"";width:9px;height:5px;margin-top:-2px; border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg) } input[type="radio"]:checked::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink)} input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{outline:2px solid var(--or);outline-offset:2px} input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:.45;cursor:not-allowed} /* «Забыли пароль» платформа кладёт absolute внутрь поля ввода. Держим её у правого края САМОГО ПОЛЯ, а не контейнера: поле ограничено 560px, поэтому в широкой колонке привязка к контейнеру уносит ссылку за экран. */ .form-group__password{position:relative;max-width:560px} .forgot-password{ position:absolute;right:0;top:0;font-size:11px;font-family:var(--mono); letter-spacing:.08em;text-transform:uppercase;white-space:nowrap } /* ── карточки и панели ────────────────────────────────────────────── */ .well,.panel,.card,.panel-default{color:var(--txt)} .well,.panel,.card{ background:var(--card);border:1px solid var(--line);border-radius:0; padding:22px;margin-bottom:22px;box-shadow:none } .panel-heading{ margin:-22px -22px 18px;padding:14px 22px;background:var(--ink); border-bottom:1px solid var(--line);font-weight:600 } .panel-body{ /* Блок скрыт, пока услуга не потребует доп. полей, но фон у него от бутстрапа белый — при показе был бы белый текст на белом. */ padding:0;background:transparent;color:var(--txt) } .panel-footer{margin:18px -22px -22px;padding:14px 22px;background:var(--ink);border-top:1px solid var(--line)} /* Инструкция к способу оплаты. Платформа рисует блок с классом text-center, а это абзацы и список реквизитов — по центру они нечитаемы. */ .form-group.instruction .panel-body{ text-align:left;padding:16px 18px;background:var(--ink);border:1px solid var(--line) } .form-group.instruction .panel-body>*:first-child{margin-top:0} .form-group.instruction .panel-body>*:last-child{margin-bottom:0} .form-group.instruction .panel-body ul, .form-group.instruction .panel-body ol{margin:10px 0;padding-left:20px} .form-group.instruction .panel-body li{margin:4px 0} .form-group.instruction .panel-body code{ display:inline-block;font-family:var(--mono);font-size:13px; padding:3px 8px;background:var(--card);border:1px solid var(--line); color:var(--txt);word-break:break-all } /* Валюту к сумме дописывает платформенный JS отдельным span'ом, а перед ним в разметке остаётся пробел: получается «Amount , USD». */ Метки набраны моноширинным с разрядкой, поэтому пробел тут ~7px. */ #amount_label_currency{margin-left:-.78em} .as-card-h{ font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--dim2);margin:0 0 14px;font-weight:400 } /* ── таблицы ──────────────────────────────────────────────────────── */ .table,table{width:100%;border-collapse:collapse;color:var(--txt);font-size:14px} .table>thead>tr>th,.table th,th{ text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--dim2);font-weight:400;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--ink) } .table>tbody>tr>td,.table td,td{ padding:12px;border-top:0;border-bottom:1px solid var(--line-soft);vertical-align:middle } .table>tbody>tr:hover>td{background:var(--card)} .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch} .nowrap{white-space:nowrap} /* Колонка ссылки в заказах и рефиллах просила 40% ширины и забирала 317 px под короткий ник, а названию услуги оставалось 89 px — оно ломалось в восемь строк по слову, и таблица переставала помещаться в карточку. */ .as-cab .well-float .width-40{max-width:200px;overflow-wrap:anywhere} /* Даты в кабинете обёрнуты в и просили по 164 px каждая; в подписках их три, и таблица переставала помещаться. Разрешаем перенос между датой и временем — только у прямых span'ов в ячейках, чтобы не задеть количества и суммы, у которых nowrap стоит на самой ячейке. */ .as-cab .well-float td>span.nowrap{white-space:normal} /* Подписки — единственная таблица на двенадцать колонок: ей нужны более плотные отступы, иначе кнопка действия уезжает за правый край карточки. */ .as-cab .well-float table:has(th:nth-child(11)) td, .as-cab .well-float table:has(th:nth-child(11)) th{padding-left:6px;padding-right:6px} /* На телефоне таблицы кабинета переносили каждое слово: строка заказа занимала 285 px, и список превращался в простыню — клиент так и написал, «big separated lines». Запрещаем перенос, длинные поля обрезаем, название услуги оставляем в две строки. Строка становится 73 px, таблица едет вбок внутри своей карточки, а не тащит за собой страницу. */ /* На телефоне таблицы кабинета становятся карточками: одна строка — один блок, у каждого значения подпись из шапки (её проставляет script.js, потому что подписи переводятся). Так видно все поля сразу и не нужно возить таблицу вбок — то, за что юзеру нравился JAP, но без их беды: там ссылка ломается посреди слова на пять строк и строка вырастает под 200 px. Здесь длинное обрезается многоточием, карточка ~150 px. */ @media (max-width:767px){ .as-cab .well-float{padding:0;background:none;border:0;float:none;overflow:visible} .as-cab table[data-carded]{display:block;width:100%;border:0;font-size:13px} .as-cab table[data-carded] thead{display:none} .as-cab table[data-carded] tbody{display:grid;gap:10px} .as-cab table[data-carded] tr{ display:grid;grid-template-columns:repeat(4,1fr);gap:9px 8px; background:var(--card);border:1px solid var(--line);padding:11px 13px } .as-cab table[data-carded] td{ display:block;padding:0;border:0;white-space:normal;min-width:0; overflow:hidden;text-overflow:ellipsis;line-height:1.32 } .as-cab table[data-carded] td::before{ content:attr(data-label);display:block;font-family:var(--mono);font-size:9px; letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);margin-bottom:2px; white-space:normal;line-height:1.25 } .as-cab table[data-carded] td[data-nolabel]::before{content:none} .as-cab table[data-carded] td[data-empty]{display:none} .as-cab table[data-carded] td>span.nowrap, .as-cab table[data-carded] td.nowrap{white-space:normal} /* числа — моноширинным, чтобы колонки цифр читались как в таблице */ .as-cab table[data-carded] td{font-variant-numeric:tabular-nums} /* ссылка: одна строка с многоточием, а не перенос по буквам */ .as-cab table[data-carded] td.width-40{max-width:100%} .as-cab table[data-carded] td.width-40 a{ display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap } .as-cab table[data-carded] td .btn{width:100%;margin:0 0 6px;padding:9px 12px;font-size:13px} .as-cab table[data-carded] td .btn:last-child{margin-bottom:0} /* Рефил и отмена — рядом, каждая на половину карточки, а не столбиком. */ .as-cab table[data-carded] td .order-actions{display:flex;gap:8px} .as-cab table[data-carded] td .order-actions>.btn{flex:1;width:auto;margin:0} /* Таблицы без своей раскладки — пополнения, тикеты, партнёрка, обновления. Колонок там 3–5, и четверть ширины на ячейку слишком мало: реферальная ссылка и названия услуг обрезались многоточием. Даём половину ширины и разрешаем перенос — ссылку нужно видеть целиком, её копируют. */ .as-cab table[data-carded="plain"] td{ grid-column:span 2;white-space:normal;overflow:visible; text-overflow:clip;overflow-wrap:anywhere } /* Заказы: 1 ID, 2 дата, 3 ссылка, 4 сумма, 5 старт, 6 кол-во, 7 услуга, 8 статус, 9 остаток, 10 кнопки (появляются не всегда). Сверху номер и статус, затем услуга и ссылка, внизу числа. */ .as-cab table[data-carded="orders"] td:nth-child(1){order:1;grid-column:span 2;font-family:var(--mono);font-weight:700;font-size:14px} .as-cab table[data-carded="orders"] td:nth-child(8){order:2;grid-column:span 2;text-align:right} .as-cab table[data-carded="orders"] td:nth-child(7){order:3;grid-column:span 4;white-space:normal;overflow:visible} .as-cab table[data-carded="orders"] td:nth-child(3){order:4;grid-column:span 2} .as-cab table[data-carded="orders"] td:nth-child(2){order:5;grid-column:span 2} .as-cab table[data-carded="orders"] td:nth-child(4){order:6} .as-cab table[data-carded="orders"] td:nth-child(6){order:7} .as-cab table[data-carded="orders"] td:nth-child(9){order:8} .as-cab table[data-carded="orders"] td:nth-child(5){order:9} .as-cab table[data-carded="orders"] td:nth-child(10){order:10;grid-column:span 4} /* Подписки: 1 ID, 2 юзер, 3 кол-во, 4 новых постов, 5 старых, 6 задержка, 7 услуга, 8 статус, 9 создана, 10 обновлена, 11 истекает, 12 кнопки. Кнопка Reorder раньше пряталась за краем — теперь во всю ширину. */ .as-cab table[data-carded="subs"] td:nth-child(1){order:1;grid-column:span 2;font-family:var(--mono);font-weight:700;font-size:14px} .as-cab table[data-carded="subs"] td:nth-child(8){order:2;grid-column:span 2;text-align:right} .as-cab table[data-carded="subs"] td:nth-child(7){order:3;grid-column:span 4;white-space:normal;overflow:visible} .as-cab table[data-carded="subs"] td:nth-child(2){order:4;grid-column:span 4} .as-cab table[data-carded="subs"] td:nth-child(3){order:5} .as-cab table[data-carded="subs"] td:nth-child(4){order:6} .as-cab table[data-carded="subs"] td:nth-child(5){order:7} .as-cab table[data-carded="subs"] td:nth-child(6){order:8} .as-cab table[data-carded="subs"] td:nth-child(9), .as-cab table[data-carded="subs"] td:nth-child(10), .as-cab table[data-carded="subs"] td:nth-child(11){order:9;grid-column:span 2} .as-cab table[data-carded="subs"] td:nth-child(12){order:12;grid-column:span 4} /* Drip-feed: 1 ID, 2 дата, 3 ссылка, 4 total charge, 5 кол-во, 6 услуга, 7 запусков, 8 интервал, 9 total quantity, 10 статус, 11 кнопки. */ .as-cab table[data-carded="drip"] td:nth-child(1){order:1;grid-column:span 2;font-family:var(--mono);font-weight:700;font-size:14px} .as-cab table[data-carded="drip"] td:nth-child(10){order:2;grid-column:span 2;text-align:right} .as-cab table[data-carded="drip"] td:nth-child(6){order:3;grid-column:span 4;white-space:normal;overflow:visible} .as-cab table[data-carded="drip"] td:nth-child(3){order:4;grid-column:span 2} .as-cab table[data-carded="drip"] td:nth-child(2){order:5;grid-column:span 2} .as-cab table[data-carded="drip"] td:nth-child(4){order:6} .as-cab table[data-carded="drip"] td:nth-child(5){order:7} .as-cab table[data-carded="drip"] td:nth-child(9){order:8} .as-cab table[data-carded="drip"] td:nth-child(7){order:9} .as-cab table[data-carded="drip"] td:nth-child(8){order:10;grid-column:span 2} .as-cab table[data-carded="drip"] td:nth-child(11){order:11;grid-column:span 2} /* Рефилы: 1 ID, 2 дата, 3 номер заказа, 4 ссылка, 5 услуга, 6 статус. */ .as-cab table[data-carded="refill"] td:nth-child(1){order:1;grid-column:span 2;font-family:var(--mono);font-weight:700;font-size:14px} .as-cab table[data-carded="refill"] td:nth-child(6){order:2;grid-column:span 2;text-align:right} .as-cab table[data-carded="refill"] td:nth-child(5){order:3;grid-column:span 4;white-space:normal;overflow:visible} .as-cab table[data-carded="refill"] td:nth-child(4){order:4;grid-column:span 4} .as-cab table[data-carded="refill"] td:nth-child(2){order:5;grid-column:span 2} .as-cab table[data-carded="refill"] td:nth-child(3){order:6;grid-column:span 2} /* Таблица без подписей (скрипт не отработал) остаётся прокручиваемой — это запасной путь, а не поломанная вёрстка. */ .as-cab .well-float table:not([data-carded]){display:table;min-width:520px} .as-cab .well-float:has(table:not([data-carded])){ overflow-x:auto;overscroll-behavior-x:contain;padding:12px; background:var(--card);border:1px solid var(--line) } } /* И страховка на случай длинного содержимого: колонка с кнопкой остаётся на месте, даже если таблицу всё же придётся прокручивать. Только на широком экране — на телефоне таблица уже не таблица, а карточки, и sticky там сломал бы сетку. */ @media (min-width:768px){ .as-cab .well-float table:has(th:nth-child(11)) td:last-child{ position:sticky;right:0;background:var(--card) } .as-cab .well-float table:has(th:nth-child(11)) th:last-child{ position:sticky;right:0;background:var(--ink) } } /* ── статусы, бейджи ──────────────────────────────────────────────── */ .label,.badge{ display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.04em; padding:3px 8px;border-radius:0;font-weight:400 } .label-success,.badge-success{background:rgba(62,208,126,.14);color:var(--ok)} .label-warning,.badge-warning{background:rgba(255,193,7,.14);color:var(--warn)} .label-danger,.badge-danger{background:rgba(240,97,75,.14);color:var(--bad)} .label-info,.label-primary,.badge-primary{background:rgba(255,131,85,.14);color:var(--or)} .label-default{background:var(--line-soft);color:var(--dim)} /* ── алерты ───────────────────────────────────────────────────────── */ .alert{ position:relative;border:1px solid var(--line);border-left:3px solid var(--dim); border-radius:0;padding:13px 44px 13px 15px;margin-bottom:18px;background:var(--ink);color:var(--txt) } .alert-success{border-left-color:var(--ok)} .alert-danger,.alert-error{border-left-color:var(--bad)} .alert-warning{border-left-color:var(--warn)} .alert-info{border-left-color:var(--or)} .alert .close{ position:absolute;right:10px;top:9px;background:none;border:0;color:var(--dim); font-size:20px;line-height:1;opacity:1;cursor:pointer;padding:2px 6px } .alert .close:hover{color:var(--txt)} /* ── вкладки и пагинация ──────────────────────────────────────────── */ .nav-tabs,.nav-pills{display:flex;flex-wrap:wrap;gap:2px;list-style:none;padding:0;margin:0 0 20px;border-bottom:1px solid var(--line)} /* Панель фильтров на /services: кнопки — слева, поиск — к правому краю. Платформа отправляет его туда через .pull-right, но во flex-строке float ничего не делает. */ .nav-pills{gap:8px;align-items:center;padding-bottom:12px} /* align-items центрирует сами
  • , а не их содержимое: если один пункт содержит форму и оказывается выше соседнего, поле и кнопка разъезжаются по вертикали. Выравниваем и внутри пунктов. */ .nav-pills>li{display:flex;align-items:center;margin:0} .nav-pills form{margin:0} .nav-pills .form-group{margin-bottom:0} .nav-pills>li.pull-right,.nav-pills>li.search{margin-left:auto;float:none} .nav-pills>li.search .input-group{min-width:280px} @media (max-width:640px){ .nav-pills>li.pull-right,.nav-pills>li.search{margin-left:0;width:100%} .nav-pills>li.search .input-group{min-width:0;max-width:none} } .nav-tabs>li>a,.nav-pills>li>a{ /* одна высота с полем поиска: они стоят в одном ряду */ display:flex;align-items:center;min-height:40px;padding:0 16px;border:0;border-radius:0; font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--dim);background:none } .nav-tabs>li>a:hover,.nav-pills>li>a:hover{color:var(--txt);background:var(--card)} .nav-tabs>li.active>a,.nav-pills>li.active>a, .nav-tabs>li.active>a:hover,.nav-pills>li.active>a:focus{ background:var(--or);color:var(--ink);border:0 } .pagination{display:flex;gap:2px;list-style:none;padding:0;margin:22px 0 0;flex-wrap:wrap} .pagination>li>a,.pagination>li>span{ display:block;padding:8px 13px;background:transparent;border:1px solid var(--line); color:var(--dim);font-family:var(--mono);font-size:12.5px;border-radius:0 } .pagination>li>a:hover{border-color:var(--or);color:var(--or)} .pagination>li.active>a{background:var(--or);border-color:var(--or);color:var(--ink)} /* ── выпадашки ────────────────────────────────────────────────────── */ .dropdown{position:relative} .dropdown-menu{ position:absolute;right:0;top:100%;z-index:60;min-width:170px;margin:6px 0 0;padding:6px 0; background:var(--card);border:1px solid var(--line);border-radius:0;list-style:none; box-shadow:0 12px 28px rgba(0,0,0,.4);display:none } .open>.dropdown-menu{display:block} .dropdown-menu>li>a{display:block;padding:9px 15px;color:var(--txt);font-size:13.5px} .dropdown-menu>li>a:hover{background:var(--ink);color:var(--or)} .dropdown-menu>li.active>a{color:var(--or)} .dropdown-max-height{max-height:320px;overflow-y:auto} .caret{display:inline-block;width:0;height:0;margin-left:5px;vertical-align:middle; border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent} /* ── недостающий слой Bootstrap 3 ────────────────────────────────────── На живой панели bootstrap.css темы пустой: платформа отдаёт свои глобальные стили, и большинство классов ими закрыто, но у части компонентов правил нет вообще. Их приходится дописывать здесь, иначе рабочие вещи молча ломаются: кнопка View в прайсе открывала модалку с z-index:auto, и её накрывало затемнение — юзер видел, что «ничего не происходит». Проверять после правок именно так: клик по [data- description-id] и getComputedStyle(.modal).zIndex должен быть 1050. */ .modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none; overflow:hidden;outline:0;-webkit-overflow-scrolling:touch} .modal.in{display:block} .modal-open{overflow:hidden} .modal-open .modal{overflow-x:hidden;overflow-y:auto} .modal-dialog{position:relative;width:auto;margin:10px} @media (min-width:768px){.modal-dialog{width:600px;margin:38px auto}} .modal.fade .modal-dialog{transform:translateY(-18px);transition:transform .18s ease-out} .modal.in .modal-dialog{transform:none} .modal-body{position:relative;padding:16px 18px} .modal-header{padding:14px 18px} .modal-footer{padding:14px 18px;text-align:right} .modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background:#000} .modal-backdrop.fade{opacity:0} /* Три класса намеренно: общее .fade.in ниже задаёт непрозрачность 1 с той же специфичностью и, стоя позже, перебивало затемнение — подложка становилась сплошной и страница выглядела исчезнувшей. */ .modal-backdrop.fade.in,.modal-backdrop.in{opacity:.5} .fade{opacity:0;transition:opacity .15s linear} .fade.in{opacity:1} .close{float:right;padding:0;background:none;border:0;cursor:pointer; color:var(--dim);font-size:22px;line-height:1;opacity:1} .close:hover,.close:focus{color:var(--or)} .modal-content{background:var(--card);border:1px solid var(--line);border-radius:0;color:var(--txt)} .modal-header,.modal-footer{border-color:var(--line)} .modal-header .close{background:none;border:0;color:var(--dim);font-size:22px;opacity:1} /* Тултипы: девять штук в шаблонах, в том числе подсказка про среднее время в прайсе. Без позиционирования они вываливались бы в поток. */ .tooltip{position:absolute;z-index:1070;display:block;opacity:0; font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.02em} .tooltip.in{opacity:1} .tooltip-inner{max-width:260px;padding:7px 10px;background:var(--ink);color:var(--txt); border:1px solid var(--line);border-radius:0;text-align:left; white-space:normal;word-wrap:break-word} .tooltip-arrow{display:none} /* Прогресс выполнения заказа — orders.twig и refill.twig. */ .progress{height:6px;margin:6px 0;overflow:hidden;background:var(--ink); border:1px solid var(--line);border-radius:0} .progress-bar{float:left;width:0;height:100%;background:var(--or); transition:width .4s ease;font-size:0} /* Базовый сброс списков навигации — иначе появляются маркеры. */ .nav{padding-left:0;margin-bottom:0;list-style:none} .nav>li{position:relative;display:block} /* ── кабинет: классы платформы, у которых не было НИ ОДНОГО правила ── Сток красился связкой bootstrap.css + глобальных стилей платформы. bootstrap.css в этой теме пустой, а PerfectPanel-специфичных классов в глобальных нет вовсе — обход шаблонов кабинета нашёл 31 такой класс. Локальное превью это не ловит: там bootstrap.css подключается. */ /* Сетка: одиннадцатая колонка и офсет на единицу — на них построена ветка тикета (col-md-1 отступ + col-md-11 сообщение). Без ширин обе стороны переписки занимали всю строку и не различались. */ /* Переписка в тикете. Класс .titcket-title с опечаткой — платформенный, сохраняем дословно, иначе заголовок останется без стиля. */ .titcket-title{font-size:18px;font-weight:600;margin:0 0 18px;color:var(--txt)} .ticket-message-block{margin-bottom:16px} .ticket-message{ background:var(--card);border:1px solid var(--line);padding:14px 16px; border-radius:0;color:var(--txt) } /* Сообщение клиента и ответ поддержки различаем полосой слева/справа — в переписке важно с одного взгляда понимать, кто говорит. */ .ticket-message-right .ticket-message{border-right:2px solid var(--or)} .ticket-message-left .ticket-message{border-left:2px solid var(--dim2);background:var(--ink)} /* В тикетах текст приходит с переносами строк, без pre-wrap он слипается. */ .ticket-message .message{white-space:pre-wrap;word-wrap:break-word} .ticket-message-block .info{ margin-top:6px;font-family:var(--mono);font-size:11px;color:var(--dim2) } .ticket-message-block .info strong{color:var(--dim);font-weight:400} .tickets-uploader{display:block;margin-top:10px;color:var(--dim);font-size:13px} /* Крестик у сообщений об успехе налезал на текст — места под него нет. */ .alert-dismissible{position:relative;padding-right:44px} .alert-dismissible .close{position:absolute;top:9px;right:12px} .modal-title{margin:0;font-size:16px;font-weight:600;color:var(--txt)} .order-actions{white-space:nowrap;text-align:right} .order-actions .btn+.btn{margin-left:6px} .confirm-email{max-width:560px;margin:0 auto} .confirm-email__description{color:var(--dim);margin:12px 0 18px} .confirm-email__action{margin-top:18px} .border-solid{border:1px solid var(--line)} .border-rounded{border-radius:0} .panel-border-top{border-top:1px solid var(--line-soft);padding-top:16px;margin-top:16px} .rtl-form{direction:rtl;text-align:right} /* Кнопка рефилла, когда он недоступен, приходит с классом disabled и без стиля выглядела полностью рабочей — клиент жмёт, ничего не происходит. */ .btn.disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none} /* Ячейка со ссылкой на пост: без переноса длинный URL растягивал таблицу. */ td.link{word-break:break-all;max-width:320px} /* Иконка-подсказка рядом с меткой набрана в 1em, то есть КРУПНЕЕ самих заглавных букв (у 10px моношрифта капитель около 7px), и вдобавок свисала на 2.3px ниже базовой линии. У прописного текста выносных элементов нет, поэтому глаз читает это как «значок уехал вниз». Уменьшаем до высоты капители и сажаем на базовую линию. */ .control-label .fa,.control-label .fas,.control-label .far, th .fa,th .fas,th .far{ width:.82em;height:.82em;vertical-align:baseline;position:relative;top:.06em } /* ── подвал ───────────────────────────────────────────────────────── */ .as-foot{background:var(--ink);border-top:1px solid var(--line);margin-top:56px;padding:38px 0 24px} .as-foot__grid{display:grid;gap:26px;grid-template-columns:1fr 1fr} @media (min-width:768px){.as-foot__grid{grid-template-columns:1.5fr 1fr 1fr 1fr}} .as-foot h3{margin-bottom:11px} .as-foot ul{list-style:none;padding:0;margin:0} .as-foot li{padding:4px 0} .as-foot li a{color:var(--dim);font-size:13.5px} .as-foot li a:hover{color:var(--or)} .as-foot__about{color:var(--dim);font-size:13.5px;max-width:36ch} .as-foot__bottom{ margin-top:26px;padding-top:16px;border-top:1px solid var(--line-soft); display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; font-family:var(--mono);font-size:11px;color:var(--dim2) } .as-foot__bottom b{color:var(--ok);font-weight:400} .as-foot__bottom a{color:var(--dim2)} .as-foot__bottom a:hover{color:var(--txt)} /* ── витрина: главная ─────────────────────────────────────────────── */ .as-hero{display:grid;gap:28px;padding:44px 0 40px} @media (min-width:992px){ .as-hero{grid-template-columns:1fr 320px;column-gap:44px;row-gap:34px;padding:56px 0 52px} .as-hero__lead{grid-column:1;grid-row:1} .as-hero__auth{grid-column:2;grid-row:1/span 2} .as-board{grid-column:1;grid-row:2} } .as-hero h1{margin:14px 0} .as-hero h1 b{font-family:var(--mono);font-weight:600;color:var(--or);letter-spacing:-.03em} .as-hero__sub{color:var(--dim);max-width:56ch;font-size:15px;margin:0} .as-hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px} .as-board{border-top:1px solid var(--line);margin-top:8px} .as-board__row{ display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center; padding:11px 0;border-bottom:1px solid var(--line-soft);color:var(--txt) } .as-board__row:hover{background:var(--card)} .as-board__head{padding:8px 0;border-bottom:1px solid var(--line)} .as-board__head span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2)} .as-board__svc,.as-board__cnt{display:none} @media (min-width:700px){ .as-board__row{grid-template-columns:150px 1fr 96px 92px} .as-board__svc,.as-board__cnt{display:block} } .as-board__plat{font-weight:600} .as-board__svc{color:var(--dim);font-size:13.5px} .as-board__rate{font-family:var(--mono);color:var(--or);text-align:right} .as-board__cnt{font-family:var(--mono);font-size:11px;color:var(--dim2);text-align:right} .as-board__all{ display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; padding:14px 0;font-family:var(--mono);font-size:12px;color:var(--dim) } .as-hero__auth .well{background:var(--ink);margin:0} .as-hero__auth .form-control,.as-hero__auth select{max-width:100%;width:100%} .as-facts{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:9px} .as-facts div{ display:flex;justify-content:space-between;gap:10px;align-items:baseline; font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim2) } .as-facts b{color:var(--txt);font-weight:400} .as-proof{background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .as-proof ul{display:grid;grid-template-columns:1fr 1fr;list-style:none;margin:0;padding:0} @media (min-width:768px){.as-proof ul{grid-template-columns:repeat(4,1fr)}} .as-proof li{padding:22px 20px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} @media (min-width:768px){.as-proof li{border-bottom:0}.as-proof li:last-child{border-right:0}} .as-proof__v{font-family:var(--mono);font-size:clamp(21px,3vw,29px);font-weight:700;letter-spacing:-.02em} .as-proof__k{margin-top:5px} /* Только по вертикали. Сокращённая запись `padding:46px 0` стояла ниже `.as-wrap{padding:0 20px}` при равной специфичности и обнуляла боковые поля везде, где классы стоят вместе (4 секции из 7 на главной): на телефоне заголовки и абзацы упирались в самый край экрана. */ .as-sec{padding-top:46px;padding-bottom:46px} .as-sec--tight{padding-top:0} .as-sec__h{display:flex;align-items:baseline;gap:14px;margin-bottom:24px} .as-sec__h h2{margin:0} .as-sec__rule{flex:1;height:1px;background:var(--line-soft)} .as-tiles{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);grid-template-columns:1fr 1fr} @media (min-width:640px){.as-tiles{grid-template-columns:repeat(3,1fr)}} @media (min-width:992px){.as-tiles{grid-template-columns:repeat(4,1fr)}} .as-tile{background:var(--bg);padding:18px;display:grid;gap:5px;color:var(--txt)} .as-tile:hover{background:var(--card);color:var(--txt)} .as-tile b{font-size:14px;font-weight:600} .as-tile__p{font-family:var(--mono);color:var(--or);font-size:16px} .as-steps{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)} @media (min-width:768px){.as-steps{grid-template-columns:repeat(3,1fr)}} .as-step{background:var(--bg);padding:22px;display:grid;gap:8px;align-content:start} .as-step__n{font-family:var(--mono);color:var(--or);font-size:12px} .as-step b{font-size:15px;font-weight:600} .as-step p{color:var(--dim);font-size:13.5px;margin:0} .as-faq>div{border-top:1px solid var(--line-soft);padding:18px 0;display:grid;gap:7px} .as-faq>div:last-child{border-bottom:1px solid var(--line-soft)} .as-faq b{font-size:14.5px;font-weight:600} .as-faq p{color:var(--dim);font-size:13.5px;max-width:74ch;margin:0} .as-resell{border:1px solid var(--line);background:var(--ink);padding:24px;display:grid;gap:20px} @media (min-width:992px){ .as-resell{grid-template-columns:250px 1fr;column-gap:34px;grid-template-rows:auto 1fr;align-items:start;padding:28px 30px} .as-resell__t{grid-column:1;grid-row:1} .as-resell__l{grid-column:2;grid-row:1/span 2} .as-resell__a{grid-column:1;grid-row:2;flex-direction:column;gap:10px;align-items:start} } .as-resell__t{display:grid;gap:9px} .as-resell__t b{font-size:16px;font-weight:600;line-height:1.35} .as-resell__l{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);list-style:none;margin:0;padding:0} @media (min-width:640px){.as-resell__l{grid-template-columns:1fr 1fr}} .as-resell__l li{background:var(--ink);padding:13px 15px;display:grid;gap:3px} .as-resell__l .k{font-family:var(--mono);font-size:12px;color:var(--or)} .as-resell__l .v{font-size:12.5px;color:var(--dim)} .as-resell__a{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:12px} .as-resell__a a{border-bottom:1px solid var(--or-d);padding-bottom:2px} /* ── страница API ─────────────────────────────────────────────────── */ .as-routes{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)} /* Фон контейнера виден только в зазорах между карточками, поэтому число колонок обязано делить число карточек: при 4 карточках в 3 колонки две пустые ячейки превращались в светлое пятно на пол-ряда. */ @media (min-width:760px){.as-routes{grid-template-columns:repeat(2,1fr)}} .as-route{background:var(--bg);padding:22px;display:grid;gap:8px;align-content:start} .as-route h3{margin:2px 0 0;font-size:17px} .as-route p{color:var(--dim);font-size:13.5px;margin:0} .as-route ol{margin:8px 0 0;padding-left:18px;color:var(--dim);font-size:13.5px} .as-route li{margin-bottom:5px} .as-route code{font-size:12.5px;color:var(--or);background:var(--ink);padding:1px 5px; /* break-all рвал даже короткие слова: «balance» разъезжалось на «b|alance». Переносим только то, что иначе не влезет. */ word-break:normal;overflow-wrap:anywhere} .as-code{border:1px solid var(--line);background:var(--ink)} .as-code__bar{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:9px 14px;border-bottom:1px solid var(--line); font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2) } .as-code pre{ /* background обязателен: bootstrap.css красит любой 
     в #f5f5f5,
     и без явного фона блок кода выходит светлым пятном на тёмной теме. */
  margin:0;padding:18px 16px;overflow-x:auto;font-family:var(--mono);
  font-size:12.5px;line-height:1.62;color:#DDD8DA;white-space:pre;tab-size:2;
  background:var(--ink);border:0;border-radius:0
}
.as-copy{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:1px solid var(--line);color:var(--dim);padding:5px 11px;cursor:pointer
}
.as-copy:hover{border-color:var(--or);color:var(--or)}
.as-copy[data-done="1"]{border-color:var(--ok);color:var(--ok)}
.as-faq code{font-size:12.5px;color:var(--or);background:var(--ink);padding:1px 5px}

/* ── контентные страницы (блог, лендинги, terms) ──────────────────── */
.as-article{max-width:76ch;margin:0 auto;padding:40px 0 10px}
.as-article h1{margin-bottom:.5em}
.as-article h2{margin-top:1.7em;font-size:21px}
.as-article h3{margin-top:1.4em;font-size:17px}
.as-article p,.as-article li{color:#E4E0E2;font-size:15.5px;line-height:1.68}
.as-article ul,.as-article ol{padding-left:20px;margin:0 0 1.2em}
.as-article li{margin-bottom:.45em}
.as-article a{border-bottom:1px solid var(--or-d)}
.as-article strong{color:var(--txt);font-weight:600}
.as-article table{margin:0 0 1.4em}
.as-article code{background:var(--ink);padding:2px 6px;font-size:13.5px;color:var(--or)}
.as-article blockquote{border-left:2px solid var(--or);padding-left:16px;margin:0 0 1.2em;color:var(--dim)}
/* Та же ловушка, что и у `.as-sec`: сокращённая запись съедала боковые поля
   `.as-wrap` на шапках /services, /api, /blog, /terms. Только вертикаль. */
.as-page-head{border-bottom:1px solid var(--line-soft);padding-top:40px;padding-bottom:22px}
.as-page-head p{color:var(--dim);margin:8px 0 0;max-width:70ch}
/* На странице регистрации заголовок должен стоять над карточкой, а не
   уезжать к левому краю, пока форма центрирована. */
.as-page-head--narrow{border-bottom:0}
.as-page-head--narrow>*{max-width:460px;margin-left:auto;margin-right:auto}
/* у абзаца своё правило с margin:8px 0 0 — оно обнуляло боковые auto,
   и подзаголовок уезжал к левому краю, пока заголовок стоял над карточкой */
.as-page-head--narrow p{max-width:460px;margin:8px auto 0}

/* ── список постов ───────────────────────────────────────────────── */
.as-postlist{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.as-post{background:var(--bg);padding:24px;display:grid;gap:14px}
/* Две колонки — только если у поста есть картинка. Иначе текст попадал
   в узкую колонку под превью, а широкая оставалась пустой. */
@media (min-width:768px){
  .as-post:has(.as-post__img){grid-template-columns:220px 1fr;gap:24px;align-items:start}
}
.as-post__body{max-width:78ch}
.as-post__img img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.as-post__body h2{font-size:19px;margin:0 0 8px}
.as-post__body h2 a{color:var(--txt)}
.as-post__body h2 a:hover{color:var(--or)}
.as-post__excerpt{color:var(--dim);font-size:13.5px}
.as-post__excerpt p{margin:0 0 .5em}
.as-post__more{font-family:var(--mono);font-size:12px;display:inline-block;margin-top:10px}
.as-post__back{padding-top:0;font-family:var(--mono);font-size:12.5px}
.as-page-head .as-lbl a{color:var(--dim2)}
.as-page-head .as-lbl a:hover{color:var(--or)}

/* карточка входа/регистрации по центру */
.as-auth-card{max-width:460px;margin:0 auto}
.as-auth-card .form-control,.as-auth-card select{max-width:100%;width:100%}

/* ── блоки для контентных страниц ────────────────────────────────────
   Ими собираются лендинги и статьи прямо в HTML-поле страницы: разметку
   можно вставить в Summernote, тема её оформит. Цифры остаются текстом,
   значит Google их читает, а обновлять их можно без картинок. */

/* ценовое табло платформы */
.as-article .as-pricebox{border:1px solid var(--line);margin:0 0 1.6em;overflow-x:auto}
.as-pricebox table{width:100%;border-collapse:collapse;margin:0;min-width:460px}
.as-pricebox th{
  text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim2);font-weight:400;padding:11px 14px;background:var(--ink);border-bottom:1px solid var(--line)
}
.as-pricebox td{padding:12px 14px;border-bottom:1px solid var(--line-soft);font-size:14px}
.as-pricebox tr:last-child td{border-bottom:0}
.as-pricebox td:first-child{font-weight:600}
.as-pricebox .p{font-family:var(--mono);color:var(--or);white-space:nowrap}
.as-pricebox .m{font-family:var(--mono);color:var(--dim);font-size:13px;white-space:nowrap}

/* легенда тегов в названиях услуг */
.as-article .as-tags{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin:0 0 1.6em;padding:0;list-style:none}
@media (min-width:640px){.as-article .as-tags{grid-template-columns:1fr 1fr}}
.as-article .as-tags li{background:var(--bg);padding:13px 15px;margin:0;display:grid;gap:3px}
.as-tags .k{font-family:var(--mono);font-size:12.5px;color:var(--or)}
.as-tags .v{font-size:13px;color:var(--dim)}

/* полоса живых цифр */
.as-article .as-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);margin:0 0 1.6em;padding:0;list-style:none
}
@media (min-width:640px){.as-article .as-stats{grid-template-columns:repeat(4,1fr)}}
.as-article .as-stats li{background:var(--ink);padding:18px 16px;margin:0}
.as-stats .n{display:block;font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-.02em}
.as-stats .t{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);margin-top:6px}

/* врезка: честная оговорка или предупреждение */
.as-article .as-note{
  border:1px solid var(--line);border-left:3px solid var(--or);background:var(--ink);
  padding:16px 18px;margin:0 0 1.6em
}
.as-article .as-note p{margin:0;font-size:14px;color:var(--dim)}
.as-article .as-note p+p{margin-top:.7em}
.as-article .as-note b{color:var(--txt)}
.as-article .as-note--warn{border-left-color:var(--warn)}

/* сравнение двух вариантов */
.as-article .as-compare{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin:0 0 1.6em}
@media (min-width:640px){.as-article .as-compare{grid-template-columns:1fr 1fr}}
.as-compare > div{background:var(--bg);padding:18px}
.as-compare h4{margin:0 0 8px;font-size:15px}
.as-compare p{margin:0;font-size:13.5px;color:var(--dim)}
.as-compare .tag{
  display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim2);margin-bottom:8px
}

/* ── /services ────────────────────────────────────────────────────── */
.as-services__bar{
  position:sticky;top:0;z-index:30;background:var(--bg);
  padding:14px 0;border-bottom:1px solid var(--line);margin-bottom:0
}
.as-services__bar .form-control{max-width:100%}
/* Липкой шапки таблицы здесь нет намеренно: карточка с таблицей —
   горизонтально прокручиваемый контейнер, и position:sticky в нём
   прилипает к нему же, а не к окну. Правило было бы мёртвым. */
.service-table__category,.services-list__category td{
  background:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--or)
}
.services-list__description .btn{padding:5px 11px;font-size:12px}


/* ── иконки без Font Awesome ──────────────────────────────────────────
   Стоковые шаблоны зовут FA-классы, причём services.twig использует
   `fal fa-filter` — это Pro-начертание, в бесплатной сборке его нет, и на
   его месте рисуется чёрный квадрат. Отвязываемся: гасим глиф шрифта и
   рисуем свои маски, они наследуют currentColor и работают всегда. */
/* Только если браузер умеет маски. Иначе background-color:currentColor
   остался бы без маски и иконка превратилась бы в сплошной квадрат. */
@supports ((mask-image:url('')) or (-webkit-mask-image:url(''))){
.fa,.fas,.far,.fal,.fab{
  display:inline-block;width:1em;height:1em;vertical-align:-.125em;
  background-color:currentColor;font-style:normal;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain
}
.fa::before,.fas::before,.far::before,.fal::before,.fab::before{content:none}
}
.fa-search{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.fa-filter{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.fa-star{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.fa-exclamation-circle{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.fa-file-alt{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.fa-comment-alt-lines{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
/* незакрашенная звезда в списке услуг */
.far.fa-star{opacity:.45}
.favorite-active .fa-star,.fas.fa-star{opacity:1;background-color:var(--or)}


/* ── перебиваем Bootstrap 3 ───────────────────────────────────────────
   bootstrap.css грузится темой перед style.css, и часть его селекторов
   специфичнее моих. Ниже — ровно те места, где он выигрывал. */

/* активный пункт меню бутстрап красит светлой плашкой */
.navbar-default .navbar-nav>li>a{color:var(--dim)}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus{color:var(--txt);background:none}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus{background:none;color:var(--or)}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover{background:none;color:var(--or)}
.navbar-default{background:var(--ink);border-color:var(--line-soft)}
.navbar-default .navbar-toggle{border-color:var(--line)}
.navbar-default .navbar-toggle:hover{background:var(--card)}
.navbar-default .navbar-toggle .icon-bar{background:var(--txt)}
.navbar-default .navbar-collapse{border-color:var(--line-soft)}

/* readonly и disabled поля бутстрап заливает светло-серым */
.form-control[readonly],.form-control[disabled],
fieldset[disabled] .form-control,select[disabled]{
  background:var(--ink);color:var(--dim);opacity:1;cursor:default
}

/* label с галкой внутри (согласие с условиями) — обычный текст, не метка поля */
.control-label.terms,label.terms,
.form-group>label:has(input[type="checkbox"]),
.form-group>label:has(input[type="radio"]){
  display:flex;align-items:flex-start;gap:9px;
  font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;color:var(--txt)
}

/* поле с иконкой или кнопкой сбоку */
.input-group{display:flex;width:100%;max-width:640px;min-width:0}
/* min-width:0 обязателен: у  собственный минимальный размер
   (по атрибуту size ~20 символов), из-за него поле не сжимается и
   выталкивает кнопку поиска за край экрана. */
.input-group>.form-control,.input-group .form-control{
  flex:1 1 auto;width:auto;min-width:0;max-width:none;height:40px;padding-block:0
}
/* Поле и кнопка должны быть одной высоты и с общей границей. Раньше у поля
   срезалась правая граница, у кнопки левая — при наводке оранжевая рамка
   получалась разомкнутой, а высоты расходились на 6px. Теперь границы
   полные, а кнопка наезжает на поле на 1px и при наводке всплывает наверх. */
.input-group .btn{height:40px;padding-block:0}
.input-group-btn{margin-left:-1px}
.input-group-btn .btn{border:1px solid var(--line)}
.input-group-btn .btn:hover,.input-group-btn .btn:focus{
  border-color:var(--or);color:var(--or);position:relative;z-index:2
}
.input-group-btn,.input-group>.input-group-btn{
  /* Bootstrap задаёт .input-group-btn{width:1%} — во flex-контейнере это
     буквально 1% ширины, и кнопка вылезает из своей обёртки наружу. */
  display:flex;flex:0 0 auto;width:auto
}
.input-group-btn .btn{border-radius:0}
.input-group-addon{
  display:flex;align-items:center;padding:0 13px;background:var(--ink);
  border:1px solid var(--line);color:var(--dim);font-size:13px
}
/* платформа кладёт иконку поиска поверх поля через ::before у обёртки */
.search-dropdown{position:relative;max-width:560px}
.search-dropdown .form-control{padding-left:40px}
.search-dropdown .input-wrapper{position:relative}
.search-dropdown .input-wrapper>button{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;color:var(--dim2);cursor:pointer;z-index:2}
/* Четыре класса намеренно: платформенное
   `.search-dropdown .input-wrapper .form-control{padding-left:calc(10px + 24px)}`
   грузится позже моего файла и иначе выигрывает. */
.search-dropdown .input-wrapper>input.form-control{padding-left:44px}
.search-dropdown>i,.search-dropdown>svg,.search-dropdown .fa,
.search-dropdown [class^="fa-"],.search-dropdown [class*=" fa-"]{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--dim2);pointer-events:none;z-index:2
}

/* На узком экране прокручивается ТАБЛИЦА внутри карточки, а не страница.
   Скроллим саму .well, а не таблицу: у стоковых шаблонов таблица лежит
   прямо в .well без обёртки .table-responsive, добавить её нельзя —
   разметку кабинета мы не трогаем. */
/* Не влезающая таблица прокручивается внутри своей карточки на ЛЮБОЙ
   ширине: заказы не помещаются и в 768px, и в 1000px. */
/* Запасной вариант для браузеров без :has() (Firefox <121, Safari <15.4):
   таблица прокручивается сама, страница остаётся на месте. */
@supports not selector(:has(table)){
  .well table,.panel table{display:block;overflow-x:auto;max-width:100%}
}
.well:has(table),.panel:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch}
.well:has(table)::-webkit-scrollbar{height:6px}
.well:has(table)::-webkit-scrollbar-thumb{background:var(--line)}
/* Карточки шире экрана быть не должны — их из этого правила исключаем. */
@media (max-width:767px){
  .well table:not([data-carded]),.panel table:not([data-carded]){min-width:520px}
}

/* Центровка контента. Стоковые шаблоны верстают колонку через
   col-md-8 + col-md-offset-2. В настоящем Bootstrap это float-сетка, а у нас
   строка — flex, и офсет в процентах даёт перекос (было 366px слева против
   176px справа). Офсеты гасим и центрируем колонку самой строкой. */
@media (min-width:992px){
  .row{justify-content:center}
  [class*="col-"][class*="offset"]{margin-left:0}
}

/* Форма в широкой карточке не должна плавать в пустоте: поля 560px,
   карточка под них. Карточки с таблицами при этом остаются во всю ширину. */
.as-main .well:not(:has(table)):not(.as-hero__auth .well){max-width:620px;margin-inline:auto}
.as-main .well:has(table),.as-main .well.api{max-width:none}

/* ── кабинет: мелкие правки поверх стока ──────────────────────────── */
.well-float{width:auto;min-width:100%}
@media (max-width:991px){.well-float{width:auto;min-width:0}}
/* Платформа делает карточку плавающей, а float-блок сжимается по
   содержимому: широкая таблица растягивает его и уносит страницу вбок,
   и никакой overflow внутри уже не спасает. Плавать ей не нужно. */
.well,.well-float,.panel{float:none}
.navbar+.as-main,.navbar+.container,.navbar+.container-fluid{padding-top:30px}
#notify-wrapper{position:fixed;right:18px;bottom:18px;z-index:900;max-width:340px}

/* ── выбор площадки над формой заказа и над прайсом ────────────────
   Сетку наполняет script.js, до этого блок скрыт атрибутом hidden. */
.as-netfilter{
  border:1px solid var(--line);background:var(--ink);margin:0 0 22px
}
/* На форме заказа равняем по карточке формы: у `.well` без таблицы в теме
   max-width 620px и авто-поля, иначе фильтр торчал бы на 58 px с каждой
   стороны. На прайсе таблица во всю ширину — там ограничивать нельзя. */
.col-md-8>.as-netfilter{max-width:620px;margin-inline:auto}
.as-netfilter__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-bottom:1px solid var(--line-soft)
}
.as-netfilter__t{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim2)
}
.as-netfilter__toggle{
  background:none;border:0;padding:0;cursor:pointer;color:var(--dim);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase
}
.as-netfilter__toggle:hover{color:var(--or)}
.as-netfilter__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line-soft);border-top:1px solid var(--line-soft)
}
@media (min-width:560px){.as-netfilter__grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:860px){.as-netfilter__grid{grid-template-columns:repeat(4,1fr)}}
.as-netfilter.is-folded .as-netfilter__grid{display:none}
.as-net{
  display:flex;align-items:center;gap:9px;min-width:0;
  padding:13px 14px;background:var(--ink);border:0;cursor:pointer;
  color:var(--txt);font-family:var(--sans);font-size:13.5px;text-align:left;
  transition:background .12s ease,color .12s ease
}
.as-net__i{font-size:15px;line-height:1;width:20px;flex:none;text-align:center;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--sans)}
.as-net__n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-net:hover{background:var(--card)}
.as-net.is-on{background:var(--or);color:var(--ink);font-weight:600}

.as-net:focus-visible{outline:2px solid var(--or);outline-offset:-2px}

/* ── Select2 ──────────────────────────────────────────────────────────
   Платформа сама превращает `