:root {
    color-scheme: dark;
    --page-surface: #16161d;
    --page-blue: #5da0ff;
    --page-blue-soft: #1c2f4d;
    --text-color: #eef1ff;
    --muted: #8c94b6;
    --book-border: rgba(255, 255, 255, 0.1);
    --details-shadow: 0 40px 70px rgba(4, 6, 12, 0.8);
    --serif: "Georgia", "Times New Roman", serif;
}

@font-face {
    font-family: "Peachi";
    src: url("../fonts/peachi.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family:
        "Peachi",
        "Inter",
        "Segoe UI",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
    background: var(--page-surface);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--text-color);
    padding-bottom: 0;
    overflow-x: hidden;
}

.page {
    --page-pad: clamp(1.5rem, 4vw, 4rem);
    width: min(1140px, 100%);
    margin: 0 auto;
    background: var(--page-surface);
    padding: 4rem var(--page-pad) 5rem;
    position: relative;
    flex: 1 0 auto;
}

.intro {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    color: var(--text-color);
    text-align: center;
    align-items: center;
    position: relative;
}

.hero-heading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hero h1 {
    font-size: clamp(2.4rem, 7vw, 4.2rem);
    margin: 0;
    font-weight: 600;
    font-family: "Peachi", "Inter", "Segoe UI", system-ui, sans-serif;
}

.instruction-text {
    font-family: "Peachi", "Inter", sans-serif;
    color: var(--muted);
    font-size: 1rem;
    margin: 0;
    margin-top: -0.2rem;
    opacity: 0.85;
}



.controls {
    position: fixed;
    top: clamp(0.8rem, 2vw, 1.5rem);
    right: clamp(0.8rem, 2vw, 1.5rem);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    z-index: 100;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.controls.is-hidden {
    transform: translateY(-200%);
    pointer-events: none;
}

.custom-select {
    position: relative;
    font-family: "Peachi", "Inter", sans-serif;
    z-index: 20;
}

.select-options[hidden] {
    display: none !important;
}


.select-trigger {
    appearance: none;
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid var(--book-border);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 125px;
    justify-content: space-between;
}


/* Merged Dark Theme Trigger Styles */
.select-trigger:hover,
.select-trigger[aria-expanded="true"] {
    background-color: rgba(40, 40, 50, 0.8);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.trigger-icon {
    font-size: 0.6rem;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.select-trigger[aria-expanded="true"] .trigger-icon {
    transform: rotate(180deg);
}

.select-options {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    left: 0;
    /* Constrain to both sides to ensure full match */
    width: 100%;
    margin: 0;
    padding: 0.5rem;

    list-style: none;
    background: rgba(30, 30, 40, 0.95);
    border: 1px solid var(--book-border);
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px);
    z-index: 200;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.theme-dark .select-options {
    background: rgba(30, 30, 40, 0.95);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.08);
}

.select-options:not([hidden]) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    display: block;
    /* ensure it's visible if hidden prop is removed or overridden */
}

/* Fallback for the hidden attribute in CSS if needed, though browser handles 'hidden' well */
.select-options[hidden] {
    display: none;
}


.option {
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 0.9rem;
    color: var(--text-color);
    outline: none;
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.option::after {
    content: "✓";
    font-weight: bold;
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    color: inherit;
    font-size: 0.8rem;
}

.option[aria-selected="true"]::after {
    opacity: 1;
    transform: translateX(0);
}

.option:last-child {
    margin-bottom: 0;
}

.option:hover,
.option:focus-visible {
    background: var(--page-blue-soft);
    color: var(--page-blue);
}

.option[aria-selected="true"] {
    background: rgba(93, 160, 255, 0.15);
    color: #8ab4ff;
    font-weight: 600;
}


/* --- Search Control --- */
.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.no-results {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Peachi", sans-serif;
    font-size: 1.5rem;
    color: var(--muted);
    opacity: 0.7;
    pointer-events: none;
    text-align: center;
    width: 100%;
}

.no-results[hidden] {
    display: none;
}


.search-toggle {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: none;
    background: rgba(30, 30, 40, 0.6);
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
    backdrop-filter: blur(12px);
    z-index: 2;
    flex-shrink: 0;
}

.search-toggle:hover {
    background: rgba(40, 40, 50, 0.9);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.search-toggle .search-icon {
    line-height: 1;
    color: rgba(245, 246, 255, 0.8);
    transition: transform 0.2s ease;
}

/* Random Toggle (Copy of Search Toggle) */
.random-toggle {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: none;
    background: rgba(30, 30, 40, 0.6);
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
    backdrop-filter: blur(12px);
    flex-shrink: 0;
}

.random-toggle:hover {
    background: rgba(40, 40, 50, 0.9);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.random-toggle .random-icon {
    line-height: 1;
    color: rgba(245, 246, 255, 0.8);
    transition: transform 0.2s ease;
}

.random-toggle:hover .random-icon {
    transform: rotate(15deg);
    /* Playful rotation on icon only */
}

/* --- Tooltips --- */
[data-tooltip] {
    position: relative;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--text-color);
    color: var(--page-surface);
    padding: 0.4rem 0.65rem;
    border-radius: 0.4rem;
    font-size: 0.85rem;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    animation: tooltip-fade-in 0.2s ease forwards;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family: "Peachi", sans-serif;
    letter-spacing: 0.02em;
}

@keyframes tooltip-fade-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(10px);
    }
}

/* Adjust tooltip for theme toggle to prevent overflow */
.theme-toggle[data-tooltip]:hover::after {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(8px);
    animation: tooltip-fade-in-right 0.2s ease forwards;
}

@keyframes tooltip-fade-in-right {
    from {
        opacity: 0;
        transform: translateX(0) translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(10px);
    }
}

/* --- Back to Top Button --- */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(30, 30, 40, 0.7);
    color: var(--text-color);
    border: 1px solid var(--book-border);
    border-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 0.3s ease;
    font-family: sans-serif;
    font-weight: 900;
}

