/* =========================================================
   HAVN Dashboard — premium feel
   Blends: dark luxury (black/gold glass), clean minimal
   (whitespace, micro-animations), data-rich (live tiles,
   sparklines, subtle motion).
   All components are scoped with .havn- so they won't fight
   Elementor or your theme.
   ========================================================= */

:root {
	--havn-bg:        #000000;
	--havn-bg-2:      #050608;
	--havn-panel:     rgba(255,255,255,0.035);
	--havn-panel-2:   rgba(255,255,255,0.055);
	--havn-border:    rgba(255,255,255,0.07);
	--havn-border-2:  rgba(255,255,255,0.14);
	--havn-text:      #F4F4F5;
	--havn-muted:     #9CA3AF;
	--havn-accent:    #D4B370;     /* gold default */
	--havn-accent-2:  #F2D390;
	--havn-success:   #6FCF97;
	--havn-danger:    #EB5757;
	--havn-radius:    18px;
	--havn-radius-sm: 12px;
	--havn-shadow:    0 10px 40px rgba(0,0,0,0.6);
	--havn-shadow-sm: 0 4px 14px rgba(0,0,0,0.4);
	--havn-ease:      cubic-bezier(.2,.7,.2,1);
}

/* Force a pitch-black canvas on dashboard pages — overrides body, html, and every common theme wrapper */
html.havn-dashboard-page,
body.havn-dashboard-page,
body.elementor-template-canvas.havn-dashboard-page,
.havn-app-bg {
	background: #000 !important;
	background-color: #000 !important;
	color: var(--havn-text) !important;
	min-height: 100vh;
}
/* Neutralise theme wrappers that paint over the body */
body.havn-dashboard-page #page,
body.havn-dashboard-page #wrapper,
body.havn-dashboard-page #content,
body.havn-dashboard-page .site,
body.havn-dashboard-page .site-content,
body.havn-dashboard-page .site-main,
body.havn-dashboard-page .ast-container,
body.havn-dashboard-page .entry-content,
body.havn-dashboard-page .elementor-section-wrap,
body.havn-dashboard-page .elementor,
body.havn-dashboard-page .elementor-inner,
body.havn-dashboard-page .elementor-section,
body.havn-dashboard-page main,
body.havn-dashboard-page article {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--havn-text);
}
body.havn-dashboard-page::before {
	content: "";
	position: fixed; inset: 0;
	background:
		radial-gradient(1200px 600px at 80% -10%, rgba(212,179,112,.06), transparent 60%),
		radial-gradient(900px 500px at -10% 110%, rgba(138,180,248,.04), transparent 60%),
		#000;
	z-index: -1;
	pointer-events: none;
}
/* If the body class never gets added (theme stripped body_class), the wrapper paints itself */
.havn-app-bg {
	position: relative;
	background: #000 !important;
	color: var(--havn-text);
	padding: 32px clamp(16px, 4vw, 40px);
	min-height: 100vh;
}

/* Force readable text on EVERY descendant inside the dashboard wrapper — covers
   theme-injected nodes (paragraphs, headings, list items) that don't carry a
   havn- class and would otherwise inherit the theme's dark text on dark bg. */
body.havn-dashboard-page p,
body.havn-dashboard-page h1,
body.havn-dashboard-page h2,
body.havn-dashboard-page h3,
body.havn-dashboard-page h4,
body.havn-dashboard-page h5,
body.havn-dashboard-page h6,
body.havn-dashboard-page span,
body.havn-dashboard-page li,
body.havn-dashboard-page strong,
body.havn-dashboard-page em,
body.havn-dashboard-page small,
body.havn-dashboard-page label,
body.havn-dashboard-page td,
body.havn-dashboard-page th,
.havn-app-bg p,
.havn-app-bg h1, .havn-app-bg h2, .havn-app-bg h3,
.havn-app-bg h4, .havn-app-bg h5, .havn-app-bg h6,
.havn-app-bg span, .havn-app-bg li,
.havn-app-bg strong, .havn-app-bg em, .havn-app-bg small,
.havn-app-bg label, .havn-app-bg td, .havn-app-bg th {
	color: var(--havn-text) !important;
}
body.havn-dashboard-page a:not(.havn-btn):not(.havn-chip),
.havn-app-bg a:not(.havn-btn):not(.havn-chip) {
	color: var(--havn-accent);
}

