:root {
  color-scheme: light;
  --bg: #eef2f6;
  --ink: #152033;
  --muted: #667085;
  --panel: #ffffff;
  --line: #d7dee8;
  --soft: #f7f9fc;
  --brand: #d92d20;
  --brand-dark: #a32018;
  --accent: #14b88a;
  --accent-dark: #0d8a68;
  --ok: #067647;
  --warn: #b54708;
  --nav: #111827;
  --button-shadow: 0 10px 24px rgba(15, 23, 42, .08);
  --button-shadow-strong: 0 16px 36px rgba(217, 45, 32, .18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.authOverlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(6px);
}
.authOverlay.hidden { display: none; }
.authOverlay.marketingAuth {
  display: block;
  overflow: auto;
  padding: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .08), transparent 30%),
    linear-gradient(180deg, #101112 0%, #0d0e10 42%, #101112 100%);
  color: #f8fafc;
  backdrop-filter: none;
}
.authCard {
  width: min(460px, 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .24);
}
.authCard label {
  display: block;
  margin-top: 12px;
  color: #344054;
  font-size: 13px;
  font-weight: 760;
}
.authCard input {
  width: 100%;
  margin-top: 6px;
}
.authActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.factoryAuthPage {
  min-height: 100vh;
  color: #f8fafc;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .08), transparent 30%),
    linear-gradient(180deg, #101112 0%, #0d0e10 100%);
}
.factoryAuthNav {
  width: min(1190px, calc(100% - 40px));
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}
.factoryBackButton {
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, .06);
  color: #f8fafc;
}
.factoryAuthShell {
  width: min(1040px, calc(100% - 40px));
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, .7fr);
  gap: 34px;
  align-items: center;
  margin: 0 auto;
  padding: 96px 0 76px;
}
.factoryAuthCopy h2 {
  max-width: 640px;
  margin: 18px 0;
  color: #fff;
  font-size: 58px;
  line-height: 1.08;
  letter-spacing: 0;
}
.factoryAuthCopy p:not(.landingEyebrow) {
  max-width: 590px;
  color: #9ca3af;
  font-size: 18px;
  line-height: 1.85;
}
.factoryAuthPoints {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.factoryAuthPoints span {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  padding: 9px 13px;
  background: rgba(255, 255, 255, .045);
  color: #d1d5db;
  font-size: 13px;
  font-weight: 800;
}
.factoryAuthCard {
  width: 100%;
  border-color: rgba(255, 255, 255, .11);
  border-radius: 24px;
  background: rgba(255, 255, 255, .045);
  box-shadow: 0 42px 120px rgba(0, 0, 0, .35);
}
.factoryAuthCard label {
  color: #e5e7eb;
}
.factoryAuthCard input {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .07);
  color: #f8fafc;
}
.factoryAuthCard input::placeholder {
  color: #8f98a8;
}
.factoryAuthActions {
  justify-content: stretch;
}
.factoryAuthActions button {
  flex: 1;
}
.factoryAuthCard button.primary {
  background: #fff;
  border-color: #fff;
  color: #101112;
}
.factoryAuthCard button:not(.primary):not(.linkButton) {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #f8fafc;
}
.authModeSwitch {
  margin: 16px 0 0;
  color: #9ca3af;
  text-align: center;
}
.linkButton {
  min-height: auto;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.factoryAuthPage[data-auth-mode="signup"] .loginOnly,
.factoryAuthPage[data-auth-mode="login"] .signupOnly {
  display: none;
}
.factoryAuthPage[data-auth-mode="login"] #authTenantField {
  display: none;
}
.factoryAuthPage[data-auth-mode="login"] #authRegister {
  display: none;
}
.factoryAuthPage[data-auth-mode="signup"] #authLogin {
  display: none;
}
.landingShell {
  width: min(1190px, calc(100% - 40px));
  margin: 0 auto;
  padding: 18px 0 42px;
}
.landingNav {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  background: rgba(16, 17, 18, .78);
  backdrop-filter: blur(18px);
}
.landingBrand,
.landingLinks,
.landingActions,
.landingProof,
.landingAuthSection {
  display: flex;
  align-items: center;
}
.landingBrand {
  gap: 12px;
}
.landingNavActions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.landingBrand strong,
.landingBrand small {
  display: block;
}
.landingBrand small,
.landingLead,
.landingBand p,
.landingAuthSection p,
.landingProof small {
  color: #9ca3af;
}
.landingMark {
  width: 36px;
  height: 36px;
  display: block;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .34), 0 0 22px rgba(44, 255, 187, .12);
}
.landingLinks {
  gap: 32px;
}
.landingLinks a,
.landingLoginText,
.landingLoginLink,
.landingActions a {
  color: #d1d5db;
  text-decoration: none;
  font-weight: 760;
}
.landingLinks a:hover,
.landingLoginText:hover,
.landingLoginLink:hover {
  color: #fff;
}
.landingLoginLink {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 11px 20px;
  background: #fff;
  color: #101112 !important;
  box-shadow: 0 12px 36px rgba(255, 255, 255, .12);
}
.landingHero {
  min-height: auto;
  display: block;
  padding: 102px 0 44px;
  text-align: center;
}
.landingEyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 14px;
  border: 1px solid rgba(248, 250, 252, .12);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, .06);
  color: #d1d5db;
  font-size: 12px;
  font-weight: 850;
}
.landingHero h1 {
  max-width: 900px;
  margin: 18px auto 18px;
  color: #fff;
  font-size: 70px;
  line-height: 1.06;
  letter-spacing: 0;
}
.landingLead {
  max-width: 780px;
  margin: 0 auto;
  font-size: 19px;
  line-height: 1.85;
}
.landingHeroHighlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 26px auto 0;
}
.landingHeroHighlights span {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  padding: 9px 13px;
  background: rgba(255, 255, 255, .045);
  color: #d1d5db;
  font-size: 13px;
  font-weight: 800;
}
.landingActions {
  justify-content: center;
  gap: 12px;
  margin: 30px 0 12px;
}
.landingPrimary,
.landingSecondary {
  border-radius: 999px;
  padding: 15px 24px;
}
.landingPrimary {
  background: #fff;
  color: #0b1018 !important;
  box-shadow: 0 18px 45px rgba(255, 255, 255, .12);
}
.landingSecondary {
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
}
.landingAssurance {
  margin: 0;
  color: #858b94;
  font-size: 13px;
}
.landingProof {
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 84px auto 0;
}
.landingProof span {
  min-width: 190px;
  border: 0;
  border-radius: 0;
  padding: 0 22px;
  background: transparent;
}
.landingProof strong,
.landingProof small {
  display: block;
}
.landingProof strong {
  color: #fff;
  font-size: 28px;
}
.landingProof span + span {
  border-left: 1px solid rgba(255, 255, 255, .1);
}
.landingHeroStage {
  width: min(100%, 1160px);
  margin: 72px auto 0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 28px;
  padding: 10px;
  background: rgba(255, 255, 255, .035);
  box-shadow: 0 50px 130px rgba(0, 0, 0, .42);
}
.landingHeroStage img {
  display: block;
  width: 100%;
  border-radius: 21px;
  background: #050506;
}
.landingAutomationGrid {
  display: grid;
  gap: 16px;
}
.automationCard {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(340px, .8fr);
  gap: 18px;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  padding: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)),
    rgba(5, 8, 13, .48);
}
.automationCard + .automationCard {
  margin-top: 14px;
}
.automationCopy span {
  color: #fca5a5;
  font-weight: 900;
}
.automationCopy h3 {
  margin: 10px 0;
  color: #fff;
  font-size: 28px;
  line-height: 1.2;
}
.automationCopy p {
  max-width: 690px;
  line-height: 1.75;
}
.automationCopy ul {
  margin: 16px 0 0;
  padding-left: 18px;
  color: #cbd5e1;
  line-height: 1.85;
}
.automationPreview {
  min-height: 270px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: 16px;
  background: rgba(8, 13, 23, .84);
}
.previewToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 14px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, .07);
}
.previewToolbar strong {
  color: #fff;
}
.previewToolbar span {
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(34, 197, 94, .16);
  color: #86efac;
  font-size: 12px;
  font-weight: 850;
}
.imageSlotGrid,
.publishPacket {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.imageSlotGrid div,
.publishPacket div {
  min-height: 70px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, .055);
}
.imageSlotGrid b,
.imageSlotGrid span,
.publishPacket small,
.publishPacket strong {
  display: block;
}
.imageSlotGrid b,
.publishPacket strong {
  color: #fff;
}
.imageSlotGrid span,
.publishPacket small {
  margin-top: 6px;
  color: #a7b0bf;
}
.imageStrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.imageStrip img {
  width: 100%;
  min-height: 74px;
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: 14px;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
}
.publishFlowLine {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.publishFlowLine span {
  min-height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #a7b0bf;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}
.publishFlowLine .ready {
  background: rgba(6, 118, 71, .22);
  color: #86efac;
}
.publishNotice {
  margin-top: 12px;
  border: 1px solid rgba(252, 165, 165, .18);
  border-radius: 14px;
  padding: 12px;
  background: rgba(217, 45, 32, .12);
  color: #fecaca;
  line-height: 1.55;
}
.landingProductVisual {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 28px;
  padding: 20px;
  background:
    linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.04)),
    #111827;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .45);
}
.visualTop,
.visualUpload,
.visualSteps,
.visualCards,
.visualCheck {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(5, 8, 13, .62);
}
.visualTop {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
}
.visualTop span,
.visualUpload small,
.visualCards small,
.visualCheck p {
  color: #9ca3af;
}
.visualUpload {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
  padding: 14px;
}
.visualImage {
  aspect-ratio: 1;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, .92), rgba(226, 232, 240, .62)),
    linear-gradient(45deg, #fee2e2, #bae6fd);
  position: relative;
  overflow: hidden;
}
.visualImage::after {
  content: "";
  position: absolute;
  inset: 18px 12px 16px;
  border-radius: 50% 50% 20% 20%;
  background: linear-gradient(160deg, #d92d20, #f97316);
  opacity: .9;
}
.visualSteps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
  padding: 10px;
}
.visualSteps span {
  border-radius: 999px;
  padding: 8px 9px;
  background: rgba(255,255,255,.06);
  color: #aeb8c8;
  text-align: center;
  font-size: 12px;
  font-weight: 760;
}
.visualSteps .done {
  background: rgba(6, 118, 71, .22);
  color: #86efac;
}
.visualSteps .active {
  background: rgba(217, 45, 32, .24);
  color: #fecaca;
}
.visualCards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
  padding: 10px;
}
.visualCards div {
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,.06);
}
.visualCards small,
.visualCards strong {
  display: block;
}
.visualCards strong {
  margin-top: 4px;
  color: #fff;
  font-size: 20px;
}
.visualCheck {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 14px;
}
.visualCheck span {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  margin-top: 4px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, .12);
}
.visualCheck p {
  margin: 0;
}
.landingBand {
  margin-top: 28px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  padding: 28px;
  background: rgba(255, 255, 255, .045);
}
.landingSectionHead {
  max-width: 760px;
  margin-bottom: 20px;
}
.landingSectionHead h2,
.landingAuthSection h2 {
  color: #fff;
  font-size: 34px;
  line-height: 1.18;
}
.landingSteps,
.landingFeatureGrid,
.landingAudience,
.landingUseCases,
.landingPlanGrid,
.landingHelpGrid {
  display: grid;
  gap: 14px;
}
.landingSteps {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.landingFeatureGrid {
  grid-template-columns: repeat(3, 1fr);
}
.landingSteps article,
.landingFeatureGrid article,
.landingAudience article,
.landingUseCases article,
.landingPlan,
.landingHelpGrid article {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: 18px;
  background: rgba(5, 8, 13, .48);
}
.landingSteps span,
.landingUseCases span,
.landingPlan span,
.landingHelpGrid span {
  color: #fca5a5;
  font-weight: 900;
}
.landingSteps h3,
.landingFeatureGrid h3,
.landingAudience strong,
.landingUseCases h3,
.landingPlan h3,
.landingHelpGrid h3 {
  margin: 8px 0;
  color: #fff;
  font-size: 18px;
}
.landingUseCases {
  grid-template-columns: repeat(3, 1fr);
}
.landingUseCases h3 {
  line-height: 1.35;
}
.landingPlanGrid {
  grid-template-columns: repeat(3, 1fr);
}
.landingPlan {
  min-height: 286px;
  display: flex;
  flex-direction: column;
}
.landingPlan.featuredPlan {
  border-color: rgba(252, 165, 165, .46);
  background:
    linear-gradient(150deg, rgba(217, 45, 32, .22), rgba(5, 8, 13, .58)),
    rgba(5, 8, 13, .48);
}
.planPrice {
  margin: 6px 0 14px;
  color: #fff !important;
  font-size: 26px;
  font-weight: 900;
}
.landingPlan ul {
  margin: auto 0 0;
  padding-left: 18px;
  color: #cbd5e1;
  line-height: 1.85;
}
.landingTip {
  margin: 16px 0 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .05);
}
.landingHelpGrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.landingHelpGrid article {
  display: flex;
  min-height: 266px;
  flex-direction: column;
}
.landingHelpGrid small {
  display: block;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 12px;
  color: #a7b0bf;
  line-height: 1.65;
}
.landingCompareTable {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
}
.landingCompareTable div {
  display: grid;
  grid-template-columns: .75fr 1fr 1fr;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.landingCompareTable div:first-child {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
.landingCompareTable div:last-child {
  border-bottom: 0;
}
.landingCompareTable span {
  color: #cbd5e1;
}
.landingAudience {
  grid-template-columns: repeat(3, 1fr);
}
.landingAudience article span {
  display: block;
  color: #9ca3af;
}
.landingFaq details {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  padding: 16px 18px;
  background: rgba(5, 8, 13, .48);
}
.landingFaq details + details {
  margin-top: 10px;
}
.landingFaq summary {
  cursor: pointer;
  color: #fff;
  font-weight: 820;
}
.landingFaq p {
  margin: 10px 0 0;
}
.landingAuthSection {
  justify-content: space-between;
  gap: 28px;
  margin-top: 30px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  padding: 28px;
  background: #f8fafc;
  color: #101828;
}
.landingAuthSection .landingEyebrow {
  border-color: #fee2e2;
  background: #fff1f2;
  color: #d92d20;
}
.landingAuthSection h2 {
  color: #101828;
}
.landingAuthSection p {
  max-width: 520px;
  color: #667085;
}
.landingAuthSection .authCard {
  flex: 0 0 min(460px, 100%);
  box-shadow: none;
}
.landingFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 4px 4px;
  color: #9ca3af;
}
.landingFooter strong,
.landingFooter span {
  display: block;
}
.landingFooter strong {
  color: #fff;
}
.landingFooter div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px;
}
.landingFooter a {
  color: #cbd5e1;
  text-decoration: none;
  font-weight: 760;
}
.landingFooter a:hover {
  color: #fff;
}
.accountBadge {
  min-width: 168px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  padding: 9px 12px;
  text-align: left;
  box-shadow: var(--button-shadow);
}
.accountBadge strong,
.accountBadge small {
  display: block;
  white-space: nowrap;
}
.accountBadge small {
  max-width: 210px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  font-size: 12px;
}
.notificationButton {
  position: relative;
}
.notificationButton.hasUnread {
  border-color: #fdb022;
  background:
    linear-gradient(180deg, #fffaf0 0%, #fffaeb 100%);
  color: var(--warn);
}
.notificationBadge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
}
.hidden { display: none !important; }