.back-to-top:hover {
    background: rgba(40, 40, 50, 0.9);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.back-to-top .arrow-icon {
    display: inline-block;
    transform: rotate(-90deg);
    padding-bottom: 2px;
    /* Visual adjustment after rotation if needed */
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .back-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
    }
}

.search-input {
    appearance: none;
    border: none;
    background: rgba(30, 30, 40, 0.8);
    backdrop-filter: blur(12px);
    height: 42px;
    border-radius: 21px;
    padding: 0 1rem 0 1.2rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-color);
    width: 0;
    opacity: 0;
    pointer-events: none;
    transition:
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease,
        padding 0.3s ease,
        margin 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-right: -42px;
    /* Overlap with button initially */
    padding-right: 48px;
    /* Space for button when expanded */
}

/* Custom Focus Outline */
.search-input:focus-visible {
    outline: 2px solid rgba(90, 90, 110, 0.8);
    outline-offset: -2px;
    background: rgba(40, 40, 50, 0.95);
}

/* Make button blend in when input is focused */
.search-input:focus-visible+.search-toggle {
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Expanded state */
.search-wrapper.is-active .search-input {
    width: 220px;
    opacity: 1;
    pointer-events: auto;
    margin-right: -42px;
    /* Keep button on top of input's right edge */
}

/* Adjust button when active if needed? 
   Actually, with margin-right -42px on input, the input sits UNDER the button?
   We want button to be to the right of the visible input text.
   Input: [ ...text...   (heere is btn) ]
   So padding-right: 48px handles visual space.
*/


.bookshelf-section {
    width: 100vw;
    margin: 3rem calc(50% - 50vw) 0;
    background: transparent;
    border-radius: 0;
    padding: 0 clamp(1rem, 4vw, 3rem);
    box-shadow: none;
    position: relative;
}



.bookshelf {
    display: flex;
    align-items: flex-end;
    gap: clamp(0.45rem, 1.2vw, 0.85rem);
    overflow-x: auto;
    padding: 0 clamp(1.5rem, 5vw, 6rem) 5.5rem;
    position: relative;
    z-index: 1;
    scrollbar-width: none;
    /* scroll-snap-type: x proximity; */
    touch-action: pan-x;
    flex-wrap: nowrap;
    padding-bottom: 5rem;
    margin-bottom: -4rem;
    overflow-y: visible;
    min-height: 700px;
}

.bookshelf::-webkit-scrollbar {
    display: none;
}

.book {
    --card-height: 324px;
    --card-width: 108px;
    --cover-height: 117px;
    --cover-width: 76px;
    --cover-tilt: 0deg;
    --bg: #f4f5fb;
    --fg: #1b1d2e;
    border: 1px solid var(--book-border);
    height: var(--card-height);
    width: var(--card-width);
    min-width: var(--card-width);
    border-radius: 0.4rem;
    background: var(--bg);
    color: var(--fg);
    padding: 1.2rem 0.8rem 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 0.9rem);
    cursor: pointer;
    transform-origin: bottom center;
    transform: rotate(var(--tilt, 0deg));
    will-change: transform;
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease,
        filter 0.3s ease;
    box-shadow: none;
    border: 1px solid rgba(17, 24, 39, 0.08);
    scroll-snap-align: start;
    outline: none;
    position: relative;
    /* Ensure texture is positioned relative to the book */
    overflow: hidden;
    /* Texture stays inside */
}