/* Defensively reset any wpautop-injected stray <p> wrappers that wrap our
   form/grid blocks — wpautop is also disabled in PHP, but this kills the
   damage on cached pages so the form never renders as broken blocks. */
.havn-form-wrap > p:empty,
.havn-form-grid > p:empty,
.havn-app-bg > p:empty,
body.havn-dashboard-page .havn-form-grid > br {
	display: none !important;
}
.havn-form-grid > p {
	display: contents;
}

[class^="havn-"], [class*=" havn-"] {
	box-sizing: border-box;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	color: var(--havn-text);
	-webkit-font-smoothing: antialiased;
}

/* ---------- reveal on scroll ---------- */
.havn-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .7s var(--havn-ease), transform .7s var(--havn-ease);
}
.havn-reveal.is-in { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.havn-hero {
	position: relative;
	padding: 44px 40px 40px;
	border-radius: var(--havn-radius);
	background: linear-gradient(135deg, #121317 0%, #0B0C10 60%);
	border: 1px solid var(--havn-border);
	overflow: hidden;
	box-shadow: var(--havn-shadow);
	margin-bottom: 24px;
}
.havn-hero-glow {
	position: absolute; top: -40%; right: -20%; width: 520px; height: 520px;
	background: radial-gradient(closest-side, var(--havn-accent) 0%, transparent 70%);
	opacity: .18;
	filter: blur(6px);
	pointer-events: none;
}
.havn-hero-inner { position: relative; }
.havn-hero-eyebrow {
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: 11px;
	color: var(--havn-accent);
	font-weight: 600;
	margin-bottom: 14px;
}
.havn-hero-title {
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.05;
	font-weight: 700;
	margin: 0 0 10px;
	letter-spacing: -.02em;
}
.havn-hero-title span {
	background: linear-gradient(92deg, var(--havn-accent) 0%, var(--havn-accent-2) 60%, #fff 140%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.havn-hero-sub { color: var(--havn-muted); font-size: 16px; margin: 0 0 18px; }
.havn-hero-meta { display: flex; gap: 10px; flex-wrap: wrap; }

.havn-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--havn-panel);
	border: 1px solid var(--havn-border);
	font-size: 12.5px;
	color: var(--havn-text);
}
.havn-chip-soft {
	background: linear-gradient(90deg, rgba(212,179,112,.18), rgba(212,179,112,.05));
	border-color: rgba(212,179,112,.35);
	color: var(--havn-accent-2);
}
.havn-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--havn-success);
	box-shadow: 0 0 0 4px rgba(111,207,151,.18);
}

/* ---------- grid ---------- */
.havn-grid { display: grid; gap: 20px; margin-bottom: 24px; }
.havn-grid-4 { grid-template-columns: repeat(4, 1fr); }
.havn-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .havn-grid-4 { grid-template-columns: repeat(2, 1fr); } .havn-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .havn-grid-4, .havn-grid-3 { grid-template-columns: 1fr; } }

