/* =============================================================================
   app.css — HookupCebu Global Styles
   Military green / black aesthetic throughout
   Mobile-first — breakpoints expand upward
   ============================================================================= */

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:   16px;
  scroll-behavior: smooth;
}

body {
  background:  var(--c-bg);
  color:       rgb(var(--c-text-rgb));
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  min-height:  100vh;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display:   block;
}

a {
  color:           rgb(var(--c-text-rgb));
  text-decoration: none;
  transition:      color 0.2s;
}
a:hover { color: var(--c-head); }

button {
  font-family: inherit;
  cursor:      pointer;
}

input, textarea, select {
  font-family: inherit;
  font-size:   1rem;
}

/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  line-height: 1.3;
  color:       rgb(var(--c-text-rgb));
}

/* Great Vibes used for branding / decorative headings only */
.font-brand {
  font-family: 'Great Vibes', cursive;
}

/* ── Colour palette variables ────────────────────────────────────────────── */
:root {
  --green:        rgb(var(--c-text-rgb));
  --green-bright: rgb(var(--c-accent-rgb));
  --green-dim:    rgba(var(--c-text-rgb),0.68);
  --green-faint:  rgba(var(--c-text-rgb),0.1);
  --black:        #000;
  --black-soft:   #080808;
  --black-card:   var(--c-card);
  --border:       rgba(var(--c-text-rgb),0.15);
  --border-hover: rgba(var(--c-text-rgb),0.35);

  /* Match colours */
  --match-green: rgb(var(--c-accent-rgb));
  --match-amber: rgb(var(--c-warn-rgb));
  --match-red:   rgb(var(--c-danger-rgb));
}

/* ── Layout helpers ──────────────────────────────────────────────────────── */
.container {
  width:      100%;
  max-width:  960px;
  margin:     0 auto;
  padding:    0 16px;
}

.container-sm {
  width:      100%;
  max-width:  560px;
  margin:     0 auto;
  padding:    0 16px;
}

/* ── Page wrapper (for authenticated pages with sidebar) ─────────────────── */
.page-wrap {
  display:   flex;
  min-height: 100vh;
}

.page-main {
  flex:       1;
  padding:    24px 16px;
  min-width:  0;   /* prevent flex overflow */
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background:    var(--black-card);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       20px;
}

