/* ===================================================================
   Design Editor — Admin visual customization toolbar & overlay
   Uses design system variables from foundations.css
   =================================================================== */

/* ── Toolbar ──────────────────────────────────────────────────────── */

.design-editor-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(61, 53, 48, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(181, 196, 177, 0.25);
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-light);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.design-editor-toolbar--active {
    background: rgba(61, 53, 48, 0.92);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

/* ── Label ────────────────────────────────────────────────────────── */

.design-editor-toolbar__label {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gold);
    white-space: nowrap;
    user-select: none;
    margin-right: 4px;
}

/* ── Separator ────────────────────────────────────────────────────── */

.design-editor-toolbar__separator {
    width: 1px;
    height: 24px;
    background: rgba(181, 196, 177, 0.3);
    flex-shrink: 0;
}

/* ── Spacer (pushes action buttons to the right) ─────────────────── */

.design-editor-toolbar__spacer {
    flex: 1 1 auto;
    min-width: 8px;
}

/* ── Button groups ────────────────────────────────────────────────── */

.design-editor-toolbar__group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.design-editor-toolbar__group--actions {
    gap: 8px;
}

/* ── Buttons (base) ───────────────────────────────────────────────── */

.design-editor-toolbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid rgba(181, 196, 177, 0.35);
    border-radius: 30px;
    background: transparent;
    color: var(--color-text-light);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    user-select: none;
    line-height: 1.2;
}

.design-editor-toolbar__btn:hover:not(:disabled) {
    background: rgba(181, 196, 177, 0.15);
    border-color: rgba(181, 196, 177, 0.5);
}

.design-editor-toolbar__btn:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.design-editor-toolbar__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Icon inside buttons ──────────────────────────────────────────── */

.design-editor-toolbar__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── Button text (hidden on small screens) ────────────────────────── */

.design-editor-toolbar__btn-text {
    display: inline;
}

/* ── Toggle button ────────────────────────────────────────────────── */

.design-editor-toolbar__btn--toggle {
    border-color: rgba(181, 196, 177, 0.4);
    background: rgba(181, 196, 177, 0.08);
}

.design-editor-toolbar__btn--toggle:hover {
    background: rgba(181, 196, 177, 0.2);
}

.design-editor-toolbar__btn--toggle-on {
    background: var(--color-forest);
    border-color: var(--color-sage);
    color: var(--color-text-light);
}

.design-editor-toolbar__btn--toggle-on:hover {
    background: rgba(61, 89, 65, 0.85);
}

/* ── Primary button (gold, pill-shaped) ───────────────────────────── */

.design-editor-toolbar__btn--primary {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-text-dark);
    font-weight: 600;
}

.design-editor-toolbar__btn--primary:hover:not(:disabled) {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.design-editor-toolbar__btn--primary:disabled {
    background: rgba(212, 184, 150, 0.3);
    border-color: rgba(212, 184, 150, 0.2);
    color: rgba(61, 53, 48, 0.5);
}

/* ── Secondary button ─────────────────────────────────────────────── */

.design-editor-toolbar__btn--secondary {
    background: transparent;
    border-color: rgba(181, 196, 177, 0.3);
}

.design-editor-toolbar__btn--secondary:hover:not(:disabled) {
    background: rgba(181, 196, 177, 0.12);
    border-color: rgba(181, 196, 177, 0.45);
}

/* ── Outline button (cancel) ──────────────────────────────────────── */

.design-editor-toolbar__btn--outline {
    background: transparent;
    border-color: rgba(232, 196, 188, 0.4);
    color: var(--color-rose);
}

.design-editor-toolbar__btn--outline:hover:not(:disabled) {
    background: rgba(232, 196, 188, 0.1);
    border-color: var(--color-rose);
    color: var(--color-rose);
}

/* ── Page selector dropdown ───────────────────────────────────────── */

.design-editor-toolbar__select-label {
    margin: 0;
    padding: 0;
}

.design-editor-toolbar__select {
    padding: 5px 28px 5px 10px;
    border: 1px solid rgba(181, 196, 177, 0.35);
    border-radius: 30px;
    background: rgba(61, 53, 48, 0.6);
    color: var(--color-text-light);
    font-family: var(--font-body);
    font-size: 0.8rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b5c4b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.design-editor-toolbar__select:hover {
    border-color: rgba(181, 196, 177, 0.55);
    background-color: rgba(61, 53, 48, 0.75);
}

.design-editor-toolbar__select:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.design-editor-toolbar__select option {
    background: var(--color-text-dark);
    color: var(--color-text-light);
}

/* ── Semi-transparent overlay when editing ─────────────────────────── */

.design-editor-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.08);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* ── Effect editing states ─────────────────────────────────────────── */

.visual-effect--editing {
    outline: 2px dashed rgba(181, 196, 177, 0.6);
    outline-offset: 2px;
    cursor: pointer;
    pointer-events: auto !important; /* Override inline pointer-events: none from VisualEffectStyleBuilder */
    transition: outline-color 0.2s ease, box-shadow 0.2s ease;
}

.visual-effect--editing:hover {
    outline-color: var(--color-sage);
    box-shadow: 0 0 8px rgba(181, 196, 177, 0.25);
}

.visual-effect--selected {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
    pointer-events: auto;
    box-shadow: 0 0 12px rgba(212, 184, 150, 0.3);
}

/* ── Resize handles (corners of selected effect) ──────────────────── */

.effect-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-gold);
    border: 1px solid var(--color-text-dark);
    cursor: nwse-resize;
    z-index: 10001;
    pointer-events: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}

.effect-handle:hover {
    transform: scale(1.4);
}

.effect-handle--nw {
    top: -4px;
    left: -4px;
    cursor: nw-resize;
}

.effect-handle--ne {
    top: -4px;
    right: -4px;
    cursor: ne-resize;
}

.effect-handle--sw {
    bottom: -4px;
    left: -4px;
    cursor: sw-resize;
}

.effect-handle--se {
    bottom: -4px;
    right: -4px;
    cursor: se-resize;
}

/* ── Effect type label ─────────────────────────────────────────────── */

.effect-label {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    background: rgba(61, 53, 48, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--color-text-light);
    white-space: nowrap;
    pointer-events: none;
    z-index: 10001;
    letter-spacing: 0.03em;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.visual-effect--selected .effect-label {
    opacity: 1;
}

/* ── Property panel (right side, glass morphism) ──────────────────── */

.property-panel {
    position: fixed;
    top: 56px;
    right: 16px;
    width: 300px;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    z-index: 10001;
    background: rgba(61, 53, 48, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(181, 196, 177, 0.2);
    border-radius: 12px;
    padding: 16px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text-light);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
}

.property-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(181, 196, 177, 0.15);
}

.property-panel__title {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-gold);
}

.property-panel__close {
    background: none;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.property-panel__close:hover {
    opacity: 1;
}

.property-panel__section {
    margin-bottom: 12px;
}

.property-panel__section-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-sage);
    margin-bottom: 8px;
    font-weight: 600;
}

.property-panel__field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.property-panel__field-label {
    flex: 0 0 70px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.property-panel__field-input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid rgba(181, 196, 177, 0.25);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--color-text-light);
    font-family: var(--font-body);
    font-size: 0.78rem;
}

.property-panel__field-input:focus {
    outline: none;
    border-color: var(--color-gold);
}

/* ── Effect catalog modal ──────────────────────────────────────────── */

.effect-catalog {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.effect-catalog__panel {
    width: 90%;
    max-width: 640px;
    max-height: 80vh;
    overflow-y: auto;
    background: rgba(61, 53, 48, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(181, 196, 177, 0.2);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.effect-catalog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.effect-catalog__title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-gold);
}

.effect-catalog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.effect-catalog__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border: 1px solid rgba(181, 196, 177, 0.2);
    border-radius: 12px;
    background: rgba(181, 196, 177, 0.05);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    color: var(--color-text-light);
    font-size: 0.78rem;
    text-align: center;
}

.effect-catalog__item:hover {
    background: rgba(181, 196, 177, 0.12);
    border-color: var(--color-gold);
    box-shadow: 0 0 8px rgba(212, 184, 150, 0.15);
}

.effect-catalog__item:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.effect-catalog__item--custom {
    cursor: default;
}

/* ── Close button ────────────────────────────────────────────────── */

.effect-catalog__close {
    background: none;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.effect-catalog__close:hover {
    opacity: 1;
    transform: scale(1.1);
}

.effect-catalog__close:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
    opacity: 1;
}

/* ── Category tabs ───────────────────────────────────────────────── */

.effect-catalog__tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(181, 196, 177, 0.15);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(181, 196, 177, 0.3) transparent;
}

.effect-catalog__tabs::-webkit-scrollbar {
    height: 4px;
}

.effect-catalog__tabs::-webkit-scrollbar-track {
    background: transparent;
}

.effect-catalog__tabs::-webkit-scrollbar-thumb {
    background: rgba(181, 196, 177, 0.3);
    border-radius: 2px;
}

.effect-catalog__tab {
    flex-shrink: 0;
    padding: 6px 14px;
    border: 1px solid rgba(181, 196, 177, 0.25);
    border-radius: 30px;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.effect-catalog__tab:hover {
    background: rgba(181, 196, 177, 0.1);
    border-color: rgba(181, 196, 177, 0.4);
    color: var(--color-text-light);
}

.effect-catalog__tab--active {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-text-dark);
    font-weight: 600;
}

.effect-catalog__tab--active:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-dark);
}

.effect-catalog__tab:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* ── Preview container ───────────────────────────────────────────── */

.effect-catalog__preview {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.effect-catalog__preview > * {
    max-width: 100%;
    max-height: 100%;
}

/* ── Item name ───────────────────────────────────────────────────── */

.effect-catalog__item-name {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.3;
    word-break: break-word;
}

/* ── Upload icon in custom cards ─────────────────────────────────── */

.effect-catalog__upload-icon {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.effect-catalog__item--custom:hover .effect-catalog__upload-icon {
    opacity: 0.8;
}

/* ── File upload styling ─────────────────────────────────────────── */

.effect-catalog__upload-label {
    display: block;
    width: 100%;
    cursor: pointer;
}

.effect-catalog__file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.effect-catalog__upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid rgba(181, 196, 177, 0.35);
    border-radius: 30px;
    background: transparent;
    color: var(--color-text-light);
    font-family: var(--font-body);
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.effect-catalog__upload-btn:hover {
    background: rgba(181, 196, 177, 0.15);
    border-color: var(--color-gold);
}

.effect-catalog__upload-btn:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* ── Upload spinner ──────────────────────────────────────────────── */

.effect-catalog__spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--color-gold);
    border-radius: 50%;
    animation: effect-catalog-spin 0.6s linear infinite;
}

@keyframes effect-catalog-spin {
    to { transform: rotate(360deg); }
}

/* ── Error message ───────────────────────────────────────────────── */

.effect-catalog__error {
    display: block;
    margin-top: 4px;
    font-size: 0.68rem;
    color: var(--color-rose);
    line-height: 1.3;
}

/* ── SVG form ────────────────────────────────────────────────────── */

.effect-catalog__svg-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.effect-catalog__svg-textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(181, 196, 177, 0.25);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--color-text-light);
    font-family: monospace;
    font-size: 0.72rem;
    resize: vertical;
    min-height: 60px;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.effect-catalog__svg-textarea:focus {
    outline: none;
    border-color: var(--color-gold);
}

