:root {
    --bg: #071018;
    --panel: #0b1720;
    --muted: #9aa4b2;
    --accent: #38bdf8;
    --accent2: #7c3aed;
    --white: #eef2f7;
    --glass: rgba(255, 255, 255, 0.03);
    --success: #10b981;
    --warning: #f59e0b;
    --filters-bg: #0d1b25;
    --canvas-bg: #04080c;
}
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--white);
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}
.editor-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.header {
    height: 60px;
    background: linear-gradient(180deg, var(--panel), #071018);
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    position: relative;
    z-index: 15;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
.header-left { justify-self: start; }
.header-center { justify-self: center; }
.header-right {
    justify-self: end;
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
}
.header-btn {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    color: #021018;
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.3);
}
.header-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5);
}
.action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.action-btn:hover {
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    color: #021018;
    transform: scale(1.1);
}
.action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.action-btn:disabled:hover {
    background: rgba(255,255,255,0.1);
    color: var(--white);
    transform: none;
}
.zoom-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}
.zoom-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.zoom-btn:hover {
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    color: #021018;
    transform: scale(1.1);
}
.zoom-value {
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    min-width: 45px;
    text-align: center;
}
.mobile-only { display: none !important; }
.settings-dropdown, .mobile-settings-dropdown {
    display: none;
    position: absolute;
    top: 50px;
    right: 0;
    background-color: var(--panel);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    z-index: 20;
    padding: 10px;
    flex-direction: column;
    gap: 10px;
    width: 240px;
}
.settings-dropdown.active, .mobile-settings-dropdown.active { display: flex; }
.settings-dropdown .header-btn, .mobile-settings-dropdown .header-btn {
    width: 100%;
    justify-content: flex-start;
    background: var(--glass);
    color: var(--white);
    box-shadow: none;
}
.settings-dropdown .header-btn:hover, .mobile-settings-dropdown .header-btn:hover {
    background: rgba(255,255,255,0.08);
    transform: none;
    box-shadow: none;
}
.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}
.sidebar {
    width: 80px;
    background: var(--panel);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.05);
    position: relative;
    z-index: 10;
    overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 0; }
.right-sidebar {
    width: 260px;
    background: var(--panel);
    padding: 15px;
    display: none;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    border-left: 1px solid rgba(255,255,255,0.05);
    z-index: 10;
}
.right-sidebar h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: var(--white);
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    gap: 8px;
}
@media (min-width: 1024px) {
    .right-sidebar {
        display: flex;
    }
    .tool-btn[data-tool="layers"] {
        display: none;
    }
}
@media (max-width: 1023px) {
    .header { padding: 10px 15px; }
    .desktop-only { display: none !important; }
    .mobile-only { display: flex !important; }
    .zoom-btn, .action-btn { width: 38px; height: 38px; }
}
.canvas-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.canvas-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* ИСПРАВЛЕНИЕ: Ставим просто темный цвет фона, без шахматки */
    background-color: var(--canvas-bg); 
    /* Шахматка удалена отсюда, она будет добавляться скриптом только внутрь холста */
    padding: 20px;
    overflow: hidden;
    position: relative;
    min-height: 0;
}
.canvas-wrapper.zoomed {
    overflow: auto;
    justify-content: flex-start;
    align-items: flex-start;
}
.canvas-container { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); }
#fabric-canvas {
    cursor: default;
    #max-width: 100%;
    #max-height: 100%;
}
.tool-btn {
    width: 60px;
    height: 60px;
    min-height: 60px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    background: var(--glass);
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 4px;
    position: relative;
    flex-shrink: 0;
}
.tool-btn:hover {
    color: var(--white);
    background: rgba(255,255,255,0.06);
}
.tool-btn.active {
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    color: #021018;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.2);
}
.tool-btn i { font-size: 20px; }
.tool-btn span { font-size: 11px; }
.footer {
    flex-shrink: 0;
    min-height: 198px;
    max-height: 198px;
    background: var(--panel);
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 15px 20px;
    overflow: hidden;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.5);
    transition: max-height 0.3s ease;
    display: flex;
    flex-direction: column;
}
@media (max-width: 768px) {
    .footer {
        min-height: 220px;
        max-height: 220px;
        padding: 12px 15px;
    }
}
.settings-section {
    display: none;
    flex: 1;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    box-sizing: border-box;
}
.settings-section.active {
    display: flex;
    flex-direction: column;
}
.settings-section h3 {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: var(--white);
    text-align: center;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-right: 40px;
    flex-shrink: 0;
}
.close-section-btn {
    position: absolute;
    top: -4px;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--filters-bg);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 18px;
    z-index: 10;
}
.close-section-btn:hover {
    background: rgba(255,255,255,0.05);
    color: var(--white);
    transform: scale(1.1);
}
.controls-row {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    max-height: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .control-group {
        flex: 0 0 auto;
        min-width: 140px;
    }
}
.control-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}
@media (max-width: 768px) {
    .control-group label {
        font-size: 11px;
    }
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
}
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    outline: none;
    padding: 0;
    margin: 0 5px 4px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--panel);
    transition: transform 0.2s;
}
input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
input[type="color"],
input[type="text"],
input[type="number"],
select {
    width: 100%;
    height: 32px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    padding: 4px 8px;
    background: var(--filters-bg);
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}
@media (max-width: 768px) {
    input[type="color"],
    input[type="text"],
    input[type="number"],
    select {
        height: 36px;
        font-size: 14px;
    }
}
input[type="color"] { padding: 2px; }
.value-display {
    display: block;
    text-align: right;
    font-size: 12px;
    color: var(--muted);
    font-family: monospace;
}
.filters-grid, .shapes-grid {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 8px 5px;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
}
.stickers-grid {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 8px 5px;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
    min-height: 100px;
    align-items: center;
}
.sticker-item {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    background: var(--glass);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}
.sticker-item:hover {
    background: rgba(255,255,255,0.1);
    transform: scale(1.05);
    border-color: var(--accent);
}
.sticker-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.attribution-text {
    font-size: 11px;
    color: var(--muted);
    text-align: center;
    margin-top: 10px;
    opacity: 0.7;
}
.attribution-text a {
    color: var(--accent);
    text-decoration: none;
}
.filter-item {
    flex: 0 0 auto;
    min-width: 100px;
    max-width: 120px;
    padding: 8px;
    background: var(--filters-bg);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
}
.filter-item:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.filter-item.active {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border-color: var(--accent);
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
}
.filter-item.active .filter-name {
    color: #021018;
    font-weight: 600;
}
.filter-item.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 5px;
    right: 5px;
    color: #021018;
    background: var(--accent);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}
