/* ============================================================
   styles.css — StudyForge AI: Complete visual styling
   ============================================================ */

/* --- CSS Custom Properties --- */
:root {
--bg: #000000ad;
--bg-raised: #0a0f1e;
--fg: #f1f5f9;
--fg-dim: #94a3b8;
--muted: #475569;
--accent: #00ff88;
--accent-dim: #00cc6a;
--accent-glow: rgba(0,255,136,0.12);
--card: rgba(15,23,42,0.8);
--card-solid: #0f172a;
--card-hover: #1e293b;
--border: rgba(30,41,59,0.8);
--border-accent: rgba(0,255,136,0.2);
--danger: #f43f5e;
--warning: #f59e0b;
--info: #38bdf8;
--purple: #a78bfa;
/* === NEW: Multi-color accent tokens === */
--cyan: #22d3ee;
--cyan-glow: rgba(34,211,238,0.25);
--cyan-bg: rgba(34,211,238,0.08);
--cyan-border: rgba(34,211,238,0.2);
--rose: #fb7185;
--rose-glow: rgba(251,113,133,0.25);
--rose-bg: rgba(251,113,133,0.08);
--rose-border: rgba(251,113,133,0.2);
--amber-bg: rgba(251,191,36,0.08);
--amber-border: rgba(251,191,36,0.2);
--blue-bg: rgba(56,189,248,0.08);
--blue-border: rgba(56,189,248,0.2);
--purple-bg: rgba(167,139,250,0.08);
--purple-border: rgba(167,139,250,0.2);
--green-bg: rgba(0,255,136,0.08);
--green-border: rgba(0,255,136,0.2);
--pink: #f472b6;
--pink-bg: rgba(244,114,182,0.08);
--pink-border: rgba(244,114,182,0.2);
}

/* --- Base Reset --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
font-family: 'DM Sans', sans-serif;
background: var(--bg);
color: var(--fg);
min-height: 100vh;
overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Space Grotesk', sans-serif;
}

/* --- Background Layers --- */
.bg-mesh {
background-image:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,255,136,0.06) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 80% 100%, rgba(56,189,248,0.04) 0%, transparent 50%),
radial-gradient(ellipse 50% 40% at 10% 60%, rgba(167,139,250,0.03) 0%, transparent 50%);
}

.bg-grid {
background-image:
linear-gradient(rgba(0,255,136,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,136,0.025) 1px, transparent 1px);
background-size: 64px 64px;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-dim); }

/* --- Glass Card --- */
.glass {
background: var(--card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: 16px;
transition: border-color 0.3s ease;
}
.glass:hover { border-color: var(--border-accent); }

.glass-static {
background: var(--card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: 16px;
}

/* --- Flashcard 3D Flip --- */
.flashcard-container { perspective: 1200px; }

.flashcard-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
}
.flashcard-inner.flipped { transform: rotateY(180deg); }

.flashcard-front,
.flashcard-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2.5rem;
}
.flashcard-back {
transform: rotateY(180deg);
}

/* --- Drop Zone --- */
.drop-zone {
border: 2px dashed var(--border);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.drop-zone::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at center, var(--accent-glow) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.35s ease;
}
.drop-zone.drag-over {
border-color: var(--accent);
transform: scale(1.005);
}
.drop-zone.drag-over::before { opacity: 1; }

/* --- Progress Bar --- */
.progress-fill {
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Page Transitions --- */
/* min-height keeps the footer at the bottom of the viewport even
   during the brief moment when a page is being rendered, preventing
   the footer from jumping up and then snapping back. */
.page {
display: none;
opacity: 0;
transition: opacity 0.2s ease;
min-height: calc(100vh - 60px);  /* viewport height minus navbar */
}
.page.active { display: block; opacity: 1; }

/* --- Toast Notifications --- */
.toast-wrap {
position: fixed;
top: 80px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.toast {
pointer-events: all;
padding: 14px 20px;
border-radius: 12px;
background: var(--card-solid);
border: 1px solid var(--border);
color: var(--fg);
font-size: 14px;
animation: toastSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1), toastFade 0.35s ease 2.65s forwards;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
gap: 10px;
backdrop-filter: blur(12px);
}
@keyframes toastSlide {
from { transform: translateX(120px) scale(0.9); opacity: 0; }
to   { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes toastFade {
to { opacity: 0; transform: translateY(-8px) scale(0.95); }
}

/* --- Modal --- */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(2, 6, 23, 0.8);
backdrop-filter: blur(8px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }

.modal-box {
background: var(--card-solid);
border: 1px solid var(--border);
border-radius: 20px;
padding: 2rem;
max-width: 480px;
width: 92%;
transform: scale(0.92) translateY(20px);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}
.modal-overlay.active .modal-box {
transform: scale(1) translateY(0);
}

/* --- Button System --- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
border-radius: 12px;
cursor: pointer;
border: none;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-accent {
background: var(--accent);
color: #020617;
padding: 11px 24px;
font-size: 14px;
}
.btn-accent:hover {
background: var(--accent-dim);
box-shadow: 0 0 30px rgba(0, 255, 136, 0.25);
transform: translateY(-1px);
}

/* === NEW: Colored button variants === */
.btn-blue {
background: var(--info);
color: #020617;
padding: 11px 24px;
font-size: 14px;
}
.btn-blue:hover {
box-shadow: 0 0 25px rgba(56, 189, 248, 0.3);
transform: translateY(-1px);
}

.btn-rose {
background: var(--rose);
color: #fff;
padding: 11px 24px;
font-size: 14px;
}
.btn-rose:hover {
box-shadow: 0 0 25px rgba(251, 113, 133, 0.3);
transform: translateY(-1px);
}

.btn-violet {
background: var(--purple);
color: #fff;
padding: 11px 24px;
font-size: 14px;
}
.btn-violet:hover {
box-shadow: 0 0 25px rgba(167, 139, 250, 0.3);
transform: translateY(-1px);
}

.btn-amber {
background: var(--warning);
color: #020617;
padding: 11px 24px;
font-size: 14px;
}
.btn-amber:hover {
box-shadow: 0 0 25px rgba(251, 191, 36, 0.3);
transform: translateY(-1px);
}

.btn-cyan {
background: var(--cyan);
color: #020617;
padding: 11px 24px;
font-size: 14px;
}
.btn-cyan:hover {
box-shadow: 0 0 25px rgba(34, 211, 238, 0.3);
transform: translateY(-1px);
}

.btn-ghost {
background: transparent;
color: var(--fg-dim);
padding: 10px 20px;
font-size: 14px;
border: 1px solid var(--border);
}
.btn-ghost:hover {
border-color: var(--accent);
color: var(--accent);
}

.btn-danger {
background: rgba(244, 63, 94, 0.08);
color: var(--danger);
padding: 10px 20px;
font-size: 14px;
border: 1px solid rgba(244, 63, 94, 0.2);
}
.btn-danger:hover { background: rgba(244, 63, 94, 0.15); }

.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 9px; }
.btn-lg { padding: 14px 36px; font-size: 16px; border-radius: 14px; }

.btn-icon {
width: 40px;
height: 40px;
padding: 0;
border-radius: 10px;
background: transparent;
color: var(--fg-dim);
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 14px;
}
.btn-icon:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-glow);
}