/* ---------- stat tile (glass + gold on hover) ---------- */
.havn-tile {
	position: relative;
	padding: 22px 22px 14px;
	background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
	backdrop-filter: blur(14px);
	border: 1px solid var(--havn-border);
	border-radius: var(--havn-radius);
	overflow: hidden;
	transition: transform .35s var(--havn-ease), border-color .35s var(--havn-ease), box-shadow .35s var(--havn-ease);
}
.havn-tile::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(260px 120px at 100% 0%, var(--havn-accent), transparent 70%);
	opacity: .12;
	pointer-events: none;
	transition: opacity .35s var(--havn-ease);
}
.havn-tile:hover {
	transform: translateY(-3px);
	border-color: var(--havn-border-2);
	box-shadow: 0 18px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(212,179,112,.15) inset;
}
.havn-tile:hover::before { opacity: .22; }
.havn-tile-icon {
	width: 40px; height: 40px; border-radius: 12px;
	display: grid; place-items: center;
	background: rgba(212,179,112,.12);
	color: var(--havn-accent);
	margin-bottom: 14px;
}
.havn-tile-icon svg { width: 20px; height: 20px; }
.havn-tile-label { font-size: 12.5px; color: var(--havn-muted); letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }
.havn-tile-value {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -.02em;
	margin-top: 6px;
	font-variant-numeric: tabular-nums;
}
.havn-tile-value.is-text { font-size: 22px; }
.havn-suffix { color: var(--havn-muted); font-size: 18px; font-weight: 500; margin-left: 4px; }
.havn-sparkline { margin-top: 14px; height: 36px; }

/* ---------- sections ---------- */
.havn-section {
	padding: 26px 28px;
	background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
	border: 1px solid var(--havn-border);
	border-radius: var(--havn-radius);
	margin-bottom: 24px;
	box-shadow: var(--havn-shadow-sm);
}
.havn-section-head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 18px; margin-bottom: 18px;
}
.havn-section-head h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.havn-section-head p { margin: 4px 0 0; color: var(--havn-muted); font-size: 13.5px; max-width: 560px; }
.havn-eyebrow { text-transform: uppercase; font-size: 10.5px; letter-spacing: .16em; color: var(--havn-accent); font-weight: 600; margin-bottom: 4px; }
.havn-muted { color: var(--havn-muted); font-size: 13px; }
.havn-link-arrow { color: var(--havn-accent); font-size: 13px; text-decoration: none; transition: transform .2s var(--havn-ease); }
.havn-link-arrow:hover { transform: translateX(3px); }

/* ---------- listing card ---------- */
.havn-card {
	background: var(--havn-panel);
	border: 1px solid var(--havn-border);
	border-radius: var(--havn-radius);
	overflow: hidden;
	transition: transform .35s var(--havn-ease), border-color .35s var(--havn-ease), box-shadow .35s var(--havn-ease);
}
.havn-card:hover { transform: translateY(-4px); border-color: var(--havn-border-2); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.havn-card-media {
	aspect-ratio: 16/10;
	background-size: cover; background-position: center;
	background-color: #1a1b20;
	position: relative;
}
.havn-badge {
	position: absolute; top: 12px; left: 12px;
	padding: 5px 10px; border-radius: 999px;
	background: rgba(11,12,16,.78); backdrop-filter: blur(8px);
	border: 1px solid rgba(212,179,112,.4);
	color: var(--havn-accent-2);
	font-size: 11px; letter-spacing: .06em; font-weight: 600; text-transform: uppercase;
}
.havn-card-body { padding: 16px 18px 18px; }
.havn-card-eyebrow { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--havn-muted); margin-bottom: 6px; }
.havn-card-title { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.havn-card-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--havn-muted); font-size: 13px; margin-bottom: 14px; }

/* ---------- buttons ---------- */
.havn-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 10px;
	font-size: 13.5px; font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all .25s var(--havn-ease);
	text-decoration: none;
}
.havn-btn-primary {
	background: linear-gradient(135deg, var(--havn-accent), #B8975C);
	color: #15110A;
	box-shadow: 0 6px 20px rgba(212,179,112,.25);
}
.havn-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(212,179,112,.35); }
.havn-btn-ghost {
	background: transparent;
	border-color: var(--havn-border-2);
	color: var(--havn-text);
}
.havn-btn-ghost:hover { background: var(--havn-panel-2); border-color: var(--havn-accent); color: var(--havn-accent-2); }

