/* ==========================================================================
   Оформление панели "warm" (новое). Включается атрибутом html[data-theme="warm"],
   который ставит js/theme.js. Классическое оформление не меняется: вне этого
   атрибута файл только прячет .tw-only и рисует переключатель тем.
   ========================================================================== */

/* ---------- Общее для обеих тем ---------- */

.tw-only { display: none !important; }

#theme-dots {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 100600;
  display: flex;
  gap: 5px;
  padding: 5px;
  border-radius: 10px;
  opacity: .45;
  transition: opacity .15s ease, background-color .15s ease;
}
#theme-dots:hover,
#theme-dots:focus-within { opacity: 1; background: rgba(0, 0, 0, .06); }
#theme-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1.5px solid;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  outline: none;
}
#theme-dots button[data-theme-id="classic"] { border-color: #2D3349; }
#theme-dots button[data-theme-id="warm"] { border-color: #1FA35C; }
#theme-dots button[data-theme-id="classic"][aria-pressed="true"] { background: #2D3349; }
#theme-dots button[data-theme-id="warm"][aria-pressed="true"] { background: #1FA35C; }
#theme-dots button:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1FA35C; }

/* ---------- Токены новой темы ---------- */

html[data-theme="warm"] {
  /* палитра в духе панели reg.ru: нейтральный серый фон, белые карточки,
     тёмные кнопки, зелёный акцент */
  --tw-bg: #F2F3F5;
  --tw-surface: #FFFFFF;
  --tw-surface-2: #F7F8FA;
  --tw-sand: #EEF0F3;
  --tw-border: #E5E7EB;
  --tw-border-strong: #D3D7DE;
  --tw-border-hover: #BCC2CB;
  --tw-text: #1F2229;
  --tw-text-2: #4B505A;
  --tw-muted: #868C96;
  --tw-placeholder: #A9AEB7;
  --tw-primary: #24272E;
  --tw-primary-hover: #3A3E47;
  --tw-accent: #1FA35C;
  --tw-accent-hover: #188A4D;
  --tw-accent-soft: #E2F6EA;
  --tw-accent-text: #15804A;
  --tw-accent-ring: rgba(31, 163, 92, .18);
  --tw-success: #1F8A4F;
  --tw-success-soft: #E2F6EA;
  --tw-danger: #E0393E;
  --tw-danger-hover: #C42B30;
  --tw-danger-soft: #FDECEC;
  --tw-info: #2C6CB5;
  --tw-info-soft: #E8F0FA;
  --tw-warning: #A86A0C;
  --tw-warning-soft: #FDF3E1;
  --tw-chip: #EEF0F3;
  --tw-row-hover: #FAFBFC;
  --tw-radius: 16px;
  --tw-radius-sm: 8px;
  --tw-shadow: 0 1px 2px rgba(20, 24, 32, .03), 0 4px 18px rgba(20, 24, 32, .05);
  --tw-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--tw-bg);
}

html[data-theme="warm"] body {
  background: var(--tw-bg);
  color: var(--tw-text);
  font-family: var(--tw-font);
  font-size: 14px;
  line-height: 1.5;
}
html[data-theme="warm"] .app,
html[data-theme="warm"] .app .app-container { background: var(--tw-bg); }
html[data-theme="warm"] h1, html[data-theme="warm"] h2, html[data-theme="warm"] h3,
html[data-theme="warm"] h4, html[data-theme="warm"] h5, html[data-theme="warm"] h6 {
  font-family: var(--tw-font);
  color: var(--tw-text);
}
html[data-theme="warm"] a { color: var(--tw-accent-text); }
html[data-theme="warm"] a:hover { color: var(--tw-text); }
html[data-theme="warm"] ::selection { background: var(--tw-accent-soft); color: var(--tw-text); }
html[data-theme="warm"] #page-preloader { background: var(--tw-bg); }
html[data-theme="warm"] pre {
  background: var(--tw-surface-2);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-sm);
  color: var(--tw-text);
  font-size: 13px;
  padding: 12px 14px;
  white-space: pre-wrap;
  word-break: break-word;
}
html[data-theme="warm"] #theme-dots:hover { background: rgba(31, 34, 41, .07); }

/* ==========================================================================
   Страница входа: экран из двух половин — приветствие слева, форма справа
   ========================================================================== */

html[data-theme="warm"] .tw-only { display: revert !important; }

html[data-theme="warm"] .app .app-login-box {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "aside form";
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  background: var(--tw-surface);
  border-radius: 0;
  box-shadow: none;
}
/* clearfix-псевдоэлементы исходной темы иначе становятся ячейками сетки */
html[data-theme="warm"] .app .app-login-box::before,
html[data-theme="warm"] .app .app-login-box::after { display: none; }
html[data-theme="warm"] .app .app-login-box > br,
html[data-theme="warm"] .app .app-login-box .tw-classic-logo,
html[data-theme="warm"] .app .app-login-box .tw-login-form > h2[align] { display: none !important; }

