.main-container{}.main-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px;}.main-header h1{margin:0;font-size:28px;font-weight:300;}.book-count{font-size:20px;color:#888;}.clear-search{background:none;border:1px solid #ccc;color:#555;padding:6px 12px;border-radius:16px;cursor:pointer;font-size:14px;transition:all 0.2s ease;}.clear-search:hover{background-color:#f0f0f0;border-color:#bbb;transform:translateY(-1px);}.scan-button{background-color:#17a2b8;color:white;border:none;padding:8px 14px;border-radius:16px;cursor:pointer;font-size:14px;transition:all 0.2s ease;}.scan-button:hover:not(:disabled){background-color:#138496;}.scan-button:disabled{background-color:#6c757d;cursor:not-allowed;opacity:0.7;}.guest-message{background-color:#fff3cd;color:#664d03;border:1px solid #ffecb5;padding:15px;border-radius:8px;margin-bottom:20px;text-align:center;}.guest-message a{color:#0d6efd;font-weight:bold;text-decoration:none;}.guest-message a:hover{text-decoration:underline;}
.header{background-color:#fff;box-shadow:0 2px 10px rgba(0,0,0,0.1);position:relative;z-index:100;}.header__content{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;}.header__logo{cursor:pointer;}.header__logo img{width:32px;height:auto;}.menu{display:flex;align-items:center;gap:15px;}.menu__item{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;transition:background-color 0.2s ease-in-out;background:none;border:none;font:inherit;color:inherit;cursor:pointer;outline:none;text-decoration:none;}.menu__item:hover{background-color:#f0f0f0;}.menu__counter{background-color:#4361ee;color:white;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:12px;}.search-container{position:absolute;top:100%;left:0;right:0;background:white;padding:15px 20px;box-shadow:0 4px 10px rgba(0,0,0,0.1);z-index:99;}
.card_list__loader{display:flex;align-items:center;justify-content:center;font-size:16px;}.card_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}.pagination{display:flex;gap:10px;justify-content:center;margin:20px 0;}.pagination button{padding:8px 16px;background:#4CAF50;border:none;border-radius:4px;cursor:pointer;}.pagination button:disabled{background:#cccccc;cursor:not-allowed;}@media screen and (max-width:600px){.card_grid{grid-template-columns:repeat(2,1fr);}}@media screen and (max-width:400px){.card_grid{grid-template-columns:repeat(1,1fr);}}
.card{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;box-shadow:0 4px 8px rgba(0,0,0,0.1);transition:transform 0.2s ease-in-out,box-shadow 0.2s ease-in-out;}.card:hover{transform:translateY(-5px);box-shadow:0 8px 16px rgba(0,0,0,0.2);}.card__image{background:rgb(184,184,184);display:flex;padding-top:10px;justify-content:center;align-items:start;height:180px;}.card__image img{height:100%;width:auto;object-fit:contain;}.card__info{display:flex;flex-direction:column;background:var(--black);color:var(--white);min-height:150px;padding:10px;}.card__tag{font-size:10px;font-weight:300;line-height:15px;margin-bottom:3px;}.card__name{font-size:16px;font-weight:600;line-height:21px;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}.card__footer{margin-top:auto;display:flex;align-items:center;gap:8px;}.button__add{border-radius:6px;width:36px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--white);cursor:pointer;flex-shrink:0;}.button__active{background:var(--white);}.card__status{flex-grow:1;min-width:0;}.status-select{width:100%;padding:6px 4px;background-color:#333;color:white;border:1px solid #555;border-radius:6px;font-size:12px;cursor:pointer;}.button__read{border-radius:6px;height:32px;padding:0 12px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--white);color:var(--white);cursor:pointer;font-size:14px;white-space:nowrap;flex-shrink:0;}
.status-filter-container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #e0e0e0;}.status-buttons{display:flex;gap:10px;flex-wrap:wrap;}.status-filter-container .filter-button{padding:6px 14px;border:1px solid #ccc;background-color:#fff;border-radius:16px;cursor:pointer;font-size:14px;white-space:nowrap;transition:all 0.2s ease-in-out;box-shadow:0 1px 2px rgba(0,0,0,0.05);}.status-filter-container .filter-button:hover{background-color:#f0f0f0;border-color:#bbb;}.status-filter-container .filter-button.active{background-color:#ff9800;color:white;border-color:#e68900;}.toggle-label{cursor:pointer;font-size:14px;color:#333;display:inline-flex;align-items:center;gap:8px;user-select:none;}.status-filter-container .filter-button:disabled{background-color:#e9ecef;color:#adb5bd;cursor:not-allowed;border-color:#dee2e6;}.toggle-label.disabled{color:#adb5bd;cursor:not-allowed;}
.category-filter{display:flex;gap:10px;flex-wrap:wrap;overflow-x:initial;padding-bottom:0;margin-bottom:20px;-ms-overflow-style:none;scrollbar-width:none;}.category-filter::-webkit-scrollbar{display:none;}.filter-button{padding:8px 16px;border:1px solid #ccc;background-color:#fff;border-radius:20px;cursor:pointer;white-space:nowrap;transition:all 0.2s ease-in-out;box-shadow:0 2px 4px rgba(0,0,0,0.1);}.filter-button:hover{background-color:#f0f0f0;border-color:#bbb;transform:translateY(-1px);}.filter-button.active{background-color:#ff9800;color:white;border-color:#e68900;box-shadow:inset 1px 1px 3px rgba(0,0,0,0.2);transform:translateY(1px);}.filter-button.active:hover{background-color:#e68900;}
.search{display:flex;max-width:1200px;margin:0 auto;}.search-container{position:relative;padding:15px 0;background:#fff;box-shadow:0 4px 6px rgba(0,0,0,0.1);z-index:100;}.search__wrapper{display:flex;width:100%;gap:10px;align-items:center;}.search__input{flex:1;padding:12px 15px;border:1px solid #ddd;border-radius:30px;font-size:16px;outline:none;transition:all 0.3s;box-shadow:0 2px 5px rgba(0,0,0,0.1);}.search__input:focus{border-color:#4361ee;box-shadow:0 2px 8px rgba(67,97,238,0.3);}.search__button{background:#4361ee;border:none;border-radius:30px;padding:12px 25px;color:white;font-weight:500;cursor:pointer;transition:background 0.3s;display:flex;align-items:center;gap:8px;}.search__button:hover{background:#3a56e0;}.search__button img{width:18px;height:18px;}.search__close{background:none;border:none;font-size:24px;cursor:pointer;color:#777;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background 0.3s;}.search__close:hover{background:#f5f5f5;color:#333;}
.footer{background-color:#333;color:white;padding:20px 10px;position:relative;bottom:0;width:auto;margin-top:40px;}.footer__content{display:flex;justify-content:space-between;align-items:center;}.footer p{margin:0;font-size:14px;}.footer__content p a{color:white;text-decoration:none;}
.pagination{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:30px;padding:10px 0;user-select:none;}.pagination__button{padding:8px 16px;border:1px solid #ddd;background-color:#fff;color:#333;cursor:pointer;border-radius:4px;transition:background-color 0.2s,border-color 0.2s;font-family:'Montserrat',sans-serif;font-size:14px;}.pagination__button:hover:not(:disabled){background-color:#f0f0f0;border-color:#ccc;}.pagination__button:disabled{cursor:not-allowed;opacity:0.5;background-color:#f9f9f9;}.pagination__info{font-size:16px;color:#555;margin:0 10px;}
.login-container{max-width:400px;margin:50px auto;padding:20px;border:1px solid #ccc;border-radius:8px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,0.1);}.login-container h1{text-align:center;margin-bottom:20px;}.login-form .form-group{margin-bottom:15px;}.login-form label{display:block;margin-bottom:5px;}.login-form input{width:100%;padding:8px;box-sizing:border-box;border:1px solid #ccc;border-radius:4px;}.login-form button{width:100%;padding:10px;background:#007bff;color:white;border:none;border-radius:4px;cursor:pointer;font-size:16px;}.login-form button:hover{background:#0056b3;}
.profile-container{max-width:500px;margin:40px auto;padding:20px 30px;background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,0.1);}.profile-container h1,.profile-container h2{text-align:center;font-weight:300;}.profile-form .form-group{margin-bottom:15px;}.profile-form label{display:block;margin-bottom:5px;font-size:14px;color:#555;}.profile-form input{width:100%;padding:10px;box-sizing:border-box;border:1px solid #ccc;border-radius:4px;font-size:16px;}.profile-form button{width:100%;padding:12px;background:#28a745;color:white;border:none;border-radius:4px;cursor:pointer;font-size:16px;transition:background-color 0.2s;}.profile-form button:hover{background:#218838;}.form-message{margin-top:15px;padding:10px;border-radius:4px;text-align:center;display:none;}.form-message.success,.form-message.error{display:block;color:white;border:none;}.form-message.success{background-color:#28a745;}.form-message.error{background-color:#dc3545;}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn 0.2s ease-in-out;}.modal-content{background:white;padding:20px 30px;border-radius:8px;max-width:400px;width:90%;box-shadow:0 5px 15px rgba(0,0,0,0.3);text-align:center;animation:slideIn 0.3s ease-in-out;}.modal-title{margin-top:0;font-weight:500;}.modal-actions{margin-top:20px;display:flex;justify-content:center;gap:15px;}.modal-button{padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:16px;transition:background-color 0.2s;}.modal-button.confirm{background-color:#dc3545;color:white;}.modal-button.confirm:hover{background-color:#c82333;}.modal-button.cancel{background-color:#ccc;}.modal-button.cancel:hover{background-color:#bbb;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@keyframes slideIn{from{transform:translateY(-30px);opacity:0;}to{transform:translateY(0);opacity:1;}}