:root { --ink: #172033; --muted: #65708a; --paper: #f6f7fb; --accent: #4f46e5; --danger: #b42318; }
* { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 system-ui, sans-serif; }
header { height: 64px; background: white; display: flex; align-items: center; justify-content: space-between; padding: 0 max(24px, calc((100% - 1120px)/2)); border-bottom: 1px solid #e7e9ef; } .brand { color: var(--ink); text-decoration: none; font-size: 1.25rem; font-weight: 800; } nav { display: flex; align-items: center; gap: 12px; } nav form { display: inline; } nav button { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; }
main { max-width: 1120px; margin: 0 auto; padding: 44px 24px; } h1,h2,h3,p { margin-top: 0; } .intro { margin-bottom: 28px; } .intro p,.hint,.eyebrow { color: var(--muted); } .upload-panel,.book-card,.auth { background: white; border: 1px solid #e5e7eb; border-radius: 14px; padding: 24px; box-shadow: 0 2px 5px #17203309; } .upload-panel { margin-bottom: 42px; } label { display: block; font-weight: 650; margin-bottom: 5px; } input[type=text], input[type=password], input[type=file] { width: 100%; max-width: 500px; padding: 9px; border: 1px solid #cbd2df; border-radius: 7px; font: inherit; } button,.book-card a,.reader-head a { cursor: pointer; border-radius: 7px; padding: 9px 13px; font: inherit; } .primary { background: var(--accent); border: 1px solid var(--accent); color: white; } .danger { background: white; color: var(--danger); border: 1px solid #f5c2c0; margin-left: 10px; } .error { display: block; color: var(--danger); margin-top: 4px; } .book-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 18px; } .book-card { padding: 0; overflow: hidden; } .book-card img { display:block; width:100%; height: 210px; object-fit: cover; background: #dce1ec; } .book-card > div { padding: 18px; } .book-card h3 { margin-bottom: 2px; } .book-card p { color:var(--muted); font-size:.9rem; } .book-card a { display:inline-block; background:#eef0ff; color:#3830b3; text-decoration:none; } .auth { max-width: 430px; margin: 60px auto; } .reader-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; } .reader-head a { background:white; border:1px solid #d8dce5; color:var(--ink); text-decoration:none; }.eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; margin-bottom:4px; }.reader { overflow:hidden; }.flipbook { margin:0 auto; box-shadow: 0 12px 35px #17203335; }.page { background:white; overflow:hidden; }.page img { width:100%; height:100%; object-fit:contain; display:block; }.reader-controls { display:flex; gap:16px; justify-content:center; align-items:center; padding:22px; }.reader-controls button { background:white; border:1px solid #cbd2df; } @media (max-width:600px) { main { padding: 28px 16px; }.reader-head { align-items:flex-start; }.reader-controls { gap:8px; font-size:.9rem; } }