.filter-preview {
    width: 100%;
    height: 70px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s;
}
.filter-item:hover .filter-preview {
    border-color: rgba(56, 189, 248, 0.3);
}
.filter-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.filter-name {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.3;
    transition: color 0.2s;
}
.shape-item {
    flex: 0 0 auto;
    min-width: 85px;
    max-width: 100px;
    padding: 6px;
    background: var(--filters-bg);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.shape-item:hover {
    background: rgba(255,255,255,0.05);
    transform: translateY(-2px);
}
.shape-preview {
    width: 100%;
    height: 55px;
    background: rgba(0,0,0,0.2);
    border-radius: 5px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.shape-name {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.2;
}
@media (max-width: 768px) {
    .filter-item {
        min-width: 75px;
        padding: 6px;
    }
    .filter-preview {
        height: 45px;
    }
    .filter-name {
        font-size: 10px;
    }
}
.upload-prompt {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    transition: opacity 0.3s, visibility 0.3s; z-index: 5;
    background: var(--canvas-bg) !important;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    pointer-events: auto;
}
#upload-btn-main, .upload-prompt p { pointer-events: auto; }
.upload-prompt.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
#upload-btn-main {
    font-size: 1.1em;
    padding: 12px 24px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    color: #021018;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
}
#upload-btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}
.upload-prompt p {
    color: var(--muted);
    margin-top: 15px;
    font-size: 14px;
}
/* --- БЛОК УВЕДОМЛЕНИЙ (ИСПРАВЛЕННЫЙ) --- */
#notifications-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99999; /* Выше всех слоев, меню и панелей */
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 350px;
    pointer-events: none;
}

.notification {
    pointer-events: auto;
    padding: 16px 20px;
    border-radius: 12px;
    color: #ffffff; /* Белый текст для максимальной читаемости */
    font-weight: 600;
    font-size: 14px;
    /* Тень стала гуще и темнее */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2); /* Яркая рамка */
    animation: slideIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards, 
               fadeOut 0.5s 3.5s forwards;
}

/* ЗЕЛЕНОЕ (Успех) */
.notification.success {
    background: #059669; /* Плотный сочный зеленый */
    border-color: #34d399;
}

/* СИНЕЕ (Инфо / Режим Авто) */
.notification.info {
    background: #0284c7; /* Яркий голубой */
    border-color: #38bdf8;
}

/* КРАСНОЕ (Ошибки) */
.notification.error {
    background: #dc2626; 
    border-color: #f87171;
}

/* ОРАНЖЕВОЕ (Предупреждения) */
.notification.warning {
    background: #d97706; 
    border-color: #fbbf24;
}

@keyframes slideIn {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(120%); }
}

/* --- ОСТАЛЬНЫЕ СТИЛИ ИНТЕРФЕЙСА (БЕЗ ИЗМЕНЕНИЙ) --- */
.button-group {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: nowrap;
}

.button-group button {
    padding: 6px 12px;
    background: var(--filters-bg);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--muted);
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 36px;
}

.button-group button:hover {
    background: var(--glass);
    color: var(--white);
}

.button-group button.active {
    background: var(--accent);
    color: #021018;
    border-color: var(--accent);
}

.resize-group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
}

.resize-group input[type="number"] { width: 70px; }

