/* ============================================================
   Catalogs PIM — redesign
   ============================================================ */
@import url('./tokens.css');

* { box-sizing: border-box; }
html, body, #root {
  margin: 0;
  height: 100%;
  background: var(--cat-paper);
  font-family: var(--font-body);
  color: var(--fg-2);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  font-variation-settings: 'wght' 450, 'opsz' 14;
}
button { font-family: inherit; }
::selection { background: var(--cat-orange-100); color: var(--cat-ink-900); }

/* ----- Theming variables (light/dark sidebar, accent swap) ----- */
:root {
  --rail-bg: #1a1a1c;
  --rail-fg: #b8b8bd;
  --rail-fg-strong: #fff;
  --rail-active-bg: rgba(245,134,52,.16);
  --rail-active-fg: var(--cat-orange);
  --rail-divider: #2a2a2e;

  --panel-bg: #fafafa;
  --panel-fg: var(--cat-ink-900);
  --panel-fg-2: var(--cat-ink);
  --panel-fg-3: var(--cat-muted);
  --panel-divider: var(--cat-border);
  --panel-hover: #f1f1f2;
  --panel-active: var(--cat-orange-50);

  --accent: var(--cat-orange);
  --accent-hover: var(--cat-orange-600);
  --accent-press: var(--cat-orange-700);
  --accent-soft: var(--cat-orange-50);
  --accent-soft-strong: var(--cat-orange-100);
  --accent-tint: rgba(245,134,52,.18);

  /* Neutral surface aliases used across components */
  --cat-bg: var(--cat-paper);
  --cat-bg-2: var(--cat-surface-alt);
}
[data-rail="light"] {
  --rail-bg: #fff;
  --rail-fg: var(--cat-ink);
  --rail-fg-strong: var(--cat-ink-900);
  --rail-active-bg: var(--cat-orange-50);
  --rail-active-fg: var(--cat-orange);
  --rail-divider: var(--cat-border);
}

/* Accent swatches */
[data-accent="indigo"] { --accent:#5b6cff; --accent-hover:#4a5beb; --accent-press:#3a48c2; --accent-soft:#eef0ff; --accent-soft-strong:#dfe4ff; --accent-tint:rgba(91,108,255,.20); --rail-active-bg:rgba(91,108,255,.16); --rail-active-fg:#7d8aff; }
[data-accent="emerald"] { --accent:#10a371; --accent-hover:#0d8a5f; --accent-press:#0a6b4a; --accent-soft:#e6f6ef; --accent-soft-strong:#c8eadb; --accent-tint:rgba(16,163,113,.22); --rail-active-bg:rgba(16,163,113,.18); --rail-active-fg:#3fc991; }
[data-accent="cobalt"] { --accent:#1e6fdb; --accent-hover:#185fc0; --accent-press:#134a99; --accent-soft:#e7f0fb; --accent-soft-strong:#cde0f7; --accent-tint:rgba(30,111,219,.22); --rail-active-bg:rgba(30,111,219,.18); --rail-active-fg:#5b96e8; }

/* ============================================================
   DARK THEME — flip the core neutral tokens
   ============================================================ */
[data-theme="dark"] {
  /* Neutrals — invert the lightness ramp */
  --cat-white:          #1a1a1c;   /* was #fff — now darkest "card" */
  --cat-paper:          #141416;   /* page background */
  --cat-surface:        #1a1a1c;   /* card surface */
  --cat-surface-alt:    #232327;   /* alt surface (inputs, hovers) */
  --cat-border:         #2e2e33;
  --cat-border-strong:  #3d3d44;
  --cat-bg-2:           #202024;   /* internal "soft" backgrounds */
  --cat-bg:             #141416;   /* page-level dark base */

  /* Text — invert the ink ramp */
  --cat-ink:            #c5c5c8;   /* body fg */
  --cat-ink-900:        #f4f4f5;   /* headings */
  --cat-ink-700:        #d4d4d6;
  --cat-muted:          #87878c;
  --cat-muted-2:        #6d6d72;

  /* Brand orange tints need a dark base — soft is now a glow */
  --cat-orange-50:      rgba(245,134,52,.12);
  --cat-orange-100:     rgba(245,134,52,.22);

  /* Semantic aliases */
  --fg-1: var(--cat-ink-900);
  --fg-2: var(--cat-ink);
  --fg-3: var(--cat-muted);
  --bg-1: var(--cat-surface);
  --bg-2: var(--cat-paper);
  --bg-3: var(--cat-surface-alt);
  --border-1: var(--cat-border);
  --border-2: var(--cat-border-strong);

  /* Panel (secondary nav) */
  --panel-bg: #18181a;
  --panel-fg: var(--cat-ink-900);
  --panel-fg-2: var(--cat-ink);
  --panel-fg-3: var(--cat-muted);
  --panel-divider: var(--cat-border);
  --panel-hover: #232327;

  /* Shadows — softer in dark */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3);
  --shadow-2: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
  --shadow-3: 0 16px 32px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.4);
}

/* Dark theme: rail stays dark even when rail_theme="light" tries to whiten it */
[data-theme="dark"][data-rail="light"] {
  --rail-bg: #1a1a1c;
  --rail-fg: var(--cat-ink);
  --rail-fg-strong: var(--cat-ink-900);
  --rail-divider: var(--cat-border);
}

/* Dark theme — accent danger/success need to glow against dark */
[data-theme="dark"] {
  --cat-success:        #4ec98a;
  --cat-warning:        #ffc94a;
  --cat-danger:         #ff6b6b;
  --cat-info:           #5b9af0;
}

/* Dark theme — fix specific light-only spots */
[data-theme="dark"] body,
[data-theme="dark"] html { background: var(--cat-paper); }

[data-theme="dark"] ::selection { background: rgba(245,134,52,.35); color: #fff; }

/* Brand tile in rail — keep colorful but darken edge */
[data-theme="dark"] .rail__brand { box-shadow: 0 0 0 1px rgba(255,255,255,.06); }

/* Linear gradients that hard-coded #fff */
[data-theme="dark"] .hero,
[data-theme="dark"] [class*="hero--"] {
  background: linear-gradient(135deg, var(--cat-surface) 0%, color-mix(in oklab, var(--accent) 18%, var(--cat-surface)) 100%) !important;
}

/* Pagination active number white text on accent — fine */

/* Inputs in dark */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--cat-surface-alt);
  color: var(--cat-ink-900);
  border-color: var(--cat-border);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--cat-muted-2); }