/* ---------- pipeline ---------- */
.havn-pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .havn-pipeline { grid-template-columns: repeat(2, 1fr); } }
.havn-col {
	background: var(--havn-panel);
	border: 1px solid var(--havn-border);
	border-radius: var(--havn-radius-sm);
	padding: 14px;
	min-height: 160px;
}
.havn-col-head { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--havn-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.havn-count {
	background: rgba(212,179,112,.15); color: var(--havn-accent-2);
	padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
}
.havn-kcard {
	background: rgba(255,255,255,.04);
	border: 1px solid var(--havn-border);
	border-radius: 10px;
	padding: 10px 12px;
	margin-bottom: 8px;
	font-size: 13.5px;
	transition: transform .2s var(--havn-ease), border-color .2s var(--havn-ease);
}
.havn-kcard:hover { transform: translateY(-2px); border-color: var(--havn-accent); }
.havn-kempty { color: var(--havn-muted); font-size: 12px; text-align: center; padding: 14px 0; opacity: .6; }

/* ---------- chart ---------- */
.havn-chart-wrap { padding: 8px 0 4px; }

/* ---------- billing card ---------- */
.havn-billing {
	padding: 26px 28px;
	border-radius: var(--havn-radius);
	background: linear-gradient(135deg, rgba(212,179,112,.08) 0%, rgba(11,12,16,.4) 100%);
	border: 1px solid rgba(212,179,112,.22);
	box-shadow: var(--havn-shadow);
	margin-bottom: 24px;
}
.havn-billing-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.havn-billing-plan { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin-top: 4px; }
.havn-status {
	padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em;
}
.havn-status-active   { background: rgba(111,207,151,.15); color: var(--havn-success); border: 1px solid rgba(111,207,151,.3); }
.havn-status-trialing { background: rgba(138,180,248,.15); color: #8AB4F8;           border: 1px solid rgba(138,180,248,.3); }
.havn-status-past_due { background: rgba(235,87,87,.15);   color: var(--havn-danger); border: 1px solid rgba(235,87,87,.3); }
.havn-status-canceled { background: rgba(156,163,175,.15); color: var(--havn-muted); }
.havn-status-unknown  { background: rgba(156,163,175,.15); color: var(--havn-muted); }
.havn-perks { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; }
.havn-perks li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--havn-text); }
.havn-perks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 2px; background: var(--havn-accent); border-radius: 2px; }
.havn-billing-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid var(--havn-border); }

