/* ═══════════════════════════════════════════
   Flipbook Viewer — Premium Styles
   4 Themes: stone_dark, elegant_marble,
   earthy_warm, modern_red
   ═══════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root {
    --fb-bg: #0f1118;
    --fb-surface: rgba(255, 255, 255, 0.06);
    --fb-text: #f0f0f0;
    --fb-muted: rgba(255, 255, 255, 0.55);
    --fb-accent: #c9a96e;
    --fb-accent2: #8f7c61;
    --fb-paper: #f4efe7;
    --fb-paper-edge: #ddd2c2;
    --fb-paper-line: rgba(70, 54, 36, 0.08);
    --fb-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    --fb-shadow-strong: 0 36px 90px rgba(0, 0, 0, 0.55);
    --fb-radius: 14px;
    --fb-toolbar-bg: rgba(10, 12, 18, 0.78);
    --fb-toolbar-blur: blur(22px);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow: hidden;
    font-family:
        "Plus Jakarta Sans",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
    background:
        radial-gradient(
            circle at top,
            rgba(201, 169, 110, 0.1),
            transparent 32%
        ),
        radial-gradient(
            circle at bottom,
            rgba(255, 255, 255, 0.04),
            transparent 30%
        ),
        linear-gradient(180deg, #151821 0%, #0e1016 100%);
    color: var(--fb-text);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.015) 0,
            rgba(255, 255, 255, 0) 8%,
            rgba(255, 255, 255, 0) 92%,
            rgba(255, 255, 255, 0.015) 100%
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.035),
            transparent 65%
        );
    opacity: 0.8;
}

/* ══════════════════════════════════════
   COVER PAGE — Shared Structure
   ══════════════════════════════════════ */
.fb-cover {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3.25rem 2.2rem;
    overflow: hidden;
    border-radius: 4px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 12px 0 24px rgba(0, 0, 0, 0.22),
        inset -10px 0 18px rgba(255, 255, 255, 0.03);
}

.fb-cover-front::before,
.fb-cover-back::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
}

.fb-cover-front::after,
.fb-cover-back::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18px;
    left: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.38),
        rgba(0, 0, 0, 0.12) 45%,
        rgba(255, 255, 255, 0.04) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.fb-cover-back::after {
    left: auto;
    right: 0;
    background: linear-gradient(
        270deg,
        rgba(0, 0, 0, 0.34),
        rgba(0, 0, 0, 0.12) 45%,
        rgba(255, 255, 255, 0.03) 100%
    );
}

/* Logo */
.fb-cover-logo-wrap {
    margin-bottom: 1.6rem;
}
.fb-cover-logo {
    max-width: 68%;
    max-height: 62px;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.22));
}

/* Divider */
.fb-cover-divider {
    width: 84px;
    height: 2px;
    margin: 1rem auto 1.2rem;
    border-radius: 999px;
}

/* Title */
.fb-cover-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-bottom: 0.55rem;
    line-height: 1.12;
    text-wrap: balance;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.fb-cover-subtitle {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.92;
}

/* Year */
.fb-cover-year {
    margin-top: 2.2rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(3px);
}

/* Decorative Lines */
.fb-cover-deco-top,
.fb-cover-deco-bottom {
    position: absolute;
    left: 11%;
    right: 11%;
    height: 1px;
}
.fb-cover-deco-top {
    top: 2.1rem;
}
.fb-cover-deco-bottom {
    bottom: 2.1rem;
}

/* Corner Accents */
.fb-cover-corner {
    position: absolute;
    width: 22px;
    height: 22px;
}
.fb-cover-corner-tl {
    top: 1.35rem;
    left: 1.35rem;
    border-top: 2px solid;
    border-left: 2px solid;
}
.fb-cover-corner-tr {
    top: 1.35rem;
    right: 1.35rem;
    border-top: 2px solid;
    border-right: 2px solid;
}
.fb-cover-corner-bl {
    bottom: 1.35rem;
    left: 1.35rem;
    border-bottom: 2px solid;
    border-left: 2px solid;
}
.fb-cover-corner-br {
    bottom: 1.35rem;
    right: 1.35rem;
    border-bottom: 2px solid;
    border-right: 2px solid;
}