/* Images / placeholders / scrollbars subtle tweak */
[data-theme="dark"] img { filter: brightness(.95); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2e2e33; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Shell layout — collapsed rail + secondary panel + main
   ============================================================ */
.shell {
  display: grid;
  grid-template-columns: 60px var(--panel-w, 220px) 1fr;
  height: 100vh;
  overflow: hidden;
  transition: grid-template-columns .25s var(--ease-out);
}
.shell[data-panel="closed"] { grid-template-columns: 64px 0 1fr; }
.shell[data-panel="closed"] .panel { transform: translateX(-100%); pointer-events: none; }

/* ----- Rail (collapsed icon strip) ----- */
.rail {
  background: var(--rail-bg);
  color: var(--rail-fg);
  border-right: 1px solid var(--rail-divider);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  gap: 4px;
  position: relative;
  z-index: 30;
  overflow-y: auto;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { width: 0; }
.rail__brand {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px; cursor: pointer;
  background: linear-gradient(135deg, #f58634 0%, #d96820 100%);
  color: #fff;
  position: relative;
}
.rail__brand svg { display: block; }
.rail__brand::after {
  content: ''; position: absolute; inset: -2px;
  border-radius: 12px; background: var(--cat-orange);
  opacity: 0; filter: blur(8px); z-index: -1; transition: opacity .2s;
}
.rail__brand:hover::after { opacity: .55; }
.rail__divider { width: 28px; height: 1px; background: var(--rail-divider); margin: 6px 0; }
.rail__btn {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: inherit; cursor: pointer;
  position: relative; transition: background .15s, color .15s;
}
.rail__btn:hover { background: rgba(255,255,255,.06); color: var(--rail-fg-strong); }
[data-rail="light"] .rail__btn:hover { background: var(--cat-paper); }
.rail__btn.is-active {
  background: var(--rail-active-bg);
  color: var(--rail-active-fg);
}
.rail__btn.is-active::before {
  content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; background: var(--accent); border-radius: 0 2px 2px 0;
}
.rail__btn .rail__count {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--rail-bg);
}
.rail__btn:has(.rail__count.is-empty) .rail__count { display: none; }
.rail__spacer { flex: 1; }
.rail__avatar {
  width: 36px; height: 36px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg,#f58634,#c65e18);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
  border: 2px solid var(--rail-divider);
}

/* Tooltips on rail */
.rail__btn[data-tip]:hover::after,
.rail__avatar[data-tip]:hover::after,
.rail__brand[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: #1a1a1c; color: #fff; padding: 5px 10px;
  border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap;
  pointer-events: none; z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
/* --cat-dark, e não --cat-ink-900: a tooltip é escura nos dois temas,
   e o ramp de tinta se inverte no escuro. */
.rail__brand[data-tip]:hover::after { background: var(--cat-dark); }

/* ----- Secondary panel ----- */
.panel {
  background: var(--panel-bg);
  border-right: 1px solid var(--panel-divider);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .25s var(--ease-out);
  z-index: 20;
}
.panel__head {
  padding: 16px 18px 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.panel__head h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  font-weight: 800;
  color: var(--panel-fg-3);
  margin: 0;
}
.panel__head .panel__crumb {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--panel-fg);
  margin: 0;
}
.panel__search {
  margin: 0 16px 8px;
  position: relative;
}
.panel__search input {
  width: 100%;
  padding: 8px 10px 8px 34px;
  border: 1px solid var(--panel-divider);
  background: var(--cat-surface);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  color: var(--panel-fg);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.panel__search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.panel__search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--panel-fg-3); }
.panel__search kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--panel-bg); border: 1px solid var(--panel-divider);
  padding: 1px 6px; border-radius: 4px; color: var(--panel-fg-3);
}

.panel__list { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.panel__group { margin-top: 10px; }
.panel__group-title {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--panel-fg-3);
  padding: 6px 12px 4px;
  display: flex; align-items: center; gap: 6px;
}
.panel__group-title .panel__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0;
  color: var(--panel-fg-3);
  text-transform: none;
}

.panel__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--panel-fg-2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  transition: background .12s, color .12s;
  white-space: nowrap;
  overflow: hidden;
}
.panel__item > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.panel__item:hover { background: var(--panel-hover); color: var(--panel-fg); }
.panel__item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}
.panel__item .panel__item-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--panel-fg-3);
}
.panel__item.is-active .panel__item-count { color: var(--accent); }
.panel__item .panel__item-dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--accent);
  margin-left: auto;
}

.panel__foot {
  border-top: 1px solid var(--panel-divider);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
}
.panel__foot-avatar {
  width: 30px; height: 30px; border-radius: 999px;
  background: linear-gradient(135deg,#f58634,#c65e18);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
}
.panel__foot-name { font-size: 12.5px; font-weight: 700; color: var(--panel-fg); line-height: 1.2; }
.panel__foot-role { font-size: 11px; color: var(--panel-fg-3); }
.panel__foot-actions { margin-left: auto; display: flex; gap: 4px; }
.panel__foot-actions button {
  background: transparent; border: 0; cursor: pointer;
  padding: 6px; border-radius: 6px; color: var(--panel-fg-3);
}
.panel__foot-actions button:hover { background: var(--panel-hover); color: var(--panel-fg); }

/* ============================================================
   Main canvas
   ============================================================ */
.main {
  background: var(--cat-surface);
  overflow-y: auto;
  position: relative;
}

/* Page header (no global topbar, but each page has its own context bar) */
.page-head {
  display: flex; align-items: flex-end; gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--cat-border);
  background: var(--cat-surface);
  position: sticky; top: 0; z-index: 10;
}
.page-head > div:first-child { min-width: 0; flex: 1; }
.page-head__breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--cat-muted);
}
.page-head__breadcrumb a { color: inherit; }
.page-head__breadcrumb a:hover { color: var(--accent); }
.page-head__sep { color: var(--cat-border-strong); }
.page-head__crumb-current { color: var(--cat-ink-900); font-weight: 700; }
.page-head__title-row {
  display: flex; align-items: center; gap: 14px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.page-head__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cat-ink-900);
  margin: 0;
  white-space: nowrap;
}
.page-head__sub {
  font-size: 12.5px;
  color: var(--cat-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.page-head__actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ----- Buttons ----- */
.btn {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
  background: var(--cat-surface);
  color: var(--cat-ink-900);
  border-color: var(--cat-border);
  white-space: nowrap;
}
.btn:hover { border-color: var(--cat-border-strong); }
.btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--primary:active { background: var(--accent-press); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--cat-ink); }
.btn--ghost:hover { background: var(--cat-paper); color: var(--cat-ink-900); }
.btn--icon { padding: 8px; min-width: 36px; justify-content: center; }
.btn--sm { font-size: 11px; padding: 6px 10px; }

/* ----- Page body ----- */
.page-body { padding: 24px 32px 64px; }

/* ----- Toolbar ----- */
.toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.toolbar__search {
  flex: 1; max-width: 400px;
  position: relative;
}
.toolbar__search input {
  width: 100%; padding: 8px 12px 8px 36px;
  border: 1px solid var(--cat-border); border-radius: 8px;
  font: inherit; font-size: 13px; background: var(--cat-surface);
  outline: none; color: var(--cat-ink-900);
  transition: border-color .15s, box-shadow .15s;
}
.toolbar__search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.toolbar__search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--cat-muted); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--cat-border);
  border-radius: 999px;
  background: var(--cat-surface);
  font-size: 12px; font-weight: 600;
  color: var(--cat-ink);
  cursor: pointer;
  transition: all .12s;
}
.chip:hover { border-color: var(--cat-border-strong); }
.chip.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}
.chip__count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: color-mix(in oklab, var(--cat-ink) 10%, transparent);
  padding: 1px 6px;
  border-radius: 999px;
}
.chip.is-active .chip__count { background: var(--accent); color: #fff; }

/* ----- Tables ----- */
.table-wrap {
  background: var(--cat-surface);
  border: 1px solid var(--cat-border);
  border-radius: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: var(--shadow-1);
}
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--cat-border-strong); border-radius: 4px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cat-muted);
  padding: 11px 14px;
  border-bottom: 1px solid var(--cat-border);
  background: var(--cat-surface);
  font-weight: 800;
  user-select: none;
  white-space: nowrap;
}
.table th.is-sortable { cursor: pointer; }
.table th .th-sort {
  display: inline-block;
  margin-left: 4px;
  opacity: 0;
  transition: opacity .12s;
}
.table th:hover .th-sort,
.table th.is-sorted .th-sort { opacity: 1; }
.table th.is-sorted { color: var(--cat-ink-900); }

