/* VoxClient visual system — shared public, workspace, billing and admin UI. */
:root {
  color-scheme: dark;
  --vc-bg: #0b1020;
  --vc-bg-raised: #11182a;
  --vc-surface: rgba(19, 27, 45, .88);
  --vc-surface-solid: #131b2d;
  --vc-surface-soft: rgba(255, 255, 255, .045);
  --vc-border: rgba(166, 184, 218, .15);
  --vc-border-strong: rgba(166, 184, 218, .25);
  --vc-text: #f4f6fb;
  --vc-text-soft: #c0c9da;
  --vc-muted: #8793aa;
  --vc-accent: #6f8cff;
  --vc-accent-strong: #5274f5;
  --vc-accent-soft: rgba(111, 140, 255, .15);
  --vc-positive: #46cba4;
  --vc-danger: #f17787;
  --vc-shadow: 0 18px 55px rgba(0, 0, 0, .28);
  --vc-radius-sm: 10px;
  --vc-radius: 16px;
  --vc-radius-lg: 24px;
  --vc-ease: cubic-bezier(.2, .75, .25, 1);
}

[data-theme="light"] {
  color-scheme: light;
  --vc-bg: #f5f7fb;
  --vc-bg-raised: #edf1f8;
  --vc-surface: rgba(255, 255, 255, .94);
  --vc-surface-solid: #fff;
  --vc-surface-soft: rgba(22, 39, 76, .035);
  --vc-border: rgba(33, 50, 83, .11);
  --vc-border-strong: rgba(33, 50, 83, .19);
  --vc-text: #172033;
  --vc-text-soft: #43506a;
  --vc-muted: #68758e;
  --vc-accent: #4568e8;
  --vc-accent-strong: #3456d2;
  --vc-accent-soft: rgba(69, 104, 232, .10);
  --vc-positive: #138e6d;
  --vc-danger: #c74356;
  --vc-shadow: 0 16px 42px rgba(31, 49, 83, .10);
}

html { background: var(--vc-bg); color: var(--vc-text); }
body, .app-body {
  color: var(--vc-text);
  background: var(--vc-bg);
  background-image: radial-gradient(ellipse 85% 36% at 50% -12%, rgba(88, 117, 232, .16), transparent 72%);
  background-attachment: fixed;
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  line-height: 1.6;
}
[data-theme="light"] body, [data-theme="light"] .app-body {
  background-image: radial-gradient(ellipse 85% 36% at 50% -12%, rgba(86, 118, 232, .09), transparent 72%);
}
h1, h2, h3, h4, .display-title, .section-title { color: var(--vc-text); letter-spacing: -.035em; }
p, li { color: inherit; }
a { text-underline-offset: .2em; }
a:not([class]) { color: var(--vc-accent); }
::selection { background: rgba(102, 131, 255, .32); }

button, input, select, textarea { font: inherit; }
button, a, [role="button"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--vc-accent) 76%, white 24%);
  outline-offset: 3px;
}
button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: .58; }

