
:root {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --bg: #f8fafc;
  --bg-dark: #0f172a;
  --card-bg: rgba(255,255,255,0.75);
  --card-border: rgba(255,255,255,0.3);
  --text: #1e293b;
  --text-muted: #64748b;
  --glass-blur: 16px;
  --radius: 16px;
  --shadow: 0 8px 32px rgba(0,0,0,0.08);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
}
.dark-mode {
  --bg: #0f172a;
  --card-bg: rgba(30,41,59,0.7);
  --card-border: rgba(255,255,255,0.1);
  --text: #f1f5f9;
  --text-muted: #94a3b8;
}
* {margin:0;padding:0;box-sizing:border-box;}
body {font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;background:var(--bg);color:var(--text);line-height:1.6;transition:all .3s ease;overflow-x:hidden;}
a {color:inherit;text-decoration:none;}
.glass-nav {position:sticky;top:0;z-index:100;background:var(--card-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-bottom:1px solid var(--card-border);box-shadow:var(--shadow);}
.nav-container {max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:20px;}
.logo {font-weight:800;font-size:20px;display:flex;align-items:center;gap:8px;color:var(--primary);}
.nav-search {position:relative;flex:1;max-width:400px;}
.nav-search input {width:100%;padding:10px 40px 10px 16px;border-radius:24px;border:1px solid var(--card-border);background:rgba(255,255,255,0.6);backdrop-filter:blur(8px);outline:none;transition:.2s;}
.nav-search i {position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);}
.search-dropdown {position:absolute;top:110%;left:0;right:0;background:var(--card-bg);backdrop-filter:blur(20px);border:1px solid var(--card-border);border-radius:12px;box-shadow:var(--shadow-lg);max-height:400px;overflow-y:auto;display:none;z-index:200;}
.search-dropdown.active{display:block;}
.search-item{padding:12px 16px;display:flex;gap:12px;align-items:center;cursor:pointer;border-bottom:1px solid rgba(0,0,0,0.05);}
.search-item:hover{background:rgba(99,102,241,0.08);}
.search-item img{width:40px;height:56px;object-fit:cover;border-radius:6px;}
.nav-links{display:flex;align-items:center;gap:12px;}
.btn-glass{padding:8px 16px;border-radius:20px;background:rgba(255,255,255,0.6);border:1px solid var(--card-border);backdrop-filter:blur(8px);cursor:pointer;transition:.2s;font-size:14px;display:inline-flex;align-items:center;gap:6px;}
.btn-glass:hover{background:rgba(255,255,255,0.9);transform:translateY(-1px);}
.btn-primary{padding:10px 20px;border-radius:24px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;cursor:pointer;transition:.2s;font-weight:600;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 12px rgba(99,102,241,0.3);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(99,102,241,0.4);}
.btn-sm{padding:6px 14px;font-size:13px;}
.btn-lg{padding:14px 28px;font-size:16px;}
.btn-block{width:100%;justify-content:center;}
.icon-btn{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,0.6);border:1px solid var(--card-border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;}
.icon-btn:hover{background:#fff;transform:scale(1.05);}
.user-badge{padding:6px 12px;background:var(--primary);color:#fff;border-radius:20px;font-size:12px;font-weight:600;}
.glass-card{background:var(--card-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);transition:.3s;}
.glass-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.glass-panel{background:var(--card-bg);backdrop-filter:blur(var(--glass-blur));border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;}
.hero{padding:60px 24px;max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:40px;min-height:70vh;}
.hero-content{display:flex;gap:40px;width:100%;align-items:center;}
.hero-text{flex:1;}
.badge-glass{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.2);border-radius:20px;color:var(--primary);font-size:13px;font-weight:600;margin-bottom:16px;}
.hero-text h1{font-size:48px;line-height:1.1;font-weight:800;margin-bottom:16px;letter-spacing:-1px;}
.gradient-text{background:linear-gradient(135deg,var(--primary),#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hero-text p{font-size:18px;color:var(--text-muted);margin-bottom:24px;max-width:560px;}
.hero-actions{display:flex;gap:12px;margin-bottom:32px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:32px;}
.hero-stats div{display:flex;flex-direction:column;}
.hero-stats strong{font-size:28px;font-weight:800;}
.hero-stats span{font-size:13px;color:var(--text-muted);}
.hero-visual{flex:1;position:relative;display:flex;justify-content:center;align-items:center;min-height:400px;}
.book-preview{width:220px;height:300px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:#fff;position:relative;transform:rotate(-5deg);box-shadow:0 30px 60px rgba(99,102,241,0.4);}
.book-cover{font-size:64px;}
.book-lines span{display:block;width:120px;height:4px;background:rgba(255,255,255,0.4);border-radius:2px;margin:8px 0;}
.floating-card{position:absolute;padding:10px 16px;border-radius:12px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;animation:float 3s ease-in-out infinite;}
.card-1{top:20px;right:20px;animation-delay:.5s;}
.card-2{bottom:40px;left:0;animation-delay:1s;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.section{max-width:1400px;margin:40px auto;padding:0 24px;}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.section-header h2{font-size:24px;font-weight:700;display:flex;align-items:center;gap:10px;}
.grid-books{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;}
.book-card{overflow:hidden;display:flex;flex-direction:column;}
.book-cover-wrap{position:relative;height:200px;overflow:hidden;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);display:flex;align-items:center;justify-content:center;}
.book-cover-wrap img{width:100%;height:100%;object-fit:cover;}
.cover-placeholder{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;background:#e2e8f0;color:#64748b;}
.badge-featured{position:absolute;top:10px;left:10px;background:#f59e0b;color:#fff;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:700;}
.badge-progress{position:absolute;top:10px;right:10px;background:var(--primary);color:#fff;padding:4px 10px;border-radius:12px;font-size:11px;}
.book-info{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.book-category{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--primary);font-weight:700;}
.book-info h4{font-size:16px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.book-info p{font-size:13px;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.book-meta{display:flex;gap:12px;font-size:12px;color:var(--text-muted);margin-top:auto;}
.grid-categories{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.category-card{padding:16px;display:flex;align-items:center;gap:16px;transition:.2s;}
.category-card:hover{transform:translateY(-2px);}
.cat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.list-books{display:flex;flex-direction:column;gap:12px;}
.list-item{padding:12px;display:flex;gap:12px;align-items:center;}
.list-cover{width:48px;height:64px;background:#f1f5f9;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.list-cover img{width:100%;height:100%;object-fit:cover;}
.list-item div{display:flex;flex-direction:column;}
.list-item strong{font-size:14px;}
.list-item span{font-size:12px;color:var(--text-muted);}
.auth-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(1200px 600px at 20% -10%, #a5b4fc55, transparent), radial-gradient(800px 400px at 100% 0%, #f0abfc55, transparent), var(--bg);}
.auth-card{width:100%;max-width:440px;padding:32px;}
.auth-header{text-align:center;margin-bottom:24px;}
.auth-logo{width:64px;height:64px;background:linear-gradient(135deg,var(--primary),#ec4899);border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;margin:0 auto 16px;}
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--card-border);background:rgba(255,255,255,0.8);outline:none;transition:.2s;font-size:14px;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,0.15);}
.form-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:13px;}
.checkbox{display:flex;align-items:center;gap:6px;cursor:pointer;}
.alert{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:13px;}
.alert-error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;}
.alert-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#16a34a;}
.auth-footer{text-align:center;margin-top:20px;font-size:13px;color:var(--text-muted);}
.demo-box{margin-top:16px;padding:12px;font-size:11px;line-height:1.4;}
.library-layout{display:flex;gap:24px;max-width:1400px;margin:20px auto;padding:0 24px;}
.filter-sidebar{width:280px;height:fit-content;position:sticky;top:80px;}
.library-main{flex:1;}
.library-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.empty-state{padding:60px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-muted);}
.empty-state i{font-size:48px;opacity:.5;}
.glass-footer{margin-top:60px;background:var(--card-bg);backdrop-filter:blur(16px);border-top:1px solid var(--card-border);padding:40px 24px 20px;}
.footer-container{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;}
.footer-bottom{text-align:center;margin-top:30px;padding-top:20px;border-top:1px solid var(--card-border);font-size:12px;color:var(--text-muted);}
.mobile-menu-btn{display:none;}
.mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card-bg);backdrop-filter:blur(20px);border-top:1px solid var(--card-border);padding:16px;flex-direction:column;gap:12px;}
.mobile-menu.active{display:flex;}
.progress-bar{height:6px;background:#e2e8f0;border-radius:10px;overflow:hidden;margin:8px 0;}
.progress-bar div{height:100%;background:var(--primary);border-radius:10px;transition:.3s;}
.reader-layout{max-width:1400px;margin:20px auto;padding:0 24px;}
.reader-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:16px;}
.reader-stats-mini{display:flex;gap:16px;font-size:13px;}
.reader-stats-mini strong{color:var(--primary);}
.admin-layout{display:flex;min-height:100vh;}
.sidebar{width:260px;padding:20px;display:flex;flex-direction:column;gap:20px;position:sticky;top:0;height:100vh;overflow-y:auto;}
.sidebar-header{font-weight:800;font-size:18px;display:flex;align-items:center;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--card-border);}
.sidebar-nav{display:flex;flex-direction:column;gap:6px;}
.sidebar-nav a{padding:12px 14px;border-radius:12px;display:flex;align-items:center;gap:10px;transition:.2s;font-size:14px;}
.sidebar-nav a:hover{background:rgba(99,102,241,0.1);color:var(--primary);}
.admin-main{flex:1;padding:24px;background:#f8fafc;}
.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px;}
.stat-card{padding:20px;display:flex;align-items:center;gap:16px;}
.stat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;}
.stat-card h3{font-size:24px;font-weight:800;}
.stat-card p{font-size:12px;color:var(--text-muted);}
.admin-two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.panel h3{margin-bottom:16px;font-size:16px;}
.table{width:100%;border-collapse:collapse;font-size:13px;}
.table th{text-align:left;padding:10px 12px;font-weight:600;color:var(--text-muted);border-bottom:1px solid var(--card-border);}
.table td{padding:12px;border-bottom:1px solid rgba(0,0,0,0.05);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-grid .full{grid-column:1 / -1;}
.pagination{display:flex;gap:8px;margin-top:20px;}
.page-link{padding:8px 12px;border-radius:8px;background:var(--card-bg);border:1px solid var(--card-border);}
.page-link.active{background:var(--primary);color:#fff;}
.tag{display:inline-block;padding:4px 10px;background:rgba(99,102,241,0.1);border-radius:20px;font-size:11px;margin:4px;}
.badge{padding:4px 8px;border-radius:12px;font-size:10px;font-weight:700;text-transform:uppercase;}
.badge.active{background:#dcfce7;color:#16a34a;}
.badge.suspended{background:#fef3c7;color:#d97706;}
.badge.banned{background:#fee2e2;color:#dc2626;}
.activity-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(0,0,0,0.05);font-size:12px;}
@media(max-width:1024px){.hero-content{flex-direction:column;}.two-col,.admin-two-col{grid-template-columns:1fr;}.library-layout{flex-direction:column;}.filter-sidebar{width:100%;position:static;}.footer-container{grid-template-columns:1fr;}}
@media(max-width:768px){.nav-links{display:none;}.mobile-menu-btn{display:flex;}.hero-text h1{font-size:32px;}.grid-books{grid-template-columns:1fr 1fr;}.sidebar{position:fixed;z-index:1000;left:-100%;transition:.3s;}.sidebar.active{left:0;}.admin-layout{flex-direction:column;}.form-grid{grid-template-columns:1fr;}}
@media(max-width:480px){.grid-books{grid-template-columns:1fr;}}
/* Dark mode overrides */
.dark-mode body{background:#0f172a;}
.dark-mode .book-cover-wrap{background:#1e293b;}
.dark-mode .nav-search input{background:rgba(30,41,59,0.6);color:#fff;border-color:rgba(255,255,255,0.1);}
.dark-mode .form-group input,.dark-mode .form-group select,.dark-mode .form-group textarea{background:rgba(30,41,59,0.6);color:#fff;border-color:rgba(255,255,255,0.1);}
