/* ReadBox — premium UI system */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Bengali","Noto Sans",sans-serif;
  background:var(--rb-bg);color:var(--rb-text);
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
#app{height:100%;width:100%;display:flex;flex-direction:column;position:relative}
.app-shell{display:flex;flex-direction:column;height:100%;width:100%}
.main-content{flex:1;overflow:hidden;position:relative;background:var(--rb-bg)}

/* —— Bottom nav —— */
.bottom-nav{
  display:flex;height:var(--rb-nav-height);min-height:var(--rb-nav-height);
  background:var(--rb-nav-bg);border-top:1px solid var(--rb-nav-border);
  padding:0 2px;padding-bottom:env(safe-area-inset-bottom,0);z-index:100;flex-shrink:0;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:none;border:none;color:var(--rb-text-secondary);
  font-size:10px;font-weight:500;cursor:pointer;
  min-height:var(--rb-touch-min);border-radius:10px;
  transition:color .18s ease,background .15s ease,transform .12s ease;
  -webkit-user-select:none;user-select:none;position:relative
}
.nav-item:active{transform:scale(.94);background:var(--rb-bg-secondary)}
.nav-item.active{color:var(--rb-active-blue);font-weight:600}
.nav-icon{width:24px;height:24px;stroke-width:1.8;transition:stroke-width .15s}
.nav-item.active .nav-icon{stroke-width:2.4}
.nav-label{line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* —— Screens —— */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;background:var(--rb-bg);
  animation:rbFadeIn .2s ease}
@keyframes rbFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.screen-header{
  display:flex;align-items:center;min-height:56px;padding:8px 12px 8px 8px;
  border-bottom:1px solid var(--rb-border);background:var(--rb-surface);
  flex-shrink:0;gap:4px;position:sticky;top:0;z-index:5
}
.screen-header h1{font-size:19px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.02em}
.back-btn{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  min-width:var(--rb-touch-min);min-height:var(--rb-touch-min);
  background:none;border:none;color:var(--rb-active-blue);cursor:pointer;border-radius:50%;flex-shrink:0;
  transition:background .15s
}
.back-btn:active{background:var(--rb-bg-secondary)}
.back-btn svg{width:24px;height:24px}
.screen-body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:12px;overscroll-behavior:contain}

/* —— Empty —— */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:48px 28px;height:100%;color:var(--rb-text-secondary)}
.empty-state svg{width:72px;height:72px;margin-bottom:18px;opacity:.4}
.empty-state h2{font-size:19px;font-weight:700;color:var(--rb-text);margin-bottom:8px;letter-spacing:-.02em}
.empty-state p{font-size:14px;margin-bottom:22px;max-width:280px;line-height:1.45}

/* —— Buttons —— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--rb-touch-min);
  padding:10px 20px;border-radius:12px;font-size:15px;font-weight:600;border:none;cursor:pointer;
  transition:transform .12s ease,opacity .15s,background .15s;-webkit-user-select:none;user-select:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--rb-active-blue);color:#fff;box-shadow:0 2px 8px rgba(0,132,255,.28)}
.btn-primary:active{opacity:.9}
.btn-secondary{background:var(--rb-bg-secondary);color:var(--rb-text)}
.btn-secondary:active{background:var(--rb-bg-tertiary)}
.btn-danger{background:var(--rb-danger);color:#fff}
.btn-ghost{background:transparent;color:var(--rb-active-blue);min-height:36px;padding:6px 12px}

/* —— Lists —— */
.list-group{background:var(--rb-surface);border-radius:14px;overflow:hidden;margin-bottom:16px;
  box-shadow:0 1px 2px var(--rb-shadow)}
.list-item{display:flex;align-items:center;min-height:54px;padding:12px 16px;gap:12px;
  background:var(--rb-surface);border-bottom:1px solid var(--rb-border);cursor:pointer;
  -webkit-user-select:none;user-select:none;transition:background .12s}
.list-item:last-child{border-bottom:none}
.list-item:active{background:var(--rb-bg-secondary)}
.list-item-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--rb-active-blue);flex-shrink:0}
.list-item-content{flex:1;overflow:hidden;min-width:0}
.list-item-title{font-size:16px;font-weight:450;color:var(--rb-text);line-height:1.3}
.list-item-subtitle{font-size:13px;color:var(--rb-text-secondary);margin-top:2px;line-height:1.3}
.list-item-chevron{color:var(--rb-text-tertiary);flex-shrink:0;font-size:18px;opacity:.7}

