:root {
    --main-color: #2962FF;
    --main-color-rgb: 41, 98, 255;
    --text-color: #ffffffe6;
    --pow-color: #ffffffbf;
    --ot-color: #ffffff73;
    --border: #252525d9;
    --button-back: #101010d9;
    --glow-color: #2962FF;
    --main-bg: #181818;
    --main-text: #fff;
    --accent: #E11C23;
    --accent-rgb: 225, 28, 35;
    --error: #ff3333;
    --success: #33cc66;
    --warning: #ffaa00;
    --border-radius: 8px;
    --input-bg: #232323;
    --input-border: #333;
    --input-text: #fff;
    --card-bg: rgba(20, 20, 20, 0.6);
    --card-border: rgba(41, 98, 255, 0.2);
    --secondary-color: #1565C0;
    --secondary-rgb: 21, 101, 192;
    --primary-light: #448AFF;
    --primary-dark: #0D47A1;
}

:root[data-theme="light"] {
    --text-color: #000000e6;
    --pow-color: #000000bf;
    --ot-color: #00000073;
    --border: rgba(41, 98, 255, 0.3);
    --button-back: rgba(255, 255, 255, 0.8);
    --main-bg: #f8f7ff;
    --main-text: #000;
    --input-bg: rgba(255, 255, 255, 1);
    --input-border: rgba(41, 98, 255, 0.25);
    --input-text: #000;
    --card-bg: rgba(255, 255, 255, 0.8);
    --card-border: rgba(41, 98, 255, 0.3);
}

/* Стили для логотипа */
.logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-img {
    height: 32px;
    width: auto;
}

.logo-link {
    display: flex;
    align-items: center;
}

/* Стили для иконки по умолчанию в features */
.default-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 3rem;
    color: var(--main-color);
}

/* Настройки берутся из server.json через dynamic-config.css.php */
/* ??????????? */
#notify-container {
    position: fixed !important;
    right: 32px !important;
    bottom: 32px !important;
    left: auto !important;
    top: auto !important;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

.notify {
    min-width: 280px;
    max-width: 400px;
    background: var(--button-back, rgba(16, 16, 16, 0.85));
    color: var(--text-primary, #ffffff);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 18px 24px;
    font-family: 'medium', 'Montserrat', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
    opacity: 0;
    transform: translateX(120%) scale(0.8);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 1px solid var(--border);
    border-left: 4px solid var(--main-color);
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 16px;
    backdrop-filter: blur(10px);
}

.notify.show { opacity: 1; transform: translateX(0) scale(1); }
.notify-icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.notify-text { flex: 1; line-height: 1.4; }

.notify-success { border-left-color: var(--success-color, #2ed573); background: linear-gradient(135deg, rgba(46, 213, 115, 0.05), var(--button-back, rgba(16, 16, 16, 0.85))); }
.notify-error { border-left-color: var(--error-color, #ff4757); background: linear-gradient(135deg, rgba(255, 71, 87, 0.05), var(--button-back, rgba(16, 16, 16, 0.85))); }
.notify-info { border-left-color: var(--accent); background: linear-gradient(135deg, rgba(83, 82, 237, 0.05), var(--button-back, rgba(16, 16, 16, 0.85))); }
.notify-info .notify-icon { color: var(--accent); }
.notify-warning { border-left-color: #ffa502; background: linear-gradient(135deg, rgba(255, 165, 2, 0.05), var(--button-back, rgba(16, 16, 16, 0.85))); }
.notify-warning .notify-icon { color: #ffa502; }

.checkmark { width: 32px; height: 32px; border-radius: 50%; display: block; stroke-width: 3; stroke: var(--success-color, #2ed573); stroke-miterlimit: 10; box-shadow: inset 0 0 0 var(--success-color, #2ed573); animation: fill-success 0.4s ease-in-out 0.4s forwards, scale-success 0.3s ease-in-out 0.9s both; }
.checkmark-circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 3; stroke-miterlimit: 10; stroke: var(--success-color, #2ed573); fill: none; animation: stroke-circle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.checkmark-check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; stroke: var(--success-color, #2ed573); stroke-width: 3; animation: stroke-check 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }

.crossmark { width: 32px; height: 32px; border-radius: 50%; display: block; stroke-width: 3; stroke: var(--error-color, #ff4757); stroke-miterlimit: 10; box-shadow: inset 0 0 0 var(--error-color, #ff4757); animation: fill-error 0.4s ease-in-out 0.4s forwards, scale-error 0.3s ease-in-out 0.9s both; }
.crossmark-circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 3; stroke-miterlimit: 10; stroke: var(--error-color, #ff4757); fill: none; animation: stroke-circle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.crossmark-cross { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; stroke: var(--error-color, #ff4757); stroke-width: 3; animation: stroke-check 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }

@keyframes stroke-circle { 100% { stroke-dashoffset: 0; } }
@keyframes stroke-check { 100% { stroke-dashoffset: 0; } }
@keyframes fill-success { 100% { box-shadow: inset 0 0 0 30px var(--success-color, #2ed573); } }
@keyframes scale-success { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
@keyframes fill-error { 100% { box-shadow: inset 0 0 0 30px var(--error-color, #ff4757); } }
@keyframes scale-error { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }

.notify.hide { opacity: 0; transform: translateX(120%) scale(0.8); pointer-events: none; }

@media (max-width: 600px) {
    #notify-container { right: 12px; left: 12px; bottom: 12px; align-items: stretch; }
    .notify { min-width: 0; max-width: 100%; padding: 14px 18px; font-size: 14px; }
    .notify-icon { width: 28px; height: 28px; }
    .checkmark, .crossmark { width: 28px; height: 28px; }
}