:root{--bg-page:#eceae4;--bg-card:#fafaf7;--bg-white:#fff;--text-dark:#1a1a1a;--text-body:#33322e;--text-muted:#6b6961;--text-label:#8b897f;--border:#e4e2db;--border-light:#c9c7bf;--border-faint:#d8d6ce;--accent:#336;--accent-hover:#22224d;--accent-bg:#eeeef4;--badge-bg:#f4ecd4;--badge-text:#8a6d1f;--danger:#b3261e;--text:var(--text-muted);--text-h:var(--text-dark);--bg:var(--bg-card);--bg-raised:var(--bg-white);--accent-contrast:#fafaf7;color:var(--text-body);background:var(--bg-page);-webkit-font-smoothing:antialiased;font-family:Nunito Sans,sans-serif;font-size:16px;line-height:1.45}*{box-sizing:border-box}body{margin:0}#root{background:var(--bg-page);flex-direction:column;align-items:center;min-height:100dvh;display:flex}.screen-card{background:var(--bg-card);flex-direction:column;width:100%;max-width:430px;min-height:100dvh;display:flex;position:relative;overflow:hidden;box-shadow:0 0 24px #1a1a1a14}@media (width>=860px){.screen-card{border-radius:20px;max-width:780px;min-height:calc(100dvh - 64px);margin:32px auto;box-shadow:0 20px 60px #1a1a1a29}}h1,h2,h3{margin:0;font-family:inherit}.app-wordmark{letter-spacing:.06em;color:var(--text-dark);text-transform:uppercase;font-family:Unica One,sans-serif;font-size:30px}.screen-title{letter-spacing:.06em;color:var(--text-dark);text-transform:uppercase;font-family:Unica One,sans-serif;font-size:20px}.section-label{letter-spacing:.12em;color:var(--text-label);text-transform:uppercase;margin-bottom:6px;font-size:10.5px;font-weight:600}p{margin:0}a{color:var(--accent)}.muted{color:var(--text-muted);font-size:12.5px;font-weight:300}.error{color:var(--danger);font-size:14px}.app-header{border-bottom:1px solid var(--border);background:var(--bg-card);z-index:5;align-items:center;gap:12px;padding:52px 24px 14px;display:flex;position:sticky;top:0}@media (width>=860px){.app-header{padding:40px 40px 14px}.day-list-header{padding:48px 40px 20px}}.back-btn{color:var(--accent);cursor:pointer;text-transform:none;letter-spacing:0;background:0 0;border:none;flex-shrink:0;height:auto;padding:4px 8px 4px 0;font-size:20px;font-weight:400;line-height:1;text-decoration:none}.back-btn:hover{color:var(--accent-hover);background:0 0}button,.button{letter-spacing:.06em;background:var(--accent);color:#fafaf7;cursor:pointer;text-transform:uppercase;border:none;border-radius:0;justify-content:center;align-items:center;gap:6px;height:48px;padding:0 18px;font-family:Nunito Sans,sans-serif;font-size:13px;font-weight:700;text-decoration:none;transition:background .15s;display:inline-flex}button:hover,.button:hover{background:var(--accent-hover)}button:disabled{opacity:.5;cursor:default}button.secondary,.button.secondary{color:var(--accent);border:1.5px solid var(--accent);background:0 0}button.secondary:hover,.button.secondary:hover{background:var(--accent-bg)}button.plain{color:var(--text-muted);border:1px solid var(--border-light);background:0 0}button.plain:hover{border-color:var(--accent);color:var(--accent);background:0 0}.btn-full{width:100%;display:flex}.btn-row{gap:12px;display:flex}.btn-row>*{flex:1}input,textarea{border:none;border-bottom:1px solid var(--border-light);width:100%;color:var(--text-dark);resize:vertical;background:0 0;border-radius:0;outline:none;padding:0 0 8px;font-family:Nunito Sans,sans-serif;font-size:16px}input:focus,textarea:focus{border-bottom:1.5px solid var(--accent)}input::placeholder,textarea::placeholder{color:var(--text-label);font-weight:300}textarea{border:1px solid var(--border-light);background:var(--bg-white);min-height:130px;color:var(--text-body);padding:12px 14px;font-size:13.5px;font-weight:300;line-height:1.55}textarea:focus{border:1.5px solid var(--accent)}label{flex-direction:column;gap:6px;display:flex}main{flex-direction:column;flex:1;gap:18px;padding:20px 24px 32px;display:flex}@media (width>=860px){main{padding:20px 40px 32px}}.list-row{border-bottom:1px solid var(--border);cursor:pointer;color:inherit;background:var(--bg-card);align-items:center;gap:16px;padding:18px 24px;text-decoration:none;transition:background .1s;display:flex}.list-row:hover{background:#f3f1ea}@media (width>=860px){.list-row{padding:18px 40px}}.day-nr{color:var(--accent);flex-shrink:0;width:44px;font-family:Unica One,sans-serif;font-size:26px}.day-nr.empty{color:#9a99a8}.list-row-body{flex:1;min-width:0}.list-row-title{color:var(--text-dark);font-size:15px;font-weight:700}.list-row-meta{flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px;display:flex}.list-thumb{border:1px solid var(--border-faint);background:repeating-linear-gradient(45deg,#e9e7e0 0 6px,#e0ded6 6px 12px);flex-shrink:0;width:52px;height:37px;overflow:hidden}.list-thumb img{object-fit:cover;width:100%;height:100%;display:block}.badge{background:var(--badge-bg);color:var(--badge-text);border-radius:999px;padding:1px 7px;font-size:11px;font-weight:600;display:inline-block}.badge.active{background:var(--accent);color:#fafaf7;letter-spacing:.08em;border-radius:11px;padding:4px 10px;font-size:10px;font-weight:700}.badge-outline{letter-spacing:.08em;color:var(--accent);border:1px solid var(--border-light);cursor:pointer;text-transform:uppercase;background:0 0;border-radius:11px;height:auto;padding:3px 9px;font-size:10px;font-weight:700}.badge-outline:hover{border-color:var(--accent);background:0 0}.section{flex-direction:column;gap:8px;display:flex}.section-header{justify-content:space-between;align-items:baseline;margin-bottom:8px;display:flex}.cover-mock{aspect-ratio:656/256;background:var(--bg-white);border:1px solid var(--border-faint);width:100%;display:flex;overflow:hidden;box-shadow:0 2px 8px #1a1a1a1a}.cover-mock-back{background:repeating-linear-gradient(45deg,#e9e7e0 0 8px,#e0ded6 8px 16px);flex:323}.cover-mock-spine{background:var(--accent);flex:10;justify-content:center;align-items:center;display:flex}.cover-mock-spine span{writing-mode:vertical-rl;letter-spacing:.14em;color:#fafaf7;white-space:nowrap;font-family:Unica One,sans-serif;font-size:7px}.cover-mock-front{background:repeating-linear-gradient(45deg,#e9e7e0 0 8px,#e0ded6 8px 16px);flex:323;position:relative}.cover-mock-label{background:#fafaf7eb;padding:4% 5%;position:absolute;bottom:12%;left:8%}.cover-mock-period{color:var(--text-muted);font-size:7px;font-style:italic;font-weight:300}.cover-mock-name{color:var(--text-body);margin-top:1px;font-size:12px;font-weight:300}.cover-mock-title{letter-spacing:.04em;color:var(--text-dark);margin-top:2px;font-family:Unica One,sans-serif;font-size:24px}.photo-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}@media (width>=860px){.photo-grid{grid-template-columns:repeat(6,1fr)}}.photo-thumb{aspect-ratio:1;object-fit:cover;border:1px solid var(--border-faint);width:100%;display:block}.photo-add{aspect-ratio:1;border:1.5px dashed var(--accent);color:var(--accent);cursor:pointer;text-transform:none;letter-spacing:0;background:0 0;border-radius:0;justify-content:center;align-items:center;width:100%;height:auto;padding:0;font-size:22px;font-weight:400;display:flex}.photo-add:hover{background:var(--accent-bg)}.photo-chip{cursor:pointer}.photo-chip.selected{outline:2.5px solid var(--accent);outline-offset:-2px}.page-thumb{aspect-ratio:303/216;object-fit:contain;border:1px solid var(--border-faint);background:var(--bg-white);width:100%;display:block;box-shadow:0 1px 4px #1a1a1a14}@keyframes spin{to{transform:rotate(360deg)}}.slot-ctrl-btn{color:#fff;cursor:pointer;background:#0009;border:none;border-radius:4px;justify-content:center;align-items:center;width:22px;height:22px;padding:0;font-size:11px;line-height:1;display:flex}.slot-ctrl-btn:disabled{opacity:.35;cursor:default}.page-thumb-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}@media (width>=860px){.page-thumb-grid{grid-template-columns:repeat(3,1fr)}}.preview-frame{aspect-ratio:303/216;border:1px solid var(--border-faint);background:var(--bg-white);width:100%;overflow:hidden;box-shadow:0 6px 24px #1a1a1a24}.preview-page{object-fit:contain;width:100%;height:100%;display:block}.preview-nav{justify-content:center;align-items:center;gap:20px;display:flex}.preview-nav-btn{border:1.5px solid var(--accent);width:44px;height:44px;color:var(--accent);cursor:pointer;letter-spacing:0;text-transform:none;background:0 0;border-radius:0;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:17px;display:flex}.preview-nav-btn:disabled{border-color:var(--border-faint);color:#b8b6ae;opacity:1}.preview-nav-btn:not(:disabled):hover{background:var(--accent-bg)}.preview-nav-label{color:#4a4a45;text-align:center;min-width:110px;font-size:13px;font-weight:600}.page-tabs{flex-wrap:wrap;gap:8px;display:flex}.page-tab{cursor:pointer;border:1px solid var(--border-light);color:#4a4a45;text-transform:none;letter-spacing:0;background:0 0;border-radius:0;height:auto;padding:9px 16px;font-family:Nunito Sans,sans-serif;font-size:12.5px;font-weight:400}.page-tab.active{background:var(--accent);color:#fafaf7;border-color:var(--accent);font-weight:700}.page-tab:hover:not(.active){background:var(--accent-bg)}.move-btns{align-items:center;gap:8px;margin-top:10px;display:flex}.move-btn{border:1.5px solid var(--accent);height:44px;color:var(--accent);cursor:pointer;text-transform:none;letter-spacing:0;background:0 0;border-radius:0;padding:0 18px;font-family:Nunito Sans,sans-serif;font-size:13px;font-weight:700}.move-btn:disabled{border-color:var(--border-faint);color:#b8b6ae;opacity:1}.sheet-overlay{z-index:50;background:#1a1a1a73;flex-direction:column;justify-content:flex-end;align-items:center;display:flex;position:fixed;inset:0}@media (width>=860px){.sheet-overlay{justify-content:center}}.sheet{background:var(--bg-card);border-radius:14px 14px 0 0;flex-direction:column;gap:12px;width:100%;max-width:430px;max-height:80vh;padding:18px 20px 30px;display:flex;overflow-y:auto;box-shadow:0 -8px 32px #1a1a1a40}@media (width>=860px){.sheet{border-radius:16px;max-width:520px}}.sheet-handle{background:var(--border-light);border-radius:2px;width:36px;height:4px;margin:0 auto 14px}.bottom-actions{flex-direction:column;gap:12px;margin-top:auto;padding:20px 24px 28px;display:flex}@media (width>=860px){.bottom-actions{padding:20px 40px 28px}}.row{gap:8px;display:flex}.row.wrap{flex-wrap:wrap}.spacer{flex:1}input[type=file]{color:var(--text-muted);border:none;padding:0;font-size:13px}
