:root {
  color-scheme: light;
  --black: #111111;
  --ink: #171717;
  --muted: #646464;
  --line: #171717;
  --soft-line: #d7d7d7;
  --paper: #ffffff;
  --warm: #fffdf2;
  --yellow: #ffdf57;
  --blue: #a9d4f8;
  --green: #19765c;
  --red: #b42318;
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  letter-spacing: 0;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: #f5f5f3;
  font-size: 14px;
}

button, input { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
.button-link { display: inline-flex; align-items: center; text-decoration: none; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 5;
  display: flex;
  width: 212px;
  flex-direction: column;
  padding: 10px 12px;
  color: #ffffff;
  background: var(--black);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 8px 10px;
  border-bottom: 1px solid #343434;
}

.brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 2px solid #545454;
  border-radius: 7px;
  font: 800 19px/1 Consolas, monospace;
}

img.brand-mark {
  display: block;
  object-fit: contain;
  background: none;
  border: 0;
}

.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; }
.brand small { margin-top: 2px; color: #b8b8b8; font-size: 9px; }
.nav-label { margin: 20px 10px 10px; color: #9d9d9d; font-size: 10px; }
.sidebar nav { display: grid; gap: 6px; }

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 0 12px;
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 5px;
  font-weight: 700;
  text-decoration: none;
}

.sidebar nav a span { width: 18px; color: #d5d5d5; text-align: center; }
.sidebar nav a:hover { background: #252525; }
.sidebar nav a.active { color: #111111; background: var(--yellow); }
.sidebar nav a.active span { color: #111111; }
.sidebar-version { margin-top: auto; padding: 12px 10px 4px; color: #8c8c8c; font-size: 10px; }

.app-shell { min-height: 100vh; margin-left: 212px; overflow-x: hidden; }
.topbar {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  background: #ffffff;
  border-bottom: 1px solid #dedede;
}

.metric {
  min-width: 112px;
  padding: 6px 10px;
  border: 1px solid #d7d7d7;
  border-radius: 3px;
}

.metric strong, .metric span { display: block; }
.metric strong { font-size: 11px; }
.metric span { margin-top: 1px; color: var(--muted); font-size: 9px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.account { display: grid; min-width: 142px; padding: 2px 12px; border-left: 1px solid #d6d6d6; }
.account small { color: var(--muted); }

.plain-button, .notice-button, .yellow-button {
  min-height: 36px;
  padding: 7px 13px;
  color: #111111;
  background: #ffffff;
  border: 2px solid #111111;
  border-radius: 3px;
  box-shadow: 2px 2px 0 #111111;
  font-weight: 800;
}

.yellow-button { background: var(--yellow); }
.plain-button:hover, .notice-button:hover { background: #f3f3f3; }
.yellow-button:hover { background: #ffd536; }
.yellow-button:disabled { cursor: wait; opacity: .6; }
.yellow-button.large { min-width: 146px; min-height: 44px; }

.announcement {
  position: relative;
  min-height: 52px;
  padding: 16px 50px 14px 30px;
  color: #12334c;
  background: var(--blue);
  border-bottom: 1px solid #3991d4;
}

.announcement button {
  position: absolute;
  top: 11px;
  right: 14px;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #0d3959;
  background: transparent;
  border: 0;
  font-size: 24px;
}

main { width: min(100%, 1680px); margin: 30px auto 0; padding: 0 28px 40px; }
.page-heading {
  display: flex;
  min-height: 120px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 20px 24px;
  color: #ffffff;
  background: var(--black);
}

.eyebrow {
  display: inline-block;
  padding: 5px 9px;
  color: #111111;
  background: var(--yellow);
  border: 2px solid #111111;
  box-shadow: 2px 2px 0 #ffffff;
  font-size: 11px;
  font-weight: 900;
}

h1 { margin: 13px 0 0; font-size: 30px; line-height: 1.1; }
.heading-actions { display: flex; align-items: center; gap: 14px; }
.store-actions-heading,
.auto-bid-actions-only,
.products-actions-only,
.orders-actions-only {
  min-height: 0;
  justify-content: flex-end;
  padding-block: 14px;
}
.products-actions-only .products-hero-actions { flex: 0 1 980px; width: 100%; }
.quota {
  width: 218px;
  padding: 12px;
  color: #111111;
  background: var(--warm);
  border: 2px solid #111111;
  box-shadow: 3px 3px 0 #111111;
}
.quota > div { display: flex; justify-content: space-between; }
.quota span b { color: var(--green); }
.quota progress { width: 100%; height: 8px; margin-top: 12px; accent-color: var(--green); }

.create-section, .toolbar, .table-section {
  margin-top: 20px;
  background: #ffffff;
  border: 2px solid var(--line);
  box-shadow: 5px 5px 0 #d7d7d7;
}

.create-section { padding: 20px 16px; }
.create-section[hidden] { display: none; }
#store-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

label { min-width: 0; }
label > span { display: block; margin: 0 0 8px; font-weight: 800; }
input {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  color: #111111;
  background: #ffffff;
  border: 2px solid #222222;
  border-radius: 2px;
  outline: 0;
}
input:focus { border-color: #1976b9; box-shadow: inset 0 -2px 0 #1976b9; }
input::placeholder { color: #777777; }
.api-key-field details { margin-top: 6px; padding: 7px 10px; background: var(--warm); border: 1px solid #ded8bd; }
.api-key-field summary { cursor: pointer; font-weight: 800; }
.api-key-field p { margin: 8px 0 2px; color: var(--muted); font-size: 12px; }
.submit-button { min-width: 108px; min-height: 42px; margin-bottom: 1px; }
.store-submit-actions { display: flex; align-items: stretch; gap: 9px; }
.store-submit-actions .submit-button { white-space: nowrap; }

.store-create-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
}
.store-create-modal[hidden] { display: none; }
.store-create-panel {
  position: relative;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  color: #eef4ff;
  background: linear-gradient(150deg, rgba(16, 28, 72, 0.99), rgba(5, 10, 34, 0.99));
  border: 1px solid rgba(91, 214, 255, 0.58);
  border-radius: 10px;
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.58), 0 0 38px rgba(84, 216, 255, 0.16);
}
.store-create-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px 20px;
  border-bottom: 1px solid rgba(109, 184, 255, 0.24);
}
.store-create-header h2 { margin: 8px 0 5px; color: #ffffff; font-size: 26px; }
.store-create-header p { margin: 0; color: #aebddd; font-size: 13px; }
.store-create-header .icon-button {
  color: #f0f5ff;
  background: rgba(8, 18, 52, 0.82);
  border-color: rgba(103, 188, 255, 0.44);
}
.store-create-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 26px;
}
.store-create-form label > span { color: #e7eeff; font-size: 14px; }
.store-create-form input {
  min-height: 48px;
  color: #ffffff;
  background: rgba(3, 9, 31, 0.78);
  border: 1px solid rgba(105, 150, 255, 0.52);
  border-radius: 7px;
}
.store-create-form input::placeholder { color: #7f90b7; }
.store-create-form input:focus { border-color: #4de2ff; box-shadow: 0 0 0 3px rgba(77, 226, 255, 0.12); }
.store-create-form .api-key-field,
.store-create-note,
.store-create-form .store-submit-actions { grid-column: 1 / -1; }
.store-create-note {
  padding: 12px 14px;
  color: #a9b9da;
  background: rgba(7, 15, 46, 0.58);
  border: 1px solid rgba(112, 157, 247, 0.24);
  border-radius: 6px;
  font-size: 12px;
}
.store-create-form .store-submit-actions { justify-content: flex-end; margin-top: 2px; }
.store-create-form .submit-button { min-height: 46px; }

.toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--warm); }
.search-field { position: relative; width: min(340px, 100%); }
.search-field span { position: absolute; top: 11px; left: 12px; color: #555555; }
.search-field input { padding-left: 37px; background: #ffffff; }
.store-count { margin-left: auto; }

.table-section { overflow: hidden; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { min-width: 130px; padding: 15px 16px; text-align: left; border-bottom: 1px solid #b9b9b9; }
th { background: #fff5c7; font-size: 12px; }
td:first-child { font-weight: 900; }
.status { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; white-space: nowrap; }
.status::before { width: 8px; height: 8px; content: ""; background: var(--green); border-radius: 50%; }
.status.disabled::before, .status.invalid::before { background: var(--red); }
.credential { color: var(--green); font-weight: 800; }
.credential.invalid { color: var(--red); }
.row-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.row-actions button {
  min-height: 30px;
  padding: 5px 9px;
  color: #111111;
  background: #ffffff;
  border: 1px solid #111111;
  border-radius: 2px;
  font-weight: 800;
}
.row-actions button:hover { background: #eeeeee; }
.row-actions button.danger { color: var(--red); border-color: var(--red); }
.empty-state { padding: 38px 20px; color: var(--muted); text-align: center; }

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  max-width: min(380px, calc(100vw - 48px));
  padding: 12px 14px;
  color: #111111;
  background: var(--yellow);
  border: 2px solid #111111;
  box-shadow: 4px 4px 0 #111111;
  font-weight: 800;
}
.toast.error { color: #ffffff; background: var(--red); }

body.modal-open { overflow: hidden; }
.store-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
}
.store-modal[hidden] { display: none; }
.modal-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: rgb(0 0 0 / 38%);
  border: 0;
}
.store-detail-panel {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  width: min(518px, 100vw);
  flex-direction: column;
  color: #181818;
  background: #ffffff;
  border-left: 3px solid #111111;
  box-shadow: -8px 0 24px rgb(0 0 0 / 16%);
}
.detail-header {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px 24px;
  border-bottom: 1px solid #e1e1e1;
}
.detail-header h2 { margin: 0; font-size: 20px; }
.detail-header-actions { display: flex; align-items: center; gap: 8px; }
.icon-button {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  color: #333333;
  background: #ffffff;
  border: 1px solid #dedede;
  border-radius: 6px;
  font-size: 20px;
}
.icon-button:hover { background: #f3f3f3; }
.icon-button.small { width: 34px; height: 34px; font-size: 16px; }
.detail-text-button {
  min-height: 34px;
  padding: 5px 8px;
  color: #333333;
  background: transparent;
  border: 0;
  font-weight: 700;
}
.detail-text-button:hover { background: #f2f2f2; }
.danger-text { color: #d12c2c; }
.detail-body { overflow-y: auto; padding: 0 24px 30px; }
.store-identity { padding: 24px 0 20px; }
.store-name-line { display: flex; align-items: center; gap: 10px; }
.store-name-line h3 { margin: 0; font-size: 30px; line-height: 1.2; }
.seller-id-line { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: #626262; }
.seller-id-line b { font-weight: 500; }
.inline-edit { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin: 8px 0; }
.inline-edit[hidden] { display: none; }
.inline-edit input { min-height: 38px; }
.inline-edit .plain-button { min-height: 38px; box-shadow: none; }
.store-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
}
.store-facts span, .store-facts strong { display: block; }
.store-facts span { margin-bottom: 10px; color: #646464; font-size: 12px; }
.store-facts strong { font-size: 14px; }
.store-facts strong::before { margin-right: 6px; content: "•"; }
.store-facts div:not(:first-child) strong::before { content: ""; }
.detail-section { padding: 22px 0; border-bottom: 1px solid #e4e4e4; }
.detail-section h4 { margin: 0 0 14px; font-size: 14px; }
.copy-field { display: grid; grid-template-columns: 1fr 52px; gap: 12px; }
.copy-field textarea {
  width: 100%;
  min-height: 76px;
  resize: none;
  padding: 13px 14px;
  color: #606060;
  background: #fafafa;
  border: 1px solid #dedede;
  border-radius: 6px;
  font: 13px/1.6 "Segoe UI", sans-serif;
}
.copy-field .icon-button { width: 52px; height: 52px; align-self: start; }
.callback-status { margin: 12px 0; color: #666666; font-size: 12px; }
.callback-status strong { font-weight: 500; }
.callback-steps { margin: 0; padding-left: 20px; color: #555555; font-size: 12px; line-height: 1.9; }
.section-title-line { display: flex; align-items: center; justify-content: space-between; }
.soft-badge { padding: 4px 8px; color: #777777; background: #fafafa; border: 1px solid #dddddd; border-radius: 4px; font-size: 11px; }
.soft-badge.active { color: var(--green); border-color: #92c9b8; }
.secret-form { display: grid; grid-template-columns: 1fr 62px; gap: 8px; }
.secret-form .plain-button { box-shadow: none; }
.webhook-message-empty { margin: 0; color: var(--muted); font-size: 12px; }
.webhook-message-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.webhook-message-meta span { padding: 8px; background: #f7f7f7; border: 1px solid #dddddd; color: var(--muted); font-size: 10px; }
.webhook-message-meta strong { display: block; margin-top: 4px; overflow-wrap: anywhere; color: #111111; font-size: 11px; }
.webhook-message-error { margin: 0 0 12px; padding: 8px 10px; color: var(--red); background: #fff1f0; border: 1px solid #efb4ae; font-size: 11px; }
.webhook-message-details { border-top: 1px solid #e0e0e0; }
.webhook-message-details summary { padding: 10px 0; cursor: pointer; font-size: 12px; font-weight: 800; }
.webhook-message-details pre {
  max-height: 260px;
  overflow: auto;
  margin: 0 0 10px;
  padding: 12px;
  color: #222222;
  background: #f6f6f6;
  border: 1px solid #d8d8d8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 11px/1.55 Consolas, monospace;
}
.webhook-event-list { border: 1px solid #d8d8d8; }
.webhook-business-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.webhook-business-summary span { padding: 8px 10px; background: #f7f7f7; border: 1px solid #dddddd; color: var(--muted); font-size: 10px; }
.webhook-business-summary strong { display: block; margin-top: 4px; color: #111111; font-size: 14px; }
.webhook-event-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-bottom: 1px solid #e4e4e4;
}
.webhook-event-row:last-child { border-bottom: 0; }
.webhook-event-row strong, .webhook-event-row code { display: block; }
.webhook-event-row strong { margin-bottom: 5px; font-size: 12px; }
.webhook-event-row code { overflow-wrap: anywhere; color: var(--muted); font-size: 10px; }
.webhook-event-row small { display: block; margin-top: 5px; color: var(--green); font-size: 10px; }
.webhook-event-facts { display: flex; justify-content: flex-end; gap: 12px; color: var(--muted); font-size: 10px; }
.api-key-section > p { margin: 0 0 14px; color: #666666; font-size: 12px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.detail-actions .plain-button { min-height: 40px; box-shadow: none; border-width: 1px; }
.api-key-update-form { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin-top: 14px; }
.api-key-update-form[hidden], .revealed-key[hidden] { display: none; }
.api-key-update-form .yellow-button { min-height: 42px; box-shadow: none; border-width: 1px; }
.revealed-key {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  background: #fffdf2;
  border: 1px solid #d8d3b9;
}
.revealed-key code { overflow-wrap: anywhere; font-size: 11px; line-height: 1.5; }

.compact-heading { min-height: 108px; }
.profile-status {
  width: min(460px, 48%);
  padding: 12px 14px;
  color: #111111;
  background: var(--warm);
  border: 2px solid #111111;
}
.profile-status strong, .profile-status span { display: block; }
.profile-status span { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.pricing-form { margin-top: 20px; }
.pricing-band {
  padding: 20px;
  background: #ffffff;
  border: 2px solid var(--line);
  box-shadow: 5px 5px 0 #d7d7d7;
}
.pricing-band + .pricing-band { margin-top: 18px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.section-heading div { display: flex; align-items: center; gap: 10px; }
.section-heading div span { display: grid; width: 30px; height: 30px; place-items: center; background: var(--yellow); border: 2px solid #111111; font-weight: 900; }
.section-heading div strong { font-size: 18px; }
.section-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pricing-grid.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pricing-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pricing-grid label { padding: 14px; background: var(--warm); border: 1px solid #d8d3b9; }
.pricing-grid label small { display: block; min-height: 34px; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 18px; }
.form-actions span { color: var(--muted); font-size: 12px; }

@media (max-width: 1000px) {
  .sidebar { width: 70px; padding-inline: 8px; }
  .brand { justify-content: center; padding-inline: 0; }
  .brand > span:last-child, .nav-label, .sidebar nav a:not(.active), .sidebar nav a.active { font-size: 0; }
  .sidebar nav a { justify-content: center; padding: 0; }
  .sidebar nav a span { font-size: 17px; }
  .sidebar-version { display: none; }
  .app-shell { margin-left: 70px; }
  #store-form { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .topbar { padding-inline: 16px; }
  .metric:nth-child(2), .account small { display: none; }
}

@media (max-width: 680px) {
  .sidebar { position: static; width: 100%; height: 58px; flex-direction: row; align-items: center; }
  .brand { width: 54px; min-height: 44px; border: 0; }
  .brand-mark { width: 34px; height: 34px; }
  .sidebar nav { display: flex; margin-left: auto; }
  .sidebar nav a { display: none; width: 44px; min-height: 40px; }
  .sidebar nav a.active { display: flex; }
  .app-shell { margin-left: 0; }
  .topbar { min-height: 48px; }
  .metric, .topbar-actions .plain-button, .topbar-actions .notice-button, .account { display: none; }
  .topbar-actions { margin-left: auto; }
  main { margin-top: 16px; padding: 0 12px 28px; }
  .page-heading { min-height: 150px; align-items: flex-start; flex-direction: column; padding: 18px; }
  h1 { font-size: 26px; }
  .heading-actions { width: 100%; }
  .quota { width: 100%; }
  .yellow-button.large { min-width: 118px; }
  #store-form { grid-template-columns: 1fr; }
  .store-submit-actions { width: 100%; }
  .store-submit-actions .submit-button { flex: 1 1 0; }
  .profile-status { width: 100%; }
  .pricing-grid, .pricing-grid.two-columns { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .toolbar { align-items: stretch; flex-wrap: wrap; }
  .search-field { width: 100%; }
  .store-count { margin-left: 0; align-self: center; }
  .store-detail-panel { border-left: 0; }
  .detail-body { padding-inline: 16px; }
  .detail-header { padding-inline: 16px; }
  .detail-header-actions .detail-text-button { font-size: 12px; }
  .api-key-update-form { grid-template-columns: 1fr; }
  .webhook-message-meta { grid-template-columns: 1fr 1fr; }
  .webhook-event-row { grid-template-columns: 1fr; }
  .webhook-event-facts { justify-content: flex-start; flex-wrap: wrap; }
}



.listing-workspace { margin-top: 0; padding: 12px 20px 20px; background: #ffffff; border: 2px solid var(--line); box-shadow: 5px 5px 0 #d7d7d7; }
.listing-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.listing-summary article { position: relative; min-height: 86px; padding: 12px 50px 10px 12px; background: #ffffff; border: 1px solid #dedede; border-radius: 5px; }
.listing-summary article.warning { background: #fff6c7; }
.listing-summary span, .listing-summary strong, .listing-summary small { display: block; }
.listing-summary span { font-size: 11px; font-weight: 800; }
.listing-summary strong { margin-top: 2px; font-size: 23px; line-height: 1; }
.listing-summary small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.listing-summary i { position: absolute; top: 12px; right: 12px; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #d7d7d7; border-radius: 5px; font-style: normal; font-weight: 900; }
.listing-toolbar { display: grid; grid-template-columns: minmax(320px, 1fr) auto; align-items: end; gap: 8px; margin-top: 12px; padding: 10px; border: 2px solid var(--line); border-radius: 6px; }
.listing-search { display: grid; gap: 5px; min-width: 0; }
.listing-search > span { font-size: 11px; font-weight: 800; }
.listing-search > div { position: relative; }
.listing-search b { position: absolute; top: 9px; left: 10px; }
.listing-search input { width: 100%; min-height: 40px; padding: 8px 12px 8px 34px; border: 1px solid #d4d4d4; border-radius: 5px; }
.listing-filter-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.listing-filter-row button { min-height: 34px; padding: 5px 9px; color: #111111; background: #ffffff; border: 1px solid #cfcfcf; border-radius: 4px; font-size: 11px; font-weight: 800; }
.listing-filter-row button.active { background: var(--yellow); border: 2px solid #111111; }
.listing-filter-row button b { margin-left: 4px; padding: 1px 5px; background: #ffffff; border: 1px solid #d7d7d7; border-radius: 3px; }
.listing-filter-row > span { color: var(--muted); font-size: 10px; }
.listing-table-section { margin-top: 12px; border: 2px solid var(--line); border-radius: 6px; overflow: hidden; }
.listing-table { min-width: 900px; }
.listing-table th { background: #fff6c7; }
.listing-table td { vertical-align: middle; }
.listing-table td > strong, .listing-table td > small { display: block; }
.listing-table td > small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.listing-product { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 300px; }
.listing-product img, .listing-product-placeholder { width: 48px; height: 48px; object-fit: contain; background: #f5f5f5; border: 1px solid #d8d8d8; }
.listing-product-placeholder { display: grid; place-items: center; font-size: 20px; }
.listing-product a, .listing-product strong { display: block; overflow: hidden; color: #111111; font-size: 12px; font-weight: 800; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.listing-product a:hover { text-decoration: underline; }
.listing-product small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.listing-status { display: inline-flex; min-height: 24px; align-items: center; padding: 3px 8px; border: 1px solid; font-size: 10px; font-weight: 900; }
.listing-status.submitted { color: #166534; background: #f0fdf4; border-color: #4ade80; }
.listing-status.needs-action { color: #854d0e; background: #fffbeb; border-color: #facc15; }
.listing-status.failed { color: #991b1b; background: #fff1f2; border-color: #f87171; }
.listing-status.processing { color: #1e40af; background: #eff6ff; border-color: #60a5fa; }
.listing-status-detail { display: block; max-width: 190px; margin-top: 5px; color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.listing-row-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.listing-row-actions button { min-height: 30px; padding: 5px 8px; color: #111111; background: #ffffff; border: 1px solid #111111; font-size: 10px; font-weight: 800; }
.listing-empty { margin: 12px; min-height: 240px; padding: 54px 20px; text-align: center; border: 2px dashed #111111; }
.listing-empty > strong { display: grid; width: 46px; height: 46px; margin: 0 auto 14px; place-items: center; background: var(--yellow); border: 2px solid #111111; box-shadow: 2px 2px 0 #111111; font-size: 20px; }
.listing-empty h2 { margin: 0; font-size: 14px; }
.listing-empty p { margin: 10px 0 0; font-size: 12px; }
.listing-footer { display: flex; justify-content: space-between; padding: 12px 14px; border-top: 1px solid #dddddd; font-size: 11px; }
.listing-detail-modal[hidden] { display: none; }
.listing-detail-modal { position: fixed; inset: 0; z-index: 20; }
.listing-detail-panel { position: absolute; inset: 0 0 0 auto; width: min(570px, 100vw); overflow: auto; background: #ffffff; border-left: 3px solid #111111; box-shadow: -8px 0 24px rgba(0,0,0,.16); }
.listing-detail-panel > header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; color: #ffffff; background: #111111; }
.listing-detail-panel > header span { display: block; color: var(--yellow); font-size: 9px; font-weight: 900; }
.listing-detail-panel > header h2 { margin: 4px 0 0; font-size: 20px; }
.listing-detail-panel > header button { width: 34px; height: 34px; color: #111111; background: #ffffff; border: 0; font-size: 20px; }
.listing-detail-body { padding: 20px; }
.listing-detail-product { padding-bottom: 16px; border-bottom: 1px solid #dddddd; }
.listing-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.listing-detail-grid > div { padding: 10px; background: #fafafa; border: 1px solid #dddddd; }
.listing-detail-grid span, .listing-detail-grid strong { display: block; }
.listing-detail-grid span { color: var(--muted); font-size: 9px; }
.listing-detail-grid strong { margin-top: 4px; overflow-wrap: anywhere; font-size: 11px; }
.listing-detail-body section { margin-top: 16px; padding: 12px; background: #fffdf2; border: 1px solid #d8d3b9; }
.listing-detail-body section.error { color: var(--red); background: #fff1f0; border-color: #efb4ae; }
.listing-detail-body section h3, .listing-detail-body section p { margin: 0; }
.listing-detail-body section h3 { font-size: 12px; }
.listing-detail-body section p { margin-top: 6px; font-size: 11px; line-height: 1.5; }
.listing-detail-panel > footer { display: flex; justify-content: flex-end; gap: 10px; padding: 0 20px 20px; }

@media (max-width: 1250px) {
  .listing-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .listing-toolbar { grid-template-columns: 1fr; }
  .listing-filter-row { overflow-x: auto; padding-bottom: 3px; }
}

@media (max-width: 680px) {
  .listing-workspace { padding: 10px; }
  .listing-summary { grid-template-columns: 1fr 1fr; }
  .listing-filter-row > span { display: none; }
  .listing-detail-grid { grid-template-columns: 1fr; }
}

.listing-overview {
  display: grid;
  grid-template-columns: minmax(230px, 1.25fr) repeat(3, minmax(180px, 1fr));
  gap: 12px;
}

.listing-overview-card {
  min-width: 0;
  min-height: 116px;
  padding: 16px 18px;
  color: #eef5ff;
  text-align: left;
  background: linear-gradient(145deg, rgba(25, 40, 96, 0.92), rgba(7, 14, 43, 0.94));
  border: 1px solid rgba(123, 178, 255, 0.36);
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 30px rgba(0, 0, 0, 0.18);
}

.listing-overview-card > span,
.listing-overview-card > strong,
.listing-overview-card > small {
  display: block;
}

.listing-overview-card > span {
  color: #d8e7ff;
  font-size: 14px;
  font-weight: 800;
}

.listing-overview-card > strong {
  margin-top: 8px;
  color: #ffffff;
  font-size: 31px;
  line-height: 1;
  text-shadow: 0 0 18px rgba(84, 216, 255, 0.22);
}

.listing-overview-card > small {
  margin-top: 10px;
  color: #aebfe7;
  font-size: 12px;
  line-height: 1.35;
}

.listing-overview-card > small b { color: #dff8ff; }
.listing-overview-card > small.trend-up { color: #6ff0c5; }
.listing-overview-card > small.trend-down { color: #ff8aa0; }

.listing-store-card select {
  width: 100%;
  min-height: 42px;
  margin-top: 9px;
  padding: 7px 11px;
  color: #ffffff;
  background: #07102f;
  border: 1px solid rgba(103, 224, 255, 0.62);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
  color-scheme: dark;
}

button.listing-overview-card {
  appearance: none;
  font: inherit;
  cursor: pointer;
}

button.listing-overview-card:hover,
button.listing-overview-card:focus-visible {
  border-color: #54d8ff;
  box-shadow: 0 0 0 2px rgba(84, 216, 255, 0.12), 0 0 22px rgba(84, 216, 255, 0.16);
}

.listing-failed-card.active {
  background: linear-gradient(145deg, rgba(105, 23, 53, 0.82), rgba(39, 10, 32, 0.92));
  border-color: rgba(255, 103, 137, 0.82);
}

.listing-failed-card.active > strong,
.listing-failed-card.active > small { color: #ffb4c4; }

@media (max-width: 1100px) {
  .listing-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .listing-overview { grid-template-columns: 1fr; }
}

.auto-bid-heading { min-height: 128px; }
.auto-bid-heading-actions { display: flex; gap: 12px; }
.auto-bid-heading-actions > label, .auto-bid-quota { min-width: 205px; padding: 10px 12px; color: #111111; background: #fffdf2; border: 2px solid #111111; }
.auto-bid-heading-actions > label span { display: block; margin-bottom: 5px; font-size: 10px; font-weight: 800; }
.auto-bid-heading-actions select { width: 100%; min-height: 34px; padding: 5px 8px; background: #ffffff; border: 2px solid #111111; }
.auto-bid-quota { width: 205px; }
.auto-bid-quota > div, .auto-bid-quota h3 { display: flex; align-items: center; justify-content: space-between; }
.auto-bid-quota span, .auto-bid-quota strong, .auto-bid-quota p { font-size: 9px; }
.auto-bid-quota h3 { margin: 8px 0 5px; font-size: 13px; }
.auto-bid-quota h3 small { font-size: 10px; }
.auto-bid-quota p { margin: 0 0 6px; }
.auto-bid-quota progress { width: 100%; height: 6px; accent-color: var(--green); }
.auto-bid-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.auto-bid-summary article { position: relative; min-height: 108px; padding: 15px 16px; background: #ffffff; border: 2px solid #111111; box-shadow: 4px 4px 0 #d7d7d7; }
.auto-bid-summary span, .auto-bid-summary strong, .auto-bid-summary small { display: block; }
.auto-bid-summary span { font-size: 11px; font-weight: 800; }
.auto-bid-summary strong { margin-top: 12px; font-size: 22px; }
.auto-bid-summary small { margin-top: 8px; color: var(--muted); font-size: 10px; }
.auto-bid-summary i { position: absolute; top: 15px; right: 15px; width: 10px; height: 10px; background: #999999; border: 1px solid #111111; }
.auto-bid-summary i.green { background: #16a34a; }
.auto-bid-summary i.orange { background: #d97706; }
.auto-bid-workspace { margin-top: 18px; background: #ffffff; border: 2px solid #111111; box-shadow: 4px 4px 0 #d7d7d7; }
.auto-bid-toolbar { display: grid; grid-template-columns: minmax(250px, 1.5fr) 170px 190px repeat(7, auto); gap: 8px; padding: 12px 14px; background: #fffdf2; border-bottom: 1px solid #d8d3b9; }
.auto-bid-toolbar select, .auto-bid-search input { width: 100%; min-height: 38px; padding: 7px 10px; background: #ffffff; border: 2px solid #111111; }
.auto-bid-toolbar .plain-button, .auto-bid-toolbar .yellow-button { min-height: 38px; padding-inline: 10px; white-space: nowrap; }
.auto-bid-search { position: relative; }
.auto-bid-search span { position: absolute; top: 10px; left: 12px; z-index: 1; }
.auto-bid-search input { padding-left: 34px; }
.auto-bid-table-scroll { max-height: 510px; overflow: auto; }
.auto-bid-table { min-width: 1180px; }
.auto-bid-table th { position: sticky; top: 0; z-index: 1; background: #fff6c7; }
.auto-bid-table td { vertical-align: middle; }
.bid-product { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 470px; }
.bid-product img, .bid-image-placeholder { width: 46px; height: 46px; object-fit: contain; background: #f5f5f5; border: 2px solid #111111; }
.bid-image-placeholder { display: grid; place-items: center; font-size: 18px; }
.bid-product strong, .bid-product small { display: block; }
.bid-product strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.bid-product small { margin-top: 6px; color: var(--muted); font-size: 9px; }
.bid-price { display: block; min-width: 90px; text-align: right; font-family: Consolas, monospace; }
.bid-status-detail, .auto-bid-table td > small { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; }
.bid-check-now { margin-top: 5px; padding: 2px 6px; color: #111111; background: #ffffff; border: 1px solid #111111; font-size: 9px; }
.bid-floor-button { min-width: 130px; padding: 4px 7px; text-align: left; background: transparent; border: 0; border-bottom: 1px dashed #111111; font-weight: 800; }
.bid-switch {
  position: relative;
  display: inline-block;
  width: 78px;
  height: 32px;
  cursor: pointer;
  vertical-align: middle;
}
.bid-switch input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.bid-switch span {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 2px solid #303a66;
  border-radius: 999px;
  background:
    radial-gradient(circle at 72% 31%, rgba(174, 183, 255, .85) 0 1px, transparent 1.5px),
    radial-gradient(circle at 57% 68%, rgba(255, 255, 255, .7) 0 1px, transparent 1.4px),
    radial-gradient(circle at 88% 62%, rgba(132, 154, 255, .75) 0 1px, transparent 1.5px),
    linear-gradient(112deg, #080e25 0%, #10163d 48%, #171343 100%);
  box-shadow:
    inset 0 0 0 3px rgba(5, 9, 29, .78),
    inset 0 0 13px rgba(98, 99, 213, .2),
    0 4px 12px rgba(0, 0, 0, .36);
  transition: border-color .28s ease, background .28s ease, box-shadow .28s ease;
}
.bid-switch span::before {
  content: "";
  position: absolute;
  inset: 4px 7px 4px 26px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 58% 50%, rgba(100, 69, 238, .46), transparent 49%),
    radial-gradient(circle at 18% 28%, #ffffff 0 1px, transparent 1.5px),
    radial-gradient(circle at 42% 72%, #a5b8ff 0 1px, transparent 1.4px),
    radial-gradient(circle at 67% 24%, #ffffff 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 57%, #b7c6ff 0 1px, transparent 1.5px);
  opacity: .72;
  transition: inset .28s ease, opacity .28s ease, filter .28s ease;
}
.bid-switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 4px;
  width: 22px;
  height: 22px;
  border: 1px solid #7985b3;
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 32%, rgba(27, 37, 76, .72) 0 8%, transparent 9%),
    radial-gradient(circle at 68% 61%, rgba(26, 34, 69, .68) 0 11%, transparent 12%),
    radial-gradient(circle at 56% 21%, rgba(25, 34, 70, .58) 0 6%, transparent 7%),
    radial-gradient(circle at 36% 68%, rgba(132, 143, 185, .34) 0 9%, transparent 10%),
    radial-gradient(circle at 39% 34%, #7783aa 0%, #515c84 38%, #313b65 72%, #202949 100%);
  box-shadow:
    inset -4px -4px 7px rgba(5, 10, 30, .58),
    inset 3px 3px 5px rgba(180, 190, 229, .18),
    0 0 8px rgba(98, 120, 210, .34);
  transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}
.bid-switch input:checked + span {
  border-color: #637cff;
  background:
    radial-gradient(circle at 19% 35%, #d7ddff 0 1px, transparent 1.7px),
    radial-gradient(circle at 41% 67%, #ffffff 0 1px, transparent 1.6px),
    radial-gradient(circle at 60% 27%, #8ed5ff 0 1px, transparent 1.7px),
    linear-gradient(110deg, #0b37a8 0%, #352bc4 50%, #6e3dc1 100%);
  box-shadow:
    inset 0 0 0 3px rgba(10, 20, 78, .66),
    inset 0 0 15px rgba(74, 198, 255, .45),
    0 0 10px rgba(64, 104, 255, .62),
    0 4px 14px rgba(0, 0, 0, .4);
}
.bid-switch input:checked + span::before {
  inset: 4px 27px 4px 7px;
  opacity: 1;
  filter: saturate(1.25) brightness(1.15);
}
.bid-switch input:checked + span::after {
  transform: translateX(44px);
  border-color: #fff1b1;
  background:
    radial-gradient(circle at 30% 30%, rgba(181, 123, 43, .45) 0 8%, transparent 9%),
    radial-gradient(circle at 67% 61%, rgba(181, 121, 38, .42) 0 11%, transparent 12%),
    radial-gradient(circle at 57% 21%, rgba(189, 132, 49, .38) 0 6%, transparent 7%),
    radial-gradient(circle at 37% 69%, rgba(255, 245, 196, .42) 0 9%, transparent 10%),
    radial-gradient(circle at 38% 34%, #fff7cd 0%, #f8d77d 42%, #dc9f3d 74%, #a76125 100%);
  box-shadow:
    inset -4px -4px 7px rgba(132, 72, 20, .38),
    inset 3px 3px 5px rgba(255, 255, 224, .66),
    0 0 7px #fff1a7,
    0 0 14px rgba(255, 186, 70, .86);
}
.bid-switch input:focus-visible + span {
  outline: 2px solid #b9c8ff;
  outline-offset: 3px;
}
.auto-bid-empty { min-height: 220px; padding: 70px 20px; text-align: center; }
.auto-bid-empty strong { font-size: 14px; }
.auto-bid-empty p { color: var(--muted); font-size: 11px; }
.auto-bid-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #fffdf2; border-top: 2px solid #111111; font-size: 11px; }
.auto-bid-footer button { width: 30px; height: 30px; margin: 0 7px; background: #ffffff; border: 1px solid #aaaaaa; }
.bid-small-modal { position: absolute; top: 50%; left: 50%; width: min(430px, calc(100vw - 24px)); transform: translate(-50%, -50%); background: #ffffff; border: 2px solid #111111; box-shadow: 6px 6px 0 #111111; }
.bid-small-modal header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; color: #ffffff; background: #111111; }
.bid-small-modal header h2 { margin: 0; font-size: 16px; }
.bid-small-modal header button { width: 30px; height: 30px; background: #ffffff; border: 0; }
.bid-small-modal form { display: grid; gap: 14px; padding: 16px; }
.bid-small-modal form p { margin: 0; font-size: 11px; line-height: 1.5; }
.bid-small-modal form label { display: grid; gap: 5px; font-size: 11px; font-weight: 800; }
.bid-small-modal form input { min-height: 40px; padding: 7px 9px; border: 2px solid #111111; }
.bid-small-modal form > div { display: flex; justify-content: flex-end; gap: 8px; }
.bid-log-list { padding: 18px; }
.bid-log-list article { padding: 12px 0; border-bottom: 1px solid #dddddd; }
.bid-log-list article > div { display: flex; justify-content: space-between; gap: 10px; }
.bid-log-list article strong { font-size: 12px; }
.bid-log-list article span, .bid-log-list article small { color: var(--muted); font-size: 9px; }
.bid-log-list article p { margin: 7px 0; font-size: 11px; }
.bid-log-empty { padding: 60px 20px; text-align: center; color: var(--muted); }

@media (max-width: 1500px) {
  .auto-bid-toolbar { grid-template-columns: minmax(240px, 1fr) 140px 160px repeat(3, auto); }
  .auto-bid-toolbar button:nth-of-type(n+4) { grid-row: 2; }
}

@media (max-width: 1000px) {
  .auto-bid-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .auto-bid-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .auto-bid-search { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .auto-bid-heading-actions { width: 100%; flex-direction: column; }
  .auto-bid-heading-actions > label, .auto-bid-quota { width: 100%; }
  .auto-bid-summary { grid-template-columns: 1fr 1fr; }
  .auto-bid-toolbar { grid-template-columns: 1fr 1fr; }
  .auto-bid-toolbar button:nth-of-type(n) { grid-row: auto; }
}

.dashboard-main { width: min(100%, 1700px); margin-top: 28px; }
.dashboard-hero { display: flex; min-height: 152px; align-items: center; justify-content: space-between; gap: 28px; padding: 22px 24px; color: #ffffff; background: #111111; border-radius: 5px; box-shadow: 5px 5px 0 #d7d7d7; }
.dashboard-hero h1 { margin: 12px 0 8px; font-size: 34px; }
.dashboard-hero .eyebrow { display: inline-block; padding: 6px 9px; color: #111111; background: #ffffff; border-bottom: 3px solid var(--yellow); border-radius: 3px; font: 800 11px/1 Consolas, monospace; }
.dashboard-hero > p { max-width: 560px; margin: 0; font-size: 13px; font-weight: 700; line-height: 1.65; text-align: right; }
.dashboard-hero-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.dashboard-hero-pills span { padding: 5px 8px; color: #111111; background: #ffffff; border-radius: 3px; font-size: 10px; font-weight: 800; }

.dashboard-onboarding { margin-top: 18px; padding: 16px; background: #fffdf2; border: 2px solid #111111; border-radius: 5px; }
.dashboard-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dashboard-section-heading h2, .dashboard-panel h2 { margin: 0; font-size: 16px; }
.dashboard-section-heading p, .dashboard-panel header p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.dashboard-section-heading > strong { padding: 5px 8px; background: #fff6c7; border: 1px solid #d97706; border-radius: 3px; font-size: 11px; }
.onboarding-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.onboarding-step { display: flex; min-height: 218px; flex-direction: column; padding: 15px; background: #ffffff; border: 2px solid #111111; border-radius: 5px; box-shadow: 3px 3px 0 #e1e1dc; }
.onboarding-step.completed { background: #f7fff0; border-color: #7b9300; }
.onboarding-step-top { display: flex; align-items: center; gap: 8px; }
.onboarding-step-top i { display: grid; width: 36px; height: 36px; place-items: center; border: 2px solid #111111; border-radius: 3px; font-style: normal; }
.onboarding-step.completed .onboarding-step-top i { background: #dfff9b; border-color: #557300; }
.onboarding-step-top b { color: #4b5563; font-size: 10px; }
.onboarding-step-top span { margin-left: auto; padding: 4px 7px; color: #4b5563; background: #f6f6f3; border: 1px solid #dedede; border-radius: 3px; font-size: 9px; }
.onboarding-step.completed .onboarding-step-top span { color: #06702e; background: #ecfff2; border-color: #30a05c; }
.onboarding-step h3 { margin: 17px 0 0; font-size: 12px; }
.onboarding-step p { flex: 1; margin: 10px 0 14px; color: #333333; font-size: 10px; line-height: 1.7; }
.onboarding-step .button-link { min-height: 38px; justify-content: center; padding: 0 11px; border: 1px solid #cccccc; border-radius: 4px; font-size: 10px; font-weight: 800; }
.onboarding-step .yellow-button.button-link { border: 2px solid #111111; }

.dashboard-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.dashboard-kpis article { display: flex; min-height: 126px; justify-content: space-between; padding: 15px; background: #ffffff; border: 1px solid #bcbcbc; border-left: 4px solid #111111; border-radius: 5px; }
.dashboard-kpis span, .dashboard-kpis b, .dashboard-kpis small { display: block; }
.dashboard-kpis span { color: var(--muted); font-size: 11px; font-weight: 800; }
.dashboard-kpis b { margin-top: 12px; font-size: 26px; }
.dashboard-kpis small { margin-top: 8px; color: #404040; font-size: 10px; }
.dashboard-kpis i { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #bcbcbc; border-radius: 5px; font-style: normal; }

.dashboard-primary-grid, .dashboard-secondary-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(310px, 1fr); gap: 14px; margin-top: 18px; }
.dashboard-moon-panel {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  background: #030817;
}
.dashboard-moon-panel img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: cover;
}
.dashboard-action-wide { margin-top: 18px; }
.dashboard-action-wide .action-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 18px;
}
.dashboard-panel { min-width: 0; background: #ffffff; border: 1px solid #dddddd; border-radius: 5px; }
.dashboard-panel > header { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-bottom: 1px solid #eeeeee; }
.dashboard-panel > header .plain-button { min-height: 36px; padding: 0 12px; border-radius: 4px; font-size: 10px; font-weight: 800; }
.segmented { display: flex; padding: 3px; background: #f4f4f1; border: 1px solid #d5d5d0; border-radius: 4px; }
.segmented button { min-width: 58px; height: 32px; background: transparent; border: 0; }
.segmented button.active { background: #ffffff; border: 2px solid #111111; box-shadow: 2px 2px 0 #111111; }
.chart-legend { display: flex; gap: 22px; padding: 12px 16px 0; font-size: 10px; }
.chart-legend span::before { display: inline-block; width: 24px; margin-right: 8px; border-top: 3px solid #111111; content: ""; vertical-align: middle; }
.chart-legend .quantity::before { border-top: 2px dashed #6b7280; }
.sales-chart { min-height: 280px; padding: 8px 12px 12px; }
.sales-chart svg { display: block; width: 100%; height: 250px; overflow: visible; }
.sales-chart text { fill: #374151; font-size: 10px; letter-spacing: 0; }
.chart-axis { stroke: #111111; stroke-width: 2; }
.chart-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.revenue-line { stroke: #111111; stroke-width: 3; }
.quantity-line { stroke: #6b7280; stroke-width: 2; stroke-dasharray: 7 6; }
.sales-chart circle { fill: #111111; stroke: #ffffff; stroke-width: 2; }
.sales-chart .quantity-point { fill: #ffffff; stroke: #6b7280; }

.action-panel > header > strong { padding: 4px 7px; background: #f5f5f2; border: 1px solid #dddddd; border-radius: 3px; font-size: 10px; }
.action-list { min-height: 280px; padding: 8px 14px 14px; }
.action-list > a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 13px 0; color: #111111; border-bottom: 1px solid #eeeeee; text-decoration: none; }
.action-list > a > i { display: grid; width: 32px; height: 32px; place-items: center; background: #f8f8f5; border: 1px solid #dddddd; border-radius: 4px; font-style: normal; }
.action-list span strong, .action-list span small { display: block; }
.action-list span strong { font-size: 11px; }
.action-list span small { margin-top: 5px; color: var(--muted); font-size: 9px; }

.dashboard-secondary-grid { grid-template-columns: minmax(0, 3fr) minmax(310px, 1fr); }
.hot-product-list, .activity-list { min-height: 205px; padding: 12px 16px; }
.hot-product-list article { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #eeeeee; }
.hot-product-list article > b { display: grid; width: 26px; height: 26px; place-items: center; background: #fff6c7; border: 1px solid #111111; border-radius: 3px; }
.hot-product-list span strong, .hot-product-list span small { display: block; }
.hot-product-list span strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.hot-product-list span small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.hot-product-list article > span:last-child { min-width: 90px; text-align: right; }
.activity-list > a, .activity-list > article { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px 0; color: #111111; border-bottom: 1px solid #eeeeee; text-decoration: none; }
.activity-list i { display: grid; width: 28px; height: 28px; place-items: center; background: #f8f8f5; border: 1px solid #dddddd; border-radius: 50%; font-style: normal; }
.activity-list span strong, .activity-list span small { display: block; }
.activity-list span strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.activity-list span small, .activity-list time { margin-top: 4px; color: var(--muted); font-size: 8px; }
.dashboard-empty { display: grid; min-height: 180px; place-items: center; align-content: center; padding: 24px; text-align: center; border: 1px dashed #d5d5d5; }
.dashboard-empty.compact { min-height: 250px; border: 0; }
.dashboard-empty i { display: grid; width: 40px; height: 40px; place-items: center; margin-bottom: 10px; background: #f8f8f5; border: 1px solid #dddddd; border-radius: 5px; font-style: normal; }
.dashboard-empty strong { font-size: 11px; }
.dashboard-empty p { max-width: 440px; margin: 10px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }

@media (max-width: 1200px) {
  .onboarding-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-kpis { grid-template-columns: 1fr 1fr; }
  .dashboard-primary-grid, .dashboard-secondary-grid { grid-template-columns: 1fr; }
  .dashboard-action-wide .action-list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .dashboard-main { padding-inline: 12px; }
  .dashboard-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 18px; }
  .dashboard-hero h1 { font-size: 28px; }
  .dashboard-hero > p { text-align: left; }
  .dashboard-section-heading { flex-direction: column; }
  .onboarding-grid, .dashboard-kpis { grid-template-columns: 1fr; }
  .onboarding-step { min-height: 198px; }
  .dashboard-primary-grid, .dashboard-secondary-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-moon-panel,
  .dashboard-moon-panel img { min-height: 320px; }
  .dashboard-action-wide .action-list { grid-template-columns: 1fr; }
  .dashboard-panel > header { align-items: flex-start; flex-direction: column; }
  .sales-chart { min-height: 230px; overflow-x: auto; }
  .sales-chart svg { width: 720px; height: 220px; }
  .hot-product-list article { grid-template-columns: 28px minmax(0, 1fr); }
  .hot-product-list article > span:last-child { grid-column: 2; text-align: left; }
}

.products-main { width: min(100%, 1700px); margin-top: 28px; }
.products-hero { display: flex; min-height: 116px; align-items: center; justify-content: space-between; gap: 22px; padding: 20px 24px; color: #ffffff; background: #111111; border-radius: 5px 5px 0 0; }
.products-hero h1 { margin: 12px 0 0; font-size: 30px; }
.products-hero .eyebrow { display: inline-block; padding: 6px 9px; color: #111111; background: #ffffff; border-bottom: 3px solid var(--yellow); border-radius: 3px; font: 800 11px/1 Consolas, monospace; }
.products-hero-actions { display: grid; grid-template-columns: 220px minmax(300px, 540px) auto; align-items: center; gap: 10px; flex: 1; justify-content: end; }
.products-hero-actions select, .products-search input { width: 100%; min-height: 40px; padding: 8px 10px; background: #ffffff; border: 2px solid #111111; }
.products-search { position: relative; }
.products-search span { position: absolute; top: 10px; left: 12px; color: #555555; }
.products-search input { padding-left: 34px; }
.products-hero-actions button { min-height: 40px; white-space: nowrap; }

.product-filters { padding: 12px; background: #fffdf2; border: 2px solid #111111; border-top: 0; box-shadow: 5px 5px 0 #d7d7d7; }
.product-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 10px; }
.product-filter-heading span { color: var(--muted); }
.product-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 8px; }
.product-filter-grid button { display: flex; min-height: 40px; align-items: center; justify-content: space-between; padding: 8px 12px; background: #ffffff; border: 2px solid #111111; text-align: left; }
.product-filter-grid button.active { background: var(--yellow); box-shadow: 2px 2px 0 #111111; }
.product-filter-grid button b { min-width: 24px; padding: 2px 5px; background: #fffdf2; border: 1px solid #ded8bc; text-align: center; font-size: 9px; }

.products-workspace { margin-top: 18px; min-width: 0; background: #ffffff; border: 2px solid #111111; box-shadow: 5px 5px 0 #d7d7d7; }
.products-meta { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; background: #fffdf2; border-bottom: 1px solid #d8d3b9; font-size: 10px; font-weight: 700; }
#products-save-status { color: #116b38; text-align: right; }
.products-table-scroll { max-width: 100%; max-height: 530px; overflow: auto; }
.products-table { min-width: 1840px; border-collapse: separate; border-spacing: 0; }
.products-table th, .products-table td { padding: 10px 12px; border-bottom: 1px solid #e4e4e4; vertical-align: middle; font-size: 10px; text-align: left; }
.products-table th { position: sticky; top: 0; z-index: 3; height: 44px; background: #fff6c7; white-space: nowrap; }
.products-table th button { padding: 0; background: transparent; border: 0; font: inherit; font-weight: 800; }
.products-table td { height: 92px; background: #ffffff; }
.products-table td > strong, .products-table td > small { display: block; }
.products-table td > small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.products-table [hidden] { display: none; }
.product-sticky-cell { position: sticky; left: 0; z-index: 2; width: 380px; min-width: 380px; border-right: 2px solid #111111; }
.products-table th:first-child { left: 0; z-index: 4; min-width: 380px; border-right: 2px solid #111111; }
.managed-product { display: grid; grid-template-columns: 52px minmax(0, 1fr) 48px; align-items: center; gap: 10px; }
.managed-product img, .product-image-placeholder { display: grid; width: 52px; height: 52px; place-items: center; object-fit: contain; background: #f5f5f2; border: 2px solid #111111; }
.managed-product a, .managed-product strong { display: block; overflow: hidden; color: #111111; font-size: 11px; font-weight: 800; line-height: 1.35; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.managed-product small { display: block; margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.product-row-save { min-height: 32px; padding: 4px; color: #777777; background: #f5f5f2; border: 1px solid #cccccc; font-size: 9px; }
.product-row-save.dirty { color: #111111; background: var(--yellow); border: 2px solid #111111; }
.managed-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border: 1px solid #cfcfcf; white-space: nowrap; }
.managed-status i { width: 9px; height: 9px; background: #999999; border: 1px solid #111111; border-radius: 50%; }
.managed-status.green i { background: #19ad6a; }
.managed-status.orange i { background: #f2a713; }
.managed-status.red i { background: #df3737; }
.managed-number-field, .managed-money-field { display: flex; min-width: 120px; align-items: center; gap: 5px; }
.managed-number-field { flex-direction: column; align-items: stretch; }
.managed-number-field input, .managed-money-field input { width: 104px; height: 38px; padding: 6px 8px; background: #fffdf2; border: 2px solid #111111; text-align: right; font: 700 10px Consolas, monospace; }
.managed-number-field input:disabled { color: #777777; background: #eeeeee; }
.managed-number-field small { color: var(--muted); font-size: 8px; text-align: center; }
.managed-money-field span { font: 700 9px Consolas, monospace; }

/* Product management is a dense working table; keep every operational value readable. */
.products-workspace .products-meta {
  min-height: 52px;
  font-size: 13px;
  line-height: 1.5;
}
.products-workspace .products-table th,
.products-workspace .products-table td {
  padding: 13px 14px;
  font-size: 12px;
  line-height: 1.45;
}
.products-workspace .products-table th {
  height: 50px;
  font-size: 12px;
  font-weight: 800;
}
.products-workspace .products-table td {
  height: 104px;
}
.products-workspace .products-table td > small {
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.45;
}
.products-workspace .managed-product a,
.products-workspace .managed-product strong {
  font-size: 13px;
  line-height: 1.4;
}
.products-workspace .managed-product small {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.45;
}
.products-workspace .product-row-save {
  min-height: 36px;
  font-size: 11px;
}
.products-workspace .managed-status {
  padding: 5px 8px;
  font-size: 11px;
}
.products-workspace .managed-number-field input,
.products-workspace .managed-money-field input {
  height: 42px;
  font-size: 12px;
}
.products-workspace .managed-number-field small {
  font-size: 10px;
  line-height: 1.4;
}
.products-workspace .managed-money-field span {
  font-size: 11px;
}
.products-workspace .metric-unavailable {
  color: #ffcf66;
  font-size: 11px;
  font-weight: 700;
}
.products-empty { min-height: 270px; padding: 90px 20px; text-align: center; }
.products-empty strong { font-size: 13px; }
.products-empty p { color: var(--muted); font-size: 10px; }
.products-footer { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #fffdf2; border-top: 2px solid #111111; font-size: 10px; }
.products-footer button { width: 32px; height: 32px; margin: 0 8px; background: #ffffff; border: 1px solid #aaaaaa; }
.product-columns-modal { width: min(620px, calc(100vw - 24px)); }
.product-columns-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; }
.product-columns-grid label { display: flex !important; min-height: 38px; align-items: center; gap: 8px; padding: 8px; border: 1px solid #cccccc; }
.product-columns-grid input { width: 16px; min-height: 16px !important; }

@media (max-width: 1250px) {
  .products-hero { align-items: flex-start; flex-direction: column; }
  .products-hero-actions { width: 100%; grid-template-columns: 190px minmax(220px, 1fr) auto; }
  .product-filter-grid { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
}

@media (max-width: 680px) {
  .products-main { padding-inline: 12px; }
  .products-hero { padding: 18px; }
  .products-hero h1 { font-size: 27px; }
  .products-hero-actions { grid-template-columns: 1fr 1fr; }
  .products-search { grid-column: 1 / -1; grid-row: 1; }
  .products-hero-actions select { grid-column: 1 / -1; }
  .product-filter-heading { align-items: flex-start; flex-direction: column; }
  .product-filter-grid { display: flex; overflow-x: auto; padding-bottom: 3px; }
  .product-filter-grid button { min-width: 128px; }
  .products-meta { align-items: flex-start; flex-direction: column; }
  #products-save-status { text-align: left; }
  .product-sticky-cell, .products-table th:first-child { width: 290px; min-width: 290px; }
  .managed-product { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .managed-product img, .product-image-placeholder { width: 44px; height: 44px; }
  .product-columns-grid { grid-template-columns: 1fr 1fr; }
}

.orders-main { width: min(100%, 1650px); margin-top: 28px; }
.orders-hero { display: flex; min-height: 120px; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; color: #ffffff; background: #111111; border-radius: 5px 5px 0 0; }
.orders-hero h1 { margin: 12px 0 0; font-size: 30px; }
.orders-hero .eyebrow { display: inline-block; padding: 6px 9px; color: #111111; background: var(--yellow); border-bottom: 3px solid #ffffff; border-radius: 3px; font: 800 11px/1 Consolas, monospace; }
.orders-hero-status { display: grid; grid-template-columns: 10px auto; align-items: center; gap: 4px 8px; min-width: 210px; padding: 12px 14px; color: #111111; background: #fffdf2; border: 2px solid #ffffff; box-shadow: 3px 3px 0 var(--yellow); }
.orders-hero-status > span { width: 9px; height: 9px; background: #19ad6a; border: 1px solid #111111; border-radius: 50%; }
.orders-hero-status > span.warning { background: #f2a713; }
.orders-hero-status strong { font-size: 11px; }
.orders-hero-status small { grid-column: 2; color: var(--muted); font-size: 9px; }

.orders-workspace { padding: 18px 20px 20px; background: #ffffff; border: 2px solid #111111; border-top: 0; box-shadow: 5px 5px 0 #d7d7d7; }
.orders-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.orders-kpis article { position: relative; min-height: 116px; padding: 16px 58px 14px 16px; border: 1px solid #d8d8d8; border-radius: 5px; }
.orders-kpis span, .orders-kpis b, .orders-kpis small { display: block; }
.orders-kpis span { color: var(--muted); font-size: 11px; }
.orders-kpis b { margin-top: 14px; font-size: 25px; }
.orders-kpis small { margin-top: 9px; color: #444444; font-size: 9px; }
.orders-kpis i { position: absolute; top: 16px; right: 16px; display: grid; width: 36px; height: 36px; place-items: center; background: #f8f8f5; border: 1px solid #d0d0d0; border-radius: 5px; font-style: normal; }

.orders-filters { display: grid; grid-template-columns: 210px 210px minmax(280px, 1fr) auto auto auto; align-items: end; gap: 8px; margin-top: 18px; padding: 12px; background: #fffdf2; border: 2px solid #111111; border-radius: 5px; }
.orders-filters label { display: grid; gap: 6px; min-width: 0; }
.orders-filters label > span { font-size: 10px; font-weight: 800; }
.orders-filters select, .orders-filters input { width: 100%; min-height: 40px; padding: 8px 10px; background: #ffffff; border: 1px solid #cfcfcf; border-radius: 4px; }
.orders-search > div { position: relative; }
.orders-search b { position: absolute; top: 10px; left: 11px; z-index: 1; }
.orders-search input { padding-left: 34px; }
.orders-filters button { min-height: 40px; white-space: nowrap; }
.orders-filter-count { grid-column: 1 / -1; min-height: 22px; align-self: center; padding-top: 4px; color: var(--muted); font-size: 10px; }

.orders-content-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(340px, 1fr); gap: 14px; margin-top: 18px; }
.orders-list-panel, .order-detail-panel { min-width: 0; border: 2px solid #111111; border-radius: 5px; overflow: hidden; }
.orders-table-scroll { max-height: 520px; overflow: auto; }
.orders-table { width: 100%; min-width: 940px; border-collapse: separate; border-spacing: 0; }
.orders-table th, .orders-table td { padding: 12px; border-bottom: 1px solid #e3e3e3; font-size: 10px; text-align: left; }
.orders-table th { position: sticky; top: 0; z-index: 2; background: #fff6c7; white-space: nowrap; }
.orders-table td { height: 68px; }
.orders-table tbody tr { cursor: pointer; outline: 0; }
.orders-table tbody tr:hover td, .orders-table tbody tr:focus td { background: #fffdf2; }
.orders-table tbody tr.selected td { background: #fff1a6; }
.orders-table td strong, .orders-table td small { display: block; }
.orders-table td small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.order-status { display: inline-block; max-width: 160px; overflow: hidden; padding: 5px 7px; border: 1px solid #cfcfcf; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.order-status.green { color: #0e6f3d; background: #eafff1; border-color: #91c9aa; }
.order-status.orange { color: #8b4b00; background: #fff6dc; border-color: #e6bd66; }
.order-status.red { color: #9c2727; background: #fff0ef; border-color: #e2a29c; }
.orders-list-footer { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: #fffdf2; border-top: 2px solid #111111; color: var(--muted); font-size: 9px; }
#orders-list-status { max-width: 70%; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.orders-empty, .order-detail-empty { display: grid; min-height: 310px; place-items: center; align-content: center; padding: 30px; text-align: center; }
.orders-empty i, .order-detail-empty i { display: grid; width: 44px; height: 44px; place-items: center; margin-bottom: 14px; background: var(--yellow); border: 2px solid #111111; border-radius: 5px; font-style: normal; box-shadow: 2px 2px 0 #111111; }
.orders-empty strong, .order-detail-empty strong { font-size: 12px; }
.orders-empty p, .order-detail-empty p { max-width: 360px; margin: 10px 0 16px; color: var(--muted); font-size: 9px; line-height: 1.6; }

.order-detail-panel { align-self: start; background: #ffffff; }
.order-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px; color: #ffffff; background: #111111; }
.order-detail-header small { color: #cfcfcf; font-size: 8px; }
.order-detail-header h2 { margin: 5px 0 0; font-size: 17px; overflow-wrap: anywhere; }
.order-detail-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #dddddd; border-bottom: 1px solid #dddddd; }
.order-detail-facts span { min-width: 0; padding: 12px; color: var(--muted); background: #ffffff; font-size: 8px; }
.order-detail-facts strong { display: block; margin-top: 5px; overflow-wrap: anywhere; color: #111111; font-size: 10px; }
.order-reconciliation { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 1px; background: #dddddd; border-bottom: 1px solid #dddddd; }
.order-reconciliation span { padding: 11px; color: var(--muted); background: #ffffff; font-size: 8px; }
.order-reconciliation strong { display: block; margin-top: 4px; color: #111111; font-size: 11px; }
.order-reconciliation small { grid-column: 1 / -1; padding: 8px 11px; color: #116b38; background: #f1fff5; font-size: 8px; font-weight: 700; }
.order-items { max-height: 470px; overflow: auto; padding: 14px; }
.order-items h3 { margin: 0 0 10px; font-size: 12px; }
.order-items article { padding: 12px; background: #fffdf2; border: 1px solid #d8d3b9; }
.order-items article + article { margin-top: 10px; }
.order-item-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.order-item-title strong { font-size: 10px; line-height: 1.45; }
.order-item-title a { flex: 0 0 auto; color: #006ec8; font-size: 8px; text-decoration: none; }
.order-item-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.order-item-grid span { min-width: 0; color: var(--muted); font-size: 8px; }
.order-item-grid b { display: block; margin-top: 3px; overflow-wrap: anywhere; color: #111111; font-size: 9px; }
.order-reconciliation-items { padding: 0 14px 14px; }
.order-reconciliation-items h3 { margin: 0 0 10px; font-size: 12px; }
.order-reconciliation-items article { padding: 12px; background: #fffdf2; border: 1px solid #d8d3b9; }
.order-reconciliation-items article + article { margin-top: 8px; }
.order-reconciliation-items article > strong { display: block; margin-bottom: 10px; font-size: 10px; }
.order-reconciliation-items article > div { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.order-reconciliation-items span { color: var(--muted); font-size: 8px; }
.order-reconciliation-items b { display: block; margin-top: 3px; color: #111111; font-size: 9px; }

@media (max-width: 1250px) {
  .orders-filters { grid-template-columns: 180px 180px minmax(240px, 1fr) auto auto; }
  .orders-filters #orders-sync { grid-column: 1 / -1; justify-self: end; }
  .orders-content-grid { grid-template-columns: 1fr; }
  .order-detail-panel { min-height: 0; }
}

@media (max-width: 800px) {
  .orders-kpis { grid-template-columns: 1fr 1fr; }
  .orders-filters { grid-template-columns: 1fr 1fr; }
  .orders-search { grid-column: 1 / -1; }
  .orders-filter-count { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .orders-main { padding-inline: 12px; }
  .orders-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 18px; }
  .orders-hero h1 { font-size: 27px; }
  .orders-hero-status { width: 100%; }
  .orders-workspace { padding: 12px; }
  .orders-kpis { grid-template-columns: 1fr 1fr; }
  .orders-kpis article { min-height: 104px; padding: 13px 46px 12px 12px; }
  .orders-kpis b { font-size: 20px; }
  .orders-kpis i { top: 12px; right: 12px; width: 30px; height: 30px; }
  .orders-filters { grid-template-columns: 1fr 1fr; }
  .orders-filters .orders-search, .orders-filters #orders-sync, .orders-filter-count { grid-column: 1 / -1; }
  .orders-filters #orders-sync { width: 100%; }
  .orders-content-grid { grid-template-columns: minmax(0, 1fr); }
  .orders-table-scroll { max-height: 440px; }
  .orders-list-footer { align-items: flex-start; flex-direction: column; }
  #orders-list-status { max-width: 100%; text-align: left; }
  .order-detail-facts, .order-item-grid, .order-reconciliation, .order-reconciliation-items article > div { grid-template-columns: 1fr; }
}

/* v0.2.101 shared cosmic glass theme */
:root {
  color-scheme: dark;
  --black: #05091f;
  --ink: #eef5ff;
  --muted: #94a7d6;
  --line: rgba(142, 178, 255, 0.28);
  --soft-line: rgba(142, 178, 255, 0.16);
  --paper: rgba(14, 22, 58, 0.78);
  --warm: rgba(11, 18, 50, 0.78);
  --yellow: #54d8ff;
  --blue: #5faeff;
  --green: #66f3c2;
  --red: #ff7187;
  --violet: #9c6bff;
  --pink: #ff7bd5;
  --glass: linear-gradient(155deg, rgba(25, 38, 94, 0.78), rgba(9, 15, 45, 0.72));
  --glass-soft: linear-gradient(155deg, rgba(23, 35, 84, 0.6), rgba(8, 14, 42, 0.56));
  --glow-shadow: 0 18px 55px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 30px rgba(84, 216, 255, 0.07);
}

html {
  min-height: 100%;
  background: #05091f;
}

body {
  position: relative;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 8%, rgba(70, 100, 255, 0.26), transparent 31rem),
    radial-gradient(circle at 83% 13%, rgba(178, 76, 255, 0.2), transparent 32rem),
    radial-gradient(circle at 55% 92%, rgba(31, 171, 255, 0.12), transparent 35rem),
    linear-gradient(145deg, #05091f 0%, #070b25 46%, #10072a 100%);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(90, 214, 255, 0.48) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(177, 136, 255, 0.42) 0 1px, transparent 1.7px);
  background-position: 0 0, 37px 52px, 124px 26px;
  background-size: 190px 190px, 250px 250px, 320px 320px;
  opacity: 0.72;
  animation: none;
}

body::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 0 42%, rgba(3, 6, 24, 0.22) 72%, rgba(2, 4, 17, 0.72) 100%);
}

@keyframes cosmicStarDrift {
  to { background-position: 90px 190px, -42px 262px, 192px 342px; }
}

#cosmic-meteor-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.86;
}

.sidebar,
.app-shell {
  position: relative;
  z-index: 2;
}

.store-modal,
.listing-detail-modal,
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.sidebar {
  position: fixed;
  width: 224px;
  padding: 16px 14px;
  background: linear-gradient(165deg, rgba(10, 17, 49, 0.94), rgba(7, 10, 31, 0.9));
  border-right: 1px solid rgba(123, 195, 255, 0.25);
  box-shadow: 16px 0 50px rgba(0, 0, 0, 0.22), inset -1px 0 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: none;
}

.brand {
  min-height: 58px;
  padding: 0 8px 16px;
  border-bottom-color: rgba(157, 185, 255, 0.16);
}

.brand-mark {
  width: 42px;
  height: 42px;
  color: #f4fbff;
  background: linear-gradient(145deg, rgba(29, 221, 255, 0.92), rgba(92, 68, 255, 0.95) 55%, rgba(196, 75, 255, 0.92));
  border: 1px solid rgba(139, 227, 255, 0.84);
  border-radius: 8px;
  box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.34), 0 0 22px rgba(84, 216, 255, 0.4);
  font: 800 11px/1 "Segoe UI", sans-serif;
}

.brand strong { color: #f5f8ff; font-size: 16px; }
.brand small { color: #8ea5d9; font-size: 10px; }
.nav-label { color: #7488b6; }
.sidebar nav { gap: 7px; }

.sidebar nav a {
  min-height: 43px;
  color: #cddaff;
  border-radius: 8px;
}

.sidebar nav a span {
  color: #65dfff;
  text-shadow: 0 0 12px rgba(84, 216, 255, 0.68);
}

.sidebar nav a:hover {
  color: #ffffff;
  background: rgba(94, 137, 255, 0.12);
  border-color: rgba(111, 180, 255, 0.18);
}

.sidebar nav a.active {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(84, 216, 255, 0.2), rgba(156, 107, 255, 0.18));
  border-color: rgba(106, 214, 255, 0.48);
  box-shadow: inset 0 0 18px rgba(90, 216, 255, 0.09), 0 0 18px rgba(91, 107, 255, 0.12);
}

.sidebar nav a.active span { color: #7ce8ff; }
.sidebar-version { color: #667ba9; }
.app-shell { margin-left: 224px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  min-height: 64px;
  padding: 9px 28px;
  background: rgba(6, 11, 35, 0.76);
  border-bottom: 1px solid rgba(125, 172, 255, 0.22);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.17);
  backdrop-filter: none;
}

.metric {
  min-width: 124px;
  padding: 8px 11px;
  color: #dce8ff;
  background: rgba(17, 27, 68, 0.6);
  border: 1px solid rgba(116, 159, 255, 0.24);
  border-radius: 8px;
}

.metric b { color: #f5f9ff; font-size: 12px; }
.metric small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.account { border-left-color: rgba(144, 177, 255, 0.18); }
.account strong { color: #f2f6ff; }
.account small { color: var(--muted); }

.plain-button,
.notice-button,
.yellow-button,
.row-actions button,
.listing-row-actions button,
.bid-check-now {
  color: #eaf2ff;
  background: rgba(11, 22, 59, 0.86);
  border: 1px solid rgba(111, 180, 255, 0.42);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 14px rgba(63, 120, 255, 0.1);
}

.plain-button:hover,
.notice-button:hover,
.row-actions button:hover,
.listing-row-actions button:hover {
  color: #ffffff;
  background: rgba(74, 112, 232, 0.22);
  border-color: rgba(101, 224, 255, 0.7);
}

.yellow-button {
  color: #06102d;
  background: linear-gradient(90deg, #54d8ff, #8e69ff);
  border-color: rgba(130, 238, 255, 0.78);
  box-shadow: 0 0 20px rgba(84, 216, 255, 0.28), 0 0 28px rgba(156, 107, 255, 0.16);
}

.yellow-button:hover { background: linear-gradient(90deg, #7ae4ff, #a485ff); }

.announcement {
  min-height: 44px;
  padding-block: 13px 11px;
  color: #bcd4ff;
  background: linear-gradient(90deg, rgba(31, 93, 170, 0.34), rgba(63, 45, 142, 0.3));
  border-bottom-color: rgba(93, 172, 255, 0.22);
}

main { margin-top: 24px; }

.page-heading,
.dashboard-hero,
.products-hero,
.orders-hero {
  color: #f4f8ff;
  background: var(--glass);
  border: 1px solid rgba(124, 177, 255, 0.3);
  border-radius: 8px;
  box-shadow: var(--glow-shadow);
  backdrop-filter: none;
}

.eyebrow,
.dashboard-hero .eyebrow,
.products-hero .eyebrow,
.orders-hero .eyebrow {
  color: #bff3ff;
  background: rgba(41, 93, 174, 0.22);
  border: 1px solid rgba(88, 219, 255, 0.48);
  border-bottom-color: rgba(156, 107, 255, 0.8);
  box-shadow: none;
}

.dashboard-hero-pills span {
  color: #cfe9ff;
  background: rgba(8, 17, 49, 0.62);
  border: 1px solid rgba(113, 165, 255, 0.24);
  border-radius: 6px;
}

.quota,
.auto-bid-heading-actions > label,
.auto-bid-quota,
.orders-hero-status {
  color: #eaf2ff;
  background: rgba(8, 16, 47, 0.78);
  border: 1px solid rgba(111, 180, 255, 0.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 16px rgba(84,216,255,.09);
}

.auto-bid-actions-only {
  justify-content: flex-start;
}

.auto-bid-heading-actions {
  width: 100%;
  justify-content: flex-start;
}

.auto-bid-heading-actions > label {
  width: 240px;
  min-width: 240px;
  color: #eef5ff;
}

.auto-bid-heading-actions > label span {
  color: #dce8ff;
  font-size: 12px;
}

.auto-bid-heading-actions select {
  color: #ffffff;
  background: #07102f;
  border: 1px solid rgba(113, 180, 255, 0.56);
  font-size: 14px;
  font-weight: 800;
  color-scheme: dark;
}

.dashboard-onboarding,
.create-section,
.toolbar,
.table-section,
.pricing-band,
.listing-workspace,
.auto-bid-workspace,
.products-workspace,
.orders-workspace {
  color: var(--ink);
  background: var(--glass-soft);
  border: 1px solid rgba(130, 175, 255, 0.28);
  border-radius: 8px;
  box-shadow: var(--glow-shadow);
  backdrop-filter: none;
}

.dashboard-onboarding { border-color: rgba(129, 180, 255, 0.28); }
.dashboard-section-heading > strong,
.action-panel > header > strong {
  color: #d7f7ff;
  background: rgba(65, 115, 210, 0.2);
  border-color: rgba(95, 213, 255, 0.38);
}

.onboarding-step,
.dashboard-kpis article,
.dashboard-panel,
.orders-kpis article,
.auto-bid-summary article,
.listing-summary article {
  color: var(--ink);
  background: linear-gradient(155deg, rgba(25, 38, 91, 0.7), rgba(8, 14, 42, 0.7));
  border: 1px solid rgba(133, 177, 255, 0.25);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 14px 36px rgba(0,0,0,.16);
}

.onboarding-step.completed {
  background: linear-gradient(155deg, rgba(20, 73, 75, 0.62), rgba(8, 29, 49, 0.76));
  border-color: rgba(102, 243, 194, 0.46);
}

.onboarding-step-top i,
.dashboard-kpis i,
.orders-kpis i,
.dashboard-empty i,
.activity-list i,
.action-list > a > i,
.hot-product-list article > b {
  color: #78e7ff;
  background: rgba(70, 112, 225, 0.16);
  border: 1px solid rgba(106, 205, 255, 0.32);
  box-shadow: inset 0 0 12px rgba(84,216,255,.06);
}

.onboarding-step.completed .onboarding-step-top i {
  color: var(--green);
  background: rgba(44, 155, 124, 0.16);
  border-color: rgba(102, 243, 194, 0.44);
}

.onboarding-step p,
.dashboard-kpis small,
.orders-kpis small { color: #b8c7e9; }
.onboarding-step .button-link { color: #dce8ff; border-color: rgba(129, 169, 255, 0.28); }

.dashboard-kpis article {
  border-left: 3px solid #54d8ff;
}

.dashboard-kpis b,
.orders-kpis b,
.auto-bid-summary strong,
.listing-summary strong {
  color: #ffffff;
  text-shadow: 0 0 20px rgba(84, 216, 255, 0.24);
}

.dashboard-panel > header,
.products-meta,
.auto-bid-toolbar,
.auto-bid-footer,
.listing-footer,
.products-footer,
.orders-list-footer {
  background: rgba(7, 13, 39, 0.42);
  border-color: rgba(131, 171, 255, 0.16);
}

.segmented {
  background: rgba(5, 11, 34, 0.62);
  border-color: rgba(121, 162, 255, 0.24);
}

.segmented button { color: #aebfe7; }
.segmented button.active {
  color: #ffffff;
  background: rgba(76, 124, 232, 0.25);
  border: 1px solid rgba(101, 224, 255, 0.6);
  box-shadow: 0 0 16px rgba(84,216,255,.18);
}

.sales-chart {
  margin: 8px 14px 16px;
  border: 1px solid rgba(112, 160, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(rgba(124, 170, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 170, 255, 0.07) 1px, transparent 1px),
    rgba(4, 10, 33, 0.34);
  background-size: 100% 25%, 12.5% 100%, 100% 100%;
}

.sales-chart text { fill: #8ea5d2; }
.chart-axis { stroke: rgba(133, 175, 255, 0.38); }
.revenue-line { stroke: #54d8ff; filter: drop-shadow(0 0 7px rgba(84,216,255,.74)); }
.quantity-line { stroke: #a979ff; filter: drop-shadow(0 0 6px rgba(156,107,255,.54)); }
.sales-chart circle { fill: #54d8ff; stroke: #dff9ff; }
.sales-chart .quantity-point { fill: #9c6bff; stroke: #eee7ff; }
.chart-legend span::before { border-color: #54d8ff; }
.chart-legend .quantity::before { border-color: #9c6bff; }

.action-list > a,
.activity-list > a,
.activity-list > article,
.hot-product-list article {
  color: #e7efff;
  border-color: rgba(136, 174, 255, 0.12);
}

.action-list > a:hover,
.activity-list > a:hover { background: rgba(73, 113, 217, 0.08); }

input,
select,
textarea,
.products-hero-actions select,
.products-search input,
.auto-bid-toolbar select,
.auto-bid-search input,
.orders-filters select,
.orders-filters input,
.managed-number-field input,
.managed-money-field input {
  color: #eef5ff;
  background: rgba(4, 11, 35, 0.8);
  border: 1px solid rgba(124, 170, 255, 0.34);
  border-radius: 7px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #54d8ff;
  box-shadow: 0 0 0 2px rgba(84,216,255,.12), 0 0 18px rgba(84,216,255,.13);
}

input::placeholder,
textarea::placeholder { color: #7184ad; }
option { color: #eef5ff; background: #0a1235; }

.toolbar,
.product-filters,
.products-meta,
.auto-bid-toolbar,
.orders-filters,
.listing-toolbar {
  color: var(--ink);
  background: rgba(7, 14, 42, 0.68);
  border-color: rgba(126, 171, 255, 0.24);
}

.product-filters {
  border: 1px solid rgba(126,171,255,.26);
  border-top: 0;
  box-shadow: var(--glow-shadow);
}

.product-filter-grid button,
.listing-filter-row button {
  color: #cfddfa;
  background: rgba(5, 12, 37, 0.76);
  border: 1px solid rgba(126, 171, 255, 0.25);
  border-radius: 7px;
}

.product-filter-grid button.active,
.listing-filter-row button.active {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(84,216,255,.24), rgba(156,107,255,.22));
  border: 1px solid rgba(103, 224, 255, 0.6);
  box-shadow: 0 0 14px rgba(84,216,255,.16);
}

.product-filter-grid button b,
.listing-filter-row button b {
  color: #dff8ff;
  background: rgba(47, 82, 160, 0.24);
  border-color: rgba(116, 185, 255, 0.26);
}

.table-section,
.listing-table-section,
.orders-list-panel,
.order-detail-panel {
  border-color: rgba(130, 175, 255, 0.25);
  background: rgba(8, 15, 44, 0.64);
  box-shadow: var(--glow-shadow);
}

table,
.products-table,
.orders-table,
.listing-table,
.auto-bid-table { color: #dfe9ff; }

th,
.products-table th,
.orders-table th,
.listing-table th,
.auto-bid-table th {
  color: #bcd6ff;
  background: rgba(18, 31, 75, 0.96);
  border-color: rgba(134, 172, 255, 0.18);
}

td,
.products-table td {
  color: #e4edff;
  background: rgba(6, 13, 39, 0.44);
  border-color: rgba(134, 172, 255, 0.12);
}

tbody tr:hover td,
.orders-table tbody tr:hover td,
.orders-table tbody tr:focus td { background: rgba(64, 105, 208, 0.12); }
.orders-table tbody tr.selected td { background: rgba(84, 216, 255, 0.14); }

.managed-product a,
.managed-product strong,
.listing-product a,
.listing-product strong,
.order-detail-facts strong,
.order-item-grid b { color: #edf4ff; }

.managed-product img,
.product-image-placeholder,
.bid-product img,
.bid-image-placeholder,
.listing-product img,
.listing-product-placeholder {
  background: rgba(9, 17, 48, 0.78);
  border-color: rgba(125, 178, 255, 0.28);
  border-radius: 7px;
}

.product-sticky-cell,
.products-table th:first-child { border-right-color: rgba(118, 174, 255, 0.3); }
.order-detail-header,
.listing-detail-panel > header,
.bid-small-modal header,
.detail-header {
  color: #f3f7ff;
  background: linear-gradient(100deg, rgba(18, 36, 88, 0.98), rgba(30, 18, 77, 0.98));
  border-bottom: 1px solid rgba(106, 210, 255, 0.28);
}

.store-detail-panel,
.listing-detail-panel,
.bid-small-modal {
  color: var(--ink);
  background: linear-gradient(155deg, rgba(15, 25, 65, 0.98), rgba(6, 11, 34, 0.98));
  border-color: rgba(103, 209, 255, 0.46);
  box-shadow: -18px 0 60px rgba(0,0,0,.42), 0 0 32px rgba(84,216,255,.09);
}

.store-detail-panel {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(1180px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(103, 209, 255, 0.52);
  border-radius: 12px;
  overflow: hidden;
}
.store-detail-panel .detail-body { padding: 22px; color: #e8f0ff; }
.detail-close-button {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  color: #17213a;
  background: #ffffff;
  border-color: rgba(142, 194, 255, 0.72);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
.detail-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  padding-top: 52px;
}
.detail-column {
  min-width: 0;
  align-self: start;
  padding: 0 20px;
  background: rgba(5, 13, 43, 0.58);
  border: 1px solid rgba(111, 169, 255, 0.24);
  border-radius: 8px;
}
.detail-column .detail-section:last-child { border-bottom: 0; }
.store-detail-panel .webhook-message-meta { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.store-detail-panel .webhook-event-list { max-height: 260px; overflow: auto; }
.store-detail-panel .detail-section h4,
.store-detail-panel .section-title-line h4 { color: #f5f8ff; }
.store-detail-panel .callback-status,
.store-detail-panel .callback-steps,
.store-detail-panel .webhook-message-empty,
.store-detail-panel .api-key-section > p { color: #b9c8e8; }
.store-detail-panel .callback-status strong { color: #dce8ff; font-weight: 700; }
.store-detail-panel .detail-text-button { color: #dbe8ff; }
.store-detail-panel .detail-text-button:hover { color: #ffffff; background: rgba(103, 177, 255, 0.16); }
.store-detail-panel .detail-text-button:disabled { color: #899bc1; opacity: 0.72; }
.store-detail-panel .soft-badge {
  color: #dce8ff;
  background: rgba(16, 31, 75, 0.88);
  border-color: rgba(112, 165, 255, 0.42);
}
.store-detail-panel .soft-badge.active { color: #57e9bb; border-color: rgba(87, 233, 187, 0.58); }
.store-detail-panel .webhook-event-row strong { color: #f1f5ff; }
.store-detail-panel .webhook-event-row code,
.store-detail-panel .webhook-event-facts { color: #aebede; }
.store-detail-panel .detail-actions .plain-button {
  color: #eef4ff;
  background: rgba(12, 25, 66, 0.84);
  border-color: rgba(107, 170, 255, 0.48);
}
.store-detail-panel .detail-actions .plain-button:hover { background: rgba(46, 84, 157, 0.58); }

@media (max-width: 900px) {
  .store-detail-panel {
    width: min(680px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
  }
  .detail-columns { grid-template-columns: 1fr; }
  .store-detail-panel .webhook-message-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.modal-scrim,
.modal-backdrop { background: rgba(2, 5, 19, 0.7); backdrop-filter: blur(5px); }
.detail-section,
.listing-detail-grid > div,
.listing-detail-body section,
.order-items article,
.order-detail-facts span {
  color: #dce7ff;
  background: rgba(8, 16, 47, 0.7);
  border-color: rgba(124, 170, 255, 0.2);
}

.order-reconciliation {
  background: rgba(67, 105, 185, 0.24);
  border-color: rgba(124, 170, 255, 0.2);
}

.order-reconciliation span,
.order-reconciliation-items article {
  color: #c5d4f5;
  background: rgba(8, 16, 47, 0.78);
  border-color: rgba(124, 170, 255, 0.2);
}

.order-reconciliation strong,
.order-reconciliation-items article > strong,
.order-reconciliation-items b {
  color: #f3f7ff;
}

.order-reconciliation small {
  color: #79ffd0;
  background: rgba(9, 55, 67, 0.72);
}

.toast {
  color: #06102d;
  background: linear-gradient(90deg, #54d8ff, #9c6bff);
  border: 1px solid rgba(164, 236, 255, 0.75);
  border-radius: 8px;
  box-shadow: 0 0 26px rgba(84,216,255,.3);
}

.toast.error { color: #ffffff; background: linear-gradient(90deg, #c82f60, #702e91); }
.empty-state,
.listing-empty,
.dashboard-empty { color: var(--muted); border-color: rgba(133, 177, 255, 0.24); }

progress { accent-color: #54d8ff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(4, 9, 30, 0.68); }
::-webkit-scrollbar-thumb { background: linear-gradient(#3775d4, #7d50cf); border: 2px solid rgba(4, 9, 30, 0.68); border-radius: 8px; }

@media (max-width: 1000px) {
  .sidebar { width: 72px; }
  .app-shell { margin-left: 72px; }
}

@media (max-width: 680px) {
  .sidebar { position: relative; width: 100%; background: rgba(7, 12, 37, 0.94); }
  .app-shell { margin-left: 0; }
  .topbar { position: relative; }
  .dashboard-hero,
  .products-hero,
  .orders-hero,
  .page-heading { border-radius: 8px; }
  .store-create-modal { padding: 10px; }
  .store-create-panel { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .store-create-header { padding: 18px; }
  .store-create-form { grid-template-columns: 1fr; padding: 18px; }
  .store-create-form .store-submit-actions { align-items: stretch; flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* v0.2.101 activation gate */
.access-page,
.license-page {
  min-height: 100vh;
  color: #f6f8ff;
  background: #020615;
}

.activation-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 18px;
}

.activation-card {
  width: min(460px, 100%);
  padding: 34px;
  border: 1px solid rgba(94, 196, 255, 0.42);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(10, 19, 57, 0.94), rgba(6, 10, 35, 0.9));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55), 0 0 38px rgba(74, 117, 255, 0.18), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(22px);
}

.activation-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}

.activation-brand > span:last-child { display: grid; gap: 2px; }
.activation-brand strong { font-size: 20px; }
.activation-brand small { color: #94a6cf; }
.access-eyebrow { color: #59e0ff; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; }
.activation-card h1,
.license-shell h1 { margin: 8px 0 10px; font-size: 30px; letter-spacing: 0; }
.activation-card > p,
.license-header p,
.license-create-panel p,
.license-list-panel p { margin: 0; color: #9eadd0; line-height: 1.7; }
.activation-card form { display: grid; gap: 12px; margin-top: 26px; }
.activation-card label,
.license-create-panel label { color: #dce6ff; font-size: 13px; font-weight: 700; }
.activation-card input,
.license-create-panel input {
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  padding: 0 14px;
  color: #ffffff;
  background: rgba(3, 9, 31, 0.78);
  border: 1px solid rgba(105, 150, 255, 0.48);
  border-radius: 7px;
  outline: none;
}
.activation-card input { font-size: 17px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.activation-card input:focus,
.license-create-panel input:focus { border-color: #4de2ff; box-shadow: 0 0 0 3px rgba(77, 226, 255, 0.12); }

.access-primary-button {
  min-height: 48px;
  padding: 0 20px;
  color: white;
  font-weight: 800;
  border: 1px solid rgba(130, 230, 255, 0.75);
  border-radius: 7px;
  background: linear-gradient(110deg, #1d63ff, #7047ff 58%, #14cae8);
  box-shadow: 0 0 24px rgba(61, 111, 255, 0.32);
  cursor: pointer;
}
.access-primary-button:disabled { opacity: .55; cursor: wait; }
.access-message { min-height: 22px; margin-top: 14px; color: #aebbd8; font-size: 13px; }
.access-message.success { color: #51efc1; }
.access-message.error { color: #ff7d9e; }
.activation-security { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(116, 156, 245, 0.18); }
.activation-security span { padding: 5px 8px; color: #93a8d4; font-size: 11px; border: 1px solid rgba(109, 153, 246, .22); border-radius: 4px; background: rgba(25, 42, 91, .32); }

/* v0.2.101 account access flow */
.auth-page {
  min-height: 100vh;
  margin: 0;
  color: #f7f9ff;
  background: #030610;
}

.auth-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(420px, 1.15fr) minmax(400px, .85fr);
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.auth-visual {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  border-right: 1px solid rgba(128, 155, 214, .2);
  background: #030711;
}

.auth-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(2, 6, 17, .06), rgba(2, 6, 17, .18) 45%, rgba(2, 6, 17, .78));
}

.auth-moon {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.auth-visual-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: min(620px, calc(100% - 80px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 54px 0 76px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .8);
}

.auth-brand,
.auth-mobile-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-brand {
  position: absolute;
  top: 42px;
  left: 0;
}

.auth-brand img,
.auth-mobile-brand img { border-radius: 8px; box-shadow: 0 0 24px rgba(71, 204, 255, .35); }
.auth-brand > span { display: grid; gap: 1px; }
.auth-brand strong { font-size: 20px; }
.auth-brand small { color: #c5d1eb; font-size: 12px; }
.auth-kicker { margin: 0 0 12px; color: #6de7ff; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; }
.auth-visual h1 { max-width: 560px; margin: 0; font-size: 52px; line-height: 1.16; letter-spacing: 0; }
.auth-visual-copy { max-width: 500px; margin: 20px 0 0; color: #d5dded; font-size: 16px; line-height: 1.75; }

.auth-form-side {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 48px clamp(28px, 5vw, 78px);
  background: rgba(4, 8, 21, .9);
}

.auth-form-wrap { width: min(420px, 100%); }
.auth-mobile-brand { display: none; margin-bottom: 38px; }
.auth-mobile-brand strong { font-size: 18px; }
.auth-form-wrap h2 { margin: 9px 0 10px; font-size: 32px; line-height: 1.2; letter-spacing: 0; }
.auth-form-wrap > p { margin: 0; color: #9eafd0; line-height: 1.65; }
.auth-form-wrap form { display: grid; gap: 10px; margin-top: 30px; }
.auth-form-wrap form[hidden] { display: none; }
.auth-form-wrap label { margin-top: 7px; color: #dce6fa; font-size: 13px; font-weight: 700; }
.auth-form-wrap input {
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  color: #fff;
  font: inherit;
  background: rgba(8, 14, 34, .88);
  border: 1px solid rgba(125, 151, 209, .45);
  border-radius: 6px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.auth-form-wrap input::placeholder { color: #7685a7; opacity: 1; }
.auth-form-wrap input:hover { border-color: rgba(128, 196, 239, .65); }
.auth-form-wrap input:focus { border-color: #58ddf7; background: rgba(8, 17, 42, .98); box-shadow: 0 0 0 3px rgba(88, 221, 247, .12); }
.auth-form-wrap .access-primary-button { width: 100%; margin-top: 14px; }
.auth-switch { margin-top: 18px !important; text-align: center; font-size: 13px; }
.auth-switch a { color: #71e5fa; font-weight: 700; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 26px;
  padding: 4px;
  border: 1px solid rgba(112, 150, 219, .24);
  border-radius: 7px;
  background: rgba(5, 11, 30, .72);
}
.auth-tabs button {
  min-height: 38px;
  color: #91a3c6;
  font: 700 13px/1 inherit;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}
.auth-tabs button.active {
  color: #fff;
  background: linear-gradient(100deg, rgba(48, 104, 231, .7), rgba(39, 183, 219, .55));
  box-shadow: 0 5px 16px rgba(24, 104, 201, .2);
}
.auth-tabs + form { margin-top: 18px; }
.auth-label-row { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
.auth-label-row label { margin: 0; }
.auth-label-row a { color: #71e5fa; font-size: 12px; font-weight: 700; text-decoration: none; }
.auth-label-row a:hover { text-decoration: underline; }
.sms-code-row { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 9px; }
.sms-send-button {
  min-height: 50px;
  padding: 0 12px;
  color: #76e9ff;
  font: 750 12px/1 inherit;
  border: 1px solid rgba(88, 221, 247, .48);
  border-radius: 6px;
  background: rgba(18, 61, 99, .3);
  cursor: pointer;
}
.sms-send-button:hover:not(:disabled) { color: #fff; border-color: #72e8ff; background: rgba(25, 93, 137, .42); }
.sms-send-button:disabled { color: #7f8ba7; border-color: rgba(113, 134, 178, .25); cursor: not-allowed; }

.activation-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}
.activation-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #6f7f9f;
  font-size: 12px;
  font-weight: 700;
}
.activation-steps li:not(:last-child)::after {
  content: "";
  width: 100%;
  height: 1px;
  margin-right: 8px;
  background: rgba(120, 148, 203, .28);
}
.activation-steps span {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(119, 145, 199, .4);
  border-radius: 50%;
}
.activation-steps .complete { color: #75dfc4; }
.activation-steps .complete span { color: #03120f; border-color: #75dfc4; background: #75dfc4; }
.activation-steps .active { color: #7de8ff; }
.activation-steps .active span { border-color: #62def8; box-shadow: 0 0 14px rgba(98, 222, 248, .35); }
.activation-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding: 12px 14px;
  border-left: 2px solid #58ddf7;
  background: rgba(28, 53, 82, .36);
}
.activation-account[hidden] { display: none; }
.activation-account span { color: #8fa2c6; font-size: 12px; }
.activation-account strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activation-ready { display: flex; align-items: center; gap: 12px; margin: 30px 0 18px; padding: 16px; border: 1px solid rgba(88, 221, 189, .3); border-radius: 6px; background: rgba(19, 69, 64, .24); }
.activation-ready-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #58ddbd; box-shadow: 0 0 14px rgba(88, 221, 189, .7); }
.activation-ready > div { display: grid; gap: 3px; }
.activation-ready small { color: #91bdb3; }
.auth-text-button { display: block; margin: 12px auto 0; padding: 6px 8px; color: #8fa2c6; border: 0; background: transparent; cursor: pointer; }
.auth-text-button:hover { color: #dce6fa; }

@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; overflow: visible; }
  .auth-visual { display: none; }
  .auth-form-side { min-height: 100svh; padding: 34px 22px; background: rgba(3, 7, 19, .82); }
  .auth-mobile-brand { display: flex; }
  .auth-form-wrap h2 { font-size: 28px; }
}

@media (max-width: 420px) {
  .auth-form-side { padding: 26px 18px; }
  .activation-steps { margin-bottom: 32px; }
  .activation-steps li { gap: 5px; font-size: 11px; }
  .activation-steps li:not(:last-child)::after { margin-right: 5px; }
  .sms-code-row { grid-template-columns: minmax(0, 1fr) 106px; }
  .sms-send-button { padding-inline: 8px; font-size: 11px; }
}

.license-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 60px; }
.license-header,
.license-create-panel,
.license-list-panel {
  border: 1px solid rgba(95, 156, 255, .34);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(10, 19, 57, .91), rgba(5, 10, 31, .88));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
}
.license-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px; }
.license-create-panel,
.license-list-panel { margin-top: 16px; padding: 24px; }
.license-create-panel h2,
.license-list-panel h2 { margin: 0 0 5px; font-size: 20px; }
.license-create-panel form { display: grid; grid-template-columns: minmax(220px, 1.5fr) 160px 160px 180px; align-items: end; gap: 12px; margin-top: 20px; }
.generated-license { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 16px; border: 1px solid rgba(69, 232, 201, .45); border-radius: 7px; background: rgba(14, 85, 84, .18); }
.generated-license[hidden] { display: none; }
.generated-license > div { display: grid; gap: 5px; }
.generated-license span { color: #83a7c9; font-size: 12px; }
.generated-license strong { color: #5af0ca; font-size: 19px; letter-spacing: 1px; }
.license-list-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.license-list { display: grid; gap: 8px; }
.license-row { display: grid; grid-template-columns: minmax(240px, 1.7fr) .7fr 1.15fr .65fr auto; align-items: center; gap: 16px; padding: 15px; border: 1px solid rgba(108, 148, 229, .22); border-radius: 7px; background: rgba(4, 10, 32, .5); }
.license-row > div { display: grid; gap: 5px; }
.license-row span { color: #8fa3ca; font-size: 11px; }
.license-row strong { color: #eef3ff; font-size: 13px; }
.license-identity strong { font-size: 15px; }
.license-identity span { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .4px; }
.license-status.active { color: #52ebbd; }
.license-status.expired,
.license-status.exhausted { color: #ffcc70; }
.license-status.revoked { color: #ff7598; }
.plain-button.danger { color: #ff8ba7; border-color: rgba(255, 92, 131, .35); }

/* v0.2.101 readable cosmic controls for the product workspace */
.products-actions-only {
  min-height: 96px;
  background:
    linear-gradient(115deg, rgba(19, 37, 91, 0.88), rgba(10, 16, 49, 0.92)),
    radial-gradient(circle at 72% 18%, rgba(84, 216, 255, 0.12), transparent 36%);
  border-color: rgba(105, 189, 255, 0.38);
}

.products-actions-only .products-hero-actions {
  flex-basis: 940px;
  grid-template-columns: 230px minmax(340px, 540px) auto;
  gap: 12px;
}

.products-hero-actions select,
.products-search input {
  min-height: 46px;
  color: #f4f8ff;
  background: linear-gradient(180deg, rgba(8, 18, 52, 0.96), rgba(5, 12, 38, 0.96));
  border: 1px solid rgba(122, 184, 255, 0.52);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.16);
  font-size: 13px;
  font-weight: 700;
}

.products-hero-actions select {
  padding-inline: 14px 38px;
  color-scheme: dark;
}

.products-search input { padding-left: 38px; }
.products-search input::placeholder { color: #90a4ce; opacity: 1; }
.products-search span { top: 13px; left: 13px; color: #62defc; font-size: 15px; }

.products-hero-actions select:hover,
.products-search input:hover {
  border-color: rgba(119, 224, 255, 0.74);
}

.products-hero-actions select:focus,
.products-search input:focus {
  border-color: #65e3ff;
  box-shadow: 0 0 0 3px rgba(84, 216, 255, 0.13), 0 0 22px rgba(84, 216, 255, 0.13);
}

.products-hero-actions #product-sync {
  min-height: 46px;
  padding-inline: 17px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.product-filters {
  padding: 10px;
  background: rgba(6, 13, 40, 0.78);
  border: 1px solid rgba(126, 177, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), var(--glow-shadow);
}

.product-filter-heading {
  margin: 0 2px 9px;
  color: #dce9ff;
  font-size: 11px;
}

.product-filter-heading span { color: #91a6d0; }

.product-filter-grid {
  gap: 5px;
  padding: 4px;
  background: rgba(3, 9, 31, 0.68);
  border: 1px solid rgba(118, 169, 255, 0.18);
  border-radius: 9px;
}

.product-filter-grid button {
  position: relative;
  min-height: 44px;
  padding: 8px 13px;
  color: #c8d7f4;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 750;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.product-filter-grid button:hover {
  color: #ffffff;
  background: rgba(66, 113, 214, 0.14);
  border-color: rgba(112, 195, 255, 0.24);
}

.product-filter-grid button.active {
  color: #ffffff;
  background: linear-gradient(100deg, rgba(50, 119, 206, 0.44), rgba(80, 67, 181, 0.38));
  border-color: rgba(91, 222, 255, 0.7);
  box-shadow: inset 3px 0 0 #56e0ff, 0 0 15px rgba(74, 170, 255, 0.13);
}

.product-filter-grid button b {
  min-width: 28px;
  padding: 3px 7px;
  color: #e8f7ff;
  background: rgba(65, 111, 206, 0.27);
  border: 1px solid rgba(124, 194, 255, 0.3);
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.2;
}

.product-filter-grid button.active b {
  color: #061633;
  background: #8de9ff;
  border-color: #c9f7ff;
}

.products-workspace .managed-status {
  gap: 6px;
  padding: 6px 9px;
  color: #c9ffe8;
  background: rgba(35, 154, 111, 0.14);
  border: 1px solid rgba(76, 227, 171, 0.38);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.products-workspace .managed-status i {
  width: 7px;
  height: 7px;
  border: 0;
  box-shadow: 0 0 9px currentColor;
}

.products-workspace .managed-status.orange {
  color: #ffe2a1;
  background: rgba(196, 128, 26, 0.15);
  border-color: rgba(255, 190, 78, 0.4);
}

.products-workspace .managed-status.red {
  color: #ffc1cf;
  background: rgba(194, 52, 88, 0.16);
  border-color: rgba(255, 104, 139, 0.42);
}

.products-workspace .managed-status.gray {
  color: #d0d9ed;
  background: rgba(119, 137, 174, 0.13);
  border-color: rgba(159, 176, 211, 0.3);
}

/* Keep every operational column from status onward visually centered. */
.products-workspace .products-table :is(th, td):is(
  [data-column="status"],
  [data-column="brand"],
  [data-column="officialStock"],
  [data-column="sellerStock"],
  [data-column="price"],
  [data-column="rrp"],
  [data-column="sales"],
  [data-column="views"],
  [data-column="conversion"],
  [data-column="wishlist"],
  [data-column="returns"],
  [data-column="dimensions"]
) {
  text-align: center;
  vertical-align: middle;
}

.products-workspace .products-table td:is(
  [data-column="status"],
  [data-column="brand"],
  [data-column="officialStock"],
  [data-column="sellerStock"],
  [data-column="price"],
  [data-column="rrp"],
  [data-column="sales"],
  [data-column="views"],
  [data-column="conversion"],
  [data-column="wishlist"],
  [data-column="returns"],
  [data-column="dimensions"]
) > * {
  margin-inline: auto;
}

.products-workspace .managed-status {
  min-width: 82px;
  min-height: 34px;
  justify-content: center;
  padding: 7px 12px;
  background:
    radial-gradient(circle at 16% 28%, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 72%, rgba(117, 223, 255, 0.72) 0 1px, transparent 1.5px),
    linear-gradient(135deg, rgba(24, 105, 103, 0.72), rgba(12, 28, 72, 0.96));
  border-color: rgba(80, 232, 183, 0.7);
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 12px rgba(67, 224, 186, 0.14);
  letter-spacing: 0;
}

.products-workspace .managed-status.orange {
  background:
    radial-gradient(circle at 16% 28%, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.5px),
    linear-gradient(135deg, rgba(117, 76, 17, 0.82), rgba(35, 28, 71, 0.96));
}

.products-workspace .managed-status.red {
  background:
    radial-gradient(circle at 16% 28%, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.5px),
    linear-gradient(135deg, rgba(111, 31, 57, 0.84), rgba(37, 20, 67, 0.96));
}

.products-workspace .managed-status.gray {
  background:
    radial-gradient(circle at 16% 28%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px),
    linear-gradient(135deg, rgba(67, 78, 109, 0.8), rgba(23, 29, 58, 0.96));
}

.products-workspace .managed-number-field input,
.products-workspace .managed-money-field input {
  width: 110px;
  height: 42px;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(10, 21, 57, 0.96), rgba(5, 13, 39, 0.96));
  border: 1px solid rgba(112, 169, 255, 0.4);
  border-bottom-color: rgba(84, 216, 255, 0.72);
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font: 800 13px/1.2 Consolas, "Microsoft YaHei UI", monospace;
  appearance: textfield;
  -moz-appearance: textfield;
}

.products-workspace .managed-number-field,
.products-workspace .managed-money-field {
  justify-content: center;
  align-items: center;
  margin-inline: auto;
}

.products-workspace .managed-money-field {
  position: relative;
  width: 110px;
  min-width: 110px;
}

.products-workspace .managed-money-field span {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 1;
  transform: translateY(-50%);
  color: #dcecff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  pointer-events: none;
}

.products-workspace .managed-money-field input {
  padding-left: 28px;
  padding-right: 10px;
  text-align: center;
}

.products-workspace .managed-number-field input[type="number"]::-webkit-inner-spin-button,
.products-workspace .managed-number-field input[type="number"]::-webkit-outer-spin-button,
.products-workspace .managed-money-field input[type="number"]::-webkit-inner-spin-button,
.products-workspace .managed-money-field input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.products-workspace .managed-number-field input:hover,
.products-workspace .managed-money-field input:hover {
  border-color: rgba(116, 215, 255, 0.72);
}

.products-workspace .managed-number-field input:focus,
.products-workspace .managed-money-field input:focus {
  border-color: #5fe1ff;
  box-shadow: 0 0 0 3px rgba(84, 216, 255, 0.12), 0 0 17px rgba(84, 216, 255, 0.12);
}

.products-workspace .managed-number-field input:disabled {
  color: #d4def2;
  -webkit-text-fill-color: #d4def2;
  background: rgba(25, 35, 66, 0.72);
  border-color: rgba(112, 136, 187, 0.25);
  opacity: 1;
}

.products-workspace .managed-number-field small,
.products-workspace .managed-money-field span {
  color: #9eb4df;
}

.products-workspace .product-row-save {
  min-height: 36px;
  padding-inline: 10px;
  color: #9db0d7;
  background: rgba(13, 24, 59, 0.78);
  border: 1px solid rgba(118, 159, 230, 0.26);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 750;
}

.products-workspace .product-row-save.dirty {
  color: #06152f;
  background: linear-gradient(90deg, #67ddff, #9a7bff);
  border: 1px solid #a8efff;
  box-shadow: 0 0 16px rgba(84, 216, 255, 0.18);
}

@media (max-width: 1250px) {
  .products-actions-only .products-hero-actions {
    flex-basis: 100%;
    grid-template-columns: 190px minmax(240px, 1fr) auto;
  }
}

@media (max-width: 680px) {
  .products-actions-only .products-hero-actions {
    grid-template-columns: 1fr;
  }

  .product-filter-grid {
    grid-template-columns: 1fr 1fr;
  }

  .products-hero-actions #product-sync {
    width: 100%;
  }
}
.license-empty { padding: 46px 20px; color: #8fa3ca; text-align: center; border: 1px dashed rgba(117, 160, 248, .28); border-radius: 7px; }

@media (max-width: 840px) {
  .license-create-panel form { grid-template-columns: 1fr 1fr; }
  .license-row { grid-template-columns: 1fr 1fr; }
  .license-row .danger { justify-self: start; }
}

@media (max-width: 520px) {
  .activation-card { padding: 25px 20px; }
  .license-header { align-items: flex-start; flex-direction: column; }
  .license-create-panel form,
  .license-row { grid-template-columns: 1fr; }
  .generated-license { align-items: stretch; flex-direction: column; }
  .generated-license strong { font-size: 15px; overflow-wrap: anywhere; }
}

.auto-bid-table th:nth-child(2),
.auto-bid-table td:nth-child(2) {
  text-align: center;
}

.auto-bid-table .bid-price {
  display: block;
  text-align: center;
}

.auto-bid-table th:nth-child(3),
.auto-bid-table td:nth-child(3) {
  text-align: center;
}

.auto-bid-table .bid-price,
.auto-bid-table .bid-competition-price {
  font: 900 15px/1.25 Consolas, "Microsoft YaHei UI", monospace;
}

.auto-bid-table .bid-competition-price {
  display: block;
  min-width: 90px;
  color: #f4f8ff;
}

.auto-bid-table .bid-competition-price.floor-reached {
  color: #ff6685;
  text-shadow: 0 0 10px rgba(255, 78, 119, 0.3);
}

.auto-bid-table .bid-floor-note {
  display: block;
  margin-top: 5px;
  color: #ff91a7;
  font-size: 10px;
  font-weight: 800;
}

.auto-bid-table th:nth-child(3),
.auto-bid-table th:nth-child(4),
.auto-bid-table th:nth-child(5),
.auto-bid-table th:nth-child(6),
.auto-bid-table td:nth-child(3),
.auto-bid-table td:nth-child(4),
.auto-bid-table td:nth-child(5),
.auto-bid-table td:nth-child(6) {
  text-align: center;
}

.auto-bid-table .bid-competition-price,
.auto-bid-table .bid-floor-note,
.auto-bid-table td:nth-child(4) > small {
  width: 100%;
  text-align: center;
}

.auto-bid-table .bid-floor-button {
  display: block;
  width: fit-content;
  margin-inline: auto;
  text-align: center;
}

.auto-bid-table .bid-switch {
  display: block;
  margin-inline: auto;
}

#bid-log-modal {
  display: grid;
  place-items: center;
  padding: 24px;
}

#bid-log-modal[hidden] {
  display: none;
}

#bid-log-modal .listing-detail-panel {
  position: relative;
  inset: auto;
  display: flex;
  width: min(1080px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(103, 209, 255, 0.52);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.58), 0 0 34px rgba(84, 216, 255, 0.12);
}

#bid-log-modal .listing-detail-panel > header {
  position: relative;
  flex: 0 0 auto;
  padding: 20px 24px;
}

#bid-log-modal .listing-detail-panel > header span {
  font-size: 11px;
}

#bid-log-modal .listing-detail-panel > header h2 {
  font-size: 24px;
}

#bid-log-modal .bid-log-list {
  min-height: 320px;
  padding: 10px 24px 24px;
  overflow: auto;
}

#bid-log-modal .bid-log-list article {
  padding: 16px 4px;
  border-bottom-color: rgba(135, 174, 255, 0.25);
}

#bid-log-modal .bid-log-list article > div {
  align-items: center;
}

#bid-log-modal .bid-log-list article strong {
  color: #f2f6ff;
  font-size: 14px;
}

#bid-log-modal .bid-log-list article span {
  color: #b6c8eb;
  font-size: 11px;
}

#bid-log-modal .bid-log-list article p {
  margin: 9px 0;
  color: #edf3ff;
  font-size: 13px;
  line-height: 1.5;
}

#bid-log-modal .bid-log-list article small {
  color: #bdcbea;
  font-size: 11px;
  line-height: 1.6;
}

@media (max-width: 680px) {
  #bid-log-modal { padding: 10px; }
  #bid-log-modal .listing-detail-panel {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }
  #bid-log-modal .bid-log-list { padding-inline: 16px; }
}

/* Listing log: balanced columns and compact star-status controls. */
.listing-table {
  width: 100%;
  min-width: 900px;
  table-layout: fixed;
}

.listing-table .listing-col-time { width: 14%; }
.listing-table .listing-col-product { width: 44%; }
.listing-table .listing-col-store,
.listing-table .listing-col-source,
.listing-table .listing-col-status { width: 14%; }

.listing-table th:nth-child(3),
.listing-table th:nth-child(4),
.listing-table th:nth-child(5),
.listing-table td:nth-child(3),
.listing-table td:nth-child(4),
.listing-table td:nth-child(5) {
  text-align: center;
}

.listing-table td:nth-child(3),
.listing-table td:nth-child(4),
.listing-table td:nth-child(5) {
  padding-inline: 14px;
}

.listing-table td:nth-child(4) > strong,
.listing-table td:nth-child(4) > small {
  width: 100%;
  text-align: center;
}

.listing-state-wrap {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
}

.listing-state-wrap > small {
  color: #9fb2db;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.listing-state-button {
  position: relative;
  display: inline-flex;
  width: 116px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  overflow: hidden;
  padding: 5px 14px;
  color: #f7fbff;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,.95) 0 1px, transparent 2px),
    radial-gradient(circle at 43% 72%, rgba(255,255,255,.78) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 28%, rgba(255,255,255,.82) 0 1px, transparent 2px),
    linear-gradient(110deg, #122c83, #322085 58%, #172760);
  border: 1px solid #68a7ff;
  border-radius: 999px;
  box-shadow: inset 0 0 0 3px rgba(12, 21, 60, .72), 0 0 12px rgba(75, 129, 255, .46);
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

button.listing-state-button {
  cursor: pointer;
}

button.listing-state-button:hover,
button.listing-state-button:focus-visible {
  border-color: #b5d2ff;
  box-shadow: inset 0 0 0 3px rgba(12, 21, 60, .72), 0 0 20px rgba(75, 129, 255, .68);
  outline: none;
}

.listing-state-button.success {
  color: #fff9dc;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,.95) 0 1px, transparent 2px),
    radial-gradient(circle at 43% 72%, rgba(255,237,171,.92) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 28%, rgba(255,255,255,.82) 0 1px, transparent 2px),
    linear-gradient(110deg, #4b237b, #7b294f 58%, #9d5725);
  border-color: #ffc66c;
  box-shadow: inset 0 0 0 3px rgba(44, 20, 64, .7), 0 0 14px rgba(255, 166, 65, .45);
}

.listing-state-button.pending {
  color: #e9f2ff;
  border-color: #7398df;
  opacity: .9;
}

.listing-state-orb {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background: #70b4ff;
  border: 1px solid #d8ebff;
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(98, 174, 255, .88);
}

.listing-state-button.failed .listing-state-orb::after,
.listing-state-button.pending .listing-state-orb::after {
  position: absolute;
  top: -2px;
  right: -3px;
  width: 21px;
  height: 21px;
  content: "";
  background: #172760;
  border-radius: 50%;
}

.listing-state-button.success .listing-state-orb {
  background: #ffd84d;
  border-color: #fff4b4;
  box-shadow: 0 0 10px rgba(255, 201, 74, .94);
}

.listing-state-button.success .listing-state-orb::before {
  position: absolute;
  inset: 5px;
  content: "";
  border-bottom: 2px solid #8f5c15;
  border-radius: 50%;
}

.listing-detail-modal:has(.listing-failure-panel) {
  display: grid;
  place-items: center;
  padding: 24px;
}

.listing-detail-modal[hidden] {
  display: none;
}

.listing-failure-panel {
  position: relative;
  inset: auto;
  display: flex;
  width: min(820px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(103, 209, 255, .52);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .58), 0 0 34px rgba(84, 216, 255, .12);
}

.listing-failure-panel .listing-detail-body {
  overflow: auto;
}

.listing-failure-panel .listing-detail-body section.listing-failure-reason {
  color: #ffdce4;
  background: rgba(103, 18, 49, .58);
  border-color: rgba(255, 108, 145, .68);
}

.listing-failure-panel .listing-detail-body section.listing-failure-reason h3 {
  color: #ff9ab4;
  font-size: 14px;
}

.listing-failure-panel .listing-detail-body section.listing-failure-reason p {
  color: #fff1f5;
  font-size: 13px;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .listing-detail-modal:has(.listing-failure-panel) { padding: 10px; }
  .listing-failure-panel {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }
}

.fulfillment-orders-main {
  width: min(100%, 1680px);
  margin-top: 28px;
}

.fulfillment-hero {
  align-items: center;
  border: 1px solid rgba(91, 196, 255, 0.28);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(17, 31, 76, 0.95), rgba(13, 17, 50, 0.92));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}

.fulfillment-hero p {
  margin: 8px 0 0;
  color: #c3d5f6;
  font-size: 15px;
  font-weight: 700;
}

.fulfillment-workspace {
  margin-top: 14px;
  border: 1px solid rgba(91, 196, 255, 0.24);
  border-radius: 10px;
  background: rgba(6, 13, 43, 0.82);
  box-shadow: none;
}

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

.fulfillment-kpis article {
  min-height: 124px;
  padding: 18px;
  border: 1px solid rgba(108, 163, 255, 0.3);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(15, 30, 78, 0.9), rgba(8, 16, 50, 0.86));
}

.fulfillment-kpis article.primary {
  border-color: rgba(80, 222, 255, 0.72);
  box-shadow: 0 0 24px rgba(80, 222, 255, 0.14);
}

.fulfillment-kpis span,
.fulfillment-kpis b,
.fulfillment-kpis small {
  display: block;
}

.fulfillment-kpis span {
  color: #a9c3f1;
  font-size: 14px;
  font-weight: 900;
}

.fulfillment-kpis b {
  margin-top: 10px;
  color: #f7fbff;
  font-size: 36px;
  line-height: 1;
}

.fulfillment-kpis small {
  margin-top: 12px;
  color: #bdccef;
  font-size: 13px;
  line-height: 1.5;
}

.fulfillment-filters {
  display: grid;
  grid-template-columns: 220px minmax(420px, 1fr) auto auto auto;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(100, 167, 255, 0.28);
  border-radius: 10px;
  background: rgba(5, 12, 39, 0.72);
  box-shadow: none;
}

.fulfillment-filters label span {
  color: #dce8ff;
  font-size: 13px;
}

.fulfillment-tabs {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding: 8px;
  border: 1px solid rgba(100, 167, 255, 0.24);
  border-radius: 10px;
  background: rgba(6, 13, 43, 0.55);
}

.fulfillment-tabs button {
  display: grid;
  justify-items: start;
  gap: 3px;
  min-height: 42px;
  min-width: 190px;
  padding: 10px 18px;
  color: #c6d6fa;
  border: 1px solid rgba(110, 164, 255, 0.35);
  border-radius: 8px;
  background: rgba(9, 20, 59, 0.85);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.fulfillment-tabs button strong,
.fulfillment-tabs button small {
  display: block;
  letter-spacing: 0;
}

.fulfillment-tabs button strong {
  font-size: 14px;
}

.fulfillment-tabs button small {
  color: #8fa7d5;
  font-size: 11px;
  font-weight: 700;
}

.fulfillment-tabs button.active {
  color: #06122e;
  border-color: #6ce8ff;
  background: linear-gradient(135deg, #56d9ff, #8b64ff);
  box-shadow: 0 0 20px rgba(86, 217, 255, 0.22);
}

.fulfillment-tabs button.active small {
  color: #183265;
}

.fulfillment-panel {
  display: none;
  margin-top: 14px;
  border: 1px solid rgba(103, 163, 255, 0.25);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(7, 14, 43, 0.86);
}

.fulfillment-panel.active {
  display: block;
}

.fulfillment-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(113, 168, 255, 0.22);
  background: rgba(17, 32, 80, 0.82);
}

.fulfillment-panel-head strong {
  display: block;
  color: #f3f7ff;
  font-size: 18px;
}

.fulfillment-panel-head small,
.fulfillment-panel-head span {
  color: #aebfe4;
  font-size: 13px;
}

.fulfillment-table {
  min-width: 1180px;
}

.fulfillment-table th,
.fulfillment-table td,
.orders-table th,
.orders-table td {
  color: #edf4ff;
  font-size: 13px;
}

.fulfillment-table td strong,
.orders-table td strong {
  color: #ffffff;
  font-size: 14px;
}

.fulfillment-table td small,
.orders-table td small {
  color: #a9badf;
  font-size: 12px;
}

.order-status.blue {
  color: #d8eeff;
  background: rgba(64, 128, 255, 0.18);
  border-color: rgba(93, 186, 255, 0.65);
}

.finance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.finance-grid article {
  padding: 18px;
  border: 1px solid rgba(108, 163, 255, 0.3);
  border-radius: 10px;
  background: rgba(9, 20, 59, 0.82);
}

.finance-grid span {
  color: #a9c3f1;
  font-size: 13px;
  font-weight: 900;
}

.finance-grid b {
  display: block;
  margin-top: 12px;
  color: #f7fbff;
  font-size: 28px;
}

.finance-grid small {
  display: block;
  margin-top: 10px;
  color: #bdccef;
  font-size: 12px;
}

.finance-note {
  margin: 0 16px 16px;
  padding: 14px 16px;
  color: #c9d8f6;
  border: 1px solid rgba(102, 243, 194, 0.28);
  border-radius: 8px;
  background: rgba(9, 54, 68, 0.35);
  font-size: 13px;
  line-height: 1.7;
}

.fulfillment-detail-grid {
  margin-top: 0;
  padding: 14px;
}

@media (max-width: 1180px) {
  .fulfillment-kpis,
  .finance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fulfillment-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .fulfillment-kpis,
  .finance-grid,
  .fulfillment-filters {
    grid-template-columns: 1fr;
  }

  .fulfillment-panel-head,
  .fulfillment-tabs {
    align-items: stretch;
    flex-direction: column;
  }
}