:root{color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0;background:#0f1115;color:#e8e8ea}.app{max-width:1100px;margin:0 auto;padding:2rem 1.25rem}.tagline{color:#a0a0a8}.app-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.app-header-actions{display:flex;gap:.75rem}button{font:inherit;background:#2a2e38;color:#e8e8ea;border:1px solid #3a3f4c;border-radius:6px;padding:.5rem 1rem;cursor:pointer}button:hover{background:#3a3f4c}button:disabled{opacity:.6;cursor:not-allowed}.login{max-width:480px}.login-form{display:flex;flex-direction:column;gap:.5rem;margin-top:1.5rem}.login-form label{color:#a0a0a8;font-size:.9rem}.login-form input{font:inherit;background:#1a1d24;color:#e8e8ea;border:1px solid #2a2e38;border-radius:6px;padding:.6rem .75rem}.login-form button{margin-top:.5rem}.error{color:#ff6b6b;margin:0}.gallery{margin-top:1.5rem}.gallery-toolbar{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}.gallery-search{font:inherit;flex:1 1 240px;background:#1a1d24;color:#e8e8ea;border:1px solid #2a2e38;border-radius:6px;padding:.6rem .75rem}.gallery-toolbar select{font:inherit;background:#1a1d24;color:#e8e8ea;border:1px solid #2a2e38;border-radius:6px;padding:.6rem .75rem}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.25rem}.movie-card{display:flex;flex-direction:column;background:#1a1d24;border:1px solid #2a2e38;border-radius:8px;overflow:hidden}.movie-card-open{display:block;flex:1;width:100%;padding:0;margin:0;background:none;border:none;border-radius:0;text-align:left;color:inherit;cursor:pointer}.movie-card-open:hover{background:#20242e}.movie-poster{aspect-ratio:2 / 3;background:#12141a}.movie-poster img{width:100%;height:100%;object-fit:cover;display:block}.movie-poster-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#5a5f6c;font-size:.85rem;text-align:center;padding:.5rem}.movie-info{padding:.75rem .75rem 0}.movie-info h3{margin:0 0 .25rem;font-size:1rem}.movie-meta{margin:0;color:#a0a0a8;font-size:.85rem}.movie-delete{margin:.75rem;border-color:#4a2a2e}.movie-delete:hover{background:#4a2a2e}.add-movie{margin-top:1.5rem;padding:1.25rem;background:#1a1d24;border:1px solid #2a2e38;border-radius:8px}.add-movie-modes{display:flex;gap:.5rem;margin-bottom:1rem}.add-movie-modes button.active{background:#3a3f4c;border-color:#5a5f6c}.scanner-video{width:100%;max-height:360px;background:#000;border-radius:8px;display:block}.add-movie-barcode{display:flex;align-items:center;gap:.5rem;margin:.75rem 0 0;color:#a0a0a8;font-size:.9rem}.add-movie-barcode button{padding:.2rem .6rem;font-size:.8rem}.add-movie-form{display:flex;gap:.75rem}.add-movie-form input{font:inherit;flex:1;background:#12141a;color:#e8e8ea;border:1px solid #2a2e38;border-radius:6px;padding:.6rem .75rem}.add-movie-results{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-direction:column;gap:.75rem}.add-movie-result{display:flex;align-items:center;gap:.75rem}.movie-poster.small{width:46px;aspect-ratio:2 / 3;flex-shrink:0;border-radius:4px;overflow:hidden}.movie-poster.small .movie-poster-placeholder{font-size:.6rem}.add-movie-result-info{flex:1;min-width:0}.add-movie-result-title{margin:0}.add-movie-result button{flex-shrink:0}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:10}.modal{position:relative;background:#1a1d24;border:1px solid #2a2e38;border-radius:10px;max-width:640px;width:100%;max-height:90vh;overflow-y:auto;padding:1.5rem}.modal-close{position:absolute;top:.75rem;right:.75rem;padding:.25rem .6rem}.modal-body{display:flex;gap:1.25rem}.modal-poster{width:180px;flex-shrink:0;border-radius:6px;overflow:hidden}.modal-info{min-width:0}.modal-info h2{margin:0 0 .25rem;padding-right:2rem}.modal-plot{margin:1rem 0;line-height:1.5}.modal-facts{margin:0}.modal-fact{display:flex;gap:.5rem;margin-bottom:.35rem;font-size:.9rem}.modal-fact dt{color:#a0a0a8;flex-shrink:0;width:6.5rem}.modal-fact dd{margin:0}@media(max-width:540px){.modal-body{flex-direction:column}.modal-poster{width:140px}}