:root {
  --bg: #050708;
  --panel: #0b0f12;
  --panel-2: #11161a;
  --panel-3: #171d22;
  --text: #f5f7f8;
  --muted: #9aa5ad;
  --line: #242c32;
  --blue: #0798e7;
  --blue-2: #0b7de3;
  --blue-soft: rgba(7, 152, 231, .14);
  --success: #45d18a;
  --danger: #ff6b6b;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% 5%, rgba(7,152,231,.10), transparent 28rem),
    linear-gradient(180deg, #050708 0%, #080b0d 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.app-shell { width: min(100%, 760px); margin: 0 auto; min-height: 100vh; position: relative; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  height: 82px; padding: max(14px, env(safe-area-inset-top)) 18px 10px;
  background: linear-gradient(180deg, rgba(5,7,8,.98), rgba(5,7,8,.88), rgba(5,7,8,0));
  backdrop-filter: blur(14px);
}
.brand { border: 0; background: transparent; padding: 0; cursor: pointer; }
.brand img { width: 166px; height: auto; display: block; }
.top-actions { display: flex; gap: 8px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid transparent;
  background: transparent; cursor: pointer; position: relative; font-size: 21px;
}
.icon-btn:hover { background: var(--panel-2); border-color: var(--line); }
.notification-dot {
  position: absolute; top: 2px; right: 1px; min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 99px; background: var(--blue); color: white; font-size: 10px; font-weight: 800;
}

main { padding: 0 18px 105px; }
.hero {
  position: relative; overflow: hidden; min-height: 340px; border-radius: 26px; margin-top: 4px;
  border: 1px solid var(--line); background:
    linear-gradient(90deg, rgba(5,7,8,.98) 0%, rgba(5,7,8,.88) 42%, rgba(5,7,8,.26) 100%),
    url('assets/community-hero.jpg') center/cover;
  box-shadow: var(--shadow);
}
.hero.no-photo { background: radial-gradient(circle at 80% 20%, rgba(7,152,231,.18), transparent 35%), linear-gradient(145deg,#090d10,#050708 70%); }
.hero-content { padding: 36px 28px 28px; max-width: 560px; }
.eyebrow { color: var(--blue); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 800; }
h1 { font-size: clamp(38px, 7vw, 62px); line-height: .98; letter-spacing: -.045em; margin: 16px 0 16px; }
h1 .blue, .blue { color: var(--blue); }
.lead { margin: 0 0 24px; color: #ced5d9; line-height: 1.55; font-size: 17px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  border: 1px solid var(--line); border-radius: 13px; min-height: 48px; padding: 0 18px;
  background: var(--panel-2); cursor: pointer; font-weight: 750; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.btn:hover { transform: translateY(-1px); border-color: #3a4650; }
.btn-primary { background: linear-gradient(135deg, var(--blue), var(--blue-2)); border-color: transparent; color: #fff; }
.btn-ghost { background: rgba(17,22,26,.82); }
.btn-block { width: 100%; }
.btn-danger { color: #ffdede; border-color: rgba(255,107,107,.35); background: rgba(255,107,107,.08); }

.section { margin-top: 28px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section h2, .section h3 { margin: 0; letter-spacing: -.02em; }
.section h2 { font-size: 22px; }
.section h3 { font-size: 18px; }
.link-btn { border: 0; background: transparent; color: var(--blue); cursor: pointer; padding: 5px; }

.stats-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { padding: 20px 14px; text-align: center; position: relative; }
.stat + .stat:before { content:""; position:absolute; left:0; top:20%; height:60%; width:1px; background:var(--line); }
.stat-icon { color: var(--blue); font-size: 25px; display: block; margin-bottom: 8px; }
.stat strong { display: block; font-size: 23px; }
.stat small { color: var(--muted); }

.cards-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 72%); gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
.cards-row::-webkit-scrollbar { display: none; }
.business-card { scroll-snap-align: start; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); overflow: hidden; min-height: 250px; cursor: pointer; }
.card-cover { height: 126px; background: linear-gradient(145deg,#1d252b,#0c1013); position: relative; overflow: hidden; }
.card-cover img { width: 100%; height: 100%; object-fit: cover; display:block; }
.badge { display: inline-flex; align-items:center; gap:5px; border-radius: 8px; padding: 5px 8px; background: var(--blue-soft); color: #79c9ff; font-size: 11px; font-weight: 800; }
.card-cover .badge { position: absolute; left: 10px; top: 10px; background: var(--blue); color:white; }
.card-body { padding: 14px; }
.card-title { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.card-meta { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.recommend { color: #cfd6da; font-size: 12px; margin-bottom: 12px; }
.offer { display:inline-flex; border-radius:7px; background:var(--blue-soft); color:#78c9ff; padding:6px 8px; font-size:12px; }

.offer-banner { display: flex; align-items:center; gap:14px; padding: 18px; border-radius: var(--radius); border:1px solid rgba(7,152,231,.4); background: linear-gradient(90deg,rgba(7,152,231,.12),rgba(7,152,231,.03)); cursor:pointer; }
.offer-banner .offer-icon { font-size: 30px; }
.offer-banner strong { color:#78c9ff; display:block; font-size:17px; }
.offer-banner small { color: var(--muted); }
.offer-banner .arrow { margin-left:auto; color:var(--blue); font-size:24px; }

.category-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.category-card { min-height:92px; border:1px solid var(--line); background:var(--panel); border-radius:15px; padding:14px; cursor:pointer; text-align:left; }
.category-card:hover { border-color:rgba(7,152,231,.6); background:var(--panel-2); }
.category-icon { color:var(--blue); font-size:23px; display:block; margin-bottom:8px; }
.category-card strong { display:block; font-size:14px; }
.category-card small { color:var(--muted); }

.page-title { margin: 6px 0 18px; }
.page-title h1 { font-size: 36px; line-height:1.05; margin:0 0 8px; }
.page-title p { color:var(--muted); margin:0; }
.searchbar { display:flex; gap:10px; }
.input-wrap { flex:1; position:relative; }
.input-wrap .search-icon { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--muted); }
.input, select, textarea {
  width:100%; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:13px; min-height:48px; padding: 12px 14px; outline:none;
}
.input.search-input { padding-left:42px; }
.input:focus, select:focus, textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(7,152,231,.12); }
textarea { min-height:110px; resize:vertical; }
.filters { display:flex; gap:8px; overflow-x:auto; margin:12px 0 18px; scrollbar-width:none; }
.filter-chip { flex:0 0 auto; border:1px solid var(--line); background:var(--panel); border-radius:99px; padding:8px 12px; color:#dce2e5; cursor:pointer; font-size:13px; }
.filter-chip.active { color:#fff; background:var(--blue); border-color:var(--blue); }
.results-list { display:grid; gap:10px; }
.result-card { display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; border:1px solid var(--line); border-radius:16px; padding:13px; background:var(--panel); cursor:pointer; }
.result-logo { width:64px; height:64px; border-radius:50%; background:#fff; color:#101316; display:grid; place-items:center; font-weight:900; text-align:center; padding:7px; font-size:12px; overflow:hidden; }
.result-logo img { width:100%; height:100%; object-fit:cover; }
.result-card h3 { margin:0 0 5px; font-size:16px; }
.result-card p { margin:2px 0; color:var(--muted); font-size:13px; }
.save-btn { border:0; background:transparent; font-size:22px; cursor:pointer; }

.form-card { border:1px solid var(--line); background:var(--panel); border-radius:var(--radius); padding:18px; }
.form-grid { display:grid; gap:15px; }
.form-row { display:grid; gap:7px; }
.form-row label { font-size:13px; font-weight:700; color:#dce2e5; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.segmented { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.segmented button { min-height:66px; border:1px solid var(--line); border-radius:13px; background:var(--panel-2); cursor:pointer; padding:10px; text-align:left; }
.segmented button.active { border-color:var(--blue); background:rgba(7,152,231,.09); }
.stepper { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.step { display:grid; place-items:center; gap:6px; color:var(--muted); font-size:11px; }
.step span { width:27px; height:27px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; }
.step.active { color:#7bcaff; }
.step.active span { background:var(--blue); border-color:var(--blue); color:white; }

.profile-card { border:1px solid var(--line); background:linear-gradient(145deg,var(--panel-2),var(--panel)); border-radius:22px; padding:20px; }
.avatar { width:74px; height:74px; border-radius:50%; background:linear-gradient(145deg,var(--blue),#084e86); display:grid; place-items:center; font-size:28px; font-weight:900; }
.profile-top { display:flex; gap:14px; align-items:center; }
.profile-top h2 { margin:0 0 5px; }
.profile-top p { margin:0; color:var(--muted); }
.profile-actions { display:flex; gap:8px; margin-top:16px; }
.my-listing { margin-top:12px; border:1px solid var(--line); border-radius:15px; padding:14px; background:var(--panel); display:flex; justify-content:space-between; gap:12px; align-items:center; }
.my-listing p { margin:3px 0 0; color:var(--muted); font-size:13px; }
.empty { text-align:center; padding:38px 18px; color:var(--muted); border:1px dashed var(--line); border-radius:18px; }

.detail-hero { height:220px; border-radius:22px; overflow:hidden; background:linear-gradient(145deg,#202a31,#0d1114); border:1px solid var(--line); }
.detail-hero img { width:100%; height:100%; object-fit:cover; }
.detail-head { display:flex; gap:14px; align-items:center; margin-top:-34px; padding:0 16px; position:relative; }
.detail-logo { width:84px; height:84px; border-radius:50%; border:5px solid var(--bg); background:white; color:#111; display:grid; place-items:center; font-weight:900; text-align:center; }
.detail-title h1 { font-size:27px; margin:0 0 4px; }
.detail-title p { margin:0; color:var(--muted); }
.detail-section { padding:18px 4px; border-bottom:1px solid var(--line); }
.detail-section h3 { margin:0 0 10px; }
.detail-section p { color:#c7cfd4; line-height:1.55; }
.contact-list { display:grid; gap:10px; color:#dfe5e8; }
.contact-row { display:flex; gap:10px; align-items:flex-start; }
.contact-row span:first-child { color:var(--blue); width:22px; }

.bottom-nav {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,760px); z-index:30;
  display:grid; grid-template-columns:repeat(5,1fr); min-height:78px; padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:rgba(8,11,13,.96); border-top:1px solid var(--line); backdrop-filter:blur(18px);
}
.nav-item { border:0; background:transparent; color:#838f97; cursor:pointer; display:grid; place-items:center; align-content:center; gap:3px; }
.nav-item span { font-size:23px; line-height:1; }
.nav-item small { font-size:10px; }
.nav-item.active { color:var(--blue); }
.add-nav span { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--blue),var(--blue-2)); color:white; font-size:30px; box-shadow:0 10px 30px rgba(7,152,231,.28); }
.add-nav small { margin-top:-1px; }

.toast { position:fixed; left:50%; bottom:96px; transform:translate(-50%,20px); background:#f4f7f8; color:#121618; border-radius:11px; padding:11px 15px; font-weight:700; opacity:0; pointer-events:none; transition:.25s; z-index:50; box-shadow:var(--shadow); }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (min-width: 680px) {
  main { padding-left:24px; padding-right:24px; }
  .category-grid { grid-template-columns: repeat(4,1fr); }
  .cards-row { grid-auto-columns: minmax(260px, 42%); }
}

/* ===== LIVE DATABASE / ACCOUNT BUILD (v2) ===== */
.connection-pill { border:1px solid var(--line); background:rgba(7,152,231,.08); color:#7bcaff; border-radius:999px; padding:6px 9px; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.loading-screen { min-height:55vh; display:grid; place-items:center; align-content:center; gap:14px; color:var(--muted); }
.spinner { width:34px; height:34px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--blue); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.setup-card, .auth-gate { border:1px solid var(--line); background:linear-gradient(145deg,var(--panel-2),var(--panel)); border-radius:22px; padding:24px; margin-top:18px; }
.setup-card h1, .auth-gate h1 { margin:8px 0 12px; font-size:34px; line-height:1.05; }
.setup-card p, .auth-gate p { color:#c6cfd4; line-height:1.6; }
.muted { color:var(--muted)!important; }
.small { font-size:13px; }
.compact { min-height:40px!important; padding:9px 13px!important; width:auto!important; }
.tiny { min-height:34px!important; padding:6px 9px!important; font-size:12px!important; width:auto!important; }
.verified { display:inline-grid; place-items:center; width:17px; height:17px; border-radius:50%; background:var(--blue); color:white; font-size:11px; vertical-align:2px; }
.chevron { color:var(--muted); font-size:25px; }
.location-filter { margin-bottom:14px; }
.offer-banner { width:100%; text-align:left; color:inherit; }
.signed-out-card { text-align:left; }
.signed-out-card > .avatar { margin-bottom:16px; }
.avatar img, .detail-logo img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.listing-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.form-help { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
.image-upload-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:10px; }
.upload-box { position:relative; min-height:130px; border:1px dashed #34424c; border-radius:15px; background:#0d1215; display:grid; place-items:center; align-content:center; gap:8px; overflow:hidden; cursor:pointer; color:var(--muted); text-align:center; padding:10px; }
.upload-box:hover { border-color:var(--blue); }
.upload-box span { position:relative; z-index:2; font-size:12px; font-weight:800; color:#d5dde1; }
.upload-box b { font-size:30px; color:var(--blue); }
.upload-box input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload-box img { width:100%; height:88px; object-fit:cover; border-radius:10px; }
.btn-danger { background:rgba(255,77,91,.08); border:1px solid rgba(255,77,91,.38); color:#ff9ca5; }
.btn-danger:hover { background:rgba(255,77,91,.14); }
.danger-text { color:#ff9ca5!important; }
.detail-hero { background-size:cover; background-position:center; }
.detail-logo { overflow:hidden; }
.detail-offer { display:inline-block; margin:18px 4px 0; padding:8px 11px; border-radius:9px; background:rgba(7,152,231,.16); color:#75c7ff; border:1px solid rgba(7,152,231,.28); font-weight:800; font-size:13px; }
.detail-actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; }
.back-btn { border:0; background:transparent; color:#b9c5cb; font-weight:700; cursor:pointer; padding:4px 0 12px; }
.contact-row a { color:#dfe5e8; text-decoration:none; overflow-wrap:anywhere; }
.contact-row a:hover { color:#7bcaff; }

.modal-backdrop { position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.72); backdrop-filter:blur(8px); display:grid; place-items:end center; padding:16px; }
.modal-card { position:relative; width:min(100%,560px); max-height:88vh; overflow:auto; border:1px solid var(--line); background:#0b0f12; border-radius:22px; padding:22px; box-shadow:0 30px 90px rgba(0,0,0,.55); }
.modal-card h2 { margin:7px 36px 17px 0; font-size:27px; }
.modal-close { position:absolute; top:13px; right:13px; width:36px; height:36px; border:1px solid var(--line); background:var(--panel); color:white; border-radius:50%; font-size:22px; cursor:pointer; }
.auth-switch { display:block; margin:16px auto 0; }
.menu-card { display:grid; gap:7px; }
.menu-link { border:1px solid var(--line); background:var(--panel); border-radius:12px; min-height:48px; text-align:left; color:#e9eef0; padding:0 14px; cursor:pointer; font-weight:700; }
.menu-link:hover { border-color:var(--blue); }
.toast.error { background:#ffdde0; color:#751821; }

@media (max-width: 500px) {
  .connection-pill { display:none; }
  .image-upload-grid { grid-template-columns:1fr; }
  .upload-box { min-height:115px; }
  .profile-actions, .detail-actions { display:grid; grid-template-columns:1fr 1fr; }
  .modal-backdrop { padding:0; align-items:end; }
  .modal-card { border-radius:22px 22px 0 0; max-height:92vh; }
}

/* ===== ADMIN DASHBOARD (v3) ===== */
.admin-menu-link { border-color:rgba(7,152,231,.42); color:#7bcaff; }
.admin-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:16px 0 18px; }
.admin-stat { border:1px solid var(--line); background:var(--panel); border-radius:15px; padding:14px; display:grid; gap:4px; }
.admin-stat strong { font-size:26px; line-height:1; color:#fff; }
.admin-stat span { color:var(--muted); font-size:12px; }
.admin-stat.attention { border-color:rgba(255,159,67,.5); background:rgba(255,159,67,.07); }
.admin-tabs { display:flex; gap:7px; padding:5px; border:1px solid var(--line); background:#0b0f12; border-radius:14px; margin-bottom:14px; overflow:auto; }
.admin-tabs button { flex:1; min-width:90px; border:0; background:transparent; color:var(--muted); border-radius:10px; padding:10px 11px; font-weight:800; cursor:pointer; }
.admin-tabs button.active { background:rgba(7,152,231,.15); color:#7bcaff; }
.admin-tabs button span { display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:#c56829; color:#fff; margin-left:4px; font-size:10px; }
.admin-list { display:grid; gap:10px; }
.admin-card { border:1px solid var(--line); background:linear-gradient(145deg,var(--panel-2),var(--panel)); border-radius:16px; padding:14px; }
.admin-card.report-open { border-color:rgba(255,159,67,.42); }
.admin-card-main { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.admin-card h3 { margin:0 0 4px; font-size:16px; }
.admin-card p { margin:3px 0; color:var(--muted); font-size:13px; line-height:1.45; }
.admin-title-row { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.admin-tags { display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-top:9px; color:#9cabb2; font-size:11px; }
.admin-tags > span { border:1px solid var(--line); border-radius:999px; padding:4px 7px; }
.admin-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; padding-top:11px; border-top:1px solid var(--line); }
.admin-featured { display:inline-block; padding:3px 6px; border-radius:999px; background:rgba(7,152,231,.16); border:1px solid rgba(7,152,231,.32); color:#7bcaff; font-size:9px; letter-spacing:.05em; font-weight:900; vertical-align:2px; }
.status { text-transform:uppercase; font-weight:900; letter-spacing:.04em; }
.status-published { color:#8be0a6; border-color:rgba(65,190,107,.35)!important; }
.status-paused { color:#f6ca71; border-color:rgba(246,202,113,.32)!important; }
.status-pending, .status-open { color:#7bcaff; border-color:rgba(7,152,231,.35)!important; }
.status-rejected { color:#ff9ca5; border-color:rgba(255,77,91,.34)!important; }
.status-resolved { color:#8be0a6; border-color:rgba(65,190,107,.35)!important; }
.status-dismissed { color:#aab3b8; }
.admin-inline { border:1px solid rgba(7,152,231,.25); border-radius:15px; padding:14px; background:rgba(7,152,231,.04); }
.compact-profile { gap:10px; }
.compact-profile .avatar { width:46px; height:46px; font-size:13px; flex:0 0 auto; }
.member-card .admin-card-main { display:block; }
@media (min-width:680px) { .admin-stats { grid-template-columns:repeat(3,1fr); } }

/* ===== WHITE THEME (v4) =====
   Visual refresh only. Database, authentication, admin and listing behaviour are unchanged. */
:root {
  --bg: #f7f9fb;
  --panel: #ffffff;
  --panel-2: #f3f6f8;
  --panel-3: #edf2f5;
  --text: #171b1e;
  --muted: #68747c;
  --line: #dce3e8;
  --blue: #0798e7;
  --blue-2: #087ed8;
  --blue-soft: rgba(7,152,231,.10);
  --success: #198754;
  --danger: #d9434f;
  --shadow: 0 14px 38px rgba(20,38,52,.09);
}

html { background: var(--bg); color-scheme: light; }
body {
  background:
    radial-gradient(circle at 85% 0%, rgba(7,152,231,.06), transparent 28rem),
    linear-gradient(180deg,#fff 0%,#f7f9fb 42%,#f3f6f8 100%);
  color: var(--text);
}

.topbar {
  background: linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.92),rgba(255,255,255,.72));
  border-bottom: 1px solid rgba(220,227,232,.55);
}
.brand img { filter: none; }
.icon-btn { color:#2d353a; }
.icon-btn:hover { background:#f1f5f7; border-color:var(--line); }
.connection-pill { background:rgba(7,152,231,.07); color:#087fc2; border-color:#cce8f8; }

.hero {
  border-color:#dce3e8;
  background:
    linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.95) 38%,rgba(255,255,255,.72) 60%,rgba(255,255,255,.12) 100%),
    url('assets/community-hero.jpg') center/cover;
  box-shadow:0 16px 42px rgba(19,39,54,.11);
}
.hero.no-photo {
  background:radial-gradient(circle at 80% 20%,rgba(7,152,231,.10),transparent 35%),linear-gradient(145deg,#fff,#f4f8fa 70%);
}
.hero-content { max-width:580px; }
.hero h1 { color:#171b1e; }
.lead { color:#556169; }
.btn { background:#fff; color:#20272b; border-color:#d7e0e5; box-shadow:0 4px 12px rgba(25,43,56,.04); }
.btn:hover { border-color:#b9c8d1; background:#fbfdfe; }
.btn-primary { color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue-2)); border-color:transparent; }
.btn-ghost { background:rgba(255,255,255,.90); }
.btn-danger { color:#b32634; border-color:#f0cbd0; background:#fff6f7; }

.stats-card,.business-card,.category-card,.form-card,.profile-card,.my-listing,.result-card,.setup-card,.auth-gate,.admin-stat,.admin-card {
  background:#fff;
  border-color:var(--line);
  box-shadow:0 5px 18px rgba(27,45,58,.045);
}
.stat strong,.section h2,.section h3,.card-title,.result-card h3,.profile-top h2,.detail-title h1 { color:#182025; }
.card-meta,.stat small,.category-card small,.page-title p,.profile-top p,.my-listing p,.admin-card p,.admin-stat span { color:var(--muted); }
.stat + .stat:before { background:var(--line); }

.card-cover { background:linear-gradient(145deg,#edf3f6,#dfe8ed); }
.card-body { background:#fff; }
.recommend { color:#56636b; }
.offer { color:#057cbd; background:#eaf7fe; }
.badge { color:#057cbd; background:#eaf7fe; }
.card-cover .badge { color:#fff; background:var(--blue); }
.verified { color:#fff; }

.offer-banner { background:linear-gradient(90deg,#f2fbff,#fff); border-color:#bfe5fa; color:#20272b; box-shadow:0 5px 18px rgba(27,45,58,.04); }
.offer-banner strong { color:#067fc1; }
.category-card:hover { background:#f7fbfd; border-color:#8fd0f3; }

.input,select,textarea { background:#fff; color:#1b2226; border-color:#d7e0e5; }
.input::placeholder,textarea::placeholder { color:#98a3aa; }
.form-row label { color:#39434a; }
.filter-chip { background:#fff; color:#465158; border-color:#d7e0e5; }
.filter-chip.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.result-logo { border:1px solid #e0e6ea; }
.save-btn { color:#344047; }
.segmented button { background:#f7f9fa; color:#283137; border-color:#dce3e8; }
.segmented button.active { background:#eef9ff; border-color:var(--blue); }

.upload-box { background:#f8fafb; border-color:#cbd6dc; color:#647078; }
.upload-box span { color:#39444a; }
.profile-card { background:linear-gradient(145deg,#fff,#f6f9fb); }
.avatar { color:#fff; }
.empty { background:rgba(255,255,255,.55); }

.detail-hero { background:linear-gradient(145deg,#e7eef2,#dce5ea); border-color:#d9e2e7; }
.detail-logo { border-color:var(--bg); box-shadow:0 4px 14px rgba(30,47,60,.12); }
.detail-section { border-color:#e2e8ec; }
.detail-section p { color:#4d5960; }
.contact-list,.contact-row a { color:#303a40; }
.detail-offer { color:#057cbd; background:#eaf7fe; border-color:#c5e8fa; }
.back-btn { color:#526069; }

.bottom-nav { background:rgba(255,255,255,.96); border-top:1px solid #dce3e8; box-shadow:0 -8px 30px rgba(20,38,52,.06); }
.nav-item { color:#7b878e; }
.nav-item.active { color:var(--blue); }
.add-nav span { color:#fff; }

.toast { background:#172026; color:#fff; }
.toast.error { background:#8f2731; color:#fff; }
.modal-backdrop { background:rgba(20,30,36,.35); }
.modal-card { background:#fff; border-color:#dce3e8; box-shadow:0 30px 90px rgba(18,35,48,.18); color:#182025; }
.modal-close { background:#f4f7f9; color:#263037; border-color:#dce3e8; }
.menu-link { background:#fff; color:#263037; border-color:#dce3e8; }
.menu-link:hover { background:#f7fbfd; border-color:var(--blue); }

.admin-menu-link { color:#067fc1; border-color:#a9dcf7; }
.admin-stat strong { color:#182025; }
.admin-stat.attention { border-color:#f2d3a7; background:#fffaf2; }
.admin-tabs { background:#f3f6f8; border-color:#dce3e8; }
.admin-tabs button { color:#6d7880; }
.admin-tabs button.active { background:#fff; color:#057fbe; box-shadow:0 2px 8px rgba(20,38,52,.06); }
.admin-card { background:linear-gradient(145deg,#fff,#f9fbfc); }
.admin-actions { border-color:#e1e7eb; }
.admin-inline { background:#f2fbff; border-color:#c7e9fa; }
.admin-featured { color:#057cbd; background:#eaf7fe; border-color:#bfe5fa; }
.status-published { color:#21814d; }
.status-paused { color:#a66b00; }
.status-pending,.status-open { color:#057cbd; }
.status-rejected { color:#bf3441; }
.status-resolved { color:#21814d; }
.status-dismissed { color:#77838a; }

@media (max-width:500px) {
  .hero { min-height:365px; background-position:62% center; }
  .hero-content { padding:30px 22px 25px; }
  h1 { font-size:43px; }
}

/* ===== WHITE v4.1 — image fitting + listing title readability ===== */
/* Show the whole uploaded cover image instead of cropping it. */
.card-cover.has-image,
.detail-hero.has-image {
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #f3f6f8 !important;
}

/* Logos are identity marks, so never crop them. */
.result-logo img,
.avatar img,
.detail-logo img,
.upload-box img {
  object-fit: contain !important;
  object-position: center !important;
  background: #fff;
}

/* Give logos a little breathing room and avoid circular clipping. */
.detail-logo {
  width: 96px;
  height: 96px;
  border-radius: 18px;
  padding: 7px;
  flex: 0 0 96px;
  background: #fff;
}
.detail-logo img { border-radius: 10px !important; }
.result-logo { background:#fff; padding:4px; }
.result-logo img { border-radius:8px; }

/* Keep the listing name/type fully below the cover image. */
.detail-head {
  margin-top: 14px !important;
  padding: 0 6px !important;
  align-items: center !important;
}
.detail-title { min-width:0; }
.detail-title h1 {
  color: #14191d !important;
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.detail-title p {
  color: #66737b !important;
  margin-top: 5px;
}

/* More useful preview of uploaded images in the editor. */
.upload-box img {
  height: 110px !important;
  padding: 6px;
}
.upload-box.wide img { width:100%; }

/* On narrow phones, allow the title block to breathe. */
@media (max-width: 520px) {
  .detail-hero { height: 190px; }
  .detail-head { gap: 12px; }
  .detail-logo { width:82px; height:82px; flex-basis:82px; }
  .detail-title h1 { font-size: 23px; }
}


/* ===== WHITE v4.3 — admin editing + directory disclaimer ===== */
.admin-card-buttons { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.directory-disclaimer {
  margin: 30px auto 92px;
  padding: 20px 22px;
  max-width: 1080px;
  color:#68757d;
  background:#f7fafb;
  border:1px solid #e0e7eb;
  border-radius:16px;
  font-size:12px;
  line-height:1.55;
}
.directory-disclaimer strong { display:block; color:#3f4b52; font-size:12px; margin-bottom:7px; }
.directory-disclaimer p { margin:0 0 7px; }
.directory-disclaimer p:last-child { margin-bottom:0; }
@media (max-width:700px) {
  .directory-disclaimer { margin:22px 14px 90px; padding:16px; font-size:11px; border-radius:14px; }
}


/* ===== WHITE v4.4 — privacy-minded directory analytics ===== */
.analytics-dashboard { display:grid; gap:16px; }
.analytics-period-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.analytics-period,.analytics-mini,.analytics-panel { background:#fff; border:1px solid #dfe6ea; border-radius:16px; box-shadow:0 5px 18px rgba(28,46,58,.04); }
.analytics-period { padding:16px; display:grid; gap:4px; }
.analytics-period span { font-size:12px; color:#6c7880; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.analytics-period strong { font-size:30px; color:#172027; line-height:1.05; }
.analytics-period small { color:#738087; font-size:11px; }
.analytics-mini-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.analytics-mini { padding:14px; display:grid; gap:3px; }
.analytics-mini strong { font-size:22px; color:#087fbe; }
.analytics-mini span { color:#69767e; font-size:11px; }
.analytics-panel { padding:16px; min-width:0; }
.analytics-panel h3 { margin:0 0 3px; color:#182127; }
.analytics-panel > p,.analytics-heading p { margin:0 0 14px; color:#77838a; font-size:11px; }
.analytics-columns { display:grid; grid-template-columns:1fr; gap:12px; }
.analytics-table { display:grid; gap:0; }
.analytics-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:10px 0; border-top:1px solid #edf1f3; font-size:12px; color:#46525a; }
.analytics-row:first-child { border-top:0; }
.analytics-row span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.analytics-row b { color:#a0a9ae; margin-right:4px; }
.analytics-row strong { color:#172027; }
.analytics-chart { height:190px; display:flex; gap:3px; align-items:flex-end; padding:14px 2px 20px; border-top:1px solid #edf1f3; }
.analytics-bar-wrap { height:100%; flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; min-width:0; }
.analytics-bar { width:72%; max-width:18px; min-height:4px; border-radius:5px 5px 2px 2px; background:#0798e7; }
.analytics-bar-wrap small { height:14px; font-size:8px; color:#89949a; margin-top:4px; white-space:nowrap; }
@media (min-width:700px) {
  .analytics-period-grid { grid-template-columns:repeat(4,1fr); }
  .analytics-mini-grid { grid-template-columns:repeat(3,1fr); }
  .analytics-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
}


/* v4.5 authentication reliability + white-theme visibility */
#authForm .auth-submit {
  width:100%;
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0798e7 !important;
  background:linear-gradient(135deg,#0798e7,#0088d0) !important;
  color:#fff !important;
  border:1px solid #0798e7 !important;
  font-weight:800;
  opacity:1 !important;
  visibility:visible !important;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(7,152,231,.18);
}
#authForm .auth-submit:hover { background:linear-gradient(135deg,#058bd4,#007fc5) !important; }
#authForm .auth-submit:disabled {
  background:#78c8f1 !important;
  color:#fff !important;
  opacity:1 !important;
  cursor:wait;
}
.auth-status {
  margin-top:10px;
  padding:10px 12px;
  border-radius:10px;
  background:#eef8fd;
  color:#17658d;
  font-size:14px;
  line-height:1.4;
  border:1px solid #cceafa;
}
.auth-status.error { background:#fff3f4; color:#a12633; border-color:#f0c9cf; }
.auth-status[hidden] { display:none; }

/* ===== WHITE v4.6 — email confirmation + community messaging ===== */
.auth-verify-note { margin:14px 0 4px; padding:12px 14px; border:1px solid #cceafa; background:#f2faff; border-radius:12px; color:#47616f; font-size:13px; line-height:1.45; }
.auth-verify-note strong { display:block; color:#087fbe; margin-bottom:3px; }
#resendConfirmationBtn { color:#087fbe; font-weight:800; }
.messages-list { display:grid; gap:10px; }
.message-thread { width:100%; border:1px solid #dfe6ea; background:#fff; border-radius:16px; padding:14px; display:grid; grid-template-columns:48px 1fr auto; gap:12px; text-align:left; align-items:center; cursor:pointer; box-shadow:0 5px 18px rgba(28,46,58,.04); }
.message-thread.unread { border-color:#8cd2f5; background:#f3fbff; }
.message-avatar { width:48px; height:48px; border-radius:14px; background:#eaf6fc; color:#078fd6; font-weight:900; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.message-avatar img { width:100%; height:100%; object-fit:cover; }
.message-thread-body { min-width:0; display:grid; gap:2px; }
.message-thread-body strong { color:#172027; }
.message-thread-body span,.message-thread small { color:#7a878e; font-size:11px; }
.message-thread-body p { margin:3px 0 0; color:#4e5b63; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.conversation-card { background:#fff; border:1px solid #dfe6ea; border-radius:18px; padding:14px; }
.conversation-messages { display:flex; flex-direction:column; gap:10px; min-height:180px; max-height:52vh; overflow:auto; padding:4px 2px 14px; }
.message-bubble { align-self:flex-start; max-width:82%; padding:10px 12px; background:#f2f5f7; color:#243039; border-radius:14px 14px 14px 4px; }
.message-bubble.mine { align-self:flex-end; background:#e5f6ff; border-radius:14px 14px 4px 14px; }
.message-bubble p { margin:0; line-height:1.45; }
.message-bubble small { display:block; margin-top:5px; color:#7d8990; font-size:10px; }
.message-compose { display:grid; grid-template-columns:1fr auto; gap:10px; border-top:1px solid #edf1f3; padding-top:12px; }
.message-compose textarea { min-height:52px; max-height:140px; resize:vertical; }
@media (max-width:560px) { .message-compose { grid-template-columns:1fr; } .message-thread { grid-template-columns:44px 1fr; } .message-thread > small { display:none; } }


/* ===== UNREAD MESSAGE HEADER ALERT (v4.7) ===== */
.message-alert-pill {
  border:1px solid #8fd0f3; background:linear-gradient(135deg,#0798e7,#087ed8); color:#fff;
  border-radius:999px; min-height:34px; padding:6px 11px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:850;
  box-shadow:0 6px 18px rgba(7,152,231,.24); white-space:nowrap;
}
.message-alert-pill[hidden] { display:none !important; }
.message-alert-pill:hover { filter:brightness(.98); transform:translateY(-1px); }
.message-alert-icon { font-size:15px; line-height:1; }
@media (max-width:500px) {
  .message-alert-pill { min-height:38px; padding:7px 10px; font-size:10px; }
  .top-actions { gap:6px; align-items:center; }
}