/* ---------- upgrade CTA ---------- */
.havn-upgrade {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 20px 26px;
	border-radius: var(--havn-radius);
	background: linear-gradient(100deg, #141521 0%, #0B0C10 100%);
	border: 1px solid var(--havn-border-2);
	margin-bottom: 24px;
	position: relative; overflow: hidden;
}
.havn-upgrade::after {
	content: ""; position: absolute; right: -80px; top: -60px; width: 280px; height: 280px;
	background: radial-gradient(closest-side, rgba(212,179,112,.35), transparent 70%);
	pointer-events: none;
}
.havn-upgrade h3 { margin: 2px 0 4px; font-size: 20px; }
.havn-upgrade p  { margin: 0; color: var(--havn-muted); font-size: 13.5px; }

/* ---------- marketplace preview ---------- */
.havn-marketplace .havn-section-head { align-items: flex-start; }
.havn-market-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.havn-filter {
	padding: 6px 14px; border-radius: 999px;
	background: var(--havn-panel); border: 1px solid var(--havn-border);
	font-size: 12.5px; color: var(--havn-muted); cursor: pointer;
	transition: all .25s var(--havn-ease);
}
.havn-filter:hover { color: var(--havn-text); border-color: var(--havn-border-2); }
.havn-filter.is-active { background: var(--havn-accent); color: #15110A; border-color: var(--havn-accent); font-weight: 600; }
.havn-market-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) { .havn-market-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .havn-market-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .havn-market-grid { grid-template-columns: 1fr; } }
.havn-market-card {
	position: relative;
	background: var(--havn-panel); border: 1px solid var(--havn-border);
	border-radius: var(--havn-radius-sm);
	overflow: hidden;
	transition: transform .3s var(--havn-ease), border-color .3s var(--havn-ease);
}
.havn-market-card:hover { transform: translateY(-3px); border-color: var(--havn-accent); }
.havn-market-media { aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: #1a1b20; }
.havn-market-body { padding: 12px 14px 14px; }
.havn-market-title { font-size: 14.5px; font-weight: 600; margin: 4px 0 8px; }
.havn-market-meta { display: flex; gap: 12px; font-size: 12.5px; color: var(--havn-muted); }
.havn-market-foot { margin-top: 18px; text-align: center; }
.havn-market-card.is-locked { filter: grayscale(.3); }
.havn-market-card.is-locked .havn-market-media { filter: blur(6px); }
.havn-lock {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 8px; padding: 20px;
	background: linear-gradient(180deg, rgba(11,12,16,.55), rgba(11,12,16,.85));
	color: var(--havn-accent-2); text-align: center; font-size: 13px; font-weight: 500;
	backdrop-filter: blur(2px);
}
.havn-lock-icon { font-size: 28px; }
.havn-market-card.is-skeleton .havn-market-body { display: grid; gap: 8px; }
.havn-skel { height: 12px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; border-radius: 6px; animation: havn-shimmer 1.6s infinite; }
@keyframes havn-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- empty state ---------- */
.havn-empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--havn-muted);
	border: 1px dashed var(--havn-border-2);
	border-radius: var(--havn-radius-sm);
	background: rgba(255,255,255,.015);
}

/* ---------- auto-fit grid (for 5/6-tile layouts) ---------- */
.havn-grid-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------- priority / placement banner ---------- */
.havn-banner {
	display: flex; align-items: center; gap: 18px;
	padding: 16px 22px;
	border-radius: var(--havn-radius);
	background: linear-gradient(100deg, rgba(212,179,112,.12) 0%, rgba(11,12,16,.4) 100%);
	border: 1px solid rgba(212,179,112,.28);
	margin-bottom: 24px;
}
.havn-banner-icon {
	width: 44px; height: 44px; border-radius: 12px;
	display: grid; place-items: center;
	background: rgba(212,179,112,.16);
	color: var(--havn-accent);
}
.havn-banner-icon svg { width: 22px; height: 22px; }
.havn-banner-body { flex: 1; }
.havn-banner-title { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.havn-banner-sub { font-size: 13px; color: var(--havn-muted); }
.havn-pulse { width: 14px; height: 14px; position: relative; }
.havn-pulse span {
	position: absolute; inset: 0; border-radius: 50%;
	background: var(--havn-success); box-shadow: 0 0 0 0 rgba(111,207,151,.6);
	animation: havn-pulse 1.8s infinite;
}
@keyframes havn-pulse {
	0% { transform: scale(.9); box-shadow: 0 0 0 0 rgba(111,207,151,.6); }
	70% { transform: scale(1.2); box-shadow: 0 0 0 12px rgba(111,207,151,0); }
	100% { transform: scale(.9); box-shadow: 0 0 0 0 rgba(111,207,151,0); }
}

/* ---------- weekly bar chart ---------- */
.havn-bars {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(36px, 1fr));
	gap: 10px; align-items: end;
	min-height: 160px; padding: 10px 0;
}
.havn-bar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.havn-bar {
	width: 100%;
	background: linear-gradient(180deg, var(--havn-accent), rgba(212,179,112,.25));
	border-radius: 6px 6px 2px 2px;
	position: relative; min-height: 4px;
	transition: filter .2s var(--havn-ease);
}
.havn-bar:hover { filter: brightness(1.15); }
.havn-bar-value {
	position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
	font-size: 11px; color: var(--havn-text); font-weight: 600;
	opacity: 0; transition: opacity .2s var(--havn-ease);
}
.havn-bar:hover .havn-bar-value { opacity: 1; }
.havn-bar-label { font-size: 11px; color: var(--havn-muted); letter-spacing: .04em; }