@media (max-width: 768px) {
    .resize-group {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    .resize-group input[type="number"] {
        width: 100%;
    }
}

#crop-actions { display: none; }

.reset-btn {
    background: var(--filters-bg);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--white);
    padding: 6px 10px;
    border-radius: 5px;
    width: 100%;
    margin-top: 5px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.reset-btn:hover { background: rgba(255,255,255,0.05); }

.compact-row {
    display: flex;
    gap: 15px;
    max-height: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    flex-shrink: 0;
}
.compact-column {
    flex: 0 0 auto;
    min-width: 120px;
}
.ratio-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px;
    background: rgba(255,255,255,0.02);
    border-radius: 5px;
}
@media (max-width: 768px) {
    .compact-column { min-width: 100px; }
    .ratio-checkbox-wrapper {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
        padding: 8px;
        background: rgba(56, 189, 248, 0.1);
    }
    .ratio-checkbox-wrapper label {
        margin-bottom: 0;
        font-size: 12px;
        white-space: nowrap;
    }
    .ratio-checkbox-wrapper input[type="checkbox"] {
        transform: scale(1.2);
    }
}
.no-image-message {
    text-align: center;
    color: var(--muted);
    padding: 20px;
    font-size: 13px;
}
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
.modal.active {
    opacity: 1;
    visibility: visible;
}
.modal-content {
    background: var(--panel);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    min-width: 450px;
    max-width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--white);
}
.close-modal-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: none;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.close-modal-btn:hover {
    background: rgba(255,255,255,0.2);
    color: var(--white);
}
.modal-body { padding: 20px; }
.format-options {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}
.format-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background: var(--glass);
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.format-option:hover {
    background: rgba(255,255,255,0.06);
    transform: translateY(-2px);
}
.format-option input[type="radio"]:checked + .format-icon {
    border-color: var(--accent);
    background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.format-option input[type="radio"] { display: none; }
.format-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--filters-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 10px;
    transition: all 0.2s;
}
.format-name {
    font-weight: 600;
    margin-bottom: 5px;
}
.format-desc {
    font-size: 12px;
    color: var(--muted);
}
.quality-control { margin-bottom: 20px; }
.quality-control label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
}
.quality-control input[type="range"] { width: 100%; }
.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.modal-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.modal-btn.primary {
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    color: #021018;
}
.modal-btn.secondary {
    background: var(--glass);
    color: var(--white);
}
.modal-btn:hover { transform: translateY(-2px); }
.layers-list-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 5px;
    border-radius: 8px;
    background: var(--filters-bg);
    border: 1px solid rgba(255,255,255,0.05);
}
.layer-item {
    display: flex;
    align-items: center;
    padding: 6px;
    background: var(--glass);
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    position: relative;
}
.layer-item:hover { background: rgba(255,255,255,0.06); }
.layer-item.active {
    border-color: var(--accent);
    background: rgba(56, 189, 248, 0.1);
}
.layer-item.hidden { opacity: 0.5; }
.layer-item[draggable="true"] { cursor: grab; }
.layer-item.dragging {
    opacity: 0.4;
    background: var(--accent2);
    cursor: grabbing;
}
.layer-item.drop-target::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 5px;
    right: 5px;
    height: 4px;
    background-color: var(--accent);
    border-radius: 2px;
    box-shadow: 0 0 10px var(--accent);
}
.layer-preview {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-right: 10px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}
.layer-preview img, .layer-preview i {
    max-width: 100%;
    max-height: 100%;
}
.layer-name {
    flex-grow: 1;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}
