/* Mobile-first, classy palette */
:root{
  --bg:#0b1513;
  --panel:#101e1a;
  --ink:#e9efe8;
  --muted:#aab6af;
  --accent:#c88c4a;
  --accent-2:#2a5c4f;
  --glass:rgba(255,255,255,0.06);
  --radius:18px;
  --shadow:0 6px 24px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(160deg,var(--bg),#0f1d1a 60%);
  color:var(--ink);
  font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  -webkit-tap-highlight-color: transparent;
}

.hidden{display:none !important}

.btn{
  border:1px solid transparent;
  border-radius:calc(var(--radius) - 6px);
  padding:.875rem 1rem;
  font-weight:600;
  background:var(--glass);
  color:var(--ink);
  backdrop-filter: blur(6px);
  box-shadow:var(--shadow);
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg,#d39a59,#b47633); border-color:#b47633; color:#111}
.btn-ghost{background:transparent; border-color:var(--glass); color:var(--ink)}
.btn.small{padding:.5rem .75rem; font-weight:600}
.btn.icon.only{padding:.5rem; border-radius:12px; box-shadow:none; background:transparent}

.toast{
  position:fixed; inset:auto 0 84px 0; margin:auto; width:min(560px,92vw);
  background:#182824; border:1px solid #24453d; border-radius:14px;
  display:flex; align-items:center; gap:.75rem; padding:.75rem .75rem; z-index:40;
  box-shadow:var(--shadow);
}
.toast.hidden{display:none}

.screen{display:none; height:100svh; padding-bottom:64px;}
.screen.active{display:flex; flex-direction:column}

.splash{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:2rem;
  text-align:center;
}
.logo-wrap{position:relative; width:132px; height:132px; display:grid; place-items:center}
.logo{width:92px; height:92px; z-index:2}
.halo{position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(200,140,74,.35), transparent 60%);
  animation:pulse 3.5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(.98); opacity:.8}
  50%{transform:scale(1.05); opacity:1}
}
.brand{font-size:1.75rem; letter-spacing:.4px; margin:0}
.tagline{color:var(--muted); margin:.25rem 0 1rem}

.topbar, .subbar{
  position:sticky; top:0; z-index:20; background:linear-gradient(180deg,#0f1d1a,#0c1714);
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #20332e;
}
.topbar-left{display:flex; align-items:center; gap:.6rem}
.topbar .mark{width:28px; height:28px}
.top-title{font-weight:700; letter-spacing:.3px}

.subbar h2{margin:.2rem 0 .2rem; font-size:1.1rem}
.mini-grid{display:flex; gap:.4rem}
.mini svg{width:22px; height:22px; opacity:.9}

.content{flex:1; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:12px}

.grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:.5rem;
}
.card{
  display:flex; flex-direction:column; gap:.4rem; padding:14px; border-radius:var(--radius);
  background:linear-gradient(180deg,#12221d,#0e1a17);
  border:1px solid #1e332d; box-shadow:var(--shadow);
  min-height:108px; justify-content:center;
}
.card .ico svg{width:28px; height:28px; fill:var(--accent)}
.card .label{font-weight:700}
.card .hint{color:var(--muted); font-size:.9rem}

.dock{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  display:flex; gap:8px; padding:10px;
  background:linear-gradient(0deg,#08110f,transparent);
  backdrop-filter: blur(8px);
}
.dock-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 6px;
  text-decoration:none; color:var(--ink); border-radius:12px;
}
.dock-item svg{width:22px; height:22px}
.dock-item.active{background:rgba(200,140,74,.12); border:1px solid #3a2a18}

.row{display:flex; gap:.5rem; align-items:center}
.search input, .row input{
  width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid #1e332d; background:#0c1714; color:var(--ink);
}
.list{display:flex; flex-direction:column; gap:.5rem}
.list .item{
  display:flex; gap:.75rem; align-items:center; padding:.75rem; border-radius:12px; border:1px solid #1e332d;
  background:#0e1a17;
}
.list.flat li{display:flex; justify-content:space-between; padding:.6rem 0; border-bottom:1px dashed #20332e}
.list.flat li:last-child{border-bottom:none}

.profile{display:flex; align-items:center; gap:.8rem}
.avatar{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:#17322b; border:1px solid #24453d}
.avatar svg{width:22px; height:22px}

.muted{color:var(--muted)}

.shelf{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.shelf .book{aspect-ratio:3/4; border-radius:10px; background:#1a2d28; border:1px solid #24453d; display:grid; place-items:center; font-weight:700}

@media (min-width:768px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .shelf{grid-template-columns:repeat(6,1fr)}
}