<style>     .categories-scroll-container.active-drag {
	cursor: grabbing;
	cursor: -webkit-grabbing;
}
/* --- Global Setup & Dark Theme --- */
/* --- Global Setup & Dark Theme (Philippine-Themed) --- */
:root {
	--bg-color: #171615; /* Deeper, warmer black */
	--primary-surface-color: #232220; /* Dark cacao brown */
	--secondary-surface-color: #353432; /* Rich earth tone */
	--primary-text-color: #f7f6f5; /* Off-white for warmth */
	--secondary-text-color: #b0a9a1; /* Muted contrast text */
	--accent-color: #E68A48; /* Soft Amber/Pili Brown for primary actions */
	--pro-color: #d1a34a; /* Gold (Keep for premium distinction) */
	--success-color: #5aa65a; /* Malunggay green for success/read */
    --carousel-interval: 20s;
}

:root {
    --wallpaper-url: none;
}

/* Full-screen wallpaper behind everything */
#theme-wallpaper {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;          /* never block clicks */
    background-image: var(--wallpaper-url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.55;                 /* tweak per taste */
    transition: opacity 200ms ease, background-image 200ms ease;
}

/* Make sure pages are above the wallpaper */
.page {
    position: relative;
    z-index: 0;
}

/* ---- THEME CLASSES (used by JS) ---- */

/* Ember Gold (dark warm) */
body.theme-ember-gold {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Ivory Page (light, creamy) */
body.theme-ivory-page {
    font-family: "Georgia", "Times New Roman", serif;
}

/* Forest Sepia */
body.theme-forest-sepia {
    font-family: "Cormorant Garamond", "Times New Roman", serif;
}

/* Forest Gradient */
body.theme-forest-gradient {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


/* ---- 1. Safe default header (all themes) ---- */
/* Keeps other themes looking the same */
.header,
.page-header,
.details-header {
    background-color: var(--bg-color);
}

/* ---- 2. Ember Gold header styling ---- */
/* Makes the top bars match the red / gold wallpaper */
body.theme-ember-gold .header,
body.theme-ember-gold .page-header,
body.theme-ember-gold .details-header {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.96),
        rgba(40, 0, 0, 0.90)
    );
    border-bottom: 1px solid rgba(255, 215, 160, 0.55);  /* soft gold edge */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari / iOS */
}

/* Header text color (in case something was still white) */
body.theme-ember-gold .header h1,
body.theme-ember-gold .page-header h1,
body.theme-ember-gold .details-header h1 {
    color: #FFE9BF; /* same as your Ember Gold heading color */
}

/* Back arrow & overflow menu icons in headers */
body.theme-ember-gold .header .icon-button svg,
body.theme-ember-gold .page-header .icon-button svg,
body.theme-ember-gold .details-header .icon-button svg {
    color: #FFE9BF;
}


/* === Wizard / Hogwarts font === */
@font-face {
    font-family: 'HarryP';
    src: url('static/fonts/harryp.ttf') format('truetype');
    font-display: swap;
}



.visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


html {
	box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
*, *:before, *:after {
	box-sizing: inherit;
}
body {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background-color: var(--bg-color);
	color: var(--primary-text-color);
	font-size: 16px;
    overflow-x: hidden; 
    width: 100%; 
    height: 100%;
}

/* --- New Global Rounded Corners and Depth --- */
.action-button, .stat-item, .achievement-badge, .buddy-read-card {
    border-radius: 12px;
}

/* Ensure inputs match the new style */
/* =========================================
   FIX: INPUT TEXT VISIBILITY (THEME AWARE)
   ========================================= */

.form-group input, 
.form-group textarea, 
.form-group select, 
.search-bar-wrapper input {
    box-sizing: border-box;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    
    /* Use Theme Variables for Background */
    background-color: var(--primary-surface-color);
    border: 1px solid var(--secondary-surface-color);
    
    /* CRITICAL FIX: Use the theme variable, NOT 'white' */
    color: var(--primary-text-color) !important; 
    
    font-size: 1.1rem;
    font-family: inherit;
}

/* Ensure placeholder text is also visible in light mode */
.form-group input::placeholder,
.form-group textarea::placeholder,
.search-bar-wrapper input::placeholder {
    color: var(--secondary-text-color);
    opacity: 0.7;
}





.login-gate-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    width: 100%;
    max-width: 280px;
}




/* --- CRITICAL FIX: Enlarge to 3-column size on A33/standard mobile width --- */

@media (min-width: 376px) and (max-width: 500px) {
    /* Set the min-width back to 90px for this size range. 
       412px / 90px = ~4.5, forcing the browser to decide on 3 columns. */
    .bookshelf-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
        gap: 1rem !important; 
    }

    /* Ensure covers scale visually to 90px wide */
    .book-card img {
        width: 70%;
        height: 110px; 
    }
}

/* --- FIX: Style the details page as a full-screen overlay --- */

.page {
	display: none;
	padding: 1rem;
	animation: fadeIn 0.3s ease-in-out;
}
.page.active {
	display: block;
}


#page-details {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 4000; /* High z-index to appear on top of everything */
    overflow-y: auto; /* Allow the details content itself to scroll */
    padding-bottom: 80px; /* Space for the fixed footer */
}

#page-status {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 4001; /* This makes it appear on top of the details page */
    overflow-y: auto;
}

#book-options-modal { 
    z-index: 5500 !important; /* Higher than the details header */
}

#page-editor {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 4001; /* This must be higher than the details page's z-index */
    display: none; /* Keep it hidden by default */
    flex-direction: column;
}

#page-editor.active {
    display: flex; /* Use flex to make sure the layout works correctly */
}


/* =========================================
   FIX: EDIT PAGE SPACING (AGGRESSIVE)
   ========================================= */

/* 1. Apply layout fixes ONLY when page is ACTIVE */
body #page-edit-book.active {
    display: block !important; 
    height: auto !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    padding-bottom: 150px !important;
}

/* 2. Ensure it is HIDDEN when not active */
body #page-edit-book:not(.active) {
    display: none !important;
}

/* 3. Force the Form to pack items at the top */
body #page-edit-book form {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; 
    align-items: stretch !important;
    height: auto !important;
    gap: 15px !important; 
}

/* 4. Stop Inputs from growing */
body #page-edit-book .form-group {
    flex: 0 0 auto !important; 
    height: auto !important;
    margin: 0 !important; 
}





/* 1. Set up the parent form context */
#edit-book-form {
    position: relative; 
}

/* 2. Configure the LEFT COLUMN (ISBN Stack) */
#isbn-form-group {
    width: 65%; 
    float: left;
    margin-bottom: 10px; /* Space above the new button */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Ensure ISBN input and Re-Fetch button stack vertically */
#isbn-group {
    display: flex;
    flex-direction: column; 
    gap: 10px; 
}

/* Make Re-Fetch button full width under the input */
#find-by-isbn-btn {
    width: 100%;
}

/* 3. Style the MOVED BUTTON (It now sits between the two form groups) */
#edit-cover-btn {
    width: 65%; /* Matches your layout preference */
    padding: 10px 15px; 
    border-radius: 12px;
    
    /* Match Re-Fetch Button Style exactly */
    background-color: var(--accent-color) !important; 
    color: #ffffff !important; /* FIX: Force white text */
    border: none !important;   /* FIX: Remove secondary border */
    
    text-align: center;
    font-weight: 600; /* Ensure text weight matches */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Optional: Adds same depth as other buttons */
}


/* 4. Configure the RIGHT COLUMN (Cover Image) */
#edit-cover-section {
    position: absolute;
    top: 0;
    right: 0;
    width: 30%; 
    /* Center the cover and label vertically */
    display: flex;
    flex-direction: column;
    align-items: center;
}



/* 5. Reset Flow for the Title field */
#edit-title-form-group {
    clear: both;
    margin-top: 30px; 
}


/* =========================================
   FIX: EDIT PAGE HEADER (FLEXBOX LAYOUT)
   ========================================= */

/* 1. The Container: Holds Left Stack and Right Cover */
.edit-header-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    width: 100% ;
}

/* 2. Left Side: ISBN & Buttons */
.edit-left-stack {
    flex: 1; /* Takes up all remaining space */
    min-width: 0; /* Prevents text overflow issues */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 3. Right Side: Cover Container */
.edit-right-cover {
    /* Fixed width so it never squishes or grows */
    flex: 0 0 120px; 
    width: 120pxt;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Visual adjustment to align top of image with top of Input box */
    margin-top: 2px; 
}

/* 4. The Cover Box itself */
#cover-preview-container {
    width: 100%;
    height: 180px; /* Standard Book Ratio */
    border: 2px dashed var(--secondary-surface-color);
    border-radius: 8px;
    background-color: var(--primary-surface-color);
    
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

/* 5. The Image inside */
#cover-image-preview {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures image fills box without stretching */
    display: block;
    object-position: center;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* 6. Mobile Tweak: Stack them on small phones */
@media (max-width: 450px) {
    .edit-header-grid {
        flex-direction: column-reverse; /* Cover on top */
        align-items: center;
    }
    .edit-left-stack {
        width: 100%;
    }
    .edit-right-cover {
        margin-bottom: 15px;
    }
}






/* --- Edit Shelf Page Styles --- */
#page-edit-shelf {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 6001; /* High z-index to cover main app */
    overflow-y: auto;
    display: none; /* Hidden by default */
}
#page-edit-shelf.active {
    display: block;
}


#page-review .page-header {
	margin-bottom: 1rem;
}
.review-editor-content {
	height: calc(100vh - 100px);
/* Full height minus header/padding */
	display: flex;
	flex-direction: column;
}

#page-tags, #page-series {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 4001; /* This makes it appear ON TOP of the details page */
    overflow-y: auto;
}


/* --- Manage Topics Page Styles --- */
#page-manage-topics {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 6001; /* High z-index to cover main app */
    overflow-y: auto;
    display: none; /* Hidden by default */
}
#page-manage-topics.active {
    display: block;
}
#page-manage-topics .search-bar-wrapper {
    margin-bottom: 1rem;
}
.topic-manage-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid var(--secondary-surface-color);
}
.topic-manage-item .topic-name {
    flex-grow: 1;
    font-size: 1.1rem;
    cursor: pointer;
}
.topic-manage-item .topic-count {
    color: var(--secondary-text-color);
    margin-left: 1rem;
    margin-right: 1rem;
}
.topic-manage-item .icon-button {
    color: var(--secondary-text-color);
    padding: 6px;
}

/* Styles for merge selection mode */
#page-manage-topics.is-merging .topic-manage-item .icon-button {
    display: none; /* Hide edit/delete buttons */
}
#page-manage-topics.is-merging .topic-manage-item .topic-count {
    display: none; /* Hide count */
}
#page-manage-topics.is-merging .topic-manage-item .topic-name {
    cursor: default;
}
#page-manage-topics:not(.is-merging) .topic-manage-checkbox {
    display: none; /* Hide checkboxes by default */
}
.topic-manage-checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--accent-color);
    margin-right: 1rem;
}


/* --- Style for the Purchase Page --- */

#page-purchase {
  /* Basic full-screen page setup */
  position: fixed; /* Ensures it covers the screen and respects z-index */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-color); /* Use your app's background color */
  overflow-y: auto; /* Allow content to scroll */
  display: none; /* Hidden by default */
  z-index: 4001; /* CRITICAL: Must be equal to or higher than page-status, page-editor, etc. */
                 /* And higher than page-details (which is 2000) */
  padding: 1rem; /* Add padding back to the page container */
}

/* Rule to show the page when active */
#page-purchase.active {
  display: block; /* Or flex, depending on your layout */
}

/* Ensure content area has padding AND space for footer */
#page-purchase .content {
    /* No extra padding needed here if page has padding */
    padding-bottom: 90px; /* Add space for the fixed footer */
}

/* Style the header within the purchase page */
#page-purchase .header {
  position: sticky; /* Make header stick to top */
  top: 0;
  background-color: var(--bg-color); /* Match page background */
  z-index: 10; /* Keep header above scrolling content */
  padding: 0.5rem 0; /* Adjust padding if needed */
  margin: -1rem -1rem 1.5rem -1rem; /* Use negative margin to span full width */
  padding-left: 1rem; /* Re-apply side padding */
  padding-right: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--secondary-surface-color);
}

/* Ensure back button in Purchase header is visible */
#page-purchase .header .btn-back {
  display: flex; /* Make sure it's not hidden */
  align-items: center; /* Vertically center icon */
  justify-content: center; /* Horizontally center icon */
  color: var(--primary-text-color); /* Set icon color to match text */
  padding: 8px; /* Ensure it has some space */
}

#page-purchase .header .btn-back svg {
  display: block; /* Make sure SVG is visible */
  width: 28px; /* Set explicit size */
  height: 28px;
  stroke: currentColor; /* Make SVG use the button's color */
}

/* Styles for the fixed footer (assuming you moved the Done button) */
#page-purchase .fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background-color: var(--primary-surface-color);
  border-top: 1px solid var(--secondary-surface-color);
  display: flex;
  justify-content: center;
  z-index: 10; /* Keep footer above scrolling content */
}

#page-purchase .fixed-footer .button {
    width: 100%; /* Make button full width */
}


/* Makes the community page a flex container */
#page-community.active {
    display: flex;
    flex-direction: column;
    /* This calculates height from the bottom of the screen up to 70px (for the nav bar) */
    /* OR 100% of the height if the nav bar is hidden */
    height: 100vh; 
    padding: 0;
    padding-bottom: 70px; /* Leave space for the nav bar */
}

#page-community.active:has(#public-feed-header[style*="display: flex"]) {
    height: 100vh;
    padding-bottom: 0;
}


/* 1. Turn the bookshelf page into a flex container that fills the vertical space. */
#page-bookshelf.active {
    display: flex;
    flex-direction: column;
    /* This calculates the full screen height minus the bottom navigation bar (70px). */
    height: calc(100vh - 70px);
    /* We move the padding to the inner elements to control scrolling correctly. */
    padding-top: 0;
    padding-bottom: 0;
}

/* 2. Prevent the header and tabs from shrinking when content is added. */
#page-bookshelf > .header,
#page-bookshelf > .bookshelf-controls {
    flex-shrink: 0;
}

/* Add the original top padding back to the header. */
#page-bookshelf > .header {
    padding-top: 1rem;
}

/* 3. Make the grid container the only scrollable area. */
#page-bookshelf .grid-container {
    flex-grow: 1; /* Allows this element to fill all remaining vertical space. */
    overflow-y: scroll; /* Adds a scrollbar ONLY if the content is too tall. */
    padding-top: 0;
}

/* --- iOS Style Fading Scrollbar --- */

/* This targets the scrollbar of your main book list */
#page-bookshelf .grid-container::-webkit-scrollbar {
    width: 8px; /* Set a fixed width for the scrollbar */
}

/* This styles the track (the area the scrollbar moves in) */
#page-bookshelf .grid-container::-webkit-scrollbar-track {
    background: transparent; /* Make the track invisible */
}

/* This styles the thumb (the part you drag) */
#page-bookshelf .grid-container::-webkit-scrollbar-thumb {
    background-color: transparent; /* Default state: invisible */
    border-radius: 4px; /* Rounded corners like iOS */
    transition: background-color 0.3s ease-out; /* Smooth fade transition */
}

/* When scrolling, we'll add a 'scrolling' class to the container */
#page-bookshelf .grid-container.scrolling::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.4); /* Visible state: semi-transparent white */
}


#page-filter-main .settings-item svg {
    color: var(--secondary-text-color);
}

/* --- Sticky Header & Scroll for Filter Select --- */
#page-filter-select.active {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Make the page fill the screen */
}
.sticky-header-container {
    flex-shrink: 0; /* Prevent this container from shrinking */
    position: sticky;
    top: 0;
    background-color: var(--bg-color);
    padding: 1rem 1rem 0 1rem;
    margin: 0 -1rem; /* Counteract page padding */
}
#page-filter-select .page-header, #page-filter-select .search-bar-wrapper {
    margin-bottom: 1rem;
}
.scrollable-content {
    flex-grow: 1; /* Allow this element to fill remaining space */
    overflow-y: auto; /* Make only this part scrollable */
    padding: 0 1rem;
    margin: 0 -1rem; /* Counteract page padding */
}



#page-welcome-new.active {
    display: flex !important;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    
    /* Ensure the page itself is 100% opaque, hiding the fixed wallpaper */
    background-color: var(--bg-color) !important; 
    background-image: none !important; 
    min-height: 100vh; /* Takes up full screen height */
}

/* Fix: Ensure the content cards are 100% opaque, overriding the theme's default transparency */
#page-welcome-new.active > div > div {
    background-color: var(--primary-surface-color) !important; 
    position: relative;
    z-index: 10;
}

#page-welcome-new .button {
    /* Classic Red */
    background-color: #E64848 !important; 
    border: 1px solid #c83d3d !important;
    color: white !important;
}

/* Secondary CTA Button (Login) */
#page-welcome-new .button.secondary {
    /* Dark Gray/Black */
    background-color: #2e2e2e !important; 
    border: 1px solid #4a4a4a !important;
    color: white !important;
}

/* --- Welcome & Loading --- */
#loading-overlay,
#page-welcome {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--bg-color);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 1rem;
	text-align: center;
	padding: 2rem;
}
.spinner {
	width: 40px;
	height: 40px;
	border: 4px solid var(--secondary-surface-color);
	border-top: 4px solid var(--accent-color);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
	transform: rotate(0deg);
}
100% {
	transform: rotate(360deg);
}
}
#page-welcome h1 {
	font-size: 2rem;
	margin-bottom: 0.5rem;
}
#page-welcome p {
	color: var(--secondary-text-color);
	max-width: 400px;
	margin-bottom: 2rem;
}
.welcome-options {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	max-width: 350px;
}
.welcome-button {
	padding: 1rem;
	border-radius: 12px;
	border: 1px solid var(--secondary-surface-color);
	background-color: var(--primary-surface-color);
	cursor: pointer;
	text-align: left;
}
.welcome-button h3 {
	margin: 0 0 0.25rem 0;
	color: var(--primary-text-color);
}
.welcome-button p {
	margin: 0;
	color: var(--secondary-text-color);
	font-size: 0.9rem;
}
.welcome-button.primary {
	border-color: var(--accent-color);
}

/* --- Discover Page Scrolling Fix --- */


#page-discover.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 0px); /* Full height minus bottom nav */
    padding: 0; /* No padding on the main page container */
    overflow: hidden; /* Prevents the whole page from ever scrolling */
}

/* 2. Makes the new content wrapper the ONLY scrollable area */
.discover-scroll-content {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 1rem 90px 1rem; /* Changed top padding from 0.75rem to 0 */
}

