:root{--accent:#1e5f66;--accent-light:#4ecdc4;--ink:#172033;--paper:#f8faf9;--line:#d9e2df}
*{box-sizing:border-box}body{margin:0;font-family:"Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--paper)}
.container{width:min(960px,94%);margin:0 auto}
.app-header{background:linear-gradient(135deg,var(--accent),#2b9ba6);color:#fff;padding:1rem 0}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.75rem;color:#fff;text-decoration:none;font-weight:700}
.brand img{height:36px}nav a{color:#e8fffc;margin-left:1rem;text-decoration:none}
.main-area{padding:2rem 0 3rem;min-height:60vh}.hero h1{font-size:2.2rem}.accent{color:var(--accent-light)}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:8px;text-decoration:none;margin-top:.75rem}
.book-grid{list-style:none;padding:0;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.book-grid a{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:1rem;text-decoration:none;color:inherit}
.unit-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1rem;margin:.5rem 0}
.app-footer{border-top:1px solid var(--line);padding:1.5rem 0;font-size:.9rem}