.nav { top: 12px; padding: 0 20px; }
.nav-inner, .app-topnav-inner {
  background: color-mix(in srgb, var(--vc-surface-solid) 90%, transparent);
  border: 1px solid var(--vc-border);
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.nav-inner { min-height: 64px; padding: 9px 18px; }
.nav-links a, .app-main-nav a { color: var(--vc-text-soft); transition: color .18s var(--vc-ease), background .18s var(--vc-ease); }
.nav-links a:hover, .nav-links a.active, .app-main-nav a:hover, .app-main-nav a.active { color: var(--vc-text); }
.nav-logo-text { color: var(--vc-text); }
.nav-logo-text span { color: var(--vc-accent); }
html { scroll-behavior: smooth; }
.nav-logo-mark { animation: vc-logo-breathe 4s ease-in-out infinite; transform-origin: center; }
.nav-logo-mark > rect:not(:first-of-type) { transform-box: fill-box; transform-origin: center; animation: vc-logo-bars 1.5s ease-in-out infinite; }
.nav-logo-mark > rect:nth-of-type(3) { animation-delay: -.3s; }
.nav-logo-mark > rect:nth-of-type(4) { animation-delay: -.15s; }
.nav-logo-mark > rect:nth-of-type(5) { animation-delay: -.3s; }
.nav-logo-mark > rect:nth-of-type(6) { animation-delay: -.45s; }
@keyframes vc-logo-breathe { 0%, 100% { filter: drop-shadow(0 0 0 rgba(111,140,255,0)); transform: scale(1); } 50% { filter: drop-shadow(0 0 5px rgba(111,140,255,.35)); transform: scale(1.035); } }
@keyframes vc-logo-bars { 0%, 100% { transform: scaleY(.72); opacity: .72; } 50% { transform: scaleY(1); opacity: 1; } }
.reveal-on-scroll { opacity: 0; transform: translateY(9px); filter: blur(2px); transition: opacity .32s ease, transform .32s ease, filter .32s ease; }
.reveal-on-scroll.is-revealed { opacity: 1; transform: translateY(0); filter: blur(0); }
.mobile-menu { border: 1px solid var(--vc-border); border-radius: 16px; background: var(--vc-surface-solid); box-shadow: var(--vc-shadow); }
.mobile-nav-link { color: var(--vc-text-soft); }

.btn, button.btn, .admin-btn {
  min-height: 42px;
  border-radius: 11px;
  font-weight: 650;
  letter-spacing: -.01em;
  transition: transform .16s var(--vc-ease), background .16s, border-color .16s, box-shadow .16s;
}
.btn:not(:disabled):hover, .admin-btn:not(:disabled):hover { transform: translateY(-1px); }
.btn-primary, .admin-btn-primary { background: var(--vc-accent-strong); border-color: var(--vc-accent-strong); box-shadow: 0 5px 16px rgba(72, 101, 221, .2); }
.btn-secondary, .btn-ghost, .admin-btn-quiet { color: var(--vc-text); background: var(--vc-surface-soft); border-color: var(--vc-border); }
.btn-secondary:hover, .btn-ghost:hover, .admin-btn-quiet:hover { background: var(--vc-accent-soft); border-color: var(--vc-border-strong); }

.vox-card, .pricing-card, .campaign-card, .client-card, .approval-card,
.admin-panel, .admin-metric, .app-panel, .stat-card, .analytics-card {
  color: var(--vc-text);
  background: var(--vc-surface);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.vox-card:hover, .pricing-card:hover, .campaign-card:hover, .client-card:hover { border-color: var(--vc-border-strong); }
.section-label { color: var(--vc-accent); }
.accent-word { color: var(--vc-accent) !important; }
.display-title { line-height: 1.08; }
.hero { padding-top: clamp(36px, 6vw, 76px) !important; }
.hero-badge, .hero-metric-pill { border: 1px solid var(--vc-border); background: var(--vc-surface-soft); color: var(--vc-text-soft); }
.social-post-card { background: var(--vc-surface-solid); border: 1px solid var(--vc-border); border-radius: 20px; box-shadow: var(--vc-shadow); }
.feature-card, .vox-feature-card { border: 1px solid var(--vc-border); border-radius: var(--vc-radius); background: var(--vc-surface); }
.feature-card:hover, .vox-feature-card:hover { transform: translateY(-2px); border-color: var(--vc-border-strong); }
.pricing-card { padding: clamp(20px, 3vw, 30px); }
.pricing-card .pricing-plan-name { color: var(--vc-text); }
.pricing-card .pricing-plan-desc, .pricing-period { color: var(--vc-muted); }
.pricing-popular-badge { background: var(--vc-accent-strong); }
.section-sub { color: var(--vc-text-soft); }
.badge, .badge-accent, .badge-cyan, .badge-emerald, .badge-amber, .badge-rose, .badge-violet { border-radius: 999px; }

.input, .ab-input, .ab-form-input, .admin-field input, .admin-field textarea,
.admin-dialog-field-wrap input, .admin-dialog-field-wrap select,
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  color: var(--vc-text);
  background-color: var(--vc-surface-solid);
  border-color: var(--vc-border-strong);
  border-radius: 11px;
}
input::placeholder, textarea::placeholder { color: var(--vc-muted); opacity: .85; }
label, .label, .ab-label { color: var(--vc-text-soft); }

.footer { border-top: 1px solid var(--vc-border); background: color-mix(in srgb, var(--vc-bg-raised) 70%, transparent); }
.footer-nav-list a { color: var(--vc-muted); }
.footer-nav-list a:hover { color: var(--vc-text); }

.app-shell { color: var(--vc-text); }
.app-topnav { top: 10px; padding: 0 20px; }
.app-topnav-inner { min-height: 62px; padding: 9px 16px; }
.app-main-nav a { border-radius: 9px; }
.app-main-nav a.active { background: var(--vc-accent-soft); }
.app-main { width: min(100% - 40px, 1440px); margin: 0 auto; padding: 20px 0 64px; }
.app-nav-btn, .app-mobile-nav-link { border-radius: 10px; }
.workspace-switcher-dropdown, .profile-dropdown, .app-user-menu, .client-card-menu,
.profile-menu, [role="menu"] { color: var(--vc-text); background: var(--vc-surface-solid); border: 1px solid var(--vc-border); border-radius: 14px; box-shadow: var(--vc-shadow); }
.workspace-switcher-item:hover, .profile-menu-item:hover { background: var(--vc-accent-soft); }
.dashboard-kpi-grid, .campaign-grid, .client-grid { gap: 16px; }
.kpi-card, .campaign-card, .client-card { border-radius: var(--vc-radius); }
.ab-modal-backdrop[aria-hidden="true"] { display: none; }
.ab-modal-backdrop[aria-hidden="false"] { display: flex; }
.ab-modal-backdrop { padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); background: rgba(4, 8, 18, .68); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ab-modal { max-height: min(88dvh, 900px); overflow: auto; border: 1px solid var(--vc-border-strong); border-radius: 20px; background: var(--vc-surface-solid); color: var(--vc-text); box-shadow: 0 32px 90px rgba(0, 0, 0, .36); }
.ab-modal-title { color: var(--vc-text); }
.ab-modal-close { width: 40px; height: 40px; border-radius: 10px; }
.ab-modal-close:hover { background: var(--vc-surface-soft); }
.billing-explainer-modal { display: flex; width: min(100%, 680px); max-height: min(88dvh, 820px); flex-direction: column; padding: clamp(18px, 3vw, 28px); }
.billing-explainer-modal .ab-modal-header, .billing-explainer-modal .explainer-plan-pill, .billing-explainer-modal .ab-modal-footer { flex: 0 0 auto; }
.billing-explainer-modal .ab-modal-body { display: grid; flex: 1 1 auto; min-height: 0; gap: 12px; max-height: none !important; overflow-y: auto; padding: 2px 5px 4px 0; overscroll-behavior: contain; }
.billing-explainer-modal .explainer-card { min-width: 0; padding: 15px 16px; border: 1px solid var(--vc-border); border-radius: 14px; background: var(--vc-surface); }
.billing-explainer-modal .explainer-card-header { display: flex; align-items: flex-start; gap: 11px; }
.billing-explainer-modal .explainer-card-icon { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 10px; }
.billing-explainer-modal .explainer-card-title { min-width: 0; margin: 4px 0 0; color: var(--vc-text); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.billing-explainer-modal .explainer-card-list { display: grid; gap: 7px; margin: 11px 0 0; padding-left: 18px; color: var(--vc-text-soft); font-size: 13px; line-height: 1.6; }
.billing-explainer-modal .explainer-card-list li { padding-left: 2px; overflow-wrap: anywhere; }
.billing-explainer-modal .ab-modal-footer { margin-top: 12px !important; padding-top: 14px !important; border-top: 1px solid var(--vc-border) !important; }
.billing-explainer-modal .explainer-agreement-wrap { margin: 4px 0 0; }
.theme-toggle-btn { min-width: 42px; }

.session-modal-backdrop[aria-hidden="true"] { display: none !important; }
.session-modal-backdrop.is-open, .session-modal-backdrop[aria-hidden="false"] { display: flex !important; }
.admin-dialog, .admin-modal { color: var(--vc-text); background: var(--vc-surface-solid); border-color: var(--vc-border); }
.admin-dialog h2, .admin-dialog-field-wrap label { color: var(--vc-text); }
.admin-table th { color: var(--vc-muted); }
.admin-table td { color: var(--vc-text-soft); }
.admin-toast-region { z-index: 12000; }

.faq-accordion-header { width: 100%; border: 0; text-align: left; font: inherit; cursor: pointer; }
.faq-accordion-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; color: var(--vc-text); background: transparent; }
.faq-accordion-header:focus-visible { outline-offset: -3px; }
.faq-accordion-item { border-color: var(--vc-border); background: var(--vc-surface); }
.faq-accordion-content { color: var(--vc-text-soft); }
.faq-accordion-header .faq-accordion-icon { flex: none; color: var(--vc-accent); }
.faq-accordion-item.is-open .faq-accordion-header { color: var(--vc-accent); }

.workspace-loading-state { min-height: 56vh; display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--vc-text-soft); }
.workspace-loading-state h1 { margin: 0 0 5px; font-size: clamp(22px, 4vw, 30px); }
.workspace-loading-state p { margin: 0; color: var(--vc-muted); }
.workspace-loading-spinner { width: 28px; height: 28px; flex: none; border: 3px solid var(--vc-border-strong); border-top-color: var(--vc-accent); border-radius: 50%; animation: vc-spin .8s linear infinite; }
@keyframes vc-spin { to { transform: rotate(360deg); } }

