/* Lonelihearts — the SpeedVideoDating look, with a real dark mode.
 *
 * The palette is lifted from svd.css so the two sites read as a family: light page
 * ground, dark navy header band, blue primary, gold accent, Inter, 14px radius.
 *
 * DARK MODE. Three states, in this precedence:
 *   [data-theme="dark"]   explicit choice  -> dark
 *   [data-theme="light"]  explicit choice  -> light, even on a dark device
 *   (absent)              follow the device
 * Every colour is a token redefined once in the dark block; nothing below the token
 * list hard-codes a colour, so the switch cannot half-apply.
 */

:root{
  --blue:#187EDA; --blue-lo:#0B4F8F; --blue-hi:#4FA3F0;

  --hdr:#061426; --hdr-2:#0B2038; --hdr-text:#FFFFFF;
  --hdr-muted:#A9C2DA; --hdr-line:rgba(255,255,255,.14);

  --bg:#F2F6FB; --bg-2:#E7EEF7; --card:#FFFFFF;
  --line:#DCE5EF; --line-2:#C4D2E2;
  --text:#0C2136; --muted:#4A6076; --dim:#6B8199;

  --gold:#E9C558; --gold-lo:#A87F1E; --gold-hi:#FFF0B8; --gold-ink:#2B2409;
  --good:#1E8E5A; --warn:#A9741B; --bad:#C0392B;

  --r:14px;
  --shadow:0 6px 20px rgba(12,33,54,.08);
  --shadow-lg:0 14px 40px rgba(12,33,54,.12);
  --wrap:1120px;
  color-scheme:light;
}

/* follow the device when the viewer has made no choice */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#070E18; --bg-2:#0C1724; --card:#111E2E;
    --line:#1E2F44; --line-2:#2A405A;
    --text:#E8F0F9; --muted:#9FB4CA; --dim:#7D93AA;
    --hdr:#040B14; --hdr-2:#0A1826;
    --blue:#4FA3F0; --blue-lo:#1A6CB8; --blue-hi:#7CC0FF;
    --good:#3BC98A; --warn:#E0A83C; --bad:#E8685A;
    --shadow:0 6px 20px rgba(0,0,0,.45);
    --shadow-lg:0 14px 40px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
/* and the explicit choice, which must win over the device */
:root[data-theme="dark"]{
  --bg:#070E18; --bg-2:#0C1724; --card:#111E2E;
  --line:#1E2F44; --line-2:#2A405A;
  --text:#E8F0F9; --muted:#9FB4CA; --dim:#7D93AA;
  --hdr:#040B14; --hdr-2:#0A1826;
  --blue:#4FA3F0; --blue-lo:#1A6CB8; --blue-hi:#7CC0FF;
  --good:#3BC98A; --warn:#E0A83C; --bad:#E8685A;
  --shadow:0 6px 20px rgba(0,0,0,.45);
  --shadow-lg:0 14px 40px rgba(0,0,0,.55);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:400 16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 16px}

/* ── header ─────────────────────────────────────────────────────────────── */
header.top{background:linear-gradient(180deg,var(--hdr),var(--hdr-2)); color:var(--hdr-text)}
header.top .wrap{display:flex; align-items:center; gap:18px; min-height:64px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:20px;
  color:var(--hdr-text); letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand .hh{color:var(--gold)}
/* the mark takes the brand's own colour for its outline, so it stays correct if the
   header ever changes shade; only the two ticks are fixed blue and gold */
.brand-mark{width:30px; height:30px; flex:0 0 auto; color:var(--hdr-text)}
.brand-name{white-space:nowrap}
@media (max-width:620px){ .brand{font-size:18px; gap:7px} .brand-mark{width:26px; height:26px} }
nav.main{display:flex; gap:4px; margin-left:auto; align-items:center; flex-wrap:wrap}
nav.main a{color:var(--hdr-muted); padding:8px 12px; border-radius:10px; font-weight:600;
  font-size:14px}
nav.main a:hover{background:rgba(255,255,255,.08); color:#fff; text-decoration:none}
nav.main a.on{background:rgba(255,255,255,.12); color:#fff}
.pill{display:inline-block; min-width:18px; padding:1px 6px; border-radius:999px;
  background:var(--bad); color:#fff; font-size:11px; font-weight:800; text-align:center;
  margin-left:6px; vertical-align:middle}

/* the theme switch. last in the nav, as on eBookYou. */
.themesw{display:inline-flex; background:rgba(255,255,255,.08); border-radius:999px;
  padding:3px; gap:2px; margin-left:8px}
.themesw button{all:unset; cursor:pointer; padding:5px 10px; border-radius:999px;
  font:600 12px Inter,sans-serif; color:var(--hdr-muted); line-height:1}
.themesw button[aria-pressed="true"]{background:var(--blue); color:#fff}

/* ── blocks ─────────────────────────────────────────────────────────────── */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:20px}
.card + .card{margin-top:16px}
h1{font-size:30px; line-height:1.2; letter-spacing:-.02em; margin:0 0 12px}
h2{font-size:21px; margin:28px 0 12px; letter-spacing:-.01em}
h3{font-size:16px; margin:18px 0 8px}
p{margin:0 0 12px}
.muted{color:var(--muted)}
.dim{color:var(--dim); font-size:14px}
main{padding:28px 0 60px}

.btn{display:inline-block; background:var(--blue); color:#fff; border:0;
  padding:11px 18px; border-radius:11px; font:700 15px Inter,sans-serif; cursor:pointer}
.btn:hover{background:var(--blue-lo); text-decoration:none}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--line-2)}
.btn.ghost:hover{background:var(--bg-2)}
.btn.bad{background:var(--bad)}
.btn.gold{background:var(--gold); color:var(--gold-ink)}
.btn.sm{padding:7px 12px; font-size:13px; border-radius:9px}

label{display:block; font-weight:600; font-size:14px; margin:14px 0 5px}
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line-2); border-radius:11px;
  background:var(--card); color:var(--text); font:400 15px Inter,sans-serif}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue-hi); border-color:var(--blue)}