/* Hover Elevation */
.book:hover {
    transform: translateY(-30px) rotate(var(--tilt, 0deg));
    box-shadow:
        0 20px 30px -10px rgba(0, 0, 0, 0.3),
        0 0 25px -5px color-mix(in srgb, var(--bg), transparent 30%);
    /* Add shadow for lifting effect */
    z-index: 10;
}

/* Active State - Elevated */
.book.is-active {
    transform: translateY(-30px) rotate(var(--tilt, 0deg));
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.3);
    z-index: 10;
    filter: brightness(1.05);
}

/* Active + Hover = Glow */
.book.is-active:hover {
    box-shadow:
        0 20px 30px -10px rgba(0, 0, 0, 0.3),
        0 0 25px -5px color-mix(in srgb, var(--bg), transparent 30%);
}

/* Texture Overlay */
.book::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Behind text */
    background-image: url("../img/texture.png");
    background-size: 150px;
    background-repeat: repeat;
    opacity: 0.12;
    /* Subtle effect */
    mix-blend-mode: overlay;
    pointer-events: none;
    filter: contrast(120%);
}

/* Optimization: Only apply cover background in Coverflow view */
.view-coverflow .book {
    background-image: var(--cover-image, none);
    background-size: cover;
    background-position: center;
}

.book:hover {
    filter: brightness(1.03);
}





.book .shelf-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.35rem;
    width: 100%;
    height: calc(var(--card-height) - var(--cover-height) - 1rem);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    text-align: left;
    transform: rotate(180deg);
    font-family: "Peachi", "Segoe UI", "Inter", system-ui, sans-serif;
    /* overflow: hidden; Removed to allow seeing wrapped text */
}

.book .shelf-text .author {
    font-size: 0.78rem;
    font-weight: 300;
    font-style: italic;
    opacity: 0.85;
    letter-spacing: 0;
    /* Limit to 2 lines (columns in vertical mode) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

.book .shelf-text .title {
    font-size: 1.05rem;
    font-weight: 300;
    letter-spacing: 0;
    /* Allow wrapping */
    display: inline-block;
    white-space: normal;
    /* Optional: Limit line count if needed, but user said 'show in full' */
    line-height: 1.3;
}

.shelf-cover {
    width: var(--cover-width);
    height: var(--cover-height);
    border-radius: 0.35rem;
    background-image: var(--cover-image,
            linear-gradient(130deg, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.08)));
    background-size: cover;
    background-position: center;
    box-shadow: 0 12px 24px rgba(15, 21, 36, 0.14);
    transform: rotate(var(--cover-tilt));
    flex-shrink: 0;
}

.book:not(.has-cover) .shelf-cover {
    background-image: linear-gradient(135deg,
            rgba(255, 255, 255, 0.3),
            rgba(0, 0, 0, 0.08));
}

.details {
    margin-top: 3rem;
    height: 500px;
    text-align: center;
}

.details h2 {
    margin: 0 0 0.4rem;
    font-family: "Peachi", "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
}