.table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--cat-surface-alt);
  vertical-align: middle;
  font-size: 13px;
  color: var(--cat-ink-900);
}
.table td.cell-name { min-width: 240px; }
.table tbody tr {
  position: relative;
  transition: background .1s;
}
.table tbody tr:hover { background: var(--cat-paper); }
.table tbody tr.is-selected { background: var(--accent-soft); }
.table tbody tr.is-selected td:first-child::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
}
.table tbody tr:last-child td { border-bottom: 0; }

/* Density */
.table[data-density="compact"] th { padding: 8px 12px; }
.table[data-density="compact"] td { padding: 7px 12px; font-size: 12.5px; }
.table[data-density="comfy"]   th { padding: 14px 18px; }
.table[data-density="comfy"]   td { padding: 16px 18px; }

/* Row name + thumb */
.row-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.row-thumb {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--cat-surface-alt), var(--cat-border));
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--cat-muted-2);
  font-size: 14px;
  overflow: hidden;
}
.row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.table[data-density="compact"] .row-thumb { width: 28px; height: 28px; border-radius: 6px; }
.table[data-density="comfy"]   .row-thumb { width: 44px; height: 44px; border-radius: 10px; }

.row-name__primary { font-weight: 700; color: var(--cat-ink-900); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.row-name__secondary { font-size: 11.5px; color: var(--cat-muted); font-family: var(--font-mono); margin-top: 3px; white-space: nowrap; }
.row-name > div:last-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }

.cell-mono { font-family: var(--font-mono); font-size: 12px; color: var(--cat-ink); }
.cell-muted { color: var(--cat-muted); }

/* Row actions */
.row-actions {
  display: flex; gap: 2px;
  opacity: 0;
  transition: opacity .12s;
  justify-content: flex-end;
}
.table[data-actions="hover"] tbody tr:hover .row-actions { opacity: 1; }
.table[data-actions="hover"] tbody tr.is-selected .row-actions { opacity: 1; }
.table[data-actions="always"] .row-actions { opacity: 1; }
.table[data-actions="menu"] .row-actions { opacity: 1; }
.table[data-actions="menu"] .row-actions .row-action { display: none; }
.table[data-actions="menu"] .row-actions .row-action--menu { display: inline-flex; }
.table:not([data-actions="menu"]) .row-action--menu { display: none; }

.row-action {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  color: var(--cat-ink);
  cursor: pointer;
  transition: background .1s, color .1s;
}
.row-action:hover { background: var(--cat-paper); color: var(--cat-ink-900); }
.row-action--danger:hover { background: var(--tone-err-bg); color: var(--cat-danger); }
.row-action--primary:hover { background: var(--accent-soft); color: var(--accent); }

/* Score badge */
.score {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}
.score__ring {
  --p: 0;
  width: 22px; height: 22px; border-radius: 999px;
  background: conic-gradient(var(--score-color, var(--cat-warning)) calc(var(--p) * 1%), var(--cat-surface-alt) 0);
  position: relative;
  flex-shrink: 0;
}
.score__ring::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 999px; background: var(--cat-surface);
}
.score__num { position: relative; z-index: 1; }
.score--high { --score-color: var(--cat-success); }
.score--mid { --score-color: var(--cat-warning); }
.score--low { --score-color: var(--cat-danger); }

/* Pills */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill--ok    { background: var(--tone-ok-bg);   color: var(--tone-ok-fg); }
.pill--pend  { background: var(--tone-warn-bg); color: var(--tone-warn-fg); }
.pill--err   { background: var(--tone-err-bg);  color: var(--tone-err-fg); }
.pill--info  { background: var(--tone-info-bg); color: var(--tone-info-fg); }
.pill--soft  { background: var(--cat-surface-alt); color: var(--cat-ink); }
.pill__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .8; }

/* Brand name (uppercase tracked) */
.brand-name {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cat-ink-900);
}

/* SKU stack chips */
.sku-stack { display: inline-flex; gap: 4px; flex-wrap: nowrap; align-items: center; max-width: 200px; }
.sku-stack__chip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--cat-surface-alt);
  color: var(--cat-ink);
  padding: 2px 6px;
  border-radius: 4px;
}
.sku-stack__more {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--cat-muted);
  padding: 2px 6px;
}

/* Pagination */
.pagination {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 16px;
  border-top: 1px solid var(--cat-border);
  background: var(--cat-surface);
  font-size: 12.5px;
  color: var(--cat-muted);
}
.pagination__nums { display: flex; gap: 2px; margin-left: auto; }
.pagination__num {
  min-width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px;
  background: transparent; border: 0; color: var(--cat-ink);
}
.pagination__num:hover { background: var(--cat-paper); color: var(--cat-ink-900); }
.pagination__num.is-active { background: var(--accent); color: #fff; }
.pagination__num--gap { background: transparent; cursor: default; }
.pagination__num--gap:hover { background: transparent; }

/* ============================================================
   Score / Quality hero (Product page)
   ============================================================ */
.quality-hero {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  background: linear-gradient(135deg, var(--cat-surface) 0%, var(--accent-soft) 100%);
  border: 1px solid var(--cat-border);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.quality-hero::after {
  content: ''; position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 999px;
  background: radial-gradient(closest-side, var(--accent-soft-strong), transparent 70%);
  pointer-events: none;
}
.gauge {
  --p: 0;
  width: 180px; height: 180px;
  border-radius: 999px;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--cat-surface-alt) 0);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gauge::before {
  content: ''; position: absolute; inset: 12px;
  border-radius: 999px; background: var(--cat-surface);
  box-shadow: var(--shadow-1);
}
.gauge__inner { position: relative; text-align: center; }
.gauge__num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  color: var(--cat-ink-900);
  letter-spacing: -.02em;
  line-height: 1;
}
.gauge__num small { font-size: 22px; color: var(--cat-muted); font-weight: 700; }
.gauge__label {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cat-muted);
  margin-top: 6px;
}

