:root {
  --navy: #17324D;
  --green: #2F6B4F;
  --gold: #C89B2B;
  --cream: #F7F1E8;
  --pink: #EBC7C7;
  --white: #FFFFFF;
  --light-gray: #F3F4F6;
  --ink: #172033;
  --muted: #667085;
  --border: #E0E4EA;
  --danger: #B42318;
  --shadow: 0 16px 40px rgba(23, 50, 77, 0.10);
  --soft-shadow: 0 10px 24px rgba(23, 50, 77, 0.07);
  --input: #D8DEE8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(247, 241, 232, 0.92) 0%, rgba(255, 255, 255, 0.9) 42%, var(--light-gray) 100%),
    linear-gradient(135deg, rgba(47, 107, 79, 0.08), rgba(200, 155, 43, 0.08));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}

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

button {
  cursor: pointer;
}

button,
a,
input,
select,
textarea {
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(200, 155, 43, 0.38);
  outline-offset: 2px;
}

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

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  padding: 18px 5px 16px;
  background:
    linear-gradient(180deg, #17324D 0%, #10283F 100%);
  color: var(--white);
  scrollbar-color: rgba(255, 255, 255, 0.32) transparent;
  scrollbar-width: thin;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.brand-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--navy);
  background: var(--gold);
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0;
}

.brand-text {
  min-width: 0;
}

.brand-name {
  margin: 0;
  color: #FFFFFF;
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-subtitle {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.main-content .eyebrow {
  color: var(--green);
}

.nav-tabs {
  display: grid;
  gap: 7px;
  margin-top: 22px;
}

.nav-tab {
  width: 100%;
  min-height: 44px;
  padding: 9px 10px 9px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  text-align: left;
  font-size: 0.87rem;
  font-weight: 700;
  position: relative;
}

.nav-tab:hover,
.nav-tab.active {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.11);
}

.nav-tab.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: var(--gold);
}

.main-content {
  min-width: 0;
  padding: 4px 0 28px 0;
  background: var(--white);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(23, 50, 77, 0.08);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(10px);
}

.topbar h2 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 1.8rem;
}

.store-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid rgba(47, 107, 79, 0.18);
  border-radius: 8px;
  background: rgba(247, 241, 232, 0.62);
  white-space: nowrap;
}

.store-pill span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.store-pill strong {
  color: var(--green);
  font-size: 0.95rem;
}

.view {
  display: none !important;
}

.view[hidden] {
  display: none !important;
}

.view.active:not([hidden]) {
  display: grid !important;
  gap: 22px;
}

/* Single-page accordion: every section stays on one scrollable page, wrapped
   in an always-visible header that expands/collapses just that section. */
.accordion-item {
  margin: 0 0 14px;
}

.accordion-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid rgba(23, 50, 77, 0.09);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(10px);
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.accordion-header:hover {
  background: rgba(255, 255, 255, 1);
}

.accordion-header.expanded {
  border-color: rgba(47, 107, 79, 0.28);
  background: rgba(255, 255, 255, 1);
}

.accordion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--green);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

.accordion-header.expanded .accordion-icon {
  transform: rotate(90deg);
}

.accordion-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accordion-item .view {
  margin-bottom: 4px;
}

.panel {
  min-width: 0;
  border: 1px solid rgba(23, 50, 77, 0.09);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 8px;
  border-bottom: 1px solid rgba(23, 50, 77, 0.06);
}

.panel h3 {
  margin: 0;
  color: var(--navy);
  font-size: 0.92rem;
}

.panel-kicker {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

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

.stat-card {
  min-height: 112px;
  padding: 18px;
  border: 1px solid rgba(23, 50, 77, 0.08);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--white) 0%, #FCFCFB 100%);
  box-shadow: var(--soft-shadow);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--green), var(--gold));
}

.stat-card .label {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stat-card .value {
  margin: 9px 0 0;
  color: var(--navy);
  font-size: 1.66rem;
  font-weight: 900;
  line-height: 1.1;
}

.stat-card .subtext {
  margin: 8px 0 0;
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 700;
}

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

/* Dashboard rebuild: exactly 3 top charts (Revenue, Profit, Sales This Month), so they get
   their own 3-across layout instead of the shared 2-col .chart-grid default. */
.dashboard-top-charts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

@media (max-width: 720px) {
  .dashboard-top-charts {
    grid-template-columns: minmax(0, 1fr);
  }
}

.chart-panel {
  min-height: 396px;
}

/* Dashboard "Sales vs. Your Best" gauges - two semi-circle SVG progress dials (green = this
   month vs. best month on record, blue = this year vs. best year on record). Pure SVG/CSS, no
   Chart.js dependency, so it always renders even if the Chart.js CDN fails to load. */
.dashboard-gauge-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  gap: 12px;
  padding: 10px 18px 22px;
}

.dashboard-gauge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
}

.dashboard-gauge-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.dashboard-gauge-track {
  fill: none;
  stroke: rgba(23, 50, 77, 0.1);
  stroke-width: 24;
  stroke-linecap: round;
}

.dashboard-gauge-fill {
  fill: none;
  stroke-width: 24;
  stroke-linecap: round;
  stroke-dasharray: 251.33;
  stroke-dashoffset: 251.33;
  transition: stroke-dashoffset 0.6s ease;
}

.dashboard-gauge-fill--green {
  stroke: var(--green);
}

.dashboard-gauge-fill--blue {
  stroke: #2563EB;
}

.dashboard-gauge-icon {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 900;
}

.dashboard-gauge-icon--green {
  color: var(--green);
  background: rgba(47, 107, 79, 0.14);
}

.dashboard-gauge-icon--blue {
  color: #1E3A5F;
  background: none;
}

.dashboard-gauge-value {
  margin: 2px 0 0;
  color: #16A34A;
  text-shadow: 0 0 10px rgba(22, 163, 74, 0.55), 0 0 2px rgba(22, 163, 74, 0.35);
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.1;
}

.dashboard-gauge-label {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.dashboard-gauge-sub {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  text-align: center;
}

.dashboard-gauge-sub-money {
  color: #16A34A;
  font-weight: 800;
}

@media (max-width: 520px) {
  .dashboard-gauge-row {
    flex-direction: column;
    align-items: center;
  }

  .dashboard-gauge {
    width: 80%;
  }
}

.chart-panel canvas {
  display: block;
  width: 100% !important;
  height: 326px !important;
  padding: 16px 22px 22px;
}

.chart-placeholder {
  display: grid;
  place-items: center;
  height: 270px;
  margin: 14px 18px 18px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  background: var(--light-gray);
  font-weight: 700;
}

.table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.table-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  padding: 16px 20px 20px;
  scrollbar-color: rgba(23, 50, 77, 0.26) transparent;
  scrollbar-width: thin;
}

table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  font-size: 0.88rem;
}

th {
  color: var(--navy);
  background: #F7F9FC;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 1;
}

td {
  color: #263246;
  background: var(--white);
}

td:first-child {
  font-weight: 750;
}

tbody tr:hover td {
  background: #FCF9F1;
}

tr:last-child td {
  border-bottom: 0;
}

.empty-row td {
  padding: 22px 10px;
  color: var(--muted);
  text-align: center;
  font-weight: 700;
}

.data-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  padding: 20px;
}

.field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.field-help {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.35;
}

.validation-message {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(180, 35, 24, 0.24);
  border-radius: 8px;
  color: var(--danger);
  background: rgba(180, 35, 24, 0.07);
  font-size: 0.88rem;
  font-weight: 800;
}

.success-message {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(47, 107, 79, 0.22);
  border-radius: 8px;
  color: var(--green);
  background: rgba(47, 107, 79, 0.08);
  font-size: 0.88rem;
  font-weight: 800;
}

.pod-debug-line {
  margin: 0;
  padding: 11px 13px;
  border: 1px solid rgba(47, 107, 79, 0.18);
  border-radius: 8px;
  color: var(--green);
  background: rgba(47, 107, 79, 0.07);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
}

.calculator-form {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.calculator-section {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(23, 50, 77, 0.08);
  border-radius: 8px;
  background: #FBFCFD;
}

.calculator-section h4 {
  margin: 0;
  color: var(--navy);
  font-size: 0.94rem;
}

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

.calculator-setup-grid {
  row-gap: 16px;
}

.tax-note {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(200, 155, 43, 0.26);
  border-radius: 8px;
  color: var(--navy);
  background: rgba(247, 241, 232, 0.78);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.45;
}

.compact-checkbox {
  margin-top: 0;
  font-size: 0.78rem;
}

.discount-amount-field {
  grid-column: span 2;
}

.discount-amount-field .checkbox-row {
  min-height: 42px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(23, 50, 77, 0.12);
  border-radius: 8px;
  background: #FFFFFF;
}

.calculator-results {
  padding: 20px;
}

.seo-grader-shell {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.seo-filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.seo-product-browser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  max-height: 360px;
  overflow: auto;
  padding: 2px;
  scrollbar-color: rgba(23, 50, 77, 0.26) transparent;
  scrollbar-width: thin;
}

.seo-product-card {
  display: grid;
  gap: 9px;
  align-content: start;
  min-height: 126px;
  padding: 14px;
  border: 1px solid rgba(23, 50, 77, 0.10);
  border-radius: 8px;
  color: var(--ink);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFD 100%);
  box-shadow: none;
  text-align: left;
}

.seo-product-card:hover,
.seo-product-card.selected {
  border-color: rgba(47, 107, 79, 0.38);
  background: #F8FBF9;
  box-shadow: var(--soft-shadow);
  transform: translateY(-1px);
}

.seo-product-card.selected {
  box-shadow: inset 4px 0 0 var(--green), var(--soft-shadow);
}

.seo-product-name {
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.25;
}

.seo-product-meta {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.seo-product-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.seo-selected-summary {
  min-width: 0;
}

.seo-summary-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(47, 107, 79, 0.16);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FBF9 100%);
}

.seo-summary-card h4 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 1.08rem;
}

.seo-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.seo-summary-grid span {
  min-width: 0;
  color: #263246;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.4;
}

.seo-summary-grid strong {
  color: var(--navy);
  font-weight: 900;
}

.seo-future-notes {
  display: grid;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 14px;
  border: 1px solid rgba(200, 155, 43, 0.28);
  border-radius: 8px;
  color: var(--navy);
  background: rgba(247, 241, 232, 0.78);
}

.seo-future-notes p {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.45;
}

.empty-browser-state {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  background: #F8FAFC;
  font-size: 0.9rem;
  font-weight: 750;
}

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

.field.full,
.form-details.full,
.form-actions.full,
.tag-grid,
.check-grid {
  grid-column: 1 / -1;
}

.field.compact {
  max-width: 180px;
}

label {
  color: var(--navy);
  font-size: 0.79rem;
  font-weight: 850;
}

.form-details {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(23, 50, 77, 0.10);
  border-radius: 8px;
  background: #FBFCFD;
}

.form-details summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  color: var(--navy);
  font-weight: 900;
}

.form-details summary span {
  font-size: 0.95rem;
}

.form-details summary small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
}

.form-subgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-top: 14px;
}

.product-etsy-empty {
  margin-top: 12px;
}

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

.product-etsy-detail-row td {
  padding: 0;
  background: #FBFCFD;
}

.product-etsy-detail-panel {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid rgba(23, 50, 77, 0.08);
}

.product-etsy-detail-panel h4 {
  margin: 0;
  color: var(--navy);
  font-size: 0.98rem;
}

.product-etsy-detail-panel p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 750;
}

.product-etsy-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 16px;
}

.product-etsy-info-grid span {
  min-width: 0;
  color: #263246;
  font-size: 0.86rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.product-etsy-info-grid strong {
  color: var(--navy);
  font-weight: 900;
}

input,
select,
textarea {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid var(--input);
  border-radius: 8px;
  color: var(--ink);
  background: var(--white);
  outline: none;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47, 107, 79, 0.12);
}

input[readonly] {
  color: var(--muted);
  background: var(--light-gray);
}

input::placeholder,
textarea::placeholder {
  color: #98A2B3;
}

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

.form-actions,
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.button,
.file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 41px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.15;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(23, 50, 77, 0.08);
  text-align: center;
}

.button.primary {
  color: var(--white);
  background: var(--green);
}

.button.accent,
.file-button {
  color: var(--navy);
  background: var(--gold);
}

.button.secondary {
  color: var(--navy);
  border-color: #CAD2DC;
  background: var(--white);
  box-shadow: none;
}

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

.button:disabled,
.button:disabled:hover {
  cursor: not-allowed;
  color: #8A96A8;
  border-color: #D8DEE8;
  background: #EEF1F5;
  box-shadow: none;
  transform: none;
}

.button.ghost {
  color: var(--green);
  background: rgba(47, 107, 79, 0.1);
  box-shadow: none;
}

.button:hover,
.file-button:hover {
  transform: translateY(-1px);
}

.button.secondary:hover,
.button.ghost:hover {
  border-color: rgba(47, 107, 79, 0.24);
  background: #F8FBF9;
}

.button.small {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 0.78rem;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--navy);
  background: var(--cream);
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.badge.green {
  color: var(--white);
  background: var(--green);
}

.badge.gold {
  color: var(--navy);
  background: var(--gold);
}

.badge.pink {
  color: var(--navy);
  background: var(--pink);
}

.sales-etsy-badge {
  color: #7C2D12;
  background: #FDBA74;
}

.sales-manual-badge {
  color: var(--navy);
  background: var(--light-gray);
}

.badge.grade-a {
  color: var(--white);
  background: #1F7A4D;
}

.badge.grade-b {
  color: var(--navy);
  background: #BDEB7A;
}

.badge.grade-c {
  color: var(--navy);
  background: #F2C94C;
}

.badge.grade-d {
  color: var(--white);
  background: #EA7A1A;
}

.badge.grade-f {
  color: var(--white);
  background: var(--danger);
}

.stat-card.grade-card.grade-a::before {
  background: #1F7A4D;
}

.stat-card.grade-card.grade-b::before {
  background: #BDEB7A;
}

.stat-card.grade-card.grade-c::before {
  background: #F2C94C;
}

.stat-card.grade-card.grade-d::before {
  background: #EA7A1A;
}

.stat-card.grade-card.grade-f::before {
  background: var(--danger);
}

.seo-suggestions {
  min-height: 58px;
}

.seo-suggestions ul {
  display: grid;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding: 14px 14px 14px 34px;
  border: 1px solid rgba(200, 155, 43, 0.24);
  border-radius: 8px;
  color: var(--navy);
  background: rgba(247, 241, 232, 0.70);
  font-size: 0.88rem;
  font-weight: 750;
}

.seo-improvement-shell {
  display: grid;
  gap: 18px;
  padding: 20px;
}

.seo-score-change-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.seo-history-chart-wrap {
  min-height: 320px;
  position: relative;
  border: 1px solid rgba(23, 50, 77, 0.08);
  border-radius: 8px;
  background: #FBFCFD;
  overflow: hidden;
}

.seo-history-chart-wrap canvas {
  display: block;
  width: 100% !important;
  height: 320px !important;
  padding: 18px 20px 24px;
}

.seo-history-placeholder {
  height: 280px;
  margin: 18px;
}

.seo-comparison-wrap {
  padding: 0;
}

.settings-actions {
  padding: 20px;
}

.import-center-body {
  padding: 20px;
}

.backup-reminder {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(200, 155, 43, 0.28);
  border-radius: 8px;
  color: var(--navy);
  background: rgba(247, 241, 232, 0.78);
  font-size: 0.9rem;
  font-weight: 750;
}

.backup-reminder strong {
  color: var(--green);
}

.settings-reminder {
  margin: 20px 20px 0;
}

/* Data Backup screen: emphasized warning line under Import Full Backup. */
.backup-warning-text {
  margin: 12px 20px 20px;
  color: #B45309;
  font-weight: 750;
}

.import-help-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.92rem;
}

.import-help-list li {
  padding-left: 3px;
}

.import-help-list strong {
  display: block;
  color: var(--navy);
  font-weight: 900;
}

.import-help-list span {
  display: block;
  margin-top: 2px;
  font-weight: 700;
}

.import-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.import-step {
  display: grid;
  gap: 7px;
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  background: #F8FAFC;
}

.import-step span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: var(--white);
  background: #98A2B3;
  font-size: 0.78rem;
  font-weight: 900;
}

.import-step strong {
  color: inherit;
  font-size: 0.8rem;
  line-height: 1.25;
}

.import-step.done {
  color: var(--navy);
  border-color: rgba(47, 107, 79, 0.18);
  background: #F6FBF8;
}

.import-step.done span {
  background: var(--green);
}

.import-upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.import-upload-row .file-button,
.import-upload-row .button {
  min-height: 48px;
}

.connection-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
}

.connection-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.connection-status {
  margin: 6px 0 0;
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 900;
}

.connection-meta {
  margin: 6px 0 0;
  color: var(--green);
  font-size: 0.9rem;
  font-weight: 800;
}

.connection-message {
  max-width: 680px;
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}

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

.etsy-preview-body {
  display: grid;
  gap: 14px;
  padding: 20px 0 0;
}

.etsy-preview-summary {
  padding-top: 0;
  padding-bottom: 0;
}

.etsy-listing-id-cell {
  display: grid;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: 84px;
}

.etsy-listing-id-cell span {
  color: var(--navy);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.etsy-thumbnail-button,
.etsy-detail-image-button {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.etsy-thumbnail-button:focus-visible,
.etsy-detail-image-button:focus-visible {
  outline: 3px solid rgba(200, 155, 43, 0.42);
  outline-offset: 3px;
}

.etsy-thumbnail-image,
.etsy-thumbnail-placeholder {
  width: 64px;
  height: 64px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--light-gray);
}

.etsy-thumbnail-image {
  display: block;
  object-fit: cover;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.etsy-thumbnail-button:hover .etsy-thumbnail-image,
.etsy-detail-image-button:hover .etsy-detail-image {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(23, 50, 77, 0.16);
}

.etsy-thumbnail-placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}
.etsy-listing-detail {
  margin: 0 20px 0;
  border: 1px solid rgba(23, 50, 77, 0.09);
  border-radius: 8px;
  background: #FBFCFD;
  overflow: hidden;
}

.inline-detail-header {
  padding: 16px 18px 8px;
}

.etsy-detail-grid {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
}

.etsy-detail-image-button,
.etsy-detail-image,
.etsy-detail-image-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--light-gray);
  object-fit: cover;
}

.etsy-detail-image-button {
  overflow: hidden;
}

.etsy-detail-image-button .etsy-detail-image {
  display: block;
  border: 0;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.etsy-detail-image-placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  text-align: center;
}

.etsy-detail-content {
  display: grid;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.etsy-detail-content p {
  margin: 0;
  color: #263246;
  font-size: 0.9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.etsy-detail-content strong {
  color: var(--navy);
  font-weight: 900;
}

.etsy-detail-description {
  max-height: 220px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  scrollbar-color: rgba(23, 50, 77, 0.26) transparent;
  scrollbar-width: thin;
}

.etsy-detail-actions {
  padding: 0 20px 20px;
}

.etsy-collapsible-section {
  margin: 6px 20px 20px;
  border: 1px solid rgba(23, 50, 77, 0.09);
  border-radius: 8px;
  background: #FBFCFD;
  overflow: hidden;
}

.etsy-collapsible-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(23, 50, 77, 0.08);
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}

.etsy-collapsible-header h3 {
  margin: 0;
  color: var(--navy);
  font-size: 0.92rem;
}

.etsy-collapsible-header .panel-kicker {
  margin-top: 4px;
}

.collapsible-count {
  margin: 8px 0 0;
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 900;
}

.collapsible-summary {
  margin: 0;
  max-width: none;
  padding: 0 18px 14px;
}

.etsy-collapsible-section.is-collapsed .collapsible-summary {
  padding-bottom: 18px;
}

.etsy-collapsible-body[hidden] {
  display: none;
}

.etsy-match-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 10px;
  padding-bottom: 10px;
}

.etsy-match-message {
  margin: 0;
  padding: 0 20px;
}

.etsy-match-helper {
  margin: 0;
  padding: 0 20px;
  color: var(--muted);
  font-weight: 750;
}

.etsy-local-review-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 20px 0;
}

.etsy-local-review-toolbar .etsy-match-helper {
  padding: 0;
}

.etsy-local-review-status {
  color: var(--green);
}

.etsy-match-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 20px 0;
}

.etsy-match-filters .button.active {
  color: var(--white);
  border-color: var(--green);
  background: var(--green);
}

.etsy-match-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(160px, 190px) minmax(190px, 220px) minmax(150px, 180px);
  gap: 10px;
  padding: 14px 20px 0;
  align-items: end;
}

.etsy-match-controls .field {
  gap: 6px;
}

.etsy-match-controls span {
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 900;
}

.etsy-match-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 20px 0;
}

.etsy-match-pagination p {
  margin: 0;
  color: var(--green);
  font-size: 0.86rem;
  font-weight: 900;
}

.etsy-match-table-wrap {
  padding: 10px 0 18px;
}

.etsy-match-table {
  min-width: 1368px;
  table-layout: fixed;
}

.etsy-match-table th,
.etsy-match-table td {
  padding: 8px 6px;
  font-size: 0.82rem;
}

.etsy-match-table .th-stack {
  display: inline-block;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
}

.etsy-match-table .center-header {
  text-align: center;
}

.etsy-match-table th:nth-child(1),
.etsy-match-table td:nth-child(1) {
  width: 54px;
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
}

.etsy-match-table th:nth-child(2),
.etsy-match-table td:nth-child(2) {
  width: 68px;
}

.etsy-match-table td:nth-child(2) {
  padding-left: 6px;
}

.etsy-match-table th:nth-child(3),
.etsy-match-table td:nth-child(3) {
  width: 84px;
}

.etsy-match-table th:nth-child(4),
.etsy-match-table td:nth-child(4) {
  width: 214px;
}

.etsy-match-table th:nth-child(5),
.etsy-match-table td:nth-child(5) {
  width: 64px;
}

.etsy-match-table th:nth-child(6),
.etsy-match-table td:nth-child(6) {
  width: 64px;
}

.etsy-match-table th:nth-child(7),
.etsy-match-table td:nth-child(7) {
  width: 104px;
  padding-right: 10px;
}

.etsy-match-table th:nth-child(8),
.etsy-match-table td:nth-child(8) {
  width: 120px;
  padding-left: 10px;
}

.etsy-match-table th:nth-child(9),
.etsy-match-table td:nth-child(9) {
  width: 174px;
  padding-left: 10px;
}

.etsy-match-table th:nth-child(10),
.etsy-match-table td:nth-child(10) {
  width: 164px;
}

.etsy-match-table th:nth-child(11),
.etsy-match-table td:nth-child(11) {
  width: 130px;
}

.etsy-match-table th:nth-child(12),
.etsy-match-table td:nth-child(12) {
  width: 158px;
}

.etsy-match-table th:nth-child(13),
.etsy-match-table td:nth-child(13) {
  width: 74px;
}

.match-level-manual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 58px;
  line-height: 1.05;
  text-align: center;
  white-space: normal;
}

.match-reason-cell {
  max-width: 240px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.25;
  white-space: pre-line;
}

.etsy-review-status-cell {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.review-status-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 92px;
  line-height: 1.05;
  text-align: center;
}

.etsy-review-status-cell span:not(.badge) {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.25;
}

.review-action-stack {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.review-action-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}

.review-action-row .button {
  width: 100%;
  min-height: 28px;
  min-width: 0;
  padding: 4px 5px;
  font-size: 0.7rem;
  box-shadow: none;
  white-space: nowrap;
}

.etsy-inline-note-panel {
  display: grid;
  gap: 6px;
  margin-top: 2px;
  padding: 7px;
  border: 1px solid rgba(47, 107, 79, 0.16);
  border-radius: 8px;
  background: #F8FBF9;
}

.etsy-inline-note-header {
  display: grid;
  gap: 2px;
}

.etsy-inline-note-header span {
  color: var(--navy);
  font-size: 0.74rem;
  font-weight: 900;
}

.etsy-inline-note-header small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.15;
}

.compact-note-display {
  min-height: 34px;
  max-height: 64px;
  padding: 6px;
  font-size: 0.72rem;
  overflow-y: auto;
}

.etsy-inline-note-field textarea {
  width: 100%;
  min-height: 54px;
  max-height: 72px;
  padding: 6px 7px;
  font-size: 0.76rem;
  resize: vertical;
}

.etsy-inline-note-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.etsy-inline-note-actions .button {
  width: 100%;
  min-height: 28px;
  padding: 4px 5px;
  font-size: 0.7rem;
}

.etsy-inline-note-panel .field-help {
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.15;
}

.saved-note-preview {
  display: grid;
  gap: 2px;
  max-height: 52px;
  padding: 5px 6px;
  border: 1px solid rgba(23, 50, 77, 0.08);
  border-radius: 6px;
  background: #FBFCFD;
  overflow-y: auto;
}

.saved-note-preview span {
  color: var(--green);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.1;
}

.saved-note-preview p {
  margin: 0;
  color: #344054;
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.review-note-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.15;
}

.etsy-match-table td:nth-child(10) .action-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.etsy-match-table td:nth-child(10) .button {
  width: 100%;
  min-height: 29px;
  padding: 5px 6px;
  font-size: 0.72rem;
  justify-content: center;
  box-shadow: none;
}

.etsy-review-note-panel {
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 1px solid rgba(47, 107, 79, 0.16);
  border-radius: 8px;
  background: #F8FBF9;
}

.etsy-review-note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.etsy-review-note-header > span:first-child {
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 900;
}

.etsy-review-note-field {
  display: grid;
  gap: 4px;
}

.etsy-review-note-field span {
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 900;
}

.etsy-review-note-field textarea {
  min-height: 42px;
  max-height: 42px;
  padding: 6px 8px;
  font-size: 0.8rem;
  line-height: 1.25;
  overflow-y: auto;
  resize: none;
}

.etsy-review-note-footer {
  display: grid;
  gap: 5px;
}

.etsy-review-note-footer small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
}

.etsy-review-note-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.etsy-review-note-actions .button {
  width: 100%;
  min-height: 30px;
  padding: 5px 8px;
  font-size: 0.74rem;
}

.etsy-review-note-detail {
  margin: 0 12px 20px;
  border: 1px solid rgba(23, 50, 77, 0.09);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
}

.etsy-review-note-detail[hidden] {
  display: none;
}

.etsy-review-note-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(23, 50, 77, 0.08);
  background: #F7F9FC;
}

.etsy-review-note-detail-header h4,
.etsy-review-note-detail-header p {
  margin: 0;
}

.etsy-review-note-detail-header h4 {
  color: var(--navy);
  font-size: 0.92rem;
}

.etsy-review-note-detail-header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 750;
}

.etsy-review-note-detail-grid,
.etsy-review-note-compact-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(280px, 1.15fr);
  gap: 14px;
  padding: 14px;
}

.etsy-review-note-display {
  min-height: 92px;
  padding: 12px;
  border: 1px solid rgba(23, 50, 77, 0.09);
  border-radius: 8px;
  color: #263246;
  background: #FBFCFD;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-wrap;
}

.etsy-review-note-editor {
  display: grid;
  gap: 10px;
  align-content: start;
}

.etsy-bulk-add-panel,
.etsy-bulk-add-preview {
  display: grid;
  gap: 10px;
  margin: 10px 20px 0;
  padding: 12px;
  border: 1px solid rgba(23, 50, 77, 0.09);
  border-radius: 8px;
  background: #F8FAFC;
}

.etsy-bulk-add-panel {
  grid-template-columns: minmax(320px, 1fr) minmax(480px, auto);
  align-items: center;
}

.etsy-bulk-add-panel h4,
.etsy-bulk-add-preview h4,
.etsy-bulk-preview-item h5 {
  margin: 0 0 4px;
  color: var(--navy);
}

.etsy-bulk-add-panel p,
.etsy-bulk-add-preview p {
  margin: 0;
  color: #405166;
  font-size: 0.8rem;
  font-weight: 750;
}

.etsy-bulk-add-panel h4 {
  font-size: 0.94rem;
}

.etsy-bulk-add-actions,
.etsy-bulk-preview-actions {
  justify-content: flex-start;
}

.etsy-bulk-add-actions {
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.etsy-bulk-add-actions .button {
  min-height: 30px;
  padding: 6px 9px;
  font-size: 0.76rem;
  white-space: nowrap;
}

.etsy-bulk-add-actions .button.accent {
  border-color: var(--green);
  background: var(--green);
  color: var(--white);
}

.etsy-bulk-add-actions .button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.etsy-bulk-disabled-hint {
  max-width: 170px;
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
}

.etsy-bulk-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.etsy-bulk-count-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid rgba(23, 50, 77, 0.1);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 900;
}

.etsy-bulk-add-preview[hidden] {
  display: none;
}

.etsy-bulk-preview-header,
.etsy-bulk-preview-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.etsy-bulk-preview-list {
  display: grid;
  gap: 10px;
}

.etsy-bulk-preview-item {
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
  padding: 12px;
  border: 1px solid rgba(23, 50, 77, 0.08);
  border-radius: 8px;
  background: var(--white);
}

.etsy-bulk-select-cell {
  display: grid;
  gap: 2px;
  justify-items: center;
  color: #405166;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
}

.etsy-add-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 50px;
  min-height: 26px;
  padding: 3px 5px;
  font-size: 0.55rem;
  line-height: 1.05;
  text-align: center;
}

.etsy-bulk-select-cell input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--green);
}

.etsy-bulk-select-cell span,
.etsy-match-table td:nth-child(1) .badge {
  display: inline-block;
  max-width: 54px;
  white-space: normal;
}

.etsy-match-table td:nth-child(1) .badge {
  padding: 3px 4px;
  font-size: 0.56rem;
  line-height: 1.05;
}

/* Etsy Sync Staging: compact review-notes textarea inside a table cell. */
.etsy-staging-notes-input {
  width: 100%;
  min-width: 150px;
  resize: vertical;
  font-size: 0.82rem;
}

.etsy-link-preview-detail {
  margin: 0 12px 20px;
  border: 1px solid rgba(23, 50, 77, 0.09);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
}

.etsy-link-preview-detail[hidden] {
  display: none;
}

.etsy-link-preview-header {
  background: #F7F9FC;
}

.etsy-link-preview-status-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 18px 0;
}

.etsy-link-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
}

.etsy-link-preview-safe-note {
  margin: 12px 18px 0;
  padding: 10px 12px;
  border: 1px solid rgba(143, 95, 31, 0.22);
  border-radius: 8px;
  background: #FFF8EA;
  color: #66440D;
  font-size: 0.86rem;
  font-weight: 850;
}

.etsy-link-preview-manual {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr) auto;
  gap: 10px;
  align-items: end;
  margin: 12px 18px 0;
  padding: 14px;
  border: 1px solid rgba(49, 107, 164, 0.18);
  border-radius: 8px;
  background: #F7FBFF;
}

.etsy-link-preview-manual h4 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 0.96rem;
}

.etsy-link-preview-manual p {
  margin: 0;
  color: #405166;
  font-size: 0.84rem;
  font-weight: 750;
}

.etsy-link-preview-manual .field {
  margin: 0;
}

.etsy-link-preview-manual .button {
  min-width: 170px;
}

.etsy-link-preview-manual-actions {
  display: grid;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  align-content: end;
}

.etsy-manual-match-saved-message {
  padding: 8px 10px;
  border: 1px solid rgba(31, 122, 82, 0.18);
  border-radius: 8px;
  background: #EFFAF4;
  color: #17613F;
}

.etsy-product-draft-preview {
  display: grid;
  gap: 14px;
  margin: 12px 18px 0;
  padding: 14px;
  border: 1px solid rgba(143, 95, 31, 0.18);
  border-radius: 8px;
  background: #FFFCF5;
}

.etsy-product-draft-preview-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.etsy-product-draft-preview h4 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 0.96rem;
}

.etsy-product-draft-preview p {
  margin: 0;
  color: #405166;
  font-size: 0.84rem;
  font-weight: 750;
}

.etsy-product-draft-status-row,
.etsy-product-draft-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.etsy-product-draft-actions {
  margin: 0;
  padding: 0;
}

.etsy-link-preview-section {
  display: grid;
  align-content: start;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(23, 50, 77, 0.08);
  border-radius: 8px;
  background: #FBFCFD;
}

.etsy-link-preview-section h4 {
  margin: 0;
  color: var(--navy);
  font-size: 0.95rem;
}

.etsy-link-preview-listing-media {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.etsy-link-preview-thumbnail {
  width: 64px;
  height: 64px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--light-gray);
  object-fit: cover;
}

.etsy-link-preview-thumbnail.placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.etsy-link-preview-field {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  color: #263246;
  font-size: 0.84rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.etsy-link-preview-field strong {
  color: var(--navy);
  font-weight: 900;
}

.etsy-link-preview-warnings {
  display: grid;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding-left: 18px;
  color: var(--danger);
  font-size: 0.84rem;
  font-weight: 800;
}

.etsy-link-preview-actions {
  padding: 0 18px 18px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.etsy-product-match-detail {
  margin: 0 20px 20px;
  border: 1px solid rgba(23, 50, 77, 0.09);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
}

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

.product-match-column {
  display: grid;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  align-content: start;
  min-width: 0;
}

.product-match-column p {
  margin: 0;
  color: #263246;
  font-size: 0.9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.product-match-column strong {
  color: var(--navy);
  font-weight: 900;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 20px;
}

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

.import-error-block {
  margin-top: 18px;
}

.import-error-block h4 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 0.95rem;
}

.status-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(23, 50, 77, 0.08);
  border-radius: 8px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFD 100%);
}

.status-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.status-value {
  margin: 7px 0 0;
  color: var(--navy);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.2;
}

.status-subtext {
  margin: 6px 0 0;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 750;
}

.status-trend {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.sales-trend-up {
  color: #16A34A;
  font-weight: 850;
}

.sales-trend-down {
  color: #DC2626;
  font-weight: 850;
}

.sales-trend-none {
  color: var(--muted);
  font-weight: 700;
}

.file-button input {
  display: none;
}

.file-button {
  cursor: pointer;
}

.action-grid,
.import-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.action-grid .button,
.import-grid .file-button {
  width: 100%;
  min-height: 48px;
  text-align: center;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(23, 50, 77, 0.48);
}

.modal-backdrop.active {
  display: flex;
}

.modal {
  width: min(880px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid rgba(23, 50, 77, 0.12);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 26px 70px rgba(23, 50, 77, 0.28);
  overflow: hidden;
}

.modal-header,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 1.15rem;
}

.modal-body {
  overflow: auto;
  padding: 20px;
}

.modal-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.help-text {
  margin: 0 0 16px;
  color: var(--muted);
  font-weight: 700;
}

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

.import-summary {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(47, 107, 79, 0.16);
  border-radius: 8px;
  color: var(--navy);
  background: rgba(247, 241, 232, 0.7);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 850;
}

.checkbox-row input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--green);
}

.checkbox-row.compact-checkbox {
  margin-top: 0;
  font-size: 0.78rem;
}

.etsy-auto-sync-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  margin-top: 14px;
}

.etsy-auto-sync-controls .checkbox-row.compact-checkbox {
  margin-top: 0;
}

