/* ===========================================================================
VOHLY - Main Stylesheet
Personal Library for Markdown Files and Books
===========================================================================
Dependencies: Bootstrap 5.3.3, Bootstrap Icons 1.11.3,
Google Fonts (Inter, Merriweather)
TABLE OF CONTENTS
1. CUSTOM PROPERTIES
2. BASE STYLES
3. LAYOUT
3.1. Navbar
3.2. Offcanvas Sidebar
3.3. Hero Section
3.4. Footer
4. COMPONENTS
4.1. Book Cards
4.2. Filter Bar
4.3. Tag Badges
4.4. Empty State
4.5. Buttons
4.6. Styled Dropdowns
4.7. Avatars
4.8. Count Badge
4.9. Section Title
5. LANDING PAGE
5.1. Landing Navbar
5.2. Landing Hero
5.3. Features
5.4. How It Works
5.5. Pricing
5.6. FAQ
5.7. CTA Banner
5.8. Landing Footer
6. ADMIN LAYOUT
6.1. Admin Sidebar
6.2. Admin Content
6.3. Admin Tables
6.4. Admin Cards
6.5. Chart Placeholders
6.6. Pagination
7. APP PAGES
7.1. Content Cards
7.2. Book View
7.3. Reader
7.4. Profile
7.5. Library Toolbar + Group Chips
7.6. Settings
7.7. Social / Community
7.8. Contacts
7.9. Public Profile
7.10. Chat / Messages
7.11. Book Detail
7.12. Book Form
7.13. Share Manage
7.14. Issues
7.15. Manifest Generator
8. UTILITIES
9. GLASSMORPHISM FALLBACK
10. SCROLLBAR
11. RESPONSIVE
12. REDUCED MOTION
13. DROP ZONE
14. SWEETALERT2 OVERRIDES
=========================================================================== */
/* ===========================================================================
1. CUSTOM PROPERTIES
=========================================================================== */
:root {
/* ---- Brand Colors ---- */
--color-primary: #D47B33;
--color-primary-dark: #B4682B;
--color-primary-light: #E2A26C;
--color-primary-subtle: #F9EDE1;
--color-primary-ghost: #FEF8F2;
--color-primary-rgb: 212, 123, 51;
--color-primary-tint-05: rgba(var(--color-primary-rgb), 0.05);
--color-primary-tint-12: rgba(var(--color-primary-rgb), 0.12);
--color-primary-tint-15: rgba(var(--color-primary-rgb), 0.15);
--color-primary-tint-18: rgba(var(--color-primary-rgb), 0.18);
--color-accent: #C06A2B;
--color-accent-dark: #A45A24;
--color-accent-light: #D98E55;
--color-accent-subtle: #F7EBDF;
--color-accent-rgb: 192, 106, 43;
/* ---- Semantic Colors ---- */
--color-success: #3D9970;
--color-success-subtle: #E2F0E9;
--color-success-rgb: 61, 153, 112;
--color-warning: #E8A838;
--color-warning-subtle: #FDF3E1;
--color-warning-rgb: 232, 168, 56;
--color-danger: #D9534F;
/* ---- Decorative Palette (covers, gradients) ---- */
--color-teal: #4ECDC4;
--color-rose: #E07A8E;
--color-rose-dark: #C9556B;
--color-emerald: #59C997;
/* ---- Neutral Palette (warm tints) ---- */
--color-white: #FFFFFF;
--color-gray-50: #FAFAF7;
--color-gray-100: #F4F3EF;
--color-gray-200: #E8E6E1;
--color-gray-300: #D5D3CD;
--color-gray-400: #B8B5AE;
--color-gray-500: #8C8983;
--color-gray-600: #6B6862;
--color-gray-700: #4A4843;
--color-gray-800: #2D3142;
--color-gray-900: #1A1D2E;
/* ---- Semantic Tokens ---- */
--color-text: var(--color-gray-800);
--color-text-secondary: var(--color-gray-600);
--color-text-muted: var(--color-gray-500);
--color-text-inverse: var(--color-white);
--color-bg: var(--color-gray-50);
--color-bg-alt: var(--color-gray-100);
--color-bg-surface: var(--color-white);
--color-border: var(--color-gray-200);
--color-border-dark: var(--color-gray-300);
/* ---- Typography ---- */
--font-base: 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', sans-serif;
--font-headings: 'Merriweather', Georgia, serif;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
/* ---- Spacing ---- */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
/* ---- Borders ---- */
--radius-sm: 0.375rem;
--radius-base: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-pill: 50rem;
/* ---- Shadows ---- */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
--shadow-base: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
/* ---- Transitions ---- */
--transition-fast: 150ms ease;
--transition-base: 250ms ease-in-out;
--transition-glow: 350ms ease;
/* ---- Glassmorphism ---- */
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-bg-heavy: rgba(255, 255, 255, 0.85);
--glass-bg-light: rgba(255, 255, 255, 0.55);
--glass-blur: 12px;
--glass-blur-light: 8px;
--glass-border: rgba(255, 255, 255, 0.45);
/* ---- Glow Colors ---- */
--glow-primary: rgba(var(--color-primary-rgb), 0.35);
--glow-primary-soft: rgba(var(--color-primary-rgb), 0.15);
--glow-accent: rgba(var(--color-accent-rgb), 0.35);
--glow-accent-soft: rgba(var(--color-accent-rgb), 0.15);
--glow-success: rgba(var(--color-success-rgb), 0.35);
--glow-success-soft: rgba(var(--color-success-rgb), 0.15);
--glow-warning: rgba(var(--color-warning-rgb), 0.35);
/* ---- Animation Timing ---- */
--animation-pulse: 3s ease-in-out infinite;
--animation-shimmer: 2.5s linear infinite;
/* ---- Focus ---- */
--focus-ring-color: rgba(var(--color-primary-rgb), 0.25);
--focus-ring-shadow: 0 0 0 3px var(--focus-ring-color);
/* ---- Layout ---- */
--navbar-height: 56px;
/* ---- Component tokens: Navigation Rail ---- */
--nav-rail-item-active-bg: var(--nav-rail-item-hover-bg);
--nav-rail-item-active-color: var(--color-text);
--nav-rail-item-hover-bg: var(--color-bg-surface);
--nav-rail-item-hover-color: var(--color-text);
/* ---- Component tokens: Sidebar Links ---- */
--sidebar-link-active-color: var(--color-primary-dark);
/* ---- Component tokens: Overview ---- */
--overview-section-height: 282px;
}
/* ===========================================================================
1.1. DARK THEME (body.app-dark)
=========================================================================== */
body.app-dark {
--color-gray-50: #12141F;
--color-gray-100: #1A1D2E;
--color-gray-200: #252840;
--color-gray-300: #343752;
--color-gray-400: #565A78;
--color-gray-500: #787CA0;
--color-gray-600: #9EA2C2;
--color-gray-700: #C4C7DC;
--color-gray-800: #E8EAF6;
--color-gray-900: #F4F5FA;
--color-text: #E8EAF6;
--color-text-secondary: #9EA2C2;
--color-text-muted: #787CA0;
--color-text-inverse: #12141F;
--color-bg: #12141F;
--color-bg-alt: #1A1D2E;
--color-bg-surface: #1E2130;
--color-border: rgba(255, 255, 255, 0.08);
--color-border-dark: rgba(255, 255, 255, 0.14);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow-base: 0 2px 8px rgba(0, 0, 0, 0.5);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7);
--glass-bg: rgba(26, 29, 46, 0.85);
--glass-bg-heavy: rgba(26, 29, 46, 0.95);
--glass-bg-light: rgba(26, 29, 46, 0.7);
--glass-border: rgba(255, 255, 255, 0.1);
--color-primary-ghost: rgba(var(--color-primary-rgb), 0.08);
--color-primary-subtle: rgba(var(--color-primary-rgb), 0.15);
/* ---- Component tokens: Navigation Rail ---- */
--nav-rail-item-hover-bg: var(--color-gray-200);
--nav-rail-item-hover-color: var(--color-text);
/* ---- Component tokens: Sidebar Links ---- */
--sidebar-link-active-color: var(--color-primary-light);
color-scheme: dark;
}
/* Bootstrap and third-party overrides for dark mode */
body.app-dark .dropdown-menu {
background-color: var(--color-bg-surface);
border-color: var(--color-border);
color: var(--color-text);
}
body.app-dark .dropdown-item {
color: var(--color-text);
}
body.app-dark .dropdown-item:hover,
body.app-dark .dropdown-item:focus {
background-color: var(--color-bg-alt);
color: var(--color-text);
}
body.app-dark .dropdown-divider {
border-color: var(--color-border);
}
body.app-dark .modal-content {
background-color: var(--color-bg-surface);
border-color: var(--color-border);
color: var(--color-text);
}
.modal-footer {
border-top: none;
}
body.app-dark .modal-header {
border-color: var(--color-border);
}
body.app-dark .form-control,
body.app-dark .form-select {
background-color: var(--color-bg-alt);
border-color: var(--color-border-dark);
color: var(--color-text);
}
body.app-dark .form-control:focus,
body.app-dark .form-select:focus {
background-color: var(--color-bg-alt);
color: var(--color-text);
}
body.app-dark .form-control::placeholder {
color: var(--color-text-muted);
}
body.app-dark .form-text {
color: var(--color-text-secondary);
}
body.app-dark .form-label,
body.app-dark .form-check-label {
color: var(--color-text);
}
body.app-dark .form-check-input {
background-color: var(--color-bg-alt);
border-color: var(--color-border-dark);
}
body.app-dark .input-group-text {
background-color: var(--color-bg-alt);
border-color: var(--color-border-dark);
color: var(--color-text-secondary);
}
body.app-dark .btn-close {
filter: invert(1) grayscale(1) brightness(1.4);
}
body.app-dark hr {
border-color: var(--color-border);
}
body.app-dark .table {
color: var(--color-text);
border-color: var(--color-border);
}
body.app-dark .table th,
body.app-dark .table td {
border-color: var(--color-border);
}
body.app-dark .alert-info {
background-color: rgba(100, 130, 200, 0.15);
border-color: rgba(100, 130, 200, 0.3);
color: #A8C8FF;
}
body.app-dark .alert-warning {
background-color: rgba(232, 168, 56, 0.15);
border-color: rgba(232, 168, 56, 0.3);
color: #F0C87A;
}
body.app-dark .badge.bg-success {
background-color: #2D7A5A !important;
}
body.app-dark .library-sidebar-footer {
border-top-color: var(--color-border);
}
body.app-dark .sidebar-user-avatar {
background: var(--color-primary);
}
body.app-dark .sidebar-user-menu {
border-color: var(--color-border);
background: var(--color-bg-surface);
}
body.app-dark .sidebar-user-menu__divider {
background: var(--color-border);
}
body.app-dark .sidebar-user-menu__card:hover,
body.app-dark .sidebar-user-menu__item:hover {
background: var(--color-bg-alt);
}
body.app-dark .library-sidebar-brand {
border-bottom-color: var(--color-border);
}
body.app-dark .text-muted {
color: var(--color-text-secondary) !important;
}
.nav-tabs {
--tabs-body-bg: var(--color-bg);
border-bottom-color: var(--color-border);
}
.nav-tabs .nav-link {
position: relative;
min-height: 52px;
padding: 0.75rem 1.25rem;
border: 1px solid transparent;
border-bottom-color: transparent;
border-radius: var(--radius-base) var(--radius-base) 0 0;
color: var(--color-text-secondary);
font-weight: 500;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
color: var(--color-text);
border-color: transparent;
box-shadow: none;
}
.nav-tabs .nav-link:focus-visible {
outline: none;
box-shadow: none;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus {
color: var(--color-text);
border-color: var(--color-border) var(--color-border) transparent;
background: linear-gradient(
to bottom,
var(--color-bg-surface) 0%,
var(--color-bg-surface) 58%,
var(--tabs-body-bg) 100%
);
}
.nav-tabs .nav-link.active::after {
content: "";
position: absolute;
right: 0;
bottom: -1px;
left: 0;
height: 1px;
background: var(--tabs-body-bg);
}
body.app-dark .nav-tabs {
--tabs-body-bg: var(--color-bg);
border-color: var(--color-border-dark);
}
body.app-dark .nav-tabs .nav-link {
color: var(--color-text-secondary);
border-color: transparent;
}
body.app-dark .nav-tabs .nav-link:hover,
body.app-dark .nav-tabs .nav-link:focus {
color: var(--color-text);
border-color: transparent;
}
body.app-dark .nav-tabs .nav-link.active,
body.app-dark .nav-tabs .nav-link.active:hover,
body.app-dark .nav-tabs .nav-link.active:focus {
border-color: var(--color-border-dark) var(--color-border-dark) transparent;
background: linear-gradient(
to bottom,
var(--color-bg-surface) 0%,
var(--color-bg-surface) 58%,
var(--tabs-body-bg) 100%
);
}
body.app-dark .list-group-item {
background-color: transparent;
border-color: var(--color-border);
color: var(--color-text);
}
/* ===========================================================================
2. BASE STYLES
=========================================================================== */
body {
font-family: var(--font-base);
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
html {
overflow-x: clip;
}
h1, h2, h3, h4 {
font-family: var(--font-headings);
font-weight: 700;
color: var(--color-text);
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-primary-dark);
}
/* ---- Global rounded overrides ---- */
.btn {
border-radius: var(--radius-pill);
}
.form-control {
border-radius: var(--radius-pill);
}
.form-control::placeholder {
color: var(--color-gray-400);
opacity: 1;
}
textarea.form-control {
border-radius: var(--radius-lg);
}
.dropdown-menu {
border-radius: var(--radius-lg);
overflow: hidden;
}
.input-group > :first-child {
border-top-left-radius: var(--radius-pill);
border-bottom-left-radius: var(--radius-pill);
}
.input-group > :last-child {
border-top-right-radius: var(--radius-pill);
border-bottom-right-radius: var(--radius-pill);
}
/* ---- Global focus override ---- */
*:focus-visible {
outline: none;
box-shadow: var(--focus-ring-shadow);
}
*:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
border-color: var(--color-primary-light);
box-shadow: var(--focus-ring-shadow);
outline: none;
}
.card,
.admin-card {
border-radius: var(--radius-xl);
}
/* ===========================================================================
3. LAYOUT
=========================================================================== */
/* ---------------------------------------------------------------------------
3.1. NAVBAR
--------------------------------------------------------------------------- */
body > header {
position: sticky;
top: 0;
z-index: 1020;
}
.navbar-vohly {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border-bottom: 1px solid var(--glass-border);
min-height: var(--navbar-height);
}
.navbar-vohly .navbar-brand {
font-family: var(--font-headings);
font-weight: 700;
color: var(--color-text);
font-size: var(--text-xl);
gap: var(--space-sm);
}
.navbar-vohly .navbar-brand:hover {
color: var(--color-primary);
}
.navbar-vohly .navbar-brand .bi-book-half {
color: var(--color-primary);
font-size: 1.4rem;
transition: filter var(--transition-glow);
}
.navbar-vohly .navbar-brand:hover .bi-book-half {
filter: drop-shadow(0 0 6px var(--glow-primary));
}
.navbar-vohly .navbar-toggler {
padding: var(--space-xs) var(--space-sm);
font-size: var(--text-base);
border: none;
}
.navbar-vohly .navbar-toggler:focus {
box-shadow: none;
outline: none;
}
.btn-icon {
width: 40px;
height: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--color-border);
background-color: transparent;
color: var(--color-text-secondary);
transition: all var(--transition-fast);
}
.btn-icon:hover {
background-color: var(--color-bg-alt);
color: var(--color-text);
border-color: var(--color-border-dark);
}
/* Filled variant: always-visible surface background, used for action buttons inside content cards */
.btn-icon--surface {
background-color: var(--color-bg-surface);
}
.btn-icon--surface:hover {
background-color: var(--color-bg-alt);
}
.navbar-search .btn {
height: 40px;
}
/* ---------------------------------------------------------------------------
3.2. OFFCANVAS SIDEBAR
--------------------------------------------------------------------------- */
.sidebar-offcanvas {
max-width: 300px;
background: var(--glass-bg-heavy);
backdrop-filter: blur(var(--glass-blur-light));
-webkit-backdrop-filter: blur(var(--glass-blur-light));
border-right: 1px solid var(--glass-border);
}
.sidebar-offcanvas .offcanvas-header {
border-bottom: 1px solid var(--color-border);
padding: var(--space-lg);
}
.sidebar-section {
padding: var(--space-lg);
border-bottom: 1px solid var(--color-border);
}
.sidebar-section:last-child {
border-bottom: none;
}
.sidebar-section-title {
font-family: var(--font-base);
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: var(--space-md);
}
/* ---------------------------------------------------------------------------
3.3. HERO SECTION
--------------------------------------------------------------------------- */
.hero-section {
background-color: var(--color-bg-alt);
background-image:
radial-gradient(
ellipse 70% 60% at 20% 40%,
rgba(var(--color-primary-rgb), 0.06) 0%,
transparent 70%
),
radial-gradient(
ellipse 60% 50% at 80% 60%,
rgba(var(--color-accent-rgb), 0.04) 0%,
transparent 70%
);
border-bottom: 1px solid var(--color-border);
padding: var(--space-3xl) 0;
}
.hero-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
letter-spacing: -0.02em;
margin-bottom: var(--space-md);
}
.hero-title .text-accent {
color: var(--color-accent);
}
.hero-subtitle {
color: var(--color-text-secondary);
font-size: var(--text-lg);
max-width: 560px;
line-height: 1.7;
}
.stat-card {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur-light));
-webkit-backdrop-filter: blur(var(--glass-blur-light));
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
}
.stat-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-base);
font-size: 1.25rem;
flex-shrink: 0;
animation: icon-pulse var(--animation-pulse);
}
@keyframes icon-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.stat-icon--books {
background-color: var(--color-primary-subtle);
color: var(--color-primary);
}
.stat-icon--groups {
background-color: var(--color-accent-subtle);
color: var(--color-accent);
}
.stat-icon--tags {
background-color: var(--color-success-subtle);
color: var(--color-success);
}
.stat-number {
font-family: var(--font-headings);
font-weight: 700;
font-size: var(--text-xl);
line-height: 1;
color: var(--color-text);
}
.stat-label {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* ---------------------------------------------------------------------------
3.4. FOOTER
--------------------------------------------------------------------------- */
.thin-footer {
background-color: var(--color-gray-900);
color: var(--color-gray-400);
padding: var(--space-lg) 0;
font-size: var(--text-sm);
}
.thin-footer a {
color: var(--color-gray-400);
}
.thin-footer a:hover {
color: var(--color-white);
}
/* ===========================================================================
4. COMPONENTS
=========================================================================== */
/* ---------------------------------------------------------------------------
4.1. BOOK CARDS
--------------------------------------------------------------------------- */
.card-book {
position: relative;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-bg-surface);
transition: transform var(--transition-base),
box-shadow var(--transition-base);
}
.card-book .card-body {
display: flex;
flex-direction: column;
height: 100%;
}
.card-book:hover {
transform: translateY(-4px) scale(1.01);
box-shadow: var(--shadow-md),
0 4px 20px var(--glow-primary-soft);
}
/* ---- Cover link wrapper (clips overlay) ---- */
.book-cover-link {
position: relative;
display: block;
overflow: hidden;
border-radius: var(--radius-lg);
}
/* ---- Cover area ---- */
.book-cover {
aspect-ratio: 4 / 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md);
position: relative;
}
.book-cover::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 80% 60% at 30% 20%,
rgba(255, 255, 255, 0.15) 0%,
transparent 60%
);
pointer-events: none;
}
/* ---- Cover title (no-image books) ---- */
.book-cover-title {
font-family: var(--font-headings);
font-weight: 700;
font-size: clamp(0.95rem, 1.3vw, 1.25rem);
line-height: 1.35;
color: var(--cover-fg, var(--color-white));
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
position: relative;
z-index: 1;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.book-cover-card-icon {
position: relative;
z-index: 1;
color: var(--cover-fg, var(--color-white));
font-size: clamp(1.4rem, 2vw, 2rem);
line-height: 1;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
/* Cover icon (book-detail page) */
.book-cover > .bi:not(.book-cover-card-icon) {
font-size: 2.5rem;
color: var(--cover-fg, var(--color-white));
position: relative;
z-index: 1;
}
/* Light covers: dark text, no text shadow */
.book-cover--light {
--cover-fg: rgba(0, 0, 0, .75);
}
.book-cover--light .book-cover-title {
text-shadow: none;
}
.book-cover--light .book-cover-card-icon {
text-shadow: none;
}
/* ---- Cover color gradients ---- */
.book-cover--indigo {
background: linear-gradient(
135deg, var(--color-primary) 0%,
var(--color-primary-dark) 100%
);
}
.book-cover--amber {
background: linear-gradient(
135deg, var(--color-accent-light) 0%,
var(--color-accent) 100%
);
}
.book-cover--teal {
background: linear-gradient(
135deg, var(--color-teal) 0%,
var(--color-success) 100%
);
}
.book-cover--rose {
background: linear-gradient(
135deg, var(--color-rose) 0%,
var(--color-rose-dark) 100%
);
}
.book-cover--emerald {
background: linear-gradient(
135deg, var(--color-emerald) 0%,
var(--color-success) 100%
);
}
.book-cover--slate {
background: linear-gradient(
135deg, var(--color-gray-500) 0%,
var(--color-gray-600) 100%
);
}
.book-cover--purple {
background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%);
}
.book-cover--blue {
background: linear-gradient(135deg, #60A5FA 0%, #2563EB 100%);
}
.book-cover--coral {
background: linear-gradient(135deg, #FB923C 0%, #EA580C 100%);
}
.book-cover--wine {
background: linear-gradient(135deg, #BE185D 0%, #881337 100%);
}
/* ---- Cover image ---- */
.book-cover--image {
padding: 0;
overflow: hidden;
background: var(--color-gray-100);
}
.book-cover--image::after {
display: none;
}
.book-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: filter var(--transition-base);
}
.card-book:hover .book-cover-img {
filter: brightness(0.75);
}
/* ---- Import source badge ---- */
.book-format {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
z-index: 3;
font-size: var(--text-xs);
font-weight: 500;
padding: 2px 8px;
border-radius: var(--radius-sm);
background-color: rgba(0, 0, 0, 0.35);
color: var(--color-white);
}
.book-shared-badge {
position: absolute;
bottom: var(--space-sm);
right: var(--space-sm);
z-index: 3;
font-size: var(--text-xs);
line-height: 1;
padding: 4px 5px;
border-radius: var(--radius-sm);
background-color: rgba(0, 0, 0, 0.35);
color: var(--color-white);
}
.book-shortcut-badge {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
z-index: 3;
font-size: var(--text-xs);
line-height: 1;
padding: 3px 4px;
border-radius: var(--radius-sm);
background-color: rgba(0, 0, 0, 0.30);
color: var(--color-white);
}
/* Shared card meta footer (below cover) */
.shared-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: var(--space-xs) var(--space-sm) var(--space-sm);
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.shared-card-owner {
display: flex;
align-items: center;
gap: var(--space-xs);
font-weight: 500;
color: var(--color-text-secondary);
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.shared-card-owner .bi {
flex-shrink: 0;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.shared-card-role {
flex-shrink: 0;
font-size: var(--text-xs);
font-weight: 500;
color: var(--color-text-muted);
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 1px 6px;
text-transform: capitalize;
}
.shared-card-meta--owner {
color: var(--color-text-secondary);
}
.shared-card-meta--owner .bi {
font-size: 0.85rem;
color: var(--color-text-muted);
}
.shared-card-manage {
flex-shrink: 0;
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
.shared-card-manage:hover {
color: var(--color-primary-dark);
text-decoration: underline;
}
.book-lang-flag {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
z-index: 3;
font-size: 1.1rem;
line-height: 1;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
pointer-events: none;
}
/* ---- Hover overlay ---- */
.book-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
padding: var(--space-md);
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.72) 0%,
rgba(0, 0, 0, 0.35) 70%,
transparent 100%
);
transform: translateY(100%);
transition: transform var(--transition-base);
}
.card-book:hover .book-overlay {
transform: translateY(0);
}
/* Dim gradient covers on hover too */
.card-book:hover .book-cover:not(.book-cover--image)::after {
background: rgba(0, 0, 0, 0.18);
}
.book-overlay__row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.9);
}
.book-overlay__row .bi {
margin-right: 4px;
}
.book-overlay__year {
color: rgba(255, 255, 255, 0.6);
}
/* ---- Card body (title + author) ---- */
.book-body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-sm) var(--space-md) var(--space-md);
height: 70px;
overflow: hidden;
text-align: center;
}
.book-title {
font-family: var(--font-headings);
font-weight: 700;
font-size: var(--text-sm);
margin-bottom: 0;
line-height: 1.3;
width: 100%;
max-width: 100%;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.book-title a {
color: var(--color-text);
display: inline;
max-width: 100%;
text-decoration: none;
}
.book-title a:hover {
color: var(--color-primary);
}
.book-author {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: 2px;
margin-bottom: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.book-title-tooltip .tooltip-inner {
max-width: 280px;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-lg);
background: var(--color-text);
color: var(--color-bg-surface);
font-size: var(--text-sm);
line-height: 1.35;
box-shadow: var(--shadow-md);
}
.book-title-tooltip.bs-tooltip-top .tooltip-arrow::before {
border-top-color: var(--color-text);
}
.book-title-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
border-bottom-color: var(--color-text);
}
.book-title-tooltip.bs-tooltip-start .tooltip-arrow::before {
border-left-color: var(--color-text);
}
.book-title-tooltip.bs-tooltip-end .tooltip-arrow::before {
border-right-color: var(--color-text);
}
/* ---- Move to group button ---- */
.book-move-wrap {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
z-index: 4;
}
.book-move-btn {
width: 28px;
height: 28px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--color-border);
background: var(--color-bg-surface);
color: var(--color-text-muted);
font-size: var(--text-xs);
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-fast),
background-color var(--transition-fast);
cursor: pointer;
}
.card-book:hover .book-move-btn,
.book-move-wrap:focus-within .book-move-btn {
opacity: 1;
pointer-events: auto;
}
.book-move-btn:hover {
background-color: var(--color-bg-alt);
color: var(--color-text);
border-color: var(--color-border-dark);
}
.book-group-menu {
min-width: 220px;
}
.book-group-menu__header {
padding: var(--space-sm) var(--space-md) var(--space-xs);
}
.book-group-menu__title {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-sm);
font-weight: 700;
color: var(--color-text);
}
.book-group-menu__title .bi {
color: var(--color-primary);
font-size: var(--text-base);
}
.book-group-menu__subtitle {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: 2px;
}
.book-group-menu__search {
position: relative;
display: flex;
align-items: center;
}
.book-group-menu__search-icon {
position: absolute;
left: 9px;
color: var(--color-text-muted);
font-size: 0.75rem;
pointer-events: none;
}
.book-group-menu__search-input {
width: 100%;
padding: 5px 10px 5px 28px;
font-size: var(--text-xs);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
background: var(--color-bg-alt);
color: var(--color-text);
outline: none;
transition: border-color var(--transition-fast),
background var(--transition-fast);
}
.book-group-menu__search-input:focus {
border-color: var(--color-primary);
background: var(--color-bg-surface);
}
/* ---- Progress bar (used inside overlay) ---- */
.book-progress {
height: 3px;
border-radius: 2px;
background-color: rgba(255, 255, 255, 0.2);
overflow: hidden;
margin: var(--space-xs) 0;
}
.book-progress-bar {
height: 100%;
border-radius: 2px;
background: var(--color-primary-light);
transition: width var(--transition-base);
}
.book-progress-bar--complete {
background: var(--color-success);
}
/* -- Book detail: contributors widget -------------------------------------- */
.btn-link-sm {
font-size: var(--text-sm);
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
}
.btn-link-sm:hover {
text-decoration: underline;
}
.contributors-avatars {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.contributors-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--color-bg);
flex-shrink: 0;
position: relative;
}
.contributors-avatar:not(:first-child) {
margin-left: -8px;
}
.contributors-avatar__img {
width: 36px;
height: 36px;
object-fit: cover;
border-radius: 50%;
}
.contributors-avatar__fallback {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 700;
color: #fff;
}
.contributors-avatar--more {
background: var(--color-bg-alt);
border: 2px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.65rem;
font-weight: 700;
color: var(--color-text-secondary);
}
/* ---------------------------------------------------------------------------
4.2. FILTER BAR
--------------------------------------------------------------------------- */
.filter-bar {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: var(--space-lg);
margin-bottom: var(--space-xl);
overflow: visible;
position: relative;
z-index: 2;
}
.filter-search-wrap {
position: relative;
flex: 1 1 0;
min-width: 0;
}
.filter-search-icon {
position: absolute;
left: var(--space-md);
top: 50%;
transform: translateY(-50%);
color: var(--color-text-muted);
pointer-events: none;
font-size: var(--text-sm);
}
.filter-search {
width: 100%;
padding-left: 2.5rem;
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
font-size: var(--text-sm);
height: 40px;
transition: border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
.filter-search:focus {
background-color: var(--color-bg-surface);
border-color: var(--color-primary-light);
box-shadow: var(--focus-ring-shadow);
}
.filter-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-sm);
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-pill);
border: 1px solid var(--color-border);
background-color: transparent;
color: var(--color-text-secondary);
transition: all var(--transition-fast);
white-space: nowrap;
cursor: pointer;
text-decoration: none;
}
.filter-btn .badge {
font-size: var(--text-xs);
}
.filter-btn:hover {
background-color: var(--color-bg-alt);
color: var(--color-text);
border-color: var(--color-border-dark);
}
.filter-btn.active {
background-color: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
transform: scale(1.02);
}
.filter-btn--more {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--color-primary);
border-color: var(--color-primary-subtle);
background: var(--color-primary-subtle);
}
.filter-btn--more:hover {
background: var(--color-primary-tint-15);
border-color: var(--color-primary);
color: var(--color-primary);
}
/* Tag picker modal */
.tag-picker-dialog {
max-width: min(620px, calc(100vw - 32px));
}
.tag-picker-modal {
border-radius: 16px;
overflow: hidden;
border: none;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.tag-picker-modal__header {
padding: var(--space-lg) var(--space-lg) var(--space-md);
background: var(--color-bg-surface);
border-bottom: 1px solid var(--color-border);
}
.tag-picker-modal__title {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--text-base);
font-weight: 700;
color: var(--color-text);
margin-bottom: 2px;
}
.tag-picker-modal__title .bi {
color: var(--color-primary);
font-size: 1.1rem;
}
.tag-picker-modal__sub {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin: 0 0 var(--space-sm);
}
.tag-picker-modal__search {
position: relative;
display: flex;
align-items: center;
}
.tag-picker-modal__search .bi {
position: absolute;
left: 10px;
color: var(--color-text-muted);
font-size: 0.75rem;
pointer-events: none;
}
.tag-picker-modal__search-input {
width: 100%;
padding: 7px 12px 7px 30px;
font-size: var(--text-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-bg-alt);
color: var(--color-text);
outline: none;
transition: border-color var(--transition-fast);
}
.tag-picker-modal__search-input:focus {
border-color: var(--color-primary);
background: var(--color-bg-surface);
}
.tag-picker-modal__body {
padding: var(--space-md) var(--space-lg) var(--space-lg);
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
background: var(--color-bg-surface);
max-height: 320px;
overflow-y: auto;
}
.tag-picker-modal__empty {
width: 100%;
text-align: center;
color: var(--color-text-muted);
font-size: var(--text-sm);
padding: var(--space-md) 0 0;
margin: 0;
}
/* ---------------------------------------------------------------------------
4.3. TAG BADGES
--------------------------------------------------------------------------- */
.tag-badge {
font-size: var(--text-xs);
font-weight: 500;
padding: 2px 8px;
border-radius: var(--radius-pill);
background-color: var(--color-primary-subtle);
color: var(--color-primary);
transition: transform var(--transition-fast),
box-shadow var(--transition-glow);
}
a.tag-badge:hover {
transform: scale(1.05);
box-shadow: 0 0 8px var(--glow-primary-soft);
}
/* ---------------------------------------------------------------------------
4.4. EMPTY STATE
--------------------------------------------------------------------------- */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
text-align: center;
padding: var(--space-3xl) var(--space-xl);
}
.empty-state--compact {
padding: var(--space-xl) 0;
}
.empty-state-icon {
font-size: 3rem;
color: var(--color-gray-300);
margin-bottom: var(--space-lg);
opacity: 0.5;
}
.empty-state-title {
font-family: var(--font-headings);
color: var(--color-text-secondary);
margin-bottom: var(--space-sm);
font-size: var(--text-base);
font-weight: 600;
}
.empty-state-text {
color: var(--color-text-muted);
margin-bottom: var(--space-lg);
font-size: var(--text-sm);
}
/* ---------------------------------------------------------------------------
4.5. BUTTONS (Bootstrap overrides for brand colors)
--------------------------------------------------------------------------- */
.btn-primary {
--bs-btn-bg: var(--color-primary);
--bs-btn-border-color: var(--color-primary);
--bs-btn-hover-bg: var(--color-primary-dark);
--bs-btn-hover-border-color: var(--color-primary-dark);
--bs-btn-active-bg: var(--color-primary-dark);
--bs-btn-active-border-color: var(--color-primary-dark);
--bs-btn-disabled-bg: var(--color-primary);
--bs-btn-disabled-border-color: var(--color-primary);
transition: box-shadow var(--transition-glow);
}
.btn-primary:hover {
box-shadow: 0 4px 16px var(--glow-primary),
0 0 0 3px var(--glow-primary-soft);
}
.btn-outline-secondary {
--bs-btn-color: var(--color-text-secondary);
--bs-btn-border-color: var(--color-border);
--bs-btn-hover-bg: var(--color-bg-alt);
--bs-btn-hover-color: var(--color-text);
--bs-btn-hover-border-color: var(--color-border-dark);
}
/* ---------------------------------------------------------------------------
4.6. STYLED DROPDOWNS
--------------------------------------------------------------------------- */
.dropdown-item .bi {
width: 1.25rem;
text-align: center;
flex-shrink: 0;
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: var(--color-primary-subtle);
color: var(--color-primary-dark);
}
.dropdown-item.active,
.dropdown-item:active {
background-color: var(--color-primary);
color: var(--color-white);
}
/* ---------------------------------------------------------------------------
4.7. AVATARS
--------------------------------------------------------------------------- */
/* Set on ![]()
directly */
.avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
display: block;
}
.avatar-sm { width: 36px; height: 36px; }
.avatar-lg { width: 48px; height: 48px; }
.avatar-xl { width: 64px; height: 64px; }
/* Initials fallback div */
.avatar-fallback {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
line-height: 1;
}
.avatar-fallback.avatar-sm { width: 36px; height: 36px; font-size: 0.85rem; }
.avatar-fallback.avatar-lg { width: 48px; height: 48px; font-size: 1.2rem; }
.avatar-fallback.avatar-xl { width: 64px; height: 64px; font-size: 1.6rem; }
/* ---------------------------------------------------------------------------
4.8. COUNT BADGE
--------------------------------------------------------------------------- */
/* Inline numeric count (unread messages, pending requests, etc.) */
.count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
background: var(--color-primary);
color: #fff;
border-radius: var(--radius-pill);
font-size: 0.72rem;
font-weight: 700;
vertical-align: middle;
line-height: 1;
}
/* ---------------------------------------------------------------------------
4.9. SECTION TITLE
--------------------------------------------------------------------------- */
/* Uppercase label above a group of items */
.section-title {
font-size: var(--text-base);
font-weight: 700;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 var(--space-md);
}
/* ===========================================================================
5. LANDING PAGE
=========================================================================== */
/* ---------------------------------------------------------------------------
5.1. LANDING NAVBAR
--------------------------------------------------------------------------- */
.navbar-landing {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border-bottom: 1px solid var(--glass-border);
min-height: var(--navbar-height);
z-index: 1020;
}
.navbar-landing .navbar-brand {
font-family: var(--font-headings);
font-weight: 700;
color: var(--color-text);
font-size: var(--text-xl);
gap: var(--space-sm);
}
.navbar-landing .navbar-brand:hover {
color: var(--color-primary);
}
.navbar-landing .navbar-brand .bi-book-half {
color: var(--color-primary);
font-size: 1.4rem;
transition: filter var(--transition-glow);
}
.navbar-landing .navbar-brand:hover .bi-book-half {
filter: drop-shadow(0 0 6px var(--glow-primary));
}
.navbar-landing .navbar-toggler {
padding: var(--space-xs) var(--space-sm);
font-size: var(--text-base);
border: none;
}
.navbar-landing .navbar-toggler:focus {
box-shadow: none;
outline: none;
}
.navbar-landing .nav-link {
color: var(--color-text-secondary);
font-weight: 500;
font-size: var(--text-sm);
white-space: nowrap;
padding: var(--space-sm) var(--space-md) !important;
transition: color var(--transition-fast);
}
.navbar-landing .nav-link:hover {
color: var(--color-primary);
}
.btn-lang-landing {
width: 36px;
height: 36px;
padding: 0;
margin-left: var(--space-sm);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: none;
background: transparent;
color: var(--color-text-secondary);
font-size: var(--text-sm);
font-weight: 600;
cursor: pointer;
letter-spacing: 0.02em;
transition: color var(--transition-fast), background var(--transition-fast);
}
.btn-lang-landing:hover {
color: var(--color-primary);
background: var(--color-primary-subtle);
}
/* Hide offcanvas on desktop */
@media (min-width: 992px) {
.app-offcanvas {
display: none !important;
}
}
@media (max-width: 991.98px) {
.navbar-landing,
.navbar-vohly {
background: var(--color-bg-surface) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.landing-offcanvas {
max-width: 300px;
border-left: 1px solid var(--color-border);
background-color: var(--color-bg-surface) !important;
z-index: 1055 !important;
}
.landing-offcanvas * {
box-shadow: none !important;
}
.landing-offcanvas .offcanvas-header {
border-bottom: none;
padding: var(--space-lg);
background-color: var(--color-bg-surface) !important;
}
.landing-offcanvas .offcanvas-title {
font-family: var(--font-headings);
font-weight: 700;
font-size: 1.5rem;
color: var(--color-primary);
}
.landing-offcanvas .text-accent {
color: var(--color-primary) !important;
font-size: 1.75rem;
}
.landing-offcanvas .offcanvas-body {
padding: var(--space-lg);
background-color: var(--color-bg-surface) !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: var(--space-lg) !important;
}
.landing-offcanvas .offcanvas-body > * {
margin-top: 0 !important;
}
.landing-offcanvas .navbar-nav {
background-color: transparent !important;
margin-left: 0 !important;
margin-right: 0 !important;
gap: 0 !important;
padding: var(--space-sm) 0;
}
.landing-offcanvas .nav-item {
background-color: transparent !important;
}
.landing-offcanvas .nav-link {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg) !important;
border-radius: var(--radius-lg);
color: var(--color-text);
font-weight: 500;
font-size: 1rem;
transition: all var(--transition-fast);
background-color: transparent !important;
margin-bottom: var(--space-xs);
}
.landing-offcanvas .nav-link:hover {
background-color: var(--color-primary-subtle);
color: var(--color-primary-dark);
transform: translateX(4px);
}
.landing-offcanvas .nav-link .bi {
font-size: 1.25rem;
width: 1.75rem;
text-align: center;
color: var(--color-primary);
transition: all var(--transition-fast);
flex-shrink: 0;
}
.landing-offcanvas .nav-link:hover .bi {
color: var(--color-primary-dark);
transform: scale(1.1);
}
.landing-offcanvas .btn-primary {
padding: var(--space-sm) var(--space-lg);
font-size: 0.9375rem;
font-weight: 600;
border-radius: var(--radius-pill);
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}
.landing-offcanvas .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.4);
}
/* App offcanvas (authenticated pages) */
.app-offcanvas {
max-width: 300px;
border-left: 1px solid var(--color-border);
background-color: var(--color-bg-surface) !important;
z-index: 1055 !important;
}
.app-offcanvas * {
box-shadow: none !important;
}
.app-offcanvas .offcanvas-header {
border-bottom: none;
padding: var(--space-lg);
background-color: var(--color-bg-surface) !important;
}
.app-offcanvas .offcanvas-title {
font-family: var(--font-headings);
font-weight: 700;
font-size: 1.5rem;
color: var(--color-primary);
}
.app-offcanvas .text-accent {
color: var(--color-primary) !important;
font-size: 1.75rem;
}
.app-offcanvas .offcanvas-body {
padding: var(--space-lg);
background-color: var(--color-bg-surface) !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: var(--space-lg) !important;
}
.app-offcanvas .offcanvas-body > * {
margin-top: 0 !important;
}
.app-offcanvas .navbar-nav {
background-color: transparent !important;
margin-left: 0 !important;
margin-right: 0 !important;
gap: 0 !important;
padding: var(--space-sm) 0;
}
.app-offcanvas .nav-item {
background-color: transparent !important;
}
.app-offcanvas .nav-link {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg) !important;
border-radius: var(--radius-lg);
color: var(--color-text);
font-weight: 500;
font-size: 1rem;
transition: all var(--transition-fast);
background-color: transparent !important;
margin-bottom: var(--space-xs);
}
.app-offcanvas .nav-link:hover {
background-color: var(--color-primary-subtle);
color: var(--color-primary-dark);
transform: translateX(4px);
}
.app-offcanvas .nav-link .bi {
font-size: 1.25rem;
width: 1.75rem;
text-align: center;
color: var(--color-primary);
transition: all var(--transition-fast);
flex-shrink: 0;
}
.app-offcanvas .nav-link:hover .bi {
color: var(--color-primary-dark);
transform: scale(1.1);
}
.app-offcanvas .btn-primary {
padding: var(--space-sm) var(--space-lg);
font-size: 0.9375rem;
font-weight: 600;
border-radius: var(--radius-pill);
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}
.app-offcanvas .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.4);
}
.app-offcanvas .btn-outline-secondary {
padding: var(--space-sm) var(--space-lg);
font-size: 0.9375rem;
font-weight: 600;
border-radius: var(--radius-pill);
}
}
/* ---------------------------------------------------------------------------
5.2. LANDING HERO
--------------------------------------------------------------------------- */
.hero-landing {
background-color: var(--color-bg-alt);
background-image:
radial-gradient(
ellipse 80% 60% at 15% 30%,
rgba(var(--color-primary-rgb), 0.08) 0%,
transparent 70%
),
radial-gradient(
ellipse 60% 50% at 85% 70%,
rgba(var(--color-accent-rgb), 0.06) 0%,
transparent 70%
),
radial-gradient(
ellipse 50% 40% at 50% 90%,
rgba(var(--color-success-rgb), 0.04) 0%,
transparent 70%
);
border-bottom: 1px solid var(--color-border);
min-height: calc(100vh - var(--navbar-height));
display: flex;
align-items: center;
padding: var(--space-3xl) 0;
position: relative;
overflow: hidden;
}
.hero-landing > .container {
position: relative;
z-index: 1;
}
.hero-floating {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.hero-float-icon {
position: absolute;
left: var(--x);
top: var(--y);
font-size: var(--size, 2rem);
color: var(--color-primary);
opacity: 0.07;
animation: hero-float 6s ease-in-out infinite;
animation-delay: var(--delay, 0s);
}
@keyframes hero-float {
0%, 100% {
transform: translateY(0) rotate(0deg);
opacity: 0.07;
}
50% {
transform: translateY(-12px) rotate(5deg);
opacity: 0.12;
}
}
.hero-landing-title {
font-size: clamp(2rem, 5vw, 3rem);
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: var(--space-lg);
}
.hero-landing-title .text-accent {
color: var(--color-accent);
}
.hero-landing-subtitle {
color: var(--color-text-secondary);
font-size: var(--text-lg);
line-height: 1.7;
max-width: 540px;
margin-bottom: var(--space-xl);
}
.hero-library-btn {
font-size: var(--text-base);
}
.hero-mockup {
background-color: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
overflow: hidden;
animation: mockup-float 8s ease-in-out infinite;
}
@keyframes mockup-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.hero-mockup-header {
display: flex;
gap: 6px;
padding: var(--space-sm) var(--space-md);
background-color: var(--color-gray-100);
border-bottom: 1px solid var(--color-border);
}
.hero-mockup-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--color-gray-300);
}
.hero-mockup-body {
display: flex;
min-height: 240px;
}
.hero-mockup-sidebar {
width: 30%;
padding: var(--space-md);
border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.hero-mockup-content {
flex: 1;
padding: var(--space-lg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
background: linear-gradient(
135deg,
var(--color-gray-50) 0%,
var(--color-primary-subtle) 100%
);
}
.hero-mockup-content .bi {
font-size: 2.5rem;
color: var(--color-primary-light);
margin-bottom: var(--space-sm);
}
.hero-mockup-line {
height: 8px;
border-radius: 4px;
background-color: var(--color-gray-200);
width: 100%;
}
.hero-mockup-line--short { width: 60%; }
.hero-mockup-line--medium { width: 75%; }
.hero-mockup-line--wide { width: 90%; }
/* ---------------------------------------------------------------------------
5.3 - 5.8: Additional landing sections
--------------------------------------------------------------------------- */
.feature-card {
padding: var(--space-xl);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-bg-surface);
transition: transform var(--transition-base),
box-shadow var(--transition-base);
}
.feature-card:hover {
transform: translateY(-4px) scale(1.01);
box-shadow: var(--shadow-md),
0 4px 20px var(--glow-primary-soft);
}
.feature-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 1.25rem;
transition: box-shadow var(--transition-glow);
}
.feature-icon--primary {
background-color: var(--color-primary-subtle);
color: var(--color-primary);
}
.feature-icon--accent {
background-color: var(--color-accent-subtle);
color: var(--color-accent);
}
.feature-icon--success {
background-color: var(--color-success-subtle);
color: var(--color-success);
}
.feature-icon--warning {
background-color: var(--color-warning-subtle);
color: var(--color-warning);
}
.feature-card:hover .feature-icon--primary {
box-shadow: 0 0 12px var(--glow-primary-soft);
}
.feature-card:hover .feature-icon--accent {
box-shadow: 0 0 12px var(--glow-accent-soft);
}
.feature-card:hover .feature-icon--success {
box-shadow: 0 0 12px var(--glow-success-soft);
}
.feature-card:hover .feature-icon--warning {
box-shadow: 0 0 12px rgba(var(--color-warning-rgb), 0.15);
}
/* ---------------------------------------------------------------------------
5.4. HOW IT WORKS
--------------------------------------------------------------------------- */
.step-card {
padding: var(--space-xl);
}
.step-number {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--color-primary);
color: var(--color-white);
font-family: var(--font-headings);
font-weight: 700;
font-size: var(--text-xl);
margin-bottom: var(--space-md);
box-shadow: 0 0 0 6px var(--glow-primary-soft);
transition: box-shadow var(--transition-glow);
}
.step-card:hover .step-number {
box-shadow: 0 0 0 8px var(--glow-primary-soft),
0 0 20px var(--glow-primary);
}
.step-icon {
font-size: 1.75rem;
color: var(--color-primary-light);
}
/* ---------------------------------------------------------------------------
5.5. PRICING
--------------------------------------------------------------------------- */
#pricing {
background-image:
radial-gradient(
ellipse 60% 50% at 10% 50%,
rgba(var(--color-primary-rgb), 0.04) 0%,
transparent 70%
),
radial-gradient(
ellipse 50% 40% at 90% 50%,
rgba(var(--color-accent-rgb), 0.03) 0%,
transparent 70%
);
}
.card-pricing {
padding: var(--space-xl);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xl);
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur-light));
-webkit-backdrop-filter: blur(var(--glass-blur-light));
position: relative;
display: flex;
flex-direction: column;
}
.card-pricing--featured {
border-color: var(--color-primary);
border-width: 2px;
background: var(--glass-bg-light);
box-shadow: var(--shadow-md),
0 0 20px var(--glow-primary-soft);
}
.card-pricing-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background-color: var(--color-primary);
color: var(--color-white);
font-size: var(--text-xs);
font-weight: 600;
padding: 4px 16px;
border-radius: var(--radius-pill);
white-space: nowrap;
}
.card-pricing-header {
text-align: center;
padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-lg);
}
.pricing-amount {
font-family: var(--font-headings);
font-weight: 700;
font-size: 2.5rem;
color: var(--color-text);
line-height: 1;
margin-top: var(--space-sm);
}
.pricing-period {
font-family: var(--font-base);
font-size: var(--text-sm);
font-weight: 400;
color: var(--color-text-muted);
}
.pricing-amount--heart {
font-size: 2rem;
color: var(--color-danger, #dc3545);
}
.card-pricing-features {
list-style: none;
padding: 0;
margin: 0 0 var(--space-xl);
flex-grow: 1;
}
.card-pricing-features li {
padding: var(--space-sm) 0;
color: var(--color-text-secondary);
font-size: var(--text-sm);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.card-pricing-features .bi-check-lg {
color: var(--color-success);
font-size: var(--text-lg);
flex-shrink: 0;
}
.pricing-cta {
align-self: center;
width: 50%;
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
padding-top: 11px;
padding-bottom: 11px;
}
/* ---------------------------------------------------------------------------
5.6. FAQ
--------------------------------------------------------------------------- */
.faq-card {
background-color: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-base);
}
.faq-card[open] {
border-color: var(--color-primary-light);
box-shadow: var(--shadow-base),
0 0 12px var(--glow-primary-soft);
}
.faq-card-question {
padding: var(--space-lg) var(--space-xl);
font-weight: 500;
color: var(--color-text);
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}
.faq-card-question::-webkit-details-marker {
display: none;
}
.faq-card-question::after {
content: '\F282';
font-family: 'bootstrap-icons';
font-size: var(--text-sm);
color: var(--color-text-muted);
transition: transform var(--transition-base);
flex-shrink: 0;
}
.faq-card[open] > .faq-card-question::after {
transform: rotate(180deg);
}
.faq-card[open] > .faq-card-question {
color: var(--color-primary);
}
.faq-card-answer {
padding: 0 var(--space-xl) var(--space-lg);
margin: 0;
color: var(--color-text-secondary);
line-height: 1.7;
}
.cta-banner {
background:
radial-gradient(
ellipse 50% 80% at 10% 50%,
rgba(255, 255, 255, 0.1) 0%,
transparent 70%
),
radial-gradient(
ellipse 40% 60% at 90% 50%,
rgba(var(--color-accent-rgb), 0.15) 0%,
transparent 70%
),
linear-gradient(
135deg,
var(--color-primary) 0%,
var(--color-primary-dark) 100%
);
padding: var(--space-3xl) 0;
}
.cta-banner h2 {
text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}
.footer-landing {
background-color: var(--color-gray-900);
color: var(--color-gray-400);
padding: var(--space-xl) 0 var(--space-lg);
font-size: var(--text-sm);
}
.footer-landing-brand {
font-size: 1.05rem;
font-weight: 400;
color: var(--color-white);
margin-left: 0.25rem;
}
.brand-icon {
color: var(--color-primary);
font-size: 1.1em;
}
.footer-landing-heading {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.footer-landing-links {
margin: 0;
}
.footer-landing-links li {
margin-bottom: 0.5rem;
}
.footer-landing-links a {
color: var(--color-gray-400);
text-decoration: none;
transition: color 0.15s;
}
.footer-landing-links a:hover {
color: var(--color-primary);
}
.footer-landing-bottom {
color: var(--color-gray-600);
font-size: var(--text-xs);
}
/* ===========================================================================
7. APP PAGES
=========================================================================== */
/* ---------------------------------------------------------------------------
7.1. CONTENT CARDS
--------------------------------------------------------------------------- */
.content-card {
background-color: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-xl);
}
.content-card--danger {
border-color: var(--color-danger);
border-style: dashed;
}
.content-card--primary {
border-color: var(--color-primary);
border-style: dashed;
}
.info-tile {
padding: var(--space-md);
background: var(--color-bg-alt);
border-radius: var(--radius-base);
}
.info-tile__label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
margin-bottom: 2px;
}
.info-tile__value {
font-size: var(--text-base);
color: var(--color-text);
}
.profile-avatar {
width: 120px;
height: 120px;
display: flex;
align-items: flex-end;
justify-content: center;
border-radius: 50%;
overflow: hidden;
background: var(--color-bg-alt);
color: var(--color-text-muted);
font-size: 5.5rem;
}
/* Avatar upload panel (profile edit) */
.avatar-upload {
display: flex;
align-items: center;
gap: var(--space-xl);
flex-wrap: wrap;
}
.avatar-upload__preview {
flex-shrink: 0;
width: 88px;
height: 88px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--color-border);
background: var(--color-bg-alt);
line-height: 0;
}
.avatar-upload__no-avatar {
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
height: 100%;
font-size: 4.25rem;
color: var(--color-text-muted);
line-height: 1;
}
.avatar-upload__preview img {
width: 88px;
height: 88px;
object-fit: cover;
display: block;
}
.avatar-upload__controls {
flex: 1;
min-width: 180px;
}
.avatar-upload__hint {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: var(--space-xs);
margin-bottom: 0;
}
.avatar-upload__btn-row {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
}
.avatar-upload__file-input {
display: none;
}
/* ---------------------------------------------------------------------------
7.2. BOOK VIEW
--------------------------------------------------------------------------- */
.book-format-badge {
display: inline-block;
font-size: var(--text-xs);
font-weight: 600;
padding: 3px 10px;
border-radius: var(--radius-sm);
background-color: var(--color-gray-800);
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.info-list {
margin: 0;
}
.info-list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--color-border);
}
.info-list-item:first-of-type {
padding-top: 0;
}
.info-list-item dt {
font-weight: 500;
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.info-list-item dd {
margin-bottom: 0;
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text);
}
.toc-list {
padding-left: var(--space-lg);
margin-bottom: 0;
}
.toc-list li {
padding: var(--space-xs) 0;
color: var(--color-text-secondary);
font-size: var(--text-sm);
}
.toc-list li::marker {
color: var(--color-primary);
font-weight: 600;
}
.comment-item {
display: flex;
gap: var(--space-md);
padding: var(--space-lg) 0;
border-bottom: 1px solid var(--color-border);
}
.comment-item:first-child { padding-top: 0; }
.comment-item:last-child { border-bottom: none; padding-bottom: 0; }
.comment-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--color-primary-subtle);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-lg);
flex-shrink: 0;
}
/* ---------------------------------------------------------------------------
7.3. READER
--------------------------------------------------------------------------- */
.reader-content {
background-color: var(--color-bg-surface);
}
.reader-chapter-title {
font-size: clamp(1.5rem, 3.5vw, 2rem);
letter-spacing: -0.01em;
}
.reader-section-title {
font-size: clamp(1.2rem, 2.5vw, 1.5rem);
}
.reader-content p {
font-size: var(--text-lg);
line-height: 1.8;
color: var(--color-text-secondary);
margin-bottom: var(--space-lg);
}
.reader-nav {
border-color: var(--color-border) !important;
}
/* ---------------------------------------------------------------------------
7.6. SETTINGS
--------------------------------------------------------------------------- */
.settings-toggle {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-lg);
padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--color-border);
}
.settings-toggle:last-of-type {
border-bottom: none;
padding-bottom: 0;
}
.settings-toggle .form-check-input {
width: 3em;
height: 1.5em;
margin-top: 0.15em;
flex-shrink: 0;
}
.settings-toggle .form-check-input:checked {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
/* ---- API key cards ---- */
.api-key-card__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-lg);
}
.api-key-card__title {
display: flex;
align-items: center;
gap: var(--space-md);
}
.api-key-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-lg);
font-size: 1.25rem;
flex-shrink: 0;
}
.api-key-card__icon--openai {
background: rgba(16, 163, 127, 0.12);
color: #10A37F;
}
.api-key-card__icon--gcloud {
background: rgba(66, 133, 244, 0.12);
color: #4285F4;
}
.api-key-card__icon--eleven {
background: var(--color-primary-tint-12);
color: var(--color-primary);
}
.api-key-card__icon--blue {
background: rgba(66, 133, 244, 0.12);
color: #4285F4;
}
.api-key-card__icon--teal {
background: rgba(78, 205, 196, 0.12);
color: #4ECDC4;
}
.api-key-card__icon--violet {
background: rgba(168, 85, 247, 0.12);
color: #A855F7;
}
.api-key-card__icon--muted {
background: var(--color-bg-alt);
color: var(--color-text-secondary);
}
.api-key-card__name {
font-weight: 600;
font-size: var(--text-base);
color: var(--color-text);
line-height: 1.3;
}
.api-key-card__subtitle {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.api-key-card__hint {
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
padding: var(--space-md);
margin-top: var(--space-sm);
}
.api-key-card__hint-title {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text-secondary);
margin-bottom: var(--space-sm);
}
.api-key-card__steps {
margin: 0 0 var(--space-sm) 0;
padding-left: 1.25rem;
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: 1.7;
}
.api-key-card__steps li + li {
margin-top: 2px;
}
.api-key-card__steps strong {
color: var(--color-text);
font-weight: 600;
}
.api-key-card__hint-note {
font-size: var(--text-sm);
color: var(--color-text-muted);
border-top: 1px solid var(--color-border);
padding-top: var(--space-sm);
margin-top: var(--space-sm);
}
.api-key-card__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-sm);
flex-wrap: wrap;
}
.api-key-card__actions .btn {
padding-left: var(--space-lg);
padding-right: var(--space-lg);
}
.api-key-card__badge {
font-size: var(--text-xs);
font-weight: 700;
padding: 3px 10px;
border-radius: var(--radius-pill);
min-width: 60px;
text-align: center;
}
.api-key-card__badge--set {
background: var(--color-success);
color: #fff;
}
.api-key-card__feedback {
font-size: var(--text-sm);
font-weight: 500;
transition: opacity var(--transition-fast);
}
.api-key-card__feedback--ok {
color: var(--color-success);
}
.api-key-card__feedback--error {
color: var(--color-danger);
}
/* ---------------------------------------------------------------------------
7.5. Library Toolbar + Group Chips
--------------------------------------------------------------------------- */
.library-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
margin-bottom: var(--space-lg);
min-width: 0;
width: 100%;
}
.library-toolbar__title {
font-family: var(--font-headings);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
margin: 0;
flex: 0 0 auto;
white-space: nowrap;
}
.library-toolbar__heading {
min-width: 0;
}
.library-toolbar__subtitle {
margin: var(--space-xs) 0 0;
max-width: 620px;
color: var(--color-text-secondary);
font-size: var(--text-sm);
line-height: 1.55;
}
.library-toolbar__actions {
display: flex;
align-items: center;
gap: var(--space-sm);
flex: 1 1 0;
min-width: 0;
max-width: none;
}
.library-toolbar .btn {
height: 40px;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.library-toolbar .dropdown-toggle::after {
margin-left: 0.5rem;
}
.sort-icon-btn.dropdown-toggle::after {
display: none;
}
/* ---- Library Sidebar (desktop) ---- */
.library-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
display: flex;
min-height: var(--navbar-height);
background: var(--color-bg-surface);
border-bottom: 1px solid var(--color-border);
}
.library-topbar__brand {
display: flex;
align-items: center;
justify-content: center;
min-height: var(--navbar-height);
padding: 0 var(--space-lg);
}
.library-topbar__main {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
width: auto;
flex: 1;
min-height: var(--navbar-height);
padding: 0 var(--space-lg);
}
.library-topbar__logo {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
color: var(--color-text);
text-decoration: none;
font-family: var(--font-headings);
font-size: var(--text-xl);
font-weight: 700;
}
.library-topbar__logo .bi {
color: var(--color-primary);
font-size: 1.35rem;
}
.library-topbar__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-sm);
margin-left: auto;
}
.library-topbar__nav {
display: flex;
align-items: center;
flex-shrink: 0;
gap: var(--space-sm);
}
/* Global back-link used on detail/form pages below the topbar */
.back-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: var(--space-sm);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-secondary);
text-decoration: none;
transition: color var(--transition-fast);
}
.back-link:hover {
color: var(--color-primary);
}
.topbar-back-link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
color: var(--color-text-secondary);
font-size: var(--text-sm);
font-weight: 500;
text-decoration: none;
padding: 6px var(--space-md);
border-radius: var(--radius-base);
transition: color var(--transition-fast),
background var(--transition-fast);
}
.topbar-back-link:hover {
color: var(--color-text);
background: var(--color-bg-alt);
}
/* Offcanvas width = nav-rail (56px) + sidebar content (264px) */
#app-sidebar {
--bs-offcanvas-width: 320px;
}
/* Pages that opt out of the sidebar entirely */
.library-shell[data-no-sidebar] #app-sidebar {
display: none !important;
}
@media (min-width: 992px) {
.library-shell[data-no-sidebar] .library-main {
margin-left: 0;
}
}
@media (min-width: 1200px) {
.library-topbar--no-sidebar .library-topbar__brand {
width: auto;
flex: 0 0 auto;
border-right: none;
}
}
/* On lg+: pin the offcanvas as a normal fixed sidebar (cancel Bootstrap's
hidden transform so it's always visible without a toggle) */
@media (min-width: 992px) {
#app-sidebar {
top: var(--navbar-height, 72px) !important;
transform: none !important;
visibility: visible !important;
z-index: 1029 !important;
}
}
/* Pages that opt into hiding the topbar on desktop (e.g. dashboard) */
@media (min-width: 1200px) {
.library-topbar--hidden-xl {
display: none;
}
}
@media (min-width: 992px) {
body:has(.library-topbar--hidden-xl) #app-sidebar {
top: var(--navbar-height, 72px) !important;
}
}
@media (min-width: 1200px) {
body:has(.library-topbar--hidden-xl) .library-shell {
padding-top: 0;
min-height: 100vh;
}
body:has(.library-topbar--hidden-xl) #app-sidebar {
top: 0 !important;
}
body:has(.library-topbar--hidden-xl) .library-sidebar-brand {
display: flex;
}
}
.library-shell {
min-height: calc(100vh - var(--navbar-height, 72px));
padding-top: var(--navbar-height, 72px);
}
.library-layout {
display: block;
}
.library-main {
width: 100%;
padding: var(--space-lg) var(--space-lg) var(--space-3xl);
}
.app-page {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
/* ---- Overview page ---- */
.overview-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
.overview-stat {
background: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-lg) var(--space-md);
text-align: center;
}
.overview-stat__value {
font-size: 1.75rem;
font-weight: 700;
font-family: var(--font-headings);
color: var(--color-text);
line-height: 1;
margin-bottom: var(--space-xs);
}
.overview-stat__label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
}
.overview-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
}
.overview-section--full {
grid-column: 1 / -1;
overflow: visible;
}
.overview-column {
display: flex;
flex-direction: column;
gap: var(--space-xl);
min-width: 0;
}
.overview-column .overview-section {
display: flex;
flex-direction: column;
}
.overview-section--scrollable .overview-list,
.overview-section--full .overview-books {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
min-height: 0;
}
.overview-section__header {
margin-bottom: var(--space-xs);
}
.overview-section__sub {
margin: 2px 0 0;
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.overview-section {
background: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-md);
height: var(--overview-section-height);
overflow: clip;
}
.overview-section__title {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--text-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--color-text-muted);
margin: 0;
}
.overview-section__title .bi {
font-size: var(--text-base);
color: var(--color-text-muted);
}
.overview-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
margin: 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
text-align: center;
padding: var(--space-md) 0;
}
.overview-empty .bi {
font-size: 1.75rem;
opacity: 0.35;
}
/* Book covers row for recently read */
.overview-books {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
padding: 10px;
margin: -10px;
}
.overview-book {
display: flex;
flex-direction: column;
gap: var(--space-xs);
text-decoration: none;
width: 120px;
flex-shrink: 0;
}
.overview-book .book-cover {
width: 120px;
border-radius: var(--radius-base);
overflow: hidden;
font-size: 0.8rem;
border: 1px solid var(--color-border);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
/* force compositing layer so overflow: hidden clips correctly during transform */
will-change: transform;
}
.overview-book .book-cover-img {
border-radius: var(--radius-base);
}
.overview-book:hover .book-cover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.overview-book .book-cover-card-icon {
font-size: 1.75rem;
}
.overview-book .book-cover-title {
font-size: 0.7rem;
}
.overview-book__title {
font-size: var(--text-xs);
color: var(--color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
text-align: center;
}
/* List-style rows */
.overview-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.overview-list-item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-xs);
border-radius: var(--radius-base);
text-decoration: none;
color: var(--color-text);
transition: background var(--transition-fast);
}
.overview-list-item:hover {
background: var(--color-bg-alt);
}
.overview-list-item--unread {
background: var(--color-primary-tint-05);
}
.overview-list-item__icon {
flex-shrink: 0;
font-size: 1.1rem;
color: var(--color-text-muted);
width: 20px;
text-align: center;
}
.overview-list-item__icon--accent {
color: var(--color-primary);
}
.overview-list-item__icon--primary {
color: var(--color-primary);
}
.overview-list-item__cover {
width: 32px;
height: 40px;
border-radius: 4px;
overflow: hidden;
flex-shrink: 0;
}
.overview-list-item__cover.book-cover {
font-size: 0;
gap: 0;
padding: 4px;
}
.overview-list-item__cover .book-cover-card-icon {
font-size: 0.75rem;
}
.overview-list-item__body {
flex: 1;
min-width: 0;
}
.overview-list-item__title {
font-size: var(--text-sm);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--color-text);
}
.overview-list-item__sub {
font-size: var(--text-xs);
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.overview-list-item__arrow {
font-size: 0.65rem;
color: var(--color-text-muted);
flex-shrink: 0;
}
.overview-notif-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-primary);
flex-shrink: 0;
}
@media (max-width: 767.98px) {
.overview-stats {
grid-template-columns: repeat(2, 1fr);
}
.overview-grid {
grid-template-columns: 1fr;
}
.overview-section {
height: auto;
}
.overview-section--scrollable .overview-list {
max-height: 240px;
overflow-y: auto;
}
}
.app-page--wide {
max-width: 1120px;
}
.app-page--narrow {
max-width: 760px;
}
.app-form-page--compact {
max-width: 640px;
}
.app-form-header {
margin-bottom: var(--space-lg);
}
.app-form-title {
margin: 0;
color: var(--color-text);
font-family: var(--font-headings);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
line-height: 1.1;
}
.app-form-subtitle {
margin: var(--space-xs) 0 0;
color: var(--color-text-secondary);
font-size: var(--text-base);
}
.app-form-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--space-sm);
margin-top: var(--space-lg);
padding-top: var(--space-md);
}
.app-form-actions--start {
justify-content: flex-start;
}
.app-form-secondary-actions {
margin-top: var(--space-lg);
padding-top: var(--space-md);
text-align: center;
}
.app-form-back {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin-bottom: var(--space-md);
color: var(--color-text-secondary);
font-size: var(--text-sm);
font-weight: 600;
text-decoration: none;
}
.app-form-back:hover {
color: var(--color-primary);
}
.discover-controls {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
}
.discover-controls__search {
display: flex;
align-items: center;
gap: var(--space-sm);
flex: 1 1 360px;
min-width: 280px;
}
.discover-controls__search .form-control {
flex: 1 1 auto;
min-width: 0;
}
.discover-controls__filters,
.discover-controls__sort {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
}
.feed-empty-state {
color: var(--color-text-secondary);
text-align: center;
}
.feed-empty-state .bi {
color: var(--color-text-muted);
}
.feed-empty-state p {
margin-bottom: var(--space-md);
}
.library-sidebar {
position: sticky;
top: calc(var(--navbar-height) + var(--space-md));
padding: var(--space-md);
background-color: var(--color-bg-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
}
.sidebar-link {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
color: var(--color-text-secondary);
text-decoration: none;
border-radius: var(--radius-base);
font-size: var(--text-sm);
font-weight: 500;
transition: all var(--transition-fast);
position: relative;
margin-bottom: var(--space-xs);
}
.sidebar-link:hover {
background-color: var(--color-bg-alt);
color: var(--color-text);
}
.sidebar-link.active {
background-color: var(--color-primary-subtle);
color: var(--sidebar-link-active-color);
}
.sidebar-link.active::before {
content: "";
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 3px;
background-color: var(--color-primary);
border-radius: 1.5px;
}
.sidebar-link .bi {
font-size: var(--text-base);
width: 1.25rem;
text-align: center;
color: var(--color-text-muted);
transition: color var(--transition-fast);
flex-shrink: 0;
}
.sidebar-link.active .bi {
color: var(--sidebar-link-active-color);
}
.sidebar-link .badge {
margin-left: auto;
background-color: var(--color-gray-200);
color: var(--color-text-secondary);
font-size: 0.75rem;
padding: 0.125rem 0.5rem;
border-radius: var(--radius-pill);
font-weight: 600;
}
.sidebar-link.active .badge {
background-color: var(--color-primary);
color: var(--color-white);
}
/* ---- Navigation rail ---- */
.nav-rail {
/* Part of the offcanvas flex-row; always visible when offcanvas is open */
display: flex;
flex-shrink: 0;
width: 56px;
flex-direction: column;
align-items: center;
padding: var(--space-sm) 0 var(--space-md);
gap: 2px;
background: var(--color-bg-alt);
border-right: 1px solid var(--color-border);
overflow: visible;
}
.nav-rail__logo {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-bottom: var(--space-xs);
font-size: 1.3rem;
color: var(--color-primary);
text-decoration: none;
flex-shrink: 0;
}
.nav-rail__sep {
width: 28px;
height: 1px;
background: var(--color-border);
margin: var(--space-xs) 0;
flex-shrink: 0;
}
.nav-rail__item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-base);
font-size: 1.15rem;
color: var(--color-text-muted);
text-decoration: none;
transition: background var(--transition-fast), color var(--transition-fast);
flex-shrink: 0;
}
.nav-rail__item:hover {
background: var(--nav-rail-item-hover-bg);
color: var(--nav-rail-item-hover-color);
}
.nav-rail__item--active {
background: var(--nav-rail-item-active-bg);
color: var(--nav-rail-item-active-color);
}
.nav-rail__dot {
position: absolute;
top: 6px;
right: 6px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-primary);
border: 1px solid var(--color-bg-surface);
}
.nav-rail__bottom {
margin-top: auto;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: var(--space-md);
}
.nav-rail__user {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: none;
background: none;
border-radius: var(--radius-base);
cursor: pointer;
padding: 0;
transition: background var(--transition-fast);
flex-shrink: 0;
}
.nav-rail__user:hover,
.nav-rail__user[aria-expanded="true"] {
background: var(--nav-rail-item-hover-bg);
}
/* Notification dot on nav-rail user button sits top-right of avatar */
.nav-rail__user .nav-rail__dot {
top: 2px;
right: 2px;
}
/* Pulsing animation when notification dot is visible */
.js-notif-dot:not(.d-none) {
animation: notif-dot-pulse 2s ease-in-out infinite;
}
@keyframes notif-dot-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: 0.6; }
}
/* Dropdown opened from the nav-rail shifts right to clear the rail */
.sidebar-user-menu--from-rail {
margin-bottom: 6px !important;
margin-left: 0 !important;
}
/* ---- /Navigation rail ---- */
.library-admin-sidebar {
position: fixed;
top: var(--navbar-height, 72px);
bottom: 0;
height: auto;
display: flex !important;
flex-direction: row !important; /* [nav-rail 56px | sidebar-inner 264px] */
background: var(--color-bg-surface);
border-right: 1px solid var(--color-border);
overflow: visible;
}
.library-sidebar-inner {
display: flex;
flex-direction: column;
width: 264px;
flex: 0 0 264px;
overflow: hidden;
border-left: 1px solid var(--color-border);
}
.library-sidebar-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: var(--space-lg) var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-lg);
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
.library-sidebar-footer {
flex: 0 0 auto;
padding: var(--space-xs) var(--space-sm);
border-top: 1px solid var(--color-border);
background: var(--color-bg-surface);
}
.library-sidebar-footer .dropup {
width: 100%;
}
.sidebar-user-btn {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
padding: var(--space-sm);
border: none;
background: none;
border-radius: var(--radius-base);
cursor: pointer;
color: var(--color-text-secondary);
font-size: var(--text-sm);
font-weight: 500;
transition: background var(--transition-fast),
color var(--transition-fast);
text-align: left;
}
.sidebar-user-btn:hover,
.sidebar-user-btn[aria-expanded="true"] {
background: var(--color-bg-alt);
color: var(--color-text);
}
.sidebar-user-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
min-width: 30px;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-white);
font-size: 0.68rem;
font-weight: 700;
flex-shrink: 0;
overflow: hidden;
letter-spacing: 0;
text-transform: uppercase;
line-height: 1;
}
.sidebar-user-avatar--lg {
width: 38px;
height: 38px;
min-width: 38px;
font-size: 0.8rem;
}
.sidebar-user-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text);
}
.sidebar-user-chevron {
font-size: 0.65rem;
color: var(--color-text-muted);
flex-shrink: 0;
transition: transform var(--transition-fast);
}
.sidebar-user-btn[aria-expanded="true"] .sidebar-user-chevron {
transform: rotate(180deg);
}
/* ---- Sidebar footer row (card + bell) ---- */
.sidebar-footer-row {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.sidebar-user-card {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
padding: var(--space-sm);
border: none;
background: none;
border-radius: var(--radius-base);
cursor: pointer;
text-align: left;
min-width: 0;
transition: background var(--transition-fast);
/* ensure bell stays at the far right */
justify-content: flex-start;
}
.sidebar-user-card:hover,
.sidebar-user-card[aria-expanded="true"] {
background: var(--color-bg-alt);
}
.sidebar-user-info {
flex: 1;
min-width: 0;
}
.sidebar-user-info__name {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.sidebar-user-info__email {
font-size: var(--text-xs);
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.sidebar-card-bell {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
color: var(--color-text-muted);
font-size: 1rem;
margin-left: auto;
}
.sidebar-card-bell .notif-badge--inline {
position: absolute;
top: 0;
right: 0;
transform: translate(25%, -25%);
min-width: 15px;
height: 15px;
font-size: 0.55rem;
padding: 0 3px;
}
.sidebar-bell-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
border: none;
background: none;
border-radius: var(--radius-base);
cursor: pointer;
color: var(--color-text-secondary);
font-size: 1.05rem;
transition: background var(--transition-fast),
color var(--transition-fast);
}
.sidebar-bell-btn:hover,
.sidebar-bell-btn[aria-expanded="true"] {
background: var(--color-bg-alt);
color: var(--color-text);
}
.sidebar-bell-btn .notif-badge--inline {
position: absolute;
top: 2px;
right: 2px;
transform: none;
}
.sidebar-notif-menu {
width: 260px;
padding: var(--space-xs) 0;
border: 1px solid var(--color-border);
border-radius: 14px;
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.1),
0 4px 12px rgba(0, 0, 0, 0.06);
overflow: hidden;
font-size: var(--text-sm);
margin-bottom: 6px !important;
}
.sidebar-donate-icon {
color: var(--color-primary) !important;
}
.sidebar-user-menu__item.sidebar-user-menu__item--primary .bi {
color: var(--color-primary);
}
.sidebar-user-menu__item.sidebar-user-menu__item--primary:hover {
background: var(--color-primary-subtle);
}
.sidebar-user-menu__item.sidebar-user-menu__item--primary:hover .bi {
color: var(--color-primary);
}
.notif-badge--inline {
position: static;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
border-radius: 10px;
background: var(--color-danger, #dc3545);
color: #fff;
font-size: 0.65rem;
font-weight: 600;
padding: 0 5px;
line-height: 1;
}
.sidebar-user-menu {
width: 260px;
padding: var(--space-xs) 0;
border: 1px solid var(--color-border);
border-radius: 14px;
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.1),
0 4px 12px rgba(0, 0, 0, 0.06);
overflow: hidden;
font-size: var(--text-sm);
margin-bottom: 6px !important;
margin-left: 24px !important;
}
/* User profile card at the top */
.sidebar-user-menu__card {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
text-decoration: none;
transition: background var(--transition-fast);
margin: var(--space-xs);
border-radius: 10px;
}
.sidebar-user-menu__card:hover {
background: var(--color-bg-alt);
}
.sidebar-user-menu__card-info {
flex: 1;
min-width: 0;
}
.sidebar-user-menu__card-name {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-user-menu__card-sub {
font-size: var(--text-xs);
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-user-menu__card-arrow {
font-size: 0.65rem;
color: var(--color-text-muted);
flex-shrink: 0;
}
/* Section divider */
.sidebar-user-menu__divider {
height: 1px;
background: var(--color-border);
margin: var(--space-xs) 0;
}
/* Navigation items */
.sidebar-user-menu__item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 9px var(--space-md);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-secondary);
text-decoration: none;
margin: 0 var(--space-xs);
border-radius: 8px;
transition: background var(--transition-fast),
color var(--transition-fast);
}
.sidebar-user-menu__item .bi {
font-size: var(--text-base);
color: var(--color-text-muted);
width: 20px;
text-align: center;
flex-shrink: 0;
}
.sidebar-user-menu__item:hover {
background: var(--color-bg-alt);
color: var(--color-text);
}
.sidebar-user-menu__item:hover .bi {
color: var(--color-text-secondary);
}
.sidebar-user-menu__item--danger {
color: var(--color-danger);
}
.sidebar-user-menu__item--danger .bi {
color: var(--color-danger);
opacity: 0.7;
}
.sidebar-user-menu__item--danger:hover {
background: rgba(220, 53, 69, 0.07);
color: var(--color-danger);
}
.sidebar-user-menu__item--danger:hover .bi {
color: var(--color-danger);
opacity: 1;
}
button.sidebar-user-menu__item--btn {
/* match block-width behaviour: parent minus both margins */
width: calc(100% - 2 * var(--space-xs));
border: none;
background: none;
cursor: pointer;
text-align: left;
/* use inset shadow so focus ring stays inside the rounded dropdown */
outline: none;
}
button.sidebar-user-menu__item--btn:focus-visible {
box-shadow: inset 0 0 0 2px var(--color-primary-subtle);
}
.sidebar-lang-badge {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--color-text-secondary);
background: var(--color-bg-alt);
flex-shrink: 0;
transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-user-menu__item:hover .sidebar-lang-badge {
background: var(--color-primary);
color: #fff;
}
/* Notifications section */
.sidebar-user-menu__notif-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-xs) var(--space-md);
}
.sidebar-user-menu__notif-title {
font-size: 0.67rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.sidebar-user-menu__mark-read {
border: none;
background: none;
padding: 0;
font-size: var(--text-xs);
color: var(--color-primary);
cursor: pointer;
font-weight: 500;
}
.sidebar-user-menu__mark-read:hover {
color: var(--color-primary-dark);
text-decoration: underline;
}
.sidebar-user-menu__notif-list {
overflow: hidden;
}
.sidebar-user-menu__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
margin: 0;
padding: var(--space-sm) var(--space-md);
text-align: center;
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.sidebar-user-menu__empty .bi {
font-size: 1.5rem;
opacity: 0.4;
}
.sidebar-user-menu__notif-see-all {
display: block;
padding: var(--space-xs) var(--space-md);
font-size: var(--text-xs);
color: var(--color-primary);
text-decoration: none;
text-align: right;
}
.sidebar-user-menu__notif-see-all:hover {
text-decoration: underline;
}
/* Sidebar brand — shown in sidebar when topbar is hidden on desktop */
.library-sidebar-brand {
display: none;
flex: 0 0 auto;
align-items: center;
justify-content: center;
min-height: var(--navbar-height, 56px);
padding: 0 var(--space-lg);
}
.library-sidebar-section {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.library-sidebar-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
}
.library-sidebar-title {
padding: 0 var(--space-sm);
color: var(--color-text-muted);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.library-sidebar-add {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
transition: background var(--transition-fast),
color var(--transition-fast),
border-color var(--transition-fast);
}
.library-sidebar-add:hover {
background: var(--color-bg-alt);
border-color: var(--color-border-dark);
color: var(--color-text);
}
.library-sidebar-nav {
display: flex;
flex-direction: column;
gap: 2px;
}
/* Top-level navs extend to full sidebar width, bypassing body padding */
.library-sidebar-section > .library-sidebar-nav {
margin-left: calc(-1 * var(--space-md));
margin-right: calc(2px - var(--space-md));
gap: 2px;
}
/* Reset browser defaults when a