:root {
  color-scheme: light;
  --bg: #f3f4f6;
  --surface: #ffffff;
  --surface-2: #ebeef3;
  --ink: #141820;
  --muted: #6b7280;
  --line: #e5e7eb;
  --text: var(--ink);
  --text-muted: var(--muted);
  --surface-muted: var(--surface-2);
  --accent: #3b82f6;
  --accent-strong: #1d4ed8;
  --accent-2: #60a5fa;
  --warning: #b45309;
  --danger: #dc2626;
  --ok: #059669;
  --shadow: 0 18px 40px rgba(20, 24, 32, 0.08);
  --radius: 18px;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Microsoft YaHei", sans-serif;
}

@media (max-width: 760px) {
  .resale-auto-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .resale-auto-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resale-auto-actions {
    width: 100%;
  }

  .resale-auto-actions .secondary-button {
    flex: 1;
  }

  .resale-token-pairing {
    grid-template-columns: 1fr 1fr;
  }

  .resale-token-pairing > div,
  .resale-token-pairing input {
    grid-column: 1 / -1;
  }
}

/* Selection handbook */
body[data-active-view^="handbook-"] .command-strip,
body[data-active-view^="handbook-"] .metric-grid,
body[data-active-view^="handbook-"] .main-grid {
  display: none;
}

.handbook-nav-group {
  display: grid;
  gap: 2px;
}

.handbook-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.handbook-nav-toggle b {
  color: #9aa3b2;
  font-size: 12px;
}

.handbook-subnav {
  display: grid;
  gap: 2px;
  padding-left: 10px;
}

.handbook-subnav-item {
  min-height: 30px;
  padding: 5px 12px;
  border: 0;
  border-left: 1px solid #e5e7eb;
  border-radius: 0 8px 8px 0;
  color: #6b7280;
  background: transparent;
  text-align: left;
  font-size: 12px;
}

.handbook-subnav-item:hover,
.handbook-subnav-item.active {
  border-left-color: var(--accent);
  color: var(--accent-strong);
  background: rgba(59, 130, 246, 0.08);
}

.panel.handbook-panel {
  grid-column: 1 / -1;
  padding: 0;
  overflow: hidden;
  background: #f5f8f9;
}

.handbook-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 166px;
  padding: 30px 34px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 20%, rgba(255, 255, 255, 0.2) 0 3px, transparent 4px),
    radial-gradient(circle at 81% 72%, rgba(255, 255, 255, 0.16) 0 2px, transparent 3px),
    linear-gradient(125deg, #073b4c 0%, #087e8b 56%, #22a699 100%);
}

.handbook-hero .eyebrow {
  margin: 0 0 9px;
  color: rgba(255, 255, 255, 0.68);
}

.handbook-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.handbook-title-row h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -1px;
}

.handbook-title-row + p {
  max-width: 720px;
  margin: 9px 0 0;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
}

.handbook-topic-badge {
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  font-size: 12px;
  font-weight: 700;
}

.handbook-version {
  display: grid;
  gap: 4px;
  min-width: 108px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  background: rgba(3, 39, 49, 0.24);
  text-align: right;
}

.handbook-version span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 11px;
}

.handbook-version strong {
  font-size: 16px;
}

.handbook-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 220px auto auto;
  align-items: end;
  gap: 12px;
  padding: 18px 24px 12px;
}

.handbook-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.handbook-toolbar input,
.handbook-toolbar select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: #fff;
}

.handbook-clear-button {
  min-height: 40px;
}

.handbook-result-count {
  align-self: center;
  justify-self: end;
  padding: 6px 10px;
  border-radius: 999px;
  color: #0b6e75;
  background: #dff3f1;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.handbook-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 24px 18px;
}

.handbook-summary > div {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid #dce7e9;
  border-radius: 9px;
  background: #fff;
}

.handbook-summary span {
  color: var(--muted);
  font-size: 11px;
}

.handbook-summary strong {
  color: #123b45;
  font-size: 18px;
}

.handbook-content {
  padding: 0 24px 24px;
}

.handbook-calendar-grid,
.handbook-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

.handbook-month-card,
.handbook-guide-card {
  min-width: 0;
  border: 1px solid #d9e4e6;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(13, 62, 72, 0.06);
}

.handbook-month-card > header {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 18px;
  color: #fff;
  background: linear-gradient(135deg, #0b6672, #15958f);
}

.handbook-month-number {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.13);
  font-size: 22px;
  font-weight: 900;
}

.handbook-month-card h3,
.handbook-guide-card h3 {
  margin: 0;
  font-size: 20px;
}

.handbook-month-card header p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  line-height: 1.55;
}

.handbook-weather {
  display: grid;
  gap: 5px;
  justify-items: end;
  white-space: nowrap;
}

.handbook-weather b,
.handbook-weather span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 11px;
}

.handbook-lead-time {
  margin: 14px 16px 0;
  padding: 9px 11px;
  border-left: 3px solid #f4a261;
  border-radius: 4px;
  color: #704b25;
  background: #fff6e9;
  font-size: 12px;
  line-height: 1.5;
}

.handbook-month-section {
  padding: 16px;
}

.handbook-month-section + .handbook-month-section {
  padding-top: 0;
}

.handbook-month-section h4,
.handbook-guide-block h4 {
  margin: 0 0 10px;
  color: #173e47;
  font-size: 14px;
}

.handbook-event-list,
.handbook-guide-block ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.handbook-event-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  padding: 9px;
  border-radius: 7px;
  background: #f5f8f9;
}

.handbook-event-list time {
  align-self: start;
  padding: 3px 6px;
  border-radius: 5px;
  color: #fff;
  background: #173e47;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.handbook-event-list div {
  display: grid;
  gap: 3px;
}

.handbook-event-list strong {
  color: #173e47;
  font-size: 12px;
}

.handbook-event-list span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.handbook-focus-list {
  display: grid;
  gap: 12px;
}

.handbook-focus-item {
  padding: 12px;
  border: 1px solid #dce7e9;
  border-radius: 8px;
  background: #fbfcfc;
}

.handbook-focus-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.handbook-focus-heading strong {
  color: #173e47;
  font-size: 13px;
}

.handbook-focus-heading span {
  padding: 3px 7px;
  border-radius: 999px;
  color: #97601f;
  background: #ffedcf;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.handbook-focus-item > p,
.handbook-guide-opportunity p {
  margin: 8px 0;
  color: #526b71;
  font-size: 12px;
  line-height: 1.65;
}

.handbook-product-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.handbook-product-tags span {
  padding: 4px 7px;
  border: 1px solid #d7e5e7;
  border-radius: 5px;
  color: #30545c;
  background: #fff;
  font-size: 10px;
}

.handbook-keywords {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.handbook-keywords b {
  color: var(--muted);
  font-size: 10px;
}

.handbook-keywords code {
  padding: 3px 6px;
  border-radius: 4px;
  color: #075e66;
  background: #e3f5f3;
  font-family: inherit;
  font-size: 10px;
}

.handbook-risk {
  margin: 10px 0 0 !important;
  padding-top: 9px;
  border-top: 1px dashed #d8e2e4;
  color: #725c4c !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}

.handbook-card-actions {
  display: flex;
  gap: 7px;
  margin-top: 11px;
}

.handbook-copy-button,
.handbook-use-button {
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
}

.handbook-copy-button {
  border: 1px solid #b8d9d8;
  color: #0b6e75;
  background: #fff;
}

.handbook-use-button {
  border: 1px solid #0b7881;
  color: #fff;
  background: #0b7881;
}

.handbook-guide-card {
  padding: 16px;
}

.handbook-guide-card > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 13px;
  border-bottom: 1px solid #e0e8ea;
}

.handbook-guide-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: #e5f4f2;
  font-size: 22px;
}

.handbook-guide-card header h3 {
  color: #173e47;
  font-size: 16px;
}

.handbook-guide-card header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.handbook-guide-card header > b {
  padding: 4px 7px;
  border-radius: 999px;
  color: #97601f;
  background: #ffedcf;
  font-size: 10px;
  white-space: nowrap;
}

.handbook-guide-opportunity {
  margin: 13px 0;
  padding: 11px;
  border-left: 3px solid #15958f;
  border-radius: 4px;
  background: #edf8f7;
}

.handbook-guide-opportunity span {
  color: #0b6e75;
  font-size: 10px;
  font-weight: 900;
}

.handbook-guide-opportunity p {
  margin-bottom: 0;
}

.handbook-guide-block {
  margin-top: 13px;
}

.handbook-guide-block li {
  position: relative;
  padding-left: 15px;
  color: #526b71;
  font-size: 11px;
  line-height: 1.55;
}

.handbook-guide-block li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: #15958f;
  content: "✓";
  font-weight: 900;
}

.handbook-empty {
  grid-column: 1 / -1;
  padding: 64px 24px;
  border: 1px dashed #c7d9dc;
  border-radius: 10px;
  color: var(--muted);
  background: #fff;
  text-align: center;
}

.handbook-note {
  margin: 0;
  padding: 0 24px 22px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

@media (max-width: 1280px) {
  .handbook-calendar-grid,
  .handbook-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .handbook-hero {
    align-items: flex-start;
    padding: 24px;
  }

  .handbook-version {
    display: none;
  }

  .handbook-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .handbook-search-field {
    grid-column: 1 / -1;
  }

  .handbook-result-count {
    justify-self: end;
  }
}

@media (max-width: 620px) {
  .handbook-hero {
    min-height: auto;
    padding: 21px 18px;
  }

  .handbook-title-row h2 {
    font-size: 26px;
  }

  .handbook-toolbar,
  .handbook-summary,
  .handbook-content {
    padding-right: 14px;
    padding-left: 14px;
  }

  .handbook-toolbar,
  .handbook-summary,
  .handbook-calendar-grid,
  .handbook-guide-grid {
    grid-template-columns: 1fr;
  }

  .handbook-search-field {
    grid-column: 1;
  }

  .handbook-clear-button {
    width: 100%;
  }

  .handbook-result-count {
    justify-self: start;
  }

  .handbook-month-card > header {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .handbook-month-number {
    width: 44px;
    height: 44px;
  }

  .handbook-weather {
    grid-column: 2;
    justify-items: start;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

body.auth-pending .app-shell {
  visibility: hidden;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 17, 22, 0.84);
}

.auth-gate[hidden] {
  display: none;
}

.auth-card {
  width: min(420px, 100%);
  padding: 28px;
  border: 1px solid rgba(48, 202, 228, 0.35);
  border-radius: 12px;
  color: #f4f8f9;
  background: #101d24;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

.auth-brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 120, 0.35);
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 236, 200, 0.18), transparent 42%),
    linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 100%);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 220, 170, 0.18);
}

.auth-brand-mark img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 10px;
}

.auth-card h1 {
  margin: 6px 0 8px;
  font-size: 25px;
}

.auth-subtitle {
  margin: 0 0 20px;
  color: rgba(244, 248, 249, 0.68);
  line-height: 1.6;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.auth-tabs button {
  border: 0;
  border-radius: 6px;
  padding: 9px 12px;
  color: rgba(244, 248, 249, 0.68);
  background: transparent;
}

.auth-tabs button.active {
  color: #102d36;
  background: #30cae4;
}

.auth-form {
  display: grid;
  gap: 13px;
}

.auth-form label {
  display: grid;
  gap: 6px;
  color: rgba(244, 248, 249, 0.78);
  font-size: 12px;
}

.auth-form input {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  padding: 9px 11px;
  color: #f4f8f9;
  background: #17252d;
  outline: none;
}

.auth-form input:focus {
  border-color: #30cae4;
}

.auth-submit {
  width: 100%;
  margin-top: 4px;
}

.auth-message {
  min-height: 18px;
  margin: 14px 0 0;
  color: #f6c36a;
  font-size: 12px;
}

body[data-active-view^="ops-"] .command-strip,
body[data-active-view^="ops-"] .metric-grid {
  display: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 12px;
  background: #0f1b20;
  color: #f4f8f9;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 4px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 120, 0.38);
  border-radius: 12px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 236, 200, 0.2), transparent 45%),
    linear-gradient(160deg, #1c1c1c 0%, #090909 100%);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 220, 170, 0.2);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
}

.brand strong,
.brand span,
.store-box strong,
.store-box span,
.store-box small {
  display: block;
}

.brand span,
.store-box small,
.store-box span {
  color: rgba(244, 248, 249, 0.68);
  font-size: 12px;
  margin-top: 3px;
}

.nav-list {
  display: grid;
  gap: 2px;
}

.nav-item {
  border: 0;
  border-radius: 8px;
  min-height: 34px;
  padding: 7px 12px;
  text-align: left;
  color: rgba(244, 248, 249, 0.78);
  background: transparent;
}

.nav-item:hover,
.nav-item.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.nav-download-link {
  display: block;
  min-height: 34px;
  border-radius: 8px;
  padding: 7px 12px;
  color: rgba(244, 248, 249, 0.78);
  background: transparent;
  text-decoration: none;
}

.nav-download-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.ai-selection-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ai-selection-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.8fr) repeat(4, minmax(130px, 0.75fr));
  gap: 12px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--surface-muted);
}

.ai-selection-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.ai-selection-toolbar input,
.ai-selection-toolbar select {
  width: 100%;
  min-height: 38px;
}

.ai-selection-wide-field {
  min-width: 0;
}

.ai-selection-checkbox {
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px !important;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.ai-selection-checkbox input {
  width: 16px;
  min-height: 16px;
}

.ai-selection-data-note,
.ai-selection-insight {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-top: 12px;
  padding: 11px 14px;
  border-left: 3px solid var(--accent);
  background: rgba(42, 157, 143, 0.08);
  color: var(--text-muted);
  font-size: 13px;
}

.ai-selection-data-note {
  border-left-color: #e9a23b;
  background: rgba(233, 162, 59, 0.08);
}

.ai-selection-insight strong {
  flex: 0 0 auto;
  color: var(--text);
}

.ai-market-growth {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid rgba(185, 126, 16, 0.32);
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 239, 197, 0.72), transparent 34%),
    linear-gradient(145deg, #fffdf8 0%, #f6f0e5 100%);
  box-shadow: 0 14px 34px rgba(88, 68, 32, 0.08);
}

.ai-market-growth[hidden] {
  display: none;
}

.ai-market-growth > header,
.ai-market-growth-l2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-market-growth > header > div {
  display: grid;
  gap: 3px;
}

.ai-market-growth > header span,
.ai-market-growth-l2 > span,
.ai-market-growth-children a > span {
  color: #9b6a14;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.ai-market-growth > header strong {
  color: var(--text);
  font-size: 18px;
}

.ai-market-growth > header small {
  color: var(--text-muted);
  font-size: 11px;
}

.ai-market-growth > header > em {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid rgba(185, 126, 16, 0.28);
  border-radius: 999px;
  background: rgba(255, 248, 228, 0.9);
  color: #9b6508;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.ai-market-growth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.ai-market-growth-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(185, 126, 16, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.ai-market-growth-l2 {
  align-items: flex-start;
}

.ai-market-growth-l2 > div {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.ai-market-growth-l2 > div strong {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-market-growth-l2 > div small,
.ai-market-growth-card > p,
.ai-market-growth-card > footer {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
}

.ai-market-growth-l2 > b {
  flex: 0 0 auto;
  color: #a56b06;
  font-size: 22px;
}

.ai-market-growth-l2 > b small {
  display: block;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
}

.ai-market-growth-window-scores {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.ai-market-growth-window-scores > span {
  display: grid;
  min-width: 58px;
  padding: 6px 8px;
  border: 1px solid rgba(185, 126, 16, 0.22);
  border-radius: 10px;
  background: rgba(255, 248, 228, 0.78);
  text-align: center;
}

.ai-market-growth-window-scores small {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 750;
}

.ai-market-growth-window-scores strong {
  color: #a56b06;
  font-size: 18px;
  line-height: 1.1;
}

.ai-market-growth-window-copy {
  display: grid;
  gap: 4px;
  margin-top: 9px;
}

.ai-market-growth-window-copy > p {
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
}

.ai-market-growth-window-copy strong {
  color: #8b651f;
}

.ai-market-growth-card > p {
  min-height: 34px;
  margin: 8px 0 0;
}

.ai-market-growth-children {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.ai-market-growth-children a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2px 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.ai-market-growth-children a:hover,
.ai-market-growth-children a:focus-visible {
  border-color: rgba(185, 126, 16, 0.58);
  transform: translateY(-1px);
}

.ai-market-growth-children a > strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-market-growth-children a > small {
  grid-column: 2 / 4;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-market-growth-children a > em {
  color: #247b60;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.ai-market-growth-children a > p {
  grid-column: 1 / 4;
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}

.ai-market-growth-children a > b {
  grid-column: 1 / 4;
  color: #9b6508;
  font-size: 10px;
  text-align: right;
}

.ai-market-growth-card > footer {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed rgba(185, 126, 16, 0.25);
}

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

.ai-selection-kpis > div {
  display: grid;
  gap: 5px;
  min-height: 78px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.ai-selection-kpis span {
  color: var(--text-muted);
  font-size: 12px;
}

.ai-selection-kpis strong {
  color: var(--text);
  font-size: 24px;
}

.ai-selection-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.ai-selection-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.ai-selection-card-image,
.ai-selection-card-image img {
  width: 92px;
  height: 92px;
  border-radius: 8px;
}

.ai-selection-card-image {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.16), rgba(23, 107, 135, 0.1));
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
}

.ai-selection-ai-placeholder {
  display: grid;
  gap: 3px;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 8px;
}

.ai-selection-ai-placeholder strong {
  color: var(--accent-strong);
  font-size: 24px;
}

.ai-selection-ai-placeholder small {
  color: var(--text-muted);
  font-size: 10px;
}

.ai-selection-image-link {
  display: block;
  width: 100%;
  height: 100%;
}

.ai-selection-card-image img {
  display: block;
  object-fit: cover;
  transition: transform 160ms ease;
}

.ai-selection-image-link:hover img,
.ai-selection-image-link:focus-visible img {
  transform: scale(1.04);
}

.ai-selection-card-main {
  min-width: 0;
}

.ai-selection-card-head,
.ai-selection-card-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ai-selection-card-head h3 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-selection-product-link {
  color: inherit;
  text-decoration: none;
}

.ai-selection-product-link:hover,
.ai-selection-product-link:focus-visible {
  color: var(--accent-strong);
  text-decoration: underline;
}

.ai-selection-card-head p,
.ai-selection-card-reason,
.ai-selection-card-footer small {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

.ai-selection-score {
  flex: 0 0 auto;
  color: var(--accent-strong);
  font-size: 22px;
  font-weight: 800;
}

.ai-selection-score span {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  text-align: right;
}

.ai-selection-card-head-aside {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 5px;
}

.ai-selection-card-head-aside .ai-selection-estimate-badge {
  min-height: 24px;
  padding: 3px 7px;
  white-space: nowrap;
}

.ai-selection-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.ai-selection-metrics span {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 10px;
}

.ai-selection-metrics strong {
  color: var(--text);
  font-size: 13px;
}

.ai-selection-card-reason {
  display: block;
  min-height: 34px;
  line-height: 1.5;
}

.ai-selection-card-concept {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 2px solid rgba(42, 157, 143, 0.45);
  background: rgba(42, 157, 143, 0.06);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.ai-selection-estimate-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(233, 162, 59, 0.12);
  color: #a46608;
  font-size: 11px;
  font-weight: 700;
}

.ai-selection-card-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}

.ai-selection-card-actions {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
}

.ai-selection-card-actions .secondary-button,
.ai-selection-card-actions .primary-button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
}

.ai-selection-card-actions .ai-selection-source-action {
  border-color: rgba(185, 126, 16, 0.7);
  color: #9b6508;
  background: rgba(255, 249, 233, 0.96);
  box-shadow: 0 5px 12px rgba(177, 119, 12, 0.1);
  white-space: nowrap;
}

.ai-selection-log {
  margin-top: 14px;
  max-height: 130px;
}

.ai-selection-view-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(640px, 100%);
  margin: 0 0 18px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(226, 233, 242, 0.72);
}

.ai-selection-view-switch button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 58px;
  padding: 8px 14px;
  border: 0;
  border-radius: 12px;
  color: var(--text-muted);
  background: transparent;
  text-align: left;
}

.ai-selection-view-switch button.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(40, 52, 71, 0.1);
}

.ai-selection-view-switch button i {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  color: #7c8797;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.ai-selection-view-switch button.active i {
  background: linear-gradient(145deg, #f8dc7d, #e5ad24);
  color: #4b3705;
}

.ai-selection-view-switch button span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.ai-selection-view-switch button strong {
  font-size: 13px;
}

.ai-selection-view-switch button small {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-ai-selection-mode-panel][hidden] {
  display: none !important;
}

.category-growth-radar {
  display: grid;
  gap: 16px;
}

.category-growth-header {
  position: relative;
  display: flex;
  min-height: 170px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(200, 210, 225, 0.9);
  border-radius: 24px;
  background:
    radial-gradient(circle at 84% 34%, rgba(95, 195, 180, 0.18), transparent 28%),
    radial-gradient(circle at 72% 80%, rgba(145, 119, 240, 0.13), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 244, 250, 0.96));
}

.category-growth-header::after {
  position: absolute;
  top: -62px;
  right: 8%;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.85), 0 25px 80px rgba(110, 126, 160, 0.14);
  content: "";
}

.category-growth-header > * {
  position: relative;
  z-index: 1;
}

.category-growth-header h2 {
  margin: 6px 0 6px;
  color: var(--text);
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.05em;
}

.category-growth-header > div > p:last-child {
  max-width: 690px;
  margin: 0;
  color: var(--text-muted);
  line-height: 1.7;
}

.category-growth-header-status {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 170px;
}

.category-growth-header-status small {
  color: var(--text-muted);
  font-size: 11px;
}

.category-growth-toolbar {
  display: grid;
  grid-template-columns: 160px 180px minmax(180px, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.category-growth-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.category-growth-toolbar select {
  width: 100%;
  min-height: 40px;
}

.category-growth-toolbar-note {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--text-muted);
  font-size: 11px;
}

.category-growth-toolbar-note i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #39b69f;
  box-shadow: 0 0 0 5px rgba(57, 182, 159, 0.12);
}

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

.category-growth-kpis article {
  position: relative;
  display: grid;
  min-height: 112px;
  align-content: center;
  gap: 5px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
}

.category-growth-kpis article::after {
  position: absolute;
  right: -18px;
  bottom: -25px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(104, 124, 160, 0.05);
  content: "";
}

.category-growth-kpis article.coverage {
  background: linear-gradient(135deg, rgba(231, 250, 245, 0.98), rgba(255, 255, 255, 0.95));
}

.category-growth-kpis span,
.category-growth-kpis small {
  color: var(--text-muted);
  font-size: 11px;
}

.category-growth-kpis strong {
  color: var(--text);
  font-size: 28px;
  letter-spacing: -0.04em;
}

.category-growth-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(340px, 0.72fr);
  align-items: start;
  gap: 16px;
}

.category-growth-list-card,
.category-growth-detail {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
}

.category-growth-list-card > header,
.category-growth-detail > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.category-growth-list-card > header div,
.category-growth-detail > header > div:first-child {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.category-growth-list-card > header span,
.category-growth-detail > header span {
  color: #9b6b08;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.category-growth-list-card > header strong,
.category-growth-detail > header strong {
  color: var(--text);
  font-size: 17px;
}

.category-growth-list-card > header small,
.category-growth-detail > header small {
  color: var(--text-muted);
  font-size: 10px;
}

.category-growth-detail > header em {
  overflow: hidden;
  color: #8490a0;
  font-size: 9px;
  font-style: normal;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-growth-list {
  display: grid;
  max-height: 610px;
  overflow: auto;
  padding: 8px;
}

.category-growth-row {
  display: grid;
  grid-template-columns: 34px minmax(180px, 1fr) 140px 72px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--text);
  background: transparent;
  text-align: left;
}

.category-growth-row + .category-growth-row {
  border-top-color: rgba(218, 225, 235, 0.78);
}

.category-growth-row:hover,
.category-growth-row.active {
  border-color: rgba(221, 173, 55, 0.5);
  background: linear-gradient(105deg, rgba(255, 249, 230, 0.8), rgba(243, 247, 252, 0.74));
}

.category-growth-rank {
  color: #ad7c17;
  font-size: 12px;
  font-weight: 800;
}

.category-growth-row-main {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.category-growth-row-main small,
.category-growth-row-main em,
.category-growth-row-score small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-growth-row-main strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-growth-row-original {
  overflow: hidden;
  color: #7f8b9a;
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-growth-row-trend {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
}

.category-growth-row-trend > b {
  color: var(--text-muted);
  font-size: 10px;
}

.category-growth-row-trend > b.positive {
  color: #0d8d70;
}

.category-growth-sparkline {
  width: 100%;
  height: 38px;
  overflow: visible;
}

.category-growth-sparkline polygon {
  fill: rgba(37, 164, 141, 0.09);
}

.category-growth-sparkline polyline,
.category-growth-sparkline path {
  fill: none;
  stroke: #24a98e;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.category-growth-sparkline.pending path {
  stroke: #cbd4df;
  stroke-dasharray: 4 5;
}

.category-growth-row-score,
.category-growth-detail-score {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 56px;
  border-radius: 14px;
  background: #edf2f7;
}

.category-growth-row-score b,
.category-growth-detail-score b {
  color: #344153;
  font-size: 22px;
}

.category-growth-row-score.high,
.category-growth-detail-score.high {
  background: linear-gradient(145deg, #f9df83, #e1ac24);
}

.category-growth-row-score.medium,
.category-growth-detail-score.medium {
  background: linear-gradient(145deg, #e3f8f2, #c9eee4);
}

.category-growth-detail {
  position: sticky;
  top: 12px;
  overflow: hidden;
}

.category-growth-detail-score {
  flex: 0 0 72px;
  min-height: 66px;
}

.category-growth-detail-score span {
  color: rgba(39, 47, 60, 0.68) !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
}

.category-growth-detail-summary {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 18px;
}

.category-growth-radar-visual {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.category-growth-radar-visual > span {
  color: var(--text-muted);
  font-size: 10px;
}

.category-growth-radar-visual > span b {
  color: var(--text);
}

.category-growth-radar-chart {
  width: 170px;
  height: 170px;
  overflow: visible;
}

.category-growth-radar-chart .grid polygon,
.category-growth-radar-chart .grid line {
  fill: rgba(229, 235, 243, 0.28);
  stroke: #cdd7e3;
  stroke-width: 0.8;
}

.category-growth-radar-chart .value {
  fill: rgba(43, 175, 151, 0.2);
  stroke: #1aa78b;
  stroke-linejoin: round;
  stroke-width: 2;
}

.category-growth-radar-chart circle {
  fill: #d6a425;
}

.category-growth-facts {
  display: grid;
  gap: 7px;
}

.category-growth-facts > div {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 10px;
  background: #f3f6fa;
}

.category-growth-facts span {
  color: var(--text-muted);
  font-size: 9px;
}

.category-growth-facts strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-growth-dimensions {
  display: grid;
  gap: 9px;
  padding: 0 20px 18px;
}

.category-growth-detail-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 18px 16px;
}

.category-growth-detail-links a {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #d7e0ea;
  border-radius: 11px;
  color: #263445;
  background: linear-gradient(135deg, #fff, #f3f7fb);
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.category-growth-detail-links a:hover {
  border-color: rgba(213, 164, 34, 0.72);
  color: #8b6209;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(91, 107, 132, 0.1);
}

.category-growth-detail-links a span {
  color: #c68d11;
  font-size: 13px;
}

.category-growth-dimension {
  display: grid;
  gap: 5px;
}

.category-growth-dimension > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-muted);
  font-size: 10px;
}

.category-growth-dimension > div b {
  color: var(--text);
}

.category-growth-dimension > i {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7edf3;
}

.category-growth-dimension > i span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #28aa8f, #e4b135);
}

.category-growth-dimension.unavailable {
  opacity: 0.55;
}

.category-growth-finding {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 18px 18px;
  padding: 13px;
  border-radius: 13px;
  background: rgba(236, 244, 250, 0.9);
}

.category-growth-finding > i {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: #d7a51f;
  box-shadow: 0 0 0 5px rgba(215, 165, 31, 0.12);
}

.category-growth-finding p {
  display: grid;
  gap: 3px;
  margin: 0;
}

.category-growth-finding strong {
  color: var(--text);
  font-size: 11px;
}

.category-growth-finding span {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.55;
}

.category-growth-detail > footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}

.category-growth-detail > footer span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f1f5f8;
  color: var(--text-muted);
  font-size: 9px;
}

.category-growth-empty {
  display: grid;
  min-height: 240px;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 28px;
  color: var(--text-muted);
  text-align: center;
}

.category-growth-empty strong {
  color: var(--text);
  font-size: 14px;
}

.category-growth-empty span {
  max-width: 440px;
  font-size: 11px;
  line-height: 1.6;
}

.category-growth-source-note {
  margin: 0;
  padding: 11px 14px;
  border-left: 3px solid #2aae92;
  background: rgba(42, 174, 146, 0.07);
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .ai-selection-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ai-selection-wide-field {
    grid-column: span 2;
  }

  .category-growth-workspace {
    grid-template-columns: 1fr;
  }

  .category-growth-detail {
    position: static;
  }
}

@media (max-width: 760px) {
  .ai-selection-toolbar,
  .ai-selection-results,
  .ai-selection-kpis,
  .ai-market-growth-grid {
    grid-template-columns: 1fr;
  }

  .ai-market-growth {
    padding: 14px;
  }

  .ai-market-growth > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-market-growth-l2 {
    flex-wrap: wrap;
  }

  .ai-market-growth-window-scores {
    width: 100%;
  }

  .ai-market-growth-window-scores > span {
    flex: 1;
  }

  .ai-selection-wide-field {
    grid-column: auto;
  }

  .ai-selection-card {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .ai-selection-card-image,
  .ai-selection-card-image img {
    width: 72px;
    height: 72px;
  }

  .ai-selection-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-selection-card-head h3 {
    white-space: normal;
  }

  .ai-selection-card-actions {
    flex-wrap: wrap;
  }

  .ai-selection-view-switch,
  .category-growth-kpis,
  .category-growth-toolbar,
  .category-growth-detail-summary {
    grid-template-columns: 1fr;
  }

  .category-growth-header {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    padding: 22px;
  }

  .category-growth-header-status {
    justify-items: start;
  }

  .category-growth-row {
    grid-template-columns: 28px minmax(0, 1fr) 62px;
  }

  .category-growth-row-trend {
    grid-column: 2 / -1;
  }

  .category-growth-radar-visual {
    order: 2;
  }

  .category-growth-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-growth-detail-links {
    grid-template-columns: 1fr;
  }
}

.operations-nav {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.operations-nav-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 0;
  padding: 4px 6px 10px;
  color: #fff;
  background: transparent;
  font-weight: 800;
}

.operations-nav-toggle > span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.operations-nav-toggle b {
  color: rgba(244, 248, 249, 0.55);
  font-size: 12px;
  transition: transform 0.16s ease;
}

.operations-nav.collapsed .operations-nav-toggle b {
  transform: rotate(180deg);
}

.operations-store-icon {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 12px;
  border: 2px solid #4aa3ff;
  border-top: 0;
  border-radius: 2px;
}

.operations-store-icon::before {
  position: absolute;
  top: -5px;
  left: -3px;
  width: 17px;
  height: 4px;
  border-radius: 2px 2px 1px 1px;
  background: repeating-linear-gradient(90deg, #4aa3ff 0 2px, #dcecff 2px 3px);
  content: "";
}

.operations-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 6px;
}

.operations-nav.collapsed .operations-nav-grid {
  display: none;
}

.operations-nav-item {
  min-width: 0;
  border: 0;
  border-radius: 6px;
  padding: 5px 6px;
  color: rgba(244, 248, 249, 0.78);
  background: transparent;
  text-align: left;
  white-space: nowrap;
}

.operations-nav-item:hover,
.operations-nav-item.active {
  color: #fff;
  background: rgba(74, 163, 255, 0.15);
}

.operations-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
}

.operations-nav-link span {
  color: rgba(235, 248, 248, 0.4);
  font-size: 10px;
}

.operations-workspace .panel-header p:last-child {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.operations-empty-state {
  display: flex;
  min-height: 190px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  border: 1px dashed var(--line);
  background: #f8fafb;
  text-align: center;
}

.operations-empty-state span {
  max-width: 520px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.shop-message-workspace {
  display: grid;
  gap: 16px;
}

.shop-message-header,
.shop-message-actions,
.shop-message-inbox-head,
.shop-message-conversation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shop-message-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.shop-message-external {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

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

.shop-message-kpis article {
  display: grid;
  gap: 5px;
  min-height: 82px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fbfefe 0%, #f3f9f9 100%);
}

.shop-message-kpis span,
.shop-message-inbox-head span,
.shop-message-conversation-head span {
  color: var(--muted);
  font-size: 11px;
}

.shop-message-kpis strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 21px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-message-kpis article:first-child strong {
  color: var(--teal);
  font-size: 16px;
}

.shop-message-layout {
  display: grid;
  grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
  min-height: 480px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.shop-message-inbox {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  border-right: 1px solid var(--line);
  background: #f8fbfb;
}

.shop-message-inbox-head,
.shop-message-conversation-head {
  min-height: 66px;
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
}

.shop-message-inbox-head > div,
.shop-message-conversation-head > div {
  display: grid;
  gap: 4px;
}

.shop-message-unread-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.shop-message-list,
.shop-message-thread {
  overflow: auto;
}

.shop-message-card {
  display: grid;
  width: 100%;
  gap: 7px;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.shop-message-card:hover,
.shop-message-card.active {
  background: #e9f7f5;
}

.shop-message-card-head,
.shop-message-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.shop-message-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-message-card-meta,
.shop-message-card-id {
  color: var(--muted);
  font-size: 10px;
}

.shop-message-unread-badge {
  min-width: 22px;
  border-radius: 999px;
  padding: 3px 7px;
  color: #fff;
  background: #0aa887;
  font-size: 10px;
  text-align: center;
}

.shop-message-conversation {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  background: #fff;
}

.shop-message-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: linear-gradient(180deg, #fbfefe 0%, #f5f9f9 100%);
}

.shop-message-bubble {
  display: grid;
  max-width: min(76%, 620px);
  gap: 6px;
  align-self: flex-start;
  border: 1px solid var(--line);
  border-radius: 4px 14px 14px;
  padding: 11px 13px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(17, 65, 67, 0.05);
}

.shop-message-bubble.seller {
  align-self: flex-end;
  border-color: #b8e4dd;
  border-radius: 14px 4px 14px 14px;
  background: #def4ef;
}

.shop-message-bubble p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.shop-message-bubble small {
  color: var(--muted);
  font-size: 10px;
}

.shop-message-empty {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.shop-message-empty strong {
  color: var(--ink);
}

.shop-message-empty span {
  max-width: 520px;
  font-size: 12px;
  line-height: 1.6;
}

.shop-message-note {
  display: flex;
  gap: 10px;
  border-left: 3px solid #e6a23c;
  border-radius: 8px;
  padding: 10px 13px;
  color: #845710;
  background: #fff8e9;
  font-size: 11px;
  line-height: 1.6;
}

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

  .shop-message-layout {
    grid-template-columns: 1fr;
  }

  .shop-message-inbox {
    max-height: 340px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .shop-message-conversation {
    min-height: 420px;
  }
}

.promotion-workspace .panel-header > div:first-child > p:last-child {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.promotion-header-actions,
.promotion-detail-header,
.promotion-product-footer,
.promotion-pane-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.promotion-view-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 14px;
  padding: 3px;
  border: 1px solid #dce7e9;
  border-radius: 10px;
  background: #eef4f5;
}

.promotion-view-tabs button {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  color: #62757b;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.promotion-view-tabs button:hover {
  color: #1f3d44;
  background: rgba(255, 255, 255, 0.55);
}

.promotion-view-tabs button.active {
  color: #065f65;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(28, 45, 54, 0.1);
}

.promotion-toolbar {
  display: flex;
  max-width: 760px;
  align-items: flex-end;
  gap: 9px;
  margin-bottom: 14px;
}

.promotion-toolbar label {
  display: flex;
  min-width: 250px;
  align-items: center;
  gap: 10px;
}

.promotion-toolbar label span {
  flex: none;
  font-weight: 700;
}

.promotion-toolbar select,
.promotion-toolbar input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 10px;
  background: #fff;
}

.promotion-toolbar input {
  min-width: 220px;
}

.promotion-toolbar .secondary-button {
  width: auto;
  min-height: 38px;
  padding: 0 13px;
}

.promotion-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.promotion-kpi-grid > div {
  padding: 12px;
  border: 1px solid var(--line);
  background: #f7fafb;
}

.promotion-kpi-grid span,
.promotion-kpi-grid strong {
  display: block;
}

.promotion-kpi-grid span {
  color: var(--muted);
  font-size: 11px;
}

.promotion-kpi-grid strong {
  margin-top: 4px;
  font-size: 21px;
}

.promotion-layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  min-height: 470px;
  border: 1px solid var(--line);
}

.promotion-actions-pane {
  min-width: 0;
  border-right: 1px solid var(--line);
  background: #f7f9fa;
}

.promotion-pane-title {
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.promotion-action-table-wrap {
  border: 1px solid var(--line);
}

.promotion-action-table-wrap table {
  min-width: 900px;
}

.promotion-action-table-wrap th,
.promotion-action-table-wrap td {
  padding: 11px 12px;
  vertical-align: middle;
}

.promotion-action-row:hover,
.promotion-action-row.active {
  background: #f1f8f8;
}

.promotion-action-row td > strong,
.promotion-action-row td > span:not(.badge) {
  display: block;
}

.promotion-action-row td > span:not(.badge) {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.promotion-action-row .secondary-button {
  width: auto;
  min-height: 32px;
  padding: 0 9px;
}

.promotion-pane-title span {
  color: var(--muted);
  font-size: 11px;
}

.promotion-action-list {
  max-height: 540px;
  overflow-y: auto;
  padding: 8px;
}

.promotion-action-item {
  display: block;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 10px;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.promotion-action-item + .promotion-action-item {
  margin-top: 5px;
}

.promotion-action-item:hover,
.promotion-action-item.active {
  border-color: #abd0d4;
  background: #fff;
}

.promotion-action-item strong,
.promotion-action-item em,
.promotion-action-item span,
.promotion-action-item small {
  display: block;
}

.promotion-action-item strong {
  line-height: 1.4;
}

.promotion-action-item span,
.promotion-action-item small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.promotion-action-item em {
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-action-item small {
  color: var(--accent);
  font-weight: 700;
}

.promotion-products-pane {
  min-width: 0;
  margin-top: 16px;
  border: 1px solid var(--line);
  padding: 14px;
}

.promotion-detail-empty {
  display: flex;
  min-height: 430px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  color: var(--muted);
  text-align: center;
}

.promotion-detail-empty strong {
  color: var(--ink);
}

.promotion-detail-header {
  align-items: flex-start;
  padding-bottom: 12px;
}

.promotion-detail-header h3 {
  margin: 7px 0 3px;
  font-size: 16px;
}

.promotion-detail-header p {
  color: var(--muted);
  font-size: 11px;
}

.promotion-notice {
  margin-bottom: 10px;
  padding: 9px 10px;
  border-left: 3px solid var(--warning);
  color: #725321;
  background: #fff9ed;
  font-size: 11px;
}

.promotion-product-table-wrap {
  min-height: 260px;
  border: 1px solid var(--line);
}

.promotion-product-table-wrap table {
  min-width: 980px;
}

.promotion-product-info {
  display: flex;
  min-width: 330px;
  align-items: center;
  gap: 10px;
}

.promotion-product-image {
  display: flex;
  width: 58px;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  background: #f4f7f8;
  font-size: 9px;
}

.promotion-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.promotion-product-info > div {
  min-width: 0;
}

.promotion-product-info > div > strong,
.promotion-product-info > div > span,
.promotion-product-info > div > small {
  display: block;
}

.promotion-product-info > div > .text-link,
.promotion-product-info > div > strong {
  display: -webkit-box;
  overflow: hidden;
  max-width: 360px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.promotion-product-info > div > span,
.promotion-product-info > div > small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.promotion-product-table-wrap th,
.promotion-product-table-wrap td {
  padding: 9px 8px;
  vertical-align: middle;
}

.promotion-product-table-wrap th:first-child,
.promotion-product-table-wrap td:first-child {
  width: 36px;
  min-width: 36px;
  max-width: 40px;
  padding-left: 10px;
  padding-right: 4px;
  text-align: center;
}

.promotion-product-table-wrap input[type="checkbox"],
.relist-table-wrap input[type="checkbox"],
.erp-order-table input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  accent-color: #087f86;
  cursor: pointer;
  transform: none;
}

.promotion-product-table-wrap input[type="number"] {
  width: 100px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 7px;
}

.promotion-product-footer {
  padding-top: 11px;
}

.promotion-product-footer > span {
  color: var(--muted);
  font-size: 11px;
}

.promotion-product-footer .primary-button {
  width: auto;
}

.primary-button.danger-button {
  background: var(--danger);
}

.relist-workspace .panel-header > div:first-child > p:last-child {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.relist-notice {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-left: 3px solid #3689e6;
  background: #eef6ff;
  color: #36536c;
  font-size: 12px;
  line-height: 1.5;
}

.relist-notice strong {
  display: grid;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #3689e6;
  font-size: 11px;
}

.relist-toolbar,
.relist-filter-grid,
.relist-selection-row,
.relist-status-tabs {
  display: flex;
  align-items: end;
  gap: 10px;
}

.relist-toolbar {
  padding: 10px 0;
}

.relist-toolbar label,
.relist-filter-grid label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.relist-toolbar label > span,
.relist-filter-grid label > span {
  color: var(--muted);
  font-size: 10px;
}

.relist-toolbar select,
.relist-filter-grid select,
.relist-filter-grid input {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
}

.relist-store-field {
  width: 220px;
}

.relist-filter-grid {
  display: grid;
  grid-template-columns: 180px 130px minmax(260px, 1fr) minmax(340px, auto);
  padding: 10px 0 12px;
  border-top: 1px solid var(--line);
}

.relist-date-field {
  display: grid !important;
  grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr);
  align-items: end;
}

.relist-date-field > span {
  grid-column: 1 / -1;
}

.relist-date-field b {
  align-self: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.relist-selection-row {
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 11px;
}

.relist-selection-row strong {
  margin-right: 4px;
}

.relist-selection-row em {
  color: var(--danger);
  font-style: normal;
}

.relist-selection-row > span {
  margin-right: auto;
  color: var(--muted);
}

.relist-status-tabs {
  align-items: center;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.relist-status-tabs button {
  flex: 0 0 auto;
  padding: 10px 13px 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  background: transparent;
  font-weight: 700;
  white-space: nowrap;
}

.relist-status-tabs button:hover,
.relist-status-tabs button.active {
  border-bottom-color: #3689e6;
  color: #216fc3;
}

.relist-table-wrap {
  max-height: 600px;
  overflow: auto;
}

.relist-table-wrap table {
  min-width: 1040px;
}

.relist-table-wrap thead {
  position: sticky;
  z-index: 2;
  top: 0;
  background: #f7f9fa;
}

.relist-table-wrap th,
.relist-table-wrap td {
  padding: 9px 10px;
  vertical-align: middle;
}

.relist-table-wrap td > strong,
.relist-table-wrap td > span,
.relist-table-wrap td > small {
  display: block;
}

.relist-table-wrap td > span:not(.badge),
.relist-table-wrap td > small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.relist-product-info {
  display: grid;
  grid-template-columns: 64px minmax(220px, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 330px;
}

.relist-product-image {
  display: grid;
  width: 64px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: #f4f7f8;
  font-size: 9px;
}

.relist-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.relist-product-info > div {
  min-width: 0;
}

.relist-product-info .text-link,
.relist-product-info strong {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.relist-product-info span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.relist-empty-state {
  display: flex;
  min-height: 280px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  text-align: center;
}

.relist-empty-state strong {
  color: var(--ink);
  font-size: 14px;
}

.relist-empty-state span {
  font-size: 11px;
}

.relist-confirm-dialog {
  width: min(880px, calc(100% - 32px));
  max-height: 88vh;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(15, 27, 32, 0.24);
}

.relist-confirm-dialog::backdrop {
  background: rgba(15, 27, 32, 0.58);
}

.relist-confirm-header,
.relist-confirm-header > div,
.relist-confirm-footer,
.relist-confirm-footer > div {
  display: flex;
  align-items: center;
}

.relist-confirm-header {
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.relist-confirm-header > div {
  min-width: 0;
  gap: 12px;
}

.relist-confirm-header h2,
.relist-confirm-header p {
  margin: 0;
}

.relist-confirm-header h2 {
  font-size: 18px;
}

.relist-confirm-header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.relist-confirm-icon {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--warning);
  font-weight: 800;
}

.relist-confirm-warning {
  margin: 14px 20px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--warning);
  color: #704100;
  background: #fff7e8;
  font-size: 11px;
  line-height: 1.6;
}

.relist-confirm-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 14px 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--line);
}

.relist-confirm-summary > div {
  padding: 10px 12px;
  background: #f7f9fa;
}

.relist-confirm-summary span,
.relist-confirm-summary strong {
  display: block;
}

.relist-confirm-summary span {
  color: var(--muted);
  font-size: 10px;
}

.relist-confirm-summary strong {
  margin-top: 3px;
  font-size: 18px;
}

.relist-confirm-products {
  max-height: min(420px, 42vh);
  overflow-y: auto;
  padding: 0 20px;
}

.relist-confirm-product {
  display: grid;
  grid-template-columns: 54px minmax(230px, 1fr) 110px 70px 90px;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.relist-confirm-product-image {
  display: grid;
  width: 54px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  background: #f4f7f8;
  font-size: 9px;
}

.relist-confirm-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.relist-confirm-product-main,
.relist-confirm-product > div {
  min-width: 0;
}

.relist-confirm-product-main strong,
.relist-confirm-product-main span,
.relist-confirm-product > div > span,
.relist-confirm-product > div > strong {
  display: block;
}

.relist-confirm-product-main strong {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.relist-confirm-product-main span,
.relist-confirm-product > div > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.relist-confirm-product > div > strong {
  margin-top: 3px;
  font-size: 12px;
}

.relist-confirm-footer {
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: #f7f9fa;
}

.relist-confirm-footer > span {
  color: var(--muted);
  font-size: 11px;
}

.relist-confirm-footer > div {
  gap: 8px;
}

.relist-confirm-footer .primary-button,
.relist-confirm-footer .secondary-button {
  width: auto;
}

.store-box {
  margin-top: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.store-box-actions,
.store-auth-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.account-box {
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #f4f8f9;
}

.account-box span,
.account-box strong {
  display: block;
}

.account-box span {
  color: rgba(244, 248, 249, 0.55);
  font-size: 11px;
}

.account-box strong {
  margin-top: 4px;
  overflow: hidden;
  color: rgba(244, 248, 249, 0.88);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-link-button {
  margin-top: 7px;
  border: 0;
  padding: 0;
  color: var(--accent-strong);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
}

.store-auth-page {
  display: grid;
  gap: 14px;
}

.store-auth-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #a9812e;
  border-radius: 14px;
  padding: 24px 26px;
  background:
    radial-gradient(circle at 92% 18%, rgba(239, 199, 96, 0.18), transparent 27%),
    radial-gradient(circle at 6% 118%, rgba(210, 161, 57, 0.12), transparent 36%),
    linear-gradient(135deg, #353128 0%, #28251f 52%, #1b1a17 100%);
  box-shadow: 0 12px 26px rgba(48, 38, 20, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #fffaf0;
}

.store-auth-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.18;
  background-image: radial-gradient(rgba(244, 215, 139, 0.42) 0.7px, transparent 0.8px);
  background-size: 15px 15px;
  content: "";
}

.store-auth-hero h2 {
  margin: 4px 0 6px;
  color: #fffaf0;
  font-size: 25px;
  letter-spacing: -0.02em;
}

.store-auth-hero p:last-child {
  margin: 0;
  color: rgba(245, 235, 213, 0.74);
  font-size: 13px;
}

.store-auth-hero .eyebrow {
  color: #e7c66e;
}

.store-auth-hero-actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.store-auth-hero-actions .secondary-button {
  border-color: rgba(231, 198, 110, 0.48);
  color: #fff9eb;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.store-auth-hero-actions .secondary-button:hover {
  border-color: #e7c66e;
  background: rgba(255, 255, 255, 0.13);
}

.store-auth-hero-actions .primary-button {
  border-color: #c89422;
  color: #2b200c;
  background: linear-gradient(145deg, #f2d36f, #c58b18);
  box-shadow: 0 9px 20px rgba(2, 2, 2, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

.store-auth-hero-actions .primary-button:hover {
  background: linear-gradient(145deg, #f7dd83, #d09a27);
}

.store-auth-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.store-auth-summary-card {
  display: grid;
  min-height: 102px;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
  background: var(--surface);
}

.store-auth-summary-card span,
.store-auth-summary-card small {
  color: var(--muted);
  font-size: 12px;
}

.store-auth-summary-card strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.8fr);
  gap: 14px;
}

.store-auth-list-panel,
.store-auth-guide {
  min-width: 0;
}

.store-auth-list {
  display: grid;
  gap: 10px;
}

.store-auth-empty {
  display: grid;
  min-height: 200px;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.store-auth-empty strong,
.store-auth-empty span {
  display: block;
}

.store-auth-empty strong {
  color: var(--ink);
  font-size: 16px;
}

.store-auth-empty span {
  margin-top: 6px;
  font-size: 12px;
}

.store-auth-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid #b9dce1;
  border-radius: 8px;
  padding: 16px;
  background: #f7fbfb;
}

.store-auth-card.active {
  border-color: #167b91;
  box-shadow: 0 0 0 2px rgba(22, 123, 145, 0.08);
}

.store-auth-card-main,
.store-auth-card-title,
.store-auth-card-meta {
  display: flex;
  align-items: center;
}

.store-auth-warehouse-count {
  color: #0f766e;
  font-weight: 900;
}

.store-auth-warehouses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.store-auth-warehouses span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid #c9e6e3;
  border-radius: 999px;
  background: #ecfdf8;
  color: #315f5b;
  font-size: 10px;
  font-weight: 700;
}

.store-auth-warehouses span b {
  color: #07857c;
}

.store-auth-warehouses span.empty {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #94a3b8;
}

.store-auth-card-main {
  min-width: 0;
  gap: 12px;
}

.store-auth-card-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: #167b91;
  font-weight: 800;
  letter-spacing: 0;
}

.store-auth-card-copy {
  min-width: 0;
}

.store-auth-card-title {
  gap: 8px;
  min-width: 0;
}

.store-auth-card-title strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-auth-card-meta {
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.store-auth-card-note {
  margin-top: 7px;
  color: #9a6700;
  font-size: 12px;
  font-weight: 700;
}

.store-auth-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.store-auth-method {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  background: #f8fafb;
}

.store-auth-method.active {
  border-color: #69bcc8;
  background: #effafa;
}

.store-auth-method strong {
  color: var(--ink);
  font-size: 13px;
}

.store-auth-method span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.store-auth-method .secondary-button {
  width: fit-content;
  margin-top: 3px;
}

.store-auth-security {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  border-left: 3px solid #e8a52f;
  padding: 10px 12px;
  background: #fff9ed;
}

.store-auth-security strong {
  color: #855d12;
  font-size: 12px;
}

.store-auth-security span {
  color: #806c4c;
  font-size: 12px;
  line-height: 1.55;
}

.store-auth-dialog {
  width: min(520px, calc(100vw - 32px));
  border: 0;
  border-radius: 10px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: 0 24px 70px rgba(10, 28, 38, 0.28);
}

.store-auth-dialog::backdrop {
  background: rgba(5, 19, 27, 0.54);
}

.store-auth-dialog-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  background: var(--surface);
}

.store-auth-dialog-card .panel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  margin: -2px 0 2px;
}

.store-auth-dialog-card .panel-header > div:first-child {
  min-width: 0;
  flex: none;
}

.store-auth-dialog-card label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.store-auth-dialog-card input,
.store-auth-dialog-card select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px 11px;
  color: var(--ink);
  background: #f8fafb;
  font: inherit;
}

.store-auth-dialog-card input:focus,
.store-auth-dialog-card select:focus {
  outline: 2px solid rgba(22, 123, 145, 0.25);
  border-color: #167b91;
}

.store-auth-dialog.listing-publish-dialog {
  width: min(680px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow-x: hidden;
  overflow-y: auto;
}

.listing-publish-card {
  width: 100%;
}

.listing-publish-warning {
  border: 1px solid #efd9ae;
  border-radius: 8px;
  padding: 11px 12px;
  color: #83591e;
  background: #fff9ed;
  font-size: 12px;
  line-height: 1.6;
}

.listing-publish-store-fieldset {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafb;
}

.listing-publish-store-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.listing-publish-store-heading > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.listing-publish-store-heading strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.listing-publish-store-heading strong span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  padding: 0 7px;
  color: #08766f;
  background: #dff5ef;
  font-size: 10px;
  font-weight: 800;
}

.listing-publish-store-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

.listing-publish-store-heading .text-button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 4px 8px;
  color: #167b91;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.listing-publish-store-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  max-height: 246px;
  overflow-y: auto;
  padding-right: 2px;
}

.store-auth-dialog-card .listing-publish-store-option {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(220px, 1.1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  border: 1px solid #d9e2e6;
  border-radius: 9px;
  padding: 10px 11px;
  background: #fff;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.store-auth-dialog-card .listing-publish-store-option.is-selected {
  border-color: #167b91;
  background: #eef8fa;
  box-shadow: 0 0 0 1px rgba(22, 123, 145, 0.08);
}

.store-auth-dialog-card .listing-publish-store-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  cursor: pointer;
}

.store-auth-dialog-card .listing-publish-store-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: #167b91;
}

.listing-publish-store-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.listing-publish-store-copy strong,
.listing-publish-store-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-publish-store-copy strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.listing-publish-store-copy small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.store-auth-dialog-card .listing-publish-warehouse-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #60777b;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.listing-publish-warehouse-field select,
.listing-publish-warehouse-field > .suite-select {
  min-width: 0;
  width: 100%;
}

.listing-publish-store-option.is-unavailable {
  border-style: dashed;
  background: #f6f7f7;
}

.listing-publish-store-option.is-unavailable .listing-publish-store-check {
  cursor: not-allowed;
  opacity: 0.68;
}

.listing-publish-store-fieldset small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 560px) {
  .listing-publish-store-heading { align-items: stretch; flex-direction: column; }
  .listing-publish-store-heading .text-button { align-self: flex-start; }
  .store-auth-dialog-card .listing-publish-store-option { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .store-auth-dialog-card .listing-publish-warehouse-field { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-left: 27px; }
}

.store-auth-dialog-card .listing-confirm-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  font-weight: 500;
  line-height: 1.5;
}

.store-auth-dialog-card .listing-confirm-row input {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  padding: 0;
  accent-color: #167b91;
}

.store-auth-dialog-message {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.store-auth-dialog-message.error {
  color: #c04d35;
}

.store-auth-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 900px) {
  .store-auth-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .store-auth-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .store-auth-summary-grid {
    grid-template-columns: 1fr;
  }

  .store-auth-card {
    grid-template-columns: 1fr;
  }

  .store-auth-card-actions {
    justify-content: flex-start;
  }
}

.store-connect-button,
.store-disconnect-button {
  border: 1px solid #d7dbe3;
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--charcoal-soft);
  background: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  cursor: pointer;
}

.store-disconnect-button {
  border-color: #e5e7eb;
  color: #6b7280;
  background: transparent;
}

.store-connect-button:hover:not(:disabled) {
  border-color: rgba(59, 130, 246, 0.45);
  color: var(--accent-strong);
  background: rgba(59, 130, 246, 0.08);
}

.store-connect-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.store-auth-row {
  align-items: center;
}

.store-auth-actions {
  margin-top: 0;
  flex-shrink: 0;
}

.sidebar-token-card {
  display: grid;
  width: 100%;
  gap: 4px;
  min-height: 62px;
  margin-top: auto;
  border: 1px solid rgba(229, 231, 235, 0.95);
  border-radius: 14px;
  padding: 11px 12px;
  color: var(--charcoal);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(243, 244, 246, 0.88));
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: border-color 160ms ease, background 160ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.sidebar-token-card:hover {
  border-color: rgba(59, 130, 246, 0.35);
  background: #fff;
  box-shadow: 0 12px 28px rgba(23, 26, 33, 0.08);
  transform: translateY(-1px);
}

.sidebar-token-card:active {
  transform: translateY(0) scale(0.99);
}

.sidebar-token-card span,
.sidebar-token-card strong {
  display: block;
}

.sidebar-token-card span {
  color: #8b93a3;
  font-size: 11px;
  font-weight: 650;
}

.sidebar-token-card strong {
  align-self: end;
  color: #6b7280;
  font-size: 12px;
  font-weight: 650;
}

.sidebar-token-card strong b {
  color: var(--charcoal);
  font-size: 18px;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}

.token-page-heading {
  padding: 4px 2px 0;
}

.token-page-heading h2 {
  font-size: 22px;
  letter-spacing: -0.3px;
}

.token-page-heading > p:last-child {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  max-width: 54rem;
}

.panel.token-balance-panel {
  min-height: 0;
  border-color: #d4e6e8;
  padding: 22px 24px;
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 0%, rgba(8, 127, 134, 0.08), transparent 42%),
    linear-gradient(180deg, #f7fcfc 0%, #ffffff 100%);
}

.panel.token-balance-panel > span,
.panel.token-balance-panel > small {
  display: block;
  color: #5d7278;
}

.panel.token-balance-panel > span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.panel.token-balance-panel > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 6px;
}

.panel.token-balance-panel > div strong {
  color: #06656c;
  font-size: 34px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.6px;
}

.panel.token-balance-panel > div b {
  color: #3f6d74;
  font-size: 14px;
  font-weight: 700;
}

.panel.token-balance-panel > small {
  font-size: 12px;
  line-height: 1.45;
}

.panel.token-balance-panel dl {
  display: flex;
  gap: 28px;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid #e2ecee;
}

.panel.token-balance-panel dl div {
  min-width: 110px;
}

.panel.token-balance-panel dt {
  color: #6a7f85;
  font-size: 11px;
  font-weight: 700;
}

.panel.token-balance-panel dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.token-recharge-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.token-recharge-form input {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 13px;
  background: #f8fafb;
}

.token-recharge-form .primary-button {
  width: auto;
  min-width: 120px;
}

.token-form-message {
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
}

.token-form-message.success {
  color: var(--ok);
}

.token-form-message.error {
  color: var(--danger);
}

.token-ledger-filters {
  gap: 2px;
  padding: 3px;
  border: 1px solid #dce7e9;
  border-radius: 10px;
  background: #eef4f5;
}

.token-ledger-filters .segment,
.token-ledger-filters button {
  min-width: 64px;
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  padding: 0 12px;
  color: #62757b;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.token-ledger-filters .segment:hover,
.token-ledger-filters button:hover {
  color: #1f3d44;
  background: rgba(255, 255, 255, 0.55);
}

.token-ledger-filters .segment.active,
.token-ledger-filters button.active {
  color: #065f65;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(28, 45, 54, 0.1);
}

.token-ledger-list {
  display: grid;
  min-height: 120px;
}

.token-ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}

.token-ledger-row:last-child {
  border-bottom: 0;
}

.token-ledger-row strong,
.token-ledger-row span,
.token-ledger-row small {
  display: block;
}

.token-ledger-row strong {
  font-size: 13px;
}

.token-ledger-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.token-ledger-row > b {
  color: var(--danger);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.token-ledger-row > b.positive {
  color: var(--ok);
}

.token-ledger-empty {
  display: grid;
  min-height: 120px;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
}

.token-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.token-pagination .secondary-button {
  width: auto;
}

.token-pagination span {
  color: var(--muted);
  font-size: 12px;
}

.token-pricing-list {
  border-top: 1px solid var(--line);
}

.token-pricing-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
}

.token-pricing-list strong {
  color: var(--accent);
}

.workspace {
  padding: 24px;
  display: grid;
  gap: 18px;
  min-width: 0;
}

.topbar,
.command-strip,
.panel,
.metric-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(14, 28, 36, 0.02);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
}

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

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 26px;
  line-height: 1.25;
}

h2 {
  font-size: 17px;
  line-height: 1.3;
}

.top-actions,
.panel-header,
.command-strip,
.profit-output,
.queue-item,
.supplier-row,
.attribute-row,
.pipeline-row {
  display: flex;
  align-items: center;
}

.top-actions {
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.primary-button,
.secondary-button,
.icon-button,
.segment {
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 14px;
  font-weight: 700;
}

.primary-button {
  color: #ffffff;
  background: linear-gradient(135deg, #1a1d26 0%, #2c3342 100%);
}

.secondary-button {
  color: var(--charcoal-soft);
  background: rgba(255, 255, 255, 0.86);
  border-color: #d7dbe3;
}

.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.icon-button {
  width: 40px;
  padding: 0;
  color: var(--ink);
  background: #f7fafb;
  border-color: var(--line);
}

.command-strip {
  padding: 14px;
  gap: 12px;
}

.input-group,
.calc-grid label,
.copy-box {
  display: grid;
  gap: 7px;
}

.input-group.wide {
  flex: 1;
}

label,
.input-group label,
.copy-box label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
select,
textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--ink);
  padding: 10px 12px;
  outline: none;
}

input[type="checkbox"],
input[type="radio"] {
  width: 14px;
  height: 14px;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  accent-color: #087f86;
  cursor: pointer;
  vertical-align: middle;
}

textarea {
  resize: vertical;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(23, 107, 135, 0.12);
}

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

.metric-card {
  padding: 16px;
}

.metric-card span,
.metric-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.metric-card strong {
  display: block;
  margin: 8px 0 5px;
  font-size: 28px;
}

.store-realtime-panel {
  padding: 0;
  overflow: hidden;
}

.store-realtime-header,
.store-realtime-actions,
.store-trend-block header {
  display: flex;
  align-items: center;
}

.store-realtime-header {
  position: relative;
  z-index: 5;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(105deg, #ffffff 0%, #fbfefe 68%, #eefafa 100%);
}

.store-realtime-actions {
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.store-product-filters input,
.store-product-filters select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
}

.store-dashboard-picker {
  position: relative;
  min-width: 250px;
}

.store-dashboard-picker-button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 6px 10px 6px 7px;
  border: 1px solid #b9dedd;
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(16, 104, 111, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.store-dashboard-picker-button:hover,
.store-dashboard-picker-button[aria-expanded="true"] {
  border-color: #45b8b2;
  box-shadow: 0 10px 28px rgba(15, 130, 135, 0.14), 0 0 0 3px rgba(41, 174, 168, 0.08);
  transform: translateY(-1px);
}

.store-dashboard-picker-button:focus-visible {
  outline: 3px solid rgba(26, 158, 157, 0.2);
  outline-offset: 2px;
}

.store-dashboard-picker-button:disabled {
  cursor: not-allowed;
  opacity: 0.68;
  transform: none;
}

.store-dashboard-picker-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #20b8aa, #087f86);
  box-shadow: 0 7px 16px rgba(8, 127, 134, 0.22);
  font-size: 12px;
  font-weight: 900;
}

.store-dashboard-picker-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.store-dashboard-picker-copy small {
  color: #7b8c91;
  font-size: 9px;
  line-height: 1.2;
}

.store-dashboard-picker-copy strong {
  overflow: hidden;
  color: #16343a;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-dashboard-picker-button > i {
  position: relative;
  width: 16px;
  height: 16px;
}

.store-dashboard-picker-button > i::before,
.store-dashboard-picker-button > i::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 7px;
  height: 2px;
  border-radius: 99px;
  background: #72858b;
  transition: transform 160ms ease;
}

.store-dashboard-picker-button > i::before { left: 2px; transform: rotate(42deg); }
.store-dashboard-picker-button > i::after { right: 2px; transform: rotate(-42deg); }
.store-dashboard-picker-button[aria-expanded="true"] > i::before { transform: rotate(-42deg); }
.store-dashboard-picker-button[aria-expanded="true"] > i::after { transform: rotate(42deg); }

.store-dashboard-picker-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: max(100%, 280px);
  max-height: 280px;
  overflow-y: auto;
  padding: 7px;
  border: 1px solid #cce3e3;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 46px rgba(25, 62, 71, 0.18);
  backdrop-filter: blur(14px);
}

.store-dashboard-picker-menu[hidden] { display: none; }

.store-dashboard-picker-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  color: #294148;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.store-dashboard-picker-menu button:hover,
.store-dashboard-picker-menu button.active {
  color: #075f65;
  background: #eaf8f7;
}

.store-dashboard-picker-menu button > span {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
}

.store-dashboard-picker-menu button i {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: #159b98;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}

.store-dashboard-picker-menu button strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-dashboard-picker-menu button small {
  flex: 0 0 auto;
  color: #809096;
  font-size: 9px;
}

.store-dashboard-picker-empty {
  padding: 18px 12px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.store-dashboard-select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.store-realtime-sync-state {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.store-realtime-sync-state > span:not(.badge) {
  color: var(--muted);
  font-size: 10px;
}

.store-realtime-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 20px 18px;
  border-bottom: 1px solid var(--line);
}

.store-realtime-kpis > div {
  min-width: 0;
  padding: 0 14px;
  border-right: 1px solid #e8edef;
  text-align: center;
}

.store-realtime-kpis > div:last-child {
  border-right: 0;
}

.store-realtime-kpis strong,
.store-realtime-kpis span,
.store-trend-block span,
.store-trend-block strong {
  display: block;
}

.store-realtime-kpis strong {
  overflow-wrap: anywhere;
  font-size: 22px;
}

.store-realtime-kpis span,
.store-trend-block span,
.store-trend-block small {
  color: var(--muted);
  font-size: 11px;
}

.store-trend-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 12px 18px 20px;
  background: linear-gradient(180deg, #fff, #f8fbfb);
}

.store-trend-block {
  min-width: 0;
  padding: 16px 16px 12px;
  border: 1px solid #e1ebed;
  border-radius: 12px;
  background: linear-gradient(150deg, #ffffff, #fbfdfd);
  box-shadow: 0 8px 24px rgba(24, 62, 70, 0.055);
}

.store-trend-block + .store-trend-block {
  border-left: 1px solid #e1ebed;
}

.store-trend-block header {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.store-trend-block strong {
  margin-top: 3px;
  font-size: 18px;
}

.store-trend-block svg {
  width: 100%;
  height: 114px;
  display: block;
  overflow: visible;
  margin-top: 2px;
}

.store-trend-grid-line {
  stroke: #dce6e8;
  stroke-width: 1;
  stroke-dasharray: 3 8;
  opacity: 0.72;
  vector-effect: non-scaling-stroke;
}

.store-trend-baseline {
  stroke: #d4dfe1;
  stroke-width: 1;
  opacity: 0.78;
  vector-effect: non-scaling-stroke;
}

.store-trend-area {
  pointer-events: none;
}

.store-trend-halo,
.store-trend-line {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.store-trend-halo {
  stroke-width: 9;
  opacity: 0.065;
}

.store-trend-line {
  stroke-width: 2.6;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: store-trend-draw 760ms cubic-bezier(.2, .72, .24, 1) forwards;
}

.store-trend-peak,
.store-trend-end {
  stroke-width: 2.2;
}

.store-trend-peak {
  opacity: 0.9;
}

.store-trend-end-halo {
  opacity: 0.11;
}

.store-trend-end {
  animation: store-trend-point-in 420ms 420ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes store-trend-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes store-trend-point-in {
  from { opacity: 0; transform: scale(.55); transform-origin: center; }
  to { opacity: 1; transform: scale(1); transform-origin: center; }
}

.store-realtime-error {
  padding: 9px 18px;
  border-top: 1px solid #efd9ae;
  color: #83591e;
  background: #fff9ed;
  font-size: 11px;
}

.store-product-dashboard {
  border-top: 1px solid var(--line);
}

.store-product-toolbar,
.store-product-toolbar > div,
.store-product-filters,
.store-product-identity {
  display: flex;
  align-items: center;
}

.store-product-toolbar {
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  background: #fbfcfd;
}

.store-product-toolbar > div:first-child {
  gap: 10px;
}

.store-product-toolbar span {
  color: var(--muted);
  font-size: 12px;
}

.store-product-filters {
  gap: 8px;
}

.store-product-filters input {
  width: min(300px, 32vw);
}

.store-product-table-wrap {
  position: relative;
  overflow-x: auto;
}

.store-product-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
}

.store-product-table th,
.store-product-table td {
  padding: 11px 12px;
  border-top: 1px solid #e9edef;
  text-align: left;
  vertical-align: middle;
  font-size: 12px;
}

.store-product-table th {
  color: var(--muted);
  background: #f7f9fa;
  font-weight: 700;
  white-space: nowrap;
}

.store-product-table td > small,
.store-product-identity small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.store-product-identity {
  min-width: 270px;
  gap: 10px;
}

.store-product-identity img,
.store-product-placeholder {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 7px;
}

.store-product-identity img {
  object-fit: cover;
  border: 1px solid #e1e6e8;
}

.store-product-placeholder {
  display: grid;
  place-items: center;
  color: #167b91;
  background: #e8f5f6;
  font-weight: 800;
}

.store-product-identity div {
  min-width: 0;
}

.store-product-identity strong {
  display: block;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-product-empty {
  padding: 32px 18px;
  color: var(--muted);
  text-align: center;
  background: #fff;
}

.store-product-empty[hidden] {
  display: none;
}

.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.55fr);
  gap: 18px;
}

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

.panel {
  padding: 18px;
  min-width: 0;
}

.panel-header {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  min-width: 0;
  flex-wrap: wrap;
  align-items: flex-start;
}

.panel-header > div:first-child {
  min-width: 0;
  flex: 1 1 260px;
}

.panel-header.compact {
  margin-bottom: 12px;
}

.panel-header p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.segmented {
  display: flex;
  padding: 3px;
  border-radius: 8px;
  background: var(--surface-2);
}

.segment {
  min-height: 34px;
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 0 12px;
}

.segment.active {
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(28, 45, 54, 0.09);
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

th,
td {
  padding: 13px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 13px;
}

th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

tr.product-row {
  cursor: pointer;
}

tr.product-row:hover,
tr.product-row.active {
  background: #f4faf9;
}

.product-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.thumb {
  position: relative;
  flex: none;
  overflow: hidden;
  width: 44px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 35%, var(--accent-2) 0 18%, transparent 19%),
    linear-gradient(135deg, #f8fbfc, #dfe9ed);
}

.thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
}

.product-cell strong,
.product-cell span {
  display: block;
}

.product-cell span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

body[data-active-view="selection"] .product-panel {
  grid-column: 1 / -1;
}

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

.product-library-empty {
  grid-column: 1 / -1;
}

.product-work-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.product-work-card:hover,
.product-work-card.active {
  border-color: #75aaa8;
  box-shadow: 0 4px 14px rgba(29, 70, 78, 0.08);
}

.product-card-upper {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}

.product-card-media {
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: 4 / 5;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f3f6f7;
}

.product-card-media > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.product-image-placeholder {
  padding: 14px;
  color: var(--muted);
  text-align: center;
}

.product-image-placeholder strong,
.product-image-placeholder span {
  display: block;
}

.product-image-placeholder strong {
  color: var(--ink);
  font-size: 12px;
}

.product-image-placeholder span {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.5;
}

.product-image-count {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 3px 6px;
  border-radius: 4px;
  color: #fff;
  background: rgba(17, 31, 37, 0.72);
  font-size: 10px;
}

.product-card-body {
  min-width: 0;
}

.product-card-title,
.product-card-title > div,
.product-card-actions,
.product-card-actions > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-card-title {
  align-items: flex-start;
  justify-content: space-between;
}

.product-card-title > div {
  min-width: 0;
  align-items: flex-start;
}

.product-card-title > div > strong,
.product-library-title-link {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-library-title-link {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.product-library-title-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.product-score {
  flex: none;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.product-score b {
  color: var(--accent);
  font-size: 18px;
}

.product-card-meta {
  margin: 9px 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.product-card-meta strong {
  color: #e35c36;
}

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

.product-market-grid > div {
  min-width: 0;
  padding: 7px 5px;
  background: #f6f8f9;
  text-align: center;
}

.product-market-grid span,
.product-market-grid strong {
  display: block;
}

.product-market-grid span {
  color: var(--muted);
  font-size: 10px;
}

.product-market-grid strong {
  overflow: hidden;
  margin-top: 3px;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-profit-strip {
  display: grid;
  grid-template-columns: repeat(8, minmax(68px, 1fr));
  gap: 5px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #eef2f4;
}

.product-profit-strip label {
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
}

.product-profit-strip input,
.product-profit-strip select {
  width: 100%;
  height: 32px;
  margin-top: 4px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
}

.product-profit-result {
  min-width: 0;
  padding: 5px 2px;
  text-align: center;
}

.product-profit-result span,
.product-profit-result strong {
  display: block;
}

.product-profit-result span {
  color: var(--muted);
  font-size: 10px;
}

.product-profit-result strong {
  margin-top: 5px;
  font-size: 12px;
}

.product-profit-result.gain strong {
  color: var(--ok);
}

.product-profit-result.loss strong {
  color: var(--danger);
}

.product-card-actions {
  justify-content: space-between;
  padding: 9px 12px;
}

.product-card-actions > span {
  color: var(--muted);
  font-size: 10px;
}

.product-card-actions .primary-button,
.product-card-actions .secondary-button {
  width: auto;
  min-height: 34px;
  padding: 0 10px;
}

.text-link {
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

.muted-link {
  color: var(--muted);
  font-size: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
}

.badge.ok {
  color: var(--ok);
  background: #e8f5ee;
}

.badge.member {
  color: #7a5208;
  background: linear-gradient(135deg, #fff6d8, #f4d98c);
}

.badge.warn {
  color: var(--warning);
  background: #fff3df;
}

.badge.danger {
  color: var(--danger);
  background: #ffecec;
}

.product-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 190px;
  border-radius: 8px;
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(23, 107, 135, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(23, 107, 135, 0.08) 1px, transparent 1px),
    #f8fbfc;
  background-size: 24px 24px;
}

.visual-object {
  width: 92px;
  height: 122px;
  border-radius: 28px 28px 12px 12px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.35), transparent 40%),
    linear-gradient(160deg, var(--accent-2), var(--accent));
  box-shadow: var(--shadow);
}

.visual-shadow {
  position: absolute;
  bottom: 38px;
  width: 124px;
  height: 18px;
  border-radius: 999px;
  background: rgba(20, 39, 47, 0.14);
  filter: blur(8px);
}

.product-visual-image {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 12px;
  object-fit: contain;
  background: #ffffff;
}

.score-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.detail-ai-action {
  width: 100%;
  margin-top: 14px;
}

.score-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.bar {
  height: 8px;
  border-radius: 999px;
  background: #e5edf0;
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

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

.profit-output {
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding: 14px;
  border-radius: 8px;
  background: #f1f7f7;
}

.profit-output span,
.profit-output strong {
  display: block;
}

.profit-output span {
  color: var(--muted);
  font-size: 12px;
}

.profit-output strong {
  margin-top: 4px;
  font-size: 22px;
}

.profit-calculator-panel {
  grid-column: 1 / -1;
}

.resale-dashboard-panel {
  grid-column: 1 / -1;
}

.resale-auto-panel {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid #cfe3e8;
  border-radius: 9px;
  background: linear-gradient(135deg, #f4fbfc 0%, #ffffff 70%);
}

.resale-auto-header,
.resale-auto-title-row,
.resale-auto-actions,
.resale-auto-current {
  display: flex;
  align-items: center;
  gap: 10px;
}

.resale-auto-header {
  justify-content: space-between;
}

.resale-auto-title-row h3 {
  margin: 0;
  font-size: 16px;
}

.resale-auto-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.resale-auto-actions {
  flex: none;
}

.resale-auto-actions .secondary-button {
  width: auto;
  min-height: 34px;
  padding: 0 12px;
}

.resale-auto-actions .danger-button {
  border-color: #efc6c1;
  color: #a93c32;
  background: #fff7f6;
}

.resale-auto-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.resale-auto-metrics > div {
  padding: 9px 11px;
  border: 1px solid #dce9ec;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.86);
}

.resale-auto-metrics span,
.resale-auto-metrics strong {
  display: block;
}

.resale-auto-metrics span {
  color: var(--muted);
  font-size: 10px;
}

.resale-auto-metrics strong {
  margin-top: 3px;
  font-size: 17px;
}

.resale-auto-progress-track {
  height: 6px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfeaec;
}

.resale-auto-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1696a6, #35b878);
  transition: width 0.3s ease;
}

.resale-auto-current {
  margin-top: 10px;
  font-size: 11px;
}

.resale-auto-current span {
  color: var(--muted);
}

.resale-auto-current strong,
.resale-auto-current a {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resale-auto-log {
  display: grid;
  gap: 4px;
  max-height: 96px;
  margin-top: 9px;
  overflow: auto;
  color: var(--muted);
  font-size: 10px;
}

.resale-auto-log > div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
}

.resale-auto-log time {
  color: #789097;
}

.resale-auto-log .error span {
  color: #b74338;
}

.resale-token-pairing {
  display: grid;
  grid-template-columns: minmax(190px, 1.15fr) minmax(240px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px dashed #cfe0e4;
}

.resale-token-pairing > div {
  display: grid;
  gap: 2px;
}

.resale-token-pairing strong {
  font-size: 11px;
}

.resale-token-pairing span {
  color: var(--muted);
  font-size: 10px;
}

.resale-token-pairing input {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border: 1px solid #cbdde1;
  border-radius: 5px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
}

.resale-token-pairing .secondary-button {
  width: auto;
  min-height: 34px;
  padding: 0 10px;
}

.resale-header-actions,
.resale-compliance-strip,
.resale-row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.resale-header-actions {
  min-width: 0;
  flex: 1 1 560px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.resale-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.resale-kpi-grid > div {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.resale-kpi-grid span,
.resale-kpi-grid strong {
  display: block;
}

.resale-kpi-grid span {
  color: var(--muted);
  font-size: 11px;
}

.resale-kpi-grid strong {
  margin-top: 5px;
  font-size: 22px;
}

.resale-compliance-strip {
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--warning);
  background: #fff9ed;
  font-size: 11px;
}

.resale-compliance-strip span {
  flex: 1;
  min-width: 260px;
  color: #725321;
}

.resale-compliance-strip code {
  overflow-wrap: anywhere;
}

.resale-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.resale-product-card.resale-library-card {
  overflow: visible;
  border-radius: 12px;
}

.resale-library-card .selection-lib-title-wrap {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.resale-library-card .selection-lib-title {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.resale-library-card .selection-lib-sub {
  margin-left: 0;
}

.resale-library-media {
  display: grid;
  align-content: start;
  gap: 8px;
}

.resale-library-original {
  display: grid;
  min-height: 30px;
  place-items: center;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f766e;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.resale-library-original:hover {
  border-color: #0f8b8d;
  background: #ecfeff;
}

.resale-library-profit select {
  width: 100%;
  min-height: 32px;
  border: 1px solid #d5dee8;
  border-radius: 7px;
  padding: 0 8px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 12px;
}

.resale-library-footer > span {
  min-width: 0;
  color: #64748b;
  font-size: 11px;
}

.resale-library-footer .primary-button,
.resale-library-footer .secondary-button {
  width: auto;
  min-height: 36px;
  padding: 0 12px;
}

.resale-library-footer .resale-ai-button {
  min-width: 132px;
}

.resale-library-source input[readonly] {
  background: #f8fafc;
}

.resale-empty-state {
  grid-column: 1 / -1;
  min-height: 180px;
}

.resale-product-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.resale-card-main {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}

.resale-card-image {
  display: flex;
  width: 100%;
  aspect-ratio: 4 / 5;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f4f7f8;
  color: var(--muted);
  font-size: 12px;
}

.resale-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.resale-card-content {
  min-width: 0;
}

.resale-card-title-row,
.resale-card-footer,
.resale-row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.resale-card-title-row {
  align-items: flex-start;
  justify-content: space-between;
}

.resale-card-title-row > div {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 8px;
}

.resale-card-title-row strong,
.resale-title-link {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.resale-title-link {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.resale-title-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.resale-source-link {
  flex: none;
  white-space: nowrap;
}

.resale-card-subline {
  margin: 9px 0;
  color: var(--muted);
  font-size: 11px;
}

.resale-card-subline strong {
  color: #e6532f;
  font-size: 14px;
}

.resale-auto-source {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
  padding: 6px 8px;
  border-left: 3px solid #27a879;
  background: #eff9f5;
  font-size: 10px;
}

.resale-auto-source span {
  padding: 2px 6px;
  border-radius: 999px;
  color: #147052;
  background: #d8f2e7;
  font-weight: 700;
}

.resale-auto-source strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resale-auto-source em {
  margin-left: auto;
  color: var(--muted);
  font-style: normal;
  white-space: nowrap;
}

.resale-card-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.resale-card-metrics > div {
  min-width: 0;
  padding: 7px;
  background: #f7f9fa;
  text-align: center;
}

.resale-card-metrics span,
.resale-card-metrics strong,
.resale-profit-output span,
.resale-profit-output strong {
  display: block;
}

.resale-card-metrics span,
.resale-profit-output span {
  color: var(--muted);
  font-size: 10px;
}

.resale-card-metrics strong {
  overflow: hidden;
  margin-top: 3px;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resale-profit-editor {
  display: grid;
  grid-template-columns: repeat(8, minmax(78px, 1fr));
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f1f4f6;
}

.resale-profit-editor label {
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
}

.resale-profit-editor input,
.resale-profit-editor select {
  width: 100%;
  height: 32px;
  margin-top: 4px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
}

.resale-profit-output {
  min-width: 0;
  padding: 5px 4px;
  text-align: center;
}

.resale-profit-output strong {
  margin-top: 5px;
  font-size: 12px;
}

.resale-profit-output.positive strong {
  color: #14824c;
}

.resale-profit-output.negative strong {
  color: #c23f3f;
}

.resale-card-footer {
  justify-content: space-between;
  padding: 10px 12px;
}

.resale-card-footer > span {
  color: var(--muted);
  font-size: 11px;
}

.resale-row-actions {
  flex: none;
}

.resale-row-actions .primary-button,
.resale-row-actions .secondary-button {
  width: auto;
  min-height: 34px;
  padding: 0 11px;
}

.profit-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.profit-tool-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
  padding: 8px;
  border: 1px solid #d7e5e8;
  border-radius: 12px;
  background: #f5f9fa;
}

.profit-tool-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #50636a;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}

.profit-tool-tabs button i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  color: #087f84;
  background: #e0f3f3;
  font-style: normal;
  font-size: 12px;
}

.profit-tool-tabs button.active {
  border-color: #82cdcf;
  color: #ffffff;
  background: linear-gradient(135deg, #07949a, #08747b);
  box-shadow: 0 7px 18px rgba(8, 126, 132, 0.18);
}

.profit-tool-tabs button.active i {
  color: #087b80;
  background: #ffffff;
}

.profit-tool-section {
  padding: 18px;
  border: 1px solid #dbe6e8;
  border-radius: 12px;
  background: #ffffff;
}

.profit-tool-section[hidden] {
  display: none !important;
}

.profit-section-heading,
.toolbox-action-row,
.commission-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.profit-section-heading {
  margin-bottom: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.profit-section-heading strong,
.profit-section-heading span {
  display: block;
}

.profit-section-heading strong {
  color: #102f38;
  font-size: 16px;
}

.profit-section-heading span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.profit-section-heading .profit-data-note {
  flex: none;
  margin: 0;
  padding: 7px 10px;
  border-radius: 999px;
  color: #936217;
  background: #fff4dc;
}

.profit-input-grid-wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profit-commission-match {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid #b9dfe1;
  border-radius: 10px;
  color: #36545b;
  background: #f2fafa;
  font-size: 12px;
  line-height: 1.6;
}

.profit-commission-match i {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
  background: #15969b;
  font-style: normal;
  font-weight: 800;
}

.profit-commission-match strong {
  color: #087c82;
}

.profit-commission-match em {
  margin-left: 8px;
  color: #71848a;
  font-style: normal;
}

.profit-commission-match[data-state="fallback"] {
  border-color: #f1d7a6;
  background: #fff9ed;
}

.profit-commission-match[data-state="fallback"] i {
  background: #c88920;
}

.profit-commission-match[data-state="manual"] {
  border-color: #cfc5ee;
  background: #f8f6ff;
}

.profit-commission-match[data-state="manual"] i {
  background: #7459bb;
}

.return-choice-row,
.toolbox-form-grid {
  display: grid;
  gap: 12px;
}

.return-choice-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid #d8e9eb;
  border-radius: 10px;
  background: #f2f9f9;
}

.toolbox-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.return-choice-row label,
.toolbox-form-grid label {
  display: grid;
  gap: 7px;
  color: #40555d;
  font-size: 12px;
  font-weight: 700;
}

.toolbox-action-row {
  justify-content: flex-start;
  margin: 16px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: #f2f8f8;
}

.toolbox-action-row .primary-button,
.toolbox-action-row .secondary-button,
.compact-button {
  width: auto;
}

.toolbox-action-row span {
  color: var(--muted);
  font-size: 12px;
}

.return-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pricing-table-wrap th:nth-child(n + 2),
.pricing-table-wrap td:nth-child(n + 2),
.commission-table-wrap th:nth-child(n + 3),
.commission-table-wrap td:nth-child(n + 3) {
  text-align: center;
}

.pricing-status-good,
.commission-rate-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #087d70;
  background: #e7f7f1;
  font-weight: 800;
}

.pricing-status-warning {
  color: #a86613;
  background: #fff2d8;
}

.commission-filter-bar {
  justify-content: flex-start;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #dce7e9;
  border-radius: 10px;
  background: #f7fafb;
}

.commission-filter-bar input {
  flex: 1 1 360px;
  max-width: 520px;
}

.commission-filter-bar select {
  flex: 0 1 260px;
}

.commission-table-wrap {
  max-height: 560px;
  overflow: auto;
  border: 1px solid #e0e8ea;
  border-radius: 10px;
}

.commission-table-wrap table {
  min-width: 900px;
}

.commission-table-wrap thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  background: #eef5f6;
}

.commission-table-wrap tbody tr:hover {
  background: #f4fbfb;
}

.commission-use-button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #9ed4d6;
  border-radius: 7px;
  color: #08787d;
  background: #eefafa;
  font-weight: 700;
  cursor: pointer;
}

.empty-table-cell {
  padding: 42px !important;
  color: var(--muted);
  text-align: center !important;
}

.profit-currency-switch {
  flex: none;
}

.profit-input-grid label > span,
.profit-input-grid label b {
  font: inherit;
}

.profit-input-grid,
.profit-kpi-grid {
  display: grid;
  gap: 12px;
}

.profit-input-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.profit-input-grid label {
  display: grid;
  gap: 7px;
}

.profit-auto-parameters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 14px 0;
}

.profit-auto-parameters span {
  padding: 6px 9px;
  border: 1px solid #dbe5e8;
  border-radius: 999px;
  color: var(--muted);
  background: #f7fafb;
  font-size: 11px;
}

.profit-kpi-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}

.profit-kpi-grid > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.profit-kpi-grid span,
.profit-kpi-grid strong,
.profit-result-band span,
.profit-result-band strong {
  display: block;
}

.profit-kpi-grid span,
.profit-result-band span {
  color: var(--muted);
  font-size: 11px;
}

.profit-kpi-grid strong {
  margin-top: 6px;
  font-size: 21px;
}

.profit-result-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 13px 14px;
  border-left: 3px solid var(--accent);
  background: #eef8f8;
}

.profit-result-band.loss {
  border-left-color: #bd4f42;
  background: #fff3f1;
}

.profit-result-band > span {
  text-align: right;
}

.profit-breakdown-wrap td:nth-child(2),
.profit-breakdown-wrap td:nth-child(3),
.profit-breakdown-wrap th:nth-child(2),
.profit-breakdown-wrap th:nth-child(3) {
  text-align: right;
}

.keyword-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.keyword-cloud span {
  border-radius: 999px;
  padding: 6px 9px;
  background: #eef6f2;
  color: #1f6e4a;
  font-size: 12px;
  font-weight: 800;
}

.bullet-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  color: #2b3940;
  font-size: 13px;
}

.warning-line {
  min-height: 28px;
  margin-top: 12px;
  color: var(--warning);
  font-size: 13px;
  font-weight: 700;
}

.integration-form {
  margin-top: 14px;
}

.integration-log {
  min-height: 120px;
  max-height: 320px;
  overflow: auto;
  margin: 14px 0 0;
  padding: 13px 14px;
  border: 1px solid #cfe0e4;
  border-radius: 10px;
  color: #36515a;
  background:
    linear-gradient(90deg, rgba(18, 164, 153, 0.08), transparent 34px),
    #f5f9fa;
  box-shadow: inset 3px 0 #19a99f, inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font: 12px/1.55 Consolas, "Courier New", monospace;
  white-space: pre-wrap;
  scrollbar-color: #b7ced2 #edf3f4;
}

.integration-log::selection {
  color: #17343b;
  background: #bfe9e4;
}

.category-results {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.collector-assistant {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.collector-assistant-head,
.collector-path-row {
  display: flex;
  align-items: center;
}

.collector-assistant-head {
  justify-content: space-between;
  gap: 12px;
}

.collector-assistant-head strong,
.collector-assistant-head span:not(.badge) {
  display: block;
}

.collector-assistant-head span:not(.badge) {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.collector-install-steps {
  margin: 14px 0;
  padding-left: 20px;
  color: #2b3940;
  font-size: 13px;
  line-height: 1.8;
}

.collector-install-steps code,
.collector-path-row code {
  font-family: Consolas, "Courier New", monospace;
}

.collector-path-row {
  gap: 8px;
}

.collector-path-row code {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #f7fafb;
  font-size: 12px;
}

.category-result {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--ink);
  text-align: left;
}

.category-result.active {
  border-color: var(--accent);
  background: #eef8f8;
  box-shadow: 0 0 0 3px rgba(23, 107, 135, 0.12);
}

.category-result strong,
.category-result span {
  display: block;
}

.category-result span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.selection-board {
  grid-column: 1 / -1;
}

body[data-active-view="ai-image"] .command-strip,
body[data-active-view="ai-image"] .metric-grid,
body[data-active-view="ai-image"] .main-grid {
  display: none;
}

body[data-active-view="data-market"] .command-strip,
body[data-active-view="data-market"] .metric-grid,
body[data-active-view="data-market"] .main-grid {
  display: none;
}

body[data-active-view="data-market-keywords"] .command-strip,
body[data-active-view="data-market-keywords"] .metric-grid,
body[data-active-view="data-market-keywords"] .main-grid {
  display: none;
}

.data-market-nav-group {
  display: grid;
  gap: 2px;
}

.data-market-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.data-market-nav-toggle b {
  color: rgba(244, 248, 249, 0.55);
  font-size: 12px;
}

.data-market-subnav {
  display: grid;
  gap: 2px;
  padding-left: 10px;
}

.data-market-subnav-item {
  min-height: 30px;
  padding: 5px 12px;
  border: 0;
  border-left: 1px solid rgba(244, 248, 249, 0.18);
  border-radius: 0 6px 6px 0;
  color: rgba(244, 248, 249, 0.62);
  background: transparent;
  text-align: left;
  font-size: 12px;
}

.data-market-subnav-item:hover,
.data-market-subnav-item.active {
  border-left-color: var(--accent);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.data-market-panel {
  grid-column: 1 / -1;
  padding: 22px;
}

.data-market-header {
  align-items: flex-start;
}

.data-market-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.data-market-header-actions > span:not(.badge) {
  color: var(--muted);
  font-size: 12px;
}

.data-market-source-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 1px solid #badbdd;
  border-left: 4px solid #0b9698;
  border-radius: 11px;
  background: linear-gradient(90deg, #f0f9f8, #f8fbfb 42%, #f5f9fa);
  box-shadow: 0 5px 16px rgba(8, 127, 134, 0.07), inset 0 1px rgba(255, 255, 255, 0.9);
}

.data-market-source-row > strong {
  color: #29464e;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.data-market-source-switch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-radius: 11px;
  padding: 4px;
  background: rgba(213, 228, 231, 0.58);
}

.data-market-source-switch button {
  position: relative;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid #d4e0e2;
  border-radius: 9px;
  background: #fff;
  color: #667a81;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(31, 54, 63, 0.04);
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.data-market-source-switch button:hover {
  transform: translateY(-1px);
  border-color: #85c7c8;
  color: #087f86;
}

.data-market-source-switch button.active {
  padding-left: 34px;
  border-color: #057c82;
  color: #fff;
  background: linear-gradient(135deg, #12a99f, #087f86);
  box-shadow: 0 7px 16px rgba(8, 127, 134, 0.24), inset 0 1px rgba(255, 255, 255, 0.2);
  font-weight: 900;
}

.data-market-source-switch button.active::before {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 12px;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  transform: translateY(-50%);
  border-radius: 50%;
  color: #087f86;
  background: #fff;
  font-size: 10px;
  font-weight: 1000;
}

.data-market-source-switch button:focus-visible {
  outline: 3px solid rgba(18, 169, 159, 0.2);
  outline-offset: 2px;
}

.data-market-source-note {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.data-market-source-note[hidden],
#keywordMarketSourceNote[hidden],
.resale-compliance-strip[hidden] {
  display: none !important;
}

#keywordMarketSourceNote {
  color: #486168;
  font-size: 12px;
}

.data-market-member-tag {
  display: inline-grid;
  min-width: 34px;
  min-height: 18px;
  margin-left: 5px;
  place-items: center;
  border-radius: 99px;
  color: #76500c;
  background: #f9e7ad;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.data-market-source-switch button.active .data-market-member-tag {
  color: #075d62;
  background: rgba(255, 255, 255, 0.9);
}

.data-market-free-tag {
  display: inline-grid;
  min-width: 32px;
  min-height: 18px;
  margin-left: 5px;
  place-items: center;
  border-radius: 99px;
  color: #08745f;
  background: #dff6eb;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.data-market-source-switch button.active .data-market-free-tag {
  color: #6a4a0e;
  background: rgba(255, 255, 255, 0.92);
}

.public-hot-market-panel {
  margin-top: 14px;
  padding: 20px;
  border: 1px solid rgba(213, 176, 89, 0.46);
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 0%, rgba(242, 204, 105, 0.2), transparent 30%),
    linear-gradient(140deg, #fffdf8, #f8fbfa 62%, #fff9e9);
  box-shadow: 0 14px 34px rgba(85, 66, 26, 0.08);
}

.public-hot-market-panel[hidden] {
  display: none;
}

.public-hot-market-hero {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(520px, 1.45fr);
  align-items: end;
  gap: 24px;
}

.public-hot-market-eyebrow {
  color: #a47617;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.13em;
}

.public-hot-market-hero h3 {
  margin: 5px 0 5px;
  color: #202d32;
  font-size: 24px;
}

.public-hot-market-hero p {
  max-width: 680px;
  margin: 0;
  color: #6f7b7e;
  font-size: 12px;
  line-height: 1.65;
}

.public-hot-market-actions {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(190px, 1.2fr) auto;
  align-items: end;
  gap: 10px;
}

.public-hot-market-actions label {
  display: grid;
  gap: 6px;
  color: #687579;
  font-size: 11px;
  font-weight: 800;
}

.public-hot-market-actions select,
.public-hot-market-actions input {
  width: 100%;
  min-height: 40px;
  border: 1px solid #dfd6c1;
  border-radius: 10px;
  color: #27353a;
  background: rgba(255, 255, 255, 0.88);
}

.public-hot-market-actions .primary-button {
  min-height: 40px;
  white-space: nowrap;
}

.public-hot-market-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.public-hot-market-kpis article {
  display: grid;
  gap: 3px;
  min-height: 92px;
  padding: 14px 16px;
  border: 1px solid rgba(221, 207, 170, 0.72);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.82);
}

.public-hot-market-kpis span {
  color: #758084;
  font-size: 10px;
  font-weight: 800;
}

.public-hot-market-kpis strong {
  color: #252e31;
  font-size: 22px;
  line-height: 1.1;
}

.public-hot-market-kpis small {
  color: #9a8e74;
  font-size: 9px;
}

.public-hot-market-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.public-hot-market-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px 88px minmax(0, 1fr) 74px;
  align-items: center;
  gap: 12px;
  min-height: 124px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid #e6ddca;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.public-hot-market-item:hover {
  transform: translateY(-2px);
  border-color: #d3b25f;
  box-shadow: 0 12px 24px rgba(88, 69, 27, 0.09);
}

.public-hot-market-rank {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  color: #8a6113;
  background: #fff3cf;
  font-size: 12px;
  font-weight: 1000;
}

.public-hot-market-item:nth-child(-n+3) .public-hot-market-rank {
  color: #fff;
  background: linear-gradient(145deg, #dbab37, #a47212);
  box-shadow: 0 6px 14px rgba(164, 114, 18, 0.2);
}

.public-hot-market-image {
  display: grid;
  width: 88px;
  height: 96px;
  place-items: center;
  overflow: hidden;
  border-radius: 11px;
  background: #f5f3ed;
}

.public-hot-market-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.public-hot-market-image span {
  color: #9c9b94;
  font-size: 10px;
}

.public-hot-market-copy {
  min-width: 0;
}

.public-hot-market-badges {
  display: flex;
  min-height: 19px;
  margin-bottom: 5px;
  gap: 5px;
  flex-wrap: wrap;
}

.public-hot-market-badges span {
  padding: 3px 7px;
  border-radius: 99px;
  color: #8b6010;
  background: #fff1c7;
  font-size: 8px;
  font-weight: 900;
}

.public-hot-market-copy a {
  display: -webkit-box;
  overflow: hidden;
  color: #263238;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.public-hot-market-copy a:hover {
  color: #9a6810;
}

.public-hot-market-meta {
  display: flex;
  gap: 6px 12px;
  margin-top: 8px;
  flex-wrap: wrap;
  color: #778286;
  font-size: 9px;
}

.public-hot-market-meta b {
  color: #3d4a4e;
}

.public-hot-market-score {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 10px 7px;
  border-left: 1px solid #eee6d5;
  color: #8d6517;
}

.public-hot-market-score strong {
  font-size: 25px;
  line-height: 1;
}

.public-hot-market-score span {
  font-size: 8px;
  font-weight: 900;
  text-align: center;
}

.public-hot-market-score small {
  color: #8b9699;
  font-size: 8px;
}

.public-hot-market-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 170px;
  place-content: center;
  gap: 8px;
  border: 1px dashed #ddc78c;
  border-radius: 14px;
  color: #7c827f;
  background: rgba(255, 255, 255, 0.58);
  text-align: center;
}

.public-hot-market-empty strong {
  color: #665024;
  font-size: 16px;
}

.public-hot-market-footnote {
  margin: 12px 2px 0;
  color: #8e8778;
  font-size: 10px;
  line-height: 1.55;
}

@media (max-width: 1180px) {
  .public-hot-market-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .public-hot-market-list {
    grid-template-columns: 1fr;
  }
}

.data-market-member-gate {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 190px;
  margin-top: 16px;
  padding: 28px 32px;
  border: 1px solid #ead28e;
  border-radius: 14px;
  background:
    radial-gradient(circle at 91% 12%, rgba(243, 199, 87, 0.2), transparent 30%),
    linear-gradient(120deg, #fffdf7, #fff8e7 62%, #f4fbfa);
  box-shadow: 0 16px 38px rgba(100, 73, 21, 0.09);
}

.data-market-member-gate[hidden],
.data-market-content[hidden] { display: none; }

.data-market-member-icon {
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border: 1px solid #e5c76c;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(145deg, #d5a52e, #8b630d);
  box-shadow: 0 13px 26px rgba(139, 99, 13, 0.22), inset 0 1px rgba(255, 255, 255, 0.34);
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: 0.06em;
}

.data-market-member-gate h3 {
  margin: 3px 0 7px;
  color: #24383d;
  font-size: 23px;
}

.data-market-member-gate p {
  max-width: 720px;
  margin: 0;
  color: #6e7e82;
  font-size: 13px;
  line-height: 1.7;
}

.data-market-member-plans {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.data-market-member-plans span {
  padding: 5px 9px;
  border: 1px solid #ead79d;
  border-radius: 99px;
  color: #765516;
  background: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-weight: 800;
}

.data-market-member-gate .primary-button {
  min-width: 138px;
  background: linear-gradient(135deg, #b98717, #76500b);
  box-shadow: 0 10px 24px rgba(130, 88, 9, 0.2);
}

.data-market-content {
  margin-top: 14px;
}

.data-market-content.is-coming-soon {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 12px;
  cursor: not-allowed;
}

.data-market-content.is-coming-soon > * {
  filter: blur(4px);
  opacity: 0.46;
  pointer-events: none;
  user-select: none;
}

.data-market-content.is-coming-soon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid rgba(151, 184, 188, 0.42);
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.18), rgba(241, 248, 248, 0.54) 72%),
    rgba(238, 246, 246, 0.16);
  backdrop-filter: blur(1.4px);
}

.data-market-content.is-coming-soon::before {
  content: "待开放";
  position: absolute;
  top: 46%;
  left: 50%;
  z-index: 3;
  display: grid;
  min-width: 220px;
  min-height: 84px;
  padding: 18px 42px;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(15, 143, 144, 0.28);
  border-radius: 18px;
  color: #087f86;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 18px 46px rgba(28, 91, 95, 0.16), inset 0 1px rgba(255, 255, 255, 0.9);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  backdrop-filter: blur(12px);
}

.keyword-market-content.is-coming-soon {
  position: relative;
  min-height: 540px;
  margin-top: 12px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 12px;
  cursor: not-allowed;
}

.keyword-market-content.is-coming-soon > * {
  filter: blur(4px);
  opacity: 0.46;
  pointer-events: none;
  user-select: none;
}

.keyword-market-content.is-coming-soon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid rgba(151, 184, 188, 0.42);
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.18), rgba(241, 248, 248, 0.54) 72%),
    rgba(238, 246, 246, 0.16);
  backdrop-filter: blur(1.4px);
}

.keyword-market-content.is-coming-soon::before {
  content: "待开放";
  position: absolute;
  top: 44%;
  left: 50%;
  z-index: 3;
  display: grid;
  min-width: 220px;
  min-height: 84px;
  padding: 18px 42px;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(15, 143, 144, 0.28);
  border-radius: 18px;
  color: #087f86;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 18px 46px rgba(28, 91, 95, 0.16), inset 0 1px rgba(255, 255, 255, 0.9);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  backdrop-filter: blur(12px);
}

.data-market-toolbar {
  display: grid;
  grid-template-columns: 180px 150px minmax(220px, 1fr) minmax(180px, 1fr) auto auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

.data-market-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.data-market-toolbar input,
.data-market-toolbar select {
  width: 100%;
  min-height: 40px;
}

.data-market-checkbox {
  display: flex !important;
  align-items: center;
  gap: 7px !important;
  min-height: 40px;
  white-space: nowrap;
}

.data-market-checkbox input {
  width: 16px;
  min-height: 16px;
}

.data-market-notice {
  padding: 10px 12px;
  border-left: 3px solid var(--accent-2);
  background: #eef8f6;
  color: var(--muted);
  font-size: 12px;
}

.data-market-notice.warn {
  border-left-color: var(--warning);
  background: #fff8e9;
  color: #815000;
}

.data-market-notice.error {
  border-left-color: var(--danger);
  background: #fff0f0;
  color: var(--danger);
}

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

.data-market-kpis > div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.data-market-kpis span,
.data-market-kpis strong {
  display: block;
}

.data-market-kpis span {
  color: var(--muted);
  font-size: 12px;
}

.data-market-kpis strong {
  margin-top: 5px;
  font-size: 22px;
}

.data-market-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
}

.data-market-table-wrap table {
  min-width: 1040px;
}

.data-market-table-wrap td {
  vertical-align: middle;
}

.data-market-table-wrap td > strong,
.data-market-table-wrap td > small {
  display: block;
}

.data-market-table-wrap td > small {
  max-width: 270px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.data-market-row {
  cursor: pointer;
}

.data-market-row:hover {
  background: #f4faf9;
}

.data-market-product-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
}

.data-market-product-image {
  display: grid;
  place-items: center;
  width: 52px;
  height: 64px;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f4f7f8;
}

.data-market-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.data-market-image-placeholder {
  color: var(--muted);
  font-size: 10px;
}

.data-market-footnote {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.keyword-market-panel {
  grid-column: 1 / -1;
  padding: 22px;
}

.keyword-market-group-field[hidden],
.keyword-market-category-field[hidden] {
  display: none !important;
}

.keyword-market-breadcrumb {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
}

.keyword-market-breadcrumb span {
  margin: 0 6px;
  color: var(--line);
}

.keyword-market-header {
  align-items: flex-start;
}

.keyword-market-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.ozon-seller-jump-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #cfe0f5;
  border-radius: 10px;
  background: #f3f8ff;
  color: #1e3a5f;
}

.ozon-seller-jump-card strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

.ozon-seller-jump-card span {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: #3d5a80;
  max-width: 52rem;
}

.ozon-seller-jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.ozon-seller-jump-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #7aa2d4;
  background: #fff;
  color: #1d4f91;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.ozon-seller-jump-links a:hover {
  background: #e8f1fc;
}

.keyword-market-source-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.keyword-market-source-row > strong {
  white-space: nowrap;
  font-size: 13px;
}

.keyword-market-source-switch {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.keyword-market-source-switch button,
.keyword-market-tabs button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
}

.keyword-market-source-switch button.active,
.keyword-market-tabs button.active {
  border-color: var(--accent);
  background: #e8f6f5;
  color: var(--accent);
  font-weight: 800;
}

.keyword-market-source-row > span {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.keyword-market-tabs {
  display: flex;
  gap: 0;
  margin: 6px 0 14px;
}

.keyword-market-tabs button {
  border-radius: 0;
}

.keyword-market-tabs button:first-child {
  border-radius: 8px 0 0 8px;
}

.keyword-market-tabs button:last-child {
  border-radius: 0 8px 8px 0;
}

.keyword-market-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) 140px 150px minmax(220px, 1fr) auto auto auto;
  gap: 10px;
  align-items: end;
  padding: 14px 0;
}

.keyword-market-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.keyword-market-toolbar input,
.keyword-market-toolbar select {
  width: 100%;
  min-height: 40px;
}

.keyword-market-notice {
  padding: 10px 12px;
  border-left: 3px solid var(--accent-2);
  background: #eef8f6;
  color: var(--muted);
  font-size: 12px;
}

.keyword-market-notice.warn {
  border-left-color: var(--warning);
  background: #fff8e9;
  color: #815000;
}

.keyword-market-notice.error {
  border-left-color: var(--danger);
  background: #fff0f0;
  color: var(--danger);
}

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

.keyword-market-kpis > div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.keyword-market-kpis span,
.keyword-market-kpis strong {
  display: block;
}

.keyword-market-kpis span {
  color: var(--muted);
  font-size: 12px;
}

.keyword-market-kpis strong {
  margin-top: 5px;
  font-size: 22px;
}

.keyword-market-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.keyword-market-table-wrap table {
  min-width: 1560px;
}

.keyword-market-table-wrap th,
.keyword-market-table-wrap td {
  white-space: nowrap;
  text-align: right;
}

.keyword-market-table-wrap th:first-child,
.keyword-market-table-wrap td:first-child {
  min-width: 220px;
  text-align: left;
}

.keyword-market-table-wrap tbody tr:hover {
  background: #f4faf9;
}

.keyword-market-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
}

.keyword-market-pagination span {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 1080px) {
  .data-market-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .data-market-wide-field {
    grid-column: span 2;
  }

  .keyword-market-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .keyword-market-search-field,
  .keyword-market-category-field {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .data-market-source-row,
  .data-market-header-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .data-market-source-note {
    margin-left: 0;
    text-align: left;
  }

  .public-hot-market-panel {
    padding: 15px;
  }

  .public-hot-market-hero,
  .public-hot-market-actions,
  .public-hot-market-kpis,
  .public-hot-market-list {
    grid-template-columns: 1fr;
  }

  .public-hot-market-item {
    grid-template-columns: 28px 72px minmax(0, 1fr);
    gap: 9px;
  }

  .public-hot-market-image {
    width: 72px;
    height: 82px;
  }

  .public-hot-market-score {
    grid-column: 2 / -1;
    grid-template-columns: auto auto auto;
    justify-content: start;
    border-top: 1px solid #eee6d5;
    border-left: 0;
  }

  .data-market-member-gate {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px;
    padding: 22px 18px;
  }

  .data-market-member-icon {
    width: 56px;
    height: 56px;
    border-radius: 17px;
    font-size: 12px;
  }

  .data-market-member-gate .primary-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .data-market-toolbar,
  .data-market-kpis {
    grid-template-columns: 1fr;
  }

  .data-market-wide-field {
    grid-column: auto;
  }

  .data-market-content.is-coming-soon {
    min-height: 420px;
  }

  .keyword-market-content.is-coming-soon {
    min-height: 460px;
  }

  .data-market-content.is-coming-soon::before {
    min-width: 180px;
    min-height: 72px;
    padding: 14px 28px;
    font-size: 23px;
  }

  .keyword-market-content.is-coming-soon::before {
    min-width: 180px;
    min-height: 72px;
    padding: 14px 28px;
    font-size: 23px;
  }

  .keyword-market-source-row,
  .keyword-market-header-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .keyword-market-source-row > span {
    margin-left: 0;
    text-align: left;
  }

  .keyword-market-tabs {
    overflow-x: auto;
  }

  .keyword-market-toolbar,
  .keyword-market-kpis {
    grid-template-columns: 1fr;
  }

  .keyword-market-search-field,
  .keyword-market-category-field {
    grid-column: auto;
  }
}

/* ERP order list — compact operations layout */
.erp-order-nav-group { display: grid; }
.erp-order-subnav { display: grid; gap: 3px; padding: 2px 0 7px 12px; border-left: 1px solid #e5e7eb; margin-left: 20px; }
.erp-order-subnav[hidden] { display: none; }
.erp-order-subnav-item { position: relative; padding: 8px 12px 8px 24px; border: 0; border-radius: 8px; background: transparent; color: #6b7280; cursor: pointer; font-size: 11px; text-align: left; }
.erp-order-subnav-item::before { content: ""; position: absolute; left: 10px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #cbd5e1; transform: translateY(-50%); }
.erp-order-subnav-item:hover, .erp-order-subnav-item.active { background: rgba(59, 130, 246, 0.1); color: var(--accent-strong); }
.erp-order-subnav-item.active::before { background: var(--accent); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14); }

.erp-order-center { display: block; }
.erp-order-workspace { padding: 0; border-radius: 15px; box-shadow: 0 10px 28px rgba(32, 67, 72, .07); }
.erp-order-command-bar { display: grid; grid-template-columns: minmax(150px, .9fr) 120px minmax(310px, 1.45fr) minmax(260px, 1.5fr) auto auto auto auto; align-items: center; gap: 9px; padding: 15px 16px; border-bottom: 1px solid #dfe9ea; background: #fff; }
.erp-order-command-bar > select, .erp-order-command-bar > input, .erp-order-date-range { height: 39px; border: 1px solid #d7e1e3; border-radius: 8px; background: #fff; color: #315358; font-size: 11px; outline: none; }
.erp-order-command-bar > select { padding: 0 10px; }
.erp-order-command-bar > input { min-width: 0; padding: 0 12px; }
.erp-order-command-bar > select:focus, .erp-order-command-bar > input:focus, .erp-order-date-range:focus-within { border-color: #199d98; box-shadow: 0 0 0 3px rgba(25, 157, 152, .1); }
.erp-order-date-range { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 7px; padding: 0 10px; }
.erp-order-date-range span { color: #8a9a9d; white-space: nowrap; }
.erp-order-date-range i { color: #829497; font-style: normal; }
.erp-order-date-range input { min-width: 0; border: 0; color: #47666a; outline: none; font: inherit; }
.erp-order-query-button, .erp-order-sync-button { height: 39px; padding: 0 17px; border: 0; border-radius: 9px; color: #fff; cursor: pointer; font-weight: 700; white-space: nowrap; }
.erp-order-query-button { background: linear-gradient(135deg, #6d5bd1, #7259be); box-shadow: 0 6px 14px rgba(102, 83, 190, .2); }
.erp-order-sync-button { background: linear-gradient(135deg, #21cfa2, #25bfa4); box-shadow: 0 6px 14px rgba(31, 190, 154, .18); }
.erp-order-sync-note { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 17px; border-bottom: 1px solid #edf2f3; background: #f8fbfb; color: #668084; font-size: 10px; }
.erp-order-sync-note small { color: #9aa8aa; }

.erp-order-status-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 12px 16px; border-bottom: 1px solid #e2ebec; background: #fff; }
.erp-order-status-tabs button { flex: 0 0 auto; gap: 6px; padding: 8px 11px; border: 0; background: transparent; color: #77898c; }
.erp-order-status-tabs button i { width: 7px; height: 7px; border-radius: 50%; background: #b9c4c6; }
.erp-order-status-tabs button:nth-child(2) i { background: #efa900; box-shadow: 0 0 8px rgba(239, 169, 0, .48); }
.erp-order-status-tabs button:nth-child(3) i { background: #a78be6; }
.erp-order-status-tabs button:nth-child(4) i { background: #87b6e8; }
.erp-order-status-tabs button:nth-child(5) i { background: #71cad5; }
.erp-order-status-tabs button:nth-child(6) i { background: #70c9a9; }
.erp-order-status-tabs button:nth-child(7) i { background: #ef969b; }
.erp-order-status-tabs button:nth-child(8) i { background: #efb68f; }
.erp-order-status-tabs button.active { border: 0; background: #eef8f7; color: #0a7f7c; }
.erp-order-status-tabs button b { background: #eff2f3; }
.erp-order-status-tabs button.active b { background: #147f7d; color: #fff; }

.erp-order-table-wrap { min-height: 390px; padding: 0 10px; }
.erp-order-table { min-width: 1380px; border-collapse: collapse; }
.erp-order-table th { padding: 10px 11px; border: 0; border-bottom: 1px solid #dce6e8; border-radius: 0 !important; background: #f3f6f8; color: #557176; font-size: 10px; }
.erp-order-table th:first-child { width: 34px; text-align: center; }
.erp-order-table th:nth-child(2) { width: 390px; }
.erp-order-table td { padding: 12px 11px; border-bottom: 1px solid #e9eff0; background: #fff; vertical-align: middle; }
.erp-order-table tbody tr:hover td { background: #fbfdfd; }
.erp-order-table td:first-child { text-align: center; }
.erp-order-table input[type="checkbox"] { width: 14px; height: 14px; accent-color: #178f8b; }
.erp-order-product-cell { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 11px; min-width: 0; }
.erp-order-product-image { display: grid; width: 58px; height: 58px; place-items: center; overflow: hidden; border: 1px solid #e1e7e8; border-radius: 9px; background: linear-gradient(145deg, #f7faf9, #eaf1f1); color: #168b87; font-size: 11px; font-weight: 800; }
.erp-order-product-image img { width: 100%; height: 100%; object-fit: cover; }
.erp-order-product-copy { display: grid; gap: 5px; min-width: 0; }
.erp-order-product-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.erp-order-product-title strong { overflow: hidden; color: #304e52; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.erp-order-workflow-badge { flex: 0 0 auto; padding: 3px 6px; border: 1px solid #efc47d; border-radius: 7px; background: #fff7e6; color: #b77808; font-size: 9px; }
.erp-order-workflow-badge.purchased, .erp-order-workflow-badge.to_ship { border-color: #c8b9ee; background: #f6f1ff; color: #775db5; }
.erp-order-workflow-badge.shipped { border-color: #a6d9e0; background: #effbfc; color: #368a96; }
.erp-order-workflow-badge.delivered { border-color: #a9dfc8; background: #effbf5; color: #368966; }
.erp-order-workflow-badge.out_of_stock, .erp-order-workflow-badge.cancelled { border-color: #f1b4b4; background: #fff0f0; color: #bd4b4b; }
.erp-order-workflow-badge.returned { border-color: #edc29e; background: #fff5ec; color: #b46d32; }
.erp-order-product-meta { display: flex; flex-wrap: wrap; gap: 4px; color: #7e9093; font-size: 9px; }
.erp-order-product-meta span { padding: 3px 6px; border-radius: 7px; background: #f4f6f7; }
.erp-order-product-meta b { color: #d64c48; font-size: 13px; }
.erp-order-product-meta .erp-order-prepare-button { padding: 4px 9px; border: 1px solid #c9d2dc; border-radius: 7px; background: #f8fafb; color: #5d6873; cursor: pointer; font-size: 9px; font-weight: 800; }
.erp-order-product-meta .erp-order-prepare-button:hover { border-color: #74b898; background: #effaf4; color: #287450; }
.erp-order-product-meta .erp-order-prepare-button:disabled { border-color: #e1e5e7; background: #f6f7f8; color: #a5adaf; cursor: not-allowed; }
.erp-order-store-line { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px 7px; border-radius: 7px; background: #f0f5fb; color: #55718a; font-size: 9px; }
.erp-order-money-cell { display: grid; gap: 4px; white-space: nowrap; }
.erp-order-money-cell strong { color: #05844a; font-size: 12px; }
.erp-order-money-cell.cost strong { color: #314e52; }
.erp-order-money-cell.profit strong { color: #00975b; }
.erp-order-money-cell span { color: #849497; font-size: 9px; }
.erp-order-money-cell b { color: #0b9f65; font-size: 10px; }
.erp-order-money-cell .erp-order-actual-fee { color: #5e50a1; font-weight: 700; }
.erp-order-money-cell .erp-order-estimate-note { color: #b1843a; }
.erp-order-finance-mode { width: fit-content; padding: 3px 6px; border-radius: 999px; font-size: 8px; font-style: normal; font-weight: 800; }
.erp-order-finance-mode.estimated { background: #fff4db; color: #a06a13; }
.erp-order-finance-mode.actual { background: #e5f8ef; color: #177651; }
.erp-order-procurement-cell, .erp-order-logistics-cell, .erp-order-time-cell { display: grid; gap: 5px; color: #668084; font-size: 9px; }
.erp-order-procurement-cell strong, .erp-order-logistics-cell strong { color: #435f64; font-size: 10px; }
.erp-order-time-chip { padding: 5px 7px; border: 1px solid #dfe7e8; border-radius: 7px; background: #fbfcfc; }
.erp-order-time-chip b { color: #cc4e4e; }
.erp-order-row-actions { display: grid; gap: 5px; min-width: 78px; }
.erp-order-row-actions button { padding: 5px 8px; border: 1px solid #c9dcde; border-radius: 7px; background: #fff; color: #157e7c; cursor: pointer; font-size: 9px; }
.erp-order-row-actions .erp-order-print-label { border-color: #c7b8ec; background: #f6f1ff; color: #7057b2; font-weight: 800; }
.erp-order-row-actions .erp-order-print-label:hover { border-color: #9177d1; background: #eee7ff; }

.erp-order-list-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; border-top: 1px solid #e3ebec; background: #fafcfc; }
.erp-order-batch-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.erp-order-batch-actions button { padding: 7px 10px; border: 0; border-radius: 8px; background: #8bb9ca; color: #fff; cursor: pointer; font-size: 10px; }
.erp-order-batch-actions button:nth-child(2) { background: #8998ca; }
.erp-order-batch-actions button:nth-child(3) { background: #d1aa75; }
.erp-order-batch-actions button:nth-child(4) { background: #76b697; }
.erp-order-batch-actions button:nth-child(5) { background: #a288c8; }
.erp-order-batch-actions button:nth-child(6) { background: #7664bb; }
.erp-order-batch-actions button:disabled { opacity: .45; cursor: not-allowed; }
.erp-order-batch-actions span { color: #839396; font-size: 10px; }
.erp-order-pagination { padding: 0; }
.erp-order-total-strip { display: flex; align-items: center; justify-content: center; gap: 17px; padding: 11px 16px; border-top: 1px solid #e2e9eb; background: linear-gradient(180deg, #f7f9ff, #f2f5ff); }
.erp-order-total-strip > div { display: grid; gap: 2px; text-align: center; }
.erp-order-total-strip strong { color: #4162c4; font-size: 14px; }
.erp-order-total-strip > div:nth-of-type(2) strong { color: #df4c55; }
.erp-order-total-strip > div:nth-of-type(3) strong { color: #d38c2d; }
.erp-order-total-strip > div:nth-of-type(4) strong { color: #159c7f; }
.erp-order-total-strip span { color: #819094; font-size: 9px; }
.erp-order-total-strip > i { color: #9ba6ac; font-style: normal; }
.erp-order-total-strip > b { padding: 6px 12px; border-radius: 20px; background: #10ad80; color: #fff; font-size: 13px; }

.erp-order-summary-view { display: grid; gap: 15px; }
.erp-order-summary-heading { display: flex; align-items: center; justify-content: space-between; padding: 23px 25px; border: 1px solid #d4e4e5; border-radius: 17px; background: linear-gradient(135deg, #f8fcfc, #eaf7f5); }
.erp-order-summary-heading span { color: #178f8b; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.erp-order-summary-heading h2 { margin: 6px 0; color: #25494e; }
.erp-order-summary-heading p { margin: 0; color: #71878a; font-size: 11px; }
.erp-order-summary-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.erp-order-summary-kpis article { padding: 17px; border: 1px solid #dae6e7; border-radius: 13px; background: #fff; }
.erp-order-summary-kpis span { display: block; color: #7c8f92; font-size: 10px; }
.erp-order-summary-kpis strong { display: block; margin-top: 8px; color: #1d5557; font-size: 21px; }
.erp-order-summary-table { overflow-x: auto; }
.erp-order-summary-table table { width: 100%; border-collapse: collapse; }
.erp-order-summary-table th, .erp-order-summary-table td { padding: 12px 16px; border-bottom: 1px solid #e7eeee; color: #587176; font-size: 11px; text-align: left; }
.erp-order-summary-table th { background: #f4f8f8; color: #73878a; font-size: 10px; }

.erp-order-note-editor { grid-template-columns: repeat(3, 1fr); }
.erp-order-note-editor select { width: 100%; padding: 10px 11px; border: 1px solid #d4e0e2; border-radius: 10px; background: #fff; color: #294b4f; outline: none; }
.erp-order-note-wide { grid-column: 1 / -1; }
.erp-order-batch-dialog { width: min(680px, calc(100vw - 28px)); }
.erp-order-batch-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 21px 24px; }
.erp-order-batch-form label { display: grid; gap: 7px; color: #647a7d; font-size: 10px; }
.erp-order-batch-form input, .erp-order-batch-form select { width: 100%; padding: 10px 11px; border: 1px solid #d4e0e2; border-radius: 10px; background: #fff; color: #294b4f; outline: none; }

@media (max-width: 1450px) {
  .erp-order-command-bar { grid-template-columns: 1fr 120px 1.5fr 1.6fr repeat(2, auto); }
  .erp-order-command-bar #erpOrderSync24Btn, .erp-order-command-bar #erpOrderSyncBtn { grid-column: span 1; }
}
@media (max-width: 980px) {
  .erp-order-command-bar { grid-template-columns: 1fr 1fr; }
  .erp-order-date-range, .erp-order-command-bar .erp-order-search { grid-column: 1 / -1; }
  .erp-order-list-footer { align-items: flex-start; flex-direction: column; }
  .erp-order-summary-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 660px) {
  .erp-order-command-bar { grid-template-columns: 1fr; }
  .erp-order-date-range, .erp-order-command-bar .erp-order-search { grid-column: auto; }
  .erp-order-date-range { grid-template-columns: 1fr; height: auto; padding: 9px; }
  .erp-order-total-strip { overflow-x: auto; justify-content: flex-start; }
  .erp-order-total-strip > div { flex: 0 0 auto; }
  .erp-order-summary-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
  .erp-order-summary-kpis, .erp-order-note-editor, .erp-order-batch-form { grid-template-columns: 1fr; }
  .erp-order-note-wide { grid-column: auto; }
}

.ai-studio-hero,
.ai-gallery-panel,
.ai-product-info-panel,
.ai-listing-panel {
  grid-column: 1 / -1;
}

.ai-studio-hero {
  border-top: 3px solid var(--accent);
}

.ai-studio-heading,
.ai-service-state,
.ai-source-form,
.ai-settings-row,
.ai-source-summary {
  display: flex;
  align-items: center;
}

.ai-studio-heading {
  justify-content: space-between;
  gap: 20px;
}

.ai-studio-heading h2 {
  font-size: 23px;
}

.ai-studio-heading p:not(.eyebrow) {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.ai-service-state {
  min-width: 260px;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.ai-service-state strong,
.ai-service-state span {
  display: block;
}

.ai-service-state span:not(.status-dot) {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.status-dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 0 4px rgba(180, 99, 0, 0.12);
}

.status-dot.online {
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(35, 123, 75, 0.12);
}

.ai-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 22px 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.ai-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 58px;
  padding: 8px 10px;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--muted);
  background: #f7fafb;
  border-right: 1px solid var(--line);
}

[data-ai-stage-panel] {
  grid-column: 1 / -1;
}

.ai-stage-navigation {
  position: sticky;
  bottom: 12px;
  z-index: 8;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 10px 30px rgba(18, 39, 48, 0.12);
}

.ai-stage-navigation strong,
.ai-stage-navigation span {
  display: block;
}

.ai-stage-actions,
.ai-listing-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-listing-form {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.ai-listing-mode-tabs {
  display: flex;
  gap: 20px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--line);
}

.ai-listing-mode-tabs button {
  min-height: 42px;
  padding: 0 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}

.ai-listing-mode-tabs button.active {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

.ai-listing-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ai-listing-form-grid.four-columns {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ai-listing-ai-bar,
.ai-listing-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-listing-ai-bar {
  padding: 12px;
  border-left: 3px solid var(--accent);
  background: #f1f8f8;
}

.ai-listing-ai-bar > div {
  min-width: 0;
  flex: 1;
}

.ai-listing-ai-bar strong,
.ai-listing-ai-bar span,
.ai-listing-section > header strong,
.ai-listing-section > header span {
  display: block;
}

.ai-listing-ai-bar > div span,
.ai-listing-section > header span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.ai-listing-ai-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.ai-listing-ai-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.ai-listing-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.ai-listing-section > header {
  margin-bottom: 10px;
}

.ai-category-catalog-toolbar,
.ai-category-search-row,
.ai-category-selected,
.ai-category-attribute-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-category-catalog-toolbar {
  justify-content: space-between;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: #f1f8f8;
}

.ai-category-catalog-toolbar > div {
  min-width: 0;
}

.ai-category-catalog-toolbar strong,
.ai-category-catalog-toolbar span {
  display: block;
}

.ai-category-catalog-toolbar span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.ai-category-recommendations {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.ai-category-recommendation,
.ai-category-search-result {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.ai-category-recommendation:last-child,
.ai-category-search-result:last-child {
  border-bottom: 0;
}

.ai-category-recommendation {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 12px;
}

.ai-category-recommendation:hover,
.ai-category-search-result:hover {
  background: #f1f8f8;
}

.ai-category-recommendation.selected,
.ai-category-search-result.selected {
  background: #eaf8f3;
  box-shadow: inset 4px 0 0 #159a7d;
}

.ai-category-recommendation.selected:hover,
.ai-category-search-result.selected:hover {
  background: #e3f5ee;
}

.ai-category-rank {
  width: fit-content;
  padding: 4px 7px;
  border-radius: 4px;
  background: #e6f4f1;
  color: #08765f;
  font-size: 11px;
  font-weight: 700;
}

.ai-category-copy {
  min-width: 0;
}

.ai-category-copy strong,
.ai-category-copy small,
.ai-category-copy em {
  display: block;
  overflow-wrap: anywhere;
}

.ai-category-copy small {
  margin-top: 3px;
  color: #5f7280;
  font-size: 11px;
}

.ai-category-copy em {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.ai-category-choice-side {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.ai-category-choice-side b {
  color: var(--accent);
  font-size: 15px;
  text-align: right;
}

.ai-category-choice-side i {
  padding: 2px 6px;
  border-radius: 999px;
  background: #159a7d;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.ai-category-empty {
  padding: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.ai-category-search-row {
  align-items: flex-end;
  margin-top: 12px;
}

.ai-category-search-row .ai-field {
  flex: 1;
}

.ai-category-search-row > button {
  min-height: 42px;
}

.ai-category-selection-note {
  margin: 7px 2px 0;
  color: #667882;
  font-size: 11px;
}

.ai-category-search-results {
  max-height: 340px;
  margin-top: 6px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(18, 39, 48, 0.12);
}

.ai-category-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 54px;
  padding: 9px 12px;
}

.ai-category-search-result > span {
  min-width: 0;
}

.ai-category-search-result strong,
.ai-category-search-result small {
  display: block;
  overflow-wrap: anywhere;
}

.ai-category-search-result small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.ai-category-search-result em {
  flex: 0 0 auto;
  color: #667882;
  font: 11px/1.4 Consolas, "Courier New", monospace;
  font-style: normal;
}

.ai-category-selected {
  align-items: flex-start;
  flex-direction: column;
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 3px solid #aebbc1;
  background: #f7fafb;
}

.ai-category-selected.selected {
  border: 1px solid #a8ddcf;
  border-left: 4px solid #159a7d;
  background: #f0faf6;
  box-shadow: 0 8px 20px rgba(21, 154, 125, 0.08);
}

.ai-category-selected .ai-category-selected-label {
  color: #08765f;
  font-weight: 800;
}

.ai-category-selected span,
.ai-category-selected small,
.ai-category-selected em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.ai-category-selected strong,
.ai-category-selected small {
  overflow-wrap: anywhere;
}

.ai-category-manual {
  margin-top: 10px;
}

.ai-category-manual summary {
  width: fit-content;
  color: #536872;
  cursor: pointer;
  font-size: 12px;
}

.ai-category-manual .ai-listing-form-grid {
  margin-top: 10px;
}

.ai-category-attribute-heading {
  align-items: baseline;
  margin-top: 18px;
}

.ai-category-attribute-heading span {
  color: var(--muted);
  font-size: 11px;
}

.ai-listing-attribute-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.ai-listing-attribute {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.ai-listing-attribute.review,
.ai-listing-attribute.missing {
  border-color: #d89a45;
  background: #fff9ef;
}

.ai-listing-attribute.filled {
  border-color: #9ccdb5;
  background: #f1faf5;
}

.ai-listing-attribute.blocking-error {
  border-color: #d9363e;
  background: #fff1f1;
  box-shadow: 0 0 0 2px rgba(217, 54, 62, 0.13);
}

.ai-listing-attribute.blocking-error [data-ai-listing-attribute-input] {
  border-color: #d9363e;
  background: #fff;
}

.ai-listing-attribute-error {
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: 6px;
  background: #d9363e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.ai-listing-attribute-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.ai-listing-attribute-head span,
.ai-listing-attribute small {
  color: var(--muted);
  font-size: 11px;
}

.ai-listing-attribute-head em {
  color: #b15d00;
  font-size: 11px;
  font-style: normal;
}

.required-mark,
.ai-listing-attribute-head .required-mark {
  color: #d9363e;
  font-size: inherit;
  font-weight: 800;
}

.ai-listing-attribute-name-ru {
  display: block;
  margin-top: -2px;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.ai-listing-attribute small {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.ai-listing-dictionary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.ai-listing-dictionary-actions .secondary-button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 10px;
  font-size: 11px;
}

.ai-listing-dictionary-selected {
  flex: 1 1 180px;
  color: #a66416;
  font-size: 11px;
}

.ai-listing-dictionary-selected.selected {
  color: #287c54;
  font-weight: 700;
}

.ai-listing-dictionary-actions .ai-listing-no-brand {
  border-color: #80b6a0;
  background: #f1faf5;
  color: #176c49;
}

.ai-listing-dictionary-actions .ai-listing-dictionary-browse {
  border-color: #d9c79f;
  color: #76581b;
  background: #fffdf7;
}

.ai-listing-no-brand-help {
  color: #59736a !important;
}

.ai-listing-dictionary-results {
  max-height: 220px;
  margin-top: 8px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(25, 55, 65, 0.12);
}

.ai-listing-dictionary-help {
  position: sticky;
  z-index: 1;
  top: 0;
  padding: 8px 10px;
  border-bottom: 1px solid #ecd5a8;
  background: #fff8e8;
  color: #85591b;
  font-size: 11px;
  line-height: 1.45;
}

.ai-listing-dictionary-option {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.ai-listing-dictionary-option:last-child {
  border-bottom: 0;
}

.ai-listing-dictionary-option:hover,
.ai-listing-dictionary-option:focus-visible {
  background: #eef8f3;
}

.ai-listing-dictionary-option strong {
  display: block;
  overflow-wrap: anywhere;
}

.ai-listing-dictionary-option-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.ai-listing-dictionary-option-copy small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.ai-listing-dictionary-option-actions {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 5px;
}

.ai-listing-dictionary-match {
  margin: 0 !important;
  padding: 2px 6px;
  border-radius: 999px;
  color: #6b7280 !important;
  background: #f3f4f6;
  font-size: 9px !important;
  font-weight: 700 !important;
}

.ai-listing-dictionary-match.high {
  color: #176c49 !important;
  background: #e3f6ec;
}

.ai-listing-dictionary-match.related {
  color: #85591b !important;
  background: #fff1cf;
}

.ai-listing-dictionary-choose {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e8f6ef;
  color: #176c49;
  font-size: 10px;
  font-weight: 700;
}

.ai-listing-dictionary-empty {
  padding: 10px;
  color: var(--muted);
  font-size: 11px;
}

.ai-listing-dictionary-empty strong,
.ai-listing-dictionary-empty span { display: block; }
.ai-listing-dictionary-empty strong { margin-bottom: 4px; color: var(--ink); }
.ai-listing-dictionary-empty span { line-height: 1.5; }

.ai-listing-dictionary-empty.error {
  color: #b34037;
}

@media (max-width: 640px) {
  .ai-listing-dictionary-actions .secondary-button { flex: 1 1 100%; }
  .ai-listing-dictionary-selected { flex-basis: 100%; }
  .ai-listing-dictionary-option { align-items: stretch; flex-direction: column; }
  .ai-listing-dictionary-option-actions {
    grid-auto-flow: column;
    align-items: center;
    justify-content: space-between;
    justify-items: start;
  }
}

.ai-listing-warnings {
  margin-top: 14px;
  padding: 11px 12px;
  border-left: 3px solid var(--warning);
  background: #fff8ec;
  color: #75511f;
  font-size: 12px;
  line-height: 1.6;
}

.ai-listing-action-row {
  justify-content: space-between;
  margin-top: 14px;
}

.ai-listing-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.ai-listing-preview {
  padding-bottom: 12px;
}

.ai-listing-preview-hero {
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--line);
}

.ai-listing-preview-hero > div,
.ai-listing-preview-section > header,
.ai-listing-preview-actions,
.ai-listing-preview-actions > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-listing-preview-hero h3 {
  max-width: 1100px;
  margin: 10px 0 0;
  font-size: 22px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ai-listing-preview-status {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 4px;
  background: #e7f7f1;
  color: #08765f;
  font-size: 11px;
  font-weight: 800;
}

.ai-listing-preview-status.warn {
  background: #fff2df;
  color: #9b5b00;
}

.ai-listing-content-audit {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #dbe7e4;
  border-radius: 12px;
  background: linear-gradient(135deg, #f3fbf8 0%, #f8fafc 100%);
}

.ai-listing-content-audit.good {
  border-color: #d9e7f3;
  background: linear-gradient(135deg, #f3f8fd 0%, #fbfcfe 100%);
}

.ai-listing-content-audit.warn {
  border-color: #f0dfbd;
  background: linear-gradient(135deg, #fff9eb 0%, #fffdfa 100%);
}

.ai-listing-content-score {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 112px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 82, 0.1);
  text-align: center;
}

.ai-listing-content-score strong {
  color: #0b7a61;
  font-size: 36px;
  line-height: 1;
}

.ai-listing-content-audit.warn .ai-listing-content-score strong { color: #b06b08; }
.ai-listing-content-score span { margin-top: 6px; color: #334155; font-size: 11px; font-weight: 900; }
.ai-listing-content-score small { margin-top: 4px; color: var(--muted); font-size: 9px; }

.ai-listing-content-checks header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ai-listing-content-checks header strong { font-size: 14px; }
.ai-listing-content-checks header span { color: var(--muted); font-size: 10px; }
.ai-listing-content-checks ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 18px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.ai-listing-content-checks li {
  position: relative;
  padding-left: 15px;
  color: #526071;
  font-size: 11px;
  line-height: 1.5;
}

.ai-listing-content-checks li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: #c48a20;
  content: "•";
}

.ai-listing-preview-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.ai-listing-preview-gallery a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f7f8;
  aspect-ratio: 3 / 4;
}

.ai-listing-preview-gallery a:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.ai-listing-preview-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-listing-preview-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.ai-listing-preview-section > header {
  margin-bottom: 12px;
}

.ai-listing-preview-section > header span {
  color: var(--muted);
  font-size: 11px;
}

.ai-listing-preview-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.ai-listing-preview-fact {
  min-width: 0;
  padding: 11px 12px;
  background: #fff;
}

.ai-listing-preview-fact span,
.ai-listing-preview-fact strong {
  display: block;
}

.ai-listing-preview-fact span {
  color: var(--muted);
  font-size: 10px;
}

.ai-listing-preview-fact strong {
  margin-top: 4px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.ai-listing-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-listing-preview-tags span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f7fafb;
  font-size: 11px;
}

.ai-listing-preview-copy {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ai-listing-preview-copy + .ai-listing-preview-copy {
  margin-top: 12px;
}

.ai-listing-preview-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -8px 22px rgba(18, 39, 48, 0.08);
}

.ai-listing-preview-actions span {
  color: var(--muted);
  font-size: 11px;
}

.ai-listing-action-row .ai-message {
  flex: 1;
  margin: 0;
}

.ai-step:last-child {
  border-right: 0;
}

.ai-step strong {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #ffffff;
  background: #9aa8af;
  font-size: 12px;
}

.ai-step.active,
.ai-step.done {
  color: var(--ink);
  background: #eef8f6;
}

.ai-step.active strong,
.ai-step.done strong {
  background: var(--accent-2);
}

.ai-source-form {
  gap: 10px;
}

.ai-force-parse-button {
  white-space: nowrap;
}

.ai-product-pool-row {
  display: flex;
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.ai-product-pool-row label {
  display: grid;
  flex: 1;
  gap: 7px;
}

.ai-source-form label {
  display: grid;
  flex: 1;
  gap: 7px;
}

.manual-image-entry {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.manual-image-entry summary {
  cursor: pointer;
  font-weight: 700;
}

.manual-image-entry textarea {
  margin-top: 8px;
}

.ai-message {
  min-height: 36px;
  margin-top: 12px;
  padding: 9px 11px;
  border-left: 3px solid var(--accent);
  background: #f1f7f7;
  color: var(--muted);
  font-size: 12px;
}

.ai-source-summary {
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
  color: var(--muted);
  font-size: 12px;
}

.ai-image-grid,
.ai-output-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ai-image-option {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #eef3f5;
  cursor: pointer;
}

.ai-image-option.selected {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.15);
}

.ai-image-option img,
.ai-output-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #ffffff;
}

.ai-image-option input {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  min-height: 20px;
  accent-color: var(--accent-2);
}

.ai-primary-reference {
  position: absolute;
  top: 7px;
  left: 7px;
  min-height: 26px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  color: #ffffff;
  background: rgba(15, 27, 32, 0.76);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.ai-primary-reference.active {
  border-color: #2a9d8f;
  background: #168578;
}

.ai-field {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.ai-listing-warehouse-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.ai-listing-warehouse-control button {
  min-width: 54px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
}

.ai-listing-warehouse-field small {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
}

.listing-publish-store-option select {
  min-width: 0;
}

.ai-analysis-result {
  display: grid;
  gap: 8px;
  min-height: 96px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
  color: var(--muted);
  font-size: 12px;
}

.ai-analysis-result strong {
  color: var(--ink);
}

.ai-analysis-conflict {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-left: 3px solid #d97706;
  background: #fff7e8;
  color: #8a4b08;
}

.ai-analysis-conflict strong {
  color: #9a4f00;
}

.ai-analysis-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-analysis-tags span {
  padding: 5px 8px;
  border-radius: 999px;
  color: #1f6e4a;
  background: #e8f5ee;
  font-weight: 700;
}

.ai-analysis-manual-note {
  color: #6c604c;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.ai-prompt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.ai-auto-prompt-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
}

.ai-auto-prompt-toggle input {
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--accent);
}

.ai-template-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.ai-template {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #ffffff;
  text-align: left;
}

.ai-template strong,
.ai-template span {
  display: block;
}

.ai-template strong {
  font-size: 12px;
}

.ai-template span {
  color: var(--muted);
  font-size: 11px;
}

.ai-template.active {
  color: var(--accent);
  border-color: var(--accent);
  background: #eef8f8;
}

.ai-template.active span {
  color: var(--accent);
}

.ai-shot-plan {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.ai-shot-plan > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 2px 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f7fafb;
}

.ai-shot-plan span {
  grid-row: 1 / 3;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 10px;
  font-weight: 800;
}

.ai-shot-plan strong,
.ai-shot-plan small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-shot-plan strong {
  font-size: 11px;
}

.ai-shot-plan small {
  color: var(--muted);
  font-size: 9px;
}

.ai-settings-row {
  gap: 12px;
  margin-bottom: 14px;
}

.ai-settings-row label {
  display: grid;
  flex: 1;
  gap: 7px;
}

.ai-output-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ai-output-item,
.ai-empty-output {
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #f7fafb;
}

.ai-output-item {
  aspect-ratio: 1;
}

.ai-batch-note {
  margin-bottom: 12px;
  padding: 9px 11px;
  border-left: 3px solid var(--accent-2);
  color: var(--muted);
  background: #eef8f6;
  font-size: 11px;
}

.ai-output-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.ai-generate-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-output-card .ai-output-item {
  display: block;
  min-height: 0;
  aspect-ratio: 2 / 3;
  border: 0;
  border-radius: 0;
  background: #eef3f5;
}

.ai-output-card .ai-output-item.gpt-portrait {
  aspect-ratio: 3 / 4;
}

.ai-output-card .ai-output-item img {
  object-fit: contain;
}

.ai-output-card footer {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px;
  border-top: 1px solid var(--line);
}

.ai-output-card footer > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 9px;
  font-weight: 800;
}

.ai-output-card footer strong,
.ai-output-card footer small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-output-card footer strong {
  font-size: 11px;
}

.ai-output-card footer small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.ai-output-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ai-output-fix,
.ai-output-adjust {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  background: #fff;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.ai-output-fix:hover,
.ai-output-adjust:hover {
  color: #fff;
  background: var(--accent);
}

.ai-output-fix:disabled,
.ai-output-adjust:disabled {
  cursor: wait;
  opacity: 0.6;
}

.ai-output-adjust {
  color: #255b67;
  border-color: #9cbfc7;
  background: #f2f8f9;
}

.ai-adjust-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 24px 70px rgb(12 34 43 / 24%);
}

.ai-adjust-dialog::backdrop {
  background: rgb(5 25 32 / 48%);
}

.ai-adjust-header,
.ai-adjust-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}

.ai-adjust-header {
  border-bottom: 1px solid var(--line);
}

.ai-adjust-header h2 {
  margin: 0;
  font-size: 18px;
}

.ai-adjust-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.ai-adjust-body {
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1.28fr);
  gap: 18px;
  padding: 18px;
  overflow-y: auto;
}

.ai-adjust-body > img {
  width: 100%;
  max-height: 440px;
  object-fit: contain;
  border: 1px solid var(--line);
  background: #eef3f5;
}

.ai-adjust-form {
  display: grid;
  align-content: start;
  gap: 10px;
}

.ai-adjust-form label {
  font-weight: 800;
}

.ai-adjust-form textarea {
  width: 100%;
  resize: vertical;
}

.ai-adjust-reference-picker {
  margin-top: 3px;
}

.ai-adjust-form input[type="file"] {
  width: 100%;
  padding: 8px;
  border: 1px dashed #bed3d8;
  border-radius: 7px;
  color: var(--muted);
  background: #f7fafb;
  font-size: 11px;
}

.ai-adjust-reference-list {
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid #e2eaec;
  border-radius: 7px;
  background: #fbfcfc;
}

.ai-adjust-reference-list img {
  width: 46px;
  height: 46px;
  border-radius: 6px;
  object-fit: cover;
}

.ai-adjust-reference-list span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.ai-adjust-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ai-adjust-suggestions button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #bed3d8;
  border-radius: 6px;
  color: #255b67;
  background: #f2f8f9;
  font-size: 11px;
}

.ai-adjust-cost-note {
  margin: 2px 0 0;
  padding: 9px 10px;
  border-left: 3px solid #d97706;
  color: #7a4a10;
  background: #fff7e8;
  font-size: 11px;
  line-height: 1.55;
}

.ai-adjust-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  background: #f7fafb;
}

@media (max-width: 720px) {
  .ai-adjust-body {
    grid-template-columns: 1fr;
  }

  .ai-adjust-body > img {
    max-height: 280px;
  }

  .ai-manual-controls {
    grid-template-columns: 1fr;
  }

  .ai-manual-controls p {
    grid-column: auto;
  }
}

/* ERP order readability and dedicated procurement dialog. */
body .erp-order-command-bar {
  gap: 12px;
  padding: 18px 20px;
}

body .erp-order-command-bar > select,
body .erp-order-command-bar > input,
body .erp-order-command-bar > button,
body .erp-order-command-bar .erp-order-date-range {
  min-height: 44px;
  font-size: 12px;
}

body .erp-order-sync-note {
  padding: 9px 20px;
  font-size: 11px;
}

body .erp-order-prepare-bar {
  padding: 16px 20px;
}

body .erp-order-prepare-copy strong,
body .erp-order-prepare-readiness strong {
  font-size: 13px;
}

body .erp-order-prepare-copy span,
body .erp-order-prepare-readiness span {
  font-size: 11px;
  line-height: 1.55;
}

body .erp-order-status-tabs {
  gap: 6px;
  padding: 14px 18px;
}

body .erp-order-status-tabs button {
  min-height: 38px;
  padding: 9px 13px;
  font-size: 12px;
}

body .erp-order-status-tabs button b {
  min-width: 23px;
  height: 21px;
  font-size: 11px;
}

body .erp-order-table-wrap {
  min-height: 430px;
  padding: 8px 16px 0;
  overflow-x: auto;
}

body .erp-order-table {
  min-width: 1650px;
}

body .erp-order-table th {
  padding: 13px 14px;
  color: #49656a;
  font-size: 12px;
  line-height: 1.35;
}

body .erp-order-table th:first-child { width: 42px; }
body .erp-order-table th:nth-child(2) { width: 420px; }
body .erp-order-table th:nth-child(3) { width: 155px; }
body .erp-order-table th:nth-child(4) { width: 140px; }
body .erp-order-table th:nth-child(5) { width: 145px; }
body .erp-order-table th:nth-child(6) { width: 175px; }
body .erp-order-table th:nth-child(7) { width: 210px; }
body .erp-order-table th:nth-child(8) { width: 180px; }
body .erp-order-table th:nth-child(9) { width: 130px; }

body .erp-order-table td {
  padding: 18px 14px;
  color: #334f54;
  font-size: 12px;
  line-height: 1.5;
}

body .erp-order-product-cell {
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 14px;
}

body .erp-order-product-image {
  width: 70px;
  height: 70px;
  border-radius: 11px;
}

body .erp-order-product-copy { gap: 7px; }
body .erp-order-product-title { gap: 8px; }
body .erp-order-product-title strong { font-size: 13px; line-height: 1.45; }
body .erp-order-workflow-badge { padding: 4px 8px; font-size: 10px; }
body .erp-order-platform-state { font-size: 10px; }
body .erp-order-product-meta { gap: 6px; font-size: 10px; }
body .erp-order-product-meta span { padding: 4px 7px; }
body .erp-order-store-line { gap: 7px; padding: 6px 8px; font-size: 10px; }

body .erp-order-money-cell { gap: 5px; }
body .erp-order-money-cell strong { font-size: 14px; }
body .erp-order-money-cell span { font-size: 10px; }
body .erp-order-money-cell b { font-size: 11px; }
body .erp-order-finance-mode { padding: 4px 7px; font-size: 9px; }
body .erp-order-procurement-cell,
body .erp-order-logistics-cell,
body .erp-order-time-cell { gap: 7px; font-size: 10px; }
body .erp-order-procurement-cell strong,
body .erp-order-logistics-cell strong { font-size: 12px; }
body .erp-order-time-chip { padding: 7px 9px; font-size: 10px; line-height: 1.45; }
body .erp-order-logistics-open { gap: 7px; padding: 10px 11px; }
body .erp-order-logistics-open em { font-size: 9px; }

body .erp-order-row-actions {
  gap: 7px;
  min-width: 112px;
}

body .erp-order-row-actions button {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 750;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}

body .erp-order-row-actions button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 7px 15px rgba(48, 75, 90, .12);
}

body .erp-order-row-actions button:active:not(:disabled),
body .erp-order-command-bar button:active:not(:disabled),
body .erp-order-batch-actions button:active:not(:disabled) {
  transform: translateY(1px) scale(.98);
  box-shadow: none;
}

body .erp-order-row-actions .erp-order-purchase-button {
  border-color: #d7b75e !important;
  color: #6d5114 !important;
  background: #fff8e5 !important;
}

body .erp-order-list-footer {
  padding: 14px 16px;
}

body .erp-order-batch-actions button,
body .erp-order-pagination,
body .erp-order-batch-actions span {
  font-size: 11px;
}

body .erp-order-total-strip {
  gap: 22px;
  padding: 14px 18px;
}

body .erp-order-total-strip strong { font-size: 16px; }
body .erp-order-total-strip span { font-size: 10px; }

/* Store monitoring workspace. */
.store-monitor-page {
  display: grid;
  gap: 18px;
  overflow: hidden;
  padding: 0;
}

.store-monitor-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  padding: 26px 28px 24px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 18%, rgba(232, 191, 89, .3), transparent 28%),
    linear-gradient(135deg, #162d32 0%, #1d454a 54%, #826b32 130%);
}

.store-monitor-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #f3d37f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.store-monitor-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f3d37f;
  box-shadow: 0 0 0 5px rgba(243, 211, 127, .14);
}

.store-monitor-hero h2 {
  color: #fff;
  font-size: 27px;
  letter-spacing: -.04em;
}

.store-monitor-hero p:last-child {
  max-width: 620px;
  margin-top: 7px;
  color: rgba(255, 255, 255, .74);
  font-size: 12px;
}

.store-monitor-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.store-monitor-hero-actions .secondary-button {
  color: #edf7f5;
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .1);
}

.store-monitor-hero-actions .primary-button {
  color: #1a2a2d;
  background: #f3d37f;
  box-shadow: 0 9px 20px rgba(5, 22, 24, .16);
}

.store-monitor-sync-state {
  color: rgba(255, 255, 255, .62);
  font-size: 11px;
}

.store-monitor-overview {
  display: grid;
  grid-template-columns: 1.25fr repeat(3, 1fr);
  gap: 12px;
  padding: 0 28px;
}

.store-monitor-overview article {
  display: grid;
  gap: 5px;
  min-height: 104px;
  padding: 17px 18px;
  border: 1px solid #e3eaeb;
  border-radius: 12px;
  background: #fbfcfc;
}

.store-monitor-overview article.store-monitor-overview-primary {
  border-color: #dfc172;
  background: linear-gradient(135deg, #fffaf0, #fff);
}

.store-monitor-overview span,
.store-monitor-overview small {
  color: #789094;
  font-size: 11px;
}

.store-monitor-overview strong {
  color: #183b3f;
  font-size: 26px;
  letter-spacing: -.04em;
}

.store-monitor-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px 16px;
  border-bottom: 1px solid #e4eaeb;
}

.store-monitor-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.store-monitor-tabs button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #6b8184;
  background: transparent;
  font-size: 12px;
  font-weight: 750;
}

.store-monitor-tabs button:hover,
.store-monitor-tabs button.active {
  color: #28555a;
  border-color: #d5e2e1;
  background: #eff7f5;
}

.store-monitor-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 210px;
  margin-left: auto;
  padding: 0 11px;
  border: 1px solid #d8e3e4;
  border-radius: 8px;
  background: #fbfcfc;
}

.store-monitor-search > span {
  color: #9aaeb0;
  font-size: 18px;
  line-height: 1;
}

.store-monitor-search input {
  min-height: 36px !important;
  padding: 7px 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 11px;
}

.store-monitor-search input:focus { box-shadow: none; }

.store-monitor-collapse-btn { min-height: 36px; font-size: 11px; }
.store-monitor-toolbar > .badge { flex: 0 0 auto; }

.store-monitor-list {
  display: grid;
  gap: 12px;
  padding: 0 28px 28px;
}

.store-monitor-list.is-collapsed { display: none; }

.store-monitor-task-card {
  position: relative;
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) 44px;
  min-height: 184px;
  overflow: hidden;
  border: 1px solid #dfe8e8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(46, 81, 82, .06);
}

.store-monitor-card-marker {
  background: #d2a53e;
}

.store-monitor-card-marker.paused { background: #9eaeb0; }
.store-monitor-card-marker.scheduled { background: #5d9acb; }
.store-monitor-card-marker.failed { background: #d86d55; }

.store-monitor-card-main { min-width: 0; padding: 19px 20px 17px; }

.store-monitor-card-header,
.store-monitor-card-title,
.store-monitor-card-meta,
.store-monitor-stats,
.store-monitor-card-status,
.store-monitor-type-badge { display: flex; align-items: center; }

.store-monitor-card-header { justify-content: space-between; gap: 16px; }
.store-monitor-card-title { gap: 9px; min-width: 0; }

.store-monitor-card-title h3 {
  overflow: hidden;
  margin: 0;
  color: #173b3f;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-monitor-type-badge {
  flex: 0 0 auto;
  min-height: 23px;
  padding: 0 9px;
  border-radius: 999px;
  color: #267a91;
  background: #e3f4fb;
  font-size: 10px;
  font-weight: 800;
}

.store-monitor-card-status { gap: 7px; flex: 0 0 auto; }
.store-monitor-card-status strong { color: #446267; font-size: 11px; }
.store-monitor-card-status small { color: #8aa0a2; font-size: 10px; }

.store-monitor-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d2a53e;
  box-shadow: 0 0 0 4px rgba(210, 165, 62, .12);
}

.store-monitor-status-dot.paused { background: #9eaeb0; box-shadow: 0 0 0 4px rgba(158, 174, 176, .15); }
.store-monitor-status-dot.scheduled { background: #5d9acb; box-shadow: 0 0 0 4px rgba(93, 154, 203, .14); }
.store-monitor-status-dot.failed { background: #d86d55; box-shadow: 0 0 0 4px rgba(216, 109, 85, .14); }

.store-monitor-card-meta {
  gap: 19px;
  margin-top: 14px;
  color: #738a8d;
  font-size: 11px;
}

.store-monitor-card-meta span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.store-monitor-card-meta span:first-child { max-width: 36%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-monitor-card-meta i { color: #bf9235; font-style: normal; }

.store-monitor-watch-tip {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(191, 146, 53, 0.28);
  background: linear-gradient(180deg, #fff9ef, #f7edd8);
  color: #5c4a24;
  font-size: 12px;
  line-height: 1.45;
}

.store-monitor-stats {
  gap: 14px;
  min-height: 48px;
  margin-top: 17px;
  padding: 0 10px;
  border-radius: 10px;
  background: #f7f9fa;
}

.store-monitor-stat-new,
.store-monitor-stat-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.store-monitor-stat-new { flex: 1 1 auto; }
.store-monitor-stat-new strong,
.store-monitor-stat-brand strong { color: #cf5b95; font-size: 11px; white-space: nowrap; }
.store-monitor-stat-new span { display: inline-flex; align-items: center; gap: 4px; color: #85989b; font-size: 10px; white-space: nowrap; }
.store-monitor-stat-new b { min-width: 20px; padding: 3px 5px; border-radius: 6px; color: #fff; background: #e9a4c2; text-align: center; font-size: 10px; }
.store-monitor-stat-brand { padding-left: 14px; border-left: 1px solid #e0e7e8; }
.store-monitor-stat-brand strong { color: #5b70c9; }
.store-monitor-stat-brand b { min-width: 24px; padding: 4px 7px; border-radius: 7px; color: #fff; background: #7787e7; text-align: center; }

.store-monitor-view-link {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #ccd9ea;
  border-radius: 7px;
  color: #5471bf;
  background: #fbfcff;
  font-size: 10px;
  text-decoration: none;
  white-space: nowrap;
}

.store-monitor-view-link:hover { color: #fff; background: #5572c6; border-color: #5572c6; }

.store-monitor-card-actions {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  padding: 20px 8px;
  border-left: 1px solid #edf1f1;
  background: #fbfcfc;
}

.store-monitor-action {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 800;
}

.store-monitor-action.refresh { color: #2673a7; border-color: #a9d5ee; background: #e6f6ff; }
.store-monitor-action.delete { color: #c95445; border-color: #f0beb6; background: #fff0ed; }
.store-monitor-action.toggle { color: #5d8b2e; border-color: #c2dc9b; background: #eff9df; }
.store-monitor-action:hover { transform: translateY(-1px); box-shadow: 0 5px 10px rgba(47, 79, 82, .12); }

.store-monitor-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 47px 20px 54px;
  border: 1px dashed #cbdada;
  border-radius: 13px;
  background: #fbfdfd;
  text-align: center;
}

.store-monitor-empty-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 15px;
  color: #b98b30;
  background: #fff6dd;
  font-size: 22px;
}

.store-monitor-empty strong { color: #33575b; font-size: 14px; }
.store-monitor-empty span { color: #82999b; font-size: 11px; }
.store-monitor-empty .primary-button { margin-top: 9px; min-height: 36px; font-size: 11px; }

.store-monitor-dialog {
  width: min(680px, calc(100vw - 28px));
  max-height: min(850px, calc(100vh - 28px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #f7fafa;
  box-shadow: 0 30px 80px rgba(14, 44, 48, .28);
}

.store-monitor-dialog::backdrop { background: rgba(13, 27, 31, .62); backdrop-filter: blur(3px); }
.store-monitor-dialog-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(850px, calc(100vh - 28px)); }

.store-monitor-dialog-shell > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 28px 21px;
  color: #fff;
  background: linear-gradient(135deg, #2b7072, #8662b0);
}

.store-monitor-dialog-shell > header > div > span { color: #f3d37f; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.store-monitor-dialog-shell > header h2 { margin-top: 7px; color: #fff; font-size: 23px; }
.store-monitor-dialog-shell > header p { margin-top: 6px; color: rgba(255, 255, 255, .73); font-size: 11px; }
.store-monitor-dialog-close { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; color: #fff; background: rgba(255,255,255,.16); font-size: 25px; line-height: 1; }
.store-monitor-dialog-body { overflow-y: auto; padding: 21px 28px; }
.store-monitor-form-section { display: grid; gap: 14px; padding: 19px 0 21px; border-bottom: 1px solid #e0e8e8; }
.store-monitor-form-section:first-child { padding-top: 0; }
.store-monitor-form-title { display: flex; align-items: center; gap: 11px; }
.store-monitor-form-title > i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #a97720; background: #fff2cc; font-size: 10px; font-style: normal; font-weight: 850; }
.store-monitor-form-title div { display: grid; gap: 3px; }
.store-monitor-form-title strong { color: #24484c; font-size: 15px; }
.store-monitor-form-title span { color: #82989b; font-size: 10px; }
.store-monitor-form-section label { display: grid; gap: 7px; color: #577276; font-size: 11px; font-weight: 750; }
.store-monitor-form-section label em { color: #d86655; font-style: normal; }
.store-monitor-form-section input[type="text"],
.store-monitor-form-section input[type="url"],
.store-monitor-form-section input[type="datetime-local"] { min-height: 44px; background: #fff; }
.store-monitor-type-card { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid #5b86f7; border-radius: 11px; background: #f5f7ff; box-shadow: 0 8px 20px rgba(91, 134, 247, .1); }
.store-monitor-type-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #57a1ff, #7862d7); font-size: 22px; }
.store-monitor-type-card div { display: grid; gap: 3px; }
.store-monitor-type-card strong { color: #273d58; font-size: 13px; }
.store-monitor-type-card small { color: #75849c; font-size: 10px; }
.store-monitor-type-card b { margin-left: auto; color: #5575d1; font-size: 10px; }
.store-monitor-form-hint { color: #899b9d; font-size: 10px; line-height: 1.6; }
.store-monitor-execution-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.store-monitor-execution-card { display: flex !important; align-items: center; gap: 11px; min-height: 80px; padding: 12px !important; border: 1px solid #dce5e5; border-radius: 12px; background: #fff; cursor: pointer; }
.store-monitor-execution-card.active { border-color: #5b86f7; background: #f6f7ff; box-shadow: 0 8px 20px rgba(91, 134, 247, .1); }
.store-monitor-execution-card > input { position: absolute; opacity: 0; pointer-events: none; }
.store-monitor-execution-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: #2c7b8b; background: #e6f7f6; font-size: 20px; }
.store-monitor-execution-card > span:last-child { display: grid; gap: 4px; }
.store-monitor-execution-card strong { color: #294c50; font-size: 12px; }
.store-monitor-execution-card small { color: #86999b; font-size: 10px; font-weight: 500; }
.store-monitor-schedule-field { margin-top: 2px; }
.store-monitor-dialog-message { min-height: 19px; margin: 15px 0 0; color: #748a8d; font-size: 11px; }
.store-monitor-dialog-message.error { color: #c75347; }
.store-monitor-dialog-shell > footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 28px; border-top: 1px solid #e1e8e8; background: #fff; }
.store-monitor-dialog-shell > footer button { min-height: 42px; }

@media (max-width: 980px) {
  .store-monitor-overview { grid-template-columns: repeat(2, 1fr); }
  .store-monitor-toolbar { align-items: stretch; flex-wrap: wrap; }
  .store-monitor-search { min-width: 240px; margin-left: 0; flex: 1 1 240px; }
  .store-monitor-toolbar > .badge { margin-left: auto; align-self: center; }
  .store-monitor-stat-new span:nth-of-type(n+3) { display: none; }
}

@media (max-width: 680px) {
  .store-monitor-hero { align-items: flex-start; flex-direction: column; padding: 22px 18px; }
  .store-monitor-hero-actions { justify-content: flex-start; }
  .store-monitor-overview { grid-template-columns: repeat(2, 1fr); padding: 0 18px; }
  .store-monitor-overview article { min-height: 90px; padding: 14px; }
  .store-monitor-overview strong { font-size: 22px; }
  .store-monitor-toolbar { padding: 0 18px 14px; }
  .store-monitor-tabs { width: 100%; }
  .store-monitor-search { min-width: 0; flex-basis: 100%; }
  .store-monitor-collapse-btn { margin-left: auto; }
  .store-monitor-toolbar > .badge { margin-left: 0; }
  .store-monitor-list { padding: 0 18px 20px; }
  .store-monitor-task-card { grid-template-columns: 5px minmax(0, 1fr); }
  .store-monitor-card-main { padding: 16px 14px; }
  .store-monitor-card-header { align-items: flex-start; flex-direction: column; gap: 9px; }
  .store-monitor-card-status { width: 100%; }
  .store-monitor-card-status small { margin-left: auto; }
  .store-monitor-card-meta { align-items: flex-start; flex-direction: column; gap: 6px; }
  .store-monitor-card-meta span:first-child { max-width: 100%; }
  .store-monitor-stats { align-items: stretch; flex-wrap: wrap; gap: 8px; padding: 10px; }
  .store-monitor-stat-new { flex-wrap: wrap; }
  .store-monitor-stat-brand { width: 100%; padding: 8px 0 0; border-top: 1px solid #e0e7e8; border-left: 0; }
  .store-monitor-view-link { margin-left: auto; }
  .store-monitor-card-actions { grid-column: 2; flex-direction: row; justify-content: flex-end; padding: 0 14px 13px; border-top: 1px solid #edf1f1; border-left: 0; }
  .store-monitor-dialog-body { padding: 18px; }
  .store-monitor-dialog-shell > header { padding: 21px 18px; }
  .store-monitor-dialog-shell > footer { padding: 14px 18px; }
}

@media (max-width: 430px) {
  .store-monitor-hero-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .store-monitor-hero-actions .secondary-button,
  .store-monitor-hero-actions .primary-button { width: 100%; }
  .store-monitor-execution-grid { grid-template-columns: 1fr; }
  .store-monitor-dialog-shell > footer { display: grid; grid-template-columns: 1fr 1.25fr; }
}

/* Keep the ERP order grid inside the workspace width so all columns are visible at once. */
body .erp-order-table-wrap {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  padding: 8px 12px 0;
}

body .erp-order-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

body .erp-order-table th,
body .erp-order-table td {
  min-width: 0;
  padding: 9px 7px;
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

body .erp-order-table th:first-child { width: 3%; }
body .erp-order-table th:nth-child(2) { width: 27%; }
body .erp-order-table th:nth-child(3) { width: 11%; }
body .erp-order-table th:nth-child(4) { width: 9%; }
body .erp-order-table th:nth-child(5) { width: 11%; }
body .erp-order-table th:nth-child(6) { width: 12%; }
body .erp-order-table th:nth-child(7) { width: 13%; }
body .erp-order-table th:nth-child(8) { width: 8%; }
body .erp-order-table th:nth-child(9) { width: 6%; }

body .erp-order-table.erp-order-summary-orders th:first-child { width: 23%; }
body .erp-order-table.erp-order-summary-orders th:nth-child(2) { width: 11%; }
body .erp-order-table.erp-order-summary-orders th:nth-child(3) { width: 11%; }
body .erp-order-table.erp-order-summary-orders th:nth-child(4) { width: 8%; }
body .erp-order-table.erp-order-summary-orders th:nth-child(5) { width: 10%; }
body .erp-order-table.erp-order-summary-orders th:nth-child(6) { width: 10%; }
body .erp-order-table.erp-order-summary-orders th:nth-child(7) { width: 13%; }
body .erp-order-table.erp-order-summary-orders th:nth-child(8) { width: 7%; }
body .erp-order-table.erp-order-summary-orders th:nth-child(9) { width: 7%; }

body .erp-order-product-cell {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
}

body .erp-order-product-image {
  width: 52px;
  height: 52px;
}

body .erp-order-product-title,
body .erp-order-product-copy,
body .erp-order-money-cell,
body .erp-order-procurement-cell,
body .erp-order-logistics-cell,
body .erp-order-time-cell,
body .erp-order-row-actions {
  min-width: 0;
}

body .erp-order-money-cell,
body .erp-order-money-cell .erp-order-amount {
  white-space: normal;
  overflow-wrap: anywhere;
}

body .erp-order-logistics-open,
body .erp-order-time-chip {
  min-width: 0;
  overflow-wrap: anywhere;
}

body .erp-order-row-actions {
  width: 100%;
}

body .erp-order-row-actions button {
  min-width: 0;
  padding: 5px 6px;
  font-size: 9px;
  white-space: normal;
}

body .erp-order-status-tabs {
  flex-wrap: wrap;
  overflow-x: visible;
}

body .erp-order-list-footer,
body .erp-order-total-strip {
  flex-wrap: wrap;
}

/* AI image workflow: progressive disclosure and warm premium processing feedback. */
.ai-source-analysis-panel,
.ai-manual-url-entry,
.ai-advanced-generation-options {
  display: none !important;
}

.ai-stepper {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-color: #e4d5b7;
  background: #fbf8f1;
}

.ai-stepper.listing-active {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-step.active,
.ai-step.done {
  color: #4f3b16;
  background: linear-gradient(135deg, #fffdf8 0%, #f7edd7 100%);
}

.ai-step.active strong,
.ai-step.done strong {
  color: #fffaf0;
  background: linear-gradient(145deg, #d7ad45, #9f741d);
  box-shadow: 0 5px 13px rgba(151, 107, 25, 0.22);
}

.ai-provider-switcher {
  grid-template-columns: minmax(210px, 0.72fr) minmax(210px, 0.72fr) minmax(380px, 1.45fr);
  align-items: stretch;
  padding: 14px;
  border-color: #e4d5b7;
  background: linear-gradient(135deg, #fffdf8 0%, #faf5e9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.ai-provider-switcher select {
  border-color: #dccba7;
  background: rgba(255, 255, 255, 0.94);
}

.ai-provider-switcher select:focus {
  border-color: #c89a36;
  box-shadow: 0 0 0 3px rgba(200, 154, 54, 0.12);
  outline: none;
}

.ai-provider-hint {
  align-self: end;
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid rgba(195, 155, 73, 0.22);
  border-radius: 10px;
  background: rgba(255, 250, 239, 0.86);
}

.ai-provider-hint .badge,
.ai-provider-hint .badge.ok {
  flex: 0 0 auto;
  white-space: nowrap;
  color: #6a4a0e;
  background: linear-gradient(145deg, #f8e7b5, #edc965);
  box-shadow: inset 0 0 0 1px rgba(148, 99, 12, 0.10);
}

.ai-provider-hint small {
  color: #74664d;
  font-size: 11px;
}

.ai-thinking-panel {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(220px, 0.72fr) minmax(420px, 1.4fr) 152px;
  align-items: center;
  gap: 15px;
  min-height: 86px;
  margin-top: 13px;
  padding: 14px 16px;
  overflow: hidden;
  border: 1px solid #e3d2af;
  border-radius: 14px;
  background:
    radial-gradient(circle at 2% 50%, rgba(228, 183, 75, 0.18), transparent 24%),
    linear-gradient(110deg, #fffdf9 0%, #faf5e9 58%, #f7f1e4 100%);
  box-shadow: 0 10px 26px rgba(87, 65, 25, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.ai-thinking-panel::after {
  position: absolute;
  inset: 0;
  width: 32%;
  content: "";
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  transform: translateX(-140%);
}

.ai-thinking-panel[data-state="working"]::after {
  animation: ai-thinking-sheen 2.4s ease-in-out infinite;
}

.ai-thinking-orbit {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(166, 119, 29, 0.22);
  border-radius: 50%;
  color: #7e5712;
  background: radial-gradient(circle, #fffdf7 35%, #f0d68e 100%);
  box-shadow: 0 8px 20px rgba(141, 101, 25, 0.16);
  font-size: 12px;
  font-weight: 900;
}

.ai-thinking-orbit i {
  position: absolute;
  top: 3px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b98522;
  transform: translateX(-50%);
  transform-origin: 0 23px;
  opacity: 0.32;
}

.ai-thinking-orbit i:nth-child(2) { transform: translateX(-50%) rotate(120deg); }
.ai-thinking-orbit i:nth-child(3) { transform: translateX(-50%) rotate(240deg); }
.ai-thinking-panel[data-state="working"] .ai-thinking-orbit { animation: ai-thinking-breathe 1.35s ease-in-out infinite; }
.ai-thinking-panel[data-state="working"] .ai-thinking-orbit i { animation: ai-thinking-dot 1.15s ease-in-out infinite; }
.ai-thinking-panel[data-state="working"] .ai-thinking-orbit i:nth-child(2) { animation-delay: .18s; }
.ai-thinking-panel[data-state="working"] .ai-thinking-orbit i:nth-child(3) { animation-delay: .36s; }

.ai-thinking-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.ai-thinking-copy .eyebrow {
  margin: 0;
  color: #a17623;
  font-size: 9px;
  letter-spacing: .14em;
}

.ai-thinking-copy strong {
  color: #352d20;
  font-size: 15px;
}

.ai-thinking-copy > span:last-child {
  overflow: hidden;
  color: #756b59;
  font-size: 11px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-thinking-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 8px;
}

.ai-thinking-steps > span {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid #e8dfcc;
  border-radius: 9px;
  color: #968b77;
  background: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 700;
  transition: 180ms ease;
}

.ai-thinking-steps > span i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #d4c8b0;
}

.ai-thinking-steps > span.active {
  color: #68490f;
  border-color: #d9b65c;
  background: #fff8e6;
  box-shadow: 0 6px 15px rgba(148, 105, 22, 0.09);
}

.ai-thinking-steps > span.active i {
  background: #c69228;
  box-shadow: 0 0 0 5px rgba(198, 146, 40, 0.13);
  animation: ai-thinking-step 1s ease-in-out infinite;
}

.ai-thinking-steps > span.done {
  color: #5d533f;
  border-color: #ded0b3;
  background: #fbf7ee;
}

.ai-thinking-steps > span.done i { background: #ad8434; }

.ai-thinking-action {
  position: relative;
  z-index: 1;
}

.ai-thinking-action button {
  display: grid;
  width: 100%;
  min-height: 52px;
  align-content: center;
  gap: 2px;
  padding: 8px 13px;
  border-radius: 12px;
  white-space: nowrap;
}

.ai-thinking-action button span,
.ai-thinking-action button small {
  display: block;
}

.ai-thinking-action button span {
  font-size: 13px;
  font-weight: 900;
}

.ai-thinking-action button small {
  opacity: .78;
  font-size: 9px;
  font-weight: 650;
}

.ai-thinking-action button:disabled {
  color: #9b927f;
  border-color: #ddd4c3;
  background: #eee9df;
  box-shadow: none;
  cursor: not-allowed;
}

.ai-thinking-panel[data-state="ready"] {
  border-color: #dbc48f;
  background: linear-gradient(110deg, #fffdf9, #f9f1dc);
}

.ai-thinking-panel[data-state="error"] {
  border-color: #e5b8aa;
  background: linear-gradient(110deg, #fffdfb, #fff1ed);
}

.ai-thinking-panel[data-state="error"] .ai-thinking-orbit { color: #9d4d37; background: #fff0ea; }
.ai-thinking-panel[data-state="warning"] { border-color: #e3c581; background: #fff9ea; }

.ai-generate-panel > .panel-header {
  margin-bottom: 14px;
}

.ai-generate-panel .ai-generate-actions .primary-button {
  min-height: 42px;
  padding: 0 20px;
  border: 1px solid #c79831;
  border-radius: 12px;
  color: #fffaf0;
  background: linear-gradient(135deg, #342d22 0%, #5b4524 52%, #a67820 100%);
  box-shadow: 0 10px 22px rgba(86, 61, 20, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-weight: 800;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.ai-generate-panel .ai-generate-actions .primary-button:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 13px 27px rgba(86, 61, 20, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.ai-generate-panel .ai-generate-actions .primary-button:active:not(:disabled) {
  transform: translateY(1px) scale(.985);
  box-shadow: 0 5px 12px rgba(86, 61, 20, 0.17);
}

.ai-generate-panel .ai-generate-actions .primary-button:disabled {
  color: #4f3b17;
  background: linear-gradient(105deg, #f3ddb0 0%, #e0b853 50%, #f3ddb0 100%);
  background-size: 220% 100%;
  box-shadow: 0 8px 20px rgba(147, 104, 23, 0.16);
  opacity: 1;
  animation: ai-generate-button 1.8s linear infinite;
}

.ai-batch-note {
  border-left-color: #bf8d2c;
  color: #75664b;
  background: #fbf6eb;
}

@keyframes ai-thinking-sheen {
  0% { transform: translateX(-140%); }
  70%, 100% { transform: translateX(440%); }
}

@keyframes ai-thinking-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.035); }
}

@keyframes ai-thinking-dot {
  0%, 100% { opacity: .28; }
  50% { opacity: 1; }
}

@keyframes ai-thinking-step {
  0%, 100% { transform: scale(.86); }
  50% { transform: scale(1.18); }
}

@keyframes ai-generate-button {
  to { background-position: -220% 0; }
}

@media (max-width: 1100px) {
  .ai-provider-switcher,
  .ai-thinking-panel {
    grid-template-columns: 1fr 1fr;
  }
  .ai-provider-hint,
  .ai-thinking-steps {
    grid-column: 1 / -1;
  }
  .ai-thinking-action { grid-column: 2; grid-row: 1; }
  .ai-thinking-orbit { display: none; }
}

@media (max-width: 720px) {
  .ai-provider-switcher,
  .ai-thinking-panel {
    grid-template-columns: 1fr;
  }
  .ai-provider-hint,
  .ai-thinking-steps { grid-column: auto; }
  .ai-thinking-steps { grid-template-columns: 1fr 1fr; }
  .ai-thinking-action { grid-column: auto; grid-row: auto; }
}

/* Profit workspace — unified porcelain, charcoal and warm-gold visual system. */
body .profit-calculator-panel {
  grid-column: 1 / -1;
  overflow: hidden;
  padding: 24px;
  border-color: #ddc998;
  background:
    radial-gradient(circle at 96% 0%, rgba(226, 184, 85, 0.12), transparent 28%),
    linear-gradient(160deg, rgba(255, 254, 250, 0.99), rgba(250, 247, 239, 0.97));
  box-shadow: 0 18px 42px rgba(74, 57, 22, 0.10), inset 0 1px 0 #fff;
}

body .profit-calculator-panel > .panel-header {
  position: relative;
  align-items: center;
  min-height: 86px;
  margin: -4px -2px 20px;
  padding: 4px 2px 18px;
  border-bottom: 1px solid #e6dbc1;
}

body .profit-calculator-panel > .panel-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 112px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #c9962c);
  content: "";
}

body .profit-calculator-panel .panel-eyebrow {
  margin-bottom: 5px;
  color: #9a6d13;
  font-size: 10px;
  letter-spacing: 0.12em;
}

body .profit-calculator-panel > .panel-header h2 {
  color: #1e1a13;
  font-size: 24px;
  letter-spacing: -0.035em;
}

body .profit-calculator-panel > .panel-header p {
  max-width: 720px;
  margin-top: 4px;
  color: #746c5e;
  font-size: 12px;
  line-height: 1.6;
}

body .profit-header-actions {
  justify-content: flex-end;
  gap: 10px;
}

body .profit-header-actions .badge.ok {
  padding: 8px 11px;
  border: 1px solid #ead49c;
  color: #78530d;
  background: #fff6df;
  box-shadow: inset 0 1px 0 #fff;
}

body .profit-currency-switch {
  gap: 3px;
  padding: 4px;
  border: 1px solid #ddcfaf;
  border-radius: 12px;
  background: #f5f0e5;
  box-shadow: inset 0 1px 2px rgba(71, 53, 18, 0.06);
}

body .profit-currency-switch .segment {
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  color: #716957;
  background: transparent;
  font-size: 11px;
  font-weight: 780;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

body .profit-currency-switch .segment.active {
  color: #fffaf0;
  background: linear-gradient(145deg, #3b352a, #1f1c17);
  box-shadow: 0 7px 14px rgba(42, 34, 20, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

body .profit-currency-switch .segment:active {
  transform: scale(.97);
}

body .profit-tool-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 10px;
  border: 1px solid #e3d7bb;
  border-radius: 16px;
  background: rgba(245, 241, 231, 0.92);
  box-shadow: inset 0 1px 2px rgba(83, 62, 22, 0.05);
}

body .profit-tool-tabs button {
  position: relative;
  justify-content: flex-start;
  gap: 10px;
  min-height: 68px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid #e5dfd3;
  border-radius: 13px;
  color: #514b40;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 5px 13px rgba(72, 58, 31, 0.045), inset 0 1px 0 #fff;
  text-align: left;
  transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease, background .17s ease;
}

body .profit-tool-tabs button::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(190, 137, 28, .45), transparent);
  content: "";
  opacity: 0;
}

body .profit-tool-tabs button:hover {
  border-color: #d5bd82;
  background: #fffdf8;
  box-shadow: 0 10px 22px rgba(83, 61, 20, 0.09), inset 0 1px 0 #fff;
  transform: translateY(-2px);
}

body .profit-tool-tabs button:active {
  box-shadow: none;
  transform: translateY(1px) scale(.985);
}

body .profit-tool-tabs button i {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid #e2ce9e;
  border-radius: 12px;
  color: #9a6c14;
  background: linear-gradient(145deg, #fffdf7, #f4ead0);
  box-shadow: 0 5px 11px rgba(112, 79, 16, 0.08), inset 0 1px 0 #fff;
}

body .profit-tool-tabs button i svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body .profit-tool-tabs button > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

body .profit-tool-tabs button strong,
body .profit-tool-tabs button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .profit-tool-tabs button strong {
  color: inherit;
  font-size: 12px;
  font-weight: 820;
}

body .profit-tool-tabs button small {
  color: #8a8275;
  font-size: 9.5px;
  font-weight: 560;
}

body .profit-tool-tabs button.active {
  border-color: #b9841a;
  color: #fff9e9;
  background:
    radial-gradient(circle at 92% 12%, rgba(240, 199, 98, .22), transparent 28%),
    linear-gradient(140deg, #3d362a 0%, #25211a 100%);
  box-shadow: 0 12px 25px rgba(50, 39, 19, .18), inset 0 1px 0 rgba(255, 255, 255, .12);
}

body .profit-tool-tabs button.active::after {
  opacity: 1;
}

body .profit-tool-tabs button.active i {
  border-color: #e6c469;
  color: #2f2615;
  background: linear-gradient(145deg, #f8d978, #c79225);
  box-shadow: 0 7px 15px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .55);
}

body .profit-tool-tabs button.active small {
  color: #d5c8ad;
}

body .profit-tool-section {
  padding: 22px;
  border: 1px solid #e3d7bd;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 253, 248, .98));
  box-shadow: 0 12px 28px rgba(70, 52, 18, 0.055), inset 0 1px 0 #fff;
}

body .profit-section-heading {
  margin-bottom: 18px;
  padding-bottom: 15px;
  border-bottom-color: #eee5d3;
}

body .profit-section-heading > div {
  position: relative;
  padding-left: 13px;
}

body .profit-section-heading > div::before {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 3px;
  border-radius: 4px;
  background: linear-gradient(180deg, #e4bd58, #a97313);
  content: "";
}

body .profit-section-heading strong {
  color: #28231b;
  font-size: 17px;
  letter-spacing: -.015em;
}

body .profit-section-heading span {
  color: #7d7567;
  font-size: 11px;
  line-height: 1.55;
}

body .profit-section-heading .profit-data-note {
  border: 1px solid #ead7a8;
  color: #86600f;
  background: #fff7e5;
}

body .profit-input-grid.profit-input-grid-wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-bottom: 20px;
  border-bottom-color: #eee6d6;
}

body .profit-input-grid label,
body .return-choice-row label,
body .toolbox-form-grid label,
body .profit-logistics-template-card label {
  gap: 7px;
  color: #5f584c;
  font-size: 11.5px;
  font-weight: 740;
}

body .profit-input-grid input,
body .profit-input-grid select,
body .return-choice-row input,
body .return-choice-row select,
body .toolbox-form-grid input,
body .toolbox-form-grid select,
body .commission-filter-bar input,
body .commission-filter-bar select,
body .profit-logistics-template-card input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #ddd4c2;
  border-radius: 10px;
  color: #29251e;
  background: #fffdfa;
  box-shadow: inset 0 1px 2px rgba(75, 58, 24, .035);
  font-size: 12px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

body .profit-input-grid input:focus,
body .profit-input-grid select:focus,
body .return-choice-row input:focus,
body .return-choice-row select:focus,
body .toolbox-form-grid input:focus,
body .toolbox-form-grid select:focus,
body .commission-filter-bar input:focus,
body .commission-filter-bar select:focus,
body .profit-logistics-template-card input:focus {
  border-color: #c18b24;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(193, 139, 36, .12), inset 0 1px 0 #fff;
}

body .profit-commission-match {
  gap: 11px;
  margin-top: 14px;
  padding: 12px 14px;
  border-color: #e1d3b3;
  border-radius: 12px;
  color: #625b4e;
  background: linear-gradient(90deg, #fff8e7, #fffdf7);
}

body .profit-commission-match i {
  border-radius: 9px;
  color: #fff9e8;
  background: linear-gradient(145deg, #bb8620, #8f6310);
  box-shadow: 0 5px 11px rgba(126, 87, 13, .18), inset 0 1px 0 rgba(255, 255, 255, .3);
}

body .profit-commission-match strong {
  color: #79540c;
}

body .profit-commission-match[data-state="fallback"] {
  border-color: #e5c991;
  background: #fff7e7;
}

body .profit-commission-match[data-state="fallback"] i,
body .profit-commission-match[data-state="manual"] i {
  background: linear-gradient(145deg, #bd8822, #8f6412);
}

body .profit-commission-match[data-state="manual"] {
  border-color: #dccca9;
  background: #faf6ed;
}

body .profit-auto-parameters {
  gap: 7px;
  padding: 13px 0 15px;
}

body .profit-auto-parameters span {
  padding: 6px 9px;
  border-color: #e3d9c5;
  color: #71695b;
  background: #faf7f0;
  box-shadow: inset 0 1px 0 #fff;
}

body .profit-kpi-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

body .profit-kpi-grid > div {
  position: relative;
  min-height: 94px;
  overflow: hidden;
  padding: 16px 17px;
  border-color: #e5dccb;
  border-radius: 12px;
  background: linear-gradient(150deg, #fff 0%, #fdfbf7 100%);
  box-shadow: 0 7px 18px rgba(70, 54, 25, .045), inset 0 1px 0 #fff;
}

body .profit-kpi-grid > div::before {
  position: absolute;
  top: 0;
  right: 17px;
  left: 17px;
  height: 2px;
  border-radius: 0 0 3px 3px;
  background: #d8c79f;
  content: "";
}

body .profit-kpi-grid > div:nth-child(3),
body .profit-kpi-grid > div:nth-child(6) {
  border-color: #dfc78f;
  background: linear-gradient(145deg, #fffdf8 0%, #fff5dc 100%);
}

body .profit-kpi-grid > div:nth-child(3)::before,
body .profit-kpi-grid > div:nth-child(6)::before {
  background: linear-gradient(90deg, #e4bd58, #a87513);
}

body .profit-kpi-grid span {
  color: #7b7366;
  font-size: 10.5px;
  font-weight: 650;
}

body .profit-kpi-grid strong {
  margin-top: 8px;
  color: #242019;
  font-size: 20px;
  letter-spacing: -.025em;
}

body .profit-result-band {
  min-height: 72px;
  margin-bottom: 15px;
  padding: 14px 17px;
  border: 1px solid #554a36;
  border-left: 4px solid #d1a33d;
  border-radius: 12px;
  color: #f9f2e3;
  background:
    radial-gradient(circle at 92% 20%, rgba(214, 174, 76, .18), transparent 30%),
    linear-gradient(135deg, #332f27, #211e19);
  box-shadow: 0 11px 23px rgba(43, 35, 21, .16), inset 0 1px 0 rgba(255, 255, 255, .1);
}

body .profit-result-band span {
  color: #cfc4af;
}

body .profit-result-band strong {
  margin-top: 3px;
  color: #f1ce72;
  font-size: 17px;
}

body .profit-result-band.loss {
  border-color: #b66e60;
  border-left-color: #c14e3f;
  background: linear-gradient(135deg, #4b2c28, #2d201e);
}

body .profit-result-band.loss strong {
  color: #ffd0c8;
}

body .profit-breakdown-wrap,
body .pricing-table-wrap,
body .commission-table-wrap {
  overflow: auto;
  border: 1px solid #e3daca;
  border-radius: 12px;
  background: #fff;
}

body .profit-breakdown-wrap thead th,
body .pricing-table-wrap thead th,
body .commission-table-wrap thead th {
  color: #645c4e;
  background: #f6f1e7;
  font-size: 10.5px;
  font-weight: 780;
}

body .profit-breakdown-wrap tbody tr:hover,
body .pricing-table-wrap tbody tr:hover,
body .commission-table-wrap tbody tr:hover {
  background: #fffaf0;
}

body .return-choice-row,
body .commission-filter-bar {
  padding: 14px;
  border-color: #e3d8c1;
  border-radius: 12px;
  background: #faf7f0;
}

body .toolbox-action-row {
  min-height: 62px;
  margin: 17px 0;
  padding: 12px 14px;
  border: 1px solid #eadbb9;
  border-left: 3px solid #c28d25;
  border-radius: 0 11px 11px 0;
  background: #fff9ea;
}

body .toolbox-action-row span {
  color: #776e5d;
  line-height: 1.55;
}

body .profit-tool-section .primary-button {
  border-color: #af7914;
  color: #fff9e8;
  background: linear-gradient(145deg, #d8a63d, #a66f0c);
  box-shadow: 0 8px 17px rgba(144, 96, 12, .18), inset 0 1px 0 rgba(255, 255, 255, .38);
}

body .profit-tool-section .secondary-button,
body .profit-tool-section .compact-button {
  border-color: #dacaa7;
  color: #5f4a1d;
  background: #fffdf7;
  box-shadow: 0 5px 12px rgba(76, 57, 20, .06), inset 0 1px 0 #fff;
}

body .profit-tool-section .primary-button:hover,
body .profit-tool-section .secondary-button:hover,
body .profit-tool-section .compact-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 19px rgba(100, 71, 15, .13), inset 0 1px 0 #fff;
}

body .profit-tool-section .primary-button:active,
body .profit-tool-section .secondary-button:active,
body .profit-tool-section .compact-button:active {
  box-shadow: none;
  transform: translateY(1px) scale(.98);
}

body .profit-logistics-template-grid {
  gap: 14px;
}

body .profit-logistics-template-card {
  padding: 17px;
  border-color: #e1d5bc;
  border-radius: 13px;
  background: linear-gradient(155deg, #fff, #fdf9f0);
  box-shadow: 0 7px 17px rgba(74, 56, 22, .05), inset 0 1px 0 #fff;
}

body .profit-logistics-template-card header span {
  color: #7c5810;
  background: #fff0c8;
}

body .profit-logistics-example {
  color: #856116;
}

body .profit-config-hint {
  border: 1px solid #e5d8bc;
  color: #6d6558;
  background: #faf6ec;
}

body .pricing-status-good,
body .commission-rate-pill {
  color: #79540d;
  background: #fff1cd;
}

body .commission-use-button {
  border-color: #d7bd80;
  color: #74500c;
  background: #fffaf0;
}

@media (max-width: 1180px) {
  body .profit-input-grid.profit-input-grid-wide,
  body .return-choice-row,
  body .toolbox-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body .profit-tool-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body .profit-calculator-panel {
    padding: 16px;
  }

  body .profit-calculator-panel > .panel-header,
  body .profit-header-actions,
  body .profit-section-heading,
  body .toolbox-action-row,
  body .commission-filter-bar {
    align-items: stretch;
    flex-direction: column;
  }

  body .profit-header-actions {
    justify-content: flex-start;
  }

  body .profit-tool-tabs,
  body .profit-input-grid.profit-input-grid-wide,
  body .return-choice-row,
  body .toolbox-form-grid,
  body .profit-kpi-grid,
  body .return-kpi-grid {
    grid-template-columns: 1fr;
  }

  body .profit-result-band {
    align-items: flex-start;
    flex-direction: column;
  }

  body .profit-result-band > span {
    text-align: left;
  }
}

/* Align data-market and selection-handbook modules with the black / gold product palette. */
body .ozon-seller-jump-card {
  border-color: #e1cf9f;
  color: #4b3a17;
  background:
    radial-gradient(circle at 96% 0%, rgba(226, 187, 82, .16), transparent 34%),
    linear-gradient(135deg, #fffdf8, #faf3e2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

body .ozon-seller-jump-card strong { color: #3c3018; }
body .ozon-seller-jump-card span { color: #756747; }
body .ozon-seller-jump-links a {
  border-color: #d5b65f;
  color: #76530e;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 4px 10px rgba(123, 88, 17, .07);
}
body .ozon-seller-jump-links a:hover {
  border-color: #b7841b;
  color: #3c2a08;
  background: #fff5d9;
}

body .data-market-source-row {
  border-color: #e1d1aa;
  border-left-color: #c99b32;
  background: linear-gradient(90deg, #fffaf0, #fbfaf6 48%, #f6f3ec);
  box-shadow: 0 6px 17px rgba(111, 80, 19, .07), inset 0 1px rgba(255, 255, 255, .92);
}
body .data-market-source-row > strong { color: #3f3829; }
body .data-market-source-switch { background: rgba(226, 214, 187, .64); }
body .data-market-source-switch button {
  border-color: #ddd3bd;
  color: #746b58;
  background: #fff;
}
body .data-market-source-switch button:hover {
  border-color: #d1aa47;
  color: #7b5814;
}
body .data-market-source-switch button.active {
  border-color: #b9851d;
  color: #231d11;
  background: linear-gradient(135deg, #f3d477, #d7a52f);
  box-shadow: 0 7px 17px rgba(151, 105, 15, .23), inset 0 1px rgba(255, 255, 255, .45);
}
body .data-market-source-switch button.active::before {
  color: #f5d675;
  background: #29251d;
}
body .data-market-source-switch button:focus-visible {
  outline-color: rgba(201, 155, 50, .24);
}
body .data-market-source-switch button.active .data-market-member-tag {
  color: #60430c;
  background: rgba(255, 249, 229, .9);
}

body .data-market-content.is-coming-soon::after,
body .keyword-market-content.is-coming-soon::after {
  border-color: rgba(191, 157, 79, .38);
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, .25), rgba(249, 246, 237, .62) 72%),
    rgba(245, 240, 227, .18);
}
body .data-market-content.is-coming-soon::before,
body .keyword-market-content.is-coming-soon::before {
  border-color: rgba(184, 133, 29, .35);
  color: #8b6417;
  background: rgba(255, 252, 242, .9);
  box-shadow: 0 18px 46px rgba(99, 73, 21, .16), inset 0 1px rgba(255, 255, 255, .94);
}

body .keyword-market-source-row {
  border-color: #e1d5bc;
  background: #faf7f0;
}
body .keyword-market-source-switch button,
body .keyword-market-tabs button {
  border-color: #ddd3bd;
  color: #746b58;
  background: #fff;
}
body .keyword-market-source-switch button.active,
body .keyword-market-tabs button.active {
  border-color: #c99b32;
  color: #76530e;
  background: #fff3cf;
}

body .panel.handbook-panel { background: #f6f3eb; }
body .handbook-hero {
  background:
    radial-gradient(circle at 88% 20%, rgba(248, 219, 132, .3) 0 3px, transparent 4px),
    radial-gradient(circle at 81% 72%, rgba(248, 219, 132, .24) 0 2px, transparent 3px),
    linear-gradient(125deg, #242321 0%, #4c422d 57%, #b88726 100%);
}
body .handbook-hero .eyebrow { color: rgba(247, 222, 155, .76); }
body .handbook-title-row + p { color: rgba(255, 250, 235, .78); }
body .handbook-topic-badge {
  border-color: rgba(247, 220, 144, .48);
  color: #fff3cd;
  background: rgba(255, 235, 177, .11);
}
body .handbook-version {
  border-color: rgba(248, 221, 148, .32);
  background: rgba(38, 31, 19, .3);
}
body .handbook-version span { color: rgba(255, 241, 199, .7); }
body .handbook-result-count {
  color: #76530e;
  background: #f8e9b9;
}
body .handbook-summary > div,
body .handbook-month-card,
body .handbook-guide-card {
  border-color: #e1d8c5;
  box-shadow: 0 8px 24px rgba(74, 58, 25, .07);
}
body .handbook-summary strong,
body .handbook-month-section h4,
body .handbook-guide-block h4,
body .handbook-focus-heading strong,
body .handbook-guide-card header h3,
body .handbook-event-list strong { color: #3d382d; }
body .handbook-month-card > header {
  background: linear-gradient(135deg, #38352f, #85651f 72%, #b8892e);
}
body .handbook-event-list li { background: #f7f4ed; }
body .handbook-event-list time {
  color: #f5d77f;
  background: #292721;
}
body .handbook-focus-item {
  border-color: #e3dac7;
  background: #fdfcf9;
}
body .handbook-product-tags span {
  border-color: #ddd2b8;
  color: #554a35;
  background: #fffdfa;
}
body .handbook-keywords code {
  color: #76530e;
  background: #f8edcc;
}
body .handbook-copy-button {
  border-color: #d8bd75;
  color: #76530e;
  background: #fffdf8;
}
body .handbook-copy-button:hover { background: #fff4d7; }
body .handbook-use-button {
  border-color: #a97919;
  color: #211b10;
  background: linear-gradient(135deg, #efd06e, #cf9926);
  box-shadow: 0 5px 12px rgba(144, 101, 17, .16);
}
body .handbook-use-button:hover { background: linear-gradient(135deg, #f4d981, #d8a32f); }
body .handbook-guide-icon { background: #f3ead5; }
body .handbook-guide-opportunity {
  border-left-color: #c99b32;
  background: #fbf5e7;
}
body .handbook-guide-opportunity span { color: #835f16; }
body .handbook-guide-block li::before { color: #b88622; }
body .handbook-risk { border-top-color: #e1d6c0; }

body .erp-order-purchase-dialog {
  width: min(900px, calc(100vw - 32px));
  border-radius: 22px;
}

body .erp-order-purchase-dialog::backdrop {
  background: rgba(24, 31, 33, .54);
  backdrop-filter: blur(5px);
}

body .erp-order-purchase-dialog .erp-order-dialog-shell {
  border-color: #e5d8b9;
  box-shadow: 0 30px 80px rgba(25, 32, 34, .28);
}

body .erp-order-purchase-dialog .erp-order-dialog-shell > header {
  padding: 24px 28px;
  border-bottom-color: #eadfc5;
  background: linear-gradient(135deg, #fffdf8 0%, #f7f1e3 100%);
}

body .erp-order-purchase-dialog .erp-order-dialog-shell > header span { color: #a97814; }
body .erp-order-purchase-dialog .erp-order-dialog-shell > header h2 { color: #292d2d; font-size: 23px; }
body .erp-order-purchase-dialog .erp-order-dialog-shell > header p { font-size: 12px; }

body .erp-order-purchase-body {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 24px;
  padding: 24px 28px 26px;
  background: #fff;
}

body .erp-order-purchase-product {
  align-self: start;
  overflow: hidden;
  border: 1px solid #e2e7e7;
  border-radius: 16px;
  background: #f8faf9;
}

body .erp-order-purchase-image {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1;
  place-items: center;
  overflow: hidden;
  color: #9e771e;
  background: linear-gradient(145deg, #f7f2e8, #ece5d5);
  font-size: 25px;
  font-weight: 900;
}

body .erp-order-purchase-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
}

body .erp-order-purchase-product-copy {
  display: grid;
  gap: 7px;
  padding: 16px;
}

body .erp-order-purchase-product-copy > span {
  color: #9a7a32;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

body .erp-order-purchase-product-copy h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 3px;
  color: #293f43;
  font-size: 14px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

body .erp-order-purchase-product-copy p {
  overflow-wrap: anywhere;
  margin: 0;
  color: #748689;
  font-size: 11px;
}

body .erp-order-purchase-product-copy b {
  width: fit-content;
  margin-top: 4px;
  padding: 5px 9px;
  border-radius: 8px;
  color: #735919;
  background: #fff4d5;
  font-size: 11px;
}

body .erp-order-purchase-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body .erp-order-purchase-notice {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid #c9dfd5;
  border-radius: 12px;
  background: #f2faf6;
}

body .erp-order-purchase-notice i {
  display: grid;
  flex: 0 0 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #2c9b71;
  font-style: normal;
  font-weight: 900;
}

body .erp-order-purchase-notice strong,
body .erp-order-purchase-notice span { display: block; }
body .erp-order-purchase-notice strong { color: #285746; font-size: 12px; }
body .erp-order-purchase-notice span { margin-top: 2px; color: #6a847a; font-size: 10px; }

body .erp-order-purchase-fields label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #536c70;
  font-size: 12px;
  font-weight: 700;
}

body .erp-order-purchase-fields input,
body .erp-order-purchase-fields select,
body .erp-order-purchase-fields textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d5dfe0;
  border-radius: 10px;
  color: #263f43;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  outline: none;
  resize: vertical;
}

body .erp-order-purchase-fields input:focus,
body .erp-order-purchase-fields select:focus,
body .erp-order-purchase-fields textarea:focus {
  border-color: #c99b32;
  box-shadow: 0 0 0 3px rgba(201, 155, 50, .13);
}

body .erp-order-purchase-note { grid-column: 1 / -1; }
body .erp-order-purchase-dialog .erp-order-dialog-shell > footer {
  padding: 16px 28px 20px;
  border-top: 1px solid #e8ecec;
  background: #fbfcfc;
}
body .erp-order-purchase-dialog .erp-order-dialog-shell > footer > span { font-size: 11px; }
body .erp-order-purchase-dialog .erp-order-dialog-shell > footer button { min-height: 40px; padding-inline: 18px; }

@media (max-width: 760px) {
  body .erp-order-purchase-body { grid-template-columns: 1fr; padding: 18px; }
  body .erp-order-purchase-product { display: grid; grid-template-columns: 110px minmax(0, 1fr); }
  body .erp-order-purchase-image { aspect-ratio: 1 / 1; }
  body .erp-order-purchase-fields { grid-template-columns: 1fr; }
  body .erp-order-purchase-notice,
  body .erp-order-purchase-note { grid-column: auto; }
}

.ai-output-pending {
  display: grid;
  aspect-ratio: 2 / 3;
  place-content: center;
  gap: 7px;
  color: var(--muted);
  background: #f3f6f7;
  text-align: center;
}

.ai-output-pending strong,
.ai-output-pending span {
  display: block;
}

.ai-output-pending strong {
  color: var(--accent);
  font-size: 24px;
}

.ai-output-pending span {
  font-size: 10px;
}

.ai-empty-output {
  grid-column: 1 / -1;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--muted);
}

.ai-empty-output strong,
.ai-empty-output span {
  display: block;
}

.ai-empty-output span {
  margin-top: 5px;
  font-size: 12px;
}

.ai-log {
  min-height: 76px;
  max-height: 180px;
}

.ai-engine-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.55fr);
  gap: 18px;
  align-items: stretch;
}

.ai-engine-intro {
  min-width: 0;
  padding: 4px 0;
}

.ai-engine-intro h2 {
  font-size: 24px;
}

.ai-engine-intro > p:not(.eyebrow) {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.ai-main-relist-panel {
  border-color: #ead7a4;
  background:
    radial-gradient(circle at 92% 8%, rgb(236 189 72 / 15%), transparent 31%),
    linear-gradient(135deg, #fffdf8, #fff);
}

.ai-main-relist-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.ai-main-relist-heading h2 {
  margin: 3px 0 5px;
  font-size: 20px;
}

.ai-main-relist-heading > div > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.ai-main-relist-price {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid #e4c15d;
  border-radius: 999px;
  color: #795407;
  background: #fff4c9;
  font-size: 12px;
  font-weight: 900;
}

.ai-main-relist-body {
  margin-top: 16px;
}

.ai-main-relist-empty {
  min-height: 88px;
  display: grid;
  place-content: center;
  gap: 5px;
  border: 1px dashed #d7c99f;
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
  background: rgb(255 255 255 / 70%);
}

.ai-main-relist-empty strong {
  color: var(--ink);
}

.ai-main-relist-product {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 13px;
  border: 1px solid #eadfc0;
  border-radius: 12px;
  background: rgb(255 255 255 / 88%);
}

.ai-main-relist-visuals {
  display: grid;
  grid-template-columns: repeat(2, 92px);
  gap: 10px;
}

.ai-main-relist-preview {
  position: relative;
}

.ai-main-relist-preview.zoomable {
  display: block;
  width: 92px;
  height: 92px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: zoom-in;
}

.ai-main-relist-preview img {
  width: 92px;
  height: 92px;
  border: 1px solid #e4dcc6;
  border-radius: 10px;
  object-fit: cover;
  background: #f5f1e7;
}

.ai-main-relist-preview.zoomable em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: rgb(20 29 31 / 62%);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  opacity: 0;
  transition: opacity 140ms ease;
}

.ai-main-relist-preview.zoomable:hover em,
.ai-main-relist-preview.zoomable:focus-visible em {
  opacity: 1;
}

.ai-main-relist-preview.zoomable:focus-visible {
  outline: 3px solid rgb(213 170 52 / 38%);
  outline-offset: 3px;
}

.ai-main-relist-preview span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 3px 6px;
  border-radius: 999px;
  color: #fff;
  background: rgb(31 41 55 / 82%);
  font-size: 9px;
  font-weight: 800;
}

.ai-main-relist-preview.generated img {
  border-color: #d5aa34;
  box-shadow: 0 0 0 3px rgb(234 193 93 / 18%);
}

.ai-main-relist-preview.pending {
  width: 92px;
  height: 92px;
  display: grid;
  place-content: center;
  gap: 4px;
  border: 1px dashed #d7c99f;
  border-radius: 10px;
  color: #8a640f;
  background: #fffaf0;
  text-align: center;
}

.ai-main-relist-preview.pending b {
  font-size: 20px;
}

.ai-main-relist-preview.pending small {
  color: var(--muted);
  font-size: 9px;
}

.ai-main-relist-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.ai-main-relist-copy > strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-main-relist-copy > a {
  width: max-content;
  max-width: 100%;
  color: #8a640f;
  font-size: 11px;
  font-weight: 800;
}

.ai-main-relist-copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ai-main-relist-copy > div span {
  padding: 5px 8px;
  border-radius: 7px;
  color: #5f4a16;
  background: #faf3df;
  font-size: 10px;
  font-weight: 700;
}

.ai-main-relist-start {
  min-height: 42px;
  white-space: nowrap;
}

.ai-main-relist-actions {
  display: grid;
  gap: 8px;
}

.ai-main-relist-actions button {
  min-height: 40px;
  white-space: nowrap;
}

.selection-main-relist-confirm-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 18px;
  margin: 0 20px 12px;
  padding: 13px 16px;
  border: 1px solid #e5c465;
  border-radius: 11px;
  background: linear-gradient(135deg, #fffaf0, #fff);
}

.selection-main-relist-confirm-preview[hidden] {
  display: none;
}

.selection-main-relist-confirm-preview > div {
  display: grid;
  gap: 5px;
}

.selection-main-relist-confirm-preview span {
  color: #8a640f;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.selection-main-relist-confirm-preview strong {
  font-size: 15px;
}

.selection-main-relist-confirm-preview small {
  color: var(--muted);
  line-height: 1.55;
}

.selection-main-relist-confirm-zoom {
  position: relative;
  width: 150px;
  height: 112px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: zoom-in;
  overflow: hidden;
}

.selection-main-relist-confirm-zoom img {
  width: 150px;
  height: 112px;
  border: 1px solid #ead7a4;
  border-radius: 9px;
  object-fit: contain;
  background: #fff;
}

.selection-main-relist-confirm-zoom span {
  position: absolute;
  inset: auto 7px 7px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #fff;
  background: rgb(20 29 31 / 76%);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  pointer-events: none;
}

.selection-main-relist-confirm-zoom:hover img,
.selection-main-relist-confirm-zoom:focus-visible img {
  filter: brightness(.82);
}

.selection-main-relist-confirm-zoom:focus-visible {
  outline: 3px solid rgb(213 170 52 / 38%);
  outline-offset: 3px;
}

.ai-task-tabs {
  display: flex;
  width: 100%;
  gap: 8px;
  margin-top: 18px;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: thin;
}

.ai-task-tab,
.ai-task-add,
.ai-task-remove {
  min-height: 40px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #f7fafb;
  font-weight: 800;
}

.ai-task-chip {
  display: inline-flex;
  min-width: 164px;
  max-width: 220px;
  flex: 0 0 auto;
}

.ai-task-tab {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  border-radius: 8px 0 0 8px;
  white-space: nowrap;
}

.ai-task-tab span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--accent-2);
  flex: 0 0 auto;
}

.ai-task-tab b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-task-tab i {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-radius: 50%;
  background: #9aa8ad;
  flex: 0 0 auto;
}

.ai-task-tab i.working {
  background: #d49a1d;
  box-shadow: 0 0 0 4px rgba(212, 154, 29, 0.13);
  animation: ai-task-pulse 1.2s ease-in-out infinite;
}

.ai-task-tab i.success {
  background: #2ba882;
}

.ai-task-tab i.error {
  background: #d85a5a;
}

.ai-task-tab.active {
  color: var(--ink);
  border-color: var(--accent-2);
  background: #eef8f6;
}

.ai-task-chip:has(.ai-task-tab.active) .ai-task-remove {
  border-color: var(--accent-2);
}

.ai-task-remove {
  width: 32px;
  min-width: 32px;
  padding: 0;
  border-left: 0;
  border-radius: 0 8px 8px 0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.ai-task-remove:hover:not(:disabled) {
  color: #b83f3f;
  background: #fff1f1;
}

.ai-task-remove:disabled {
  color: #b5bec1;
  cursor: not-allowed;
}

.ai-task-add {
  width: 42px;
  min-width: 42px;
  border-radius: 8px;
  font-size: 19px;
  position: sticky;
  right: 0;
  flex: 0 0 auto;
}

@keyframes ai-task-pulse {
  50% {
    opacity: 0.45;
    transform: scale(0.78);
  }
}

.ai-run-log {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.ai-run-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ai-run-log .ai-service-state {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ai-log-actions {
  display: flex;
  gap: 4px;
}

.ai-log-actions button {
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
}

.ai-run-log .ai-log {
  min-height: 92px;
  max-height: 130px;
  margin-top: 10px;
}

.ai-stepper {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-provider-switcher {
  display: grid;
  grid-template-columns: minmax(190px, 0.7fr) minmax(190px, 0.7fr) minmax(280px, 1.4fr);
  align-items: end;
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.ai-provider-switcher label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.ai-provider-switcher label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.ai-provider-switcher select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 9px;
  color: var(--ink);
  background: #fff;
}

.ai-provider-hint {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ai-provider-hint small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.ai-source-workbench {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 12px;
}

.ai-source-workbench .ai-product-pool-row {
  margin-bottom: 0;
}

.ai-source-workbench .ai-source-form {
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
}

.ai-mode-workbench {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #d8e5e8;
  border-radius: 16px;
  background:
    radial-gradient(circle at 94% 4%, rgba(88, 101, 242, 0.10), transparent 28%),
    radial-gradient(circle at 4% 100%, rgba(23, 166, 153, 0.12), transparent 32%),
    linear-gradient(145deg, #ffffff 0%, #f7fbfb 58%, #f7f7ff 100%);
  box-shadow: 0 16px 35px rgba(26, 62, 69, 0.08);
}

.ai-mode-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.ai-mode-heading > div {
  display: grid;
  gap: 3px;
}

.ai-mode-heading .eyebrow {
  color: #697b82;
  font-size: 9px;
  letter-spacing: 0.16em;
}

.ai-mode-heading strong {
  font-size: 16px;
}

.ai-mode-heading small {
  color: var(--muted);
  font-size: 11px;
}

.ai-product-mode,
.ai-generation-modes,
.ai-gallery-toolbar {
  display: flex;
  gap: 8px;
}

.ai-product-mode button,
.ai-gallery-toolbar button {
  min-height: 42px;
  padding: 5px 15px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
  transition: 160ms ease;
}

.ai-product-mode {
  position: relative;
  z-index: 1;
  width: fit-content;
  padding: 4px;
  border: 1px solid #dce7e9;
  border-radius: 13px;
  background: rgba(237, 244, 245, 0.90);
  box-shadow: inset 0 1px 2px rgba(23, 54, 60, 0.06);
}

.ai-product-mode button span,
.ai-product-mode button small {
  display: block;
}

.ai-product-mode button small {
  margin-top: 1px;
  color: #8a999f;
  font-size: 9px;
  font-weight: 600;
}

.ai-product-mode button.active,
.ai-gallery-toolbar button.active {
  color: #0d756f;
  background: #ffffff;
  box-shadow: 0 5px 15px rgba(20, 92, 91, 0.13), inset 0 0 0 1px rgba(23, 166, 153, 0.20);
}

.ai-product-mode button.active small {
  color: #4d7e7a;
}

.ai-generation-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.ai-generation-modes button {
  --mode-rgb: 23, 166, 153;
  --mode-color: #17a699;
  position: relative;
  display: flex;
  min-height: 86px;
  align-items: center;
  gap: 13px;
  overflow: hidden;
  padding: 14px 16px;
  border: 1px solid rgba(var(--mode-rgb), 0.20);
  border-radius: 15px;
  color: var(--muted);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(var(--mode-rgb), 0.06));
  text-align: left;
  box-shadow: 0 8px 20px rgba(21, 57, 65, 0.06);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ai-generation-modes button.manual {
  --mode-rgb: 124, 92, 255;
  --mode-color: #7056db;
}

.ai-generation-modes button.multi {
  --mode-rgb: 67, 107, 232;
  --mode-color: #436be8;
}

.ai-generation-modes button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--mode-color);
  opacity: 0.30;
}

.ai-generation-modes button::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 13px;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(var(--mode-rgb), 0.28);
  border-radius: 50%;
  background: #ffffff;
}

.ai-generation-modes button:hover {
  border-color: rgba(var(--mode-rgb), 0.46);
  box-shadow: 0 13px 28px rgba(var(--mode-rgb), 0.14);
  transform: translateY(-2px);
}

.ai-generation-modes button i {
  display: grid;
  flex: 0 0 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(var(--mode-rgb), 0.22);
  border-radius: 13px;
  color: var(--mode-color);
  background: rgba(var(--mode-rgb), 0.10);
  font-size: 20px;
  font-style: normal;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.ai-generation-modes strong,
.ai-generation-modes span,
.ai-generation-modes small {
  display: block;
}

.ai-generation-modes strong {
  color: var(--ink);
  font-size: 14px;
}

.ai-generation-modes small {
  margin-top: 4px;
  color: #71838a;
  font-size: 11px;
  line-height: 1.4;
}

.ai-generation-modes button.active {
  border-color: rgba(var(--mode-rgb), 0.72);
  background: linear-gradient(145deg, #ffffff, rgba(var(--mode-rgb), 0.13));
  box-shadow: 0 15px 32px rgba(var(--mode-rgb), 0.18), inset 0 0 0 1px rgba(var(--mode-rgb), 0.10);
  transform: translateY(-2px);
}

.ai-generation-modes button.active::before {
  opacity: 1;
}

.ai-generation-modes button.active::after {
  border-color: var(--mode-color);
  background: var(--mode-color);
  box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 2px rgba(var(--mode-rgb), 0.12);
}

.ai-manual-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.75fr);
  gap: 12px;
  align-items: end;
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(112, 86, 219, 0.20);
  border-radius: 13px;
  background: rgba(112, 86, 219, 0.055);
}

.ai-manual-controls[hidden] {
  display: none;
}

.ai-manual-controls label,
.ai-manual-controls > div {
  display: grid;
  gap: 5px;
  color: #526970;
  font-size: 11px;
  font-weight: 750;
}

.ai-manual-controls input {
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid #d9d8ea;
  border-radius: 9px;
  background: #fff;
}

.ai-manual-controls > div strong {
  color: var(--ink);
  font-size: 13px;
}

.ai-manual-controls > div small,
.ai-manual-controls p {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.ai-manual-controls p {
  grid-column: 1 / -1;
  margin: 0;
}

.ai-sku-strip {
  display: none;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #e7d6ae;
  border-radius: 14px;
  color: var(--muted);
  font-size: 12px;
  background: linear-gradient(145deg, rgba(255, 253, 248, 0.98), rgba(250, 246, 235, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ai-sku-strip.visible {
  display: block;
}

.ai-sku-strip-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.ai-sku-strip-heading > div {
  display: grid;
  gap: 4px;
}

.ai-sku-strip-heading strong {
  color: var(--ink);
  font-size: 14px;
}

.ai-sku-strip-heading small {
  color: var(--muted);
  line-height: 1.55;
}

.ai-sku-heading-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.ai-sku-heading-actions > span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
}

.ai-sku-heading-actions > span.ready {
  color: #7a5514;
  background: #f5e3b4;
}

.ai-sku-heading-actions > span.pending {
  color: #9a5c1f;
  background: #fff0db;
}

.ai-sku-heading-actions button {
  min-height: 30px;
  border: 1px solid #d5b660;
  border-radius: 8px;
  padding: 0 10px;
  color: #6d4a0c;
  background: #fffaf0;
  font-size: 10px;
  font-weight: 800;
}

.ai-sku-heading-actions button:hover { border-color: #b98217; background: #f8e6b2; }

.ai-sku-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 10px;
  max-height: 360px;
  padding: 2px;
  overflow: auto;
}

.ai-sku-card-grid.detailed {
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  max-height: 680px;
  gap: 10px;
  padding: 3px 5px 8px 3px;
}

@media (max-width: 1240px) {
  .ai-sku-card-grid.detailed {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
  }
}

.ai-sku-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e1e4e5;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ai-sku-card:hover {
  transform: translateY(-1px);
  border-color: #d2b66c;
  box-shadow: 0 9px 22px rgba(85, 67, 30, 0.10);
}

.ai-sku-card.active {
  border-color: #c49129;
  box-shadow: 0 0 0 2px rgba(196, 145, 41, 0.13), 0 10px 24px rgba(85, 67, 30, 0.11);
  background: #fffaf0;
}

.ai-sku-card-select {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px;
  border: 0;
  color: var(--ink);
  text-align: left;
  background: transparent;
}

.ai-sku-card-select:active {
  transform: scale(0.985);
}

.ai-sku-card-media {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1px solid #e3e6e7;
  border-radius: 10px;
  color: #9a7a36;
  background: #f5f3ed;
}

.ai-sku-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-sku-card-media i {
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.ai-sku-card-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.ai-sku-card-copy strong,
.ai-sku-card-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-sku-card-copy strong {
  font-size: 12px;
}

.ai-sku-card-copy small {
  color: var(--muted);
  font-size: 10px;
}

.ai-sku-card-check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #d8dcdd;
  border-radius: 50%;
  color: #8a9294;
  font-weight: 900;
  background: #fff;
}

.ai-sku-card.active .ai-sku-card-check {
  color: #fff;
  border-color: #b57d18;
  background: linear-gradient(145deg, #d9aa42, #ae7411);
}

.ai-sku-card > a,
.ai-sku-no-image {
  display: block;
  padding: 6px 10px 8px 71px;
  border-top: 1px solid #edf0f0;
  color: #8a681e;
  font-size: 10px;
  text-decoration: none;
}

.ai-sku-card > a:hover {
  color: #60420b;
  text-decoration: underline;
}

.ai-sku-no-image {
  color: #a07b63;
}

.ai-sku-card-detailed {
  border-radius: 16px;
  background: #fff;
}

.ai-sku-card-visual {
  position: relative;
  padding: 10px;
  border-bottom: 1px solid #e7ebeb;
  background: linear-gradient(145deg, #f8faf9, #f3f1ea);
}

.ai-sku-card-visual > .ai-sku-card-media,
.ai-sku-card-image-link .ai-sku-card-media {
  width: 100%;
  height: 184px;
  border-color: #dfe4e4;
  border-radius: 12px;
  background: #fff;
}

.ai-sku-card-visual .ai-sku-card-media img { object-fit: contain; }

.ai-sku-card-image-link {
  display: block;
  color: #78601f;
  text-decoration: none;
}

.ai-sku-card-image-link small {
  display: block;
  min-height: 26px;
  margin-top: 7px;
  padding: 5px 8px;
  border: 1px solid #e0e4e3;
  border-radius: 7px;
  background: rgba(255,255,255,.78);
  font-size: 9px;
  font-weight: 750;
  text-align: center;
}

.ai-sku-card-image-link:hover small { border-color: #c8a347; color: #5d410b; background: #fff8e5; }

.ai-sku-card-toggle {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  gap: 6px;
  border: 1px solid #cfd7d7;
  border-radius: 999px;
  padding: 4px 9px 4px 5px;
  color: #5f6f71;
  background: rgba(255,255,255,.94);
  box-shadow: 0 5px 15px rgba(32,48,49,.12);
  font-size: 9px;
  font-weight: 800;
}

.ai-sku-card-toggle i {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: #657375;
  background: #eef2f2;
  font-style: normal;
  font-size: 11px;
}

.ai-sku-card-toggle.active { border-color: #bd8a1f; color: #684608; background: #fff5d5; }
.ai-sku-card-toggle.active i { color: #fff; background: linear-gradient(145deg, #d9aa42, #ae7411); }

.ai-sku-card-content { display: grid; gap: 9px; padding: 10px; }

.ai-sku-original-spec {
  display: grid;
  gap: 3px;
  border-radius: 8px;
  padding: 7px 9px;
  background: #f4f6f5;
}

.ai-sku-original-spec span { color: #849092; font-size: 9px; }
.ai-sku-original-spec strong { overflow-wrap: anywhere; color: #344548; font-size: 11px; line-height: 1.45; }

.ai-sku-data-block {
  display: grid;
  gap: 8px;
  border: 1px solid #e0e6e6;
  border-radius: 11px;
  padding: 9px;
  background: #fff;
}

.ai-sku-data-block.recognition { border-color: #d8e8e5; background: #f6fbfa; }
.ai-sku-data-block.source { border-color: #eadfbe; background: #fffdf7; }
.ai-sku-data-block > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ai-sku-data-block > header strong { color: #177f76; font-size: 10px; }
.ai-sku-data-block.source > header strong { color: #8a6414; }
.ai-sku-data-block > header span { color: #98a2a3; font-size: 8px; }

.ai-sku-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.ai-sku-data-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ai-sku-data-grid > div { display: grid; min-width: 0; gap: 3px; border: 1px solid #e5e9e8; border-radius: 8px; padding: 7px 8px; background: rgba(255,255,255,.88); }
.ai-sku-data-grid > div > span { color: #849092; font-size: 8px; }
.ai-sku-data-grid > div > strong { overflow: hidden; color: #344548; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ai-sku-color-value { display: flex; align-items: center; gap: 6px; }
.ai-sku-color-value i { width: 12px; height: 12px; flex: 0 0 12px; border: 1px solid rgba(26,36,38,.18); border-radius: 4px; background: var(--sku-color); }
.ai-sku-property-row { display: flex; flex-wrap: wrap; gap: 5px; }
.ai-sku-property-row span { max-width: 100%; overflow: hidden; border-radius: 999px; padding: 4px 7px; color: #647476; background: #e9f2f0; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.ai-sku-chip {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #ffffff;
}

.ai-sku-chip.active {
  color: var(--accent);
  border-color: var(--accent);
  background: #eef8f8;
}

.ai-gallery-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 9px 11px;
  border: 1px solid #dce8ea;
  border-radius: 10px;
  color: #477179;
  background: linear-gradient(90deg, #f0faf9, #f8f7ff);
  font-size: 11px;
}

.ai-gallery-guide span {
  font-weight: 800;
}

.ai-gallery-guide small {
  color: var(--muted);
  font-size: 10px;
}

.ai-source-gallery-groups {
  display: grid;
  gap: 14px;
}

.ai-gallery-group {
  min-width: 0;
}

.ai-gallery-group + .ai-gallery-group {
  padding-top: 14px;
  border-top: 1px solid #edf1f2;
}

.ai-gallery-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.ai-gallery-group > header > div {
  display: flex;
  align-items: center;
}

.ai-gallery-group > header strong {
  font-size: 12px;
}

.ai-gallery-group > header span,
.ai-gallery-group > header small {
  color: var(--muted);
  font-size: 10px;
}

.ai-gallery-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.ai-gallery-thumbnails .ai-image-option,
.ai-gallery-collapse {
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
}

.ai-gallery-thumbnails .ai-image-option {
  border-radius: 11px;
  box-shadow: 0 4px 12px rgba(24, 55, 61, 0.08);
}

.ai-source-gallery-groups .ai-image-option::after {
  display: none;
}

.ai-source-gallery-groups .ai-primary-reference {
  max-width: calc(100% - 12px);
  overflow: hidden;
  opacity: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(-3px);
  transition: 150ms ease;
}

.ai-source-gallery-groups .ai-image-option:hover .ai-primary-reference,
.ai-source-gallery-groups .ai-primary-reference.active,
.ai-source-gallery-groups .ai-primary-reference:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.ai-gallery-collapse {
  display: grid;
  place-content: center;
  gap: 4px;
  padding: 8px;
  border: 1px dashed #b9cbd0;
  border-radius: 11px;
  color: #557078;
  background: #f7fafb;
  text-align: center;
  transition: 150ms ease;
}

.ai-gallery-collapse:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: #eef9f8;
}

.ai-gallery-collapse strong,
.ai-gallery-collapse span {
  display: block;
}

.ai-gallery-collapse strong {
  font-size: 11px;
}

.ai-gallery-collapse span {
  color: var(--muted);
  font-size: 9px;
}

.ai-gallery-group-empty {
  display: grid;
  min-height: 82px;
  min-width: 180px;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 11px;
  color: var(--muted);
  background: #f8fafb;
  font-size: 11px;
}

.ai-image-option::after {
  content: attr(data-image-kind);
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 3px 6px;
  border-radius: 6px;
  color: #ffffff;
  background: rgba(15, 27, 32, 0.72);
  font-size: 10px;
}

.ai-reference-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.ai-reference-group {
  min-height: 126px;
  padding: 14px;
  border: 1px dashed #b8c8cf;
  border-radius: 12px;
  background: linear-gradient(145deg, #fafcfc, #f5f8fa);
  transition: 150ms ease;
}

.ai-reference-group.drag-over {
  border-color: var(--accent-2);
  background: #eaf8f5;
  box-shadow: inset 0 0 0 2px rgba(42, 157, 143, 0.10);
}

.ai-reference-group header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.ai-reference-group header > div {
  display: grid;
  gap: 2px;
}

.ai-reference-group header small {
  color: #8a999f;
  font-size: 9px;
  font-weight: 500;
}

.ai-reference-images {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 76px));
  gap: 8px;
}

.ai-reference-images img,
.ai-reference-empty {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: contain;
  background: #ffffff;
}

.ai-reference-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.ai-supplemental-labels {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #edf1f2;
}

.ai-supplemental-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ai-supplemental-heading strong {
  font-size: 12px;
}

.ai-supplemental-heading span {
  color: var(--muted);
  font-size: 10px;
}

.ai-supplemental-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ai-supplemental-grid label {
  display: grid;
  gap: 6px;
  color: #526970;
  font-size: 11px;
  font-weight: 700;
}

.ai-supplemental-grid input {
  width: 100%;
  min-height: 40px;
  border: 1px solid #dce5e8;
  border-radius: 10px;
  padding: 0 11px;
  color: var(--ink);
  background: #f8fafb;
  outline: 0;
  transition: 150ms ease;
}

.ai-supplemental-grid input:focus {
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(23, 166, 153, 0.10);
}

.ai-product-info-body {
  display: grid;
  gap: 18px;
  min-width: 0;
  width: 100%;
}

.ai-source-product-panel {
  border-top: 3px solid #1aa99d;
  background:
    radial-gradient(circle at 100% 0, rgba(23, 166, 153, 0.06), transparent 28%),
    #ffffff;
}

.ai-source-product-panel .ai-product-info-title {
  padding-bottom: 12px;
  border-bottom: 1px solid #edf1f2;
}

.ai-source-product-panel .ai-product-info-title > strong {
  max-width: 82%;
  font-size: 15px;
  line-height: 1.55;
}

.ai-source-product-panel .ai-product-meta-grid > div {
  border-color: #e7edef;
  background: linear-gradient(145deg, #fbfcfd, #f4f8f8);
}

.ai-source-product-panel .ai-product-info-section {
  padding-top: 2px;
}

.ai-source-product-panel .ai-product-info-section > header strong {
  font-size: 12px;
}

.ai-source-product-panel .ai-product-attribute-grid > div {
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: #f4f7f8;
}

.ai-product-info-panel,
.ai-product-info-section,
.ai-sku-table-wrap {
  min-width: 0;
  max-width: 100%;
}

.ai-product-info-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.ai-product-info-title > strong {
  overflow-wrap: anywhere;
  font-size: 16px;
}

.ai-product-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ai-product-meta-grid > div,
.ai-product-attribute-grid > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #e7edef;
  border-radius: 8px;
  background: #f7fafb;
}

.ai-product-meta-grid span,
.ai-product-meta-grid strong,
.ai-product-attribute-grid span,
.ai-product-attribute-grid strong {
  display: block;
}

.ai-product-meta-grid span,
.ai-product-attribute-grid span {
  color: var(--muted);
  font-size: 11px;
}

.ai-product-meta-grid strong,
.ai-product-attribute-grid strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.45;
}

.ai-product-info-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.ai-product-info-section > header span {
  color: var(--muted);
  font-size: 12px;
}

.ai-product-attribute-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.ai-sku-table-wrap {
  width: 100%;
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.ai-sku-table {
  min-width: 620px;
}

.ai-sku-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef3f5;
}

.ai-sku-table th:nth-child(2),
.ai-sku-table th:nth-child(3),
.ai-sku-table td:nth-child(2),
.ai-sku-table td:nth-child(3) {
  width: 150px;
}

.ai-product-info-empty {
  grid-column: 1 / -1;
  min-height: 72px;
  display: grid;
  place-items: center;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #f7fafb;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 1180px) {
  .ai-engine-top,
  .ai-source-workbench,
  .ai-provider-switcher {
    grid-template-columns: 1fr;
  }

  .ai-main-relist-product {
    grid-template-columns: 174px minmax(0, 1fr);
  }

  .ai-main-relist-preview img {
    width: 82px;
    height: 82px;
  }

  .ai-main-relist-preview.zoomable {
    width: 82px;
    height: 82px;
  }

  .ai-main-relist-visuals {
    grid-template-columns: repeat(2, 82px);
  }

  .ai-main-relist-preview.pending {
    width: 82px;
    height: 82px;
  }

  .ai-main-relist-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .ai-gallery-panel .ai-image-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .ai-product-meta-grid,
  .ai-product-attribute-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .ai-main-relist-heading {
    display: grid;
  }

  .ai-main-relist-price {
    width: max-content;
  }

  .ai-main-relist-product {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .ai-main-relist-visuals {
    grid-template-columns: repeat(2, 92px);
  }

  .ai-main-relist-preview img {
    width: 92px;
    height: 92px;
  }

  .ai-main-relist-preview.pending {
    width: 92px;
    height: 92px;
  }

  .selection-main-relist-confirm-preview {
    grid-template-columns: 1fr;
  }

  .selection-main-relist-confirm-zoom,
  .selection-main-relist-confirm-zoom img {
    width: min(100%, 240px);
    height: auto;
    aspect-ratio: 3 / 4;
  }
}

.score-model {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6faf9;
}

.score-model span,
.score-model strong {
  display: block;
}

.score-model span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.score-model strong {
  margin-top: 5px;
  font-size: 13px;
}

.selection-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.selection-board-primary {
  margin-bottom: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #f7f8ff 0, #eef1ff 150px, #f8fafc 150px);
}

.selection-board-header {
  margin: -20px -20px 0;
  padding: 18px 20px 16px;
  background: #fff;
  border-bottom: 1px solid #e6e9f5;
}

.selection-auto-panel {
  margin: 14px 0;
}

.selection-bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 -20px;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
}

.selection-tool-button {
  position: relative;
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 13px rgba(15, 23, 42, 0.12), inset 0 1px rgba(255, 255, 255, 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease, border-color 160ms ease;
  overflow: hidden;
}

.selection-tool-button::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -42%;
  width: 28%;
  content: "";
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-18deg);
  transition: left 420ms ease;
}

.selection-tool-button:not(:disabled):hover {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 9px 18px rgba(15, 23, 42, 0.2), inset 0 1px rgba(255, 255, 255, 0.25);
  filter: saturate(1.08) brightness(1.04);
  transform: translateY(-2px);
}

.selection-tool-button:not(:disabled):hover::before {
  left: 116%;
}

.selection-tool-button:not(:disabled):active {
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.22), inset 0 2px 5px rgba(15, 23, 42, 0.2);
  filter: saturate(0.96) brightness(0.96);
  transform: translateY(1px) scale(0.985);
}

.selection-tool-button:focus-visible {
  outline: 3px solid rgba(221, 178, 74, 0.34);
  outline-offset: 2px;
}

.selection-tool-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
}

.selection-tool-button.select {
  border-color: #d5ae4b;
  color: #30250c;
  background: linear-gradient(180deg, #fff3c5, #e7bd58);
  box-shadow: 0 8px 18px rgba(177, 125, 20, .16), inset 0 1px 0 rgba(255,255,255,.7);
}
.selection-tool-button.publish { background: linear-gradient(135deg, #82c6bd, #70b3aa); border-color: #79b9b0; }
.selection-tool-button.danger { background: linear-gradient(135deg, #e1afb5, #d99ca4); border-color: #d59ba3; }
.selection-tool-button.clean { background: linear-gradient(135deg, #c9912b, #b97e1e); border-color: #b98225; }
.selection-tool-button.profit { background: linear-gradient(135deg, #3e708e, #568aa4); border-color: #4b7c98; }
.selection-tool-button.reset { background: linear-gradient(180deg, #fff, #f7f3eb); color: #5d6470; border-color: #d8d1c3; box-shadow: 0 4px 10px rgba(70, 55, 28, 0.08), inset 0 1px #fff; }
.selection-tool-button.reset:not(:disabled):hover { border-color: #bda45f; }

.selection-toolbar-search-group {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-left: auto;
}

.selection-bulk-toolbar .selection-toolbar-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 320px;
  width: min(320px, 26vw);
  min-width: 240px;
  height: 40px;
  overflow: hidden;
  border: 1px solid #d7deea;
  border-radius: 10px;
  background: #fbfcfe;
  color: #64748b;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.selection-bulk-toolbar .selection-toolbar-search:focus-within {
  border-color: #8b7cf6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(109, 94, 252, 0.11);
}

.selection-toolbar-search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 2px solid #64748b;
  border-radius: 50%;
  transform: translateY(-58%);
  pointer-events: none;
}

.selection-toolbar-search-icon::after {
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 6px;
  height: 2px;
  border-radius: 999px;
  background: #64748b;
  content: "";
  transform: rotate(45deg);
  transform-origin: left center;
}

.selection-bulk-toolbar .selection-toolbar-search > input#selectionSearchInput {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  padding: 0 36px 0 38px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #1e293b;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 38px;
  appearance: none;
}

.selection-bulk-toolbar .selection-toolbar-search > input#selectionSearchInput::placeholder {
  color: #7c8799;
  font-weight: 600;
  opacity: 1;
}

.selection-selected-count {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 40px;
  color: #5b4cf0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.resale-selection-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #f1d4a8;
  border-radius: 12px;
  background: #fff8ee;
  color: #7a4b12;
}

.resale-selection-hint strong {
  font-size: 13px;
}

.resale-selection-hint span {
  flex: 1 1 220px;
  font-size: 12px;
  line-height: 1.5;
  color: #8a5a22;
}

.resale-selection-hint .primary-button {
  margin-left: auto;
}

.selection-library-list {
  margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.selection-status-tabs,
.selection-channel-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.selection-status-tabs {
  justify-content: center;
  margin: 0 -20px;
  padding: 12px 20px 8px;
}

.selection-channel-filters {
  justify-content: center;
  margin-top: 0;
  padding: 0 20px 4px;
}

.selection-status-tabs button,
.selection-channel-filters button {
  position: relative;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  border-radius: 999px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.selection-status-tabs button:hover,
.selection-channel-filters button:hover {
  border-color: #c5a85e;
  color: #6d5115;
  background: #fffdf8;
  box-shadow: 0 6px 16px rgba(116, 85, 19, 0.1);
  transform: translateY(-1px);
}

.selection-status-tabs button:active,
.selection-channel-filters button:active {
  box-shadow: inset 0 2px 5px rgba(72, 52, 13, 0.16);
  transform: translateY(1px) scale(0.985);
}

.selection-status-tabs button:focus-visible,
.selection-channel-filters button:focus-visible {
  outline: 3px solid rgba(221, 178, 74, 0.28);
  outline-offset: 2px;
}

.selection-status-tabs button {
  min-width: 130px;
  min-height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  color: #475569;
  box-shadow: 0 6px 18px rgba(78, 70, 180, 0.08);
}

.selection-status-tabs button.active,
.selection-channel-filters button.active {
  border-color: #d5ae4b;
  background: linear-gradient(180deg, #fff3c5, #e7bd58);
  color: #30250c;
  box-shadow: 0 8px 18px rgba(177, 125, 20, .16), inset 0 1px 0 rgba(255,255,255,.7);
}

.selection-status-tabs button.active:hover,
.selection-channel-filters button.active:hover {
  border-color: #bd8b20;
  background: linear-gradient(135deg, #f4dd91, #d3a339);
  color: #1f1708;
}

.selection-status-tabs strong {
  margin-left: 4px;
}

.selection-lib-card {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.selection-lib-card.is-selected {
  border-color: #7666ef;
  box-shadow: 0 0 0 2px rgba(109, 94, 252, 0.16), 0 12px 28px rgba(79, 70, 229, 0.12);
}

.selection-card-selector {
  position: static;
  align-self: start;
  transform: translateY(-2px);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #d5ddea;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.12);
}

.selection-card-selector input {
  display: block;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #6d5efc;
}

.selection-lib-card .selection-lib-head {
  padding-left: 0;
}

.selection-lib-head {
  display: grid;
  gap: 6px;
}

.selection-lib-title-wrap {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.selection-lib-title {
  min-width: 0;
  margin: 0;
  color: #1e293b;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.selection-lib-title:hover {
  color: #5b4cf0;
  text-decoration: underline;
}

.selection-translate-btn {
  border: 0;
  border-radius: 8px;
  background: #3b82f6;
  color: #fff;
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.selection-delete-btn {
  min-width: 42px;
  min-height: 28px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff;
  color: #dc2626;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.selection-delete-btn:hover {
  border-color: #ef4444;
  background: #fef2f2;
  color: #b91c1c;
}

.selection-delete-btn:focus-visible {
  outline: 3px solid rgba(239, 68, 68, 0.2);
  outline-offset: 2px;
}

.selection-lib-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  white-space: nowrap;
}

.selection-lib-sub {
  display: flex;
  flex-wrap: wrap;
  margin-left: 34px;
  gap: 10px 14px;
  color: #64748b;
  font-size: 12px;
}

.selection-lib-score {
  color: #6d5efc;
  font-weight: 800;
}

.selection-lib-title-secondary {
  margin: 0 0 0 34px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.selection-lib-title-secondary.is-original {
  color: #64748b;
  font-weight: 600;
}

.selection-lib-title-secondary.is-translated {
  color: #0f766e;
}

.selection-lib-body {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
}

.selection-lib-media img,
.selection-lib-media-empty,
.resale-library-media-status {
  width: 150px;
  height: 150px;
  border-radius: 10px;
  object-fit: cover;
  background: #f1f5f9;
}

.selection-card-status {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 4px 9px;
  background: #eef2ff;
  color: #5b4cf0;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.selection-compliance-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
.selection-compliance-badge.blocked { color: #b91c1c; background: #fee2e2; }
.selection-compliance-badge.review { color: #9a6700; background: #fef3c7; }

.selection-lib-card[data-library-status="blacklist"] .selection-card-status { background: #fee2e2; color: #b91c1c; }
.selection-lib-card[data-library-status="no-profit"] .selection-card-status { background: #e2e8f0; color: #475569; }
.selection-lib-card[data-library-status="pending-listing"] .selection-card-status { background: #fef3c7; color: #b45309; }
.selection-lib-card[data-library-status="listed"] .selection-card-status { background: #dcfce7; color: #15803d; }

.selection-lib-media-empty {
  display: grid;
  place-items: center;
  color: #94a3b8;
  font-size: 12px;
}

.resale-library-media-status {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 14px;
  border: 1px solid #d9d2fb;
  color: #5844a4;
  background: linear-gradient(145deg, #f8f5ff, #eeebff);
  text-align: center;
}

.resale-library-media-status span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #c9bdf8;
  border-radius: 11px;
  color: #6d54d8;
  background: #fff;
  font-size: 11px;
  font-weight: 900;
}

.resale-library-media-status strong {
  font-size: 12px;
}

.resale-library-media-status small {
  color: #8174b2;
  font-size: 10px;
  line-height: 1.45;
}

.selection-lib-media-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

.selection-lib-media-actions button {
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  min-height: 30px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.selection-lib-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.selection-lib-metrics div {
  padding: 8px 9px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}

.selection-lib-metrics span {
  display: block;
  color: #64748b;
  font-size: 11px;
}

.selection-lib-metrics strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}

.selection-lib-profit {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
  padding: 10px;
  border-radius: 10px;
  background: #f4f7fb;
}

.selection-lib-profit label {
  display: grid;
  gap: 4px;
  min-width: 0;
  align-content: start;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.selection-profit-label {
  display: flex !important;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 16px;
  overflow: hidden;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 16px;
  text-align: left;
  white-space: nowrap;
}

.selection-profit-label > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selection-profit-label small {
  flex: 0 0 auto;
  padding: 0 5px;
  border-radius: 999px;
  background: #e6f2f6;
  color: #39778a;
  font-size: 9px;
  font-weight: 800;
  line-height: 16px;
}

.selection-lib-profit input,
.selection-lib-profit select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  border: 1px solid #d5dee8;
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.selection-lib-profit input:focus,
.selection-lib-profit select:focus {
  outline: none;
  border-color: #8b7cf6;
  box-shadow: 0 0 0 3px rgba(109, 94, 252, 0.12);
}

.selection-logistics-field {
  grid-column: span 2;
}

.selection-logistics-field select {
  border-color: #c4b5fd;
  background: #f5f3ff;
  color: #5b21b6;
  font-weight: 800;
  text-overflow: ellipsis;
}

.selection-logistics-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  min-width: 0;
  min-height: 16px !important;
  padding: 0 5px;
  border: 0;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb !important;
  font-size: 10px !important;
  font-weight: 900;
  line-height: 16px;
  white-space: nowrap;
}

.selection-lib-profit strong {
  display: flex;
  align-items: center;
  min-height: 36px;
  color: #0f172a;
  font-size: 13px;
}

.selection-lib-profit .resale-profit-output {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 0;
  text-align: left;
}

.selection-profit-margin {
  grid-column: span 2;
}

.selection-margin-out.is-low,
.selection-lib-profit strong.is-low {
  color: #b45309;
  background: #fef3c7;
  border-radius: 6px;
  padding: 0 8px;
}

.selection-lib-footer {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) repeat(5, auto);
  gap: 8px;
  align-items: center;
}

.selection-main-relist-send {
  border-color: #d8b94c;
  color: #75540a;
  background: #fff8dc;
}

.selection-lib-footer input {
  min-height: 36px;
  border: 1px solid #d5dee8;
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
}

.selection-lib-source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.selection-lib-source span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.selection-lib-source input {
  min-height: 34px;
  border: 1px solid #d5dee8;
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
}

.selection-lib-source a {
  color: #5b4cf0;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.selection-lib-note {
  margin: 0;
  color: #94a3b8;
  font-size: 11px;
}

.selection-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.selection-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.selection-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}

.selection-card p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.selection-score {
  display: grid;
  place-items: center;
  width: 54px;
  aspect-ratio: 1;
  border-radius: 8px;
  background: #e8f5ee;
  color: var(--ok);
  font-size: 20px;
  font-weight: 900;
  flex: none;
}

.selection-dims {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.selection-dims span {
  display: block;
  padding: 8px;
  border-radius: 8px;
  background: #f0f5f6;
  color: var(--muted);
  font-size: 12px;
}

.selection-dims strong {
  display: block;
  color: var(--ink);
  margin-top: 3px;
}

.selection-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.selection-action-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.selection-meta {
  color: #486168;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .selection-lib-body,
  .selection-lib-metrics,
  .selection-lib-profit,
  .selection-lib-footer,
  .selection-lib-source {
    grid-template-columns: 1fr 1fr;
  }

  .selection-lib-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1500px) {
  .selection-library-list {
    grid-template-columns: 1fr;
  }
}

.selection-batch-dialog,
.selection-profit-dialog {
  width: min(1360px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100vh - 44px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  color: #0f172a;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.32);
}

.selection-profit-dialog {
  width: min(760px, calc(100vw - 36px));
}

.selection-batch-dialog {
  height: calc(100vh - 36px);
  overflow: hidden;
}

.selection-batch-dialog::backdrop,
.selection-profit-dialog::backdrop {
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(2px);
}

.selection-batch-dialog form,
.selection-profit-dialog form {
  display: grid;
  max-height: calc(100vh - 44px);
  overflow: hidden;
}

.selection-batch-dialog form {
  height: 100%;
  grid-template-rows: auto auto minmax(160px, 1fr) auto auto auto;
}

.selection-batch-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 20px 11px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}

.selection-batch-dialog-header h2,
.selection-batch-dialog-header p {
  margin: 0;
}

.selection-batch-dialog-header .eyebrow { display: none; }
.selection-batch-dialog-header h2 { font-size: 20px; }
.selection-batch-dialog-header p { margin-top: 3px; color: #64748b; font-size: 11px; }
.selection-batch-dialog-header-actions { position: relative; display: flex; align-items: center; gap: 8px; }

.selection-batch-config-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 10px 16px;
  max-height: 40vh;
  overflow-y: auto;
  padding: 9px 20px;
  background: #fbfcff;
  border-bottom: 1px solid #e5e7eb;
  overscroll-behavior: contain;
}

.selection-batch-config-grid section {
  display: grid;
  align-content: start;
  gap: 7px;
}

.selection-batch-config-grid header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid #dfe5ee;
}

.selection-batch-config-grid header strong { font-size: 13px; }
.selection-batch-config-grid header span { color: #94a3b8; font-size: 11px; }

.selection-batch-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.selection-batch-fields label,
.selection-profit-fields label {
  display: grid;
  gap: 3px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.selection-batch-fields input,
.selection-batch-fields select,
.selection-profit-fields input,
.selection-profit-fields select {
  width: 100%;
  box-sizing: border-box;
  height: 34px;
  min-height: 34px;
  border: 1px solid #d7deea;
  border-radius: 8px;
  padding: 0 9px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
}

.selection-batch-image-edit-field small {
  display: none;
  overflow: hidden;
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-batch-image-edit-field.wide {
  grid-column: 1 / -1;
}

.selection-warehouse-field > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.selection-batch-action-field > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.selection-batch-action-field > div button,
.selection-batch-apply-price {
  min-height: 34px;
  border: 1px solid #60a5fa;
  border-radius: 8px;
  padding: 0 11px;
  background: #3b82f6;
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.selection-batch-apply-price { align-self: end; }

.selection-warehouse-field > div button {
  min-width: 54px;
  border: 1px solid #56c4bd;
  border-radius: 8px;
  background: #e9fffc;
  color: #087b74;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.selection-warehouse-field > div button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.selection-warehouse-field small {
  overflow: hidden;
  color: #0f8c83;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-inline-switch {
  display: flex !important;
  align-items: center;
  align-self: end;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #d7deea;
  border-radius: 8px;
  background: #fff;
}

.selection-inline-switch input { width: 16px; min-height: auto; accent-color: #6d5efc; }
.selection-inline-switch span { color: #334155; }

.selection-batch-advanced {
  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid #dfe5ee;
  border-radius: 9px;
  background: #fff;
}

.selection-batch-advanced summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
  padding: 0 11px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.selection-batch-advanced summary::-webkit-details-marker { display: none; }
.selection-batch-advanced summary > span { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.selection-batch-advanced summary strong { color: #334155; font-size: 11px; }
.selection-batch-advanced summary small { overflow: hidden; color: #94a3b8; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.selection-batch-advanced summary em { color: #9a6b08; font-size: 10px; font-style: normal; font-weight: 900; }
.selection-batch-advanced summary em::after { content: " ︾"; }
.selection-batch-advanced[open] summary { border-bottom: 1px solid #e5eaf1; background: #fffcf4; }
.selection-batch-advanced[open] summary em::after { content: " ︽"; }
.selection-batch-fields.advanced {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 9px 11px 11px;
}
.selection-batch-fields.advanced .wide { grid-column: 1 / -1; }

.selection-batch-table-wrap {
  min-height: 160px;
  overflow: auto;
  padding: 0 20px;
  background: #fff;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.selection-batch-compliance { position: relative; color: #49666a; }
.selection-batch-compliance > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  box-sizing: border-box;
  padding: 0 9px;
  border: 1px solid #d7e9e7;
  border-radius: 999px;
  background: #f5fbfa;
  color: #176f6d;
  cursor: pointer;
  list-style: none;
  user-select: none;
  white-space: nowrap;
}
.selection-batch-compliance > summary::-webkit-details-marker { display: none; }
.selection-batch-compliance > summary span { font-size: 10px; font-weight: 900; }
.selection-batch-compliance > summary b { padding-left: 6px; border-left: 1px solid currentColor; color: #15803d; font-size: 9px; }
.selection-batch-compliance > summary::after { content: "▾"; color: #789493; font-size: 9px; }
.selection-batch-compliance[open] > summary::after { content: "▴"; }
.selection-batch-compliance-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 8px;
  width: min(430px, calc(100vw - 72px));
  box-sizing: border-box;
  padding: 13px 14px;
  border: 1px solid #d7e9e7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.2);
}
.selection-batch-compliance-popover > strong { color: #176f6d; font-size: 12px; }
.selection-batch-compliance-popover > p { margin: 0; color: #87999b; font-size: 10px; line-height: 1.5; }
.selection-batch-compliance-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.selection-batch-compliance-summary span { padding: 3px 7px; border-radius: 999px; background: #e6f4f1; color: #34706d; font-size: 10px; font-weight: 800; }
.selection-batch-compliance-summary span.warn { color: #9a6700; background: #fff4cf; }
.selection-batch-compliance-summary span.danger { color: #b91c1c; background: #fee2e2; }
.selection-batch-compliance-popover ul { display: grid; gap: 4px; max-height: 150px; overflow: auto; margin: 0; padding: 0 0 0 18px; }
.selection-batch-compliance li { color: #9a6700; font-size: 10px; line-height: 1.4; }
.selection-batch-compliance li strong { color: #455c61; }
.selection-batch-compliance li span { margin-left: 5px; }
.selection-batch-compliance.is-blocked > summary { border-color: #fecaca; color: #b91c1c; background: #fff2f2; }
.selection-batch-compliance.is-blocked > summary b { color: #dc2626; }
.selection-batch-compliance.is-review > summary { border-color: #f2d79a; color: #9a6700; background: #fff9e8; }
.selection-batch-compliance.is-review > summary b { color: #a16207; }
.selection-batch-compliance.is-unknown > summary { border-color: #d8e0ea; color: #64748b; background: #f8fafc; }
.selection-batch-compliance.is-unknown > summary b { color: #64748b; }

.selection-batch-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.selection-batch-table th,
.selection-batch-table td {
  padding: 8px 9px;
  border: 1px solid #e5eaf1;
  text-align: center;
  vertical-align: middle;
}

.selection-batch-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
}

.selection-batch-table th:nth-child(1) { width: 72px; }
.selection-batch-table th:nth-child(2) { width: 28%; }
.selection-batch-table th:nth-child(9) { width: 66px; }

.selection-batch-table img,
.selection-batch-image-empty {
  width: 58px;
  height: 64px;
  border-radius: 7px;
  object-fit: cover;
  background: #f1f5f9;
}

.selection-batch-main-preview {
  position: relative;
  display: block;
  width: 58px;
  height: 64px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: zoom-in;
}

.selection-batch-main-preview small {
  position: absolute;
  right: -4px;
  bottom: 3px;
  padding: 2px 4px;
  border-radius: 5px;
  color: #fff;
  background: #8a640f;
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}

.selection-batch-main-preview em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  background: rgb(20 29 31 / 56%);
  font-size: 16px;
  font-style: normal;
  opacity: 0;
  transition: opacity 140ms ease;
}

.selection-batch-main-preview:hover em,
.selection-batch-main-preview:focus-visible em {
  opacity: 1;
}

.selection-batch-main-preview:focus-visible {
  outline: 3px solid rgb(213 170 52 / 38%);
  outline-offset: 2px;
}

.selection-batch-image-empty { display: grid; place-items: center; color: #94a3b8; font-size: 10px; }
.selection-batch-table .title { text-align: left; line-height: 1.45; font-weight: 700; }
.selection-batch-table input { width: 100%; min-height: 32px; border: 1px solid #d5dde8; border-radius: 7px; padding: 0 7px; font: inherit; text-align: center; }
.selection-batch-table .source-price { color: #059669; font-weight: 900; }
.selection-batch-remove { border: 0; background: transparent; color: #ef4444; cursor: pointer; font-weight: 800; }

.watermark-page {
  display: grid;
  gap: 14px;
}

.watermark-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}

.watermark-filters,
.watermark-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.watermark-filters select,
.watermark-search {
  min-height: 38px;
  border: 1px solid #d8e0ea;
  border-radius: 9px;
  background: #fff;
}

.watermark-filters select { min-width: 150px; padding: 0 12px; color: #475569; }
.watermark-search { display: flex; align-items: center; min-width: 250px; padding: 0 11px; color: #94a3b8; }
.watermark-search input { width: 100%; border: 0; outline: 0; padding-left: 8px; background: transparent; }
.watermark-toolbar-actions button { min-height: 38px; }
.danger-button { border: 0; border-radius: 9px; padding: 0 16px; background: #ef5350; color: #fff; font-weight: 800; cursor: pointer; }
.danger-button:disabled { cursor: not-allowed; opacity: 0.45; }

.watermark-list-panel { min-height: 480px; overflow: hidden; padding: 0; }
.watermark-table-wrap { overflow: auto; }
.watermark-table { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.watermark-table th,
.watermark-table td { padding: 15px 12px; border-bottom: 1px solid #e8edf3; text-align: center; vertical-align: middle; }
.watermark-table th { background: #f7f9fc; color: #475569; font-weight: 900; }
.watermark-table th:first-child { width: 48px; }
.watermark-table th:nth-child(2) { width: 140px; }
.watermark-table th:nth-child(3) { width: 80px; }
.watermark-table th:nth-child(4) { width: 140px; }
.watermark-table th:nth-child(5) { width: 80px; }
.watermark-table th:nth-child(6) { width: 80px; }
.watermark-table th:nth-child(7) { width: 130px; }
.watermark-table th:last-child { width: 170px; }
.watermark-template-name { display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 900; color: #0f172a; white-space: nowrap; }
.watermark-default-badge,
.watermark-type-badge,
.watermark-position-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 9px; font-size: 10px; font-weight: 900; }
.watermark-default-badge { background: #dcfce7; color: #15803d; }
.watermark-type-badge { background: #e0f2fe; color: #0369a1; }
.watermark-position-badge { border: 1px solid #bfdbfe; background: #eff6ff; color: #2563eb; }
.watermark-content-preview { display: flex; align-items: center; justify-content: center; min-height: 68px; }
.watermark-content-preview img { max-width: 86px; max-height: 64px; object-fit: contain; }
.watermark-content-preview span { max-width: 190px; overflow: hidden; color: #334155; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.watermark-row-actions { display: flex; justify-content: center; gap: 6px; white-space: nowrap; }
.watermark-row-actions button { flex: 0 0 auto; border: 0; background: transparent; color: #2563eb; font-size: 10px; font-weight: 900; cursor: pointer; white-space: nowrap; }
.watermark-row-actions button.danger { color: #ef4444; }
.watermark-empty { padding: 80px 20px !important; color: #94a3b8; }
.watermark-list-footer { display: flex; justify-content: flex-end; gap: 18px; padding: 14px 18px; color: #64748b; }

.watermark-dialog { width: min(980px, calc(100vw - 36px)); max-height: calc(100vh - 38px); border: 0; border-radius: 18px; padding: 0; box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28); }
.watermark-dialog::backdrop { background: rgba(15, 23, 42, 0.62); backdrop-filter: blur(3px); }
.watermark-dialog form { display: grid; max-height: calc(100vh - 38px); overflow: auto; background: #fff; }
.watermark-editor { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; padding: 22px 26px; }
.watermark-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.watermark-fields > label { display: grid; align-content: start; gap: 6px; color: #475569; font-size: 11px; font-weight: 900; }
.watermark-fields input:not([type="checkbox"]):not([type="range"]),
.watermark-fields select { width: 100%; min-height: 38px; border: 1px solid #d8e0ea; border-radius: 9px; padding: 0 10px; background: #fff; }
.watermark-fields input[type="file"] { padding: 7px !important; font-size: 10px; }
.watermark-fields label small { color: #94a3b8; font-weight: 600; }
.watermark-range { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; gap: 8px; min-height: 38px; }
.watermark-range input { accent-color: #0d9488; }
.watermark-range output { color: #0f766e; font-weight: 900; text-align: right; }
.watermark-preview-column { display: grid; align-content: start; gap: 10px; color: #475569; }
.watermark-preview-column > small { color: #94a3b8; line-height: 1.5; }
.watermark-preview { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px; background: linear-gradient(145deg, #effcfb, #dbeafe); box-shadow: inset 0 0 0 1px #d7e4ec; }
.watermark-preview-product { position: absolute; inset: 18% 14%; display: grid; place-items: center; align-content: center; gap: 9px; border-radius: 24% 24% 18% 18%; background: linear-gradient(160deg, #0f766e, #14b8a6); color: #fff; box-shadow: 0 18px 30px rgba(15,118,110,.2); }
.watermark-preview-product span { display: grid; place-items: center; width: 58px; height: 58px; border: 2px solid rgba(255,255,255,.75); border-radius: 50%; font-size: 19px; font-weight: 900; }
.watermark-preview-layer { position: absolute; z-index: 2; display: grid; place-items: center; max-width: 70%; color: #fff; font-size: 22px; font-weight: 900; text-shadow: 0 1px 5px rgba(0,0,0,.45); white-space: nowrap; }
.watermark-preview-layer img { display: block; width: 100%; height: auto; object-fit: contain; }
.watermark-preview-layer.top-left { top: 24px; left: 24px; }
.watermark-preview-layer.top-right { top: 24px; right: 24px; }
.watermark-preview-layer.center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.watermark-preview-layer.bottom-left { bottom: 24px; left: 24px; }
.watermark-preview-layer.bottom-right { right: 24px; bottom: 24px; }
.watermark-preview-layer.tile { inset: 0; max-width: none; background-image: repeating-linear-gradient(-35deg, transparent 0 42px, rgba(255,255,255,.15) 42px 70px); white-space: normal; }
.watermark-dialog-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 26px 20px; border-top: 1px solid #e8edf3; }

@media (max-width: 860px) {
  .watermark-toolbar { align-items: stretch; flex-direction: column; }
  .watermark-filters, .watermark-toolbar-actions { flex-wrap: wrap; }
  .watermark-search { min-width: 0; flex: 1; }
  .watermark-editor { grid-template-columns: 1fr; }
  .watermark-preview { max-width: 330px; width: 100%; justify-self: center; }
}

.selection-batch-submit-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  padding: 6px 14px;
  border-top: 1px solid #e5e7eb;
  background: #fbfcff;
  position: relative;
  z-index: 2;
}

.selection-inline-switch.submit {
  align-self: auto;
  min-height: 30px;
  padding: 0 9px;
  font-size: 11px;
}

.selection-batch-submit-options > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  padding: 0;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}

.selection-batch-submit-options > div label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #d8e6e4;
  border-radius: 999px;
  background: #fff;
  white-space: nowrap;
}

.selection-batch-submit-options > div input[type="checkbox"] {
  appearance: auto;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  margin: 0;
  padding: 0;
  accent-color: #059669;
}

.selection-batch-message {
  min-height: 20px;
  padding: 2px 14px;
  background: #fff;
  color: #64748b;
  font-size: 12px;
  position: relative;
  z-index: 2;
}

.selection-batch-message.error { color: #dc2626; }
.selection-batch-message.success { color: #059669; }

.selection-batch-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
  position: relative;
  z-index: 3;
  box-shadow: 0 -8px 22px rgba(15, 23, 42, 0.08);
}

.selection-batch-dialog-footer > span { margin-right: auto; color: #64748b; font-size: 12px; font-weight: 700; }

.listing-launch-overlay {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  border: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 28, 30, 0.88);
  backdrop-filter: blur(5px);
}

.listing-launch-overlay:not([open]) { display: none; }
.listing-launch-overlay::backdrop { background: transparent; }
body.listing-launching { overflow: hidden; }

.listing-launch-card {
  position: relative;
  width: min(520px, 100%);
  padding: 30px 34px;
  border: 1px solid rgba(224, 181, 67, 0.72);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
  color: #173436;
  text-align: center;
}

.listing-launch-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid #dbe5e4;
  border-radius: 50%;
  background: #fff;
  color: #36585a;
  font-size: 20px;
  cursor: pointer;
}
.listing-launch-close[hidden] { display: none; }

.listing-launch-visual {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 14px;
}

.listing-launch-path {
  position: absolute;
  top: 49px;
  bottom: 2px;
  left: 50%;
  border-left: 2px dashed rgba(21, 128, 120, 0.32);
}

.listing-launch-mark {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  transform: translateX(-50%);
  border: 3px solid #e0b543;
  border-radius: 50%;
  background: #125c58;
  box-shadow: 0 14px 26px rgba(18, 92, 88, 0.24);
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  animation: listing-launch-lift 1.1s ease-in-out infinite alternate;
}

.listing-launch-pulse {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 54px;
  height: 15px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(224, 181, 67, 0.24);
  animation: listing-launch-pulse 1.1s ease-in-out infinite alternate;
}

.listing-launch-card > .eyebrow { color: #a57208; }
.listing-launch-card h2 { margin: 6px 0 8px; color: #142f31; font-size: 24px; letter-spacing: 0; }
.listing-launch-card > p { min-height: 42px; margin: 0 auto 18px; color: #607576; font-size: 13px; line-height: 1.65; }

.listing-launch-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 5px;
  background: #e6efee;
}

.listing-launch-progress span {
  display: block;
  width: 5%;
  height: 100%;
  border-radius: inherit;
  background: #16988f;
  transition: width 360ms ease;
}

.listing-launch-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 9px;
  color: #708485;
  font-size: 11px;
}

.listing-launch-meta strong { color: #0f766e; font-size: 18px; }

.listing-launch-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 20px 0 13px;
  padding: 0;
  list-style: none;
}

.listing-launch-steps li {
  min-width: 0;
  padding: 8px 4px;
  border: 1px solid #dbe5e4;
  border-radius: 6px;
  background: #f7faf9;
  color: #859596;
  font-size: 10px;
  font-weight: 800;
}

.listing-launch-steps li.active { border-color: #65bdb5; color: #0f766e; background: #eaf8f5; }
.listing-launch-steps li.done { border-color: #a7d6bd; color: #13724f; background: #ecf8f1; }
.listing-launch-actions {
  display: flex;
  justify-content: center;
  margin: -2px 0 13px;
}
.listing-launch-actions[hidden] { display: none; }
.listing-launch-actions .primary-button {
  min-width: 220px;
  background: #b83d34;
  border-color: #b83d34;
}
.listing-launch-card > small { display: block; color: #95a3a4; font-size: 10px; line-height: 1.5; }

.listing-launch-overlay.success .listing-launch-mark { border-color: #7bc7a4; background: #13724f; animation: none; }
.listing-launch-overlay.success .listing-launch-progress span { background: #198754; }
.listing-launch-overlay.success .listing-launch-meta strong { color: #13724f; }
.listing-launch-overlay.failed .listing-launch-mark { border-color: #efaaa1; background: #b83d34; animation: none; }
.listing-launch-overlay.failed .listing-launch-progress span { background: #d2554b; }
.listing-launch-overlay.failed .listing-launch-meta strong { color: #b83d34; }

@keyframes listing-launch-lift {
  from { transform: translate(-50%, 4px); }
  to { transform: translate(-50%, -8px); }
}

@keyframes listing-launch-pulse {
  from { transform: translateX(-50%) scale(0.78); opacity: 0.45; }
  to { transform: translateX(-50%) scale(1.18); opacity: 0.9; }
}

@media (max-width: 560px) {
  .listing-launch-overlay { padding: 14px; }
  .listing-launch-card { padding: 24px 18px; }
  .listing-launch-card h2 { font-size: 20px; }
  .listing-launch-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .listing-launch-mark,
  .listing-launch-pulse { animation: none; }
  .listing-launch-progress span { transition: none; }
}

.selection-profit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 20px;
}

.selection-profit-config-card {
  margin: 18px 24px;
  padding: 18px;
  border-radius: 14px;
  background: #f8fafc;
}

.selection-profit-config-card h3 { margin: 0 0 14px; font-size: 14px; }
.selection-profit-fields label { gap: 7px; }
.selection-profit-fields label > span { display: grid; grid-template-columns: minmax(0, 1fr) 26px; align-items: center; gap: 7px; }
.selection-profit-fields label > span em { color: #64748b; font-style: normal; font-weight: 800; }
.selection-profit-fields label small { color: #94a3b8; font-size: 10px; font-weight: 600; }
.selection-profit-wide { grid-column: 1 / -1; }
.selection-profit-advanced { padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 9px; background: #fff; }
.selection-profit-advanced summary { cursor: pointer; color: #64748b; font-size: 11px; font-weight: 800; }
.selection-profit-advanced > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }

.profit-logistics-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.profit-logistics-template-card { padding: 16px; border: 1px solid #dbe4ee; border-radius: 12px; background: #fbfdff; }
.profit-logistics-template-card header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.profit-logistics-template-card header strong { font-size: 15px; }
.profit-logistics-template-card header span { border-radius: 999px; padding: 4px 9px; background: #e0f2fe; color: #0369a1; font-size: 10px; font-weight: 900; }
.profit-logistics-template-card .fields { display: grid; gap: 10px; }
.profit-logistics-template-card label { display: grid; gap: 5px; color: #64748b; font-size: 11px; font-weight: 800; }
.profit-logistics-template-card input { width: 100%; min-height: 36px; border: 1px solid #d8e0ea; border-radius: 8px; padding: 0 9px; background: #fff; }
.profit-logistics-example { margin-top: 12px; color: #0f766e; font-size: 11px; font-weight: 800; }
.profit-config-hint { margin-top: 14px; padding: 11px 13px; border-radius: 9px; background: #eff6ff; color: #475569; font-size: 11px; }

@media (max-width: 900px) {
  .profit-logistics-template-grid { grid-template-columns: 1fr; }
  .selection-profit-advanced > div { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .selection-bulk-toolbar { flex-wrap: wrap; overflow: visible; }
  .selection-toolbar-search-group { order: 2; flex: 1 0 100%; width: 100%; margin-left: 0; }
  .selection-bulk-toolbar .selection-toolbar-search { flex: 1 1 auto; width: auto; min-width: 0; }
  .selection-status-tabs button { min-width: 100px; }
  .selection-batch-config-grid { grid-template-columns: 1fr; max-height: 44vh; overflow-y: auto; }
  .selection-batch-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selection-batch-fields.advanced { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selection-batch-advanced { grid-column: auto; }
  .selection-profit-fields { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .selection-list,
  .selection-dims {
    grid-template-columns: 1fr;
  }

  .ai-studio-heading,
  .ai-source-form,
  .ai-product-pool-row,
  .ai-settings-row {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-service-state {
    min-width: 0;
  }

  .ai-stepper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ai-provider-hint {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-step:nth-child(2) {
    border-right: 1px solid var(--line);
  }

  .ai-step:nth-child(-n + 2) {
    border-bottom: 0;
  }

  .ai-gallery-panel .ai-image-grid,
  .ai-output-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ai-shot-plan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-generation-modes,
  .ai-reference-slots {
    grid-template-columns: 1fr;
  }

  .ai-sku-strip-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-sku-heading-actions { justify-content: space-between; }

  .ai-sku-card-grid.detailed {
    grid-template-columns: 1fr;
    max-height: 680px;
  }

  .ai-supplemental-grid {
    grid-template-columns: 1fr;
  }

  .ai-mode-heading,
  .ai-gallery-guide,
  .ai-gallery-group > header,
  .ai-supplemental-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-reference-images {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

  .ai-product-info-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-template-tabs {
    grid-template-columns: 1fr;
  }

  .ai-prompt-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-listing-form-grid {
    grid-template-columns: 1fr;
  }

  .ai-listing-form-grid.four-columns,
  .ai-listing-attribute-grid {
    grid-template-columns: 1fr;
  }

  .ai-listing-ai-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-category-catalog-toolbar,
  .ai-category-search-row {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-category-recommendation {
    grid-template-columns: 58px minmax(0, 1fr) 42px;
    gap: 8px;
  }

  .ai-category-search-result {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .ai-stage-navigation,
  .ai-listing-action-row {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-listing-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-listing-preview-gallery,
  .ai-listing-preview-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-listing-preview-actions,
  .ai-listing-preview-actions > div {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-stage-actions {
    width: 100%;
  }

  .ai-stage-actions button,
  .ai-listing-actions button {
    flex: 1;
  }

  .collector-path-row {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Active overview hero: apply the precision visual system to the real homepage entry. */
body .overview-command-center {
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, 0.88fr) minmax(560px, 1.12fr);
  gap: 28px;
  align-items: center;
  min-height: 356px;
  overflow: hidden;
  border: 1px solid rgba(45, 54, 68, 0.08);
  border-radius: 25px;
  padding: 44px 50px;
  color: #1d1d1f;
  background:
    radial-gradient(circle at 77% 14%, rgba(179, 202, 247, 0.34), transparent 27%),
    radial-gradient(circle at 91% 87%, rgba(244, 217, 167, 0.28), transparent 25%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 253, 0.94));
  box-shadow: 0 24px 72px rgba(35, 42, 52, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.98);
  isolation: isolate;
}

body .overview-command-center::before {
  position: absolute;
  z-index: -1;
  width: 440px;
  height: 440px;
  right: -150px;
  top: -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(159, 185, 238, 0.08) 48%, transparent 70%);
  content: "";
  animation: precision-ambient-float 12s ease-in-out infinite alternate;
  pointer-events: none;
}

body .overview-command-center::after {
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 180px;
  right: 2%;
  bottom: -128px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: none;
  content: "";
  filter: blur(26px);
  pointer-events: none;
}

body .overview-command-copy {
  z-index: 4;
}

body .overview-live-badge {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  border: 0;
  padding: 0;
  color: #7c838c;
  background: transparent;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.45px;
}

body .overview-live-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ca984;
  box-shadow: 0 0 0 5px rgba(76, 169, 132, 0.1);
  animation: precision-status-breathe 3.2s ease-in-out infinite;
}

body .overview-command-copy h2 {
  max-width: 560px;
  margin: 0;
  color: #17191d;
  font-size: clamp(40px, 3.4vw, 62px);
  font-weight: 720;
  letter-spacing: -3.1px;
  line-height: 1.08;
}

body .overview-command-center .overview-command-copy > p {
  max-width: 500px;
  margin-top: 17px;
  color: #737981;
  font-size: 14px;
  line-height: 1.72;
}

body .overview-command-center .overview-quick-actions {
  gap: 10px;
  margin-top: 29px;
}

body .overview-command-center .overview-quick-actions .primary-button {
  border-color: #d7b45e;
  color: #3d2d0c;
  background: linear-gradient(135deg, #f6d886, #d8a936);
  box-shadow: 0 12px 30px rgba(175, 128, 28, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body .overview-command-center .overview-quick-actions .primary-button:hover {
  border-color: #c99b2d;
  color: #2f2208;
  background: linear-gradient(135deg, #f9df99, #d5a22b);
  box-shadow: 0 16px 34px rgba(175, 128, 28, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

body .overview-command-center .overview-quick-actions .secondary-button {
  border-color: rgba(31, 35, 41, 0.1);
  color: #34383d;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 9px 24px rgba(42, 49, 58, 0.055);
  backdrop-filter: blur(12px);
}

body .overview-command-visual {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 282px;
}

body .overview-command-center .overview-command-orbit {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transform: scale(0.96);
  transform-origin: center;
}

body .overview-command-center .overview-orbit-glow {
  width: 220px;
  height: 220px;
}

body .overview-command-center .overview-feature-grid {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  pointer-events: none;
}

body .overview-command-center .overview-feature-card {
  --feature-accent: #526b86;
  position: absolute;
  display: grid;
  width: 172px;
  min-height: 70px;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 10px 12px;
  color: #24282d;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 16px 38px rgba(54, 66, 84, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  text-align: left;
  backdrop-filter: blur(18px) saturate(130%);
  pointer-events: auto;
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

body .overview-command-center .overview-feature-card::before {
  display: none;
}

body .overview-command-center .feature-listing { top: 4px; right: 1%; }
body .overview-command-center .feature-image { right: 0; bottom: 6px; }
body .overview-command-center .feature-selection { left: 0; top: 24px; }
body .overview-command-center .feature-store { left: 3%; bottom: 1px; }

body .overview-command-center .overview-feature-icon {
  width: 38px;
  height: 38px;
  border-color: rgba(83, 104, 130, 0.13);
  border-radius: 12px;
  color: var(--feature-accent);
  background: rgba(238, 243, 250, 0.8);
  box-shadow: none;
}

body .overview-command-center .overview-feature-icon svg {
  width: 20px;
  height: 20px;
}

body .overview-command-center .feature-listing { --feature-accent: #378a7c; }
body .overview-command-center .feature-image { --feature-accent: #7861a7; }
body .overview-command-center .feature-selection { --feature-accent: #ad7c25; }
body .overview-command-center .feature-store { --feature-accent: #477da0; }

body .overview-command-center .overview-feature-copy {
  gap: 3px;
}

body .overview-command-center .overview-feature-copy strong {
  color: #24282d;
  font-size: 12px;
  font-weight: 760;
}

body .overview-command-center .overview-feature-copy small {
  overflow: hidden;
  color: #7a8087;
  font-size: 9px;
  font-weight: 550;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .overview-command-center .overview-feature-arrow {
  display: none;
}

body .overview-command-center .overview-feature-card:hover {
  border-color: rgba(255, 255, 255, 0.98);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 22px 46px rgba(54, 66, 84, 0.15), inset 0 1px 0 #fff;
  transform: translateY(-3px) scale(1.015);
}

body .store-realtime-panel {
  overflow: hidden;
  border-color: rgba(31, 35, 41, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 20px 58px rgba(35, 42, 52, 0.065), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px) saturate(125%);
}

body .store-realtime-header {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(245, 247, 250, 0.68));
}

body .store-trend-block {
  border-color: rgba(31, 35, 41, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: none;
}

@media (max-width: 1280px) {
  body .overview-command-center {
    grid-template-columns: minmax(360px, 0.88fr) minmax(470px, 1.12fr);
    padding: 40px 38px;
  }

  body .overview-command-center .overview-feature-card { width: 154px; }
}

@media (max-width: 980px) {
  body .overview-command-center {
    grid-template-columns: 1fr;
    min-height: 650px;
    padding: 42px;
  }

  body .overview-command-copy h2 { max-width: 620px; }
  body .overview-command-visual { min-height: 300px; }
}

@media (max-width: 680px) {
  body .overview-command-center {
    min-height: 660px;
    border-radius: 20px;
    padding: 34px 24px 26px;
  }

  body .overview-command-copy h2 {
    font-size: clamp(38px, 12vw, 48px);
    letter-spacing: -2.2px;
  }

  body .overview-command-center .overview-command-copy > p { font-size: 13px; }
  body .overview-command-center .overview-quick-actions { margin-top: 24px; }
  body .overview-command-visual { min-height: 315px; }
  body .overview-command-center .overview-command-orbit { transform: scale(0.78); }
  body .overview-command-center .overview-feature-card { width: 140px; }
  body .overview-command-center .feature-listing { right: -5px; }
  body .overview-command-center .feature-image { right: -5px; }
  body .overview-command-center .feature-selection { left: -5px; }
  body .overview-command-center .feature-store { left: -5px; }
}

@media (max-width: 480px) {
  body .overview-command-center { min-height: 720px; }
  body .overview-command-visual { min-height: 360px; }

  body .overview-command-center .overview-command-orbit {
    height: 218px;
    transform: scale(0.74);
    transform-origin: center top;
  }

  body .overview-command-center .overview-feature-grid {
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  body .overview-command-center .overview-feature-card,
  body .overview-command-center .feature-listing,
  body .overview-command-center .feature-image,
  body .overview-command-center .feature-selection,
  body .overview-command-center .feature-store {
    position: relative;
    inset: auto;
    width: auto;
    min-height: 64px;
  }

  body .overview-command-center .overview-feature-copy small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body .overview-command-center::before,
  body .overview-live-badge i {
    animation: none !important;
  }
}

.supplier-list,
.attribute-map,
.image-pipeline,
.queue-list {
  display: grid;
  gap: 10px;
}

.supplier-row,
.attribute-row,
.pipeline-row,
.queue-item {
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.supplier-row strong,
.supplier-row span,
.attribute-row strong,
.attribute-row span,
.pipeline-row strong,
.pipeline-row span,
.queue-item strong,
.queue-item span {
  display: block;
}

.supplier-row span,
.attribute-row span,
.pipeline-row span,
.queue-item span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.progress {
  width: 110px;
  height: 8px;
  background: #e5edf0;
  border-radius: 999px;
  overflow: hidden;
  flex: none;
}

.progress span {
  display: block;
  height: 100%;
  background: var(--accent-2);
}

.toast {
  position: fixed;
  top: max(72px, calc(env(safe-area-inset-top) + 64px));
  left: 50%;
  z-index: 1400;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  width: min(540px, calc(100vw - 32px));
  max-width: none;
  transform: translate(-50%, -14px) scale(0.98);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
  padding: 13px 14px;
  overflow: hidden;
  border: 1px solid rgba(197, 151, 44, 0.28);
  border-radius: 16px;
  color: #20272c;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 247, 241, 0.96));
  box-shadow: 0 18px 52px rgba(18, 25, 29, 0.22), 0 3px 12px rgba(18, 25, 29, 0.1);
  text-align: left;
  backdrop-filter: blur(18px);
  overflow-wrap: anywhere;
}

.toast::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #c9972c;
  content: "";
}

.toast-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #ddaf45, #b77a0b);
  box-shadow: 0 8px 20px rgba(183, 122, 11, 0.24);
  font-size: 16px;
  font-weight: 900;
}

.toast-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.toast-copy strong {
  color: #20272c;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.toast-copy span {
  color: #66747a;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}

.toast-close {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: #7b8589;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

.toast-close:hover {
  color: #20272c;
  background: rgba(31, 38, 42, 0.07);
}

.toast[data-tone="success"] {
  border-color: rgba(27, 153, 111, 0.32);
  background: linear-gradient(135deg, rgba(250, 255, 253, 0.99), rgba(238, 250, 245, 0.97));
}

.toast[data-tone="success"]::before { background: #159469; }
.toast[data-tone="success"] .toast-icon {
  background: linear-gradient(145deg, #38bb8c, #10845d);
  box-shadow: 0 8px 20px rgba(16, 132, 93, 0.22);
}

.toast[data-tone="error"] {
  border-color: rgba(210, 66, 66, 0.3);
  background: linear-gradient(135deg, rgba(255, 252, 252, 0.99), rgba(255, 241, 241, 0.97));
}

.toast[data-tone="error"]::before { background: #d44848; }
.toast[data-tone="error"] .toast-icon {
  background: linear-gradient(145deg, #ec6a65, #c43333);
  box-shadow: 0 8px 20px rgba(196, 51, 51, 0.22);
}

.toast[data-tone="info"] {
  border-color: rgba(84, 108, 130, 0.25);
  background: linear-gradient(135deg, rgba(253, 254, 255, 0.99), rgba(241, 246, 250, 0.97));
}

.toast[data-tone="info"]::before { background: #526f86; }
.toast[data-tone="info"] .toast-icon {
  background: linear-gradient(145deg, #6d8da6, #3e596e);
  box-shadow: 0 8px 20px rgba(62, 89, 110, 0.2);
}

.toast.show {
  transform: translate(-50%, 0) scale(1);
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.suite-confirm-dialog {
  width: min(470px, calc(100vw - 32px));
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 26px;
  color: #20272c;
  background: transparent;
}

.suite-confirm-dialog::backdrop {
  background: rgba(17, 24, 29, 0.48);
  backdrop-filter: blur(7px) saturate(0.86);
}

.suite-confirm-dialog[open] {
  animation: suite-confirm-fade 180ms ease-out both;
}

.suite-confirm-card {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(205, 161, 58, 0.28);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 0%, rgba(234, 191, 88, 0.14), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(248, 248, 246, 0.98));
  box-shadow: 0 30px 90px rgba(12, 20, 24, 0.34), 0 4px 16px rgba(12, 20, 24, 0.12);
}

.suite-confirm-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 17px;
  color: #211a0b;
  background: linear-gradient(145deg, #f5d477, #d6a62c);
  box-shadow: 0 12px 26px rgba(184, 132, 21, 0.25);
  font-size: 20px;
  font-weight: 950;
}

.suite-confirm-copy { min-width: 0; }
.suite-confirm-eyebrow {
  margin: 1px 0 6px;
  color: #9b6f10;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.suite-confirm-copy h2 {
  margin: 0;
  color: #20272c;
  font-size: 20px;
  line-height: 1.25;
}

.suite-confirm-copy > p:last-child {
  margin: 8px 0 0;
  white-space: pre-line;
  color: #69777d;
  font-size: 12px;
  line-height: 1.65;
}

.suite-confirm-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 5px;
  padding-top: 18px;
  border-top: 1px solid rgba(27, 38, 43, 0.08);
}

.suite-confirm-actions button {
  min-width: 96px;
  min-height: 40px;
  padding: 9px 18px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.suite-confirm-cancel {
  border: 1px solid #dce2e4;
  color: #48565c;
  background: rgba(255, 255, 255, 0.9);
}

.suite-confirm-cancel:hover { border-color: #c6ced1; background: #f4f6f7; }
.suite-confirm-submit {
  border: 1px solid #c18a13;
  color: #1f1a0d;
  background: linear-gradient(145deg, #f6d36f, #dfad30);
  box-shadow: 0 10px 24px rgba(190, 137, 20, 0.22);
}

.suite-confirm-submit:hover { filter: brightness(1.025); transform: translateY(-1px); }
.suite-confirm-dialog[data-tone="danger"] .suite-confirm-card { border-color: rgba(207, 66, 66, 0.26); }
.suite-confirm-dialog[data-tone="danger"] .suite-confirm-icon {
  color: #fff;
  background: linear-gradient(145deg, #ef7771, #c93c3c);
  box-shadow: 0 12px 26px rgba(201, 60, 60, 0.23);
}
.suite-confirm-dialog[data-tone="danger"] .suite-confirm-eyebrow { color: #bd3d3d; }
.suite-confirm-dialog[data-tone="danger"] .suite-confirm-submit {
  border-color: #b83434;
  color: #fff;
  background: linear-gradient(145deg, #e7605b, #c63737);
  box-shadow: 0 10px 24px rgba(198, 55, 55, 0.2);
}

@keyframes suite-confirm-fade {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
  .toast {
    top: max(60px, calc(env(safe-area-inset-top) + 54px));
    grid-template-columns: 34px minmax(0, 1fr) 26px;
    width: calc(100vw - 20px);
    gap: 10px;
    padding: 11px 12px;
    border-radius: 14px;
  }

  .toast-icon { width: 34px; height: 34px; border-radius: 11px; }
  .suite-confirm-dialog { width: calc(100vw - 22px); }
  .suite-confirm-card {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 13px;
    padding: 20px;
    border-radius: 20px;
  }
  .suite-confirm-icon { width: 46px; height: 46px; border-radius: 15px; }
  .suite-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .suite-confirm-actions button { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .suite-confirm-dialog[open] { transition: none; animation: none; }
}

.page-loading {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: rgba(243, 246, 247, 0.28);
  backdrop-filter: blur(1.5px);
}

.page-loading[hidden] {
  display: none !important;
}

.page-loading-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: 140px;
  padding: 18px 24px 16px;
  border: 1px solid rgba(196, 151, 54, 0.22);
  border-radius: 16px;
  background: rgba(255, 253, 247, 0.95);
  box-shadow: 0 16px 38px rgba(107, 78, 24, 0.13);
}

.page-loading-mascot {
  position: relative;
  display: grid;
  place-items: center;
  width: 70px;
  height: 72px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

.page-loading-mascot::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 3px;
  width: 36px;
  height: 7px;
  border-radius: 50%;
  background: rgba(190, 139, 35, 0.22);
  filter: blur(3px);
  transform: translateX(-50%);
  animation: page-loading-shadow 1.18s ease-in-out infinite;
}

.page-loading-mascot img {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 62px;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 5px 7px rgba(153, 105, 12, 0.18));
  user-select: none;
  pointer-events: none;
  transform-origin: center 86%;
  animation: page-loading-bounce 1.18s cubic-bezier(0.37, 0, 0.2, 1) infinite;
}

.page-loading-card strong {
  color: #3d5a61;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

body.is-page-loading .workspace {
  pointer-events: none;
}

@keyframes page-loading-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  8% {
    transform: translateY(2px) scale(1.08, 0.9);
  }
  22% {
    transform: translateY(-11px) scale(0.96, 1.06);
  }
  38% {
    transform: translateY(-17px) scale(1, 1);
  }
  56% {
    transform: translateY(-7px) scale(0.98, 1.03);
  }
  68% {
    transform: translateY(1px) scale(1.1, 0.88);
  }
  77% {
    transform: translateY(-4px) scale(0.97, 1.04);
  }
  89% {
    transform: translateY(0) scale(1.03, 0.96);
  }
}

@keyframes page-loading-shadow {
  0%,
  100% {
    opacity: 0.72;
    transform: translateX(-50%) scaleX(1);
  }
  38% {
    opacity: 0.25;
    transform: translateX(-50%) scaleX(0.58);
  }
  68% {
    opacity: 0.82;
    transform: translateX(-50%) scaleX(1.12);
  }
}

[hidden] {
  display: none !important;
}

/* Paid-member modules keep their real page as a blurred preview for free accounts. */
body.member-feature-locked {
  overflow: hidden;
}

body.member-feature-locked .workspace > [data-view-panel]:not([hidden]) {
  filter: blur(6px);
  opacity: 0.48;
  pointer-events: none;
  user-select: none;
}

.workspace > .member-feature-gate {
  position: fixed;
  top: 168px;
  right: 28px;
  bottom: 24px;
  left: 296px;
  z-index: 80;
  display: grid;
  width: auto;
  max-width: none;
  min-height: 430px;
  margin: 0;
  overflow: hidden;
  place-items: center;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 26px;
  background:
    radial-gradient(circle at 84% 12%, rgba(187, 207, 243, 0.5), transparent 31%),
    rgba(237, 243, 250, 0.6);
  box-shadow: 0 24px 66px rgba(55, 70, 96, 0.13), inset 0 1px #fff;
  backdrop-filter: blur(14px) saturate(116%);
}

.member-feature-gate-card {
  position: relative;
  display: grid;
  width: min(1030px, 94%);
  height: min(520px, 100%);
  min-height: 440px;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.98);
  border-radius: 30px;
  background: rgba(252, 253, 255, 0.94);
  box-shadow: 0 38px 95px rgba(53, 68, 94, 0.2), inset 0 1px #fff;
}

.member-feature-gate-copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 4vw, 54px);
}

.member-feature-gate-eyebrow {
  display: inline-flex;
  width: max-content;
  min-height: 30px;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid rgba(199, 209, 223, 0.8);
  border-radius: 999px;
  color: #7b8695;
  background: rgba(255, 255, 255, 0.88);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.member-feature-gate-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d5a421;
  box-shadow: 0 0 0 5px rgba(213, 164, 33, 0.12);
}

.member-feature-gate-copy h2 {
  max-width: 540px;
  margin: 24px 0 14px;
  color: #191e26;
  font-size: clamp(38px, 3.3vw, 48px);
  font-weight: 780;
  letter-spacing: -0.045em;
  line-height: 1.12;
  text-wrap: balance;
}

.member-feature-gate-copy > p {
  max-width: 540px;
  margin: 0;
  color: #6e7b8c;
  font-size: 14px;
  line-height: 1.75;
}

.member-feature-gate-capabilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0;
}

.member-feature-gate-capabilities article {
  min-width: 0;
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgba(202, 212, 225, 0.78);
  border-radius: 17px;
  background: rgba(244, 247, 251, 0.88);
}

.member-feature-gate-capabilities article > b {
  display: grid;
  width: 27px;
  height: 27px;
  margin-bottom: 10px;
  place-items: center;
  border-radius: 9px;
  color: #9a6a08;
  background: #fff4cc;
  font-size: 12px;
}

.member-feature-gate-capabilities strong,
.member-feature-gate-capabilities small {
  display: block;
}

.member-feature-gate-capabilities strong {
  color: #2a323d;
  font-size: 13px;
}

.member-feature-gate-capabilities small {
  margin-top: 5px;
  color: #8692a1;
  font-size: 10px;
  line-height: 1.45;
}

.member-feature-gate-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

body .member-feature-gate-actions .primary-button,
.member-feature-gate-actions .secondary-button {
  min-height: 48px;
  border-radius: 14px;
  padding-inline: 22px;
}

body .member-feature-gate-actions .primary-button {
  border-color: #dca91d;
  color: #2b2109;
  background: linear-gradient(135deg, #f6d86d, #dfa918);
  box-shadow: 0 17px 34px rgba(190, 137, 23, 0.25), inset 0 1px rgba(255, 255, 255, 0.75);
}

body .member-feature-gate-actions .primary-button:hover {
  border-color: #c8920e;
  color: #231a06;
  background: linear-gradient(135deg, #f9df83, #dca315);
  box-shadow: 0 20px 38px rgba(190, 137, 23, 0.3), inset 0 1px rgba(255, 255, 255, 0.78);
}

.member-feature-gate-visual {
  position: relative;
  display: grid;
  overflow: hidden;
  place-items: center;
  padding: 36px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.92), transparent 28%),
    radial-gradient(circle at 76% 76%, rgba(188, 211, 246, 0.78), transparent 34%),
    linear-gradient(145deg, #edf3fc, #dfe8f7 58%, #f7f9fc);
}

.member-feature-orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  box-shadow: inset 0 1px #fff, 0 22px 50px rgba(76, 96, 130, 0.12);
}

.member-feature-orbit.orbit-one {
  width: 290px;
  height: 290px;
}

.member-feature-orbit.orbit-two {
  width: 210px;
  height: 210px;
  border-color: rgba(222, 174, 52, 0.34);
  transform: rotate(28deg) scaleY(0.44);
}

.member-feature-orbit.orbit-three {
  width: 260px;
  height: 260px;
  border-color: rgba(119, 151, 211, 0.32);
  transform: rotate(-32deg) scaleY(0.48);
}

.member-feature-pass {
  position: relative;
  z-index: 2;
  width: min(302px, 100%);
  min-height: 330px;
  padding: 25px;
  border: 1px solid rgba(255, 255, 255, 0.98);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 26px 64px rgba(58, 75, 105, 0.2), inset 0 1px #fff;
  backdrop-filter: blur(24px);
}

.member-feature-pass header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.member-feature-pass header > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, #f0cb54, #b98108);
  font-weight: 900;
}

.member-feature-pass header > b {
  color: #9a6b0c;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.member-feature-pass h3 {
  margin: 25px 0 7px;
  color: #242b35;
  font-size: 24px;
}

.member-feature-pass > p {
  margin: 0 0 20px;
  color: #7c8795;
  font-size: 12px;
  line-height: 1.55;
}

.member-feature-pass > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-top: 1px solid rgba(202, 211, 224, 0.78);
  color: #667385;
  font-size: 12px;
}

.member-feature-pass > div b {
  color: #28303b;
}

.member-feature-pass > small {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  color: #3d8d70;
  font-size: 11px;
  font-weight: 800;
}

.member-feature-pass > small i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #53bc96;
  box-shadow: 0 0 0 5px rgba(83, 188, 150, 0.13);
}

.member-feature-account-status {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 28px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 14px;
  color: #687587;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 16px 34px rgba(67, 84, 113, 0.14);
  font-size: 10px;
}

.member-feature-account-status span,
.member-feature-account-status strong {
  display: block;
}

.member-feature-account-status strong {
  margin-top: 3px;
  color: #28303a;
  font-size: 13px;
}

@media (max-width: 1180px) {
  .member-feature-gate-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .member-feature-gate-visual {
    display: none;
  }
}

@media (max-width: 960px) {
  .workspace > .member-feature-gate {
    top: 164px;
    right: 14px;
    bottom: 14px;
    left: 14px;
    min-height: 360px;
    padding: 16px;
  }

  .member-feature-gate-card {
    width: min(720px, 100%);
    height: min(520px, 100%);
    min-height: 0;
  }

  .member-feature-gate-copy {
    overflow-y: auto;
    padding: 34px;
  }
}

@media (max-width: 680px) {
  .member-feature-gate-copy {
    justify-content: flex-start;
    padding: 28px 22px;
  }

  .member-feature-gate-copy h2 {
    margin-top: 20px;
    font-size: 34px;
  }

  .member-feature-gate-capabilities {
    grid-template-columns: minmax(0, 1fr);
    margin: 22px 0;
  }

  .member-feature-gate-capabilities article {
    min-height: 0;
  }

  .member-feature-gate-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

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

  .store-realtime-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 0;
  }

  .store-realtime-kpis > div:nth-child(3) {
    border-right: 0;
  }

  .main-grid {
    grid-template-columns: 1fr;
  }

  .resale-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .nav-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .topbar,
  .command-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .top-actions {
    justify-content: stretch;
  }

  .primary-button,
  .secondary-button {
    width: 100%;
  }

  .metric-grid,
  .workflow-grid,
  .calc-grid {
    grid-template-columns: 1fr;
  }

  .store-trend-grid {
    grid-template-columns: 1fr;
  }

  .store-trend-block + .store-trend-block {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .profit-input-grid,
  .profit-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .profit-tool-tabs,
  .return-choice-row,
  .toolbox-form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .resale-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .resale-profit-editor {
    grid-template-columns: repeat(4, minmax(90px, 1fr));
  }
}

@media (max-width: 560px) {
  .ai-output-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-shot-plan {
    grid-template-columns: 1fr;
  }

  .workspace {
    padding: 14px;
  }

  .nav-list {
    grid-template-columns: 1fr 1fr;
  }

  h1 {
    font-size: 21px;
  }

  .panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  .store-realtime-header,
  .store-realtime-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .store-realtime-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .store-realtime-kpis > div:nth-child(3) {
    border-right: 1px solid #e8edef;
  }

  .store-realtime-kpis > div:nth-child(even) {
    border-right: 0;
  }

  .segmented {
    overflow-x: auto;
  }

  .profit-input-grid,
  .profit-kpi-grid {
    grid-template-columns: 1fr;
  }

  .profit-tool-tabs,
  .return-choice-row,
  .toolbox-form-grid,
  .return-kpi-grid {
    grid-template-columns: 1fr;
  }

  .profit-section-heading,
  .toolbox-action-row,
  .commission-filter-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .commission-filter-bar input,
  .commission-filter-bar select {
    max-width: none;
    flex-basis: auto;
  }

  .resale-header-actions,
  .resale-kpi-grid {
    align-items: stretch;
  }

  .resale-header-actions {
    flex-direction: column;
  }

  .resale-card-main {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .resale-card-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .resale-profit-editor {
    grid-template-columns: 1fr 1fr;
  }

  .resale-card-footer,
  .resale-row-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .resale-row-actions .primary-button,
  .resale-row-actions .secondary-button {
    width: 100%;
  }

  .profit-header-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .profit-result-band {
    align-items: flex-start;
    flex-direction: column;
  }

  .profit-result-band > span {
    text-align: left;
  }
}

@media (max-width: 1500px) {
  .product-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .product-card-upper {
    grid-template-columns: 124px minmax(0, 1fr);
  }

  .product-market-grid,
  .product-profit-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .promotion-layout {
    grid-template-columns: 1fr;
  }

  .promotion-actions-pane {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .promotion-action-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-height: 260px;
    gap: 5px;
  }

  .promotion-action-item + .promotion-action-item {
    margin-top: 0;
  }

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

  .relist-query-field,
  .relist-date-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .product-card-upper {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
  }

  .product-card-title,
  .product-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .product-market-grid,
  .product-profit-strip {
    grid-template-columns: 1fr 1fr;
  }

  .product-card-actions > div {
    align-items: stretch;
    flex-direction: column;
  }

  .product-card-actions .primary-button,
  .product-card-actions .secondary-button {
    width: 100%;
  }

  .promotion-header-actions,
  .promotion-detail-header,
  .promotion-product-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .promotion-kpi-grid,
  .promotion-action-list {
    grid-template-columns: 1fr 1fr;
  }

  .promotion-view-tabs {
    overflow-x: auto;
  }

  .promotion-view-tabs button {
    flex: 1;
    white-space: nowrap;
  }

  .promotion-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .promotion-toolbar label,
  .promotion-toolbar input {
    min-width: 100%;
  }

  .promotion-toolbar .secondary-button {
    flex: 1;
  }

  .promotion-product-footer .primary-button {
    width: 100%;
  }

  .relist-toolbar,
  .relist-selection-row {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .relist-store-field,
  .relist-toolbar .primary-button,
  .relist-toolbar .secondary-button {
    width: 100%;
  }

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

  .relist-filter-grid > label,
  .relist-query-field,
  .relist-date-field {
    grid-column: 1;
  }

  .relist-selection-row > span {
    width: 100%;
  }

  .relist-selection-row .secondary-button {
    flex: 1;
  }

  .relist-confirm-dialog {
    width: calc(100% - 20px);
    max-height: 92vh;
  }

  .relist-confirm-header,
  .relist-confirm-footer {
    padding: 14px;
  }

  .relist-confirm-warning,
  .relist-confirm-summary {
    margin-right: 14px;
    margin-left: 14px;
  }

  .relist-confirm-products {
    padding: 0 14px;
  }

  .relist-confirm-product {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .relist-confirm-product-image {
    width: 48px;
  }

  .relist-confirm-product > div:not(.relist-confirm-product-main) {
    grid-column: 2;
  }

  .relist-confirm-product > .badge {
    grid-column: 3;
    grid-row: 1;
  }

  .relist-confirm-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .relist-confirm-footer > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .relist-confirm-footer .primary-button,
  .relist-confirm-footer .secondary-button {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .store-realtime-header,
  .store-product-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .store-realtime-actions,
  .store-product-filters {
    justify-content: flex-start;
  }

  .store-dashboard-picker,
  .store-product-filters input,
  .store-product-filters select {
    width: 100%;
  }

  .store-realtime-sync-state {
    justify-items: start;
  }

  .store-product-filters {
    align-items: stretch;
    flex-direction: column;
  }
}

/* 2026 product shell — fitup-inspired light glass / charcoal */
:root {
  --bg: #f3f4f6;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-solid: #ffffff;
  --surface-2: #ebeef3;
  --ink: #141820;
  --muted: #6b7280;
  --line: #e5e7eb;
  --text: var(--ink);
  --text-muted: var(--muted);
  --surface-muted: var(--surface-2);
  --accent: #3b82f6;
  --accent-strong: #1d4ed8;
  --accent-2: #60a5fa;
  --charcoal: #171a21;
  --charcoal-soft: #2a2f3a;
  --warning: #b45309;
  --danger: #dc2626;
  --ok: #059669;
  --shadow: 0 18px 40px rgba(20, 24, 32, 0.08);
  --shadow-soft: 0 8px 24px rgba(20, 24, 32, 0.05);
  --radius: 18px;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.7);
}

body {
  min-width: 320px;
  background:
    radial-gradient(circle at 12% -8%, rgba(59, 130, 246, 0.08), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(148, 163, 184, 0.16), transparent 36%),
    linear-gradient(180deg, #f7f8fa 0%, #eef0f4 48%, #f5f6f8 100%);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.app-shell {
  grid-template-columns: 268px minmax(0, 1fr);
}

.sidebar {
  gap: 12px;
  padding: 16px 12px 14px;
  border-right: 1px solid rgba(229, 231, 235, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.88) 100%);
  backdrop-filter: blur(18px);
  box-shadow: 8px 0 32px rgba(20, 24, 32, 0.03);
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}

.brand {
  min-height: 58px;
  gap: 11px;
  padding: 0 7px 14px;
  border-bottom: 1px solid rgba(229, 231, 235, 0.95);
}

.brand-mark {
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid rgba(23, 26, 33, 0.12);
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.14), transparent 46%),
    linear-gradient(155deg, #1f232c 0%, #0d0f14 100%);
  box-shadow:
    0 12px 24px rgba(20, 24, 32, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
}

.brand strong {
  color: var(--charcoal);
  font-size: 16px;
  letter-spacing: -0.25px;
}

.brand span {
  color: #7b8494;
  font-size: 11px;
}

.nav-list {
  gap: 3px;
}

.nav-section-label {
  margin: 13px 12px 5px;
  color: #9aa3b2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.nav-section-label:first-child {
  margin-top: 2px;
}

.nav-item,
.nav-download-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 12px;
  color: #4b5565;
  font-size: 13px;
  font-weight: 600;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.nav-item::before,
.nav-download-link::before {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 0;
  color: inherit;
  background-color: currentColor;
  background-image: none;
  font-size: 0;
  opacity: 0.78;
  content: "";
  -webkit-mask: var(--nav-icon) center / 16px 16px no-repeat;
  mask: var(--nav-icon) center / 16px 16px no-repeat;
}

.nav-item[data-view="overview"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4l8 7'/%3E%3Cpath d='M6 10.5V19a1 1 0 0 0 1 1h3.5v-5h3v5H17a1 1 0 0 0 1-1v-8.5'/%3E%3C/svg%3E"); }
.nav-item[data-view="data-market"],
.data-market-nav-toggle { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V9'/%3E%3Cpath d='M10 19V5'/%3E%3Cpath d='M16 19v-7'/%3E%3Cpath d='M22 19V8'/%3E%3C/svg%3E"); }
.nav-item[data-view="ai-selection"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3'/%3E%3Cpath d='M12 18v3'/%3E%3Cpath d='M3 12h3'/%3E%3Cpath d='M18 12h3'/%3E%3Cpath d='m6.5 6.5 2 2'/%3E%3Cpath d='m15.5 15.5 2 2'/%3E%3Cpath d='m17.5 6.5-2 2'/%3E%3Cpath d='m8.5 15.5-2 2'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E"); }
.nav-item[data-view^="handbook-"],
.handbook-nav-toggle { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h11.5A2.5 2.5 0 0 1 19 7v13H7.5A2.5 2.5 0 0 0 5 22.5'/%3E%3Cpath d='M5 4.5A2.5 2.5 0 0 1 7.5 2H19'/%3E%3Cpath d='M9 9h7'/%3E%3Cpath d='M9 13h7'/%3E%3C/svg%3E"); }
.nav-item[data-view="selection"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.4'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.4'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.4'/%3E%3Cpath d='M16.5 14.5v5'/%3E%3Cpath d='M14 17h5'/%3E%3C/svg%3E"); }
.nav-item[data-view="resale"],
.listing-nav-toggle { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16l-1.4 10.2A2 2 0 0 1 16.6 20H7.4a2 2 0 0 1-2-1.8L4 8Z'/%3E%3Cpath d='M8 8V6.5A2.5 2.5 0 0 1 10.5 4h3A2.5 2.5 0 0 1 16 6.5V8'/%3E%3C/svg%3E"); }
.nav-item[data-view="sourcing"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E"); }
.nav-item[data-view="copy"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7.5V5.8A1.8 1.8 0 0 1 9.8 4h8.4A1.8 1.8 0 0 1 20 5.8v10.4a1.8 1.8 0 0 1-1.8 1.8H16'/%3E%3Crect x='4' y='8' width='12' height='12' rx='1.8'/%3E%3C/svg%3E"); }
.nav-item[data-view="ai-image"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.5'/%3E%3Cpath d='m8 16 3.2-3.4a1 1 0 0 1 1.5 0L16 16'/%3E%3C/svg%3E"); }
.nav-item[data-view="ai-image-edit"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); }
.nav-item[data-view="profit"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M16.5 7.2c-.7-1.3-2-2-4.1-2H10a3 3 0 0 0 0 6h3.2a3 3 0 0 1 0 6H9.2c-2 0-3.4-.8-4.2-2'/%3E%3C/svg%3E"); }
.nav-item[data-view="listing"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m7 10 5-5 5 5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E"); }
.nav-item[data-view="tokens"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v8'/%3E%3Cpath d='M9.8 9.6c.5-.8 1.3-1.2 2.3-1.2 1.5 0 2.5.8 2.5 2s-1 2-2.6 2.3c-1.5.3-2.4.9-2.4 2.1 0 1.1 1 1.9 2.5 1.9 1.1 0 1.9-.4 2.4-1.2'/%3E%3C/svg%3E"); }
.nav-item[data-view="settings"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3.5v2.2'/%3E%3Cpath d='M12 18.3v2.2'/%3E%3Cpath d='m6.1 6.1 1.6 1.6'/%3E%3Cpath d='m16.3 16.3 1.6 1.6'/%3E%3Cpath d='M3.5 12h2.2'/%3E%3Cpath d='M18.3 12h2.2'/%3E%3Cpath d='m6.1 17.9 1.6-1.6'/%3E%3Cpath d='m16.3 7.7 1.6-1.6'/%3E%3C/svg%3E"); }
.nav-item[data-view="store-auth"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5 12 4l8 5.5'/%3E%3Cpath d='M6 10v8.5A1.5 1.5 0 0 0 7.5 20h9a1.5 1.5 0 0 0 1.5-1.5V10'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E"); }
.nav-item[data-view="membership"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.2 5.2L20 9l-4 3.7L17.4 19 12 15.8 6.6 19 8 12.7 4 9l5.8-.8L12 3Z'/%3E%3C/svg%3E"); }
.nav-item[data-view="admin-users"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0'/%3E%3Cpath d='M17 11h4'/%3E%3Cpath d='M19 9v4'/%3E%3C/svg%3E"); }
.nav-item.erp-order-nav-toggle { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3Cpath d='M3.5 6h.01'/%3E%3Cpath d='M3.5 12h.01'/%3E%3Cpath d='M3.5 18h.01'/%3E%3C/svg%3E"); }
.nav-download-link { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='m8 10 4 4 4-4'/%3E%3Cpath d='M5 18h14'/%3E%3C/svg%3E"); }

.nav-item[data-view="overview"]::before,
.nav-item[data-view="data-market"]::before,
.data-market-nav-toggle::before,
.nav-item[data-view="ai-selection"]::before,
.nav-item[data-view^="handbook-"]::before,
.handbook-nav-toggle::before,
.nav-item[data-view="selection"]::before,
.nav-item[data-view="resale"]::before,
.nav-item[data-view="sourcing"]::before,
.nav-item[data-view="copy"]::before,
.nav-item[data-view="ai-image"]::before,
.nav-item[data-view="ai-image-edit"]::before,
.nav-item[data-view="profit"]::before,
.nav-item[data-view="listing"]::before,
.nav-item[data-view="tokens"]::before,
.nav-item[data-view="settings"]::before,
.nav-item[data-view="store-auth"]::before,
.nav-item[data-view="membership"]::before,
.nav-item[data-view="admin-users"]::before,
.nav-item.erp-order-nav-toggle::before,
.nav-download-link::before,
.listing-nav-toggle::before {
  content: "";
}

.nav-item:hover,
.nav-download-link:hover {
  color: var(--charcoal);
  background: rgba(23, 26, 33, 0.045);
  transform: translateX(1px);
}

.nav-item.active {
  color: #fff;
  background: linear-gradient(135deg, #1a1d26 0%, #2b3140 100%);
  box-shadow: 0 10px 22px rgba(23, 26, 33, 0.18);
}

.nav-item.active::before {
  color: #fff;
  background-color: currentColor;
  background-image: none;
  opacity: 1;
}

.data-market-nav-group,
.handbook-nav-group {
  display: grid;
  gap: 2px;
}

.data-market-nav-toggle b,
.handbook-nav-toggle b {
  margin-left: auto;
  color: #9aa3b2;
  font-size: 12px;
  transition: color 160ms ease, transform 160ms ease;
}

.data-market-nav-toggle:hover b,
.handbook-nav-toggle:hover b {
  color: var(--charcoal);
}

.data-market-nav-toggle.collapsed b,
.handbook-nav-toggle.collapsed b {
  transform: translateY(-1px);
}

.data-market-subnav,
.handbook-subnav {
  gap: 1px;
  margin-left: 20px;
  padding: 2px 0 4px 10px;
  border-left: 1px solid #e5e7eb;
}

.data-market-subnav-item,
.handbook-subnav-item {
  min-height: 28px;
  border-left: 0;
  border-radius: 8px;
  padding: 5px 10px;
  color: #6b7280;
  background: transparent;
  font-size: 11px;
}

.data-market-subnav-item:hover,
.handbook-subnav-item:hover {
  color: var(--charcoal);
  background: rgba(23, 26, 33, 0.04);
}

.data-market-subnav-item.active,
.handbook-subnav-item.active {
  color: var(--accent-strong);
  background: rgba(59, 130, 246, 0.1);
}

.operations-nav {
  margin-top: 0;
  padding-top: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.operations-nav-toggle {
  min-height: 39px;
  border-radius: 12px;
  padding: 8px 11px;
  color: #4b5565;
  font-size: 13px;
  font-weight: 600;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.operations-nav-toggle:hover {
  transform: translateX(1px);
  color: var(--charcoal);
  background: rgba(23, 26, 33, 0.045);
}

.operations-nav-toggle > span {
  gap: 10px;
}

.operations-nav-toggle b {
  margin-left: auto;
  color: #9aa3b2;
}

.operations-store-icon {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  color: #6b7280;
  background: rgba(23, 26, 33, 0.05);
}

.operations-store-icon::before {
  position: static;
  width: auto;
  height: auto;
  content: "▦";
  color: inherit;
  background: none;
  font-size: 12px;
  line-height: 1;
}

.operations-nav-grid {
  grid-template-columns: 1fr;
  gap: 1px;
  margin-left: 20px;
  padding: 2px 0 4px 10px;
  border-left: 1px solid #e5e7eb;
}

.operations-nav-item {
  min-height: 28px;
  border-radius: 8px;
  padding: 5px 10px 5px 24px;
  color: #6b7280;
  background: transparent;
  font-size: 11px;
  position: relative;
}

.operations-nav-item::before {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cbd5e1;
  content: "";
  transform: translateY(-50%);
}

.operations-nav-item:hover,
.operations-nav-item.active {
  color: var(--charcoal);
  background: rgba(23, 26, 33, 0.04);
}

.operations-nav-item.active::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}

.sidebar-token-card,
.store-box,
.account-box {
  border: 1px solid rgba(229, 231, 235, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}

.store-box {
  display: grid;
  gap: 2px;
  padding: 11px 12px;
}

.store-box > span,
.account-box > span {
  color: #9aa3b2;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.store-box strong {
  margin-top: 2px;
  color: var(--charcoal);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.1px;
}

.store-box small {
  margin-top: 2px;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 650;
}

.account-box {
  padding: 11px 12px;
  border-top: 0;
}

.account-box strong {
  margin-top: 3px;
  color: var(--charcoal);
  font-size: 13px;
}

.workspace {
  align-content: start;
  gap: 20px;
  padding: 20px 28px 44px;
}

.workspace > * {
  width: 100%;
  max-width: 1680px;
  margin-right: auto;
  margin-left: auto;
}

.workspace > .workspace-taskbar {
  position: sticky;
  top: 8px;
  z-index: 62;
  display: flex;
  min-width: 0;
  min-height: 44px;
  padding: 5px 7px;
  margin-bottom: -8px;
  overflow: hidden;
  border: 1px solid rgba(49, 40, 24, 0.96);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(56, 51, 42, 0.98), rgba(31, 30, 29, 0.99));
  box-shadow: 0 10px 26px rgba(25, 20, 13, 0.16), inset 0 1px rgba(255, 255, 255, 0.08);
}

.workspace-task-tabs {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: rgba(226, 179, 57, 0.56) transparent;
  scrollbar-width: thin;
}

.workspace-task-tabs::-webkit-scrollbar {
  height: 4px;
}

.workspace-task-tabs::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(226, 179, 57, 0.56);
}

.workspace-task-tab-shell {
  display: flex;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.72);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.workspace-task-tab-shell:hover {
  color: #fff8e6;
  border-color: rgba(226, 179, 57, 0.34);
  background: rgba(255, 255, 255, 0.07);
}

.workspace-task-tab-shell.active {
  color: #33270d;
  border-color: rgba(226, 179, 57, 0.92);
  background: linear-gradient(180deg, #fffdf7, #f8edd2);
  box-shadow: 0 3px 10px rgba(12, 10, 7, 0.22), inset 0 1px #fff;
}

.workspace-task-tab,
.workspace-task-close {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.workspace-task-tab {
  display: flex;
  min-width: 0;
  max-width: 205px;
  height: 100%;
  padding: 0 11px;
  align-items: center;
  gap: 7px;
}

.workspace-task-tab i {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  color: #e2b339;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.workspace-task-tab-shell.active .workspace-task-tab i {
  color: #9a6e0d;
}

.workspace-task-tab span {
  overflow: hidden;
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-task-close {
  display: grid;
  width: 28px;
  height: 100%;
  padding: 0;
  place-items: center;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 17px;
  line-height: 1;
  opacity: 0.72;
}

.workspace-task-tab-shell.active .workspace-task-close {
  border-left-color: rgba(154, 110, 13, 0.18);
}

.workspace-task-close:hover {
  color: #c75c3e;
  background: rgba(199, 92, 62, 0.1);
  opacity: 1;
}

.workspace-task-tab:focus-visible,
.workspace-task-close:focus-visible {
  outline: 2px solid #f2c85e;
  outline-offset: -2px;
}

.topbar {
  position: sticky;
  top: 62px;
  z-index: 30;
  min-height: 84px;
  padding: 15px 18px;
  border: 1px solid rgba(229, 231, 235, 0.95);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.workspace-heading,
.topbar-store-pill,
.topbar-store-pill span,
.overview-live-badge,
.overview-flow li,
.overview-flow li span {
  display: flex;
  align-items: center;
}

.workspace-heading {
  min-width: 0;
  gap: 12px;
}

.workspace-heading-mark {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  color: var(--charcoal);
  background: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
}

.topbar-store-pill {
  gap: 9px;
  min-height: 42px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  text-align: left;
  box-shadow: var(--shadow-soft);
}

.workspace-heading h1 {
  overflow: hidden;
  font-size: 20px;
  letter-spacing: -0.35px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-heading .eyebrow {
  margin-bottom: 2px;
  color: #7a8b91;
  font-size: 10px;
  letter-spacing: 0.45px;
}

.workspace-subtitle {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.sidebar-menu-button {
  display: none;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px;
  background: #fff;
}

.sidebar-menu-button span {
  display: block;
  height: 2px;
  margin: 3px 0;
  border-radius: 99px;
  background: #31464e;
}

.top-actions {
  gap: 8px;
}

.topbar-store-pill > i,
.overview-live-badge i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #29a56c;
  box-shadow: 0 0 0 4px rgba(41, 165, 108, 0.11);
}

.topbar-store-pill span {
  align-items: flex-start;
  flex-direction: column;
  gap: 1px;
}

.topbar-store-pill small {
  color: var(--muted);
  font-size: 9px;
}

.topbar-store-pill strong {
  max-width: 126px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.primary-button,
.secondary-button,
.icon-button,
.segment {
  border-radius: 999px;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    filter 140ms ease;
}

.primary-button {
  color: #fff;
  background: linear-gradient(135deg, #1a1d26 0%, #2c3342 100%);
  box-shadow: 0 10px 22px rgba(23, 26, 33, 0.18);
}

.primary-button:hover,
.secondary-button:hover,
.icon-button:hover,
.segment:hover {
  transform: translateY(-1px);
}

.primary-button:active,
.secondary-button:active,
.icon-button:active,
.segment:active,
.nav-item:active,
.operations-nav-item:active,
.topbar-store-pill:active,
.topbar-membership-button:active {
  transform: translateY(0) scale(0.985);
  filter: brightness(0.97);
}

.primary-button:focus-visible,
.secondary-button:focus-visible,
.icon-button:focus-visible,
.segment:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.45);
  outline-offset: 2px;
}

.secondary-button {
  color: var(--charcoal-soft);
  border-color: #d7dbe3;
  background: rgba(255, 255, 255, 0.78);
}

.panel,
.command-strip,
.metric-card {
  border-color: rgba(229, 231, 235, 0.95);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}

.panel-header h2 {
  font-size: 16px;
  letter-spacing: -0.2px;
}

.panel-header p {
  font-size: 12px;
  line-height: 1.5;
}

.segmented {
  gap: 2px;
  padding: 3px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: rgba(243, 244, 246, 0.9);
}

.segment {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  color: #6b7280;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.segment.active {
  color: #fff;
  background: var(--charcoal);
  box-shadow: 0 6px 14px rgba(23, 26, 33, 0.16);
}

.overview-command-center {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.1fr);
  gap: 32px;
  align-items: center;
  min-height: 214px;
  overflow: hidden;
  border: 1px solid rgba(17, 116, 123, 0.18);
  border-radius: 18px;
  padding: 28px 30px;
  color: #efffff;
  background:
    radial-gradient(circle at 92% 10%, rgba(79, 222, 208, 0.22), transparent 28%),
    radial-gradient(circle at 48% 110%, rgba(63, 188, 180, 0.16), transparent 30%),
    linear-gradient(122deg, #102f38 0%, #0b5960 54%, #07878d 100%);
  box-shadow: 0 18px 42px rgba(14, 75, 80, 0.14);
}

.overview-command-center::after {
  content: "";
  position: absolute;
  top: -54px;
  right: -30px;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(255, 255, 255, 0.025), 0 0 0 76px rgba(255, 255, 255, 0.018);
  pointer-events: none;
}

.overview-command-copy {
  position: relative;
  z-index: 1;
}

.overview-live-badge {
  width: max-content;
  gap: 8px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 5px 10px;
  color: rgba(240, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.07);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.overview-command-copy h2 {
  max-width: 520px;
  color: #fff;
  font-size: clamp(23px, 2.2vw, 34px);
  letter-spacing: -0.8px;
}

.overview-command-copy > p {
  max-width: 600px;
  margin-top: 10px;
  color: rgba(238, 255, 255, 0.7);
  font-size: 12px;
  line-height: 1.75;
}

.overview-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.overview-quick-actions .primary-button {
  color: #075d63;
  background: #fff;
  box-shadow: 0 8px 18px rgba(2, 45, 50, 0.15);
}

.overview-quick-actions .secondary-button {
  color: #ecffff;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

.overview-flow {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.overview-flow li {
  gap: 11px;
  min-height: 70px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 13px;
  padding: 11px 13px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(6px);
}

.overview-flow li b {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 9px;
  color: #aef0e9;
  background: rgba(21, 38, 42, 0.28);
  font-size: 10px;
}

.overview-flow li span {
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
}

.overview-flow strong {
  color: #fff;
  font-size: 12px;
}

.overview-flow small {
  color: rgba(235, 255, 255, 0.57);
  font-size: 10px;
}

.overview-feature-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.overview-feature-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 24px;
  gap: 12px;
  align-items: center;
  min-height: 82px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 13px 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.085);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
  text-align: left;
  backdrop-filter: blur(7px);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.overview-feature-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 22px rgba(0, 32, 36, 0.15), inset 0 1px rgba(255, 255, 255, 0.08);
}

.overview-feature-card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.overview-feature-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  color: #fff;
  background: rgba(5, 42, 47, 0.3);
  font-size: 19px;
  font-weight: 900;
}

.feature-listing .overview-feature-icon { color: #93fff1; background: rgba(17, 154, 143, 0.3); }
.feature-image .overview-feature-icon { color: #e2d1ff; background: rgba(123, 79, 192, 0.32); }
.feature-image-edit .overview-feature-icon { color: #ffd0b8; background: rgba(196, 96, 48, 0.32); }
.feature-selection .overview-feature-icon { color: #ffe08a; background: rgba(189, 127, 20, 0.3); }
.feature-store .overview-feature-icon { color: #a9dcff; background: rgba(27, 123, 174, 0.3); }

.overview-feature-copy {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
}

.overview-feature-copy strong {
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.1px;
}

.overview-feature-copy small {
  overflow: hidden;
  color: rgba(235, 255, 255, 0.62);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-feature-arrow {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.09);
  font-size: 13px;
  transition: transform 160ms ease, color 160ms ease, background 160ms ease;
}

.overview-feature-card:hover .overview-feature-arrow {
  transform: translateX(2px);
  color: #075d63;
  background: #fff;
}

.overview-portal {
  display: grid;
  gap: 18px;
}

.overview-welcome-panel {
  display: grid;
  grid-template-columns: minmax(350px, 0.95fr) minmax(620px, 1.45fr);
  gap: 24px;
  align-items: center;
  min-height: 126px;
  overflow: hidden;
  border: 1px solid #dfe8ea;
  border-radius: 16px;
  padding: 20px 24px;
  background:
    radial-gradient(circle at 6% 28%, rgba(45, 190, 178, 0.11), transparent 24%),
    linear-gradient(120deg, #ffffff, #f9fbff 58%, #f2f8f8);
  box-shadow: 0 5px 20px rgba(31, 54, 63, 0.045);
}

.overview-welcome-user {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 16px;
}

.overview-welcome-avatar {
  display: grid;
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(184, 148, 96, 0.45);
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 236, 200, 0.2), transparent 46%),
    linear-gradient(155deg, #1c1c1c 0%, #0a0a0a 100%);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 220, 170, 0.22);
}

.overview-welcome-avatar img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 16px;
}

.overview-welcome-user h2 {
  overflow: hidden;
  color: #142f37;
  font-size: 18px;
  letter-spacing: -0.25px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-welcome-user p {
  overflow: hidden;
  margin-top: 7px;
  color: #708088;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-account-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(78px, 1fr));
  align-items: center;
}

.overview-account-kpis > div {
  display: flex;
  min-width: 0;
  min-height: 62px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  border-left: 1px dashed #d3dddf;
  text-align: center;
}

.overview-account-kpis > div:first-child {
  border-left: 0;
}

.overview-account-kpis span {
  color: #677980;
  font-size: 10px;
}

.overview-account-kpis strong {
  max-width: 100%;
  overflow: hidden;
  color: #132f37;
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 800;
  letter-spacing: -0.45px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-playbook-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.45fr 1.08fr;
  gap: 14px;
}

.overview-playbook-card {
  overflow: hidden;
  border: 1px solid #e1e8eb;
  border-radius: 15px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(34, 56, 65, 0.035);
}

.overview-playbook-card.playbook-start { background: linear-gradient(145deg, #f2f8ff, #fff 52%); }
.overview-playbook-card.playbook-operate { background: linear-gradient(145deg, #f7f3ff, #fff 54%); }
.overview-playbook-card.playbook-grow { background: linear-gradient(145deg, #fff7eb, #fff 54%); }

.overview-playbook-card > header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(214, 225, 228, 0.72);
}

.overview-playbook-card > header > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: #2581e8;
  box-shadow: 0 6px 14px rgba(37, 129, 232, 0.18);
  font-size: 10px;
  font-weight: 900;
}

.playbook-operate > header > span { background: #7857dd; box-shadow: 0 6px 14px rgba(120, 87, 221, 0.18); }
.playbook-grow > header > span { background: #ee8a22; box-shadow: 0 6px 14px rgba(238, 138, 34, 0.18); }

.overview-playbook-card > header div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.overview-playbook-card > header strong {
  color: #18343c;
  font-size: 13px;
}

.overview-playbook-card > header small {
  overflow: hidden;
  color: #7d8c92;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-playbook-actions {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

.overview-playbook-actions.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.overview-playbook-actions button {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
  border: 0;
  border-radius: 9px;
  padding: 8px 9px 8px 20px;
  color: #243f47;
  background: transparent;
  text-align: left;
  transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}

.overview-playbook-actions button::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3490ef;
}

.playbook-operate .overview-playbook-actions button::before { background: #8b64ed; }
.playbook-grow .overview-playbook-actions button::before { background: #f19a37; }

.overview-playbook-actions button:hover {
  transform: translateX(2px);
  color: #06777e;
  background: rgba(8, 135, 141, 0.06);
}

.overview-playbook-actions b {
  font-size: 11px;
}

.overview-playbook-actions span {
  overflow: hidden;
  width: 100%;
  color: #7d8c92;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-resource-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.15fr) minmax(520px, 0.85fr);
  gap: 14px;
}

.overview-brand-banner,
.overview-quick-panel {
  min-height: 278px;
  overflow: hidden;
  border: 1px solid #e0e8ea;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(31, 54, 63, 0.04);
}

.overview-brand-banner {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 36px 46px;
  background:
    radial-gradient(circle at 88% 23%, rgba(88, 214, 201, 0.24), transparent 17%),
    radial-gradient(circle at 78% 84%, rgba(83, 117, 234, 0.13), transparent 22%),
    linear-gradient(135deg, #f9ffff 0%, #edf8f8 48%, #f1f4ff 100%);
}

.overview-brand-banner::after {
  content: "OZ";
  position: absolute;
  right: 42px;
  bottom: -30px;
  color: rgba(255, 255, 255, 0.085);
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.025);
  mix-blend-mode: screen;
  font-size: 150px;
  font-weight: 1000;
  letter-spacing: -15px;
  pointer-events: none;
}

.overview-banner-kicker {
  position: relative;
  z-index: 1;
  width: max-content;
  border-radius: 999px;
  padding: 5px 9px;
  color: #087f86;
  background: rgba(8, 135, 141, 0.09);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.overview-brand-banner h2 {
  position: relative;
  z-index: 1;
  margin-top: 15px;
  color: #146f9d;
  font-size: clamp(30px, 3vw, 48px);
  letter-spacing: -1.8px;
}

.overview-brand-banner p {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin-top: 10px;
  color: #5e7680;
  font-size: 13px;
  line-height: 1.75;
}

.overview-brand-banner > div {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  margin-top: 22px;
}

.overview-quick-panel {
  padding: 0 18px 18px;
}

.overview-quick-panel > header {
  display: flex;
  min-height: 55px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #e7edef;
}

.overview-quick-panel > header div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.overview-quick-panel > header i {
  width: 4px;
  height: 17px;
  border-radius: 99px;
  background: #087f86;
}

.overview-quick-panel > header strong {
  color: #17343b;
  font-size: 14px;
}

.overview-quick-panel > header > span {
  color: #8a989d;
  font-size: 9px;
}

.overview-web-shortcuts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  padding-top: 16px;
}

.overview-web-shortcuts a,
.overview-web-shortcuts button {
  display: flex;
  min-width: 0;
  min-height: 88px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #edf1f2;
  border-radius: 12px;
  padding: 9px 5px;
  color: #233e46;
  background: #fff;
  text-align: center;
  box-shadow: 0 3px 12px rgba(29, 52, 60, 0.035);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.overview-web-shortcuts a:hover,
.overview-web-shortcuts button:hover {
  transform: translateY(-2px);
  border-color: #bcdfe0;
  box-shadow: 0 9px 18px rgba(7, 127, 134, 0.1);
}

.overview-web-shortcuts i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #20b7aa, #087f86);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.overview-web-shortcuts a:nth-child(2) i,
.overview-web-shortcuts button:nth-child(6) i,
.overview-web-shortcuts button:nth-child(7) i {
  background: linear-gradient(145deg, #8a6cf0, #6542ca);
}

.overview-web-shortcuts a:nth-child(3) i,
.overview-web-shortcuts button:nth-child(8) i {
  background: linear-gradient(145deg, #ffb544, #ee7920);
}

.overview-web-shortcuts span {
  color: #344e56;
  font-size: 9px;
  line-height: 1.35;
}

.overview-learning-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(520px, 1.08fr);
  gap: 14px;
}

.overview-learning-panel {
  min-height: 288px;
  overflow: hidden;
  border: 1px solid #e0e8ea;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(31, 54, 63, 0.04);
}

.overview-learning-panel > header {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid #e7edef;
}

.overview-learning-panel > header > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.overview-learning-panel > header i {
  display: block;
  width: 4px;
  height: 18px;
  border-radius: 99px;
  background: linear-gradient(#20b7aa, #087f86);
}

.overview-learning-panel > header strong {
  color: #17343b;
  font-size: 14px;
}

.overview-learning-panel > header > span {
  border-radius: 999px;
  padding: 5px 9px;
  color: #778990;
  background: #f1f5f6;
  font-size: 9px;
}

.overview-news-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.overview-news-status,
.overview-news-header-actions > span {
  border-radius: 999px;
  padding: 5px 9px;
  color: #778990;
  background: #f1f5f6;
  font-size: 9px;
  white-space: nowrap;
}

.overview-news-status.ok {
  color: #087f86;
  background: #e8f7f5;
}

.overview-news-status.warn {
  color: #9a6b1a;
  background: #fff6df;
}

.overview-news-refresh {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid #d8e3e5;
  border-radius: 50%;
  color: #087f86;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: transform 0.2s ease, background 0.2s ease;
}

.overview-news-refresh:hover {
  background: #edf8f7;
  transform: rotate(25deg);
}

.overview-news-refresh:disabled {
  cursor: wait;
  opacity: 0.55;
}

.overview-news-refresh.is-loading {
  animation: overview-news-spin 0.8s linear infinite;
}

@keyframes overview-news-spin {
  to { transform: rotate(360deg); }
}

.overview-news-panel-body {
  padding: 13px 16px 16px;
}

.overview-news-source-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.overview-news-source-note span {
  color: #087f86;
  font-size: 10px;
  font-weight: 800;
}

.overview-news-source-note small {
  color: #8b999d;
  font-size: 9px;
  text-align: right;
}

.overview-news-list {
  display: grid;
  gap: 7px;
  max-height: 222px;
  overflow: auto;
  padding-right: 2px;
}

.overview-news-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 9px 9px 9px 11px;
  border: 1px solid #e6edef;
  border-radius: 10px;
  background: linear-gradient(120deg, #fbfdfd, #fff);
}

.overview-news-item[data-ozon-news-url] {
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.overview-news-item[data-ozon-news-url]:hover,
.overview-news-item[data-ozon-news-url]:focus-visible {
  border-color: #b8dfe0;
  box-shadow: 0 6px 16px rgba(8, 127, 134, 0.08);
  outline: none;
  transform: translateY(-1px);
}

.overview-news-item-main {
  min-width: 0;
  flex: 1;
}

.overview-news-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #8b999d;
  font-size: 9px;
}

.overview-news-item-meta span {
  overflow: hidden;
  color: #087f86;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-news-item-meta time {
  flex: none;
}

.overview-news-item-main > a {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #29444c;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-news-item-main > a:hover {
  color: #087f86;
}

.overview-news-item-main p {
  display: -webkit-box;
  overflow: hidden;
  margin: 3px 0 0;
  color: #819095;
  font-size: 9px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.overview-news-item-link {
  display: grid;
  width: 25px;
  height: 25px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  color: #087f86;
  background: #edf8f7;
  font-size: 15px;
  text-decoration: none;
}

.overview-news-item-link:hover {
  color: #fff;
  background: #087f86;
}

.overview-news-empty {
  display: flex;
  min-height: 178px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: #849298;
  text-align: center;
}

.overview-news-empty-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #cfe4e5;
  border-radius: 12px;
  color: #087f86;
  background: #edf8f7;
  font-size: 16px;
  font-weight: 900;
}

.overview-news-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid #d9eeee;
  border-top-color: #087f86;
  border-radius: 50%;
  animation: overview-news-spin 0.8s linear infinite;
}

.overview-news-empty strong {
  color: #29444c;
  font-size: 11px;
}

.overview-news-empty small {
  font-size: 9px;
}

.overview-faq-placeholder {
  display: flex;
  min-height: 228px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px 34px;
  text-align: center;
}

.overview-learning-empty-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #cfe4e5;
  border-radius: 14px;
  color: #087f86;
  background: #edf8f7;
  font-size: 19px;
  font-weight: 900;
}

.overview-faq-placeholder > strong {
  margin-top: 13px;
  color: #29444c;
  font-size: 12px;
}

.overview-faq-placeholder > p {
  max-width: 430px;
  margin-top: 7px;
  color: #849298;
  font-size: 10px;
  line-height: 1.65;
}

.overview-placeholder-lines {
  display: grid;
  width: min(100%, 420px);
  gap: 7px;
  margin-top: 18px;
}

.overview-placeholder-lines span {
  height: 7px;
  border-radius: 99px;
  background: linear-gradient(90deg, #edf2f3, #f7f9fa, #edf2f3);
}

.overview-placeholder-lines span:nth-child(2) { width: 88%; }
.overview-placeholder-lines span:nth-child(3) { width: 94%; }
.overview-placeholder-lines span:nth-child(4) { width: 72%; }

.overview-video-placeholders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  padding: 20px;
}

.overview-video-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.overview-video-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(119, 140, 169, 0.16);
  border-radius: 12px;
  background: #11151c;
  box-shadow: 0 10px 24px rgba(35, 43, 55, 0.1);
  object-fit: cover;
}

.overview-video-placeholders strong {
  overflow: hidden;
  margin-top: 11px;
  color: #304a52;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-video-placeholders small {
  overflow: hidden;
  margin-top: 4px;
  color: #929fa4;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-card {
  position: relative;
  overflow: hidden;
  padding: 18px 19px;
}

.metric-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #0a888e, #3bbbad);
  opacity: 0.72;
}

.metric-card strong {
  color: #17343b;
  font-size: 30px;
  letter-spacing: -1px;
}

.store-realtime-panel {
  border-radius: 16px;
}

.auth-gate {
  background:
    radial-gradient(circle at 18% 12%, rgba(34, 194, 180, 0.24), transparent 30%),
    linear-gradient(135deg, #0d252c, #08171c 72%);
}

.auth-card {
  border-color: rgba(213, 232, 233, 0.9);
  border-radius: 18px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.3);
}

.auth-card .eyebrow {
  color: #087f86;
}

.auth-subtitle,
.auth-form label {
  color: var(--muted);
}

.auth-tabs {
  background: #edf3f4;
}

.auth-tabs button {
  color: #697a81;
}

.auth-tabs button.active {
  color: #fff;
  background: #087f86;
}

.auth-form input {
  color: var(--ink);
  border-color: var(--line);
  background: #f8fafb;
}

.auth-form input:focus {
  border-color: #0a9298;
}

.auth-message {
  color: #a25c08;
}

.sidebar-backdrop {
  border: 0;
}

@media (max-width: 1280px) {
  .overview-command-center {
    grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
    gap: 22px;
  }

  .workspace-subtitle,
  .top-actions > .link-button {
    display: none;
  }

  .overview-welcome-panel {
    grid-template-columns: minmax(310px, 0.8fr) minmax(510px, 1.2fr);
  }

  .overview-resource-grid {
    grid-template-columns: minmax(360px, 1fr) minmax(470px, 1fr);
  }
}

@media (max-width: 960px) {
  body.sidebar-open {
    overflow: hidden;
  }

  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    width: min(286px, calc(100vw - 44px));
    height: 100vh;
    transform: translateX(-105%);
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.24);
    transition: transform 200ms ease;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-backdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: block;
    background: rgba(7, 18, 22, 0.54);
    backdrop-filter: blur(2px);
  }

  .sidebar-menu-button {
    display: block;
  }

  .nav-list {
    grid-template-columns: 1fr;
  }

  .nav-section-label,
  .data-market-nav-group,
  .handbook-nav-group {
    grid-column: 1;
  }

  .workspace {
    padding: 14px 16px 36px;
  }

  .topbar {
    top: 58px;
  }

  .top-actions .primary-button,
  .top-actions .secondary-button {
    width: auto;
  }

  .overview-command-center {
    grid-template-columns: 1fr;
  }

  .overview-welcome-panel,
  .overview-resource-grid,
  .overview-learning-grid {
    grid-template-columns: 1fr;
  }

  .overview-playbook-grid {
    grid-template-columns: 1fr 1fr;
  }

  .overview-playbook-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .workspace > .member-feature-gate {
    top: 146px;
  }

  .workspace {
    gap: 14px;
    padding: 10px 10px 28px;
  }

  .topbar {
    position: static;
    align-items: stretch;
    min-height: 0;
    padding: 12px;
  }

  .workspace > .workspace-taskbar {
    top: 6px;
    min-height: 42px;
    margin-bottom: -4px;
  }

  .workspace-task-tab {
    max-width: 150px;
    padding: 0 9px;
  }

  .workspace-heading-mark,
  .workspace-heading .eyebrow {
    display: none;
  }

  .workspace-heading h1 {
    font-size: 18px;
  }

  .top-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
  }

  .topbar-store-pill {
    min-width: 0;
  }

  .top-actions .primary-button,
  .top-actions .link-button {
    display: none;
  }

  .top-actions .icon-button {
    width: 40px;
  }

  .overview-command-center {
    min-height: 0;
    gap: 24px;
    padding: 24px 20px;
  }

  .overview-command-copy h2 {
    font-size: 24px;
  }

  .overview-quick-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .overview-quick-actions .primary-button,
  .overview-quick-actions .secondary-button {
    width: 100%;
  }

  .overview-flow,
  .overview-feature-grid {
    grid-template-columns: 1fr 1fr;
  }

  .overview-flow li {
    align-items: flex-start;
    flex-direction: column;
  }

  .overview-feature-card {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    min-height: 76px;
    padding: 11px;
  }

  .overview-feature-icon {
    width: 40px;
    height: 40px;
  }

  .overview-feature-arrow {
    display: none;
  }

  .overview-portal {
    gap: 14px;
  }

  .overview-welcome-panel {
    gap: 18px;
    padding: 18px;
  }

  .overview-account-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .overview-account-kpis > div:nth-child(4) {
    border-left: 0;
  }

  .overview-account-kpis > div:nth-child(n + 4) {
    border-top: 1px dashed #d3dddf;
  }

  .overview-playbook-grid {
    grid-template-columns: 1fr;
  }

  .overview-playbook-card:last-child {
    grid-column: auto;
  }

  .overview-brand-banner {
    min-height: 260px;
    padding: 30px 24px;
  }

  .overview-brand-banner::after {
    right: 24px;
    font-size: 110px;
  }

  .overview-web-shortcuts {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .overview-web-shortcuts a,
  .overview-web-shortcuts button {
    min-height: 82px;
  }

  .overview-video-placeholders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .overview-welcome-user {
    align-items: flex-start;
  }

  .overview-welcome-avatar {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    border-radius: 17px;
  }

  .overview-welcome-avatar img {
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }

  .overview-welcome-user h2 {
    white-space: normal;
  }

  .overview-playbook-actions.compact {
    grid-template-columns: 1fr;
  }

  .overview-brand-banner > div {
    align-items: stretch;
    flex-direction: column;
  }

  .overview-web-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-video-placeholders {
    grid-template-columns: 1fr;
  }
}

/* Billing wallet, manual QR recharge and agent accounting */
.workspace > [data-view-panel="billing"] {
  width: calc(100% - 60px);
  max-width: none;
}

.billing-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 30px 14px;
  padding: 24px 26px;
  border: 1px solid rgba(204, 190, 151, .72);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 12%, rgba(205, 171, 85, .18), transparent 32%),
    linear-gradient(135deg, #fffdf7, #f5f0e4);
}
.billing-page-heading h2 { margin: 5px 0 6px; color: #26353b; }
.billing-page-heading p:last-child { max-width: 760px; margin: 0; color: #738083; font-size: 11px; line-height: 1.6; }
.billing-account-grid {
  display: grid;
  grid-template-columns: 1.25fr repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 30px 14px;
}
.billing-account-grid article {
  min-width: 0;
  padding: 16px 17px;
  border: 1px solid #e5e0d2;
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 9px 24px rgba(43, 51, 51, .05);
}
.billing-account-grid article span,
.billing-account-grid article small { display: block; color: #84908e; font-size: 9px; line-height: 1.45; }
.billing-account-grid article strong { display: block; overflow: hidden; margin: 9px 0 6px; color: #263d3c; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.billing-account-grid .billing-balance-card { border-color: #273e3e; background: linear-gradient(145deg, #294442, #172b2b); }
.billing-account-grid .billing-balance-card span,
.billing-account-grid .billing-balance-card small { color: rgba(255, 255, 255, .65); }
.billing-account-grid .billing-balance-card strong { color: #f7d77d; font-size: 25px; }
.billing-account-grid small.warning, .billing-low-balance { color: #c25549 !important; }
.billing-account-grid small.positive { color: #7ed7bd; }
.billing-recharge-grid,
.billing-history-grid {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: 12px;
  margin: 0 30px 14px;
}
.billing-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.billing-recharge-grid > .panel,
.billing-history-grid > .panel,
.billing-management .panel { margin: 0; }
.billing-payment-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0 18px 12px; }
.billing-payment-methods button {
  padding: 10px;
  border: 1px solid #dfe5e1;
  border-radius: 11px;
  color: #667876;
  background: #f7f9f7;
  font-weight: 750;
}
.billing-payment-methods button.active { border-color: #244a47; color: #fff; background: #244a47; }
.billing-qr-stage {
  display: grid;
  place-items: center;
  min-height: 230px;
  margin: 0 18px 12px;
  padding: 15px;
  border: 1px dashed #d7d4c7;
  border-radius: 16px;
  background: #faf8f1;
}
.billing-qr-stage img { width: min(220px, 100%); max-height: 250px; object-fit: contain; border-radius: 12px; background: #fff; }
.billing-qr-stage div { max-width: 220px; color: #9a8f75; font-size: 11px; line-height: 1.6; text-align: center; }
.billing-payee-panel > p { margin: 0; padding: 0 18px 17px; color: #8b806a; font-size: 10px; line-height: 1.55; }
.billing-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; padding: 0 18px 14px; }
.billing-form-grid label,
.billing-payment-profile-form > label,
.billing-profile-upload-grid label { display: grid; gap: 6px; color: #5f706d; font-size: 10px; font-weight: 750; }
.billing-form-grid input,
.billing-payment-profile-form input {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #dfe4df;
  border-radius: 10px;
  color: #2e4140;
  background: #fff;
}
.billing-form-grid .billing-note-field { grid-column: 1 / -1; }
.billing-form-grid label small { color: #99a29e; font-size: 8px; font-weight: 500; }
.billing-recharge-form footer,
.billing-settings-form footer,
.billing-payment-profile-form footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px 17px;
  border-top: 1px solid #edf0ec;
}
.billing-recharge-form footer span,
.billing-settings-form footer span,
.billing-payment-profile-form footer span { color: #87918e; font-size: 10px; line-height: 1.5; }
.billing-list { max-height: 370px; overflow: auto; padding: 0 18px 14px; }
.billing-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #edf0ec; }
.billing-list-row div { display: grid; min-width: 0; gap: 3px; }
.billing-list-row strong { overflow: hidden; color: #314745; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.billing-list-row span, .billing-list-row small { color: #8a9591; font-size: 9px; line-height: 1.45; }
.billing-list-row > b { color: #536461; font-size: 11px; white-space: nowrap; }
.billing-list-row > b.positive, .billing-status-approved { color: #148564; }
.billing-list-row > b.negative, .billing-status-rejected { color: #c35449; }
.billing-status-pending { color: #a36d0b; }
.billing-empty { padding: 30px 16px; color: #98a19d; font-size: 11px; text-align: center; }
.billing-management { display: grid; gap: 13px; margin: 20px 30px 30px; padding-top: 20px; border-top: 1px solid #e4dfd0; }
.billing-management > header { padding: 4px 2px; }
.billing-management > header h2 { margin: 5px 0; color: #293d3c; }
.billing-management > header p:last-child { margin: 0; color: #788683; font-size: 10px; }
.billing-management-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.billing-management-metrics article { padding: 14px; border: 1px solid #e3e5df; border-radius: 14px; background: #fff; }
.billing-management-metrics span { display: block; color: #89938f; font-size: 9px; }
.billing-management-metrics strong { display: block; overflow: hidden; margin-top: 8px; color: #2c4240; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.billing-management-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.billing-settings-form .billing-checkbox { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 10px; border: 1px solid #e3e7e2; border-radius: 10px; }
.billing-settings-form .billing-checkbox input { width: auto; }
.billing-payment-profile-form > label { margin: 0 18px 12px; }
.billing-profile-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 18px 12px; }
.billing-profile-upload-grid label { align-content: start; padding: 12px; border: 1px solid #e4e6df; border-radius: 12px; background: #fafbf8; }
.billing-profile-upload-grid img { width: 100%; height: 160px; margin-top: 5px; object-fit: contain; border-radius: 9px; background: #fff; }
.billing-customer-table { min-width: 1080px; }
.billing-customer-table td > strong,
.billing-customer-table td > small { display: block; }
.billing-row-actions { display: grid; grid-template-columns: 80px auto auto; gap: 5px; min-width: 225px; }
.billing-row-actions input { width: 80px; padding: 7px; border: 1px solid #dce2dd; border-radius: 8px; }
.billing-row-actions button { padding: 7px 8px; border: 1px solid #dce2dd; border-radius: 8px; color: #445a57; background: #fff; font-size: 9px; }
.billing-department-fee-actions { grid-template-columns: 80px auto; min-width: 150px; }
.billing-muted { color: #9aa5a3; font-size: 10px; }
.billing-review-list { display: grid; gap: 8px; padding: 0 18px 16px; }
.billing-review-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e2e6e1;
  border-radius: 12px;
  background: #fff;
}
.billing-review-card > div:first-child { display: grid; gap: 3px; }
.billing-review-card strong { color: #2d4441; font-size: 11px; }
.billing-review-card span, .billing-review-card small { color: #8b9592; font-size: 9px; }
.billing-review-card a { color: #8c6818; font-size: 9px; text-decoration: underline; }
.billing-review-card > b { font-size: 10px; }
.billing-review-card.is-reviewed { opacity: .7; }
.billing-review-actions { display: flex; gap: 6px; }
.billing-review-actions button { padding: 7px 9px; border: 1px solid #dfe3df; border-radius: 8px; background: #fff; font-size: 9px; }
.billing-review-actions .primary-button { color: #fff; background: #294845; }

@media (max-width: 1180px) {
  .billing-account-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .billing-management-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .workspace > [data-view-panel="billing"] { width: calc(100% - 28px); }
  .billing-page-heading,
  .billing-account-grid,
  .billing-recharge-grid,
  .billing-history-grid,
  .billing-management { margin-inline: 14px; }
  .billing-page-heading { align-items: flex-start; flex-direction: column; }
  .billing-account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .billing-recharge-grid,
  .billing-history-grid,
  .billing-management-config { grid-template-columns: 1fr; }
  .billing-review-card { grid-template-columns: 1fr auto; }
  .billing-review-actions { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .billing-account-grid,
  .billing-management-metrics { grid-template-columns: 1fr; }
  .billing-form-grid,
  .billing-profile-upload-grid { grid-template-columns: 1fr; }
  .billing-recharge-form footer,
  .billing-settings-form footer,
  .billing-payment-profile-form footer { align-items: stretch; flex-direction: column; }
}

/* Public login landing page */
body.auth-landing-open {
  overflow: hidden;
}

body.auth-landing-open .app-shell {
  display: none;
}

.auth-gate {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  color: #17343b;
  background: #fff;
  scroll-behavior: smooth;
}

.auth-landing {
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% 8%, rgba(43, 193, 178, 0.1), transparent 22%),
    #fff;
}

.auth-landing-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
  min-height: 76px;
  padding: 12px max(28px, calc((100vw - 1320px) / 2));
  border-bottom: 1px solid rgba(218, 229, 232, 0.78);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 24px rgba(32, 62, 72, 0.045);
  backdrop-filter: blur(16px);
}

.auth-landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #17343b;
}

.auth-landing-logo {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  overflow: hidden;
  border: 1px solid rgba(184, 148, 96, 0.45);
  border-radius: 12px;
  object-fit: cover;
  background: #0a0a0a;
  box-shadow:
    0 8px 18px rgba(23, 52, 59, 0.12),
    inset 0 1px 0 rgba(255, 220, 170, 0.22);
}

.auth-landing-brand strong {
  display: flex;
  flex-direction: column;
  color: #18343c;
  font-size: 16px;
  line-height: 1.1;
}

.auth-landing-brand small {
  margin-top: 4px;
  color: #71838a;
  font-size: 9px;
  font-weight: 600;
}

.auth-landing-header nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.3vw, 36px);
}

.auth-landing-header nav a {
  position: relative;
  padding: 9px 0;
  color: #526a73;
  font-size: 12px;
  font-weight: 700;
}

.auth-landing-header nav a::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 1px;
  left: 50%;
  height: 2px;
  border-radius: 99px;
  background: #0c9992;
  transition: right 160ms ease, left 160ms ease;
}

.auth-landing-header nav a:hover {
  color: #087f86;
}

.auth-landing-header nav a:hover::after {
  right: 0;
  left: 0;
}

.auth-landing-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-landing-header-actions > a,
.auth-landing-header-actions > button {
  min-height: 38px;
  border-radius: 9px;
  padding: 0 13px;
  font-size: 11px;
  font-weight: 800;
}

.auth-landing-header-actions > a {
  display: inline-flex;
  align-items: center;
  border: 1px solid #cfe3e5;
  color: #087f86;
  background: #f1f8f8;
}

.auth-landing-login {
  border: 1px solid #b9d8da;
  color: #087f86;
  background: #fff;
}

.auth-landing-register {
  border: 1px solid #087f86;
  color: #fff;
  background: linear-gradient(135deg, #12a99f, #087f86);
  box-shadow: 0 7px 16px rgba(8, 127, 134, 0.18);
}

.auth-landing-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, 0.92fr) minmax(600px, 1.08fr);
  gap: 36px;
  align-items: center;
  width: min(1320px, calc(100% - 56px));
  min-height: calc(100vh - 76px);
  margin: 0 auto;
  padding: 64px 0 72px;
}

.auth-landing-hero::before {
  content: "";
  position: absolute;
  top: 8%;
  left: -15%;
  width: 72%;
  height: 75%;
  opacity: 0.36;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(8, 127, 134, 0.12) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 70%, rgba(8, 127, 134, 0.08) 0 2px, transparent 3px);
  background-size: 54px 54px, 76px 76px;
  pointer-events: none;
}

.auth-landing-hero-copy {
  position: relative;
  z-index: 2;
  padding-left: 18px;
}

.auth-landing-kicker,
.auth-landing-section-heading > span,
.auth-showcase-copy > span {
  display: inline-flex;
  width: max-content;
  border-radius: 999px;
  padding: 6px 10px;
  color: #087f86;
  background: #eaf7f6;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
}

.auth-landing-hero-copy h1 {
  max-width: 650px;
  margin: 20px 0 0;
  color: #153740;
  font-size: clamp(44px, 4.3vw, 66px);
  line-height: 1.12;
  letter-spacing: -2.6px;
}

.auth-landing-hero-copy > p {
  max-width: 610px;
  margin: 22px 0 0;
  color: #617780;
  font-size: 15px;
  line-height: 1.9;
}

.auth-landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.auth-landing-hero-actions > button,
.auth-landing-hero-actions > a,
.auth-showcase-copy > button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 900;
}

.auth-landing-hero-actions > button,
.auth-showcase-copy > button {
  border: 1px solid #087f86;
  color: #fff;
  background: linear-gradient(135deg, #12a99f, #087f86);
  box-shadow: 0 10px 22px rgba(8, 127, 134, 0.2);
}

.auth-landing-hero-actions > a {
  border: 1px solid #b8d8da;
  color: #087f86;
  background: #fff;
}

.auth-landing-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 26px;
  color: #71858c;
  font-size: 10px;
  font-weight: 700;
}

.auth-landing-trust-row span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.auth-landing-trust-row i {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  color: #087f86;
  background: #dff4f1;
  font-size: 9px;
  font-style: normal;
}

.auth-landing-hero-side {
  position: relative;
  display: grid;
  min-height: 590px;
  place-items: center;
}

.auth-hero-illustration {
  position: absolute;
  inset: 8px -35px 0 0;
  display: grid;
  place-items: center;
}

.auth-hero-illustration svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 25px 45px rgba(8, 82, 88, 0.13));
}

.auth-card {
  position: relative;
  z-index: 4;
  width: min(390px, calc(100% - 44px));
  margin-left: 130px;
  padding: 24px 26px;
  border: 1px solid rgba(207, 227, 229, 0.96);
  border-radius: 20px;
  color: #17343b;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 28px 70px rgba(15, 72, 77, 0.22);
  backdrop-filter: blur(18px);
}

.auth-card .auth-brand-mark {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid rgba(184, 148, 96, 0.4);
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 236, 200, 0.18), transparent 42%),
    linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 100%);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 220, 170, 0.2);
}

.auth-card .auth-brand-mark img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 10px;
}

.auth-card .eyebrow {
  color: #087f86;
  font-size: 8px;
  letter-spacing: 1px;
}

.auth-card h2 {
  margin: 5px 0 7px;
  color: #17343b;
  font-size: 22px;
  letter-spacing: -0.5px;
}

.auth-card .auth-subtitle {
  min-height: 38px;
  margin: 0 0 15px;
  color: #70838a;
  font-size: 11px;
  line-height: 1.65;
}

.auth-card .auth-tabs {
  margin-bottom: 14px;
  border-radius: 10px;
  padding: 4px;
  background: #edf4f4;
}

.auth-card .auth-tabs button {
  min-height: 34px;
  border-radius: 8px;
  color: #6d8087;
  font-size: 11px;
  font-weight: 800;
}

.auth-card .auth-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, #12a99f, #087f86);
  box-shadow: 0 5px 12px rgba(8, 127, 134, 0.16);
}

.auth-card .auth-form {
  gap: 10px;
}

.auth-card .auth-form label {
  gap: 5px;
  color: #62777f;
  font-size: 10px;
  font-weight: 700;
}

.auth-card .auth-form input {
  min-height: 40px;
  border-color: #d8e4e6;
  border-radius: 9px;
  color: #17343b;
  background: #f8fafb;
  font-size: 12px;
}

.auth-card .auth-form input:focus {
  border-color: #0a9298;
  box-shadow: 0 0 0 3px rgba(10, 146, 152, 0.09);
}

.auth-card .auth-submit {
  min-height: 42px;
  margin-top: 3px;
}

.auth-card .auth-message {
  min-height: 16px;
  margin-top: 9px;
  font-size: 10px;
}

.auth-landing-section,
.auth-landing-showcase {
  scroll-margin-top: 88px;
}

.auth-landing-section {
  padding: 100px max(28px, calc((100vw - 1180px) / 2));
}

.auth-feature-section {
  border-top: 1px solid #edf2f3;
  border-bottom: 1px solid #edf2f3;
  background: linear-gradient(180deg, #fbfdfd, #fff);
}

.auth-landing-section-heading {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.auth-landing-section-heading h2 {
  margin: 15px 0 0;
  color: #18343c;
  font-size: clamp(30px, 3.2vw, 44px);
  letter-spacing: -1.4px;
}

.auth-landing-section-heading p {
  max-width: 680px;
  margin: 13px 0 0;
  color: #6d8188;
  font-size: 13px;
  line-height: 1.8;
}

.auth-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 54px;
}

.auth-feature-grid article {
  display: flex;
  min-height: 250px;
  align-items: center;
  flex-direction: column;
  border: 1px solid #e3ecee;
  border-radius: 18px;
  padding: 34px 28px;
  background: #fff;
  text-align: center;
  box-shadow: 0 12px 32px rgba(30, 63, 73, 0.055);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.auth-feature-grid article:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 42px rgba(8, 127, 134, 0.1);
}

.auth-feature-grid article > i {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(145deg, #20b8aa, #087f86);
  box-shadow: 0 12px 24px rgba(8, 127, 134, 0.2);
  font-size: 22px;
  font-style: normal;
  font-weight: 900;
}

.auth-feature-grid article:nth-child(2) > i { background: linear-gradient(145deg, #8467e8, #6340c8); box-shadow: 0 12px 24px rgba(99, 64, 200, 0.2); }
.auth-feature-grid article:nth-child(3) > i { background: linear-gradient(145deg, #ffb44b, #ee7920); box-shadow: 0 12px 24px rgba(238, 121, 32, 0.2); }

.auth-feature-grid h3 {
  margin: 23px 0 0;
  color: #1f3b43;
  font-size: 18px;
}

.auth-feature-grid p {
  margin: 13px 0 0;
  color: #73868d;
  font-size: 11px;
  line-height: 1.85;
}

.auth-landing-showcase {
  display: grid;
  grid-template-columns: minmax(430px, 1fr) minmax(430px, 0.9fr);
  gap: 76px;
  align-items: center;
  width: min(1180px, calc(100% - 56px));
  min-height: 760px;
  margin: 0 auto;
  padding: 92px 0;
}

.auth-showcase-visual {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 56px 190px 56px 190px;
  background:
    radial-gradient(circle at 25% 30%, rgba(32, 184, 170, 0.2), transparent 26%),
    linear-gradient(145deg, #f0f8f8, #eef2fb);
}

.auth-showcase-chart {
  position: absolute;
  top: 88px;
  right: 55px;
  left: 55px;
  height: 210px;
  border: 1px solid #d7e5e7;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 20px 46px rgba(35, 68, 78, 0.1);
}

.auth-showcase-chart > span {
  position: absolute;
  bottom: 38px;
  width: 11%;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(#58cfc3, #0b908c);
}

.auth-showcase-chart > span:nth-child(1) { left: 12%; height: 28%; }
.auth-showcase-chart > span:nth-child(2) { left: 32%; height: 52%; }
.auth-showcase-chart > span:nth-child(3) { left: 52%; height: 43%; }
.auth-showcase-chart > span:nth-child(4) { left: 72%; height: 71%; }
.auth-showcase-chart > i { position: absolute; right: 24px; top: 22px; width: 58px; height: 9px; border-radius: 99px; background: #dce8e9; }

.auth-showcase-product {
  position: absolute;
  display: flex;
  width: 138px;
  min-height: 92px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  border: 1px solid #e1eaec;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(31, 63, 73, 0.1);
}

.auth-showcase-product b { color: #087f86; font-size: 22px; }
.auth-showcase-product span { color: #76898f; font-size: 9px; }
.auth-showcase-product.product-a { bottom: 74px; left: 34px; }
.auth-showcase-product.product-b { bottom: 44px; left: calc(50% - 69px); }
.auth-showcase-product.product-c { right: 34px; bottom: 74px; }

.auth-showcase-copy h2 {
  margin: 18px 0 0;
  color: #18343c;
  font-size: clamp(34px, 3.4vw, 48px);
  letter-spacing: -1.6px;
}

.auth-showcase-copy > p {
  max-width: 560px;
  margin: 18px 0 0;
  color: #667b83;
  font-size: 13px;
  line-height: 1.9;
}

.auth-showcase-copy > ul {
  display: grid;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.auth-showcase-copy > ul li {
  display: flex;
  align-items: center;
  gap: 14px;
}

.auth-showcase-copy > ul i {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #20b8aa, #087f86);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}

.auth-showcase-copy > ul div { display: flex; flex-direction: column; gap: 4px; }
.auth-showcase-copy > ul strong { color: #2b464e; font-size: 13px; }
.auth-showcase-copy > ul small { color: #84949a; font-size: 10px; }
.auth-showcase-copy > button { margin-top: 30px; }

.listing-showcase {
  border-top: 1px solid #edf2f3;
}

.auth-listing-capabilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 30px;
}

.auth-listing-capabilities > div {
  display: flex;
  min-height: 102px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #e3ebed;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(31, 63, 73, 0.055);
}

.auth-listing-capabilities b { color: #087f86; font-size: 19px; }
.auth-listing-capabilities span { color: #778a91; font-size: 9px; text-align: center; }

.listing-visual {
  border-radius: 190px 56px 190px 56px;
  background:
    radial-gradient(circle at 78% 70%, rgba(132, 103, 232, 0.16), transparent 27%),
    linear-gradient(145deg, #f2f8f8, #f1effb);
}

.auth-listing-window {
  position: absolute;
  top: 96px;
  right: 54px;
  left: 54px;
  display: grid;
  gap: 14px;
  border: 1px solid #dbe6e8;
  border-radius: 22px;
  padding: 42px 34px 34px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 46px rgba(38, 66, 78, 0.12);
}

.auth-listing-window::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 21px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #20b8aa;
  box-shadow: 17px 0 #f3ad46, 34px 0 #8264e5;
}

.auth-listing-window > span { height: 11px; border-radius: 99px; background: #dce7e8; }
.auth-listing-window > span:nth-child(2) { width: 82%; }
.auth-listing-window > span:nth-child(3) { width: 91%; }
.auth-listing-window > span:nth-child(4) { width: 65%; }
.auth-listing-window > b { display: grid; width: 46px; height: 46px; place-items: center; justify-self: end; border-radius: 14px; color: #fff; background: #087f86; font-size: 22px; }

.auth-listing-status {
  position: absolute;
  border: 1px solid #dfebec;
  border-radius: 999px;
  padding: 10px 15px 10px 34px;
  color: #547079;
  background: #fff;
  box-shadow: 0 10px 26px rgba(31, 63, 73, 0.09);
  font-size: 10px;
  font-weight: 800;
}

.auth-listing-status::before { content: "✓"; position: absolute; left: 12px; color: #0c9992; }
.auth-listing-status.status-one { bottom: 112px; left: 36px; }
.auth-listing-status.status-two { bottom: 63px; left: calc(50% - 62px); }
.auth-listing-status.status-three { right: 32px; bottom: 112px; }

.auth-landing-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  min-height: 130px;
  padding: 28px max(28px, calc((100vw - 1180px) / 2));
  color: rgba(235, 248, 248, 0.72);
  background: #0d2b32;
}

.auth-landing-footer .auth-landing-brand strong { color: #fff; }
.auth-landing-footer .auth-landing-brand small { color: rgba(235, 248, 248, 0.52); }
.auth-landing-footer p { font-size: 11px; }
.auth-landing-footer > button { min-height: 40px; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; padding: 0 18px; color: #fff; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 800; }

@media (max-width: 1180px) {
  .auth-landing-header nav {
    display: none;
  }

  .auth-landing-header {
    grid-template-columns: auto 1fr;
  }

  .auth-landing-header-actions {
    justify-content: flex-end;
  }

  .auth-landing-hero {
    grid-template-columns: minmax(360px, 0.8fr) minmax(500px, 1.2fr);
  }

  .auth-card {
    margin-left: 80px;
  }
}

@media (max-width: 920px) {
  .auth-landing-header-actions > a {
    display: none;
  }

  .auth-landing-hero {
    grid-template-columns: 1fr;
    padding-top: 70px;
  }

  .auth-landing-hero-copy {
    max-width: 720px;
    padding-left: 0;
  }

  .auth-landing-hero-side {
    min-height: 600px;
  }

  .auth-card {
    margin-left: 0;
  }

  .auth-hero-illustration {
    inset: 0;
    opacity: 0.58;
  }

  .auth-feature-grid,
  .auth-landing-showcase {
    grid-template-columns: 1fr;
  }

  .auth-landing-showcase {
    gap: 52px;
    min-height: 0;
  }

  .listing-showcase .auth-showcase-copy {
    order: 1;
  }

  .listing-showcase .auth-showcase-visual {
    order: 2;
  }
}

@media (max-width: 640px) {
  .auth-landing-header {
    min-height: 66px;
    padding: 10px 14px;
  }

  .auth-landing-brand strong {
    font-size: 13px;
  }

  .auth-landing-brand small {
    display: none;
  }

  .auth-landing-logo {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .auth-landing-header-actions {
    gap: 5px;
  }

  .auth-landing-header-actions > button {
    min-height: 34px;
    padding: 0 9px;
    font-size: 10px;
  }

  .auth-landing-hero {
    width: min(100% - 28px, 1320px);
    padding: 52px 0 58px;
  }

  .auth-landing-hero-copy h1 {
    font-size: clamp(36px, 12vw, 48px);
    letter-spacing: -1.7px;
  }

  .auth-landing-hero-copy > p {
    font-size: 13px;
  }

  .auth-landing-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .auth-landing-trust-row {
    gap: 10px;
  }

  .auth-landing-hero-side {
    min-height: 540px;
  }

  .auth-hero-illustration {
    opacity: 0.28;
  }

  .auth-card {
    width: 100%;
    padding: 22px;
  }

  .auth-landing-section {
    padding: 74px 14px;
  }

  .auth-feature-grid {
    gap: 14px;
    margin-top: 36px;
  }

  .auth-feature-grid article {
    min-height: 220px;
  }

  .auth-landing-showcase {
    width: calc(100% - 28px);
    padding: 72px 0;
  }

  .auth-showcase-visual {
    min-height: 420px;
    border-radius: 40px 120px 40px 120px;
  }

  .auth-showcase-chart,
  .auth-listing-window {
    right: 24px;
    left: 24px;
  }

  .auth-showcase-product {
    width: 105px;
  }

  .auth-showcase-product.product-a { left: 12px; }
  .auth-showcase-product.product-b { left: calc(50% - 52px); }
  .auth-showcase-product.product-c { right: 12px; }

  .auth-listing-capabilities {
    grid-template-columns: 1fr;
  }

  .auth-listing-status.status-one { left: 12px; }
  .auth-listing-status.status-two { left: calc(50% - 62px); }
  .auth-listing-status.status-three { right: 12px; }

  .auth-landing-footer {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .auth-landing-footer .auth-landing-brand {
    justify-content: center;
  }
}

/* Membership and administrator control center */
.nav-item[data-view="membership"]::before,
.nav-item[data-view="admin-users"]::before,
.nav-item.erp-order-nav-toggle::before,
.listing-nav-toggle::before {
  content: "";
  font-size: 0;
}

.admin-nav-item[hidden],
.topbar-admin-button[hidden] { display: none !important; }

.admin-nav-primary {
  margin: 4px 0 7px;
  color: #fff;
  background: linear-gradient(90deg, rgba(36, 191, 178, 0.3), rgba(35, 130, 154, 0.2));
  box-shadow: inset 2px 0 #42d6c7, 0 8px 20px rgba(0, 0, 0, 0.08);
}

.admin-nav-primary::after {
  content: "ADMIN";
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 99px;
  color: #073c43;
  background: #8be4dc;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.topbar-admin-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #80d4cd;
  border-radius: 8px;
  color: #07565d;
  background: linear-gradient(135deg, #f0fffd, #c9f0ec);
  box-shadow: 0 8px 20px rgba(10, 126, 133, 0.12);
  cursor: pointer;
}

.topbar-admin-button span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: #fff;
  background: var(--charcoal);
  font-size: 12px;
  font-weight: 900;
}

.topbar-admin-button strong { font-size: 13px; white-space: nowrap; }
.topbar-admin-button:hover { border-color: #c7ccd6; transform: translateY(-1px); }

.topbar-membership-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #e7c478;
  border-radius: 8px;
  color: #705017;
  background: linear-gradient(135deg, #fff9e8, #f6e2a9);
  box-shadow: 0 8px 20px rgba(161, 112, 23, 0.1);
  cursor: pointer;
}

.topbar-membership-button span {
  display: grid;
  place-items: center;
  min-width: 31px;
  height: 24px;
  border-radius: 6px;
  color: #fff;
  background: #936916;
  font-size: 10px;
  font-weight: 900;
}

.topbar-membership-button strong { font-size: 13px; white-space: nowrap; }
.topbar-membership-button:hover { border-color: #c99735; transform: translateY(-1px); }

.membership-page,
.admin-page {
  display: grid;
  gap: 18px;
  grid-column: 1 / -1;
  min-width: 0;
}

.membership-page[hidden],
.admin-page[hidden] { display: none; }

.membership-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 148px;
  padding: 28px 30px;
  border: 1px solid #cae5e3;
  border-radius: 12px;
  background:
    radial-gradient(circle at 92% 15%, rgba(31, 164, 154, 0.14), transparent 34%),
    linear-gradient(120deg, #ffffff 0%, #f1fbfa 100%);
  box-shadow: var(--shadow);
}

.membership-identity { display: flex; align-items: center; gap: 18px; }
.membership-identity h2 { margin: 3px 0 6px; font-size: 25px; }
.membership-identity p:last-child { margin: 0; color: var(--muted); }

.membership-avatar {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  overflow: hidden;
  border: 1px solid rgba(184, 148, 96, 0.42);
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 236, 200, 0.2), transparent 46%),
    linear-gradient(155deg, #1c1c1c 0%, #0a0a0a 100%);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 220, 170, 0.22);
}

.membership-avatar img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 16px;
}

.membership-current-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  min-width: min(100%, 700px);
  border: 1px solid #dce9e9;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
}

.membership-current-summary > div { padding: 15px 18px; border-right: 1px solid #e5eeee; }
.membership-current-summary > div:last-child { border-right: 0; }
.membership-current-summary span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.membership-current-summary strong { font-size: 17px; }

.membership-plans-dialog {
  width: min(1540px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.membership-plans-dialog[open] {
  animation: membership-dialog-fade-in 220ms ease-out both;
}

.membership-plans-dialog::backdrop {
  background: rgba(19, 24, 26, 0.58);
  backdrop-filter: blur(4px);
}

.membership-plans-dialog[open]::backdrop {
  animation: membership-dialog-backdrop-in 220ms ease-out both;
}

.membership-plans-dialog-shell {
  max-height: calc(100dvh - 32px);
  padding: 26px;
  overflow-y: auto;
  border: 1px solid #e1d9c6;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(25, 31, 33, 0.28);
}

.membership-plans-dialog[open] .membership-plans-dialog-shell {
  transform-origin: 50% 18%;
  animation: membership-dialog-rise-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.membership-plans-dialog.closing[open] {
  animation: membership-dialog-fade-out 180ms ease-in both;
}

.membership-plans-dialog.closing[open]::backdrop {
  animation: membership-dialog-backdrop-out 180ms ease-in both;
}

.membership-plans-dialog.closing[open] .membership-plans-dialog-shell {
  animation: membership-dialog-settle-out 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes membership-dialog-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes membership-dialog-rise-in {
  from { opacity: 0; transform: translateY(18px) scale(0.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes membership-dialog-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes membership-dialog-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes membership-dialog-settle-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(0.985); }
}

@keyframes membership-dialog-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .membership-plans-dialog[open],
  .membership-plans-dialog[open]::backdrop,
  .membership-plans-dialog[open] .membership-plans-dialog-shell {
    animation: none;
  }
}

.membership-plans-dialog-heading,
.membership-plans-dialog-actions {
  display: flex;
  align-items: center;
}

.membership-plans-dialog-heading {
  justify-content: space-between;
  gap: 24px;
}

.membership-plans-dialog-heading h2 { margin: 4px 0 6px; font-size: 23px; }
.membership-plans-dialog-heading p:last-child { margin: 0; color: var(--muted); font-size: 12px; }
.membership-plans-dialog-actions { gap: 12px; }
.membership-plans-dialog-close {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #ddd4c1;
  border-radius: 50%;
  color: #384345;
  background: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.membership-plans-dialog-close:hover { border-color: #c89d3b; color: #8b640d; background: #fffaf0; }
.membership-plans-dialog-grid { margin-top: 26px; }

.membership-plan-section,
.admin-page-heading {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(37, 54, 68, 0.07);
}

.membership-section-heading,
.admin-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.membership-section-heading h2,
.admin-page-heading h2 { margin: 3px 0 5px; font-size: 21px; }
.membership-section-heading p:last-child,
.admin-page-heading p:last-child { margin: 0; color: var(--muted); font-size: 12px; }

.membership-payment-badge {
  padding: 8px 11px;
  border: 1px solid #efd89b;
  border-radius: 999px;
  color: #835b08;
  background: #fff9e8;
  font-size: 11px;
  white-space: nowrap;
}

.membership-plan-grid {
  display: grid;
  grid-template-columns: repeat(var(--membership-plan-count, 4), minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.membership-ai-image-section {
  position: relative;
  overflow: hidden;
  border-color: #ded8f4;
  background:
    radial-gradient(circle at 92% 8%, rgba(130, 74, 221, 0.09), transparent 28%),
    #fff;
  box-shadow: 0 14px 34px rgba(75, 58, 126, 0.08), inset 0 1px rgba(255, 255, 255, 0.9);
}

.membership-dialog-ai-image-section {
  position: relative;
  margin-top: 28px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid #ded8f4;
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 8%, rgba(130, 74, 221, 0.1), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 246, 255, 0.96));
  box-shadow: 0 14px 34px rgba(75, 58, 126, 0.08), inset 0 1px rgba(255, 255, 255, 0.9);
}

.membership-dialog-ai-image-section::before {
  position: absolute;
  width: 220px;
  height: 220px;
  right: -92px;
  bottom: -136px;
  border: 1px solid rgba(126, 85, 202, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  content: "";
  pointer-events: none;
}

.membership-dialog-ai-image-section > * {
  position: relative;
  z-index: 1;
}

.membership-dialog-ai-image-section h3 {
  margin: 4px 0 6px;
  font-size: 20px;
}

.membership-dialog-ai-image-section p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.membership-ai-image-plan-grid {
  grid-template-columns: repeat(var(--membership-plan-count, 5), minmax(0, 1fr));
}

.membership-ai-image-card {
  min-height: 390px;
}

.admin-ai-image-plan {
  color: #7a45c5;
  font-weight: 800;
}

.admin-membership-grant-fields label.is-disabled {
  opacity: 0.58;
}

.membership-loading { grid-column: 1 / -1; padding: 44px; color: var(--muted); text-align: center; }

.membership-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 350px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid #dce6e8;
  border-top: 4px solid var(--plan-color, #78909c);
  border-radius: 11px;
  background: linear-gradient(180deg, var(--plan-tint, #f7f9fa), #fff 45%);
}

.membership-plan-card.featured {
  border-color: #e0bf68;
  box-shadow: 0 16px 34px rgba(151, 105, 13, 0.14);
}

.membership-plan-card.current { outline: 2px solid rgba(23, 107, 135, 0.22); }
.membership-plan-tag { position: absolute; top: 12px; right: 12px; padding: 4px 7px; border-radius: 999px; color: #fff; background: var(--plan-color); font-size: 9px; font-weight: 800; }
.membership-plan-card h3 { margin: 0 0 5px; color: var(--plan-color); font-size: 20px; }
.membership-plan-card > p { min-height: 38px; margin: 0; color: var(--muted); font-size: 12px; }
.membership-plan-price { display: flex; align-items: baseline; gap: 5px; margin: 18px 0; }
.membership-plan-price strong { font-size: 31px; line-height: 1; }
.membership-plan-price span { color: var(--muted); font-size: 12px; }
.membership-plan-card ul { display: grid; gap: 11px; padding: 14px 0 18px; margin: 0; border-top: 1px solid #e7eeee; list-style: none; }
.membership-plan-card li { color: #3c4a52; font-size: 12px; }
.membership-plan-card li::before { content: "✓"; margin-right: 8px; color: var(--plan-color); font-weight: 900; }
.membership-plan-card button { width: 100%; min-height: 40px; margin-top: auto; border: 0; border-radius: 8px; color: #fff; background: var(--plan-color); font-weight: 800; cursor: pointer; }
.membership-plan-card button:disabled { color: #64727a; background: #e8edef; cursor: default; }

.membership-order-message { min-height: 20px; margin: 13px 0 0; color: var(--accent); font-size: 12px; }
.membership-order-message.error { color: var(--danger); }

.membership-orders-panel,
.admin-users-panel,
.admin-orders-panel,
.admin-code-panel { padding: 22px; }

.membership-activation-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr);
  align-items: center;
  gap: 28px;
  padding: 24px 28px;
  border: 1px solid #9fd6d1;
  border-left: 5px solid #15948d;
  background: linear-gradient(115deg, #f1fbfa, #ffffff 68%);
  box-shadow: 0 12px 28px rgba(20, 119, 116, 0.08);
}

.membership-activation-copy { display: flex; align-items: center; gap: 15px; }
.membership-activation-copy h2 { margin: 3px 0 5px; font-size: 20px; }
.membership-activation-copy p:last-child { margin: 0; color: var(--muted); font-size: 12px; }
.membership-key-icon { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #20b6aa, #087e86); font-size: 16px; font-weight: 900; }
.membership-activation-form > label { display: block; margin-bottom: 7px; color: #394850; font-size: 11px; font-weight: 700; }
.membership-activation-form > div { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.membership-activation-form input { min-height: 44px; padding: 0 14px; border: 1px solid #b8d8d6; border-radius: 8px; color: #18353d; background: #fff; font-size: 14px; font-weight: 750; letter-spacing: 1px; text-transform: uppercase; }
.membership-activation-form input:focus { border-color: #15948d; outline: 3px solid rgba(21, 148, 141, 0.12); }
.membership-activation-form .primary-button { min-width: 126px; }

.admin-code-form {
  display: grid;
  grid-template-columns: 1.25fr 0.6fr 0.8fr 1.6fr auto;
  align-items: end;
  gap: 10px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #d9e7e7;
  border-radius: 10px;
  background: #f6fafb;
}
.admin-code-form label { display: grid; gap: 6px; color: #526169; font-size: 10px; font-weight: 700; }
.admin-code-form input,
.admin-code-form select { min-height: 39px; padding: 0 10px; border: 1px solid #ccdadd; border-radius: 7px; color: var(--ink); background: #fff; }
.admin-code-form .primary-button { min-height: 39px; white-space: nowrap; }
.admin-token-rate-preview { display: flex; align-items: baseline; gap: 9px; margin-top: 10px; padding: 0 3px; color: #66787d; font-size: 11px; }
.admin-token-rate-preview strong { color: #0d7778; font-size: 14px; }
.admin-token-rate-preview small { color: #8a999d; }

/* ERP order center */
.erp-order-center { display: grid; gap: 16px; }
.erp-order-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 138px;
  padding: 26px 30px;
  border: 1px solid #cfe4e4;
  border-radius: 22px;
  background:
    radial-gradient(circle at 82% 12%, rgba(77, 194, 179, .18), transparent 28%),
    linear-gradient(135deg, #f9fdfc 0%, #edf8f7 58%, #e5f3f2 100%);
  box-shadow: 0 16px 36px rgba(32, 73, 77, .08);
}
.erp-order-kicker { display: inline-flex; align-items: center; gap: 8px; color: #087d7b; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.erp-order-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #19b99f; box-shadow: 0 0 0 5px rgba(25, 185, 159, .13); }
.erp-order-hero h2 { margin: 8px 0 6px; color: #183b3e; font-size: 27px; line-height: 1.15; }
.erp-order-hero p { margin: 0; color: #698083; font-size: 13px; }
.erp-order-hero-actions { display: flex; align-items: center; gap: 14px; }
.erp-order-hero-actions > span { max-width: 260px; color: #708588; font-size: 12px; text-align: right; }
.erp-order-hero-actions .primary-button { min-width: 150px; }

.erp-order-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.erp-order-metrics article { position: relative; overflow: hidden; min-height: 105px; padding: 18px 19px; border: 1px solid #d7e5e6; border-radius: 17px; background: #fff; box-shadow: 0 8px 22px rgba(34, 67, 72, .05); }
.erp-order-metrics article::after { content: ""; position: absolute; right: -22px; bottom: -31px; width: 72px; height: 72px; border-radius: 50%; background: rgba(19, 158, 151, .07); }
.erp-order-metrics span, .erp-order-metrics small { display: block; color: #76898c; font-size: 11px; }
.erp-order-metrics strong { display: block; margin: 9px 0 5px; color: #163c40; font-size: 25px; line-height: 1; }
.erp-order-metrics article.attention { border-color: #f1d9b4; background: linear-gradient(145deg, #fffdfa, #fff7eb); }
.erp-order-metrics article.attention strong { color: #b46b14; }
.erp-order-metrics article.money { background: linear-gradient(145deg, #0c7778, #116466); border-color: #0c7778; }
.erp-order-metrics article.money span, .erp-order-metrics article.money small { color: rgba(255,255,255,.72); }
.erp-order-metrics article.money strong { color: #fff; font-size: 21px; }

.erp-order-workspace { padding: 0; overflow: hidden; }
.erp-order-filters { display: grid; grid-template-columns: 1.1fr 1fr 1fr .9fr minmax(240px, 1.8fr) auto; align-items: end; gap: 10px; padding: 18px 20px; border-bottom: 1px solid #e2ebec; background: #fbfdfd; }
.erp-order-filters label { display: grid; gap: 6px; min-width: 0; color: #667b7e; font-size: 11px; }
.erp-order-filters select, .erp-order-filters input { width: 100%; height: 39px; padding: 0 11px; border: 1px solid #d3e0e2; border-radius: 10px; background: #fff; color: #24464a; outline: none; }
.erp-order-filters select:focus, .erp-order-filters input:focus { border-color: #19a5a0; box-shadow: 0 0 0 3px rgba(25, 165, 160, .1); }
.erp-order-filters > button { height: 39px; }
.erp-order-status-tabs { display: flex; align-items: center; gap: 7px; padding: 14px 20px 0; }
.erp-order-status-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #657b7e; cursor: pointer; }
.erp-order-status-tabs button b { display: inline-flex; min-width: 21px; height: 19px; align-items: center; justify-content: center; padding: 0 5px; border-radius: 20px; background: #eef3f4; color: #6d8083; font-size: 10px; }
.erp-order-status-tabs button.active { border-color: #bfe0de; background: #eaf8f7; color: #087d7b; font-weight: 700; }
.erp-order-status-tabs button.active b { background: #0d8583; color: #fff; }
.erp-order-label-scanbar { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.15fr) auto; align-items: end; gap: 12px; margin: 12px 20px 0; padding: 14px 16px; border: 1px solid #c9bdef; border-radius: 12px; background: linear-gradient(135deg, #faf8ff, #f2efff); box-shadow: 0 8px 22px rgba(100, 79, 167, .08); }
.erp-order-label-scanbar[hidden] { display: none; }
.erp-order-label-scanbar > div { align-self: center; }
.erp-order-label-scanbar > div strong, .erp-order-label-scanbar > div span { display: block; }
.erp-order-label-scanbar > div strong { color: #594398; font-size: 13px; }
.erp-order-label-scanbar > div span { margin-top: 4px; color: #8174a6; font-size: 10px; }
.erp-order-label-scanbar label { display: grid; gap: 5px; color: #6f618e; font-size: 10px; }
.erp-order-label-scanbar input { width: 100%; height: 39px; padding: 0 12px; border: 1px solid #bfaeea; border-radius: 9px; background: #fff; color: #3d315f; font: 700 13px/1 ui-monospace, SFMono-Regular, Consolas, monospace; outline: none; }
.erp-order-label-scanbar input:focus { border-color: #7659c3; box-shadow: 0 0 0 3px rgba(118, 89, 195, .12); }
.erp-order-label-scanbar > button { height: 39px; background: #7057b2; }
.erp-order-label-scanbar > em { grid-column: 2 / -1; color: #76679a; font-size: 10px; font-style: normal; }
.erp-order-table-wrap { overflow-x: auto; padding: 14px 20px 4px; }
.erp-order-table { width: 100%; min-width: 1080px; border-collapse: separate; border-spacing: 0; }
.erp-order-table th { padding: 11px 12px; border-top: 1px solid #dde8e9; border-bottom: 1px solid #dde8e9; background: #f4f8f8; color: #718386; font-size: 10px; font-weight: 700; text-align: left; white-space: nowrap; }
.erp-order-table th:first-child { border-left: 1px solid #dde8e9; border-radius: 10px 0 0 10px; }
.erp-order-table th:last-child { border-right: 1px solid #dde8e9; border-radius: 0 10px 10px 0; }
.erp-order-table td { padding: 14px 12px; border-bottom: 1px solid #edf2f2; color: #435d61; font-size: 11px; vertical-align: middle; }
.erp-order-table tbody tr:hover td { background: #fbfefe; }
.erp-order-number { display: grid; gap: 4px; }
.erp-order-number strong { color: #173e42; font-size: 12px; }
.erp-order-number span { color: #87989a; font-size: 10px; }
.erp-store-cell { display: grid; gap: 6px; }
.erp-store-cell strong { color: #36565a; }
.erp-fulfillment-badge { display: inline-flex; width: fit-content; padding: 3px 7px; border-radius: 6px; background: #ebf7f6; color: #087e7b; font-size: 9px; font-weight: 800; }
.erp-order-products { display: grid; gap: 4px; max-width: 280px; }
.erp-order-products strong { overflow: hidden; color: #294b4f; text-overflow: ellipsis; white-space: nowrap; }
.erp-order-products span { color: #849496; font-size: 10px; }
.erp-order-amount { color: #163f43; font-size: 12px; font-weight: 800; white-space: nowrap; }
.erp-order-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 20px; background: #eef2f3; color: #617477; font-size: 10px; white-space: nowrap; }
.erp-order-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.erp-order-status.pending, .erp-order-status.ready { background: #fff2dc; color: #a9620a; }
.erp-order-status.shipping { background: #e8f3ff; color: #2875ae; }
.erp-order-status.completed { background: #e8f8ef; color: #1d8a57; }
.erp-order-status.returns, .erp-order-status.cancelled { background: #ffeded; color: #b94b4b; }
.erp-order-date { display: grid; gap: 3px; color: #647b7e; white-space: nowrap; }
.erp-order-date small { color: #94a3a5; font-size: 9px; }
.erp-order-detail-button { padding: 6px 10px; border: 1px solid #bedcdd; border-radius: 8px; background: #fff; color: #087d7b; cursor: pointer; font-size: 10px; font-weight: 700; }
.erp-order-detail-button:hover { background: #edf9f8; }
.erp-order-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 20px 18px; color: #7a8c8f; font-size: 11px; }
.erp-order-pagination > div { display: flex; gap: 7px; }
.erp-order-pagination button { padding: 7px 11px; }

.erp-order-dialog { width: min(760px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 20px; background: transparent; box-shadow: 0 28px 80px rgba(18, 43, 47, .28); }
.erp-order-dialog::backdrop { background: rgba(13, 31, 35, .48); backdrop-filter: blur(4px); }
.erp-order-dialog-shell { overflow: hidden; border: 1px solid #d5e4e5; border-radius: 20px; background: #fff; }
.erp-order-dialog-shell > header { display: flex; justify-content: space-between; gap: 20px; padding: 22px 24px; border-bottom: 1px solid #e4ecec; background: linear-gradient(135deg, #f7fcfb, #eaf7f6); }
.erp-order-dialog-shell > header span { color: #11938e; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.erp-order-dialog-shell > header h2 { margin: 5px 0 3px; color: #193f43; font-size: 21px; }
.erp-order-dialog-shell > header p { margin: 0; color: #75898c; font-size: 11px; }
.erp-order-detail-body { max-height: 52vh; overflow-y: auto; padding: 20px 24px; }
.erp-order-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.erp-order-detail-grid > div { display: grid; gap: 5px; padding: 12px; border: 1px solid #e0e9ea; border-radius: 11px; background: #fbfdfd; }
.erp-order-detail-grid span { color: #819194; font-size: 9px; }
.erp-order-detail-grid strong { color: #2b5054; font-size: 11px; }
.erp-order-detail-products { display: grid; gap: 8px; }
.erp-order-detail-products h3 { margin: 0 0 3px; color: #244b4f; font-size: 13px; }
.erp-order-detail-product { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 13px; border: 1px solid #e4ebec; border-radius: 11px; }
.erp-order-detail-product div { display: grid; gap: 4px; min-width: 0; }
.erp-order-detail-product strong { overflow: hidden; color: #34575a; text-overflow: ellipsis; white-space: nowrap; }
.erp-order-detail-product span { color: #879799; font-size: 10px; }
.erp-order-note-editor { display: grid; grid-template-columns: 1fr 1.5fr; gap: 12px; padding: 18px 24px; border-top: 1px solid #e5eded; background: #fafcfc; }
.erp-order-note-editor label { display: grid; gap: 7px; color: #647a7d; font-size: 10px; }
.erp-order-note-editor input, .erp-order-note-editor textarea { width: 100%; padding: 10px 11px; border: 1px solid #d4e0e2; border-radius: 10px; background: #fff; color: #294b4f; outline: none; resize: vertical; }
.erp-order-note-editor input:focus, .erp-order-note-editor textarea:focus { border-color: #159d98; box-shadow: 0 0 0 3px rgba(21, 157, 152, .1); }
.erp-order-dialog-shell > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px 18px; background: #fafcfc; }
.erp-order-dialog-shell > footer > span { color: #6e8184; font-size: 10px; }
.erp-order-dialog-shell > footer > div { display: flex; gap: 8px; }

@media (max-width: 1280px) {
  .erp-order-metrics { grid-template-columns: repeat(3, 1fr); }
  .erp-order-filters { grid-template-columns: repeat(3, 1fr); }
  .erp-order-search { grid-column: span 2; }
  .erp-order-label-scanbar { grid-template-columns: 1fr 1fr; }
  .erp-order-label-scanbar > div { grid-column: 1 / -1; }
  .erp-order-label-scanbar > em { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .erp-order-hero { align-items: flex-start; padding: 22px; }
  .erp-order-hero, .erp-order-hero-actions { flex-direction: column; }
  .erp-order-hero-actions { align-items: stretch; width: 100%; }
  .erp-order-hero-actions > span { max-width: none; text-align: left; }
  .erp-order-metrics { grid-template-columns: repeat(2, 1fr); }
  .erp-order-metrics article.money { grid-column: span 2; }
  .erp-order-filters { grid-template-columns: 1fr; }
  .erp-order-search { grid-column: auto; }
  .erp-order-status-tabs { overflow-x: auto; }
  .erp-order-status-tabs button { flex: 0 0 auto; }
  .erp-order-label-scanbar { grid-template-columns: 1fr; margin-inline: 12px; }
  .erp-order-label-scanbar > div, .erp-order-label-scanbar > em { grid-column: auto; }
  .erp-order-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .erp-order-note-editor { grid-template-columns: 1fr; }
  .erp-order-dialog-shell > footer { align-items: stretch; flex-direction: column; }
}
.admin-generated-code-box { display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; margin-top: 14px; padding: 16px; border: 1px solid #e6c96f; border-radius: 10px; background: #fffaf0; }
.admin-generated-code-box[hidden] { display: none; }
.admin-generated-code-box > div strong,
.admin-generated-code-box > div span { display: block; }
.admin-generated-code-box > div span { margin-top: 3px; color: #8a6a29; font-size: 10px; }
.admin-generated-code-box textarea { grid-column: 1 / -1; width: 100%; padding: 12px; border: 1px solid #dfc57a; border-radius: 8px; color: #4b3813; background: #fff; font: 700 13px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; resize: vertical; }
.admin-code-table-wrap { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.membership-table-wrap { width: 100%; overflow-x: auto; }
.membership-table { width: 100%; border-collapse: collapse; }
.membership-table th { padding: 11px 12px; border-bottom: 1px solid var(--line); color: #66737d; background: #f6f9fa; text-align: left; font-size: 11px; font-weight: 700; white-space: nowrap; }
.membership-table td { padding: 13px 12px; border-bottom: 1px solid #e8edef; color: #33434b; font-size: 12px; vertical-align: middle; }
.membership-table tbody tr:last-child td { border-bottom: 0; }
.membership-empty-cell { padding: 34px !important; color: var(--muted) !important; text-align: center; }

.membership-status {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  color: #895d08;
  background: #fff4d8;
  font-size: 10px;
  font-weight: 800;
}
.membership-status.paid,
.membership-status.active { color: #157047; background: #e3f6ec; }
.membership-status.cooldown { color: #8a6200; background: #fff2c8; }
.membership-status.cancelled,
.membership-status.disabled,
.membership-status.expired { color: #a13939; background: #fde9e9; }

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.admin-metric-grid > div { padding: 18px; border: 1px solid var(--line); border-top: 3px solid #36a89e; border-radius: 10px; background: #fff; box-shadow: 0 8px 22px rgba(37, 54, 68, 0.06); }
.admin-metric-grid span,
.admin-metric-grid small { display: block; color: var(--muted); font-size: 10px; }
.admin-metric-grid strong { display: block; margin: 6px 0 4px; font-size: 22px; }

.admin-module-switch {
  display: grid;
  grid-template-columns: repeat(7, minmax(170px, 1fr));
  width: 100%;
  max-width: 100%;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid #cfd9e4;
  border-radius: 16px;
  background: rgba(226, 233, 242, 0.78);
  box-shadow: inset 0 1px 2px rgba(56, 72, 91, 0.05);
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.admin-module-switch button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 62px;
  padding: 9px 13px;
  border: 0;
  border-radius: 12px;
  color: var(--text-muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
}
.admin-module-switch button:hover { color: var(--text); background: rgba(255, 255, 255, 0.5); }
.admin-module-switch button:focus-visible { outline: 2px solid #c59225; outline-offset: -2px; }
.admin-module-switch button.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 26px rgba(40, 52, 71, 0.11);
}
.admin-module-switch button[hidden] { display: none; }
.admin-module-switch button i {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #7c8797;
  background: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
.admin-module-switch button.active i {
  color: #4b3705;
  background: linear-gradient(145deg, #f8dc7d, #e5ad24);
}
.admin-module-switch button span {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.admin-module-switch button strong { font-size: 13px; white-space: nowrap; }
.admin-module-switch button small {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-admin-module-panel][hidden] { display: none !important; }
.admin-billing-panel { padding: 18px; }
.admin-billing-panel .billing-management {
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

.admin-shared-shop-panel { padding: 22px; }
.admin-shared-shop-header { align-items: flex-start; }
.admin-shared-shop-metrics {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 9px;
  margin: 18px 0;
}
.admin-shared-shop-metrics > div {
  padding: 13px;
  border: 1px solid #dceae8;
  border-radius: 9px;
  background: linear-gradient(145deg, #f8fdfc, #fff);
}
.admin-shared-shop-metrics span { display: block; color: var(--muted); font-size: 10px; }
.admin-shared-shop-metrics strong { display: block; margin-top: 5px; color: #173e43; font-size: 19px; }
.admin-shared-shop-toolbar,
.admin-shared-shop-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.admin-shared-shop-table-wrap { margin-top: 8px; }
.admin-shared-shop-table { min-width: 1120px; }
.admin-shared-shop-cell { display: grid; gap: 4px; min-width: 230px; max-width: 320px; }
.admin-shared-shop-cell a {
  overflow: hidden;
  color: #147c80;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-shared-shop-cell small { color: var(--muted); font-size: 10px; }
.admin-shared-shop-score { display: grid; grid-template-columns: auto auto; align-items: center; gap: 6px; min-width: 150px; }
.admin-shared-shop-score > strong { grid-row: span 2; font-size: 20px; }
.admin-shared-shop-score label { color: var(--muted); font-size: 10px; white-space: nowrap; }
.admin-shared-shop-score input { width: 58px; min-height: 30px; margin-left: 3px; padding: 0 5px; border: 1px solid var(--line); border-radius: 6px; }
.admin-shared-shop-score .admin-table-button { min-height: 28px; padding: 0 7px; font-size: 10px; }
.admin-shared-shop-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 150px; }
.admin-shared-shop-pagination { margin-top: 14px; color: var(--muted); font-size: 11px; }
.admin-shared-shop-pagination > div { display: flex; gap: 7px; }

.admin-list-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 150px 0 0;
  border-top: 1px solid var(--line);
}
.admin-online-summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #cde9db;
  border-radius: 999px;
  color: #42655a;
  background: #f2fbf6;
  font-size: 11px;
  white-space: nowrap;
}
.admin-online-summary strong { color: #147a52; font-size: 17px; }
.admin-online-summary small { color: #7a9188; font-size: 10px; }
.admin-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2fba7c;
  box-shadow: 0 0 0 4px rgba(47, 186, 124, 0.12);
}
.admin-list-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 142px;
  min-height: 34px;
  padding: 0 14px;
  color: #173e43;
  background: #fff;
}
.admin-list-toggle b {
  color: #8b6410;
  font-size: 14px;
  line-height: 1;
  transition: transform 160ms ease;
}
.admin-list-toggle[aria-expanded="true"] b { transform: rotate(180deg); }
.admin-collapsible-content {
  min-width: 0;
  margin-top: 8px;
}
.admin-collapsible-content[hidden] { display: none; }

.admin-users-toolbar { align-items: flex-end; }
.admin-filter-row { display: flex; gap: 8px; }
.admin-filter-row input { min-width: 220px; }
.admin-filter-row input,
.admin-filter-row select,
.admin-user-actions select {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: #fff;
}

.admin-user-cell { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.admin-user-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #fff; background: #138f8b; font-weight: 900; }
.admin-user-cell strong,
.admin-user-cell small { display: block; }
.admin-user-cell small,
.admin-date-stack small,
.admin-membership-stack small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.admin-user-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 320px; }
.admin-user-actions select { max-width: 108px; }
.admin-table-button { min-height: 34px; padding: 0 10px; border: 1px solid #b9d8d6; border-radius: 7px; color: #126a70; background: #f1faf9; cursor: pointer; white-space: nowrap; }
.admin-table-button.danger { border-color: #efcaca; color: #a13939; background: #fff6f6; }
.admin-table-button.confirm { border-color: #9fd5bf; color: #116c43; background: #effaf4; }
.admin-table-button.membership { border-color: #dfc16e; color: #76520a; background: #fff9e9; }
.admin-table-button.permanent-delete { border-color: #dc6f6f; color: #9f1f1f; background: #fff0f0; font-weight: 800; }
.admin-table-button.permanent-delete:hover { border-color: #b62d2d; color: #fff; background: #b62d2d; }
.admin-user-relation { color: #996515 !important; }

.admin-membership-grant-dialog {
  width: min(680px, calc(100vw - 28px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
}
.admin-membership-grant-dialog::backdrop { background: rgba(18, 25, 27, .58); backdrop-filter: blur(4px); }
.admin-membership-grant-card {
  padding: 24px;
  border: 1px solid #e4d7b7;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(27, 35, 38, .28);
}
.admin-membership-grant-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.admin-membership-grant-heading h2 { margin: 3px 0 5px; }
.admin-membership-grant-heading p:last-child { margin: 0; color: var(--muted); }
.admin-membership-grant-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #ded5c1;
  border-radius: 50%;
  color: #4b4030;
  background: #fff;
  font-size: 20px;
  cursor: pointer;
}
.admin-membership-grant-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}
.admin-membership-grant-fields label { display: grid; gap: 7px; color: #536169; font-size: 11px; font-weight: 700; }
.admin-membership-grant-fields input,
.admin-membership-grant-fields select {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
}
.admin-membership-grant-note { grid-column: 1 / -1; }
.admin-membership-grant-preview { margin-top: 16px; padding: 13px 15px; border: 1px solid #ead49a; border-radius: 9px; color: #6d4a08; background: #fff9e8; font-weight: 800; }
.admin-membership-grant-tip { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.admin-membership-grant-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.admin-account-delete-card { border-color: #edb7b7; }
.admin-account-delete-warning {
  display: grid;
  gap: 6px;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid #edb3b3;
  border-radius: 10px;
  color: #852525;
  background: #fff1f1;
  line-height: 1.65;
}
.admin-account-delete-warning strong { font-size: 13px; }
.admin-account-delete-warning span { font-size: 11px; }
.admin-account-delete-confirmation { display: grid; gap: 8px; margin-top: 16px; color: #5e3e3e; font-size: 11px; font-weight: 800; }
.admin-account-delete-confirmation input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #d99b9b; border-radius: 8px; color: #6f1818; background: #fff; }
.admin-account-delete-confirmation input:focus { outline: 2px solid rgba(182, 45, 45, .18); border-color: #b62d2d; }
.admin-account-delete-submit { min-height: 40px; padding: 0 18px; border: 1px solid #981f1f; border-radius: 8px; color: #fff; background: #b62d2d; font-weight: 800; cursor: pointer; }
.admin-account-delete-submit:disabled { cursor: wait; opacity: .58; }
.membership-subaccount-panel { margin-top: 22px; }
.membership-subaccount-header-actions { display: flex; align-items: center; gap: 10px; }
.membership-subaccount-usage { min-width: 72px; padding: 8px 12px; border: 1px solid #b9d8d6; border-radius: 999px; color: #126a70; background: #f1faf9; text-align: center; }
.membership-subaccount-create-button { min-height: 38px; padding: 0 16px; }
.membership-subaccount-create-button:disabled { cursor: not-allowed; filter: grayscale(.45); opacity: .58; }
.membership-subaccount-table small { color: var(--muted); }

@media (max-width: 640px) {
  .admin-membership-grant-card { padding: 18px; }
  .admin-membership-grant-fields { grid-template-columns: 1fr; }
  .admin-membership-grant-note { grid-column: auto; }
  .admin-membership-grant-actions { flex-direction: column-reverse; }
  .admin-membership-grant-actions button { width: 100%; }
  .membership-subaccount-panel .panel-header { align-items: flex-start; flex-direction: column; }
  .membership-subaccount-header-actions { width: 100%; justify-content: space-between; }
  .membership-subaccount-create-button { flex: 1; }
}

@media (max-width: 1320px) {
  .membership-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-shared-shop-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .membership-hero { align-items: flex-start; flex-direction: column; }
  .membership-current-summary { width: 100%; }
  .admin-code-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-code-note { grid-column: span 2; }
}

@media (max-width: 960px) {
  .topbar-admin-button strong { display: none; }
  .topbar-admin-button { padding: 0 9px; }
  .topbar-membership-button span { display: none; }
  .topbar-membership-button { padding: 0 10px; }
  .membership-section-heading,
  .admin-page-heading,
  .admin-users-toolbar { align-items: flex-start; flex-direction: column; }
  .admin-filter-row { width: 100%; flex-wrap: wrap; }
  .admin-filter-row input { min-width: 100%; }
  .admin-shared-shop-header,
  .admin-shared-shop-toolbar { align-items: flex-start; flex-direction: column; }
  .admin-shared-shop-header > div:first-child { width: 100%; flex: 0 1 auto; }
  .admin-shared-shop-toolbar .admin-filter-row { width: 100%; }
  .admin-shared-shop-toolbar > .secondary-button { width: 100%; }
  .admin-shared-shop-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .membership-activation-panel { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topbar-admin-button { display: none; }
  .topbar-membership-button { display: none; }
  .membership-hero,
  .membership-plan-section,
  .admin-page-heading { padding: 18px; }
  .membership-plan-grid,
  .admin-metric-grid { grid-template-columns: 1fr; }
  .admin-module-switch { grid-template-columns: repeat(6, minmax(160px, 1fr)); }
  .admin-module-switch button { min-height: 58px; padding: 8px 11px; }
  .membership-current-summary { grid-template-columns: 1fr; }
  .membership-current-summary > div { border-right: 0; border-bottom: 1px solid #e5eeee; }
  .membership-current-summary > div:last-child { border-bottom: 0; }
  .membership-activation-panel { padding: 18px; }
  .membership-activation-form > div,
  .admin-code-form { grid-template-columns: 1fr; }
  .admin-code-note { grid-column: auto; }
  .admin-shared-shop-panel { padding: 16px; }
  .admin-shared-shop-pagination { align-items: flex-start; flex-direction: column; }
  .admin-shared-shop-header > div:first-child,
  .admin-code-panel > .panel-header > div:first-child,
  .admin-department-panel > .panel-header > div:first-child,
  .admin-users-toolbar > div:first-child {
    width: 100%;
    flex: 0 1 auto;
  }
  .admin-shared-shop-header > .membership-status,
  .admin-code-panel > .panel-header > .membership-status,
  .admin-department-panel > .panel-header > .membership-status { align-self: flex-start; }
  .admin-list-toggle-row { align-items: stretch; flex-direction: column; }
  .admin-list-toggle-row { padding-right: 54px; }
  .admin-online-summary { justify-content: center; width: 100%; }
  .admin-list-toggle { width: 100%; justify-content: space-between; }
}

/* Smart listing workspace */
.listing-nav-group {
  display: grid;
  gap: 2px;
}

.listing-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.listing-nav-toggle b {
  margin-left: auto;
  color: #9aa3b2;
  font-size: 12px;
  transition: color 160ms ease, transform 160ms ease;
}

.listing-nav-toggle:hover b { color: var(--charcoal); }
.listing-nav-toggle.collapsed b { transform: translateY(-1px); }

.listing-subnav {
  display: grid;
  gap: 1px;
  margin-left: 20px;
  padding: 2px 0 4px 10px;
  border-left: 1px solid #e5e7eb;
}

.listing-subnav-item {
  min-height: 30px;
  padding: 5px 12px;
  border: 0;
  border-radius: 8px;
  color: #6b7280;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.listing-subnav-item:hover,
.listing-subnav-item.active {
  color: var(--accent-strong);
  background: rgba(59, 130, 246, 0.1);
}

.listing-records-panel,
.listing-settings-panel {
  grid-column: 1 / -1;
  padding: 22px;
  border-radius: 15px;
}

.listing-records-panel .panel-header,
.listing-settings-header {
  margin-bottom: 18px;
}

.listing-record-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.listing-record-metrics > div {
  min-height: 108px;
  padding: 17px 18px;
  border: 1px solid #dbe8e9;
  border-top: 3px solid #27b3aa;
  border-radius: 11px;
  background: linear-gradient(145deg, #ffffff, #f6fbfb);
}

.listing-record-metrics span,
.listing-record-metrics small,
.listing-record-metrics strong { display: block; }
.listing-record-metrics span { color: #587075; font-size: 12px; }
.listing-record-metrics strong { margin: 7px 0 2px; color: #12363b; font-size: 28px; line-height: 1; }
.listing-record-metrics small { color: #8a9b9f; font-size: 11px; }

.listing-record-toolbar,
.listing-settings-filter {
  display: grid;
  grid-template-columns: minmax(260px, 1.8fr) minmax(170px, 0.7fr) minmax(170px, 0.7fr) auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #d7e5e6;
  border-radius: 10px;
  background: #f5f9f9;
}

.listing-record-batchbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.listing-record-batchbar > div { display: flex; flex-wrap: wrap; gap: 7px; }
.listing-record-batchbar > span { color: #73878b; font-size: 11px; }

.listing-record-toolbar label,
.listing-settings-filter label {
  display: grid;
  gap: 6px;
  color: #587075;
  font-size: 11px;
  font-weight: 700;
}

.listing-record-toolbar input,
.listing-record-toolbar select,
.listing-settings-filter input,
.listing-settings-filter select {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #cedfe1;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  outline: none;
}

.listing-record-toolbar input:focus,
.listing-record-toolbar select:focus,
.listing-settings-filter input:focus,
.listing-settings-filter select:focus {
  border-color: #20a89f;
  box-shadow: 0 0 0 3px rgba(32, 168, 159, 0.1);
}

.listing-record-table-wrap,
.listing-settings-table-wrap {
  overflow: auto;
  border: 1px solid #d9e6e7;
  border-radius: 11px;
  background: #fff;
}

.listing-record-table-wrap {
  padding: 12px;
  background: #eef1ff;
}

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

.listing-history-card {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d7def7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(77, 70, 160, 0.06);
}

.listing-history-card[data-publish-state="pending"] { border-color: #f1cd79; }
.listing-history-card[data-publish-state="success"] { border-color: #83d6b6; }
.listing-history-card[data-publish-state="failed"] { border-color: #efaaa1; }

.listing-history-media {
  position: relative;
  min-height: 236px;
  padding: 10px;
  border-right: 1px solid #e6e9f4;
  background: #f8fafc;
}

.listing-history-media img,
.listing-history-image-empty {
  width: 100%;
  height: 166px;
  border-radius: 9px;
  object-fit: cover;
  background: #edf2f7;
}

.listing-history-image-empty {
  display: grid;
  place-items: center;
  color: #94a3b8;
  font-size: 11px;
}

.listing-history-source {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  border-radius: 999px;
  padding: 5px 7px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.listing-history-source.selection { color: #5b21b6; background: #ede9fe; }
.listing-history-source.ai { color: #0369a1; background: #e0f2fe; }

.listing-history-main {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 12px;
}

.listing-history-main > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.listing-history-main h3 {
  margin: 0;
  color: #1e293b;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.listing-history-title-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 5px;
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}

.listing-history-title-link span { color: #a97813; font-size: 11px; }
.listing-history-title-link:hover { color: #9a6a0b; text-decoration: underline; text-underline-offset: 3px; }
.listing-history-title-link:focus-visible { border-radius: 4px; outline: 2px solid #d8a72a; outline-offset: 3px; }

.listing-history-main header p {
  margin: 5px 0 0;
  color: #8492a6;
  font-size: 9px;
  line-height: 1.5;
}

.listing-history-main > header .badge {
  flex: none;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-publish-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.listing-publish-status i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

.listing-publish-status.warn { border-color: #ead8b0; color: #7c6841; background: #faf6ed; }
.listing-publish-status.info { border-color: #efd28c; color: #9a6700; background: #fff7df; }
.listing-publish-status.ok { border-color: #a9dfc9; color: #087b59; background: #eaf8f2; }
.listing-publish-status.danger { border-color: #efbbb4; color: #b63c32; background: #fff1ef; }

.auth-extension-release {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.4fr) auto;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding: 46px max(5vw, 28px);
  color: #edf7f3;
  background: #163a36;
}

.auth-extension-release-heading > span {
  color: #e3bd55;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.auth-extension-release-heading h2 {
  margin: 7px 0 8px;
  color: #fff;
  font-size: 28px;
  letter-spacing: 0;
}

.auth-extension-release-heading h2 strong { color: #f1cf70; }
.auth-extension-release-heading p { margin: 0; color: #b9cbc6; font-size: 13px; line-height: 1.7; }

.auth-extension-release ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-extension-release li {
  position: relative;
  padding-left: 18px;
  color: #dce9e5;
  font-size: 13px;
  line-height: 1.55;
}

.auth-extension-release li::before {
  content: "";
  position: absolute;
  top: .6em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e3bd55;
}

.auth-extension-release > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 142px;
  min-height: 44px;
  border: 1px solid #e3bd55;
  border-radius: 8px;
  padding: 0 18px;
  color: #142b28;
  background: #f1cf70;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

@media (max-width: 900px) {
  .auth-extension-release {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 36px 24px;
  }

  .auth-extension-release > a { justify-self: start; }
}

.listing-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin: 10px 0;
  padding: 8px 9px;
  border-radius: 8px;
  background: #f7f9fc;
  color: #718096;
  font-size: 9px;
}

.listing-history-meta b { margin-left: 3px; color: #334155; }

.listing-history-finance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #e4e8f1;
  border-radius: 9px;
}

.listing-history-finance > div {
  min-width: 0;
  padding: 8px;
  border-right: 1px solid #e8ebf2;
  border-bottom: 1px solid #e8ebf2;
  background: #fbfcfe;
}

.listing-history-finance > div:nth-child(3n) { border-right: 0; }
.listing-history-finance > div:nth-last-child(-n + 3) { border-bottom: 0; }
.listing-history-finance span,
.listing-history-finance strong { display: block; }
.listing-history-finance span { color: #7c8b9c; font-size: 9px; }
.listing-history-finance strong { margin-top: 4px; color: #1e293b; font-size: 12px; }
.listing-history-finance strong small { margin-left: 5px; color: #64748b; font-size: 8px; }
.listing-history-finance .profit strong { color: #059669; }
.listing-history-finance .loss strong { color: #dc2626; }

.listing-content-rating {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #cfe8de;
  border-radius: 9px;
  background: linear-gradient(120deg, #eefaf5 0%, #f8fbfc 100%);
}

.listing-content-rating > div { text-align: center; }
.listing-content-rating > div strong,
.listing-content-rating > div span,
.listing-content-rating p small { display: block; }
.listing-content-rating > div strong { color: #08765f; font-size: 24px; line-height: 1; }
.listing-content-rating > div span { margin-top: 4px; color: #42665d; font-size: 9px; font-weight: 900; }
.listing-content-rating p { margin: 0; color: #49615d; font-size: 10px; line-height: 1.55; }
.listing-content-rating p small { margin-top: 3px; color: #81908d; font-size: 8px; }
.listing-content-rating.pending { border-color: #e4e8f1; background: #f8fafc; }
.listing-content-rating.pending > div strong { color: #94a3b8; }

.listing-history-supplier {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.listing-history-supplier > span { color: #475569; font-size: 10px; font-weight: 900; }
.listing-history-supplier input { min-width: 0; height: 30px; padding: 0 8px; border: 1px solid #d9dfeb; border-radius: 7px; background: #fafbfc; color: #526071; font-size: 9px; }
.listing-history-supplier button,
.listing-history-supplier a { border: 1px solid #bfdbfe; border-radius: 7px; padding: 6px 8px; background: #eff6ff; color: #2563eb; font-size: 9px; font-weight: 800; text-decoration: none; white-space: nowrap; cursor: pointer; }
.listing-history-supplier.missing input { border-color: #f4d8aa; background: #fffbeb; }
.listing-history-supplier.missing button { border-color: #f5c96b; background: #fff7db; color: #a16207; }

.listing-history-error {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 10px 11px;
  border-left: 3px solid #d2554b;
  border-radius: 6px;
  background: #fff4f2;
}

.listing-history-error header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.listing-history-error header strong { color: #a9322b; font-size: 11px; }
.listing-history-error header span { color: #a66a65; font-size: 9px; }
.listing-history-error ul { display: grid; gap: 4px; margin: 0; padding-left: 17px; color: #773d39; font-size: 10px; line-height: 1.5; }
.listing-history-error p { margin: 0; color: #76514e; font-size: 10px; line-height: 1.55; }
.listing-history-error p strong { color: #9c3b34; }

.listing-history-main > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
}

.listing-history-main > footer .listing-record-progress { min-width: 105px; }

@media (max-width: 1500px) {
  .listing-record-card-list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .listing-history-card { grid-template-columns: 1fr; }
  .listing-history-media { min-height: auto; border-right: 0; border-bottom: 1px solid #e6e9f4; }
  .listing-history-media img, .listing-history-image-empty { height: 220px; }
  .listing-history-finance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-history-finance > div { border-right: 1px solid #e8ebf2 !important; border-bottom: 1px solid #e8ebf2 !important; }
  .listing-history-finance > div:nth-child(2n) { border-right: 0 !important; }
  .listing-history-finance > div:nth-last-child(-n + 2) { border-bottom: 0 !important; }
  .listing-history-supplier { grid-template-columns: auto minmax(0, 1fr); }
  .ai-listing-content-audit { grid-template-columns: 1fr; }
  .ai-listing-content-checks ul { grid-template-columns: 1fr; }
  .listing-content-rating { grid-template-columns: 82px minmax(0, 1fr); }
}

.listing-record-table,
.listing-settings-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
}

.listing-record-table th,
.listing-record-table td,
.listing-settings-table th,
.listing-settings-table td {
  padding: 13px 12px;
  border-bottom: 1px solid #e4eded;
  color: #314c51;
  text-align: left;
  font-size: 12px;
  vertical-align: middle;
}

.listing-record-table th,
.listing-settings-table th {
  color: #647b80;
  background: #f5f8f8;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.listing-record-table tr:last-child td,
.listing-settings-table tr:last-child td { border-bottom: 0; }
.listing-record-table td strong,
.listing-record-table td small,
.listing-settings-table td strong,
.listing-settings-table td small { display: block; }
.listing-record-table td small,
.listing-settings-table td small { margin-top: 4px; color: #8a9a9e; font-size: 10px; }

.listing-mode-pill,
.listing-template-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #b9dcd8;
  border-radius: 6px;
  color: #087b75;
  background: #eefafa;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.listing-record-progress {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 120px;
}

.listing-record-progress > span {
  width: 82px;
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: #e6eeee;
}
.listing-record-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1bb2a7, #49cbbf); }
.listing-record-progress b { color: #60777b; font-size: 10px; }

.listing-record-actions,
.listing-setting-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; white-space: nowrap; }
.listing-record-actions button,
.listing-record-actions .listing-record-ozon-link,
.listing-setting-row-actions button {
  padding: 4px 6px;
  border: 0;
  color: #0d8c87;
  background: transparent;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.listing-record-actions .listing-record-ozon-link {
  color: #8b6208;
  text-decoration: none;
}
.listing-record-actions .listing-record-ozon-link:hover { color: #bb7c00; text-decoration: underline; text-underline-offset: 2px; }
.listing-record-actions button.listing-record-edit { color: #0d7d78; font-weight: 900; }
.listing-record-actions button.listing-record-republish {
  border: 1px solid #d6a62b;
  border-radius: 6px;
  padding: 5px 9px;
  color: #4a370a;
  background: #f1cf70;
  font-weight: 900;
}
.listing-record-actions button.listing-record-republish:hover { border-color: #b8810d; background: #e6bb49; }
.listing-setting-row-actions button.danger { color: #d25a5a; }
.listing-setting-row-actions button:disabled { color: #aebabc; cursor: not-allowed; }

.listing-record-empty,
.listing-settings-empty {
  display: grid;
  place-items: center;
  min-height: 170px;
  padding: 30px;
  color: #8b9a9e;
  text-align: center;
}
.listing-record-empty[hidden],
.listing-settings-empty[hidden] { display: none; }
.listing-record-empty strong,
.listing-record-empty span,
.listing-settings-empty strong,
.listing-settings-empty span { display: block; }
.listing-record-empty strong,
.listing-settings-empty strong { margin-bottom: 6px; color: #34545a; font-size: 16px; }

.listing-settings-save-state {
  align-self: flex-start;
  padding: 7px 10px;
  border-radius: 99px;
  color: #657d81;
  background: #eff5f5;
  font-size: 11px;
}
.listing-settings-save-state.success { color: #16765a; background: #eaf8f1; }
.listing-settings-save-state.loading { color: #9a6916; background: #fff7df; }
.listing-settings-save-state.error { color: #a94444; background: #fff0f0; }

.listing-settings-notice {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 13px 15px;
  border-left: 3px solid #1ca69e;
  color: #4d676c;
  background: #eff8f8;
  font-size: 12px;
}
.listing-settings-notice strong { color: #0e6e6a; }

.listing-settings-tabs {
  display: flex;
  align-items: end;
  gap: 7px;
  padding: 0 8px;
  border-bottom: 1px solid #dce6e7;
}
.listing-settings-tabs button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  color: #64787d;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.listing-settings-tabs button.active {
  position: relative;
  top: 1px;
  color: #087f7a;
  border-color: #d8e5e6;
  background: #fff;
  font-weight: 800;
}

.listing-settings-filter {
  grid-template-columns: minmax(240px, 1fr) 210px auto auto;
  margin: 16px 0 12px;
}

.listing-settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.listing-settings-actions > div { display: flex; gap: 8px; }
.listing-settings-actions > span { color: #7c8f93; font-size: 11px; }

.listing-settings-table { min-width: 1320px; }
.listing-feature-state { color: #95a1a4; }
.listing-feature-state.on { color: #1aa35f; font-weight: 800; }

.listing-default-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: #cddadb;
  cursor: pointer;
}
.listing-default-toggle i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 54, 58, 0.25);
  transition: transform 160ms ease;
}
.listing-default-toggle.active { background: #1aa69d; }
.listing-default-toggle.active i { transform: translateX(16px); }

.listing-template-dialog {
  width: min(760px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 16px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 28px 80px rgba(11, 45, 49, 0.28);
}
.listing-forbidden-dialog {
  width: min(640px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 16px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 28px 80px rgba(11, 45, 49, 0.28);
}
.listing-forbidden-dialog::backdrop { background: rgba(10, 35, 39, 0.5); backdrop-filter: blur(2px); }
.listing-forbidden-dialog form { padding: 22px; }
.listing-template-dialog::backdrop { background: rgba(10, 35, 39, 0.5); backdrop-filter: blur(2px); }
.listing-template-dialog form { padding: 22px; }
.listing-template-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.listing-template-dialog-header h2 { margin: 3px 0 5px; font-size: 22px; }
.listing-template-dialog-header p { margin: 0; color: var(--muted); font-size: 12px; }
.listing-template-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.listing-template-form-grid label,
.listing-template-notes { display: grid; gap: 6px; color: #546b70; font-size: 11px; font-weight: 700; }
.listing-template-form-grid label.wide { grid-column: span 2; }
.listing-template-form-grid input,
.listing-template-form-grid select,
.listing-template-notes textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #cfdddf;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  outline: none;
}
.listing-template-form-grid input:focus,
.listing-template-form-grid select:focus,
.listing-template-notes textarea:focus { border-color: #1fa69e; box-shadow: 0 0 0 3px rgba(31, 166, 158, 0.1); }
.listing-template-switch { display: flex !important; align-items: center; gap: 8px !important; min-height: 42px; padding: 0 11px; border: 1px solid #dce7e8; border-radius: 8px; background: #f7fafa; }
.listing-template-switch input { width: 16px; min-height: 16px; }
.listing-template-notes { margin-top: 13px; }
.listing-template-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e4eded; }

.listing-template-dialog {
  max-height: min(900px, calc(100vh - 32px));
  overflow: hidden;
}
.listing-template-dialog form {
  max-height: min(900px, calc(100vh - 32px));
  overflow-y: auto;
}
.listing-template-advanced {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 15px;
  border: 1px solid #dbe7e8;
  border-radius: 10px;
  background: #f7fafa;
}
.listing-template-advanced[hidden] { display: none; }
.listing-template-advanced header { padding-bottom: 10px; border-bottom: 1px solid #dfe9ea; }
.listing-template-advanced header:not(:first-child) { margin-top: 4px; }
.listing-template-advanced header strong,
.listing-template-advanced header span { display: block; }
.listing-template-advanced header strong { color: #27474c; font-size: 13px; }
.listing-template-advanced header span { margin-top: 3px; color: #829397; font-size: 10px; }

.listing-signature-fields { display: grid; gap: 14px; }
.listing-signature-fields[hidden] { display: none; }
.listing-signature-warning {
  padding: 12px 14px;
  border: 1px solid #f3c487;
  border-radius: 9px;
  color: #a15d20;
  background: #fff8ed;
  font-size: 11px;
  line-height: 1.6;
}
.listing-signature-field {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 8px;
  color: #4c656a;
  font-size: 11px;
  font-weight: 700;
}
.listing-signature-field > small { grid-column: 2; color: #95a2a5; font-size: 9px; font-weight: 500; }
.listing-signature-field > input,
.listing-signature-field > textarea,
.listing-signature-field > select {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #cfdddf;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  outline: none;
}
.listing-signature-field > input:focus,
.listing-signature-field > textarea:focus { border-color: #1fa69e; box-shadow: 0 0 0 3px rgba(31, 166, 158, 0.1); }
.listing-signature-field .required { color: #e15454; }
.listing-signature-switch-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid #e2ebec;
  border-radius: 9px;
  background: #f7f9f9;
}
.listing-signature-switch-card strong,
.listing-signature-switch-card span { display: block; }
.listing-signature-switch-card strong { color: #324e53; font-size: 12px; }
.listing-signature-switch-card span { margin-top: 3px; color: #8a9a9e; font-size: 10px; }
.listing-switch { position: relative; flex: 0 0 38px; width: 38px; height: 22px; }
.listing-switch input { position: absolute; opacity: 0; }
.listing-switch i { position: absolute; inset: 0; border-radius: 99px; background: #ccd8da; cursor: pointer; transition: background 160ms ease; }
.listing-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform 160ms ease; }
.listing-switch input:checked + i { background: #1fa99f; }
.listing-switch input:checked + i::after { transform: translateX(16px); }
.listing-signature-store-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.listing-signature-store-grid[hidden] { display: none; }
.listing-upload-name { color: #86979b; font-size: 9px; }
.listing-signature-upload { display: grid; gap: 7px; color: #4d666b; font-size: 11px; font-weight: 700; }
.listing-signature-upload-zone {
  display: grid;
  place-items: center;
  min-height: 145px;
  padding: 18px;
  border: 1px dashed #cddfe1;
  border-radius: 10px;
  color: #7c9094;
  background: #f8fbfb;
  text-align: center;
  cursor: pointer;
}
.listing-signature-upload-zone:hover { border-color: #25a89f; background: #f2fafa; }
.listing-signature-upload-zone strong { color: #79a4a6; font-size: 28px; font-weight: 300; }
.listing-signature-upload-zone span,
.listing-signature-upload-zone small { display: block; margin-top: 5px; }
.listing-signature-upload-zone small { color: #9aa8ab; font-size: 9px; font-weight: 500; }
.listing-signature-upload-zone img { max-width: 100%; max-height: 180px; object-fit: contain; border-radius: 7px; }
.listing-signature-upload-zone.has-image strong,
.listing-signature-upload-zone.has-image span,
.listing-signature-upload-zone.has-image small { display: none; }
.listing-signature-default { max-width: 320px; }

.listing-forbidden-workspace { padding-top: 16px; }
.listing-forbidden-workspace[hidden] { display: none; }
.listing-forbidden-tabs { display: flex; gap: 28px; border-bottom: 1px solid #dce6e7; }
.listing-forbidden-tabs button {
  position: relative;
  min-height: 42px;
  padding: 0 2px;
  border: 0;
  color: #60757a;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.listing-forbidden-tabs button.active { color: #0b8c86; font-weight: 800; }
.listing-forbidden-tabs button.active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #1aa99f; }
.listing-forbidden-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 14px 0; }
.listing-forbidden-toolbar > div { display: flex; flex-wrap: wrap; gap: 7px; }
.listing-forbidden-toolbar label { display: grid; gap: 5px; color: #63787c; font-size: 10px; }
.listing-forbidden-toolbar input { min-width: 280px; min-height: 40px; padding: 0 11px; border: 1px solid #cfdddf; border-radius: 8px; outline: none; }
.listing-forbidden-toolbar input:focus { border-color: #1aa69d; box-shadow: 0 0 0 3px rgba(26, 166, 157, 0.1); }
.listing-forbidden-toolbar .cloud-toggle { border-color: #b9dfcf; color: #177e57; background: #eff9f4; }
.listing-forbidden-toolbar .cloud-toggle.off { border-color: #e4cfaa; color: #9b6814; background: #fff8e9; }
.listing-forbidden-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.listing-forbidden-table th,
.listing-forbidden-table td { padding: 13px 15px; border-bottom: 1px solid #e4eded; color: #314c51; text-align: left; font-size: 12px; }
.listing-forbidden-table th { color: #647b80; background: #f5f8f8; font-size: 11px; white-space: nowrap; }
.listing-forbidden-table tr:last-child td { border-bottom: 0; }
.listing-forbidden-table td strong,
.listing-forbidden-table td small { display: block; }
.listing-forbidden-table td small { margin-top: 4px; color: #8a9a9e; font-size: 10px; }
.listing-rule-severity { display: inline-flex; border-radius: 999px; padding: 5px 8px; font-size: 10px; font-weight: 900; white-space: nowrap; }
.listing-rule-severity.blocked { color: #b91c1c; background: #fee2e2; }
.listing-rule-severity.review { color: #9a6700; background: #fef3c7; }
.listing-forbidden-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: #74888c; font-size: 11px; }
.listing-forbidden-footer small { font-size: 10px; }

@media (max-width: 1180px) {
  .listing-record-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-record-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-settings-filter { grid-template-columns: 1fr 1fr auto auto; }
}

@media (max-width: 720px) {
  .ai-manual-controls { grid-template-columns: 1fr; }
  .ai-manual-controls p { grid-column: auto; }
  .listing-records-panel,
  .listing-settings-panel { padding: 15px; }
  .listing-record-metrics,
  .listing-record-toolbar,
  .listing-settings-filter,
  .listing-template-form-grid { grid-template-columns: 1fr; }
  .listing-template-form-grid label.wide { grid-column: auto; }
  .listing-settings-tabs { overflow-x: auto; padding: 0; }
  .listing-settings-tabs button { flex: 0 0 auto; }
  .listing-settings-notice { align-items: flex-start; flex-direction: column; gap: 4px; }
  .listing-record-batchbar,
  .listing-forbidden-toolbar,
  .listing-forbidden-footer { align-items: flex-start; flex-direction: column; }
  .listing-forbidden-toolbar label,
  .listing-forbidden-toolbar input { width: 100%; min-width: 0; }
}

/* Keep compact ERP rules last so legacy order-card styles cannot override them. */
body .erp-order-center { display: block; gap: 0; }
body .erp-order-workspace { padding: 0; overflow: hidden; border-radius: 15px; }
body .erp-order-status-tabs { display: flex; align-items: center; gap: 2px; padding: 12px 16px; border-bottom: 1px solid #e2ebec; background: #fff; }
body .erp-order-status-tabs button { gap: 6px; padding: 8px 11px; border: 0; border-radius: 8px; background: transparent; color: #77898c; }
body .erp-order-status-tabs button.active { border: 0; background: #eef8f7; color: #0a7f7c; }
body .erp-order-table-wrap { min-height: 390px; padding: 0 10px; }
body .erp-order-table { min-width: 1380px; border-collapse: collapse; border-spacing: 0; }
body .erp-order-table th { padding: 10px 11px; border: 0; border-bottom: 1px solid #dce6e8; border-radius: 0; background: #f3f6f8; color: #557176; }
body .erp-order-table td { padding: 12px 11px; border-bottom: 1px solid #e9eff0; background: #fff; }
body .erp-order-pagination { padding: 0; }
body .erp-order-note-editor { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1280px) {
  body .erp-order-command-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body .erp-order-command-bar .erp-order-date-range,
  body .erp-order-command-bar .erp-order-search { grid-column: span 2; }
}
@media (max-width: 760px) {
  body .erp-order-command-bar { grid-template-columns: 1fr; }
  body .erp-order-command-bar .erp-order-date-range,
  body .erp-order-command-bar .erp-order-search { grid-column: auto; }
  body .erp-order-note-editor { grid-template-columns: 1fr; }
}

/* ERP order copy controls, logistics entry and right-side detail drawer. */
body .erp-order-product-image { position: relative; display: grid; place-items: center; overflow: hidden; color: #0a8d88; background: #f1f7f7; font-size: 11px; font-weight: 900; }
body .erp-order-product-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
body .erp-order-copy-value { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: inherit; font: inherit; }
body .erp-order-copy-value > button { min-width: 0; padding: 1px 4px; border: 0; border-radius: 4px; color: #159a95; background: #eaf8f7; font-size: 8px; line-height: 1.45; cursor: pointer; }
body .erp-order-copy-value > button:hover { color: #fff; background: #159a95; }
body .erp-order-copy-empty { color: #9aa9ab; }
body .erp-order-product-meta > span,
body .erp-order-store-line > span { display: inline-flex; align-items: center; gap: 3px; }
body .erp-order-logistics-cell { align-content: start; }
body .erp-order-logistics-open { display: grid; gap: 5px; width: 100%; padding: 8px 9px; border: 1px solid #d6e1ff; border-radius: 8px; color: #3954d8; background: #f1f4ff; text-align: left; cursor: pointer; }
body .erp-order-logistics-open strong { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: inherit; }
body .erp-order-logistics-open em { color: #7183df; font-size: 8px; font-style: normal; font-weight: 700; white-space: nowrap; }
body .erp-order-logistics-open span { color: #71809b; }
body .erp-order-logistics-open:hover { border-color: #8ca0ff; box-shadow: 0 4px 12px rgba(72, 91, 193, .12); transform: translateY(-1px); }

body .erp-order-detail-drawer { position: fixed; inset: 0 0 0 auto; width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 0; box-shadow: -24px 0 70px rgba(16, 38, 43, .2); }
body .erp-order-detail-drawer::backdrop { background: rgba(17, 29, 32, .52); backdrop-filter: none; }
body .erp-order-detail-drawer .erp-order-dialog-shell { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 0; border-left: 1px solid #d9e5e6; border-radius: 0; }
body .erp-order-detail-drawer .erp-order-dialog-shell > header { flex: 0 0 auto; padding: 18px 20px; background: #fff; }
body .erp-order-detail-drawer .erp-order-dialog-shell > header h2 { font-size: 18px; }
body .erp-order-detail-scroll { flex: 1 1 auto; overflow-y: auto; padding: 14px; background: #f7f9f9; scrollbar-width: thin; }
body .erp-order-detail-drawer .erp-order-detail-body { padding: 0; }
body .erp-order-drawer-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
body .erp-order-drawer-summary > div { min-width: 0; padding: 12px 8px; border: 1px solid #e0e8e9; border-radius: 10px; background: #fff; text-align: center; }
body .erp-order-drawer-summary > div > span { display: block; margin-bottom: 7px; color: #73878b; font-size: 9px; }
body .erp-order-drawer-summary > div > strong { display: flex; justify-content: center; min-width: 0; color: #2c454a; font-size: 11px; }
body .erp-order-drawer-summary .erp-order-copy-value { flex-wrap: wrap; justify-content: center; overflow-wrap: anywhere; }
body .erp-order-drawer-logistics,
body .erp-order-detail-products { margin-top: 12px; padding: 13px; border: 1px solid #dfe8e9; border-radius: 12px; background: #fff; }
body .erp-order-drawer-section-title { margin-bottom: 10px; }
body .erp-order-drawer-section-title > span { color: #16968f; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
body .erp-order-drawer-section-title h3 { margin: 3px 0 0; color: #27464a; font-size: 13px; }
body .erp-order-logistics-card { padding: 12px; border: 1px solid #ccdcff; border-radius: 10px; background: #eef4ff; }
body .erp-order-logistics-card > strong { display: block; margin-bottom: 10px; color: #304c6d; font-size: 12px; }
body .erp-order-logistics-card dl { display: grid; gap: 7px; margin: 0; }
body .erp-order-logistics-card dl > div { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 8px; }
body .erp-order-logistics-card dt { color: #788b9f; font-size: 9px; }
body .erp-order-logistics-card dd { min-width: 0; margin: 0; color: #35516f; font-size: 10px; font-weight: 700; overflow-wrap: anywhere; }
body .erp-order-drawer-finance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
body .erp-order-drawer-finance > div { padding: 11px; border: 1px solid #dfe8e9; border-radius: 10px; background: #fff; }
body .erp-order-drawer-finance span,
body .erp-order-drawer-finance small { display: block; color: #809093; font-size: 8px; }
body .erp-order-drawer-finance strong { display: block; margin: 5px 0 2px; color: #09856d; font-size: 14px; }
body .erp-order-detail-drawer .erp-order-detail-products { padding: 13px; }
body .erp-order-detail-drawer .erp-order-detail-product { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border: 0; border-bottom: 1px solid #e8eeee; border-radius: 0; background: transparent; }
body .erp-order-detail-drawer .erp-order-detail-product:last-child { border-bottom: 0; }
body .erp-order-detail-product-image { position: relative; display: grid; place-items: center; width: 54px; height: 54px; overflow: hidden; border: 1px solid #dde7e8; border-radius: 8px; color: #0a8d88; background: #f1f7f7; font-size: 10px; font-weight: 900; }
body .erp-order-detail-product-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
body .erp-order-detail-product-copy { display: grid; gap: 4px; min-width: 0; }
body .erp-order-detail-product-copy > strong { overflow: hidden; color: #314b50; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
body .erp-order-detail-product-copy > span { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; color: #718589; font-size: 8px; }
body .erp-order-detail-drawer .erp-order-detail-product > b { color: #158e88; font-size: 9px; white-space: nowrap; }
body .erp-order-detail-drawer .erp-order-note-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; padding: 14px; border: 1px solid #bfe7d4; border-radius: 12px; background: #f1fbf6; }
body .erp-order-detail-drawer .erp-order-procurement-heading { display: flex; grid-column: 1 / -1; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
body .erp-order-procurement-heading span { color: #128d66; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
body .erp-order-procurement-heading h3 { margin: 3px 0 0; color: #255848; font-size: 13px; }
body .erp-order-procurement-heading small { color: #78948a; font-size: 8px; }
body .erp-order-detail-drawer .erp-order-note-wide { grid-column: 1 / -1; }
body .erp-order-detail-drawer .erp-order-dialog-shell > footer { flex: 0 0 auto; padding: 12px 16px; border-top: 1px solid #dfe8e9; background: #fff; }
body .erp-order-detail-drawer .erp-order-dialog-shell > footer > span { max-width: 58%; }

@media (max-width: 620px) {
  body .erp-order-drawer-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .erp-order-detail-drawer .erp-order-note-editor { grid-template-columns: 1fr; }
  body .erp-order-detail-drawer .erp-order-procurement-heading,
  body .erp-order-detail-drawer .erp-order-note-wide { grid-column: auto; }
  body .erp-order-detail-drawer .erp-order-procurement-heading { align-items: flex-start; flex-direction: column; }
  body .erp-order-detail-drawer .erp-order-dialog-shell > footer { align-items: stretch; }
  body .erp-order-detail-drawer .erp-order-dialog-shell > footer > span { max-width: none; }
}

/* Framed order date-range picker. */
body .erp-order-workspace { overflow: visible; }
body .erp-order-command-bar { position: relative; z-index: 20; border-radius: 15px 15px 0 0; }
body .erp-order-date-range { position: relative; display: block; height: 39px; padding: 0; }
body .erp-order-date-trigger { display: grid; grid-template-columns: auto minmax(78px, 1fr) auto minmax(78px, 1fr) auto; align-items: center; gap: 9px; width: 100%; height: 100%; padding: 0 10px; border: 0; border-radius: 8px; color: #45646a; background: transparent; cursor: pointer; text-align: left; }
body .erp-order-date-trigger > span { color: #83969a; font-size: 10px; }
body .erp-order-date-trigger > strong { overflow: hidden; color: #35575d; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
body .erp-order-date-trigger > i { color: #829497; font-style: normal; }
body .erp-order-date-trigger > b { color: #819397; font-size: 12px; }
body .erp-order-date-trigger[aria-expanded="true"] { box-shadow: inset 0 0 0 1px #6c7cf0, 0 0 0 3px rgba(108, 124, 240, .1); }
body .erp-order-date-popover[hidden] { display: none !important; }
body .erp-order-date-popover { position: absolute; top: calc(100% + 9px); left: 50%; z-index: 120; display: grid; grid-template-columns: 112px minmax(0, 1fr); width: min(760px, calc(100vw - 44px)); min-height: 390px; overflow: hidden; border: 1px solid #dbe4e6; border-radius: 10px; background: #fff; box-shadow: 0 22px 54px rgba(26, 47, 54, .2); transform: translateX(-50%); }
body .erp-order-date-popover::before { position: absolute; top: -6px; left: 49%; width: 12px; height: 12px; border-top: 1px solid #dbe4e6; border-left: 1px solid #dbe4e6; background: #fff; content: ""; transform: rotate(45deg); }
body .erp-order-date-presets { display: grid; align-content: start; gap: 2px; padding: 12px 8px; border-right: 1px solid #e2e9ea; background: #fbfcfc; }
body .erp-order-date-presets button { padding: 10px 12px; border: 0; border-radius: 7px; color: #596d72; background: transparent; font-size: 11px; text-align: left; cursor: pointer; }
body .erp-order-date-presets button:hover { color: #126f6b; background: #ebf7f5; }
body .erp-order-date-picker-main { display: grid; grid-template-rows: auto auto 1fr auto; min-width: 0; }
body .erp-order-date-draft { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 10px 12px 7px; }
body .erp-order-date-draft span { min-height: 32px; padding: 8px 10px; border: 1px solid #d9e3e5; border-radius: 6px; color: #526b70; background: #fff; font-size: 10px; }
body .erp-order-date-draft i { color: #9aabad; font-style: normal; }
body .erp-order-calendar-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 7px; }
body .erp-order-calendar-nav button { min-width: 30px; height: 28px; padding: 0 9px; border: 0; border-radius: 6px; color: #64787c; background: #f4f7f7; cursor: pointer; }
body .erp-order-calendar-nav button:nth-child(2) { font-size: 9px; }
body .erp-order-calendar-nav button:hover { color: #087e78; background: #e8f5f4; }
body .erp-order-calendars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #e5ebec; }
body .erp-order-calendars > section { min-width: 0; padding: 12px 14px 10px; }
body .erp-order-calendars > section + section { border-left: 1px solid #e5ebec; }
body .erp-order-calendars section > header { margin-bottom: 10px; color: #586c71; text-align: center; }
body .erp-order-calendars section > header strong { font-size: 12px; }
body .erp-order-calendar-weekdays,
body .erp-order-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
body .erp-order-calendar-weekdays span { padding: 5px 0 7px; color: #8b9a9d; font-size: 8px; text-align: center; }
body .erp-order-calendar-days button { position: relative; min-width: 0; height: 29px; padding: 0; border: 0; color: #52656a; background: transparent; font-size: 9px; cursor: pointer; }
body .erp-order-calendar-days button:hover { color: #087e78; background: #e9f7f5; }
body .erp-order-calendar-days button.outside { color: #bdc7c9; }
body .erp-order-calendar-days button.in-range { color: #0b716c; background: #e0f5f1; }
body .erp-order-calendar-days button.range-start,
body .erp-order-calendar-days button.range-end { border-radius: 6px; color: #fff; background: #159b93; font-weight: 800; }
body .erp-order-calendar-days button.today:not(.range-start):not(.range-end)::after { position: absolute; right: 9px; bottom: 2px; left: 9px; height: 2px; border-radius: 2px; background: #596ee8; content: ""; }
body .erp-order-date-picker-main > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid #e1e8e9; background: #fbfcfc; }
body .erp-order-date-picker-main > footer > button { padding: 6px 8px; border: 0; color: #6b7d81; background: transparent; cursor: pointer; }
body .erp-order-date-picker-main > footer > div { display: flex; gap: 7px; }
body .erp-order-date-picker-main > footer .primary-button,
body .erp-order-date-picker-main > footer .secondary-button { min-height: 31px; padding: 0 13px; }

@media (max-width: 760px) {
  body .erp-order-date-popover { grid-template-columns: 1fr; width: min(540px, calc(100vw - 24px)); max-height: calc(100vh - 140px); overflow-y: auto; }
  body .erp-order-date-presets { grid-template-columns: repeat(4, 1fr); padding: 7px; border-right: 0; border-bottom: 1px solid #e2e9ea; }
  body .erp-order-date-presets button { padding: 8px 4px; text-align: center; }
  body .erp-order-calendars { grid-template-columns: 1fr; }
  body .erp-order-calendars > section + section { display: none; }
}

/* Department-scoped order summary and organization management. */
body .erp-order-summary-view { gap: 12px; }
body .erp-order-summary-workspace { overflow: visible; }
body .erp-order-summary-command-bar { grid-template-columns: minmax(145px, .8fr) minmax(160px, .85fr) minmax(185px, 1fr) 112px minmax(310px, 1.45fr) minmax(270px, 1.35fr) auto auto; }
body .erp-order-summary-command-bar.is-department-hidden { grid-template-columns: minmax(170px, .9fr) minmax(200px, 1.05fr) 120px minmax(310px, 1.5fr) minmax(300px, 1.45fr) auto auto; }
body .erp-order-summary-date-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; height: 44px; padding: 0 8px; overflow: hidden; border: 1px solid #d7e1e3; border-radius: 8px; background: #fff; box-sizing: border-box; }
body .erp-order-summary-date-pair input { width: 100%; min-width: 0; height: 100%; padding: 0 3px; border: 0; color: #45646a; background: transparent; font-size: 11px; outline: none; box-sizing: border-box; }
body .erp-order-summary-date-pair i { color: #87999c; font-size: 10px; font-style: normal; }
body .erp-order-summary-orders { min-width: 1540px; }
body .erp-order-summary-orders th:first-child { width: 390px; text-align: left; }
body .erp-order-summary-orders td:first-child { text-align: left; }
body .erp-order-summary-orders th:nth-child(2) { width: 165px; }
body .erp-order-owner-cell { display: grid; align-content: start; gap: 5px; min-width: 145px; }
body .erp-order-owner-cell strong { color: #244d52; font-size: 11px; }
body .erp-order-owner-cell span { color: #819296; font-size: 9px; }
body .erp-order-owner-cell b,
body .erp-order-owner-cell em { width: fit-content; padding: 3px 7px; border-radius: 999px; font-size: 8px; font-style: normal; }
body .erp-order-owner-cell b { color: #155f80; background: #eaf5fb; }
body .erp-order-owner-cell em { color: #087c69; background: #e8f7f1; }
body .erp-order-summary-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 16px; border-top: 1px solid #e5eded; color: #718589; font-size: 10px; }
body .erp-order-summary-footer .erp-order-pagination { gap: 14px; }
body .erp-order-detail-drawer .erp-order-note-editor[hidden] { display: none !important; }
.erp-order-summary-heading-actions { display: flex; align-items: center; gap: 9px; }
.admin-department-panel { padding: 22px; }
.admin-department-form { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(280px, 1.6fr) auto; align-items: end; gap: 10px; margin: 16px 0 0; padding: 15px; border: 1px solid #d6e6e5; border-radius: 10px; background: #f5faf9; }
.admin-department-form label { display: grid; gap: 6px; color: #52686c; font-size: 10px; font-weight: 700; }
.admin-department-form input { min-height: 39px; padding: 0 11px; border: 1px solid #cbdadb; border-radius: 7px; color: #253f45; background: #fff; outline: none; }
.admin-department-form input:focus { border-color: #15978f; box-shadow: 0 0 0 3px rgba(21, 151, 143, .1); }
.admin-department-form button { min-height: 39px; }
.admin-department-table small { color: #849396; }
.admin-user-table td > select { min-width: 132px; min-height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #fff; }
.admin-user-table .admin-user-actions { min-width: 170px; }

@media (max-width: 1440px) {
  body .erp-order-summary-command-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body .erp-order-summary-command-bar .erp-order-summary-date-pair,
  body .erp-order-summary-command-bar .erp-order-search { grid-column: span 2; }
}
@media (max-width: 820px) {
  body .erp-order-summary-command-bar { grid-template-columns: 1fr; }
  body .erp-order-summary-command-bar .erp-order-summary-date-pair,
  body .erp-order-summary-command-bar .erp-order-search { grid-column: auto; }
  body .erp-order-summary-footer,
  .admin-department-form { grid-template-columns: 1fr; align-items: stretch; }
  body .erp-order-summary-footer { flex-direction: column; }
  .erp-order-summary-heading-actions { width: 100%; flex-wrap: wrap; }
  .erp-order-summary-heading-actions button { flex: 1 1 180px; }
}

/* Ozon platform status and cancellation lifecycle. */
body .erp-order-platform-state { display: flex; align-items: center; gap: 5px; min-width: 0; }
body .erp-order-platform-state > span { flex: 0 0 auto; padding: 2px 6px; border-radius: 999px; color: #376d79; background: #e9f4f7; font-size: 8px; font-weight: 800; }
body .erp-order-platform-state > em { overflow: hidden; color: #87979a; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
body .erp-order-platform-state.cancelled > span { color: #a33f45; background: #fde9eb; }
body .erp-order-platform-state.cancelled > em { color: #aa6368; }
body .erp-order-workflow-badge.cancelled { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .erp-order-money-cell .erp-order-cancelled-note { color: #b24c52; font-weight: 700; }
body .erp-order-finance-mode.cancelled { color: #a13f45; background: #fde9eb; }
body .erp-order-time-chip.cancelled { border-color: #f0c6c9; color: #a84a50; background: #fff4f5; }
body .erp-order-drawer-cancellation { margin-top: 12px; padding: 13px; border: 1px solid #efc5c8; border-radius: 12px; background: #fff7f7; }
body .erp-order-drawer-cancellation .erp-order-drawer-section-title > span { color: #b95057; }
body .erp-order-cancellation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
body .erp-order-cancellation-grid > div { min-width: 0; padding: 9px; border: 1px solid #f1d7d9; border-radius: 8px; background: #fff; }
body .erp-order-cancellation-grid span,
body .erp-order-drawer-cancellation > p span { display: block; color: #9a777a; font-size: 8px; }
body .erp-order-cancellation-grid strong { display: block; margin-top: 4px; overflow-wrap: anywhere; color: #824047; font-size: 9px; }
body .erp-order-drawer-cancellation > p { margin: 8px 0 0; padding: 10px; border-radius: 8px; background: #fcebed; }
body .erp-order-drawer-cancellation > p strong { display: block; margin-top: 5px; color: #7d3e45; font-size: 10px; }
@media (max-width: 620px) {
  body .erp-order-cancellation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 2026 visual refresh — premium white / black / gold system */
:root {
  --bg: #f7f6f2;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-solid: #ffffff;
  --surface-2: #f4f0e7;
  --ink: #141311;
  --muted: #706d65;
  --line: #e8e1d2;
  --text: var(--ink);
  --text-muted: var(--muted);
  --surface-muted: var(--surface-2);
  --accent: #c99b32;
  --accent-strong: #946814;
  --accent-2: #f1d77e;
  --charcoal: #111214;
  --charcoal-soft: #28282b;
  --gold: #cda13a;
  --gold-dark: #8c6112;
  --gold-soft: #f8edc8;
  --warning: #ad7507;
  --danger: #c93f46;
  --ok: #12825d;
  --shadow: 0 22px 48px rgba(56, 43, 13, 0.1);
  --shadow-soft: 0 10px 28px rgba(56, 43, 13, 0.075);
  --gold-shadow: 0 12px 26px rgba(174, 122, 16, 0.24);
  --radius: 18px;
  --glass: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 249, 231, 0.82);
}

html {
  color-scheme: light;
}

body {
  background:
    radial-gradient(circle at 8% -8%, rgba(224, 187, 90, 0.16), transparent 31%),
    radial-gradient(circle at 92% 2%, rgba(18, 18, 20, 0.07), transparent 29%),
    linear-gradient(180deg, #fbfaf7 0%, #f3f1eb 52%, #faf9f6 100%);
  color: var(--ink);
  font-family: Inter, "SF Pro Display", "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 14px;
  line-height: 1.56;
  letter-spacing: 0.005em;
}

button,
[role="button"],
a {
  -webkit-tap-highlight-color: transparent;
}

button,
[role="button"] {
  transition:
    transform 150ms cubic-bezier(.2, .8, .2, 1),
    box-shadow 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    filter 150ms ease;
}

button:not(:disabled):hover,
[role="button"]:not([aria-disabled="true"]):hover {
  transform: translateY(-1px);
}

button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active {
  transform: translateY(1px) scale(0.975);
  filter: saturate(0.96) brightness(0.97);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid rgba(201, 155, 50, 0.68);
  outline-offset: 2px;
}

input,
select,
textarea {
  border-color: #ded5c1;
  color: var(--ink);
  background-color: rgba(255, 255, 255, 0.94);
  font-family: inherit;
  font-size: 13px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #cdbd98;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 155, 50, 0.13);
  outline: none;
}

::selection {
  color: #111214;
  background: #f0d477;
}

.app-shell {
  grid-template-columns: 268px minmax(0, 1fr);
}

.sidebar {
  border-right: 1px solid #342b18;
  background:
    radial-gradient(circle at 35% 0%, rgba(213, 169, 63, 0.18), transparent 27%),
    linear-gradient(180deg, #171719 0%, #0d0e10 58%, #151516 100%);
  box-shadow: 10px 0 34px rgba(13, 14, 16, 0.14);
  scrollbar-color: rgba(205, 161, 58, 0.42) transparent;
}

.brand {
  border-bottom-color: rgba(226, 191, 104, 0.18);
}

.brand-mark,
.brand-gold-mark,
.auth-brand-mark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #e0bd65;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.28), transparent 31%),
    linear-gradient(145deg, #282012 0%, #0e0f11 48%, #21180a 100%);
  box-shadow:
    0 12px 25px rgba(0, 0, 0, 0.3),
    0 0 0 3px rgba(205, 161, 58, 0.08),
    inset 0 1px 0 rgba(255, 243, 196, 0.38),
    inset 0 -10px 24px rgba(0, 0, 0, 0.28);
}

.brand-mark::after,
.brand-gold-mark::after,
.auth-brand-mark::after {
  position: absolute;
  inset: -60% auto -60% -55%;
  width: 44%;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 244, 204, 0.46), transparent);
  content: "";
  transform: rotate(24deg);
  animation: brandGoldSweep 7s ease-in-out infinite;
}

@keyframes brandGoldSweep {
  0%, 70% { left: -65%; opacity: 0; }
  78% { opacity: 1; }
  92%, 100% { left: 135%; opacity: 0; }
}

.brand-mark > span,
.brand-gold-mark,
.auth-brand-mark > span {
  color: #f2d77b;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.08em;
  line-height: 1;
  text-shadow: 0 1px 0 #fff1b6, 0 3px 10px rgba(202, 154, 39, 0.34);
}

.brand-mark {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 15px;
}

.brand > div:last-child strong {
  color: #fffaf0;
  font-size: 16px;
  font-weight: 820;
  letter-spacing: -0.02em;
}

.brand > div:last-child span {
  color: #b7aa8a;
  font-size: 10px;
}

.nav-section-label {
  color: #81765d;
  font-size: 9px;
  letter-spacing: 1.35px;
}

.nav-item,
.nav-download-link,
.operations-nav-toggle {
  color: #c5c2ba;
  font-size: 12.5px;
  font-weight: 650;
}

.nav-item:hover,
.nav-download-link:hover,
.operations-nav-toggle:hover {
  color: #fff4d2;
  background: rgba(205, 161, 58, 0.11);
  box-shadow: inset 0 0 0 1px rgba(225, 187, 93, 0.08);
}

.nav-item.active {
  color: #15130e;
  background:
    linear-gradient(180deg, rgba(255, 247, 204, 0.48), transparent 46%),
    linear-gradient(135deg, #e9c768 0%, #bd8c22 100%);
  box-shadow:
    0 10px 24px rgba(163, 112, 14, 0.35),
    inset 0 1px 0 rgba(255, 252, 229, 0.7);
}

.nav-item.active::before {
  color: #15130e;
}

.data-market-nav-toggle b,
.handbook-nav-toggle b,
.operations-nav-toggle b {
  color: #81765d;
}

.data-market-subnav,
.handbook-subnav,
.operations-nav-grid {
  border-left-color: rgba(222, 184, 92, 0.22);
}

.data-market-subnav-item,
.handbook-subnav-item,
.operations-nav-item {
  color: #a9a49a;
  font-size: 11px;
}

.data-market-subnav-item:hover,
.handbook-subnav-item:hover,
.operations-nav-item:hover {
  color: #f8e9bd;
  background: rgba(205, 161, 58, 0.09);
}

.data-market-subnav-item.active,
.handbook-subnav-item.active,
.operations-nav-item.active {
  color: #f3d982;
  background: rgba(205, 161, 58, 0.15);
}

.operations-nav-item.active::before {
  background: #d8ad47;
  box-shadow: 0 0 0 4px rgba(205, 161, 58, 0.15);
}

.operations-store-icon {
  color: #e3c46f;
  background: rgba(205, 161, 58, 0.12);
}

.sidebar-token-card,
.sidebar .store-box,
.sidebar .account-box {
  border-color: rgba(224, 189, 101, 0.2);
  color: #f7f2e5;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.sidebar .store-box > span,
.sidebar .account-box > span {
  color: #8d8166;
}

.sidebar .store-box strong,
.sidebar .account-box strong {
  color: #fffaf0;
}

.sidebar .store-box small,
.sidebar-token-card strong {
  color: #e4c56e;
}

.workspace {
  gap: 18px;
  padding: 18px 26px 44px;
}

.topbar {
  min-height: 82px;
  border-color: rgba(218, 204, 170, 0.86);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 36px rgba(68, 52, 18, 0.085), inset 0 1px 0 #fff;
}

.workspace-heading-mark {
  border-color: #d7b65e;
  color: #f3d77a;
  background: linear-gradient(145deg, #252219, #0f1012);
  box-shadow: 0 9px 20px rgba(47, 35, 9, 0.18), inset 0 1px 0 rgba(255,255,255,.14);
}

.workspace-heading h1 {
  color: #171614;
  font-size: 22px;
  font-weight: 820;
  letter-spacing: -0.04em;
}

.workspace-heading .eyebrow {
  color: #9a7724;
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: 0.11em;
}

.workspace-subtitle {
  color: #77736b;
  font-size: 12px;
}

.topbar-store-pill {
  border-color: #ded3bb;
  background: rgba(255,255,255,.9);
  box-shadow: 0 7px 18px rgba(58, 43, 12, 0.07);
}

.topbar-membership-button {
  border-color: #d5ae4b;
  color: #30250c;
  background: linear-gradient(180deg, #fff3c5, #e7bd58);
  box-shadow: 0 8px 18px rgba(177, 125, 20, .16), inset 0 1px 0 rgba(255,255,255,.7);
}

.primary-button,
.auth-submit {
  border-color: #ac7d1d;
  color: #15130e;
  background:
    linear-gradient(180deg, rgba(255, 250, 222, 0.52), transparent 49%),
    linear-gradient(135deg, #eac968 0%, #c39429 100%);
  box-shadow:
    0 10px 23px rgba(166, 113, 12, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(91, 58, 2, 0.16);
  font-weight: 820;
}

.primary-button:hover,
.auth-submit:hover {
  box-shadow:
    0 14px 28px rgba(166, 113, 12, 0.31),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  filter: saturate(1.05);
}

.secondary-button,
.icon-button,
.segment {
  border-color: #ddd2ba;
  color: #2b2924;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 5px 14px rgba(56, 43, 13, 0.055), inset 0 1px 0 #fff;
}

.secondary-button:hover,
.icon-button:hover,
.segment:hover {
  border-color: #caa34c;
  color: #7e570e;
  background: #fffaf0;
  box-shadow: 0 9px 19px rgba(149, 101, 11, 0.12);
}

.segment.active {
  color: #f4d878;
  background: linear-gradient(145deg, #252525, #111214);
  box-shadow: 0 8px 18px rgba(17, 18, 20, 0.22), inset 0 1px 0 rgba(255,255,255,.12);
}

.primary-button,
.secondary-button,
.icon-button,
.segment,
.topbar-membership-button {
  font-size: 12.5px;
  letter-spacing: 0.01em;
}

.panel,
.command-strip,
.metric-card,
.overview-feature-card,
.overview-welcome-panel,
.overview-playbook-card,
.overview-quick-panel {
  border-color: rgba(221, 209, 180, 0.9);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 30px rgba(62, 47, 13, 0.068), inset 0 1px 0 rgba(255,255,255,.9);
}

.panel-header h2 {
  color: #181713;
  font-size: 17px;
  font-weight: 820;
  letter-spacing: -0.025em;
}

.panel-header p {
  color: #77736a;
  font-size: 12px;
}

.segmented {
  border-color: #e3dac7;
  background: rgba(246, 242, 232, 0.92);
}

table thead th {
  border-color: #e8e0cf;
  color: #625b4b;
  background: #f7f3e9;
  font-size: 10.5px;
  font-weight: 820;
  letter-spacing: 0.02em;
}

table tbody td {
  border-color: #eee7d9;
  color: #26241f;
  font-size: 12px;
}

table tbody tr:hover td {
  background-color: rgba(248, 238, 207, 0.42);
}

.metric-card strong,
.stat-card strong,
.summary-card strong {
  color: #171511;
  font-weight: 850;
}

.metric-card::before,
.summary-card::before {
  background: linear-gradient(90deg, #d9b34e, #9d7018);
}

.status-chip.warning,
.badge.warning,
.erp-order-workflow-badge.pending {
  color: #75500b;
  background: #fbefd0;
}

/* Dashboard becomes the strongest black-and-gold brand moment. */
.overview-command-center,
.overview-brand-banner {
  border-color: rgba(225, 188, 93, 0.45);
  color: #fffaf0;
  background:
    radial-gradient(circle at 90% 12%, rgba(224, 184, 79, 0.25), transparent 27%),
    linear-gradient(135deg, #1d1d1f 0%, #0e0f11 62%, #231b0d 100%);
  box-shadow: 0 22px 46px rgba(20, 18, 12, 0.21), inset 0 1px 0 rgba(255,255,255,.1);
}

.overview-live-badge,
.overview-banner-kicker {
  border-color: rgba(232, 197, 108, .34);
  color: #efd37d;
  background: rgba(205, 161, 58, .12);
}

.overview-command-copy h2,
.overview-brand-banner h2 {
  color: #fffaf0;
}

.overview-command-copy > p,
.overview-brand-banner p {
  color: #bdb6a6;
}

.overview-flow li {
  border-color: rgba(230, 196, 108, 0.2);
  background: rgba(255,255,255,.055);
}

.overview-flow li b,
.overview-feature-icon,
.overview-playbook-card > header > span {
  color: #17140c;
  background: linear-gradient(145deg, #f2d77d, #c49228);
  box-shadow: 0 8px 18px rgba(166, 113, 12, .2), inset 0 1px 0 rgba(255,255,255,.65);
}

.overview-feature-card:hover,
.overview-playbook-card:hover {
  border-color: #d8b75d;
  box-shadow: 0 17px 34px rgba(118, 84, 13, 0.12);
}

.overview-feature-arrow,
.overview-web-shortcuts a:hover,
.overview-web-shortcuts button:hover {
  color: #946814;
  border-color: #d8b75d;
  background: #fff8e7;
}

.overview-playbook-card.playbook-start,
.overview-playbook-card.playbook-operate,
.overview-playbook-card.playbook-grow {
  background: linear-gradient(145deg, #fffaf0, #fff 56%);
}

/* Login and marketing surface use the same visual language. */
.auth-landing,
.auth-gate {
  color: #181713;
  background:
    radial-gradient(circle at 8% 0%, rgba(224, 187, 90, .17), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(14, 15, 17, .08), transparent 26%),
    linear-gradient(180deg, #fffdf8 0%, #f7f3e9 52%, #fff 100%);
}

.auth-landing-header {
  border-bottom-color: rgba(218, 203, 168, .84);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 10px 28px rgba(50, 38, 10, .075);
  backdrop-filter: blur(18px);
}

.auth-landing-logo {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 14px;
}

.auth-landing-brand strong {
  color: #171614;
  font-size: 16px;
  letter-spacing: -0.025em;
}

.auth-landing-brand small {
  color: #8a8374;
}

.auth-landing-header nav a,
.auth-landing-header-actions > a {
  color: #5e594f;
}

.auth-landing-header nav a:hover,
.auth-landing-header-actions > a:hover {
  color: #946814;
}

.auth-landing-login,
.auth-landing-register,
.auth-landing-hero-actions button,
.auth-landing-hero-actions a {
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 820;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, filter 150ms ease;
}

.auth-landing-login,
.auth-landing-hero-actions a {
  border-color: #d5c8aa;
  color: #27241f;
  background: rgba(255,255,255,.88);
  box-shadow: 0 7px 18px rgba(57, 43, 12, .08), inset 0 1px 0 #fff;
}

.auth-landing-register,
.auth-landing-hero-actions button {
  border-color: #ab7a18;
  color: #15130e;
  background:
    linear-gradient(180deg, rgba(255,255,255,.48), transparent 52%),
    linear-gradient(135deg, #edce70, #bf8d21);
  box-shadow: 0 12px 25px rgba(158, 105, 10, .25), inset 0 1px 0 rgba(255,255,255,.7);
}

.auth-landing-kicker {
  color: #9b701b;
  background: #fbefd0;
}

.auth-landing-hero-copy h1 {
  color: #151412;
  font-size: clamp(40px, 4.4vw, 68px);
  font-weight: 900;
  letter-spacing: -0.055em;
}

.auth-landing-hero-copy > p {
  color: #6f6a60;
  font-size: 15px;
  line-height: 1.78;
}

.auth-landing-trust-row i {
  color: #19150c;
  background: #e1bc59;
}

.auth-landing-section-heading h2,
.auth-showcase-copy h2 {
  color: #181713;
  font-weight: 880;
  letter-spacing: -0.04em;
}

.auth-feature-grid > article,
.auth-listing-capabilities > div,
.auth-card,
.auth-listing-window {
  border-color: #e3d7bd;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 32px rgba(64, 48, 12, .085);
}

.auth-feature-grid > article b,
.auth-listing-capabilities b {
  color: #9b6e13;
}

.auth-tabs button.active {
  color: #f0d477;
  background: #151618;
}

.auth-card .auth-tabs {
  border: 1px solid #e2d7bf;
  background: #f4f0e7;
}

.auth-card .auth-tabs button {
  color: #6f695d;
}

.auth-card .auth-tabs button.active {
  color: #f2d77c;
  background: linear-gradient(145deg, #27251f, #111214);
  box-shadow: 0 7px 15px rgba(17, 18, 20, .2), inset 0 1px 0 rgba(255,255,255,.12);
}

.auth-card .eyebrow {
  color: #a3771f;
}

.overview-command-center .overview-quick-actions .primary-button {
  border-color: #ad7d19;
  color: #17140d;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), transparent 52%),
    linear-gradient(135deg, #edce70, #bf8d21);
  box-shadow: 0 10px 22px rgba(165, 112, 12, .28), inset 0 1px 0 rgba(255,255,255,.72);
}

.overview-command-center .overview-feature-card {
  border-color: rgba(221, 200, 151, .72);
  color: #252219;
  background: rgba(255, 253, 247, .92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14), inset 0 1px 0 #fff;
}

.overview-command-center .overview-feature-card strong {
  color: #1e1b14;
}

.overview-command-center .overview-feature-card small {
  color: #777064;
}

.overview-command-center .overview-feature-arrow {
  color: #8c6112;
  border-color: #e2cd96;
  background: #fff7df;
}

.auth-showcase-copy button {
  border-color: #c99b32;
  color: #1c1810;
  background: linear-gradient(135deg, #ecd073, #c08e22);
  box-shadow: 0 10px 22px rgba(165, 112, 12, .23);
}

/* Keep decorative brand accents in the same black-gold family. */
.auth-landing-brand {
  color: inherit;
  text-decoration: none;
}

.auth-landing-header nav a::after,
.overview-quick-panel > header i,
.overview-learning-panel > header i {
  background: linear-gradient(180deg, #ebcc6c, #a87516);
}

.auth-landing-header nav a:hover,
.auth-landing-header-actions > a,
.auth-landing-login,
.auth-landing-kicker,
.auth-landing-section-heading > span,
.auth-showcase-copy > span,
.auth-landing-hero-actions > a,
.auth-showcase-product b,
.auth-listing-capabilities b {
  color: #946813;
}

.auth-landing-header-actions > a,
.auth-landing-login,
.auth-landing-hero-actions > a {
  border-color: #dcc78e;
  background: #fffaf0;
}

.auth-landing-register,
.auth-landing-hero-actions > button {
  border-color: #b9871f;
  color: #1c1810;
  background:
    linear-gradient(180deg, rgba(255,255,255,.48), transparent 52%),
    linear-gradient(135deg, #edce70, #bf8d21);
  box-shadow: 0 9px 20px rgba(165, 112, 12, .24), inset 0 1px 0 rgba(255,255,255,.72);
}

.auth-landing-kicker,
.auth-landing-section-heading > span,
.auth-showcase-copy > span,
.auth-landing-trust-row i,
.overview-learning-empty-icon {
  border-color: #e4d29e;
  background: #fff5d8;
}

.auth-landing-trust-row i,
.overview-learning-empty-icon {
  color: #9a6c13;
}

.overview-web-shortcuts i,
.overview-web-shortcuts a:nth-child(2) i,
.overview-web-shortcuts a:nth-child(3) i,
.overview-web-shortcuts button:nth-child(6) i,
.overview-web-shortcuts button:nth-child(7) i,
.overview-web-shortcuts button:nth-child(8) i,
.auth-feature-grid article > i,
.auth-feature-grid article:nth-child(2) > i,
.auth-feature-grid article:nth-child(3) > i,
.auth-showcase-copy > ul i {
  color: #17140d;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), transparent 48%),
    linear-gradient(145deg, #edce70, #aa7715);
  box-shadow: 0 10px 22px rgba(166, 115, 18, .22), inset 0 1px 0 rgba(255,255,255,.68);
}

.auth-landing-footer {
  color: rgba(255, 249, 232, .68);
  background:
    radial-gradient(circle at 75% 0%, rgba(205,161,58,.16), transparent 32%),
    #101113;
}

.auth-landing-footer .auth-landing-brand strong {
  color: #fffaf0;
}

/* Super-admin password recovery */
.auth-password-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -2px 1px 1px;
  color: #8d8677;
  font-size: 10px;
}

.auth-password-help button {
  border: 0;
  padding: 3px 0;
  color: #946813;
  background: transparent;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.auth-password-help button:hover {
  color: #17140e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.password-recovery-dialog {
  width: min(600px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  overflow: visible;
  border: 0;
  border-radius: 28px;
  padding: 0;
  color: #211f1a;
  background: transparent;
  box-shadow: 0 34px 90px rgba(23, 18, 8, .3);
}

.password-recovery-dialog::backdrop {
  background: rgba(21, 19, 14, .58);
  backdrop-filter: blur(9px);
}

.password-recovery-card {
  position: relative;
  display: grid;
  gap: 18px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border: 1px solid #dfc98f;
  border-radius: 28px;
  padding: 28px;
  background:
    radial-gradient(circle at 92% 0%, rgba(222, 183, 76, .22), transparent 30%),
    linear-gradient(145deg, #fffdf8, #fff 62%, #fbf4e4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.password-recovery-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  width: 96px;
  height: 4px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, #f2d77a, #aa7615);
}

.password-recovery-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.password-recovery-card > header span {
  color: #a1731c;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.4px;
}

.password-recovery-card > header h2 {
  margin: 5px 0 0;
  color: #171511;
  font-size: 24px;
  letter-spacing: -.7px;
}

.password-recovery-card > header button {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid #e4d7b9;
  border-radius: 50%;
  color: #6d6658;
  background: rgba(255,255,255,.78);
  font-size: 21px;
  cursor: pointer;
}

.password-recovery-intro {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #eadbb7;
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255, 248, 229, .82);
}

.password-recovery-intro i {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border-radius: 15px;
  color: #17140d;
  background: linear-gradient(145deg, #f2d77a, #b57f19);
  box-shadow: 0 9px 20px rgba(164, 108, 11, .22), inset 0 1px 0 rgba(255,255,255,.7);
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
}

.password-recovery-intro div {
  display: grid;
  gap: 4px;
}

.password-recovery-intro strong {
  color: #27231b;
  font-size: 13px;
}

.password-recovery-intro p {
  margin: 0;
  color: #7d7463;
  font-size: 10px;
  line-height: 1.6;
}

.password-recovery-mode {
  margin: 0;
  border-left: 3px solid #c89425;
  border-radius: 0 10px 10px 0;
  padding: 9px 12px;
  color: #6f6249;
  background: #fbf5e7;
  font-size: 10.5px;
  line-height: 1.55;
}

.password-recovery-mode[data-mode="local"] {
  border-left-color: #249a75;
  color: #32725e;
  background: #eef9f4;
}

.password-recovery-mode[data-mode="unavailable"] {
  border-left-color: #c66b58;
  color: #8c4b3e;
  background: #fff2ef;
}

.password-recovery-card > label,
.password-recovery-passwords label {
  display: grid;
  gap: 7px;
  color: #5e574a;
  font-size: 10.5px;
  font-weight: 800;
}

.password-recovery-card label[hidden] {
  display: none;
}

.password-recovery-card input {
  width: 100%;
  min-height: 47px;
  box-sizing: border-box;
  border: 1px solid #ded4bf;
  border-radius: 12px;
  padding: 0 14px;
  color: #24211b;
  outline: none;
  background: rgba(255,255,255,.9);
  font-size: 12px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.password-recovery-card input:focus {
  border-color: #bb8720;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(190, 139, 35, .12);
}

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

.password-recovery-message {
  min-height: 18px;
  margin: -3px 0 0;
  color: #696254;
  font-size: 10.5px;
}

.password-recovery-message[data-type="error"] {
  color: #b34332;
}

.password-recovery-card > footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #eee4ce;
  padding-top: 18px;
}

.password-recovery-card > footer button {
  min-height: 43px;
  border-radius: 999px;
  padding: 0 22px;
  font-size: 11px;
  font-weight: 850;
}

.password-recovery-card > footer .primary-button {
  border-color: #aa7716;
  color: #17140d;
  background: linear-gradient(180deg, rgba(255,255,255,.48), transparent 52%), linear-gradient(135deg, #efd273, #bc881d);
  box-shadow: 0 10px 22px rgba(165, 112, 12, .23), inset 0 1px 0 rgba(255,255,255,.72);
}

.password-recovery-card > footer button:disabled {
  cursor: not-allowed;
  filter: grayscale(.45);
  opacity: .55;
}

@media (max-width: 620px) {
  .password-recovery-card {
    gap: 15px;
    padding: 23px 18px;
  }

  .password-recovery-passwords {
    grid-template-columns: 1fr;
  }

  .password-recovery-card > footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .password-recovery-card > footer button {
    padding: 0 12px;
  }
}

.auth-landing-footer .auth-landing-brand small {
  color: #a99b7b;
}

.auth-landing-footer > button {
  border-color: rgba(226, 190, 98, .34);
  color: #efd47d;
  background: rgba(205,161,58,.1);
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark::after,
  .brand-gold-mark::after,
  .auth-brand-mark::after,
  .page-loading-mascot::after,
  .page-loading-mascot img {
    animation: none;
  }

  button,
  [role="button"] {
    transition: none;
  }
}

@media (max-width: 760px) {
  body { font-size: 13px; }
  .workspace { padding: 12px 12px 34px; }
  .workspace-heading h1 { font-size: 19px; }
  .topbar { min-height: 72px; border-radius: 17px; }
  .auth-landing-hero-copy h1 { font-size: clamp(36px, 11vw, 48px); }
}

/* Softer graphite-gold surfaces and consistent administrator controls. */
.sidebar {
  border-right-color: #6e5a2b;
  background:
    radial-gradient(circle at 22% -3%, rgba(239, 202, 105, .3), transparent 25%),
    radial-gradient(circle at 105% 42%, rgba(157, 117, 36, .16), transparent 36%),
    linear-gradient(158deg, #39352d 0%, #27282b 42%, #30302f 72%, #443a29 100%);
  box-shadow: 12px 0 36px rgba(54, 45, 28, .17), inset -1px 0 rgba(239, 206, 119, .12);
}

.overview-command-center,
.overview-brand-banner {
  background:
    radial-gradient(circle at 88% 8%, rgba(238, 199, 94, .3), transparent 30%),
    radial-gradient(circle at 66% 115%, rgba(178, 132, 39, .15), transparent 38%),
    linear-gradient(132deg, #3b3935 0%, #292a2c 48%, #3e392f 72%, #5a4825 100%);
  box-shadow: 0 22px 46px rgba(56, 45, 25, .18), inset 0 1px 0 rgba(255,255,255,.14);
}

.admin-nav-primary {
  color: #f5e5ad;
  border-color: rgba(231, 194, 96, .24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent),
    linear-gradient(90deg, rgba(219, 176, 66, .25), rgba(126, 96, 37, .18));
  box-shadow: inset 2px 0 #e4bd58, 0 8px 20px rgba(54, 41, 18, .13);
}

.admin-nav-primary:hover {
  color: #fff2c7;
  border-color: rgba(234, 201, 112, .38);
  background: linear-gradient(90deg, rgba(225, 184, 77, .32), rgba(137, 105, 42, .23));
}

.admin-nav-primary::after {
  color: #2b2110;
  background: linear-gradient(135deg, #f0d77e, #c18d20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

.topbar-admin-button {
  border-color: #d7b75e;
  color: #33260d;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), transparent 55%),
    linear-gradient(135deg, #fff8df, #ead083);
  box-shadow: 0 9px 20px rgba(141, 99, 19, .14), inset 0 1px 0 #fff;
}

.topbar-admin-button span {
  color: #f1d477;
  background: linear-gradient(145deg, #383126, #171719);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

.topbar-admin-button:hover {
  border-color: #bd8b20;
  color: #1f1708;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), transparent 50%),
    linear-gradient(135deg, #f4dd91, #d3a339);
  box-shadow: 0 12px 24px rgba(141, 99, 19, .2), inset 0 1px 0 #fff;
}

/* AI image editing workspace. */
.ai-edit-hero,
.ai-edit-workbench,
.ai-edit-history-panel {
  grid-column: 1 / -1;
}

.ai-edit-hero {
  border-top: 3px solid #c46030;
}

.ai-engine-crosslink {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.ai-engine-crosslink .link-button {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent, #2f6fed);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* Keep dense header action rows usable when the sidebar reduces content width. */
.promotion-header-actions,
.shop-message-actions,
.data-market-header-actions,
.keyword-market-header-actions,
.ai-selection-header-actions,
.resale-header-actions,
.profit-header-actions,
.ai-generate-actions {
  min-width: 0;
  flex-wrap: wrap;
}

.primary-button,
.secondary-button,
.extension-download-button,
.topbar-admin-button,
.topbar-membership-button {
  white-space: nowrap;
}

.extension-download-button {
  gap: 6px;
}

@media (max-width: 1180px) {
  .resale-dashboard-panel .panel-header,
  .shop-message-header,
  .data-market-header,
  .keyword-market-header {
    align-items: stretch;
    flex-direction: column;
  }

  .resale-header-actions,
  .shop-message-actions,
  .data-market-header-actions,
  .keyword-market-header-actions {
    width: 100%;
    flex: 1 1 auto;
    justify-content: flex-start;
  }
}

.ai-edit-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.ai-edit-hero-top h2 {
  font-size: 23px;
}

.ai-edit-hero-top > div > p:not(.eyebrow):not(.ai-engine-crosslink) {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  max-width: 52ch;
}

.ai-edit-cost-card {
  min-width: 220px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff8f4;
}

.ai-edit-cost-card span,
.ai-edit-cost-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.ai-edit-cost-card strong {
  display: block;
  margin: 6px 0 4px;
  font-size: 15px;
}

.ai-edit-model-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(187, 145, 71, 0.28);
  border-radius: 12px;
  background: linear-gradient(135deg, #fffdf8, #f8f3e8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ai-edit-model-picker > div,
.ai-edit-model-picker label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-edit-model-picker strong {
  font-size: 14px;
}

.ai-edit-model-picker small,
.ai-edit-model-picker label > span {
  color: var(--muted);
  font-size: 12px;
}

.ai-edit-model-picker select {
  min-width: 220px;
  min-height: 42px;
  padding: 0 38px 0 12px;
  border: 1px solid rgba(158, 116, 40, 0.34);
  border-radius: 9px;
  background-color: #fff;
  color: var(--text);
  font-weight: 700;
}

.ai-edit-modes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.ai-edit-modes button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.ai-edit-modes button strong {
  font-size: 14px;
}

.ai-edit-modes button small {
  color: var(--muted);
  font-size: 12px;
}

.ai-edit-modes button:hover {
  border-color: #d9a58a;
}

.ai-edit-modes button.active {
  border-color: #c46030;
  background: #fff6f1;
  box-shadow: 0 0 0 3px rgba(196, 96, 48, 0.12);
}

.ai-edit-upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 18px;
}

.ai-edit-dropzone {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 16px;
  border: 1.5px dashed #d0b4a4;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 248, 244, 0.9), rgba(255, 255, 255, 0.95)),
    repeating-conic-gradient(#f3ebe6 0% 25%, #fff 0% 50%) 0 0 / 18px 18px;
  cursor: pointer;
}

.ai-edit-dropzone-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  color: var(--muted);
}

.ai-edit-dropzone-empty strong {
  color: var(--text);
  font-size: 16px;
}

.ai-edit-dropzone-preview,
.ai-edit-dropzone-preview img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: contain;
}

.ai-edit-side-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-edit-option-block {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafbfc;
}

.ai-edit-option-block .eyebrow {
  display: block;
  margin-bottom: 4px;
}

.ai-edit-option-block > strong {
  display: block;
  margin-bottom: 8px;
}

.ai-edit-option-block > p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.ai-edit-custom-options {
  border-color: rgba(184, 133, 22, 0.32);
  background: linear-gradient(145deg, #fffdf8 0%, #fafbfc 72%);
}

.ai-edit-custom-options textarea {
  min-height: 190px;
  line-height: 1.7;
  resize: vertical;
}

.ai-edit-custom-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(184, 133, 22, 0.25);
  border-radius: 9px;
  background: #fff8e7;
  color: var(--muted);
  font-size: 12px;
}

.ai-edit-custom-notice strong {
  flex: 0 0 auto;
  color: #8b6410;
  font-size: 13px;
}

.ai-edit-custom-chat {
  overflow: hidden;
  border: 1px solid rgba(180, 137, 39, 0.28);
  border-radius: 16px;
  background: #f7f4ed;
}

.ai-edit-custom-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(180, 137, 39, 0.22);
  background: linear-gradient(135deg, #fffdf8 0%, #f8f1df 100%);
}

.ai-edit-custom-chat-header h2,
.ai-edit-custom-chat-header p {
  margin: 0;
}

.ai-edit-custom-chat-header h2 {
  margin-top: 3px;
  font-size: 20px;
}

.ai-edit-custom-chat-header p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.ai-edit-custom-price {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 10px 13px;
  border: 1px solid rgba(180, 137, 39, 0.26);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.ai-edit-custom-price strong {
  color: #8b6410;
  font-size: 15px;
}

.ai-edit-custom-price span {
  color: var(--muted);
  font-size: 11px;
}

.ai-edit-custom-messages {
  display: flex;
  min-height: 280px;
  max-height: 560px;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  padding: 24px;
  background:
    radial-gradient(circle at 14% 8%, rgba(219, 178, 78, 0.09), transparent 32%),
    #f8f6f1;
}

.ai-edit-custom-message-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ai-edit-custom-message-row.is-user {
  flex-direction: row-reverse;
}

.ai-edit-custom-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: #24231f;
  color: #f2c95d;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(33, 29, 19, 0.14);
}

.ai-edit-custom-message-row.is-user .ai-edit-custom-avatar {
  background: linear-gradient(180deg, #e4ba48, #b58414);
  color: #fff;
}

.ai-edit-custom-bubble {
  width: fit-content;
  max-width: min(760px, calc(100% - 48px));
  padding: 13px 15px;
  border: 1px solid rgba(35, 33, 27, 0.09);
  border-radius: 6px 16px 16px 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(46, 40, 25, 0.06);
}

.ai-edit-custom-message-row.is-user .ai-edit-custom-bubble {
  border-color: rgba(180, 137, 39, 0.2);
  border-radius: 16px 6px 16px 16px;
  background: #fff6d9;
}

.ai-edit-custom-bubble p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.65;
}

.ai-edit-custom-bubble small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
}

.ai-edit-custom-message-images {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 112px));
  gap: 8px;
  margin-bottom: 10px;
}

.ai-edit-custom-message-images img,
.ai-edit-custom-result-image {
  width: 100%;
  border: 1px solid rgba(35, 33, 27, 0.08);
  border-radius: 10px;
  background: #eee;
  object-fit: cover;
}

.ai-edit-custom-message-images img {
  aspect-ratio: 1 / 1;
}

.ai-edit-custom-result-image {
  display: block;
  width: min(420px, 100%);
  max-height: 520px;
  margin-top: 10px;
  object-fit: contain;
}

.ai-edit-custom-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ai-edit-custom-result-actions button {
  padding: 7px 11px;
  border: 1px solid rgba(180, 137, 39, 0.28);
  border-radius: 999px;
  background: #fff;
  color: #75550e;
  font-size: 12px;
  cursor: pointer;
}

.ai-edit-custom-message-row.is-error .ai-edit-custom-bubble {
  border-color: rgba(171, 63, 45, 0.2);
  background: #fff4f1;
  color: #8f3528;
}

.ai-edit-custom-composer {
  padding: 18px 20px 20px;
  border-top: 1px solid rgba(180, 137, 39, 0.2);
  background: #fff;
}

.ai-edit-custom-reference-head,
.ai-edit-custom-reference-head > div,
.ai-edit-custom-composer-actions,
.ai-edit-custom-composer-actions > div:last-child {
  display: flex;
  align-items: center;
}

.ai-edit-custom-reference-head,
.ai-edit-custom-composer-actions {
  justify-content: space-between;
  gap: 14px;
}

.ai-edit-custom-reference-head > div {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.ai-edit-custom-reference-head span {
  color: var(--muted);
  font-size: 12px;
}

.ai-edit-custom-add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ai-edit-custom-image-list {
  display: grid;
  min-height: 116px;
  grid-template-columns: repeat(auto-fill, minmax(104px, 128px));
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed #d7bf85;
  border-radius: 12px;
  background: #fffcf5;
}

.ai-edit-custom-image-list.dragover {
  border-color: #b58414;
  background: #fff6d9;
  box-shadow: inset 0 0 0 2px rgba(181, 132, 20, 0.1);
}

.ai-edit-custom-image-empty {
  display: flex;
  min-height: 90px;
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
}

.ai-edit-custom-image-empty strong {
  color: var(--text);
}

.ai-edit-custom-image-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(180, 137, 39, 0.22);
  border-radius: 10px;
  background: #fff;
}

.ai-edit-custom-image-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.ai-edit-custom-image-card footer {
  overflow: hidden;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-edit-custom-image-card button {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 19, 16, 0.78);
  color: #fff;
  cursor: pointer;
}

.ai-edit-custom-image-card[data-status="uploading"]::after {
  position: absolute;
  inset: 0 0 28px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.76);
  color: #8b6410;
  content: "上传中…";
  font-size: 11px;
  font-weight: 800;
}

.ai-edit-custom-image-card[data-status="error"] {
  border-color: #c66a58;
}

.ai-edit-custom-prompt-field {
  position: relative;
  display: block;
  margin-top: 14px;
}

.ai-edit-custom-prompt-field > span {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 800;
}

.ai-edit-custom-prompt-field textarea {
  width: 100%;
  min-height: 112px;
  padding: 13px 14px 28px;
  border: 1px solid #dcc99b;
  border-radius: 12px;
  resize: vertical;
  line-height: 1.65;
}

.ai-edit-custom-prompt-field textarea:focus {
  border-color: #b58414;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(181, 132, 20, 0.1);
}

.ai-edit-custom-prompt-field small {
  position: absolute;
  right: 12px;
  bottom: 9px;
  color: var(--muted);
}

.ai-edit-custom-composer-actions {
  margin-top: 12px;
}

.ai-edit-custom-composer-actions .ai-message {
  margin: 0;
}

.ai-edit-custom-composer-actions > div:last-child {
  flex: 0 0 auto;
  gap: 8px;
}

@media (max-width: 1240px) and (min-width: 961px) {
  .ai-edit-modes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ai-edit-bg-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.ai-edit-bg-presets button {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}

.ai-edit-bg-presets button.active {
  border-color: #c46030;
  color: #8a3a16;
  background: #fff1ea;
}

.ai-edit-color-field,
.ai-edit-file-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
}

.ai-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.ai-edit-face-preview {
  margin-top: 8px;
  min-height: 72px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
}

.ai-edit-face-preview img {
  width: 100%;
  max-height: 120px;
  object-fit: contain;
}

.ai-edit-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}

.ai-edit-compare > div {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.ai-edit-compare header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #f7f8fa;
  font-size: 13px;
  font-weight: 700;
}

.ai-edit-compare header small {
  color: var(--muted);
  font-weight: 500;
}

.ai-edit-frame {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 12px;
  color: var(--muted);
  background:
    linear-gradient(45deg, #eee 25%, transparent 25%) -10px 0 / 20px 20px,
    linear-gradient(-45deg, #eee 25%, transparent 25%) -10px 0 / 20px 20px,
    linear-gradient(45deg, transparent 75%, #eee 75%) -10px 0 / 20px 20px,
    linear-gradient(-45deg, transparent 75%, #eee 75%) -10px 0 / 20px 20px,
    #fafafa;
}

.ai-edit-frame img {
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
}

.ai-edit-job-list {
  display: grid;
  gap: 10px;
}

.ai-edit-job-empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 10px;
}

.ai-edit-job-card {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.ai-edit-job-card img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  background: #f3f3f3;
}

.ai-edit-job-card strong,
.ai-edit-job-card span {
  display: block;
}

.ai-edit-job-card span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 960px) {
  .ai-edit-hero-top,
  .ai-edit-upload-grid,
  .ai-edit-compare,
  .ai-edit-modes {
    grid-template-columns: 1fr;
  }

  .ai-edit-modes {
    display: grid;
  }

  .ai-edit-cost-card {
    width: 100%;
  }

  .ai-edit-model-picker {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-edit-model-picker select {
    width: 100%;
    min-width: 0;
  }

  .ai-edit-custom-chat-header,
  .ai-edit-custom-composer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-edit-custom-price {
    align-items: flex-start;
  }

  .ai-edit-custom-composer-actions > div:last-child,
  .ai-edit-custom-composer-actions button {
    width: 100%;
  }
}

/* Readability pass — sidebar hierarchy and home feature shortcuts. */
.sidebar .nav-section-label {
  color: #b8ab8b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.25px;
}

.sidebar .listing-subnav,
.sidebar .erp-order-subnav,
.sidebar .data-market-subnav,
.sidebar .handbook-subnav,
.sidebar .operations-nav-grid {
  border-left-color: rgba(237, 204, 119, 0.28);
}

.sidebar .data-market-subnav-item,
.sidebar .handbook-subnav-item,
.sidebar .listing-subnav-item,
.sidebar .erp-order-subnav-item,
.sidebar .operations-nav-item {
  min-height: 31px;
  color: rgba(250, 246, 237, 0.74);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.sidebar .listing-subnav-item,
.sidebar .erp-order-subnav-item {
  position: relative;
  padding: 7px 10px 7px 24px;
}

.sidebar .listing-subnav-item::before,
.sidebar .erp-order-subnav-item::before {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(248, 239, 215, 0.72);
  box-shadow: 0 0 0 3px rgba(239, 203, 111, 0.06);
  content: "";
  transform: translateY(-50%);
}

.sidebar .data-market-subnav-item:hover,
.sidebar .handbook-subnav-item:hover,
.sidebar .listing-subnav-item:hover,
.sidebar .erp-order-subnav-item:hover,
.sidebar .operations-nav-item:hover {
  color: #fff8e5;
  background: rgba(225, 184, 77, 0.12);
}

.sidebar .data-market-subnav-item.active,
.sidebar .handbook-subnav-item.active,
.sidebar .listing-subnav-item.active,
.sidebar .erp-order-subnav-item.active,
.sidebar .operations-nav-item.active {
  color: #ffe59a;
  background: linear-gradient(90deg, rgba(225, 184, 77, 0.2), rgba(225, 184, 77, 0.06));
  box-shadow: inset 2px 0 #e6bd55;
}

.sidebar .listing-subnav-item.active::before,
.sidebar .erp-order-subnav-item.active::before,
.sidebar .operations-nav-item.active::before {
  background: #f0ce70;
  box-shadow: 0 0 0 4px rgba(226, 184, 76, 0.16);
}

.sidebar-token-card,
.sidebar .store-box,
.sidebar .account-box {
  border-color: rgba(237, 204, 119, 0.3);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(22, 22, 22, 0.28);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.sidebar-token-card {
  min-height: 68px;
  padding: 11px 12px;
}

.sidebar-token-card span,
.sidebar .store-box > span,
.sidebar .account-box > span {
  color: #c8bea6;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sidebar-token-card strong {
  color: #e8c969;
  font-size: 11.5px;
  font-weight: 750;
}

.sidebar-token-card strong b {
  color: #fffdf7;
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -0.025em;
}

.sidebar .store-box strong,
.sidebar .account-box strong {
  color: #fffdf7;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}

.sidebar .store-box small {
  color: #f1d274;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.sidebar .store-box-actions {
  margin-top: 10px;
}

.sidebar .store-disconnect-button,
.sidebar #logoutBtn.account-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid rgba(231, 194, 96, 0.58);
  border-radius: 9px;
  color: #f4d98e;
  background:
    linear-gradient(180deg, rgba(82, 72, 48, 0.76), rgba(42, 39, 31, 0.88)),
    rgba(34, 33, 29, 0.82);
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 245, 211, 0.09);
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.sidebar .store-disconnect-button {
  flex: 1 1 auto;
  padding: 0 12px;
}

.sidebar #logoutBtn.account-link-button {
  width: 100%;
  margin-top: 10px;
  padding: 0 12px;
}

.sidebar .store-disconnect-button > span,
.sidebar #logoutBtn.account-link-button > span {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  color: #ffe49a;
  background: rgba(232, 193, 89, 0.14);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.sidebar .store-disconnect-button:hover,
.sidebar #logoutBtn.account-link-button:hover {
  transform: translateY(-1px);
  border-color: #f1cf72;
  color: #231d10;
  background:
    linear-gradient(180deg, #f1d477, #c9982b),
    #d4aa40;
  box-shadow:
    0 10px 20px rgba(84, 59, 10, 0.3),
    0 0 0 3px rgba(232, 193, 89, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.sidebar .store-disconnect-button:hover > span,
.sidebar #logoutBtn.account-link-button:hover > span {
  color: #f5d675;
  background: #29251d;
}

.sidebar .store-disconnect-button:active,
.sidebar #logoutBtn.account-link-button:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: inset 0 2px 5px rgba(57, 40, 8, 0.34);
}

.sidebar .store-disconnect-button:focus-visible,
.sidebar #logoutBtn.account-link-button:focus-visible {
  outline: 3px solid rgba(237, 201, 105, 0.3);
  outline-offset: 2px;
}

.sidebar-token-card:hover,
.sidebar .store-box:hover,
.sidebar .account-box:hover {
  border-color: rgba(244, 211, 124, 0.5);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)),
    rgba(28, 27, 24, 0.38);
}

.overview-command-center .overview-command-copy > p {
  max-width: 600px;
  color: rgba(255, 250, 236, 0.74);
  font-size: 13px;
  line-height: 1.7;
}

.overview-feature-grid {
  gap: 14px;
}

.overview-command-center .overview-feature-card {
  --feature-accent: #9a6a16;
  --feature-surface: #fff5d6;
  --feature-border: #ead6a2;
  position: relative;
  grid-template-columns: 52px minmax(0, 1fr) 30px;
  min-height: 104px;
  gap: 13px;
  overflow: hidden;
  padding: 14px 14px 14px 15px;
  border: 1px solid rgba(221, 200, 151, 0.86);
  border-radius: 16px;
  background:
    radial-gradient(circle at 94% 8%, color-mix(in srgb, var(--feature-surface) 68%, transparent), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(251, 248, 239, 0.96));
  box-shadow: 0 12px 26px rgba(23, 19, 10, 0.15), inset 0 1px 0 #fff;
  isolation: isolate;
}

.overview-command-center .overview-feature-card::before {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--feature-accent);
  content: "";
  opacity: 0.82;
}

.overview-command-center .feature-listing {
  --feature-accent: #147a70;
  --feature-surface: #dff3ee;
  --feature-border: #b8ddd5;
}

.overview-command-center .feature-image {
  --feature-accent: #7a55a5;
  --feature-surface: #eee5f8;
  --feature-border: #d9c8eb;
}

.overview-command-center .feature-selection {
  --feature-accent: #aa7417;
  --feature-surface: #fff0c8;
  --feature-border: #ead29a;
}

.overview-command-center .feature-store {
  --feature-accent: #267496;
  --feature-surface: #e0f0f7;
  --feature-border: #bfdde9;
}

.overview-command-center .overview-feature-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid var(--feature-border);
  border-radius: 15px;
  color: var(--feature-accent);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.7), transparent 55%),
    var(--feature-surface);
  box-shadow: 0 8px 18px rgba(45, 35, 14, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.overview-command-center .overview-feature-icon svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.overview-command-center .overview-feature-copy {
  gap: 6px;
  justify-content: center;
}

.overview-command-center .overview-feature-copy strong {
  color: #1a1813;
  font-size: 15px;
  font-weight: 820;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.overview-command-center .overview-feature-copy small {
  overflow: visible;
  color: #6b6458;
  font-size: 11.5px;
  font-weight: 560;
  line-height: 1.45;
  text-overflow: clip;
  white-space: normal;
}

.overview-command-center .overview-feature-arrow {
  width: 30px;
  height: 30px;
  border-color: #ead8aa;
  color: #8f6214;
  background: linear-gradient(145deg, #fffdf6, #fff2cb);
  box-shadow: 0 6px 14px rgba(125, 86, 15, 0.1), inset 0 1px 0 #fff;
}

.overview-command-center .overview-feature-arrow svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.overview-command-center .overview-feature-card:hover {
  border-color: var(--feature-border);
  background:
    radial-gradient(circle at 94% 8%, var(--feature-surface), transparent 36%),
    #fff;
  box-shadow: 0 18px 34px rgba(24, 19, 9, 0.2), inset 0 1px 0 #fff;
  transform: translateY(-3px);
}

.overview-command-center .overview-feature-card:hover .overview-feature-icon {
  box-shadow: 0 11px 22px rgba(45, 35, 14, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: scale(1.035);
}

.overview-command-center .overview-feature-card:hover .overview-feature-arrow {
  color: #fff9e7;
  background: linear-gradient(145deg, #c79a35, #8e6217);
  transform: translateX(2px);
}

@media (max-width: 760px) {
  .overview-command-center .overview-feature-card {
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 84px;
    padding: 12px;
  }

  .overview-command-center .overview-feature-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }

  .overview-command-center .overview-feature-arrow {
    display: none;
  }
}

.ai-edit-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 8px;
}

.ai-edit-chip-group button {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  cursor: pointer;
}

.ai-edit-chip-group button:hover,
.ai-edit-chip-group button.active {
  border-color: #c46030;
  color: #8a3a16;
  background: #fff1ea;
}

.ai-edit-param-tabs {
  display: flex;
  gap: 8px;
  margin: 8px 0 12px;
}

.ai-edit-param-tabs button {
  flex: 1;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ai-edit-param-tabs button.active {
  border-color: #c46030;
  color: #8a3a16;
  background: #fff6f1;
}

.ai-edit-advanced {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.ai-edit-advanced summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
}

.ai-edit-file-field textarea,
.ai-edit-file-field input[type="text"] {
  width: 100%;
  margin-top: 4px;
}

.ai-edit-file-field small {
  color: var(--muted);
  font-size: 11px;
}

/* Standalone Miao Zhi Ling identity: no badge, frame, or painted background. */
.brand {
  gap: 10px;
  min-height: 54px;
  padding: 1px 5px 11px;
}

.brand-mark,
.auth-landing-logo,
.auth-brand-mark,
.overview-welcome-avatar,
.membership-avatar {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.brand-mark::after,
.auth-brand-mark::after {
  display: none;
}

.brand-mark {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 0;
}

.brand-mark img,
.auth-landing-logo img,
.auth-brand-mark img,
.overview-welcome-avatar img,
.membership-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 4px 7px rgba(116, 78, 10, 0.2));
}

.brand > div:last-child strong {
  color: #fff8e5;
  font-size: 18px;
  font-weight: 880;
  letter-spacing: 0.04em;
}

.brand > div:last-child span {
  margin-top: 5px;
  color: #c8b98f;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

.auth-landing-logo {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 0;
}

.auth-landing-brand {
  gap: 11px;
}

.auth-landing-brand strong {
  color: #27231b;
  font-size: 18px;
  font-weight: 860;
  letter-spacing: 0.035em;
}

.auth-landing-brand small {
  color: #756d5c;
  letter-spacing: 0.02em;
}

.auth-card .auth-brand-mark {
  width: 66px;
  height: 66px;
  margin-bottom: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.auth-card .auth-brand-mark::after {
  display: none;
}

.auth-card .auth-brand-mark img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
}

.overview-welcome-avatar {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 0;
}

.membership-avatar {
  width: 68px;
  height: 68px;
  border-radius: 0;
}

/* Keep the top workspace header crisp against the warm page background. */
.topbar {
  border-color: #d7c391;
  background: rgba(255, 253, 247, 0.97);
  box-shadow: 0 14px 36px rgba(68, 52, 18, 0.1), inset 0 1px 0 #fff;
}

.workspace-heading .eyebrow {
  color: #7f5a0c;
  font-size: 10px;
}

.workspace-heading h1 {
  color: #17140f;
}

.workspace-subtitle {
  color: #5f5a51;
  font-weight: 540;
}

.topbar-store-pill small {
  color: #706859;
}

.topbar-store-pill strong {
  color: #211e19;
}

/* User-owned avatar in the home greeting card. */
.overview-welcome-avatar {
  position: relative;
  display: grid;
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
}

.overview-welcome-avatar:not(.has-custom-avatar) img {
  width: 56px;
  height: 56px;
  margin: auto;
  object-fit: contain;
}

.overview-welcome-avatar.has-custom-avatar {
  overflow: hidden;
  border: 2px solid #fff9eb;
  background: #eadfca;
  box-shadow: 0 10px 24px rgba(94, 68, 16, 0.16), 0 0 0 1px rgba(188, 143, 40, 0.22);
}

.overview-welcome-avatar.has-custom-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  object-fit: cover;
  filter: none;
}

.avatar-edit-hint {
  position: absolute;
  right: 5px;
  bottom: 5px;
  min-width: 34px;
  padding: 3px 6px;
  border: 1px solid rgba(245, 217, 138, 0.38);
  border-radius: 999px;
  color: #fff8df;
  background: rgba(35, 29, 18, 0.82);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  font-size: 9px;
  font-weight: 760;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.overview-welcome-avatar.avatar-editable:hover .avatar-edit-hint,
.overview-welcome-avatar.avatar-editable:focus-visible .avatar-edit-hint {
  opacity: 1;
  transform: translateY(0);
}

.overview-welcome-avatar.avatar-uploading img {
  opacity: 0.42;
}

.overview-welcome-avatar.avatar-uploading::before {
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(40, 31, 15, 0.18);
  border-top-color: #b98520;
  border-radius: 50%;
  content: "";
  animation: avatarUploadSpin 650ms linear infinite;
}

.overview-welcome-avatar:disabled {
  cursor: default;
}

.membership-avatar.has-custom-avatar {
  overflow: hidden;
  border: 2px solid #fff9eb;
  border-radius: 20px;
  background: #eadfca;
  box-shadow: 0 10px 24px rgba(94, 68, 16, 0.14);
}

.membership-avatar.has-custom-avatar img {
  border-radius: 18px;
  object-fit: cover;
  filter: none;
}

@keyframes avatarUploadSpin {
  to { transform: rotate(360deg); }
}

/* Light premium home resources and distinctive shortcut icon system. */
.overview-brand-banner {
  isolation: isolate;
  border-color: #cbded8;
  color: #173f3c;
  background:
    radial-gradient(circle at 88% 18%, rgba(106, 199, 181, 0.34), transparent 24%),
    radial-gradient(circle at 73% 108%, rgba(238, 181, 100, 0.27), transparent 36%),
    linear-gradient(135deg, #fbfffd 0%, #edf7f3 50%, #fbf3e7 100%);
  box-shadow: 0 18px 38px rgba(46, 84, 75, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.overview-brand-banner::before {
  position: absolute;
  z-index: -1;
  top: 42px;
  right: 76px;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(43, 128, 116, 0.13);
  border-radius: 44% 56% 58% 42%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.52), rgba(113, 202, 184, 0.08));
  box-shadow:
    0 0 0 30px rgba(255, 255, 255, 0.2),
    0 20px 50px rgba(58, 126, 112, 0.08);
  content: "";
  transform: rotate(-12deg);
}

.overview-brand-banner::after {
  right: 38px;
  bottom: -34px;
  color: rgba(27, 102, 93, 0.075);
  text-shadow: none;
  mix-blend-mode: multiply;
}

.overview-banner-kicker {
  border: 1px solid rgba(29, 125, 114, 0.15);
  color: #1c776d;
  background: rgba(218, 242, 235, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.overview-brand-banner h2 {
  color: #173f3c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.overview-brand-banner p {
  color: #5b6e68;
  font-weight: 540;
}

.overview-brand-banner .primary-button {
  border-color: #176f66;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 52%),
    linear-gradient(135deg, #2d9285, #17675f);
  box-shadow: 0 10px 22px rgba(25, 105, 94, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.overview-brand-banner .secondary-button {
  border-color: #c9d9d4;
  color: #315f59;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 7px 17px rgba(47, 91, 81, 0.08), inset 0 1px 0 #fff;
}

.overview-brand-banner .primary-button:hover {
  border-color: #0f5e56;
  color: #fff;
  background: linear-gradient(135deg, #258a7d, #125a53);
}

.overview-brand-banner .secondary-button:hover {
  border-color: #91bcb2;
  color: #185e56;
  background: #fff;
}

.overview-quick-panel {
  border-color: #d9e5e1;
  background:
    radial-gradient(circle at 96% 0%, rgba(221, 242, 236, 0.55), transparent 34%),
    linear-gradient(180deg, #fff 0%, #fbfdfc 100%);
  box-shadow: 0 16px 34px rgba(50, 79, 72, 0.09), inset 0 1px 0 #fff;
}

.overview-quick-panel > header {
  border-bottom-color: #e1ebe7;
}

.overview-quick-panel > header i {
  background: linear-gradient(180deg, #48aa9c, #1c746b);
  box-shadow: 0 3px 8px rgba(29, 118, 106, 0.2);
}

.overview-quick-panel > header strong {
  color: #1a3e39;
}

.overview-web-shortcuts {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding-top: 14px;
}

.overview-web-shortcuts .shortcut-card {
  --shortcut-accent: #237b70;
  --shortcut-soft: #e6f5f1;
  --shortcut-line: #c5e4dc;
  position: relative;
  min-height: 92px;
  gap: 7px;
  overflow: hidden;
  border-color: #e3ebe8;
  border-radius: 14px;
  padding: 10px 6px 9px;
  color: #203f3b;
  background: linear-gradient(155deg, #fff 0%, #fff 48%, var(--shortcut-soft) 155%);
  box-shadow: 0 6px 15px rgba(43, 71, 64, 0.06), inset 0 1px 0 #fff;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.overview-web-shortcuts .shortcut-card::before {
  position: absolute;
  top: 0;
  right: 18px;
  left: 18px;
  height: 2px;
  border-radius: 0 0 3px 3px;
  background: var(--shortcut-accent);
  content: "";
  opacity: 0.42;
}

.overview-web-shortcuts a.shortcut-card::after {
  position: absolute;
  top: 7px;
  right: 8px;
  color: var(--shortcut-accent);
  content: "↗";
  font-size: 8px;
  font-weight: 900;
  opacity: 0.42;
}

.overview-web-shortcuts .shortcut-card:hover {
  border-color: var(--shortcut-line);
  color: #163d37;
  background: linear-gradient(155deg, #fff 0%, var(--shortcut-soft) 145%);
  box-shadow: 0 13px 24px rgba(39, 84, 75, 0.12), inset 0 1px 0 #fff;
  transform: translateY(-3px);
}

.overview-web-shortcuts .shortcut-card > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--shortcut-line);
  border-radius: 14px;
  color: var(--shortcut-accent);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), transparent 56%),
    var(--shortcut-soft);
  box-shadow: 0 8px 17px rgba(47, 77, 70, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 0;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.overview-web-shortcuts .shortcut-card:hover > i {
  box-shadow: 0 11px 21px rgba(47, 77, 70, 0.14), inset 0 1px 0 #fff;
  transform: scale(1.045) rotate(-1deg);
}

.overview-web-shortcuts .shortcut-card svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.overview-web-shortcuts .shortcut-card > span {
  display: grid;
  gap: 2px;
  color: #2c4843;
  font-size: inherit;
  line-height: 1.2;
}

.overview-web-shortcuts .shortcut-card b,
.overview-web-shortcuts .shortcut-card small {
  display: block;
}

.overview-web-shortcuts .shortcut-card b {
  color: #203d38;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.overview-web-shortcuts .shortcut-card small {
  color: #768781;
  font-size: 8.5px;
  font-weight: 540;
  line-height: 1.25;
}

.overview-web-shortcuts .shortcut-seller { --shortcut-accent: #315fbe; --shortcut-soft: #eaf0ff; --shortcut-line: #c8d5f5; }
.overview-web-shortcuts .shortcut-market { --shortcut-accent: #1873bf; --shortcut-soft: #e7f4fd; --shortcut-line: #c2dff2; }
.overview-web-shortcuts .shortcut-sourcing { --shortcut-accent: #d46820; --shortcut-soft: #fff0e4; --shortcut-line: #f2cfb4; }
.overview-web-shortcuts .shortcut-help { --shortcut-accent: #2b7e8b; --shortcut-soft: #e7f4f5; --shortcut-line: #c5e1e4; }
.overview-web-shortcuts .shortcut-auth { --shortcut-accent: #268463; --shortcut-soft: #e5f5ed; --shortcut-line: #c0e2d2; }
.overview-web-shortcuts .shortcut-discovery { --shortcut-accent: #7554b7; --shortcut-soft: #f0e9fb; --shortcut-line: #d9caef; }
.overview-web-shortcuts .shortcut-image { --shortcut-accent: #b34978; --shortcut-soft: #fbe8f1; --shortcut-line: #edc7d9; }
.overview-web-shortcuts .shortcut-edit { --shortcut-accent: #c25748; --shortcut-soft: #fcebe7; --shortcut-line: #efcbc4; }
.overview-web-shortcuts .shortcut-profit { --shortcut-accent: #328162; --shortcut-soft: #e8f5ed; --shortcut-line: #c4e2d2; }
.overview-web-shortcuts .shortcut-translate { --shortcut-accent: #376fbd; --shortcut-soft: #e9f0fb; --shortcut-line: #c8d7ed; }
.overview-web-shortcuts .shortcut-listing {
  --shortcut-accent: #a87519;
  --shortcut-soft: #fff3d6;
  --shortcut-line: #ead49f;
  grid-column: span 2;
}

@media (max-width: 700px) {
  .overview-brand-banner::before {
    right: 24px;
    width: 130px;
    height: 130px;
  }

  .overview-web-shortcuts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

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

/* Airy product shell refresh: preserve the existing IA and business controls,
   while moving the visual system from heavy gold chrome to a calm ivory/teal
   workspace. */
:root {
  --bg: #f3f6f4;
  --surface: rgba(255, 255, 255, 0.94);
  --surface-solid: #ffffff;
  --surface-2: #eaf1ee;
  --ink: #1d2926;
  --muted: #71817c;
  --line: #dbe7e3;
  --text: var(--ink);
  --text-muted: var(--muted);
  --surface-muted: var(--surface-2);
  --accent: #16887f;
  --accent-strong: #0d625c;
  --accent-2: #6bb8ad;
  --charcoal: #1d2926;
  --charcoal-soft: #42534e;
  --warning: #a96d35;
  --danger: #c45b59;
  --ok: #178574;
  --shadow: 0 18px 44px rgba(38, 72, 64, 0.08);
  --shadow-soft: 0 8px 24px rgba(38, 72, 64, 0.055);
  --radius: 16px;
  --glass: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(255, 255, 255, 0.9);
  font-family: "Avenir Next", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
}

html,
body {
  color-scheme: light;
}

body {
  background:
    radial-gradient(circle at 8% -12%, rgba(104, 184, 171, 0.12), transparent 32%),
    radial-gradient(circle at 94% 0%, rgba(205, 224, 216, 0.42), transparent 28%),
    linear-gradient(180deg, #f8faf9 0%, #f0f5f2 56%, #f5f8f6 100%);
}

.app-shell {
  grid-template-columns: 248px minmax(0, 1fr);
}

body .sidebar {
  padding: 20px 14px 16px;
  border-right: 1px solid #dce8e3;
  background: rgba(248, 251, 249, 0.95);
  color: var(--ink);
  box-shadow: 10px 0 30px rgba(35, 73, 63, 0.035);
}

body .brand {
  padding: 0 8px 18px;
  border-bottom-color: #dce8e3;
}

body .brand-mark {
  width: 42px;
  height: 42px;
  border-color: #c9e1da;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(39, 95, 82, 0.1), inset 0 1px 0 #fff;
}

body .brand > div:last-child strong {
  color: #1e302c;
  font-size: 16px;
  font-weight: 820;
}

body .brand > div:last-child span {
  color: #7a8c86;
}

body .nav-section-label {
  margin: 11px 8px 3px;
  color: #90a09a;
  font-size: 9px;
  letter-spacing: 0.16em;
}

body .nav-item,
body .nav-download-link,
body .operations-nav-toggle {
  border-radius: 10px;
  color: #667771;
  font-size: 12.5px;
  font-weight: 670;
}

body .nav-item:hover,
body .nav-download-link:hover,
body .operations-nav-toggle:hover {
  color: #176d64;
  background: #edf7f4;
  box-shadow: none;
}

body .nav-item.active {
  color: #126b63;
  background: #e3f2ee;
  box-shadow: inset 3px 0 0 #16887f;
}

body .nav-item.active::before {
  color: #16887f;
}

body .data-market-subnav,
body .handbook-subnav,
body .operations-nav-grid {
  border-left-color: #d6e7e1;
}

body .data-market-subnav-item,
body .handbook-subnav-item,
body .operations-nav-item {
  color: #81918b;
}

body .data-market-subnav-item:hover,
body .handbook-subnav-item:hover,
body .operations-nav-item:hover,
body .data-market-subnav-item.active,
body .handbook-subnav-item.active,
body .operations-nav-item.active {
  color: #176d64;
  background: #eef7f4;
}

body .operations-nav-item.active::before {
  background: #16887f;
  box-shadow: 0 0 0 4px rgba(22, 136, 127, 0.12);
}

body .operations-store-icon {
  color: #16887f;
  background: #e3f2ee;
}

body .sidebar-token-card,
body .sidebar .store-box,
body .sidebar .account-box {
  border-color: #d7e6e1;
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 22px rgba(37, 78, 67, 0.06);
}

body .sidebar .store-box > span,
body .sidebar .account-box > span {
  color: #8a9994;
}

body .sidebar .store-box strong,
body .sidebar .account-box strong {
  color: #2d403a;
}

body .sidebar .store-box small,
body .sidebar-token-card strong {
  color: #16887f;
}

body .workspace {
  gap: 18px;
  padding: 24px 32px 52px;
}

body .workspace > .workspace-taskbar {
  top: 12px;
  min-height: 42px;
  padding: 4px 6px;
  border-color: #dce8e3;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 8px 24px rgba(37, 78, 67, 0.06);
  backdrop-filter: blur(16px);
}

body .workspace-task-tab-shell {
  height: 32px;
  border-radius: 9px;
  color: #7b8b85;
}

body .workspace-task-tab-shell:hover {
  color: #176d64;
  border-color: #c9e2da;
  background: #eef7f4;
}

body .workspace-task-tab-shell.active {
  color: #176d64;
  border-color: #bfe0d7;
  background: #e8f5f1;
  box-shadow: none;
}

body .workspace-task-tab i,
body .workspace-task-tab-shell.active .workspace-task-tab i {
  color: #16887f;
}

body .topbar {
  top: 66px;
  min-height: 78px;
  padding: 14px 16px;
  border-color: #dce8e3;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 32px rgba(37, 78, 67, 0.07);
  backdrop-filter: blur(18px);
}

body .workspace-heading-mark {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-color: #c9e1da;
  border-radius: 12px;
  color: #16887f;
  background: #e8f5f1;
  box-shadow: none;
}

body .workspace-heading h1 {
  color: #1e302c;
  font-size: 21px;
  font-weight: 790;
  letter-spacing: -0.035em;
}

body .workspace-heading .eyebrow {
  color: #7b928b;
  font-size: 9.5px;
  letter-spacing: 0.08em;
}

body .workspace-subtitle {
  color: #7b8b85;
}

body .topbar-store-pill {
  border-color: #d7e6e1;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: none;
}

body .topbar-store-pill > i {
  background: #16887f;
  box-shadow: 0 0 0 4px rgba(22, 136, 127, 0.11);
}

body .topbar-membership-button {
  border-color: #c8dfd8;
  border-radius: 12px;
  color: #176d64;
  background: #edf7f4;
  box-shadow: none;
}

body .topbar-ai-chat-button {
  border-color: #c8dfd8;
  border-radius: 12px;
  color: #176d64;
  background: #edf7f4;
  box-shadow: none;
}

body .topbar-ai-chat-button small {
  color: #7a908a;
}

body .topbar-ai-chat-button strong {
  color: #176d64;
}

body .topbar-ai-chat-icon {
  border-color: #b9dcd3;
  border-radius: 10px;
  color: #fff;
  background: #16887f;
  box-shadow: none;
}

body .primary-button,
body .auth-submit {
  border-color: #0f6c64;
  color: #fff;
  background: #16887f;
  box-shadow: 0 10px 22px rgba(22, 136, 127, 0.2);
}

body .primary-button:hover,
body .auth-submit:hover {
  border-color: #0b5a54;
  background: #0f756d;
  box-shadow: 0 14px 28px rgba(22, 136, 127, 0.24);
}

body .secondary-button,
body .icon-button,
body .segment {
  border-color: #d5e3df;
  color: #36514a;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: none;
}

body .secondary-button:hover,
body .icon-button:hover,
body .segment:hover {
  border-color: #a9d2c8;
  color: #176d64;
  background: #f2faf7;
  box-shadow: none;
}

body .segment.active {
  color: #fff;
  background: #1d403a;
  box-shadow: none;
}

body .panel,
body .command-strip,
body .metric-card,
body .overview-feature-card,
body .overview-welcome-panel,
body .overview-playbook-card,
body .overview-quick-panel,
body .overview-learning-panel {
  border-color: #dce8e3;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 30px rgba(37, 78, 67, 0.06), inset 0 1px 0 #fff;
}

body .panel-header h2 {
  color: #1e302c;
}

body .panel-header p {
  color: #7b8b85;
}

body .overview-portal {
  gap: 20px;
}

body .overview-welcome-panel {
  grid-template-columns: minmax(330px, 0.92fr) minmax(600px, 1.35fr);
  min-height: 142px;
  padding: 24px 26px;
  border-color: #cfe3dd;
  background:
    radial-gradient(circle at 90% 20%, rgba(106, 184, 171, 0.18), transparent 26%),
    linear-gradient(120deg, #ffffff 0%, #f8fcfa 58%, #edf7f3 100%);
}

body .overview-welcome-avatar {
  width: 62px;
  height: 62px;
  flex-basis: 62px;
  border-color: #c5dfd7;
  border-radius: 18px;
  background: #e8f5f1;
  box-shadow: none;
}

body .overview-welcome-avatar img {
  width: 54px;
  height: 54px;
  border-radius: 15px;
}

body .overview-welcome-user h2 {
  color: #1e403a;
  font-size: 20px;
}

body .overview-welcome-user p {
  color: #70827b;
}

body .overview-account-kpis > div {
  border-left-color: #d5e5df;
}

body .overview-account-kpis span {
  color: #7f9089;
}

body .overview-account-kpis strong {
  color: #1f3b35;
}

body .overview-playbook-grid {
  grid-template-columns: 0.95fr 1.35fr 1fr;
  gap: 16px;
}

body .overview-playbook-card.playbook-start,
body .overview-playbook-card.playbook-operate,
body .overview-playbook-card.playbook-grow {
  background: #fff;
}

body .overview-playbook-card > header {
  border-bottom-color: #e1ece8;
}

body .overview-playbook-card > header > span,
body .playbook-operate > header > span,
body .playbook-grow > header > span {
  color: #176d64;
  background: #e6f4f0;
  box-shadow: none;
}

body .overview-playbook-card > header strong {
  color: #25433d;
}

body .overview-playbook-card > header small,
body .overview-playbook-actions span {
  color: #80908a;
}

body .overview-playbook-actions button {
  color: #36514a;
}

body .overview-playbook-actions button::before,
body .playbook-operate .overview-playbook-actions button::before,
body .playbook-grow .overview-playbook-actions button::before {
  background: #5bb2a3;
}

body .overview-playbook-actions button:hover {
  color: #176d64;
  background: #eef8f5;
}

body .overview-brand-banner {
  min-height: 254px;
  padding: 34px 40px;
  border-color: #cfe3dd;
  background:
    radial-gradient(circle at 86% 18%, rgba(116, 192, 177, 0.28), transparent 23%),
    linear-gradient(135deg, #fcfffe 0%, #eef8f4 56%, #f6faf8 100%);
  box-shadow: 0 16px 36px rgba(37, 78, 67, 0.08), inset 0 1px 0 #fff;
}

body .overview-brand-banner::after {
  right: 26px;
  bottom: -32px;
  color: rgba(24, 116, 103, 0.055);
}

body .overview-banner-kicker {
  color: #176d64;
  background: #e5f4ef;
  box-shadow: none;
}

body .overview-brand-banner h2 {
  color: #1d403a;
  font-size: clamp(28px, 3vw, 42px);
}

body .overview-brand-banner p {
  color: #687d75;
}

body .overview-quick-panel {
  background: #fff;
  box-shadow: 0 14px 30px rgba(37, 78, 67, 0.06), inset 0 1px 0 #fff;
}

body .overview-quick-panel > header {
  border-bottom-color: #e1ece8;
}

body .overview-quick-panel > header i {
  background: #16887f;
  box-shadow: none;
}

body .overview-quick-panel > header strong {
  color: #25433d;
}

body .overview-web-shortcuts .shortcut-card {
  --shortcut-accent: #16887f;
  --shortcut-soft: #eff8f5;
  --shortcut-line: #cde5de;
  border-color: #e1ece8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(37, 78, 67, 0.045), inset 0 1px 0 #fff;
}

body .overview-web-shortcuts .shortcut-card:hover {
  border-color: #add4c9;
  color: #176d64;
  background: #f2faf7;
  box-shadow: 0 12px 22px rgba(37, 78, 67, 0.09), inset 0 1px 0 #fff;
}

body .overview-web-shortcuts .shortcut-card > i {
  color: #16887f;
  background: #eaf6f2;
  box-shadow: none;
}

body .overview-web-shortcuts .shortcut-card b {
  color: #2c4942;
}

body .overview-web-shortcuts .shortcut-card small {
  color: #82918b;
}

body table thead th {
  border-color: #dce8e3;
  color: #5f736c;
  background: #f2f7f5;
}

body table tbody td {
  border-color: #e5eeeb;
  color: #334b44;
}

body table tbody tr:hover td {
  background: #f1f8f5;
}

@media (max-width: 1280px) {
  body .workspace {
    padding-right: 22px;
    padding-left: 22px;
  }

  body .overview-welcome-panel {
    grid-template-columns: minmax(300px, 0.8fr) minmax(500px, 1.2fr);
  }
}

@media (max-width: 960px) {
  body .sidebar {
    box-shadow: 24px 0 60px rgba(37, 78, 67, 0.18);
  }

  body .sidebar-backdrop:not([hidden]) {
    background: rgba(31, 52, 47, 0.26);
  }

  body .workspace {
    padding: 14px 16px 36px;
  }
}

@media (max-width: 680px) {
  body .workspace {
    padding: 10px 10px 28px;
  }

  body .topbar {
    border-radius: 15px;
  }

  body .overview-welcome-panel {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  body .overview-playbook-grid {
    grid-template-columns: 1fr;
  }

  body .overview-brand-banner {
    min-height: 240px;
    padding: 28px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body *,
  body *::before,
  body *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* International black-and-gold direction: strong brand rail, neutral canvas,
   and gold reserved for state, focus, and the primary action. */
:root {
  --bg: #f4f5f6;
  --surface: rgba(255, 255, 255, 0.96);
  --surface-solid: #ffffff;
  --surface-2: #eef0f2;
  --ink: #202328;
  --muted: #747b83;
  --line: #dfe3e7;
  --text: var(--ink);
  --text-muted: var(--muted);
  --surface-muted: var(--surface-2);
  --accent: #c59c42;
  --accent-strong: #92701f;
  --accent-2: #e0c477;
  --charcoal: #17191c;
  --charcoal-soft: #30343a;
  --warning: #a87928;
  --danger: #c55a58;
  --ok: #297664;
  --shadow: 0 18px 42px rgba(22, 26, 30, 0.08);
  --shadow-soft: 0 8px 24px rgba(22, 26, 30, 0.055);
  --glass: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(255, 255, 255, 0.95);
}

body {
  background:
    radial-gradient(circle at 92% -10%, rgba(210, 215, 221, 0.34), transparent 28%),
    linear-gradient(180deg, #fafbfc 0%, #f0f2f4 100%);
}

body .sidebar {
  border-right-color: #262a2f;
  background: #17191c;
  color: #f5f1e7;
  box-shadow: 12px 0 32px rgba(14, 16, 18, 0.1);
}

body .brand {
  border-bottom-color: #30343a;
}

body .brand-mark {
  border-color: #7d6330;
  background: #0f1113;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.24);
}

body .brand > div:last-child strong {
  color: #f7f3e9;
}

body .brand > div:last-child span {
  color: #a9a29a;
}

body .nav-section-label {
  color: #77736d;
}

body .nav-item,
body .nav-download-link,
body .operations-nav-toggle {
  color: #b8b5af;
}

body .nav-item:hover,
body .nav-download-link:hover,
body .operations-nav-toggle:hover {
  color: #f3d88a;
  background: rgba(197, 156, 66, 0.1);
}

body .nav-item.active {
  color: #211d13;
  background: linear-gradient(180deg, #ddbd68, #bd9132);
  box-shadow: 0 8px 18px rgba(123, 88, 19, 0.24), inset 0 1px 0 rgba(255, 248, 214, 0.6);
}

body .nav-item.active::before {
  color: #211d13;
}

body .data-market-subnav,
body .handbook-subnav,
body .operations-nav-grid {
  border-left-color: rgba(197, 156, 66, 0.22);
}

body .data-market-subnav-item,
body .handbook-subnav-item,
body .operations-nav-item {
  color: #9e9b95;
}

body .data-market-subnav-item:hover,
body .handbook-subnav-item:hover,
body .operations-nav-item:hover,
body .data-market-subnav-item.active,
body .handbook-subnav-item.active,
body .operations-nav-item.active {
  color: #e2c474;
  background: rgba(197, 156, 66, 0.1);
}

body .operations-nav-item.active::before {
  background: #c59c42;
  box-shadow: 0 0 0 4px rgba(197, 156, 66, 0.14);
}

body .operations-store-icon {
  color: #d8b55d;
  background: rgba(197, 156, 66, 0.12);
}

body .sidebar-token-card,
body .sidebar .store-box,
body .sidebar .account-box {
  border-color: #34383d;
  color: #f1ede5;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
}

body .sidebar .store-box > span,
body .sidebar .account-box > span {
  color: #817d76;
}

body .sidebar .store-box strong,
body .sidebar .account-box strong {
  color: #f3eee5;
}

body .sidebar .store-box small,
body .sidebar-token-card strong {
  color: #d4b45f;
}

body .workspace {
  background: transparent;
}

body .workspace > .workspace-taskbar {
  border-color: #d8dde1;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 22px rgba(26, 30, 34, 0.06);
}

body .workspace-task-tab-shell {
  color: #70777e;
}

body .workspace-task-tab-shell:hover {
  color: #8c6a20;
  border-color: #e3d3a6;
  background: #fbf7eb;
}

body .workspace-task-tab-shell.active {
  color: #6e5315;
  border-color: #ddc57e;
  background: #fbf5df;
  box-shadow: none;
}

body .workspace-task-tab i,
body .workspace-task-tab-shell.active .workspace-task-tab i {
  color: #b1862e;
}

body .topbar {
  border-color: #dce1e5;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 28px rgba(26, 30, 34, 0.065);
}

body .workspace-heading-mark {
  border-color: #d3b66a;
  color: #d2b66b;
  background: #1b1d20;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 16px rgba(20, 22, 25, 0.12);
}

body .workspace-heading h1 {
  color: #1c2024;
}

body .workspace-heading .eyebrow {
  color: #9a7a2b;
}

body .workspace-subtitle {
  color: #747b83;
}

body .topbar-store-pill {
  border-color: #dce1e5;
  background: #fff;
}

body .topbar-store-pill > i {
  background: #2e8a6e;
  box-shadow: 0 0 0 4px rgba(46, 138, 110, 0.1);
}

body .topbar-membership-button {
  border-color: #d6b65a;
  color: #4d3a0f;
  background: #f3d579;
  box-shadow: 0 8px 18px rgba(156, 112, 25, 0.16), inset 0 1px 0 rgba(255, 249, 220, 0.7);
}

body .topbar-ai-chat-button {
  border-color: #3a3f45;
  color: #f8f1df;
  background: #1b1d20;
  box-shadow: 0 8px 18px rgba(25, 27, 30, 0.16);
}

body .topbar-ai-chat-button small {
  color: #bdb4a1;
}

body .topbar-ai-chat-button strong {
  color: #f5e7b9;
}

body .topbar-ai-chat-icon {
  border-color: #d3b66a;
  color: #2b220d;
  background: #e2c26c;
  box-shadow: none;
}

body .primary-button,
body .auth-submit {
  border-color: #a77f24;
  color: #201a0d;
  background: #d3ae50;
  box-shadow: 0 10px 22px rgba(155, 112, 24, 0.2), inset 0 1px 0 rgba(255, 248, 218, 0.58);
}

body .primary-button:hover,
body .auth-submit:hover {
  border-color: #87651b;
  color: #18130a;
  background: #dfbd63;
  box-shadow: 0 14px 26px rgba(155, 112, 24, 0.25);
}

body .secondary-button,
body .icon-button,
body .segment {
  border-color: #d8dde1;
  color: #424a52;
  background: #fff;
  box-shadow: none;
}

body .secondary-button:hover,
body .icon-button:hover,
body .segment:hover {
  border-color: #d4bd7c;
  color: #805f18;
  background: #fffaf0;
}

body .segment.active {
  color: #f5e6b2;
  background: #202226;
  box-shadow: none;
}

body .panel,
body .command-strip,
body .metric-card,
body .overview-feature-card,
body .overview-welcome-panel,
body .overview-playbook-card,
body .overview-quick-panel,
body .overview-learning-panel {
  border-color: #dfe3e7;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 28px rgba(26, 30, 34, 0.055), inset 0 1px 0 #fff;
}

body .overview-welcome-panel {
  grid-template-columns: minmax(330px, 0.9fr) minmax(600px, 1.4fr);
  min-height: 138px;
  border-color: #d9dee2;
  background: #fff;
}

body .overview-welcome-avatar {
  border-color: #d0b366;
  background: #1b1d20;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 16px rgba(27, 29, 32, 0.16);
}

body .overview-welcome-user h2 {
  color: #20252b;
}

body .overview-welcome-user p {
  color: #747b83;
}

body .overview-account-kpis > div {
  border-left-color: #e0e4e7;
}

body .overview-account-kpis span {
  color: #7b838a;
}

body .overview-account-kpis strong {
  color: #20252b;
}

body .overview-playbook-grid {
  grid-template-columns: 0.95fr 1.35fr 1fr;
}

body .overview-playbook-card.playbook-start,
body .overview-playbook-card.playbook-operate,
body .overview-playbook-card.playbook-grow {
  background: #fff;
}

body .overview-playbook-card > header > span,
body .playbook-operate > header > span,
body .playbook-grow > header > span {
  color: #2a210d;
  background: #e1c16b;
  box-shadow: none;
}

body .overview-playbook-card > header strong,
body .overview-playbook-actions b {
  color: #30383f;
}

body .overview-playbook-card > header small,
body .overview-playbook-actions span {
  color: #818991;
}

body .overview-playbook-actions button::before,
body .playbook-operate .overview-playbook-actions button::before,
body .playbook-grow .overview-playbook-actions button::before {
  background: #c59c42;
}

body .overview-playbook-actions button:hover {
  color: #805f18;
  background: #fffaf0;
}

body .overview-brand-banner {
  min-height: 254px;
  border-color: #d9dee2;
  background: #fff;
  box-shadow: 0 12px 30px rgba(26, 30, 34, 0.06), inset 0 1px 0 #fff;
}

body .overview-brand-banner::before {
  display: none;
}

body .overview-brand-banner::after {
  color: rgba(185, 143, 45, 0.08);
}

body .overview-banner-kicker {
  border-color: #e2d2a7;
  color: #86641e;
  background: #fbf6e7;
  box-shadow: none;
}

body .overview-brand-banner h2 {
  color: #20252b;
}

body .overview-brand-banner p {
  color: #737b83;
}

body .overview-quick-panel {
  background: #fff;
}

body .overview-quick-panel > header {
  border-bottom-color: #e4e7ea;
}

body .overview-quick-panel > header i {
  background: #c59c42;
  box-shadow: none;
}

body .overview-quick-panel > header strong {
  color: #30383f;
}

body .overview-web-shortcuts .shortcut-card {
  --shortcut-accent: #b4872f;
  --shortcut-soft: #fbf6e8;
  --shortcut-line: #ead9ad;
  border-color: #e2e6e9;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(26, 30, 34, 0.04), inset 0 1px 0 #fff;
}

body .overview-web-shortcuts .shortcut-card:hover {
  border-color: #d7bb6d;
  color: #805f18;
  background: #fffaf0;
  box-shadow: 0 12px 22px rgba(151, 112, 27, 0.11), inset 0 1px 0 #fff;
}

body .overview-web-shortcuts .shortcut-card > i {
  color: #9b7425;
  background: #fbf6e7;
  box-shadow: none;
}

body .overview-web-shortcuts .shortcut-card b {
  color: #30383f;
}

body .overview-web-shortcuts .shortcut-card small {
  color: #858c92;
}

body table thead th {
  border-color: #dfe3e7;
  color: #626a72;
  background: #f4f5f6;
}

body table tbody td {
  border-color: #e6e9ec;
  color: #3d464e;
}

body table tbody tr:hover td {
  background: #fbf8ef;
}

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

  body .overview-playbook-grid {
    grid-template-columns: 1fr;
  }

  body .overview-brand-banner {
    padding: 28px 22px;
  }
}

/* Keep the AI image workspace in the same porcelain, sea-salt green and warm-apricot palette as the home hero. */
.ai-run-log {
  border-color: #cbded8;
  background:
    radial-gradient(circle at 96% 0%, rgba(238, 181, 100, 0.12), transparent 34%),
    linear-gradient(145deg, #fbfffd 0%, #f2f8f5 100%);
  box-shadow: 0 12px 28px rgba(46, 84, 75, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.ai-run-log .integration-log {
  border-color: #c5dcd5;
  color: #315750;
  background:
    linear-gradient(90deg, rgba(106, 199, 181, 0.13), transparent 38px),
    #f8fcfa;
  box-shadow: inset 3px 0 #58ad9c, inset 0 1px 0 rgba(255, 255, 255, 0.92);
  scrollbar-color: #abcfc5 #edf6f2;
}

.ai-run-log .integration-log::selection {
  color: #173f3c;
  background: #d6ece5;
}

.ai-run-log .status-dot.online {
  background: #58ad9c;
  box-shadow: 0 0 0 4px rgba(88, 173, 156, 0.14);
}

.ai-provider-hint .badge.ok {
  color: #286f63;
  background: #e5f3ee;
  box-shadow: inset 0 0 0 1px rgba(88, 173, 156, 0.14);
}

.ai-step.active,
.ai-step.done {
  color: #173f3c;
  background: linear-gradient(135deg, #f6fbf8 0%, #e9f5f0 100%);
}

.ai-step.active strong,
.ai-step.done strong {
  background: #58ad9c;
  box-shadow: 0 4px 10px rgba(66, 139, 126, 0.2);
}

.ai-message,
.ai-batch-note {
  border-left-color: #58ad9c;
  background: #f0f7f4;
}

.ai-mode-workbench {
  border-color: #cbded8;
  background:
    radial-gradient(circle at 92% 8%, rgba(238, 181, 100, 0.20), transparent 28%),
    radial-gradient(circle at 5% 100%, rgba(106, 199, 181, 0.23), transparent 34%),
    linear-gradient(145deg, #fbfffd 0%, #eef7f3 58%, #fbf3e7 100%);
  box-shadow: 0 16px 35px rgba(46, 84, 75, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ai-mode-heading .eyebrow {
  color: #4e7971;
}

.ai-product-mode {
  border-color: #cbded8;
  background: rgba(230, 241, 236, 0.88);
  box-shadow: inset 0 1px 2px rgba(46, 84, 75, 0.06);
}

.ai-product-mode button.active,
.ai-gallery-toolbar button.active {
  color: #286f63;
  box-shadow: 0 5px 15px rgba(46, 84, 75, 0.12), inset 0 0 0 1px rgba(88, 173, 156, 0.2);
}

.ai-product-mode button.active small {
  color: #5f817a;
}

.ai-generation-modes button {
  --mode-rgb: 88, 173, 156;
  --mode-color: #3f8f81;
  border-color: rgba(var(--mode-rgb), 0.22);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(var(--mode-rgb), 0.07));
  box-shadow: 0 8px 20px rgba(46, 84, 75, 0.07);
}

.ai-generation-modes button.manual {
  --mode-rgb: 216, 164, 76;
  --mode-color: #ae7823;
}

.ai-generation-modes button.single {
  --mode-rgb: 88, 173, 156;
  --mode-color: #3f8f81;
}

.ai-generation-modes button.multi {
  --mode-rgb: 54, 119, 110;
  --mode-color: #326f67;
}

.ai-generation-modes button.active {
  background: linear-gradient(145deg, #ffffff 0%, rgba(var(--mode-rgb), 0.14) 100%);
  box-shadow: 0 15px 30px rgba(var(--mode-rgb), 0.16), inset 0 0 0 1px rgba(var(--mode-rgb), 0.09);
}

.ai-manual-controls {
  border-color: rgba(216, 164, 76, 0.28);
  background: rgba(251, 243, 231, 0.78);
}

/* Ozon-style realtime charts: restrained blue, thin curves and readable point markers. */
.store-realtime-header {
  background:
    radial-gradient(circle at 96% 0%, rgba(238, 181, 100, 0.1), transparent 34%),
    linear-gradient(105deg, #ffffff 0%, #fbfcff 70%, #f3f7fc 100%);
}

.store-dashboard-picker-button {
  border-color: #ccd9e8;
  box-shadow: 0 8px 24px rgba(43, 102, 177, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.78);
}

.store-dashboard-picker-button:hover,
.store-dashboard-picker-button[aria-expanded="true"] {
  border-color: #78a9df;
  box-shadow: 0 10px 28px rgba(43, 102, 177, 0.13), 0 0 0 3px rgba(50, 121, 230, 0.07);
}

.store-dashboard-picker-button:focus-visible {
  outline-color: rgba(50, 121, 230, 0.18);
}

.store-dashboard-picker-icon,
.store-dashboard-picker-menu button i {
  background: linear-gradient(145deg, #4a96ef, #246fce);
  box-shadow: 0 7px 16px rgba(36, 111, 206, 0.2);
}

.store-dashboard-picker-menu {
  border-color: #d4dfec;
  box-shadow: 0 20px 46px rgba(41, 72, 111, 0.16);
}

.store-dashboard-picker-menu button:hover,
.store-dashboard-picker-menu button.active {
  color: #245f9f;
  background: #eef5fd;
}

.store-realtime-sync-state .badge.ok {
  color: #2769ad;
  background: #eaf3fd;
  box-shadow: inset 0 0 0 1px rgba(50, 121, 230, 0.1);
}

.store-trend-grid {
  background: linear-gradient(180deg, #ffffff, #f8fafd);
}

.store-trend-block {
  border-color: #dde6f0;
  background: linear-gradient(150deg, #ffffff, #fbfcfe);
  box-shadow: 0 8px 24px rgba(48, 83, 126, 0.05);
}

.store-trend-block + .store-trend-block {
  border-left-color: #dde6f0;
}

.store-trend-grid-line {
  stroke: #cddced;
  stroke-width: 1;
  stroke-dasharray: 2 6;
  opacity: 0.72;
}

.store-trend-baseline {
  stroke: #c7d8eb;
  opacity: 0.88;
}

.store-trend-line {
  stroke-width: 2.15;
  filter: drop-shadow(0 2px 3px rgba(35, 116, 208, 0.1));
}

.store-trend-point {
  stroke-width: 1.8;
}

/* ERP order actions: stronger hierarchy, clear press feedback and a prominent Ozon prepare workflow. */
.erp-order-workspace button {
  transition: transform 130ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease, opacity 160ms ease;
}

.erp-order-workspace button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.erp-order-workspace button:active:not(:disabled) {
  box-shadow: none !important;
  transform: translateY(1px) scale(0.975);
}

.erp-order-workspace button:focus-visible {
  outline: 3px solid rgba(50, 121, 230, 0.18);
  outline-offset: 2px;
}

.erp-order-workspace button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.erp-order-workspace button.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: wait;
  opacity: 0.78;
}

.erp-order-workspace button.is-loading::before {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 2px solid rgba(255, 255, 255, 0.46);
  border-top-color: currentColor;
  border-radius: 50%;
  content: "";
  animation: erp-order-button-spin 680ms linear infinite;
}

@keyframes erp-order-button-spin {
  to { transform: rotate(360deg); }
}

body .erp-order-query-button {
  background: linear-gradient(135deg, #397fdc, #2d68be);
  box-shadow: 0 7px 16px rgba(45, 104, 190, 0.22);
}

body .erp-order-sync-button {
  color: #2d2412;
  background: linear-gradient(135deg, #f1c75d, #dca62d);
  box-shadow: 0 7px 16px rgba(190, 137, 31, 0.22);
}

body .erp-order-command-bar > .secondary-button {
  border-color: #d8d0bf;
  color: #5a5245;
  background: #fffdf8;
  box-shadow: 0 4px 12px rgba(74, 61, 34, 0.06);
}

.erp-order-prepare-bar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 44px minmax(280px, 1fr) minmax(220px, auto) auto;
  align-items: center;
  gap: 13px;
  padding: 11px 16px;
  border-bottom: 1px solid #eadfc9;
  background:
    radial-gradient(circle at 88% 0%, rgba(67, 133, 218, 0.1), transparent 28%),
    linear-gradient(105deg, #fffdf8 0%, #fbf6e9 56%, #f7faff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.erp-order-prepare-symbol {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  color: #ffffff;
  background: linear-gradient(145deg, #397fdc, #245ca8);
  box-shadow: 0 8px 18px rgba(41, 95, 164, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.erp-order-prepare-symbol span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.erp-order-prepare-symbol i {
  position: absolute;
  right: -4px;
  bottom: -3px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 2px solid #fffdf8;
  border-radius: 50%;
  color: #33270e;
  background: #e8b63d;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.erp-order-prepare-copy,
.erp-order-prepare-readiness {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.erp-order-prepare-copy strong {
  color: #242019;
  font-size: 13px;
  font-weight: 850;
}

.erp-order-prepare-copy span,
.erp-order-prepare-readiness span {
  color: #817a6c;
  font-size: 9px;
}

.erp-order-prepare-readiness {
  justify-items: end;
  padding-right: 4px;
  text-align: right;
}

.erp-order-prepare-readiness strong {
  color: #36669f;
  font-size: 10px;
}

.erp-order-prepare-primary {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 15px;
  border: 1px solid #c99524;
  border-radius: 11px;
  color: #2f260f;
  background: linear-gradient(135deg, #f5cf6a 0%, #dfa82f 100%);
  box-shadow: 0 9px 20px rgba(174, 122, 22, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.52);
  font-weight: 850;
  white-space: nowrap;
}

.erp-order-prepare-primary b {
  min-width: 35px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(49, 86, 137, 0.86);
  font-size: 9px;
}

.erp-order-prepare-primary:hover:not(:disabled) {
  border-color: #b37d13;
  background: linear-gradient(135deg, #f8d777 0%, #dfa01f 100%);
  box-shadow: 0 12px 24px rgba(174, 122, 22, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

body .erp-order-row-actions .erp-order-prepare-button {
  min-height: 29px;
  border-color: #c99524;
  color: #3b2c0d;
  background: linear-gradient(135deg, #f7d778, #e5b23f);
  box-shadow: 0 5px 12px rgba(175, 123, 24, 0.16);
  font-weight: 850;
}

body .erp-order-row-actions .erp-order-prepare-button.needs-purchase {
  border-color: #dec98f;
  color: #765b20;
  background: #fffaf0;
  box-shadow: none;
}

body .erp-order-row-actions button:not(.erp-order-prepare-button):not(.erp-order-print-label) {
  border-color: #ccd9e5;
  color: #37658d;
  background: #ffffff;
}

body .erp-order-batch-actions button {
  border: 1px solid #cad7e3;
  color: #416584;
  background: #f2f7fc;
  box-shadow: 0 4px 10px rgba(46, 80, 111, 0.07);
}

body .erp-order-batch-actions button[data-erp-order-batch="status"] {
  border-color: #d7cce8;
  color: #705d94;
  background: #f7f3fb;
}

body .erp-order-batch-actions button[data-erp-order-batch="purchase"],
body .erp-order-batch-actions button[data-erp-order-batch="update"] {
  border-color: #ded1ad;
  color: #75602b;
  background: #fffaf0;
}

@media (max-width: 1040px) {
  .erp-order-prepare-bar {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .erp-order-prepare-readiness {
    display: none;
  }
}

@media (max-width: 660px) {
  .erp-order-prepare-bar {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .erp-order-prepare-primary {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Final ERP density override: keep the order workspace readable after legacy rules. */
body .erp-order-command-bar { gap: 12px; padding: 18px 20px; }
body .erp-order-command-bar > select,
body .erp-order-command-bar > input,
body .erp-order-command-bar > button,
body .erp-order-command-bar .erp-order-date-range { min-height: 44px; font-size: 12px; }
body .erp-order-sync-note { padding: 9px 20px; font-size: 11px; }
body .erp-order-prepare-bar { padding: 16px 20px; }
body .erp-order-prepare-copy strong,
body .erp-order-prepare-readiness strong { font-size: 13px; }
body .erp-order-prepare-copy span,
body .erp-order-prepare-readiness span { font-size: 11px; line-height: 1.55; }
body .erp-order-status-tabs { gap: 6px; padding: 14px 18px; }
body .erp-order-status-tabs button { min-height: 38px; padding: 9px 13px; font-size: 12px; }
body .erp-order-status-tabs button b { min-width: 23px; height: 21px; font-size: 11px; }
body .erp-order-table-wrap { min-height: 430px; padding: 8px 16px 0; overflow-x: auto; }
body .erp-order-table { min-width: 1650px; }
body .erp-order-table th { padding: 13px 14px; color: #49656a; font-size: 12px; line-height: 1.35; }
body .erp-order-table th:first-child { width: 42px; }
body .erp-order-table th:nth-child(2) { width: 420px; }
body .erp-order-table th:nth-child(3) { width: 155px; }
body .erp-order-table th:nth-child(4) { width: 140px; }
body .erp-order-table th:nth-child(5) { width: 145px; }
body .erp-order-table th:nth-child(6) { width: 175px; }
body .erp-order-table th:nth-child(7) { width: 210px; }
body .erp-order-table th:nth-child(8) { width: 180px; }
body .erp-order-table th:nth-child(9) { width: 130px; }
body .erp-order-table td { padding: 18px 14px; color: #334f54; font-size: 12px; line-height: 1.5; }
body .erp-order-product-cell { grid-template-columns: 70px minmax(0, 1fr); gap: 14px; }
body .erp-order-product-image { width: 70px; height: 70px; border-radius: 11px; }
body .erp-order-product-copy { gap: 7px; }
body .erp-order-product-title { gap: 8px; }
body .erp-order-product-title strong { font-size: 13px; line-height: 1.45; }
body .erp-order-workflow-badge { padding: 4px 8px; font-size: 10px; }
body .erp-order-platform-state { font-size: 10px; }
body .erp-order-product-meta { gap: 6px; font-size: 10px; }
body .erp-order-product-meta span { padding: 4px 7px; }
body .erp-order-store-line { gap: 7px; padding: 6px 8px; font-size: 10px; }
body .erp-order-money-cell { gap: 5px; }
body .erp-order-money-cell strong { font-size: 14px; }
body .erp-order-money-cell span { font-size: 10px; }
body .erp-order-money-cell b { font-size: 11px; }
body .erp-order-finance-mode { padding: 4px 7px; font-size: 9px; }
body .erp-order-procurement-cell,
body .erp-order-logistics-cell,
body .erp-order-time-cell { gap: 7px; font-size: 10px; }
body .erp-order-procurement-cell strong,
body .erp-order-logistics-cell strong { font-size: 12px; }
body .erp-order-time-chip { padding: 7px 9px; font-size: 10px; line-height: 1.45; }
body .erp-order-logistics-open { gap: 7px; padding: 10px 11px; }
body .erp-order-logistics-open em { font-size: 9px; }
body .erp-order-row-actions { gap: 7px; min-width: 112px; }
body .erp-order-row-actions button { min-height: 34px; padding: 7px 10px; border-radius: 9px; font-size: 11px; font-weight: 750; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease; }
body .erp-order-row-actions button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 7px 15px rgba(48, 75, 90, .12); }
body .erp-order-row-actions button:active:not(:disabled),
body .erp-order-command-bar button:active:not(:disabled),
body .erp-order-batch-actions button:active:not(:disabled) { transform: translateY(1px) scale(.98); box-shadow: none; }
body .erp-order-row-actions .erp-order-purchase-button { border-color: #d7b75e !important; color: #6d5114 !important; background: #fff8e5 !important; }
body .erp-order-list-footer { padding: 14px 16px; }
body .erp-order-batch-actions button,
body .erp-order-pagination,
body .erp-order-batch-actions span { font-size: 11px; }
body .erp-order-total-strip { gap: 22px; padding: 14px 18px; }
body .erp-order-total-strip strong { font-size: 16px; }
body .erp-order-total-strip span { font-size: 10px; }

/* Keep the ERP order grid inside the workspace width so all columns are visible at once. */
body .erp-order-table-wrap { max-width: 100%; min-width: 0; overflow-x: hidden; padding: 8px 12px 0; }
body .erp-order-table { width: 100%; min-width: 0; table-layout: fixed; }
body .erp-order-table th,
body .erp-order-table td { min-width: 0; padding: 9px 7px; font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; white-space: normal; }
body .erp-order-table th:first-child { width: 3%; }
body .erp-order-table th:nth-child(2) { width: 27%; }
body .erp-order-table th:nth-child(3) { width: 11%; }
body .erp-order-table th:nth-child(4) { width: 9%; }
body .erp-order-table th:nth-child(5) { width: 11%; }
body .erp-order-table th:nth-child(6) { width: 12%; }
body .erp-order-table th:nth-child(7) { width: 13%; }
body .erp-order-table th:nth-child(8) { width: 8%; }
body .erp-order-table th:nth-child(9) { width: 6%; }
body .erp-order-table.erp-order-summary-orders th:first-child { width: 23%; }
body .erp-order-table.erp-order-summary-orders th:nth-child(2) { width: 11%; }
body .erp-order-table.erp-order-summary-orders th:nth-child(3) { width: 11%; }
body .erp-order-table.erp-order-summary-orders th:nth-child(4) { width: 8%; }
body .erp-order-table.erp-order-summary-orders th:nth-child(5) { width: 10%; }
body .erp-order-table.erp-order-summary-orders th:nth-child(6) { width: 10%; }
body .erp-order-table.erp-order-summary-orders th:nth-child(7) { width: 13%; }
body .erp-order-table.erp-order-summary-orders th:nth-child(8) { width: 7%; }
body .erp-order-table.erp-order-summary-orders th:nth-child(9) { width: 7%; }
body .erp-order-product-cell { grid-template-columns: 52px minmax(0, 1fr); gap: 8px; }
body .erp-order-product-image { width: 52px; height: 52px; }
body .erp-order-product-title,
body .erp-order-product-copy,
body .erp-order-money-cell,
body .erp-order-procurement-cell,
body .erp-order-logistics-cell,
body .erp-order-time-cell,
body .erp-order-row-actions { min-width: 0; }
body .erp-order-money-cell,
body .erp-order-money-cell .erp-order-amount { white-space: normal; overflow-wrap: anywhere; }
body .erp-order-logistics-open,
body .erp-order-time-chip { min-width: 0; overflow-wrap: anywhere; }
body .erp-order-row-actions { width: 100%; }
body .erp-order-row-actions button { min-width: 0; padding: 5px 6px; font-size: 9px; white-space: normal; }
body .erp-order-status-tabs { flex-wrap: wrap; overflow-x: visible; }
body .erp-order-list-footer,
body .erp-order-total-strip { flex-wrap: wrap; }

/* Global WeChat customer service */
.customer-service-fab {
  position: fixed;
  right: 22px;
  bottom: 92px;
  z-index: 86;
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  border: 1px solid #d7b75e;
  border-radius: 10px;
  padding: 5px 12px 5px 6px;
  color: #33260d;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), transparent 55%),
    linear-gradient(135deg, #fff8df, #ead083);
  box-shadow: 0 9px 20px rgba(141, 99, 19, .14), inset 0 1px 0 #fff;
  text-align: left;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.customer-service-fab:hover {
  transform: translateY(-1px);
  border-color: #bd8b20;
  color: #1f1708;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), transparent 50%),
    linear-gradient(135deg, #f4dd91, #d3a339);
  box-shadow: 0 12px 24px rgba(141, 99, 19, .2), inset 0 1px 0 #fff;
}
.customer-service-fab:active { transform: scale(.98); }
.customer-service-fab:focus-visible { outline: 3px solid rgba(220, 169, 42, .28); outline-offset: 3px; }
.customer-service-fab-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: #f1d477;
  background: linear-gradient(145deg, #383126, #171719);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  font-size: 11px;
  font-weight: 950;
}
.customer-service-fab > span:last-child { display: flex; flex-direction: column; justify-content: center; }
.customer-service-fab strong { font-size: 12px; font-weight: 850; }
.customer-service-fab small { display: none; }

.customer-service-dialog {
  width: min(420px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100dvh - 28px);
  margin: auto;
  border: 0;
  border-radius: 24px;
  padding: 0;
  color: #2f3a3b;
  background: transparent;
  box-shadow: 0 30px 90px rgba(24, 30, 28, .35);
  overflow: visible;
}
.customer-service-dialog::backdrop { background: rgba(20, 23, 22, .5); backdrop-filter: blur(5px); }
.customer-service-card {
  position: relative;
  display: flex;
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  flex-direction: column;
  align-items: center;
  border: 1px solid #eadfca;
  border-radius: 24px;
  padding: 24px 26px 22px;
  background: linear-gradient(180deg, #fffdf8, #fff 58%, #fbf7ed);
}
.customer-service-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #ded5c4;
  border-radius: 50%;
  color: #756d60;
  background: rgba(255,255,255,.9);
  font-size: 21px;
  line-height: 1;
}
.customer-service-close:hover { border-color: #cba443; color: #72500e; background: #fff9e9; }
.customer-service-heading { display: flex; align-items: center; align-self: stretch; gap: 12px; padding-right: 38px; }
.customer-service-heading > span {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, #2fc66f, #15974d);
  box-shadow: 0 10px 24px rgba(29, 161, 83, .2);
  font-size: 12px;
  font-weight: 900;
}
.customer-service-heading small { color: #a27718; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.customer-service-heading h2 { margin: 3px 0 0; color: #2b3536; font-size: 20px; letter-spacing: -.02em; }
.customer-service-card > p { align-self: stretch; margin: 15px 0 14px; color: #788383; font-size: 11px; line-height: 1.7; }
.customer-service-qr {
  width: min(320px, 100%);
  margin: 0;
  border: 1px solid #e8e1d5;
  border-radius: 20px;
  padding: 11px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(50, 52, 47, .09);
}
.customer-service-qr img { display: block; width: 100%; height: auto; border-radius: 12px; }
.customer-service-tip { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: #6b6252; font-size: 10px; font-weight: 700; }
.customer-service-tip i { width: 7px; height: 7px; border-radius: 50%; background: #25b968; box-shadow: 0 0 0 4px rgba(37,185,104,.1); }

/* GPT-5.5 global operations assistant */
.topbar-ai-chat-button {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 9px;
  border: 1px solid #d2aa45;
  border-radius: 14px;
  padding: 6px 13px 6px 7px;
  color: #fff8e5;
  background: linear-gradient(135deg, #24211b 0%, #3a3020 58%, #785718 100%);
  box-shadow: 0 10px 24px rgba(88, 63, 16, .2);
  text-align: left;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.topbar-ai-chat-button:hover { transform: translateY(-1px); border-color: #edca70; box-shadow: 0 13px 28px rgba(88, 63, 16, .28); }
.topbar-ai-chat-button:active { transform: scale(.985); }
.topbar-ai-chat-button:focus-visible { outline: 3px solid rgba(223, 177, 57, .28); outline-offset: 2px; }
.topbar-ai-chat-button > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.topbar-ai-chat-button small { color: #d8c79e; font-size: 9px; font-weight: 650; white-space: nowrap; }
.topbar-ai-chat-button strong { font-size: 12px; font-weight: 850; white-space: nowrap; }
.topbar-ai-chat-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border: 1px solid rgba(255, 235, 171, .38);
  border-radius: 10px;
  color: #342612;
  background: linear-gradient(145deg, #ffe49a, #d29a23);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  font-size: 11px;
  font-weight: 950;
}

.ai-chat-dialog {
  width: min(820px, calc(100vw - 32px));
  height: min(780px, calc(100vh - 42px));
  max-width: none;
  max-height: none;
  margin: auto;
  border: 0;
  border-radius: 22px;
  padding: 0;
  color: #27383b;
  background: transparent;
  box-shadow: 0 30px 90px rgba(24, 30, 28, .34);
  overflow: hidden;
}
.ai-chat-dialog::backdrop { background: rgba(20, 23, 22, .48); backdrop-filter: blur(5px); }
.ai-chat-shell { display: grid; height: 100%; grid-template-rows: auto auto minmax(0, 1fr) auto auto; background: #fbfaf7; }
.ai-chat-header {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  border-bottom: 1px solid #e9e2d5;
  background: linear-gradient(135deg, #24211b 0%, #30291f 68%, #5f461a 100%);
}
.ai-chat-brand { display: flex; min-width: 0; align-items: center; gap: 12px; }
.ai-chat-brand > span {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid rgba(255, 236, 173, .5);
  border-radius: 14px;
  color: #30220b;
  background: linear-gradient(145deg, #ffe9a9, #c99220);
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 8px 20px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.72);
}
.ai-chat-brand small { display: block; margin-bottom: 2px; color: #cfc2a6; font-size: 9px; letter-spacing: .08em; }
.ai-chat-brand h2 { margin: 0; color: #fff; font-size: 19px; letter-spacing: -.02em; }
.ai-chat-header-actions { display: flex; align-items: center; gap: 8px; }
.ai-chat-clear-button,
.ai-chat-close-button { border: 1px solid rgba(255,255,255,.16); color: #f8edd1; background: rgba(255,255,255,.07); }
.ai-chat-clear-button { min-height: 34px; border-radius: 999px; padding: 0 12px; font-size: 11px; font-weight: 750; }
.ai-chat-close-button { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; font-size: 20px; line-height: 1; }
.ai-chat-clear-button:hover,
.ai-chat-close-button:hover { border-color: rgba(255,236,173,.55); background: rgba(255,255,255,.13); }
.ai-chat-account-bar { display: flex; min-height: 40px; align-items: center; gap: 18px; overflow-x: auto; padding: 8px 18px; border-bottom: 1px solid #ebe6dc; color: #796f5d; background: #fffdf7; font-size: 10px; white-space: nowrap; scrollbar-width: thin; }
.ai-chat-account-bar span { display: inline-flex; align-items: center; gap: 6px; }
.ai-chat-account-bar span:first-child { color: #25735a; font-weight: 800; }
.ai-chat-account-bar i { width: 7px; height: 7px; border-radius: 50%; background: #28a879; box-shadow: 0 0 0 4px rgba(40,168,121,.1); }
.ai-chat-account-bar strong { color: #4f3d16; font-size: 11px; }
.ai-chat-messages { overflow-y: auto; padding: 22px 24px 12px; scroll-behavior: smooth; }
.ai-chat-empty { display: grid; min-height: 100%; place-content: center; justify-items: center; padding: 30px 10px; text-align: center; }
.ai-chat-empty > span { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 15px; border: 1px solid #e5ca83; border-radius: 17px; color: #8a6516; background: linear-gradient(145deg, #fff8df, #f4df9e); font-size: 24px; box-shadow: 0 12px 28px rgba(135, 97, 18, .12); }
.ai-chat-empty h3 { margin: 0; color: #2f393a; font-size: 20px; }
.ai-chat-empty p { max-width: 520px; margin: 8px 0 17px; color: #7a8585; font-size: 12px; line-height: 1.7; }
.ai-chat-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ai-chat-suggestions button { min-height: 35px; border: 1px solid #ded8c9; border-radius: 999px; padding: 0 13px; color: #665535; background: #fff; font-size: 10px; font-weight: 700; box-shadow: 0 5px 14px rgba(48, 40, 23, .05); }
.ai-chat-suggestions button:hover { border-color: #d4ad49; color: #8a6210; background: #fffaf0; }
.ai-chat-message { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 17px; }
.ai-chat-message.user { justify-content: flex-end; }
.ai-chat-message-avatar { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 10px; color: #60450f; background: #f5dda0; font-size: 9px; font-weight: 900; }
.ai-chat-message.user .ai-chat-message-avatar { order: 2; color: #fff; background: #243337; }
.ai-chat-message-body { max-width: min(680px, 82%); }
.ai-chat-message-content { border: 1px solid #e4ded2; border-radius: 4px 15px 15px 15px; padding: 11px 13px; color: #354548; background: #fff; box-shadow: 0 7px 18px rgba(44, 53, 53, .06); font-size: 12px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-chat-message.user .ai-chat-message-content { border-color: #2f4144; border-radius: 15px 4px 15px 15px; color: #fff; background: linear-gradient(135deg, #2d3e41, #172426); }
.ai-chat-message-meta { margin-top: 5px; color: #9a958b; font-size: 9px; line-height: 1.5; }
.ai-chat-message.user .ai-chat-message-meta { text-align: right; }
.ai-chat-thinking { display: inline-flex; align-items: center; gap: 5px; min-width: 72px; }
.ai-chat-thinking i { width: 6px; height: 6px; border-radius: 50%; background: #bb8b20; animation: ai-chat-dot 1.1s infinite ease-in-out; }
.ai-chat-thinking i:nth-child(2) { animation-delay: .14s; }
.ai-chat-thinking i:nth-child(3) { animation-delay: .28s; }
@keyframes ai-chat-dot { 0%, 65%, 100% { opacity: .28; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-4px); } }
.ai-chat-status { min-height: 24px; padding: 4px 24px; color: #89784f; background: #fbfaf7; font-size: 10px; }
.ai-chat-status.error { color: #b2463d; }
.ai-chat-composer { margin: 0; padding: 0 18px 17px; background: #fbfaf7; }
.ai-chat-composer textarea { display: block; width: 100%; min-height: 82px; max-height: 170px; resize: vertical; border: 1px solid #d9d2c5; border-bottom: 0; border-radius: 16px 16px 0 0; padding: 13px 14px 8px; outline: none; color: #2e3e41; background: #fff; font: inherit; font-size: 12px; line-height: 1.6; box-shadow: 0 -3px 20px rgba(44, 48, 42, .04); }
.ai-chat-composer textarea:focus { border-color: #cba13c; box-shadow: 0 0 0 3px rgba(203,161,60,.11); }
.ai-chat-composer footer { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #d9d2c5; border-top: 0; border-radius: 0 0 16px 16px; padding: 7px 8px 7px 14px; background: #fff; }
.ai-chat-composer footer > span { color: #989080; font-size: 9px; }
.ai-chat-composer button { display: inline-flex; min-height: 34px; align-items: center; gap: 7px; border: 1px solid #b9891e; border-radius: 11px; padding: 0 13px 0 8px; color: #2b210f; background: linear-gradient(145deg, #f9d774, #d39a20); box-shadow: 0 7px 16px rgba(143, 101, 18, .18); }
.ai-chat-composer button i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 7px; color: #fff; background: #5d4514; font-size: 13px; font-style: normal; }
.ai-chat-composer button strong { font-size: 11px; }
.ai-chat-composer button:disabled { cursor: wait; filter: grayscale(.25); opacity: .65; }

@media (max-width: 1260px) {
  .topbar-ai-chat-button small { display: none; }
  .topbar-ai-chat-button { padding-right: 9px; }
}
@media (max-width: 980px) {
  .topbar-ai-chat-button > span:last-child { display: none; }
  .topbar-ai-chat-button { padding: 6px; border-radius: 12px; }
}
@media (max-width: 760px) {
  .customer-service-fab { right: 14px; bottom: 78px; padding: 6px; border-radius: 15px; }
  .customer-service-fab > span:last-child { display: none; }
  .customer-service-card { padding: 20px 18px 18px; }
  .customer-service-heading { padding-right: 36px; }
  .customer-service-heading h2 { font-size: 18px; }
  .customer-service-qr { width: min(290px, 100%); }
  .ai-chat-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
  .ai-chat-header { min-height: 70px; padding: 12px 13px; }
  .ai-chat-brand > span { width: 38px; height: 38px; flex-basis: 38px; }
  .ai-chat-brand h2 { font-size: 16px; }
  .ai-chat-clear-button { padding: 0 9px; }
  .ai-chat-account-bar { gap: 9px; padding: 7px 13px; overflow-x: auto; white-space: nowrap; }
  .ai-chat-messages { padding: 17px 13px 8px; }
  .ai-chat-message-body { max-width: 86%; }
  .ai-chat-composer { padding: 0 10px 10px; }
  .ai-chat-composer footer > span { display: none; }
  .ai-chat-composer footer { justify-content: flex-end; }
}

/* High-resolution 1688 previews and the shared image viewer. */
.ai-sku-card-image-link .ai-sku-card-media,
.ai-sku-card-visual > .ai-sku-card-media {
  height: clamp(170px, 13vw, 200px);
}

.ai-sku-card-media img,
.ai-image-option img,
.ai-reference-preview img {
  image-rendering: auto;
}

.ai-image-preview-button {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 999px;
  padding: 0 9px;
  color: #fff;
  background: rgba(26, 39, 40, .78);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(15, 25, 27, .2);
  backdrop-filter: blur(6px);
}

.ai-image-preview-button:hover {
  border-color: #efc65b;
  color: #fff6d7;
  background: rgba(91, 66, 14, .9);
  transform: translateY(-1px);
}

.ai-image-preview-button.sku {
  top: 18px;
  left: 18px;
}

.ai-image-preview-button.gallery {
  top: 6px;
  left: 6px;
  width: 27px;
  min-height: 27px;
  padding: 0;
  opacity: .86;
}

.ai-sku-card-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #edf0f0;
}

.ai-sku-card-links button,
.ai-sku-card-links a {
  min-height: 31px;
  border: 0;
  padding: 6px 8px;
  color: #7a5b17;
  background: #fff;
  font-size: 10px;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
}

.ai-sku-card-links button { border-right: 1px solid #edf0f0; }
.ai-sku-card-links button:hover,
.ai-sku-card-links a:hover { color: #4c3509; background: #fff8e8; }

.ai-reference-preview {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: #fff;
}

.ai-reference-preview img {
  width: 100%;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
}

.ai-reference-preview span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(28, 42, 43, .76);
  font-size: 12px;
  box-shadow: 0 4px 10px rgba(13, 28, 29, .18);
}

.ai-reference-preview:hover { box-shadow: 0 0 0 2px rgba(202, 153, 34, .3); }
.ai-reference-preview:hover span { background: #9c6f12; }

.ai-image-viewer-dialog {
  width: min(1180px, calc(100vw - 36px));
  max-width: none;
  max-height: calc(100dvh - 30px);
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  padding: 0;
  background: transparent;
  box-shadow: 0 30px 90px rgba(10, 19, 20, .38);
}

.ai-image-viewer-dialog::backdrop {
  background: rgba(12, 20, 21, .68);
  backdrop-filter: blur(7px);
}

.ai-image-viewer-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: min(820px, calc(100dvh - 30px));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  background: #f8f6ef;
}

.ai-image-viewer-shell > header,
.ai-image-viewer-shell > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 18px;
  background: #fffdf7;
}

.ai-image-viewer-shell > header { border-bottom: 1px solid #e6dfd0; }
.ai-image-viewer-shell > footer { border-top: 1px solid #e6dfd0; }
.ai-image-viewer-shell > header small { display: block; color: #9a7118; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.ai-image-viewer-shell > header h2 { margin: 3px 0 0; color: #263536; font-size: 18px; }
.ai-image-viewer-shell > header > div:last-child,
.ai-image-viewer-shell > footer > div { display: flex; align-items: center; gap: 8px; }
.ai-image-viewer-shell > header a { min-height: 34px; padding: 8px 12px; border: 1px solid #dec57e; border-radius: 999px; color: #775515; background: #fff8e7; font-size: 10px; font-weight: 800; text-decoration: none; }
.ai-image-viewer-shell > header button { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid #d7d3c8; border-radius: 50%; color: #3d494a; background: #fff; font-size: 20px; }

.ai-image-viewer-stage {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 24px;
  background-color: #20292a;
  background-image: linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.025) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.025) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.025) 75%);
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: 24px 24px;
}

.ai-image-viewer-stage img {
  --viewer-scale: 1;
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 190px);
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.32);
  transform: scale(var(--viewer-scale));
  transform-origin: center;
  transition: transform 140ms ease;
  cursor: zoom-in;
  image-rendering: auto;
}

.ai-image-viewer-shell > footer > span { color: #6f7774; font-size: 10px; }
.ai-image-viewer-shell > footer button {
  min-width: 34px;
  min-height: 32px;
  border: 1px solid #d9d2c2;
  border-radius: 9px;
  padding: 0 10px;
  color: #5e4a22;
  background: #fff;
  font-weight: 800;
}
.ai-image-viewer-shell > footer button:disabled { opacity: .42; }
.ai-image-viewer-shell > footer strong { min-width: 48px; color: #6e5218; font-size: 11px; text-align: center; }

@media (max-width: 720px) {
  .ai-sku-card-image-link .ai-sku-card-media,
  .ai-sku-card-visual > .ai-sku-card-media { height: 210px; }
  .ai-image-viewer-dialog { width: 100vw; max-height: 100dvh; border-radius: 0; }
  .ai-image-viewer-shell { height: 100dvh; border-radius: 0; }
  .ai-image-viewer-shell > header a { display: none; }
  .ai-image-viewer-shell > footer { align-items: flex-start; flex-direction: column; }
  .ai-image-viewer-stage img { max-height: calc(100dvh - 220px); }
}

/* Unified dropdowns: the menu is portaled to body so dialogs and scroll panels cannot clip it. */
.suite-select {
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 0;
  vertical-align: middle;
}

.suite-select-native {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  min-width: 0 !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.suite-select-trigger {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px 9px 13px;
  border: 1px solid #d9cfbd;
  border-radius: 8px;
  background: #fffdfa;
  color: #202933;
  box-shadow: 0 1px 2px rgba(55, 43, 22, 0.04);
  font: inherit;
  font-weight: 700;
  text-align: left;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.suite-select-trigger:hover:not(:disabled) {
  border-color: #c5a35b;
  background: #fff;
}

.suite-select-trigger:focus-visible,
.suite-select.is-open .suite-select-trigger {
  border-color: #b98718;
  outline: none;
  box-shadow: 0 0 0 3px rgba(185, 135, 24, 0.14), 0 4px 14px rgba(88, 62, 10, 0.08);
}

.suite-select-trigger.is-invalid {
  border-color: #cf4e45;
  box-shadow: 0 0 0 3px rgba(207, 78, 69, 0.12);
}

.suite-select-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  background: #f3f3f1;
}

.suite-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-select-trigger.is-placeholder .suite-select-value {
  color: #81858a;
  font-weight: 600;
}

.suite-select-chevron {
  width: 8px;
  height: 8px;
  margin: -4px 3px 0 auto;
  border-right: 2px solid #675c4a;
  border-bottom: 2px solid #675c4a;
  transform: rotate(45deg);
  transition: margin 140ms ease, transform 140ms ease;
}

.suite-select.is-open .suite-select-chevron {
  margin-top: 4px;
  transform: rotate(225deg);
}

.suite-select-portal {
  --suite-select-max-height: 260px;
  position: fixed;
  inset: auto;
  z-index: 30000;
  display: grid;
  gap: 3px;
  max-height: var(--suite-select-max-height);
  margin: 0;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #d8c8a9;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(37, 31, 20, 0.2), 0 4px 12px rgba(37, 31, 20, 0.08);
  overscroll-behavior: contain;
  animation: suite-select-in 120ms ease-out both;
}

.suite-select-portal[hidden] {
  display: none !important;
}

.suite-select-portal.opens-up {
  transform-origin: bottom center;
}

.suite-select-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 7px 10px 7px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #2b3138;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
}

.suite-select-option:hover:not(:disabled),
.suite-select-option.is-active:not(:disabled) {
  outline: none;
  background: #fff4d6;
  color: #694800;
}

.suite-select-option.is-selected {
  background: #f8e7b8;
  color: #5f4200;
}

.suite-select-option.is-placeholder {
  color: #85898d;
  font-weight: 600;
}

.suite-select-option:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.suite-select-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  color: transparent;
  font-size: 12px;
  font-weight: 900;
}

.suite-select-option.is-selected .suite-select-check {
  background: #b98619;
  color: #fff;
}

.suite-select-option-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.suite-select-group {
  padding: 8px 9px 4px 34px;
  color: #8a7451;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.suite-select-portal::-webkit-scrollbar { width: 8px; }
.suite-select-portal::-webkit-scrollbar-track { background: transparent; }
.suite-select-portal::-webkit-scrollbar-thumb { border: 2px solid #fff; border-radius: 8px; background: #c9b992; }

body .erp-order-command-bar > .suite-select {
  min-height: 44px;
}

body .erp-order-command-bar > .suite-select .suite-select-trigger {
  min-height: 44px;
  border-color: #d7e1e3;
  background: #fff;
  color: #315358;
  font-size: 12px;
}

.listing-publish-store-option > .suite-select {
  min-width: 0;
}

@keyframes suite-select-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 720px) {
  .suite-select-trigger { min-height: 44px; }
  .suite-select-option { min-height: 42px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .suite-select-trigger,
  .suite-select-chevron,
  .suite-select-portal { animation: none; transition: none; }
}

/* Extend the black-and-gold system to the AI activity surface. */
body .ai-run-log {
  border-color: #373b40;
  background: linear-gradient(145deg, #222529 0%, #17191c 100%);
  color: #f4efe3;
  box-shadow: 0 14px 32px rgba(16, 18, 20, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body .ai-run-log .integration-log {
  border-color: #4a4f55;
  color: #e9e2d4;
  background: #111315;
  box-shadow: inset 3px 0 #c59c42, inset 0 1px 0 rgba(255, 255, 255, 0.04);
  scrollbar-color: #8f7130 #25282c;
}

body .ai-run-log .status-dot.online {
  background: #d3ae50;
  box-shadow: 0 0 0 4px rgba(211, 174, 80, 0.14);
}

body .ai-provider-hint .badge.ok {
  border-color: #e2d2a7;
  color: #755919;
  background: #fbf6e7;
}

/* Precision light product shell: spacious, cinematic and motion-aware. */
:root {
  --bg: #f5f5f7;
  --surface: rgba(255, 255, 255, 0.86);
  --surface-solid: #ffffff;
  --surface-2: #f0f1f3;
  --ink: #1d1d1f;
  --muted: #74777d;
  --line: rgba(31, 35, 41, 0.1);
  --text: var(--ink);
  --text-muted: var(--muted);
  --surface-muted: var(--surface-2);
  --accent: #c79c43;
  --accent-strong: #8f6b23;
  --accent-2: #91aaf0;
  --charcoal: #20262d;
  --charcoal-soft: #303740;
  --shadow: 0 24px 70px rgba(35, 41, 48, 0.09);
  --shadow-soft: 0 12px 34px rgba(35, 41, 48, 0.06);
}

body {
  color: #1d1d1f;
  background:
    radial-gradient(circle at 76% -14%, rgba(195, 211, 245, 0.28), transparent 31%),
    linear-gradient(180deg, #fbfbfc 0%, #f4f5f7 56%, #f1f2f4 100%);
}

body .sidebar {
  border-right: 0;
  color: #f3f5f7;
  background:
    radial-gradient(circle at 22% -6%, rgba(167, 190, 215, 0.22), transparent 28%),
    linear-gradient(180deg, #35414d 0%, #28323c 100%);
  box-shadow: 12px 0 34px rgba(42, 52, 63, 0.11), inset -1px 0 rgba(255, 255, 255, 0.045);
}

body .brand {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

body .brand-mark {
  border-color: rgba(224, 193, 122, 0.34);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body .brand > div:last-child strong { color: #f7f8fa; }
body .brand > div:last-child span { color: #aeb7c0; }
body .nav-section-label,
body .sidebar .nav-section-label { color: #89939e; }

body .nav-item,
body .nav-download-link,
body .operations-nav-toggle {
  color: #c5cbd2;
}

body .nav-item:hover,
body .nav-download-link:hover,
body .operations-nav-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
}

body .nav-item.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.075));
  box-shadow: inset 2px 0 #d8bc72, inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 20px rgba(20, 27, 34, 0.08);
}

body .nav-item.active::before { color: #dfc478; }

body .data-market-subnav,
body .handbook-subnav,
body .operations-nav-grid {
  border-left-color: rgba(255, 255, 255, 0.08);
}

body .data-market-subnav-item,
body .handbook-subnav-item,
body .operations-nav-item,
body .sidebar .data-market-subnav-item,
body .sidebar .handbook-subnav-item,
body .sidebar .operations-nav-item {
  color: #a6afb8;
}

body .data-market-subnav-item:hover,
body .handbook-subnav-item:hover,
body .operations-nav-item:hover,
body .data-market-subnav-item.active,
body .handbook-subnav-item.active,
body .operations-nav-item.active {
  color: #f5f7f9;
  background: rgba(255, 255, 255, 0.05);
}

body .operations-nav-item.active::before {
  background: #d4b35d;
  box-shadow: 0 0 0 4px rgba(212, 179, 93, 0.12);
}

body .sidebar-token-card,
body .sidebar .store-box,
body .sidebar .account-box {
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: none;
}

body .workspace {
  padding: 14px 22px 42px;
  background: transparent;
}

body .workspace > .workspace-taskbar {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(247, 248, 250, 0.78);
  box-shadow: 0 10px 32px rgba(31, 36, 42, 0.05);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}

body .workspace-task-tab-shell {
  color: #72767c;
}

body .workspace-task-tab-shell:hover {
  color: #25282c;
  border-color: rgba(31, 35, 41, 0.09);
  background: rgba(255, 255, 255, 0.72);
}

body .workspace-task-tab-shell.active {
  color: #1d1d1f;
  border-color: rgba(31, 35, 41, 0.09);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 5px 16px rgba(35, 40, 46, 0.07);
}

body .workspace-task-tab i,
body .workspace-task-tab-shell.active .workspace-task-tab i {
  color: #aa812b;
}

body .topbar {
  border-color: rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 14px 40px rgba(34, 39, 46, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

body .workspace-heading-mark {
  border-color: rgba(31, 35, 41, 0.09);
  color: #ba8e33;
  background: #fff;
  box-shadow: 0 8px 22px rgba(35, 40, 46, 0.08);
}

body .workspace-heading h1 { color: #1d1d1f; }
body .workspace-heading .eyebrow { color: #85888d; }
body .workspace-subtitle { color: #74777d; }

body .topbar-store-pill,
body .topbar-ai-chat-button,
body .topbar-membership-button {
  border-color: rgba(31, 35, 41, 0.09);
  color: #24272b;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 7px 20px rgba(36, 41, 47, 0.05);
}

body .topbar-ai-chat-button small { color: #85898f; }
body .topbar-ai-chat-button strong { color: #24272b; }

body .topbar-ai-chat-icon {
  border-color: rgba(31, 35, 41, 0.08);
  color: #9a7426;
  background: #fff;
  box-shadow: none;
}

body .topbar-membership-button {
  border-color: rgba(198, 157, 67, 0.28);
  color: #614816;
  background: #faf3df;
}

body .topbar-store-pill > i {
  background: #33a578;
  box-shadow: 0 0 0 4px rgba(51, 165, 120, 0.1);
  animation: precision-status-breathe 3.2s ease-in-out infinite;
}

body .primary-button,
body .auth-submit {
  position: relative;
  overflow: hidden;
  border-color: #20242a;
  color: #fff;
  background: #20242a;
  box-shadow: 0 12px 28px rgba(31, 36, 42, 0.17);
}

body .primary-button::after,
body .auth-submit::after {
  content: "";
  position: absolute;
  top: -80%;
  left: -42%;
  width: 30%;
  height: 260%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: rotate(18deg);
  animation: precision-button-sheen 6.8s ease-in-out infinite;
  pointer-events: none;
}

body .primary-button:hover,
body .auth-submit:hover {
  border-color: #111316;
  color: #fff;
  background: #111316;
  box-shadow: 0 16px 32px rgba(31, 36, 42, 0.21);
  transform: translateY(-1px);
}

body .secondary-button,
body .icon-button,
body .segment {
  border-color: rgba(31, 35, 41, 0.1);
  color: #34383d;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: none;
}

body .secondary-button:hover,
body .icon-button:hover,
body .segment:hover {
  border-color: rgba(31, 35, 41, 0.18);
  color: #1d1d1f;
  background: #fff;
}

body .segment.active {
  color: #fff;
  background: #262a2f;
}

body .overview-portal {
  gap: 20px;
}

body .overview-resource-grid { order: 1; }
body .overview-welcome-panel { order: 2; }
body .overview-playbook-grid { order: 3; }
body .overview-learning-grid { order: 4; }

body .overview-resource-grid {
  grid-template-columns: minmax(620px, 1.45fr) minmax(430px, 0.85fr);
  gap: 18px;
}

body .overview-brand-banner,
body .overview-quick-panel,
body .overview-welcome-panel,
body .overview-playbook-card,
body .overview-learning-panel,
body .panel,
body .command-strip,
body .metric-card {
  border-color: rgba(31, 35, 41, 0.085);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 54px rgba(34, 39, 46, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

body .overview-brand-banner {
  min-height: 336px;
  padding: 52px 48px;
  isolation: isolate;
  background:
    radial-gradient(circle at 86% 22%, rgba(174, 197, 244, 0.34), transparent 27%),
    radial-gradient(circle at 70% 78%, rgba(245, 219, 174, 0.24), transparent 25%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 248, 252, 0.92));
}

body .overview-brand-banner::before {
  content: "";
  position: absolute;
  display: block;
  width: 350px;
  height: 350px;
  right: -70px;
  top: -105px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(167, 191, 239, 0.08) 48%, transparent 70%);
  filter: blur(2px);
  animation: precision-ambient-float 11s ease-in-out infinite alternate;
  pointer-events: none;
}

body .overview-brand-banner::after { display: none; }

body .overview-banner-kicker,
body .overview-brand-banner h2,
body .overview-brand-banner p,
body .overview-brand-banner > div:not(.overview-orbit-scene) {
  position: relative;
  z-index: 3;
  max-width: 54%;
}

body .overview-banner-kicker {
  border: 0;
  color: #717981;
  background: transparent;
  box-shadow: none;
  font-size: 9px;
  letter-spacing: 1.35px;
}

body .overview-brand-banner h2 {
  max-width: 58%;
  margin-top: 20px;
  color: #17191c;
  font-size: clamp(34px, 3.2vw, 54px);
  font-weight: 720;
  letter-spacing: -2.6px;
  line-height: 1.13;
}

body .overview-brand-banner p {
  margin-top: 14px;
  color: #70757b;
  font-size: 14px;
  line-height: 1.7;
}

body .overview-brand-banner > div:not(.overview-orbit-scene) {
  gap: 10px;
  margin-top: 28px;
}

body .overview-orbit-scene {
  position: absolute;
  z-index: 2;
  display: block;
  width: 47%;
  height: 100%;
  right: 0;
  top: 0;
  margin: 0;
  pointer-events: none;
  perspective: 900px;
}

body .overview-orbit-glow {
  position: absolute;
  width: 210px;
  height: 210px;
  left: 49%;
  top: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(174, 200, 246, 0.22) 42%, rgba(225, 193, 122, 0.12) 64%, transparent 74%);
  filter: blur(5px);
  transform: translate(-50%, -50%);
  animation: precision-orbit-glow 7.5s ease-in-out infinite;
}

body .overview-orbit-ring {
  position: absolute;
  left: 49%;
  top: 50%;
  border: 1px solid rgba(116, 143, 192, 0.34);
  border-radius: 50%;
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.72), 0 8px 22px rgba(72, 91, 124, 0.06);
  transform-style: preserve-3d;
}

body .orbit-ring-one {
  width: 252px;
  height: 106px;
  border-right-color: rgba(199, 156, 67, 0.7);
  transform: translate(-50%, -50%) rotate(-17deg);
  animation: precision-orbit-one 13s linear infinite;
}

body .orbit-ring-two {
  width: 118px;
  height: 258px;
  border-top-color: rgba(199, 156, 67, 0.62);
  transform: translate(-50%, -50%) rotate(31deg);
  animation: precision-orbit-two 15s linear infinite reverse;
}

body .orbit-ring-three {
  width: 232px;
  height: 160px;
  border-left-color: rgba(160, 188, 241, 0.7);
  transform: translate(-50%, -50%) rotate(42deg);
  animation: precision-orbit-three 18s linear infinite;
}

body .overview-orbit-core {
  position: absolute;
  left: 49%;
  top: 50%;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(186, 205, 242, 0.34)),
    rgba(255, 255, 255, 0.58);
  box-shadow: 0 24px 45px rgba(54, 72, 104, 0.15), inset 0 1px 0 #fff;
  transform: translate(-50%, -50%) rotate(16deg);
  animation: precision-core-float 6s ease-in-out infinite;
}

body .overview-orbit-core i {
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(130, 151, 190, 0.38);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.34);
  transform: rotate(28deg);
}

body .overview-orbit-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #cda448;
  box-shadow: 0 5px 16px rgba(125, 91, 28, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body .orbit-particle-one {
  left: 20%;
  top: 48%;
  animation: precision-particle-one 8s ease-in-out infinite;
}

body .orbit-particle-two {
  right: 18%;
  top: 29%;
  width: 11px;
  height: 11px;
  background: #bdcff4;
  animation: precision-particle-two 9.5s ease-in-out infinite;
}

body .orbit-particle-three {
  right: 13%;
  bottom: 23%;
  width: 7px;
  height: 7px;
  background: #fff;
  animation: precision-particle-three 7s ease-in-out infinite;
}

body .overview-orbit-label {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 2px;
  min-width: 108px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 14px 34px rgba(51, 65, 88, 0.09);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
}

body .overview-orbit-label small {
  color: #898e94;
  font-size: 9px;
}

body .overview-orbit-label b {
  color: #282c31;
  font-size: 12px;
  font-weight: 680;
}

body .orbit-label-top {
  right: 7%;
  top: 17%;
  animation: precision-label-float 6.4s ease-in-out infinite;
}

body .orbit-label-bottom {
  left: 4%;
  bottom: 15%;
  animation: precision-label-float 7.4s ease-in-out infinite reverse;
}

body .overview-quick-panel {
  min-height: 336px;
  padding: 0 18px 18px;
  background: rgba(255, 255, 255, 0.86);
}

body .overview-quick-panel > header {
  min-height: 68px;
  border-bottom-color: rgba(31, 35, 41, 0.075);
}

body .overview-quick-panel > header i {
  width: 3px;
  background: #c79c43;
  box-shadow: none;
}

body .overview-web-shortcuts .shortcut-card {
  --shortcut-accent: #3f4852;
  --shortcut-soft: #f6f7f9;
  --shortcut-line: rgba(31, 35, 41, 0.08);
  border-color: rgba(31, 35, 41, 0.075);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 6px 18px rgba(36, 41, 47, 0.035);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

body .overview-web-shortcuts .shortcut-card:hover {
  border-color: rgba(31, 35, 41, 0.12);
  color: #1d1d1f;
  background: #fff;
  box-shadow: 0 16px 30px rgba(36, 41, 47, 0.085);
  transform: translateY(-3px);
}

body .overview-web-shortcuts .shortcut-card > i {
  color: #39414a;
  background: #f5f6f8;
  box-shadow: none;
}

body .overview-web-shortcuts .shortcut-card b { color: #2f3439; }
body .overview-web-shortcuts .shortcut-card small { color: #8a8f95; }

body .overview-welcome-panel {
  position: relative;
  grid-template-columns: minmax(310px, 0.78fr) minmax(660px, 1.42fr);
  min-height: 158px;
  padding: 26px 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.84);
}

body .overview-welcome-panel::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(114, 149, 220, 0.22), rgba(199, 156, 67, 0.24), transparent);
  transform: translateX(-42%);
  animation: precision-live-line 8s ease-in-out infinite;
}

body .overview-welcome-avatar {
  border-color: rgba(31, 35, 41, 0.085);
  background: #fff;
  box-shadow: 0 12px 28px rgba(35, 40, 46, 0.08);
}

body .overview-welcome-user h2 {
  color: #23262a;
  font-size: 20px;
}

body .overview-welcome-user p { color: #858a90; }

body .overview-account-kpis > div {
  border-left-color: rgba(31, 35, 41, 0.08);
}

body .overview-account-kpis span {
  color: #898e94;
  letter-spacing: 0.1px;
}

body .overview-account-kpis strong {
  color: #23262a;
  font-weight: 680;
}

body .overview-playbook-grid {
  grid-template-columns: 0.95fr 1.3fr 1fr;
  gap: 18px;
}

body .overview-playbook-card {
  background: rgba(255, 255, 255, 0.76);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

body .overview-playbook-card:hover {
  border-color: rgba(31, 35, 41, 0.13);
  box-shadow: 0 22px 54px rgba(34, 39, 46, 0.09);
  transform: translateY(-2px);
}

body .overview-playbook-card > header > span,
body .playbook-operate > header > span,
body .playbook-grow > header > span {
  color: #82611d;
  background: #faf3df;
  box-shadow: none;
}

body .overview-playbook-actions button::before,
body .playbook-operate .overview-playbook-actions button::before,
body .playbook-grow .overview-playbook-actions button::before {
  background: #aeb8c7;
}

body .overview-playbook-actions button:hover {
  color: #22262b;
  background: #f4f5f7;
}

body .overview-learning-panel {
  background: rgba(255, 255, 255, 0.74);
}

body table thead th {
  border-color: rgba(31, 35, 41, 0.08);
  color: #6d7278;
  background: #f4f5f7;
}

body table tbody td {
  border-color: rgba(31, 35, 41, 0.07);
  color: #373c42;
}

body table tbody tr:hover td { background: #f7f8fa; }

body .ai-run-log {
  border-color: rgba(31, 35, 41, 0.09);
  color: #34383d;
  background:
    radial-gradient(circle at 94% 0%, rgba(181, 201, 240, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.84);
  box-shadow: 0 16px 42px rgba(34, 39, 46, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

body .ai-run-log .integration-log {
  border-color: rgba(31, 35, 41, 0.09);
  color: #394047;
  background: rgba(247, 248, 250, 0.86);
  box-shadow: inset 3px 0 #b8c7e7, inset 0 1px 0 rgba(255, 255, 255, 0.8);
  scrollbar-color: #bac2cd #eef0f3;
}

body .ai-run-log .status-dot.online {
  background: #3cac80;
  box-shadow: 0 0 0 4px rgba(60, 172, 128, 0.11);
  animation: precision-status-breathe 3.2s ease-in-out infinite;
}

@keyframes precision-ambient-float {
  from { transform: translate3d(-8px, -4px, 0) scale(0.96); opacity: 0.64; }
  to { transform: translate3d(14px, 10px, 0) scale(1.05); opacity: 0.94; }
}

@keyframes precision-orbit-glow {
  0%, 100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0.72; }
  50% { transform: translate(-50%, -50%) scale(1.07); opacity: 1; }
}

@keyframes precision-orbit-one {
  to { transform: translate(-50%, -50%) rotate(343deg); }
}

@keyframes precision-orbit-two {
  to { transform: translate(-50%, -50%) rotate(391deg); }
}

@keyframes precision-orbit-three {
  to { transform: translate(-50%, -50%) rotate(402deg); }
}

@keyframes precision-core-float {
  0%, 100% { transform: translate(-50%, -50%) rotate(16deg) translateY(-4px); }
  50% { transform: translate(-50%, -50%) rotate(20deg) translateY(6px); }
}

@keyframes precision-particle-one {
  0%, 100% { transform: translate(0, -5px) scale(0.86); }
  50% { transform: translate(18px, 9px) scale(1.12); }
}

@keyframes precision-particle-two {
  0%, 100% { transform: translate(-8px, 0); }
  50% { transform: translate(8px, 14px); }
}

@keyframes precision-particle-three {
  0%, 100% { transform: translateY(5px); opacity: 0.58; }
  50% { transform: translateY(-9px); opacity: 1; }
}

@keyframes precision-label-float {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(5px); }
}

@keyframes precision-status-breathe {
  0%, 100% { box-shadow: 0 0 0 3px rgba(51, 165, 120, 0.08); }
  50% { box-shadow: 0 0 0 7px rgba(51, 165, 120, 0.02); }
}

@keyframes precision-button-sheen {
  0%, 72% { transform: translateX(0) rotate(18deg); opacity: 0; }
  76% { opacity: 1; }
  92%, 100% { transform: translateX(560%) rotate(18deg); opacity: 0; }
}

@keyframes precision-live-line {
  0%, 100% { transform: translateX(-42%); opacity: 0.5; }
  50% { transform: translateX(42%); opacity: 1; }
}

@media (max-width: 1280px) {
  body .overview-resource-grid {
    grid-template-columns: minmax(520px, 1.2fr) minmax(390px, 0.8fr);
  }

  body .overview-orbit-scene {
    width: 44%;
    opacity: 0.82;
  }

  body .overview-orbit-label { display: none; }
}

@media (max-width: 960px) {
  body .overview-resource-grid,
  body .overview-welcome-panel {
    grid-template-columns: 1fr;
  }

  body .overview-brand-banner,
  body .overview-quick-panel {
    min-height: 310px;
  }

  body .overview-playbook-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  body .workspace { padding: 10px 10px 28px; }

  body .topbar { border-radius: 16px; }

  body .overview-brand-banner {
    min-height: 420px;
    padding: 34px 24px;
  }

  body .overview-banner-kicker,
  body .overview-brand-banner h2,
  body .overview-brand-banner p,
  body .overview-brand-banner > div:not(.overview-orbit-scene) {
    max-width: 100%;
  }

  body .overview-brand-banner h2 {
    max-width: 100%;
    font-size: clamp(32px, 10vw, 42px);
    letter-spacing: -1.8px;
  }

  body .overview-orbit-scene {
    width: 100%;
    height: 190px;
    top: auto;
    bottom: 0;
    opacity: 0.64;
    transform: scale(0.82);
    transform-origin: center bottom;
  }

  body .overview-welcome-panel {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  body .overview-playbook-grid { grid-template-columns: 1fr; }
  body .overview-playbook-card:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  body .topbar-store-pill > i,
  body .primary-button::after,
  body .auth-submit::after,
  body .overview-brand-banner::before,
  body .overview-orbit-glow,
  body .overview-orbit-ring,
  body .overview-orbit-core,
  body .overview-orbit-particle,
  body .overview-orbit-label,
  body .overview-welcome-panel::after,
  body .ai-run-log .status-dot.online {
    animation: none !important;
  }
}

/* Reference-aligned homepage composition: overview, tasks, tools, news and learning. */
body .overview-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(560px, 1.55fr) minmax(270px, 0.72fr) minmax(360px, 1fr);
  gap: 16px;
  align-items: stretch;
}

body .overview-dashboard-grid > * {
  min-width: 0;
}

body .overview-dashboard-grid .store-realtime-panel,
body .overview-home-card {
  margin: 0;
  border: 1px solid rgba(31, 35, 41, 0.085);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 18px 52px rgba(34, 40, 48, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px) saturate(125%);
}

body .overview-dashboard-grid .store-realtime-panel {
  display: flex;
  min-height: 318px;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

body .overview-dashboard-grid .store-realtime-header {
  min-height: 76px;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(31, 35, 41, 0.07);
  background: transparent;
}

body .overview-dashboard-grid .store-realtime-header .eyebrow,
body .overview-home-card-header span {
  color: #9e792c;
  font-size: 9px;
  font-weight: 820;
  letter-spacing: 0.8px;
}

body .overview-dashboard-grid .store-realtime-header h2,
body .overview-home-card-header h2 {
  margin-top: 3px;
  color: #22262b;
  font-size: 18px;
  font-weight: 740;
  letter-spacing: -0.35px;
}

body .overview-dashboard-grid .store-realtime-actions {
  gap: 8px;
}

body .overview-dashboard-grid .store-dashboard-picker-button {
  min-height: 44px;
  padding: 5px 9px;
  border-color: rgba(31, 35, 41, 0.09);
  border-radius: 13px;
  background: rgba(248, 249, 251, 0.82);
  box-shadow: none;
}

body .overview-dashboard-grid .store-dashboard-picker-icon {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  background: linear-gradient(145deg, #6aa4f1, #347fe2);
}

body .overview-dashboard-grid .store-realtime-sync-state {
  align-items: flex-end;
  gap: 3px;
}

body .overview-dashboard-grid .store-realtime-sync-state > span:last-child {
  font-size: 8px;
}

body .overview-dashboard-grid #refreshStoreRealtimeBtn {
  min-width: 0;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 11px;
}

body .overview-dashboard-grid .store-realtime-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(76px, 1fr));
  gap: 0;
  padding: 15px 16px 12px;
  border-bottom: 0;
}

body .overview-dashboard-grid .store-realtime-kpis > div {
  min-height: 54px;
  justify-content: center;
  border-right: 1px solid rgba(31, 35, 41, 0.075);
  padding: 4px 7px;
  text-align: center;
}

body .overview-dashboard-grid .store-realtime-kpis > div:last-child {
  border-right: 0;
}

body .overview-dashboard-grid .store-realtime-kpis strong {
  color: #25282d;
  font-size: clamp(16px, 1.35vw, 21px);
  font-weight: 720;
  letter-spacing: -0.45px;
}

body .overview-dashboard-grid .store-realtime-kpis span {
  margin-top: 4px;
  color: #8a8f96;
  font-size: 9px;
}

body .overview-dashboard-grid .store-trend-grid {
  display: grid;
  grid-template-columns: 1fr;
  flex: 1;
  gap: 0;
  padding: 0 16px 16px;
}

body .overview-dashboard-grid .store-trend-block {
  min-height: 122px;
  border: 1px solid rgba(31, 35, 41, 0.07);
  border-radius: 15px;
  padding: 12px 14px 8px;
  background: linear-gradient(180deg, rgba(251, 252, 253, 0.94), rgba(255, 255, 255, 0.78));
}

body .overview-dashboard-grid .store-trend-block:nth-child(2) {
  display: none;
}

body .overview-dashboard-grid .store-trend-block header span,
body .overview-dashboard-grid .store-trend-block header small {
  color: #8a8f96;
  font-size: 9px;
}

body .overview-dashboard-grid .store-trend-block header strong {
  margin-top: 2px;
  color: #262a2f;
  font-size: 15px;
}

body .overview-dashboard-grid .store-trend-block svg {
  height: 70px;
}

body .overview-home-card {
  min-height: 318px;
  padding: 20px;
}

body .overview-home-card-header {
  display: flex;
  min-height: 42px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body .overview-home-card-header > button {
  border: 0;
  padding: 3px 0;
  color: #6680a4;
  background: transparent;
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
}

body .overview-home-card-header > button i {
  margin-left: 4px;
  font-style: normal;
  transition: transform 180ms ease;
}

body .overview-home-card-header > button:hover i {
  display: inline-block;
  transform: translateX(3px);
}

body .overview-task-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

body .overview-task-list > button {
  display: grid;
  min-width: 0;
  min-height: 64px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 0;
  border-radius: 14px;
  padding: 8px 9px;
  color: #2e3237;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

body .overview-task-list > button:hover {
  background: #f6f7f9;
  transform: translateX(2px);
}

body .overview-task-list .task-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  font-size: 13px;
  font-style: normal;
  font-weight: 780;
}

body .overview-task-list .task-listing { color: #587aa2; background: #edf3fb; }
body .overview-task-list .task-optimize { color: #a77a20; background: #fbf4df; }
body .overview-task-list .task-stock { color: #b66868; background: #fbebeb; }

body .overview-task-list span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

body .overview-task-list strong {
  overflow: hidden;
  color: #34383d;
  font-size: 11px;
  font-weight: 710;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .overview-task-list small {
  overflow: hidden;
  color: #92979e;
  font-size: 8.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .overview-task-list b {
  display: grid;
  min-width: 28px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  padding: 0 8px;
  color: #9b7529;
  background: #fbf4e2;
  font-size: 10px;
}

body .overview-home-shortcuts {
  padding-right: 18px;
  padding-left: 18px;
}

body .overview-home-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

body .overview-home-shortcut-grid > button,
body .overview-home-shortcut-grid > a {
  display: flex;
  min-width: 0;
  min-height: 92px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(31, 35, 41, 0.08);
  border-radius: 15px;
  padding: 10px 6px;
  color: #3b4046;
  background: rgba(250, 251, 252, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 190ms ease, background 190ms ease, box-shadow 190ms ease, transform 190ms ease;
}

body .overview-home-shortcut-grid > button:hover,
body .overview-home-shortcut-grid > a:hover {
  border-color: rgba(128, 147, 174, 0.23);
  background: #fff;
  box-shadow: 0 13px 28px rgba(48, 57, 70, 0.08), inset 0 1px 0 #fff;
  transform: translateY(-2px);
}

body .overview-home-shortcut-grid i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  color: #303841;
  background: linear-gradient(145deg, #fff, #edf1f6);
  box-shadow: 0 6px 16px rgba(52, 63, 78, 0.08), inset 0 1px 0 #fff;
  font-size: 15px;
  font-style: normal;
  font-weight: 720;
}

body .overview-home-shortcut-grid span {
  overflow: hidden;
  width: 100%;
  font-size: 10px;
  font-weight: 660;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .overview-platform-linkbar {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 86px;
  grid-template-columns: minmax(190px, 0.72fr) minmax(0, 3.8fr);
  gap: 16px;
  align-items: center;
  overflow: hidden;
  margin: 18px 0;
  border: 1px solid rgba(31, 35, 41, 0.085);
  border-radius: 20px;
  padding: 12px 14px;
  background:
    radial-gradient(circle at 8% 18%, rgba(239, 190, 67, 0.12), transparent 27%),
    linear-gradient(112deg, rgba(255, 253, 247, 0.96), rgba(249, 251, 254, 0.88));
  box-shadow: 0 18px 52px rgba(34, 40, 48, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(18px) saturate(125%);
}

body .overview-platform-linkbar::after {
  position: absolute;
  top: -48px;
  right: 9%;
  width: 190px;
  height: 110px;
  border: 1px solid rgba(205, 155, 35, 0.09);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: rotate(-10deg);
}

body .overview-platform-linkbar-heading {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
  padding: 0 6px;
}

body .overview-platform-linkbar-mark {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid rgba(190, 139, 28, 0.22);
  border-radius: 13px;
  color: #332a18;
  background: linear-gradient(145deg, #f8d875, #dcae32);
  box-shadow: 0 10px 22px rgba(183, 132, 23, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  font-size: 18px;
  font-weight: 760;
}

body .overview-platform-linkbar-heading > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

body .overview-platform-linkbar-heading small {
  color: #9a7322;
  font-size: 8px;
  font-weight: 820;
  letter-spacing: 0.95px;
}

body .overview-platform-linkbar-heading strong {
  margin-top: 2px;
  overflow: hidden;
  color: #25292e;
  font-size: 14px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .overview-platform-linkbar-heading p {
  margin: 1px 0 0;
  overflow: hidden;
  color: #92979e;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .overview-platform-links {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

body .overview-platform-links > a {
  display: grid;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: 34px minmax(0, 1fr) 14px;
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(40, 47, 57, 0.08);
  border-radius: 14px;
  padding: 8px 9px;
  color: #30353b;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98);
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

body .overview-platform-links > a:hover {
  border-color: rgba(193, 143, 31, 0.32);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 22px rgba(47, 55, 66, 0.09), inset 0 1px 0 #fff;
  transform: translateY(-2px);
}

body .overview-platform-links > a:focus-visible {
  outline: 2px solid rgba(193, 143, 31, 0.55);
  outline-offset: 2px;
}

body .overview-platform-link-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #3c3425;
  background: linear-gradient(145deg, #fff8df, #f1d681);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 790;
}

body .overview-platform-link-icon.icon-ozon {
  color: #315da5;
  background: linear-gradient(145deg, #f3f7ff, #dce8fb);
}

body .overview-platform-link-icon.icon-seller {
  color: #795b17;
  background: linear-gradient(145deg, #fff9e8, #f0d88d);
}

body .overview-platform-link-icon.icon-1688 {
  color: #bf5c17;
  background: linear-gradient(145deg, #fff5ea, #f6d2ac);
  font-size: 8px;
}

body .overview-platform-link-icon.icon-help {
  color: #3c7280;
  background: linear-gradient(145deg, #eefafb, #d8eef0);
}

body .overview-platform-link-icon.icon-translate {
  color: #6c5f91;
  background: linear-gradient(145deg, #f6f2ff, #e5dcf7);
}

body .overview-platform-links > a > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

body .overview-platform-links b,
body .overview-platform-links small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .overview-platform-links b {
  font-size: 10.5px;
  font-weight: 710;
}

body .overview-platform-links small {
  color: #969ba2;
  font-size: 8px;
}

body .overview-platform-links i {
  color: #b5892d;
  font-size: 12px;
  font-style: normal;
  transition: transform 180ms ease;
}

body .overview-platform-links > a:hover i {
  transform: translate(2px, -2px);
}

body .overview-portal {
  display: block;
}

body .overview-portal > .overview-welcome-panel,
body .overview-portal > .overview-playbook-grid,
body .overview-portal > .overview-resource-grid {
  display: none;
}

body .overview-portal .overview-learning-grid {
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(620px, 1.55fr);
  gap: 16px;
}

body .overview-portal .overview-learning-panel {
  min-height: 264px;
  border: 1px solid rgba(31, 35, 41, 0.085);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 18px 52px rgba(34, 40, 48, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

body .overview-portal .overview-learning-panel > header {
  min-height: 58px;
  padding: 16px 20px;
  border-bottom-color: rgba(31, 35, 41, 0.07);
}

body .overview-portal .overview-video-player {
  border-color: rgba(119, 140, 169, 0.12);
  border-radius: 14px;
  background: #11151c;
}

@media (max-width: 1450px) {
  body .overview-dashboard-grid {
    grid-template-columns: minmax(560px, 1.35fr) minmax(250px, 0.65fr);
  }

  body .overview-platform-linkbar {
    grid-template-columns: minmax(170px, 0.58fr) minmax(0, 3.8fr);
  }

  body .overview-platform-links > a {
    grid-template-columns: 32px minmax(0, 1fr) 10px;
    gap: 7px;
    padding-right: 7px;
    padding-left: 7px;
  }

  body .overview-home-shortcuts {
    grid-column: 1 / -1;
    min-height: auto;
  }

  body .overview-home-shortcut-grid {
    grid-template-columns: repeat(8, minmax(82px, 1fr));
  }

  body .overview-home-shortcut-grid > button,
  body .overview-home-shortcut-grid > a {
    min-height: 82px;
  }
}

@media (max-width: 1080px) {
  body .overview-dashboard-grid,
  body .overview-portal .overview-learning-grid {
    grid-template-columns: 1fr;
  }

  body .overview-platform-linkbar {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body .overview-home-shortcuts { grid-column: auto; }
  body .overview-home-shortcut-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  body .overview-dashboard-grid .store-realtime-header {
    align-items: stretch;
    flex-direction: column;
  }

  body .overview-dashboard-grid .store-realtime-actions {
    flex-wrap: wrap;
  }

  body .overview-dashboard-grid .store-realtime-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body .overview-dashboard-grid .store-realtime-kpis > div:nth-child(3) {
    border-right: 0;
  }

  body .overview-dashboard-grid .store-realtime-kpis > div:nth-child(-n + 3) {
    border-bottom: 1px solid rgba(31, 35, 41, 0.07);
  }

  body .overview-platform-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .overview-home-shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .overview-home-shortcut-grid > button,
  body .overview-home-shortcut-grid > a { min-height: 78px; }
}

/* High-fidelity orbital hero artwork and live metric overlays. */
body .overview-command-center {
  grid-template-columns: minmax(430px, 0.82fr) minmax(650px, 1.18fr);
  min-height: 372px;
  padding: 44px 42px 44px 50px;
}

body .overview-command-copy h2 {
  max-width: 650px;
  font-size: clamp(39px, 2.75vw, 52px);
  letter-spacing: -2.65px;
  line-height: 1.1;
}

body .overview-command-visual {
  min-height: 314px;
  margin: -18px -22px -18px 0;
  overflow: hidden;
  border-radius: 22px;
}

body .overview-command-orbit-image {
  position: absolute;
  z-index: 1;
  inset: -5% -4% -5% -2%;
  width: 106%;
  height: 110%;
  object-fit: cover;
  object-position: 56% 50%;
  opacity: 0.98;
  filter: saturate(0.94) contrast(0.99);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 94%, transparent 100%);
  animation: precision-hero-art-drift 10s ease-in-out infinite alternate;
  pointer-events: none;
  user-select: none;
}

body .overview-hero-metric {
  position: absolute;
  z-index: 4;
  display: grid;
  width: 118px;
  min-height: 76px;
  align-content: center;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 15px;
  padding: 12px 46px 11px 13px;
  color: #25292e;
  background: rgba(255, 255, 255, 0.79);
  box-shadow: 0 17px 40px rgba(53, 66, 84, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(18px) saturate(125%);
  animation: precision-metric-float 6.8s ease-in-out infinite;
}

body .overview-hero-metric span {
  color: #858a91;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

body .overview-hero-metric strong {
  margin-top: 4px;
  color: #24272c;
  font-size: 23px;
  font-weight: 570;
  letter-spacing: -0.8px;
  line-height: 1;
}

body .overview-hero-metric i {
  position: absolute;
  width: 28px;
  height: 16px;
  right: 12px;
  bottom: 19px;
  border-bottom: 2px solid #d6b15d;
  transform: skewY(-24deg);
  opacity: 0.88;
}

body .overview-hero-metric i::before,
body .overview-hero-metric i::after {
  position: absolute;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  content: "";
}

body .overview-hero-metric i::before {
  width: 14px;
  left: -1px;
  bottom: 2px;
  transform: rotate(25deg);
  transform-origin: left center;
}

body .overview-hero-metric i::after {
  width: 14px;
  right: -1px;
  top: 3px;
  transform: rotate(-28deg);
  transform-origin: right center;
}

body .overview-hero-metric-today {
  left: 0;
  top: 50%;
  animation-delay: -1.7s;
}

body .overview-hero-metric-optimize {
  right: 1%;
  top: 8%;
}

body .overview-hero-metric-onsale {
  right: 0;
  bottom: 8%;
  animation-delay: -3.4s;
}

body .overview-hero-metric-onsale i {
  color: #4eb08a;
  border-bottom-color: #4eb08a;
}

body .overview-hero-metric-today i {
  color: #d6b15d;
}

body .overview-hero-metric-optimize i {
  color: #cfaa54;
}

@keyframes precision-hero-art-drift {
  from { transform: translate3d(-5px, 2px, 0) scale(1.01); }
  to { transform: translate3d(8px, -4px, 0) scale(1.025); }
}

@keyframes precision-metric-float {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(5px); }
}

@media (min-width: 1500px) {
  body .overview-command-copy h2 { white-space: nowrap; }
}

@media (max-width: 1280px) {
  body .overview-command-center {
    grid-template-columns: minmax(360px, 0.8fr) minmax(500px, 1.2fr);
    padding: 40px 34px 40px 40px;
  }

  body .overview-command-copy h2 {
    font-size: clamp(38px, 3.5vw, 46px);
    letter-spacing: -2.3px;
  }

  body .overview-hero-metric { width: 108px; }
}

@media (max-width: 980px) {
  body .overview-command-center {
    grid-template-columns: 1fr;
    min-height: 690px;
  }

  body .overview-command-visual {
    min-height: 330px;
    margin: 0 -12px -8px;
  }
}

@media (max-width: 560px) {
  body .overview-command-center {
    min-height: 700px;
    padding: 32px 22px 22px;
  }

  body .overview-command-copy h2 {
    font-size: clamp(36px, 11vw, 44px);
    letter-spacing: -2px;
  }

  body .overview-command-visual { min-height: 320px; }
  body .overview-command-orbit-image {
    inset: 0 -22% 20px -22%;
    width: 144%;
    height: 82%;
    object-position: center;
  }

  body .overview-hero-metric {
    width: 102px;
    min-height: 68px;
    padding: 10px 40px 9px 11px;
  }

  body .overview-hero-metric strong { font-size: 20px; }
  body .overview-hero-metric-today { left: 0; top: 10%; }
  body .overview-hero-metric-optimize { right: 0; top: 4%; }
  body .overview-hero-metric-onsale { right: 4%; bottom: 6%; }
}

@media (prefers-reduced-motion: reduce) {
  body .overview-command-orbit-image,
  body .overview-hero-metric {
    animation: none !important;
  }
}

/* Moonlight mist sidebar: light silver-blue navigation paired with the airy workspace. */
body .sidebar {
  --sidebar-ink: #34404d;
  --sidebar-muted: #7c8794;
  --sidebar-icon: #657b95;
  --sidebar-gold: #c9a24f;
  --sidebar-line: #d3dae4;
  border-right-color: rgba(211, 218, 228, 0.96);
  color: var(--sidebar-ink);
  background:
    radial-gradient(circle at 18% 3%, rgba(255, 255, 255, 0.98), transparent 25%),
    radial-gradient(circle at 92% 34%, rgba(210, 220, 238, 0.46), transparent 38%),
    linear-gradient(180deg, #eef2f7 0%, #e8edf4 48%, #e2e8f0 100%);
  box-shadow:
    12px 0 34px rgba(75, 91, 113, 0.1),
    inset -1px 0 rgba(255, 255, 255, 0.72);
  scrollbar-color: rgba(101, 123, 149, 0.36) transparent;
  color-scheme: light;
}

.sidebar .brand {
  min-height: calc(clamp(36px, var(--brand-sidebar-logo-size, 56px), 88px) + 18px);
  align-items: center;
  border-bottom-color: rgba(190, 200, 214, 0.72);
}

.sidebar .brand-mark {
  width: clamp(36px, var(--brand-sidebar-logo-size, 56px), 88px);
  height: clamp(36px, var(--brand-sidebar-logo-size, 56px), 88px);
  flex: 0 0 clamp(36px, var(--brand-sidebar-logo-size, 56px), 88px);
  overflow: hidden;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow:
    0 10px 24px rgba(78, 94, 117, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.sidebar .brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 11px;
  filter: drop-shadow(0 4px 7px rgba(152, 105, 23, 0.16));
}

.sidebar .brand > div:last-child strong {
  color: #2f3b48;
  text-shadow: 0 1px rgba(255, 255, 255, 0.82);
}

.sidebar .brand > div:last-child span {
  color: var(--sidebar-muted);
}

.sidebar .nav-section-label {
  color: #8995a4;
  text-shadow: 0 1px rgba(255, 255, 255, 0.68);
}

.sidebar .nav-item,
.sidebar .nav-download-link,
.sidebar .operations-nav-toggle {
  border: 1px solid transparent;
  color: #526273;
}

.sidebar .nav-item::before,
.sidebar .nav-download-link::before {
  color: var(--sidebar-icon);
  opacity: 0.9;
}

.sidebar .nav-item:hover,
.sidebar .nav-download-link:hover,
.sidebar .operations-nav-toggle:hover {
  border-color: rgba(255, 255, 255, 0.76);
  color: #2f3b48;
  background: rgba(255, 255, 255, 0.54);
  box-shadow:
    0 8px 18px rgba(78, 94, 117, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.sidebar .nav-item.active {
  border-color: rgba(255, 255, 255, 0.96);
  color: #34404d;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.96), rgba(250, 252, 255, 0.8));
  box-shadow:
    inset 3px 0 #c9a24f,
    0 10px 24px rgba(78, 94, 117, 0.13),
    inset 0 1px 0 #fff;
  backdrop-filter: blur(14px);
}

.sidebar .nav-item.active::before {
  color: #b88924;
}

.sidebar .data-market-nav-toggle b,
.sidebar .handbook-nav-toggle b,
.sidebar .listing-nav-toggle b,
.sidebar .erp-order-nav-toggle b,
.sidebar .operations-nav-toggle b {
  color: #8290a0;
}

.sidebar .data-market-nav-toggle:hover b,
.sidebar .handbook-nav-toggle:hover b,
.sidebar .listing-nav-toggle:hover b,
.sidebar .erp-order-nav-toggle:hover b,
.sidebar .operations-nav-toggle:hover b {
  color: #526273;
}

body .sidebar .listing-subnav,
body .sidebar .erp-order-subnav,
body .sidebar .data-market-subnav,
body .sidebar .handbook-subnav,
body .sidebar .operations-nav-grid {
  border-left-color: rgba(155, 169, 188, 0.42);
}

body .sidebar .data-market-subnav-item,
body .sidebar .handbook-subnav-item,
body .sidebar .listing-subnav-item,
body .sidebar .erp-order-subnav-item,
body .sidebar .operations-nav-item {
  color: #69798a;
}

body .sidebar .listing-subnav-item::before,
body .sidebar .erp-order-subnav-item::before,
body .sidebar .operations-nav-item::before {
  background: #aeb9c7;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.42);
}

body .sidebar .data-market-subnav-item:hover,
body .sidebar .handbook-subnav-item:hover,
body .sidebar .listing-subnav-item:hover,
body .sidebar .erp-order-subnav-item:hover,
body .sidebar .operations-nav-item:hover {
  color: #34404d;
  background: rgba(255, 255, 255, 0.5);
}

body .sidebar .data-market-subnav-item.active,
body .sidebar .handbook-subnav-item.active,
body .sidebar .listing-subnav-item.active,
body .sidebar .erp-order-subnav-item.active,
body .sidebar .operations-nav-item.active {
  color: #856719;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.82), rgba(235, 224, 194, 0.42));
  box-shadow: inset 2px 0 #c9a24f, 0 5px 14px rgba(78, 94, 117, 0.07);
}

body .sidebar .listing-subnav-item.active::before,
body .sidebar .erp-order-subnav-item.active::before,
body .sidebar .operations-nav-item.active::before {
  background: #c29a3e;
  box-shadow: 0 0 0 4px rgba(201, 162, 79, 0.15);
}

.sidebar .operations-store-icon {
  color: #657b95;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 0 0 1px rgba(177, 188, 202, 0.38);
}

.sidebar .admin-nav-primary {
  border-color: rgba(201, 162, 79, 0.35);
  color: #4c5663;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.74), rgba(235, 225, 198, 0.5));
  box-shadow: inset 2px 0 #c9a24f, 0 8px 20px rgba(78, 94, 117, 0.08);
}

.sidebar .admin-nav-primary:hover {
  border-color: rgba(201, 162, 79, 0.54);
  color: #2f3b48;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.94), rgba(238, 226, 194, 0.62));
}

.sidebar .admin-nav-primary::after {
  color: #4a3a12;
  background: linear-gradient(135deg, #f3df9d, #c9a24f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body .sidebar-token-card,
body .sidebar .store-box,
body .sidebar .account-box {
  border-color: rgba(255, 255, 255, 0.88);
  color: #34404d;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(241, 245, 250, 0.58));
  box-shadow:
    0 10px 24px rgba(78, 94, 117, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
}

.sidebar-token-card span,
.sidebar .store-box > span,
.sidebar .account-box > span {
  color: #8491a0;
}

.sidebar-token-card strong {
  color: #9a7623;
}

body .sidebar-token-card strong b,
body .sidebar .store-box strong,
body .sidebar .account-box strong {
  color: #34404d;
}

body .sidebar .store-box small {
  color: #55728d;
}

.sidebar .store-connect-button,
.sidebar .store-disconnect-button,
.sidebar #openAuthBtn.account-link-button,
.sidebar #logoutBtn.account-link-button {
  border: 1px solid rgba(173, 185, 201, 0.78);
  color: #526273;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: 0 6px 14px rgba(78, 94, 117, 0.08), inset 0 1px rgba(255, 255, 255, 0.86);
}

.sidebar .store-disconnect-button > span,
.sidebar #logoutBtn.account-link-button > span {
  color: #9a7623;
  background: rgba(201, 162, 79, 0.14);
}

.sidebar .store-connect-button:hover:not(:disabled),
.sidebar .store-disconnect-button:hover,
.sidebar #openAuthBtn.account-link-button:hover,
.sidebar #logoutBtn.account-link-button:hover {
  border-color: rgba(201, 162, 79, 0.68);
  color: #4a3a12;
  background: linear-gradient(180deg, #fff8df, #ead597);
  box-shadow: 0 10px 20px rgba(123, 91, 23, 0.16), inset 0 1px #fff;
}

.sidebar .store-disconnect-button:hover > span,
.sidebar #logoutBtn.account-link-button:hover > span {
  color: #fff8df;
  background: #526273;
}

body .sidebar-token-card:hover,
body .sidebar .store-box:hover,
body .sidebar .account-box:hover {
  border-color: rgba(255, 255, 255, 0.98);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(238, 243, 249, 0.74));
  box-shadow: 0 13px 28px rgba(78, 94, 117, 0.13), inset 0 1px #fff;
}

.sidebar .nav-item:focus-visible,
.sidebar .nav-download-link:focus-visible,
.sidebar .operations-nav-toggle:focus-visible,
.sidebar .data-market-subnav-item:focus-visible,
.sidebar .handbook-subnav-item:focus-visible,
.sidebar .listing-subnav-item:focus-visible,
.sidebar .erp-order-subnav-item:focus-visible,
.sidebar .operations-nav-item:focus-visible {
  outline: 2px solid rgba(101, 123, 149, 0.5);
  outline-offset: 2px;
}

/* Glacier mist workspace: extend the approved orbital-hero palette across product surfaces. */
:root {
  --glacier-canvas: #edf1f7;
  --glacier-surface: rgba(247, 249, 253, 0.9);
  --glacier-surface-strong: rgba(252, 253, 255, 0.94);
  --glacier-surface-soft: rgba(231, 237, 247, 0.78);
  --glacier-line: rgba(158, 177, 204, 0.31);
  --glacier-shadow: 0 18px 48px rgba(70, 87, 111, 0.09);
}

body {
  background:
    radial-gradient(circle at 75% -12%, rgba(201, 214, 239, 0.48), transparent 33%),
    radial-gradient(circle at 12% 16%, rgba(255, 255, 255, 0.9), transparent 28%),
    linear-gradient(180deg, #f3f6fa 0%, #e9eef5 52%, #e5ebf3 100%);
}

body .workspace > .workspace-taskbar,
body .topbar {
  border-color: rgba(255, 255, 255, 0.82);
  background:
    linear-gradient(132deg, rgba(255, 255, 255, 0.88), rgba(236, 241, 249, 0.8));
  box-shadow: 0 12px 34px rgba(69, 85, 108, 0.065), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

/* The homepage hero is one continuous silver-blue field; the artwork no longer sits in a white split panel. */
body .overview-command-center {
  border-color: rgba(255, 255, 255, 0.86);
  background:
    radial-gradient(circle at 78% 18%, rgba(205, 216, 240, 0.58), transparent 34%),
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.68), transparent 35%),
    radial-gradient(circle at 88% 88%, rgba(235, 220, 190, 0.24), transparent 27%),
    linear-gradient(112deg, #f0f3f9 0%, #e9edf6 48%, #e3e8f3 100%);
  box-shadow: var(--glacier-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body .overview-command-center::before {
  z-index: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.66), rgba(190, 205, 235, 0.12) 50%, transparent 72%);
}

body .overview-command-center::after {
  z-index: 0;
  background: radial-gradient(ellipse, rgba(196, 207, 231, 0.26), transparent 70%);
}

body .overview-command-copy,
body .overview-command-visual {
  position: relative;
  z-index: 2;
}

body .overview-command-visual {
  background: transparent;
  box-shadow: none;
}

/* Shared primary panels use translucent glacier layers instead of flat white blocks. */
body .selection-board-primary,
body .panel.handbook-panel,
body .erp-order-workspace,
body .membership-activation-panel,
body .membership-orders-panel,
body .membership-subaccount-panel,
body .membership-plan-section {
  border-color: var(--glacier-line);
  background:
    radial-gradient(circle at 92% 2%, rgba(200, 213, 237, 0.35), transparent 28%),
    linear-gradient(145deg, var(--glacier-surface-strong), var(--glacier-surface-soft));
  box-shadow: var(--glacier-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

/* Selection handbook: replace the remaining black-gold and cream surfaces. */
body .panel.handbook-panel {
  background:
    radial-gradient(circle at 88% 4%, rgba(203, 215, 239, 0.52), transparent 30%),
    linear-gradient(145deg, #f4f7fb 0%, #e8edf6 56%, #e4eaf3 100%);
}

body .handbook-hero {
  color: #25303d;
  background:
    radial-gradient(circle at 87% 18%, rgba(255, 255, 255, 0.78) 0 3px, transparent 4px),
    radial-gradient(circle at 81% 72%, rgba(188, 203, 232, 0.54) 0 2px, transparent 3px),
    radial-gradient(circle at 77% 20%, rgba(203, 216, 242, 0.66), transparent 36%),
    linear-gradient(118deg, #eef2f8 0%, #e3e9f4 58%, #dce4f1 100%);
  box-shadow: inset 0 -1px 0 rgba(143, 163, 192, 0.22);
}

body .handbook-hero .eyebrow { color: #8b6c29; }
body .handbook-title-row h2 { color: #202833; }
body .handbook-title-row + p { color: #657181; }

body .handbook-topic-badge {
  border-color: rgba(178, 142, 65, 0.34);
  color: #765a1e;
  background: rgba(255, 249, 230, 0.66);
}

body .handbook-version {
  border-color: rgba(255, 255, 255, 0.88);
  color: #394655;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 10px 28px rgba(69, 86, 111, 0.08), inset 0 1px 0 #fff;
  backdrop-filter: blur(14px);
}

body .handbook-version span { color: #7b8797; }

body .handbook-toolbar input,
body .handbook-toolbar select,
body .handbook-summary > div,
body .handbook-month-card,
body .handbook-guide-card {
  border-color: rgba(159, 177, 202, 0.34);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 28px rgba(67, 84, 108, 0.065), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
}

body .handbook-month-card > header {
  color: #263341;
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(128deg, #e8edf6 0%, #dbe4f2 66%, #e8dfcb 100%);
  box-shadow: inset 0 -1px 0 rgba(151, 170, 198, 0.25);
}

body .handbook-month-number {
  border-color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 8px 20px rgba(65, 83, 108, 0.09), inset 0 1px #fff;
}

body .handbook-month-card header p { color: #687587; }
body .handbook-weather b,
body .handbook-weather span { color: #5c6877; background: rgba(255, 255, 255, 0.6); }
body .handbook-event-list li { background: rgba(232, 237, 246, 0.72); }
body .handbook-event-list time { color: #fff9e6; background: #687991; }
body .handbook-focus-item { border-color: rgba(159, 177, 202, 0.3); background: rgba(252, 253, 255, 0.72); }

/* Selection library: tint the command surface and retain white only as a readable card layer. */
body .selection-board-primary {
  background:
    radial-gradient(circle at 90% 2%, rgba(203, 215, 239, 0.42), transparent 28%),
    linear-gradient(148deg, #f4f7fb 0%, #e8edf6 52%, #e5ebf3 100%);
}

body .selection-board-header,
body .selection-bulk-toolbar {
  border-color: rgba(158, 176, 201, 0.28);
  background: rgba(249, 251, 254, 0.68);
  backdrop-filter: blur(16px) saturate(120%);
}

body .selection-auto-panel {
  border-color: rgba(132, 175, 191, 0.3);
  background:
    radial-gradient(circle at 88% 0%, rgba(201, 224, 232, 0.42), transparent 32%),
    linear-gradient(135deg, rgba(242, 248, 250, 0.88), rgba(226, 235, 245, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body .resale-auto-metrics > div {
  border-color: rgba(157, 178, 204, 0.32);
  background: rgba(255, 255, 255, 0.64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body .selection-status-tabs,
body .selection-channel-filters { background: transparent; }

body .selection-status-tabs button,
body .selection-channel-filters button {
  border-color: rgba(158, 176, 201, 0.32);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 6px 18px rgba(64, 82, 107, 0.045), inset 0 1px #fff;
}

body .selection-lib-card {
  border-color: rgba(151, 171, 200, 0.34);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.83), rgba(241, 245, 251, 0.74));
  box-shadow: 0 12px 30px rgba(68, 84, 108, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

body .selection-lib-media-empty,
body .selection-lib-metrics div,
body .selection-lib-profit {
  border-color: rgba(166, 184, 208, 0.26);
  background: rgba(231, 237, 246, 0.72);
}

/* ERP orders: remove the remaining flat-white canvas while preserving table contrast. */
body .erp-order-workspace {
  background:
    radial-gradient(circle at 92% 0%, rgba(202, 216, 240, 0.42), transparent 29%),
    linear-gradient(145deg, #f5f7fb 0%, #e9eef6 58%, #e5ebf3 100%);
}

body .erp-order-command-bar,
body .erp-order-sync-note,
body .erp-order-status-tabs,
body .erp-order-prepare-bar {
  border-color: rgba(154, 174, 201, 0.29);
  background: rgba(249, 251, 254, 0.66);
  backdrop-filter: blur(16px) saturate(118%);
}

body .erp-order-command-bar > select,
body .erp-order-command-bar > input,
body .erp-order-command-bar .erp-order-date-range,
body .erp-order-command-bar .suite-select-trigger {
  border-color: rgba(151, 172, 201, 0.4);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

body .erp-order-status-tabs button.active {
  border-color: rgba(93, 167, 166, 0.25);
  color: #24706f;
  background: rgba(220, 241, 239, 0.78);
}

body .erp-order-table-wrap { background: rgba(244, 247, 251, 0.42); }

body .erp-order-table th {
  border-color: rgba(157, 177, 202, 0.3);
  color: #607182;
  background: rgba(224, 231, 241, 0.74);
}

body .erp-order-table td {
  border-bottom-color: rgba(164, 182, 205, 0.24);
  background: rgba(255, 255, 255, 0.48);
}

body .erp-order-table tbody tr:hover td { background: rgba(255, 255, 255, 0.78); }

/* Membership surfaces follow the same family without flattening plan identity colours. */
body .membership-hero {
  border-color: rgba(157, 178, 205, 0.32);
  background:
    radial-gradient(circle at 88% 14%, rgba(198, 224, 229, 0.56), transparent 32%),
    radial-gradient(circle at 12% 16%, rgba(255, 255, 255, 0.82), transparent 28%),
    linear-gradient(120deg, #f1f4fa 0%, #e4eaf4 58%, #dcebea 100%);
  box-shadow: var(--glacier-shadow), inset 0 1px #fff;
}

body .membership-plans-dialog-shell {
  border-color: rgba(159, 178, 203, 0.38);
  background:
    radial-gradient(circle at 90% 0%, rgba(202, 215, 239, 0.48), transparent 31%),
    linear-gradient(145deg, #f7f9fc 0%, #e9eef6 100%);
  box-shadow: 0 30px 90px rgba(50, 65, 87, 0.23), inset 0 1px #fff;
}

body .membership-plan-card {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 30px rgba(65, 81, 105, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

@media (max-width: 980px) {
  body .overview-command-center {
    background:
      radial-gradient(circle at 52% 75%, rgba(202, 214, 239, 0.58), transparent 35%),
      linear-gradient(150deg, #f1f4f9 0%, #e4eaf4 100%);
  }
}

@media (prefers-reduced-transparency: reduce) {
  body .selection-board-header,
  body .selection-bulk-toolbar,
  body .erp-order-command-bar,
  body .erp-order-status-tabs,
  body .membership-plan-card {
    background: #f4f7fb;
    backdrop-filter: none;
  }
}

/* Seamless orbital artwork: feather the source image on all four sides into the hero field. */
body .overview-command-visual {
  isolation: isolate;
}

body .overview-command-visual::after {
  position: absolute;
  z-index: 2;
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 72% 104% at 58% 50%, transparent 52%, rgba(231, 236, 246, 0.24) 74%, rgba(229, 234, 244, 0.74) 100%);
  content: "";
  pointer-events: none;
}

body .overview-command-orbit-image {
  inset: -2% -2% -2% 5%;
  width: 97%;
  height: 104%;
  object-fit: contain;
  object-position: 58% 50%;
  -webkit-mask-image: radial-gradient(ellipse 72% 94% at 58% 50%, #000 50%, rgba(0, 0, 0, 0.96) 65%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 94% at 58% 50%, #000 50%, rgba(0, 0, 0, 0.96) 65%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
}

body .overview-hero-metric {
  z-index: 4;
}

@media (max-width: 980px) {
  body .overview-command-visual::after {
    background:
      radial-gradient(ellipse 76% 100% at 56% 50%, transparent 50%, rgba(230, 235, 245, 0.24) 74%, rgba(228, 234, 244, 0.68) 100%);
  }
}

/* Reference-aligned hero composition: render the wide artwork across the hero, not inside a right-hand rectangle. */
body .overview-command-center::after {
  z-index: 1;
  inset: -16% -3% -16% 30%;
  width: auto;
  height: auto;
  border-radius: 0;
  background: url("/assets/hero-orbit-v1.png") 44% center / auto 78% no-repeat;
  box-shadow: none;
  filter: saturate(0.94) contrast(0.99);
  opacity: 0.97;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    transparent 13%,
    rgba(0, 0, 0, 0.03) 17%,
    rgba(0, 0, 0, 0.18) 22%,
    rgba(0, 0, 0, 0.55) 28%,
    rgba(0, 0, 0, 0.9) 34%,
    #000 39%,
    #000 70%,
    rgba(0, 0, 0, 0.82) 76%,
    rgba(0, 0, 0, 0.34) 82%,
    rgba(0, 0, 0, 0.06) 87%,
    transparent 91%,
    transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0%,
    transparent 13%,
    rgba(0, 0, 0, 0.03) 17%,
    rgba(0, 0, 0, 0.18) 22%,
    rgba(0, 0, 0, 0.55) 28%,
    rgba(0, 0, 0, 0.9) 34%,
    #000 39%,
    #000 70%,
    rgba(0, 0, 0, 0.82) 76%,
    rgba(0, 0, 0, 0.34) 82%,
    rgba(0, 0, 0, 0.06) 87%,
    transparent 91%,
    transparent 100%);
}

body .overview-command-center::before {
  z-index: 0;
  inset: -22%;
  width: auto;
  height: auto;
  border-radius: 0;
  background: url("/assets/hero-orbit-v1.png") center / cover no-repeat;
  filter: blur(38px) saturate(0.72);
  opacity: 0.3;
  animation: none;
}

body .overview-command-copy { z-index: 3; }
body .overview-command-copy::after {
  position: absolute;
  z-index: -1;
  top: -70px;
  bottom: -70px;
  left: -70px;
  right: -360px;
  width: auto;
  background: linear-gradient(90deg,
    rgba(240, 243, 249, 0.97) 0%,
    rgba(240, 243, 249, 0.92) 34%,
    rgba(238, 242, 249, 0.58) 62%,
    rgba(236, 240, 248, 0.16) 84%,
    transparent 100%);
  filter: blur(10px);
  content: "";
  pointer-events: none;
}
body .overview-command-visual { z-index: 2; }
body .overview-command-visual::after { display: none; }
body .overview-command-orbit-image { opacity: 0; }

@media (max-width: 980px) {
  body .overview-command-center::after {
    inset: 39% -24% -7% -24%;
    background-position: center;
    background-size: auto 82%;
    -webkit-mask-image: radial-gradient(ellipse 76% 94% at 50% 52%, #000 54%, rgba(0, 0, 0, 0.58) 78%, transparent 100%);
    mask-image: radial-gradient(ellipse 76% 94% at 50% 52%, #000 54%, rgba(0, 0, 0, 0.58) 78%, transparent 100%);
  }
}

/* Preview-matched application layouts: handbook, selection library and membership. */
body .panel.handbook-panel {
  border-radius: 24px;
}

body .handbook-hero {
  position: relative;
  isolation: isolate;
  min-height: 214px;
  padding: 34px 42px;
  overflow: hidden;
}

body .handbook-hero::before {
  position: absolute;
  z-index: -2;
  inset: -35%;
  background: url("/assets/hero-orbit-v1.png") 72% 50% / auto 70% no-repeat;
  filter: blur(34px) saturate(0.72);
  opacity: 0.28;
  content: "";
}

body .handbook-hero::after {
  position: absolute;
  z-index: -1;
  inset: -14% 2% -14% 42%;
  background: url("/assets/hero-orbit-v1.png") center / auto 92% no-repeat;
  filter: saturate(0.78) brightness(1.04);
  opacity: 0.72;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    transparent 14%,
    rgba(0, 0, 0, 0.08) 18%,
    rgba(0, 0, 0, 0.48) 26%,
    rgba(0, 0, 0, 0.9) 34%,
    #000 41%,
    #000 62%,
    rgba(0, 0, 0, 0.86) 69%,
    rgba(0, 0, 0, 0.38) 76%,
    rgba(0, 0, 0, 0.06) 82%,
    transparent 87%,
    transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0%,
    transparent 14%,
    rgba(0, 0, 0, 0.08) 18%,
    rgba(0, 0, 0, 0.48) 26%,
    rgba(0, 0, 0, 0.9) 34%,
    #000 41%,
    #000 62%,
    rgba(0, 0, 0, 0.86) 69%,
    rgba(0, 0, 0, 0.38) 76%,
    rgba(0, 0, 0, 0.06) 82%,
    transparent 87%,
    transparent 100%);
  content: "";
  pointer-events: none;
}

body .handbook-hero > div:first-child {
  position: relative;
  z-index: 2;
  max-width: 58%;
}

body .handbook-hero > div:first-child::after {
  position: absolute;
  z-index: -1;
  top: -70px;
  right: -220px;
  bottom: -70px;
  width: 260px;
  background: linear-gradient(90deg,
    rgba(238, 242, 248, 0.88) 0%,
    rgba(233, 238, 247, 0.56) 44%,
    rgba(229, 235, 246, 0.2) 74%,
    transparent 100%);
  content: "";
  pointer-events: none;
}

body .handbook-title-row h2 {
  font-size: clamp(30px, 3.2vw, 46px);
  letter-spacing: -1.6px;
}

body .handbook-version {
  position: relative;
  z-index: 2;
  min-width: 118px;
  padding: 16px 18px;
  border-radius: 16px;
}

body .handbook-toolbar {
  grid-template-columns: minmax(320px, 1fr) minmax(190px, 230px) auto auto;
  padding: 20px 28px 14px;
}

body .handbook-toolbar input,
body .handbook-toolbar select,
body .handbook-clear-button {
  min-height: 44px;
  border-radius: 12px;
}

body .handbook-summary {
  gap: 14px;
  padding: 0 28px 20px;
}

body .handbook-summary > div {
  min-height: 78px;
  justify-content: center;
  padding: 15px 18px;
  border-radius: 14px;
}

body .handbook-content {
  padding: 0 28px 28px;
}

body .handbook-calendar-grid,
body .handbook-guide-grid {
  gap: 16px;
}

body .handbook-month-card,
body .handbook-guide-card {
  border-radius: 18px;
}

body .handbook-month-card > header {
  min-height: 112px;
  padding: 18px;
  background:
    radial-gradient(circle at 92% 8%, rgba(209, 221, 245, 0.48), transparent 36%),
    linear-gradient(132deg, rgba(248, 250, 254, 0.96), rgba(226, 233, 245, 0.94));
}

body .handbook-month-number {
  color: #49698f;
  background: rgba(255, 255, 255, 0.72);
}

body .handbook-month-card h3,
body .handbook-month-section h4 {
  color: #233044;
}

body .handbook-lead-time {
  border-left-color: #e59a4e;
  background: rgba(255, 247, 235, 0.82);
}

/* Selection library: automation overview and batch controls form the preview's two-column command deck. */
body .selection-board-primary {
  display: grid;
  grid-template-columns: minmax(350px, 0.86fr) minmax(560px, 1.44fr);
  align-items: start;
  gap: 16px;
  padding: 20px;
  border-radius: 24px;
}

body .selection-board-header {
  grid-column: 1 / -1;
  margin: -20px -20px 0;
  padding: 18px 20px;
}

body .selection-auto-panel {
  position: relative;
  isolation: isolate;
  grid-column: 1;
  grid-row: 2 / span 3;
  display: flex;
  align-items: stretch;
  min-height: 254px;
  margin: 0;
  padding: 18px;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 24% 28%, rgba(126, 168, 202, 0.22), transparent 44%),
    radial-gradient(circle at 100% 100%, rgba(216, 188, 113, 0.16), transparent 38%),
    linear-gradient(145deg, rgba(248, 251, 255, 0.96), rgba(225, 234, 245, 0.92));
  border: 1px solid rgba(143, 166, 196, 0.38);
  box-shadow: 0 16px 34px rgba(68, 84, 108, 0.11), inset 0 1px rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px) saturate(118%);
}

body .selection-auto-panel::after {
  display: none;
}

body .selection-auto-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 14px;
  width: 100%;
  min-height: 100%;
}

body .selection-auto-orbit {
  position: relative;
  width: 128px;
  height: 128px;
  margin: 8px auto 0;
}

body .selection-auto-orbit::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.72), rgba(213, 225, 239, 0.2) 46%, transparent 72%);
  box-shadow: inset 0 0 28px rgba(102, 139, 171, 0.1);
}

body .selection-auto-ring,
body .selection-auto-core,
body .selection-auto-beam {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
}

body .selection-auto-ring {
  border: 1px solid rgba(91, 130, 164, 0.34);
  animation: selection-auto-spin 8s linear infinite;
}

body .selection-auto-ring:nth-child(1) { inset: 8px; }
body .selection-auto-ring:nth-child(2) {
  inset: 24px;
  border-style: dashed;
  animation-duration: 12s;
  animation-direction: reverse;
}
body .selection-auto-ring:nth-child(3) {
  inset: 40px;
  border-color: rgba(197, 158, 63, 0.42);
  animation-duration: 5.5s;
}

body .selection-auto-core {
  width: 18px;
  height: 18px;
  background: radial-gradient(circle, #fff8df 0%, #dfbd64 64%, #aa842c 100%);
  box-shadow: 0 0 0 6px rgba(210, 178, 91, 0.14), 0 0 24px rgba(178, 142, 54, 0.3);
  animation: selection-auto-pulse 1.8s ease-in-out infinite;
}

body .selection-auto-beam {
  width: 2px;
  height: 54%;
  top: 0;
  bottom: auto;
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, rgba(88, 126, 161, 0.86), transparent);
  animation: selection-auto-scan 2.8s linear infinite;
  opacity: 0.35;
}

body .selection-auto-stage[data-auto-state="running"] .selection-auto-beam { opacity: 1; }
body .selection-auto-stage[data-auto-state="running"] .selection-auto-core {
  animation-duration: 1s;
}
body .selection-auto-stage[data-auto-state="paused"] .selection-auto-ring,
body .selection-auto-stage[data-auto-state="paused"] .selection-auto-beam,
body .selection-auto-stage[data-auto-state="paused"] .selection-auto-core {
  animation-play-state: paused;
  opacity: 0.55;
}

body .selection-auto-copy {
  text-align: center;
  color: #26374b;
}

body .selection-auto-copy h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

body .selection-auto-copy p {
  margin: 6px 0 0;
  color: #68778b;
  font-size: 12px;
  line-height: 1.45;
}

body .selection-auto-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body .selection-auto-actions .primary-button,
body .selection-auto-actions .secondary-button {
  min-height: 40px;
  border-radius: 999px;
  font-weight: 800;
}

body .selection-auto-actions .primary-button {
  border: 1px solid rgba(190, 148, 48, 0.3);
  color: #44330d;
  background: linear-gradient(180deg, #fff0ba, #e0ba56);
  box-shadow: 0 10px 18px rgba(167, 126, 28, 0.18), inset 0 1px rgba(255, 255, 255, 0.72);
}

body .selection-auto-actions .danger-button {
  border-color: rgba(150, 169, 194, 0.32);
  color: #66758a;
  background: rgba(247, 250, 254, 0.66);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.86);
}

body .selection-auto-actions .primary-button:disabled,
body .selection-auto-actions .danger-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

@keyframes selection-auto-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes selection-auto-scan {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes selection-auto-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.82; }
}

body .selection-auto-panel .resale-auto-title-row h3::after {
  content: none;
}

body .selection-auto-panel .resale-auto-metrics {
  display: none;
}

body .selection-bulk-toolbar {
  grid-column: 2;
  grid-row: 2;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
  min-height: 144px;
  margin: 0;
  padding: 18px;
  overflow: visible;
  border: 1px solid rgba(158, 176, 201, 0.3);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(67, 84, 108, 0.06), inset 0 1px #fff;
}

body .selection-bulk-toolbar::before {
  flex: 0 0 100%;
  margin-bottom: 2px;
  color: #263447;
  content: "批量操作";
  font-size: 16px;
  font-weight: 900;
}

body .selection-bulk-toolbar .selection-toolbar-search-group {
  flex: 1 0 100%;
  width: 100%;
  margin-top: 7px;
  margin-left: 0;
}

body .selection-bulk-toolbar .selection-toolbar-search {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}

body .selection-status-tabs {
  grid-column: 2;
  grid-row: 3;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  padding: 4px 0 0;
}

body .selection-status-tabs button {
  flex: 1 1 92px;
  min-width: 82px;
  min-height: 38px;
}

body .selection-channel-filters {
  grid-column: 2;
  grid-row: 4;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
}

body .selection-library-list {
  grid-column: 1 / -1;
  grid-row: 5;
  gap: 18px;
  margin-top: 0;
}

body .selection-lib-card {
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
}

body .selection-lib-body {
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 16px;
}

body .selection-lib-media img,
body .selection-lib-media-empty,
body .resale-library-media-status {
  width: 176px;
  height: 184px;
  border-radius: 14px;
}

body .selection-lib-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-left: 0;
}

body .selection-lib-metrics div {
  min-height: 61px;
  padding: 9px 10px;
  border-radius: 10px;
}

body .selection-lib-score {
  position: static;
  z-index: 3;
  display: inline-flex;
  width: auto;
  max-width: min(360px, 100%);
  min-height: 27px;
  align-items: center;
  padding: 4px 10px;
  overflow: hidden;
  border: 1px solid rgba(121, 118, 242, 0.38);
  border-radius: 999px;
  color: #514ed2;
  background: rgba(247, 246, 255, 0.9);
  box-shadow: 0 5px 14px rgba(86, 82, 194, 0.08);
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .selection-lib-profit,
body .selection-lib-footer,
body .selection-lib-source {
  border-radius: 12px;
}

/* Membership center: identity, activation and plans follow the same airy orbital composition. */
body .membership-page {
  gap: 16px;
}

body .membership-hero {
  position: relative;
  isolation: isolate;
  min-height: 164px;
  padding: 28px 32px;
  overflow: hidden;
  border-radius: 22px;
}

body .membership-hero::before {
  position: absolute;
  z-index: -1;
  inset: -22% 26% -24% 30%;
  background: url("/assets/hero-orbit-v1.png") center / auto 96% no-repeat;
  filter: saturate(0.72) brightness(1.04);
  opacity: 0.64;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  content: "";
  pointer-events: none;
}

body .membership-identity,
body .membership-current-summary {
  position: relative;
  z-index: 1;
}

body .membership-current-summary {
  border-color: rgba(255, 255, 255, 0.88);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 14px 35px rgba(62, 80, 106, 0.08), inset 0 1px #fff;
  backdrop-filter: blur(16px);
}

body .membership-activation-panel {
  grid-template-columns: minmax(300px, 0.72fr) minmax(520px, 1.28fr);
  padding: 22px 28px;
  border-left-width: 1px;
  border-radius: 20px;
}

body .membership-plan-section {
  padding: 26px;
  border-radius: 22px;
}

body .membership-plan-grid {
  gap: 16px;
}

body .membership-plan-card {
  min-height: 390px;
  padding: 72px 22px 22px;
  border-width: 1px;
  border-top-width: 1px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 15% 8%, color-mix(in srgb, var(--plan-color) 15%, transparent), transparent 24%),
    linear-gradient(155deg, var(--plan-tint, #f7f9fa), rgba(255, 255, 255, 0.92) 55%);
}

body .membership-plan-card::before {
  position: absolute;
  top: 20px;
  left: 22px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: var(--plan-color);
  background: color-mix(in srgb, var(--plan-color) 14%, white);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--plan-color) 18%, transparent), inset 0 1px #fff;
  content: "◆";
  font-size: 15px;
}

body .membership-plan-card[data-plan-id="free"]::before { content: "♛"; }
body .membership-plan-card[data-plan-id="monthly"]::before { content: "▣"; }

.admin-brand-dialog {
  width: min(940px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  color: #23282c;
  background: #fbfcfd;
  box-shadow: 0 28px 80px rgba(31, 39, 49, 0.25);
}

.admin-brand-dialog::backdrop {
  background: rgba(25, 31, 38, 0.58);
  backdrop-filter: blur(5px);
}

.admin-brand-card {
  display: grid;
  gap: 16px;
  max-height: calc(100vh - 32px);
  padding: 24px;
  overflow: auto;
}

.admin-brand-card > header,
.admin-brand-card > footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-brand-card > header span {
  color: #b88724;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.admin-brand-card > header h2 {
  margin: 4px 0;
}

.admin-brand-card > header p {
  margin: 0;
  color: #69737c;
}

.admin-brand-card > header button {
  width: 38px;
  height: 38px;
  border: 1px solid #dce1e5;
  border-radius: 50%;
  background: #fff;
  font-size: 24px;
  cursor: pointer;
}

.admin-brand-enabled {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  font-weight: 700;
}

.admin-brand-section {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #e3e7ea;
  border-radius: 18px;
  background: #fff;
}

.admin-brand-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.admin-brand-section-heading small {
  color: #7b858d;
}

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

.admin-brand-price-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-brand-typography-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.admin-brand-grid label,
.admin-brand-wide {
  display: grid;
  gap: 7px;
  color: #4e5962;
  font-size: 13px;
  font-weight: 700;
}

.admin-brand-wide {
  grid-column: 1 / -1;
}

.admin-brand-grid input,
.admin-brand-grid textarea,
.admin-brand-wide textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #d9dfe3;
  border-radius: 11px;
  background: #fbfcfd;
  color: #23282c;
  font: inherit;
  font-weight: 500;
}

.admin-brand-wide textarea {
  resize: vertical;
}

.admin-brand-image-preview {
  width: 76px;
  height: 76px;
  padding: 7px;
  border: 1px solid #e0e4e7;
  border-radius: 14px;
  object-fit: contain;
  background: #f7f8f9;
}

.admin-brand-image-preview[hidden] {
  display: none;
}

.admin-brand-image-preview.qr {
  width: 126px;
  height: 126px;
}

.admin-brand-card > footer {
  position: sticky;
  bottom: -24px;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 0 0;
  background: linear-gradient(to bottom, rgba(251, 252, 253, 0), #fbfcfd 24%);
}

.customer-service-partner {
  display: block;
  margin: 10px 0 0;
  color: #7f5a0d;
  text-align: center;
  letter-spacing: 0.04em;
}

@media (max-width: 760px) {
  .admin-brand-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 18px;
  }

  .admin-brand-card {
    max-height: calc(100vh - 16px);
    padding: 16px;
  }

  .admin-brand-grid,
  .admin-brand-price-grid,
  .admin-brand-typography-grid {
    grid-template-columns: 1fr;
  }

  .admin-brand-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}
body .membership-plan-card[data-plan-id="annual"]::before { content: "✦"; }

body .membership-plan-card.featured::after {
  position: absolute;
  top: 12px;
  right: -38px;
  width: 132px;
  padding: 5px 0;
  color: #fff;
  background: linear-gradient(90deg, #f2c663, #d99517);
  box-shadow: 0 8px 18px rgba(180, 119, 13, 0.2);
  content: "推荐";
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  transform: rotate(45deg);
}

body .membership-plan-card.featured .membership-plan-tag { display: none; }
body .membership-plan-card h3 { font-size: 21px; }
body .membership-plan-card button { min-height: 44px; border-radius: 10px; box-shadow: 0 10px 22px color-mix(in srgb, var(--plan-color) 22%, transparent); }
body .membership-plan-card button:hover:not(:disabled) { filter: brightness(1.04); transform: translateY(-1px); }
body .membership-plan-card button:active:not(:disabled) { box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.14); transform: translateY(1px); }

body .membership-plans-dialog {
  width: min(1380px, calc(100vw - 48px));
}

body .membership-plans-dialog-shell {
  --membership-dialog-inline-pad: 32px;
  --membership-dialog-bottom-pad: 28px;
  position: relative;
  padding: 30px 32px 28px;
  overflow-x: hidden;
  border-radius: 28px;
}

body .membership-plans-dialog-shell::after {
  display: block;
  margin:
    0
    calc(-1 * var(--membership-dialog-inline-pad))
    calc(-1 * var(--membership-dialog-bottom-pad));
  padding: 18px var(--membership-dialog-inline-pad) 24px;
  border-radius: 0 0 27px 27px;
  color: #8591a1;
  background: #f8f6ff;
  content: "◇ 激活码仅可绑定当前账号使用，不可转让。购买或使用问题请联系客服。";
  font-size: 11px;
  text-align: center;
}

body .membership-plans-dialog-grid {
  gap: 18px;
  margin-top: 22px;
}

body .membership-plans-dialog .membership-plan-card {
  min-height: 430px;
}

body .membership-plans-dialog .membership-dialog-ai-image-section {
  margin:
    28px
    calc(-1 * var(--membership-dialog-inline-pad))
    0;
  padding: 28px var(--membership-dialog-inline-pad) 24px;
  border-inline: 0;
  border-bottom: 0;
  border-radius: 0;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.92);
}

body .membership-plans-dialog .membership-dialog-ai-image-section .membership-ai-image-plan-grid {
  gap: 16px;
  margin-top: 20px;
}

body .membership-plans-dialog .membership-ai-image-card {
  min-height: 460px;
}

@media (max-width: 1260px) {
  body .selection-board-primary {
    grid-template-columns: minmax(320px, 0.8fr) minmax(460px, 1.2fr);
  }

  body .selection-status-tabs button { min-width: 72px; }
  body .selection-lib-body { grid-template-columns: 150px minmax(0, 1fr); }
  body .selection-lib-media img,
  body .selection-lib-media-empty,
  body .resale-library-media-status { width: 150px; height: 168px; }
  body .selection-lib-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body .membership-hero::before { inset-inline: 24% 24%; }
}

@media (max-width: 980px) {
  body .handbook-hero {
    min-height: 260px;
    align-items: flex-start;
    padding: 28px;
  }

  body .handbook-hero::after {
    inset: 34% -12% -14% 16%;
    background-size: auto 78%;
  }

  body .handbook-hero > div:first-child { max-width: calc(100% - 96px); }
  body .handbook-title-row h2 { font-size: clamp(28px, 6vw, 38px); }
  body .handbook-toolbar { grid-template-columns: 1fr 190px auto; }
  body .handbook-result-count { grid-column: 1 / -1; justify-self: start; }
  body .handbook-calendar-grid,
  body .handbook-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  body .selection-board-primary {
    grid-template-columns: 1fr;
  }

  body .selection-auto-panel,
  body .selection-bulk-toolbar,
  body .selection-status-tabs,
  body .selection-channel-filters,
  body .selection-library-list {
    grid-column: 1;
    grid-row: auto;
  }

  body .selection-auto-panel .resale-auto-metrics { max-width: 100%; }
  body .selection-library-list { grid-template-columns: 1fr; }
  body .selection-lib-body { grid-template-columns: 176px minmax(0, 1fr); }
  body .selection-lib-media img,
  body .selection-lib-media-empty,
  body .resale-library-media-status { width: 176px; height: 184px; }
  body .selection-lib-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  body .membership-hero { align-items: flex-start; }
  body .membership-hero::before { inset: 18% 3% -28% 28%; opacity: 0.48; }
  body .membership-activation-panel { grid-template-columns: 1fr; }
  body .membership-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  body .panel.handbook-panel,
  body .selection-board-primary,
  body .membership-hero,
  body .membership-plan-section { border-radius: 16px; }

  body .handbook-hero { min-height: 300px; padding: 22px; }
  body .handbook-hero > div:first-child { max-width: 100%; }
  body .handbook-version { position: absolute; right: 18px; bottom: 18px; }
  body .handbook-toolbar,
  body .handbook-summary,
  body .handbook-calendar-grid,
  body .handbook-guide-grid { grid-template-columns: 1fr; }
  body .handbook-content { padding-inline: 16px; }
  body .handbook-summary { padding-inline: 16px; }
  body .handbook-toolbar { padding-inline: 16px; }

  body .selection-board-primary { padding: 14px; }
  body .selection-board-header { margin: -14px -14px 0; }
  body .selection-auto-panel::after { opacity: 0.3; }
  body .selection-auto-panel .resale-auto-metrics { max-width: 100%; }
  body .selection-bulk-toolbar { padding: 14px; }
  body .selection-bulk-toolbar .selection-toolbar-search-group { align-items: stretch; flex-direction: column; }
  body .selection-bulk-toolbar .selection-toolbar-search { min-width: 0; width: 100%; }
  body .selection-status-tabs button { flex: 1 1 42%; }
  body .selection-lib-body { grid-template-columns: 1fr; }
  body .selection-lib-media img,
  body .selection-lib-media-empty,
  body .resale-library-media-status { width: 100%; height: 220px; }
  body .selection-lib-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; }

  body .membership-hero { padding: 22px; }
  body .membership-identity { align-items: flex-start; }
  body .membership-avatar { width: 54px; height: 54px; }
  body .membership-avatar img { width: 46px; height: 46px; }
  body .membership-current-summary,
  body .membership-plan-grid { grid-template-columns: 1fr; }
  body .membership-activation-panel { padding: 18px; }
  body .membership-activation-form > div { grid-template-columns: 1fr; }
  body .membership-plans-dialog { width: calc(100vw - 20px); }
  body .membership-plans-dialog-shell {
    --membership-dialog-inline-pad: 16px;
    --membership-dialog-bottom-pad: 20px;
    padding: 20px 16px;
    border-radius: 20px;
  }
  body .membership-plans-dialog-heading { align-items: flex-start; }
  body .membership-plans-dialog-actions .membership-payment-badge { display: none; }
  body .membership-plans-dialog .membership-dialog-ai-image-section {
    padding: 22px 20px 20px;
    border-radius: 0;
  }
  body .membership-dialog-ai-image-section .membership-section-heading { align-items: flex-start; }
}

/* Glacier login surface: mirror the active workspace shell and orbital hero. */
body.auth-landing-open {
  background: #e8edf5;
}

body.auth-landing-open .auth-gate {
  height: 100vh;
}

.auth-gate {
  color: #20262f;
  background:
    radial-gradient(circle at 82% 12%, rgba(184, 201, 238, 0.48), transparent 29%),
    radial-gradient(circle at 18% 88%, rgba(220, 228, 242, 0.72), transparent 34%),
    linear-gradient(145deg, #f4f7fb 0%, #e9eef6 48%, #e2e8f2 100%);
}

.auth-landing {
  position: relative;
  isolation: isolate;
  background: transparent;
}

.auth-landing::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.18;
  content: "";
  pointer-events: none;
}

.auth-landing-header {
  min-height: 78px;
  padding: 12px max(32px, calc((100vw - 1500px) / 2));
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(247, 250, 255, 0.82);
  box-shadow: 0 14px 34px rgba(65, 78, 102, 0.08), inset 0 -1px rgba(151, 167, 194, 0.14);
  backdrop-filter: blur(22px) saturate(125%);
}

.auth-landing-brand strong {
  color: #20242b;
}

.auth-landing-brand small {
  color: #7c8797;
}

.auth-landing-header nav a,
.auth-landing-header-actions > a {
  color: #626d7c;
}

.auth-landing-header nav a::after {
  background: linear-gradient(90deg, #d6ad48, #f0d17f);
}

.auth-landing-header nav a:hover,
.auth-landing-header-actions > a:hover {
  color: #1f242c;
}

.auth-landing-header-actions > a,
.auth-landing-login,
.auth-landing-register {
  min-height: 40px;
  border-radius: 12px;
}

.auth-landing-header-actions > a,
.auth-landing-login {
  border-color: rgba(124, 139, 164, 0.2);
  color: #343b45;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 8px 18px rgba(74, 88, 112, 0.07), inset 0 1px #fff;
}

.auth-landing-register {
  border-color: #d1a638;
  color: #2f240b;
  background: linear-gradient(135deg, #f7dc8b, #d5a630);
  box-shadow: 0 10px 24px rgba(177, 130, 25, 0.22), inset 0 1px rgba(255, 255, 255, 0.7);
}

.auth-landing-hero {
  grid-template-columns: minmax(430px, 0.84fr) minmax(700px, 1.16fr);
  gap: 42px;
  width: min(1500px, calc(100% - 72px));
  min-height: calc(100vh - 78px);
  padding: 36px 0 48px;
}

.auth-landing-hero::before {
  top: 12%;
  left: -12%;
  width: 62%;
  height: 70%;
  background:
    radial-gradient(circle at 22% 34%, rgba(84, 164, 135, 0.2) 0 3px, transparent 4px),
    radial-gradient(circle at 68% 72%, rgba(206, 166, 66, 0.18) 0 2px, transparent 3px);
  background-size: 82px 82px, 112px 112px;
  opacity: 0.38;
}

.auth-landing-hero-copy {
  padding-left: 18px;
}

.auth-landing-kicker {
  border: 1px solid rgba(87, 107, 137, 0.12);
  color: #778292;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
  letter-spacing: 1.45px;
}

.auth-landing-hero-copy h1 {
  max-width: 640px;
  margin-top: 23px;
  color: #171b21;
  font-weight: 760;
  letter-spacing: -0.062em;
  line-height: 1.07;
  white-space: pre-line;
}

.brand-title-line {
  display: block;
}

.brand-title-line.first {
  font-size: clamp(28px, var(--brand-title-first-font-size, 64px), 120px);
}

.brand-title-line.next {
  font-size: clamp(28px, var(--brand-title-next-font-size, 64px), 120px);
}

.brand-title-line + .brand-title-line {
  margin-top: var(--brand-title-line-gap, 10px);
}

[data-brand-logo].brand-logo-image-unavailable {
  display: none !important;
}

.brand-logo-fallback-active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-logo-fallback-active::after {
  color: #8c6510;
  content: attr(data-brand-logo-fallback);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.auth-brand-mark.brand-logo-fallback-active::after {
  font-size: 32px;
}

.auth-landing-hero-copy > p {
  max-width: 570px;
  margin-top: 22px;
  color: #737e8d;
  font-size: clamp(12px, var(--brand-description-font-size, 15px), 28px);
  line-height: 1.85;
}

.auth-landing-hero-actions {
  margin-top: 30px;
}

.auth-landing-hero-actions > button,
.auth-landing-hero-actions > a {
  min-height: 46px;
  border-radius: 13px;
  padding-inline: 22px;
}

.auth-landing-hero-actions > button {
  border-color: #d0a437;
  color: #30240a;
  background: linear-gradient(135deg, #f7dc8a, #d4a52e);
  box-shadow: 0 13px 28px rgba(176, 128, 22, 0.22), inset 0 1px rgba(255, 255, 255, 0.72);
}

.auth-landing-hero-actions > a {
  border-color: rgba(102, 118, 145, 0.18);
  color: #3d4652;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 10px 24px rgba(70, 84, 108, 0.08), inset 0 1px #fff;
  backdrop-filter: blur(14px);
}

.auth-landing-trust-row {
  color: #788493;
}

.auth-landing-trust-row i {
  border: 1px solid rgba(72, 167, 132, 0.18);
  color: #348e6f;
  background: rgba(224, 246, 238, 0.84);
}

.auth-landing-hero-side {
  display: flex;
  min-height: 600px;
  align-items: center;
  justify-content: flex-end;
  isolation: isolate;
}

.auth-workspace-visual {
  position: absolute;
  z-index: 0;
  inset: 12px 0 12px -46px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 30px;
  background:
    radial-gradient(circle at 74% 18%, rgba(183, 204, 245, 0.46), transparent 30%),
    linear-gradient(145deg, rgba(248, 250, 255, 0.86), rgba(224, 231, 243, 0.88));
  box-shadow: 0 28px 72px rgba(57, 72, 98, 0.16), inset 0 1px #fff;
}

.auth-workspace-visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(239, 243, 250, 0.5), transparent 34%, rgba(232, 238, 248, 0.16) 72%, rgba(230, 236, 247, 0.38));
  content: "";
  pointer-events: none;
}

.auth-workspace-orbit {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 50%;
  filter: saturate(0.88) contrast(0.98) brightness(1.02);
  opacity: 0.9;
}

.auth-workspace-status,
.auth-workspace-metric {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(250, 252, 255, 0.72);
  box-shadow: 0 16px 36px rgba(70, 86, 114, 0.13), inset 0 1px #fff;
  backdrop-filter: blur(18px) saturate(120%);
}

.auth-workspace-status {
  top: 22px;
  left: 22px;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 0 12px;
  color: #657182;
  font-size: 10px;
  font-weight: 750;
}

.auth-workspace-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #45aa83;
  box-shadow: 0 0 0 5px rgba(69, 170, 131, 0.11);
}

.auth-workspace-metric {
  display: grid;
  width: 146px;
  gap: 3px;
  border-radius: 16px;
  padding: 13px 15px;
}

.auth-workspace-metric span {
  color: #8792a1;
  font-size: 9px;
}

.auth-workspace-metric strong {
  color: #272d36;
  font-size: 15px;
}

.auth-workspace-metric small {
  color: #788493;
  font-size: 9px;
}

.auth-workspace-metric-ai {
  top: 82px;
  left: 22px;
}

.auth-workspace-metric-store {
  bottom: 28px;
  left: 32px;
}

.auth-card {
  z-index: 3;
  width: min(420px, calc(100% - 48px));
  margin: 0 28px 0 auto;
  padding: 30px 32px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 24px;
  color: #252b34;
  background: rgba(249, 251, 255, 0.86);
  box-shadow: 0 30px 72px rgba(43, 56, 78, 0.2), inset 0 1px #fff;
  backdrop-filter: blur(26px) saturate(130%);
}

.auth-card .auth-brand-mark {
  width: clamp(48px, var(--brand-auth-logo-size, 84px), 160px);
  height: clamp(48px, var(--brand-auth-logo-size, 84px), 160px);
  margin-bottom: 8px;
  overflow: visible;
}

.auth-card .auth-brand-mark img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center;
}

.auth-card .eyebrow {
  color: #9b741f;
  letter-spacing: 1.25px;
}

.auth-card h2 {
  margin: 6px 0 7px;
  color: #20252d;
  font-size: 25px;
  letter-spacing: -0.7px;
}

.auth-card .auth-subtitle {
  color: #788493;
}

.auth-card .auth-tabs {
  border: 1px solid rgba(123, 139, 165, 0.14);
  border-radius: 12px;
  background: rgba(231, 236, 245, 0.84);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9);
}

.auth-card .auth-tabs button {
  color: #6f7a89;
}

.auth-card .auth-tabs button.active {
  color: #2d240f;
  background: linear-gradient(135deg, #f5d77e, #d5a62f);
  box-shadow: 0 7px 17px rgba(163, 117, 20, 0.2), inset 0 1px rgba(255, 255, 255, 0.7);
}

.auth-card .auth-form label {
  color: #667283;
}

.auth-card .auth-form input {
  min-height: 44px;
  border-color: rgba(122, 139, 166, 0.2);
  border-radius: 11px;
  color: #20262f;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 2px rgba(53, 67, 89, 0.035);
}

.auth-card .auth-form input:focus {
  border-color: #d1aa4a;
  box-shadow: 0 0 0 3px rgba(209, 170, 74, 0.13);
}

.auth-password-help {
  color: #8792a0;
}

.auth-password-help button {
  color: #926a15;
}

.auth-card .auth-submit {
  min-height: 44px;
  border-color: #242a32;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #2c333d, #1d2229);
  box-shadow: 0 12px 24px rgba(34, 41, 51, 0.2), inset 0 1px rgba(255, 255, 255, 0.12);
}

.auth-feature-section,
.auth-landing-section,
.auth-landing-showcase,
.auth-extension-release {
  border-color: rgba(160, 174, 198, 0.16);
  background: rgba(245, 248, 252, 0.74);
}

.auth-feature-grid > article,
.auth-listing-capabilities > div,
.auth-listing-window,
.auth-landing-showcase,
.auth-extension-release {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 44px rgba(58, 72, 96, 0.09), inset 0 1px #fff;
}

.auth-landing-section-heading > span,
.auth-showcase-copy > span {
  color: #8d691b;
  background: rgba(250, 238, 204, 0.76);
}

.auth-landing-section-heading h2,
.auth-showcase-copy h2 {
  color: #20252d;
}

.auth-landing-footer {
  color: rgba(228, 234, 244, 0.7);
  background:
    radial-gradient(circle at 72% 0%, rgba(213, 172, 72, 0.13), transparent 32%),
    #20262f;
}

html[data-brand-source="department_domain"] .auth-landing-footer {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 154px;
}

html[data-brand-source="department_domain"] .auth-landing-footer-description {
  display: none;
}

html[data-brand-source="department_domain"] .auth-landing-footer .auth-landing-brand {
  grid-column: 2;
  justify-self: center;
}

html[data-brand-source="department_domain"] .auth-landing-footer .auth-landing-logo {
  width: 78px;
  height: 78px;
  flex-basis: 78px;
}

html[data-brand-source="department_domain"] .auth-landing-footer .auth-landing-brand strong {
  font-size: 21px;
}

html[data-brand-source="department_domain"] .auth-landing-footer .auth-landing-brand small {
  font-size: 10px;
}

html[data-brand-source="department_domain"] .auth-landing-footer > button {
  grid-column: 3;
  justify-self: end;
}

.password-recovery-card {
  border-color: rgba(255, 255, 255, 0.92);
  background: rgba(248, 251, 255, 0.96);
  box-shadow: 0 32px 82px rgba(35, 45, 61, 0.24), inset 0 1px #fff;
}

.password-recovery-card::before {
  background: radial-gradient(circle, rgba(190, 207, 241, 0.48), transparent 68%);
}

@media (max-width: 1240px) {
  .auth-landing-header nav { display: none; }
  .auth-landing-hero {
    grid-template-columns: minmax(380px, 0.78fr) minmax(610px, 1.22fr);
    width: min(1160px, calc(100% - 48px));
  }
  .auth-workspace-metric { display: none; }
}

@media (max-width: 980px) {
  body.auth-landing-open { overflow: auto; }
  body.auth-landing-open .auth-gate { height: auto; min-height: 100vh; }
  .auth-landing-hero {
    grid-template-columns: 1fr;
    gap: 20px;
    width: min(760px, calc(100% - 40px));
    min-height: auto;
    padding: 48px 0 58px;
  }
  .auth-landing-hero-copy {
    max-width: 650px;
    padding-left: 0;
    text-align: center;
  }
  .auth-landing-kicker { margin-inline: auto; }
  .auth-landing-hero-copy h1 { max-width: none; }
  .auth-landing-hero-copy > p { margin-inline: auto; }
  .auth-landing-hero-actions,
  .auth-landing-trust-row { justify-content: center; }
  .auth-landing-hero-side { min-height: 590px; }
  .auth-workspace-visual { inset: 0; }
  .auth-card { margin: 0 auto; }
  .auth-workspace-status { left: 50%; transform: translateX(-50%); }
}

@media (max-width: 680px) {
  .auth-landing-header {
    min-height: 68px;
    padding: 10px 16px;
  }
  .auth-landing-logo { width: 40px; height: 40px; flex-basis: 40px; }
  .auth-landing-brand strong { font-size: 15px; }
  .auth-landing-brand small { display: none; }
  .auth-landing-header-actions { gap: 6px; }
  .auth-landing-header-actions > a { display: none; }
  .auth-landing-header-actions > button { min-height: 36px; padding-inline: 11px; }
  .auth-landing-hero {
    width: calc(100% - 24px);
    padding: 34px 0 40px;
  }
  .auth-landing-hero-copy h1 {
    margin-top: 18px;
    font-size: clamp(38px, 12vw, 50px);
  }
  .brand-title-line.first {
    font-size: min(var(--brand-title-first-font-size, 64px), 12vw);
  }
  .brand-title-line.next {
    font-size: min(var(--brand-title-next-font-size, 64px), 12vw);
  }
  .auth-landing-hero-copy > p {
    margin-top: 17px;
    font-size: min(var(--brand-description-font-size, 15px), 18px);
  }
  .auth-landing-hero-actions { align-items: stretch; flex-direction: column; }
  .auth-landing-hero-actions > button,
  .auth-landing-hero-actions > a { width: 100%; }
  .auth-landing-trust-row { gap: 9px 14px; }
  .auth-landing-hero-side { min-height: 610px; }
  .auth-workspace-visual { border-radius: 24px; }
  .auth-workspace-orbit { object-position: 50% 38%; opacity: 0.74; }
  .auth-workspace-status { top: 16px; }
  .auth-card {
    width: calc(100% - 24px);
    margin-top: 54px;
    padding: 26px 22px;
    border-radius: 20px;
  }
  .auth-card .auth-brand-mark {
    width: min(var(--brand-auth-logo-size, 84px), 96px);
    height: min(var(--brand-auth-logo-size, 84px), 96px);
  }
  .auth-card h2 { font-size: 23px; }
  .auth-landing-section,
  .auth-landing-showcase { padding-inline: 18px; }

  html[data-brand-source="department_domain"] .auth-landing-footer {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-block: 28px;
  }

  html[data-brand-source="department_domain"] .auth-landing-footer .auth-landing-brand,
  html[data-brand-source="department_domain"] .auth-landing-footer > button {
    grid-column: 1;
    justify-self: center;
  }

  html[data-brand-source="department_domain"] .auth-landing-footer .auth-landing-logo {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
  }
}

/* Account recovery and security */
.password-recovery-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  border: 1px solid rgba(139, 154, 178, 0.18);
  border-radius: 14px;
  padding: 4px;
  background: rgba(226, 233, 244, 0.7);
}

.password-recovery-methods button {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  color: #758090;
  background: transparent;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.password-recovery-methods button.active {
  color: #29220f;
  background: linear-gradient(135deg, #f5d979, #d6a62e);
  box-shadow: 0 8px 20px rgba(164, 116, 18, 0.2), inset 0 1px rgba(255, 255, 255, 0.72);
}

.password-recovery-methods button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.password-recovery-email-fields,
.password-recovery-email-fields label {
  display: grid;
  gap: 7px;
}

.password-recovery-email-fields label {
  color: #5e6571;
  font-size: 10.5px;
  font-weight: 800;
}

.password-recovery-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.password-recovery-code-row button {
  min-width: 112px;
  border: 1px solid rgba(175, 132, 36, 0.28);
  border-radius: 12px;
  padding: 0 14px;
  color: #7e5a10;
  background: rgba(252, 244, 220, 0.86);
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.password-recovery-code-row button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.password-recovery-email-fields[hidden],
.password-recovery-methods button[hidden] {
  display: none;
}

.password-recovery-message[data-type="success"] {
  color: #2d8769;
}

.account-security-panel {
  margin-top: 22px;
  border-color: rgba(255, 255, 255, 0.92);
  background:
    radial-gradient(circle at 96% 0%, rgba(197, 213, 244, 0.24), transparent 34%),
    rgba(248, 251, 255, 0.78);
  box-shadow: 0 20px 52px rgba(52, 68, 94, 0.09), inset 0 1px #fff;
}

.account-security-heading h2 {
  margin: 4px 0 5px;
  font-size: 20px;
}

.account-security-heading p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.account-security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.account-security-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  border: 1px solid rgba(134, 151, 177, 0.15);
  border-radius: 18px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.92);
}

.account-security-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.account-security-card-head i {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 12px;
  color: #57420f;
  background: linear-gradient(145deg, #f6dc83, #d6a62f);
  box-shadow: 0 9px 20px rgba(163, 116, 19, 0.17);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.account-security-card-head div {
  display: grid;
  gap: 3px;
}

.account-security-card-head strong { font-size: 14px; }
.account-security-card-head small { color: var(--muted); font-size: 10px; }

.account-security-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.account-security-card label {
  display: grid;
  gap: 6px;
  color: #5e6a78;
  font-size: 10px;
  font-weight: 800;
}

.account-security-card input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(127, 145, 172, 0.2);
  border-radius: 11px;
  padding: 0 12px;
  color: #242b35;
  outline: none;
  background: rgba(255, 255, 255, 0.86);
}

.account-security-card input:focus {
  border-color: #c59a36;
  box-shadow: 0 0 0 3px rgba(197, 154, 54, 0.12);
}

.account-security-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.account-security-card > .primary-button,
.account-security-card > .secondary-button,
.account-security-code-row button {
  min-height: 42px;
  border-radius: 11px;
}

.account-recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border: 1px dashed rgba(99, 118, 146, 0.25);
  border-radius: 14px;
  padding: 12px;
  background: rgba(232, 238, 248, 0.58);
}

.account-recovery-codes[hidden] { display: none; }

.account-recovery-codes code {
  border-radius: 8px;
  padding: 8px;
  color: #26313d;
  background: rgba(255, 255, 255, 0.84);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
}

@media (max-width: 900px) {
  .account-security-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .password-recovery-methods { grid-template-columns: 1fr; }
  .password-recovery-code-row,
  .account-security-code-row { grid-template-columns: 1fr; }
  .password-recovery-code-row button { min-height: 42px; }
  .account-recovery-codes { grid-template-columns: 1fr; }
}

/* Store analytics: an internal operating dashboard backed by Seller API data. */
.store-analytics-workspace {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-color: rgba(208, 219, 230, .92);
  background:
    radial-gradient(circle at 88% 3%, rgba(148, 169, 255, .17), transparent 28%),
    radial-gradient(circle at 18% 2%, rgba(238, 185, 64, .12), transparent 25%),
    linear-gradient(145deg, rgba(250, 252, 255, .96), rgba(241, 246, 252, .94));
}

.store-analytics-workspace::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -180px;
  right: 5%;
  width: 410px;
  height: 410px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.8), rgba(125, 151, 236, .08) 46%, transparent 70%);
  pointer-events: none;
  animation: storeAnalyticsDrift 13s ease-in-out infinite alternate;
}

.store-analytics-workspace > * { position: relative; z-index: 1; }

.store-analytics-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 30px 20px;
  border-bottom: 1px solid rgba(205, 217, 230, .75);
  background: linear-gradient(110deg, rgba(255,255,255,.82), rgba(244,248,254,.46));
}

.store-analytics-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
  color: #728090;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
}

.store-analytics-eyebrow i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #20b99c;
  box-shadow: 0 0 0 5px rgba(32, 185, 156, .12);
}

.store-analytics-hero h2 { margin: 0; color: #17212c; font-size: 28px; letter-spacing: -.04em; }
.store-analytics-hero > div:first-child > p:last-child { margin: 7px 0 0; color: #758394; font-size: 12px; }

.store-analytics-controls { display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.store-analytics-controls [hidden] { display: none !important; }
.store-analytics-controls label { display: grid; gap: 5px; color: #748292; font-size: 10px; }
.store-analytics-controls select {
  min-width: 165px;
  height: 39px;
  padding: 0 32px 0 12px;
  border: 1px solid rgba(195, 207, 220, .9);
  border-radius: 11px;
  color: #263342;
  background: rgba(255,255,255,.82);
  outline: 0;
}
.store-analytics-controls select:focus { border-color: #d5a726; box-shadow: 0 0 0 3px rgba(213, 167, 38, .12); }
.store-analytics-range { display: flex; gap: 3px; padding: 3px; border: 1px solid rgba(195, 207, 220, .82); border-radius: 12px; background: rgba(235, 240, 247, .8); }
.store-analytics-range button { min-width: 52px; height: 31px; border: 0; border-radius: 9px; color: #748191; background: transparent; cursor: pointer; font-size: 11px; font-weight: 750; }
.store-analytics-range button.active { color: #19222c; background: #fff; box-shadow: 0 5px 13px rgba(65, 82, 104, .12); }
.store-analytics-sync { min-height: 39px; border-color: #ddb331; color: #2f2405; background: linear-gradient(135deg, #f7d66b, #e3ae23); box-shadow: 0 9px 20px rgba(190, 137, 18, .2); }
.store-analytics-sync:disabled { cursor: wait; opacity: .65; }

.store-analytics-view-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(560px, calc(100% - 60px));
  margin: 15px 30px 0;
  padding: 4px;
  border: 1px solid rgba(198, 209, 222, .84);
  border-radius: 15px;
  background: rgba(231, 237, 245, .72);
  box-shadow: inset 0 1px 2px rgba(65, 79, 98, .05);
}
.store-analytics-view-switch button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 52px;
  padding: 7px 13px;
  border: 0;
  border-radius: 11px;
  color: #718091;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.store-analytics-view-switch button:hover { color: #263441; background: rgba(255,255,255,.48); }
.store-analytics-view-switch button:focus-visible { outline: 2px solid rgba(210, 161, 31, .55); outline-offset: 2px; }
.store-analytics-view-switch button > i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: #82909f;
  background: rgba(255,255,255,.55);
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .06em;
}
.store-analytics-view-switch button span,
.store-analytics-view-switch button strong,
.store-analytics-view-switch button small { display: block; min-width: 0; }
.store-analytics-view-switch button strong { color: inherit; font-size: 11px; }
.store-analytics-view-switch button small { overflow: hidden; margin-top: 3px; color: #8b97a3; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.store-analytics-view-switch button.active { color: #222d37; background: rgba(255,255,255,.94); box-shadow: 0 8px 18px rgba(48, 65, 86, .11); }
.store-analytics-view-switch button.active > i { color: #6c4d00; background: linear-gradient(145deg, #f8dc80, #e6b633); box-shadow: 0 5px 12px rgba(190, 139, 17, .18); }
[data-store-analytics-panel][hidden] { display: none !important; }

.store-analytics-statusline { display: flex; align-items: center; gap: 10px; padding: 13px 30px 0; color: #7d8996; font-size: 10px; }
.store-analytics-statusline .badge.live { border-color: #bfe7dc; color: #118565; background: #ecfaf6; }
.store-analytics-source { margin-left: auto; }

.store-analytics-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px; padding: 16px 30px; }
.store-analytics-kpis article {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  padding: 18px;
  border: 1px solid rgba(208, 218, 229, .86);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 28px rgba(52, 71, 94, .055);
}
.store-analytics-kpis article::after { content: ""; position: absolute; right: -24px; bottom: -32px; width: 82px; height: 82px; border-radius: 50%; background: rgba(113, 139, 175, .06); }
.store-analytics-kpis article.accent { border-color: rgba(225, 185, 74, .48); background: linear-gradient(145deg, rgba(255,253,245,.96), rgba(251,245,222,.78)); }
.store-analytics-kpis article.money { border-color: #202b36; background: linear-gradient(145deg, #202c38, #111820); box-shadow: 0 15px 30px rgba(17,24,32,.18); }
.store-analytics-kpis span, .store-analytics-kpis small { position: relative; z-index: 1; display: block; color: #7b8896; font-size: 10px; }
.store-analytics-kpis strong { position: relative; z-index: 1; display: block; overflow: hidden; margin: 12px 0 8px; color: #1f2b37; font-size: clamp(17px, 1.45vw, 24px); line-height: 1; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.store-analytics-kpis article.money span, .store-analytics-kpis article.money small { color: rgba(255,255,255,.6); }
.store-analytics-kpis article.money strong { color: #fff; }
.store-analytics-kpis small.positive, .store-analytics-kpis small.positive { color: #15916d; }
.store-analytics-kpis small.negative { color: #c05f4f; }

.store-analytics-main-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, .75fr); gap: 14px; padding: 0 30px 14px; }
.store-analytics-card { border: 1px solid rgba(207, 218, 230, .88); border-radius: 19px; background: rgba(255,255,255,.82); box-shadow: 0 12px 30px rgba(49, 68, 92, .055); }
.store-analytics-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 10px; }
.store-analytics-card > header div > span, .store-analytics-card > header div > strong { display: block; }
.store-analytics-card > header span { color: #7d8996; font-size: 10px; }
.store-analytics-card > header strong { margin-top: 4px; color: #25313d; font-size: 14px; }
.store-analytics-card > header small { color: #8a95a0; font-size: 10px; }

.store-analytics-chart { height: 230px; padding: 5px 15px 0; }
.store-analytics-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.store-analytics-chart .grid-line { stroke: rgba(126, 145, 169, .13); stroke-width: 1; }
.store-analytics-chart .trend-area { fill: url(#storeAnalyticsArea); }
.store-analytics-chart .trend-line { fill: none; stroke: #5678e7; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 6px 7px rgba(86,120,231,.24)); }
.store-analytics-chart .trend-dot { fill: #fff; stroke: #5678e7; stroke-width: 2; vector-effect: non-scaling-stroke; }
.store-analytics-chart-axis { display: flex; justify-content: space-between; padding: 0 21px 16px; color: #94a0ac; font-size: 9px; }

.store-analytics-insights { position: relative; overflow: hidden; background: linear-gradient(150deg, rgba(253,253,255,.94), rgba(241,244,255,.88)); }
.store-analytics-insights::after { content: ""; position: absolute; right: -70px; top: -90px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(121,104,224,.18), transparent 68%); }
.store-analytics-insights header i { z-index: 1; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(112,99,204,.2); border-radius: 11px; color: #6655bf; background: rgba(255,255,255,.78); font-size: 10px; font-style: normal; font-weight: 900; }
#storeAnalyticsInsights { display: grid; gap: 8px; padding: 4px 16px 16px; }
.store-analytics-insight { position: relative; display: grid; gap: 4px; padding: 11px 12px 11px 16px; border: 1px solid rgba(211,216,234,.8); border-radius: 13px; background: rgba(255,255,255,.72); }
.store-analytics-insight::before { content: ""; position: absolute; left: 7px; top: 14px; width: 4px; height: 22px; border-radius: 4px; background: #6f78df; }
.store-analytics-insight.warning::before { background: #e4ae2d; }
.store-analytics-insight.positive::before { background: #1db28f; }
.store-analytics-insight strong, .store-analytics-insight span, .store-analytics-insight small { padding-left: 4px; }
.store-analytics-insight strong { color: #303847; font-size: 11px; }
.store-analytics-insight span { color: #737e8d; font-size: 10px; line-height: 1.45; }
.store-analytics-insight small { color: #526274; font-size: 9px; font-weight: 700; }

.store-analytics-report-meta { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 8px; padding: 0 16px 10px; }
.store-analytics-report-meta > .badge { justify-self: start; white-space: nowrap; }
.store-analytics-report-meta > small { grid-column: 1 / -1; grid-row: 2; min-width: 0; overflow: hidden; color: #8a95a1; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.store-analytics-report-meta > button { height: 29px; padding: 0 10px; border: 1px solid rgba(118, 103, 205, .25); border-radius: 9px; color: #5549a4; background: rgba(255,255,255,.78); cursor: pointer; font-size: 9px; font-weight: 760; white-space: nowrap; }
.store-analytics-report-meta > button:hover { border-color: rgba(118, 103, 205, .46); background: #fff; box-shadow: 0 7px 16px rgba(88, 74, 170, .12); }
.store-analytics-report-meta > button:disabled { cursor: wait; opacity: .62; }
.store-analytics-daily-pulse { position: relative; z-index: 1; display: grid; grid-template-columns: .72fr 1.25fr .72fr; gap: 7px; padding: 0 16px 11px; }
.store-analytics-daily-pulse article { min-width: 0; padding: 10px; border: 1px solid rgba(210, 217, 235, .82); border-radius: 12px; background: rgba(255,255,255,.75); }
.store-analytics-daily-pulse span, .store-analytics-daily-pulse small { display: block; overflow: hidden; color: #8b94a3; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.store-analytics-daily-pulse strong { display: block; overflow: hidden; margin: 7px 0 4px; color: #252e3b; font-size: 16px; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.store-analytics-daily-pulse article:nth-child(2) strong { color: #6154ba; font-size: 13px; }
.store-analytics-report-summary { position: relative; z-index: 1; margin: 0 16px 10px; padding: 11px 12px; border-left: 3px solid #7c6fd2; border-radius: 4px 11px 11px 4px; color: #596576; background: rgba(242, 241, 253, .78); font-size: 10px; line-height: 1.58; }
.store-analytics-category-focus { position: relative; z-index: 1; display: grid; gap: 6px; padding: 0 16px 16px; }
.store-analytics-category-focus > article { display: grid; grid-template-columns: 23px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid rgba(214,220,236,.78); border-radius: 11px; background: rgba(255,255,255,.68); }
.store-analytics-category-focus article > i { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 8px; color: #6b5ec2; background: #efedff; font-size: 8px; font-style: normal; font-weight: 850; }
.store-analytics-category-focus article > div { min-width: 0; }
.store-analytics-category-focus strong, .store-analytics-category-focus span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-analytics-category-focus strong { color: #384352; font-size: 10px; }
.store-analytics-category-focus span { margin-top: 3px; color: #8993a0; font-size: 9px; }
.store-analytics-category-focus article > b { color: #303948; font-size: 11px; }

.store-analytics-report-detail { overflow: hidden; margin: 0 30px 14px; background: linear-gradient(148deg, rgba(255,255,255,.93), rgba(244,246,253,.9)); }
.store-analytics-report-detail > header { border-bottom: 1px solid rgba(220,226,235,.82); }
.store-analytics-report-detail > header div > span { color: #7667c4; font-weight: 850; letter-spacing: .14em; }
.store-analytics-report-columns { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(0, 1.35fr); gap: 16px; padding: 17px 20px; }
.store-analytics-report-columns > section { min-width: 0; }
.store-analytics-report-section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.store-analytics-report-section-title b { color: #2b3542; font-size: 13px; }
.store-analytics-report-section-title span { color: #8b95a1; font-size: 9px; text-align: right; }
.store-analytics-growth-skus, .store-analytics-expansion-plans { display: grid; min-width: 0; max-width: 100%; gap: 9px; }
.store-analytics-growth-card { overflow: hidden; min-width: 0; max-width: 100%; padding: 12px; border: 1px solid rgba(211,219,230,.88); border-radius: 14px; background: rgba(255,255,255,.82); }
.store-analytics-growth-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.store-analytics-growth-card > header div { min-width: 0; }
.store-analytics-growth-card > header span, .store-analytics-growth-card > header strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-analytics-growth-card > header span { color: #8275c5; font-size: 9px; }
.store-analytics-growth-card > header strong { display: -webkit-box; margin-top: 4px; color: #33404d; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; white-space: normal; word-break: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.store-analytics-growth-card > header > b { flex: 0 0 auto; color: #6253bd; font-size: 19px; }
.store-analytics-growth-card > header > b small { color: #a1a7b4; font-size: 8px; }
.store-analytics-growth-card > p { min-width: 0; margin: 9px 0; color: #727e8b; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; }
.store-analytics-growth-card > footer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; padding-top: 8px; border-top: 1px solid #edf0f4; }
.store-analytics-growth-card > footer span { color: #159072; font-size: 9px; font-weight: 800; }
.store-analytics-growth-card > footer strong { min-width: 0; color: #536171; font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; }
.store-analytics-expansion-card { overflow: hidden; min-width: 0; max-width: 100%; padding: 14px; border: 1px solid rgba(211,218,234,.9); border-radius: 15px; background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(248,246,255,.82)); }
.store-analytics-expansion-card > header { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; }
.store-analytics-expansion-card > header i { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(219,183,65,.45); border-radius: 11px; color: #8d650b; background: linear-gradient(145deg, #fff8df, #f4dda0); font-size: 9px; font-style: normal; font-weight: 900; }
.store-analytics-expansion-card > header > div { min-width: 0; }
.store-analytics-expansion-card > header span, .store-analytics-expansion-card > header strong { display: block; }
.store-analytics-expansion-card > header span { color: #8d7f62; font-size: 9px; }
.store-analytics-expansion-card > header strong { margin-top: 4px; color: #303a47; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; }
.store-analytics-expansion-card > p { min-width: 0; margin: 10px 0; color: #6f7a87; font-size: 10px; line-height: 1.55; overflow-wrap: anywhere; word-break: break-word; }
.store-analytics-product-ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.store-analytics-product-ideas > div { min-width: 0; padding: 9px; border: 1px solid #e3e7ef; border-radius: 11px; background: rgba(255,255,255,.76); }
.store-analytics-product-ideas b, .store-analytics-product-ideas span, .store-analytics-product-ideas small { display: block; overflow-wrap: anywhere; word-break: break-word; }
.store-analytics-product-ideas b { color: #414b58; font-size: 10px; }
.store-analytics-product-ideas span { margin-top: 5px; color: #77828f; font-size: 9px; line-height: 1.4; }
.store-analytics-product-ideas small { margin-top: 6px; color: #4f63ae; font-size: 9px; line-height: 1.4; }
.store-analytics-expansion-card > ol { display: flex; flex-wrap: wrap; gap: 5px 18px; margin: 10px 0; padding-left: 18px; color: #6f7a87; font-size: 9px; }
.store-analytics-expansion-card > footer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 9px 10px; border-radius: 10px; background: #edf7f4; }
.store-analytics-expansion-card > footer span { color: #16856b; font-size: 9px; font-weight: 850; }
.store-analytics-expansion-card > footer strong { min-width: 0; color: #4e675f; font-size: 9px; line-height: 1.42; overflow-wrap: anywhere; word-break: break-word; }
.store-analytics-action-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 0 20px 20px; }
.store-analytics-action-list > article { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; padding: 12px; border: 1px solid #e0e5ed; border-radius: 13px; background: rgba(250,251,253,.88); }
.store-analytics-action-list article > i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: #fff; background: #222c37; font-size: 9px; font-style: normal; font-weight: 900; }
.store-analytics-action-list article > div { min-width: 0; }
.store-analytics-action-list strong, .store-analytics-action-list span { display: block; }
.store-analytics-action-list strong { color: #35404d; font-size: 10px; }
.store-analytics-action-list span { margin-top: 4px; color: #74808d; font-size: 9px; line-height: 1.45; }
.store-analytics-action-list article > small { grid-column: 2; color: #8f711e; font-size: 9px; font-weight: 700; line-height: 1.4; }

.store-analytics-finance { margin: 0 30px 14px; }
.store-analytics-waterfall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 5px 20px 20px; }
.store-analytics-waterfall article { display: grid; grid-template-rows: auto 62px auto; gap: 8px; min-width: 0; }
.store-analytics-waterfall article > span { color: #7c8996; font-size: 10px; }
.store-analytics-waterfall article > div { display: flex; align-items: flex-end; padding: 4px; border-radius: 11px; background: #eef2f7; }
.store-analytics-waterfall article i { display: block; width: 100%; min-height: 7px; border-radius: 8px; background: linear-gradient(90deg, #6b87e9, #93a9f3); transition: height .6s cubic-bezier(.2,.8,.2,1); }
.store-analytics-waterfall article.cost i { background: linear-gradient(90deg, #eabf50, #d99b20); }
.store-analytics-waterfall article.net i { background: linear-gradient(90deg, #25b79a, #14856f); }
.store-analytics-waterfall strong { overflow: hidden; color: #2c3845; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.store-analytics-detail-grid { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.35fr); gap: 14px; padding: 0 30px 30px; }
#storeAnalyticsCategories { display: grid; gap: 13px; padding: 7px 20px 20px; }
.store-analytics-category { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; }
.store-analytics-category > div { min-width: 0; }
.store-analytics-category span { display: block; overflow: hidden; color: #42505e; font-size: 10px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.store-analytics-category small { color: #8b96a1; font-size: 9px; }
.store-analytics-category b { align-self: center; color: #2b3743; font-size: 11px; }
.store-analytics-category i { grid-column: 1 / -1; display: block; height: 6px; overflow: hidden; border-radius: 99px; background: #edf1f5; }
.store-analytics-category i::after { content: ""; display: block; width: var(--category-share, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #687fe0, #a897ef); }

.store-analytics-table-wrap { overflow-x: auto; padding: 4px 14px 16px; }
.store-analytics-table-wrap table { width: 100%; min-width: 600px; border-collapse: collapse; }
.store-analytics-table-wrap th { padding: 9px 10px; border-bottom: 1px solid #e3e8ef; color: #8a95a1; font-size: 9px; font-weight: 750; text-align: left; }
.store-analytics-table-wrap td { padding: 11px 10px; border-bottom: 1px solid #edf0f4; color: #4d5a68; font-size: 10px; }
.store-analytics-table-wrap tbody tr:last-child td { border-bottom: 0; }
.store-analytics-sku-cell { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 220px; }
.store-analytics-sku-cell img, .store-analytics-sku-placeholder { width: 34px; height: 34px; border: 1px solid #e1e7ee; border-radius: 9px; object-fit: cover; background: #f0f3f7; }
.store-analytics-sku-placeholder { display: grid; place-items: center; color: #8c98a5; font-size: 9px; font-weight: 800; }
.store-analytics-sku-cell strong, .store-analytics-sku-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-analytics-sku-cell strong { color: #33404d; font-size: 10px; }
.store-analytics-sku-cell small { margin-top: 3px; color: #909aa5; font-size: 9px; }
.store-analytics-empty { display: grid; min-height: 82px; place-content: center; gap: 4px; color: #8b96a2; font-size: 10px; text-align: center; }
.store-analytics-empty strong { color: #5c6875; font-size: 11px; }

.store-finance-ledger { overflow: hidden; margin: 0 30px 14px; background: linear-gradient(148deg, rgba(255,255,255,.96), rgba(242,246,252,.9)); }
.store-finance-ledger > header { padding: 20px 22px 14px; border-bottom: 1px solid rgba(216,224,234,.82); }
.store-finance-ledger > header div > span { color: #9b7414; font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.store-finance-ledger > header div > strong { font-size: 17px; }
.store-finance-ledger > header div > p { margin: 6px 0 0; color: #798593; font-size: 10px; }
.store-finance-ledger-state { display: grid; justify-items: end; gap: 5px; }
.store-finance-ledger-state small { color: #84909d; font-size: 9px; white-space: nowrap; }
.store-finance-ledger-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; padding: 15px 20px; }
.store-finance-ledger-summary article { min-width: 0; padding: 13px 12px; border: 1px solid rgba(211,219,229,.86); border-radius: 14px; background: rgba(255,255,255,.78); }
.store-finance-ledger-summary span, .store-finance-ledger-summary small { display: block; overflow: hidden; color: #7e8b98; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.store-finance-ledger-summary strong { display: block; overflow: hidden; margin: 9px 0 7px; color: #26323e; font-size: clamp(15px, 1.25vw, 20px); letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.store-finance-ledger-summary small.positive { color: #16876e; }
.store-finance-ledger-summary small.negative, .store-finance-ledger-summary strong.negative { color: #c1534a; }
.store-finance-ledger-summary article.receipt { border-color: rgba(42,57,72,.88); background: linear-gradient(145deg, #263441, #18222c); box-shadow: 0 12px 26px rgba(22,31,40,.14); }
.store-finance-ledger-summary article.receipt span, .store-finance-ledger-summary article.receipt small { color: rgba(255,255,255,.62); }
.store-finance-ledger-summary article.receipt strong { color: #fff; }
.store-finance-ledger-summary article.profit { border-color: rgba(53,169,134,.3); background: linear-gradient(145deg, rgba(241,252,248,.95), rgba(226,246,239,.82)); }
.store-finance-ledger-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .58fr); gap: 12px; padding: 0 20px 15px; }
.store-finance-ledger-grid > section, .store-finance-ledger-grid > aside, .store-finance-loss-section { min-width: 0; overflow: hidden; border: 1px solid rgba(213,221,231,.86); border-radius: 15px; background: rgba(255,255,255,.66); }
.store-finance-section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 14px 15px 10px; }
.store-finance-section-title div > span, .store-finance-section-title div > strong { display: block; }
.store-finance-section-title div > span { color: #9b7414; font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.store-finance-section-title div > strong { margin-top: 4px; color: #303c48; font-size: 12px; }
.store-finance-section-title > small { color: #8994a0; font-size: 9px; text-align: right; }
.store-finance-table-wrap { overflow-x: auto; }
.store-finance-table-wrap table { width: 100%; min-width: 930px; border-collapse: collapse; }
.store-finance-table-wrap th { padding: 9px 10px; border-block: 1px solid #e4e9ef; color: #87929e; background: rgba(244,247,250,.78); font-size: 8px; font-weight: 760; text-align: left; white-space: nowrap; }
.store-finance-table-wrap td { padding: 11px 10px; border-bottom: 1px solid #edf0f4; color: #4f5c69; font-size: 9px; vertical-align: middle; white-space: nowrap; }
.store-finance-table-wrap tbody tr:last-child td { border-bottom: 0; }
.store-finance-table-wrap td > strong, .store-finance-table-wrap td > small, .store-finance-status + small { display: block; }
.store-finance-table-wrap td > small, .store-finance-status + small { margin-top: 4px; color: #929ca6; font-size: 8px; }
.store-finance-table-wrap td.positive > strong, .store-finance-table-wrap td.positive { color: #16856c; }
.store-finance-table-wrap td.negative > strong, .store-finance-table-wrap td.negative { color: #bd4c45; }
.store-finance-table-wrap td.warning { color: #9b7414; }
.store-finance-store strong, .store-finance-store small { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-finance-store strong { color: #34414d; font-size: 10px; }
.store-finance-store small { margin-top: 4px; color: #929ba5; font-size: 8px; }
.store-finance-status { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 99px; color: #687582; background: #edf1f5; font-size: 8px; font-weight: 800; }
.store-finance-status.live { color: #14765f; background: #e5f6f0; }
.store-finance-status.warn { color: #8a6814; background: #fff3cf; }
.store-finance-status.danger { color: #a94740; background: #fde9e7; }
.store-finance-anomalies { display: grid; gap: 7px; max-height: 330px; overflow-y: auto; padding: 0 12px 12px; }
.store-finance-anomalies article { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 10px; border: 1px solid #e5e9ef; border-radius: 11px; background: rgba(250,251,253,.9); }
.store-finance-anomalies article > i { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 8px; color: #8b6812; background: #fff1c6; font-size: 11px; font-style: normal; font-weight: 900; }
.store-finance-anomalies article.high > i { color: #a9423c; background: #fce5e3; }
.store-finance-anomalies article strong, .store-finance-anomalies article span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-finance-anomalies article strong { color: #3a4652; font-size: 9px; }
.store-finance-anomalies article span { margin-top: 3px; color: #929ca6; font-size: 8px; }
.store-finance-anomalies article p { margin: 5px 0 0; color: #6f7b87; font-size: 8px; line-height: 1.45; }
.store-finance-loss-section { margin: 0 20px 15px; }
.store-finance-loss-section .store-finance-table-wrap table { min-width: 980px; }
.store-finance-ledger-note { padding: 0 20px 17px; color: #89949f; font-size: 9px; line-height: 1.5; }

@keyframes storeAnalyticsDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-24px, 18px, 0) scale(1.04); }
}

@media (max-width: 1380px) {
  .store-analytics-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .store-finance-ledger-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1050px) {
  .store-analytics-hero { align-items: flex-start; flex-direction: column; }
  .store-analytics-controls { justify-content: flex-start; }
  .store-analytics-main-grid, .store-analytics-detail-grid { grid-template-columns: 1fr; }
  .store-analytics-report-columns { grid-template-columns: 1fr; }
  .store-finance-ledger-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .store-analytics-hero { padding: 22px 18px 17px; }
  .store-analytics-controls, .store-analytics-controls label { width: 100%; }
  .store-analytics-controls select { width: 100%; }
  .store-analytics-view-switch { width: calc(100% - 36px); margin-inline: 18px; }
  .store-analytics-range { flex: 1; }
  .store-analytics-range button { flex: 1; }
  .store-analytics-statusline { align-items: flex-start; flex-wrap: wrap; padding-inline: 18px; }
  .store-analytics-source { width: 100%; margin-left: 0; }
  .store-analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 18px; }
  .store-analytics-main-grid, .store-analytics-detail-grid { padding-inline: 18px; }
  .store-analytics-finance, .store-analytics-report-detail, .store-finance-ledger { margin-inline: 18px; }
  .store-finance-ledger-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-analytics-product-ideas, .store-analytics-action-list { grid-template-columns: 1fr; }
  .store-analytics-waterfall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-analytics-waterfall article.net { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
  .store-analytics-kpis { grid-template-columns: 1fr; }
  .store-analytics-sync { width: 100%; }
  .store-analytics-daily-pulse { grid-template-columns: 1fr; }
  .store-analytics-report-meta { grid-template-columns: 1fr; }
  .store-analytics-report-meta > small { grid-column: 1; grid-row: auto; }
  .store-analytics-report-meta > button { width: 100%; }
  .store-finance-ledger > header, .store-finance-section-title { align-items: flex-start; flex-direction: column; }
  .store-finance-ledger-state { justify-items: start; }
  .store-finance-ledger-summary { grid-template-columns: 1fr; }
  .store-analytics-view-switch button { grid-template-columns: 26px minmax(0, 1fr); min-height: 48px; padding-inline: 9px; }
  .store-analytics-view-switch button > i { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .store-analytics-workspace::before { animation: none; }
  .store-analytics-waterfall article i { transition: none; }
  .store-analytics-view-switch button { transition: none; }
}

.store-analytics-webhook { min-height: 39px; white-space: nowrap; }
.store-analytics-webhook-dialog { width: min(620px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 22px; background: transparent; box-shadow: 0 30px 90px rgba(26, 36, 50, .3); }
.store-analytics-webhook-dialog::backdrop { background: rgba(25, 34, 46, .48); backdrop-filter: blur(6px); }
.store-analytics-webhook-shell { overflow: hidden; border: 1px solid rgba(205, 215, 227, .9); border-radius: 22px; background: linear-gradient(145deg, #fbfcff, #eef3fa); }
.store-analytics-webhook-shell > header { display: flex; justify-content: space-between; gap: 24px; padding: 24px 26px 19px; border-bottom: 1px solid #dce4ed; }
.store-analytics-webhook-shell > header span { color: #7b75bd; font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.store-analytics-webhook-shell > header h2 { margin: 7px 0 5px; color: #202c38; font-size: 22px; }
.store-analytics-webhook-shell > header p { margin: 0; color: #748190; font-size: 11px; line-height: 1.55; }
.store-analytics-webhook-shell > header button { flex: 0 0 34px; height: 34px; border: 1px solid #d7dfe8; border-radius: 50%; color: #6d7885; background: rgba(255,255,255,.8); cursor: pointer; }
.store-analytics-webhook-body { display: grid; gap: 15px; padding: 20px 26px; }
.store-analytics-webhook-note { display: grid; gap: 5px; padding: 13px 15px; border: 1px solid rgba(219, 186, 88, .45); border-radius: 13px; background: rgba(255, 249, 227, .72); }
.store-analytics-webhook-note strong { color: #4d4122; font-size: 11px; }
.store-analytics-webhook-note span { color: #857755; font-size: 10px; line-height: 1.5; }
.store-analytics-webhook-body label { display: grid; gap: 7px; color: #697786; font-size: 10px; }
.store-analytics-webhook-body input { width: 100%; height: 43px; padding: 0 12px; border: 1px solid #ccd7e3; border-radius: 11px; color: #2e3b48; background: #fff; font: 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; outline: 0; }
.store-analytics-webhook-body input:focus { border-color: #8778d4; box-shadow: 0 0 0 3px rgba(135, 120, 212, .11); }
.store-analytics-webhook-body > p { margin: 0; color: #7d8995; font-size: 10px; }
.store-analytics-webhook-shell > footer { display: flex; justify-content: flex-end; gap: 9px; padding: 0 26px 23px; }
.store-analytics-webhook-shell > footer button { min-width: 126px; }

@media (max-width: 560px) {
  .store-analytics-webhook-shell > footer { flex-direction: column; }
  .store-analytics-webhook-shell > footer button { width: 100%; }
}

/* SKU return-rate and contextual profit simulator. */
body .profit-tool-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
body .profit-return-simulator { position: relative; overflow: hidden; }
body .profit-return-simulator::before { position: absolute; top: -180px; right: -120px; width: 430px; height: 430px; border-radius: 50%; background: radial-gradient(circle, rgba(237, 203, 101, .14), rgba(237, 203, 101, 0) 69%); pointer-events: none; content: ""; }
body .profit-return-heading { position: relative; z-index: 1; align-items: flex-end; }
body .profit-return-heading .profit-return-toolbar { display: grid; grid-template-columns: minmax(135px, 1.1fr) minmax(110px, .8fr) auto; align-items: end; gap: 9px; padding-left: 0; }
body .profit-return-heading .profit-return-toolbar::before { display: none; }
body .profit-return-toolbar label { display: grid; gap: 5px; color: #7b715f; font-size: 9px; font-weight: 800; }
body .profit-return-toolbar select { min-width: 0; height: 39px; padding: 0 32px 0 11px; border: 1px solid #ded2ba; border-radius: 10px; color: #3d3527; background: #fff; font-size: 10px; font-weight: 750; outline: 0; }
body .profit-return-toolbar select:focus { border-color: #ba8720; box-shadow: 0 0 0 3px rgba(186, 135, 32, .11); }
body .profit-return-status { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; min-height: 40px; margin-bottom: 14px; padding: 8px 12px; border: 1px solid #e3d7c0; border-radius: 11px; color: #756a58; background: #fbf8f1; font-size: 10px; }
body .profit-return-status i { display: grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; border-radius: 50%; color: #7f5d16; background: #f4df9d; font-style: normal; font-weight: 900; }
body .profit-return-status[data-state="ready"] { border-color: #bfe2d1; color: #267153; background: #f2fbf6; }
body .profit-return-status[data-state="ready"] i { color: #fff; background: #35ad7c; }
body .profit-return-status[data-state="error"] { border-color: #efc9c3; color: #a54a3f; background: #fff5f3; }
body .profit-return-status[data-state="error"] i { color: #fff; background: #d96455; }
body .profit-return-status[data-state="loading"] i { animation: profit-return-spin 1s linear infinite; }
@keyframes profit-return-spin { to { transform: rotate(360deg); } }

body .profit-return-summary-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
body .profit-return-summary-grid article { min-width: 0; padding: 13px 14px; border: 1px solid #e2d8c5; border-radius: 13px; background: linear-gradient(145deg, #fff, #fbf8f1); box-shadow: 0 8px 18px rgba(65, 48, 17, .045); }
body .profit-return-summary-grid span,
body .profit-return-summary-grid strong,
body .profit-return-summary-grid small { display: block; }
body .profit-return-summary-grid span { color: #7d7465; font-size: 9px; }
body .profit-return-summary-grid strong { margin-top: 7px; color: #28231b; font-size: 21px; line-height: 1; }
body .profit-return-summary-grid small { margin-top: 7px; color: #a09685; font-size: 8px; }
body .profit-return-summary-grid article.positive { border-color: #b9e0cf; background: linear-gradient(145deg, #fff, #effaf5); }
body .profit-return-summary-grid article.positive strong { color: #19845b; }
body .profit-return-summary-grid article.warning { border-color: #ebd19b; background: linear-gradient(145deg, #fff, #fff7e7); }
body .profit-return-summary-grid article.warning strong { color: #a66d08; }

body .profit-return-workspace { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 14px; margin-bottom: 14px; }
body .profit-return-history-card,
body .profit-return-scenario-card { min-width: 0; padding: 17px; border: 1px solid #e0d6c2; border-radius: 15px; background: rgba(255,255,255,.9); box-shadow: 0 10px 24px rgba(67, 50, 18, .05); }
body .profit-return-history-card > header,
body .profit-return-scenario-card > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
body .profit-return-history-card > header > div,
body .profit-return-scenario-card > header > div { display: grid; gap: 4px; }
body .profit-return-history-card > header span,
body .profit-return-scenario-card > header span { color: #a17217; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
body .profit-return-history-card > header strong,
body .profit-return-scenario-card > header strong { color: #30281b; font-size: 14px; }
body .profit-return-history-card > header label { display: grid; width: min(270px, 58%); gap: 5px; color: #817664; font-size: 9px; font-weight: 800; }
body .profit-return-history-card > header select { width: 100%; height: 38px; padding: 0 31px 0 10px; border: 1px solid #ddd1b9; border-radius: 10px; color: #443b2d; background: #fff; font-size: 9px; font-weight: 750; outline: 0; }
body .profit-return-sku-profile { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 11px; margin-bottom: 12px; padding: 11px; border: 1px solid #ebe2d2; border-radius: 12px; background: linear-gradient(135deg, #fffdf9, #f7f3ea); }
body .profit-return-sku-profile img,
body .profit-return-sku-placeholder { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid #e3d8c2; border-radius: 10px; color: #936a1b; background: #fff; object-fit: cover; font-size: 9px; font-weight: 900; }
body .profit-return-sku-profile > div { min-width: 0; }
body .profit-return-sku-profile > div strong,
body .profit-return-sku-profile > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .profit-return-sku-profile > div strong { color: #332d23; font-size: 11px; }
body .profit-return-sku-profile > div small { margin-top: 6px; color: #8b8170; font-size: 8.5px; }
body .profit-return-sku-profile em { padding: 5px 8px; border-radius: 999px; color: #9a6710; background: #fff0c7; font-size: 8px; font-style: normal; font-weight: 850; white-space: nowrap; }
body .profit-return-sku-profile em.good { color: #267456; background: #e3f6ed; }
body .profit-return-sku-profile em.partial { color: #9a6710; background: #fff0c7; }
body .profit-return-sku-profile em.weak { color: #ad5549; background: #fde9e5; }
body .profit-return-outcome-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
body .profit-return-outcome-grid > div { min-width: 0; padding: 10px 8px; border: 1px solid #e6dfd3; border-radius: 10px; background: #fbfaf7; text-align: center; }
body .profit-return-outcome-grid span,
body .profit-return-outcome-grid strong,
body .profit-return-outcome-grid small { display: block; }
body .profit-return-outcome-grid span { color: #81796d; font-size: 8px; }
body .profit-return-outcome-grid strong { margin-top: 6px; color: #3a3328; font-size: 17px; }
body .profit-return-outcome-grid small { margin-top: 4px; overflow: hidden; color: #aaa295; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
body .profit-return-outcome-grid .delivered { border-color: #bde2d2; background: #f1faf6; }
body .profit-return-outcome-grid .delivered strong { color: #25845f; }
body .profit-return-outcome-grid .refused,
body .profit-return-outcome-grid .returned { border-color: #ecd19b; background: #fff8e9; }
body .profit-return-outcome-grid .refused strong,
body .profit-return-outcome-grid .returned strong { color: #a76c09; }
body .profit-return-outcome-grid .cancelled { border-color: #e8c2bc; background: #fff4f2; }
body .profit-return-outcome-grid .cancelled strong { color: #b35548; }
body .profit-return-funnel { display: grid; gap: 8px; margin-top: 14px; }
body .profit-return-funnel-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 38px; align-items: center; gap: 8px; }
body .profit-return-funnel-row > span { color: #776e60; font-size: 8px; }
body .profit-return-funnel-row > b { height: 7px; overflow: hidden; border-radius: 999px; background: #ece8df; }
body .profit-return-funnel-row > b i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #91712e, #efc75f); }
body .profit-return-funnel-row.delivered > b i { background: linear-gradient(90deg, #269d76, #65cda8); }
body .profit-return-funnel-row.returned > b i { background: linear-gradient(90deg, #c78619, #efc25c); }
body .profit-return-funnel-row > strong { color: #5b5141; font-size: 9px; text-align: right; }
body .profit-return-history-note { margin: 13px 0 0; color: #8c8272; font-size: 8.5px; line-height: 1.55; }
body .profit-return-empty { padding: 30px 12px; color: #9a9286; font-size: 9px; text-align: center; }

body .profit-return-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
body .profit-return-input-grid label { display: grid; min-width: 0; gap: 5px; color: #776e60; font-size: 8.5px; font-weight: 780; }
body .profit-return-input-grid input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #dfd5c2; border-radius: 9px; color: #332b20; background: #fff; font-size: 10px; font-weight: 730; outline: 0; }
body .profit-return-input-grid input:focus { border-color: #bd8720; box-shadow: 0 0 0 3px rgba(189, 135, 32, .11); }
body .profit-return-input-grid label.rate-input input { border-color: #d9c386; background: #fffbef; }
body .profit-return-formula { display: grid; gap: 5px; margin-top: 12px; padding: 11px 12px; border: 1px solid #e9d7a9; border-radius: 10px; background: linear-gradient(135deg, #fffaf0, #f9f2df); }
body .profit-return-formula span { color: #a37823; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
body .profit-return-formula strong { color: #625033; font-size: 9px; line-height: 1.5; }
body .profit-return-result-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
body .profit-return-result-grid article { min-width: 0; padding: 13px 11px; border: 1px solid #e3dac9; border-radius: 12px; background: #fff; }
body .profit-return-result-grid span,
body .profit-return-result-grid strong { display: block; }
body .profit-return-result-grid span { color: #817768; font-size: 8px; }
body .profit-return-result-grid strong { margin-top: 7px; overflow: hidden; color: #30291f; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
body .profit-return-result-grid article.warning { border-color: #e9d09c; background: #fff9eb; }
body .profit-return-result-grid article.warning strong { color: #a76b07; }
body .profit-return-result-grid article.profit { border-color: #b9dfcf; background: linear-gradient(145deg, #f7fffb, #e9f8f1); }
body .profit-return-result-grid article.profit strong { color: #177b55; }
body .profit-return-result-grid article.profit.loss { border-color: #e7c1bb; background: #fff4f2; }
body .profit-return-result-grid article.profit.loss strong { color: #b44f42; }
body .profit-return-result-band { position: relative; z-index: 1; margin-bottom: 12px; }
body .profit-return-scenario-table { position: relative; z-index: 1; }
body .profit-return-scenario-table td:first-child strong,
body .profit-return-scenario-table td:first-child small { display: block; }
body .profit-return-scenario-table td:first-child small { margin-top: 4px; color: #948a7a; font-size: 8px; }
body .profit-return-scenario-table tr.loss td:nth-last-child(-n+2) { color: #b45145; }

@media (max-width: 1280px) {
  body .profit-tool-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body .profit-return-heading { align-items: stretch; flex-direction: column; }
  body .profit-return-heading .profit-return-toolbar { width: 100%; }
  body .profit-return-result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  body .profit-return-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body .profit-return-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  body .profit-tool-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .profit-return-heading .profit-return-toolbar { grid-template-columns: 1fr 1fr; }
  body .profit-return-heading .profit-return-toolbar button { grid-column: 1 / -1; width: 100%; }
  body .profit-return-summary-grid,
  body .profit-return-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .profit-return-outcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .profit-return-history-card > header { align-items: stretch; flex-direction: column; }
  body .profit-return-history-card > header label { width: 100%; }
  body .profit-return-sku-profile { grid-template-columns: 46px minmax(0, 1fr); }
  body .profit-return-sku-profile img,
  body .profit-return-sku-placeholder { width: 46px; height: 46px; }
  body .profit-return-sku-profile em { grid-column: 1 / -1; justify-self: start; }
  body .profit-return-input-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
body .profit-return-status[data-state="loading"] i { animation: none; }
}

/* Store monitoring keeps the shared topbar usable on narrow screens. */
@media (max-width: 680px) {
  body .topbar-store-pill {
    width: 40px;
    min-width: 40px;
    padding-inline: 0;
    justify-content: center;
  }

  body .topbar-store-pill > span {
    display: none;
  }
}

/* Selection library realtime Ozon card sync and seller-offer detail. */
body .selection-lib-head-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  white-space: normal;
}

body .selection-realtime-btn,
body .selection-sellers-btn {
  min-height: 28px;
  border-radius: 8px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 820;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body .selection-realtime-btn {
  border: 1px solid #25313d;
  color: #fff;
  background: linear-gradient(145deg, #2a3540, #17212b);
  box-shadow: 0 7px 16px rgba(24, 34, 44, 0.15);
}

body .selection-sellers-btn {
  border: 1px solid #e0bd64;
  color: #76530c;
  background: linear-gradient(145deg, #fff9e8, #f6df9c);
}

body .selection-realtime-btn:hover:not(:disabled),
body .selection-sellers-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

body .selection-realtime-btn:disabled {
  cursor: wait;
  opacity: 0.68;
}

body .selection-realtime-btn.is-loading {
  background: linear-gradient(110deg, #293541 25%, #425262 48%, #293541 72%);
  background-size: 220% 100%;
  animation: selection-realtime-loading 1.15s linear infinite;
}

@keyframes selection-realtime-loading {
  to { background-position: -220% 0; }
}

body .selection-green-price {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  border: 1px solid #9fd9c1;
  border-radius: 999px;
  padding: 2px 8px;
  color: #0c7c55;
  background: #eaf9f2;
  font-weight: 820;
}

body .selection-seller-dialog {
  width: min(1080px, calc(100vw - 36px));
  max-width: none;
  max-height: calc(100dvh - 34px);
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  padding: 0;
  background: transparent;
  box-shadow: 0 34px 100px rgba(28, 38, 52, 0.34);
}

body .selection-seller-dialog::backdrop {
  background: rgba(27, 36, 48, 0.52);
  backdrop-filter: blur(7px);
}

body .selection-seller-dialog-shell {
  display: grid;
  max-height: calc(100dvh - 34px);
  grid-template-rows: auto auto minmax(180px, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(198, 208, 222, 0.92);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 0%, rgba(215, 224, 242, 0.62), transparent 34%),
    linear-gradient(145deg, #fbfcff, #eef3fa);
}

body .selection-seller-dialog-shell > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px 19px;
  border-bottom: 1px solid #dae2ed;
}

body .selection-seller-dialog-shell > header .eyebrow {
  color: #a57719;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}

body .selection-seller-dialog-shell > header h2 {
  margin: 6px 0 4px;
  color: #202b37;
  font-size: 23px;
}

body .selection-seller-dialog-shell > header p {
  max-width: 760px;
  margin: 0;
  overflow: hidden;
  color: #758190;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .selection-seller-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 26px;
}

body .selection-seller-summary article {
  min-width: 0;
  border: 1px solid #dce4ee;
  border-radius: 13px;
  padding: 12px 13px;
  background: rgba(255, 255, 255, 0.78);
}

body .selection-seller-summary article.green {
  border-color: #b8e3d2;
  background: linear-gradient(145deg, #f5fffa, #e6f8f0);
}

body .selection-seller-summary span,
body .selection-seller-summary strong,
body .selection-seller-summary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .selection-seller-summary span { color: #7c8795; font-size: 9px; }
body .selection-seller-summary strong { margin-top: 6px; color: #26323f; font-size: 17px; }
body .selection-seller-summary article.green strong { color: #117a57; }
body .selection-seller-summary small { margin-top: 4px; color: #9aa4af; font-size: 8px; }

body .selection-seller-table-wrap {
  min-height: 0;
  margin: 0 26px;
  overflow: auto;
  border: 1px solid #dbe3ed;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
}

body .selection-seller-table {
  width: 100%;
  border-collapse: collapse;
  color: #4f5b68;
  font-size: 10px;
}

body .selection-seller-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  padding: 11px 12px;
  color: #7d8997;
  background: #edf2f8;
  font-size: 8px;
  font-weight: 850;
  text-align: left;
}

body .selection-seller-table td {
  padding: 12px;
  border-top: 1px solid #e3e9f1;
  vertical-align: middle;
}

body .selection-seller-table tr.is-lowest td {
  background: rgba(236, 249, 242, 0.54);
}

body .selection-seller-table td:first-child b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  color: #70500e;
  background: #f8e4a6;
}

body .selection-seller-table td a,
body .selection-seller-table td > strong {
  color: #273543;
  font-weight: 780;
  text-decoration: none;
}

body .selection-seller-table td a:hover { color: #9b6d0f; text-decoration: underline; }
body .selection-seller-table td small { display: block; margin-top: 3px; color: #9aa4ae; font-size: 8px; }
body .selection-seller-table td em { margin-left: 6px; border-radius: 999px; padding: 2px 6px; color: #087554; background: #dff6ec; font-size: 7px; font-style: normal; font-weight: 850; }

body .selection-seller-empty {
  display: grid;
  min-height: 170px;
  place-content: center;
  gap: 7px;
  color: #81909f;
  text-align: center;
}

body .selection-seller-empty strong { color: #536170; font-size: 13px; }
body .selection-seller-empty span { font-size: 10px; }

body .selection-seller-dialog-shell > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 26px 20px;
}

body .selection-seller-dialog-shell > footer > span {
  color: #8793a0;
  font-size: 9px;
}

body .selection-seller-dialog-shell > footer > div {
  display: flex;
  gap: 9px;
}

@media (max-width: 980px) {
  body .selection-seller-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .selection-seller-table { min-width: 780px; }
}

@media (max-width: 680px) {
  body .selection-seller-dialog { width: 100vw; max-height: 100dvh; border-radius: 0; }
  body .selection-seller-dialog-shell { max-height: 100dvh; border-radius: 0; }
  body .selection-seller-dialog-shell > header,
  body .selection-seller-summary,
  body .selection-seller-dialog-shell > footer { padding-right: 15px; padding-left: 15px; }
  body .selection-seller-table-wrap { margin-right: 15px; margin-left: 15px; }
  body .selection-seller-dialog-shell > footer { align-items: stretch; flex-direction: column; }
  body .selection-seller-dialog-shell > footer > div { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  body .selection-realtime-btn.is-loading { animation: none; }
}

/* Standalone video learning center */
.sidebar .nav-item[data-view="tutorials"],
.sidebar .nav-item[data-view="seller-academy"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2.5'/%3E%3Cpath d='m10 9 5 3-5 3V9Z'/%3E%3C/svg%3E");
}

body .overview-portal .overview-learning-grid.overview-learning-grid-news-only {
  grid-template-columns: minmax(0, 1fr);
}

body .overview-learning-grid-news-only .overview-learning-panel {
  min-height: 320px;
}

body .overview-learning-grid-news-only .overview-news-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 244px;
}

body .overview-learning-grid-news-only .overview-news-empty {
  grid-column: 1 / -1;
}

body .tutorial-library {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 18px;
}

body .tutorial-library[hidden] {
  display: none;
}

body .tutorial-library-hero {
  position: relative;
  display: grid;
  min-height: 178px;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.25fr) minmax(380px, 0.75fr);
  align-items: center;
  gap: 32px;
  padding: 32px 36px;
  border: 1px solid rgba(197, 157, 70, 0.22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.92), transparent 26%),
    linear-gradient(118deg, #fffdf8 0%, #f7f0df 48%, #e9f2f8 100%);
  box-shadow: 0 18px 48px rgba(64, 72, 84, 0.08);
}

body .tutorial-library-hero::before,
body .tutorial-library-hero::after {
  position: absolute;
  border: 1px solid rgba(181, 137, 45, 0.18);
  border-radius: 50%;
  content: "";
}

body .software-tutorial-hero {
  border-color: rgba(114, 151, 187, 0.24);
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.94), transparent 26%),
    linear-gradient(118deg, #f8fbff 0%, #edf4fb 50%, #fff8e9 100%);
}

body .tutorial-library-hero::before {
  width: 260px;
  height: 260px;
  top: -154px;
  right: 9%;
  box-shadow: 0 0 56px rgba(197, 158, 74, 0.12);
}

body .tutorial-library-hero::after {
  width: 126px;
  height: 126px;
  right: 24%;
  bottom: -91px;
}

body .tutorial-library-copy,
body .tutorial-library-summary {
  position: relative;
  z-index: 1;
}

body .tutorial-library-kicker {
  color: #b38424;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

body .tutorial-library-copy h2 {
  margin: 10px 0 0;
  color: #202b36;
  font-size: clamp(24px, 2.3vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.8px;
}

body .tutorial-library-copy p {
  max-width: 720px;
  margin: 12px 0 0;
  color: #6d7884;
  font-size: 12px;
  line-height: 1.8;
}

body .tutorial-library-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 14px 34px rgba(56, 70, 87, 0.08);
  backdrop-filter: blur(14px);
}

body .tutorial-library-summary > div {
  display: flex;
  min-width: 0;
  min-height: 92px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  padding: 14px 10px;
  text-align: center;
}

body .tutorial-library-summary > div + div {
  border-left: 1px solid rgba(77, 88, 101, 0.1);
}

body .tutorial-library-summary strong {
  color: #27313d;
  font-size: 19px;
}

body .tutorial-library-summary span {
  color: #85909b;
  font-size: 9px;
  white-space: nowrap;
}

body .seller-academy-admin,
body .seller-academy-access {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid rgba(139, 163, 192, 0.28);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 0%, rgba(222, 190, 106, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(248, 251, 255, 0.98), rgba(229, 237, 247, 0.92));
  box-shadow: 0 14px 36px rgba(65, 81, 104, 0.08);
}

body .seller-academy-admin[hidden],
body .seller-academy-access[hidden] {
  display: none;
}

body .seller-academy-admin {
  grid-template-columns: minmax(210px, 0.55fr) minmax(0, 1.45fr);
}

body .seller-academy-admin > div {
  display: grid;
  gap: 5px;
}

body .seller-academy-admin > div span {
  color: #b18424;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.3px;
}

body .seller-academy-admin > div strong {
  color: #263542;
  font-size: 16px;
}

body .seller-academy-admin > div small,
body .seller-academy-admin > p {
  color: #7b8896;
  font-size: 10px;
  line-height: 1.6;
}

body .seller-academy-admin form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
}

body .seller-academy-admin label {
  display: grid;
  gap: 6px;
  color: #6f7d8c;
  font-size: 9px;
  font-weight: 800;
}

body .seller-academy-admin input {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(127, 151, 179, 0.3);
  border-radius: 11px;
  padding: 0 11px;
  color: #273746;
  background: rgba(255, 255, 255, 0.86);
  font: inherit;
}

body .seller-academy-admin input[type="file"] {
  padding: 7px 9px;
}

body .seller-academy-admin .seller-academy-summary-field,
body .seller-academy-admin .seller-academy-file-field {
  grid-column: span 1;
}

body .seller-academy-admin > p {
  grid-column: 2;
  min-height: 16px;
  margin: -8px 0 0;
}

body .seller-academy-access {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

body .seller-academy-access > span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 16px;
  color: #68480c;
  background: linear-gradient(145deg, #f9dfa0, #e9be4f);
  box-shadow: 0 10px 24px rgba(179, 132, 34, 0.2);
  font-size: 12px;
  font-weight: 950;
}

body .seller-academy-access strong {
  color: #263542;
  font-size: 15px;
}

body .seller-academy-access p {
  margin: 5px 0 0;
  color: #758493;
  font-size: 10px;
  line-height: 1.6;
}

body .tutorial-library-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 0;
}

body .software-tutorial-uploads[hidden] {
  display: none;
}

body .tutorial-library-card {
  position: relative;
  padding: 14px 14px 17px;
  border: 1px solid rgba(75, 86, 101, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 42px rgba(55, 64, 77, 0.07);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body .tutorial-library-card:hover {
  border-color: rgba(190, 146, 51, 0.34);
  box-shadow: 0 20px 48px rgba(55, 64, 77, 0.11);
  transform: translateY(-2px);
}

body .tutorial-library-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

body .tutorial-library-card-meta span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  color: #7a570e;
  background: linear-gradient(145deg, #f8dfa0, #edc95f);
  font-size: 9px;
  font-weight: 900;
}

body .tutorial-library-card-meta small {
  margin: 0;
  border-radius: 999px;
  padding: 5px 9px;
  color: #78838f;
  background: #f2f4f7;
  font-size: 9px;
}

body .tutorial-library-card .overview-video-player {
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(35, 43, 55, 0.13);
}

body .seller-academy-locked-preview {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, #dfe8f3, #f7f9fc);
  box-shadow: 0 12px 30px rgba(35, 43, 55, 0.1);
}

body .seller-academy-locked-preview::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 40, 55, 0.08), rgba(27, 40, 55, 0.56));
  content: "";
}

body .seller-academy-locked-preview > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.55) blur(1px);
}

body .seller-academy-preview-mark {
  color: rgba(77, 101, 128, 0.46);
  font-size: 42px;
}

body .seller-academy-locked-preview > div {
  position: absolute;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: #fff;
  text-align: center;
}

body .seller-academy-locked-preview b {
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  padding: 4px 9px;
  color: #f7d675;
  background: rgba(29, 39, 53, 0.54);
  font-size: 9px;
  letter-spacing: 1px;
}

body .seller-academy-locked-preview strong {
  font-size: 12px;
}

body .seller-academy-card-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

body .seller-academy-card-heading > strong {
  min-width: 0;
  color: #26333f;
  font-size: 14px;
}

body .tutorial-library-grid > .tutorial-library-card > small {
  display: block;
  margin-top: 6px;
  color: #8a949f;
  font-size: 10px;
}

body .seller-academy-delete {
  flex: none;
  border: 1px solid rgba(212, 76, 76, 0.25);
  border-radius: 999px;
  padding: 5px 9px;
  color: #bd4747;
  background: rgba(255, 245, 245, 0.92);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

body .seller-academy-loading,
body .seller-academy-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  gap: 9px;
  border: 1px dashed rgba(126, 151, 181, 0.38);
  border-radius: 20px;
  color: #718092;
  background: rgba(244, 248, 253, 0.72);
  text-align: center;
}

body .seller-academy-loading > span {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(104, 136, 169, 0.18);
  border-top-color: #7d9bb8;
  border-radius: 50%;
  animation: selection-auto-spin 0.9s linear infinite;
}

body .seller-academy-empty > span {
  color: #d1ae50;
  font-size: 34px;
}

body .seller-academy-loading strong,
body .seller-academy-empty strong {
  color: #314252;
  font-size: 14px;
}

body .seller-academy-loading small,
body .seller-academy-empty small {
  color: #8795a4;
  font-size: 10px;
}

@media (max-width: 1180px) {
  body .tutorial-library-hero {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  body .tutorial-library-summary {
    max-width: 620px;
  }

  body .seller-academy-admin {
    grid-template-columns: 1fr;
  }

  body .seller-academy-admin > p {
    grid-column: 1;
  }
}

@media (max-width: 760px) {
  body .overview-learning-grid-news-only .overview-news-list,
  body .tutorial-library-grid {
    grid-template-columns: 1fr;
  }

  body .tutorial-library-hero {
    min-height: 0;
    padding: 24px 20px;
    border-radius: 18px;
  }

  body .tutorial-library-summary {
    width: 100%;
  }

  body .seller-academy-admin form {
    grid-template-columns: 1fr;
  }

  body .seller-academy-admin .seller-academy-summary-field,
  body .seller-academy-admin .seller-academy-file-field {
    grid-column: 1;
  }

  body .seller-academy-access {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body .seller-academy-access .primary-button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 460px) {
  body .tutorial-library-summary {
    grid-template-columns: 1fr;
  }

  body .tutorial-library-summary > div {
    min-height: 64px;
  }

  body .tutorial-library-summary > div + div {
    border-top: 1px solid rgba(77, 88, 101, 0.1);
    border-left: 0;
  }

  body .tutorial-library-card {
    padding: 10px 10px 14px;
    border-radius: 17px;
  }
}

/* 2026-07-25 super-admin controls and sidebar icon refinement */
.nav-item[data-view="store-monitor"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='13' rx='2.5'/%3E%3Cpath d='M7 12h2.4l1.6-3.5 2.3 6 1.5-3H18'/%3E%3Cpath d='M9 20h6'/%3E%3C/svg%3E");
}

.nav-item[data-view="billing"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5h14.5A1.5 1.5 0 0 1 20 9v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7.5Z'/%3E%3Cpath d='M4.5 7.5V6.2A2.2 2.2 0 0 1 6.7 4h9.8'/%3E%3Cpath d='M14 11h6v5h-6a2.5 2.5 0 0 1 0-5Z'/%3E%3Ccircle cx='15' cy='13.5' r='.7' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

body .admin-page {
  gap: 15px;
}

body .admin-page-heading {
  position: relative;
  overflow: hidden;
  padding: 26px 28px;
  border-color: rgba(190, 201, 216, 0.7);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 12%, rgba(224, 185, 88, 0.15), transparent 30%),
    radial-gradient(circle at 8% 110%, rgba(141, 171, 218, 0.15), transparent 34%),
    linear-gradient(132deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 253, 0.92));
  box-shadow:
    0 18px 44px rgba(54, 69, 91, 0.1),
    inset 0 1px 0 #fff;
}

body .admin-page-heading h2 {
  color: #273442;
  font-size: 24px;
  letter-spacing: -0.03em;
}

body .admin-page-heading .primary-button {
  min-height: 40px;
  padding-inline: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #29313c, #171c23);
  box-shadow: 0 10px 24px rgba(30, 36, 45, 0.18);
}

body .admin-metric-grid {
  gap: 10px;
}

body .admin-metric-grid > div {
  position: relative;
  min-height: 108px;
  overflow: hidden;
  padding: 18px 19px;
  border: 1px solid rgba(204, 213, 224, 0.72);
  border-top: 1px solid rgba(204, 213, 224, 0.72);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 252, 0.92));
  box-shadow: 0 10px 26px rgba(55, 70, 91, 0.065);
}

body .admin-metric-grid > div::after {
  position: absolute;
  right: -22px;
  bottom: -28px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(198, 158, 68, 0.09);
  content: "";
}

body .admin-metric-grid strong {
  position: relative;
  z-index: 1;
  color: #263442;
  font-size: 24px;
}

body .admin-module-switch {
  gap: 4px;
  padding: 6px;
  border: 0;
  border-radius: 19px;
  background: rgba(223, 230, 239, 0.66);
  box-shadow:
    inset 0 0 0 1px rgba(191, 201, 214, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body .admin-module-switch button {
  min-height: 64px;
  border-radius: 15px;
}

body .admin-module-switch button:hover {
  background: rgba(255, 255, 255, 0.64);
}

body .admin-module-switch button.active {
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 10px 24px rgba(57, 70, 91, 0.11),
    inset 0 1px 0 #fff;
}

body .admin-module-switch button i {
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.66);
}

body .admin-module-switch button.active i {
  color: #58400a;
  background: linear-gradient(145deg, #f8df91, #e8b637);
  box-shadow: 0 6px 14px rgba(185, 132, 24, 0.18);
}

body .admin-page [data-admin-module-panel].panel {
  overflow: hidden;
  border-color: rgba(202, 211, 223, 0.7);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 18px 44px rgba(55, 70, 91, 0.08),
    inset 0 1px 0 #fff;
}

body .admin-page [data-admin-module-panel] > .panel-header h2,
body .admin-billing-panel .billing-management > header h2 {
  color: #293745;
  font-size: 19px;
  letter-spacing: -0.02em;
}

body .admin-code-form,
body .admin-department-form {
  padding: 16px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(243, 247, 251, 0.94), rgba(249, 250, 252, 0.98));
  box-shadow: inset 0 0 0 1px rgba(204, 214, 225, 0.78);
}

body .admin-code-form input,
body .admin-code-form select,
body .admin-department-form input,
body .admin-filter-row input,
body .admin-filter-row select,
body .admin-user-table td > select {
  border-color: transparent;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(195, 205, 218, 0.82),
    0 2px 6px rgba(56, 70, 88, 0.035);
}

body .admin-code-form input:focus,
body .admin-code-form select:focus,
body .admin-department-form input:focus,
body .admin-filter-row input:focus,
body .admin-filter-row select:focus,
body .admin-user-table td > select:focus {
  border-color: transparent;
  outline: 0;
  box-shadow:
    inset 0 0 0 1.5px #c69a36,
    0 0 0 4px rgba(198, 154, 54, 0.1);
}

body .admin-list-toggle-row {
  justify-content: space-between;
  gap: 12px;
  margin-top: 17px;
  padding: 13px 150px 0 0;
  border-top-color: rgba(207, 215, 225, 0.72);
}

body .admin-online-summary {
  border-color: rgba(111, 188, 151, 0.3);
  color: #4e695d;
  background: linear-gradient(135deg, rgba(238, 250, 243, 0.96), rgba(249, 252, 250, 0.98));
  box-shadow: 0 6px 16px rgba(38, 112, 79, 0.07);
}

body .admin-list-toggle {
  min-height: 36px;
  border-color: transparent;
  border-radius: 999px;
  color: #485767;
  background: #f2f4f7;
  box-shadow: inset 0 0 0 1px rgba(205, 213, 223, 0.78);
}

body .admin-list-toggle:hover {
  color: #2e3946;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(190, 199, 212, 0.9),
    0 7px 16px rgba(55, 68, 86, 0.08);
}

body .admin-page .membership-table-wrap {
  border: 1px solid rgba(207, 215, 224, 0.72);
  border-radius: 16px;
  background: #fff;
}

body .admin-page .membership-table {
  border-collapse: separate;
  border-spacing: 0;
}

body .admin-page .membership-table th {
  padding: 12px 14px;
  border-bottom-color: #e1e6ec;
  color: #778391;
  background: #f4f6f9;
  font-size: 10px;
  letter-spacing: 0.02em;
}

body .admin-page .membership-table td {
  padding: 14px;
  border-bottom-color: #edf0f4;
  color: #3c4a58;
}

body .admin-page .membership-table tbody tr {
  transition: background 150ms ease;
}

body .admin-page .membership-table tbody tr:hover td {
  background: #fafbfd;
}

body .admin-page .admin-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(145deg, #2b9a95, #177b7b);
  box-shadow: 0 7px 15px rgba(28, 130, 128, 0.16);
}

body .admin-page .admin-user-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(72px, 1fr));
  gap: 6px;
  width: 184px;
  min-width: 184px;
}

body .admin-page .admin-table-button {
  width: 100%;
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  color: #3e5960;
  background: #edf4f4;
  box-shadow: none;
  font-size: 10px;
  font-weight: 700;
  transition: transform 140ms ease, color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

body .admin-page .admin-table-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 13px rgba(58, 72, 91, 0.11);
}

body .admin-page .admin-table-button.confirm {
  color: #176545;
  background: #e3f3ea;
}

body .admin-page .admin-table-button.membership {
  color: #72500c;
  background: #faedc7;
}

body .admin-page .admin-table-button.danger {
  color: #a34848;
  background: #f9eaea;
}

body .admin-page .admin-table-button.permanent-delete {
  color: #a42f38;
  background: #f8e3e5;
  font-weight: 800;
}

body .admin-page .admin-table-button.permanent-delete:hover:not(:disabled) {
  color: #fff;
  background: #b93f49;
}

body .admin-page .admin-table-button:focus-visible {
  outline: 3px solid rgba(190, 145, 42, 0.28);
  outline-offset: 2px;
}

body .admin-page .admin-department-table td:nth-child(5) > strong {
  color: #485867;
  font: 700 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}

body .admin-page .admin-department-table td:nth-child(5) .admin-table-button,
body .admin-page .admin-department-table td:nth-child(7) .admin-table-button {
  width: auto;
  margin-top: 6px;
}

body .admin-billing-panel .billing-management > header {
  padding: 19px 21px;
  border: 0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 10%, rgba(224, 184, 83, 0.15), transparent 32%),
    linear-gradient(135deg, #f7f9fc, #eef3f8);
  box-shadow: inset 0 0 0 1px rgba(201, 211, 223, 0.72);
}

body .admin-billing-panel .billing-management-metrics article {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, #f6f8fa);
  box-shadow:
    inset 0 0 0 1px rgba(207, 215, 224, 0.76),
    0 8px 20px rgba(55, 70, 90, 0.05);
}

body .admin-billing-panel .billing-management-config > .panel,
body .admin-billing-panel .billing-customer-panel,
body .admin-billing-panel .billing-review-panel,
body .admin-billing-panel .billing-agent-summary-panel {
  border-color: rgba(205, 214, 224, 0.74);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(55, 69, 88, 0.055);
}

body .admin-billing-panel .billing-customer-panel .panel-header::after {
  align-self: flex-start;
  padding: 7px 11px;
  border-radius: 999px;
  color: #6f541b;
  background: #f9edcd;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  content: "余额与 Token 独立核算";
}

body .admin-billing-panel .billing-row-actions {
  grid-template-columns: 72px 54px minmax(74px, auto);
  gap: 6px;
  min-width: 212px;
}

body .admin-billing-panel .billing-row-actions input {
  width: 72px;
  min-height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 10px;
  background: #f1f3f6;
  box-shadow: inset 0 0 0 1px #dfe4ea;
}

body .admin-billing-panel .billing-row-actions input:focus {
  outline: 0;
  box-shadow:
    inset 0 0 0 1.5px #c69a36,
    0 0 0 3px rgba(198, 154, 54, 0.1);
}

body .admin-billing-panel .billing-row-actions button {
  min-height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  color: #485665;
  background: #eef1f5;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}

body .admin-billing-panel .billing-row-actions button[data-billing-packing-save],
body .admin-billing-panel .billing-row-actions button[data-billing-department-packing-save] {
  color: #70500f;
  background: #f7e7b8;
}

body .admin-billing-panel .billing-row-actions button:hover {
  filter: brightness(0.98);
  transform: translateY(-1px);
}

body .admin-billing-panel .billing-department-fee-actions {
  grid-template-columns: 72px 58px;
  min-width: 136px;
}

@media (max-width: 1180px) {
  body .admin-page-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  body .admin-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body .admin-list-toggle-row {
    padding-right: 54px;
  }

  body .admin-page-heading {
    padding: 21px 19px;
    border-radius: 18px;
  }

  body .admin-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .admin-page [data-admin-module-panel].panel {
    border-radius: 18px;
  }

  body .admin-page .admin-user-actions {
    width: 170px;
    min-width: 170px;
  }

  body .admin-billing-panel .billing-customer-panel .panel-header::after {
    align-self: flex-start;
  }
}

@media (max-width: 460px) {
  body .admin-metric-grid {
    grid-template-columns: 1fr;
  }
}

/* Account notifications: three independent dialogs with server-side receipts. */
.account-notification-dialog {
  width: min(430px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: #fff;
}
.account-notification-dialog::backdrop {
  background: rgba(18, 20, 31, 0.62);
  backdrop-filter: blur(4px);
}
.account-notification-dialog[open] { animation: account-notification-enter 200ms ease-out; }
@keyframes account-notification-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.account-notification-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: calc(100vh - 32px);
  padding: 32px 30px 27px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 0%, rgba(145, 38, 86, 0.24), transparent 36%),
    linear-gradient(150deg, #241126, #351126 58%, #281021);
  box-shadow: 0 28px 70px rgba(42, 12, 32, 0.38);
  text-align: center;
}
.account-notification-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.09);
  font-size: 20px;
  cursor: pointer;
}
.account-notification-symbol {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 13px;
  place-items: center;
  border: 3px dashed #ff4e57;
  border-radius: 999px;
  color: #ff5b62;
  font-size: 25px;
  font-weight: 900;
}
.account-notification-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 13px;
  border: 1px solid rgba(255, 83, 91, 0.46);
  border-radius: 999px;
  color: #ff9a9f;
  background: rgba(125, 25, 55, 0.34);
  font-size: 11px;
  font-weight: 800;
}
.account-notification-card h2 {
  margin: 15px 0 6px;
  color: #fff;
  font-size: 23px;
  letter-spacing: -0.02em;
}
.account-notification-emphasis {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
}
.account-notification-emphasis strong {
  margin-left: 5px;
  color: #ff535b;
  font-size: 22px;
}
.account-notification-copy {
  width: 100%;
  padding: 15px;
  border: 1px solid rgba(255, 78, 87, 0.3);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(111, 23, 49, 0.24);
  text-align: left;
}
.account-notification-copy p {
  margin: 0;
  font-size: 12px;
  line-height: 1.75;
}
.account-notification-warning {
  margin-top: 10px !important;
  padding: 10px 11px;
  border: 1px solid rgba(255, 84, 92, 0.44);
  border-radius: 9px;
  color: #ffd3d5;
  background: rgba(145, 36, 50, 0.3);
  font-weight: 700;
}
.account-notification-card footer {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  gap: 10px;
  margin-top: 20px;
}
.account-notification-card footer button {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 11px;
  font-weight: 800;
  cursor: pointer;
}
.account-notification-later {
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.84);
  background: rgba(255, 255, 255, 0.07);
}
.account-notification-primary {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #ff3d4f, #ff7417);
  box-shadow: 0 10px 24px rgba(255, 71, 48, 0.25);
}
.account-balance-notification .account-notification-card,
.account-membership-notification .account-notification-card {
  background:
    radial-gradient(circle at 82% 2%, rgba(218, 174, 72, 0.25), transparent 34%),
    linear-gradient(150deg, #17202d, #20283a 58%, #171d2b);
  box-shadow: 0 28px 70px rgba(12, 20, 33, 0.38);
}
.account-balance-notification .account-notification-symbol,
.account-membership-notification .account-notification-symbol {
  border: 2px solid #dcb757;
  color: #efd88c;
}
.account-balance-notification .account-notification-symbol {
  font-size: 23px;
}
.account-membership-notification .account-notification-symbol {
  font-size: 13px;
  letter-spacing: 0.08em;
}
.account-balance-notification .account-notification-badge,
.account-membership-notification .account-notification-badge {
  border-color: rgba(224, 184, 83, 0.42);
  color: #f1d788;
  background: rgba(122, 91, 26, 0.25);
}
.account-balance-notification .account-notification-emphasis strong,
.account-membership-notification .account-notification-emphasis strong { color: #f1cf6a; }
.account-balance-notification .account-notification-copy,
.account-membership-notification .account-notification-copy {
  border-color: rgba(224, 184, 83, 0.28);
  background: rgba(100, 78, 31, 0.18);
}
.account-balance-notification .account-notification-warning,
.account-membership-notification .account-notification-warning {
  border-color: rgba(224, 184, 83, 0.36);
  color: #f6e8ba;
  background: rgba(128, 92, 23, 0.2);
}
.account-balance-notification .account-notification-primary,
.account-membership-notification .account-notification-primary {
  color: #2e240d;
  background: linear-gradient(135deg, #f4dd8a, #d9aa36);
  box-shadow: 0 10px 24px rgba(210, 163, 50, 0.2);
}
.account-announcement-notification { color: #172331; }
.account-announcement-notification .account-notification-card {
  align-items: flex-start;
  border-color: #d8e2ef;
  color: #172331;
  background:
    radial-gradient(circle at 90% 0%, rgba(79, 125, 229, 0.15), transparent 34%),
    linear-gradient(150deg, #fff, #f2f6fc);
  box-shadow: 0 28px 70px rgba(31, 54, 89, 0.28);
  text-align: left;
}
.account-announcement-notification .account-notification-close {
  color: #647389;
  background: rgba(48, 74, 111, 0.08);
}
.account-announcement-notification .account-notification-symbol {
  width: 46px;
  height: 46px;
  margin-bottom: 11px;
  border: 0;
  color: #fff;
  background: linear-gradient(145deg, #4178df, #6c55d9);
  font-size: 20px;
}
.account-announcement-notification .account-notification-badge {
  border-color: #bfd0f5;
  color: #345eb9;
  background: #eaf0ff;
}
.account-announcement-notification.is-maintenance .account-notification-symbol {
  background: linear-gradient(145deg, #c49222, #e56f35);
}
.account-announcement-notification.is-maintenance .account-notification-badge {
  border-color: #ead5a6;
  color: #8d6113;
  background: #fff5d8;
}
.account-announcement-notification .account-notification-card h2 {
  margin-top: 13px;
  color: #172331;
}
.account-notification-summary {
  margin: 0 0 14px;
  color: #68798d;
  font-size: 13px;
  line-height: 1.6;
}
.account-announcement-notification .account-notification-copy {
  max-height: min(330px, 43vh);
  overflow: auto;
  border-color: #dce4ef;
  color: #34465a;
  background: rgba(255, 255, 255, 0.8);
}
.account-announcement-content {
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.8;
}
.account-announcement-time {
  margin: 12px 0 0;
  color: #8290a1;
  font-size: 10px;
}
.account-announcement-notification footer { justify-content: flex-end; }
.account-announcement-notification .account-notification-primary {
  min-width: 118px;
  background: linear-gradient(135deg, #315fc1, #6a55d8);
}

/* Super-admin announcement composer. */
.admin-announcements-panel { padding: 22px; }
.admin-announcement-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.7fr);
  gap: 18px;
  margin-top: 18px;
}
.admin-announcement-form,
.admin-announcement-current {
  padding: 18px;
  border: 1px solid #d9e1eb;
  border-radius: 14px;
  background: #fff;
}
.admin-announcement-form-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 13px;
}
.admin-announcement-form-grid label {
  display: grid;
  gap: 7px;
  color: #536477;
  font-size: 11px;
  font-weight: 800;
}
.admin-announcement-form-grid input,
.admin-announcement-form-grid select,
.admin-announcement-form-grid textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid #ccd7e4;
  border-radius: 9px;
  color: #172331;
  background: #fbfcfe;
  font: inherit;
  font-weight: 600;
}
.admin-announcement-form-grid textarea {
  min-height: 170px;
  resize: vertical;
  line-height: 1.65;
}
.admin-announcement-wide { grid-column: 1 / -1; }
.admin-announcement-publish-note {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #ead8a6;
  border-radius: 10px;
  color: #77540f;
  background: #fff8e6;
}
.admin-announcement-publish-note > span {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #c6911e;
  font-weight: 900;
}
.admin-announcement-publish-note p,
.admin-announcement-publish-note small { display: block; margin: 0; }
.admin-announcement-publish-note small { margin-top: 3px; color: #9a772c; font-weight: 600; }
.admin-announcement-form footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 15px;
}
.admin-announcement-form footer .membership-order-message { margin: 0; }
.admin-announcement-current {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(155deg, #f7faff, #fff);
}
.admin-announcement-current > span,
.admin-announcement-history > span {
  color: #8795a8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
#adminAnnouncementCurrent {
  padding: 15px;
  border: 1px solid #d8e2ef;
  border-radius: 11px;
  background: #fff;
}
#adminAnnouncementCurrent strong,
#adminAnnouncementCurrent span,
#adminAnnouncementCurrent p { display: block; }
#adminAnnouncementCurrent strong { color: #172331; font-size: 15px; }
#adminAnnouncementCurrent span { margin-top: 6px; color: #5874a1; font-size: 10px; }
#adminAnnouncementCurrent p { margin: 9px 0 0; color: #65768a; font-size: 11px; line-height: 1.65; }
.admin-announcement-history { display: grid; gap: 8px; }
.admin-announcement-history article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-bottom: 1px solid #e6ebf2;
}
.admin-announcement-history article strong { color: #38495c; font-size: 11px; }
.admin-announcement-history article small { flex: 0 0 auto; color: #8b99aa; font-size: 9px; }

@media (max-width: 900px) {
  .admin-announcement-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .account-notification-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }
  .account-notification-card {
    max-height: calc(100dvh - 20px);
    padding: 27px 20px 21px;
    border-radius: 19px;
  }
  .account-notification-card footer { display: grid; grid-template-columns: 1fr 1fr; }
  .account-announcement-notification footer { display: flex; }
  .admin-announcements-panel { padding: 15px; }
  .admin-announcement-form-grid { grid-template-columns: 1fr; }
  .admin-announcement-title-field,
  .admin-announcement-wide { grid-column: auto; }
  .admin-announcement-form footer {
    align-items: stretch;
    flex-direction: column;
  }
}