/* ══════════════════════════════════════════════
   THEME 1: STONE DARK
   Inspired by dark basalt with gold accents
   ══════════════════════════════════════════════ */
.fb-theme-stone_dark {
    --fb-bg: #0f1118;
    --fb-accent: #c9a96e;
    --fb-accent2: #8a7d65;
}

.fb-theme-stone_dark .fb-cover {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0) 36%
        ),
        linear-gradient(
            160deg,
            #0c0f15 0%,
            #171b22 24%,
            #242831 48%,
            #151920 72%,
            #0b0d12 100%
        );
    color: #e8e1d5;
}

.fb-theme-stone_dark .fb-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 80% 50% at 50% 0%,
            rgba(201, 169, 110, 0.1) 0%,
            transparent 60%
        ),
        radial-gradient(
            ellipse 60% 40% at 50% 100%,
            rgba(201, 169, 110, 0.06) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 20% 30%,
            rgba(255, 255, 255, 0.03),
            transparent 22%
        ),
        radial-gradient(
            circle at 75% 72%,
            rgba(255, 255, 255, 0.025),
            transparent 20%
        );
}

.fb-theme-stone_dark .fb-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg width='180' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.06));
    opacity: 0.7;
}

.fb-theme-stone_dark .fb-cover-divider {
    background: linear-gradient(
        90deg,
        transparent,
        #c9a96e 22%,
        #f1dfb4 50%,
        #c9a96e 78%,
        transparent
    );
}
.fb-theme-stone_dark .fb-cover-title {
    color: #f5efe5;
}
.fb-theme-stone_dark .fb-cover-subtitle {
    color: #cfb27d;
}
.fb-theme-stone_dark .fb-cover-year {
    color: rgba(230, 205, 155, 0.88);
}
.fb-theme-stone_dark .fb-cover-deco-top,
.fb-theme-stone_dark .fb-cover-deco-bottom {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(201, 169, 110, 0.35),
        transparent
    );
}
.fb-theme-stone_dark .fb-cover-corner {
    border-color: rgba(201, 169, 110, 0.38);
}

/* ══════════════════════════════════════════════
   THEME 2: ELEGANT MARBLE
   White marble with charcoal accents
   ══════════════════════════════════════════════ */
.fb-theme-elegant_marble {
    --fb-bg: #1b1b1b;
    --fb-accent: #2a2f35;
    --fb-accent2: #8a8a8a;
}

.fb-theme-elegant_marble .fb-cover {
    background: linear-gradient(
        145deg,
        #f8f6f3 0%,
        #ebe8e3 30%,
        #f0ede8 50%,
        #e8e5df 70%,
        #f5f3f0 100%
    );
    color: #1a1d21;
}

.fb-theme-elegant_marble .fb-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 120% 80% at 20% 20%,
            rgba(200, 195, 188, 0.4) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse 80% 100% at 80% 80%,
            rgba(180, 175, 168, 0.3) 0%,
            transparent 50%
        );
}

.fb-theme-elegant_marble .fb-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 180 Q 90 120 180 20' fill='none' stroke='rgba(160,155,148,0.12)' stroke-width='1'/%3E%3Cpath d='M0 140 Q 70 80 160 0' fill='none' stroke='rgba(160,155,148,0.08)' stroke-width='0.5'/%3E%3C/svg%3E");
    opacity: 0.6;
}

.fb-theme-elegant_marble .fb-cover-logo {
    filter: none;
}
.fb-theme-elegant_marble .fb-cover-divider {
    background: linear-gradient(90deg, transparent, #c61a20, transparent);
    height: 3px;
}
.fb-theme-elegant_marble .fb-cover-title {
    color: #1a1d21;
}
.fb-theme-elegant_marble .fb-cover-subtitle {
    color: #61666d;
}
.fb-theme-elegant_marble .fb-cover-year {
    color: #c61a20;
}
.fb-theme-elegant_marble .fb-cover-deco-top,
.fb-theme-elegant_marble .fb-cover-deco-bottom {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(198, 26, 32, 0.25),
        transparent
    );
}
.fb-theme-elegant_marble .fb-cover-corner {
    border-color: rgba(198, 26, 32, 0.3);
}