.effect-catalog__svg-textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.effect-catalog__svg-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.effect-catalog__svg-btn {
    padding: 4px 12px;
    border-radius: 30px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    border: 1px solid transparent;
}

.effect-catalog__svg-btn--submit {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-text-dark);
    font-weight: 600;
}

.effect-catalog__svg-btn--submit:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.effect-catalog__svg-btn--cancel {
    background: transparent;
    border-color: rgba(181, 196, 177, 0.3);
    color: rgba(255, 255, 255, 0.6);
}

.effect-catalog__svg-btn--cancel:hover {
    border-color: rgba(181, 196, 177, 0.5);
    color: var(--color-text-light);
}

.effect-catalog__svg-btn:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* ── Visually hidden utility (for accessible labels) ──────────────── */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Test Background Mode ────────────────────────────────────────── */
/* Neutral checkerboard background for effect visibility and 3D geometry validation.
   Uses !important to override both base CSS and SiteBackground inline styles. */

.book-desk-scene--test-bg {
    background:
        /* Checkerboard pattern — classic transparency indicator */
        repeating-conic-gradient(#d0d0d0 0% 25%, #e8e8e8 0% 50%) 0 0 / 32px 32px !important;
}

.book-desk-scene--test-bg::before {
    filter: none !important;
    opacity: 0 !important;
}

.book-desk-scene--test-bg::after {
    background: transparent !important;
}

/* ── Orbit Grid Overlay ──────────────────────────────────────────── */
/* Perspective-aware floor grid for spatial reference while orbiting.
   Uses ::before on .book-desk-surface (verified: no existing pseudo-elements). */

.book-desk-surface::before {
    content: '';
    position: absolute;
    inset: -50%;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(61, 89, 65, 0.08) 0px,
            rgba(61, 89, 65, 0.08) 1px,
            transparent 1px,
            transparent 60px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(61, 89, 65, 0.08) 0px,
            rgba(61, 89, 65, 0.08) 1px,
            transparent 1px,
            transparent 60px
        );
    transform: perspective(800px) rotateX(60deg);
    transform-origin: center center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show grid when orbit mode is active */
.book-desk-surface--orbiting::before {
    opacity: 1;
}

/* Enhanced grid visibility with test background */
.book-desk-scene--test-bg .book-desk-surface--orbiting::before {
    background:
        repeating-linear-gradient(
            0deg,
            rgba(61, 89, 65, 0.18) 0px,
            rgba(61, 89, 65, 0.18) 1px,
            transparent 1px,
            transparent 60px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(61, 89, 65, 0.18) 0px,
            rgba(61, 89, 65, 0.18) 1px,
            transparent 1px,
            transparent 60px
        );
}


/* ── Solid Color Test Background ────────────────────────────────── */
/* Overrides background with an admin-chosen solid color for contrast testing.
   Uses a CSS custom property set dynamically via JS interop. */

.book-desk-scene--test-bg-solid {
    background: var(--test-bg-color, #808080) !important;
}

.book-desk-scene--test-bg-solid::before {
    filter: none !important;
    opacity: 0 !important;
}

.book-desk-scene--test-bg-solid::after {
    background: transparent !important;
}

/* Solid bg + orbit enhanced grid */
.book-desk-scene--test-bg-solid .book-desk-surface--orbiting::before {
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.12) 0px,
            rgba(255, 255, 255, 0.12) 1px,
            transparent 1px,
            transparent 60px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.12) 0px,
            rgba(255, 255, 255, 0.12) 1px,
            transparent 1px,
            transparent 60px
        );
}


/* ── 3D Perspective Grid ────────────────────────────────────────── */
/* A floor grid that aligns to the book's perspective angle for spatial
   reference. Shown independently of orbit mode (unlike the orbit grid).
   Uses .book-desk-surface::after to avoid conflict with ::before (orbit grid). */