.card:hover {
  border-color: var(--border-hover);
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-group {
  margin-bottom: 18px;
}

.form-label {
  display:       block;
  font-size:     0.82rem;
  color:         var(--green-dim);
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}

.form-control {
  width:         100%;
  background:    var(--c-input);
  border:        1px solid var(--border);
  border-radius: 5px;
  color:         var(--green);
  padding:       10px 14px;
  font-size:     0.95rem;
  transition:    border-color 0.2s;
  outline:       none;
}

.form-control:focus {
  border-color: rgba(var(--c-text-rgb),0.5);
  box-shadow:   0 0 0 2px rgba(var(--c-text-rgb),0.06);
}

.form-control::placeholder {
  color: rgba(var(--c-text-rgb),0.68);
}

.form-error {
  font-size:  0.75rem;
  color:      var(--match-red);
  margin-top: 4px;
}

.form-hint {
  font-size:  0.75rem;
  color:      var(--green-dim);
  margin-top: 4px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display:       inline-block;
  padding:       10px 24px;
  border-radius: 6px;
  font-size:     0.92rem;
  font-weight:   400;
  letter-spacing: 0.03em;
  border:        1.5px solid transparent;
  transition:    all 0.2s;
  text-align:    center;
  cursor:        pointer;
  text-decoration: none;
}

.btn-primary {
  background:  rgba(var(--c-accent-rgb),0.15);
  border-color: rgb(var(--c-accent-rgb));
  color:        var(--green);
}
.btn-primary:hover {
  background:  rgba(var(--c-accent-rgb),0.28);
  color:       var(--c-head);
}

.btn-secondary {
  background:  transparent;
  border-color: var(--border);
  color:        var(--green-dim);
}
.btn-secondary:hover {
  border-color: var(--green);
  color:        var(--green);
}

.btn-danger {
  background:  rgba(var(--c-danger-rgb),0.15);
  border-color: rgb(var(--c-danger-rgb));
  color:        rgb(var(--c-danger-rgb));
}
.btn-danger:hover {
  background: rgba(var(--c-danger-rgb),0.28);
}

.btn-sm {
  padding:   6px 16px;
  font-size: 0.8rem;
}

.btn-block {
  display: block;
  width:   100%;
}

/* ── Alerts / notices ────────────────────────────────────────────────────── */
.alert {
  padding:       12px 16px;
  border-radius: 6px;
  font-size:     0.88rem;
  margin-bottom: 16px;
  border:        1px solid transparent;
}

.alert-success {
  background:   rgba(var(--c-accent-rgb),0.1);
  border-color: rgba(var(--c-accent-rgb),0.3);
  color:        var(--match-green);
}

.alert-error {
  background:   rgba(var(--c-danger-rgb),0.1);
  border-color: rgba(var(--c-danger-rgb),0.3);
  color:        rgb(var(--c-danger-rgb));
}

.alert-info {
  background:   rgba(var(--c-text-rgb),0.06);
  border-color: var(--border);
  color:        var(--green-dim);
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  display:       inline-block;
  padding:       2px 10px;
  border-radius: 10px;
  font-size:     0.7rem;
  font-weight:   400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge-green { background: rgba(var(--c-accent-rgb),0.15);  color: var(--match-green); border: 1px solid rgba(var(--c-accent-rgb),0.3); }
.badge-amber { background: rgba(var(--c-warn-rgb),0.15); color: var(--match-amber); border: 1px solid rgba(var(--c-warn-rgb),0.3); }
.badge-red   { background: rgba(var(--c-danger-rgb),0.15);   color: var(--match-red);   border: 1px solid rgba(var(--c-danger-rgb),0.3); }
.badge-gray  { background: rgba(var(--c-text-rgb),0.06); color: var(--green-dim); border: 1px solid var(--border); }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.hidden    { display: none !important; }
.text-dim  { color: var(--green-dim); }
.text-faint{ color: rgba(var(--c-text-rgb),0.68); }
.text-sm   { font-size: 0.82rem; }
.text-xs   { font-size: 0.72rem; }
.text-center { text-align: center; }
.mt-1  { margin-top:  8px;  }
.mt-2  { margin-top:  16px; }
.mt-3  { margin-top:  24px; }
.mb-1  { margin-bottom:  8px;  }
.mb-2  { margin-bottom:  16px; }
.mb-3  { margin-bottom:  24px; }

/* ── Divider ─────────────────────────────────────────────────────────────── */
.divider {
  border:     none;
  border-top: 1px solid var(--border);
  margin:     20px 0;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: rgba(var(--c-text-rgb),0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--c-text-rgb),0.4); }

/* ── Desktop breakpoint ──────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .page-main { padding: 32px 24px; }
}
/* Emoji picker in message boxes (batch 18) */
.emo-wrap { position:relative; display:inline-flex; align-self:flex-end; }
.emo-btn { background:none; border:1px solid rgba(var(--c-text-rgb),.15); border-radius:50%; width:36px; height:36px; font-size:1.1rem; line-height:1; cursor:pointer; padding:0; }
.emo-btn:hover, .emo-btn[aria-expanded=true] { border-color:rgba(var(--c-accent-rgb),.6); }
.emo-panel { position:absolute; bottom:calc(100% + 6px); left:0; z-index:30; width:min(300px, 80vw); display:grid; grid-template-columns:repeat(7, 1fr); gap:2px;
  background:var(--c-card); border:1px solid rgba(var(--c-text-rgb),.18); border-radius:10px; padding:.4rem; box-shadow:0 6px 20px rgba(0,0,0,.3); }
.emo-panel[hidden] { display:none; }
.emo-pick { background:none; border:none; font-size:1.3rem; line-height:1; padding:.25rem 0; cursor:pointer; border-radius:6px; }
.emo-pick:hover, .emo-pick:focus-visible { background:var(--c-raised); }
.form-group > .emo-wrap { margin-bottom:.35rem; }
.form-group > .emo-wrap .emo-panel { top:calc(100% + 6px); bottom:auto; }

/* Labels on icons and buttons (batch 21) */
.hc-tip { position:absolute; z-index:1000; max-width:260px; padding:.35rem .6rem; border-radius:6px; font-size:.76rem; line-height:1.35;
  background:var(--c-head); color:var(--c-bg); box-shadow:0 4px 14px rgba(0,0,0,.3); pointer-events:none; }
.hc-tip[hidden] { display:none; }

/* What's new card at the top of member pages (batch 21) */
.wn-card { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .9rem; margin:0 0 1rem; padding:.75rem 1rem; border-radius:10px;
  background:var(--c-card); border:1px solid rgba(var(--c-accent-rgb),.55); border-left:4px solid rgb(var(--c-accent-rgb)); }
.wn-card-icon { color:rgb(var(--c-accent-rgb)); font-size:1.15rem; }
.wn-card-text { flex:1 1 240px; min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.wn-card-kicker { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:rgba(var(--c-text-rgb),.8); }
.wn-card-title { font-size:.95rem; color:var(--c-head); }
.wn-card-sum { font-size:.83rem; color:rgba(var(--c-text-rgb),.9); }
.wn-card-actions { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.wn-card-actions form { margin:0; }

/* Advert banners between listings (batch 21): 8:1, at most 80px deep (50px on phones), narrower than a listing */
.ad-slot { position:relative; width:94%; max-width:640px; margin:0 auto 14px; }
.ad-slot .ad-label { position:absolute; top:4px; left:6px; z-index:1; font-size:.6rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:.05rem .35rem; border-radius:4px; background:rgba(0,0,0,.62); color:#fff; }
.ad-slot .ad-link { display:block; border-radius:8px; overflow:hidden; border:1px solid rgba(var(--c-text-rgb),.15); line-height:0; }
.ad-slot img { display:block; width:100%; height:auto; max-height:80px; aspect-ratio:8 / 1; object-fit:cover; }
@media (max-width:600px) { .ad-slot { width:100%; } .ad-slot img { max-height:50px; } }

/* "Who sees this post" on the listing and community forms (batch 22) */
.pa-box { border:1px solid rgba(var(--c-text-rgb),.18); border-radius:10px; padding:.75rem .9rem; margin:0 0 1rem; }
.pa-box legend { padding:0 .35rem; margin-bottom:.2rem; }
.pa-help { font-size:.75rem; font-weight:400; margin-left:.4rem; }
.pa-mode { display:flex; gap:.45rem; align-items:center; font-size:.88rem; margin:.25rem 0; cursor:pointer; }
.pa-pick { margin:.5rem 0 .25rem 1.4rem; }
.pa-pick[hidden] { display:none; }
.pa-sub { font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:rgba(var(--c-text-rgb),.8); margin:.5rem 0 .25rem; }
.pa-list { display:flex; flex-wrap:wrap; gap:.3rem .9rem; }
.pa-people { max-height:200px; overflow:auto; padding:.35rem; border:1px solid rgba(var(--c-text-rgb),.12); border-radius:8px; }
.pa-item { display:flex; gap:.35rem; align-items:center; font-size:.85rem; cursor:pointer; }
.pa-item[hidden] { display:none; }
.pa-n { color:rgba(var(--c-text-rgb),.75); font-size:.78rem; }
.pa-filter { margin:.15rem 0 .4rem; max-width:280px; }
.pa-note { font-size:.78rem; color:rgba(var(--c-text-rgb),.82); margin:.45rem 0 0; }
.pa-owner { font-size:.8rem; color:rgba(var(--c-text-rgb),.85); margin:-.2rem 0 .6rem; padding:.35rem .6rem; border-radius:8px; background:rgba(var(--c-text-rgb),.05); }
.pa-owner i { margin-right:.3rem; }

/* The photo editor and My photos (batch 15/19; moved here in batch 24 so the listing form can use it too) */
.pe-private { display:flex; gap:.75rem; align-items:flex-start; font-size:.85rem; line-height:1.55; color:rgba(var(--c-text-rgb),0.85); background:rgba(var(--c-info-rgb),.08); border:1px solid rgba(var(--c-info-rgb),.25); border-radius:8px; padding:.8rem 1rem; margin-bottom:1rem; }
.pe-private i { color:rgb(var(--c-info-rgb)); margin-top:.2rem; }
.pe-pick { cursor:pointer; margin-bottom:.75rem; }
.pe-stage { width:100%; display:flex; justify-content:center; background:var(--c-raised); border-radius:8px; min-height:60px; margin-bottom:.75rem; overflow:hidden; }
#photoEditor:not(.pe-open) .pe-stage { display:none; }
#peCanvas { max-width:100%; touch-action:none; cursor:crosshair; }
.pe-row { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-bottom:.6rem; }
.pe-adjust label, .pe-folders label { font-size:.82rem; color:rgba(var(--c-text-rgb),0.85); display:flex; align-items:center; gap:.35rem; }
.pe-folders small { color:rgba(var(--c-text-rgb),0.68); }
.pe-on { border-color:rgb(var(--c-accent-rgb)) !important; color:rgb(var(--c-link-rgb)) !important; }
.pe-msg { font-size:.82rem; color:rgba(var(--c-text-rgb),0.85); min-height:1.2em; margin:.4rem 0 0; }
.pe-msg--bad { color:rgb(var(--c-danger-rgb)); }
#photoEditor [hidden] { display:none !important; }
#peSaveAll:disabled { opacity:.45; cursor:not-allowed; }
.pe-howto { font-size:.84rem; margin:0 0 .75rem; color:rgba(var(--c-text-rgb),.88); }
.pe-howto summary { cursor:pointer; color:rgb(var(--c-link-rgb)); }
.pe-howto ol { margin:.5rem 0 0; padding-left:1.25rem; line-height:1.55; }
.pe-howto li { margin-bottom:.3rem; }
.pe-tray { display:flex; gap:.5rem; overflow-x:auto; padding:.25rem 0 .5rem; margin-bottom:.25rem; }
.pe-thumb { position:relative; flex:0 0 auto; }
.pe-thumb-pick { display:block; padding:0; border:2px solid rgba(var(--c-text-rgb),.2); border-radius:8px; overflow:hidden; background:var(--c-raised); cursor:pointer; position:relative; width:78px; height:78px; }
.pe-thumb-pick img { width:100%; height:100%; object-fit:cover; display:block; }
.pe-thumb--on .pe-thumb-pick { border-color:rgb(var(--c-accent-rgb)); box-shadow:0 0 0 2px rgba(var(--c-accent-rgb),.35); }
.pe-thumb-tag { position:absolute; left:0; right:0; bottom:0; font-size:.6rem; line-height:1.3; text-align:center; background:rgba(0,0,0,.72); color:#fff; padding:.1rem 0; }
.pe-thumb--unmarked .pe-thumb-tag { background:rgba(var(--c-warn-rgb),.95); color:#000; }
.pe-thumb-x { position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; border:1px solid rgba(var(--c-text-rgb),.3); background:var(--c-card); color:rgb(var(--c-text-rgb)); font-size:.9rem; line-height:1; cursor:pointer; padding:0; }
.pe-count { font-size:.78rem; color:rgba(var(--c-text-rgb),.8); margin:0 0 .4rem; min-height:0; }
.pe-count:empty { display:none; }
.pe-why { font-size:.78rem; color:rgb(var(--c-warn-rgb)); margin:-.2rem 0 .4rem; }
.pe-tabs { display:flex; gap:.5rem; margin:1rem 0 .6rem; }
.pe-tab { padding:.35rem .9rem; border-radius:16px; border:1px solid rgba(var(--c-text-rgb),.2); color:rgba(var(--c-text-rgb),0.85); text-decoration:none; font-size:.85rem; }
.pe-tab--on { border-color:rgb(var(--c-accent-rgb)); color:rgb(var(--c-link-rgb)); background:rgba(var(--c-accent-rgb),.08); }
.pe-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.75rem; }
.pe-item { background:var(--c-card); border:1px solid rgba(var(--c-text-rgb),.1); border-radius:8px; overflow:hidden; }
.pe-item img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.pe-item-actions { display:flex; flex-wrap:wrap; gap:.3rem; padding:.45rem; }
.pe-item-actions form { margin:0; }
.pe-to-listing summary { list-style:none; cursor:pointer; }
.pe-to-listing form { display:flex; flex-direction:column; gap:.35rem; margin-top:.35rem; }

/* Photos on the new-listing form (batch 24) */
.lp-box { border:1px solid rgba(var(--c-text-rgb),.18); border-radius:10px; padding:.75rem .9rem; margin:0 0 1rem; }
.lp-box legend { padding:0 .35rem; }
.lp-intro { margin:.1rem 0 .6rem; }
.lp-count { font-size:.8rem; font-weight:600; color:rgb(var(--c-link-rgb)); min-height:1.1em; margin-bottom:.3rem; }
.lp-folder { margin-bottom:.6rem; }
.lp-folder-name { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:rgba(var(--c-text-rgb),.8); margin-bottom:.3rem; }
.lp-grid { display:flex; flex-wrap:wrap; gap:.45rem; }
.lp-tile { position:relative; width:84px; height:84px; border-radius:8px; overflow:hidden; border:2px solid rgba(var(--c-text-rgb),.15); cursor:pointer; display:block; }
.lp-tile img { width:100%; height:100%; object-fit:cover; display:block; }
.lp-tile input { position:absolute; opacity:0; width:1px; height:1px; }
.lp-tile .lp-tick { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.45); color:transparent; display:flex; align-items:center; justify-content:center; font-size:.7rem; border:2px solid #fff; }
.lp-tile--on { border-color:rgb(var(--c-accent-rgb)); box-shadow:0 0 0 2px rgba(var(--c-accent-rgb),.35); }
.lp-tile--on .lp-tick { background:rgb(var(--c-accent-rgb)); color:var(--c-on-accent); }
.lp-tile:has(input:disabled) { opacity:.45; cursor:not-allowed; }
.lp-tile:focus-within { outline:2px solid rgb(var(--c-link-rgb)); outline-offset:1px; }
.lp-consent { display:flex; gap:.4rem; align-items:flex-start; font-size:.84rem; margin:.4rem 0 .6rem; }
.lp-box #photoEditor { margin-top:.6rem; }

/* Pictures in messages (batch 25) */
.compose-pic { flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1px solid rgba(var(--c-text-rgb),.2); background:var(--c-input); color:rgb(var(--c-link-rgb)); cursor:pointer; align-self:flex-end; }
.compose-pic[hidden] { display:none; }
.pic-why { font-size:.74rem; color:rgba(var(--c-text-rgb),.75); margin:.3rem 1rem 0; }
.pic-panel { margin:.5rem 1rem; padding:.75rem .9rem; border:1px solid rgba(var(--c-accent-rgb),.4); border-radius:10px; background:var(--c-card); }
.pic-panel[hidden], .pic-lib[hidden], .pic-preview[hidden], .pic-viewer[hidden] { display:none !important; }
.pic-panel-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; color:var(--c-head); }
.pic-x { background:none; border:none; font-size:1.3rem; line-height:1; cursor:pointer; color:rgb(var(--c-text-rgb)); }
.pic-src { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.5rem; }
.pic-src label { cursor:pointer; }
.pic-lib { display:flex; flex-wrap:wrap; gap:.35rem; max-height:180px; overflow:auto; margin-bottom:.5rem; }
.pic-lib-tile { width:64px; height:64px; border-radius:6px; overflow:hidden; border:2px solid transparent; cursor:pointer; position:relative; }
.pic-lib-tile input { position:absolute; opacity:0; }
.pic-lib-tile img { width:100%; height:100%; object-fit:cover; display:block; }
.pic-lib-tile--on { border-color:rgb(var(--c-accent-rgb)); }
.pic-preview { max-width:160px; max-height:160px; border-radius:6px; display:block; margin-bottom:.5rem; filter:blur(3px); }
.pic-row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; font-size:.84rem; margin:.35rem 0; }
.pic-row select { max-width:240px; }
.pic-consent { display:flex; gap:.4rem; font-size:.82rem; margin:.4rem 0; }
.pic-note { font-size:.76rem; line-height:1.5; color:rgba(var(--c-text-rgb),.85); margin:.4rem 0; }
.pic-msg { font-size:.8rem; } .pic-msg--bad { color:rgb(var(--c-danger-rgb)); }
.message-bubble--picture p { display:flex; flex-direction:column; gap:.3rem; }
.pic-head { font-weight:600; font-size:.82rem; }
.pic-state { font-size:.78rem; opacity:.9; }
.pic-acts { display:flex; gap:.35rem; flex-wrap:wrap; }
.pic-reported { font-size:.72rem; font-style:italic; }
.pic-viewer { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.92); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; padding:1rem; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.pic-viewer-bar { display:flex; gap:.6rem; align-items:center; color:#fff; font-size:.9rem; }
.pic-canvas { max-width:100%; max-height:calc(100vh - 140px); border-radius:6px; -webkit-touch-callout:none; }
.pic-viewer-note { color:rgba(255,255,255,.8); font-size:.78rem; margin:0; }
@media print { .pic-viewer { display:none !important; } }

/* Batch 26: upload in progress / refused, on photo and video forms */
.upload-busy-msg { flex-basis: 100%; margin: .35rem 0 0; font-size: .8rem; color: rgba(var(--c-text-rgb), .78); }
.upload-busy-msg--bad { color: #e5534b; font-weight: 600; }
button[disabled] .fa-spinner { margin-right: .25rem; }

/* Batch 26: "Your listings now" and the limits, on the new-listing form */
.my-listings-box { padding: .9rem 1.1rem; margin-bottom: 1rem; font-size: .85rem; }
.my-listings-box--full { border-color: rgba(var(--c-danger-rgb), .6); }
.my-listings-rules { margin: 0 0 .5rem; color: rgba(var(--c-text-rgb), .8); line-height: 1.5; }
.my-listings-head { margin: .4rem 0 .25rem; }
.my-listings-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.my-listings-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.my-listings-state { font-size: .75rem; padding: .1rem .45rem; border-radius: 999px; }
.my-listings-state--live { background: rgba(46, 160, 67, .18); }
.my-listings-state--wait { background: rgba(210, 153, 34, .2); }

/* Batch 27: Delete on the listing, the board card and My posts */
.pf-delete{display:inline-block;position:relative}.pf-delete summary{list-style:none;display:inline-flex;cursor:pointer}.pf-delete summary::-webkit-details-marker{display:none}
.pf-delete-form{position:absolute;right:0;z-index:5;margin-top:.35rem;width:min(320px,80vw);background:var(--c-card);border:1px solid rgba(var(--c-text-rgb),.18);border-radius:8px;padding:.75rem;box-shadow:0 6px 20px rgba(0,0,0,.25);font-size:.82rem;line-height:1.45;color:var(--c-text)}
.pf-delete-form p{margin:0 0 .6rem}.pf-delete-form .btn{margin:.15rem .25rem .15rem 0}
.pf-delete--card summary{font-size:.75rem;background:none;border:none;color:inherit;padding:0}
/* the owner's bar on their listing */
.owner-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin:0 0 .75rem;font-size:.82rem}
/* My posts */
.mp-tabs{display:flex;gap:.4rem;margin:0 0 1rem;flex-wrap:wrap}
.mp-tab{padding:.4rem .85rem;border-radius:999px;border:1px solid rgba(var(--c-text-rgb),.18);text-decoration:none;color:inherit;font-size:.85rem}
.mp-tab--on{background:rgba(var(--c-accent-rgb),.12);border-color:rgba(var(--c-accent-rgb),.5)}
.mp-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.mp-item{padding:.8rem 1rem}
.mp-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.mp-title{font-weight:600;text-decoration:none;color:inherit;word-break:break-word}
.mp-meta{font-size:.75rem;color:rgba(var(--c-text-rgb),.68);margin:.3rem 0 .5rem}
.mp-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.mp-acts form{display:inline}
.mp-state{font-size:.72rem;padding:.12rem .5rem;border-radius:999px;white-space:nowrap}
.mp-state--live{background:rgba(46,160,67,.18)}.mp-state--wait{background:rgba(210,153,34,.2)}
.mp-state--hidden{background:rgba(110,118,129,.22)}.mp-state--ended,.mp-state--removed{background:rgba(var(--c-text-rgb),.08)}
/* Batch 27: choosing several photos in My Photo Library */
.pe-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .75rem}
.pe-bulk-tools{display:inline-flex;flex-wrap:wrap;gap:.5rem}
.pe-item{position:relative}
.pe-pick{position:absolute;top:.4rem;left:.4rem;z-index:2;width:1.9rem;height:1.9rem;border-radius:50%;background:rgba(0,0,0,.55);border:2px solid #fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pe-pick input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.pe-pick span{color:#fff;font-size:.8rem;opacity:0}
.pe-pick:has(input:checked){background:rgba(var(--c-accent-rgb),.95)}
.pe-pick:has(input:checked) span{opacity:1}
.pe-item--picked img{outline:3px solid rgba(var(--c-accent-rgb),.9);outline-offset:-3px}
.pe-grid--picking .pe-item-actions{opacity:.35;pointer-events:none}
.pe-pick[hidden],.pe-bulk-tools[hidden]{display:none}

/* Batch 27: a listing's photos and video, on the listing and on its edit page (from board/post.php) */
.pf-img{margin-bottom:.75rem;border-radius:8px;overflow:hidden;max-width:480px}
.pf-img img{width:100%;display:block;cursor:pointer}
.pf-img--nsfw{position:relative}
.pf-img--nsfw img{filter:blur(20px)}
.pf-img--nsfw.nsfw-ok img{filter:none}
.pf-library{margin:.6rem 0}
.pf-library summary{list-style:none;cursor:pointer;display:inline-flex}
.pf-media{margin:.4rem 0 .6rem}
.pf-photos-hidden{display:flex;gap:.5rem;align-items:center;border:1px dashed rgba(var(--c-text-rgb),.3);border-radius:8px;padding:.9rem;font-size:.85rem;color:rgba(var(--c-text-rgb),.8);max-width:480px}
.pf-photos-hidden i{font-size:1.4rem;opacity:.6}
.pf-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem;margin-bottom:.5rem}
.pf-photo{margin:0;position:relative;border-radius:8px;overflow:hidden;border:1px solid rgba(var(--c-text-rgb),.12);background:var(--c-side)}
.pf-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;cursor:zoom-in}
.pf-photo.is-locked img{cursor:default}
.pf-photo-lock{position:absolute;left:0;right:0;bottom:0;padding:.35rem .5rem;font-size:.7rem;background:rgba(0,0,0,.7);color:#fff}
.pf-photo-lock a{color:#fff;text-decoration:underline}
.pf-photo-wait{font-size:.7rem;background:rgba(var(--c-warn-rgb),.85);color:var(--c-on-accent);padding:.15rem .4rem}
.pf-video{margin-bottom:.5rem}
.pf-video video{width:100%;max-height:420px;background:var(--c-bg);border-radius:8px}
.pf-video-locked{display:flex;align-items:center;gap:.6rem;padding:1.2rem;border-radius:8px;border:1px dashed rgba(var(--c-text-rgb),.2);color:rgba(var(--c-text-rgb),0.68);font-size:.85rem}
.pf-video-locked a{color:rgba(var(--c-link-rgb),1)}
.pf-media-remove{background:none;border:none;color:rgba(var(--c-danger-rgb),1);font-size:.7rem;cursor:pointer;padding:.2rem .4rem;font-family:inherit}
.pf-media-add{border:1px solid rgba(var(--c-text-rgb),.12);border-radius:8px;padding:.75rem;margin-top:.5rem}
.pf-media-add-title{font-size:.85rem;color:var(--c-head);margin-bottom:.25rem}
.pf-media-add-note{font-size:.74rem;color:rgba(var(--c-text-rgb),0.68);margin:.2rem 0 .4rem;display:block}
.pf-media-form{display:flex;flex-direction:column;gap:.35rem;margin:.5rem 0;align-items:flex-start;font-size:.8rem}
.pf-consent{font-size:.78rem;color:rgba(var(--c-warn-rgb),0.95)}
.mp-acts .pf-delete summary{gap:.35rem;align-items:center;padding:.3rem .7rem;border:1px solid rgba(var(--c-danger-rgb),.45);border-radius:6px;font-size:.8rem;color:rgba(var(--c-danger-rgb),.95);background:none}
.pf-delete--card summary{gap:.3rem;align-items:center}
/* Batch 28: save this member */
.pv-save{padding:.9rem 1rem;margin:.75rem 0;display:flex;flex-direction:column;gap:.5rem}
.pv-save form{display:flex;flex-direction:column;gap:.4rem;align-items:flex-start}
.pv-save textarea{width:100%}
.pv-save-head{margin:0;font-size:.85rem}
.ov-link{margin:-.4rem 0 1rem;font-size:.85rem}
/* Batch 28: what this area is for */
.area-tip{display:flex;align-items:flex-start;gap:.7rem;padding:.7rem .9rem;margin:0 0 1rem;border-radius:10px;border:1px solid rgba(var(--c-info-rgb),.35);background:rgba(var(--c-info-rgb),.08);font-size:.84rem;line-height:1.5}
.area-tip > i{margin-top:.2rem;color:rgba(var(--c-info-rgb),.95)}
.area-tip p{margin:0;flex:1}
.area-tip .btn{flex-shrink:0}
/* Batch 29: seeing a listing's photos one after another */
.hc-gallery{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.hc-gallery[hidden]{display:none}
.hcg-img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:4px;user-select:none;-webkit-user-drag:none}
.hcg-close{position:fixed;top:12px;right:16px;background:none;border:none;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer;opacity:.85}
.hcg-nav{position:fixed;top:50%;transform:translateY(-50%);width:3rem;height:3rem;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.hcg-nav[hidden]{display:none}
.hcg-prev{left:12px}.hcg-next{right:12px}
.hcg-nav:hover,.hcg-close:hover{background:rgba(255,255,255,.28);opacity:1}
.hcg-count{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);color:#fff;font-size:.85rem;background:rgba(0,0,0,.5);padding:.2rem .7rem;border-radius:999px}
.hcg-count[hidden]{display:none}
[data-gallery-src]{cursor:zoom-in}
/* Batch 29: Browse Members, once shown: one line */
.mb-status{margin:0 0 1rem;font-size:.84rem}
.mb-status summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.5rem .8rem;border-radius:8px;border:1px solid rgba(var(--c-text-rgb),.14);color:rgba(var(--c-text-rgb),.8)}
.mb-status summary::-webkit-details-marker{display:none}
.mb-status-change{margin-left:auto;color:rgba(var(--c-link-rgb),.92);text-decoration:underline}
.mb-status[open] .mb-status-change{visibility:hidden}
.mb-status .mb-setup{margin-top:.5rem}
.back-link{display:inline-flex;align-items:center;gap:.4rem;color:rgba(var(--c-text-rgb),0.68);font-size:.82rem;text-decoration:none;margin-bottom:1rem}.back-link:hover{color:rgb(var(--c-text-rgb))}
/* Batch 30: membership status under the member's name (seen only by them) */
.sidebar-ms{display:inline-block;margin-top:.25rem;font-size:.68rem;padding:.12rem .5rem;border-radius:999px;text-decoration:none;border:1px solid transparent}
.sidebar-ms--active,.sidebar-ms--free{color:rgba(var(--c-text-rgb),.7);border-color:rgba(var(--c-text-rgb),.18)}
.sidebar-ms--ending,.sidebar-ms--cancelled{color:#9a6700;background:rgba(210,153,34,.16);border-color:rgba(210,153,34,.45)}
.sidebar-ms--overdue{color:#b42318;background:rgba(229,83,75,.14);border-color:rgba(229,83,75,.5)}
.sidebar-ms--expired{color:rgba(var(--c-text-rgb),.75);background:rgba(var(--c-text-rgb),.07);border-color:rgba(var(--c-text-rgb),.2)}
.ms-status{margin:.6rem 0 .2rem;padding:.6rem .8rem;border-radius:8px;font-size:.84rem;line-height:1.5;border:1px solid rgba(var(--c-text-rgb),.15)}
.ms-status .btn{margin-left:.4rem}
.ms-status--ending,.ms-status--cancelled{background:rgba(210,153,34,.12);border-color:rgba(210,153,34,.45)}
.ms-status--overdue{background:rgba(229,83,75,.1);border-color:rgba(229,83,75,.5)}
.ms-status--expired{background:rgba(var(--c-text-rgb),.05)}