/* web_app/static/css/02-components.css
   Общие компоненты: бейджи, карточки предметов, редкость, формы.
   Выделено из style.css (разбивка god-файла). Порядок подключения важен —
   файлы 01..06 образуют единый каскад, см. templates/partials/_styles.html.
   Меняй стили в файле, чей номер соответствует блоку; новые правила —
   в конец тематического файла, последним каскадом идёт 06-ui.css. */

/* ========================================================================= */
/* Механика ремёсел: бейджи, проверки, выданные способности, выборы          */
/* ========================================================================= */
/* Бейджи уровня/типа ремесла (как на вики-страницах) */
.wiki-badge {
font-size: 0.7rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
background: var(--background-color);
color: var(--primary-text);
border: 1px solid var(--border-color);
}
.wiki-card-meta {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 6px 0;
}
/* Переключатель уровня ремесла (админ) */
.craft-level-control {
display: block;
margin: 8px 0;
font-size: 0.85rem;
font-weight: 600;
}
.craft-level-control select {
margin-left: 6px;
padding: 4px 8px;
border: 1px solid var(--border-color);
border-radius: 5px;
}
/* Проверка ремесла: модификатор атрибута + уровень × 30 */
.craft-check {
margin: 8px 0;
font-size: 0.9rem;
font-weight: 600;
color: var(--primary-text);
}
.craft-check-formula {
font-weight: 400;
font-size: 0.78rem;
color: var(--text-muted);
}
.craft-advantage {
font-size: 0.72rem;
font-weight: 700;
padding: 1px 7px;
border-radius: 9px;
background: rgba(46, 204, 113, 0.15);
color: #1e8449;
margin-left: 4px;
}
.sheet-skill-name .craft-advantage {
margin-left: 2px;
}
/* Способности/магии, выданные ремеслом */
.craft-granted {
margin: 6px 0;
font-size: 0.82rem;
font-weight: 600;
color: var(--primary-text);
padding: 6px 8px;
background: var(--card-background);
border-left: 3px solid var(--primary-color);
border-radius: 4px;
}
.ability-card-craft-granted {
border-left: 3px solid var(--primary-color);
}
/* Строка выбора ремесла */
.craft-choice-row {
margin: 6px 0;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.craft-choice-pending {
color: #ca6f1e;
font-weight: 600;
}
/* Эффекты открытых уровней (раскрывающийся список) */
.craft-effects,
.craft-modifiers-summary {
margin: 8px 0;
font-size: 0.85rem;
}
.craft-effects summary,
.craft-modifiers-summary summary {
cursor: pointer;
font-weight: 600;
color: var(--primary-text);
}
.craft-effects dl {
margin: 8px 0 0 0;
}
.craft-effects dt {
font-weight: 600;
margin-top: 6px;
}
.craft-effects dd {
margin: 2px 0 6px 14px;
color: var(--text-muted);
}
.craft-modifiers-summary {
padding: 10px 12px;
background: var(--card-background);
border: 1px solid var(--border-color);
border-radius: 8px;
margin-bottom: 12px;
}
.craft-modifiers-summary ul {
margin: 8px 0 0 18px;
padding: 0;
}
.craft-modifiers-summary li {
font-size: 0.82rem;
margin: 2px 0;
}
/* Ремесло, отсутствующее в базе (старые записи персонажей) */
.craft-card-unknown {
border-style: dashed;
opacity: 0.85;
}
/* Модальное окно выбора ремесла */
.craft-choice-overlay {
display: none;
position: fixed;
z-index: var(--z-modal-top);
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.55);
align-items: center;
justify-content: center;
}
.craft-choice-dialog {
background: var(--card-background);
padding: 26px;
border-radius: 12px;
width: 92%;
max-width: 520px;
max-height: 85vh;
overflow-y: auto;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.craft-choice-dialog h3 {
margin-top: 0;
color: var(--primary-text);
}
.craft-choice-craft {
font-size: 0.85rem;
color: var(--text-muted);
margin-top: -6px;
}
.craft-choice-options {
display: flex;
flex-direction: column;
gap: 10px;
margin: 14px 0;
}
.craft-choice-option {
display: flex;
flex-direction: column;
gap: 4px;
text-align: left;
padding: 12px 14px;
border: 2px solid var(--border-color);
border-radius: 8px;
background: var(--background-color);
cursor: pointer;
transition: border-color 0.2s, transform 0.2s;
font-size: 0.95rem;
}
.craft-choice-option:hover {
border-color: var(--primary-color);
transform: translateY(-2px);
}
.craft-choice-option span {
font-size: 0.82rem;
color: var(--text-muted);
font-weight: 400;
}
.craft-choice-option-active {
border-color: var(--primary-color);
background: var(--card-background);
}
/* Learning Sections */
.spell-learning,
.craft-learning,
.ability-learning {
margin-top: 20px;
padding: 20px;
background: var(--background-color);
border-radius: 8px;
}
.spell-learning select,
.craft-learning select,
.ability-learning select {
width: 100%;
max-width: 400px;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 5px;
margin-right: 10px;
margin-bottom: 10px;
}
.btn-sm {
padding: 5px 10px;
font-size: 12px;
}
.empty-message {
color: var(--text-muted);
font-style: italic;
padding: 20px;
text-align: center;
background: var(--background-color);
border-radius: 8px;
}
/* Inventory and Crafts Section */
.inventory-section,
.crafts-section {
margin-bottom: 30px;
}

/* Character inventory, wallet and shop */
.inventory-wallet-card,
.inventory-custom-section {
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 18px;
margin: 18px 0 24px;
}
.inventory-wallet-card h3,
.inventory-section h3,
.inventory-custom-section h3 {
margin: 0 0 6px;
color: var(--primary-text);
}
.inventory-hint {
font-size: 0.82rem;
color: var(--text-color);
opacity: 0.65;
margin: 4px 0;
}
.wallet-form {
display: grid;
grid-template-columns: repeat(3, minmax(120px, 1fr)) auto;
gap: 10px;
align-items: end;
margin-top: 14px;
}
.wallet-form label {
font-size: 0.8rem;
font-weight: 600;
}
.wallet-form input,
.character-search-input,
.inventory-custom-form input,
.inventory-custom-form textarea,
.shop-buy-row input,
.inventory-item-actions input {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--border-color);
border-radius: 6px;
background: var(--card-background);
color: var(--text-color);
}
.wallet-summary {
margin-top: 12px;
font-size: 1.05rem;
font-weight: 700;
color: var(--primary-text);
}
.inventory-section-header {
display: flex;
justify-content: space-between;
align-items: end;
gap: 14px;
margin-bottom: 14px;
}
.inventory-section-header .character-search-input {
max-width: 320px;
}
/* Фильтры на вкладке «Инвентарь»: работают вместе со строкой поиска и
   доступны как для сумки персонажа, так и для каталога-магазина. */