.layer-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}
.layer-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.layer-action-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--white);
}
.layer-action-btn.delete:hover { color: #ef4444; }
.text-presets-container {
    padding: 0 0 5px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 10px;
}
.text-presets-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
    -webkit-overflow-scrolling: touch;
}
.text-preset-item {
    flex: 0 0 auto;
    min-width: 90px;
    height: 50px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.text-preset-item:hover {
    border-color: var(--accent);
    background: rgba(255,255,255,0.08);
    transform: translateY(-2px);
}
.preset-preview-text {
    font-size: 16px;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

/* --- НОВЫЕ СТИЛИ ДЛЯ AI ИНТЕРФЕЙСА --- */

/* Подсказки в меню */
.instruction-box {
    background: rgba(56, 189, 248, 0.1);
    border-left: 3px solid var(--accent);
    padding: 8px;
    font-size: 11px;
    color: var(--white);
    line-height: 1.4;
    margin-right: 15px;
    border-radius: 0 4px 4px 0;
    max-width: 150px;
}

/* Оверлей загрузки (Спиннер) */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--white);
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top: 5px solid var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.main-content {
    position: relative;
}

.sidebar-scroll-hint {
    position: absolute;
    bottom: 0;         /* Прилепить к низу */
    left: 0;           /* Прилепить к левому краю */
    width: 80px;       /* Ширина как у панели кнопок */
    height: 60px;      /* Высота области затемнения */
    display: flex;
    align-items: flex-end; /* Стрелка внизу блока */
    justify-content: center;
    background: linear-gradient(to top, #0b1720 20%, transparent); /* Плавное затемнение снизу */
    color: var(--accent); /* Твой голубой цвет */
    font-size: 20px;
    z-index: 20;       /* Поверх кнопок */
    pointer-events: none; /* Чтобы можно было кликнуть сквозь стрелку */
    animation: bounce 2s infinite; /* Анимация прыжка */
    transition: opacity 0.3s ease; /* Плавное исчезновение */
}

/* Анимация прыжка */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

/* ================================================================= */
/* === ФИНАЛЬНЫЕ СТИЛИ ДЛЯ AI ИНСТРУМЕНТОВ И МАСКИ (v2.0) === */
/* ================================================================= */

/* --- 1. ПЕРЕКЛЮЧАТЕЛЬ МАСКИ (Стереть/Вернуть) --- */
.mask-switch-btn {
    transition: all 0.2s ease;
    padding: 0 5px; /* Компактные отступы */
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.mask-switch-btn.active {
    background: var(--accent) !important;
    color: #021018 !important; /* Темный текст на голубом фоне */
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}
.mask-switch-btn:not(.active):hover {
    background: rgba(255,255,255,0.1) !important;
}

/* --- 2. УМНАЯ СТРОКА (Выравнивание на ПК) --- */
.ai-smart-row {
    align-items: flex-end !important; /* Все элементы прижаты к низу */
}

/* Кнопки и группы справа */
.ai-smart-row .ai-btn-group {
    padding-bottom: 4px; /* Подгонка высоты под поля ввода */
    flex-shrink: 0;
}

/* Поле ввода текста (растягивается) */
.ai-smart-row .ai-input-group {
    flex-grow: 1;
    min-width: 150px;
}

/* --- 3. МОБИЛЬНАЯ ВЕРСИЯ (Горизонтальный скролл) --- */
@media (max-width: 768px) {
    .ai-smart-row {
        flex-wrap: nowrap !important; /* Строго в одну линию */
        overflow-x: auto; /* Разрешаем листать пальцем влево-вправо */
        overflow-y: hidden;
        align-items: center !important; /* Центруем по вертикали */
        padding-bottom: 5px !important;
        gap: 12px;
        /* Скрываем скроллбар для красоты */
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }
    .ai-smart-row::-webkit-scrollbar { 
        display: none; 
    }

    /* Инструкция (делаем маленькой) */
    .ai-smart-row .instruction-box {
        min-width: 80px;
        max-width: 100px;
        font-size: 9px;
        line-height: 1.1;
        padding: 4px;
        margin-right: 0 !important;
        flex-shrink: 0; /* Не сжимать! */
    }

    /* Ползунки, Поля ввода и Переключатель маски */
    .ai-smart-row .ai-slider-group,
    .ai-smart-row .ai-input-group,
    .ai-smart-row .control-group { 
        min-width: 130px; /* Фиксированная минимальная ширина */
        flex: 0 0 auto;   /* Не сжиматься и не растягиваться лишнего */
        margin: 0 !important;
    }

    /* Поле ввода текста на мобиле */
    .ai-smart-row .ai-input-group input {
        height: 36px !important; /* Высота под палец */
        font-size: 13px;
        width: 100%;
    }
    
    /* Подписи над элементами */
    .ai-smart-row label {
        font-size: 10px;
        margin-bottom: 4px;
        white-space: nowrap;
        display: block;
    }

    /* Кнопки действий (Удалить, Генерировать) */
    .ai-smart-row .ai-btn-group {
        padding-bottom: 0 !important;
        margin-top: 16px; /* Опускаем чуть ниже, чтобы ровно с инпутами */
    }

    /* Стиль самих кнопок на мобиле */
    #ai-remove-apply-btn,
    #ai-replace-btn {
        height: 36px;
        font-size: 12px;
        padding: 0 15px;
        white-space: nowrap;
    }
}

.canvas-container {
    /* Шахматный фон строго под холстом */
    background-color: #1a1a1a;
    background-image:
      linear-gradient(45deg, #2a2a2a 25%, transparent 25%),
      linear-gradient(-45deg, #2a2a2a 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #2a2a2a 75%),
      linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.canvas-container, 
.upper-canvas, 
.lower-canvas,
#fabric-canvas {
    /* Запрещает браузеру обрабатывать жесты (скролл/зум) внутри холста */
    touch-action: none !important; 
    -ms-touch-action: none !important;
}

@media (max-width: 1023px) {
    .modal-content {
        /* Плавная прокрутка на iOS */
        -webkit-overflow-scrolling: touch; 
        /* Запрет на двойной тап для зума на кнопках */
        touch-action: manipulation; 
    }
    
    .modal-btn, .header-btn, .tool-btn {
        /* Убирает серую подсветку при тапе на iOS */
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

.filters-scroll-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    /* ДОБАВИЛИ ОТСТУПЫ ПО БОКАМ, ЧТОБЫ КНОПКИ ВЛЕЗЛИ */
    padding: 0 40px; 
    box-sizing: border-box; /* Важно, чтобы паддинги не ломали ширину */
}

/* Сама сетка фильтров */
.filters-grid {
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Убираем лишние отступы внутри сетки, так как они теперь на обертке */
    padding: 8px 5px; 
}

.filters-grid::-webkit-scrollbar { 
    display: none; 
}

/* Кнопки навигации */
.filter-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background-color: rgba(55, 65, 81, 0.9); /* Чуть темнее фон */
    color: white;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.filter-nav-btn:hover {
    background-color: var(--accent);
    color: #000;
    transform: translateY(-50%) scale(1.1);
}

/* ИСПРАВЛЕННЫЕ ПОЗИЦИИ КНОПОК */
.filter-nav-btn.left {
    left: 0; /* Прижимаем к левому краю паддинга */
}

.filter-nav-btn.right {
    right: 0; /* Прижимаем к правому краю паддинга */
}

/* На мобилках кнопки скрываем, там пальцем листают */
@media (max-width: 768px) {
    .filter-nav-btn {
        display: none;
    }
    .filters-scroll-wrapper {
        padding: 0; /* На мобилке место под кнопки не нужно */
    }
}

#retouch-dropdown {
    top: 0;
    left: 80px; /* ширина sidebar */
    right: auto;
    width: 200px;
}

.retouch-option {
    width: 100%;
    justify-content: flex-start;
    background: var(--glass);
    color: var(--white);
    box-shadow: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
}

.retouch-option:hover {
    background: rgba(255,255,255,0.08);
    transform: none;
    box-shadow: none;
}

.retouch-option i {
    width: 20px; /* Выравниваем иконки */
}

/* Мобильная версия ретуши */
.mobile-retouch-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
}

.retouch-option-mobile {
    font-size: 13px;
    padding: 8px 12px;
}

.premium-ai-btn {
    background: linear-gradient(135deg, #ec4899, #8b5cf6, #3b82f6);
    background-size: 200% 200%;
    color: white !important;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
    animation: gradientShift 3s ease infinite;
    width: auto !important; /* Авто ширина для текста */
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    white-space: nowrap;
}

.premium-ai-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
}

.premium-ai-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    animation: none;
    background: #4b5563;
}

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

.comparison-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 23, 32, 0.95); /* Темный фон с прозрачностью */
    z-index: 2000; /* Поверх всего интерфейса */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Убрали overflow: hidden, чтобы кнопки снизу не обрезались */
}