.details-card {
    margin-top: 1.8rem;
    display: flex;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: stretch;
    background: var(--details-bg, #f4f5fb);
    color: var(--details-fg, #1e1f2d);
    padding: clamp(1.5rem, 3vw, 2.8rem);
    border-radius: 1.2rem;
    box-shadow: var(--details-shadow);
    transition:
        background 0.2s ease,
        color 0.2s ease;
    font-family: "Peachi", "Inter", "Segoe UI", system-ui, sans-serif;
    position: relative;
}

.details-close,
.details-copy {
    position: absolute;
    top: 1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: color-mix(in srgb, var(--details-bg), black 15%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.details-close {
    right: 1rem;
    font-size: 2rem;
    font-weight: 300;
}

.details-copy {
    right: 3rem;
    font-size: 1.1rem;
}

.details-close:hover,
.details-copy:hover {
    opacity: 1;
}

.details-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("../img/texture.png");
    background-size: 150px;
    background-repeat: repeat;
    opacity: 0.12;
    mix-blend-mode: overlay;
    pointer-events: none;
    filter: contrast(120%);
    border-radius: inherit;
}

.details-card[hidden] {
    display: none;
}

.details-cover {
    width: clamp(150px, 22vw, 220px);
    aspect-ratio: 2 / 3;
    border-radius: 1rem;
    box-shadow: 0 25px 50px rgba(12, 18, 35, 0.25);
    background-image: linear-gradient(135deg,
            rgba(255, 255, 255, 0.3),
            rgba(0, 0, 0, 0.15));
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.details-card.has-cover .details-cover {
    background-color: transparent;
}

.details-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    text-align: left;
}

.details-heading {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.details-title {
    font-size: clamp(1.5rem, 4vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--details-heading-color, currentColor);
}

.details-author {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    opacity: 0.85;
    color: var(--details-heading-color, currentColor);
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem 1.4rem;
}

.details-grid div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.details-grid dt {
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.7;
}

.details-grid dd {
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: inherit;
}

.details-grid dd.isbn-field {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    color: inherit;
}

.isbn-trigger {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: text;
    line-height: 1.4;
}


.isbn-trigger:not(:disabled):hover,
.isbn-trigger:not(:disabled):active {
    cursor: pointer;
}

.isbn-trigger:focus-visible {
    outline: 2px solid var(--page-blue);
    outline-offset: 2px;
}

.isbn-trigger:disabled {
    cursor: text;
    opacity: 0.6;
}

.isbn-popup {
    position: absolute;
    left: 0;
    min-width: 220px;
    padding: 0.75rem;
    border-radius: 0.65rem;
    background: var(--page-surface);
    color: var(--text-color);
    box-shadow: 0 15px 35px rgba(15, 21, 36, 0.22);
    border: 1px solid rgba(17, 24, 39, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.isbn-popup:not(.is-upward) {
    top: calc(100% + 0.45rem);
    transform: translateY(-6px);
}

.isbn-popup.is-upward {
    bottom: calc(100% + 0.45rem);
    transform: translateY(6px);
}

body.theme-dark .isbn-popup {
    border-color: rgba(255, 255, 255, 0.08);
}

.isbn-popup.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.isbn-popup-label {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    opacity: 0.6;
}

.isbn-link {
    display: block;
    padding: 0.35rem 0.45rem;
    border-radius: 0.45rem;
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s ease;
}

.isbn-link:hover,
.isbn-link:focus-visible {
    background: var(--page-blue-soft);
    color: var(--page-blue);
}

@media (max-width: 720px) {
    .page {
        border-radius: 0;
        padding: 3rem 1.25rem 4rem;
        --page-pad: 1.25rem;
    }

    .details-card {
        flex-direction: column;
    }

    .details-cover {
        width: 160px;
    }
}

.noscript {
    text-align: center;
    color: #e11d48;
    font-weight: 600;
}

.site-footer {
    margin-top: auto;
    padding: 1.5rem 1rem 2rem;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(230, 233, 255, 0.45);
}

.site-footer a {
    color: rgba(93, 160, 255, 0.7);
    text-decoration: none;
    font-weight: 600;
}

.site-footer a:hover {
    text-decoration: none;
}

/* --- Layered Layouts --- */

/* Default: Shelf View */
.stack-content {
    display: none;
}

/* Ensure shelf elements are visible by default */
.shelf-cover {
    display: block;
}

.shelf-text {
    display: flex;
}

/* Stacked Layout Mixin */

@media (max-width: 768px) {

    .instruction-text,
    #view-control {
        display: none !important;
    }

    .controls {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        justify-content: center;
        margin-top: 2.5rem;
        margin-bottom: 2.2rem;
        z-index: 10;
        pointer-events: none;
        /* Let clicks pass through container if needed, but children have auto */
    }

    .bookshelf-section {
        margin-top: 0;
    }

    /* specific fix for children pointer events if container has none */
    .controls>* {
        pointer-events: auto;
    }

    /* Force expanded search style on mobile */
    .search-input {
        width: 190px;
        opacity: 1;
        pointer-events: auto;
        background: rgba(30, 30, 40, 0.9);
    }

    /* Prevent expansion on mobile check */
    .search-wrapper.is-active .search-input {
        width: 190px;
    }

    /* Ensure sort button helps centering by matching height */
    .select-trigger {
        height: 42px;
        padding: 0 0.8rem;
        min-width: 100px;
    }

    /* Hide search on mobile if tight? Or keep?
       User asked for "Same as theme toggle" style, but theme toggle is hidden here.
       Search is useful. Let's keep it but ensure it fits. 
    */

    .theme-toggle,
    .site-footer {
        display: none !important;
    }

    body:not(.view-coverflow) .bookshelf:not(.force-shelf) {
        flex-direction: column;
        align-items: center;
        overflow-x: hidden;
        overflow-y: visible;
        padding: 0 1.5rem 8rem !important;
        gap: 1.5rem;
        height: auto;
        margin-bottom: 0;
        white-space: normal;
        touch-action: auto !important;
        min-height: 0;
    }

    /* Hide the global details panel in stack view since cards show details */
    /* We effectively do this by not needing it, but we can't easily hide #details via CSS based on parent query unless using :has which is widely supported now but let's be safe. Actually, the user didn't ask to hide it, but implied. */

    body:not(.view-coverflow) .bookshelf:not(.force-shelf) .book {
        /* Details Card Look */
        width: 100% !important;
        max-width: 720px !important;
        height: auto !important;
        min-height: 180px;
        transform: none !important;
        /* No tilt in stack view */
        flex-direction: row;
        align-items: stretch;
        padding: 1.5rem;
        border-radius: 12px;
        background: var(--bg);
        /* Keep book color or use details card color? Let's use book color but maybe lighter/unified? */
        /* Actually, to look like details card, it should use proper contrast. 
           The book element has --bg set for the spine. 
           Let's use a standard card background or the spine background? 
           User said "details view as their default look".
           Details card uses --details-bg. 
           Let's stick to the generated palette --bg which is unique per book. */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 0, 0, 0.05);
        cursor: default;
        /* Clicking might not need to do anything */
    }

    body:not(.view-coverflow) .bookshelf:not(.force-shelf) .shelf-cover,
    body:not(.view-coverflow) .bookshelf:not(.force-shelf) .shelf-text {
        display: none !important;
    }

    .bookshelf:not(.force-shelf) .stack-content {
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
        width: 100%;
        text-align: left;
    }

    /* Stack Content Styles */
    .stack-cover {
        display: none !important;
    }

    .stack-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        justify-content: center;
    }

    .stack-heading {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }

    .stack-title {
        font-family: "Peachi", sans-serif;
        font-size: 1.2rem;
        font-weight: 600;
        margin: 0;
        line-height: 1.2;
    }

    .stack-author {
        font-family: "Peachi", sans-serif;
        font-style: italic;
        font-size: 0.85rem;
        margin: 0;
        opacity: 0.8;
    }

    .stack-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
        margin: 0;
        font-family: "Peachi", sans-serif;
    }

    .stack-grid div {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    .stack-grid dt {
        font-size: 0.6rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        opacity: 0.6;
        margin: 0;
        font-family: "Peachi", sans-serif;
    }

    .stack-grid dd {
        font-size: 0.75rem;
        margin: 0;
        font-weight: 500;
        font-family: "Peachi", sans-serif;
    }
}

body:not(.view-coverflow) .bookshelf:not(.force-shelf) {
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    overflow-y: visible;
    padding: 4rem 1.5rem 8rem;
    gap: 1rem;
    height: auto;
    margin-bottom: 0;
    white-space: normal;
    min-height: 0;
}

body:not(.view-coverflow) .bookshelf:not(.force-shelf) .book {
    /* Details Card Look */
    width: 100% !important;
    max-width: 760px !important;
    height: auto !important;
    min-height: 130px;
    transform: none !important;
    flex-direction: row;
    align-items: stretch;
    padding: 1rem;
    border-radius: 12px;
    background: var(--bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: default;
}

body:not(.view-coverflow) .bookshelf:not(.force-shelf) .shelf-cover,
body:not(.view-coverflow) .bookshelf:not(.force-shelf) .shelf-text {
    display: none !important;
}

.bookshelf:not(.force-shelf) .stack-content {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    width: 100%;
    text-align: left;
}

/* Reuse stack content styles from global scope or re-declare if needed inside media query? 
       Actually, standard CSS rules for .stack-content etc are defined further down or globally. 
       We just need to ensure the container properties are set. 
       The child elements (.stack-cover etc) are styled globally or inside the media query block. 
       The current file shows .stack-content styles are inside the media query? 
       No, wait. Step 110 shows global definitions for .bookshelf.force-stack.
       Inside the media query, we have definitions for .stack-cover etc.
       So we don't need to re-declare those if they are already there. 
       We just need to fix the container (.book) and .shelf-text hiding logic.
    */

/* .shelf-shadow removed */

/* --- Redundant Desktop Stack Styles Removed --- */

.bookshelf.force-stack .stack-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin: 0;
    font-family: "Peachi", sans-serif;
}

.bookshelf.force-stack .stack-grid[data-count="5"] {
    grid-template-columns: repeat(3, 1fr);
}

.bookshelf.force-stack .stack-grid div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.bookshelf.force-stack .stack-grid dt {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin: 0;
    font-family: "Peachi", sans-serif;
}

.bookshelf.force-stack .stack-grid dd {
    font-size: 0.75rem;
    margin: 0;
    font-weight: 500;
    font-family: "Peachi", sans-serif;
}

.bookshelf.force-shelf {
    flex-direction: row;
    align-items: flex-end;
    overflow-x: auto;
    padding: 0 clamp(1.5rem, 5vw, 6rem) 5.5rem;
    padding-bottom: 5rem;
    margin-bottom: -4rem;
    gap: clamp(0.45rem, 1.2vw, 0.85rem);
    height: auto;
    white-space: nowrap;
}


/* --- Coverflow Layout --- */
body.view-coverflow {
    overflow: hidden !important;
    height: 100vh;
    width: 100vw;
}

body.view-coverflow .bookshelf-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 50;
    pointer-events: none;
    /* Let controls pass through */
    background: transparent;
}

body.view-coverflow .bookshelf {
    pointer-events: auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
    perspective: 1000px;
    overflow: visible;
    border: none;
    box-shadow: none;
}

/* We don't use coverflow-stage explicitly if we are just moving .book items */

/* Coverflow Card Overrides */
body.view-coverflow .book {
    position: absolute;
    /* Center in viewport */
    top: 50%;
    left: 50%;
    width: 260px;
    height: 380px;
    /* Offset by half dimension to center pivot */
    margin-left: -130px;
    margin-top: -190px;
    padding: 0;
    background-color: #222;
    border: none;
    border-radius: 4px;
    transform-style: flat;
    /* or preserve-3d */
    /* transition: transform 0.3s cubic-bezier(0.2, 0.0, 0.2, 1); REMOVED to prevent conflict with JS loop */
    /* -webkit-box-reflect removed for cross-browser support and performance */
    display: block;
    z-index: 10;
    box-shadow: none;
    transition: none !important;
    /* Critical: Prevent CSS fighting JS loop */
    will-change: transform;
}

/* Reflection via pseudo-element (works in FF + Chrome) */
body.view-coverflow .book::before {
    content: '';
    position: absolute;
    /* Position below the book */
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;

    /* Mirror the book's cover */
    background-image: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Flip and create gap */
    transform: translateY(5px) scaleY(-1);

    /* Fade out the reflection */
    /* Fade out the reflection - Softened per request */
    mask-image: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.25));
    -webkit-mask-image: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.25));

    /* Optimization */
    pointer-events: none;
    will-change: transform;
}