/* левая половина */
html[data-theme="warm"] .tw-login-aside {
  grid-area: aside;
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  gap: 40px;
  padding: 48px 56px;
  background: var(--tw-sand);
  color: var(--tw-text);
}
html[data-theme="warm"] .tw-login-aside::before,
html[data-theme="warm"] .tw-login-aside::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
html[data-theme="warm"] .tw-login-aside::before {
  width: 520px; height: 520px;
  right: -180px; bottom: -200px;
  background: radial-gradient(circle at 35% 35%, #D3F1DE 0%, #AEE3C2 45%, rgba(174, 227, 194, 0) 70%);
  opacity: .55;
}
html[data-theme="warm"] .tw-login-aside::after {
  width: 220px; height: 220px;
  right: 80px; top: -90px;
  border: 28px solid rgba(31, 163, 92, .10);
}
html[data-theme="warm"] .tw-login-aside > * { position: relative; z-index: 1; }

html[data-theme="warm"] .tw-brand {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  color: var(--tw-text);
  text-decoration: none;
  font-size: 15px;
}
html[data-theme="warm"] .tw-brand:hover { color: var(--tw-text); text-decoration: none; }
html[data-theme="warm"] .tw-brand img { width: 48px; height: auto; }
html[data-theme="warm"] .tw-brand b { font-weight: 700; letter-spacing: .02em; }

html[data-theme="warm"] .tw-login-hello { margin-top: auto; max-width: 520px; }
html[data-theme="warm"] .tw-login-hello h1 {
  margin: 0 0 16px;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em;
}
html[data-theme="warm"] .tw-login-hello p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--tw-text-2);
}
html[data-theme="warm"] .tw-login-features {
  display: grid !important;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 520px;
}
html[data-theme="warm"] .tw-login-features li {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .75);
  border-radius: 12px;
  font-size: 15px;
  color: var(--tw-text);
}
html[data-theme="warm"] .tw-login-features .fa {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 8px;
  background: var(--tw-accent-soft);
  color: var(--tw-accent);
  font-size: 16px;
}
html[data-theme="warm"] .tw-login-college {
  margin: auto 0 0;
  font-size: 13px;
  color: var(--tw-muted);
}

/* правая половина: форма */
html[data-theme="warm"] .app .app-login-box .tw-login-form {
  grid-area: form;
  float: none;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 420px;
  padding: 48px 24px;
}
html[data-theme="warm"] .tw-login-head { display: block !important; }
html[data-theme="warm"] .tw-login-form form { clear: both; float: none; padding-top: 28px; }
html[data-theme="warm"] .tw-login-head h2 {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.01em;
}
html[data-theme="warm"] .tw-login-head p { margin: 0; color: var(--tw-text-2); font-size: 15px; }
html[data-theme="warm"] .tw-login-form .form-group { margin-bottom: 18px; }
html[data-theme="warm"] .tw-login-form label.tw-only {
  display: block !important;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tw-text-2);
}
html[data-theme="warm"] .tw-login-form .form-control { height: 52px; font-size: 15px; padding: 0 16px; }
html[data-theme="warm"] .tw-login-form .row { margin: 8px 0 0; }
html[data-theme="warm"] .tw-login-form .row > [class*="col-"]:first-child { display: none; }
html[data-theme="warm"] .tw-login-form .row > [class*="col-"] { width: 100%; padding: 0; float: none; }
html[data-theme="warm"] .tw-login-form .btn { height: 52px; font-size: 16px; }

/* ==========================================================================
   Внутренние страницы: светлое меню слева (на узких экранах — полоса сверху)
   ========================================================================== */

html[data-theme="warm"] {
  --tw-sidebar: 260px;
}
html[data-theme="warm"] .app .app-container .app-sidebar.app-navigation {
  position: fixed !important;
  top: 0; left: 0; bottom: 0;
  width: var(--tw-sidebar) !important;
  height: 100vh !important;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 14px;
  background: var(--tw-surface);
  border-right: 1px solid var(--tw-border);
  z-index: 50 !important;
}
html[data-theme="warm"] .app .app-content.app-sidebar-left {
  padding-left: var(--tw-sidebar) !important;
}

/* логотип */
html[data-theme="warm"] .app-navigation.app-navigation-style-default .app-navigation-logo,
html[data-theme="warm"] .app-navigation .app-navigation-logo {
  flex: 0 0 auto;
  float: none;
  width: auto;
  height: 48px;
  margin: 0 6px;
  padding: 0 0 0 56px;
  background: url(/img/26kadr-mark.svg) left center / 44px auto no-repeat transparent;
  font-size: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}
html[data-theme="warm"] .app-navigation .app-navigation-logo::after {
  content: "Веб-технологии";
  font-size: 16px;
  font-weight: 700;
  color: var(--tw-text);
  white-space: nowrap;
}

