:root{
  --paper:#f6f1e7;
  --paper-2:#efe7d8;
  --ink:#241f1c;
  --ink-soft:#5c534b;
  --accent:#b23a48;
  --accent-deep:#8c2a37;
  --line:#ddd2bd;
  --gold:#c98b3a;
  --shadow:0 14px 40px -18px rgba(40,28,20,.45);
  --display:"Fraunces",Georgia,serif;
  --body:"Instrument Sans",system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--body);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, #fbf6ec 0, transparent 60%),
    var(--paper);
  background-attachment:fixed;
}
a{color:inherit}
h1,h2{font-family:var(--display);font-weight:600;letter-spacing:-.01em;margin:0}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 26px;border-bottom:1px solid var(--line);
  background:rgba(246,241,231,.86);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:1000;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{
  color:var(--accent);font-size:1.5rem;line-height:1;
  transform:rotate(8deg);display:inline-block;
}
.brand-text{font-family:var(--display);font-weight:900;font-size:1.32rem}
.nav{display:flex;align-items:center;gap:18px}
.nav a{text-decoration:none;font-weight:500;font-size:.95rem}
.nav a:hover{color:var(--accent)}
.whoami{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem}

.cta{
  background:var(--accent);color:#fff;border:none;border-radius:999px;
  padding:9px 18px;font-family:var(--body);font-weight:600;font-size:.92rem;
  cursor:pointer;text-decoration:none;display:inline-block;transition:.15s;
}
.cta:hover{background:var(--accent-deep);transform:translateY(-1px)}
.cta.small{padding:6px 13px;font-size:.85rem}
.cta.block{display:block;text-align:center;margin-top:8px}
.ghost{
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;font-family:var(--body);font-weight:500;font-size:.9rem;
  cursor:pointer;text-decoration:none;color:var(--ink-soft);
}
.ghost:hover{border-color:var(--accent);color:var(--accent)}
.ghost.small{padding:6px 12px;font-size:.82rem}
.ghost.block{display:block;text-align:center;margin-top:18px;width:fit-content}

.switcher{position:relative}
.switcher-menu{
  display:none;position:absolute;right:0;top:120%;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:6px;min-width:160px;z-index:1001;
}
.switcher:hover .switcher-menu{display:block}
.switcher-menu a{display:block;padding:8px 12px;border-radius:8px;text-decoration:none;font-size:.9rem}
.switcher-menu a:hover{background:var(--paper-2)}

.avatar-sm,.avatar-lg{border-radius:50%;object-fit:cover;background:var(--gold);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:600}
.avatar-sm{width:30px;height:30px;font-size:.78rem}
.avatar-lg{width:84px;height:84px;font-size:1.6rem;font-family:var(--display)}

/* ---------- flash ---------- */
.flash{display:flex;flex-direction:column;gap:6px;max-width:920px;margin:14px auto 0;padding:0 22px}
.flash span{background:#fff;border-left:3px solid var(--gold);padding:10px 14px;border-radius:8px;font-size:.92rem;box-shadow:var(--shadow)}

/* ---------- hero ---------- */
.hero{max-width:1180px;margin:30px auto 14px;padding:0 26px}
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.02}
.hero h1::after{content:" Find each other.";color:var(--accent);font-style:italic}
.hero p{color:var(--ink-soft);font-size:1.08rem;margin:.5rem 0 0;max-width:46ch}