#dashboard .table-grid table {
  min-width: 540px;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 20;
  max-width: min(420px, calc(100vw - 44px));
  padding: 13px 16px;
  border: 1px solid rgba(47, 107, 79, 0.18);
  border-radius: 8px;
  color: var(--white);
  background: var(--green);
  box-shadow: 0 18px 44px rgba(23, 50, 77, 0.18);
  font-weight: 800;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 204px minmax(0, 1fr);
  }

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

  .seo-score-change-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .table-grid,
  .table-grid.two-col {
    grid-template-columns: 1fr;
  }

  .data-form,
  .form-subgrid,
  .calculator-grid,
  .seo-filter-grid,
  .seo-summary-grid,
  .tag-grid,
  .check-grid,
  .status-grid,
  .import-summary-grid,
  .import-steps,
  .action-grid,
  .import-grid,
  .mapping-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    min-height: auto;
    max-height: none;
    overflow: visible;
  }

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

  .main-content {
    padding: 16px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }

  .connection-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .etsy-collapsible-header {
    flex-direction: column;
  }

  .etsy-collapsible-header .button {
    width: 100%;
  }

  .etsy-match-controls {
    grid-template-columns: 1fr;
  }

  .etsy-local-review-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .etsy-local-review-toolbar .button {
    width: 100%;
  }

  .etsy-review-note-actions {
    grid-template-columns: 1fr;
  }

  .etsy-review-note-detail-header {
    flex-direction: column;
  }

  .etsy-review-note-detail-header .button {
    width: 100%;
  }

  .etsy-review-note-detail-grid,
  .etsy-review-note-compact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .nav-tabs {
    grid-template-columns: 1fr;
  }

  .panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .button,
  .file-button {
    width: 100%;
  }
}

.product-cleanup-review {
  display: grid;
  gap: 16px;
}

.product-cleanup-summary {
  grid-template-columns: repeat(7, minmax(132px, 1fr));
}

.cleanup-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.6fr);
  gap: 14px;
  align-items: end;
}

.cleanup-search-field {
  margin: 0;
}

.cleanup-filters {
  justify-content: flex-start;
}

.product-cleanup-table-wrap th,
.product-cleanup-table-wrap td {
  white-space: nowrap;
}

.product-cleanup-table-wrap td:first-child {
  min-width: 220px;
  white-space: normal;
}

.cleanup-readiness-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.cleanup-warning-count {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.cleanup-warning-count.ready {
  color: var(--green);
}

.product-cleanup-panel,
.product-cleanup-backup-detail {
  border: 1px solid rgba(23, 50, 77, 0.12);
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: var(--soft-shadow);
  overflow: hidden;
}

.cleanup-panel-header {
  border-bottom: 1px solid var(--border);
}

.cleanup-panel-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(420px, 1.25fr);
  gap: 16px;
  padding: 16px;
}

.cleanup-source-panel,
.cleanup-edit-panel,
.cleanup-warning-panel,
.cleanup-backup-summary {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(23, 50, 77, 0.10);
  border-radius: 8px;
  background: #F8FAFC;
}

.cleanup-source-panel h4,
.cleanup-edit-panel h4,
.cleanup-warning-panel h4,
.cleanup-backup-summary h4 {
  margin: 0;
  color: var(--navy);
  font-size: 1rem;
}

.cleanup-source-panel p,
.cleanup-backup-summary p {
  margin: 0;
  color: #263246;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

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

.cleanup-warning-panel {
  margin: 0 16px 16px;
  background: rgba(247, 241, 232, 0.72);
}

.cleanup-warning-panel ul {
  margin: 0;
  padding-left: 18px;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 750;
}

.cleanup-panel-actions {
  padding: 0 16px 16px;
}

.cleanup-success-message {
  margin: 16px 16px 0;
}

.product-cleanup-backup-detail {
  padding: 14px;
}

@media (max-width: 1180px) {
  .product-cleanup-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cleanup-toolbar,
  .cleanup-panel-grid {
    grid-template-columns: 1fr;
  }
}
.cleanup-rules-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(47, 107, 79, 0.16);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  background: #F8FBF9;
}

.cleanup-rules-header h4,
.cleanup-rules-preview-header h4 {
  margin: 0;
  color: var(--navy);
  font-size: 1rem;
}

.cleanup-rules-header p,
.cleanup-rules-preview-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.4;
}

.cleanup-rules-controls,
.cleanup-rules-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cleanup-select-cell {
  display: grid;
  gap: 3px;
  justify-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.1;
}

.cleanup-select-cell input {
  width: 18px;
  height: 18px;
}

.product-cleanup-rules-preview {
  border: 1px solid rgba(23, 50, 77, 0.12);
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: var(--soft-shadow);
  overflow: hidden;
}

.cleanup-rules-preview-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-bottom: 1px solid var(--border);
}

.cleanup-rules-preview-list {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.cleanup-rules-preview-item {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(23, 50, 77, 0.10);
  border-radius: 8px;
  background: #F8FAFC;
}

.cleanup-rules-preview-item h5 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 0.96rem;
}

.cleanup-rules-preview-item p {
  margin: 0;
  color: #263246;
  font-size: 0.84rem;
  font-weight: 750;
}

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

.cleanup-rules-change-grid span {
  color: #263246;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.35;
}

.cleanup-rules-warnings {
  margin: 0;
  padding-left: 18px;
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 750;
}

.cleanup-rules-preview-actions {
  padding: 0 14px 14px;
}

.cleanup-rules-result-grid {
  padding: 14px;
}

@media (max-width: 860px) {
  .cleanup-rules-change-grid {
    grid-template-columns: 1fr;
  }
}
.etsy-sales-preview-panel .etsy-preview-body {
  gap: 12px;
}

.etsy-sales-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding-top: 0;
  padding-bottom: 0;
}

.etsy-sales-controls {
  display: grid;
  grid-template-columns: minmax(150px, 180px) minmax(280px, 1fr) minmax(190px, 230px);
  gap: 10px;
  padding: 0 20px;
}

.etsy-sales-controls .field {
  gap: 6px;
}

.etsy-sales-controls span {
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 900;
}

.etsy-sales-table {
  min-width: 1380px;
  table-layout: fixed;
}

.etsy-sales-table th,
.etsy-sales-table td {
  padding: 8px 7px;
  font-size: 0.82rem;
}

.etsy-sales-table th:nth-child(1),
.etsy-sales-table td:nth-child(1) {
  width: 92px;
}

.etsy-sales-table th:nth-child(2),
.etsy-sales-table td:nth-child(2),
.etsy-sales-table th:nth-child(3),
.etsy-sales-table td:nth-child(3),
.etsy-sales-table th:nth-child(4),
.etsy-sales-table td:nth-child(4) {
  width: 112px;
}

.etsy-sales-table th:nth-child(5),
.etsy-sales-table td:nth-child(5) {
  width: 220px;
}

.etsy-sales-table th:nth-child(6),
.etsy-sales-table td:nth-child(6),
.etsy-sales-table th:nth-child(9),
.etsy-sales-table td:nth-child(9) {
  width: 74px;
}

.etsy-sales-table th:nth-child(7),
.etsy-sales-table td:nth-child(7),
.etsy-sales-table th:nth-child(8),
.etsy-sales-table td:nth-child(8) {
  width: 94px;
}

.etsy-sales-table th:nth-child(10),
.etsy-sales-table td:nth-child(10) {
  width: 150px;
}

.etsy-sales-table th:nth-child(11),
.etsy-sales-table td:nth-child(11),
.etsy-sales-table th:nth-child(12),
.etsy-sales-table td:nth-child(12) {
  width: 120px;
}

.etsy-sales-table th:nth-child(13),
.etsy-sales-table td:nth-child(13) {
  width: 150px;
}

.etsy-sales-action-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.etsy-sales-action-row .button {
  width: 100%;
}

.etsy-sales-preview-detail {
  margin: 0 20px 20px;
  border: 1px solid rgba(23, 50, 77, 0.09);
  border-radius: 8px;
  background: #FBFCFD;
  padding: 14px;
}

.etsy-sales-preview-detail[hidden] {
  display: none;
}

.etsy-sales-safe-note {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(200, 155, 43, 0.28);
  border-radius: 8px;
  background: rgba(200, 155, 43, 0.10);
  color: var(--navy);
  font-weight: 800;
}

.etsy-sales-detail-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(300px, 1.05fr);
  gap: 16px;
}

.etsy-sales-detail-grid h4 {
  margin: 14px 0 8px;
  color: var(--navy);
}

.etsy-sales-detail-grid p {
  margin: 0 0 7px;
  color: #263246;
  font-size: 0.9rem;
}

@media (max-width: 1100px) {
  .etsy-sales-summary,
  .etsy-sales-controls,
  .etsy-sales-detail-grid {
    grid-template-columns: 1fr;
  }
}

.etsy-sales-preview-panel .connection-actions {
  gap: 8px;
}

.etsy-sale-demo-badge {
  display: inline-block;
  margin: 0 6px 4px 0;
  padding: 3px 6px;
  font-size: 0.68rem;
  line-height: 1;
  vertical-align: middle;
}

.etsy-sales-table-image,
.etsy-sales-table-image-placeholder {
  width: 48px;
  min-height: 48px;
}

.etsy-sales-table-image {
  display: grid;
  gap: 3px;
  margin: 0;
  justify-items: center;
}

.etsy-sales-table-image img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #FFFFFF;
}

.etsy-sales-table-image figcaption {
  max-width: 58px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
}

.etsy-sales-table-image-placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed var(--border);
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  background: #FFFFFF;
}

.etsy-sales-detail-image-frame {
  display: inline-grid;
  gap: 5px;
  margin: 0 0 12px;
}

/* Etsy Sync Staging - Image column thumbnail (Table View) and Listing Import Queue Image column.
   Scoped by the table-wrap id so the shared .etsy-match-table nth-child width rules used by the
   other Etsy tables are left untouched. */
#etsySyncStagingTableWrap .etsy-match-table th:nth-child(1),
#etsySyncStagingTableWrap .etsy-match-table td:nth-child(1),
#etsyImportQueueListingsTableWrap .etsy-match-table th:nth-child(1),
#etsyImportQueueListingsTableWrap .etsy-match-table td:nth-child(1) {
  width: 60px;
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
}

.etsy-staging-table-image,
.etsy-staging-table-image-placeholder {
  width: 44px;
  min-height: 44px;
  margin: 0 auto;
}

.etsy-staging-table-image {
  display: grid;
  margin: 0 auto;
}

.etsy-staging-table-image img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #FFFFFF;
}

.etsy-staging-table-image-placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed var(--border);
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  background: #FFFFFF;
}

/* Etsy Sync Staging explanation banner (first-time setup / new-listings guidance) */
.etsy-staging-howto {
  padding: 12px 16px;
  background: var(--cream, #F7F1E8);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.etsy-staging-howto p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink);
}

/* Card View / Table View toggle */
.etsy-staging-view-toggle {
  display: inline-flex;
  gap: 6px;
}

.etsy-staging-view-toggle .button.active {
  background: var(--navy);
  color: #FFFFFF;
  border-color: var(--navy);
}

/* Suggested-match chip shown in the Matched Product / Listing cell when a listing is unmatched
   and a candidate was found. Purely informational until the button is clicked. */
.etsy-staging-suggestion {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.etsy-staging-suggestion .field-help {
  width: 100%;
  margin: 0;
}

/* Etsy Sync Staging match picker - centered modal (reuses .modal / .modal-backdrop base rules).
   Confirm Match / Cancel stay in the modal's fixed .modal-actions footer, so they are always
   visible; only the candidate list below scrolls if there are many Products / Listings records. */
.etsy-match-modal {
  width: min(640px, 100%);
}

.etsy-match-modal-context {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.etsy-match-modal-image-el,
.etsy-match-modal-image-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  flex-shrink: 0;
}

.etsy-match-modal-image-el {
  object-fit: cover;
  border: 1px solid var(--border);
  background: #FFFFFF;
}

.etsy-match-modal-image-placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
  padding: 6px;
}

.etsy-match-modal-facts h4 {
  margin: 0 0 8px;
  color: var(--navy);
}

.etsy-match-modal-facts dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: 0;
  font-size: 0.85rem;
}

.etsy-match-modal-facts dt {
  color: var(--muted);
  font-weight: 700;
}

.etsy-match-modal-facts dd {
  margin: 0;
  color: var(--navy);
}

.etsy-match-modal-suggestion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid rgba(23, 50, 77, 0.12);
  border-radius: 8px;
  background: #FBF8F1;
}

.etsy-match-modal-suggestion .field-help {
  width: 100%;
  margin: 0;
}

.etsy-match-modal-list {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding: 2px;
  margin: 10px 0;
  scrollbar-color: rgba(23, 50, 77, 0.26) transparent;
  scrollbar-width: thin;
}

.etsy-match-modal-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #FFFFFF;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.etsy-match-modal-row:hover {
  border-color: var(--green);
}

.etsy-match-modal-row.selected {
  border-color: var(--green);
  background: rgba(46, 125, 50, 0.08);
  box-shadow: inset 0 0 0 1px var(--green);
}

.etsy-match-modal-row-name {
  font-weight: 700;
  color: var(--navy);
}

.etsy-match-modal-row-meta {
  font-size: 0.75rem;
  color: var(--muted);
}

/* Card View grid */
.etsy-staging-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  padding: 10px 0 18px;
}

.etsy-staging-cards .empty-state {
  grid-column: 1 / -1;
}

.etsy-staging-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: var(--soft-shadow);
}

.etsy-staging-card-image-frame {
  display: grid;
  place-items: center;
}

.etsy-staging-card-image {
  width: 100%;
  max-width: 220px;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #FFFFFF;
}

.etsy-staging-card-image-placeholder {
  width: 100%;
  max-width: 220px;
  height: 160px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  background: #FFFFFF;
}

.etsy-staging-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.etsy-staging-card-title {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--ink);
}

.etsy-staging-card-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
  margin: 0;
}

.etsy-staging-card-facts div {
  display: flex;
  flex-direction: column;
}

.etsy-staging-card-facts dt {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.etsy-staging-card-facts dd {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink);
}

.etsy-staging-card-match {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.etsy-staging-card-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.etsy-staging-card-notes-field {
  margin: 0;
}

.etsy-staging-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.etsy-sales-detail-image {
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #FFFFFF;
}

.etsy-sales-detail-image-frame figcaption {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.etsy-sales-detail-image-placeholder {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin: 0 0 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  background: #FFFFFF;
}

/* Phase 4B image column width overrides */
.etsy-sales-table th:nth-child(1),
.etsy-sales-table td:nth-child(1) {
  width: 68px;
}

.etsy-sales-table th:nth-child(2),
.etsy-sales-table td:nth-child(2) {
  width: 92px;
}

.etsy-sales-table th:nth-child(3),
.etsy-sales-table td:nth-child(3),
.etsy-sales-table th:nth-child(4),
.etsy-sales-table td:nth-child(4),
.etsy-sales-table th:nth-child(5),
.etsy-sales-table td:nth-child(5) {
  width: 112px;
}

.etsy-sales-table th:nth-child(6),
.etsy-sales-table td:nth-child(6) {
  width: 220px;
}

.etsy-sales-table th:nth-child(7),
.etsy-sales-table td:nth-child(7),
.etsy-sales-table th:nth-child(10),
.etsy-sales-table td:nth-child(10) {
  width: 74px;
}

.etsy-sales-table th:nth-child(8),
.etsy-sales-table td:nth-child(8),
.etsy-sales-table th:nth-child(9),
.etsy-sales-table td:nth-child(9) {
  width: 94px;
}

.etsy-sales-table th:nth-child(11),
.etsy-sales-table td:nth-child(11) {
  width: 150px;
}

.etsy-sales-table th:nth-child(12),
.etsy-sales-table td:nth-child(12),
.etsy-sales-table th:nth-child(13),
.etsy-sales-table td:nth-child(13) {
  width: 120px;
}

.etsy-sales-table th:nth-child(14),
.etsy-sales-table td:nth-child(14) {
  width: 150px;
}

/* Phase 4C selected Sales Preview local import */
.etsy-sales-import-panel,
.etsy-sales-import-preview {
  display: grid;
  gap: 10px;
  margin: 4px 20px 0;
  padding: 12px;
  border: 1px solid rgba(23, 50, 77, 0.10);
  border-radius: 8px;
  background: #FBFCFD;
}

.etsy-sales-import-panel h4,
.etsy-sales-import-preview h4,
.etsy-sales-import-result h5 {
  margin: 0 0 4px;
  color: var(--navy);
}

.etsy-sales-import-panel p,
.etsy-sales-import-preview p {
  margin: 0;
  color: #405166;
  font-size: 0.82rem;
  font-weight: 750;
}

.etsy-sales-import-controls,
.etsy-sales-import-summary,
.etsy-sales-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.etsy-sales-import-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid rgba(23, 50, 77, 0.10);
  border-radius: 999px;
  background: #FFFFFF;
  color: #405166;
  font-size: 0.76rem;
  font-weight: 850;
}

.etsy-sales-import-checkbox {
  display: grid;
  justify-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 850;
  line-height: 1.05;
  text-align: center;
}

.etsy-sales-import-checkbox input {
  width: 18px;
  height: 18px;
}

.etsy-sales-import-preview[hidden] {
  display: none;
}

.etsy-sales-import-table-wrap {
  padding: 8px 0 0;
}

.etsy-sales-import-table {
  min-width: 1280px;
  table-layout: fixed;
}

.etsy-sales-import-table th,
.etsy-sales-import-table td {
  padding: 7px 6px;
  font-size: 0.78rem;
  vertical-align: top;
}

.etsy-sales-import-table th:nth-child(5),
.etsy-sales-import-table td:nth-child(5),
.etsy-sales-import-table th:nth-child(13),
.etsy-sales-import-table td:nth-child(13) {
  width: 170px;
}

.compact-warning-list {
  margin: 0;
  padding-left: 16px;
}

.etsy-sales-import-result {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(45, 125, 92, 0.22);
  border-radius: 8px;
  background: rgba(45, 125, 92, 0.08);
}

.sales-tracker-demo-badge,
.sales-tracker-source-badge {
  margin-left: 4px;
  vertical-align: middle;
}

.etsy-sales-table {
  min-width: 1460px;
}

.etsy-sales-table th:nth-child(1),
.etsy-sales-table td:nth-child(1) {
  width: 62px;
  text-align: center;
}

.etsy-sales-table th:nth-child(2),
.etsy-sales-table td:nth-child(2) {
  width: 68px;
}

.etsy-sales-table th:nth-child(3),
.etsy-sales-table td:nth-child(3) {
  width: 92px;
}

.etsy-sales-table th:nth-child(4),
.etsy-sales-table td:nth-child(4),
.etsy-sales-table th:nth-child(5),
.etsy-sales-table td:nth-child(5),
.etsy-sales-table th:nth-child(6),
.etsy-sales-table td:nth-child(6) {
  width: 112px;
}

.etsy-sales-table th:nth-child(7),
.etsy-sales-table td:nth-child(7) {
  width: 220px;
}

.etsy-sales-table th:nth-child(8),
.etsy-sales-table td:nth-child(8),
.etsy-sales-table th:nth-child(11),
.etsy-sales-table td:nth-child(11) {
  width: 74px;
}

.etsy-sales-table th:nth-child(9),
.etsy-sales-table td:nth-child(9),
.etsy-sales-table th:nth-child(10),
.etsy-sales-table td:nth-child(10) {
  width: 94px;
}

.etsy-sales-table th:nth-child(12),
.etsy-sales-table td:nth-child(12) {
  width: 150px;
}

.etsy-sales-table th:nth-child(13),
.etsy-sales-table td:nth-child(13),
.etsy-sales-table th:nth-child(14),
.etsy-sales-table td:nth-child(14) {
  width: 120px;
}

.etsy-sales-table th:nth-child(15),
.etsy-sales-table td:nth-child(15) {
  width: 150px;
}

/* Phase 4C layout polish for selected sales import */
.etsy-sales-import-table-action {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.5fr) auto;
  gap: 10px;
  align-items: center;
  margin: 6px 20px 0;
  padding: 10px 12px;
  border: 1px solid rgba(23, 50, 77, 0.12);
  border-radius: 8px;
  background: rgba(251, 252, 253, 0.98);
  box-shadow: 0 8px 18px rgba(23, 50, 77, 0.08);
}

.etsy-sales-import-table-action-copy {
  display: grid;
  gap: 2px;
}

.etsy-sales-import-table-action-copy strong {
  color: var(--navy);
  font-size: 0.86rem;
}

.etsy-sales-import-table-action-copy p {
  margin: 0;
  color: #405166;
  font-size: 0.74rem;
  font-weight: 750;
  line-height: 1.25;
}

.etsy-sales-status-badge {
  min-width: 72px;
  justify-content: center;
  padding: 5px 7px;
  line-height: 1.05;
  text-align: center;
  white-space: normal;
}

.etsy-sales-table th:nth-child(13),
.etsy-sales-table td:nth-child(13),
.etsy-sales-table th:nth-child(14),
.etsy-sales-table td:nth-child(14) {
  width: 106px;
  text-align: center;
}

.etsy-sales-table th:nth-child(15),
.etsy-sales-table td:nth-child(15) {
  width: 156px;
}

@media (max-width: 1100px) {
  .etsy-sales-import-table-action {
    position: static;
    grid-template-columns: 1fr;
  }
}

/* Phase 4D Sales Tracker demo/test filtering and cleanup */
.dashboard-demo-note {
  margin: -2px 20px 14px;
  color: #405166;
  font-weight: 800;
}

.sales-demo-controls,
.sales-demo-removal-confirm,
.sales-demo-removal-result {
  display: grid;
  gap: 10px;
  margin: 0 20px 12px;
  padding: 12px;
  border: 1px solid rgba(23, 50, 77, 0.10);
  border-radius: 8px;
  background: #FBFCFD;
}

.sales-demo-controls {
  grid-template-columns: minmax(190px, 240px) minmax(260px, 1fr) auto;
  align-items: end;
}

.sales-demo-notice,
.sales-demo-removal-confirm p,
.sales-demo-removal-result p {
  margin: 0;
  color: #405166;
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.35;
}

.sales-demo-removal-confirm h4,
.sales-demo-removal-result h4 {
  margin: 0;
  color: var(--navy);
}

.button.danger {
  color: #FFFFFF;
  border-color: #9F3A38;
  background: #9F3A38;
}

.button.danger:hover {
  border-color: #7F2D2B;
  background: #7F2D2B;
}

@media (max-width: 900px) {
  .sales-demo-controls {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

/* Phase 4E Sales Tracker professional layout polish */
.sales-tracker-panel .panel-header {
  align-items: flex-start;
}

.sales-tracker-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 4px 20px 10px;
}

.sales-summary-card {
  min-height: 104px;
  border-color: rgba(47, 107, 79, 0.13);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFD 100%);
}

.sales-summary-card .status-label {
  font-size: 0.72rem;
  letter-spacing: 0;
}

.sales-summary-card .status-value {
  margin-top: 4px;
  font-size: clamp(1.35rem, 1.6vw, 1.75rem);
}

.sales-demo-controls {
  margin-top: 2px;
  border-color: rgba(47, 107, 79, 0.13);
  background: #FFFFFF;
}

.sales-demo-controls .field {
  gap: 6px;
}

.sales-demo-controls .field span {
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 900;
}

.sales-demo-notice-stack {
  display: grid;
  gap: 5px;
  align-self: center;
}

.sales-demo-default-note {
  margin: 0;
  color: #263246;
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.35;
}

.sales-tracker-table-wrap {
  padding-top: 8px;
}

.sales-tracker-table {
  min-width: 1300px;
  table-layout: fixed;
}

.sales-tracker-table th,
.sales-tracker-table td {
  padding: 7px 8px;
  vertical-align: top;
  font-size: 0.82rem;
  line-height: 1.28;
}

.sales-tracker-table th {
  color: #263246;
  font-size: 0.71rem;
  letter-spacing: 0;
}

/* Column order: Select, Date, Order Number, Customer, Item/Product, Qty,
   Sale Price, Fees, Total Cost, Net Profit, Sale Type, Actions */
.sales-tracker-table td:nth-child(1),
.sales-tracker-table th:nth-child(1) {
  width: 38px;
  text-align: center;
}

.sales-tracker-table td:nth-child(2),
.sales-tracker-table th:nth-child(2) {
  width: 84px;
}

.sales-tracker-table td:nth-child(3),
.sales-tracker-table th:nth-child(3) {
  width: 128px;
}

.sales-tracker-table td:nth-child(4),
.sales-tracker-table th:nth-child(4) {
  width: 130px;
}

.sales-tracker-table td:nth-child(5),
.sales-tracker-table th:nth-child(5) {
  width: 210px;
}

.sales-tracker-table td:nth-child(6),
.sales-tracker-table th:nth-child(6) {
  width: 50px;
  text-align: right;
}

.sales-tracker-table td:nth-child(7),
.sales-tracker-table th:nth-child(7) {
  width: 100px;
  text-align: center;
}

.sales-tracker-table td:nth-child(8),
.sales-tracker-table th:nth-child(8),
.sales-tracker-table td:nth-child(9),
.sales-tracker-table th:nth-child(9),
.sales-tracker-table td:nth-child(10),
.sales-tracker-table th:nth-child(10) {
  width: 100px;
  text-align: right;
}

.sales-tracker-table td:nth-child(11),
.sales-tracker-table th:nth-child(11) {
  width: 122px;
  text-align: center;
}

.sales-tracker-table td:nth-child(12),
.sales-tracker-table th:nth-child(12) {
  width: 118px;
}

.sales-select-column {
  text-align: center;
}

.sales-row-select {
  margin: 0;
  accent-color: #3B82F6;
}

.table-subtext {
  display: inline-block;
  margin-top: 1px;
  color: #94A3B8;
  font-size: 0.69rem;
  font-weight: 650;
}

.sales-item-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.sales-item-thumb {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(148, 163, 184, 0.18);
}

.sales-item-thumb-placeholder {
  display: inline-block;
  border: 1px dashed rgba(148, 163, 184, 0.4);
}

.sales-item-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
  font-weight: 750;
  line-height: 1.3;
}

.sales-demo-row {
  background: rgba(200, 155, 43, 0.07);
}

.sales-type-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.sales-tracker-demo-badge,
.sales-etsy-badge,
.sales-manual-badge {
  display: inline-flex;
}

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

/* Phase 4E follow-up: sales layout order and collapsed manual sale polish */
#sales .sales-tracker-panel,
#sales .manual-sale-panel {
  border-color: rgba(59, 130, 246, 0.22);
  background: #111827;
  color: #F8FAFC;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
}

#sales .sales-tracker-panel .panel-header h3,
#sales .manual-sale-panel h3,
#sales .sales-tracker-panel .panel-kicker,
#sales .manual-sale-panel .panel-kicker {
  color: #F8FAFC;
}

#sales .sales-tracker-panel .panel-kicker,
#sales .manual-sale-panel .panel-kicker {
  color: #CBD5E1;
}

#sales .sales-summary-card {
  border-color: rgba(148, 163, 184, 0.22);
  background: #1F2937;
  box-shadow: none;
}

#sales .sales-summary-card .status-label,
#sales .sales-summary-card .status-subtext {
  color: #CBD5E1;
}

#sales .sales-summary-card .status-trend,
#sales .sales-trend-none {
  color: #94A3B8;
}

#sales .sales-summary-card .status-value {
  color: #FFFFFF;
}

#sales .sales-demo-controls,
#sales .sales-demo-removal-confirm,
#sales .sales-demo-removal-result {
  border-color: rgba(148, 163, 184, 0.2);
  background: #172033;
}

#sales .sales-demo-default-note,
#sales .sales-demo-removal-confirm p,
#sales .sales-demo-removal-result p {
  color: #E2E8F0;
}

#sales .sales-tracker-table-wrap {
  padding-top: 8px;
}

#sales .sales-tracker-table {
  color: #E5E7EB;
}

#sales .sales-tracker-table th {
  color: #F8FAFC;
  background: #0F172A;
}

#sales .sales-tracker-table td {
  color: #E5E7EB;
  background: #111827;
  border-bottom-color: rgba(148, 163, 184, 0.15);
}

#sales .sales-tracker-table tbody tr:hover td {
  background: rgba(59, 130, 246, 0.12);
}

#sales .sales-demo-row td {
  background: rgba(200, 155, 43, 0.14);
}

#sales .sales-tracker-table .empty-row td {
  background: #111827;
  color: #94A3B8;
}

#sales .sales-etsy-badge {
  color: #431407;
  background: #F97316;
}

#sales .sales-manual-badge {
  color: #E2E8F0;
  background: rgba(148, 163, 184, 0.22);
}

.manual-sale-panel {
  margin-top: 18px;
}

.manual-sale-collapsed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.manual-sale-form-body {
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 18px;
}

#sales .manual-sale-panel .data-form label,
#sales .manual-sale-panel .field-help {
  color: #E2E8F0;
}

#sales .manual-sale-panel input,
#sales .manual-sale-panel select,
#sales .manual-sale-panel textarea {
  border-color: rgba(148, 163, 184, 0.35);
  background: #1F2937;
  color: #F8FAFC;
}

#sales .manual-sale-panel input::placeholder,
#sales .manual-sale-panel textarea::placeholder {
  color: #94A3B8;
}

#sales .manual-sale-panel input[readonly] {
  color: #CBD5E1;
  background: #172033;
}

@media (max-width: 900px) {
  .manual-sale-collapsed-header {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Phase 4F: Sales Tracker dark mockup match polish (layout/styling only) */
#sales.view.active {
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #05070C 0%, #0B1120 100%);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.14);
}

/* Sales Tracker top row: summary cards + Sales Actions card */
.sales-tracker-toprow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
  gap: 10px;
  padding: 4px 20px 10px;
}

#sales .sales-tracker-toprow .sales-tracker-summary {
  padding: 0;
}

.sales-actions-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 8px;
  background: #16213A;
}

.sales-actions-card h4 {
  margin: 0;
  color: #F8FAFC;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sales-actions-buttons {
  display: grid;
  gap: 8px;
}

.sales-actions-row {
  display: flex;
  gap: 8px;
}

.sales-actions-row .button {
  flex: 1;
  min-width: 0;
  padding-left: 8px;
  padding-right: 8px;
}

.sales-actions-refresh {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sales-actions-refresh-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

#sales .sales-actions-refresh {
  color: #F1F5F9;
  border: 1px solid rgba(148, 163, 184, 0.65);
  background: rgba(148, 163, 184, 0.1);
  box-shadow: none;
}

#sales .sales-actions-refresh:hover {
  color: #FFFFFF;
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.2);
}

#sales .sales-actions-row .button.secondary {
  color: #E2E8F0;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: transparent;
}

#sales .sales-actions-row .button.secondary:hover {
  color: #F8FAFC;
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.14);
}

/* Summary card accent colors by tone, matching the approved mockup */
#sales .sales-summary-card {
  position: relative;
  padding-left: 16px;
  overflow: hidden;
}

#sales .sales-summary-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
}

#sales .sales-summary-card--net::before {
  background: #22C55E;
}

#sales .sales-summary-card--items::before {
  background: #3B82F6;
}

#sales .sales-summary-card--aov::before {
  background: #8B5CF6;
}

#sales .sales-summary-card--demo::before {
  background: #F59E0B;
}

/* Manual Sales Tracker rebuild: accent colors for the 3 additional summary card tones
   (revenue, costs, profit, margin, orders reuse "net" green where a distinct color isn't
   needed for profit/margin, but are declared separately so future tuning is isolated). */
#sales .sales-summary-card--revenue::before {
  background: #0EA5E9;
}

#sales .sales-summary-card--costs::before {
  background: #F97316;
}

#sales .sales-summary-card--profit::before {
  background: #22C55E;
}

#sales .sales-summary-card--margin::before {
  background: #A855F7;
}

#sales .sales-summary-card--orders::before {
  background: #3B82F6;
}

#sales .sales-summary-card--aov::before {
  background: #8B5CF6;
}

#sales .sales-summary-card--feesTotal::before {
  background: #F59E0B;
}

.sales-summary-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.sales-summary-card-head .status-label {
  margin: 0;
}

.sales-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: #FFFFFF;
}

.sales-summary-icon svg {
  width: 16px;
  height: 16px;
}

.sales-summary-icon--net {
  background: #22C55E;
}

.sales-summary-icon--items {
  background: #3B82F6;
}

.sales-summary-icon--aov {
  background: #8B5CF6;
}

.sales-summary-icon--demo {
  background: #F59E0B;
}

.sales-summary-icon--revenue {
  background: #0EA5E9;
}

.sales-summary-icon--costs {
  background: #F97316;
}

.sales-summary-icon--profit {
  background: #22C55E;
}

.sales-summary-icon--margin {
  background: #A855F7;
}

.sales-summary-icon--orders {
  background: #3B82F6;
}

.sales-summary-icon--feesTotal {
  background: #F59E0B;
}

/* Demo/Test notice + filter row: left info box / middle filter buttons / right count + remove */
.sales-demo-controls {
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, auto);
  align-items: center;
}

.sales-demo-info-box {
  padding: 10px 12px;
  border: 1px solid rgba(59, 130, 246, 0.32);
  border-left: 3px solid #3B82F6;
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.10);
}

#sales .sales-demo-info-box .sales-demo-default-note {
  color: #DBEAFE;
  font-weight: 700;
}

.sales-demo-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.demo-filter-btn {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 7px;
  color: #E2E8F0;
  background: #1F2937;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.demo-filter-btn:hover {
  border-color: rgba(148, 163, 184, 0.6);
}

.demo-filter-btn.active {
  border-color: #22C55E;
  color: #052E16;
  background: #22C55E;
}

.sales-demo-side {
  display: grid;
  justify-items: end;
  gap: 8px;
  text-align: right;
}

#sales .sales-demo-side .sales-demo-notice {
  margin: 0;
  color: #FBBF24;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .sales-demo-controls {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .sales-demo-side {
    justify-items: start;
    text-align: left;
  }

  .sales-tracker-toprow {
    grid-template-columns: 1fr;
  }
}

/* Manual Sales Tracker rebuild: Date Range / Sales Channel / Order Status / Product Type /
   Profit-Loss filters row. Sits directly under the demo/test controls, above the table. */
.sales-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.06);
}

.sales-filters-row .field {
  margin-bottom: 0;
}

.sales-filters-row .field.wide {
  min-width: 220px;
}

#sales .sales-filters-row label {
  color: #E2E8F0;
}

#sales .sales-filters-row input,
#sales .sales-filters-row select {
  border-color: rgba(148, 163, 184, 0.35);
  background: #1F2937;
  color: #F8FAFC;
}

.sales-profit-filter-group {
  display: flex;
  gap: 6px;
}

#sales .sales-filters-row #salesFiltersClear {
  align-self: flex-end;
}

@media (max-width: 900px) {
  .sales-filters-row {
    flex-direction: column;
    align-items: stretch;
  }

  .sales-filters-row .field.wide {
    min-width: 0;
  }
}

/* Profit Tracker merge: Sales Tracker KPI period toggle (Month/3 Months/6 Months/Year).
   Sits between the panel header and the summary-card/Sales-Actions row. Buttons reuse the
   existing .product-filter-btn look (see the Profit/Loss filter group above and
   .product-tracker-filter-group) for visual consistency - no new button styling needed. */
.sales-period-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0 20px 10px;
}

.sales-period-toggle-label {
  color: #94A3B8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sales-period-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Profit Tracker merge: Profit Share by Channel chart relocated from #profit into #sales.
   The chart's own classes (.profit-chart-card, .profit-channel-chart, .profit-channel-
   donut*, .profit-channel-legend*, .profit-chart-empty) are unscoped/global so they still
   apply unchanged in this new location. The one thing that doesn't carry over is the old
   "#profit .panel-header h3 { color: #F8FAFC }" rule (scoped to the now-deleted #profit
   id), so the heading needs its own #sales-scoped override here, matching the same
   pattern already used for #sales .sales-tracker-panel .panel-header h3 above. */
