:root {
  /* === MyPortal design tokens — ecru + blue === */
  --bg:            #F5F0E6;   /* écru: тёплый светлый фон */
  --surface:       #FCFAF4;   /* карточки/поля: чуть теплее белого */
  --surface-2:     #EFE9DC;   /* hover/слоты: темнее фона */
  --border:        #E3DCCB;   /* границы: тёплый беж, не серый */
  --text:          #2B2620;   /* основной текст: тёплый почти-чёрный */
  --text-muted:    #7A7060;   /* вторичный: приглушённый коричнево-серый */
  --primary:       #8B6A45;   /* тёплый коричневый акцент (в тон экрю) */
  --primary-hover: #755838;
  --primary-soft:  #E8DDC8;   /* мягкая тёплая подложка */
  --danger:        #C9503F;
  --success:       #5A8B4A;   /* тёплый красный, под стать экрю */
  --radius:        0.5rem;
  --radius-sm:     0.375rem;
  --space:         1rem;

  /* === Bootstrap 5.3 bridge === */
  --bs-primary:           var(--primary);
  --bs-primary-rgb:       139, 106, 69;
  --bs-body-bg:           var(--bg);
  --bs-body-color:        var(--text);
  --bs-secondary-color:   var(--text-muted);
  --bs-border-color:      var(--border);
  --bs-border-radius:     var(--radius);
  --bs-border-radius-sm:  var(--radius-sm);
  --bs-link-color:        var(--primary);
  --bs-link-hover-color:  var(--primary-hover);
  --bs-link-color-rgb:    139, 106, 69;

  /* поверхности: карточки, модалки, dropdown — один цвет */
  --bs-card-bg:           var(--surface);
  --bs-card-border-color: var(--border);
  --bs-card-cap-bg:       var(--surface);
  --bs-tertiary-bg:       var(--surface-2);
  --bs-secondary-bg:      var(--surface-2);
  --bs-emphasis-color:    var(--text);
  --bs-heading-color:     var(--text);

  /* list-group */
  --bs-list-group-bg:             transparent;
  --bs-list-group-color:          var(--text);
  --bs-list-group-border-color:   var(--border);
  --bs-list-group-action-hover-bg: var(--surface-2);
  --bs-list-group-action-active-bg: var(--surface-2);

  /* tables */
  --bs-table-bg:           transparent;
  --bs-table-color:        var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg:   var(--surface);
  --bs-table-striped-color: var(--text);
  --bs-table-active-bg:    var(--surface-2);
  --bs-table-hover-bg:     var(--surface-2);
  --bs-table-hover-color:  var(--text);

  /* forms */
  --bs-form-control-bg:    var(--surface);
  --bs-body-bg-rgb:        239, 231, 211;

  /* dropdown / modal / offcanvas / accordion / navbar */
  --bs-dropdown-bg:        var(--surface);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-bg: var(--surface-2);
  --bs-dropdown-link-hover-color: var(--text);
  --bs-modal-bg:           var(--surface);
  --bs-modal-color:        var(--text);
  --bs-modal-border-color: var(--border);
  --bs-offcanvas-bg:       var(--surface);
  --bs-accordion-bg:       var(--surface);
  --bs-accordion-color:    var(--text);
  --bs-accordion-border-color: var(--border);
  --bs-accordion-btn-color: var(--text);
  --bs-accordion-active-bg: var(--surface-2);
  --bs-accordion-active-color: var(--text);
  --bs-navbar-bg:          var(--surface);
  --bs-navbar-color:       var(--text);
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--primary);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin: 0;
  
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* === FAB speed-dial (новая навигация) === */