.comparison-container {
    position: relative;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    border: 1px solid rgba(255,255,255,0.15);
    user-select: none;
    cursor: col-resize;
    line-height: 0;
    box-sizing: content-box;
    margin-bottom: 20px; /* Отступ снизу до кнопок */
}

/* КАРТИНКА "ПОСЛЕ" (Основа) */
#comp-after-img {
    display: block;
    max-width: 80vw;  /* Ограничиваем ширину (чтобы влезало) */
    max-height: 70vh; /* Ограничиваем высоту (чтобы кнопки влезли снизу) */
    width: auto;
    height: auto;
    object-fit: contain; 
}

/* ОБЕРТКА "ДО" (Слайдер) */
.comp-before-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    overflow: hidden; /* Обрезает картинку внутри */
    border-right: 3px solid #8b5cf6; /* Фиолетовая линия */
    z-index: 10;
    background: #0b1720;
}

/* КАРТИНКА "ДО" */
#comp-before-img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    max-width: none !important; 
    height: 100% !important;
    object-fit: fill; /* Растягиваем точно по контейнеру (JS поможет) */
}

/* ПОЛЗУНОК */
.comp-slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 40px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 20;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

.handle-circle {
    width: 40px;
    height: 40px;
    background: #8b5cf6;
    border: 3px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.8);
    font-size: 16px;
}

/* НАДПИСИ (Original / Upscaled) */
.label-before, .label-after {
    position: absolute;
    top: 15px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
    z-index: 25; /* Поверх картинок */
    border: 1px solid rgba(255,255,255,0.2);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.label-before { left: 15px; }
.label-after { right: 15px; }

/* ПАНЕЛЬ КНОПОК (Применить / Отмена) */
.comparison-controls {
    display: flex !important; /* Принудительно показываем */
    gap: 15px;
    z-index: 30; /* Самый высокий слой */
    margin-top: 10px;
}

.comp-btn {
    padding: 10px 30px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    transition: transform 0.2s, filter 0.2s;
}
.comp-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }

.comp-btn.apply {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    color: white;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}
.comp-btn.cancel {
    background: rgba(255,255,255,0.1);
    color: #ccc;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Кнопки внизу */
.comparison-controls {
    margin-top: 15px;
    display: flex;
    gap: 15px;
}

.comp-btn {
    padding: 10px 25px;
    border: none;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    transition: transform 0.2s;
}
.comp-btn:hover { transform: scale(1.05); }

.comp-btn.apply {
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    color: white;
}
.comp-btn.cancel {
    background: rgba(255,255,255,0.1);
    color: #ccc;
}

collage-grid-wrapper {
    /* Кастомный скроллбар для шаблонов */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}

.collage-grid {
    display: flex;
    gap: 12px;
    padding: 5px;
    min-height: 70px; /* Чтобы не скакало */
}

.collage-template-btn {
    flex: 0 0 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collage-template-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.collage-template-btn.active {
    border-color: var(--accent);
    background: rgba(56, 189, 248, 0.2);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

/* Иконки внутри кнопок */
.collage-template-btn svg rect {
    fill: #9ca4b2;
    transition: fill 0.2s;
}

.collage-template-btn.active svg rect {
    fill: var(--accent);
}

/* Скрытый инпут для файлов */
#collage-file-input {
    display: none;
}

/* --- НОВЫЕ СТИЛИ ДЛЯ СВОЙСТВ ОБЪЕКТА (FIX) --- */

/* Контейнер для свойств, чтобы они стояли ровно в ряд */
.props-flex-container {
    display: flex;
    gap: 15px;
    align-items: stretch; /* Одинаковая высота блоков */
    padding-bottom: 5px;
}

/* Отдельная карточка с настройками (группа) */
.prop-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 140px;
}

/* Заголовки внутри групп */
.prop-card-title {
    font-size: 11px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-weight: 700;
    opacity: 0.9;
}

/* Ряды внутри карточки */
.prop-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.prop-row:last-child {
    margin-bottom: 0;
}

/* Подписи к конкретным инпутам (мелкие) */
.prop-label-small {
    font-size: 10px;
    color: var(--muted);
    min-width: 40px; /* Чтобы текст не скакал */
}

/* КРАСИВЫЕ КНОПКИ ДЕЙСТВИЙ */
.modern-actions-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    justify-content: center;
}

.modern-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #fff;
    width: 100%;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.btn-duplicate {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 2px 5px rgba(59, 130, 246, 0.4);
}
.btn-duplicate:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(59, 130, 246, 0.6); }

.btn-lock {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 2px 5px rgba(245, 158, 11, 0.4);
}
.btn-lock:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(245, 158, 11, 0.6); }

.btn-delete {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4);
}
.btn-delete:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(239, 68, 68, 0.6); }

