@import "https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Manrope:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;600;700;800&family=EB+Garamond:ital,wght@0,600;0,700;1,400&display=swap";:root{--bg-canvas:#f5f8fa;--bg-outer:#e8edf0;--bg-card:#fff;--bg-card-hover:#fff;--bg-nav:#eaf0f4;--border-dark:#142c3d26;--border-subtle:#142c3d14;--color-primary:#142c3d;--color-primary-container:#234259;--color-secondary:#cbb081;--color-secondary-container:#fbf6ec;--color-accent:#335269;--color-gold:#cbb081;--color-text-dark:#142c3d;--color-text-light:#f5f8fa;--color-muted:#687985;--color-spoiler:#2f3539;--avatar-creator:#cbb081;--avatar-guest:#687985;--font-heading:"Bodoni Moda", "EB Garamond", Georgia, serif;--font-body:"Manrope", "Plus Jakarta Sans", sans-serif;--font-label:"Hanken Grotesk", sans-serif;--transition-spring:all .35s cubic-bezier(.16, 1, .3, 1);--transition-smooth:all .25s cubic-bezier(.16, 1, .3, 1);--shadow-card:0 10px 30px -4px #142c3d0f, 0 4px 12px -2px #142c3d08;--shadow-hover:0 18px 42px -6px #142c3d1f, 0 6px 18px -2px #142c3d0f;--shadow-flat:none}.theme-green{--bg-canvas:#fbf9f5;--bg-outer:#f4efe6;--bg-card:#fff;--bg-card-hover:#fff;--bg-nav:#f3efe6;--border-dark:#16382626;--border-subtle:#16382614;--color-primary:#163826;--color-primary-container:#2d4f3c;--color-secondary:#c5a059;--color-secondary-container:#f7e6d2;--color-accent:#3e5c4a;--color-gold:#c5a059;--color-text-dark:#163826;--color-text-light:#fbf9f5;--color-muted:#6e7771;--color-spoiler:#343225;--avatar-creator:#163826;--avatar-guest:#c5a059;--shadow-card:0 10px 30px -4px #1638260f, 0 4px 12px -2px #16382608;--shadow-hover:0 18px 42px -6px #1638261f, 0 6px 18px -2px #1638260f;--shadow-flat:none}.theme-blue{--bg-canvas:#f5f8fa;--bg-outer:#e8edf0;--bg-card:#fff;--bg-card-hover:#fff;--bg-nav:#eaf0f4;--border-dark:#142c3d26;--border-subtle:#142c3d14;--color-primary:#142c3d;--color-primary-container:#234259;--color-secondary:#cbb081;--color-secondary-container:#fbf6ec;--color-accent:#335269;--color-gold:#cbb081;--color-text-dark:#142c3d;--color-text-light:#f5f8fa;--color-muted:#687985;--color-spoiler:#2f3539;--avatar-creator:#142c3d;--avatar-guest:#cbb081;--shadow-card:0 10px 30px -4px #142c3d0f, 0 4px 12px -2px #142c3d08;--shadow-hover:0 18px 42px -6px #142c3d1f, 0 6px 18px -2px #142c3d0f;--shadow-flat:none}.theme-rose{--bg-canvas:#fcf8f6;--bg-outer:#f3eae6;--bg-card:#fff;--bg-card-hover:#fff;--bg-nav:#f5ece7;--border-dark:#8e3b2926;--border-subtle:#8e3b2914;--color-primary:#8e3b29;--color-primary-container:#aa503c;--color-secondary:#9f3f39;--color-secondary-container:#ffdad3;--color-accent:#9a4431;--color-text-dark:#8e3b29;--color-text-light:#fcf8f6;--color-muted:#82716d;--color-spoiler:#31302f;--avatar-creator:#8e3b29;--avatar-guest:#9f3f39;--shadow-card:0 10px 30px -4px #8e3b290f, 0 4px 12px -2px #8e3b2908;--shadow-hover:0 18px 42px -6px #8e3b291f, 0 6px 18px -2px #8e3b290f;--shadow-flat:none}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{width:100%;max-width:100vw;margin:0;padding:0;position:relative;overflow-x:hidden}body{background-color:var(--bg-canvas);font-family:var(--font-body);color:var(--color-text-dark);justify-content:center;align-items:flex-start;min-height:100dvh;display:flex}#root{justify-content:center;width:100%;max-width:100vw;display:flex;overflow-x:hidden}.app-container{background-color:var(--bg-canvas);width:100%;max-width:100%;min-height:100dvh;padding-bottom:calc(76px + max(16px, env(safe-area-inset-bottom,16px)));border:none;flex-direction:column;display:flex;position:relative;overflow-x:hidden}@media (width>=768px){body{background-color:var(--bg-canvas)}.app-container{padding-bottom:32px}}h1,h2,h3,h4{font-family:var(--font-heading);letter-spacing:-.02em;font-weight:700}.font-serif{font-family:var(--font-heading)}.font-label{font-family:var(--font-label);letter-spacing:.05em}.btn{color:var(--color-text-dark);border:1.5px solid var(--border-dark);font-family:var(--font-label);cursor:pointer;box-shadow:2px 2px 0px var(--border-dark);transition:var(--transition-spring);text-transform:uppercase;letter-spacing:.04em;background-color:#fff;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:.85rem;font-weight:700;display:inline-flex}.btn:hover{box-shadow:3px 3px 0px var(--border-dark);transform:translateY(-1px)}.btn:active{box-shadow:1px 1px 0px var(--border-dark);transform:translateY(1px)}.btn-primary{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.btn-secondary{background-color:var(--color-secondary);color:#fff;border-color:var(--color-secondary)}.btn-circle{border:2px solid var(--color-primary);width:42px;height:42px;color:var(--color-primary);box-shadow:2px 2px 0px var(--color-primary);background-color:#fff;border-radius:50%;padding:0}.btn-circle:active{box-shadow:0px 0px 0px var(--color-primary);transform:translate(2px,2px)}.form-group{flex-direction:column;gap:6px;margin-bottom:16px;display:flex}.form-label{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.05em;color:var(--color-primary);font-size:.8rem;font-weight:700}.form-input{border:1.5px solid var(--border-subtle);font-family:var(--font-body);color:var(--color-text-dark);transition:var(--transition-smooth);background-color:#fff;border-radius:12px;width:100%;padding:12px 16px;font-size:.95rem;font-weight:500;box-shadow:0 2px 8px #00000008}.form-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #1638261f}.chapter-stitch-card{border:1.5px solid var(--color-primary);min-height:240px;box-shadow:2px 2px 0px var(--color-primary);transition:var(--transition-spring);cursor:pointer;background-color:#fff;border-radius:12px;flex-direction:column;justify-content:space-between;align-items:center;padding:24px 16px;display:flex;position:relative}.chapter-stitch-card:hover{box-shadow:4px 4px 0px var(--color-primary);transform:translate(-1px,-1px)}.chapter-stitch-card:active{box-shadow:0px 0px 0px var(--color-primary);transform:translate(2px,2px)}.chapter-thread-btn{border:1.5px solid var(--color-primary);width:100%;font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.2em;color:var(--color-primary);transition:var(--transition-smooth);cursor:pointer;background-color:#0000;border-radius:9999px;justify-content:center;align-items:center;gap:8px;padding:10px 0;font-size:.75rem;font-weight:700;display:flex}.chapter-stitch-card:hover .chapter-thread-btn{background-color:var(--color-primary);color:#fff}.paper-card{border:1.5px solid var(--color-primary);box-shadow:2px 2px 0px var(--color-primary);background-color:#fff;border-radius:8px;position:relative}.paper-card:before{content:"";border-style:solid;border-width:0 16px 16px 0;border-color:var(--bg-canvas) var(--bg-canvas) var(--color-primary) var(--color-primary);background:#fff;border-radius:0 0 0 4px;position:absolute;top:-2px;right:-2px;box-shadow:0 1px 1px #0000004d}.lined-paper{background-image:linear-gradient(var(--border-subtle) 1px, transparent 1px);background-size:100% 24px;padding-top:24px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in-up{animation:.4s cubic-bezier(.16,1,.3,1) forwards fadeInUp}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.shake{animation:.3s shake}.toast{background-color:var(--color-primary);color:#faf6ee;border:1px solid var(--color-accent);font-family:var(--font-label);letter-spacing:.04em;z-index:1000;pointer-events:none;text-transform:uppercase;border-radius:50px;padding:10px 20px;font-size:.8rem;font-weight:700;transition:transform .4s cubic-bezier(.175,.885,.32,1.275);position:fixed;bottom:84px;left:50%;transform:translate(-50%)translateY(100px);box-shadow:0 4px 20px #0003}.toast.show{transform:translate(-50%)translateY(0)}.chapter-unread-dot{z-index:10;background-color:#e53935;border:2px solid #fff;border-radius:50%;width:10px;height:10px;animation:2s ease-in-out infinite dot-pulse;position:absolute;top:7px;right:7px;box-shadow:0 1px 4px #e5393580}@keyframes dot-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.15)}}.hide-scrollbar::-webkit-scrollbar{display:none}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.book-carousel-wrapper{width:100%;padding:4px 0 16px;position:relative;overflow:hidden}.book-carousel-track{scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:20px;padding:12px 6px 20px;display:flex;overflow-x:auto}.book-carousel-track::-webkit-scrollbar{display:none}.book-carousel-track{-ms-overflow-style:none;scrollbar-width:none}.book-carousel-card{scroll-snap-align:start;background-color:var(--bg-card);border:1px solid var(--border-dark);box-shadow:var(--shadow-card);cursor:pointer;border-radius:16px;flex-direction:column;flex:0 0 240px;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),border-color .35s;display:flex;position:relative;overflow:visible}.book-carousel-card:hover{box-shadow:var(--shadow-hover);border-color:#1638264d;transform:translateY(-6px)}.book-carousel-card img{transition:transform .45s cubic-bezier(.16,1,.3,1)}.book-carousel-card:hover img{transform:scale(1.06)}.carousel-nav-btn{z-index:20;-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-dark);width:44px;height:44px;color:var(--color-primary);cursor:pointer;background:#ffffffe0;border-radius:50%;justify-content:center;align-items:center;transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s,opacity .25s;display:flex;position:absolute;top:calc(50% - 22px);box-shadow:0 6px 20px #00000014}.carousel-nav-btn:hover:not(:disabled){background:#fff;transform:scale(1.08);box-shadow:0 8px 24px #0000001f}.carousel-nav-btn:disabled{opacity:.25;cursor:not-allowed}.carousel-nav-btn.prev{left:4px}.carousel-nav-btn.next{right:4px}.carousel-dots{justify-content:center;align-items:center;gap:8px;margin-top:14px;display:flex}.carousel-dot{background:var(--border-subtle);cursor:pointer;border:none;border-radius:50%;width:8px;height:8px;transition:transform .25s,background .25s,width .25s}.carousel-dot.active{background:var(--color-primary);border-radius:10px;width:22px}.responsive-view-wrapper{width:100%;max-width:1280px;margin:0 auto;padding:0 16px}@media (width>=768px){.responsive-view-wrapper{padding:0 32px}}@media (width>=1440px){.responsive-view-wrapper{max-width:1400px;padding:0 48px}}.responsive-books-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (width>=640px){.responsive-books-grid{grid-template-columns:repeat(3,1fr);gap:20px}}@media (width>=960px){.responsive-books-grid{grid-template-columns:repeat(4,1fr);gap:24px}}@media (width>=1280px){.responsive-books-grid{grid-template-columns:repeat(5,1fr);gap:24px}}.book-detail-responsive-container{flex-direction:column;gap:24px;width:100%;display:flex}@media (width>=868px){.book-detail-responsive-container{grid-template-columns:340px 1fr;align-items:start;gap:32px;display:grid}.book-detail-left-sidebar{max-height:calc(100vh - 100px);position:sticky;top:84px;overflow-y:auto}}@media (width>=1100px){.book-detail-responsive-container{grid-template-columns:380px 1fr}}.desktop-nav-links{display:none}@media (width>=768px){.desktop-nav-links{align-items:center;gap:8px;display:flex}.desktop-hide-bottom-nav{display:none!important}}.desktop-nav-tab{font-family:var(--font-label);letter-spacing:.02em;color:var(--color-muted);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;border-radius:20px;align-items:center;gap:6px;padding:8px 16px;font-size:.8rem;font-weight:700;display:inline-flex}.desktop-nav-tab:hover{color:var(--color-primary);background-color:var(--border-subtle)}.desktop-nav-tab.active{background-color:var(--color-primary);color:#fff;box-shadow:0 4px 12px #0000001f}.modal-overlay-container{-webkit-backdrop-filter:blur(8px);z-index:2000;background:#00000073;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal-responsive-card{background-color:var(--bg-card);border:1px solid var(--border-dark);border-radius:24px;width:100%;max-width:600px;max-height:90vh;animation:.3s cubic-bezier(.16,1,.3,1) forwards fadeInUp;overflow-y:auto;box-shadow:0 20px 50px #0003}