/* ===== Design tokens ===== */
:root{
  --primary:#1E8E5A;
  --primary-dark:#14603D;
  --primary-darker:#0B3D27;
  --primary-light:#E3F5EA;
  --primary-lighter:#F2FBF6;
  --bg:#FAFAF8;
  --surface:#FFFFFF;
  --text:#1C1C1E;
  --text-muted:#6B7280;
  --border:#E7E7E2;
  --warm:#F2A93B;
  --danger:#E5484D;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow:0 4px 16px rgba(20,60,40,0.08);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Manrope','Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Poppins','Manrope',sans-serif;margin:0;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;}
img{max-width:100%;display:block;}

.app-shell{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--bg);
  position:relative;
  padding-bottom:84px;
}

/* ===== Top header ===== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px 8px;
}
.topbar .brand{font-size:20px;font-weight:800;color:var(--primary-darker);}
.topbar .brand span{color:var(--primary);}
.icon-btn{
  width:40px;height:40px;border-radius:50%;background:var(--surface);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;color:var(--text);
}
.icon-btn svg{width:20px;height:20px;}
.notif-dot{
  position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;
  background:var(--danger);border:2px solid var(--surface);
}
.header-row{display:flex;gap:10px;align-items:center;}

/* ===== Bottom nav ===== */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  max-width:480px;margin:0 auto;
  background:var(--surface);
  border-top:1px solid var(--border);
  display:flex;justify-content:space-around;align-items:center;
  padding:10px 0 calc(10px + env(safe-area-inset-bottom));
  z-index:40;
}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-muted);font-size:11px;font-weight:600;}
.nav-item svg{width:22px;height:22px;}
.nav-item.active{color:var(--primary);}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 20px;border-radius:999px;border:none;font-weight:700;font-size:15px;
  cursor:pointer;transition:transform .12s ease, opacity .12s ease;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--primary);}
.btn-block{width:100%;}
.btn-ghost{background:var(--primary-light);color:var(--primary-darker);}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:999px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn.is-loading{opacity:.85;cursor:wait;}
.btn-spinner{
  width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.5);border-top-color:#fff;
  display:inline-block;animation:btnspin .6s linear infinite;margin-right:6px;vertical-align:-2px;
}
.btn-outline .btn-spinner, .btn-ghost .btn-spinner{border-color:rgba(30,142,90,.3);border-top-color:var(--primary);}
@keyframes btnspin{to{transform:rotate(360deg);}}
.icon-btn.is-loading svg{display:none;}
.icon-btn .btn-spinner{margin:0;border-color:rgba(30,142,90,.3);border-top-color:var(--primary);}

/* ===== Forms ===== */
.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;font-weight:700;color:var(--text-muted);margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%;padding:13px 14px;border-radius:var(--radius-md);border:1.5px solid var(--border);
  font-size:15px;background:var(--surface);color:var(--text);
}
.field input:focus, .field textarea:focus, .field select:focus{outline:none;border-color:var(--primary);}
.field-hint{font-size:12px;color:var(--text-muted);margin-top:4px;}