/* Стили для иконок внутри кнопок стилей (B/I) */
.style-toggle-btn {
    flex: 1;
    background: var(--filters-bg);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--muted);
    border-radius: 4px;
    height: 30px;
    cursor: pointer;
    transition: 0.2s;
}
.style-toggle-btn:hover { background: rgba(255,255,255,0.1); color: white; }
.style-toggle-btn.active {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}

/* Чекбокс градиента красивый */
.gradient-check-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,0,0.2);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* --- СТИЛИ ДЛЯ РЕЖИМА КОЛЛАЖА --- */

/* Контейнер с прокруткой для шаблонов */
.collage-templates-wrapper {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 5px 5px 15px 5px; /* Отступ снизу для скроллбара */
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) rgba(255,255,255,0.05);
}

.collage-templates-wrapper::-webkit-scrollbar {
    height: 6px;
}
.collage-templates-wrapper::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
}
.collage-templates-wrapper::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 3px;
}

/* Кнопка шаблона */
.collage-btn {
    flex: 0 0 50px; /* Фиксированный размер */
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.collage-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    border-color: var(--accent);
}

.collage-btn.active {
    background: rgba(56, 189, 248, 0.2);
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

/* SVG внутри кнопки (цвет серых блоков) */
.collage-btn svg {
    width: 100%;
    height: 100%;
}
.collage-btn svg rect {
    fill: #64748b; /* Цвет блоков по умолчанию */
    transition: fill 0.2s;
}
.collage-btn.active svg rect {
    fill: var(--accent); /* Цвет блоков при выборе */
}

/* Разделитель групп шаблонов (2 фото, 3 фото...) */
.collage-group-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 9px;
    color: var(--muted);
    background: rgba(0,0,0,0.2);
    padding: 2px;
    border-radius: 4px;
    cursor: default;
    user-select: none;
    text-align: center;
}

/* --- СТИЛИ ДЛЯ КНОПОК ПОЛЗУНКОВ (DESKTOP) --- */
.range-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.range-wrapper input[type="range"] {
    flex: 1;
    margin: 0 !important;
}

.range-btn {
    width: 32px;
    height: 32px;
    background: var(--filters-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    flex-shrink: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent; /* Убираем мигание на Андроиде */
}

.range-btn:active {
    background: var(--accent);
    color: #000;
}

.control-group input[type="range"] {
    margin-bottom: 0;
}

/* --- МОБИЛЬНАЯ ВЕРСИЯ (СКРЫВАЕМ ПОЛЗУНКИ) --- */
@media (max-width: 1023px) {
    /* Скрываем сам ползунок полностью */
    .range-wrapper input[type="range"] {
        display: none !important;
    }

    /* Настраиваем контейнер кнопок */
    .range-wrapper {
        justify-content: center; /* Кнопки по центру */
        gap: 20px; /* Расстояние между минусом и плюсом, чтобы не промахнуться */
        background: rgba(255,255,255,0.03); /* Легкая подложка */
        border-radius: 8px;
        padding: 5px;
        margin-top: 5px;
    }

    /* Делаем кнопки компактными, как ты просил */
    .range-btn {
        width: 25px !important; /* Чуть шире, чтобы пальцем попасть */
        height: 18px !important; /* Но ниже */
        font-size: 12px !important;
        border-color: rgba(255,255,255,0.2);
    }
    
    /* Добавляем иконкам жирности */
    .range-btn i {
        font-size: 10px;
    }
}

/* --- ФИКС ДЛЯ МОБИЛЬНОЙ ВЕРСИИ (Edit Menu) --- */
@media (max-width: 1023px) {
    
    /* 1. Увеличиваем кнопки поворота */
    #rotate-left-btn, 
    #rotate-right-btn {
        width: 55px !important;  /* Сделали широкими */
        height: 50px !important; /* Сделали высокими */
        font-size: 22px !important; /* Увеличили иконку */
    }

    /* 2. Сокращаем расстояние между блоками */
    #edit-settings .controls-row {
        gap: 10px !important; /* Было 20px, стало 10px - блоки прижмутся */
        justify-content: flex-start; /* Прижимаем всё влево */
    }

    /* Дополнительно: чуть уменьшим отступы внутри групп, чтобы всё влезло */
    #edit-settings .control-group {
        margin-right: 5px !important;
        min-width: auto !important; /* Убираем лишнюю ширину у блоков */
    }
}

/* ============================================== */
/* === ИСПРАВЛЕНИЕ ПОЛЗУНКА РЕТУШИ (Skin) === */
/* ============================================== */

/* 1. Делаем ползунок ретуши ВИДИМЫМ на мобильных */
@media (max-width: 1023px) {
    /* Находим именно инпут ретуши по ID и заставляем его показаться */
    .range-wrapper #skin-smooth {
        display: block !important; 
        width: 100% !important;
        margin: 10px 0 !important;
        height: 40px !important; /* Увеличиваем высоту зоны клика */
        opacity: 1 !important;
    }
}

/* 2. Рисуем КРУГЛЯШОК (Thumb) специально для ретуши */
#skin-smooth::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 28px !important;         /* Большой размер кругляшка */
    height: 28px !important;
    background: #38bdf8 !important; /* Голубой цвет (твоя тема) */
    border: 3px solid #ffffff !important; /* Белая обводка */
    border-radius: 50% !important;
    cursor: pointer !important;
    margin-top: -11px !important;   /* Центрируем на полоске */
    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
    position: relative;
    z-index: 100;
}

/* 3. Рисуем ПОЛОСКУ (Track) для ретуши */
#skin-smooth::-webkit-slider-runnable-track {
    width: 100% !important;
    height: 6px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 3px !important;
    border: none !important;
}

