*,*::before,*::after{box-sizing:border-box}body{font-family:"Inter",system-ui,-apple-system,sans-serif;font-size:.9375rem;margin:0;background-color:#f0f2f5;height:100vh;overflow:hidden;color:#222}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:focus-visible{outline:3px solid #005fcc;outline-offset:2px}.is-hidden{display:none !important}label{font-weight:600;margin-bottom:.5ex;font-size:.875rem;color:#333}.help-text{font-size:.75rem;color:#555;margin-top:.33ex}.app-container{height:100vh;position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;grid-template-areas:"topbar" "main"}.topbar{grid-area:topbar}.main-content{grid-area:main}.main-content{display:flex;flex-direction:column;overflow:hidden;min-width:0}@media(max-width: 600px){.app-container{display:flex;flex-direction:column}}.sidebar{width:320px;background:#fff;padding:2ex 3ch;overflow-y:auto;flex-shrink:0;z-index:1000;display:flex;flex-direction:column;position:absolute;height:100vh;transform:translateX(-100%);transition:transform .3s ease-in-out;visibility:hidden;box-shadow:none}.sidebar.is-open{transform:translateX(0);visibility:visible;box-shadow:4px 0 25px rgba(0,0,0,.4)}.sidebar-top-actions{display:flex;justify-content:flex-end;margin-bottom:1ex}.topbar{padding:1.5ex 3ch;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.05);display:flex;justify-content:space-between;align-items:center;gap:2ch;flex-wrap:wrap;z-index:10;flex-shrink:0}.topbar-brand{display:flex;align-items:center;gap:2ch;order:1}.topbar-logo{font-size:1.25rem;margin:0;color:#222;font-weight:700;flex-shrink:0}.search-container{flex-grow:1;max-width:50ch;order:2}.search-bar{width:100%;padding:1ex 2ch;border-radius:20px;background:#f0f2f5;border:1px solid #dee2e6;outline:none;font-size:.9375rem}.topbar-actions{display:flex;gap:1ch;order:3}@media(max-width: 600px){.topbar{padding:1ex 2ch}.search-container{order:3;width:100%;max-width:100%;margin-top:.5ex}.topbar-brand{order:1}.topbar-actions{order:2}}.app-footer{background:#fff;padding:0 3ch;border-top:1px solid #e9ecef;text-align:center;font-size:.875rem;color:#495057;z-index:10;flex-shrink:0}button{padding:1ex 1.5ch;cursor:pointer;border:none;border-radius:6px;background-color:#fff;font-weight:700;font-size:.9375rem;transition:background-color .2s ease;display:flex;align-items:center;justify-content:center;gap:1ch}button:focus-visible{outline:3px solid #005fcc;outline-offset:2px}.form-actions{display:flex;gap:1ch;margin-top:4ex}.form-actions button{flex:1}#btn-save{border:2px solid #1864ab}#btn-save:hover{border-style:dotted;border-color:#1864ab;background-color:rgba(24,100,171,.1)}#btn-save:hover{border-style:dotted;border-color:#145592;background-color:rgba(20,85,146,.1)}#btn-cancel{border:2px solid #c92a2a}#btn-cancel:hover{border-style:dotted;border-color:#c92a2a;background-color:rgba(201,42,42,.1)}#btn-cancel:hover{border-style:dotted;border-color:#a61e1e;background-color:rgba(166,30,30,.1)}.btn-burger{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:.5ex 1.5ch;color:#495057;border-radius:6px;transition:background-color .2s ease;display:flex}.btn-burger:hover{background:#e9ecef;color:#005fcc}.btn-close-sidebar{background:none;border:none;font-size:1.25rem;cursor:pointer;padding:1ex;color:#c92a2a;border-radius:50%;transition:background-color .2s ease;display:flex}.btn-close-sidebar:hover{background-color:#f8f9fa}.btn-edit{border:2px solid #f59f00}.btn-edit:hover{border-style:dotted;border-color:#f59f00;background-color:rgba(245,159,0,.1)}.btn-duplicate{border:2px solid #bfbfbf}.btn-duplicate:hover{border-style:dotted;border-color:#bfbfbf;background-color:rgba(191,191,191,.1)}.btn-delete{border:2px solid #c92a2a}.btn-delete:hover{border-style:dotted;border-color:#c92a2a;background-color:rgba(201,42,42,.1)}.btn-loan{border:2px solid #2b8a3e}.btn-loan:hover{border-style:dotted;border-color:#2b8a3e;background-color:rgba(43,138,62,.1)}.btn-loan.is-return{border:2px solid #1864ab}.btn-loan.is-return:hover{border-style:dotted;border-color:#1864ab;background-color:rgba(24,100,171,.1)}#btn-options{background:#e9ecef;color:#222;border:1px solid #dee2e6}#btn-options:hover{background:#dee2e6}#btn-search-isbn{border:2px solid #495057}#btn-search-isbn:hover{border-style:dotted;border-color:#495057;background-color:rgba(73,80,87,.1)}.form-group{margin-bottom:2ex;display:flex;flex-direction:column}input{padding:1ex 1.5ch;border:1px solid #bfbfbf;border-radius:6px;font-size:.9375rem}input:focus{border-color:#005fcc;outline:none}.comic-card{background:#fff;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,.05);display:flex;flex-direction:column;border:1px solid #dee2e6;transition:transform .2s ease}.comic-card:focus-within{outline:3px solid #005fcc}.comic-card.is-loaned{opacity:.5;border-color:#a61e1e;box-shadow:0 0 0 2px #a61e1e,0 4px 6px rgba(0,0,0,.05)}#comic-list[data-filter=loaned] .comic-card.is-loaned{opacity:1 !important}.comic-cover{width:100%;background:#e9ecef;flex-shrink:0;border-top-left-radius:10px;border-top-right-radius:10px}.comic-info{padding:1.5ex 2ch;flex-grow:1}.comic-series{margin:0 0 .5ex 0;font-size:1rem;font-weight:700;color:#222}.comic-title{margin:0 0 1.5ex 0;font-size:1rem;font-weight:700;color:#222}.comic-series+.comic-title{font-weight:300}.comic-authors{margin:0;font-size:.875rem;color:#495057}.comic-isbn{font-size:.625rem;color:#495057}.comic-publisher{margin-bottom:.33ex}.comic-publisher+.comic-isbn{margin-top:0}.comic-loan{margin:1ex 0 0;padding:1ex 1.5ch;font-size:.75rem;font-weight:500;color:#a61e1e;border-top:1px solid #e9ecef;background:rgba(245,159,0,.1)}.card-actions{display:flex;flex-wrap:wrap;padding:1ex 1.5ch;gap:.5ch;background:#f8f9fa;border-top:1px solid #e9ecef;border-bottom-left-radius:10px;border-bottom-right-radius:10px;flex-shrink:0;margin-top:auto}.card-actions button{flex:1;padding:1ch;font-size:.6875rem;min-height:44px;font-weight:300;display:flex;align-items:center;justify-content:center}.card-actions .btn-loan{flex:1 0 100%}.comic-tags{list-style:none;margin:1ex 0 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5ch}.comic-tags li{display:inline-block;padding:.33ex 1ch;font-size:.625rem;color:#222;background:rgba(245,159,0,.75);border-radius:4px;font-weight:500}.scanner-zone{margin-bottom:3ex;background:#f8f9fa;padding:1.5ex 2ch;border-radius:8px;border:1px solid #e9ecef}#btn-start-scan{width:100%;margin-bottom:1ex;background:#2b8a3e;color:#fff;border:none}#camera-reader{width:100%;border-radius:6px;overflow:hidden}.manual-isbn{display:flex;gap:.5ch;margin-top:1ex}.manual-isbn input{flex-grow:1}.btn-scan-image{display:inline-flex;align-items:center;gap:.5ch;margin-top:1ex;padding:.5ex 1.5ch;border:2px solid #dee2e6;border-radius:6px;font-size:.75rem;font-weight:500;color:#495057;background:#fff;cursor:pointer;transition:background-color .2s ease}.btn-scan-image:hover{background:#f8f9fa;border-color:#bfbfbf}.dropdown-container{position:relative}.dropdown-menu{position:absolute;top:100%;right:0;margin-top:1ex;background:#fff;border:1px solid #e9ecef;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,.1);width:20ch;display:flex;flex-direction:column;padding:.5ex 1ch;z-index:1000;visibility:visible;opacity:1;transition:opacity .2s ease,visibility .2s ease}.dropdown-menu.is-hidden{visibility:hidden;opacity:0;pointer-events:none}.dropdown-menu button{width:100%;justify-content:flex-start;background:rgba(0,0,0,0);color:#333;border:none;padding:1ex 2ch;border-radius:4px;font-size:.875rem;font-weight:500}.dropdown-menu button:hover,.dropdown-menu button:focus-visible{background:#f8f9fa;color:#005fcc;outline:none}.search-loader{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}.search-loader.is-hidden{display:none}.loader-box{background:#fff;border-radius:10px;padding:4ex 4ch;text-align:center;max-width:30ch;box-shadow:0 4px 15px rgba(0,0,0,.1);display:flex;flex-direction:column;align-items:center;gap:1.5ex}.loader-spinner{width:3rem;height:3rem;border:4px solid #e9ecef;border-top-color:#005fcc;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loader-title{font-size:.9375rem;font-weight:600;margin:0;color:#222}.loader-status{font-size:.875rem;color:#555;margin:0;min-height:2ex}.notification{position:fixed;bottom:3ex;left:50%;transform:translateX(-50%);z-index:10000;background:#fff;border:1px solid #e9ecef;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,.1);display:flex;align-items:center;gap:1.5ch;padding:1.5ex 3ch;min-width:30ch;max-width:50ch;animation:slideUp .3s ease}.notification.is-hidden{display:none}.notification.is-success{border-left:4px solid #2b8a3e}.notification.is-warning{border-left:4px solid #f59f00}.notification.is-error{border-left:4px solid #c92a2a}.notification-icon{font-size:1.25rem;flex-shrink:0}.notification-message{flex-grow:1;font-size:.875rem;color:#222}.notification-close{background:none;border:none;cursor:pointer;color:#555;font-size:1rem;padding:.33ex .5ch;flex-shrink:0;border-radius:4px}.notification-close:hover{color:#222}@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(1rem)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.dialog-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2400;display:block}.dialog-backdrop.is-hidden{display:none}.loan-dialog{border:none;padding:0;border-radius:10px;background:#fff;box-shadow:0 4px 15px rgba(0,0,0,.1);max-width:400px;width:90vw;color:#222;z-index:2500;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%)}.loan-dialog::backdrop{background:rgba(0,0,0,.5);z-index:2500}.loan-dialog form{padding:2ex 3ch}.loan-dialog h2{margin:0 0 1.5ex 0;font-size:1.25rem;font-weight:700;color:#222}#btn-loan-confirm{border:2px solid #1864ab}#btn-loan-confirm:hover{border-style:dotted;border-color:#1864ab;background-color:rgba(24,100,171,.1)}#btn-loan-confirm:hover{border-style:dotted;border-color:#145592;background-color:rgba(20,85,146,.1)}#btn-loan-cancel{border:2px solid #c92a2a}#btn-loan-cancel:hover{border-style:dotted;border-color:#c92a2a;background-color:rgba(201,42,42,.1)}#btn-loan-cancel:hover{border-style:dotted;border-color:#a61e1e;background-color:rgba(166,30,30,.1)}.import-mode-dialog{border:none;padding:0;border-radius:10px;background:#fff;box-shadow:0 4px 15px rgba(0,0,0,.1);max-width:500px;width:90vw;color:#222;z-index:2500;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%)}.import-mode-dialog::backdrop{background:rgba(0,0,0,.5);z-index:2500}.import-mode-dialog form{padding:2ex 3ch}.import-mode-dialog h2{margin:0 0 1.5ex 0;font-size:1.25rem;font-weight:700;color:#222}.import-intro{margin:0 0 1.5ex 0;font-size:.9375rem;color:#495057}.import-modes{display:flex;flex-direction:column;gap:1.5ch;margin-bottom:2ex}.import-mode-btn{display:flex;flex-direction:column;align-items:flex-start;gap:.5ex;padding:1ex 2ch;border:2px solid #bfbfbf;border-radius:8px;background:#f8f9fa;cursor:pointer;transition:all 150ms ease-out;text-align:left}.import-mode-btn:hover{border-color:#1864ab;background:rgb(225.6,234.1,242.1)}.import-mode-btn:focus-visible:focus-visible{outline:3px solid #005fcc;outline-offset:2px}.import-mode-btn .mode-icon{font-size:1rem;display:block}.import-mode-btn strong{font-size:.9375rem;font-weight:700;color:#222}.import-mode-btn .mode-desc{font-size:.75rem;color:#495057;line-height:1.4}#btn-import-cancel{border:2px solid #c92a2a}#btn-import-cancel:hover{border-style:dotted;border-color:#c92a2a;background-color:rgba(201,42,42,.1)}#btn-import-cancel:hover{border-style:dotted;border-color:#a61e1e;background-color:rgba(166,30,30,.1)}.add-comic-dialog{border:none;padding:0;border-radius:10px;background:#fff;box-shadow:0 4px 15px rgba(0,0,0,.1);width:min(500px,95vw);max-height:90vh;overflow:hidden;color:#222;z-index:2500;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%)}.add-comic-dialog::backdrop{background:rgba(0,0,0,.5);z-index:2500}.add-comic-dialog>section{padding:2ex 3ch;overflow-y:auto;max-height:90vh}.add-comic-dialog h2{margin:0 0 1.5ex;font-size:1.25rem;font-weight:700}.toolbar{display:flex;align-items:center;justify-content:flex-end;gap:1.5ch;padding:1ex 2ch;background:#fff;border-bottom:1px solid #e9ecef;flex-wrap:wrap}.toolbar-controls{display:flex;align-items:center;gap:1.5ch;flex-wrap:wrap}.toolbar-sort{padding:.5ex 1.5ch;border:1px solid #dee2e6;border-radius:6px;background:#fff;font-size:.75rem;color:#222;cursor:pointer;min-height:44px}.toolbar-sort:focus-visible{outline:3px solid #005fcc;outline-offset:2px}.toolbar-layout{display:flex;border:1px solid #dee2e6;border-radius:6px;overflow:hidden}.toolbar-layout button{padding:.5ex 1.5ch;background:#fff;border:none;border-radius:0;font-size:.9375rem;color:#495057;cursor:pointer;min-height:44px;transition:background-color .2s ease}.toolbar-layout button:hover{background:#e9ecef}.toolbar-layout button.is-active{background:#1864ab;color:#fff}.toolbar-layout button+button{border-left:1px solid #dee2e6}.toolbar-count{font-size:.75rem;font-weight:500;color:#495057;min-width:10ch;text-align:right}.nav-section-title{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#555;margin:0 0 1ex;padding:0 1.5ch}.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.33ex}.nav-link{width:100%;display:flex;align-items:center;gap:1ch;padding:1ex 1.5ch;background:rgba(0,0,0,0);border:none;border-radius:6px;font-size:.9375rem;font-weight:500;color:#222;text-align:left;cursor:pointer;min-height:44px;transition:background-color .2s ease}.nav-link:focus-visible{outline:3px solid #005fcc;outline-offset:2px}.nav-link:hover:not(:disabled){background:#f8f9fa}.nav-link.is-active{background:#1864ab;color:#fff}.nav-link:disabled{opacity:.5;cursor:not-allowed}.nav-tag{margin-left:auto;font-size:.625rem;font-weight:400;color:#555;font-style:italic}.chip-badge{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:1.5em;height:1.5em;padding:.2ex .8ch;border-radius:20px;font-size:.625rem;font-weight:700;line-height:1;background:#495057;color:#fff}.chip-badge.has-count{background:#f59f00;color:#222}.nav-link.is-active .chip-badge{background:#fff;color:#1864ab}.nav-separator{margin:1.5ex 0;border:none;border-top:1px solid #e9ecef}.sidebar-actions{margin-top:auto;padding-top:1ex;display:flex;flex-direction:column;gap:1ch}.btn-add-comic{width:100%;padding:1ex 1.5ch;background:#1864ab;color:#fff;border:none;border-radius:6px;font-size:.9375rem;font-weight:600;cursor:pointer;min-height:44px;transition:background-color .2s ease}.btn-add-comic:hover{background:#145592}.sidebar-version{margin:1ex 0 0;text-align:center;font-size:.625rem;color:#555;user-select:none}.btn-add-wish{width:100%;padding:1ex 1.5ch;background:rgba(0,0,0,0);color:#1864ab;border:2px solid currentColor;border-radius:6px;font-size:.9375rem;font-weight:600;cursor:pointer;min-height:44px;transition:background-color .2s ease}.btn-add-wish:hover{background:#1864ab;color:#fff}.comic-table{width:100%;border-collapse:collapse;font-size:.75rem;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 5px rgba(0,0,0,.05)}.comic-table th,.comic-table td{padding:1ex 1.5ch;text-align:left;vertical-align:middle;border-bottom:1px solid #e9ecef;white-space:nowrap}.comic-table thead{background:#f8f9fa;position:sticky;top:0;z-index:1}.comic-table th{font-weight:700;color:#495057;font-size:.6875rem;text-transform:uppercase;letter-spacing:.04em}.comic-table tbody tr{transition:background-color .2s ease}.comic-table tbody tr:hover{background:#f8f9fa}.comic-table tbody tr:last-child td{border-bottom:none}.comic-table tr.is-loaned td:first-child{border-left:3px solid #f59f00}.comic-table .col-series{font-weight:600;color:#222}.comic-table .col-tags,.comic-table .col-isbn{color:#555;font-size:.6875rem}.comic-table .col-tags ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5ch}.comic-table .col-tags ul li{display:inline-block;padding:.33ex 1ch;font-size:.625rem;color:#222;background:rgba(245,159,0,.15);border-radius:4px;font-weight:500}.comic-table .col-addedat{color:#555;font-size:.6875rem;white-space:nowrap}.comic-table .col-loan{color:#f59f00;font-weight:500;font-size:.6875rem}.comic-table .col-actions-header{text-align:right}.comic-table .col-actions{text-align:right;white-space:nowrap}.comic-table .col-actions button{display:inline-flex;padding:.33ex 1ch;margin-left:.5ch;font-size:.625rem;min-height:auto}#comic-list[data-filter=loaned] .comic-table .col-loan{background:rgba(245,159,0,.08);font-weight:600}#wish-list{overflow-x:auto}.wish-empty{padding:4ex 3ch;text-align:center;color:#555;font-size:.875rem}.wish-table{width:100%;border-collapse:collapse;font-size:.75rem;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 5px rgba(0,0,0,.05)}.wish-table th,.wish-table td{padding:1ex 1.5ch;text-align:left;vertical-align:middle;border-bottom:1px solid #e9ecef;white-space:nowrap}.wish-table thead{background:#f8f9fa;position:sticky;top:0;z-index:1}.wish-table th{font-weight:700;color:#495057;font-size:.6875rem;text-transform:uppercase;letter-spacing:.04em}.wish-table tbody tr{transition:background-color .2s ease}.wish-table tbody tr:hover{background:#f8f9fa}.wish-table tbody tr:last-child td{border-bottom:none}.wish-table .col-wish-title{font-weight:600;color:#222}.wish-table .col-wish-series{color:#495057}.wish-table .col-wish-isbn,.wish-table .col-wish-addedat{color:#555;font-size:.6875rem;white-space:nowrap}.wish-table .col-wish-note{color:#495057;font-size:.6875rem;white-space:normal;max-width:24ch}.wish-table .col-wish-actions-header{text-align:right}.wish-table .col-wish-actions{text-align:right;white-space:nowrap}.wish-table .col-wish-actions button{display:inline-flex;padding:.33ex 1ch;margin-left:.5ch;font-size:.625rem;min-height:auto}.btn-wish-edit{border:2px solid #f59f00}.btn-wish-edit:hover{border-style:dotted;border-color:#f59f00;background-color:rgba(245,159,0,.1)}.btn-wish-delete{border:2px solid #c92a2a}.btn-wish-delete:hover{border-style:dotted;border-color:#c92a2a;background-color:rgba(201,42,42,.1)}.btn-wish-collect{border:2px solid #1864ab}.btn-wish-collect:hover{border-style:dotted;border-color:#1864ab;background-color:rgba(24,100,171,.1)}.btn-wish-collect:hover{border-style:dotted;border-color:#145592;background-color:rgba(20,85,146,.1)}.add-wish-dialog{border:none;padding:0;border-radius:10px;background:#fff;box-shadow:0 4px 15px rgba(0,0,0,.1);width:min(500px,95vw);max-height:90vh;overflow:hidden;color:#222;z-index:2500;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%)}.add-wish-dialog::backdrop{background:rgba(0,0,0,.5);z-index:2500}.add-wish-dialog>section{padding:2ex 3ch;overflow-y:auto;max-height:90vh}.add-wish-dialog h2{margin:0 0 1.5ex;font-size:1.25rem;font-weight:700}#btn-wish-save{border:2px solid #1864ab}#btn-wish-save:hover{border-style:dotted;border-color:#1864ab;background-color:rgba(24,100,171,.1)}#btn-wish-save:hover{border-style:dotted;border-color:#145592;background-color:rgba(20,85,146,.1)}#btn-wish-cancel{border:2px solid #c92a2a}#btn-wish-cancel:hover{border-style:dotted;border-color:#c92a2a;background-color:rgba(201,42,42,.1)}#btn-wish-cancel:hover{border-style:dotted;border-color:#a61e1e;background-color:rgba(166,30,30,.1)}#btn-wish-search-isbn{border:2px solid #495057}#btn-wish-search-isbn:hover{border-style:dotted;border-color:#495057;background-color:rgba(73,80,87,.1)}.comic-list{padding:4ex 3ch;overflow-y:auto;display:grid;gap:3ch;grid-template-columns:repeat(auto-fill, 245px);justify-content:center;align-content:start}@media(min-width: 415px)and (max-width: 570px){.comic-list{padding:2ex .5ch;gap:.5ch;grid-template-columns:repeat(auto-fill, calc(50% - 1ch - 0.5ch))}}.comic-list.is-list-view{display:block;grid-template-columns:none;overflow-x:auto;padding:2ex 2ch}