:root{
  --bg:#faf9f7; --muted:#6b6b6b; --accent:#274c77; --card:#ffffff;
  --radius:12px; --gap:14px; --max-width:980px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;color:#111;background:var(--bg)}
.wrap{max-width:var(--max-width);margin:36px auto;padding:20px}
.hero{text-align:center;margin-bottom:20px}
.hero h1{margin:0;font-size:34px;color:var(--accent)}
.hero .subtitle{margin:6px 0;color:var(--muted)}
.uploader{display:flex;justify-content:center;margin:18px 0}
.uploader form{display:flex;gap:8px;align-items:center;background:var(--card);padding:12px;border-radius:var(--radius);box-shadow:0 6px 20px rgba(30,30,30,0.05)}
.uploader input[type=text]{padding:8px;border:1px solid #eee;border-radius:8px;background:#fff}
.uploader input[type=file]{padding:6px}
.uploader button{background:var(--accent);color:#fff;padding:8px 12px;border:none;border-radius:8px;cursor:pointer}
#status{font-size:13px;color:var(--muted);margin-left:10px}

.cloud{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}
.cloud .photo{position:relative;display:block;border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,0.08);transition:transform .22s ease, box-shadow .22s ease}
.cloud .photo img{display:block;width:100%;height:100%;object-fit:cover}
.cloud .sm{width:120px;height:120px}
.cloud .md{width:190px;height:190px}
.cloud .lg{width:260px;height:260px}
.cloud .photo:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 20px 40px rgba(0,0,0,0.12)}

.footer{margin-top:30px;text-align:center;color:var(--muted)}

/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);visibility:hidden;opacity:0;transition:opacity .18s ease, visibility .18s}
.modal[aria-hidden="false"]{visibility:visible;opacity:1}
.modal-inner{background:var(--card);padding:16px;border-radius:12px;max-width:90vw;max-height:90vh;overflow:auto}
.modal img{max-width:80vw;max-height:60vh;display:block;margin:6px auto;border-radius:8px}
.modal .meta{color:var(--muted);font-size:14px}
.modal-close{position:absolute;right:22px;top:18px;background:transparent;border:0;color:#fff;font-size:26px;cursor:pointer}

@media (max-width:600px){
  .cloud .sm{width:92px;height:92px}
  .cloud .md{width:140px;height:140px}
  .cloud .lg{width:180px;height:180px}
  .uploader form{flex-direction:column;align-items:stretch}
}