.canon-app-wrapper{margin-bottom:2.5rem}.filter-panel{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:14px;padding:1.25rem;margin-bottom:2rem;box-shadow:var(--shadow-card)}.search-row{display:flex;gap:.75rem;margin-bottom:1rem}.search-box{flex:1;position:relative}.search-box input{width:100%;height:48px;padding:0 1rem 0 2.75rem;background:var(--bg-canvas);border:1px solid var(--border-subtle);border-radius:10px;color:var(--text-primary);font-size:.95rem;transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.search-box input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px hsl(var(--accent-blue-raw) / .15)}.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--text-muted);pointer-events:none}.custom-dropdown{position:relative;min-width:190px}.dropdown-trigger{width:100%;height:48px;padding:0 1rem;background:var(--bg-canvas);border:1px solid var(--border-subtle);border-radius:10px;color:var(--text-primary);font-size:.9rem;font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:.5rem;cursor:pointer;transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.dropdown-trigger:focus,.dropdown-trigger[aria-expanded=true]{border-color:var(--border-focus);box-shadow:0 0 0 3px hsl(var(--accent-blue-raw) / .15);outline:none}.dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-elevated);padding:.35rem;list-style:none;z-index:50;margin:0}.dropdown-menu li{padding:.55rem .75rem;font-size:.88rem;color:var(--text-secondary);border-radius:6px;cursor:pointer;transition:background var(--duration-fast) ease,color var(--duration-fast) ease}.dropdown-menu li:hover,.dropdown-menu li[aria-selected=true]{background:hsl(var(--accent-blue-raw) / .1);color:var(--text-primary);font-weight:600}.pill-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.pill{min-height:40px;padding:0 1.1rem;border-radius:20px;font-size:.85rem;font-weight:600;border:1px solid var(--border-subtle);background:var(--bg-surface-elevated);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;gap:.4rem;white-space:nowrap;transition:background-color var(--duration-fast) ease,color var(--duration-fast) ease,border-color var(--duration-fast) ease,transform .1s var(--ease-spring)}.pill:hover{background:var(--border-subtle);color:var(--text-primary);transform:translateY(-1px)}.pill:active{transform:scale(.96)}.pill.active{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff;font-weight:700}.pill-star.active{background:var(--accent-gold);border-color:var(--accent-gold);color:#0f1729}.stage-grid{display:grid;grid-template-columns:1fr 340px;gap:2rem}.books-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.25rem;min-height:450px}.book-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;padding:1.25rem;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow-card);transition:transform var(--duration-fast) var(--ease-spring),border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.book-card:hover{transform:translateY(-3px);border-color:var(--accent-blue);box-shadow:var(--shadow-card-hover)}.card-header-badges{display:flex;gap:.4rem;margin-bottom:.75rem;flex-wrap:wrap}.card-book-title{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-bottom:.2rem;line-height:1.25}.card-book-link{color:inherit;text-decoration:none;transition:color var(--duration-fast) ease}.card-book-link:hover{color:var(--accent-blue);text-decoration:underline}.btn-link-action{text-decoration:none;text-align:center}.card-author{font-size:.925rem;font-weight:600;color:var(--accent-blue);margin-bottom:.75rem}.card-motifs-text{font-size:.85rem;color:var(--text-secondary);line-height:1.5;margin-bottom:1.25rem}.card-motifs-text strong{color:var(--text-primary)}.card-actions-bar{display:flex;gap:.4rem;margin-top:auto;padding-top:.75rem;border-top:1px solid var(--border-subtle);flex-wrap:wrap}.btn-card-action{flex:1;min-height:38px;padding:0 .5rem;border-radius:8px;font-size:.8rem;font-weight:600;border:1px solid var(--border-subtle);background:var(--bg-surface-elevated);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.25rem;white-space:nowrap;transition:background-color var(--duration-fast) ease,color var(--duration-fast) ease,border-color var(--duration-fast) ease,transform var(--duration-fast) cubic-bezier(.16,1,.3,1)}.btn-card-action:hover{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}.btn-card-action.in-basket{background:var(--state-success-bg);color:var(--state-success);border-color:var(--state-success)}.badge-fragment{background:hsl(var(--accent-blue-raw) / .12);color:var(--accent-blue);border:1px solid hsl(var(--accent-blue-raw) / .3)}.companion-sidebar{display:flex;flex-direction:column;gap:1.5rem;position:sticky;top:5.5rem;height:fit-content}.side-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;padding:1.25rem;box-shadow:var(--shadow-card)}.card-warning{border-left:4px solid var(--state-danger)}.side-card-title{font-family:var(--font-heading);font-size:1rem;font-weight:700;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem;color:var(--text-primary)}.title-danger{color:var(--state-danger)}.side-desc{font-size:.85rem;color:var(--text-secondary);line-height:1.5;margin-bottom:.75rem}.countdown-display{font-family:var(--font-heading);font-size:2.2rem;font-weight:800;color:var(--accent-gold);line-height:1;margin:.5rem 0;font-variant-numeric:tabular-nums}.countdown-date{font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted)}.study-basket-list{list-style:none;font-size:.875rem;color:var(--text-secondary);min-height:60px;max-height:220px;overflow-y:auto;margin-bottom:1rem}.study-basket-list li{padding:.4rem 0;border-bottom:1px solid var(--border-subtle);display:flex;justify-content:space-between;align-items:center}.basket-empty{color:var(--text-muted)!important;font-style:italic;border-bottom:none!important;padding:.75rem 0!important}.remove-basket-btn{color:var(--state-danger);background:none;border:none;font-size:1.2rem;cursor:pointer;line-height:1;padding:0 .25rem}.btn-print{width:100%;min-height:46px;background:var(--accent-gold);color:#0f1729;font-weight:800;font-size:.9rem;border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 2px 8px hsl(var(--accent-gold-raw) / .3);transition:background-color var(--duration-fast) ease}.btn-print:hover{background:var(--accent-gold-hover)}.modal-overlay{position:fixed;inset:0;background:#0f172abf;backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:200;padding:1rem}.modal-overlay.open{display:flex}.modal-content{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:16px;max-width:720px;width:100%;padding:1.75rem;max-height:88vh;overflow-y:auto;box-shadow:0 25px 50px -12px #00000080}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;border-bottom:1px solid var(--border-subtle);padding-bottom:.75rem}.modal-title{font-size:1.35rem;font-weight:700;margin:0;font-family:var(--font-heading);color:var(--text-primary)}.close-modal-btn{background:none;border:none;color:var(--text-muted);font-size:1.75rem;cursor:pointer;line-height:1}.modal-plot-timeline{display:flex;flex-direction:column;gap:.55rem;margin:.75rem 0 1.25rem}.modal-plot-step{display:flex;align-items:flex-start;gap:.75rem;padding:.65rem .85rem;background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:8px;font-size:.875rem;line-height:1.5}.step-num{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;background:var(--accent-gold);color:#0f1729;font-size:.75rem;font-weight:700;border-radius:50%;flex-shrink:0;margin-top:2px}.step-desc{color:var(--text-secondary)}.modal-chars-grid{display:grid;grid-template-columns:1fr;gap:.75rem;margin:.75rem 0 1.25rem}.modal-char-card{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:8px;padding:.85rem}.char-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem;flex-wrap:wrap}.char-name{font-family:var(--font-heading);font-size:.95rem;color:var(--text-primary)}.char-role{font-size:.75rem;background:hsl(var(--accent-blue-raw) / .12);color:var(--accent-blue);padding:.15rem .45rem;border-radius:4px;font-weight:600}.char-desc{font-size:.85rem;color:var(--text-secondary);line-height:1.5;margin-bottom:.5rem}.char-relations{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.35rem}.relation-tag{font-size:.75rem;padding:.2rem .5rem;border-radius:4px;font-weight:600;line-height:1.3}.rel-love{background:#e2367026;color:#f43f5e;border:1px solid hsl(340 75% 55% / .3)}.rel-ally{background:#1fad6626;color:#10b981;border:1px solid hsl(150 70% 40% / .3)}.rel-conflict{background:#e2363626;color:#ef4444;border:1px solid hsl(0 75% 55% / .3)}.rel-mentor{background:#428bf026;color:#3b82f6;border:1px solid hsl(215 85% 60% / .3)}.rel-family{background:#ee9d2b26;color:#f59e0b;border:1px solid hsl(35 85% 55% / .3)}.rel-foil{background:#af57db26;color:#a855f7;border:1px solid hsl(280 65% 60% / .3)}.cardinal-modal-box{background:hsl(var(--state-danger-raw) / .08);border:1px solid hsl(var(--state-danger-raw) / .25);border-radius:8px;padding:.85rem;margin:1rem 0}.cardinal-modal-title{color:var(--state-danger);font-weight:700;font-size:.85rem;display:flex;align-items:center;gap:.35rem;margin-bottom:.35rem}.cardinal-modal-list{margin:0;padding-left:1.25rem;font-size:.825rem;color:var(--text-secondary);line-height:1.45}@media(max-width:960px){.stage-grid{grid-template-columns:1fr}.search-row{flex-direction:column}.epoch-select{width:100%}}