:root{--ink:#23201c;--paper:#faf7f2;--accent:#243b2e;--accent-light:#3a5c44;--surface:#fff;--surface-muted:#ede8e0;--border:#e6e0d6;--border-btn:#cabfa9;--muted:#8a8070;--placeholder:#eee;--status:#998}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-sans-serif,system-ui,sans-serif;transition:background-color .4s ease,color .4s ease}

/* ── Dark (Wild West) theme ── */
body[data-theme="dark"]{
  --paper:#1b1613;
  --ink:#ece2d2;
  --accent:#c08648;
  --accent-light:#d4a76a;
  --surface:#2a2118;
  --surface-muted:#332920;
  --border:#443629;
  --border-btn:#6b5438;
  --muted:#9e8e78;
  --placeholder:#2e231a;
  --status:#9e8e78;
}

/* ── Topbar ── */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--border);gap:16px}
.brand{font-family:Georgia,serif;font-size:20px;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand:hover{color:var(--accent)}
#logout{background:none;border:1px solid var(--border-btn);border-radius:6px;padding:6px 12px;cursor:pointer;white-space:nowrap;color:var(--ink)}
#logout:hover{border-color:var(--accent);color:var(--accent)}

/* ── Album nav ── */
.album-nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:center;flex-wrap:wrap}
.album-nav__link{font-size:14px;color:var(--ink);text-decoration:none;padding:6px 12px;border-radius:6px;transition:background .15s,color .15s;white-space:nowrap}
.album-nav__link:hover{background:var(--surface-muted);color:var(--accent)}
.album-nav__link[aria-current="page"]{background:var(--accent);color:#fff;font-weight:600}

main{max-width:1200px;margin:0 auto;padding:24px 18px 60px}
#signin{text-align:center;padding:12vh 0}#signin h1{font-family:Georgia,serif;font-weight:500;font-size:clamp(2rem,6vw,3.2rem)}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;padding:12px 26px;border-radius:8px;letter-spacing:.04em}

/* ── Album index grid ── */
.albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;padding-top:8px}
.album-card{display:block;text-decoration:none;color:var(--ink);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.09);background:var(--surface);transition:transform .2s,box-shadow .2s}
.album-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.album-card__img-wrap{aspect-ratio:4/3;overflow:hidden}
.album-card__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.album-card:hover .album-card__img{transform:scale(1.04)}
.album-card__cap{padding:14px 16px 16px;display:flex;flex-direction:column;gap:3px}
.album-card__title{font-family:Georgia,serif;font-size:18px;font-weight:500}
.album-card__count{font-size:13px;color:var(--muted)}

/* ── Album view header ── */
.album-header{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.album-header h2{font-family:Georgia,serif;font-weight:500;font-size:1.8rem;margin:0}
.back{font-size:14px;color:var(--accent);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:border-color .15s}
.back:hover{border-color:var(--accent)}

/* ── Photo grid (album view) ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.grid a{display:block;aspect-ratio:1;overflow:hidden;border-radius:8px;background:var(--placeholder)}
.grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.grid a:hover img{transform:scale(1.04)}

.grid a { position: relative; }
.tag-btn { position: absolute; top: 6px; right: 6px; z-index: 2; border: none; border-radius: 6px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 13px; line-height: 1; padding: 5px 7px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.grid a:hover .tag-btn, .tag-btn:focus { opacity: 1; }
.tag-btn--set { background: var(--accent); opacity: 1; }

#status{text-align:center;color:var(--status);padding:30px}
.pswp__bg{background:#1a1714}

/* ── Mobile ── */
@media(max-width:600px){
  .topbar{flex-wrap:wrap;gap:10px}
  .album-nav{justify-content:flex-start}
  .albums{grid-template-columns:1fr 1fr;gap:14px}
}
@media(max-width:380px){
  .albums{grid-template-columns:1fr}
}

/* ── Invite-code landing ── */
.code-landing { max-width: 460px; margin: 12vh auto; text-align: center; padding: 0 18px; }
.code-landing h1 { font-family: Georgia, serif; font-weight: 500; font-size: clamp(2rem, 6vw, 3rem); }
#code-form { display: flex; gap: 8px; margin: 18px 0 6px; }
#code-input { flex: 1; padding: 12px 14px; border: 1px solid var(--border-btn); border-radius: 8px; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; background: var(--surface); color: var(--ink); }
#code-form button { padding: 12px 20px; border: none; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; }
.code-err { color: #b3402e; min-height: 1.2em; font-size: 14px; }
.code-admin { margin-top: 22px; font-size: 13px; } .code-admin a { color: var(--muted); }

/* ── Admin manage-guests screen ── */
.admin-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; align-items: center; }
.admin-form input[type=email], .admin-form input:not([type=checkbox]) { padding: 8px 10px; border: 1px solid var(--border-btn); border-radius: 6px; background: var(--surface); color: var(--ink); min-width: 180px; }
.admin-form button, .admin-table button { padding: 7px 12px; border: 1px solid var(--border-btn); border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.admin-table th, .admin-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 14px; }
.admin-table button { background: none; color: var(--accent); border-color: var(--border-btn); margin-right: 4px; }
#admin-msg code { display: block; margin-top: 6px; padding: 8px; background: var(--surface-muted); border-radius: 6px; font-size: 12px; word-break: break-all; }

/* ── Admin manage-invites screen ── */
.inv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 16px; }
.inv-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px; background: var(--surface); }
.inv-card.inv-off { opacity: .55; }
.inv-code { font-family: ui-monospace, monospace; font-size: 22px; letter-spacing: .12em; margin: 8px 0; }
.inv-grants { font-size: 13px; color: var(--muted); }
.inv-qr img { width: 120px; height: 120px; image-rendering: pixelated; }
.inv-url { font-size: 11px; color: var(--muted); word-break: break-all; margin: 6px 0; }
.inv-albums label { font-size: 13px; margin-right: 8px; white-space: nowrap; }

/* ── Activity feed ── */
.act-row { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 14px; flex-wrap: wrap; }
.act-who { font-weight: 600; }
.act-what { color: var(--muted); }
.act-when { margin-left: auto; color: var(--muted); font-size: 12px; }