/* (Опционально) Для Firefox, если вдруг используешь его */
#skin-smooth::-moz-range-thumb {
    width: 28px;
    height: 28px;
    background: #38bdf8;
    border: 3px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
}

.comparison-overlay {
    position: fixed; /* Фиксируем на весь экран */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(7, 16, 24, 0.95); /* Темный фон */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(5px);
}

.comparison-header h3 {
    color: white;
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 18px;
}

.comparison-container {
    position: relative;
    max-width: 90vw;
    max-height: 70vh;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    overflow: hidden; /* Важно: чтобы картинки не вылезали за скругление */
    border: 1px solid rgba(255,255,255,0.2);
    cursor: col-resize; /* Курсор изменения ширины */
    user-select: none;
}

/* Картинка ПОСЛЕ (Лежит в основе) */
#comp-after-img {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

/* Обертка ДО (Меняет ширину) */
.comp-before-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%; /* Стартовая позиция */
    overflow: hidden; /* Скрывает лишнее */
    z-index: 10;
    border-right: 2px solid white; /* Белая линия разделителя */
    box-shadow: 5px 0 20px rgba(0,0,0,0.5); /* Тень от линии */
}

/* Картинка ДО (Внутри обертки) */
/* ХИТРОСТЬ: Она должна быть размером с КОНТЕЙНЕР, а не обертку */
#comp-before-img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto; /* Ширина выставляется JS-ом равной ширине контейнера */
    max-width: none !important; /* Отключаем ограничения */
    object-fit: contain;
    pointer-events: none;
}

/* Метки (Original / Upscale) */
.label-badge {
    position: absolute;
    top: 20px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.3);
}

.label-before {
    left: 20px;
    z-index: 20;
}

.label-after {
    right: 20px;
    z-index: 5; /* Под оберткой before */
}

/* Ползунок (Кругляш) */
.comp-slider-handle {
    position: absolute;
    top: 50%;
    left: 50%; /* JS будет менять это */
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: var(--accent); /* Твой голубой цвет */
    border: 3px solid white;
    border-radius: 50%;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
    pointer-events: none;
}

.comp-slider-handle i {
    color: #000;
    font-size: 16px;
}

/* Панель кнопок снизу */
.comparison-controls {
    margin-top: 25px;
    display: flex;
    gap: 20px;
}

.comp-btn {
    padding: 12px 35px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.comp-btn:hover {
    transform: translateY(-2px);
}

.comp-btn.apply {
    background: linear-gradient(90deg, #10b981, #059669); /* Зеленый - успех */
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.comp-btn.cancel {
    background: rgba(255,255,255,0.1);
    color: white;
    border: 1px solid rgba(255,255,255,0.1);
}
.comp-btn.cancel:hover {
    background: rgba(255,255,255,0.2);
}

/* --- СТИЛИ ДЛЯ ПРЕСЕТОВ СОЦ. СЕТЕЙ (SOCIAL SIZES) --- */

.social-sizes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки */
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 15px;
}

.social-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 5px;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    min-height: 60px;
}

.social-btn i {
    font-size: 20px;
    margin-bottom: 6px;
    color: var(--accent); /* Используем твой акцентный цвет */
    transition: transform 0.2s ease;
}

.social-btn:hover {
    background: rgba(56, 189, 248, 0.15); /* Легкая подсветка */
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.social-btn:hover i {
    transform: scale(1.1);
    color: #fff;
}

.social-btn:active {
    transform: translateY(0);
    opacity: 0.8;
}

/* Адаптив для мобилок, чтобы кнопки не плющило */
@media (max-width: 768px) {
    .social-sizes-grid {
        grid-template-columns: repeat(3, 1fr); 
    }
    .social-btn {
        font-size: 9px;
        padding: 8px 2px;
    }
    .social-btn i {
        font-size: 16px;
    }
}

/* Контейнер для выпадающего списка */
.tools-dropdown-main {
    position: relative;
    display: inline-block;
    margin-left: 10px;
}

/* Самое меню */
.main-tools-menu {
    display: none; /* Скрыто по умолчанию */
    position: absolute;
    top: 110%;
    left: 0;
    background: rgba(15, 23, 42, 0.95); /* Темный фон под стиль редактора */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    min-width: 250px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    z-index: 9999; /* Поверх всего */
    overflow: hidden;
}

/* Показываем при активации */
.main-tools-menu.show {
    display: block;
    animation: fadeIn 0.2s ease;
}

/* Ссылки внутри меню */
.main-tools-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #e2e8f0;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s;
}

.main-tools-menu a:hover {
    background: rgba(56, 189, 248, 0.2); /* Цвет акцента при наведении */
    color: #38bdf8;
}

.main-tools-menu a.active {
    background: rgba(56, 189, 248, 0.1);
    color: #38bdf8;
    font-weight: bold;
}

.main-tools-menu i {
    width: 20px;
    text-align: center;
    color: #38bdf8;
}

/* Анимация появления */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ВЫРАВНИВАНИЕ КНОПОК В ХЕДЕРЕ */
.header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* КОНТЕЙНЕР ДЛЯ МЕНЮ */
.tools-dropdown-main {
    position: relative !important;
    display: inline-block !important;
}

/* КНОПКА "ВСЕ СЕРВИСЫ" — ЯРКО-ГОЛУБАЯ */
.services-btn {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
    color: #021018 !important;
    font-weight: 800 !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 38px !important;
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.3) !important;
    font-family: 'Inter', sans-serif !important;
}