[data-perspective-grid] .book-desk-surface::after {
    content: '';
    position: absolute;
    inset: -100%;
    z-index: 0;
    pointer-events: none;
    background:
        /* Major grid lines */
        repeating-linear-gradient(
            0deg,
            rgba(137, 180, 250, 0.18) 0px,
            rgba(137, 180, 250, 0.18) 1px,
            transparent 1px,
            transparent 80px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(137, 180, 250, 0.18) 0px,
            rgba(137, 180, 250, 0.18) 1px,
            transparent 1px,
            transparent 80px
        ),
        /* Minor grid lines */
        repeating-linear-gradient(
            0deg,
            rgba(137, 180, 250, 0.06) 0px,
            rgba(137, 180, 250, 0.06) 1px,
            transparent 1px,
            transparent 20px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(137, 180, 250, 0.06) 0px,
            rgba(137, 180, 250, 0.06) 1px,
            transparent 1px,
            transparent 20px
        );
    /* Match the book's closed-state perspective: the book frame uses
       rotateX(var(--book-closed-rotate-x)) ≈ 6deg, so the grid tilts
       to match the "looking down at a desk" angle. */
    transform: perspective(var(--book-perspective, 1100px))
               rotateX(var(--book-closed-rotate-x, 6deg));
    transform-origin: center 60%;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* In open/Book state the frame goes flat (rotateX ≈ 0) — grid adjusts */
.book-desk-scene--book[data-perspective-grid] .book-desk-surface::after {
    transform: perspective(var(--book-perspective, 1100px))
               rotateX(0deg);
}

/* Table state uses a steeper angle */
.book-desk-scene--table[data-perspective-grid] .book-desk-surface::after {
    transform: perspective(var(--book-perspective, 1100px))
               rotateX(var(--book-table-rotate-x, 55deg));
    transform-origin: center 70%;
}

/* Cross-axis lines for center alignment reference */
[data-perspective-grid] .book-frame::before {
    content: '';
    position: absolute;
    inset: -20px;
    z-index: 10001;
    pointer-events: none;
    background:
        linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(250, 179, 135, 0.35) calc(50% - 0.5px), rgba(250, 179, 135, 0.35) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(250, 179, 135, 0.35) calc(50% - 0.5px), rgba(250, 179, 135, 0.35) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}


/* ── Part X-Ray Highlighting ────────────────────────────────────── */
/* Overlays bright semi-transparent colors on each distinct book part so
   admins can instantly see boundaries. Colors chosen for maximum contrast
   against each other and the book's natural tones. */

/* 3D depth parts (closed/cover/table states) */
[data-part-xray] .book-3d-spine {
    background: rgba(255, 50, 50, 0.55) !important;      /* Red — spine */
}

[data-part-xray] .book-3d-spine-strip {
    background: rgba(255, 50, 50, 0.35) !important;      /* Red tint — spine strips */
}

[data-part-xray] .book-3d-spine-band {
    background: rgba(255, 200, 50, 0.7) !important;      /* Gold — spine bands */
}

[data-part-xray] .book-3d-back-cover {
    background: rgba(50, 130, 255, 0.55) !important;     /* Blue — back cover */
}

[data-part-xray] .book-3d-back-cover-edge {
    background: rgba(50, 130, 255, 0.55) !important;     /* Blue — back cover edges */
}

[data-part-xray] .book-cover-page-front {
    outline: 3px solid rgba(0, 220, 130, 0.8) !important; /* Green — front cover */
    outline-offset: -3px;
}

[data-part-xray] .book-cover-page-front::after {
    content: 'FRONT COVER';
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    background: rgba(0, 220, 130, 0.85);
    color: #000;
    font-size: 0.625rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    border-radius: 3px;
    z-index: 10002;
    pointer-events: none;
}

[data-part-xray] .book-3d-page {
    background: rgba(255, 220, 100, 0.4) !important;     /* Yellow — page layers */
}

[data-part-xray] .book-3d-page--alt {
    background: rgba(255, 180, 60, 0.4) !important;      /* Orange — alternating pages */
}

[data-part-xray] .book-3d-edge-right {
    background: rgba(180, 50, 255, 0.55) !important;     /* Purple — fore edge */
}

[data-part-xray] .book-3d-edge-top {
    background: rgba(50, 200, 255, 0.55) !important;     /* Cyan — head edge */
}

[data-part-xray] .book-3d-edge-bottom {
    background: rgba(255, 130, 50, 0.55) !important;     /* Orange — tail edge */
}

[data-part-xray] .book-3d-left-stack {
    background: rgba(100, 255, 100, 0.45) !important;    /* Lime — left stack */
}

/* Open book spread — right page (front face, currently visible) */
[data-part-xray] .book-page-front {
    outline: 2px solid rgba(50, 200, 100, 0.7) !important;
    outline-offset: -2px;
}

/* Open book spread — left page (back face of turned page) */
[data-part-xray] .book-page-back {
    outline: 2px solid rgba(255, 100, 200, 0.7) !important;
    outline-offset: -2px;
}

/* Part labels — positioned labels on each visible part */
[data-part-xray] .book-3d-spine::after {
    content: 'SPINE';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateY(90deg);
    padding: 2px 6px;
    background: rgba(255, 50, 50, 0.85);
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10002;
}

[data-part-xray] .book-3d-back-cover::after {
    content: 'BACK COVER';
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 6px;
    background: rgba(50, 130, 255, 0.85);
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    border-radius: 3px;
    pointer-events: none;
    z-index: 10002;
}

[data-part-xray] .book-3d-edge-right::after {
    content: 'FORE';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1px 4px;
    background: rgba(180, 50, 255, 0.85);
    color: #fff;
    font-size: 0.5rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    border-radius: 2px;
    pointer-events: none;
    z-index: 10002;
}

[data-part-xray] .book-3d-edge-top::after {
    content: 'HEAD';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1px 4px;
    background: rgba(50, 200, 255, 0.85);
    color: #000;
    font-size: 0.5rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    border-radius: 2px;
    pointer-events: none;
    z-index: 10002;
}

[data-part-xray] .book-3d-edge-bottom::after {
    content: 'TAIL';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1px 4px;
    background: rgba(255, 130, 50, 0.85);
    color: #000;
    font-size: 0.5rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    border-radius: 2px;
    pointer-events: none;
    z-index: 10002;
}

/* Hardcover in open/book state */
[data-part-xray] .book-hardcover {
    outline: 2px dashed rgba(200, 150, 50, 0.6) !important;
    outline-offset: -2px;
}

[data-part-xray] .book-hardcover::after {
    content: 'HARDCOVER' !important;
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    padding: 2px 6px !important;
    background: rgba(200, 150, 50, 0.85) !important;
    color: #000 !important;
    font-size: 0.5625rem !important;
    font-weight: 700 !important;
    font-family: 'Consolas', monospace !important;
    border-radius: 3px !important;
    pointer-events: none !important;
    z-index: 10002 !important;
    width: auto !important;
    height: auto !important;
}

/* Open spread — page face labels */
[data-part-xray] .book-page-front::after {
    content: 'RIGHT PAGE (front)';
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 6px;
    background: rgba(50, 200, 100, 0.85);
    color: #000;
    font-size: 0.5625rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    border-radius: 3px;
    pointer-events: none;
    z-index: 10002;
}

[data-part-xray] .book-page-back::after {
    content: 'LEFT PAGE (back)';
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    background: rgba(255, 100, 200, 0.85);
    color: #000;
    font-size: 0.5625rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    border-radius: 3px;
    pointer-events: none;
    z-index: 10002;
}


/* ── Part Colorizer ──────────────────────────────────────────── */
/* Replaces each book part's background with a bold, opaque solid color
   for clipping and bleed-through testing during animations.
   ONLY changes background / background-image — preserves opacity,
   box-shadow, filter, transform, and all other properties so that
   transparency issues, shadow artifacts, and VFX remain visible.
   Color palette: 16 maximally distinct hues so no adjacent parts blend. */

/* ── 3D depth parts (closed book) ── */

[data-part-colorizer] .book-3d-spine {
    background: #FF0000 !important;                          /* Red */
}

[data-part-colorizer] .book-3d-spine-strip {
    background: #CC0000 !important;                          /* Darker red */
}

[data-part-colorizer] .book-3d-spine-band {
    background: #FFD700 !important;                          /* Gold */
}

[data-part-colorizer] .book-3d-back-cover {
    background: #0044FF !important;                          /* Blue */
}

[data-part-colorizer] .book-3d-back-cover-edge {
    background: #0044FF !important;                          /* Blue — back cover edges */
}

[data-part-colorizer] .book-3d-back-cover::before {
    background: none !important;                             /* Remove leather grain */
}

[data-part-colorizer] .book-3d-page {
    background: #00CC44 !important;                          /* Green */
}

[data-part-colorizer] .book-3d-page--alt {
    background: #00AA33 !important;                          /* Darker green */
}

[data-part-colorizer] .book-3d-edge-right {
    background: #FF00FF !important;                          /* Magenta — fore edge */
}

[data-part-colorizer] .book-3d-edge-top {
    background: #00FFFF !important;                          /* Cyan — head edge */
}

[data-part-colorizer] .book-3d-edge-bottom {
    background: #FF8C00 !important;                          /* Dark orange — tail edge */
}

[data-part-colorizer] .book-3d-left-stack {
    background: #8B00FF !important;                          /* Violet — left stack */
}

/* ── Front cover (outside — leather face) ── */

[data-part-colorizer] .book-cover-page-front {
    background: #FF1493 !important;                          /* Deep pink */
}

[data-part-colorizer] .book-cover-page-front::before {
    background: none !important;                             /* Remove paper grain overlay */
}

/* ── Cover board thickness edges ── */

[data-part-colorizer] .book-cover-edge--spine {
    background: #CC1177 !important;                          /* Darker pink */
}

[data-part-colorizer] .book-cover-edge--fore {
    background: #BB1066 !important;                          /* Even darker pink */
}

[data-part-colorizer] .book-cover-edge--head {
    background: #AA0F55 !important;
}

[data-part-colorizer] .book-cover-edge--tail {
    background: #990E44 !important;
}

/* ── Front cover (inside — endpaper) ── */

[data-part-colorizer] .book-cover-page-back {
    background: #32CD32 !important;                          /* Lime green */
}

[data-part-colorizer] .book-cover-endpaper {
    background: #32CD32 !important;                          /* Lime green (same) */
}

[data-part-colorizer] .book-cover-endpaper::before {
    background: none !important;                             /* Remove paper grain */
}

/* ── Open book pages — front face (right page / recto) ── */

[data-part-colorizer] .book-page-front {
    background: #4169E1 !important;                          /* Royal blue */
}

[data-part-colorizer] .book-page-front .book-page-bg {
    background: #4169E1 !important;                          /* Match front face */
    background-image: none !important;
}

[data-part-colorizer] .book-page-front .book-page-paper-edge {
    background: none !important;                             /* Remove vignette */
    box-shadow: none !important;
}

/* ── Open book pages — back face (left page / verso) ── */

[data-part-colorizer] .book-page-back {
    background: #DC143C !important;                          /* Crimson */
    background-image: none !important;
}

[data-part-colorizer] .book-page-back .book-page-back-texture {
    background: none !important;                             /* Remove paper fiber */
}

/* ── Page turn effects ── */

[data-part-colorizer] .book-page-spine-crease {
    background: #B22222 !important;                          /* Firebrick */
}

[data-part-colorizer] .book-page-curl-shadow {
    background: #8B0000 !important;                          /* Dark red */
}

[data-part-colorizer] .book-page-light-catch {
    background: #FFFACD !important;                          /* Lemon chiffon */
}

[data-part-colorizer] .book-page-air-line {
    background: #87CEEB !important;                          /* Sky blue */
}

[data-part-colorizer] .book-page-spine-glow {
    background: #FFD700 !important;                          /* Gold */
}

[data-part-colorizer] .book-page-edge {
    background: #A0522D !important;                          /* Sienna */
}

/* ── Page 3D edge strips (right/left/bottom) ── */

[data-part-colorizer] .book-page-edge-right span {
    background: #DDA0DD !important;                          /* Plum */
}

[data-part-colorizer] .book-page-edge-left span {
    background: #DA70D6 !important;                          /* Orchid */
}

[data-part-colorizer] .book-page-edge-bottom {
    background: #D2691E !important;                          /* Chocolate */
}

/* ── Drag flap (2D fold reflection during drag) ── */

[data-part-colorizer] .book-page-drag-flap {
    background: #7FFF00 !important;                          /* Chartreuse */
}

[data-part-colorizer] .book-page-drag-flap-gradient {
    background: #7FFF00 !important;                          /* Chartreuse (match) */
}

/* ── Corner peel reveals ── */

[data-part-colorizer] .book-page-peel-underpage--br,
[data-part-colorizer] .book-page-peel-underpage--tr,
[data-part-colorizer] .book-page-peel-underpage--tl,
[data-part-colorizer] .book-page-peel-underpage--bl {
    background: #FFA07A !important;                          /* Light salmon */
}

[data-part-colorizer] .book-page-peel-shadow--br,
[data-part-colorizer] .book-page-peel-shadow--tr,
[data-part-colorizer] .book-page-peel-shadow--tl,
[data-part-colorizer] .book-page-peel-shadow--bl {
    background: #CD853F !important;                          /* Peru */
}

/* ── Hardcover backing (open state) ── */

[data-part-colorizer] .book-hardcover {
    background: #708090 !important;                          /* Slate gray */
}

/* ── 3D closed-book ribbons ── */

[data-part-colorizer] .book-3d-ribbon-body {
    background: #FF4500 !important;                          /* Orange red */
}

[data-part-colorizer] .book-3d-ribbon-tail {
    background: #FF6347 !important;                          /* Tomato */
}

/* ── Page ribbons (satin bookmarks on open pages) ── */

[data-part-colorizer] .book-ribbon-body {
    background: #1E90FF !important;                          /* Dodger blue */
}

[data-part-colorizer] .book-ribbon-face--back .book-ribbon-body {
    background: #1565C0 !important;                          /* Darker blue (back face) */
}

[data-part-colorizer] .book-ribbon-sheen {
    background: #63B8FF !important;                          /* Light steel blue */
}

[data-part-colorizer] .book-ribbon-fold {
    background: #104E8B !important;                          /* Dark dodger blue */
}

[data-part-colorizer] .book-ribbon-tail {
    background: #1C86EE !important;                          /* Medium blue */
}

[data-part-colorizer] .book-ribbon-edge--left,
[data-part-colorizer] .book-ribbon-edge--right {
    background: #0D4F8B !important;                          /* Navy tint */
}

/* ── Sticky note bookmarks ── */

[data-part-colorizer] .book-sticky-note-paper {
    background: #FFFF00 !important;                          /* Yellow */
}

[data-part-colorizer] .book-sticky-note-fold {
    background: #FFD700 !important;                          /* Gold */
}

/* ── Particles / motes ── */

[data-part-colorizer] .book-open-mote,
[data-part-colorizer] [class*="book-open-mote--"] {
    background: #FF69B4 !important;                          /* Hot pink */
}

[data-part-colorizer] .book-mote,
[data-part-colorizer] [class*="book-mote--"] {
    background: #EE82EE !important;                          /* Violet */
}

/* ── Spine decorative elements ── */

[data-part-colorizer] .book-spine-3d-ridges {
    background: #B22222 !important;                          /* Firebrick */
}

[data-part-colorizer] .book-spine-3d-glow {
    background: #FF6600 !important;                          /* Orange */
}

[data-part-colorizer] .book-spine-light {
    background: #FFE4B5 !important;                          /* Moccasin */
}

/* ── Part labels (Consolas monospace badges) ── */

[data-part-colorizer] .book-3d-spine::after {
    content: 'SPINE';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateY(90deg);
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.75);
    color: #FF0000;
    font-size: 0.5625rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10002;
}

[data-part-colorizer] .book-3d-back-cover::after {
    content: 'BACK COVER';
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.75);
    color: #0044FF;
    font-size: 0.5625rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    border-radius: 3px;
    pointer-events: none;
    z-index: 10002;
}

[data-part-colorizer] .book-cover-page-front::after {
    content: 'COVER OUTSIDE';
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #FF1493;
    font-size: 0.625rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    border-radius: 3px;
    z-index: 10002;
    pointer-events: none;
}

[data-part-colorizer] .book-cover-endpaper::after {
    content: 'COVER INSIDE (endpaper)';
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #32CD32;
    font-size: 0.625rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    border-radius: 3px;
    z-index: 10002;
    pointer-events: none;
}

[data-part-colorizer] .book-page-front::after {
    content: 'RECTO (right)';
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.75);
    color: #4169E1;
    font-size: 0.5625rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    border-radius: 3px;
    pointer-events: none;
    z-index: 10002;
}

[data-part-colorizer] .book-page-back::after {
    content: 'VERSO (left)';
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.75);
    color: #DC143C;
    font-size: 0.5625rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    border-radius: 3px;
    pointer-events: none;
    z-index: 10002;
}

[data-part-colorizer] .book-3d-edge-right::after {
    content: 'FORE';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1px 4px;
    background: rgba(0, 0, 0, 0.75);
    color: #FF00FF;
    font-size: 0.5rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    border-radius: 2px;
    pointer-events: none;
    z-index: 10002;
}

[data-part-colorizer] .book-3d-edge-top::after {
    content: 'HEAD';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1px 4px;
    background: rgba(0, 0, 0, 0.75);
    color: #00FFFF;
    font-size: 0.5rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    border-radius: 2px;
    pointer-events: none;
    z-index: 10002;
}

[data-part-colorizer] .book-3d-edge-bottom::after {
    content: 'TAIL';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1px 4px;
    background: rgba(0, 0, 0, 0.75);
    color: #FF8C00;
    font-size: 0.5rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    border-radius: 2px;
    pointer-events: none;
    z-index: 10002;
}

[data-part-colorizer] .book-3d-left-stack::after {
    content: 'LEFT STACK';
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.75);
    color: #8B00FF;
    font-size: 0.5625rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    border-radius: 3px;
    pointer-events: none;
    z-index: 10002;
}

[data-part-colorizer] .book-hardcover::after {
    content: 'HARDCOVER' !important;
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    padding: 2px 6px !important;
    background: rgba(0, 0, 0, 0.75) !important;
    color: #708090 !important;
    font-size: 0.5625rem !important;
    font-weight: 700 !important;
    font-family: 'Consolas', monospace !important;
    border-radius: 3px !important;
    pointer-events: none !important;
    z-index: 10002 !important;
    width: auto !important;
    height: auto !important;
}