#sales .sales-channel-chart-panel .panel-header h3 {
  color: #F8FAFC;
}

/* Dark styling for the collapsible "Etsy / Printify sync fields" details box inside the
   manual sale form, matching the rest of the dark manual-sale-panel form. */
#sales .manual-sale-panel .form-details {
  background: #172033;
  border-color: rgba(148, 163, 184, 0.25);
}

#sales .manual-sale-panel .form-details summary {
  color: #E2E8F0;
}

#sales .manual-sale-panel .form-details summary small {
  color: #94A3B8;
}

/* Bottom helper strip */
.sales-tracker-helper-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 4px 20px 18px;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: #0F172A;
}

.helper-strip-item {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.helper-strip-item strong {
  color: #F8FAFC;
  font-size: 0.78rem;
  font-weight: 900;
}

.helper-strip-item span {
  color: #94A3B8;
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.35;
}

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

@media (max-width: 640px) {
  .sales-tracker-helper-strip {
    grid-template-columns: 1fr;
  }
}

/* Phase 4F visual polish: icon buttons, clickable thumbnails, preview/detail modals */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  padding: 0;
}

.icon-button svg {
  width: 16px;
  height: 16px;
}

#sales .sales-action-row .icon-button {
  color: #93C5FD;
  border: 1px solid rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.08);
}

#sales .sales-action-row .icon-button:hover {
  color: #FFFFFF;
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.22);
}

#sales .sales-tracker-table .sales-action-row .button.ghost {
  color: #93C5FD;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: transparent;
}

#sales .sales-tracker-table .sales-action-row .button.ghost:hover {
  color: #FFFFFF;
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.14);
}

#sales .sales-tracker-table .sales-action-row .button.secondary {
  color: #FCA5A5;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: transparent;
}

#sales .sales-tracker-table .sales-action-row .button.secondary:hover {
  color: #FFFFFF;
  border-color: #EF4444;
  background: rgba(239, 68, 68, 0.16);
}

.sales-item-thumb-button {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 6px;
}

.sales-item-thumb-button:hover .sales-item-thumb,
.sales-item-thumb-button:focus-visible .sales-item-thumb {
  outline: 2px solid #3B82F6;
  outline-offset: 1px;
}

.sales-item-thumb-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
}

.sales-item-thumb-placeholder svg {
  width: 14px;
  height: 14px;
}

.image-preview-backdrop {
  background: rgba(5, 8, 15, 0.82);
}

.image-preview-panel {
  position: relative;
  max-width: min(90vw, 720px);
  max-height: 85vh;
  display: flex;
}

.image-preview-panel img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.image-preview-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 999px;
  color: #F8FAFC;
  background: #111827;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.image-preview-close:hover {
  border-color: #3B82F6;
  background: #1F2937;
}

.sale-detail-modal {
  width: min(560px, 100%);
}

/* Owner-requested: a prominent, clickable-to-enlarge image at the top of the sale detail
   popup (see viewSaleDetails() in app.js). */
.sale-detail-hero-image-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  background: none;
  margin-bottom: 14px;
}

.sale-detail-hero-image-button:hover,
.sale-detail-hero-image-button:focus-visible {
  border-color: #3B82F6;
}

.sale-detail-hero-image {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
}

.sale-detail-hero-image-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 140px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 14px;
  background: #111827;
  color: var(--muted);
}

.sale-detail-hero-image-placeholder svg {
  width: 40px;
  height: 40px;
}

.sale-detail-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.sale-detail-row:last-child {
  border-bottom: 0;
}

.sale-detail-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sale-detail-value {
  min-width: 0;
  color: #263246;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
}

.sale-detail-value .sales-item-cell {
  align-items: center;
}

.sale-detail-actions {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ===========================================================================
   Phase 5A — Product Tracker Dark Dashboard Layout Polish
   Visual/display only. Scoped entirely to #products so no other page is affected.
   =========================================================================== */

#products.view.active {
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #05070C 0%, #0B1120 100%);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.14);
}

#products .panel {
  border-color: rgba(59, 130, 246, 0.22);
  background: #111827;
  color: #F8FAFC;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
}

#products .panel-header h3,
#products h4 {
  color: #F8FAFC;
}

#products .panel-kicker,
#products .field-help,
#products .connection-message {
  color: #CBD5E1;
}

#products .empty-browser-state {
  border-color: rgba(148, 163, 184, 0.35);
  color: #94A3B8;
  background: #172033;
}

/* Summary cards */
.product-tracker-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 4px 20px 10px;
}

#products .product-summary-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 18px 12px 15px;
  text-align: center;
  overflow: hidden;
  border-color: rgba(148, 163, 184, 0.22);
  background: #1F2937;
  box-shadow: none;
}

#products .product-summary-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
}

#products .product-summary-card--total::before { background: #3B82F6; }
#products .product-summary-card--live::before { background: #22C55E; }
#products .product-summary-card--draft::before { background: #F59E0B; }
#products .product-summary-card--digital::before { background: #8B5CF6; }
#products .product-summary-card--pod::before { background: #14B8A6; }
#products .product-summary-card--missing::before { background: #EF4444; }

#products .product-summary-card .status-label {
  margin: 2px 0 0;
  color: #CBD5E1;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

#products .product-summary-card .status-subtext {
  margin: 0;
  color: #94A3B8;
  font-size: 0.68rem;
  font-weight: 650;
}

#products .product-summary-card .status-value {
  margin: 2px 0 0;
  color: #FFFFFF;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.product-summary-icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2px;
}

.product-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #FFFFFF;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.product-summary-icon svg {
  width: 19px;
  height: 19px;
}

.product-summary-icon--total { background: linear-gradient(160deg, #3B82F6, #2563EB); }
.product-summary-icon--live { background: linear-gradient(160deg, #22C55E, #16A34A); }
.product-summary-icon--draft { background: linear-gradient(160deg, #F59E0B, #D97706); }
.product-summary-icon--digital { background: linear-gradient(160deg, #8B5CF6, #7C3AED); }
.product-summary-icon--pod { background: linear-gradient(160deg, #14B8A6, #0D9488); }
.product-summary-icon--missing { background: linear-gradient(160deg, #EF4444, #DC2626); }

@media (max-width: 1250px) {
  .product-tracker-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .product-tracker-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Search / filter / actions control row */
.product-tracker-controls {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 4px 20px 14px;
}

.product-tracker-search-field {
  margin: 0;
}

#products .product-tracker-search-field input {
  border-color: rgba(148, 163, 184, 0.35);
  background: #1F2937;
  color: #F8FAFC;
}

#products .product-tracker-search-field input::placeholder {
  color: #94A3B8;
}

.product-tracker-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  color: #E2E8F0;
  background: #1F2937;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.product-filter-btn:hover {
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.14);
}

.product-filter-btn.active {
  color: #FFFFFF;
  border-color: #3B82F6;
  background: #3B82F6;
}

.product-tracker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.product-tracker-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.product-tracker-refresh-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

#products .product-tracker-refresh {
  color: #F1F5F9;
  border: 1px solid rgba(148, 163, 184, 0.65);
  background: rgba(148, 163, 184, 0.1);
  box-shadow: none;
}

#products .product-tracker-refresh:hover {
  color: #FFFFFF;
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.2);
}

#products .product-tracker-actions .button.secondary {
  color: #E2E8F0;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: transparent;
}

#products .product-tracker-actions .button.secondary:hover {
  color: #F8FAFC;
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.14);
}

@media (max-width: 1150px) {
  .product-tracker-controls {
    grid-template-columns: 1fr;
  }

  .product-tracker-actions {
    justify-content: flex-start;
  }
}

/* Table + right-side detail panel */
.product-tracker-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
  gap: 10px;
  padding: 0 20px 20px;
  align-items: start;
}

.product-tracker-table-wrap {
  padding: 0;
  overflow-x: auto;
  min-width: 0;
}

/* Phase 5A Table Condense: column widths were tightened (total ~980px, down from ~1400px)
   so the table comfortably fits beside the right-side detail panel on typical window
   widths without requiring horizontal scroll. overflow-x: auto above remains as a fallback
   for narrower windows only — it never causes the panel to overlap the table. */
.product-tracker-table {
  min-width: 970px;
  table-layout: fixed;
}

.product-tracker-table th,
.product-tracker-table td {
  padding: 6px 6px;
  vertical-align: top;
  font-size: 0.79rem;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
}

.product-tracker-table th {
  font-size: 0.68rem;
  letter-spacing: 0;
  padding: 8px 6px;
}

.product-tracker-table th:nth-child(1),
.product-tracker-table td:nth-child(1) {
  width: 58px;
}

.product-tracker-table th:nth-child(2),
.product-tracker-table td:nth-child(2) {
  width: 132px;
}

.product-tracker-table th:nth-child(3),
.product-tracker-table td:nth-child(3) {
  width: 88px;
}

.product-tracker-table th:nth-child(4),
.product-tracker-table td:nth-child(4) {
  width: 88px;
}

.product-tracker-table th:nth-child(5),
.product-tracker-table td:nth-child(5) {
  width: 104px;
}

.product-tracker-table th:nth-child(6),
.product-tracker-table td:nth-child(6),
.product-tracker-table th:nth-child(7),
.product-tracker-table td:nth-child(7) {
  width: 62px;
  text-align: right;
}

.product-tracker-table th:nth-child(8),
.product-tracker-table td:nth-child(8) {
  width: 68px;
  text-align: right;
}

.product-tracker-table th:nth-child(9),
.product-tracker-table td:nth-child(9) {
  width: 52px;
  text-align: center;
}

.product-tracker-table th:nth-child(10),
.product-tracker-table td:nth-child(10) {
  width: 86px;
  text-align: center;
}

.product-tracker-table th:nth-child(11),
.product-tracker-table td:nth-child(11) {
  width: 74px;
}

.product-tracker-table th:nth-child(12),
.product-tracker-table td:nth-child(12) {
  width: 104px;
}

#products .product-tracker-table {
  color: #E5E7EB;
}

#products .product-tracker-table th {
  color: #F8FAFC;
  background: #0F172A;
}

#products .product-tracker-table td {
  color: #E5E7EB;
  background: #111827;
  border-bottom-color: rgba(148, 163, 184, 0.15);
}

#products .product-tracker-table tbody tr:hover td {
  background: rgba(59, 130, 246, 0.1);
  cursor: pointer;
}

#products .product-tracker-table .empty-row td {
  background: #111827;
  color: #94A3B8;
  cursor: default;
}

#products .product-row-selected td {
  background: rgba(59, 130, 246, 0.16);
  box-shadow: inset 0 0 0 1px #3B82F6;
}

.product-thumb {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 7px;
  object-fit: cover;
  background: rgba(148, 163, 184, 0.18);
}

.product-thumb-placeholder {
  align-items: center;
  justify-content: center;
  color: #93C5FD;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(59, 130, 246, 0.14);
}

.product-thumb-placeholder svg {
  width: 20px;
  height: 20px;
}

/* Channel / type / status / readiness / margin badges */
.product-channel-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
}

.product-channel-badge {
  font-size: 0.67rem;
  padding: 3px 7px;
  min-height: auto;
  white-space: nowrap;
}

.product-channel-badge--etsy { color: #431407; background: #F97316; }
.product-channel-badge--printify { color: #052E1A; background: #22C55E; }
.product-channel-badge--digital { color: #FFFFFF; background: #8B5CF6; }
.product-channel-badge--pod { color: #042F2C; background: #14B8A6; }
.product-channel-badge--sd { color: #FFFFFF; background: #3B82F6; }
.product-channel-badge--default { color: #E2E8F0; background: rgba(148, 163, 184, 0.25); }

/* Phase 5A Pass 2: allow the naturally longer status/readiness/type badge labels to wrap
   onto a second line instead of overlapping the next table cell. Scoped to #products only
   so no other page's .badge usage (e.g. grades, Etsy badges) is affected. */
#products .badge.product-type-badge,
#products .badge.product-status-badge,
#products .badge.product-readiness-badge {
  display: inline-block;
  min-height: auto;
  max-width: 100%;
  padding: 4px 9px;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}

.product-type-badge--green { color: #86EFAC; background: rgba(34, 197, 94, 0.18); }
.product-type-badge--blue { color: #93C5FD; background: rgba(59, 130, 246, 0.18); }
.product-type-badge--purple { color: #D8B4FE; background: rgba(168, 85, 247, 0.18); }
.product-type-badge--magenta { color: #F9A8D4; background: rgba(236, 72, 153, 0.18); }
.product-type-badge--teal { color: #5EEAD4; background: rgba(20, 184, 166, 0.18); }
.product-type-badge--default { color: #E2E8F0; background: rgba(148, 163, 184, 0.2); }

.product-status-badge--live { color: #86EFAC; background: rgba(34, 197, 94, 0.18); }
.product-status-badge--draft { color: #FCD34D; background: rgba(245, 158, 11, 0.18); }
.product-status-badge--needs-review { color: #FCA5A5; background: rgba(239, 68, 68, 0.18); }
.product-status-badge--idea { color: #93C5FD; background: rgba(59, 130, 246, 0.18); }
.product-status-badge--archived { color: #CBD5E1; background: rgba(148, 163, 184, 0.2); }
.product-status-badge--default { color: #E2E8F0; background: rgba(148, 163, 184, 0.2); }

.product-readiness-badge--ready { color: #86EFAC; background: rgba(34, 197, 94, 0.18); }
.product-readiness-badge--cleanup-needed { color: #FCD34D; background: rgba(245, 158, 11, 0.18); }
.product-readiness-badge--missing-cost { color: #FCA5A5; background: rgba(239, 68, 68, 0.18); }
.product-readiness-badge--missing-price { color: #FDBA74; background: rgba(249, 115, 22, 0.18); }
.product-readiness-badge--in-progress { color: #93C5FD; background: rgba(59, 130, 246, 0.18); }

/* ===========================================================================
   Products / Listings merge: the Product Tracker and Products / Listings tabs are now one
   "Products" tab. Additions below are the All/Products/Listings segmented toggle, the
   Product-vs-Listing "kind" badge in the unified table's Type column, and the styling the
   relocated listing detail panel / Add Listing form used to get from #listings-scoped rules
   (that section, and its scoping, no longer exist). Mirrors the existing #products
   dark-dashboard pattern already used by the rest of this tab for visual consistency. All
   .listing-* class rules that used to live under the now-removed #listings section are left
   in place further down this file (still used by the relocated listing detail panel/form
   markup where unscoped, otherwise now dead/unused but harmless).
   =========================================================================== */
.product-view-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 10px;
}

.product-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 16px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  color: #E2E8F0;
  background: #1F2937;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.product-view-toggle-btn:hover {
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.14);
}

.product-view-toggle-btn.active {
  color: #FFFFFF;
  border-color: #3B82F6;
  background: #3B82F6;
}

.unified-record-type-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.unified-record-badge {
  display: inline-block;
  min-height: auto;
  padding: 3px 8px;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}

.unified-record-badge--product { color: #93C5FD; background: rgba(59, 130, 246, 0.22); }
.unified-record-badge--listing { color: #D8B4FE; background: rgba(168, 85, 247, 0.22); }

/* Only one of #productDetailPanel / #listingDetailPanel is ever visible at a time - the
   other gets the native `hidden` attribute set by renderUnifiedProductListingDetailPanels()
   in app.js. This explicit rule is a safety net matching the same pattern already used
   elsewhere in this file (see .etsy-collapsible-body[hidden]) in case anything overrides the
   default UA [hidden] behavior. */
.unified-detail-panel[hidden] {
  display: none;
}

/* The listing detail panel's action buttons (Edit Listing / Set Draft / Mark Active /
   Archive) used to be styled by "#listings .listing-detail-actions .button.ghost" - that
   rule is now dead since <section id="listings"> was removed. Re-scoped to #products below
   so the relocated panel keeps the same look. */
#products .listing-detail-actions .button.ghost {
  color: #E2E8F0;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: transparent;
}

#products .listing-detail-actions .button.ghost:hover {
  color: #F8FAFC;
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.14);
}

#products .badge.listing-status-badge {
  display: inline-block;
  min-height: auto;
  padding: 4px 9px;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}

/* The relocated Add/Edit Listing form (#listingFormPanel) used to get its collapsed-header
   layout and its form field theming from "#listings"-scoped rules. The header/body layout
   rules are purely structural (no color), so they are unscoped here, matching the existing
   unscoped .product-form-collapsed-header / .product-form-body pattern used by the Add
   Product form right above it. The color/theme rules are re-scoped to #products
   .listing-form-panel, matching the existing #products .product-form-panel pattern. */
.listing-form-collapsed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.listing-form-body {
  padding: 0 20px 20px;
}

#products .listing-form-panel .data-form label,
#products .listing-form-panel .field-help {
  color: #CBD5E1;
}

#products .listing-form-panel input,
#products .listing-form-panel select,
#products .listing-form-panel textarea {
  border-color: rgba(148, 163, 184, 0.35);
  background: #1F2937;
  color: #F8FAFC;
}

#products .listing-form-panel input::placeholder,
#products .listing-form-panel textarea::placeholder {
  color: #94A3B8;
}

#products .listing-form-panel input[readonly] {
  color: #94A3B8;
  background: #172033;
}

#products .listing-form-panel .form-section-label:first-of-type {
  margin-top: 0;
}

@media (max-width: 900px) {
  .listing-form-collapsed-header {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Phase 5B: display-only cost-readiness guidance note in the right-side detail panel. */
.product-detail-cost-note {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(148, 163, 184, 0.1);
  color: #CBD5E1;
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.4;
}

.product-detail-cost-note--warning {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.12);
  color: #FCA5A5;
  font-weight: 800;
}

.product-margin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 0.71rem;
  font-weight: 850;
}

.product-margin-badge--high { color: #86EFAC; background: rgba(34, 197, 94, 0.18); }
.product-margin-badge--mid { color: #FCD34D; background: rgba(245, 158, 11, 0.18); }
.product-margin-badge--low { color: #FCA5A5; background: rgba(239, 68, 68, 0.18); }

.product-profit-positive { color: #4ADE80; font-weight: 800; }
.product-profit-negative { color: #F87171; font-weight: 800; }
.product-missing-cost { color: #FCA5A5; }

/* Phase 6A polish pass 2: Profit Tracker's Net Profit cell/value now colors on the same
   margin threshold as the Margin badge (getProfitRowColorTone: >=20% green, 15-19.9%
   amber, <15% red) instead of plain positive/negative. Colors match the existing
   .product-margin-badge--high/mid/low text colors for visual consistency. */
.profit-net-tone-high { color: #4ADE80; font-weight: 800; }
.profit-net-tone-mid { color: #FCD34D; font-weight: 800; }
.profit-net-tone-low { color: #F87171; font-weight: 800; }

/* Phase 5A Table Condense: compact the Actions column so its buttons stay aligned and
   visible within the narrower 104px column instead of pushing off-screen. */
#products .product-tracker-table .product-action-row {
  gap: 4px;
}

#products .product-tracker-table .product-action-row .button {
  min-height: 26px;
  padding: 4px 6px;
  font-size: 0.72rem;
}

#products .product-tracker-table .product-action-row .icon-button {
  width: 26px;
  min-width: 26px;
  padding: 0;
}

#products .product-tracker-table .product-action-row .icon-button svg {
  width: 14px;
  height: 14px;
}

#products .product-tracker-table .product-action-row .icon-button {
  color: #93C5FD;
  border: 1px solid rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.08);
}

#products .product-tracker-table .product-action-row .icon-button:hover {
  color: #FFFFFF;
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.22);
}

#products .product-tracker-table .product-action-row .button.ghost {
  color: #93C5FD;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: transparent;
}

#products .product-tracker-table .product-action-row .button.ghost:hover {
  color: #FFFFFF;
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.14);
}

#products .product-tracker-table .product-action-row .button.secondary {
  color: #FCA5A5;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: transparent;
}

#products .product-tracker-table .product-action-row .button.secondary:hover {
  color: #FFFFFF;
  border-color: #EF4444;
  background: rgba(239, 68, 68, 0.16);
}

/* Right-side product detail panel */
.product-detail-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 8px;
  background: #16213A;
  align-self: start;
}

.product-detail-empty {
  margin: 0;
  color: #94A3B8;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
  padding: 24px 4px;
}

.product-detail-image-frame {
  display: grid;
  place-items: center;
  width: 100%;
  height: 170px;
  margin-bottom: 14px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: linear-gradient(160deg, rgba(59, 130, 246, 0.14), rgba(15, 23, 42, 0.4));
}

.product-detail-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-detail-image-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  color: #93C5FD;
  background: rgba(59, 130, 246, 0.18);
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.3);
}

.product-detail-image-placeholder svg {
  width: 30px;
  height: 30px;
}

.product-detail-name {
  margin: 0 0 8px;
  color: #F8FAFC;
  font-size: 1rem;
  line-height: 1.3;
}

/* Follow-up fix: product type shown as a plain-text subtitle directly under the name,
   in addition to the existing type badge below, so the product identity reads clearly
   at the top of the panel per the approved mockup. Uses the same row.product.type field
   already used by the type badge - no invented data. */
.product-detail-type-subtitle {
  margin: -4px 0 10px;
  color: #94A3B8;
  font-size: 0.82rem;
  font-weight: 700;
}

.product-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.product-detail-rows {
  display: grid;
  gap: 2px;
}

.product-detail-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 7px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.product-detail-row:last-child {
  border-bottom: 0;
}

.product-detail-label {
  margin: 0;
  color: #94A3B8;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.product-detail-value {
  min-width: 0;
  color: #E5E7EB;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
}

.product-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

#products .product-detail-actions .button.ghost {
  color: #93C5FD;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: transparent;
}

#products .product-detail-actions .button.ghost:hover {
  color: #FFFFFF;
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.14);
}

@media (max-width: 1150px) {
  .product-tracker-body {
    grid-template-columns: 1fr;
  }
}

/* Collapsed Add Product form panel, mirroring the Sales Tracker manual-entry pattern */
.product-form-panel {
  margin-top: 0;
}

.product-form-collapsed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.product-form-body {
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 18px;
}

#products .product-form-panel .data-form label,
#products .product-form-panel .field-help {
  color: #E2E8F0;
}

#products .product-form-panel input,
#products .product-form-panel select,
#products .product-form-panel textarea {
  border-color: rgba(148, 163, 184, 0.35);
  background: #1F2937;
  color: #F8FAFC;
}

#products .product-form-panel input::placeholder,
#products .product-form-panel textarea::placeholder {
  color: #94A3B8;
}

#products .product-form-panel input[readonly] {
  color: #CBD5E1;
  background: #172033;
}

#products .product-form-panel .form-details summary small {
  color: #94A3B8;
}

@media (max-width: 900px) {
  .product-form-collapsed-header {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Etsy-Created Product Cleanup Review: dark-theme the existing sub-components so the
   whole Product Tracker page reads as one consistent dark canvas. Cleanup logic itself
   is unchanged; this only recolors existing markup. */
#products .product-cleanup-summary .status-card {
  border-color: rgba(148, 163, 184, 0.22);
  background: #1F2937;
}

#products .product-cleanup-summary .status-label,
#products .product-cleanup-summary .status-subtext {
  color: #CBD5E1;
}

#products .product-cleanup-summary .status-value {
  color: #FFFFFF;
}

#products .cleanup-rules-panel {
  border-color: rgba(59, 130, 246, 0.25);
  border-left-color: #3B82F6;
  background: #172033;
}

#products .cleanup-rules-panel p,
#products .cleanup-rules-panel h4 {
  color: #E2E8F0;
}

#products .cleanup-toolbar input {
  border-color: rgba(148, 163, 184, 0.35);
  background: #1F2937;
  color: #F8FAFC;
}

#products .cleanup-toolbar label {
  color: #E2E8F0;
}

#products .etsy-match-filters .button,
#products .cleanup-rules-controls .button {
  color: #E2E8F0;
  border-color: rgba(148, 163, 184, 0.4);
  background: #1F2937;
}

#products .etsy-match-filters .button.active {
  color: #FFFFFF;
  border-color: #3B82F6;
  background: #3B82F6;
}

#products .product-cleanup-table-wrap table th {
  color: #F8FAFC;
  background: #0F172A;
}

#products .product-cleanup-table-wrap table td {
  color: #E5E7EB;
  background: #111827;
  border-bottom-color: rgba(148, 163, 184, 0.15);
}

#products .product-cleanup-rules-preview,
#products .product-cleanup-panel,
#products .product-cleanup-backup-detail {
  border-color: rgba(148, 163, 184, 0.22);
  background: #172033;
  color: #E2E8F0;
}

/* ===========================================================================
   Phase 6A — Profit Tracker Dark Dashboard
   Visual/display only. Scoped entirely to #profit so no other page is affected.
   Mirrors the existing #products dark-dashboard pattern for visual consistency.
   =========================================================================== */

#profit.view.active {
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #05070C 0%, #0B1120 100%);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.14);
}

#profit .panel {
  border-color: rgba(59, 130, 246, 0.22);
  background: #111827;
  color: #F8FAFC;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
}

#profit .panel-header h3,
#profit h4 {
  color: #F8FAFC;
}

#profit .panel-kicker {
  color: #CBD5E1;
}

/* Phase 6A polish: the shared .panel-header class is a row flex layout with
   justify-content: space-between, which is meant for a title + right-aligned action on
   one line. Profit Tracker's header only has a title + a long subtitle, so that layout
   pushed the subtitle out to the far right of the title instead of stacking cleanly
   underneath it. Scoped to #profit only — this does not touch the shared .panel-header
   class used by other pages, and it does not change the two small chart panel headers
   below (title-only, so block vs. flex has no visible effect there). */
#profit .panel-header {
  display: block;
  padding: 18px 20px 14px;
}

#profit .panel-header h3 {
  margin: 0;
}

#profit .panel-header .panel-kicker {
  margin: 6px 0 0;
  max-width: 640px;
}

/* Summary cards */
.profit-tracker-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 4px 20px 10px;
}

#profit .profit-summary-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 18px 12px 15px;
  text-align: center;
  overflow: hidden;
  border-color: rgba(148, 163, 184, 0.22);
  background: #1F2937;
  box-shadow: none;
}

#profit .profit-summary-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
}

#profit .profit-summary-card--profit::before { background: #22C55E; }
#profit .profit-summary-card--margin::before { background: #3B82F6; }
#profit .profit-summary-card--revenue::before { background: #8B5CF6; }
#profit .profit-summary-card--costs::before { background: #F59E0B; }
#profit .profit-summary-card--fees::before { background: #EF4444; }
#profit .profit-summary-card--best::before { background: #14B8A6; }

#profit .profit-summary-card .status-label {
  margin: 2px 0 0;
  color: #CBD5E1;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

#profit .profit-summary-card .status-subtext {
  margin: 0;
  color: #94A3B8;
  font-size: 0.68rem;
  font-weight: 650;
}

#profit .profit-summary-card .status-value {
  margin: 2px 0 0;
  color: #FFFFFF;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
  word-break: break-word;
}

/* Follow-up fix: product count line for the Total Costs card only, e.g.
   "4 products included". Rendered only when card.meta is set (Total Costs card). */
.profit-summary-meta {
  margin: 3px 0 0;
  color: #94A3B8;
  font-size: 0.66rem;
  font-weight: 700;
}

/* Phase 6A polish pass 2: prior-period trend text under each summary card value, e.g.
   "▲ 18.6% vs last month". Hidden entirely (no markup rendered) when there is no prior
   period to compare against, so there is nothing to style in that case. */
.profit-summary-trend {
  margin: 4px 0 0;
  font-size: 0.68rem;
  font-weight: 800;
}

.profit-summary-trend--up { color: #4ADE80; }
.profit-summary-trend--down { color: #F87171; }
.profit-summary-trend--flat { color: #94A3B8; }

.profit-summary-icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2px;
}

.profit-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #FFFFFF;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.profit-summary-icon svg {
  width: 19px;
  height: 19px;
}

.profit-summary-icon--profit { background: linear-gradient(160deg, #22C55E, #16A34A); }
.profit-summary-icon--margin { background: linear-gradient(160deg, #3B82F6, #2563EB); }
.profit-summary-icon--revenue { background: linear-gradient(160deg, #8B5CF6, #7C3AED); }
.profit-summary-icon--costs { background: linear-gradient(160deg, #F59E0B, #D97706); }
.profit-summary-icon--fees { background: linear-gradient(160deg, #EF4444, #DC2626); }
.profit-summary-icon--best { background: linear-gradient(160deg, #14B8A6, #0D9488); }

@media (max-width: 1250px) {
  .profit-tracker-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .profit-tracker-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Search / filter / time-filter / actions control row */
.profit-tracker-controls {
  display: grid;
  grid-template-columns: minmax(200px, 240px) auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 4px 20px 14px;
}

.profit-tracker-search-field {
  margin: 0;
}

#profit .profit-tracker-search-field input {
  border-color: rgba(148, 163, 184, 0.35);
  background: #1F2937;
  color: #F8FAFC;
}

#profit .profit-tracker-search-field input::placeholder {
  color: #94A3B8;
}

.profit-tracker-filter-group,
.profit-tracker-time-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profit-filter-btn,
.profit-time-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  color: #E2E8F0;
  background: #1F2937;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.profit-filter-btn:hover,
.profit-time-btn:hover {
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.14);
}

.profit-filter-btn.active,
.profit-time-btn.active {
  color: #FFFFFF;
  border-color: #3B82F6;
  background: #3B82F6;
}

.profit-tracker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.profit-tracker-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profit-tracker-refresh-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

#profit .profit-tracker-refresh {
  color: #F1F5F9;
  border: 1px solid rgba(148, 163, 184, 0.65);
  background: rgba(148, 163, 184, 0.1);
  box-shadow: none;
}

#profit .profit-tracker-refresh:hover {
  color: #FFFFFF;
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.2);
}

/* Phase 6A polish pass 2: Export Profit matches the approved mockup - a solid green
   button with a small download icon, placed with the other profit actions. No new
   export logic was added; this only restyles the existing exportCsv("profit") button. */
.profit-tracker-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profit-tracker-export-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

#profit .profit-tracker-export {
  color: #FFFFFF;
  border: 1px solid #16A34A;
  background: #22C55E;
  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.25);
}

#profit .profit-tracker-export:hover {
  background: #16A34A;
  border-color: #15803D;
}

#profit .profit-tracker-actions .button.secondary {
  color: #E2E8F0;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: transparent;
}

#profit .profit-tracker-actions .button.secondary:hover {
  color: #F8FAFC;
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.14);
}

@media (max-width: 1250px) {
  .profit-tracker-controls {
    grid-template-columns: 1fr;
  }

  .profit-tracker-actions {
    justify-content: flex-start;
  }
}

/* Table + right-side detail panel */
.profit-tracker-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
  gap: 10px;
  padding: 0 20px 20px;
  align-items: start;
}

.profit-tracker-table-wrap {
  padding: 0;
  overflow-x: auto;
  min-width: 0;
}

.profit-tracker-table {
  min-width: 1020px;
  table-layout: fixed;
}

.profit-tracker-table th,
.profit-tracker-table td {
  padding: 6px 6px;
  vertical-align: top;
  font-size: 0.79rem;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
}

.profit-tracker-table th {
  font-size: 0.66rem;
  letter-spacing: 0;
  padding: 8px 6px;
}

.profit-tracker-table th:nth-child(1),
.profit-tracker-table td:nth-child(1) { width: 148px; }

.profit-tracker-table th:nth-child(2),
.profit-tracker-table td:nth-child(2) { width: 84px; }

.profit-tracker-table th:nth-child(3),
.profit-tracker-table td:nth-child(3),
.profit-tracker-table th:nth-child(4),
.profit-tracker-table td:nth-child(4),
.profit-tracker-table th:nth-child(5),
.profit-tracker-table td:nth-child(5),
.profit-tracker-table th:nth-child(6),
.profit-tracker-table td:nth-child(6),
.profit-tracker-table th:nth-child(7),
.profit-tracker-table td:nth-child(7) {
  width: 74px;
  text-align: right;
}

.profit-tracker-table th:nth-child(8),
.profit-tracker-table td:nth-child(8) {
  width: 62px;
  text-align: center;
}

.profit-tracker-table th:nth-child(9),
.profit-tracker-table td:nth-child(9) {
  width: 48px;
  text-align: center;
}

.profit-tracker-table th:nth-child(10),
.profit-tracker-table td:nth-child(10) {
  width: 78px;
  text-align: center;
}

.profit-tracker-table th:nth-child(11),
.profit-tracker-table td:nth-child(11) { width: 90px; }

.profit-tracker-table th:nth-child(12),
.profit-tracker-table td:nth-child(12) { width: 48px; }

#profit .profit-tracker-table {
  color: #E5E7EB;
}

#profit .profit-tracker-table th {
  color: #F8FAFC;
  background: #0F172A;
}

#profit .profit-tracker-table td {
  color: #E5E7EB;
  background: #111827;
  border-bottom-color: rgba(148, 163, 184, 0.15);
}

#profit .profit-tracker-table tbody tr:hover td {
  background: rgba(59, 130, 246, 0.1);
  cursor: pointer;
}

#profit .profit-tracker-table .empty-row td {
  background: #111827;
  color: #94A3B8;
  cursor: default;
}

#profit .profit-row-selected td {
  background: rgba(59, 130, 246, 0.16);
  box-shadow: inset 0 0 0 1px #3B82F6;
}

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

.profit-product-name {
  min-width: 0;
}

/* Status badges */
.profit-status-badge--healthy { color: #86EFAC; background: rgba(34, 197, 94, 0.18); }
.profit-status-badge--medium { color: #FCD34D; background: rgba(245, 158, 11, 0.18); }
.profit-status-badge--low { color: #FCA5A5; background: rgba(239, 68, 68, 0.18); }
.profit-status-badge--needs-review { color: #FDBA74; background: rgba(249, 115, 22, 0.18); }

#profit .badge.profit-status-badge {
  display: inline-block;
  min-height: auto;
  max-width: 100%;
  padding: 4px 9px;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}

#profit .profit-tracker-table .product-action-row {
  gap: 4px;
  justify-content: center;
}

#profit .profit-tracker-table .product-action-row .icon-button {
  width: 26px;
  min-width: 26px;
  padding: 0;
  color: #93C5FD;
  border: 1px solid rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.08);
}

#profit .profit-tracker-table .product-action-row .icon-button svg {
  width: 14px;
  height: 14px;
}

#profit .profit-tracker-table .product-action-row .icon-button:hover {
  color: #FFFFFF;
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.22);
}

/* Right-side profit detail panel — reuses .product-detail-* classes from Phase 5A for
   the image frame/name/badges/rows so both detail panels stay visually consistent. */
.profit-detail-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 8px;
  background: #16213A;
  align-self: start;
}

.profit-detail-empty {
  margin: 0;
  color: #94A3B8;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
  padding: 24px 4px;
}

/* Follow-up fix: Profit Tracker's detail panel only (scoped to #profitDetailPanel so the
   Product Tracker detail panel, which shares the same .product-detail-image-frame /
   .product-detail-name base classes, is not affected). Shrinks the image placeholder and
   tightens the gap to the product name so the header reads as one connected block instead
   of a separate empty frame sitting above it. */
#profitDetailPanel .product-detail-image-frame {
  height: 92px;
  margin-bottom: 8px;
}

#profitDetailPanel .product-detail-name {
  margin-top: -2px;
}

@media (max-width: 1150px) {
  .profit-tracker-body {
    grid-template-columns: 1fr;
  }
}

