:root{--paper:#f7f4ee;--ink:#282722;--muted:#817f76;--coral:#ed6845;--coral-dark:#d85334;--peach:#f5ded0;--line:#e7e2d8;--green:#aebd91;--serif:'DM Serif Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}.topbar{height:72px;padding:0 max(24px,calc((100% - 1080px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(40,39,34,.07)}.brand{display:flex;gap:10px;align-items:center;font-size:20px;font-weight:700;letter-spacing:-1px;color:var(--ink);text-decoration:none}.brand-mark{display:grid;place-items:center;width:31px;height:31px;background:var(--coral);color:white;border-radius:9px;font-family:var(--serif);font-size:22px}.brand-dot{color:var(--coral)}.private-note{display:flex;align-items:center;gap:7px;color:#75746d;font-size:12px}.private-note svg{width:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}main{max-width:1080px;margin:auto;padding:0 28px}.hero{min-height:286px;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}.hero-copy{padding:36px 0 39px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.65px;color:var(--coral);margin:0 0 13px}.hero h1{font:50px/.99 var(--serif);letter-spacing:-1.15px;margin:0}.hero h1 em{color:var(--coral);font-weight:400}.hero-text{color:#858278;font-size:13px;margin:15px 0 0}.hero-art{height:253px;width:375px;position:absolute;right:36px;bottom:0}.art-sun{position:absolute;width:208px;height:208px;border-radius:50%;background:#f2dfc7;right:58px;top:20px}.art-page{position:absolute;width:132px;height:180px;border:1px solid rgba(44,38,31,.12);border-radius:4px;box-shadow:0 8px 18px #53432c1c}.art-page i{display:block;margin:12px 10px;height:43px;background:#d1ad90;border:3px solid #fff9}.art-page-back{background:#b5c3a0;right:67px;top:37px;transform:rotate(11deg)}.art-page-back i:first-child{height:69px;background:#7e977a}.art-page-front{background:#ffefcf;right:152px;top:64px;transform:rotate(-10deg)}.art-page-front b{font:26px var(--serif);display:block;margin:14px 11px 4px;color:#bd5940}.art-page-front span{position:absolute;top:23px;right:15px;color:#e2a84e;font-size:18px}.art-page-front i{height:67px;background:#e8a975}.art-spark{position:absolute;font-size:30px;color:var(--coral);right:32px;top:41px}.library-heading{padding:31px 0 17px;display:flex;align-items:end;justify-content:space-between}.library-heading .eyebrow{margin-bottom:8px;color:#8a877d;font-size:9px}.library-heading h2{font:27px var(--serif);margin:0;letter-spacing:-.4px}.count-pill{display:inline-grid;place-items:center;vertical-align:4px;margin-left:5px;background:#ece8df;border-radius:20px;min-width:22px;height:22px;padding:0 6px;font:600 11px var(--sans);color:#77746b}.button{border:0;border-radius:7px;padding:11px 15px;font-size:12px;font-weight:700;transition:transform .15s,background .15s}.button:active{transform:scale(.98)}.button-primary{background:var(--coral);color:white}.button-primary:hover{background:var(--coral-dark)}.button-primary:disabled{opacity:.45;cursor:default}.button .plus{font-size:16px;vertical-align:-1px;margin-right:5px}.comic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.comic-card{min-width:0;position:relative}.comic-cover{height:217px;border-radius:6px;overflow:hidden;position:relative;background:#e7dfd1;cursor:pointer;transition:transform .2s}.comic-cover:hover{transform:translateY(-3px)}.comic-cover img{width:100%;height:100%;object-fit:cover;display:block}.comic-cover:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#171612a8)}.comic-cover-title{position:absolute;z-index:1;left:14px;right:14px;bottom:13px;color:white;font:20px/1.1 var(--serif);text-shadow:0 1px 8px #0006;overflow-wrap:anywhere}.comic-card-meta{display:flex;justify-content:space-between;align-items:center;padding:9px 1px;color:#87847b;font-size:10px}.comic-name{font-weight:600;color:#403f39;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%}.card-menu{border:0;background:transparent;color:#77746b;font-size:20px;line-height:1;padding:1px 5px}.empty-state{text-align:center;padding:38px 20px 52px}.empty-icon{display:grid;place-items:center;margin:0 auto 12px;width:47px;height:47px;border-radius:50%;background:#eee8de;color:#b89c7c;font-size:23px}.empty-state h3{font:20px var(--serif);margin:0 0 7px}.empty-state p{font-size:12px;color:#87847b;line-height:1.65;margin:0 0 16px}.button-dark{background:#302f29;color:white}.button-dark span{margin-left:13px;color:#f09a78}.storage-hint{border-top:1px solid var(--line);padding:18px 1px 23px;display:flex;align-items:center;gap:10px;color:#87847b;font-size:10px}.storage-hint strong{color:#4d4b43}.sparkle{color:var(--coral);font-size:15px}.text-button{margin-left:auto;border:0;background:none;color:#5c5a52;text-decoration:underline;text-underline-offset:3px;font-size:10px}.add-dialog,.options-dialog{border:0;padding:0;border-radius:12px;width:min(500px,calc(100% - 28px));background:#fcfaf6;color:var(--ink);box-shadow:0 22px 70px #312d2538}.add-dialog::backdrop,.options-dialog::backdrop{background:#25231fe0;backdrop-filter:blur(3px)}.add-dialog form,.options-dialog{padding:25px}.dialog-top{display:flex;justify-content:space-between;align-items:start;margin-bottom:21px}.dialog-top .eyebrow{margin-bottom:6px}.dialog-top h2{font:30px var(--serif);margin:0}.icon-button{display:grid;place-items:center;border:0;background:transparent;color:#76736b;font-size:25px;width:34px;height:34px;border-radius:50%}.icon-button:hover{background:#eeebe4}.field-label{display:block;font-size:11px;font-weight:700;margin-bottom:8px}.title-input{width:100%;border:1px solid #e4dfd5;border-radius:6px;padding:12px;background:white;outline:0;margin-bottom:17px;font-size:13px}.title-input:focus{border-color:var(--coral)}.drop-zone{display:flex;min-height:145px;border:1px dashed #d4cbbd;border-radius:8px;background:#f8f5ef;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;color:#77746b}.drop-zone:hover{border-color:var(--coral);background:#fcf5ed}.drop-zone input{position:absolute;width:1px;height:1px;opacity:0}.upload-icon{display:grid;place-items:center;background:#f2dfd4;color:var(--coral);border-radius:50%;width:32px;height:32px;font-size:17px;margin-bottom:3px}.drop-zone strong{font-size:12px;color:#3a3933}.drop-zone span:not(.upload-icon){font-size:10px}.drop-zone small{font-size:9px;color:#a09b91;margin-top:3px}.selected-panels{display:flex;gap:7px;overflow-x:auto;padding:10px 0 1px}.panel-thumb{position:relative;flex:0 0 60px;width:60px;height:66px}.panel-thumb img{width:100%;height:100%;object-fit:cover;border-radius:4px}.panel-number{position:absolute;left:4px;bottom:4px;background:#201e1bcf;color:white;padding:2px 5px;border-radius:3px;font-size:9px}.panel-remove{position:absolute;right:-4px;top:-5px;width:18px;height:18px;border:0;border-radius:50%;background:#302f29;color:white;line-height:1}.panel-move{position:absolute;bottom:4px;right:3px;border:0;border-radius:3px;background:#fffdf2dd;color:#282722;padding:1px 3px;font-size:10px}.dialog-actions{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:15px;margin-top:15px}.panel-status{font-size:10px;color:#88857b}.options-dialog{padding:24px}.options-dialog .dialog-top{margin-bottom:12px}.option-row{display:flex;justify-content:space-between;width:100%;padding:14px 4px;border:0;border-top:1px solid var(--line);background:none;text-align:left;color:#44423b;font-size:12px}.option-row span{color:#99958b}.option-row.destructive{color:#bd523b}.toast{position:fixed;z-index:10;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,20px);padding:11px 16px;background:#292821;color:#fff;border-radius:7px;font-size:11px;opacity:0;pointer-events:none;transition:.22s;box-shadow:0 5px 18px #0002}.toast.show{opacity:1;transform:translate(-50%,0)}.reader-view{position:fixed;inset:0;z-index:5;background:#f7f4ee;display:flex;flex-direction:column}.reader-toolbar{height:58px;flex:0 0 58px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px;padding:0 max(14px,calc((100% - 820px)/2));background:#f7f4eef2}.reader-title{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}.reader-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.reader-kicker{font-size:8px;letter-spacing:1.2px;color:#969186;font-weight:700}.reader-controls{height:53px;flex:0 0 53px;display:flex;align-items:center;justify-content:center;position:relative;background:#f7f4ee}.segmented{display:flex;padding:3px;border:1px solid #e5dfd5;border-radius:7px;background:#efebe3}.segmented button{border:0;background:transparent;padding:6px 12px;border-radius:5px;color:#807d74;font-size:10px}.segmented button.selected{background:#fff;color:#35342e;box-shadow:0 1px 4px #29251f15}.page-count{position:absolute;right:max(16px,calc((100% - 820px)/2));font-size:10px;color:#4e4b43;font-weight:700}.muted-slash{color:#bbb6ac;margin:0 5px}.reader-pages{overflow-y:auto;overscroll-behavior:contain;flex:1;text-align:center;scroll-behavior:smooth}.reader-pages img{display:block;max-width:100%;height:auto;margin:0 auto 8px}.reader-pages.fit-mode{display:flex;align-items:center;justify-content:center;overflow:hidden;background:#201f1c}.reader-pages.fit-mode img{display:none;max-height:100%;max-width:100%;object-fit:contain;margin:0}.reader-pages.fit-mode img.active{display:block}.reader-bottom{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:17px;padding:5px 8px;border-radius:24px;background:#302f29e8;color:white;box-shadow:0 3px 14px #0002}.reader-bottom button{width:30px;height:30px;border:0;border-radius:50%;background:#ffffff20;color:white;font-size:15px}.reader-bottom span{font-size:8px;letter-spacing:1px;color:#ddd9cf}.library-view[hidden],.reader-view[hidden]{display:none}@media(min-width:800px){.reader-pages img{max-width:min(100%,820px)}.reader-pages.fit-mode img{max-width:calc(100% - 40px)}.reader-pages{padding-bottom:48px}}@media(max-width:700px){.topbar{height:58px;padding:0 17px}.private-note{font-size:10px}main{padding:0 18px}.hero{min-height:252px}.hero-copy{position:relative;z-index:1;padding:29px 0 33px}.hero h1{font-size:42px}.hero-text{font-size:11px;max-width:185px;line-height:1.5}.hero-art{right:-101px;opacity:.7;transform:scale(.84);transform-origin:bottom right}.library-heading{padding-top:24px}.library-heading h2{font-size:24px}.button{padding:10px 12px;font-size:11px}.comic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.comic-cover{height:clamp(150px,55vw,270px)}.comic-cover-title{font-size:18px}.empty-state{padding-top:28px}.storage-hint{font-size:9px;align-items:flex-start;line-height:1.5}.text-button{white-space:nowrap;font-size:9px}.reader-pages img{width:100%}.reader-pages.fit-mode{padding:0 8px}.reader-pages.fit-mode img{width:auto;max-width:100%;height:auto}.reader-toolbar{padding:0 10px}}@media(max-width:370px){.private-note span{max-width:90px}.library-heading h2{font-size:22px}.library-heading .button{padding:9px}.comic-cover{height:150px}.storage-hint{flex-wrap:wrap}.text-button{margin-left:25px}}
.backup-actions{margin-left:auto;display:flex;gap:13px}.backup-actions .text-button{margin-left:0}
.reader-pages.fit-mode{display:block;overflow-y:auto;overflow-x:hidden;padding:0 8px 54px}.reader-pages.fit-mode img{width:100%;height:auto;max-width:820px;max-height:none;margin:0 auto}.reader-pages.fit-mode img.active{display:block}