/* ===== Auth screens ===== */
.auth-wrap{padding:40px 24px 24px;}
.auth-hero{
  background:linear-gradient(160deg,var(--primary-light),var(--bg) 70%);
  border-radius:0 0 40px 40px;
  padding:50px 24px 40px;text-align:center;margin:-1px -1px 0;
}
.auth-hero .logo-badge{
  width:72px;height:72px;border-radius:22px;background:var(--primary);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
  box-shadow:var(--shadow);
}
.auth-hero .logo-badge svg{width:36px;height:36px;color:#fff;}
.auth-hero h1{font-size:24px;color:var(--primary-darker);margin-bottom:8px;}
.auth-hero p{color:var(--text-muted);font-size:14px;line-height:1.5;max-width:280px;margin:0 auto;}
.auth-card{background:var(--surface);border-radius:var(--radius-lg);padding:24px;margin-top:-30px;box-shadow:var(--shadow);}
.auth-switch{text-align:center;margin-top:18px;font-size:14px;color:var(--text-muted);}
.auth-switch a{color:var(--primary);font-weight:700;}
.error-box{background:#FDECEC;color:var(--danger);padding:12px 14px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:14px;display:none;}

/* ===== Dashboard / library list ===== */
.section-title{font-size:19px;font-weight:800;padding:6px 20px 12px;}
.lib-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:18px;margin:0 20px 14px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow);
}
.lib-card .lib-icon{
  width:52px;height:52px;border-radius:16px;background:var(--primary-light);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.lib-card .lib-icon svg{width:26px;height:26px;}
.lib-card .lib-meta{flex:1;min-width:0;}
.lib-card .lib-meta h3{font-size:16px;margin-bottom:3px;}
.lib-card .lib-meta span{font-size:12.5px;color:var(--text-muted);}
.fab{
  position:fixed;bottom:96px;right:calc(50% - 240px + 20px);
  width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(20,120,70,.4);
  border:none;cursor:pointer;z-index:30;
}
@media (max-width:520px){.fab{right:20px;}}
.fab svg{width:26px;height:26px;}

/* ===== Tabs / chips ===== */
.tabs{display:flex;gap:8px;padding:4px 20px 16px;overflow-x:auto;}
.tab{
  padding:9px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--border);
  font-size:13.5px;font-weight:700;color:var(--text-muted);white-space:nowrap;cursor:pointer;
}
.tab.active{background:var(--primary);border-color:var(--primary);color:#fff;}

/* ===== Book grid ===== */
.book-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:0 20px 20px;}
.book-card{background:var(--surface);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);position:relative;}
.book-cover{width:100%;aspect-ratio:3/4.2;background:var(--primary-light);object-fit:cover;}
.book-cover-ph{width:100%;aspect-ratio:3/4.2;background:var(--primary-light);display:flex;align-items:center;justify-content:center;color:var(--primary);}
.book-info{padding:10px 10px 12px;}
.book-info h4{font-size:13.5px;line-height:1.3;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.book-info .author{font-size:11.5px;color:var(--text-muted);margin-bottom:6px;}
.status-badge{
  position:absolute;top:8px;left:8px;font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--primary-dark);text-transform:uppercase;letter-spacing:.3px;
}
.wish-btn{
  position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);
  border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.wish-btn svg{width:16px;height:16px;color:var(--text-muted);}
.wish-btn.active svg{color:var(--warm);fill:var(--warm);}
.empty-state{padding:60px 30px;text-align:center;color:var(--text-muted);}
.empty-state svg{width:56px;height:56px;color:var(--primary-light);margin:0 auto 14px;}

/* ===== Book detail ===== */
.detail-cover-wrap{padding:20px;display:flex;gap:16px;}
.detail-cover{width:120px;aspect-ratio:3/4.2;border-radius:var(--radius-md);object-fit:cover;background:var(--primary-light);box-shadow:var(--shadow);}
.detail-meta h2{font-size:19px;line-height:1.3;margin-bottom:6px;}
.detail-meta .author{color:var(--primary);font-weight:700;font-size:14px;margin-bottom:6px;}
.detail-meta .sub{font-size:12px;color:var(--text-muted);}
.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.tag{background:var(--primary-light);color:var(--primary-dark);font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;}
.stat-row{display:flex;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:6px 20px 0;}
.stat-item{flex:1;text-align:center;padding:14px 4px;border-right:1px solid var(--border);}
.stat-item:last-child{border-right:none;}
.stat-item strong{display:block;font-size:16px;}
.stat-item span{font-size:11px;color:var(--text-muted);}
.action-row{display:flex;gap:10px;padding:18px 20px;}
.status-select-row{display:flex;gap:8px;padding:0 20px 6px;}
.status-pill{
  flex:1;text-align:center;padding:11px 6px;border-radius:var(--radius-sm);border:1.5px solid var(--border);
  font-size:12.5px;font-weight:700;color:var(--text-muted);cursor:pointer;
}
.status-pill.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.section-block{padding:8px 20px 18px;}
.section-block h4{font-size:15px;margin-bottom:8px;}
.section-block p{font-size:13.5px;color:var(--text-muted);line-height:1.6;}
.reader-chip{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:13px;}
.avatar-sm{width:30px;height:30px;border-radius:50%;background:var(--primary-light);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;overflow:hidden;flex-shrink:0;}
.avatar-sm img{width:100%;height:100%;object-fit:cover;}

/* ===== Profile ===== */
.profile-header{text-align:center;padding:26px 20px 10px;}
.avatar-lg{width:96px;height:96px;border-radius:50%;background:var(--primary-light);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;margin:0 auto 12px;overflow:hidden;position:relative;}
.avatar-lg img{width:100%;height:100%;object-fit:cover;}
.avatar-edit{position:absolute;bottom:-2px;right:-2px;width:30px;height:30px;border-radius:50%;background:var(--primary);
  display:flex;align-items:center;justify-content:center;border:3px solid var(--bg);cursor:pointer;}
