.books-hero{background:linear-gradient(135deg,var(--color-primary) 0,var(--color-primary-dark) 100%);color:var(--color-text-inverse);padding-block:var(--spacing-xl);text-align:center}.books-hero__title{font-size:var(--font-size-h2);font-weight:var(--font-weight-bold);line-height:var(--line-height-heading);-webkit-margin-after:var(--spacing-xs);margin-block-end:var(--spacing-xs)}.books-hero__subtitle{font-size:var(--font-size-body);opacity:.9}.books-controls{padding-block:var(--spacing-lg);background-color:var(--color-surface);-webkit-border-after:1px solid var(--color-border);border-block-end:1px solid var(--color-border)}.book-grade-selector{display:flex;gap:var(--spacing-sm);-webkit-margin-after:var(--spacing-md);margin-block-end:var(--spacing-md);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;-webkit-padding-after:var(--spacing-xs);padding-block-end:var(--spacing-xs)}.book-grade-selector::-webkit-scrollbar{height:4px}.book-grade-selector::-webkit-scrollbar-track{background:transparent}.book-grade-selector::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}.book-grade-selector__btn{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);background-color:var(--color-background);border:2px solid var(--color-border);border-radius:var(--radius-full);min-height:44px;white-space:nowrap;cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.book-grade-selector__btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.book-grade-selector__btn--active{background-color:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}.book-grade-selector__btn--active:hover{background-color:var(--color-primary-dark);border-color:var(--color-primary-dark);color:var(--color-text-inverse)}.book-grade-selector__btn:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.book-grade-selector__icon{font-size:var(--font-size-h4)}.book-semester-toggle{display:inline-flex;gap:0;border:2px solid var(--color-border);border-radius:var(--radius-full);overflow:hidden;background-color:var(--color-background)}.book-semester-toggle__btn{padding:var(--spacing-sm) var(--spacing-xl);font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);background-color:transparent;border:none;min-height:44px;cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast)}.book-semester-toggle__btn:hover{background-color:var(--color-primary-light);color:var(--color-primary)}.book-semester-toggle__btn--active{background-color:var(--color-primary);color:var(--color-text-inverse)}.book-semester-toggle__btn--active:hover{background-color:var(--color-primary-dark);color:var(--color-text-inverse)}.book-semester-toggle__btn:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.books-content{padding-block:var(--spacing-xl)}.books-content__header{-webkit-margin-after:var(--spacing-lg);margin-block-end:var(--spacing-lg)}.books-content__title{font-size:var(--font-size-h3);font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.book-grid{display:grid;grid-template-columns:1fr;grid-gap:var(--spacing-md);gap:var(--spacing-md)}.book-card{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xl) var(--spacing-md);border:2px solid var(--color-border);border-radius:var(--radius-lg);background-color:var(--color-background);text-align:center;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast),background-color var(--transition-fast)}.book-card__icon{font-size:2.5rem;line-height:1}.book-card__name{font-size:var(--font-size-body);font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.book-card__status{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);padding:2px var(--spacing-sm);border-radius:var(--radius-full)}.book-card--available{border-color:var(--color-primary-light)}.book-card--available:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.book-card--available:active{transform:translateY(0)}.book-card--available .book-card__status--available{background-color:var(--color-primary-light);color:var(--color-primary)}.book-card--available:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.book-card--unavailable{opacity:.6;cursor:not-allowed;background-color:var(--color-surface)}.book-card--unavailable .book-card__name{color:var(--color-text-secondary)}.book-card--unavailable .book-card__status--unavailable{background-color:var(--color-border);color:var(--color-text-secondary)}.book-viewer{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center}.book-viewer__backdrop{position:absolute;inset:0;background-color:rgba(0,0,0,.6)}.book-viewer__content{position:relative;display:flex;flex-direction:column;width:95vw;height:90vh;max-width:1000px;background-color:var(--color-background);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);overflow:hidden}.book-viewer__toolbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-surface);-webkit-border-after:1px solid var(--color-border);border-block-end:1px solid var(--color-border);min-height:48px}.book-viewer__title{font-size:var(--font-size-body);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.book-viewer__actions{display:flex;align-items:center;gap:var(--spacing-sm);flex-shrink:0}.book-viewer__btn{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);border:1px solid var(--color-border);border-radius:var(--radius-md);min-height:36px;cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);text-decoration:none}.book-viewer__btn:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.book-viewer__btn--download{background-color:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}.book-viewer__btn--download:hover{background-color:var(--color-primary-dark);border-color:var(--color-primary-dark)}.book-viewer__btn--close{background-color:var(--color-background);color:var(--color-text-secondary)}.book-viewer__btn--close:hover{background-color:var(--color-surface);border-color:var(--color-text-secondary);color:var(--color-text-primary)}.book-viewer__canvas-area{flex:1 1;min-height:0;overflow:hidden;background-color:var(--color-surface);position:relative}.book-viewer__canvas-area,.book-viewer__canvas-area .react-pdf__Document,.book-viewer__canvas-area .react-pdf__Page{display:flex;justify-content:center;align-items:center}.book-viewer__canvas-area .react-pdf__Page canvas{display:block}.book-viewer__page-wrapper{position:relative;flex-shrink:0}.book-viewer__draw-canvas{position:absolute;inset:0;pointer-events:none;touch-action:none;z-index:2}.book-viewer__draw-canvas--active{pointer-events:auto;cursor:crosshair}.book-viewer__draw-toolbar{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-md);background-color:var(--color-surface);-webkit-border-after:1px solid var(--color-border);border-block-end:1px solid var(--color-border);min-height:48px}.book-viewer__tool-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:1.25rem;border:2px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-background);cursor:pointer;transition:transform var(--transition-fast),border-color var(--transition-fast),background-color var(--transition-fast)}.book-viewer__tool-btn--active,.book-viewer__tool-btn:hover{border-color:var(--color-primary)}.book-viewer__tool-btn--active{background-color:var(--color-primary-light);transform:scale(1.1)}.book-viewer__toolbar-divider{width:1px;height:24px;background-color:var(--color-border);margin-inline:var(--spacing-xs)}.book-viewer__color-picks{display:flex;gap:var(--spacing-sm)}.book-viewer__color-btn{width:28px;height:28px;border-radius:50%;border:2px solid var(--color-border);cursor:pointer;transition:transform var(--transition-fast),border-color var(--transition-fast)}.book-viewer__color-btn:hover{transform:scale(1.15)}.book-viewer__color-btn--active{border-color:var(--color-text-primary);transform:scale(1.2);box-shadow:0 0 0 2px var(--color-background),0 0 0 4px var(--color-text-primary)}.book-viewer__btn--clear{background-color:var(--color-background);color:var(--color-text-secondary);font-size:var(--font-size-small)}.book-viewer__btn--clear:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.book-viewer__loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-md);color:var(--color-text-secondary);font-size:var(--font-size-body)}.book-viewer__spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:book-viewer-spin .8s linear infinite}@keyframes book-viewer-spin{to{transform:rotate(1turn)}}.book-viewer__error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-2xl);text-align:center;color:var(--color-text-secondary);font-size:var(--font-size-body)}.book-viewer__retry-btn{padding:var(--spacing-sm) var(--spacing-xl);font-size:var(--font-size-body);font-weight:var(--font-weight-bold);background-color:var(--color-primary);color:var(--color-text-inverse);border:none;border-radius:var(--radius-md);min-height:44px;cursor:pointer;transition:background-color var(--transition-fast)}.book-viewer__retry-btn:hover{background-color:var(--color-primary-dark)}.book-viewer__retry-btn:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.book-viewer__nav{flex-shrink:0;display:flex;gap:var(--spacing-lg);padding:var(--spacing-sm) var(--spacing-md);-webkit-padding-after:calc(12px + env(safe-area-inset-bottom, 0px));padding-block-end:calc(12px + env(safe-area-inset-bottom, 0px));background-color:var(--color-surface);-webkit-border-before:1px solid var(--color-border);border-block-start:1px solid var(--color-border)}.book-viewer__nav,.book-viewer__nav-btn{align-items:center;justify-content:center}.book-viewer__nav-btn{display:inline-flex;width:44px;height:44px;font-size:1.5rem;font-weight:var(--font-weight-bold);color:var(--color-text-primary);background-color:var(--color-background);border:1px solid var(--color-border);border-radius:50%;cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.book-viewer__nav-btn:hover:not(:disabled){background-color:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary)}.book-viewer__nav-btn:disabled{opacity:.3;cursor:not-allowed}.book-viewer__nav-btn:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.book-viewer__page-indicator{font-size:var(--font-size-body);font-weight:var(--font-weight-bold);color:var(--color-text-primary);min-width:80px;text-align:center;direction:ltr}@media (min-width:480px){.book-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.books-hero__title{font-size:var(--font-size-h3)}.book-grade-selector{flex-wrap:nowrap}.book-semester-toggle{width:100%}.book-semester-toggle__btn{flex:1 1;text-align:center}.book-viewer__content{width:100vw;height:100vh;border-radius:0}.book-viewer__toolbar{flex-wrap:wrap}}@media (min-width:768px){.books-hero{padding-block:var(--spacing-2xl)}.books-hero__title{font-size:var(--font-size-h1)}.book-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width:1024px){.books-content{padding-block:var(--spacing-2xl)}.book-grid{grid-template-columns:repeat(4,1fr)}}