body.view-coverflow .book.is-3d-active {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

body.view-coverflow .book.dimmed::before {
    /* Don't hide reflection, just dim it further */
    opacity: 0.5;
}

/* Ensure background image set in JS is visible */
body.view-coverflow .book {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* JS sets background-image inline, which wins */
}

/* Hide internal structure in coverflow */
body.view-coverflow .book .shelf-cover,
body.view-coverflow .book .shelf-text,
body.view-coverflow .book .stack-content {
    display: none !important;
}

/* Dimming */
body.view-coverflow .book::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    border-radius: 4px;
}

body.view-coverflow .book.dimmed::after {
    opacity: 0.6;
}

/* Active Title */
.coverflow-title {
    position: fixed;
    top: 18%;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: 'Peachi', sans-serif;
    font-size: 2.5rem;
    color: white;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
    z-index: 60;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.3s;
}

body.view-coverflow .coverflow-title.visible {
    opacity: 1;
}

/* Coverflow Details (Appears on Hover/Pause) */
.coverflow-details {
    position: fixed;
    top: 22%;
    /* Just below the title */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    z-index: 60;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.5s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.coverflow-details.visible {
    opacity: 1;
}

.coverflow-details .cf-author {
    font-size: 1.3rem;
    font-style: italic;
    opacity: 1;
    font-family: 'Peachi', sans-serif;
}

.coverflow-details .cf-trans {
    opacity: 0.7;
    font-size: 0.9em;
}

.coverflow-details .cf-meta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.8;
    margin-top: 0.2rem;
}