/* ══════════════════════════════════════════════
   THEME 3: EARTHY WARM
   Warm terracotta / earth tones for stone products
   ══════════════════════════════════════════════ */
.fb-theme-earthy_warm {
    --fb-bg: #1a150f;
    --fb-accent: #c4713b;
    --fb-accent2: #8b6841;
}

.fb-theme-earthy_warm .fb-cover {
    background: linear-gradient(
        155deg,
        #2a1f15 0%,
        #3d2c1e 25%,
        #4a3728 50%,
        #3d2c1e 75%,
        #2a1f15 100%
    );
    color: #f0e8dc;
}

.fb-theme-earthy_warm .fb-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(196, 113, 59, 0.1) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 70% 70%,
            rgba(196, 113, 59, 0.08) 0%,
            transparent 40%
        );
}

.fb-theme-earthy_warm .fb-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='rgba(196,113,59,0.04)' stroke-width='0.5'/%3E%3C/svg%3E");
    opacity: 0.6;
}

.fb-theme-earthy_warm .fb-cover-divider {
    background: linear-gradient(90deg, transparent, #c4713b, transparent);
}
.fb-theme-earthy_warm .fb-cover-title {
    color: #f5ece0;
}
.fb-theme-earthy_warm .fb-cover-subtitle {
    color: #c4713b;
}
.fb-theme-earthy_warm .fb-cover-year {
    color: rgba(196, 113, 59, 0.7);
}
.fb-theme-earthy_warm .fb-cover-deco-top,
.fb-theme-earthy_warm .fb-cover-deco-bottom {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(196, 113, 59, 0.35),
        transparent
    );
}
.fb-theme-earthy_warm .fb-cover-corner {
    border-color: rgba(196, 113, 59, 0.4);
}

/* ══════════════════════════════════════════════
   THEME 4: MODERN RED
   Brand-red with black, bold and modern
   ══════════════════════════════════════════════ */
.fb-theme-modern_red {
    --fb-bg: #0d0d0d;
    --fb-accent: #c61a20;
    --fb-accent2: #e8333a;
}

.fb-theme-modern_red .fb-cover {
    background: linear-gradient(
        165deg,
        #1a0608 0%,
        #2e0c0f 30%,
        #3a1114 45%,
        #2e0c0f 60%,
        #1a0608 100%
    );
    color: #f5f0f0;
}

.fb-theme-modern_red .fb-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 80% 60% at 50% 20%,
            rgba(198, 26, 32, 0.15) 0%,
            transparent 60%
        ),
        radial-gradient(
            ellipse 100% 40% at 50% 100%,
            rgba(198, 26, 32, 0.08) 0%,
            transparent 50%
        );
}

.fb-theme-modern_red .fb-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='10' y='10' width='60' height='60' fill='none' stroke='rgba(198,26,32,0.04)' stroke-width='0.5' rx='2'/%3E%3C/svg%3E");
    opacity: 0.5;
}

.fb-theme-modern_red .fb-cover-divider {
    background: linear-gradient(90deg, transparent, #c61a20, transparent);
    height: 3px;
}
.fb-theme-modern_red .fb-cover-title {
    color: #fff;
}
.fb-theme-modern_red .fb-cover-subtitle {
    color: #e8333a;
}
.fb-theme-modern_red .fb-cover-year {
    color: rgba(232, 51, 58, 0.7);
}
.fb-theme-modern_red .fb-cover-deco-top,
.fb-theme-modern_red .fb-cover-deco-bottom {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(198, 26, 32, 0.4),
        transparent
    );
}
.fb-theme-modern_red .fb-cover-corner {
    border-color: rgba(198, 26, 32, 0.5);
}

/* ══════════════════════════════════════════════
   THEME 5: FOREST SLATE
   Deep green slate with premium mineral feel
   ══════════════════════════════════════════════ */
