/* Minimal, responsive styles */
:root { --bg: #0f1115; --text: #e6e6e6; --muted: #9aa0a6; --card:#171923; --brand:#ff6b6b; --accent:#7c4dff; }
[data-theme="light"] { --bg:#f7f8fb; --text:#101217; --muted:#5f6368; --card:#ffffff; --brand:#ff6b6b; --accent:#5b44ea; }
* { box-sizing: border-box }
body { margin:0; font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--text); }
.container { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; }
.site-header { display:flex; align-items:center; justify-content:space-between; padding: .75rem 1rem; background:linear-gradient(90deg, #11131a, #181b23); border-bottom:1px solid #222; position: sticky; top:0; z-index:10 }
.brand { color: var(--text); text-decoration:none; font-weight:800; letter-spacing:.2px; display:flex; align-items:center; gap:.5rem }
.logo { width:40px; height:40px; display:inline-block }
.nav a { color: var(--muted); margin-left: 1rem; text-decoration:none }
.theme-toggle { margin-left: .75rem; background:transparent; border:1px solid #333; color:var(--text); padding:.25rem .5rem; border-radius:8px; cursor:pointer }
.site-footer { color: var(--muted); padding:2rem 1rem; text-align:center; border-top:1px solid #222; margin-top:3rem }
h1,h2 { margin: 1rem 0 .75rem }
.creator-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem }
.creator-card { background: var(--card); border:1px solid #222; border-radius:12px; padding:.75rem; display:flex; align-items:center; gap:.75rem; text-decoration:none; color:inherit; transition: transform .1s ease }
.creator-card:hover { transform: translateY(-2px) }
.creator-card .avatar { width:56px; height:56px; border-radius:50%; object-fit:cover }
.creator-card .name { font-weight:600 }
.creator-card .handle { color: var(--muted); font-size:.9rem }
.creator-hero { display:flex; gap:1rem; align-items:center; margin-bottom:1rem }
.avatar-lg { width:88px; height:88px; border-radius:50%; object-fit:cover; border:2px solid #222 }
.bio { color: var(--muted) }
.links a { color: var(--accent); text-decoration:none }
.gallery { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:.5rem; position:relative }
.tile { background:#0c0e14; border:1px solid #222; border-radius:10px; overflow:hidden; position:relative }
.tile img { width:100%; height:220px; object-fit:cover; display:block; filter:none; transition: filter .2s ease }
.tile.locked img { filter: blur(16px) brightness(.7) }
.tile img { cursor: zoom-in; -webkit-user-drag: none; user-select: none }
.tag { display:inline-block; font-size:.8rem; color: var(--muted); margin-left:.25rem }
.lockbar { grid-column: 1 / -1; margin: .25rem 0 .5rem; display:flex; justify-content:flex-end }
.unlock-btn { background: var(--brand); color:#000; border:none; padding:.5rem .75rem; border-radius:8px; cursor:pointer; font-weight:600 }
.badge { background:#222; color: var(--muted); padding:.2rem .5rem; border-radius:6px; font-size:.85rem }
.muted { color: var(--muted) }
.unlock-note { color: var(--muted); margin-bottom:.5rem }
.dialog { border:none; border-radius:12px; padding:1rem; background:#141720; color: var(--text); box-shadow: 0 10px 40px rgba(0,0,0,.6) }

/* Lightbox */
.lightbox-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index: 9999; }
.lightbox-backdrop.open { display:flex }
.lightbox { max-width:95vw; max-height:92vh; border-radius:10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); overflow:hidden }
.lightbox img { display:block; max-width:95vw; max-height:92vh; -webkit-user-drag:none; user-select:none; cursor: zoom-out }
.lightbox-cta { position: fixed; top:16px; right:16px; background: var(--brand); color:#000; border:none; padding:.4rem .6rem; border-radius:8px; font-weight:600; text-decoration:none; display:none; z-index:10000 }
.lightbox-backdrop.open .lightbox-cta[aria-hidden="false"]{ display:inline-block }
/* Lightbox nav */
.lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.4); color:#fff; border:none; padding:.6rem .7rem; border-radius:10px; cursor:pointer; z-index:10000 }
.lightbox-prev { left: 12px }
.lightbox-next { right: 12px }

/* Hero section */
.hero { padding: 2.5rem 1rem 1.5rem; text-align:center; background: linear-gradient(180deg, rgba(255,107,107,0.08), rgba(0,0,0,0)); border-bottom: 1px solid #222; border-radius: 14px }
.hero h1 { margin: 0 0 .5rem; font-size: clamp(1.8rem, 3.5vw, 2.4rem) }
.hero .tagline { font-size: clamp(1.1rem, 2.5vw, 1.3rem); color: var(--muted); margin-bottom: .5rem }
.hero p { color: var(--muted); max-width: 780px; margin: .25rem auto 0 }

/* Admin panel tidy layout */
#adminApp { display:block; gap:1rem; }
#adminApp input, #adminApp select, #adminApp button { margin:.35rem .25rem; padding:.5rem .6rem; border-radius:8px; border:1px solid #2a2f39; background:#151823; color:var(--text); }
#adminApp button { background: var(--brand); color:#000; border:none; font-weight:700; cursor:pointer }
#adminApp .creator-card { display:flex; justify-content:space-between; align-items:center; padding:.6rem .8rem; }
#adminApp h3, #adminApp h4 { margin:.75rem 0 .5rem }
#adminApp .muted { color: var(--muted) }

/* Admin grid layout */
#adminApp .grid-two { display:grid; grid-template-columns: 280px 1fr; gap: 1rem; align-items:start }
#adminApp .panel { background: var(--card); border:1px solid #222; border-radius:12px; padding:1rem }
#adminApp .form-grid { display:grid; grid-template-columns: 180px 1fr auto; gap:.5rem 1rem; align-items:center }
#adminApp .form-grid .label { text-align:right; color: var(--muted) }
#adminApp .row-span { grid-column: 2 / span 2 }
#adminApp .thumb { width:64px; height:64px; border-radius:8px; object-fit:cover; border:1px solid #2a2f39 }

/* Upload progress */
#adminApp .progress { height:8px; background:#222; border-radius:6px; overflow:hidden }
#adminApp .progress > span { display:block; height:100%; width:0; background:var(--brand); transition: width .2s ease }

/* Age gate overlay */
.agegate { position:fixed; inset:0; background:rgba(0,0,0,.95); color:#fff; display:none; align-items:center; justify-content:center; z-index:100000 }
.agegate.open { display:flex }
.age-card { max-width:720px; margin:0 1rem; background:#141720; border:1px solid #222; border-radius:14px; padding:1.25rem; text-align:center }
.age-card h2 { margin:.25rem 0 .5rem }
.age-card p { color: var(--muted) }
.age-card .actions { margin-top:1rem; display:flex; gap:.75rem; justify-content:center }
.age-card .actions button { background: var(--brand); color:#000; border:none; padding:.5rem .75rem; border-radius:8px; font-weight:700; cursor:pointer }