.quality-hero__body { display: flex; flex-direction: column; gap: 12px; }
.quality-hero__title {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cat-muted);
}
.quality-hero__product {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--cat-ink-900);
  line-height: 1.2;
  margin: 0;
}
.quality-hero__meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--cat-muted);
}
.quality-hero__meta strong { color: var(--cat-ink-900); font-family: var(--font-mono); font-weight: 600; }
.quality-hero__breakdown { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.qbd { display: flex; flex-direction: column; gap: 2px; min-width: 100px; }
.qbd__lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cat-muted); }
.qbd__val { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 13px; color: var(--cat-ink-900); }
.qbd__bar { width: 80px; height: 4px; background: var(--cat-surface-alt); border-radius: 2px; overflow: hidden; }
.qbd__bar > span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.qbd__bar.is-low > span { background: var(--cat-danger); }
.qbd__bar.is-mid > span { background: var(--cat-warning); }
.qbd__bar.is-high > span { background: var(--cat-success); }

/* ============================================================
   Collapsible sections (Product page)
   ============================================================ */
.section {
  background: var(--cat-surface);
  border: 1px solid var(--cat-border);
  border-radius: 12px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.section__head {
  padding: 16px 22px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  transition: background .12s;
  user-select: none;
}
.section__head:hover { background: var(--cat-paper); }
.section__chev {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cat-muted);
  transition: transform .2s var(--ease-out);
}
.section.is-open .section__chev { transform: rotate(90deg); }
.section__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cat-ink-900);
  margin: 0;
}
.section__sub { font-size: 12px; color: var(--cat-muted); }
.section__progress {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
}
.section__progress-bar {
  width: 100px; height: 6px;
  background: var(--cat-surface-alt);
  border-radius: 3px; overflow: hidden;
}
.section__progress-bar > span {
  display: block; height: 100%;
  background: var(--accent); border-radius: 3px;
  transition: width .3s var(--ease-out);
}
.section__progress-bar.is-low > span { background: var(--cat-danger); }
.section__progress-bar.is-mid > span { background: var(--cat-warning); }
.section__progress-bar.is-high > span { background: var(--cat-success); }
.section__progress-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--cat-ink);
  min-width: 36px; text-align: right;
}
.section__body {
  padding: 4px 22px 22px;
  border-top: 1px solid var(--cat-border);
  display: none;
}
.section.is-open .section__body { display: block; }

/* Side rail (jump nav for Product page) */
.product-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.product-grid > * { min-width: 0; }
.section, .section__body { min-width: 0; }
.jump-nav {
  position: sticky; top: 24px;
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}
.jump-nav__item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cat-ink);
  cursor: pointer;
  text-decoration: none;
  transition: background .1s, color .1s;
}
.jump-nav__item:hover { background: var(--cat-paper); color: var(--cat-ink-900); }
.jump-nav__item.is-active {
  background: var(--accent-soft); color: var(--accent);
  font-weight: 700;
}
.jump-nav__dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--cat-border-strong);
}
.jump-nav__item.has-low .jump-nav__dot { background: var(--cat-danger); }
.jump-nav__item.has-mid .jump-nav__dot { background: var(--cat-warning); }
.jump-nav__item.has-high .jump-nav__dot { background: var(--cat-success); }
.jump-nav__pct { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--cat-muted); }

/* Form fields */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.form-grid--full > * { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field--full { grid-column: 1 / -1; }
.field__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cat-label);
  display: flex; align-items: center; gap: 8px;
}
.field__hint { font-size: 11.5px; color: var(--cat-muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.field__input,
.field__textarea,
.field__select {
  padding: 10px 12px;
  border: 1px solid var(--cat-border);
  border-radius: 8px;
  background: var(--cat-surface);
  font: inherit;
  font-size: 15px;
  color: var(--cat-ink-900);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field__textarea { min-height: 90px; resize: vertical; line-height: 1.55; }
.field__input:focus,
.field__textarea:focus,
.field__select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* Image gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.gallery__item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--cat-border);
  background: linear-gradient(135deg, var(--cat-surface-alt), var(--bg-3));
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.gallery__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--cat-border-strong); }
.gallery__item img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.gallery__item--add {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
  border: 2px dashed var(--cat-border-strong);
  background: transparent;
  color: var(--cat-muted);
  font-family: var(--font-display);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.gallery__item--add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.gallery__cap {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
  padding: 18px 10px 8px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  display: flex; justify-content: space-between;
  opacity: 0; transition: opacity .15s;
}
.gallery__item:hover .gallery__cap { opacity: 1; }
.gallery__primary {
  position: absolute; top: 8px; left: 8px;
  background: var(--accent); color: #fff;
  font-family: var(--font-display);
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px;
}

/* Family detail attributes */
.attr-list { display: flex; flex-direction: column; gap: 8px; }
.attr-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--cat-border);
  border-radius: 8px;
  background: var(--cat-surface);
  position: relative;
  transition: border-color .15s, box-shadow .15s;
}
.attr-row:hover { border-color: var(--cat-border-strong); }
.attr-row__handle {
  cursor: grab; color: var(--cat-muted-2);
  display: flex; align-items: center; padding: 0 4px;
}
.attr-row__name {
  font-weight: 700; color: var(--cat-ink-900);
  font-size: 13.5px;
}
.attr-row__type { font-family: var(--font-mono); font-size: 11px; color: var(--cat-muted); }

