@charset "UTF-8";

/* Preview palette aligned with the existing AliExpress workbench theme. */
:root {
  --ink: #202637;
  --muted: #697386;
  --purple: #287f78;
  --purple-deep: #1d6863;
  --line: #e3e7ef;
  --shadow: 0 22px 65px rgb(23 32 51 / 10%);
}

a:focus-visible, button:focus-visible, select:focus-visible { outline-color: #5fd1c5; }
.preview-ribbon { color: #1d6863; background: #ddf3ea; }
.site-header, .business-header { border-bottom-color: #27394c; background: #172033; }
.brand { color: #fff; }
.brand > span:last-child > span { color: #5fd1c5; }
.brand-mark { background: linear-gradient(145deg, #39a79d, #18736d); box-shadow: 0 6px 18px rgb(40 127 120 / 28%); }
.main-nav a, .business-nav a, .business-nav span { color: #cbd5e1; }
.main-nav a:hover, .business-nav a:hover, .business-nav .selected { color: #fff; }
.business-nav .selected::after { background: #5fd1c5; }
.header-login { border-color: #5fd1c5; color: #fff; background: #287f78; }
.header-login:hover { border-color: #5fd1c5; background: #1d6863; }
.landing-account { display: flex; align-items: center; gap: 9px; margin-left: auto; white-space: nowrap; }
.landing-account-name { display: block; max-width: 190px; overflow: hidden; color: #fff; font-size: 13px; font-weight: 750; text-overflow: ellipsis; }
.landing-account-name:hover { color: #5fd1c5; }
.landing-account form { margin: 0; }
.landing-logout { min-height: 36px; padding: 0 13px; border: 1px solid #5fd1c5; border-radius: 8px; color: #fff; background: #287f78; font-size: 12px; font-weight: 700; }
.landing-logout:hover { background: #1d6863; }
.menu-toggle span { background: #e0e8ed; }
.header-account { color: #d8e0eb; }
.header-account a { color: #afc0c9; }
.header-account a:hover { color: #5fd1c5; }
.account-avatar { background: #287f78; }
.header-account form { margin: 0; }
.business-logout { padding: 5px 0; border: 0; color: #cbd5e1; background: transparent; font-size: 12px; font-weight: 700; }
.business-logout:hover { color: #5fd1c5; }

.hero-section { background: radial-gradient(circle at 89% 22%, #c9eae1 0, transparent 31%), linear-gradient(110deg, #f8fbfa 0%, #ecf7f3 55%, #dceee9 100%); }
.hero-section::before, .hero-section::after { border-color: rgb(40 127 120 / 12%); }
.eyebrow { border-color: #bfe5da; color: #1d6863; background: #fff9; }
.eyebrow-dot { background: #287f78; box-shadow: 0 0 0 4px #ddf3ea; }
.hero-copy h1 { color: #172033; }
.hero-description { color: #596b72; }
.hero-points { color: #314958; }
.hero-points i { background: #39a79d; }
.button-primary { box-shadow: 0 12px 24px rgb(40 127 120 / 23%); }
.button-primary:hover { box-shadow: 0 16px 28px rgb(40 127 120 / 29%); }
.button-outline { border-color: #a7d4c8; color: #1d6863; background: #fff9; }
.hero-footnote { color: #78908e; }
.visual-glow-one { background: linear-gradient(135deg, #c4e8dd 10%, #7fcbb9 100%); }
.visual-glow-two { background: #daf2e9; }
.dashboard-mock { border-color: #dbeae6; box-shadow: 0 35px 75px rgb(23 74 72 / 18%), 0 6px 17px rgb(23 74 72 / 8%); }
.mock-topbar { border-bottom-color: #e7eeeb; }
.mock-topbar-title, .mock-heading strong { color: #202637; }
.mock-content, .mock-sidebar { background: #fff; }
.mock-sidebar { border-right-color: #e8efec; }
.mock-sidebar span { background: #d5e2df; }
.mock-heading small { color: #287f78; }
.mock-progress span.current { color: #287f78; }
.mock-progress b { background: #cfe1db; }
.product-art { border-color: #deece7; background: radial-gradient(circle at 50% 44%, #f2f9f6, #dceee9 72%); }
.product-art-tag { border-color: #cfe7de; color: #1d6863; }
.mock-form { border-color: #e3ebe9; }
.mock-chips span { color: #286d67; background: #e8f6f0; }
.mini-badge { border-color: #dbece6; color: #31434c; box-shadow: 0 13px 28px rgb(23 74 72 / 14%); }
.mini-badge-icon.purple { color: #287f78; background: #ddf3ea; }
.visual-caption { color: #7c9892; }
.strip-inner > span:not(.strip-label) { color: #637a82; }

.capability-card { border-color: #e3e7ef; }
.icon-violet, .violet { color: #287f78; background: #ddf3ea; }
.icon-blue, .blue, .sky { color: #377eab; background: #ddeaf7; }
.icon-orange, .orange, .peach { color: #ae7533; background: #fff0c7; }
.icon-green, .teal { color: #287f78; background: #e3f3e9; }
.workflow-section, .business-page { background: #f7f8fc; }
.workflow-step { border-color: #e3e7ef; box-shadow: 0 5px 18px rgb(23 32 51 / 5%); }
.workflow-step > span { color: #1d6863; background: #ddf3ea; }
.application-panel { border-color: #d9e9e3; background: linear-gradient(145deg, #fff 0%, #f5fbf8 100%); box-shadow: 0 30px 75px rgb(23 74 72 / 12%); }
.panel-apps > div { border-color: #e0ebe6; }
.closing-section { background: radial-gradient(circle at 90% 20%, #368f86 0, transparent 28%), linear-gradient(115deg, #172033, #1d6863); }
.closing-inner .section-kicker { color: #bfe8d8; }
.closing-inner p { color: #d9ebe5; }
.button-light { color: #1d6863; }
.site-footer { background: #172033; }
.footer-brand > span, .footer-inner a { color: #5fd1c5; }

.business-hero { background: radial-gradient(circle at 79% 60%, #2d8e86 0, transparent 30%), linear-gradient(112deg, #172033, #1d6863); box-shadow: 0 16px 30px rgb(23 32 51 / 15%); }
.business-eyebrow { color: #bfe8d8; }
.business-hero p, .business-hero-meta { color: #e0f0eb; }
.orbit-center { color: #287f78; box-shadow: 0 12px 25px rgb(11 39 43 / 34%); }
.business-card { border-color: #e3e7ef; box-shadow: 0 9px 26px rgb(23 32 51 / 5%); }
.business-card-tags span { color: #60777a; background: #f1f6f4; }
.business-filter button:hover { background: #e7f2ed; }
.business-filter button.active { border-color: #cce7dc; background: #fff; }
.role-control select { border-color: #d8e2df; }
.business-note { border-color: #cfe8dd; color: #637d77; background: #eaf7f1; }
.demo-toast { border-color: #cfe8dd; color: #294e4c; box-shadow: 0 15px 42px rgb(23 74 72 / 20%); }
.business-breadcrumb a:hover { color: #287f78; }
.business-flashes { display: grid; gap: 8px; padding-top: 15px; }
.business-flash { margin: 0; padding: 11px 15px; border: 1px solid #cfe8dd; border-radius: 9px; color: #1d6863; background: #eaf7f1; font-size: 13px; }
.business-flash.flash-error { border-color: #f3c7c7; color: #a43535; background: #fff0ef; }
.business-flash.flash-warning { border-color: #eed89e; color: #8c6513; background: #fff8e6; }
.card-enter.is-disabled { color: #919ca5; cursor: default; }
.manual-section-head { margin-top: 46px; }
.manual-section-head h2 { margin: 9px 0 5px; font-size: 28px; letter-spacing: -.05em; }
.manual-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.manual-entry { display: flex; align-items: center; gap: 16px; min-height: 116px; padding: 22px; border: 1px solid #dce9e5; border-radius: 16px; color: #202637; background: #fff; box-shadow: 0 9px 26px rgb(23 32 51 / 5%); transition: transform .2s, box-shadow .2s; }
.manual-entry:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.manual-entry-icon { display: grid; width: 44px; height: 44px; flex: none; place-items: center; border-radius: 12px; color: #1d6863; background: #ddf3ea; font-size: 13px; font-weight: 800; }
.manual-entry strong, .manual-entry small { display: block; }
.manual-entry strong { font-size: 17px; }
.manual-entry small { margin-top: 5px; color: #697386; font-size: 12px; line-height: 1.6; }
.manual-entry-arrow { margin-left: auto; color: #287f78; font-size: 22px; }

@media (max-width: 900px) {
  .business-header .business-nav { position: absolute; top: 78px; right: 0; left: 0; z-index: 11; display: none; height: auto; padding: 9px 16px 15px; border-bottom: 1px solid #27394c; background: #172033; box-shadow: 0 15px 30px rgb(23 32 51 / 20%); }
  .business-header .business-nav.open { display: grid; gap: 0; }
  .business-header .business-nav a { height: auto; padding: 11px 12px; }
  .business-header .menu-toggle { display: flex; flex-direction: column; gap: 4px; order: 3; padding: 6px; border: 0; background: transparent; }
  .business-header .menu-toggle span { display: block; width: 21px; height: 2px; border-radius: 2px; background: #e0e8ed; }
  .business-header .header-account { margin-left: auto; }
  .business-header .account-name { display: none; }
}

@media (max-width: 760px) {
  .main-nav { border-bottom-color: #27394c; background: #172033; box-shadow: 0 15px 30px rgb(23 32 51 / 20%); }
  .main-nav a { color: #e2e8ee; }
  .business-nav { position: absolute; top: 64px; right: 0; left: 0; z-index: 11; display: none; height: auto; padding: 9px 16px 15px; border-bottom: 1px solid #27394c; background: #172033; box-shadow: 0 15px 30px rgb(23 32 51 / 20%); }
  .business-nav.open { display: grid; gap: 0; }
  .business-nav a { height: auto; padding: 11px 12px; }
  .business-nav .selected::after { right: auto; bottom: 6px; left: 12px; width: 39px; height: 2px; }
  .business-header .menu-toggle { display: flex; }
  .manual-entry-grid { grid-template-columns: 1fr; }
  .landing-account { order: 2; gap: 7px; }
  .landing-account-name { max-width: 95px; font-size: 12px; }
  .landing-logout { min-height: 35px; padding: 0 10px; }
}

@media (max-width: 400px) {
  .landing-page .brand { gap: 7px; font-size: 15px; }
  .landing-page .brand-mark { width: 28px; height: 28px; }
  .landing-account-name { max-width: 63px; }
}