.container{max-width:1600px;margin:0 auto;padding:var(--spacing-md)}.page-header{text-align:center;margin-bottom:var(--spacing-lg);padding:var(--spacing-lg) 0}.page-header h1{font-size:2.5rem;color:var(--text-heading);margin-bottom:var(--spacing-sm)}.subtitle{font-size:1rem;color:var(--text-light)}.sort-controls{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);padding:var(--spacing-md);background:var(--bg-secondary);border-radius:8px}.sort-controls label{font-weight:600;color:var(--text-body)}.sort-select{padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--border-color);border-radius:6px;background:#fff;font-size:.95rem;cursor:pointer;transition:border-color .2s ease}.sort-select:hover{border-color:var(--color-primary)}.sort-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #ff6f611a}.thumbnail-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.thumbnail-item{position:relative;aspect-ratio:3 / 4;overflow:hidden;background:linear-gradient(135deg,#f5f5f5,#e0e0e0);border-radius:4px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}.thumbnail-item:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003;z-index:10}.bookshelf-badge{position:absolute;top:.25rem;right:.25rem;z-index:10;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#ffffffe6;color:#ff4757;box-shadow:0 2px 4px #00000026;pointer-events:none}.thumbnail-item img{width:100%;height:100%;object-fit:cover;display:block}.placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem}.thumbnail-overlay,.thumbnail-title{display:none}.pagination{margin-top:var(--spacing-xl);padding:var(--spacing-lg) 0;border-top:1px solid rgba(0,0,0,.1)}.pagination-controls{display:flex;justify-content:center;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}.pagination-link{padding:.5rem 1rem;background:var(--bg-card);border:1px solid rgba(0,0,0,.1);border-radius:var(--radius-md);color:var(--text-body);text-decoration:none;font-size:.875rem;cursor:pointer;transition:all var(--transition-normal)}.pagination-link:hover:not(:disabled){background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.pagination-link:disabled{opacity:.5;cursor:not-allowed}.pagination-numbers{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.pagination-number{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);text-decoration:none;color:var(--text-body);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-normal);background:var(--bg-card);border:1px solid rgba(0,0,0,.1)}.pagination-number:hover{background:#ff69b41a;border-color:var(--color-primary)}.pagination-number.current{background:var(--color-primary);color:#fff;font-weight:700}.empty-bookshelf{grid-column:1 / -1;text-align:center;padding:var(--spacing-xl);color:var(--text-light)}.empty-bookshelf p{font-size:1.1rem;margin-bottom:var(--spacing-md)}.bookshelf-link-btn{display:inline-block;padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-primary);color:#fff;border-radius:var(--radius-md);text-decoration:none;font-weight:600;transition:background .2s ease}.bookshelf-link-btn:hover{background:var(--color-primary-dark)}.random-reload{display:flex;justify-content:center;margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:1px solid var(--border-color)}.reload-button{padding:var(--spacing-md) var(--spacing-lg);background:var(--color-primary);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.reload-button:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.reload-button:active{transform:translateY(0)}@media (max-width: 1200px){.thumbnail-wall{grid-template-columns:repeat(4,1fr)}}@media (max-width: 900px){.thumbnail-wall{grid-template-columns:repeat(3,1fr)}}@media (max-width: 768px){.page-header h1{font-size:1.75rem}.thumbnail-wall{grid-template-columns:repeat(2,1fr)}.sort-controls{flex-direction:column;gap:var(--spacing-xs)}.pagination-controls{flex-direction:column;gap:var(--spacing-sm)}.pagination-link,.pagination-number{font-size:.75rem}}@media (max-width: 600px){.thumbnail-wall{grid-template-columns:1fr}}