.toggle-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--cat-border);
  background: var(--cat-surface);
  font-size: 11.5px; font-weight: 700; color: var(--cat-muted);
  cursor: pointer;
  user-select: none;
  transition: all .12s;
  white-space: nowrap;
}
.toggle-pill:hover { border-color: var(--cat-border-strong); }
.toggle-pill.is-on {
  background: var(--accent-soft); color: var(--accent); border-color: transparent;
}
.toggle-pill__check {
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1.5px solid var(--cat-border-strong);
  display: inline-flex; align-items: center; justify-content: center;
}
.toggle-pill.is-on .toggle-pill__check {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.toggle-pill.is-on .toggle-pill__check svg { display: block; }
.toggle-pill .toggle-pill__check svg { display: none; }

/* Family editor */
.family-name-editor {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, .55fr) auto;
  align-items: end;
  gap: 16px;
  margin-bottom: 20px;
  padding: 18px;
  border: 1px solid var(--cat-border);
  border-radius: 10px;
  background: var(--cat-surface);
  box-shadow: var(--shadow-1);
}
.family-name-editor__actions { display: flex; align-items: center; gap: 6px; padding-bottom: 1px; }
.family-editor-message { margin: 0 0 18px; }
.family-editor-layout {
  display: grid;
  grid-template-columns: minmax(520px, 1.12fr) minmax(420px, .88fr);
  align-items: start;
  gap: 24px;
}
.family-workspace,
.family-products { min-width: 0; }
.family-workspace__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  margin-bottom: 12px;
}
.family-workspace__heading h2 {
  margin: 0;
  color: var(--cat-ink-900);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.family-workspace__heading p { margin: 4px 0 0; color: var(--cat-muted); font-size: 12px; }
.family-workspace__count {
  min-width: 26px;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--cat-surface-alt);
  color: var(--cat-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.family-attribute-row {
  grid-template-columns: minmax(170px, 1fr) auto auto auto;
  min-height: 60px;
  padding: 9px 12px 9px 16px;
}
.family-attribute-row__info { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.family-attribute-row__info > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-attribute-row__scope {
  min-width: 84px;
  padding: 5px 10px;
  color: var(--cat-muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.family-attribute-row__remove { color: var(--cat-danger); }
.family-add-attribute {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--cat-ink);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.family-add-attribute:hover { color: var(--accent); }
.family-attribute-picker {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--cat-border);
  border-radius: 10px;
  background: var(--cat-paper);
}
.family-attribute-picker__heading,
.family-attribute-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.family-attribute-picker__heading { margin-bottom: 8px; }
.family-attribute-picker__heading > div,
.family-attribute-option > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.family-attribute-picker__heading strong,
.family-attribute-option strong { color: var(--cat-ink-900); font-size: 13px; }
.family-attribute-picker__heading span,
.family-attribute-option span { color: var(--cat-muted); font-size: 11.5px; }
.family-attribute-option { min-height: 52px; padding: 8px 0; border-top: 1px solid var(--cat-border); }
.family-empty-state {
  display: flex;
  min-height: 110px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 22px;
  color: var(--cat-muted);
  font-size: 12px;
  text-align: center;
}
.family-empty-state strong { color: var(--cat-ink-900); font-size: 13px; }
.family-product-search { max-width: none; margin-bottom: 8px; }
.family-product-table { box-shadow: none; }
.family-product-table .table { min-width: 420px; }
.family-product-link { display: block; text-decoration: none; }
.family-product-link:hover { color: var(--accent); }
.family-product-brand { max-width: 130px; overflow: hidden; color: var(--cat-muted); text-overflow: ellipsis; white-space: nowrap; }
.family-products-empty { min-height: 160px; border-top: 1px solid var(--cat-border); }
.family-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.family-pagination span { color: var(--cat-muted); font-size: 11.5px; }
.family-product-picker {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--cat-border);
  border-radius: 10px;
  background: var(--cat-paper);
}
.family-product-picker .family-product-search { margin: 12px 0 0; }
.family-product-options { margin-top: 8px; border-top: 1px solid var(--cat-border); }
.family-product-option {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--cat-border);
}
.family-product-option:last-child { border-bottom: 0; }
.family-product-option > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.family-product-option strong { overflow: hidden; color: var(--cat-ink-900); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.family-product-option span { color: var(--cat-muted); font-size: 11.5px; }
.attribute-search { max-width: none; margin: 14px 0 8px; }
.attribute-editor-grid { display: grid; align-items: start; gap: 18px; grid-template-columns: minmax(300px, .7fr) minmax(420px, 1.3fr); }
.attribute-option-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--cat-border);
}
.attribute-option-list { margin-top: 4px; }

@media (max-width: 1050px) {
  .attribute-editor-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .attribute-option-form { grid-template-columns: 1fr; }
}

@media (max-width: 1280px) {
  .family-editor-layout { grid-template-columns: 1fr; }
  .family-products { margin-top: 12px; }
}

@media (max-width: 760px) {
  .family-name-editor { grid-template-columns: 1fr; align-items: stretch; }
  .family-name-editor__actions { justify-content: flex-end; }
  .family-attribute-row { grid-template-columns: 1fr 1fr; }
  .family-attribute-row__info { grid-column: 1 / -1; }
  .family-attribute-row__remove { justify-self: end; }
  .family-attribute-row__scope { justify-self: start; }
}

/* Variants table (Família tab) */
.variants-wrap { background: var(--cat-surface); border: 1px solid var(--cat-border); border-radius: 10px; overflow-x: auto; overflow-y: hidden; }
.variants-wrap::-webkit-scrollbar { height: 8px; }
.variants-wrap::-webkit-scrollbar-thumb { background: var(--cat-border-strong); border-radius: 4px; }
.variants-wrap::-webkit-scrollbar-track { background: transparent; }
.variants-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--cat-border);
  background: var(--cat-paper);
}
.variants-toolbar__title {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cat-muted);
}

/* Empty / placeholder */
.placeholder-img {
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--cat-border-strong);
  border-radius: 12px;
  color: var(--cat-muted-2);
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800;
  background: var(--cat-paper);
  aspect-ratio: 1;
  flex-direction: column; gap: 6px;
}

/* Command palette (⌘K) */
.cmdk-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20,20,22,.45);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  animation: fadeIn .15s var(--ease-out);
}
.cmdk {
  width: 600px; max-width: 92%;
  background: var(--cat-surface);
  border-radius: 14px;
  box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: slideDown .2s var(--ease-out);
}
.cmdk__input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--cat-border);
}
.cmdk__input-wrap svg { color: var(--cat-muted); }
.cmdk__input-wrap input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--cat-ink-900);
}
.cmdk__input-wrap kbd {
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--cat-paper); border: 1px solid var(--cat-border);
  padding: 2px 7px; border-radius: 4px; color: var(--cat-muted);
}
.cmdk__list { max-height: 380px; overflow-y: auto; padding: 6px; }
.cmdk__group { padding: 6px 4px 2px; }
.cmdk__group-title {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cat-muted);
  padding: 6px 12px;
}
.cmdk__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  color: var(--cat-ink-900);
}
.cmdk__item:hover, .cmdk__item.is-focused { background: var(--accent-soft); color: var(--accent); }
.cmdk__item-meta { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--cat-muted); }
.cmdk__foot {
  padding: 10px 16px;
  border-top: 1px solid var(--cat-border);
  background: var(--cat-paper);
  font-size: 11.5px; color: var(--cat-muted);
  display: flex; gap: 16px;
}
.cmdk__foot kbd {
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--cat-surface); border: 1px solid var(--cat-border);
  padding: 1px 6px; border-radius: 4px; color: var(--cat-ink);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideDown { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Toolbar separator */
.tb-sep { width: 1px; height: 22px; background: var(--cat-border); margin: 0 4px; }

/* Misc */
.spacer { flex: 1; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 24px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }

/* ============================================================
   Tweaks panel overrides — keep the panel inside the app
   ============================================================ */
.tweak-trigger {
  position: fixed; bottom: 18px; right: 18px;
  z-index: 50;
}

/* ============================================================
   Mídia por SKU (Imagens & Arquivos)
   ============================================================ */
.sku-tabs {
  display: flex; gap: 8px; padding-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--cat-border);
  margin-bottom: 14px;
}
.sku-tabs::-webkit-scrollbar { height: 6px; }
.sku-tabs::-webkit-scrollbar-thumb { background: var(--cat-border-strong); border-radius: 3px; }