/* Bottom trend / channel-share chart sections */
.profit-tracker-charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  padding: 0 20px 20px;
}

.profit-chart-card {
  border-color: rgba(59, 130, 246, 0.22);
  background: #111827;
  color: #F8FAFC;
}

.profit-chart-empty {
  margin: 0;
  color: #94A3B8;
  font-size: 0.84rem;
  font-weight: 700;
  text-align: center;
  padding: 30px 12px;
}

/* Net Profit Over Time — Phase 6A polish: lightweight inline SVG line chart, no chart
   library. The .profit-trend-bar* rules below this comment (bars/columns/tracks) are
   from the earlier bar-style version and are no longer referenced by any rendered
   markup; left in place rather than removed since they are inert and harmless, and
   removing them is out of scope for this minimal polish pass. */
.profit-trend-chart {
  padding: 6px 18px 18px;
}

.profit-trend-svg {
  display: block;
  width: 100%;
  height: 220px;
}

.profit-trend-line {
  fill: none;
  stroke: #4ADE80;
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profit-trend-point {
  fill: #16A34A;
  stroke: #0B1120;
  stroke-width: 1.5;
}

.profit-trend-value-label {
  fill: #86EFAC;
  font-size: 10px;
  font-weight: 800;
}

.profit-trend-zero-line {
  stroke: rgba(148, 163, 184, 0.35);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.profit-trend-axis-label {
  fill: #94A3B8;
  font-size: 7px;
  font-weight: 700;
}

.profit-trend-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 160px;
  padding: 0 4px;
}

.profit-trend-bar-col {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 100%;
  min-width: 0;
}

.profit-trend-bar-track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
}

.profit-trend-bar {
  width: 100%;
  min-height: 4px;
  border-radius: 5px 5px 0 0;
}

.profit-trend-bar--positive { background: linear-gradient(180deg, #4ADE80, #16A34A); }
.profit-trend-bar--negative { background: linear-gradient(180deg, #F87171, #DC2626); }

.profit-trend-bar-label {
  color: #94A3B8;
  font-size: 0.68rem;
  font-weight: 750;
  text-align: center;
  white-space: nowrap;
}

/* Profit Share by Channel — Phase 6A polish: lightweight inline SVG donut (stroke-
   dasharray technique) + legend rows, no chart library. The .profit-channel-bar /
   .profit-channel-segment* rules below are from the earlier single-bar version and are
   no longer referenced by any rendered markup; left in place as inert/harmless rather
   than removed, matching the minimal-diff approach used for the trend chart above. */
.profit-channel-chart {
  padding: 6px 18px 6px;
}

.profit-channel-donut-wrap {
  display: flex;
  justify-content: center;
  padding: 4px 0 6px;
}

.profit-channel-donut {
  width: 148px;
  height: 148px;
}

.profit-channel-donut-total-label {
  fill: #94A3B8;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profit-channel-donut-total-value {
  fill: #F8FAFC;
  font-size: 13px;
  font-weight: 900;
}

.profit-channel-bar {
  display: flex;
  width: 100%;
  height: 22px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15);
}

.profit-channel-segment {
  height: 100%;
}

.profit-channel-segment--etsy { background: #F97316; }
.profit-channel-segment--digital { background: #8B5CF6; }
.profit-channel-segment--pod { background: #14B8A6; }
.profit-channel-segment--default { background: rgba(148, 163, 184, 0.6); }

.profit-channel-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 12px;
  padding: 0 18px;
  list-style: none;
}

.profit-channel-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #CBD5E1;
  font-size: 0.78rem;
  font-weight: 700;
}

.profit-channel-legend-label {
  min-width: 56px;
  color: #E2E8F0;
  font-weight: 800;
}

.profit-channel-legend-value {
  color: #94A3B8;
  font-weight: 700;
}

.profit-channel-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0;
}

.profit-channel-legend-dot--etsy { background: #F97316; }
.profit-channel-legend-dot--digital { background: #8B5CF6; }
.profit-channel-legend-dot--pod { background: #14B8A6; }
.profit-channel-legend-dot--default { background: rgba(148, 163, 184, 0.6); }

@media (max-width: 1150px) {
  .profit-tracker-charts {
    grid-template-columns: 1fr;
  }
}

/* Phase 6D: Sales modal and image placeholder visual polish. CSS-only. */
.sale-detail-modal {
  border: 1px solid rgba(59, 130, 246, 0.28);
  background: #111827;
  color: #F8FAFC;
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.55);
}

.sale-detail-modal .modal-header {
  border-bottom-color: rgba(148, 163, 184, 0.18);
}

.sale-detail-modal h3 {
  color: #F8FAFC;
}

.sale-detail-modal .modal-body {
  color: #E5E7EB;
}

.sale-detail-row {
  border-bottom-color: rgba(148, 163, 184, 0.16);
}

.sale-detail-label {
  color: #94A3B8;
}

.sale-detail-value {
  color: #E5E7EB;
}

.sale-detail-actions {
  border-top-color: rgba(148, 163, 184, 0.18);
}

.sale-detail-modal .button.secondary {
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.35);
  background: transparent;
}

.sale-detail-modal .button.secondary:hover {
  color: #FFFFFF;
  border-color: #EF4444;
  background: rgba(239, 68, 68, 0.16);
}

#products .product-detail-image-frame,
#profitDetailPanel .product-detail-image-frame,
.sale-detail-modal .etsy-sales-detail-image-frame,
.sale-detail-modal .etsy-sales-detail-image-placeholder {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(59, 130, 246, 0.12), rgba(15, 23, 42, 0.56));
}

#products .product-detail-image-frame img,
#profitDetailPanel .product-detail-image-frame img {
  object-fit: contain;
  background: #0F172A;
}

#products .product-detail-image-placeholder,
#profitDetailPanel .product-detail-image-placeholder,
.sale-detail-modal .etsy-sales-detail-image-placeholder,
#products .product-thumb-placeholder,
#sales .sales-item-thumb-placeholder {
  color: #93C5FD;
  border-color: rgba(147, 197, 253, 0.26);
  background: rgba(59, 130, 246, 0.14);
}

#products .product-detail-image-placeholder svg,
#profitDetailPanel .product-detail-image-placeholder svg {
  width: 28px;
  height: 28px;
}

.sale-detail-modal .etsy-sales-detail-image-frame {
  display: inline-grid;
  place-items: center;
  gap: 6px;
  padding: 8px;
  margin-bottom: 12px;
}

.sale-detail-modal .etsy-sales-detail-image {
  border-color: rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: #0F172A;
  object-fit: contain;
}

.sale-detail-modal .etsy-sales-detail-image-frame figcaption {
  color: #CBD5E1;
}

.sale-detail-modal .etsy-sales-detail-image-placeholder {
  color: #CBD5E1;
}
/* ===========================================================================
   Phase 7C - POD Pricing Calculator Visual Polish Pass 1
   Visual/display only. Scoped entirely to #pricing; calculator IDs and JS wiring unchanged.
   =========================================================================== */
#pricing.view.active {
  padding: 14px;
  border-radius: 14px;
  background: #0F172A;
  color: #F8FAFC;
}

#pricing .panel {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #111827;
  box-shadow: none;
}

#pricing .panel + .panel {
  margin-top: 16px;
}

#pricing .panel-header {
  padding: 18px 20px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

#pricing .panel-header h3 {
  color: #F8FAFC;
  letter-spacing: 0;
}

#pricing .panel-kicker {
  color: #CBD5E1;
}

#pricing .calculator-form {
  gap: 14px;
  padding: 16px 20px 20px;
}

#pricing .calculator-section {
  position: relative;
  gap: 12px;
  padding: 14px;
  border-color: rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: #1F2937;
  overflow: hidden;
}

#pricing .calculator-section::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #3B82F6;
}

#pricing .calculator-section:nth-of-type(2)::before { background: #14B8A6; }
#pricing .calculator-section:nth-of-type(3)::before { background: #8B5CF6; }
#pricing .calculator-section:nth-of-type(4)::before { background: #F59E0B; }
#pricing .calculator-section:nth-of-type(5)::before { background: #22C55E; }

#pricing .calculator-section h4 {
  color: #F8FAFC;
  font-size: 0.86rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

#pricing .calculator-grid {
  gap: 12px;
}

#pricing .field label {
  color: #CBD5E1;
  font-size: 0.72rem;
  font-weight: 850;
}

#pricing input,
#pricing select,
#pricing textarea {
  border-color: rgba(148, 163, 184, 0.28);
  background: #0F172A;
  color: #F8FAFC;
}

#pricing input[readonly] {
  border-color: rgba(59, 130, 246, 0.28);
  background: rgba(59, 130, 246, 0.12);
  color: #DBEAFE;
  font-weight: 900;
}

#pricing input::placeholder,
#pricing textarea::placeholder {
  color: #64748B;
}

#pricing input:focus,
#pricing select:focus,
#pricing textarea:focus {
  border-color: rgba(59, 130, 246, 0.75);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}

#pricing .field-help,
#pricing .compact-checkbox span {
  color: #94A3B8;
}

#pricing .discount-amount-field .checkbox-row,
#pricing .field .checkbox-row {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.62);
}

#pricing .tax-note,
#pricing .pod-debug-line,
#pricing .success-message {
  border-color: rgba(59, 130, 246, 0.24);
  background: rgba(59, 130, 246, 0.12);
  color: #BFDBFE;
}

#pricing .pod-debug-line {
  padding: 10px 12px;
  font-size: 0.78rem;
}

#pricing .validation-message {
  border-color: rgba(239, 68, 68, 0.36);
  background: rgba(239, 68, 68, 0.14);
  color: #FCA5A5;
}

#pricing .form-actions {
  gap: 9px;
  align-items: center;
}

#pricing .form-actions .button {
  min-height: 38px;
  border-radius: 8px;
  font-weight: 900;
}

#pricing #calculatePod {
  background: #22C55E;
  box-shadow: 0 12px 24px rgba(34, 197, 94, 0.16);
}

#pricing #savePodProduct {
  background: #3B82F6;
}

#pricing #copyPodBreakdown,
#pricing #resetPodCalculator {
  border-color: rgba(148, 163, 184, 0.26);
  background: #1F2937;
  color: #E2E8F0;
}

#pricing .calculator-results {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 20px 10px;
}

#pricing .calculator-results .stat-card {
  min-height: 108px;
  padding: 14px;
  border-color: rgba(148, 163, 184, 0.2);
  background: #1F2937;
  box-shadow: none;
}

#pricing .calculator-results .stat-card::before {
  width: 4px;
  background: rgba(148, 163, 184, 0.5);
}

#pricing .calculator-results .stat-card:nth-child(1)::before,
#pricing .calculator-results .stat-card:nth-child(10)::before { background: #22C55E; }
#pricing .calculator-results .stat-card:nth-child(11)::before,
#pricing .calculator-results .stat-card:nth-child(12)::before { background: #3B82F6; }
#pricing .calculator-results .stat-card:nth-child(13)::before { background: #F59E0B; }
#pricing .calculator-results .stat-card:nth-child(5)::before,
#pricing .calculator-results .stat-card:nth-child(6)::before,
#pricing .calculator-results .stat-card:nth-child(7)::before { background: #8B5CF6; }

#pricing .calculator-results .stat-card:nth-child(1),
#pricing .calculator-results .stat-card:nth-child(10),
#pricing .calculator-results .stat-card:nth-child(12),
#pricing .calculator-results .stat-card:nth-child(13) {
  border-color: rgba(59, 130, 246, 0.32);
  background: #172033;
}

#pricing .calculator-results .stat-card .label {
  color: #CBD5E1;
  font-size: 0.7rem;
  letter-spacing: 0;
}

#pricing .calculator-results .stat-card .value {
  color: #FFFFFF;
  font-size: clamp(1.25rem, 1.45vw, 1.65rem);
}

#pricing .calculator-results .stat-card .subtext {
  color: #94A3B8;
  line-height: 1.35;
}

#pricing .table-wrap {
  margin: 0 20px 20px;
  border-color: rgba(148, 163, 184, 0.18);
  background: #0F172A;
}

#pricing table th {
  background: #1F2937;
  color: #CBD5E1;
}

#pricing table td {
  border-color: rgba(148, 163, 184, 0.12);
  color: #E2E8F0;
}

@media (max-width: 1180px) {
  #pricing .calculator-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #pricing.view.active {
    padding: 10px;
  }

  #pricing .calculator-results {
    grid-template-columns: 1fr;
  }
}
/* ===========================================================================
   Phase 7D - POD Pricing Calculator Premium Top Section
   Visual/layout only. Existing calculator IDs, event hooks, and calculations unchanged.
   =========================================================================== */
#pricing .pricing-hero-panel {
  position: relative;
  overflow: hidden;
  border-color: rgba(59, 130, 246, 0.24);
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(20, 184, 166, 0.08) 42%, rgba(15, 23, 42, 0) 72%),
    #111827;
}

#pricing .pricing-hero-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #22C55E, #3B82F6, #8B5CF6, #F59E0B);
}

.pricing-hero-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  gap: 18px;
  padding: 20px;
}

.pricing-hero-copy {
  display: grid;
  align-content: center;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.68);
}

.pricing-eyebrow {
  margin: 0;
  color: #93C5FD;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pricing-hero-copy h3 {
  margin: 0;
  color: #FFFFFF;
  font-size: clamp(1.65rem, 3vw, 2.55rem);
  line-height: 1.04;
  letter-spacing: 0;
}

.pricing-hero-copy p:not(.pricing-eyebrow) {
  margin: 0;
  color: #CBD5E1;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.5;
}

.pricing-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pricing-hero-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(147, 197, 253, 0.22);
  border-radius: 999px;
  color: #DBEAFE;
  background: rgba(59, 130, 246, 0.12);
  font-size: 0.72rem;
  font-weight: 900;
}

.pricing-hero-results {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.58);
}

.pricing-hero-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.pricing-hero-results-head h4 {
  margin: 2px 0 0;
  color: #F8FAFC;
  font-size: 1rem;
  font-weight: 950;
}

#pricing .pricing-jump-link {
  min-height: 34px;
  padding: 8px 12px;
  border-color: rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.88);
  color: #E2E8F0;
  text-decoration: none;
  white-space: nowrap;
}

#pricing .pricing-hero-panel .calculator-results {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
}

#pricing .pricing-hero-panel .calculator-results .stat-card {
  min-height: 116px;
  padding: 14px;
  border-radius: 10px;
}

#pricing .pricing-hero-panel .calculator-results .stat-card:nth-child(1) {
  grid-column: span 2;
  min-height: 146px;
  border-color: rgba(34, 197, 94, 0.42);
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.2), rgba(15, 23, 42, 0.92));
}

#pricing .pricing-hero-panel .calculator-results .stat-card:nth-child(10) {
  grid-column: span 2;
  border-color: rgba(59, 130, 246, 0.38);
  background: linear-gradient(160deg, rgba(59, 130, 246, 0.2), rgba(15, 23, 42, 0.92));
}

#pricing .pricing-hero-panel .calculator-results .stat-card:nth-child(12),
#pricing .pricing-hero-panel .calculator-results .stat-card:nth-child(13) {
  border-color: rgba(245, 158, 11, 0.34);
}

#pricing .pricing-hero-panel .calculator-results .stat-card:nth-child(1) .value,
#pricing .pricing-hero-panel .calculator-results .stat-card:nth-child(10) .value {
  font-size: clamp(1.9rem, 2.4vw, 2.5rem);
  line-height: 1;
}

#pricing .pricing-manual-panel,
#pricing .pricing-breakdown-panel {
  opacity: 0.98;
}

#pricing .pricing-manual-panel .panel-header h3::after,
#pricing .pricing-breakdown-panel .panel-header h3::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3B82F6, #22C55E);
}

#pricing .pricing-breakdown-panel .table-wrap {
  margin-top: 16px;
}

@media (max-width: 1360px) {
  .pricing-hero-shell {
    grid-template-columns: 1fr;
  }

  #pricing .pricing-hero-panel .calculator-results {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  #pricing .pricing-hero-panel .calculator-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #pricing .pricing-hero-panel .calculator-results .stat-card:nth-child(1),
  #pricing .pricing-hero-panel .calculator-results .stat-card:nth-child(10) {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .pricing-hero-shell,
  .pricing-hero-copy,
  .pricing-hero-results {
    padding: 12px;
  }

  .pricing-hero-results-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #pricing .pricing-hero-panel .calculator-results,
  #pricing .pricing-hero-panel .calculator-results .stat-card:nth-child(1),
  #pricing .pricing-hero-panel .calculator-results .stat-card:nth-child(10) {
    grid-column: auto;
  }

  #pricing .pricing-hero-panel .calculator-results {
    grid-template-columns: 1fr;
  }
}
/* ===========================================================================
   Phase 7E - POD Pricing Calculator Mockup Alignment Pass
   Visual/layout only. Top dashboard reads from existing calculator outputs.
   =========================================================================== */
#pricing .pricing-hero-panel {
  border-color: rgba(59, 130, 246, 0.3);
  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.18), transparent 30%),
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.18), transparent 28%),
    #0B1220;
}

.pricing-dashboard-shell {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.pricing-dashboard-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.72));
}

.pricing-dashboard-header h3 {
  margin: 3px 0 0;
  color: #FFFFFF;
  font-size: clamp(1.7rem, 2.5vw, 2.45rem);
  line-height: 1.04;
  letter-spacing: 0;
}

.pricing-dashboard-header p:not(.pricing-eyebrow) {
  max-width: 780px;
  margin: 8px 0 0;
  color: #CBD5E1;
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.45;
}

.pricing-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(230px, 0.78fr) minmax(420px, 1.55fr) minmax(220px, 0.72fr);
  gap: 14px;
  align-items: stretch;
}

.pricing-dashboard-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 14px;
}

.pricing-dashboard-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.pricing-panel-heading {
  display: grid;
  gap: 3px;
  margin-bottom: 12px;
}

.pricing-panel-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pricing-panel-heading h4 {
  margin: 0;
  color: #F8FAFC;
  font-size: 0.98rem;
  font-weight: 950;
}

.pricing-live-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid rgba(34, 197, 94, 0.24);
  border-radius: 999px;
  color: #BBF7D0;
  background: rgba(34, 197, 94, 0.1);
  font-size: 0.68rem;
  font-weight: 900;
  white-space: nowrap;
}

.pricing-input-readouts {
  display: grid;
  gap: 10px;
}

.pricing-mini-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: #111827;
}

.pricing-mini-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #DBEAFE;
  background: rgba(59, 130, 246, 0.18);
  font-size: 0.72rem;
  font-weight: 950;
}

.pricing-mini-card--green .pricing-mini-icon { color: #BBF7D0; background: rgba(34, 197, 94, 0.18); }
.pricing-mini-card--blue .pricing-mini-icon { color: #BFDBFE; background: rgba(59, 130, 246, 0.2); }
.pricing-mini-card--purple .pricing-mini-icon { color: #DDD6FE; background: rgba(139, 92, 246, 0.2); }
.pricing-mini-card--orange .pricing-mini-icon { color: #FDE68A; background: rgba(245, 158, 11, 0.2); }

.pricing-mini-card p,
.pricing-suggestion-grid span,
.pricing-cost-list span,
.pricing-context-list dt {
  margin: 0;
  color: #94A3B8;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pricing-mini-card strong {
  display: block;
  margin-top: 3px;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 950;
}

#pricing .pricing-results-panel .calculator-results {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
}

#pricing .pricing-results-panel .calculator-results .stat-card {
  min-height: 104px;
}

#pricing .pricing-results-panel .calculator-results .stat-card:nth-child(1),
#pricing .pricing-results-panel .calculator-results .stat-card:nth-child(10),
#pricing .pricing-results-panel .calculator-results .stat-card:nth-child(12),
#pricing .pricing-results-panel .calculator-results .stat-card:nth-child(13) {
  min-height: 128px;
}

.pricing-context-panel {
  display: grid;
  align-content: start;
  gap: 12px;
}

.pricing-context-visual {
  display: grid;
  place-items: center;
  min-height: 132px;
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-radius: 16px;
  background:
    linear-gradient(160deg, rgba(59, 130, 246, 0.18), rgba(20, 184, 166, 0.08)),
    #111827;
}

.pricing-context-visual span {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border: 1px solid rgba(147, 197, 253, 0.28);
  border-radius: 24px;
  color: #FFFFFF;
  background: rgba(59, 130, 246, 0.18);
  font-size: 1rem;
  font-weight: 950;
}

.pricing-context-list {
  display: grid;
  gap: 9px;
  margin: 0;
}

.pricing-context-list div,
.pricing-cost-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(17, 24, 39, 0.86);
}

.pricing-context-list dd {
  margin: 0;
  color: #E2E8F0;
  font-size: 0.82rem;
  font-weight: 900;
  text-align: right;
}

.pricing-suggestion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pricing-suggestion-grid article {
  min-height: 112px;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 12px;
  background: #111827;
}

.pricing-suggestion-grid strong {
  display: block;
  margin: 8px 0 6px;
  color: #FFFFFF;
  font-size: clamp(1.35rem, 1.6vw, 1.8rem);
  font-weight: 950;
}

.pricing-suggestion-grid p {
  margin: 0;
  color: #94A3B8;
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.35;
}

.pricing-cost-list {
  display: grid;
  gap: 10px;
}

.pricing-cost-list strong {
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 950;
}

@media (max-width: 1420px) {
  .pricing-dashboard-grid {
    grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.4fr);
  }

  .pricing-context-panel {
    grid-column: 1 / -1;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
  }

  .pricing-context-panel .pricing-panel-heading {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1040px) {
  .pricing-dashboard-header,
  .pricing-dashboard-grid,
  .pricing-dashboard-lower {
    grid-template-columns: 1fr;
  }

  .pricing-dashboard-header {
    align-items: flex-start;
    flex-direction: column;
  }

  #pricing .pricing-results-panel .calculator-results,
  .pricing-suggestion-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .pricing-dashboard-shell {
    padding: 12px;
  }

  #pricing .pricing-results-panel .calculator-results,
  .pricing-suggestion-grid,
  .pricing-context-panel {
    grid-template-columns: 1fr;
  }
}
/* ===========================================================================
   Phase 7F - POD Pricing Calculator Screenshot Match Pass
   Visual/layout only. Existing IDs and calculations are preserved.
   =========================================================================== */
#pricing .pricing-hero-panel {
  background:
    radial-gradient(circle at 12% 10%, rgba(59, 130, 246, 0.28), transparent 25%),
    radial-gradient(circle at 82% 8%, rgba(139, 92, 246, 0.22), transparent 23%),
    linear-gradient(180deg, #0B1220 0%, #111827 100%);
}

.pricing-dashboard-shell {
  gap: 14px;
  padding: 14px;
}

.pricing-dashboard-header {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.82));
}

.pricing-dashboard-grid {
  grid-template-columns: minmax(260px, 0.8fr) minmax(430px, 1.35fr) minmax(250px, 0.78fr);
  gap: 12px;
}

.pricing-dashboard-lower {
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 12px;
}

.pricing-dashboard-panel {
  border-color: rgba(59, 130, 246, 0.22);
  background: rgba(15, 23, 42, 0.84);
}

.pricing-input-panel {
  border-color: rgba(34, 197, 94, 0.22);
}

.pricing-results-panel {
  border-color: rgba(59, 130, 246, 0.34);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9));
}

.pricing-context-panel {
  border-color: rgba(139, 92, 246, 0.28);
}

.pricing-suggestions-panel {
  border-color: rgba(139, 92, 246, 0.26);
}

.pricing-cost-panel {
  border-color: rgba(245, 158, 11, 0.28);
}

.pricing-mini-card {
  min-height: 58px;
  background: rgba(17, 24, 39, 0.94);
}

#pricing .pricing-results-panel .calculator-results {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

#pricing .pricing-results-panel .calculator-results .stat-card {
  display: none;
}

#pricing .pricing-results-panel .calculator-results .stat-card:nth-child(1),
#pricing .pricing-results-panel .calculator-results .stat-card:nth-child(7),
#pricing .pricing-results-panel .calculator-results .stat-card:nth-child(10),
#pricing .pricing-results-panel .calculator-results .stat-card:nth-child(12),
#pricing .pricing-results-panel .calculator-results .stat-card:nth-child(13) {
  display: block;
}

#pricing .pricing-results-panel .calculator-results .stat-card:nth-child(10) {
  grid-column: 1 / -1;
  min-height: 142px;
  border-color: rgba(34, 197, 94, 0.44);
  background: linear-gradient(155deg, rgba(34, 197, 94, 0.22), rgba(15, 23, 42, 0.94));
}

#pricing .pricing-results-panel .calculator-results .stat-card:nth-child(10) .value {
  font-size: clamp(2rem, 3vw, 3rem);
}

.pricing-result-status {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  color: #CBD5E1;
  background: rgba(17, 24, 39, 0.86);
  font-size: 0.82rem;
  font-weight: 900;
}

.pricing-result-status--healthy {
  border-color: rgba(34, 197, 94, 0.34);
  color: #BBF7D0;
  background: rgba(34, 197, 94, 0.12);
}

.pricing-result-status--watch {
  border-color: rgba(245, 158, 11, 0.34);
  color: #FDE68A;
  background: rgba(245, 158, 11, 0.12);
}

.pricing-result-status--risk {
  border-color: rgba(239, 68, 68, 0.34);
  color: #FCA5A5;
  background: rgba(239, 68, 68, 0.12);
}

.pricing-context-visual {
  min-height: 118px;
}

.pricing-product-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pricing-product-tiles span {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 1px solid rgba(147, 197, 253, 0.18);
  border-radius: 12px;
  color: #DBEAFE;
  background: rgba(59, 130, 246, 0.1);
  font-size: 0.72rem;
  font-weight: 900;
}

.pricing-suggestion-grid article:first-child {
  border-color: rgba(34, 197, 94, 0.3);
  background: linear-gradient(150deg, rgba(34, 197, 94, 0.14), #111827);
}

.pricing-suggestion-grid article:nth-child(2) {
  border-color: rgba(139, 92, 246, 0.3);
  background: linear-gradient(150deg, rgba(139, 92, 246, 0.14), #111827);
}

.pricing-suggestion-grid article:nth-child(3) {
  border-color: rgba(245, 158, 11, 0.3);
  background: linear-gradient(150deg, rgba(245, 158, 11, 0.14), #111827);
}

.pricing-cost-list div {
  min-height: 54px;
  border-color: rgba(245, 158, 11, 0.18);
}

.pricing-action-strip {
  display: grid;
  grid-template-columns: minmax(210px, 0.7fr) minmax(260px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(59, 130, 246, 0.24);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.96), rgba(30, 41, 59, 0.9));
}

.pricing-action-strip h4 {
  margin: 3px 0 0;
  color: #F8FAFC;
  font-size: 0.9rem;
  font-weight: 950;
}

.pricing-action-status {
  display: grid;
  gap: 7px;
  min-width: 0;
}

#pricing .pricing-action-strip .pod-debug-line,
#pricing .pricing-action-strip .validation-message,
#pricing .pricing-action-strip .success-message {
  padding: 9px 10px;
  font-size: 0.74rem;
}

.pricing-action-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(136px, 1fr));
  gap: 8px;
  min-width: 290px;
}

#pricing .pricing-action-buttons .button {
  width: 100%;
}

/* The Calculate Pricing / Save as Product / Send to Listing / Copy Breakdown / Reset buttons
   use .btn/.btn-primary/.btn-secondary/.btn-ghost, a different class naming than the rest of
   the app's .button/.button.primary/.button.secondary/.button.ghost system - these had no CSS
   at all (rendering as unstyled default browser buttons). Styled here to match the existing
   .button look exactly, fixing the gap/empty look in the Pricing action strip. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 41px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.15;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(23, 50, 77, 0.08);
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  color: var(--white);
  background: var(--green);
}

.btn-secondary {
  color: var(--navy);
  border-color: #CAD2DC;
  background: var(--white);
  box-shadow: none;
}

.btn-secondary:hover {
  border-color: rgba(47, 107, 79, 0.24);
  background: #F8FBF9;
}

.btn-ghost {
  color: var(--green);
  background: rgba(47, 107, 79, 0.1);
  box-shadow: none;
}

.btn-ghost:hover {
  border-color: rgba(47, 107, 79, 0.24);
  background: #F8FBF9;
}

/* "Back to Top" button at the bottom of the Advanced Manual Inputs form. */
.pricing-back-to-summary-row {
  display: flex;
  justify-content: center;
  padding: 6px 0 4px;
}

.pricing-back-to-summary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 320px;
}

.pricing-back-to-summary-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@media (max-width: 1320px) {
  .pricing-dashboard-grid {
    grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.2fr);
  }

  .pricing-context-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1040px) {
  .pricing-action-strip {
    grid-template-columns: 1fr;
  }

  .pricing-action-buttons {
    min-width: 0;
  }
}
/* Phase 7F action strip grid placement */
.pricing-dashboard-lower .pricing-action-strip {
  grid-column: 1 / -1;
}

/* ===========================================================================
   Phase 7G - POD Pricing Calculator Exact Reference Layout Pass
   Visual/layout only. Existing input IDs, calculations, and button behavior unchanged.
   =========================================================================== */
#pricing .pricing-hero-panel {
  border-color: rgba(96, 165, 250, 0.36);
  background:
    radial-gradient(circle at 9% 8%, rgba(59, 130, 246, 0.34), transparent 24%),
    radial-gradient(circle at 92% 10%, rgba(139, 92, 246, 0.28), transparent 24%),
    linear-gradient(180deg, #08111F 0%, #0F172A 48%, #111827 100%);
}

.pricing-dashboard-shell {
  gap: 12px;
  padding: 12px;
}

.pricing-dashboard-header {
  min-height: 96px;
  padding: 14px 16px;
  border-color: rgba(96, 165, 250, 0.22);
}

.pricing-dashboard-header h3 {
  font-size: clamp(1.55rem, 2.2vw, 2.25rem);
}

.pricing-dashboard-grid {
  grid-template-columns: minmax(260px, 0.78fr) minmax(420px, 1.22fr) minmax(270px, 0.82fr);
  gap: 12px;
}

.pricing-dashboard-lower {
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr);
  gap: 12px;
}

.pricing-dashboard-panel {
  padding: 12px;
  border-radius: 16px;
  background: rgba(12, 20, 35, 0.9);
}

.pricing-panel-heading {
  margin-bottom: 10px;
}

.pricing-panel-heading h4 {
  font-size: 0.92rem;
}

.pricing-input-readouts {
  gap: 8px;
}

.pricing-mini-card {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  min-height: 64px;
  padding: 9px 10px;
  border-radius: 14px;
  border-color: rgba(148, 163, 184, 0.16);
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(30, 41, 59, 0.72));
}

.pricing-mini-card::after {
  content: "Current";
  align-self: center;
  padding: 5px 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  color: #94A3B8;
  background: rgba(15, 23, 42, 0.82);
  font-size: 0.62rem;
  font-weight: 900;
}

.pricing-mini-card small {
  display: block;
  margin-top: 2px;
  color: #64748B;
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.2;
}

.pricing-mini-card strong {
  font-size: 1.08rem;
}

.pricing-mini-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

#pricing .pricing-results-panel .calculator-results {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

#pricing .pricing-results-panel .calculator-results .stat-card {
  min-height: 88px;
  padding: 12px;
  border-radius: 13px;
}

#pricing .pricing-results-panel .calculator-results .stat-card .label {
  font-size: 0.66rem;
}

#pricing .pricing-results-panel .calculator-results .stat-card .value {
  margin-top: 6px;
  font-size: clamp(1.2rem, 1.35vw, 1.55rem);
}

#pricing .pricing-results-panel .calculator-results .stat-card:nth-child(10) {
  grid-column: auto;
  min-height: 96px;
}

#pricing .pricing-results-panel .calculator-results .stat-card:nth-child(10) .value {
  font-size: clamp(1.35rem, 1.65vw, 1.9rem);
}

.pricing-result-status {
  margin-bottom: 9px;
  padding: 9px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  text-align: center;
}

.pricing-context-panel {
  gap: 10px;
}

.pricing-context-visual {
  min-height: 118px;
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgba(96, 165, 250, 0.18), rgba(139, 92, 246, 0.16)),
    #101827;
}

.pricing-context-visual span {
  width: 86px;
  height: 86px;
  border-radius: 26px;
  box-shadow: 0 16px 36px rgba(59, 130, 246, 0.18);
}

.pricing-product-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pricing-product-tiles span {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 52px;
  padding: 8px 6px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  color: #CBD5E1;
  background: rgba(17, 24, 39, 0.92);
  font-size: 0.72rem;
  font-weight: 950;
}

.pricing-product-tiles span::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-bottom: 5px;
  border: 2px solid currentColor;
  border-radius: 6px;
  opacity: 0.72;
}

.pricing-product-tiles span.selected {
  border-color: rgba(34, 197, 94, 0.48);
  color: #BBF7D0;
  background: rgba(34, 197, 94, 0.12);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.18);
}

.pricing-product-tiles span.selected::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 7px;
  color: #22C55E;
  font-size: 0.72rem;
}

.pricing-suggestion-grid {
  gap: 9px;
}

.pricing-suggestion-grid article {
  min-height: 106px;
  border-radius: 15px;
}

.pricing-suggestion-grid article::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.18);
}

.pricing-suggestion-grid article:first-child::before { background: rgba(34, 197, 94, 0.28); }
.pricing-suggestion-grid article:nth-child(2)::before { background: rgba(139, 92, 246, 0.28); }
.pricing-suggestion-grid article:nth-child(3)::before { background: rgba(245, 158, 11, 0.28); }

.pricing-suggestion-grid strong {
  font-size: clamp(1.35rem, 1.45vw, 1.7rem);
}

.pricing-cost-list {
  gap: 9px;
}

.pricing-cost-list div {
  min-height: 58px;
  padding: 11px 12px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.95), rgba(30, 41, 59, 0.7));
}

.pricing-cost-list div::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #F59E0B;
}

.pricing-cost-list div:nth-child(2)::before { background: #8B5CF6; }
.pricing-cost-list div:nth-child(3)::before { background: #3B82F6; }
.pricing-cost-list strong {
  margin-left: auto;
}

.pricing-action-strip {
  padding: 11px;
  border-radius: 16px;
  border-color: rgba(96, 165, 250, 0.3);
}

#pricing #calculatePod {
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.22);
}

@media (max-width: 1260px) {
  .pricing-dashboard-grid,
  .pricing-dashboard-lower {
    grid-template-columns: 1fr;
  }
}
/* ===========================================================================
   Phase 7H - POD Pricing Calculator Reference Match Polish
   Visual/display only. Existing calculator IDs, calculations, and save behavior unchanged.
   =========================================================================== */
#pricing .pricing-dashboard-grid {
  grid-template-columns: minmax(280px, 0.72fr) minmax(430px, 1.18fr) minmax(300px, 0.82fr);
  gap: 14px;
}

#pricing .pricing-input-panel {
  align-self: start;
}

#pricing .pricing-input-readouts {
  gap: 7px;
}

#pricing .pricing-mini-card {
  grid-template-columns: 34px minmax(0, 1fr) minmax(86px, auto);
  min-height: 54px;
  padding: 7px 8px;
  gap: 8px;
  align-items: center;
}

#pricing .pricing-mini-card::after {
  content: none;
}

#pricing .pricing-mini-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: 0.82rem;
}

#pricing .pricing-mini-card p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.1;
}

#pricing .pricing-mini-card small {
  max-width: 142px;
  font-size: 0.58rem;
  line-height: 1.15;
}