.inventory-filter-bar {
display: flex;
align-items: end;
gap: 10px;
flex-wrap: wrap;
margin: -4px 0 14px;
padding: 10px 12px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--cat-filter-bg);
}
.inventory-filter-bar label {
display: grid;
gap: 4px;
font-size: 0.72rem;
font-weight: 700;
color: var(--text-color);
opacity: 0.82;
}
.inventory-filter-bar select {
min-width: min(210px, 100%);
max-width: 260px;
padding: 7px 9px;
border: 1px solid var(--border-color);
border-radius: 6px;
background: var(--card-background);
color: var(--text-color);
font-size: 0.84rem;
}
.inventory-filter-summary {
font-size: 0.78rem;
opacity: 0.7;
margin-left: auto;
padding-bottom: 7px;
}
.inventory-filter-bar .btn {
margin-bottom: 1px;
}
.character-inventory-grid,
.shop-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 14px;
}
.inventory-item-card,
.shop-item-card {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 14px;
min-width: 0;
}
.inventory-item-card p,
.shop-item-card p {
font-size: 0.82rem;
line-height: 1.4;
opacity: 0.75;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.inventory-item-heading {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
}
.inventory-item-heading h4 {
margin: 0;
color: var(--primary-text);
overflow-wrap: anywhere;
}
.inventory-unit,
.shop-source {
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
padding: 2px 7px;
border-radius: 10px;
background: rgba(74, 144, 217, 0.12);
color: var(--primary-text);
}
.inventory-category {
font-size: 0.7rem;
opacity: 0.64;
}
/* Тип снаряжения: подсказывает, в какую ячейку силуэта предмет надевается. */
.inventory-equip-kind {
font-size: 0.75rem;
font-weight: 600;
color: var(--primary-text);
}
.inventory-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.inventory-tag {
font-size: 0.68rem;
padding: 2px 7px;
border-radius: 9px;
background: rgba(74, 144, 217, 0.1);
color: var(--primary-text);
}
.inventory-physics,
.inventory-purchase-note {
font-size: 0.75rem;
opacity: 0.7;
}
.inventory-purchase-note {
font-weight: 700;
color: var(--success-color);
opacity: 1;
}
.inventory-item-actions,
.shop-buy-row {
display: flex;
align-items: end;
gap: 6px;
flex-wrap: wrap;
margin-top: auto;
padding-top: 5px;
}
.inventory-item-actions label {
font-size: 0.7rem;
flex: 1;
min-width: 100px;
}
.inventory-item-actions input,
.shop-buy-row input {
width: 95px;
}
.inventory-sell-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding-top: 4px;
font-size: 0.75rem;
}
.inventory-sell-row input {
width: 80px;
padding: 6px 8px;
border: 1px solid var(--border-color);
border-radius: 6px;
background: var(--card-background);
color: var(--text-color);
}
.inventory-sell-hint {
opacity: 0.7;
}
.shop-price {
font-weight: 700;
color: var(--primary-text);
font-size: 0.88rem;
}
.shop-price-source {
display: inline-block;
margin-left: 5px;
font-size: 0.67rem;
font-weight: 600;
opacity: 0.7;
}
.shop-price-source-unknown {
color: var(--danger-color);
opacity: 0.85;
}
.shop-item-card-unknown-price {
border-style: dashed;
}
.shop-section {
border-top: 1px solid var(--border-color);
padding-top: 22px;
}
.inventory-custom-section summary {
cursor: pointer;
font-weight: 700;
color: var(--primary-text);
}
.inventory-custom-form {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 10px;
margin-top: 14px;
}
.inventory-custom-form textarea,
.inventory-custom-form #customItemTags {
grid-column: 1 / -1;
}
.inventory-custom-form button {
justify-self: start;
}
.ability-crafts-section {
border-top: 1px solid var(--border-color);
padding-top: 22px;
margin-top: 28px;
}