/* ── Turning page override ─────────────────────────────────────
   When a page is actively turning (or being scrubbed), give its front
   and back faces unique in-motion colors so clipping between the
   turning page and the stationary spread pages is immediately visible.
   Uses Yellow (front) and Hot Pink (back) — neither appears elsewhere
   in the colorizer palette, so the page-in-motion always stands out.  */

[data-part-colorizer] .book-page--turning > .book-page-front,
[data-part-colorizer] .book-page--scrubbing > .book-page-front {
    background: #FFE600 !important;                          /* Bright yellow — turning front */
}

[data-part-colorizer] .book-page--turning > .book-page-front .book-page-bg,
[data-part-colorizer] .book-page--scrubbing > .book-page-front .book-page-bg {
    background: #FFE600 !important;                          /* Match turning front */
    background-image: none !important;
}

[data-part-colorizer] .book-page--turning > .book-page-front .book-page-paper-edge,
[data-part-colorizer] .book-page--scrubbing > .book-page-front .book-page-paper-edge {
    background: none !important;
    box-shadow: none !important;
}

[data-part-colorizer] .book-page--turning > .book-page-back,
[data-part-colorizer] .book-page--scrubbing > .book-page-back {
    background: #FF1EC8 !important;                          /* Hot pink — turning back */
    background-image: none !important;
}

[data-part-colorizer] .book-page--turning > .book-page-back .book-page-back-texture,
[data-part-colorizer] .book-page--scrubbing > .book-page-back .book-page-back-texture {
    background: none !important;
}

/* Labels for the turning page — override the static RECTO/VERSO labels */
[data-part-colorizer] .book-page--turning > .book-page-front::after,
[data-part-colorizer] .book-page--scrubbing > .book-page-front::after {
    content: 'TURNING FRONT' !important;
    color: #FFE600 !important;
}

[data-part-colorizer] .book-page--turning > .book-page-back::after,
[data-part-colorizer] .book-page--scrubbing > .book-page-back::after {
    content: 'TURNING BACK' !important;
    color: #FF1EC8 !important;
}


/* ── Spine Line Debug Overlay ──────────────────────────────────── */
/* Draws a bright vertical line at the page hinge point (transform-origin:
   left center) so admins can verify that turning pages stay attached to the
   spine throughout the entire animation arc. The line extends 10px beyond
   the page bounds to remain visible even with slight rotateX tilt. */

[data-spine-line] .book-page-stack::before {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: 0;
    width: 2px;
    background: rgba(255, 50, 50, 0.9);
    z-index: 10001;
    pointer-events: none;
    /* Push forward in preserve-3d context so line is always visible above pages */
    transform: translateZ(20px);
    box-shadow:
        0 0 8px rgba(255, 50, 50, 0.5),
        0 0 2px rgba(255, 50, 50, 1);
}

/* Label for the spine hinge line */
[data-spine-line] .book-page-stack::after {
    content: 'SPINE HINGE';
    position: absolute;
    top: -10px;
    left: 6px;
    padding: 2px 6px;
    background: rgba(255, 50, 50, 0.85);
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    letter-spacing: 0.04em;
    border-radius: 3px;
    z-index: 10002;
    pointer-events: none;
    transform: translateZ(20px);
    white-space: nowrap;
}


/* ── Animation Tester Panel ──────────────────────────────────────── */

.animation-tester__body {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.animation-tester__section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.animation-tester__section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--editor-text-muted);
    padding-bottom: 2px;
}

.animation-tester__section-header svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.animation-tester__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.animation-tester__label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--editor-text-secondary);
    min-width: 60px;
    flex-shrink: 0;
}

.animation-tester__select {
    flex: 1;
    padding: 3px 6px;
    border: 1px solid var(--editor-border);
    border-radius: 4px;
    background: var(--editor-bg-deep);
    color: var(--editor-text-primary);
    font-size: 0.6875rem;
    cursor: pointer;
}

.animation-tester__select:focus {
    border-color: var(--editor-accent);
    outline: none;
}

.animation-tester__toggle-group {
    display: flex;
    gap: 2px;
    background: var(--editor-bg-deep);
    border-radius: 4px;
    padding: 2px;
    flex: 1;
}

.animation-tester__toggle {
    flex: 1;
    padding: 3px 8px;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--editor-text-secondary);
    font-size: 0.625rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.animation-tester__toggle:hover {
    background: var(--editor-bg-hover);
    color: var(--editor-text-primary);
}

.animation-tester__toggle--active {
    background: var(--editor-accent-muted);
    color: var(--editor-accent);
}