/* --- Input Fields --- */
.field {
width: 100%;
padding: 12px 16px;
border-radius: 12px;
background: var(--bg);
border: 1px solid var(--border);
color: var(--fg);
font-size: 15px;
font-family: 'DM Sans', sans-serif;
transition: all 0.2s ease;
outline: none;
}
.field:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
.field::placeholder { color: var(--muted); }

/* --- Badges --- */
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 7px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
}
.badge-green  { background: rgba(0,255,136,0.1);   color: var(--accent); }
.badge-amber  { background: rgba(245,158,11,0.1);  color: var(--warning); }
.badge-red    { background: rgba(244,63,94,0.1);   color: var(--danger); }
.badge-blue   { background: rgba(56,189,248,0.1);  color: var(--info); }
.badge-purple { background: rgba(167,139,250,0.1); color: var(--purple); }
.badge-cyan   { background: rgba(34,211,238,0.1);  color: var(--cyan); }
.badge-rose   { background: rgba(251,113,133,0.1); color: var(--rose); }
.badge-admin {
background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(244,63,94,0.15));
color: var(--warning);
border: 1px solid rgba(245,158,11,0.2);
}

/* --- Document Cards --- */
.doc-card {
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.doc-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
border-color: var(--border-accent);
}

/* --- Quiz Options --- */
.q-opt {
padding: 16px 20px;
border-radius: 14px;
border: 1px solid var(--border);
background: var(--bg-raised);
cursor: pointer;
transition: all 0.25s ease;
display: flex;
align-items: center;
gap: 14px;
}
.q-opt:hover:not(.locked) {
border-color: rgba(0, 255, 136, 0.4);
background: rgba(0, 255, 136, 0.03);
}
.q-opt.correct { border-color: var(--accent); background: rgba(0, 255, 136, 0.08); }
.q-opt.wrong   { border-color: var(--danger); background: rgba(244, 63, 94, 0.08); }
.q-opt.locked  { pointer-events: none; }

/* --- Navigation --- */
.nav-btn {
padding: 8px 16px;
border-radius: 10px;
border: none;
background: transparent;
color: var(--fg-dim);
cursor: pointer;
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: 14px;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 7px;
}
.nav-btn:hover { color: var(--fg); background: rgba(255,255,255,0.04); }
.nav-btn.active { color: var(--accent); background: var(--accent-glow); }

