/* Minimal working CSS for dashboard */
/* CSS-переменные перемещены в design-tokens.css (подключается первым) */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--color-background); 
    color: var(--color-text);
}
/* Container для main content */
.app-main {
    min-height: calc(100vh - 72px);
    padding-top: 0;
}

/* Header Styles - Mobile First */
.app-header { 
    background: white; 
    border-bottom: 1px solid #e5e5e5; 
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

.header-content { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 0.75rem 0;
    min-height: 64px;
}

.app-logo { 
    text-decoration: none; 
    display: flex; 
    align-items: center;
    transition: opacity 0.2s;
}
.app-logo:hover {
    opacity: 0.8;
}
.logo-image { 
    height: 36px; 
    width: auto;
}

/* Desktop Navigation (horizontal menu) */
.header-nav.desktop-nav {
    display: none; /* Скрыто на мобильных */
    flex: 1;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
    margin-left: 2rem;
}

.header-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    text-decoration: none;
    color: #4b5563;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
}

.header-nav .nav-link:hover {
    background-color: #f3f4f6;
    color: #1f2937;
}

.header-nav .nav-link.active {
    color: #1F7CEC;
    background-color: #eff6ff;
}

.header-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background-color: #1F7CEC;
    border-radius: 1px;
}

.header-nav .nav-link i {
    font-size: 1rem;
}

/* User Menu (Desktop) */
.user-menu {
    position: relative;
    display: none; /* Скрыто на мобильных */
}

.user-menu-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    color: #4b5563;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.user-menu-button:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

.user-menu-button i.fa-user-circle {
    font-size: 1.5rem;
    color: #6b7280;
}

.user-menu-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-chevron {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
    color: #9ca3af;
}

.user-menu-button[aria-expanded="true"] .user-menu-chevron {
    transform: rotate(180deg);
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 200px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1002;
}

.user-menu-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: #4b5563;
    font-size: 0.9375rem;
    transition: background-color 0.2s ease;
}

.user-menu-item:first-child {
    border-radius: 8px 8px 0 0;
}

.user-menu-item:hover {
    background-color: #f3f4f6;
}

.user-menu-item.active {
    background-color: #eff6ff;
    color: #1F7CEC;
}

.user-menu-item i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

.user-menu-divider {
    height: 1px;
    background-color: #e5e7eb;
    margin: 0.25rem 0;
}

.user-menu-item-logout {
    color: #dc2626;
}

.user-menu-item-logout:hover {
    background-color: #fef2f2;
    color: #b91c1c;
}

/* Mobile Menu Button (burger) */
.menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    color: #4b5563;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.menu-button:hover {
    background-color: #f3f4f6;
}

.menu-button:active {
    background-color: #e5e7eb;
}

/* Side Drawer (Mobile Menu) */
.side-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px, 85vw);
    max-width: 320px;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
    overflow-y: auto;
}

.side-drawer.open { 
    right: 0; 
}

.drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.drawer-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

.drawer-content { 
    padding: 1.5rem; 
    height: 100%;
    display: flex;
    flex-direction: column;
}

.drawer-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.drawer-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
}

.drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    color: #4b5563;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.drawer-close:hover {
    background-color: #f3f4f6;
}

.drawer-nav { 
    display: flex; 
    flex-direction: column; 
    gap: 0.5rem; 
    flex: 1;
}

.drawer-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: #f9fafb;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.drawer-user-avatar {
    font-size: 2.5rem;
    color: #6b7280;
}

.drawer-user-details {
    flex: 1;
    min-width: 0;
}

.drawer-user-name {
    font-weight: 600;
    font-size: 1rem;
    color: #1f2937;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawer-user-email {
    font-size: 0.875rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawer-nav-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.nav-item {
    padding: 1rem;
    text-decoration: none;
    color: #4b5563;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-item:hover { 
    background: #f3f4f6; 
    color: #1f2937;
}

.nav-item.active {
    background-color: #eff6ff;
    color: #1F7CEC;
}

.nav-item i {
    width: 20px;
    text-align: center;
    font-size: 1.125rem;
}

.nav-item-logout {
    color: #dc2626;
    margin-top: auto;
}

.nav-item-logout:hover {
    background-color: #fef2f2;
    color: #b91c1c;
}

/* Desktop Styles - показываем горизонтальное меню */
@media (min-width: 768px) {
    .header-content {
        padding: 1rem 0;
        min-height: 72px;
    }
    
    .logo-image {
        height: 40px;
    }
    
    .header-nav.desktop-nav {
        display: flex;
    }
    
    .user-menu {
        display: block;
        margin-left: 1rem;
    }
    
    .menu-button {
        display: none; /* Скрываем бургер на десктопе */
    }
    
    .side-drawer {
        display: none; /* Скрываем drawer на десктопе */
    }
    
    .drawer-backdrop {
        display: none;
    }
}

/* Удален padding из header для унификации структуры с create-book-header */

/* Dashboard Content */
.dashboard-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2.5rem;
}

/* Section Styles */
.summary-section,
.notifications-section {
    margin-bottom: 2.5rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.section-link {
    font-size: 0.9375rem;
    color: var(--color-status-blue);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
    border-bottom: 1px solid transparent;
}

.section-link:hover {
    color: var(--color-primary-dark);
    text-decoration: none;
    border-bottom-color: var(--color-status-blue);
}

.summary-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.quick-links-section .summary-content {
    flex-direction: row;
}

.quick-link-card {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--color-background);
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s, border-color 0.2s;
}

.quick-link-card:hover {
    background: #f9fafb;
    border-color: var(--color-primary, #ff6b35);
}

.quick-link-card i {
    font-size: 1.1rem;
}

/* Choose Format Page */
.choose-format {
    padding-bottom: 2.5rem;
}

.choose-format-header {
    margin-bottom: 1.5rem;
}

.choose-format-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    letter-spacing: -0.02em;
    margin: 0;
}

.choose-format-subtitle {
    margin-top: 0.5rem;
    color: var(--color-text-secondary);
    max-width: 680px;
    line-height: 1.5;
}

.choose-format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.format-option {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    background: var(--color-background);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    min-height: 160px;
}

.format-option:hover {
    border-color: var(--color-accent);
}

.format-option.selected {
    border-color: var(--color-accent);
    background: var(--color-background-subtle);
}

.format-option-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #eff6ff;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.format-option-icon--text {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.format-option-body {
    flex: 1;
}

.format-option-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: 0.25rem;
}

.format-option-description {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.format-option-check {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--color-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.format-option.selected .format-option-check {
    opacity: 1;
}

.choose-format-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
}

.choose-format-actions .action-button {
    max-width: 220px;
}

.btn-continue:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .choose-format-grid {
        grid-template-columns: 1fr;
    }

    .format-option {
        padding: 1.25rem;
    }

    .choose-format-actions {
        justify-content: stretch;
    }

    .choose-format-actions .action-button {
        width: 100%;
        max-width: none;
    }
}

/* Book Editor - Mi Caja Layout */
.book-micaja {
    font-family: var(--font-family);
    color: #29293a;
}

.book-micaja .section {
    padding: 2.5rem 0;
}

.book-micaja .section-lg {
    padding: 3rem 0;
}

.book-micaja .container,
.book-micaja .container-wide {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.book-micaja .bg-default {
    background: #fff;
}

.book-micaja .bg-gray-lighter {
    background: #f8fafc;
}

.book-micaja .text-center {
    text-align: center;
}

.book-micaja .text-left {
    text-align: left;
}

.book-micaja .heading-1 {
    font-size: 2rem;
    font-weight: 600;
    color: #29293a;
}

.book-micaja .page-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #29293a;
}

.book-micaja .divider {
    width: 64px;
    height: 4px;
    background: #0d3c74;
    border-radius: 999px;
    margin: 0 auto 1.5rem;
}

.book-micaja .row {
    display: flex;
    flex-wrap: wrap;
}

.book-micaja .row-no-gutter {
    gap: 0;
}

.book-micaja .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.book-micaja .btn-books {
    padding: 10px;
    border-radius: 35px;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.12em;
    transition: .22s;
    min-height: 50px;
    min-width: 50px;
}

.book-micaja .btn-outline {
    border: 1px solid #dcdcdc;
}

.book-micaja .btn-books-red {
    color: #cc0000;
}

.book-micaja .btn-books-green {
    color: #228c22;
}

.book-micaja .btn-books-purple {
    color: #8000ff;
}

.book-micaja .spread-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px auto 0;
    padding: 0 1.5%;
    max-width: 100%;
    aspect-ratio: 56 / 21;
    border: 1px solid #dcdcdc;
    position: relative;
    background: #fff;
}

.book-micaja .spread-container::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: rgba(0, 0, 0, 0.1);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.35), 2px 0 8px rgba(0, 0, 0, 0.15);
    transform: translateX(-50%);
}

.book-micaja .spread-page {
    width: 45%;
    padding: 0 0 1%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.book-micaja .reserve-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px auto 0;
    padding: 0 1.5%;
    max-width: 100%;
    aspect-ratio: 56 / 21;
    border: 0;
    position: relative;
}

.book-micaja .reserve-page {
    width: 45%;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.book-micaja .image-dropzone {
    position: relative;
    width: 100%;
    padding-top: 72%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: 10px;
}

.book-micaja .image-dropzone img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #fff;
}

.book-micaja .caption {
    text-align: center;
    margin-top: 0.5%;
    margin-bottom: 1%;
    font-size: var(--dynamic-font-size);
    font-weight: 400;
    color: #666;
    font-family: 'Baloo 2', sans-serif;
    position: relative;
    min-height: 0.5em;
}

.book-micaja .caption p {
    color: #666;
}

.book-micaja .controls-container {
    text-align: center;
    margin-top: 20px;
}

.book-micaja .book-controls {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    gap: 5%;
}

.book-micaja .rd-mailform-inline-inner {
    flex-wrap: nowrap;
}

.book-micaja .cover-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 28 / 21;
    background-color: #f0f0f0;
    overflow: hidden;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

.book-micaja .cover-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
    z-index: 2;
}

.book-micaja .cover-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 0;
    background-color: #fff;
}

.book-micaja .caption-container {
    position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 1);
    padding: 1% 0;
    text-align: center;
    font-family: 'Baloo 2', sans-serif;
    font-size: clamp(14px, 2.9vw, 24px);
    font-weight: 600;
    color: #333;
    z-index: 1;
    margin: 0;
}

.book-micaja .box-minimal-icon{
    width: 50px;
}