.animation-tester__scrub-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.animation-tester__slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--editor-bg-tertiary);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.animation-tester__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--editor-accent);
    cursor: pointer;
    border: 2px solid var(--editor-bg-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.animation-tester__slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--editor-accent);
    cursor: pointer;
    border: 2px solid var(--editor-bg-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.animation-tester__value {
    font-size: 0.625rem;
    font-family: 'Consolas', monospace;
    color: var(--editor-text-muted);
    min-width: 36px;
    text-align: right;
}

.animation-tester__hint {
    font-size: 0.5625rem;
    color: var(--editor-text-muted);
    font-family: 'Consolas', monospace;
}

.animation-tester__actions {
    display: flex;
    gap: 6px;
}

.animation-tester__btn {
    padding: 4px 10px;
    border: 1px solid var(--editor-border);
    border-radius: 4px;
    background: var(--editor-bg-tertiary);
    color: var(--editor-text-secondary);
    font-size: 0.625rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.animation-tester__btn:hover {
    background: var(--editor-bg-hover);
    color: var(--editor-text-primary);
    border-color: var(--editor-border-hover);
}

.animation-tester__btn--primary {
    background: var(--editor-accent-muted);
    color: var(--editor-accent);
    border-color: transparent;
}

.animation-tester__btn--primary:hover {
    background: var(--editor-accent);
    color: var(--editor-text-on-accent);
}

.animation-tester__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.animation-tester__grid .animation-tester__btn {
    justify-content: center;
}

.animation-tester__divider {
    height: 1px;
    border: none;
    background: var(--editor-border-subtle);
    margin: 4px 0;
}

.animation-tester__speed-presets {
    display: flex;
    gap: 3px;
    justify-content: center;
}

.animation-tester__speed-btn {
    padding: 2px 8px;
    border: 1px solid var(--editor-border);
    border-radius: 3px;
    background: transparent;
    color: var(--editor-text-muted);
    font-size: 0.5625rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.animation-tester__speed-btn:hover {
    background: var(--editor-bg-hover);
    color: var(--editor-text-primary);
}

.animation-tester__speed-btn--active {
    background: var(--editor-accent-muted);
    color: var(--editor-accent);
    border-color: transparent;
}

/* ── Animation mode selector (3-col + 2-col overflow grid) ── */
.animation-tester__mode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.animation-tester__mode-btn {
    padding: 4px 6px;
    border: 1px solid var(--editor-border);
    border-radius: 4px;
    background: transparent;
    color: var(--editor-text-muted);
    font-size: 0.625rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.animation-tester__mode-btn:hover {
    background: var(--editor-bg-hover);
    color: var(--editor-text-primary);
}

.animation-tester__mode-btn--active {
    background: var(--editor-accent-muted);
    color: var(--editor-accent);
    border-color: var(--editor-accent);
}

/* ── Effects preview toggle grid ── */
.animation-tester__fx-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.animation-tester__fx-btn {
    padding: 4px 6px;
    border: 1px solid var(--editor-border);
    border-radius: 4px;
    background: transparent;
    color: var(--editor-text-muted);
    font-size: 11px;
    font-family: var(--editor-font);
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.animation-tester__fx-btn:hover {
    background: var(--editor-bg-hover);
    color: var(--editor-text-primary);
}

.animation-tester__fx-btn--active {
    background: rgba(212, 175, 55, 0.12);
    color: rgb(212, 175, 55);
    border-color: rgba(212, 175, 55, 0.4);
}

.animation-tester__slider-track {
    position: relative;
    flex: 1;
}

.animation-tester__slider-track .animation-tester__slider {
    width: 100%;
}

.animation-tester__keyframe-dots {
    position: relative;
    height: 6px;
    margin: 1px 7px 0;
}

.animation-tester__keyframe-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(212, 175, 55, 0.4);
    border-radius: 50%;
    transform: translateX(-50%);
    top: 1px;
}

.animation-tester__page-input {
    width: 48px;
    padding: 2px 6px;
    background: var(--editor-bg-tertiary);
    border: 1px solid var(--editor-border);
    border-radius: 4px;
    color: inherit;
    font-size: 0.75rem;
    text-align: center;
}

.animation-tester__page-input:focus {
    outline: none;
    border-color: var(--editor-accent);
}


/* ── Toolbar Group Labels ────────────────────────────────────────── */

.design-editor-toolbar__group-label {
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(181, 196, 177, 0.5);
    white-space: nowrap;
    user-select: none;
    margin-right: 2px;
}

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .design-editor-toolbar {
        flex-wrap: wrap;
        gap: 6px;
        padding: 6px 10px;
    }

    .design-editor-toolbar__label {
        font-size: 0;
        width: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    .design-editor-toolbar__btn-text {
        display: none;
    }

    .design-editor-toolbar__btn {
        padding: 6px 10px;
    }

    .design-editor-toolbar__separator {
        display: none;
    }

    .design-editor-toolbar__group-label {
        display: none;
    }

    .design-editor-toolbar__spacer {
        min-width: 0;
        flex: 0;
    }

    .design-editor-toolbar__group {
        gap: 4px;
    }

    .design-editor-toolbar__group--actions {
        width: 100%;
        justify-content: flex-end;
        padding-top: 4px;
        border-top: 1px solid rgba(181, 196, 177, 0.15);
    }

    .design-editor-toolbar__select {
        max-width: 140px;
        font-size: 0.75rem;
    }

    /* Property panel takes full width on mobile */
    .property-panel {
        right: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100vh - 80px);
    }

    /* Catalog takes more space on mobile */
    .effect-catalog__panel {
        width: 95%;
        padding: 16px;
    }

    .effect-catalog__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .effect-catalog__tabs {
        gap: 4px;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .effect-catalog__tab {
        padding: 5px 10px;
        font-size: 0.72rem;
    }

    .effect-catalog__preview {
        width: 48px;
        height: 48px;
    }

    .effect-catalog__item {
        padding: 12px 6px;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .design-editor-toolbar {
        padding: 4px 8px;
    }

    .design-editor-toolbar__btn {
        padding: 5px 8px;
        font-size: 0.75rem;
    }

    .design-editor-toolbar__icon {
        width: 14px;
        height: 14px;
    }

    .property-panel {
        top: 48px;
        right: 4px;
        left: 4px;
        border-radius: 8px;
        padding: 12px;
    }
}

/* ── Unsaved changes confirmation dialog ─────────────────────────── */

.design-editor-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10010;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.design-editor-dialog {
    background: var(--color-cream, #faf5f0);
    border: 1px solid var(--color-sage, #b5c4b1);
    border-radius: 16px;
    padding: 28px 32px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    text-align: center;
}

.design-editor-dialog__title {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 1.25rem;
    color: var(--color-forest, #3D5941);
    margin: 0 0 8px;
}

.design-editor-dialog__desc {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.9rem;
    color: var(--color-text-dark, #2C2C2C);
    margin: 0 0 20px;
    line-height: 1.5;
}

.design-editor-dialog__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.design-editor-toolbar__btn--danger {
    background: transparent;
    color: #c0392b;
    border: 1px solid #c0392b;
    border-radius: 30px;
    padding: 6px 16px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.design-editor-toolbar__btn--danger:hover {
    background: #c0392b;
    color: var(--color-text-light, #fff);
}

/* ── Config Import Modal ─────────────────────────────────────────── */

.config-import-modal {
    max-width: 480px;
}

.config-import-modal__file-input {
    margin-bottom: 16px;
    text-align: left;
}

.config-import-modal__file-input input[type="file"] {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.85rem;
    color: var(--color-text-dark, #2C2C2C);
    padding: 8px;
    width: 100%;
    border: 1px solid rgba(181, 196, 177, 0.4);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
}

.config-import-modal__warning {
    text-align: left;
    padding: 14px 18px;
    margin-bottom: 16px;
    border: 1px solid #c0392b;
    border-left: 4px solid #c0392b;
    border-radius: 8px;
    background: rgba(192, 57, 43, 0.06);
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.85rem;
    color: var(--color-text-dark, #2C2C2C);
    line-height: 1.5;
}

.config-import-modal__warning strong {
    color: #c0392b;
}

.config-import-modal__warning p {
    margin: 6px 0 0;
}

.config-import-modal__error {
    text-align: left;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: rgba(192, 57, 43, 0.08);
    border: 1px solid rgba(192, 57, 43, 0.3);
    font-size: 0.83rem;
    color: #c0392b;
    line-height: 1.4;
}

.config-import-modal__error ul {
    margin: 4px 0 0;
    padding-left: 1.2rem;
}

.config-import-modal__success {
    text-align: left;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: rgba(61, 89, 65, 0.08);
    border: 1px solid rgba(61, 89, 65, 0.3);
    font-size: 0.83rem;
    color: var(--color-forest, #3D5941);
    line-height: 1.4;
}

.config-import-modal__success ul {
    margin: 4px 0 0;
    padding-left: 1.2rem;
    list-style: none;
}

.config-import-modal__warnings {
    text-align: left;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.3);
    font-size: 0.83rem;
    color: #8a6d1b;
    line-height: 1.4;
}

.config-import-modal__warnings ul {
    margin: 4px 0 0;
    padding-left: 1.2rem;
}

.config-import-modal__spinner {
    width: 32px;
    height: 32px;
    margin: 16px auto;
    border: 3px solid rgba(181, 196, 177, 0.25);
    border-top-color: var(--color-gold, #D4AF37);
    border-radius: 50%;
    animation: config-spin 0.8s linear infinite;
}

@keyframes config-spin {
    to { transform: rotate(360deg); }
}

/* ===================================================================
   Property Panel — extended styles for editable fields
   =================================================================== */

/* ── Title group (name + ID badge) ───────────────────────────────── */

.property-panel__title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.property-panel__id-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 30px;
    background: rgba(181, 196, 177, 0.15);
    border: 1px solid rgba(181, 196, 177, 0.25);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.65rem;
    color: var(--color-sage);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Scrollable body ─────────────────────────────────────────────── */

.property-panel__body {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(181, 196, 177, 0.3) transparent;
}

.property-panel__body::-webkit-scrollbar {
    width: 5px;
}

.property-panel__body::-webkit-scrollbar-track {
    background: transparent;
}

.property-panel__body::-webkit-scrollbar-thumb {
    background: rgba(181, 196, 177, 0.3);
    border-radius: 3px;
}

.property-panel__body::-webkit-scrollbar-thumb:hover {
    background: rgba(181, 196, 177, 0.5);
}

/* ── Section dividers ────────────────────────────────────────────── */

.property-panel__section {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(181, 196, 177, 0.1);
}

.property-panel__section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ── Number inputs (monospace) ───────────────────────────────────── */

.property-panel__field-input--number {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.78rem;
    text-align: right;
    -moz-appearance: textfield;
}

.property-panel__field-input--number::-webkit-inner-spin-button,
.property-panel__field-input--number::-webkit-outer-spin-button {
    opacity: 1;
    height: 20px;
}

/* ── Select dropdowns ────────────────────────────────────────────── */

.property-panel__field-select {
    flex: 0 0 auto;
    min-width: 56px;
    padding: 4px 6px;
    border: 1px solid rgba(181, 196, 177, 0.25);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--color-text-light);
    font-family: var(--font-body);
    font-size: 0.75rem;
    cursor: pointer;
    appearance: auto;
    -webkit-appearance: auto;
}

.property-panel__field-select:focus {
    outline: none;
    border-color: var(--color-gold);
}

.property-panel__field-select option {
    background: var(--color-text-dark);
    color: var(--color-text-light);
}

/* ── Range slider fields ─────────────────────────────────────────── */

.property-panel__field--range {
    flex-wrap: nowrap;
}

.property-panel__range-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(181, 196, 177, 0.2);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.property-panel__range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-gold);
    border: 2px solid rgba(61, 53, 48, 0.9);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.property-panel__range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.property-panel__range-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-gold);
    border: 2px solid rgba(61, 53, 48, 0.9);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.property-panel__range-slider::-moz-range-track {
    height: 4px;
    background: rgba(181, 196, 177, 0.2);
    border-radius: 2px;
    border: none;
}

.property-panel__range-slider:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
    border-radius: 2px;
}

.property-panel__range-value {
    flex: 0 0 auto;
    min-width: 40px;
    text-align: right;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

/* ── Delete section ──────────────────────────────────────────────── */

.property-panel__section--delete {
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid rgba(181, 196, 177, 0.1);
    border-bottom: none;
}

/* ── Panel buttons (base) ────────────────────────────────────────── */

.property-panel__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid transparent;
    border-radius: 30px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    user-select: none;
    line-height: 1.2;
}

/* ── Delete button (destructive) ─────────────────────────────────── */

.property-panel__btn--delete {
    width: 100%;
    background: rgba(192, 57, 43, 0.1);
    border-color: rgba(192, 57, 43, 0.4);
    color: #e74c3c;
}

.property-panel__btn--delete:hover {
    background: rgba(192, 57, 43, 0.2);
    border-color: rgba(192, 57, 43, 0.6);
    color: #ff6b6b;
}

/* ── Delete confirmation ─────────────────────────────────────────── */

.property-panel__delete-confirm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
}

.property-panel__delete-confirm-text {
    font-size: 0.78rem;
    font-weight: 600;
    color: #e74c3c;
}

.property-panel__delete-confirm-actions {
    display: flex;
    gap: 6px;
}

.property-panel__btn--confirm-yes {
    background: #c0392b;
    border-color: #c0392b;
    color: var(--color-text-light);
    padding: 4px 14px;
    font-size: 0.75rem;
}

.property-panel__btn--confirm-yes:hover {
    background: #e74c3c;
    border-color: #e74c3c;
}

.property-panel__btn--confirm-no {
    background: transparent;
    border-color: rgba(181, 196, 177, 0.35);
    color: var(--color-text-light);
    padding: 4px 14px;
    font-size: 0.75rem;
}

.property-panel__btn--confirm-no:hover {
    background: rgba(181, 196, 177, 0.1);
    border-color: rgba(181, 196, 177, 0.5);
}

/* ── Property panel slide-in transition ──────────────────────────── */

.property-panel {
    animation: propertyPanelSlideIn 0.25s ease-out;
    max-width: 320px;
}

@keyframes propertyPanelSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Mobile: bottom sheet layout ─────────────────────────────────── */

@media (max-width: 768px) {
    .property-panel {
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        max-height: 55vh;
        border-radius: 16px 16px 0 0;
        animation: propertyPanelSlideUp 0.3s ease-out;
    }

    .property-panel__body {
        max-height: calc(55vh - 80px);
    }

    @keyframes propertyPanelSlideUp {
        from {
            opacity: 0;
            transform: translateY(40px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

@media (max-width: 480px) {
    .property-panel {
        max-height: 60vh;
        padding: 12px;
    }

    .property-panel__body {
        max-height: calc(60vh - 70px);
    }

    .property-panel__field-label {
        flex: 0 0 60px;
        font-size: 0.7rem;
    }

    .property-panel__field-input {
        font-size: 0.75rem;
        padding: 3px 6px;
    }

    .property-panel__range-value {
        min-width: 34px;
        font-size: 0.68rem;
    }
}

/* ===================================================================
   Animation Settings Panel — left-side slide-out panel (Phase 3A)
   =================================================================== */

/* ── Panel container ─────────────────────────────────────────────── */

.animation-panel {
    position: fixed;
    top: 56px;
    left: 16px;
    width: 320px;
    max-height: calc(100vh - 72px);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    background: rgba(61, 53, 48, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(181, 196, 177, 0.2);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text-light);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: animationPanelSlideIn 0.25s ease-out;
}

@keyframes animationPanelSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Header ──────────────────────────────────────────────────────── */

.animation-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(181, 196, 177, 0.15);
    flex-shrink: 0;
}

.animation-panel__title {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-gold);
}

.animation-panel__close {
    background: none;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.animation-panel__close:hover {
    opacity: 1;
}

.animation-panel__close:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
    opacity: 1;
}

/* ── Scrollable body ─────────────────────────────────────────────── */

.animation-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(181, 196, 177, 0.3) transparent;
}

.animation-panel__body::-webkit-scrollbar {
    width: 5px;
}

.animation-panel__body::-webkit-scrollbar-track {
    background: transparent;
}

.animation-panel__body::-webkit-scrollbar-thumb {
    background: rgba(181, 196, 177, 0.3);
    border-radius: 3px;
}

.animation-panel__body::-webkit-scrollbar-thumb:hover {
    background: rgba(181, 196, 177, 0.5);
}

/* ── Loading / empty states ──────────────────────────────────────── */

.animation-panel__loading,
.animation-panel__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82rem;
}

.animation-panel__spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--color-gold);
    border-radius: 50%;
    animation: animation-panel-spin 0.6s linear infinite;
}

.animation-panel__spinner--small {
    width: 12px;
    height: 12px;
}

@keyframes animation-panel-spin {
    to { transform: rotate(360deg); }
}

/* ── Category groups ─────────────────────────────────────────────── */

.animation-panel__category {
    border-bottom: 1px solid rgba(181, 196, 177, 0.08);
}

.animation-panel__category:last-child {
    border-bottom: none;
}

.animation-panel__category-header {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--color-sage);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    text-align: left;
}

.animation-panel__category-header:hover {
    background: rgba(181, 196, 177, 0.06);
    color: var(--color-gold);
}

.animation-panel__category-header:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: -2px;
}

.animation-panel__chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.animation-panel__chevron--open {
    transform: rotate(90deg);
}

.animation-panel__category-name {
    flex: 1;
}

.animation-panel__category-count {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(181, 196, 177, 0.15);
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}

.animation-panel__category-body {
    padding: 0 16px 8px;
    animation: animPanelCategoryExpand 0.2s ease-out;
}

@keyframes animPanelCategoryExpand {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

/* ── Individual setting ──────────────────────────────────────────── */

.animation-panel__setting {
    padding: 8px 0;
    border-bottom: 1px solid rgba(181, 196, 177, 0.06);
}

.animation-panel__setting:last-child {
    border-bottom: none;
}

.animation-panel__setting--modified {
    position: relative;
}

.animation-panel__setting--modified::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-gold);
}

.animation-panel__setting-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 2px;
}

.animation-panel__setting-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-light);
    cursor: default;
}

.animation-panel__setting-desc {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.35;
    margin-bottom: 6px;
}

/* ── Reset button (per setting) ──────────────────────────────────── */

.animation-panel__reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid rgba(181, 196, 177, 0.2);
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.animation-panel__reset-btn:hover {
    background: rgba(181, 196, 177, 0.12);
    color: var(--color-gold);
    border-color: rgba(212, 184, 150, 0.4);
}

.animation-panel__reset-btn:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 1px;
}

