/* CoderVex brand theme — sampled from the AI E-commerce Solutions artwork. */
:root {
  --cv-navy-950: #020f22;
  --cv-navy-900: #031b36;
  --cv-navy-800: #052d50;
  --cv-cyan: #08d3ed;
  --cv-cyan-dark: #00a9d2;
  --cv-yellow: #ffc400;
  --cv-yellow-dark: #e8ae00;
  --cv-ink: #0a2038;
  --cv-muted: #64748b;
  --cv-soft: #effbfe;
  --cv-line: #d8e7ed;
  --cv-glow: rgba(8, 211, 237, .24);

  /* Existing marketing variables */
  --cv: var(--cv-cyan-dark);
  --ink: var(--cv-ink);
  --muted: var(--cv-muted);
  --line: var(--cv-line);
  --ai-violet: var(--cv-cyan-dark);
  --ai-navy: var(--cv-navy-900);
  --ai-ink: var(--cv-ink);
  --ai-muted: var(--cv-muted);
  --ai-line: var(--cv-line);
  --ai-soft: var(--cv-soft);
  --bs-primary: var(--cv-cyan-dark);
  --bs-primary-rgb: 0, 169, 210;
}

::selection { color: var(--cv-navy-950); background: var(--cv-yellow); }
a { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
.text-primary { color: var(--cv-cyan-dark) !important; }
.bg-primary { background-color: var(--cv-cyan-dark) !important; }
.btn-primary {
  --bs-btn-bg: var(--cv-cyan-dark);
  --bs-btn-border-color: var(--cv-cyan-dark);
  --bs-btn-hover-bg: #008caf;
  --bs-btn-hover-border-color: #008caf;
  --bs-btn-active-bg: #007f9f;
  --bs-btn-active-border-color: #007f9f;
}
.btn-outline-primary {
  --bs-btn-color: var(--cv-cyan-dark);
  --bs-btn-border-color: var(--cv-cyan-dark);
  --bs-btn-hover-bg: var(--cv-cyan-dark);
  --bs-btn-hover-border-color: var(--cv-cyan-dark);
}

/* Public navigation and calls to action */
.navbar.fixed-top { border-bottom-color: rgba(8, 211, 237, .22) !important; }
.nav-link-custom:hover, .nav-link-custom.active { color: var(--cv-cyan-dark) !important; }
.btn-primary-gradient, .back-to-top {
  color: var(--cv-navy-950) !important;
  background: linear-gradient(135deg, var(--cv-yellow), #ffda43) !important;
  box-shadow: 0 10px 28px rgba(255, 196, 0, .24) !important;
}
.btn-login { color: var(--cv-cyan-dark) !important; border-color: var(--cv-cyan-dark) !important; }
.btn-login:hover, .btn-login.active { color: var(--cv-navy-950) !important; background: var(--cv-cyan) !important; }
.public-nav-dropdown .dropdown-item:hover { color: #007f9f !important; background: var(--cv-soft) !important; }
.cv-primary {
  color: var(--cv-navy-950) !important;
  border-color: var(--cv-yellow) !important;
  background: linear-gradient(135deg, var(--cv-yellow), #ffda43) !important;
  box-shadow: 0 12px 28px rgba(255, 196, 0, .25) !important;
}
.cv-primary:hover { border-color: #ffda43 !important; transform: translateY(-1px); }
.cv-secondary { color: var(--cv-navy-900) !important; border-color: #b6dce6 !important; }
.ai-hero .cv-secondary {
  color: #fff !important;
  border-color: rgba(8, 211, 237, .72) !important;
  background: rgba(8, 211, 237, .08) !important;
}
.ai-hero .cv-secondary:hover,
.ai-hero .cv-secondary:focus,
.ai-hero .cv-secondary:active {
  color: var(--cv-navy-950) !important;
  border-color: var(--cv-cyan) !important;
  background: var(--cv-cyan) !important;
  box-shadow: 0 10px 26px rgba(8, 211, 237, .24) !important;
  transform: translateY(-1px);
}
.smartwoo-home .cv-light,
.ai-final .cv-light {
  color: var(--cv-navy-950) !important;
  border-color: #fff !important;
  background: #fff !important;
}
.smartwoo-home .cv-light:hover,
.smartwoo-home .cv-light:focus,
.smartwoo-home .cv-light:active,
.ai-final .cv-light:hover,
.ai-final .cv-light:focus,
.ai-final .cv-light:active {
  color: var(--cv-navy-950) !important;
  border-color: var(--cv-cyan) !important;
  background: var(--cv-cyan) !important;
  box-shadow: 0 10px 26px rgba(8, 211, 237, .24) !important;
  transform: translateY(-1px);
}

/* Homepage hero: the navy/cyan/yellow visual language from the supplied artwork. */
.ai-hero, .home-page .cv-hero {
  color: #fff;
  background:
    radial-gradient(circle at 86% 20%, rgba(8, 211, 237, .32), transparent 30%),
    radial-gradient(circle at 58% 100%, rgba(255, 196, 0, .12), transparent 28%),
    linear-gradient(135deg, var(--cv-navy-950), var(--cv-navy-800)) !important;
}
.ai-hero::before { background-image: radial-gradient(rgba(8, 211, 237, .22) 1px, transparent 1px) !important; }
.ai-hero h1, .home-page .cv-hero h1 { color: #fff; }
.ai-hero h1 em, .home-page .cv-hero h1 em { color: var(--cv-cyan); }
.ai-hero__copy > p, .home-page .cv-hero p { color: #c7dbe6; }
.ai-kicker, .eyebrow, .section-title > span { color: var(--cv-cyan-dark); }
.ai-hero .ai-kicker { color: var(--cv-cyan); }
.ai-proof { color: #d7e8ef; }
.ai-proof i, .proof i { color: var(--cv-yellow); }
.ai-window, .app-preview, .hero-product-shot { border-color: rgba(8, 211, 237, .65); box-shadow: 0 28px 75px rgba(0, 0, 0, .4), 0 0 35px var(--cv-glow); }
.ai-float > i, .preview-body > aside strong { color: var(--cv-navy-950); background: var(--cv-yellow); }
.ai-float--bottom > i { background: var(--cv-cyan); }

/* Marketing surfaces */
.ai-tool-card__image, .feature-shot { background: var(--cv-soft); }
.ai-tool-card__body > span, .ai-tool-card__body a, .coder-products strong,
.feature-tile-copy small, .feature-tile-copy > b, .compare a { color: var(--cv-cyan-dark); }
.ai-steps article > i, .ai-benefit-grid i, .coder-products__grid > a > i,
.feature-tile-copy > i, .service-card > i, .product-card > i {
  color: #007f9f;
  background: #dff9fd;
}
.ai-step-arrow { color: var(--cv-yellow-dark); }
.ai-before-after > i { color: var(--cv-navy-950); background: var(--cv-yellow); }
.smartwoo-home__panel, .commerce-panel, .woo-callout {
  background: radial-gradient(circle at 90% 10%, rgba(8, 211, 237, .3), transparent 38%), linear-gradient(135deg, var(--cv-navy-950), var(--cv-navy-800)) !important;
}
.smartwoo-home .ai-kicker, .woo-callout span, .woo-callout h3 em { color: var(--cv-cyan); }
.ai-final .container > div, .final-cta .container > div {
  color: #fff;
  background: radial-gradient(circle at 15% 0, rgba(8, 211, 237, .46), transparent 31%), linear-gradient(125deg, var(--cv-navy-900), var(--cv-navy-800)) !important;
  box-shadow: 0 24px 58px rgba(2, 15, 34, .24);
}
.price-card.featured { border-color: var(--cv-cyan-dark); box-shadow: 0 20px 45px var(--cv-glow); }
.price-card > label { color: var(--cv-navy-950); background: var(--cv-yellow); }
.feature-card.dark, .code-window-body, .project-card-visual { background: linear-gradient(135deg, var(--cv-navy-950), var(--cv-navy-800)); }
.solution-list > div > i, .orbit > strong { color: var(--cv-navy-950); background: var(--cv-yellow); }
.project-technologies span { color: #007f9f; background: #e2f9fd; }

/* Documentation ships without marketing-detail.css, so its hero needs its own surface. */
.docs-page .docs-hero {
  color: #fff;
  background:
    radial-gradient(circle at 85% 20%, rgba(8, 211, 237, .34), transparent 31%),
    radial-gradient(circle at 18% 100%, rgba(255, 196, 0, .12), transparent 28%),
    linear-gradient(135deg, var(--cv-navy-950), var(--cv-navy-800));
}
.docs-page .docs-hero h1 { color: #fff; }
.docs-page .docs-eyebrow { color: var(--cv-cyan); }
.docs-page .docs-hero p { color: #c7dbe6; }
.docs-page .docs-hero-action { border-color: rgba(8, 211, 237, .4); background: rgba(8, 211, 237, .08); }
.docs-page .docs-hero-action:hover { border-color: var(--cv-cyan); background: rgba(8, 211, 237, .16); }

/* Public footer */
footer.text-white { background: var(--cv-navy-950) !important; border-top: 1px solid rgba(8, 211, 237, .25); }
.footer-brand-text { color: var(--cv-cyan) !important; }
.footer-socials a:hover { color: var(--cv-navy-950) !important; border-color: var(--cv-cyan) !important; background: var(--cv-cyan) !important; }

/* Authentication: login and registration are standalone templates. */
.login-page {
  color: var(--cv-ink);
  background: linear-gradient(145deg, #f7fbfc 0%, #e7f8fc 100%);
}
.login-page .login-hero {
  background:
    radial-gradient(circle at 82% 12%, rgba(8, 211, 237, .34), transparent 30%),
    radial-gradient(circle at 22% 100%, rgba(255, 196, 0, .14), transparent 26%),
    linear-gradient(135deg, var(--cv-navy-950), var(--cv-navy-800));
}
.login-page .login-hero .badge { color: var(--cv-navy-950) !important; background: var(--cv-yellow) !important; }
.login-page .login-card { border: 1px solid rgba(8, 211, 237, .16); box-shadow: 0 26px 75px rgba(3, 27, 54, .18); }
.login-page .login-overview {
  border-color: #dbe9ed;
  background: linear-gradient(145deg, #f7fcfd, #e9f9fc);
}
.login-page .login-mark {
  color: var(--cv-navy-950);
  background: var(--cv-yellow);
  box-shadow: 0 12px 35px rgba(255, 196, 0, .22);
}
.login-page .feature-icon { color: #007f9f; background: #dff9fd; }
.login-page .form-control:focus,
.registration-page .form-control:focus {
  border-color: var(--cv-cyan-dark);
  box-shadow: 0 0 0 4px rgba(8, 211, 237, .13);
}
.login-page .form-check-input:checked,
.registration-page .form-check-input:checked { border-color: var(--cv-cyan-dark); background-color: var(--cv-cyan-dark); }
.login-page .btn-auth,
.registration-page .btn-sw {
  color: var(--cv-navy-950);
  background: linear-gradient(135deg, var(--cv-yellow), #ffda43);
  box-shadow: 0 10px 28px rgba(255, 196, 0, .25);
}
.login-page .btn-auth:hover,
.registration-page .btn-sw:hover {
  color: var(--cv-navy-950);
  background: linear-gradient(135deg, #ffca0a, #ffe16a);
  box-shadow: 0 14px 34px rgba(255, 196, 0, .3);
}
.login-page .forgot-link,
.login-page .register-link,
.registration-page .form-check-label a { color: #007f9f; }
.login-page .forgot-link:hover,
.login-page .register-link:hover,
.registration-page .form-check-label a:hover { color: #005f77; }

.registration-page {
  --sw-primary: var(--cv-cyan-dark);
  --sw-dark: var(--cv-ink);
  --sw-soft: var(--cv-soft);
  color: var(--cv-ink);
  background:
    radial-gradient(circle at 10% 16%, rgba(8, 211, 237, .12), transparent 25%),
    linear-gradient(145deg, #f7fbfc 0%, #e7f8fc 100%);
}
.registration-page .sw-card { border: 1px solid rgba(8, 211, 237, .16); box-shadow: 0 26px 75px rgba(3, 27, 54, .18); }
.registration-page .sw-benefits {
  color: #fff;
  background:
    radial-gradient(circle at 15% 90%, rgba(255, 196, 0, .16), transparent 30%),
    radial-gradient(circle at 100% 0, rgba(8, 211, 237, .3), transparent 34%),
    linear-gradient(145deg, var(--cv-navy-950), var(--cv-navy-800));
}
.registration-page .sw-benefits > .badge { color: var(--cv-navy-950) !important; background: var(--cv-yellow) !important; }
.registration-page .sw-feature > i { color: var(--cv-cyan); }
.registration-page .sw-plan { border-color: #cce6ed; background: var(--cv-soft); }
.registration-page .sw-plan .text-bg-primary { color: var(--cv-navy-950) !important; background: var(--cv-yellow) !important; }
.registration-page .btn-check:checked + .btn-outline-primary {
  color: var(--cv-navy-950);
  border-color: var(--cv-cyan);
  background: var(--cv-cyan);
}
.registration-page .sw-security i { color: var(--cv-cyan-dark); }

/* Shared user/admin application shell */
body:has(#page-dashboard) { background: #f3f8fa; }
.sidebar {
  background:
    radial-gradient(circle at 0 100%, rgba(8, 211, 237, .22), transparent 32%),
    linear-gradient(180deg, var(--cv-navy-950), var(--cv-navy-800));
  border-right: 1px solid rgba(8, 211, 237, .2);
  box-shadow: 12px 0 35px rgba(2, 15, 34, .12);
}
.sidebar .nav-link:hover { background: rgba(8, 211, 237, .1); }
.sidebar .nav-link.active {
  color: var(--cv-navy-950);
  background: linear-gradient(135deg, var(--cv-cyan), #76efff);
  box-shadow: 0 7px 18px rgba(8, 211, 237, .2);
}
.sidebar .nav-link.active i { color: var(--cv-navy-950); }
.sidebar-section-label { color: rgba(118, 239, 255, .72); }
.logout-btn { color: var(--cv-navy-950); background: var(--cv-yellow); font-weight: 700; }
.logout-btn:hover { color: var(--cv-navy-950); background: #ffda43; }
.dashboard-navbar { border-bottom: 1px solid #dbe9ed; box-shadow: 0 5px 24px rgba(3, 27, 54, .07) !important; }
.topbar-account-summary a:hover { color: #007f9f; background: var(--cv-soft); }
.topbar-account-summary i { color: var(--cv-cyan-dark); }

/* Dashboard modules share the same brand tokens, including the admin area. */
.admin-dashboard {
  --dashboard-primary: var(--cv-cyan-dark);
  --dashboard-primary-dark: #008caf;
  --dashboard-ink: var(--cv-ink);
  --dashboard-muted: var(--cv-muted);
  --dashboard-border: var(--cv-line);
}
.smartwoo-settings {
  --settings-primary: var(--cv-cyan-dark);
  --settings-ink: var(--cv-ink);
  --settings-muted: var(--cv-muted);
  --settings-border: var(--cv-line);
}
.admin-reports {
  --report-primary: var(--cv-cyan-dark);
  --report-ink: var(--cv-ink);
  --report-muted: var(--cv-muted);
  --report-border: var(--cv-line);
}
.dashboard-btn--primary, .settings-save-btn, .report-filter .btn {
  color: var(--cv-navy-950) !important;
  border-color: var(--cv-yellow) !important;
  background: var(--cv-yellow) !important;
  box-shadow: 0 8px 20px rgba(255, 196, 0, .2) !important;
}
.dashboard-btn--primary:hover, .settings-save-btn:hover, .report-filter .btn:hover { background: #ffda43 !important; }
.quick-access-panel { background: linear-gradient(135deg, #fff 0%, var(--cv-soft) 100%); }
.creation-shortcut { --shortcut-color: var(--cv-cyan-dark); --shortcut-soft: #dff9fd; }
.creation-shortcut--amber { --shortcut-color: #b77d00; --shortcut-soft: #fff5cc; }
.metric-card--revenue { --metric: var(--cv-cyan-dark); --metric-soft: #dff9fd; }
.metric-card--requests { --metric: #007c9c; --metric-soft: #e2f8fc; }
.subscription-ring { background: conic-gradient(var(--cv-cyan-dark) 0 calc(var(--active) * 1%), var(--cv-yellow) calc(var(--active) * 1%) calc((var(--active) + var(--trial)) * 1%), #e3ebee calc((var(--active) + var(--trial)) * 1%) 100%); }
.legend-dot--active { background: var(--cv-cyan-dark); }
.legend-dot--trial { background: var(--cv-yellow); }
.report-nav a:hover, .report-nav a.active { color: #007f9f; background: #dff9fd; }
.report-hub-card { --hub-color: var(--cv-cyan-dark); --hub-soft: #dff9fd; }
.report-kpi-icon.is-purple, .ranking-number, .system-icon--purple, .settings-panel__icon--purple { color: #007f9f; background: #dff9fd; }
.smartwoo-switch .form-check-input:checked { border-color: var(--cv-cyan-dark); background-color: var(--cv-cyan-dark); }
.setting-field .form-control:focus, .setting-field .form-select:focus,
.report-filter input:focus, .report-filter select:focus {
  border-color: var(--cv-cyan-dark);
  box-shadow: 0 0 0 .2rem rgba(8, 211, 237, .13);
}

@media (max-width: 991.98px) {
  .navbar.fixed-top .navbar-collapse { margin-top: .8rem; padding: .8rem; border: 1px solid var(--cv-line); border-radius: 12px; background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}