.sku-tab {
  flex: 0 0 auto;
  min-width: 168px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px;
  background: var(--cat-surface);
  border: 1px solid var(--cat-border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
  position: relative;
}
.sku-tab:hover { border-color: var(--cat-border-strong); }
.sku-tab.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 12%, transparent);
}
.sku-tab.is-active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -15px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.sku-tab__head { display: flex; align-items: center; gap: 8px; }
.sku-tab__icon { color: var(--accent); display: flex; }
.sku-tab__icon svg { width: 14px; height: 14px; }
.sku-tab__sku {
  font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  color: var(--cat-ink-900); letter-spacing: .02em;
}
.sku-tab.is-shared .sku-tab__sku {
  font-family: var(--font-display); font-size: 12px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
}
.sku-tab__count {
  margin-left: auto;
  background: var(--cat-bg-2); color: var(--cat-muted);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  min-width: 22px; text-align: center;
}
.sku-tab.is-active .sku-tab__count { background: var(--accent); color: #fff; }
.sku-tab__desc {
  font-size: 11px; color: var(--cat-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
}
.sku-tab__breakdown {
  display: flex; gap: 12px; margin-top: 2px;
  font-size: 10.5px; color: var(--cat-muted-2);
  font-family: var(--font-mono); font-weight: 700;
}
.sku-tab__breakdown svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }

/* Midia toolbar (segmented + actions) */
.midia-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.seg {
  display: inline-flex; padding: 3px;
  background: var(--cat-bg-2);
  border: 1px solid var(--cat-border);
  border-radius: 8px;
}
.seg__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: transparent; border: 0;
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--cat-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.seg__btn svg { width: 14px; height: 14px; }
.seg__btn:hover { color: var(--cat-ink-900); }
.seg__btn.is-active { background: var(--cat-surface); color: var(--cat-ink-900); box-shadow: var(--shadow-1); }
.seg__count {
  background: var(--cat-bg); color: var(--cat-muted);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px; margin-left: 2px;
}
.seg__btn.is-active .seg__count { background: var(--accent-soft); color: var(--accent); }

.midia-context {
  background: var(--cat-bg-2);
  border: 1px solid var(--cat-border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--cat-ink);
  margin-bottom: 14px;
}

/* Shared image badge */
.gallery__shared {
  position: absolute; top: 8px; right: 8px;
  background: var(--cat-dark); color: #fff;
  font-family: var(--font-display);
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px;
}

/* Files list */
.files-list { display: flex; flex-direction: column; gap: 8px; }
.file-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--cat-surface);
  border: 1px solid var(--cat-border);
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.file-row:hover { border-color: var(--cat-border-strong); box-shadow: var(--shadow-1); }
.file-row__type {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 8px;
  border-radius: 5px;
  text-align: center;
}
.file-row__name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.file-row__name strong { font-size: 13.5px; color: var(--cat-ink-900); font-weight: 600; }
.file-row__size { font-family: var(--font-mono); font-size: 11.5px; color: var(--cat-muted); }
.file-row__actions { display: flex; gap: 4px; }

.file-row--add {
  grid-template-columns: 1fr;
  justify-items: center;
  border-style: dashed;
  color: var(--cat-muted-2);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.file-row--add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.file-row--add svg { width: 14px; height: 14px; vertical-align: -2px; }

/* Empty cards */
.empty-card {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 36px 20px;
  background: var(--cat-bg-2);
  border: 1px dashed var(--cat-border-strong);
  border-radius: 10px;
  color: var(--cat-muted);
  font-size: 13px;
}
.empty-card svg { width: 28px; height: 28px; opacity: .55; }

/* Generic soft tag */
.tag.tag--soft {
  background: var(--cat-bg-2); color: var(--cat-muted);
  font-family: var(--font-display);
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
}

/* Iconbtn */
.iconbtn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  border-radius: 6px; color: var(--cat-muted); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.iconbtn:hover { background: var(--cat-bg-2); color: var(--cat-ink-900); border-color: var(--cat-border); }
.iconbtn svg { width: 16px; height: 16px; }

/* ============================================================
   Navegação — árvores do produto
   ============================================================ */
.nav-trees { display: flex; flex-direction: column; gap: 12px; }

.nav-tree-card {
  position: relative;
  border: 1px solid var(--cat-border);
  border-left: 3px solid var(--cat-muted-2);
  background: var(--cat-surface);
  border-radius: 8px;
  padding: 14px 16px 14px 18px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.nav-tree-card:hover { box-shadow: var(--shadow-1); }
.nav-tree-card.has-default { border-left-color: var(--accent); }
.nav-tree-card.has-channel { border-left-color: #e9b04a; }

.nav-tree-card__head { display: flex; align-items: center; gap: 10px; }
.nav-tree-card__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cat-muted-2);
}
.nav-tree-card__dot.has-default { background: var(--accent); }
.nav-tree-card__dot.has-channel { background: #e9b04a; }

.nav-tree-card__name {
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--cat-ink-900);
  margin: 0;
}
.nav-tree-card__kind {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--cat-muted);
  background: var(--cat-bg-2);
  padding: 3px 8px; border-radius: 4px;
}

.nav-tree-card__path {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  font-size: 13px; color: var(--cat-muted);
}
.nav-tree-card__seg { padding: 3px 2px; }
.nav-tree-card__seg.is-leaf {
  color: var(--cat-ink-900); font-weight: 700;
  background: var(--accent-soft);
  padding: 3px 10px; border-radius: 5px;
}
.nav-tree-card__sep { color: var(--cat-muted-2); display: inline-flex; }
.nav-tree-card__sep svg { width: 12px; height: 12px; }

.nav-tree-card__tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--cat-border);
}
.nav-tree-card__tags-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--cat-muted-2);
  margin-right: 4px;
}
.nav-tag {
  font-size: 11px; font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 9px; border-radius: 4px;
  border: 1px solid color-mix(in oklab, var(--accent) 20%, transparent);
}
.nav-tag--mini { font-size: 10px; padding: 1px 6px; font-weight: 600; }