.mp-fab {
  --mp-fab-bottom: 24px;
  --mp-fab-left: 24px;
  position: fixed;
  left: var(--mp-fab-left);
  bottom: var(--mp-fab-bottom);
  z-index: 1030;
  width: 60px;
  height: 60px;
  pointer-events: none;
  font-family: inherit;
  transition: opacity .25s ease, transform .3s ease;
}
.mp-fab > * { pointer-events: auto; }
.mp-fab-toggle {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 14px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(139,106,69,.30);
  transition: transform .15s ease, background .15s ease, opacity .25s ease;
  -webkit-tap-highlight-color: transparent;
  opacity: .7;
}
.mp-fab-toggle:hover { background: var(--primary-hover); opacity: 1; }
.mp-fab-toggle:active { transform: scale(.94); }
.mp-fab.is-open .mp-fab-toggle { background: #495057; opacity: 1; }
.mp-fab.is-open .mp-fab-toggle:hover { background: #343a40; }
.mp-fab-item {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-size: 22px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: background .15s ease, color .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.mp-fab-item:hover { background: var(--surface-2); color: var(--primary); }
.mp-fab-item:active { transform: scale(.94); }
.mp-fab-item.is-active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary-soft);
}
.mp-fab-soon {
  color: var(--text-muted);
  background: var(--surface-2);
  cursor: not-allowed;
  opacity: .7;
}
.mp-fab-soon:hover { background: var(--surface-2); color: var(--text-muted); }
.mp-fab-col {
  position: absolute;
  left: 0;
  bottom: calc(60px + 8px);
  display: grid;
  grid-template-columns: 60px 60px;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .25s ease, visibility .2s;
}
.mp-fab.is-open .mp-fab-col {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mp-fab-row {
  position: absolute;
  left: calc(60px + 8px);
  bottom: 4px;
  display: flex;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: opacity .2s ease, transform .25s ease, visibility .2s;
}
.mp-fab.is-open .mp-fab-row {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mp-count {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.mp-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--surface);
  box-sizing: border-box;
}
.mp-fab-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1020;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.mp-fab-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

html { min-height: 100%; }
body { min-height: 100%; padding-bottom: 120px; }


/* Скрытие текста для screen-reader (замена Bootstrap sr-only) */
.mp-visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* Мобильные: поднимаем FAB над нижней панелью браузера */
@media (max-width: 768px) {
  .mp-fab { --mp-fab-bottom: 24px; }
}


/* === Дефолтное меню (Android-style bottom nav) === */
.mp-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  height: 60px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
.mp-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 11px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.mp-bottom-nav__item:active { background: var(--surface-2); }
.mp-bottom-nav__item.is-active { color: var(--primary); }
.mp-bottom-nav__icon { font-size: 20px; line-height: 1; position: relative; }
.mp-bottom-nav__soon { color: var(--text-muted); cursor: not-allowed; opacity: .7; }
.mp-bottom-nav .mp-count {
  position: absolute;
  top: -4px; right: -12px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}


/* Пилот Товары (i18n): общий класс кликабельной картинки для Trade */
.mp-image-clickable {
    max-width: 100%;
    border-radius: 8px;
    cursor: zoom-in;
}

/* === Поисковая строка === */
.mp-searchbar {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.mp-searchbar__form {
  display: flex;
  gap: 6px;
  position: relative;
}
.mp-searchbar__input {
  flex: 1;
  padding: 9px 12px;
  font-size: 16px;            /* iOS: <16px → зум при фокусе */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.mp-searchbar__input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(139,106,69,.18);
}
.mp-searchbar__btn {
  width: 44px;
  border: none;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background .15s;
}
.mp-searchbar__btn:hover { background: var(--primary-hover); }
.mp-searchbar__suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 50px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 100;
  display: none;
  max-height: 320px;
  overflow: auto;
  box-shadow: 0 4px 12px rgba(43,38,32,.10);
}
.mp-sug-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.mp-sug-item:last-child { border-bottom: none; }
.mp-sug-item:hover { background: var(--surface-2); }

/* === Футер === */
.footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.footer__langs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  font-size: 12px;
}
.footer__langs a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
}
.footer__langs a:hover {
  color: var(--primary);
  background: var(--primary-soft);
}
.footer__logout { display: inline; margin-left: auto; }