/* 3. Re-applies correct padding to the sticky header for the search bar */
#discover-controls-container {
    position: sticky;
    top: 0;
    z-index: 150;
    background-color: var(--bg-color);
    padding: 1rem 1rem 0 1rem; /* This adds side gaps and removes bottom padding */
    flex-shrink: 0;
    margin: 0;
}
#discover-search-cancel-btn {
	display: none;
}
.discover-section-header {
    /* KEY CHANGE 1: Use flexbox to align content (required for step 2) */
    display: flex;
    justify-content: space-between; /* Aligns title and link horizontally */
    align-items: center; /* Vertically centers title and link */
    /* KEY CHANGE 2: Reduce margin below the header to decrease space to icons */
    margin-bottom: 0; /* Reduced from original default */
}
.discover-section h2 {
	font-size: 1.4rem;
    font-weight: 600;
	margin: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.discover-section h2 .more-link {
	font-size: 1rem;
	font-weight: 600;
	color: var(--accent-color);
	text-decoration: none;
	cursor: pointer;
}
#discover-main-content .discover-section:first-child {
    margin-top: 0;
}
#discover-main-content .discover-section:first-child h2 {
    margin-top: 0;
}

/* --- Comments Page Styles --- */
#page-comments {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 4001; /* On top of details page */
    display: none;
    flex-direction: column;
}

#page-comments.active {
    display: flex;
}

/* This container will scroll */
#comments-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
    /* Make room for the bottom input bar */
    padding-bottom: 90px; 
}

/* The input bar at the bottom */
.comment-input-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--primary-surface-color);
    border-top: 1px solid var(--secondary-surface-color);
    z-index: 4002;
}

.comment-input-bar #comment-text-input {
    flex-grow: 1; 
    box-sizing: border-box;
    padding: 12px;
    border-radius: 12px; 
    border: 1px solid var(--secondary-surface-color);
    background-color: var(--secondary-surface-color);
    color: white;
    font-size: 1.1rem;
    font-family: inherit;
    margin-bottom: 0; 
}

#comment-send-btn {
    color: var(--accent-color);
    flex-shrink: 0;
}

/* Styles for an individual comment */
.comment-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.comment-item .user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.comment-content {
    display: flex;
    flex-direction: column;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.comment-header .user-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.comment-header .feed-timestamp {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}

.comment-text {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--primary-text-color);
    white-space: pre-wrap; /* Preserves line breaks */
}

/* --- Contact Us Page Styles --- */
#page-contact-us {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 6001;
    overflow-y: auto;
    display: none;
}
#page-contact-us.active {
    display: block;
}
#page-contact-us .contact-content-wrapper {
    padding-bottom: 90px;
}
#page-contact-us .about-us-section,
#page-contact-us .social-links-section,
#page-contact-us #contact-form {
    margin-bottom: 2.5rem;
}
#page-contact-us h3 {
    font-size: 1.3rem;
    color: var(--primary-text-color);
    border-bottom: 1px solid var(--secondary-surface-color);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}
.social-links-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
}
.social-icon {
    font-size: 2.5rem;
    color: var(--secondary-text-color);
    transition: color 0.2s;
}
.social-icon:hover {
    color: var(--accent-color);
}



.top-categories {
    display: flex;
    justify-content: center; /* Changed from space-around */
    flex-wrap: wrap; /* Allows icons to wrap to the next line on narrow screens */
    gap: 1.5rem; /* Adds consistent spacing between icons */
    text-align: center;
    padding: 1rem 0;
}
.top-category-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	color: var(--secondary-text-color);
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9rem;
}
.top-category-item .icon-wrapper {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: var(--primary-surface-color);
	border: 1px solid var(--secondary-surface-color);
	display: flex;
	align-items: center;
	justify-content: center;
}
.top-category-item svg {
	width: 24px;
	height: 24px;
}
.categories-scroll-container {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	padding: 0.5rem 0;
	margin-left: -1rem;
	padding-left: 1rem;
	padding-right: 1rem;
	-ms-overflow-style: none;
	scrollbar-width: none;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.categories-scroll-container::-webkit-scrollbar {
	display: none;
}
.discover-category-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 70px;
	flex-shrink: 0;
	cursor: pointer;
	gap: 0.5rem;
}
.discover-category-item img {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	object-fit: cover;
	background-color: var(--secondary-surface-color);
}
.discover-category-item p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--primary-text-color);
	width: 100%;
}
.subcategory-pills {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}
.subcategory-pills::-webkit-scrollbar {
	display: none;
}
.subcategory-pills {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.subcategory-pill {
	background-color: var(--primary-surface-color);
	border: 1px solid var(--secondary-surface-color);
	color: var(--secondary-text-color);
	padding: 8px 16px;
	border-radius: 20px;
	white-space: nowrap;
	cursor: pointer;
	font-size: 0.9rem;
}
.subcategory-pill.active {
	background-color: var(--accent-color);
	border-color: var(--accent-color);
	color: white;
}
#all-categories-list {
	display: flex;
	flex-direction: column;
}
.category-list-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--secondary-surface-color);
	cursor: pointer;
	transition: background-color 0.2s;
}
.category-list-item:hover {
	background-color: var(--primary-surface-color);
}
.category-list-item img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background-color: var(--secondary-surface-color);
}
.category-list-item .category-name {
	font-size: 1.1rem;
	color: var(--primary-text-color);
}
/* --- Batch Scan & Shelf Selector Modals --- */
#discover-rating-filter {
	accent-color: var(--accent-color);
	width: 18px;
	height: 18px;
}
#detailsUserRating {
	display: flex;
	justify-content: flex-start;
/* This stops the stars from spreading apart */
	gap: 4px;
/* This sets the space between each star */
}
#detailsUserRating .star-icon {
	cursor: pointer;
}
#detailsDescription,
#previewDescription {
	margin: 0;
	padding: 0;
    display: block;
    overflow: visible;
	white-space: pre-wrap;
	line-height: 1.6;
}
#detailsDescription.truncated {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Style the button */
.read-more-link {
    display: block;
    margin-top: 8px;
    color: var(--accent-color);
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
}


@keyframes fadeIn {
from {
	opacity: 0;
}
to {
	opacity: 1;
}
}



/* --- New Actionable Focus Card Style --- */
.focus-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--primary-surface-color);
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    align-items: flex-start;
    margin-bottom: 1rem; /* Space between focus card and controls */
}
.focus-card img {
    width: 80px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.focus-info {
    flex-grow: 1;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 120px;
}
.focus-info h3 {
    margin: 0 0 0.8rem 0;
    font-size: 1rem;
    font-weight: 600;
    
    /* Enforce single line and ellipsis for long text */
    white-space: nowrap; 
    overflow: hidden;    
    text-overflow: ellipsis;
}
.focus-info p {
    flex-grow: 1;
    margin: 0.2rem 0 0.1rem 0;
    color: var(--secondary-text-color);
    font-size: 0.75rem;
}
.focus-card-pages {
    margin: 0; /* Space between text and bar */
    color: var(--secondary-text-color);
    font-size: 0.65rem; /* Small text size */
 
}
.focus-status-text { 
    margin: 0 0 0.4rem 0; 
    color: var(--secondary-text-color);
    font-size: 1rem;
    
    /* === FIX: Prevent wrapping and hide overflow === */
    white-space: nowrap; /* Forces text to stay on a single line */
    overflow: hidden;     /* Hides any text that goes past the container width */
    text-overflow: ellipsis; /* Optional: Shows '...' if text is cut off */
    /* Ensure the parent focus-info has flex-grow: 1; for this to work correctly */
}
.focus-status-top {
    /* Your "READING IN PROGRESS" text class (assuming this is it) */
    margin: 0 0 0.05rem 0; /* Minimal space below the status text */
    color: var(--accent-color);
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: bold;
}
#log-progress-btn {
    width: auto;
    margin-left: auto;
    margin-top: 0;
    height: 20px; /* Keep the desired fixed height */
    font-size: 0.9rem;
    font-weight: bold;
    background-color: var(--success-color);
    
    /* Zero out vertical padding and use line-height for centering */
    padding: 0 20px 0 12px; 
    line-height: 20px; /* Centers text vertically within 20px height */
}
/* --- Progress Bar Styling --- */
.goal-progress-bar {
    margin: 0 0 0.18rem 0;
    height: 24px; /* Increased height to accommodate text comfortably */
    background-color: #333; 
    border-radius: 4px;
    overflow: hidden;
    position: relative; /* CRUCIAL: Needed to position the inner text */
}

.goal-progress-bar-inner {
    height: 100%;
    /* Add color for the progress part here */
    background-color: var(--accent-color); 
    position: relative; /* Needed if text is fully contained inside */
}

/* NEW RULE: Style and position the percentage text */
.progress-percent-text {
    /* Always position the text in the center of the full bar */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the text perfectly */
    
    color: white; /* White text color */
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 2; /* Ensure it is above the colored bar */
    white-space: nowrap; /* Prevents wrapping */
}





/* --- Main Navigation Footer --- */
.main-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex; /* <-- FIX: Removed !important */
	justify-content: space-around;
	align-items: center;
	height: 70px;
	background-color: var(--primary-surface-color);
	border-top: 1px solid var(--secondary-surface-color);
	z-index: 5001; 
    height: 70px;
}
#main-nav-bar {

}
.details-header {
    z-index: 5000 !important;
}
.nav-item {
    width: 44px;
    
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--secondary-text-color);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
    position: relative;
}
.nav-item.active svg {
	color: var(--accent-color);
}
.nav-item svg {
	width: 26px;
	height: 26px;
	margin-bottom: 18px;
}
.nav-item-add {
	background-color: var(--accent-color);
	border-radius: 50%;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	transform: translateY(-20px);
	border: 4px solid var(--bg-color);
}
.nav-item-add svg {
	width: 28px;
	height: 28px;
	margin: 0;
}
#nav-notification-dot {
    display: none; /* Hidden by default */
    position: absolute;
    top: 6px; /* Adjust as needed */
    right: 22px; /* Adjust as needed */
    width: 10px;
    height: 10px;
    background-color: var(--accent-color);
    border-radius: 50%;
    border: 2px solid var(--primary-surface-color); /* Creates the "cutout" look */
    pointer-events: none; /* Dot shouldn't be clickable */
}

#nav-notification-dot.visible {
    display: block; /* This class will show the dot */
}


#selection-header,
#selection-footer {
	display: none;
}
#selection-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: var(--bg-color);
/* Match the app's background */
	z-index: 1001;
/* Ensure it's above other page content */
	box-sizing: border-box;
/* Include padding in the width calculation */
}
/* --- Generic UI Components --- */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0;
}
.header h1 {
	margin: 0;
	font-size: 7vw;
	font-weight: 600;
}
.header h1 span {
	font-size: 1rem;
	color: var(--secondary-text-color);
	font-weight: 400;
}
.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
    position: sticky;
    top: 0;
    /* FIX: Higher z-index and use the correct background variable */
    z-index: 501; 
    background-color: var(--bg-color); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    padding: 0.75rem 1rem 0.75rem 0.5rem;
}
.page-header h1 {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0;
}
.icon-button {
	background: none;
	border: none;
	color: var(--primary-text-color);
	padding: 8px;
	cursor: pointer;
}
.icon-button svg {
	display: block;
}
.button {
	background-color: var(--accent-color);
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 12px;
	font-size: 1rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.form-group {
	margin-bottom: 1.5rem;
	text-align: left;
}
.form-group label {
	display: block;
	margin-bottom: 8px;
	color: var(--secondary-text-color);
}
.form-group input, .form-group textarea, .search-bar-wrapper input {
	box-sizing: border-box;
	width: 100%;
	padding: 12px;
	border-radius: 8px;
	border: 1px solid var(--secondary-surface-color);
	background-color: var(--primary-surface-color);
	color: white;
	font-size: 1.1rem;
	font-family: inherit;
}
.form-group textarea {
	resize: vertical;
}
.fixed-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1rem;
	background-color: var(--primary-surface-color);
	z-index: 100;
	border-top: 1px solid var(--secondary-surface-color);
}
.fixed-footer .button {
	width: 100%;
	padding: 14px;
	font-size: 1.1rem;
}
.fixed-footer.split {
	display: flex;
	gap: 1rem;
}
.button.secondary {
	background-color: var(--secondary-surface-color);
}
/* --- Pocket Library Page --- */
.bookshelf-controls {
	position: sticky;
	top: 0;
	padding-top: 0.5rem;
	z-index: 500;
}
.tabs {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 1rem;
}
.tab-button {
	background: none;
	border: none;
	color: var(--secondary-text-color);
	font-size: 1.1rem;
	padding: 8px 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
}
.tab-button.active {
	color: #FFFFFF !important; /* Bright white */
	border-bottom: 3px solid var(--accent-color) !important; /* Thicker underline */
    text-shadow: 0 0 10px rgba(255, 215, 128, 0.9); /* Gold glow */
}
.action-bar {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}
.action-button {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: var(--primary-surface-color);
	border: 1px solid var(--secondary-surface-color);
	color: var(--primary-text-color);
	padding: 8x;
	border-radius: 9px;
	font-size: 0.8rem;
}
.action-button svg {
	width: 20px;
	height: 20px;
}

.action-button.filter-active {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}


#avatar-grid {
  display: grid; /* Enables the grid layout */
  
  /* This is the key: It creates as many columns as will fit */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  
  gap: 1rem; /* Sets the space between avatars */
  padding: 1rem; /* Adds space around the whole grid */
  justify-content: center; /* Centers the grid items */
}
#avatar-grid .avatar-item {
    width: 100px;
    height: 100px;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    border-radius: 50%; /* Makes avatars circular */
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

#avatar-grid .avatar-item:hover {
    border-color: var(--accent-color);
}

#avatar-grid .avatar-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* This is the new wrapper for all content that should scroll */
.community-page-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem; /* Add the page padding back here */
}

/* Make the header inside the page static */
#page-community .page-header {
    position: sticky;
    top: 0;
    background-color: var(--bg-color);
    z-index: 10;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin: -1rem -1rem 0 -1rem; /* Adjust for padding */
    padding-left: 1rem;
    padding-right: 1rem;
}

.community-content {
    display: none;
    padding-top: 1.5rem;
}
.community-content.active {
    display: block;
}


/* --- NEW CSS BLOCK: Sticky Header and Full-Screen for Public Profile --- */


/* 1. Page Structure: Full-screen, Sticky Header */
#page-public-list-view.page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 4001;
    display: none; /* Controlled by JS showPage() */
    flex-direction: column;
    padding: 0; /* Remove default page padding */
}

/* 2. Scrollable Content Area: Takes up remaining space */
#public-list-grid-container {
    flex-grow: 1; 
    overflow-y: auto; /* Enables scroll on the list itself */
    -webkit-overflow-scrolling: touch; /* Improves mobile scrolling */
}


/* --- NEW CSS BLOCK: Public Shared Racks View (Isolated) --- */

#page-public-racks-view.page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 4001;
    display: none; 
    flex-direction: column;
    padding: 0; 
    overflow-y: auto;
}

/* Ensure the grid displays the multiple-cover style defined by your .shelves-grid CSS */
#public-racks-grid {
    padding-top: 0;
    flex-shrink: 0;
}
/* --- END NEW CSS BLOCK --- */



/* 3. Grid Styling: Title Only (Based on your final request) */
.public-reads-grid {
    /* Ensures the inner grid is responsive */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
    padding: 0; /* Remove internal padding, padding is on the container */
}
.public-reads-grid .book-card h3 {
    /* Title: Single line, minimal margin */
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
    font-size: 0.85rem; 
    margin: 4px 0 0 0; 
}
.public-reads-grid .book-card p {
    /* Author/Metadata: HIDDEN */
    display: none; 
}
.public-reads-grid .book-card img {
    margin-bottom: 2px;
}


/* 1. Force the Public Profile page to behave like a full-screen application. */
#page-public-profile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 6001; /* High z-index to cover main app */
    display: none; /* Hidden by default */
    flex-direction: column;
}

#page-public-profile.active {
    display: flex;
    flex-direction: column;
    /* Use 100vh since the main nav will be hidden by JS logic */
    height: 100vh;
    padding: 0; /* Remove top/bottom page padding */
}

/* 2. Make the header non-scrolling and sticky to the top of the viewport. */
#page-public-profile .page-header {
    flex-shrink: 0; 
    position: sticky;
    top: 0;
    z-index: 510; /* Ensure it stays above scrolling content */
    /* Add padding back to the header element */
    padding: 1rem 1rem 0.5rem 1rem; 
    margin: 0; /* Prevent margin overlap */
}

/* 3. Make the scrollable content area fill the remainder of the screen. */
#public-profile-scroll-area {
    flex-grow: 1; /* Occupy all remaining vertical space */
    overflow-y: auto; /* Enable scrolling only for the content */
    overflow-x: hidden;
    padding: 1rem; /* Re-apply page padding inside the scrollable area */
    padding-bottom: 2rem; /* Extra space at the bottom */
}

/* If you need to specifically target the *content* inside the header to be full width: */
#page-public-profile .page-header {
    width: 100%;
}

/* --- Public Profile Tab Bar Adjustments --- */
#page-public-profile .top-actions-scroll-container {
    padding: 0 1rem 0.5rem 1rem; 
    margin-bottom: 0.5rem; 
    border-bottom: 1px solid var(--secondary-surface-color);
}
#page-public-profile .profile-tab-content {
    /* Remove padding from the tab container */
    padding: 0; 
}
#page-public-profile .bookshelf-grid,
#page-public-profile .shelves-grid {
    /* Add padding *inside* the grid containers */
    padding: 1.5rem 1rem; 
}
/* Re-add padding for specific tabs */
#public-profile-pulse .feed-item {
    padding: 1rem; /* Re-add padding to the feed items */
}
#public-profile-stats {
    padding: 1.5rem 1rem; /* Re-add padding to the stats tab */
}
.profile-section-title {
    font-size: 1.3rem;
    color: var(--primary-text-color);
    border-bottom: 1px solid var(--secondary-surface-color);
    padding-bottom: 0.75rem;
    margin: 2rem 0 1.5rem 0;
}
#public-profile-goals-container .goal-progress-bar {
    flex-grow: 1; /* Make bar take up space */
}
#public-profile-goals-container .goal-progress-text {
    flex-shrink: 0; /* Stop text from shrinking */
}

#public-feed-header {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    width: 100%;
    
    /* CRITICAL: Use a minimal vertical padding */
    padding: 0.25rem 1rem 0.25rem 0; 
    height: 48px; /* Standard single-line mobile header height */
    z-index: 510;
    background-color: var(--bg-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#public-feed-header .btn-back {
    /* Push the icon itself slightly off the left edge, and ensure minimal vertical padding */
    padding: 0.5rem 0.75rem 0.5rem 0.5rem !important;
    margin-left: -10px; /* Push left element 1px further right from the screen edge */
}

#public-feed-header #public-feed-title {
    flex-grow: 1; 
    text-align: center;
    white-space: nowrap; 
    //overflow: hidden; 
    //text-overflow: ellipsis;
    margin-top: 15px; /* Pushes the text 5px down from the center point */
    font-size: 1.2rem; /* Ensure standard size */
    font-weight: 600; 
}