.avatar-edit svg{width:14px;height:14px;color:#fff;}
.profile-header h2{font-size:19px;}
.profile-header .uname{font-size:13px;color:var(--text-muted);}
.stats-grid{display:flex;gap:10px;padding:14px 20px;}
.stat-box{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 8px;text-align:center;}
.stat-box strong{font-size:20px;color:var(--primary-dark);display:block;}
.stat-box span{font-size:11px;color:var(--text-muted);}
.heatmap-wrap{padding:6px 20px 22px;overflow-x:auto;}
.heatmap-title{font-size:14px;font-weight:800;margin-bottom:10px;}
.heatmap-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:3px;width:max-content;}
.heat-cell{width:11px;height:11px;border-radius:3px;background:#EBEDF0;}
.heat-legend{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--text-muted);margin-top:8px;}
.heat-legend .heat-cell{width:9px;height:9px;}

/* ===== Modal ===== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(10,30,20,.45);display:none;align-items:flex-end;justify-content:center;z-index:100;
}
.modal-overlay.open{display:flex;}
.modal-sheet{
  background:var(--surface);width:100%;max-width:480px;border-radius:24px 24px 0 0;
  max-height:88vh;overflow-y:auto;padding:22px 20px 30px;
}
.modal-sheet h3{font-size:18px;margin-bottom:16px;}
.modal-handle{width:40px;height:4px;background:var(--border);border-radius:99px;margin:0 auto 16px;}
.cover-upload{
  width:100%;aspect-ratio:3/2;border:2px dashed var(--border);border-radius:var(--radius-md);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--text-muted);
  cursor:pointer;margin-bottom:16px;overflow:hidden;position:relative;font-size:13px;
}
.cover-upload img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.row-2{display:flex;gap:12px;}
.row-2 .field{flex:1;}

/* ===== Invite ===== */
.invite-box{background:var(--primary-light);border-radius:var(--radius-md);padding:16px;text-align:center;margin:0 20px 18px;}
.invite-code{font-size:24px;font-weight:800;letter-spacing:3px;color:var(--primary-darker);margin:6px 0 12px;}
.member-row{display:flex;align-items:center;gap:10px;padding:10px 20px;}
.member-row .role-tag{margin-left:auto;font-size:11px;color:var(--text-muted);}

/* ===== Notifications panel ===== */
.notif-panel{
  position:fixed;top:70px;right:calc(50% - 240px + 20px);width:300px;max-width:calc(100vw - 40px);
  background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow);border:1px solid var(--border);
  z-index:90;display:none;max-height:400px;overflow-y:auto;
}
.notif-panel.open{display:block;}
.notif-item{padding:12px 14px;border-bottom:1px solid var(--border);font-size:13px;}
.notif-item.unread{background:var(--primary-lighter);}
.notif-item .time{font-size:10.5px;color:var(--text-muted);margin-top:3px;display:block;}
.notif-empty{padding:24px;text-align:center;color:var(--text-muted);font-size:13px;}

.toast{
  position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:var(--text);color:#fff;
  padding:11px 20px;border-radius:999px;font-size:13px;z-index:200;opacity:0;pointer-events:none;transition:opacity .25s;
  max-width:calc(100% - 40px);text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.toast.toast-error{background:var(--danger);}
.toast.show{opacity:1;}

.loader{padding:60px 0;text-align:center;color:var(--text-muted);font-size:13px;}
.page-title-row{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 4px;}
.page-title-row h2{font-size:20px;}
.link-back{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted);padding:16px 20px 0;}

/* ===== Admin dashboard ===== */
.admin-user-row{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:14px;margin-bottom:10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.admin-user-row .avatar-sm{width:36px;height:36px;font-size:13px;}
.admin-user-info{flex:1;min-width:120px;}
.admin-user-info h4{font-size:14px;margin-bottom:2px;}
.admin-user-info span{font-size:11.5px;color:var(--text-muted);}
.admin-badge{font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--primary-light);color:var(--primary-dark);}
.admin-actions{display:flex;gap:6px;width:100%;margin-top:4px;}
.admin-actions .btn{flex:1;padding:8px 6px;font-size:12px;}