:root {
  --vp-black: #070706;
  --vp-ink: #171512;
  --vp-panel: #ffffff;
  --vp-soft: #f7f4ee;
  --vp-line: #ded6c8;
  --vp-text: #171512;
  --vp-muted: #766f64;
  --vp-gold: #c6a86b;
  --vp-gold-strong: #a98332;
  --vp-radius: 8px;
  --vp-font: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html,
body {
  font-family: var(--vp-font) !important;
}

body {
  color: var(--vp-text);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

.dash-main,
.dashboard-shell,
.photo-admin-shell,
.selection-admin-shell,
.admin-shell,
main {
  background-color: var(--vp-soft);
}

.dash-header span,
.page-head .eyebrow,
.eyebrow,
.nav-group,
.section-kicker,
.card-kicker,
.workspace-note strong,
.blog-builder-head span,
.blog-section-head span,
.panel-head span {
  color: var(--vp-gold-strong) !important;
  letter-spacing: 0.15em;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

h1,
h2,
h3,
strong {
  font-family: var(--vp-font) !important;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(1.9rem, 3vw, 2.75rem) !important;
  line-height: 1.04 !important;
}

h2 {
  font-size: clamp(1.28rem, 2vw, 1.75rem) !important;
}

h3 {
  font-size: clamp(1rem, 1.4vw, 1.24rem) !important;
}

p,
small,
span,
label {
  color: inherit;
}

.dash-sidebar,
.admin-sidebar,
.panel-sidebar,
aside[class*="sidebar"],
.side-nav,
.rail {
  background: var(--vp-black) !important;
  color: #f8f2e9 !important;
  border-color: rgba(198, 168, 107, 0.24) !important;
}

.dash-sidebar a,
.admin-sidebar a,
.panel-sidebar a,
aside[class*="sidebar"] a,
.side-nav a,
.rail button {
  color: rgba(248, 242, 233, 0.78) !important;
  border-radius: var(--vp-radius) !important;
}

.dash-sidebar a.active,
.dash-sidebar a:hover,
.admin-sidebar a.active,
.admin-sidebar a:hover,
.panel-sidebar a.active,
.panel-sidebar a:hover,
aside[class*="sidebar"] a.active,
aside[class*="sidebar"] a:hover,
.side-nav a.active,
.side-nav a:hover,
.rail button.active,
.rail button:hover {
  background: var(--vp-gold) !important;
  color: #090807 !important;
}

.dash-icon,
svg {
  stroke: currentColor;
}

.card,
.dash-workspace,
.workspace-note,
.project-card,
.blog-section,
.blog-builder,
.blog-builder-head,
.blog-cover-panel,
.portfolio-link-panel,
.admin-card,
.hub-card,
.setup-strip,
.hero-summary article,
.modal,
.table-card,
section[class*="card"],
article[class*="card"],
div[class*="card"] {
  border-color: var(--vp-line) !important;
  border-radius: var(--vp-radius) !important;
  box-shadow: none !important;
}

.card,
.dash-workspace,
.workspace-note,
.project-card,
.blog-section,
.blog-builder,
.blog-builder-head,
.blog-cover-panel,
.portfolio-link-panel,
.admin-card,
.setup-strip,
.hero-summary article,
.table-card {
  background: var(--vp-panel) !important;
}

input,
select,
textarea {
  border: 1px solid var(--vp-line) !important;
  border-radius: var(--vp-radius) !important;
  background: #ffffff !important;
  color: var(--vp-text) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--vp-gold) !important;
  outline: 2px solid rgba(198, 168, 107, 0.2) !important;
}

button,
.button,
.ghost-button,
.primary-button,
.dash-tabs button,
.blog-post-actions button,
.blog-builder-actions button,
a[class*="button"] {
  border-radius: var(--vp-radius) !important;
  box-shadow: none !important;
  font-weight: 750;
}

.primary,
.primary-button,
button.primary,
button[type="submit"],
[data-action*="publish"],
[data-action*="generate"],
[data-action*="save"] {
  border-color: var(--vp-gold) !important;
  background: var(--vp-gold) !important;
  color: #090807 !important;
}

.ghost-button,
.dash-tabs button,
.blog-post-actions button,
.blog-builder-actions button,
button:not(.primary):not([type="submit"]) {
  border-color: var(--vp-line) !important;
  background: #ffffff !important;
  color: var(--vp-text) !important;
}

.dash-tabs button.active,
.pill.is-on,
.tab.active,
button.active {
  border-color: var(--vp-gold) !important;
  background: rgba(198, 168, 107, 0.14) !important;
  color: var(--vp-text) !important;
}

table,
.table-list,
.client-table {
  border-color: var(--vp-line) !important;
}

th,
.table-head {
  color: var(--vp-muted) !important;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status,
.badge,
[class*="badge"],
[class*="status"] {
  border-radius: 999px !important;
}

.status,
.badge,
[class*="badge"],
[class*="status"],
.published,
.is-published,
.success,
.ok {
  background: rgba(198, 168, 107, 0.14) !important;
  border-color: rgba(198, 168, 107, 0.42) !important;
  color: var(--vp-gold-strong) !important;
}

.danger,
.error,
.rejected,
[class*="danger"],
[class*="error"],
[class*="rejected"] {
  background: #fff !important;
  border-color: #b35b5b !important;
  color: #8a2d2d !important;
}

.admin-general,
.access-hub,
.panel-page,
.login-page {
  font-family: var(--vp-font) !important;
}

.owner-hero h1,
.access-hub h1,
.panel-page h1,
.login-card h1 {
  font-family: var(--vp-font) !important;
  font-size: clamp(2rem, 3vw, 3.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

.hub-card,
.area-card,
.module-card {
  min-height: auto !important;
  background: #11100e !important;
}

.hub-card strong,
.area-card strong,
.module-card strong {
  font-size: clamp(1.5rem, 2.4vw, 2.4rem) !important;
  line-height: 1.02 !important;
}

.hub-card p,
.area-card p,
.module-card p {
  color: rgba(248, 242, 233, 0.72) !important;
}

.hub-card:hover,
.area-card:hover,
.module-card:hover {
  border-color: var(--vp-gold) !important;
  background: #15130f !important;
}

.logo-mark,
.brand-logo,
.login-logo,
.panel-logo {
  object-fit: contain !important;
}

@media (max-width: 760px) {
  h1 {
    font-size: 1.9rem !important;
  }
}

body:has(.hub-page) {
  min-height: 100vh;
  overflow-x: hidden;
  background: #030303 !important;
  color: #f8f2e9 !important;
}

body:has(.hub-page)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 760px at 20% 18%, rgba(198, 168, 107, 0.22), transparent 58%),
    radial-gradient(900px 680px at 84% 36%, rgba(255, 255, 255, 0.12), transparent 54%),
    linear-gradient(120deg, rgba(198, 168, 107, 0.11), transparent 32%, rgba(255, 255, 255, 0.07) 58%, transparent 82%),
    linear-gradient(180deg, #0c0a08 0%, #050504 48%, #020202 100%);
  background-size: 100% 100%, 100% 100%, 220% 220%, 100% 100%;
  animation: vpFluidShift 18s ease-in-out infinite alternate;
}

body:has(.hub-page)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent);
  opacity: 0.45;
}

.hub-page {
  background: transparent !important;
}

.hub-hero img {
  opacity: 0.96;
  filter: drop-shadow(0 20px 46px rgba(0, 0, 0, 0.42));
}

.hub-hero h1,
.hub-hero span {
  color: #f8f2e9 !important;
}

.hub-hero p {
  color: var(--vp-gold) !important;
}

.hub-card {
  color: #f8f2e9 !important;
  border-color: rgba(198, 168, 107, 0.28) !important;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.055), transparent 44%),
    rgba(9, 8, 7, 0.74) !important;
  backdrop-filter: blur(18px);
}

.hub-card.primary {
  background:
    linear-gradient(160deg, rgba(198, 168, 107, 0.18), transparent 48%),
    rgba(13, 11, 9, 0.82) !important;
}

.hub-card span,
.hub-card small {
  color: var(--vp-gold) !important;
}

.hub-card span {
  top: 25px !important;
  left: 62px !important;
  right: 18px !important;
  line-height: 1.1 !important;
}

.hub-card strong {
  color: #fffaf0 !important;
}

.hub-card p {
  color: rgba(248, 242, 233, 0.72) !important;
}

.hub-footer a,
.hub-footer button {
  color: #f8f2e9 !important;
  border-color: rgba(198, 168, 107, 0.28) !important;
  background: rgba(8, 7, 6, 0.54) !important;
}

.hub-footer a:hover,
.hub-footer button:hover {
  border-color: var(--vp-gold) !important;
}

@keyframes vpFluidShift {
  0% {
    background-position: center, center, 0% 40%, center;
    filter: saturate(0.94);
  }
  100% {
    background-position: center, center, 100% 60%, center;
    filter: saturate(1.08);
  }
}