:root {
    --base: #525252;
    --bg-page: #121212;
    --bg-card: #1e1e1e;
    --bd-base: #333333;
    --text-main: #f5f5f5;
    --text-mut: #a3a3a3;
    --accent: #38bdf8;
}

/* Авто-маржины для флекс-выравнивания */
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* Атомарные классы отступов и позиционирования */
.p15 { padding: 15px; }
.t40 { top: 40px; }
.t5  { top: 5px; }
.r5  { right: 5px; }

/* Атомарные классы ширины */
.w16  { width: 16px; }
.w20  { width: 20px; }
.w50  { width: 50px; }
.w60  { width: 60px; }
.w140 { width: 140px; }
.w160 { width: 160px; }
.w180 { width: 180px; }
.w260 { width: 260px; }
.w320 { width: 320px; }
.w500 { width: 500px; }
.w640 { width: 640px; }

.max-w400 { max-width: 400px; }

/* Атомарные классы высоты */
.h16  { height: 16px; }
.h20  { height: 20px; }
.h60  { height: 60px; }
.h80  { height: 80px; }
.h180 { height: 180px; }
.h200 { height: 200px; }
.h320 { height: 320px; }
.h400 { height: 400px; }

.max-h180 { max-height: 180px; }

/* Сохранение переносов строк */
.pre-wrap { white-space: pre-wrap; }

/* Двухуровневые подстветки Drag and Drop */
.is-drag-target {
    outline: 2px dashed var(--accent) !important;
    outline-offset: -2px !important;
}

.is-drag-hover {
    outline: 2px solid var(--accent) !important;
    outline-offset: -2px !important;
}

/* Стабильная рамка миниатюры без прыжков */
.thumb-item {
    border: 2px solid transparent;
    box-sizing: border-box;
}

.thumb-item.is-active {
    border-color: var(--accent);
}

/* Фоновые градиенты карточек по характерам */
.card-strong {
    background: linear-gradient(to top, rgba(239, 68, 68, 0.12) 0%, var(--bg-card) 65%);
}
.card-neutral {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.12) 0%, var(--bg-card) 65%);
}
.card-weak {
    background: linear-gradient(to top, rgba(56, 189, 248, 0.12) 0%, var(--bg-card) 65%);
}