/* пункты меню — вертикальный список, "Выход" прижат к низу */
html[data-theme="warm"] .app-navigation nav {
  float: none;
  flex: 1 1 auto;
  width: auto;
  min-height: 0;
}
html[data-theme="warm"] .app-navigation nav > ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
html[data-theme="warm"] .app-navigation nav > ul::-webkit-scrollbar { display: none; }
html[data-theme="warm"] .app-navigation nav > ul > li {
  float: none;
  flex: 0 0 auto;
  width: 100%;
  border: 0;
}
html[data-theme="warm"] .app-navigation nav > ul > li:last-child {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--tw-border);
}
html[data-theme="warm"] .app-navigation.app-navigation-style-default nav > ul > li > a,
html[data-theme="warm"] .app-navigation nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  float: none;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  line-height: 1.2;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tw-text-2);
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  text-shadow: none;
  letter-spacing: 0;
}
/* иконка: квадрат 20x20, глиф строго по центру */
html[data-theme="warm"] .app-navigation.app-navigation-style-default nav > ul > li > a > span,
html[data-theme="warm"] .app-navigation nav > ul > li > a > span {
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  position: static;
  width: 20px;
  height: 20px;
  margin: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--tw-muted);
}
html[data-theme="warm"] .app-navigation nav > ul > li > a > span::before { display: block; line-height: 1; }
html[data-theme="warm"] .app-navigation nav > ul > li > a:hover {
  background: var(--tw-surface-2);
  color: var(--tw-text);
}
html[data-theme="warm"] .app-navigation nav > ul > li > a.active {
  background: var(--tw-accent-soft);
  color: var(--tw-accent-text);
  box-shadow: none;
}
html[data-theme="warm"] .app-navigation nav > ul > li > a.active > span { color: var(--tw-accent); }
/* выход — внизу колонки, при наведении краснеет */
html[data-theme="warm"] .app-navigation nav > ul > li:last-child > a { color: var(--tw-text); }
html[data-theme="warm"] .app-navigation nav > ul > li:last-child > a:hover {
  background: var(--tw-danger-soft);
  color: var(--tw-danger);
}
html[data-theme="warm"] .app-navigation nav > ul > li:last-child > a:hover > span { color: var(--tw-danger); }
html[data-theme="warm"] .app-navigation nav > ul > li > a:before,
html[data-theme="warm"] .app-navigation nav > ul > li > a:after { display: none; }

/* ---------- Заголовок страницы ---------- */

html[data-theme="warm"] .app .app-content > .app-heading.app-heading-page,
html[data-theme="warm"] .app .app-heading.app-heading-bordered.app-heading-page {
  float: none;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1480px;
  margin: 0;
  padding: 40px 56px 28px;
  background: transparent;
  border: 0;
}
html[data-theme="warm"] .app .app-heading-page > .icon {
  float: none;
  flex: 0 0 56px;
  width: 56px; height: 56px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: var(--tw-accent-soft);
  color: var(--tw-accent);
}
html[data-theme="warm"] .app .app-heading-page > .icon > span { font-size: 24px; line-height: 1; color: var(--tw-accent); }
html[data-theme="warm"] .app .app-heading-page > .title { float: none; padding: 0; }
html[data-theme="warm"] .app .app-heading-page > .title h1 {
  margin: 0 0 4px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
}
html[data-theme="warm"] .app .app-heading-page > .title p { margin: 0; font-size: 15px; color: var(--tw-text-2); }

/* хлебные крошки под заголовком (страницы эксперта, composer) лишь повторяют заголовок —
   без фона исходной шапки они висят отдельной плашкой, поэтому в новом оформлении скрыты */
html[data-theme="warm"] .app .app-content > .app-heading-container:has(> .breadcrumb) { display: none; }

html[data-theme="warm"] .app .app-heading { background: transparent; }
html[data-theme="warm"] .app .app-heading.app-heading-bordered { border-color: var(--tw-border); }
html[data-theme="warm"] .app .app-heading .title h2,
html[data-theme="warm"] .app .app-heading .title h3 { font-weight: 700; }
html[data-theme="warm"] .app .app-heading .title p { color: var(--tw-text-2); }

/* контейнер контента: прижат к меню, как на reg.ru */
html[data-theme="warm"] .app .app-content > .container {
  float: none;
  width: 100%;
  max-width: 1480px;
  margin: 0;
  padding: 0 56px 56px;
}
html[data-theme="warm"] .container.container-boxed { max-width: 1480px; }

/* ---------- Карточки (блоки) ---------- */

html[data-theme="warm"] .app .block {
  margin-bottom: 20px;
  background: var(--tw-surface);
  border: 0;
  border-radius: var(--tw-radius);
  box-shadow: var(--tw-shadow);
}
html[data-theme="warm"] .app .block.block-condensed { padding: 0 0 4px; overflow: hidden; }
html[data-theme="warm"] .app .block.block-condensed > .block-content { padding: 0 24px; }
html[data-theme="warm"] .app .block .block-content:empty { display: none; }