.coverflow-details .cf-meta-row span {
    white-space: nowrap;
}

@media (max-width: 600px) {
    .coverflow-title {
        top: 15%;
        font-size: 1.8rem;
    }

    .coverflow-details {
        top: 20%;
    }

    .coverflow-details .cf-author {
        font-size: 1.1rem;
    }

    .coverflow-details .cf-meta-row {
        gap: 0.8rem;
        font-size: 0.8rem;
    }
}

/* Background Blur */
.coverflow-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #111;
    background-size: cover;
    background-position: center;
    filter: blur(60px) brightness(0.4);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
}

body.view-coverflow .coverflow-bg {
    opacity: 1;
}

/* Hide normal elements */
body.view-coverflow .intro,
body.view-coverflow .details,
body.view-coverflow .site-footer {
    display: none !important;
}

/* Hide details in stack view */
body.view-stack .details {
    display: none !important;
}

/* --- Stack View Fixes --- */
body.view-stack .bookshelf-section {
    width: 100%;
    max-width: 800px;
    margin: 6rem auto 0;
}

body.view-stack .bookshelf {
    flex-direction: column;
    align-items: center;
    padding: 0 0 4rem 0;
    overflow-x: hidden;
    overflow-y: visible;
    gap: 0.8rem;
    height: auto;
    min-height: 0;
    display: flex;
}