/* === Toast-уведомление (было в JS inline) === */
.mp-toast {
  position: fixed;
  bottom: 80px; left: 12px; right: 12px;
  max-width: 400px;
  margin: auto;
  background: var(--primary);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(43,38,32,.28);
  z-index: 9999;
  cursor: pointer;
  display: none;
}
.mp-toast__from { font-size: 12px; opacity: .85; }
.mp-toast__text { margin-top: 2px; }

/* === Auth pages (эталон: Login, Register, ...) === */
.auth-wrap {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: 0 4px 20px rgba(43, 38, 32, .06);
}
.auth-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}
.auth-sub {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 20px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.auth-field input,
.auth-field select {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.auth-field input:focus,
.auth-field select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(139, 106, 69, .18);
}
.auth-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  margin-top: 2px;
}
.auth-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}
.auth-submit {
  margin-top: 6px;
  width: 100%;
  padding: 11px 16px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.auth-submit:hover { background: var(--primary-hover); }
.auth-submit:active { transform: scale(.98); }
.auth-alt {
  text-align: center;
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

/* === Public info pages (404, Error) === */
.page-message {
  max-width: 560px;
  margin: 72px auto;
  padding: 0 20px;
  text-align: center;
}
.page-message__icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 16px;
  color: var(--primary);
}
.page-message__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 10px;
}
.page-message__text {
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 24px;
}
.page-message__meta {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 20px;
}
.page-message__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-main, .btn-soft {
  display: inline-block;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.btn-main {
  color: #fff;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-hover) 100%);
}
.btn-main:hover { color: #fff; }
.btn-main:active { transform: scale(.98); }
.btn-soft {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
}
.btn-soft:hover { color: var(--text); background: var(--surface-2); }

/* === Auth: расширения === */
.auth-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
}
.auth-card--wide { max-width: 480px; }
.auth-hint {
  color: var(--text-muted);
  font-size: 12px;
  margin: 6px 0 0;
}

/* Bootstrap list-group по умолчанию белый — перебиваем поверх всего */
.list-group-item {
  background-color: transparent;
  color: var(--text);
  border-color: var(--border);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--surface-2);
  color: var(--text);
}
.list-group-item.active {
  background-color: var(--primary-soft);
  color: var(--text);
  border-color: var(--border);
}

/* Таблицы — тоже прозрачные, в тон фону */
.table {
  --bs-table-bg: transparent;
  color: var(--text);
}
.table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--border);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--surface-2);
  color: var(--text);
}

/* === Button palette override === */
/* Bootstrap рисует .btn-* хардкодом — перебиваем вручную под экрю */

.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-bg: var(--primary-hover);
  --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