.fb-theme-forest_slate {
    --fb-bg: #0d1716;
    --fb-accent: #9eb08f;
    --fb-accent2: #667c69;
}

.fb-theme-forest_slate .fb-cover {
    background: linear-gradient(
        155deg,
        #0f1a18 0%,
        #162624 28%,
        #223331 52%,
        #162624 74%,
        #0c1414 100%
    );
    color: #edf1ea;
}

.fb-theme-forest_slate .fb-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 80% 55% at 50% 0%,
            rgba(158, 176, 143, 0.12) 0%,
            transparent 58%
        ),
        radial-gradient(
            circle at 24% 24%,
            rgba(255, 255, 255, 0.035),
            transparent 24%
        ),
        radial-gradient(
            circle at 78% 72%,
            rgba(255, 255, 255, 0.025),
            transparent 22%
        );
}

.fb-theme-forest_slate .fb-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg width='180' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 90 Q 45 70 90 90 T 180 90' fill='none' stroke='rgba(158,176,143,0.06)' stroke-width='1'/%3E%3Cpath d='M0 120 Q 60 100 120 120 T 180 120' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='0.6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.08));
    opacity: 0.68;
}

.fb-theme-forest_slate .fb-cover-divider {
    background: linear-gradient(
        90deg,
        transparent,
        #9eb08f 24%,
        #d8e1cf 50%,
        #9eb08f 76%,
        transparent
    );
}
.fb-theme-forest_slate .fb-cover-title {
    color: #f2f5ef;
}
.fb-theme-forest_slate .fb-cover-subtitle {
    color: #b8c8ab;
}
.fb-theme-forest_slate .fb-cover-year {
    color: rgba(184, 200, 171, 0.82);
}
.fb-theme-forest_slate .fb-cover-deco-top,
.fb-theme-forest_slate .fb-cover-deco-bottom {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(158, 176, 143, 0.34),
        transparent
    );
}
.fb-theme-forest_slate .fb-cover-corner {
    border-color: rgba(158, 176, 143, 0.4);
}

/* ══════════════════════════════════════════════
   THEME 6: COPPER BASALT
   Dark stone base with copper premium highlights
   ══════════════════════════════════════════════ */
.fb-theme-copper_basalt {
    --fb-bg: #140f0d;
    --fb-accent: #c78a5c;
    --fb-accent2: #7f5a43;
}

.fb-theme-copper_basalt .fb-cover {
    background: linear-gradient(
        160deg,
        #120d0c 0%,
        #241915 26%,
        #33231c 50%,
        #221712 72%,
        #100b09 100%
    );
    color: #f3e7df;
}

.fb-theme-copper_basalt .fb-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 82% 56% at 50% 0%,
            rgba(199, 138, 92, 0.14) 0%,
            transparent 60%
        ),
        radial-gradient(
            ellipse 70% 46% at 50% 100%,
            rgba(199, 138, 92, 0.08) 0%,
            transparent 52%
        );
}

.fb-theme-copper_basalt .fb-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 18 H112 M8 60 H112 M8 102 H112' stroke='rgba(199,138,92,0.05)' stroke-width='1'/%3E%3Cpath d='M18 8 V112 M60 8 V112 M102 8 V112' stroke='rgba(255,255,255,0.025)' stroke-width='0.6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(0, 0, 0, 0.08));
    opacity: 0.7;
}

.fb-theme-copper_basalt .fb-cover-divider {
    background: linear-gradient(
        90deg,
        transparent,
        #c78a5c 24%,
        #f0c49e 50%,
        #c78a5c 76%,
        transparent
    );
}
.fb-theme-copper_basalt .fb-cover-title {
    color: #fff4eb;
}
.fb-theme-copper_basalt .fb-cover-subtitle {
    color: #d9a27a;
}
.fb-theme-copper_basalt .fb-cover-year {
    color: rgba(217, 162, 122, 0.84);
}
.fb-theme-copper_basalt .fb-cover-deco-top,
.fb-theme-copper_basalt .fb-cover-deco-bottom {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(199, 138, 92, 0.34),
        transparent
    );
}
.fb-theme-copper_basalt .fb-cover-corner {
    border-color: rgba(199, 138, 92, 0.42);
}