.nav-tree-card--add {
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: transparent;
  border: 1px dashed var(--cat-border-strong);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  width: 100%;
  transition: border-color .15s, background .15s;
}
.nav-tree-card--add:hover { border-color: var(--accent); background: var(--accent-soft); }
.nav-tree-card--add .nav-tree-card__addicon {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  flex-shrink: 0;
}
.nav-tree-card--add .nav-tree-card__addicon svg { width: 18px; height: 18px; }
.nav-tree-card__addtext { display: flex; flex-direction: column; gap: 2px; }
.nav-tree-card__addtext strong {
  font-size: 13.5px; font-weight: 700; color: var(--cat-ink-900);
}
.nav-tree-card__addtext span {
  font-size: 12px; color: var(--cat-muted);
}

/* ============================================================
   Drawer — generic side drawer
   ============================================================ */
.drawer__scrim {
  position: fixed; inset: 0; background: color-mix(in oklab, var(--cat-dark-2) 45%, transparent);
  backdrop-filter: blur(2px);
  z-index: 200;
  animation: fadeIn .18s ease;
}
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 520px; max-width: 92vw;
  background: var(--cat-bg);
  border-left: 1px solid var(--cat-border);
  z-index: 201;
  display: flex; flex-direction: column;
  box-shadow: -16px 0 40px -8px color-mix(in oklab, var(--cat-ink-900) 18%, transparent);
  animation: slideInRight .22s ease;
}
@keyframes slideInRight { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.drawer__head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--cat-border);
  background: var(--cat-surface);
}
.drawer__eyebrow {
  display: block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--cat-muted-2);
  margin-bottom: 3px;
}
.drawer__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 800;
  letter-spacing: .01em;
  color: var(--cat-ink-900);
}
.drawer__head .iconbtn { margin-left: auto; }

.drawer__sub {
  padding: 12px 20px;
  border-bottom: 1px solid var(--cat-border);
  background: var(--cat-surface);
  display: flex; gap: 10px;
}

.drawer__search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--cat-border);
  background: var(--cat-bg);
}
.drawer__search svg { width: 14px; height: 14px; color: var(--cat-muted-2); }
.drawer__search input {
  flex: 1; border: 0; background: transparent;
  font-size: 13.5px; color: var(--cat-ink-900);
  outline: none;
}

.drawer__body {
  flex: 1; overflow-y: auto;
  padding: 8px 8px 12px;
}

.drawer__foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--cat-border);
  background: var(--cat-surface);
}

/* Tree list inside drawer */
.tree-list { list-style: none; padding: 0; margin: 0; }
.tree-list--root > .tree-node { margin-bottom: 1px; }

.tree-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 12px;
  margin: 1px 4px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: background .12s;
}
.tree-row:hover { background: var(--accent-soft); }
.tree-row.is-current { background: var(--accent-soft); }
.tree-row.is-current::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; background: var(--accent); border-radius: 2px;
}

.tree-row__toggle {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
}
.tree-row__chev { color: var(--cat-muted-2); transition: transform .15s; display: inline-flex; }
.tree-row__chev.is-open { transform: rotate(90deg); }
.tree-row__chev svg { width: 12px; height: 12px; }
.tree-row__leaf {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cat-border-strong);
}

.tree-row__num {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 700;
  color: var(--cat-muted);
  min-width: 38px;
}
.tree-row__label {
  font-size: 13px; color: var(--cat-ink-900);
  flex: 1;
}
.tree-row.is-current .tree-row__label { font-weight: 700; }
.tree-row.is-current .tree-row__num { color: var(--accent); }

.tree-row__current-badge {
  font-family: var(--font-display);
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--accent);
  padding: 3px 8px; border-radius: 4px;
}

.tree-row__pick {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  border-radius: 50%; cursor: pointer;
  color: var(--cat-muted-2);
  opacity: 0; transition: opacity .12s;
}
.tree-row:hover .tree-row__pick { opacity: 1; }
.tree-row__pick:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.tree-row__pick svg { width: 12px; height: 12px; }


/* ============================================================
   Home / Início — KPIs, tasks, activity, recents
   ============================================================ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }

.kpi-card {
  text-align: left;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px;
  background: var(--cat-surface);
  border: 1px solid var(--cat-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  font: inherit;
  min-width: 0;
}
.kpi-card:hover {
  border-color: var(--cat-border-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.kpi-card__head { display: flex; align-items: center; gap: 10px; }
.kpi-card__icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.kpi-card__icon svg { width: 16px; height: 16px; }
.kpi-card__icon--warning { background: rgba(245,182,52,.16); color: var(--cat-warning); }
.kpi-card__icon--danger  { background: rgba(216,72,72,.14); color: var(--cat-danger); }
.kpi-card__label {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--cat-muted);
}
.kpi-card__value {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 900;
  letter-spacing: -.02em;
  color: var(--cat-ink-900);
  line-height: 1;
}
.kpi-card__suffix {
  font-size: 14px; color: var(--cat-muted);
  font-weight: 700; margin-left: 4px;
}
.kpi-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.kpi-card__delta {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 700;
}
.kpi-card__delta--up   { color: var(--cat-success); }
.kpi-card__delta--down { color: var(--cat-danger); }
.kpi-card__spark { display: block; }

/* Two-column layout under KPIs */
.home-cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) { .home-cols { grid-template-columns: 1fr; } }

