:root{--bg:#0b1220;--panel:rgba(17,24,39,.45);--muted:#a6b3c6;--text:#e9edf5;--primary:#6d6df8;--danger:#ef4444;--card:rgba(11,18,32,.35);--border:rgba(255,255,255,.12);--glow:#6d6df8}
:root[data-theme="light"]{--bg:#eef2f7;--panel:rgba(255,255,255,.55);--muted:#475569;--text:#0f1525;--primary:#4f46e5;--danger:#ef4444;--card:rgba(255,255,255,.6);--border:rgba(0,0,0,.08);--glow:#7e8cff}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 800px at 10% -10%, rgba(109,109,248,.25), transparent 40%), radial-gradient(800px 600px at 110% 50%, rgba(151,71,255,.18), transparent 40%), linear-gradient(135deg,var(--bg),#0a0f1e);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,"SF Pro Display","SF Pro Text",Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;transition:background .35s ease,color .35s ease}
a{color:inherit;text-decoration:none}
.fade-in{animation:fadeIn .4s ease}
.slide-up{animation:slideUp .45s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Glass basics */
.glass{background:var(--panel);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border:1px solid var(--border);box-shadow:0 8px 30px rgba(0,0,0,.25)}
.glow{box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 10px 30px rgba(109,109,248,.25)}

/* Layout */
.layout{display:flex;min-height:100vh}
/* iPhone-like bottom nav as sidebar */
.sidebar{width:280px;padding:20px;position:sticky;top:0;height:100vh}
.sidebar .nav{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sidebar .nav-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;color:var(--text);opacity:.9;transition:transform .2s ease,opacity .2s ease,background .2s ease}
.sidebar .nav-link:hover{transform:translateY(-2px);opacity:1;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));box-shadow:0 8px 20px rgba(0,0,0,.18)}
.logo-wrap{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.logo-img{width:34px;height:34px;filter:drop-shadow(0 6px 14px rgba(109,109,248,.35))}
.logo-title{font-weight:700;letter-spacing:.2px}
.content{flex:1;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;position:sticky;top:0;z-index:10}
.topbar.glass{border-radius:16px;margin:10px 10px 0 10px}
.brand{display:flex;align-items:center;gap:8px}
.brand-logo{width:24px;height:24px}
.brand-title{font-weight:700;letter-spacing:.2px;text-shadow:0 1px 1px rgba(0,0,0,.2)}
.sidebar-toggle{display:none}
.page{padding:20px}
.footer{padding:16px}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}
.card{border-radius:16px;padding:16px;transform-style:preserve-3d;transition:transform .25s ease, box-shadow .25s ease}
.card.glass{background:var(--card)}
.card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.card-title{color:var(--muted);font-size:14px}
.card-value{font-size:34px;font-weight:800;letter-spacing:.3px}
.card-icon{font-size:20px;margin-bottom:8px;filter:drop-shadow(0 6px 14px rgba(109,109,248,.35))}

/* Buttons */
.btn{display:inline-block;padding:10px 16px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));color:var(--text);transition:transform .15s ease, box-shadow .2s ease, background .2s ease;border:1px solid var(--border);backdrop-filter:blur(12px)}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,0,0,.25)}
.btn-primary{background:linear-gradient(180deg, var(--primary), color-mix(in oklab, var(--primary) 70%, black 15%));border-color:transparent;color:#fff}
.btn-danger{background:linear-gradient(180deg, var(--danger), color-mix(in oklab, var(--danger) 70%, black 15%));border-color:transparent;color:#fff}
.btn-sm{padding:6px 10px;font-size:12px;border-radius:12px}

/* Forms */
.form label{display:block;margin-top:10px;margin-bottom:6px;color:var(--muted)}
.form input[type=text],.form input[type=password],.form input[type=file],.form textarea,.form select{width:100%;padding:12px 12px;border-radius:14px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));backdrop-filter:blur(10px);color:var(--text);transition:box-shadow .2s ease, transform .1s ease}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;box-shadow:0 0 0 2px color-mix(in oklab, var(--primary) 50%, white 20%) inset}
:root[data-theme="light"] .form input[type=text],:root[data-theme="light"] .form input[type=password],:root[data-theme="light"] .form input[type=file],:root[data-theme="light"] .form textarea,:root[data-theme="light"] .form select{background:rgba(255,255,255,.75)}
.alert{padding:10px 12px;border-radius:14px;margin:10px 0}
.alert-success{background:linear-gradient(180deg, rgba(34,197,94,.25), rgba(34,197,94,.15));color:#d1fae5;border:1px solid rgba(34,197,94,.35)}
.alert-danger{background:linear-gradient(180deg, rgba(239,68,68,.25), rgba(239,68,68,.15));color:#fee2e2;border:1px solid rgba(239,68,68,.35)}
.switch{display:flex;align-items:center;gap:8px;margin:10px 0}
.switches{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:10px 0}

/* Glass cards grid for books */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.glass-card{background:var(--card);backdrop-filter:blur(14px) saturate(160%);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .25s ease, box-shadow .25s ease}
.glass-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.book-card .book-cover{aspect-ratio: 3/4;overflow:hidden}
.book-card .book-cover img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(110%)}
.book-card .book-meta{padding:10px}
.book-card .book-title{font-weight:700}
.book-card .book-sub{color:var(--muted);font-size:12px}
.book-card .book-actions{display:flex;gap:8px;padding:10px}

/* Table (kept for other pages) */
.table{width:100%;border-collapse:collapse;background:var(--card);border-radius:16px;overflow:hidden}
.table th,.table td{padding:12px;border-bottom:1px solid var(--border);text-align:left}
.mt{margin-top:12px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Auth */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(1200px 800px at 10% -10%, rgba(109,109,248,.25), transparent 40%), radial-gradient(800px 600px at 110% 50%, rgba(151,71,255,.18), transparent 40%), linear-gradient(135deg,var(--bg),#0a0f1e)}
.auth-card{padding:24px;border-radius:18px}
.auth-card.glass{background:var(--panel)}
.auth-card h1{margin-top:0;text-align:center}
.auth-logo{display:flex;justify-content:center;margin-bottom:10px}
.auth-logo img{width:56px;height:56px;filter:drop-shadow(0 8px 20px rgba(109,109,248,.35))}

/* Responsive */
@media(max-width:900px){
  .sidebar{position:fixed;left:0;top:auto;bottom:0;height:auto;width:100%;padding:12px 16px;z-index:20}
  .sidebar .nav{grid-auto-flow:column;grid-auto-columns:1fr}
  .content{padding-bottom:68px}
  .topbar{position:sticky}
}