/* ==========================================================================
   Карточки предметов каталога (общие стили)
   Используются и в «Каталоге предметов», и на странице персонажа —
   в магазине вкладки «Инвентарь» (описание, состав и свойства товара).
   ========================================================================== */
.item-card-description {
font-size: 0.82rem;
line-height: 1.35;
color: var(--text-color);
opacity: 0.72;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.item-card-meta {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.item-meta-badge {
font-size: 0.7rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
background: var(--cat-filter-bg);
color: var(--primary-text);
}
.item-card-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.item-tag {
display: inline-block;
padding: 2px 9px;
border-radius: 10px;
font-size: 0.72rem;
font-weight: 600;
background: var(--cat-filter-bg);
color: var(--primary-text);
border: none;
}
button.item-tag {
cursor: pointer;
transition: all 0.15s;
}
button.item-tag:hover {
background: var(--primary-color);
color: white;
}
.item-card-physics {
display: flex;
gap: 10px;
font-size: 0.78rem;
color: var(--text-color);
opacity: 0.6;
flex-wrap: wrap;
}
/* Боевые свойства оружия и брони — заметнее физики, это игровая механика */
.item-card-combat {
margin-top: 6px;
font-size: 0.8rem;
line-height: 1.5;
color: var(--text-color);
opacity: 0.85;
}
/* ==========================================================================
   Редкость предметов — цветовая индикация (фэнтезийный стандарт).
   Цвета проверены на контраст ≥4.5:1 для текста бейджа в обеих темах.
   Обычные (common) предметы не подсвечиваются, чтобы не создавать шум.
   ========================================================================== */
:root {
    --rarity-uncommon: #2f7a4f;
    --rarity-rare: #2e6fb0;
    --rarity-epic: #8a4fbf;
    --rarity-legendary: #8f6400;
    /* Бейджи каталогов магии/способностей (проверены на AA в светлой теме) */
    --wiki-badge-legendary: #8f6400;
    --wiki-badge-circle: #8a4fbf;
    --wiki-badge-custom: #2f7a4f;
    --wiki-badge-modified: #b25e15;
}
[data-theme="dark"] {
    --rarity-uncommon: #3fa06a;
    --rarity-rare: #5ba8d8;
    --rarity-epic: #b184e0;
    --rarity-legendary: #e0b341;
    --wiki-badge-legendary: #e0b341;
    --wiki-badge-circle: #b184e0;
    --wiki-badge-custom: #3fa06a;
    --wiki-badge-modified: #e08a3c;
}
/* Цветной бейдж редкости в карточке */
.rarity-badge-uncommon { color: var(--rarity-uncommon) !important; background: color-mix(in srgb, var(--rarity-uncommon) 14%, transparent) !important; }
.rarity-badge-rare { color: var(--rarity-rare) !important; background: color-mix(in srgb, var(--rarity-rare) 14%, transparent) !important; }
.rarity-badge-epic { color: var(--rarity-epic) !important; background: color-mix(in srgb, var(--rarity-epic) 14%, transparent) !important; }
.rarity-badge-legendary { color: var(--rarity-legendary) !important; background: color-mix(in srgb, var(--rarity-legendary) 16%, transparent) !important; }
/* Левый акцент карточки по редкости — заметно, но ненавязчиво */
.item-card.rarity-uncommon { border-left: 4px solid var(--rarity-uncommon); }
.item-card.rarity-rare { border-left: 4px solid var(--rarity-rare); }
.item-card.rarity-epic { border-left: 4px solid var(--rarity-epic); }
.item-card.rarity-legendary { border-left: 4px solid var(--rarity-legendary); box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--rarity-legendary) 30%, transparent); }

/* Эффект расходуемого предмета (еда/напиток/коктейль/зелье) — что даёт при
   употреблении. Выделяем мягким акцентом: игроку сразу видно игровую пользу. */
