:root{
  --bg:#f7f9ff;
  --surface:rgba(255,255,255,.88);
  --surface-strong:#ffffff;
  --text:#172033;
  --muted:#6b5f7a;
  --line:rgba(139,92,246,.14);
  --primary:#4f46e5;
  --primary-2:#0ea5e9;
  --accent:#06b6d4;
  --warm:#f59e0b;
  --danger:#e11d48;
  --success:#10b981;
  --shadow:0 18px 45px rgba(139,92,246,.12);
  --radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(14,165,233,.16), transparent 28%),
    radial-gradient(circle at top right, rgba(6,182,212,.17), transparent 28%),
    radial-gradient(circle at bottom left, rgba(245,158,11,.15), transparent 22%),
    linear-gradient(180deg,#fff7fb 0%, #f8fbff 100%);
  min-height:100vh;
}
body::before,body::after{
  content:"";
  position:fixed;
  z-index:-1;
  border-radius:50%;
  filter:blur(18px);
  opacity:.6;
}
body::before{width:240px;height:240px;top:88px;right:4%;background:rgba(99,102,241,.12)}
body::after{width:180px;height:180px;bottom:8%;left:3%;background:rgba(132,204,22,.10)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;justify-content:space-between;gap:18px;align-items:center;
  padding:14px 20px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(139,92,246,.12);
}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:46px;height:46px;display:grid;place-items:center;border-radius:16px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;font-weight:900;font-size:1.15rem;
  box-shadow:0 14px 30px rgba(139,92,246,.28);
}
.brand h1{font-size:20px;margin:0;letter-spacing:-.02em}
.brand p{font-size:12px;margin:2px 0 0;color:var(--muted)}
.layout{max-width:1260px;margin:auto;display:grid;grid-template-columns:300px 1fr;gap:22px;padding:22px}
.sidebar{display:flex;flex-direction:column;gap:16px}
.card{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
}
.sidebar .card{padding:18px}
.sidebar h2{font-size:16px;margin:0 0 14px}
label{display:block;font-size:13px;font-weight:800;margin:12px 0}
input,select,textarea{
  width:100%;
  border:1px solid rgba(139,92,246,.16);
  border-radius:14px;
  padding:11px 12px;
  margin-top:6px;
  background:rgba(255,255,255,.95);
  color:var(--text);
  outline:none;
  transition:.2s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(139,92,246,.48);
  box-shadow:0 0 0 4px rgba(139,92,246,.10);
}
textarea{min-height:150px;resize:vertical}
small,.muted{color:var(--muted)}
.primary,.secondary,.ghost,.text,.danger-btn{
  border:none;border-radius:14px;padding:11px 15px;font-weight:900;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.primary:hover,.secondary:hover,.ghost:hover,.danger-btn:hover,.action:hover,.tab:hover{transform:translateY(-1px)}
.primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:white;
  box-shadow:0 12px 28px rgba(139,92,246,.24);
}
.secondary{
  background:linear-gradient(135deg,#ede9fe,#fce7f3);
  color:#5b21b6;
}
.ghost{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(139,92,246,.16);
  color:var(--text);
}
.text{background:transparent;color:#6d28d9}
.danger-btn{
  background:linear-gradient(135deg,#fb7185,#e11d48);
  color:#fff;
}
.full{width:100%;margin-top:8px}
.hidden{display:none!important}

.rules{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(251,243,255,.98));
}
.rules ul{padding-left:18px;margin:0;color:#4b5563;font-size:13px;line-height:1.7}

.hero{
  position:relative;
  overflow:hidden;
  padding:28px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  background:
    linear-gradient(135deg, rgba(79,70,229,.96), rgba(14,165,233,.92)),
    linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,0));
  color:#fff;
}
.hero::before{
  content:"";
  position:absolute;
  inset:auto -40px -60px auto;
  width:220px;height:220px;border-radius:50%;
  background:rgba(255,255,255,.12);
}
.hero h2{margin:6px 0 8px;font-size:32px;letter-spacing:-.03em}
.hero p{margin:0;color:rgba(255,255,255,.88);max-width:680px}
.hero-copy{position:relative;z-index:1}
.hero-side{display:grid;gap:10px;min-width:220px;position:relative;z-index:1}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hero-badge,.hero-bubble{
  display:inline-flex;align-items:center;
  padding:8px 12px;border-radius:999px;
  font-size:12px;font-weight:900;
  backdrop-filter:blur(6px);
}
.hero-badge{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22)}
.hero-bubble{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);
  justify-self:end;color:#fff;
}
.bubble-1{transform:translateX(-22px)}
.bubble-2{transform:translateX(0)}
.bubble-3{transform:translateX(-8px)}
.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:900;color:#fdf2ff}

