* {margin: 0;padding: 0;box-sizing: border-box;font-family: system-ui, 'Segoe UI', Roboto, sans-serif;}
body {background: #f5f7fb;padding: 2rem;display: flex;flex-direction: column;}

.containerhan {max-width: 1150px;margin: auto;margin-top: 70px;justify-content: space-between;width: 100%;}
.page-title {font-family: 'Signika';font-size: 19px;font-weight: bold;white-space: nowrap;color: #222;}
.topbar {display: flex;align-items: center;gap: 15px;margin-bottom: 0.8rem;font-size: 0.8rem;}
.topbar input {font-family:inherit; border: solid 0.5px grey;background: transparent;border-radius:0.5rem;padding: 10px;font-size: 0.8rem;width: 100%;outline: none;color: #1e293b;}

.category-buttons {display: flex;flex-wrap: wrap;align-items: center;gap: 0.2rem 0.1rem;background: transparent;margin-bottom: 10px;justify-content: center;}
.cat-btn {background: transparent;border: none;padding: 0.45rem 0.9rem;font-size: 0.9rem;font-weight: 500;color: blue;line-height:0.8;cursor: pointer;transition: background 0.15s, color 0.15s;white-space: nowrap;}
.cat-btn:hover {background: transparent;}
.cat-btn.active {background: transparent;color: red;}
.separator {color: #9aa9c1;font-weight: 300;margin: 0 0.1rem;user-select: none;}

.card-grid {display: grid;grid-template-columns: repeat(6, 1fr);gap: 0.5rem;width: 100%;}
.card {background: white;border-radius: 0.5rem;overflow: hidden;display: flex;flex-direction: column;transition: transform 0.2s, box-shadow 0.2s;height: 200px;border: 1px solid #e8edf5;}
.card-image {cursor: pointer;width: 100%;aspect-ratio: 1 / 1;background: #eef2f7;overflow: hidden;position: relative;}
.card-image img {width: 100%;height: 100%;object-fit: cover;display: block;transition: transform 0.3s;}
.card-image:hover img {transform: scale(1.02);}
.card-content {padding: 1rem 0.9rem 1.1rem;display: flex;flex-direction: column;flex: 1;}
.card-title {font-size: 0.9rem;font-weight: 700;color: black;line-height:1;text-align: center;}
.card-links {display: flex;flex-wrap: wrap;gap: 0.3rem 0.6rem;margin-top: auto;justify-content: center;padding-top: 0.3rem;}
.card-links a {font-size: 0.7rem;justify-content: center;color: #1e5ed7;text-decoration: none;font-weight: 500;white-space: nowrap;}
.card-pagination {display: flex;align-items: center;justify-content: flex-end;gap: 0.4rem;margin-top: 0.4rem;font-size: 0.68rem;color: #62748c;font-weight: 500;}
.page-badge {background: #eef2f7;padding: 0.2rem 0.6rem;border-radius: 2rem;font-size: 0.65rem;letter-spacing: 0.2px;}

.lightbox-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.85);backdrop-filter: blur(6px);display: none;align-items: center;justify-content: center;z-index: 9999;padding: 1rem;}
.lightbox-overlay.active {display: flex;}
.lightbox-container {background: #1a1e2b;border-radius: 0.5rem;max-width: 900px;width: 100%;max-height: 90vh;display: flex;flex-direction: column;box-shadow: 0 30px 50px rgba(0, 0, 0, 0.7);border: 1px solid #3e4659;overflow: hidden;}
.lightbox-header {display: flex;justify-content: space-between;align-items: center;padding: 0.9rem 1.4rem;background: #0f131e;border-bottom: 1px solid #2d3346;color: white;}
.lightbox-header h3 {font-size: 1rem;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 70%;}
.lightbox-close {background: none;border: none;color: #b7c0d0;font-size: 1.8rem;line-height: 1;cursor: pointer;padding: 0 0.4rem;transition: color 0.2s;}
.lightbox-close:hover {color: white;}
.lightbox-main {display: flex;flex-direction: column;align-items: center;padding: 1.2rem 1.2rem 0.8rem;background: #121723;}
.lightbox-image {max-width: 100%;max-height: 50vh;object-fit: contain;border-radius: 0.5rem;background: #0b0e14;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);}
.lightbox-nav {display: flex;align-items: center;justify-content: center;gap: 2rem;margin-top: 1rem;padding: 0.5rem 0;color: white;}
.lightbox-nav button {background: #2c3346;border: none;color: white;font-size: 1.4rem;width: 3rem;height: 3rem;border-radius: 3rem;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: background 0.2s, transform 0.1s;font-weight: 600;}
.lightbox-nav button:hover:not(:disabled) {background: #3f4a62;}
.lightbox-nav button:active:not(:disabled) {transform: scale(0.94);}
.lightbox-nav button:disabled {opacity: 0.3;cursor: not-allowed;}
.lightbox-counter {font-size: 0.95rem;font-weight: 500;color: #b9c4d6;min-width: 5rem;text-align: center;}
.lightbox-footer {padding: 0.6rem 1.4rem 1.2rem;color: #a8b3c7;font-size: 0.8rem;border-top: 1px solid #232a3a;text-align: center;background: #121723;}

@media (max-width: 1150px) {
    .card-grid {grid-template-columns: repeat(4, 1fr);}}
@media (max-width: 600px) {
    .card-grid {grid-template-columns: repeat(2, 1fr);gap: 1rem;}
    body {padding: 0.75rem;}
    .top-controls {padding: 0.8rem 1rem;border-radius: 1.8rem;}
    .category-buttons {padding: 0.2rem 0.6rem;}
    .cat-btn {padding: 0.3rem 0.7rem;font-size: 0.8rem;}}
@media (max-width: 480px) {
    .card-grid {grid-template-columns: repeat(2,1fr);gap: 0.5rem;}
    .lightbox-nav button {width: 2.5rem;height: 2.5rem;font-size: 1.2rem;}}

.no-results {grid-column: 1 / -1;text-align: center;padding: 3rem;color: #6a7c99;font-size: 1.1rem;background: white;border-radius: 2rem;}