.book-micaja .box-shadow {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.book-micaja .box-minimal {
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    background: #fff;
    margin: 1rem 0;
}

.book-micaja .box-minimal-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.book-micaja .box-minimal-title {
    margin: 0;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.4;
}

.book-micaja .button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.book-micaja .button-shadow {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.book-micaja .button-default-outline {
    background: #fff;
    border-color: #dcdcdc;
    color: #0d3c74;
}

.book-micaja .button-default-outline:hover {
    border-color: #0d3c74;
}

.book-micaja .btn-success {
    background: #0d3c74;
    color: #fff;
    border-color: #0d3c74;
}

.book-micaja .btn-success:hover {
    background: #0a2f5b;
    border-color: #0a2f5b;
}

.book-micaja .button-sm {
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
}

.book-micaja-v2 {
    font-family: var(--font-family);
    color: #29293a;
}

.book-micaja-v2 .section {
    padding: 2.5rem 0;
}

.book-micaja-v2 .section-lg {
    padding: 3rem 0;
}

.book-micaja-v2 .container,
.book-micaja-v2 .container-wide {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.book-micaja-v2 .bg-default {
    background: #fff;
}

.book-micaja-v2 .bg-gray-lighter {
    background: #f8fafc;
}

.book-micaja-v2 .text-center {
    text-align: center;
}

.book-micaja-v2 .text-left {
    text-align: left;
}

.book-micaja-v2 .heading-1 {
    font-size: 2rem;
    font-weight: 600;
    color: #29293a;
}

.book-micaja-v2 .page-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #29293a;
}

.book-micaja-v2 .divider {
    width: 64px;
    height: 4px;
    background: #0d3c74;
    border-radius: 999px;
    margin: 0 auto 1.5rem;
}

.book-micaja-v2 .row {
    display: flex;
    flex-wrap: wrap;
}

.book-micaja-v2 .row-no-gutter {
    gap: 0;
}

.book-micaja-v2 .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.book-micaja-v2 .box-shadow {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.book-micaja-v2 .spread-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin: 20px auto 0;
    padding: 0;
    max-width: 100%;
    aspect-ratio: 594 / 210;
    border: 1px solid #dcdcdc;
    position: relative;
    background: #fff;
    overflow: visible;
    min-height: 0;
}

.book-micaja-v2 .spread-container::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: rgba(0, 0, 0, 0.08);
    box-shadow: -1px 0 6px rgba(0, 0, 0, 0.15), 1px 0 6px rgba(0, 0, 0, 0.1);
    transform: translateX(-50%);
    z-index: 3;
}

.book-micaja-v2 {
    --page-height-mm: 210;
    --caption-height-mm: 15;
}

.book-micaja-v2 .spread-page {
    width: 50%;
    padding: 0 0 1%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    min-height: 0;
    scroll-margin-top: 20vw;
}

.book-micaja-v2 .page-actions-stack {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 7;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 18px;
    padding: 6px;
    box-shadow: none;
}

.book-micaja-v2 .page-actions-toggle {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 0;
    background: #fff;
    color: #0d3c74;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: background 0.2s ease, color 0.2s ease;
}

.book-micaja-v2 .page-actions-toggle:hover {
    background: rgba(13, 60, 116, 0.08);
}

.book-micaja-v2 .spread-controls {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.75rem;
}

.book-micaja-v2 .page-control {
    flex: 1;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 16px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 86px;
}

.book-micaja-v2 .page-foot {
    width: 100%;
    padding: 0 0.75rem;
    margin-top: auto;
    height: calc(100% * var(--caption-height-mm) / var(--page-height-mm));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.book-micaja-v2 .page-caption-inline {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 32px;
    width: 100%;
    max-width: 86%;
    margin: 0 auto;
}

/* underline removed per design */
.book-micaja-v2 .page-caption-underline {
    display: none;
}

.book-micaja-v2 .page-caption-text {
    margin: 0;
    color: #666;
    padding-bottom: 2px;
    border-bottom: none;
    text-align: center;
    width: 100%;
}

.book-micaja-v2 .page-caption-form-inline {
    display: block;
    width: 100%;
    margin: 0;
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
}

.book-micaja-v2 .page-caption-inline.is-editing .page-caption-text,
.book-micaja-v2 .page-caption-inline.is-editing .page-caption-underline {
    opacity: 0;
}

.book-micaja-v2 .page-caption-inline.is-editing .page-caption-form-inline {
    opacity: 1;
    pointer-events: auto;
}


.book-micaja-v2 .page-caption-input-inline {
    border: 0;
    border-bottom: 1px solid rgba(13, 60, 116, 0.25);
    border-radius: 0;
    padding: 2px 4px;
    min-width: 200px;
    width: min(60%, 360px);
    outline: none;
    background: transparent;
    color: #666;
    height: 28px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font: inherit;
    line-height: 1.2;
}

.book-micaja-v2 .page-caption-inline-actions {
    display: inline-flex;
    gap: 8px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.book-micaja-v2 .page-caption-save-inline,
.book-micaja-v2 .page-caption-cancel-inline {
    border: 0;
    background: rgba(13, 60, 116, 0.08);
    color: #0d3c74;
    border-radius: 12px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.book-micaja-v2 .page-actions-sheet {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    align-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.book-micaja-v2 .spread-page.is-active .page-actions-sheet {
    display: flex;
}

.book-micaja-v2 .spread-page.is-active .page-actions-toggle {
    background: var(--color-background-subtle);
    border-color: var(--color-accent);
}

.book-micaja-v2 .spread-page.is-active .page-actions-stack {
    border-color: #0d3c74;
    box-shadow: 0 14px 28px rgba(13, 60, 116, 0.18);
}

.book-micaja-v2 .page-sheet-btn {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 0;
    background: #fff;
    color: #0d3c74;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    pointer-events: auto;
}

@supports (-webkit-touch-callout: none) {
    .book-micaja-v2 .spread-container {
        aspect-ratio: auto;
        height: clamp(360px, 42vw, 560px);
    }

    .book-micaja-v2 .spread-page {
        height: auto;
    }
}

.book-micaja-v2 .page-sheet-btn:hover {
    background: rgba(13, 60, 116, 0.08);
}

.book-micaja-v2 .page-sheet-btn-delete {
    color: #c0392b;
    background: #fff5f4;
}

.book-micaja-v2 .page-sheet-btn-drag {
    color: #0d3c74;
    border-color: #dcdcdc;
}

.book-micaja-v2 .book-delete-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.book-micaja-v2 .book-delete-modal.is-open {
    display: flex;
}

.book-micaja-v2 .book-delete-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 20, 33, 0.45);
}

.book-micaja-v2 .book-delete-modal__dialog {
    position: relative;
    width: min(92vw, 360px);
    background: #fff;
    border-radius: 18px;
    padding: 18px 18px 16px;
    box-shadow: 0 20px 40px rgba(13, 60, 116, 0.25);
    text-align: center;
}

.book-micaja-v2 .book-delete-modal__dialog h3 {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.book-micaja-v2 .book-delete-modal__dialog p {
    margin-bottom: 1rem;
    color: #5a6472;
}

.book-micaja-v2 .book-delete-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.book-micaja-v2 .book-delete-cancel,
.book-micaja-v2 .book-delete-confirm {
    border-radius: 999px;
    padding: 8px 16px;
    border: 1px solid #dcdcdc;
    background: #fff;
    color: #0d3c74;
    cursor: pointer;
}

.book-micaja-v2 .book-delete-confirm {
    border-color: #f0c9c5;
    background: #ffeceb;
    color: #c0392b;
}

.book-micaja-v2 .page-control.is-empty {
    background: transparent;
    border: none;
    box-shadow: none;
}

.book-micaja-v2 .page-caption-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.book-micaja-v2 .page-caption-input {
    flex: 1;
    border: 0;
    border-bottom: 1px solid #dcdcdc;
    padding: 4px 2px;
    font-family: var(--font-family);
    background: transparent;
    color: #29293a;
}

.book-micaja-v2 .page-caption-input:focus {
    outline: none;
    border-color: #0d3c74;
}

.book-micaja-v2 .page-caption-save {
    border: 1px solid #dcdcdc;
    background: #fff;
    color: #0d3c74;
    border-radius: 999px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.book-micaja-v2 .page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.book-micaja-v2 .page-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #dcdcdc;
    background: #fff;
    color: #0d3c74;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

.book-micaja-v2 .page-action-btn:hover {
    border-color: #0d3c74;
}

.book-micaja-v2 .image-dropzone {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    padding-top: 0;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: 0;
    flex: 1 1 auto;
    z-index: 1;
    min-height: 0;
}

.book-micaja-v2 .image-dropzone img {
    position: absolute;
    top: calc(50% - 2.38%);
    left: 50%;
    width: auto;
    height: auto;
    max-width: 84.18%;
    max-height: 85.72%;
    object-fit: contain;
    background-color: #fff;
    padding: 0;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
}

@supports not (aspect-ratio: 1 / 1) {
    .book-micaja-v2 .image-dropzone {
        padding-top: 0;
    }
}

.book-micaja-v2 .spread-page.page-left .image-dropzone img {
    left: calc(50% - 3.37%);
}

.book-micaja-v2 .spread-page.page-right .image-dropzone img {
    left: calc(50% + 3.37%);
}

@media (max-width: 900px) {
    .book-micaja-v2 .spread-controls {
        flex-direction: column;
    }
}

.book-micaja-v2 .reserve-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px auto 0;
    padding: 0 1.5%;
    max-width: 100%;
    aspect-ratio: 56 / 21;
    border: 0;
    position: relative;
}

.book-micaja-v2 .reserve-page {
    width: 45%;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.book-micaja-v2 .cover-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 28 / 21;
    background-color: #f0f0f0;
    overflow: hidden;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

.book-micaja-v2 .cover-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
    z-index: 2;
}

.book-micaja-v2 .cover-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 0;
    background-color: #fff;
}

.book-micaja-v2 .caption-container {
    position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 1);
    padding: 1% 0;
    text-align: center;
    font-family: 'Baloo 2', sans-serif;
    font-size: clamp(14px, 2.9vw, 24px);
    font-weight: 600;
    color: #333;
    z-index: 1;
    margin: 0;
}

.book-micaja-v2 .box-minimal {
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    background: #fff;
    margin: 1rem 0;
}

.book-micaja-v2 .box-minimal-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 20px;
}

.book-micaja-v2 .box-minimal-icon {
    width: 50px;
}

.book-micaja-v2 .box-minimal-title {
    margin: 0;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.4;
}

.book-micaja-v2 .button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.book-micaja-v2 .button-shadow {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.book-micaja-v2 .button-default-outline {
    background: #fff;
    border-color: #dcdcdc;
    color: #0d3c74;
}

.book-micaja-v2 .button-default-outline:hover {
    border-color: #0d3c74;
}

.book-micaja-v2 .btn-success {
    background: #0d3c74;
    color: #fff;
    border-color: #0d3c74;
}

.book-micaja-v2 .btn-success:hover {
    background: #0a2f5b;
    border-color: #0a2f5b;
}

.book-micaja-v2 .button-sm {
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
}

.book-micaja-v2 .sortable-ghost {
    opacity: 1;
    background-color: #fff;
    border: 1px dashed #ccc;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.book-micaja-v2 .sortable-swap-highlight {
    outline: 2px solid rgba(13, 60, 116, 0.45);
    outline-offset: -3px;
}


.book-micaja-v2 .sortable-ghost .page-actions-stack,
.book-micaja-v2 .sortable-ghost .page-foot,
.book-micaja-v2 .sortable-ghost .page-caption-inline {
    display: none;
}

.book-micaja-v2 .sortable-chosen .page-actions-stack,
.book-micaja-v2 .sortable-drag .page-actions-stack {
    visibility: hidden;
}

.book-micaja-v2 .spread-container.single-page {
    justify-content: flex-end;
}

.book-micaja-v2 .spread-container.single-page .spread-page {
    width: 50%;
    padding: 0 0 1%;
}

.book-micaja-v2 .page-number {
    margin-top: 10px;
}

.book-micaja-v2 .page-number p {
    color: #838383;
}

.book-micaja-v2 p {
    color: #29293a;
}

.book-micaja-v2 .img-anchor {
    display: block;
    position: relative;
    top: -20vw;
    visibility: hidden;
}

@media (max-width: 900px) {
    .book-micaja-v2 .spread-container,
    .book-micaja-v2 .reserve-container {
        aspect-ratio: 1 / 1;
        flex-direction: column;
        gap: 1rem;
    }

    .book-micaja-v2 .spread-page,
    .book-micaja-v2 .reserve-page {
        width: 100%;
    }

    .book-micaja-v2 .spread-container::before {
        display: none;
    }

    .book-micaja-v2 .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
.book-micaja .box-minimal * + p {
    margin-top: 0px;
}

.book-micaja .box-minimal-header {
    margin-top: 20px;
    flex-wrap: nowrap;
}

.book-micaja .telefono_margin {
    margin-top: 20px;
}

.book-micaja .sortable-ghost {
    opacity: 0.7;
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
}

.book-micaja .spread-container.single-page {
    justify-content: flex-end;
}

.book-micaja .spread-container.single-page .spread-page {
    width: 45%;
    padding: 0 1.5%;
}

.book-micaja .page-number {
    margin-top: 10px;
}

.book-micaja .page-number p {
    color: #838383;
}

.book-micaja p {
    color: #29293a;
}

.book-micaja .row-padding-20 {
    padding: 20px 20px 0 20px;
}

/* --- Peecho PDF-aligned positions for book review --- */
.book-micaja-v2 {
    --pee-img-max-w: 84.18%;
    --pee-img-max-h: 85.72%;
    --pee-x-shift: 3.37%;
    --pee-y-shift: 2.38%;
}

.book-micaja-v2 .spread-page .image-dropzone {
    position: relative;
}

.book-micaja-v2 .spread-page .image-dropzone img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    max-width: var(--pee-img-max-w);
    max-height: var(--pee-img-max-h);
    object-fit: contain;
    transform: translate(-50%, calc(-50% - var(--pee-y-shift)));
}

.book-micaja-v2 .spread-page.page-left .image-dropzone img {
    left: calc(50% - var(--pee-x-shift));
}

.book-micaja-v2 .spread-page.page-right .image-dropzone img {
    left: calc(50% + var(--pee-x-shift));
}

.book-micaja-v2 .spread-container.single-page .spread-page .image-dropzone img {
    left: calc(50% + var(--pee-x-shift));
}

.book-micaja .text-padding-20 {
    padding: 0 20px 0 20px;
}

.book-micaja .row-margin-top-20 {
    margin-top: 20px !important;
}

.book-micaja .white-on-black {
    color: #ffffff;
}

.book-micaja .hide-purchased-option {
    display: none;
}

.book-micaja .option-price {
    color: #0d3c74;
    font-size: 1.5em;
    font-weight: bold;
}

.book-micaja .swiper-slide,
.book-micaja .swiper-wrapper {
    height: auto !important;
}

.book-micaja .swiper-container {
    min-height: 0 !important;
}

.book-micaja .swiper-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.book-micaja .accordion-custom-heading {
    border-top: 0px !important;
}

.book-micaja .accordion-custom-light {
    border-bottom: 0px !important;
}

.book-micaja .accordion-custom-heading button {
    border-bottom: 0px !important;
}

.book-micaja .accordion-custom-light .collapse {
    border-bottom: 0px !important;
}

.book-micaja .price {
    font-size: 15px;
    font-weight: bold;
    display: inline-flex;
    align-items: flex-start;
}

.book-micaja .price-euro {
    font-size: 15px;
    line-height: 1;
}

.book-micaja .price-cents {
    font-size: 10px;
    line-height: 1;
    vertical-align: top;
    position: relative;
    top: 0.3em;
    padding-left: 2px;
}

.book-micaja .price-symbol {
    font-size: 15px;
    margin-left: 5px;
}

.book-micaja .img-anchor {
    display: block;
    position: relative;
    top: -20vw;
    visibility: hidden;
}

@media (max-width: 900px) {
    .book-micaja .spread-container,
    .book-micaja .reserve-container {
        aspect-ratio: 1 / 1;
        flex-direction: column;
        gap: 1rem;
    }

    .book-micaja .spread-page,
    .book-micaja .reserve-page {
        width: 100%;
    }

    .book-micaja .spread-container::before {
        display: none;
    }

    .book-micaja .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Book Editor */
.book-editor-shell {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.book-editor-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    background: var(--color-background-subtle);
}

.book-editor-hero-text {
    max-width: 520px;
}

.book-editor-kicker {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}

.book-editor-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: 0.75rem;
}

.book-editor-subtitle {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.5;
}

.book-editor-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.book-status-pill {
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: #e0edff;
    color: var(--color-primary-dark);
    font-weight: 600;
    font-size: 0.85rem;
}

.book-hero-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.book-hero-note {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.book-section {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.book-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.book-section-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: 0.35rem;
}

.book-section-subtitle {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

.book-section-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.book-cover-card {
    display: grid;
    grid-template-columns: minmax(220px, 360px) minmax(220px, 1fr);
    gap: 1.5rem;
    align-items: center;
    border-radius: 16px;
    border: 1px solid var(--color-border);
    padding: 1.5rem;
    background: var(--color-background-subtle);
}

.book-cover-image {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: #fff;
}

.book-cover-image img {
    display: block;
    width: 100%;
    height: auto;
}

.book-cover-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.book-cover-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.book-cover-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.book-cover-help {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

.book-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-card);
    border: 1px dashed var(--color-border);
    background: #f8fafc;
    margin-bottom: 1.5rem;
}

.book-toolbar-right {
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.book-toolbar.is-selecting .book-toolbar-right {
    opacity: 1;
    pointer-events: auto;
}

.book-hint {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.book-selection-count {
    font-size: 0.85rem;
    color: var(--color-primary-dark);
    font-weight: 600;
    margin-left: 0.75rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.book-toolbar.is-selecting .book-selection-count {
    opacity: 1;
}

.book-ghost-button {
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-primary-dark);
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.book-ghost-button:hover {
    border-color: var(--color-accent);
    color: var(--color-primary-dark);
}

.book-pages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1.25rem;
    padding: 0.75rem;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px dashed var(--color-border);
}

.book-empty {
    padding: 1.25rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
    color: var(--color-text-secondary);
    background: #f8fafc;
}

.book-page-card {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
}

.book-page-card.is-left {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: inset -18px 0 22px rgba(15, 23, 42, 0.12), 0 16px 28px rgba(15, 23, 42, 0.12);
}

.book-page-card.is-right {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    box-shadow: inset 18px 0 22px rgba(15, 23, 42, 0.12), 0 16px 28px rgba(15, 23, 42, 0.12);
}

.book-page-card.is-left .book-page-thumb,
.book-page-card.is-right .book-page-thumb {
    background: #fffdf8;
    padding: 0.75rem;
}

.book-page-card.is-left .book-page-thumb img,
.book-page-card.is-right .book-page-thumb img {
    border-radius: 12px;
}

.book-page-thumb {
    position: relative;
    cursor: pointer;
    background: #f8fafc;
}

.book-page-thumb img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.book-page-index {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    background: rgba(10, 40, 75, 0.9);
    color: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

.book-page-meta {
    padding: 0 1rem;
}

.book-page-caption {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}

.book-page-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0 1rem 0.25rem;
    flex-wrap: wrap;
}

.book-icon-button {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.book-icon-button:hover {
    border-color: var(--color-accent);
    color: var(--color-primary-dark);
    /* Убрано box-shadow согласно стандартизации hover-эффектов для кнопок */
}

.book-page-drag {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--color-text-muted);
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.book-pages.is-reorder .book-page-card {
    border-style: dashed;
}

.book-pages.is-reorder .book-page-drag {
    opacity: 1;
}

.book-pages.is-selecting .book-page-card {
    cursor: pointer;
}

.book-page-select {
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: 16px;
    pointer-events: none;
}

.book-page-card.is-selected .book-page-select {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(31, 124, 236, 0.18);
}

.book-reserve-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.book-page-card.is-reserve .book-page-thumb img {
    aspect-ratio: 1 / 1;
}

.book-modal-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.book-editor-shell .button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.4rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.book-editor-shell .button-shadow {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.book-editor-shell .button-default-outline {
    background: #fff;
    border-color: var(--color-border);
    color: var(--color-primary-dark);
}

.book-editor-shell .button-default-outline:hover {
    border-color: var(--color-accent);
    color: var(--color-primary-dark);
}

.book-editor-shell .btn-success {
    background: var(--color-primary-light);
    color: #fff;
    border-color: var(--color-primary-light);
}

.book-editor-shell .btn-success:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.book-editor-shell .button-sm {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
}

.book-editor-shell .btn-books-green,
.book-editor-shell .btn-books-red {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    margin-left: 0.35rem;
    font-size: 0.75rem;
}

.book-editor-shell .btn-books-green {
    background: #dcfce7;
    color: #16a34a;
}

.book-editor-shell .btn-books-red {
    background: #fee2e2;
    color: #ef4444;
}

.book-editor-shell .box-minimal {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    background: #fff;
    margin: 1rem 0;
}

.book-editor-shell .box-minimal-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.book-editor-shell .box-minimal-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #eff6ff;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.book-editor-shell .box-minimal-title {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

@media (max-width: 1024px) {
    .book-editor-hero {
        flex-direction: column;
    }

    .book-cover-card {
        grid-template-columns: 1fr;
    }

    .book-pages {
        grid-template-columns: 1fr;
    }

    .book-reserve-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .book-editor-shell {
        padding: 1.75rem 1rem 3rem;
    }

    .book-section {
        padding: 1.25rem;
    }

    .book-section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .book-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .book-reserve-grid {
        grid-template-columns: 1fr;
    }
}

/* Item Cards - Card First Approach */
.item-card {
    display: flex;
    flex-direction: column;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--color-border-strong);
}

.item-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    flex: 1;
}

/* Превью изображения (70-80% карточки) */
.item-preview {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 aspect ratio для превью */
    background: var(--color-background);
    overflow: hidden;
    flex-shrink: 0; /* Не сжимается */
    border-radius: 12px 12px 0 0; /* Скругление только сверху */
}

/* Изометрическое превью коробки */
.box-isometric {
    perspective: 600px;
    perspective-origin: 50% 40%;
    transform-style: preserve-3d;
    position: relative;
}

.box-template {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    overflow: visible;
    pointer-events: none;
}

.box-template-image {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    background: #f9fafb;
}

.box-images-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    pointer-events: none;
}

.box-images-under {
    z-index: 2;
    /* Обрезаем изображения по форме внутренней части коробки */
    clip-path: polygon(16% 28%, 84% 28%, 90% 76%, 10% 76%);
    -webkit-clip-path: polygon(16% 28%, 84% 28%, 90% 76%, 10% 76%);
    overflow: hidden;
}

.box-images-over {
    z-index: 5;
    overflow: visible;
}

.box-image-slot {
    position: absolute;
    width: 12%;
    height: 12%;
    transform-style: preserve-3d;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Размещаем внутри коробки */
    z-index: 2;
}

.box-image-slot:hover {
    transform: scale(1.2) translateZ(10px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(0, 0, 0, 0.3);
    z-index: 5;
}

.box-images-under .box-image-slot:nth-child(1) {
    /* Первое изображение - вверху слева внутри коробки */
    top: 36%;
    left: 22%;
    transform: rotateX(55deg) rotateY(-30deg) translateZ(-12px) scale(0.85);
}

.box-images-under .box-image-slot:nth-child(2) {
    /* Второе изображение - по центру, глубже */
    top: 38%;
    left: 44%;
    transform: rotateX(55deg) rotateY(0deg) translateZ(-14px) scale(0.9);
}

.box-images-under .box-image-slot:nth-child(3) {
    /* Третье изображение - вверху справа */
    top: 36%;
    right: 23%;
    transform: rotateX(55deg) rotateY(30deg) translateZ(-12px) scale(0.85);
}

.box-images-under .box-image-slot:nth-child(4) {
    /* Четвертое изображение - внизу слева, лежит на дне */
    bottom: 28%;
    left: 28%;
    transform: rotateX(65deg) rotateY(-25deg) translateZ(-16px) scale(0.8);
}

.box-images-under .box-image-slot:nth-child(5) {
    /* Пятое изображение - внизу справа, лежит на дне */
    bottom: 28%;
    right: 28%;
    transform: rotateX(65deg) rotateY(25deg) translateZ(-16px) scale(0.8);
}

.box-images-over .box-image-slot {
    width: 18%;
    height: 18%;
    z-index: 6;
    background: #fff;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25);
    transform-origin: 50% 90%;
}

.box-images-over .box-image-slot:nth-child(1) {
    top: 6%;
    left: 22%;
    transform: rotateX(8deg) rotateZ(-8deg) translateZ(18px);
}

.box-images-over .box-image-slot:nth-child(2) {
    top: 2%;
    left: 48%;
    transform: rotateX(8deg) rotateZ(6deg) translateZ(20px);
}

.box-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.item-preview-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.item-card:hover .item-preview-image {
    /* Убрано transform: scale(1.05) согласно стандартизации hover-эффектов для карточек */
}

.item-preview-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background-subtle);
}

.item-preview-icon {
    font-size: 4rem;
    color: #9ca3af;
}

/* Placeholder для книг с превью страниц */
.book-preview {
    flex-direction: column;
    gap: 0.5rem;
}

.book-preview-pages {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
}

.book-page-preview {
    width: 24px;
    height: 32px;
    background: white;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Overlay на превью (для статуса) */
.item-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 7;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.2) 100%);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 1rem;
    pointer-events: none;
}

.item-preview-badge {
    pointer-events: auto;
}

/* Информация о проекте (20-30% карточки) */
.item-info {
    padding: 1rem 1.25rem 1.1rem;
    background: var(--color-background);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.item-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin: 0 0 0.25rem 0;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.item-subtitle {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0.5rem 0 0 0;
    line-height: 1.5;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.item-subtitle::before {
    content: '\f03e'; /* FontAwesome icon-image */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    display: inline-block;
}

/* Ready box visual (status-ready) */
.box-item-ready {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.box-item-ready:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

.box-item-ready .item-card-link {
    gap: 0.9rem;
}

.box-ready-preview {
    position: relative;
    width: 100%;
    padding-top: 74%;
    background: #ffffff;
    overflow: visible;
    margin-bottom: 0.75rem;
}

.box-ready-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.12));
}

.box-fan {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.box-fan-item {
    position: absolute;
    top: 46%;
    left: 50%;
    width: 34%;
    aspect-ratio: 4 / 3;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    transform-origin: 50% 90%;
}

.box-fan-item.fan-1 { transform: translate(-50%, -50%) rotate(-105deg) translateY(-18%); z-index: 1; }
.box-fan-item.fan-2 { transform: translate(-50%, -50%) rotate(-92deg) translateY(-10%);  z-index: 2; }
.box-fan-item.fan-3 { transform: translate(-50%, -50%) rotate(-80deg) translateY(-4%);   z-index: 3; }
.box-fan-item.fan-4 { transform: translate(-50%, -50%) rotate(-68deg) translateY(4%);    z-index: 4; }
.box-fan-item.fan-5 { transform: translate(-50%, -50%) rotate(-55deg) translateY(10%);   z-index: 5; }

.box-fan-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.box-ready-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0 0.25rem 0.25rem;
}

.box-ready-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.box-ready-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.box-ready-sub {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-secondary);
    font-weight: 400;
}

