:root{--primary:#5b4ef5;--secondary:#8b7fd4;--text:#333;--bg:#f5f5f5;--border:#ddd;--light-bg:#fff}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;padding:20px}
.container{background:white;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);padding:40px;max-width:1200px;margin:0 auto}
h1{color:var(--primary);text-align:center;margin-bottom:30px;font-size:2.5rem;display:flex;align-items:center;justify-content:center;gap:10px}
.controls{display:flex;gap:20px;margin-bottom:30px;align-items:center;flex-wrap:wrap;justify-content:center}
input,select,button{padding:12px 24px;border:2px solid var(--border);border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}
input[type='file']{border:none;padding:0}
input[type='text'],select{background:white;color:var(--text);border-color:var(--primary);outline:none}
input[type='text']:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(91,78,245,.1)}
button{background:var(--primary);color:white;border:none;font-weight:700}
button:hover{background:var(--secondary);transform:translateY(-2px);box-shadow:0 5px 15px rgba(91,78,245,.3)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-bottom:30px}
.gallery-item{position:relative;overflow:hidden;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,.1);cursor:pointer;transition:all .3s ease;background:var(--bg)}
.gallery-item:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,0,0,.2)}
.gallery-item img{width:100%;height:250px;object-fit:cover;display:block}
.gallery-item-info{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);color:white;padding:20px;transform:translateY(100%);transition:transform .3s ease}
.gallery-item:hover .gallery-item-info{transform:translateY(0)}
.gallery-item-name{font-weight:700;font-size:1.1rem;margin-bottom:5px}
.lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);z-index:1000;align-items:center;justify-content:center}
.lightbox.active{display:flex}
.lightbox img{max-width:90%;max-height:90%;border-radius:8px}
.lightbox-close{position:absolute;top:20px;right:30px;color:white;font-size:40px;cursor:pointer;font-weight:bold;transition:.3s}
.lightbox-close:hover{color:var(--primary)}
.empty{text-align:center;padding:60px 20px;color:var(--text)}
.empty p{font-size:1.2rem;margin-bottom:20px}