textarea{min-height:110px; resize:vertical}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row > *{flex:1 1 200px}

.err{background:rgba(192,57,43,.1); border:1px solid var(--bad); color:var(--bad);
  padding:11px 14px; border-radius:11px; margin:0 0 14px; font-weight:600; font-size:14px}
.ok{background:rgba(30,142,90,.1); border:1px solid var(--good); color:var(--good);
  padding:11px 14px; border-radius:11px; margin:0 0 14px; font-weight:600; font-size:14px}
.note{background:var(--bg-2); border-left:3px solid var(--blue); padding:12px 14px;
  border-radius:0 10px 10px 0; margin:0 0 14px; font-size:14px}

/* ── swipe ──────────────────────────────────────────────────────────────── */
.swipe{max-width:420px; margin:0 auto}
.pcard{background:var(--card); border:1px solid var(--line); border-radius:18px;
  overflow:hidden; box-shadow:var(--shadow-lg)}
.pcard .ph{aspect-ratio:4/5; background:var(--bg-2); display:flex; align-items:center;
  justify-content:center; color:var(--dim); font-size:13px; overflow:hidden}
.pcard .ph img{width:100%; height:100%; object-fit:cover}
.pcard .meta{padding:16px}
.pcard .nm{font-weight:800; font-size:21px; letter-spacing:-.01em}
.swipe-acts{display:flex; gap:12px; margin-top:16px}
.swipe-acts form{flex:1}
.swipe-acts .btn{width:100%; padding:14px; font-size:16px}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px}

/* ── chat ───────────────────────────────────────────────────────────────── */
.msgs{display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow-y:auto;
  padding:4px}
.msg{max-width:74%; padding:9px 13px; border-radius:15px; font-size:15px;
  background:var(--bg-2); align-self:flex-start; word-wrap:break-word}
.msg.mine{background:var(--blue); color:#fff; align-self:flex-end}
.msg .t{display:block; font-size:11px; opacity:.65; margin-top:3px}
.sendrow{display:flex; gap:8px; margin-top:14px}
.sendrow input{flex:1}

/* ── tables / intel ─────────────────────────────────────────────────────── */
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line);
  vertical-align:top}
th{font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); background:var(--bg-2); position:sticky; top:0}
tbody tr:hover{background:var(--bg-2)}
.tscroll{overflow-x:auto; max-height:70vh; overflow-y:auto; border:1px solid var(--line);
  border-radius:var(--r)}

.tabs{display:flex; gap:4px; border-bottom:2px solid var(--line); margin:0 0 20px;
  flex-wrap:wrap}
.tabs a{padding:10px 15px; font-weight:700; font-size:14px; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-2px}
.tabs a:hover{color:var(--text); text-decoration:none}
.tabs a.on{color:var(--blue); border-bottom-color:var(--blue)}

.tag{display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px;
  font-weight:800; letter-spacing:.02em}
.tag.open{background:rgba(24,126,218,.15); color:var(--blue)}
.tag.OPEN{background:rgba(30,142,90,.15); color:var(--good)}
.tag.CAUTION{background:rgba(169,116,27,.15); color:var(--warn)}
.tag.BLOCK{background:rgba(192,57,43,.15); color:var(--bad)}
.tag.upheld{background:rgba(192,57,43,.15); color:var(--bad)}
.tag.rejected{background:var(--bg-2); color:var(--muted)}
.tag.escalated{background:rgba(233,197,88,.2); color:var(--gold-lo)}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px;
  margin:0 0 20px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:14px}
.stat b{display:block; font-size:26px; font-weight:800; letter-spacing:-.02em}
.stat span{font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase;
  letter-spacing:.04em}

details{border:1px solid var(--line); border-radius:11px; padding:10px 14px; margin:0 0 8px;
  background:var(--card)}
summary{cursor:pointer; font-weight:600; font-size:14px}
pre{background:var(--bg-2); padding:12px; border-radius:10px; overflow-x:auto;
  font:400 12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap}

footer.bot{border-top:1px solid var(--line); background:var(--bg-2); padding:26px 0;
  font-size:14px; color:var(--muted)}