/* --- Spinner --- */
.spin {
width: 22px; height: 22px;
border: 3px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.75s linear infinite;
}
.spin-lg { width: 44px; height: 44px; border-width: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Floating Particles --- */
.particle {
position: fixed;
border-radius: 50%;
pointer-events: none;
background: var(--accent);
opacity: 0;
animation: particleFloat linear infinite;
}
@keyframes particleFloat {
0%   { transform: translateY(100vh) scale(0); opacity: 0; }
8%   { opacity: 0.4; transform: translateY(90vh) scale(1); }
92%  { opacity: 0.15; }
100% { transform: translateY(-5vh) scale(0.5); opacity: 0; }
}

/* --- Google Button --- */
.btn-google {
width: 100%;
padding: 12px;
border-radius: 12px;
background: #fff;
color: #333;
font-weight: 600;
font-size: 14px;
font-family: 'Space Grotesk', sans-serif;
border: 1px solid #ddd;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.2s ease;
}
.btn-google:hover { background: #f8f8f8; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* --- Divider --- */
.divider-text {
display: flex;
align-items: center;
gap: 12px;
color: var(--muted);
font-size: 13px;
}
.divider-text::before,
.divider-text::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}

/* --- Chart Container (fixes infinite expansion) --- */
.chart-box {
position: relative;
width: 100%;
height: 220px;
}
.chart-box canvas {
position: absolute !important;
inset: 0;
width: 100% !important;
height: 100% !important;
}

/* --- Fade-Up Animation --- */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to   { opacity: 1; transform: translateY(0); }
}
.anim-up { animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.anim-d1 { animation-delay: 0.1s; }
.anim-d2 { animation-delay: 0.2s; }
.anim-d3 { animation-delay: 0.3s; }
.anim-d4 { animation-delay: 0.4s; }

/* === NEW: Auth gate for upload section === */
.auth-gate { position: relative; }
.auth-gate-blur {
filter: blur(6px) brightness(0.4);
pointer-events: none;
user-select: none;
}
.auth-gate-banner {
position: absolute; inset: 0; z-index: 10;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
background: rgba(2, 6, 23, 0.65);
backdrop-filter: blur(3px);
border-radius: 16px;
border: 1px solid var(--border);
cursor: pointer;
transition: all 0.3s;
}
.auth-gate-banner:hover {
background: rgba(2, 6, 23, 0.8);
border-color: var(--border-accent);
}

/* === NEW: Gradient text utility === */
.gradient-text {
background: linear-gradient(135deg, var(--accent), var(--cyan), var(--info));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

/* === NEW: Gradient icon utility === */
.gradient-icon {
background: linear-gradient(135deg, var(--accent), var(--cyan));
}

/* --- Responsive --- */
@media (max-width: 640px) {
.hide-mobile { display: none !important; }
.flashcard-front,
.flashcard-back { padding: 1.5rem; }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}

/* ============================================================
   STATS PAGE - 3D/Bubbly UI Enhancements
   ============================================================ */

/* 3D Glassmorphism Card */
.glass-3d {
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.glass-3d:hover {
transform: translateY(-8px) scale(1.01);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 60px rgba(0, 255, 136, 0.05);
}

/* Bubbly Card Animation */
.bubble-card {
animation: bubbleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
opacity: 0;
transform: scale(0.8) translateY(20px);
}

@keyframes bubbleIn {
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}

/* Floating Orbs Background */
.stat-orb {
position: fixed;
border-radius: 50%;
pointer-events: none;
filter: blur(60px);
opacity: 0.15;
z-index: -1;
animation: floatOrb 20s ease-in-out infinite;
}

@keyframes floatOrb {
0%, 100% { transform: translate(0, 0) scale(1); }
25% { transform: translate(50px, -30px) scale(1.1); }
50% { transform: translate(-20px, 50px) scale(0.9); }
75% { transform: translate(30px, -20px) scale(1.05); }
}

/* Glow Pulse Animation */
@keyframes pulseGlow {
0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.6; }
50% { transform: translateX(-50%) scale(1.3); opacity: 1; }
}

/* Shimmer Text */
.shimmer {
background: linear-gradient(90deg, var(--accent), var(--cyan), var(--info), var(--accent));
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 4s ease-in-out infinite;
}

@keyframes shimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

/* Chart Container */
.chart-box {
position: relative;
width: 100%;
height: 220px;
}

.chart-box canvas {
position: absolute !important;
inset: 0;
width: 100% !important;
height: 100% !important;
}

/* ============================================================
   PAGE TRANSITIONS
   ============================================================ */

/* Page transition container */
.page-transition {
animation: pageFadeIn 0.3s ease forwards;
}

@keyframes pageFadeIn {
0% {
opacity: 0;
transform: translateY(12px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}

/* Card entrance animations */
.card-entrance {
animation: cardSlideUp 0.4s ease forwards;
opacity: 0;
}

@keyframes cardSlideUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

/* Staggered card entrance */
.card-entrance:nth-child(1) { animation-delay: 0.05s; }
.card-entrance:nth-child(2) { animation-delay: 0.10s; }
.card-entrance:nth-child(3) { animation-delay: 0.15s; }
.card-entrance:nth-child(4) { animation-delay: 0.20s; }
.card-entrance:nth-child(5) { animation-delay: 0.25s; }
.card-entrance:nth-child(6) { animation-delay: 0.30s; }
.card-entrance:nth-child(7) { animation-delay: 0.35s; }
.card-entrance:nth-child(8) { animation-delay: 0.40s; }
.card-entrance:nth-child(9) { animation-delay: 0.45s; }
.card-entrance:nth-child(10) { animation-delay: 0.50s; }
.card-entrance:nth-child(11) { animation-delay: 0.55s; }
.card-entrance:nth-child(12) { animation-delay: 0.60s; }

/* Skeleton loading shimmer */
.skeleton-shimmer {
background: linear-gradient(
90deg,
rgba(255,255,255,0.02) 25%,
rgba(255,255,255,0.05) 50%,
rgba(255,255,255,0.02) 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}

/* Content fade-in for dynamic updates */
.content-fade {
animation: contentFade 0.25s ease forwards;
}

@keyframes contentFade {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}

/* ============================================================
   YEARLY ACTIVITY HEATMAP — GitHub-style contribution grid.
   Filled by PDF reading-session duration from the Treats page.
   Green intensity scale (primary color = --accent green).
   ============================================================ */

.hm-wrapper {
padding: 1.5rem;
border-radius: 20px;
margin-bottom: 2.5rem;
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(0, 255, 136, 0.1);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
animation: bubbleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
opacity: 0;
}

.hm-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}

.hm-title {
font-size: 1rem;
font-weight: 600;
color: var(--fg);
display: flex;
align-items: center;
gap: 8px;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hm-title i { color: var(--accent); font-size: 14px; }

.hm-sub {
font-size: 12px;
color: var(--fg-dim);
margin-top: 6px;
letter-spacing: 0.2px;
}
.hm-mad { color: var(--accent); font-weight: 600; }
.hm-total { color: var(--cyan); font-weight: 700; }
.hm-year { color: var(--fg); font-weight: 600; }

.hm-year-sel { display: flex; align-items: center; gap: 8px; }
.hm-year-sel label {
font-size: 11px; color: var(--fg-dim);
text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600;
}
.hm-select {
background: var(--bg-raised);
border: 1px solid var(--border);
color: var(--fg);
border-radius: 10px;
padding: 6px 12px;
font-size: 13px;
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
cursor: pointer;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hm-select:hover { border-color: var(--accent); }
.hm-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

.hm-scroll {
overflow-x: auto;
padding-bottom: 6px;
-webkit-overflow-scrolling: touch;
}
.hm-scroll::-webkit-scrollbar { height: 6px; }

.hm-grid {
display: grid;
grid-template-columns: repeat(4, minmax(210px, 1fr));
gap: 1.5rem 2.5rem;
min-width: 760px;
}

.hm-month { display: flex; flex-direction: column; }

.hm-mtitle {
font-size: 12px;
font-weight: 600;
color: var(--fg);
margin-bottom: 6px;
letter-spacing: 0.2px;
}

.hm-dlabels {
display: grid;
grid-template-columns: repeat(7, 14px);
gap: 3px;
margin-bottom: 3px;
}
.hm-dlabel {
width: 14px; height: 12px;
font-size: 9px;
color: var(--muted);
display: flex; align-items: center; justify-content: center;
font-weight: 500;
}

.hm-week {
display: grid;
grid-template-columns: repeat(7, 14px);
gap: 3px;
margin-bottom: 3px;
}
.hm-week:last-child { margin-bottom: 0; }

.hm-cell {
width: 14px; height: 14px;
border-radius: 3px;
display: inline-block;
transition: transform 0.12s ease, outline 0.12s ease;
cursor: default;
outline: 0 solid transparent;
}
.hm-cell[data-date] { cursor: pointer; }
.hm-cell[data-date]:hover {
transform: scale(1.4);
outline: 1px solid rgba(255, 255, 255, 0.5);
outline-offset: 0;
z-index: 2;
position: relative;
}

.hm-empty { background: transparent; }

/* Activity intensity levels — green scale (0-4), orange (5), red (6) */
.hm-l0 { background: rgba(255, 255, 255, 0.05); }
.hm-l1 { background: rgba(0, 255, 136, 0.2); }     /* lightest green: 1-29 min */
.hm-l2 { background: rgba(0, 255, 136, 0.4); }     /* 2nd bright green: 30-59 min */
.hm-l3 { background: rgba(0, 255, 136, 0.65); }    /* 3rd bright green: 1h-1h39 */
.hm-l4 {
background: rgba(0, 255, 136, 1);                   /* brightest green: 1h40-2h29 */
box-shadow: 0 0 6px rgba(0, 255, 136, 0.45);
}
/* Orange: 2h30m - 3h29m */
.hm-l5 {
background: rgba(245, 158, 11, 1);
box-shadow: 0 0 6px rgba(245, 158, 11, 0.45);
}
/* Red: 3h30m+ */
.hm-l6 {
background: rgba(220, 38, 38, 1);
box-shadow: 0 0 6px rgba(220, 38, 38, 0.5);
}

.hm-legend {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
margin-top: 1.25rem;
font-size: 11px;
color: var(--fg-dim);
}
.hm-legend .hm-cell { width: 13px; height: 13px; }
.hm-legend .hm-cell.hm-l4 { box-shadow: none; }

.hm-tooltip {
position: fixed;
z-index: 10000;
background: var(--card-solid);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 12px;
font-size: 12px;
color: var(--fg);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
pointer-events: none;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.12s ease, transform 0.12s ease;
display: flex;
flex-direction: column;
gap: 2px;
white-space: nowrap;
}
.hm-tooltip.hm-tooltip-show { opacity: 1; transform: translateY(0); }
.hm-tooltip strong { color: var(--accent); font-weight: 700; font-size: 12px; }
.hm-tooltip span { color: var(--fg-dim); font-size: 11px; }

.hm-empty-state {
text-align: center;
padding: 2rem 1rem;
color: var(--fg-dim);
font-size: 13px;
}
.hm-empty-state i {
color: var(--accent);
font-size: 22px;
display: block;
margin-bottom: 0.5rem;
}

@media (max-width: 900px) {
.hm-grid { grid-template-columns: repeat(3, minmax(200px, 1fr)); min-width: 640px; }
}
@media (max-width: 640px) {
.hm-grid { grid-template-columns: repeat(2, minmax(190px, 1fr)); min-width: 420px; }
.hm-header { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   BOOKS PAGE — 4-per-row grid of book covers (admin uploads)
   ============================================================ */

.books-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}

/* On narrower screens gracefully step down: 3 → 2 → 2 cols */
@media (max-width: 1100px) { .books-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .books-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 420px)  { .books-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } }

/* Individual book card — sized so a 4-up row sits comfortably
   on a 1320px max-width page (each card ~ 290px wide). Cover
   is a 2:3 portrait ratio, large enough to read but compact. */
.book-card {
background: var(--card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: 14px;
padding: 0.85rem;
cursor: pointer;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
            border-color 0.25s ease,
            box-shadow 0.25s ease;
display: flex;
flex-direction: column;
gap: 0.6rem;
position: relative;
}

.book-card:hover {
transform: translateY(-4px);
border-color: var(--border-accent);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

/* The cover image — fixed aspect ratio so all cards align neatly */
.book-cover-wrap {
position: relative;
width: 100%;
aspect-ratio: 2 / 3;
border-radius: 10px;
overflow: hidden;
background: linear-gradient(135deg, rgba(0,255,136,0.06), rgba(56,189,248,0.04));
border: 1px solid rgba(255,255,255,0.05);
}

.book-cover-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}

.book-card:hover .book-cover-wrap img {
transform: scale(1.04);
}

/* Fallback (when no cover) — shows a book icon */
.book-cover-fallback {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
font-size: 2.2rem;
}

/* Hover overlay on cover: "Open PDF" hint */
.book-cover-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(2,6,23,0) 50%, rgba(2,6,23,0.85) 100%);
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 0.75rem;
opacity: 0;
transition: opacity 0.25s ease;
color: var(--accent);
font-size: 13px;
font-weight: 600;
gap: 6px;
font-family: 'Space Grotesk', sans-serif;
}
.book-card:hover .book-cover-overlay { opacity: 1; }

/* Title + author block under cover */
.book-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.book-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.95rem;
font-weight: 600;
color: var(--fg);
line-height: 1.3;
/* clamp to 2 lines so cards stay aligned */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
}
.book-author {
font-size: 12px;
color: var(--fg-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* Admin-only action buttons (delete / edit) — top-right of cover */
.book-actions {
position: absolute;
top: 8px;
right: 8px;
display: flex;
gap: 6px;
opacity: 0;
transition: opacity 0.2s ease;
}
.book-card:hover .book-actions { opacity: 1; }
.book-action-btn {
width: 28px;
height: 28px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(2,6,23,0.7);
color: var(--fg-dim);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
backdrop-filter: blur(6px);
transition: all 0.2s ease;
}
.book-action-btn:hover { color: var(--fg); border-color: var(--accent); }
.book-action-btn.danger:hover { color: var(--danger); border-color: var(--danger); }

/* Drag handle (visible only to admins) — top-left of cover */
.book-drag-handle {
position: absolute;
top: 8px;
left: 8px;
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(2,6,23,0.7);
border: 1px solid rgba(255,255,255,0.08);
color: var(--fg-dim);
cursor: grab;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
backdrop-filter: blur(6px);
opacity: 0;
transition: opacity 0.2s ease, color 0.2s ease;
}
.book-card:hover .book-drag-handle { opacity: 1; }
.book-drag-handle:hover { color: var(--accent); }
.book-drag-handle:active { cursor: grabbing; }

/* Visual state while a card is being dragged */
.book-card.dragging {
opacity: 0.4;
transform: scale(0.98);
border-color: var(--accent);
box-shadow: 0 0 30px rgba(0,255,136,0.25);
}
.book-card.drag-over {
border-color: var(--cyan);
box-shadow: 0 0 0 2px var(--cyan-glow);
}

/* Empty-state card */
.books-empty {
text-align: center;
padding: 4rem 2rem;
color: var(--fg-dim);
}
.books-empty-icon {
width: 80px;
height: 80px;
border-radius: 20px;
background: rgba(0,255,136,0.06);
border: 1px solid rgba(0,255,136,0.1);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--accent);
font-size: 32px;
margin-bottom: 1.5rem;
}

/* PDF preview iframe (full-page modal-style) */
.book-pdf-viewer {
position: fixed;
inset: 0;
z-index: 1500;
background: rgba(2,6,23,0.95);
backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.book-pdf-viewer.active { opacity: 1; pointer-events: all; }
.book-pdf-viewer-bar {
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.25rem;
border-bottom: 1px solid var(--border);
background: rgba(2,6,23,0.9);
flex-shrink: 0;
}
.book-pdf-viewer-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 15px;
font-weight: 600;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.book-pdf-viewer-body {
flex: 1;
overflow: hidden;
position: relative;
}
.book-pdf-viewer-body iframe {
width: 100%;
height: 100%;
border: none;
background: #2a2a2a;
}

/* ============================================================
   SITE FOOTER — creator profile + copyright, on every page
   ============================================================ */

.site-footer {
margin-top: 3rem;
border-top: 1px solid var(--border);
background: rgba(2, 6, 23, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 2.5rem 2.5rem 2rem;
}

.footer-inner {
max-width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 2rem;
}

/* --- Creator section --- */
.creator-section {
display: flex;
justify-content: center;
}

.creator-card {
display: flex;
align-items: center;
gap: 1.25rem;
max-width: 640px;
padding: 1.25rem 1.5rem;
border-radius: 16px;
background: rgba(15, 23, 42, 0.5);
border: 1px solid var(--border);
transition: border-color 0.3s ease;
}

.creator-card:hover {
border-color: var(--border-accent);
}

.creator-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: linear-gradient(135deg, var(--accent-glow), var(--cyan-glow));
border: 2px solid var(--border-accent);
display: flex;
align-items: center;
justify-content: center;
}

.creator-avatar-fallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--fg-dim);
font-size: 28px;
}

.creator-info {
flex: 1;
min-width: 0;
}

.creator-name {
font-family: 'Space Grotesk', sans-serif;
font-size: 1rem;
font-weight: 700;
color: var(--fg);
margin: 0 0 4px 0;
letter-spacing: -0.01em;
}

.creator-desc {
font-size: 13px;
color: var(--fg-dim);
line-height: 1.6;
margin: 0;
/* clamp to 4 lines */
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}

.creator-edit-btn {
margin-top: 0.5rem;
font-size: 12px;
}

/* --- Footer bottom --- */
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.footer-brand {
display: flex;
align-items: center;
gap: 6px;
}

.footer-copy {
font-size: 12px;
color: var(--muted);
margin: 0;
}

/* Responsive: stack the creator card on small screens */
@media (max-width: 560px) {
.creator-card {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
}
.footer-bottom {
    flex-direction: column;
    text-align: center;
}
}

/* ============================================================
   HOMEPAGE MODE TOGGLE — Generate vs Tutor Chat
   ============================================================ */

.mode-toggle {
margin-bottom: 0;
}

.mode-card {
background: var(--card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.1rem 1rem;
cursor: pointer;
text-align: center;
color: var(--fg-dim);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
font-family: 'DM Sans', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
}

.mode-card:hover {
transform: translateY(-2px);
border-color: var(--border-accent);
color: var(--fg);
}

.mode-card-active {
border-color: var(--accent);
background: linear-gradient(135deg, rgba(0,255,136,0.10), rgba(34,211,238,0.05));
box-shadow: 0 0 25px rgba(0,255,136,0.15);
color: var(--fg);
}

.mode-card-active > div {
color: var(--fg);
}

@media (max-width: 560px) {
.mode-toggle { grid-template-columns: 1fr !important; }
}

/* ============================================================
   CONTENT TYPE CHECKBOX CHIPS (Flashcards / Quiz / Summary)
   ============================================================ */

.content-type-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 12px;
background: var(--bg-raised);
border: 1px solid var(--border);
color: var(--fg-dim);
font-size: 13px;
font-weight: 600;
font-family: 'Space Grotesk', sans-serif;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}

.content-type-chip:hover {
border-color: var(--accent);
color: var(--fg);
}

.content-type-chip input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 4px;
border: 1.5px solid var(--muted);
background: transparent;
cursor: pointer;
position: relative;
margin: 0;
flex-shrink: 0;
}

.content-type-chip input[type="checkbox"]:checked {
background: var(--accent);
border-color: var(--accent);
}

.content-type-chip input[type="checkbox"]:checked::after {
content: '✓';
color: #020617;
font-size: 10px;
font-weight: 900;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.content-type-chip.chip-selected {
border-color: var(--accent);
background: var(--green-bg);
color: var(--accent);
}

/* ============================================================
   AI TUTOR CHAT
   ============================================================ */

.tutor-chat-box {
background: var(--card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: 20px;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}

.tutor-messages {
max-height: 460px;
min-height: 280px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 0.25rem 0.25rem 0.5rem 0.25rem;
scroll-behavior: smooth;
}

.tutor-messages::-webkit-scrollbar { width: 6px; }
.tutor-messages::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 3px; }

.tutor-msg {
display: flex;
align-items: flex-end;
gap: 0.6rem;
max-width: 88%;
animation: tutorMsgIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tutorMsgIn {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: translateY(0); }
}

.tutor-msg-user {
align-self: flex-end;
flex-direction: row-reverse;
}

.tutor-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-raised);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}

.tutor-bubble {
padding: 0.7rem 1rem;
border-radius: 14px;
font-size: 14px;
line-height: 1.6;
color: var(--fg);
word-wrap: break-word;
overflow-wrap: anywhere;
}

.tutor-msg-ai .tutor-bubble {
background: var(--bg-raised);
border: 1px solid var(--border);
border-bottom-left-radius: 4px;
}

.tutor-msg-user .tutor-bubble {
background: linear-gradient(135deg, var(--accent), var(--accent-dim));
color: #020617;
border-bottom-right-radius: 4px;
font-weight: 500;
}

/* Markdown bits inside tutor bubbles */
.tutor-bubble p { margin: 0 0 0.5em 0; }
.tutor-bubble p:last-child { margin-bottom: 0; }
.tutor-bubble .tutor-ul { margin: 0.4em 0; padding-left: 1.2em; }
.tutor-bubble .tutor-ul li { margin: 0.2em 0; }
.tutor-bubble strong { font-weight: 700; }
.tutor-bubble .tutor-inline-code {
background: rgba(2, 6, 23, 0.5);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1px 5px;
font-family: 'Courier New', monospace;
font-size: 12px;
color: var(--accent);
}
.tutor-msg-user .tutor-bubble .tutor-inline-code {
background: rgba(2, 6, 23, 0.2);
color: #020617;
}
.tutor-bubble .tutor-code {
background: rgba(2, 6, 23, 0.7);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.6rem 0.8rem;
margin: 0.4em 0;
overflow-x: auto;
font-family: 'Courier New', monospace;
font-size: 12.5px;
line-height: 1.5;
color: var(--fg);
}
.tutor-msg-user .tutor-bubble .tutor-code {
background: rgba(2, 6, 23, 0.2);
color: #020617;
}

/* Typing indicator */
.tutor-typing {
display: flex;
padding: 0 0.25rem;
}
.tutor-typing .tutor-bubble {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0.85rem 1rem;
}
.tutor-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--fg-dim);
animation: tutorDot 1.2s infinite ease-in-out;
}
.tutor-dot:nth-child(2) { animation-delay: 0.15s; }
.tutor-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes tutorDot {
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
30%           { transform: translateY(-4px); opacity: 1; }
}

