:root {
  --nav: #101d29;
  --nav-hover: #2c3b47;
  --bg: #edf2f6;
  --panel: #ffffff;
  --ink: #15232e;
  --muted: #6d7d8c;
  --line: #d6e0e7;
  --brand: #14758d;
  --brand-dark: #0e596d;
  --good: #198754;
  --warn: #b7791f;
  --bad: #c0392b;
  --sidebar-width: 236px;
  --content-gap: clamp(10px, 1.1vw, 16px);
  --page-pad: clamp(12px, 1.6vw, 22px);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font: 14px "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 100vh;
  min-width: 0;
  padding: 16px 10px;
  background: var(--nav);
  color: white;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sidebar-head { padding: 0 6px; }
.logo {
  white-space: nowrap;
}
.brand-lockup {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f6fbff;
}
.brand-mark {
  flex: 0 0 50px;
  width: 50px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 1px solid rgba(211, 230, 239, .9);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f4fbff 100%);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .95);
}
.brand-mark img {
  display: block;
  width: 42px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(19, 37, 56, .18));
}
.brand-word {
  color: #f6fbff;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.account {
  color: #a9bdca;
  margin: 6px 0 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid #293b49;
  overflow-wrap: anywhere;
}
nav { display: grid; gap: 4px; }
nav button {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  background: transparent;
  color: #dce7ed;
  text-align: left;
  cursor: pointer;
}
nav button:hover, nav button.active { background: var(--nav-hover); }
.legacy { margin-top: auto; padding: 18px 6px 2px; }
.legacy a { color: #9dd4df; text-decoration: none; }
.logout-button { display: block; margin-top: 12px; color: #dce7ed; padding: 0; }

.auth-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth-card {
  width: min(440px, 100%);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 44px rgba(16, 29, 41, 0.12);
}
.auth-card h1 { margin: 0 0 6px; font-size: 28px; }
.auth-logo {
  display: block;
  width: min(220px, 100%);
  max-height: 58px;
  margin: 0 0 10px;
  object-fit: contain;
  object-position: left center;
}
.auth-card h2 { margin: 0 0 8px; font-size: 21px; }
.auth-card p { margin: 0 0 18px; color: var(--muted); line-height: 1.45; }
.auth-card form { display: grid; gap: 12px; }
.auth-card label { display: grid; gap: 6px; color: var(--muted); font-weight: 600; }
.auth-card input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); }
.auth-error { margin-bottom: 12px; padding: 10px 12px; border-radius: 6px; background: #fdecea; color: var(--bad); font-weight: 700; }

.app main {
  min-width: 0;
  width: 100%;
  padding: var(--page-pad);
}
.page-header {
  min-width: 0;
  margin-bottom: var(--content-gap);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.platform-admin-active .app { grid-template-columns: minmax(0, 1fr); }
.platform-admin-active .sidebar,
.platform-admin-active .page-header {
  display: none;
}
.platform-admin-active .app main {
  padding: clamp(14px, 1.5vw, 24px);
}
.platform-admin-active #connectAnotherStore,
.platform-admin-active #openStockUpdates,
.platform-admin-active #sync,
.platform-admin-active #scan {
  display: none;
}
.page-heading { min-width: 0; }
h1, h2, h3, p { margin-top: 0; }
.page-header h1 { margin-bottom: 4px; font-size: clamp(24px, 2.2vw, 30px); }
.page-header p { margin-bottom: 0; color: var(--muted); line-height: 1.4; }
.header-actions,
.toolbar,
.section-actions,
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.header-actions { flex: 0 0 auto; justify-content: flex-end; }
.back-button{padding:0;margin:0 0 5px;color:var(--brand);font-weight:700}.stock-workflow{display:flex;flex-direction:column;gap:5px;margin-bottom:var(--content-gap);background:#e9f6fa}.header-actions select{max-width:250px}

.primary, .secondary, .danger, .button {
  min-height: 38px;
  border-radius: 7px;
  padding: 9px 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  white-space: normal;
}
.primary { border: 1px solid var(--brand); background: var(--brand); color: white; }
.primary:hover { border-color: var(--brand-dark); background: var(--brand-dark); }
.button.disabled { border-color: #9cabb5; background: #9cabb5; cursor: not-allowed; }
.secondary { border: 1px solid var(--line); background: white; color: var(--ink); }
.secondary:hover { border-color: #aebdc8; background: #f8fafb; }
.danger { border: 1px solid #efb2aa; background: #fff1ef; color: var(--bad); }
.text { border: 0; padding: 4px; background: none; color: var(--brand); cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, .table-wrap:focus-visible {
  outline: 3px solid rgba(20, 117, 141, .25);
  outline-offset: 2px;
}

.metrics,
.overview-metric-grid {
  margin-bottom: var(--content-gap);
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 12px;
}
.overview-dashboard {
  display: grid;
  gap: var(--content-gap);
  margin-bottom: var(--content-gap);
}
.overview-metric-grid { margin-bottom: 0; }
.metric, .panel {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(20, 35, 46, .07);
}
.metric { padding: clamp(14px, 1.4vw, 18px); }
.metric span { display: block; margin-bottom: 7px; color: var(--muted); }
.metric strong { font-size: clamp(23px, 2vw, 28px); }
.overview-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(85, 189, 211, .25), transparent 34%),
    linear-gradient(135deg, #102033 0%, #16364d 58%, #1d667c 100%);
  color: white;
  box-shadow: 0 20px 50px rgba(16, 35, 50, .18);
}
.overview-hero h2 {
  margin: 3px 0 8px;
  font-size: clamp(26px, 2.5vw, 40px);
}
.overview-hero p {
  max-width: 820px;
  margin: 0;
  color: #cfe0e9;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.45;
}
.overview-hero .eyebrow {
  color: #8ed7e8;
  display: inline-block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.overview-health {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: min(390px, 100%);
}
.overview-metric {
  border-radius: 14px;
  padding: 18px;
}
.overview-metric.good { border-left: 4px solid var(--good); }
.overview-metric.warn { border-left: 4px solid var(--warn); }
.metric-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.metric-head span { margin: 0; }
.metric-head .text { padding: 0; font-weight: 700; }
.overview-metric p {
  min-height: 38px;
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.35;
}
.progress-bar {
  height: 8px;
  margin-top: 14px;
  border-radius: 999px;
  background: #e8eef3;
  overflow: hidden;
}
.progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}
.progress-bar.good span { background: var(--good); }
.progress-bar.warn span { background: var(--warn); }
.attention-list { display: grid; gap: 10px; }
.attention-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f1d8a7;
  border-radius: 10px;
  background: #fffaf0;
}
.attention-item b,
.success-state b { display: block; margin-bottom: 4px; }
.attention-item span,
.success-state span { color: var(--muted); line-height: 1.35; }
.success-state {
  padding: 16px;
  border: 1px solid #cfe9db;
  border-radius: 12px;
  background: #f1fbf5;
}
.split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: var(--content-gap); }
.panel { padding: clamp(12px, 1.2vw, 16px); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.panel h2, .panel-head h2 { margin-bottom: 14px; font-size: 20px; }

.toolbar { margin-bottom: 10px; }
.product-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(155px, 205px)) auto auto; gap: 8px; }
.orders-toolbar-stack { display: grid; gap: 10px; }
.orders-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.orders-toolbar > * { margin: 0; }
.orders-toolbar-top input {
  flex: 1 1 420px;
  min-width: min(420px, 100%);
}
.orders-toolbar-top .primary {
  flex: 0 0 auto;
  min-width: 120px;
}
.orders-toolbar-bottom > select,
.orders-toolbar-bottom > input {
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 190px;
}
.orders-toolbar .privacy-toggle {
  min-width: max-content;
  width: auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  white-space: nowrap;
  overflow: visible;
  flex: 0 0 auto;
}
.orders-toolbar-bottom .privacy-toggle { margin-left: auto; }
.export-card { max-width: 1160px; }
.export-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--content-gap);
  margin: var(--content-gap) 0;
}
.export-controls {
  display: grid;
  gap: 12px;
  margin-top: var(--content-gap);
}
.export-controls > label { max-width: 360px; }
.export-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.export-section-group {
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}
.export-section-group h3 {
  margin: 0 0 8px;
  font-size: 15px;
}
.export-section-group label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 7px 0;
  font-size: 14px;
}
.export-section-group input {
  width: auto;
  margin-top: 2px;
}
.muted { color: var(--muted); }
.danger-help { background: #fff7f5; border-color: #ffd4cf; }
.export-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.export-counts span {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
}
.export-counts b { display: block; color: var(--muted); font-size: 12px; }
.platform-admin-shell {
  background: linear-gradient(135deg, #102033 0%, #173f55 62%, #1d5d72 100%);
  border-radius: 18px;
  padding: clamp(16px, 1.7vw, 24px);
  color: white;
  box-shadow: 0 20px 55px rgba(16, 32, 51, .22);
}
.platform-admin-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.platform-admin-head h2 {
  margin: 0;
  font-size: 30px;
}
.platform-admin-head p {
  margin: 4px 0 0;
  color: #cde3ed;
}
.platform-admin-brand { min-width: 0; }
.platform-eyebrow {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #bfeaf5;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.platform-admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 16px;
}
.platform-admin-nav button {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 9px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.08);
  color: white;
  font-weight: 700;
  cursor: pointer;
}
.platform-admin-nav button.active {
  background: white;
  color: #102033;
  border-color: white;
}
.platform-admin-content {
  color: var(--text);
}
.platform-admin-content .panel {
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(6, 18, 30, .16);
}
.platform-admin-content table {
  background: white;
}
.platform-admin-content th {
  background: #f7fafc;
  color: #647586;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.platform-admin-content td {
  vertical-align: middle;
}
.client-store-list {
  min-width: 360px;
  display: grid;
  gap: 8px;
}
.client-store-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fbfd;
}
.client-store-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.admin-support-tools {
  margin-bottom: 14px;
}
.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  align-items: end;
}
.admin-form-grid.compact label {
  margin: 0;
}
.admin-form-grid .span-2 {
  grid-column: span 2;
}
.support-message-preview {
  max-width: 360px;
  white-space: normal;
  word-break: break-word;
}
.support-detail-row td {
  background: #f8fbfd;
}
.support-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  align-items: start;
}
.support-detail-grid textarea,
.admin-form-grid textarea {
  width: 100%;
  resize: vertical;
}
.support-actions {
  display: flex;
  align-items: end;
}
.support-thread {
  display: grid;
  gap: 8px;
}
.support-thread-item,
.announcement-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
}
.announcement-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.announcement-row p {
  margin: 8px 0 0;
  white-space: normal;
  word-break: break-word;
}
.admin-metrics .admin-card {
  cursor: pointer;
  border-left: 4px solid var(--brand);
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 126px;
}
.admin-refresh-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d9edf5;
  margin: -2px 0 12px;
  font-size: 13px;
  font-weight: 700;
}
.admin-refresh-note::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #77d49a;
  box-shadow: 0 0 0 4px rgba(119, 212, 154, .14);
}
.admin-card .admin-card-value {
  display: block;
  color: var(--ink);
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1;
  font-weight: 800;
  min-height: 38px;
}
.admin-card small {
  color: var(--muted);
  line-height: 1.35;
}
.plan-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.plan-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbfd;
  padding: 14px;
  display: grid;
  gap: 6px;
}
.plan-card span {
  color: var(--brand);
  font-weight: 800;
}
.admin-subscription-controls {
  display: grid;
  gap: 8px;
  min-width: 220px;
}
.admin-subscription-controls input,
.admin-subscription-controls textarea {
  width: 100%;
}
.admin-empty {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: #f8fbfd;
  color: var(--muted);
  text-align: center;
}
.admin-empty b {
  color: var(--ink);
  font-size: 16px;
}
.admin-backup-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.4fr) minmax(260px, 0.8fr);
  gap: 14px;
  margin-bottom: 14px;
}
.admin-backup-card .form-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 1fr);
  gap: 10px;
  align-items: end;
}
.checkline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}
.checkline input {
  width: auto;
  min-height: auto;
  flex: 0 0 auto;
}
.admin-customer-toggle span {
  line-height: 1.3;
}
.warning-text {
  color: #9b4a00;
  font-size: 13px;
}
.manifest-box {
  max-height: 360px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b1722;
  color: #e8f3f7;
  white-space: pre-wrap;
}
@media (max-width: 900px) {
  .admin-backup-grid,
  .admin-backup-card .form-grid {
    grid-template-columns: 1fr;
  }
}
.orders-toolbar .privacy-toggle input { flex: 0 0 16px; }
.orders-toolbar .privacy-toggle span { white-space: nowrap; }
.orders-toolbar .primary,
.orders-toolbar .secondary,
.orders-toolbar .danger,
.orders-toolbar .button {
  min-width: 92px;
}
.update-toolbar { justify-content: flex-start; }
.update-filter-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(190px, 260px) minmax(160px, 220px) auto; gap: 8px; }
.table-count { margin: -2px 0 9px; color: var(--muted); font-size: 13px; font-weight: 600; }
.pagination { margin: -2px 0 10px; display: flex; align-items: center; gap: 10px; }
.pagination span { color: var(--muted); font-weight: 600; }
.compact-metrics { grid-template-columns: repeat(6, minmax(105px, 1fr)); gap: 8px; margin-bottom: 10px; }
.compact-metrics .metric { padding: 9px 11px; box-shadow: none; }
.compact-metrics .metric span { margin-bottom: 4px; font-size: 12px; }
.compact-metrics .metric strong { font-size: 20px; }
.section-actions { margin-bottom: 14px; }
.section-tabs {
  margin: 0 0 14px;
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: #dfe8ee;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.section-tabs button {
  flex: 0 1 190px;
  min-height: 38px;
  background: white;
  color: var(--ink);
  border-color: #c7d5df;
}
.section-tabs button.active {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
  box-shadow: 0 8px 18px rgba(20, 117, 141, .18);
}
input, select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 11px;
  background: white;
  color: var(--ink);
}
input[type="checkbox"], input[type="radio"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--brand);
  vertical-align: middle;
}