.item-card-effect {
margin-top: 6px;
font-size: 0.8rem;
line-height: 1.4;
color: var(--primary-text);
background: var(--cat-filter-bg);
border-left: 3px solid var(--primary-color);
border-radius: 6px;
padding: 5px 9px;
}
.item-detail-effect {
margin: 10px 0;
font-size: 0.92rem;
line-height: 1.45;
color: var(--primary-text);
background: var(--cat-filter-bg);
border-left: 3px solid var(--primary-color);
border-radius: 8px;
padding: 8px 12px;
}
.item-card-components {
font-size: 0.78rem;
color: var(--text-color);
opacity: 0.65;
border-top: 1px solid var(--border-color);
padding-top: 6px;
margin-top: auto;
}
.item-card-components summary {
cursor: pointer;
font-weight: 600;
opacity: 0.8;
font-size: 0.82rem;
}
.item-card-components ul {
margin: 4px 0 0 0;
padding-left: 16px;
}
.component-cost {
opacity: 0.75;
}
/* Модальное окно карточки товара (каталог и магазин персонажа) */
.item-detail-modal {
max-width: 620px;
max-height: 85vh;
overflow-y: auto;
}
.item-detail-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0;
}
.item-detail-description {
margin: 12px 0;
line-height: 1.5;
opacity: .85;
}
.item-detail-components {
margin: 10px 0 0;
padding-left: 20px;
}
.item-detail-components li {
margin: 3px 0;
}
/* Карточка товара в магазине кликабельна: открывается полное описание */
.shop-item-card {
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.shop-item-card:hover {
border-color: var(--primary-color);
box-shadow: var(--shadow);
}
.shop-item-card .shop-buy-row,
.shop-item-card input {
cursor: auto;
}
.inventory-item-card.catalog-linked {
cursor: pointer;
transition: border-color 0.15s ease;
}
.inventory-item-card.catalog-linked:hover {
border-color: var(--primary-color);
}
.shop-item-detail-price {
margin: 12px 0;
padding: 10px;
background: var(--cat-filter-bg);
border-radius: 8px;
}
.shop-item-detail-components-title {
margin: 14px 0 0;
}
.shop-item-detail-modal .item-tag {
cursor: default;
}
.character-search-input {
max-width: 400px;
margin-bottom: 12px;
}
/* Responsive */
@media (max-width: 768px) {
.character-page {
grid-template-columns: 1fr;
}
.form-row {
    grid-template-columns: 1fr;
}
.characters-grid {
    grid-template-columns: 1fr;
}
.wallet-form,
.inventory-custom-form {
    grid-template-columns: 1fr;
}
.inventory-custom-form textarea,
.inventory-custom-form #customItemTags {
    grid-column: auto;
}
.inventory-section-header {
    align-items: stretch;
    flex-direction: column;
}
.inventory-section-header .character-search-input {
    max-width: none;
}
}
/* Кнопка броска кубика */
.btn-roll {
background-color: var(--primary-color);
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 1.2rem;
margin-left: 8px;
transition: background-color 0.2s, transform 0.1s;
}
.btn-roll:hover {
background-color: var(--primary-hover);
transform: scale(1.1);
}
.btn-roll:active {
transform: scale(0.95);
}
/* Auth Page Styles */
.auth-section {
background: var(--card-background);
padding: 40px;
border-radius: 10px;
box-shadow: var(--shadow);
max-width: 500px;
margin: 40px auto;
}
.auth-container {
text-align: center;
}
.auth-container h2 {
color: var(--primary-text);
margin-bottom: 10px;
}
.auth-form {
margin-top: 30px;
text-align: left;
}
.btn-block {
width: 100%;
padding: 12px;
font-size: 16px;
}
.auth-info {
margin-top: 30px;
padding: 15px;
background: var(--background-color);
border-radius: 5px;
font-size: 0.9rem;
color: var(--text-muted);
}
.error-message {
background-color: #f8d7da;
color: #721c24;
padding: 10px 15px;
border-radius: 5px;
margin-bottom: 20px;
border: 1px solid #f5c6cb;
}
.header-actions {
display: flex;
align-items: center;
gap: 15px;
}
/* Main Header Styles */
.main-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid var(--border-color);
}
.header-left {
display: flex;
align-items: center;
gap: 15px;
}
.header-right {
display: flex;
align-items: center;
gap: 15px;
}
.menu-toggle-btn {
background: none;
border: none;
font-size: 1.8rem;
cursor: pointer;
padding: 5px 10px;
color: var(--text-color);
transition: color 0.3s;
}
.menu-toggle-btn:hover {
color: var(--primary-text);
}
/* Отключаем переходы при начальной загрузке, чтобы избежать вспышки фона; переключатель темы не трогаем */
html.theme-preload .bg-scene,
html.theme-preload .bg-scene *,
html.theme-preload body {
    transition: none;
    animation: none;
}
html.theme-preload .bg-scene *::before,
html.theme-preload .bg-scene *::after {
    transition: none;
    animation: none;
}
/* NEW THEME SWITCH STYLES */
.theme-switch {
  --toggle-size: 16px; /* ИЗМЕНЕНО: было 32px, уменьшено в 2 раза */
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 0.38em;
  --container-light-bg: #5caad4;
  --container-night-bg: #1b1e36;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #f5c518;
  --moon-bg: #d8d4c0;
  --spot-color: #9b9787;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff8e1;
  --clouds-color: #f4f4f4;
  --back-clouds-color: #bacfe0;
  --transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: 0.3s cubic-bezier(0, -0.02, 0.35, 1.17);
  display: inline-block;
}

.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
  box-sizing: border-box; margin: 0; padding: 0; font-size: var(--toggle-size);
}

.theme-switch,
.theme-switch *,
.theme-switch *::before,
.theme-switch *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}