/* —— Toast —— */
.toast{position:fixed;bottom:calc(var(--rb-nav-height) + 20px + env(safe-area-inset-bottom,0px));
  left:50%;transform:translateX(-50%);background:rgba(28,28,30,.92);color:#fff;
  padding:12px 22px;border-radius:24px;font-size:14px;font-weight:500;z-index:1000;
  max-width:90%;text-align:center;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.25);
  transition:opacity .25s ease,transform .25s ease;backdrop-filter:blur(8px)}
.toast.hidden{opacity:0;visibility:hidden;transform:translateX(-50%) translateY(8px)}

/* —— Overlay —— */
.overlay{position:fixed;inset:0;background:var(--rb-bg);z-index:200;display:flex;flex-direction:column}
.overlay.hidden{display:none}
.reader-overlay{position:fixed;inset:0;background:var(--rb-reading-bg);z-index:300;display:flex;flex-direction:column}
.reader-overlay.hidden{display:none}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* —— Footer —— */
.app-footer{text-align:center;padding:20px 16px;font-size:12px;color:var(--rb-text-tertiary);flex-shrink:0;letter-spacing:.01em}

/* —— Book grid —— */
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:18px 14px;padding:8px 4px 24px}
@media(min-width:600px){.book-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:22px 18px}}
.book-card{display:flex;flex-direction:column;cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:transform .15s ease}
.book-card:active{transform:scale(.97)}
.book-cover{
  aspect-ratio:2/3;background:var(--rb-bg-secondary);border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px var(--rb-shadow),0 1px 3px var(--rb-shadow);
  position:relative;transition:box-shadow .2s
}
.book-card:active .book-cover{box-shadow:0 2px 8px var(--rb-shadow)}
.book-cover img{width:100%;height:100%;object-fit:cover}
.book-cover-fallback{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--rb-navy) 0%,#0a3d82 55%,#1565c0 100%);
  color:#fff;font-size:32px;font-weight:700;letter-spacing:-.02em
}
.book-title{font-size:13px;font-weight:600;margin-top:9px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--rb-text)}
.book-author{font-size:11px;color:var(--rb-text-secondary);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.book-progress{height:3px;background:var(--rb-bg-tertiary);border-radius:2px;margin-top:7px;overflow:hidden}
.book-progress-bar{height:100%;background:var(--rb-active-blue);border-radius:2px;transition:width .25s ease}

/* —— Settings —— */
.settings-section{margin-bottom:22px}
.settings-section-title{font-size:12px;font-weight:700;color:var(--rb-text-secondary);text-transform:uppercase;
  letter-spacing:.06em;padding:0 16px 8px}

/* —— Toolbar / search —— */
.toolbar{display:flex;align-items:center;gap:8px;padding:0 0 12px;flex-wrap:wrap}
.search-wrap{flex:1;min-width:140px;position:relative}
.search-wrap input{
  width:100%;height:40px;border-radius:12px;border:1px solid var(--rb-border);
  background:var(--rb-bg-secondary);color:var(--rb-text);padding:0 14px 0 38px;font-size:15px;
  outline:none;transition:border-color .15s,box-shadow .15s
}
.search-wrap input:focus{border-color:var(--rb-active-blue);box-shadow:0 0 0 3px rgba(0,132,255,.15)}
.search-wrap .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--rb-text-tertiary);pointer-events:none}
.select-pill{
  height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--rb-border);
  background:var(--rb-bg-secondary);color:var(--rb-text);font-size:13px;font-weight:500;outline:none;max-width:140px
}

/* —— Brand header strip —— */
.brand-bar{display:flex;align-items:center;gap:10px;padding:4px 0}
.brand-bar img{width:28px;height:28px;border-radius:7px}
.brand-bar span{font-weight:700;font-size:15px;color:var(--rb-navy);letter-spacing:-.02em}
[data-theme="dark"] .brand-bar span,
:root[data-theme="system"] .brand-bar span{color:var(--rb-text)}
@media(prefers-color-scheme:dark){:root[data-theme="system"] .brand-bar span{color:var(--rb-text)}}

/* —— Format badge —— */
.format-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 6px;border-radius:4px;background:var(--rb-bg-tertiary);color:var(--rb-text-secondary);margin-top:4px}

/* —— Skeleton —— */
.skeleton{background:linear-gradient(90deg,var(--rb-bg-secondary) 25%,var(--rb-bg-tertiary) 50%,var(--rb-bg-secondary) 75%);
  background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* —— Safe selects —— */
select{-webkit-appearance:none;appearance:none}