.btn-success {
  --bs-btn-bg: var(--success);
  --bs-btn-border-color: var(--success);
  --bs-btn-hover-bg: #4A7540;
  --bs-btn-hover-border-color: #4A7540;
  --bs-btn-active-bg: #4A7540;
  --bs-btn-active-border-color: #4A7540;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

.btn-danger {
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: #A63D2E;
  --bs-btn-hover-border-color: #A63D2E;
  --bs-btn-active-bg: #A63D2E;
  --bs-btn-active-border-color: #A63D2E;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

.btn-warning {
  --bs-btn-bg: #C9954B;
  --bs-btn-border-color: #C9954B;
  --bs-btn-hover-bg: #B58040;
  --bs-btn-hover-border-color: #B58040;
  --bs-btn-active-bg: #B58040;
  --bs-btn-active-border-color: #B58040;
  --bs-btn-color: #2B2620;
  --bs-btn-hover-color: #2B2620;
  --bs-btn-active-color: #2B2620;
}

.btn-info {
  --bs-btn-bg: #7BA4B8;
  --bs-btn-border-color: #7BA4B8;
  --bs-btn-hover-bg: #6A93A7;
  --bs-btn-hover-border-color: #6A93A7;
  --bs-btn-active-bg: #6A93A7;
  --bs-btn-active-border-color: #6A93A7;
  --bs-btn-color: #2B2620;
  --bs-btn-hover-color: #2B2620;
  --bs-btn-active-color: #2B2620;
}

.btn-secondary {
  --bs-btn-bg: #8B7F6B;
  --bs-btn-border-color: #8B7F6B;
  --bs-btn-hover-bg: #756A58;
  --bs-btn-hover-border-color: #756A58;
  --bs-btn-active-bg: #756A58;
  --bs-btn-active-border-color: #756A58;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

/* Плашки-бейджи */
.badge.bg-success { background-color: var(--success) !important; color: #fff; }
.badge.bg-danger  { background-color: var(--danger) !important; color: #fff; }
.badge.bg-warning { background-color: #C9954B !important; color: #2B2620; }
.badge.bg-info    { background-color: #7BA4B8 !important; color: #2B2620; }
.badge.bg-primary { background-color: var(--primary) !important; color: #fff; }
.badge.bg-secondary { background-color: #8B7F6B !important; color: #fff; }

/* === Soft buttons (тихая тема) === */
/* Полупрозрачная подложка цвета + насыщенный текст/иконка. Современно, не кричит. */

.btn-primary {
  --bs-btn-bg: rgba(139,106,69,.12);
  --bs-btn-border-color: transparent;
  --bs-btn-color: #6E5236;
  --bs-btn-hover-bg: rgba(139,106,69,.20);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: #5A4128;
  --bs-btn-active-bg: rgba(139,106,69,.26);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-color: #4E3820;
}

.btn-success {
  --bs-btn-bg: rgba(90,139,74,.14);
  --bs-btn-border-color: transparent;
  --bs-btn-color: #3E6234;
  --bs-btn-hover-bg: rgba(90,139,74,.22);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: #335229;
  --bs-btn-active-bg: rgba(90,139,74,.28);
  --bs-btn-active-border-color: transparent;
}

.btn-danger {
  --bs-btn-bg: rgba(201,80,63,.12);
  --bs-btn-border-color: transparent;
  --bs-btn-color: #9E3826;
  --bs-btn-hover-bg: rgba(201,80,63,.20);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: #872E1E;
  --bs-btn-active-bg: rgba(201,80,63,.26);
  --bs-btn-active-border-color: transparent;
}

.btn-warning {
  --bs-btn-bg: rgba(201,149,75,.16);
  --bs-btn-border-color: transparent;
  --bs-btn-color: #8A5F1E;
  --bs-btn-hover-bg: rgba(201,149,75,.24);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: #744F16;
  --bs-btn-active-bg: rgba(201,149,75,.30);
  --bs-btn-active-border-color: transparent;
}

.btn-info {
  --bs-btn-bg: rgba(123,164,184,.16);
  --bs-btn-border-color: transparent;
  --bs-btn-color: #3E6479;
  --bs-btn-hover-bg: rgba(123,164,184,.24);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: #325365;
  --bs-btn-active-bg: rgba(123,164,184,.30);
  --bs-btn-active-border-color: transparent;
}

.btn-secondary, .btn-light {
  --bs-btn-bg: var(--surface-2);
  --bs-btn-border-color: transparent;
  --bs-btn-color: var(--text);
  --bs-btn-hover-bg: #D8CCAE;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--text);
  --bs-btn-active-bg: #CCBF9E;
  --bs-btn-active-border-color: transparent;
}

/* Иконочные кнопки (btn-sm с одной иконкой) — компактнее */
.btn.btn-sm {
  padding: 4px 10px;
  border-radius: 8px;
}

/* === Forms: единый фон === */
.form-control, .form-select, textarea.form-control,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
select, textarea {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.form-control:focus, .form-select:focus, textarea.form-control:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus, textarea:focus {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(139,106,69,.15);
}

/* === Card / panel — чёткая граница === */
.card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card-body { color: var(--text); }

/* === Alerts override === */
/* Все alert — тинтованная тёплая плашка, без кричащих цветов */
.alert {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 12px 16px;
  color: var(--text);
}

.alert-light,
.alert-secondary {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.alert-info {
  background-color: rgba(123,164,184,.14);
  border-color: rgba(123,164,184,.28);
  color: #325365;
}

.alert-success {
  background-color: rgba(90,139,74,.12);
  border-color: rgba(90,139,74,.26);
  color: #335229;
}

.alert-warning {
  background-color: rgba(201,149,75,.14);
  border-color: rgba(201,149,75,.28);
  color: #744F16;
}

.alert-danger {
  background-color: rgba(201,80,63,.10);
  border-color: rgba(201,80,63,.24);
  color: #872E1E;
}

/* === btn-outline-*: тихая версия === */
/* Прозрачный фон, тонкий цветной контур, цветной текст. Без крика. */
.btn-outline-primary {
  --bs-btn-color: #6E5236;
  --bs-btn-border-color: rgba(139,106,69,.45);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: rgba(139,106,69,.10);
  --bs-btn-hover-border-color: rgba(139,106,69,.65);
  --bs-btn-hover-color: #5A4128;
  --bs-btn-active-bg: rgba(139,106,69,.16);
  --bs-btn-active-color: #4E3820;
  --bs-btn-active-border-color: rgba(139,106,69,.75);
}

.btn-outline-danger {
  --bs-btn-color: #9E3826;
  --bs-btn-border-color: rgba(201,80,63,.40);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: rgba(201,80,63,.10);
  --bs-btn-hover-border-color: rgba(201,80,63,.65);
  --bs-btn-hover-color: #872E1E;
  --bs-btn-active-bg: rgba(201,80,63,.16);
  --bs-btn-active-border-color: rgba(201,80,63,.75);
}

.btn-outline-success {
  --bs-btn-color: #3E6234;
  --bs-btn-border-color: rgba(90,139,74,.40);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: rgba(90,139,74,.10);
  --bs-btn-hover-border-color: rgba(90,139,74,.65);
  --bs-btn-hover-color: #335229;
  --bs-btn-active-bg: rgba(90,139,74,.16);
  --bs-btn-active-border-color: rgba(90,139,74,.75);
}

.btn-outline-secondary {
  --bs-btn-color: var(--text-muted);
  --bs-btn-border-color: var(--border);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-hover-color: var(--text);
  --bs-btn-active-bg: var(--surface-2);
  --bs-btn-active-color: var(--text);
}

.btn-outline-info {
  --bs-btn-color: #3E6479;
  --bs-btn-border-color: rgba(123,164,184,.45);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: rgba(123,164,184,.14);
  --bs-btn-hover-border-color: rgba(123,164,184,.65);
  --bs-btn-hover-color: #325365;
}

.btn-outline-light {
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--border);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-hover-color: var(--text);
}

/* === Audio player (MediaWorks/Details) === */
.mp-player {
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin: 10px 0;
  box-shadow: 0 1px 3px rgba(43,38,32,.06);
}
.mp-player__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mp-player__play {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mp-player__play:hover { background: var(--primary-hover); }
.mp-player__time {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  color: var(--text);
  min-width: 44px;
  text-align: center;
}
.mp-player__seek {
  flex: 1 1 100px;
  min-width: 80px;
  cursor: pointer;
  accent-color: var(--primary);
}
.mp-player__vol {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  color: var(--text);
}
.mp-player__volbar {
  width: 60px;
  cursor: pointer;
  accent-color: var(--primary);
}
.mp-player__version {
  font-size: 11px;
  color: var(--text-muted);
  margin: 2px 0;
}
.mp-player__status {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 15px;
}
.mp-player__status i { color: var(--primary); }
.mp-player__resume {
  padding: 6px 12px;
  background: var(--success);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.mp-player__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.mp-player__skip {
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
}
.mp-player__skip:hover { background: var(--surface-2); }
.mp-player__speed {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mp-player__speed input[type="range"] {
  width: 120px;
  accent-color: var(--primary);
}
.mp-player__speed #speedLabel {
  min-width: 40px;
  font-family: ui-monospace, monospace;
}

@media (max-width: 420px) {
  .mp-player__time { min-width: 36px; font-size: 12px; }
  .mp-player__volbar { width: 50px; }
  .mp-player__speed input[type="range"] { width: 100px; }
}

/* === Anti-overflow (mobile) === */
/* Жёсткая страховка: ничего не выходит за пределы экрана */

html {
  max-width: 100%;
}
body {
  max-width: 100%;
  overflow-x: hidden;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Картинки, видео, iframe, svg, аудио */
img, video, iframe, svg, canvas, audio, embed, object {
  max-width: 100%;
  height: auto;
}

/* Таблицы — горизонтальный скролл внутри, а не вылезание наружу */
table {
  max-width: 100%;
}
.table-wrap, .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Длинные строки (URL, код, без пробелов) */
pre, code, .text-break {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* pre по умолчанию имеет свой overflow */
pre {
  overflow-x: auto;
}

/* Container: на всякий случай */
.container, .container-fluid {
  max-width: 100%;
}

/* Ничего не шире экрана из фиксированной ширины */
@media (max-width: 480px) {
  [style*="width:300px"], [style*="width: 300px"],
  [style*="width:400px"], [style*="width: 400px"],
  [style*="width:500px"], [style*="width: 500px"],
  [style*="width:600px"], [style*="width: 600px"] {
    max-width: 100% !important;
  }
}

/* === Touch fix (iOS elastic scroll на range) === */
html, body {
  overscroll-behavior-x: none;
}
input[type="range"] {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

/* Мягкая кнопка «Продолжить» */
.mp-player__resume {
  padding: 8px 14px;
  background: rgba(90,139,74,.14);
  color: #3E6234;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
}
.mp-player__resume:hover { background: rgba(90,139,74,.22); }
.mp-player__resume:active { background: rgba(90,139,74,.28); }

/* === Gradient layer (мягкий свет, не неон) === */

/* Фон страницы: светлее сверху, чуть темнее снизу */
html, body {
  background: var(--bg);
}

/* Карточки: едва заметный блик сверху */
.card,
.mp-player,
.auth-card,
.page-message {
  background: linear-gradient(180deg, #F8F2E2 0%, #F4EDDB 100%);
}

/* Верхняя панель поиска: растворяется в фон */
.mp-searchbar {
  background: var(--surface);
}

/* Нижнее меню — уже имеет градиент, усилим чуть */
.mp-bottom-nav {
  background: var(--surface);
}

/* Футер — тоже мягкий градиент к низу страницы */
.footer {
  background: transparent;
}

/* FAB — светлый верх для «объёма» */
.mp-fab-toggle,
.mp-searchbar__btn,
.auth-submit,
.mp-player__play {
  background-image: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(0,0,0,.06) 100%);
  background-blend-mode: overlay;
}

/* Soft-кнопки — лёгкий блик */
.btn-primary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-info {
  background-image: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 100%);
  background-blend-mode: overlay;
}

/* === Flex overflow fix === */
/* Flex-элементы по умолчанию не сжимаются ниже своего содержимого.
   Текст без min-width:0 распирает родителя и обрезает карточку.
   Это правило — универсальная страховка. */

.d-flex > *,
[class*="d-flex"] > * {
  min-width: 0;
}

/* Длинные заголовки внутри карточек — обрезать аккуратно */
.card-title,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Любой текст в flex-строке, который может быть длинным */
.list-group-item,
.list-group-item a,
.list-group-item div {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Карточки компонентов — заголовок и текст не должны раздувать */
.card .row > *,
.card [class*="col-"] {
  min-width: 0;
}