/* Task list */
.task-list { list-style: none; margin: 0; padding: 0; }
.task-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cat-border);
}
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: var(--cat-paper); }
.task-row__icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  flex-shrink: 0;
}
.task-row__icon svg { width: 16px; height: 16px; }
.task-row__icon--review { background: rgba(63,174,106,.12); color: var(--cat-success); }
.task-row__icon--image  { background: rgba(58,123,213,.12); color: var(--cat-info); }
.task-row__icon--family { background: rgba(245,134,52,.12); color: var(--accent); }
.task-row__icon--price  { background: rgba(245,182,52,.16); color: var(--cat-warning); }
.task-row__main { flex: 1; min-width: 0; }
.task-row__text {
  font-size: 13.5px; font-weight: 700; color: var(--cat-ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-row__meta { font-size: 11.5px; color: var(--cat-muted); margin-top: 2px; }
.task-row__count {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 800;
  background: var(--cat-bg-2, var(--cat-surface-alt)); color: var(--cat-ink-900);
  padding: 3px 8px; border-radius: 999px;
  min-width: 28px; text-align: center;
}

/* Activity feed */
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cat-border);
}
.activity-row:last-child { border-bottom: 0; }
.activity-row__avatar {
  width: 30px; height: 30px; border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #7d7d82, #4a4a4c);
}
.activity-row__avatar.tone-ok   { background: linear-gradient(135deg, #4ec98a, #2d8a5b); }
.activity-row__avatar.tone-info { background: linear-gradient(135deg, #5b96e8, #1e6fdb); }
.activity-row__avatar.tone-err  { background: linear-gradient(135deg, #ff6b6b, #c63a3a); }
.activity-row__main { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--cat-ink); }
.activity-row__main strong { color: var(--cat-ink-900); font-weight: 700; }
.activity-row__target { color: var(--cat-ink-900); font-weight: 600; }
.activity-row__when { font-size: 11.5px; color: var(--cat-muted); margin-top: 2px; }

/* Recents grid */
.recents-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1100px) { .recents-grid { grid-template-columns: repeat(2, 1fr); } }
.recent-card {
  text-align: left;
  background: var(--cat-surface);
  border: 1px solid var(--cat-border);
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; font: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  min-width: 0;
}
.recent-card:hover {
  border-color: var(--cat-border-strong);
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}
.recent-card__type {
  font-family: var(--font-display);
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--cat-muted);
  align-self: flex-start;
  padding: 2px 7px; border-radius: 4px;
  background: var(--cat-bg-2, var(--cat-surface-alt));
}
.recent-card__type--produto { color: var(--accent); background: var(--accent-soft); }
.recent-card__type--familia { color: var(--cat-info); background: rgba(58,123,213,.10); }
.recent-card__name {
  font-size: 13.5px; font-weight: 800; color: var(--cat-ink-900);
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.recent-card__meta { font-size: 11.5px; color: var(--cat-muted); }
.recent-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 8px;
}
.recent-card__when {
  font-family: var(--font-mono);
  font-size: 10.5px; color: var(--cat-muted);
}

/* ============================================================
   Editor do produto — painéis, mídia e organização
   ============================================================ */
.product-editor-message { margin-bottom: 16px; }

.jump-nav__title {
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cat-muted);
}

/* Nota de contexto no topo de uma seção, ao lado das ações */
.section-note { font-size: 12px; color: var(--cat-muted); }
.section-note strong { color: var(--cat-ink-900); }

/* Código de SKU — mesmo destaque que a lista de produtos dá ao identificador */
.sku-code { color: var(--accent); font-weight: 700; }

/* Painel de edição embutido numa seção (novo SKU, associar mídia) */
.editor-panel {
  margin-bottom: 16px;
  padding: 16px 18px;
  background: var(--cat-bg-2);
  border: 1px solid var(--cat-border);
  border-radius: 10px;
}
.editor-panel__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.editor-panel__head strong {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--cat-ink-900);
}
.editor-panel__head span { font-size: 12px; color: var(--cat-muted); }
.editor-panel__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.check-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cat-label); min-height: 36px; }
.field__select--multi { height: auto; padding: 8px 10px; }

/* Categorias como pílulas marcáveis */
.category-picker-grid { display: flex; flex-wrap: wrap; gap: 8px; }

/* Confirmação de exclusão, acima da tabela que ela afeta */
.btn--danger { background: var(--cat-danger); color: #fff; border-color: var(--cat-danger); }
.btn--danger:hover { background: var(--cat-danger); border-color: var(--cat-danger); filter: brightness(.94); }
.confirm-bar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  padding: 9px 14px;
  background: var(--cat-bg-2);
  border: 1px solid var(--cat-border);
  border-left: 3px solid var(--cat-danger);
  border-radius: 6px;
  font-size: 12.5px; color: var(--cat-ink);
}

/* Remover imagem — aparece junto com a legenda, no hover do card */
.gallery__remove {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cat-surface); border: 1px solid var(--cat-border);
  border-radius: 6px; color: var(--cat-muted); cursor: pointer;
  opacity: 0; transition: opacity .15s, color .15s, border-color .15s;
}
.gallery__item:hover .gallery__remove { opacity: 1; }
.gallery__remove:hover { color: var(--cat-danger); border-color: var(--cat-danger); }
.gallery__remove:focus-visible { opacity: 1; }


/* ============================================================
   Responsive — product edit page (and general narrow-viewport)
   ============================================================ */

/* Laptop / small desktop: hero stacks, form goes single column */
@media (max-width: 1280px) {
  .quality-hero { grid-template-columns: 1fr; gap: 18px; }
  .gauge { width: 132px; height: 132px; }
  .gauge__num { font-size: 34px; }
  .gauge__num small { font-size: 16px; }
  .quality-hero__product { font-size: 20px; }
  .product-grid { grid-template-columns: 168px minmax(0, 1fr); gap: 20px; }
}

/* Tablet / split-screen: jump nav becomes a horizontal strip above the sections */
@media (max-width: 1024px) {
  .page-body { padding: 18px 20px 48px; }
  .page-head { padding: 14px 20px; }
  .product-grid { grid-template-columns: 1fr; gap: 14px; }
  .jump-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cat-border);
    scrollbar-width: none;
  }
  .jump-nav::-webkit-scrollbar { width: 0; height: 0; }
  .jump-nav > div:first-child { display: none; }
  .jump-nav__item { flex: 0 0 auto; white-space: nowrap; }
  .jump-nav__pct { margin-left: 6px; }
  .form-grid { grid-template-columns: 1fr; }
  .quality-hero { padding: 18px; }
  .quality-hero__breakdown { gap: 12px; }
  .qbd { min-width: 84px; }
  .section__head { padding: 14px 16px; gap: 10px; }
  .section__body { padding: 4px 16px 18px; }
  .section__progress-bar { width: 68px; }
  .home-cols { grid-template-columns: 1fr; }
}

/* Collapse optional header actions so the row stays one line */
@media (max-width: 1024px) {
  .page-head__actions .is-optional { display: none; }
}
@media (max-width: 1024px) {
  .page-head__actions .has-label > span { display: none; }
  .page-head__actions .has-label { padding: 8px; min-width: 36px; justify-content: center; }
  /* keep the (now compact) action cluster on one line; let the title side shrink */
  .page-head__actions { flex-wrap: nowrap; flex-shrink: 0; }
  .page-head__title { overflow: hidden; text-overflow: ellipsis; }
}

/* Narrow: drop the section progress bar, keep the number; tighten chrome */
@media (max-width: 760px) {
  .page-body { padding: 14px 14px 40px; }
  .page-head { padding: 12px 14px; }
  .page-head__title { font-size: 18px; }
  .page-head__sub { display: none; }
  .section__progress-bar { display: none; }
  .quality-hero__meta { gap: 10px; font-size: 12px; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .attr-row { grid-template-columns: 1fr; gap: 8px; }
  .family-attribute-row { grid-template-columns: 1fr 1fr; }
  .family-attribute-row__info { grid-column: 1 / -1; }
  .file-row { grid-template-columns: 48px 1fr auto; row-gap: 6px; }
  .file-row__actions { grid-column: 3; }
  .drawer { width: 100%; }
}