.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: all var(--transition);
  box-shadow:
    0 0 0 2.5px #1a1a1a,
    3px 4px 0 2.5px rgba(26, 26, 26, 0.22);
  transform: rotate(-0.7deg);
  filter: url(#sketchy);
}

.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image: repeating-linear-gradient(
    -50deg,
    transparent,
    transparent 7px,
    rgba(255, 255, 255, 0.04) 7px,
    rgba(255, 255, 255, 0.04) 8px
  );
  border-radius: inherit;
  pointer-events: none;
}

.theme-switch__checkbox {
  display: none;
}

.theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  box-shadow:
    inset 0 0 0 3.375em rgba(255, 255, 255, 0.1),
    inset 0 0 0 3.375em rgba(255, 255, 255, 0.1),
    0 0 0 0.625em rgba(255, 255, 255, 0.1),
    0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: flex;
  transition: var(--circle-transition);
  pointer-events: none;
}

.theme-switch__circle-container::before {
  content: "";
  position: absolute;
  width: calc(var(--circle-container-diameter) + 1.5em);
  height: calc(var(--circle-container-diameter) + 1.5em);
  left: -0.75em;
  top: -0.75em;
  border-radius: 50%;
  background: conic-gradient(
    transparent 0deg,
    transparent 8deg,
    rgba(245, 197, 24, 0.52) 8deg,
    rgba(245, 197, 24, 0.52) 22deg,
    transparent 22deg,
    transparent 53deg,
    rgba(245, 197, 24, 0.52) 53deg,
    rgba(245, 197, 24, 0.52) 67deg,
    transparent 67deg,
    transparent 98deg,
    rgba(245, 197, 24, 0.52) 98deg,
    rgba(245, 197, 24, 0.52) 112deg,
    transparent 112deg,
    transparent 143deg,
    rgba(245, 197, 24, 0.52) 143deg,
    rgba(245, 197, 24, 0.52) 157deg,
    transparent 157deg,
    transparent 188deg,
    rgba(245, 197, 24, 0.52) 188deg,
    rgba(245, 197, 24, 0.52) 202deg,
    transparent 202deg,
    transparent 233deg,
    rgba(245, 197, 24, 0.52) 233deg,
    rgba(245, 197, 24, 0.52) 247deg,
    transparent 247deg,
    transparent 278deg,
    rgba(245, 197, 24, 0.52) 278deg,
    rgba(245, 197, 24, 0.52) 292deg,
    transparent 292deg,
    transparent 323deg,
    rgba(245, 197, 24, 0.52) 323deg,
    rgba(245, 197, 24, 0.52) 337deg,
    transparent 337deg,
    transparent 360deg
  );
  animation: rotateSunRays 14s linear infinite;
  opacity: 1;
  transition: opacity var(--transition);
  pointer-events: none;
  filter: url(#sketchy-sm);
}

.theme-switch__checkbox:checked
  ~ .theme-switch__container
  .theme-switch__circle-container::before {
  opacity: 0;
}

@keyframes rotateSunRays {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  box-shadow:
    0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset,
    0em -0.062em 0.062em 0em #a1872a inset,
    0.1em 0.13em 0 0.04em #1a1a1a;
  filter: url(#sketchy-sm)
    drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25))
    drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
  transition: var(--transition);
  transform: scale(1);
}

.theme-switch__sun-moon-container:hover {
  transform: scale(1.1) rotate(5deg);
}

.theme-switch__moon {
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  box-shadow:
    0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset,
    0em -0.062em 0.062em 0em #969696 inset;
  transition:
    all var(--transition),
    transform 0.3s ease;
  position: relative;
}

.theme-switch__moon:hover {
  transform: rotate(15deg);
}

.theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
  transition: background-color 0.3s ease;
  filter: url(#sketchy-sm);
}

.theme-switch__spot:nth-of-type(2) {
  width: 0.375em;
  height: 0.375em;
  top: 0.937em;
  left: 1.375em;
}
.theme-switch__spot:nth-last-of-type(3) {
  width: 0.25em;
  height: 0.25em;
  top: 0.312em;
  left: 0.812em;
}
.theme-switch__moon:hover .theme-switch__spot {
  background-color: #7a7f8c;
}

.theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  box-shadow:
    0.937em 0.312em var(--clouds-color),
    -0.312em -0.312em var(--back-clouds-color),
    1.437em 0.375em var(--clouds-color),
    0.5em -0.125em var(--back-clouds-color),
    2.187em 0 var(--clouds-color),
    1.25em -0.062em var(--back-clouds-color),
    2.937em 0.312em var(--clouds-color),
    2em -0.312em var(--back-clouds-color),
    3.625em -0.062em var(--clouds-color),
    2.625em 0em var(--back-clouds-color),
    4.5em -0.312em var(--clouds-color),
    3.375em -0.437em var(--back-clouds-color),
    4.625em -1.75em 0 0.437em var(--clouds-color),
    4em -0.625em var(--back-clouds-color),
    4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  filter: url(#sketchy-sm);
}