#pricing .pricing-mini-card strong {
  display: inline-flex;
  min-width: 82px;
  justify-content: flex-end;
  padding: 7px 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  color: #F8FAFC;
  background: rgba(15, 23, 42, 0.82);
  font-size: 0.94rem;
  line-height: 1;
}

#pricing .pricing-top-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

#pricing .pricing-top-metric {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 84px;
  padding: 11px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.72));
}

#pricing .pricing-top-metric p {
  margin: 0 0 6px;
  color: #94A3B8;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

#pricing .pricing-top-metric strong {
  display: block;
  color: #F8FAFC;
  font-size: clamp(1.15rem, 1.3vw, 1.55rem);
  line-height: 1;
}

#pricing .pricing-metric-icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 950;
}

#pricing .pricing-top-metric--green .pricing-metric-icon { background: linear-gradient(135deg, #16A34A, #22C55E); }
#pricing .pricing-top-metric--blue .pricing-metric-icon { background: linear-gradient(135deg, #2563EB, #14B8A6); }
#pricing .pricing-top-metric--purple .pricing-metric-icon { background: linear-gradient(135deg, #7C3AED, #3B82F6); }
#pricing .pricing-top-metric--orange .pricing-metric-icon { background: linear-gradient(135deg, #EA580C, #F59E0B); }

#pricing .pricing-results-panel .pricing-result-source {
  display: none;
}

#pricing .pricing-context-panel {
  align-self: start;
}

#pricing .pricing-context-visual {
  min-height: 96px;
}

#pricing .pricing-context-visual span {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  font-size: 0.92rem;
}

#pricing .pricing-product-tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

#pricing .pricing-product-tiles button {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 46px;
  padding: 7px 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 13px;
  color: #CBD5E1;
  background: rgba(17, 24, 39, 0.92);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 950;
  text-align: left;
  cursor: pointer;
}

#pricing .pricing-product-tiles button:hover,
#pricing .pricing-product-tiles button:focus-visible {
  border-color: rgba(96, 165, 250, 0.46);
  background: rgba(30, 41, 59, 0.95);
  outline: none;
}

#pricing .pricing-product-tiles button.selected {
  border-color: rgba(59, 130, 246, 0.74);
  color: #DBEAFE;
  background: rgba(37, 99, 235, 0.16);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.25);
}

#pricing .pricing-product-tiles button.selected::after {
  content: "\2713";
  position: absolute;
  top: 5px;
  right: 7px;
  color: #60A5FA;
  font-size: 0.72rem;
  font-weight: 950;
}

#pricing .pricing-product-icon {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 9px;
  color: #BFDBFE;
  background: rgba(15, 23, 42, 0.86);
  font-size: 0.6rem;
  font-weight: 950;
}

#pricing .pricing-product-tiles .pricing-product-icon {
  min-height: 0;
  padding: 0;
}

#pricing .pricing-product-tiles .pricing-product-icon::before {
  content: none;
}
#pricing .pricing-product-tiles button strong {
  min-width: 0;
  line-height: 1.12;
}

#pricing .pricing-suggestion-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#pricing .pricing-suggestion-grid article {
  min-height: 96px;
  padding: 13px;
}

#pricing .pricing-cost-panel {
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.78));
}

#pricing .pricing-cost-list div {
  min-height: 52px;
  padding: 10px 11px;
}

#pricing .pricing-action-strip {
  display: grid;
  grid-template-columns: minmax(190px, 0.75fr) minmax(220px, 1fr) auto;
  align-items: center;
  gap: 12px;
}

#pricing .pricing-action-buttons {
  justify-content: flex-end;
}

@media (max-width: 1260px) {
  #pricing .pricing-action-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  #pricing .pricing-top-metric-grid,
  #pricing .pricing-suggestion-grid,
  #pricing .pricing-product-tiles {
    grid-template-columns: 1fr;
  }

  #pricing .pricing-mini-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  #pricing .pricing-mini-card strong {
    grid-column: 1 / -1;
    width: 100%;
  }
}
/* ===========================================================================
   Phase 7I - POD Pricing Calculator Reference Detail Polish
   Visual/display only. Existing calculator IDs, formulas, save behavior, and data records unchanged.
   =========================================================================== */
#pricing .pricing-dashboard-shell {
  gap: 14px;
}

#pricing .pricing-dashboard-grid {
  grid-template-columns: minmax(300px, 0.76fr) minmax(420px, 1.08fr) minmax(315px, 0.82fr);
  align-items: start;
}

#pricing .pricing-dashboard-panel {
  border-color: rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(11, 18, 32, 0.94));
}

#pricing .pricing-input-readouts {
  gap: 8px;
}

#pricing .pricing-mini-card {
  grid-template-columns: 28px minmax(0, 1fr) minmax(94px, auto);
  min-height: 50px;
  padding: 7px;
  gap: 8px;
  border-radius: 13px;
  background: rgba(15, 23, 42, 0.72);
}

#pricing .pricing-mini-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-size: 0.66rem;
  font-weight: 950;
  box-shadow: none;
}

#pricing .pricing-mini-card p {
  color: #F8FAFC;
  font-size: 0.72rem;
  font-weight: 950;
}

#pricing .pricing-mini-card small {
  color: #94A3B8;
  font-size: 0.58rem;
}

#pricing .pricing-mini-card strong {
  min-width: 94px;
  padding: 8px 9px;
  border-color: rgba(96, 165, 250, 0.22);
  border-radius: 11px;
  color: #E0F2FE;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.78));
  font-size: 0.96rem;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.65);
}

#pricing .pricing-result-status {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(34, 197, 94, 0.38);
  border-radius: 14px;
  color: #DCFCE7;
  background: linear-gradient(135deg, rgba(22, 101, 52, 0.32), rgba(15, 23, 42, 0.86));
  box-shadow: 0 0 24px rgba(34, 197, 94, 0.08);
  font-size: 0.76rem;
  font-weight: 850;
  text-align: left;
}

#pricing .pricing-result-status::before {
  content: "\2713";
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  color: #052E16;
  background: #22C55E;
  font-size: 0.78rem;
  font-weight: 950;
}

#pricing .pricing-result-status::after {
  content: "Uses the existing calculator profit and margin outputs.";
  grid-column: 2;
  margin-top: -3px;
  color: #86EFAC;
  font-size: 0.62rem;
  font-weight: 750;
}

#pricing .pricing-top-metric-grid {
  gap: 10px;
}

#pricing .pricing-top-metric {
  grid-template-columns: 32px minmax(0, 1fr);
  min-height: 82px;
  padding: 11px 12px;
  gap: 10px;
  border-radius: 15px;
  background: rgba(15, 23, 42, 0.78);
}

#pricing .pricing-metric-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 0.72rem;
}

#pricing .pricing-top-metric p {
  margin: 0 0 5px;
  color: #F8FAFC;
  font-size: 0.74rem;
  font-weight: 950;
  text-transform: none;
}

#pricing .pricing-top-metric strong {
  font-size: clamp(1.38rem, 1.85vw, 2rem);
  font-weight: 950;
}

#pricing .pricing-top-metric small {
  display: block;
  margin-top: 5px;
  color: #94A3B8;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.15;
}

#pricing .pricing-top-metric--green strong { color: #4ADE80; }
#pricing .pricing-top-metric--blue strong { color: #38BDF8; }
#pricing .pricing-top-metric--purple strong { color: #C4B5FD; }
#pricing .pricing-top-metric--orange strong { color: #FDBA74; }

#pricing .pricing-context-panel {
  gap: 12px;
}

#pricing .pricing-context-visual {
  min-height: 110px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.2), transparent 56%),
    linear-gradient(160deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.86));
}

#pricing .pricing-context-visual span {
  width: 74px;
  height: 74px;
  border: 1px solid rgba(147, 197, 253, 0.28);
  border-radius: 24px;
  color: #DBEAFE;
  background: rgba(37, 99, 235, 0.18);
}

#pricing .pricing-context-list {
  padding: 9px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.5);
}

#pricing .pricing-product-tiles button {
  min-height: 48px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(30, 41, 59, 0.72));
}

#pricing .pricing-product-tiles button.selected::after {
  top: 6px;
  right: 8px;
  color: #60A5FA;
}

#pricing .pricing-suggestion-grid article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 7px 10px;
  align-items: start;
  min-height: 90px;
  background: rgba(15, 23, 42, 0.72);
}

#pricing .pricing-suggestion-grid article::before {
  grid-row: span 3;
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 10px;
}

#pricing .pricing-suggestion-grid span,
#pricing .pricing-cost-list span {
  color: #F8FAFC;
  font-weight: 900;
}

#pricing .pricing-suggestion-grid strong {
  color: #DBEAFE;
  font-size: clamp(1.28rem, 1.45vw, 1.65rem);
}

#pricing .pricing-suggestion-grid p {
  margin: 0;
  color: #94A3B8;
  font-size: 0.68rem;
  line-height: 1.25;
}

#pricing .pricing-cost-list {
  gap: 7px;
}

#pricing .pricing-cost-list div {
  min-height: 46px;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.66);
}

#pricing .pricing-cost-list div:nth-child(1)::before { background: #22C55E; }
#pricing .pricing-cost-list div:nth-child(2)::before { background: #38BDF8; }
#pricing .pricing-cost-list div:nth-child(3)::before { background: #8B5CF6; }
#pricing .pricing-cost-list div:nth-child(4)::before { background: #F59E0B; }
#pricing .pricing-cost-list div:nth-child(5)::before { background: #F8FAFC; }

#pricing .pricing-cost-list strong {
  color: #E0F2FE;
  font-size: 0.98rem;
}

#pricing .pricing-manual-panel,
#pricing .pricing-breakdown-panel {
  border-color: rgba(148, 163, 184, 0.16);
  background: #0B1220;
}

#pricing .pricing-manual-panel .panel-header,
#pricing .pricing-breakdown-panel .panel-header {
  border-bottom-color: rgba(148, 163, 184, 0.16);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.72));
}

#pricing .pricing-manual-panel .panel-header h3,
#pricing .pricing-breakdown-panel .panel-header h3,
#pricing .calculator-section h4 {
  color: #F8FAFC;
}

#pricing .pricing-manual-panel .panel-kicker,
#pricing .pricing-breakdown-panel .panel-kicker,
#pricing .tax-note,
#pricing .field-help {
  color: #CBD5E1;
}

#pricing .calculator-section {
  border-color: rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(17, 24, 39, 0.9));
}

#pricing .field label,
#pricing .checkbox-row span {
  color: #E5E7EB;
}

#pricing .field input,
#pricing .field select,
#pricing .field textarea {
  border-color: rgba(148, 163, 184, 0.22);
  color: #F8FAFC;
  background: #111827;
}

#pricing .field input[readonly] {
  color: #BFDBFE;
  background: #0F172A;
}

#pricing .pricing-breakdown-panel .table-wrap {
  background: #0B1220;
}

#pricing .pricing-breakdown-panel table {
  color: #E5E7EB;
  background: #0F172A;
}

#pricing .pricing-breakdown-panel th {
  color: #F8FAFC;
  background: #111827;
}

#pricing .pricing-breakdown-panel td {
  border-color: rgba(148, 163, 184, 0.14);
}

@media (max-width: 720px) {
  #pricing .pricing-mini-card {
    grid-template-columns: 28px minmax(0, 1fr);
  }
}
/* Product Preview picture-style local illustrations */
#pricing .pricing-product-tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#pricing .pricing-product-tiles button {
  grid-template-columns: 56px minmax(0, 1fr);
  min-height: 72px;
  padding: 8px;
  gap: 9px;
  border-radius: 15px;
}

#pricing .pricing-product-tiles button.selected {
  border-color: rgba(59, 130, 246, 0.92);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(15, 23, 42, 0.96));
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.28), 0 0 22px rgba(37, 99, 235, 0.22);
}

#pricing .pricing-product-tiles button.selected::after {
  content: "\2713";
  display: grid;
  place-items: center;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: #ffffff;
  background: #2563EB;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.9), 0 0 12px rgba(37, 99, 235, 0.5);
  font-size: 0.68rem;
  line-height: 1;
}

#pricing .pricing-product-tiles button strong {
  color: #E5E7EB;
  font-size: 0.74rem;
  line-height: 1.12;
}

#pricing .pricing-product-tiles button.selected strong {
  color: #EFF6FF;
}

#pricing .pricing-product-tiles .pricing-product-art {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  color: #BFDBFE;
  background: radial-gradient(circle at 30% 22%, rgba(96, 165, 250, 0.22), rgba(15, 23, 42, 0.98) 68%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#pricing .pricing-product-tiles .pricing-product-art::before {
  content: none;
}

#pricing .pricing-product-tiles .pricing-product-art svg {
  display: block;
  width: 42px;
  height: 42px;
  overflow: visible;
  fill: rgba(37, 99, 235, 0.14);
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#pricing .pricing-product-tiles .pricing-product-art--sweatshirt {
  color: #C4B5FD;
  background: radial-gradient(circle at 30% 22%, rgba(168, 85, 247, 0.22), rgba(15, 23, 42, 0.98) 68%);
}

#pricing .pricing-product-tiles .pricing-product-art--mug,
#pricing .pricing-product-tiles .pricing-product-art--tote {
  color: #A7F3D0;
  background: radial-gradient(circle at 30% 22%, rgba(16, 185, 129, 0.2), rgba(15, 23, 42, 0.98) 68%);
}

#pricing .pricing-product-tiles .pricing-product-art--excel {
  color: #86EFAC;
  background: radial-gradient(circle at 30% 22%, rgba(34, 197, 94, 0.22), rgba(15, 23, 42, 0.98) 68%);
}

#pricing .pricing-product-tiles .pricing-product-art--case {
  color: #F9A8D4;
  background: radial-gradient(circle at 30% 22%, rgba(236, 72, 153, 0.2), rgba(15, 23, 42, 0.98) 68%);
}

#pricing .pricing-product-tiles .pricing-product-art--blanket,
#pricing .pricing-product-tiles .pricing-product-art--bandana {
  color: #FDBA74;
  background: radial-gradient(circle at 30% 22%, rgba(249, 115, 22, 0.22), rgba(15, 23, 42, 0.98) 68%);
}

#pricing .pricing-product-tiles button.selected .pricing-product-art {
  border-color: rgba(96, 165, 250, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(59, 130, 246, 0.18);
}
/* Phase 7K - POD Pricing Calculator layout balance fix */
#pricing .pricing-dashboard-shell {
  gap: 10px;
  padding: 10px;
}

#pricing .pricing-dashboard-grid {
  grid-template-columns: minmax(300px, 0.8fr) minmax(430px, 1.12fr) minmax(330px, 0.88fr);
  gap: 10px;
  align-items: start;
}

#pricing .pricing-dashboard-lower {
  gap: 10px;
  margin-top: -2px;
}

#pricing .pricing-dashboard-panel {
  padding: 11px;
}

#pricing .pricing-input-readouts {
  gap: 7px;
}

#pricing .pricing-mini-card {
  grid-template-columns: 30px minmax(0, 1fr) minmax(92px, 102px);
  min-height: 48px;
  padding: 7px;
  gap: 8px;
}

#pricing .pricing-mini-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 0.74rem;
}

#pricing .pricing-mini-copy {
  min-width: 0;
}

#pricing .pricing-mini-card p {
  font-size: 0.7rem;
}

#pricing .pricing-mini-card small {
  max-width: none;
  font-size: 0.56rem;
  line-height: 1.12;
}

#pricing .pricing-mini-card strong {
  display: grid;
  place-items: center end;
  min-width: 0;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 6px 9px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 10px;
  color: #F8FAFC;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.96), rgba(15, 23, 42, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 18px rgba(2, 6, 23, 0.18);
  font-size: 0.94rem;
  text-align: right;
  white-space: nowrap;
}

#pricing .pricing-context-panel {
  gap: 9px;
}

#pricing .pricing-context-panel .pricing-panel-heading {
  margin-bottom: 0;
}

#pricing .pricing-selected-product-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(15, 23, 42, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#pricing .pricing-selected-product-art {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 18px;
  color: #BFDBFE;
  background: radial-gradient(circle at 32% 20%, rgba(96, 165, 250, 0.25), rgba(15, 23, 42, 0.98) 72%);
}

#pricing .pricing-selected-product-art svg {
  width: 58px;
  height: 58px;
  fill: rgba(37, 99, 235, 0.13);
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#pricing .pricing-selected-product-kicker {
  display: block;
  margin-bottom: 3px;
  color: #93C5FD;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#pricing .pricing-selected-product-card strong {
  display: block;
  color: #F8FAFC;
  font-size: 1.14rem;
  font-weight: 950;
  line-height: 1.08;
}

#pricing .pricing-selected-product-card small {
  display: block;
  margin-top: 4px;
  color: #CBD5E1;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}

#pricing .pricing-context-list {
  margin-top: 0;
}

#pricing .pricing-context-list div {
  min-height: 38px;
  padding: 7px 9px;
}

#pricing .pricing-product-tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#pricing .pricing-product-tiles button {
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 74px;
  padding: 7px 5px 6px;
  gap: 4px;
  text-align: center;
}

#pricing .pricing-product-tiles button strong {
  font-size: 0.62rem;
  line-height: 1.05;
}

#pricing .pricing-product-tiles .pricing-product-art {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

#pricing .pricing-product-tiles .pricing-product-art svg {
  width: 31px;
  height: 31px;
  stroke-width: 3.1;
}

#pricing .pricing-product-tiles button.selected::after {
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  font-size: 0.62rem;
}

#pricing .pricing-product-tiles .pricing-product-art--wallart {
  color: #FDE68A;
  background: radial-gradient(circle at 30% 22%, rgba(245, 158, 11, 0.22), rgba(15, 23, 42, 0.98) 68%);
}

@media (max-width: 1260px) {
  #pricing .pricing-dashboard-grid {
    grid-template-columns: 1fr;
  }

  #pricing .pricing-product-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  #pricing .pricing-mini-card {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  #pricing .pricing-mini-card strong {
    grid-column: 1 / -1;
    place-items: center end;
  }

  #pricing .pricing-product-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Phase 7L - POD preview selection and breakdown cleanup */
#pricing .pricing-dashboard-lower {
  grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1.05fr);
}

#pricing .pricing-cost-bar-card {
  display: grid;
  gap: 9px;
  margin-bottom: 9px;
  padding: 10px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.62));
}

#pricing .pricing-cost-bar-track {
  display: flex;
  width: 100%;
  height: 16px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.72);
}

#pricing .pricing-cost-bar-segment {
  min-width: 0;
  transition: width 160ms ease;
}

#pricing .pricing-cost-bar-segment--product,
#pricing .pricing-cost-dot--product { background: #22C55E; }
#pricing .pricing-cost-bar-segment--shipping,
#pricing .pricing-cost-dot--shipping { background: #38BDF8; }
#pricing .pricing-cost-bar-segment--fees,
#pricing .pricing-cost-dot--fees { background: #8B5CF6; }
#pricing .pricing-cost-bar-segment--tax,
#pricing .pricing-cost-dot--tax { background: #F59E0B; }
#pricing .pricing-cost-bar-segment--other,
#pricing .pricing-cost-dot--other { background: #94A3B8; }

#pricing .pricing-cost-bar-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}

#pricing .pricing-cost-bar-legend span {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  color: #CBD5E1;
  font-size: 0.62rem;
  font-weight: 850;
  line-height: 1.18;
}

#pricing .pricing-cost-bar-legend strong {
  margin-left: auto;
  color: #F8FAFC;
  font-size: 0.66rem;
  font-weight: 950;
  white-space: nowrap;
}

#pricing .pricing-cost-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
}

#pricing .pricing-breakdown-panel {
  padding: 0;
  overflow: hidden;
}

#pricing .pricing-breakdown-details {
  display: block;
}

#pricing .pricing-breakdown-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid transparent;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.72));
}

#pricing .pricing-breakdown-details summary::-webkit-details-marker {
  display: none;
}

#pricing .pricing-breakdown-details summary strong {
  display: block;
  color: #F8FAFC;
  font-size: 1rem;
  font-weight: 950;
}

#pricing .pricing-breakdown-details summary small {
  display: block;
  margin-top: 3px;
  color: #CBD5E1;
  font-size: 0.78rem;
  font-weight: 750;
}

#pricing .pricing-breakdown-details summary b {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 999px;
  color: #BFDBFE;
  background: rgba(37, 99, 235, 0.12);
  font-size: 0.7rem;
  font-weight: 950;
}

#pricing .pricing-breakdown-details[open] summary {
  border-bottom-color: rgba(148, 163, 184, 0.16);
}

#pricing .pricing-breakdown-details[open] summary b {
  font-size: 0;
}

#pricing .pricing-breakdown-details[open] summary b::after {
  content: "Collapse";
  font-size: 0.7rem;
}

#pricing .pricing-breakdown-details .table-wrap {
  margin: 0;
  border-radius: 0;
}

@media (max-width: 1260px) {
  #pricing .pricing-dashboard-lower {
    grid-template-columns: 1fr;
  }
}
/* Phase 7M - POD readability and layout polish */
#pricing .pricing-dashboard-grid {
  grid-template-columns: minmax(330px, 0.86fr) minmax(450px, 1.12fr) minmax(330px, 0.82fr);
}

#pricing .pricing-mini-card {
  grid-template-columns: 38px minmax(0, 1fr) minmax(116px, 132px);
  min-height: 60px;
  padding: 9px 10px;
  gap: 10px;
}

#pricing .pricing-mini-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 950;
}

#pricing .pricing-mini-card p {
  font-size: 0.74rem;
  line-height: 1.12;
}

#pricing .pricing-mini-card small {
  font-size: 0.61rem;
  line-height: 1.18;
}

#pricing .pricing-mini-card strong {
  min-height: 42px;
  padding: 7px 11px;
  border-color: rgba(96, 165, 250, 0.34);
  border-radius: 12px;
  color: #F8FAFC;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.98), rgba(15, 23, 42, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 22px rgba(2, 6, 23, 0.24);
  font-size: clamp(1.08rem, 1.1vw, 1.26rem);
  font-weight: 950;
}

#pricing .pricing-top-metric-grid {
  gap: 11px;
}

#pricing .pricing-top-metric {
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 96px;
  padding: 13px;
  gap: 12px;
}

#pricing .pricing-metric-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 1rem;
  font-weight: 950;
}

#pricing .pricing-top-metric p {
  margin-bottom: 6px;
  font-size: 0.76rem;
}

#pricing .pricing-top-metric strong {
  font-size: clamp(1.58rem, 2.05vw, 2.24rem);
  letter-spacing: 0;
}

#pricing .pricing-top-metric small {
  margin-top: 6px;
  color: #CBD5E1;
  font-size: 0.7rem;
}

#pricing .pricing-suggestion-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#pricing .pricing-suggestion-grid--four article {
  min-height: 104px;
  padding: 12px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 7px 9px;
}

#pricing .pricing-suggestion-grid--four article::before {
  width: 30px;
  height: 30px;
}

#pricing .pricing-suggestion-grid--four article:nth-child(4) {
  border-color: rgba(20, 184, 166, 0.28);
  background: linear-gradient(150deg, rgba(20, 184, 166, 0.13), rgba(15, 23, 42, 0.82));
}

#pricing .pricing-suggestion-grid--four article:nth-child(4)::before {
  background: rgba(20, 184, 166, 0.28);
}

#pricing .pricing-suggestion-grid--four span {
  font-size: 0.66rem;
}

#pricing .pricing-suggestion-grid--four strong {
  font-size: clamp(1.18rem, 1.35vw, 1.48rem);
  line-height: 1.05;
}

#pricing .pricing-suggestion-grid--four p {
  font-size: 0.65rem;
  line-height: 1.22;
}

#pricing .pricing-action-strip {
  align-items: stretch;
}

#pricing .pricing-breakdown-details[open] {
  background: #0B1220;
}

#pricing .pricing-breakdown-details[open] .table-wrap {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #0B1220;
}

#pricing .pricing-breakdown-panel table {
  width: 100%;
  color: #E5E7EB;
  background: #0B1220;
}

#pricing .pricing-breakdown-panel thead th {
  color: #F8FAFC;
  background: #111827;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
}

#pricing .pricing-breakdown-panel tbody td {
  color: #E5E7EB;
  background: #0F172A;
  border-color: rgba(148, 163, 184, 0.14);
}

#pricing .pricing-breakdown-panel tbody tr:nth-child(even) td {
  background: #111827;
}

@media (max-width: 1260px) {
  #pricing .pricing-dashboard-grid,
  #pricing .pricing-suggestion-grid--four {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  #pricing .pricing-mini-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  #pricing .pricing-suggestion-grid--four {
    grid-template-columns: 1fr;
  }
}
/* Phase 7O - POD Pricing Suggestions height cleanup */
#pricing .pricing-dashboard-lower {
  align-items: start;
}

#pricing .pricing-suggestions-panel {
  align-self: start;
  height: auto;
}
/* Phase 7P - POD shipping strategy layout pass */
#pricing .pricing-results-panel {
  display: grid;
  align-content: start;
  gap: 12px;
}

#pricing .pricing-live-suggestion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#pricing .pricing-live-suggestion-card,
#pricing .pricing-strategy-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#pricing .pricing-live-suggestion-card--free {
  border-color: rgba(34, 197, 94, 0.28);
  background: linear-gradient(145deg, rgba(22, 163, 74, 0.14), rgba(15, 23, 42, 0.92));
}

#pricing .pricing-live-suggestion-card--buyer {
  border-color: rgba(14, 165, 233, 0.28);
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.13), rgba(15, 23, 42, 0.92));
}

#pricing .pricing-live-suggestion-card span,
#pricing .pricing-strategy-card span {
  display: block;
  color: #93C5FD;
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#pricing .pricing-live-suggestion-card p {
  margin: 5px 0 7px;
  color: #F8FAFC;
  font-size: 0.78rem;
  font-weight: 950;
}

#pricing .pricing-live-suggestion-card strong {
  display: block;
  color: #F8FAFC;
  font-size: clamp(1.26rem, 1.5vw, 1.72rem);
  font-weight: 950;
  line-height: 1.05;
}

#pricing .pricing-live-suggestion-card small,
#pricing .pricing-strategy-card p {
  display: block;
  margin-top: 7px;
  color: #CBD5E1;
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.3;
}

#pricing .pricing-strategy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#pricing .pricing-strategy-card {
  min-height: 116px;
}

#pricing .pricing-strategy-card--free {
  border-color: rgba(34, 197, 94, 0.24);
}

#pricing .pricing-strategy-card--buyer {
  border-color: rgba(14, 165, 233, 0.24);
}

#pricing .pricing-strategy-card--note {
  border-color: rgba(245, 158, 11, 0.24);
}

#pricing .pricing-strategy-card strong {
  display: block;
  margin-top: 8px;
  color: #F8FAFC;
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.2;
}

#pricing .pricing-hidden-readouts[hidden] {
  display: none !important;
}

@media (max-width: 1260px) {
  #pricing .pricing-live-suggestion-grid,
  #pricing .pricing-strategy-grid {
    grid-template-columns: 1fr;
  }
}
/* Phase 7P - approved mockup match refinement */
#pricing .pricing-top-metric--red .pricing-metric-icon {
  background: linear-gradient(135deg, #DC2626, #EF4444);
}

#pricing .pricing-top-metric--red strong {
  color: #F87171;
}

#pricing .pricing-suggested-price-strip {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(120px, auto);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(34, 197, 94, 0.34);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.24), rgba(15, 23, 42, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 34px rgba(2, 6, 23, 0.22);
}

#pricing .pricing-suggested-price-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  color: #052E16;
  background: linear-gradient(135deg, #86EFAC, #22C55E);
  font-size: 1.25rem;
  font-weight: 950;
}

#pricing .pricing-suggested-price-main span,
#pricing .pricing-suggested-price-target span {
  display: block;
  color: #BBF7D0;
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#pricing .pricing-suggested-price-main strong {
  display: block;
  margin-top: 4px;
  color: #4ADE80;
  font-size: clamp(1.65rem, 2vw, 2.24rem);
  font-weight: 950;
  line-height: 1;
}

#pricing .pricing-suggested-price-main small {
  display: block;
  margin-top: 5px;
  color: #DCFCE7;
  font-size: 0.72rem;
  font-weight: 800;
}

#pricing .pricing-suggested-price-target {
  min-width: 128px;
  padding: 10px;
  border: 1px solid rgba(187, 247, 208, 0.22);
  border-radius: 13px;
  background: rgba(5, 46, 22, 0.32);
  text-align: right;
}

#pricing .pricing-suggested-price-target strong {
  display: block;
  margin-top: 4px;
  color: #F0FDF4;
  font-size: 1.05rem;
  font-weight: 950;
}

#pricing .pricing-strategy-compare {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}

#pricing .pricing-strategy-option {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#pricing .pricing-strategy-option--free {
  border-color: rgba(34, 197, 94, 0.34);
  background: linear-gradient(145deg, rgba(22, 163, 74, 0.18), rgba(15, 23, 42, 0.94));
}

#pricing .pricing-strategy-option--buyer {
  border-color: rgba(59, 130, 246, 0.32);
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.16), rgba(15, 23, 42, 0.94));
}

#pricing .pricing-strategy-option-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#pricing .pricing-strategy-option-header span {
  display: block;
  color: #F8FAFC;
  font-size: 0.8rem;
  font-weight: 950;
  line-height: 1.18;
}

#pricing .pricing-strategy-option-header p {
  margin: 5px 0 0;
  color: #CBD5E1;
  font-size: 0.68rem;
  font-weight: 800;
}

#pricing .pricing-strategy-option-header b {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  color: #DCFCE7;
  background: rgba(34, 197, 94, 0.16);
  font-size: 0.58rem;
  font-weight: 950;
  white-space: nowrap;
}

#pricing .pricing-strategy-option--buyer .pricing-strategy-option-header b {
  color: #DBEAFE;
  background: rgba(59, 130, 246, 0.17);
}

#pricing .pricing-strategy-price {
  color: #4ADE80;
  font-size: clamp(1.55rem, 2.1vw, 2.35rem);
  font-weight: 950;
  line-height: 1.02;
}

#pricing .pricing-strategy-option--buyer .pricing-strategy-price {
  color: #BFDBFE;
  font-size: clamp(1.05rem, 1.25vw, 1.3rem);
  line-height: 1.15;
}

#pricing .pricing-strategy-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

#pricing .pricing-strategy-metrics div {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 11px;
  background: rgba(2, 6, 23, 0.38);
}

#pricing .pricing-strategy-metrics span {
  display: block;
  color: #94A3B8;
  font-size: 0.56rem;
  font-weight: 950;
  text-transform: uppercase;
}

#pricing .pricing-strategy-metrics strong {
  display: block;
  margin-top: 4px;
  color: #F8FAFC;
  font-size: 0.76rem;
  font-weight: 950;
  line-height: 1.1;
}

#pricing .pricing-strategy-option footer {
  color: #CBD5E1;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.3;
}

#pricing .pricing-strategy-vs {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  align-self: center;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  color: #E0F2FE;
  background: #0F172A;
  font-size: 0.72rem;
  font-weight: 950;
  box-shadow: 0 12px 26px rgba(2, 6, 23, 0.32);
}

#pricing .pricing-recommendation-strip {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.16), rgba(15, 23, 42, 0.9));
}

#pricing .pricing-recommendation-strip > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  color: #052E16;
  background: #4ADE80;
  font-weight: 950;
}

#pricing .pricing-recommendation-strip strong {
  display: block;
  color: #F8FAFC;
  font-size: 0.86rem;
  font-weight: 950;
}

#pricing .pricing-recommendation-strip p {
  margin: 3px 0 0;
  color: #BBF7D0;
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1.32;
}

#pricing .pricing-recommendation-strip em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #052E16;
  background: #86EFAC;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

#pricing .pricing-cost-list--with-percent {
  gap: 8px;
}

#pricing .pricing-cost-list--with-percent div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 42px;
  align-items: center;
}

#pricing .pricing-cost-list--with-percent span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
}

#pricing .pricing-cost-list--with-percent small {
  color: #94A3B8;
  font-size: 0.64rem;
  font-weight: 900;
  text-align: right;
}

#pricing .pricing-cost-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

#pricing .pricing-cost-summary-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 13px;
  background: rgba(2, 6, 23, 0.42);
}

#pricing .pricing-cost-summary-card--cost {
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(127, 29, 29, 0.2);
}

#pricing .pricing-cost-summary-card span {
  display: block;
  color: #94A3B8;
  font-size: 0.58rem;
  font-weight: 950;
  text-transform: uppercase;
}

#pricing .pricing-cost-summary-card strong {
  display: block;
  margin-top: 5px;
  color: #F8FAFC;
  font-size: 0.9rem;
  font-weight: 950;
}

#pricing .pricing-cost-summary-card--cost strong {
  color: #FCA5A5;
}

@media (max-width: 1260px) {
  #pricing .pricing-strategy-compare,
  #pricing .pricing-cost-summary-grid {
    grid-template-columns: 1fr;
  }

  #pricing .pricing-strategy-vs {
    justify-self: center;
  }

  #pricing .pricing-recommendation-strip,
  #pricing .pricing-suggested-price-strip {
    grid-template-columns: 1fr;
  }
}
/* Phase 7Q - POD customer shipping charge strategy fix */
#pricing .pricing-top-metric--red {
  border-color: rgba(239, 68, 68, 0.32);
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.34), rgba(15, 23, 42, 0.9));
}

#pricing .pricing-top-metric--red .pricing-metric-icon {
  background: linear-gradient(135deg, #B91C1C, #EF4444);
}

#pricing .pricing-top-metric--red strong {
  color: #FCA5A5;
}

#pricing .pricing-suggested-price-strip {
  grid-template-columns: 58px minmax(0, 1fr) minmax(152px, auto);
  min-height: 124px;
  padding: 18px;
  gap: 16px;
  border-color: rgba(34, 197, 94, 0.42);
}

#pricing .pricing-suggested-price-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  font-size: 1.45rem;
}

#pricing .pricing-suggested-price-main strong {
  font-size: clamp(2rem, 2.55vw, 3rem);
}

#pricing .pricing-suggested-price-target {
  min-width: 152px;
  padding: 13px;
}

#pricing .pricing-suggested-price-target strong {
  font-size: 1.32rem;
}

#pricing .pricing-customer-shipping-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-radius: 15px;
  background: rgba(2, 6, 23, 0.34);
}

#pricing .pricing-customer-shipping-control label {
  display: block;
  color: #F8FAFC;
  font-size: 0.86rem;
  font-weight: 950;
}

#pricing .pricing-customer-shipping-control p {
  margin: 4px 0 0;
  color: #CBD5E1;
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1.28;
}

#pricing .pricing-customer-shipping-control input {
  width: 100%;
  min-height: 42px;
  border-color: rgba(96, 165, 250, 0.32);
  color: #F8FAFC;
  background: #020617;
  font-size: 1rem;
  font-weight: 950;
  text-align: right;
}

#pricing .pricing-strategy-option footer strong {
  color: #F8FAFC;
}

#pricing .pricing-cost-bar-track {
  height: 18px;
  border-color: rgba(148, 163, 184, 0.24);
}

#pricing .pricing-cost-list--with-percent div {
  min-height: 44px;
  grid-template-columns: minmax(0, 1fr) minmax(72px, auto) 48px;
}

#pricing .pricing-cost-summary-card--cost {
  border-color: rgba(239, 68, 68, 0.42);
  background: linear-gradient(145deg, rgba(127, 29, 29, 0.34), rgba(15, 23, 42, 0.82));
}

#pricing .pricing-cost-summary-card--cost strong {
  color: #FCA5A5;
}