/* --- FINAL CORRECTED CSS: Public Shared Reads Grid Style (Title Only) --- */
.public-reads-grid .bookshelf-grid {
    /* Ensure the base grid layout is correct */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Use 100px minimum width for stability */
    gap: 1rem;
}
.public-reads-grid .book-card h3 {
    /* CRITICAL: Ensure title is visible and minimally styled */
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
    font-size: 0.85rem; /* A slightly smaller font size works well here */
    margin: 4px 0 0 0; /* Add margin above title, remove below */
}
.public-reads-grid .book-card p {
    /* CRITICAL: Hide the author/subtitle line completely */
    display: none; 
}
.public-reads-grid .book-card img {
    /* Reduce bottom margin on cover to pull title closer */
    margin-bottom: 2px;
}

.profile-scroll-content {
    flex-grow: 1; /* Allow content to fill space */
    overflow-y: auto; /* Make content scrollable */
    padding-bottom: 90px; /* Make space for the sticky footer */
}
.profile-public-header {
    display: flex;
    align-items: flex-start; /* CRITICAL FIX: Align content to the top */
    padding: 1rem;
    padding-top: 1.5rem; /* Add some space above the entire block */
    gap: 1.5rem;
}

#public-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--secondary-surface-color);
    flex-shrink: 0;
}

.profile-public-info {
    flex-grow: 1;
    height: 80px; /* Match the height of #public-profile-avatar */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* CRITICAL FIX: Pushes nickname to top, stats to bottom */
}

#public-profile-nickname {
    font-size: 1.5rem;
    margin: 0 0 0.75rem 0;
    font-weight: 600;
}



.profile-follow-stats {
    display: flex;
    gap: 2.5rem;
    margin-top: auto; /* Ensure it stays pushed to the bottom */
}

.profile-follow-stats > div {
    cursor: pointer;
}
.follow-count {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-text-color);
    display: block;
}
.follow-label {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
}
.profile-about-section {
    padding: 0 1rem 1.5rem 1rem;
}
.profile-about-section h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--secondary-text-color);
}
.profile-about-section p {
    margin: 0;
    line-height: 1.6;
    color: var(--primary-text-color);
}
.profile-tab-content {
    padding: 1.5rem 1rem;
}
.profile-tab-content .horizontal-book-scroll {
    padding-bottom: 1rem;
    justify-content: center;
}


/* --- ABOUT PAGE & CHANGELOG STYLES --- */

/* Navigation Header (Arrows + Version Title) */
.whats-new-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--secondary-surface-color);
    background-color: rgba(0,0,0,0.1);
}
.wn-version-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary-text-color);
}
.wn-version-date {
    display: block;
    font-size: 0.7rem;
    color: var(--secondary-text-color);
    font-weight: normal;
    margin-top: 2px;
}

/* Content List inside the card */
.whats-new-content {
    padding: 1rem 1.5rem;
    min-height: 150px; /* Prevents jumping when switching versions */
}

/* "Keep a Changelog" Colored Labels */
.cl-tag {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 12px 0 6px 0;
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
.tag-Added { color: #66bb6a; background: rgba(102, 187, 106, 0.1); }
.tag-Changed { color: #ffa726; background: rgba(255, 167, 38, 0.1); }
.tag-Fixed { color: #42a5f5; background: rgba(66, 165, 245, 0.1); }
.tag-Removed { color: #ef5350; background: rgba(239, 83, 80, 0.1); }
.tag-Deprecated { color: #ab47bc; background: rgba(171, 71, 188, 0.1); }
.tag-Security { color: #ec407a; background: rgba(236, 64, 122, 0.1); }

.cl-list {
    list-style: disc;
    padding-left: 1.2rem;
    margin: 0;
    color: var(--primary-text-color);
    font-size: 0.9rem;
    line-height: 1.6;
}
.cl-list li { margin-bottom: 4px; }

/* Full Changelog Scroll Area */
.full-changelog-scroll {
    max-height: 300px;
    overflow-y: auto;
    padding: 1rem;
    border-top: 1px solid var(--secondary-surface-color);
}
.full-log-entry {
    margin-bottom: 2rem;
    border-left: 2px solid var(--secondary-surface-color);
    padding-left: 1rem;
}


/* --- Buddy Read Card Styles --- */
.buddy-read-card {
    display: flex;
    gap: 1rem;
    background-color: var(--primary-surface-color);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--secondary-surface-color);
    margin-bottom: 1rem;
    cursor: pointer;
}
.buddy-read-card img {
    width: 80px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.buddy-read-info {
    /* This tells the info box to fill the available space */
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}
.buddy-read-info h3 {
    margin: 0 0 4px 0;
    font-size: 1rem;
}
.buddy-read-info p {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    color: var(--secondary-text-color);
}
/* --- Buddy Read Card Star Rating Fix --- */
.buddy-read-card .card-rating {
    margin-top: 4px; /* Adds space between author and stars */
    margin-bottom: 8px; /* Adds space between stars and participants text */
}

.buddy-read-card .card-rating svg {
    width: 16px;  /* Makes the star icons smaller */
    height: 16px; /* Makes the star icons smaller */
    color: var(--pro-color);
}

.buddy-read-card .card-rating .rating-text {
    font-size: 0.8rem; /* Makes the (X ratings) text smaller */
    color: var(--secondary-text-color);
    margin-left: 4px;
}
.participants {
    display: flex;
    align-items: center;
    margin-top: auto; 
    padding-top: 8px;
}
.participants .user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 8px;
}
.participants-text {
    font-size: 0.8rem;
    color: var(--accent-color);
    font-weight: 500;
}


#page-community-login-gate.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
/* New layout for the Community page */
#page-community.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 70px); /* Full screen minus bottom nav */
    padding: 0; /* Padding on the sides only */
}

/* Make the tabs container sticky */
#page-community .tabs {
    position: sticky;
    top: 0;

    z-index: 10;
    flex-shrink: 0;
    padding-top: 0;
    padding-left: 1rem;   /* Add this line */
    padding-right: 1rem;  /* Add this line */
}

/* This new container will handle the scrolling */
.community-scroll-container {
    flex-grow: 1;
    overflow-y: auto;
}

#community-action-bar {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    padding: 0 1rem;
}

#community-action-bar .action-button {
    padding-top: 6px;
    padding-bottom: 6px;
}


/* --- Advanced Filter Styles --- */
#active-filters-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid var(--secondary-surface-color);
    margin-bottom: 1rem;
}
.active-filter-pill {
    background-color: var(--accent-color);
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.active-filter-pill button {
    background: none;
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
.filter-select-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid var(--secondary-surface-color);
    cursor: pointer;
}
.filter-select-item.selected {
    color: var(--accent-color);
    font-weight: bold;
}
.filter-select-item svg {
    width: 24px;
    height: 24px;
}


/* --- Add this new CSS block --- */
.input-with-button-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.input-with-button-group input {
    flex-grow: 1;
    margin-bottom: 0; /* Prevents extra spacing */
}
.input-with-button-group #find-by-isbn-btn {
    flex-shrink: 0; /* Prevents the button from shrinking */
}
.input-with-button-group.is-editing #find-by-isbn-btn {
    display: none; /* Hides the 'Find' button when editing */
}


#search-bar-container {
	display: none;
	width: 100%;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}
#search-input {
	flex-grow: 1;
	padding: 10px;
	font-size: 1rem;
}
#search-cancel-btn {
	padding: 10px;
}
.grid-container {
	padding-top: 1rem;
    overflow-x: hidden;
}
.bookshelf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); 
	gap: 1rem;
}
.book-card {
	background-color: transparent;
	overflow: hidden;
	text-align: left;
	cursor: pointer;
    
}
.book-card img {
	width: 100%;
	height: auto;
	aspect-ratio: 2/3;
	object-fit: cover;
	border-radius: 12px;
	background-color: var(--secondary-surface-color);
	margin-bottom: 8px;
}
.book-card h3 {
	margin: 0 0 2px 0;
	font-size: 0.8rem;
	font-weight: normal;
	white-space: nowrap;
	overflow: hidden;

}
.book-card p {
	margin: 0;
	font-size: 0.8rem;
	color: var(--secondary-text-color);
    white-space: normal;
}
.book-card4 .card-rating {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-top: 4px;
	color: var(--pro-color);
}
.book-card .card-rating svg {
	width: 14px;
	height: 14px;
}
.book-card.cover-error img {
    border: 2px dashed var(--accent-color);
    opacity: 0.7;
}
.book-card .card-rating .rating-text {
	font-size: 0.75rem;
	color: var(--secondary-text-color);
	margin-left: 4px;
}


/* --- CRITICAL FIX: Ensure content sits above the fixed nav bar (70px tall) --- */
.safe-scroll-bottom {
    /* Nav height (70px) + Extra space (20px) = 90px */
    padding-bottom: 90px !important; 
}





/* --- Activity Feed ("The Pulse") Styles --- */

/* --- FINAL SINGLE-COLUMN FEED LAYOUT --- */
#activity-feed-content .feed-item,
#public-profile-pulse .feed-item {
    padding: 1.25rem; /* The main padding for the whole item */
    border-bottom: 1px solid var(--secondary-surface-color);
}

#activity-feed-content .feed-item:last-child {
    border-bottom: none;
}

/* Header for Avatar and Action Text */
#activity-feed-content .feed-item-header,
#public-profile-pulse .feed-item-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

#activity-feed-content .user-avatar,
#public-profile-pulse .user-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}

#activity-feed-content .action-text,
#public-profile-pulse .action-text {
    margin: 0;
}

#activity-feed-content .user-name {
    font-weight: 600;
}

#activity-feed-content .feed-user-rating,
#public-profile-pulse .feed-user-rating {
    color: var(--pro-color);
    font-weight: 600;
}

/* Book Card Section */
#activity-feed-content .feed-book-card,
#public-profile-pulse .feed-book-card {
    display: flex;
    gap: 1rem;
    cursor: pointer;
    margin-bottom: 1rem;
}

#activity-feed-content .feed-book-cover,
#public-profile-pulse .feed-book-cover {
    width: 80px; /* Cover is aligned with avatar via the parent padding */
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

#activity-feed-content .feed-book-details,
#public-profile-pulse .feed-book-details {
    flex-grow: 1;
}

#activity-feed-content .feed-book-details h3,
#public-profile-pulse .feed-book-details h3 {
    font-size: 1.1rem;
    margin: 0 0 0.25rem 0;
}

#activity-feed-content .feed-book-details p,
#public-profile-pulse .feed-book-details p {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    margin: 0 0 0.75rem 0;
}

#activity-feed-content .feed-book-public-rating,
#public-profile-pulse .feed-book-public-rating {
    margin-bottom: 0.75rem;
}

#activity-feed-content .card-rating,
#public-profile-pulse .card-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--pro-color);
}

#activity-feed-content .card-rating svg,
#public-profile-pulse .card-rating svg {
    width: 16px;
    height: 16px;
}

#activity-feed-content .card-rating .rating-text,
#public-profile-pulse .card-rating .rating-text {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    margin-left: 4px;
}

/* --- Pulse Feed Like Button Style --- */
#activity-feed-content .feed-actions .icon-button.active {
    color: var(--accent-color);
}

#activity-feed-content .feed-book-category-pills,
#public-profile-pulse .feed-book-category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#activity-feed-content .feed-book-category-pill,
#public-profile-pulse .feed-book-category-pill {
    font-size: 0.75rem;
    background-color: var(--secondary-surface-color);
    padding: 4px 10px;
    border-radius: 12px;
}

/* Footer with icons and timestamp */
#activity-feed-content .feed-item-footer,
#public-profile-pulse .feed-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--secondary-text-color);
    font-size: 0.8rem;
}

#activity-feed-content .feed-actions,
#public-profile-pulse .feed-actions {
    display: flex;
    gap: 1rem;
}

#activity-feed-content .icon-button {
    color: var(--secondary-text-color);
    font-size: 1.2rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
 
/* --- START: NEW BUTTON STYLES (Added at the end) --- */
#activity-feed-content .feed-book-card-footer,
#public-profile-pulse .feed-book-card-footer {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem; /* Space above the buttons */
}

#activity-feed-content .feed-card-btn,
#public-profile-pulse .feed-card-btn {
    flex-grow: 1;
    padding: 8px 12px; /* Make buttons a bit smaller */
    font-size: 0.9rem;
    /* This will inherit styles from your global .button class */
}

.feed-action-count {
    color: var(--secondary-text-color) !important; /* Force it to stay gray/secondary */
    font-size: 0.8rem; /* <-- THIS IS THE NEW FONT SIZE (Matches timestamp) */
    margin-left: 4px;
    font-weight: normal; 
    text-decoration: none; 
    display: inline-block; 
}

/* Ensure the count size also applies inside the button's active state */
.feed-actions .icon-button.active .feed-action-count {
    color: var(--secondary-text-color) !important;
    font-size: 0.8rem;
}    

    
}

/* --- Final CSS for Racks Stability --- */

.shelves-grid {
	display: flex; 
    flex-wrap: wrap; 
	justify-content: flex-start; 
    
	gap: 0.75rem; 
    
    max-width: none !important; 
    width: 100%;
    margin: 0 auto;  
    padding: 0 1rem;
}

/* 2. Target the RACK ITEM for sizing and growth */
.shelves-grid .book-card {
    /* CRITICAL: Must be updated to include min-width */
    flex: 1 1 120px; 
    min-width: 90px; /* Enforces the minimum size for readability */
    
    width: auto; 
    max-width: none; 
    
    padding: 0; 
    margin: 0 0 1rem 0; 
}
/* --- (All vertical compression rules remain in place) --- */

.shelf-card-cover {
	width: 100%;
	aspect-ratio: 1/1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	background-color: var(--secondary-surface-color);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 6px;
}
.shelf-card-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* --- Book Details & Preview Pages --- */
.details-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	/* FIX: Change from absolute to sticky for scrolling pages, or FIXED for overlay pages */
    position: fixed; /* Use fixed if the page is a full-screen overlay, as yours is */
	top: 0;
	left: 0;
	right: 0;
	z-index: 5000; /* Higher z-index to layer above page content */
	/* FIX: Add a solid background color */
	background-color: var(--bg-color); 
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.details-header .icon-button svg {
	color: var(--primary-text-color);
}
.details-content {
	padding-top: 4rem;
}
.details-main-info {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.details-main-info img {
	width: 120px;
	height: 180px;
	object-fit: cover;
	border-radius: 8px;
}
.details-title-author h2 {
	margin: 0 0 4px 0;
	font-size: 1.1rem;
}
.details-title-author p {
	margin: 0;
	color: var(--secondary-text-color);
	font-size: 0.9rem;
}
.details-title-author .subtitle {
	font-size: 1rem;
	margin-top: 4px;
}
.details-rating {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 1rem;
	color: var(--pro-color);
}
.details-rating svg {
	width: 20px;
	height: 20px;
}
.details-rating span {
	font-size: 0.9rem;
	color: var(--secondary-text-color);
	margin-left: 4px;
}
.details-pills {
	display: flex;
	gap: 4px;
	margin-top: 0.75rem;
}
.details-pill {
	border: 1px solid var(--secondary-surface-color);
	padding: 4px 10px;
	border-radius: 15px;
	font-size: 0.8rem;
}
.info-list-item {
	display: flex;
	flex-direction: column;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--secondary-surface-color);
}
.info-list-item-title {
	color: var(--secondary-text-color);
	font-size: 0.8rem;
	margin-bottom: 4px;
	text-transform: uppercase;
}
.info-list-item-value {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.info-list-item-value.pro {
	color: var(--pro-color);
}
.info-list-item-value svg {
	width: 16px;
	height: 16px;
	color: var(--secondary-text-color);
}
.filter-wrapper {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	color: var(--secondary-text-color);
}

.read-more-link {
	color: var(--accent-color);
	cursor: pointer;
	font-weight: bold;
	display: block;
	margin-top: 8px;
}
/* --- Settings Page Styles --- */
#page-create-profile .form-group label[for="profile-about-me"] {
    margin-top: 1rem; 
    margin-bottom: 0;
}
.profile-header {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: var(--primary-surface-color); /* Dark card background */
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s;
    cursor: pointer;
}
.profile-avatar {
	width: 80px;
	height: 80px;
	margin: 0 auto 1rem auto;
	background-color: var(--primary-surface-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--secondary-surface-color);
}
.profile-avatar svg {
	width: 40px;
	height: 40px;
	color: var(--secondary-text-color);
}
.profile-header:hover {
    background-color: var(--hover-surface-color);
}
.profile-header .profile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--accent-color); /* Ensures the circle color */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 1rem;
    flex-shrink: 0;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.profile-header .profile-avatar svg {
    /* Style for the default user icon when no avatar is set */
    width: 100%;
    height: 100%;
    padding: 6px;
    stroke: white;
}
.profile-header .profile-avatar img {
    border-radius: 50% !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-header .profile-text-group {
    flex-grow: 1;
}



.profile-section-container {
    margin-top: 2.5rem;
    padding: 0 1rem;
}

.profile-section-container h2 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--primary-text-color);
    border-bottom: 1px solid var(--secondary-surface-color);
    padding-bottom: 0.5rem;
}

/* Ensure the padding on this element is simplified, as the scrollable content handles margins */
#bookshelf-focus-area {
    /* Use !important here if necessary to override any inline styles */
    padding: 1rem 0 1rem 0 !important; 
}

/* Also ensure no overflow: hidden is accidentally set on the body or the grid-container */
/* The current grid-container CSS already correctly handles overflow-y: scroll */

/* --- Statistics & Reading Goal Page Styles --- */
.stats-section {
    margin-bottom: 2.5rem;
}

.stats-section h2 {
    font-size: 1.3rem;
    color: var(--primary-text-color);
    border-bottom: 1px solid var(--secondary-surface-color);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}

/* --- Horizontal Stats Card Container --- */
.stats-glance-container {
    display: flex;
    overflow-x: scroll;
    gap: 1rem;
    padding: 0 1rem 1rem 1rem; /* Pad on left/right and bottom */
    margin: 0 -1rem; /* Negative margin to extend to the edge */
    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    flex-wrap: nowrap;
    cursor: grab;
    white-space: nowrap; /* Prevent wrapping */
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
.stats-glance-container::-webkit-scrollbar {
    display: none;
}

.stats-card {
    /* --- EXISTING STYLES --- */
    min-width: 80px; 
    height: 40px; 
    background-color: var(--secondary-surface-color);
    padding: 0.75rem; 
    border-radius: 12px;
    flex-shrink: 0; 
    
    /* --- CRITICAL NEW FLEXBOX PROPERTIES --- */
    display: flex; /* Activate Flexbox */
    flex-direction: column; /* Stack children vertically (value above label) */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
}

/* ... other styles remain ... */
.stats-card-value {
    /* Reduce font size for the numbers */
    font-size: 1.3rem; /* Reduced from 1.5rem */
    font-weight: 700;
    color: var(--accent-color);
}
.stats-card-label {
    /* Reduce font size for the text */
    font-size: 0.7rem; /* Reduced from 0.8rem */
    color: var(--secondary-text-color);
    font-weight: 500;
    text-transform: uppercase;
}


#reading-goal-year,
#reading-goal-year-title { /* Target both titles */
    text-align: center;
    border-bottom: none;
    margin-bottom: 1rem;
}

.reading-goal-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.goal-progress-bar {
    flex-grow: 1;
    height: 10px;
    background-color: var(--secondary-surface-color);
    border-radius: 5px;
    overflow: hidden;
}