/* ── Field containers ────────────────────────────────────────────── */

.animation-panel__field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.animation-panel__field--range {
    gap: 10px;
}

.animation-panel__field--color {
    gap: 10px;
}

.animation-panel__field--text {
    gap: 0;
}

/* ── Value display ───────────────────────────────────────────────── */

.animation-panel__value {
    flex: 0 0 auto;
    min-width: 48px;
    text-align: right;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.animation-panel__value--mono {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
}

/* ── Color picker input ──────────────────────────────────────────── */

.animation-panel__color-input {
    width: 36px;
    height: 28px;
    padding: 1px;
    border: 1px solid rgba(181, 196, 177, 0.25);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.animation-panel__color-input::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.animation-panel__color-input::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

.animation-panel__color-input::-moz-color-swatch {
    border: none;
    border-radius: 3px;
}

.animation-panel__color-input:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* ── Text input ──────────────────────────────────────────────────── */

.animation-panel__text-input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid rgba(181, 196, 177, 0.25);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--color-text-light);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    transition: border-color 0.2s ease;
}

.animation-panel__text-input:focus {
    outline: none;
    border-color: var(--color-gold);
}

.animation-panel__text-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

/* ── Footer ──────────────────────────────────────────────────────── */

.animation-panel__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid rgba(181, 196, 177, 0.15);
    flex-shrink: 0;
}

.animation-panel__saved-msg {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-sage);
    animation: animPanelSavedFade 2s ease-out forwards;
}

@keyframes animPanelSavedFade {
    0%, 60% { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Footer buttons ──────────────────────────────────────────────── */

.animation-panel__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: 30px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    user-select: none;
    line-height: 1.2;
}

.animation-panel__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.animation-panel__btn:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.animation-panel__btn--reset-all {
    background: transparent;
    border-color: rgba(181, 196, 177, 0.3);
    color: rgba(255, 255, 255, 0.65);
}

.animation-panel__btn--reset-all:hover:not(:disabled) {
    background: rgba(181, 196, 177, 0.1);
    border-color: rgba(181, 196, 177, 0.5);
    color: var(--color-text-light);
}

.animation-panel__btn--save {
    margin-left: auto;
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-text-dark);
    font-weight: 600;
}

.animation-panel__btn--save:hover:not(:disabled) {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.animation-panel__btn--save:disabled {
    background: rgba(212, 184, 150, 0.3);
    border-color: rgba(212, 184, 150, 0.2);
    color: rgba(61, 53, 48, 0.5);
}

/* ── Responsive: tablet ──────────────────────────────────────────── */

@media (max-width: 768px) {
    .animation-panel {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 60vh;
        border-radius: 16px 16px 0 0;
        animation: animationPanelSlideUp 0.3s ease-out;
    }

    .animation-panel__body {
        max-height: calc(60vh - 120px);
    }

    @keyframes animationPanelSlideUp {
        from {
            opacity: 0;
            transform: translateY(40px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ── Responsive: mobile ──────────────────────────────────────────── */

@media (max-width: 480px) {
    .animation-panel {
        max-height: 65vh;
        padding: 0;
    }

    .animation-panel__header {
        padding: 10px 12px 8px;
    }

    .animation-panel__category-header {
        padding: 8px 12px;
    }

    .animation-panel__category-body {
        padding: 0 12px 6px;
    }

    .animation-panel__footer {
        padding: 8px 12px 10px;
        flex-wrap: wrap;
    }

    .animation-panel__btn {
        padding: 5px 10px;
        font-size: 0.72rem;
    }

    .animation-panel__setting-label {
        font-size: 0.72rem;
    }

    .animation-panel__setting-desc {
        font-size: 0.64rem;
    }

    .animation-panel__text-input {
        font-size: 0.7rem;
        padding: 4px 6px;
    }

    .animation-panel__value {
        font-size: 0.68rem;
        min-width: 40px;
    }
}

/* ===================================================================
   Content Transform Editor — per-page content adjustment panel (Phase 3B)
   =================================================================== */

/* ── Panel container ─────────────────────────────────────────────── */

.content-transform-panel {
    position: fixed;
    top: 56px;
    left: 16px;
    width: 300px;
    max-height: calc(100vh - 72px);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    background: rgba(61, 53, 48, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(181, 196, 177, 0.2);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text-light);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: contentTransformSlideIn 0.25s ease-out;
}

@keyframes contentTransformSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Header ──────────────────────────────────────────────────────── */

.content-transform-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(181, 196, 177, 0.15);
    flex-shrink: 0;
}

.content-transform-panel__title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.content-transform-panel__title {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-gold);
    white-space: nowrap;
}

.content-transform-panel__page-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 30px;
    background: rgba(181, 196, 177, 0.15);
    border: 1px solid rgba(181, 196, 177, 0.25);
    font-size: 0.68rem;
    color: var(--color-sage);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Scrollable body ─────────────────────────────────────────────── */

.content-transform-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(181, 196, 177, 0.3) transparent;
}

.content-transform-panel__body::-webkit-scrollbar {
    width: 5px;
}

.content-transform-panel__body::-webkit-scrollbar-track {
    background: transparent;
}

.content-transform-panel__body::-webkit-scrollbar-thumb {
    background: rgba(181, 196, 177, 0.3);
    border-radius: 3px;
}

.content-transform-panel__body::-webkit-scrollbar-thumb:hover {
    background: rgba(181, 196, 177, 0.5);
}

/* ── Unit toggle ─────────────────────────────────────────────────── */

.content-transform-panel__unit-toggle {
    display: flex;
    gap: 0;
    border: 1px solid rgba(181, 196, 177, 0.25);
    border-radius: 30px;
    overflow: hidden;
}

.content-transform-panel__unit-btn {
    padding: 4px 12px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.content-transform-panel__unit-btn:hover {
    background: rgba(181, 196, 177, 0.1);
    color: var(--color-text-light);
}

.content-transform-panel__unit-btn--active {
    background: var(--color-gold);
    color: var(--color-text-dark);
    font-weight: 600;
}

.content-transform-panel__unit-btn--active:hover {
    background: var(--color-accent);
    color: var(--color-text-dark);
}

.content-transform-panel__unit-btn:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: -2px;
}

/* ── Padding grid (2x2) ─────────────────────────────────────────── */

.content-transform-panel__padding-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}

.content-transform-panel__padding-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.content-transform-panel__padding-label {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    min-width: 36px;
}

.content-transform-panel__padding-field .property-panel__field-input {
    flex: 1;
    min-width: 0;
}

/* ── Guide toggle button ─────────────────────────────────────────── */

.content-transform-panel__guide-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid rgba(181, 196, 177, 0.3);
    border-radius: 30px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-body);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    user-select: none;
}

.content-transform-panel__guide-toggle:hover {
    background: rgba(181, 196, 177, 0.1);
    border-color: rgba(181, 196, 177, 0.45);
    color: var(--color-text-light);
}

.content-transform-panel__guide-toggle--active {
    background: var(--color-forest);
    border-color: var(--color-sage);
    color: var(--color-text-light);
}

.content-transform-panel__guide-toggle--active:hover {
    background: rgba(61, 89, 65, 0.85);
}

.content-transform-panel__guide-toggle:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* ── Action buttons row ──────────────────────────────────────────── */

.content-transform-panel__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid rgba(181, 196, 177, 0.1);
}

.content-transform-panel__action-btn {
    font-size: 0.78rem;
}

/* ── Spinner ─────────────────────────────────────────────────────── */

.content-transform-panel__spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(44, 44, 44, 0.25);
    border-top-color: var(--color-text-dark);
    border-radius: 50%;
    animation: content-transform-spin 0.6s linear infinite;
}

@keyframes content-transform-spin {
    to { transform: rotate(360deg); }
}

/* ── Error message ───────────────────────────────────────────────── */

.content-transform-panel__error {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(192, 57, 43, 0.15);
    border: 1px solid rgba(192, 57, 43, 0.3);
    font-size: 0.72rem;
    color: #ff6b6b;
    line-height: 1.35;
}

/* ===================================================================
   Visual Guides — grid overlay + center crosshair on book-page-content
   =================================================================== */

.book-page-content.book-page--guides {
    position: relative;
}

.book-page-content.book-page--guides::before,
.book-page-content.book-page--guides::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}

/* Grid overlay — semi-transparent blue repeating lines */
.book-page-content.book-page--guides::before {
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(66, 133, 244, 0.12) 0px,
            rgba(66, 133, 244, 0.12) 1px,
            transparent 1px,
            transparent 50px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(66, 133, 244, 0.12) 0px,
            rgba(66, 133, 244, 0.12) 1px,
            transparent 1px,
            transparent 50px
        );
}

/* Center crosshair lines */
.book-page-content.book-page--guides::after {
    background-image:
        linear-gradient(
            0deg,
            transparent calc(50% - 0.5px),
            rgba(244, 67, 54, 0.35) calc(50% - 0.5px),
            rgba(244, 67, 54, 0.35) calc(50% + 0.5px),
            transparent calc(50% + 0.5px)
        ),
        linear-gradient(
            90deg,
            transparent calc(50% - 0.5px),
            rgba(244, 67, 54, 0.35) calc(50% - 0.5px),
            rgba(244, 67, 54, 0.35) calc(50% + 0.5px),
            transparent calc(50% + 0.5px)
        );
}

/* ── Responsive: Content Transform Panel ─────────────────────────── */

@media (max-width: 768px) {
    .content-transform-panel {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 55vh;
        border-radius: 16px 16px 0 0;
        animation: contentTransformSlideUp 0.3s ease-out;
    }

    .content-transform-panel__body {
        max-height: calc(55vh - 80px);
    }

    @keyframes contentTransformSlideUp {
        from {
            opacity: 0;
            transform: translateY(40px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

@media (max-width: 480px) {
    .content-transform-panel {
        max-height: 60vh;
    }

    .content-transform-panel__body {
        padding: 10px 12px;
    }

    .content-transform-panel__header {
        padding: 10px 12px 8px;
    }

    .content-transform-panel__title {
        font-size: 0.82rem;
    }

    .content-transform-panel__padding-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .content-transform-panel__actions {
        flex-wrap: wrap;
    }
}

/* ===================================================================
   Effect List Panel (Layers) — left-side panel showing all effects
   =================================================================== */

.effect-list-panel {
    position: fixed;
    top: 56px;
    left: 16px;
    width: 280px;
    max-height: calc(100vh - 72px);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    background: rgba(61, 53, 48, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(181, 196, 177, 0.2);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text-light);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: effectListSlideIn 0.25s ease-out;
}

@keyframes effectListSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.effect-list-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(181, 196, 177, 0.15);
    flex-shrink: 0;
}

.effect-list-panel__title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.effect-list-panel__title {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-gold);
}

.effect-list-panel__count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(181, 196, 177, 0.15);
    border: 1px solid rgba(181, 196, 177, 0.25);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-sage);
}