/* Input row */
.tutor-input-row {
display: flex;
align-items: stretch;
gap: 0;
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
background: var(--bg);
transition: border-color 0.2s ease;
}
.tutor-input-row:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
.tutor-input-row textarea {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.tutor-input-row textarea:focus {
box-shadow: none !important;
border: none !important;
}

/* ============================================================
   TOPIC PROGRESS — circular progress rings + tick marks
   ============================================================ */

/* Progress ring wrapper (used inline in topic rows + chapter headers) */
.progress-ring-wrap {
display: inline-block;
vertical-align: middle;
position: relative;
}

.progress-ring-wrap svg {
display: block;
}

/* Topic tick button — circular, sits at the right of each topic row */
.topic-tick-btn {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.topic-tick-btn:hover {
transform: scale(1.15);
border-color: var(--accent) !important;
}

.topic-tick-btn.ticked {
box-shadow: 0 0 12px rgba(0, 255, 136, 0.3);
}

/* Topic row — good spacing, not too tight, not too loose */
.topic-row {
border: 1px solid transparent;
}

.topic-row:hover {
border-color: rgba(255, 255, 255, 0.06);
}

/* The topic PDF viewer reuses the .book-pdf-viewer styles already
   defined for the Books page. No additional CSS needed — it uses
   the same overlay + bar + iframe layout. */

/* Progress label in the PDF viewer bar */
#topicPdfProgressLabel {
min-width: 36px;
text-align: right;
transition: color 0.3s ease;
}

/* ============================================================
   CUSTOM PDF VIEWER — dark-themed, canvas-based, global overlay
   Uses PDF.js to render PDFs without the browser's default viewer UI.
   ============================================================ */

.sf-pdf-viewer {
position: fixed;
inset: 0;
z-index: 10000;  /* above everything: nav, footer, modals */
background: #0a0f1e;
display: flex;
flex-direction: column;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}

.sf-pdf-viewer.active {
opacity: 1;
pointer-events: all;
}

/* --- Toolbar --- */
.sf-pdf-toolbar {
height: 56px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background: rgba(2, 6, 23, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
gap: 0.5rem;
}

.sf-pdf-toolbar-left,
.sf-pdf-toolbar-center,
.sf-pdf-toolbar-right {
display: flex;
align-items: center;
gap: 0.5rem;
}

.sf-pdf-toolbar-left {
flex: 1;
min-width: 0;
}

.sf-pdf-toolbar-right {
flex: 1;
justify-content: flex-end;
}

.sf-pdf-toolbar-center {
flex-shrink: 0;
}

.sf-pdf-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
margin-left: 0.5rem;
}

/* --- Toolbar buttons --- */
.sf-pdf-btn {
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid var(--border);
background: transparent;
color: var(--fg-dim);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
transition: all 0.2s ease;
flex-shrink: 0;
text-decoration: none;
}

.sf-pdf-btn:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-glow);
}