.goal-progress-bar-inner {
    height: 100%;
    background-color: var(--accent-color);
    border-radius: 5px;
    transition: width 0.5s ease-out;
}

.goal-progress-text {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1.1rem;
    color: var(--secondary-text-color);
}

.goal-progress-text #goal-books-read,
.goal-progress-text #goal-books-read-goals { /* Target both */
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--primary-text-color);
}

/* --- THIS IS THE FIX --- */
/* Target both the old and new input IDs */
.goal-progress-text #goal-input,
.goal-progress-text #goal-input-goals {
    width: 60px;
    background: var(--secondary-surface-color);
    border: 1px solid var(--primary-surface-color);
    color: var(--primary-text-color);
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
    padding: 4px 0;
    -moz-appearance: textfield;
}

.goal-progress-text #goal-input::-webkit-outer-spin-button,
.goal-progress-text #goal-input::-webkit-inner-spin-button,
.goal-progress-text #goal-input-goals::-webkit-outer-spin-button,
.goal-progress-text #goal-input-goals::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* --- END FIX --- */

.goal-message {
    text-align: center;
    color: var(--secondary-text-color);
    font-style: italic;
}


.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    text-align: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background-color: var(--primary-surface-color);
    border-radius: 8px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--accent-color);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    margin-top: 0.25rem;
}



/* 1. The Container (Invisible wrapper for alignment) */
.achievements-grid {
    /* Ensure grid spacing fits circles */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); 
    gap: 1rem;
    justify-items: center; /* Centers items in their cells */
}

.achievement-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.achievement-wrapper:hover {
    transform: translateY(-5px);
}

/* 2. The Medal (The Circular Disc) */
.achievement-medal {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 8px;
    
    /* Default Dark Metal Base */
    background: linear-gradient(145deg, #2a2a2a, #111);
    border: 4px solid #444; /* Default border */
    
    /* Depth Shadows */
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.5), /* Drop shadow */
        inset 0 2px 4px rgba(255,255,255,0.2), /* Inner highlight */
        inset 0 -2px 4px rgba(0,0,0,0.5); /* Inner shadow */
}

.achievement-medal .icon {
    font-size: 1.8rem;
    z-index: 2;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5)); /* "Engraved" look */
}

/* 3. Text Label (Below the medal) */
.achievement-label {
    font-size: 0.7rem;
    text-align: center;
    line-height: 1.2;
    color: var(--secondary-text-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =========================
   TIER COLORS (The "Metals")
   ========================= */

/* BRONZE TIER */
.tier-bronze .achievement-medal {
    border-color: #cd7f32; /* Bronze Border */
    background: radial-gradient(circle at 30% 30%, #5c3a1e, #3e230f);
}
.tier-bronze .icon {
    color: #cd7f32;
    background: linear-gradient(to bottom, #ffcba4, #8c5e3c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* SILVER TIER */
.tier-silver .achievement-medal {
    border-color: #c0c0c0; /* Silver Border */
    background: radial-gradient(circle at 30% 30%, #4a4a4a, #222);
}
.tier-silver .icon {
    color: #e0e0e0;
    background: linear-gradient(to bottom, #ffffff, #999999);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* GOLD TIER */
.tier-gold .achievement-medal {
    border-color: #ffd700; /* Gold Border */
    background: radial-gradient(circle at 30% 30%, #634f0c, #382c02);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3), inset 0 0 10px rgba(0,0,0,0.8); /* Add Glow */
}
.tier-gold .icon {
    color: #ffd700;
    background: linear-gradient(to bottom, #fff7cc, #ffaa00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Optional: Shine effect overlay */
.achievement-medal .shine {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
    pointer-events: none;
}


/* Ensure the large modal medal inherits the correct colors */
.modal-content.tier-bronze .achievement-medal {
    border-color: #cd7f32; 
    background: radial-gradient(circle at 30% 30%, #5c3a1e, #3e230f);
}
.modal-content.tier-bronze .icon {
    color: #cd7f32;
    background: linear-gradient(to bottom, #ffcba4, #8c5e3c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modal-content.tier-silver .achievement-medal {
    border-color: #c0c0c0; 
    background: radial-gradient(circle at 30% 30%, #4a4a4a, #222);
}
.modal-content.tier-silver .icon {
    color: #e0e0e0;
    background: linear-gradient(to bottom, #ffffff, #999999);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modal-content.tier-gold .achievement-medal {
    border-color: #ffd700;
    background: radial-gradient(circle at 30% 30%, #634f0c, #382c02);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.4), inset 0 0 10px rgba(0,0,0,0.8);
}
.modal-content.tier-gold .icon {
    color: #ffd700;
    background: linear-gradient(to bottom, #fff7cc, #ffaa00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}




.settings-list .settings-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 0.5rem;
	border-bottom: 1px solid var(--secondary-surface-color);
	cursor: pointer;
}
.settings-list .pro-badge {
	background-color: var(--pro-color);
	color: var(--bg-color);
	font-size: 0.7rem;
	font-weight: bold;
	padding: 3px 8px;
	border-radius: 6px;
}
.settings-item .radio-button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--secondary-surface-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}
.settings-item .radio-button div {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--accent-color);
    transform: scale(0);
    transition: transform 0.2s ease-in-out;
}
.settings-item.selected .radio-button {
    border-color: var(--accent-color);
}
.settings-item.selected .radio-button div {
    transform: scale(1);
}
.date-format-label {
    flex-grow: 1;
}
.date-format-example {
    color: var(--secondary-text-color);
}



/* --- Toggle Switch Styles --- */
.toggle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid var(--secondary-surface-color);
}
.switch {
    position: relative;
    display: inline-block;
    width: 51px;
    height: 31px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--secondary-surface-color);
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 23px;
    width: 23px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: var(--accent-color);
}
input:checked + .slider:before {
    transform: translateX(20px);
}



/* --- Modals --- */
/* --- Modals --- */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.7);
	z-index: 5500; /* <-- FIX: Was 3500, now 5500 to appear over the details page */
	display: none;
	align-items: flex-end;
	justify-content: center;
}
.modal-content {
	background-color: var(--primary-surface-color);
	width: 100%;
	padding: 1rem;
	padding-bottom: 2rem;
	border-radius: 24px 24px 0 0;
	animation: slideUp 0.3s ease-out;
	max-width: 500px;
}
.modal-content.centered {
	border-radius: 20px;
	align-self: center;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
}
.modal-list-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	font-size: 1.1rem;
	cursor: pointer;
}
.modal-list-item.active {
	color: var(--accent-color);
}
@keyframes slideUp {
from {
	transform: translateY(100%);
}
to {
	transform: translateY(0);
}
}
/* --- Duplicate Book Modal --- */
#duplicate-book-modal .modal-content {
	text-align: center;
}
#duplicate-book-modal h3 {
	margin-top: 0.5rem;
	font-size: 1.3rem;
}
#duplicate-book-modal p {
	color: var(--secondary-text-color);
	margin: 0.5rem 0 1.5rem 0;
}
.duplicate-options {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.duplicate-options .button {
	width: 100%;
	padding: 14px;
	font-size: 1.1rem;
}
.duplicate-options .button.secondary {
	background-color: var(--secondary-surface-color);
}


/* --- Status Page Styles --- */
#status-type-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1rem;
}
.status-type-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 1.1rem;
}
.status-type-option .radio-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--secondary-surface-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.status-type-option .radio-dot::after {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--accent-color);
    transform: scale(0);
    transition: transform 0.2s ease-in-out;
}
.status-type-option.selected .radio-dot {
    border-color: var(--accent-color);
}
.status-type-option.selected .radio-dot::after {
    transform: scale(1);
}


/* --- Scanner Page --- */
/* --- Scanner Page Styles (Corrected) --- */
#page-scanner {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 3000;
}
#scanner-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* This container holds ALL UI elements and the viewfinder */
.scanner-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* The viewfinder creates the dark overlay and holds the white corners */
.scanner-viewfinder {
/* This centers the clear box perfectly */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 85vw;
	max-width: 400px;
	aspect-ratio: 4 / 6;
/* The shadow creates the dark overlay AROUND the box */
	box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.7);
/* NOTE: No z-index here. This element sits below the UI. */
}
.corner {
	position: absolute;
	width: 35px;
	height: 35px;
	border: 5px solid white;
	border-radius: 12px;
}
.corner.top-left {
	top: 0;
	left: 0;
	border-right: none;
	border-bottom: none;
}
.corner.top-right {
	top: 0;
	right: 0;
	border-left: none;
	border-bottom: none;
}
.corner.bottom-left {
	bottom: 0;
	left: 0;
	border-top: none;
	border-right: none;
}
.corner.bottom-right {
	bottom: 0;
	right: 0;
	border-top: none;
	border-left: none;
}
/* The UI elements are positioned on top of everything */
.scanner-header, .scanner-footer {
	position: absolute;
	left: 0;
	width: 100%;
	padding: 1.5rem;
	box-sizing: border-box;
	z-index: 10;
/* High z-index guarantees they are on top of the shadow */
	color: white;
/* Using flex for easy alignment of items INSIDE header/footer */
	display: flex;
	flex-direction: column;
	align-items: center;
}
.scanner-header {
	top: 0;
}
.scanner-footer {
	bottom: 0;
}
#scanner-close-btn {
	align-self: flex-start;
/* Pushes button to the top-left */
}
#scanner-instructions {
/* Optional: A slight background makes the text easier to read */
	background-color: rgba(0, 0, 0, 0.4);
	padding: 8px 16px;
	border-radius: 20px;
	margin-top: 1rem;
	text-align: center;
	font-size: 0.9rem;
}
.scanner-controls {
	display: flex;
	justify-content: center;
	gap: 60px;
	width: 100%;
	margin-top: 1rem;
/* Or adjust as needed */
}
/* ... any other scanner styles like .scanner-control-btn can remain below ... */
/* --- Status Toast --- */
#status-toast {
	position: fixed;
	bottom: 90px;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--secondary-surface-color);
	color: var(--primary-text-color);
	padding: 12px 20px;
	border-radius: 25px;
	z-index: 5501;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}
#status-toast.show {
	opacity: 1;
	visibility: visible;
}
/* --- Selection Mode Styles --- */
/* NEW: Styles for the selection footer to act like a modal */
#selection-footer.modal-overlay {
	align-items: flex-end;
/* This makes the content slide up from the bottom */
}
#selection-footer .modal-content {
	padding-bottom: 1rem;
}
.book-card {
	position: relative;
/* Needed for the overlay */
}
.selection-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 2.5em);
/* Cover image only */
	background-color: rgba(0,0,0,0.5);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-color);
	opacity: 0;
	transition: opacity 0.2s;
	pointer-events: none;
/* Allows clicks to go through to the card */
}
.book-card.selected .selection-overlay {
	opacity: 1;
}
.selection-overlay svg {
	width: 40px;
	height: 40px;
}
/* Logic to swap headers and footers when select mode is active */
body.select-mode-active #bookshelf-header, body.select-mode-active .main-nav {
	display: none;
}
/* ADD THIS CSS CODE INSIDE THE             <style> TAG */
/* --- Cover Search Modal Styles --- */
#cover-results-grid {
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.cover-search-item {
	width: 100%;
	aspect-ratio: 2/3;
	object-fit: cover;
	border-radius: 8px;
	cursor: pointer;
	background-color: var(--secondary-surface-color);
	transition: transform 0.2s ease-in-out;
}
.cover-search-item:hover {
	transform: scale(1.05);
}
/* --- Discover Page Styles --- */
.search-bar-wrapper {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}
.search-bar-wrapper input {
	margin-bottom: 0;
}

/* --- FIXED: Discover Search Results Layout --- */

/* 1. IMAGE: Force removal of all spacing below the cover */
#discover-results-grid .book-card img {
    margin-bottom: 0 !important; /* Overrides the global 8px margin */
    padding-bottom: 0 !important;
    display: block !important;   /* Removes inline text whitespace gaps */
}

/* 2. TITLE: Pull it up tight against the image */
#discover-results-grid .book-card h3 {
    margin-top: 4px !important;  /* Only 4px gap from the cover */
    margin-bottom: 2px !important; /* Minimal gap to author */
    
    /* Ellipsis Logic */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    
    font-size: 0.9rem;
    line-height: 1.25; /* Tighter line height */
}

/* 3. AUTHOR: Limit to 1 line */
#discover-results-grid .book-card p {
    display: block !important;
    margin-top: 0 !important;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}

/* 4. RATING: Hide text, show stars only */
#discover-results-grid .book-card .rating-text {
    display: none !important;
}

#discover-results-grid .book-card .card-rating {
    display: flex !important;
    margin-top: 4px !important;
}

/* --- Date Picker Modal Styles --- */
#date-picker-header {
    background-color: var(--accent-color);
    color: white;
    padding: 1.5rem 1.5rem;
    border-radius: 20px 20px 0 0;
}
#date-picker-header #date-picker-year {
    display: block;
    font-size: 1rem;
    opacity: 0.8;
}
#date-picker-header #date-picker-date {
    display: block;
    font-size: 1.8rem;
    font-weight: 500;
}
#date-picker-body {
    padding: 0.5rem;
}
#date-picker-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
}
#date-picker-controls button {
    background: none;
    border: none;
    color: var(--primary-text-color);
    cursor: pointer;
    padding: 8px;
}
#date-picker-month-year {
    font-weight: 500;
}
#date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 0.5rem;
    text-align: center;
}
.date-picker-day-name, .date-picker-day {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
}
.date-picker-day-name {
    color: var(--secondary-text-color);
    font-size: 0.8rem;
}
.date-picker-day {
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.2s;
}
.date-picker-day:hover {
    background-color: var(--primary-surface-color);
}
.date-picker-day.other-month {
    color: var(--secondary-text-color);
    opacity: 0.5;
}
.date-picker-day.today {
    border: 1px solid var(--accent-color);
}
.date-picker-day.selected {
    background-color: var(--accent-color);
    color: white;
    border: 1px solid var(--accent-color);
}
#date-picker-manual-input {
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    width: 100%;
    margin-top: 1rem;
    padding: 0.5rem 0;
    font-size: 1rem;
    font-family: inherit;
}
#date-picker-manual-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
}
#date-picker-manual-input:focus {
    outline: none;
    border-bottom: 2px solid white;
}
#date-picker-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.5rem;
}




#page-shelf-selector {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 4001; /* This makes it appear ON TOP of the details page */
    overflow-y: auto;
}


#shelf-destination-list,
#shelf-selector-list {
	overflow-y: auto;
	padding: 0;
	margin: 1rem 0 0 0;
	list-style: none;
}
#shelf-destination-list .modal-list-item.hidden,
#shelf-selector-list .shelf-selector-item.hidden {
	display: none;
}
#shelf-search-input,
#shelf-selector-search {
	width: 100%;
	padding: 12px;
	font-size: 1.1rem;
}
#shelf-view-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.shelf-selector-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem;
	border-bottom: 1px solid var(--secondary-surface-color);
}
.shelf-selector-item input[type="radio"] {
	accent-color: var(--accent-color);
	width: 20px;
	height: 20px;
}
.shelf-selector-item label {
	flex-grow: 1;
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}
.shelf-selector-item img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}
/* --- Bookstores Page --- */
#bookstore-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.bookstore-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	border-bottom: 1px solid var(--secondary-surface-color);
}
.bookstore-item input[type="radio"] {
	accent-color: var(--accent-color);
	width: 20px;
	height: 20px;
}
.bookstore-item label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.bookstore-item .store-name {
	font-size: 1.1rem;
}
.bookstore-item .store-price {
	font-size: 1.1rem;
	font-weight: bold;
}
#go-to-bookstore-btn:disabled {
	background-color: var(--secondary-surface-color);
	cursor: not-allowed;
}
/* Styling for the new slider */
.slider-container {
	width: 100%;
	margin-top: 8px;
}
input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 8px;
	background: var(--secondary-surface-color);
	border-radius: 4px;
	outline: none;
	cursor: pointer;
	padding: 0;
	margin: 0;
}
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	background: var(--primary-text-color);
	border-radius: 50%;
	cursor: pointer;
	border: 3px solid var(--accent-color);
}
input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background: var(--primary-text-color);
	border-radius: 50%;
	cursor: pointer;
	border: 3px solid var(--accent-color);
}
/* Styling for the date inputs */
.date-item {
	display: inline-block;
	width: 48%;
/* Puts them side-by-side */
}
.date-item:nth-of-type(odd) {
	margin-right: 2%;
}
.date-item .info-list-item-value {
	justify-content: flex-start;
	gap: 8px;
}
.button:disabled {
	background-color: var(--secondary-surface-color);
	cursor: not-allowed;
	opacity: 0.6;
}
/* Styling for the new stepper controls */
.stepper-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
/* Adds space between numbers and slider */
}
.stepper-btn {
	background-color: var(--secondary-surface-color);
	color: var(--primary-text-color);
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 1.5rem;
	line-height: 1;
/* Aligns the +/- symbols better */
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	padding-bottom: 4px;
/* Manual offset for vertical centering */
}
/* Make sure the text display doesn't have extra spacing */
#detailsPagesRead {
	justify-content: center;
}
/* --- Review Editor Page --- */


/* --- END: Solution for Fixed Header --- */

#review-textarea {
	flex-grow: 1;
	width: 100%;
	background-color: transparent;
	border: none;
	color: var(--primary-text-color);
	font-family: inherit;
	font-size: 1.1rem;
	line-height: 1.6;
	resize: none;
	padding: 0;
}
#review-textarea:focus {
	outline: none;
}
#review-char-counter {
	text-align: right;
	font-size: 0.9rem;
	color: var(--secondary-text-color);
	padding: 0.5rem 0;
}
/* --- Styles for New Editor Pages (Tags, Series) --- */
.item-selection-list {
	height: calc(100vh - 300px);
/* Adjust height as needed */
	overflow-y: auto;
	padding-bottom: 80px;
/* Space for the footer */
}
.tag-item, .series-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 0.5rem;
	border-bottom: 1px solid var(--secondary-surface-color);
	cursor: pointer;
}
.tag-item.hidden, .series-item.hidden {
	display: none;
}
.tag-item input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--accent-color);
}
.tags-empty-message {
	text-align: center;
	color: var(--secondary-text-color);
	margin-top: 3rem;
}
.tags-empty-message a {
	color: var(--accent-color);
	cursor: pointer;
	text-decoration: underline;
}
#review-char-counter,
#note-char-counter {
	width: 100%;
	text-align: right;
	font-size: 0.9rem;
	color: var(--secondary-text-color);
}

#edit-cover-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#editor-textarea {
	flex-grow: 1;
	width: 100%;
	background-color: var(--bg-color);
	border: none;
	color: var(--primary-text-color);
	font-family: inherit;
	font-size: 1.1rem;
	line-height: 1.6;
	resize: none;
	padding: 0;
/* Ensures no internal spacing */
	outline: none;
/* Removes the focus border */
	-webkit-box-shadow: none;
/* Removes focus shadow on some browsers */
	-moz-box-shadow: none;
/* Removes focus shadow on some browsers */
	box-shadow: none;