.effect-list-panel__close {
    background: none;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.effect-list-panel__close:hover {
    opacity: 1;
}

.effect-list-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(181, 196, 177, 0.3) transparent;
}

.effect-list-panel__body::-webkit-scrollbar {
    width: 5px;
}

.effect-list-panel__body::-webkit-scrollbar-track {
    background: transparent;
}

.effect-list-panel__body::-webkit-scrollbar-thumb {
    background: rgba(181, 196, 177, 0.3);
    border-radius: 3px;
}

.effect-list-panel__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 32px 16px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.82rem;
    text-align: center;
}

.effect-list-panel__empty-hint {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
}

.effect-list-panel__list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.effect-list-panel__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-left: 3px solid transparent;
}

.effect-list-panel__item:hover {
    background: rgba(181, 196, 177, 0.08);
}

.effect-list-panel__item--selected {
    background: rgba(212, 184, 150, 0.12);
    border-left-color: var(--color-gold);
}

.effect-list-panel__item--disabled {
    opacity: 0.45;
}

.effect-list-panel__item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.effect-list-panel__item-type {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.effect-list-panel__item-name {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.effect-list-panel__item-meta {
    flex-shrink: 0;
}

.effect-list-panel__item-zindex {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(181, 196, 177, 0.1);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.45);
}

.effect-list-panel__item-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.effect-list-panel__item:hover .effect-list-panel__item-actions,
.effect-list-panel__item--selected .effect-list-panel__item-actions {
    opacity: 1;
}

.effect-list-panel__item-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.effect-list-panel__item-btn:hover {
    background: rgba(181, 196, 177, 0.15);
    color: var(--color-text-light);
}

.effect-list-panel__item-btn--delete:hover {
    background: rgba(192, 57, 43, 0.2);
    color: #e74c3c;
}

/* ===================================================================
   Background Editor Panel — right-side panel for page backgrounds
   =================================================================== */

.background-editor-panel {
    position: fixed;
    top: 56px;
    right: 16px;
    width: 300px;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    z-index: 10001;
    background: rgba(61, 53, 48, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(181, 196, 177, 0.2);
    border-radius: 12px;
    padding: 16px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text-light);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: propertyPanelSlideIn 0.25s ease-out;
}

.background-editor-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(181, 196, 177, 0.15);
}

.background-editor-panel__title {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-gold);
}

.background-editor-panel__close {
    background: none;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.background-editor-panel__close:hover {
    opacity: 1;
}

.background-editor-panel__body {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(181, 196, 177, 0.3) transparent;
}

.background-editor-panel__preview {
    margin-top: 8px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(181, 196, 177, 0.15);
    max-height: 120px;
}

.background-editor-panel__preview img {
    width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: cover;
    display: block;
}

.background-editor-panel__image-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.background-editor-panel__image-path {
    flex: 1;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Courier New', Courier, monospace;
}

.background-editor-panel__upload {
    margin-top: 8px;
}

.background-editor-panel__upload label {
    cursor: pointer;
}

.background-editor-panel__upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.background-editor-panel__actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(181, 196, 177, 0.1);
    display: flex;
    justify-content: flex-end;
}

/* ── Dragging state ──────────────────────────────────────────────────── */

.visual-effect.dragging {
    cursor: grabbing !important;
    outline-style: solid !important;
    outline-color: var(--color-gold) !important;
    box-shadow: 0 4px 20px rgba(212, 184, 150, 0.3) !important;
    transition: none !important;
}

/* ── Responsive: Effect List Panel ───────────────────────────────────── */

@media (max-width: 768px) {
    .effect-list-panel {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 50vh;
        border-radius: 16px 16px 0 0;
    }

    .background-editor-panel {
        right: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100vh - 80px);
    }
}

/* ===================================================================
   Book Geometry Editor — 3D rotation, hover, and part adjustment panel
   =================================================================== */

.book-geometry-panel {
    position: fixed;
    top: 56px;
    left: 60px;
    width: 340px;
    max-height: calc(100vh - 72px);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    background: rgba(61, 53, 48, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(181, 196, 177, 0.2);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text-light);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: bookGeometrySlideIn 0.25s ease-out;
}

@keyframes bookGeometrySlideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.book-geometry-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(181, 196, 177, 0.15);
    flex-shrink: 0;
}

.book-geometry-panel__title {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-gold);
}

.book-geometry-panel__close {
    background: none;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.book-geometry-panel__close:hover { opacity: 1; }

.book-geometry-panel__close:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
    opacity: 1;
}

.book-geometry-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(181, 196, 177, 0.3) transparent;
}

.book-geometry-panel__body::-webkit-scrollbar { width: 5px; }
.book-geometry-panel__body::-webkit-scrollbar-track { background: transparent; }
.book-geometry-panel__body::-webkit-scrollbar-thumb {
    background: rgba(181, 196, 177, 0.3);
    border-radius: 3px;
}

/* ── Section (collapsible group) ── */

.book-geometry-panel__section {
    border-bottom: 1px solid rgba(181, 196, 177, 0.08);
}

.book-geometry-panel__section:last-child { border-bottom: none; }

.book-geometry-panel__section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--color-sage);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    text-align: left;
}

.book-geometry-panel__section-header:hover {
    background: rgba(181, 196, 177, 0.06);
    color: var(--color-gold);
}

.book-geometry-panel__section-header:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: -2px;
}

.book-geometry-panel__chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.book-geometry-panel__chevron--open { transform: rotate(90deg); }

.book-geometry-panel__section-body {
    padding: 2px 16px 10px;
    animation: bookGeometrySectionExpand 0.2s ease-out;
}

@keyframes bookGeometrySectionExpand {
    from { opacity: 0; max-height: 0; }
    to   { opacity: 1; max-height: 600px; }
}

/* ── Slider field ── */

.book-geometry-panel__field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.book-geometry-panel__field-label {
    flex: 0 0 90px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.book-geometry-panel__range {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(181, 196, 177, 0.2);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.book-geometry-panel__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-gold);
    border: 2px solid rgba(61, 53, 48, 0.9);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}

.book-geometry-panel__range::-webkit-slider-thumb:hover { transform: scale(1.2); }

.book-geometry-panel__range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-gold);
    border: 2px solid rgba(61, 53, 48, 0.9);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.book-geometry-panel__range::-moz-range-track {
    height: 4px;
    background: rgba(181, 196, 177, 0.2);
    border-radius: 2px;
    border: none;
}

.book-geometry-panel__range:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
    border-radius: 2px;
}

.book-geometry-panel__field-value {
    flex: 0 0 auto;
    min-width: 54px;
    text-align: right;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

/* ── Hint text ── */

.book-geometry-panel__hint {
    margin-top: 4px;
    font-size: 0.68rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.3;
}

/* ── Footer ── */

.book-geometry-panel__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid rgba(181, 196, 177, 0.15);
    flex-shrink: 0;
}

.book-geometry-panel__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: 30px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    user-select: none;
    line-height: 1.2;
}

.book-geometry-panel__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.book-geometry-panel__btn:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.book-geometry-panel__btn--reset {
    background: transparent;
    border-color: rgba(181, 196, 177, 0.3);
    color: rgba(255, 255, 255, 0.65);
}

.book-geometry-panel__btn--reset:hover {
    background: rgba(181, 196, 177, 0.1);
    border-color: rgba(181, 196, 177, 0.5);
    color: var(--color-text-light);
}

.book-geometry-panel__btn--save {
    margin-left: auto;
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-text-dark);
    font-weight: 600;
}

.book-geometry-panel__btn--save:hover:not(:disabled) {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.book-geometry-panel__btn--save:disabled {
    background: rgba(212, 184, 150, 0.3);
    border-color: rgba(212, 184, 150, 0.2);
    color: rgba(61, 53, 48, 0.5);
}

.book-geometry-panel__saved-msg {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-sage);
    animation: bookGeometrySavedFade 2s ease-out forwards;
}

@keyframes bookGeometrySavedFade {
    0%, 60% { opacity: 1; }
    100% { opacity: 0; }
}

.book-geometry-panel__spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(44, 44, 44, 0.25);
    border-top-color: var(--color-text-dark);
    border-radius: 50%;
    animation: bookGeometrySpin 0.6s linear infinite;
}

@keyframes bookGeometrySpin { to { transform: rotate(360deg); } }

/* ── Responsive ── */

@media (max-width: 768px) {
    .book-geometry-panel {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 60vh;
        border-radius: 16px 16px 0 0;
        animation: bookGeometrySlideUp 0.3s ease-out;
    }

    .book-geometry-panel__body {
        max-height: calc(60vh - 120px);
    }

    @keyframes bookGeometrySlideUp {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

@media (max-width: 480px) {
    .book-geometry-panel {
        max-height: 65vh;
    }

    .book-geometry-panel__header { padding: 10px 12px 8px; }
    .book-geometry-panel__section-header { padding: 8px 12px; }
    .book-geometry-panel__section-body { padding: 2px 12px 8px; }
    .book-geometry-panel__footer { padding: 8px 12px 10px; }
    .book-geometry-panel__field-label { flex: 0 0 76px; font-size: 0.7rem; }
    .book-geometry-panel__field-value { min-width: 46px; font-size: 0.65rem; }
}


/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    .design-editor-toolbar,
    .property-panel,
    .effect-catalog,
    .animation-settings-panel,
    .content-transform-panel,
    .effect-list-panel,
    .background-editor-panel,
    .book-geometry-panel {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .effect-catalog__preview-spinner,
    .animation-settings-panel__spinner,
    .content-transform-panel__spinner,
    .book-geometry-panel__spinner,
    .book-part-panel__spinner {
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════
   Book Part Property Panel — context-aware panel for selected 3D book parts
   ═══════════════════════════════════════════════════════ */

.book-part-panel {
    position: fixed;
    top: 56px;
    right: 16px;
    width: 320px;
    max-height: calc(100vh - 72px);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    background: rgba(61, 53, 48, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(181, 196, 177, 0.2);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text-light);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: bookPartSlideIn 0.25s ease-out;
}

@keyframes bookPartSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.book-part-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(181, 196, 177, 0.15);
    flex-shrink: 0;
}

.book-part-panel__title {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-gold);
}

.book-part-panel__close {
    background: none;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.book-part-panel__close:hover { opacity: 1; }

.book-part-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(181, 196, 177, 0.3) transparent;
}

.book-part-panel__section {
    padding: 10px 0;
    border-bottom: 1px solid rgba(181, 196, 177, 0.1);
}

.book-part-panel__section:last-child { border-bottom: none; }

.book-part-panel__section-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(181, 196, 177, 0.7);
    margin-bottom: 8px;
}

.book-part-panel__field {
    display: grid;
    grid-template-columns: 85px 1fr 55px;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.book-part-panel__field-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.book-part-panel__range {
    width: 100%;
    height: 4px;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(181, 196, 177, 0.2);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.book-part-panel__range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-gold);
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.book-part-panel__range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-gold);
    cursor: pointer;
    border: none;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.book-part-panel__field-value {
    font-size: 0.72rem;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.55);
    text-align: right;
}