footer.bot a{color:var(--muted); text-decoration:underline}
footer.bot .wrap{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
.langpick{display:inline-flex; gap:7px; align-items:center}
.langpick label{margin:0; font-size:13px; font-weight:600; color:var(--muted)}
.langpick select{width:auto; padding:5px 8px; font-size:13px; border-radius:9px;
  background:var(--card); color:var(--text); border:1px solid var(--line-2)}
.langpick noscript a{margin-inline-end:4px}

.banner{background:var(--gold); color:var(--gold-ink); text-align:center; padding:7px;
  font-weight:700; font-size:13px}

/* ── country + language floater ─────────────────────────────────────────────
   Centred, cannot be dismissed. Deliberately: the country decides which rules in the
   jurisdictions table apply to somebody, so it is asked plainly rather than guessed from
   an IP. The frame follows eBookYou's — navy header, gold rule under it — in this site's
   own palette rather than eBookYou's blues. */
.cbox-wrap{position:fixed; inset:0; z-index:2000; display:flex; align-items:center;
  justify-content:center; padding:16px; background:rgba(0,0,0,.72)}
.cbox-wrap[hidden]{display:none}
body.cbox-open{overflow:hidden}
.cbox{position:relative; width:min(460px,100%); max-height:calc(100vh - 32px);
  overflow:auto; background:var(--card); color:var(--text); border-radius:var(--r);
  box-shadow:0 24px 50px rgba(0,0,0,.45)}
.cbox-head{background:linear-gradient(135deg,var(--hdr),var(--hdr-2));
  padding:15px 22px 13px; border-bottom:2px solid var(--gold);
  border-radius:var(--r) var(--r) 0 0}
.cbox-head .wel{display:block; color:var(--gold); font-weight:800; font-size:17px}
.cbox-head .sub{display:block; color:var(--hdr-muted); font-size:13px; margin-top:2px}
.cbox-body{padding:18px 22px 20px}
.cbox h2{font-size:19px; margin:0 0 6px}
.cbox p{font-size:14px; color:var(--muted); margin:0 0 12px}
.cbox .now{font-size:19px; font-weight:700; color:var(--text); margin:6px 0 14px}
.cbox .row2{display:flex; gap:10px; flex-wrap:wrap}
.cbox .row2 .btn{flex:1 1 150px; text-align:center}
.cbox .sugg{width:100%; margin:0 0 4px; text-align:left}
.cbox .fine{font-size:12px; color:var(--dim); margin:14px 0 0}
.cbox input[type=search]{width:100%; margin:10px 0 6px}
.cbox .list{max-height:190px; overflow:auto; border:1px solid var(--line);
  border-radius:10px}
.cbox .list button{display:flex; gap:9px; width:100%; text-align:left;
  background:var(--card); border:0; border-bottom:1px solid var(--line);
  padding:9px 11px; font:400 14px Inter,sans-serif; cursor:pointer; color:var(--text)}
.cbox .list button:hover,.cbox .list button:focus{background:var(--bg-2)}
.cbox .lang-q{font-size:20px; font-weight:800; color:var(--text); margin:0 0 4px}
.cbox .lang-en{font-size:14px; color:var(--muted)}
[dir=rtl] .cbox .list button{text-align:right}

/* ── install bar ────────────────────────────────────────────────────────────
   Fixed to the foot of the page, as on Amapianos and eBookYou. It is `hidden` in the
   markup and only revealed by the script once the browser has actually said the site is
   installable, so it never offers an install that cannot happen. `has-pwa-bar` on <body>
   adds the padding that stops it covering the footer. */
.pwa-bar{position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:linear-gradient(180deg,var(--hdr-2),var(--hdr)); color:var(--hdr-text);
  border-top:1px solid var(--hdr-line); box-shadow:0 -6px 24px rgba(0,0,0,.3)}
.pwa-bar[hidden]{display:none}
.pwa-bar-in{display:flex; align-items:center; gap:14px; padding:12px 16px;
  flex-wrap:wrap}
.pwa-icon{flex:0 0 auto; display:flex; align-items:center}
.pwa-text{flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:1px}
.pwa-text strong{font-size:15px; font-weight:700}
.pwa-sub{font-size:13px; color:var(--hdr-muted)}
.pwa-actions{flex:0 0 auto; display:flex; gap:8px}
.pwa-actions .btn.ghost{color:var(--hdr-muted); border-color:var(--hdr-line)}
.pwa-actions .btn.ghost:hover{background:rgba(255,255,255,.08); color:#fff}
body.has-pwa-bar{padding-bottom:92px}
@media (max-width:620px){
  .pwa-actions{width:100%; }
  .pwa-actions .btn{flex:1}
  body.has-pwa-bar{padding-bottom:140px}
}

@media (max-width:620px){
  h1{font-size:25px}
  header.top .wrap{min-height:56px}
  nav.main{width:100%; margin-left:0; order:3}
  nav.main a{padding:7px 9px; font-size:13px}
  .msg{max-width:86%}
}