body { background-color: #121212; color: #e0e0e0; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }

.header-bar { background-color: #1f1f1f; padding: 10px 15px; border-bottom: 1px solid #333; position: sticky; top: 0; z-index: 1000; }
.header-main { display: flex; justify-content: space-between; align-items: center; }
.header-left { display: flex; flex-direction: column; gap: 8px; }
.main-title { margin: 0; font-size: 1.3rem; color: #bb86fc; }

.category-nav { display: flex; gap: 5px; flex-wrap: wrap; }
.nav-btn { 
    background: transparent; 
    border: 1px solid #444; 
    color: #b0b0b0; 
    padding: 6px 10px; 
    border-radius: 4px; 
    font-size: 0.75rem; 
    cursor: pointer; 
    font-weight: bold;
    text-transform: uppercase;
}
.nav-btn.active { background: #bb86fc; color: #000; border-color: #bb86fc; }

.short-text { display: inline; }
.full-text { display: none; }

@media (min-width: 1024px) {
    .short-text { display: none; }
    .full-text { display: inline; }
    .nav-btn { font-size: 0.85rem; padding: 8px 12px; }
    
    .clickable-meta { cursor: pointer; transition: color 0.2s; }
    .clickable-meta:hover { color: #03dac6 !important; text-decoration: underline; }
}

.controls { display: none; flex-wrap: wrap; gap: 15px; margin-top: 15px; background: #252525; padding: 15px; border-radius: 8px; border: 1px solid #333; }
.controls.open { display: flex; }
.control-group { display: flex; flex-direction: column; gap: 5px; min-width: 180px; flex: 1; }
.control-group label { font-size: 0.8rem; color: #03dac6; font-weight: bold; text-transform: uppercase; }
.control-group select { background: #121212; color: white; border: 1px solid #444; padding: 8px; border-radius: 4px; cursor: pointer; }
.control-group select:disabled { opacity: 0.5; cursor: not-allowed; }

.mobile-menu-toggle { background: #333; color: #03dac6; border: 1px solid #03dac6; padding: 6px 12px; border-radius: 4px; font-weight: bold; cursor: pointer; }

.gallery { display: grid; padding: 10px; gap: 15px; grid-template-columns: 1fr; justify-items: center; }

@media (min-width: 1024px) {
    .gallery { grid-template-columns: repeat(5, 1fr); padding: 20px; gap: 20px; }
}

.card { 
    background-color: #1e1e1e; border-radius: 8px; overflow: hidden; width: 100%; display: flex; flex-direction: column; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: transform 0.2s, border-color 0.3s; position: relative; border: 2px solid transparent;
}

.img-container { width: 100%; aspect-ratio: 2/3; overflow: hidden; position: relative; cursor: pointer; padding: 10px; box-sizing: border-box; background-color: #151515; }
@media (max-width: 1023px) { .img-container { max-height: 60vh; } }
.img-container img { width: 100%; height: 100%; object-fit: contain; }


/* --- CATEGORY BADGE (Pinned Top-Left) --- */
.category-badge {
    position: absolute; top: 10px; left: 10px; color: #000; padding: 2px 8px; font-size: 0.65rem; font-weight: 900;
    border-radius: 3px; text-transform: uppercase; z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.badge-paperback { background-color: #03dac6; }
.badge-magazine { background-color: #ffb74d; }
.badge-anthology { background-color: #4fc3f7; }
.badge-double { background-color: #bb86fc; }

.content { padding: 8px 15px 12px 15px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.title { font-size: 1.15rem; font-weight: bold; color: #bb86fc; margin-bottom: 2px; line-height: 1.1; }
.author-line { font-size: 0.95rem; color: #e0e0e0; margin-bottom: 6px; }
.author-name { color: #03dac6; font-weight: 600; }

.meta-row { display: none; }
@media (min-width: 1024px) {
    .title { font-size: 0.95rem; }
    .author-line { font-size: 0.85rem; margin-bottom: 6px; }
    .meta-row { display: flex; gap: 5px; font-size: 0.75rem; margin-bottom: 2px; }
    .meta-label { color: #888; font-weight: bold; flex-shrink: 0; }
    .meta-value { color: #ccc; }
}

.btn-row { display: flex; flex-direction: column; gap: 6px; margin-top: 5px; }
.btn { border: none; height: 38px; border-radius: 4px; cursor: pointer; font-size: 0.85rem; font-weight: bold; width: 100%; }
.toggle-btn { background-color: #333; color: white; }
.details-btn { background-color: #03dac6; color: black; }
.reset-btn { background-color: #cf6679; color: black; } /* Pinkish-red for reset */

#zoomModal { display: none; position: fixed; z-index: 2000; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); justify-content: center; align-items: center; }
.zoom-content { max-width: 95%; max-height: 95%; object-fit: contain; }

.card-details-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #1e1e1e; z-index: 10; display: none; padding: 15px; box-sizing: border-box; }
.card-details-overlay.active { display: flex; }
.details-inner { width: 100%; display: flex; flex-direction: column; height: 100%; }
.details-title { color: #bb86fc; font-size: 1.25rem; margin-bottom: 10px; border-bottom: 1px solid #333; padding-bottom: 5px; }
.details-scroll-area { flex: 1; overflow-y: auto; }
.details-section { margin-bottom: 10px; border-bottom: 1px solid #2c2c2c; padding-bottom: 8px; }
.details-section p { margin: 4px 0; font-size: 1rem; }
.details-section strong { color: #03dac6; }
.details-close-btn { background-color: #cf6679; color: black; margin-top: 5px; }

/* --- ANTI-SCRAPE / ANTI-SAVE MEASURES --- */
.img-container img, #zoomImg {
    pointer-events: none; /* Kills right-click and drag-to-desktop */
    user-select: none;    /* Prevents highlighting */
    -webkit-user-select: none;
}

/* --- FAVORITES UI (Pinned Top-Right) --- */
.favorite-heart {
    position: absolute;
    top: 0px;    /* Use 0 to give it a larger tap area at the top */
    right: 0px;  /* Pinned to the far right */
    width: 60px; /* Specific width for the tap area */
    height: 60px;
    display: flex;
    justify-content: top;
    align-items: top;
    
    font-size: 2.2rem; 
    color: rgba(255, 255, 255, 0.4); 
    z-index: 20; /* High z-index to stay above everything */
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 1);
    line-height: 1;
}

/* Clearer Favorite State */
.favorite-heart.is-favorite {
    color: #ff4081 !important; 
    text-shadow: 0 0 12px rgba(255, 64, 129, 0.8), 0 0 2px rgba(0, 0, 0, 1);
    transform: scale(1.1);
}

/* Mobile (Pixel 8) Adjustment */
@media (max-width: 1023px) {
    .favorite-heart {
        font-size: 2.8rem; /* Even larger for mobile thumbs */
        top: -5px;
        right: -5px;
    }
}