.theme-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: -100%;
  left: 0.312em;
  width: 2.75em;
  height: auto;
  transition: var(--transition);
}

.theme-switch__checkbox:checked ~ .theme-switch__container {
  background-color: var(--container-night-bg);
}

.theme-switch__checkbox:checked
  ~ .theme-switch__container
  .theme-switch__circle-container {
  left: calc(
    100% - var(--circle-container-offset) - var(--circle-container-diameter)
  );
}

.theme-switch__checkbox:checked
  ~ .theme-switch__container
  .theme-switch__circle-container:hover {
  left: calc(
    100% - var(--circle-container-offset) - var(--circle-container-diameter) -
      0.187em
  );
}

.theme-switch__circle-container:hover {
  left: calc(var(--circle-container-offset) + 0.187em);
}

.theme-switch__checkbox:checked ~ .theme-switch__container .theme-switch__moon {
  transform: translateX(0);
}

.theme-switch__checkbox:checked
  ~ .theme-switch__container
  .theme-switch__clouds {
  bottom: -4.062em;
}

.theme-switch__checkbox:checked
  ~ .theme-switch__container
  .theme-switch__stars-container {
  top: 50%;
  transform: translateY(-50%);
}

.theme-switch__container:hover .theme-switch__clouds {
  transform: translateX(15px) scale(1.02);
}

.theme-switch__sun-moon-container::after {
  content: "";
  position: absolute;
  inset: -5px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 70%
  );
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-switch__sun-moon-container:hover::after {
  opacity: 1;
}

/* ==========================================================================
   Падающие звёзды / метеоры / переливы внутри переключателя темы.
   Анимация работает в тёмном положении (чекбокс отмечен) на ЛЮБОМ экране —
   и на ПК, и на телефоне. Раньше падающие звёзды были крошечными точками
   без хвоста, а северное сияние навсегда уезжало за пределы контейнера
   (translateY(-100%)), поэтому на ПК эффект выглядел «пропавшим».
   Хвосты сделаны через ::before, пути движения заданы в em, чтобы
   масштабироваться вместе с --toggle-size.
   ========================================================================== */
.theme-switch__shooting-star,
.theme-switch__shooting-star-2,
.theme-switch__shooting-star-3 {
  position: absolute;
  top: 14%;
  left: -12%;
  width: 0.18em;
  height: 0.18em;
  background: #fffdf0;
  border-radius: 50%;
  box-shadow: 0 0 0.35em 0.06em rgba(255, 245, 200, 0.85);
  opacity: 0;
  z-index: 3;
  will-change: transform, opacity;
}

.theme-switch__shooting-star::before,
.theme-switch__shooting-star-2::before,
.theme-switch__shooting-star-3::before {
  content: "";
  position: absolute;
  top: 50%;
  /* Хвост тянется ПОЗАДИ звезды: она летит вниз-вправо, значит хвост —
     вверх-влево от неё. Раньше он был справа (left:100%) и «обгонял»
     звезду, а сама звезда улетала за пределы контейнера. */
  right: 100%;
  width: 2.6em;
  height: 0.09em;
  background: linear-gradient(
    90deg,
    rgba(255, 245, 200, 0) 0%,
    rgba(255, 245, 200, 0.85) 55%,
    #fffdf0 100%
  );
  transform: translateY(-50%);
  border-radius: 99em;
  transform-origin: right center;
}

.theme-switch__shooting-star-2 { top: 36%; left: -8%; animation-delay: 1.1s; }
.theme-switch__shooting-star-2::before {
  background: linear-gradient(
    90deg,
    rgba(180, 220, 255, 0) 0%,
    rgba(180, 220, 255, 0.8) 55%,
    #e6f2ff 100%
  );
  box-shadow: 0 0 0.35em 0.04em rgba(180, 220, 255, 0.6);
}
.theme-switch__shooting-star-3 { top: 62%; left: -15%; animation-delay: 2.3s; }
.theme-switch__shooting-star-3::before { width: 2em; }

.theme-switch__meteor {
  position: absolute;
  top: -8%;
  left: 46%;
  width: 0.24em;
  height: 0.24em;
  background: #ffd86b;
  border-radius: 50%;
  box-shadow: 0 0 0.5em 0.08em rgba(255, 200, 80, 0.7);
  opacity: 0;
  z-index: 3;
  will-change: transform, opacity;
}
.theme-switch__meteor::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0.09em;
  height: 2.4em;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    #ffd86b 0%,
    rgba(255, 180, 70, 0.6) 45%,
    rgba(255, 180, 70, 0) 100%
  );
  border-radius: 99em;
}

.theme-switch__checkbox:checked
  ~ .theme-switch__container
  .theme-switch__shooting-star {
  animation: themeShootingStar 2.6s linear infinite;
  opacity: 1;
}
.theme-switch__checkbox:checked
  ~ .theme-switch__container
  .theme-switch__shooting-star-2 {
  animation: themeShootingStar 3.4s linear infinite 1.2s;
  opacity: 1;
}
.theme-switch__checkbox:checked
  ~ .theme-switch__container
  .theme-switch__shooting-star-3 {
  animation: themeShootingStar 4.1s linear infinite 2.4s;
  opacity: 1;
}
.theme-switch__checkbox:checked
  ~ .theme-switch__container
  .theme-switch__meteor {
  animation: themeMeteor 3.6s ease-in infinite 1.6s;
  opacity: 1;
}