/* карточка профиля: строки-таблицы с подписями */
html[data-theme="warm"] .app .row-table-holder .row-table { border-color: var(--tw-border); }
html[data-theme="warm"] .app .row-table > [class*="col-"] { border-color: var(--tw-border); padding-top: 16px; padding-bottom: 16px; }
html[data-theme="warm"] .app .row-table .text-bolder.text-sm {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tw-muted);
  text-transform: none !important;
  letter-spacing: 0;
}
html[data-theme="warm"] .app .row-table p { font-size: 15px; color: var(--tw-text); }
/* пустые служебные блоки внутри карточки профиля дают лишние полоски */
html[data-theme="warm"] .app .row-table-holder > .block-content { display: none; }
html[data-theme="warm"] .app .block.block-condensed > .block-heading {
  padding: 16px 24px;
  background: transparent;
  border-bottom: 1px solid var(--tw-border);
}
html[data-theme="warm"] .app .block.block-condensed > .block-footer {
  background: var(--tw-surface-2);
  border-top: 1px solid var(--tw-border);
}

/* блок внутри блока (настройка сети): тонкая секция с рамкой вместо второй "парящей" карточки */
html[data-theme="warm"] .app .block .block {
  float: none;
  width: auto;
  margin: 0 0 16px;
  padding: 16px 4px 12px;
  border: 1px solid var(--tw-border);
  border-radius: 12px;
  box-shadow: none;
}
html[data-theme="warm"] .app .block .row.block { margin-left: 0; margin-right: 0; }

/* заголовки секций: вместо серой полосы с капсом — спокойный заголовок */
html[data-theme="warm"] .app .block .block-divider-text {
  margin: 0 0 16px;
  padding: 22px 24px 0;
  background: transparent;
  border: 0;
  color: var(--tw-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
}
html[data-theme="warm"] .app .block .block-divider-text .label { vertical-align: middle; }
/* вложенный span с капсом и мелким кеглем (e_check) — пусть выглядит как сам заголовок */
html[data-theme="warm"] .app .block .block-divider-text > span.text-sm {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-transform: none !important;
  letter-spacing: 0;
}

/* ---------- Формы ---------- */

html[data-theme="warm"] label,
html[data-theme="warm"] .app label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tw-text-2);
  margin-bottom: 6px;
}
html[data-theme="warm"] .form-control,
html[data-theme="warm"] .app .form-control {
  height: 44px;
  padding: 0 14px;
  font-family: var(--tw-font);
  font-size: 14px;
  color: var(--tw-text);
  background: var(--tw-surface);
  border: 1px solid var(--tw-border-strong);
  border-radius: var(--tw-radius-sm);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html[data-theme="warm"] textarea.form-control { height: auto; padding: 10px 14px; }
html[data-theme="warm"] .form-control::placeholder { color: var(--tw-placeholder); }
html[data-theme="warm"] .form-control:hover { border-color: var(--tw-border-hover); }
html[data-theme="warm"] .form-control:focus,
html[data-theme="warm"] .app .form-control:focus {
  border-color: var(--tw-accent);
  box-shadow: 0 0 0 4px var(--tw-accent-ring);
  outline: none;
}
html[data-theme="warm"] .form-control[disabled],
html[data-theme="warm"] .form-control[readonly] { background: var(--tw-surface-2); color: var(--tw-text-2); }
html[data-theme="warm"] .app .form-horizontal .row + .row { margin-top: 12px; }

/* строка формы: поля стоят в одну линию, даже если чья-то подпись переносится на две строки */
html[data-theme="warm"] .app form .row { display: flex; flex-wrap: wrap; align-items: flex-end; clear: both; }
html[data-theme="warm"] .app form .row::before,
html[data-theme="warm"] .app form .row::after { display: none; }
html[data-theme="warm"] .app form .row > [class*="col-"] { float: none; }
/* пустые колонки-распорки: во flex-строке они переносят кнопку на новую строку */
html[data-theme="warm"] .app form .row > [class*="col-"]:empty { display: none; }
html[data-theme="warm"] .app form .row > [class*="col-"] > br { display: none; }
html[data-theme="warm"] .app form .row label { display: block; }
@media (max-width: 991px) {
  html[data-theme="warm"] .app form .row > [class*="col-md-"]:not([class*="col-sm-"]):not([class*="col-xs-"]) { width: 100%; }
}

/* числовое поле со стрелками (app_plugins.js оборачивает input.spinner) */
html[data-theme="warm"] .spinner-wrapper input { padding-right: 46px; }
html[data-theme="warm"] .spinner-wrapper .spinner-button-up,
html[data-theme="warm"] .spinner-wrapper .spinner-button-down {
  right: 1px;
  width: 34px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--tw-border);
  background: var(--tw-surface-2);
  color: var(--tw-text-2);
  line-height: 1;
}
html[data-theme="warm"] .spinner-wrapper .spinner-button-up { top: 1px; border-radius: 0 7px 0 0; }
html[data-theme="warm"] .spinner-wrapper .spinner-button-down { top: 22px; border-top: 1px solid var(--tw-border); border-radius: 0 0 7px 0; }
html[data-theme="warm"] .spinner-wrapper .spinner-button-up:hover,
html[data-theme="warm"] .spinner-wrapper .spinner-button-down:hover { background: var(--tw-accent-soft); color: var(--tw-accent-text); }
html[data-theme="warm"] .spinner-wrapper .fa { font-size: 14px; line-height: 1; }