@media (max-width: 1260px) {
  #pricing .pricing-customer-shipping-control {
    grid-template-columns: 1fr;
  }
}
/* Phase 7Q-Fix - shipping strategy alignment repair */
#pricing .pricing-shipping-strategy-panel .pricing-panel-heading {
  margin-bottom: 10px;
}

#pricing .pricing-customer-shipping-control {
  grid-template-columns: minmax(0, 1fr) 170px;
  margin: 0 0 14px;
  padding: 14px 15px;
  border-color: rgba(96, 165, 250, 0.34);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(2, 6, 23, 0.46));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#pricing .pricing-customer-shipping-control label {
  font-size: 0.92rem;
}

#pricing .pricing-customer-shipping-control input {
  min-height: 48px;
  border-radius: 12px;
  font-size: 1.16rem;
}

#pricing .pricing-strategy-compare {
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}

#pricing .pricing-strategy-option {
  grid-template-rows: auto auto 1fr auto;
  min-height: 292px;
  padding: 14px;
  gap: 11px;
}

#pricing .pricing-strategy-option-header {
  min-height: 58px;
}

#pricing .pricing-strategy-option-header span {
  font-size: 0.78rem;
}

#pricing .pricing-strategy-option-header p {
  max-width: 220px;
  font-size: 0.66rem;
  line-height: 1.25;
}

#pricing .pricing-strategy-price,
#pricing .pricing-strategy-option--buyer .pricing-strategy-price {
  display: flex;
  align-items: center;
  min-height: 54px;
  color: #4ADE80;
  font-size: clamp(1.34rem, 1.55vw, 1.82rem);
  line-height: 1.05;
}

#pricing .pricing-strategy-metrics {
  align-self: stretch;
}

#pricing .pricing-strategy-metrics div {
  display: grid;
  align-content: center;
  min-height: 58px;
}

#pricing .pricing-strategy-option footer {
  min-height: 46px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

#pricing .pricing-cost-panel .pricing-panel-heading {
  margin-bottom: 10px;
}

#pricing .pricing-cost-bar-card {
  margin-bottom: 10px;
}

#pricing .pricing-cost-list--with-percent div {
  grid-template-columns: minmax(0, 1fr) minmax(74px, auto) 50px;
  gap: 9px;
  padding: 9px 10px;
}

#pricing .pricing-cost-list--with-percent strong,
#pricing .pricing-cost-list--with-percent small {
  justify-self: end;
}

#pricing .pricing-cost-summary-grid {
  grid-template-columns: 1.05fr 1fr 1fr;
}

#pricing .pricing-cost-summary-card:nth-child(2) strong {
  color: #4ADE80;
}

@media (max-width: 1260px) {
  #pricing .pricing-strategy-option {
    min-height: 0;
  }
}

/* Phase 7Q-Fix 2 - POD cost breakdown and alignment repair */
#pricing .pricing-dashboard-grid {
  align-items: stretch;
}

#pricing .pricing-context-panel,
#pricing .pricing-cost-panel,
#pricing .pricing-shipping-strategy-panel {
  min-width: 0;
}

#pricing .pricing-context-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
}

#pricing .pricing-selected-product-card {
  grid-template-columns: 88px minmax(0, 1fr);
  min-height: 116px;
  padding: 14px;
  gap: 13px;
}

#pricing .pricing-selected-product-art {
  width: 84px;
  height: 84px;
  border-radius: 20px;
}

#pricing .pricing-selected-product-art svg {
  width: 70px;
  height: 70px;
}

#pricing .pricing-product-tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-content: stretch;
}

#pricing .pricing-product-tiles button {
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 78px;
  padding: 9px 6px 7px;
  gap: 5px;
  text-align: center;
}

#pricing .pricing-product-tiles .pricing-product-art {
  width: 40px;
  height: 40px;
  border-radius: 13px;
}

#pricing .pricing-product-tiles .pricing-product-art svg {
  width: 33px;
  height: 33px;
}

#pricing .pricing-product-tiles button strong {
  font-size: 0.64rem;
  line-height: 1.08;
}

#pricing .pricing-shipping-strategy-panel {
  display: grid;
  align-content: start;
}

#pricing .pricing-strategy-compare {
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}

#pricing .pricing-strategy-option {
  grid-template-rows: auto auto 1fr auto;
  min-height: 326px;
  padding: 17px;
  gap: 13px;
}

#pricing .pricing-strategy-option-header {
  min-height: 66px;
}

#pricing .pricing-strategy-price,
#pricing .pricing-strategy-option--buyer .pricing-strategy-price {
  min-height: 66px;
  font-size: clamp(1.55rem, 1.8vw, 2.1rem);
}

#pricing .pricing-strategy-metrics div {
  min-height: 66px;
  padding: 10px;
}

#pricing .pricing-strategy-option footer {
  min-height: 58px;
  font-size: 0.72rem;
}

#pricing .pricing-cost-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.82));
}

#pricing .pricing-cost-panel .pricing-panel-heading {
  margin-bottom: 0;
}

#pricing .pricing-cost-bar-card {
  margin-bottom: 0;
  padding: 14px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.38);
}

#pricing .pricing-cost-bar-track {
  height: 22px;
  overflow: hidden;
}

#pricing .pricing-cost-bar-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 12px;
}

#pricing .pricing-cost-list--with-percent {
  display: grid;
  gap: 9px;
}

#pricing .pricing-cost-list--with-percent div {
  min-height: 50px;
  grid-template-columns: minmax(0, 1fr) minmax(88px, auto) 54px;
  gap: 10px;
  padding: 10px 12px;
}

#pricing .pricing-cost-list--with-percent span {
  min-width: 0;
}

#pricing .pricing-cost-list--with-percent strong {
  font-size: 0.88rem;
}

#pricing .pricing-cost-list--with-percent small {
  font-size: 0.72rem;
}

#pricing .pricing-cost-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 0;
}

#pricing .pricing-cost-summary-card {
  min-height: 74px;
  padding: 12px;
  border-radius: 14px;
}

#pricing .pricing-cost-summary-card--price {
  border-color: rgba(96, 165, 250, 0.32);
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.2), rgba(15, 23, 42, 0.82));
}

#pricing .pricing-cost-summary-card--price strong {
  color: #BFDBFE;
}

#pricing .pricing-cost-summary-card--profit {
  border-color: rgba(34, 197, 94, 0.34);
  background: linear-gradient(145deg, rgba(22, 163, 74, 0.2), rgba(15, 23, 42, 0.82));
}

#pricing .pricing-cost-summary-card--profit strong {
  color: #4ADE80;
}

#pricing .pricing-cost-summary-card--margin strong {
  color: #FDE68A;
}

@media (max-width: 1260px) {
  #pricing .pricing-strategy-compare,
  #pricing .pricing-cost-summary-grid {
    grid-template-columns: 1fr;
  }

  #pricing .pricing-strategy-option {
    min-height: 0;
  }
}
/* Phase 7R-A - Cost Breakdown rebuild only */
#pricing .pricing-cost-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.12), transparent 34%),
    linear-gradient(160deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 38px rgba(2, 6, 23, 0.18);
}

#pricing .pricing-cost-panel .pricing-panel-heading {
  margin: 0;
  padding-bottom: 4px;
}

#pricing .pricing-cost-panel .pricing-panel-heading span {
  color: #FDE68A;
}

#pricing .pricing-cost-panel .pricing-panel-heading strong {
  color: #F8FAFC;
}

#pricing .pricing-cost-panel .pricing-panel-heading small {
  color: #94A3B8;
  font-size: 0.66rem;
  font-weight: 800;
}

#pricing .pricing-cost-bar-card {
  display: block;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.58));
}

#pricing .pricing-cost-bar-track {
  display: flex;
  width: 100%;
  height: 24px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.8);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  box-shadow: inset 0 1px 3px rgba(2, 6, 23, 0.75);
}

#pricing .pricing-cost-bar-segment {
  min-width: 0;
  height: 100%;
  transition: width 160ms ease;
}

#pricing .pricing-cost-bar-segment--product,
#pricing .pricing-cost-dot--product { background: #22C55E; }
#pricing .pricing-cost-bar-segment--shipping,
#pricing .pricing-cost-dot--shipping { background: #38BDF8; }
#pricing .pricing-cost-bar-segment--fees,
#pricing .pricing-cost-dot--fees { background: #8B5CF6; }
#pricing .pricing-cost-bar-segment--other,
#pricing .pricing-cost-dot--other { background: #94A3B8; }
#pricing .pricing-cost-bar-segment--tax,
#pricing .pricing-cost-dot--tax { background: #F59E0B; }

#pricing .pricing-cost-list--with-percent {
  display: grid;
  gap: 8px;
}

#pricing .pricing-cost-list--with-percent div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, auto) 54px;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 13px;
  background: rgba(15, 23, 42, 0.58);
}

#pricing .pricing-cost-list--with-percent div::before {
  content: none;
}

#pricing .pricing-cost-list--with-percent span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  color: #CBD5E1;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
}

#pricing .pricing-cost-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

#pricing .pricing-cost-list--with-percent strong {
  justify-self: end;
  color: #F8FAFC;
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

#pricing .pricing-cost-list--with-percent small {
  justify-self: end;
  color: #94A3B8;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

#pricing .pricing-cost-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

#pricing .pricing-cost-summary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 38px;
  padding: 8px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#pricing .pricing-cost-summary-card + .pricing-cost-summary-card {
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}

#pricing .pricing-cost-summary-card span {
  color: #CBD5E1;
  font-size: 0.73rem;
  font-weight: 950;
  letter-spacing: 0.01em;
  text-transform: none;
}

#pricing .pricing-cost-summary-card strong {
  margin: 0;
  color: #F8FAFC;
  font-size: 0.98rem;
  font-weight: 950;
  text-align: right;
  white-space: nowrap;
}

#pricing .pricing-cost-summary-card--price strong {
  color: #BFDBFE;
}

#pricing .pricing-cost-summary-card--cost span,
#pricing .pricing-cost-summary-card--cost strong {
  color: #FCA5A5;
}

#pricing .pricing-cost-summary-card--profit span,
#pricing .pricing-cost-summary-card--profit strong {
  color: #4ADE80;
}

#pricing .pricing-cost-summary-card--margin strong {
  color: #67E8F9;
}

@media (max-width: 1260px) {
  #pricing .pricing-cost-summary-grid {
    grid-template-columns: 1fr;
  }
}
/* Phase 7R-B - Pricing inputs and strategy card visual polish */
#pricing .pricing-input-readouts {
  gap: 10px;
}

#pricing .pricing-mini-card {
  grid-template-columns: 40px minmax(0, 1fr) minmax(126px, 142px);
  min-height: 66px;
  padding: 10px 11px;
  gap: 11px;
}

#pricing .pricing-mini-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  font-size: 0.88rem;
}

#pricing .pricing-mini-card p {
  font-size: 0.78rem;
  line-height: 1.13;
}

#pricing .pricing-mini-card small {
  font-size: 0.62rem;
  line-height: 1.16;
}

#pricing .pricing-mini-card strong {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 13px;
  font-size: 1.04rem;
}

#pricing #podTopSalePrice {
  color: #4ADE80;
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(22, 101, 52, 0.2);
}

#pricing #podTopFees,
#pricing #podTopOtherCosts {
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.34);
  background: rgba(127, 29, 29, 0.22);
}

#pricing .pricing-suggested-price-target {
  min-width: 170px;
  padding: 15px 16px;
  border-color: rgba(96, 165, 250, 0.34);
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.18), rgba(5, 46, 22, 0.2));
}

#pricing .pricing-suggested-price-target strong {
  color: #60A5FA;
  font-size: 1.48rem;
}

#pricing .pricing-strategy-price,
#pricing .pricing-strategy-option--buyer .pricing-strategy-price {
  display: grid;
  place-items: center;
  min-height: 74px;
  color: #4ADE80;
  font-size: clamp(1.85rem, 2.15vw, 2.55rem);
  line-height: 1;
  text-align: center;
}

#pricing .pricing-strategy-option {
  grid-template-rows: auto auto 1fr auto;
}

#pricing .pricing-strategy-metrics {
  align-self: stretch;
  gap: 9px;
}

#pricing .pricing-strategy-metrics div {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 72px;
  padding: 11px 9px;
  text-align: center;
}

#pricing .pricing-strategy-metrics span {
  line-height: 1.1;
}

#pricing .pricing-strategy-metrics strong {
  margin-top: 6px;
  font-size: 0.88rem;
  line-height: 1.08;
  text-align: center;
}

#pricing #podStrategyFreeNetProfit,
#pricing #podStrategyBuyerNetProfit {
  color: #4ADE80;
}

#pricing #podStrategyFreeTotalCosts,
#pricing #podStrategyBuyerTotalCosts {
  color: #FCA5A5;
}

#pricing #podStrategyFreeMargin,
#pricing #podStrategyBuyerMargin {
  color: #60A5FA;
}

@media (max-width: 720px) {
  #pricing .pricing-mini-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  #pricing .pricing-mini-card strong {
    grid-column: 1 / -1;
  }
}
/* Phase 7R-C - Pricing Inputs top-row height match */
#pricing .pricing-input-panel {
  display: grid;
  align-content: stretch;
  min-height: 100%;
}

#pricing .pricing-input-panel .pricing-panel-heading {
  margin-bottom: 10px;
}

#pricing .pricing-input-readouts {
  align-content: stretch;
  gap: 11px;
}

#pricing .pricing-mini-card {
  min-height: 72px;
  padding: 11px 12px;
}

#pricing .pricing-mini-icon {
  width: 42px;
  height: 42px;
}

#pricing .pricing-mini-card strong {
  min-height: 48px;
  padding: 9px 13px;
}

@media (max-width: 720px) {
  #pricing .pricing-mini-card {
    min-height: 68px;
  }
}
/* Phase 8A - Listing SEO Tracker visual layout direction */
#seo .seo-visual-shell {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.18), transparent 34%),
    linear-gradient(160deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.95));
  box-shadow: 0 20px 48px rgba(2, 6, 23, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#seo .seo-tab-radio {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

#seo .seo-visual-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 18px;
  align-items: start;
}

#seo .seo-visual-kicker,
#seo .seo-card-heading span {
  display: block;
  color: #A78BFA;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#seo .seo-visual-header h3 {
  margin: 6px 0 8px;
  color: #F8FAFC;
  font-size: clamp(1.65rem, 2vw, 2.25rem);
  line-height: 1.05;
}

#seo .seo-visual-header p,
#seo .seo-visual-status span,
#seo .seo-dark-card p {
  margin: 0;
  color: #CBD5E1;
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.45;
}

#seo .seo-visual-status {
  display: grid;
  gap: 6px;
  padding: 15px;
  border: 1px solid rgba(34, 197, 94, 0.24);
  border-radius: 18px;
  background: rgba(5, 46, 22, 0.34);
}

#seo .seo-visual-status strong {
  color: #86EFAC;
  font-size: 0.95rem;
}

#seo .seo-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.7);
}

#seo .seo-tab-bar label {
  flex: 1 1 130px;
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #CBD5E1;
  font-size: 0.82rem;
  font-weight: 950;
  cursor: pointer;
}

#seo #seoTabDashboard:checked ~ .seo-tab-bar label[for="seoTabDashboard"],
#seo #seoTabListings:checked ~ .seo-tab-bar label[for="seoTabListings"],
#seo #seoTabKeywords:checked ~ .seo-tab-bar label[for="seoTabKeywords"],
#seo #seoTabCategories:checked ~ .seo-tab-bar label[for="seoTabCategories"],
#seo #seoTabCompetitors:checked ~ .seo-tab-bar label[for="seoTabCompetitors"] {
  color: #EFF6FF;
  border-color: rgba(96, 165, 250, 0.42);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(139, 92, 246, 0.18));
}

#seo .seo-tab-panel {
  display: none;
}

#seo #seoTabDashboard:checked ~ .seo-tab-panels [data-seo-panel="dashboard"],
#seo #seoTabListings:checked ~ .seo-tab-panels [data-seo-panel="listings"],
#seo #seoTabKeywords:checked ~ .seo-tab-panels [data-seo-panel="keywords"],
#seo #seoTabCategories:checked ~ .seo-tab-panels [data-seo-panel="categories"],
#seo #seoTabCompetitors:checked ~ .seo-tab-panels [data-seo-panel="competitors"] {
  display: grid;
}

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

#seo .seo-metric-grid article,
#seo .seo-dark-card,
#seo .seo-option-panel {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.62));
}

#seo .seo-metric-grid article {
  display: grid;
  gap: 7px;
  min-height: 120px;
  padding: 16px;
}

#seo .seo-metric-grid span {
  color: #94A3B8;
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

#seo .seo-metric-grid strong {
  color: #4ADE80;
  font-size: clamp(1.45rem, 2vw, 2rem);
  font-weight: 950;
}

#seo .seo-metric-grid small,
#seo .seo-empty-row,
#seo .seo-empty-compact,
#seo .seo-manual-note {
  color: #CBD5E1;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.38;
}

#seo .seo-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(280px, 1fr);
  gap: 14px;
  margin-top: 14px;
}

#seo .seo-dark-card {
  display: grid;
  gap: 14px;
  padding: 17px;
}

#seo .seo-card-heading strong {
  display: block;
  margin-top: 5px;
  color: #F8FAFC;
  font-size: 1rem;
  font-weight: 950;
}

#seo .seo-score-ring {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 170px;
  border-radius: 20px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.22), rgba(15, 23, 42, 0.7) 64%);
  text-align: center;
}

#seo .seo-score-ring strong {
  color: #86EFAC;
  font-size: 3rem;
}

#seo .seo-score-ring span {
  max-width: 220px;
  color: #CBD5E1;
  font-size: 0.78rem;
  font-weight: 800;
}

#seo .seo-trend-line {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 10px;
  min-height: 150px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.38);
}

#seo .seo-trend-line i {
  display: block;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, #8B5CF6, #22C55E);
}

#seo .seo-trend-line i:nth-child(1) { height: 32%; }
#seo .seo-trend-line i:nth-child(2) { height: 48%; }
#seo .seo-trend-line i:nth-child(3) { height: 42%; }
#seo .seo-trend-line i:nth-child(4) { height: 68%; }
#seo .seo-trend-line i:nth-child(5) { height: 58%; }

#seo .seo-insights-card,
#seo .seo-top-listings-card {
  grid-column: span 1;
}

#seo .seo-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#seo .seo-recommendation-grid div {
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(88, 28, 135, 0.28), rgba(15, 23, 42, 0.72));
}

#seo .seo-recommendation-grid b {
  color: #E9D5FF;
  font-size: 0.82rem;
}

#seo .seo-recommendation-grid span {
  color: #CBD5E1;
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.34;
}

#seo .seo-option-panel {
  gap: 14px;
  padding: 16px;
}

#seo .seo-option-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

#seo .seo-option-toolbar label {
  display: grid;
  gap: 7px;
  color: #CBD5E1;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

#seo .seo-option-toolbar input {
  min-height: 42px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 12px;
  color: #F8FAFC;
  background: rgba(2, 6, 23, 0.76);
}

#seo .seo-option-table-wrap {
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.38);
}

#seo .seo-option-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

#seo .seo-option-table th,
#seo .seo-option-table td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  color: #CBD5E1;
  font-size: 0.78rem;
  text-align: left;
}

#seo .seo-option-table th {
  color: #93C5FD;
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

#seo .seo-competitor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 14px;
}

#seo .seo-listing-preview-thumb {
  display: grid;
  place-items: center;
  min-height: 150px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 18px;
  color: #BFDBFE;
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.2), rgba(15, 23, 42, 0.86));
  font-weight: 950;
}

#seo .seo-top-listing-preview dl {
  display: grid;
  gap: 9px;
  margin: 0;
}

#seo .seo-top-listing-preview dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

#seo .seo-top-listing-preview dt {
  color: #94A3B8;
  font-size: 0.72rem;
  font-weight: 900;
}

#seo .seo-top-listing-preview dd {
  margin: 0;
  color: #F8FAFC;
  font-size: 0.76rem;
  font-weight: 900;
  text-align: right;
}

#seo .seo-manual-tools {
  margin-top: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.82);
  overflow: hidden;
}

#seo .seo-manual-tools summary {
  padding: 14px 18px;
  color: #17324D;
  font-weight: 950;
  cursor: pointer;
}

#seo .seo-manual-tools-body {
  display: grid;
  gap: 18px;
  padding: 0 0 18px;
}

@media (max-width: 1100px) {
  #seo .seo-visual-header,
  #seo .seo-dashboard-grid,
  #seo .seo-competitor-grid {
    grid-template-columns: 1fr;
  }

  #seo .seo-metric-grid,
  #seo .seo-recommendation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  #seo .seo-metric-grid,
  #seo .seo-recommendation-grid,
  #seo .seo-option-toolbar {
    grid-template-columns: 1fr;
  }
}
/* Phase 8A-Fix 1 - Listing SEO Dashboard empty-state polish */
#seo .seo-dashboard-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(88, 28, 135, 0.18));
}

#seo .seo-dashboard-intro span {
  color: #A78BFA;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#seo .seo-dashboard-intro strong {
  display: block;
  margin-top: 4px;
  color: #F8FAFC;
  font-size: 1.08rem;
  font-weight: 950;
}

#seo .seo-dashboard-intro p {
  margin: 5px 0 0;
  color: #CBD5E1;
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.36;
}

/* =========================================================================================
   POD Pricing Calculator extensions (new). Appended at end of file so these rules win the
   cascade over any earlier same-specificity #pricing selectors without needing !important.
   ========================================================================================= */

/* Task 1: POD / Digital / Drop-shipped segmented control */
.pricing-fulfillment-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.pricing-fulfillment-toggle button {
  flex: 1 1 auto;
  min-width: 90px;
  padding: 8px 10px;
  border: 1px solid rgba(23, 50, 77, 0.16);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pricing-fulfillment-toggle button.selected {
  border-color: #2563EB;
  color: #FFFFFF;
  background: #2563EB;
}

#pricing .pricing-fulfillment-toggle button {
  border-color: rgba(148, 163, 184, 0.28);
  color: #E5E7EB;
  background: rgba(17, 24, 39, 0.9);
}

#pricing .pricing-fulfillment-toggle button.selected {
  border-color: #2563EB;
  color: #FFFFFF;
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
}

/* Task 2: distinct digital / drop-shipped tile art colors, matching the existing per-type
   tile color convention (see .pricing-product-art--excel / --case / --blanket above) */
#pricing .pricing-product-tiles .pricing-product-art--digitaldownload {
  color: #7DD3FC;
  background: radial-gradient(circle at 30% 22%, rgba(14, 165, 233, 0.22), rgba(15, 23, 42, 0.98) 68%);
}

#pricing .pricing-product-tiles .pricing-product-art--dropshipped {
  color: #FDE68A;
  background: radial-gradient(circle at 30% 22%, rgba(234, 179, 8, 0.22), rgba(15, 23, 42, 0.98) 68%);
}

/* Task 2: click-to-enlarge product preview tile */
.pricing-selected-product-art-button {
  display: inline-flex;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}

.pricing-selected-product-art-button:hover .pricing-selected-product-art,
.pricing-selected-product-art-button:focus-visible .pricing-selected-product-art {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.45);
}

.pod-tile-preview-art {
  display: grid;
  place-items: center;
  width: 220px;
  height: 220px;
  max-width: 60vw;
  max-height: 60vw;
  margin: 0 auto;
  color: #2563EB;
}

.pod-tile-preview-art svg {
  width: 100%;
  height: 100%;
  fill: rgba(37, 99, 235, 0.14);
  stroke: currentColor;
  stroke-width: 2.4;
}

.pod-tile-preview-label {
  margin: 12px 0 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
}

/* Tasks 3 & 4: shared "alternate result card" styling used by the shipping-scenario
   toggle card and the opt-in shipping-split card */
.pricing-scenario-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.pricing-scenario-toggle-row label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.pricing-scenario-toggle-row select {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(23, 50, 77, 0.18);
  border-radius: 6px;
  font-size: 0.78rem;
}

/* Using :not([hidden]) keeps the browser's default [hidden]{display:none} UA rule in
   effect when the card is hidden - a plain unconditional `display` rule on this class
   would otherwise beat the UA rule in the cascade and defeat `card.hidden = true` in JS. */
.pricing-scenario-card:not([hidden]) {
  display: block;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.06);
}

.pricing-scenario-card-title {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--navy);
}

.pricing-scenario-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.pricing-scenario-card-grid div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pricing-scenario-card-grid span {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.pricing-scenario-card-grid strong {
  font-size: 1rem;
  font-weight: 900;
  color: var(--navy);
}

.pricing-scenario-card small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.pricing-shipping-split-card:not([hidden]) {
  border-color: rgba(217, 119, 6, 0.32);
  background: rgba(217, 119, 6, 0.06);
}

#pricing .pricing-scenario-toggle-row label {
  color: #CBD5E1;
}

#pricing .pricing-scenario-toggle-row select {
  border-color: rgba(148, 163, 184, 0.28);
  color: #F8FAFC;
  background: #111827;
}

#pricing .pricing-scenario-card:not([hidden]) {
  border-color: rgba(96, 165, 250, 0.32);
  background: rgba(37, 99, 235, 0.12);
}

#pricing .pricing-scenario-card-title,
#pricing .pricing-scenario-card-grid strong {
  color: #F8FAFC;
}

#pricing .pricing-scenario-card-grid span,
#pricing .pricing-scenario-card small {
  color: #94A3B8;
}

#pricing .pricing-shipping-split-card:not([hidden]) {
  border-color: rgba(251, 191, 36, 0.34);
  background: rgba(217, 119, 6, 0.14);
}

/* Task 5: margin health gauge - fuel-gauge-style arc adapted from the Dashboard tab's
   stroke-dashoffset technique (see .dashboard-gauge-fill / DASHBOARD_GAUGE_ARC_LENGTH),
   with a fixed red/gold/green band track underneath a dynamic fill. Thresholds are set in
   app.js (POD_MARGIN_GAUGE_RED_MAX / _GOLD_MAX / _MAX) - flagged there as adjustable. */
.pricing-margin-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 14px;
  padding-top: 4px;
}

.pricing-margin-gauge-svg {
  width: 100%;
  max-width: 220px;
  height: auto;
  overflow: visible;
}

.pricing-margin-gauge-band {
  fill: none;
  stroke-width: 16;
  stroke-linecap: butt;
}

.pricing-margin-gauge-band--red { stroke: rgba(220, 38, 38, 0.32); }
.pricing-margin-gauge-band--gold { stroke: rgba(217, 119, 6, 0.32); }
.pricing-margin-gauge-band--green { stroke: rgba(22, 163, 74, 0.32); }

.pricing-margin-gauge-fill {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 251.33;
  stroke-dashoffset: 251.33;
  transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease;
}

.pricing-margin-gauge-fill--red { stroke: #DC2626; }
.pricing-margin-gauge-fill--gold { stroke: #D97706; }
.pricing-margin-gauge-fill--green { stroke: #16A34A; }

.pricing-margin-gauge-value {
  margin: 4px 0 0;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--navy);
}

.pricing-margin-gauge-label {
  margin: 2px 0 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

#pricing .pricing-margin-gauge-value {
  color: #F8FAFC;
}

#pricing .pricing-margin-gauge-label {
  color: #CBD5E1;
}

/* Task 7: discount / markup +/- steppers */
.pod-stepper-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pod-stepper-input-row .pod-percent-input {
  flex: 1;
  min-width: 0;
}

.pod-stepper-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(23, 50, 77, 0.18);
  border-radius: 6px;
  background: #FFFFFF;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.pod-stepper-btn:hover {
  background: rgba(37, 99, 235, 0.08);
}

#pricing .pod-stepper-btn {
  border-color: rgba(148, 163, 184, 0.3);
  color: #F8FAFC;
  background: #111827;
}

#pricing .pod-stepper-btn:hover {
  background: rgba(37, 99, 235, 0.22);
}

#seo .seo-dashboard-action {
  min-width: 150px;
  text-align: center;
  text-decoration: none;
}

#seo .seo-dashboard-tab {
  gap: 14px;
}

#seo .seo-dashboard-tab .seo-metric-grid article:nth-child(3) strong {
  color: #FDE68A;
}

#seo .seo-score-ring--empty {
  min-height: 154px;
  border: 1px dashed rgba(134, 239, 172, 0.28);
  background: radial-gradient(circle, rgba(34, 197, 94, 0.16), rgba(15, 23, 42, 0.72) 68%);
}

#seo .seo-score-ring--empty small {
  max-width: 230px;
  color: #94A3B8;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
}

#seo .seo-empty-checklist {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#seo .seo-empty-checklist li {
  position: relative;
  padding-left: 22px;
  color: #CBD5E1;
  font-size: 0.76rem;
  font-weight: 800;
}

#seo .seo-empty-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #8B5CF6;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.14);
}

#seo .seo-trend-empty {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  min-height: 140px;
  padding: 18px;
  border: 1px dashed rgba(147, 197, 253, 0.22);
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.34);
}

#seo .seo-trend-empty i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.16), rgba(167, 139, 250, 0.34), rgba(96, 165, 250, 0.16));
}

#seo .seo-trend-empty i:nth-child(2) {
  opacity: 0.72;
}

#seo .seo-trend-empty i:nth-child(3) {
  opacity: 0.48;
}

#seo .seo-skeleton-list {
  display: grid;
  gap: 10px;
}

#seo .seo-skeleton-list span {
  display: block;
  height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.7), rgba(51, 65, 85, 0.42), rgba(15, 23, 42, 0.7));
}

#seo .seo-insights-card .seo-recommendation-grid div {
  min-height: 112px;
  align-content: start;
  border-color: rgba(167, 139, 250, 0.28);
  background: linear-gradient(145deg, rgba(88, 28, 135, 0.34), rgba(15, 23, 42, 0.76));
}

#seo .seo-recommendation-grid em {
  align-self: end;
  justify-self: start;
  margin-top: 4px;
  padding: 5px 8px;
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 999px;
  color: #DDD6FE;
  background: rgba(88, 28, 135, 0.24);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 950;
}

@media (max-width: 720px) {
  #seo .seo-dashboard-intro {
    grid-template-columns: 1fr;
  }

  #seo .seo-dashboard-action {
    width: 100%;
  }
}
/* Phase 8A-Fix 2 - Dark style Manual SEO Review Tools */
#seo .seo-manual-tools {
  margin-top: 20px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.12), transparent 30%),
    linear-gradient(160deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.95));
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

#seo .seo-manual-tools summary {
  padding: 16px 20px;
  color: #F8FAFC;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.72);
  font-weight: 950;
  cursor: pointer;
}

#seo .seo-manual-tools-body {
  display: grid;
  gap: 18px;
  padding: 18px;
}

#seo .seo-manual-tools .panel,
#seo .seo-manual-tools .table-grid .panel {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.68));
  box-shadow: none;
  overflow: hidden;
}

#seo .seo-manual-tools .panel-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(2, 6, 23, 0.22);
}

#seo .seo-manual-tools .panel-header h3,
#seo .seo-manual-tools .panel-header h3[id] {
  color: #F8FAFC;
}

#seo .seo-manual-tools .panel-kicker,
#seo .seo-manual-tools .field-help,
#seo .seo-manual-tools .chart-placeholder {
  color: #CBD5E1;
}

#seo .seo-manual-tools .seo-grader-shell,
#seo .seo-manual-tools .seo-improvement-shell,
#seo .seo-manual-tools .data-form {
  background: transparent;
}

#seo .seo-manual-tools .field label,
#seo .seo-manual-tools label,
#seo .seo-manual-tools .field.compact label {
  color: #E5E7EB;
  font-weight: 900;
}

#seo .seo-manual-tools input,
#seo .seo-manual-tools select,
#seo .seo-manual-tools textarea {
  border-color: rgba(148, 163, 184, 0.24);
  color: #F8FAFC;
  background: #0F172A;
}

#seo .seo-manual-tools input::placeholder,
#seo .seo-manual-tools textarea::placeholder {
  color: #94A3B8;
}

#seo .seo-manual-tools input[readonly] {
  color: #BFDBFE;
  background: #020617;
}

#seo .seo-manual-tools .seo-product-browser {
  padding: 4px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.24);
}

#seo .seo-manual-tools .seo-product-card {
  border-color: rgba(148, 163, 184, 0.16);
  color: #E5E7EB;
  background: rgba(15, 23, 42, 0.82);
}

#seo .seo-manual-tools .seo-product-card:hover,
#seo .seo-manual-tools .seo-product-card.selected {
  border-color: rgba(34, 197, 94, 0.42);
  background: linear-gradient(145deg, rgba(22, 101, 52, 0.2), rgba(15, 23, 42, 0.9));
  box-shadow: inset 4px 0 0 #22C55E, 0 12px 24px rgba(2, 6, 23, 0.22);
}

#seo .seo-manual-tools .seo-product-name,
#seo .seo-manual-tools .seo-summary-card h4 {
  color: #F8FAFC;
}

#seo .seo-manual-tools .seo-product-meta,
#seo .seo-manual-tools .seo-summary-grid span {
  color: #CBD5E1;
}

#seo .seo-manual-tools .seo-summary-card,
#seo .seo-manual-tools .seo-future-notes,
#seo .seo-manual-tools .seo-suggestions,
#seo .seo-manual-tools .empty-browser-state {
  border: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: 16px;
  color: #CBD5E1;
  background: rgba(2, 6, 23, 0.34);
}

#seo .seo-manual-tools .seo-summary-card {
  border-left: 4px solid #22C55E;
}

#seo .seo-manual-tools .seo-summary-grid strong {
  color: #F8FAFC;
}

#seo .seo-manual-tools .seo-future-notes strong {
  color: #C4B5FD;
}

#seo .seo-manual-tools .seo-history-chart-wrap,
#seo .seo-manual-tools .seo-history-placeholder {
  border-color: rgba(148, 163, 184, 0.16);
  color: #CBD5E1;
  background: rgba(2, 6, 23, 0.34);
}

#seo .seo-manual-tools .table-wrap {
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 16px;
  background: #0B1220;
}

#seo .seo-manual-tools table {
  width: 100%;
  border-collapse: collapse;
}

#seo .seo-manual-tools table th {
  color: #BFDBFE;
  background: #0F172A;
  border-bottom-color: rgba(148, 163, 184, 0.16);
}

#seo .seo-manual-tools table td {
  color: #E5E7EB;
  background: #111827;
  border-bottom-color: rgba(148, 163, 184, 0.12);
}

#seo .seo-manual-tools table tr:nth-child(even) td {
  background: #0F172A;
}

#seo .seo-manual-tools .seo-suggestions ul {
  justify-content: stretch;
  color: #CBD5E1;
}

#seo .seo-manual-tools .seo-suggestions li {
  color: #E5E7EB;
}

#seo .seo-manual-tools .form-actions {
  border-top-color: rgba(148, 163, 184, 0.12);
}

#seo .seo-manual-tools .field.compact {
  max-width: 220px;
}
/* Phase 8A-Fix 3 - Remove remaining light panels inside Listing SEO Tracker */
#seo .panel,
#seo .stat-card,
#seo .seo-option-panel,
#seo .seo-dark-card,
#seo .seo-manual-tools,
#seo .seo-manual-tools .panel,
#seo .seo-summary-card,
#seo .seo-future-notes,
#seo .seo-suggestions,
#seo .seo-history-chart-wrap,
#seo .chart-placeholder,
#seo .empty-browser-state,
#seo .seo-empty-row,
#seo .seo-empty-compact {
  border-color: rgba(148, 163, 184, 0.16);
  color: #E5E7EB;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.7));
  box-shadow: none;
}