/* САМО МЕНЮ (СПИСОК) */
.main-tools-menu {
    display: none; /* Скрыто по умолчанию */
    flex-direction: column !important; 
    position: absolute !important;
    top: 45px !important;
    left: 0 !important;
    background: #0f172a !important; /* Глубокий темный фон */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    min-width: 280px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8) !important;
    z-index: 10000 !important;
    padding: 8px 0 !important;
}

/* ПОКАЗ МЕНЮ ПРИ КЛИКЕ */
.main-tools-menu.show {
    display: flex !important;
}

/* ССЫЛКИ ВНУТРИ */
.main-tools-menu a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 20px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: background 0.2s !important;
}

.main-tools-menu a:hover {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
}

.main-tools-menu a i {
    color: #38bdf8 !important;
    width: 20px !important;
    text-align: center !important;
}

/* Стили для блока авторизации внутри меню */
    .auth-menu-container {
        padding: 10px 15px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        margin-bottom: 5px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Когда мы НЕ авторизованы */
    .auth-login-btn {
        background: #fc3f1d; /* Красный цвет Яндекса */
        color: #fff;
        border: none;
        padding: 8px 12px;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        text-decoration: none;
    }
    .auth-login-btn:hover { background: #e63415; }

    /* Когда мы АВТОРИЗОВАНЫ */
    .user-profile-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    /* Аватарка буква Я */
    .ya-avatar-circle {
        width: 32px;
        height: 32px;
        background: #fc3f1d;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-family: 'Arial', sans-serif;
        font-size: 16px;
        border: 2px solid white;
    }

    .user-name-text {
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;
    }

    .auth-logout-btn {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #ccc;
        padding: 6px 10px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 11px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }
    .auth-logout-btn:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

    /* Стили модального окна (как на лендинге) */
    .auth-modal {
        display: none;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.8);
        backdrop-filter: blur(5px);
        z-index: 20000;
        justify-content: center;
        align-items: center;
    }
    .auth-modal.active { display: flex; }
    .auth-content {
        background: #0f172a;
        padding: 30px;
        border-radius: 20px;
        border: 1px solid #38bdf8;
        text-align: center;
        width: 300px;
    }
    .btn-yandex-modal {
        background: #fc3f1d;
        color: white;
        padding: 12px;
        border-radius: 10px;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-weight: bold;
        cursor: pointer;
        border: none;
        width: 100%;
        font-size: 16px;
    }
    .btn-yandex-modal:hover { opacity: 0.9; }
    
    /* === КОМПАКТНАЯ ШАПКА ДЛЯ МОБИЛЬНЫХ (ТЕКСТ ОСТАЕТСЯ) === */
@media (max-width: 768px) {
    
    /* 1. Сжимаем кнопку "Все сервисы" */
    #main-tools-btn.services-btn {
        padding: 4px 8px !important;       /* Уменьшаем отступы по бокам */
        font-size: 11px !important;        /* Чуть меньше шрифт */
        height: 34px !important;           /* Чуть ниже высота */
        gap: 4px !important;               /* Прижимаем иконку к тексту */
        letter-spacing: -0.3px !important; /* Чуть плотнее буквы */
        white-space: nowrap !important;    /* Запрещаем перенос строк */
    }

    /* 2. Уменьшаем стрелочку внутри кнопки */
    #main-tools-btn.services-btn .fa-chevron-down {
        margin-left: 2px !important;       /* Прижимаем стрелку */
        font-size: 9px !important;         /* Делаем её крошечной */
    }

    /* 3. Уменьшаем отступы всей шапки, чтобы выиграть место по краям */
    .header {
        padding-left: 5px !important;
        padding-right: 5px !important;
        gap: 5px !important;
    }
    

    /* 5. Гарантируем, что бургер-меню (три полоски) не будет сжато */
    #mobile-settings-toggle {
        min-width: 32px !important;
        padding: 0 !important;
    }
}

/* ============================================== */
/* === ИСПРАВЛЕНИЕ ДЛЯ ПК-ВЕРСИИ AI РЕТУШИ === */
/* ============================================== */

/* Только для экранов шире 1023px (ПК) */
@media (min-width: 1024px) {
    /* Контейнер секции — убираем лишние отступы и скролл */
    #ai-enhance-settings .ai-smart-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;              /* Компактный промежуток */
        padding: 10px 0 !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    /* Инструкция: делаем её компактнее */
    #ai-enhance-settings .instruction-box {
        max-width: 90% !important;
        margin-right: 0 !important;
        text-align: center !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        padding: 8px 12px !important;
    }
    
    /* Контейнер кнопки — центрируем */
    #ai-enhance-settings .ai-btn-group {
        margin-left: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        padding-bottom: 0 !important;
    }
    
    /* САМА КНОПКА — чуть увеличена, как просил */
    #ai-enhance-apply-btn {
        transform: none !important;        /* Убираем огромный scale */
        padding: 10px 30px !important;     /* Чуть больше отступов */
        font-size: 14px !important;        /* Чуть крупнее шрифт */
        font-weight: 700 !important;
        /* Плавная анимация */
        transition: all 0.2s ease !important;
    }
    
    /* Эффект при наведении */
    #ai-enhance-apply-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4) !important;
    }
    
    /* Убираем скролл в секции */
    #ai-enhance-settings {
        overflow: visible !important;
        min-height: auto !important;
    }
}