/* Removes focus shadow on some browsers */
}
/* --- Scan Toast Notification --- */
#scan-toast {
	position: fixed;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--secondary-surface-color);
	color: var(--primary-text-color);
	padding: 12px 20px;
	border-radius: 12px;
	z-index: 4500;
/* High z-index to appear on top */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s, top 0.3s;
	text-align: center;
	max-width: 90%;
}
#scan-toast.show {
	top: 60px;
	opacity: 1;
	visibility: visible;
}
#scan-toast u {
	text-decoration-style: dotted;
	text-underline-offset: 3px;
}
/* --- New Scanner UI Styles --- */
.scanner-overlay {
/* This makes the frame centered */
	justify-content: center;
	align-items: center;
	padding-bottom: 70px;
/* Make space for the footer */
}
.scanner-header {
	position: absolute;
	top: 0;
	left: 0;
}
.scanner-footer {
	position: absolute;
	bottom: 0;
}
.scanner-frame-overlay {
	position: absolute;
	width: 85vw;
/* 85% of the viewport width */
	height: 130vh;
/* 30% of the viewport height */
	max-width: 500px;
	max-height: 350px;
	pointer-events: none;
/* Allows clicks/taps to go through */
}
.scanner-frame-overlay .corner {
	position: absolute;
	width: 30px;
	height: 30px;
	border-color: white;
	border-style: solid;
	border-width: 0;
}
.corner.top-left {
	top: 0;
	left: 0;
	border-top-width: 4px;
	border-left-width: 4px;
	border-radius: 12px 0 0 0;
}
.corner.top-right {
	top: 0;
	right: 0;
	border-top-width: 4px;
	border-right-width: 4px;
	border-radius: 0 12px 0 0;
}
.corner.bottom-left {
	bottom: 0;
	left: 0;
	border-bottom-width: 4px;
	border-left-width: 4px;
	border-radius: 0 0 0 12px;
}
.corner.bottom-right {
	bottom: 0;
	right: 0;
	border-bottom-width: 4px;
	border-right-width: 4px;
	border-radius: 0 0 12px 0;
}
.scanner-controls {
	display: flex;
	justify-content: center;
	gap: 60px;
	width: 100%;
}
.scanner-control-btn {
	background: none;
	border: none;
	color: white;
	font-size: 24px;
	cursor: pointer;
	width: 44px;
	height: 44px;
	position: relative;
}
.scanner-control-btn::before {
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


#bookshelfGrid.list-view,
#shelvesGrid.list-view {
    grid-template-columns: 1fr;
    gap: 0; /* Creates a continuous list */
}

.list-view .book-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* Align items to the top */
    gap: 1.25rem;
    padding: 1rem;
    border-bottom: 1px solid var(--secondary-surface-color);
    border-radius: 0;
}

.list-view .book-card img {
    width: 100px;  /* Increased size */
    height: 140px; /* Increased size */
    margin-bottom: 0;
    flex-shrink: 0;
}

/* This targets the div holding all the text content */
.list-view .book-card > div {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.5rem; /* Space between text elements */
    padding-top: 0.5rem;
}

.list-view .book-card h3 {
    white-space: normal;
    overflow: visible;
    font-size: 1.3rem;
    margin: 0;
}

.list-view .book-card p {
    font-size: 1rem;
    margin: 0;
}

.list-view-rating, .list-view .star-rating-icon {
    display: flex;
    gap: 2px;
    color: var(--pro-color);
}

.list-view .star-rating-icon {
    width: 18px;
    height: 18px;
}

.list-view .star-rating-icon.filled {
    color: var(--pro-color); /* 'On' color */
}

/* New styles for the metadata and progress bar */
.book-card-meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}

.book-card-meta span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.book-card-meta svg {
    width: 16px;
    height: 16px;
}

.progress-bar-container {
    position: relative;
    width: 100%;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background-color: var(--secondary-surface-color);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-inner {
    height: 100%;
    background-color: var(--accent-color);
    border-radius: 2px;
}

.progress-percent {
    position: absolute;
    right: 0;
    top: -16px; /* Position it above the bar */
    font-size: 0.75rem;
    color: var(--secondary-text-color);
}

.progress-ui-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 0.75rem;
    padding: 0.25rem 0;
}
.progress-circle-container {
    flex-shrink: 0;
}
.progress-circle {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient(
        var(--accent-color) 0deg var(--progress-angle, 0deg), 
        var(--secondary-surface-color) var(--progress-angle, 0deg) 360deg
    );
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.progress-circle::before {
    content: '';
    position: absolute;
    width: 64px;
    height: 64px;
    background: var(--bg-color);
    border-radius: 50%;
}
.progress-circle-text {
    position: relative;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-text-color);
    z-index: 10;
}
.slider-and-stepper {
    flex-grow: 1;
    width: 100%;
}
.slider-and-stepper .slider-container {
     width: 100%;
}

/* --- Flashlight Styles --- */
#flashlight-btn {
    color: white;
}
.flashlight-rays {
    opacity: 0; /* Rays are invisible by default */
    transition: opacity 0.3s ease-out;
}
#flashlight-btn.active .flashlight-rays {
    opacity: 1; /* When button is active, make rays visible */
}

/* ========================================================
   NEW DISCOVER PAGE CSS
   ======================================================== */

/* --- 1. Top Actions --- */
.top-actions-scroll-container {
    display: flex;
    gap: 0.75rem; /* 12px */
    overflow-x: auto;
    padding: 0.25rem 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    user-select: none;
}
.top-actions-scroll-container::-webkit-scrollbar {
    display: none;
}
.top-action-item {
    flex-shrink: 0;
    padding: 8px 16px;
    background-color: var(--primary-surface-color);
    border: 1px solid var(--secondary-surface-color);
    color: var(--primary-text-color);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.top-action-item.active,
.top-action-item:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #ffffff;
}

/* --- 2. Featured Book Carousel (HEIGHT REDUCTION FIX) --- */
.featured-carousel-container {
    overflow: hidden;
    position: relative;
    background-color: var(--primary-surface-color);
    border-radius: 16px;
    margin-bottom: 1rem;
    touch-action: pan-y; /* Allows vertical scroll on mobile, but captures horizontal swipe */
    cursor: grab;
}
.featured-carousel-container.active-drag {
    cursor: grabbing;
}
.featured-carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
featured-carousel-wrapper.no-transition {
    transition: none !important;
}
.featured-carousel-slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 0.75rem; /* Reduced padding from 1rem */
    display: flex;
    gap: 0.75rem; /* Reduced gap from 1rem */
}
.featured-carousel-slide img {
    /* KEY CHANGE 1: Reduce the fixed size of the cover */
    width: 90px;
    height: 135px; /* Aspect Ratio 2:3 maintained (90x135) */
    object-fit: cover;
    border-radius: 8px; /* Reduced border-radius for smaller look */
    flex-shrink: 0;
    background-color: var(--secondary-surface-color);
}
.featured-carousel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.featured-carousel-content h3 {
   
    font-size: 1rem;
    font-weight: 600;
    margin: 0; 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3; 
}
.featured-carousel-content p {
    /* FIX: Added 4px margin-bottom for spacing */
    margin: 0 0 8px 0; 
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    line-height: 1.2;
}

.featured-carousel-content p.description {
    font-size: 0.75rem; 
    color: var(--primary-text-color);
    flex-grow: 1; /* Pushes the footer down */
    /* FIX: Ensure text-clamping is active */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* This sets it to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* END FIX */
    margin-bottom: 4px; /* Space above the footer */
    line-height: 1.25;
}

.featured-carousel-content .button {
    padding: 6px 10px; /* Reduced from 10px 20px */
    font-size: 0.9rem; /* Reduced font size to match smaller padding */
    width: 100%;
    margin-top: auto; /* Ensures button sticks to the bottom */
}

/* --- Featured Carousel Rating Fix --- */
.featured-carousel-content .card-rating {
    margin-top: 4px; /* Adds a little space above the rating */
    gap: 1px; /* Reduces space between stars */
}
.featured-carousel-content .card-rating svg {
    width: 16px;  /* Makes stars smaller */
    height: 16px;
}
.featured-carousel-content .card-rating .rating-text {
    font-size: 0.8rem; /* Makes text smaller */
    margin-left: 4px;
    color: var(--secondary-text-color); /* Ensures text matches author text */
}



/* --- Featured Carousel Progress Bar --- */
.featured-carousel-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5px;
    width: 100%; /* Default state is 100% */
    background-color: var(--accent-color);
    z-index: 5;

    /* This is the animation, as you suggested! */
    /* It now correctly reads the variable you added to :root */
    transition: width var(--carousel-interval) linear; 
}

/* This class is for RESETTING the bar instantly */
.featured-carousel-progress.no-transition {
    transition: none !important; /* Disables the animation */
}

/* --- Featured Carousel Footer (Rating + Button) --- */
.featured-card-footer {
    display: flex;
    justify-content: space-between; /* Pushes rating left, button right */
    align-items: center;
    margin-top: auto; /* Pushes this whole block to the bottom */
    padding-top: 4px; /* A little space above it */
}

/* Make the button "short" (fit to its text) */
.featured-card-footer .button {
    width: auto; 
    flex-shrink: 0;
}

/* Adjust the star rating styles to fit the new layout */
.featured-card-footer .card-rating {
    margin-top: 0; /* Remove the top margin it had before */
    color: var(--pro-color);
}

.featured-card-footer .card-rating svg[fill="none"] {
    /* This makes the EMPTY star outlines (stroke="currentColor") gray */
    color: var(--secondary-text-color);
}

.featured-card-footer .card-rating .rating-text {
    /* This makes the (3121045) text gray */
    color: var(--secondary-text-color);
}

/* --- Horizontal Book Scroll --- */
.horizontal-book-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    user-select: none;
    min-height: 0;
}
.horizontal-book-scroll::-webkit-scrollbar { display: none; }
.horizontal-book-scroll .book-card {
    width: 110px;
    flex-shrink: 0;
}
.horizontal-book-scroll .book-card h3 {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

/* ========================================================
  SLIDE-UP PANEL CSS (FIXED 2x3 GRID + HORIZONTAL SCROLL)
  ======================================================== */
#page-discover-list {
  position: fixed;
  left: 0;
  right: 0;
  /* FIX: Use 'top' and 'vh' for a consistent 90% height */
  height: calc(100vh - 80px); /* Panel will be 90% of the screen's height */
  top: 100vh; /* Start hidden (top edge at the bottom of the screen) */
  padding: 0;
  z-index: 5000;
  background-color: var(--bg-color);
  display: block;
  visibility: hidden; /* Start hidden, will be changed by 'active' class */
  /* FIX: Transition 'top' instead of 'transform' */
  transition: top 0.4s ease-in-out, visibility 0.4s;
  animation: none;
  border-top: 0px solid var(--secondary-surface-color);
  box-shadow: 0 -5px 15px rgba(0,0,0,0.3);
  overflow: hidden; 
}

#page-discover-list.active {
  visibility: visible;
  /* FIX: Move the top edge to 10% from the top of the viewport */
  top: var(--panel-top-position, 80px);
}

#page-discover-list .page-header {
  padding: 1rem 1rem 0 1rem;
  /* Make header sticky to the top of the *panel* */
  position: sticky;
  top: 0;
  background: var(--bg-color);
  z-index: 10;
  margin-bottom: 0;
  flex-shrink: 0; /* Prevent header from shrinking */
}

/* FIX: The inner content wrapper handles the scrolling area */
#discover-list-content-wrapper { 
  height: calc(100% - 66px); /* Full height minus header */
  overflow-x: auto; /* Enable horizontal scrolling */
  overflow-y: hidden; /* Disable vertical scrolling */
  padding: 0 1rem 90px 1rem; /* Apply side and bottom padding for space */
  /* Hide scrollbar */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#discover-list-content-wrapper::-webkit-scrollbar {
  display: none;
}


/* FIX: Use flexbox and a fixed grid for horizontal scrolling */
#discover-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); 
  grid-template-rows: repeat(2, 1fr); 
  grid-auto-flow: column;
  flex-wrap: nowrap; 
  gap: 1rem; 
  height: 100%; 
}

/* FIX: Ensure the book card sizing is correct for this page's grid */
#discover-list-grid .book-card {
  /* Each card should fill its allocated space in the 2-row grid */
  width: 95px; /* Fixed width for better horizontal control */
  height: auto; /* Allow height to flex with grid row */
}

#discover-list-grid .book-card img {
  width: 100%; 
  height: auto; /* FIX: Let height be automatic */
  aspect-ratio: 2/3; /* FIX: Enforce the correct 2:3 ratio */
  object-fit: cover;
  border-radius: 12px;
}


#mute-btn::before {
	content: "\f028";
/* Font Awesome volume-up icon */
}
#mute-btn.muted::before {
	content: "\f026";
/* Font Awesome volume-off icon */
}
           
           
           /* --- Search Bar Styling --- */
input[type="search"] {
    box-sizing: border-box;
    width: 100%;
    padding: 12px;
    border-radius: 12px; /* Matches your new global radius */
    border: 1px solid var(--secondary-surface-color);
    background-color: var(--primary-surface-color);
    color: var(--primary-text-color);
    font-size: 1.1rem;
    font-family: inherit;
    margin-bottom: 0; /* Override defaults */
    -webkit-appearance: none; /* Remove default iOS styling */
    appearance: none;
}

/* Style for the placeholder text (e.g., "Search by keyword...") */
input[type="search"]::placeholder {
    color: var(--secondary-text-color);
    opacity: 0.8;
}

/* Style for when the search bar is focused (clicked on) */
input[type="search"]:focus {
    outline: none;
    border-color: var(--accent-color); /* Changes border to your accent color */
}

/* Fix for removing the 'X' (clear) button in webkit browsers */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}


/* Allow topic names to wrap on the Topics tab */
.topics-view .book-card h3 {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* --- Custom Select Dropdown Style --- */
.form-group select {
    /* Base styles copied from .form-group input */
    box-sizing: border-box;
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--secondary-surface-color);
    background-color: var(--primary-surface-color);
    color: white;
    font-size: 1.1rem;
    font-family: inherit;

    /* Custom arrow styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23a0a0a0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-13%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2013l128%20128c3.6%203.6%207.8%205.4%2013%205.4s9.4-1.8%2013-5.4l128-128c3.6-3.6%205.4-7.8%205.4-13%200-4.4-1.8-8.8-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.8em;
    padding-right: 2.5rem;
}
           
           
           /* --- Book Dive Page Styles --- */
#page-book-dive {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 6001; /* High z-index to cover main app */
    display: none; /* Hidden by default */
    flex-direction: column;
}
#page-book-dive.active {
    display: flex;
}
.book-dive-header-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--primary-surface-color);
    border-bottom: 1px solid var(--secondary-surface-color);
    flex-shrink: 0;
}
#book-dive-book-cover {
    width: 60px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
#book-dive-book-title {
    margin: 0 0 4px 0;
    font-size: 1.1rem;
}
#book-dive-book-author {
    margin: 0;
    color: var(--secondary-text-color);
    font-size: 0.9rem;
}
.book-dive-scroll-content {
    flex-grow: 1;
    overflow-y: auto;
    padding-bottom: 70px; /* Space for the chat bar */
}
.book-dive-tab-content {
    display: none;
}
.book-dive-tab-content.active {
    display: block;
}
/* Chat/Discussion Styles */
#book-dive-chat-container {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.chat-message-item {
    display: flex;
    gap: 0.75rem;
}
.chat-message-item .user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--secondary-surface-color);
}
.chat-content {
    display: flex;
    flex-direction: column;
}
.chat-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 2px;
}
.chat-header .user-name {
    font-weight: 600;
    color: var(--primary-text-color);
}
.chat-header .feed-timestamp {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}
.chat-text {
    margin: 0;
    line-height: 1.6;
}
/* Progress Tab Styles */
#book-dive-progress-container {
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.participant-progress-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.participant-progress-item .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--secondary-surface-color);
}
.participant-progress-info {
    flex-grow: 1;
}
.participant-progress-info .user-name {
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}
.participant-progress-info .goal-progress-bar {
    height: 6px;
}
.participant-progress-info .goal-progress-bar-inner {
    height: 100%;
    background-color: var(--accent-color);
    border-radius: 3px;
}
.participant-progress-percent {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
}
           
           /* --- Comment / Chat Input Bar Styles --- */
.comment-input-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--primary-surface-color);
    border-top: 1px solid var(--secondary-surface-color);
    z-index: 100;
}
.comment-input-bar input[type="text"] {
    flex-grow: 1;
    width: 100%;
    padding: 12px;
    border-radius: 20px;
    border: 1px solid var(--secondary-surface-color);
    background-color: var(--secondary-surface-color);
    color: white;
    font-size: 1rem;
    font-family: inherit;
}
.comment-input-bar .icon-button {
    flex-shrink: 0;
    color: var(--accent-color);
}

/* Style for the "load more" spinner area */
#feed-loader.loading {
    display: block !important;
    height: 60px; /* Gives space for the spinner to show */
    padding: 10px;
    text-align: center;
}

/* --- User List Page Styles (Followers/Following) --- */
.user-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--secondary-surface-color);
    cursor: pointer;
    transition: background-color 0.2s;
}
.user-list-item:hover {
    background-color: var(--primary-surface-color);
}
.user-list-item img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.user-list-item span {
    font-size: 1.1rem;
    font-weight: 600;
}


/* ?? Ember Gold – bold headers & nav to match wallpaper */
body.theme-ember-gold .header,
body.theme-ember-gold .page-header,
body.theme-ember-gold .details-header {
    /* strong red ? darker red gradient to match wallpaper */
    background: linear-gradient(180deg, #4d0000 0%, #120000 100%);
    color: #ffe7b8;
    border-bottom: 1px solid rgba(255, 215, 128, 0.9);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.85);
}

/* Header titles */
body.theme-ember-gold .header h1,
body.theme-ember-gold .page-header h1,
body.theme-ember-gold .details-header h1 {
    color: #ffe7b8;
    letter-spacing: 0.03em;
}

/* Back / icon buttons in headers */
body.theme-ember-gold .header .icon-button,
body.theme-ember-gold .page-header .icon-button,
body.theme-ember-gold .details-header .icon-button {
    color: #ffcf70;
}

/* Tabs under the main header (Hoard / Racks / Topics / Up Next) */
body.theme-ember-gold .tabs .tab-button {
    color: #ffdca0;
}

body.theme-ember-gold .tabs .tab-button.active {
    color: #ffffff;
    border-bottom: 3px solid #ffb23a;
}

/* Search / Filter / Sort action bar buttons */
body.theme-ember-gold .action-bar .action-button {
    background: rgba(18, 0, 0, 0.88);
    color: #ffe7b8;
    border-radius: 999px;
    border: 1px solid rgba(255, 215, 128, 0.6);
}

body.theme-ember-gold .action-bar .action-button svg {
    color: #ffcf70;
}