.rail {
  width: 238px;
  flex: 0 0 238px;
  min-height: 100vh;
  padding: 18px 14px;
  background: var(--nav);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 8px 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: block;
  object-fit: contain;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

.brand small { display: block; margin-top: 3px; color: #aeb8c8; }

.rail button {
  width: 100%;
  border: 0;
  background: transparent;
  color: #d7dce6;
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 720;
  justify-content: flex-start;
  white-space: nowrap;
}

.rail button:hover,
.rail button.active {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.05)),
    #253044;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

main {
  flex: 1;
  min-width: 0;
  padding: 24px;
  overflow: auto;
}

.hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
h1 {
  margin-bottom: 8px;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: 0;
}
h2 { margin-bottom: 8px; font-size: 18px; letter-spacing: 0; }
p { margin-bottom: 12px; }
.muted { color: var(--muted); font-size: 14px; }

.heroActions, .rowActions, .panelHead {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.heroActions { justify-content: flex-end; }
.accountActions {
  align-items: flex-start;
}
.panelHead { justify-content: space-between; margin-bottom: 14px; }
.panelHead.compact { margin-bottom: 8px; }

button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #cfd8e5;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 760;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: var(--button-shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
button:hover {
  border-color: #a9b7ca;
  background:
    linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .11);
  transform: translateY(-1px);
}
button:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
}
button:disabled { opacity: .58; cursor: wait; }
button.primary {
  color: #fff;
  background:
    linear-gradient(135deg, #ef3f35 0%, #d92d20 48%, #a32018 100%);
  border-color: var(--brand);
  box-shadow: var(--button-shadow-strong);
}
button.primary:hover {
  border-color: var(--brand-dark);
  background:
    linear-gradient(135deg, #f1584e 0%, #d92d20 46%, #8f1d16 100%);
  box-shadow: 0 18px 42px rgba(217, 45, 32, .24);
}
button.dangerButton {
  color: var(--brand);
  border-color: #fda29b;
  background:
    linear-gradient(180deg, #fff7f6 0%, #fff1f0 100%);
  box-shadow: 0 10px 22px rgba(217, 45, 32, .08);
}
button.dangerButton:hover {
  color: #fff;
  background:
    linear-gradient(135deg, #ef3f35 0%, #d92d20 48%, #a32018 100%);
  border-color: var(--brand);
}
button.wide { width: 100%; margin-top: 12px; }
.miniInlineButton {
  width: auto;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #175cd3;
  border-color: #b2ddff;
  background: linear-gradient(180deg, #f5fbff 0%, #eff8ff 100%);
  font-size: 12px;
  white-space: nowrap;
  box-shadow: none;
}
.iconButton {
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 22px;
  border-radius: 999px;
}
button:focus-visible {
  outline: 3px solid rgba(20, 184, 138, .24);
  outline-offset: 2px;
}

.commandDock {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
  border: 1px solid #d8e0eb;
  border-radius: 20px;
  padding: 14px 16px;
  background:
    radial-gradient(circle at 3% 0%, rgba(20, 184, 138, .12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,250,252,.92) 100%);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}
.commandDockCopy span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 6px;
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(20, 184, 138, .1);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
}
.commandDockCopy strong {
  display: block;
  color: #101828;
  font-size: 17px;
  line-height: 1.35;
}
.commandDockCopy p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.commandDockActions,
.queueDock {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.storeConnectButton {
  border-color: rgba(20, 184, 138, .28);
  background:
    linear-gradient(180deg, #f5fffb 0%, #ecfdf7 100%);
  color: #08745a;
}
.storeConnectButton:hover {
  border-color: rgba(20, 184, 138, .46);
  background:
    linear-gradient(180deg, #ffffff 0%, #e7fbf4 100%);
}
.queueMore {
  position: relative;
}
.queueMore summary {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cfd8e5;
  border-radius: 14px;
  padding: 10px 16px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  font-weight: 760;
  list-style: none;
  box-shadow: var(--button-shadow);
  user-select: none;
}
.queueMore summary::-webkit-details-marker {
  display: none;
}
.queueMore summary::after {
  content: "⌄";
  color: var(--muted);
  font-size: 14px;
}
.queueMore[open] summary {
  border-color: #a9b7ca;
  background: #fff;
}
.queueMore[open] summary::after {
  transform: rotate(180deg);
}
.queueMoreMenu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 6;
  display: grid;
  gap: 8px;
  min-width: 154px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 26px 70px rgba(15, 23, 42, .18);
  backdrop-filter: blur(16px);
}
.queueMoreMenu button {
  width: 100%;
  justify-content: flex-start;
  box-shadow: none;
}

.statusBar {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--ok);
  border-radius: 10px;
  background: #fff;
  padding: 11px 14px;
  color: #344054;
  font-size: 14px;
}
.statusBar.working { border-left-color: var(--warn); }
.statusBar.error { border-left-color: var(--brand); color: var(--brand); }

.inlineNotice {
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid #fda29b;
  border-radius: 10px;
  background: #fff1f0;
  color: var(--brand);
  font-size: 14px;
}
.inlineNotice.ok {
  border-color: #75e0a7;
  background: #ecfdf3;
  color: var(--ok);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.metrics div {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.metrics span { display: block; font-size: 26px; font-weight: 850; }
.metrics small { color: var(--muted); }

.commercialGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.commercialCard {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px;
  background: #fff;
}
.commercialCard strong {
  display: block;
  margin-bottom: 7px;
  font-size: 15px;
}
.commercialCard span {
  display: inline-block;
  margin-bottom: 8px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 800;
  background: #eef4ff;
  color: #175cd3;
}
.commercialCard span.ready { background: #ecfdf3; color: var(--ok); }
.commercialCard span.blocked,
.commercialCard span.error { background: #fff1f0; color: var(--brand); }
.commercialCard span.manual,
.commercialCard span.stub,
.commercialCard span.warning { background: #fffaeb; color: #b54708; }
.commercialCard p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.commercialCard small {
  display: block;
  margin-top: 8px;
  color: #475467;
  font-size: 12px;
  line-height: 1.45;
}
.opsCard {
  display: grid;
  grid-template-rows: auto auto minmax(42px, auto) minmax(36px, auto) auto;
}
.opsCard button {
  margin-top: 10px;
  min-height: 36px;
  border-radius: 8px;
}
.commercialIssues {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.tenantAdminList {
  display: grid;
  gap: 10px;
}
.billingHeroGrid {
  display: grid;
  grid-template-columns: 1.25fr repeat(3, minmax(160px, 1fr));
  gap: 12px;
}
.billingHeroGrid .commercialCard:first-child {
  background: #101828;
  color: #fff;
}
.billingHeroGrid .commercialCard:first-child span,
.billingHeroGrid .commercialCard:first-child p {
  color: #fff;
}
.billingHeroGrid .commercialCard:first-child p {
  opacity: .78;
}
.billingReminderPanel {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.billingReminder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}
.billingReminder strong {
  display: block;
  margin-bottom: 4px;
}
.billingReminder p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.billingReminder.error {
  border-color: #fda29b;
  background: #fff1f0;
}
.billingReminder.error strong {
  color: var(--brand);
}
.billingReminder.warning {
  border-color: #fedf89;
  background: #fffaeb;
}
.billingReminder.warning strong {
  color: var(--warn);
}
.billingReminder.info {
  border-color: #b2ddff;
  background: #eff8ff;
}
.billingReminder.pass {
  border-color: #75e0a7;
  background: #ecfdf3;
}
.billingSection {
  margin-top: 16px;
}
.billingPlanGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.billingPlan,
.billingOrder {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 13px;
}
.billingPlan {
  display: grid;
  gap: 8px;
}
.billingPlan > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.billingPlan strong,
.billingOrder strong {
  font-size: 15px;
}
.billingPlan span,
.billingOrder span {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  background: #eef4ff;
  color: #175cd3;
  font-size: 12px;
  font-weight: 850;
}
.billingPlan b,
.billingOrder b {
  color: #101828;
  font-size: 22px;
}
.planPriceRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.planPriceRow del {
  color: var(--muted);
  font-size: 13px;
}
.planPriceRow em {
  border-radius: 999px;
  padding: 3px 8px;
  background: #fffaeb;
  color: var(--warn);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}
.planBenefits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.planBenefits span {
  border-radius: 999px;
  padding: 4px 8px;
  background: #f2f4f7;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}
.billingPlan p,
.billingOrder p,
.billingPlan small,
.billingOrder small {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.billingOrderList {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.billingOrder {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto minmax(120px, auto) auto;
  gap: 10px;
  align-items: center;
}
.billingOrder.paid span {
  background: #ecfdf3;
  color: var(--ok);
}
.billingOrder.canceled span {
  background: #f2f4f7;
  color: #667085;
}
.billingLedger,
.billingAdminTools {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--soft);
}
.billingLedger summary,
.billingAdminTools summary {
  cursor: pointer;
  font-weight: 850;
  color: #344054;
}
.billingAdminTools {
  background: #fff;
}
.tenantRow {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 110px 110px 170px 120px 120px auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
}
.tenantRow input,
.tenantRow select {
  min-width: 0;
}
.commercialIssue {
  border: 1px solid #fedf89;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fffaeb;
  color: #93370d;
  font-size: 14px;
}
.commercialIssue.error {
  border-color: #fda29b;
  background: #fff1f0;
  color: var(--brand);
}
.commercialIssue.blocked {
  border-color: #fda29b;
  background: #fff1f0;
  color: var(--brand);
}
.commercialIssue.warning {
  border-color: #fedf89;
  background: #fffaeb;
  color: #93370d;
}
.commercialIssue.pass {
  border-color: #75e0a7;
  background: #ecfdf3;
  color: var(--ok);
}
.commercialIssue.neutral {
  border-color: var(--line);
  background: var(--soft);
  color: #344054;
  word-break: break-all;
}
.qualitySummary {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}
.qualitySummary.pass { border-color: #75e0a7; background: #ecfdf3; color: var(--ok); }
.qualitySummary.warning { border-color: #fedf89; background: #fffaeb; color: var(--warn); }
.qualitySummary.blocked { border-color: #fda29b; background: #fff1f0; color: var(--brand); }
.qualityGrid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.qualityItem {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}
.qualityItem span {
  display: inline-block;
  margin: 5px 0;
  border-radius: 999px;
  padding: 2px 7px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.qualityItem.pass span { background: #ecfdf3; color: var(--ok); }
.qualityItem.warning span { background: #fffaeb; color: var(--warn); }
.qualityItem.blocked span { background: #fff1f0; color: var(--brand); }
.qualityItem p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.tab { display: none; }
.tab.active { display: block; }

.panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.settingsHubPanel {
  display: grid;
  gap: 16px;
}
.settingsLaunchGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.settingsLaunchCard {
  display: grid;
  min-height: 138px;
  align-content: start;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--button-shadow);
  white-space: normal;
}
.settingsLaunchCard:hover {
  border-color: #a9b7ca;
  background:
    linear-gradient(180deg, #fff 0%, #f4f7fb 100%);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .12);
}
.settingsLaunchCard span {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  background: #eff8ff;
  color: #175cd3;
  font-size: 12px;
  font-weight: 850;
}
.settingsLaunchCard strong {
  font-size: 17px;
  line-height: 1.3;
}
.settingsLaunchCard small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.settingsDetailCard {
  width: min(1320px, calc(100vw - 48px));
}
.settingsDetailModalBody,
.settingsDetailContent {
  display: grid;
  gap: 14px;
}
.modalTopActions {
  justify-content: flex-end;
}

.flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.flowStep {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.flowStep span {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf2f7;
  font-weight: 850;
}
.flowStep.done span { color: #fff; background: var(--ok); }
.flowStep.active {
  border-color: #fda29b;
  background: #fff7f6;
}
.flowStep.active span { color: #fff; background: var(--brand); }
.flowStep small { color: var(--muted); }

.simpleFlow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.simpleFlowStep {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  align-items: center;
  min-height: 88px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}
.simpleFlowStep span {
  grid-row: span 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf2f7;
  font-weight: 900;
}
.simpleFlowStep.active {
  border-color: #fda29b;
  background: #fff7f6;
}
.simpleFlowStep.active span {
  color: #fff;
  background: var(--brand);
}
.simpleFlowStep strong {
  font-size: 17px;
  line-height: 1.25;
}
.simpleFlowStep small {
  color: var(--muted);
  line-height: 1.45;
}

.listingWorkbench {
  margin-bottom: 16px;
}
.bigActionButton {
  min-height: 46px;
  padding: 11px 18px;
  border-radius: 16px;
}
.routeCards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.routeCard {
  min-height: 148px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  text-align: left;
  white-space: normal;
  background:
    linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  box-shadow: var(--button-shadow);
}
.routeCard.recommended {
  border-color: #fda29b;
  background:
    linear-gradient(145deg, #fff8f6 0%, #fff 72%);
  box-shadow: 0 16px 36px rgba(217, 45, 32, .10);
}
.routeCard:hover,
.workflowPublishChoices button:hover {
  border-color: #a9b7ca;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .12);
}
.routeCard.recommended:hover {
  border-color: #f97066;
  box-shadow: 0 18px 40px rgba(217, 45, 32, .16);
}
.routeCard span {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  background: #eef4ff;
  color: #175cd3;
  font-size: 12px;
  font-weight: 850;
}
.routeCard.recommended span {
  background: #fee4e2;
  color: var(--brand);
}
.routeCard strong {
  font-size: 18px;
  line-height: 1.25;
}
.routeCard small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.quickActionStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  align-items: center;
}
.quickActionStrip span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}
.quickActionStrip button {
  min-height: 38px;
  border-radius: 8px;
}

.hardPartPanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
  border-color: #fedf89;
  background: #fffcf5;
}
.hardPartPanel span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 7px;
  border-radius: 999px;
  padding: 3px 8px;
  background: #fffaeb;
  color: #b54708;
  font-size: 12px;
  font-weight: 900;
}
.hardPartPanel strong {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
  line-height: 1.3;
}
.hardPartPanel p {
  margin: 0;
  color: #475467;
  line-height: 1.55;
}

.listingReadinessPanel {
  margin-top: 16px;
}
.listingReadinessSummary {
  margin-bottom: 12px;
}
.readinessOverview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.readinessOverview.pass { border-color: #abefc6; background: #f6fef9; }
.readinessOverview.warning { border-color: #fedf89; background: #fffcf5; }
.readinessOverview.blocked { border-color: #fecdca; background: #fffbfa; }
.readinessOverview span,
.readinessCard span {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  background: #eef4ff;
  color: #175cd3;
  font-size: 12px;
  font-weight: 850;
}
.readinessOverview.pass span,
.readinessCard.pass span { background: #ecfdf3; color: var(--ok); }
.readinessOverview.warning span,
.readinessCard.warning span { background: #fffaeb; color: #b54708; }
.readinessOverview.blocked span,
.readinessCard.blocked span { background: #fff1f0; color: var(--brand); }
.readinessOverview strong {
  display: block;
  margin-top: 5px;
  font-size: 26px;
  line-height: 1;
}
.readinessOverview p,
.readinessCard p {
  margin: 7px 0 0;
  color: #475467;
  font-size: 13px;
  line-height: 1.45;
}
.listingReadinessGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.readinessCard {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 156px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.readinessCard.pass { border-color: #dcfae6; }
.readinessCard.warning { border-color: #fedf89; }
.readinessCard.blocked { border-color: #fecdca; }
.readinessCard strong {
  font-size: 15px;
  line-height: 1.3;
}
.readinessCard button {
  width: fit-content;
  min-height: 32px;
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
}
.readinessCard.stage {
  min-height: 132px;
}
.readinessCard.stage .metaLine {
  font-size: 12px;
}

body {
  background: #0b0d10;
}

.rail {
  background:
    linear-gradient(180deg, #15171c 0%, #0b0d11 100%);
  border-right: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset -1px 0 0 rgba(44, 255, 187, .04);
}
.brand {
  border-bottom-color: rgba(255, 255, 255, .08);
}
.brand strong {
  color: #f8fafc;
}
.brand small {
  color: #7f8a99;
}
.mark {
  box-shadow: 0 18px 42px rgba(0, 0, 0, .38), 0 0 22px rgba(44, 255, 187, .14);
}
.rail button {
  color: #9da8b8;
}
.rail button:hover,
.rail button.active {
  background:
    linear-gradient(135deg, rgba(44, 255, 187, .12), rgba(255, 255, 255, .055));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(44, 255, 187, .08), 0 10px 28px rgba(0, 0, 0, .18);
}

main {
  position: relative;
  color: #edf2f7;
  background:
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(180deg, #11151a 0%, #0b0d10 54%, #0f1115 100%);
  background-size: 44px 44px, 44px 44px, auto;
}
main > * {
  position: relative;
  z-index: 1;
}
main::before {
  content: "";
  position: fixed;
  inset: 0 0 0 238px;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(44, 255, 187, .07), transparent 28%),
    linear-gradient(250deg, rgba(217, 45, 32, .08), transparent 32%);
  opacity: .8;
}
main h1,
main h2 {
  color: #f8fafc;
}
main .muted,
main p,
main small {
  color: #91a0b2;
}
main .eyebrow {
  color: #2cffbb;
}

main .accountBadge,
main button,
main .queueMore summary {
  border-color: rgba(255, 255, 255, .12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
  color: #edf2f7;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
}
main button:hover,
main .queueMore summary:hover {
  border-color: rgba(44, 255, 187, .26);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  box-shadow: 0 18px 46px rgba(0, 0, 0, .28), 0 0 0 1px rgba(44, 255, 187, .04);
}
main button.primary {
  background:
    linear-gradient(135deg, #ff4b42 0%, #d92d20 54%, #841a14 100%);
  border-color: rgba(255, 117, 107, .58);
  box-shadow: 0 22px 54px rgba(217, 45, 32, .27);
}
main .storeConnectButton {
  border-color: rgba(44, 255, 187, .28);
  background:
    linear-gradient(135deg, rgba(44,255,187,.16), rgba(255,255,255,.055));
  color: #bfffe8;
}
main button.dangerButton {
  color: #fecaca;
  border-color: rgba(248, 113, 113, .34);
  background:
    linear-gradient(180deg, rgba(127, 29, 29, .34), rgba(127, 29, 29, .16));
}
main .miniInlineButton {
  border-color: rgba(96, 165, 250, .22);
  background: rgba(37, 99, 235, .12);
  color: #bfdbfe;
  box-shadow: none;
}
.accountBadge {
  min-width: 170px;
}
.accountBadge strong {
  color: #f8fafc;
}
.accountBadge small {
  color: #93a1b4;
}
.notificationButton.hasUnread {
  border-color: rgba(251, 191, 36, .4);
  background: rgba(251, 191, 36, .12);
  color: #fde68a;
}

.commandDock,
.statusBar,
.metrics div,
.panel,
.simpleFlowStep,
.routeCard,
.hardPartPanel,
.readinessOverview,
.readinessCard,
.commercialCard,
.billingReminder,
.billingPlan,
.billingOrder,
.billingLedger,
.billingAdminTools,
.qualityItem,
.flowStep,
.settingsLaunchCard {
  border-color: rgba(255, 255, 255, .1);
  background:
    linear-gradient(180deg, rgba(255,255,255,.078), rgba(255,255,255,.036));
  color: #edf2f7;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
  backdrop-filter: blur(16px);
}
.commandDock {
  border-radius: 22px;
  background:
    linear-gradient(120deg, rgba(44,255,187,.13), rgba(255,255,255,.05) 42%, rgba(217,45,32,.09));
}
.commandDockCopy span,
.routeCard span,
.readinessOverview span,
.readinessCard span,
.commercialCard span {
  background: rgba(44, 255, 187, .12);
  color: #9fffe0;
}
.commandDockCopy strong {
  color: #fff;
}
.commandDockCopy p {
  color: #91a0b2;
}
.queueMoreMenu {
  border-color: rgba(255,255,255,.1);
  background: rgba(18, 22, 28, .96);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42);
}
.statusBar {
  border-left-color: #2cffbb;
  color: #cbd5e1;
}
.statusBar.working {
  border-left-color: #f59e0b;
}
.statusBar.error {
  border-left-color: #ff5a52;
  color: #fecaca;
}
.metrics div {
  min-height: 82px;
}
.metrics span {
  color: #fff;
  text-shadow: 0 0 22px rgba(44, 255, 187, .10);
}
.metrics small {
  color: #8794a6;
}
.simpleFlowStep.active,
.routeCard.recommended {
  border-color: rgba(255, 90, 82, .32);
  background:
    linear-gradient(145deg, rgba(217,45,32,.18), rgba(255,255,255,.04) 62%);
  box-shadow: 0 22px 68px rgba(217, 45, 32, .12);
}
.simpleFlowStep span,
.flowStep span {
  background: rgba(255,255,255,.08);
  color: #cbd5e1;
}
.simpleFlowStep.active span,
.flowStep.active span {
  background: linear-gradient(135deg, #ff4b42, #b42318);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(217,45,32,.10);
}
.simpleFlowStep strong,
.routeCard strong,
.hardPartPanel strong,
.readinessCard strong,
.readinessOverview strong {
  color: #f8fafc;
}
.routeCard.recommended span {
  background: rgba(217, 45, 32, .14);
  color: #fecaca;
}
.routeCard small,
.hardPartPanel p,
.readinessCard p,
.readinessOverview p,
.commercialCard p,
.commercialCard small {
  color: #8f9bad;
}
.hardPartPanel {
  border-color: rgba(245, 158, 11, .26);
  background:
    linear-gradient(135deg, rgba(245,158,11,.11), rgba(255,255,255,.035));
}
.hardPartPanel span {
  background: rgba(245, 158, 11, .14);
  color: #fcd34d;
}
.readinessOverview.pass,
.readinessCard.pass {
  border-color: rgba(44,255,187,.18);
  background:
    linear-gradient(145deg, rgba(44,255,187,.095), rgba(255,255,255,.035));
}
.readinessOverview.warning,
.readinessCard.warning {
  border-color: rgba(245,158,11,.22);
  background:
    linear-gradient(145deg, rgba(245,158,11,.09), rgba(255,255,255,.035));
}
.readinessOverview.blocked,
.readinessCard.blocked {
  border-color: rgba(248,113,113,.23);
  background:
    linear-gradient(145deg, rgba(217,45,32,.11), rgba(255,255,255,.035));
}
.readinessOverview.pass span,
.readinessCard.pass span {
  background: rgba(44,255,187,.12);
  color: #9fffe0;
}
.readinessOverview.warning span,
.readinessCard.warning span {
  background: rgba(245,158,11,.14);
  color: #fcd34d;
}
.readinessOverview.blocked span,
.readinessCard.blocked span {
  background: rgba(217,45,32,.14);
  color: #fecaca;
}
.settingsLaunchCard:hover,
.routeCard:hover,
.workflowPublishChoices button:hover {
  border-color: rgba(44,255,187,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.05));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .30);
}
main select,
main input,
main textarea {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .055);
  color: #f8fafc;
}
main input::placeholder,
main textarea::placeholder {
  color: #6f7b8c;
}
main label {
  color: #cbd5e1;
}

.dashboardGrid, .studioLayout, .twoColumn {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: 16px;
}

.productFocus { min-height: 250px; }

select, input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
textarea { resize: vertical; }
label { display: grid; gap: 6px; color: #344054; font-size: 13px; font-weight: 760; }
.labelRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.titleCountField small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.titleCountField small.ok { color: var(--ok); }
.titleCountField small.warn { color: var(--warn); }

.formGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.formGrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.shippingTemplateChooser {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}
.shippingTemplateChooser .muted {
  grid-column: 1 / -1;
  margin: 0;
}
.shippingTemplateChooser button {
  min-height: 42px;
  border-radius: 8px;
}

.attributePanel {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}

.analysisPanel {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}

.analysisPanel h2 { font-size: 16px; margin-bottom: 4px; }

.analysisResult {
  display: grid;
  gap: 10px;
}

.analysisSummary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  color: #344054;
  font-size: 13px;
}

.pointChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.titleSuggestions {
  display: grid;
  gap: 8px;
}

.titleOption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #344054;
  font-size: 13px;
  line-height: 1.45;
}

.titleOption input { width: auto; margin-top: 3px; }
.titleOption small { color: var(--muted); white-space: nowrap; }

.pointChip {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #344054;
  cursor: pointer;
}

.pointChip input { width: auto; }

.attributePanel h2 { font-size: 16px; margin-bottom: 4px; }
.attributePanel .muted { margin-bottom: 0; }

.attributeGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.attributeGrid .full { grid-column: 1 / -1; }
.requiredMark { color: var(--brand); margin-left: 4px; }
.fieldHelp { display: block; margin-top: 6px; color: var(--muted); line-height: 1.35; }
.sensitiveField {
  border-color: rgba(217, 119, 6, .35);
  background: #fffaf0;
}
.attributeModalGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.attributeModalField {
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.attributeModalField.pass {
  border-color: rgba(22, 163, 74, .25);
  background: #f7fef9;
}
.attributeModalField.warning {
  border-color: rgba(217, 119, 6, .28);
  background: #fffbeb;
}
.attributeModalField.blocked {
  border-color: rgba(220, 38, 38, .28);
  background: #fff7f7;
}
.attributeFieldTitle {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.attributeFieldTitle strong {
  min-width: 0;
  color: #344054;
}
.attributeFieldTitle em {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 7px;
  background: #eef4ff;
  color: #175cd3;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}
.attributeModalField.pass .attributeFieldTitle em {
  background: #ecfdf3;
  color: var(--ok);
}
.attributeModalField.warning .attributeFieldTitle em {
  background: #fffaeb;
  color: var(--warn);
}
.attributeModalField.blocked .attributeFieldTitle em {
  background: #fff1f0;
  color: var(--brand);
}
.attributeModalField > span:not(.attributeFieldTitle) {
  font-weight: 800;
  color: #344054;
}
.attributeModalField small {
  color: var(--muted);
  line-height: 1.35;
}
.attributeConfirmSection {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}
.attributeConfirmSection.blocked {
  border-color: #fda29b;
}
.attributeConfirmSection.pass {
  border-color: #75e0a7;
}
.attributeConfirmSection.warning {
  border-color: #fedf89;
}
.attributeConfirmHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.attributeConfirmHead strong {
  font-size: 15px;
}
.attributeConfirmHead span {
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.attributeConfirmSection p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.publishConfirmStatus {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}
.publishConfirmStatus.pass {
  border-color: #75e0a7;
  background: #ecfdf3;
}
.publishConfirmStatus.warning {
  border-color: #fedf89;
  background: #fffaeb;
}
.publishConfirmStatus.blocked {
  border-color: #fda29b;
  background: #fff1f3;
}
.publishConfirmStatus strong {
  font-size: 16px;
}
.publishConfirmStatus p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.publishConfirmGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.publishConfirmItem {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.publishConfirmItem span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.publishConfirmItem strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
}
.publishConfirmChecks {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.publishConfirmChecks .commercialIssue {
  margin: 0;
}
.publishConfirmUploadPlan {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.publishConfirmUploadPlan h3 {
  margin: 0;
  font-size: 15px;
}

.draftResultCard {
  width: min(1040px, calc(100vw - 48px));
}
.draftResultHero {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.draftResultCover {
  display: grid;
  place-items: center;
  min-height: 240px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
}
.draftResultCover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.draftResultCover span {
  color: #8b97a8;
  font-weight: 850;
}
.draftResultMain {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.draftResultMain h3 {
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.draftResultStatus,
.draftResultAdvice,
.draftResultSection,
.draftResultStats div,
.draftResultImageGroup,
.draftResultSkuTable {
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
}
.draftResultStatus {
  display: grid;
  gap: 5px;
  padding: 12px;
}
.draftResultStatus strong,
.draftResultAdvice strong,
.draftResultStats strong,
.draftResultImageGroup strong,
.draftResultSkuRow strong {
  color: #f8fafc;
}
.draftResultStatus p,
.draftResultAdvice p,
.draftResultAdvice li,
.draftResultSectionHead p,
.draftResultImageGroup p {
  margin: 0;
  color: #8b97a8;
  line-height: 1.5;
}
.draftResultStatus.pass,
.draftResultAdvice.pass {
  border-color: rgba(44,255,187,.24);
  background: linear-gradient(135deg, rgba(44,255,187,.12), rgba(255,255,255,.045));
}
.draftResultStatus.warning,
.draftResultAdvice.warning,
.draftResultStatus.processing {
  border-color: rgba(245,158,11,.28);
  background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(255,255,255,.045));
}
.draftResultStatus.blocked,
.draftResultAdvice.blocked {
  border-color: rgba(255,117,107,.34);
  background: linear-gradient(135deg, rgba(226,60,49,.14), rgba(255,255,255,.045));
}
.draftResultStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.draftResultStats div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
}
.draftResultStats span,
.draftResultImageGroup span,
.draftResultSkuHead span {
  color: #8b97a8;
  font-size: 12px;
  font-weight: 850;
}
.draftResultStats strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}
.draftResultAdvice {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
}
.draftResultAdvice ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
}
.draftResultActionList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.draftResultActionList span {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 5px 8px;
  color: #c6d0de;
  background: rgba(255,255,255,.055);
  font-size: 12px;
  font-weight: 800;
}
.draftResultSection {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
}
.draftResultSectionHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.draftResultSectionHead h3 {
  margin: 0;
}
.draftResultImageGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.draftResultImageGroup {
  display: grid;
  gap: 10px;
  padding: 11px;
}
.draftResultThumbStrip {
  display: flex;
  min-height: 54px;
  gap: 6px;
  align-items: center;
  overflow: hidden;
}
.draftResultThumbStrip img,
.draftResultSkuRow img {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255,255,255,.04);
}
.draftResultThumbStrip span {
  color: #c6d0de;
  font-weight: 850;
}
.draftResultThumbStrip.empty {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 8px;
  color: #8b97a8;
  font-size: 13px;
  font-weight: 800;
}
.draftResultSkuTable {
  overflow: hidden;
}
.draftResultSkuHead,
.draftResultSkuRow {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) minmax(82px, .6fr) minmax(70px, .5fr) minmax(74px, .5fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
}
.draftResultSkuHead {
  border-bottom: 1px solid rgba(255,255,255,.085);
  background: rgba(255,255,255,.045);
}
.draftResultSkuRow + .draftResultSkuRow {
  border-top: 1px solid rgba(255,255,255,.06);
}
.draftResultSkuRow span {
  color: #d8e2ef;
  min-width: 0;
  overflow-wrap: anywhere;
}

.dropZone {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px dashed #b8c4d3;
  border-radius: 12px;
  background: var(--soft);
}

.productListTools {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 220px) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}
.productListTools label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}
.productListTools input {
  width: 100%;
  margin-top: 0;
  background: #fff;
}
.productListSummary {
  color: var(--muted);
  font-size: 13px;
}
.productList { display: grid; gap: 10px; }
.itemCard {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.itemCard strong { display: block; margin-bottom: 5px; }
.metaLine { color: var(--muted); font-size: 13px; }
.itemCard:not(.taskCard) {
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: start;
}
.itemCard:not(.taskCard) > .rowActions {
  grid-column: 1 / -1;
  justify-content: flex-start;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #eef2f6;
}
.itemCard:not(.taskCard) strong {
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.taskCard {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: flex-start;
}
.taskCard.selected {
  border-color: #2563eb;
  background: #f8fbff;
}
.queueResultSummary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.queueSummaryCard {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}
.queueSummaryCard span,
.queueSummaryCard small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}
.queueSummaryCard strong {
  display: block;
  margin: 3px 0;
  color: #101828;
  font-size: 22px;
  line-height: 1;
}
.queueSummaryCard.failed {
  border-color: #fda29b;
  background: #fff7f7;
}
.queueSummaryCard.queued {
  border-color: #b2ddff;
  background: #f5fbff;
}
.queueSummaryCard.running {
  border-color: #fedf89;
  background: #fffbeb;
}
.queueSummaryCard.success {
  border-color: #75e0a7;
  background: #f3fff7;
}
.taskResultCard {
  position: relative;
}
.taskResultCard.failed,
.taskResultCard.waiting,
.taskResultCard.canceled {
  border-left: 4px solid #d92d20;
  background: #fffafa;
}
.taskResultCard.running {
  border-left: 4px solid #fdb022;
}
.taskResultCard.success {
  border-left: 4px solid #12b76a;
}
.taskResultMain {
  min-width: 0;
}
.taskResultHead {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
}
.taskResultHead > div {
  min-width: 0;
}
.taskResultStatus {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--soft);
  color: #344054;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.taskResultStatus.failed,
.taskResultStatus.waiting,
.taskResultStatus.canceled {
  background: #fff1f0;
  color: var(--brand);
}
.taskResultStatus.running {
  background: #fffaeb;
  color: var(--warn);
}
.taskResultStatus.queued {
  background: #eff8ff;
  color: #175cd3;
}
.taskResultStatus.success {
  background: #ecfdf3;
  color: var(--ok);
}
.taskResultInfo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 760px;
  margin-top: 8px;
}
.taskResultInfo > div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
}
.taskResultInfo span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.taskResultInfo strong {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: #344054;
  font-size: 13px;
  line-height: 1.35;
}
.taskFailureReason {
  max-width: 760px;
  margin-top: 9px;
  border: 1px solid #fda29b;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff1f0;
  color: var(--brand);
}
.taskFailureReason strong,
.taskFailureReason p {
  display: block;
  margin: 0;
}
.taskFailureReason p {
  margin-top: 4px;
  color: #7a271a;
  font-size: 13px;
  line-height: 1.45;
}
.taskSelectBox,
.taskSelectAll {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}
.taskSelectBox {
  align-self: start;
  padding-top: 4px;
}
.taskSelectBox input,
.taskSelectAll input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}
.taskBulkBar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.taskSteps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.taskProgress {
  position: relative;
  height: 18px;
  max-width: 420px;
  margin: 9px 0 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f2f4f7;
}
.taskProgress span {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #12b76a, #2e90fa);
  transition: width 0.25s ease;
}
.taskProgress em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #101828;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.repairBox {
  max-width: 680px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--soft);
}
.repairBox.ready {
  border-color: #75e0a7;
  background: #ecfdf3;
}
.repairBox.blocked {
  border-color: #fedf89;
  background: #fffaeb;
}
.repairBox strong {
  margin: 0 0 4px;
  color: #101828;
}
.repairBox p,
.repairBox small {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.miniLinkButton,
.screenshotReplay {
  margin-top: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  font-size: 12px;
}
.screenshotReplay {
  margin-top: 0;
  color: #175cd3;
  border-color: #b2ddff;
  background: #eff8ff;
}
.taskActionPrimary {
  box-shadow: 0 6px 16px rgba(217, 45, 32, .18);
}
.taskStep {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}
.taskStep.running {
  border-color: #fdb022;
  background: #fffaeb;
  color: var(--warn);
}
.taskStep.success {
  border-color: #75e0a7;
  background: #ecfdf3;
  color: var(--ok);
}
.taskStep.failed,
.taskStep.waiting_manual {
  border-color: #fda29b;
  background: #fff1f0;
  color: var(--brand);
}
.taskLogCard {
  width: min(860px, 100%);
}
.taskLogSummary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--soft);
}
.taskLogSummary.failed,
.taskLogSummary.waiting,
.taskLogSummary.canceled {
  border-color: #fda29b;
  background: #fff1f0;
}
.taskLogSummary.running {
  border-color: #fedf89;
  background: #fffaeb;
}
.taskLogSummary.success {
  border-color: #75e0a7;
  background: #ecfdf3;
}
.taskLogSummary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.taskLogSummary strong {
  margin: 3px 0;
  font-size: 16px;
}
.taskLogSummary p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
.taskLogList {
  display: grid;
  gap: 8px;
}
.taskLogItem {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}
.taskLogItem.error {
  border-color: #fda29b;
  background: #fffafa;
}
.taskLogItem.warning {
  border-color: #fedf89;
  background: #fffdf5;
}
.taskLogItemHead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.taskLogItemHead strong {
  color: #344054;
}
.taskLogItemHead span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.taskLogItem p {
  margin: 6px 0 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.productThumb {
  width: 72px;
  height: 72px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f2f4f7;
  color: var(--muted);
  font-size: 12px;
  cursor: zoom-in;
}

.productThumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.productThumb.empty {
  display: grid;
  place-items: center;
  cursor: default;
}

.badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #edf2f7;
  color: #344054;
  font-size: 12px;
  font-weight: 760;
}
.badge.success { background: #dcfae6; color: var(--ok); }
.badge.failed { background: #fee4e2; color: var(--brand); }
.badge.waiting { background: #fef0c7; color: var(--warn); }

.slotPicker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.slotPicker label {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 13px 12px 13px 36px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}
.slotPicker input { position: absolute; left: 12px; top: 16px; width: auto; }
.slotPicker span { font-weight: 850; }
.slotPicker small { color: var(--muted); }

.countHint {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #344054;
  font-size: 13px;
}

.downloadButton {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #067647;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}

.modalOverlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(17, 24, 39, .48);
}

.modalCard {
  width: min(720px, 100%);
  max-height: min(780px, calc(100vh - 48px));
  overflow: auto;
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(16, 24, 40, .25);
}
.modalCard.settingsDetailCard {
  width: min(1320px, calc(100vw - 48px));
}
.listingWorkflowCard {
  width: min(1180px, calc(100vw - 48px));
}
.categoryPickerCard {
  width: min(860px, 100%);
}
.categoryAttributeCard {
  width: min(920px, 100%);
}
.publishConfirmCard {
  width: min(880px, 100%);
}
.notificationCard {
  width: min(860px, 100%);
}
.notificationToolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}
.notificationList {
  display: grid;
  gap: 10px;
}
.notificationItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}
.notificationItem.error {
  border-color: #fda29b;
  background: #fff7f7;
}
.notificationItem.warning {
  border-color: #fedf89;
  background: #fffbeb;
}
.notificationItem.info {
  border-color: #b2ddff;
  background: #eff8ff;
}
.notificationItem.pass {
  border-color: #75e0a7;
  background: #ecfdf3;
}
.notificationItem.read {
  opacity: .72;
}
.notificationItemHead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
}
.notificationItemHead strong {
  color: #101828;
}
.notificationItemHead span {
  border-radius: 999px;
  padding: 3px 8px;
  background: #f2f4f7;
  color: #344054;
  font-size: 12px;
  font-weight: 850;
}
.notificationItem p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.notificationActions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.modalHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.workflowSteps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.workflowStep {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 8px;
  align-items: center;
  min-height: 62px;
  padding: 10px;
  border-radius: 8px;
  text-align: left;
  background: #fff;
}
.workflowStep span {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #edf2f7;
  font-weight: 900;
}
.workflowStep.active {
  border-color: #fda29b;
  background: #fff7f6;
}
.workflowStep.active span {
  color: #fff;
  background: var(--brand);
}
.workflowStep.done span {
  color: #fff;
  background: var(--ok);
}
.workflowStep strong {
  font-size: 13px;
  line-height: 1.2;
}
.workflowStep small {
  color: var(--muted);
  font-size: 12px;
}
.workflowBody {
  display: grid;
  gap: 12px;
}
.workflowHero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}
.workflowHero h3,
.workflowBlock h3 {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.25;
}
.workflowHero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.workflowPreview {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.workflowPreview img {
  max-width: 180px;
  max-height: 180px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--soft);
}
.workflowRouteGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.workflowRouteCard {
  display: grid;
  gap: 7px;
  min-height: 132px;
  padding: 15px;
  border-radius: 8px;
  text-align: left;
}
.workflowRouteCard.selected {
  border-color: #fda29b;
  background: #fff7f6;
}
.workflowRouteCard span,
.workflowRouteBadge {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  background: #eef4ff;
  color: #175cd3;
  font-size: 12px;
  font-weight: 900;
}
.workflowRouteCard strong {
  font-size: 18px;
}
.workflowRouteCard small {
  color: var(--muted);
  line-height: 1.45;
}
.workflowBlock {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.workflowGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.workflowPlanComposer {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: 12px;
}
.workflowPlanRules,
.workflowLogisticsBlock {
  grid-column: 1 / -1;
}
.workflowBlockHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.workflowBlockHead p {
  margin: 0;
}
.workflowSuggestionGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.workflowSuggestionGrid.skuSuggestions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.workflowSuggestion {
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
  white-space: normal;
  display: grid;
  gap: 4px;
  align-content: center;
}
.workflowSuggestion.compact {
  min-height: 48px;
}
.workflowSuggestion small,
.workflowHint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.workflowSuggestion.selected {
  border-color: #fda29b;
  background: #fff7f6;
}
.workflowHint {
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--soft);
}
.workflowImagePlan {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.workflowShippingBox {
  display: grid;
  gap: 8px;
}
.workflowPriceList {
  display: grid;
  gap: 7px;
}
.workflowPriceRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}
.workflowPriceRow span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.workflowPriceRow small {
  color: var(--muted);
  font-weight: 800;
}
.workflowChecklist,
.workflowPublishChoices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.workflowChecklist div,
.workflowPublishChoices button {
  display: grid;
  gap: 5px;
  min-height: 88px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  text-align: left;
  box-shadow: var(--button-shadow);
  white-space: normal;
}
.workflowChecklist span,
.workflowPublishChoices small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.uploadPlanGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.uploadPlanGrid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.uploadPlanCard {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.uploadPlanCard.pass {
  border-color: #75e0a7;
  background: #f6fef9;
}
.uploadPlanCard.warning {
  border-color: #fedf89;
  background: #fffcf5;
}
.uploadPlanCard span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.uploadPlanCard strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}
.uploadPlanCard p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.uploadThumbStrip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  align-items: center;
  min-height: 42px;
}
.uploadThumbStrip.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.uploadThumbStrip img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
}
.uploadThumbStrip span {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
  color: #344054;
  font-size: 12px;
  font-weight: 900;
}
.workflowActions {
  position: sticky;
  bottom: -20px;
  margin: 14px -20px -20px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
}

.modalPicker {
  display: grid;
  gap: 10px;
}

.kindPlan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 120px;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}

.kindPlan input { width: auto; }
.kindPlan strong { display: block; font-size: 15px; }
.kindPlan small { display: block; margin-top: 3px; color: var(--muted); font-weight: 500; }
.kindPlan.disabled { opacity: .58; }

.modalActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.categorySelectField .labelRow {
  align-items: center;
}
.inlineButtonGroup {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.categorySearchRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 12px 0;
}
.categoryCrumbs {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.categoryCrumbs button {
  padding: 8px 10px;
  border-radius: 8px;
}
.categoryCrumbs div {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: #344054;
  font-size: 13px;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.categoryShopStatus {
  display: grid;
  gap: 8px;
}
.categoryPickerList {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
  padding-right: 2px;
}
.categoryPickItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  text-align: left;
  border-radius: 10px;
  background: #fff;
}
.categoryPickItem:hover {
  border-color: #84caff;
  background: #f5fbff;
}
.categoryPickItem strong,
.categoryPickItem small {
  display: block;
}
.categoryPickItem small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 560;
  line-height: 1.35;
}
.categoryPickItem em {
  border-radius: 999px;
  padding: 4px 8px;
  background: #fffaeb;
  color: var(--warn);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}
.categoryPickItem em.ready {
  background: #ecfdf3;
  color: var(--ok);
}
.categoryRecommendationPanel {
  margin-top: 10px;
}
.categoryAttributeSummary {
  margin-top: 10px;
}
.attributeSummaryGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.attributeSummaryItem {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
}
.attributeSummaryItem strong,
.attributeSummaryItem span {
  display: block;
}
.attributeSummaryItem span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.attributeSummaryItem.pass { border-color: rgba(22, 163, 74, .25); background: #f0fdf4; }
.attributeSummaryItem.warning { border-color: rgba(217, 119, 6, .28); background: #fffbeb; }
.attributeSummaryItem.blocked { border-color: rgba(220, 38, 38, .28); background: #fff1f2; }
.categoryRecommendationList {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.categoryRecommendItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border-radius: 10px;
  background: #fff;
}
.categoryRecommendItem strong,
.categoryRecommendItem small {
  display: block;
}
.categoryRecommendItem small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.categoryRecommendItem em {
  border-radius: 999px;
  padding: 4px 8px;
  background: #fffaeb;
  color: var(--warn);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}
.categoryRecommendItem em.ready {
  background: #ecfdf3;
  color: var(--ok);
}
.opportunityPanel {
  margin-top: 10px;
}
.opportunitySummaryRow {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 10px;
}
.opportunityMiniList {
  display: flex;
  gap: 6px;
  align-items: center;
}
.opportunityMiniThumb {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
}
.opportunityMiniThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.opportunityModalCard {
  width: min(1080px, 100%);
}
.opportunityModalList {
  margin-top: 12px;
}
.opportunityList {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.modalOpportunityList {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.opportunityItem {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 88px;
  padding: 8px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.opportunityItem:hover {
  border-color: rgba(21, 112, 239, .5);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
}
.opportunityItem:disabled,
.opportunityItem.isLoading {
  cursor: wait;
  opacity: .68;
}
.opportunityThumb {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
}
.opportunityThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.opportunityInfo {
  min-width: 0;
}
.opportunityInfo strong,
.opportunityInfo small {
  display: block;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.opportunityInfo strong {
  -webkit-line-clamp: 2;
  line-height: 1.3;
}
.opportunityInfo small {
  -webkit-line-clamp: 2;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.opportunityItem em {
  grid-column: 1 / -1;
  justify-self: end;
  border-radius: 999px;
  padding: 4px 8px;
  background: #ecfdf3;
  color: var(--ok);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}
.aiEnhancementPanel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.aiEnhancementGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}
.aiEnhancementCard {
  display: grid;
  gap: 7px;
  align-content: start;
  min-height: 155px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
}
.aiEnhancementCard.pass {
  border-color: #75e0a7;
}
.aiEnhancementCard.warning {
  border-color: #fedf89;
  background: #fffcf5;
}
.aiEnhancementCard.blocked {
  border-color: #fda29b;
  background: #fff7f6;
}
.aiEnhancementCard strong {
  font-size: 14px;
}
.aiEnhancementCard span {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  background: #eef4ff;
  color: #175cd3;
  font-size: 12px;
  font-weight: 850;
}
.aiEnhancementCard.pass span {
  background: #ecfdf3;
  color: var(--ok);
}
.aiEnhancementCard.warning span {
  background: #fffaeb;
  color: #b54708;
}
.aiEnhancementCard.blocked span {
  background: #fff1f0;
  color: var(--brand);
}
.aiEnhancementCard p,
.aiEnhancementCard small {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.progressPanel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}
.progressTop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.progressTrack {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4e7ec;
}
#imageProgressBar,
#storeSyncBar,
#aiCommandBar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--ok);
  transition: width 240ms ease;
}

.aiCommandPanel { margin-top: 16px; }
.aiChatLog {
  display: grid;
  gap: 10px;
  max-height: 240px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}
.aiMessage {
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  color: #344054;
  font-size: 14px;
  line-height: 1.5;
}
.aiMessage.user {
  justify-self: end;
  background: #dcfae6;
  color: #054f31;
}

.memoryPanel {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}
.advancedMemory summary {
  cursor: pointer;
  color: #344054;
  font-weight: 850;
}
.advancedMemory[open] summary {
  margin-bottom: 10px;
}

.memoryList {
  display: grid;
  gap: 8px;
}

.memoryItem {
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.memoryItem div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.memoryItem strong {
  font-size: 14px;
}

.memoryItem span,
.memoryMessage span {
  color: var(--muted);
  font-size: 12px;
}

.memoryItem p,
.memoryMessage p {
  margin: 6px 0 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.5;
}

.memoryMessages {
  display: grid;
  gap: 6px;
}

.memoryMessage {
  border-left: 3px solid #cbd5e1;
  padding-left: 8px;
}

.memoryMessage.user {
  border-left-color: var(--brand);
}

.memoryComposer {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr auto;
  gap: 8px;
  margin-top: 10px;
}

.memoryComposer input,
.memoryComposer textarea {
  width: 100%;
}
.aiCommandBar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  margin-top: 12px;
}
.listingPlan {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.planChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.planChips span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--soft);
  color: #344054;
  font-size: 12px;
  font-weight: 760;
}
.planGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.planGrid div {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--soft);
}
.planGrid p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
}
.planGrid small {
  color: var(--muted);
  line-height: 1.45;
}
.aiImageInput {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(180px, 260px) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  margin-top: 12px;
}
.aiCommandOptions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}
.wideField {
  grid-column: span 2;
}
.aiCommandOptions label {
  min-width: 0;
}
.switchField {
  min-height: 40px;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.switchField input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}
.aiCommandImagePreview {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}
.aiCommandImagePreview img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: zoom-in;
}

.syncControls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: end;
}

.syncProgress {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}
.stepList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.miniStep {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 13px;
}
.miniStep.running { border-color: #fdb022; color: var(--warn); }
.miniStep.success { border-color: #75e0a7; color: var(--ok); }
.miniStep.failed { border-color: #fda29b; color: var(--brand); }

.previewPanel { min-height: 520px; }
.sourcePreview {
  margin-bottom: 12px;
  border-radius: 12px;
  overflow: hidden;
  background: #101828;
}
.sourcePreview img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  cursor: zoom-in;
}
.previewGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.compactPreview { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.imageCard {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: zoom-in;
}
.imageCard:hover { border-color: #98a2b3; }
.imageCard img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #f2f4f7;
}
.imageCard .caption {
  padding: 9px 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #344054;
  font-size: 13px;
}
.imageDeleteButton {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  color: var(--brand);
  font-size: 12px;
}

.lightboxCard {
  width: min(920px, 100%);
  max-height: min(900px, calc(100vh - 48px));
  overflow: auto;
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(16, 24, 40, .25);
}
.lightboxCard img {
  display: block;
  width: 100%;
  max-height: calc(100vh - 180px);
  object-fit: contain;
  border-radius: 10px;
  background: #101828;
}

.manifestBox {
  display: grid;
  gap: 10px;
  color: #344054;
}
.manifestStat {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}

.gateStatus {
  padding: 11px 12px;
  border-radius: 10px;
  font-weight: 850;
  background: #dcfae6;
  color: var(--ok);
}
.gateStatus.failed {
  background: #fee4e2;
  color: var(--brand);
}
.gateList {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.gateList li {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
}
.gateList li.danger {
  border-color: #fda29b;
  background: #fff1f0;
  color: var(--brand);
}
.gateList li.warn {
  border-color: #fdb022;
  background: #fffaeb;
  color: var(--warn);
}
.okText { color: var(--ok); }

.emptyState {
  display: grid;
  place-items: center;
  min-height: 150px;
  color: var(--muted);
  border: 1px dashed #b8c4d3;
  border-radius: 12px;
  background: var(--soft);
  text-align: center;
}
.emptyState.compact { min-height: 74px; padding: 12px; }
.hidden { display: none; }

.code {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 12px;
  background: #101828;
  color: #e4e7ec;
  overflow: auto;
}

/* Factory backend dark console polish */
body {
  background: #07090c;
}

.rail {
  width: 220px;
  padding: 22px 14px;
  background:
    linear-gradient(180deg, #15171b 0%, #0a0c0f 100%);
}

.brand {
  padding: 8px 6px 22px;
  margin-bottom: 12px;
}

.brand strong {
  letter-spacing: 0;
}

.brand small {
  color: #6f7a89;
}

.mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.rail button {
  min-height: 40px;
  border-radius: 8px;
  color: #818b9b;
  box-shadow: none;
}

.rail button:hover,
.rail button.active {
  background:
    linear-gradient(90deg, rgba(44, 255, 187, .12), rgba(255,255,255,.045));
  box-shadow: inset 2px 0 0 rgba(44, 255, 187, .75);
}

main {
  padding: 28px clamp(22px, 3.2vw, 58px) 48px;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(180deg, #11151a 0%, #090b0e 48%, #0b0d11 100%);
  background-size: 46px 46px, 46px 46px, auto;
}

main::before {
  background:
    linear-gradient(105deg, rgba(44,255,187,.055), transparent 34%),
    linear-gradient(250deg, rgba(217,45,32,.05), transparent 38%);
  opacity: .72;
}

.hero {
  min-height: 54px;
  margin-bottom: 22px;
}

.hero h1 {
  margin-bottom: 7px;
  font-size: clamp(27px, 2.1vw, 38px);
  font-weight: 900;
}

.hero p:not(.eyebrow) {
  max-width: 760px;
}

main .eyebrow {
  margin-bottom: 8px;
  color: #74f7d3;
  letter-spacing: .04em;
}

.accountActions {
  gap: 12px;
}

main .accountBadge,
main .notificationButton,
main #logoutBtn {
  border-radius: 14px;
  background: rgba(255,255,255,.055);
}

main .accountBadge {
  padding: 12px 14px;
}

.commandDock,
main .panel,
main .metrics div,
main .simpleFlowStep,
main .routeCard,
main .hardPartPanel,
main .readinessOverview,
main .readinessCard,
main .settingsLaunchCard,
.modalCard:not(.lightboxCard) {
  border: 1px solid rgba(255,255,255,.085);
  background:
    linear-gradient(180deg, rgba(255,255,255,.072), rgba(255,255,255,.032));
  box-shadow: 0 18px 55px rgba(0,0,0,.26);
  backdrop-filter: blur(18px);
}

.commandDock {
  padding: 18px 20px;
  border-radius: 16px;
  background:
    linear-gradient(100deg, rgba(44,255,187,.11), rgba(255,255,255,.052) 44%, rgba(217,45,32,.055));
}

.commandDockCopy span,
main .routeCard span,
main .hardPartPanel span,
main .readinessOverview span,
main .readinessCard span,
main .commercialCard span {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.07);
}

.commandDockCopy span,
main .routeCard:not(.recommended) span,
main .readinessOverview.pass span,
main .readinessCard.pass span {
  color: #8dffd9;
}

.commandDockCopy strong,
main .panel h2,
main .simpleFlowStep strong,
main .routeCard strong,
main .hardPartPanel strong,
main .readinessOverview strong,
main .readinessCard strong,
.modalCard h2,
.modalCard h3 {
  color: #f8fafc;
}

.commandDockCopy p,
main .panel p,
main .panel small,
main .simpleFlowStep small,
main .routeCard small,
main .hardPartPanel p,
main .readinessOverview p,
main .readinessCard p,
.modalCard .muted,
.modalCard p,
.modalCard small {
  color: #8b97a8;
}

.statusBar {
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid #2cffbb;
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  box-shadow: none;
}

.metrics {
  gap: 10px;
  margin-bottom: 18px;
}

main .metrics div {
  min-height: 72px;
  padding: 14px 16px;
  border-radius: 12px;
  box-shadow: none;
}

main .metrics span {
  font-size: 25px;
}

.simpleFlow {
  gap: 10px;
  margin-bottom: 16px;
}

main .simpleFlowStep {
  min-height: 88px;
  border-radius: 13px;
  box-shadow: none;
}

main .simpleFlowStep.active {
  border-color: rgba(255,255,255,.13);
  background:
    linear-gradient(135deg, rgba(44,255,187,.13), rgba(255,255,255,.052) 56%, rgba(217,45,32,.075));
  box-shadow: inset 0 0 0 1px rgba(44,255,187,.045);
}

main .simpleFlowStep.active span {
  background: #e23c31;
  box-shadow: 0 10px 28px rgba(226,60,49,.24);
}

main .panel {
  border-radius: 16px;
}

main .listingWorkbench {
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.082), rgba(255,255,255,.035));
}

main .bigActionButton {
  min-height: 50px;
  padding-inline: 22px;
  border-radius: 14px;
}

main .routeCard {
  min-height: 148px;
  padding: 18px;
  border-radius: 13px;
  box-shadow: none;
}

main .routeCard.recommended {
  border-color: rgba(226,60,49,.24);
  background:
    linear-gradient(135deg, rgba(226,60,49,.13), rgba(255,255,255,.045) 58%);
}

main .routeCard.recommended span,
main .readinessOverview.blocked span,
main .readinessCard.blocked span {
  color: #ffb4ae;
}

main .routeCard:hover,
main .settingsLaunchCard:hover,
main .workflowPublishChoices button:hover {
  border-color: rgba(44,255,187,.2);
  transform: translateY(-1px);
}

.quickActionStrip {
  padding-top: 4px;
}

.quickActionStrip span {
  color: #737f90;
}

main .quickActionStrip button,
main .rowActions button,
main .miniInlineButton {
  min-height: 36px;
  border-radius: 9px;
  background: rgba(255,255,255,.055);
  box-shadow: none;
}

main .hardPartPanel {
  border-color: rgba(245,158,11,.18);
  background:
    linear-gradient(135deg, rgba(245,158,11,.085), rgba(255,255,255,.032));
}

main .hardPartPanel span,
main .readinessOverview.warning span,
main .readinessCard.warning span {
  color: #f7d774;
}

main .listingReadinessPanel,
main .productFocus,
main .aiCommandPanel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.062), rgba(255,255,255,.028));
}

main .readinessOverview,
main .readinessCard {
  border-radius: 12px;
  box-shadow: none;
}

main .readinessOverview.pass,
main .readinessCard.pass,
main .readinessOverview.warning,
main .readinessCard.warning,
main .readinessOverview.blocked,
main .readinessCard.blocked {
  background:
    linear-gradient(180deg, rgba(255,255,255,.062), rgba(255,255,255,.028));
}

main .dashboardGrid,
main .studioLayout,
main .twoColumn {
  gap: 18px;
}

main .emptyState,
main .aiMessage,
main .memoryPanel,
main .itemCard,
main .imageCard,
main .commercialIssue,
main .packageSlot,
main .workflowBlock,
main .workflowHero,
main .workflowRouteCard,
main .workflowChecklist div,
main .workflowPublishChoices button,
.modalCard:not(.lightboxCard) .workflowSuggestion,
.modalCard:not(.lightboxCard) .workflowHint,
.modalCard:not(.lightboxCard) .workflowPriceRow,
.modalCard:not(.lightboxCard) .workflowBlock,
.modalCard:not(.lightboxCard) .workflowHero,
.modalCard:not(.lightboxCard) .workflowRouteCard,
.modalCard:not(.lightboxCard) .workflowChecklist div,
.modalCard:not(.lightboxCard) .workflowPublishChoices button,
.modalCard:not(.lightboxCard) .itemCard,
.modalCard:not(.lightboxCard) .emptyState,
.modalCard:not(.lightboxCard) .imageCard,
.modalCard:not(.lightboxCard) .commercialIssue,
.modalCard:not(.lightboxCard) .manifestStat,
.modalCard:not(.lightboxCard) .gateList li {
  border-color: rgba(255,255,255,.085);
  background: rgba(255,255,255,.045);
  color: #e8eef7;
}

main .imageCard img,
.modalCard:not(.lightboxCard) .imageCard img {
  background: rgba(255,255,255,.04);
}

main select,
main input,
main textarea,
.modalCard:not(.lightboxCard) select,
.modalCard:not(.lightboxCard) input,
.modalCard:not(.lightboxCard) textarea {
  border-color: rgba(255,255,255,.11);
  background: rgba(255,255,255,.058);
  color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

main select:focus,
main input:focus,
main textarea:focus,
.modalCard:not(.lightboxCard) select:focus,
.modalCard:not(.lightboxCard) input:focus,
.modalCard:not(.lightboxCard) textarea:focus {
  border-color: rgba(44,255,187,.38);
  outline: 3px solid rgba(44,255,187,.09);
}

main option,
.modalCard option {
  background: #10151c;
  color: #f8fafc;
}

main label,
.modalCard:not(.lightboxCard) label {
  color: #c6d0de;
}

.modalOverlay {
  background: rgba(3, 6, 10, .74);
  backdrop-filter: blur(10px);
}

.modalCard:not(.lightboxCard) {
  background:
    linear-gradient(180deg, rgba(18,22,29,.98), rgba(12,15,20,.98));
  color: #edf2f7;
}

.modalCard:not(.lightboxCard) button {
  border-color: rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
  color: #edf2f7;
  box-shadow: none;
}

.modalCard:not(.lightboxCard) button:hover {
  border-color: rgba(44,255,187,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
}

.modalCard:not(.lightboxCard) button.primary {
  border-color: rgba(255,117,107,.58);
  background:
    linear-gradient(135deg, #ff4b42 0%, #d92d20 54%, #841a14 100%);
  color: #f8fafc;
}

.modalCard:not(.lightboxCard) .iconButton {
  background: rgba(255,255,255,.075);
  color: #f8fafc;
}

.modalCard:not(.lightboxCard) .workflowActions {
  border-top-color: rgba(255,255,255,.085);
  background: rgba(12,15,20,.88);
}

.modalCard:not(.lightboxCard) .workflowStep {
  border: 1px solid rgba(255,255,255,.085);
  background: rgba(255,255,255,.045);
  color: #edf2f7;
}

.modalCard:not(.lightboxCard) .workflowStep.active {
  border-color: rgba(226,60,49,.34);
  background: linear-gradient(135deg, rgba(226,60,49,.13), rgba(255,255,255,.045));
}

.modalCard:not(.lightboxCard) .workflowStep span {
  background: rgba(255,255,255,.09);
  color: #d8e2ef;
}

.modalCard:not(.lightboxCard) .workflowStep.active span {
  background: #e23c31;
  color: #fff;
}

.modalCard:not(.lightboxCard) .workflowStep.done span {
  background: #12b981;
  color: #042015;
}

.modalCard:not(.lightboxCard) .workflowStep strong {
  color: #f8fafc;
}

.modalCard:not(.lightboxCard) .workflowStep small {
  color: #8b97a8;
}

.modalCard:not(.lightboxCard) .workflowSuggestion {
  justify-content: stretch;
}

.modalCard:not(.lightboxCard) .workflowSuggestion strong,
.modalCard:not(.lightboxCard) .workflowPriceRow strong {
  color: #f8fafc;
}

.modalCard:not(.lightboxCard) .workflowSuggestion small,
.modalCard:not(.lightboxCard) .workflowHint,
.modalCard:not(.lightboxCard) .workflowPriceRow small {
  color: #8b97a8;
}

.modalCard:not(.lightboxCard) .workflowSuggestion.selected {
  border-color: rgba(44,255,187,.28);
  background:
    linear-gradient(135deg, rgba(44,255,187,.12), rgba(255,255,255,.045));
  box-shadow: inset 0 0 0 1px rgba(44,255,187,.035);
}

.modalCard:not(.lightboxCard) .workflowSuggestion.selected small {
  color: #8dffd9;
}

.draftHistoryCard,
.draftHistoryModalHero,
.draftHistoryItem {
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.062), rgba(255,255,255,.032));
  color: #edf2f7;
}

.draftHistoryCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
  padding: 14px;
}

.draftHistoryCard.loading {
  opacity: .78;
}

.draftHistoryCard.pass {
  border-color: rgba(44, 255, 187, .18);
  background:
    linear-gradient(135deg, rgba(44,255,187,.09), rgba(255,255,255,.036));
}

.draftHistoryCard.warning,
.draftHistoryCard.processing {
  border-color: rgba(245, 158, 11, .2);
  background:
    linear-gradient(135deg, rgba(245,158,11,.09), rgba(255,255,255,.036));
}

.draftHistoryCard.blocked {
  border-color: rgba(255, 117, 107, .24);
  background:
    linear-gradient(135deg, rgba(226,60,49,.11), rgba(255,255,255,.036));
}

.draftHistoryCard span,
.draftHistoryModalHero span,
.draftHistoryItem span {
  display: inline-flex;
  width: fit-content;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255,255,255,.062);
  color: #9bdccc;
  font-size: 12px;
  font-weight: 760;
}

.draftHistoryCard strong,
.draftHistoryModalHero strong,
.draftHistoryItem strong {
  display: block;
  margin-top: 7px;
  color: #f8fafc;
  line-height: 1.35;
}

.draftHistoryCard p,
.draftHistoryCard small,
.draftHistoryModalHero p,
.draftHistoryItem p,
.draftHistoryItem small {
  display: block;
  margin: 5px 0 0;
  color: #a9b5c4;
  line-height: 1.55;
}

.draftHistoryModalCard {
  max-width: 1080px;
}

.draftHistoryModalHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
  padding: 14px;
}

.draftHistoryList {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.draftHistoryItem {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.draftHistoryTop {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.draftHistoryTop b {
  color: #f8fafc;
  font-size: 20px;
  white-space: nowrap;
}

.draftHistoryMetrics,
.draftHistorySkuList,
.draftHistoryComments,
.draftChangeList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.draftHistoryMetrics span,
.draftHistorySkuList span,
.draftHistoryComments span,
.draftChangeList span {
  color: #cbd5e1;
}

.draftHistoryTitle {
  color: #e6edf7 !important;
}

.draftHistoryComments span,
.draftChangeList span.warning {
  border-color: rgba(245, 158, 11, .18);
  background: rgba(245, 158, 11, .09);
  color: #f7d774;
}

.draftChangeList span.error,
.draftChangeList span.blocked {
  border-color: rgba(255, 117, 107, .2);
  background: rgba(226, 60, 49, .1);
  color: #ffb4ae;
}

.draftMemoryNotice {
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 13px;
  padding: 12px;
  background: rgba(255,255,255,.045);
  color: #dce5f0;
}

.draftMemoryNotice strong {
  display: block;
  margin-bottom: 8px;
  color: #f8fafc;
}

.draftMemoryNotice.pass {
  border-color: rgba(44,255,187,.18);
  background: rgba(44,255,187,.075);
  color: #a7f3d0;
}

.draftMemoryNotice.warning {
  border-color: rgba(245,158,11,.18);
  background: rgba(245,158,11,.075);
}

.draftMemoryNotice.neutral {
  color: #a9b5c4;
}

main,
.hero,
.commandDock,
.commandDockActions,
.queueDock {
  overflow: visible;
}

.commandDock {
  position: relative;
  z-index: 30;
}

.queueMore {
  position: relative;
  z-index: 90;
}

.queueMoreMenu {
  z-index: 1300;
  min-width: 178px;
}

main .queueMore[open] summary,
main .queueMore summary:active,
main .queueMore summary:focus,
main button:active,
main button:focus,
main button:focus-visible,
.modalCard:not(.lightboxCard) button:active,
.modalCard:not(.lightboxCard) button:focus,
.modalCard:not(.lightboxCard) button:focus-visible {
  border-color: rgba(44,255,187,.26);
  background:
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.052));
  color: #f8fafc;
  outline: 2px solid rgba(44,255,187,.12);
  outline-offset: 2px;
  box-shadow: none;
}

main button.primary:active,
main button.primary:focus,
.modalCard:not(.lightboxCard) button.primary:active,
.modalCard:not(.lightboxCard) button.primary:focus {
  border-color: rgba(255,117,107,.58);
  background:
    linear-gradient(135deg, #ff4b42 0%, #d92d20 54%, #841a14 100%);
  color: #fff;
}

main .dangerButton:active,
main .dangerButton:focus,
.modalCard:not(.lightboxCard) .dangerButton:active,
.modalCard:not(.lightboxCard) .dangerButton:focus {
  border-color: rgba(255,117,107,.35);
  background: rgba(226,60,49,.14);
  color: #ffb4ae;
}

main .commercialIssue strong,
main .commercialCard strong,
main .billingPlan strong,
main .billingOrder strong,
main .itemCard strong,
main .imageCard strong,
main .emptyState strong,
main .manifestStat strong,
main .gateList strong,
.modalCard:not(.lightboxCard) .commercialIssue strong,
.modalCard:not(.lightboxCard) .commercialCard strong,
.modalCard:not(.lightboxCard) .billingPlan strong,
.modalCard:not(.lightboxCard) .billingOrder strong,
.modalCard:not(.lightboxCard) .itemCard strong,
.modalCard:not(.lightboxCard) .imageCard strong,
.modalCard:not(.lightboxCard) .emptyState strong,
.modalCard:not(.lightboxCard) .manifestStat strong,
.modalCard:not(.lightboxCard) .gateList strong {
  color: #f8fafc;
}

main .commercialIssue p,
main .commercialCard p,
main .commercialCard small,
main .billingPlan p,
main .billingOrder p,
main .billingPlan small,
main .billingOrder small,
main .itemCard .metaLine,
main .imageCard .caption,
main .emptyState,
main .manifestStat p,
main .gateList li,
.modalCard:not(.lightboxCard) .commercialIssue p,
.modalCard:not(.lightboxCard) .commercialCard p,
.modalCard:not(.lightboxCard) .commercialCard small,
.modalCard:not(.lightboxCard) .billingPlan p,
.modalCard:not(.lightboxCard) .billingOrder p,
.modalCard:not(.lightboxCard) .billingPlan small,
.modalCard:not(.lightboxCard) .billingOrder small,
.modalCard:not(.lightboxCard) .itemCard .metaLine,
.modalCard:not(.lightboxCard) .imageCard .caption,
.modalCard:not(.lightboxCard) .emptyState,
.modalCard:not(.lightboxCard) .manifestStat p,
.modalCard:not(.lightboxCard) .gateList li {
  color: #a9b5c4;
}

main .billingPlan b,
main .billingOrder b,
main .metrics span,
.modalCard:not(.lightboxCard) .billingPlan b,
.modalCard:not(.lightboxCard) .billingOrder b {
  color: #f8fafc;
  text-shadow: none;
}

main .billingPlan span,
main .billingOrder span,
main .commercialCard span,
main .planBenefits span,
.modalCard:not(.lightboxCard) .billingPlan span,
.modalCard:not(.lightboxCard) .billingOrder span,
.modalCard:not(.lightboxCard) .commercialCard span,
.modalCard:not(.lightboxCard) .planBenefits span {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.062);
  color: #9bdccc;
}

main .commercialIssue.pass,
.modalCard:not(.lightboxCard) .commercialIssue.pass {
  border-color: rgba(44,255,187,.18);
  background: rgba(44,255,187,.07);
  color: #a7f3d0;
}

main .commercialIssue.warning,
.modalCard:not(.lightboxCard) .commercialIssue.warning {
  border-color: rgba(245,158,11,.18);
  background: rgba(245,158,11,.075);
  color: #f7d774;
}

main .commercialIssue.error,
main .commercialIssue.blocked,
.modalCard:not(.lightboxCard) .commercialIssue.error,
.modalCard:not(.lightboxCard) .commercialIssue.blocked {
  border-color: rgba(255,117,107,.22);
  background: rgba(226,60,49,.1);
  color: #ffb4ae;
}

main .commercialIssue.neutral,
.modalCard:not(.lightboxCard) .commercialIssue.neutral {
  color: #a9b5c4;
}

main .productListTools,
main .billingLedger,
main .billingAdminTools,
main .previewGrid,
main .compactPreview,
.modalCard:not(.lightboxCard) .productListTools,
.modalCard:not(.lightboxCard) .billingLedger,
.modalCard:not(.lightboxCard) .billingAdminTools,
.modalCard:not(.lightboxCard) .previewGrid,
.modalCard:not(.lightboxCard) .compactPreview {
  border-color: rgba(255,255,255,.085);
  background: rgba(255,255,255,.035);
  color: #edf2f7;
}

main h1,
main h2,
main h3,
main strong,
.modalCard:not(.lightboxCard) h2,
.modalCard:not(.lightboxCard) h3,
.modalCard:not(.lightboxCard) strong {
  text-shadow: none;
}

.storeConnectionStatus {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: min(100%, 620px);
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  color: #dbe6f3;
}

.storeConnectionStatus > i {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  margin-top: 6px;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 4px rgba(148,163,184,.12);
}

.storeConnectionStatus strong {
  color: #f8fafc;
  font-size: 14px;
}

.storeConnectionStatus p {
  margin: 3px 0 0;
  color: #a9b5c4;
  line-height: 1.45;
}

.storeConnectionStatus.pass {
  border-color: rgba(44,255,187,.2);
  background: rgba(44,255,187,.07);
}

.storeConnectionStatus.pass > i {
  background: #2cffbb;
  box-shadow: 0 0 0 4px rgba(44,255,187,.13), 0 0 22px rgba(44,255,187,.32);
}

.storeConnectionStatus.warning {
  border-color: rgba(245,158,11,.24);
  background: rgba(245,158,11,.075);
}

.storeConnectionStatus.warning > i {
  background: #f7d774;
  box-shadow: 0 0 0 4px rgba(245,158,11,.14);
}

.storeConnectionStatus.error {
  border-color: rgba(255,117,107,.26);
  background: rgba(226,60,49,.11);
}

.storeConnectionStatus.error > i {
  background: #ff756b;
  box-shadow: 0 0 0 4px rgba(226,60,49,.16);
}

main .storeRefreshButton {
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.06);
  color: #dce5f0;
}

main .storeRefreshButton:hover {
  border-color: rgba(44,255,187,.28);
  background: rgba(44,255,187,.08);
  color: #f8fafc;
}

.modalCard:not(.lightboxCard) .notificationItem,
.modalCard:not(.lightboxCard) .uploadPlanCard,
main .attributeSummaryItem,
main .categoryRecommendItem,
main .aiChatLog,
main .aiMessage,
main .memoryPanel,
main .memoryItem,
main .listingPlan,
main .planGrid div,
main .aiCommandOptions,
main .switchField {
  border-color: rgba(255,255,255,.085);
  background:
    linear-gradient(180deg, rgba(255,255,255,.062), rgba(255,255,255,.032));
  color: #edf2f7;
  box-shadow: none;
}

.modalCard:not(.lightboxCard) .notificationItem.error,
.modalCard:not(.lightboxCard) .uploadPlanCard.warning,
main .attributeSummaryItem.blocked {
  border-color: rgba(255,117,107,.24);
  background: rgba(226,60,49,.105);
}

.modalCard:not(.lightboxCard) .notificationItem.warning,
main .attributeSummaryItem.warning {
  border-color: rgba(245,158,11,.22);
  background: rgba(245,158,11,.08);
}

.modalCard:not(.lightboxCard) .notificationItem.info {
  border-color: rgba(96,165,250,.2);
  background: rgba(59,130,246,.08);
}

.modalCard:not(.lightboxCard) .notificationItem.pass,
.modalCard:not(.lightboxCard) .uploadPlanCard.pass,
main .attributeSummaryItem.pass {
  border-color: rgba(44,255,187,.2);
  background: rgba(44,255,187,.07);
}

.modalCard:not(.lightboxCard) .notificationItem.read {
  opacity: .74;
}

.modalCard:not(.lightboxCard) .notificationItemHead strong,
.modalCard:not(.lightboxCard) .uploadPlanCard strong,
main .attributeSummaryItem strong,
main .categoryRecommendItem strong,
main .memoryItem strong,
main .listingPlan strong,
main .planGrid strong,
main .aiMessage strong {
  color: #f8fafc;
}

.modalCard:not(.lightboxCard) .notificationItemHead span,
main .categoryRecommendItem em,
main .categoryRecommendItem em.ready,
main .planChips span {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.066);
  color: #9bdccc;
}

.modalCard:not(.lightboxCard) .notificationItem p,
.modalCard:not(.lightboxCard) .uploadPlanCard p,
.modalCard:not(.lightboxCard) .uploadPlanCard span,
main .attributeSummaryItem span,
main .categoryRecommendItem small,
main .memoryItem span,
main .memoryMessage span,
main .memoryItem p,
main .memoryMessage p,
main .listingPlan p,
main .listingPlan small,
main .aiCommandImagePreview,
main .aiMessage {
  color: #a9b5c4;
}

.modalCard:not(.lightboxCard) .notificationPrimaryAction {
  border-color: rgba(44,255,187,.25);
  background: rgba(44,255,187,.09);
  color: #d9fff2;
}

.modalCard:not(.lightboxCard) .notificationReadAction {
  border-color: rgba(255,255,255,.105);
  background: rgba(255,255,255,.045);
  color: #cbd5e1;
}

.modalCard:not(.lightboxCard) .uploadThumbStrip.empty,
.modalCard:not(.lightboxCard) .uploadThumbStrip span {
  border-color: rgba(255,255,255,.095);
  background: rgba(255,255,255,.042);
  color: #a9b5c4;
}

.modalCard:not(.lightboxCard) .uploadThumbStrip img,
main .aiCommandImagePreview img {
  border-color: rgba(255,255,255,.095);
  background: rgba(255,255,255,.045);
}

main .aiMessage.user {
  background: rgba(44,255,187,.1);
  color: #d9fff2;
}

main .aiCommandPanel textarea,
main .aiCommandPanel input,
main .aiImageInput input,
main .aiImageInput select,
main .aiCommandOptions input,
main .aiCommandOptions select,
main .memoryComposer input,
main .memoryComposer textarea {
  border-color: rgba(255,255,255,.11);
  background: rgba(255,255,255,.055);
  color: #edf2f7;
}

main .aiCommandPanel textarea::placeholder,
main .aiCommandPanel input::placeholder,
main .memoryComposer textarea::placeholder {
  color: #7f8b9b;
}

main .advancedMemory summary {
  color: #dce5f0;
}

@media (max-width: 1080px) {
  body { display: block; }
  .landingShell { width: min(100% - 28px, 900px); }
  .factoryAuthNav, .factoryAuthShell { width: min(100% - 28px, 900px); }
  .factoryAuthShell { grid-template-columns: 1fr; padding-top: 54px; }
  .factoryAuthCopy h2 { font-size: 46px; }
  .landingNav { flex-wrap: wrap; }
  .landingLinks { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
  .landingHero { min-height: auto; grid-template-columns: 1fr; padding-top: 30px; }
  .landingHero h1 { font-size: 48px; }
  .automationCard { grid-template-columns: 1fr; }
  .landingSteps, .landingFeatureGrid, .landingAudience, .landingUseCases, .landingPlanGrid, .landingHelpGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landingAuthSection { display: grid; }
  .rail {
    width: auto;
    min-height: 0;
    flex-direction: row;
    overflow-x: auto;
    align-items: center;
  }
  .rail button {
    width: auto;
    flex: 0 0 auto;
  }
  .brand { min-width: 210px; margin: 0; padding-bottom: 8px; border-bottom: 0; }
  .hero, .dashboardGrid, .studioLayout, .twoColumn { display: block; }
  .heroActions { justify-content: flex-start; margin-top: 12px; }
  .commandDock { grid-template-columns: 1fr; }
  .commandDockActions { justify-content: flex-start; }
  main::before { inset: 0; }
  .panel { margin-bottom: 14px; }
  .billingHeroGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics, .flow, .simpleFlow, .routeCards, .settingsLaunchGrid, .formGrid, .slotPicker, .syncControls, .aiImageInput, .aiCommandOptions, .attributeSummaryGrid, .attributeModalGrid, .publishConfirmGrid, .opportunityList, .queueResultSummary, .productListTools, .listingReadinessGrid, .workflowSteps, .workflowGrid, .workflowPlanComposer, .workflowImagePlan, .workflowChecklist, .workflowPublishChoices, .uploadPlanGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  main { padding: 14px; }
  .landingShell { width: calc(100% - 20px); padding-bottom: 24px; }
  .factoryAuthNav { width: calc(100% - 20px); flex-wrap: wrap; padding: 10px 0; }
  .factoryAuthShell { width: calc(100% - 20px); padding: 36px 0; }
  .factoryAuthCopy h2 { font-size: 34px; }
  .factoryAuthCopy p:not(.landingEyebrow) { font-size: 16px; line-height: 1.65; }
  .factoryAuthCard { border-radius: 18px; padding: 18px; }
  .landingNav { padding: 10px 0; }
  .landingLinks { gap: 12px; }
  .landingLoginLink { padding: 8px 10px; }
  .landingHero { gap: 22px; padding: 22px 0; }
  .landingHero h1 { font-size: 36px; }
  .landingLead { font-size: 16px; line-height: 1.65; }
  .landingActions { align-items: stretch; }
  .landingActions a { width: 100%; text-align: center; }
  .landingProof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 34px;
  }
  .landingProof span {
    min-width: 0;
    width: auto;
    padding: 0 8px;
    text-align: center;
  }
  .landingProof strong { font-size: 24px; }
  .landingHeroStage {
    margin-top: 36px;
    border-radius: 18px;
    padding: 6px;
  }
  .landingHeroStage img { border-radius: 13px; }
  .landingProductVisual, .landingBand, .landingAuthSection { border-radius: 18px; padding: 18px; }
  .automationCard { padding: 14px; }
  .automationCopy h3 { font-size: 24px; }
  .automationPreview { min-height: 0; }
  .imageSlotGrid, .publishPacket, .imageStrip, .publishFlowLine { grid-template-columns: 1fr; }
  .landingHeroHighlights, .visualUpload, .visualSteps, .visualCards, .landingSteps, .landingFeatureGrid, .landingAudience, .landingUseCases, .landingPlanGrid, .landingHelpGrid, .landingCompareTable div { grid-template-columns: 1fr; }
  .landingSectionHead h2, .landingAuthSection h2 { font-size: 26px; }
  .landingAuthSection .authCard { width: 100%; }
  .landingFooter { display: grid; }
  .landingFooter div:last-child { justify-content: flex-start; }
  .commandDock { padding: 14px; border-radius: 18px; }
  .commandDockActions,
  .queueDock { width: 100%; justify-content: stretch; }
  .commandDockActions > button,
  .queueDock > button,
  .queueMore,
  .queueMore summary { width: 100%; }
  .queueMoreMenu {
    position: static;
    margin-top: 8px;
    box-shadow: none;
  }
  .billingHeroGrid { grid-template-columns: 1fr; }
  .metrics, .flow, .simpleFlow, .routeCards, .settingsLaunchGrid, .formGrid, .slotPicker, .attributeGrid, .previewGrid, .compactPreview, .stepList, .syncControls, .aiCommandBar, .aiImageInput, .aiCommandOptions, .attributeSummaryGrid, .attributeModalGrid, .publishConfirmGrid, .opportunityList, .queueResultSummary, .taskResultInfo, .productListTools, .listingReadinessGrid, .readinessOverview, .shippingTemplateChooser, .hardPartPanel, .workflowSteps, .workflowGrid, .workflowPlanComposer, .workflowRouteGrid, .workflowImagePlan, .workflowChecklist, .workflowPublishChoices, .uploadPlanGrid, .workflowSuggestionGrid, .workflowSuggestionGrid.skuSuggestions, .draftHistoryCard, .draftHistoryModalHero {
    grid-template-columns: 1fr;
  }
  .workflowHero { display: grid; }
  .wideField { grid-column: auto; }
  .itemCard,
  .itemCard:not(.taskCard) { grid-template-columns: 1fr; }
  .taskResultHead,
  .taskLogSummary,
  .billingReminder,
  .notificationItem {
    display: grid;
  }
  .draftHistoryCard > button,
  .draftHistoryModalHero > button {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .draftResultCard {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }
  .draftResultHero,
  .draftResultImageGrid,
  .draftResultStats {
    grid-template-columns: 1fr;
  }
  .draftResultCover {
    min-height: 220px;
  }
  .draftResultSectionHead {
    display: grid;
  }
  .draftResultSkuHead {
    display: none;
  }
  .draftResultSkuRow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .draftResultSkuRow strong {
    grid-column: 1 / -1;
  }
  .draftHistoryModalCard {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }
  .draftHistoryTop {
    display: grid;
  }
  .draftHistoryTop b {
    white-space: normal;
  }
}