:root { --ink:#1c2522; --muted:#79837e; --cream:#f6f5ef; --green:#b7d7bf; --deep:#315c4d; --line:#dce3dc; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:'DM Sans',Arial,sans-serif; background:var(--cream); }
.landing-shell { min-height:100vh; padding:30px 6.5vw 24px; display:flex; flex-direction:column; background:radial-gradient(circle at 86% 22%, #dfebdf 0, transparent 23%), var(--cream); }
.topbar { display:flex; justify-content:space-between; align-items:center; max-width:1200px; width:100%; margin:auto; }
.brand { color:var(--ink); text-decoration:none; font-weight:700; font-size:20px; letter-spacing:-.7px; display:flex; gap:9px; align-items:center; }
.brand-mark { display:grid; place-items:center; width:27px; height:27px; background:var(--deep); color:#fff; border-radius:8px; font-size:17px; }
.top-note { color:var(--muted); font-size:13px; }
.hero { max-width:1080px; width:100%; margin:auto; padding:70px 0 56px; display:grid; grid-template-columns:1fr 420px; gap:100px; align-items:center; }
.eyebrow { color:var(--deep); font-size:11px; font-weight:700; letter-spacing:2px; margin:0 0 20px; }
h1 { font-family:'Playfair Display',Georgia,serif; font-size:clamp(48px,6vw,76px); line-height:1.06; letter-spacing:-3px; margin:0 0 25px; font-weight:600; }
h1 em { color:var(--deep); font-style:normal; }
.intro { color:#65716b; line-height:1.65; max-width:450px; font-size:16px; }
.feature-row { margin-top:34px; display:flex; gap:21px; flex-wrap:wrap; color:#829089; font-size:12px; }
.upload-card { position:relative; background:#fff; border:1px solid #e7ebe5; border-radius:24px; padding:38px 36px 29px; box-shadow:0 22px 55px rgba(40,61,51,.08); }
.upload-decoration { position:absolute; top:-20px; right:28px; color:#fff; font-size:11px; font-weight:700; letter-spacing:1px; padding:17px 12px; background:#d28e68; transform:rotate(8deg); box-shadow:4px 5px 0 #ebc4af; }
h2 { margin:0 0 8px; font-size:23px; letter-spacing:-.8px; }
.upload-subtitle { margin:0 0 24px; color:var(--muted); font-size:13px; }
.dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:165px; padding:20px; border:1.5px dashed #bad0c1; border-radius:14px; background:#f8fbf7; cursor:pointer; text-align:center; transition:.2s; }
.dropzone:hover,.dropzone.dragging { border-color:var(--deep); background:#f0f8f1; }
.dropzone input { display:none; }
.upload-icon { color:var(--deep); font-size:27px; font-weight:300; margin-bottom:7px; }
.dropzone strong { color:var(--deep); font-size:14px; max-width:270px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dropzone small { color:#9aa59f; font-size:11px; margin-top:7px; }
.primary-button { width:100%; border:0; border-radius:10px; padding:15px 18px; margin-top:15px; color:#fff; background:var(--deep); font:600 14px 'DM Sans'; cursor:pointer; transition:.2s; }
.primary-button:hover { background:#23483b; transform:translateY(-1px); }.primary-button:disabled { opacity:.65; cursor:wait; }
.primary-button span { float:right; font-size:19px; line-height:14px; }.privacy-note { text-align:center; color:#a2aca6; font-size:10px; margin:18px 0 0; }
.alert { border-radius:8px; padding:10px 12px; font-size:12px; margin:-8px 0 15px; }.alert.error { color:#974d42; background:#fff1ed; }.alert.success { color:#286047; background:#edf8f0; }
.footer { color:#a0aaa4; text-align:center; font-size:11px; margin-top:auto; }.footer span { padding:0 7px; }
.viewer-page { min-height:100vh; background:#e9ece7; overflow:hidden; }.viewer-header { height:72px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid var(--line); }.viewer-actions { display:flex; align-items:center; gap:25px; color:#87928b; font-size:12px; }.back-link { color:var(--deep); text-decoration:none; font-weight:600; }.reader-area { position:relative; display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 110px); padding:30px 80px; }.book { width:min(72vw, 960px); height:min(78vh, 700px); }.pdf-page { background:#fff; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; box-shadow:0 8px 25px rgba(30,45,37,.12); }.pdf-page canvas { max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; }.pdf-page small { position:absolute; bottom:9px; color:#b7bdb8; font-size:10px; }.nav-arrow { position:absolute; z-index:3; border:0; width:46px; height:46px; border-radius:50%; background:#fff; color:var(--deep); box-shadow:0 4px 16px #bec7bf; font-size:32px; line-height:1; cursor:pointer; }.nav-arrow.left { left:25px; }.nav-arrow.right { right:25px; }.reader-help { position:fixed; bottom:15px; width:100%; text-align:center; color:#9aa49e; font-size:11px; }.loading { position:absolute; display:flex; gap:12px; align-items:center; color:#7a867f; font-size:13px; }.spinner { width:18px; height:18px; border:2px solid #cbd8cd; border-top-color:var(--deep); border-radius:50%; animation:spin 1s linear infinite; }@keyframes spin { to { transform:rotate(360deg); } }
.reader-layout { display:flex; min-height:calc(100vh - 110px); }.reader-layout .reader-area { flex:1; min-width:0; }.side-navigation { width:220px; flex:0 0 220px; padding:34px 18px; background:rgba(255,255,255,.55); border-right:1px solid #dce4dc; overflow-y:auto; }.side-nav-title { color:var(--deep); text-transform:uppercase; letter-spacing:1.5px; font-size:10px; font-weight:700; margin:0 8px 18px; }.navigation-item { width:100%; border:0; border-bottom:1px solid #dfe7df; background:transparent; padding:12px 8px; color:#64736b; display:flex; gap:8px; justify-content:space-between; text-align:left; cursor:pointer; font:500 12px 'DM Sans'; }.navigation-item:hover { color:var(--deep); background:#edf5ed; }.navigation-item small { color:#a1ada4; font-size:10px; }.empty-navigation { color:#a0aaa4; font-size:11px; line-height:1.6; padding:0 8px; }.admin-page { min-height:100vh; background:var(--cream); }.login-card { max-width:390px; margin:12vh auto; background:#fff; border:1px solid #e7ebe5; border-radius:20px; padding:38px; box-shadow:0 20px 50px rgba(40,61,51,.08); }.login-card .brand { margin-bottom:55px; }.login-card h1,.admin-title h1 { font-size:38px; letter-spacing:-1.5px; margin:5px 0 20px; font-family:'Playfair Display',Georgia,serif; }.login-card label,.nav-form label { display:block; color:#69766f; font-size:12px; margin:16px 0; }.login-card input,.nav-form input { display:block; width:100%; border:1px solid #dce5dd; border-radius:8px; padding:12px; margin-top:7px; font:14px 'DM Sans'; outline-color:var(--green); }.plain-link { color:var(--deep); text-decoration:none; font-size:12px; }.login-card .plain-link { display:block; text-align:center; margin-top:18px; }.admin-header { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px, 6vw); border-bottom:1px solid var(--line); background:#fff; }.logout { margin-left:20px; color:#a46758; }.admin-main { max-width:1080px; margin:0 auto; padding:60px 24px; }.admin-title p:not(.eyebrow) { color:var(--muted); }.admin-grid { display:grid; grid-template-columns:330px 1fr; gap:20px; margin-top:32px; }.panel { background:#fff; border:1px solid #e4eae4; border-radius:16px; padding:25px; }.panel h2 { font-size:18px; margin-bottom:18px; }.file-list { display:grid; gap:8px; }.file-choice { color:#607067; text-decoration:none; font-size:12px; border-radius:8px; padding:12px; background:#f6f9f6; display:flex; gap:10px; align-items:center; overflow:hidden; }.file-choice span { font-size:9px; color:var(--deep); font-weight:700; }.file-choice.active,.file-choice:hover { background:#dfefe1; color:var(--deep); }.muted { color:#a0aaa4; font-size:12px; }.panel hr { border:0; border-top:1px solid #e8eee8; margin:28px 0; }.panel h3 { font-size:14px; }.managed-list { display:grid; gap:8px; }.managed-item { display:flex; justify-content:space-between; align-items:center; background:#f7faf7; padding:10px 12px; border-radius:8px; }.managed-item strong,.managed-item small { display:block; }.managed-item strong { color:#596b60; font-size:13px; }.managed-item small { color:#a1aaa4; font-size:10px; margin-top:3px; }.delete-button { border:0; background:transparent; color:#be796c; font-size:22px; cursor:pointer; }.nav-form .primary-button { margin-top:22px; }
.navigation-hidden .side-navigation { display:none; }.viewer-control { border:1px solid #dce5dd; border-radius:7px; padding:7px 10px; background:#f7faf7; color:#68776e; font:600 11px 'DM Sans'; cursor:pointer; }.viewer-control:hover,.viewer-control.active { background:#dfeee1; color:var(--deep); border-color:#c7ddca; }.view-switch { display:flex; gap:4px; }.single-page { width:min(52vw, 650px); height:min(78vh, 700px); background:#fff; align-items:center; justify-content:center; position:relative; box-shadow:0 8px 25px rgba(30,45,37,.12); }.single-page canvas { width:100%; height:100%; object-fit:contain; }.single-page small { position:absolute; bottom:9px; color:#b7bdb8; font-size:10px; }.single-mode .book { display:none; }.single-mode .single-page { display:flex; }
.book-edit-head { display:flex; align-items:center; justify-content:space-between; gap:15px; }.book-edit-head h2 { margin:0; }.danger-button,.secondary-button,.save-button { border:0; border-radius:7px; padding:9px 12px; font:600 11px 'DM Sans'; cursor:pointer; }.danger-button { color:#a5584c; background:#fff0ed; }.secondary-button { color:var(--deep); background:#e5f1e7; }.managed-list { gap:4px; }.managed-item { border-radius:8px 8px 0 0; padding:8px 10px; }.managed-item input { border:1px solid #dce5dd; border-radius:5px; padding:7px; font:12px 'DM Sans'; width:calc(100% - 5px); }.managed-item small { display:flex; align-items:center; gap:4px; }.managed-item small input { width:58px; padding:5px; }.managed-item span { flex:1; }.save-button { background:#e5f1e7; color:var(--deep); font-size:16px; }.delete-nav-form { background:#f7faf7; display:flex; justify-content:flex-end; padding:0 10px 7px; border-radius:0 0 8px 8px; }.delete-nav-form .delete-button { font-size:18px; padding:0 5px; }
.admin-only-card .admin-lock { text-align:center; padding:31px 12px; margin:20px 0 15px; border:1px solid #dfeadf; border-radius:13px; background:#f7fbf7; color:var(--deep); line-height:1.8; }.admin-lock small { color:#8d9991; }.admin-button { display:block; text-decoration:none; text-align:center; }.new-book-panel { margin-top:25px; }.new-book-panel .nav-form { display:flex; align-items:end; gap:14px; }.new-book-panel label { flex:1; margin:0; }.new-book-panel .primary-button { width:auto; margin:0; white-space:nowrap; }.form-help { display:block; color:#9aa69e; font-size:10px; margin-top:9px; }
.generated-url { color:var(--deep); font-size:12px; word-break:break-all; }.copy-url { border:0; border-radius:5px; margin-left:8px; padding:5px 8px; background:#dbeade; color:var(--deep); font:600 10px 'DM Sans'; cursor:pointer; }.view-book { margin-left:auto; color:var(--deep); font-size:10px; font-style:normal; white-space:nowrap; }
.admin-view-url { margin:18px 0; }.admin-view-url label { display:block; color:#69766f; font-size:11px; margin-bottom:7px; }.admin-view-url div { display:flex; gap:6px; }.admin-view-url input,.new-url-field { min-width:0; flex:1; border:1px solid #dce5dd; border-radius:6px; padding:9px; color:#68776e; background:#f8faf8; font:11px 'DM Sans'; }.copy-admin-url { border:0; border-radius:6px; padding:0 10px; color:var(--deep); background:#dcecdf; font:600 10px 'DM Sans'; cursor:pointer; white-space:nowrap; }.new-url-field { display:inline-block; width:min(100%,420px); margin-top:8px; }.alert .copy-admin-url { margin-left:6px; padding:6px 9px; }
.public-library { max-width:1080px; width:100%; margin:0 auto 44px; }.library-heading { display:flex; align-items:end; justify-content:space-between; border-bottom:1px solid #dfe6df; padding-bottom:14px; }.library-heading .eyebrow { margin:0; }.library-heading h2 { margin:6px 0 0; font-family:'Playfair Display',Georgia,serif; font-size:28px; }.library-heading > span { color:#9aa69e; font-size:12px; }.public-book-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-top:18px; }.public-book-card { padding:0; color:var(--ink); background:#fff; border:1px solid #e5ebe5; border-radius:12px; overflow:hidden; transition:.2s; }.public-book-card:hover { transform:translateY(-2px); border-color:#b9d4bd; box-shadow:0 8px 20px rgba(40,61,51,.07); }.public-book-open { display:flex; align-items:center; gap:13px; padding:16px; color:var(--ink); text-decoration:none; }.book-card-icon { color:#fff; background:#d28e68; padding:10px 7px; font-size:9px; font-weight:700; letter-spacing:.5px; }.public-book-info { flex:1; min-width:0; }.public-book-info strong,.public-book-info small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.public-book-info strong { font-size:13px; }.public-book-info small { color:#718078; font-size:10px; margin-top:4px; }.book-card-arrow { color:var(--deep); font-size:21px; }.book-url-row { display:flex; gap:6px; padding:0 12px 12px; }.book-url-row input { min-width:0; flex:1; border:1px solid #e0e8e0; border-radius:6px; padding:7px 8px; color:#7b8981; background:#f8faf8; font:10px 'DM Sans'; }.copy-book-url { border:0; border-radius:6px; padding:0 9px; color:var(--deep); background:#dcecdf; font:600 10px 'DM Sans'; cursor:pointer; white-space:nowrap; }.library-empty { color:#9aa59f; font-size:12px; padding:20px 0; }
@media (max-width:800px) { .landing-shell { padding:22px 20px; }.top-note { display:none; }.hero { padding:55px 0 35px; grid-template-columns:1fr; gap:48px; }.hero-copy { text-align:center; }.intro { margin:0 auto; }.feature-row { justify-content:center; }.upload-card { max-width:430px; width:100%; margin:auto; }.viewer-header { padding:0 18px; }.viewer-actions { gap:12px; }.side-navigation { width:145px; flex-basis:145px; padding:25px 8px; }.reader-area { padding:20px 38px; }.book { width:92vw; height:74vh; }.nav-arrow { width:36px; height:36px; font-size:27px; }.nav-arrow.left { left:7px; }.nav-arrow.right { right:7px; }.admin-grid { grid-template-columns:1fr; }.admin-main { padding-top:35px; } }