@keyframes themeShootingStar {
  0%   { transform: translate(0, 0) rotate(45deg); opacity: 0; }
  8%   { opacity: 1; }
  70%  { opacity: 1; }
  /* Путь звёзды ограничен размерами контейнера (5.625em × 2.5em).
     Раньше 8.2em уводили звезду далеко за границу overflow:hidden —
     её почти сразу обрезало, поэтому на ПК звёзды «не падали». */
  100% { transform: translate(5.4em, 1.6em) rotate(45deg); opacity: 0; }
}

@keyframes themeMeteor {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  /* Метеор падает на всю высоту контейнера (2.5em), а не на 4.2em —
     иначе нижнюю половину падения обрезало. */
  100% { transform: translateY(2.4em) scale(0.45); opacity: 0; }
}

/* Мерцающее звёздное небо (россыпь). Звёзды поочерёдно вспыхивают
   и переливаются — это тот самый эффект «переливания звёзд». */
.theme-switch__stars-cluster {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.theme-switch__stars-cluster .star {
  position: absolute;
  width: 0.2em;
  height: 0.2em;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0.42em 0.08em rgba(255, 255, 255, 0.85);
  animation: themeStarTwinkle 2.4s ease-in-out infinite;
  will-change: transform, opacity;
}

.theme-switch__stars-cluster .star:nth-child(1) { top: 22%; left: 18%; animation-delay: 0s; }
.theme-switch__stars-cluster .star:nth-child(2) { top: 32%; left: 48%; animation-delay: 0.4s; }
.theme-switch__stars-cluster .star:nth-child(3) { top: 26%; left: 76%; animation-delay: 0.8s; }
.theme-switch__stars-cluster .star:nth-child(4) { top: 58%; left: 32%; animation-delay: 1.2s; }
.theme-switch__stars-cluster .star:nth-child(5) { top: 66%; left: 62%; animation-delay: 1.6s; }

@keyframes themeStarTwinkle {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.8);
    box-shadow: 0 0 0.25em 0.03em rgba(255, 255, 255, 0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.35);
    box-shadow: 0 0 0.7em 0.14em rgba(180, 220, 255, 0.95);
  }
}

/* Северное сияние: слой расположен ВНУТРИ контейнера (inset:0) и
   переливается попеременно влево-вправо. Раньше он был навсегда
   сдвинут на -100% по Y и поэтому был не виден. */
.theme-switch__aurora {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0, 220, 200, 0) 0%,
    rgba(0, 220, 200, 0.18) 28%,
    rgba(140, 90, 255, 0.22) 50%,
    rgba(0, 220, 200, 0.18) 72%,
    rgba(0, 220, 200, 0) 100%
  );
  background-size: 220% 100%;
  opacity: 0;
  filter: blur(3px);
  z-index: 1;
  transition: opacity 0.5s ease;
}

.theme-switch__comets {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-switch__comets .comet {
  position: absolute;
  top: 32%;
  left: -12%;
  width: 0.18em;
  height: 0.18em;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0.5em 0.08em rgba(255, 255, 255, 0.8);
}
.theme-switch__comets .comet::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 2.4em;
  height: 0.08em;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(180, 220, 255, 0.4) 55%,
    rgba(180, 220, 255, 0) 100%
  );
  border-radius: 99em;
}
.theme-switch__comets .comet:nth-child(1) { top: 28%; animation: themeCometMove 5s linear infinite; }
.theme-switch__comets .comet:nth-child(2) { top: 56%; animation: themeCometMove 7s linear infinite 2.5s; }

@keyframes themeCometMove {
  /* Хвост (::before торчит вправо от ядра) должен смотреть по вектору
     полёта: наклон 16° = atan(1.5em / 5.2em) от траектории ниже. */
  0%   { transform: translate(0, 0) rotate(16deg) scale(1); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  /* Комета тоже должна оставаться внутри контейнера (5.625em × 2.5em),
     а не улетать на 9.5em в сторону — иначе её не видно. */
  100% { transform: translate(5.2em, 1.5em) rotate(16deg) scale(0.3); opacity: 0; }
}

.theme-switch__checkbox:checked
  ~ .theme-switch__container
  .theme-switch__stars-cluster {
  opacity: 1;
}
.theme-switch__checkbox:checked
  ~ .theme-switch__container
  .theme-switch__aurora {
  opacity: 1;
  animation: auroraWave 7s ease-in-out infinite alternate;
}
.theme-switch__checkbox:checked
  ~ .theme-switch__container
  .theme-switch__comets {
  opacity: 1;
}

@keyframes auroraWave {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Примечание: раньше здесь жил блок prefers-reduced-motion, который на ПК
   (где «уменьшить движение» часто включено в ОС) навсегда выключал падающие
   звёзды, метеоры и мерцание переключателя. Теперь звёздные анимации
   возвращаются точечным правилом в 06-ui.css — оно перекрывает глобальное
   глушение только для крошечных декоративных эффектов, не трогая крупное
   движение (облака, птицы). */

/* Side Navigation */
.side-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    background: var(--card-background);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    z-index: var(--z-side-nav);
    overflow-y: auto;
    transform: translateX(-100%); /* Спрятано слева */
    /* visibility:hidden убирает скрытое меню из порядка табуляции и из дерева
       доступности — иначе клавиатурные/скринридер-пользователи «проваливались»
       в невидимые ссылки. Задержка visibility = длительности анимации, чтобы
       меню успевало доехать за экран прежде, чем исчезнуть. */
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
}
.side-nav.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s linear 0s;
}

