body{font-family:Segoe UI,Arial,sans-serif;margin:0;background-color:#f5f7fa;color:#222;overflow-x:hidden}.top-header{text-align:center;padding:30px 0 10px;background-color:#fff;border-bottom:1px solid #eee}.top-header h1{font-size:28px;font-weight:700;margin:0}.upload-container{display:flex;flex-direction:column;align-items:center;margin-top:40px;margin-bottom:30px}.login-status{margin-bottom:15px;font-size:16px;color:#444}.upload-btn{width:260px;height:48px;background-color:#007bff;color:#fff;font-size:16px;font-weight:500;border:none;border-radius:8px;cursor:pointer;transition:.2s;box-shadow:0 2px 6px #00000026}.upload-btn:hover{background-color:#0066e8;transform:translateY(-1px)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0006;display:flex;justify-content:center;align-items:center}.login-box{background:#fff;border-radius:16px;box-shadow:0 6px 20px #0003;padding:40px 50px;width:360px;text-align:center;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}.login-box h2{margin-bottom:24px;color:#222;font-weight:700}.login-box input{display:block;width:calc(100% - 32px);margin:0 auto 14px;padding:12px 14px;border:1px solid #ddd;border-radius:8px;font-size:15px;outline:none;box-sizing:border-box}.password-field{position:relative}.password-field .toggle-pwd{position:absolute;right:-25px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:18px;color:#555;display:flex;align-items:center;justify-content:center}.btn-row{display:flex;flex-direction:column;gap:12px}.btn-primary{background-color:#007bff;border:none;color:#fff;font-weight:500;font-size:16px;padding:12px;border-radius:8px;cursor:pointer;transition:.2s}.btn-primary:hover{background-color:#0066e8}.btn-secondary{background-color:#e5e5e5;border:none;color:#333;font-weight:500;font-size:16px;padding:12px;border-radius:8px;cursor:pointer}.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:40px;justify-items:center;align-items:start;max-width:1200px;margin:0 auto;max-height:420px;overflow-y:auto}.photo-card{width:100%;max-width:260px;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 2px 8px #0000001a;transition:transform .2s ease;text-align:center}.photo-card:hover{transform:scale(1.05)}.photo-img{width:100%;height:180px;border-radius:8px;object-fit:cover;cursor:pointer;transition:transform .3s ease,z-index .3s ease}.photo-img.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(1.6);z-index:9999;max-width:90%;max-height:90%;width:auto;height:auto;border-radius:12px;box-shadow:0 10px 40px #0009;cursor:zoom-out;background:#000c}.photo-card p{font-size:14px;margin:6px 0 10px}@media (max-width: 900px){.photo-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.photo-grid{grid-template-columns:repeat(2,1fr);gap:12px}.photo-img{height:150px}}.photo-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:9999;cursor:zoom-out}.photo-preview{max-width:90%;max-height:90%;border-radius:12px;box-shadow:0 10px 40px #0009;transition:transform .3s ease}.photo-preview:hover{transform:scale(1.02)}