.box-ready-sub i {
    color: var(--color-text-muted);
}

/* Статус бейдж */
.status-badge,
.box-v2-status-badge {
    display: inline-block;
    padding: 0.31rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 12px;
    background: rgba(0, 102, 204, 0.1);
    color: var(--color-status-blue);
    border: 1px solid rgba(0, 102, 204, 0.2);
    white-space: nowrap;
}

.status-badge[data-color="blue"],
.box-v2-status-badge[data-color="blue"] {
    background: rgba(0, 102, 204, 0.1);
    color: var(--color-status-blue);
    border-color: rgba(0, 102, 204, 0.2);
}

.status-badge[data-color="green"],
.box-v2-status-badge[data-color="green"] {
    background: rgba(46, 125, 50, 0.1);
    color: #2e7d32;
    border-color: rgba(46, 125, 50, 0.2);
}

.status-badge[data-color="yellow"],
.box-v2-status-badge[data-color="yellow"] {
    background: rgba(202, 138, 4, 0.1);
    color: #ca8a04;
    border-color: rgba(202, 138, 4, 0.2);
}

.status-badge[data-color="orange"],
.box-v2-status-badge[data-color="orange"] {
    background: rgba(245, 124, 0, 0.1);
    color: #f57c00;
    border-color: rgba(245, 124, 0, 0.2);
}