/* Правостороннее меню */
.side-nav-right {
    left: auto;
    right: 0;
    transform: translateX(100%); /* Спрятано справа */
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
}
.side-nav-right.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s linear 0s;
}
.side-nav-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid var(--border-color);
}
.side-nav-header h3 {
color: var(--primary-text);
margin: 0;
}
.close-nav-btn {
background: none;
border: none;
font-size: 2rem;
cursor: pointer;
color: var(--text-muted);
padding: 0;
line-height: 1;
}
.close-nav-btn:hover {
color: #000;
}
.side-nav-list {
list-style: none;
padding: 0;
margin: 0;
}
.side-nav-list li {
border-bottom: 1px solid var(--border-color);
}
.nav-link {
display: block;
padding: 15px 20px;
color: var(--text-color);
text-decoration: none;
transition: all 0.3s;
}
.nav-link:hover {
background: var(--background-color);
color: var(--primary-text);
padding-left: 25px;
}
.nav-link.active {
background: var(--primary-color);
color: white;
}
.nav-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: var(--z-nav-overlay);
}
.admin-badge {
background-color: var(--success-color);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
/* Empty Page Section */
.empty-page-section {
background: var(--card-background);
padding: 60px 30px;
border-radius: 10px;
box-shadow: var(--shadow);
text-align: center;
}
.empty-content h2 {
color: var(--primary-text);
margin-bottom: 20px;
}
.empty-content p {
color: var(--text-muted);
font-size: 1.1rem;
}
/* User ID Search Section */
.user-id-search-section {
background: var(--background-color);
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.user-id-search-section h3 {
color: var(--primary-text);
margin-bottom: 15px;
font-size: 1.1rem;
}
.user-id-search-form {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.user-id-search-form input {
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 5px;
width: 200px;
font-size: 14px;
}
.user-search-result {
margin-top: 15px;
}

/* ==========================================
    Окно подтверждения опасных действий
   ========================================== */

.confirm-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-confirm); /* Выше обычных модалок, чтобы перекрывать их */
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: confirmDialogFade 0.15s ease;
}

@keyframes confirmDialogFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.confirm-dialog {
    background: var(--card-background);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    width: 100%;
    max-width: 420px;
    padding: 26px 24px 22px;
    text-align: center;
    animation: confirmDialogPop 0.18s ease;
}

@keyframes confirmDialogPop {
    from { transform: translateY(-12px) scale(0.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.confirm-dialog__icon {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 12px;
}

.confirm-dialog__title {
    color: var(--danger-color);
    font-size: 1.2rem;
    margin: 0 0 10px;
}

.confirm-dialog__message {
    margin: 0 0 8px;
    font-size: 0.98rem;
    line-height: 1.5;
    /* Имена персонажей задаёт пользователь — длинное слово не должно
       растягивать окно за пределы экрана. */
    overflow-wrap: anywhere;
}

.confirm-dialog__note {
    margin: 0 0 4px;
    font-size: 0.85rem;
    opacity: 0.75;
    line-height: 1.45;
}

.confirm-dialog__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

.confirm-dialog__actions .btn {
    min-width: 120px;
}

.confirm-dialog__actions .btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .confirm-dialog__actions {
        flex-direction: column-reverse;
    }
    .confirm-dialog__actions .btn {
        width: 100%;
    }
}

/* --- SVG-иконки интерфейса (спрайт static/icons/sprite.svg) --- */
.svg-icon {
    width: 1.05em;
    height: 1.05em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.15em;
    flex-shrink: 0;
}
.quick-link-icon .svg-icon {
    width: 1em;
    height: 1em;
}

/* ==========================================================================
   Хлебные крошки (§9.3.4)
   ========================================================================== */
.breadcrumbs-bar {
    margin: var(--space-2, 8px) 0 var(--space-4, 16px);
    font-size: 0.85rem;
}
.breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--space-1, 4px);
}
.breadcrumbs-item {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
}
.breadcrumbs-item a {
    color: var(--primary-text);
    text-decoration: none;
    transition: color var(--transition-fast, 150ms ease);
}
.breadcrumbs-item a:hover {
    text-decoration: underline;
    color: var(--primary-hover);
}
.breadcrumbs-item.is-current span {
    color: var(--text-color);
    font-weight: 600;
}
.breadcrumbs-separator {
    margin: 0 var(--space-2, 6px);
    opacity: 0.4;
    user-select: none;
}