.sf-pdf-btn:active {
transform: scale(0.95);
}

.sf-pdf-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}

.sf-pdf-btn:disabled:hover {
border-color: var(--border);
color: var(--fg-dim);
background: transparent;
}

.sf-pdf-close-btn {
background: var(--accent-glow);
border-color: var(--border-accent);
color: var(--accent);
}

.sf-pdf-download-btn {
width: auto;
padding: 0 12px;
}

/* --- Page info + zoom label --- */
.sf-pdf-page-info {
font-family: 'Space Grotesk', sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--fg);
min-width: 64px;
text-align: center;
}

.sf-pdf-zoom-label {
font-family: 'Space Grotesk', sans-serif;
font-size: 12px;
font-weight: 600;
color: var(--fg-dim);
min-width: 42px;
text-align: center;
}

/* --- Progress badge (shown when tracking reading progress) --- */
.sf-pdf-progress-badge {
background: var(--accent-glow);
border: 1px solid var(--border-accent);
border-radius: 8px;
padding: 4px 10px;
font-family: 'Space Grotesk', sans-serif;
font-size: 12px;
font-weight: 700;
color: var(--accent);
min-width: 42px;
text-align: center;
margin-left: 0.5rem;
transition: all 0.3s ease;
}

/* --- PDF body (scrollable canvas area) --- */
/* IMPORTANT: use display:block (NOT flexbox). Flexbox with
   justify-content:center prevents scrolling — the top of the
   canvas gets clipped and you can't scroll up to it. Block
   layout with margin:auto on the canvas-wrap centers the
   canvas horizontally while allowing full vertical scroll. */
