html body .kelya-room-wrapper h1,
html body .kelya-room-wrapper h2,
html body .kelya-room-wrapper h3,
html body .lestvica-slava-modal-box h2,
html body .lestvica-slava-modal-box h3,
html body .kelya-welcome h1 { font-family: 'Playfair Display', serif !important; }

.kelya-room-wrapper {
    width: 100vw; position: relative; left: 50%; transform: translateX(-50%);
    background: url('/wp-content/uploads/2026/07/kelya_fon.webp') center/cover no-repeat, radial-gradient(ellipse at center, #2b2622 0%, #0a0908 100%);
    padding: 60px 20px; box-sizing: border-box; min-height: 100vh; overflow: hidden;
    display: flex; justify-content: center; align-items: flex-start;
}
.kelya-grid {
    display: grid; grid-template-columns: 320px 1fr 320px; gap: 20px;
    width: 100%; max-width: 1500px; position: relative; z-index: 10;
}
.kelya-sidebar-left, .kelya-sidebar-right { display: flex; flex-direction: column; gap: 20px; }
.kelya-center { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; height: 100%; }

.kelya-welcome {
    text-align: center; color: #b88a00; margin-bottom: 30px;
    background: rgba(18, 16, 14, 0.6); padding: 20px 40px;
    border-radius: 12px; border: 1px dashed rgba(212,174,113,0.3); backdrop-filter: blur(5px);
}

/* --- Анимация книги на аналое --- */
.kelya-books-animation-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(var(--book-translate, 0px));
    width: 375px; 
    height: 270px;
    z-index: 15;
    opacity: var(--book-visible, 0); 
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.kelya-books-animation-container img {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    transition: opacity 0.1s ease-out;
}
.kelya-book-closed { opacity: calc(1 - var(--book-progress, 0)); filter: drop-shadow(0 25px 35px rgba(0,0,0,0.6)); }
.kelya-book-open { opacity: var(--book-progress, 0); filter: drop-shadow(0 15px 25px rgba(0,0,0,0.7)); }
/* -------------------------------- */

.kelya-analoy-image {
    width: 100%; max-width: 600px; height: 60vh;
    background: url('/wp-content/uploads/2026/07/analoj_kelya.webp') bottom center/contain no-repeat;
    opacity: 0; transform: translateY(50px) scale(0.95); margin-top: auto; margin-bottom: 70px; 
}
@keyframes analoyAppear { to { opacity: 1; transform: translateY(0) scale(1); } }

/* Иконки кнопок с эффектом "вылета" (Круглые, золотой ободок) */
.kelya-btn-icon {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 50%; 
    border: 1px solid #D4AE71;
    background: rgba(0,0,0,0.3);
    padding: 3px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    display: inline-block;
    z-index: 2;
}

.kelya-action-btn {
    background: linear-gradient(45deg, #2b2622, #3d3630); border: 1px solid #D4AE71; color: #E6C28A;
    padding: 12px 20px; border-radius: 10px; font-size: 17px; font-family: 'Playfair Display', serif;
    font-weight: 600; text-align: left; cursor: pointer; transition: all 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.3);
    display: flex; align-items: center; gap: 15px; text-decoration: none !important; width: 100%; box-sizing: border-box;
    position: relative;
    overflow: visible !important; 
}
.kelya-action-btn:hover {
    background: linear-gradient(45deg, #3d3630, #4a413a); transform: translateY(-3px);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 8px 25px rgba(0,0,0,0.5); color: #fff; border-color: #b88a00;
}
.kelya-action-btn:hover .kelya-btn-icon {
    transform: scale(1.8) translateZ(0); /* Мощное увеличение на пользователя */
    box-shadow: 0 0 20px rgba(212, 174, 113, 0.9), inset 0 0 10px rgba(212, 174, 113, 0.5); /* Золотая тень */
    border-color: #ffd700;
    z-index: 10;
}

.kelya-pomiannik-cover, .kelya-diary-cover {
    cursor: pointer; transition: transform 0.4s ease, box-shadow 0.4s ease; border-radius: 12px;
    border: 2px solid rgba(212,174,113,0.5); aspect-ratio: 1 / 1; min-height: 150px;
    display: flex; align-items: flex-end; justify-content: center;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.8), 0 10px 30px rgba(0,0,0,0.6);
    margin-top: 20px; padding-bottom: 15px; box-sizing: border-box;
}
.kelya-pomiannik-cover { background: url('/wp-content/uploads/2026/07/pomyannik-1.webp') center/contain no-repeat, rgba(18,16,14,0.8); }
.kelya-diary-cover { background: url('/wp-content/uploads/2026/07/dnevnik_kelya.webp') center/contain no-repeat, rgba(18,16,14,0.8); }
.kelya-pomiannik-cover:hover, .kelya-diary-cover:hover {
    transform: scale(1.03); box-shadow: 0 15px 40px rgba(0,0,0,0.8), inset 0 0 30px rgba(212, 174, 113, 0.3); border-color: #D4AE71;
}
.kelya-hint-badge {
    color: #D4AE71; font-family: 'Playfair Display', serif; font-size: 13px; text-align: center; font-style: italic;
    padding: 6px 12px; background: rgba(18, 16, 14, 0.85); border-radius: 8px; border: 1px dashed rgba(212,174,113,0.4);
    pointer-events: none; width: fit-content; margin: 0; line-height: 1.2;
}

.shelf-item-card {
    padding: 15px; margin-bottom: 12px; background: rgba(255,255,255,0.8);
    border: 1px solid rgba(212,174,113,0.4); border-radius: 8px; transition: 0.3s;
}
.shelf-item-card:hover { background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.shelf-item-card a {
    text-decoration: none; color: #1a1a1a; font-family: 'Playfair Display', serif; font-size: 1.2em; font-weight: bold;
    display: flex; justify-content: space-between; align-items: center;
}
.shelf-item-card a::after { content: "↗"; color: #b88a00; font-size: 1.2em; }

/* Стиль для Любимых Цитат */
.shelf-quote-box {
    background: #fffdfa; border: 1px solid rgba(212,174,113,0.3); border-radius: 8px;
    padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); text-align: left;
}
.shelf-quote-text {
    font-size: 1.3em; font-weight: 500; margin: 0 0 15px 0; color: #1a1a1a; font-family: 'Georgia', serif; line-height: 1.5; quotes: "«" "»";
}
.shelf-quote-text::before { content: open-quote; color: #d4af37; font-weight: bold; margin-right: 4px; }
.shelf-quote-text::after { content: close-quote; color: #d4af37; font-weight: bold; margin-left: 4px; }
.shelf-quote-footer {
    display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 12px; flex-wrap: wrap; gap: 10px;
}
.shelf-quote-author { font-style: italic; font-size: 0.95em; color: #666; }

.sacred-title {
    font-family: 'Playfair Display', serif !important; font-size: 38px !important; font-weight: 700;
    text-align: center; margin: 0 0 5px 0; background: linear-gradient(45deg, #cda85a, #feeaa0, #cda85a);
    background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 2px 4px 10px rgba(0,0,0,0.2); letter-spacing: 1px; animation: shine 5s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }
.sacred-title-divider {
    width: 180px; height: 2px; background: linear-gradient(90deg, transparent, #D4AE71, transparent); margin: 0 auto 25px auto;
}

/* ==============================================================================
   СОВРЕМЕННЫЕ СТИЛИ ГЕНЕРАТОРА ОТКРЫТОК
   ============================================================================== */

@font-face { font-family: 'Ponomar Unicode'; src: url('/wp-content/uploads/fonts/PonomarUnicode.woff2') format('woff2'), url('/wp-content/uploads/fonts/PonomarUnicode.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Irmologion'; src: url('/wp-content/uploads/fonts/Irmologion.woff2') format('woff2'), url('/wp-content/uploads/fonts/Irmologion.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Blago'; src: url('/wp-content/uploads/fonts/Blago.woff2') format('woff2'), url('/wp-content/uploads/fonts/Blago.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Triod'; src: url('/wp-content/uploads/fonts/Triod.woff2') format('woff2'), url('/wp-content/uploads/fonts/Triod.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tristan'; src: url('/wp-content/uploads/fonts/Tristan.woff2') format('woff2'), url('/wp-content/uploads/fonts/Tristan.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Karmen'; src: url('/wp-content/uploads/fonts/Karmen.woff2') format('woff2'), url('/wp-content/uploads/fonts/Karmen.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Journal'; src: url('/wp-content/uploads/fonts/Journal.woff2') format('woff2'), url('/wp-content/uploads/fonts/Journal.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Garamond'; src: url('/wp-content/uploads/fonts/Garamond.woff2') format('woff2'), url('/wp-content/uploads/fonts/Garamond.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'ComicSans'; src: url('/wp-content/uploads/fonts/ComicSans.woff2') format('woff2'), url('/wp-content/uploads/fonts/ComicSans.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }

/* Базовые модальные стили */
.gen-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 12, 10, 0.85); z-index: 100000; display: none; justify-content: center; align-items: center; backdrop-filter: blur(8px); }
.gen-auth-modal { background: #fdfbf7; padding: 30px; border-radius: 16px; border: 1px solid rgba(212, 175, 55, 0.4); text-align: center; max-width: 600px; width: 90%; color: #3e3832; box-shadow: 0 20px 50px rgba(0,0,0,0.4); font-family: 'Segoe UI', Arial, sans-serif; }
.gen-auth-modal h3 { margin-top: 0; color: #5c3a21; font-family: 'Triod', serif; font-size: 24px; }
.gen-auth-modal button { background: linear-gradient(135deg, #d4af37, #b8860b); color: #fff; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; margin-top: 20px; font-weight: bold; transition: all 0.3s; }
.gen-auth-modal button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4); }

.generator-modal-content { 
    background: #fcfbfa; width: 95%; max-width: 1100px; height: 95vh; 
    border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; 
    border: 1px solid rgba(212, 175, 55, 0.3); 
    box-shadow: 0 25px 80px rgba(0,0,0,0.5); 
    font-family: 'Segoe UI', Arial, sans-serif;
}

.generator-header { 
    background: linear-gradient(135deg, #2b2622 0%, #1a1816 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    padding: 18px 25px; 
    display: flex; justify-content: space-between; align-items: center; 
    z-index: 10;
}

#gen-modal-title { margin: 0; font-family: 'Triod', serif; font-weight: normal; font-size: 22px; color: #d4af37; transition: color 0.3s ease; letter-spacing: 1px;}
.close-gen-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; font-size: 22px; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.close-gen-btn:hover { background: rgba(212, 175, 55, 0.8); border-color: #d4af37; transform: rotate(90deg); }

.generator-body { display: flex; flex-direction: row; flex: 1; overflow: hidden; }

/* Сайдбар настроек */
.generator-toolbar { 
    width: 380px; background: #fdfbf7; padding: 25px 20px; overflow-y: auto; 
    border-right: 1px solid rgba(212, 175, 55, 0.2); color: #3e3832; 
    box-shadow: 5px 0 15px rgba(0,0,0,0.03); z-index: 5;
}
.generator-toolbar::-webkit-scrollbar { width: 6px; }
.generator-toolbar::-webkit-scrollbar-track { background: #fdfbf7; }
.generator-toolbar::-webkit-scrollbar-thumb { background: #d4af37; border-radius: 10px; }

.generator-preview-area { flex: 1; background: #eaeaec; background-image: radial-gradient(#d3cfc8 1px, transparent 1px); background-size: 20px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; overflow: auto; }

.tool-group { margin-bottom: 25px; background: #ffffff; padding: 20px; border-radius: 14px; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 4px 12px rgba(0,0,0,0.02); transition: transform 0.2s, box-shadow 0.2s; }
.tool-group:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.05); transform: translateY(-1px); }
.tool-group label { display: block; font-weight: bold; margin-bottom: 12px; font-size: 14px; color: #5c3a21; text-transform: uppercase; letter-spacing: 0.5px; }

.gen-select, .gen-input, .gen-file-input { 
    width: 100%; padding: 10px 12px; margin-bottom: 12px; 
    border: 1px solid #e0d8c3; border-radius: 8px; box-sizing: border-box; 
    background-color: #faf8f5; color: #3e3832; font-family: inherit; font-size: 14px; transition: all 0.3s;
}
.gen-select:focus, .gen-input:focus { outline: none; border-color: #d4af37; box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15); background-color: #fff; }

.gen-color-input { width: 44px; height: 44px; cursor: pointer; padding: 2px; border: 1px solid #e0d8c3; border-radius: 8px; background: #faf8f5; transition: 0.2s; }
.gen-color-input:hover { border-color: #d4af37; }

.range-label { font-size: 13px; color: #666; margin-bottom: 6px; margin-top: 5px; }
.gen-range { -webkit-appearance: none; width: 100%; height: 6px; background: #e0d8c3; border-radius: 3px; outline: none; margin-bottom: 15px; }
.gen-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #d4af37; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: 0.2s; }
.gen-range::-webkit-slider-thumb:hover { transform: scale(1.2); background: #b8860b; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.color-btn { width: 34px; height: 34px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: 0.2s; }
.color-btn:hover { transform: scale(1.1); border-color: #3e3832; }

.toggle-btn { padding: 8px 12px; background: #faf8f5; border: 1px solid #e0d8c3; cursor: pointer; border-radius: 6px; font-weight: bold; color: #5c3a21; transition: all 0.2s; }
.toggle-btn:hover { background: #f0e9db; }
.toggle-btn.active { background: #d4af37; color: #fff; border-color: #b8860b; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }

.modern-solid-btn { width: 100%; padding: 10px; border: none; border-radius: 8px; background: #f4ecd8; color: #5c3a21; font-weight: bold; cursor: pointer; transition: 0.3s; margin-bottom: 8px; }
.modern-solid-btn:hover { background: #e8dcc4; }
.modern-solid-btn.outline { background: transparent; border: 1px dashed #d4af37; color: #b8860b; }
.modern-solid-btn.outline:hover { background: rgba(212, 175, 55, 0.05); }
.modern-solid-btn.dark { background: #2b2622; color: #d4af37; }
.modern-solid-btn.dark:hover { background: #1a1816; }

.gen-details { margin-bottom: 12px; background: #faf8f5; border: 1px solid #e0d8c3; border-radius: 10px; overflow: hidden; }
.gen-details summary { padding: 12px 15px; font-weight: bold; cursor: pointer; color: #5c3a21; outline: none; background: #f4ecd8; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.gen-details summary::-webkit-details-marker { display: none; }
.gen-details summary::after { content: '+'; font-size: 18px; color: #d4af37; }
.gen-details[open] summary::after { content: '−'; }
.details-content { padding: 15px; border-top: 1px solid #e0d8c3; background: #fff; }

.effects-separator { border-top: 1px dashed #e0d8c3; margin-top: 15px; padding-top: 15px; }
.checkbox-label { font-weight: normal !important; display: flex; align-items: center; gap: 8px; margin-bottom: 12px !important; color: #3e3832 !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer;}
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

.action-buttons { display: flex; gap: 15px; justify-content: center; margin-top: 25px; }
.action-btn { 
    padding: 14px 30px; 
    background: linear-gradient(135deg, #f5e6b8, #d4af37); 
    color: #1a1a1a !important; 
    border: none; 
    border-radius: 12px; 
    cursor: pointer; 
    font-weight: bold; 
    font-family: 'Playfair Display', Georgia, serif; 
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3), inset 0 1px 2px rgba(255,255,255,0.6); 
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); 
}
.action-btn:hover { 
    background: linear-gradient(135deg, #fffdfa, #f5e6b8); 
    transform: translateY(-3px); 
    box-shadow: 0 12px 25px rgba(212, 175, 55, 0.4), inset 0 1px 2px rgba(255,255,255,0.8); 
}

.btn-mobile-only { display: none !important; }
.btn-desktop-only { display: block !important; }

#card-canvas-wrapper {
    position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.25); background-color: #fdfbf7; background-size: cover; background-position: center; 
    width: 100%; max-width: 500px; 
    aspect-ratio: 1 / 1; 
    border-radius: 0 !important; 
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.hide-shadow-for-render {
    box-shadow: none !important;
}

#card-bg-overlay { position: absolute; inset: 0; background: rgba(253, 251, 247, 0); z-index: 1; pointer-events: none; border-radius: 0 !important; }
#card-frame { position: absolute; inset: 15px; border: none; z-index: 2; pointer-events: none; transition: border-radius 0.3s, border 0.3s; }

#card-frame.corners-only {
    border: none !important;
    background: 
        linear-gradient(to right, var(--frame-c, #d4af37) 4px, transparent 4px) 0 0, linear-gradient(to bottom, var(--frame-c, #d4af37) 4px, transparent 4px) 0 0,
        linear-gradient(to left, var(--frame-c, #d4af37) 4px, transparent 4px) 100% 0, linear-gradient(to bottom, var(--frame-c, #d4af37) 4px, transparent 4px) 100% 0,
        linear-gradient(to right, var(--frame-c, #d4af37) 4px, transparent 4px) 0 100%, linear-gradient(to top, var(--frame-c, #d4af37) 4px, transparent 4px) 0 100%,
        linear-gradient(to left, var(--frame-c, #d4af37) 4px, transparent 4px) 100% 100%, linear-gradient(to top, var(--frame-c, #d4af37) 4px, transparent 4px) 100% 100%;
    background-repeat: no-repeat; background-size: 30px 30px;
}

#card-content { 
    position: absolute; inset: 40px; z-index: 10; text-align: center; 
    display: flex; flex-direction: column; justify-content: center; gap: 20px; 
    overflow: hidden; 
}

#card-title, #card-quote, #card-author {
    text-transform: none !important; letter-spacing: normal !important; margin: 0 !important; padding: 0 !important; display: block;
}

#card-title { font-size: 24px; font-family: 'Triod', serif; line-height: 1.2 !important; }
#card-quote { font-size: 20px; font-family: 'Georgia', serif; line-height: 1.5 !important; white-space: pre-wrap; }
#card-author { font-size: 16px; font-family: 'Arial', sans-serif; font-style: italic; line-height: 1.2 !important; }

.card-deco-element { position: absolute; display: none; z-index: 15; pointer-events: none; }

.candle-effect::after { 
    content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; 
    background: radial-gradient(circle at 50% 50%, rgba(255, 170, 50, 0.5) 0%, transparent 75%); 
}

.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1px)); gap: 12px; justify-content: center; padding: 15px 0; max-height: 350px; overflow-y: auto; }
.sticker-item { width: 80px; height: 80px; border: 1px solid #e0d8c3; border-radius: 10px; cursor: pointer; transition: 0.2s; object-fit: contain; padding: 5px; background: #fff;}
.sticker-item:hover { border-color: #d4af37; transform: scale(1.08); box-shadow: 0 4px 10px rgba(212, 175, 55, 0.2); }

@media (max-width: 1024px) {
    .kelya-grid { grid-template-columns: 1fr 1fr; }
    .kelya-center { grid-column: 1 / -1; order: -1; }
    .kelya-analoy-image { height: 40vh; margin-top: 10px; margin-bottom: 20px; }
}

@media (max-width: 768px) {
    .kelya-grid { display: flex; flex-direction: column; gap: 20px; }
    .kelya-sidebar-left, .kelya-sidebar-right, .kelya-center { display: contents; }
    .kelya-analoy-image { display: none !important; }
    .kelya-books-animation-container { display: none !important; }
    
    .kelya-avatar-block { order: 1; margin: 0 !important; }
    .kelya-welcome { order: 2; margin: 0 !important; }
    .kelya-shelves-block { order: 3; margin: 0 !important; }
    .kelya-diary-wrapper { order: 4; margin: 0 !important; padding: 0 !important; }
    .kelya-pomiannik-wrapper { order: 5; margin: 0 !important; padding: 0 !important; }
    #psalm-day-widget { order: 6; margin: 0 !important; }
    .kelya-books-block { order: 7; margin: 0 !important; }
    
    .kelya-diary-cover, .kelya-pomiannik-cover { margin-top: 0 !important; }

    /* Генератор Мобильные */
    .btn-mobile-only { display: block !important; }
    .btn-desktop-only { display: none !important; }

    .generator-modal-content { height: 98vh; display: block; overflow-y: auto; border-radius: 12px; }
    .generator-body { display: flex; flex-direction: column; overflow: visible; height: auto; }
    
    .generator-preview-area { order: 1; padding: 20px 15px; border-bottom: 1px solid rgba(212, 175, 55, 0.3); height: auto; display: block; text-align: center; }
    #card-canvas-wrapper { width: 100%; max-width: 400px; height: auto; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
    
    .generator-toolbar { order: 2; width: 100%; border-right: none; height: auto; overflow: visible; padding: 15px; }
    .tool-group { padding: 15px; margin-bottom: 15px; }
    .gen-range, .gen-select { transform: scale(0.95); transform-origin: left; width: 105%; }
}

/* Стили для меню "Келья" (глобальные) */
@media (min-width: 1025px) {
    .kelya-menu-item-fav:hover .kelya-shelf-submenu { display: block !important; }
    .kelya-shelf-submenu .mobile-close-btn { display: none !important; }
}
@media (max-width: 1024px) {
    .kelya-shelf-submenu {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        width: 85%;
        max-width: 350px;
    }
    .kelya-shelf-submenu .mobile-close-btn { display: block !important; }
}