.table-wrap {
  width: 100%;
  max-width: 100%;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
}
.internal-table {
  max-height: calc(100dvh - 215px);
  overflow: auto;
  overscroll-behavior: contain;
}
.mapping-table { max-height: min(56dvh, 620px); }
.internal-table::-webkit-scrollbar { width: 12px; height: 12px; }
.table-wrap::-webkit-scrollbar { height: 12px; }
.table-wrap::-webkit-scrollbar-track { background: #e7eef3; }
.table-wrap::-webkit-scrollbar-thumb { border: 3px solid #e7eef3; border-radius: 8px; background: #78909c; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--brand); }
.scroll-hint { display: none; margin: -3px 0 8px; color: var(--muted); font-size: 12px; }
table { width: 100%; min-width: 920px; border-collapse: collapse; }
th, td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
th:first-child, td:first-child { padding-left: 18px; }
th:last-child, td:last-child { padding-right: 18px; }
th:has(input[type="checkbox"]), td:has(input[type="checkbox"]) {
  width: 54px;
  min-width: 54px;
  text-align: center;
}
th { position: sticky; top: 0; z-index: 1; background: #f8fafb; color: var(--muted); font-size: 12px; }
tbody tr:last-child td { border-bottom: 0; }
.product { min-width: 260px; display: flex; gap: 12px; align-items: center; }
.row-expand { flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--brand); font-weight: 800; cursor: pointer; }
.variation-detail-row > td { padding: 0 18px 14px; background: #f8fafb; }
.inline-variations { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.inline-variation { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.4fr) repeat(3, minmax(120px, auto)); gap: 12px; align-items: center; padding: 8px; border-bottom: 1px solid var(--line); }
.inline-variation:last-child { border-bottom: 0; }
.orders-table table { min-width: 1380px; }
.orders-table th:first-child, .orders-table .sticky-order-product { position: sticky; left: 0; z-index: 2; background: white; }
.orders-table th:first-child { z-index: 3; background: #f8fafb; }
.orders-table tbody tr:hover td { background: #f8fbfd; }
.orders-table td { vertical-align: middle; }
.order-product-cell { min-width: 310px; }
.order-dialog { width: min(1180px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.order-dialog-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 18px 20px 14px;
  background: white;
  border-bottom: 1px solid var(--line);
}
.order-dialog-body {
  max-height: calc(100vh - 140px);
  padding: 18px 20px 22px;
  overflow: auto;
}
.order-actions-panel {
  margin-bottom: 16px;
  display: grid;
  gap: 12px;
}
.order-action-group {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafb;
}
.order-action-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.order-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.order-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 12px 0 18px; }
.order-detail-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
.order-detail-grid textarea { resize: vertical; min-height: 88px; padding: 10px 12px; }
.order-detail-grid .primary { margin-top: 8px; justify-self: start; }
.order-items-heading { margin: 10px 0 12px; }
.order-items { display: grid; gap: 12px; }
.order-item-card { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafb; }
.order-item-head {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.order-item-image {
  width: 96px;
  height: 96px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  object-fit: contain;
}
.order-thumb {
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: white;
}
.order-item-summary { min-width: 0; }
.order-item-summary b { display: block; margin-bottom: 4px; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.order-item-detail-grid {
  margin: 14px 0 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}
.detail-row {
  display: grid;
  grid-template-columns: minmax(108px, auto) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.detail-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.detail-value {
  min-width: 0;
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.multiline-value {
  display: grid;
  gap: 2px;
  justify-items: end;
  line-height: 1.45;
}
.order-item-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.product-table table { min-width: 1320px; }
.product-table td:nth-child(4), .product-table td:nth-child(6), .product-table td:nth-child(7), .product-table td:nth-child(8) { min-width: 110px; }
.product > div { min-width: 0; }
.thumb { flex: 0 0 52px; width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 6px; background: #f1f4f6; object-fit: cover; }
.thumb-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #f4f7f9;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .02em;
}
.thumb-sm { flex: 0 0 52px; width: 52px; height: 52px; }
.thumb-lg { width: 96px; height: 96px; }
.image-placeholder { min-height: 88px; margin-bottom: 10px; display: grid; place-items: center; padding: 12px; border: 1px dashed var(--line); border-radius: 7px; background: #f8fafb; color: var(--muted); text-align: center; font-size: 12px; }
.product b { display: block; max-width: 380px; overflow-wrap: anywhere; }
.sub { margin-top: 4px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  width: auto;
  max-width: 100%;
  padding: 5px 10px;
  background: #e9f4f7;
  color: var(--brand-dark);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}
.badge.good { background: #eaf7ef; color: #19633c; }
.badge.neutral { background: #edf2f6; color: #4d6272; }
.badge.warn { background: #fff5dc; color: #855b13; }
.badge.bad { background: #fdebea; color: #9e2f27; }
.empty { color: var(--muted); }
div.empty { padding: 18px 0; }
td.empty { padding: 22px 18px; line-height: 1.45; }
.hidden { display: none !important; }
.task-banner {
  margin-bottom: var(--content-gap);
  padding: 8px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 1px solid #e6c36a;
  border-radius: 8px;
  background: #fff8df;
  box-shadow: 0 8px 20px rgba(20, 35, 46, .06);
}
.task-banner div { min-width: 0; display: grid; gap: 3px; }
.task-banner span { color: var(--muted); overflow-wrap: anywhere; }
.admin-client-banner {
  margin-bottom: var(--content-gap);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #9fd6e4;
  border-radius: 10px;
  background: linear-gradient(135deg, #e8f7fb, #f8fdff);
  box-shadow: 0 12px 28px rgba(31, 126, 146, .12);
}
.admin-client-banner div { min-width: 0; display: grid; gap: 3px; }
.admin-client-banner b { color: var(--ink); }
.admin-client-banner span { color: var(--muted); overflow-wrap: anywhere; }
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #ead69d;
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
button[disabled] { cursor: not-allowed; opacity: .55; }
.update-help { margin-bottom: 14px; color: var(--muted); line-height: 1.5; }
.update-help b { color: var(--ink); }
.status-legend { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; }
.scan-history { margin-top: 8px; }
.scan-history-row { padding: 6px 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; border-bottom: 1px solid var(--line); font-size: 12px; }

.supplier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.supplier-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.supplier-card h2 { margin: 5px 0 14px; }
.supplier-card p { color: var(--muted); overflow-wrap: anywhere; }
.supplier-card p a { color: var(--brand-dark); }
.supplier-card .code { color: var(--brand); font-weight: 700; }
.supplier-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.supplier-card > button { margin-top: 12px; }
.mapping-wizard, .manage-tabs {
  margin-bottom: 14px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-gutter: stable;
}
.mapping-wizard button, .manage-tabs button {
  flex: 1 0 170px;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: var(--ink);
  cursor: pointer;
}
.mapping-wizard button b { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: #e8f2f5; color: var(--brand-dark); }
.mapping-wizard button.active, .manage-tabs button.active { border-color: var(--brand); background: var(--brand); color: white; }
.mapping-wizard button.active b { background: white; color: var(--brand-dark); }
.manage-pane { min-width: 0; }
.scan-history-source { margin-bottom: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; }
.scan-history-source h4 { margin-bottom: 6px; overflow-wrap: anywhere; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--content-gap); align-items: start; }
.mapping-import-top { margin-bottom: var(--content-gap); }
.mapping-supplier { display: grid; gap: 6px; margin: 14px 0; color: var(--muted); font-weight: 600; }
.mapping-review { padding: 0; overflow: hidden; }
.mapping-review .panel-head { padding: 18px 18px 0; }
.mapping-review .scroll-hint { padding: 0 18px; }
.review-toolbar { padding: 0 18px; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(170px, 230px) auto; }
.mapping-pagination { padding: 10px 18px 14px; margin: 0; }
.bad-text { color: var(--bad); }
details { margin-top: 12px; }
summary { color: var(--brand-dark); font-weight: 600; cursor: pointer; }
.credential-form { display: grid; gap: 12px; }
.credential-form label { display: grid; gap: 6px; color: var(--muted); font-weight: 600; }
.credential-form button { justify-self: start; }
.setup-help { display: grid; gap: 6px; margin-top: 16px; padding: 12px; border-radius: 7px; background: #f3f8fa; color: var(--muted); line-height: 1.4; }
.setup-help b { color: var(--ink); }
.rule-result { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: #f7fbfc; color: var(--ink); overflow-wrap: anywhere; }
.rule { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rule span { color: var(--muted); line-height: 1.4; }
.status-line { min-width: 0; display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.status-line b { text-align: right; overflow-wrap: anywhere; }

.help {
  display: inline-flex;
  width: 17px;
  height: 17px;
  align-items: center;
  justify-content: center;
  border: 1px solid #afc0cb;
  border-radius: 50%;
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 700;
  cursor: help;
}

dialog {
  width: min(960px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  margin: auto;
  border: 0;
  border-radius: 9px;
  padding: clamp(14px, 1.5vw, 20px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
  overflow: auto;
}
dialog:not([open]) { display: none; }
dialog::backdrop { background: rgba(7, 18, 28, .65); }
.product-dialog {
  width: min(1280px, calc(100vw - 32px));
  height: min(92vh, 980px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.product-dialog > .dialog-head {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 18px 20px 12px;
  background: white;
  border-bottom: 1px solid var(--line);
}
.product-dialog-top {
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 10px 20px 0;
  background: white;
}
.product-dialog > .task-banner {
  margin: 10px 20px 0;
}
.product-dialog-scroll {
  min-height: 0;
  padding: 10px 20px 20px;
  overflow: auto;
}
.product-dialog .manage-pane[data-manage-pane="mapping"]:not(.hidden) {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.product-dialog .manage-pane[data-manage-pane="mapping"] #variationList {
  max-height: calc(92vh - 292px);
  overflow: auto;
  padding-right: 8px;
  scrollbar-gutter: stable;
}
.supplier-dialog { width: min(760px, calc(100vw - 32px)); }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dialog-product-head { min-width: 0; display: flex; gap: 14px; align-items: center; }
.dialog-product-image { flex: 0 0 68px; width: 68px; height: 68px; border: 1px solid var(--line); border-radius: 7px; object-fit: contain; background: white; }
.dialog-title { min-width: 0; }
.dialog-title h2 { margin-bottom: 4px; overflow-wrap: anywhere; }
.dialog-title p { margin-bottom: 0; color: var(--muted); line-height: 1.4; }
.icon { flex: 0 0 34px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #edf2f6; font-size: 18px; cursor: pointer; }
.source-bar {
  margin: 12px 0;
  padding: 11px;
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(240px, 1fr) auto;
  gap: 10px;
  align-items: end;
  background: #f5f8fa;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.source-bar label, .variation label, .form-grid label { min-width: 0; display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.source-item { padding: 9px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.source-result { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 11px; align-items: center; }
.source-result.no-image { grid-template-columns: minmax(0, 1fr) auto; }
.source-image { width: 76px; height: 76px; border: 1px solid var(--line); border-radius: 7px; object-fit: contain; background: white; }
.source-meta { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; color: var(--muted); font-size: 12px; }
.source-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 310px; }
.source-actions > * { min-height: 34px; padding: 7px 10px; }
.review-image { display: block; width: min(180px, 100%); max-height: 180px; margin: 8px 0 12px; border: 1px solid var(--line); border-radius: 7px; object-fit: contain; background: white; }
.review-product-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.review-product-head .review-image { width: 110px; height: 110px; margin: 0; }
.section-heading { margin-top: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-heading h3 { margin-bottom: 8px; }
.section-heading span { color: var(--muted); font-size: 12px; }
.mapping-heading { align-items: flex-start; }
.inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.variation {
  display: grid;
  grid-template-columns: minmax(250px, 1.1fr) minmax(320px, 1.4fr) repeat(3, minmax(74px, 90px)) auto;
  gap: 10px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.variation-name { min-width: 0; }
.variation-name b { display: block; overflow-wrap: anywhere; }
.variation-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.variant-thumb {
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: contain;
  background: white;
}
.variant-preview {
  margin-top: 7px;
  padding: 7px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid #e4edf2;
  border-radius: 8px;
  background: #f8fafb;
}
.variant-preview div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.variant-preview b,
.variant-preview span { overflow-wrap: anywhere; }
.supplier-map-cell select { min-width: 0; }
.hide-variation-images .variation-summary,
.hide-variation-images .variant-preview {
  grid-template-columns: minmax(0, 1fr);
}
.hide-variation-images .variant-thumb,
.hide-variation-images .thumb-placeholder {
  display: none;
}
.side-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.variation-name .badge { margin-top: 6px; }
.pack-warning { display: block; margin-top: 6px; color: var(--bad); font-size: 12px; font-weight: 700; }
.pack-warning.pack-ok { color: var(--good); }
.form-grid { margin: 12px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.schedule-active-grid {
  margin: 12px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.schedule-active-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafb;
  display: grid;
  gap: 5px;
}
.schedule-active-card small,
.schedule-active-card span { color: var(--muted); overflow-wrap: anywhere; }
.schedule-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.schedule-row > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.panel-inline { margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; }
.panel-inline h3 { margin-bottom: 6px; }

.compact-details > summary {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  list-style-position: inside;
}
.compact-details[open] > summary { margin-bottom: 10px; }
.mapping-field-help { margin: 0 0 6px; }
.compact-task {
  margin: 10px 0;
  padding: 7px 10px;
  box-shadow: none;
}

.settings-tabs-wrap {
  margin-bottom: 14px;
  display: grid;
  gap: 10px;
}
.settings-tabs-group {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.55);
}
.settings-tabs-group > span {
  display: block;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.advanced-tabs {
  background: #f8fafb;
}
.settings-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.settings-tabs button {
  flex: 0 1 auto;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 14px;
  background: white;
  color: var(--ink);
  cursor: pointer;
}
.settings-tabs button.active { border-color: var(--brand); background: var(--brand); color: white; }
.settings-content { max-width: min(1280px, 100%); }
.settings-pane { min-width: 0; }
.settings-overview-grid,
.settings-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: var(--content-gap);
}
.settings-summary-card,
.supplier-settings-card,
.store-card,
.mini-status-card,
.settings-example-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  box-shadow: 0 8px 20px rgba(20, 35, 46, .05);
}
.settings-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.settings-card-head h3 { margin: 0; }
.settings-card-lines { margin-bottom: 12px; }
.settings-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}
.settings-status-grid.compact { grid-template-columns: minmax(0, 1fr); }
.callback-card {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafb;
}
.copy-row {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.copy-row:last-child { border-bottom: 0; }
.copy-row code,
.deployment-item code {
  min-width: 0;
  padding: 5px 7px;
  border-radius: 6px;
  background: #eaf1f5;
  color: var(--brand-dark);
  overflow-wrap: anywhere;
}
.warning-box {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid #f0c36d;
  border-radius: 8px;
  background: #fff8e6;
  color: #79510d;
  line-height: 1.45;
  font-weight: 600;
}
.mini-status-card {
  display: grid;
  gap: 6px;
  box-shadow: none;
}
.mini-status-card span { color: var(--muted); font-size: 12px; font-weight: 700; }
.supplier-settings-card {
  margin-bottom: 12px;
}
.supplier-settings-card label {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  color: var(--muted);
  font-weight: 700;
}
.settings-example-panel {
  margin: 14px 0;
  background: #f8fbfd;
  box-shadow: none;
}
.stock-rule-form label span {
  color: var(--muted);
  font-weight: 400;
  line-height: 1.35;
}

.admin-user-form {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: #f8fafb;
  margin: 14px 0;
}

.admin-users-table input,
.admin-users-table select {
  width: 100%;
  min-width: 150px;
}

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.inline-check input {
  width: auto;
  min-width: 0;
}

.store-permission-list {
  display: grid;
  gap: 8px;
  min-width: 330px;
}

.store-permission {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 80px repeat(3, auto);
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

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

.store-permission label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 12px;
}

.store-permission input {
  width: auto;
  min-width: 0;
}

.deployment-checklist {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.deployment-item {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.deployment-item p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.deployment-item.block {
  border-color: #f1b3aa;
  background: #fff7f5;
}

.deployment-item.warn {
  border-color: #f5d58a;
  background: #fffaf0;
}
.stock-rule-form label { font-weight: 600; }

.mapping-review-dialog { width: min(1120px, calc(100vw - 32px)); }
.push-preview-dialog { width: min(1240px, calc(100vw - 32px)); }
.push-preview-table { max-height: min(58dvh, 640px); margin: 14px 0; border: 1px solid var(--line); border-radius: 8px; }
.confirm-check { margin: 12px 0; display: flex; align-items: center; gap: 9px; font-weight: 700; line-height: 1.4; }
.confirm-check input { flex: 0 0 16px; }
.review-grid { margin: 18px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.review-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; }
.review-card h3 { margin-bottom: 10px; }
.review-card a { color: var(--brand-dark); overflow-wrap: anywhere; }
.review-card label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}
.review-card textarea,
.review-card select {
  width: 100%;
  min-width: 0;
}
.review-card textarea { margin-bottom: 12px; }
.review-card > .primary:last-child,
.review-card > .secondary:last-child,
.review-card > .danger:last-child {
  margin-top: 10px;
}
.review-candidates { margin: 16px 0; }
.review-candidates label { display: grid; gap: 6px; color: var(--muted); font-weight: 600; }
#mappingCandidateDetails { margin-top: 12px; }

#toast {
  position: fixed;
  z-index: 1000;
  top: 14px;
  right: 14px;
  max-width: min(380px, calc(100vw - 28px));
  display: none;
  align-items: flex-start;
  gap: 12px;
  border-radius: 7px;
  padding: 9px 13px;
  background: #102330;
  color: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  overflow-wrap: anywhere;
}
#toast.error { background: #a93226; }
#toastMessage { min-width: 0; flex: 1 1 auto; line-height: 1.4; }
#toastClose {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: white;
  cursor: pointer;
}

@media (max-width: 1180px) {
  :root { --sidebar-width: 210px; }
  .metrics, .overview-metric-grid { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .compact-metrics { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .product-toolbar { grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(160px, 210px)); }
  .product-toolbar button { justify-self: start; }
  .orders-toolbar-top input { flex-basis: 280px; min-width: min(280px, 100%); }
  .orders-toolbar-bottom .privacy-toggle { margin-left: 0; }
  .update-filter-toolbar { grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(160px, 220px)); }
  .update-filter-toolbar button { justify-self: start; }
  .variation { grid-template-columns: minmax(180px, 1fr) minmax(230px, 1.3fr) repeat(2, 82px); }
  .variation label:nth-of-type(4), .variation button { grid-column: auto; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; padding: 16px; overflow: visible; }
  .sidebar-head { padding: 0; }
  .account { margin-bottom: 12px; padding-bottom: 12px; }
  nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  nav button { text-align: center; }
  .legacy { margin-top: 10px; padding: 8px 0 0; }
  .split, .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .overview-hero { align-items: flex-start; flex-direction: column; }
  .overview-health { justify-content: flex-start; min-width: 0; }
  .settings-status-grid { grid-template-columns: minmax(0, 1fr); }
  .internal-table { max-height: 65dvh; }
  .product-toolbar, .update-filter-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orders-toolbar-top,
  .orders-toolbar-bottom { align-items: stretch; }
  .orders-toolbar-top > *,
  .orders-toolbar-bottom > * {
    flex: 1 1 calc(50% - 10px);
    max-width: none;
  }
  .orders-toolbar-bottom .privacy-toggle {
    justify-content: flex-start;
    min-width: 100%;
  }
  .order-detail-grid, .order-item-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .inline-variation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scroll-hint { display: block; }
  .source-bar { grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); }
  .source-bar button { grid-column: 1 / -1; justify-self: start; }
  .source-result { grid-template-columns: 68px minmax(0, 1fr); align-items: start; }
  .source-result.no-image { grid-template-columns: minmax(0, 1fr); }
  .source-image { width: 68px; height: 68px; }
  .source-actions { grid-column: 1 / -1; max-width: none; justify-content: flex-start; }
  .variation { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) repeat(3, minmax(66px, 1fr)); }
  .variation button { grid-column: 1 / -1; justify-self: start; }
  #toast { top: auto; right: 16px; bottom: 16px; left: 16px; max-width: none; }
}

@media (max-width: 680px) {
  .page-header { align-items: stretch; flex-direction: column; }
  .header-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-actions > * { width: 100%; }
  .metrics, .overview-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compact-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-toolbar { grid-template-columns: minmax(0, 1fr); }
  .orders-toolbar-top > *,
  .orders-toolbar-bottom > * { flex: 1 1 100%; }
  .update-filter-toolbar { grid-template-columns: minmax(0, 1fr); }
  .product-toolbar button { width: 100%; }
  .pagination { justify-content: space-between; }
  .update-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .update-toolbar .danger { grid-column: 1 / -1; }
  .source-bar, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .source-result { grid-template-columns: minmax(0, 1fr); }
  .source-image { width: 90px; height: 90px; }
  .source-actions { width: 100%; }
  .source-actions > * { flex: 1 1 130px; }
  .source-result button { justify-self: start; }
  .review-toolbar, .review-grid { grid-template-columns: minmax(0, 1fr); }
  .review-toolbar button { width: 100%; }
  .source-bar button { width: 100%; }
  .attention-item { grid-template-columns: minmax(0, 1fr); }
  .attention-item button { width: 100%; }
  .section-heading { display: block; }
  .variation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variation-name, .variation label:first-of-type, .variation button { grid-column: 1 / -1; }
  .variation button { width: 100%; }
  .status-line { grid-template-columns: minmax(100px, .7fr) minmax(0, 1fr); }
  .settings-tabs { display: grid; grid-template-columns: minmax(0, 1fr); }
  .settings-tabs button { width: 100%; }
  .copy-row { grid-template-columns: minmax(0, 1fr); }
  .copy-row button { width: 100%; }
  .store-permission { grid-template-columns: minmax(0, 1fr); }
  .order-item-head { grid-template-columns: minmax(0, 1fr); }
  .multiline-value { justify-items: start; }
}

@media (max-width: 440px) {
  .sidebar { padding: 14px 10px; }
  nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app main { padding: 12px; }
  .metrics, .overview-metric-grid { grid-template-columns: minmax(0, 1fr); }
  .panel-head { display: block; }
  .panel-head .text { padding-left: 0; }
  .update-toolbar, .header-actions { grid-template-columns: minmax(0, 1fr); }
  .update-toolbar .danger { grid-column: auto; }
  dialog { width: calc(100vw - 12px); max-width: calc(100vw - 12px); max-height: calc(100vh - 12px); padding: 12px; }
  .dialog-product-head { align-items: flex-start; gap: 9px; }
  .dialog-product-image { flex-basis: 54px; width: 54px; height: 54px; }
  .variation { grid-template-columns: minmax(0, 1fr); }
  .variation-name, .variation label:first-of-type, .variation button { grid-column: auto; }
  .status-line { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .status-line b { text-align: left; }
}
.diagnosis-panel{margin-top:12px}.diagnosis-variation{border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:12px;background:#fff}.diagnosis-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.diagnosis-grid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px}.diagnosis-grid div{background:var(--soft);border-radius:8px;padding:9px;display:flex;flex-direction:column;gap:3px}.diagnosis-grid span{font-size:12px;color:var(--muted)}.diagnosis-blockers{margin-top:12px;padding:10px;border-radius:8px;background:#fff0ec;color:#9b3925;display:flex;flex-direction:column;gap:4px}.recommended-action{margin-top:12px;padding:12px;border-radius:8px;background:#e9f6fa;display:flex;gap:10px;flex-wrap:wrap}.restock-actions{position:sticky;bottom:0;background:#fff;padding:12px 0;z-index:2}.row-actions{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:900px){.diagnosis-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}}
@media(max-width:520px){.diagnosis-grid{grid-template-columns:1fr}}

.public-body {
  min-height: 100vh;
  background: linear-gradient(135deg, #eef6fa 0%, #f8fbfd 48%, #ffffff 100%);
  color: var(--ink);
}
.public-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px clamp(18px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  background: rgba(248, 251, 253, .93);
  backdrop-filter: blur(14px);
}
.public-brand img {
  display: block;
  width: min(190px, 42vw);
  max-height: 52px;
  object-fit: contain;
}
.public-nav nav, .public-actions, .public-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.public-nav nav a {
  border-radius: 999px;
  color: var(--muted);
  font-weight: 800;
  padding: 10px 13px;
  text-decoration: none;
}
.public-body[data-public-page="home"] [data-public-link="home"],
.public-body[data-public-page="pricing"] [data-public-link="pricing"],
.public-body[data-public-page="contact"] [data-public-link="contact"] {
  background: #e7f4f8;
  color: var(--primary);
}
.public-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px clamp(18px, 4vw, 40px) 62px;
}
.public-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, .78fr);
  gap: 30px;
  align-items: center;
  padding: 44px 0;
}
.public-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid #bfe2eb;
  border-radius: 999px;
  background: #eef9fc;
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
  padding: 8px 12px;
}
.public-hero h1 {
  max-width: 820px;
  margin: 16px 0;
  font-size: clamp(38px, 5vw, 68px);
  letter-spacing: -.04em;
  line-height: .98;
}
.public-hero-copy p, .public-section-head p, .public-form-card p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}
.public-hero-card, .public-feature-grid article, .pricing-card, .public-form-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow);
}
.public-hero-card {
  display: grid;
  gap: 14px;
  padding: 22px;
}
.public-hero-card div {
  border-radius: 16px;
  background: var(--soft);
  padding: 16px;
}
.public-hero-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
}
.public-hero-card span, .pricing-card li, .public-feature-grid article p {
  color: var(--muted);
}
.public-section {
  padding: 44px 0;
}
.public-section-head {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}
.public-section-head h2 {
  margin: 0;
  font-size: clamp(30px, 3.5vw, 46px);
  letter-spacing: -.03em;
}
.public-feature-grid, .pricing-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pricing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.public-feature-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.public-feature-grid article, .pricing-card, .public-form-card {
  padding: 24px;
}
.pricing-card.featured {
  border-color: var(--primary);
  box-shadow: 0 24px 60px rgba(43, 125, 145, .18);
  transform: translateY(-4px);
}
.pricing-card h3, .public-feature-grid h3 {
  margin-top: 0;
}
.price {
  display: block;
  margin: 12px 0;
  font-size: 30px;
  font-weight: 900;
}
.pricing-card ul {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding-left: 20px;
}
.public-signup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
  gap: 22px;
  align-items: start;
}
.public-form-card ol {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
  padding-left: 22px;
}
.public-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 22px clamp(18px, 4vw, 56px);
  border-top: 1px solid var(--line);
  color: var(--muted);
}
@media (max-width: 980px) {
  .public-nav { align-items: flex-start; flex-direction: column; }
  .public-hero, .public-signup { grid-template-columns: minmax(0, 1fr); }
  .public-feature-grid, .pricing-grid, .public-feature-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .public-actions, .public-hero-actions { width: 100%; }
  .public-actions .button, .public-hero-actions .button { flex: 1 1 160px; }
  .public-feature-grid, .pricing-grid, .public-feature-grid.compact { grid-template-columns: minmax(0, 1fr); }
  .public-footer { flex-direction: column; }
}

/* Zelluvo premium public marketing site */
.marketing-body {
  --marketing-bg: #050816;
  --marketing-card: #0b1020;
  --marketing-card-2: #111827;
  --marketing-line: rgba(148, 163, 184, .22);
  --marketing-text: #f8fafc;
  --marketing-muted: #94a3b8;
  --marketing-cyan: #22d3ee;
  --marketing-violet: #8b5cf6;
  --marketing-success: #10b981;
  --marketing-warning: #f59e0b;
  --marketing-danger: #f43f5e;
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 16% 8%, rgba(34, 211, 238, .18), transparent 26rem),
    radial-gradient(circle at 84% 12%, rgba(139, 92, 246, .20), transparent 30rem),
    linear-gradient(180deg, #050816 0%, #08111f 48%, #050816 100%);
  color: var(--marketing-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}
.marketing-body a { color: inherit; }
.marketing-body .button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease, border-color 180ms ease, background 180ms ease;
}
.marketing-body .button.primary {
  border: 1px solid rgba(34, 211, 238, .65);
  background: linear-gradient(135deg, #22d3ee, #3b82f6 55%, #8b5cf6);
  color: #020617;
  box-shadow: 0 16px 40px rgba(34, 211, 238, .18), inset 0 1px 0 rgba(255,255,255,.35);
}
.marketing-body .button.secondary {
  border: 1px solid rgba(148, 163, 184, .34);
  background: rgba(15, 23, 42, .72);
  color: #e2e8f0;
}
.marketing-body .button.primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 20px 50px rgba(34, 211, 238, .26), inset 0 1px 0 rgba(255,255,255,.45);
}
.marketing-body .button.secondary:hover {
  transform: translateY(-1px);
  border-color: rgba(226, 232, 240, .48);
  background: rgba(30, 41, 59, .88);
}
.marketing-body .button:active {
  transform: translateY(0);
}
.marketing-body .hero-cta {
  min-height: 50px;
  padding: 14px 22px;
  font-size: 15px;
}
.marketing-body .button:focus-visible,
.marketing-links a:focus-visible,
.marketing-footer a:focus-visible,
.faq-grid summary:focus-visible {
  outline: 3px solid rgba(34, 211, 238, .7);
  outline-offset: 3px;
}
.marketing-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  width: min(1180px, calc(100% - 32px));
  margin: 14px auto 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 12px;
  background: rgba(5, 8, 22, .82);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
}
.marketing-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f8fafc;
  font-size: 20px;
  font-weight: 900;
  text-decoration: none;
}
.marketing-brand .logo-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #67e8f9, #3b82f6 50%, #8b5cf6);
  color: #04111d;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 10px 28px rgba(34, 211, 238, .22), inset 0 1px 0 rgba(255,255,255,.55);
}
.marketing-brand .logo-wordmark {
  color: #f8fafc;
  font-size: 20px;
  font-weight: 850;
  letter-spacing: 0;
}
.marketing-links,
.marketing-actions,
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.marketing-links { justify-content: center; }
.marketing-links a {
  padding: 9px 10px;
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}
.marketing-links a:hover {
  background: rgba(148, 163, 184, .12);
  color: #ffffff;
}
.marketing-main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}
.marketing-hero {
  min-height: calc(100vh - 92px);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(430px, .88fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  padding: clamp(64px, 8vw, 112px) 0 54px;
}
.hero-copy,
.hero-visual { min-width: 0; }
.marketing-eyebrow,
.section-kicker {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  border: 1px solid rgba(34, 211, 238, .32);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(34, 211, 238, .08);
  color: #a5f3fc;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}
.marketing-hero h1 {
  max-width: 820px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(38px, 5.8vw, 70px);
  line-height: 1.02;
  letter-spacing: 0;
}
.hero-copy > p,
.section-intro,
.pricing-preview > div > p,
.early-access > div > p,
.final-cta p,
.founder-note p,
.footer-brand p {
  color: #b9c7d8;
  font-size: 17px;
  line-height: 1.7;
}
.hero-copy > p {
  max-width: 700px;
  margin: 22px 0 0;
  font-size: 19px;
}
.hero-actions { margin-top: 28px; }
.hero-trust {
  margin-top: 16px !important;
  color: #cbd5e1 !important;
  font-size: 14px !important;
}
.dashboard-shell,
.marketing-grid article,
.process-grid article,
.integration-board article,
.rules-panel,
.control-table,
.pricing-grid article,
.access-card,
.faq-grid details,
.founder-note,
.final-cta,
.fallback-section {
  border: 1px solid var(--marketing-line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(17, 24, 39, .92), rgba(11, 16, 32, .92));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .22);
}
.dashboard-shell {
  position: relative;
  padding: 18px;
  overflow: hidden;
}
.dashboard-shell::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, rgba(34, 211, 238, .22), transparent 35%, rgba(139, 92, 246, .20));
  pointer-events: none;
}
.dashboard-shell > * { position: relative; }
.dashboard-top,
.metric-row,
.event-feed,
.table-row {
  display: grid;
  gap: 12px;
}
.dashboard-top {
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-bottom: 14px;
  color: #cbd5e1;
  font-size: 13px;
}
.dashboard-top b { color: #67e8f9; }
.metric-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}
.metric-row div {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 12px;
  padding: 12px;
  background: rgba(15, 23, 42, .72);
}
.metric-row span,
.mock-table b,
.table-row.head span {
  color: #94a3b8;
  font-size: 12px;
}
.metric-row b {
  display: block;
  margin-top: 5px;
  color: #ffffff;
  font-size: 24px;
}
.mock-table,
.comparison-table {
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 12px;
  overflow: hidden;
}
.mock-table > div,
.comparison-table > div {
  display: grid;
  grid-template-columns: minmax(140px, 1.1fr) repeat(3, minmax(110px, .75fr));
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  color: #e2e8f0;
  font-size: 13px;
}
.mock-table > div:first-child,
.comparison-table > div:first-child {
  background: rgba(34, 211, 238, .08);
}
.mock-table > div:last-child,
.comparison-table > div:last-child { border-bottom: 0; }
.good { color: var(--marketing-success) !important; }
.warn { color: var(--marketing-warning) !important; }
.bad { color: var(--marketing-danger) !important; }
.event-feed { margin-top: 14px; }
.event-feed span {
  display: block;
  border: 1px solid rgba(34, 211, 238, .16);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(34, 211, 238, .07);
  color: #dffbff;
  font-size: 13px;
}
.marketing-section {
  padding: clamp(56px, 7vw, 96px) 0;
}
.marketing-section h2,
.fallback-section h1 {
  max-width: 850px;
  margin: 0 0 16px;
  color: #ffffff;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: 0;
}
.marketing-grid,
.process-grid,
.integration-board,
.pricing-grid,
.faq-grid {
  display: grid;
  gap: 16px;
}
.marketing-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.marketing-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.marketing-grid.features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.marketing-grid article,
.process-grid article,
.integration-board article,
.pricing-grid article,
.access-card,
.faq-grid details {
  min-width: 0;
  padding: 22px;
}
.marketing-grid h3,
.process-grid h3,
.integration-board h3,
.pricing-grid h3,
.rules-panel h3,
.faq-grid summary {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 18px;
}
.marketing-grid p,
.process-grid p,
.integration-board p,
.pricing-grid p,
.rules-panel p,
.faq-grid p,
.access-card p {
  margin: 0;
  color: var(--marketing-muted);
  line-height: 1.65;
}
.status-dot {
  display: block;
  width: 12px;
  height: 12px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: var(--marketing-cyan);
  box-shadow: 0 0 24px currentColor;
}
.status-dot.bad { background: var(--marketing-danger); }
.status-dot.warn { background: var(--marketing-warning); }
.status-dot.purple { background: var(--marketing-violet); }
.badge-status {
  display: inline-flex;
  margin-bottom: 14px;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.badge-status.available,
.integration-board b.available {
  background: rgba(16, 185, 129, .14);
  color: #86efac;
}
.badge-status.beta,
.integration-board b.beta {
  background: rgba(34, 211, 238, .14);
  color: #67e8f9;
}
.badge-status.soon,
.integration-board b.soon {
  background: rgba(245, 158, 11, .14);
  color: #fcd34d;
}
.process-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.process-grid b {
  color: #67e8f9;
  font-size: 13px;
}
.control-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 16px;
}
.control-table { overflow: hidden; }
.table-row {
  grid-template-columns: minmax(150px, 1.25fr) minmax(110px, .8fr) minmax(120px, .9fr) minmax(110px, .8fr) minmax(110px, .8fr) minmax(90px, .65fr) minmax(80px, .55fr) minmax(145px, 1fr) minmax(150px, 1fr);
  align-items: center;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(148, 163, 184, .13);
  color: #e2e8f0;
  font-size: 13px;
}
.table-row:last-child { border-bottom: 0; }
.table-row.head {
  background: rgba(34, 211, 238, .08);
  font-weight: 900;
}
.rules-panel { padding: 22px; }
.rules-panel p {
  margin-top: 12px;
  border-left: 3px solid rgba(34, 211, 238, .55);
  padding-left: 12px;
}
.integration-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.integration-board p {
  display: grid;
  gap: 10px;
}
.integration-board span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  padding-bottom: 8px;
}
.integration-board b {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  text-transform: uppercase;
  white-space: nowrap;
}
.comparison-table > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pricing-preview,
.early-access,
.founder-note {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(320px, 1.2fr);
  gap: 18px;
  align-items: start;
}
.pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pricing-grid article.featured {
  border-color: rgba(34, 211, 238, .55);
  background: linear-gradient(180deg, rgba(8, 47, 73, .88), rgba(17, 24, 39, .92));
}
.plan-label {
  display: inline-flex;
  margin-bottom: 14px;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(148, 163, 184, .14);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 900;
}
.plan-label.recommended {
  background: rgba(34, 211, 238, .15);
  color: #67e8f9;
}
.pricing-grid .button,
.access-card .button { margin-top: 18px; }
.trust-section .marketing-grid article { min-height: 190px; }
.founder-note,
.final-cta,
.fallback-section {
  padding: clamp(28px, 4vw, 46px);
}
.founder-copy {
  display: grid;
  gap: 16px;
}
.founder-note p,
.founder-copy p {
  margin: 0;
  color: #dbeafe;
}
.early-access {
  border: 1px solid rgba(34, 211, 238, .20);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 42px);
  background: linear-gradient(135deg, rgba(34, 211, 238, .10), rgba(139, 92, 246, .10));
}
.access-card {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.access-card p { flex: 1 1 100%; }
.faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faq-grid details,
.faq-grid summary { cursor: pointer; }
.faq-grid p { margin-top: 12px; }
.legal-page {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.legal-page h1 {
  max-width: 800px;
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.03;
}
.legal-grid {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}
.legal-grid article {
  border: 1px solid var(--marketing-line);
  border-radius: 16px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(17, 24, 39, .92), rgba(11, 16, 32, .92));
}
.legal-grid h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 20px;
}
.legal-grid p {
  margin: 0;
  color: #b9c7d8;
  line-height: 1.7;
}
.final-cta { text-align: center; }
.final-cta h2,
.final-cta p,
.final-cta .hero-actions {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
.marketing-footer {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) repeat(4, minmax(130px, .7fr));
  gap: 24px;
  border-top: 1px solid rgba(148, 163, 184, .22);
  padding: 42px 0;
  color: var(--marketing-muted);
}
.marketing-footer nav {
  display: grid;
  align-content: start;
  gap: 9px;
}
.marketing-footer h3 {
  margin: 0 0 5px;
  color: #ffffff;
  font-size: 14px;
}
.marketing-footer a {
  color: #94a3b8;
  text-decoration: none;
}
.marketing-footer a:hover { color: #ffffff; }
.footer-bottom {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  color: #64748b;
}
.fallback-section { margin-top: 48px; }
@media (prefers-reduced-motion: no-preference) {
  .dashboard-shell,
  .marketing-grid article,
  .process-grid article,
  .pricing-grid article {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .marketing-grid article:hover,
  .process-grid article:hover,
  .pricing-grid article:hover {
    transform: translateY(-3px);
    border-color: rgba(34, 211, 238, .38);
    box-shadow: 0 28px 90px rgba(34, 211, 238, .08);
  }
}
@media (max-width: 1040px) {
  .marketing-nav { grid-template-columns: 1fr; }
  .marketing-links { justify-content: flex-start; }
  .marketing-hero,
  .pricing-preview,
  .early-access,
  .founder-note,
  .control-layout { grid-template-columns: minmax(0, 1fr); }
  .marketing-grid.features,
  .marketing-grid.three,
  .marketing-grid.four,
  .process-grid,
  .integration-board,
  .pricing-grid,
  .faq-grid,
  .marketing-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .marketing-nav,
  .marketing-main,
  .marketing-footer { width: min(100% - 24px, 1180px); }
  .marketing-links { display: none; }
  .marketing-actions,
  .hero-actions { width: 100%; }
  .marketing-nav {
    align-items: stretch;
  }
  .marketing-brand {
    min-width: 0;
  }
  .marketing-brand .logo-wordmark {
    font-size: 19px;
  }
  .marketing-actions .button,
  .hero-actions .button,
  .access-card .button {
    flex: 1 1 180px;
    min-width: 0;
  }
  .marketing-hero { padding-top: 48px; }
  .metric-row,
  .marketing-grid.features,
  .marketing-grid.three,
  .marketing-grid.four,
  .process-grid,
  .integration-board,
  .pricing-grid,
  .faq-grid,
  .marketing-footer { grid-template-columns: minmax(0, 1fr); }
  .mock-table,
  .control-table,
  .comparison-table { overflow-x: auto; }
  .mock-table > div { min-width: 560px; }
  .table-row { min-width: 1120px; }
  .comparison-table > div { min-width: 680px; }
}