/* ---------- map shell ---------- */
.map-shell{
  max-width:1180px;margin:8px auto 50px;padding:0 26px;
  display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:stretch;
}
#map{height:74vh;min-height:520px;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow);z-index:1}
.panel{
  height:74vh;min-height:520px;background:#fff;border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px;border-bottom:1px solid var(--line)}
.panel-head h2{font-size:1.25rem}
.pin-list{overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.pin-list.hidden,.add-form.hidden{display:none}

.pin-card{
  display:block;text-decoration:none;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:13px 15px;transition:.15s;position:relative;
}
.pin-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow)}
.pin-card-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.pin-card-top strong{font-family:var(--display);font-size:1.02rem}
.pin-card-top span{color:var(--ink-soft);font-size:.78rem;white-space:nowrap}
.pin-card p{margin:.4rem 0;font-size:.9rem;color:var(--ink-soft);line-height:1.4}
.badge{position:absolute;top:12px;right:12px;background:var(--accent);color:#fff;font-size:.68rem;padding:2px 8px;border-radius:999px}

.kw{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.kw em{font-style:normal;background:var(--paper-2);border:1px solid var(--line);color:var(--ink-soft);
  font-size:.72rem;padding:2px 9px;border-radius:999px}

/* ---------- add form ---------- */
.add-form{overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:11px}
.add-form .hint,.hint{font-size:.82rem;color:var(--accent-deep);background:#fff5e9;border:1px dashed var(--gold);padding:8px 11px;border-radius:9px;margin:0}
.add-form hr{border:none;border-top:1px solid var(--line);margin:4px 0}
label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.86rem}
label small{font-weight:400;color:var(--ink-soft)}
input,textarea{
  font-family:var(--body);font-size:.95rem;color:var(--ink);
  border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:9px 11px;width:100%;
}
input:focus,textarea:focus{outline:none;border-color:var(--accent);background:#fff}
textarea{resize:vertical}
.row{display:flex;gap:11px}
.row>*{flex:1}

.empty{color:var(--ink-soft);font-size:.92rem;text-align:center;padding:30px 10px}

/* ---------- sheets (profile / detail / inbox) ---------- */
.sheet{max-width:680px;margin:36px auto 70px;padding:0 26px}
.sheet h1{font-size:clamp(1.9rem,4vw,2.6rem)}
.sub,.meta,.note{color:var(--ink-soft)}
.sub{margin:.3rem 0 22px}
.back{display:inline-block;margin-bottom:18px;text-decoration:none;color:var(--ink-soft);font-size:.9rem}
.back:hover{color:var(--accent)}

.form-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:24px;display:flex;flex-direction:column;gap:15px}
.photo-row{display:flex;align-items:center;gap:18px}
.file{font-size:.85rem}
.file input{padding:6px;font-size:.82rem;background:var(--paper)}

/* sighting card */
.sighting-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:28px;position:relative;
  background-image:radial-gradient(circle, var(--paper-2) 1px, transparent 1px);background-size:22px 22px;background-position:right top;
}
.sighting-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.sighting-head h1{font-size:1.8rem}
.when{color:var(--ink-soft);font-size:.85rem}
.seen-name{margin:.3rem 0 0;color:var(--ink-soft)}
.lead{font-size:1.12rem;line-height:1.5;margin:.9rem 0}
blockquote{margin:0 0 14px;padding:14px 18px;border-left:3px solid var(--accent);
  background:var(--paper);border-radius:0 12px 12px 0;font-family:var(--display);font-style:italic;font-size:1.05rem}
.meta{font-size:.78rem;margin-top:14px}

.note{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:18px}
.note.ok{border-left:3px solid var(--gold)}

.respond{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:24px;margin-top:20px}
.respond h2{font-size:1.4rem;margin-bottom:14px}
.respond form{display:flex;flex-direction:column;gap:13px}

.report{margin-top:24px;text-align:center}
.link-danger{background:none;border:none;color:var(--ink-soft);text-decoration:underline;cursor:pointer;font-size:.82rem;font-family:var(--body)}
.link-danger:hover{color:var(--accent)}

/* inbox */
.sheet section{margin-top:26px}
.sheet section h2{font-size:1.4rem;margin-bottom:12px}
.claim{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
.claim.accepted{border-left:4px solid var(--gold)}
.claim.declined{opacity:.6}
.claim-head{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.claim-head>div{display:flex;flex-direction:column;line-height:1.25}
.pill{margin-left:auto;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;
  padding:3px 11px;font-size:.74rem;color:var(--ink-soft);text-transform:capitalize}
.qa{margin:6px 0;font-size:.92rem;line-height:1.45}
.qa span{font-weight:600;color:var(--ink-soft);margin-right:4px}
.match-yes{color:#2e7d32;font-style:normal;font-size:.82rem}
.match-no{color:var(--ink-soft);font-style:normal;font-size:.82rem}
.reveal{background:#fff5e9;border:1px solid var(--gold);border-radius:10px;padding:10px 13px;font-size:.92rem;margin-top:8px}
.claim .row{margin-top:10px}
.claim .row form{flex:0}

/* leaflet popup */
.popup{min-width:200px}
.popup strong{font-family:var(--display);font-size:1.05rem;display:block}
.popup .when{display:block;color:var(--ink-soft);font-size:.78rem;margin:2px 0 6px}
.popup p{margin:6px 0;font-size:.88rem;line-height:1.4}
.leaflet-popup-content-wrapper{border-radius:14px}

@media(max-width:880px){
  .map-shell{grid-template-columns:1fr}
  #map{height:50vh;min-height:340px}
  .panel{height:auto;max-height:60vh}
}

/* ============ v2 additions ============ */
.foot{max-width:1180px;margin:0 auto;padding:26px;color:var(--ink-soft);font-size:.85rem;border-top:1px solid var(--line)}
.foot a{color:var(--ink-soft)}
.foot a:hover{color:var(--accent)}
.gold-link{color:var(--gold)!important;font-weight:600}
.prem{background:var(--gold);color:#fff;border-radius:50%;width:16px;height:16px;display:inline-flex;
  align-items:center;justify-content:center;font-size:.7rem;font-weight:700;margin-left:-8px;border:2px solid var(--paper)}

.sheet.narrow{max-width:440px}
.sheet.wide{max-width:1080px}
.alt{margin-top:18px;color:var(--ink-soft);font-size:.92rem;text-align:center}
.fineprint{font-size:.78rem;color:var(--ink-soft);margin:8px 0 0}
.center{text-align:center;align-items:center}
.inline{display:inline}
.prem-tag{color:var(--gold);font-family:var(--body);font-size:.7em;font-weight:700;letter-spacing:.04em}

.cf-turnstile{margin:2px 0}
.qr{width:190px;height:190px;border-radius:12px;border:1px solid var(--line)}
.secret{display:block;background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:8px 12px;margin:6px 0 16px;font-family:ui-monospace,monospace;letter-spacing:.08em}

/* settings */
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.setting-row:last-child{border-bottom:none}
.setting-row p{margin:.2rem 0 0}
.setting-row.danger strong{color:var(--accent-deep)}

/* tiers */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.tier{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow)}
.tier.premium{border:2px solid var(--gold);position:relative;background:linear-gradient(180deg,#fffaf0,#fff)}
.tier h3{font-family:var(--display);font-size:1.4rem;margin-bottom:12px}
.tier ul{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:9px}
.tier li{padding-left:22px;position:relative;font-size:.94rem}
.tier li::before{content:"✦";position:absolute;left:0;color:var(--gold)}
.tier .cta{width:100%;text-align:center}

/* admin */
.admin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:24px}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:2px}
.stat.gold{border-left:3px solid var(--gold)}
.stat .n{font-family:var(--display);font-size:1.9rem;font-weight:600;line-height:1}
.stat .l{font-size:.78rem;color:var(--ink-soft)}

.chart-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.chart-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow);margin-bottom:18px}
.chart-card h2{font-size:1.15rem;margin-bottom:14px}
.bars{display:flex;align-items:flex-end;gap:6px;height:140px}
.bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.bar{width:100%;background:var(--accent);border-radius:5px 5px 0 0;min-height:2px;transition:.3s}
.bar.gold-bar{background:var(--gold)}
.bl{font-size:.62rem;color:var(--ink-soft)}

.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl th{text-align:left;color:var(--ink-soft);font-weight:600;padding:7px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:7px 8px;border-bottom:1px solid var(--line)}

.prose h2{font-size:1.2rem;margin:22px 0 6px}
.prose p{color:var(--ink-soft);line-height:1.6;margin:0}

@media(max-width:760px){
  .tiers,.chart-row{grid-template-columns:1fr}
}

/* ============ v3 additions ============ */
/* report disclosure */
details.report{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
details.report summary{cursor:pointer;color:var(--ink-soft);font-size:.85rem;list-style:none}
details.report summary:hover{color:var(--accent)}
details.report form{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.check{flex-direction:row;align-items:center;gap:8px;font-weight:400;font-size:.88rem}
.check input{width:auto}

/* alerts page */
.alerts-shell{display:grid;grid-template-columns:1fr 320px;gap:18px;margin:14px 0 26px}
#amap{height:420px;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow);z-index:1}
.panel-side{display:flex;flex-direction:column;gap:14px}
.form-card.compact{padding:16px;gap:10px}
.mini-h{font-size:1.05rem;margin-top:4px}
.area-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 13px}
.area-row .sub{display:block;font-size:.78rem}
.match-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:8px}

/* moderation */
.mod-row{border:1px solid var(--line);border-radius:14px;padding:15px;margin-bottom:12px;background:var(--paper)}
.mod-meta{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.mod-reason{font-weight:600;margin:0 0 6px}
.mod-pin{font-size:.9rem;color:var(--ink-soft);margin:0 0 10px}
.mod-pin a{color:var(--accent)}
.hidden-pill{background:var(--accent);color:#fff;border-color:var(--accent)}
.mod-row .row{gap:8px}
.mod-row .row form{flex:0}

@media(max-width:760px){ .alerts-shell{grid-template-columns:1fr} }

/* ============ v4 additions (complaints/abuse) ============ */
.btn-danger{background:var(--accent-deep);color:#fff;border:none;border-radius:999px;
  padding:6px 14px;font-family:var(--body);font-weight:600;font-size:.85rem;cursor:pointer}
.btn-danger:hover{background:#6f1f29}
.btn-danger.small{padding:6px 13px;font-size:.82rem}

details.report-person{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
details.report-person summary{cursor:pointer;color:var(--ink-soft);font-size:.8rem;list-style:none}
details.report-person summary:hover{color:var(--accent)}
details.report-person form{display:flex;flex-direction:column;gap:8px;margin-top:10px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px}
.admin-head>div{display:flex;gap:8px;align-items:center}