.sf-pdf-body {
flex: 1;
overflow: auto;
display: block;
padding: 1.5rem 1rem;
background: #0a0f1e;
background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,255,136,0.03) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(56,189,248,0.02) 0%, transparent 50%);
}

.sf-pdf-body::-webkit-scrollbar {
width: 8px;
}

.sf-pdf-body::-webkit-scrollbar-track {
background: transparent;
}

.sf-pdf-body::-webkit-scrollbar-thumb {
background: var(--muted);
border-radius: 4px;
}

.sf-pdf-body::-webkit-scrollbar-thumb:hover {
background: var(--fg-dim);
}

.sf-pdf-canvas-wrap {
margin: 0 auto;           /* center horizontally (replaces flexbox) */
width: fit-content;       /* shrink to canvas size */
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
border-radius: 4px;
overflow: hidden;
}

#sfPdfCanvas {
display: block;
background: #fff;
/* Prevent browser from applying image smoothing when the canvas
   is displayed at a different size than its internal resolution.
   We render at 2x internally, so we want crisp pixel scaling. */
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}

/* --- Loading overlay --- */
.sf-pdf-loading {
position: absolute;
inset: 56px 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(10, 15, 30, 0.95);
z-index: 10;
}

/* --- Responsive: collapse toolbar on small screens --- */
@media (max-width: 640px) {
.sf-pdf-toolbar {
    height: 50px;
    padding: 0 0.5rem;
    gap: 0.25rem;
}
.sf-pdf-btn {
    width: 32px;
    height: 32px;
    font-size: 12px;
}
.sf-pdf-title {
    font-size: 12px;
    max-width: 100px;
}
.sf-pdf-zoom-label {
    display: none;
}
.sf-pdf-download-btn {
    padding: 0 8px;
}
.sf-pdf-body {
    padding: 0.5rem;
}
}

/* ============================================================
   DONATE PAGE — warm gold/amber theme, intentionally different
   from the main site's green/cyan dark theme.
   ============================================================ */

.donate-page {
min-height: calc(100vh - 60px);
background: linear-gradient(180deg, #0a0a0f 0%, #14100a 50%, #0a0a0f 100%);
}

/* --- Hero section --- */
.donate-hero {
background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(249,115,22,0.04) 50%, transparent 100%);
padding: 4rem 1.5rem 3rem;
text-align: center;
border-bottom: 1px solid rgba(245,158,11,0.1);
}

.donate-hero-inner {
max-width: 100%;
margin: 0 auto;
}

.donate-heart-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #f59e0b, #f97316);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 36px;
color: #fff;
margin-bottom: 1.5rem;
box-shadow: 0 10px 40px rgba(245,158,11,0.3);
animation: donateHeartPulse 2s ease-in-out infinite;
}

@keyframes donateHeartPulse {
0%, 100% { transform: scale(1); box-shadow: 0 10px 40px rgba(245,158,11,0.3); }
50% { transform: scale(1.05); box-shadow: 0 15px 50px rgba(245,158,11,0.4); }
}

.donate-title {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 700;
color: #f8fafc;
margin: 0 0 1rem 0;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #fbbf24, #f59e0b, #f97316);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.donate-desc {
font-size: 15px;
line-height: 1.8;
color: #d4d4d8;
max-width: 600px;
margin: 0 auto;
}

/* --- Wallets section --- */
.donate-wallets-section {
padding: 3rem 1.5rem;
}

.donate-wallets-inner {
max-width: 900px;
margin: 0 auto;
}

.donate-section-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.4rem;
font-weight: 700;
color: #f8fafc;
text-align: center;
margin: 0 0 0.3rem 0;
}

.donate-section-sub {
text-align: center;
font-size: 13px;
color: #a1a1aa;
margin: 0 0 2rem 0;
}

.donate-wallets-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 1rem;
}

/* --- Wallet card --- */
.donate-wallet-card {
background: linear-gradient(135deg, rgba(245,158,11,0.05), rgba(249,115,22,0.02));
border: 1px solid rgba(245,158,11,0.15);
border-radius: 14px;
padding: 1.1rem 1.25rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
animation: donateCardIn 0.4s ease forwards;
opacity: 0;
}

@keyframes donateCardIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}

.donate-wallet-card:hover {
border-color: rgba(245,158,11,0.4);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(0,0,0,0.3), 0 0 20px rgba(245,158,11,0.1);
}

.donate-wallet-card.copied {
border-color: #22c55e;
background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(34,197,94,0.02));
}

.donate-wallet-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.6rem;
}

.donate-crypto-symbol {
width: 42px;
height: 42px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 700;
border: 1px solid;
flex-shrink: 0;
}

.donate-wallet-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}

.donate-crypto-name {
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 700;
color: #f8fafc;
}

.donate-crypto-short {
font-size: 11px;
color: #a1a1aa;
font-weight: 600;
}

.donate-copy-icon {
color: #71717a;
font-size: 14px;
transition: color 0.2s;
}

.donate-wallet-card:hover .donate-copy-icon {
color: #f59e0b;
}

.donate-wallet-label {
font-size: 12px;
color: #a1a1aa;
margin: 0 0 0.5rem 0;
}

.donate-wallet-address {
font-family: 'Courier New', monospace;
font-size: 12px;
color: #d4d4d8;
background: rgba(0,0,0,0.3);
padding: 0.5rem 0.75rem;
border-radius: 8px;
word-break: break-all;
border: 1px solid rgba(255,255,255,0.05);
line-height: 1.5;
}

/* --- Empty state --- */
.donate-empty {
text-align: center;
padding: 3rem 2rem;
color: #71717a;
}

.donate-empty h3 {
color: #d4d4d8;
font-size: 1.1rem;
margin: 0 0 0.5rem 0;
}

.donate-empty p {
font-size: 14px;
margin: 0;
}

/* --- Edit button --- */
.donate-edit-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 24px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(249,115,22,0.08));
border: 1px solid rgba(245,158,11,0.25);
color: #f59e0b;
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
}