/* Light theme surfaces that previously used fixed dark inline colors. */
[data-theme="light"] .nav-inner, [data-theme="light"] .app-topnav-inner,
[data-theme="light"] .ab-modal, [data-theme="light"] .workspace-switcher-dropdown,
[data-theme="light"] .admin-dialog, [data-theme="light"] .admin-modal { color: var(--vc-text); }
[data-theme="light"] .app-user-avatar, [data-theme="light"] .nav-profile-toggle { color: #fff; }
[data-theme="light"] .app-main-nav a, [data-theme="light"] .profile-menu-item { color: var(--vc-text-soft); }
[data-theme="light"] .app-main-nav a.active { color: var(--vc-accent-strong); }
[data-theme="light"] .admin-dialog-field-wrap input, [data-theme="light"] .admin-dialog-field-wrap select { color: var(--vc-text); background: #fff; }
[data-theme="light"] .vox-card, [data-theme="light"] .pricing-card, [data-theme="light"] .social-post-card,
[data-theme="light"] .feature-card, [data-theme="light"] .vox-feature-card,
[data-theme="light"] .campaign-card, [data-theme="light"] .approval-card,
[data-theme="light"] .admin-panel, [data-theme="light"] .admin-metric {
  color: var(--vc-text); background: var(--vc-surface-solid); border-color: var(--vc-border);
}
[data-theme="light"] .vox-card h1, [data-theme="light"] .vox-card h2, [data-theme="light"] .vox-card h3,
[data-theme="light"] .vox-card p, [data-theme="light"] .pricing-card h1, [data-theme="light"] .pricing-card h2,
[data-theme="light"] .pricing-card h3, [data-theme="light"] .pricing-card p,
[data-theme="light"] .feature-card h2, [data-theme="light"] .feature-card h3, [data-theme="light"] .feature-card p,
[data-theme="light"] .admin-panel h2, [data-theme="light"] .admin-panel h3 { color: var(--vc-text); }

@media (max-width: 900px) {
  .nav { top: 8px; padding: 0 12px; }
  .app-topnav { top: 6px; padding: 0 10px; }
  .app-topnav-inner { border-radius: 14px; }
}
@media (max-width: 640px) {
  .container { padding-inline: 18px; }
  .nav-inner { min-height: 56px; padding: 7px 11px; }
  .nav-actions .btn { min-height: 38px; }
  .app-main { width: min(100% - 24px, 1440px); padding-top: 12px; }
  .app-topnav-inner { gap: 8px; padding: 7px 9px; }
  .workspace-switcher-btn { max-width: 43vw; overflow: hidden; text-overflow: ellipsis; }
  .ab-modal-backdrop { align-items: flex-end; padding: 10px; }
  .ab-modal { width: 100%; max-height: 92dvh; border-radius: 20px 20px 14px 14px; }
  .billing-explainer-modal { max-height: 92dvh; }
  .footer-grid { gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Accessibility hardening: readable secondary text, clear controls, and visible keyboard focus. */
:root {
  --vc-muted: #aebbd0;
}
[data-theme="light"] {
  --vc-muted: #4b5870;
}
.btn-primary, .admin-btn-primary,
a.btn-primary, button.btn-primary {
  color: #fff !important;
  background: #2448c7 !important;
  border-color: #2448c7 !important;
}
.btn-primary:hover:not(:disabled), .admin-btn-primary:hover:not(:disabled),
a.btn-primary:hover:not(:disabled), button.btn-primary:hover:not(:disabled) {
  color: #fff !important;
  background: #1c3ba8 !important;
  border-color: #1c3ba8 !important;
}
input::placeholder, textarea::placeholder {
  color: #aebbd0;
  opacity: 1;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #58657b;
  opacity: 1;
}
:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid #9bb4ff;
  outline-offset: 3px;
}
[data-theme="light"] :where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline-color: #2448c7;
}

/* Full-width view overrides: prevent boxed width / unwanted padding on AI Studio, Create Client, and Brand Memory */
.app-shell:has(.ai-layout) .app-main,
.app-shell:has(.dedicated-create-page) .app-main,
.app-shell:has(.vc-memory-page) .app-main,
.view-ai-studio .app-main,
.app-main.app-main-fullwidth {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.app-shell:has(.ai-layout),
.view-ai-studio .app-shell {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow: visible !important;
}

.app-shell:has(.ai-layout) .app-topnav,
.view-ai-studio .app-topnav {
  margin-bottom: 0 !important;
}