#library-view{background:var(--surface-1);touch-action:pan-y;flex-direction:column;height:100vh;min-height:0;display:none;overflow:hidden}.library-container{flex-direction:column;flex:1;min-height:0;display:flex}.library-header{padding:var(--space-8);background:var(--surface-3);border-bottom:2px solid var(--border-color-default);justify-content:space-between;align-items:center;gap:var(--space-6);display:flex}.library-title{gap:var(--space-1);flex-direction:column;display:flex}.library-header h2{color:var(--color-primary);font-size:var(--text-3xl);margin:0}.library-stats{color:var(--text-tertiary);font-size:var(--text-lg)}.library-actions{align-items:center;gap:var(--space-3);display:flex}.library-controls{gap:var(--space-2);padding:var(--space-3) var(--space-8);background:var(--surface-2);border-bottom:2px solid var(--surface-3);flex-wrap:wrap;display:flex}.library-control-btn{background:var(--surface-3);border:1px solid var(--border-color-default);color:var(--text-secondary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);cursor:pointer;font-size:var(--text-0_9);transition:background var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default)}.library-control-btn:hover{background:var(--surface-4);border-color:var(--border-color-strong)}.library-control-btn:disabled{opacity:.6;cursor:not-allowed}.library-control-input{background:var(--surface-3);border:1px solid var(--border-color-default);color:var(--text-secondary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-0_9);min-width:180px}.library-control-input::placeholder{color:var(--text-tertiary)}.library-control-input:focus{outline:2px solid var(--color-primary-alpha-65);outline-offset:1px}.library-user{align-items:center;gap:var(--space-3);color:var(--text-secondary);font-size:var(--text-0_9);display:flex;position:relative}.library-user-avatar{border-radius:var(--radius-full);background:var(--surface-5);width:32px;height:32px;color:var(--text-primary);font-weight:var(--font-weight-semibold);font-size:var(--text-sm);cursor:pointer;z-index:2;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex;position:relative;overflow:hidden}.library-user-avatar img{object-fit:cover;width:100%;height:100%}.library-user-panel{transform-origin:100%;background:var(--surface-3);border:1px solid var(--surface-4);border-radius:var(--radius-full);padding:var(--space-1) var(--space-10) var(--space-1) var(--space-3);align-items:center;gap:var(--space-2);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration-base) var(--ease-default), transform var(--duration-base) var(--ease-default);z-index:1;display:flex;position:absolute;top:50%;right:0;transform:translateY(-50%)scaleX(.95)}.library-user.open .library-user-panel,.library-user:hover .library-user-panel,.library-user:focus-within .library-user-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%)scaleX(1)}.library-user-name{color:var(--text-secondary);font-size:var(--text-sm);font:inherit;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:none}.library-user-name:hover,.library-user-name:focus-visible{text-decoration:underline}.library-logout{border:1px solid var(--border-color-strong);color:var(--text-secondary);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-sm);background:0 0}.library-logout:hover{background:var(--surface-4)}.upload-btn{background:var(--color-primary);color:var(--text-on-primary);padding:var(--space-3) var(--space-6);font-size:var(--text-base);border-radius:var(--radius-md);cursor:pointer;font-weight:var(--font-weight-bold);transition:transform var(--duration-base) var(--ease-default), background var(--duration-base) var(--ease-default);min-height:var(--touch-target-min);border:none}.upload-btn:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-hover-lift);transform:translateY(-2px)}.upload-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.upload-input{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.upload-status{min-height:2.5rem;padding:0 var(--space-8);justify-content:center;gap:var(--space-2);background:var(--surface-2);border-bottom:2px solid var(--surface-3);color:var(--text-secondary);font-size:var(--text-base);flex-direction:column;display:flex}.upload-status:empty{display:none}.upload-status--success{color:var(--color-success-bright)}.upload-status--error{color:var(--color-error)}.upload-status-text[role=button]{cursor:pointer;text-underline-offset:2px;text-decoration:underline}.upload-status-text[role=button]:focus{outline:2px solid var(--color-primary-alpha-65);outline-offset:2px;border-radius:var(--radius-sm)}.upload-progress{background:var(--surface-4);border-radius:var(--radius-full);height:6px;overflow:hidden}.upload-progress-bar{background:linear-gradient(90deg, var(--color-primary), var(--color-success-bright));height:100%;transition:width var(--duration-base) var(--ease-default)}.upload-retry{padding:var(--space-1) var(--space-4);border:1px solid var(--surface-4);border-radius:var(--radius-full);background:var(--surface-3);color:inherit;font-size:var(--text-sm);cursor:pointer;align-self:flex-start}.upload-retry:hover{border-color:var(--color-primary);color:var(--color-primary);box-shadow:var(--shadow-glow-primary-6)}.library-grid{align-content:start;align-items:start;gap:var(--space-5);min-height:0;padding:var(--space-8);touch-action:pan-y;contain:layout;will-change:scroll-position;flex:1;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));grid-auto-rows:max-content;display:grid;overflow-y:auto}.library-sections{min-height:0;padding:var(--space-8);flex:1;overflow-y:auto}.library-sections .library-grid{min-height:unset;flex:none;padding:0;overflow:visible}.comic-card{background:var(--surface-3);border-radius:var(--radius-lg);cursor:pointer;transition:transform var(--duration-slow) var(--ease-default), box-shadow var(--duration-slow) var(--ease-default), border-color var(--duration-slow) var(--ease-default);touch-action:manipulation;will-change:transform;content-visibility:auto;contain-intrinsic-size:160px 240px;border:3px solid #0000;overflow:hidden}.comic-card:has(.progress-indicator.complete){border-color:color-mix(in srgb, var(--color-success-bright) 25%, transparent)}.comic-card:hover{box-shadow:var(--shadow-card-hover), var(--shadow-ring-primary-soft);transform:translateY(-6px)scale(1.01)}.comic-card.selected{z-index:10;border-color:var(--color-primary);box-shadow:0 0 0 4px var(--surface-1), 0 0 0 8px var(--color-primary), var(--shadow-2xl);outline:none;position:relative;transform:translateY(-8px)scale(1.08)}.comic-cover{aspect-ratio:2/3;background:var(--surface-1);width:100%;position:relative;overflow:hidden}.comic-cover:before{content:"";padding-top:150%;display:block}.comic-cover-placeholder,.comic-cover img{position:absolute;inset:0}@supports (aspect-ratio:2 / 3){.comic-cover:before{padding-top:0}}.comic-cover img{object-fit:cover;width:100%;height:100%;transition:transform var(--duration-medium) var(--ease-cover-zoom)}.comic-cover-placeholder{background:linear-gradient(145deg, var(--surface-3), var(--surface-2))}.comic-incomplete-badge{background:var(--overlay-black-75);color:var(--color-warning);font-size:var(--text-xs);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);border:1px solid var(--warning-border-alpha-35);position:absolute;bottom:48px;left:8px}.comic-delete{bottom:var(--space-2);right:var(--space-2);border-radius:var(--radius-full);border:1px solid var(--overlay-white-20);background:var(--overlay-black-45);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;font-size:var(--text-14px);opacity:0;z-index:3;transition:opacity var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);place-items:center;display:grid;position:absolute}.comic-card:hover .comic-delete{opacity:1}.comic-delete:hover{background:var(--backdrop-light);transform:translateY(-1px)}.comic-card:hover .comic-cover img{transform:scale(1.1)}.comic-favorite{border-radius:var(--radius-full);border:1px solid var(--overlay-white-18);background:var(--overlay-black-55);width:34px;height:34px;color:var(--overlay-white-75);cursor:pointer;font-size:var(--text-18px);transition:background var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default), color var(--duration-base) var(--ease-default);justify-content:center;align-items:center;line-height:1;display:inline-flex;position:absolute;top:10px;right:10px}.comic-favorite:hover{background:var(--backdrop-light);border-color:var(--overlay-white-30);color:var(--overlay-white-95)}.comic-favorite.is-favorite{background:var(--color-primary-subtle);border-color:var(--color-primary-alpha-55);color:var(--color-primary)}.comic-format-badge{bottom:var(--space-2);left:var(--space-2);background:var(--color-primary-alpha-90);color:var(--text-on-primary);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);font-weight:var(--font-weight-bold);z-index:2;font-size:var(--text-0_8);position:absolute}.comic-info{padding:var(--space-4)}.comic-title{color:var(--text-primary);font-size:var(--text-lg);margin:0 0 var(--space-2) 0;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.comic-meta{gap:var(--space-4);color:var(--text-tertiary);font-size:var(--text-0_9);display:flex}.meta-item{align-items:center;gap:var(--space-1);display:flex}.library-footer{padding:var(--space-4) var(--space-8);background:var(--surface-3);border-top:2px solid var(--border-color-default);text-align:center}.controls-hint{color:var(--text-tertiary);font-size:var(--text-0_9);margin:0}.controls-hint strong{color:var(--color-primary)}.library-loading{height:100%;color:var(--text-tertiary);flex-direction:column;justify-content:center;align-items:center;display:flex}.loading-spinner{border:4px solid var(--border-color-default);border-top-color:var(--color-primary);border-radius:var(--radius-full);width:60px;height:60px;animation:spin var(--duration-slowest) linear infinite;margin-bottom:var(--space-4)}@keyframes spin{to{transform:rotate(360deg)}}.library-error{text-align:center;height:100%;padding:var(--space-8);flex-direction:column;justify-content:center;align-items:center;display:flex}.library-error h2{color:var(--color-error);margin-bottom:var(--space-4)}.library-error p{color:var(--text-tertiary);margin-bottom:var(--space-8);max-width:500px}.retry-btn{background:var(--color-primary);color:var(--text-on-primary);padding:var(--space-3) var(--space-8);font-size:var(--text-md);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--duration-slow);font-weight:var(--font-weight-bold);min-height:var(--touch-target-min);border:none}.retry-btn:hover{background:var(--color-primary-hover)}.empty-actions{align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);flex-direction:column;display:flex}.library-empty{text-align:center;height:100%;padding:var(--space-8);flex-direction:column;justify-content:center;align-items:center;display:flex}.library-empty-header{margin-bottom:var(--space-8);justify-content:flex-end;align-self:stretch;display:flex}.empty-icon{font-size:var(--text-5xl);margin-bottom:var(--space-4)}.library-empty h2{color:var(--color-primary);margin-bottom:var(--space-4)}.library-empty p{color:var(--text-tertiary);margin-bottom:var(--space-8);font-size:var(--text-lg)}.library-empty code{background:var(--surface-3);padding:var(--space-1) var(--space-2);border-radius:var(--radius-xs);color:var(--color-primary);font-family:var(--font-mono)}.supported-formats{background:var(--surface-3);padding:var(--space-6);border-radius:var(--radius-lg);margin-bottom:var(--space-8);max-width:400px}.supported-formats h3{color:var(--color-primary);margin-bottom:var(--space-4);font-size:var(--text-lg)}.supported-formats ul{text-align:left;padding:0;list-style:none}.supported-formats li{color:var(--text-tertiary);margin-bottom:.5rem;padding-left:1.5rem;position:relative}.supported-formats li:before{content:"•";color:var(--color-primary);font-size:var(--text-2xl);line-height:1;position:absolute;left:0}.supported-formats strong{color:var(--text-primary)}@media (width<=1200px){.library-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}@media (width<=900px){.library-grid{gap:var(--space-6);padding:var(--space-6);grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.library-header{padding:var(--space-6)}.library-header h2{font-size:var(--text-2xl)}}@media (width<=600px){.library-grid{gap:var(--space-4);padding:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.library-header{padding:var(--space-4);gap:var(--space-2);text-align:center;flex-direction:column}.library-actions{justify-content:center;width:100%}.comic-title{font-size:var(--text-md)}.comic-meta{font-size:var(--text-0_8)}.library-footer{padding:var(--space-3) var(--space-4)}}.progress-indicator{background:var(--backdrop-light);height:6px;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.progress-bar{background:linear-gradient(90deg, var(--color-accent) 0%, var(--color-primary-alpha-90) 45%, var(--color-accent) 100%);height:100%;animation:var(--animation-shimmer);transition:width var(--duration-slow) var(--ease-default);box-shadow:var(--shadow-glow-accent);background-size:200% 100%}.progress-indicator.complete .progress-bar{background:linear-gradient(90deg, var(--color-success) 0%, var(--color-success-bright) 100%);box-shadow:var(--shadow-glow-success);animation:none}@keyframes progress-shimmer{0%{background-position:200%}to{background-position:-200%}}@media (prefers-reduced-motion:reduce){.progress-bar{background-size:100% 100%;animation:none}}.completion-badge{background:var(--color-success-bright-alpha-95);width:32px;height:32px;color:var(--text-on-primary);border-radius:var(--radius-full);font-size:var(--text-xl);font-weight:var(--font-weight-bold);box-shadow:var(--shadow-completion), 0 0 var(--space-4) color-mix(in srgb, var(--color-success-glow) 50%, transparent);animation:completion-pop var(--duration-slower) var(--ease-bounce);justify-content:center;align-items:center;display:flex;position:absolute;top:52px;left:10px}@keyframes completion-pop{0%{opacity:0;transform:scale(0)rotate(-15deg)}40%{opacity:1;transform:scale(1.3)rotate(5deg)}65%{transform:scale(.9)rotate(-2deg)}80%{transform:scale(1.1)rotate(1deg)}to{opacity:1;transform:scale(1)rotate(0)}}@media (prefers-reduced-motion:reduce){.comic-card:hover{transform:none}.comic-cover img{transition:none}.comic-card:hover .comic-cover img,.upload-btn:hover{transform:none}.completion-badge{animation-duration:.01ms;animation-iteration-count:1}}.progress-text{font-weight:var(--font-weight-bold);color:var(--color-primary)!important}.library-grid::-webkit-scrollbar{width:12px}.library-grid::-webkit-scrollbar-track{background:var(--surface-1)}.library-grid::-webkit-scrollbar-thumb{background:var(--border-color-default);border-radius:var(--radius-md)}.library-grid::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}.cfv-modal-overlay{background:var(--backdrop-light);padding:var(--space-6);z-index:9999;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.cfv-modal{background:var(--surface-3);border:1px solid var(--surface-4);border-radius:var(--radius-2xl);width:min(560px,100%);box-shadow:var(--shadow-modal);overflow:hidden}.cfv-modal__header{padding:var(--space-4) var(--space-5) var(--space-3);border-bottom:1px solid var(--surface-4);background:linear-gradient(180deg, var(--color-primary-alpha-08), transparent)}.cfv-modal__title{color:var(--text-secondary);font-size:var(--text-1_05);font-weight:var(--font-weight-bold)}.cfv-modal__subtitle{color:var(--text-tertiary);font-size:var(--text-0_9);margin-top:.25rem}.cfv-modal__form{padding:var(--space-4) var(--space-5) var(--space-5);gap:var(--space-3);flex-direction:column;display:flex}.cfv-modal__field{gap:var(--space-1);color:var(--text-secondary);font-size:var(--text-0_9);flex-direction:column;display:flex}.cfv-modal__field input{background:var(--surface-2);border:1px solid var(--surface-4);width:100%;color:var(--text-primary);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-3);font-size:var(--text-base)}.cfv-modal__field input:focus{border-color:var(--color-primary);box-shadow:var(--shadow-focus-strong);outline:none}.cfv-modal__actions{justify-content:flex-end;gap:var(--space-2);margin-top:.35rem;display:flex}.cfv-modal__btn{border:1px solid var(--surface-4);background:var(--surface-3);color:var(--text-secondary);border-radius:var(--radius-full);padding:var(--space-2) var(--space-4);cursor:pointer;font-size:var(--text-0_9)}.cfv-modal__btn--primary{background:var(--color-primary);color:var(--text-on-primary);font-weight:var(--font-weight-bold);border-color:#0000}.cfv-modal__btn--primary:hover{background:var(--color-primary-hover)}.cfv-modal__btn--ghost{background:0 0}.cfv-modal__btn--ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}#library-view:after{content:"";background:repeating-linear-gradient(0deg, transparent, transparent 2px, var(--scanline-color) 2px, var(--scanline-color) 4px);pointer-events:none;z-index:0;backface-visibility:hidden;position:fixed;inset:0;transform:translateZ(0)}.library-grid{gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.comic-card{border-radius:var(--card-radius,var(--radius-lg))}.card-cover{aspect-ratio:2/3;background:var(--surface-3);border-radius:var(--card-radius,var(--radius-lg)) var(--card-radius,var(--radius-lg)) 0 0;contain:paint;position:relative;overflow:hidden}.card-cover .comic-cover-img,.card-cover .comic-cover-placeholder{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.card-cover .comic-cover-placeholder{background:var(--gradient-cover-placeholder,linear-gradient(145deg, var(--surface-3), var(--surface-1)))}.cover-title-overlay{padding:var(--space-6) var(--space-3) var(--space-3);background:linear-gradient(to top, var(--backdrop-medium) 0%, transparent 100%);font-size:var(--text-xs);font-weight:var(--font-weight-bold);color:var(--overlay-white-95);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.badge{top:var(--space-2);right:var(--space-2);font-size:.65rem;font-weight:var(--font-weight-bold);border-radius:var(--radius-full);letter-spacing:.04em;text-transform:uppercase;pointer-events:none;z-index:2;padding:2px 7px;position:absolute}.badge-new{background:var(--color-primary);color:var(--text-on-primary)}.badge-complete{background:var(--color-success);color:var(--text-on-primary);animation:completion-pop var(--duration-slow) var(--ease-bounce) both}.card-progress{background:var(--surface-5);flex-shrink:0;height:3px;position:relative}.card-progress-fill{background:linear-gradient(90deg, var(--color-primary), var(--color-primary-light,var(--color-primary)));height:100%;transition:width var(--duration-slow) var(--ease-standard);position:relative}.card-progress-fill:after{content:"";background:linear-gradient(90deg, transparent, var(--overlay-white-30));width:20px;animation:2s ease-in-out infinite shimmer;position:absolute;top:0;bottom:0;right:0}@keyframes shimmer{0%,to{opacity:0}50%{opacity:1}}.card-progress-fill.complete{background:linear-gradient(90deg, var(--color-success), var(--color-success-bright))}.card-progress-fill.complete:after{display:none}.card-body{padding:var(--space-3);gap:var(--space-1);background:var(--surface-2);flex-direction:column;display:flex}.card-title{font-size:var(--text-sm);font-weight:var(--font-weight-semibold);color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;line-height:1.3;overflow:hidden}.card-meta{font-size:var(--text-xs);color:var(--text-quaternary,var(--text-tertiary));justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.card-pages{color:var(--text-tertiary)}.card-progress-pct{color:var(--color-primary);font-weight:var(--font-weight-semibold)}.card-cover .comic-favorite{top:var(--space-2);left:var(--space-2);background:var(--overlay-black-50);border-radius:var(--radius-full);width:26px;height:26px;font-size:.8rem;right:auto}.grid-section{margin-bottom:var(--space-8)}.section-heading{align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);display:flex}.section-heading h3{font-size:var(--text-base,.95rem);font-weight:var(--font-weight-semibold);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.section-line{background:var(--surface-5);flex:1;height:1px}.section-count{font-size:var(--text-xs);color:var(--text-tertiary);background:var(--surface-3);border-radius:var(--radius-full);padding:2px 8px}.library-drilldown-header{align-items:center;gap:var(--space-4);padding:var(--space-4) 0;margin:0 var(--space-8);grid-column:1/-1;display:flex}.library-drilldown-header h3{font-size:var(--text-lg);color:var(--text-primary);margin:0}.library-back-btn{margin:0}.series-stack .card-cover{z-index:1;position:relative}.series-stack .card-cover:before{content:"";background:var(--surface-3);border:1px solid var(--border-color-default);border-radius:var(--radius-md);z-index:-1;position:absolute;inset:-4px -4px 4px 4px;box-shadow:2px 2px 6px #00000080}.series-stack .card-cover:after{content:"";background:var(--surface-4);border:1px solid var(--border-color-default);border-radius:var(--radius-md);z-index:-2;position:absolute;inset:-8px -8px 8px 8px;box-shadow:2px 2px 6px #00000080}.series-stack-badge{background:var(--color-primary);color:var(--text-on-primary);border-radius:var(--radius-full);z-index:10;border:1px solid var(--border-color-subtle);font-size:.8rem;font-weight:var(--font-weight-bold);padding:2px 8px;position:absolute;top:-12px;right:-12px}.metadata-actions{gap:var(--space-3);margin-top:var(--space-2);justify-content:center;display:flex}.tag-pill{background:var(--surface-3);border:1px solid var(--surface-4);color:var(--text-primary);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-sm);cursor:pointer;transition:all var(--duration-fast) var(--ease-standard)}.tag-pill:hover{background:var(--surface-4)}.tag-pill.active{background:var(--color-primary-alpha-20);border-color:var(--color-primary);color:var(--color-primary)}.card-chip{background:var(--surface-3);border:1px solid var(--surface-4);color:var(--text-secondary);border-radius:var(--radius-sm);font-size:var(--text-xs);cursor:pointer;transition:background var(--duration-fast);padding:2px 6px}.card-chip:hover{background:var(--surface-4);color:var(--text-primary)}#explore-view{background:var(--surface-1);z-index:10;flex-direction:column;height:100dvh;min-height:0;display:none;position:relative;overflow-y:auto}#explore-view .library-header{z-index:20;background:var(--surface-3);border-bottom:2px solid var(--border-color-default);position:sticky;top:0}.tag-section{margin-bottom:var(--space-4)}.tag-pill.meta-tag-pill{padding:var(--space-2) var(--space-4);background:var(--surface-3);border:1px solid var(--border-color-default);border-radius:var(--radius-full);color:var(--text-secondary);font-size:var(--text-sm);cursor:pointer;transition:all var(--duration-base) var(--ease-default)}.tag-pill.meta-tag-pill:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--surface-4);transform:translateY(-1px)}.loading-overlay{background:var(--backdrop-medium);-webkit-backdrop-filter:var(--backdrop-blur);backdrop-filter:var(--backdrop-blur);z-index:var(--z-loading);animation:fadeIn var(--duration-base) var(--ease-in);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.loading-content{text-align:center;max-width:var(--container-sm);padding:var(--space-8)}.loading-spinner{border:4px solid var(--border-color-default);border-top-color:var(--color-primary);border-radius:var(--radius-full);width:60px;height:60px;animation:spin var(--duration-slowest) linear infinite;margin:0 auto var(--space-6)}.loading-message{color:var(--text-primary);font-size:var(--text-xl);margin-bottom:var(--space-6)}.loading-progress{margin-top:var(--space-6)}.loading-progress-bar{width:100%;height:var(--space-2);background:var(--surface-5);border-radius:var(--radius-sm);margin-bottom:var(--space-2);overflow:hidden}.loading-progress-fill{background:linear-gradient(90deg, var(--color-primary), var(--color-primary-hover));border-radius:var(--radius-sm);height:100%;transition:width var(--duration-slow) var(--ease-default)}.loading-progress-text{color:var(--color-primary);font-size:var(--text-0_9);font-weight:var(--font-weight-bold)}.loading-cancel-btn{margin-top:var(--space-6);border:2px solid var(--border-color-dim);color:var(--text-tertiary);padding:var(--space-2) var(--space-6);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-slow);font-size:var(--text-md);background:0 0}.loading-cancel-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.error-overlay{background:var(--backdrop-heavy);-webkit-backdrop-filter:var(--backdrop-blur);backdrop-filter:var(--backdrop-blur);z-index:var(--z-error);animation:fadeIn var(--duration-base) var(--ease-in);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.error-content{background:var(--surface-3);border-radius:var(--radius-2xl);padding:var(--space-8);border:2px solid var(--color-error);text-align:center;width:90%;max-width:500px;animation:slideUp var(--duration-slow) var(--ease-out)}.error-icon{font-size:var(--text-4xl);margin-bottom:var(--space-4)}.error-title{color:var(--color-error);font-size:var(--text-2xl);margin:0 0 var(--space-4) 0}.error-message{color:var(--text-secondary-soft);font-size:var(--text-md);margin:0 0 var(--space-6) 0;line-height:1.5}.error-details{margin:var(--space-6) 0;text-align:left;background:var(--surface-1);border-radius:var(--radius-sm);padding:var(--space-4)}.error-details summary{color:var(--color-primary);cursor:pointer;font-size:var(--text-0_9);margin-bottom:var(--space-2)}.error-details summary:hover{text-decoration:underline}.error-details pre{color:var(--text-tertiary);font-size:var(--text-0_8);margin:var(--space-2) 0 0 0;white-space:pre-wrap;word-wrap:break-word;overflow-x:auto}.error-actions{gap:var(--space-4);margin-top:var(--space-6);justify-content:center;display:flex}.error-action-btn{background:var(--surface-5);border:2px solid var(--border-color-dim);color:var(--text-primary);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-slow);font-size:var(--text-md);font-weight:var(--font-weight-medium)}.error-action-btn:hover{background:var(--border-color-strong);border-color:var(--border-color-light);transform:translateY(-2px)}.error-action-btn.primary{background:var(--color-primary);border-color:var(--color-primary);color:var(--text-on-primary)}.error-action-btn.primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.page-loading{align-items:center;gap:var(--space-4);flex-direction:column;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.page-loading-spinner{border:3px solid var(--border-color-default);border-top-color:var(--color-primary);border-radius:var(--radius-full);width:40px;height:40px;animation:spin var(--duration-spinner) linear infinite}.page-loading-text{color:var(--text-tertiary);font-size:var(--text-0_9)}.inline-loading{align-items:center;gap:var(--space-2);color:var(--text-tertiary);font-size:var(--text-0_9);display:inline-flex}.inline-loading-spinner{border:2px solid var(--border-color-default);border-top-color:var(--color-primary);border-radius:var(--radius-full);width:16px;height:16px;animation:spin var(--duration-spinner-fast) linear infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.error-overlay .error-content{animation:slideUp var(--duration-slow) var(--ease-out)}.error-overlay.toast .error-content{max-width:var(--container-xs);padding:var(--space-4);background:var(--surface-1);border:none}.error-overlay.toast .error-icon{font-size:var(--text-3xl);margin-bottom:var(--space-2)}.error-overlay.toast .error-message{font-size:var(--text-0_9);margin:0}@media (width<=600px){.loading-content,.error-content{width:95%;padding:var(--space-6)}.error-title{font-size:var(--text-xl)}.error-actions{flex-direction:column}.error-action-btn{width:100%}}