/* 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);
}

/* Обновленные анимации (дальность уменьшена вдвое, чтобы не вылетать за границы) */
@keyframes themeShootingStar2 {
  0% { transform: translateX(0) translateY(0) rotate(45deg); opacity: 1; }
  100% { transform: translateX(75px) translateY(75px) rotate(45deg); opacity: 0; }
}
@keyframes themeMeteor2 {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(75px) scale(0.3); opacity: 0; }
}
@keyframes themeCometMove2 {
  0% { transform: translateX(0) translateY(0) rotate(-45deg) scale(1); opacity: 0; }
  10% { opacity: 1; } 90% { opacity: 1; }
  100% { transform: translateX(100px) translateY(100px) rotate(-45deg) scale(0.2); opacity: 0; }
}

.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;
}

.theme-switch__shooting-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  top: 20%;
  left: -10%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-switch__shooting-star-2 {
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
  top: 35%;
  left: -10%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-switch__meteor {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ffd700;
  border-radius: 50%;
  top: -10%;
  left: 50%;
  opacity: 0;
  filter: blur(1px);
  transition: opacity 0.3s ease;
}

.theme-switch__checkbox:checked
  ~ .theme-switch__container
  .theme-switch__shooting-star {
  animation: themeShootingStar 2s linear infinite;
  opacity: 1;
}

.theme-switch__checkbox:checked
  ~ .theme-switch__container
  .theme-switch__shooting-star-2 {
  animation: themeShootingStar 3s linear infinite 1s;
  opacity: 1;
}

.theme-switch__checkbox:checked
  ~ .theme-switch__container
  .theme-switch__meteor {
  animation: themeMeteor 4s linear infinite 2s;
  opacity: 1;
}

@keyframes themeShootingStar {
  0% {
    transform: translateX(0) translateY(0) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: translateX(150px) translateY(150px) rotate(45deg);
    opacity: 0;
  }
}

@keyframes themeMeteor {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(150px) scale(0.3);
    opacity: 0;
  }
}

.theme-switch__stars-cluster {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-switch__stars-cluster .star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 4px 1px white;
}

.theme-switch__stars-cluster .star:nth-child(1) {
  top: 20%;
  left: 20%;
  animation: twinkle 1s infinite ease-in-out;
}
.theme-switch__stars-cluster .star:nth-child(2) {
  top: 30%;
  left: 55%;
  animation: twinkle 1s infinite ease-in-out 0.3s;
}
.theme-switch__stars-cluster .star:nth-child(3) {
  top: 40%;
  left: 80%;
  animation: twinkle 1s infinite ease-in-out 0.6s;
}
.theme-switch__stars-cluster .star:nth-child(4) {
  top: 60%;
  left: 30%;
  animation: twinkle 1s infinite ease-in-out 0.9s;
}
.theme-switch__stars-cluster .star:nth-child(5) {
  top: 70%;
  left: 65%;
  animation: twinkle 1s infinite ease-in-out 1.2s;
}

.theme-switch__aurora {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(
    90deg,
    rgba(0, 255, 255, 0) 0%,
    rgba(0, 255, 255, 0.2) 25%,
    rgba(128, 0, 255, 0.2) 50%,
    rgba(0, 255, 255, 0.2) 75%,
    rgba(0, 255, 255, 0) 100%
  );
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-100%);
  transition: opacity 0.3s ease;
}

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

.theme-switch__comets .comet {
  position: absolute;
  width: 2px;
  height: 2px;
  background: linear-gradient(90deg, white 0%, transparent 90%);
  border-radius: 50%;
  filter: blur(1px);
}

.theme-switch__comets .comet:nth-child(1) {
  top: 30%;
  left: -10%;
  animation: themeCometMove 4s linear infinite;
}
.theme-switch__comets .comet:nth-child(2) {
  top: 50%;
  left: -10%;
  animation: themeCometMove 6s linear infinite 2s;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes themeCometMove {
  0% {
    transform: translateX(0) translateY(0) rotate(-45deg) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(200px) translateY(200px) rotate(-45deg) scale(0.2);
    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 8s linear infinite;
}
.theme-switch__checkbox:checked
  ~ .theme-switch__container
  .theme-switch__comets {
  opacity: 1;
}

@keyframes auroraWave {
  0% {
    transform: translateY(-100%) translateX(-50%);
  }
  100% {
    transform: translateY(-100%) translateX(50%);
  }
}

/* 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;
}