/* Bottom nav bar */
body.theme-ember-gold .bottom-nav {
    background: linear-gradient(180deg, #240000 0%, #060000 100%);
    border-top: 1px solid rgba(255, 215, 128, 0.7);
}

/* Bottom nav icons + labels */
body.theme-ember-gold .bottom-nav button,
body.theme-ember-gold .bottom-nav .nav-item {
    color: #ffe7b8;
}

/* Floating + button background & icon */
body.theme-ember-gold .fab-button {
    background: #ffb23a;
    color: #3b0000;
    box-shadow: 0 0 0 2px rgba(255, 220, 150, 0.7), 0 8px 20px rgba(0, 0, 0, 0.8);
}

/* ?? Ember Gold — Tab bar (Hoard / Racks / Topics / Up Next) */
body.theme-ember-gold .tabs {
    background: linear-gradient(180deg, #4d0000 0%, #120000 100%);
    border-bottom: 1px solid rgba(255, 215, 128, 0.7);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
}

/* Tab text color */
body.theme-ember-gold .tabs .tab-button {
    color: #ffdca0;
}

/* Active tab underline & color */
body.theme-ember-gold .tabs .tab-button.active {
    color: #ffffff;
    border-bottom: 3px solid #ffb23a;
}

/* Ember Gold — section headers (e.g., Categories, Recommendations) */
body.theme-ember-gold .section-title,
body.theme-ember-gold h2.section-title,
body.theme-ember-gold .home-section-title {
    color: #ffe7b8;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    letter-spacing: 0.03em;
}

/* Divider lines under section titles */
body.theme-ember-gold .section-title::after,
body.theme-ember-gold .home-section-title::after {
    background-color: rgba(255, 215, 128, 0.6);
}


/* ================================
   EMBER REGAL THEME
   ================================ */

/* Wallpaper for Ember Regal */
body.theme-ember-regal #theme-wallpaper {
    background-image: url("static/images/wallpapers/ember-regal-throne.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Core colors */
body.theme-ember-regal {
    --bg-color: #120005; /* deep wine */
    --primary-surface-color: rgba(0, 0, 0, 0.88);
    --secondary-surface-color: rgba(40, 0, 0, 0.88);
    --primary-text-color: #ffe9d0;
    --secondary-text-color: #f2c47f;
    --accent-color: #ffbf3b;
    --accent-strong: #ffdf73;
}

/* Top bars / headers */
body.theme-ember-regal .top-bar,
body.theme-ember-regal .app-header,
body.theme-ember-regal .page-toolbar,
body.theme-ember-regal .page-header,
body.theme-ember-regal .settings-header,
body.theme-ember-regal .subpage-header,
body.theme-ember-regal .toolbar-title-bar {
    background: linear-gradient(to bottom, #300000, #120005);
    color: #ffe9d0;
    border-bottom: 1px solid rgba(255, 215, 140, 0.7);
}

/* Bottom nav bar */
body.theme-ember-regal .bottom-nav,
body.theme-ember-regal .nav-bar-bottom,
body.theme-ember-regal .tab-bar-bottom {
    background: rgba(0, 0, 0, 0.96);
    border-top: 1px solid rgba(255, 215, 140, 0.5);
}

/* Labels in top/bottom navs */
body.theme-ember-regal .bottom-nav span,
body.theme-ember-regal .bottom-nav .nav-label,
body.theme-ember-regal .top-bar .tab-label,
body.theme-ember-regal .page-toolbar .tab-label {
    color: #ffd88a;
}

/* Active tab underline / indicator */
body.theme-ember-regal .tab-active-indicator,
body.theme-ember-regal .tabs .active::after {
    background: linear-gradient(to right, #ffbf3b, #ffdf73);
}

/* Primary CTA buttons (Log Progress, View Details, etc.) */
body.theme-ember-regal .btn-primary,
body.theme-ember-regal .primary-button,
body.theme-ember-regal .cta-button {
    background: linear-gradient(to bottom, #ffd766, #c88010);
    color: #3a0500;
    border-radius: 999px;
    border: 1px solid rgba(255, 230, 170, 0.9);
    box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.7);
}

/* Secondary / outline buttons */
body.theme-ember-regal .btn-secondary,
body.theme-ember-regal .btn-outline,
body.theme-ember-regal .chip {
    background: rgba(0, 0, 0, 0.5);
    color: #ffdf73;
    border-radius: 999px;
    border: 1px solid rgba(255, 215, 140, 0.7);
}

/* Cards (e.g., "Reading in Progress" and Settings items) */
body.theme-ember-regal .card,
body.theme-ember-regal .settings-item {
    background: rgba(0, 0, 0, 0.78);
    border-radius: 18px;
    border: 1px solid rgba(255, 215, 140, 0.25);
}

/* Small icons (nav, headers, etc.) */
body.theme-ember-regal .icon,
body.theme-ember-regal .bottom-nav svg,
body.theme-ember-regal .top-bar svg {
    fill: #ffdf73;
    color: #ffdf73;
}


/* ===============================
   HOGWARTS REGAL THEME OVERRIDES
   Applied when <body> has class="theme-hogwarts-regal"
   =============================== */



/* Optional: wand-style cursor (create your own PNG and adjust the path) */
/*
body.theme-hogwarts-regal {
    cursor: url("static/images/cursors/wand-light.png") 4 0, auto;
}
*/

/* Dark magical overlay on top of the wallpaper */
body.theme-hogwarts-regal #theme-wallpaper::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top, rgba(255, 255, 200, 0.16), transparent 55%),
        radial-gradient(circle at bottom, rgba(0, 0, 0, 0.9), transparent 60%);
}


/* App chrome / main surface (Hogwarts) */
/* Apply to most pages, but NOT Contact Us so its footer can stay sticky */
body.theme-hogwarts-regal .app-shell,
body.theme-hogwarts-regal .page:not(#page-contact-us) {
    backdrop-filter: blur(4px);
    border-radius: 18px;
}


/* CONTACT US – keep wallpaper visible without breaking sticky Send button */
body.theme-hogwarts-regal #page-contact-us {
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
}



/* Top headers ? “crest bar” look */
body.theme-hogwarts-regal .page-header {
    background: linear-gradient(
        90deg,
        rgba(20, 8, 16, 0.95),
        rgba(12, 20, 38, 0.95)
    );
    border-bottom: 1px solid rgba(212, 175, 55, 0.65);  /* gold line */
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.6),
        0 0 18px rgba(0, 0, 0, 0.9);
}

body.theme-hogwarts-regal .page-header h1 {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 1.3rem;
    color: var(--primary-text-color);
}

/* Basic buttons ? gold-framed magical tokens */
body.theme-hogwarts-regal .button,
body.theme-hogwarts-regal button,
body.theme-hogwarts-regal .icon-button {
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.7);
    background: radial-gradient(circle at top, #3a1823, #120713);
    color: var(--primary-text-color);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.8),
        0 0 14px rgba(212, 175, 55, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}


/* ?? SPECIFIC RULE FOR CIRCULAR CATEGORY BUTTONS (using .nav-item) */

body.theme-hogwarts-regal .nav-item { 
    /* 1. Reset Padding: CRITICAL to prevent stretching into a pill shape */
    padding: 0; 

    /* 2. Fixed Dimensions: Ensures the container is a perfect square for a perfect circle */
    width: 44px; 
    height: 44px; 

    /* 3. Centering: Aligns the icon perfectly within the button */
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    
    /* Ensure the round shape, though inherited, it's good to be explicit */
    border-radius: 999px;
}


/* Ensure the icon element itself doesn't have stray margins or size issues */
body.theme-hogwarts-regal .nav-item svg,
body.theme-hogwarts-regal .nav-item img {
    /* 1. Absolute Positioning: Removes the icon from the normal flow */
    position: absolute;

    /* 2. Target the Center Point: Moves the top-left corner of the icon to the center of the button */
    top: 50%;
    left: 50%;

    /* 3. Scale and Final Center: Moves the icon back by half of its own size to perfectly center it */
    transform: translate(-50%, -50%); 

    /* 4. Set Desired Size: Scale the icon down to a visible size (e.g., 60% of the 44px container) */
    width: 80%;
    height: 80%;
    
    /* Ensure no margins interfere */
    margin: 0;
    padding: 0;
    object-fit: initial; /* Remove the conflicting object-fit property */
}


body.theme-hogwarts-regal .button:hover,
body.theme-hogwarts-regal button:hover,
body.theme-hogwarts-regal .icon-button:hover {
    box-shadow:
        0 0 0 1px rgba(212, 175, 55, 0.7),
        0 0 20px rgba(212, 175, 55, 0.6);
    transform: translateY(-1px);
}

/* Theme settings rows ? parchment-with-gold frame */
body.theme-hogwarts-regal #page-settings-theme .settings-item {
    background: linear-gradient(
        135deg,
        rgba(41, 26, 20, 0.96),
        rgba(20, 14, 26, 0.96)
    );
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    margin-bottom: 0.4rem;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

body.theme-hogwarts-regal #page-settings-theme .settings-item span {
    font-size: 0.9rem;
}

/* Highlighted theme row */
body.theme-hogwarts-regal #page-settings-theme .settings-item .theme-check-icon {
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.9));
}

/* Book cards ? old-gilded frame look */
body.theme-hogwarts-regal .book-card,
body.theme-hogwarts-regal .book-item,
body.theme-hogwarts-regal .shelf-book-card {
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    background:
        linear-gradient(
            135deg,
            rgba(26, 16, 22, 0.95),
            rgba(12, 10, 20, 0.98)
        );
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.85),
        0 0 18px rgba(0, 0, 0, 0.9);
}

/* Bottom nav / main nav bar */
body.theme-hogwarts-regal .bottom-nav,
body.theme-hogwarts-regal .nav-bar {
    background: linear-gradient(
        180deg,
        rgba(11, 7, 20, 0.98),
        rgba(5, 3, 11, 0.98)
    );
    border-top: 1px solid rgba(212, 175, 55, 0.55);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.9);
}

/* Nav icons + labels */
body.theme-hogwarts-regal .bottom-nav button,
body.theme-hogwarts-regal .nav-bar button {
    color: var(--secondary-text-color);
}

body.theme-hogwarts-regal .bottom-nav button.active,
body.theme-hogwarts-regal .nav-bar button.active {
    color: var(--accent-color);
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
}

/* Scrollbar – subtle golden accent (where supported) */
body.theme-hogwarts-regal ::-webkit-scrollbar {
    width: 10px;
}
body.theme-hogwarts-regal ::-webkit-scrollbar-track {
    background: rgba(8, 4, 15, 0.9);
}
body.theme-hogwarts-regal ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #5f4220, #d4af37);
    border-radius: 999px;
}
body.theme-hogwarts-regal ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #7a5624, #f5d35b);
}

body.theme-hogwarts-regal {
    font-family: "Cinzel", "Georgia", "Times New Roman", serif;
    letter-spacing: 0.04em;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}





/* ============================
   HOGWARTS – DISCOVER PAGE
   ============================ */

body.theme-hogwarts-regal #page-discover {
    background-color: transparent;
}

/* “Discover” header subtitle feel */
body.theme-hogwarts-regal #page-discover .page-header h1 {
    font-size: 0.9rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

/* Scroll content floats above wallpaper like a spellbook page */
body.theme-hogwarts-regal #page-discover .discover-scroll-content {
    background: radial-gradient(circle at top,
               rgba(15, 8, 18, 0.94),
               rgba(4, 2, 8, 0.96));
    border-radius: 18px 18px 0 0;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.85),
        0 18px 40px rgba(0, 0, 0, 0.9);
    padding-bottom: 1.5rem;
}

/* Top actions bar – “spell filters” */
body.theme-hogwarts-regal #page-discover .top-actions-scroll-container {
    background: linear-gradient(
        90deg,
        rgba(20, 8, 16, 0.96),
        rgba(12, 20, 38, 0.96)
    );
    border-bottom: 1px solid rgba(212, 175, 55, 0.5);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.85);
}

/* Individual top action chips */
body.theme-hogwarts-regal #page-discover .top-action-item {
    border-radius: 999px;
    padding-inline: 0.9rem;
    padding-block: 0.35rem;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: radial-gradient(circle at top, #301624, #170914);
    color: var(--secondary-text-color);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.6rem;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(0, 0, 0, 0.8);
}

body.theme-hogwarts-regal #page-discover .top-action-item.active {
    color: var(--accent-color);
    border-color: rgba(212, 175, 55, 0.9);
    box-shadow:
        0 0 0 1px rgba(212, 175, 55, 0.5),
        0 0 22px rgba(212, 175, 55, 0.9);
}

/* Category tiles – like house banners */
body.theme-hogwarts-regal #discover-categories-grid .discover-category-item {
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: linear-gradient(
        135deg,
        rgba(36, 18, 30, 0.98),
        rgba(16, 16, 30, 0.98)
    );
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.85),
        0 10px 28px rgba(0, 0, 0, 0.95);
    overflow: hidden;
    position: relative;
}

body.theme-hogwarts-regal #discover-categories-grid .discover-category-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top,
                        rgba(212, 175, 55, 0.25),
                        transparent 60%);
    pointer-events: none;
}

body.theme-hogwarts-regal #discover-categories-grid .discover-category-item p {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    z-index: 1;
    position: relative;
}

/* Slide-up panel list (Top Reads, etc.) */
body.theme-hogwarts-regal #page-discover-list {
    background: radial-gradient(circle at top,
               rgba(17, 8, 20, 0.98),
               rgba(6, 3, 10, 0.99));
    border-radius: 18px 18px 0 0;
    border-top: 1px solid rgba(212, 175, 55, 0.6);
    box-shadow:
        0 -1px 0 rgba(0, 0, 0, 0.9),
        0 -12px 35px rgba(0, 0, 0, 1);
}

/* List title inside the panel */
body.theme-hogwarts-regal #page-discover-list #discover-list-title {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Books in the Discover list grid */
body.theme-hogwarts-regal #discover-list-grid .book-card,
body.theme-hogwarts-regal #discover-list-grid .book-item {
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background:
        linear-gradient(
            135deg,
            rgba(32, 16, 28, 0.96),
            rgba(14, 10, 24, 0.98)
        );
}

.theme-hogwarts-regal .card,
.theme-hogwarts-regal .settings-item,
.theme-hogwarts-regal .discover-section-container {
    border: 1px solid rgba(212, 175, 55, 0.7);
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.4);
}


.theme-hogwarts-regal .card {
    border-image: linear-gradient(45deg,#d4af37,#7a5400) 1;
}


.theme-hogwarts-regal .button:hover {
    box-shadow: 0 0 12px rgba(212,175,55,0.8);
    transform: translateY(-1px);
}


.theme-hogwarts-regal .book-item:hover img {
    filter: brightness(1.15) drop-shadow(0 0 6px rgba(255, 220, 120, 0.5));
}


.wand-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #ffd76b, #d4a12c);
    border-radius: 50%;
    pointer-events: none;
    animation: sparkFade 0.5s ease-out forwards;
}

@keyframes sparkFade {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(2); }
}


.theme-hogwarts-regal .button {
    border-color: #d4af37;
    color: #fbe9c6;
}

.theme-hogwarts-regal .button:hover {
    background: rgba(212,175,55,0.15);
}


.theme-hogwarts-regal .header,
.theme-hogwarts-regal .page-header,
.theme-hogwarts-regal .details-header {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.0)
    );
    border-bottom: 2px solid rgba(212,175,55,0.5);
    backdrop-filter: blur(5px);
}


.theme-hogwarts-regal h2,
.theme-hogwarts-regal h3 {
    position: relative;
}

.theme-hogwarts-regal h2::after,
.theme-hogwarts-regal h3::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #d4af37, transparent);
    border-radius: 3px;
}


.theme-hogwarts-regal .divider {
    height: 1px;
    background-image: url('static/images/hogwarts/gold-divider.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.45;
}


.theme-hogwarts-regal .discover-scroll-content {
    background: linear-gradient(
        to bottom,
        rgba(5,3,11,0.6),
        rgba(5,3,11,0.1)
    );
}


.theme-hogwarts-regal #theme-wallpaper {
    animation: crestGlow 10s ease-in-out infinite;
}

@keyframes crestGlow {
    0%,100% { filter: brightness(0.95) }
    50%     { filter: brightness(1.05) }
}


/* Hogwarts theme typography */
.theme-hogwarts-regal h1,
.theme-hogwarts-regal h2,
.theme-hogwarts-regal .wizard-heading {
    font-family: 'HarryP', 'HarryP', system-ui, serif;
    letter-spacing: 0.08em;
        font-weight: normal;
}

/* Optional: tweak navbar / tabs when in Hogwarts mode */
.theme-hogwarts-regal .main-app-header-title,
.theme-hogwarts-regal .tab-button.active span {
    font-family: 'HarryP', system-ui, serif;
    font-weight: normal;
}


/* FIX: Hogwart's transparent main header */
body.theme-hogwarts-regal #bookshelf-header {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.0),
        rgba(0, 0, 0, 0.8)
    );
    border-bottom: 2px solid rgba(212,175,55,0.5);
    backdrop-filter: blur(5px);
}


/* =========================
   HOGWARTS LETTER STYLING
   ========================= */

/* The Parchment Paper Container */
.parchment-letter {
    /* Use a subtle texture pattern for realism */
    background-color: #f8f5e1;
    background-image: url("https://www.transparenttextures.com/patterns/aged-paper.png"); /* Reliable external texture hosting */
    
    /* Old paper borders and shadows */
    border: 3px double #5c3a1e; /* Dark brown double border */
    box-shadow: 
        0 0 30px rgba(0,0,0,0.7), /* Deep outer shadow */
        inset 0 0 60px rgba(139, 69, 19, 0.3); /* Inner browned edges */
        
    color: #3d2b1f; /* Dark brown ink color */
    font-family: 'Georgia', 'Times New Roman', serif; /* Formal serif font */
    
    max-width: 500px !important;
    padding: 3rem !important;
    text-align: center;
    position: relative; /* For positioning the close button */
    overflow: visible !important; /* Allow wax seal to hang off edge */
}

/* Header Styles */
.hogwarts-crest-header { margin-bottom: 1rem; }
.letter-header h3 {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    color: #2a1a0f;
    border-bottom: 2px solid #5c3a1e;
    display: inline-block;
    padding-bottom: 5px;
}
.letter-header p { font-size: 0.8rem; font-style: italic; }

/* The Main Handwritten Body */
.letter-body {
    margin: 2rem 0;
    text-align: left;
    font-size: 1.1rem;
    line-height: 1.6;
    /* Fallback cursive fonts that look handwritten */
    font-family: 'Brush Script MT', 'Lucida Handwriting', cursive; 
}
.letter-body p { margin-bottom: 1rem; }

/* Footer/Signature */
.letter-footer { margin-top: 3rem; }

/* =========================
   THE ULTIMATE HOGWARTS WAX SEAL
   ========================= */