/* ---------- conversion funnel ---------- */
.havn-funnel { display: flex; flex-direction: column; gap: 12px; }
.havn-funnel-row {
	display: grid; grid-template-columns: 120px 1fr 140px; gap: 18px;
	align-items: center;
}
.havn-funnel-label { font-size: 13px; color: var(--havn-muted); text-transform: uppercase; letter-spacing: .06em; }
.havn-funnel-track {
	height: 14px; border-radius: 8px;
	background: rgba(255,255,255,.05);
	overflow: hidden; position: relative;
}
.havn-funnel-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--havn-accent-2), var(--havn-accent) 60%, #B8975C);
	border-radius: 8px;
	transition: width 1.2s var(--havn-ease);
}
.havn-funnel-value { font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: right; }
.havn-funnel-value strong { font-size: 16px; margin-right: 6px; }
@media (max-width: 640px) {
	.havn-funnel-row { grid-template-columns: 1fr; gap: 4px; }
	.havn-funnel-value { text-align: left; }
}

/* ---------- leaderboard ---------- */
.havn-leaderboard { display: flex; flex-direction: column; gap: 6px; }
.havn-leader-row {
	display: grid; grid-template-columns: 36px 32px 1fr auto; gap: 12px;
	align-items: center;
	padding: 10px 14px;
	background: rgba(255,255,255,.03);
	border: 1px solid var(--havn-border);
	border-radius: 10px;
	transition: border-color .2s var(--havn-ease);
}
.havn-leader-row:hover { border-color: var(--havn-border-2); }
.havn-leader-row.is-you {
	background: linear-gradient(90deg, rgba(212,179,112,.12), rgba(212,179,112,.03));
	border-color: rgba(212,179,112,.4);
	box-shadow: 0 0 0 1px rgba(212,179,112,.2) inset;
}
.havn-leader-rank { font-size: 13px; color: var(--havn-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.havn-leader-avatar {
	width: 32px; height: 32px; border-radius: 50%;
	display: grid; place-items: center;
	font-size: 12px; font-weight: 700;
	background: rgba(212,179,112,.15); color: var(--havn-accent);
}
.havn-leader-row.is-you .havn-leader-avatar { background: var(--havn-accent); color: #15110A; }
.havn-leader-name { font-size: 14px; font-weight: 500; }
.havn-leader-score { font-size: 12.5px; color: var(--havn-muted); }

/* ---------- success manager card (Elite) ---------- */
.havn-sm {
	display: flex; align-items: center; gap: 22px;
	padding: 22px 26px;
	border-radius: var(--havn-radius);
	background:
		radial-gradient(420px 220px at 20% 20%, rgba(212,179,112,.18), transparent 60%),
		linear-gradient(135deg, #141521 0%, #0B0C10 100%);
	border: 1px solid rgba(212,179,112,.28);
	box-shadow: var(--havn-shadow);
	margin-bottom: 24px;
}
.havn-sm-avatar {
	width: 68px; height: 68px; border-radius: 50%;
	display: grid; place-items: center;
	background: linear-gradient(135deg, var(--havn-accent), #B8975C);
	color: #15110A;
	flex: 0 0 68px;
}
.havn-sm-avatar svg { width: 34px; height: 34px; }
.havn-sm-body { flex: 1; }
.havn-sm-title { font-size: 17px; margin: 4px 0; }

/* ---------- VIP listings ---------- */
.havn-vip { border-color: rgba(242,211,144,.3); }
.havn-badge-gold {
	background: linear-gradient(135deg, #F2D390, #D4B370);
	color: #15110A; border-color: transparent;
	font-weight: 700;
}
.havn-vip-card { border-color: rgba(242,211,144,.22); }

/* ---------- team workspace ---------- */
.havn-team-card {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	padding: 18px;
	background: var(--havn-panel); border: 1px solid var(--havn-border);
	border-radius: var(--havn-radius-sm);
	transition: all .25s var(--havn-ease);
}
.havn-team-card:hover { transform: translateY(-2px); border-color: var(--havn-accent); }
.havn-team-avatar {
	width: 56px; height: 56px; border-radius: 50%;
	margin-bottom: 10px;
	object-fit: cover;
}
.havn-team-avatar.is-fallback {
	display: grid; place-items: center;
	background: rgba(212,179,112,.18); color: var(--havn-accent);
	font-weight: 700; font-size: 20px;
}
.havn-team-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }

/* ---------- live feed ---------- */
.havn-feed { display: flex; flex-direction: column; gap: 4px; }
.havn-feed-row {
	display: grid; grid-template-columns: 12px 1fr; gap: 14px;
	align-items: flex-start;
	padding: 12px 14px;
	border-radius: 10px;
	transition: background .2s var(--havn-ease);
}
.havn-feed-row:hover { background: rgba(255,255,255,.03); }
.havn-feed-dot {
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--havn-accent);
	margin-top: 8px;
	box-shadow: 0 0 0 4px rgba(212,179,112,.15);
}
.havn-dot-live { background: var(--havn-success); box-shadow: 0 0 0 4px rgba(111,207,151,.18); }

/* ---------- feature checklist ---------- */
.havn-checklist {
	list-style: none; padding: 0; margin: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px;
}
@media (max-width: 640px) { .havn-checklist { grid-template-columns: 1fr; } }
.havn-checklist li {
	display: flex; gap: 12px; align-items: flex-start;
	padding: 10px 14px;
	background: rgba(255,255,255,.025);
	border: 1px solid var(--havn-border);
	border-radius: 10px;
	font-size: 14px;
}
.havn-check {
	width: 22px; height: 22px; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(212,179,112,.14);
	flex: 0 0 22px;
}
.havn-check svg { width: 12px; height: 12px; }

/* ---------- light mode variant (opt in with body class .havn-light) ---------- */
body.havn-light {
	--havn-bg:       #FAFAFA;
	--havn-panel:    #FFFFFF;
	--havn-panel-2:  #F4F4F5;
	--havn-border:   rgba(15,23,42,.08);
	--havn-border-2: rgba(15,23,42,.18);
	--havn-text:     #0F172A;
	--havn-muted:    #64748B;
	--havn-shadow:   0 12px 36px rgba(15,23,42,.08);
	--havn-shadow-sm:0 4px 12px rgba(15,23,42,.05);
}

/* ---------- HOMEOWNER FORM ---------- */
.havn-form-wrap {
	background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
	border: 1px solid var(--havn-border);
	border-radius: var(--havn-radius);
	padding: 32px;
	box-shadow: var(--havn-shadow);
	margin-bottom: 24px;
}
.havn-form-wrap h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.01em; }
.havn-form-wrap .havn-muted { margin-bottom: 24px; }
.havn-form-wrap *, .havn-form-wrap *::before, .havn-form-wrap *::after {
	box-sizing: border-box;
}
.havn-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
	width: 100%;
}
@media (max-width: 720px) { .havn-form-grid { grid-template-columns: minmax(0, 1fr); } }
.havn-form-grid label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--havn-muted);
	line-height: 1.4;
}
.havn-form-grid label.is-full { grid-column: 1 / -1; }
.havn-form-grid input[type="text"],
.havn-form-grid input[type="email"],
.havn-form-grid input[type="tel"],
.havn-form-grid input[type="number"],
.havn-form-grid input[type="url"],
.havn-form-grid select,
.havn-form-grid textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: 13px 14px;
	margin: 0;
	background: rgba(255,255,255,.04);
	color: var(--havn-text);
	border: 1px solid var(--havn-border-2);
	border-radius: 10px;
	font-size: 15px;
	font-family: inherit;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	box-sizing: border-box;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	transition: border-color .2s var(--havn-ease), background .2s var(--havn-ease);
}
.havn-form-grid select {
	background-image: linear-gradient(45deg, transparent 50%, var(--havn-muted) 50%), linear-gradient(135deg, var(--havn-muted) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
	background-size: 6px 6px;
	background-repeat: no-repeat;
	padding-right: 36px;
}
.havn-form-grid input:focus,
.havn-form-grid select:focus,
.havn-form-grid textarea:focus {
	outline: none;
	border-color: var(--havn-accent);
	background: rgba(255,255,255,.06);
}
.havn-form-grid input::placeholder,
.havn-form-grid textarea::placeholder { color: rgba(156,163,175,.6); }
.havn-form-grid textarea { resize: vertical; min-height: 100px; }
.havn-form-grid select option { background: #0B0C10; color: #fff; }
.havn-form-actions {
	margin-top: 22px;
	display: flex; gap: 12px; align-items: center; justify-content: flex-end;
}
.havn-form-msg {
	padding: 14px 16px;
	border-radius: 10px;
	margin-bottom: 18px;
	font-size: 14px;
}
.havn-form-msg.is-ok  { background: rgba(111,207,151,.12); color: #a7e9c5; border: 1px solid rgba(111,207,151,.3); }
.havn-form-msg.is-err { background: rgba(235,87,87,.12);   color: #f1a3a3; border: 1px solid rgba(235,87,87,.3); }

/* ---------- OWNER DASHBOARD ---------- */
.havn-owner-listing {
	display: grid; grid-template-columns: 280px 1fr; gap: 24px;
	padding: 24px;
	border: 1px solid var(--havn-border);
	border-radius: var(--havn-radius);
	background: rgba(255,255,255,.03);
	margin-bottom: 24px;
}
@media (max-width: 720px) { .havn-owner-listing { grid-template-columns: 1fr; } }
.havn-owner-thumb {
	height: 200px;
	border-radius: 12px;
	background: #15171c center/cover no-repeat;
	border: 1px solid var(--havn-border);
}
.havn-owner-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--havn-muted); font-size: 14px; margin: 8px 0 16px; }
.havn-owner-meta strong { color: var(--havn-text); font-weight: 600; }
.havn-owner-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.havn-owner-empty {
	padding: 48px;
	text-align: center;
	border: 1px dashed var(--havn-border-2);
	border-radius: var(--havn-radius);
	color: var(--havn-muted);
	margin-bottom: 24px;
}

.havn-agent-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.havn-agent-card {
	display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center;
	padding: 16px;
	background: rgba(255,255,255,.03);
	border: 1px solid var(--havn-border);
	border-radius: 14px;
	transition: border-color .2s var(--havn-ease), transform .2s var(--havn-ease);
}
.havn-agent-card:hover { border-color: var(--havn-accent); transform: translateY(-1px); }
.havn-agent-avatar {
	width: 56px; height: 56px; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(212,179,112,.18); color: var(--havn-accent);
	font-weight: 700; font-size: 18px;
}
.havn-agent-name { font-weight: 600; font-size: 15px; }
.havn-agent-meta-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--havn-muted); }
.havn-agent-tier {
	display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
	background: rgba(212,179,112,.18); color: var(--havn-accent); letter-spacing: .04em; text-transform: uppercase;
}
.havn-agent-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; }

/* ---------- ADMIN VIEW-AS BANNER ---------- */
.havn-viewas-banner {
	position: sticky; top: 0; z-index: 999;
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 10px 18px;
	background: linear-gradient(90deg, #2A1810 0%, #4A2E18 100%);
	color: #FFD79A;
	border-bottom: 1px solid rgba(212,179,112,.4);
	font-size: 13px;
	letter-spacing: .02em;
}
.havn-viewas-banner a { color: #FFE4B0; text-decoration: underline; }