/* Shared layout rules — colors come from the active theme file, loaded before this one. */

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body.app-body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter", ui-sans-serif, system-ui, sans-serif;
  padding-bottom:72px; /* room for bottom nav */
  min-height:100vh;
}
a{color:inherit; text-decoration:none;}

.app-header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20;
}
.app-header-inner{
  max-width:960px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.app-brand{font-weight:700; font-size:1.05rem; color:var(--accent);}
.app-header-links{display:flex; gap:14px; font-size:0.85rem; color:var(--ink-soft);}
.app-header-links a:hover{color:var(--accent);}

.app-main{max-width:960px; margin:0 auto; padding:20px 16px 32px;}

.app-flash{
  max-width:960px; margin:12px auto 0; padding:10px 16px; border-radius:8px;
  font-size:0.9rem;
}
.app-flash-success{background:var(--accent-soft); color:var(--accent-ink);}
.app-flash-error{background:#F9DEDC; color:#8C1D18;}

.btn-primary{
  background:var(--accent); color:var(--accent-contrast);
  border:none; padding:10px 18px; border-radius:8px; font-weight:600; cursor:pointer;
}
.btn-primary:hover{opacity:0.92;}
.btn-ghost{
  background:transparent; color:var(--ink-soft); border:1px solid var(--border);
  padding:10px 18px; border-radius:8px; cursor:pointer;
}

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:16px; box-shadow:0 1px 2px rgba(0,0,0,0.04);
}

.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field label{font-size:0.85rem; color:var(--ink-soft); font-weight:600;}
.field input, .field textarea, .field select{
  border:1px solid var(--border); border-radius:8px; padding:10px 12px;
  background:var(--bg); color:var(--ink); font-size:0.95rem;
}

/* Bottom nav */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0;
  background:var(--surface); border-top:1px solid var(--border);
  display:flex; justify-content:space-around;
  padding:8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  z-index:30;
}
.bottom-nav-item{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:0.68rem; color:var(--ink-soft);
}
.bottom-nav-item .bottom-nav-icon{font-size:1.15rem;}
.bottom-nav-item.active{color:var(--accent);}

.install-banner{
  position:fixed; left:12px; right:12px; bottom:76px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:0.85rem; box-shadow:0 4px 14px rgba(0,0,0,0.12); z-index:40;
}

/* Book grid */
.book-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px;}
.book-card{display:block; text-align:left;}
.book-cover{
  width:100%; aspect-ratio:3/4; border-radius:10px; object-fit:cover;
  background:var(--accent-soft); margin-bottom:8px;
}
.book-title{font-weight:600; font-size:0.95rem;}
.book-author{font-size:0.8rem; color:var(--ink-soft);}

/* Reader */
.reader-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 4px; gap:8px; flex-wrap:wrap;
}
.reader-viewport{
  background:var(--page-bg); border-radius:12px; overflow:hidden;
  border:1px solid var(--border);
}
.reader-page-img{width:100%; display:block; user-select:none; -webkit-user-drag:none;}
.reader-progress{
  height:4px; background:var(--border); border-radius:4px; overflow:hidden; margin-top:10px;
}
.reader-progress-fill{height:100%; background:var(--accent);}

.toc-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(320px,85vw);
  background:var(--surface); border-left:1px solid var(--border);
  transform:translateX(100%); transition:transform 0.25s ease; z-index:50;
  padding:16px; overflow-y:auto;
}
.toc-drawer.open{transform:translateX(0);}
.toc-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:45;
}

@media (max-width:480px){
  .app-header-links{font-size:0.78rem; gap:10px;}
}