.status-badge[data-color="gray"],
.box-v2-status-badge[data-color="gray"] {
    background: rgba(107, 114, 128, 0.08);
    color: #6b7280;
    border-color: rgba(107, 114, 128, 0.2);
}

.status-badge[data-color="red"],
.box-v2-status-badge[data-color="red"] {
    background: rgba(198, 40, 40, 0.1);
    color: #c62828;
    border-color: rgba(198, 40, 40, 0.2);
}

.status-badge.draft {
    background: #f3f4f6;
    color: #6b7280;
}

.status-badge.payment {
    background: #fefce8;
    color: #ca8a04;
}

.status-badge.paid {
    background: #f0fdf4;
    color: #059669;
}

/* Блок действий в карточках */
.item-actions {
    padding: 1rem 1.25rem;
    background: white;
    border-top: 1px solid #f3f4f6;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Срочное действие (отдельно от карточки) */
.item-urgent-action {
    padding: 0 1.25rem 1rem;
    background: white;
}

/* Кнопки действий */
.action-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
    min-height: 44px;
    flex: 1;
    justify-content: center;
    min-width: 120px;
    letter-spacing: -0.01em;
}

.action-button.primary {
    background: var(--color-primary-light);
    color: white;
}

.action-button.primary:hover {
    background: var(--color-primary-dark);
}

.action-button.secondary {
    background: var(--color-background);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.action-button.secondary:hover {
    background: var(--color-background-subtle);
    border-color: var(--color-accent);
    color: var(--color-primary-dark);
}

.action-button i {
    font-size: 1rem;
}

/* Empty State Card */
.empty-state-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.empty-state-visual {
    margin-bottom: 1.5rem;
}

.empty-state-icon {
    font-size: 4rem;
    color: #1F7CEC;
    margin-bottom: 1rem;
}

.empty-state-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0A284B;
    margin: 0 0 0.75rem 0;
}

.empty-state-description {
    font-size: 1rem;
    color: #64748B;
    line-height: 1.6;
    margin: 0 0 2rem 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.empty-state-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

/* Notifications */
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.notification-item {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.notification-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #9ca3af;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.notification-close-btn:hover {
    background: #f3f4f6;
    color: #6b7280;
}

.notification-icon {
    font-size: 1.5rem;
    color: #1F7CEC;
    margin-bottom: 0.75rem;
}

.notification-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0A284B;
    margin: 0 0 0.5rem 0;
}

.notification-text {
    font-size: 0.9375rem;
    color: #64748B;
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.notification-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Desktop адаптация карточек */
@media (min-width: 768px) {
    .dashboard-content {
        padding: 2rem 1.75rem 3rem;
    }
    
    .section-title {
        font-size: 2.25rem;
    }
    
    .summary-content {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        gap: 1.75rem;
    }
    
    .item-preview {
        padding-top: 70%; /* Чуть менее квадратное на desktop */
    }
    
    .empty-state-actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* Удален padding из header для унификации структуры с create-book-header */

@media (max-width: 640px) {
    .section-title {
        font-size: 1.75rem;
    }
    
    .item-info {
        padding: 0.9rem 1rem 1rem;
    }
    
    .box-fan-item {
        width: 36%;
    }

    .dashboard-content {
        padding: 1.25rem 1.25rem 2.25rem;
    }
}

/* ========================================
   Box Detail Page Styles
   Изображения как центр опыта (70-80%)
   ======================================== */

.box-detail-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

/* Back link */
.back-link {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: #1F7CEC;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
}
.back-link:hover { text-decoration: underline; color: #0A284B; }

/* Breadcrumb Navigation */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: #64748B;
}

.breadcrumb-link {
    color: #1F7CEC;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.2s ease;
}

.breadcrumb-link:hover {
    color: #0A284B;
    text-decoration: underline;
}

.breadcrumb-separator {
    color: #cbd5e1;
}

.breadcrumb-current {
    color: #0A284B;
    font-weight: 500;
}

/* Box Detail Header */
.box-detail-header {
    margin-bottom: 2rem;
}

.box-detail-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.box-detail-title-section {
    flex: 1;
}

.box-detail-title {
    font-size: 2rem;
    font-weight: 700;
    color: #0A284B;
    margin: 0 0 0.75rem 0;
    line-height: 1.2;
}

.box-detail-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.box-next {
    margin: 0.5rem 0 0 0;
    font-size: 0.9375rem;
    color: #0A284B;
}
.box-progress-link {
    margin-left: 0.5rem;
    color: #1F7CEC;
    text-decoration: none;
    font-weight: 500;
}
.box-progress-link:hover { text-decoration: underline; color: #0A284B; }

.box-last-update {
    margin: 0.25rem 0 0 0;
    font-size: 0.8125rem;
    color: #64748B;
}

.box-detail-header-actions {
    display: flex;
    gap: 0.75rem;
}

/* Box Detail Content - изображения как центр опыта */
.box-detail-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* Box Images Section - ГЛАВНЫЙ КОНТЕНТ (70-80%) */
.box-images-section {
    order: 1; /* Первый в порядке отображения */
}

.box-images-header {
    margin-bottom: 1.5rem;
}

.box-images-title {
    font-size: 1.25rem; /* Уменьшаем для принципа "Nothing over images" */
    font-weight: 600;
    color: #0A284B;
    margin: 0 0 0.25rem 0;
}

.box-images-count {
    font-size: 0.875rem;
    color: #64748B;
    margin: 0;
}

/* Удален padding из header для унификации структуры с create-book-header */

/* Box Images Grid - крупные карточки */
.box-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

@media (min-width: 640px) {
    .box-images-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 1.25rem;
    }
}

.box-image-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.box-image-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #d1d5db;
}

.box-image-preview {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Квадратные превью */
    background: white; /* Белый фон для минимализма и чтобы изображения не обрезались */
    overflow: hidden;
}

.box-image-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Полностью вмещаем изображение в квадрат */
    transition: transform 0.3s ease;
}