/* Moderate Specificity Override for Stack View Cards */
body.view-stack .bookshelf.bookshelf .book {
    position: relative;
    width: 96% !important;
    max-width: 760px !important;
    height: auto;
    margin: 0 auto;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    left: auto;
    top: auto;
    display: block;
    font-family: inherit;
}

body.view-stack .book::before {
    display: none !important;
}

/* Fix for stack content grid overflow */
.stack-grid>div {
    min-width: 0;
}

.stack-grid dd,
.stack-grid dt {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}


body.view-stack .book:hover {
    filter: none;
}

body.view-stack .book .shelf-text,
body.view-stack .book .shelf-cover {
    display: none !important;
}

/* The actual card in stack view */
body.view-stack .book .stack-content {
    display: flex !important;
    /* Use the variable from parent, fallback to default */
    background-color: var(--bg, #f4f5fb);
    border: 1px solid var(--book-border);
    border-radius: 12px;
    padding: 1rem;
    gap: 1.25rem;
    align-items: flex-start;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    width: 100%;
    text-align: left;
    color: var(--fg, #1e1f2d);
    pointer-events: auto;
    position: relative;
    overflow: hidden;
}

/* Texture for Stack Content */
body.view-stack .book .stack-content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("data/texture.png");
    background-size: 150px;
    background-repeat: repeat;
    opacity: 0.12;
    mix-blend-mode: overlay;
    pointer-events: none;
    filter: contrast(120%);
}

/* Remove hover elevation/shadow from the content */
body.view-stack .book:hover .stack-content {
    transform: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: none;
}

body.view-stack .book:hover {
    transform: none !important;
    filter: none;
}





.stack-cover {
    width: 120px;
    height: 180px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #eee;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: block;
}

.stack-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    /* Crucial for text truncation/wrap */
}



.stack-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-width: 100%;
    line-height: 1.3;
}




.stack-author {
    font-size: 0.85rem;
    font-style: italic;
    opacity: 0.8;
    margin: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.4;
}


.stack-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    font-size: 0.85rem;
    margin-top: 1rem;
    opacity: 1;
}

.stack-grid[data-count="5"] {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Make DT act as a header */
.stack-grid dt {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin-bottom: 2px;
    font-family: inherit;
    font-weight: 600;
}

/* Make DD block level below it */
.stack-grid dd {
    display: block;
    margin: 0;
    font-weight: 400;
    font-size: 0.9rem;
}


.stack-isbn-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: inherit;
    color: inherit;
    text-decoration: none;
    cursor: text;
    opacity: 1;
}


/* Match Shelf Interactions more closely */
.stack-isbn-btn:hover {
    opacity: 1;
    color: inherit;
    text-decoration: none;
    cursor: text !important;
}





.stack-isbn-btn[aria-expanded="true"] {
    background-color: var(--text-color);
    color: var(--page-surface);
    text-decoration: none;
    padding: 0 2px;
    border-radius: 2px;
}

/* Allow selection within stack content even if parent is a button */
.stack-content {
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: auto;
}

/* Global View Transition Animation */
@keyframes viewFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.view-animate {
    animation: viewFadeIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@media (min-width: 769px) {
    body.view-stack .book {
        width: 100%;
        max-width: 900px;
    }

    body.view-stack .stack-content {
        gap: 2rem;
        padding: 1.5rem 2rem;
    }
}

/* Coverflow Slider */
.coverflow-slider-container {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(400px, 80vw);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coverflow-slider-container.visible {
    opacity: 1;
    pointer-events: auto;
}

.coverflow-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    outline: none;
    transition: background 0.2s;
    cursor: pointer;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.coverflow-slider:hover {
    background: rgba(255, 255, 255, 0.3);
}

.coverflow-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s ease;
    border: none;
}

.coverflow-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.coverflow-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    border: none;
    transition: transform 0.1s ease;
}

.coverflow-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
}

.theme-dark .coverflow-slider:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* --- Mobile Stack View Override --- */
@media (max-width: 768px) {

    /* 
       Pull the bookshelf section physically wider than its container 
       by using negative margins equal to the page padding 
    */
    body.view-stack .bookshelf-section {
        width: auto;
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 0;
        padding-right: 0;
    }

    /* Force the book card to use this new available width */
    body.view-stack .bookshelf.bookshelf .book {
        width: 100% !important;
        max-width: none !important;
        /* Remove constraints */
        border-radius: 0;
        /* Optional: simpler look if full width */
        border-left: none;
        border-right: none;
    }

    /* Re-add some internal spacing so content doesn't hit edge */
    body.view-stack .book .stack-content {
        border-radius: 12px;
        /* Match Desktop Stacks */
        width: 96%;
        /* Keep small margin or use calc */
        margin: 0 auto;
    }
}

