: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);
  }
}

/* VICTTO FACE premium dark product surface */
body.face-home,
body.login-page,
body.signup-page,
body.event-editor-page,
body.terms-page,
body:has(.dashboard-shell) {
  --vp-panel: #0b0b0b;
  --vp-soft: #050505;
  --vp-line: rgba(255, 255, 255, 0.08);
  --vp-text: #ffffff;
  --vp-muted: rgba(255, 255, 255, 0.65);
  --vp-gold: #d4af37;
  --vp-gold-strong: #f6d365;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 280px),
    linear-gradient(135deg, rgba(212, 175, 55, 0.055), transparent 38%),
    #050505 !important;
  color: #ffffff !important;
}

body.face-home main,
body.login-page main,
body.signup-page main,
body.event-editor-page main,
body.terms-page main,
body:has(.dashboard-shell) main,
body:has(.dashboard-shell) .dashboard-shell {
  background: transparent !important;
  background-color: transparent !important;
}

body.face-home h1,
body.face-home h2,
body.face-home h3,
body.face-home strong,
body.login-page h1,
body.login-page h2,
body.login-page h3,
body.login-page strong,
body.signup-page h1,
body.signup-page h2,
body.signup-page h3,
body.signup-page strong,
body.event-editor-page h1,
body.event-editor-page h2,
body.event-editor-page h3,
body.event-editor-page strong,
body.terms-page h1,
body.terms-page h2,
body.terms-page h3,
body.terms-page strong,
body:has(.dashboard-shell) h1,
body:has(.dashboard-shell) h2,
body:has(.dashboard-shell) h3,
body:has(.dashboard-shell) strong {
  color: #ffffff !important;
  letter-spacing: 0 !important;
}

body.face-home .eyebrow,
body.login-page .eyebrow,
body.signup-page .eyebrow,
body.event-editor-page .eyebrow,
body.terms-page .eyebrow,
body:has(.dashboard-shell) .eyebrow,
body:has(.dashboard-shell) .page-head .eyebrow,
body:has(.dashboard-shell) .nav-group,
body:has(.dashboard-shell) .section-kicker,
body:has(.dashboard-shell) .card-kicker,
body:has(.dashboard-shell) .panel-head span {
  color: #d4af37 !important;
  letter-spacing: 0 !important;
}

body.face-home .card,
body.face-home .page-head,
body.face-home .sales-table-card,
body.face-home .hero-summary article,
body.login-page .login-card,
body.signup-page .login-card,
body.signup-page .signup-card,
body.event-editor-page .card,
body.event-editor-page .page-head,
body.terms-page .card,
body.terms-page .page-head,
body:has(.dashboard-shell) .card,
body:has(.dashboard-shell) .page-head,
body:has(.dashboard-shell) .events-head,
body:has(.dashboard-shell) .sales-table-card,
body:has(.dashboard-shell) .report-card,
body:has(.dashboard-shell) .store-menu,
body:has(.dashboard-shell) .store-mockup,
body:has(.dashboard-shell) .store-preview,
body:has(.dashboard-shell) .photographer-event-card,
body:has(.dashboard-shell) section[class*="card"],
body:has(.dashboard-shell) article[class*="card"],
body:has(.dashboard-shell) div[class*="card"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.018)),
    #0b0b0b !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.32) !important;
  color: #ffffff !important;
}

body:has(.dashboard-shell) .setup-strip {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.face-home input,
body.face-home select,
body.face-home textarea,
body.login-page input,
body.login-page select,
body.login-page textarea,
body.signup-page input,
body.signup-page select,
body.signup-page textarea,
body.event-editor-page input,
body.event-editor-page select,
body.event-editor-page textarea,
body.terms-page input,
body.terms-page select,
body.terms-page textarea,
body:has(.dashboard-shell) input,
body:has(.dashboard-shell) select,
body:has(.dashboard-shell) textarea {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

body.face-home input:focus,
body.face-home select:focus,
body.face-home textarea:focus,
body.login-page input:focus,
body.login-page select:focus,
body.login-page textarea:focus,
body.signup-page input:focus,
body.signup-page select:focus,
body.signup-page textarea:focus,
body.event-editor-page input:focus,
body.event-editor-page select:focus,
body.event-editor-page textarea:focus,
body.terms-page input:focus,
body.terms-page select:focus,
body.terms-page textarea:focus,
body:has(.dashboard-shell) input:focus,
body:has(.dashboard-shell) select:focus,
body:has(.dashboard-shell) textarea:focus {
  border-color: rgba(212, 175, 55, 0.65) !important;
  outline: 2px solid rgba(212, 175, 55, 0.18) !important;
}

body.face-home .primary-button,
body.login-page .primary-button,
body.signup-page .primary-button,
body.event-editor-page .primary-button,
body.terms-page .primary-button,
body:has(.dashboard-shell) .primary-button,
body:has(.dashboard-shell) button[type="submit"],
body:has(.dashboard-shell) [data-action*="publish"],
body:has(.dashboard-shell) [data-action*="generate"],
body:has(.dashboard-shell) [data-action*="save"] {
  background: linear-gradient(135deg, #f6d365, #d4af37) !important;
  border-color: rgba(246, 211, 101, 0.42) !important;
  color: #090909 !important;
}

body.face-home .ghost-button,
body.login-page .ghost-button,
body.signup-page .ghost-button,
body.event-editor-page .ghost-button,
body.terms-page .ghost-button,
body:has(.dashboard-shell) .ghost-button,
body:has(.dashboard-shell) button:not(.primary):not([type="submit"]) {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

body.face-home .panel-sidebar,
body:has(.dashboard-shell) .panel-sidebar,
body:has(.dashboard-shell) .topbar {
  background: #070707 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

body.face-home .panel-sidebar a.active,
body.face-home .panel-sidebar a:hover,
body:has(.dashboard-shell) .panel-sidebar a.active,
body:has(.dashboard-shell) .panel-sidebar a:hover,
body:has(.dashboard-shell) .topbar a.active,
body:has(.dashboard-shell) .topbar a:hover {
  background: rgba(212, 175, 55, 0.16) !important;
  border-color: rgba(212, 175, 55, 0.32) !important;
  color: #ffffff !important;
}

body:has(.dashboard-shell) p,
body:has(.dashboard-shell) small,
body:has(.dashboard-shell) span,
body.login-page label,
body.login-page label span,
body.signup-page label,
body.signup-page label span,
body.event-editor-page p,
body.terms-page p {
  letter-spacing: 0 !important;
}