/* Убираем scale на hover для contain - изображения уже полностью видны */

.box-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #9ca3af;
    font-size: 2rem;
}

/* Box Status Section - ВТОРИЧНЫЙ КОНТЕНТ (20-30%) */
.box-status-section {
    order: 2; /* Второй в порядке отображения */
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.box-status-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.box-status-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0A284B;
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.box-status-title i {
    color: #1F7CEC;
}

.box-status-subtitle {
    font-size: 0.875rem;
    color: #64748B;
    margin: 0;
}

.box-status-history {
    /* Стили для истории статусов */
}

.status-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.status-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.status-item:hover {
    background-color: #f9fafb;
}

.status-item.current-status {
    background-color: #eff6ff;
    border-left: 3px solid #1F7CEC;
}

.status-content {
    flex: 1;
}

.status-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.status-name {
    font-weight: 600;
    font-size: 0.9375rem;
}

.status-date {
    font-size: 0.8125rem;
    color: #64748B;
    white-space: nowrap;
}

.status-notes {
    font-size: 0.875rem;
    color: #64748B;
    margin-top: 0.25rem;
    line-height: 1.5;
}

.status-list.hidden {
    display: none;
}

.status-toggle {
    margin-top: 1rem;
    text-align: center;
}

.toggle-button {
    background: none;
    border: none;
    color: #1F7CEC;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.toggle-button:hover {
    background-color: #eff6ff;
}

.toggle-icon {
    transition: transform 0.2s ease;
}

.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: #64748B;
}

.empty-state i {
    font-size: 2rem;
    color: #cbd5e1;
    margin-bottom: 0.5rem;
}

.empty-state p {
    margin: 0;
    font-size: 0.9375rem;
}

/* Desktop Layout - изображения слева (70-80%), статусы справа (20-30%) */
/* Удален padding из header для унификации структуры с create-book-header */

@media (min-width: 1280px) {
    .box-images-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1.5rem;
    }
    
    .box-detail-content {
        grid-template-columns: 1fr 340px; /* Изображения ~79%, статусы ~21% */
    }
    
    .box-status-section {
        min-width: 320px;
    }
}

@media (min-width: 1536px) {
    .box-detail-content {
        grid-template-columns: 1fr 380px; /* На больших экранах статусы могут быть чуть шире */
    }
    
    .box-images-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1.75rem;
    }
}

/* Image Modal (Fullscreen) */
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    cursor: pointer;
}

.image-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-modal-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
}

.image-modal-close {
    position: absolute;
    top: -2.5rem;
    right: 0;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s ease;
}

.image-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Fixed CTA (mobile) */
.box-fixed-cta {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 1000;
    background: transparent;
}

@media (min-width: 768px) {
    .box-fixed-cta { display: none; }
}

/* --- Reorder overlay --- */
.reorder-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 10% 10%, rgba(34, 45, 68, 0.55), rgba(8, 10, 16, 0.92) 60%),
        rgba(8, 10, 16, 0.92);
    display: none;
    flex-direction: column;
    z-index: 2000;
    overflow: visible;
}

.reorder-overlay.is-open {
    display: flex;
}

.reorder-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 28px;
    background: linear-gradient(90deg, rgba(18, 24, 34, 0.92), rgba(16, 20, 28, 0.65));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    z-index: 1;
    backdrop-filter: blur(14px);
}

.reorder-toolbar__spacer {
    flex: 1;
}

.reorder-btn {
    border: 0;
    border-radius: 999px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s ease, transform 0.2s ease;
    min-height: 44px;
}

.reorder-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.reorder-btn.is-active {
    background: var(--color-accent);
    opacity: 0.9;
}

.reorder-btn--primary {
    background: linear-gradient(140deg, #f1c96f, #e3a73f);
    color: #1b1609;
}

.reorder-arrows {
    display: inline-flex;
    gap: 10px;
}

.reorder-arrows .reorder-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
}

.reorder-close {
    background: rgba(255, 255, 255, 0.15);
}

.reorder-body {
    padding: 22px 28px 32px;
    overflow-y: auto;
    overflow-x: auto;
    flex: 1 1 auto;
    position: relative;
}

.reorder-grid {
    --spreads-per-row: 4;
    --spread-gap: 16px;
    --spread-pad: clamp(8px, 1.1vw, 12px);
    --spread-line: 2px;
    --slot-inner-gap: calc(var(--spread-pad) * 2 + var(--spread-line));
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--spreads-per-row), minmax(260px, 1fr));
    grid-auto-rows: minmax(160px, auto);
    gap: var(--spread-gap);
    max-width: min(96vw, 1600px);
    width: 100%;
    margin: 0 auto;
}

.reorder-spreads,
.reorder-slots {
    display: contents;
}

.reorder-spreads {
    pointer-events: none;
}

.reorder-slots {
    pointer-events: auto;
}

.reorder-indices {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--spreads-per-row), minmax(260px, 1fr));
    grid-auto-rows: minmax(160px, auto);
    gap: var(--spread-gap);
    pointer-events: none;
    z-index: 3;
}

.reorder-index-spread {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 clamp(10px, 1.2vw, 14px) clamp(10px, 1.2vw, 14px);
    align-self: end;
    transform: translateY(8px);
}

.reorder-page-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #111827;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.reorder-page-number.is-technical {
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    box-shadow: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 12px;
}

.reorder-page-number.is-empty {
    opacity: 0;
}