.donate-edit-btn:hover {
background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(249,115,22,0.12));
border-color: rgba(245,158,11,0.4);
transform: translateY(-1px);
}

/* --- Thank you section --- */
.donate-thankyou {
padding: 3rem 1.5rem 4rem;
text-align: center;
}

.donate-thankyou-inner {
max-width: 600px;
margin: 0 auto;
}

.donate-thankyou h3 {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.3rem;
font-weight: 700;
color: #f8fafc;
margin: 0 0 0.5rem 0;
}

.donate-thankyou p {
font-size: 14px;
line-height: 1.7;
color: #a1a1aa;
margin: 0;
}

/* --- Footer Donate button + layout --- */
.footer-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}

.footer-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.5rem;
}

.footer-donate-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 10px;
background: linear-gradient(135deg, #f59e0b, #f97316);
border: none;
color: #fff;
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 15px rgba(245,158,11,0.2);
}

.footer-donate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(245,158,11,0.3);
}

.footer-donate-btn:active {
transform: translateY(0);
}

/* Responsive: stack footer on small screens */
@media (max-width: 760px) {
.footer-row {
    flex-direction: column;
    text-align: center;
}
.footer-right {
    align-items: center;
}
.donate-wallets-grid {
    grid-template-columns: 1fr;
}
}

/* ============================================================
   FLASHCARDS + QUIZ LIBRARY PAGES
   Shared hierarchy UI: breadcrumb, card grid, accordion,
   topic rows, count badges, admin upload buttons.
   Used by both js/flashcards-library.js and js/quiz-library.js.
   ============================================================ */

.lib-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 10px;
background: rgba(15, 23, 42, 0.5);
border: 1px solid var(--border);
flex-wrap: wrap;
font-size: 13px;
}

.lib-empty {
text-align: center;
padding: 4rem 2rem;
}

.lib-empty-icon {
width: 80px;
height: 80px;
border-radius: 20px;
background: rgba(0, 255, 136, 0.06);
border: 1px solid rgba(0, 255, 136, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}

.lib-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}

.lib-card {
padding: 1.25rem;
border-radius: 14px;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lib-card-icon {
width: 48px;
height: 48px;
border-radius: 12px;
border: 1px solid transparent;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

/* Accordion (chapters in subject view) */
.lib-accordion {
display: flex;
flex-direction: column;
gap: 0.75rem;
}

.lib-accordion-item {
background: var(--card-solid);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
animation: cardSlideUp 0.4s ease forwards;
opacity: 0;
}

.lib-accordion-item.open {
border-color: var(--border-accent);
}

.lib-accordion-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.9rem 1rem;
cursor: pointer;
background: rgba(255, 255, 255, 0.03);
border-bottom: 1px solid transparent;
transition: background 0.2s;
}

.lib-accordion-item.open .lib-accordion-header {
border-bottom-color: rgba(255, 255, 255, 0.05);
}

.lib-accordion-header:hover {
background: rgba(255, 255, 255, 0.06);
}

.lib-accordion-arrow {
color: var(--muted);
font-size: 11px;
flex-shrink: 0;
transition: transform 0.2s;
}

.lib-accordion-body {
padding: 0.5rem 0.75rem 0.75rem 0.75rem;
background: rgba(0, 0, 0, 0.1);
}

/* Count badge in the accordion header */
.lib-count-badge {
font-size: 11px;
color: var(--muted);
padding: 4px 10px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.05);
white-space: nowrap;
flex-shrink: 0;
}

/* Topic list inside an expanded chapter */
.lib-topic-list {
display: flex;
flex-direction: column;
gap: 6px;
}

.lib-topic-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
transition: all 0.2s;
cursor: pointer;
}

.lib-topic-row:hover {
background: rgba(255, 255, 255, 0.06);
transform: translateX(2px);
}

.lib-topic-title {
font-size: 13px;
color: var(--fg);
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* Per-topic count pill — shows how many cards/questions are in the topic */
.lib-count-pill {
font-size: 10.5px;
font-weight: 600;
padding: 3px 9px;
border-radius: 20px;
white-space: nowrap;
flex-shrink: 0;
font-family: 'Space Grotesk', sans-serif;
}

.lib-count-pill.has {
background: rgba(0, 255, 136, 0.1);
color: var(--accent);
border: 1px solid rgba(0, 255, 136, 0.18);
}

.lib-count-pill.empty {
background: rgba(255, 255, 255, 0.03);
color: var(--muted);
border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Admin upload / delete buttons on each topic row */
.lib-admin-btn {
width: 26px;
height: 26px;
border-radius: 7px;
background: rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.18);
color: var(--info);
font-size: 11px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s;
}

.lib-admin-btn:hover {
background: rgba(56, 189, 248, 0.2);
transform: scale(1.08);
}

.lib-admin-btn.danger {
background: rgba(244, 63, 94, 0.1);
border-color: rgba(244, 63, 94, 0.18);
color: var(--danger);
}

.lib-admin-btn.danger:hover {
background: rgba(244, 63, 94, 0.2);
}

/* Responsive: stack accordion header items on small screens */
@media (max-width: 640px) {
.lib-grid {
    grid-template-columns: 1fr;
}

.lib-accordion-header {
    flex-wrap: wrap;
}

.lib-count-badge {
    order: 3;
    margin-left: 22px;
}
}

/* ============================================================
   ENHANCED LIBRARY UI — beautiful subject/level cards,
   prominent page headers, distinct breadcrumbs, smoother
   accordions and topic rows. Used by both flashcards-library.js
   and quiz-library.js.
   ============================================================ */

/* Page header (icon + title + description) */
.lib-page {
max-width: 100%;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}

.lib-page-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}

.lib-page-title {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.9rem;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0;
}

.lib-page-title-icon {
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(0, 255, 136, 0.18), rgba(0, 255, 136, 0.04));
border: 1px solid rgba(0, 255, 136, 0.22);
color: var(--accent);
font-size: 22px;
box-shadow: 0 0 24px rgba(0, 255, 136, 0.12);
flex-shrink: 0;
}

.lib-page-title-icon.violet {
background: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(167, 139, 250, 0.04));
border-color: rgba(167, 139, 250, 0.22);
color: var(--purple);
box-shadow: 0 0 24px rgba(167, 139, 250, 0.12);
}

.lib-page-desc {
color: var(--fg-dim);
font-size: 14px;
line-height: 1.6;
margin: 8px 0 0 60px;
max-width: 640px;
}

/* Distinct breadcrumb with icon background and dividers */
.lib-breadcrumb-enhanced {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 12px;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.4));
border: 1px solid var(--border);
flex-wrap: wrap;
font-size: 13px;
margin-bottom: 1.75rem;
}

.lib-breadcrumb-enhanced .lib-crumb {
color: var(--muted);
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: all 0.18s;
text-decoration: none;
}

.lib-breadcrumb-enhanced .lib-crumb:hover {
color: var(--fg);
background: rgba(255, 255, 255, 0.05);
}

.lib-breadcrumb-enhanced .lib-crumb.current {
color: var(--fg);
font-weight: 600;
background: rgba(255, 255, 255, 0.04);
}

.lib-breadcrumb-enhanced .lib-crumb-sep {
color: var(--muted);
opacity: 0.5;
font-size: 11px;
}