#seo .panel::before,
#seo .stat-card::before {
  background: linear-gradient(180deg, #8B5CF6, #22C55E);
}

#seo .panel-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.13);
  background: rgba(2, 6, 23, 0.24);
}

#seo .panel h3,
#seo .panel-header h3,
#seo .panel-header h3[id],
#seo .seo-summary-card h4,
#seo .stat-card .value {
  color: #F8FAFC;
}

#seo .panel-kicker,
#seo .field-help,
#seo .stat-card .label,
#seo .stat-card .subtext,
#seo .seo-product-meta,
#seo .seo-summary-grid span,
#seo .chart-placeholder,
#seo .empty-row td {
  color: #CBD5E1;
}

#seo .data-form,
#seo .seo-grader-shell,
#seo .seo-improvement-shell,
#seo .seo-filter-grid,
#seo .tag-grid,
#seo .table-grid {
  background: transparent;
}

#seo .field label,
#seo label,
#seo .field.compact label {
  color: #E5E7EB;
}

#seo input,
#seo select,
#seo textarea {
  border-color: rgba(148, 163, 184, 0.26);
  color: #F8FAFC;
  background: #0F172A;
}

#seo input::placeholder,
#seo textarea::placeholder {
  color: #94A3B8;
}

#seo input[readonly] {
  color: #BFDBFE;
  background: #020617;
}

#seo .table-wrap,
#seo .seo-option-table-wrap,
#seo .seo-comparison-wrap {
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 16px;
  background: #0B1220;
}

#seo table {
  background: #0B1220;
}

#seo table th,
#seo .seo-option-table th {
  color: #BFDBFE;
  background: #0F172A;
  border-bottom-color: rgba(148, 163, 184, 0.16);
}

#seo table td,
#seo .seo-option-table td {
  color: #E5E7EB;
  background: #111827;
  border-bottom-color: rgba(148, 163, 184, 0.12);
}

#seo table tr:nth-child(even) td,
#seo .seo-option-table tr:nth-child(even) td {
  background: #0F172A;
}

#seo .empty-row td,
#seo .seo-option-table .seo-empty-row,
#seo .seo-empty-row {
  color: #CBD5E1;
  background: rgba(2, 6, 23, 0.48);
}

#seo .seo-product-browser,
#seo .seo-product-card,
#seo .seo-selected-summary,
#seo .seo-score-change-grid .stat-card {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.86);
}

#seo .seo-product-card:hover,
#seo .seo-product-card.selected {
  border-color: rgba(34, 197, 94, 0.42);
  background: linear-gradient(145deg, rgba(22, 101, 52, 0.22), rgba(15, 23, 42, 0.92));
}

#seo .seo-product-name,
#seo .seo-summary-grid strong {
  color: #F8FAFC;
}

#seo .seo-history-chart-wrap canvas {
  background: transparent;
}

#seo .badge,
#seo .grade-card,
#seo .stat-card.grade-card {
  border-color: rgba(148, 163, 184, 0.18);
}

/* Phase 8A-Fix 4 - Full Listing SEO dark-theme cleanup */
#seo,
#seo .seo-visual-shell,
#seo .seo-tab-panels,
#seo .seo-tab-panel,
#seo .seo-dashboard-intro,
#seo .seo-metric-grid article,
#seo .seo-recommendation-grid div,
#seo .seo-bottom-recommendations div,
#seo .seo-top-listing-preview,
#seo .seo-listing-preview-thumb,
#seo .seo-score-ring,
#seo .seo-score-ring--empty,
#seo .seo-empty-checklist,
#seo .seo-trend-empty,
#seo .seo-skeleton-list span,
#seo .seo-history-placeholder,
#seo .seo-selected-summary,
#seo .seo-readiness-card,
#seo .seo-manual-note,
#seo .form-actions,
#seo .tag-grid label,
#seo .field,
#seo .field.compact {
  border-color: rgba(96, 165, 250, 0.16);
  color: #E5E7EB;
  background-color: #0F172A;
}

#seo .seo-dashboard-intro,
#seo .seo-metric-grid article,
#seo .seo-recommendation-grid div,
#seo .seo-bottom-recommendations div,
#seo .seo-top-listing-preview,
#seo .seo-selected-summary,
#seo .seo-score-ring,
#seo .seo-score-ring--empty,
#seo .seo-empty-checklist,
#seo .seo-history-placeholder,
#seo .form-actions {
  background-image: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.72));
  box-shadow: none;
}

#seo .seo-option-panel,
#seo .seo-dark-card,
#seo .seo-manual-tools,
#seo .seo-manual-tools .panel,
#seo .panel,
#seo .stat-card {
  background-color: #0B1220;
  background-image: linear-gradient(160deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.86));
}

#seo .seo-option-toolbar,
#seo .seo-option-toolbar label,
#seo .seo-filter-grid,
#seo .data-form,
#seo .calculator-grid,
#seo .table-grid,
#seo .seo-grader-shell,
#seo .seo-improvement-shell,
#seo .seo-manual-tools-body {
  background: transparent;
}

#seo .seo-option-table-wrap,
#seo .table-wrap,
#seo .seo-comparison-wrap,
#seo .seo-product-browser,
#seo .seo-summary-card,
#seo .seo-future-notes,
#seo .seo-suggestions,
#seo .chart-placeholder,
#seo .empty-browser-state,
#seo .seo-history-chart-wrap {
  border-color: rgba(96, 165, 250, 0.15);
  color: #CBD5E1;
  background-color: #0B1220;
  background-image: linear-gradient(145deg, rgba(2, 6, 23, 0.56), rgba(15, 23, 42, 0.9));
}

#seo .seo-option-table,
#seo table,
#seo thead,
#seo tbody,
#seo tr {
  background: #0B1220;
}

#seo .seo-option-table th,
#seo table th {
  color: #BFDBFE;
  background: #111827;
  border-color: rgba(96, 165, 250, 0.16);
}

#seo .seo-option-table td,
#seo table td,
#seo .empty-row td {
  color: #E5E7EB;
  background: #0F172A;
  border-color: rgba(148, 163, 184, 0.12);
}

#seo .seo-option-table tr:nth-child(even) td,
#seo table tr:nth-child(even) td {
  background: #111827;
}

#seo .seo-empty-row,
#seo .seo-empty-compact,
#seo .empty-row td,
#seo td[colspan] {
  color: #CBD5E1;
  background-color: rgba(2, 6, 23, 0.58);
}

#seo input,
#seo select,
#seo textarea,
#seo input[type="search"],
#seo input[readonly] {
  color: #F8FAFC;
  background-color: #020617;
  border-color: rgba(96, 165, 250, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#seo input:focus,
#seo select:focus,
#seo textarea:focus {
  border-color: rgba(96, 165, 250, 0.58);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}

#seo input::placeholder,
#seo textarea::placeholder {
  color: #94A3B8;
}

#seo .seo-visual-header h3,
#seo .seo-card-heading strong,
#seo .seo-product-name,
#seo .seo-summary-grid strong,
#seo .seo-recommendation-grid b,
#seo .seo-top-listing-preview dd,
#seo .panel h3,
#seo .panel-header h3,
#seo label,
#seo .field label {
  color: #F8FAFC;
}

#seo .seo-visual-header p,
#seo .seo-card-heading span,
#seo .seo-manual-note,
#seo .seo-product-meta,
#seo .seo-summary-grid span,
#seo .field-help,
#seo .panel-kicker,
#seo .seo-recommendation-grid span,
#seo .seo-top-listing-preview dt,
#seo .chart-placeholder {
  color: #CBD5E1;
}

/* Phase 8B - Listing SEO Preview Mode sample-data styling */
#seo .seo-preview-controls {
  display: grid;
  gap: 8px;
  align-items: start;
}

#seo .seo-preview-label,
#seo .seo-preview-banner {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(167, 139, 250, 0.34);
  border-radius: 999px;
  color: #E9D5FF;
  background: rgba(88, 28, 135, 0.28);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
}

#seo .seo-preview-label {
  padding: 6px 9px;
}

#seo .seo-preview-banner {
  margin-bottom: 2px;
  padding: 8px 11px;
}

#seo .seo-preview-list {
  display: grid;
  gap: 9px;
}

#seo .seo-preview-list div {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(96, 165, 250, 0.13);
  border-radius: 12px;
  color: #E5E7EB;
  background: rgba(2, 6, 23, 0.38);
}

#seo .seo-preview-list b,
#seo .seo-preview-list strong {
  color: #86EFAC;
  font-size: 0.82rem;
}

#seo .seo-preview-list span {
  color: #F8FAFC;
  font-weight: 850;
}

#seo .seo-preview-list em {
  color: #CBD5E1;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 800;
}

#seo .seo-preview-listing-cell {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 190px;
}

#seo .seo-preview-thumb {
  display: inline-grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 12px;
  color: #DBEAFE;
  background:
    radial-gradient(circle at 30% 25%, rgba(34, 197, 94, 0.28), transparent 34%),
    linear-gradient(145deg, rgba(37, 99, 235, 0.32), rgba(15, 23, 42, 0.92));
  font-size: 0.72rem;
  font-weight: 950;
}

#seo .seo-preview-trend {
  min-height: 160px;
}

#seo .seo-preview-trend i {
  position: relative;
}

#seo .seo-preview-trend span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  color: #BFDBFE;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

#seo.seo-preview-mode .seo-visual-status {
  border-color: rgba(167, 139, 250, 0.34);
  background: rgba(59, 7, 100, 0.3);
}

/* Phase 8B-A - Listing SEO Dashboard preview polish */
#seo .seo-preview-score-panel {
  display: grid;
  grid-template-columns: minmax(250px, 45%) minmax(0, 55%);
  gap: 30px;
  align-items: center;
  min-height: 285px;
  padding: 6px 0 2px;
}

#seo .seo-preview-score-ring {
  --seo-score: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(288px, 100%);
  max-width: 288px;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 7px;
  border-radius: 999px;
  background:
    radial-gradient(circle, #07111f 0 49%, rgba(7, 17, 31, 0.96) 50% 58%, transparent 59%),
    conic-gradient(from 220deg, #7C3AED 0deg, #2563EB 44deg, #06B6D4 92deg, #22C55E 142deg, #A3E635 190deg, #FACC15 238deg, #F97316 286deg, #EF4444 332deg, #7C3AED 360deg);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 34px rgba(6, 182, 212, 0.2),
    0 24px 54px rgba(124, 58, 237, 0.2),
    inset 0 0 30px rgba(2, 6, 23, 0.78);
}

#seo .seo-preview-score-ring::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle, rgba(34, 197, 94, 0.18), transparent 58%),
    conic-gradient(from 220deg, rgba(124, 58, 237, 0.36), rgba(6, 182, 212, 0.22), rgba(34, 197, 94, 0.2), rgba(250, 204, 21, 0.18), rgba(239, 68, 68, 0.18), rgba(124, 58, 237, 0.36));
  filter: blur(18px);
  opacity: 0.88;
}

#seo .seo-preview-score-ring::after {
  content: "";
  position: absolute;
  inset: 25px;
  z-index: 0;
  border-radius: inherit;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at 35% 20%, rgba(59, 130, 246, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
  box-shadow: inset 0 0 26px rgba(15, 23, 42, 0.76);
}

#seo .seo-preview-score-ring > * {
  position: relative;
  z-index: 1;
}

#seo .seo-preview-score-ring strong {
  color: #F8FAFC;
  font-size: 4.35rem;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 22px rgba(34, 197, 94, 0.28);
}

#seo .seo-preview-score-ring span {
  color: #BFDBFE;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

#seo .seo-preview-score-ring small {
  color: #86EFAC;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

#seo .seo-preview-score-breakdown {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 4px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.12), transparent 36%),
    rgba(2, 6, 23, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#seo .seo-preview-score-breakdown-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(94px, auto) minmax(54px, auto);
  gap: 14px;
  align-items: center;
  padding: 15px 14px;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0;
  background: transparent;
}

#seo .seo-preview-score-breakdown-row:last-child {
  border-bottom: 0;
}

#seo .seo-preview-breakdown-dot {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 24px rgba(2, 6, 23, 0.28);
}

#seo .seo-preview-breakdown-dot::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 15px;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.28);
}

#seo .seo-preview-score-breakdown-row b {
  display: block;
  color: #F8FAFC;
  font-size: 0.92rem;
  line-height: 1.15;
}

#seo .seo-preview-score-breakdown-row small {
  display: block;
  color: #BFDBFE;
  font-size: 0.72rem;
  font-weight: 850;
  margin-top: 3px;
}

#seo .seo-preview-score-breakdown-row strong,
#seo .seo-preview-score-breakdown-row em {
  color: #E5E7EB;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

#seo .seo-preview-score-breakdown-row strong {
  color: #F8FAFC;
}

#seo .seo-preview-breakdown-excellent .seo-preview-breakdown-dot { background: linear-gradient(145deg, #15803D, #22C55E); }
#seo .seo-preview-breakdown-good .seo-preview-breakdown-dot { background: linear-gradient(145deg, #0891B2, #86EFAC); }
#seo .seo-preview-breakdown-fair .seo-preview-breakdown-dot { background: linear-gradient(145deg, #D97706, #FACC15); }
#seo .seo-preview-breakdown-poor .seo-preview-breakdown-dot { background: linear-gradient(145deg, #B91C1C, #EF4444); }

#seo .seo-preview-breakdown-excellent { border-color: rgba(22, 101, 52, 0.36); }
#seo .seo-preview-breakdown-good { border-color: rgba(134, 239, 172, 0.24); }
#seo .seo-preview-breakdown-fair { border-color: rgba(250, 204, 21, 0.24); }
#seo .seo-preview-breakdown-poor { border-color: rgba(239, 68, 68, 0.24); }

#seo .seo-preview-breakdown-excellent em { color: #22C55E; }
#seo .seo-preview-breakdown-good em { color: #67E8F9; }
#seo .seo-preview-breakdown-fair em { color: #FACC15; }
#seo .seo-preview-breakdown-poor em { color: #F87171; }

#seo .seo-average-empty-state {
  display: grid;
  min-height: 210px;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 24px;
  border: 1px dashed rgba(96, 165, 250, 0.24);
  border-radius: 18px;
  color: #CBD5E1;
  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1), rgba(2, 6, 23, 0.34));
  text-align: center;
}

#seo .seo-average-empty-state strong {
  color: #F8FAFC;
  font-size: 1rem;
}

#seo .seo-average-empty-state span {
  max-width: 320px;
  color: #CBD5E1;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.4;
}

#seo .seo-preview-line-chart {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.42);
}

#seo .seo-preview-line-chart svg {
  display: block;
  width: 100%;
  min-height: 170px;
  overflow: visible;
}

#seo .seo-preview-line-grid {
  fill: none;
  stroke: rgba(148, 163, 184, 0.18);
  stroke-width: 1;
}

#seo .seo-preview-line-area {
  fill: rgba(34, 197, 94, 0.13);
  stroke: none;
}

#seo .seo-preview-line-path {
  fill: none;
  stroke: #A78BFA;
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.32));
}

#seo .seo-preview-line-chart circle {
  fill: #22C55E;
  stroke: #ECFDF5;
  stroke-width: 2;
}

#seo .seo-preview-line-chart text {
  fill: #F8FAFC;
  font-size: 15px;
  font-weight: 900;
  text-anchor: middle;
}

#seo .seo-preview-line-chart .seo-preview-axis-score {
  fill: #94A3B8;
  font-size: 12px;
  font-weight: 850;
  text-anchor: start;
}

#seo .seo-preview-line-labels {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  color: #94A3B8;
  font-size: 0.68rem;
  font-weight: 850;
  text-align: center;
}

#seo .seo-preview-top-listings {
  display: grid;
  gap: 10px;
}

#seo .seo-preview-top-header {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) repeat(4, minmax(68px, 86px));
  gap: 11px;
  padding: 0 11px 2px 70px;
  color: #94A3B8;
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

#seo .seo-preview-top-header span:not(:first-child) {
  text-align: right;
}

#seo .seo-preview-top-row {
  display: grid;
  grid-template-columns: 48px minmax(180px, 1fr) repeat(4, minmax(68px, 86px));
  gap: 11px;
  align-items: center;
  padding: 11px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.62));
}

#seo .seo-preview-top-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#seo .seo-preview-top-title b {
  overflow: hidden;
  color: #F8FAFC;
  font-size: 0.86rem;
  font-weight: 950;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#seo .seo-preview-top-title span {
  color: #CBD5E1;
  font-size: 0.73rem;
  font-weight: 800;
}

#seo .seo-preview-top-stat {
  display: grid;
  gap: 2px;
  justify-items: end;
  min-width: 0;
}

#seo .seo-preview-top-stat strong {
  color: #F8FAFC;
  font-size: 0.88rem;
  font-weight: 950;
}

#seo .seo-preview-top-score {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#seo .seo-preview-score-excellent strong { color: #15803D; }
#seo .seo-preview-score-good strong { color: #86EFAC; }
#seo .seo-preview-score-fair strong { color: #FACC15; }
#seo .seo-preview-score-poor strong { color: #EF4444; }

#seo .seo-preview-top-stat span {
  color: #94A3B8;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

#seo .seo-insights-card .seo-recommendation-grid strong {
  display: block;
  color: #86EFAC;
  font-size: 1.45rem;
  line-height: 1;
}

#seo .seo-preview-insight-button {
  justify-self: start;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid rgba(167, 139, 250, 0.32);
  border-radius: 999px;
  color: #F5F3FF;
  background: rgba(88, 28, 135, 0.32);
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
}

#seo .seo-preview-insight-button:hover {
  border-color: rgba(167, 139, 250, 0.58);
  background: rgba(109, 40, 217, 0.44);
}

.seo-preview-modal-card {
  max-width: 560px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  color: #E5E7EB;
  background:
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.2), transparent 36%),
    linear-gradient(160deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.96));
}

.seo-preview-modal-card h3 {
  margin: 8px 0 0;
  color: #F8FAFC;
}

.seo-preview-modal-card .seo-preview-label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid rgba(167, 139, 250, 0.34);
  border-radius: 999px;
  color: #E9D5FF;
  background: rgba(88, 28, 135, 0.28);
  font-size: 0.72rem;
  font-weight: 900;
}

.seo-preview-modal-body {
  display: grid;
  gap: 12px;
}

.seo-preview-modal-body section {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.38);
}

.seo-preview-modal-body h4 {
  margin: 0;
  color: #C4B5FD;
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.seo-preview-modal-body p {
  margin: 0;
  color: #E5E7EB;
  font-size: 0.88rem;
  line-height: 1.45;
}

.seo-preview-ai-note {
  padding: 10px 12px;
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 14px;
  color: #BBF7D0 !important;
  background: rgba(20, 83, 45, 0.22);
  font-weight: 850;
}

@media (max-width: 1100px) {
  #seo .seo-preview-top-header {
    display: none;
  }

  #seo .seo-preview-top-row {
    grid-template-columns: 48px minmax(180px, 1fr) repeat(2, minmax(68px, 86px));
  }

  #seo .seo-preview-top-stat:nth-last-child(-n + 2) {
    justify-items: start;
    grid-column: span 1;
  }
}

@media (max-width: 760px) {
  #seo .seo-preview-score-panel,
  #seo .seo-preview-top-row {
    grid-template-columns: 1fr;
  }

  #seo .seo-preview-top-stat {
    justify-items: start;
  }

  #seo .seo-preview-top-title b {
    white-space: normal;
  }
}

/* ===========================================================================
   Products / Listings — manual listing database foundation for future Etsy sync.
   Visual/display only. Scoped entirely to #listings so no other page is affected.
   Mirrors the existing #products dark-dashboard pattern for visual consistency.
   =========================================================================== */

#listings.view.active {
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #05070C 0%, #0B1120 100%);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.14);
}

#listings .panel {
  border-color: rgba(59, 130, 246, 0.22);
  background: #111827;
  color: #F8FAFC;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
}

#listings .panel-header h3,
#listings h4 {
  color: #F8FAFC;
}

#listings .panel-kicker,
#listings .field-help {
  color: #CBD5E1;
}

/* Summary cards */
.listing-tracker-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 4px 20px 10px;
}

#listings .listing-summary-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 18px 12px 15px;
  text-align: center;
  overflow: hidden;
  border-color: rgba(148, 163, 184, 0.22);
  background: #1F2937;
  box-shadow: none;
}

#listings .listing-summary-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
}

#listings .listing-summary-card--total::before { background: #3B82F6; }
#listings .listing-summary-card--draft::before { background: #F59E0B; }
#listings .listing-summary-card--active::before { background: #22C55E; }
#listings .listing-summary-card--archived::before { background: #94A3B8; }
#listings .listing-summary-card--photos::before { background: #EF4444; }
#listings .listing-summary-card--price::before { background: #8B5CF6; }

#listings .listing-summary-card .status-label {
  margin: 2px 0 0;
  color: #CBD5E1;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

#listings .listing-summary-card .status-subtext {
  margin: 0;
  color: #94A3B8;
  font-size: 0.68rem;
  font-weight: 650;
}

#listings .listing-summary-card .status-value {
  margin: 2px 0 0;
  color: #FFFFFF;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.listing-summary-icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2px;
}

.listing-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.listing-summary-icon--total { background: linear-gradient(160deg, #3B82F6, #2563EB); }
.listing-summary-icon--draft { background: linear-gradient(160deg, #F59E0B, #D97706); }
.listing-summary-icon--active { background: linear-gradient(160deg, #22C55E, #16A34A); }
.listing-summary-icon--archived { background: linear-gradient(160deg, #94A3B8, #64748B); }
.listing-summary-icon--photos { background: linear-gradient(160deg, #EF4444, #DC2626); }
.listing-summary-icon--price { background: linear-gradient(160deg, #8B5CF6, #7C3AED); }

@media (max-width: 1250px) {
  .listing-tracker-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

/* Search / filter / actions control row */
.listing-tracker-controls {
  display: grid;
  grid-template-columns: minmax(200px, 240px) auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 4px 20px 14px;
}

.listing-tracker-search-field {
  margin: 0;
}

#listings .listing-tracker-search-field input {
  border-color: rgba(148, 163, 184, 0.35);
  background: #1F2937;
  color: #F8FAFC;
}

#listings .listing-tracker-search-field input::placeholder {
  color: #94A3B8;
}

.listing-tracker-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.listing-tracker-select-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.listing-tracker-select-filters .field.compact {
  margin: 0;
  min-width: 150px;
}

#listings .listing-tracker-select-filters select {
  border-color: rgba(148, 163, 184, 0.35);
  background: #1F2937;
  color: #F8FAFC;
}

.listing-tracker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

#listings .product-tracker-refresh {
  color: #F1F5F9;
  border: 1px solid rgba(148, 163, 184, 0.65);
  background: rgba(148, 163, 184, 0.1);
  box-shadow: none;
}

#listings .product-tracker-refresh:hover {
  color: #FFFFFF;
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.2);
}

@media (max-width: 1250px) {
  .listing-tracker-controls {
    grid-template-columns: 1fr;
  }

  .listing-tracker-actions {
    justify-content: flex-start;
  }
}

/* Table + right-side detail panel */
.listing-tracker-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
  gap: 10px;
  padding: 0 20px 20px;
  align-items: start;
}

.listing-tracker-table-wrap {
  padding: 0;
  overflow-x: auto;
  min-width: 0;
}

.listing-tracker-table {
  min-width: 920px;
  table-layout: fixed;
}

.listing-tracker-table th,
.listing-tracker-table td {
  padding: 6px 6px;
  vertical-align: top;
  font-size: 0.79rem;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
}

.listing-tracker-table th {
  font-size: 0.68rem;
  letter-spacing: 0;
  padding: 8px 6px;
}

.listing-tracker-table th:nth-child(1),
.listing-tracker-table td:nth-child(1) {
  width: 58px;
}

.listing-tracker-table th:nth-child(2),
.listing-tracker-table td:nth-child(2) {
  width: 170px;
}

.listing-tracker-table th:nth-child(5),
.listing-tracker-table td:nth-child(5),
.listing-tracker-table th:nth-child(6),
.listing-tracker-table td:nth-child(6) {
  width: 84px;
  text-align: right;
}

.listing-tracker-table th:nth-child(8),
.listing-tracker-table td:nth-child(8) {
  width: 66px;
  text-align: center;
}

.listing-tracker-table th:nth-child(9),
.listing-tracker-table td:nth-child(9) {
  width: 90px;
}

.listing-tracker-table th:nth-child(10),
.listing-tracker-table td:nth-child(10) {
  width: 108px;
}

#listings .listing-tracker-table {
  color: #E5E7EB;
}

#listings .listing-tracker-table th {
  color: #F8FAFC;
  background: #0F172A;
}

#listings .listing-tracker-table td {
  color: #E5E7EB;
  background: #111827;
  border-bottom-color: rgba(148, 163, 184, 0.15);
}

#listings .listing-tracker-table tbody tr:hover td {
  background: rgba(59, 130, 246, 0.1);
  cursor: pointer;
}

#listings .listing-tracker-table .empty-row td {
  background: #111827;
  color: #94A3B8;
  cursor: default;
}

#listings .listing-row-selected td {
  background: rgba(59, 130, 246, 0.16);
  box-shadow: inset 0 0 0 1px #3B82F6;
}

.listing-thumb {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 7px;
  object-fit: cover;
  background: rgba(148, 163, 184, 0.18);
}

.listing-thumb-placeholder {
  align-items: center;
  justify-content: center;
  color: #93C5FD;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(59, 130, 246, 0.14);
}

.listing-thumb-placeholder svg {
  width: 20px;
  height: 20px;
}

.listing-name-cell strong {
  display: block;
  color: #F8FAFC;
}

.listing-name-cell small {
  display: block;
  color: #94A3B8;
  font-weight: 650;
}

/* Status badges */
#listings .badge.listing-status-badge {
  display: inline-block;
  min-height: auto;
  padding: 4px 9px;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}

.listing-status-badge--draft { color: #FCD34D; background: rgba(245, 158, 11, 0.18); }
.listing-status-badge--active { color: #86EFAC; background: rgba(34, 197, 94, 0.18); }
.listing-status-badge--archived { color: #CBD5E1; background: rgba(148, 163, 184, 0.2); }

.listing-channel-note {
  display: block;
  font-size: 0.72rem;
  color: #94A3B8;
}

/* Right-side detail panel */
.listing-detail-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: #172033;
  color: #E2E8F0;
}

.listing-detail-empty {
  margin: 0;
  color: #94A3B8;
  font-size: 0.82rem;
  font-weight: 650;
}

.listing-detail-name {
  margin: 10px 0 2px;
  color: #F8FAFC;
  font-size: 1rem;
  font-weight: 850;
}

.listing-detail-subtitle {
  margin: 0 0 10px;
  color: #94A3B8;
  font-size: 0.76rem;
  font-weight: 650;
}

.listing-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.listing-detail-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.listing-detail-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.listing-detail-label {
  margin: 0;
  color: #94A3B8;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.listing-detail-value {
  color: #F1F5F9;
  font-size: 0.84rem;
  font-weight: 650;
}

.listing-detail-image-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}

.listing-detail-image-strip img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
}

.listing-detail-image-slot-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  color: #64748B;
  font-size: 0.62rem;
  font-weight: 800;
}

.listing-detail-variations-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 8px;
  font-size: 0.74rem;
}

.listing-detail-variations-table th,
.listing-detail-variations-table td {
  padding: 4px 5px;
  text-align: left;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  color: #E2E8F0;
}

.listing-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

#listings .listing-detail-actions .button.ghost {
  color: #E2E8F0;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: transparent;
}

#listings .listing-detail-actions .button.ghost:hover {
  color: #F8FAFC;
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.14);
}

/* Add / Edit Listing form */
#listings .listing-form-collapsed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

#listings .listing-form-body {
  padding: 0 20px 20px;
}

#listings .data-form label,
#listings .field-help {
  color: #CBD5E1;
}

#listings .data-form input,
#listings .data-form select,
#listings .data-form textarea {
  border-color: rgba(148, 163, 184, 0.35);
  background: #1F2937;
  color: #F8FAFC;
}

#listings .data-form input::placeholder,
#listings .data-form textarea::placeholder {
  color: #94A3B8;
}

#listings .data-form input[readonly] {
  color: #94A3B8;
  background: #172033;
}

.form-section-label {
  grid-column: 1 / -1;
  margin: 14px 0 -4px;
  color: #93C5FD;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#listings .form-section-label:first-of-type {
  margin-top: 0;
}

.listing-image-slot-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

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

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

.listing-variations-editor {
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: #172033;
}

.listing-variation-rows-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr 1fr 0.7fr 40px;
  gap: 8px;
  padding: 0 4px 6px;
  color: #94A3B8;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.listing-variation-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr 1fr 0.7fr 40px;
  gap: 8px;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.listing-variation-row input[type="text"],
.listing-variation-row input[type="number"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 6px;
  background: #1F2937;
  color: #F8FAFC;
  font-size: 0.78rem;
}

.listing-variation-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.listing-variation-row .icon-button {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.12);
  color: #FCA5A5;
  cursor: pointer;
}

.listing-variation-empty {
  padding: 8px 4px;
  color: #94A3B8;
  font-size: 0.78rem;
  font-weight: 650;
}

#addListingVariationRow {
  margin-top: 8px;
}

@media (max-width: 900px) {
  .listing-variation-rows-head {
    display: none;
  }

  .listing-variation-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "size color"
      "price sku"
      "active remove";
  }
}

/* ===========================================================================
   Phase 9 - Pricing Inputs top panel: real editable fields + heading alignment
   Relocates podSellingPrice/podCostOfGoods/podShippingCost/podQuantity into the
   top-of-page Pricing Inputs mini-cards (previously read-only mirrors) and
   normalizes the Pricing Inputs vs Live Results panel heading height so both
   panels' first card row starts at the same vertical position.
   =========================================================================== */

/* Equalize both top-row panel headings so the first card in each column lines up.
   Force a single-line subtitle (the panel is wide enough at every breakpoint that
   matters - below 1260px the columns stack anyway) instead of guessing a min-height. */
#pricing .pricing-input-panel .pricing-panel-heading,
#pricing .pricing-results-panel .pricing-panel-heading {
  margin: 0 0 10px;
  padding: 0;
}

#pricing .pricing-input-panel .pricing-panel-heading small,
#pricing .pricing-results-panel .pricing-panel-heading small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Editable mini-cards: input replaces the old plain <strong> readout in the value
   column. Keep the same 3-column layout (icon / copy / value) already defined for
   .pricing-mini-card so nothing else about the card grid has to change. */
#pricing .pricing-mini-card--editable {
  align-items: center;
}

#pricing .pricing-mini-input-wrap {
  display: grid;
  align-items: center;
  min-width: 0;
}

#pricing .pricing-mini-input {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  color: #F8FAFC;
  background: #0B1220;
  font-size: 0.92rem;
  font-weight: 800;
  text-align: right;
}

#pricing .pricing-mini-input:focus {
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
  outline: none;
}

#pricing .pricing-mini-input::placeholder {
  color: #64748B;
}

/* podManualPriceField swaps in for the read-only podTopSalePrice readout only in
   "manual" pricing mode (see updatePodModeVisibility in app.js). Several classes in
   this stylesheet set `display` on .pricing-mini-card/.field-style wrappers, which
   (per the HTML spec) silently overrides the UA [hidden]{display:none} rule once an
   author stylesheet sets display on the same element. Force it explicitly so the
   `.hidden` toggle in app.js is guaranteed to actually hide the element. */
#pricing .pricing-mini-manual-input[hidden] {
  display: none;
}

#pricing .pricing-mini-input-wrap strong[hidden] {
  display: none;
}

@media (max-width: 720px) {
  #pricing .pricing-mini-card--editable {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  #pricing .pricing-mini-input-wrap {
    grid-column: 1 / -1;
  }
}

/* ==========================================
   PRODUCT LIBRARY STYLES (Phase 1 Skeleton)
   ========================================== */

.nav-accordion {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-tab-accordion {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-arrow {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.nav-accordion.open .accordion-arrow {
  transform: rotate(180deg);
}

.nav-subtabs {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
}

.nav-accordion.open .nav-subtabs {
  display: flex;
}

.nav-subtab {
  background: transparent;
  border: none;
  color: var(--sidebar-text, rgba(255, 255, 255, 0.75));
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-subtab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.nav-subtab.active {
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  font-weight: 700;
}

/* Stat Cards & Layout */
.pl-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.pl-actions {
  display: flex;
  gap: 10px;
}

/* Badge & Risk Chips */
.pl-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.pl-badge.clear {
  background: #E6F4EA;
  color: #137333;
}

.pl-badge.caution {
  background: #FEF7E0;
  color: #B06000;
}

.pl-badge.high-risk {
  background: #FCE8E6;
  color: #C5221F;
}

.pl-score-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.82rem;
  background: #F1F5F9;
  color: #334155;
}

.pl-score-pill.high {
  background: #DCFCE7;
  color: #15803D;
}

.pl-score-pill.mid {
  background: #FEF08A;
  color: #854D0E;
}

.pl-score-pill.null-score {
  background: #E2E8F0;
  color: #64748B;
  font-weight: 500;
}

/* Detail Panel Tabs */
.pl-detail-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid #E2E8F0;
  margin-bottom: 20px;
}

.pl-detail-tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 16px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  margin-bottom: -2px;
  transition: all 0.15s ease;
}

.pl-detail-tab:hover {
  color: var(--navy, #1E293B);
}

.pl-detail-tab.active {
  color: var(--navy, #1E293B);
  border-bottom-color: var(--accent, #0EA5E9);
  font-weight: 700;
}

.pl-detail-content {
  padding: 10px 0;
}

.pl-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.pl-info-block {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 16px;
}

.pl-info-block h4 {
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--navy, #1E293B);
  font-size: 1rem;
}

.pl-file-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.pl-file-row input[type="text"] {
  flex: 1;
  min-width: 200px;
}

/* ==========================================
   STAGING CANDIDATE REVIEW CARDS (Phase 2)
   ========================================== */

.staging-toolbar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 16px;
}

.staging-status-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid #E2E8F0;
  padding-bottom: 8px;
}

.staging-tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 8px 14px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  margin-bottom: -10px;
  transition: all 0.15s ease;
}

.staging-tab:hover {
  color: var(--navy, #1E293B);
}

.staging-tab.active {
  color: var(--navy, #1E293B);
  border-bottom-color: var(--accent, #0EA5E9);
  font-weight: 700;
}

.staging-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.staging-bulk-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 10px;
  border-top: 1px solid #E2E8F0;
  flex-wrap: wrap;
}

.selected-badge {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy, #1E293B);
  background: #E2E8F0;
  padding: 3px 10px;
  border-radius: 12px;
}

.keyboard-help {
  font-size: 0.8rem;
  color: #64748B;
  margin: 0;
}

.staging-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}

.candidate-card {
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.candidate-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.candidate-card.focused {
  border-color: var(--accent, #0EA5E9);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25);
}

.candidate-card.accepted {
  border-color: #10B981;
  background: #F0FDF4;
}

.candidate-card.dismissed {
  opacity: 0.6;
  border-color: #94A3B8;
  background: #F8FAFC;
}

.candidate-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.candidate-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy, #1E293B);
}

.candidate-meta {
  font-size: 0.8rem;
  color: #64748B;
  margin: 2px 0 0 0;
}

.candidate-preview-box {
  background: #F1F5F9;
  border-radius: 8px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 1px solid #E2E8F0;
}

.candidate-preview-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.candidate-score-block {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 10px 12px;
}

.candidate-score-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 0.82rem;
}

.swatch-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
}

.swatch-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  display: inline-block;
}

