/* ═══════════════════════════════════════════════════════════════════════
   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}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  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-"]{padding:0 12px;width:100%;
  /* 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-12{width:100%}
  .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
}

/* ── лента цен ────────────────────────────────────────────────────── */
.as-tape{background:var(--ink);border-bottom:1px solid var(--line-soft);overflow:hidden;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){
  .as-tape{overflow-x:auto;scrollbar-width:none}
  .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%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.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}
.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)}
.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}
/* колонка ссылки в заказах: ограничиваем только там, иначе ломает /services */
.table-orders .width-40{width:40%;max-width:0;overflow:hidden;text-overflow:ellipsis}

/* ── статусы, бейджи ──────────────────────────────────────────────── */
.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 центрирует сами <li>, а не их содержимое: если один пункт
   содержит форму и оказывается выше соседнего, поле и кнопка разъезжаются
   по вертикали. Выравниваем и внутри пунктов. */
.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}

/* ── модалки ──────────────────────────────────────────────────────── */
.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}
.modal-backdrop{background:#000}

/* ── подвал ───────────────────────────────────────────────────────── */
.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}

.as-sec{padding:46px 0}
.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)}
@media (min-width:900px){.as-routes{grid-template-columns:repeat(3,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;word-break:break-all}

.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 красит любой <pre> в #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-page-head{border-bottom:1px solid var(--line-soft);padding:40px 0 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M7 1a6 6 0 104.47 10.03l3.25 3.25 1.06-1.06-3.25-3.25A6 6 0 007 1zm0 1.5a4.5 4.5 0 110 9 4.5 4.5 0 010-9z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M7 1a6 6 0 104.47 10.03l3.25 3.25 1.06-1.06-3.25-3.25A6 6 0 007 1zm0 1.5a4.5 4.5 0 110 9 4.5 4.5 0 010-9z'/></svg>")}
.fa-filter{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1 2h14l-5.6 6.6V14L6.6 12.4V8.6z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1 2h14l-5.6 6.6V14L6.6 12.4V8.6z'/></svg>")}
.fa-star{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1.6l1.9 3.9 4.3.6-3.1 3 .7 4.3L8 11.4 4.2 13.4l.7-4.3-3.1-3 4.3-.6z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1.6l1.9 3.9 4.3.6-3.1 3 .7 4.3L8 11.4 4.2 13.4l.7-4.3-3.1-3 4.3-.6z'/></svg>")}
.fa-exclamation-circle{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1a7 7 0 100 14A7 7 0 008 1zm-.9 3h1.8l-.25 5.2H7.35zm.9 6.6a1 1 0 110 2 1 1 0 010-2z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1a7 7 0 100 14A7 7 0 008 1zm-.9 3h1.8l-.25 5.2H7.35zm.9 6.6a1 1 0 110 2 1 1 0 010-2z'/></svg>")}
.fa-file-alt{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 1h6l4 4v10H3zm6 1.2V5h2.8zM5 8h6v1.1H5zm0 2.6h6v1.1H5z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 1h6l4 4v10H3zm6 1.2V5h2.8zM5 8h6v1.1H5zm0 2.6h6v1.1H5z'/></svg>")}
.fa-comment-alt-lines{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 2h12v9H8.4L4.6 14v-3H2zm2.4 2.6h7.2v1.1H4.4zm0 2.6h5v1.1h-5z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 2h12v9H8.4L4.6 14v-3H2zm2.4 2.6h7.2v1.1H4.4zm0 2.6h5v1.1h-5z'/></svg>")}
/* незакрашенная звезда в списке услуг */
.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 обязателен: у <input> собственный минимальный размер
   (по атрибуту 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{color:var(--dim2);cursor:pointer;z-index:2}
.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,.panel table{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}

/* печать: чернила на бумагу */
@media print{
  body{background:#fff;color:#000}
  .navbar,.as-tape,.as-foot,.btn{display:none}
}