/* bootstrap-select и спиннер */
html[data-theme="warm"] .app .bootstrap-select > .dropdown-toggle,
html[data-theme="warm"] .app .btn-group .dropdown-toggle.btn-default {
  height: 44px;
  border-radius: var(--tw-radius-sm);
  border-color: var(--tw-border-strong);
  background: var(--tw-surface);
  color: var(--tw-text);
  font-weight: 500;
}
html[data-theme="warm"] .app .dropdown-menu {
  border: 1px solid var(--tw-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(20, 24, 32, .12);
  padding: 6px;
}
html[data-theme="warm"] .app .dropdown-menu > li > a { border-radius: 8px; padding: 8px 12px; color: var(--tw-text); }
html[data-theme="warm"] .app .dropdown-menu > li > a:hover,
html[data-theme="warm"] .app .dropdown-menu > .active > a { background: var(--tw-accent-soft); color: var(--tw-accent-text); }
html[data-theme="warm"] .app .input-group-btn .btn,
html[data-theme="warm"] .app .bootstrap-touchspin .btn { border-color: var(--tw-border-strong); }

/* ---------- Кнопки ---------- */

html[data-theme="warm"] .btn,
html[data-theme="warm"] .app .btn {
  height: 44px;
  padding: 0 22px;
  line-height: 42px;
  font-family: var(--tw-font);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--tw-radius-sm);
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
/* содержимое кнопки (текст и иконка) — строго по центру */
html[data-theme="warm"] .app .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; vertical-align: middle; }
html[data-theme="warm"] .app .btn.btn-block { display: flex; }
html[data-theme="warm"] .app .btn > .fa,
html[data-theme="warm"] .app .btn > [class^="icon-"] { line-height: 1; margin: 0; }
html[data-theme="warm"] .btn:active { transform: translateY(1px); }
html[data-theme="warm"] .btn:focus-visible { box-shadow: 0 0 0 4px var(--tw-accent-ring); outline: none; }
html[data-theme="warm"] .app .btn.btn-xs { height: 32px; line-height: 30px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
html[data-theme="warm"] .app .btn.btn-sm { height: 36px; line-height: 34px; padding: 0 14px; font-size: 13px; }
html[data-theme="warm"] .app .btn.btn-icon { width: 36px; padding: 0; text-align: center; }
html[data-theme="warm"] .app .btn.btn-icon.btn-xs { width: 32px; }

html[data-theme="warm"] .btn-primary,
html[data-theme="warm"] .btn-success,
html[data-theme="warm"] .app .btn-primary,
html[data-theme="warm"] .app .btn-success {
  background: var(--tw-primary);
  border: 1px solid var(--tw-primary);
  color: #fff;
}
html[data-theme="warm"] .btn-primary:hover, html[data-theme="warm"] .btn-primary:focus,
html[data-theme="warm"] .btn-success:hover, html[data-theme="warm"] .btn-success:focus,
html[data-theme="warm"] .app .btn-primary:hover, html[data-theme="warm"] .app .btn-success:hover {
  background: var(--tw-primary-hover);
  border-color: var(--tw-primary-hover);
  color: #fff;
}
html[data-theme="warm"] .app .btn-default {
  background: var(--tw-surface);
  border: 1px solid var(--tw-border-strong);
  color: var(--tw-text);
}
html[data-theme="warm"] .app .btn-default:hover {
  background: var(--tw-surface-2);
  border-color: var(--tw-border-hover);
  color: var(--tw-text);
}
html[data-theme="warm"] .app .btn-danger { background: var(--tw-danger); border-color: var(--tw-danger); color: #fff; }
html[data-theme="warm"] .app .btn-danger:hover { background: var(--tw-danger-hover); border-color: var(--tw-danger-hover); }
html[data-theme="warm"] .app .btn-info,
html[data-theme="warm"] .app .btn-warning {
  background: var(--tw-accent);
  border-color: var(--tw-accent);
  color: #fff;
}
html[data-theme="warm"] .app .btn-info:hover,
html[data-theme="warm"] .app .btn-warning:hover { background: var(--tw-accent-hover); border-color: var(--tw-accent-hover); }
html[data-theme="warm"] .app .btn-link { color: var(--tw-accent-text); border-color: transparent; background: transparent; }
/* кнопка с иконкой слева ("Сформировать карточки") */
html[data-theme="warm"] .app .btn.btn-icon-fixed { padding-left: 46px; position: relative; }
html[data-theme="warm"] .app .btn.btn-icon-fixed > span:first-child {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 40px;
  line-height: 42px;
  background: transparent;
  border: 0;
}

/* ---------- Таблицы ---------- */

html[data-theme="warm"] .app .table { margin-bottom: 8px; color: var(--tw-text); }
html[data-theme="warm"] .app .table > thead > tr > th,
html[data-theme="warm"] .app .table.table-head-custom > thead > tr > th,
html[data-theme="warm"] .app .table.table-head-light > thead > tr > th {
  padding: 12px 16px;
  background: var(--tw-surface-2);
  color: var(--tw-muted);
  border-top: 0;
  border-bottom: 1px solid var(--tw-border);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: middle;
}
html[data-theme="warm"] .app .table > thead > tr > th:first-child { border-top-left-radius: 8px; }
html[data-theme="warm"] .app .table > thead > tr > th:last-child { border-top-right-radius: 8px; }
html[data-theme="warm"] .app .table > tbody > tr > td {
  padding: 14px 16px;
  border-top: 1px solid var(--tw-border);
  vertical-align: middle;
}
html[data-theme="warm"] .app .table.table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
html[data-theme="warm"] .app .table > tbody > tr:hover > td { background: var(--tw-row-hover); }
html[data-theme="warm"] .app .block > .table-responsive,
html[data-theme="warm"] .app .block-content > .table-responsive { border: 0; }
html[data-theme="warm"] .app .block-content > .table,
html[data-theme="warm"] .app .block-content .table-responsive > .table { margin-bottom: 16px; }

/* ---------- Метки-статусы ---------- */

html[data-theme="warm"] .app .label {
  display: inline-block;
  padding: 3px 10px;
  border: 0;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: .02em;
  text-transform: none;
  box-shadow: none;
}
html[data-theme="warm"] .app .label.label-ghost,
html[data-theme="warm"] .app .label.label-bordered { box-shadow: none !important; border: 0 !important; }
/* исходная тема красит метки с !important — приходится отвечать тем же */
html[data-theme="warm"] .app .label.label-success { background: var(--tw-success-soft) !important; color: var(--tw-success) !important; }
html[data-theme="warm"] .app .label.label-danger { background: var(--tw-danger-soft) !important; color: var(--tw-danger) !important; }
html[data-theme="warm"] .app .label.label-info { background: var(--tw-info-soft) !important; color: var(--tw-info) !important; }
html[data-theme="warm"] .app .label.label-warning { background: var(--tw-warning-soft) !important; color: var(--tw-warning) !important; }
html[data-theme="warm"] .app .label.label-primary,
html[data-theme="warm"] .app .label.label-default { background: var(--tw-chip) !important; color: var(--tw-text-2) !important; }
html[data-theme="warm"] .app .label[onclick] { cursor: pointer; }
html[data-theme="warm"] .app .label[onclick]:hover { filter: brightness(.96); }
html[data-theme="warm"] .app .badge { background: var(--tw-accent); border-radius: 999px; }

/* ---------- Списки (боковая карточка студента) ---------- */

html[data-theme="warm"] .app .list-group { margin: 0; border-radius: 12px; overflow: hidden; }
html[data-theme="warm"] .app .list-group .list-group-item {
  padding: 12px 16px;
  background: var(--tw-surface);
  border: 0;
  border-top: 1px solid var(--tw-border);
  color: var(--tw-text);
  word-break: break-word;
}
html[data-theme="warm"] .app .list-group .list-group-item:hover { background: var(--tw-surface-2); }
html[data-theme="warm"] .app .list-group .list-group-item.active,
html[data-theme="warm"] .app .list-group .list-group-item.active:hover {
  margin-top: 8px;
  padding: 10px 16px 6px;
  background: transparent;
  border: 0;
  color: var(--tw-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
html[data-theme="warm"] .app .list-group .list-group-item.active:first-child { margin-top: 0; }
html[data-theme="warm"] .app .list-group .list-group-item .label { float: none; margin: 2px 0 0 6px; vertical-align: 1px; }

/* ---------- Контакты, вкладки, хлебные крошки ---------- */

html[data-theme="warm"] .app .contact > a,
html[data-theme="warm"] .app .contact .contact-container > a { color: var(--tw-text); font-weight: 600; }
html[data-theme="warm"] .app .contact .contact-container > span { color: var(--tw-muted); }
html[data-theme="warm"] .app .contact.contact-bordered > img { border-color: var(--tw-border); }
html[data-theme="warm"] .app .breadcrumb { background: transparent; padding: 0; }
html[data-theme="warm"] .app .nav-tabs > li > a { border-radius: 10px 10px 0 0; color: var(--tw-text-2); }
html[data-theme="warm"] .app .nav-tabs > li.active > a { color: var(--tw-text); }
/* панели (карточки участников на странице проверки) */
html[data-theme="warm"] .app .panel {
  border: 1px solid var(--tw-border);
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
  background: var(--tw-surface);
}
html[data-theme="warm"] .app .panel > .panel-heading,
html[data-theme="warm"] .app .panel.panel-primary > .panel-heading {
  padding: 16px 18px;
  background: var(--tw-surface);
  border: 0;
  border-bottom: 1px solid var(--tw-border);
  color: var(--tw-text);
}
html[data-theme="warm"] .app .panel .panel-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--tw-text);
}
/* иконка участника — в мягком зелёном квадрате, как активный пункт меню reg.ru */
html[data-theme="warm"] .app .panel .panel-title > span {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 8px;
  background: var(--tw-accent-soft);
  font-size: 16px;
  line-height: 1;
  color: var(--tw-accent);
}
html[data-theme="warm"] .app .panel .panel-body { padding: 14px 16px; }
html[data-theme="warm"] .app .panel .panel-body p { margin: 0 0 10px; word-break: break-word; }
html[data-theme="warm"] .app .panel-footer { padding: 12px 16px; background: var(--tw-surface-2); border-color: var(--tw-border); }
html[data-theme="warm"] .app .panel-footer:empty,
html[data-theme="warm"] .app .panel-footer:last-child:not(:has(*)) { display: none; }
html[data-theme="warm"] .app .panel-footer .btn { width: 44px; padding: 0; }

/* Карточки участников — по три в ряд. PHP группирует их в .row по четыре, поэтому
   контейнер становится сеткой, а строки "растворяются" (display: contents). */
html[data-theme="warm"] .app .block-content:has(> .row > .col-md-3 > .panel) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding-bottom: 24px;
}
html[data-theme="warm"] .app .block-content:has(> .row > .col-md-3 > .panel)::before,
html[data-theme="warm"] .app .block-content:has(> .row > .col-md-3 > .panel)::after,
html[data-theme="warm"] .app .row:has(> .col-md-3 > .panel)::before,
html[data-theme="warm"] .app .row:has(> .col-md-3 > .panel)::after { display: none; }
html[data-theme="warm"] .app .row:has(> .col-md-3 > .panel) { display: contents; }
/* части карточки (шапка, модули, кнопки, бэкапы) — общие строки сетки (subgrid),
   поэтому подвалы соседних карточек стоят на одной линии */
html[data-theme="warm"] .app .row > .col-md-3:has(> .panel) {
  float: none;
  width: auto;
  min-width: 0;
  padding: 0;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
}
html[data-theme="warm"] .app .col-md-3 > .panel {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  margin: 0;
}
html[data-theme="warm"] .app .col-md-3 > .panel > .panel-footer:last-child:not(:has(*)) {
  display: block;
  color: var(--tw-muted);
}
html[data-theme="warm"] .app .col-md-3 > .panel > .panel-footer:last-child:not(:has(*))::before { content: "Бэкапов пока нет"; }
@media (max-width: 1200px) {
  html[data-theme="warm"] .app .block-content:has(> .row > .col-md-3 > .panel) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  html[data-theme="warm"] .app .block-content:has(> .row > .col-md-3 > .panel) { grid-template-columns: minmax(0, 1fr); }
}

/* виджеты-плитки */
html[data-theme="warm"] .app .app-widget-tile {
  border: 0;
  border-radius: var(--tw-radius);
  background: var(--tw-surface);
  box-shadow: var(--tw-shadow);
}

/* переключатели (switch) */
html[data-theme="warm"] .app .switch input:checked + span,
html[data-theme="warm"] .app .switch input:checked + i { background: var(--tw-success); border-color: var(--tw-success); }

/* ---------- Модальные окна ---------- */

html[data-theme="warm"] .modal-backdrop.in { opacity: .35; background: #1F2229; }
html[data-theme="warm"] .modal-content {
  border: 0;
  border-radius: var(--tw-radius);
  box-shadow: 0 24px 64px rgba(20, 24, 32, .22);
  overflow: hidden;
}
html[data-theme="warm"] .modal-header {
  padding: 20px 24px;
  background: var(--tw-surface);
  border-bottom: 1px solid var(--tw-border);
}
html[data-theme="warm"] .modal-title { font-size: 18px; font-weight: 700; color: var(--tw-text); }
html[data-theme="warm"] .modal-body { padding: 20px 24px; }
html[data-theme="warm"] .modal-footer { padding: 16px 24px; background: var(--tw-surface-2); border-top: 1px solid var(--tw-border); }
html[data-theme="warm"] .modal.modal-danger .modal-header { background: var(--tw-danger-soft); }
html[data-theme="warm"] .modal.modal-danger .modal-title { color: var(--tw-danger); }
html[data-theme="warm"] .modal .close { opacity: .5; text-shadow: none; }

/* ---------- Предупреждения PHP и прочий текст ---------- */

html[data-theme="warm"] .text-muted { color: var(--tw-muted) !important; }
html[data-theme="warm"] .text-success { color: var(--tw-success) !important; }
html[data-theme="warm"] .text-danger { color: var(--tw-danger) !important; }
html[data-theme="warm"] .alert { border-radius: var(--tw-radius-sm); border: 0; }

/* ==========================================================================
   Профиль участника (pages/u_main.php): Доступы → Подключения → Медиафайлы
   ========================================================================== */

html[data-theme="warm"] .tw-classic-only { display: none !important; }
html[data-theme="warm"] .tw-profile { display: grid !important; gap: 20px; }

html[data-theme="warm"] .tw-card {
  display: block !important;
  background: var(--tw-surface);
  border-radius: var(--tw-radius);
  box-shadow: var(--tw-shadow);
  overflow: hidden;
}
html[data-theme="warm"] .tw-card-head {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--tw-border);
}
html[data-theme="warm"] .tw-card-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--tw-accent-soft);
  color: var(--tw-accent);
  font-size: 18px;
  line-height: 1;
}
html[data-theme="warm"] .tw-card-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
html[data-theme="warm"] .tw-card-sub { margin: 2px 0 0; font-size: 13px; color: var(--tw-muted); }

