*{box-sizing:border-box;min-width:0} :root{font-family:Roboto,Arial,sans-serif;color:#262b2d;background:#eef1f3} body{margin:0;background:#f8fafa} button,input{font:inherit} button{cursor:pointer} button:focus-visible,input:focus-visible{outline:3px solid #f3b64f;outline-offset:3px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .app-shell{min-height:100dvh;max-width:1000px;margin:0 auto;background:#f9fbfb;box-shadow:0 0 18px #26384012;padding-bottom:100px} .header{position:sticky;top:0;z-index:5;background:#507f91;color:white;box-shadow:0 2px 4px #0002} .toolbar{height:78px;display:flex;align-items:center;gap:22px;padding:0 16px} .toolbar h1{font-size:25px;margin:0;font-weight:700;flex:1} .toolbar-actions{display:flex;align-items:center;gap:18px} .icon-button,.home-button,.filter-button{border:0;background:none;padding:0;display:grid;place-items:center;color:inherit} .icon-button{width:38px;height:42px} svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .icon-button svg{width:34px;height:34px} .tabs{height:72px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:7px;padding:0 8px 10px} .tab{border:0;background:transparent;color:#fff;height:55px;font-weight:600;font-size:18px;border-radius:50px;min-width:0} .tab.active{background:#f9fcfc;color:#39758a} .search-bar{padding:0 16px 12px;display:flex;gap:8px} .search-bar[hidden],.menu[hidden]{display:none} .search-bar input{width:100%;border:0;border-radius:5px;padding:12px} .search-bar button,.menu button{background:#fff;border:0;border-radius:5px;padding:8px 13px;color:#315e70} .menu{position:absolute;top:68px;left:12px;z-index:8;background:#fff;color:#263b44;padding:20px;box-shadow:0 5px 20px #0003;border-radius:8px} .menu p{font-size:14px;color:#536974} .breadcrumb{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #ddd;color:#353b3b;background:#fafcfc} .breadcrumb>div,.breadcrumb-end{display:flex;align-items:center;gap:18px}.home-button{width:27px;height:27px}.home-button svg{fill:#484f50;stroke:none}.filter-button{width:30px;height:30px}.breadcrumb-end{font-size:21px}.demo-note{margin:10px 16px 0;font-size:12px;color:#66767d}.shelf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0;row-gap:0;padding-top:12px}.shelf{min-width:0;border:0;background:transparent;text-align:left;padding:0 12px 16px;position:relative;color:inherit}.shelf-art{height:164px;position:relative;display:flex;align-items:flex-end;justify-content:center;margin:0 auto;max-width:180px;padding-right:22px}.count-strip{position:absolute;right:0;top:0;bottom:0;width:25px;background:#eaebed;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:13px;color:#34383a}.book-stack{display:block;width:116px;height:144px;object-fit:contain;max-width:100%;position:relative;z-index:1}.shelf-name{display:block;background:#4e7f90;color:#fff;text-align:center;border-radius:3px;padding:3px 5px;font-size:15px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;margin:4px auto 0}.shelf:after{content:"";position:absolute;bottom:0;left:0;right:0;height:13px;background:#ebecee;z-index:0}.shelf-grid.list{display:block;padding:8px 16px}.list .shelf{display:flex;align-items:center;width:100%;padding:10px;border-bottom:1px solid #e0e5e5;gap:15px}.list .shelf-art{width:76px;height:80px;margin:0;flex:none}.list .book-stack{width:55px;height:70px;object-fit:contain}.list .shelf-name{margin:0;max-width:none;white-space:normal;text-align:left;background:none;color:#355f6c;font-size:16px}.list .count-strip{font-size:11px}.list .shelf:after{display:none}.empty{grid-column:1/-1;padding:45px 20px;text-align:center;color:#657780}.floating-add{position:fixed;z-index:3;right:max(24px,calc((100vw - 1000px)/2 + 24px));bottom:116px;width:88px;height:88px;border:0;border-radius:50%;background:#81b4c6;color:white;box-shadow:0 4px 8px #0003;display:grid;place-items:center}.floating-add svg{width:38px;height:38px;stroke-width:2.3}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,1000px);height:88px;background:#f0f4f8;display:grid;grid-template-columns:repeat(3,1fr);z-index:4;border-top:1px solid #d5dade;padding-bottom:env(safe-area-inset-bottom)}.bottom-nav button{border:0;background:none;color:#738295;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:17px}.bottom-nav button.selected{color:#39758a;font-weight:700}.bottom-nav svg{height:32px;width:32px}.toast{position:fixed;left:50%;bottom:105px;transform:translateX(-50%);z-index:10;background:#263e48;color:white;padding:10px 16px;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw}.toast.show{opacity:1}dialog{border:0;border-radius:10px;max-width:min(90vw,420px);padding:24px;color:#23343b;box-shadow:0 10px 40px #0003}dialog::backdrop{background:#0008}dialog h2{margin:0 30px 12px 0}.dialog-close{float:right;border:0;background:none;font-size:26px;color:#63767d}.dialog-ok{border:0;background:#507f91;color:white;border-radius:5px;padding:10px 20px;margin-top:15px}@media(max-width:450px){.toolbar{height:62px;gap:12px;padding:0 12px}.toolbar h1{font-size:20px}.toolbar-actions{gap:8px}.icon-button{width:30px}.icon-button svg{width:27px;height:27px}.tabs{height:58px;padding-bottom:7px}.tab{height:44px;font-size:15px}.breadcrumb{height:49px;font-size:14px}.breadcrumb-end{font-size:16px}.shelf{padding:0 7px 13px}.shelf-art{height:132px;padding-right:18px}.count-strip{width:18px;font-size:10px}.book-stack{width:93px;height:116px}.shelf-name{font-size:12px}.shelf:after{height:10px}.floating-add{height:64px;width:64px;bottom:96px}.bottom-nav{height:76px}.bottom-nav button{font-size:13px}.bottom-nav svg{width:28px;height:28px}}@media(min-width:700px){.shelf-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.shelf-art{height:190px}.book-stack{width:128px;height:158px}}

.book-content{padding:24px 20px}.book-listing{display:flex}.book-entry{display:flex;flex-direction:column;align-items:center;gap:12px;width:190px;max-width:100%;padding:12px;border:0;background:transparent;color:#315e70;font-weight:700;text-align:center}.book-entry img{width:140px;max-width:100%;height:auto;box-shadow:0 3px 8px #0002}.book-entry small{display:block;margin-top:5px;font-size:12px;font-weight:400;color:#596970}.book-detail{display:flex;align-items:flex-start;gap:28px;max-width:720px}.book-detail img{width:181px;max-width:35%;height:auto;box-shadow:0 3px 8px #0002}.book-detail h2{margin:0 0 12px;font-size:24px;color:#315e70}.book-detail p{line-height:1.5}.book-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.book-links a{background:#507f91;color:white;padding:12px 15px;border-radius:4px;text-decoration:none;font-weight:600}.book-links a:focus-visible{outline:3px solid #f3b64f;outline-offset:3px}.book-note{font-size:13px;color:#52666e}@media(max-width:450px){.book-content{padding:18px 14px}.book-detail{gap:16px}.book-detail h2{font-size:19px}.book-links a{width:100%;text-align:center}}