/* Footer Styling */
.site-footer {
    text-align: center;
    padding: 2rem 0;
    font-family: "Peachi", sans-serif;
    color: var(--muted);
    opacity: 0.15;
    font-size: 0.9rem;
    margin-top: auto;
    transition: opacity 0.3s ease;
}

.site-footer:hover {
    opacity: 1;
}

.site-footer a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.site-footer:hover a {
    color: var(--page-blue);
}

.site-footer a:hover {
    text-decoration: none;
    filter: brightness(1.2);
}

/* --- Library Statistics Dashboard --- */
.stats-toggle {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: none;
    background: rgba(30, 30, 40, 0.6);
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    backdrop-filter: blur(12px);
    flex-shrink: 0;
}

.stats-toggle:hover {
    background: rgba(40, 40, 50, 0.9);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.stats-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(4, 6, 12, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stats-overlay:not([hidden]) {
    opacity: 1;
}

.stats-card {
    position: relative;
    width: min(900px, 100%);
    background: var(--page-surface);
    border: 1px solid var(--book-border);
    border-radius: 1.5rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: var(--details-shadow);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 92vh;
    overflow-y: auto;
}

.stats-overlay:not([hidden]) .stats-card {
    transform: translateY(0);
}

.stats-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("../img/texture.png");
    background-size: 150px;
    background-repeat: repeat;
    opacity: 0.08;
    mix-blend-mode: overlay;
    pointer-events: none;
    border-radius: inherit;
}

.stats-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 300;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.stats-close:hover {
    opacity: 1;
}

.stats-header {
    margin-bottom: 2rem;
    text-align: left;
}

.stats-header h2 {
    font-family: "Peachi", sans-serif;
    font-size: 1.8rem;
    margin: 0;
    color: var(--page-blue);
}

.stats-subtitle {
    color: var(--muted);
    font-size: 1rem;
    margin: 0.5rem 0 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    gap: 0.75rem;
    margin-bottom: 2rem;
}

/* Row 1: Premium */
.stats-item.author-item {
    grid-column: span 18;
}

.stats-item.publisher-item {
    grid-column: span 12;
}

/* Row 2: Library Metrics */
.stats-item.total-item,
.stats-item.unique-authors-item,
.stats-item.unique-publishers-item {
    grid-column: span 10;
}

/* Row 3: Trivia & Color */
.stats-item.translation-item,
.stats-item.golden-item,
.stats-item.color-item {
    grid-column: span 10;
}

@media (max-width: 850px) {
    .stats-grid {
        grid-template-columns: repeat(20, 1fr);
    }

    .stats-item.author-item,
    .stats-item.publisher-item {
        grid-column: span 10;
    }

    .stats-item.total-item,
    .stats-item.unique-authors-item,
    .stats-item.unique-publishers-item {
        grid-column: span 10;
    }

    .stats-item.translation-item,
    .stats-item.golden-item,
    .stats-item.color-item {
        grid-column: span 10;
    }
}

@media (max-width: 600px) {
    .stats-grid {
        display: flex;
        flex-direction: column;
    }
}

/* Color Pill Integration */
.color-pill {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.2rem;
}

.color-sample {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--page-blue);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: background 1s ease;
    flex-shrink: 0;
}

.color-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
}

/* Chart Refinements */
.stats-charts {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.chart-section h3 {
    font-family: "Peachi", sans-serif;
    font-size: 0.95rem;
    margin: 0 0 1.25rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: left;
}

.binding-chart-wrapper {
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Binding Segment Bar */
.segment-bar {
    height: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    overflow: hidden;
    margin-bottom: 1.2rem;
    gap: 0;
}

.segment {
    height: 100%;
    flex-shrink: 0;
    border: none;
    transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.segment-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--text-color);
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stats-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 1.2rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stats-value {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
}



.bar-chart {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.chart-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.chart-label {
    width: 55px;
    font-size: 0.9rem;
    color: var(--muted);
    flex-shrink: 0;
}

.chart-bar-wrapper {
    flex-grow: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.chart-bar {
    height: 100%;
    background: var(--page-blue);
    border-radius: 4px;
    width: 0;
    transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.chart-count {
    width: 35px;
    font-size: 0.9rem;
    color: var(--text-color);
    text-align: right;
    font-weight: 500;
}

@media (max-width: 850px) {
    .bar-chart {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .stats-card {
        padding: 1.5rem;
    }

    .stats-featured {
        grid-template-columns: 1fr;
    }

    .stats-header h2 {
        font-size: 1.5rem;
    }
}