.reorder-spread {
    position: relative;
    grid-column: auto;
    grid-row: auto;
    padding: var(--spread-pad);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.reorder-spread::after {
    content: "";
    position: absolute;
    top: var(--spread-pad);
    bottom: var(--spread-pad);
    left: 50%;
    width: 0;
    border-right: 2px dashed rgba(255, 255, 255, 0.7);
    transform: translateX(-1px);
    pointer-events: none;
    opacity: 0.85;
}

.reorder-slot {
    position: relative;
    background: #ffffff;
    border-radius: var(--radius-card);
    aspect-ratio: 1 / 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: grab;
    border: 1px solid rgba(0, 0, 0, 0.08);
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    z-index: 2;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.reorder-overlay[data-reorder-layout="layered"] .reorder-slot {
    width: calc(50% - (var(--slot-inner-gap) / 2));
    justify-self: start;
    align-self: center;
}

.reorder-overlay[data-reorder-layout="layered"] .reorder-slot.is-right {
    justify-self: end;
}

.reorder-overlay[data-reorder-layout="flat"] .reorder-spreads {
    display: none;
}

.reorder-overlay[data-reorder-layout="flat"] .reorder-grid {
    --pages-per-row: calc(var(--spreads-per-row) * 2);
    grid-template-columns: repeat(var(--pages-per-row), minmax(150px, 1fr));
    grid-auto-rows: minmax(150px, auto);
}

.reorder-overlay[data-reorder-layout="flat"] .reorder-indices {
    grid-template-columns: repeat(var(--spreads-per-row), minmax(260px, 1fr));
    grid-auto-rows: minmax(150px, auto);
}

.reorder-overlay[data-reorder-layout="flat"] .reorder-slot {
    width: 100%;
    justify-self: stretch;
}

.reorder-overlay[data-reorder-layout="flat"] .reorder-slot.is-left::before {
    content: "";
    position: absolute;
    inset: calc(var(--spread-pad) * -1);
    width: calc(200% + var(--spread-gap) + (var(--spread-pad) * 2));
    height: calc(100% + (var(--spread-pad) * 2));
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    z-index: -1;
}

.reorder-overlay[data-reorder-layout="flat"] .reorder-slot.is-left::after {
    content: "";
    position: absolute;
    top: calc(var(--spread-pad) * -1);
    bottom: calc(var(--spread-pad) * -1);
    left: calc(100% + (var(--spread-gap) / 2));
    width: 0;
    border-right: 2px dashed rgba(255, 255, 255, 0.7);
    transform: translateX(-1px);
    pointer-events: none;
    opacity: 0.85;
}

.reorder-slot img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: 0;
}

.reorder-slot.is-empty {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    cursor: default;
    box-shadow: none;
}

.reorder-slot.is-technical {
    border: 1px dashed rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
    cursor: not-allowed !important;
    opacity: 0.6;
}

.reorder-slot.is-technical:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Блокировка drag для технической страницы */
.sortable-ghost.is-technical {
    display: none !important;
}

.reorder-empty {
    font-size: 12px;
    font-weight: 600;
}

.reorder-index {
    position: absolute;
    top: clamp(6px, 0.9vw, 8px);
    left: clamp(6px, 0.9vw, 8px);
    font-size: clamp(10px, 1vw, 12px);
    font-weight: 700;
    color: #4b5563;
    background: #f3f4f6;
    padding: clamp(3px, 0.5vw, 4px) clamp(6px, 0.9vw, 8px);
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
    z-index: 3;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.reorder-select-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(13, 60, 116, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: transparent;
    background: rgba(255, 255, 255, 0.85);
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.reorder-overlay.is-selecting .reorder-select-toggle {
    opacity: 1;
}

.reorder-slot.is-selected {
    outline: 3px solid var(--color-accent);
    outline-offset: -3px;
}

.reorder-slot.is-selected .reorder-select-toggle {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.reorder-slot.is-disabled .reorder-select-toggle {
    opacity: 0;
}

@media (min-width: 1600px) {
    .reorder-grid {
        --spreads-per-row: 5;
    }
}

@media (max-width: 1399px) {
    .reorder-grid {
        --spreads-per-row: 4;
        max-width: min(94vw, 1400px);
    }
    .reorder-indices {
        grid-template-columns: repeat(var(--spreads-per-row), minmax(260px, 1fr));
    }
}

@media (max-width: 1100px) {
    .reorder-grid {
        --spreads-per-row: 3;
        max-width: min(94vw, 1100px);
    }
    .reorder-indices {
        grid-template-columns: repeat(var(--spreads-per-row), minmax(260px, 1fr));
    }
}

@media (max-width: 850px) {
    .reorder-grid {
        --spreads-per-row: 3;
        grid-template-columns: repeat(var(--spreads-per-row), minmax(220px, 1fr));
        max-width: min(94vw, 900px);
    }
    .reorder-indices {
        grid-template-columns: repeat(var(--spreads-per-row), minmax(220px, 1fr));
    }
    .reorder-overlay[data-reorder-layout="flat"] .reorder-grid {
        grid-template-columns: repeat(var(--pages-per-row), minmax(130px, 1fr));
    }
}

@media (max-width: 700px) {
    .reorder-grid {
        --spreads-per-row: 2;
        grid-template-columns: repeat(var(--spreads-per-row), minmax(210px, 1fr));
        max-width: min(94vw, 720px);
    }
    .reorder-indices {
        grid-template-columns: repeat(var(--spreads-per-row), minmax(210px, 1fr));
    }
    .reorder-overlay[data-reorder-layout="flat"] .reorder-grid {
        grid-template-columns: repeat(var(--pages-per-row), minmax(120px, 1fr));
    }
}

@media (max-width: 540px) {
    .reorder-body {
        padding: 18px 16px 28px;
    }
    .reorder-grid {
        --spreads-per-row: 2; /* держим минимум 2 разворота в ширину на мобилке */
        grid-template-columns: repeat(var(--spreads-per-row), minmax(180px, 1fr));
        max-width: min(94vw, 640px);
    }
    .reorder-indices {
        grid-template-columns: repeat(var(--spreads-per-row), minmax(180px, 1fr));
    }
    .reorder-overlay[data-reorder-layout="flat"] .reorder-grid {
        grid-template-columns: repeat(var(--pages-per-row), minmax(110px, 1fr));
    }
    .reorder-page-number {
        font-size: 11px;
        min-width: 22px;
        padding: 3px 8px;
    }
}

@media (max-width: 480px) {
    .reorder-grid {
        grid-template-columns: repeat(var(--spreads-per-row), minmax(160px, 1fr));
        max-width: min(96vw, 560px);
    }
}
/**
 * Dashboard V2 Styles
 * Mobile-first, image-centric, minimal design
 * Based on Guarti UX principles
 * 
 * All styles are scoped under .guarti-v2 to avoid conflicts with old styles
 */

.guarti-v2 {
    /* Reset and base styles */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    touch-action: manipulation;
}

.guarti-v2 * {
    touch-action: manipulation;
}

/* ========================================
   V2: Box Detail Page
   ======================================== */

.guarti-v2 .box-v2-container {
    min-height: 100vh;
    background: #ffffff;
    padding: var(--spacing-md);
    padding-bottom: 100px; /* Space for fixed CTA */
    max-width: 1400px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .guarti-v2 .box-v2-container {
        padding: var(--spacing-sm);
        padding-bottom: 80px;
    }
}

/* Header with Box Name, Status and Actions */
/* Старые стили удалены - теперь используется единый шаблон .page-header из page-header-unified.css */
/* Все стили для .box-v2-status-badge, .box-v2-actions-*, .box-v2-action-link перенесены в page-header-unified.css */

/* Actions Section - Above Gallery */
.guarti-v2 .box-v2-actions {
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.guarti-v2 .actions-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.guarti-v2 .action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #ffffff;
    color: #1a1a1a;
}

.guarti-v2 .action-button.primary {
    background: #0066cc;
    color: #ffffff;
    border-color: #0066cc;
}

.guarti-v2 .action-button:hover {
}

.guarti-v2 .action-button.primary:hover {
    background: #0052a3;
}

.guarti-v2 .action-button:active {
    transform: translateY(0);
}

.guarti-v2 .action-button i {
    font-size: 16px;
}

/* Images Preview Section (not gallery) */
.guarti-v2 .box-v2-images-section {
    max-width: 100%;
    margin: 0 0 var(--spacing-xl);
    padding: var(--spacing-xl) 0 0;
    border-top: 1px solid var(--color-border);
}

.guarti-v2 .box-v2-images-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.guarti-v2 .box-v2-images-title-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.guarti-v2 .box-v2-images-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0;
    line-height: var(--line-height-heading);
}

.guarti-v2 .box-v2-images-count {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.guarti-v2 .box-v2-images-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: var(--spacing-xs);
    position: relative;
    width: 100%;
    grid-template-rows: repeat(3, 100px);
    max-height: calc(100px * 3 + var(--spacing-sm) * 2);
}

.guarti-v2 .box-v2-images-preview.is-expanded {
    overflow: visible;
    padding-bottom: 0;
    max-height: none;
    grid-template-rows: none;
}

.guarti-v2 .box-v2-images-preview::-webkit-scrollbar {
    height: 4px;
}

.guarti-v2 .box-v2-images-preview::-webkit-scrollbar-track {
    background: transparent;
}

.guarti-v2 .box-v2-images-preview::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 2px;
}

/* Desktop: 2 rows grid, no horizontal scroll, fade-out down */
@media (min-width: 641px) and (max-width: 960px) {
    .guarti-v2 .box-v2-images-preview {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        grid-template-rows: repeat(2, 100px);
        overflow: hidden;
        max-height: calc(100px * 2 + var(--spacing-sm));
        position: relative;
        padding-bottom: 0;
    }

    .guarti-v2 .box-v2-images-preview.is-expanded {
        overflow: visible;
        grid-template-rows: none;
    }
}

/* На десктопе (от 961px) показываем все изображения сразу */
@media (min-width: 961px) {
    .guarti-v2 .box-v2-images-preview {
        grid-template-rows: none; /* Убираем ограничение по строкам */
        max-height: none;
        overflow: visible;
    }
}

.guarti-v2 .box-v2-image-preview-item {
    width: 100%;
    height: 100px;
    background: var(--color-background-subtle);
    border-radius: var(--radius-card);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.guarti-v2 .box-v2-image-preview-item.is-hidden {
    display: none;
}

/* Скрываем дополнительные изображения на мобильных устройствах */
.guarti-v2 .box-v2-image-preview-item.is-hidden-mobile {
    display: none;
}

@media (min-width: 961px) {
    .guarti-v2 .box-v2-image-preview-item.is-hidden-mobile {
        display: block;
    }
}

.guarti-v2 .box-v2-image-preview-item:active {
    transform: scale(0.95);
}

.guarti-v2 .box-v2-image-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--color-background);
}

.guarti-v2 .box-v2-images-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-primary-light);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-button);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-base);
}

.guarti-v2 .box-v2-images-view-all-btn:hover {
    background: var(--color-accent-bg-medium);
    border-color: var(--color-accent);
    color: var(--color-primary);
    box-shadow: 0 1px 4px rgba(31, 124, 236, 0.25);
}

.guarti-v2 .box-v2-images-actions {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.guarti-v2 .box-v2-create-book-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-primary-light);
    color: #ffffff;
    text-decoration: none;
    border-radius: var(--radius-button);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    transition: var(--transition-base);
    border: none;
    cursor: pointer;
}

.guarti-v2 .box-v2-create-book-btn:hover {
    background: var(--color-primary-dark);
    color: #ffffff;
}

.guarti-v2 .box-v2-create-book-btn i {
    font-size: 1rem;
}

.guarti-v2 .box-v2-images-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xxl) var(--spacing-md);
    color: var(--color-text-muted);
}

.guarti-v2 .box-v2-images-empty i {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.guarti-v2 .box-v2-images-empty p {
    margin: 0;
    font-size: var(--font-size-body);
}

/* Status Section */
.guarti-v2 .box-v2-status-section {
    max-width: 100%;
    margin: 0 0 var(--spacing-xl);
    padding: 0;
}

.guarti-v2 .box-v2-section-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-md);
    line-height: var(--line-height-heading);
}

.guarti-v2 .box-v2-status-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.guarti-v2 .box-v2-status-card {
    padding: 0;
}

@media (max-width: 640px) {
    .guarti-v2 .box-v2-status-card {
        padding: 0;
    }
}

/* Progress Bar */
.guarti-v2 .box-v2-status-progress {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.guarti-v2 .box-v2-status-current-text {
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
    line-height: var(--line-height-heading);
}

@media (max-width: 640px) {
    .guarti-v2 .box-v2-status-current-text {
        font-size: 18px;
    }
}

.guarti-v2 .box-v2-status-inline-label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-right: var(--spacing-xs);
}

.guarti-v2 .box-v2-status-next-step {
    margin: 0;
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    line-height: var(--line-height-body);
}


.guarti-v2 .box-v2-status-summary {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-width: 720px;
    padding-bottom: 0;
}

.guarti-v2 .box-v2-status-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-sm);
}

.guarti-v2 .box-v2-status-summary-item {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
}