/* Доступы: три плитки */
html[data-theme="warm"] .tw-access {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 20px 24px 24px;
}
html[data-theme="warm"] .tw-access-item {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--tw-surface-2);
  border: 1px solid var(--tw-border);
  border-radius: 10px;
}
html[data-theme="warm"] .tw-k { font-size: 12px; font-weight: 600; color: var(--tw-muted); }
html[data-theme="warm"] .tw-v {
  font-family: Consolas, "SFMono-Regular", Menlo, monospace;
  font-size: 17px;
  font-weight: 600;
  color: var(--tw-text);
  word-break: break-all;
}

/* Подключения: три способа рядом, с разделителями */
html[data-theme="warm"] .tw-connect {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
html[data-theme="warm"] .tw-connect-item {
  display: block !important;
  padding: 20px 24px 24px;
  border-left: 1px solid var(--tw-border);
  margin-left: -1px;
}
html[data-theme="warm"] .tw-connect-item h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}
html[data-theme="warm"] .tw-connect-item h3 > span {
  width: 20px;
  display: inline-flex;
  justify-content: center;
  font-size: 16px;
  color: var(--tw-accent);
}
html[data-theme="warm"] .tw-connect-item p { margin: 0 0 8px; font-size: 14px; color: var(--tw-text-2); line-height: 1.55; }
html[data-theme="warm"] .tw-connect-item pre { margin: 4px 0 12px; font-family: Consolas, "SFMono-Regular", Menlo, monospace; }
html[data-theme="warm"] .tw-kv {
  display: grid !important;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0 0 12px;
  font-size: 14px;
}
html[data-theme="warm"] .tw-kv dt { font-weight: 400; color: var(--tw-muted); }
html[data-theme="warm"] .tw-kv dd { margin: 0; font-weight: 600; color: var(--tw-text); word-break: break-all; }