/* Color picker fields */
.book-part-panel__color-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.book-part-panel__color-input {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(181, 196, 177, 0.3);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    background: none;
    flex-shrink: 0;
}

.book-part-panel__color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.book-part-panel__color-input::-webkit-color-swatch { border-radius: 4px; border: none; }
.book-part-panel__color-input::-moz-color-swatch { border-radius: 4px; border: none; }

.book-part-panel__color-hex {
    font-size: 0.72rem;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.45);
    margin-left: auto;
}

.book-part-panel__color-hex-input {
    width: 72px;
    font-size: 0.72rem;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(181, 196, 177, 0.2);
    border-radius: 4px;
    padding: 3px 6px;
    margin-left: auto;
    text-transform: uppercase;
}

.book-part-panel__color-hex-input:focus {
    outline: none;
    border-color: var(--color-gold, #D4AF37);
}

/* Footer */
.book-part-panel__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid rgba(181, 196, 177, 0.15);
    flex-shrink: 0;
}

.book-part-panel__btn {
    padding: 6px 16px;
    border-radius: 30px;
    border: 1px solid rgba(181, 196, 177, 0.3);
    background: transparent;
    color: var(--color-text-light);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.book-part-panel__btn:hover { background: rgba(181, 196, 177, 0.15); }

.book-part-panel__btn--save {
    background: var(--color-gold);
    color: var(--color-text-dark);
    border-color: var(--color-gold);
}

.book-part-panel__btn--save:hover { opacity: 0.9; }
.book-part-panel__btn--save:disabled { opacity: 0.5; cursor: not-allowed; }

.book-part-panel__saved-msg {
    font-size: 0.75rem;
    color: var(--color-sage);
    animation: bookPartSavedFade 2s ease forwards;
}

@keyframes bookPartSavedFade {
    0%   { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

.book-part-panel__spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(61, 53, 48, 0.3);
    border-top-color: var(--color-text-dark);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: 4px;
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 992px) {
    .book-part-panel {
        width: 280px;
        right: 8px;
    }
}

@media (max-width: 768px) {
    .book-part-panel {
        width: 260px;
        right: 4px;
        top: 48px;
    }
}

/* ── Viewport Override Indicators ─────────────────────────────────── */

.property-panel__field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.property-panel__viewport-badge {
    padding: 4px 8px;
    background: rgba(212, 184, 150, 0.2);
    border: 1px solid var(--color-gold, #d4b896);
    border-radius: 4px;
    font-size: 11px;
    color: var(--color-gold, #d4b896);
    text-align: center;
    margin-bottom: 8px;
    font-family: var(--font-body, 'Lato', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.override-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.override-indicator__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(164, 180, 148, 0.4);
    border: 1px solid rgba(164, 180, 148, 0.6);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.override-indicator__dot--overridden {
    background: var(--color-gold, #D4AF37);
    border-color: var(--color-gold, #D4AF37);
    box-shadow: 0 0 4px rgba(212, 175, 55, 0.4);
}

.override-indicator__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 3px;
    background: rgba(212, 175, 55, 0.15);
    color: var(--color-gold, #D4AF37);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.override-indicator__reset:hover {
    background: rgba(212, 175, 55, 0.3);
    border-color: var(--color-gold, #D4AF37);
}

.field--locked {
    opacity: 0.45;
    pointer-events: none;
    position: relative;
}

.field--locked::after {
    content: '';
    position: absolute;
    inset: 0;
    cursor: not-allowed;
    pointer-events: auto;
}

/* ===================================================================
   Page Turn Editor — floating panel for page-turn physics & effects
   Glass morphism pattern matching animation-panel / book-geometry-panel
   =================================================================== */

.page-turn-editor {
    position: fixed;
    top: 56px;
    left: 60px;
    width: 340px;
    max-height: calc(100vh - 72px);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    background: rgba(61, 53, 48, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(181, 196, 177, 0.2);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text-light);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: pageTurnEditorSlideIn 0.25s ease-out;
}

@keyframes pageTurnEditorSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Header ──────────────────────────────────────────────────────── */

.page-turn-editor__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(181, 196, 177, 0.15);
    flex-shrink: 0;
}

.page-turn-editor__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-gold);
}

.page-turn-editor__title svg {
    opacity: 0.85;
    flex-shrink: 0;
}

.page-turn-editor__close {
    background: none;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.page-turn-editor__close:hover {
    opacity: 1;
}

.page-turn-editor__close:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
    opacity: 1;
}

/* ── Scrollable body ─────────────────────────────────────────────── */

.page-turn-editor__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(181, 196, 177, 0.3) transparent;
}

.page-turn-editor__body::-webkit-scrollbar {
    width: 5px;
}

.page-turn-editor__body::-webkit-scrollbar-track {
    background: transparent;
}

.page-turn-editor__body::-webkit-scrollbar-thumb {
    background: rgba(181, 196, 177, 0.3);
    border-radius: 3px;
}

.page-turn-editor__body::-webkit-scrollbar-thumb:hover {
    background: rgba(181, 196, 177, 0.5);
}

/* ── Loading / empty states ──────────────────────────────────────── */

.page-turn-editor__loading,
.page-turn-editor__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82rem;
}

.page-turn-editor__spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--color-gold);
    border-radius: 50%;
    animation: pageTurnEditorSpin 0.6s linear infinite;
}

.page-turn-editor__spinner--small {
    width: 12px;
    height: 12px;
}

@keyframes pageTurnEditorSpin {
    to { transform: rotate(360deg); }
}

/* ── Collapsible sections ────────────────────────────────────────── */

.page-turn-editor__section {
    border-bottom: 1px solid rgba(181, 196, 177, 0.08);
}

.page-turn-editor__section:last-child {
    border-bottom: none;
}

.page-turn-editor__section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--color-sage);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    text-align: left;
}

.page-turn-editor__section-header:hover {
    background: rgba(181, 196, 177, 0.06);
    color: var(--color-gold);
}

.page-turn-editor__section-header:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: -2px;
}

.page-turn-editor__chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.page-turn-editor__chevron--open {
    transform: rotate(90deg);
}

.page-turn-editor__section-name {
    flex: 1;
}

.page-turn-editor__section-count {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(181, 196, 177, 0.15);
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}

.page-turn-editor__section-body {
    padding: 0 16px 8px;
    animation: pageTurnSectionExpand 0.2s ease-out;
}

@keyframes pageTurnSectionExpand {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

/* ── Individual field groups ─────────────────────────────────────── */

.page-turn-editor__field-group {
    padding: 8px 0;
    border-bottom: 1px solid rgba(181, 196, 177, 0.06);
}

.page-turn-editor__field-group:last-child {
    border-bottom: none;
}

.page-turn-editor__field-group--modified {
    position: relative;
}

.page-turn-editor__field-group--modified::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-gold);
}

.page-turn-editor__field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 2px;
}

.page-turn-editor__field-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-light);
    cursor: default;
}

.page-turn-editor__field-desc {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.35;
    margin-bottom: 6px;
}

/* ── Reset button (per setting) ──────────────────────────────────── */

.page-turn-editor__reset-one {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid rgba(181, 196, 177, 0.2);
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.page-turn-editor__reset-one:hover {
    background: rgba(181, 196, 177, 0.12);
    color: var(--color-gold);
    border-color: rgba(212, 184, 150, 0.4);
}

.page-turn-editor__reset-one:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 1px;
}

/* ── Field containers ────────────────────────────────────────────── */

.page-turn-editor__field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-turn-editor__field--range {
    gap: 10px;
}

.page-turn-editor__field--color {
    gap: 10px;
}

.page-turn-editor__field--text {
    gap: 0;
}

/* ── Value display ───────────────────────────────────────────────── */

.page-turn-editor__field-value {
    flex: 0 0 auto;
    min-width: 48px;
    text-align: right;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.page-turn-editor__field-value--mono {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
}

/* ── Color picker input ──────────────────────────────────────────── */

.page-turn-editor__color-input {
    width: 36px;
    height: 22px;
    padding: 1px;
    border: 1px solid rgba(181, 196, 177, 0.25);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.page-turn-editor__color-input::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.page-turn-editor__color-input::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

.page-turn-editor__color-input::-moz-color-swatch {
    border: none;
    border-radius: 3px;
}

.page-turn-editor__color-input:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* ── Text input ──────────────────────────────────────────────────── */

.page-turn-editor__text-input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid rgba(181, 196, 177, 0.25);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--color-text-light);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    transition: border-color 0.2s ease;
}

.page-turn-editor__text-input:focus {
    outline: none;
    border-color: var(--color-gold);
}

.page-turn-editor__text-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

/* ── Preview button ──────────────────────────────────────────────── */

.page-turn-editor__preview-area {
    padding: 8px 16px;
    border-top: 1px solid rgba(181, 196, 177, 0.1);
    flex-shrink: 0;
}

.page-turn-editor__preview-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 8px 16px;
    border: 1.5px solid var(--color-gold);
    border-radius: 30px;
    background: transparent;
    color: var(--color-gold);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    user-select: none;
}

.page-turn-editor__preview-btn:hover {
    background: rgba(212, 175, 55, 0.12);
    color: var(--color-accent);
    transform: translateY(-1px);
}

.page-turn-editor__preview-btn:active {
    transform: translateY(0);
}

.page-turn-editor__preview-btn:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* ── Footer ──────────────────────────────────────────────────────── */

.page-turn-editor__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid rgba(181, 196, 177, 0.15);
    flex-shrink: 0;
}

.page-turn-editor__saved-msg {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-sage);
    animation: pageTurnSavedFade 2s ease-out forwards;
}

@keyframes pageTurnSavedFade {
    0%, 60% { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Footer buttons ──────────────────────────────────────────────── */

.page-turn-editor__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: 30px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    user-select: none;
    line-height: 1.2;
}

.page-turn-editor__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.page-turn-editor__btn:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.page-turn-editor__btn--reset {
    background: transparent;
    border-color: rgba(181, 196, 177, 0.3);
    color: rgba(255, 255, 255, 0.65);
}

.page-turn-editor__btn--reset:hover:not(:disabled) {
    background: rgba(181, 196, 177, 0.1);
    border-color: rgba(181, 196, 177, 0.5);
    color: var(--color-text-light);
}

.page-turn-editor__btn--save {
    margin-left: auto;
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-text-dark);
    font-weight: 600;
}

.page-turn-editor__btn--save:hover:not(:disabled) {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.page-turn-editor__btn--save:disabled {
    background: rgba(212, 184, 150, 0.3);
    border-color: rgba(212, 184, 150, 0.2);
    color: rgba(61, 53, 48, 0.5);
}

/* ── Responsive: mobile slides from bottom ───────────────────────── */

@media (max-width: 768px) {
    .page-turn-editor {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 60vh;
        border-radius: 16px 16px 0 0;
        animation: pageTurnEditorSlideUp 0.3s ease-out;
    }

    .page-turn-editor__body {
        max-height: calc(60vh - 140px);
    }

    @keyframes pageTurnEditorSlideUp {
        from {
            opacity: 0;
            transform: translateY(40px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}