.wax-seal-close {
    position: absolute;
    bottom: -30px;
    left: calc(50% - 40px); /* Perfectly centered */
    
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    outline: none;
    
    /* 1. RICH CRIMSON GRADIENT (Based on the reference photo) */
    /* Deeper, more saturated reds, moving to almost black-red in shadow */
    background: radial-gradient(circle at 35% 35%, #b30000, #800000, #3a0000);
    
    /* 2. GLOSSY WAX TEXTURE */
    box-shadow: 
        0 8px 15px rgba(0,0,0,0.6), /* Deep outer drop shadow for 3D pop */
        inset 2px 2px 6px rgba(255, 200, 200, 0.3), /* Top-left glossy highlight */
        inset -2px -2px 8px rgba(0, 0, 0, 0.4); /* Bottom-right inner shadow for depth */
    
    /* Text styling */
    color: #eec0c0; /* Lighter pinkish-cream text to stand out */
    font-family: 'Cinzel', 'Georgia', serif;
    font-weight: bold;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7); /* Make text look slightly embedded */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Bouncy transition pop */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.5);
}

/* Hover: Scale up and make heavier */
.wax-seal-close:hover { 
    transform: scale(1.15) translateY(-2px); 
    box-shadow: 
        0 12px 25px rgba(0,0,0,0.5),
        inset 3px 3px 8px rgba(255, 220, 220, 0.4),
        inset -3px -3px 10px rgba(0, 0, 0, 0.5);
    filter: brightness(1.1); /* Slightly brighter on hover */
}

/* 3. THE ENGRAVED INNER RING */
.wax-seal-close span { 
    /* REMOVED the solid border line */
    /* border: 2px solid ... */

    /* ADDED impression shadows to look stamped IN */
    box-shadow: 
        inset 3px 3px 5px rgba(0,0,0,0.5), /* Dark shadow top-left inside */
        inset -1px -1px 2px rgba(255,255,255,0.2); /* Slight highlight bottom-right */
        
    border-radius: 50%;
    width: 62px; 
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wax-seal-close:focus { outline: none; }



/* ========================================= */
/* == THEME-SPECIFIC FONTS & HEADERS == */
/* ========================================= */

/* ===================================================== */
/* === NEON NOIR THEME FIXES (Paste at END of <style>) === */
/* ===================================================== */

/* 1. Header Background: Pink Bottom -> Transparent Top */
body.theme-neon-noir .header,
body.theme-neon-noir #bookshelf-header {
    background: linear-gradient(
        to top,
        rgba(255, 79, 216, 0.65) 0%,   /* Solid Pink at bottom */
        rgba(255, 79, 216, 0.0) 100%   /* Transparent at top */
    ) !important;
    border-bottom: 2px solid #ff4fd8 !important;
    box-shadow: 0 4px 15px rgba(255, 79, 216, 0.3) !important;
    backdrop-filter: blur(4px);
}

/* 2. Header Font Size: Force small size */
/* We use !important to override the 7vw rule seen in your screenshot */
body.theme-neon-noir .header h1,
body.theme-neon-noir #bookshelf-header h1 {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 22px !important; /* Static size, fixes the "too big" issue */
    letter-spacing: 1px !important;
    text-shadow: 0 0 5px #00f3ff !important; /* Cyan glow */
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 3. Header Book Count: Adjust size/color */
body.theme-neon-noir .header h1 span#main-book-count {
    font-size: 14px !important;
    color: #ff4fd8 !important;
    font-weight: normal;
    margin-left: 5px;
}

/* 4. Active Tab Style */
body.theme-neon-noir .tab-button.active {
    color: #ff4fd8 !important;
    text-shadow: 0 0 8px #ff4fd8 !important;
    border-bottom: 2px solid #ff4fd8 !important;
}

/* ================================================= */
/* === NEON NOIR: TOPICS GRID (The Cards) === */
/* ================================================= */

/* 1. Style the Topic Cards themselves */
body.theme-neon-noir .bookshelf-grid.topics-view .book-card {
    /* The "Darker Panel" background */
    background: rgba(0, 0, 0, 0.85) !important;
    
    /* The "Pink Sides" / Border */
    border: 1px solid #ff4fd8 !important;
    border-left: 4px solid #ff4fd8 !important; /* Thicker pink accent on left */
    
    /* Glow and Shape */
    border-radius: 12px !important;
    box-shadow: 0 0 15px rgba(255, 79, 216, 0.15), 
                inset 0 0 20px rgba(0, 0, 0, 0.8) !important;
    
    /* Spacing */
    padding: 1rem !important;
    margin-bottom: 0.5rem !important;
}

/* 2. Style the Topic Title (Cyan Techno Font) */
body.theme-neon-noir .bookshelf-grid.topics-view .book-card h3 {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1.1rem !important;
    color: #00f3ff !important; /* Bright Cyan */
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem !important;
}

/* 3. Style the Book Count (Pink) */
body.theme-neon-noir .bookshelf-grid.topics-view .book-card p {
    font-family: 'Lato', sans-serif !important;
    color: #ff4fd8 !important; /* Pink */
    font-size: 0.9rem !important;
    opacity: 0.9;
}


/* ================================================= */
/* === NEON NOIR: TOPIC LAYOUT FIXES === */
/* ================================================= */

/* 1. Widen the columns so the techno text fits */
body.theme-neon-noir .bookshelf-grid.topics-view {
    /* Changed min-width from ~90px to 160px to give text room */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 1rem !important;
}

/* 2. Fix Text Wrapping & Spacing */
body.theme-neon-noir .bookshelf-grid.topics-view .book-card h3 {
    white-space: normal !important;  /* Allow text to wrap to multiple lines */
    overflow: visible !important;    /* Stop hiding the overflow */
    text-overflow: clip !important;  /* Remove the "..." if it was added */
    line-height: 1.4 !important;     /* Space out lines for readability */
    font-size: 1rem !important;      /* Slight size adjustment */
    margin-bottom: 0.75rem !important;
}

/* 3. Ensure the card height grows to fit the text */
body.theme-neon-noir .bookshelf-grid.topics-view .book-card {
    height: auto !important; 
    min-height: 110px; /* Minimum height for consistency */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the content */
}


/* ================================================= */
/* === NEON NOIR: ACTION BUTTONS (Search/Sort) === */
/* ================================================= */

body.theme-neon-noir .action-button {
    /* Very Dark Pink Background */
    background-color: rgba(40, 0, 20, 0.9) !important; 
    
    /* Pink Border & Text */
    border: 1px solid #ff4fd8 !important;
    color: #ff4fd8 !important;
    
    /* Tech Styling */
    font-family: 'Orbitron', sans-serif !important;
    letter-spacing: 1px;
    font-size: 0.8rem !important;
    text-transform: uppercase;
    border-radius: 6px !important; /* Boxy tech shape */
    box-shadow: 0 0 8px rgba(255, 79, 216, 0.2) !important; /* Subtle glow */
}

/* Active/Pressed State */
body.theme-neon-noir .action-button:active {
    background-color: rgba(80, 0, 50, 0.9) !important;
    box-shadow: 0 0 15px rgba(255, 79, 216, 0.5) !important;
}



/* --- 2. ROYAL AMETHYST (Regal Style) --- */
body.theme-royal-amethyst {
    font-family: 'Cinzel', serif; /* Elegant Serif (like Hogwarts but cleaner) */
}

body.theme-royal-amethyst .header,
body.theme-royal-amethyst .page-header,
body.theme-royal-amethyst .details-header {
    background: linear-gradient(to right, #14021c, #2a0835);
    border-bottom: 1px solid #ffce5a; /* Gold Border */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

/* --- 3. SOLAR DAWN (Warm/Sci-Fi Style) --- */
body.theme-solar-dawn {
    font-family: 'Lato', sans-serif; /* Clean, round sans-serif */
}

body.theme-solar-dawn .header,
body.theme-solar-dawn .page-header,
body.theme-solar-dawn .details-header {
    background: linear-gradient(to bottom, rgba(26, 7, 16, 0.95), rgba(64, 23, 26, 0.9));
    border-bottom: 1px solid #ff9b4a; /* Orange Border */
}



/* --- 5. SLATE MINIMAL (Clean/Flat Style) --- */
body.theme-slate-minimal {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body.theme-slate-minimal .header,
body.theme-slate-minimal .page-header,
body.theme-slate-minimal .details-header {
    background-color: #111318; /* Solid matte color */
    border-bottom: 1px solid #343748; /* Subtle grey border */
    box-shadow: none; /* Flat look */
}


/* --- Theme-Specific Tab Bar Overrides --- */

/* Neon Noir Tabs */
body.theme-neon-noir #main-bookshelf-controls .tabs {
    background: rgba(5, 0, 8, 0.8);
    border-bottom: 1px solid #ff4fd8;
}
body.theme-neon-noir .tab-button.active {
    color: #ff4fd8 !important;
    text-shadow: 0 0 8px #ff4fd8;
    border-bottom-color: #ff4fd8 !important;
}




/* ================================================================== */
/* ===  COMPLETE THEME TREATMENTS (Royal, Solar, Ocean, Slate)  === */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/* 1. ?? ROYAL AMETHYST (Fantasy/Regal) */
/* ------------------------------------------------------------------ */

/* Header & Font */
body.theme-royal-amethyst .header,
body.theme-royal-amethyst #bookshelf-header,
body.theme-royal-amethyst .page-header {
    background: linear-gradient(to bottom, #2e093a 0%, #0f0214 100%) !important;
    border-bottom: 3px double #ffce5a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8) !important;
}
body.theme-royal-amethyst .header h1,
body.theme-royal-amethyst #bookshelf-header h1 {
    font-family: 'Cinzel', serif !important;
    font-size: 24px !important;
    letter-spacing: 1px !important;
    color: #f3e5ab !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
}

/* Action Buttons */
body.theme-royal-amethyst .action-button {
    background-color: rgba(42, 8, 53, 0.95) !important;
    border: 1px solid #ffce5a !important;
    color: #ffce5a !important;
    font-family: 'Cinzel', serif !important;
    border-radius: 4px !important;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5) !important;
}

/* Tabs Panel */
body.theme-royal-amethyst #main-bookshelf-controls .tabs {
    background: rgba(20, 2, 28, 0.9) !important;
    border: 1px solid #ffce5a !important;
    margin: 0 1rem 1rem 1rem;
    padding: 0.5rem 1rem !important;
    border-radius: 4px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.5);
}
body.theme-royal-amethyst .tab-button.active {
    color: #ffce5a !important;
    text-shadow: 0 0 8px rgba(255, 206, 90, 0.6) !important;
    border-bottom: 2px solid #ffce5a !important;
    font-family: 'Cinzel', serif !important;
}

/* Topic Cards (Wider for Serif Font) */
body.theme-royal-amethyst .bookshelf-grid.topics-view {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 1rem !important;
}
body.theme-royal-amethyst .bookshelf-grid.topics-view .book-card {
    background: linear-gradient(135deg, #1a0521 0%, #0d0212 100%) !important;
    border: 1px solid rgba(255, 206, 90, 0.3) !important;
    border-left: 3px double #ffce5a !important; /* Fancy left border */
    border-radius: 2px !important;
    padding: 1rem !important;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
body.theme-royal-amethyst .bookshelf-grid.topics-view .book-card h3 {
    font-family: 'Cinzel', serif !important;
    color: #f3e5ab !important;
    font-size: 1.1rem !important;
    text-transform: uppercase;
    white-space: normal !important;
}


/* ------------------------------------------------------------------ */
/* 2. ?? SOLAR DAWN (Sci-Fi/Industrial) */
/* ------------------------------------------------------------------ */

/* Header & Font */
body.theme-solar-dawn .header,
body.theme-solar-dawn #bookshelf-header,
body.theme-solar-dawn .page-header {
    background: linear-gradient(to top, rgba(255, 102, 0, 0.15), rgba(26, 11, 0, 0.95)) !important;
    border-bottom: 1px solid #ff9b4a !important;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.15) !important;
}
body.theme-solar-dawn .header h1,
body.theme-solar-dawn #bookshelf-header h1 {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 22px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase;
    color: #fff5e6 !important;
    text-shadow: 0 0 10px rgba(255, 155, 74, 0.5) !important;
}

/* Action Buttons */
body.theme-solar-dawn .action-button {
    background-color: rgba(60, 25, 5, 0.9) !important;
    border: 1px solid #ff9b4a !important;
    color: #ffcc99 !important;
    border-radius: 50px !important; /* Capsules */
    font-family: 'Lato', sans-serif !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Tabs Panel */
body.theme-solar-dawn #main-bookshelf-controls .tabs {
    background: rgba(40, 15, 0, 0.7) !important;
    border: 1px solid rgba(255, 155, 74, 0.3) !important;
    border-radius: 50px;
    margin: 0 0.5rem 1rem 0.5rem;
    padding: 0.5rem 1.5rem !important;
    backdrop-filter: blur(8px);
}
body.theme-solar-dawn .tab-button.active {
    color: #ff9b4a !important;
    text-shadow: 0 0 10px #ff6600 !important;
    border-bottom: 2px solid #ff9b4a !important;
}

/* Topic Cards */
body.theme-solar-dawn .bookshelf-grid.topics-view {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 1rem !important;
}
body.theme-solar-dawn .bookshelf-grid.topics-view .book-card {
    background: linear-gradient(180deg, rgba(60, 25, 5, 0.8) 0%, rgba(20, 5, 0, 0.9) 100%) !important;
    border: 1px solid #ff9b4a !important;
    border-left: 6px solid #ff6600 !important; /* Heavy industrial bar */
    border-radius: 6px !important;
    padding: 1rem !important;
    min-height: 100px;
}
body.theme-solar-dawn .bookshelf-grid.topics-view .book-card h3 {
    font-family: 'Orbitron', sans-serif !important;
    color: #fff5e6 !important;
    font-size: 0.9rem !important;
    letter-spacing: 1px;
    white-space: normal !important;
}


/* ------------------------------------------------------------------ */
/* 3. ?? OCEAN GLASS (Aero/Glassmorphism) */
/* ------------------------------------------------------------------ */

/* Header & Font */

body.theme-ocean-glass .header,
body.theme-ocean-glass #bookshelf-header,
body.theme-ocean-glass .page-header {
    background: rgba(5, 30, 50, 0.20);
    border-radius: 16px !important;
    border-bottom: 3px solid rgba(0, 229, 255, 0.3);
    margin: 8px 0 0 0;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding-left: 0.5rem;
    padding-bottom: 1rem;
    
}

body.theme-ocean-glass .header h1,
body.theme-ocean-glass #bookshelf-header h1 {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 26px;
    letter-spacing: 0.5px;
    color: #e0f7fa;
}

/* Action Buttons */
body.theme-ocean-glass .action-button {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
    color: #00e5ff !important;
    border-radius: 12px !important;
    backdrop-filter: blur(4px);
}

/* Tabs Panel */
body.theme-ocean-glass #main-bookshelf-controls .tabs {
    background: rgba(55, 255, 255, 0.03) !important;


}
body.theme-ocean-glass .tab-button.active {
    color: #00e5ff !important;
    text-shadow: 0 0 15px rgba(0, 229, 255, 0.8) !important;
    border-bottom: 2px solid #00e5ff !important;
}

/* Topic Cards */
body.theme-ocean-glass .bookshelf-grid.topics-view {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 1rem !important;
}
body.theme-ocean-glass .bookshelf-grid.topics-view .book-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.01) 100%) !important;
    border: 1px solid rgba(0, 229, 255, 0.2) !important;
    border-radius: 16px !important;
    padding: 1rem !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
body.theme-ocean-glass .bookshelf-grid.topics-view .book-card h3 {
    font-family: 'Lato', sans-serif !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1rem !important;
    white-space: normal !important;
}
body.theme-ocean-glass .profile-header {
    background: rgba(55, 255, 255, 0.08);

}


/* ------------------------------------------------------------------ */
/* 4. ? SLATE MINIMAL (Flat/Matte) */
/* ------------------------------------------------------------------ */

/* Header & Font */
body.theme-slate-minimal .header,
body.theme-slate-minimal #bookshelf-header,
body.theme-slate-minimal .page-header {
    background-color: #111318 !important; /* Solid Matte */
    border-bottom: 1px solid #2c2c2c !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
body.theme-slate-minimal .header h1,
body.theme-slate-minimal #bookshelf-header h1 {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 600 !important;
    font-size: 22px !important;
    color: #ffffff !important;
}

/* Action Buttons */
body.theme-slate-minimal .action-button {
    background-color: transparent !important;
    border: 1px solid #4a4a4a !important;
    color: #dddddd !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    box-shadow: none !important;
}

/* Tabs Panel (Invisible) */
body.theme-slate-minimal #main-bookshelf-controls .tabs {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0;
    padding: 0 1rem 0.5rem 1rem !important;
}
body.theme-slate-minimal .tab-button.active {
    color: #ffffff !important;
    font-weight: 700;
    text-shadow: none !important;
    border-bottom: 2px solid #ffffff !important;
}

/* Topic Cards */
body.theme-slate-minimal .bookshelf-grid.topics-view {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 1rem !important;
}
body.theme-slate-minimal .bookshelf-grid.topics-view .book-card {
    background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    box-shadow: none !important;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
body.theme-slate-minimal .bookshelf-grid.topics-view .book-card h3 {
    font-family: sans-serif !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    white-space: normal !important;
}


/* ------------------------------------------------------------------ */
/* 3. ?? OCEAN GLASS (Wider & More Transparent) */
/* ------------------------------------------------------------------ */



/* 2. Bottom Navbar: Floating Glass Pill */
body.theme-ocean-glass .main-nav {
    /* Match the Header Glass */
    background: rgba(5, 30, 50, 0.20) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(100, 230, 255, 0.2) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2) !important;

    /* Layout: Wider */
    border-radius: 16px !important;
    margin: 0 4px 8px 4px !important; /* Only 4px space on sides */
    width: auto !important;
    
    /* Positioning */
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* 3. Font Styling (Elegant Light Blue) */
body.theme-ocean-glass .header h1,
body.theme-ocean-glass #bookshelf-header h1 {
    font-family: 'Lato', sans-serif !important;
    font-weight: 300 !important;
    font-size: 26px !important;
    letter-spacing: 0.5px !important;
    color: #e0f7fa !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}





/* ================================================= */
/* === ?? OCEAN GLASS: FOCUS & STATS CARDS === */
/* ================================================= */

/* 1. The "Glass" Container Style for Focus & Stats */
body.theme-ocean-glass .focus-card,
body.theme-ocean-glass .focus-prompt-card,
body.theme-ocean-glass .stats-card {
    /* Darker Blue Glass (60% opacity) */
    background: rgba(5, 30, 50, 0.40) !important;
    
    /* Frost Effect */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    
    /* Subtle Icy Border */
    border: 1px solid rgba(100, 230, 255, 0.15) !important;
    
    /* Soft Deep Shadow */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
    
    /* Ensure rounded corners match the theme */
    border-radius: 16px !important;
}

/* 2. Text Styling for Stats Cards */
body.theme-ocean-glass .stats-card-value {
    color: #00e5ff !important; /* Glowing Cyan */
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}
body.theme-ocean-glass .stats-card-label {
    color: #b2ebf2 !important; /* Pale Cyan/White */
    font-weight: 500;
}

/* 3. Progress Bar inside Focus Card */
body.theme-ocean-glass .focus-card .goal-progress-bar {
    background-color: rgba(0, 0, 0, 0.4) !important; /* Dark track */
}
body.theme-ocean-glass .focus-card .goal-progress-bar-inner {
    background-color: #00e5ff !important; /* Cyan fill */
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.6); /* Glow */
}