.tabs{display:flex;gap:8px;margin:16px 0 10px}
.tab{
  border:none;background:rgba(255,255,255,.78);
  border-radius:999px;padding:9px 14px;
  color:#6b7280;font-weight:900;
  border:1px solid rgba(139,92,246,.10);
}
.tab.active{
  background:linear-gradient(135deg,#ffffff,#f3e8ff);
  color:#6d28d9;border-color:rgba(139,92,246,.18);
  box-shadow:0 10px 24px rgba(139,92,246,.10);
}

.feed{display:flex;flex-direction:column;gap:14px}
.post{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.85);
  border-radius:20px;
  padding:18px;
  box-shadow:0 8px 24px rgba(17,24,39,.05);
  transition:transform .18s ease, box-shadow .18s ease;
}
.post:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(139,92,246,.11)}
.post::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:6px;
  background:linear-gradient(180deg,var(--primary),var(--primary-2));
}
.post-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.post-avatar{
  width:48px;height:48px;border-radius:16px;
  display:grid;place-items:center;
  font-size:1.05rem;font-weight:900;color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 10px 22px rgba(139,92,246,.20);
  flex:0 0 48px;
}
.post-head{min-width:0}
.post-head-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,#ede9fe,#fce7f3);
  border-radius:999px;padding:5px 10px;
  font-size:11px;font-weight:900;color:#6d28d9;
}
.anon-tag{
  display:inline-flex;align-items:center;
  background:#eff6ff;color:#2563eb;
  border-radius:999px;padding:4px 9px;
  font-size:11px;font-weight:900;
}
.post h3{margin:8px 0 6px;font-size:20px;letter-spacing:-.02em}
.post p{margin:0;color:#3f3450;white-space:pre-wrap;line-height:1.62}
.post-meta{display:flex;flex-wrap:wrap;gap:6px;color:var(--muted);font-size:12px}
.post-actions{
  display:flex;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(139,92,246,.10)
}
.action{
  border:none;
  background:linear-gradient(135deg,#ffffff,#faf5ff);
  border-radius:12px;padding:8px 11px;
  font-size:12px;font-weight:900;color:#5b5166;
  border:1px solid rgba(139,92,246,.10);
}
.cat-love::before{background:linear-gradient(180deg,#f472b6,#ec4899)}
.cat-work::before{background:linear-gradient(180deg,#6366f1,#8b5cf6)}
.cat-neighborhood::before{background:linear-gradient(180deg,#10b981,#06b6d4)}
.cat-school::before{background:linear-gradient(180deg,#f59e0b,#ef4444)}
.cat-funny::before{background:linear-gradient(180deg,#f97316,#ec4899)}
.cat-public::before{background:linear-gradient(180deg,#06b6d4,#3b82f6)}
.cat-other::before{background:linear-gradient(180deg,#8b5cf6,#d946ef)}

.empty{
  text-align:center;padding:54px 20px;
  background:rgba(255,255,255,.72);
  border:1px dashed rgba(139,92,246,.18);
  border-radius:20px;
}
.empty-illustration{font-size:40px;margin-bottom:10px}

dialog{
  border:none;padding:0;border-radius:24px;
  width:min(760px,calc(100vw - 24px));
  box-shadow:0 30px 80px rgba(36,20,58,.25);
}
dialog::backdrop{background:rgba(36,20,58,.38);backdrop-filter:blur(4px)}
.composer-card{
  padding:24px;max-height:88vh;overflow:auto;
  background:linear-gradient(180deg,#ffffff,#fffafd);
}
.compact{max-width:560px}
.dialog-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.dialog-head h2{margin:3px 0 0}
.icon{
  border:none;background:#f5f3ff;color:#6d28d9;
  border-radius:12px;width:38px;height:38px;font-size:22px
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.checkbox{display:flex;gap:10px;align-items:flex-start;font-weight:700;line-height:1.45}
.checkbox input{width:auto;margin-top:3px}
.notice{padding:12px 13px;border-radius:14px;margin:14px 0;font-size:13px;line-height:1.5}
.warning{background:#fff7ed;color:#9a3412;border:1px solid rgba(245,158,11,.14)}
.danger{background:#fff1f2;color:#9f1239;border:1px solid rgba(225,29,72,.10)}
.dialog-actions,.admin-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

.admin-body{
  display:grid;place-items:center;min-height:100vh;padding:20px;
  background:linear-gradient(180deg,#fff7fb 0%, #f5f3ff 100%);
}
.login-card{width:min(440px,100%);padding:24px}
.admin-wrap{max-width:1200px;margin:20px auto;padding:0 18px 50px;display:grid;gap:18px}
.admin-section{padding:20px}
.admin-item{padding:14px 0;border-top:1px solid rgba(139,92,246,.10)}
.admin-item:first-of-type{border-top:none}
.admin-item p{line-height:1.5}
.table-wrap{overflow:auto}
table{border-collapse:collapse;width:100%;font-size:12px}
th,td{text-align:left;padding:10px;border-bottom:1px solid rgba(139,92,246,.10);vertical-align:top}
.ua{min-width:300px;max-width:520px;word-break:break-word}

@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{order:2;display:grid;grid-template-columns:1fr 1fr}
  .content{order:1}
  .hero{flex-direction:column;align-items:flex-start}
  .hero-side{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-bubble{justify-self:stretch}
  .bubble-1,.bubble-2,.bubble-3{transform:none}
}
@media(max-width:640px){
  .topbar{padding:12px}
  .brand p{display:none}
  .layout{padding:12px}
  .sidebar{display:flex}
  .grid-2{grid-template-columns:1fr}
  .hero{padding:22px}
  .hero h2{font-size:28px}
  .hero-side{grid-template-columns:1fr}
  .post-actions{flex-direction:column;align-items:flex-start}
  .admin-actions{flex-wrap:wrap;justify-content:flex-start}
}


.header-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.theme-toggle{width:42px;height:42px;border:none;border-radius:14px;background:var(--surface-strong);box-shadow:0 8px 20px rgba(63,67,155,.10);font-size:18px}
.logo-bubble{position:relative;font-size:11px;letter-spacing:2px}.logo-bubble::after{content:"";position:absolute;bottom:4px;left:8px;width:10px;height:10px;background:inherit;clip-path:polygon(0 0,100% 0,0 100%)}
.verified{background:#ecfdf5!important;color:#047857!important;border-color:#a7f3d0!important}
.info{background:#eff6ff;color:#1d4ed8;border:1px solid #dbeafe}.success{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.reaction-summary{margin-top:14px;color:var(--muted);font-size:12px;font-weight:800}
.reaction-bar{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.reaction-btn{border:1px solid var(--line);background:var(--surface-strong);color:var(--text);border-radius:999px;padding:7px 10px;font-size:16px;display:inline-flex;gap:5px;align-items:center;transition:.18s ease}
.reaction-btn span{font-size:11px;font-weight:900;color:var(--muted)}.reaction-btn:hover{transform:translateY(-2px) scale(1.04)}.reaction-btn.reacting{animation:reactionPop .35s ease}
@keyframes reactionPop{0%{transform:scale(1)}50%{transform:scale(1.35) rotate(-5deg)}100%{transform:scale(1)}}
.post{animation:feedIn .35s ease both}@keyframes feedIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero-bubble{animation:floaty 4s ease-in-out infinite}.hero-bubble:nth-child(2){animation-delay:.6s}.hero-bubble:nth-child(3){animation-delay:1.2s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.admin-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.stat-card{padding:18px;border-radius:18px;background:linear-gradient(135deg,#eef2ff,#ecfeff);border:1px solid var(--line);box-shadow:var(--shadow)}.stat-card span{display:block;font-size:12px;color:var(--muted);font-weight:800}.stat-card strong{font-size:28px}.admin-link{text-decoration:none;display:inline-flex;align-items:center}
.data-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.data-grid>div{padding:12px;border-radius:14px;background:#f8fafc;border:1px solid var(--line)}.data-grid span{display:block;font-size:11px;color:var(--muted);font-weight:800;margin-bottom:4px}.break{word-break:break-all}
:root[data-theme="dark"]{--bg:#0b1020;--surface:rgba(18,24,43,.94);--surface-strong:#151b30;--text:#eef2ff;--muted:#aab3c5;--line:rgba(148,163,184,.16);--shadow:0 18px 48px rgba(0,0,0,.3)}
:root[data-theme="dark"] body{background:radial-gradient(circle at 8% 4%,rgba(79,70,229,.22),transparent 28%),radial-gradient(circle at 92% 12%,rgba(14,165,233,.18),transparent 26%),var(--bg)}
:root[data-theme="dark"] .topbar{background:rgba(11,16,32,.80)}:root[data-theme="dark"] .card,:root[data-theme="dark"] .post,:root[data-theme="dark"] .composer-card,:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea,:root[data-theme="dark"] .reaction-btn,:root[data-theme="dark"] .theme-toggle{background:var(--surface);color:var(--text)}
:root[data-theme="dark"] .post p{color:#d9e0ef}:root[data-theme="dark"] .data-grid>div{background:#11182b}:root[data-theme="dark"] .stat-card{background:linear-gradient(135deg,#1d2445,#123448)}
@media(max-width:720px){.admin-stats,.data-grid{grid-template-columns:1fr 1fr}.header-actions{justify-content:flex-end}}
@media(max-width:480px){.admin-stats,.data-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}


.google-admin-card{max-width:480px}
.admin-login-brand{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.admin-login-brand h1{margin:2px 0 0}
.google-button{
  width:100%;display:flex;align-items:center;justify-content:center;gap:12px;
  text-decoration:none;margin-top:20px;padding:13px 16px;border-radius:14px;
  background:var(--surface-strong);color:var(--text);font-weight:900;
  border:1px solid var(--line);box-shadow:0 10px 24px rgba(20,30,70,.08);
  transition:transform .18s ease,box-shadow .18s ease
}
.google-button:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(20,30,70,.12)}
.google-g{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  font-weight:900;background:linear-gradient(135deg,#4285f4,#34a853,#fbbc05,#ea4335);
  color:white
}
.admin-login-note{font-size:12px;color:var(--muted);line-height:1.5;margin-top:14px}
.admin-back{display:inline-block;margin-top:18px;text-decoration:none}

.comments-dialog{width:min(760px,calc(100vw - 18px))}
.comments-shell{padding:0;background:var(--surface-strong);max-height:88vh;display:flex;flex-direction:column}
.comments-head{padding:20px 20px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface-strong);z-index:3}
.comments-post-preview{padding:12px 20px;background:linear-gradient(135deg,rgba(79,70,229,.08),rgba(14,165,233,.08));display:flex;flex-direction:column;gap:3px;border-bottom:1px solid var(--line)}
.comments-post-preview span{font-size:12px;color:var(--muted)}
.comments-list{padding:14px 18px;overflow:auto;min-height:220px}
.comment-card{margin-left:calc(var(--depth,0) * 18px);padding:14px 0;border-bottom:1px solid var(--line)}
.comment-card.reply-card{border-left:2px solid rgba(79,70,229,.14);padding-left:12px}
.comment-top{display:flex;align-items:center;gap:9px}
.comment-avatar{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-size:12px;font-weight:900}
.comment-top>div{display:flex;flex-direction:column}.comment-top small{font-size:11px}
.comment-card p{margin:8px 0 10px;line-height:1.5;color:var(--text)}
.comment-reactions{display:flex;gap:5px;flex-wrap:wrap}
.comment-react{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 7px;font-size:13px}
.comment-react span{font-size:10px;margin-left:2px;color:var(--muted)}
.comment-actions{display:flex;gap:12px;margin-top:8px}.text-btn{border:none;background:none;color:var(--primary);font-weight:800;font-size:12px;padding:0}
.comment-composer{padding:12px 16px 16px;border-top:1px solid var(--line);background:var(--surface-strong);position:sticky;bottom:0}
.comment-composer textarea{min-height:76px;max-height:150px;margin:0}.comment-composer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.reply-banner{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:#eef2ff;color:#3730a3;font-size:12px;font-weight:800}
.reply-banner button{border:none;background:none;color:#3730a3;font-size:18px}
.empty-comments{display:grid;place-items:center;text-align:center;padding:34px;color:var(--muted);gap:6px}.empty-comments div{font-size:34px}.empty-comments strong{color:var(--text)}
:root[data-theme="dark"] .comments-shell,:root[data-theme="dark"] .comments-head,:root[data-theme="dark"] .comment-composer{background:var(--surface-strong)}


/* v8: verification and PSGC location controls */
.verify-action{
  color:#172033 !important;
  background:#fff !important;
  border:1px solid rgba(99,102,241,.25) !important;
  font-weight:800;
}
.verify-action:hover{color:#4f46e5 !important;background:#f8faff !important}
.location-actions{flex-wrap:wrap}
#locationBtn{white-space:nowrap}
select:disabled{opacity:.62;cursor:not-allowed}
#locationDialog .composer-card{max-width:620px}
@media(max-width:680px){
  .header-actions{gap:6px}
  #locationBtn,#verifyBtn{padding-left:10px;padding-right:10px}
}

/* Fix top-right Location button contrast */
#locationBtn{
  background:#ffffff !important;
  color:#172033 !important;
  border:1px solid rgba(99,102,241,.25) !important;
  font-weight:800 !important;
}

#locationBtn:hover{
  background:#f3f4ff !important;
  color:#4f46e5 !important;
}

.is-loading{
  opacity:.72;
  font-style:italic;
}

/* =========================================================
   CHISMIS — MIDNIGHT MARITES THEME
   ========================================================= */

:root{
  --bg:#0F0D17;
  --surface:#181522;
  --surface-strong:#211C2B;
  --surface-soft:#272130;

  --text:#F8F7FB;
  --muted:#B8B3C5;
  --line:#3A3346;

  --primary:#A855F7;
  --primary-2:#E94F64;
  --hot:#E94F64;
  --gold:#F5B942;
  --teal:#38BDB2;
  --indigo:#6D7FF2;
  --success:#36C98F;

  --shadow:0 18px 50px rgba(0,0,0,.28);
}

/* Overall page */
html,
body{
  background:#0F0D17 !important;
  color:var(--text) !important;
}

body{
  background:
    radial-gradient(circle at 10% 0%,rgba(168,85,247,.13),transparent 28%),
    radial-gradient(circle at 90% 8%,rgba(233,79,100,.08),transparent 25%),
    #0F0D17 !important;
}

body::before{
  background:rgba(168,85,247,.08) !important;
}

body::after{
  background:rgba(233,79,100,.05) !important;
}

/* Header */
.topbar{
  background:
    linear-gradient(
      90deg,
      rgba(20,16,31,.97) 0%,
      rgba(33,19,46,.97) 55%,
      rgba(22,19,31,.97) 100%
    ) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 8px 30px rgba(0,0,0,.18);
}

.brand h1{
  color:#F8F7FB !important;
}

.brand p{
  color:#B8B3C5 !important;
}

.logo{
  background:linear-gradient(135deg,#7C3AED,#EC4899) !important;
  box-shadow:0 12px 28px rgba(168,85,247,.24) !important;
}

/* Cards */
.card,
.sidebar .card{
  background:#181522 !important;
  color:var(--text) !important;
  border:1px solid #3A3346 !important;
  box-shadow:var(--shadow) !important;
  backdrop-filter:none !important;
}

.sidebar h2{
  color:#F8F7FB !important;
}

/* Inputs / dropdowns */
label{
  color:#F8F7FB !important;
}

input,
select,
textarea{
  background:#211C2B !important;
  color:#F8F7FB !important;
  border:1px solid #3A3346 !important;
}

input::placeholder,
textarea::placeholder{
  color:#817A8D !important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:#A855F7 !important;
  box-shadow:0 0 0 4px rgba(168,85,247,.12) !important;
}

select:disabled{
  opacity:.55;
}

/* PRIMARY ACTIONS */
.primary,
#applyFilters{
  background:linear-gradient(
    135deg,
    #A855F7,
    #E94F64
  ) !important;
  color:#FFFFFF !important;
  border:none !important;
  font-weight:800 !important;
  box-shadow:0 10px 28px rgba(168,85,247,.18) !important;
}

.primary:hover,
#applyFilters:hover{
  background:linear-gradient(
    135deg,
    #9333EA,
    #DB3F57
  ) !important;
  color:#FFFFFF !important;
}

/* SECONDARY / UTILITY BUTTONS */
.secondary,
.ghost,
#verifyBtn,
#locationBtn,
#useDefaultLocation{
  background:#F8F7FB !important;
  color:#181522 !important;
  border:1px solid #DED9E6 !important;
  font-weight:800 !important;
  box-shadow:none !important;
}

.secondary:hover,
.ghost:hover,
#verifyBtn:hover,
#locationBtn:hover,
#useDefaultLocation:hover{
  background:#EDE9F2 !important;
  color:#181522 !important;
}

/* Clear/text buttons */
.text,
.text-btn{
  background:transparent !important;
  color:#C084FC !important;
}

.text:hover,
.text-btn:hover{
  color:#E9D5FF !important;
}

/* Hero */
.hero{
  color:#F8F7FB !important;
  background:
    radial-gradient(circle at 90% 50%,rgba(233,79,100,.15),transparent 30%),
    linear-gradient(
      135deg,
      #21132E 0%,
      #351B3C 52%,
      #241322 100%
    ) !important;
  border:1px solid #493751 !important;
}

.hero::before{
  background:rgba(168,85,247,.10) !important;
}

.hero h2{
  color:#FFFFFF !important;
}

.hero p{
  color:#D8D2DE !important;
}

.eyebrow{
  color:#F5B942 !important;
}

.hero-badge{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#F8F7FB !important;
}

.hero-bubble{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#F8F7FB !important;
}

.bubble-1{
  border-color:rgba(233,79,100,.55) !important;
}

.bubble-2{
  border-color:rgba(168,85,247,.55) !important;
}

.bubble-3{
  border-color:rgba(245,185,66,.55) !important;
}

/* Feed tabs */
.tab{
  background:#211C2B !important;
  color:#B8B3C5 !important;
  border:1px solid #3A3346 !important;
}

.tab.active{
  background:#F8F7FB !important;
  color:#5B2178 !important;
  border-color:#DED9E6 !important;
  box-shadow:none !important;
}

/* Trending */
.tab[data-sort="hot"]{
  background:#332812 !important;
  color:#F5B942 !important;
  border:1px solid rgba(245,185,66,.28) !important;
}

.tab[data-sort="hot"].active{
  background:#F5B942 !important;
  color:#18120A !important;
}

/* Chismis cards */
.post{
  background:#181522 !important;
  color:#F8F7FB !important;
  border:1px solid #3A3346 !important;
  border-left:4px solid #A855F7 !important;
  box-shadow:0 10px 30px rgba(0,0,0,.18) !important;
}

.post:hover{
  box-shadow:0 16px 38px rgba(168,85,247,.10) !important;
}

.post::before{
  display:none !important;
}

.post h3{
  color:#FFFFFF !important;
}

.post p{
  color:#DED9E4 !important;
}

.post-meta{
  color:#9F98AA !important;
}

/* Category accents */
.post.cat-love{
  border-left-color:#E94F64 !important;
}

.post.cat-work{
  border-left-color:#6D7FF2 !important;
}

.post.cat-neighborhood{
  border-left-color:#38BDB2 !important;
}

.post.cat-school{
  border-left-color:#F5B942 !important;
}

.post.cat-funny{
  border-left-color:#E98B4F !important;
}

.post.cat-public{
  border-left-color:#A855F7 !important;
}

.post.cat-other{
  border-left-color:#8A7B9B !important;
}

.pill{
  background:rgba(168,85,247,.13) !important;
  color:#D8B4FE !important;
}

.anon-tag{
  background:rgba(109,127,242,.12) !important;
  color:#AAB6FF !important;
}

/* Reactions */
.reaction-btn,
.comment-react{
  background:#211C2B !important;
  color:#F8F7FB !important;
  border:1px solid #3A3346 !important;
}

.reaction-btn:hover,
.comment-react:hover{
  background:#2A2334 !important;
  border-color:#665570 !important;
}

.reaction-btn[aria-pressed="true"],
.reaction-btn.selected{
  background:rgba(168,85,247,.16) !important;
  border-color:#A855F7 !important;
}

.reaction-btn span,
.comment-react span{
  color:#B8B3C5 !important;
}

/* Post action buttons */
.action{
  background:#F8F7FB !important;
  color:#181522 !important;
  border:1px solid #DED9E6 !important;
}

.action:hover{
  background:#EDE9F2 !important;
}

.action.report:hover,
.report:hover{
  background:#FDE8EB !important;
  color:#B4233C !important;
  border-color:#F4BAC4 !important;
}

/* Rules / anonymity panel */
.rules{
  background:#15121C !important;
  border-color:#302A39 !important;
  box-shadow:none !important;
}

.rules h2{
  color:#D8D3DF !important;
}

.rules ul{
  color:#9891A3 !important;
}

/* Dialogs */
dialog{
  background:#181522 !important;
  color:#F8F7FB !important;
  box-shadow:0 30px 90px rgba(0,0,0,.55) !important;
}

dialog::backdrop{
  background:rgba(9,7,13,.74) !important;
}

.composer-card,
.comments-shell,
.comments-head,
.comment-composer{
  background:#181522 !important;
  color:#F8F7FB !important;
}

.icon{
  background:#2A2334 !important;
  color:#E9D5FF !important;
}

/* Information panels */
.notice.info{
  background:#211C2B !important;
  color:#D8D2DE !important;
  border:1px solid #3A3346 !important;
}

.warning{
  background:#2F2414 !important;
  color:#F5D28A !important;
  border-color:#5A4520 !important;
}

.success{
  background:rgba(54,201,143,.12) !important;
  color:#78E0B5 !important;
  border-color:rgba(54,201,143,.35) !important;
}

/* Comments */
.comments-post-preview{
  background:linear-gradient(
    135deg,
    rgba(168,85,247,.08),
    rgba(233,79,100,.07)
  ) !important;
}

.comment-card{
  border-bottom-color:#3A3346 !important;
}

.comment-card p{
  color:#DED9E4 !important;
}

.comment-avatar{
  background:linear-gradient(135deg,#A855F7,#E94F64) !important;
}

/* Empty state */
.empty{
  background:#15121C !important;
  color:#B8B3C5 !important;
  border-color:#3A3346 !important;
}

/* Scrollbars */
*{
  scrollbar-color:#51455D #181522;
}

/* Loading state */
.is-loading{
  color:#B8B3C5 !important;
  font-style:italic;
}

/* Preserve visibility behavior */
.hidden{
  display:none !important;
}

/* Mobile */
@media(max-width:680px){
  .topbar{
    background:#14101F !important;
  }

  .hero{
    padding:22px !important;
  }
}


/* =========================================================
   MIDNIGHT MARITES — POLISH PASS
   ========================================================= */

/* Softer hero so the title stays dominant */
.hero{
  background:
    radial-gradient(
      circle at 88% 50%,
      rgba(233,79,100,.13),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #21152A 0%,
      #35172F 100%
    ) !important;
}

.hero::before{
  opacity:.45 !important;
}

.hero-bubble{
  background:rgba(255,255,255,.045) !important;
  border-color:rgba(255,255,255,.10) !important;
}

/* Feed card: more premium/social */
.post{
  --post-accent:#A855F7;

  position:relative;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.015),
      rgba(255,255,255,0)
    ),
    #181522 !important;

  border:1px solid #3A3346 !important;
  border-left:4px solid var(--post-accent) !important;
  border-radius:20px !important;
  box-shadow:0 14px 34px rgba(0,0,0,.20) !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.post:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 42px rgba(0,0,0,.27) !important;
}

/* Default / state accent system */
.post{
  --post-accent:#A855F7;
}

.post.trending{
  --post-accent:#F5B942;
}

.post.hot{
  --post-accent:#E94F64;
  box-shadow:
    0 14px 34px rgba(0,0,0,.20),
    0 0 24px rgba(233,79,100,.08) !important;
}

/* Existing categories remain meaningful without cyan disconnect */
.post.cat-neighborhood{
  --post-accent:#A855F7 !important;
}

.post.cat-love{
  --post-accent:#E94F64 !important;
}

.post.cat-work{
  --post-accent:#6D7FF2 !important;
}

.post.cat-school{
  --post-accent:#A855F7 !important;
}

.post.cat-funny{
  --post-accent:#E98B4F !important;
}

.post.cat-public,
.post.cat-other{
  --post-accent:#A855F7 !important;
}

/* Better hierarchy inside posts */
.post h3{
  font-weight:800 !important;
  letter-spacing:-.01em;
}

.post p{
  color:#E4DFE8 !important;
  line-height:1.58 !important;
}

.post-meta{
  color:#AAA3B5 !important;
  font-size:.94rem;
}

/* Anonymous badge: stronger contrast */
.anon-tag{
  background:rgba(109,127,242,.16) !important;
  color:#D6DCFF !important;
  border:1px solid rgba(109,127,242,.25) !important;
}

/* Slightly richer category pill */
.pill{
  border:1px solid rgba(168,85,247,.20) !important;
}

/* Improve rules readability without making it prominent */
.rules{
  opacity:.92;
}

.rules ul{
  color:#AAA3B5 !important;
  line-height:1.6;
}

.rules h2{
  color:#DAD5E1 !important;
}

/* Clear should stay subordinate */
#clearFilters{
  color:#91899D !important;
  font-weight:700 !important;
}

#clearFilters:hover{
  color:#C8C1D0 !important;
}

/* Selected reactions should feel intentional */
.reaction-btn[aria-pressed="true"],
.reaction-btn.selected{
  background:rgba(168,85,247,.18) !important;
  border-color:#A855F7 !important;
  box-shadow:0 0 0 2px rgba(168,85,247,.08) !important;
  color:#FFFFFF !important;
}

/* Slight feed spacing refinement */
.feed-list{
  gap:18px !important;
}

/* Keep gold reserved for trending/hot UI */
.tab[data-sort="hot"]{
  background:#332812 !important;
  color:#F5B942 !important;
}



/* Verification modal alignment + interaction */
#verifyDialog{
  position:fixed !important;
  inset:0 !important;
  margin:auto !important;
  width:min(620px, calc(100vw - 32px)) !important;
  max-width:620px !important;
  height:max-content !important;
  max-height:calc(100vh - 32px) !important;
  padding:0 !important;
  overflow:auto !important;
  border:none !important;
  border-radius:22px !important;
}

#verifyDialog .composer-card{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

#sendCodeBtn{
  position:relative !important;
  z-index:5 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}

#sendCodeBtn:disabled{
  opacity:.7 !important;
  cursor:wait !important;
}

/* ===== ADMIN MIDNIGHT MARITES STATS ===== */

.admin-stats{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important;
  margin:20px 0 !important;
}

.stat-card{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,0)
    ),
    #181522 !important;

  border:1px solid #3A3346 !important;
  border-radius:16px !important;
  padding:18px 20px !important;
  min-height:92px !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;

  color:#F8F7FB !important;
  box-shadow:0 10px 28px rgba(0,0,0,.16) !important;
}

.stat-card span{
  display:block !important;
  color:#B8B3C5 !important;
  font-size:.86rem !important;
  font-weight:700 !important;
  margin-bottom:6px !important;
}

.stat-card strong{
  display:block !important;
  color:#FFFFFF !important;
  font-size:2rem !important;
  font-weight:800 !important;
  line-height:1 !important;
}

/* subtle Midnight Marites accent */
.stat-card:nth-child(1){
  border-top:3px solid #A855F7 !important;
}

.stat-card:nth-child(2){
  border-top:3px solid #6D7FF2 !important;
}

.stat-card:nth-child(3){
  border-top:3px solid #F5B942 !important;
}

.stat-card:nth-child(4){
  border-top:3px solid #E94F64 !important;
}

.stat-card:nth-child(5),
.stat-card:nth-child(6){
  border-top:3px solid #38BDB2 !important;
}

@media(max-width:900px){
  .admin-stats{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:520px){
  .admin-stats{
    grid-template-columns:1fr !important;
  }
}



/* ========================================================
   CHISMIS PRIVATE CHAT
   ======================================================== */

.chat-unread,
.chat-list-unread{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:#E94F64;
  color:#fff;
}

.chat-dialog{
  width:min(980px,96vw);
  max-width:980px;
  padding:0;
  border:0;
  background:transparent;
}

.chat-shell{
  background:#181522;
  border:1px solid #3A3346;
  border-radius:22px;
  padding:20px;
  color:#F8F7FB;
  max-height:90vh;
  overflow:hidden;
}

.chat-privacy{
  margin-bottom:16px;
}

.chat-layout{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  border:1px solid #3A3346;
  border-radius:16px;
  overflow:hidden;
  min-height:520px;
  max-height:68vh;
}

.chat-inbox{
  background:#15121e;
  border-right:1px solid #3A3346;
  overflow:auto;
}

.chat-inbox-title{
  padding:16px;
  border-bottom:1px solid #3A3346;
}

.chat-conversation-list{
  display:flex;
  flex-direction:column;
}

.chat-empty,
.chat-loading{
  padding:22px;
  text-align:center;
}

.chat-conversation{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:5px;
  text-align:left;
  padding:14px 16px;
  border:0;
  border-bottom:1px solid #2a2535;
  background:transparent;
  color:#F8F7FB;
  cursor:pointer;
}

.chat-conversation:hover,
.chat-conversation.active{
  background:#211C2B;
}

.chat-conversation-top{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
}

.chat-conversation span,
.chat-conversation small{
  color:#B8B3C5;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.chat-thread{
  min-width:0;
  background:#181522;
  display:flex;
  flex-direction:column;
}

.chat-thread-empty{
  min-height:500px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  color:#B8B3C5;
  text-align:center;
  padding:30px;
}

.chat-thread-empty div{
  font-size:44px;
}

#chatThreadActive{
  height:100%;
  min-height:500px;
  display:flex;
  flex-direction:column;
}

#chatThreadActive.hidden{
  display:none;
}

.chat-thread-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid #3A3346;
}

.chat-thread-head div{
  display:flex;
  flex-direction:column;
}

.chat-thread-head small{
  color:#B8B3C5;
}

.chat-messages{
  flex:1;
  min-height:300px;
  overflow:auto;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.chat-message{
  display:flex;
}

.chat-message.mine{
  justify-content:flex-end;
}

.chat-message.theirs{
  justify-content:flex-start;
}

.chat-bubble{
  max-width:min(75%,560px);
  padding:10px 13px;
  border-radius:16px;
  background:#211C2B;
  border:1px solid #3A3346;
}

.chat-message.mine .chat-bubble{
  background:linear-gradient(135deg,#A855F7,#E94F64);
  border-color:transparent;
  color:#fff;
}

.chat-bubble p{
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.chat-message-meta{
  margin-top:6px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  font-size:11px;
  opacity:.8;
}

.chat-report-message{
  border:0;
  background:transparent;
  padding:0;
  color:inherit;
  cursor:pointer;
  text-decoration:underline;
}

.chat-composer{
  border-top:1px solid #3A3346;
  padding:12px;
}

.chat-composer textarea{
  min-height:70px;
  max-height:150px;
}

.chat-composer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
}

.danger-text{
  color:#E94F64;
}

@media(max-width:760px){
  .chat-shell{
    padding:12px;
  }

  .chat-layout{
    grid-template-columns:1fr;
    max-height:none;
  }

  .chat-inbox{
    max-height:190px;
    border-right:0;
    border-bottom:1px solid #3A3346;
  }

  #chatThreadActive,
  .chat-thread-empty{
    min-height:390px;
  }

  .chat-messages{
    min-height:230px;
  }

  .chat-bubble{
    max-width:88%;
  }
}



/* ========================================================
   @MENTION / #HASHTAG AUTOCOMPLETE
   ======================================================== */

.autocomplete-host{
  position:relative;
}

.autocomplete-box{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(100% + 6px);
  z-index:9999;
  max-height:260px;
  overflow:auto;
  background:#181522;
  border:1px solid #3A3346;
  border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.32);
  padding:6px;
}

.autocomplete-item{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#F8F7FB;
  padding:10px 12px;
  text-align:left;
  cursor:pointer;
}

.autocomplete-item:hover,
.autocomplete-item.active{
  background:#211C2B;
}

.autocomplete-item span{
  font-weight:700;
}

.autocomplete-item small{
  color:#B8B3C5;
  white-space:nowrap;
}



/* ========================================================
   BRAND ALIAS + MENTIONS
   ======================================================== */

.brand-copy{
  min-width:0;
}

.brand-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.brand-title-row h1{
  margin:0;
}

.brand-alias{
  border:0;
  background:transparent;
  color:#B8B3C5;
  font-weight:800;
  font-size:14px;
  padding:2px 6px;
  cursor:pointer;
  border-radius:8px;
}

.brand-alias:hover{
  color:#F8F7FB;
  background:#211C2B;
}

.mentions-card{
  width:min(680px,92vw);
  max-height:82vh;
  overflow:auto;
}

.mentions-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
}

.mention-item{
  padding:14px;
  border:1px solid #3A3346;
  border-radius:14px;
  background:#211C2B;
}

.mention-head{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  align-items:center;
}

.mention-head span{
  color:#B8B3C5;
}

.mention-item p{
  margin:10px 0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.mention-bottom{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

.mentions-empty{
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  color:#B8B3C5;
}

.mentions-empty div{
  font-size:40px;
}

@media(max-width:760px){
  .brand-title-row{
    gap:5px;
  }

  .brand-alias{
    font-size:12px;
  }

  .mention-bottom{
    align-items:flex-start;
    flex-direction:column;
  }
}



/* Chat alias search */

.chat-user-search{
  position:relative;
  margin-top:12px;
}

.chat-user-search input{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border-radius:11px;
  border:1px solid #3A3346;
  background:#211C2B;
  color:#F8F7FB;
}

.chat-alias-results{
  position:absolute;
  top:calc(100% + 5px);
  left:0;
  right:0;
  z-index:50;
  border:1px solid #3A3346;
  border-radius:12px;
  overflow:hidden;
  background:#181522;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}

.chat-alias-result{
  width:100%;
  border:0;
  border-bottom:1px solid #2a2535;
  background:transparent;
  color:#F8F7FB;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  cursor:pointer;
  text-align:left;
}

.chat-alias-result:last-child{
  border-bottom:0;
}

.chat-alias-result:hover{
  background:#211C2B;
}

.chat-alias-result span{
  font-weight:800;
}

.chat-alias-result small,
.chat-alias-empty{
  color:#B8B3C5;
}

.chat-alias-empty{
  padding:12px;
}



/* Clickable public user aliases */

.user-alias-link{
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:#C778FF;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  text-align:left;
}

.user-alias-link:hover{
  color:#F8F7FB;
  text-decoration:underline;
}



/* Reply mode chooser */

.reply-banner-copy{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}

.reply-mode-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.reply-mode-actions button{
  width:auto;
}

@media(max-width:640px){
  .reply-mode-actions{
    flex-direction:column;
  }

  .reply-mode-actions button{
    width:100%;
  }
}



/* ========================================================
   DEFAULT LOCATION DIALOG — FULL WIDTH / CENTERED
   ======================================================== */

#locationDialog{
  width:min(720px,calc(100vw - 24px));
  max-width:720px;
  padding:0;
  margin:auto;
  border:0;
  background:transparent;
}

#locationDialog .composer-card{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box;
  margin:0 auto !important;
}

#locationForm{
  width:100%;
  box-sizing:border-box;
}

#locationForm label{
  width:100%;
  box-sizing:border-box;
}

#locationForm select,
#locationForm input{
  display:block;
  width:100%;
  max-width:none;
  box-sizing:border-box;
}

@media(max-width:760px){
  #locationDialog{
    width:calc(100vw - 16px);
  }
}



/* ========================================================
   HASHTAGS + TRENDING TOPICS
   ======================================================== */

.trending-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.trending-head h2{
  margin:0;
}

.trending-topics{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.trending-topic{
  width:100%;
  border:1px solid var(--line);
  background:var(--surface-strong);
  color:var(--text);
  border-radius:10px;
  padding:9px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
  cursor:pointer;
}

.trending-topic:hover{
  border-color:var(--primary);
  background:var(--surface-soft);
}

.trending-topic span{
  color:var(--primary);
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
}

.trending-topic small{
  color:var(--muted);
  white-space:nowrap;
}

.inline-hashtag{
  appearance:none;
  border:0;
  background:none;
  padding:0;
  margin:0;
  color:var(--primary);
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.inline-hashtag:hover{
  text-decoration:underline;
}



/* ========================================================
   ADMIN — MIDNIGHT MARITES UI CLEANUP
   ======================================================== */

.admin-section{
  overflow:hidden;
}

.admin-section-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 0 12px;
  margin:0;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  text-align:left;
}

.admin-section-title{
  font-size:20px;
  line-height:1.2;
  font-weight:850;
}

.admin-section-chevron{
  color:var(--muted);
  font-size:16px;
  flex:0 0 auto;
}

.admin-section-body{
  padding-top:14px;
}

.admin-section-collapsed .admin-section-body{
  display:none;
}

.admin-section-collapsed .admin-section-toggle{
  border-bottom:0;
  padding-bottom:0;
}


/* Compact moderation controls */
.admin-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px !important;
  margin-top:10px;
}

.admin-actions form{
  display:inline-flex;
  margin:0 !important;
}

.admin-actions button,
.admin-item form > button{
  width:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:6px 10px !important;
  border-radius:8px !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:800;
}

.admin-item .primary,
.admin-item .secondary,
.admin-item .danger-btn{
  width:auto !important;
}


/* View All Data — Midnight Marites cards */
.data-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
  margin-top:14px;
}

.data-grid > div{
  min-width:0;
  padding:14px !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  background:var(--surface-strong) !important;
  color:var(--text) !important;
  box-shadow:none !important;
}

.data-grid > div span{
  display:block;
  margin-bottom:5px;
  color:var(--muted) !important;
  font-size:12px;
  font-weight:800;
}

.data-grid > div strong{
  display:block;
  color:var(--text) !important;
  overflow-wrap:anywhere;
}

.data-grid .break{
  color:var(--text) !important;
  word-break:break-all;
}

.admin-wrap table{
  color:var(--text);
}

.admin-wrap th{
  color:var(--muted);
}

.admin-wrap td{
  color:var(--text);
}

.admin-wrap code{
  color:var(--text);
  background:var(--surface-soft);
  border:1px solid var(--line);
  border-radius:6px;
  padding:2px 5px;
}

@media(max-width:700px){
  .admin-section-title{
    font-size:18px;
  }

  .data-grid{
    grid-template-columns:1fr;
  }
}


/* ========================================================
   MOBILE COMPACT LAYOUT
   ======================================================== */

@media(max-width:640px){

  /* ----- Header ----- */

  .topbar{
    position:sticky;
    top:0;
    display:grid !important;
    grid-template-columns:1fr;
    gap:10px !important;
    padding:10px 12px !important;
    align-items:start !important;
  }

  .brand{
    width:100%;
    gap:9px !important;
    align-items:center;
  }

  .logo{
    width:40px !important;
    height:40px !important;
    min-width:40px;
    border-radius:13px !important;
    font-size:14px !important;
  }

  .brand-copy{
    min-width:0;
    flex:1;
  }

  .brand-title-row{
    display:flex;
    align-items:center;
    gap:7px !important;
    flex-wrap:wrap;
  }

  .brand h1{
    font-size:19px !important;
    line-height:1.05;
  }

  .brand p{
    display:none !important;
  }

  .brand-alias{
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    font-size:12px !important;
    color:var(--muted) !important;
  }


  /* ----- Header controls ----- */

  .header-actions{
    width:100%;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px !important;
    align-items:center;
  }

  .header-actions > button{
    width:100% !important;
    min-width:0 !important;
    min-height:38px !important;
    padding:7px 5px !important;
    margin:0 !important;
    border-radius:10px !important;
    font-size:11px !important;
    line-height:1.05 !important;
    white-space:nowrap;
    box-shadow:none !important;
  }

  #chatBtn,
  #mentionsBtn,
  #verifyBtn{
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #themeToggle{
    width:100% !important;
    height:38px !important;
    min-width:0 !important;
    padding:0 !important;
    font-size:17px !important;
  }

  #openComposer{
    grid-column:1 / -1;
    min-height:40px !important;
    padding:8px 12px !important;
    font-size:13px !important;
  }

  .chat-unread{
    min-width:16px !important;
    height:16px !important;
    padding:0 4px !important;
    font-size:9px !important;
    margin-left:2px;
  }


  /* ----- Main page ----- */

  .layout{
    padding:10px !important;
    gap:12px !important;
  }

  .content{
    min-width:0;
  }


  /* ----- Hero ----- */

  .hero{
    padding:16px !important;
    gap:10px !important;
    border-radius:16px !important;
  }

  .hero h2{
    font-size:25px !important;
    line-height:1.08 !important;
    margin:5px 0 8px !important;
  }

  .hero p{
    font-size:13px !important;
    line-height:1.4 !important;
  }

  .hero-side{
    display:none !important;
  }

  .hero-badges{
    gap:5px !important;
    margin-top:11px !important;
  }

  .hero-badge{
    padding:5px 8px !important;
    font-size:10px !important;
  }

  .eyebrow{
    font-size:9px !important;
  }


  /* ----- Feed controls ----- */

  .tabs{
    margin:10px 0 8px !important;
    gap:6px !important;
  }

  .tab{
    padding:7px 11px !important;
    font-size:12px !important;
  }


  /* ----- Posts ----- */

  .feed{
    gap:10px !important;
  }

  .post{
    padding:14px !important;
    border-radius:16px !important;
  }

  .post-avatar{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
    border-radius:12px !important;
  }

  .post-top{
    gap:10px !important;
    margin-bottom:9px !important;
  }

  .post h3{
    font-size:17px !important;
    margin:6px 0 4px !important;
  }

  .post-meta{
    font-size:10px !important;
    gap:4px !important;
  }

  .pill,
  .anon-tag{
    font-size:9px !important;
    padding:4px 7px !important;
  }

  .post-actions{
    gap:5px !important;
    margin-top:12px !important;
    padding-top:10px !important;
    flex-wrap:wrap;
    justify-content:flex-start !important;
  }

  .post-actions .action{
    padding:6px 8px !important;
    font-size:10px !important;
  }
}



/* ========================================================
   MOBILE LOCATION FILTER
   ======================================================== */

.mobile-location-btn,
.mobile-location-close{
  display:none;
}

.location-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.location-card-head h2{
  margin-bottom:14px;
}

@media(max-width:640px){

  .mobile-location-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
  }

  .tabs{
    flex-wrap:wrap;
  }

  .mobile-location-close{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    flex:0 0 34px;
    padding:0;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--surface-soft);
    color:var(--text);
    font-size:20px;
    line-height:1;
  }

  /*
   * Keep the desktop sidebar out of the normal mobile flow.
   * It becomes an overlay only when Location is opened.
   */
  .sidebar{
    display:none !important;
  }

  body.mobile-location-open{
    overflow:hidden;
  }

  body.mobile-location-open .sidebar{
    display:block !important;
    position:fixed;
    inset:0;
    z-index:1000;
    overflow-y:auto;
    padding:16px 12px 40px;
    background:rgba(15,13,23,.92);
    backdrop-filter:blur(10px);
  }

  body.mobile-location-open .sidebar > .card{
    display:none !important;
  }

  body.mobile-location-open .sidebar > .location-filter-card{
    display:block !important;
    width:min(520px,100%);
    margin:20px auto;
    padding:18px !important;
    border-radius:18px !important;
    box-shadow:0 24px 70px rgba(0,0,0,.45) !important;
  }

  .location-card-head h2{
    margin:0 !important;
  }

  .location-filter-card label{
    margin:10px 0;
  }

  .location-filter-card select{
    min-height:46px;
  }

  .location-filter-card .find-me-notice{
    font-size:11px;
    line-height:1.4;
  }
}



/* ========================================================
   SPONSORED CAMPAIGNS ADMIN — MOBILE FIRST
   ======================================================== */

.sponsored-create,
.sponsored-edit{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-strong);
  overflow:hidden;
}

.sponsored-create > summary,
.sponsored-edit > summary{
  cursor:pointer;
  padding:11px 12px;
  font-weight:850;
  color:var(--text);
}

.sponsored-form{
  padding:12px;
}

.sponsored-form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0 12px;
}

.sponsored-form textarea{
  min-height:110px;
}

.sponsored-save{
  width:100% !important;
  margin-top:10px;
}

.sponsored-campaign-list{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:16px;
}

.sponsored-admin-card{
  min-width:0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-strong);
}

.sponsored-admin-top{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sponsored-admin-top h3{
  margin:6px 0 2px;
  color:var(--text);
  overflow-wrap:anywhere;
}

.sponsored-label{
  display:inline-flex;
  width:max-content;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(245,185,66,.12);
  color:var(--gold);
  border:1px solid rgba(245,185,66,.25);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.sponsored-statuses{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.campaign-status,
.payment-status{
  display:inline-flex;
  padding:4px 7px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:10px;
  font-weight:850;
  text-transform:capitalize;
}

.status-active{
  color:var(--success);
}

.status-paused{
  color:var(--gold);
}

.status-ended{
  color:var(--muted);
}

.payment-paid{
  color:var(--success);
}

.payment-unpaid{
  color:var(--gold);
}

.sponsored-admin-body{
  line-height:1.5;
  overflow-wrap:anywhere;
}

.sponsored-meta{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin:12px 0;
}

.sponsored-meta > div{
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-soft);
  min-width:0;
}

.sponsored-meta strong,
.sponsored-meta span{
  display:block;
}

.sponsored-meta strong{
  color:var(--muted);
  font-size:10px;
  margin-bottom:3px;
}

.sponsored-meta span{
  color:var(--text);
  font-size:12px;
  overflow-wrap:anywhere;
}

.sponsored-actions{
  justify-content:flex-start !important;
}

.sponsored-actions button{
  padding:6px 9px !important;
  font-size:11px !important;
}

@media(min-width:760px){

  .sponsored-form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .sponsored-wide{
    grid-column:1 / -1;
  }

  .sponsored-campaign-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .sponsored-admin-top{
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
  }

  .sponsored-meta{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .sponsored-save{
    width:auto !important;
  }
}

@media(max-width:480px){

  .sponsored-admin-card{
    padding:12px;
  }

  .sponsored-actions{
    gap:5px !important;
  }

  .sponsored-actions button{
    padding:6px 8px !important;
    font-size:10px !important;
  }
}



/* ========================================================
   SPONSORED PUBLIC FEED CARD — MOBILE FIRST
   ======================================================== */

.sponsored-public-card{
  border:1px solid rgba(245,185,66,.28);
  background:
    linear-gradient(
      180deg,
      rgba(245,185,66,.045),
      rgba(245,185,66,.015)
    ),
    var(--surface-strong);
}

.sponsored-public-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  margin-bottom:10px;
}

.sponsored-public-label{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(245,185,66,.3);
  background:rgba(245,185,66,.12);
  color:var(--gold);
  font-size:10px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.sponsored-public-location{
  color:var(--muted);
  font-size:11px;
  overflow-wrap:anywhere;
}

.sponsored-public-advertiser{
  color:var(--muted);
  font-size:12px;
  font-weight:750;
  margin-bottom:4px;
  overflow-wrap:anywhere;
}

.sponsored-public-title{
  margin:0 0 8px;
  color:var(--text);
  font-size:18px;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.sponsored-public-body{
  margin:0;
  color:var(--text);
  line-height:1.55;
  overflow-wrap:anywhere;
}

.sponsored-public-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:13px;
  min-height:38px;
  padding:8px 13px;
  border-radius:10px;
  background:var(--violet);
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:850;
  max-width:100%;
  overflow-wrap:anywhere;
}

.sponsored-public-cta:hover{
  filter:brightness(1.08);
}

@media(max-width:480px){

  .sponsored-public-card{
    padding:13px;
  }

  .sponsored-public-head{
    align-items:flex-start;
  }

  .sponsored-public-location{
    max-width:62%;
    text-align:right;
  }

  .sponsored-public-title{
    font-size:17px;
  }

  .sponsored-public-cta{
    width:100%;
  }
}



/* ========================================================
   LOCAL BUSINESS ADMIN — MOBILE FIRST
   ======================================================== */

.business-create,
.business-edit{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-strong);
  overflow:hidden;
}

.business-create > summary,
.business-edit > summary{
  cursor:pointer;
  padding:11px 12px;
  font-weight:850;
  color:var(--text);
}

.business-form{
  padding:12px;
}

.business-form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0 12px;
}

.business-form textarea{
  min-height:110px;
}

.business-save{
  width:100% !important;
  margin-top:10px;
}

.business-admin-list{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:16px;
}

.business-admin-card{
  min-width:0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-strong);
}

.business-admin-top{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.business-admin-top h3{
  margin:6px 0 2px;
  overflow-wrap:anywhere;
}

.business-badges,
.business-statuses{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.business-verified,
.business-featured{
  display:inline-flex;
  width:max-content;
  padding:4px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
}

.business-verified{
  color:var(--success);
  border:1px solid rgba(54,201,143,.28);
  background:rgba(54,201,143,.08);
}

.business-featured{
  color:var(--gold);
  border:1px solid rgba(245,185,66,.28);
  background:rgba(245,185,66,.08);
}

.business-admin-description{
  line-height:1.5;
  overflow-wrap:anywhere;
}

.business-meta{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin:12px 0;
}

.business-meta > div{
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-soft);
  min-width:0;
}

.business-meta strong,
.business-meta span{
  display:block;
}

.business-meta strong{
  color:var(--muted);
  font-size:10px;
  margin-bottom:3px;
}

.business-meta span{
  color:var(--text);
  font-size:12px;
  overflow-wrap:anywhere;
}

.business-actions{
  justify-content:flex-start !important;
}

.business-actions button{
  padding:6px 9px !important;
  font-size:11px !important;
}

@media(min-width:760px){

  .business-form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .business-wide{
    grid-column:1 / -1;
  }

  .business-admin-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .business-admin-top{
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
  }

  .business-meta{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .business-save{
    width:auto !important;
  }
}

@media(max-width:480px){

  .business-admin-card{
    padding:12px;
  }

  .business-actions{
    gap:5px !important;
  }

  .business-actions button{
    padding:6px 8px !important;
    font-size:10px !important;
  }
}



/* ========================================================
   PUBLIC LOCAL BUSINESSES — MOBILE FIRST
   ======================================================== */

.local-business-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.local-business-head h2{
  margin:0;
}

.business-sidebar-list,
.business-directory-list{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.public-business-card{
  min-width:0;
  padding:13px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface-strong);
}

.public-business-card.compact{
  padding:10px;
}

.public-business-card h3{
  margin:6px 0 3px;
  color:var(--text);
  font-size:16px;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.public-business-card.compact h3{
  font-size:14px;
}

.public-business-badges{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.public-business-verified,
.public-business-featured{
  display:inline-flex;
  width:max-content;
  padding:3px 6px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
}

.public-business-verified{
  color:var(--success);
  border:1px solid rgba(54,201,143,.28);
  background:rgba(54,201,143,.08);
}

.public-business-featured{
  color:var(--gold);
  border:1px solid rgba(245,185,66,.28);
  background:rgba(245,185,66,.08);
}

.public-business-category{
  color:var(--violet);
  font-size:11px;
  font-weight:800;
}

.public-business-description{
  margin:8px 0;
  color:var(--text);
  font-size:13px;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.public-business-card.compact .public-business-description{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:12px;
}

.public-business-location,
.public-business-contact{
  margin-top:6px;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.public-business-links{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px;
}

.public-business-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--text);
  background:var(--surface-soft);
  text-decoration:none;
  font-size:11px;
  font-weight:800;
}

.businesses-dialog{
  width:min(760px,calc(100vw - 24px));
  max-height:88vh;
  padding:0;
  border:none;
  border-radius:16px;
  background:transparent;
}

.businesses-shell{
  max-height:88vh;
  overflow:auto;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  color:var(--text);
}

.businesses-location-note{
  margin-top:0;
}

.business-directory-empty{
  display:flex;
  min-height:180px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  color:var(--muted);
}

.mobile-businesses-btn{
  display:none;
}

@media(min-width:760px){

  .business-directory-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:640px){

  .mobile-businesses-btn{
    display:inline-flex;
  }

  .businesses-dialog{
    width:calc(100vw - 16px);
    max-height:92vh;
  }

  .businesses-shell{
    max-height:92vh;
    padding:13px;
  }

  .public-business-card{
    padding:12px;
  }

  .public-business-links{
    display:grid;
    grid-template-columns:1fr;
  }

  .public-business-link{
    width:100%;
  }
}



/* ========================================================
   EVENTS & JOBS ADMIN — MOBILE FIRST
   ======================================================== */

.listing-create,
.listing-edit{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-strong);
  overflow:hidden;
}

.listing-create > summary,
.listing-edit > summary{
  cursor:pointer;
  padding:11px 12px;
  font-weight:850;
}

.listing-form{
  padding:12px;
}

.listing-form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0 12px;
}

.listing-form textarea{
  min-height:115px;
}

.listing-save{
  width:100% !important;
  margin-top:10px;
}

.listing-admin-list{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:16px;
}

.listing-admin-card{
  min-width:0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-strong);
}

.listing-admin-top{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.listing-admin-top h3{
  margin:6px 0 2px;
  overflow-wrap:anywhere;
}

.listing-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.listing-type{
  display:inline-flex;
  width:max-content;
  padding:4px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
}

.listing-type-event{
  color:var(--coral);
  border:1px solid rgba(233,79,100,.28);
  background:rgba(233,79,100,.08);
}

.listing-type-job{
  color:var(--teal);
  border:1px solid rgba(56,189,178,.28);
  background:rgba(56,189,178,.08);
}

.listing-admin-description{
  line-height:1.5;
  overflow-wrap:anywhere;
}

.listing-meta{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin:12px 0;
}

.listing-meta > div{
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-soft);
}

.listing-meta strong,
.listing-meta span{
  display:block;
}

.listing-meta strong{
  color:var(--muted);
  font-size:10px;
  margin-bottom:3px;
}

.listing-meta span{
  font-size:12px;
  overflow-wrap:anywhere;
}

.listing-actions{
  justify-content:flex-start !important;
}

.listing-actions button{
  padding:6px 9px !important;
  font-size:11px !important;
}

@media(min-width:760px){

  .listing-form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .listing-wide{
    grid-column:1 / -1;
  }

  .listing-admin-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .listing-admin-top{
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-start;
  }

  .listing-meta{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .listing-save{
    width:auto !important;
  }
}

@media(max-width:480px){

  .listing-admin-card{
    padding:12px;
  }

  .listing-actions{
    gap:5px !important;
  }

  .listing-actions button{
    padding:6px 8px !important;
    font-size:10px !important;
  }
}



/* ========================================================
   PUBLIC EVENTS & JOBS — MOBILE FIRST
   ======================================================== */

.local-listings-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.local-listings-head h2{
  margin:0;
}

.listing-sidebar-list,
.listing-directory-list{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.public-listing-card{
  min-width:0;
  padding:13px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface-strong);
}

.public-listing-card.compact{
  padding:10px;
}

.public-listing-card h3{
  margin:6px 0 3px;
  font-size:16px;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.public-listing-card.compact h3{
  font-size:14px;
}

.public-listing-badges{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.public-listing-type{
  display:inline-flex;
  width:max-content;
  padding:3px 6px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
}

.public-listing-event{
  color:var(--coral);
  border:1px solid rgba(233,79,100,.28);
  background:rgba(233,79,100,.08);
}

.public-listing-job{
  color:var(--teal);
  border:1px solid rgba(56,189,178,.28);
  background:rgba(56,189,178,.08);
}

.public-listing-org{
  color:var(--muted);
  font-size:12px;
  font-weight:750;
}

.public-listing-category{
  margin-top:3px;
  color:var(--violet);
  font-size:11px;
  font-weight:800;
}

.public-listing-description{
  margin:8px 0;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.public-listing-card.compact .public-listing-description{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:12px;
}

.public-listing-location,
.public-listing-contact,
.public-listing-date{
  margin-top:6px;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.public-listing-date{
  color:var(--text);
  font-weight:700;
}

.public-listing-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:10px;
  min-height:35px;
  padding:7px 11px;
  border-radius:9px;
  background:var(--violet);
  color:#fff;
  text-decoration:none;
  font-size:11px;
  font-weight:850;
}

.listings-dialog{
  width:min(780px,calc(100vw - 24px));
  max-height:88vh;
  padding:0;
  border:none;
  border-radius:16px;
  background:transparent;
}

.listings-shell{
  max-height:88vh;
  overflow:auto;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  color:var(--text);
}

.listing-public-tabs{
  display:flex;
  gap:7px;
  overflow-x:auto;
  margin:12px 0;
  padding-bottom:2px;
}

.listing-public-tab{
  flex:0 0 auto;
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-soft);
  color:var(--text);
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}

.listing-public-tab.active{
  border-color:var(--violet);
  background:rgba(168,85,247,.14);
  color:var(--text);
}

.listing-directory-empty{
  display:flex;
  min-height:180px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  color:var(--muted);
}

.mobile-listings-btn{
  display:none;
}

@media(min-width:760px){

  .listing-directory-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}

@media(max-width:640px){

  .mobile-listings-btn{
    display:inline-flex;
  }

  .listings-dialog{
    width:calc(100vw - 16px);
    max-height:92vh;
  }

  .listings-shell{
    max-height:92vh;
    padding:13px;
  }

  .public-listing-card{
    padding:12px;
  }

  .public-listing-cta{
    width:100%;
  }

}



/* ========================================================
   ADVERTISE ON CHISMIS — MOBILE FIRST
   ======================================================== */

.mobile-advertise-card{
  display:none;
}

.advertise-dialog{
  width:min(820px,calc(100vw - 24px));
  max-height:92vh;
  padding:0;
  border:none;
  border-radius:16px;
  background:transparent;
}

.advertise-shell{
  max-height:92vh;
  overflow:auto;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  color:var(--text);
}

.advertise-intro{
  margin-top:0;
}

.advertise-products{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:14px 0;
}

.advertise-product{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:
    "icon title price"
    "icon desc price";
  gap:3px 10px;
  align-items:center;
  width:100%;
  padding:12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface-strong);
  color:var(--text);
  text-align:left;
  cursor:pointer;
}

.advertise-product.active{
  border-color:var(--violet);
  box-shadow:0 0 0 2px rgba(168,85,247,.12);
}

.advertise-product-icon{
  grid-area:icon;
  font-size:22px;
}

.advertise-product strong{
  grid-area:title;
}

.advertise-product span:not(.advertise-product-icon){
  grid-area:desc;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}

.advertise-product b{
  grid-area:price;
  color:var(--gold);
  font-size:12px;
  white-space:nowrap;
}

.advertise-selected{
  margin:10px 0;
  padding:9px 10px;
  border:1px solid rgba(168,85,247,.28);
  border-radius:10px;
  background:rgba(168,85,247,.08);
  font-weight:850;
}

.advertise-form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0 12px;
}

.advertise-form textarea{
  min-height:110px;
}

.advertise-submit{
  width:100%;
  margin-top:10px;
}

@media(min-width:760px){

  .advertise-products{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .advertise-form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .advertise-wide{
    grid-column:1 / -1;
  }

  .advertise-submit{
    width:auto;
  }
}

@media(max-width:640px){

  .advertise-header-btn{
    display:none !important;
  }

  .mobile-advertise-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:8px 0 12px;
    padding:10px 12px;
    border:1px solid rgba(245,185,66,.24);
    border-radius:12px;
    background:rgba(245,185,66,.05);
  }

  .mobile-advertise-card > div{
    min-width:0;
  }

  .mobile-advertise-card strong,
  .mobile-advertise-card span{
    display:block;
  }

  .mobile-advertise-card span{
    margin-top:2px;
    color:var(--muted);
    font-size:10px;
    line-height:1.25;
  }

  .mobile-advertise-card button{
    flex:0 0 auto;
    padding:7px 9px !important;
    font-size:10px !important;
  }

  .advertise-dialog{
    width:calc(100vw - 16px);
  }

  .advertise-shell{
    padding:13px;
  }

  .advertise-product{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "icon title"
      "icon desc"
      "price price";
  }

  .advertise-product b{
    margin-top:4px;
  }
}



/* ========================================================
   ADVERTISING REQUESTS ADMIN — MOBILE FIRST
   ======================================================== */

.advertising-request-list{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:16px;
}

.advertising-request-card{
  min-width:0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-strong);
}

.advertising-request-top{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.advertising-request-top h3{
  margin:7px 0 2px;
  overflow-wrap:anywhere;
}

.advertising-request-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.advertising-product-badge,
.advertising-request-status{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:4px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  text-transform:capitalize;
}

.advertising-product-badge{
  color:var(--gold);
  border:1px solid rgba(245,185,66,.28);
  background:rgba(245,185,66,.08);
}

.advertising-request-status{
  border:1px solid var(--line);
  color:var(--muted);
}

.request-status-new{
  color:var(--coral);
}

.request-status-contacted{
  color:var(--gold);
}

.request-status-approved{
  color:var(--success);
}

.request-status-converted{
  color:var(--teal);
}

.request-status-closed{
  color:var(--muted);
}

.advertising-request-meta{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin:12px 0;
}

.advertising-request-meta > div{
  min-width:0;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-soft);
}

.advertising-request-meta strong,
.advertising-request-meta span{
  display:block;
}

.advertising-request-meta strong{
  margin-bottom:3px;
  color:var(--muted);
  font-size:10px;
}

.advertising-request-meta span{
  font-size:12px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.advertising-request-message{
  margin:10px 0;
  padding:10px;
  border-left:3px solid var(--violet);
  border-radius:8px;
  background:var(--surface-soft);
}

.advertising-request-message strong{
  font-size:11px;
}

.advertising-request-message p{
  margin:5px 0 0;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.advertising-notes-form{
  margin-top:12px;
}

.advertising-notes-form textarea{
  min-height:85px;
}

.advertising-notes-form button{
  width:100%;
}

.advertising-status-actions{
  margin-top:10px;
}

.advertising-status-actions form{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
}

.advertising-status-actions button{
  width:100%;
}

.advertising-convert-help{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:11px;
  padding:10px;
  border:1px solid rgba(54,201,143,.25);
  border-radius:10px;
  background:rgba(54,201,143,.06);
}

.advertising-convert-help strong{
  color:var(--success);
  font-size:11px;
}

.advertising-convert-help span{
  font-size:11px;
  line-height:1.4;
}

@media(min-width:760px){

  .advertising-request-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .advertising-request-meta{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .advertising-notes-form button{
    width:auto;
  }

  .advertising-status-actions form{
    grid-template-columns:minmax(180px,240px) auto;
    align-items:end;
  }

  .advertising-status-actions button{
    width:auto;
  }
}

@media(max-width:480px){

  .advertising-request-card{
    padding:12px;
  }

  .advertising-request-meta span{
    font-size:11px;
  }
}



/* ========================================================
   POST + ADMIN UX UPGRADE
   ======================================================== */

/* --- Main CTA --- */

#openComposer{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  overflow:hidden;
  animation:chismisCtaGlow 3.4s ease-in-out infinite;
}

#openComposer .cta-copy{
  position:relative;
  z-index:1;
}

#openComposer .cta-arrow{
  display:inline-block;
  opacity:.72;
  font-size:1.15em;
  font-weight:900;
  line-height:1;
}

#openComposer .cta-arrow-left{
  animation:chismisArrowLeft 2.8s ease-in-out infinite;
}

#openComposer .cta-arrow-right{
  animation:chismisArrowRight 2.8s ease-in-out infinite;
}

@keyframes chismisCtaGlow{
  0%,100%{
    box-shadow:0 0 0 rgba(168,85,247,0);
  }
  50%{
    box-shadow:0 0 16px rgba(168,85,247,.22);
  }
}

@keyframes chismisArrowLeft{
  0%,100%{transform:translateX(0);opacity:.58;}
  50%{transform:translateX(2px);opacity:.92;}
}

@keyframes chismisArrowRight{
  0%,100%{transform:translateX(0);opacity:.58;}
  50%{transform:translateX(-2px);opacity:.92;}
}

@media(prefers-reduced-motion:reduce){

  #openComposer,
  #openComposer .cta-arrow{
    animation:none !important;
  }
}

/* --- Edited label --- */

.post-edited-label{
  display:inline-flex;
  align-items:center;
  padding:2px 6px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:10px;
  font-weight:700;
}

/* --- Admin collapse --- */

.admin-section-toggle{
  position:relative;
  margin:-4px -4px 0;
  padding:6px 36px 6px 4px;
  cursor:pointer;
  user-select:none;
}

.admin-section-toggle::after{
  content:"⌄";
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%) rotate(0deg);
  color:var(--muted);
  font-size:18px;
  transition:transform .18s ease;
}

.admin-section:not(.admin-collapsed) >
.admin-section-toggle::after{
  transform:translateY(-50%) rotate(180deg);
}

.admin-section.admin-collapsed > :not(h2){
  display:none !important;
}

.admin-section{
  scroll-margin-top:16px;
}

.admin-section-highlight{
  outline:2px solid rgba(168,85,247,.38);
  outline-offset:2px;
}

/* --- Admin tiles --- */

.admin-stat-clickable{
  cursor:pointer;
  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.admin-stat-clickable:hover{
  transform:translateY(-2px);
  border-color:rgba(168,85,247,.45);
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}

.admin-stat-clickable:focus-visible,
.admin-section-toggle:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:3px;
}

/* --- Recent posts admin --- */

.admin-post-head{
  display:flex;
  flex-direction:column;
  gap:3px;
}

@media(min-width:700px){

  .admin-post-head{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
}

/* --- Mobile CTA --- */

@media(max-width:700px){

  #openComposer{
    width:100%;
    min-height:44px;
    font-size:13px;
    gap:5px;
  }

  #openComposer .cta-arrow{
    font-size:1.05em;
  }
}



/* ADMIN TILE-ONLY DETAILS */

body.admin-dashboard-page .admin-section{
  display:none !important;
}

body.admin-dashboard-page .admin-section.admin-detail-active{
  display:block !important;
}

body.admin-user-page .admin-section{
  display:block !important;
}

.admin-stat-clickable{
  cursor:pointer;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.admin-stat-clickable:hover{
  transform:translateY(-2px);
}

.admin-stat-clickable.admin-stat-active{
  border-color:#A855F7 !important;
  box-shadow:
    0 0 0 1px rgba(168,85,247,.32),
    0 10px 28px rgba(0,0,0,.18);
}

.admin-detail-active{
  margin-top:28px;
  scroll-margin-top:20px;
}

@media(max-width:700px){

  .admin-detail-active{
    margin-top:18px;
  }

}



/* =========================================================
   CHISMIS ACCOUNT HUB
   ========================================================= */

.account-hub-trigger{
  appearance:none;
  border:0;
  cursor:pointer;
  font:inherit;
  padding:0;
}

.account-hub-trigger:hover{
  transform:translateY(-1px);
}

.account-hub-trigger:focus-visible{
  outline:3px solid rgba(168,85,247,.35);
  outline-offset:3px;
}

.account-hub-backdrop{
  position:fixed;
  inset:0;
  z-index:9998;
  background:rgba(4,3,8,.58);
  opacity:0;
  transition:opacity .2s ease;
  backdrop-filter:blur(2px);
}

.account-hub-backdrop.is-open{
  opacity:1;
}

.account-hub{
  position:fixed;
  top:0;
  left:0;
  z-index:9999;
  width:min(360px,90vw);
  height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--surface,#181522);
  color:var(--text,#F8F7FB);
  border-right:1px solid var(--line,#3A3346);
  box-shadow:20px 0 60px rgba(0,0,0,.28);
  transform:translateX(-104%);
  transition:transform .22s ease;
  overflow:hidden;
}

.account-hub.is-open{
  transform:translateX(0);
}

body.account-hub-open{
  overflow:hidden;
}

.account-hub-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:24px 22px 18px;
  border-bottom:1px solid var(--line,#3A3346);
}

.account-hub-head h2{
  margin:3px 0 4px;
  font-size:24px;
}

.account-hub-head p{
  margin:0;
  line-height:1.4;
}

.account-hub-close{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid var(--line,#3A3346);
  border-radius:12px;
  background:var(--surface-strong,#211C2B);
  color:var(--text,#F8F7FB);
  font-size:24px;
  cursor:pointer;
}

.account-hub-nav{
  flex:1;
  overflow:auto;
  padding:12px;
}

.account-hub-group{
  padding:10px 0 14px;
}

.account-hub-group + .account-hub-group{
  border-top:1px solid var(--line,#3A3346);
}

.account-hub-label{
  display:block;
  padding:0 10px 7px;
  color:var(--muted,#B8B3C5);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.account-hub-item{
  width:100%;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:11px 10px;
  border:0;
  border-radius:13px;
  background:transparent;
  color:var(--text,#F8F7FB);
  text-align:left;
  cursor:pointer;
}

.account-hub-item:hover{
  background:var(--surface-strong,#211C2B);
}

.account-hub-item strong,
.account-hub-item small{
  display:block;
}

.account-hub-item strong{
  font-size:14px;
}

.account-hub-item small{
  margin-top:2px;
  color:var(--muted,#B8B3C5);
  font-size:11px;
  font-weight:500;
}

.account-hub-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:var(--surface-strong,#211C2B);
  font-size:18px;
}

.account-hub-arrow{
  color:var(--muted,#B8B3C5);
  font-size:24px;
}

.account-hub-soon{
  padding:4px 7px;
  border:1px solid var(--line,#3A3346);
  border-radius:999px;
  color:var(--muted,#B8B3C5);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
}

.account-hub-item.is-coming-soon{
  opacity:.62;
  cursor:default;
}

.account-hub-footer{
  padding:14px 18px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line,#3A3346);
}

.account-hub-login,
.account-hub-logout{
  width:100%;
  min-height:44px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
}

.account-hub-login{
  border:0;
  background:var(--primary,#A855F7);
  color:white;
}

.account-hub-logout{
  border:1px solid var(--line,#3A3346);
  background:transparent;
  color:var(--text,#F8F7FB);
}

@media(max-width:680px){

  .account-hub{
    width:min(88vw,340px);
  }

  .account-hub-head{
    padding:20px 18px 15px;
  }

  .account-hub-nav{
    padding:9px;
  }

  .account-hub-item{
    min-height:58px;
    padding:9px;
  }

}

@media(prefers-reduced-motion:reduce){

  .account-hub,
  .account-hub-backdrop{
    transition:none !important;
  }

}



/* ACCOUNT HUB HEADER CLEANUP */

.topbar .account-hub-proxy,
.brand .account-hub-proxy{
  display:none !important;
}

/* Keep the remaining header actions tidy */
.header-actions{
  align-items:center;
}

/* Mobile: keep the essential controls compact */
@media(max-width:680px){

  .header-actions{
    gap:6px;
  }

  #themeToggle{
    flex:0 0 auto;
  }

  #advertiseBtn{
    flex:0 0 auto;
  }

  #openComposer{
    min-width:0;
  }

}



/* BROWSE BY LOCATION REDESIGN */

.location-filter-card{
  padding:0 !important;
  overflow:hidden;
}

.location-filter-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border:0;
  background:transparent;
  color:var(--text,#F8F7FB);
  text-align:left;
  cursor:pointer;
}

.location-filter-toggle strong,
.location-filter-toggle small{
  display:block;
}

.location-filter-toggle strong{
  font-size:16px;
}

.location-filter-toggle small{
  margin-top:3px;
  color:var(--muted,#B8B3C5);
  font-size:11px;
  font-weight:600;
}

.location-filter-chevron{
  color:var(--muted,#B8B3C5);
  font-size:20px;
}

.location-filter-body{
  padding:0 18px 18px;
  border-top:1px solid var(--line,#3A3346);
}

.location-filter-body[hidden]{
  display:none !important;
}

.location-filter-body label{
  display:block;
  margin-top:12px;
}

.location-privacy-note{
  margin-top:14px;
}

.location-card-mobile-head{
  min-height:0;
  margin:0;
}

@media(max-width:680px){

  .location-filter-toggle{
    padding:14px 15px;
  }

  .location-filter-body{
    padding:0 15px 15px;
  }

}



/* Chismis Anonymous hero title */
.hero-title-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.hero-title-row .hero-hot{
  justify-self:auto;
  flex:0 0 auto;
  animation:floaty 4s ease-in-out infinite;
}

@media(max-width:640px){
  .hero-title-row{
    gap:10px;
  }

  .hero-title-row .hero-hot{
    padding:7px 10px;
    font-size:11px;
  }
}

/* Store-readiness dialogs: use more width on desktop, keep mobile compact */
@media(min-width:900px){
  #legalDialog .composer-card,
  #safetyDialog .composer-card,
  #supportDialog .composer-card{
    width:min(760px, calc(100vw - 64px));
    max-width:760px;
  }

  #legalDialog .legal-copy,
  #safetyDialog .legal-copy,
  #supportDialog .legal-copy{
    max-width:none;
  }
}


/* Account deletion */
.account-hub-danger strong{
  color:#E94F64;
}

.delete-account-dialog{
  width:min(560px,calc(100vw - 24px));
}

.delete-confirm-label{
  margin-top:18px;
}

.delete-confirm-label input{
  margin-top:8px;
}

.delete-account-button{
  border:0;
  border-radius:14px;
  padding:12px 16px;
  min-height:44px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  background:#E94F64;
  color:#fff;
}

.delete-account-button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.delete-account-actions{
  margin-top:18px;
}

@media(max-width:640px){
  .delete-account-actions{
    display:flex;
    flex-direction:column-reverse;
    gap:10px;
  }

  .delete-account-actions button{
    width:100%;
    min-height:46px;
  }
}


/* Suspension and appeals */
.admin-account-enforcement{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line);
}

.admin-account-enforcement form{
  display:grid;
  gap:12px;
}

.admin-account-enforcement textarea{
  min-height:110px;
}

.suspension-dialog{
  width:min(560px,calc(100vw - 24px));
}

#appealMessage{
  min-height:140px;
}

@media(max-width:640px){
  .suspension-dialog .composer-card{
    width:100%;
  }

  #submitAppeal,
  #closeSuspensionDialog{
    min-height:46px;
  }
}


/* Account onboarding gates */
.onboarding-gate-dialog{
  width:min(560px,calc(100vw - 24px));
}

.onboarding-gate-card{
  display:grid;
  gap:16px;
}

.onboarding-rule-list{
  display:grid;
  gap:10px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}

.onboarding-review-actions{
  display:grid;
  gap:10px;
}

.onboarding-checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  line-height:1.45;
}

.onboarding-checkbox input{
  width:20px;
  height:20px;
  flex:0 0 20px;
  margin-top:1px;
}

@media(max-width:640px){
  .onboarding-gate-dialog{
    width:calc(100vw - 16px);
  }

  .onboarding-gate-card{
    width:100%;
  }

  #confirmAgeBtn,
  #ageLogoutBtn,
  #acceptTermsBtn,
  #termsLogoutBtn,
  #reviewTermsBtn,
  #reviewSafetyBtn{
    min-height:46px;
  }
}

/* ========================================================
   iOS / MOBILE VIEWPORT OVERFLOW FIX
   ======================================================== */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

@media(max-width:640px){

  .topbar,
  .layout,
  .content,
  .hero{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .topbar{
    overflow-x:hidden;
  }

  .brand,
  .brand-copy,
  .brand-title-row,
  .header-actions{
    min-width:0;
    max-width:100%;
  }

  .header-actions > button{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .layout{
    overflow-x:hidden;
  }

  .hero{
    overflow:hidden;
  }

  img,
  svg,
  video,
  canvas{
    max-width:100%;
  }
}

/* iOS safe-area support for top navigation */
@supports (padding: max(0px)) {
  .topbar {
    padding-top: max(14px, calc(env(safe-area-inset-top) + 8px));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}