/* ProfitDesk — light dashboard. No build step, no framework. */

:root {
  --bg:        #F6F7F9;
  --panel:     #FFFFFF;
  --ink:       #0F172A;
  --muted:     #64748B;
  --faint:     #94A3B8;
  --line:      #E7EAEF;
  --line-soft: #F1F3F6;

  --up:     #0F9D74;
  --down:   #DC2626;
  --accent: #10B981;
  --sales:  #3B82F6;
  --spend:  #94A3B8;
  --tint:   #ECFDF5;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* A class with `display` beats the browser's own [hidden] rule, so say it louder. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
button, input, select { font-family: inherit; font-size: inherit; }

/* ------------------------------------------------ buttons + fields */

.btn {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: #FAFBFC; border-color: #D8DDE5; }
.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.btn-primary:hover { background: #1E293B; border-color: #1E293B; }
.btn-block { width: 100%; margin-top: 4px; }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-danger { color: var(--down); }
.btn-danger:hover { background: #FEF2F2; border-color: #FCA5A5; }
.btn:disabled { opacity: .5; cursor: default; }

.icon-btn {
  border: 0; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--muted); padding: 4px 8px;
}
.icon-btn:hover { color: var(--ink); }

.field { display: block; margin: 12px 0; }
.field > span {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--muted);
}
.field input, .control {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  background: var(--panel);
  color: var(--ink);
}
.field input:focus, .control:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
}

.hint { margin: 6px 0 10px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.notice {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
  background: #FEF2F2; color: #991B1B; font-size: 13px; line-height: 1.5;
}
.notice.ok { background: var(--tint); color: #065F46; }

.advanced { margin-top: 18px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.advanced summary {
  cursor: pointer; font-size: 13px; color: var(--muted); user-select: none;
}
.advanced summary:hover { color: var(--ink); }

/* ------------------------------------------------ first run */

.setup { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.setup-card {
  width: 100%; max-width: 420px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow);
}
.setup-mark {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; letter-spacing: .5px;
  margin-bottom: 18px;
}
.setup h1 { font-size: 21px; letter-spacing: -.2px; }
.setup-sub { margin: 8px 0 20px; color: var(--muted); line-height: 1.55; font-size: 13.5px; }

/* ------------------------------------------------ shell */

.layout { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 18px 12px;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 9px; padding: 0 8px 20px; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
}
.brand-name { font-weight: 600; letter-spacing: -.2px; }

.nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.nav-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--faint); font-weight: 600; padding: 14px 8px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer;
  padding: 8px 9px; border-radius: 8px;
  color: var(--muted); font-weight: 500;
}
.nav-item:hover { background: var(--line-soft); color: var(--ink); }
.nav-item.on { background: var(--tint); color: #065F46; font-weight: 600; }
.nav-item .ico { width: 18px; text-align: center; font-size: 13px; flex: none; }
.nav-item .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none;
}
.nav-item.on .dot { background: var(--accent); }
.nav-item .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar-foot { border-top: 1px solid var(--line-soft); padding-top: 8px; margin-top: 8px; }
.nav-add { color: var(--muted); }

/* ------------------------------------------------ top bar */

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.crumb h1 { font-size: 17px; letter-spacing: -.2px; }
.crumb p { margin: 2px 0 0; font-size: 12px; color: var(--faint); }
.controls { display: flex; align-items: center; gap: 8px; }
.controls .control { width: auto; }
.control-group { display: flex; gap: 6px; }

.content { padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 16px; }

/* ------------------------------------------------ metric cards */

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 8px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  min-height: 132px;
}
.card.feature { background: var(--tint); border-color: #A7F3D0; }
.card.loss .card-value { color: var(--down); }
.card.feature.loss { background: #FEF2F2; border-color: #FECACA; }
.card-label {
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  display: flex; align-items: center; gap: 7px;
}
.card-label .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chip {
  margin-left: auto;
  font-size: 11.5px; font-weight: 600;
  padding: 2px 6px; border-radius: 5px;
  white-space: nowrap;
}
.chip.up   { color: var(--up);   background: rgba(15, 157, 116, .09); }
.chip.down { color: var(--down); background: rgba(220, 38, 38, .08); }
.chip.flat { color: var(--faint); background: var(--line-soft); }
.card-value {
  font-size: 27px; font-weight: 650; letter-spacing: -.7px;
  margin-top: 8px; font-variant-numeric: tabular-nums;
}
.card-label .logo { width: 15px; height: 15px; flex: none; }
.card-label .logo-shopify { width: 19px; height: 19px; }
.spend-split { margin-top: 4px; display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); }
.spend-split div { display: flex; align-items: center; gap: 6px; }
.spend-split .logo { width: 14px; height: 14px; flex: none; }
.spend-split .nologo { width: 14px; flex: none; }
.card-aov { font-size: 13px; color: var(--muted); margin-top: 4px; }
.card-aov b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.spend-split b { margin-left: auto; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.card-note .est { color: #B45309; }
.card-note { font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.spark { margin-top: auto; height: 40px; display: block; width: 100%; }

/* ------------------------------------------------ panels */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
}
.panel-head h2 { font-size: 14px; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.key { display: flex; align-items: center; gap: 6px; }
.key::before {
  content: ""; width: 9px; height: 3px; border-radius: 2px; background: var(--faint);
}
.key-sales::before { background: var(--sales); }
.key-spend::before { background: var(--spend); }

.chart { padding: 12px 8px 4px; }
.chart svg { display: block; width: 100%; height: 240px; }
.grid-line { stroke: var(--line-soft); stroke-width: 1; }
.axis-text { fill: var(--faint); font-size: 10px; }
.line-sales { fill: none; stroke: var(--sales); stroke-width: 2; stroke-linejoin: round; }
.line-spend { fill: none; stroke: var(--spend); stroke-width: 2; stroke-linejoin: round;
              stroke-dasharray: 3 3; }
.area-sales { fill: url(#salesFade); }
.empty { padding: 40px 16px; text-align: center; color: var(--faint); font-size: 13px; }

/* ------------------------------------------------ table */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td {
  padding: 11px 16px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
}
.table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--faint); font-weight: 600;
}
.table th:first-child, .table td:first-child { text-align: left; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #FBFCFD; }
.table td { font-variant-numeric: tabular-nums; }
.table .name { font-weight: 500; }
.table .sub { display: block; font-size: 11.5px; color: var(--faint); font-weight: 400; }
.pos { color: var(--up); }
.neg { color: var(--down); }

/* ------------------------------------------------ warnings */

.warnings:empty { display: none; }
.warn {
  background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E;
  border-radius: 8px; padding: 6px 10px; font-size: 12px; line-height: 1.4;
  margin-bottom: 6px;
}

.warn-group { padding: 0; }
.warn-head {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px;
  background: none; border: 0; color: inherit; font: inherit; text-align: left;
  cursor: pointer; min-width: 0;
}
.warn-count {
  flex: none; font-weight: 600; font-size: 12px;
  background: #FDE68A; border-radius: 999px; padding: 1px 8px;
}
.warn-first { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.warn-toggle { flex: none; font-size: 12px; font-weight: 600; white-space: nowrap; }
.warn-group.open .warn-first { visibility: hidden; }
.warn-group ul { margin: 0; padding: 0 14px 10px 32px; }
.warn-group li { margin: 3px 0; }

/* ------------------------------------------------ settings drawer */

.drawer { position: fixed; inset: 0; z-index: 40; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(15, 23, 42, .3); }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  background: var(--panel);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 24px rgba(15, 23, 42, .08);
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.drawer-head h2 { font-size: 16px; }
.drawer-body { overflow-y: auto; padding: 4px 20px 32px; }
.block { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.block:last-child { border-bottom: 0; }
.block h3 { font-size: 13px; margin-bottom: 4px; }

.store-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}
.store-row-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.store-row-head strong { font-size: 13.5px; }
.store-row-head span { font-size: 11.5px; color: var(--faint); }
.row-actions { display: flex; gap: 8px; margin-top: 10px; }
.inline-field { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.inline-field span { font-size: 12.5px; color: var(--muted); flex: none; }
.inline-field input, .inline-field select {
  flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px;
  background: var(--panel); color: var(--ink); min-width: 0;
}
.suffix { color: var(--faint); font-size: 12.5px; }

.google-state {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border: 1px solid var(--line); border-radius: 10px;
}
.google-state .who { flex: 1; min-width: 0; }
.google-state .who strong { display: block; font-size: 13px; }
.google-state .who span {
  display: block; font-size: 11.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis;
}

/* ------------------------------------------------ toast */

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: 8px; font-size: 13px;
  z-index: 60; max-width: 90vw; text-align: center;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .2);
}
.toast.bad { background: var(--down); }

/* ------------------------------------------------ narrow screens */

.store-pick, .view-pick { display: none; }
.nav-item.nav-sub { font-size: 12.5px; color: var(--faint); padding-top: 4px; padding-bottom: 4px; }

.group-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px;
}
.group-name { flex: 1; min-width: 0; }
.group-name strong { display: block; font-size: 13.5px; }
.group-name span { font-size: 11.5px; color: var(--faint); }
.group-editor { border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.group-quick { font-size: 12px; color: var(--muted); margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.link { background: none; border: 0; padding: 0; color: var(--sales); cursor: pointer; font: inherit; }
.link:hover { text-decoration: underline; }
.group-stores { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
.group-store { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 13px; cursor: pointer; }
.group-store span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-store small { color: var(--faint); font-size: 11px; white-space: nowrap; }

@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: 10px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line);
    padding: 10px 12px;
  }
  .brand { padding: 0 6px 0 0; }
  .brand-name { display: none; }
  /* Phones: blended views and stores become two dropdowns. */
  .nav { display: none; }
  .view-pick { display: block; flex: 1 1 0; min-width: 0; font-weight: 600;
               background: var(--tint); color: #065F46; border-color: #A7F3D0; }
  .sidebar { gap: 6px; }
  .store-pick { padding-left: 9px; padding-right: 6px; }
  .store-pick { display: block; flex: 1 1 0; min-width: 0; font-weight: 500; }
  .foot-txt { display: none; }
  .sidebar-foot .nav-item { padding: 8px 10px; font-size: 16px; }
  .nav-item { white-space: nowrap; }
  .nav-label { display: none; }
  .sidebar-foot { display: flex; border-top: 0; margin: 0; padding: 0; }
  .topbar { flex-direction: column; align-items: stretch; gap: 12px; }
  /* Phones: two cards per row, a little tighter so eight fit in four rows. */
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .card { padding: 11px 12px 6px; min-height: 112px; }
  .card-label { font-size: 11.5px; gap: 5px; flex-wrap: wrap; }
  .card-label .chip { font-size: 10.5px; padding: 1px 5px; }
  .card-value { font-size: 21px; letter-spacing: -.4px; margin-top: 6px; }
  .card-note { font-size: 10.5px; line-height: 1.35; }
  .spark { height: 30px; }
  .content { padding: 14px; }
}

.steps { padding-left: 18px; margin: 8px 0; line-height: 1.55; }
.steps li { margin-bottom: 6px; }
.steps code { font-size: 11.5px; background: var(--line-soft); padding: 1px 4px; border-radius: 4px; word-break: break-all; }

.fx-note { margin: 0 0 10px; font-size: 11px; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; }
.fx-note strong { color: var(--ink); font-weight: 600; }

.fee-group { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.fee-title { font-weight: 600; font-size: 13px; }
.fee-group .inline-field input { flex: 0 0 90px; }
.fee-group .inline-field .suffix { flex: 1; }
.fee-fixed { font-size: 12.5px; color: var(--muted); margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.fee-fixed input { width: 64px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 6px; }
.fee-plans { list-style: none; padding: 0; margin: 6px 0 0; font-size: 12.5px; }
.fee-plans li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line-soft); }
.fee-plans small { color: var(--faint); white-space: nowrap; }

/* ------------------------------------------------ section menu (PD logo) */
[data-section-menu] { cursor: pointer; border-radius: 8px; }
[data-section-menu]:hover .brand-mark { box-shadow: 0 0 0 3px var(--line); }
.brand-name::after { content: " \25BE"; font-size: 10px; color: var(--faint); }
.section-menu {
  position: absolute; z-index: 70; width: 260px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
}
.section-item { display: block; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.section-item strong { display: block; font-size: 13.5px; }
.section-item span { display: block; font-size: 11.5px; color: var(--faint); }
a.section-item:hover { background: var(--line-soft); }
.section-item.on { background: var(--tint); }
.section-item.on strong { color: #065F46; }
.section-item.soon { opacity: .55; cursor: default; }

/* ------------------------------------------------ cash flow page */
.cash-page { max-width: 1240px; margin: 0 auto; }
.cash-top {
  display: flex; align-items: center; gap: 16px; padding: 16px 24px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.cash-top .brand { padding: 0; }
.cash-top .crumb { flex: 1; min-width: 0; }
.cash-top .crumb h1 { font-size: 18px; }
.cash-top .crumb p { margin: 2px 0 0; color: var(--faint); font-size: 12.5px; }
.cash-empty { padding: 18px; }
.cash-empty h2 { font-size: 15px; margin-bottom: 4px; }
.cash-connect-body { padding: 14px 16px; }
#storeTable td.roas { font-weight: 700; }
#storeTable tfoot td { font-weight: 600; border-top: 2px solid var(--ink); border-bottom: 0; background: #F8FAFC; }
#storeTable tfoot td.roas { font-weight: 700; }
#storeTable th, #storeTable td { padding-left: 13px; padding-right: 13px; }
#storeTable th:first-child, #storeTable td:first-child { padding-left: 16px; }
#storeTable th:last-child, #storeTable td:last-child { padding-right: 16px; }
@media (max-width: 560px) {
  #storeTable th, #storeTable td { padding-left: 11px; padding-right: 11px; }
  #storeTable th:first-child, #storeTable td:first-child { padding-left: 12px; }
  #storeTable th:last-child, #storeTable td:last-child { padding-right: 12px; }
}
.card.position { grid-column: 1 / -1; min-height: 0; cursor: pointer; }
.card.position:hover { border-color: var(--sales); }
.ads-owed { font-size: 14px; font-weight: 600; color: var(--down); margin-left: 10px;
  letter-spacing: 0; white-space: nowrap; }
.after-ads { font-size: 15px; font-weight: 600; margin-top: 2px; }
.after-ads span { font-weight: 400; color: var(--muted); font-size: 12.5px; }
#adsTable td.name .sub + .sub { margin-top: 1px; }
.ads-fail { display: block; font-size: 11.5px; color: var(--down); }
#adsTable tfoot td { font-weight: 600; border-top: 2px solid var(--ink); }
.ads-amt { color: var(--down); }
.ads-help { padding: 0 16px 14px; font-size: 11.5px; line-height: 1.45; margin: 8px 0 0; }
.card-link { font-size: 12px; font-weight: 600; color: var(--sales); margin-top: 6px; }

/* statement pop-up */
.stmt { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 32px); box-shadow: 0 20px 50px rgba(15, 23, 42, .25); color: var(--ink); }
.stmt::backdrop { background: rgba(15, 23, 42, .4); }
.stmt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 16px 18px 8px; position: sticky; top: 0; background: var(--panel); z-index: 1; }
.stmt-head h2 { font-size: 16px; }
.stmt-head .hint { margin: 2px 0 0; }
.stmt-range { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 18px 12px;
  border-bottom: 1px solid var(--line); }
.stmt-range .control { width: auto; }
.stmt-dates { display: inline-flex; gap: 6px; align-items: center; }
.stmt-body { padding: 4px 18px 18px; font-variant-numeric: tabular-nums; }
.stmt-wait { padding: 18px 0; }
.stmt-sec { margin-top: 10px; }
.stmt-sec-head { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 10px 0 4px;
  border-bottom: 1px solid var(--line); }
.stmt-sec-head .hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.stmt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.stmt-what { min-width: 0; }
.stmt-via { display: block; font-size: 11px; color: var(--faint); }
.stmt-n { color: var(--faint); font-size: 11.5px; }
.stmt-amt { white-space: nowrap; text-align: right; }
.stmt-amt.out { color: var(--ink); }
.stmt-amt.in { color: var(--up); }
.stmt-row.moved .stmt-what, .stmt-info { color: var(--muted); }
.stmt-sub { display: block; font-size: 11px; color: var(--faint); }
.stmt-detail { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0 3px 12px;
  font-size: 11.5px; color: var(--muted); }
.stmt-total { font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--line); padding: 10px 0; }
.stmt-change { font-weight: 600; }
.stmt-row.strong { font-weight: 600; }
.stmt-note { font-size: 11.5px; margin: 12px 0 0; line-height: 1.45; }
#schedule .sub { line-height: 1.45; margin-top: 2px; white-space: normal; }
#schedule .kind { display: block; }
#schedule td.name { width: 100%; }
@media (max-width: 560px) {
  #schedule th, #schedule td { padding-left: 8px; padding-right: 8px; }
  #schedule th:last-child, #schedule td:last-child { padding-right: 14px; }
  #schedule th:first-child, #schedule td:first-child { padding-left: 14px; }
}
.schedule-more { display: block; width: calc(100% - 32px); margin: 12px 16px 16px; }
@media (max-width: 780px) {
  .cash-top { flex-wrap: wrap; padding: 12px; gap: 10px; }
  .cash-top .crumb { order: 3; flex-basis: 100%; }
  .cash-top .controls { margin-left: auto; }
}

@media (max-width: 780px) {
  .spend-split { font-size: 11.5px; gap: 2px; }
  .spend-split .logo { width: 13px; height: 13px; }
}

/* ------------------------------------------------ COG + Products Monitor */
.cog-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.cog-tab { border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  padding: 7px 16px; font-weight: 600; color: var(--muted); cursor: pointer; }
.cog-tab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.cog-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.cog-filters .control { width: auto; }
#dates { display: inline-flex; gap: 6px; align-items: center; }
.src { display: inline-block; font-size: 10.5px; font-weight: 600; border-radius: 999px;
  padding: 1px 7px; white-space: nowrap; }
.src.invoice { background: #ECFDF5; color: #047857; }
.src.catalog { background: #EFF6FF; color: #1D4ED8; }
.src.estimate { background: #FFF7ED; color: #B45309; }
.src.cancelled { background: var(--line-soft); color: var(--faint); }
#orders td { vertical-align: top; }
#orders td.cog-lines { text-align: left; white-space: normal; min-width: 280px; }
.cog-line { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; }
.cog-prod { flex: 1; min-width: 0; font-size: 12.5px; }
.cog-prod small { color: var(--faint); margin-left: 4px; }
.cog-amt { font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; }
.est { color: #B45309; }
#orders tr.cancelled td { color: var(--faint); }
#products tr.changed td.name { font-weight: 600; }
.sub.flag { color: #B45309; }
.cog-legend { font-size: 12px; margin: 10px 0 0; line-height: 1.9; }
#estNote .warn { margin-bottom: 12px; }

.tab-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px;
  background: #B45309; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px;
  border: 2px dashed var(--line); border-radius: var(--radius); background: var(--panel);
  cursor: pointer; margin-bottom: 12px; text-align: center; }
.drop span { color: var(--muted); font-size: 12.5px; }
.drop.over { border-color: var(--sales); background: #EFF6FF; }
#invResult .notice, #invResult .warn { margin-bottom: 12px; }
.src.ok { background: #ECFDF5; color: #047857; }
.src.new { background: #EFF6FF; color: #1D4ED8; }
.src.changed { background: #FFF7ED; color: #B45309; }
.src.bad { background: #FEF2F2; color: #B91C1C; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--line-soft); }
td.inv-status { text-align: left; white-space: normal; }
td.inv-status .btn { margin-top: 4px; }
.inv-missing { margin: 0 16px 12px; padding: 10px 12px; border-radius: 10px; background: #EFF6FF; font-size: 12.5px; }
.inv-missing div { padding: 2px 0; }
#invDetail .panel-head span { display: flex; gap: 6px; }

/* Net available (dashboard only) */
.card.available { grid-column: 1 / -1; min-height: 0; background: var(--tint); border-color: #A7F3D0; }
.card.available.loss { background: #FEF2F2; border-color: #FECACA; }
.avail-flow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 6px 0 2px;
  font-size: 12.5px; color: var(--muted); }
.avail-flow i { font-style: normal; color: var(--faint); }
.avail-step { display: inline-flex; gap: 5px; align-items: baseline; }
.avail-step b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Access levels: hidden for people without that access (the server enforces it too). */
body.not-owner [data-owner-only] { display: none !important; }
body.read-only [data-write-only] { display: none !important; }
body.not-manager [data-manage-only] { display: none !important; }

.person { border-bottom: 1px solid var(--line-soft); }
.person-edit { padding: 4px 0 12px; }
.desk-picks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; }
.desk-picks label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* ------------------------------------------------ Inbox */
.inbox-page { max-width: none; }
.inbox { display: grid; grid-template-columns: 360px 1fr; height: calc(100vh - 78px);
  border-top: 1px solid var(--line); }
.inbox-list { overflow-y: auto; border-right: 1px solid var(--line); background: var(--panel); }
.inbox-read { overflow-y: auto; padding: 20px 28px; background: var(--panel); }
.inbox-empty { padding: 20px; }
.mail-row { display: grid; gap: 2px; width: 100%; text-align: left; padding: 11px 16px; border: 0;
  border-bottom: 1px solid var(--line-soft); background: none; cursor: pointer; font: inherit; color: inherit; }
.mail-row:hover { background: var(--bg); }
.mail-row.on { background: #EFF6FF; }
.mail-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.mail-top small { color: var(--faint); white-space: nowrap; }
.mail-subj { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-snip { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-store { font-size: 11px; color: var(--faint); }
.mail-h { font-size: 18px; margin-bottom: 6px; }
.mail-meta { font-size: 13px; color: var(--ink); margin-bottom: 14px; }
.mail-meta span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.mail-att { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.mail-body { white-space: pre-wrap; font-size: 14px; line-height: 1.55; max-width: 760px; }

/* Inbox: three columns, tickets */
.inbox3 { grid-template-columns: 200px 340px 1fr; }
@media (min-width: 1100px) {
  .inbox3 { grid-template-columns: 184px minmax(260px, 310px) minmax(0, 1fr); }
  .inbox3.training { grid-template-columns: 184px minmax(0, 1fr); }
}
@media (min-width: 1100px) and (max-width: 1440px) {
  /* Narrower screens: folders show icons + counts only, names on hover */
  body.has-rail:not(.rail-slim) .inbox3 { grid-template-columns: 58px minmax(250px, 290px) minmax(0, 1fr); }
  body.has-rail:not(.rail-slim) .inbox3.training { grid-template-columns: 58px minmax(0, 1fr); }
  body.has-rail:not(.rail-slim) .inbox-nav { padding: 10px 6px; }
  body.has-rail:not(.rail-slim) .inbox-nav button { justify-content: center; padding: 8px 0; position: relative; font-size: 0; }
  body.has-rail:not(.rail-slim) .inbox-nav button i { font-size: 15px; width: auto; }
  body.has-rail:not(.rail-slim) .inbox-nav button b { position: absolute; top: 1px; right: 2px; font-size: 9.5px; margin: 0; }
  body.has-rail:not(.rail-slim) .inbox-nav .inav-label { display: none; }
}
.inbox-nav { background: var(--bg); border-right: 1px solid var(--line); padding: 10px 8px; overflow-y: auto; }
.inav-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); padding: 12px 8px 4px; }
.inbox-nav button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none;
  padding: 7px 8px; border-radius: 8px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; text-align: left; }
.inbox-nav button:hover { background: var(--line-soft); }
.inbox-nav button.on { background: #EFF6FF; color: #1D4ED8; font-weight: 600; }
.inbox-nav button.sub { padding-left: 24px; }
.inbox-nav button i { font-style: normal; width: 16px; text-align: center; color: var(--muted); }
.inbox-nav button b { margin-left: auto; font-weight: 500; color: var(--faint); font-size: 12px; }
.mail-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 3px; }
.mail-tags .mail-store { margin-left: 2px; }
.tk { font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.tk-scm { background: #EFF6FF; color: #1D4ED8; }
.tk-cs { background: #F5F3FF; color: #6D28D9; }
.tk-inquiry { background: #ECFEFF; color: #0E7490; }
.tk-legal { background: #FEF2F2; color: #B91C1C; }
.tk-us { background: #FFF7ED; color: #B45309; }
.tk-them { background: #ECFDF5; color: #047857; }
.tk-done { background: var(--line-soft); color: var(--muted); }
.tk-esc { background: #FEF2F2; color: #B91C1C; }
.tk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 22px; }
.tk-summary { background: #F8FAFC; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  font-size: 13px; margin-bottom: 14px; }
.msg { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--panel); }
.msg.in { background: #F0FAF4; border-color: #CDEBD9; margin-right: 36px; }
.msg.out { margin-left: 36px; }
[data-theme="dark"] .msg.in { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.25); }
.tr-bar { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; flex-wrap: wrap; }
.tr-bar .control { width: auto; height: 30px; padding: 0 8px; font-size: 12.5px; }
.tr-auto { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.tr-one { border: 0; background: none; padding: 0 6px 0 0; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--sales); cursor: pointer; }
.tr-one:hover { text-decoration: underline; }
.tr-onebar { margin-bottom: 6px; }
.translated > .msg-head strong::after, .mail-one.translated .tr-onebar::before { content: "translated"; font-size: 10.5px; font-weight: 600;
  color: var(--sales); background: rgba(59,130,246,.1); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.mail-one.translated .tr-onebar::before { margin: 0 6px 0 0; }
.mail-quote { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--line-soft); padding: 6px 10px;
  cursor: pointer; position: relative; max-height: 78px; overflow: hidden; }
.mail-quote::after { content: "Show earlier message ▾"; position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 10px 5px;
  font-size: 11px; font-weight: 600; color: var(--muted); background: linear-gradient(transparent, var(--line-soft) 55%); }
.mail-quote.open { max-height: none; }
.mail-quote.open::after { content: "Hide ▴"; position: static; display: block; padding: 4px 0 0; background: none; }
.mail-quote-head { font-size: 11px; color: var(--muted); margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-quote-head b { color: var(--ink); font-weight: 600; }
.tr-tag { font-size: 10px; font-weight: 600; color: var(--sales); background: rgba(59,130,246,.1); border-radius: 999px; padding: 1px 6px; }
.mail-quote .mail-body { font-size: 12px !important; line-height: 1.45; color: var(--muted); }
.msg.in .mail-quote { background: rgba(255,255,255,.55); }
.msg.in .mail-quote::after { background: linear-gradient(transparent, #F7FCF9 55%); }
[data-theme="dark"] .msg.in .mail-quote { background: rgba(0,0,0,.15); }
[data-theme="dark"] .msg.in .mail-quote::after { background: linear-gradient(transparent, #18231f 55%); }
.msg-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 6px; }
.msg-head span { color: var(--faint); }
.msg .mail-body { font-size: 13.5px; }
.reply-text { width: 100%; min-height: 140px; font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; }
.reply-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.reply-file { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 4px 2px 10px; background: var(--line-soft); max-width: 100%; }
.reply-file small { color: var(--muted); }
.reply-file button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 14px; padding: 0 5px; }
.reply-text.drop { border-color: var(--sales); background: rgba(59,130,246,.05); }
.reply-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.reply-tr { display: inline-flex; align-items: center; gap: 4px; }
.reply-tr .control { width: auto; height: 30px; padding: 0 6px; font-size: 12.5px; }
.reply-gap { flex: 1; }
.reply-note { margin: 8px 0 0 !important; font-size: 12px; }
.msg.sent-now { border-style: dashed; }
.reply-box { border: 1px dashed var(--line); border-radius: 10px; padding: 12px; margin-top: 6px; }
.reply-box .hint { margin: 0 0 8px; }
.tk-side { border-left: 1px solid var(--line); padding-left: 16px; font-size: 13px; }
.tk-side-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); margin: 14px 0 6px; }
.tk-side-label:first-child { margin-top: 0; }
.tk-check { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.tk-side .btn-block { margin-top: 10px; }
.tk-toggles { display: grid; gap: 4px; margin-bottom: 6px; }
.tk-toggles label { display: flex; gap: 8px; align-items: center; }
.tk-snooze { display: flex; gap: 6px; }
.tk-snooze .control { width: auto; flex: 1; min-width: 0; }
.tk-notcust { margin-top: 14px; color: var(--muted); }
.mail-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }

/* Ticket: order panel on the left, links kept short */
.tk-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; }
/* Attachments */
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0 4px; }
.att { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); display: grid; }
.att-img a:first-child { display: block; aspect-ratio: 4 / 3; background: var(--line-soft); }
.att-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-noprev::after { content: "No preview"; display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 12px; }
.att-ico { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--line-soft); color: var(--muted);
  font-weight: 700; font-size: 15px; letter-spacing: .05em; text-decoration: none; }
.att-meta { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 6px; padding: 6px 8px; font-size: 11.5px; }
.att-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; grid-column: 1; }
.att-meta small { color: var(--muted); grid-column: 1; }
.att-meta a { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-decoration: none; font-size: 15px; padding: 2px 4px; border-radius: 6px; }
.att-meta a:hover { background: var(--line-soft); }

/* Labels (Gmail labels) */
.tg-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; line-height: 1.5;
  padding: 0 7px; border-radius: 999px; color: var(--tg); background: color-mix(in srgb, var(--tg) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--tg) 30%, transparent); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tg-chip button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 2px; font-size: 13px; line-height: 1; }
.tg-chip.sug { cursor: pointer; border-style: dashed; background: transparent; }
.tg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--tg); flex: none; }
.inbox-nav button.lbl { font-size: 11px; letter-spacing: -.01em; padding-top: 5px; padding-bottom: 5px; align-items: center; }
.inbox-nav button.lbl .lbl-name { min-width: 0; white-space: normal; line-height: 1.25; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.inbox-nav button.lbl .tg-dot { width: 8px; height: 8px; border-radius: 2px; }
@media (min-width: 1100px) and (max-width: 1440px) { body.has-rail:not(.rail-slim) .inbox-nav button.lbl .lbl-name { display: none; } }
.inbox-nav button.lbl .tg-dot { margin: 0 2px 0 3px; }
.tg-box { display: grid; gap: 6px; margin-bottom: 4px; }
.tg-box.tg-inline { margin: 4px 0 10px; }
.tg-list { display: flex; flex-wrap: wrap; gap: 4px; }
.tg-sug { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 11.5px; color: var(--muted); }
.tg-add { position: relative; }
.tg-add .control { height: 30px; font-size: 12.5px; padding: 0 8px; }
.tg-box.tg-inline .tg-add { max-width: 260px; }
.tg-menu { position: absolute; z-index: 20; left: 0; right: 0; top: 32px; max-height: 260px; overflow: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.15); padding: 4px; display: grid; }
.tg-menu button { display: flex; align-items: center; gap: 7px; border: 0; background: none; text-align: left; padding: 6px 8px;
  border-radius: 6px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--ink); }
.tg-menu button:hover { background: var(--line-soft); }
.tg-menu .tg-new { color: var(--sales); font-weight: 600; }
.list-sep { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 12px 4px; }
.mail-row .mail-tags .tg-chip { margin-right: 3px; }
@media (min-width: 1100px) and (max-width: 1440px) {
  body.has-rail:not(.rail-slim) .inbox-nav button.lbl .tg-dot { width: 12px; height: 12px; margin: 0; }
}
.ord-parcel { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; margin: 8px 0 4px; display: grid; gap: 5px; background: var(--panel); }
.ord-parcel-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ord-scm { font-size: 11.5px; font-weight: 600; text-decoration: none; color: var(--muted); }
.ord-scm:hover { color: var(--ink); }
.ord-num { display: grid; gap: 3px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ord-num code { text-transform: none; letter-spacing: 0; justify-self: start; }
.ord-num code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; color: var(--ink); background: var(--line-soft);
  padding: 2px 6px; border-radius: 6px; cursor: copy; overflow-wrap: anywhere; }
.ord-links { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; font-weight: 600; }
.ord-event { font-size: 12px; line-height: 1.4; }
.ord-event small { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; }
.tk-orders { font-size: 12.5px; min-width: 0; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.tk-orders .ord:last-child { border-bottom: 0; }
.pay { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 700; border-radius: 4px;
  padding: 1px 6px; vertical-align: 1px; background: var(--line-soft); color: var(--muted); }
.pay-paypal { background: #FFC439; color: #003087; font-style: italic; }
.pay-paypal b { color: #009CDE; font-weight: 800; }
.pay-afterpay { background: #B2FCE4; color: #000; letter-spacing: -.2px; }
.pay-card { background: #EEF2FF; color: #3730A3; }
.ord { border-bottom: 1px solid var(--line-soft); padding: 8px 0 10px; }
.ord-head { display: flex; justify-content: space-between; gap: 6px; font-weight: 600; }
.ord-head span { color: var(--faint); font-weight: 400; }
.ord-row { margin: 3px 0; }
.ord-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.ord-item { margin: 2px 0; overflow-wrap: anywhere; }
.ord-item small { display: block; color: var(--faint); }
.ord-track { margin-top: 5px; overflow-wrap: anywhere; }
.ord-ship { margin-top: 4px; font-size: 11.5px; }
.mail-body a, .ord a, .tk-side a { overflow-wrap: anywhere; word-break: break-word; }
.mail-body { overflow-wrap: anywhere; }
.reply-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.draft-text { width: 100%; margin: 10px 0 8px; font: inherit; font-size: 13.5px; line-height: 1.5; resize: vertical; }
/* AI training page: uses the list + reading columns */
.inbox3.training { grid-template-columns: 200px 1fr; }
.inbox3.training .inbox-list { display: none; }
.train { max-width: 860px; }
.train h2 { font-size: 18px; margin-bottom: 4px; }
.train h3 { font-size: 15px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.train-sec { padding: 4px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.train-status { margin: 10px 0; font-size: 13px; }
.train-run { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 10px 0 6px; }
.train-run label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.train-run .control { width: auto; }
.qa { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.qa.done { background: #F8FAFC; }
.qa-q { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.qa textarea, .sop textarea, .sop input { width: 100%; margin-bottom: 6px; }
.qa-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sop { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.sop summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.playbook { width: 100%; font-family: ui-monospace, monospace; font-size: 12.5px; line-height: 1.5; margin-bottom: 8px; }

/* Reports desk */
.rep-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 14px 16px 4px; }
.rep-form label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.rep-form .control { width: auto; min-width: 140px; }
.rep-help { padding: 0 16px 14px; margin: 6px 0 0; }
.rep-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* Chat button (every desk) */
.pd-chat-btn { position: fixed; right: 18px; bottom: 18px; z-index: 60; border: 0; border-radius: 999px;
  background: var(--ink); color: #fff; padding: 11px 16px; font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .25); }
.pd-chat { position: fixed; right: 18px; bottom: 70px; z-index: 61; width: min(420px, calc(100vw - 24px));
  height: min(560px, calc(100vh - 100px)); background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 23, 42, .22); display: flex; flex-direction: column; }
.pd-chat-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px;
  border-bottom: 1px solid var(--line); }
.pd-chat-x { border: 0; background: none; font-size: 15px; color: var(--muted); cursor: pointer; padding: 2px 6px; }
.pd-chat-log { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.pd-msg { font-size: 13.5px; line-height: 1.5; max-width: 92%; overflow-wrap: anywhere; }
.pd-msg p { margin: 0 0 6px; }
.pd-msg.user { align-self: flex-end; background: #EFF6FF; border-radius: 12px 12px 2px 12px; padding: 8px 11px; white-space: pre-wrap; }
.pd-msg.assistant { align-self: flex-start; }
.pd-msg table { border-collapse: collapse; font-size: 12px; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.pd-msg th, .pd-msg td { border-bottom: 1px solid var(--line); padding: 3px 8px 3px 0; text-align: left; }
.pd-msg .li { margin: 2px 0; }
.pd-wait { color: var(--faint); }
.pd-dl { margin-top: 4px; display: inline-flex; }
.pd-chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); align-items: end; }
.pd-chat-form textarea { flex: 1; resize: none; font: inherit; font-size: 13.5px; border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; }
@media print { .pd-chat-btn, .pd-chat { display: none !important; } }

/* ------------------------------------------------ Night mode
   Set by the Day / Night toggle (PD menu); data-theme on <html>. */
/* ---------------------------------------------------------------- expenses desk */
.exp-periods { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.exp-periods [data-p] { font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.exp-periods [data-p].on { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.exp-custom { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.exp-cards .card-label .logo { width: 15px; height: 15px; vertical-align: -3px; margin-right: 6px; }
.exp-card { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.exp-card:hover { transform: translateY(-1px); }
.exp-card.on { outline: 2px solid var(--ink); outline-offset: -2px; }
.exp-sort { border-color: #E3B341; }
.exp-help { margin: 0 16px 8px; }
.exp-sort-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(220px, 300px); gap: 14px;
  align-items: start; padding: 12px 16px; border-top: 1px solid var(--line); }
.exp-sort-what strong { display: block; }
.exp-sort-what .sub { display: block; font-size: 12px; color: var(--muted, #6b7280); }
.exp-ex { display: block; font-size: 12px; color: var(--muted, #6b7280); margin-top: 4px; font-family: "IBM Plex Mono", monospace; }
.exp-sort-amt { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.exp-sort-pick { display: grid; gap: 6px; }
.exp-ai { font-size: 12px; color: var(--sales); }
.exp-move { font-size: 12px; padding: 4px 6px; }
@media (max-width: 700px) {
  .exp-sort-row { grid-template-columns: 1fr auto; }
  .exp-sort-pick { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- SCM desk */
.scm-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 10px 12px 0; border-bottom: 1px solid var(--line); }
.scm-tabs button { font: inherit; font-size: 13px; white-space: nowrap; padding: 8px 12px; border: 0; background: none;
  color: var(--muted); border-radius: 8px 8px 0 0; cursor: pointer; border-bottom: 2px solid transparent; }
.scm-tabs button.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.scm-tabs button.warn { color: #B45309; }
.scm-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; }
.scm-search { flex: 1 1 280px; }
.scm-dates { display: inline-flex; align-items: center; gap: 6px; }
.scm-count { margin: 0 12px 6px; }
.scm-table tbody tr { cursor: pointer; }
.scm-table tbody tr:hover { background: var(--line-soft); }
.scm-table .mono, .scm-facts .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.scm-table td .sub, .scm-facts .sub, .scm-timeline .sub, .scm-tickets .sub { display: block; font-size: 12px; color: var(--muted); }
.scm-lastcell { max-width: 280px; }
.scm-last { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scm-late { color: #B45309; font-weight: 600; }
.scm-chip { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--line-soft); color: var(--ink); border: 1px solid var(--line); }
.scm-chip.st-delivered { background: rgba(15,157,116,.1); color: var(--up); border-color: transparent; }
.scm-chip.st-exception, .scm-chip.st-failed_attempt, .scm-chip.st-expired { background: rgba(220,38,38,.08); color: var(--down); border-color: transparent; }
.scm-chip.st-in_transit, .scm-chip.st-out_for_delivery, .scm-chip.st-pickup { background: rgba(59,130,246,.1); color: var(--sales); border-color: transparent; }
.scm-chip.st-info_received { background: rgba(14,165,233,.1); color: #0284C7; border-color: transparent; }
.scm-chip.st-awaiting { background: rgba(245,158,11,.12); color: #B45309; border-color: transparent; }
.scm-pager { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 12px; }
.scm-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--panel); z-index: 60;
  border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(15,23,42,.12); overflow-y: auto; padding: 16px 18px 40px;
  animation: scm-in .18s ease-out; }
@keyframes scm-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.scm-drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.scm-drawer-head h2 { margin: 0; font-size: 18px; }
.scm-drawer-head h2 .sub { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.scm-drawer h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 18px 0 8px; }
.scm-d-top { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.scm-facts { display: grid; grid-template-columns: 90px 1fr; gap: 6px 10px; margin: 0; font-size: 13.5px; }
.scm-facts dt { color: var(--muted); }
.scm-facts dd { margin: 0; }
.scm-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
.scm-timeline li { position: relative; padding: 0 0 12px 10px; font-size: 13px; }
.scm-timeline li::before { content: ""; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--faint); }
.scm-timeline li:first-child::before { border-color: var(--ink); background: var(--ink); }
.scm-timeline .when { display: block; font-size: 12px; color: var(--muted); font-family: "IBM Plex Mono", monospace; }
.scm-others, .scm-tickets { list-style: none; padding: 0; margin: 0; font-size: 13px; display: grid; gap: 8px; }
.scm-connect-body { padding: 4px 16px 16px; display: grid; gap: 10px; max-width: 640px; }
.scm-store-picks { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.scm-pick { display: inline-flex; gap: 6px; align-items: center; }
.scm-secret { -webkit-text-security: disc; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.scm-page-list { display: grid; gap: 6px; font-size: 13px; }
.scm-page-row { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto auto auto minmax(110px, auto); gap: 14px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.scm-lang { font-size: 12px; padding: 4px 6px; }
.scm-webhook { display: flex; gap: 8px; align-items: center; }
.scm-webhook code { font-size: 12px; padding: 6px 8px; background: var(--line-soft); border-radius: 6px; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .scm-table th:nth-child(4), .scm-table td:nth-child(4), .scm-table th:nth-child(6), .scm-table td:nth-child(6) { display: none; }
}

/* SCM, Parcel Panel style */
.scm-pages { display: flex; gap: 4px; margin-left: auto; background: var(--line-soft); padding: 3px; border-radius: 10px; }
.scm-pages button { font: inherit; font-size: 13px; border: 0; background: none; padding: 6px 14px; border-radius: 8px; cursor: pointer; color: var(--muted); }
.scm-pages button.on { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.scm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.scm-tile { text-align: left; font: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; cursor: pointer; display: grid; gap: 2px; transition: transform .12s ease, box-shadow .12s ease; }
.scm-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.scm-tile .t { font-size: 12px; color: var(--muted); }
.scm-tile strong { font-size: 22px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--ink); }
.scm-tile .n { font-size: 11.5px; color: var(--faint); }
.scm-tile.warn strong { color: #B45309; }
.scm-listhead { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 0; }
.scm-listhead h2 { margin: 0; font-size: 16px; }
.scm-actions { display: flex; gap: 6px; }
.scm-tabs { align-items: center; }
.scm-tabs button em { font-style: normal; color: var(--faint); margin-left: 2px; }
.scm-tabs button.on em { color: var(--muted); }
.scm-more { font: inherit; font-size: 13px; border: 0; background: none; color: var(--muted); padding: 8px 6px; cursor: pointer; }
.scm-more.on { color: var(--ink); font-weight: 600; }
.scm-searchbox { flex: 1 1 300px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: var(--panel); }
.scm-searchbox span { color: var(--faint); }
.scm-searchbox input { border: 0; outline: 0; background: none; font: inherit; color: var(--ink); padding: 8px 0; width: 100%; }
.scm-bulk { display: flex; gap: 8px; align-items: center; padding: 0 14px 8px; font-size: 13px; }
.scm-check { width: 28px; }
.scm-chip i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; opacity: .8; }
.scm-table tr.flagged td:first-child { box-shadow: inset 3px 0 0 #D97706; }
.scm-flag { color: #D97706; font-size: 13px; margin-left: 2px; }
.scm-note-mark { font-size: 11px; color: var(--muted); background: var(--line-soft); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.scm-notes { display: grid; gap: 8px; }
.scm-note-add { display: grid; gap: 6px; }
.scm-note-add textarea { font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); resize: vertical; }
.scm-note-add button { justify-self: end; }
.scm-note { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 8px; padding: 8px 10px; }
:root[data-theme="dark"] .scm-note { background: #2A2410; border-color: #4A3F14; }
.scm-note p { margin: 0 0 4px; font-size: 13px; }
.scm-note .sub { font-size: 11.5px; color: var(--muted); }
.scm-note a { color: var(--muted); margin-left: 6px; }
@media (max-width: 900px) { .scm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .scm-pages { margin-left: 0; } }

/* SCM desk uses Shopify admin's font (Inter), like Parcel Panel */
.scm-body, .scm-body .scm-page, .scm-body .scm-drawer, .scm-body button, .scm-body input, .scm-body select, .scm-body textarea,
.scm-body .scm-table .mono, .scm-body .scm-facts .mono, .scm-body .scm-tile strong, .scm-body .scm-timeline .when {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-feature-settings: "tnum" 1, "cv11" 1; letter-spacing: -0.005em; }
.scm-body .scm-table { font-size: 13px; }
.scm-table th, .scm-table td { text-align: left; }
.scm-body .scm-table th { font-weight: 550; font-size: 12px; text-transform: none; letter-spacing: 0; }
.scm-body .scm-table .mono { font-size: 13px; }
.scm-body .scm-tile strong { font-weight: 650; font-size: 22px; }
.scm-body h1, .scm-body h2 { font-weight: 650; letter-spacing: -0.01em; }
.scm-body .scm-tabs button { font-weight: 500; }
.scm-body .scm-tabs button.on { font-weight: 600; }
.scm-body .scm-chip { font-weight: 500; }

/* SCM filters: compact dropdown chips (like Parcel Panel's Status / Carrier / Destination buttons) */
.scm-filters { flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px; }
.scm-filters .scm-searchbox { flex: 1 1 100%; }
.scm-filters select.control {
  width: auto !important; max-width: 100%; flex: 0 0 auto; min-height: 0; height: 32px;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding: 0 30px 0 12px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 13px; font-weight: 500; color: var(--ink);
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  box-shadow: 0 1px 0 rgba(15,23,42,.04); transition: background-color .15s ease, border-color .15s ease;
}
.scm-filters select.control:hover { border-color: var(--faint); }
.scm-filters select.control.on {
  background-color: var(--ink); color: var(--panel); border-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.scm-filters .scm-dates { flex: 1 1 100%; }
.scm-filters .scm-dates input { height: 32px; border-radius: 8px; font-size: 13px; }
.scm-filters .scm-reset { font: inherit; font-size: 12.5px; border: 0; background: none; color: var(--muted); cursor: pointer; text-decoration: underline; padding: 0 4px; }
@media (max-width: 700px) {
  .scm-filters { gap: 6px; }
  .scm-filters select.control { font-size: 12.5px; height: 30px; padding: 0 26px 0 10px; background-position: right 10px center; }
}

.scm-credits { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; margin-bottom: 10px; font-size: 12px; }
.scm-credits-main { display: flex; align-items: baseline; gap: 5px; }
.scm-credits-main .t { color: var(--muted); }
.scm-credits-main strong { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }
.scm-credits-main .of { color: var(--faint); }
.scm-credits-bar { flex: 0 0 80px; height: 4px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.scm-credits-bar i { display: block; height: 100%; background: var(--up); border-radius: 999px; }
.scm-credits-note { color: var(--muted); }
.scm-credits-note a { margin-left: 6px; color: var(--ink); font-weight: 600; }
.scm-credits.low { border-color: var(--down); background: rgba(220,38,38,.06); }
.scm-credits.low .scm-credits-main strong, .scm-credits.low b { color: var(--down); }
.scm-credits.low .scm-credits-bar i { background: var(--down); }
@media (max-width: 700px) { .scm-credits { border-radius: 12px; } }

/* ------------------------------------------------ desktop sidebar (like Shopify's admin) */
.pd-rail { display: none; }
@media (min-width: 1100px) {
  .pd-rail { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: 228px; z-index: 40;
    background: #1A1A1A; color: #E3E3E3; padding: 14px 10px; font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif; }
  body.has-rail { padding-left: 228px; }
  body.has-rail [data-section-menu] { display: none; }
  body.has-rail .layout .sidebar { top: 0; }
  /* The dashboard's store list column gives way to two dropdowns in the top bar */
  body.has-rail .layout { grid-template-columns: 1fr; }
  body.has-rail .layout > .sidebar { display: none; }
  .top-picks { display: inline-flex; gap: 8px; align-items: center; }
  .top-picks .view-pick, .top-picks .store-pick { display: block; width: auto; min-width: 150px; max-width: 220px; }
  .top-picks .view-pick { font-weight: 600; background: var(--tint); color: #065F46; border-color: #A7F3D0; }
  [data-theme="dark"] .top-picks .view-pick { color: var(--up); border-color: rgba(52,211,153,.35); }
  .top-picks .view-pick[hidden] { display: none; }
  .pd-rail-brand { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-weight: 650;
    padding: 4px 10px 16px; letter-spacing: -.01em; }
  .pd-rail-brand .brand-mark { background: #fff; color: #1A1A1A; }
  .pd-rail-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
  .pd-rail-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 8px;
    color: #E3E3E3; text-decoration: none; font: inherit; font-size: 13.5px; font-weight: 500; background: none; border: 0;
    cursor: pointer; text-align: left; transition: background .12s ease; }
  .pd-rail-item svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
  .pd-rail-item:hover { background: #2B2B2B; color: #fff; }
  .pd-rail-item.on { background: #303030; color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px #3A3A3A; }
  .pd-rail-item.on svg { opacity: 1; }
  .pd-rail-foot { border-top: 1px solid #2E2E2E; padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
  .pd-rail-user { display: flex; align-items: center; gap: 9px; padding: 10px 10px 2px; }
  .pd-rail-avatar { width: 26px; height: 26px; border-radius: 7px; background: #36B37E; color: #fff; display: grid;
    place-items: center; font-size: 10.5px; font-weight: 700; flex: none; }
  .pd-rail-who { font-size: 12px; color: #E3E3E3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .pd-rail-who small { display: block; color: #9A9A9A; font-size: 11px; }
  body.has-rail .section-menu { display: none; }
  /* Folded sidebar: icons only, names on hover */
  body.rail-slim.has-rail { padding-left: 64px; }
  body.rail-slim .pd-rail { width: 64px; padding: 14px 8px; }
  body.rail-slim .pd-rail-brand { padding: 4px 6px 16px; justify-content: center; }
  body.rail-slim .pd-rail-brand span:not(.brand-mark), body.rail-slim .pd-rail-item span, body.rail-slim .pd-rail-who { display: none; }
  body.rail-slim .pd-rail-item { justify-content: center; padding: 9px 0; position: relative; }
  body.rail-slim .pd-rail-item svg { width: 19px; height: 19px; }
  body.rail-slim .pd-rail-item:hover::after { content: attr(data-tip); position: absolute; left: 54px; top: 50%; transform: translateY(-50%);
    background: #1A1A1A; color: #fff; font-size: 12.5px; font-weight: 500; padding: 5px 10px; border-radius: 7px; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: none; z-index: 50; }
  body.rail-slim .pd-rail-user { justify-content: center; padding: 10px 0 2px; }
  body.rail-slim [data-rail-fold] svg { transform: scaleX(-1); }
  /* The dark sidebar already has Settings and Log out */
  body.has-rail .sidebar #openSettings, body.has-rail .sidebar #logOut { display: none; }
}

/* ------------------------------------------------ Product Importer */
.imp-card { padding: 18px 20px; margin-bottom: 14px; }
.imp-head h2 { margin: 0; font-size: 16px; }
.imp-head p { margin: 2px 0 14px; }
.imp-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.imp-url { flex: 1 1 360px; height: 40px; }
.imp-go { width: 100%; margin-top: 10px; height: 40px; }
.imp-stores { flex: 0 0 auto; position: relative; }
.imp-pick summary { list-style: none; cursor: pointer; height: 40px; display: flex; align-items: center; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 13px; font-weight: 500; white-space: nowrap; }
.imp-pick summary::after { content: "▾"; margin-left: 8px; color: var(--muted); }
.imp-pick summary::-webkit-details-marker { display: none; }
.imp-pick-list { position: absolute; right: 0; top: 44px; z-index: 30; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,.12); padding: 8px; min-width: 240px; max-height: 340px; overflow-y: auto; }
.imp-pick-list label { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.imp-pick-list label:hover { background: var(--line-soft); }
.imp-pick-list .hint { margin-left: auto; font-size: 11px; }
.imp-pick-all { border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; font-weight: 600; }
.imp-listbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 12px; font-size: 13px; }
.imp-listbar input { flex: 1 1 180px; height: 32px; }
.imp-listbar .btn-primary { margin-left: auto; }
.imp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.imp-prod { position: relative; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 12px;
  padding: 10px; background: var(--panel); cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; font-size: 13px; }
.imp-prod:hover { box-shadow: var(--shadow); }
.imp-prod.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.imp-prod input[type=checkbox] { position: absolute; top: 16px; left: 16px; z-index: 2; width: 18px; height: 18px; }
.imp-img { aspect-ratio: 1; background: var(--line-soft); border-radius: 8px; overflow: hidden; display: block; }
.imp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imp-title { font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.imp-meta { font-variant-numeric: tabular-nums; }
.imp-new { font-size: 12px; color: var(--up); font-weight: 600; }
.imp-new .hint { font-weight: 400; }
.imp-prod a { font-size: 12px; color: var(--muted); }
.imp-one { display: grid; grid-template-columns: 260px 1fr; gap: 18px; margin-top: 16px; align-items: start; }
.imp-actions { display: grid; gap: 10px; justify-items: start; }
.imp-bar { height: 6px; background: var(--line-soft); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.imp-bar i { display: block; height: 100%; width: 0; background: var(--up); transition: width .4s ease; }
.imp-table td .sub { display: block; font-size: 12px; color: var(--muted); }
.imp-table td.name { white-space: normal; }
.imp-mini { display: inline-block; width: 34px; height: 34px; border-radius: 6px; overflow: hidden; background: var(--line-soft);
  vertical-align: middle; margin-right: 8px; }
.imp-mini img { width: 100%; height: 100%; object-fit: cover; }
.imp-st { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--line-soft); }
.imp-st.st-done { background: rgba(15,157,116,.12); color: var(--up); }
.imp-st.st-failed { background: rgba(220,38,38,.1); color: var(--down); }
.imp-st.st-skipped { background: rgba(245,158,11,.14); color: #B45309; }
.imp-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.imp-settings fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0; display: grid; gap: 10px; align-content: start; }
.imp-settings legend { font-weight: 650; font-size: 13px; padding: 0 6px; }
.imp-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; cursor: pointer; }
.imp-check input { margin-top: 2px; }
.imp-check small, .imp-field small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.imp-field { display: grid; gap: 4px; font-size: 13px; }
.imp-field > span { font-weight: 500; }
.imp-inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.imp-inline .control { width: 90px; }
.imp-inline select.control { width: auto; }
.imp-save { margin-top: 14px; display: flex; justify-content: flex-end; }
@media (max-width: 700px) { .imp-one { grid-template-columns: 1fr; } .imp-stores, .imp-pick summary { width: 100%; } }

.imp-colls select.control { height: 40px; border-radius: 8px; font-size: 13px; font-weight: 500; max-width: 260px; }
.imp-colls select.control.on { background-color: var(--ink); color: var(--panel); border-color: var(--ink); }
.imp-pager { margin-top: 14px; }

/* ------------------------------------------------ iPhone widget settings */
.wg-form { display: grid; gap: 10px; }
.wg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wg-lab { font-size: 13px; font-weight: 600; }
.wg-lab small { font-weight: 400; color: var(--muted); }
.wg-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.wg-pick { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.wg-pick.on { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.wg-pick em { font-style: normal; font-size: 11px; font-weight: 700; background: var(--panel); color: var(--ink); border-radius: 999px; width: 18px; height: 18px; display: inline-grid; place-items: center; }
.wg-btns { display: flex; justify-content: flex-end; gap: 8px; }
.wg-row { align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.wg-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.wg-chips i { font-style: normal; font-size: 11.5px; background: var(--line-soft); border-radius: 999px; padding: 2px 8px; }
.wg-rowbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.wg-row { flex-direction: column; }
.wg-row .group-name { width: 100%; min-width: 0; }
.wg-dlg { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; width: min(640px, calc(100% - 32px)); background: var(--panel); color: var(--ink); }
.wg-dlg::backdrop { background: rgba(15,23,42,.45); }
.wg-dlg h3 { margin: 0 0 6px; }
.wg-dlg textarea { width: 100%; height: 260px; font-family: ui-monospace, monospace; font-size: 11.5px; margin: 8px 0 12px; }
.mb-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.wg-steps { margin: 8px 0; padding-left: 20px; font-size: 13px; line-height: 1.6; }

/* ------------------------------------------------ Importer: product editor */
.imp-rowbtns { white-space: nowrap; }
.imp-rowbtns .btn + .btn { margin-left: 6px; }
.pe-loading { padding: 28px; text-align: center; color: var(--muted); }
.pe-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 14px; flex-wrap: wrap; position: sticky; top: 8px; z-index: 5; }
.pe-bartitle { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 0; }
.pe-bartitle b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.pe-barbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-activate { background: var(--up); border-color: var(--up); }
.pe-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pe-col { display: grid; gap: 14px; }
.pe-card { padding: 16px; display: grid; gap: 12px; }
.pe-cardhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pe-cardhead h3 { margin: 0; font-size: 14.5px; }
.pe-tools { display: flex; flex-wrap: wrap; gap: 4px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; padding: 5px; background: var(--line-soft); }
.pe-tools button { border: 0; background: none; padding: 4px 9px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--ink); }
.pe-tools button:hover, .pe-tools button.on { background: var(--panel); }
.pe-desc { min-height: 220px; max-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: 0 0 8px 8px; padding: 12px 14px; background: var(--panel); color: var(--ink); font-size: 14px; line-height: 1.55; outline: none; }
.pe-desc:focus { border-color: var(--ink); }
.pe-desc img { max-width: 100%; height: auto; }
.pe-desc h3 { font-size: 15px; margin: 12px 0 6px; }
.pe-htmlbox { min-height: 260px; font-family: ui-monospace, monospace; font-size: 12.5px; border-radius: 0 0 8px 8px; }
.pe-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pe-suggest { border: 1px solid var(--line); border-left: 3px solid var(--up); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; background: var(--tint); }
.pe-sgtitle { font-size: 15px; }
.pe-sgdesc { font-size: 13.5px; line-height: 1.5; max-height: 320px; overflow: auto; }
.pe-sgbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.pe-img { position: relative; margin: 0; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--line-soft); display: grid; place-items: center; }
.pe-img.main { grid-column: span 2; grid-row: span 2; }
.pe-img img { width: 100%; height: 100%; object-fit: cover; }
.pe-mainbadge { position: absolute; top: 6px; left: 6px; background: var(--ink); color: var(--panel); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.pe-imgbtns { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.pe-img:hover .pe-imgbtns, .pe-img:focus-within .pe-imgbtns { opacity: 1; }
.pe-imgbtns button { width: 28px; height: 28px; border-radius: 7px; border: 0; background: rgba(255,255,255,.95); color: #111; cursor: pointer; font-size: 13px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.pe-imgbtns button[data-del]:hover { background: #fee2e2; color: #b91c1c; }
.pe-drop { margin: 0; padding: 18px; }
.pe-urlrow { display: flex; gap: 6px; }
.pe-setall { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
.pe-variants { display: grid; gap: 4px; max-height: 460px; overflow: auto; }
.pe-vhead, .pe-vrow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: center; }
.pe-vhead { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pe-vname { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-vrow .control, .pe-setall .control { height: 34px; padding: 0 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.pe-scai { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.pe-scpick { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-scpick label { position: relative; cursor: pointer; }
.pe-scpick img { width: 58px; height: 58px; object-fit: cover; border-radius: 8px; border: 2px solid var(--line); display: block; }
.pe-scpick input { position: absolute; top: 4px; left: 4px; }
.pe-scpick input:checked + img { border-color: var(--up); }
.pe-chartlink { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.pe-scup { justify-content: center; cursor: pointer; }
.pe-scup.busy { opacity: .7; pointer-events: none; }
.pe-scdone { font-size: 13px; padding: 9px 12px; border-radius: 8px; background: var(--tint); color: var(--ink); }
.pe-scdone a { font-weight: 600; color: var(--up); }
@media (max-width: 900px) {
  .pe-grid { grid-template-columns: 1fr; }
  .pe-row3 { grid-template-columns: 1fr; }
  .pe-bar { position: static; }
}

/* ------------------------------------------------ Size Charts desk */
.sc-listhead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.sc-listhead .scm-searchbox { flex: 1 1 240px; }
.sc-listhead > select.control, .sc-edbar > select.control { width: auto; flex: 0 0 auto; height: 38px; min-width: 140px; }
.sc-edbar > .btn { flex: 0 0 auto; }
.sc-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.sc-danger { color: var(--down); }
.sc-table tbody tr { cursor: pointer; }
.sc-table tbody tr:hover { background: var(--line-soft); }
.sc-table th, .sc-table td { text-align: left; white-space: normal; }
.sc-chip { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--line-soft); margin: 1px 0; }
.sc-edbar { display: flex; gap: 8px; align-items: center; padding: 10px 12px; margin-bottom: 12px; flex-wrap: wrap; }
.sc-edbar #edName { flex: 1 1 260px; height: 38px; }
.sc-editor { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sc-left, .sc-right { padding: 14px; }
.sc-right { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.sc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: -4px -4px 12px; }
.sc-tabs button { font: inherit; font-size: 13px; border: 0; background: none; padding: 8px 12px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; }
.sc-tabs button.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.sc-add { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sc-block { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--panel); }
.sc-bhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; }
.sc-x { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 15px; padding: 2px 6px; border-radius: 6px; }
.sc-x:hover { background: var(--line-soft); color: var(--ink); }
.sc-tblbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.sc-small { height: 32px; font-size: 12.5px; flex: 1 1 180px; }
.sc-grid-wrap { overflow-x: auto; }
.sc-grid { border-collapse: collapse; }
.sc-grid th, .sc-grid td { padding: 2px; }
.sc-cell { width: 84px; height: 30px; border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; font: inherit; font-size: 13px; background: var(--panel); color: var(--ink); }
.sc-grid thead .sc-cell { font-weight: 600; background: var(--line-soft); }
.sc-grid tbody td:first-child .sc-cell { font-weight: 600; }
.sc-tblbtns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sc-text { width: 100%; font-family: ui-monospace, monospace; font-size: 12.5px; }
.sc-tabblock { border-left: 3px solid var(--line); padding-left: 10px; margin: 8px 0; }
.sc-sub { margin: 8px 0; }
.sc-rule { display: grid; grid-template-columns: 150px 140px 1fr auto; gap: 6px; align-items: start; margin-bottom: 8px; }
.sc-rule .control { height: 34px; font-size: 13px; width: 100%; }
.sc-ps { position: relative; display: block; }
.sc-psres { display: grid; gap: 2px; margin-top: 4px; max-height: 260px; overflow: auto; }
.sc-psres button { display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 5px 8px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--ink); }
.sc-psres button:hover { background: var(--line-soft); }
.sc-psres img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }
.sc-prevhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sc-units, .pdsc-units { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.sc-units button { border: 0; background: none; padding: 4px 12px; cursor: pointer; font: inherit; font-size: 12px; color: var(--ink); }
.sc-units button.on { background: var(--ink); color: var(--panel); }
.sc-preview { background: #fff; color: #111; border-radius: 10px; padding: 14px; border: 1px solid var(--line); }
.sc-preview .pdsc-title { text-align: center; font-size: 16px; margin: 4px 0 10px; }
.sc-preview .pdsc-label { font-weight: 600; margin: 10px 0 6px; }
.sc-preview .pdsc-scroll { overflow-x: auto; margin: 6px 0 10px; }
.sc-preview .pdsc-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.sc-preview .pdsc-table th, .sc-preview .pdsc-table td, .sc-preview .pdsc-text td, .sc-preview .pdsc-text th { border: 1px solid #e5e5e5; padding: 7px 8px; text-align: center; }
.sc-preview .pdsc-table thead th { background: #fafafa; }
.sc-preview .pdsc-text table { border-collapse: collapse; width: 100%; }
.sc-preview .pdsc-text { font-size: 13px; line-height: 1.5; }
.sc-preview .pdsc-img { text-align: center; } .sc-preview .pdsc-img img { max-width: 100%; }
.sc-preview .pdsc-hr { border: 0; border-top: 1px solid #eee; margin: 12px 0; }
.sc-preview .pdsc-tabs { display: flex; gap: 6px; margin: 6px 0 10px; }
.sc-preview .pdsc-tab { border: 1px solid #ddd; background: #fff; border-radius: 999px; padding: 4px 12px; cursor: pointer; font: inherit; font-size: 12.5px; color: #111; }
.sc-preview .pdsc-tab.on { background: #111; color: #fff; }
.sc-dlg { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; max-width: 560px; width: calc(100% - 32px); background: var(--panel); color: var(--ink); }
.sc-namecell { display: flex; align-items: center; gap: 10px; }
.sc-namecell .sub { display: block; }
.sc-ico { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--line-soft); color: var(--ink); }
.sc-ico-lg { width: 38px; height: 38px; }
.sc-ico-xl { width: 64px; height: 64px; border-radius: 14px; font-size: 26px; }
.sc-dlg-wide { max-width: 760px; }
.sc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; max-height: 62vh; overflow: auto; padding: 2px; }
.sc-tpl { display: grid; justify-items: center; gap: 4px; padding: 14px 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; text-align: center; transition: border-color .12s, transform .12s, box-shadow .12s; }
.sc-tpl:hover { border-color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow); }
.sc-tpl b { font-size: 13.5px; margin-top: 4px; }
.sc-tpl small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.sc-tpl-ai .sc-ico { background: var(--tint); color: var(--up); }
.sc-dlg::backdrop { background: rgba(15,23,42,.45); }
.sc-dlg h3 { margin: 0 0 6px; }
.sc-drop { display: grid; place-items: center; border: 2px dashed var(--line); border-radius: 12px; padding: 28px; margin: 12px 0; cursor: pointer; color: var(--muted); font-size: 13px; }
.sc-drop.on { border-color: var(--ink); color: var(--ink); }
.sc-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.sc-thumbs img { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.sc-dlgbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.sc-setnote { margin: 0 0 12px; }
.sc-settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.sc-set { padding: 14px; }
.sc-sethead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sc-sethead .sc-switch { margin-left: auto; }
.sc-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.sc-setgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; font-size: 12.5px; }
.sc-setgrid label { display: grid; gap: 3px; }
.sc-setgrid .control { height: 32px; font-size: 13px; }
.sc-setgrid input[type=color] { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: none; }
.sc-setfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
@media (max-width: 900px) { .sc-editor { grid-template-columns: 1fr; } .sc-right { position: static; max-height: none; } .sc-rule { grid-template-columns: 1fr 1fr; } }

:root[data-theme="dark"] {
  --bg: #0E1116; --panel: #161B22; --ink: #E6EDF3; --muted: #9BA5B4; --faint: #6E7A8A;
  --line: #2A3140; --line-soft: #1C222B; --up: #34D399; --down: #F87171; --accent: #10B981;
  --sales: #60A5FA; --spend: #94A3B8; --tint: #0F2A22;
  color-scheme: dark;
}
:root[data-theme="dark"] .drawer-scrim { background: rgba(0, 0, 0, .55); }
:root[data-theme="dark"] .pd-chat, :root[data-theme="dark"] .drawer-panel,
:root[data-theme="dark"] .section-menu { box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .pay-paypal { background: #FFC439; }
:root[data-theme="dark"] .pay-afterpay { background: #B2FCE4; }
:root[data-theme="dark"] .notice { background: var(--line-soft); color: var(--ink); }
:root[data-theme="dark"] .warn { background: rgba(245,158,11,.12); border-color: #5C4813; color: #FCD34D; }
:root[data-theme="dark"] img, :root[data-theme="dark"] .logo { filter: none; }
html { transition: background-color .2s ease; }
:root[data-theme="dark"] .btn:hover { background: var(--line-soft); }
:root[data-theme="dark"] .btn-primary { color: var(--bg); }
:root[data-theme="dark"] .btn-primary:hover { background: #CBD5E1; }
:root[data-theme="dark"] .btn-danger:hover { background: rgba(239,68,68,.15); }
:root[data-theme="dark"] .notice { background: rgba(239,68,68,.15); }
:root[data-theme="dark"] .notice.ok { color: #6EE7B7; }
:root[data-theme="dark"] .setup-mark { color: var(--bg); }
:root[data-theme="dark"] .brand-mark { color: var(--bg); }
:root[data-theme="dark"] .nav-item.on { color: #6EE7B7; }
:root[data-theme="dark"] .card.feature { border-color: #1F5F4A; }
:root[data-theme="dark"] .card.feature.loss { background: rgba(239,68,68,.15); border-color: #6B2A2A; }
:root[data-theme="dark"] .card-note .est { color: #FBBF24; }
:root[data-theme="dark"] .table tbody tr:hover { background: var(--line-soft); }
:root[data-theme="dark"] .warn { background: rgba(245,158,11,.12); color: #FCD34D; }
:root[data-theme="dark"] .warn-count { background: rgba(245,158,11,.3); }
:root[data-theme="dark"] .toast { color: var(--bg); }
:root[data-theme="dark"] .view-pick { color: #6EE7B7; border-color: #1F5F4A; }
:root[data-theme="dark"] .section-item.on strong { color: #6EE7B7; }
:root[data-theme="dark"] #storeTable tfoot td { background: var(--line-soft); }
:root[data-theme="dark"] .cog-tab.on { color: var(--bg); }
:root[data-theme="dark"] .src.invoice { background: rgba(16,185,129,.15); color: #34D399; }
:root[data-theme="dark"] .src.catalog { background: rgba(59,130,246,.16); color: #93C5FD; }
:root[data-theme="dark"] .src.estimate { background: rgba(245,158,11,.15); color: #FBBF24; }
:root[data-theme="dark"] .est { color: #FBBF24; }
:root[data-theme="dark"] .sub.flag { color: #FBBF24; }
:root[data-theme="dark"] .drop.over { background: rgba(59,130,246,.16); }
:root[data-theme="dark"] .src.ok { background: rgba(16,185,129,.15); color: #34D399; }
:root[data-theme="dark"] .src.new { background: rgba(59,130,246,.16); color: #93C5FD; }
:root[data-theme="dark"] .src.changed { background: rgba(245,158,11,.15); color: #FBBF24; }
:root[data-theme="dark"] .src.bad { background: rgba(239,68,68,.15); color: #FCA5A5; }
:root[data-theme="dark"] .inv-missing { background: rgba(59,130,246,.16); }
:root[data-theme="dark"] .card.available { border-color: #1F5F4A; }
:root[data-theme="dark"] .card.available.loss { background: rgba(239,68,68,.15); border-color: #6B2A2A; }
:root[data-theme="dark"] .mail-row.on { background: rgba(59,130,246,.16); }
:root[data-theme="dark"] .inbox-nav button.on { background: rgba(59,130,246,.16); color: #93C5FD; }
:root[data-theme="dark"] .tk-scm { background: rgba(59,130,246,.16); color: #93C5FD; }
:root[data-theme="dark"] .tk-cs { background: rgba(139,92,246,.18); color: #C4B5FD; }
:root[data-theme="dark"] .tk-inquiry { background: rgba(6,182,212,.16); color: #67E8F9; }
:root[data-theme="dark"] .tk-legal { background: rgba(239,68,68,.15); color: #FCA5A5; }
:root[data-theme="dark"] .tk-us { background: rgba(245,158,11,.15); color: #FBBF24; }
:root[data-theme="dark"] .tk-them { background: rgba(16,185,129,.15); color: #34D399; }
:root[data-theme="dark"] .tk-esc { background: rgba(239,68,68,.15); color: #FCA5A5; }
:root[data-theme="dark"] .tk-summary { background: var(--line-soft); }
:root[data-theme="dark"] .msg.out { background: var(--line-soft); }
:root[data-theme="dark"] .pay-card { background: rgba(99,102,241,.2); color: #A5B4FC; }
:root[data-theme="dark"] .qa.done { background: var(--line-soft); }
:root[data-theme="dark"] .pd-chat-btn { color: var(--bg); }
:root[data-theme="dark"] .pd-msg.user { background: rgba(59,130,246,.16); }

@media (max-width: 600px) {
  .pd-chat-btn { right: 12px; bottom: 12px; padding: 8px 13px; font-size: 13px; }
  .pd-chat { left: 8px; right: 8px; width: auto; bottom: 58px; height: min(60vh, 460px); border-radius: 14px; }
  .pd-chat-head { padding: 8px 12px; }
  .pd-chat-log { padding: 10px 12px; gap: 8px; }
  .pd-msg { font-size: 13px; max-width: 100%; }
  .pd-chat-form { padding: 8px; }
  .pd-chat-form textarea { font-size: 16px; }   /* stops iPhone zooming in */
}

.section-item.theme-toggle { width: 100%; border: 0; border-top: 1px solid var(--line); background: none;
  text-align: left; font: inherit; cursor: pointer; color: inherit; }

/* Settings: groups of expandable items with logos */
.set-group { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); margin: 22px 2px 8px; }
.set-group:first-child { margin-top: 10px; }
.block.set-item { padding: 0; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.block.set-item:last-child { border-bottom: 1px solid var(--line); }
.block.set-item.open { border-color: var(--faint); box-shadow: 0 4px 14px rgba(15, 23, 42, .06); }
.set-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0;
  background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.set-head:hover { background: var(--line-soft); }
.set-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--line-soft); color: var(--ink); }
.set-ico .logo { width: 20px; height: 20px; }
.set-txt { flex: 1; min-width: 0; }
.set-txt strong { display: block; font-size: 13.5px; }
.set-txt small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.set-chev { flex: none; font-size: 20px; color: var(--faint); transition: transform .25s ease; }
.set-item.open .set-chev { transform: rotate(90deg); }
.set-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.2, .8, .2, 1); }
.set-item.open .set-body { grid-template-rows: 1fr; }
.set-inner { overflow: hidden; min-height: 0; padding: 0 14px; opacity: 0; transition: opacity .2s ease, padding .3s ease; }
.set-item.open .set-inner { padding: 2px 14px 16px; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .set-body, .set-inner, .set-chev { transition: none; }
}

/* COG: price changes to decide */
.pc-table { table-layout: fixed; width: 100%; }
.pc-table td { vertical-align: middle; }
.pc-table th:nth-child(1), .pc-table td:nth-child(1) { width: 36%; }
.pc-table th:nth-child(2), .pc-table td:nth-child(2) { width: 10%; }
.pc-table th:nth-child(3), .pc-table td:nth-child(3) { width: 15%; }
.pc-table th:nth-child(4), .pc-table td:nth-child(4) { width: 14%; }
.pc-table th:nth-child(5), .pc-table td:nth-child(5) { width: 25%; }
.pc-table td.name { white-space: normal; line-height: 1.35; }
.pc-table td.name { display: table-cell; }
.pc-table td.name > :first-child, .pc-table td.name { overflow-wrap: anywhere; }
.pc-table td:nth-child(4) { white-space: normal; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.pc-table td:nth-child(2), .pc-table td:nth-child(3) { white-space: nowrap; }
.pc-table td.pc-btns { white-space: normal; }
.pc-table .pc-btns .btn { white-space: nowrap; }
.pc-dir { font-size: 11.5px; font-weight: 600; margin-left: 4px; }
.pc-dir.down { color: var(--up); }
.pc-dir.up { color: #B45309; }
td.pc-btns { display: table-cell; text-align: right; }
td.pc-btns .btn, td.pc-btns .pc-state { display: inline-block; margin: 2px 0 2px 4px; }
.pc-warn { background: #B45309; border-color: #B45309; }
.pc-state { font-size: 11.5px; font-weight: 600; color: #B45309; background: rgba(245,158,11,.12); border-radius: 999px; padding: 2px 8px; }
tr.pc-checking td { background: rgba(245,158,11,.05); }

/* Inbox: who's handling */
.tk-handler { background: rgba(124,58,237,.1); color: #6D28D9; }
[data-theme="dark"] .tk-handler { color: #C4B5FD; }
.tk-handler-box { display: grid; gap: 6px; font-size: 13px; margin-bottom: 6px; }
.tk-taken { font-size: 12.5px; padding: 8px 12px; border-radius: 8px; background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.25); margin: 0 0 10px; }

/* Chat: proposed actions need a click */
.pd-act { margin-top: 8px; border: 1px solid var(--line); border-left: 3px solid #B45309; border-radius: 10px; padding: 9px 11px;
  display: grid; gap: 4px; background: var(--panel); font-size: 12.5px; }
.pd-act span { color: var(--muted); }
.pd-act.done { border-left-color: var(--up); }
.pd-act em { font-style: normal; font-weight: 600; color: var(--ink); }
.pd-act-btns { display: flex; gap: 6px; margin-top: 4px; }
.pc-bulk { display: flex; gap: 6px; flex-wrap: wrap; }
.pc-tip { margin: -4px 0 8px; }

/* COG: invoice archive */
.arc-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 16px 12px; font-size: 12.5px; color: var(--muted); }
.arc-bar label { display: inline-flex; gap: 6px; align-items: center; }
.arc-bar .control { width: auto; height: 32px; font-size: 12.5px; }
.arc-month td { background: var(--line-soft); font-weight: 700; font-size: 12.5px; text-align: left !important; }

/* COG: AI double-check of invoices, bundle discount */
.inv-review { border: 1px solid var(--loss); border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; background: color-mix(in srgb, var(--loss) 5%, transparent); }
.inv-review .table td, .inv-review .table th { padding: 6px 8px; }
.inv-review-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.inv-ai { margin: 0 0 12px; }
.ai-ok { font-size: 11px; color: var(--profit); white-space: nowrap; }
.bundle-off { white-space: normal; font-size: 11px; }

/* COG: supplier accounts */
.sup-intro { margin: 0 0 14px; max-width: 760px; }
.sup-owed { text-align: right; }
.sup-owed b { display: block; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-size: 24px; }
.sup-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 12px; }
.sup-eq > div { display: flex; flex-direction: column; }
.sup-eq b { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-size: 17px; }
.sup-eq i { font-style: normal; color: var(--revenue); font-size: 18px; }
.sup-eq .sub { font-size: 11px; color: var(--revenue); }
.sup-open { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 10px 0; }
.sup-open label { display: flex; flex-direction: column; font-size: 12px; gap: 4px; }
.sup-change summary, .sup-late summary { cursor: pointer; margin: 6px 0; }
.sup-h { font-size: 13px; margin: 16px 0 6px; }
.sup-all { display: block; margin-top: 4px; }
.sup-card + .sup-card { margin-top: 16px; }

/* People: a level per desk */
.desk-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 14px; margin: 8px 0; }
.desk-levels label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.desk-levels select { width: 118px; }
.preset-picks { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 6px; }

/* Disputes desk */
.dsp-tabs b { font-weight: 600; margin-left: 4px; font-family: "IBM Plex Mono", monospace; }
.dsp-list tr.on td { background: color-mix(in srgb, var(--spend) 8%, transparent); }
.dsp-list .logo, .dsp-case h2 .logo { width: 16px; height: 16px; vertical-align: -3px; }
.dsp-stake { font-size: 20px; }
.dsp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 12px 0; }
@media (max-width: 860px) { .dsp-grid { grid-template-columns: 1fr; } }
.dsp-grid h3, .dsp-case h3 { font-size: 13px; margin: 12px 0 6px; }
.dsp-order, .dsp-parcel { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; }
.dsp-parcel a { margin-left: 6px; font-size: 12px; }
.dsp-scan { font-size: 12px; color: var(--revenue); margin-top: 2px; }
.dsp-msg { border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; font-size: 13px; border: 1px solid var(--rule); }
.dsp-msg.customer { background: color-mix(in srgb, var(--profit) 8%, transparent); }
.dsp-msg.paypal, .dsp-msg.bank { background: color-mix(in srgb, var(--spend) 8%, transparent); }
.dsp-msg .hint { margin-left: 6px; }
.dsp-ai { margin: 12px 0; }
.dsp-ai .notice { margin-top: 10px; }
.dsp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 12px 0; }
.dsp-form { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--rule); border-radius: 8px; padding: 12px; }
.dsp-form.danger { border-color: var(--loss); }
.dsp-form h4 { margin: 0; font-size: 14px; }
.dsp-form label { display: flex; flex-direction: column; gap: 4px; }
.dsp-form label:has(input[type=checkbox]) { flex-direction: row; align-items: center; }
.dsp-form textarea { width: 100%; font: inherit; }
.dsp-link { display: inline-flex; gap: 6px; margin-left: 8px; }
.dsp-log { font-size: 12px; margin: 3px 0; }
.dsp-prov { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 1px 8px 1px 5px;
  border-radius: 999px; border: 1px solid var(--rule); vertical-align: 2px; margin-right: 4px; }
.dsp-prov.paypal { color: #003087; } .dsp-prov.airwallex { color: #E0392F; }
html[data-theme="dark"] .dsp-prov.paypal { color: #8DB4FF; }
/* Text inside panels never touches the edge (tables bring their own spacing) */
.pc-tip, .sup-assign > .hint,
.sup-card > :not(.panel-head):not(.table-wrap),
.dsp-case > :not(.panel-head),
#invDetail > :not(.panel-head):not(.table-wrap) { margin-left: 16px; margin-right: 16px; }
.sup-card, .dsp-case, #invDetail { padding-bottom: 14px; }
.sup-card > .panel-head + *, .dsp-case > .panel-head + *, #invDetail > .panel-head + * { margin-top: 12px; }
.mb-ask { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Apps group in the menus */
.section-group { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 14px 2px; }
.pd-rail-group { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 14px 12px 4px; }
body.rail-slim .pd-rail-group { font-size: 0; padding: 6px 0 0; border-top: 1px solid var(--line); margin: 8px 10px 0; }

/* Session Recordings */
.rec-filters { margin: 14px 0 10px; }
.rec-cfg { margin: 0 16px 14px; }
.rec-cfg summary { cursor: pointer; padding: 10px 0; }
.rec-num { width: 76px; }
.rec-list tr.rec-seen td { opacity: .62; }
.rec-path { max-width: 340px; }
.rec-path b { font-weight: 600; word-break: break-all; }
.rec-modal { position: fixed; inset: 0; background: rgba(10, 12, 16, .55); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; }
.rec-box { background: var(--panel); border-radius: 12px; width: min(1180px, 100%); max-height: 96vh; overflow: auto; padding: 14px 16px; box-shadow: var(--shadow); }
.rec-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
#pMeta { margin-bottom: 10px; word-break: break-all; }
#pStage .rr-player { box-shadow: none; margin: 0 auto; }
.rec-guide summary { cursor: pointer; padding: 14px 16px; }
.rec-guide-body { padding: 0 16px 14px; max-width: 820px; font-size: 13.5px; line-height: 1.55; }
.rec-guide-body h3 { font-size: 13px; margin: 14px 0 4px; }
.rec-guide-body ul, .rec-guide-body ol { margin: 4px 0; padding-left: 20px; }
.rec-settings { margin-top: 14px; }

/* Apps → Google Ads */
.gd-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.gd-panel .panel-head { flex-wrap: wrap; gap: 10px; }
.gd-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gd-win { margin: 0; }
.gd-wrap { max-height: 72vh; overflow: auto; }
.gd-table th, .gd-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gd-table thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.gd-table .gd-stick { position: sticky; left: 0; z-index: 1; background: var(--panel); min-width: 260px; max-width: 320px; }
.gd-table thead .gd-stick { z-index: 3; }
.gd-prod { display: flex; align-items: center; gap: 10px; white-space: normal !important; }
.gd-prod img, .gd-noimg { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex: none; background: var(--line); }
.gd-prod span { font-size: 13px; line-height: 1.3; }
.gd-sort { cursor: pointer; user-select: none; }
.gd-sort.on { color: var(--ink); }
.gd-h4 { background: color-mix(in srgb, var(--profit) 26%, transparent); }
.gd-h3 { background: color-mix(in srgb, var(--profit) 12%, transparent); }
.gd-h2 { background: color-mix(in srgb, #E2A23B 22%, transparent); }
.gd-h1 { background: color-mix(in srgb, var(--loss) 18%, transparent); }
.gd-h0 { background: color-mix(in srgb, var(--loss) 10%, transparent); }
.gd-more { padding: 10px 16px; }
.gd-help { margin: 0 16px 14px; }
.gd-help summary { cursor: pointer; padding: 6px 0; }
.gd-help p { margin: 6px 0; max-width: 900px; }
.gd-vbox { width: min(1500px, 100%); }
.gd-vbox .cards { margin: 10px 0; }

/* Apps → Tracking: the wetracked.io report layout (pinned header + first column, sort, columns builder) */
.trk-page { max-width: none; }
.trk { display: flex; flex-direction: column; gap: 14px; --trk-rule: var(--line, #D6D3CB); --trk-head: color-mix(in srgb, var(--trk-rule) 22%, var(--panel)); --trk-line: color-mix(in srgb, var(--trk-rule) 70%, transparent); }
.trk-note { position: relative; display: flex; gap: 12px; align-items: flex-start; background: #FFF4E8; border-radius: 12px; padding: 14px 44px 14px 16px; color: #3D3A35; }
.trk-note h5 { margin: 0 0 3px; font-size: 14px; font-weight: 600; }
.trk-note p { margin: 0; font-size: 13px; line-height: 1.45; }
.trk-ic { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.6px solid #E07B1A; color: #E07B1A; font-size: 12px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.trk-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: #6B6760; }
html[data-theme="dark"] .trk-note { background: #3A2A18; color: #F3E6D6; }
html[data-theme="dark"] .trk-x { color: #D8CBB9; }

.trk-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--trk-rule); border-radius: 8px; background: var(--panel);
  color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 2px rgba(20, 24, 31, .05); }
.trk-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--trk-rule) 25%, var(--panel)); }
.trk-btn:disabled { opacity: .45; cursor: default; }
.trk-btn.trk-primary { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.trk-btn.trk-sm { height: 30px; min-width: 30px; justify-content: center; padding: 0 8px; font-size: 16px; }
.trk-chev { margin-left: 2px; color: var(--muted); font-size: 13px; line-height: 1; transform: translateY(-2px); }
.trk-store-btn { min-width: 240px; }
.trk-store-btn #storeName { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.trk-shop { width: 20px; height: 20px; border-radius: 5px; background: #5E8E3E; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.trk-cal, .trk-colic, .trk-rel, .trk-cur-ic { color: var(--muted); }
.trk-dd, .trk-store { position: relative; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trk-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 220px; max-height: 340px; overflow: auto; background: var(--panel);
  border: 1px solid var(--trk-rule); border-radius: 10px; padding: 5px; box-shadow: 0 10px 30px rgba(20, 24, 31, .14); display: flex; flex-direction: column; }
.trk-menu[hidden] { display: none; }
.trk-hours { min-width: 190px; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.trk-hours button { font-family: inherit; font-size: 13px; }
.trk-menu button { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 6px; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.trk-menu button:hover { background: color-mix(in srgb, var(--trk-rule) 30%, var(--panel)); }
.trk-menu button.on { font-weight: 600; background: color-mix(in srgb, var(--trk-rule) 40%, var(--panel)); }
.trk-input { height: 36px; border: 1px solid var(--trk-rule); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 13px; background: var(--panel); color: var(--ink); }
.trk-row2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trk-left, .trk-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trk-right { margin-left: auto; }
.trk-health { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.trk-dot { width: 8px; height: 8px; border-radius: 50%; background: #B9B6AE; display: inline-block; }
.trk-dot.on { background: var(--profit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--profit) 20%, transparent); }

/* Campaign / Adset / Ad segmented control */
.trk-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: color-mix(in srgb, var(--trk-rule) 45%, var(--panel)); }
.trk-seg label { cursor: pointer; }
.trk-seg input { position: absolute; opacity: 0; pointer-events: none; }
.trk-seg span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 7px; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.trk-seg input:checked + span { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(20, 24, 31, .12); }
.trk-seg input:focus-visible + span { outline: 2px solid var(--spend); }

/* select styled as a button: the real <select> sits invisibly on top */
.trk-sel { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--trk-rule); border-radius: 8px;
  background: var(--panel); font-size: 13.5px; font-weight: 500; white-space: nowrap; box-shadow: 0 1px 2px rgba(20, 24, 31, .05); cursor: pointer; }
.trk-sel select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: inherit; }
.trk-sel-sm { height: 30px; padding: 0 10px; margin-left: 6px; }

.trk-search { display: flex; align-items: center; gap: 8px; height: 38px; width: 330px; max-width: 100%; padding: 0 12px; border: 1px solid var(--trk-rule); border-radius: 8px; background: var(--panel); }
.trk-search span { color: var(--muted); font-size: 16px; }
.trk-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink); }
.trk-spendnote { margin: -6px 0 0; }
.trk-spendnote:empty { display: none; }

/* the grid: separate header / body / totals tables kept in step sideways; the header pins to the top of the window */
.trk-grid { border: 1px solid var(--trk-rule); border-radius: 12px; background: var(--panel); position: relative; }
.trk-head { position: sticky; top: 0; z-index: 6; background: var(--trk-head); border-radius: 12px 12px 0 0; border-bottom: 1px solid var(--trk-line); }
.trk-sx { overflow-x: auto; scrollbar-width: none; }
.trk-sx::-webkit-scrollbar { display: none; }
.trk-t { table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.trk-t th, .trk-t td { padding: 0; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--trk-line); background: var(--panel); }
.trk-t .trk-cell { display: flex; align-items: center; gap: 10px; padding: 0 16px; min-width: 0; overflow: hidden; }
.trk-t td .trk-cell { height: 52px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trk-t td em { font-style: normal; color: var(--faint, var(--muted)); }
#tHead th { position: relative; height: 64px; background: var(--trk-head); border-bottom: 0; font-weight: 500; color: var(--ink); }
#tHead th .trk-cell { padding-right: 40px; white-space: normal; line-height: 1.3; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#tHead th.trk-pin .trk-cell { display: flex; }
#tHead th + th { border-left: 1px solid var(--trk-line); }
#tBody th { font-weight: 500; }
#tBody tbody tr:last-child > * { border-bottom: 0; }
#tBody tbody tr:hover > * { background: color-mix(in srgb, var(--trk-rule) 14%, var(--panel)); }
#tBody tbody tr.on > * { background: color-mix(in srgb, var(--spend) 6%, var(--panel)); }
.trk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font-size: 13.5px; }
.trk-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.trk-footrow { border-top: 1px solid var(--trk-line); }
#tFoot th, #tFoot td { background: var(--trk-head); border-bottom: 0; }
#tFoot th .trk-cell { height: 52px; font-weight: 500; color: var(--muted); font-size: 13px; }
.trk-empty { text-align: center; color: var(--muted); padding: 34px 16px !important; }

/* pinned first column + its shadow once the table is scrolled sideways */
.trk-pin { position: sticky !important; left: 0; z-index: 2; }
.trk-pin::after { content: ""; position: absolute; top: 0; right: -14px; bottom: 0; width: 14px; pointer-events: none; opacity: 0; transition: opacity .15s;
  background: linear-gradient(90deg, rgba(20, 24, 31, .09), transparent); }
.trk-grid.scrolled .trk-pin::after { opacity: 1; }
.trk-pin { border-right: 1px solid var(--trk-line); }

/* sort chevrons in every header */
.trk-sortb { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 6px;
  background: none; cursor: pointer; color: var(--muted); padding: 0; }
.trk-sortb:hover { background: color-mix(in srgb, var(--trk-rule) 45%, transparent); color: var(--ink); }
.trk-sortb svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.trk-sortb[data-dir="desc"] .up, .trk-sortb[data-dir="asc"] .dn { opacity: .25; }
.trk-sortb[data-dir="desc"], .trk-sortb[data-dir="asc"] { color: var(--ink); }

/* row checkboxes */
.trk-cb { position: relative; flex: none; width: 18px; height: 18px; cursor: pointer; }
.trk-cb input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.trk-cb i { position: absolute; inset: 0; border: 1.5px solid #B9B6AE; border-radius: 5px; background: var(--panel); pointer-events: none; }
.trk-cb input:checked + i { background: var(--ink); border-color: var(--ink); }
.trk-cb input:checked + i::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px; border: solid var(--panel); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.trk-cb input:focus-visible + i { outline: 2px solid var(--spend); outline-offset: 1px; }

/* the sideways scrollbar, pinned to the bottom of the window while the table is in view */
.trk-bar-x { position: sticky; bottom: 0; z-index: 5; overflow-x: auto; overflow-y: hidden; height: 14px; background: var(--trk-head); border-top: 1px solid var(--trk-line); }
.trk-bar-x[hidden] { display: none; }
.trk-bar-x > div { height: 1px; }
.trk-bar-x::-webkit-scrollbar { height: 10px; }
.trk-bar-x::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 28%, transparent); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
.trk-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--trk-line); font-size: 13px; color: var(--muted);
  background: var(--panel); border-radius: 0 0 12px 12px; }
.trk-pager label { display: inline-flex; align-items: center; }
.trk-pager #pager { display: inline-flex; align-items: center; gap: 10px; }
.trk-pager b { color: var(--ink); font-weight: 600; font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* Columns builder */
.trk-cols { width: min(560px, 100%); padding: 18px 20px; }
.trk-cols .rec-head { justify-content: flex-start; margin-bottom: 10px; }
.trk-cols .rec-head b { font-size: 16px; }
.trk-cols .rec-head .trk-x { position: static; margin-left: auto; }
.trk-cnt { font-size: 12px; color: var(--muted); background: color-mix(in srgb, var(--trk-rule) 40%, var(--panel)); border-radius: 20px; padding: 2px 9px; }
.trk-cols h4 { margin: 6px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.trk-cols .hint { margin: 0 0 10px; }
#colsList { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow: auto; }
.trk-colrow { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--trk-rule); border-radius: 9px; background: var(--panel); }
.trk-colrow:not(.on) .trk-coln { opacity: .6; }
.trk-grip { flex: none; padding: 6px 4px; margin: -6px 0; color: var(--muted); font-size: 14px; letter-spacing: -3px; line-height: 1; cursor: grab; touch-action: none; user-select: none; }
.trk-grip:hover { color: var(--ink); }
.trk-colrow.drag { box-shadow: 0 8px 22px rgba(20, 24, 31, .16); border-color: var(--ink); position: relative; z-index: 1; }
.trk-colrow.drag .trk-grip { cursor: grabbing; }
.trk-coln { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.trk-coln b { font-size: 13.5px; font-weight: 600; }
.trk-coln small { font-size: 12px; color: var(--muted); }
.trk-tog { position: relative; width: 36px; height: 20px; flex: none; cursor: pointer; }
.trk-tog input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.trk-tog i { position: absolute; inset: 0; border-radius: 20px; background: #CFCBC2; transition: background .15s; pointer-events: none; }
.trk-tog i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.trk-tog input:checked + i { background: var(--ink); }
.trk-tog input:checked + i::after { transform: translateX(16px); }
.trk-cols-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--trk-rule); }
.trk-cols-foot > span { display: flex; gap: 8px; }
.trk-link { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* setup panel + event drill-down */
.trk-pad { padding: 0 16px; }
.trk-setup .table-wrap { margin: 0 0 12px; }
.trk-in { width: 170px; }
.trk-evbox { width: min(1400px, 100%); }
.trk-sx-plain { overflow-x: auto; }
.trk-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.trk-table th, .trk-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--trk-rule); white-space: nowrap; }
.trk-table thead th { background: var(--trk-head, var(--panel)); font-weight: 500; position: sticky; top: 0; }
.trk-ev { min-width: 1000px; }
.trk-ev td { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.trk-path { color: var(--muted); }

@media (max-width: 720px) {
  .trk-row2 { align-items: stretch; }
  .trk-right, .trk-health { margin-left: 0; }
  .trk-store-btn { min-width: 0; width: 100%; }
  .trk-search { width: 100%; }
}
.gd-dates { display: inline-flex; align-items: center; gap: 6px; }
.gd-dates input { width: auto; }

/* Apps → Google Ads, pythago.io layout (gx-) */
.gx-page { max-width: none; --gx-purple: #6D28D9; --gx-purple-soft: #EDE9FE; --gx-line: var(--line, #E7EAEF); --gx-card: var(--panel, #fff); --gx-muted: var(--muted, #64748B); }
.gx { gap: 16px; }
.gx-muted { color: var(--gx-muted); font-size: 12.5px; }
.gx-card { background: var(--gx-card); border: 1px solid var(--gx-line); border-radius: 14px; padding: 14px 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.gx-tabs { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--gx-purple-soft); gap: 2px; }
.gx-tabs button { border: 0; background: none; padding: 7px 14px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--gx-purple); cursor: pointer; }
.gx-tabs button.on { background: var(--gx-purple); color: #fff; }
.gx-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gx-frow + .gx-frow { margin-top: 12px; }
.gx-frow2 { padding-top: 12px; border-top: 1px solid var(--gx-line); }
.gx-search { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid var(--gx-line); border-radius: 9px; min-width: 240px; background: var(--gx-card); }
.gx-search span { color: var(--gx-muted); }
.gx-search input { border: 0; outline: 0; background: none; font: inherit; font-size: 13px; flex: 1; min-width: 0; color: var(--ink); }
.gx-f { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gx-muted); white-space: nowrap; }
.gx-f input, .gx-f select, .gx-sel, .gx-dates input, .gx-cmpbar input[type=date], .gx-in {
  height: 34px; border: 1px solid var(--gx-line); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 13px; background: var(--gx-card); color: var(--ink); }
.gx-f input { width: 72px; }
.gx-btn { height: 34px; padding: 0 12px; border: 1px solid var(--gx-line); border-radius: 8px; background: var(--gx-card); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--ink); white-space: nowrap; }
.gx-btn:hover, .gx-icon:hover { border-color: var(--gx-purple); color: var(--gx-purple); }
.gx-icon { width: 34px; height: 34px; border: 1px solid var(--gx-line); border-radius: 8px; background: var(--gx-card); cursor: pointer; font-size: 15px; color: var(--ink); }
.gx-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--gx-purple); text-decoration: underline; cursor: pointer; }
.gx-go { height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--gx-purple); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.gx-go:disabled { opacity: .5; }
.gx-perf { font-size: 13px; color: var(--gx-muted); }
.gx-perf b { color: var(--ink); font-weight: 600; }
.gx-sync { margin-left: auto; font-size: 12.5px; color: var(--gx-muted); }
.gx-dates { display: inline-flex; align-items: center; gap: 6px; }
.gx-dd { position: relative; display: inline-block; }
.gx-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; max-height: 380px; overflow: auto; background: var(--gx-card); border: 1px solid var(--gx-line);
  border-radius: 10px; padding: 6px; box-shadow: 0 12px 32px rgba(15, 23, 42, .14); display: flex; flex-direction: column; }
.gx-menu[hidden] { display: none; }
.gx-tagmenu { left: 0; right: auto; }
.gx-menu button, .gx-menu label { display: flex; align-items: center; gap: 8px; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 7px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.gx-menu button:hover, .gx-menu label:hover { background: var(--gx-purple-soft); }
.gx-menu hr { border: 0; border-top: 1px solid var(--gx-line); margin: 4px 0; width: 100%; }
.gx-mh { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--gx-muted); padding: 6px 10px 2px; }
.gx-mi { padding: 6px 10px; }
.gx-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.gx-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); white-space: nowrap; }

.gx-cards { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.gx-c { background: var(--gx-card); border: 1px solid var(--gx-line); border-radius: 14px; padding: 16px 12px; text-align: center; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.gx-cv { font-size: 22px; font-weight: 700; font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.gx-cl { margin-top: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--gx-muted); line-height: 1.35; }
.gx-pos { color: #059669 !important; }
.gx-negc { color: #DC2626 !important; }
.gx-neg { color: #DC2626; }
.gx-note { margin: -6px 2px 0; font-size: 12.5px; color: var(--gx-muted); }
.gx-note:empty { display: none; }

.gx-tablecard { padding: 0; overflow: hidden; }
.gx-thead { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.gx-thead h2 { margin: 0; font-size: 17px; }
.gx-thead p { margin: 2px 0 0; }
.gx-tright { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.gx-wrap { overflow: auto; max-height: 72vh; border-top: 1px solid var(--gx-line); }
.gx-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 13px; }
.gx-table th { position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--gx-line) 35%, var(--gx-card)); text-align: left; padding: 11px 12px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--gx-muted); white-space: nowrap; border-bottom: 1px solid var(--gx-line); }
.gx-table td { padding: 10px 12px; border-bottom: 1px solid var(--gx-line); white-space: nowrap; background: var(--gx-card);
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.gx-table tbody tr:hover td { background: color-mix(in srgb, var(--gx-purple-soft) 45%, var(--gx-card)); }
.gx-table tbody tr.on td { background: color-mix(in srgb, var(--gx-purple-soft) 70%, var(--gx-card)); }
.gx-sort { cursor: pointer; user-select: none; }
.gx-sort i { font-style: normal; opacity: .45; margin-left: 2px; }
.gx-sort.on { color: var(--gx-purple); }
.gx-sort.on i { opacity: 1; }
/* pinned left columns: tick, product, status, variants */
.gx-table .gx-pin { position: sticky; z-index: 1; }
.gx-table th.gx-pin { z-index: 3; }
.gx-cb { left: 0; width: 40px; min-width: 40px; text-align: center; }
.gx-prod.gx-pin, .gx-prodh.gx-pin { left: 40px; width: 300px; min-width: 300px; max-width: 300px; }
.gx-st { left: 340px; width: 92px; min-width: 92px; }
.gx-vr { left: 432px; width: 86px; min-width: 86px; box-shadow: 6px 0 8px -6px rgba(15, 23, 42, .15); }
.gx-prod { display: table-cell; font-family: inherit !important; }
.gx-prod img, .gx-noimg { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; float: left; margin-right: 10px; background: var(--gx-line); }
.gx-pt { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }
.gx-pn { font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-pn a { color: var(--ink); text-decoration: none; }
.gx-pn a:hover { color: var(--gx-purple); }
.gx-ps { display: flex; gap: 4px; flex-wrap: wrap; font-family: Inter, system-ui, sans-serif; }
.gx-status { display: inline-block; padding: 3px 9px; border-radius: 6px; font-family: Inter, system-ui, sans-serif; font-size: 11.5px; font-weight: 600; background: #F1F5F9; color: #475569; }
.gx-status.active { background: #DCFCE7; color: #15803D; }
.gx-status.draft { background: #FEF3C7; color: #B45309; }
.gx-status.archived { background: #F1F5F9; color: #64748B; }
.gx-vbtn, .gx-vtag { border: 1px solid #DDD6FE; background: var(--gx-purple-soft); color: var(--gx-purple); border-radius: 7px; padding: 3px 8px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; font-family: Inter, system-ui, sans-serif; }
.gx-purple { color: var(--gx-purple); font-weight: 600; }
.gx-green { color: #059669; }
.gx-posc { color: #059669; font-weight: 600; }
.gx-subn { display: block; font-size: 10.5px; color: #DC2626; }
.gx-empty { text-align: center; padding: 30px !important; font-family: inherit !important; }
/* ROAS heat cells (bands against each product's breakeven ROAS) */
.gx-hc { text-align: center; font-weight: 600; }
td.gx-h4 { background: #D1FAE5 !important; color: #047857; }
td.gx-h3 { background: #ECFDF5 !important; color: #059669; }
td.gx-h2 { background: #FEF9C3 !important; color: #A16207; }
td.gx-h1 { background: #FEE2E2 !important; color: #B91C1C; }
td.gx-h0 { background: #F1F5F9 !important; }
html[data-theme="dark"] td.gx-h4 { background: #064E3B !important; color: #A7F3D0; }
html[data-theme="dark"] td.gx-h3 { background: #053B2E !important; color: #6EE7B7; }
html[data-theme="dark"] td.gx-h2 { background: #422006 !important; color: #FDE68A; }
html[data-theme="dark"] td.gx-h1 { background: #450A0A !important; color: #FCA5A5; }
.gx-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; flex-wrap: wrap; }
.gx-pager select { height: 30px; border: 1px solid var(--gx-line); border-radius: 7px; background: var(--gx-card); color: var(--ink); }
#pages, #cpages { display: flex; gap: 6px; align-items: center; }
.gx-pg { min-width: 34px; height: 32px; padding: 0 10px; border: 1px solid var(--gx-line); border-radius: 8px; background: var(--gx-card); font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.gx-pg.on { background: var(--gx-purple); border-color: var(--gx-purple); color: #fff; }
.gx-pg:disabled { opacity: .45; cursor: default; }
.gx-fullscreen { position: fixed; inset: 10px; z-index: 70; display: flex; flex-direction: column; }
.gx-fullscreen .gx-wrap { max-height: none; flex: 1; }
body.gx-noscroll { overflow: hidden; }
.gx-help { margin-top: 4px; }

/* variant breakdown + tag / column windows */
.gx-vbox { width: min(1500px, 100%); padding: 22px 26px; }
.gx-tbox { width: min(480px, 100%); padding: 20px 22px; }
.gx-vhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.gx-vhead h2 { margin: 0; font-size: 20px; }
.gx-x { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--gx-muted); }
.gx-vcards { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.gx-vcards .gx-cv { font-size: 18px; }
.gx-vbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.gx-vbar h3 { margin: 0; font-size: 16px; }
.gx-seg { display: inline-flex; gap: 6px; }
.gx-seg button { border: 1px solid var(--gx-line); background: var(--gx-card); padding: 7px 14px; border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.gx-seg button.on { background: var(--gx-purple); border-color: var(--gx-purple); color: #fff; }
.gx-vtable .gx-prod img { width: 34px; height: 34px; }
.gx-vfoot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 14px; }
.gx-vfoot .gx-link { margin-right: auto; }
.gx-trow { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--gx-line); }
.gx-trow .gx-link { margin-left: auto; }
.gx-emptytags { text-align: center; padding: 26px 0 10px; }
.gx-in { flex: 1; min-width: 0; }
input[type=color]#tColor { width: 38px; height: 34px; border: 1px solid var(--gx-line); border-radius: 8px; padding: 2px; background: var(--gx-card); }
#tList { margin-top: 12px; }
.gx-clist { display: grid; grid-template-columns: 1fr; gap: 4px; max-height: 55vh; overflow: auto; margin-top: 8px; }
.gx-clist label { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 4px 0; }

/* compare */
.gx-banner { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1D4ED8; border-radius: 12px; padding: 12px 16px; font-size: 13px; }
html[data-theme="dark"] .gx-banner { background: #172554; border-color: #1E3A8A; color: #BFDBFE; }
.gx-cmpbar { display: flex; flex-direction: column; gap: 0; }
.gx-cmphead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--gx-line); font-size: 14px; }
.gx-p { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 700; font-family: Inter, system-ui, sans-serif; }
.gx-p.p1 { background: #DBEAFE; color: #1D4ED8; }
.gx-p.p2 { background: #EDE9FE; color: #6D28D9; }
.gx-chip { border: 1px solid var(--gx-line); background: var(--gx-card); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink); }
.gx-chip:hover { border-color: var(--gx-purple); color: var(--gx-purple); }
.gx-ccards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.gx-cc { text-align: left; padding: 14px 14px 12px; }
.gx-cc .gx-cl { margin: 0 0 8px; }
.gx-crow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.gx-crow b { font-size: 18px; }
.gx-d { display: block; text-align: center; margin-top: 6px; padding: 6px; border-radius: 8px; font-size: 12px; font-weight: 700; background: #F1F5F9; color: #475569; }
.gx-dg { background: #D1FAE5; color: #047857; }
.gx-db { background: #FEE2E2; color: #B91C1C; }
.gx-dn { background: #F1F5F9; color: #475569; }
.gx-ctable th.gx-grp { text-align: center; color: var(--ink); border-left: 1px solid var(--gx-line); }
.gx-ctable thead tr:nth-child(2) th { top: 37px; text-align: center; }
.gx-ctable td.gx-prod { min-width: 300px; max-width: 340px; }
.gx-dc { font-weight: 600; text-align: center; }
td.gx-dcg { background: #ECFDF5 !important; color: #047857; }
td.gx-dcb { background: #FEF2F2 !important; color: #B91C1C; }
td.gx-dcn { color: var(--gx-muted); }

@media (max-width: 1300px) { .gx-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gx-ccards { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gx-vcards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .gx-cards, .gx-ccards, .gx-vcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-prod.gx-pin, .gx-prodh.gx-pin { width: 170px; min-width: 170px; max-width: 170px; }
  .gx-st, .gx-vr { position: static !important; box-shadow: none; }
  .gx-search { min-width: 0; width: 100%; }
  .gx-sync { margin-left: 0; }
}
.gx-ico { width: 14px; height: 14px; vertical-align: -3px; margin-right: 5px; flex: none; }

/* Google Ads → Manage (ads AI) */
.gx-mg { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
.gx-mgmain { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.gx-mgrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.gx-mgnote { margin: 10px 0 0; }
.gx-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.gx-switch input { position: absolute; opacity: 0; }
.gx-switch i { width: 38px; height: 22px; border-radius: 20px; background: #CBD5E1; position: relative; transition: background .15s; flex: none; }
.gx-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.gx-switch input:checked + i { background: var(--gx-purple); }
.gx-switch input:checked + i::after { transform: translateX(16px); }
.gx-np { padding: 0 0 10px; }
.gx-pad { padding: 10px 2px; margin: 0; }
.gx-cname b { display: block; font-family: Inter, system-ui, sans-serif; font-size: 13px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.gx-cname span { font-size: 11px; }
.gx-pls { white-space: normal !important; max-width: 280px; }
.gx-pl { display: inline-block; margin: 1px 4px 1px 0; padding: 2px 7px; border-radius: 6px; font-family: Inter, system-ui, sans-serif; font-size: 11px; background: #F1F5F9; color: #475569; }
.gx-pl.only { background: var(--gx-purple-soft); color: var(--gx-purple); }
.gx-pl.except { background: #FEF3C7; color: #92400E; }
.gx-pl.custom { background: #E2E8F0; color: #64748B; }
.gx-cact { white-space: nowrap; }
.gx-sm { height: 28px; padding: 0 9px; font-size: 12px; }
.gx-plan { border: 1px solid var(--gx-line); border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: color-mix(in srgb, var(--gx-purple-soft) 30%, var(--gx-card)); font-family: Inter, system-ui, sans-serif; }
.gx-planh { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.gx-plan ol { margin: 8px 0 0; padding-left: 20px; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.gx-plan p { margin: 6px 0; font-size: 13px; }
.gx-planb { display: flex; gap: 8px; margin-top: 10px; }
.gx-err { color: #B91C1C; font-size: 12px; margin-top: 3px; white-space: normal; }
.gx-det summary { cursor: pointer; font-size: 12px; color: var(--gx-purple); margin-top: 3px; }
.gx-det table { font-size: 12px; margin-top: 4px; border-collapse: collapse; }
.gx-det td { padding: 2px 10px 2px 0; }
.gx-rule { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--gx-line); }
.gx-rule.on .gx-rtext b { color: var(--gx-purple); }
.gx-rtext { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 13px; min-width: 0; }
.gx-rbtn { display: flex; gap: 8px; align-items: center; }
.gx-log td { font-family: Inter, system-ui, sans-serif; font-size: 12.5px; }
.gx-wrapcell { white-space: normal !important; max-width: 520px; }
.gx-chat { position: sticky; top: 12px; display: flex; flex-direction: column; height: calc(100vh - 40px); padding: 0; overflow: hidden; }
.gx-chathead { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--gx-line); }
.gx-chathead b { color: var(--gx-purple); font-size: 15px; }
.gx-msgs { flex: 1; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.gx-msg { max-width: 92%; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; }
.gx-msg.me { align-self: flex-end; background: var(--gx-purple); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.gx-msg.me span { display: block; font-size: 10.5px; opacity: .7; margin-top: 4px; }
.gx-msg.ai { align-self: flex-start; background: color-mix(in srgb, var(--gx-line) 45%, var(--gx-card)); border-bottom-left-radius: 4px; }
.gx-think { color: var(--gx-muted); font-style: italic; }
.gx-mdt { border-collapse: collapse; margin: 6px 0; font-size: 12px; }
.gx-mdt th, .gx-mdt td { border: 1px solid var(--gx-line); padding: 3px 6px; text-align: left; }
.gx-chatin { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--gx-line); align-items: flex-end; }
.gx-chatin textarea { flex: 1; resize: vertical; min-height: 60px; border: 1px solid var(--gx-line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; background: var(--gx-card); color: var(--ink); }
@media (max-width: 1100px) { .gx-mg { grid-template-columns: 1fr; } .gx-chat { position: static; height: 620px; } }
.gpl { margin: 12px 16px 0; padding: 12px 14px; border-radius: 10px; background: #EEF2FF; border: 1px solid #C7D2FE; font-size: 13px; }
.gpl ol { margin: 8px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.gours { margin: 12px 16px 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line, #E7EAEF); font-size: 13px; }
.gours-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gours-h > span:last-child { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.trk-gsw { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.gstats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0; font-size: 12.5px; }
.gours .neg, .gstats .neg { color: #B91C1C; }
html[data-theme="dark"] .gpl { background: #1E1B4B; border-color: #3730A3; }
.pd-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #DC2626; color: #fff; font-size: 11px; font-weight: 700; }
.wa-person { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; align-items: center; }
.wa-person .wa-phone { flex: 1 1 220px; min-width: 200px; width: auto; }
.wa-person .wa-email { flex: 1 1 180px; width: auto; min-width: 160px; }
.wa-h { margin: 14px 0 2px; }
.wa-btns { display: flex; gap: 8px; margin-top: 12px; }

/* Checkout desk */
.co-panel { margin-bottom: 18px; }
.co-form { display: grid; gap: 10px; padding: 12px 0; max-width: 820px; }
.co-form label { display: grid; gap: 4px; font-size: 13px; }
.co-form textarea { font: inherit; }
.co-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; }
.co-check { display: flex !important; gap: 8px; align-items: center; }
.co-check input { width: auto; }
.co-found { display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.co-pick { display: flex; gap: 10px; align-items: center; text-align: left; padding: 6px 8px; border: 1px solid var(--line, #D6D3CB);
  border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.co-pick img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.co-pick small { display: block; opacity: 0.7; }
#keysBox summary { cursor: pointer; padding: 6px 0; }