/* PocketLust — local prototype styles */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --bg:#141020;
  --bg2:#1a1428;
  --card:#1f1732;
  --card2:#271d3d;
  --line:#382b52;
  --text:#efe9f7;
  --mut:#9d92b5;
  --acc:#ff5c8a;
  --acc2:#b44bf0;
  --gold:#f5c04e;
  --green:#4ade80;
  --red:#f47171;
}
html,body{ height:100%; }
body{
  background:#0b0814;
  color:var(--text);
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.app{
  max-width:480px; margin:0 auto; min-height:100vh; position:relative;
  background:radial-gradient(120% 60% at 50% 0%, #241a3d 0%, var(--bg) 55%, #0e0a1a 100%);
  box-shadow:0 0 60px rgba(0,0,0,.6);
  display:flex; flex-direction:column;
}
.hidden{ display:none !important; }

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px;
  background:linear-gradient(rgba(20,16,32,.96), rgba(20,16,32,.85));
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.logo{ font-size:22px; font-weight:800; letter-spacing:.5px; display:flex; align-items:center; gap:8px; }
.logomark{ width:26px; height:26px; flex-shrink:0; }
.logo span{
  background:linear-gradient(90deg,var(--acc),var(--acc2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pill{
  font-size:10px; font-weight:700; letter-spacing:1px;
  padding:4px 8px; border-radius:999px; border:1px solid var(--line); color:var(--mut);
}
.pill.demo{ border-color:#5a4a80; }

.sitebanner{
  background:rgba(245,192,78,.13); border-bottom:1px solid rgba(245,192,78,.4);
  color:#f0d9a8; font-size:12.5px; font-weight:600; line-height:1.45;
  padding:9px 16px; text-align:center;
}
body.light .sitebanner{ background:rgba(196,150,42,.12); color:#7a6222; }

/* Panels */
.panel{ flex:1; padding:14px 14px 90px; overflow-y:auto; }

/* Search + filters */
.searchbar{ display:flex; gap:8px; margin-bottom:10px; }
.searchbar input{
  flex:1; background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:10px 14px; color:var(--text); font-size:14px; outline:none;
}
.searchbar input:focus{ border-color:var(--acc2); }
.filter-panel{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:12px; margin-bottom:12px;
}
.frow{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.frow:last-child{ margin-bottom:0; }
.frow label{ font-size:12px; font-weight:700; color:var(--mut); min-width:74px; width:auto; flex-shrink:0; letter-spacing:.3px; }
.frow select{
  flex:1; background:var(--card2); color:var(--text); border:1px solid var(--line);
  border-radius:10px; padding:7px 10px; font-size:13px;
}
.frow input[type="number"]{
  width:64px; background:var(--card2); color:var(--text); border:1px solid var(--line);
  border-radius:10px; padding:7px 8px; font-size:13px; text-align:center;
}
.frow input[type="range"]{ flex:1; accent-color:var(--acc); }
.frow .dash{ color:var(--mut); }
.dist-label{ font-size:12.5px; color:var(--mut); width:74px; text-align:right; }
.count-line{ font-size:12px; color:var(--mut); margin:2px 2px 8px; }
.filters select{
  background:var(--card); color:var(--text); border:1px solid var(--line);
  border-radius:10px; padding:7px 10px; font-size:13px;
}
.chip-toggle{
  background:var(--card); color:var(--mut); border:1px solid var(--line);
  border-radius:999px; padding:7px 12px; font-size:13px; cursor:pointer;
}
.chip-toggle.on{ color:#fff; border-color:var(--acc); background:rgba(255,92,138,.12); }

/* Browse grid */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.card{
  background:linear-gradient(var(--card), var(--bg2));
  border:1px solid var(--line); border-radius:16px; padding:12px;
  cursor:pointer; transition:transform .08s ease;
}
.card:active{ transform:scale(.97); }
.card .avatar{ margin:0 auto 8px; }
.card .handle{ font-weight:700; font-size:14px; text-align:center; display:flex; align-items:center; justify-content:center; gap:4px; }
.card .meta{ color:var(--mut); font-size:12px; text-align:center; margin-top:3px; }
.card .typechip{ margin:8px auto 0; }
.empty{ color:var(--mut); text-align:center; padding:40px 20px; font-size:14px; line-height:1.6; }

/* Avatars */
.avatar{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:20px; color:rgba(255,255,255,.92);
  position:relative; flex-shrink:0;
  border:2px solid rgba(255,255,255,.12);
}
.avatar.sm{ width:44px; height:44px; font-size:15px; }
.avatar.xs{ width:26px; height:26px; font-size:10px; border-width:1.5px; }
.attrow{ display:flex; align-items:center; gap:4px; margin-top:10px; }
.attrow .alabel{ font-size:11.5px; color:var(--mut); font-weight:700; margin-right:4px; }
.author-toggle{ display:flex; gap:4px; align-items:center; }
.author-toggle button{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); color:var(--mut); font-weight:800; font-size:13px; cursor:pointer;
}
.author-toggle button.on{ border-color:var(--acc); color:#fff; background:rgba(255,92,138,.15); }
.avatar.lg{ width:88px; height:88px; font-size:28px; }
.online-dot{
  position:absolute; right:2px; bottom:2px; width:12px; height:12px;
  background:var(--green); border-radius:50%; border:2px solid var(--bg);
}

/* Badges */
.vbadge{ font-size:12px; }
.vbadge.v1{ color:var(--green); }
.vbadge.v2{ color:var(--gold); }
.vcount{
  display:inline-block; font-size:11.5px; font-weight:800; padding:2px 8px; border-radius:999px;
  background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.4); color:#a9e8c4; vertical-align:middle;
}
.typechip{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.4px;
  padding:3px 9px; border-radius:999px; background:rgba(180,75,240,.14);
  border:1px solid rgba(180,75,240,.4); color:#d9b6ff;
}
.typechip.single{ background:rgba(255,92,138,.12); border-color:rgba(255,92,138,.4); color:#ffb3c8; }

/* Section titles */
.sect{ font-size:13px; font-weight:700; letter-spacing:1.2px; color:var(--mut); margin:18px 2px 10px; text-transform:uppercase; }

/* Sheet (profile detail) */
.sheet{ position:fixed; inset:0; z-index:40; display:flex; align-items:flex-end; justify-content:center; }
.sheet.top{ z-index:70; } /* report sheet must sit above the chat overlay */
.evrow{
  font-size:12px; color:#c9bde4; background:var(--card2); border:1px solid var(--line);
  border-radius:8px; padding:6px 9px; margin-top:5px; line-height:1.4;
}
.evrow b{ color:#e8dff5; }
.sheet-backdrop{ position:absolute; inset:0; background:rgba(5,3,10,.7); }
.sheet-body{
  position:relative; width:100%; max-width:480px; max-height:88vh; overflow-y:auto;
  background:linear-gradient(#2a2044, var(--bg));
  border-radius:22px 22px 0 0; border:1px solid var(--line); border-bottom:none;
  padding:20px 18px 30px; animation:up .18s ease;
}
@keyframes up{ from{ transform:translateY(40px); opacity:.4; } to{ transform:none; opacity:1; } }
.sheet-top{ display:flex; gap:14px; align-items:center; }
.sheet-top .info{ flex:1; min-width:0; }
.sheet-top .handle{ font-size:19px; font-weight:800; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sheet-top .meta{ color:var(--mut); font-size:13px; margin-top:4px; }
.kebab{
  background:var(--card); border:1px solid var(--line); color:var(--mut);
  width:36px; height:36px; border-radius:50%; font-size:18px; cursor:pointer; flex-shrink:0;
}
.tagline{ font-size:15px; font-style:italic; color:#d8cdee; margin:14px 0 4px; }
.bio{ font-size:14px; line-height:1.55; color:#cfc5e4; margin-top:8px; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.tag{
  font-size:12px; padding:5px 10px; border-radius:999px;
  background:var(--card2); border:1px solid var(--line); color:#c9bde4;
}
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.gtile{
  aspect-ratio:1; border-radius:12px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.55); font-size:12px; font-weight:600; overflow:hidden;
}
.gtile img{ width:100%; height:100%; object-fit:cover; display:block; }
.gtile.locked{ background:repeating-linear-gradient(45deg, #221a35, #221a35 8px, #1c1530 8px, #1c1530 16px); color:var(--mut); flex-direction:column; gap:4px; }
.gtile.locked .lock{ font-size:18px; }
.gtile.frlocked{ background:repeating-linear-gradient(45deg, #1a2a24, #1a2a24 8px, #16241f 8px, #16241f 16px); color:#7dc9a2; flex-direction:column; gap:4px; border-color:rgba(74,222,128,.3); }
.gtile.fropen{ border-color:rgba(74,222,128,.45); color:#a9e8c4; }
.gtile.privopen{ border-color:rgba(255,92,138,.5); color:#ffc3d4; }
.gtile.veilt{ position:relative; }
.gtile.veilt .vfog{
  position:absolute; inset:0; border-radius:11px;
}
.gtile.veilt .vlabel{
  position:relative; z-index:2; font-size:10.5px; font-weight:800; letter-spacing:.4px;
  color:rgba(255,255,255,.85); text-shadow:0 1px 6px rgba(0,0,0,.6); text-align:center; line-height:1.4;
}
.veilbox{
  background:rgba(122,140,255,.07); border:1px solid rgba(122,140,255,.3);
  border-radius:14px; padding:12px 14px; margin-top:10px; font-size:13px; line-height:1.6;
}
.veilbox .vstep{ color:var(--mut); }
.veilbox .vstep.on{ color:var(--green); }
.ptile .vis.vlg{ color:#aeb9ff; border-color:rgba(122,140,255,.55); }
.gtile img.veilimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.avwrap{ cursor:pointer; }
.ptile .mkav{
  position:absolute; left:5px; top:5px; font-size:13px; line-height:1; padding:3px 6px; border-radius:999px;
  background:rgba(20,16,32,.65); color:#cfc5e4; border:1px solid var(--line); cursor:pointer; backdrop-filter:blur(4px);
}
.ptile .mkav.on{ color:var(--gold); border-color:rgba(240,200,90,.55); cursor:default; }
.nearstrip{ display:flex; gap:10px; overflow-x:auto; padding:4px 2px 10px; }
.nearcard{
  flex:0 0 auto; width:88px; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  background:var(--card2); border:1px solid var(--line); border-radius:14px; padding:10px 6px; cursor:pointer;
}
.nearcard .nname{ font-size:11.5px; font-weight:700; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nearcard .ndist{ font-size:10.5px; color:var(--acc); font-weight:800; }
.actions{ display:flex; gap:10px; margin-top:18px; }
.btn{
  flex:1; padding:13px; border-radius:14px; font-size:15px; font-weight:700;
  border:none; cursor:pointer; transition:transform .08s;
}
.btn:active{ transform:scale(.97); }
.btn.primary{
  background:linear-gradient(90deg,var(--acc),var(--acc2)); color:#fff;
  box-shadow:0 4px 18px rgba(255,92,138,.25);
}
.btn.ghost{ background:var(--card); color:var(--text); border:1px solid var(--line); }
.btn.small{ flex:none; padding:9px 14px; font-size:13px; }
.btn.danger{ background:rgba(244,113,113,.12); color:var(--red); border:1px solid rgba(244,113,113,.4); }
.btn:disabled{ opacity:.5; cursor:default; }
.menu-row{ display:flex; gap:8px; margin-top:14px; }
.request-line{ font-size:12px; color:var(--mut); margin-top:8px; }

/* Feed */
.newscard{
  background:rgba(245,192,78,.07); border:1px solid rgba(245,192,78,.3);
  border-radius:14px; padding:11px 13px; margin-bottom:9px;
}
.newscard .ntitle{ font-size:13.5px; font-weight:800; color:#f0d9a8; }
.newscard .ntext{ font-size:12.5px; color:#cbbfa4; margin-top:4px; line-height:1.5; }
.newscard .ndate{ font-size:10.5px; color:var(--mut); float:right; }
.feedcard{
  background:linear-gradient(var(--card), var(--bg2)); border:1px solid var(--line);
  border-radius:14px; padding:11px 13px; margin-bottom:9px;
}
.feedcard .fhead{ display:flex; align-items:center; gap:9px; }
.feedcard .fname{ font-size:13.5px; font-weight:800; cursor:pointer; }
.feedcard .ftime{ font-size:11px; color:var(--mut); margin-left:auto; flex-shrink:0; }
.feedcard .ftext{ font-size:13.5px; color:#d8cdee; margin-top:8px; line-height:1.5; }
.feedcard .ffoot{ margin-top:8px; display:flex; justify-content:flex-end; }
.composer{ display:flex; gap:8px; margin-bottom:12px; }
.composer input{
  flex:1; background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:10px 15px; color:var(--text); font-size:13.5px; outline:none;
}
.composer button{
  background:linear-gradient(90deg,var(--acc),var(--acc2)); color:#fff; border:none;
  border-radius:999px; padding:0 16px; font-weight:700; cursor:pointer;
}

/* Fresh faces strip */
.fresh{ display:flex; gap:10px; overflow-x:auto; padding:4px 2px 10px; }
.fresh .fcard{
  flex:0 0 auto; width:78px; text-align:center; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:9px 4px;
}
.fresh .fcard .avatar{ margin:0 auto 5px; }
.fresh .fcard .fn{ font-size:10.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fresh .fcard .fnew{ font-size:9px; font-weight:800; color:var(--green); letter-spacing:.5px; }

/* Admirers */
.maskname{ letter-spacing:2px; color:var(--mut); }
.supchip{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.5px;
  background:rgba(92,214,255,.1); border:1px solid rgba(92,214,255,.4); color:#8fdcff;
  border-radius:999px; padding:2px 8px;
}

/* Trending */
.trendgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.trendcard{
  background:linear-gradient(var(--card), var(--bg2)); border:1px solid var(--line);
  border-radius:16px; overflow:hidden;
}
.trendcard .timg{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.6); font-size:12px; font-weight:700; position:relative; cursor:pointer;
}
.trendcard .timg img{ width:100%; height:100%; object-fit:cover; display:block; }
.trendcard .rank{
  position:absolute; left:7px; top:7px; font-size:15px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.trendcard .clip{
  position:absolute; right:7px; top:7px; font-size:9.5px; font-weight:800; letter-spacing:.6px;
  background:rgba(10,8,18,.7); border:1px solid var(--line); color:#8fdcff;
  border-radius:999px; padding:2px 7px;
}
.trendcard .tfoot{ display:flex; align-items:center; gap:6px; padding:8px 10px; }
.trendcard .towner{ flex:1; min-width:0; font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.likebtn{
  background:none; border:1px solid var(--line); color:var(--mut); border-radius:999px;
  padding:4px 10px; font-size:12.5px; font-weight:700; cursor:pointer; flex-shrink:0;
}
.likebtn.on{ color:#ff6b95; border-color:rgba(255,92,138,.55); background:rgba(255,92,138,.12); }

/* Meets */
.event{
  background:linear-gradient(var(--card), var(--bg2));
  border:1px solid var(--line); border-radius:16px; padding:14px; margin-bottom:10px;
}
.event .etitle{ font-weight:800; font-size:15px; }
.event .emeta{ color:var(--mut); font-size:12.5px; margin-top:4px; }
.event .edesc{ font-size:13.5px; color:#cfc5e4; margin-top:8px; line-height:1.5; }
.event .efoot{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.event .count{ font-size:12.5px; color:var(--mut); }
.venue{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.6px; padding:3px 8px; border-radius:999px; background:rgba(245,192,78,.1); border:1px solid rgba(245,192,78,.35); color:var(--gold); margin-left:6px; }

/* Events calendar */
.calhead{ display:flex; align-items:center; justify-content:space-between; margin:4px 2px 10px; }
.calhead .cmon{ font-size:15px; font-weight:800; }
.calhead button{
  background:var(--card); border:1px solid var(--line); color:var(--text);
  border-radius:10px; width:34px; height:34px; font-size:16px; cursor:pointer;
}
.calgrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.caldow{ text-align:center; font-size:10px; font-weight:800; color:var(--mut); letter-spacing:.5px; padding:2px 0; }
.calday{
  aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  font-size:13px; color:var(--text); position:relative; cursor:default;
}
.calday.blank{ background:none; border:none; }
.calday.has{ cursor:pointer; border-color:rgba(255,92,138,.45); }
.calday.has:active{ transform:scale(.94); }
.calday.today{ border-color:var(--gold); color:var(--gold); font-weight:800; }
.calday.sel{ background:rgba(255,92,138,.15); border-color:var(--acc); font-weight:800; }
.calday .dots{ display:flex; gap:2px; margin-top:2px; }
.calday .edot{ width:5px; height:5px; border-radius:50%; background:var(--acc); }
.calday .edot.mine{ background:var(--gold); }

/* Chats */
.subtabs{ display:flex; gap:8px; margin-bottom:12px; }
.subtabs button{
  flex:1; background:var(--card); border:1px solid var(--line); color:var(--mut);
  border-radius:12px; padding:9px 0; font-size:13.5px; font-weight:700; cursor:pointer;
}
.subtabs button.on{ color:#fff; border-color:var(--acc); background:rgba(255,92,138,.12); }
.roomcard{
  background:linear-gradient(var(--card), var(--bg2)); border:1px solid var(--line);
  border-radius:16px; padding:13px 14px; margin-bottom:10px; cursor:pointer;
}
.roomcard:active{ transform:scale(.985); }
.roomcard .rtop{ display:flex; align-items:center; gap:8px; }
.roomcard .rname{ font-weight:800; font-size:15px; flex:1; }
.roomcard .rchip{
  font-size:10px; font-weight:800; letter-spacing:.6px; padding:3px 8px; border-radius:999px;
  background:rgba(92,214,255,.1); border:1px solid rgba(92,214,255,.35); color:#8fdcff;
}
.roomcard .rdesc{ font-size:13px; color:var(--mut); margin-top:5px; line-height:1.45; }
.roomcard .rcount{ font-size:12px; color:var(--green); margin-top:7px; font-weight:700; }
.msg .who{ display:block; font-size:11px; font-weight:800; margin-bottom:3px; opacity:.9; }
.msg.sys{
  align-self:center; max-width:92%; text-align:center; font-size:12px; line-height:1.5;
  background:rgba(245,192,78,.08); border:1px solid rgba(245,192,78,.3); color:#e8d9c4;
  border-radius:12px; padding:7px 12px;
}
.thread{
  display:flex; gap:12px; align-items:center; padding:12px 10px;
  border-bottom:1px solid rgba(56,43,82,.5); cursor:pointer; border-radius:12px;
}
.thread:active{ background:var(--card); }
.thread .tinfo{ flex:1; min-width:0; }
.thread .tname{ font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:5px; }
.thread .tlast{ color:var(--mut); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.thread .tdot{ width:9px; height:9px; background:var(--acc); border-radius:50%; flex-shrink:0; }

/* Chat view */
.chatview{ position:fixed; inset:0; z-index:50; max-width:480px; margin:0 auto; background:var(--bg); display:flex; flex-direction:column; }
.chat-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--bg2); }
.chat-head .back{ background:none; border:none; color:var(--text); font-size:26px; cursor:pointer; line-height:1; padding:0 6px; }
.chat-head-info{ display:flex; align-items:center; justify-content:center; gap:10px; font-weight:700; flex:1; min-width:0; cursor:pointer; }
.chat-rate{
  display:flex; align-items:center; gap:8px; padding:7px 14px;
  background:var(--bg2); border-bottom:1px solid var(--line);
  font-size:11.5px; color:var(--mut);
}
.chat-rate .hearts{ display:flex; gap:2px; }
.chat-rate .hearts button{
  background:none; border:none; font-size:16px; cursor:pointer; padding:0 2px;
  color:#4a3d63; line-height:1;
}
.chat-rate .hearts button.on{ color:#ff6b95; }
.trating{ font-size:11px; color:#ff6b95; letter-spacing:1px; margin-left:4px; }
.tnote{ font-size:11px; margin-left:3px; }
.chat-note{
  padding:8px 14px 10px; background:var(--bg2); border-bottom:1px solid var(--line);
}
.chat-note textarea, .privnote-edit textarea{
  width:100%; height:56px; background:var(--card); border:1px solid #5560a8;
  border-radius:10px; padding:8px 11px; color:var(--text); font-size:13px;
  outline:none; font-family:inherit; resize:none;
}
.chat-note .nfoot, .privnote-edit .nfoot{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.chat-note .nfoot span, .privnote-edit .nfoot span{ font-size:11px; color:var(--mut); flex:1; }
.privnote{
  background:rgba(107,120,255,.08); border:1px solid rgba(107,120,255,.35);
  border-radius:12px; padding:9px 12px; margin-top:12px; cursor:pointer;
}
.privnote .ptitle{ font-size:11px; font-weight:800; letter-spacing:.5px; color:#a9b4ff; }
.privnote .ptext{ font-size:13px; color:#cdd3f5; margin-top:4px; line-height:1.5; white-space:pre-wrap; }
.chat-msgs{ flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:8px; }
.msg{ max-width:78%; padding:10px 13px; border-radius:16px; font-size:14.5px; line-height:1.45; }
.msg.me{ align-self:flex-end; background:linear-gradient(90deg,#e0447a,#a13fd8); color:#fff; border-bottom-right-radius:5px; }
.msg.them{ align-self:flex-start; background:var(--card2); border:1px solid var(--line); border-bottom-left-radius:5px; }
.msg.typing{ color:var(--mut); font-style:italic; }
.chat-input{ display:flex; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg2); }
.chat-input input{
  flex:1; background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:11px 16px; color:var(--text); font-size:14.5px; outline:none;
}
.chat-input button{
  background:linear-gradient(90deg,var(--acc),var(--acc2)); color:#fff; border:none;
  border-radius:999px; padding:0 18px; font-weight:700; cursor:pointer;
}

/* Me tab */
.mecard{
  background:linear-gradient(var(--card), var(--bg2)); border:1px solid var(--line);
  border-radius:18px; padding:16px; display:flex; gap:14px; align-items:center;
}
.mecard .info{ flex:1; }
.mecard .handle{ font-weight:800; font-size:17px; display:flex; gap:6px; align-items:center; }
.mecard .meta{ color:var(--mut); font-size:13px; margin-top:3px; }
.panelbox{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:14px; margin-bottom:10px;
}
.panelbox h4{ font-size:14px; margin-bottom:6px; }
.panelbox p{ font-size:13px; color:var(--mut); line-height:1.55; }
.vrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.vrow .vlab{ font-size:13.5px; }
.blocked-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(56,43,82,.5); font-size:14px; }
.footer-note{ color:#6d6288; font-size:11.5px; text-align:center; margin-top:24px; line-height:1.6; }

/* Bottom nav */
.bottomnav{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px; z-index:30;
  display:flex; background:rgba(18,14,30,.97); backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-btn{
  flex:1; background:none; border:none; color:var(--mut); font-size:10.5px; font-weight:600;
  padding:9px 0 10px; cursor:pointer; display:flex; flex-direction:column; gap:3px; align-items:center;
  position:relative; min-width:0;
}
.nav-btn .ico{ font-size:16px; }
.nav-btn.active{ color:#fff; }
.nav-btn.active .ico{
  background:linear-gradient(90deg,var(--acc),var(--acc2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.badge{
  position:absolute; top:4px; right:calc(50% - 22px);
  background:var(--acc); color:#fff; font-size:10px; font-weight:800;
  min-width:16px; height:16px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* Onboarding */
.onboard{
  position:fixed; inset:0; z-index:60; background:radial-gradient(120% 70% at 50% 0%, #2b1f4a 0%, #120d20 60%);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.ob-card{
  width:100%; max-width:420px; background:linear-gradient(#2a2044, #191330);
  border:1px solid var(--line); border-radius:22px; padding:26px 22px;
}
.ob-card h1{ font-size:26px; margin-bottom:6px; }
.ob-card h1 span{ background:linear-gradient(90deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ob-card .sub{ color:var(--mut); font-size:14px; line-height:1.55; margin-bottom:18px; }
.ob-card label{ display:block; font-size:12.5px; font-weight:700; color:var(--mut); margin:14px 0 6px; letter-spacing:.4px; }
.ob-card input, .ob-card select, .ob-card textarea{
  width:100%; background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:11px 13px; color:var(--text); font-size:14.5px; outline:none; font-family:inherit;
}
.ob-card textarea{ resize:none; height:74px; }
.typegrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.typegrid button{
  background:var(--card); border:1px solid var(--line); color:var(--text);
  border-radius:12px; padding:11px 6px; font-size:13.5px; cursor:pointer;
}
.typegrid button.on{ border-color:var(--acc); background:rgba(255,92,138,.12); }
.tagpick{ display:flex; flex-wrap:wrap; gap:7px; }
.tagpick button{
  background:var(--card); border:1px solid var(--line); color:#c9bde4;
  border-radius:999px; padding:7px 12px; font-size:12.5px; cursor:pointer;
}
.tagpick button.on{ border-color:var(--acc2); background:rgba(180,75,240,.15); color:#fff; }
.ob-note{ font-size:11.5px; color:#6d6288; margin-top:14px; line-height:1.5; text-align:center; }
.ob-dots{ display:flex; gap:6px; justify-content:center; margin-bottom:16px; }
.ob-dots span{ width:7px; height:7px; border-radius:50%; background:#3a2e55; }
.ob-dots span.on{ background:var(--acc); }
.pledgerow{
  display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:#d8cdee;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:11px 13px; margin-top:8px; line-height:1.5;
}
.pledgerow .pico{ font-size:16px; flex-shrink:0; }
.gsrow{ display:flex; align-items:center; gap:9px; padding:6px 0; font-size:13.5px; }
.gsrow .gtick{ width:20px; text-align:center; flex-shrink:0; }
.gsrow.done{ color:var(--mut); text-decoration:line-through; }
.gsrow.act{ cursor:pointer; }
.gsrow.act:active{ opacity:.7; }
.gsrow .garrow{ margin-left:auto; color:var(--acc); font-size:16px; font-weight:800; }

/* Meet rules */
.rulerow{
  display:flex; align-items:center; gap:9px; font-size:13.5px; color:#e8d9c4;
  background:rgba(245,192,78,.06); border:1px solid rgba(245,192,78,.25);
  border-radius:10px; padding:8px 11px; margin-top:7px; line-height:1.4;
}
.rulerow .rdot{ color:var(--gold); font-size:12px; flex-shrink:0; }
.rulerow .rx{
  margin-left:auto; background:none; border:none; color:var(--mut); font-size:15px;
  cursor:pointer; padding:0 2px; flex-shrink:0;
}
.rule-add{ display:flex; gap:8px; margin-top:10px; }
.rule-add input{
  flex:1; background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:9px 12px; color:var(--text); font-size:13.5px; outline:none;
}

/* Verifications */
.verifrow{
  background:var(--card2); border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; margin-top:8px;
}
.verifrow .vfrom{ font-size:13px; font-weight:700; color:var(--green); }
.verifrow .vctx{ font-size:11.5px; color:var(--mut); margin-top:1px; }
.verifrow .vtext{ font-size:13px; color:#cfc5e4; margin-top:6px; line-height:1.5; }
.verif-form{ margin-top:10px; }
.verif-form select, .verif-form textarea{
  width:100%; background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; color:var(--text); font-size:13.5px; outline:none; font-family:inherit; margin-top:8px;
}
.verif-form textarea{ resize:none; height:64px; }
.pending-note{ font-size:12.5px; color:var(--gold); margin-top:8px; }

/* My photos */
.photogrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.ptile{
  aspect-ratio:1; border-radius:12px; border:1px solid var(--line); position:relative; overflow:hidden;
  background:var(--card2);
}
.ptile img{ width:100%; height:100%; object-fit:cover; display:block; }
.ptile.denied img{ filter:grayscale(1) brightness(.5); }
.ptile .st{
  position:absolute; left:5px; bottom:5px; font-size:9.5px; font-weight:800; letter-spacing:.5px;
  padding:2px 7px; border-radius:999px; backdrop-filter:blur(4px);
}
.st.pend{ background:rgba(245,192,78,.2); color:var(--gold); border:1px solid rgba(245,192,78,.5); }
.st.ok{ background:rgba(74,222,128,.18); color:var(--green); border:1px solid rgba(74,222,128,.5); }
.st.no{ background:rgba(244,113,113,.2); color:var(--red); border:1px solid rgba(244,113,113,.5); }
.ptile .vis{
  position:absolute; right:5px; top:5px; font-size:9.5px; font-weight:800; letter-spacing:.4px;
  padding:2px 7px; border-radius:999px; backdrop-filter:blur(4px);
  background:rgba(20,16,32,.65); color:#cfc5e4; border:1px solid var(--line); cursor:pointer;
}
.ptile .vis.pub{ color:#8fdcff; border-color:rgba(92,214,255,.5); }
.ptile .vis.frn{ color:#a9e8c4; border-color:rgba(74,222,128,.5); }
.friendrow{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid rgba(56,43,82,.5); cursor:pointer; }
.friendrow .fname{ flex:1; font-size:14px; font-weight:700; }
.addtile{
  aspect-ratio:1; border-radius:12px; border:1.5px dashed #5a4a80; background:none;
  color:var(--mut); font-size:26px; cursor:pointer;
}
.avatar.photo{ overflow:hidden; }
.avatar.photo img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* Moderation */
.modcard{
  background:linear-gradient(var(--card), var(--bg2)); border:1px solid var(--line);
  border-radius:16px; padding:13px; margin-bottom:10px;
}
.modcard .mtop{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.modcard .mkind{
  font-size:10px; font-weight:800; letter-spacing:.8px; padding:3px 8px; border-radius:999px;
  background:rgba(92,214,255,.12); border:1px solid rgba(92,214,255,.4); color:#8fdcff;
}
.modcard .mfrom{ font-size:13.5px; font-weight:700; margin-top:8px; }
.modcard .mctx{ font-size:12px; color:var(--mut); margin-top:2px; }
.modcard .mtext{ font-size:13px; color:#cfc5e4; margin-top:8px; line-height:1.5; }
.modcard .mimg{ margin-top:10px; width:110px; height:110px; border-radius:12px; border:1px solid var(--line); overflow:hidden; }
.modcard .mimg img{ width:100%; height:100%; object-fit:cover; display:block; }
.modcard .mimg.ph{ display:flex; align-items:center; justify-content:center; font-size:11px; color:rgba(255,255,255,.6); text-align:center; padding:6px; }
.modcard .mbtns{ display:flex; gap:8px; margin-top:12px; }
.btn.approve{ background:rgba(74,222,128,.14); color:var(--green); border:1px solid rgba(74,222,128,.45); }
.logrow{ font-size:12.5px; color:var(--mut); padding:7px 0; border-bottom:1px solid rgba(56,43,82,.5); line-height:1.45; }
.logrow b{ color:#cfc5e4; }
.logrow .ok{ color:var(--green); font-weight:700; }
.logrow .no{ color:var(--red); font-weight:700; }

/* Light theme */
body.light{
  --bg:#f2eef8; --bg2:#e9e3f2; --card:#ffffff; --card2:#f4effc;
  --line:#d8cdec; --text:#241b3a; --mut:#6d6288;
  background:#e7e1f0;
}
body.light .app{
  background:radial-gradient(120% 60% at 50% 0%, #fbf9ff 0%, #f2eef8 55%, #eae4f4 100%);
  box-shadow:0 0 60px rgba(90,70,140,.15);
}
body.light .topbar{ background:linear-gradient(rgba(250,248,255,.96), rgba(250,248,255,.88)); border-bottom-color:var(--line); }
body.light .bottomnav{ background:rgba(250,248,255,.97); border-top-color:var(--line); }
body.light .nav-btn.active{ color:#241b3a; }
body.light .onboard{ background:radial-gradient(120% 70% at 50% 0%, #f4effc 0%, #e7e1f0 60%); }
body.light .ob-card{ background:#ffffff; border-color:var(--line); }
body.light .sheet-body{ background:linear-gradient(#faf7ff, #f2eef8); border-color:var(--line); }
body.light .chatview{ background:var(--bg); }
body.light .chat-head, body.light .chat-input, body.light .chat-rate, body.light .chat-note{ background:var(--bg2); border-color:var(--line); }
body.light .msg.them{ background:#ffffff; border-color:var(--line); color:#241b3a; }
body.light .msg.sys{ background:rgba(196,150,42,.08); color:#7a6222; border-color:rgba(196,150,42,.35); }
body.light .toast{ background:#ffffff; border-color:var(--line); color:#241b3a; }
body.light .bio, body.light .edesc, body.light .ftext, body.light .vtext, body.light .mtext{ color:#453a63; }
body.light .tagline{ color:#514372; }
body.light .tag, body.light .tagpick button{ color:#5b4a86; }
body.light .chip-toggle.on{ color:#8a1f4d; }
body.light .rulerow{ color:#6d5a2a; background:rgba(196,150,42,.07); border-color:rgba(196,150,42,.3); }
body.light .verifrow .vtext{ color:#453a63; }
body.light .privnote .ptext{ color:#454d84; }
body.light .wl-sub, body.light .wl-priv, body.light .footer-note, body.light .ob-note{ color:#8a80a5; }
body.light .empty{ color:#8a80a5; }
body.light .fresh .fcard, body.light .roomcard, body.light .event, body.light .card,
body.light .panelbox, body.light .mecard, body.light .feedcard, body.light .modcard,
body.light .trendcard, body.light .wlbox, body.light .wlbanner{ border-color:var(--line); }
body.light .newscard .ntext{ color:#7a6a3a; }
body.light .home-status input, body.light .composer input, body.light .searchbar input,
body.light .wl-row input[type="email"]{ background:#ffffff; }

/* Home */
.home-head{ margin:4px 2px 14px; }
.home-head .hgreet{ font-size:21px; font-weight:800; }
.home-head .hstat{ font-size:12.5px; color:var(--mut); margin-top:4px; }
.sect.hsec{ cursor:pointer; user-select:none; display:flex; align-items:center; gap:7px; }
.sect.hsec:active{ opacity:.7; }
.hcaret{ color:var(--acc); font-size:12px; width:12px; }
.home-status{ display:flex; gap:8px; }
.home-status input{
  flex:1; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:10px 15px; color:var(--text); font-size:13.5px; outline:none;
}
.home-status button{
  background:linear-gradient(90deg,var(--acc),var(--acc2)); color:#fff; border:none;
  border-radius:999px; padding:0 16px; font-weight:700; cursor:pointer;
}

/* Waitlist */
.wlbox{
  margin-top:16px; background:rgba(255,92,138,.07); border:1px solid rgba(255,92,138,.35);
  border-radius:14px; padding:13px 14px; position:relative;
}
.wl-title{ font-size:15px; font-weight:800; }
.wl-sub{ font-size:12.5px; color:var(--mut); margin-top:4px; line-height:1.5; }
.wl-row{ display:flex; gap:8px; margin-top:10px; }
.wl-row input[type="email"]{
  flex:1; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:11px 13px; color:var(--text); font-size:14px; outline:none;
}
.wl-row input[type="email"]:focus{ border-color:var(--acc); }
.wl-row .btn{ flex:none; padding:11px 18px; }
.wl-priv{ font-size:10.5px; color:#6d6288; margin-top:8px; line-height:1.5; }
.wl-done{ font-size:13.5px; color:var(--green); font-weight:700; }
.wlbanner{
  display:flex; align-items:center; gap:9px; margin-bottom:12px;
  background:rgba(255,92,138,.08); border:1px solid rgba(255,92,138,.35);
  border-radius:12px; padding:9px 12px; font-size:12.5px;
}
.wlbanner span{ flex:1; min-width:0; }
.wl-x{ background:none; border:none; color:var(--mut); font-size:13px; cursor:pointer; padding:2px; }

/* Toasts */
.toasts{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:80; width:calc(100% - 40px); max-width:420px; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast{
  background:linear-gradient(#332757, #241b3f); border:1px solid #4b3a72; color:#fff;
  padding:12px 16px; border-radius:14px; font-size:13.5px; box-shadow:0 8px 30px rgba(0,0,0,.5);
  animation:tin .2s ease;
}
@keyframes tin{ from{ transform:translateY(-12px); opacity:0; } to{ transform:none; opacity:1; } }