/* Медиафайлы */
html[data-theme="warm"] .app .tw-card .table.tw-media { margin: 0; }
html[data-theme="warm"] .app .tw-card .table.tw-media > thead > tr > th { border-radius: 0; padding-left: 24px; }
html[data-theme="warm"] .app .tw-card .table.tw-media > tbody > tr > td { padding-left: 24px; }
html[data-theme="warm"] .tw-empty { display: block !important; margin: 0; padding: 20px 24px; color: var(--tw-muted); }

@media (max-width: 1100px) {
  html[data-theme="warm"] .tw-access { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Адаптив ---------- */

@media (max-width: 900px) {
  /* меню: из колонки слева в полосу сверху с горизонтальной прокруткой */
  html[data-theme="warm"] .app .app-container .app-sidebar.app-navigation {
    right: 0; bottom: auto;
    width: 100% !important;
    height: 60px !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-right: 0;
    border-bottom: 1px solid var(--tw-border);
  }
  html[data-theme="warm"] .app .app-content.app-sidebar-left { padding-left: 0 !important; padding-top: 60px; }
  html[data-theme="warm"] .app-navigation .app-navigation-logo { margin: 0; padding-left: 40px; background-size: 36px auto; }
  html[data-theme="warm"] .app-navigation .app-navigation-logo::after { display: none; }
  html[data-theme="warm"] .app-navigation nav > ul { flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; }
  html[data-theme="warm"] .app-navigation nav > ul > li { width: auto; }
  html[data-theme="warm"] .app-navigation nav > ul > li:last-child { margin: 0 0 0 auto; padding: 0; border: 0; }
  html[data-theme="warm"] .app-navigation nav > ul > li > a { width: auto; height: 40px; white-space: nowrap; gap: 8px; }

  html[data-theme="warm"] .app .app-login-box {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "aside" "form";
  }
  html[data-theme="warm"] .tw-login-aside { gap: 24px; padding: 28px 24px 32px; }
  html[data-theme="warm"] .tw-login-hello h1 { font-size: 28px; }
  html[data-theme="warm"] .tw-login-hello p { font-size: 15px; }
  html[data-theme="warm"] .tw-login-features,
  html[data-theme="warm"] .tw-login-college { display: none !important; }
  html[data-theme="warm"] .app .app-login-box .tw-login-form { align-self: start; padding: 32px 20px 48px; }

  html[data-theme="warm"] .app .app-content > .app-heading.app-heading-page { padding: 24px 16px 16px; }
  html[data-theme="warm"] .app .app-heading-page > .title h1 { font-size: 22px; }
  html[data-theme="warm"] .app .app-content > .container { padding: 0 16px 40px; }
  html[data-theme="warm"] .app .block.block-condensed > .block-content { padding: 0 16px; }
  html[data-theme="warm"] .app .block .block-divider-text { padding: 18px 16px 0; }
}