/* Sub-view header (used inside level/subject views) */
.lib-sub-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
}

.lib-sub-title-row {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}

.lib-sub-title-icon {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border);
flex-shrink: 0;
}

.lib-sub-title {
font-size: 1.55rem;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

/* ---- Beautiful SUBJECT CARD ----
   - colored gradient background tinted from the subject's color
   - large icon badge
   - colored top accent bar
   - count badge aggregating items across chapters/topics
   - hover: lift + glow */
.lib-subject-card {
position: relative;
padding: 1.4rem 1.25rem 1.25rem;
border-radius: 16px;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.06);
overflow: hidden;
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
            border-color 0.28s ease;
isolation: isolate;
}

/* Colored top accent bar (uses CSS var --card-accent set inline) */
.lib-subject-card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--card-accent, var(--accent));
opacity: 0.95;
z-index: 2;
}

/* Soft radial glow tinted with the subject color */
.lib-subject-card::after {
content: '';
position: absolute;
inset: 0;
background:
    radial-gradient(circle at top right, var(--card-tint, rgba(0, 255, 136, 0.08)), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 60%);
pointer-events: none;
z-index: 0;
}

.lib-subject-card > * {
position: relative;
z-index: 1;
}

.lib-subject-card:hover {
transform: translateY(-6px);
border-color: var(--card-accent, var(--accent));
box-shadow:
    0 14px 32px -12px rgba(0, 0, 0, 0.5),
    0 0 28px -8px var(--card-tint, rgba(0, 255, 136, 0.18));
}

.lib-subject-card-top {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 1rem;
}

.lib-subject-icon {
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
flex-shrink: 0;
background: var(--card-tint, rgba(0, 255, 136, 0.12));
border: 1px solid var(--card-tint-border, rgba(0, 255, 136, 0.22));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.lib-subject-info {
flex: 1;
min-width: 0;
}

.lib-subject-name {
font-size: 1.05rem;
font-weight: 700;
color: var(--fg);
margin: 0 0 2px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: -0.01em;
}

.lib-subject-desc {
font-size: 12.5px;
color: var(--fg-dim);
margin: 0;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.lib-subject-stats {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding-top: 0.85rem;
margin-top: 0.25rem;
border-top: 1px dashed rgba(255, 255, 255, 0.06);
}

.lib-stat-pill {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
font-weight: 600;
padding: 4px 10px;
border-radius: 20px;
background: var(--card-tint, rgba(0, 255, 136, 0.1));
color: var(--card-accent, var(--accent));
border: 1px solid var(--card-tint-border, rgba(0, 255, 136, 0.18));
font-family: 'Space Grotesk', sans-serif;
white-space: nowrap;
}

.lib-stat-pill.muted {
background: rgba(255, 255, 255, 0.03);
color: var(--muted);
border-color: rgba(255, 255, 255, 0.05);
}

.lib-subject-card .lib-admin-btn {
position: absolute;
top: 14px;
right: 14px;
z-index: 3;
}

/* ---- LEVEL CARD (simpler variant) ---- */
.lib-level-card {
position: relative;
padding: 1.4rem 1.25rem;
border-radius: 16px;
cursor: pointer;
border: 1px solid rgba(56, 189, 248, 0.12);
overflow: hidden;
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
            border-color 0.28s ease;
background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(56, 189, 248, 0.015));
}

.lib-level-card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, var(--info), var(--accent));
z-index: 2;
}

.lib-level-card:hover {
transform: translateY(-6px);
border-color: rgba(56, 189, 248, 0.45);
box-shadow:
    0 14px 32px -12px rgba(0, 0, 0, 0.5),
    0 0 28px -10px rgba(56, 189, 248, 0.35);
}

.lib-level-card-top {
display: flex;
align-items: center;
gap: 14px;
position: relative;
z-index: 1;
}

.lib-level-icon {
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
background: rgba(56, 189, 248, 0.16);
border: 1px solid rgba(56, 189, 248, 0.22);
color: var(--info);
}

.lib-level-info {
flex: 1;
min-width: 0;
}

.lib-level-name {
font-size: 1.05rem;
font-weight: 700;
color: var(--fg);
margin: 0 0 2px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: -0.01em;
}

.lib-level-desc {
font-size: 12.5px;
color: var(--fg-dim);
margin: 0;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.lib-level-stats {
margin-top: 0.9rem;
padding-top: 0.85rem;
border-top: 1px dashed rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
gap: 8px;
position: relative;
z-index: 1;
}

.lib-level-card .lib-admin-btn {
position: absolute;
top: 14px;
right: 14px;
z-index: 3;
}

/* ---- ENHANCED ACCORDION ---- */
.lib-accordion-item {
position: relative;
}

.lib-accordion-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--warning);
opacity: 0;
transition: opacity 0.2s;
border-radius: 14px 0 0 14px;
}

.lib-accordion-item.open::before {
opacity: 1;
}

.lib-accordion-header {
padding: 1rem 1.1rem 1rem 1.3rem;
}

.lib-accordion-chapter-icon {
width: 32px;
height: 32px;
border-radius: 9px;
background: rgba(245, 158, 11, 0.1);
border: 1px solid rgba(245, 158, 11, 0.18);
color: var(--warning);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 13px;
}

/* ENHANCED TOPIC ROW — bigger, clearer, with prominent count pill */
.lib-topic-row {
padding: 10px 12px;
gap: 12px;
border: 1px solid transparent;
}

.lib-topic-row:hover {
background: rgba(0, 255, 136, 0.04);
border-color: rgba(0, 255, 136, 0.1);
transform: translateX(3px);
}

.lib-topic-icon {
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(0, 255, 136, 0.08);
border: 1px solid rgba(0, 255, 136, 0.12);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 12px;
}

.lib-topic-icon.violet {
background: rgba(167, 139, 250, 0.08);
border-color: rgba(167, 139, 250, 0.12);
color: var(--purple);
}

.lib-count-pill {
font-size: 11px;
padding: 4px 10px;
border-radius: 999px;
}

.lib-count-pill.has {
background: linear-gradient(135deg, rgba(0, 255, 136, 0.16), rgba(0, 255, 136, 0.08));
color: var(--accent);
border: 1px solid rgba(0, 255, 136, 0.28);
box-shadow: 0 0 10px -2px rgba(0, 255, 136, 0.18);
}

/* Empty state enhancement */
.lib-empty-icon {
background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 255, 136, 0.02));
border: 1px solid rgba(0, 255, 136, 0.14);
}

/* Smaller screen tweaks */
@media (max-width: 640px) {
.lib-page {
    padding: 1.5rem 1rem 3rem;
}
.lib-page-title {
    font-size: 1.5rem;
}
.lib-page-desc {
    margin-left: 0;
}
.lib-page-title-icon {
    width: 42px;
    height: 42px;
    font-size: 20px;
    border-radius: 12px;
}
.lib-subject-card,
.lib-level-card {
    padding: 1.1rem 1rem 1rem;
}
.lib-subject-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
}
.lib-level-icon {
    width: 46px;
    height: 46px;
    font-size: 20px;
}
.lib-subject-name,
.lib-level-name {
    font-size: 1rem;
}
}