/* Aurora Commerce: shared, lightweight visual layer for both Clutch apps. */
:root {
  --commerce-accent: #72f1ca;
  --commerce-warm: #ffae96;
  --commerce-deep: #112b35;
  --commerce-canvas: #eef3f4;
  --commerce-paper: #ffffff;
  --commerce-ink: #18303b;
  --commerce-muted: #60767f;
  --commerce-line: #dce7e9;
  --commerce-shadow: 0 12px 34px #1733400b;
}
html[data-commerce-appearance="midnight"] { --commerce-canvas: #122933; }
html[data-commerce-appearance="pearl"] { --commerce-canvas: #f7f5ef; --commerce-accent: #e6d5ae !important; --commerce-warm: #eecbbf !important; --commerce-deep: #33362e !important; }
html[data-commerce-theme] body {
  background: var(--commerce-canvas);
  -webkit-font-smoothing: antialiased;
}
html[data-commerce-theme] :is(.parent-page, .clutch-workspace, body.nk-body, .admin-content) {
  background: radial-gradient(ellipse at 92% 0, #c9eee455, transparent 36rem),
    radial-gradient(ellipse at 0 60%, #f6dcd433, transparent 32rem), var(--commerce-canvas) !important;
}
/* A grid is deliberately subtle so product images and business data lead. */
html[data-commerce-theme] :is(.nk-content, .clutch-workspace > .app-content) {
  background: transparent;
}
.commerce-banner {
  display: flex;
  align-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 230px;
  margin: 0 0 24px;
  padding: 36px 32px;
  gap: 22px;
  border: 1px solid #ffffff38;
  border-radius: 26px;
  color: #f6fbfa;
  background: radial-gradient(ellipse at 95% 5%, #ffffff13, transparent 48%),
    linear-gradient(115deg, #102b35, var(--commerce-deep));
  box-shadow: 0 16px 42px #132d3515;
  font-family: Inter, 'Segoe UI', system-ui, sans-serif;
}
.commerce-banner::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .075;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(90deg, transparent 20%, black);
}
.commerce-banner::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 290px;
  height: 290px;
  border: 1px solid #ffffff14;
  border-radius: 50%;
  right: -90px;
  bottom: -160px;
  box-shadow: 0 0 0 44px #ffffff04, 0 0 0 88px #ffffff03;
}
.commerce-banner__copy { flex: 1; min-width: 0; max-width: 680px; }
.commerce-banner__eyebrow { display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 700; letter-spacing: .15em; color: #d0e3df; }
.commerce-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--commerce-accent); box-shadow: 0 0 10px #72f1ca44; }
.commerce-banner__divider { opacity: .4; }
.commerce-banner h2 { margin: 15px 0 10px; max-width: 560px; font-size: clamp(24px, 2.8vw, 36px); font-weight: 650; letter-spacing: -.04em; line-height: 1.13; color: #f6fbfa; }
.commerce-banner p { margin: 0; font-size: 13px; line-height: 1.6; color: #c3d5d7; }
.commerce-season { display: inline-flex; align-items: center; margin-top: 19px; padding: 6px 11px; font-size: 10px; line-height: 1.4; letter-spacing: .04em; font-weight: 600; color: var(--commerce-accent); border: 1px solid #ffffff20; border-radius: 50px; background: #ffffff06; }
.commerce-picker { position: absolute; top: 17px; right: 21px; display: flex; gap: 9px; align-items: center; margin: 0; font-size: 10px; color: #bdcfd3; }
.commerce-picker select { cursor: pointer; max-width: 142px; min-height: 30px; padding: 3px 7px; border: 1px solid #ffffff30; border-radius: 8px; color: #f0f7f7; background: #17323d; font: inherit; }
.commerce-picker option { background: #17323d; color: #fff; }
.commerce-picker select:focus-visible { outline: 2px solid var(--commerce-accent); outline-offset: 3px; }
.commerce-mascot { flex: 0 0 210px; position: relative; margin: 22px 26px 0 0; width: 210px; height: 180px; color: var(--commerce-accent); }
.commerce-mascot svg { width: 100%; height: 100%; animation: commerce-float 5s ease-in-out 3; }
.commerce-spark { position: absolute; font-size: 28px; color: var(--commerce-warm); animation: commerce-twinkle 3s ease-in-out 5; }
.commerce-spark--one { top: 15%; right: -6%; }
.commerce-spark--two { bottom: 25%; left: -5%; font-size: 22px; animation-delay: .7s; }
.commerce-orbit { position: absolute; width: 10px; height: 10px; border: 2px solid var(--commerce-warm); border-radius: 50%; right: 13%; bottom: 12%; }
@keyframes commerce-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes commerce-twinkle { 0%,100% { transform: scale(.85); opacity: .6; } 50% { transform: scale(1.12); opacity: 1; } }
/* Backend: lighter work surfaces and a rich, clearly separated navigation rail. */
html[data-commerce-theme] body.nk-body {
  --backend-primary: #206657;
  --backend-primary-dark: #174f45;
  --backend-primary-soft: #e7f5ee;
  --backend-accent: #ed9c80;
  --backend-canvas: var(--commerce-canvas);
  --backend-ink: var(--commerce-ink);
  --backend-border: var(--commerce-line);
}
html[data-commerce-theme] .nk-sidebar.is-dark { background: linear-gradient(165deg, #14333e, #0b222c); border-right: 1px solid #ffffff0c; }
html[data-commerce-theme] .nk-sidebar.is-dark .nk-menu-link:hover,
html[data-commerce-theme] .nk-sidebar.is-dark .nk-menu-item.active > .nk-menu-link { background: #72f1ca14; color: #c5ffeb; }
html[data-commerce-theme] .nk-sidebar.is-dark .nk-menu-item.active > .nk-menu-link { box-shadow: inset 3px 0 var(--commerce-accent); }
html[data-commerce-theme] body.nk-body :is(.card, .card-bordered),
html[data-commerce-theme] :is(.content-card, .stat-card) { border-color: var(--commerce-line); border-radius: 18px; box-shadow: var(--commerce-shadow); }
html[data-commerce-theme] body.nk-body .btn-primary { background: #206657; border-color: #206657; color: #fff; }
html[data-commerce-theme] body.nk-body .btn-primary:hover { background: #174f45; border-color: #174f45; }
html[data-commerce-theme] body.nk-body :is(.form-control, .form-select) { border-radius: 9px; }
html[data-commerce-theme] body.nk-body :is(.form-control, .form-select):focus { border-color: #328371; box-shadow: 0 0 0 3px #32837119; }
html[data-commerce-theme] body.nk-body .nk-header { background: #ffffffed; border-color: var(--commerce-line); box-shadow: 0 4px 24px #17334005; }
html[data-commerce-theme] body.nk-body .nk-block-title { letter-spacing: -.035em; }
html[data-commerce-theme] body.nk-body .nk-tb-item:not(.nk-tb-head):hover { background: #f1f8f5; }
html[data-commerce-theme] .admin-header { background: linear-gradient(110deg, #102b35, var(--commerce-deep)); border-bottom: 1px solid #ffffff20; }
html[data-commerce-theme] .admin-header h1 { font-size: 17px; letter-spacing: -.02em; }
html[data-commerce-theme] .admin-nav { background: #fff; border-color: var(--commerce-line); }
html[data-commerce-theme] .admin-nav ul { flex-wrap: wrap; }
html[data-commerce-theme] .admin-nav a { font-size: 13px; }
html[data-commerce-theme] .admin-nav a:is(.active,:hover) { color: #206657; border-color: #206657; }
html[data-commerce-theme] .admin-content { min-height: calc(100vh - 185px); }
html[data-commerce-theme] .pg-auth .card { box-shadow: 0 20px 80px #102b3514; border-radius: 22px; }
html[data-commerce-theme] .pg-auth .logo-text { color: var(--commerce-ink); letter-spacing: .1em; font-size: 18px; }
/* Storefront: a focused promotion workspace with generous product surfaces. */
html[data-commerce-theme] .clutch-workspace > .app-content { max-width: 1240px; padding-top: 84px; padding-left: 24px; padding-right: 24px; }
html[data-commerce-theme] .clutch-workspace > .app-content > [data-seasonal-banner] { margin-bottom: 22px; }
html[data-commerce-theme] app-top-nav .navbar { background: #ffffffef !important; border-color: var(--commerce-line); box-shadow: 0 3px 24px #17334008; }
html[data-commerce-theme] app-home .home-page { background: transparent; color: var(--commerce-ink); border-radius: 22px; }
html[data-commerce-theme] app-home .hero-section { background: transparent !important; border: 0; box-shadow: none; padding: 10px 0 20px; }
html[data-commerce-theme] app-home .hero-section::before { display: none; }
html[data-commerce-theme] app-home .hero-section .welcome-header h1 { color: var(--commerce-ink) !important; font-size: 25px; letter-spacing: -.04em; }
html[data-commerce-theme] app-home .hero-section .subtitle { color: var(--commerce-muted) !important; }
html[data-commerce-theme] app-home .container { padding: 0; }
html[data-commerce-theme] app-home :is(.balance-card, .products-carousel) { background: linear-gradient(135deg, #153641, var(--commerce-deep)) !important; border: 1px solid #36515b; border-radius: 22px; box-shadow: var(--commerce-shadow); }
html[data-commerce-theme] app-home .balance-card .balance-actions .action-btn.start-optimising { color: #14342f; background: var(--commerce-accent); border-color: transparent; border-radius: 11px; }
html[data-commerce-theme] app-home .carousel-title { color: #f6fbfa; }
html[data-commerce-theme] app-home :is(.stat-card, .action-card, .activity-list) { background: var(--commerce-paper) !important; color: var(--commerce-ink) !important; border: 1px solid var(--commerce-line); border-radius: 18px; box-shadow: var(--commerce-shadow); }
html[data-commerce-theme] app-home :is(.stat-value, .action-label, .section-title, .activity-title) { color: var(--commerce-ink) !important; }
html[data-commerce-theme] app-home :is(.stat-label, .activity-time) { color: var(--commerce-muted) !important; }
html[data-commerce-theme] app-home .stat-card .stat-icon { color: #206657 !important; background: #eaf5ef !important; }
html[data-commerce-theme] app-home .products-carousel .product-card { background: #fff; border: 0; border-radius: 15px; }
html[data-commerce-theme] app-home .products-carousel .product-image img { object-fit: contain; }
html[data-commerce-theme] app-product-card .product-card { background: #fff; border: 1px solid var(--commerce-line); border-radius: 20px; box-shadow: var(--commerce-shadow); }
html[data-commerce-theme] app-product-card .product-thumb { width: 100%; padding: 18px; background: #f2f6f6; }
html[data-commerce-theme] app-product-card .product-thumb::before { display: none; }
html[data-commerce-theme] app-product-card .product-thumb img { object-fit: contain; border-radius: 12px; background: #fff; transition: transform 220ms ease; }
html[data-commerce-theme] app-product-card .product-title { color: var(--commerce-ink); letter-spacing: -.025em; }
html[data-commerce-theme] app-product-card .rating { color: #b77a17; }
html[data-commerce-theme] .clutch-workspace app-footer { max-width: 1240px; }
html[data-commerce-appearance="midnight"] app-home :is(.welcome-header h1, .subtitle, .section-title) { color: #edf5f5 !important; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html[data-commerce-theme] :is(app-home .action-card, app-home .stat-card, app-product-card .product-card, .product-list .product-card) { transition: transform 220ms ease, box-shadow 220ms ease; }
  html[data-commerce-theme] :is(app-home .action-card, app-home .stat-card, app-product-card .product-card):hover { transform: translateY(-4px); box-shadow: 0 18px 34px #17334014; }
  html[data-commerce-theme] app-product-card .product-card:hover .product-thumb img { transform: scale(1.035); }
}
@media (max-width: 767px) {
  .commerce-banner { min-height: 230px; padding: 58px 21px 24px; border-radius: 20px; gap: 8px; }
  .commerce-banner h2 { font-size: 26px; }
  .commerce-banner p { font-size: 12px; max-width: 280px; }
  .commerce-banner__eyebrow { font-size: 8px; letter-spacing: .09em; gap: 6px; }
  .commerce-picker { top: 13px; right: 16px; }
  .commerce-mascot { flex-basis: 104px; height: 110px; width: 104px; margin: 25px 0 0; }
  .commerce-spark { font-size: 18px; }
  .commerce-season { font-size: 9px; }
  html[data-commerce-theme] .clutch-workspace > .app-content { max-width: 100%; padding: 76px 14px 0; }
  html[data-commerce-theme] body.nk-body .nk-content { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 390px) {
  .commerce-mascot { flex-basis: 70px; width: 70px; }
  .commerce-banner h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-commerce-theme] *, html[data-commerce-theme] *::before, html[data-commerce-theme] *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}
@media print {
  .commerce-banner { display: none !important; }
  html[data-commerce-theme] body { background: #fff; }
}
/* Keep headings readable on the dark canvas; data cards retain light surfaces. */
html[data-commerce-theme][data-commerce-appearance="midnight"] app-home .hero-section .welcome-header h1,
html[data-commerce-theme][data-commerce-appearance="midnight"] app-home .hero-section .welcome-text .subtitle,
html[data-commerce-theme][data-commerce-appearance="midnight"] body.nk-body .nk-block-head :is(.page-title, .nk-block-title, .nk-block-des, .text-muted) { color: #edf5f5 !important; }
html[data-commerce-theme] app-home .balance-card .balance-actions .action-btn.start-optimising {
  color: #14342f !important; background: var(--commerce-accent) !important; border-color: transparent !important;
}
/* The existing backend dark-mode control remains compatible with this layer. */
html[data-commerce-theme] body.nk-body.dark-mode {
  --backend-ink: #e5edf8; --backend-border: #304152;
  --backend-canvas: #142530; --backend-primary-soft: #234438;
}
html[data-commerce-theme] app-home .stat-card .stat-info .stat-value { color: var(--commerce-ink) !important; }
html[data-commerce-theme] app-home .stat-card .stat-info .stat-label { color: var(--commerce-muted) !important; }
html[data-commerce-theme] app-home .activity-list .activity-title { color: var(--commerce-ink) !important; }
html[data-commerce-theme] app-home .activity-list .activity-time { color: var(--commerce-muted) !important; }
html[data-commerce-theme] app-home :is(.stat-card, .action-card, .activity-list) { box-shadow: var(--commerce-shadow) !important; border-color: var(--commerce-line) !important; }