/* ══════════════════════════════════════════════
   THEME 7: BLUE GRAPHITE
   Cool blue-black catalog look with modern premium feel
   ══════════════════════════════════════════════ */
.fb-theme-blue_graphite {
    --fb-bg: #0d1119;
    --fb-accent: #7f99c6;
    --fb-accent2: #4e6286;
}

.fb-theme-blue_graphite .fb-cover {
    background: linear-gradient(
        158deg,
        #0c1018 0%,
        #141d2a 28%,
        #202c3c 52%,
        #131b28 74%,
        #0a0e15 100%
    );
    color: #eef3fb;
}

.fb-theme-blue_graphite .fb-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 84% 58% at 50% 0%,
            rgba(127, 153, 198, 0.14) 0%,
            transparent 58%
        ),
        radial-gradient(
            ellipse 70% 42% at 50% 100%,
            rgba(127, 153, 198, 0.08) 0%,
            transparent 52%
        );
}

.fb-theme-blue_graphite .fb-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 80 H160 M80 0 V160' stroke='rgba(127,153,198,0.05)' stroke-width='1'/%3E%3Ccircle cx='80' cy='80' r='46' fill='none' stroke='rgba(255,255,255,0.025)' stroke-width='0.8'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(0, 0, 0, 0.08));
    opacity: 0.7;
}

.fb-theme-blue_graphite .fb-cover-divider {
    background: linear-gradient(
        90deg,
        transparent,
        #7f99c6 24%,
        #d8e4fb 50%,
        #7f99c6 76%,
        transparent
    );
}
.fb-theme-blue_graphite .fb-cover-title {
    color: #f7faff;
}
.fb-theme-blue_graphite .fb-cover-subtitle {
    color: #a9bddf;
}
.fb-theme-blue_graphite .fb-cover-year {
    color: rgba(169, 189, 223, 0.84);
}
.fb-theme-blue_graphite .fb-cover-deco-top,
.fb-theme-blue_graphite .fb-cover-deco-bottom {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(127, 153, 198, 0.34),
        transparent
    );
}
.fb-theme-blue_graphite .fb-cover-corner {
    border-color: rgba(127, 153, 198, 0.42);
}

/* ═══════════════════════════════════
   Cover content z-index (above ::before/::after)
   ═══════════════════════════════════ */
.fb-cover-logo-wrap,
.fb-cover-divider,
.fb-cover-title,
.fb-cover-subtitle,
.fb-cover-year,
.fb-cover-deco-top,
.fb-cover-deco-bottom,
.fb-cover-corner {
    position: relative;
    z-index: 2;
}

/* ═══════════════════════════
   TOOLBAR
   ═══════════════════════════ */
.fb-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    height: 56px;
    background: linear-gradient(
        180deg,
        rgba(16, 18, 25, 0.92),
        rgba(10, 12, 18, 0.78)
    );
    backdrop-filter: var(--fb-toolbar-blur);
    -webkit-backdrop-filter: var(--fb-toolbar-blur);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.fb-toolbar-left,
.fb-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.fb-toolbar-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
    color: rgba(255, 255, 255, 0.92);
}
.fb-toolbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--fb-text);
}
.fb-toolbar-brand img {
    height: 28px;
    width: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

.fb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--fb-text);
    cursor: pointer;
    transition: all 0.22s ease;
    font-size: 0.95rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.fb-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(201, 169, 110, 0.36);
    transform: translateY(-1px);
}

.fb-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--fb-text);
    cursor: pointer;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.22s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.fb-btn-back:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(201, 169, 110, 0.34);
    color: white;
    transform: translateY(-1px);
}

/* ═══════════════════════════
   MAIN CONTAINER
   ═══════════════════════════ */
.fb-container {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.03),
            transparent 42%
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(0, 0, 0, 0.04));
}

.fb-book-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    perspective: 2200px;
}

.fb-book {
    border-radius: 0;
}