.guarti-v2 .box-v2-status-summary-brick {
    width: var(--summary-brick-width, 12px);
    height: 12px;
    border-radius: 999px;
    margin-top: 2px;
    flex-shrink: 0;
    background: var(--color-background-light);
    border: 1px solid var(--color-border);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.guarti-v2 .box-v2-status-summary-brick.is-current {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(31, 124, 236, 0.25);
}

.guarti-v2 .box-v2-status-summary-brick.is-next {
    background: var(--color-background-light);
    border-color: var(--color-border);
}

.guarti-v2 .box-v2-status-summary-item.is-current .box-v2-status-summary-label,
.guarti-v2 .box-v2-status-summary-item.is-current .box-v2-status-summary-value {
    color: var(--color-text);
}

.guarti-v2 .box-v2-status-summary-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.guarti-v2 .box-v2-status-summary-label::after {
    content: ":";
}

.guarti-v2 .box-v2-status-summary-value {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

@media (max-width: 640px) {
    .guarti-v2 .box-v2-status-summary-item {
        flex-direction: row;
        align-items: baseline;
        gap: var(--spacing-xs);
    }
}

.guarti-v2 .box-v2-progress-bar-container {
    position: relative;
    padding: var(--spacing-md) 0 0;
}

.guarti-v2 .box-v2-progress-tiles {
    display: flex;
    gap: var(--spacing-md);
}

.guarti-v2 .box-v2-progress-stage {
    flex: 1;
    display: flex;
    gap: var(--spacing-xs);
}

.guarti-v2 .box-v2-progress-brick {
    flex: 1;
    height: 12px;
    border-radius: 999px;
    background: var(--color-background-light);
    border: 1px solid var(--color-border);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 0;
}

.guarti-v2 .box-v2-progress-brick.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.guarti-v2 .box-v2-progress-brick.is-current {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.guarti-v2 .box-v2-progress-brick.is-selected {
    box-shadow: 0 0 0 2px rgba(31, 124, 236, 0.25);
}

.guarti-v2 .box-v2-progress-brick i {
    font-size: 6px;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transition: opacity 0.2s ease;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    pointer-events: none;
}

/* Стрелки только на пройденных этапах (темно-синих), но не на текущем */
.guarti-v2 .box-v2-progress-brick.is-active:not(.is-current) i {
    opacity: 1;
}

.guarti-v2 .box-v2-progress-brick.is-active:not(.is-current):hover i {
    opacity: 1;
}

/* Для текущего этапа и неактивных bricks стрелка не видна */
.guarti-v2 .box-v2-progress-brick.is-current i,
.guarti-v2 .box-v2-progress-brick:not(.is-active) i {
    opacity: 0;
}

.guarti-v2 .box-v2-progress-labels {
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    gap: var(--spacing-md);
}

.guarti-v2 .box-v2-progress-label {
    flex: 1;
    text-align: left;
}

.guarti-v2 .box-v2-progress-label-text {
    display: block;
    font-size: 12px;
    line-height: 1.3;
    color: var(--color-text-secondary);
}

.guarti-v2 .box-v2-progress-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -12px);
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 6px 10px;
    box-shadow: 0 8px 20px rgba(10, 40, 75, 0.12);
    min-width: 120px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 1000 !important; /* Поверх карточек box-v3 */
}

.guarti-v2 .box-v2-progress-tooltip.is-visible {
    opacity: 1;
    transform: translate(-50%, -18px);
}

.guarti-v2 .box-v2-progress-tooltip-title {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-align: center;
}


@media (max-width: 640px) {
    .guarti-v2 .box-v2-progress-tiles {
        gap: var(--spacing-sm);
    }

    .guarti-v2 .box-v2-progress-stage {
        gap: 3px;
    }

    .guarti-v2 .box-v2-progress-brick {
        height: 10px;
    }

    .guarti-v2 .box-v2-progress-brick i {
        font-size: 5px;
        left: 50%;
        top: 50%;
        right: auto;
        transform: translate(-50%, -50%);
    }

    .guarti-v2 .box-v2-status-summary-brick {
        height: 10px;
    }

    .guarti-v2 .box-v2-progress-labels {
        gap: var(--spacing-sm);
    }

    .guarti-v2 .box-v2-progress-label-text {
        font-size: 11px;
    }
}

.guarti-v2 .box-v2-status-label {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.guarti-v2 .box-v2-status-updated {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.guarti-v2 .box-v2-status-value {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-text);
}

/* Meta Information - Дата обновления и ссылка на историю */
.guarti-v2 .box-v2-status-meta {
    margin-top: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .guarti-v2 .box-v2-status-meta {
        margin-top: 0.8rem;
    }
}

/* Стили для кнопки "Ver historial" в стиле profile.css .link-button */
.guarti-v2 .box-v2-status-history-toggle,
.guarti-v2 .link-button.box-v2-status-history-toggle {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-text-secondary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.guarti-v2 .box-v2-status-history-toggle:hover,
.guarti-v2 .link-button.box-v2-status-history-toggle:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.guarti-v2 .box-v2-status-history {
    margin-top: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.25s ease;
}

.guarti-v2 .box-v2-status-history.is-open {
    max-height: 800px;
    opacity: 1;
}

.guarti-v2 .box-v2-status-history-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 12px;
    color: var(--color-text-secondary);
}

.guarti-v2 .box-v2-status-history-brick {
    width: var(--summary-brick-width, 12px);
    height: 8px;
    border-radius: 999px;
    background: var(--color-background-light);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}

.guarti-v2 .box-v2-status-history-brick.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.guarti-v2 .box-v2-status-history-brick.is-current {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.guarti-v2 .box-v2-status-history-date {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
}

.guarti-v2 .box-v2-status-history-text {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

.guarti-v2 .box-v2-status-history-item:not(.is-current) .box-v2-status-history-text {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
}

/* Progress Legend - Расшифровка этапов */
.guarti-v2 .box-v2-progress-legend {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.guarti-v2 .box-v2-progress-legend-item {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    font-size: var(--font-size-body);
    line-height: 1.5;
}

.guarti-v2 .box-v2-progress-legend-badge {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    min-width: 80px;
}

.guarti-v2 .box-v2-progress-legend-text {
    color: var(--color-text-secondary);
}

@media (max-width: 640px) {
    .guarti-v2 .box-v2-progress-legend-item {
        flex-direction: column;
        gap: 2px;
    }
    
    .guarti-v2 .box-v2-progress-legend-badge {
        min-width: auto;
    }
}

/* Logistics Section */
.guarti-v2 .box-v2-logistics-section {
    max-width: 100%;
    margin: 0 0 var(--spacing-xl);
    padding: var(--spacing-xl) 0 0;
    border-top: 1px solid var(--color-border);
}

.guarti-v2 .box-v2-logistics-content {
    /* Styles for logistics content */
}

.guarti-v2 .box-v2-logistics-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--color-text-muted);
    text-align: center;
}

.guarti-v2 .box-v2-logistics-empty i {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.guarti-v2 .box-v2-logistics-empty p {
    margin: 0;
    font-size: var(--font-size-body);
}

/* Legacy gallery-grid styles (kept for backward compatibility if needed) */
.guarti-v2 .gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.guarti-v2 .gallery-item {
    position: relative;
    aspect-ratio: 1;
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.guarti-v2 .gallery-item:active {
    transform: scale(0.98);
}

.guarti-v2 .gallery-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: white;
}

.guarti-v2 .gallery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #999;
}

.guarti-v2 .gallery-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.guarti-v2 .gallery-empty p {
    margin: 0;
    font-size: 16px;
}

/* Progress Timeline - Все стадии процесса с улучшенным использованием ширины */
.guarti-v2 .box-v2-progress {
    padding: 40px 20px 48px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 40px;
    scroll-margin-top: 20px;
    background: #ffffff;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 641px) {
    .guarti-v2 .box-v2-progress {
        padding: 40px 40px 48px;
    }
}

.guarti-v2 .progress-title {
    font-size: 14px;
    font-weight: 600;
    color: #0A284B;
    margin: 0 0 32px 0;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    line-height: 1.4;
}

.guarti-v2 .progress-timeline {
    position: relative;
    padding: 0 0 22.5px 0; /* Padding снизу для линии до последнего маркера */
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    max-height: none;
    overflow-y: visible;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

/* Единая вертикальная линия для всего timeline */
.guarti-v2 .progress-timeline::before {
    content: '';
    position: absolute;
    left: 75px;
    top: 22.5px; /* Начинается от первого маркера */
    bottom: 0; /* До конца контейнера (включая padding-bottom) */
    width: 2px;
    background: rgba(0, 0, 0, 0.08); /* Однотонный цвет без градиента */
    transform: translateX(-50%);
    z-index: 1;
}

/* Зеленая часть линии для пройденных этапов (будет наложена через ::after) */
.guarti-v2 .progress-timeline::after {
    content: '';
    position: absolute;
    left: 75px;
    top: 22.5px;
    width: 2px;
    background: rgba(46, 125, 50, 0.2); /* Зеленая часть для пройденных этапов */
    transform: translateX(-50%);
    z-index: 1;
    /* Высота будет установлена через CSS переменную или JavaScript */
    /* Пока оставляем без bottom, чтобы не было видно до полной реализации */
    display: none; /* Временно скрыта, пока не реализуем логику */
}

.guarti-v2 .progress-timeline-empty {
    padding: 40px 0;
    text-align: center;
    color: #999;
    font-size: 14px;
}

.guarti-v2 .timeline-item {
    position: relative;
    padding-left: 100px;
    padding-bottom: 24px;
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    min-height: 40px;
    box-sizing: border-box;
}

.guarti-v2 .timeline-item:last-child {
    padding-bottom: 0;
}

/* Убираем индивидуальные линии у элементов - используем общую линию для timeline */

/* Дата слева от линии - выровнена по первой строке текста */
.guarti-v2 .timeline-date-left {
    position: absolute;
    left: 0;
    top: 22.5px; /* padding-top (12px) + середина первой строки (15px * 1.4 / 2 = 10.5px) = 22.5px */
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
    font-weight: 400;
    letter-spacing: 0.1px;
    white-space: nowrap;
    width: 60px;
    text-align: right;
    padding-right: 12px;
    line-height: 1.2;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.guarti-v2 .timeline-item.current .timeline-date-left {
    color: #2e7d32;
    font-weight: 500;
}

/* Стильные маркеры - выровнены по первой строке текста */
.guarti-v2 .timeline-marker {
    position: absolute;
    left: 75px; /* Центр линии */
    top: 22.5px; /* padding-top (12px) + середина первой строки (15px * 1.4 / 2 = 10.5px) = 22.5px */
    transform: translate(-50%, -50%); /* Центрирование по горизонтали, смещение по вертикали */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid rgba(0, 102, 204, 0.3);
    transition: all 0.2s ease;
    z-index: 3; /* Маркеры должны быть поверх линии */
    margin: 0;
    box-sizing: border-box;
}

/* Пройденные этапы - прозрачные с зеленой обводкой */
.guarti-v2 .timeline-marker.passed,
.guarti-v2 .timeline-item.passed .timeline-marker {
    background: rgba(46, 125, 50, 0.1);
    border-color: rgba(46, 125, 50, 0.5);
    width: 12px;
    height: 12px;
    left: 75px;
    top: 22.5px; /* padding-top (12px) + середина первой строки (10.5px) = 22.5px */
    transform: translate(-50%, -50%);
    box-shadow: none;
}

/* Будущие этапы - голубые */
.guarti-v2 .timeline-marker[data-color="blue"]:not(.current):not(.passed),
.guarti-v2 .timeline-item.future .timeline-marker {
    background: rgba(0, 102, 204, 0.1);
    border-color: rgba(0, 102, 204, 0.4);
}

/* Текущий статус - полностью зеленый закрашенный */
.guarti-v2 .timeline-item.current .timeline-marker,
.guarti-v2 .timeline-marker.current {
    width: 14px;
    height: 14px;
    left: 75px; /* Центр линии */
    top: 22.5px; /* padding-top (12px) + середина первой строки (10.5px) = 22.5px */
    transform: translate(-50%, -50%); /* Центрирование по горизонтали, смещение по вертикали */
    border-width: 2px;
    background: #2e7d32;
    border-color: #2e7d32;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
}

.guarti-v2 .timeline-marker[data-color="green"].current {
    background: #2e7d32;
    border-color: #2e7d32;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
}

.guarti-v2 .timeline-marker[data-color="orange"].current {
    background: #f57c00;
    border-color: #f57c00;
    box-shadow: 0 0 0 3px rgba(245, 124, 0, 0.15);
}

.guarti-v2 .timeline-marker[data-color="red"].current {
    background: #c62828;
    border-color: #c62828;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15);
}

.guarti-v2 .timeline-marker[data-color="blue"].current {
    background: #0066cc;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}

.guarti-v2 .timeline-content {
    padding-top: 0;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0;
    line-height: 1.4;
}

.guarti-v2 .timeline-status-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 21px;
}

.guarti-v2 .timeline-status {
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.4;
    letter-spacing: -0.2px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    padding: 0;
}

.guarti-v2 .timeline-item.current .timeline-status {
    font-weight: 600;
    color: #2e7d32;
}

.guarti-v2 .timeline-item.future .timeline-status {
    color: #999;
}


.guarti-v2 .timeline-notes {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin-top: 6px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

@media (min-width: 641px) {
    .guarti-v2 .box-v2-progress {
        padding: 40px 40px 48px;
    }

    .guarti-v2 .timeline-item {
        padding-left: 120px;
    }

    /* Общая линия для desktop */
    .guarti-v2 .progress-timeline::before {
        left: 95px;
    }
    
    .guarti-v2 .progress-timeline::after {
        left: 95px;
    }

    .guarti-v2 .timeline-date-left {
        width: 80px;
    }

    .guarti-v2 .timeline-marker {
        left: 95px;
        top: 22.5px;
        transform: translate(-50%, -50%);
    }

    .guarti-v2 .timeline-marker.passed,
    .guarti-v2 .timeline-item.passed .timeline-marker {
        left: 95px;
        top: 22.5px;
        transform: translate(-50%, -50%);
    }

    .guarti-v2 .timeline-item.current .timeline-marker,
    .guarti-v2 .timeline-marker.current {
        left: 95px;
        top: 22.5px;
        transform: translate(-50%, -50%);
    }

    .guarti-v2 .timeline-date-left {
        top: 22.5px;
    }
}

/* Fixed CTA */
.guarti-v2 .cta-spacer {
    height: 80px;
}

.guarti-v2 .box-v2-cta-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

.guarti-v2 .cta-button-v2 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: #0066cc;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.guarti-v2 .cta-button-v2:hover {
    background: #0052a3;
    /* Убрано transform и box-shadow согласно стандартизации hover-эффектов для кнопок */
}

.guarti-v2 .cta-button-v2:active {
    transform: translateY(0);
}

/* Fullscreen Gallery Modal */
/* Когда галерея открыта — тёмный фон у html/body, чтобы на iOS в safe area не просвечивал белый */
html.gallery-fullscreen-open,
body.gallery-fullscreen-open {
    background: #080a10 !important;
}
.guarti-v2 .gallery-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10000 !important;
    background: radial-gradient(circle at 10% 10%, rgba(34, 45, 68, 0.55), rgba(8, 10, 16, 0.92) 60%),
        rgba(8, 10, 16, 0.92);
    display: none;
    flex-direction: column;
    touch-action: manipulation; /* Запрещаем зум при двойном тапе на всем модальном окне */
    -webkit-tap-highlight-color: transparent; /* Убираем подсветку на iOS */
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 640px) {
    .guarti-v2 .gallery-modal {
        min-height: 100dvh;
        min-height: -webkit-fill-available;
    }
}

.guarti-v2 .gallery-modal.active {
    display: flex !important;
}

.guarti-v2 .gallery-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    background: #000000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 0;
    z-index: 10001 !important; /* Поверх галереи, но ниже навигации */
}

/* Исправление для мобильных устройств (iOS Safari и другие) - убираем backdrop-filter */
/* На мобильных backdrop-filter может делать фон прозрачным даже с background: #000000 */
@media (max-width: 640px) {
    .guarti-v2 .gallery-modal-header {
        background: #000000 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Специальное правило для iOS Safari - отключаем backdrop-filter (если класс ios-safari есть) */
html.ios-safari .guarti-v2 .gallery-modal-header {
    background: #000000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Исправление для iOS - backdrop-filter может делать фон прозрачным */
/* Используем более непрозрачный фон когда backdrop-filter активен (только на desktop) */
@media (min-width: 641px) {
    @supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
        .guarti-v2 .gallery-modal-header {
            background: rgba(0, 0, 0, 0.98);
        }
    }
}

/* Fallback для браузеров без поддержки backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
        .guarti-v2 .gallery-modal-header {
        background: #000000 !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.guarti-v2 .gallery-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 1400px;
    min-width: 0;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

.guarti-v2 .gallery-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.guarti-v2 .gallery-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.guarti-v2 .gallery-counter {
    color: white;
    font-size: 16px;
    font-weight: 500;
}

/* Rotate controls - в header */
.guarti-v2 .gallery-rotate-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
    justify-content: center;
    flex-shrink: 0;
}

/* Группа правых действий (кнопки help и close) */
.guarti-v2 .gallery-header-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.guarti-v2 .gallery-rotate-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.guarti-v2 .gallery-rotate-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.guarti-v2 .gallery-rotate-btn:active {
    transform: scale(0.95);
}

.guarti-v2 .gallery-modal-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
    z-index: 1; /* Базовый уровень для контента, ниже хедера */
    touch-action: manipulation; /* Запрещаем зум при двойном тапе */
    -webkit-tap-highlight-color: transparent; /* Убираем подсветку на iOS */
}

.guarti-v2 .gallery-modal-image-container {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1; /* Ниже кнопок навигации */
    touch-action: manipulation; /* Запрещаем зум при двойном тапе */
    -webkit-tap-highlight-color: transparent; /* Убираем подсветку на iOS */
}

.guarti-v2 .gallery-modal-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    touch-action: manipulation; /* Запрещаем зум при двойном тапе */
    -webkit-tap-highlight-color: transparent; /* Убираем подсветку на iOS */
    -webkit-user-select: none; /* Запрещаем выделение текста на iOS */
    user-select: none; /* Запрещаем выделение текста */
}

/* Нижний бар лайтбокса — чёрный как хедер (особенно для iOS safe-area) */
.guarti-v2 .gallery-modal-footer {
    flex-shrink: 0;
    min-height: max(20px, env(safe-area-inset-bottom, 0px));
    padding: 16px 20px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    background: #000000;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 640px) {
    .guarti-v2 .gallery-modal-footer {
        background: #000000 !important;
        /* На iOS гарантируем высоту под home indicator (обычно ~34px) */
        min-height: max(34px, env(safe-area-inset-bottom, 34px));
        padding-bottom: max(16px, env(safe-area-inset-bottom, 34px));
    }
}

.guarti-v2 .gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10002 !important; /* Поверх изображения и хедера */
    pointer-events: auto; /* Убеждаемся, что клики работают */
    -webkit-tap-highlight-color: transparent; /* Убираем подсветку на iOS */
}

.guarti-v2 .gallery-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.guarti-v2 .gallery-prev {
    left: 20px;
}

.guarti-v2 .gallery-next {
    right: 20px;
}


/* ========================================
   Responsive: Mobile
   ======================================== */

@media (max-width: 640px) {
    .guarti-v2 .gallery-modal-header {
        padding: 12px 16px;
    }

    .gallery-header-center,
    .guarti-v2 .gallery-header-center {
        gap: 12px;
    }

    .gallery-rotate-btn,
    .guarti-v2 .gallery-rotate-btn {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .gallery-counter,
    .guarti-v2 .gallery-counter {
        font-size: 14px;
    }

    .guarti-v2 .gallery-nav {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .gallery-prev,
    .guarti-v2 .gallery-prev {
        left: 12px;
    }

    .guarti-v2 .gallery-next {
        right: 12px;
    }
}

/* ========================================
   Responsive: Tablet & Desktop
   ======================================== */

@media (min-width: 641px) {
    .guarti-v2 .box-v2-container {
        padding-bottom: 0;
    }

    /* .box-v2-title-inline удален - используется .page-header-title.card-title из page-header-unified.css */

    .guarti-v2 .box-v2-gallery {
        padding: 32px 40px;
    }

    .guarti-v2 .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .guarti-v2 .gallery-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .guarti-v2 .gallery-item:active {
        transform: translateY(0);
    }

    .guarti-v2 .box-v2-progress {
        padding: 0 40px 48px;
    }

    /* Desktop: CTA не фиксированный */
    .guarti-v2 .box-v2-cta-fixed {
        position: static;
        max-width: 400px;
        margin: 32px auto;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .guarti-v2 .cta-spacer {
        display: none;
    }
}

/* Удален padding из header для унификации структуры с create-book-header */

/* ========================================
   Help Button & Modal (Кнопка помощи с пояснялкой)
   ======================================== */

/* Кнопка помощи */
.guarti-v2 .help-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.guarti-v2 .help-icon {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 18px;
    font-weight: 600;
    font-style: italic;
    line-height: 1;
    opacity: 0.9;
    letter-spacing: 0;
}

.guarti-v2 .help-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.guarti-v2 .help-btn:hover .help-icon {
    opacity: 1;
}

/* Модальное окно помощи (Bottom Sheet) */
.guarti-v2 .help-modal {
    position: fixed;
    inset: 0;
    z-index: 10003 !important; /* Выше галереи и навигации для help modal галереи */
    display: none;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.guarti-v2 .help-modal.is-open {
    display: flex !important;
    pointer-events: auto;
}

.help-modal-overlay,
.guarti-v2 .help-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.guarti-v2 .help-modal.is-open .help-modal-overlay {
    opacity: 1;
}

.guarti-v2 .help-modal-content {
    position: relative;
    background: #1a1d26;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.guarti-v2 .help-modal.is-open .help-modal-content {
    transform: translateY(0);
}

.guarti-v2 .help-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.help-modal-title,
.guarti-v2 .help-modal-title {
    color: white;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.guarti-v2 .help-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.help-modal-close:hover,
.guarti-v2 .help-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.guarti-v2 .help-modal-body {
    padding: var(--spacing-xl);
    overflow-y: auto;
    flex: 1;
}

.help-list,
.guarti-v2 .help-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.guarti-v2 .help-list li {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-link);
    line-height: var(--line-height-body);
    padding-left: var(--spacing-xl);
    position: relative;
}

.help-list li::before,
.guarti-v2 .help-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
    line-height: 1;
}

.guarti-v2 .help-modal-footer {
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.help-modal-btn,
.guarti-v2 .help-modal-btn {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-xl);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-button);
    color: white;
    font-size: var(--font-size-link);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-base);
}

.guarti-v2 .help-modal-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Адаптивность для мобильных */
@media (max-width: 640px) {
    .help-modal-content,
    .guarti-v2 .help-modal-content {
        max-width: 100%;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
    
    .guarti-v2 .help-modal-header {
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .help-modal-title,
    .guarti-v2 .help-modal-title {
        font-size: 18px; /* Немного меньше для мобильных - оставляем как есть */
    }
    
    .guarti-v2 .help-modal-body {
        padding: var(--spacing-lg);
    }
    
    .guarti-v2 .help-list li {
        font-size: 14px; /* Немного меньше для мобильных - оставляем как есть */
    }
    
    .guarti-v2 .help-modal-footer {
        padding: var(--spacing-md) var(--spacing-lg);
    }
}