*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,sans-serif;background:#f5f7fb;color:#151820}
header{height:68px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 5vw}
.brand,.logout{color:#fff;text-decoration:none}.brand{font-weight:800;font-size:20px}
main{max-width:1200px;margin:32px auto;padding:0 20px}
.panel{background:#fff;border-radius:18px;padding:22px;box-shadow:0 8px 30px #0000000d;margin-bottom:24px}
h1{margin-top:0}
.row{display:flex;gap:10px;flex-wrap:wrap}
input{border:1px solid #d8deea;border-radius:12px;padding:13px 14px;font-size:16px;min-width:240px}
button{border:0;border-radius:12px;padding:13px 18px;font-size:16px;font-weight:700;background:#2563eb;color:white;cursor:pointer}
button:disabled{opacity:.6;cursor:not-allowed}
.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.folder{background:#fff;border-radius:18px;padding:26px;text-decoration:none;color:#111827;box-shadow:0 8px 25px #0000000c;font-weight:700}
.folder-icon{font-size:42px;margin-bottom:12px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.photo-card{background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:#111827;box-shadow:0 8px 25px #0000000c}
.photo-card img{width:100%;height:220px;object-fit:cover;display:block;background:#e9edf5}
.photo-card span{display:block;padding:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auth{max-width:460px;margin:10vh auto}
.auth form{display:flex;flex-direction:column;gap:12px}
.back{display:inline-block;margin-bottom:12px}
.hint{font-size:13px;color:#657084}
.flash{background:#fff3cd;padding:12px 16px;border-radius:12px;margin-bottom:16px}
.counter{margin-top:10px;font-size:14px;color:#4b5563}
.upload-status{margin-top:15px}
.hidden{display:none}
.progress-wrap{height:14px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-bottom:7px}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,#2563eb,#60a5fa);transition:width .15s}
.more-btn{display:block;margin:28px auto 50px}

.viewer{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:#0b0d12;
  padding:75px 20px 20px;
  align-items:center;
  justify-content:center;
}

.viewer.show{
  display:flex;
}

.viewer img{
  max-width:95vw;
  max-height:85vh;
  object-fit:contain;
  border-radius:12px;
}

.viewer-close{
  position:absolute;
  top:18px;
  left:20px;
  background:#fff;
  color:#111827;
  padding:12px 18px;
  border-radius:12px;
  font-size:16px;
  font-weight:700;
}

.viewer{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(0,0,0,.95);
  align-items:center;
  justify-content:center;
  padding:80px 20px 20px;
}

.viewer.show{
  display:flex;
}

.viewer img{
  max-width:95vw;
  max-height:85vh;
  object-fit:contain;
}

.viewer-close{
  position:absolute;
  top:20px;
  left:20px;
  background:white;
  color:#111;
  padding:12px 18px;
  border-radius:12px;
  font-size:16px;
  font-weight:700;
}

.viewer-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:#111;
  font-size:30px;
  padding:0;
  z-index:100001;
}

.viewer-prev{
  left:20px;
}

.viewer-next{
  right:20px;
}

@media(max-width:600px){
  .viewer-nav{
    width:46px;
    height:46px;
    font-size:24px;
  }

  .viewer-prev{
    left:8px;
  }

  .viewer-next{
    right:8px;
  }
}