/* StPageFlip overrides — realistic book shadow */
.stf__parent {
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.3),
        0 18px 42px rgba(0, 0, 0, 0.24),
        0 40px 90px rgba(0, 0, 0, 0.22) !important;
    border-radius: 4px;
    position: relative;
    overflow: visible !important;
    isolation: isolate;
}

.stf__parent::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -18px;
    height: 30px;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.36),
        rgba(0, 0, 0, 0) 70%
    );
    filter: blur(8px);
    z-index: -2;
    pointer-events: none;
}

/* Center binding — only visible when book is open (double spread) */
.fb-spread-open .stf__parent::after {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 50%;
    width: 38px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.03) 16%,
        rgba(0, 0, 0, 0.08) 28%,
        rgba(0, 0, 0, 0.16) 40%,
        rgba(0, 0, 0, 0.28) 47%,
        rgba(0, 0, 0, 0.34) 50%,
        rgba(0, 0, 0, 0.28) 53%,
        rgba(0, 0, 0, 0.16) 60%,
        rgba(0, 0, 0, 0.08) 72%,
        rgba(0, 0, 0, 0.03) 84%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 15;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* Subtle page edge effect */
.stf__wrapper::after {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    right: -5px;
    width: 6px;
    background: repeating-linear-gradient(
        180deg,
        #f7f0e5 0px,
        #e5dac9 1px,
        #fbf6ef 2px,
        #d8ccb8 3px
    );
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.16);
    opacity: 0.95;
    z-index: 4;
    pointer-events: none;
}

.stf__block {
    box-shadow: none !important;
}

/* ═══════════════════════════
   PAGE CONTENT STYLES
   ═══════════════════════════ */
.fb-page {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.55),
            rgba(255, 255, 255, 0.15)
        ),
        linear-gradient(180deg, #f8f1e6 0%, #f3ecdf 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

.fb-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.06),
            transparent 10%,
            transparent 90%,
            rgba(0, 0, 0, 0.04)
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.35),
            transparent 14%,
            transparent 86%,
            rgba(0, 0, 0, 0.03)
        );
    pointer-events: none;
    z-index: 1;
}

.fb-page::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid var(--fb-paper-line);
    pointer-events: none;
    z-index: 1;
}

.fb-page-inner {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 0;
}

.fb-page-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 2px;
    box-shadow: 0 14px 28px rgba(33, 25, 18, 0.1);
}

.fb-page-product {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.5),
            rgba(255, 255, 255, 0.2)
        ),
        linear-gradient(180deg, #f7f1e8 0%, #efe5d6 100%);
    border: 1px solid rgba(94, 72, 48, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.fb-page-product-image {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.06)),
        #ddd3c5;
}
.fb-page-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.fb-page-product-info {
    padding: 1rem 1.25rem 1.15rem;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.88),
        rgba(255, 255, 255, 0.97)
    );
    border-top: 3px solid var(--fb-accent);
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.04);
}
.fb-page-product-category {
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fb-accent);
    margin-bottom: 0.38rem;
}
.fb-page-product-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #1f1b17;
    line-height: 1.35;
    font-family: "Playfair Display", Georgia, serif;
}

/* ═══════════════════════════
   NAVIGATION ARROWS
   ═══════════════════════════ */
.fb-nav-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(17, 19, 27, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--fb-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.25s ease;
    z-index: 50;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.fb-nav-arrow:hover {
    background: rgba(201, 169, 110, 0.18);
    border-color: rgba(201, 169, 110, 0.5);
    transform: translateY(-50%) scale(1.08);
}
.fb-nav-prev {
    left: 1.5rem;
}
.fb-nav-next {
    right: 1.5rem;
}

/* ═══════════════════════════
   BOTTOM BAR
   ═══════════════════════════ */
.fb-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 56px;
    padding: 0 1.5rem;
    background: linear-gradient(
        180deg,
        rgba(10, 12, 18, 0.76),
        rgba(14, 16, 23, 0.92)
    );
    backdrop-filter: var(--fb-toolbar-blur);
    -webkit-backdrop-filter: var(--fb-toolbar-blur);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
}
.fb-page-indicator {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--fb-muted);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.fb-page-indicator strong {
    color: var(--fb-text);
    font-weight: 700;
}
.fb-progress-bar {
    width: 220px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}
