/* ---------- Base Reset ---------- */
.aguv5-font, .aguv5-font * { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; }
:root {
  --card: #ffffff;
  --ink: #101114;
  --muted: #6c6f76;
  --accent1: #ee0979;
  --accent2: #ff6a00;
  --ring: rgba(238,9,121,.6);
  --shadow: 0 16px 40px rgba(0,0,0,.18);
}

/* ---------- Grid (unchanged from V4, lightly polished) ---------- */
.collage-gallery{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;margin:18px auto}
.collage-card{position:relative;width:240px;padding:12px;background:var(--card);border-radius:18px;text-align:center;box-shadow:var(--shadow);animation:fadeInUp .5s ease forwards}
.collage-card h3{margin:6px 0 10px;font-size:16px;color:var(--ink)}
.collage-card h3 a{text-decoration:none;color:inherit}
.collage-card img{width:100%;border-radius:14px;cursor:pointer;transition:transform .35s, filter .35s}
.collage-card img:hover{transform:scale(1.04);filter:brightness(1.05)}
.meta-line{margin-top:10px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}
.meta-line .share a,.meta-line .share button{margin-left:6px;background:#f4f5f7;border:0;border-radius:10px;padding:4px 8px;cursor:pointer}
.actions{display:flex;justify-content:space-around;margin-top:10px}
.react{background:#1f2328;color:#fff;border:0;padding:8px 12px;border-radius:12px;cursor:pointer;transition:transform .15s}
.react:hover{transform:translateY(-1px) scale(1.06)}
.delete-photo{position:absolute;top:10px;right:10px;background:rgba(255,58,58,.95);border:0;color:#fff;border-radius:50%;width:34px;height:34px;cursor:pointer;display:none}
.collage-card:hover .delete-photo{display:block}

.lightbox{display:none;position:fixed;z-index:9999;inset:0;background:rgba(0,0,0,.9);justify-content:center;align-items:center}
.lightbox img{max-width:85%;max-height:85%;border-radius:16px;animation:zoomIn .3s ease forwards}
.lightbox .close{position:absolute;top:22px;right:44px;color:#fff;font-size:40px;cursor:pointer}
@keyframes zoomIn{from{transform:scale(.9);opacity:.6}to{transform:scale(1);opacity:1}}
@keyframes fadeInUp{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ---------- Leaderboard ---------- */
.aguv4-leaderboard{max-width:760px;margin:18px auto;background:var(--card);padding:18px;border-radius:14px;box-shadow:var(--shadow)}
.aguv4-leaderboard li{display:flex;align-items:center;gap:12px;padding:8px 0}
.aguv4-leaderboard img{width:42px;height:42px;border-radius:10px;object-fit:cover}
.aguv4-leaderboard .likes{margin-left:auto;background:#1f2328;color:#fff;padding:6px 10px;border-radius:10px}

/* ---------- Upload form ---------- */
#galleryUpload{margin:20px auto;padding:18px;background:#101114;color:#fff;border-radius:14px;max-width:560px;text-align:center;box-shadow:var(--shadow)}
#galleryUpload input[type="text"],#galleryUpload select,#galleryUpload input[type="file"]{padding:12px;margin:8px 0;width:92%;border-radius:12px;border:none}
#galleryUpload button{background:linear-gradient(135deg,var(--accent1),var(--accent2));border:none;padding:12px 22px;border-radius:999px;color:#fff;font-weight:700;cursor:pointer;transition:transform .2s}
#galleryUpload button:hover{transform:scale(1.05)}
.gallery-login-msg{background:#ffe8ec;border-left:4px solid var(--accent1);color:#5a0a2d;padding:10px 12px;border-radius:10px}

/* ---------- Single Photo: Instagram-style ---------- */
.aguv5-single{max-width:1100px;margin:28px auto;padding:10px}
.aguv5-card{background:var(--card);border-radius:22px;box-shadow:var(--shadow);padding:20px;overflow:hidden}
.aguv5-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.aguv5-avatar{width:64px;height:64px;border-radius:50%;position:relative;flex:0 0 64px}
.aguv5-avatar::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from 180deg,var(--accent1),var(--accent2));filter:blur(0.5px)}
.aguv5-avatar img{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;border:3px solid #fff;object-fit:cover}
.aguv5-user{line-height:1}
.aguv5-user a{font-weight:800;text-decoration:none;color:var(--ink)}
.aguv5-date{font-size:12px;color:var(--muted);margin-top:2px}

.aguv5-frame{padding:10px;border-radius:20px;background:linear-gradient(135deg,var(--accent1),var(--accent2))}
.aguv5-inner{border-radius:16px;overflow:hidden;background:#000}
.aguv5-inner img{width:100%;display:block;transition:transform .4s ease}
.aguv5-inner img:hover{transform:scale(1.02)}

.aguv5-title{margin:12px 4px 6px;font-size:20px;font-weight:700;color:var(--ink)}

.aguv5-actions{display:flex;align-items:center;gap:10px;margin-top:8px}
.aguv5-actions .react{font-size:16px;padding:10px 14px;border-radius:14px;background:#1f2328}
.aguv5-actions .react span{margin-left:6px}
.aguv5-share{margin-left:auto}
.aguv5-share a,.aguv5-share button{margin-left:6px;background:#f1f2f4;border:0;border-radius:10px;padding:8px 10px;cursor:pointer}

.aguv5-comments{margin-top:16px;background:var(--card);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.aguv5-comments .commentlist li{list-style:none;margin:10px 0;padding:10px;background:#f7f8fa;border-radius:12px}
.aguv5-comments .comment-author img{border-radius:50%}
.aguv5-comments #comment,.aguv5-comments textarea{width:100%;border-radius:12px;border:1px solid #e5e7eb;padding:10px}

/* Controls bar */
.aguv4-controls{display:flex;justify-content:center;margin:10px 0 0}
.tabs{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tab{background:#1f2328;color:#fff;border:none;border-radius:999px;padding:6px 12px;cursor:pointer}
.tab.active{background:var(--accent1)}
.category-filter{margin-left:8px;color:#333;background:#fff;border-radius:8px;padding:6px 8px}