/* ================================================= */
/* === UNIVERSAL PULSE FEED CARDS (Glass Style) === */
/* ================================================= */

/* 1. Base Structure for All Themes (The "Card" Shape) */
.feed-item {
    /* Reduced Spacing & Shape */
    margin-bottom: 0.5rem; /* Reduced from 1rem */
    padding: 0.5rem 0.75rem;      /* Reduced from 1rem */
    border-radius: 16px;
    
    /* The Glass Effect Base */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    
    /* Ensure text remains readable */
    position: relative;
    overflow: hidden;
}

/* ------------------------------------------------- */
/* 2. Theme-Specific Coloring (Tints & Borders)      */
/* ------------------------------------------------- */

/* ?? Neon Noir: Dark with Pink Border */
body.theme-neon-noir .feed-item {
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid #ff4fd8 !important;
    box-shadow: 0 0 10px rgba(255, 79, 216, 0.15) !important;
}

/* ?? Ocean Glass: Blue Tint with Cyan Border */
body.theme-ocean-glass .feed-item {
    background: rgba(5, 30, 50, 0.40) !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

/* ?? Royal Amethyst: Purple Tint with Gold Border */
body.theme-royal-amethyst .feed-item {
    background: rgba(20, 2, 28, 0.1) !important;
    border: 1px solid #ffce5a !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5) !important;
}

/* ?? Solar Dawn: Warm Tint with Orange Border */
body.theme-solar-dawn .feed-item {
    background: rgba(40, 15, 0, 0.7) !important;
    border: 1px solid #ff9b4a !important;
}

/* ? Slate Minimal: Matte Grey (Subtle Blur) */
body.theme-slate-minimal .feed-item {
    background: rgba(30, 30, 30, 0.65) !important;
    border: 1px solid #444 !important;
    box-shadow: none !important;
}

/* ?? Ember Gold (Default) & Others: Warm Dark Glass */
body.theme-ember-gold .feed-item,
body.theme-ember-regal .feed-item,
body.theme-ember-onyx .feed-item,
body.theme-sepia .feed-item {
    background: rgba(20, 10, 5, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ????? Hogwarts: Parchment/Dark Mode Hybrid */
body.theme-hogwarts-regal .feed-item {
    background: linear-gradient(135deg, rgba(20, 8, 16, 0.9), rgba(12, 20, 38, 0.9));
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}


/* ================================================= */
/* === COMPACT PULSE FEED LAYOUT FIX === */
/* ================================================= */

/* 1. Make the details column stretch and organize content */
.feed-book-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes footer to bottom */
    flex-grow: 1;
    min-height: 100px; /* Match cover height */
}

/* 2. New Inline Footer Container */
.feed-card-footer-inline {
    display: flex;
    align-items: flex-end; /* Align to bottom */
    justify-content: space-between; /* Buttons left, Time right */
    margin-top: 0.5rem;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle separator */
    padding-top: 8px;
}

/* 3. Inline Actions (Heart/Comment) */
.feed-actions-inline {
    display: flex;
    gap: 1rem;
}

/* 4. Adjust Timestamp sizing */
.feed-timestamp {
    font-size: 0.75rem;
    opacity: 0.7;
    white-space: nowrap;
}



/* ================================================= */
/* === PULSE FEED: TIGHTER CARD HEIGHT === */
/* ================================================= */

/* 1. Shrink the Card Background (Top & Bottom) */
.feed-item {
    /* drastically reduce top/bottom padding to 8px */
    padding: 4px 12px !important; 
    gap: 0 !important;
}



/* 3. Ensure Cover stays 80x120 but doesn't push bottom padding */
.feed-book-cover {
    width: 80px !important;
    height: 120px !important;
    margin-bottom: 0 !important;
    display: block; /* Prevents line-height gaps */
}

/* 4. Tighten the Footer (Like/Chat) so it sits flush */
.feed-card-footer-inline {
    margin-top: 4px !important;
    padding-top: 1px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ================================================= */
/* === READABILITY FIX: BLURRED BACKGROUNDS (FIXED) === */
/* ================================================= */

/* 1. Target the Page Containers: Reset background to allow the pseudo-element to work */
body.theme-neon-noir #page-details,      body.theme-neon-noir #page-search-preview,
body.theme-royal-amethyst #page-details, body.theme-royal-amethyst #page-search-preview,
body.theme-solar-dawn #page-details,     body.theme-solar-dawn #page-search-preview,
body.theme-ocean-glass #page-details,    body.theme-ocean-glass #page-search-preview,
body.theme-hogwarts-regal #page-details, body.theme-hogwarts-regal #page-search-preview {
    
    /* Remove the properties that broke the sticky footer */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: transparent !important;
    
    /* Ensure the page handles the stacking context correctly */
    transform: none !important; 
}

/* 2. Apply the Blur/Darkness to a ::before element instead */
/* This acts like a separate "layer" behind the text but doesn't break fixed positioning */
body.theme-neon-noir #page-details::before,      body.theme-neon-noir #page-search-preview::before,
body.theme-royal-amethyst #page-details::before, body.theme-royal-amethyst #page-search-preview::before,
body.theme-solar-dawn #page-details::before,     body.theme-solar-dawn #page-search-preview::before,
body.theme-ocean-glass #page-details::before,    body.theme-ocean-glass #page-search-preview::before,
body.theme-hogwarts-regal #page-details::before, body.theme-hogwarts-regal #page-search-preview::before {
    content: "";
    position: fixed;
    inset: 0; /* Cover the whole screen */
    z-index: -1; /* Sit behind the text */
    
    /* The Visual Style */
    background-color: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    
    pointer-events: none; /* Ensure clicks pass through to the page */
}


/* =========================================
   FIX: LIGHT THEME VISIBILITY (IVORY PAGE)
   ========================================= */

/* 1. Fix "Notes" Tab Visibility */
/* We target the body class to override the global white text rule */
body.theme-ivory-page .tab-button.active {
    color: var(--primary-text-color) !important; /* Turns text Dark Brown */
    text-shadow: none !important; /* Removes the white glow/halo */
    border-bottom-color: var(--accent-color) !important;
}

/* 1. Make the Footer Bar blend in with the paper page */
body.theme-ivory-page .fixed-footer {
    background-color: var(--bg-color) !important; /* Cream color */
    border-top: 1px solid var(--secondary-text-color) !important;
    opacity: 0.95;
}

/* 2. Change Disabled Button to "Ghost" Style (Outline) */
body.theme-ivory-page .button:disabled {
    background-color: transparent !important; /* Remove solid fill */
    border: 2px solid var(--secondary-text-color) !important; /* Brown outline */
    color: var(--secondary-text-color) !important; /* Brown text */
    opacity: 0.4 !important; /* Fade it out to show it's inactive */
    font-weight: 600;
}

/* 3. Fix "Enter Review" Text */
body.theme-ivory-page .info-list-item-value {
    color: var(--primary-text-color) !important;
}


/* =========================================
   FIX: IVORY THEME STATS VISIBILITY
   ========================================= */

/* 1. Make the Stats Cards look like physical paper cards */
body.theme-ivory-page .stats-card {
    /* High-opacity white/cream background to block the wallpaper */
    background-color: #fffefb !important; 
    
    /* Add a crisp border to define the edges */
    border: 1px solid rgba(107, 91, 60, 0.15) !important; 
    
    /* Soft shadow to lift it off the page */
    box-shadow: 0 3px 8px rgba(43, 36, 23, 0.08) !important;
}

/* 2. Make the "Full Stats" button distinct but consistent */
body.theme-ivory-page #go-to-stats-btn {
    background-color: rgba(255, 255, 255, 0.6) !important;
    border: 2px dashed rgba(107, 91, 60, 0.4) !important; /* Clearer dashed line */
}

/* 3. Ensure the labels (e.g., "TOTAL BOOKS") are bold enough */
body.theme-ivory-page .stats-card-label {
    font-weight: 700 !important;
    opacity: 0.8;
    font-size: 0.65rem !important; /* Slightly crisper size */
}


/* =========================================
   FIX: IVORY THEME PURCHASE TAGS CONTRAST
   ========================================= */

body.theme-ivory-page #purchase-history-list .button {
    /* Force a solid Dark Brown background */
    background-color: #6b5b3c !important; 
    
    /* Force White/Cream text */
    color: #fffefb !important;
    
    /* Remove the default beige border and add a dark one */
    border: 1px solid #4a3f2a !important;
    
    /* Make font slightly bolder for readability */
    font-weight: 600;
    
    /* Add a shadow to lift them off the page */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}




/* =========================================================
   GLASS THEME FIXES (UPDATED: Blue Search & Pull-Up Panels)
   ========================================================= */

/* --- 1. MAIN DISCOVER SEARCH HEADER --- */
#discover-controls-container {
    /* Deep Midnight Blue Glass */
    background-color: rgba(20, 30, 40, 0.85) !important; 
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    
    /* Subtle Cyan/Blue bottom border */
    border-bottom: 1px solid rgba(100, 200, 255, 0.15);
    box-shadow: 0 4px 30px rgba(0, 10, 20, 0.4);
    z-index: 1000;
}

/* The Search Input Field itself */
#discover-search-input {
    background-color: rgba(0, 0, 0, 0.1) !important; 
    border: 1px solid rgba(100, 200, 255, 0.2) !important; /* Blue-ish border */
    color: var(--primary-text-color);
    border-radius: 12px;
}

#discover-search-input::placeholder {
    color: rgba(200, 230, 255, 0.5); /* Slight blue tint to text */
}

/* --- 2. TOP ACTION BUTTONS (Pills) --- */
.top-action-item {
    background-color: rgba(40, 65, 85, 0.45) !important; 
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(100, 200, 255, 0.15) !important; 
    color: #e0f0ff !important; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, background-color 0.2s;
}

.top-action-item.active {
    background-color: rgba(0, 140, 255, 0.65) !important;
    border-color: rgba(150, 220, 255, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(0, 140, 255, 0.4);
}

/* --- 3. PULL-UP PANELS (Top Reads / Categories List) --- */
#page-discover-list {
    /* Deep Dark Blue Glass */
    background-color: rgba(12, 20, 30, 0.5) !important; 
    
    /* Heavy Blur for readability over wallpaper */
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    
    /* Frosty top border */
    border-top: 1px solid rgba(100, 200, 255, 0.25) !important;
    
    /* Deep shadow to separate from page below */
    box-shadow: 0 -10px 50px rgba(0, 5, 15, 0.7);
    
    /* Ensure rounded top corners */
    border-radius: 24px 24px 0 0; 
}

/* The Header INSIDE the Pull-Up Panel */
#page-discover-list .page-header {
    /* Matches the panel but slightly transparent so items blur under it */
    background-color: rgba(12, 20, 30, 0.1) !important; 
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(100, 200, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 20;
}

/* --- 4. FEATURED CAROUSEL CARD --- */
.featured-carousel-container {
    background: rgba(12, 32, 35, 0.5) !important; 
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    border-radius: 16px; 
}


/* =========================================
   FIX: HOGWARTS LETTER SCROLLING (FINAL)
   ========================================= */

/* 1. The Overlay (Scroll Container) */
#hogwarts-letter-modal {
    /* Ensure it sits on top */
    display: flex;
    align-items: flex-start !important;
    z-index: 6000 !important; 
    position: fixed !important;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* Force vertical scrolling */
    overflow-y: auto !important; 
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    
    /* CRITICAL: Use Padding on the container to create safe space */
    /* Top: 60px (Prevents top cut-off) */
    /* Bottom: 100px (Room for the wax seal) */
    padding: 60px 15px 100px 15px !important; 
    
    /* Ensure padding is included in width calculation */
    box-sizing: border-box; 
    
    /* Center alignment helper */
    text-align: center;
}

/* 2. The Letter (Content) */
#hogwarts-letter-modal .parchment-letter {
    /* Remove old positioning triggers */
    transform: none !important; 
    position: relative !important;
    top: auto !important; 
    left: auto !important;
    
    /* Center the block horizontally */
    margin: 0 auto !important; 
    
    /* Let it grow as tall as needed */
    height: auto !important;
    max-height: none !important;
    
    /* Ensure the wax seal hanging off the bottom is visible */
    overflow: visible !important;
}

/* 3. Ensure the Close Button isn't hidden */
.wax-seal-close {
    /* Push it slightly lower to hang off the paper nicely */
    bottom: -40px !important; 
    z-index: 10;
}


/* =========================================
   BOOK DIVE CHAT STYLES (IMPROVED)
   ========================================= */

/* Container tweaks */
#book-dive-chat-container {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 20px; /* Space before input bar */
}

/* Generic Message Item */
.chat-message-item {
    display: flex;
    gap: 0.75rem;
    max-width: 85%; /* Don't span full width */
    animation: fadeIn 0.3s ease-out;
}

/* --- OUTGOING MESSAGES (ME) --- */
.chat-message-item.is-me {
    align-self: flex-end; /* Push to right */
    flex-direction: row-reverse; /* Avatar on right */
}

.chat-message-item.is-me .chat-content {
    background-color: var(--accent-color);
    color: white;
    border-radius: 18px 18px 0 18px; /* Bubble shape */
}

.chat-message-item.is-me .feed-timestamp {
    color: rgba(255,255,255,0.8);
}

.chat-message-item.is-me .user-name {
    color: white;
    display: none; /* Hide my own name to save space */
}

/* --- INCOMING MESSAGES (THEM) --- */
.chat-message-item.is-others {
    align-self: flex-start; /* Push to left */
}

.chat-message-item.is-others .chat-content {
    background-color: var(--secondary-surface-color);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 18px 18px 18px 0; /* Bubble shape */
}

/* --- SHARED BUBBLE STYLES --- */
.chat-content {
    padding: 10px 14px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-width: 60px;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
    font-size: 0.75rem;
}

.chat-text {
    margin: 0;
    line-height: 1.4;
    font-size: 0.95rem;
    word-wrap: break-word; /* Prevent long words breaking layout */
}



/* =========================================
   THEMED CHAT & BOOK DIVE STYLES (AESTHETIC + READABLE)
   ========================================= */

/* --- 1. OCEAN GLASS THEME (The current look) --- */
body.theme-ocean-glass #page-book-dive,
body.theme-ocean-glass #page-book-dive .comment-input-bar {
    background-color: transparent !important; /* Let wallpaper show */
    background-image: none !important;
}

/* Glassy Input Bar */
body.theme-ocean-glass .comment-input-bar {
    background-color: rgba(20, 30, 40, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(100, 200, 255, 0.2);
}

/* Glassy Chat Bubbles (Incoming) */
body.theme-ocean-glass .chat-message-item.is-others .chat-content {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--primary-text-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Glassy Chat Bubbles (Outgoing/Me) */
body.theme-ocean-glass .chat-message-item.is-me .chat-content {
    background: rgba(0, 140, 255, 0.6) !important; /* Blue Glass */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 15px rgba(0, 140, 255, 0.3);
}


/* --- 2. HOGWARTS REGAL THEME (Fixes White-on-White) --- */
body.theme-hogwarts-regal #page-book-dive {
    background-color: #1a0f0f !important;
}
body.theme-hogwarts-regal .book-dive-header-card {
    background: linear-gradient(to right, #2b1b15, #0f0505);
    border-bottom: 2px solid #d4af37;
}

/* Incoming - Parchment Paper (FIXED TEXT COLOR) */
body.theme-hogwarts-regal .chat-message-item.is-others .chat-content {
    background: #f3e5ab !important; /* Lighter parchment */
    border: 1px solid #8b5a2b;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
    font-family: 'Georgia', serif;
    
    /* CRITICAL FIX: Force Dark Ink Color */
    color: #2b1b15 !important; 
    text-shadow: none !important; /* Remove shadows that make dark text blurry */
}
/* Force metadata (Name/Time) to be Dark Brown/Grey */
body.theme-hogwarts-regal .chat-message-item.is-others .feed-timestamp,
body.theme-hogwarts-regal .chat-message-item.is-others .user-name {
    color: #5c4033 !important; 
    font-weight: bold;
}

/* Outgoing - Deep Gryffindor Red */
body.theme-hogwarts-regal .chat-message-item.is-me .chat-content {
    background: linear-gradient(135deg, #740001, #ae0001) !important;
    border: 1px solid #d4af37;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
    font-family: 'Georgia', serif;
    
    color: #ffdb58 !important; /* Gold Text */
    text-shadow: 1px 1px 0px rgba(0,0,0,0.5); /* Embossed look */
}
/* Force outgoing timestamp to be readable on red */
body.theme-hogwarts-regal .chat-message-item.is-me .feed-timestamp {
    color: rgba(255, 219, 88, 0.8) !important;
}


/* --- 3. NEON NOIR THEME --- */
/* Cyberpunk Chat Bubbles */
body.theme-neon-noir .chat-message-item.is-others .chat-content {
    background: #000000 !important;
    border: 1px solid #ff4fd8 !important; /* Hot Pink Border */
    color: #ff4fd8 !important;
    box-shadow: 0 0 8px rgba(255, 79, 216, 0.3);
    border-radius: 0px 12px 12px 12px; /* Angular/Tech shape */
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
}

body.theme-neon-noir .chat-message-item.is-me .chat-content {
    background: #000000 !important;
    border: 1px solid #00f3ff !important; /* Cyan Border */
    color: #00f3ff !important;
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.3);
    border-radius: 12px 0px 12px 12px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
}

body.theme-neon-noir .comment-input-bar {
    background-color: #050008 !important;
    border-top: 1px solid #ff4fd8; 
}


/* --- 4. SOLAR DAWN (Warm) --- */
body.theme-solar-dawn .chat-message-item.is-others .chat-content {
    background: #2d1b15 !important;
    border: 1px solid #ff9b4a;
    color: #ffe5cc !important;
}
body.theme-solar-dawn .chat-message-item.is-me .chat-content {
    background: linear-gradient(135deg, #e65100, #bf360c) !important;
    color: white !important;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}


/* --- 5. ROYAL AMETHYST (Kept as is) --- */
body.theme-royal-amethyst .chat-message-item.is-others .chat-content {
    background: #2e093a !important;
    border: 1px solid #c7a3f5;
    color: #f3e7ff !important;
}
body.theme-royal-amethyst .chat-message-item.is-me .chat-content {
    background: linear-gradient(135deg, #6a1b9a, #4a148c) !important;
    border: 1px solid #ffd700;
    color: #fff !important;
}



/* =========================================
   FIX: CAROUSEL INFINITE LOOP
   ========================================= */

/* This class kills the animation instantly */
.featured-carousel-wrapper.no-transition {
    transition: none !important;
    -webkit-transition: none !important;
}


/* --- FIX: REMOVE DOUBLE BULLETS --- */

/* 1. Remove default dots from "What's New" and "Change Log" lists */
#whats-new-list, 
.cl-list {
    list-style: none !important; /* Kills the default bullet */
    padding-left: 0.5rem !important; /* Reduces indentation */
    margin: 0 !important;
}

/* 2. Ensure spacing between items is nice */
#whats-new-list li, 
.cl-list li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
    position: relative; /* Keeps content aligned */
}







                      
</style>   