.fb-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--fb-accent),
        #f0dfb4 50%,
        var(--fb-accent2, #8f7c61)
    );
    transition: width 0.3s ease;
}

.fb-thumbnail-strip {
    display: flex;
    gap: 6px;
    align-items: center;
    overflow-x: auto;
    max-width: 520px;
    scrollbar-width: none;
}
.fb-thumbnail-strip::-webkit-scrollbar {
    display: none;
}
.fb-thumb {
    width: 34px;
    height: 46px;
    border-radius: 4px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    opacity: 0.62;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
.fb-thumb:hover {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}
.fb-thumb.active {
    border-color: var(--fb-accent);
    opacity: 1;
}
.fb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ═══════════════════════════
   LOADING & EMPTY
   ═══════════════════════════ */
.fb-loading {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--fb-bg);
}
.fb-loading-spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--fb-accent);
    animation: fbSpin 0.8s linear infinite;
}
.fb-loading-text {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--fb-muted);
    font-weight: 500;
}
@keyframes fbSpin {
    to {
        transform: rotate(360deg);
    }
}

.fb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
}
.fb-empty-icon {
    font-size: 4rem;
    color: var(--fb-muted);
    margin-bottom: 1.5rem;
}
.fb-empty h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.fb-empty p {
    color: var(--fb-muted);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}
.fb-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    border-radius: 10px;
    background: var(--fb-accent);
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.fb-empty-btn:hover {
    transform: translateY(-2px);
}

/* ═══════════════════════════
   RESPONSIVE
   ═══════════════════════════ */
@media (max-width: 768px) {
    .fb-toolbar {
        padding: 0 0.75rem;
    }
    .fb-toolbar-title {
        max-width: 160px;
        font-size: 0.85rem;
    }
    .fb-container {
        padding: 0.25rem;
        bottom: 50px;
        top: 50px;
        justify-content: center;
    }
    .fb-book-wrap {
        justify-content: center;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        transform-origin: center center !important;
    }
    .stf__parent {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: calc(100vw - 1rem) !important;
    }
    .stf__wrapper::after,
    .fb-spread-open .stf__parent::after {
        display: none !important;
    }
    .fb-page::before {
        background:
            linear-gradient(
                90deg,
                transparent 0%,
                transparent 82%,
                rgba(0, 0, 0, 0.05) 100%
            ),
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.35),
                transparent 14%,
                transparent 86%,
                rgba(0, 0, 0, 0.03)
            );
    }
    .fb-nav-arrow {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }
    .fb-nav-prev {
        left: 0.5rem;
    }
    .fb-nav-next {
        right: 0.5rem;
    }
    .fb-bottom-bar {
        height: 50px;
        padding: 0 0.75rem;
        gap: 0.5rem;
    }
    .fb-progress-bar {
        width: 100px;
    }
    .fb-thumbnail-strip {
        max-width: 200px;
    }
    .fb-thumb {
        width: 24px;
        height: 32px;
    }
    .fb-page::after {
        inset: 10px;
    }
    .fb-page-inner {
        padding: 10px;
    }
    .fb-page-product-info {
        padding: 0.6rem 0.75rem;
    }
    .fb-page-product-title {
        font-size: 0.78rem;
    }
    .fb-page-product-category {
        font-size: 0.55rem;
    }
    .fb-cover-title {
        font-size: 1.22rem;
    }
    .fb-cover-subtitle {
        font-size: 0.54rem;
        letter-spacing: 0.2em;
    }
    .fb-cover-year {
        margin-top: 1.5rem;
        padding: 0.45rem 0.75rem;
    }
    .fb-cover {
        padding: 2rem 1.5rem;
    }
    .fb-cover-logo {
        max-width: 80%;
    }
}

@media (max-width: 480px) {
    .fb-btn-back span {
        display: none;
    }
    .fb-toolbar-brand img {
        height: 22px;
    }
}