.swatch-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  background: #F1F5F9;
  padding: 2px 6px;
  border-radius: 10px;
}

.bestseller-block {
  font-size: 0.8rem;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 6px;
  padding: 8px 10px;
  color: #1E40AF;
}

.bestseller-block p {
  margin: 2px 0;
}

.candidate-card-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #E2E8F0;
}

.candidate-card-actions button {
  flex: 1;
}

/* ==========================================================================
   PRODUCT LIBRARY OVERVIEW (PDF PAGE 10 HIGH-END BLUEPRINT SPECIFICATION)
   ========================================================================== */

.pl-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.pl-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  color: #16a34a;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.pl-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
  letter-spacing: -0.02em;
}

.pl-subtitle {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0;
}

.pl-store-dropdown {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #15803d;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* Overview Layout Grid */
.pl-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

.pl-main-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pl-side-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Top 4 KPI Cards */
.pl-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.pl-kpi-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.pl-kpi-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pl-kpi-card--green .pl-kpi-icon-wrap {
  background: #dcfce7;
  color: #16a34a;
}

.pl-kpi-card--purple .pl-kpi-icon-wrap {
  background: #f3e8ff;
  color: #9333ea;
}

.pl-kpi-card--blue .pl-kpi-icon-wrap {
  background: #dbeafe;
  color: #2563eb;
}

.pl-kpi-card--orange .pl-kpi-icon-wrap {
  background: #ffedd5;
  color: #ea580c;
}

.pl-kpi-icon {
  width: 22px;
  height: 22px;
}

.pl-kpi-content {
  display: flex;
  flex-direction: column;
}

.pl-kpi-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.pl-kpi-val {
  font-size: 1.45rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}

.pl-kpi-sub {
  font-size: 0.74rem;
  color: #64748b;
  font-weight: 500;
  margin-top: 4px;
}

/* Status Cards Row (5 Cards) */
.pl-status-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.pl-status-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.pl-status-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.pl-status-icon--green {
  background: #dcfce7;
  color: #16a34a;
}

.pl-status-icon--amber {
  background: #fef3c7;
  color: #d97706;
}

.pl-status-icon--blue {
  background: #dbeafe;
  color: #2563eb;
}

.pl-status-icon--purple {
  background: #f3e8ff;
  color: #9333ea;
}

.pl-status-icon--gray {
  background: #f1f5f9;
  color: #64748b;
}

.pl-status-copy {
  display: flex;
  flex-direction: column;
}

.pl-status-label {
  font-size: 0.66rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pl-status-val {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
}

.pl-status-pct {
  font-size: 0.7rem;
  color: #64748b;
}

/* Table & Badges */
.pl-recent-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  overflow: hidden;
}

.pl-link-btn {
  color: #2563eb;
  font-weight: 600;
  font-size: 0.82rem;
}

.pl-overview-table {
  width: 100%;
  border-collapse: collapse;
}

.pl-overview-table th {
  background: #f8fafc;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}

.pl-overview-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.85rem;
  color: #334155;
  vertical-align: middle;
}

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

.pl-table-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.pl-product-info {
  display: flex;
  flex-direction: column;
}

.pl-product-title {
  font-weight: 600;
  color: #0f172a;
  font-size: 0.86rem;
}

.pl-product-sku {
  font-size: 0.74rem;
  color: #64748b;
}

.pl-badge-type--digital {
  background: #f3e8ff;
  color: #7e22ce;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
}

.pl-badge-type--pod {
  background: #dbeafe;
  color: #1d4ed8;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
}

.pl-badge-status--published {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
}

.pl-badge-status--ready {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
}

.pl-badge-status--draft {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
}

.pl-bottom-link-row {
  text-align: center;
  padding: 10px;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
}

/* Utility Side Cards */
.pl-side-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  padding: 16px;
}

.pl-side-card .panel-header {
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.pl-side-card .panel-header h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.pl-quick-actions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pl-action-row {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  background: #ffffff;
  transition: all 0.15s ease;
  cursor: pointer;
}

.pl-action-row:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.pl-action-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  margin-right: 10px;
  flex-shrink: 0;
}

.pl-action-icon--green {
  background: #dcfce7;
  color: #16a34a;
  font-weight: 800;
}

.pl-action-icon--purple {
  background: #f3e8ff;
  color: #9333ea;
}

.pl-action-icon--blue {
  background: #dbeafe;
  color: #2563eb;
}

.pl-action-icon--orange {
  background: #ffedd5;
  color: #ea580c;
}

.pl-action-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1e293b;
  flex: 1;
}

.pl-action-arrow {
  font-size: 1.1rem;
  color: #94a3b8;
}

/* Storage & Sync */
.pl-storage-body {
  display: flex;
  flex-direction: column;
}

.pl-storage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.pl-storage-icon {
  font-size: 1.3rem;
}

.pl-storage-readout {
  font-size: 0.78rem;
  color: #64748b;
  margin: 0;
}

.pl-storage-pct {
  font-size: 0.85rem;
  font-weight: 700;
  color: #16a34a;
  margin-left: auto;
}

.pl-progress-bar-wrap {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}

.pl-progress-bar-fill {
  height: 100%;
  background: #16a34a;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.pl-sync-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #64748b;
  margin-bottom: 10px;
}

.pl-staging-subordinate-row {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.76rem;
  color: #475569;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pl-staging-subordinate-row strong {
  color: #16a34a;
}

/* Recent Activity Feed */
.pl-activity-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pl-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.78rem;
  color: #334155;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.pl-activity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2563eb;
  margin-top: 5px;
  flex-shrink: 0;
}

.pl-activity-time {
  font-size: 0.7rem;
  color: #94a3b8;
  margin-left: auto;
  white-space: nowrap;
}

.pl-empty-activity {
  font-size: 0.8rem;
  color: #94a3b8;
  text-align: center;
  padding: 12px 0;
}

/* ==========================================================================
   PRODUCT LIBRARY ALL PRODUCTS (PDF PAGE 14 & 15 SPECIFICATION)
   ========================================================================== */

/* Top Filter Chip Row */
.pl-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pl-chip {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.pl-chip:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.pl-chip.active {
  background: #dcfce7;
  border-color: #86efac;
  color: #15803d;
}

.pl-chip-icon {
  font-size: 0.85rem;
}

.pl-chip-count {
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
}

.pl-chip.active .pl-chip-count {
  background: #bbf7d0;
  color: #14532d;
}

/* Action Toolbar */
.pl-action-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.pl-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pl-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pl-btn-green {
  background: #16a34a !important;
  color: #ffffff !important;
  border: none;
  font-weight: 700;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.84rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.pl-btn-green:hover {
  background: #15803d !important;
}

.pl-toolbar-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pl-toolbar-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.pl-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.pl-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 50;
  min-width: 160px;
  overflow: hidden;
}

.pl-dropdown-item {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: none;
  border: none;
  font-size: 0.82rem;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
}

.pl-dropdown-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.pl-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.pl-search-icon {
  position: absolute;
  left: 10px;
  color: #94a3b8;
  font-size: 0.82rem;
  pointer-events: none;
}

.pl-search-input {
  padding-left: 30px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.84rem;
  height: 34px;
  width: 200px;
  color: #0f172a;
}

.pl-search-input:focus {
  outline: none;
  border-color: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
}

.pl-icon-btn {
  padding: 6px;
  border-radius: 8px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Advanced More Filters Drawer */
.pl-more-filters-drawer {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.pl-more-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.pl-more-filters-header h4 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
}

.pl-more-filters-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Catalog Table & Badges */
.pl-table-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  overflow: hidden;
}

.pl-catalog-table {
  width: 100%;
  border-collapse: collapse;
}

.pl-catalog-table th {
  background: #f8fafc;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}

.pl-catalog-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.84rem;
  color: #334155;
  vertical-align: middle;
}

.pl-check-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
}

/* Pagination Footer */
.pl-pagination-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
}

.pl-pagination-info {
  font-size: 0.78rem;
  color: #64748b;
}

.pl-pagination-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pl-page-size-select {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.78rem;
  color: #334155;
  cursor: pointer;
}

.pl-pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pl-page-btn {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}

.pl-page-btn:hover:not(:disabled) {
  background: #f1f5f9;
}

.pl-page-btn.active {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
}

.pl-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Selection Summary Card */
.pl-selection-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pl-selection-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.pl-selection-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  color: #475569;
}

.pl-selection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pl-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.pl-status-dot.green { background: #16a34a; }
.pl-status-dot.amber { background: #d97706; }
.pl-status-dot.blue { background: #2563eb; }
.pl-status-dot.purple { background: #9333ea; }
.pl-status-dot.gray { background: #94a3b8; }

.pl-btn-green-light {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
  font-weight: 700;
  border-radius: 8px;
  padding: 8px;
}

.pl-btn-green-light:hover:not(:disabled) {
  background: #bbf7d0 !important;
}

.pl-btn-green-light:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pl-selection-help {
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.3;
}

/* Add Finished Product Intake Screen Styles */
.pl-add-input {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.84rem;
  color: #0f172a;
  width: 100%;
}

.pl-add-input:focus {
  outline: none;
  border-color: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
}

.pl-chk-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  color: #334155;
}

.pl-chk-icon.circle.green {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  font-weight: 800;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pl-chk-icon.circle.gray {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #cbd5e1;
  font-size: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pl-tag-pill {
  background: #e2e8f0;
  color: #334155;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pl-tag-remove {
  cursor: pointer;
  color: #64748b;
  font-weight: 800;
}

.pl-tag-remove:hover {
  color: #ef4444;
}

/* Hide global shell topbar when a view has its own dedicated header or dashboard header */
.main-content:has(.view.active .pl-header) > .topbar,
.main-content:has(.view.active .db-header-bar) > .topbar {
  display: none !important;
}

/* ==========================================================================
   BDE FINANCIAL STORE COMMAND CENTER - DARK NAVY DASHBOARD THEME
   ========================================================================== */

/* App Shell & Main Content Dark Background Scope */
.main-content:has(#dashboard.active) {
  background-color: #07111D !important;
  color: #F4F7FB;
}

/* Sidebar Dark Theme Refinement */
.sidebar {
  background: linear-gradient(180deg, #0A1725 0%, #060F1A 100%) !important;
  border-right: 1px solid rgba(125, 160, 190, 0.14) !important;
}

.brand-name {
  color: #FFFFFF !important;
}

.brand-subtitle {
  color: #94A3B8 !important;
}

.nav-tab {
  color: #94A3B8 !important;
  border-left: 4px solid transparent;
  border-radius: 8px;
  margin: 2px 4px;
}

.nav-tab:hover {
  color: #F4F7FB !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.nav-tab.active {
  color: #FFFFFF !important;
  background: #0D1B2A !important;
  border-left-color: #F5A623 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.nav-subtab {
  color: #94A3B8 !important;
}

.nav-subtab:hover {
  color: #F4F7FB !important;
}

.nav-subtab.active {
  color: #F5A623 !important;
  font-weight: 700;
}

/* Dashboard Container */
#dashboard {
  background-color: #07111D;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #F4F7FB;
  box-sizing: border-box;
}

/* Header Bar */
.db-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 4px;
}

.db-main-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.5px;
}

.db-main-sub {
  font-size: 0.88rem;
  color: #94A3B8;
  margin: 4px 0 0 0;
}

.db-header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.db-store-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0D1B2A;
  border: 1px solid rgba(125, 160, 190, 0.16);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.db-store-label {
  color: #94A3B8;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
}

.db-store-name {
  color: #F4F7FB;
}

.db-sync-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0D1B2A;
  border: 1px solid rgba(125, 160, 190, 0.16);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #94A3B8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.db-sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4589FF;
  box-shadow: 0 0 6px rgba(69, 137, 255, 0.6);
}

.db-sync--connected .db-sync-dot { background: #38C96B; box-shadow: 0 0 6px rgba(56, 201, 107, 0.6); }
.db-sync--unlinked .db-sync-dot { background: #F5A623; box-shadow: 0 0 6px rgba(245, 166, 35, 0.6); }
.db-sync--local .db-sync-dot { background: #4589FF; box-shadow: 0 0 6px rgba(69, 137, 255, 0.6); }

.db-btn-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #112236;
  border: 1px solid rgba(125, 160, 190, 0.2);
  color: #F4F7FB;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.db-btn-refresh:hover {
  background: #172F4A;
  border-color: #4589FF;
  color: #4589FF;
}

.db-date-select {
  background: #0D1B2A;
  border: 1px solid rgba(125, 160, 190, 0.2);
  color: #F4F7FB;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

/* =========================================================
   ACTION CENTER (Option 4 Command Center Work Queue)
   Scoped strictly under #actionCenter to avoid side effects
   ========================================================= */
#actionCenter {
  color: #F4F7FB;
}

#actionCenter .ac-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  background: #0D1B2A;
  border: 1px solid rgba(125, 160, 190, 0.14);
  padding: 14px 20px;
  border-radius: 12px;
}

#actionCenter .ac-main-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  color: #F4F7FB;
}

#actionCenter .ac-main-sub {
  margin: 4px 0 0;
  color: #94A3B8;
  font-size: 0.86rem;
}

#actionCenter .ac-btn-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #112236;
  border: 1px solid rgba(125, 160, 190, 0.2);
  color: #F4F7FB;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

#actionCenter .ac-btn-refresh:hover {
  background: #172F4A;
  border-color: #4589FF;
  color: #4589FF;
}

#actionCenter .ac-card {
  background: #0D1B2A;
  border: 1px solid rgba(125, 160, 190, 0.14);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

#actionCenter .ac-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

#actionCenter .ac-summary-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

#actionCenter .ac-summary-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.5px;
}

#actionCenter .ac-summary-val {
  font-size: 1.85rem;
  font-weight: 800;
  color: #F4F7FB;
  line-height: 1.1;
  margin-bottom: 4px;
}

#actionCenter .ac-summary-sub {
  font-size: 0.76rem;
  color: #94A3B8;
}

#actionCenter .ac-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

#actionCenter .ac-dot--red { background: #FF4D4D; box-shadow: 0 0 8px rgba(255, 77, 77, 0.6); }
#actionCenter .ac-dot--orange { background: #FF9F43; box-shadow: 0 0 8px rgba(255, 159, 67, 0.6); }
#actionCenter .ac-dot--gold { background: #F5A623; box-shadow: 0 0 8px rgba(245, 166, 35, 0.6); }
#actionCenter .ac-dot--blue { background: #4589FF; box-shadow: 0 0 8px rgba(69, 137, 255, 0.6); }
#actionCenter .ac-dot--green { background: #38C96B; box-shadow: 0 0 8px rgba(56, 201, 107, 0.6); }

#actionCenter .ac-three-col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

#actionCenter .ac-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(125, 160, 190, 0.1);
}

#actionCenter .ac-panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #F4F7FB;
}

#actionCenter .ac-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
}

#actionCenter .ac-badge--red { background: rgba(255, 77, 77, 0.15); color: #FF4D4D; border: 1px solid rgba(255, 77, 77, 0.3); }
#actionCenter .ac-badge--orange { background: rgba(255, 159, 67, 0.15); color: #FF9F43; border: 1px solid rgba(255, 159, 67, 0.3); }
#actionCenter .ac-badge--gold { background: rgba(245, 166, 35, 0.15); color: #F5A623; border: 1px solid rgba(245, 166, 35, 0.3); }
#actionCenter .ac-badge--blue { background: rgba(69, 137, 255, 0.15); color: #4589FF; border: 1px solid rgba(69, 137, 255, 0.3); }
#actionCenter .ac-badge--green { background: rgba(56, 201, 107, 0.15); color: #38C96B; border: 1px solid rgba(56, 201, 107, 0.3); }
#actionCenter .ac-badge--muted { background: rgba(148, 163, 184, 0.15); color: #94A3B8; border: 1px solid rgba(148, 163, 184, 0.3); }

#actionCenter .ac-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
}

#actionCenter .ac-item {
  background: #112236;
  border: 1px solid rgba(125, 160, 190, 0.12);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: background 0.15s ease;
}

#actionCenter .ac-item:hover {
  background: #172F4A;
}

#actionCenter .ac-item-content {
  flex: 1;
  min-width: 0;
}

#actionCenter .ac-item-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: #F4F7FB;
  margin-bottom: 2px;
}

#actionCenter .ac-item-sub {
  font-size: 0.78rem;
  color: #94A3B8;
}

#actionCenter .ac-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  text-align: center;
  color: #38C96B;
  font-size: 0.86rem;
  font-weight: 600;
}

#actionCenter .ac-btn-action {
  background: rgba(69, 137, 255, 0.15);
  color: #4589FF;
  border: 1px solid rgba(69, 137, 255, 0.3);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

#actionCenter .ac-btn-action:hover {
  background: #4589FF;
  color: #FFFFFF;
}

#actionCenter .ac-staging-panel {
  margin-top: 10px;
}

#actionCenter .ac-staging-stats-row {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
}

#actionCenter .ac-staging-stat {
  background: #112236;
  border: 1px solid rgba(125, 160, 190, 0.12);
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#actionCenter .ac-staging-num {
  font-size: 1.25rem;
  font-weight: 800;
  color: #F4F7FB;
}

#actionCenter .ac-staging-label {
  font-size: 0.78rem;
  color: #94A3B8;
  font-weight: 600;
}

#actionCenter .ac-btn-sm {
  background: #112236;
  border: 1px solid rgba(125, 160, 190, 0.2);
  color: #F4F7FB;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

#actionCenter .ac-btn-primary {
  background: #4589FF;
  color: #FFFFFF;
  border: none;
}

.db-date-select:focus {
  border-color: #4589FF;
  outline: none;
}

/* =========================================================
   SALES & ORDERS (Option 2 Real Etsy Operations)
   Scoped strictly under #sales to avoid side effects
   ========================================================= */
#sales {
  color: #F4F7FB;
}

#sales .so-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  background: #0D1B2A;
  border: 1px solid rgba(125, 160, 190, 0.14);
  padding: 14px 20px;
  border-radius: 12px;
}

#sales .so-main-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  color: #F4F7FB;
}

#sales .so-main-sub {
  margin: 4px 0 0;
  color: #94A3B8;
  font-size: 0.86rem;
}

#sales .so-header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

#sales .so-select {
  background: #112236;
  border: 1px solid rgba(125, 160, 190, 0.2);
  color: #F4F7FB;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

#sales .so-input {
  background: #112236;
  border: 1px solid rgba(125, 160, 190, 0.2);
  color: #F4F7FB;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  min-width: 260px;
}

#sales .so-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #112236;
  border: 1px solid rgba(125, 160, 190, 0.2);
  color: #F4F7FB;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

#sales .so-btn-secondary:hover {
  background: #172F4A;
  border-color: #4589FF;
}

#sales .so-btn-primary {
  background: #4589FF;
  color: #FFFFFF;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

#sales .so-card {
  background: #0D1B2A;
  border: 1px solid rgba(125, 160, 190, 0.14);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

#sales .so-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

#sales .so-kpi-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

#sales .so-kpi-val {
  font-size: 1.7rem;
  font-weight: 800;
  color: #F4F7FB;
  line-height: 1.1;
  margin-bottom: 4px;
}

#sales .so-kpi-sub {
  font-size: 0.75rem;
  color: #94A3B8;
}

#sales .so-status-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(125, 160, 190, 0.14);
  padding-bottom: 8px;
  overflow-x: auto;
}

#sales .so-tab {
  background: transparent;
  border: 1px solid transparent;
  color: #94A3B8;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

#sales .so-tab.active {
  background: #112236;
  border-color: #4589FF;
  color: #4589FF;
}

#sales .so-main-grid {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 18px;
}

#sales .so-filter-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

#sales .so-table-wrapper {
  overflow-x: auto;
}

#sales .so-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

#sales .so-table th {
  background: #112236;
  color: #94A3B8;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(125, 160, 190, 0.14);
}

#sales .so-table td {
  padding: 12px;
  border-bottom: 1px solid rgba(125, 160, 190, 0.08);
  color: #F4F7FB;
}

#sales .so-table tr:hover td {
  background: #112236;
}

#sales .so-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-block;
}

#sales .so-badge--orange { background: rgba(255, 159, 67, 0.15); color: #FF9F43; border: 1px solid rgba(255, 159, 67, 0.3); }
#sales .so-badge--blue { background: rgba(69, 137, 255, 0.15); color: #4589FF; border: 1px solid rgba(69, 137, 255, 0.3); }
#sales .so-badge--green { background: rgba(56, 201, 107, 0.15); color: #38C96B; border: 1px solid rgba(56, 201, 107, 0.3); }
#sales .so-badge--red { background: rgba(255, 77, 77, 0.15); color: #FF4D4D; border: 1px solid rgba(255, 77, 77, 0.3); }
#sales .so-badge--gold { background: rgba(245, 166, 35, 0.15); color: #F5A623; border: 1px solid rgba(245, 166, 35, 0.3); }
#sales .so-badge--muted { background: rgba(148, 163, 184, 0.15); color: #94A3B8; border: 1px solid rgba(148, 163, 184, 0.3); }

#sales .so-insights-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#sales .so-side-title {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #F4F7FB;
}

#sales .so-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#sales .so-breakdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #112236;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
}

#sales .so-breakdown-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

#sales .so-breakdown-name {
  flex: 1;
  color: #94A3B8;
}

#sales .so-top-products-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#sales .so-top-prod-item {
  background: #112236;
  padding: 10px 12px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
}

#sales .so-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sales .so-modal-card {
  background: #0D1B2A;
  border: 1px solid rgba(125, 160, 190, 0.2);
  border-radius: 14px;
  width: 540px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  color: #F4F7FB;
}

#sales .so-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(125, 160, 190, 0.14);
}

#sales .so-modal-close {
  background: transparent;
  border: none;
  color: #94A3B8;
  font-size: 1.2rem;
  cursor: pointer;
}

#sales .so-modal-body {
  padding: 20px;
}

.dashboard-demo-note {
  color: #94A3B8 !important;
  font-size: 0.78rem;
  margin: -8px 0 4px 0;
}

/* General Dark Card Styling */
.db-card {
  background: #0D1B2A;
  border: 1px solid rgba(125, 160, 190, 0.14);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

.db-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.db-card-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94A3B8;
  display: block;
}

.db-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 2px 0 0 0;
}

.db-btn-link {
  background: transparent;
  border: none;
  color: #4589FF;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.db-btn-link:hover {
  background: rgba(69, 137, 255, 0.12);
  color: #669FFF;
}

.db-icon-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(125, 160, 190, 0.14);
  color: #94A3B8;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}

.db-icon-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
}

/* 3 Major Top Analytics Grid */
.db-top-analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.db-hero-stat-block {
  margin-top: -4px;
}

.db-hero-val {
  font-size: 2.1rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.db-hero-subtext {
  font-size: 0.8rem;
  color: #94A3B8;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.db-badge-green {
  background: rgba(56, 201, 107, 0.16);
  color: #38C96B;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.76rem;
}

.db-badge-orange {
  background: rgba(245, 166, 35, 0.16);
  color: #F5A623;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.76rem;
}

.db-hero-chart-card,
.db-gauge-card {
  min-height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#dashboard .db-chart-svg-wrap {
  height: 205px !important;
  min-height: 205px !important;
  width: 100% !important;
  display: block !important;
  position: relative !important;
  margin-top: auto !important;
  overflow: visible !important;
}

#dashboard .db-chart-svg-wrap svg {
  width: 100% !important;
  height: 100% !important;
  min-height: 205px !important;
  display: block !important;
  overflow: visible !important;
}

/* Gauge Card Styling */
.db-gauge-card .dashboard-gauge-row {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 16px;
  padding-top: 10px;
  margin-top: auto;
}

.db-gauge-card .dashboard-gauge {
  text-align: center;
  position: relative;
  width: 190px;
}

.dashboard-gauge-svg-wrap {
  position: relative;
  width: 190px;
  height: 110px;
  margin: 0 auto;
}

.db-gauge-card .dashboard-gauge-svg {
  width: 190px;
  height: 110px;
  overflow: visible;
}

.db-gauge-card .dashboard-gauge-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 18;
  stroke-linecap: round;
}

.db-gauge-card .dashboard-gauge-fill--green {
  fill: none;
  stroke: #38C96B;
  stroke-width: 18;
  stroke-linecap: round;
  stroke-dasharray: 267.035;
  transition: stroke-dashoffset 0.6s ease;
  filter: drop-shadow(0 0 8px rgba(56, 201, 107, 0.45));
}

.db-gauge-card .dashboard-gauge-fill--blue {
  fill: none;
  stroke: #4589FF;
  stroke-width: 18;
  stroke-linecap: round;
  stroke-dasharray: 267.035;
  transition: stroke-dashoffset 0.6s ease;
  filter: drop-shadow(0 0 8px rgba(69, 137, 255, 0.45));
}

.db-gauge-card .dashboard-gauge-icon {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.95rem;
  z-index: 2;
}

.db-gauge-card .dashboard-gauge-icon--green {
  background: rgba(56, 201, 107, 0.18);
  color: #38C96B;
  box-shadow: 0 0 10px rgba(56, 201, 107, 0.25);
}

.db-gauge-card .dashboard-gauge-icon--blue {
  background: rgba(69, 137, 255, 0.18);
  color: #4589FF;
  box-shadow: 0 0 10px rgba(69, 137, 255, 0.25);
}

.db-gauge-card .dashboard-gauge-value {
  font-size: 1.45rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 8px 0 2px 0;
  letter-spacing: -0.4px;
}

.db-gauge-card .dashboard-gauge-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #F4F7FB;
  margin: 0;
}

.db-gauge-card .dashboard-gauge-sub {
  font-size: 0.74rem;
  color: #94A3B8;
  margin: 3px 0 0 0;
}

/* First Row KPI Grid (5 Compact Cards) */
.db-kpi-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.db-kpi-card {
  background: #0D1B2A;
  border: 1px solid rgba(125, 160, 190, 0.14);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.db-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.db-kpi-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94A3B8;
}

.db-kpi-icon-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 800;
}

.db-kpi-icon--blue { background: rgba(69, 137, 255, 0.16); color: #4589FF; }
.db-kpi-icon--gold { background: rgba(245, 166, 35, 0.16); color: #F5A623; }
.db-kpi-icon--purple { background: rgba(138, 92, 246, 0.16); color: #8A5CF6; }
.db-kpi-icon--cyan { background: rgba(23, 185, 213, 0.16); color: #17B9D5; }
.db-kpi-icon--green { background: rgba(56, 201, 107, 0.16); color: #38C96B; }
.db-kpi-icon--pink { background: rgba(239, 68, 68, 0.16); color: #EF4444; }

.db-kpi-val {
  font-size: 1.45rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.3px;
  line-height: 1.1;
  margin-top: 2px;
}

.db-kpi-sub {
  font-size: 0.74rem;
  color: #94A3B8;
}

/* Second Row KPI Grid (3 Cards + Quick Actions) */
.db-kpi-grid-row2 {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 16px;
}

.db-kpi-row2-left {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* Quick Actions Card & Grid */
.db-quick-actions-card {
  height: 100%;
}

.db-qa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  margin-top: 4px;
}

.db-qa-btn {
  background: #112236;
  border: 1px solid rgba(125, 160, 190, 0.14);
  border-radius: 10px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #F4F7FB;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.db-qa-btn:hover {
  background: #172F4A;
  border-color: #4589FF;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.db-qa-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
}

.db-qa-icon--blue { background: rgba(69, 137, 255, 0.16); color: #4589FF; }
.db-qa-icon--green { background: rgba(56, 201, 107, 0.16); color: #38C96B; }
.db-qa-icon--purple { background: rgba(138, 92, 246, 0.16); color: #8A5CF6; }
.db-qa-icon--gold { background: rgba(245, 166, 35, 0.16); color: #F5A623; }
.db-qa-icon--cyan { background: rgba(23, 185, 213, 0.16); color: #17B9D5; }
.db-qa-icon--pink { background: rgba(239, 68, 68, 0.16); color: #EF4444; }

/* Lower Dashboard Grid (Top Products, Recent Orders, Product/Status Overview) */
#dashboard .db-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(320px, 1.8fr);
  gap: 16px;
}

.db-top-products-card,
.db-recent-orders-card,
.db-status-overview-card {
  height: 100%;
}

#dashboard .db-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.82rem;
  margin-top: 4px;
}

#dashboard .db-table th {
  background: #0B1826 !important;
  color: #94A3B8 !important;
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(125, 160, 190, 0.14);
}

#dashboard .db-table td {
  background: #0D1B2A;
  color: #F4F7FB;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(125, 160, 190, 0.08);
  vertical-align: middle;
}

#dashboard .db-table tr:hover td {
  background: #112236;
}

.db-prod-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.db-prod-thumb {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  object-fit: cover;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.db-margin-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.db-margin-bar-outer {
  background: rgba(255, 255, 255, 0.08);
  height: 6px;
  width: 48px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.db-margin-bar-inner {
  background: #38C96B;
  height: 100%;
  border-radius: 3px;
}

/* Status Pills for Orders */
.db-status-pill {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-block;
}

.db-status-pill--paid,
.db-status-pill--completed {
  background: rgba(56, 201, 107, 0.16);
  color: #38C96B;
}

.db-status-pill--pending,
.db-status-pill--draft {
  background: rgba(245, 166, 35, 0.16);
  color: #F5A623;
}

.db-status-pill--shipped,
.db-status-pill--processing {
  background: rgba(69, 137, 255, 0.16);
  color: #4589FF;
}

/* Product Status Donut Chart Panel */
.db-status-chart-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

.db-status-donut-container {
  position: relative;
  width: 140px;
  height: 140px;
}

.db-status-donut-container canvas {
  width: 140px !important;
  height: 140px !important;
}

.db-donut-center-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.db-donut-count {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
}

.db-donut-text {
  font-size: 0.68rem;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.db-status-legend {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.db-legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #F4F7FB;
  padding: 2px 4px;
}

.db-legend-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.db-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.db-legend-right {
  font-weight: 700;
  color: #94A3B8;
  font-size: 0.74rem;
}

/* Pro Tip Bar */
.db-protip-bar {
  background: #0D1B2A;
  border: 1px solid rgba(125, 160, 190, 0.14);
  border-radius: 14px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  gap: 16px;
  margin-top: 4px;
}

.db-protip-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #F4F7FB;
  font-weight: 600;
}

.db-protip-star {
  font-size: 1.15rem;
  flex-shrink: 0;
}

/* Responsive Overrides */
@media (max-width: 1400px) {
  .db-top-analytics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .db-kpi-grid-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .db-kpi-grid-row2 {
    grid-template-columns: 1fr;
  }
  .db-lower-grid {
    grid-template-columns: 1fr 1fr;
  }
  .db-status-overview-card {
    grid-column: span 2;
  }
}

@media (max-width: 1024px) {
  .db-top-analytics-grid {
    grid-template-columns: 1fr;
  }
  .db-kpi-grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .db-kpi-row2-left {
    grid-template-columns: 1fr;
  }
  .db-lower-grid {
    grid-template-columns: 1fr;
  }
  .db-status-overview-card {
    grid-column: span 1;
  }
/* =========================================================
   LISTINGS & SEO (Option 3 Listing Health + Option 1)
   Scoped strictly under #seo to avoid side effects
   ========================================================= */
#seo {
  color: #F4F7FB;
}

#seo .lh-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  background: #0D1B2A;
  border: 1px solid rgba(125, 160, 190, 0.14);
  padding: 14px 20px;
  border-radius: 12px;
}

#seo .lh-main-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  color: #F4F7FB;
}

#seo .lh-main-sub {
  margin: 4px 0 0;
  color: #94A3B8;
  font-size: 0.86rem;
}

#seo .lh-header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

#seo .lh-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #112236;
  border: 1px solid rgba(125, 160, 190, 0.2);
  color: #F4F7FB;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

#seo .lh-btn-secondary:hover {
  background: #172F4A;
  border-color: #4589FF;
}

#seo .lh-card {
  background: #0D1B2A;
  border: 1px solid rgba(125, 160, 190, 0.14);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

#seo .lh-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

#seo .lh-card-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

#seo .lh-score-display {
  display: flex;
  align-items: center;
  gap: 10px;
}

#seo .lh-grade-badge {
  font-size: 1.6rem;
  font-weight: 900;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#seo .lh-grade-pill {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 6px;
}

#seo .lh-grade--a { background: rgba(56, 201, 107, 0.15); color: #38C96B; border: 1px solid rgba(56, 201, 107, 0.3); }
#seo .lh-grade--b { background: rgba(69, 137, 255, 0.15); color: #4589FF; border: 1px solid rgba(69, 137, 255, 0.3); }
#seo .lh-grade--c { background: rgba(245, 166, 35, 0.15); color: #F5A623; border: 1px solid rgba(245, 166, 35, 0.3); }
#seo .lh-grade--d { background: rgba(255, 159, 67, 0.15); color: #FF9F43; border: 1px solid rgba(255, 159, 67, 0.3); }
#seo .lh-grade--f { background: rgba(255, 77, 77, 0.15); color: #FF4D4D; border: 1px solid rgba(255, 77, 77, 0.3); }

#seo .lh-score-val {
  font-size: 1.4rem;
  font-weight: 800;
  color: #F4F7FB;
  line-height: 1.1;
}

#seo .lh-score-sub {
  font-size: 0.72rem;
  color: #94A3B8;
}

#seo .lh-count-val {
  font-size: 1.5rem;
  font-weight: 800;
  color: #F4F7FB;
}

#seo .lh-count-pct {
  font-size: 0.72rem;
  color: #94A3B8;
}

#seo .lh-main-grid {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 18px;
}

#seo .lh-filter-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

#seo .lh-select, #seo .lh-input {
  background: #112236;
  border: 1px solid rgba(125, 160, 190, 0.2);
  color: #F4F7FB;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
}

#seo .lh-table-wrapper {
  overflow-x: auto;
}

#seo .lh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

#seo .lh-table th {
  background: #112236;
  color: #94A3B8;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(125, 160, 190, 0.14);
}

#seo .lh-table td {
  padding: 12px;
  border-bottom: 1px solid rgba(125, 160, 190, 0.08);
  color: #F4F7FB;
}

#seo .lh-table tr:hover td {
  background: #112236;
}

#seo .lh-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-block;
}

#seo .lh-badge--blue { background: rgba(69, 137, 255, 0.15); color: #4589FF; border: 1px solid rgba(69, 137, 255, 0.3); }

#seo .lh-insights-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#seo .lh-side-title {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #F4F7FB;
}

#seo .lh-focus-list, #seo .lh-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#seo .lh-focus-item {
  background: #112236;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
}

#seo .lh-focus-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

#seo .lh-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#seo .lh-modal-card {
  background: #0D1B2A;
  border: 1px solid rgba(125, 160, 190, 0.2);
  border-radius: 14px;
  width: 560px;
  max-width: 92vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  color: #F4F7FB;
}

#seo .lh-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(125, 160, 190, 0.14);
}

#seo .lh-modal-close {
  background: transparent;
  border: none;
  color: #94A3B8;
  font-size: 1.2rem;
  cursor: pointer;
}

#seo .lh-modal-body {
  padding: 20px;
}

/* Phase 8 Settings Styles */
.settings-dirty-pill {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1px solid rgba(245, 158, 11, 0.3);
  display: inline-flex;
  align-items: center;
}

.grid-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  padding: 12px 0;
}

.grid-form .field.wide {
  grid-column: 1 / -1;
}

.grid-form .checkbox-field {
  display: flex;
  align-items: center;
}

.panel-danger {
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  background: rgba(239, 68, 68, 0.04) !important;
}