@layer theme-important, base, tokens, theme-base, components, overrides, theme;
@layer theme-important {
/* Olhometro theme layer — shared component refinements for the light, dark and system color schemes.
   Composed twice by panelCss (src/panel-view.mjs): in `theme-important` (so its !important declarations win over every
   other layer) and in `theme` (last layer, so its normal declarations win). Color values live only in tokens.css.
   Selection: <html data-theme="light|dark|system">; "system" (or no attribute) follows prefers-color-scheme. */

html, body { background: var(--canvas); color: var(--text-primary); }
/* ---------- Sortable tables ---------- */
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort] .th-sort { display: inline-flex; align-items: center; gap: 6px; }
th[data-sort] .sort-icon { width: 12px; height: 12px; opacity: .35; transition: opacity .15s, transform .15s; }
th[data-sort]:hover .sort-icon { opacity: .7; }
th[aria-sort="ascending"] .sort-icon, th[aria-sort="descending"] .sort-icon { opacity: 1; color: var(--blue); }
th[aria-sort="descending"] .sort-icon { transform: rotate(180deg); }
th[data-sort]:hover { color: var(--text-primary) !important; }
.data-table-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12.5px; background: var(--surface-raised); }
.data-table-pager .pager-buttons { display: flex; gap: 6px; }
.data-table-pager[hidden] { display: none; }
/* ---------- Admin header ---------- */
.brand { color: var(--text-primary); }
.brand-dot { color: var(--blue); }

/* ---------- Dropdowns (Floating UI via /assets/ui.js) ---------- */
.ui-menu {
  position: fixed; top: 0; left: 0; z-index: 100000; min-width: 232px; max-width: min(320px, calc(100vw - 16px)); padding: 6px;
  background: var(--surface-overlay); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-popover);
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top; transition: opacity .12s ease, transform .12s ease; pointer-events: none;
}
.ui-menu[data-open] { opacity: 1; transform: none; pointer-events: auto; }
.ui-menu[hidden] { display: none; }
.ui-menu-header { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border-subtle); }
.ui-menu-header strong { display: block; font-size: 13px; color: var(--text-primary); }
.ui-menu-header small { display: block; font-size: 12px; color: var(--text-muted); }
.ui-menu-label { padding: 8px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.ui-menu-item, .ui-menu form > button {
  display: flex; width: 100%; align-items: center; gap: 10px; min-height: 34px; padding: 6px 8px; border: 0; border-radius: var(--radius-sm);
  background: transparent; box-shadow: none; color: var(--text-secondary); font: 500 13px/1.3 var(--font-sans); text-align: left; text-decoration: none; cursor: pointer;
}
.ui-menu-item:hover, .ui-menu-item:focus-visible, .ui-menu form > button:hover, .ui-menu form > button:focus-visible { background: var(--surface-hover); color: var(--text-primary); outline: none; }
.ui-menu-item svg, .ui-menu form > button svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.ui-menu-item.danger, .ui-menu form > button.danger { color: var(--status-danger-text); }
.ui-menu-item.danger svg, .ui-menu form > button.danger svg { color: currentColor; }
.ui-menu-separator { height: 1px; margin: 4px 2px; background: var(--border-subtle); }
.ui-menu form { margin: 0; }

/* Theme switch (segmented) */
.theme-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 2px 2px 4px; padding: 3px; background: var(--surface-hover); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.theme-switch button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 4px 6px; border: 0; border-radius: var(--radius-sm);
  background: transparent; box-shadow: none; color: var(--text-muted); font: 550 12px/1 var(--font-sans);
}
.theme-switch button svg { width: 14px; height: 14px; }
.theme-switch button:hover { background: transparent; color: var(--text-primary); }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }

.profile-trigger {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; min-height: 36px; padding: 3px 10px 3px 4px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-xs); font: 600 13px/1 var(--font-sans);
}
.profile-trigger:hover { background: var(--surface-hover); color: var(--text-primary); }
.profile-trigger .chevron { width: 14px; height: 14px; color: var(--text-muted); transition: transform .15s; }
.profile-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.avatar-chip { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-light); color: var(--status-info-text); font: 700 11.5px/1 var(--font-sans); text-transform: uppercase; overflow: hidden; }
.avatar-chip img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- MCP integration, copy fields ---------- */
.copy-field { display: flex; gap: 8px; align-items: stretch; }
.copy-field input { flex: 1; min-width: 0; margin: 0; font-family: var(--font-mono); font-size: 12.5px; }
.copy-field button { flex: none; margin: 0; }
.copy-field button svg { width: 15px; height: 15px; }

/* MCP integration block */
.mcp-hero { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--status-info-border); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--status-info-bg), var(--surface) 160%); }
.mcp-hero h3 { margin: 8px 0 4px; }
.mcp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.mcp-steps .channel { display: grid; gap: 10px; align-content: start; padding: 16px; }
.mcp-steps .channel h3 { margin: 0; }
.steps-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text-secondary); }
.example-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.example-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 9px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-secondary); }
.legacy-keys { padding: 14px 16px; border: 1px solid var(--status-attention-border); border-radius: var(--radius-lg); background: var(--status-attention-bg); }
.legacy-keys h3 { color: var(--status-attention-text); margin: 0 0 4px; }
.legacy-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.legacy-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sync-card .channel-heading { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.sync-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0; }
.sync-facts div { padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); }
.sync-facts dt { font-size: 11.5px; color: var(--text-muted); }
.sync-facts dd { margin: 4px 0 0; font-weight: 600; color: var(--text-primary); }

/* ---------- Client portal shell ---------- */
.portal-app-shell, .portal-main-area { background: var(--canvas) !important; }
.portal-sidebar { background: var(--sidebar-bg) !important; border-right: 1px solid var(--sidebar-border) !important; }
.sidebar-header { border-bottom: 1px solid var(--sidebar-border) !important; }
.sidebar-brand, .sidebar-brand-text { color: var(--text-primary) !important; }
.sidebar-section-label { color: var(--sidebar-muted) !important; font-size: 10.5px !important; letter-spacing: .06em !important; font-weight: 600; }
.sidebar-nav-item { min-height: 38px !important; border-radius: var(--radius-md) !important; color: var(--sidebar-fg) !important; font-weight: 550; box-shadow: none !important; }
.sidebar-nav-item .sidebar-item-icon, .sidebar-nav-item .sidebar-item-label { color: inherit !important; }
.sidebar-nav-item .sidebar-item-icon { color: var(--sidebar-muted) !important; }
.sidebar-nav-item:hover { background: var(--sidebar-hover) !important; color: var(--text-primary) !important; }
.sidebar-nav-item.active { background: var(--sidebar-active-bg) !important; color: var(--sidebar-active-fg) !important; box-shadow: none !important; }
.sidebar-nav-item.active .sidebar-item-icon, .sidebar-nav-item.active .sidebar-item-label { color: var(--sidebar-active-fg) !important; }
.sidebar-badge { background: var(--surface-hover) !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; border-radius: 999px !important; font-weight: 600; }
.sidebar-nav-item.active .sidebar-badge { background: var(--surface) !important; color: var(--sidebar-active-fg) !important; border-color: var(--status-info-border) !important; }
.sidebar-footer { background: transparent !important; border-top: 1px solid var(--sidebar-border) !important; }
.sidebar-profile-trigger {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; box-shadow: none; color: var(--text-primary); text-align: left;
}
.sidebar-profile-trigger:hover, .sidebar-profile-trigger[aria-expanded="true"] { background: var(--sidebar-hover); color: var(--text-primary); }
.sidebar-profile-trigger .sidebar-profile-info { min-width: 0; flex: 1; display: grid; gap: 2px; }
.sidebar-profile-trigger .sidebar-profile-name { font-weight: 650; font-size: 13px; color: var(--text-primary) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-profile-trigger .sidebar-profile-channel { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--sidebar-muted) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-profile-trigger .chevron { width: 15px; height: 15px; color: var(--sidebar-muted); flex: none; }
.portal-sidebar.collapsed .sidebar-profile-trigger .sidebar-profile-info, .portal-sidebar.collapsed .sidebar-profile-trigger .chevron { display: none; }
.cn-avatar { background: var(--blue-light); color: var(--status-info-text); border-color: var(--border) !important; }
.cn-avatar-fallback { color: var(--status-info-text) !important; background: var(--blue-light) !important; }

.portal-topbar { background: color-mix(in srgb, var(--surface) 90%, transparent) !important; backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border) !important; }

.portal-metric-strip, .dashboard-kpi-strip, .module-kpi-strip, .dashboard-chart-card, .triage-card, .operations-situation, .operations-priorities, .portal-toolbar, .portal-table-wrap, .cn-table-container, .channel-card {
  background: var(--surface) !important; border-color: var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-xs);
}
.portal-metric, .module-kpi, .operations-metric { border-color: var(--border-subtle) !important; }
.metric-val, .portal-metric strong { color: var(--text-primary) !important; letter-spacing: -.02em; }
.cn-pagination { border-top: 1px solid var(--border) !important; background: var(--surface-raised) !important; }
.cn-pagination-link { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text-secondary) !important; box-shadow: none !important; }
.cn-pagination-link:hover:not([disabled]) { background: var(--surface-hover) !important; color: var(--text-primary) !important; }
.portal-drawer-right { background: var(--surface) !important; border-left: 1px solid var(--border) !important; box-shadow: var(--shadow-overlay) !important; color: var(--text-primary); }
.drawer-header, .drawer-nav { background: var(--surface) !important; border-color: var(--border) !important; }
.drawer-tab-btn { background: transparent !important; color: var(--text-muted) !important; box-shadow: none !important; border: 0 !important; }
.drawer-tab-btn:hover { color: var(--text-primary) !important; background: var(--surface-hover) !important; }
.drawer-tab-btn.active { color: var(--blue) !important; box-shadow: inset 0 -2px 0 var(--blue) !important; }
.drawer-backdrop, .sidebar-backdrop { background: var(--backdrop) !important; }

/* Cost button in listings table: compact, outlined instead of a filled block */
.col-cost button, .col-cost .button { min-height: 28px !important; height: 28px; padding: 0 10px !important; background: var(--surface) !important; color: var(--blue) !important; border: 1px dashed var(--status-info-border) !important; box-shadow: none !important; font-size: 12px !important; border-radius: var(--radius-sm) !important; white-space: nowrap; }
.col-cost button:hover, .col-cost .button:hover { background: var(--status-info-bg) !important; }

/* Mobile */
@media (max-width: 860px) {
  .copy-field { flex-direction: column; }
  .mcp-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Sortable header button reset */
th .th-sort { all: unset; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: inherit; font: inherit; letter-spacing: inherit; border-radius: var(--radius-xs); }
th .th-sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Floating theme switch on standalone pages (login, invite, OAuth) */
.page-theme-switch { position: fixed; top: 14px; right: 14px; z-index: 50; margin: 0; background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); }
.page-theme-switch button span { display: none; }
.page-theme-switch button { min-width: 30px; }

/* Admin profile trigger: the chevron is an SVG now */
.profile-trigger .profile-label::after { content: none !important; }
.profile-trigger .profile-label { font-size: 13px; }
.ui-menu form > button { justify-content: flex-start !important; width: 100% !important; margin: 0 !important; }
.ui-menu a.ui-menu-item { justify-content: flex-start; }
@media (max-width: 720px) { .profile-trigger .profile-label { display: none; } .profile-trigger { padding: 3px 6px 3px 4px; } }

/* Monetary and quantity values: tabular figures of the UI font (monospace stays for SKU/MLB identifiers) */
.price-current, .price-regular, .stock-num, .sales-num, .net-payout, .stock-qty, .sold-qty, .sales-total-val, .metric-val, .stat-line-val, .dre-val, .promo-price-block, .promo-price-block del { font-family: var(--font-sans) !important; font-variant-numeric: tabular-nums; letter-spacing: -.005em; }

/* Topbar pills and drawer close */
.drawer-close-btn { background: transparent !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; box-shadow: none !important; }
.drawer-close-btn:hover { background: var(--surface-hover) !important; color: var(--text-primary) !important; }

/* Compact admin header on phones */
@media (max-width: 520px) {
  .profile-trigger .chevron { display: none; }
  .profile-trigger { padding: 3px !important; }
}
@media (max-width: 860px) {
  .topbar-hamburger-btn { background: var(--surface) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; box-shadow: none !important; }
}

/* Company modal: shrink to content (legacy height:auto + UA insets stretched it) and never let anchors/focus
   scroll the dialog box itself — only .modal-scroll scrolls, so the header with the X stays visible. */

/* Header actions: icon-only theme picker next to the profile */
.theme-picker { display: inline-flex; }
.theme-trigger {
  display: inline-grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0 !important; border: 1px solid var(--border) !important;
  border-radius: 999px !important; background: var(--surface) !important; color: var(--text-secondary) !important; box-shadow: var(--shadow-xs) !important;
}
.theme-trigger:hover, .theme-trigger[aria-expanded="true"] { background: var(--surface-hover) !important; color: var(--text-primary) !important; }
.theme-trigger svg { width: 17px; height: 17px; }
.theme-icon { display: none; }
:root[data-theme="light"] .theme-icon-light, :root[data-theme="dark"] .theme-icon-dark,
:root[data-theme="system"] .theme-icon-system, :root:not([data-theme]) .theme-icon-system { display: inline-grid; }
.theme-menu { min-width: 176px; }
.theme-menu .ui-menu-item { justify-content: flex-start; }
.theme-menu .ui-menu-item .check { margin-left: auto; width: 15px; height: 15px; color: var(--blue); visibility: hidden; }
.theme-menu .ui-menu-item[aria-checked="true"] { color: var(--text-primary); }
.theme-menu .ui-menu-item[aria-checked="true"] .check { visibility: visible; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

/* Company sync status line */

/* Channel brand logos */
.channel-icon-logo, .channel-brand-icon { display: inline-grid !important; place-items: center; width: auto !important; height: auto !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.channel-logo { display: block; border-radius: 10px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 8%, transparent); }

.mcp-hero .copy-field { margin-top: 4px; }

/* ---------- Client invite flow (/convite -> código -> canais) ---------- */
.client-main.client-main-flow { width: min(460px, calc(100vw - 32px)) !important; max-width: none !important; margin: 56px auto 40px !important; padding: 28px 28px 24px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-sm) !important; text-align: left !important; }
.client-main-flow > .brand { justify-content: flex-start !important; margin: 0 0 20px !important; font-size: 18px !important; }
.client-main-flow > .brand .brand-logo { width: 28px !important; height: 28px !important; }
.invite-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; text-align: left; }
.invite-flow > *, .invite-flow #otp-form > * { min-width: 0; }
.invite-steps { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.invite-steps li { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.invite-steps li + li::before { content: ""; width: 18px; height: 1px; background: var(--border-strong); margin-right: 2px; }
.invite-step-dot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); font-size: 11px; font-weight: 700; }
.invite-step-dot svg { width: 12px; height: 12px; }
.invite-steps li.is-current { color: var(--text-primary); }
.invite-steps li.is-current .invite-step-dot { background: var(--blue); border-color: var(--blue); color: var(--text-on-accent); }
.invite-steps li.is-done { color: var(--status-connected-text); }
.invite-steps li.is-done .invite-step-dot { background: var(--status-connected-bg); border-color: var(--status-connected-border); color: var(--status-connected-text); }
/* In-place transition after portal.js sends the code (step 1 -> step 2) */
.invite-flow:has(#otp-form[data-is-sent="true"]) .invite-steps li[data-step="1"] { color: var(--status-connected-text); }
.invite-flow:has(#otp-form[data-is-sent="true"]) .invite-steps li[data-step="1"] .invite-step-dot { background: var(--status-connected-bg); border-color: var(--status-connected-border); color: var(--status-connected-text); font-size: 0; }
.invite-flow:has(#otp-form[data-is-sent="true"]) .invite-steps li[data-step="1"] .invite-step-dot::before { content: "\2713"; font-size: 11px; }
.invite-flow:has(#otp-form[data-is-sent="true"]) .invite-steps li[data-step="2"] { color: var(--text-primary); }
.invite-flow:has(#otp-form[data-is-sent="true"]) .invite-steps li[data-step="2"] .invite-step-dot { background: var(--blue); border-color: var(--blue); color: var(--text-on-accent); }
.when-sent { display: none; }
.invite-flow:has(#otp-form[data-is-sent="true"]) .when-sent { display: inline; }
.invite-flow:has(#otp-form[data-is-sent="true"]) .when-idle { display: none; }
#otp-form[data-is-sent="false"] .otp-field-container, #otp-form[data-is-sent="false"] .otp-expiry { display: none !important; }

.invite-company { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); }
.invite-company-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: none; overflow: hidden; border-radius: 10px; background: var(--blue-light); color: var(--status-info-text); font-weight: 700; font-size: 14px; }
.invite-company-mark img { width: 100%; height: 100%; object-fit: cover; }
.invite-company small { display: block; font-size: 11.5px; color: var(--text-muted); }
.invite-company strong { display: block; font-size: 15px; color: var(--text-primary); }
.invite-title { margin: 4px 0 0 !important; font-size: 22px !important; line-height: 1.25; letter-spacing: -.02em; text-align: left !important; }
.invite-lead { margin: -8px 0 0 !important; color: var(--text-secondary) !important; font-size: 14px; text-align: left !important; }
.invite-email { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--status-info-border); border-radius: var(--radius-md); background: var(--status-info-bg); color: var(--status-info-text); }
.invite-email svg { width: 18px; height: 18px; flex: none; }
.invite-email strong { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; color: var(--status-info-text); }
.invite-flow #otp-form { display: grid; gap: 12px; margin: 0 !important; }
.invite-flow .otp-field-container { margin: 0 !important; text-align: left; }
.invite-flow .otp-field-label { display: flex; justify-content: flex-start; margin-bottom: 8px !important; text-align: left !important; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.invite-flow .otp-group { display: flex !important; width: 100% !important; justify-content: space-between !important; max-width: none !important; margin: 0 !important; gap: 8px !important; }
.invite-flow .otp-digit { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: 56px !important; height: 54px !important; border-radius: var(--radius-md) !important; border: 1px solid var(--border-strong) !important; background: var(--surface) !important; color: var(--text-primary) !important; font: 700 22px/54px var(--font-sans) !important; box-shadow: var(--shadow-xs) !important; }
.invite-flow .otp-digit:focus { border-color: var(--border-focus) !important; box-shadow: var(--focus-ring) !important; }
.invite-flow .otp-expiry { margin: 0 !important; font-size: 12.5px; color: var(--text-muted); text-align: left !important; }
.invite-flow .otp-submit-wrap { margin: 0 !important; }
.invite-flow .verification-primary, .invite-flow .button.verification-primary {
  display: flex !important; width: 100% !important; max-width: none !important; min-height: 44px !important; justify-content: center; align-items: center; gap: 8px; margin: 0 !important;
  background: var(--blue) !important; color: var(--text-on-accent) !important; border: 0 !important; border-radius: var(--radius-md) !important; font: 650 14px/1 var(--font-sans) !important; box-shadow: var(--shadow-xs) !important; text-decoration: none;
}
.invite-flow .verification-primary:hover { background: var(--blue-hover) !important; }
.invite-flow .verification-primary:disabled { background: color-mix(in srgb, var(--blue) 45%, var(--surface)) !important; color: color-mix(in srgb, var(--text-on-accent) 85%, transparent) !important; opacity: 1 !important; cursor: not-allowed; }
.invite-flow .verification-notice, .invite-flow .otp-feedback:not([hidden]) { margin: 0 !important; padding: 10px 12px !important; border-radius: var(--radius-md) !important; font-size: 13px !important; text-align: left !important; }
.invite-flow .resend-code { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin: -4px 0 0 !important; font-size: 13px; color: var(--text-muted); }
.invite-flow .resend-code[hidden] { display: none !important; }
.invite-flow .resend-otp-btn { min-height: 0 !important; padding: 2px 4px !important; background: none !important; border: 0 !important; box-shadow: none !important; color: var(--blue) !important; font-weight: 600 !important; font-size: 13px !important; }
.invite-flow .resend-otp-btn:disabled { color: var(--text-muted) !important; }
.invite-footnote { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0 !important; padding-top: 14px; border-top: 1px solid var(--border-subtle); font-size: 12px; color: var(--text-muted) !important; text-align: left !important; }
.invite-footnote svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

.invite-channels { display: grid; gap: 10px; }
.invite-channel { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.invite-channel.is-connected { border-color: var(--status-connected-border); }
.invite-channel.is-coming { background: var(--surface-raised); }
.invite-channel.is-coming .channel-logo { filter: saturate(.7); opacity: .85; }
.invite-channel-head { display: flex; align-items: center; gap: 12px; }
.invite-channel-head > div { flex: 1; min-width: 0; }
.invite-channel-head h2 { margin: 0; font-size: 15px; }
.invite-channel-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-channel-note { margin: 0 !important; font-size: 13px; color: var(--text-secondary); }
.invite-channel-meta { margin: 0 !important; font-size: 12px; color: var(--text-muted); }
.invite-channel form { margin: 0; }
.invite-flow .connection-refresh { justify-self: center; min-height: 36px; }

.invite-outcome { display: grid; justify-items: center; gap: 14px; text-align: center; }
.invite-outcome-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--status-connected-bg); color: var(--status-connected-text); }
.invite-outcome.error .invite-outcome-icon { background: var(--status-danger-bg); color: var(--status-danger-text); }
.invite-outcome-icon svg { width: 24px; height: 24px; }

@media (max-width: 520px) {
  .page-theme-switch { position: static; justify-self: end; width: max-content; margin: 12px 16px 0 auto; display: grid; }
  .client-main.client-main-flow { margin: 12px auto 24px !important; padding: 22px 18px 18px !important; }
  .invite-steps { gap: 6px; }
  .invite-steps li + li::before { width: 10px; }
  .invite-step-label { font-size: 11.5px; }
  .invite-flow .otp-group { gap: 6px !important; }
  .invite-flow .otp-digit { height: 50px !important; font-size: 20px !important; line-height: 50px !important; }
  .invite-channel-head .badge { display: none; }
}
.invite-flow .otp-field-container { display: block !important; text-align: left !important; align-items: stretch !important; }
/* Invite flow: centered brand and step indicator */
.client-main-flow > .brand { justify-content: center !important; }
.invite-steps { justify-content: center; }
/* Login: password visibility toggle as a bare icon (follows the theme text color) */
.password-wrap .password-toggle { width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--text-muted) !important; border-radius: var(--radius-sm) !important; }
.password-wrap .password-toggle:hover, .password-wrap .password-toggle[aria-pressed="true"] { background: transparent !important; color: var(--text-primary) !important; }
.password-wrap .password-toggle:focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 1px; }
.auth-form > .auth-brand { margin-bottom: 20px !important; }

/* ---------- Client MCP: admin switch, portal card, consent chooser ---------- */
.mcp-client-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.mcp-client-toggle h3 { margin: 0 0 2px; }
.mcp-client-toggle .form-note { margin: 0; }
.switch { position: relative; flex: none; width: 44px !important; height: 24px !important; min-height: 24px !important; padding: 0 !important; border-radius: 999px !important; border: 1px solid var(--border-strong) !important; background: var(--surface-active) !important; box-shadow: none !important; cursor: pointer; }
.switch[aria-checked="true"] { background: var(--blue) !important; border-color: var(--blue) !important; }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-on-accent); box-shadow: var(--shadow-xs); transition: transform .15s ease; }
.switch[aria-checked="true"] .switch-thumb { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 2px; }

.client-mcp-card { display: grid; gap: 14px; margin-top: 20px; padding: 20px !important; }
.client-mcp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.client-mcp-head h2 { margin: 4px 0 2px; }
.client-mcp-head p { margin: 0; }
.client-mcp-card .steps-list { margin: 0; }
.client-mcp-card h3 { margin: 4px 0 0; }
.client-mcp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.client-mcp-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); }
.client-mcp-list strong { display: block; color: var(--text-primary); }
.client-mcp-list small { color: var(--text-muted); }
.client-mcp-list form { margin: 0; }

.consent-choice { width: min(520px, calc(100vw - 32px)) !important; }
.consent-choice .surface { display: grid; gap: 8px; justify-items: start; padding: 16px !important; }
.consent-choice .surface h2 { margin: 0; }
.consent-choice .surface p { margin: 0; }
@media (max-width: 520px) { .mcp-client-toggle, .client-mcp-head, .client-mcp-list li { flex-direction: column; align-items: stretch; } .switch { align-self: flex-start; } }
.access-notice { justify-items: start; }
.access-notice-icon { background: var(--status-info-bg) !important; color: var(--status-info-text) !important; }
.access-notice .steps-list { margin: 0; display: grid; gap: 6px; color: var(--text-secondary); }
.access-notice-site { justify-self: stretch; justify-content: center; min-height: 40px; }
.client-mcp-head .badge { align-self: flex-start; }
.consent-choice > img { width: 36px; height: 36px; }

/* =====================================================================================================================
   REDESIGN 2026-10 — shared components, client shell and screens (docs/BRIEFING-REDESIGN-PORTAL-ADMIN.md).
   Every color comes from tokens.css. Declarations marked !important here land in the `theme-important` layer and
   therefore win over the legacy !important rules of workspace-theme.css / premium-light.css.
   ===================================================================================================================== */

/* ---------- Base type ---------- */
body { font-family: var(--font-sans); font-size: 13.5px; color: var(--text-primary); background: var(--canvas); -webkit-font-smoothing: antialiased; }
.num, .tabular-val, .tabular-cell, .metric-val, td, kbd, time { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
:where(button, a, input, select, textarea, summary, [role="option"], [tabindex]):focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 2px !important; box-shadow: none !important; }
.text-success { color: var(--status-connected-text) !important; }
.text-warning { color: var(--status-attention-text) !important; }
.text-risk { color: var(--status-risk-text) !important; }
.text-danger { color: var(--status-danger-text) !important; }
.text-accent { color: var(--text-strong) !important; }
.text-muted, .muted { color: var(--text-muted) !important; }
code, .tag-code { font-family: var(--font-mono); }

/* Eyebrow: mono, uppercase, accent. The legacy dot is hidden. */
.eyebrow { display: inline-flex !important; align-items: center; gap: 6px; font: 500 11px/1.4 var(--font-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--accent-icon) !important; }
.eyebrow-dot { display: none !important; }

/* ---------- Buttons ---------- */
button, .button {
  min-height: 40px; padding: 0 16px; gap: 8px; border-radius: 10px !important; border: 1px solid var(--blue-border);
  background: var(--blue); color: var(--text-on-accent); font: 650 13px/1 var(--font-sans); box-shadow: none; cursor: pointer;
  transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
button:hover, .button:hover { background: var(--blue-hover); color: var(--text-on-accent); }
.button.primary, button.primary { background: var(--blue) !important; border: 1px solid var(--blue-border) !important; color: var(--text-on-accent) !important; box-shadow: var(--shadow-primary) !important; }
.button.primary:hover, button.primary:hover { background: var(--blue-hover) !important; }
.secondary, .button.secondary, button.secondary { background: var(--surface-raised) !important; border: 1px solid var(--border-strong) !important; color: var(--text-primary) !important; box-shadow: none !important; }
.secondary:hover, .button.secondary:hover, button.secondary:hover { background: var(--surface-active) !important; border-color: var(--border-strong) !important; color: var(--text-strong) !important; }
.quiet, button.quiet { background: transparent !important; border-color: transparent !important; color: var(--text-secondary) !important; box-shadow: none !important; }
.quiet:hover, button.quiet:hover { background: var(--surface-hover) !important; color: var(--text-primary) !important; }
.danger-text, button.danger-text, .button.danger-text { color: var(--status-danger-text) !important; }
.button.secondary.danger-text, button.secondary.danger-text { background: transparent !important; border-color: var(--status-danger-border) !important; }
.button.secondary.danger-text:hover, button.secondary.danger-text:hover { background: var(--status-danger-bg) !important; }
.small-button, .button.small-button, button.small-button { min-height: 32px !important; padding: 0 12px !important; font-size: 12.5px !important; border-radius: 8px !important; }
button:disabled, .button[aria-disabled="true"], button[disabled] { background: transparent !important; border-color: var(--border) !important; color: var(--text-disabled) !important; box-shadow: none !important; cursor: not-allowed !important; opacity: 1 !important; }

/* ---------- Badges and chips ---------- */
.badge {
  display: inline-flex !important; align-items: center; gap: 5px; min-height: 22px; padding: 3px 9px !important; border-radius: 999px !important; border: 0 !important;
  font: 600 11.5px/1.2 var(--font-sans) !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap; box-shadow: none !important;
}
.badge.small { min-height: 20px; padding: 2px 8px !important; font-size: 11px !important; }
.badge.success { color: var(--status-connected-text) !important; background: var(--status-connected-bg) !important; }
.badge.warning { color: var(--status-attention-text) !important; background: var(--status-attention-bg) !important; }
.badge.danger { color: var(--status-danger-text) !important; background: var(--status-danger-bg) !important; }
.badge.info { color: var(--status-info-text) !important; background: var(--status-info-bg) !important; }
.badge.neutral, .badge:not(.success):not(.warning):not(.danger):not(.info) { color: var(--status-neutral-text) !important; background: var(--status-neutral-bg) !important; }
.badge.tag-promo { min-height: 0; padding: 1px 5px !important; border-radius: 4px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .02em !important; text-transform: uppercase !important; color: var(--status-attention-text) !important; background: var(--status-attention-bg) !important; }
.status-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 999px; background: var(--status-neutral-dot); }
.status-dot.success, .status-dot.green { background: var(--status-connected-dot); }
.status-dot.warning { background: var(--status-attention-dot); }
.status-dot.danger, .status-dot.red { background: var(--status-danger-dot); }
.status-dot.info { background: var(--status-info-dot); }
.tone-success { --tone-fg: var(--status-connected-text); --tone-bg: var(--status-connected-bg); --tone-dot: var(--status-connected-dot); }
.tone-warning { --tone-fg: var(--status-attention-text); --tone-bg: var(--status-attention-bg); --tone-dot: var(--status-attention-dot); }
.tone-risk { --tone-fg: var(--status-risk-text); --tone-bg: var(--status-risk-bg); --tone-dot: var(--status-risk-dot); }
.tone-danger { --tone-fg: var(--status-danger-text); --tone-bg: var(--status-danger-bg); --tone-dot: var(--status-danger-dot); }
.tone-info { --tone-fg: var(--status-info-text); --tone-bg: var(--status-info-bg); --tone-dot: var(--status-info-dot); }
.tone-neutral { --tone-fg: var(--status-neutral-text); --tone-bg: var(--status-neutral-bg); --tone-dot: var(--status-neutral-dot); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 3px 9px; border-radius: 999px; font: 600 11.5px/1.2 var(--font-sans); color: var(--tone-fg, var(--status-neutral-text)); background: var(--tone-bg, var(--status-neutral-bg)); white-space: nowrap; }
.chip-mono { font-family: var(--font-mono); border-radius: 6px; padding: 2px 7px; font-size: 11px; }

/* ---------- Segmented controls ---------- */
.portal-chips-group, .metric-selector, .segmented {
  display: inline-flex !important; align-items: center; gap: 2px !important; padding: 3px !important; background: var(--surface-sunken) !important;
  border: 1px solid var(--border) !important; border-radius: 10px !important; box-shadow: none !important; flex-wrap: nowrap;
}
.portal-filter-chip, .metric-select-btn, .segmented > button {
  min-height: 32px !important; height: 32px; padding: 0 12px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important;
  color: var(--text-muted) !important; font: 600 12.5px/1 var(--font-sans) !important; box-shadow: none !important; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.portal-filter-chip:hover, .metric-select-btn:hover, .segmented > button:hover { color: var(--text-primary) !important; background: transparent !important; }
.portal-filter-chip.active, .portal-filter-chip[aria-checked="true"], .metric-select-btn.active, .segmented > button[aria-pressed="true"] { background: var(--surface-active) !important; color: var(--text-strong) !important; box-shadow: none !important; }
.chip-count { font-family: var(--font-mono); font-size: 11px; color: inherit; opacity: .8; background: none !important; padding: 0 !important; }
.chip-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--status-neutral-dot); }
.chip-dot.green { background: var(--status-connected-dot); }
.chip-dot.red { background: var(--status-danger-dot); }

/* ---------- Inputs ---------- */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"])), textarea, select {
  min-height: 38px; padding: 0 12px; border-radius: 9px !important; border: 1px solid var(--border) !important; background: var(--input-bg) !important;
  color: var(--text-primary) !important; font: 500 13px/1.3 var(--font-sans); box-shadow: none !important;
}
textarea { padding: 10px 12px; }
input::placeholder, textarea::placeholder { color: var(--text-faint) !important; opacity: 1; }
input:where(:not([type="checkbox"]):not([type="radio"])):focus, textarea:focus, select:focus { border-color: var(--border-focus) !important; box-shadow: var(--focus-ring) !important; outline: none; }
input[readonly], textarea[readonly], input:disabled, select:disabled, textarea:disabled { background: var(--input-disabled-bg) !important; color: var(--text-secondary) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--blue); }

/* ---------- Cards ---------- */
.surface, .portal-metric-strip, .module-kpi-strip, .dashboard-chart-card, .triage-card,
.portal-toolbar, .portal-table-wrap, .cn-table-container, .channel-card, .dashboard-channel-summary {
  background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; box-shadow: none !important;
}
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-header h3, .card-title { margin: 2px 0 0 !important; font: 700 15px/1.3 var(--font-sans) !important; letter-spacing: -.01em; color: var(--text-primary) !important; }

/* ---------- Designed select (ui-select) ---------- */
.ui-select { position: relative; display: inline-flex; flex: none; min-width: 0; }
.ui-select > select { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; opacity: 0 !important; pointer-events: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
.ui-select-trigger {
  height: 38px !important; min-height: 38px !important; display: inline-flex !important; align-items: center; gap: 8px; max-width: 100%; padding: 0 10px 0 12px !important;
  background: var(--surface-sunken) !important; border: 1px solid var(--border) !important; border-radius: 9px !important; color: var(--text-primary) !important;
  font: 500 12.5px/1 var(--font-sans) !important; box-shadow: none !important; white-space: nowrap; text-align: left;
}
.ui-select-trigger:hover { border-color: var(--border-strong) !important; background: var(--surface-raised) !important; }
.ui-select.is-open .ui-select-trigger, .ui-select-trigger[aria-expanded="true"] { border-color: var(--blue-border) !important; background: var(--surface-raised) !important; }
.ui-select-label { color: var(--text-muted); font-weight: 500; }
.ui-select-value { font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; }
.ui-select-icon, .ui-select-chevron { width: 14px; height: 14px; flex: none; color: var(--text-muted); }
.ui-select-chevron { transition: transform var(--duration-fast); }
.ui-select-trigger[aria-expanded="true"] .ui-select-chevron { transform: rotate(180deg); }
.ui-select.is-compact .ui-select-trigger { height: 32px !important; min-height: 32px !important; padding: 0 8px 0 10px !important; border-radius: 8px !important; font-size: 12px !important; background: var(--surface) !important; }
.ui-listbox {
  position: fixed; top: 0; left: 0; z-index: 100001; box-sizing: border-box; max-width: min(320px, calc(100vw - 16px)); max-height: min(360px, 60vh); overflow: auto;
  padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--surface-overlay); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: var(--shadow-popover); color: var(--text-primary); outline: none;
}
.ui-listbox[hidden] { display: none !important; }
.ui-listbox-title { padding: 6px 10px 4px; font: 500 10px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.ui-option { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 8px; font: 500 13px/1.3 var(--font-sans); color: var(--text-secondary); cursor: pointer; user-select: none; }
.ui-option:hover, .ui-option:focus { background: var(--surface-active); color: var(--text-primary); outline: none !important; }
.ui-option:focus-visible { box-shadow: inset 0 0 0 2px var(--focus) !important; outline: none !important; }
.ui-option[aria-selected="true"] { color: var(--text-strong); background: var(--selection-bg); }
.ui-option[aria-disabled="true"] { color: var(--text-disabled); cursor: not-allowed; background: transparent; }
.ui-option-label { flex: 1; min-width: 0; }
.ui-option-check { width: 15px; height: 15px; flex: none; color: var(--accent); visibility: hidden; }
.ui-option[aria-selected="true"] .ui-option-check { visibility: visible; }
/* Channel selector variant (topbar) */
.ui-select-channel .ui-select-trigger { height: 40px !important; min-height: 40px !important; padding: 0 12px 0 8px !important; gap: 10px; background: var(--surface) !important; border-radius: 10px !important; }
.channel-trigger-logo { display: inline-flex; flex: none; }
.channel-trigger-logo .channel-logo { width: 24px; height: 24px; border-radius: 7px; }
.channel-trigger-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.2; min-width: 0; }
.channel-trigger-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.channel-trigger-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 500; color: var(--tone-fg, var(--text-muted)); }
.channel-trigger-status .status-dot { width: 6px; height: 6px; }

/* ---------- Popovers and menus ---------- */
.ui-menu { background: var(--surface-overlay) !important; border: 1px solid var(--border-strong) !important; border-radius: 12px !important; box-shadow: var(--shadow-popover) !important; }
.ui-menu-item:hover, .ui-menu-item:focus-visible, .ui-menu form > button:hover { background: var(--surface-active) !important; }

/* ---------- Toast (bottom-right on desktop, full width on phones) ---------- */
.portal-floating-toast {
  position: fixed !important; top: auto !important; left: auto !important; right: 24px !important; bottom: 24px !important; transform: none !important; z-index: 100002 !important;
  display: flex !important; align-items: center; gap: 12px; max-width: min(420px, calc(100vw - 32px)); padding: 12px 12px 12px 14px !important;
  background: var(--surface-overlay) !important; color: var(--text-primary) !important; border: 1px solid var(--border-strong) !important; border-left: 3px solid var(--status-info-dot) !important;
  border-radius: 12px !important; box-shadow: var(--shadow-popover) !important; font: 600 13px/1.4 var(--font-sans) !important; animation: olh-toast-in .18s var(--ease-standard);
}
.portal-floating-toast.toast-success { border-left-color: var(--status-connected-dot) !important; background: var(--surface-overlay) !important; color: var(--text-primary) !important; }
.portal-floating-toast.toast-error { border-left-color: var(--status-danger-dot) !important; background: var(--surface-overlay) !important; color: var(--text-primary) !important; }
.portal-floating-toast.is-leaving { opacity: 0; transform: translateY(6px) !important; transition: opacity .25s, transform .25s; }
.toast-close-btn { min-height: 28px !important; width: 28px; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--text-muted) !important; font-size: 18px !important; border-radius: 7px !important; }
.toast-close-btn:hover { background: var(--surface-active) !important; color: var(--text-primary) !important; }
@keyframes olh-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- States: empty, not collected, failure, loading, unavailable ---------- */
.state-card, .data-unavailable-state, .portal-empty {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center; text-align: center !important; gap: 10px !important;
  padding: 32px 24px !important; color: var(--text-primary);
}
.data-unavailable-state { background: var(--surface) !important; border: 1px dashed var(--border-strong) !important; border-radius: 12px !important; }
.state-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.state-card.is-pending { border-style: dashed; border-color: var(--border-strong); }
.state-card.is-failure { background: color-mix(in srgb, var(--status-danger-dot) 5%, var(--surface)); border-color: var(--status-danger-border); }
.state-card.is-failure .state-icon { background: var(--status-danger-bg); color: var(--status-danger-text); }
.state-card.is-failure strong { color: var(--status-danger-strong); }
.state-icon, .empty-icon-wrap, .data-unavailable-icon {
  display: flex !important; align-items: center; justify-content: center; width: 48px !important; height: 48px !important; border-radius: 12px !important;
  background: var(--surface-active) !important; color: var(--text-faint) !important; border: 0 !important; font: 700 20px/1 var(--font-sans);
}
.state-icon svg, .empty-icon-wrap svg { width: 22px; height: 22px; }
.data-unavailable-state strong, .portal-empty strong, .state-card strong { font: 700 14.5px/1.3 var(--font-sans); color: var(--text-primary); }
.data-unavailable-state p, .portal-empty p, .state-card p { max-width: 380px; margin: 0 auto !important; font-size: 12.5px; color: var(--text-muted) !important; }
.state-action { font-size: 12px; font-weight: 600; color: var(--link); text-decoration: none; }
.skeleton { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--skeleton), var(--skeleton-shine), var(--skeleton)); background-size: 200% 100%; animation: olh-shimmer 1.4s linear infinite; }
@keyframes olh-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.state-panel { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface-sunken); }
.state-panel strong { font-size: 13.5px; color: var(--text-primary); }

/* Alert banners (coverage partial / collection failed) */
.alert-banner { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--tone-border, var(--border)); background: var(--tone-bg, var(--surface)); color: var(--text-primary); }
.alert-banner.tone-warning { --tone-border: var(--status-attention-border); }
.alert-banner.tone-danger { --tone-border: var(--status-danger-border); }
.alert-banner.tone-info { --tone-border: var(--status-info-border); }
.alert-banner-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--tone-fg); background: color-mix(in srgb, var(--tone-dot) 18%, transparent); }
.alert-banner-icon svg { width: 15px; height: 15px; }
.alert-banner strong { display: block; font-size: 13px; color: var(--tone-fg); }
.alert-banner p { margin: 2px 0 0 !important; font-size: 12.5px; color: var(--text-secondary) !important; }

/* ---------- Client shell ---------- */
.portal-app-shell, .portal-main-area { background: var(--canvas) !important; }
.portal-sidebar {
  width: 240px !important; min-width: 240px !important; max-width: 240px !important; background: var(--sidebar-bg) !important; border-right: 1px solid var(--sidebar-border) !important;
  overflow: visible !important; z-index: 90;
}
.portal-main-area { margin-left: 240px !important; width: calc(100% - 240px) !important; }
.portal-app-shell.sidebar-collapsed .portal-main-area, .portal-sidebar.collapsed ~ .portal-main-area { margin-left: 68px !important; width: calc(100% - 68px) !important; }
.portal-sidebar.collapsed { width: 68px !important; min-width: 68px !important; max-width: 68px !important; }
.sidebar-header { height: 64px !important; padding: 0 18px !important; border-bottom: 0 !important; display: flex; align-items: center; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; color: var(--sidebar-active-fg) !important; text-decoration: none; }
.sidebar-brand .brand-logo { width: 32px; height: 32px; border-radius: 9px; }
.sidebar-brand-text { font: 800 17px/1 var(--font-sans) !important; letter-spacing: -.03em !important; color: var(--sidebar-active-fg) !important; }
.sidebar-brand-text .brand-dot { color: var(--focus); }
.sidebar-body { display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 8px 14px 12px !important; flex: 1; overflow-y: auto; overflow-x: visible; }
.sidebar-section-label { padding: 14px 10px 6px !important; font: 500 10.5px/1.2 var(--font-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--sidebar-muted) !important; }
.sidebar-nav { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.sidebar-nav-item {
  display: flex !important; align-items: center !important; gap: 11px !important; height: 40px; min-height: 40px !important; padding: 0 10px !important; border-radius: 9px !important;
  color: var(--sidebar-fg) !important; font: 600 13.5px/1 var(--font-sans) !important; text-decoration: none; background: transparent !important; box-shadow: none !important;
}
.sidebar-nav-item .sidebar-item-icon { display: inline-flex; color: var(--sidebar-muted) !important; }
.sidebar-nav-item .sidebar-item-label { flex: 1; min-width: 0; color: inherit !important; }
.sidebar-nav-item:hover { background: var(--sidebar-hover) !important; color: var(--sidebar-active-fg) !important; }
.sidebar-nav-item.active { background: var(--sidebar-active-bg) !important; color: var(--sidebar-active-fg) !important; box-shadow: none !important; }
.sidebar-nav-item.active .sidebar-item-icon { color: var(--sidebar-active-icon) !important; }
.sidebar-nav-item.active .sidebar-item-label { color: var(--sidebar-active-fg) !important; }
.sidebar-badge { font: 600 10.5px/1 var(--font-mono) !important; padding: 3px 7px !important; border-radius: 999px !important; background: var(--sidebar-badge-bg) !important; color: var(--sidebar-fg) !important; border: 0 !important; }
.sidebar-nav-item.active .sidebar-badge { background: var(--selection-strong) !important; color: var(--sidebar-active-fg) !important; }
.sidebar-alert-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--status-danger-dot); box-shadow: 0 0 0 3px var(--status-danger-bg); flex: none; }
.sidebar-sync-card { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--sidebar-card); border: 1px solid var(--sidebar-border); }
.sidebar-sync-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--sidebar-fg); }
.sidebar-sync-top time { font: 500 11.5px/1 var(--font-mono); color: var(--sidebar-active-fg); }
.sidebar-sync-meter { display: block; width: 100%; height: 4px; }
.sidebar-sync-meter .meter-track { fill: var(--sidebar-border); }
.sidebar-sync-meter .meter-fill { fill: var(--accent); }
.sidebar-sync-copy { font-size: 11.5px; color: var(--sidebar-muted); }
.sidebar-footer { padding: 12px 14px 16px !important; border-top: 0 !important; background: transparent !important; }
.sidebar-profile-trigger { border: 1px solid var(--sidebar-border) !important; border-radius: 12px !important; background: transparent !important; color: var(--sidebar-active-fg) !important; min-height: 50px; }
.sidebar-profile-trigger:hover, .sidebar-profile-trigger[aria-expanded="true"] { background: var(--sidebar-hover) !important; }
.sidebar-profile-trigger .sidebar-profile-name { color: var(--sidebar-active-fg) !important; }
.sidebar-profile-trigger .sidebar-profile-channel { font-family: var(--font-mono); font-size: 10.5px !important; color: var(--sidebar-muted) !important; }
.cn-avatar { border-radius: 9px !important; }
.portal-sidebar.collapsed .sidebar-section-label, .portal-sidebar.collapsed .sidebar-sync-card, .portal-sidebar.collapsed .sidebar-badge, .portal-sidebar.collapsed .sidebar-alert-dot, .portal-sidebar.collapsed .sidebar-brand-text { display: none !important; }
.portal-sidebar.collapsed .sidebar-nav-item { justify-content: center; padding: 0 !important; }
.portal-sidebar.collapsed .sidebar-body { padding: 8px 10px !important; }
/* F-20: collapsed sidebar keeps only the logo in the brand (the "Admin" badge and any brand text would float over the content). */
.portal-sidebar.collapsed .sidebar-brand > :not(.brand-logo) { display: none !important; }

/* Topbar: crumbs + title · search (Ctrl K) · freshness · channel · theme */
.portal-topbar {
  position: sticky !important; top: 0; z-index: 80 !important; height: auto !important; min-height: 64px !important; display: flex !important; flex-wrap: wrap; align-items: center !important;
  justify-content: flex-start !important; gap: 12px 16px !important; padding: 10px var(--page-gutter) !important; background: color-mix(in srgb, var(--canvas) 92%, transparent) !important;
  backdrop-filter: saturate(1.3) blur(10px); border-bottom: 1px solid var(--border-subtle) !important; box-shadow: none !important;
}
.topbar-left { display: flex !important; align-items: center; gap: 12px !important; flex: 0 1 auto; min-width: 0; }
.topbar-hamburger-btn { display: inline-flex !important; width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; align-items: center; justify-content: center; border-radius: 10px !important; border: 1px solid var(--border) !important; background: var(--surface) !important; color: var(--text-secondary) !important; box-shadow: none !important; }
.topbar-hamburger-btn:hover { background: var(--surface-raised) !important; color: var(--text-primary) !important; }
.topbar-breadcrumbs { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; min-width: 150px; }
.topbar-breadcrumbs::after { content: none !important; display: none !important; }
.topbar-crumb-line { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.topbar-crumb-line .breadcrumb-root { display: inline !important; color: var(--text-muted) !important; font-weight: 500 !important; }
.topbar-crumb-line .breadcrumb-separator { display: inline-block !important; color: var(--text-faint) !important; }
.portal-topbar .breadcrumb-page { display: block !important; font: 700 18px/1.1 var(--font-sans) !important; letter-spacing: -.02em !important; color: var(--text-primary) !important; white-space: nowrap; }
.topbar-search { flex: 1 1 260px; max-width: 460px; margin: 0 auto; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px 0 12px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text-muted); cursor: text; }
.topbar-search:focus-within { border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.topbar-search input { flex: 1; min-width: 0; min-height: 0 !important; height: 34px; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--text-primary) !important; font-size: 13px; }
.topbar-search input:focus { box-shadow: none !important; outline: none !important; }
.topbar-search input:focus-visible { outline: none !important; }
.topbar-search kbd { font: 500 10.5px/1 var(--font-mono); padding: 3px 6px; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--text-muted); background: var(--surface-raised); white-space: nowrap; }
.topbar-right { display: flex !important; align-items: center; gap: 8px !important; flex-wrap: wrap; margin: 0 0 0 auto !important; }
.topbar-channel-selector { position: static !important; display: inline-flex !important; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.freshness-wrap { position: relative; }
.sync-freshness-pill {
  height: 40px !important; min-height: 40px !important; width: auto !important; display: inline-flex !important; align-items: center; gap: 10px !important; padding: 0 12px !important;
  background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; color: var(--text-primary) !important; box-shadow: none !important; font-family: var(--font-sans);
}
.sync-freshness-pill:hover, .sync-freshness-pill[aria-expanded="true"] { border-color: var(--border-strong) !important; background: var(--surface-raised) !important; }
.freshness-bars { display: inline-flex; align-items: flex-end; gap: 2px; }
.freshness-bar { display: block; width: 4px; height: 14px; border-radius: 2px; background: var(--tone-dot, var(--status-neutral-dot)); }
.freshness-bar.tone-neutral { background: var(--status-neutral-border); }
.freshness-copy { display: flex !important; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.freshness-copy strong { font-size: 12px !important; font-weight: 600; color: var(--text-primary) !important; }
.freshness-copy small { font: 500 10.5px/1.2 var(--font-mono) !important; color: var(--text-muted) !important; }
.freshness-chevron { color: var(--text-muted); }
.freshness-popover {
  position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; left: auto !important; z-index: 120 !important; width: 340px; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; padding: 0 !important; background: var(--surface-overlay) !important; border: 1px solid var(--border-strong) !important; border-radius: 14px !important;
  box-shadow: var(--shadow-popover) !important; overflow: hidden; color: var(--text-primary) !important;
}
.freshness-popover[hidden] { display: none !important; }
.freshness-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border-strong); }
.freshness-header strong { font-size: 13.5px; font-weight: 700; }
.freshness-header span { font: 500 11px/1 var(--font-mono); color: var(--text-muted); }
.freshness-row { display: flex !important; align-items: center; gap: 10px; padding: 11px 16px !important; border-bottom: 1px solid var(--border-subtle) !important; }
.freshness-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; background: var(--tone-dot); }
.freshness-row-copy { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.freshness-row-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.freshness-row-note { font-size: 11px; color: var(--text-muted); }
.freshness-row-note.tone-warning, .freshness-row-note.tone-danger { color: var(--tone-fg); }
.freshness-row time { font: 500 11px/1 var(--font-mono); color: var(--text-secondary); }
.freshness-footer-link { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--link) !important; text-decoration: none; }
.theme-trigger { width: 40px !important; height: 40px !important; min-height: 40px !important; border-radius: 10px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text-secondary) !important; box-shadow: none !important; }

/* ---------- Page content ---------- */
.portal-main-content { width: 100%; max-width: 1480px !important; margin: 0 !important; padding: 24px var(--page-gutter) 40px !important; }
.portal-tab-pane.active { display: flex !important; flex-direction: column; gap: 16px; }
.portal-tab-pane.active > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.portal-heading { display: flex !important; flex-wrap: wrap; align-items: flex-end !important; justify-content: space-between; gap: 16px; margin: 0 !important; }
.portal-heading > div:first-child { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.portal-heading h1 { margin: 0 !important; font: 750 28px/1.15 var(--font-sans) !important; letter-spacing: -.03em !important; color: var(--text-primary) !important; }
.portal-heading p { margin: 0 !important; font-size: 13.5px; color: var(--text-muted) !important; }
.portal-heading p strong { color: var(--text-primary); font-weight: 600; }
.portal-heading-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.listing-bulk-action { min-height: 40px !important; border-radius: 10px !important; font-size: 13px !important; }

/* Priority tiles (Anúncios) */
.priority-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.priority-tile {
  display: flex !important; align-items: flex-start; gap: 12px; min-height: 0 !important; height: auto; padding: 14px 16px !important; text-align: left;
  background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; color: var(--text-primary) !important; box-shadow: none !important; font-family: var(--font-sans);
}
.priority-tile:hover { border-color: var(--border-strong) !important; background: var(--surface-raised) !important; }
.priority-tile[aria-pressed="true"] { border-color: var(--tone-dot) !important; background: color-mix(in srgb, var(--tone-dot) 7%, var(--surface)) !important; }
.priority-tile-icon { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--tone-bg); color: var(--tone-fg); font: 700 13px/1 var(--font-mono); }
.priority-tile-copy { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.priority-tile-label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.priority-tile strong { font: 750 24px/1.15 var(--font-sans); letter-spacing: -.02em; color: var(--text-primary); }
.priority-tile small { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }

/* Toolbar */
.portal-toolbar { position: relative; z-index: 5; display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px !important; padding: 10px !important; margin: 0 !important; }
.portal-search-wrap { position: relative; flex: 1 1 280px; display: flex !important; align-items: center; gap: 8px; height: 38px; padding: 0 12px !important; background: var(--surface-sunken) !important; border: 1px solid var(--border) !important; border-radius: 9px !important; color: var(--text-muted); max-width: none !important; }
.portal-search-wrap:focus-within { border-color: var(--border-focus) !important; box-shadow: var(--focus-ring); }
.portal-search-wrap .search-icon { position: static !important; flex: none; color: var(--text-muted); transform: none !important; }
.portal-search-input { flex: 1; min-width: 0; height: 34px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.portal-search-input:focus, .portal-search-input:focus-visible { box-shadow: none !important; outline: none !important; }
.portal-search-clear { min-height: 24px !important; width: 24px; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--text-muted) !important; font-size: 16px !important; }

/* ---------- Tables: exactly four backgrounds (head, row, hover, child) ---------- */
.portal-table-wrap, .cn-table-container { overflow: hidden !important; padding: 0 !important; margin: 0 !important; }
.portal-table-wrap > .scroll, .cn-table-container > .scroll { overflow-x: auto !important; overflow-y: visible; border: 0 !important; border-radius: 0 !important; background: transparent !important; max-height: none; }
.portal-table, .cn-table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; background: var(--surface) !important; font-size: 13px; }
.portal-table thead th, .cn-table thead th, .cn-table-head, .portal-table th {
  height: 42px !important; padding: 0 10px !important; background: var(--table-head) !important; border: 0 !important; border-bottom: 1px solid var(--border) !important;
  color: var(--text-muted) !important; font: 600 11px/1.2 var(--font-sans) !important; letter-spacing: .04em !important; text-transform: uppercase !important; text-align: left; white-space: nowrap; vertical-align: middle; position: static !important; box-shadow: none !important;
}
.portal-table tbody > tr > td, .cn-table tbody > tr > td {
  padding: 10px !important; background: var(--surface) !important; border: 0 !important; border-bottom: 1px solid var(--border-subtle) !important; color: var(--text-primary);
  vertical-align: middle !important; height: auto !important; box-shadow: none !important;
}
.portal-table tbody > tr:hover > td, .cn-table tbody > tr:hover > td,
/* Parent rows of the hierarchical tables (F-07: one selector for Anúncios, Campanhas, Devoluções and Fulfillment) */
.hier-table > tbody > tr > td { transition: background-color var(--duration-fast); }
.portal-table tbody > tr:not(.hier-children-row):not(.analytics-drawer-row):hover > td { background: var(--table-row-hover) !important; }
.portal-table tbody > tr.hier-children-row > td {
  padding: 0 !important; background: var(--table-child) !important; border-bottom: 1px solid var(--border-subtle) !important;
}
.tabular-cell, .portal-table td.tabular-cell { text-align: right; font-variant-numeric: tabular-nums; }
.portal-table th.cn-table-head:is(.col-price, .col-stock, .col-sales, .col-fee, .col-shipping, .col-payout, .col-cost, .col-margin) { text-align: right; }
.portal-table td small, .portal-table td .text-muted { font-size: 11px; }

/* Children (MLBs inside a SKU, campaigns inside an MLB) */
.sku-children-wrap { padding: 4px 0 8px !important; margin: 0 !important; background: var(--table-child) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.sku-children-header { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 20px 6px 64px !important; margin: 0 !important; background: transparent !important; border: 0 !important; font-size: 11.5px !important; color: var(--text-muted) !important; }
.sku-children-header strong { font-weight: 600; color: var(--text-secondary); }
.sku-children-header code { color: var(--text-secondary); background: none; font-size: 11.5px; }
.child-mlbs-table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; background: transparent !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
.child-mlbs-table th { height: 32px !important; padding: 0 10px !important; background: var(--table-child) !important; border: 0 !important; border-bottom: 1px solid var(--border-subtle) !important; color: var(--text-faint) !important; font: 600 10.5px/1.2 var(--font-sans) !important; letter-spacing: .04em !important; text-transform: uppercase !important; text-align: left; }
.child-mlbs-table td { padding: 8px 10px !important; background: var(--table-child) !important; border: 0 !important; border-bottom: 1px solid var(--border-subtle) !important; font-size: 12.5px; color: var(--text-secondary); vertical-align: middle; }
.child-mlbs-table tbody > tr:last-child > td { border-bottom: 0 !important; }
.child-mlbs-table tbody > tr:not(.analytics-drawer-row):hover > td { background: var(--table-child-hover) !important; }
.child-mlbs-table td.tabular-cell { text-align: right; }

/* Listing table: fixed column grid shared by the SKU row and its MLB rows (Anuncios.dc.html) */
.listing-table, .listing-child-table { table-layout: fixed !important; min-width: 1322px; }
.listing-table > thead > tr > th:nth-child(1), .listing-child-table > thead > tr > th:nth-child(1) { width: 44px; }
.listing-table > thead > tr > th:nth-child(3), .listing-child-table > thead > tr > th:nth-child(3) { width: 124px; }
.listing-table > thead > tr > th:nth-child(4), .listing-child-table > thead > tr > th:nth-child(4) { width: 120px; }
.listing-table > thead > tr > th:nth-child(5), .listing-child-table > thead > tr > th:nth-child(5) { width: 96px; }
.listing-table > thead > tr > th:nth-child(6), .listing-child-table > thead > tr > th:nth-child(6) { width: 100px; }
.listing-table > thead > tr > th:nth-child(7), .listing-child-table > thead > tr > th:nth-child(7) { width: 118px; }
.listing-table > thead > tr > th:nth-child(8), .listing-child-table > thead > tr > th:nth-child(8) { width: 104px; }
.listing-table > thead > tr > th:nth-child(9), .listing-child-table > thead > tr > th:nth-child(9) { width: 96px; }
.listing-table > thead > tr > th:nth-child(10), .listing-child-table > thead > tr > th:nth-child(10) { width: 108px; }
.listing-table > thead > tr > th:nth-child(11), .listing-child-table > thead > tr > th:nth-child(11) { width: 100px; }
.listing-table > thead > tr > th:nth-child(12), .listing-child-table > thead > tr > th:nth-child(12) { width: 112px; }
.listing-child-table { min-width: 0 !important; }
/* Child tables share the parent's grid: their header row only carries the column widths (hierChildren) */
.hier-child-table > thead > tr > th { height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border: 0 !important; font-size: 0 !important; line-height: 0 !important; overflow: hidden; }
.listing-child-table > tbody > tr.child-mlb-row > td { padding: 6px 10px !important; height: 56px; }
.listing-table td.col-trend, .listing-table td.col-mlbs, .listing-child-table td.col-trend, .listing-child-table td.col-mlbs { text-align: left; }
.tree-guide-cell { position: relative; text-align: center !important; }
.tree-guide-cell::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--tree-guide); }
.tree-guide-cell .row-expand-btn { position: relative; z-index: 1; }
.child-product-cell { display: flex; align-items: center; gap: 10px; padding-left: 4px; }
.tree-branch { width: 14px; height: 1px; background: var(--tree-guide); flex: none; }
.child-type-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.child-type-label { display: inline-flex; align-items: center; gap: 6px; }

/* Row expander: <button aria-expanded> with a chevron that rotates 90° */
.row-expand-btn {
  width: 28px !important; height: 28px !important; min-height: 28px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 7px !important; border: 1px solid var(--border) !important; background: transparent !important; color: var(--text-secondary) !important; box-shadow: none !important;
}
.row-expand-btn:hover { background: var(--surface-active) !important; color: var(--text-primary) !important; }
.row-expand-btn[aria-expanded="true"] { background: var(--surface-active) !important; border-color: var(--border-strong) !important; }
.row-expand-btn .chevron-icon { width: 14px; height: 14px; transform: none !important; transition: transform var(--duration-fast); }
.row-expand-btn[aria-expanded="true"] .chevron-icon, .row-expand-btn.open .chevron-icon { transform: rotate(90deg) !important; }
.row-expand-btn-sm { width: 24px !important; height: 24px !important; min-height: 24px !important; background: var(--table-child) !important; }

/* Cells */
.product-cell-wrap { display: flex !important; align-items: center; gap: 12px; min-width: 0; }
.product-thumb-wrap { width: 44px !important; height: 44px !important; flex: none; border-radius: 9px !important; overflow: hidden; background: var(--surface-active) !important; border: 1px solid var(--border) !important; display: flex; align-items: center; justify-content: center; }
.product-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb-fallback { color: var(--text-disabled); display: flex; }
.product-info-block { display: flex !important; flex-direction: column; gap: 4px; min-width: 0; }
.product-title-btn { min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--text-primary) !important; text-align: left; font: 650 13.5px/1.3 var(--font-sans) !important; box-shadow: none !important; display: block; max-width: 100%; }
.product-title-btn strong { font-weight: 650; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-title-btn:hover { color: var(--link) !important; }
/* Opens the SKU sheet (same as clicking the name): discreet, stronger on row hover. */
.product-title-row:has(.product-open-btn) { display: flex; align-items: flex-start; gap: 6px; }
.product-open-btn { flex: none; display: inline-grid !important; place-items: center; width: 24px; height: 24px; min-height: 0 !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: 6px !important; background: transparent !important; color: var(--text-muted) !important; cursor: pointer; opacity: .55; transition: opacity .15s, background .15s, color .15s; }
.portal-table-row:hover .product-open-btn, .product-open-btn:focus-visible { opacity: 1; }
.product-open-btn:hover { background: var(--surface-hover) !important; border-color: var(--border) !important; color: var(--link) !important; opacity: 1; }
.product-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--text-primary) !important; text-decoration: none; }
.product-tags { display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; }
.tag-sku-sub, .tag-code { font: 500 11px/1.3 var(--font-mono) !important; color: var(--text-muted) !important; background: none !important; border: 0 !important; padding: 0 !important; }
a.tag-code, .tag-link { color: var(--link) !important; text-decoration: none; }
.tag-muted { font: 600 10.5px/1.3 var(--font-sans) !important; padding: 1px 6px !important; border-radius: 5px !important; background: var(--surface-active) !important; color: var(--text-secondary) !important; border: 0 !important; }
.tag-paused { color: var(--text-muted) !important; }
.tag-logistic { font: 600 10.5px/1.3 var(--font-sans); padding: 1px 6px; border-radius: 5px; background: var(--status-neutral-bg); color: var(--status-neutral-text); }
.tag-logistic.is-full { background: var(--status-info-bg); color: var(--status-info-text); }
.badge-channel { width: 20px !important; height: 20px !important; border-radius: 5px !important; display: inline-flex !important; align-items: center; justify-content: center; font: 800 10px/1 var(--font-sans) !important; border: 0 !important; }
.badge-channel.badge-catalog { background: var(--status-info-bg) !important; color: var(--status-info-text) !important; }
.badge-channel.badge-traditional { background: var(--status-attention-bg) !important; color: var(--status-attention-text) !important; }
.sku-mlb-badge-group { display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; }
.sku-mlb-badge-btn { min-height: 0 !important; height: auto; padding: 0 !important; border: 0 !important; background: none !important; color: var(--text-secondary) !important; font: 500 12px/1.3 var(--font-sans) !important; box-shadow: none !important; }
.sku-mlb-badge-btn:hover { color: var(--link) !important; text-decoration: underline; }
.sku-buybox-line { margin-top: 5px; }
.badge-buybox { display: inline-flex !important; align-items: center; padding: 1px 6px !important; border-radius: 999px !important; font: 600 10.5px/1.4 var(--font-sans) !important; border: 0 !important; }
.badge-buybox.winning { background: var(--status-connected-bg) !important; color: var(--status-connected-text) !important; }
.badge-buybox.sharing { background: var(--status-info-bg) !important; color: var(--status-info-text) !important; }
.badge-buybox.losing { background: var(--status-attention-bg) !important; color: var(--status-attention-text) !important; }
.badge-buybox.neutral { background: var(--status-neutral-bg) !important; color: var(--status-neutral-text) !important; }
.badge-buybox.shared, .badge.risk { background: var(--status-risk-bg) !important; color: var(--status-risk-text) !important; }
.promo-price-block, .stock-cell-block, .sales-cell-block, .fee-cell-block, .shipping-cell-block, .payout-cell-block, .cost-cell-block, .margin-cell-block {
  display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center; gap: 3px !important; text-align: right;
}
.promo-price-block del { font-size: 11.5px; color: var(--text-faint) !important; }
.promo-price-line { display: inline-flex; align-items: center; gap: 6px; }
.price-current, .promo-price-block strong { font-size: 13.5px; font-weight: 700; color: var(--text-primary) !important; }
.stock-num { font-size: 13px; font-weight: 650; }
.stock-num strong { font-weight: inherit; }
.sales-total-val { font-size: 13.5px !important; font-weight: 700 !important; color: var(--text-primary) !important; }
.boost-note { font-size: 11px !important; font-weight: 600; color: var(--status-connected-text) !important; white-space: nowrap; }
.net-payout { font-size: 13.5px; font-weight: 700; }
.cost-add-btn { min-height: 0 !important; height: auto; padding: 0 !important; border: 0 !important; background: none !important; color: var(--link) !important; font: 600 11px/1.2 var(--font-sans) !important; box-shadow: none !important; }
.cost-add-btn:hover { text-decoration: underline; }
.margin-cell-block .margin-pct { order: -1; font: 700 12px/1.2 var(--font-mono) !important; padding: 3px 7px !important; border-radius: 6px !important; color: var(--status-neutral-text); background: var(--status-neutral-bg); }
.margin-cell-block .margin-pct.success { color: var(--status-connected-text) !important; background: var(--status-connected-bg) !important; }
.margin-cell-block .margin-pct.warning { color: var(--status-attention-text) !important; background: var(--status-attention-bg) !important; }
.margin-cell-block .margin-pct.danger { color: var(--status-danger-text) !important; background: var(--status-danger-bg) !important; }
.margin-cell-block .margin-amt { font-size: 11px !important; font-weight: 500 !important; color: var(--text-muted) !important; }
.trend-cell-block { display: flex !important; align-items: center; gap: 8px; }
.sparkline-svg { flex: none; color: var(--text-faint); }
.sparkline-svg.trend-up { color: var(--status-connected-text); }
.sparkline-svg.trend-down { color: var(--status-risk-text); }
.trend-pill { font: 600 11px/1 var(--font-mono) !important; padding: 0 !important; background: none !important; border: 0 !important; color: var(--text-muted) !important; }
.trend-pill.up { color: var(--status-connected-text) !important; }
.trend-pill.down { color: var(--status-risk-text) !important; }

/* Pagination */
.cn-pagination, .data-table-pager { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px !important; border-top: 1px solid var(--border) !important; background: var(--table-head) !important; color: var(--text-muted); font-size: 12.5px; }
.cn-pagination-meta { display: flex; align-items: center; gap: 12px; }
.cn-pagination-meta [data-page-range] { color: var(--text-muted); }
.cn-pagination-content { display: flex; align-items: center; gap: 4px; }
.cn-pagination-link { min-height: 32px !important; height: 32px; padding: 0 10px !important; border-radius: 8px !important; border: 1px solid var(--border) !important; background: transparent !important; color: var(--text-secondary) !important; font: 600 12px/1 var(--font-sans) !important; box-shadow: none !important; display: inline-flex; align-items: center; gap: 4px; }
.cn-pagination-link:hover:not([disabled]) { background: var(--surface-active) !important; color: var(--text-primary) !important; }
.cn-pagination-link[disabled] { color: var(--text-disabled) !important; }

/* ---------- KPI cards ---------- */
.portal-metric-strip, .dashboard-kpi-strip, .module-kpi-strip { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 12px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; }
.portal-metric, .module-kpi {
  display: flex !important; flex-direction: column; gap: 8px; min-height: 0; padding: 16px 16px 14px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; box-shadow: none !important;
}
.metric-top, .module-kpi-top { display: flex !important; justify-content: space-between; align-items: center; gap: 8px; }
.metric-label, .module-kpi-top > span:first-child { font-size: 12.5px !important; font-weight: 600 !important; color: var(--text-secondary) !important; text-transform: none !important; letter-spacing: 0 !important; }
.metric-val, .module-kpi > strong { font: 700 26px/1.15 var(--font-sans) !important; letter-spacing: -.02em !important; color: var(--text-strong) !important; }
.metric-val small { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.metric-sub, .module-kpi > small { font-size: 12px !important; color: var(--text-muted) !important; }
.metric-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--status-neutral-dot); }
.metric-dot.green { background: var(--status-connected-dot); }
.metric-dot.blue { background: var(--status-info-dot); }
.metric-dot.red { background: var(--status-danger-dot); }
.metric-badge { font: 600 10.5px/1 var(--font-mono); color: var(--text-muted); }
.kpi-spark { display: block; width: 100%; height: 34px; }
.kpi-spark .spark-area { fill: var(--blue-light); }
.kpi-spark .spark-line { fill: none; stroke: var(--chart-1); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.kpi-spark.is-empty .spark-line { stroke: var(--border-strong); stroke-dasharray: 4 4; }
.kpi-chip { font: 600 11px/1 var(--font-mono); padding: 3px 7px; border-radius: 6px; color: var(--tone-fg, var(--status-neutral-text)); background: var(--tone-bg, var(--status-neutral-bg)); white-space: nowrap; }
.metric-val.is-missing, .module-kpi > strong.is-missing { color: var(--text-disabled) !important; }

/* ---------- Dashboard ---------- */
.coverage-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.coverage-strip-title { display: inline-flex; align-items: center; gap: 8px; padding: 0 6px 0 4px; font-size: 12.5px; font-weight: 650; color: var(--text-primary); }
.coverage-strip-title svg { color: var(--accent-icon); }
.coverage-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--surface-raised); border: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); }
.coverage-chip .freshness-dot { width: 7px; height: 7px; }
.coverage-chip-state { font: 500 11px/1 var(--font-mono); color: var(--text-muted); }
.coverage-chip-state.tone-warning, .coverage-chip-state.tone-danger { color: var(--tone-fg); }
.dashboard-analytics-grid { display: grid !important; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr) !important; gap: 12px !important; margin: 0 !important; }
.dashboard-chart-card, .dashboard-channel-summary { display: flex !important; flex-direction: column; gap: 14px; padding: 18px !important; min-width: 0; }
.dashboard-triage-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important; gap: 12px !important; margin: 0 !important; }
.triage-card { display: flex !important; flex-direction: column; padding: 0 !important; overflow: hidden; }
.triage-card > .card-header { align-items: center; padding: 14px 16px !important; border-bottom: 1px solid var(--border-subtle); margin: 0 !important; }
.triage-card > .card-header h3 { font-size: 14px !important; margin: 0 !important; }
.triage-head-icon { width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--tone-bg); color: var(--tone-fg); }
.triage-head-icon svg { width: 15px; height: 15px; }
.triage-head { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.triage-head small { display: block; font-size: 11.5px; color: var(--text-muted); }
.triage-head small.tone-warning, .triage-head small.tone-danger { color: var(--tone-fg); }
.triage-list { padding: 0 !important; margin: 0 !important; list-style: none; }
.triage-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border-subtle); }
.triage-item:last-child { border-bottom: 0; }
.triage-item:hover { background: var(--surface-hover); }
.triage-rank { width: 20px; flex: none; font: 500 11px/1 var(--font-mono); color: var(--text-faint); }
.triage-item-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.triage-item-copy > span:first-child, .triage-item-copy > button { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.triage-item-copy > button { min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; text-align: left; box-shadow: none !important; font: 600 13px/1.3 var(--font-sans) !important; color: var(--text-primary) !important; }
.triage-item-copy > button:hover { color: var(--link) !important; }
.triage-item-copy small { font: 500 10.5px/1.3 var(--font-mono); color: var(--text-muted); }
.triage-item-copy small.tone-danger, .triage-item-copy small.tone-risk, .triage-item-copy small.tone-warning { font-family: var(--font-sans); font-size: 11.5px; color: var(--tone-fg); }
.triage-metric { flex: none; text-align: right; font: 600 12.5px/1.2 var(--font-sans); color: var(--text-secondary); white-space: nowrap; }
.triage-metric.is-positive { color: var(--status-connected-text); font-weight: 700; }
.triage-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; background: var(--tone-dot); }
.triage-empty-copy { margin: 0 !important; padding: 20px 16px; font-size: 12.5px; color: var(--text-muted) !important; }
.card-link { font-size: 12px; font-weight: 600; color: var(--link) !important; text-decoration: none; white-space: nowrap; }
.dashboard-channel-body { display: flex; flex-direction: column; gap: 0; }
.channel-summary-head { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: var(--surface-raised); border: 1px solid var(--border); margin-bottom: 4px; }
.channel-summary-head > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.channel-summary-head strong { font-size: 13.5px; }
.channel-summary-head small { font: 500 11px/1.3 var(--font-mono); color: var(--text-muted); }
.channel-summary-head time { font: 500 11px/1 var(--font-mono); color: var(--text-secondary); }
.domain-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--border-subtle); }
.domain-row-name { flex: 1; font-size: 12.5px; color: var(--text-secondary); }
.domain-row time { width: 44px; text-align: right; font: 500 11px/1 var(--font-mono); color: var(--text-muted); }
.channel-summary-link { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 10px; border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text-secondary) !important; text-decoration: none; }
.channel-summary-link:hover { background: var(--surface-raised); color: var(--text-primary) !important; }
.chart-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.chart-card-head h3 { margin: 0 !important; font: 700 15px/1.3 var(--font-sans) !important; }
.chart-card-head small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-muted); }
.chart-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); }
.legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--chart-1); }
.legend-swatch.is-missing { background: repeating-linear-gradient(135deg, var(--chart-missing-border) 0 2px, transparent 2px 4px); border: 1px dashed var(--chart-missing-border); box-sizing: border-box; }
.legend-swatch.is-previous { background: var(--chart-2); }
.store-daily-chart { display: flex; flex-direction: column; gap: 12px; }
.store-chart-canvas-wrap { position: relative; height: 236px; }
.store-chart-footer { display: flex !important; flex-wrap: wrap; gap: 8px 20px; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-size: 12px; color: var(--text-muted); background: none !important; }
.store-chart-footer strong, .store-chart-footer b { color: var(--text-primary); }
.store-chart-footer .missing-note { color: var(--status-attention-text); }

/* ---------- SKU drawer (GavetaSku.dc.html) ---------- */
.drawer-backdrop, .sidebar-backdrop, .bulk-sheet-backdrop { background: var(--backdrop) !important; backdrop-filter: blur(2px); }
.portal-drawer-right {
  width: min(600px, 100%) !important; max-width: 100% !important; background: var(--surface) !important; border-left: 1px solid var(--border-strong) !important; box-shadow: var(--shadow-overlay) !important;
  display: flex !important; flex-direction: column; color: var(--text-primary);
}
.portal-drawer-right[hidden] { display: none !important; }
.drawer-header { position: sticky; top: 0; z-index: 3; display: flex !important; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px !important; background: var(--surface) !important; border-bottom: 0 !important; }
.drawer-header h2 { margin: 4px 0 8px !important; font: 750 20px/1.25 var(--font-sans) !important; letter-spacing: -.02em; color: var(--text-primary) !important; }
.drawer-header-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.drawer-sku-badge { font: 500 11.5px/1 var(--font-mono) !important; color: var(--text-secondary) !important; background: var(--surface-active) !important; padding: 4px 8px !important; border-radius: 6px !important; border: 0 !important; }
.drawer-close-btn { width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; border-radius: 9px !important; background: transparent !important; border: 1px solid var(--border) !important; color: var(--text-muted) !important; font-size: 15px !important; flex: none; }
.drawer-nav {
  position: sticky; top: 0; z-index: 2; display: flex !important; gap: 2px !important; overflow-x: auto; scrollbar-width: none; padding: 0 16px !important; background: var(--surface) !important;
  border-top: 0 !important; border-bottom: 1px solid var(--border) !important; flex: none;
}
.drawer-nav::-webkit-scrollbar { display: none; }
.drawer-tab-btn { flex: none; min-height: 42px !important; height: 42px; padding: 0 12px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--text-muted) !important; font: 600 12.5px/1 var(--font-sans) !important; box-shadow: none !important; white-space: nowrap; }
.drawer-tab-btn:hover { color: var(--text-primary) !important; background: transparent !important; }
.drawer-tab-btn.active, .drawer-tab-btn[aria-selected="true"] { color: var(--text-strong) !important; box-shadow: inset 0 -2px 0 var(--accent) !important; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px 28px !important; background: var(--surface) !important; }
.drawer-section { margin: 0 0 16px !important; padding: 0 !important; background: none !important; border: 0 !important; }
.drawer-section-title { margin: 0 0 10px !important; font: 500 11px/1.3 var(--font-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--text-faint) !important; }
.drawer-section-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.drawer-info-grid, .drawer-kpi-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
.drawer-info-item, .drawer-kpi-box { display: flex !important; flex-direction: column; gap: 4px; padding: 12px !important; background: var(--surface-raised) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; }
.drawer-info-item-wide { grid-column: 1 / -1; }
.info-label, .drawer-kpi-box > span { font-size: 11.5px !important; font-weight: 600; color: var(--text-muted) !important; }
.info-val, .drawer-kpi-box > strong { font: 700 15px/1.25 var(--font-sans) !important; color: var(--text-primary) !important; overflow-wrap: anywhere; }
.drawer-kpi-box > strong { font-size: 19px !important; letter-spacing: -.01em; }
.dre-list { display: flex !important; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-raised); }
.dre-row { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 12px !important; border: 0 !important; border-bottom: 1px solid var(--border-subtle) !important; background: transparent !important; font-size: 12px; line-height: 1.4; margin: 0 !important; border-radius: 0 !important; }
.dre-row:last-child { border-bottom: 0 !important; }
.dre-label { color: var(--text-secondary) !important; }
.dre-row.deduction .dre-label { padding-left: 8px; }
.dre-row.addition .dre-val { color: var(--status-connected-text) !important; }
.dre-row.subtotal { background: var(--surface-active) !important; }
.dre-row.subtotal .dre-label, .dre-row.subtotal .dre-val { font-weight: 700; color: var(--text-strong) !important; }
.dre-row.result { background: var(--selection-bg) !important; border-top: 1px solid var(--border) !important; }
.dre-row.result .dre-label { font-weight: 700; color: var(--text-primary) !important; }
.dre-row.result .dre-val { font-size: 12.5px; font-weight: 700; }
.dre-row.result.success .dre-val { color: var(--status-connected-text) !important; }
.dre-row.result.warning .dre-val { color: var(--status-attention-text) !important; }
.dre-row.result.danger .dre-val { color: var(--status-danger-text) !important; }
.dre-val { font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }
.stat-lines-list { display: flex !important; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.stat-row-line { display: flex !important; justify-content: space-between; gap: 12px; padding: 10px 14px !important; border-bottom: 1px solid var(--border-subtle) !important; background: var(--surface-raised) !important; margin: 0 !important; border-radius: 0 !important; }
.stat-row-line:last-child { border-bottom: 0 !important; }
.stat-line-label { color: var(--text-secondary); font-size: 12.5px; }
.reasons-triad-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 8px !important; }
.reasons-triad-col { padding: 12px !important; background: var(--surface-raised) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; }
.triad-title { display: block; margin-bottom: 8px; font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.triad-list { margin: 0; padding: 0 0 0 16px; font-size: 12.5px; color: var(--text-secondary); }
.form-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 10px !important; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.drawer-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.drawer-financial-note { font-size: 12px !important; margin: -4px 0 10px !important; }
.history-timeline { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Bulk cost editor: centered modal up to 1040 px (CustosEmMassa.dc.html) ---------- */
.bulk-costs-sheet {
  position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important;
  width: min(1040px, calc(100vw - 32px)) !important; max-width: none !important; height: auto !important; max-height: calc(100dvh - 48px) !important;
  display: flex !important; flex-direction: column; background: var(--surface) !important; border: 1px solid var(--border-strong) !important; border-radius: 16px !important;
  box-shadow: var(--shadow-overlay) !important; overflow: hidden; z-index: 1200 !important;
}
.bulk-costs-sheet[hidden] { display: none !important; }
.bulk-sheet-header { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px !important; border-bottom: 1px solid var(--border) !important; background: var(--surface) !important; }
.bulk-sheet-header h2 { margin: 4px 0 4px !important; font: 750 20px/1.25 var(--font-sans) !important; letter-spacing: -.02em; }
.bulk-sheet-header p { margin: 0 !important; font-size: 12.5px; }
.bulk-sheet-body { flex: 1; overflow-y: auto; padding: 16px 20px !important; display: flex; flex-direction: column; gap: 12px; background: var(--surface) !important; }
.bulk-costs-step { padding: 14px 16px !important; background: var(--surface-raised) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; }
.bulk-costs-step-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bulk-step-title { display: block; font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.bulk-step-copy { display: block; font-size: 12px; margin-top: 2px; }
.costs-upload-zone { margin-top: 10px; display: flex !important; flex-direction: column; align-items: center; gap: 6px; padding: 22px !important; border: 1px dashed var(--border-strong) !important; border-radius: 12px !important; background: var(--surface-sunken) !important; cursor: pointer; text-align: center; }
.costs-upload-zone:hover, .costs-upload-zone.dragover { border-color: var(--accent) !important; background: var(--selection-bg) !important; }
.costs-upload-icon { color: var(--accent-icon); }
.bulk-direct-edit { border: 1px solid var(--border) !important; border-radius: 12px !important; background: var(--surface) !important; overflow: hidden; }
.bulk-direct-edit > summary { padding: 12px 16px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-primary); background: var(--surface-raised); list-style-position: inside; }
.bulk-edit-scroll { max-height: 50vh; overflow: auto !important; }
.bulk-edit-table thead th { position: sticky !important; top: 0; z-index: 1; }
.bulk-input { width: 100%; min-width: 90px; height: 34px !important; min-height: 34px !important; text-align: right; font-variant-numeric: tabular-nums; }
.bulk-input.is-changed, .bulk-input[data-changed="true"] { border-color: var(--blue-border) !important; background: var(--selection-bg) !important; }
.bulk-sheet-footer { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px !important; border-top: 1px solid var(--border) !important; background: var(--table-head) !important; }
.bulk-sheet-actions { display: flex; gap: 8px; }

/* ---------- Canais ---------- */
.channel-list-workspace { display: flex !important; flex-direction: column; gap: 12px !important; }
.channel-card { padding: 18px !important; display: flex !important; flex-direction: column; gap: 16px; }
.channel-heading-workspace { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.channel-name-workspace { display: flex; align-items: center; gap: 12px; }
.channel-title { margin: 0 !important; display: flex; align-items: center; gap: 8px; font: 700 16px/1.3 var(--font-sans) !important; }
.channel-subtitle { margin: 2px 0 0 !important; font: 500 11.5px/1.3 var(--font-mono) !important; color: var(--text-muted) !important; }
.channel-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.channel-actions form { margin: 0; }
.channel-meta-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 8px !important; margin: 0 !important; }
.channel-meta-item { padding: 12px !important; background: var(--surface-raised) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; margin: 0 !important; }
.channel-meta-item dt { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.channel-meta-item dd { margin: 4px 0 2px !important; font: 700 18px/1.2 var(--font-sans); color: var(--text-primary); }
.channel-meta-item small { font-size: 11px; color: var(--text-muted); }
.channel-domain-section h4 { margin: 0 0 10px !important; font: 500 11px/1.3 var(--font-mono) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint) !important; }
.channel-domain-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 8px !important; }
.channel-domain-card { display: flex !important; flex-direction: column; gap: 10px; padding: 12px !important; background: var(--surface-raised) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; }
.channel-domain-card strong { display: block; font-size: 13px; color: var(--text-primary); }
.channel-domain-card span:not(.badge) { display: block; font-size: 11.5px; color: var(--text-muted); }
.channel-domain-status { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.channel-domain-status time { font: 500 11px/1 var(--font-mono); color: var(--text-secondary); }
.channel-card-coming { opacity: 1; }
.channel-card-coming .channel-logo { filter: saturate(.75); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .dashboard-analytics-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 1100px) {
  .portal-sidebar { width: 220px !important; min-width: 220px !important; max-width: 220px !important; }
  .portal-main-area { margin-left: 220px !important; width: calc(100% - 220px) !important; }
  .topbar-search { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
}
@media (max-width: 860px) {
  .portal-sidebar { width: 260px !important; min-width: 260px !important; max-width: 260px !important; }
  .portal-main-area, .portal-app-shell.sidebar-collapsed .portal-main-area { margin-left: 0 !important; width: 100% !important; }
  .portal-topbar { padding: 10px 16px !important; }
  .topbar-right { margin-left: 0 !important; width: 100%; }
  .freshness-wrap { flex: 1 1 auto; }
  .sync-freshness-pill { width: 100% !important; }
  .freshness-copy { flex: 1; }
  .freshness-popover { left: 0 !important; right: auto !important; width: min(340px, calc(100vw - 32px)); }
  .portal-main-content { padding: 16px 16px 40px !important; }
  .portal-heading h1 { font-size: 24px !important; }
}
@media (max-width: 520px) {
  .topbar-channel-selector .channel-trigger-copy { display: none; }
  .ui-select-channel .ui-select-trigger { padding: 0 8px !important; }
  .portal-toolbar .ui-select { flex: 1 1 calc(50% - 4px); }
  .portal-toolbar .ui-select-trigger { width: 100%; }
  .portal-toolbar .ui-select-value { flex: 1; }
  .priority-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .priority-tile { padding: 12px !important; gap: 10px; }
  .priority-tile-icon { width: 28px; height: 28px; }
  .priority-tile small { display: none; }
  .portal-floating-toast { left: 16px !important; right: 16px !important; bottom: 16px !important; max-width: none; }
  .drawer-info-grid, .drawer-kpi-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
body { max-width: 100%; overflow-x: clip; }

/* ---------- Dashboard: KPI card grid, period pill, chart fallback ---------- */
.kpi-card { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label chip" "value value" "spark spark" "foot foot"; align-items: center; row-gap: 8px !important; column-gap: 8px; min-height: 156px; }
.kpi-card > .metric-label { grid-area: label; }
.kpi-card > .kpi-chip { grid-area: chip; justify-self: end; }
.kpi-card > .metric-val { grid-area: value; }
.kpi-card > .kpi-spark { grid-area: spark; }
.kpi-card > .metric-sub { grid-area: foot; }
.period-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.period-pill svg { color: var(--text-muted); }
.store-chart-canvas-wrap canvas { display: block; width: 100% !important; height: 100% !important; }
.store-daily-chart:not(.is-chart-ready) #store-daily-chart-canvas { display: none; }
.store-chart-bars { height: 100% !important; gap: 4px !important; padding: 0 !important; border-bottom: 1px solid var(--chart-axis) !important; }
.store-bar-track { max-width: none !important; background: transparent !important; border-radius: 4px 4px 2px 2px !important; }
.store-bar-fill.active { background: linear-gradient(180deg, var(--chart-1), var(--chart-1-deep)) !important; border-radius: 4px 4px 2px 2px !important; }
.store-bar-fill.missing { height: 100% !important; box-sizing: border-box; background: repeating-linear-gradient(135deg, var(--chart-missing-border) 0 1px, var(--chart-missing) 1px 6px) !important; border: 1px dashed var(--chart-missing-border); border-radius: 4px !important; opacity: .7; }

/* ---------- Fulfillment ---------- */
.fulfillment-table { min-width: 1080px; table-layout: fixed; }
.fulfillment-table > thead > tr > th:nth-child(n+2) { width: 104px; }
.fulfillment-table > thead > tr > th.col-coverage { width: 220px; }
.portal-table th.num-head { text-align: right !important; }
.coverage-cell { display: flex; align-items: center; gap: 10px; }
.coverage-days { width: 56px; flex: none; font: 700 12px/1 var(--font-mono); color: var(--tone-fg, var(--text-muted)); }
.coverage-bar { flex: 1; height: 8px; min-width: 60px; }
.coverage-track { fill: var(--skeleton); }
.coverage-fill { fill: var(--tone-dot, var(--status-neutral-dot)); }
.coverage-goal { fill: var(--text-primary); opacity: .5; }
.fulfillment-suggestion { font-weight: 700; color: var(--text-primary); }
.table-formula-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--table-head); font-size: 12px; color: var(--text-muted); }
.goal-mark { display: inline-block; width: 2px; height: 10px; margin-right: 6px; background: var(--text-primary); opacity: .5; vertical-align: -1px; }
article.priority-tile { cursor: default; }
article.priority-tile:hover { border-color: var(--border) !important; background: var(--surface) !important; }
.segmented > button { min-height: 32px !important; }
/* Campanhas: alternatives note inside expanded rows */
.promo-children-row .sku-children-header, .return-children-row .sku-children-header { padding-left: 20px !important; }
.module-kpi-top .badge { margin-left: auto; }
/* Topbar fit: one row on desktop (≥ 1180 px), wraps search to its own row below that. */
.topbar-search { flex: 1 1 200px; min-width: 180px; }
.topbar-right { flex-wrap: nowrap; }
.portal-metric-strip, .dashboard-kpi-strip, .module-kpi-strip { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; }
@media (max-width: 1360px) { .topbar-search kbd { display: none; } }
@media (max-width: 860px) { .topbar-right { flex-wrap: wrap; } }
@media (max-width: 640px) { .topbar-channel-selector .channel-trigger-copy { display: none; } .ui-select-channel .ui-select-trigger { padding: 0 8px !important; } }

/* ---------- Bulk editor toolbar and rows ---------- */
.bulk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.bulk-search { flex: 1 1 220px; }
.bulk-apply-tax { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.bulk-apply-tax input { width: 110px; height: 32px !important; min-height: 32px !important; }
.bulk-sheet-body { padding: 0 !important; gap: 0 !important; }
.bulk-edit-scroll { max-height: min(52vh, 560px) !important; }
.bulk-edit-table { min-width: 760px; }
.bulk-edit-table td { padding: 6px 10px !important; }
.bulk-sku-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 340px; }
.bulk-sku-cell .tag-code { color: var(--text-secondary) !important; }
.bulk-margin { font: 700 12px/1 var(--font-mono); padding: 3px 7px; border-radius: 6px; color: var(--tone-fg); background: var(--tone-bg); }
.bulk-import { margin: 12px 20px 16px; }
.bulk-import .bulk-costs-step { margin: 12px; }
.bulk-footer-note { font-size: 12.5px; color: var(--text-muted); display: flex; flex-direction: column; gap: 2px; }
.bulk-footer-note strong { color: var(--text-primary); }
.bulk-footer-note small { font-size: 11.5px; color: var(--text-faint); }
.portal-floating-toast.toast-warning { border-left-color: var(--status-attention-dot) !important; }

/* ---------- Client invite flow: brand panel + steps (Convite.dc.html) ---------- */
.client-main.client-main-flow { width: min(960px, calc(100vw - 32px)) !important; display: grid !important; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); grid-template-rows: auto 1fr; padding: 0 !important; overflow: hidden; border-radius: 16px !important; border-color: var(--border-strong) !important; background: var(--surface) !important; box-shadow: var(--shadow-overlay) !important; }
.client-main-flow > .brand { grid-column: 1; grid-row: 1; justify-content: flex-start !important; margin: 0 !important; padding: 32px 32px 0; background: var(--sidebar-bg); color: var(--sidebar-active-fg) !important; }
.client-main-flow > .brand .brand-logo { width: 32px !important; height: 32px !important; }
.invite-brand-panel { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 12px; padding: 28px 32px 32px; background: var(--sidebar-bg); background-image: radial-gradient(ellipse at 0% 100%, var(--selection-strong), transparent 60%); color: var(--sidebar-fg); }
.invite-brand-title { margin: 0 !important; font: 750 26px/1.2 var(--font-sans); letter-spacing: -.03em; color: var(--sidebar-active-fg) !important; }
.invite-brand-copy { margin: 0 !important; font-size: 13.5px; line-height: 1.55; color: var(--sidebar-fg) !important; }
.invite-brand-foot { margin: auto 0 0 !important; padding-top: 16px; border-top: 1px solid var(--sidebar-border); font: 500 11px/1.5 var(--font-mono); color: var(--sidebar-muted) !important; }
.client-main-flow > .invite-flow, .client-main-flow > :not(.brand):not(.invite-brand-panel) { grid-column: 2; grid-row: 1 / span 2; padding: 36px 36px 28px; }
.invite-steps { justify-content: flex-start !important; }
.invite-steps li.is-current .invite-step-dot { background: var(--blue) !important; border-color: var(--blue-border) !important; color: var(--text-on-accent) !important; }
.invite-title { font-size: 24px !important; font-weight: 750 !important; letter-spacing: -.03em !important; }
.invite-company { background: var(--surface-raised) !important; border-color: var(--border) !important; border-radius: 12px !important; }
.invite-email { border-radius: 10px !important; }
.invite-flow .otp-digit { background: var(--surface-sunken) !important; border-color: var(--border-strong) !important; border-radius: 10px !important; font-family: var(--font-mono) !important; }
.invite-flow .verification-primary { border-radius: 10px !important; border: 1px solid var(--blue-border) !important; }
@media (max-width: 860px) {
  .client-main.client-main-flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; width: min(520px, calc(100vw - 24px)) !important; }
  .invite-brand-panel { display: none; }
  .client-main-flow > .brand { padding: 22px 22px 0; background: transparent; color: var(--text-primary) !important; justify-content: center !important; }
  .client-main-flow > .invite-flow, .client-main-flow > :not(.brand):not(.invite-brand-panel) { grid-column: 1; grid-row: 2; padding: 18px 20px 22px; }
}

/* =====================================================================================================================
   ADMIN (AdminNav / AdminLogin / AdminEmpresas / AdminEmpresa / AdminDialogos)
   ===================================================================================================================== */
.preview-disclaimer { margin-bottom: 12px; }
/* Summary cards that also filter */
.stat-label { display: flex; width: 100%; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.stat-indicator { width: 8px; height: 8px; border-radius: 99px; background: var(--status-info-dot); }
/* Company list card */
.search-clear { min-height: 24px !important; width: 24px; padding: 0 !important; border: 0 !important; background: none !important; color: var(--text-muted) !important; }
.company { display: flex !important; align-items: center; gap: 12px; }
.avatar { display: inline-grid !important; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px !important; overflow: hidden; background: var(--blue-light) !important; color: var(--status-info-text) !important; font: 700 12px/1 var(--font-sans); border: 1px solid var(--border) !important; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-large { width: 48px !important; height: 48px !important; border-radius: 12px !important; font-size: 15px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; text-align: center; }
.empty strong { font-size: 14px; color: var(--text-primary); }
.empty p { margin: 0; font-size: 12.5px; color: var(--text-muted); }
/* Company management: single column up to 1000 px, stacked blocks */
.text-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 12.5px; font-weight: 600; color: var(--link) !important; text-decoration: none; }
.company-heading { align-items: center !important; }
.company-title { display: flex; align-items: center; gap: 14px; }
.company-sections { display: flex !important; flex-direction: column; gap: 12px !important; }
.block-heading { display: flex; align-items: flex-start; gap: 12px; }
.block-heading h2 { margin: 0 !important; font: 700 15px/1.3 var(--font-sans) !important; color: var(--text-primary) !important; }
.block-heading p { margin: 2px 0 0 !important; font-size: 12.5px; }
.block-step { font: 600 11px/1 var(--font-mono); padding: 5px 7px; border-radius: 7px; background: var(--surface-active); color: var(--accent-icon); }
.form-grid { gap: 12px !important; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.notice-warning { display: flex; gap: 8px; margin: 12px 0 0 !important; padding: 10px 12px !important; border-radius: 10px; border: 1px solid var(--status-attention-border); background: var(--status-attention-bg); color: var(--status-attention-text) !important; font-size: 12.5px !important; }
.form-footer, .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.channel-list:not(.channel-list-workspace) { display: grid; gap: 10px; }
.channel-list:not(.channel-list-workspace) .channel { padding: 14px !important; border: 1px solid var(--border) !important; border-radius: 12px !important; background: var(--surface-raised) !important; }
.channel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.channel-name { display: flex; align-items: center; gap: 12px; }
.channel-name h3 { margin: 0 !important; font-size: 14px; }
.channel-name p { margin: 2px 0 0 !important; font-size: 12px; color: var(--text-muted) !important; }
.channel-detail { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; font-size: 12.5px; }
.channel-alert { padding: 8px 10px; border-radius: 8px; background: var(--status-danger-bg); color: var(--status-danger-text) !important; border: 1px solid var(--status-danger-border); }
.invite-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.invite-toolbar .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-toolbar form, .invite-actions form { margin: 0; }
.invite-actions { display: flex; justify-content: flex-end; gap: 6px; align-items: center; }
.unavailable-link { font-size: 12px; color: var(--text-muted); }
.invite-note { margin: 10px 0 0 !important; font-size: 12px; color: var(--text-muted) !important; }
/* Dialogs */
.modal-scroll { padding: 18px !important; }
/* Login: form left, brand panel right; form first on phones */
.auth-shell { min-height: 100dvh; display: grid !important; place-items: center; padding: 32px 16px !important; background: var(--canvas) !important; }
.auth-card { width: min(960px, 100%) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); overflow: hidden; background: var(--surface) !important; border: 1px solid var(--border-strong) !important; border-radius: 16px !important; box-shadow: var(--shadow-overlay) !important; }
.auth-form { order: 1; padding: 44px 44px 36px !important; display: flex; flex-direction: column; gap: 10px; background: var(--surface) !important; }
.auth-form h2 { margin: 4px 0 0 !important; font: 750 26px/1.2 var(--font-sans) !important; letter-spacing: -.03em; color: var(--text-primary) !important; }
.auth-form > p { margin: 0 0 8px !important; color: var(--text-muted) !important; }
.auth-form form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.auth-form [data-sign-in] { width: 100%; min-height: 44px !important; margin-top: 6px; box-shadow: var(--shadow-primary) !important; }
.auth-error { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--status-danger-border); background: var(--status-danger-bg); color: var(--status-danger-text); font-size: 13px; }
.auth-aside { order: 2; display: flex !important; flex-direction: column; gap: 20px; padding: 40px 36px !important; background: var(--sidebar-bg) !important; background-image: radial-gradient(ellipse at 100% 0%, var(--selection-strong), transparent 55%) !important; color: var(--sidebar-fg) !important; border: 0 !important; }
.auth-aside .auth-brand { display: flex; align-items: center; gap: 10px; color: var(--sidebar-active-fg) !important; font: 800 17px/1 var(--font-sans); }
.auth-aside .auth-brand img { width: 30px; height: 30px; }
.auth-aside h1 { margin: 0 0 6px !important; font: 750 24px/1.2 var(--font-sans) !important; letter-spacing: -.03em; color: var(--sidebar-active-fg) !important; }
.auth-aside p, .auth-aside .form-note { color: var(--sidebar-fg) !important; }
.auth-aside > .form-note { margin-top: auto; font: 500 11px/1.4 var(--font-mono); color: var(--sidebar-muted) !important; }
.auth-feature-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.auth-feature-list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--sidebar-card); border: 1px solid var(--sidebar-border); }
.auth-feature-list strong { font-size: 13px; color: var(--sidebar-active-fg); }
.auth-feature-list span { font-size: 12px; color: var(--sidebar-muted); }
.auth-mobile-brand { display: none !important; }
@media (max-width: 820px) {
  .auth-card { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { padding: 24px !important; }
  .auth-feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-form { padding: 28px 22px !important; }
  .auth-mobile-brand { display: flex !important; align-items: center; gap: 8px; font-weight: 800; }
}
.portal-metric-strip, .dashboard-kpi-strip, .module-kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) { .portal-metric-strip, .dashboard-kpi-strip, .module-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 520px) { .portal-metric-strip, .dashboard-kpi-strip, .module-kpi-strip { grid-template-columns: minmax(0, 1fr) !important; } }
.store-chart-footer { font-family: var(--font-sans) !important; justify-content: flex-start !important; }
.listing-table > thead > tr > th:nth-child(3), .listing-child-table > thead > tr > th:nth-child(3) { width: 116px; }
.listing-table > thead > tr > th:nth-child(4), .listing-child-table > thead > tr > th:nth-child(4) { width: 150px; }
.listing-table { min-width: 1344px; }
.promo-price-block del, .promo-price-line { white-space: nowrap; }
.bulk-footer-note { display: block !important; } .bulk-footer-note small { display: block; margin-top: 2px; } .bulk-input { max-width: 140px; margin-left: auto; display: block; }
.portal-toolbar { flex-direction: row !important; align-items: center !important; } @media (max-width: 720px) { .portal-search-wrap { flex: 1 1 100% !important; width: 100%; } .portal-toolbar .ui-select { flex: 1 1 calc(50% - 4px); min-width: 0; } .portal-toolbar .ui-select-trigger { width: 100%; } .portal-toolbar .ui-select-value { flex: 1; } }
.sidebar-nav-item.active .sidebar-badge { background: color-mix(in srgb, var(--sidebar-active-fg) 20%, transparent) !important; color: var(--sidebar-active-fg) !important; }
.sidebar-alert-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-danger-dot) 22%, transparent); }
.form-grid .logo-field { grid-column: 1 / -1; } .form-grid label input { width: 100%; } 
/* ---------- Campanhas: campaign rows share the MLB grid (Campanhas.dc.html) ---------- */
.promo-table, .promo-child-table { table-layout: fixed !important; }
.promo-table { min-width: 1400px; }
.promo-child-table { min-width: 0 !important; }
.promo-table > thead > tr > th:nth-child(1), .promo-child-table > thead > tr > th:nth-child(1) { width: 44px; }
.promo-table > thead > tr > th:nth-child(3), .promo-child-table > thead > tr > th:nth-child(3) { width: 128px; }
.promo-table > thead > tr > th:nth-child(4), .promo-child-table > thead > tr > th:nth-child(4) { width: 112px; }
.promo-table > thead > tr > th:nth-child(5), .promo-child-table > thead > tr > th:nth-child(5) { width: 168px; }
.promo-table > thead > tr > th:nth-child(6), .promo-child-table > thead > tr > th:nth-child(6) { width: 176px; }
.promo-table > thead > tr > th:nth-child(7), .promo-child-table > thead > tr > th:nth-child(7) { width: 116px; }
.promo-table > thead > tr > th:nth-child(8), .promo-child-table > thead > tr > th:nth-child(8) { width: 176px; }
.promo-table > thead > tr > th:nth-child(9), .promo-child-table > thead > tr > th:nth-child(9) { width: 140px; }
.promo-table > thead > tr > th:nth-child(10), .promo-child-table > thead > tr > th:nth-child(10) { width: 104px; }
.aligned-child-table > tbody > tr > td { padding: 6px 10px !important; height: 52px; }
.promo-table td small, .promo-child-table td small { display: block; margin-top: 2px; }
.children-note { padding-left: 64px !important; }
.children-note span { display: inline-flex; align-items: center; gap: 8px; }
.children-note svg { color: var(--accent-icon); flex: none; }
.margin-inline { font: 600 11.5px/1.2 var(--font-mono); }

/* ---------- Devoluções: rate bar, reason triad and MLB chips (Devolucoes.dc.html) ---------- */
.returns-table { table-layout: fixed !important; min-width: 1180px; }
.returns-table > thead > tr > th:nth-child(1) { width: 44px; }
.returns-table > thead > tr > th:nth-child(3) { width: 190px; }
.returns-table > thead > tr > th:nth-child(4) { width: 150px; }
.returns-table > thead > tr > th:nth-child(5), .returns-table > thead > tr > th:nth-child(6) { width: 124px; }
.returns-table > thead > tr > th:nth-child(7) { width: 110px; }
.returns-table > thead > tr > th:nth-child(8) { width: 220px; }
.returns-volume { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.returns-volume strong { color: var(--text-primary); font-weight: 650; }
.return-claim-summary { display: block; margin-top: 3px; font-size: 11px; color: var(--status-attention-text); }
.rate-cell { display: flex; align-items: center; gap: 10px; }
.rate-value { width: 48px; flex: none; font: 700 12px/1 var(--font-mono); color: var(--tone-fg, var(--text-primary)); }
.rate-bar { flex: 1; height: 6px; min-width: 40px; }
.rate-track { fill: var(--skeleton); }
.rate-fill { fill: var(--tone-dot, var(--status-neutral-dot)); }
.reason-tag { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.returns-children { padding: 4px 20px 18px 64px !important; display: flex !important; flex-direction: column; gap: 14px; }
.returns-children .sku-children-header { padding: 8px 0 0 !important; }
.reason-triad { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.reason-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.reason-card-head { display: flex; align-items: center; gap: 10px; }
.reason-card-head strong { font-size: 13px; font-weight: 650; color: var(--text-primary); }
.reason-card-index { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font: 700 11px/1 var(--font-mono); color: var(--tone-fg); background: var(--tone-bg); }
.reason-line { display: flex; flex-direction: column; gap: 5px; }
.reason-line-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.reason-line-top .num { font: 500 11.5px/1.3 var(--font-mono); color: var(--text-muted); }
.reason-bar { width: 100%; height: 4px; }
.reason-track { fill: var(--skeleton); }
.reason-fill { fill: var(--tone-dot); }
.reason-card.tone-neutral .reason-fill { fill: var(--text-faint); }
.reason-empty { margin: 0 !important; font-size: 12px; color: var(--text-muted) !important; }
.mlb-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.mlb-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); }
.return-claims-section h4 { margin: 0 0 4px !important; font-size: 13px; color: var(--text-primary); }
.return-claims-list { display: grid; gap: 8px; margin-top: 8px; }
.return-claim-card { display: flex !important; justify-content: space-between; gap: 12px; padding: 10px 12px !important; border-radius: 10px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; }
.return-claim-card strong { display: block; font-size: 12.5px; color: var(--text-primary); }
.return-claim-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11px; color: var(--text-muted); }

/* ---------- Drawer: DRE bars and MLB selector, overview mini curve, diarization (GavetaSku.dc.html) ---------- */
.dre-mlb-selector { display: flex !important; flex-wrap: wrap; margin-bottom: 10px; max-width: 100%; }
.dre-mlb-selector[hidden] { display: none !important; }
.dre-mlb-selector > button { font-family: var(--font-mono) !important; font-size: 11px !important; height: 26px; min-height: 26px !important; padding: 0 8px !important; }
/* DRE (F-14): compact rows in the portal type scale (12px, like the tables); no per-line bars. A row may carry a
   short note under the value (e.g. "sem imposto" next to the margin). */
.dre-row:has(> .dre-note:not([hidden])) { flex-wrap: wrap; row-gap: 0 !important; }
.dre-note { flex-basis: 100%; text-align: right; font-size: 10.5px; font-weight: 500; line-height: 1.3; color: var(--text-muted); }
.dre-note[hidden] { display: none; }
.dre-formula { margin: 8px 0 0 !important; padding: 0; background: none; border: 0; font: 400 10.5px/1.5 var(--font-sans); color: var(--text-faint) !important; }
.drawer-curve-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.drawer-curve-legend .legend-swatch { margin: 0 0 0 6px; }
.drawer-mini-curve { padding: 12px; border-radius: 10px; background: var(--surface-raised); border: 1px solid var(--border); }
.mini-curve-svg { display: block; width: 100%; height: 64px; }
.mini-bar { fill: var(--chart-1); }
.mini-bar.is-zero { fill: var(--border-strong); }
.mini-missing { fill: url(#drawer-hatch); stroke: var(--chart-missing-border); stroke-width: .6; stroke-dasharray: 2 2; }
.mini-hatch-bg { fill: var(--chart-missing); }
.mini-hatch-line { stroke: var(--chart-missing-border); stroke-width: 1.4; }
.drawer-curve-foot, .drawer-curve-empty { margin: 8px 0 0 !important; font-size: 11.5px; color: var(--text-muted) !important; }
.diarization-chart-wrap { position: relative; height: 220px; margin-bottom: 12px; }
.drawer-diarization-table-scroll { border: 1px solid var(--border); border-radius: 10px; overflow: auto; }
.diarization-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.diarization-table th { padding: 8px 10px !important; background: var(--table-head) !important; color: var(--text-muted) !important; font: 600 10.5px/1.2 var(--font-sans) !important; letter-spacing: .04em; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--border) !important; }
.diarization-table td { padding: 8px 10px !important; background: var(--surface) !important; border-bottom: 1px solid var(--border-subtle) !important; color: var(--text-primary); }
.diarization-total-row td { background: var(--surface-raised) !important; font-weight: 700; }
.diarization-delta-pill { font: 700 11px/1 var(--font-mono); padding: 3px 7px; border-radius: 6px; background: var(--status-neutral-bg); color: var(--status-neutral-text); }
.diarization-delta-pill.positive { background: var(--status-connected-bg); color: var(--status-connected-text); }
.diarization-delta-pill.negative { background: var(--status-risk-bg); color: var(--status-risk-text); }
.drawer-diarization-unavailable { padding: 14px; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface-sunken); }
.drawer-mlb-card { display: flex; justify-content: space-between; gap: 12px; padding: 12px; margin-bottom: 8px; border-radius: 10px; background: var(--surface-raised); border: 1px solid var(--border); }
.drawer-mlb-card strong { font-size: 12.5px; color: var(--text-primary); }
.drawer-mlb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; color: var(--text-muted); }
.drawer-mlb-financial { text-align: right; white-space: nowrap; }
.drawer-mlb-financial-meta { font-size: 11px; color: var(--text-muted); }
.returns-table { min-width: 1080px !important; } .returns-table > thead > tr > th:nth-child(8) { width: 190px; } .returns-table > thead > tr > th:nth-child(3) { width: 180px; }
.col-cost .cost-add-btn, .col-cost button.cost-add-btn { min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--link) !important; font: 600 11px/1.2 var(--font-sans) !important; }
.promo-price-block del { color: var(--text-muted) !important; }
.bulk-footer-note small { color: var(--text-muted) !important; }
.block-step { color: var(--link) !important; }
.invite-channel, .invite-channel-head > div { min-width: 0; }
.invite-channel-head { flex-wrap: wrap; }
@media (max-width: 520px) { .invite-channel-head .badge { display: none !important; } }
.channel-meta-grid { border: 0 !important; background: none !important; padding: 0 !important; }
.channel-card-coming .channel-subtitle { font-family: var(--font-sans) !important; font-size: 12px !important; }
@media (max-width: 520px) { .channel-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .channel-heading-workspace { justify-content: flex-start; } }
.client-mcp-card .copy-field input { background: var(--surface-sunken) !important; }
.portal-table-wrap > .scroll, .cn-table-container > .scroll { position: relative; }
.badge.preview-disclaimer { white-space: normal; height: auto; }
.bulk-input.is-invalid { border-color: var(--status-danger-dot) !important; background: var(--status-danger-bg) !important; }
.bulk-input.is-cleared { border-style: dashed !important; border-color: var(--status-attention-border) !important; }
.bulk-row-hint { display: block; margin-top: 2px; font-size: 11px; color: var(--status-attention-text); }
[data-bulk-invalid="true"] > td { background: color-mix(in srgb, var(--status-danger-dot) 6%, var(--surface)) !important; }
.fulfillment-table { min-width: 900px !important; } .fulfillment-table > thead > tr > th.col-coverage { width: 220px !important; }

/* ---------- Phase 3: period, schedule, alerts, logistics, consent, invite ---------- */
.period-segmented a, .period-segmented .segment-disabled {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 7px; font: 600 12.5px/1 var(--font-sans);
  color: var(--text-muted); text-decoration: none; white-space: nowrap;
}
.period-segmented a:hover { color: var(--text-primary); }
.period-segmented a[aria-current="page"] { background: var(--surface-active); color: var(--text-strong); }
.period-segmented .segment-disabled { color: var(--text-disabled); cursor: not-allowed; }
.chart-footnote { margin: 0 !important; font-size: 12px; color: var(--status-attention-text) !important; }
.schedule-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-raised); border: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); }
.schedule-row svg { color: var(--tone-fg, var(--text-muted)); flex: none; }
.freshness-schedule { margin: 0 !important; padding: 8px 16px; border-bottom: 1px solid var(--border-subtle); font-size: 12px; color: var(--tone-fg, var(--text-secondary)) !important; }
/* Freshness cards (Canais, F-12): same structure in all five cards (head, status, three dates one per line, 24 bars,
   then the optional note), so status, dates and bars sit at the same height in every card. */
.domain-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; }
.domain-facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.domain-facts dt { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.domain-facts dd { margin: 0; font: 500 11.5px/1.3 var(--font-mono); color: var(--text-secondary); white-space: nowrap; }
.channel-domain-card { justify-content: flex-start !important; }
.channel-domain-head strong, .channel-domain-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.domain-history-empty { display: flex; align-items: center; justify-content: center; height: 18px; line-height: 16px; border: 1px dashed var(--border); border-radius: 3px; font-size: 10.5px; color: var(--text-faint); }
.domain-error { margin: 0 !important; padding: 6px 8px; border-radius: 8px; background: var(--status-danger-bg); color: var(--status-danger-text) !important; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alerts-wrap { position: relative; }
.topbar-icon-btn { position: relative; width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 10px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text-secondary) !important; box-shadow: none !important; }
.topbar-icon-btn:hover, .topbar-icon-btn[aria-expanded="true"] { background: var(--surface-raised) !important; color: var(--text-primary) !important; }
.alerts-count { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--status-danger-dot); color: var(--text-on-accent); font: 700 10px/16px var(--font-mono); text-align: center; }
.alerts-popover { width: 360px; }
.alert-item { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: var(--text-primary) !important; }
.alert-item:hover { background: var(--surface-hover); }
.alerts-empty { margin: 0 !important; padding: 16px; font-size: 12.5px; color: var(--text-muted) !important; }
/* Multi-select (logistics) */
.ui-select-multi .ui-option { gap: 10px; }
.ui-option-box { width: 16px; height: 16px; flex: none; border-radius: 4px; border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.ui-option-box svg { width: 11px; height: 11px; }
.ui-option[aria-selected="true"] .ui-option-box { background: var(--blue); border-color: var(--blue-border); color: var(--text-on-accent); }
.ui-option-count { font: 500 11px/1 var(--font-mono); color: var(--text-faint); }
.ui-listbox-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; padding: 6px 4px 2px; border-top: 1px solid var(--border-subtle); }
.ui-listbox-footer button { min-height: 30px !important; height: 30px; padding: 0 10px !important; border-radius: 7px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font: 600 12px/1 var(--font-sans) !important; }
.ui-listbox-clear { color: var(--text-muted) !important; }
.ui-listbox-apply { color: var(--link) !important; }
.ui-listbox-footer button:hover { background: var(--surface-active) !important; }
.ui-select-multi .ui-select-value { max-width: 160px; }
.tag-logistic.is-unknown { color: var(--text-muted); }
/* MCP consent */
.client-main.consent-page { width: min(560px, calc(100vw - 32px)) !important; max-width: none !important; margin: 56px auto !important; padding: 28px !important; text-align: left !important; background: var(--surface) !important; border: 1px solid var(--border-strong) !important; border-radius: 16px !important; box-shadow: var(--shadow-overlay) !important; }
.consent-page h1 { margin: 6px 0 8px !important; font: 750 22px/1.25 var(--font-sans) !important; letter-spacing: -.02em; text-align: left !important; }
.consent-mark { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.consent-mcp, .consent-initials { display: inline-grid; place-items: center; height: 40px; min-width: 40px; padding: 0 10px; border-radius: 11px; font: 700 13px/1 var(--font-mono); }
.consent-mcp { background: var(--status-info-bg); color: var(--status-info-text); }
.consent-initials { background: var(--surface-active); color: var(--text-primary); }
.consent-mark.is-error .consent-initials { background: var(--status-danger-bg); color: var(--status-danger-text); }
.consent-arrow { color: var(--text-muted); font-size: 18px; }
.consent-eyebrow { margin: 0 !important; font: 500 11px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-icon) !important; }
.consent-sub { color: var(--text-secondary) !important; }
.consent-host { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-primary); border-bottom: 1px dotted var(--border-strong); }
.consent-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; padding: 0; }
.consent-chips li { padding: 4px 10px; border-radius: 999px; background: var(--surface-raised); border: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); }
.consent-guard { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--status-connected-border); background: var(--status-connected-bg); color: var(--status-connected-text) !important; font-size: 12.5px; }
.consent-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.consent-page .surface { padding: 16px !important; margin-top: 12px; }
/* Invite: steps as bars, company chip, brand points, back link, single code field as 6 cells */
.invite-steps { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; }
.invite-steps li { flex-direction: column; align-items: flex-start !important; gap: 6px !important; font-size: 11.5px !important; }
.invite-steps li + li::before { content: none !important; }
.invite-steps li::after { content: ""; order: -1; display: block; width: 100%; height: 4px; border-radius: 99px; background: var(--border); }
.invite-steps li.is-current::after { background: var(--blue); }
.invite-steps li.is-done::after { background: var(--status-connected-dot); }
.invite-flow:has(#otp-form[data-is-sent="true"]) .invite-steps li[data-step="1"]::after { background: var(--status-connected-dot); }
.invite-flow:has(#otp-form[data-is-sent="true"]) .invite-steps li[data-step="2"]::after { background: var(--blue); }
.invite-step-dot { display: none !important; }
.invite-company { position: relative; }
.invite-company-copy { flex: 1; min-width: 0; }
.invite-company-chip { flex: none; }
.invite-brand-points { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.invite-brand-points li { position: relative; padding-left: 18px; font-size: 13px; color: var(--sidebar-fg); }
.invite-brand-points li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 99px; background: var(--accent); }
.invite-back { justify-self: start; font-size: 12.5px; font-weight: 600; color: var(--text-muted) !important; text-decoration: none; }
.invite-back:hover { color: var(--text-primary) !important; }
/* OTP (F-05): one input (autocomplete="one-time-code", paste, OS fill) over 6 visual cells.
   Without JS the input is a plain visible field; portal.js adds .is-enhanced and mirrors the digits into the cells. */
.invite-flow .otp-code-wrap { position: relative; display: block; width: 100%; max-width: 360px; margin: 0 auto; }
.invite-flow input.otp-code {
  box-sizing: border-box; display: block; width: 100% !important; height: 56px !important; min-height: 56px !important; padding: 0 14px !important;
  border: 1px solid var(--border-strong) !important; border-radius: var(--radius-md) !important; box-shadow: none !important;
  background: var(--surface-sunken) !important; color: var(--text-primary) !important;
  font: 700 22px/54px var(--font-mono) !important; letter-spacing: 0.3em; text-align: center;
}
.invite-flow input.otp-code::placeholder { color: var(--text-disabled) !important; }
.invite-flow input.otp-code:focus-visible { outline: none !important; border-color: var(--border-focus) !important; box-shadow: var(--focus-ring) !important; }
.invite-flow .otp-cells { display: none; }
.invite-flow .otp-code-wrap.is-enhanced .otp-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; pointer-events: none; }
.invite-flow .otp-code-wrap.is-enhanced input.otp-code {
  position: absolute !important; inset: 0; z-index: 1; height: 100% !important; min-height: 0 !important; margin: 0 !important;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  color: transparent !important; caret-color: transparent; letter-spacing: 0; text-indent: -9999px; cursor: text;
}
.invite-flow .otp-code-wrap.is-enhanced input.otp-code::placeholder { color: transparent !important; }
.invite-flow .otp-code-wrap.is-enhanced input.otp-code:focus-visible { box-shadow: none !important; }
.invite-flow .otp-cell {
  position: relative; display: flex; align-items: center; justify-content: center; height: 56px; box-sizing: border-box;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-sunken);
  font: 700 24px/1 var(--font-mono); color: var(--text-primary); font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.invite-flow .otp-cell.is-filled { border-color: var(--border-focus); }
.invite-flow .otp-cell.is-active { border-color: var(--border-focus); box-shadow: var(--focus-ring); background: var(--selection-bg); }
.invite-flow .otp-cell.is-active:not(.is-filled)::after { content: ""; width: 2px; height: 26px; border-radius: 1px; background: var(--accent, var(--blue)); animation: otp-caret 1s steps(1) infinite; }
@keyframes otp-caret { 50% { opacity: 0; } }
.invite-flow .otp-code.is-invalid ~ .otp-cells .otp-cell { border-color: var(--status-danger-dot, #F87171); background: var(--status-danger-bg); }
.invite-flow .otp-code.is-valid ~ .otp-cells .otp-cell { border-color: var(--status-connected-dot); }
.invite-flow input.otp-code.is-invalid { border-color: var(--status-danger-dot, #F87171) !important; }
@media (max-width: 380px) { .invite-flow .otp-code-wrap.is-enhanced .otp-cells { gap: 6px; } .invite-flow .otp-cell { height: 50px; font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .invite-flow .otp-cell.is-active:not(.is-filled)::after { animation: none; } }
@media (max-width: 860px) { .alerts-popover { position: fixed !important; left: 16px !important; right: 16px !important; top: 72px !important; width: auto !important; max-width: none !important; } }
.channel-domain-card, .channel-domain-card > div { text-align: left !important; align-items: stretch !important; } .channel-domain-status { justify-content: flex-start !important; } .domain-facts { grid-template-columns: minmax(0, 1fr) !important; }

/* Icon sprite (row chevrons reference #olh-chevron): never takes layout space. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Price and MLB columns (Anúncios): long ranges and badges wrap inside the fixed column instead of spilling into
   the neighbouring column (seen at ~960 px, where the table scrolls with its fixed widths). */
.listing-table .col-price .promo-price-line, .listing-child-table .col-price .promo-price-line { display: flex; flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; max-width: 100%; white-space: normal; }
.listing-table .col-price .price-current, .listing-table .col-price del, .listing-child-table .col-price del, .listing-child-table .col-price strong { white-space: normal; text-align: right; max-width: 100%; }
.listing-table td.col-mlbs .badge-buybox, .listing-child-table td.col-mlbs .badge-buybox { white-space: normal !important; max-width: 100%; line-height: 1.25 !important; text-align: left; }
.listing-table td.col-price, .listing-table td.col-mlbs, .listing-child-table td.col-price, .listing-child-table td.col-mlbs { overflow: hidden; }

/* Notes added by the collection rules: aporte from the last promotions collection, drawer notices, history. */
.boost-source-note { display: block; font-size: 10.5px; line-height: 1.3; max-width: 100%; white-space: normal; text-align: right; }
.collection-notice { margin: 0 0 14px; }
.collection-notice a { color: var(--text-link, var(--accent)); }
.drawer-domain-notice { display: block; margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); font-size: 12px; line-height: 1.4; color: var(--text-secondary); }
.drawer-domain-notice.tone-warning { border-color: var(--status-attention-border); background: var(--status-attention-bg); }
.drawer-domain-notice.tone-danger { border-color: var(--status-danger-border); background: var(--status-danger-bg); }
.drawer-subsection-title { margin: 14px 0 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.drawer-promo-note { font-size: 12px; margin: 0 0 4px; }
.history-item .history-period { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.history-item .history-values { margin-top: 3px; font-size: 12px; color: var(--text-secondary); }
.history-item.is-current { border-color: var(--status-connected-border); }
.kpi-foot-link { color: var(--text-link, var(--accent)); white-space: nowrap; }

/* Histórico de coletas (company_sync_runs) — Canais.dc.html: 24 barras por domínio. */
.sync-history { display: flex; gap: 3px; align-items: stretch; }
.channel-domain-card .sync-history-bar { display: block; flex: 1 1 0; min-width: 3px; height: 18px; border-radius: 3px; background: var(--skeleton); }
.sync-history-bar.run-ok { background: var(--status-connected-dot); opacity: .78; }
.sync-history-bar.run-partial { background: var(--status-attention-dot); opacity: .85; }
.sync-history-bar.run-failed { background: var(--status-danger-dot); opacity: .9; }
.sync-history-bar.run-none { background: var(--skeleton); }
.sync-history-legend { margin: 10px 0 0 !important; font-size: 11.5px; color: var(--text-faint) !important; }
.domain-listing-gaps { margin: 0 !important; padding: 6px 8px; border-radius: 8px; background: var(--status-attention-bg); color: var(--status-attention-text) !important; font-size: 11.5px; }
/* Devoluções: tendência em p.p., notas de células e KPIs da gaveta. */
.return-trend { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; color: var(--text-secondary); }
.return-trend.tone-danger { color: var(--status-danger-text); }
.return-trend.tone-success { color: var(--status-connected-text); }
.return-trend.tone-neutral { color: var(--text-muted); }
.return-trend-note { display: block; margin-top: 2px; }
.cell-note { display: block; margin-top: 2px; font-size: 10.5px !important; color: var(--text-muted); white-space: normal; line-height: 1.3; }
.drawer-kpi-note { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
.live-today-notice { margin-bottom: 12px; }
.drawer-kpi-box > strong.return-trend.tone-danger { color: var(--status-danger-text) !important; }
.drawer-kpi-box > strong.return-trend.tone-success { color: var(--status-connected-text) !important; }

/* Campaign type chip in expanded campaign rows: long codes (MARKETPLACE_CAMPAIGN) wrap at the
   underscore into up to two lines instead of pushing the next column. */
/* Campaign rows: name and type on one line each, cut with "…" (full text in the title). */
.child-campaign-row .product-info-block { min-width: 0; max-width: 100%; }
.child-campaign-row .campaign-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.child-campaign-row .campaign-type-cell { max-width: 0; }
.child-campaign-row .campaign-type-cell > * { display: block; width: fit-content; max-width: 100%; }
.child-campaign-row .campaign-type-chip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }

/* ---------- Componentes compartilhados: variantes interativas (portal e admin) ---------- */
/* ESPEC-ADMIN-MELHORIAS-2026-10 §2.3 e §7.1. O contêiner .module-kpi-strip continua sem fundo e sem borda (U3). */
button.module-kpi { width: 100%; min-height: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; align-items: stretch; }
button.module-kpi:hover { border-color: var(--border-strong) !important; background: var(--surface-raised) !important; }
button.module-kpi[aria-pressed="true"] { border-color: var(--blue-border) !important; background: var(--selection-bg) !important; }
button.module-kpi:focus-visible { outline: none; box-shadow: var(--focus-ring) !important; }
nav.section-anchors { position: sticky; top: calc(var(--topbar-h, 60px) + 8px); z-index: 5; display: flex !important; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; background: var(--canvas) !important; }
nav.section-anchors::-webkit-scrollbar { display: none; }
nav.section-anchors a.portal-filter-chip { text-decoration: none; }
nav.section-anchors a.portal-filter-chip[aria-selected="true"] { background: var(--surface-active) !important; color: var(--text-strong) !important; }
/* F-17: section tabs. Without JS (no .is-tabs) the bar stays in-page links and every panel is open; the selected
   style only shows once panel-client.js manages the tabs. */
nav.section-anchors:not(.is-tabs) a.portal-filter-chip[aria-selected="true"] { background: transparent !important; color: var(--text-muted) !important; }
nav.section-anchors a.portal-filter-chip:focus-visible { outline: none; box-shadow: var(--focus-ring) !important; }
[data-section-panel][hidden] { display: none !important; }
nav.section-anchors a.portal-filter-chip .status-dot { width: 7px; height: 7px; }
.anchor-section { scroll-margin-top: 128px; }
.ui-dialog button.danger, .button.danger { background: #DC2626; border-color: #DC2626; color: #fff; }
.ui-dialog button.danger:hover, .button.danger:hover { background: #B91C1C; border-color: #B91C1C; color: #fff; }
html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
dialog.ui-dialog { padding: 0; width: min(560px, calc(100vw - 32px)); max-width: none; height: fit-content; max-height: min(88dvh, 860px); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-overlay); overflow: hidden; }
dialog.ui-dialog[open] { display: flex; flex-direction: column; }
dialog.ui-dialog[data-size="confirm"] { width: min(440px, calc(100vw - 32px)); }
dialog.ui-dialog[data-size="form"] { width: min(640px, calc(100vw - 32px)); }
dialog.ui-dialog[data-size="info"] { width: min(560px, calc(100vw - 32px)); }
dialog.ui-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(2px); }
dialog.ui-dialog > .bulk-sheet-header { flex: none; padding: 16px 20px !important; }
dialog.ui-dialog > .bulk-sheet-header h2 { margin: 0 0 4px !important; font: 700 17px/1.3 var(--font-sans) !important; }
dialog.ui-dialog .ui-dialog-body { flex: 1 1 auto; min-height: 0; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
dialog.ui-dialog .ui-dialog-body > p:first-child { margin-top: 0; }
dialog.ui-dialog .ui-dialog-body > :last-child { margin-bottom: 0; }
dialog.ui-dialog .ui-dialog-actions { flex: none; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--border); background: var(--surface-raised); }
dialog.ui-dialog .ui-dialog-match { display: grid; gap: 6px; margin-top: 14px; font-size: 13px; color: var(--text-secondary); }
dialog.ui-dialog .ui-dialog-match code { font-family: var(--font-mono); color: var(--text-strong); }
dialog.ui-dialog .ui-dialog-match + input { width: 100%; margin-top: 6px; }
/* Content placed in the dialog slot (template) keeps the header / scrolling body / footer column. */
dialog.ui-dialog .ui-dialog-slot, dialog.ui-dialog .ui-dialog-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; }
dialog.ui-dialog .ui-dialog-body > .alert-banner { margin-bottom: 14px; }
.required-mark { color: var(--status-danger-text); font-weight: 600; }
.alert-banner.tone-success { --tone-border: var(--status-connected-border); }
.alert-banner > form, .alert-banner > .button { margin: 0 0 0 auto; flex: none; align-self: center; }
/* Company page (/admin/empresas/{id}): open sections in one column, anchor bar, PRG notices. */
.company-page { display: flex; flex-direction: column; gap: 16px; }
.company-page-heading { align-items: center !important; }
.company-page-title { display: flex !important; flex-direction: row !important; align-items: center; gap: 16px !important; min-width: 0; }
.company-page-title > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.company-page-title .eyebrow { margin: 0; }
.company-page-title h1 { overflow-wrap: anywhere; }
.company-page-avatar { width: 56px !important; height: 56px !important; flex: none; font-size: 18px; }
.company-page-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
/* overflow-x: hidden on the shell turns it into a scroll container that never scrolls (the page scrolls), which
   disables position: sticky for the topbar and the anchor bar. clip cuts the same overflow without that effect.
   Same for the client portal (F-15): fixed topbar while the page scrolls. */
@media (min-width: 721px) {
  .portal-app-shell.admin-workspace, .portal-app-shell.client-workspace { overflow-x: clip !important; overflow-y: visible !important; }
}
.company-page > nav.section-anchors { top: var(--topbar-h, 64px); margin: -8px 0 0; padding: 8px 3px; }
.company-section .portal-table-wrap .scroll { min-height: 0 !important; }
.company-section table.invite-table { min-width: 560px !important; width: 100%; }
.company-section .invite-actions { justify-content: flex-end; flex-wrap: nowrap; }
.form-grid .field-label { display: inline-flex; gap: 4px; align-items: baseline; }
.company-section .form-grid, .ui-dialog-form .form-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.company-section .form-grid > .logo-field, .ui-dialog-form .form-grid > .logo-field { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .company-section .form-grid, .ui-dialog-form .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
.company-section { display: flex !important; flex-direction: column; gap: 14px; padding: 20px !important; }
.company-section .section-heading { align-items: flex-start !important; }
.company-section .section-heading h2 { margin: 0 !important; font: 700 16px/1.3 var(--font-sans) !important; color: var(--text-primary) !important; }
.company-section .section-heading p { font-size: 12.5px; }
.company-section .section-heading form { margin: 0; }
.company-section > form { margin: 0; }
.company-section .form-footer { margin-top: 14px; }
.company-section .email-warning { margin-top: 14px; }
.company-section .email-warning[hidden] { display: none !important; }
.company-section .channel-meta-item dd { font-size: 13.5px !important; font-weight: 600; overflow-wrap: anywhere; white-space: normal; text-overflow: clip; }
.company-section .state-card { padding: 20px; text-align: center; }
/* Profile page (/admin/profile): the sections live inside one form, stacked like the company page. */
.profile-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.profile-photo-field [data-logo-placeholder] { display: inline-flex; align-items: center; justify-content: center; font: 700 18px/1 var(--font-sans); color: var(--status-info-text); }
.profile-photo-field [data-logo-placeholder][hidden] { display: none; }
.profile-photo-field [data-logo-placeholder] svg { width: 26px; height: 26px; }
.profile-page .form-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.company-section .invite-table td { vertical-align: middle; }
.danger-zone { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.danger-zone .alert-banner { flex-wrap: wrap; padding: 16px 18px; }
.danger-zone .alert-banner > div { flex: 1 1 280px; min-width: 0; }
.danger-zone h2 { margin: 2px 0 4px !important; font: 700 15px/1.3 var(--font-sans) !important; color: var(--tone-fg) !important; }
.invite-facts { margin-top: 14px !important; }
.invite-facts dd { font-size: 13.5px !important; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .company-page-heading .portal-heading-actions { width: 100%; }
  .company-page-avatar { width: 44px !important; height: 44px !important; }
  .company-page-title { align-items: flex-start; }
  /* The phone topbar wraps to ~190 px (session, alerts, search): a sticky anchor bar would hide behind it. */
  .company-page > nav.section-anchors { position: static !important; margin: 0; flex-wrap: nowrap !important; overflow-x: auto; }
  .company-section { padding: 16px !important; }
}
@media (max-width: 520px) {
  dialog.ui-dialog, dialog.ui-dialog[data-size] { width: calc(100vw - 16px); }
  dialog.ui-dialog .ui-dialog-actions { flex-direction: column-reverse; }
  dialog.ui-dialog .ui-dialog-actions > * { width: 100%; }
}

/* Company list (/admin/empresas): KPI filters, toolbar with the Coleta chip, hierarchical table company → stores. */
.company-list { display: flex; flex-direction: column; gap: 14px; }
.company-list > .portal-heading, .company-list > .module-kpi-strip { margin: 0 !important; }
.portal-filter-chip[aria-pressed="true"] { background: var(--surface-active) !important; color: var(--text-strong) !important; }
.portal-toolbar-count { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.portal-toolbar-count strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.company-list-toolbar .company-list-refresh { margin-left: auto; }
.company-list-toolbar .company-list-refresh svg { width: 15px; height: 15px; }
.company-list-table table { min-width: 900px; }
.company-list-table th.col-expand, .company-list-table td.col-expand { width: 44px; padding-left: 8px !important; padding-right: 0 !important; text-align: center; }
.company-list-table td small { display: block; margin-top: 3px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
/* Verification detail and collection notes wrap in up to two lines instead of widening the column. */
.company-list-table td small.cell-wrap { white-space: normal; max-width: 130px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.company-list-table td small.mono { font-family: var(--font-mono); }
.company-list-table td.row-action { text-align: right; white-space: nowrap; }
.company-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.company-cell .cn-avatar { flex: none; }
.company-cell-copy { display: flex; flex-direction: column; min-width: 0; }
.company-name-link { font-weight: 650; color: var(--text-primary) !important; text-decoration: none; overflow-wrap: anywhere; }
.company-name-link:hover { color: var(--link) !important; text-decoration: underline; }
.company-name-link:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--focus-ring); }
.portal-table tbody > tr.company-store-row > td { background: var(--table-child) !important; }
.portal-table tbody > tr.company-row:has(.row-expand-btn[aria-expanded="true"]) > td { background: var(--table-row-hover) !important; }
.company-store-row .mono { font: 600 12.5px/1.3 var(--font-mono); color: var(--text-secondary); }
.company-store-logo { display: inline-flex; flex: none; width: 24px; height: 24px; align-items: center; justify-content: center; }
.company-store-logo svg, .company-store-logo img { width: 20px; height: 20px; }
.company-list-empty { padding: 24px 16px !important; border: 0 !important; background: transparent !important; }
.portal-table tbody > tr.company-empty-row:hover > td { background: var(--surface) !important; }

/* =====================================================================================================================
   Telas de entrada (F-10): convite do cliente (/convite, .client-main-flow) e login do admin (.auth-card)
   ===================================================================================================================== */
/* Card centered in the viewport on both axes; width follows the body padding, never 100vw (no sideways scroll). */
body:has(> main.client-main-flow) { min-height: 100dvh; margin: 0; display: grid; place-items: center; padding: 32px 16px; box-sizing: border-box; }
body:has(> main.client-main-flow) > main.client-main.client-main-flow { width: min(960px, 100%) !important; margin: 0 !important; }
@media (max-width: 860px) {
  body:has(> main.client-main-flow) > main.client-main.client-main-flow { width: min(520px, 100%) !important; }
}
@media (max-width: 520px) {
  body:has(> main.client-main-flow) { padding: 16px; }
}
/* Steps "1. Convite" and "2. Código": two equal columns spanning the flow column, so they share the width and the
   central axis of the company block (.invite-company) right below. */
.invite-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100%; margin: 0 !important; }
.invite-steps li { align-items: stretch !important; text-align: center; }
.invite-step-label { display: block; text-align: center; font-size: 12px; }
.invite-step-num { font-variant-numeric: tabular-nums; }
/* Code label centered over the 6 cells */
.invite-flow .otp-field-label { justify-content: center !important; text-align: center !important; }
/* Theme switch in the card's header row, next to the brand: away from the main action, still reachable first by
   keyboard (it comes right after the brand in the DOM) and announced with aria-pressed. */
.page-theme-switch.is-in-card { position: static; z-index: 1; display: inline-grid; width: max-content; margin: 0; padding: 2px; backdrop-filter: none; box-shadow: none; }
.page-theme-switch.is-in-card button { min-width: 30px; min-height: 26px; padding: 4px 7px; }
.client-main.client-main-flow > .page-theme-switch.is-in-card { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; margin: 32px 24px 0 0; padding: 2px; }
.auth-card { position: relative; }
.auth-card > .page-theme-switch.is-in-card { position: absolute; top: 39px; right: 36px; }
/* On the dark brand panel (desktop) the switch uses the panel's colors in both themes */
@media (min-width: 861px) {
  .client-main-flow > .page-theme-switch.is-in-card { background: var(--sidebar-card); border-color: var(--sidebar-border); }
  .client-main-flow > .page-theme-switch.is-in-card button { color: var(--sidebar-muted); }
  .client-main-flow > .page-theme-switch.is-in-card button:hover { color: var(--sidebar-active-fg); }
  .client-main-flow > .page-theme-switch.is-in-card button[aria-pressed="true"] { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg); box-shadow: none; }
}
@media (min-width: 821px) {
  .auth-card > .page-theme-switch.is-in-card { background: var(--sidebar-card); border-color: var(--sidebar-border); }
  .auth-card > .page-theme-switch.is-in-card button { color: var(--sidebar-muted); }
  .auth-card > .page-theme-switch.is-in-card button:hover { color: var(--sidebar-active-fg); }
  .auth-card > .page-theme-switch.is-in-card button[aria-pressed="true"] { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg); box-shadow: none; }
}
/* Stacked (no brand panel): brand on the left, switch on the right of the same header row */
@media (max-width: 860px) {
  .client-main-flow > .brand { justify-content: flex-start !important; padding: 22px 20px 0 !important; }
  .client-main.client-main-flow > .page-theme-switch.is-in-card { margin: 22px 20px 0 0; }
}
@media (max-width: 820px) {
  .auth-card > .page-theme-switch.is-in-card { top: 31px; right: 22px; }
}

/* =====================================================================================================================
   Sem loja conectada (F-09): estado vazio do Dashboard (.no-store-notice) e confirmação de GET /canais/meli
   ===================================================================================================================== */
/* Dashboard without a store: the shared state-card, with a welcoming tone (accent icon) and one evident action.
   !important on border/background: .surface sets both with !important (theme.css, cards section). */
.state-card.no-store-notice { gap: 8px !important; padding: 36px 24px 32px !important; margin: 0 0 16px; border: 1px dashed var(--status-info-border) !important; background: color-mix(in srgb, var(--status-info-bg) 45%, var(--surface)) !important; }
.no-store-notice .no-store-icon { width: 52px !important; height: 52px !important; margin-bottom: 6px; border-radius: 14px !important; background: var(--blue-light) !important; color: var(--status-info-text) !important; }
.no-store-notice .no-store-icon svg { width: 26px; height: 26px; }
.no-store-notice .no-store-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--status-info-text); }
.state-card.no-store-notice strong { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.state-card.no-store-notice p { max-width: 460px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary) !important; }
.no-store-notice .no-store-action { margin-top: 10px; min-height: 40px; padding: 0 18px; gap: 8px; text-decoration: none; }
@media (max-width: 520px) {
  .state-card.no-store-notice { padding: 28px 16px 24px !important; }
  .no-store-notice .no-store-action { align-self: stretch; justify-content: center; }
}

/* GET /canais/meli: same card as the invite (F-10). Channel block, title, the three steps, one primary action. */
.connect-meli > form { margin: 0 !important; }
.connect-meli-channel .channel-logo { flex: none; border-radius: 10px; }
.connect-meli-channel > div { flex: 1; min-width: 0; }
.connect-meli-channel .badge { flex: none; }
.connect-meli-steps { display: grid; gap: 12px; margin: 0; padding: 14px 16px; list-style: none; counter-reset: connect-step; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-raised); }
.connect-meli-steps li { position: relative; display: grid; gap: 2px; padding-left: 34px; counter-increment: connect-step; }
.connect-meli-steps li::before { content: counter(connect-step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-light); color: var(--status-info-text); font: 700 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.connect-meli-steps strong { font-size: 13.5px; line-height: 24px; color: var(--text-primary); }
.connect-meli-steps span { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.connect-meli .invite-back { justify-self: center; }

/* =====================================================================================================================
   Tabela hierárquica (F-07, docs/COMPONENTE-TABELA-HIERARQUICA.md): regras comuns às telas que usam hierTable /
   hierChildren / hierChildRow (Anúncios, Campanhas, Devoluções, Fulfillment). As regras antigas por tela continuam
   valendo enquanto a consolidação do CSS não termina.
   ===================================================================================================================== */
/* The table scrolls sideways inside its card; the page never does. */
.hier-table-card { max-width: 100%; }
.hier-table-card > .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Parent row with its group open: same highlight in every screen (was one selector per table). */
.hier-table > tbody > tr:has(> td > .row-expand-btn[aria-expanded="true"]) > td,
.hier-table > tbody > tr:has(> td > .expand-cell-wrap > .row-expand-btn[aria-expanded="true"]) > td { background: var(--table-row-hover) !important; border-bottom-color: var(--border-subtle) !important; }
/* Child outside the totals (cancelled, replaced, alternative not chosen): struck and faded; the group note says why. */
.hier-child-row.is-muted > td { opacity: .55; }
.hier-child-row.is-muted .product-title, .hier-child-row.is-muted .tabular-cell { text-decoration: line-through; }
/* Empty / no results / failure inside the body */
.hier-empty-row .portal-empty.is-failure .state-icon { background: var(--status-danger-bg) !important; color: var(--status-danger-text) !important; }

/* =====================================================================================================================
   Vendas (V-03, prancha docs/redesign-2026-10/Vendas.dc.html): cabeçalho, KPIs compactos, visões, tabela de pedidos/packs
   (componente Tabela hierárquica) e Produtos em queda.
   ===================================================================================================================== */
.sales-pane { --sales-pack-fg: #C4B5FD; --sales-pack-bg: rgba(167, 139, 250, .16); }
:root[data-theme="light"] .sales-pane { --sales-pack-fg: #6D28D9; --sales-pack-bg: rgba(124, 58, 237, .10); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) .sales-pane { --sales-pack-fg: #6D28D9; --sales-pack-bg: rgba(124, 58, 237, .10); } }
.sales-pane.active { display: flex; flex-direction: column; gap: 16px; }
.sales-pane .portal-heading { margin-bottom: 0; }
.sales-heading-actions { flex-wrap: wrap; align-items: center; }
.sales-range { position: relative; }
.sales-range > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.sales-range > summary::-webkit-details-marker { display: none; }
.sales-range[data-custom] > summary { border-color: var(--blue) !important; }
.sales-range-form { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); display: grid; gap: 10px; width: 240px; padding: 14px; background: var(--surface-overlay); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, .28)); }
.sales-range-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.sales-range-form input[type="date"] { height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); font: 500 13px/1 var(--font-sans); color-scheme: light dark; }
.sales-coverage-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 !important; font-size: 12.5px; color: var(--text-secondary); }
.sales-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.sales-kpi { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.sales-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sales-kpi-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.sales-kpi-chip { font: 600 11px/1 var(--font-mono); padding: 3px 7px; border-radius: 6px; color: var(--tone-fg); background: var(--tone-bg); white-space: nowrap; }
.sales-kpi-value { font-size: 19px; font-weight: 750; letter-spacing: -.02em; color: var(--text-strong); }
.sales-kpi.is-missing .sales-kpi-value { color: var(--text-disabled); }
.sales-kpi-value.is-low, .sales-margin-chip.tone-warning { color: var(--status-attention-text) !important; }
.sales-kpi-foot { font-size: 11px; line-height: 1.35; color: var(--text-muted); }
.sales-monthly-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.sales-views { align-self: flex-start; }
.sales-views a { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 7px; font: 650 13px/1 var(--font-sans); color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.sales-views a:hover { color: var(--text-primary); }
.sales-views a[aria-current="page"] { background: var(--surface-active); color: var(--text-strong); }
.sales-view-count { font: 600 10.5px/1 var(--font-mono); padding: 3px 6px; border-radius: 999px; background: var(--surface-raised); color: var(--text-secondary); }
/* Dashboard · faturamento e margem por mês (12 meses) */
.sales-monthly-card { scroll-margin-top: 136px; }
.legend-swatch.is-margin { width: 8px; height: 8px; border-radius: 999px; background: var(--chart-2); }
.store-daily-chart:not(.is-chart-ready) #sales-monthly-chart-canvas { display: none; }
.store-daily-chart #sales-monthly-chart-canvas { width: 100% !important; height: 208px !important; }
.store-daily-chart.is-chart-ready [data-sales-monthly-fallback] { display: none; }
.store-chart-bar-col.is-missing .store-bar-fill.active { background: repeating-linear-gradient(135deg, var(--chart-missing-border) 0 1px, color-mix(in srgb, var(--chart-1) 35%, transparent) 1px 6px) !important; }
/* Vendas · tabela de pedidos (mãe e filhos na mesma grade, guia de árvore na coluna do expansor) */
.sales-table, .sales-child-table { table-layout: fixed !important; min-width: 1520px; }
.sales-table > thead > tr > th:nth-child(1), .sales-child-table > thead > tr > th:nth-child(1) { width: 44px; }
.sales-table > thead > tr > th:nth-child(2), .sales-child-table > thead > tr > th:nth-child(2) { width: 104px; }
.sales-table > thead > tr > th:nth-child(3), .sales-child-table > thead > tr > th:nth-child(3) { width: 176px; }
.sales-table > thead > tr > th:nth-child(5), .sales-child-table > thead > tr > th:nth-child(5) { width: 64px; }
.sales-table > thead > tr > th:nth-child(6), .sales-child-table > thead > tr > th:nth-child(6) { width: 124px; }
.sales-table > thead > tr > th:nth-child(7), .sales-child-table > thead > tr > th:nth-child(7) { width: 96px; }
.sales-table > thead > tr > th:nth-child(8), .sales-child-table > thead > tr > th:nth-child(8) { width: 100px; }
.sales-table > thead > tr > th:nth-child(9), .sales-child-table > thead > tr > th:nth-child(9) { width: 92px; }
.sales-table > thead > tr > th:nth-child(10), .sales-child-table > thead > tr > th:nth-child(10) { width: 88px; }
.sales-table > thead > tr > th:nth-child(11), .sales-child-table > thead > tr > th:nth-child(11) { width: 112px; }
.sales-table > thead > tr > th:nth-child(12), .sales-child-table > thead > tr > th:nth-child(12) { width: 128px; }
.sales-table > thead > tr > th:nth-child(13), .sales-child-table > thead > tr > th:nth-child(13) { width: 124px; }
.sales-table > tbody > tr > td, .sales-child-table > tbody > tr > td { vertical-align: middle; }
.sales-table td.col-num, .sales-child-table td.col-num { text-align: right; }
.sales-table td.col-num > small, .sales-child-table td.col-num > small, .sales-table td.col-date > small { display: block; }
.sales-child-table { min-width: 0 !important; width: 100%; }
.sales-table > tbody > tr > td, .sales-child-table > tbody > tr > td { padding: 8px 10px !important; }
.sales-child-table .child-product-cell { gap: 0; }
.sales-child-table .child-product-cell .tree-branch { display: none; }
.sales-cell-note { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.25; font-weight: 500; color: var(--text-muted); white-space: normal; overflow-wrap: anywhere; }
.sales-cell-note.tone-warning { color: var(--status-attention-text); }
.sales-pane .tabular-cell.is-missing { color: var(--text-disabled); }
.sales-zero { color: var(--text-muted); }
.sales-date { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.sales-order { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.sales-order-id { font: 500 11.5px/1.2 var(--font-mono); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sales-pack-chip { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; color: var(--sales-pack-fg); background: var(--sales-pack-bg); white-space: nowrap; }
.sales-product { min-width: 0; }
.sales-product .product-meta-wrap { min-width: 0; }
.sales-product .product-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sales-product .product-sku-label { display: block; font: 500 10.5px/1.3 var(--font-mono); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sales-product .external-link { text-decoration: none; }
.sales-margin { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sales-margin-chip { display: inline-block; font: 700 12px/1 var(--font-mono); padding: 3px 7px; border-radius: 6px; color: var(--tone-fg); background: var(--tone-bg); white-space: nowrap; }
.sales-margin-chip.tone-neutral { background: transparent; color: var(--text-disabled); }
.sales-status { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.sales-status-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; color: var(--tone-fg); background: var(--tone-bg); white-space: nowrap; }
.sales-status-chip.tone-pack { color: var(--sales-pack-fg); background: var(--sales-pack-bg); }
.sales-group-row.is-muted > td { opacity: .55; }
.sales-group-row.is-muted .tabular-cell, .sales-group-row.is-muted .sales-order-id { text-decoration: line-through; }
.hier-child-row.is-muted .sales-order-id { text-decoration: line-through; }
.sales-child-row .product-cell-wrap { gap: 8px; }
.sales-footnote, .sales-criteria { margin: 0 !important; font-size: 11.5px; color: var(--text-muted); }
.sales-criteria { padding: 10px 16px; border-top: 1px solid var(--border); }
.sales-pagination .cn-pagination-content { gap: 4px; }
.sales-pagination .cn-pagination-link { text-decoration: none; }
.sales-pagination .cn-pagination-page { min-width: 32px; justify-content: center; }
.sales-pagination .cn-pagination-page.is-current { border-color: var(--blue) !important; background: var(--blue-light) !important; color: var(--text-strong) !important; }
.sales-pagination .is-disabled { opacity: .45; pointer-events: none; }
/* Filtros (form GET) */
.sales-filters { flex-wrap: wrap; }
.sales-filters .portal-search-wrap { flex: 1 1 260px; }
.sales-filters[data-js] .sales-filter-submit { display: none; }
/* Produtos em queda */
.sales-decline-table { table-layout: fixed !important; min-width: 1300px; }
.sales-decline-table > thead > tr > th:nth-child(2) { width: 150px; }
.sales-decline-table > thead > tr > th:nth-child(n+3) { width: 108px; }
.sales-decline-table > thead > tr > th:nth-child(10) { width: 124px; }
.sales-decline-table td.col-num, .sales-decline-table td.col-action { text-align: right; }
.sales-decline-table td.col-num > small { display: block; }
.sales-spark path { fill: none; stroke: var(--chart-1); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sales-spark circle { fill: var(--chart-2); }
.sales-spark.is-empty path { stroke: var(--border-strong); stroke-dasharray: 4 4; }
.sales-low, .text-warning-soft { color: var(--status-attention-text); }
.sales-decline-note { margin: 0 !important; }
.sales-decline-table .product-title-btn { all: unset; cursor: pointer; display: block; min-width: 0; max-width: 100%; }
.sales-decline-table .product-title-btn:hover .product-title { color: var(--blue); }
.sales-decline-table .product-title-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 860px) {
  .sales-heading-actions { width: 100%; }
  .sales-heading-actions .period-segmented { max-width: 100%; overflow-x: auto; }
  .sales-range-form { left: 0; right: auto; }
  .sales-views { max-width: 100%; overflow-x: auto; }
}
   Anúncios encerrados (F-19): etiqueta "Encerrado" e filtro "Mostrar encerrados" (Anúncios, Campanhas, Fulfillment)
   ===================================================================================================================== */
.tag-ended { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-active); color: var(--text-muted); font-size: 10.5px; font-weight: 650; letter-spacing: .02em; white-space: nowrap; vertical-align: middle; }
.show-ended-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; margin: 0 !important; }
.show-ended-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue); }
.show-ended-toggle:has(input:checked) { border-color: var(--status-info-border); background: var(--status-info-bg); color: var(--status-info-text); }
.show-ended-toggle:focus-within { box-shadow: var(--focus-ring); }
.fulfillment-toolbar { justify-content: flex-end; }
.sales-product .product-sku-label .tag-ended { margin-left: 4px; }
/* Ended MLBs inside a SKU block stay hidden until "Mostrar encerrados" (the SKU row hides only when all are ended). */
.listing-table:not(.is-showing-ended) tr.child-mlb-row[data-ended] { display: none; }
.listing-table.is-showing-ended .children-ended-note { display: none; }
.children-ended-note { color: var(--text-muted); }
/* Uso e saúde (F-06): /admin/uso and /admin/uso?empresa={id}, built from the list and company page components. */
.usage-page { display: flex; flex-direction: column; gap: 16px; }
.usage-alerts { display: flex; flex-direction: column; gap: 8px; }
.usage-companies { display: flex; flex-direction: column; gap: 10px; }
.usage-companies > .section-heading h2 { margin: 0 !important; font: 700 16px/1.3 var(--font-sans) !important; }
.usage-table table.portal-table { min-width: 1120px !important; }
.usage-table td { vertical-align: middle; }
.usage-table td.num, .usage-page th.num, .usage-page td.num { text-align: right; font-variant-numeric: tabular-nums; }
.usage-health-detail { display: block; max-width: 240px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 11.5px; }
.usage-chart-wrap { position: relative; height: 260px; }
/* F-20: same as the portal charts: the canvas follows its box (Chart.js may keep an old inline width until it resizes). */
.usage-chart-wrap canvas { display: block; width: 100% !important; height: 100% !important; }
.usage-chart-wrap[hidden], .usage-metric-select[hidden] { display: none !important; }
.usage-metric-select { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.usage-metric-select > button { white-space: nowrap; }
.usage-daily-details > summary { cursor: pointer; width: fit-content; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; }
.usage-daily-details[open] > summary { margin-bottom: 10px; }
.usage-daily-details table.portal-table { min-width: 520px !important; width: 100%; }
.usage-tools table.portal-table { min-width: 0 !important; width: 100%; }
.usage-page .portal-table-wrap .scroll { min-height: 0 !important; }
@media (min-width: 1101px) { .usage-company .module-kpi-strip { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
@media (max-width: 720px) {
  .usage-page .portal-heading-actions { width: 100%; }
  .usage-chart-wrap { height: 220px; }
  .usage-chart-section .section-heading { flex-direction: column; align-items: stretch !important; }
}
/* F-20: segmented period selectors (Dashboard, Vendas, Uso e saúde) never push the page wider than the screen: on
   narrow screens they scroll sideways inside their own box. */
.portal-heading-actions { min-width: 0; max-width: 100%; }
.period-segmented { max-width: 100%; overflow-x: auto !important; scrollbar-width: none; }
.period-segmented::-webkit-scrollbar { display: none; }
.period-segmented > * { flex: none; }

}
@layer base {
@font-face{font-family:Jakarta;src:url('/assets/fonts/jakarta.woff2') format('woff2'),url('/assets/fonts/jakarta.ttf') format('truetype');font-weight:200 800;font-display:swap}@font-face{font-family:Mono;src:url('/assets/fonts/mono.woff2') format('woff2'),url('/assets/fonts/mono.ttf') format('truetype');font-weight:100 800;font-display:swap}
:root{color-scheme:light;--ink:#0f172a;--muted:#64748b;--green:#1d4ed8;--canvas:#f8fafc;--line:#e2e8f0;--blue:#1d4ed8}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--canvas);font:14px/1.65 Jakarta,system-ui,sans-serif;-webkit-font-smoothing:antialiased}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:none;color:var(--status-info-text)}button,input,select{font:inherit}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:10px 18px;background:var(--blue);border:1px solid transparent;color:#fff;border-radius:8px;font-size:13px;font-weight:650;cursor:pointer;transition:background .15s,box-shadow .15s}button:hover,.button:hover{background:var(--blue-hover);color:white}button svg,.button svg{width:18px;height:18px;flex-shrink:0}button:disabled{opacity:.5;cursor:not-allowed}.secondary{background:var(--surface);border:1px solid var(--border-strong);color:var(--text-secondary)}.secondary:hover{background:var(--surface-raised);border-color:var(--border-strong);color:var(--text-primary)}.quiet{background:transparent;color:var(--text-secondary)}.quiet:hover{background:var(--status-info-bg);color:var(--blue)}.danger-text{color:var(--status-danger-text)!important}.danger-text:hover{background:var(--status-danger-bg)!important}.small-button{font-size:12px;min-height:36px;padding:7px 12px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}h1,h2,h3,p{margin-top:0}h1{font-size:34px;line-height:1.2;font-weight:750;letter-spacing:-1.4px;margin-bottom:14px}h2{font-size:21px;letter-spacing:-.6px;line-height:1.35;margin-bottom:0;font-weight:700}h3{font-size:17px;font-weight:700;letter-spacing:-.4px;margin:0 0 5px}p{margin-bottom:16px}.muted{color:var(--muted)}.eyebrow{font:10px/1.5 Mono,monospace;letter-spacing:1.5px;color:var(--text-muted);display:flex;align-items:center;gap:8px;margin-bottom:13px}.eyebrow-dot{width:6px;height:6px;background:var(--blue);border-radius:50%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}svg{vertical-align:middle}code{font-family:Mono,monospace;font-size:12px;overflow-wrap:anywhere}.brand{display:inline-flex;align-items:center;gap:11px;color:var(--text-primary);font-size:23px;font-weight:800;letter-spacing:-1.2px}.brand-logo{display:block;object-fit:contain;width:36px;height:36px}.brand-dot{color:var(--blue)}.profile-menu{position:relative;margin-left:auto}.profile-menu summary{list-style:none;width:39px;height:39px;border:1px solid var(--border-strong);border-radius:50%;background:var(--surface-raised);display:grid;place-items:center;cursor:pointer;color:var(--text-secondary)}.profile-menu summary::-webkit-details-marker{display:none}.profile-popover{position:absolute;top:52px;right:0;min-width:235px;padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 10px 40px #0f172a15}.profile-popover strong{font-size:14px}.profile-popover p{font-size:12px;margin:5px 0 15px;color:var(--text-muted)}.heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:30px}.heading p{margin:0;font-size:14px}.stat-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-muted);font-weight:600}.stat-indicator{height:7px;width:7px;border-radius:50%;background:var(--border-strong)}.surface{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:27px}.section-top{display:flex;justify-content:space-between;gap:20px;align-items:center}.section-top p{margin:6px 0 0;font-size:13px}.section-top h2{display:flex;gap:10px;align-items:center}.count{font:11px Mono,monospace;letter-spacing:0;background:var(--status-info-bg);color:var(--blue);display:inline-grid;place-items:center;min-width:25px;height:25px;border-radius:6px;padding:3px 6px}.scroll{overflow:auto}table{border-collapse:collapse;width:100%;text-align:left}th{font:10px Mono,monospace;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);padding:14px 15px;background:var(--surface-raised);border-block:1px solid var(--line);white-space:nowrap}td{padding:21px 15px;border-bottom:1px solid var(--border);font-size:12px}tbody tr:hover{background:var(--status-info-bg)}td small{display:block;color:var(--text-disabled);font-size:11px;margin-top:6px;max-width:260px}td.row-action{text-align:right}.company{display:flex;align-items:center;gap:13px;min-width:170px}.company strong{font-size:13px}.avatar{width:40px;height:40px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;overflow:hidden;background:var(--status-info-bg);border:1px solid var(--status-info-border);color:var(--blue);font-size:12px;font-weight:700}.avatar img{width:100%;height:100%;object-fit:contain;background:var(--surface)}.avatar-large{width:56px;height:56px;font-size:18px;border-radius:13px}.text-link{font-size:13px;font-weight:600}.manage-link{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;white-space:nowrap;border-radius:7px}.manage-link:hover{background:var(--status-info-bg)}.manage-link svg{height:15px;width:15px}.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;font-size:10px;line-height:1.5;font-weight:650;border-radius:5px;white-space:nowrap}.status-dot{width:5px;height:5px;flex-shrink:0;border-radius:50%;background:currentColor}.success{color:var(--status-connected-text);background:var(--status-connected-bg)}.warning{color:var(--status-attention-text);background:var(--status-attention-bg)}.danger{color:var(--status-danger-text);background:var(--status-danger-bg)}.neutral{color:var(--text-muted);background:var(--surface-hover)}.info{color:var(--blue);background:var(--status-info-bg)}.company-title{display:flex;align-items:center;gap:16px;min-width:0}.company-title h1{font-size:29px;margin:6px 0 8px;overflow-wrap:anywhere}.company-title p{font-size:13px}.company-title .eyebrow{margin:0}.company-heading{margin-top:27px}.company-sections{display:flex;flex-direction:column;gap:21px}.company-sections>.surface{min-width:0;width:100%}.block-heading{display:flex;align-items:center;gap:13px}.block-heading p{font-size:12px;margin:6px 0 0}.block-step{font:11px Mono,monospace;display:grid;place-items:center;flex-shrink:0;background:var(--status-info-bg);color:var(--blue);width:35px;height:35px;border:1px solid var(--status-info-border);border-radius:9px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:25px 0}label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary)}input,select{display:block;width:100%;padding:11px 13px;min-height:44px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-primary);border-radius:8px;margin-top:8px;outline:none;font-size:13px;transition:border-color .15s,box-shadow .15s}input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #3b82f620}input::placeholder{color:var(--text-disabled);font-size:12px}input[type=hidden]{display:none}.logo-field{display:flex;align-items:center;gap:18px;grid-column:1/-1;padding:20px;border:1px dashed var(--border-strong);border-radius:10px;background:var(--surface-raised)}.logo-preview{height:72px;width:72px;flex-shrink:0;background:var(--surface-hover);border:1px solid var(--border);border-radius:12px;display:grid;place-items:center;overflow:hidden;color:var(--blue);font-size:23px;font-weight:700}.logo-preview img{width:100%;height:100%;object-fit:contain;background:var(--surface)}.logo-controls{min-width:0}.logo-controls>strong{font-size:13px}.optional{font-size:10px;font-weight:400;color:var(--text-disabled);margin-left:6px}.logo-controls p{font-size:11px;color:var(--text-muted);margin:4px 0 10px}.logo-controls .actions{gap:7px}.upload-button{position:relative;display:inline-flex;align-items:center;padding:7px 11px;border:1px solid var(--border-strong);border-radius:6px;background:var(--surface);color:var(--text-secondary);cursor:pointer;font-size:11px;overflow:hidden}.upload-button:hover{background:var(--status-info-bg)}.upload-button:focus-within{outline:2px solid var(--blue);outline-offset:2px}.upload-button input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}.logo-controls button{padding:6px 9px;font-size:11px;min-height:32px}.form-note{font-size:12px;color:var(--text-muted);line-height:1.8;margin:0 0 14px}.form-footer{display:flex;justify-content:flex-end;border-top:1px solid var(--line);padding-top:20px}.actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.actions form{margin:0}.channel-list{display:flex;flex-direction:column;gap:14px;margin-top:24px}.channel{border:1px solid var(--line);border-radius:10px;padding:22px}.channel-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.channel-name{display:flex;align-items:center;gap:13px;min-width:0}.channel-name p{color:var(--text-muted);font-size:12px;margin:4px 0 0;overflow-wrap:anywhere}.channel-icon{width:43px;height:43px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;font-size:12px;font-weight:750}.channel-icon.meli{background:var(--status-attention-bg);color:var(--status-attention-text)}.channel-icon.shopee{background:var(--status-attention-bg);color:var(--status-attention-text);font-size:22px}.channel-icon.integration-icon{background:var(--status-info-bg);color:var(--status-info-text)}.channel-detail{padding-left:56px;margin-top:18px}.channel-detail p{font-size:12px;line-height:1.9;margin:0 0 14px}.channel-detail p strong{font-weight:500;color:var(--text-secondary)}.channel-alert{color:var(--status-attention-text);padding:11px 13px;border-radius:7px;background:var(--status-attention-bg);border:1px solid var(--status-attention-border)}.channel-coming{background:var(--surface-raised)}.invite-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:26px 0}.invite-toolbar>.form-note{margin:0}.invite-toolbar button{font-size:12px;padding:9px 13px}.invite-table td{font-size:11px;padding:17px 12px}.invite-table th{padding:12px}.invite-actions{flex-wrap:nowrap;gap:6px}.invite-actions .small-button{font-size:10px;padding:6px 9px;white-space:nowrap}.unavailable-link{font-size:10px;color:var(--text-disabled);white-space:nowrap}.invite-note{font-size:11px;color:var(--text-disabled);margin:18px 0 0;line-height:1.8}.section-gap{margin-top:25px}.empty{text-align:center;padding:45px 20px;color:var(--muted)}.empty strong{display:block;color:var(--text-secondary);font-size:15px}.empty p{font-size:12px;margin:9px 0 21px}.empty-symbol{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 18px;border:1px solid var(--status-info-border);background:var(--status-info-bg);border-radius:12px;font-size:25px;color:var(--blue)}.empty.compact{padding:25px 12px}.empty.compact p{margin-bottom:0}.copy-link-row,.copy-field{display:flex;align-items:center;gap:10px;margin:18px 0}.copy-field input,.copy-link-row input{min-width:0;margin:0;font-family:Mono,monospace;font-size:11px;background:var(--surface-raised)}.copy-field button,.copy-link-row button{flex-shrink:0}.integration-list{display:grid;gap:13px}[data-page-message]:empty{display:none}[data-page-message]:not(:empty){padding:12px 16px;background:var(--status-info-bg);border-radius:8px;color:var(--status-info-text);font-size:13px}
.modal-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;scrollbar-gutter:stable}.modal-actions{display:flex;justify-content:flex-end;gap:11px;margin-top:27px;padding-top:22px;border-top:1px solid var(--line)}#modal-message:not(:empty){margin:20px 29px 0;padding:13px 16px;border:1px solid var(--status-connected-border);border-radius:9px;background:var(--status-connected-bg);color:var(--status-connected-text);font-size:12px}#modal-message[data-error=true]{background:var(--status-danger-bg);border-color:var(--status-danger-border);color:var(--status-danger-text)}body:has(dialog[open]){overflow:hidden}
.client-main{max-width:560px;margin:7vh auto;padding:40px;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:0 15px 50px #0f172a06}.client-main>.brand{display:flex;justify-content:center;margin-bottom:32px}.client-main>h1{text-align:center;font-size:29px;letter-spacing:-1px;margin-bottom:22px}.client-main form{margin:22px 0}.client-main label{margin-bottom:12px}.client-main a{overflow-wrap:anywhere}.verification-steps{display:flex;justify-content:center;gap:0;margin:23px 0 27px;font-size:11px;color:var(--text-disabled)}.verification-steps span{border-bottom:2px solid var(--border);padding:8px 18px}.verification-steps .current{color:var(--blue);font-weight:700;border-color:var(--blue)}.verification-intro{text-align:center;color:var(--text-muted);font-size:14px;line-height:1.8}.email-card{padding:19px;background:var(--status-info-bg);border:1px solid var(--status-info-border);border-radius:11px;text-align:center;margin:25px 0}.email-card span{display:block;font-size:11px;color:var(--text-muted);margin-bottom:6px}.email-card strong{font-size:15px;color:var(--status-info-text);overflow-wrap:anywhere}.verification-company-logo{display:block;width:60px;height:60px;object-fit:contain;margin:19px auto;border-radius:11px}.otp-code{font:28px Mono,monospace;text-align:center;letter-spacing:12px;text-indent:12px;height:64px;margin:14px 0}.otp-group{display:flex;justify-content:center;align-items:center;gap:10px;margin:20px auto 16px;max-width:360px}.otp-digit{width:48px!important;min-width:48px!important;max-width:48px!important;height:56px!important;flex:0 0 48px!important;margin:0!important;padding:0!important;text-align:center!important;border-radius:10px!important;font:700 26px Mono,monospace!important;line-height:56px!important;background:var(--surface)!important;border:2px solid var(--border-strong)!important;color:var(--text-primary)!important;caret-color:var(--blue)!important;box-shadow:0 1px 3px rgba(15,23,42,0.08)!important;outline:none!important;box-sizing:border-box!important}.otp-digit:focus{background:var(--surface)!important;border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(37,99,235,0.2)!important}.otp-digit:not(:placeholder-shown){border-color:var(--blue)!important;background:var(--surface-raised)!important}.otp-digit:disabled{background:var(--surface-hover)!important;border-color:var(--border)!important;color:var(--text-disabled)!important;cursor:not-allowed!important;opacity:0.65!important}.otp-expiry{text-align:center;font:10px Mono,monospace;color:var(--text-disabled);margin-bottom:20px}.verification-primary{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 17px;min-height:48px}.verification-notice{font-size:12px;background:var(--status-info-bg);color:var(--blue);border:1px solid var(--status-info-border);border-radius:8px;padding:12px 14px}.verification-error{background:var(--status-danger-bg);border-color:var(--status-danger-border);color:var(--status-danger-text)}.client-main .resend-code{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px;margin:24px 0}.resend-code span{font-size:11px;color:var(--text-muted)}.resend-code button{font-size:11px;padding:5px 7px;min-height:32px}.verification-footer{text-align:center;border-top:1px solid var(--line);padding-top:24px;color:var(--text-secondary);font-size:11px;line-height:1.9}.verification-footer span{color:var(--text-disabled)}.portal-company{display:flex;align-items:center;gap:12px;padding:17px;border:1px solid var(--status-info-border);border-radius:11px;background:var(--status-info-bg);margin:25px 0}.portal-company>img{width:42px;height:42px;object-fit:contain;border-radius:8px}.portal-company>span:not(.badge){min-width:0;flex:1}.portal-company small{display:block;font:9px Mono,monospace;letter-spacing:1px;color:var(--text-muted);margin-bottom:5px}.portal-company strong{display:block;font-size:14px;overflow-wrap:anywhere}.portal-channels .channel-heading{flex-wrap:wrap}.portal-channels .channel{padding:20px}.portal-channels form{margin-bottom:0}.portal-assurance{margin-top:26px;padding-top:23px;border-top:1px solid var(--line);text-align:center}.portal-assurance strong{font-size:13px;color:var(--text-secondary)}.portal-assurance p{font-size:12px;line-height:1.8;color:var(--text-muted);margin-top:9px}.outcome-icon{width:59px;height:59px;border-radius:50%;display:grid;place-items:center;font-size:29px;margin:25px auto}.consent-list{padding-left:20px;color:var(--text-secondary);font-size:13px;line-height:1.9}.consent-actions{display:flex;flex-wrap:wrap;gap:10px}
.auth-shell{min-height:100dvh;display:grid;place-items:center;padding:38px;background:radial-gradient(ellipse at 20% 10%,#dbeafe77,transparent 45%),var(--surface-hover)}.auth-card{display:grid;grid-template-columns:1fr 1fr;width:min(1020px,100%);background:var(--surface);border:1px solid var(--border);border-radius:22px;overflow:hidden;box-shadow:0 25px 80px #172c4d10}.auth-aside{position:relative;isolation:isolate;padding:44px;background:linear-gradient(140deg,#122747,#0b1425);color:white;display:flex;flex-direction:column;justify-content:space-between;gap:57px;overflow:hidden}.auth-aside:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#36517d22 1px,transparent 1px),linear-gradient(90deg,#36517d22 1px,transparent 1px);background-size:32px 32px;z-index:-1}.auth-brand{display:flex;align-items:center;gap:11px;font-size:24px;font-weight:800;letter-spacing:-1.2px}.auth-brand img{width:38px;height:38px}.auth-aside h1{font-size:39px;line-height:1.22;letter-spacing:-1.7px;font-weight:650;margin:0 0 19px}.auth-aside p{font-size:13px;line-height:1.9;color:#9fb3d0;max-width:315px}.auth-preview{padding:20px;background:#142440a0;border:1px solid #314c73;border-radius:11px;margin-top:28px}.auth-preview-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #2a405e;font-size:11px;color:var(--text-disabled)}.auth-preview-row:last-child{border:0;padding-bottom:0}.auth-preview strong{font-size:12px;color:#d9e5f6}.auth-preview .badge{background:#223b58;color:#a3c9f5;font-size:9px}.auth-aside>.form-note{color:var(--blue);font:9px Mono,monospace;letter-spacing:.6px;margin:0}.auth-form{padding:52px 46px;display:flex;flex-direction:column;justify-content:center}.auth-form .eyebrow{font-size:9px;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:17px}.auth-form h2{font-size:29px;letter-spacing:-1.2px;margin:0 0 12px}.auth-form>p{color:var(--text-muted);font-size:13px;line-height:1.85;margin:0 0 29px}.auth-form label{font-size:12px;margin-bottom:22px}.auth-form input{font-size:14px;padding:12px 13px;min-height:46px}.password-wrap{position:relative}.password-wrap input{padding-right:44px}.password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;min-height:unset;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:6px;color:var(--text-muted);cursor:pointer;transition:color .15s,background-color .15s}.password-toggle:hover{background:var(--status-info-bg);color:var(--blue)}.password-toggle .eye-icon{width:18px;height:18px;stroke:currentColor;pointer-events:none}.password-toggle .eye-hide{display:none}.password-toggle[aria-pressed=true] .eye-show{display:none}.password-toggle[aria-pressed=true] .eye-hide{display:block}.auth-form button[type=submit]{width:100%;min-height:47px;margin-top:4px}.auth-form button[type=submit]>span{margin-left:auto}.auth-note{font-size:11px!important;margin:25px 0 0!important;color:var(--text-disabled)!important;line-height:1.85!important;border-top:1px solid var(--line);padding-top:21px}.auth-error{font-size:12px;line-height:1.7;padding:13px 15px;border-radius:8px;background:var(--status-danger-bg);border:1px solid var(--status-danger-border);color:var(--status-danger-text);margin-bottom:21px}.auth-mobile-brand{display:none}
@media(max-width:1100px){.invite-toolbar{align-items:flex-start;flex-direction:column}.auth-form{padding:42px 32px}.auth-aside{padding:38px}}
@media(max-width:720px){.brand{font-size:20px;gap:8px}.brand-logo{width:30px;height:30px}.profile-menu summary{width:33px;height:33px}.profile-icon{width:17px;height:17px}.heading{align-items:flex-start;gap:20px;flex-direction:column;margin-bottom:25px}h1{font-size:28px;letter-spacing:-1px}.heading p{font-size:12px;max-width:360px}.stat-label{font-size:11px}.surface{padding:20px;border-radius:12px}.section-top{gap:10px}.section-top h2{font-size:17px}.section-top p{font-size:11px;max-width:250px}.company-title h1{font-size:26px}.avatar-large{width:47px;height:47px;font-size:15px}.company-sections{gap:17px}.block-step{width:31px;height:31px}.block-heading h2{font-size:18px}.block-heading p{font-size:11px}.form-grid{grid-template-columns:1fr;gap:18px}.channel{padding:17px}.channel-heading{align-items:flex-start;flex-direction:column;gap:13px}.channel-heading>.badge{margin-left:55px}.channel-detail{padding-left:0}.channel-coming .channel-heading,.portal-channels .channel-heading{flex-direction:row;align-items:center}.channel-coming .channel-heading>.badge,.portal-channels .channel-heading>.badge{margin-left:0}.channel-name p{font-size:11px}.invite-toolbar{gap:15px;margin:23px 0}.invite-table{min-width:585px}.logo-field{padding:15px;gap:14px}.logo-preview{width:62px;height:62px}.logo-controls>strong{font-size:12px}.logo-controls p{font-size:10px}.client-main{margin:24px 14px;padding:28px 23px;border-radius:17px}.client-main>h1{font-size:26px}.client-main h3{font-size:16px}.client-main .channel{padding:17px}.client-main .brand{font-size:23px}.copy-link-row,.copy-field{align-items:stretch;flex-direction:column}.modal-actions{margin-top:24px}.modal-actions button{font-size:12px;padding:10px 13px}#modal-message:not(:empty){margin:17px 15px 0}.portal-company{flex-wrap:wrap}.otp-group{gap:7px}.otp-digit{height:55px;font-size:24px}.verification .form-note{font-size:11px}.verification-intro{font-size:13px}.auth-shell{padding:23px 16px}.auth-card{display:block;max-width:465px;border-radius:18px}.auth-aside{display:none}.auth-form{padding:34px 27px}.auth-mobile-brand{display:flex;margin-bottom:38px}.auth-form h2{font-size:27px}.auth-form .eyebrow{font-size:9px}}
@media(max-width:380px){.brand{font-size:18px}.brand-logo{width:27px;height:27px}.client-main{padding:25px 18px}.verification-steps span{padding-inline:13px}.otp-group{gap:6px}.otp-digit{height:50px;font-size:23px}.auth-form{padding:30px 23px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Shared B2B workspace for client and administration. */
.client-main:has(.client-workspace){max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.client-main:has(.client-workspace)>.brand,.client-main:has(.client-workspace)>h1{display:none}
.workspace-content{max-width:1440px;margin:auto;padding:40px 48px 48px}
.workspace-company{margin-left:auto;color:var(--text-muted);font-size:12px;max-width:240px;overflow-wrap:anywhere}
.client-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.workspace-notice{padding:16px;margin-top:24px;background:var(--status-info-bg);border:1px solid var(--status-info-border);border-radius:8px;color:var(--status-info-text)}
.workspace-footer{margin-top:28px;color:var(--text-muted);font-size:12px}
.connection-metadata{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid var(--border);padding-top:24px;margin-top:28px}
.connection-metadata dt{font-size:12px;color:var(--text-muted)}.connection-metadata dd{margin:8px 0 0;font-size:13px}
.client-workspace .verification-steps,.client-workspace .verification-intro{display:none}
.client-workspace .portal-company{margin-top:0}.client-workspace .portal-channels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.client-workspace .portal-assurance{text-align:left}.client-workspace h1{text-align:left}
.company-sections section[id]{scroll-margin-top:100px}
@media(max-width:720px){.workspace-content{padding:28px 16px}.client-stats{grid-template-columns:1fr}.client-workspace .portal-channels,.connection-metadata{grid-template-columns:1fr}.workspace-company{max-width:45%;font-size:11px}}

/* Stepper & Row Actions */
.stepper{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 28px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.step{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted)}
.step-num{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface-active);color:var(--text-muted);font-size:11px;font-family:Mono,monospace;font-weight:700}
.step-label{white-space:nowrap}
.step-line{flex:1;max-width:48px;height:2px;background:var(--surface-active);border-radius:1px}
.step.active{color:var(--blue)}
.step.active .step-num{background:var(--blue);color:#fff}
.step.completed{color:var(--status-connected-text)}
.step.completed .step-num{background:var(--status-connected-bg);color:var(--status-connected-text)}
.step-line.completed{background:var(--status-connected-dot)}
.danger-button{background:var(--status-danger-dot);border-color:var(--status-danger-dot);color:#fff}
.danger-button:hover{background:var(--status-danger-dot);border-color:var(--status-danger-dot);color:#fff}

}
@layer tokens {
/* Olhometro UI — design tokens (redesign 2026-10).
   Single source of every color, radius, spacing and shadow token. Composed into the `tokens` cascade layer by
   panelCss (src/panel-view.mjs); no other stylesheet may redefine these variables on :root.
   Themes: <html data-theme="dark|light|system">. Dark is the reference palette of the redesign; "system" (or no
   attribute) follows prefers-color-scheme. Layer order of surfaces is the same in both themes:
   canvas < surface < surface-raised < surface-overlay (popover). Tables use exactly four backgrounds:
   --table-head, --surface (row), --table-row-hover and --table-child. */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --font-sans: Jakarta, "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: Mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 1. Surfaces */
  --canvas: #0A0E15;
  --rail: #0C111A;
  --surface: #10161F;
  --surface-raised: #141B26;
  --surface-overlay: #151C29;
  --surface-hover: #121A27;
  --surface-active: #1C2536;
  --surface-inverse: #F3F6FB;
  --surface-sunken: #0C111A;
  /* Form fields: editable vs read-only/disabled (a read-only field never looks more "active" than an editable one). */
  --input-bg: var(--surface-sunken); --input-disabled-bg: var(--surface-raised);
  --table-head: #0D131C;
  --table-row-hover: #121A27;
  --table-child: #0C121B;
  --table-child-hover: #0F1724;
  --skeleton: #1A2230;
  --skeleton-shine: #232D3E;

  /* 2. Lines */
  --border: #1F2836;
  --border-subtle: #1A2230;
  --border-strong: #2A3546;
  --border-focus: #4D86FF;
  --tree-guide: #243044;
  --line: var(--border);

  /* 3. Text */
  --text-strong: #F3F6FB;
  --text-primary: #E7ECF4;
  --text-secondary: #B4BFD0;
  --text-muted: #8B97AB;
  --text-faint: #7D89A0;
  --text-disabled: #5B6577;
  --text-on-accent: #FFFFFF;
  --ink: var(--text-primary);
  --muted: var(--text-muted);

  /* 4. Action, accent and focus */
  --blue: #2B63E8;
  --blue-border: #3D7BFF;
  --blue-hover: #3570F0;
  --blue-light: rgba(61, 123, 255, .14);
  --accent: #3D7BFF;
  --accent-icon: #6E9BFF;
  --link: #7FA8FF;
  --link-hover: #A9C4FF;
  --focus: #4D86FF;
  --focus-ring: 0 0 0 3px rgba(77, 134, 255, .28);
  --selection-bg: rgba(61, 123, 255, .14);
  --selection-strong: rgba(61, 123, 255, .28);

  /* 5. Status semantics (text / background / border / dot) */
  --status-connected-text: #34D399; --status-connected-bg: rgba(52, 211, 153, .12); --status-connected-border: rgba(52, 211, 153, .32); --status-connected-dot: #34D399;
  --status-attention-text: #FBBF24; --status-attention-bg: rgba(251, 191, 36, .12); --status-attention-border: rgba(251, 191, 36, .32); --status-attention-dot: #FBBF24;
  --status-risk-text: #FB923C;      --status-risk-bg: rgba(251, 146, 60, .14);      --status-risk-border: rgba(251, 146, 60, .34);      --status-risk-dot: #FB923C;
  --status-danger-text: #F87171;    --status-danger-bg: rgba(248, 113, 113, .12);   --status-danger-border: rgba(248, 113, 113, .32);   --status-danger-dot: #F87171;
  --status-danger-strong: #FECACA;
  --status-info-text: #8DB2FF;      --status-info-bg: rgba(61, 123, 255, .16);      --status-info-border: rgba(61, 123, 255, .38);      --status-info-dot: #3D7BFF;
  --status-neutral-text: #B4BFD0;   --status-neutral-bg: #1A2230;                   --status-neutral-border: #2A3546;                   --status-neutral-dot: #5B6577;

  /* 6. Navigation rail (client sidebar and admin top bar) */
  --sidebar-bg: var(--rail);
  --sidebar-border: #1A2230;
  --sidebar-fg: #B4BFD0;
  --sidebar-muted: #7D89A0;
  --sidebar-hover: #121A27;
  --sidebar-active-bg: rgba(61, 123, 255, .14);
  --sidebar-active-fg: #FFFFFF;
  --sidebar-active-icon: #6E9BFF;
  --sidebar-badge-bg: #161D2A;
  --sidebar-card: #10161F;

  /* 7. Charts (comparison is always blue x orange, never red x green) */
  --chart-1: #4F88FF;
  --chart-1-deep: #2452C9;
  --chart-2: #FB923C;
  --chart-grid: #18202D;
  --chart-axis: #2A3546;
  --chart-text: #7D89A0;
  --chart-missing: rgba(139, 151, 171, .14);
  --chart-missing-border: #3A4558;

  /* 8. Radius scale */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 9px;    /* controls */
  --radius-lg: 12px;   /* cards, tables */
  --radius-xl: 16px;   /* dialogs */
  --radius-pill: 999px;

  /* 9. Spacing (4px grid) */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px;
  --page-gutter: 28px;
  --card-gap: 12px;

  /* 10. Motion */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* 11. Shadows */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
  --shadow-popover: 0 18px 44px rgba(0, 0, 0, .55);
  --shadow-overlay: 0 28px 60px -12px rgba(0, 0, 0, .75);
  --shadow-primary: 0 6px 18px rgba(43, 99, 232, .28);
  --backdrop: rgba(3, 6, 12, .66);

  /* 12. ReUI / shadcn interoperability aliases */
  --background: var(--canvas);
  --foreground: var(--text-primary);
  --card: var(--surface);
  --card-foreground: var(--text-primary);
  --popover: var(--surface-overlay);
  --popover-foreground: var(--text-primary);
  --primary: var(--blue);
  --primary-foreground: var(--text-on-accent);
  --secondary: var(--surface-raised);
  --secondary-foreground: var(--text-primary);
  --muted-foreground: var(--text-muted);
  --accent-foreground: var(--text-primary);
  --destructive: var(--status-danger-dot);
  --destructive-foreground: #FFFFFF;
  --input: var(--border);
  --ring: var(--focus);
  --radius: var(--radius-md);
}

/* Light theme: same roles derived from DESIGN.md (workfield #f5f7f8, surface #fff, rail navy #08182a, cobalt #2563eb). */
:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #F5F7F8; --rail: #08182A; --surface: #FFFFFF; --surface-raised: #F8FAFC; --surface-overlay: #FFFFFF;
  --surface-hover: #F3F6FA; --surface-active: #E9EEF6; --surface-inverse: #0F172A; --surface-sunken: #F1F4F7;
  --input-bg: var(--surface); --input-disabled-bg: var(--surface-sunken);
  --table-head: #F6F8FA; --table-row-hover: #F3F6FA; --table-child: #F7F9FC; --table-child-hover: #EFF3F9;
  --skeleton: #E8EDF2; --skeleton-shine: #F3F6F9;
  --border: #DBE1E8; --border-subtle: #E8EDF2; --border-strong: #C5CED9; --border-focus: #2563EB; --tree-guide: #CBD5E1;
  --text-strong: #0B1220; --text-primary: #0F172A; --text-secondary: #334155; --text-muted: #5B6678; --text-faint: #64748B; --text-disabled: #7F8C9E;
  --blue: #2563EB; --blue-border: #1955DF; --blue-hover: #1D4ED8; --blue-light: #EFF6FF; --accent: #2563EB; --accent-icon: #2563EB;
  --link: #1D4ED8; --link-hover: #1E40AF; --focus: #2563EB; --focus-ring: 0 0 0 3px rgba(37, 99, 235, .22);
  --selection-bg: #EEF4FF; --selection-strong: #DCE7FE;
  --status-connected-text: #15803D; --status-connected-bg: #E8F7EE; --status-connected-border: #A7E3BF; --status-connected-dot: #16A34A;
  --status-attention-text: #A15C07; --status-attention-bg: #FEF5E2; --status-attention-border: #F5D48C; --status-attention-dot: #D97706;
  --status-risk-text: #C2410C;      --status-risk-bg: #FFF1E7;      --status-risk-border: #FBC79D;      --status-risk-dot: #EA580C;
  --status-danger-text: #B91C1C;    --status-danger-bg: #FDECEC;    --status-danger-border: #F6B4B4;    --status-danger-dot: #DC2626;
  --status-danger-strong: #991B1B;
  --status-info-text: #1D4ED8;      --status-info-bg: #EFF6FF;      --status-info-border: #BFD3FB;      --status-info-dot: #2563EB;
  --status-neutral-text: #475569;   --status-neutral-bg: #F1F5F9;   --status-neutral-border: #DBE1E8;   --status-neutral-dot: #94A3B8;
  --sidebar-bg: #08182A; --sidebar-border: #183047; --sidebar-fg: #C7D3E3; --sidebar-muted: #8193AB; --sidebar-hover: #112840;
  --sidebar-active-bg: rgba(77, 134, 255, .24); --sidebar-active-fg: #FFFFFF; --sidebar-active-icon: #9DBCFF; --sidebar-badge-bg: #12263D; --sidebar-card: #0D2036;
  --chart-1: #2563EB; --chart-1-deep: #1D4ED8; --chart-2: #EA580C; --chart-grid: #EEF1F5; --chart-axis: #DBE1E8; --chart-text: #64748B;
  --chart-missing: rgba(100, 116, 139, .12); --chart-missing-border: #B8C2CF;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05); --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-popover: 0 16px 36px -6px rgba(15, 23, 42, .18), 0 4px 10px -4px rgba(15, 23, 42, .08);
  --shadow-overlay: 0 24px 48px -12px rgba(15, 23, 42, .25); --shadow-primary: 0 6px 16px rgba(37, 99, 235, .22);
  --backdrop: rgba(15, 23, 42, .45);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;
    --canvas: #F5F7F8; --rail: #08182A; --surface: #FFFFFF; --surface-raised: #F8FAFC; --surface-overlay: #FFFFFF;
    --surface-hover: #F3F6FA; --surface-active: #E9EEF6; --surface-inverse: #0F172A; --surface-sunken: #F1F4F7;
  --input-bg: var(--surface); --input-disabled-bg: var(--surface-sunken);
    --table-head: #F6F8FA; --table-row-hover: #F3F6FA; --table-child: #F7F9FC; --table-child-hover: #EFF3F9;
    --skeleton: #E8EDF2; --skeleton-shine: #F3F6F9;
    --border: #DBE1E8; --border-subtle: #E8EDF2; --border-strong: #C5CED9; --border-focus: #2563EB; --tree-guide: #CBD5E1;
    --text-strong: #0B1220; --text-primary: #0F172A; --text-secondary: #334155; --text-muted: #5B6678; --text-faint: #64748B; --text-disabled: #7F8C9E;
    --blue: #2563EB; --blue-border: #1955DF; --blue-hover: #1D4ED8; --blue-light: #EFF6FF; --accent: #2563EB; --accent-icon: #2563EB;
    --link: #1D4ED8; --link-hover: #1E40AF; --focus: #2563EB; --focus-ring: 0 0 0 3px rgba(37, 99, 235, .22);
    --selection-bg: #EEF4FF; --selection-strong: #DCE7FE;
    --status-connected-text: #15803D; --status-connected-bg: #E8F7EE; --status-connected-border: #A7E3BF; --status-connected-dot: #16A34A;
    --status-attention-text: #A15C07; --status-attention-bg: #FEF5E2; --status-attention-border: #F5D48C; --status-attention-dot: #D97706;
    --status-risk-text: #C2410C;      --status-risk-bg: #FFF1E7;      --status-risk-border: #FBC79D;      --status-risk-dot: #EA580C;
    --status-danger-text: #B91C1C;    --status-danger-bg: #FDECEC;    --status-danger-border: #F6B4B4;    --status-danger-dot: #DC2626;
    --status-danger-strong: #991B1B;
    --status-info-text: #1D4ED8;      --status-info-bg: #EFF6FF;      --status-info-border: #BFD3FB;      --status-info-dot: #2563EB;
    --status-neutral-text: #475569;   --status-neutral-bg: #F1F5F9;   --status-neutral-border: #DBE1E8;   --status-neutral-dot: #94A3B8;
    --sidebar-bg: #08182A; --sidebar-border: #183047; --sidebar-fg: #C7D3E3; --sidebar-muted: #8193AB; --sidebar-hover: #112840;
    --sidebar-active-bg: rgba(77, 134, 255, .24); --sidebar-active-fg: #FFFFFF; --sidebar-active-icon: #9DBCFF; --sidebar-badge-bg: #12263D; --sidebar-card: #0D2036;
    --chart-1: #2563EB; --chart-1-deep: #1D4ED8; --chart-2: #EA580C; --chart-grid: #EEF1F5; --chart-axis: #DBE1E8; --chart-text: #64748B;
    --chart-missing: rgba(100, 116, 139, .12); --chart-missing-border: #B8C2CF;
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05); --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-popover: 0 16px 36px -6px rgba(15, 23, 42, .18), 0 4px 10px -4px rgba(15, 23, 42, .08);
    --shadow-overlay: 0 24px 48px -12px rgba(15, 23, 42, .25); --shadow-primary: 0 6px 16px rgba(37, 99, 235, .22);
    --backdrop: rgba(15, 23, 42, .45);
  }
}
@media (max-width: 720px) { :root { --page-gutter: 16px; } }

}
@layer theme-base {
/* Olhometro theme — generic element/utility styles. Layer "theme-base": after tokens, before components,
   so component-specific rules keep precedence. Colors come from the tokens in theme.css. */
/* ---------- Base ---------- */
body { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; }
body, .surface, .portal-sidebar, input, select, textarea, button, .badge, td, th { transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
::selection { background: color-mix(in srgb, var(--blue) 22%, transparent); color: var(--text-primary); }
a { color: var(--blue); }
a:hover { color: var(--blue-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1 { font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; color: var(--text-primary); }
h2 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--text-primary); }
h3 { font-size: 14px; font-weight: 620; color: var(--text-primary); }
p { color: var(--text-secondary); }
.muted, .form-note, small { color: var(--text-muted); }
code, kbd, .tag-code { font-family: var(--font-mono); font-size: .86em; color: var(--text-secondary); background: var(--surface-hover); border: 1px solid var(--border-subtle); border-radius: var(--radius-xs); padding: 1px 5px; }
.eyebrow { font: 600 11px/1.4 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }

/* Numbers and dates use tabular sans figures; monospace stays for identifiers (MLB, SKU, keys). */
table, .tabular-cell, .tabular-val, .font-tabular, .metric-val { font-variant-numeric: tabular-nums; }
td, .tabular-cell, .tabular-val, .stat-line-val, .dre-val, .info-val, .cn-pagination-meta, [data-page-range] { font-family: var(--font-sans) !important; }

/* ---------- Controls ---------- */
button, .button {
  min-height: 34px; padding: 7px 13px; gap: 7px; border: 1px solid transparent; border-radius: var(--radius-md);
  background: var(--blue); color: var(--text-on-accent); font: 600 13px/1.2 var(--font-sans); box-shadow: var(--shadow-xs);
}
button:hover, .button:hover { background: var(--blue-hover); color: var(--text-on-accent); }
button:disabled, .button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.secondary, button.secondary, .button.secondary {
  background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-strong); box-shadow: var(--shadow-xs);
}
.secondary:hover, button.secondary:hover, .button.secondary:hover { background: var(--surface-hover); color: var(--text-primary); border-color: var(--border-strong); }
.quiet, button.quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-secondary); }
.quiet:hover, button.quiet:hover { background: var(--surface-hover); color: var(--text-primary); }
.danger-text, button.danger-text, .secondary.danger-text { color: var(--status-danger-text) !important; }
.quiet.danger-text:hover { background: var(--status-danger-bg); }
.small-button { min-height: 30px; padding: 5px 10px; font-size: 12.5px; }
input, select, textarea {
  background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs); font-family: var(--font-sans);
}
input::placeholder, textarea::placeholder { color: var(--text-disabled); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--border-strong) 60%, var(--text-muted)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); }
input[readonly] { background: var(--input-disabled-bg); }
select { background-image: none; }
label { color: var(--text-secondary); }

/* ---------- Badges ---------- */
.badge, .cn-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--status-neutral-border);
  background: var(--status-neutral-bg); color: var(--status-neutral-text); font: 600 11.5px/1 var(--font-sans); letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.badge.success { background: var(--status-connected-bg); border-color: var(--status-connected-border); color: var(--status-connected-text); }
.badge.warning { background: var(--status-attention-bg); border-color: var(--status-attention-border); color: var(--status-attention-text); }
.badge.danger { background: var(--status-danger-bg); border-color: var(--status-danger-border); color: var(--status-danger-text); }
.badge.info { background: var(--status-info-bg); border-color: var(--status-info-border); color: var(--status-info-text); }
.badge .status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: none; }

/* ---------- Surfaces ---------- */
.surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.heading h1 { margin-top: 2px; }
.preview-disclaimer { margin-bottom: 18px; }

/* ---------- Tables ---------- */
.scroll, .cn-table-container, .portal-table-wrap { border-color: var(--border); }
th, .cn-table-head {
  height: 40px; background: var(--surface-raised) !important; color: var(--text-muted) !important; border-bottom: 1px solid var(--border) !important;
  font: 600 11.5px/1.3 var(--font-sans) !important; letter-spacing: .02em !important; text-transform: none !important;
}
td, .cn-table-cell { border-bottom: 1px solid var(--border-subtle) !important; color: var(--text-primary); }
tbody tr:hover > td { background: color-mix(in srgb, var(--surface-hover) 70%, transparent); }
tbody tr:last-child > td { border-bottom: 0 !important; }

/* Sortable headers (TanStack Table via /assets/ui.js) */

/* ---------- Disclosures, company detail ---------- */
.block-step { background: var(--surface-hover); color: var(--text-muted); border-radius: var(--radius-sm); }
.channel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.channel-alert { background: var(--status-attention-bg); border: 1px solid var(--status-attention-border); color: var(--status-attention-text); border-radius: var(--radius-md); padding: 8px 12px; }
/* ---------- Modals ---------- */
dialog { background: var(--surface-overlay); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-overlay); }
dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(2px); }

/* ---------- Auth / onboarding pages ---------- */
.auth-shell, .client-main { background: var(--canvas); }
.auth-card { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-overlay); }
.auth-aside { background: var(--surface-raised); color: var(--text-primary); }
.auth-aside::before { opacity: .55; }
.client-main > .surface, .verification-card { background: var(--surface); }


}
@layer components {
/* ==========================================================================
   Olhometro UI — Operational Dark Theme (B2B Precision & Density)
   ========================================================================== */

/* 1. Global Reset & Canvas */
html {
  min-height: 100%;
  background: var(--canvas);
  color-scheme: dark;
  overflow-x: hidden;
}

body {
  min-height: 100dvh;
  display: flow-root;
  background: var(--canvas);
  color: var(--text-primary);
  font: 13px/1.6 Jakarta, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection {
  background: var(--blue);
  color: var(--text-on-accent);
}

.skip-content {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--surface-raised);
  color: var(--accent);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease-out;
}

.skip-content:focus {
  top: 16px;
}

/* 2. Typography */
h1, h2, h3, p {
  margin-top: 0;
}

h1 {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--text-primary);
  margin-bottom: 6px;
}

h2 {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 650;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  margin-bottom: 0;
}

h3 {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  margin: 0 0 4px;
}

p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.muted {
  color: var(--text-muted);
}

.eyebrow {
  font: 10px/1.4 Mono, monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.eyebrow-dot {
  width: 5px;
  height: 5px;
  background: var(--focus);
  border-radius: 50%;
}

code {
  font-family: Mono, monospace;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--surface-raised);
  padding: 2px 5px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-subtle);
}

/* 3. Links & Buttons */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration-fast);
}

a:hover {
  color: var(--link);
}

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 14px;
  background: var(--blue);
  border: 1px solid var(--blue);
  color: var(--text-on-accent);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}

button:hover, .button:hover {
  background: var(--blue-hover);
  border-color: var(--blue-hover);
  color: var(--text-on-accent);
}

button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.secondary, .upload-button {
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  box-shadow: none;
}

.secondary:hover, .upload-button:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

.quiet, .password-toggle {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  box-shadow: none;
}

.quiet:hover, .password-toggle:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.danger-text {
  color: var(--status-danger-text) !important;
}

.danger-text:hover {
  background: var(--status-danger-bg) !important;
  border-color: var(--status-danger-border) !important;
}

.danger-button {
  background: var(--status-danger-dot);
  border-color: var(--status-danger-dot);
  color: var(--text-on-accent);
}

.danger-button:hover {
  background: var(--status-danger-dot);
}

.small-button {
  font-size: 11px;
  min-height: 28px;
  padding: 4px 10px;
}

/* 4. Form Controls */
label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

input, select, .copy-field input, .copy-link-row input {
  display: block;
  width: 100%;
  padding: 7px 11px;
  min-height: 36px;
  border: 1px solid var(--border-strong);
  background: var(--surface-overlay);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-size: 13px;
  margin-top: 4px;
  outline: none;
  transition: border-color var(--duration-fast);
}

input::placeholder {
  color: var(--text-disabled);
  font-size: 12px;
}

input:focus, select:focus {
  border-color: var(--border-focus);
}

input[readonly] {
  background: var(--input-disabled-bg);
  color: var(--text-secondary);
  border-color: var(--border);
  cursor: default;
}

/* 5. Navigation & App Header */


.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.6px;
}

.brand-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.brand-dot {
  color: var(--accent);
}






.profile-menu summary {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 4px;
  cursor: pointer;
  transition: border-color var(--duration-fast);
}

.profile-menu summary:hover {
  border-color: var(--border-strong);
}

.profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-active);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-label {
  font-size: 11px;
  font-weight: 600;
}

.profile-popover {
  position: absolute;
  top: 46px;
  right: 0;
  width: 260px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-popover);
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.profile-identity strong {
  font-size: 13px;
  display: block;
}

.profile-identity small {
  color: var(--text-muted);
  font-size: 11px;
  display: block;
  margin-top: 2px;
}

.profile-actions {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

/* 6. Panel Main Layout */
.workspace-content {
  max-width: 1440px;
  margin: auto;
  padding: 28px 32px 48px;
}

.heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.heading p {
  margin: 0;
  font-size: 13px;
}

/* 7. Metric Strip (Unified B2B KPIs — NOT 4 separate floating cards) */




.stat-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Mono, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stat-indicator {
  height: 6px;
  width: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}




/* 8. Surfaces & Company Table */
.surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: none;
}

.section-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.section-top h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.section-top p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.count {
  font: 600 11px/1 Mono, monospace;
  font-variant-numeric: tabular-nums;
  background: var(--surface-raised);
  color: var(--accent);
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  border: 1px solid var(--border-subtle);
}








/* 9. Data Table Dense Styling */
.scroll {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
  color: var(--text-secondary);
}

th {
  font: 600 10px/1 Mono, monospace;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  padding: 9px 12px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--surface-hover);
}

td small {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.35;
}

td[data-label="Verificação"] {
  font-family: Mono, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

td.row-action {
  text-align: right;
  white-space: nowrap;
}


.company {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
}

.company strong {
  display: block;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.3;
}

.avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--surface);
}

.avatar-large {
  width: 48px;
  height: 48px;
  font-size: 15px;
  border-radius: var(--radius-md);
}


.company-title .avatar-large {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  font-size: 16px;
}

/* 10. Badges & Status */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  min-height: 20px;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
}

.status-dot {
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
}

.badge.success, .outcome-icon.success {
  background: var(--status-connected-bg);
  border-color: var(--status-connected-border);
  color: var(--status-connected-text);
}

.badge.warning, .outcome-icon.warning {
  background: var(--status-attention-bg);
  border-color: var(--status-attention-border);
  color: var(--status-attention-text);
}

.badge.danger {
  background: var(--status-danger-bg);
  border-color: var(--status-danger-border);
  color: var(--status-danger-text);
}

.badge.info {
  background: var(--status-info-bg);
  border-color: var(--status-info-border);
  color: var(--status-info-text);
}

.badge.neutral {
  background: var(--status-neutral-bg);
  border-color: var(--status-neutral-border);
  color: var(--status-neutral-text);
}



/* 11. Modal Dialogs (Precision B2B Containers) */













.modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-gutter: stable;
  background: var(--surface-overlay);
  color: var(--text-primary);
}


.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

#modal-message:not(:empty) {
  margin: 14px 22px 0;
  padding: 10px 14px;
  border: 1px solid var(--status-connected-border);
  border-radius: var(--radius-md);
  background: var(--status-connected-bg);
  color: var(--status-connected-text);
  font-size: 12px;
}

#modal-message[data-error=true] {
  background: var(--status-danger-bg);
  border-color: var(--status-danger-border);
  color: var(--status-danger-text);
}

/* 12. Management Stacked Sections (Disclosures) */
.company-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
}







.block-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.block-heading h2 {
  font-size: 15px;
}

.block-heading p {
  font-size: 11px;
  color: var(--text-muted);
  margin: 2px 0 0;
}

.block-step {
  font: 700 11px Mono, monospace;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--surface-raised);
  color: var(--accent);
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}





/* 13. Channel Cards inside Management */
.channel-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.channel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: var(--surface-raised);
  box-shadow: none;
}

.channel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.channel-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.channel-name h3 {
  margin: 0;
  font-size: 14px;
}

.channel-name p {
  color: var(--text-muted);
  font-size: 11px;
  margin: 2px 0 0;
}

.channel-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 750;
}

.channel-icon.meli {
  background: var(--status-attention-bg);
  color: var(--status-attention-text);
  border: 1px solid var(--status-attention-border);
}

.channel-icon.shopee {
  background: var(--status-risk-bg);
  color: var(--status-risk-text);
  border: 1px solid var(--status-risk-border);
}

.channel-coming {
  background: var(--surface-overlay);
}

.channel-detail {
  padding-left: 42px;
  margin-top: 10px;
}

.channel-detail p {
  font-size: 11px;
  line-height: 1.6;
  margin: 0 0 10px;
  color: var(--text-muted);
}

.channel-detail p strong {
  color: var(--text-primary);
}

.channel-alert {
  background: var(--status-attention-bg);
  border: 1px solid var(--status-attention-border);
  color: var(--status-attention-text);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 11px;
}

/* 14. Danger Zone */




/* 15. Form Grid & Logo Upload */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 16px 0;
}

.logo-field {
  display: flex;
  align-items: center;
  gap: 14px;
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-overlay);
}

.logo-preview {
  height: 52px;
  width: 52px;
  flex-shrink: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 18px;
  font-weight: 700;
}

.logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--surface);
}

.logo-controls > strong {
  font-size: 12px;
}

.optional {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 4px;
}

.logo-controls p {
  font-size: 11px;
  color: var(--text-muted);
  margin: 2px 0 8px;
}

.logo-controls .actions {
  gap: 6px;
}

.upload-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 11px;
  overflow: hidden;
}

.upload-button input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.form-note {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 10px;
}

.form-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 14px;
}

/* 16. Detail Nav Tabs */



/* 17. Confirm Modal */




/* 18. Empty States */
.empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--text-muted);
}

.empty strong {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
}

.empty p {
  font-size: 12px;
  margin: 6px 0 16px;
}

.empty-symbol {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 12px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  font-size: 20px;
  color: var(--accent);
}

.empty.compact {
  padding: 20px 10px;
}

.empty.compact p {
  margin-bottom: 0;
}

/* 19. Responsive Breakpoints */
@media (max-width: 1100px) {
  .workspace-content {
    padding: 24px 20px 40px;
  }
}

@media (max-width: 768px) {
  .brand {
    font-size: 15px;
  }
  .workspace-content {
    padding: 20px 14px 36px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  
}

@media (max-width: 480px) {
  .profile-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* 20. Client Portal & Onboarding */
.client-main {
  max-width: 520px;
  margin: 6vh auto;
  padding: 32px 28px;
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-overlay);
}

.client-main > .brand {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.client-main:has(.client-workspace) {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.client-main:has(.client-workspace) > .brand,
.client-main:has(.client-workspace) > h1 {
  display: none;
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 24px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.step {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.step-num {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 10px;
  font-family: Mono, monospace;
  font-weight: 700;
}

.step.active {
  color: var(--accent);
}

.step.active .step-num {
  background: var(--blue);
  color: var(--text-on-accent);
}

.step.completed {
  color: var(--status-connected-text);
}

.step.completed .step-num {
  background: var(--status-connected-border);
  color: var(--status-connected-text);
}

.step-line {
  flex: 1;
  max-width: 36px;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
}

.step-line.completed {
  background: var(--status-connected-dot);
}

.portal-company {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  margin: 18px 0;
}

.portal-company > img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.portal-company strong {
  display: block;
  font-size: 13px;
  color: var(--text-primary);
}

.portal-company small {
  display: block;
  font: 600 10px Mono, monospace;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.otp-group {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 20px auto 16px !important;
  width: 100% !important;
  max-width: 360px !important;
}

.otp-digit {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 56px !important;
  flex: 0 0 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  border-radius: 10px !important;
  font-family: Mono, ui-monospace, SFMono-Regular, monospace !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 56px !important;
  background: var(--surface) !important;
  border: 2px solid var(--border-strong, var(--border-strong)) !important;
  color: var(--text-primary) !important;
  caret-color: var(--blue) !important;
  box-shadow: var(--shadow-xs) !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
  box-sizing: border-box !important;
}

.otp-digit:focus {
  background: var(--surface) !important;
  border-color: var(--blue) !important;
  box-shadow: var(--shadow-xs) !important;
}

.otp-digit:not(:placeholder-shown) {
  border-color: var(--blue) !important;
  background: var(--surface-raised) !important;
}

.otp-digit:disabled {
  background: var(--surface-hover) !important;
  border-color: var(--border) !important;
  color: var(--text-disabled) !important;
  cursor: not-allowed !important;
  opacity: 0.65 !important;
}

#otp-form {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

#otp-form .verification-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 240px !important;
  max-width: 320px !important;
  margin: 16px auto 0 !important;
  padding: 12px 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background: var(--blue) !important;
  color: var(--text-on-accent) !important;
  cursor: pointer !important;
  transition: background 0.15s ease, opacity 0.15s ease !important;
}

#otp-form .verification-primary:hover:not(:disabled) {
  background: var(--blue) !important;
}

#otp-form .verification-primary:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background: var(--border-strong) !important;
}

.verification-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  min-height: 42px;
  font-size: 13px;
}

.verification-notice, [data-page-message]:not(:empty) {
  padding: 10px 14px;
  background: var(--status-info-bg);
  border: 1px solid var(--status-info-border);
  border-radius: var(--radius-md);
  color: var(--status-info-text);
  font-size: 12px;
}

.verification-error, [data-page-message][data-error=true]:not(:empty), .auth-error {
  padding: 10px 14px;
  background: var(--status-danger-bg);
  border: 1px solid var(--status-danger-border);
  border-radius: var(--radius-md);
  color: var(--status-danger-text);
  font-size: 12px;
}

.verification-footer {
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.6;
}

.portal-assurance {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.portal-assurance strong {
  font-size: 13px;
  color: var(--text-primary);
}

.portal-assurance p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 6px;
}

/* 21. Admin Authentication Shell */
.auth-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--canvas);
}

.auth-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(880px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-overlay);
}

.auth-aside {
  padding: 36px;
  background: var(--surface-overlay);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--text-primary);
}

.auth-aside h1 {
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.8px;
  margin: 0 0 12px;
}

.auth-aside p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 320px;
}

.auth-preview {
  padding: 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-top: 20px;
}

.auth-preview strong {
  display: block;
  font-size: 11px;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.auth-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-secondary);
}

.auth-preview-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.auth-form {
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-form h2 {
  font-size: 22px;
  letter-spacing: -0.6px;
  margin: 0 0 6px;
}

.auth-form > p {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 20px;
}

.password-wrap {
  position: relative;
}

.password-wrap input {
  padding-right: 44px;
}

.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  min-height: unset;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text-muted, var(--text-muted));
  cursor: pointer;
  transition: color .15s, background-color .15s;
}

.password-toggle:hover {
  background: var(--surface-raised);
  color: var(--blue);
}

.password-toggle .eye-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  pointer-events: none;
}

.password-toggle .eye-hide {
  display: none;
}

.password-toggle[aria-pressed="true"] .eye-show {
  display: none;
}

.password-toggle[aria-pressed="true"] .eye-hide {
  display: block;
}

.auth-form button[type=submit] {
  width: 100%;
  min-height: 40px;
  margin-top: 8px;
  font-size: 13px;
}

.auth-note {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  line-height: 1.6 !important;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 20px !important;
}

@media (max-width: 768px) {
  .auth-card {
    grid-template-columns: 1fr;
    max-width: 440px;
  }
  .auth-aside {
    display: none;
  }
  .auth-form {
    padding: 24px;
  }
}

/* 22. Client Operational Portal & Catalog */
.client-workspace {
  max-width: 1680px;
  margin: 0 auto;
  padding: 16px 20px 60px;
  overflow-x: hidden;
}

.portal-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 20px;
  margin-bottom: 24px;
}

.portal-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.portal-brand-block {
  display: flex;
  align-items: center;
  gap: 14px;
}

.portal-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
}

.portal-company-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.portal-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.portal-company-meta {
  display: flex;
  flex-direction: column;
}

.portal-company-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.portal-responsible {
  font-size: 10px;
  color: var(--text-muted);
}

.portal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-overlay);
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.portal-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.portal-tab-btn:hover {
  color: var(--text-primary);
  background: var(--surface-raised);
}

.portal-tab-btn.active {
  color: var(--text-on-accent);
  background: var(--blue);
}

.portal-tab-btn .tab-count {
  font: 700 10px Mono, monospace;
  padding: 1px 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 20%, transparent);
}

.portal-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.portal-store-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 12px;
}

.portal-store-nick {
  font: 600 12px Mono, monospace;
  color: var(--text-primary);
}

.portal-tab-pane {
  display: none;
}

.portal-tab-pane.active {
  display: block;
}

.portal-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.portal-heading h1 {
  font-size: 24px;
  letter-spacing: -0.6px;
  margin: 4px 0 6px;
}

.portal-sync-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.sync-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.sync-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-connected-dot);
}

.sync-pulse.syncing {
  background: var(--status-warning-dot);
  animation: pulse 1.5s infinite;
}

.fuso-note {
  font: 10px Mono, monospace;
  color: var(--text-muted);
}

/* Metric Strip */
.portal-metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
}

.portal-metric {
  padding: 16px 18px;
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 94px;
  background: var(--surface);
}

.portal-metric:last-child {
  border-right: none;
}

.portal-metric.highlighted {
  background: linear-gradient(180deg, var(--status-info-bg) 0%, var(--status-info-bg) 100%);
}

.metric-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.metric-label {
  font: 700 10px Mono, monospace;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.metric-tag {
  font: 700 9px Mono, monospace;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.metric-val {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.metric-val strong {
  font: 700 24px Mono, monospace;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.metric-unit, .metric-denom {
  font-size: 11px;
  color: var(--text-muted);
  font-family: Jakarta, sans-serif;
}

.metric-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Toolbar */
.portal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.portal-search-wrap {
  position: relative;
  flex: 1;
  min-width: 260px;
  max-width: 380px;
}

.portal-search-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.portal-search-input {
  width: 100%;
  height: 38px;
  padding-left: 36px;
  padding-right: 12px;
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}

.portal-chips-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.portal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.portal-chip:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.portal-chip.active {
  background: var(--surface-raised);
  border-color: var(--border-focus);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--border-focus);
}

.portal-chip .chip-count {
  font: 600 10px Mono, monospace;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--surface-overlay);
  color: var(--text-muted);
}

.portal-sort-select {
  height: 38px;
  padding: 0 12px;
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
}

/* Table */
.portal-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  contain: paint;
}

.portal-table-wrap .scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
}

table.portal-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  text-align: left;
}

.portal-table th {
  padding: 8px 8px;
  font: 700 10px Mono, monospace;
  letter-spacing: 0.5px;
  text-transform: none;
  color: var(--text-muted);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.portal-table th.tabular-head {
  text-align: right;
}

.portal-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
  vertical-align: middle;
}

.portal-table td.tabular-cell {
  text-align: right;
}

.portal-table tr:hover td {
  background: var(--surface-hover);
}

.listing-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 420px;
}

.listing-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.35;
}

.listing-title:hover {
  color: var(--blue);
}

.listing-tags {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.tag-code {
  font: 600 10px Mono, monospace;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.tag-muted {
  font-size: 11px;
  color: var(--text-muted);
}

.status-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.price-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.price-current {
  font: 700 13px Mono, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.promo-line {
  display: flex;
  align-items: center;
  gap: 4px;
}

.price-strikethrough {
  font: 11px Mono, monospace;
  text-decoration: line-through;
  color: var(--text-muted);
}

.stock-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.stock-qty, .sold-qty {
  font: 12px Mono, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.stock-qty strong, .sold-qty strong {
  color: var(--text-primary);
}

.fees-cell, .buybox-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shipping-est {
  font-size: 11px;
  color: var(--text-muted);
}

.sub-metric {
  margin-top: 3px;
}

.variation-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  white-space: nowrap;
}


.variation-drawer {
  background: var(--surface-overlay);
  border-bottom: 1px solid var(--border);
}

.variation-drawer td {
  padding: 12px 20px;
}

.variation-header {
  margin-bottom: 8px;
}

.variation-title {
  font: 600 11px Mono, monospace;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.variation-subtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.variation-subtable th {
  background: var(--surface-raised);
  padding: 6px 12px;
  font: 700 9px Mono, monospace;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}

.variation-subtable td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.portal-empty {
  padding: 40px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

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

.portal-table-foot {
  padding: 12px 16px;
  background: var(--surface-raised);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 960px) {
  .portal-header-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .portal-nav {
    justify-content: center;
  }
  .portal-header-actions {
    justify-content: space-between;
  }
  .portal-metric-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .client-workspace {
    padding: 12px 12px 40px;
    box-sizing: border-box;
  }
  .portal-header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }
  .portal-store-badge {
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
  }
  .portal-header-actions .connection-refresh {
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
  .portal-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .portal-search-wrap {
    max-width: none;
  }
  .portal-chips-group {
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .portal-metric-strip {
    grid-template-columns: 1fr;
  }
  .portal-table th, .portal-table td {
    padding: 10px 8px;
    font-size: 11px;
  }
}

/* ==========================================================================
   23. KEENTHEMES REUI COMPONENT ADAPTER PRIMITIVES
   Direct semantic mappings for ReUI components (Table, Avatar, Pagination, Menu, Tabs)
   ========================================================================== */

/* --- Table (ReUI cn-table) --- */
.cn-table-container {
  position: relative;
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  contain: paint;
}

.cn-table {
  width: 100%;
  caption-side: bottom;
  font-size: 13px;
  border-collapse: collapse;
  text-align: left;
}

.cn-table-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface-overlay);
}

.cn-table-head {
  height: 38px;
  padding: 0 14px;
  vertical-align: middle;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}

.cn-table-body {
  background: var(--surface);
}

.cn-table-row {
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.cn-table-row:hover {
  background-color: var(--surface-hover);
}

.cn-table-row:last-child {
  border-bottom: none;
}

.cn-table-row[data-state="selected"],
.cn-table-row.selected {
  background-color: var(--surface-active);
}

.cn-table-cell {
  padding: 11px 14px;
  vertical-align: middle;
  color: var(--text-primary);
  white-space: nowrap;
  font-size: 13px;
}

.cn-table-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
  font-weight: 500;
  font-size: 12px;
  color: var(--text-secondary);
}

.cn-table-caption {
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-muted);
}

/* --- Avatar (ReUI cn-avatar) --- */
.cn-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  user-select: none;
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}

.cn-avatar[data-size="sm"],
.cn-avatar.size-sm {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.cn-avatar,
.cn-avatar[data-size="default"],
.cn-avatar.size-default {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.cn-avatar[data-size="lg"],
.cn-avatar.size-lg {
  width: 44px;
  height: 44px;
  font-size: 15px;
}

.cn-avatar-image {
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cn-avatar-fallback {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  background: var(--surface-raised);
}

.cn-avatar-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--surface);
}

/* --- Pagination (ReUI cn-pagination) --- */
.cn-pagination {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  margin: 0;
  border-top: 1px solid var(--border);
  background: var(--surface-overlay);
  box-sizing: border-box;
}

.cn-pagination-content {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cn-pagination-item {
  display: inline-flex;
}

.cn-pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  border: 1px solid transparent;
  color: var(--text-secondary);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}

.cn-pagination-link:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
  border-color: var(--border);
}

.cn-pagination-link[data-active="true"],
.cn-pagination-link.active {
  background: var(--surface-raised);
  color: var(--text-primary);
  border-color: var(--border-strong);
  font-weight: 700;
}

.cn-pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
}

.cn-pagination-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
}

/* --- Menus & Dropdowns (ReUI cn-dropdown-menu) --- */
.cn-dropdown-menu-content,
.cn-menu-content {
  position: absolute;
  z-index: 50;
  min-width: 180px;
  padding: 5px;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
  overflow: hidden;
}

.cn-dropdown-menu-item,
.cn-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: transparent;
  text-align: left;
  box-sizing: border-box;
  transition: background var(--duration-fast) var(--ease-standard);
}

.cn-dropdown-menu-item:hover,
.cn-menu-item:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.cn-dropdown-menu-item[data-destructive="true"],
.cn-menu-item.destructive {
  color: var(--status-danger-text);
}

.cn-dropdown-menu-item[data-destructive="true"]:hover,
.cn-menu-item.destructive:hover {
  background: var(--status-danger-bg);
  color: var(--status-danger-text);
}

.cn-dropdown-menu-label,
.cn-menu-label {
  padding: 6px 10px 4px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.cn-dropdown-menu-separator,
.cn-menu-separator {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px -5px;
}

/* --- Badges & Status Indicators (ReUI cn-badge) --- */
.cn-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 3px 7px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-primary);
  white-space: nowrap;
}

.cn-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

/* ==========================================================================
   24. PROFESSIONAL ANALYTICS PLATFORM & 10-COLUMN OPERATIONAL GRID
   ========================================================================== */

/* --- Profile Dropdown --- */
.portal-profile-wrapper {
  position: relative;
}

.portal-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-primary);
  transition: all var(--duration-fast) var(--ease-standard);
}

.portal-profile-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-focus);
}

.portal-profile-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.25;
}

.company-name-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.store-nick-tag {
  font-size: 10px;
  color: var(--text-muted);
}

.dropdown-arrow {
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.portal-profile-btn[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg);
}

.portal-profile-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 290px;
  z-index: 100;
  box-shadow: var(--shadow-popover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-overlay);
  backdrop-filter: blur(16px);
  padding: 6px;
}

.profile-menu-header {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-menu-header strong {
  font-size: 13px;
  color: var(--text-primary);
}

.profile-menu-header span {
  font-size: 11px;
  color: var(--text-secondary);
}

.profile-menu-header small {
  font-size: 10px;
  color: var(--text-muted);
}

.profile-channel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}

.profile-channel-row.coming {
  opacity: 0.65;
}

.channel-info-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.channel-info-left div {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.channel-info-left strong {
  font-size: 12px;
}

.channel-info-left small {
  font-size: 10px;
  color: var(--text-muted);
}

.channel-icon.small {
  width: 22px;
  height: 22px;
  font-size: 10px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.channel-icon.meli {
  background: #ffe600;
  color: var(--status-info-text);
}

.channel-icon.shopee {
  background: #ee4d2d;
  color: var(--text-on-accent);
}

.profile-sync-note {
  padding: 4px 10px 6px;
  color: var(--text-muted);
  font-size: 10px;
}

/* --- Filter Chips & Sales Window Selector --- */
.portal-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.portal-filter-chip:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.portal-filter-chip.active {
  background: var(--surface-raised);
  border-color: var(--border-focus);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--border-focus);
}

.portal-filter-chip .chip-count {
  font: 600 10px Mono, monospace;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--surface-overlay);
  color: var(--text-muted);
}

.sales-window-selector {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  padding: 2px 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.window-selector-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0 4px;
}

.window-btn {
  padding: 3px 8px;
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.window-btn:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.window-btn.active {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: var(--accent);
}

/* --- 10-Column Operational Table Layout --- */
.portal-table .col-expand {
  width: 32px;
  min-width: 32px;
  text-align: center;
  padding: 0 6px !important;
}

.portal-table .col-image {
  width: 48px;
  min-width: 48px;
  text-align: center;
  padding: 8px 6px !important;
}

.portal-table .col-product {
  min-width: 170px;
  max-width: 240px;
}

.portal-table .col-status {
  width: 85px;
  white-space: nowrap;
}

.portal-table .col-stock {
  width: 105px;
  text-align: right;
}

.portal-table .col-sales {
  width: 105px;
  text-align: right;
}

.portal-table .col-fee {
  width: 95px;
  text-align: right;
}

.portal-table .col-shipping {
  width: 80px;
  text-align: right;
}

.portal-table .col-payout {
  width: 100px;
  text-align: right;
}

.portal-table .col-cost {
  width: 90px;
  text-align: right;
}

.portal-table .col-margin {
  width: 100px;
  text-align: right;
}

/* Product Info & Thumbnail */
.product-thumb-wrap {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  flex-shrink: 0;
}

.product-thumb {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.product-thumb-fallback {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.product-info-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 240px;
}

.product-title-row {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.product-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
}

.product-title:hover {
  color: var(--blue);
}

.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.tag-link {
  text-decoration: none;
}

.tag-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Row expand button */
.row-expand-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 0;
  transition: all 0.2s ease;
}

.row-expand-btn:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.row-expand-btn .chevron-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.row-expand-btn.open .chevron-icon {
  transform: rotate(180deg);
  color: var(--accent);
}

/* Cell Blocks */
.stock-cell-block,
.sales-cell-block,
.fee-cell-block,
.cost-cell-block,
.margin-cell-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.stock-num,
.sales-num {
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.net-payout {
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.cost-value {
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text-secondary);
}

.cost-add-btn {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.cost-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.margin-amt {
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
}

.margin-pct {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
}

.margin-amt.success, .margin-pct.success { color: var(--status-success-text); }
.margin-amt.warning, .margin-pct.warning { color: var(--status-warning-text); }
.margin-amt.danger, .margin-pct.danger { color: var(--status-danger-text); }

/* Trend Pill */
.trend-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  line-height: 1.2;
}

.trend-pill.up {
  background: var(--status-success-bg);
  color: var(--status-success-text);
  border: 1px solid var(--status-connected-border);
}

.trend-pill.down {
  background: var(--status-danger-bg);
  color: var(--status-danger-text);
  border: 1px solid var(--status-danger-border);
}

.trend-pill.neutral {
  background: var(--surface-overlay);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

/* --- Expandable Analytics Drawer --- */
.analytics-drawer-row td {
  padding: 0 !important;
  background: var(--surface-overlay);
  border-bottom: 1px solid var(--border);
}






.dre-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dre-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 3px 0;
}

.dre-row.deduction {
  color: var(--text-secondary);
}

.dre-row.subtotal {
  border-top: 1px dashed var(--border);
  padding-top: 6px;
  font-weight: 600;
}

.dre-row.cost-input-row {
  background: var(--surface-raised);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  margin: 2px 0;
}

.dre-cost-editor {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dre-cost-editor .currency-prefix {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text-muted);
}

.dre-cost-editor .cost-input {
  width: 75px;
  padding: 3px 6px;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  text-align: right;
}

.dre-cost-editor .cost-input:focus {
  border-color: var(--border-focus);
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

.dre-row.result {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  font-weight: 700;
  font-size: 13px;
}

.dre-row.result.success .dre-val { color: var(--status-success-text); }
.dre-row.result.warning .dre-val { color: var(--status-warning-text); }
.dre-row.result.danger .dre-val { color: var(--status-danger-text); }

.windows-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  text-align: center;
}

.window-cell {
  background: var(--surface-raised);
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.window-label {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.window-cell strong {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--text-primary);
}

.window-cell small {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--text-secondary);
}

.speed-indicator {
  font-size: 11px;
  color: var(--text-secondary);
  padding-top: 4px;
}

.rupture-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.rupture-stat-item {
  background: var(--surface-raised);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-label {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted);
  text-transform: uppercase;
}

.stat-num {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
}

.rupture-message {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1.4;
}

.rupture-message.alert-danger {
  background: var(--status-danger-bg);
  color: var(--status-danger-text);
  border: 1px solid var(--status-danger-border);
}

.rupture-message.alert-warning {
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
  border: 1px solid var(--status-attention-border);
}

.rupture-message.alert-success {
  background: var(--status-success-bg);
  color: var(--status-success-text);
  border: 1px solid var(--status-connected-border);
}

.buybox-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}

.buybox-status-line,
.buybox-price-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --- Dashboard & Rupture Overview --- */
.dashboard-period-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  background: var(--surface);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.period-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.period-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.period-chip {
  padding: 3px 10px;
  font-size: 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s ease;
}

.period-chip:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.period-chip.active {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.rupture-dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin: 20px 0;
}

.rupture-banner {
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid;
}

.rupture-banner.danger-banner {
  background: var(--status-danger-bg);
  border-color: var(--status-danger-border);
}

.rupture-banner.healthy-banner {
  background: var(--status-connected-bg);
  border-color: var(--status-connected-border);
}

.rupture-banner-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.banner-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.banner-title-group h3 {
  font-size: 14px;
  font-weight: 650;
  margin: 0;
}

.banner-meta {
  font-size: 11px;
  color: var(--text-muted);
}

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

.rupture-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.rupture-items-table th {
  text-align: left;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.rupture-items-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.banner-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 12px 0;
}

.rupture-summary-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.summary-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary-card-top strong {
  font-family: var(--font-mono, monospace);
  font-size: 14px;
}

.summary-card p {
  font-size: 11px;
  margin: 0;
  color: var(--text-muted);
  line-height: 1.4;
}

.top-performers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}

.performer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.performer-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.performer-header h3 {
  font-size: 14px;
  font-weight: 650;
  margin: 0;
}

.performer-header .eyebrow {
  margin: 0;
  font-size: 9px;
}

.performer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.performer-table th {
  text-align: left;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.performer-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.performer-title {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* --- Metrics Grid --- */
.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.metric-report-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.channel-cost-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cost-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 6px 0;
}

.cost-stat.total {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  font-weight: 700;
  font-size: 13px;
}

.cost-stat .cost-val {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
}

.buybox-stats-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.buybox-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 6px 0;
}

.buybox-stat-row strong {
  font-family: var(--font-mono, monospace);
}

.buybox-stat-row.neutral {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  color: var(--text-muted);
}

@media (max-width: 1024px) {
  .rupture-dashboard-grid,
  .top-performers-grid,
  .metrics-grid,
  .dashboard-analytics-split,
  .dashboard-action-cards {
    grid-template-columns: 1fr;
  }
}

/* --- Drawer Line-by-Line Stat Rows --- */
.stat-lines-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-row-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
}

.stat-row-line.highlight {
  background: var(--accent-subtle);
  border-color: var(--status-info-border);
}

.stat-line-label {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text-secondary);
}

.stat-line-val {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  text-align: right;
}












/* --- Dashboard Executive Analytics Split --- */
.dashboard-analytics-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin: 20px 0;
}

.dashboard-chart-card,
.dashboard-dre-card {
  padding: 16px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dashboard-chart-card .card-header,
.dashboard-dre-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.dashboard-chart-card .card-header h3,
.dashboard-dre-card .card-header h3 {
  font-size: 14px;
  font-weight: 650;
  margin: 0;
}

/* Store 7-day daily chart */
.store-daily-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.store-chart-canvas-wrap {
  position: relative;
  width: 100%;
  min-height: 220px;
}

.diarization-chart-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  margin-bottom: 16px;
  background: var(--surface-raised);
  border-radius: 8px;
  padding: 8px;
}

.store-chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 120px;
  gap: 10px;
  padding: 10px 6px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.store-chart-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: 4px;
  justify-content: flex-end;
}

.store-bar-val {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--text-muted);
}

.store-bar-track {
  width: 100%;
  max-width: 32px;
  flex: 1;
  background: var(--surface-raised);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.store-bar-fill {
  width: 100%;
  background: var(--accent);
  border-radius: var(--radius-xs);
  transition: height 0.3s ease;
}

.store-bar-fill.zero {
  height: 4px !important;
  background: var(--border-subtle);
}

.store-bar-date {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.store-chart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-mono, monospace);
  padding: 4px 4px 0;
  flex-wrap: wrap;
  gap: 8px;
}

/* Consolidated DRE Summary */
.dre-summary-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dre-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 4px 0;
}

.dre-summary-row.deduction {
  color: var(--text-secondary);
}

.dre-summary-row.subtotal {
  border-top: 1px dashed var(--border);
  padding-top: 8px;
  font-weight: 600;
}

.dre-summary-row.highlight {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  font-weight: 700;
  font-size: 13px;
}

.dre-summary-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
}

/* Operational Action Cards */
.dashboard-action-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0;
}

.action-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.action-card.danger {
  border-color: var(--status-danger-border);
  background: var(--status-danger-bg);
}

.action-card.warning {
  border-color: var(--status-attention-border);
  background: var(--status-attention-bg);
}

.action-card.info {
  border-color: var(--status-info-border);
  background: var(--status-info-bg);
}

.action-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-card-header strong {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
}

.action-card p {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* ==========================================================================
   SKU-First Commercial Architecture & Deep Analytics Sheet (Linear/Attio B2B)
   ========================================================================== */

/* 1. Lateral Right Drawer / Sheet */
.portal-drawer-right {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(680px, 94vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-overlay);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideInRight 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-drawer-right[hidden] {
  display: none !important;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(2px);
  z-index: 1050;
  animation: fadeIn 0.18s ease-out;
}

.drawer-backdrop[hidden] {
  display: none !important;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.drawer-header {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.drawer-title-block {
  flex: 1;
  min-width: 0;
}

.drawer-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  font-family: Mono, monospace;
}

.drawer-sku-pill {
  padding: 2px 7px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--blue);
}

.drawer-title-block h2 {
  font-size: 16px;
  line-height: 1.35;
  margin: 0 0 4px;
  color: var(--text-primary);
  font-weight: 650;
}

.drawer-brand {
  font-size: 12px;
  color: var(--text-muted);
}

.drawer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer-close-btn {
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.drawer-close-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.drawer-nav {
  display: flex;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
  gap: 4px;
  overflow-x: auto;
}

.drawer-tab-btn {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  min-height: 38px;
}

.drawer-tab-btn:hover {
  color: var(--text-primary);
  background: transparent;
}

.drawer-tab-btn.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  background: transparent;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.drawer-pane {
  display: none;
  flex-direction: column;
  gap: 18px;
}

.drawer-pane.active {
  display: flex;
}

/* 2. Nested MLB Sub-Rows inside SKU-First Anúncios */
.sku-parent-row {
  cursor: pointer;
  background: var(--surface);
  font-weight: 500;
}

.sku-parent-row:hover {
  background: var(--surface-hover) !important;
}

.sku-parent-row.expanded {
  background: var(--surface-raised);
}

.sku-badge-count {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: var(--blue-light);
  color: var(--blue);
  border: 1px solid var(--status-info-border);
}

.sku-drawer-open-btn {
  padding: 4px 9px;
  font-size: 11px;
  min-height: 26px;
  border-radius: var(--radius-sm);
}

.sku-children-container-row {
  background: var(--surface-raised);
}

.sku-children-wrap {
  padding: 12px 16px 16px 44px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}

.sku-children-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: Jakarta, sans-serif;
}

.child-mlbs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.child-mlbs-table th {
  background: var(--surface-hover);
  height: 32px;
  padding: 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.child-mlbs-table td {
  height: 40px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11.5px;
}

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

.child-mlbs-table tr:hover {
  background: var(--surface-hover);
}

/* 3. Dedicated Modules: SKUs, Promoções, Devoluções */
.module-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-bottom: 20px;
  overflow: hidden;
}

.module-kpi {
  padding: 16px 18px;
  border-right: 1px solid var(--border-subtle);
  background: var(--surface);
}

.module-kpi:last-child {
  border-right: 0;
}

.module-kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.module-kpi-top span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.module-kpi strong {
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.module-kpi small {
  font-size: 11px;
  color: var(--text-muted);
}

/* Financial history modal/drawer entries */
.history-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.history-date {
  font-size: 11px;
  color: var(--text-muted);
}

.history-cost {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 4. SKU Lateral Sheet / Drawer */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(2px);
  z-index: 999;
}

.portal-drawer-right {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 640px;
  max-width: 100vw;
  background: var(--surface);
  box-shadow: var(--shadow-overlay);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideDrawerRight 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDrawerRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.drawer-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  background: var(--surface-raised);
}

.drawer-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.drawer-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.drawer-header-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.drawer-sku-badge {
  font-family: Mono, monospace;
  font-size: 11px;
  font-weight: 700;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

.drawer-close-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  transition: all 0.15s;
}

.drawer-close-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.drawer-nav {
  display: flex;
  gap: 2px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow-x: auto;
}

.drawer-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 11px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.drawer-tab-btn:hover {
  color: var(--text-primary);
}

.drawer-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--surface);
}

.drawer-pane {
  display: none;
  flex-direction: column;
  gap: 18px;
}

.drawer-pane.active {
  display: flex;
}

.drawer-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  background: var(--surface);
}

.drawer-section-title {
  margin: 0 0 12px 0;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
}

.drawer-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.drawer-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer-info-item .info-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.drawer-info-item .info-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

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

.drawer-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drawer-form label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.drawer-form input {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--surface);
  color: var(--text-primary);
}

.drawer-form input:focus {
  outline: none;
  border-color: var(--accent);
}

.drawer-mlbs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-mlb-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: 12px;
}

.drawer-mlb-card:hover {
  background: var(--surface-raised);
}

/* ==========================================================================
   5. Collapsible Sidebar Layout & Profile Footer
   ========================================================================== */
.portal-app-shell {
  display: block;
  min-height: 100vh;
  width: 100%;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--canvas);
  position: relative;
}

/* Sidebar Container: fixed left-side navigation */
.portal-sidebar {
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  border-left: none;
  order: 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 100;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible;
  flex-shrink: 0;
}

/* Sidebar Header */
.sidebar-header {
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--sidebar-active-fg);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.6px;
}

.sidebar-brand-text {
  display: inline-block;
  white-space: nowrap;
}

.sidebar-collapse-btn {
  background: transparent;
  border: 1px solid var(--sidebar-border);
  border-radius: 6px;
  color: var(--text-disabled);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.sidebar-collapse-btn:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-active-fg);
  border-color: var(--border-strong);
}

/* Sidebar Body & Navigation */
.sidebar-body {
  flex: 1;
  padding: 16px 10px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-section-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  padding: 0 10px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text-disabled);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
  position: relative;
  white-space: nowrap;
}

.sidebar-nav-item:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-active-fg);
}

.sidebar-nav-item.active {
  background: var(--blue);
  color: var(--text-on-accent);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

.sidebar-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.sidebar-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--sidebar-badge-bg);
  color: var(--text-disabled);
  border: 1px solid var(--sidebar-border);
  margin-left: auto;
}

.sidebar-nav-item.active .sidebar-badge {
  background: color-mix(in srgb, var(--surface) 22%, transparent);
  color: var(--text-on-accent);
  border-color: var(--selection-strong);
}

/* Sidebar Footer & Profile (Canto Inferior Esquerdo) */
.sidebar-footer {
  margin-top: auto;
  padding: 12px 10px;
  border-top: 1px solid var(--sidebar-border);
  position: relative;
  background: var(--sidebar-bg);
  overflow: visible;
}

.sidebar-profile-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--sidebar-border);
  border-radius: 8px;
  background: var(--sidebar-card);
  color: var(--sidebar-active-fg);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.sidebar-profile-trigger:hover {
  background: var(--sidebar-hover);
  border-color: var(--border-strong);
}

.sidebar-profile-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sidebar-profile-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sidebar-active-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-profile-channel {
  font-size: 11px;
  color: var(--text-disabled);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-profile-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.sidebar-profile-trigger[aria-expanded="true"] .sidebar-profile-arrow {
  transform: rotate(180deg);
}

.sidebar-profile-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 10px;
  right: auto;
  width: min(280px, calc(100vw - 24px));
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-popover);
  padding: 14px;
  z-index: 1002;
  color: var(--text-primary);
}

/* Sidebar Collapsed Mode (68px) */
.portal-sidebar.collapsed {
  width: 68px;
  min-width: 68px;
  max-width: 68px;
}

.portal-sidebar.collapsed .sidebar-brand-text,
.portal-sidebar.collapsed .sidebar-section-label,
.portal-sidebar.collapsed .sidebar-item-label,
.portal-sidebar.collapsed .sidebar-profile-info,
.portal-sidebar.collapsed .sidebar-profile-arrow,
.portal-sidebar.collapsed .sidebar-collapse-btn {
  display: none !important;
}

.portal-sidebar.collapsed .sidebar-header {
  justify-content: center;
  padding: 0 10px;
}

.portal-sidebar.collapsed .sidebar-nav-item {
  justify-content: center;
  padding: 10px 0;
}

.portal-sidebar.collapsed .sidebar-item-icon {
  margin: 0;
}

.portal-sidebar.collapsed .sidebar-badge {
  position: absolute;
  top: 4px;
  right: 8px;
  padding: 0 4px;
  min-width: 14px;
  height: 14px;
  font-size: 9px;
  line-height: 14px;
}

.portal-sidebar.collapsed .sidebar-profile-trigger {
  justify-content: center;
  padding: 8px 0;
}

.portal-sidebar.collapsed .sidebar-profile-popover {
  left: 72px;
  right: auto;
  bottom: 12px;
}

/* Main Content Area */
.portal-main-area {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  margin-left: 250px;
  width: calc(100% - 250px);
  max-width: none;
  min-height: 100vh;
  transition: margin-left 0.22s cubic-bezier(0.4, 0, 0.2, 1), width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.portal-app-shell.sidebar-collapsed .portal-main-area,
.portal-sidebar.collapsed ~ .portal-main-area {
  margin-left: 68px;
  width: calc(100% - 68px);
}

/* Topbar */
.portal-topbar {
  height: 54px;
  min-height: 54px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 80;
  box-shadow: var(--shadow-xs);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-hamburger-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.topbar-hamburger-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.topbar-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.breadcrumb-root {
  font-weight: 500;
  color: var(--text-muted);
}

.breadcrumb-separator {
  color: var(--border-strong);
  font-weight: 400;
}

.breadcrumb-page {
  font-weight: 600;
  color: var(--text-primary);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-channel-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}

.channel-name-txt {
  font-weight: 600;
  color: var(--text-primary);
}

.portal-main-content {
  flex: 1;
  padding: 24px 28px 48px;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}

/* Mobile Sidebar & Off-canvas */
@media (max-width: 860px) {
  .portal-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    transform: translateX(-100%);
    visibility: hidden;
    box-shadow: none;
    z-index: 1001;
  }
  .portal-sidebar.mobile-open {
    visibility: visible;
    transform: translateX(0);
    box-shadow: var(--shadow-overlay);
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: var(--backdrop);
    backdrop-filter: blur(2px);
    z-index: 1000;
  }
  .portal-main-area {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .portal-main-content {
    padding: 16px 14px 40px;
  }
  .portal-topbar {
    padding: 0 14px;
  }
}

/* ==========================================================================
   6. High Contrast Tables, Values & Financial Indicators
   ========================================================================== */
.portal-table-wrap, .cn-table-container {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-xs) !important;
}

.portal-table th, .cn-table-head {
  background: var(--surface-raised) !important;
  color: var(--text-primary) !important;
  border-bottom: 2px solid var(--border) !important;
  font: 700 11px/1.3 Jakarta, sans-serif !important;
  letter-spacing: 0.3px;
  text-transform: none !important;
}

.portal-table td, .cn-table-cell {
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  font-size: 12px;
}

.portal-table-row:hover td {
  background: var(--surface-raised) !important;
}

/* High Contrast Parent SKU Row */
.sku-parent-row {
  background: var(--surface) !important;
}

.sku-parent-row td {
  border-bottom: 1px solid var(--border-strong) !important;
}

.sku-parent-row:hover td {
  background: var(--surface-raised) !important;
}

.sku-parent-row.expanded td {
  background: var(--surface-raised) !important;
  border-bottom: 2px solid var(--blue) !important;
}

.sku-parent-row .product-title {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
}

/* Values Contrast */
.tabular-val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-primary) !important;
}

.price-current, .stock-qty, .sold-qty, .net-payout {
  color: var(--text-primary) !important;
  font-weight: 600;
}

.net-payout {
  font-weight: 750 !important;
  color: var(--text-primary) !important;
}

/* High Contrast Margins */
.margin-amt.success, .margin-pct.success {
  color: var(--status-connected-text) !important;
  font-weight: 750 !important;
}

.margin-amt.warning, .margin-pct.warning {
  color: var(--status-attention-text) !important;
  font-weight: 750 !important;
}

.margin-amt.danger, .margin-pct.danger {
  color: var(--status-danger-text) !important;
  font-weight: 750 !important;
}

/* Child MLBs Subtable High Contrast */
.sku-children-wrap {
  background: var(--status-info-bg) !important;
  border-left: 0 !important;
  border-bottom: 1px solid var(--status-info-border) !important;
}

.child-mlbs-table {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-xs);
}

.child-mlbs-table th {
  background: var(--surface-raised) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-strong) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}

.child-mlbs-table td {
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  font-size: 11.5px;
}

.child-mlbs-table tr:hover td {
  background: var(--surface-raised) !important;
}

/* KPI Strips Contrast */
.portal-metric-strip, .module-kpi-strip {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xs) !important;
}

.portal-metric, .module-kpi {
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
}

.portal-metric strong, .module-kpi strong {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
}

.stat-label, .metric-label, .module-kpi-top span {
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}

/* Navigation remains usable without progressive JavaScript. */
@media (max-width: 860px) {
  html:not(.portal-enhanced) .portal-app-shell { flex-direction: column; }
  html:not(.portal-enhanced) .portal-sidebar { position: static; transform: none; visibility: visible; width: 100%; max-width: none; height: auto; order: 0; }
  html:not(.portal-enhanced) .sidebar-content { overflow: visible; }
  .portal-sidebar { height: 100dvh; }
  .portal-sidebar.collapsed { width: 250px; min-width: 250px; max-width: 250px; }
}
html:not(.portal-enhanced) [data-sidebar-toggle] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .portal-sidebar, .sidebar-profile-arrow { transition: none; }
}

html:not(.portal-enhanced) [data-profile-menu][hidden] { display: block !important; position: static; width: 100%; }
html:not(.portal-enhanced) [data-toggle-profile] { display: none; }
.portal-drawer-right { overscroll-behavior: contain; }
.period-chip { text-decoration: none; }

/* Spacing between expand button, MLB badge and product image */
.expand-cell-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.portal-table .col-expand {
  width: 36px;
  min-width: 36px;
  max-width: 42px;
  text-align: center;
  padding: 6px 4px !important;
}
.portal-table .col-product {
  min-width: 220px;
  max-width: none;
}
.portal-table .col-trend {
  width: 105px;
  min-width: 95px;
  max-width: 115px;
}
.portal-table .col-buybox {
  width: 110px;
  min-width: 100px;
  text-align: center;
}
.portal-table .col-sales {
  width: 130px;
  min-width: 115px;
  text-align: right;
}
.portal-table .col-shipping {
  width: 95px;
  min-width: 85px;
  text-align: right;
}
.portal-table .col-image {
  width: 50px;
  min-width: 50px;
  padding: 6px 8px;
}
.sku-badge-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  background: var(--surface-raised);
  border: 1px solid var(--status-info-border);
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1;
}

/* Promotional Pricing High Contrast Display */
.promo-price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.promo-price-block del {
  font-size: 11px;
  color: var(--text-muted);
}
.tag-promo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Floating Toast Notification for SKU save and feedback */
.portal-floating-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: var(--surface-overlay);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-popover);
  font-size: 13.5px;
  font-weight: 500;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.portal-floating-toast.toast-success {
  border-color: var(--status-connected-dot);
  background: var(--surface-overlay);
  color: var(--text-primary);
}
.portal-floating-toast.toast-error {
  border-color: var(--status-danger-dot);
  background: var(--status-danger-dot);
  color: var(--text-primary);
}
.toast-close-btn {
  background: transparent;
  border: none;
  color: currentColor;
  cursor: pointer;
  padding: 0 4px;
  font-size: 18px;
  line-height: 1;
  opacity: 0.8;
}
.toast-close-btn:hover {
  opacity: 1;
}

/* Sparklines */
.sparkline-svg {
  display: inline-block;
  vertical-align: middle;
  overflow: visible;
}
.sparkline-placeholder {
  font-size: 11px;
  color: var(--text-muted, var(--text-muted));
}

/* Reasons Triad Grid in Returns & SKU Drawer */
.reasons-triad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.reasons-triad-col {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.triad-title {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.triad-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11px;
  color: var(--text-muted);
}
.triad-list li {
  margin-bottom: 4px;
  padding-left: 10px;
  position: relative;
}
.triad-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--text-disabled);
}

/* Freshness Popover in Topbar */
.sync-freshness-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface-raised);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  user-select: none;
  transition: background 0.15s ease;
}
.sync-freshness-pill:hover {
  background: var(--surface-active);
}
.freshness-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 230px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-popover);
  padding: 12px 14px;
  z-index: 1000;
  color: var(--text-primary);
}
.freshness-header {
  font-size: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 4px;
}
.freshness-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  margin-bottom: 5px;
  color: var(--text-muted);
}
.freshness-row strong {
  color: var(--text-primary);
}

/* Bulk Costs Sheet / Modal */
.bulk-costs-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bulk-costs-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(2px);
  z-index: 1099;
}
.bulk-costs-dialog {
  position: relative;
  background: var(--surface);
  border-radius: 12px;
  width: min(920px, calc(100vw - 32px));
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-popover);
  border: 1px solid var(--border-strong);
  z-index: 1101;
  overflow: hidden;
}
.bulk-costs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.bulk-costs-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}
.bulk-costs-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
.bulk-costs-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
}
.bulk-costs-table th {
  font-size: 11px;
  padding: 8px 10px;
}
.bulk-costs-table td {
  padding: 8px 10px;
}
.bulk-costs-table input {
  padding: 6px 8px;
  font-size: 12.5px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
}

/* Badge Channel (Catálogo / Tradicional) */
.badge-channel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  text-align: center;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
  vertical-align: middle;
}
.badge-channel.badge-catalog {
  background-color: var(--blue);
  color: var(--text-on-accent);
}
.badge-channel.badge-traditional {
  background-color: var(--text-muted);
  color: var(--text-on-accent);
}

/* Buy Box KPI Grid */
.buybox-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

/* ─── Product Thumbnail Wrap ─────────────────────────────────────────────── */
.product-thumb-wrap {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-thumb-fallback {
  color: var(--text-disabled);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.product-cell-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.product-info-block {
  min-width: 0;
  flex: 1;
}
.product-title-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  min-height: auto;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}
.product-title-btn strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: normal;
  word-break: break-word;
}
.product-title-btn:hover strong {
  color: var(--blue);
}
.sku-parent-row .product-title-btn strong {
  color: var(--text-primary) !important;
}

/* ─── Buy Box Badges ─────────────────────────────────────────────────────── */
.badge-buybox {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.4;
}
.badge-buybox.winning {
  background: var(--status-connected-bg);
  color: var(--status-connected-text);
  border: 1px solid var(--status-connected-border);
}
.badge-buybox.sharing {
  background: var(--status-attention-bg);
  color: var(--status-attention-text);
  border: 1px solid var(--status-attention-dot);
}
.badge-buybox.losing {
  background: var(--status-danger-bg);
  color: var(--status-danger-text);
  border: 1px solid var(--status-danger-border);
}
.badge-buybox.neutral {
  background: var(--surface-raised);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
}

/* ─── Sales Cell Block (30d / 7d stacked) ───────────────────────────────── */
.sales-cell-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.sales-total-val {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.sales-sub-line {
  font-size: 10.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
}
.sales-period-tag {
  font-family: Mono, monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-disabled);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 3px;
}

/* ─── Shipping Cell Block ─────────────────────────────────────────────────── */
.shipping-cell-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.tabular-sub {
  font-size: 10.5px;
  color: var(--text-disabled);
}

/* ─── Bulk Costs Side Sheet Modal ────────────────────────────────────────── */
.bulk-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(2px);
  z-index: 1099;
}
.bulk-costs-sheet {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 95vw);
  max-height: 90dvh;
  background: var(--surface, var(--surface));
  border-radius: 12px;
  border: 1px solid var(--border-strong, var(--border-strong));
  box-shadow: var(--shadow-popover);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bulk-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.bulk-sheet-header h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 4px 0;
}
.bulk-sheet-header .eyebrow {
  margin-bottom: 6px;
}
.bulk-sheet-header p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.bulk-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}
.bulk-sheet-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
  flex-shrink: 0;
}
.bulk-edit-table th {
  font-size: 11px;
  padding: 8px 10px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.bulk-edit-table td {
  padding: 6px 10px;
  vertical-align: middle;
}
.bulk-input {
  padding: 6px 8px;
  font-size: 12.5px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
  min-height: unset;
  margin-top: 0;
}
.bulk-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--status-info-bg);
}

/* ─── Dashboard Triage Tables ─────────────────────────────────────────────── */
.dashboard-triage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}
.dashboard-triage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dashboard-triage-table th {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.dashboard-triage-table td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  color: var(--text-primary);
  height: auto;
}
.dashboard-triage-table tr:last-child td {
  border-bottom: none;
}
.triage-prod-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.triage-prod-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  display: block;
}
.triage-prod-sub {
  font-size: 10.5px;
  color: var(--text-disabled);
  display: block;
}
.triage-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-disabled);
  font-size: 12px;
}
.triage-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.triage-list {
  overflow: hidden;
}

/* ─── Sidebar Profile Card ────────────────────────────────────────────────── */
.sidebar-profile-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}
.sidebar-profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--blue-light);
  border: 1px solid var(--blue);
  color: var(--status-info-text);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sidebar-profile-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar-profile-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-profile-role {
  font-size: 10.5px;
  color: var(--text-muted);
}
.sidebar-logout-form {
  flex-shrink: 0;
}
.sidebar-logout-btn {
  background: transparent;
  border: 1px solid var(--sidebar-border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 4px 8px;
  min-height: auto;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sidebar-logout-btn:hover {
  background: var(--sidebar-border);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* ─── Accordion Row Toggle ────────────────────────────────────────────────── */
.row-expand-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-disabled);
  cursor: pointer;
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.row-expand-btn:hover {
  background: var(--surface-raised);
  color: var(--text-secondary);
  border-color: var(--border);
}
.row-expand-btn .chevron-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}
.row-expand-btn[aria-expanded="true"] .chevron-icon,
.row-expand-btn.open .chevron-icon {
  transform: rotate(180deg);
}

/* ─── Product Title Text Wrapping Override ───────────────────────────────── */
.product-title-row {
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
  overflow: visible;
}




/* Styles for Bulk Costs Upload Zone */
.costs-upload-zone:hover {
  border-color: var(--accent, var(--blue)) !important;
  background: var(--status-info-bg) !important;
}

.costs-upload-zone.dragover {
  border-color: var(--blue) !important;
  background: var(--status-info-bg) !important;
  transform: scale(1.01);
}

/* Diarization 7D x 7D Comparison Table */
.diarization-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 8px;
}

.diarization-table th {
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
  background: var(--bg-subtle, color-mix(in srgb, var(--surface) 2%, transparent));
}

.diarization-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.diarization-table tr:last-child td {
  border-bottom: none;
}

.diarization-table tr:hover td {
  background: var(--surface-hover);
}

.diarization-delta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.diarization-delta-pill.positive {
  background: var(--status-connected-border);
  color: var(--status-connected-text);
}

.diarization-delta-pill.negative {
  background: var(--status-danger-border);
  color: var(--status-danger-text);
}

.diarization-delta-pill.neutral {
  background: var(--status-neutral-bg);
  color: var(--text-muted);
}

.return-claim-summary {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.3;
}

.return-claims-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.return-claims-section h4,
.returns-unlinked-claims h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 13px;
}

.return-claims-section .muted {
  margin: 4px 0 9px;
  font-size: 11px;
}

.return-claims-list {
  display: grid;
  gap: 8px;
}

.return-claim-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.return-claim-card > div:first-child {
  min-width: 0;
}

.return-claim-card strong,
.return-claim-card span {
  display: block;
}

.return-claim-card span:not(.badge) {
  overflow: hidden;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.return-claim-meta {
  flex: none;
  text-align: right;
}

.return-claim-meta small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
}

.returns-unlinked-claims {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(280px, 1.2fr);
  gap: 20px;
  align-items: start;
  margin-top: 16px;
  padding: 18px;
}

.returns-unlinked-claims .muted {
  margin: 6px 0 0;
  font-size: 12px;
}

@media (max-width: 720px) {
  .return-claim-card,
  .returns-unlinked-claims {
    display: block;
  }

  .return-claim-meta {
    margin-top: 8px;
    text-align: left;
  }
}

/* CSP-safe public and administrative surfaces. */
.invite-ready-title {
  margin-top: 12px;
}

.invitation-verification {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.invite-header-info {
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
}

.invite-header-eyebrow {
  justify-content: center;
}

.invite-company-title {
  margin: 8px 0 6px;
  font-size: 24px;
}

.invite-email-card {
  max-width: 380px;
  margin: 16px auto 24px;
  padding: 16px;
  text-align: center;
}

.invite-notice {
  max-width: 380px;
  margin: 0 auto 16px;
  text-align: center;
}

.otp-field-container {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
  align-items: center;
  flex-direction: column;
}

.otp-field-label {
  display: block;
  margin-bottom: 12px;
  color: var(--text-secondary, var(--text-secondary));
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.otp-code-wrap,
.otp-submit-wrap {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.invitation-verification-footer {
  width: 100%;
  margin-top: 24px;
}

.auth-form .auth-password-label {
  margin-bottom: 0;
}

.auth-password-wrap {
  margin-bottom: 20px;
}

.modal-brand-mark {
  vertical-align: middle;
}

.preview-disclaimer {
  margin-bottom: 16px;
  white-space: normal;
}

}
@layer overrides {
/* Olhometro premium light workspace — final design-system layer. */
/* Tokens moved to tokens.css (redesign 2026-10): this layer no longer redefines :root colors. */
html,body{background:var(--canvas);color:var(--text-primary)}body{font:13px/1.55 Jakarta,system-ui,sans-serif}::selection{background:var(--status-info-bg);color:var(--status-info-text)}
h1{font-size:23px;line-height:1.3;font-weight:650;letter-spacing:-.55px}h2{font-size:15px;font-weight:650;letter-spacing:-.2px}h3{font-size:14px;font-weight:620}p{color:var(--text-secondary)}
.eyebrow{font:600 11px/1.4 Jakarta,sans-serif;letter-spacing:0;text-transform:none;color:var(--text-muted)}.eyebrow-dot{width:5px;height:5px;background:var(--blue)}code{color:var(--text-secondary);background:var(--surface-raised)}a{color:var(--blue)}a:hover{color:var(--blue-hover)}
button,.button{min-height:34px;padding:7px 12px;gap:7px;border-radius:var(--radius-md);background:var(--blue);color:var(--text-on-accent);font-size:13px;font-weight:600;box-shadow:none;transition:background-color 150ms,border-color 150ms,color 150ms,box-shadow 150ms}button:hover,.button:hover{background:var(--blue-hover)}button svg,.button svg{width:16px;height:16px}.secondary{background:var(--surface);border-color:var(--border-strong);color:var(--text-secondary)}.secondary:hover{background:var(--surface-hover);border-color:var(--border-strong);color:var(--text-primary)}.quiet{background:transparent;color:var(--text-secondary)}.quiet:hover{background:var(--surface-hover);color:var(--text-primary)}.small-button{min-height:32px;padding:6px 10px;font-size:12px}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.brand{gap:9px;font-size:19px;letter-spacing:-.8px}.brand-logo{width:30px;height:30px}
.profile-menu summary{width:auto;height:36px;padding:3px 8px 3px 4px;gap:8px;border-color:var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text-primary)}.profile-menu summary:hover{background:var(--surface-hover)}.profile-avatar{width:28px;height:28px;border-radius:7px;background:var(--blue-light);border-color:var(--status-info-border);color:var(--blue)}.profile-label{display:inline;font-size:12px;font-weight:600}.profile-label::after{content:'⌄';margin-left:6px;color:var(--text-muted)}.profile-popover{top:42px;min-width:248px;padding:8px;border-color:var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-popover)}.profile-identity{padding:8px}.profile-actions{border-color:var(--border-subtle);padding-top:6px}.profile-actions .button,.profile-actions button{justify-content:flex-start;width:100%;border:0;min-height:34px}
.heading{margin-bottom:24px}.heading p{max-width:680px}.portal-metric-strip{display:grid;gap:0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}.portal-metric{min-height:88px;padding:14px 16px;border:0;border-right:1px solid var(--border-subtle);border-radius:0;background:var(--surface)}.portal-metric:last-child{border-right:0}.stat-label,.metric-label{font:600 12px/1.4 Jakarta,sans-serif;letter-spacing:0;text-transform:none;color:var(--text-secondary)}.metric-sub{margin-top:3px;font-size:11px;color:var(--text-muted)}
.surface{padding:20px;border-color:var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:none}.section-top p{margin-top:3px}.count{height:20px;min-width:20px;border-radius:5px;background:var(--surface-raised);color:var(--text-secondary)}
.portal-toolbar{display:flex;align-items:center;gap:8px;margin:16px 0}.portal-search-wrap{position:relative}.portal-search-wrap>svg{left:11px;color:var(--text-muted)}input,select{min-height:36px;margin-top:6px;padding:8px 11px;border-color:var(--border-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--text-primary);font-size:13px}input:hover,select:hover{border-color:var(--border-strong)}input:focus,select:focus{border-color:var(--border-focus);box-shadow:var(--focus-ring)}.portal-search-input{height:36px;min-height:36px;margin:0;padding:7px 36px 7px 35px}.search-clear{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:27px;height:27px;min-height:0;padding:0;border:0;border-radius:5px;background:transparent;color:var(--text-muted)}.search-clear:hover{background:var(--surface-hover);color:var(--text-primary)}
.scroll{border-color:var(--border)}table{font-variant-numeric:tabular-nums}th{height:38px;padding:0 14px;border-block:1px solid var(--border);border-bottom:2px solid var(--border)!important;background:var(--surface-raised)!important;color:var(--text-primary)!important;font:700 11px/1.3 Jakarta,sans-serif!important;letter-spacing:.3px;text-transform:uppercase}td{height:48px;padding:8px 14px;border-bottom:1px solid var(--border)!important;color:var(--text-primary);font-size:12px}td small{margin-top:2px;color:var(--text-muted)}.company{gap:10px}.company strong{font-size:13px;font-weight:600}.avatar{width:32px;height:32px;border-radius:8px;background:var(--blue-light);border-color:var(--status-info-border);color:var(--blue)}.avatar-large{width:40px;height:40px;border-radius:9px;font-size:14px}.badge{min-height:22px;padding:2px 7px;border:1px solid transparent;border-radius:999px;font-size:11px;font-weight:600}.success{color:var(--status-connected-text);background:var(--status-connected-bg);border-color:var(--status-connected-border)}.warning{color:var(--status-attention-text);background:var(--status-attention-bg);border-color:var(--status-attention-border)}.danger{color:var(--status-danger-text);background:var(--status-danger-bg);border-color:var(--status-danger-border)}.neutral{color:var(--status-neutral-text);background:var(--status-neutral-bg);border-color:var(--status-neutral-border)}.info{color:var(--status-info-text);background:var(--status-info-bg);border-color:var(--status-info-border)}.portal-table-foot{min-height:44px;padding:10px 16px;border-top:1px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:11px}
.block-step{width:28px;height:28px;border:0;border-radius:7px;background:var(--surface-raised);color:var(--text-muted);font:600 11px Jakarta,sans-serif}.channel{padding:16px;border-color:var(--border);border-radius:var(--radius-lg);background:var(--surface)}.channel-coming{background:var(--surface-raised)}.channel-icon{width:36px;height:36px;border-radius:8px}.logo-field{padding:16px;border-color:var(--border-strong);border-radius:var(--radius-lg);background:var(--surface-raised)}.logo-preview{width:56px;height:56px;border-radius:9px}.form-grid{gap:16px;margin:20px 0}.form-footer,.modal-actions{border-color:var(--border)}.empty,.portal-empty{padding:36px 20px}.empty-symbol,.empty-icon-wrap{border-color:var(--status-info-border);background:var(--blue-light);color:var(--blue)}
.auth-shell{padding:24px;background:var(--canvas)}.auth-card{width:min(900px,100%);border-color:var(--border);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-sm)}.auth-aside{padding:40px;background:var(--surface-hover);color:var(--text-primary)}.auth-aside:before{background-image:linear-gradient(var(--surface-active) 1px,transparent 1px),linear-gradient(90deg,var(--surface-active) 1px,transparent 1px);opacity:.65}.auth-aside p{color:var(--text-secondary)}.auth-preview{padding:12px 16px;border-color:var(--border);border-radius:var(--radius-lg);background:color-mix(in srgb, var(--surface) 82%, transparent)}.auth-preview-row{padding:10px 0;border-color:var(--border-subtle);color:var(--text-secondary)}.auth-preview strong{color:var(--text-primary)}.auth-aside>.form-note{color:var(--text-muted);font:11px Jakarta,sans-serif;letter-spacing:0}.auth-form{padding:44px}.auth-form h2{font-size:24px}.auth-form input{min-height:40px}.auth-form button[type=submit]{min-height:40px}.auth-note{border-color:var(--border)}
.client-workspace:not(.portal-app-shell){max-width:1504px;padding:20px 32px 48px}.portal-app-shell.client-workspace{max-width:100%;padding:0}.portal-header{margin-bottom:24px;border-color:var(--border);border-radius:var(--radius-lg);background:var(--surface)}.portal-header-inner{min-height:56px;padding:8px 12px}.portal-header-divider{background:var(--border)}.portal-company-context,.portal-store-badge{border-color:var(--border);background:var(--surface-raised)}.portal-nav{border-color:var(--border);background:var(--surface)}.portal-nav-btn{color:var(--text-secondary)}.portal-nav-btn:hover{background:var(--surface-hover);color:var(--text-primary)}.portal-nav-btn.active{background:var(--surface-active);color:var(--blue);box-shadow:none}.portal-heading{align-items:flex-end;margin-bottom:20px}.portal-heading h1{font-size:23px}.fuso-note{font:11px Jakarta,sans-serif}.portal-metric-strip{grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:20px}.portal-metric.highlighted{background:var(--surface)}.metric-val strong{font:650 21px Jakarta,sans-serif;letter-spacing:-.4px;color:var(--text-primary)}.metric-unit,.metric-denom{color:var(--text-muted)}.metric-tag{font:600 10px Jakarta,sans-serif;background:var(--surface-raised);color:var(--text-muted)}
.portal-toolbar{justify-content:flex-start;margin-bottom:12px;padding:8px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);flex-wrap:wrap}.portal-search-wrap{min-width:280px;max-width:420px}.portal-chips-group{gap:4px}.portal-chip{height:32px;padding:0 9px;border-color:transparent;border-radius:var(--radius-md);background:transparent;color:var(--text-secondary)}.portal-chip:hover{border-color:transparent;background:var(--surface-hover);color:var(--text-primary)}.portal-chip.active{border-color:var(--status-info-border);background:var(--surface-active);color:var(--blue);box-shadow:none}.portal-sort-wrap{margin-left:auto}.portal-sort-select{height:34px;min-height:34px;margin:0;border-color:var(--border)}.portal-table-wrap{border-color:var(--border);border-radius:var(--radius-lg);background:var(--surface)}table.portal-table{min-width:1020px}.portal-table thead{position:sticky;top:0;z-index:2}.portal-table th{height:38px;padding:0 12px;font:600 11px Jakarta,sans-serif;letter-spacing:0;text-transform:none}.portal-table td{height:48px;padding:8px 12px;font-size:12px}.listing-item-info{gap:2px}.listing-title{font-size:12px;font-weight:600}.tag-code{font:500 10px Mono,monospace;background:var(--surface-raised);color:var(--text-secondary)}.price-current,.stock-qty,.sold-qty{color:var(--text-primary)}.sort-button{min-height:38px;width:100%;justify-content:flex-start;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit}.sort-button:hover{background:transparent;color:var(--text-primary)}.sort-button[data-align=right]{justify-content:flex-end}.sort-indicator{width:14px;color:var(--text-disabled)}.sort-button[aria-sort=ascending] .sort-indicator,.sort-button[aria-sort=descending] .sort-indicator{color:var(--blue)}
.portal-table td{height:46px;padding:5px 12px}.listing-item-info{gap:1px;overflow:hidden}.listing-title{display:block;max-width:410px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:17px}.listing-tags{height:17px;flex-wrap:nowrap;overflow:hidden}.listing-tags>*{flex:0 0 auto}.listing-tags .tag-muted:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag-code{padding:0 4px;line-height:15px}.status-cell{gap:1px}.status-cell .badge{align-self:flex-start}.portal-table .badge{min-height:20px;padding-block:1px}
.portal-table td{padding-block:3px}.status-cell small{line-height:15px}.fees-cell{display:block;line-height:16px}.fees-cell>small{display:inline;margin:0}.shipping-est{height:16px;line-height:16px}
@media(max-width:1100px){.client-workspace:not(.portal-app-shell){padding-left:24px;padding-right:24px}.portal-metric-strip{grid-template-columns:repeat(3,1fr)}.portal-metric:nth-child(3){border-right:0}.portal-metric:nth-child(-n+3){border-bottom:1px solid var(--border-subtle)}}
@media(max-width:720px){.brand{font-size:18px}.brand-logo{width:28px;height:28px}.profile-label{display:none}.profile-menu summary{width:34px;padding:2px}.client-workspace:not(.portal-app-shell){padding:20px 12px 40px}.heading{gap:16px}.auth-shell{padding:12px}.auth-card{border-radius:var(--radius-lg)}.auth-form{padding:28px 22px}.portal-header-inner{gap:8px}.portal-heading{align-items:flex-start}.portal-sync-meta{align-items:flex-start}.portal-metric-strip{grid-template-columns:1fr 1fr}.portal-metric,.portal-metric:nth-child(3){border-right:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}.portal-metric:nth-child(even){border-right:0}.portal-metric:nth-last-child(-n+2){border-bottom:0}.portal-toolbar{align-items:stretch}.portal-search-wrap{min-width:100%;max-width:none}.portal-chips-group{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}.portal-sort-wrap{width:100%;margin-left:0}.portal-sort-select{width:100%}.portal-table-wrap .scroll{overflow-x:auto}table.portal-table{min-width:980px}.portal-table-foot{align-items:flex-start}}

/* Operations tower: dense, continuous workspace based on the approved comp. */
.portal-app-shell{background:var(--surface-raised)}
[data-sync-details]{display:none!important}
.portal-sidebar{width:200px;min-width:200px;max-width:200px;background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border)}
.portal-main-area{margin-left:200px;width:calc(100% - 200px);background:var(--surface-raised)}
.portal-app-shell.sidebar-collapsed .portal-main-area,.portal-sidebar.collapsed~.portal-main-area{margin-left:64px;width:calc(100% - 64px)}
.portal-sidebar.collapsed{width:64px;min-width:64px;max-width:64px}
.sidebar-header{height:64px;padding:0 16px;border-bottom-color:var(--sidebar-border)}
.sidebar-body{padding:14px 9px;gap:12px}
.sidebar-section-label{color:var(--text-muted);font-size:9px;letter-spacing:.12em}
.sidebar-nav{gap:2px}
.sidebar-nav-item{min-height:42px;padding:9px 11px;border-radius:4px;color:var(--text-disabled);font-size:13px}
.sidebar-nav-item:hover{background:var(--sidebar-hover);color:var(--sidebar-active-fg)}
.sidebar-nav-item.active{background:var(--sidebar-active-bg);color:var(--sidebar-active-fg)!important;box-shadow:none}
.sidebar-nav-item.active .sidebar-item-label,.sidebar-nav-item.active .sidebar-item-icon{color:var(--sidebar-active-fg)!important}
.sidebar-footer{background:var(--sidebar-bg);border-top-color:var(--sidebar-border)}
.portal-main-content{max-width:none;padding:16px 20px 36px;margin:0}
.portal-heading{align-items:flex-start;margin-bottom:14px}
.portal-heading .eyebrow{font-size:9px;letter-spacing:.13em;color:var(--text-muted)}
.portal-heading h1{margin-top:4px;font-family:Menbere,Jakarta,"Plus Jakarta Sans",sans-serif;font-size:29px;line-height:1.05;font-weight:700;letter-spacing:-.025em;color:var(--text-primary)}
.portal-heading p{margin-top:5px;font-size:12px;line-height:1.45}
.operations-stage{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);margin-bottom:20px;border:1px solid var(--border);border-radius:5px;background:var(--surface);overflow:hidden}
.operations-situation{min-width:0;border-right:1px solid var(--border)}
.operations-stage-heading{height:48px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);color:var(--text-primary)}
.operations-stage-heading>span{font-size:15px;font-weight:800}
.operations-stage-heading>small{font-size:9.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.operations-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px}
.operations-metric{position:relative;min-width:0;min-height:94px;padding:12px;border:1px solid var(--border);border-radius:4px;background:var(--surface-raised)}
.operations-metric:before{content:"−";position:absolute;left:12px;top:12px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--text-muted);color:var(--text-on-accent);font:800 16px/1 Jakarta,sans-serif}
.operations-metric.is-danger:before{content:"!";background:var(--status-danger-dot)}.operations-metric.is-warning:before{content:"!";background:var(--status-attention-dot)}
.operations-metric>span{display:block;margin-left:38px;font-size:12px;font-weight:700;color:var(--text-secondary)}
.operations-metric>strong{display:block;margin:7px 0 2px 38px;font-size:29px;line-height:1.05;color:var(--text-primary);font-variant-numeric:tabular-nums}
.operations-metric>small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;color:var(--text-muted)}
.priority-list{margin:0;padding:6px 8px;display:grid;gap:4px;list-style:none}
.priority-list li{min-height:32px;display:flex;align-items:stretch;border:1px solid var(--border);border-radius:4px;background:var(--surface-raised);overflow:hidden}
.priority-rank{width:34px;display:grid;place-items:center;background:var(--status-attention-bg);color:var(--status-attention-text);font:800 12px/1 Jakarta,sans-serif}
.priority-target{min-width:0;width:100%;display:grid;grid-template-columns:minmax(72px,.5fr) minmax(105px,.8fr) minmax(130px,1.4fr);align-items:center;gap:10px;padding:6px 10px;border:0;background:var(--surface-raised);color:var(--text-primary);text-align:left;cursor:pointer}
.priority-target:hover{background:var(--surface-hover)}
.priority-target strong{font:700 13px/1.2 Mono,monospace}.priority-target span{font-size:11px;font-weight:700}.priority-target small{font-size:10px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.priority-empty{gap:9px;padding:11px 12px;color:var(--text-muted);font-size:11px}
.module-kpi-strip,.portal-metric-strip{margin-bottom:14px;border:1px solid var(--border);border-radius:5px;background:var(--surface);box-shadow:none}
.module-kpi{min-width:0;padding:12px 14px;background:var(--surface);border-right:1px solid var(--border)}
.module-kpi-top{margin-bottom:3px}
.module-kpi-top span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.module-kpi strong{font-size:20px;line-height:1.2;color:var(--text-primary)}
.module-kpi small{font-size:10.5px;color:var(--text-muted)}
.portal-toolbar{min-height:62px;margin:0 0 8px;padding:9px 8px;border:1px solid var(--border);border-radius:5px;background:var(--surface);box-shadow:none}
.portal-search-wrap{flex:0 1 400px;max-width:420px}
.portal-filter-chip,.portal-chip{border-radius:4px}
.portal-filter-chip{min-height:32px;padding:0 10px;border:1px solid transparent;background:transparent;color:var(--text-muted);box-shadow:none}
.portal-filter-chip:hover{border-color:var(--border);background:var(--surface-hover);color:var(--text-primary)}
.portal-filter-chip.active{border-color:var(--status-info-border);background:var(--status-info-bg);color:var(--status-info-text);box-shadow:none}
.portal-filter-chip .chip-count{background:transparent;color:inherit}
.listing-status-wrap{display:none}
.portal-enhanced #portal-tab-listings .portal-chips-group{display:none}
.portal-enhanced .listing-status-wrap{display:block;min-width:150px}
.listing-status-select{width:100%;height:34px;min-height:34px;margin:0}
.portal-sort-select,.portal-search-input{border-radius:4px}
.listing-bulk-action{min-height:44px;margin-left:0;padding:8px 14px;border:0;border-radius:4px;background:var(--blue);color:var(--text-on-accent);font-size:14px;white-space:nowrap}
.listing-bulk-action:hover{background:var(--blue-hover);color:var(--text-on-accent)}
.portal-table-wrap,.cn-table-container{border:1px solid var(--border)!important;border-radius:5px!important;box-shadow:none!important;overflow:hidden}
.portal-table-wrap .scroll{max-height:calc(100vh - 480px);min-height:280px;overflow:auto}
table.portal-table{min-width:1180px;border-collapse:separate;border-spacing:0}
.portal-table thead{top:0}
.portal-table th,.cn-table-head{height:34px!important;padding:0 10px!important;background:var(--table-head)!important;border-bottom:1px solid var(--border)!important;color:var(--text-muted)!important;font:700 10.5px/1.2 Jakarta,"Plus Jakarta Sans",sans-serif!important;letter-spacing:.045em!important;text-transform:uppercase!important;white-space:nowrap}
.portal-table td{height:46px;padding:7px 10px;border-bottom:1px solid var(--border);font-size:12px}



.product-title{font-size:12.5px;font-weight:700;color:var(--text-primary)}
.product-title-btn{min-height:0;padding:0;border:0;background:transparent!important;color:var(--text-primary);box-shadow:none}
.product-title-btn:hover{background:transparent!important}.product-title-btn:hover strong{color:var(--status-info-text)}
.row-expand-btn{width:28px;height:28px;min-height:28px;padding:0;border:1px solid var(--border);border-radius:4px;background:var(--surface);color:var(--status-info-text);box-shadow:none}
.row-expand-btn:hover{background:var(--status-info-bg);color:var(--status-info-text);border-color:var(--status-info-border)}
.tag-code,.tag-sku-sub,.tabular-cell{font-variant-numeric:tabular-nums}
.cn-pagination{min-height:48px;padding:8px 12px;background:var(--surface);border-top:1px solid var(--border)}
.cn-pagination-meta{display:flex;align-items:center;gap:16px;color:var(--text-muted)}
.cn-pagination-size-label{display:flex;align-items:center;gap:7px}
.cn-pagination-size-select{min-height:30px;height:30px;margin:0;padding:4px 26px 4px 8px;border-radius:4px}
.cn-pagination-link{height:30px;border-radius:4px;border-color:var(--border);background:var(--surface);color:var(--text-muted)!important;font-family:Jakarta,"Plus Jakarta Sans",sans-serif}
.cn-pagination-link span,.cn-pagination-link svg{color:inherit;stroke:currentColor}
.cn-pagination-link:hover:not(:disabled){background:var(--status-info-bg);border-color:var(--status-info-border);color:var(--status-info-text)}
.cn-pagination-link:disabled{cursor:not-allowed;opacity:.42}
.portal-drawer-right{border-left:1px solid var(--border-strong);box-shadow:var(--shadow-overlay)}
.channel.surface{border-radius:5px!important;box-shadow:none!important}
.portal-drawer-right .drawer-nav{gap:0;padding:0 14px;background:var(--surface)}
.portal-drawer-right .drawer-tab-btn{min-height:38px;padding:8px 11px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--text-muted);box-shadow:none}
.portal-drawer-right .drawer-tab-btn:hover{background:var(--surface-raised);color:var(--text-primary)}
.portal-drawer-right .drawer-tab-btn.active{border-bottom-color:var(--blue);background:var(--status-info-bg);color:var(--status-info-text)}
@media(max-width:1100px){.portal-sidebar{width:180px;min-width:180px;max-width:180px}.portal-main-area{margin-left:180px;width:calc(100% - 180px)}.portal-main-content{padding:16px}.operations-stage{grid-template-columns:1fr}.operations-situation{border-right:0;border-bottom:1px solid var(--border)}.module-kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.module-kpi:nth-child(2){border-right:0}.module-kpi:nth-child(-n+2){border-bottom:1px solid var(--border)}.portal-table-wrap .scroll{max-height:none}}
@media(max-width:860px){.portal-main-area{margin-left:0;width:100%}.portal-sidebar{width:240px;min-width:240px;max-width:240px}.portal-topbar{height:58px;min-height:58px}.portal-topbar .topbar-hamburger-btn{display:flex}.portal-topbar .topbar-breadcrumbs{padding-bottom:0}.portal-topbar .breadcrumb-page{font-size:18px}.portal-topbar .topbar-breadcrumbs:after{display:none}.portal-topbar .topbar-right{margin-right:0}.portal-main-content{padding:14px 12px 30px}.topbar-channel-selector{display:none!important}.freshness-text{display:none}.portal-heading h1{font-size:24px}.operations-metrics{grid-template-columns:1fr}.operations-metric{min-height:0;border-right:0;border-bottom:1px solid var(--border)}.operations-metric:last-child{border-bottom:0}.priority-target{grid-template-columns:64px 1fr}.priority-target small{display:none}.module-kpi-strip{grid-template-columns:1fr 1fr}.portal-toolbar{border-radius:4px}.listing-bulk-action{width:100%;justify-content:center}.cn-pagination{align-items:flex-start;flex-direction:column}.cn-pagination-content{width:100%;justify-content:space-between}}
.table-pagination{display:flex;align-items:center;gap:6px}.table-pagination label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--text-muted)}.table-pagination select{width:auto;min-height:30px;height:30px;margin:0;padding:4px 24px 4px 8px;font-size:11px}.table-pagination button{width:30px;height:30px;min-height:0;padding:0}.table-pagination>span{min-width:76px;text-align:center}.portal-brand-block .brand span,.portal-chip{white-space:nowrap}.portal-chip{flex:0 0 auto}

/* CSP-safe semantic portal surfaces. These classes replace prior inline layout styles. */
.table-cell-center{text-align:center!important}.table-cell-right{text-align:right!important}.portal-table th.table-expand-column{width:46px;min-width:46px;padding-inline:8px!important}.portal-table th.table-expand-column-narrow{width:38px;min-width:38px}.sku-mlb-badge-group{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.fulfillment-suggestion{color:var(--status-connected-text);font-variant-numeric:tabular-nums}
.table-empty-cell{height:auto!important;padding:0!important}.compact-empty-state{min-height:224px;padding:34px 22px}.compact-empty-state p{max-width:500px;margin:0;font-size:12px;line-height:1.55}.compact-empty-icon{width:42px;height:42px;color:var(--text-muted);background:var(--surface-hover)}.data-unavailable-state{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:14px;min-height:136px;padding:22px 24px;border:1px dashed var(--border-strong)!important;border-radius:5px!important;background:var(--surface-raised)!important;box-shadow:none!important}.data-unavailable-state strong{display:block;margin-bottom:4px;font-size:14px;color:var(--text-primary)}.data-unavailable-state p{max-width:660px;margin:0;font-size:12px;line-height:1.55}.data-unavailable-icon{width:40px;height:40px;background:var(--surface-hover);color:var(--text-muted);font:700 22px/1 Mono,monospace}

.topbar-channel-selector{position:relative;display:flex;align-items:center;min-width:246px}.topbar-channel-selector__status{position:absolute;left:12px;z-index:1;display:grid;place-items:center;pointer-events:none}.topbar-channel-selector__status .status-dot{width:8px;height:8px;box-shadow:0 0 0 3px var(--status-connected-bg)}.channel-select{width:100%;padding:0 34px 0 28px!important;border:1px solid var(--border-strong)!important;border-radius:4px!important;background:var(--surface)!important;font:600 11.5px Jakarta,"Plus Jakarta Sans",sans-serif!important;letter-spacing:0!important;appearance:none}.portal-topbar .topbar-channel-selector>.topbar-channel-selector__chevron{position:absolute;right:10px;display:block;color:var(--text-muted);pointer-events:none}.status-dot.success,.status-dot.warning,.status-dot.danger,.status-dot.info,.status-dot.blue,.status-dot.neutral{background:currentColor;border-color:transparent}.status-dot.success{color:var(--status-connected-text)}.status-dot.warning{color:var(--status-attention-text)}.status-dot.danger{color:var(--status-danger-text)}.status-dot.info,.status-dot.blue{color:var(--blue)}.status-dot.neutral{color:var(--text-muted)}

.portal-heading-spaced{margin-bottom:16px}.dashboard-kpi-strip{grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden}.dashboard-kpi-strip .portal-metric{min-height:111px;padding:13px 14px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.dashboard-kpi-strip .portal-metric:nth-child(4n){border-right:0}.dashboard-kpi-strip .portal-metric:nth-child(n+5){border-bottom:0}.dashboard-kpi-strip .metric-top{display:flex;align-items:center;gap:6px;min-height:18px}.dashboard-kpi-strip .metric-badge{font:700 9px Mono,monospace;color:var(--text-muted)}.dashboard-kpi-strip .metric-val{display:block;margin-top:9px;font-size:21px;line-height:1.1;color:var(--text-primary);font-variant-numeric:tabular-nums}.dashboard-kpi-strip .metric-val small{font-size:11px;color:var(--text-muted)}.dashboard-kpi-strip .metric-sub{display:block;margin-top:6px;font-size:10.5px;line-height:1.3;color:var(--text-muted)}.dashboard-analytics-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:12px;margin-bottom:12px}.dashboard-analytics-grid>.surface{min-width:0;margin:0;padding:15px 16px;border:1px solid var(--border);border-radius:5px;box-shadow:none}.dashboard-chart-card .card-header,.dashboard-channel-summary .card-header,.triage-card .card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.dashboard-chart-card .card-header h3,.dashboard-channel-summary .card-header h3,.triage-card .card-header h3{margin:3px 0 0;font-size:14px;line-height:1.25;color:var(--text-primary)}.dashboard-channel-summary{display:flex;flex-direction:column}.dashboard-channel-body{display:grid;gap:12px;margin-top:18px}.dashboard-channel-body p{margin:0;font-size:12px;line-height:1.55}.dashboard-channel-line{display:flex;align-items:center;gap:8px;min-height:32px;padding:8px 10px;border:1px solid var(--border);border-radius:4px;background:var(--surface-raised);font-size:12px;color:var(--text-primary)}.dashboard-channel-line .status-dot{width:8px;height:8px}.dashboard-channel-future{justify-content:flex-start;color:var(--text-muted)}.dashboard-channel-future small{margin-left:auto;font-size:10px;color:var(--text-muted)}.store-chart-canvas-wrap{min-height:208px}.store-daily-chart #store-daily-chart-canvas{display:none;width:100%!important;height:208px!important}.store-daily-chart.is-chart-ready #store-daily-chart-canvas{display:block}.store-daily-chart.is-chart-ready [data-store-chart-fallback]{display:none}.dashboard-triage-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}.dashboard-triage-grid>.surface{min-width:0;padding:14px;border:1px solid var(--border);border-radius:5px;box-shadow:none}.triage-list{min-height:126px;margin-top:10px}.triage-empty-copy{margin:0;padding:15px 2px;font-size:12px;line-height:1.55}.dashboard-triage-table th.table-cell-right,.dashboard-triage-table td.table-cell-right{text-align:right}.dashboard-triage-table td{vertical-align:middle}.triage-prod-cell{display:flex;min-width:0;flex-direction:column;gap:2px}.triage-prod-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:650;color:var(--text-primary)}.triage-prod-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:10px Mono,monospace;color:var(--text-muted)}

.channel-list-workspace{gap:12px}.channel-card{padding:18px!important;border:1px solid var(--border)!important;background:var(--surface)!important}.channel-card-meli{background:var(--status-attention-bg)!important}.channel-card-coming{border-style:dashed!important;background:var(--surface-raised)!important}.channel-heading-workspace{align-items:flex-start}.channel-name-workspace{gap:12px}.channel-brand-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border-radius:6px}.channel-brand-icon-meli{background:#ffe600}.channel-brand-icon-shopee{background:#ee4d2d}.channel-title{display:flex;align-items:center;gap:7px;margin:0;color:var(--text-primary);font-size:15px;line-height:1.2}.channel-title .status-dot{width:8px;height:8px}.channel-subtitle{margin:4px 0 0;font-size:11.5px;color:var(--text-muted)}.channel-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.channel-actions form{margin:0}.channel-meta-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:18px 0 0;border:1px solid var(--border);border-radius:5px;overflow:hidden}.channel-meta-item{min-width:0;padding:12px;border-right:1px solid var(--border);background:var(--surface-raised)}.channel-meta-item:last-child{border-right:0}.channel-meta-item dt{margin:0;font-size:9.5px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;color:var(--text-muted)}.channel-meta-item dd{margin:5px 0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:750;color:var(--text-primary);font-variant-numeric:tabular-nums}.channel-meta-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:var(--text-muted)}.channel-domain-section{margin-top:16px;padding-top:15px;border-top:1px solid var(--border)}.channel-domain-section h4{margin:0 0 10px;font-size:10px;font-weight:750;letter-spacing:.065em;text-transform:uppercase;color:var(--text-muted)}.channel-domain-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.channel-domain-card{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:10px 11px;border:1px solid var(--border);border-radius:4px;background:var(--surface-raised)}.channel-domain-card>div:first-child{min-width:0}.channel-domain-card strong,.channel-domain-card span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.channel-domain-card strong{font-size:11px;color:var(--text-secondary)}.channel-domain-card>div:first-child>span{margin-top:2px;font-size:10px;color:var(--text-muted)}.channel-domain-status{display:flex;align-items:flex-end;flex-direction:column;gap:3px;flex:0 0 auto}.channel-domain-status time{font:10px Mono,monospace;color:var(--text-muted)}.channel-action-disabled{cursor:not-allowed;opacity:.52}

.drawer-info-item-wide{grid-column:1/-1}.drawer-section-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.drawer-section-title-reset{margin:0}.drawer-financial-note{margin:-3px 0 13px;font-size:11px;line-height:1.5}.drawer-form-actions{align-items:center}.drawer-save-feedback{min-height:18px}.drawer-history-empty{margin:0;font-size:11.5px;line-height:1.5}.bulk-costs-step{padding:15px 0;border-bottom:1px solid var(--border)}.bulk-costs-step:first-child{padding-top:0}.bulk-costs-step-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.bulk-step-heading{display:grid;gap:4px}.bulk-step-title{font-size:12.5px;color:var(--text-primary)}.bulk-step-copy{font-size:11px;line-height:1.45}.bulk-download-button{flex:0 0 auto}.costs-upload-zone{display:flex;min-height:124px;align-items:center;justify-content:center;flex-direction:column;gap:5px;margin-top:12px;padding:16px;border:1px dashed var(--border-strong);border-radius:5px;background:var(--surface-raised);color:var(--text-muted);cursor:pointer;transition:border-color .16s ease,background .16s ease}.costs-upload-zone:hover,.costs-upload-zone.is-dragging{border-color:var(--blue);background:var(--status-info-bg)}.costs-upload-icon{font-size:23px;line-height:1}.costs-upload-title{font-size:12px;color:var(--text-secondary)}.costs-upload-copy{font-size:10.5px}.costs-file-preview{margin-top:10px;padding:10px 11px;border:1px solid var(--border-strong);border-radius:4px;background:var(--surface-hover);color:var(--status-connected-text)}.costs-file-preview-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px}.costs-file-clear{min-height:0;padding:0;color:var(--status-connected-text);font-size:11px;text-decoration:underline}.bulk-direct-edit{margin-top:15px;border:1px solid var(--border);border-radius:5px;background:var(--surface)}.bulk-direct-edit>summary{padding:11px 12px;cursor:pointer;font-size:11.5px;font-weight:650;color:var(--text-secondary)}.bulk-direct-edit[open]>summary{border-bottom:1px solid var(--border)}.bulk-edit-scroll{max-height:280px;min-height:0;overflow:auto}.bulk-cost-column,.bulk-tax-column{text-align:right!important}.bulk-sheet-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.bulk-costs-sheet[hidden],.bulk-sheet-backdrop[hidden],.costs-file-preview[hidden],.costs-upload-zone[hidden]{display:none!important}
.portal-floating-toast.is-leaving{opacity:0;transform:translate(-50%,-10px)}.otp-digit.is-valid{border-color:var(--status-connected-dot)!important;background:var(--surface-hover)!important;box-shadow:0 0 0 3px var(--status-connected-bg)!important}.otp-digit.is-invalid{border-color:var(--status-danger-dot)!important;background:var(--status-danger-bg)!important;box-shadow:0 0 0 3px var(--status-danger-bg)!important}.otp-feedback[hidden]{display:none!important}.otp-feedback{width:min(100%,420px);margin:0 auto 14px;border:1px solid transparent;border-radius:6px;font-size:12px;text-align:left}.otp-feedback__content{display:grid;gap:3px;padding:10px 12px}.otp-feedback__message{font-size:12px}.otp-feedback__detail{font-size:11px;line-height:1.45}.otp-feedback.is-success{border-color:var(--status-connected-border);background:var(--surface-hover);color:var(--status-connected-text)}.otp-feedback.is-error{border-color:var(--status-danger-border);background:var(--status-danger-bg);color:var(--status-danger-text)}.resend-code.is-visible{display:flex;justify-content:center;margin-top:12px}.drawer-diarization-unavailable{margin:0;padding:12px;border:1px dashed var(--border-strong);border-radius:4px;background:var(--surface-raised);font-size:11.5px;line-height:1.5}.diarization-current-value,.diarization-total-current{color:var(--status-info-text);font-variant-numeric:tabular-nums}.drawer-diarization-chart{height:196px;margin-bottom:12px;border:1px solid var(--border);background:var(--surface-raised)}.drawer-diarization-table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:4px}.drawer-diarization-table-scroll .diarization-table{min-width:520px;margin:0}.drawer-diarization-table-scroll .diarization-table th{background:var(--table-head)}.diarization-total-row td{border-top:1px solid var(--border-strong)!important;background:var(--surface-raised);font-weight:700}.history-notes{margin-top:4px;max-width:300px;font-size:10.5px;line-height:1.4;color:var(--text-muted)}.drawer-mlb-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:4px;font-size:10px;color:var(--text-muted)}.drawer-mlb-financial{display:flex;min-width:110px;align-items:flex-end;flex-direction:column;gap:3px;text-align:right;font-variant-numeric:tabular-nums}.drawer-mlb-financial-meta{font-size:10px;line-height:1.35;color:var(--text-muted)}.drawer-mlb-financial-meta--success{color:var(--status-connected-text);font-weight:700}.drawer-mlb-financial-meta--danger{color:var(--status-danger-text);font-weight:700}.drawer-pane-empty{margin:0;padding:12px;border:1px dashed var(--border-strong);border-radius:4px;background:var(--surface-raised);font-size:11.5px;line-height:1.5}[data-drawer-save-feedback].is-success{color:var(--status-connected-text)}[data-drawer-save-feedback].is-error{color:var(--status-danger-text)}

.store-bar-fill.bar-h-0{height:0}.store-bar-fill.bar-h-5{height:5%}.store-bar-fill.bar-h-10{height:10%}.store-bar-fill.bar-h-15{height:15%}.store-bar-fill.bar-h-20{height:20%}.store-bar-fill.bar-h-25{height:25%}.store-bar-fill.bar-h-30{height:30%}.store-bar-fill.bar-h-35{height:35%}.store-bar-fill.bar-h-40{height:40%}.store-bar-fill.bar-h-45{height:45%}.store-bar-fill.bar-h-50{height:50%}.store-bar-fill.bar-h-55{height:55%}.store-bar-fill.bar-h-60{height:60%}.store-bar-fill.bar-h-65{height:65%}.store-bar-fill.bar-h-70{height:70%}.store-bar-fill.bar-h-75{height:75%}.store-bar-fill.bar-h-80{height:80%}.store-bar-fill.bar-h-85{height:85%}.store-bar-fill.bar-h-90{height:90%}.store-bar-fill.bar-h-95{height:95%}.store-bar-fill.bar-h-100{height:100%}

#portal-tab-promocoes .portal-table-wrap .scroll,#portal-tab-devolucoes .portal-table-wrap .scroll,#portal-tab-fulfillment .portal-table-wrap .scroll{min-height:0;max-height:none}
@media(max-width:1100px){.dashboard-kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-kpi-strip .portal-metric:nth-child(4n){border-right:1px solid var(--border)}.dashboard-kpi-strip .portal-metric:nth-child(2n){border-right:0}.dashboard-kpi-strip .portal-metric:nth-child(n+5){border-bottom:1px solid var(--border)}.dashboard-kpi-strip .portal-metric:nth-child(n+7){border-bottom:0}.dashboard-analytics-grid{grid-template-columns:1fr}.dashboard-triage-grid{grid-template-columns:1fr}.channel-meta-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.channel-meta-item:nth-child(3){border-right:0}.channel-meta-item:nth-child(n+4){border-top:1px solid var(--border)}}
@media(max-width:860px){.freshness-copy{display:none}.data-unavailable-state{grid-template-columns:1fr;gap:10px;padding:18px}.data-unavailable-icon{width:36px;height:36px}.dashboard-kpi-strip{grid-template-columns:1fr}.dashboard-kpi-strip .portal-metric,.dashboard-kpi-strip .portal-metric:nth-child(4n){border-right:0}.dashboard-kpi-strip .portal-metric:nth-child(n+1){border-bottom:1px solid var(--border)}.dashboard-kpi-strip .portal-metric:last-child{border-bottom:0}.dashboard-analytics-grid>.surface,.dashboard-triage-grid>.surface{padding:13px}.channel-card{padding:14px!important}.channel-heading-workspace{gap:12px;flex-direction:column}.channel-actions{width:100%;justify-content:flex-start}.channel-meta-grid{grid-template-columns:1fr 1fr}.channel-meta-item{border-bottom:1px solid var(--border)}.channel-meta-item:nth-child(odd){border-right:1px solid var(--border)}.channel-meta-item:nth-child(even){border-right:0}.channel-meta-item:last-child{grid-column:1/-1;border-bottom:0}.channel-domain-grid{grid-template-columns:1fr}.portal-toolbar{min-height:0;gap:8px}.portal-search-wrap{flex:0 0 auto;min-width:0;max-width:none;width:100%}.listing-status-wrap,.portal-sort-wrap{width:100%;margin-left:0}.listing-status-wrap .portal-sort-select,.portal-sort-wrap .portal-sort-select{width:100%}.listing-bulk-action{width:100%;justify-content:center}.drawer-section-header,.bulk-costs-step-row,.costs-file-preview-row{align-items:flex-start;flex-direction:column}.bulk-download-button{width:100%;justify-content:center}.bulk-sheet-actions{width:100%;justify-content:stretch}.bulk-sheet-actions .button{flex:1}.bulk-sheet-body{padding:15px}.bulk-sheet-header,.bulk-sheet-footer{padding-inline:15px}}
@media(max-width:860px){.portal-drawer-right{width:100vw;max-width:100vw}.portal-drawer-right .drawer-nav{padding-inline:8px}.portal-drawer-right .drawer-body{padding:16px 14px 28px}.portal-floating-toast{top:auto;bottom:16px;width:calc(100vw - 28px);max-width:360px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

}
@layer theme {
/* Olhometro theme layer — shared component refinements for the light, dark and system color schemes.
   Composed twice by panelCss (src/panel-view.mjs): in `theme-important` (so its !important declarations win over every
   other layer) and in `theme` (last layer, so its normal declarations win). Color values live only in tokens.css.
   Selection: <html data-theme="light|dark|system">; "system" (or no attribute) follows prefers-color-scheme. */

html, body { background: var(--canvas); color: var(--text-primary); }
/* ---------- Sortable tables ---------- */
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort] .th-sort { display: inline-flex; align-items: center; gap: 6px; }
th[data-sort] .sort-icon { width: 12px; height: 12px; opacity: .35; transition: opacity .15s, transform .15s; }
th[data-sort]:hover .sort-icon { opacity: .7; }
th[aria-sort="ascending"] .sort-icon, th[aria-sort="descending"] .sort-icon { opacity: 1; color: var(--blue); }
th[aria-sort="descending"] .sort-icon { transform: rotate(180deg); }
th[data-sort]:hover { color: var(--text-primary) !important; }
.data-table-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12.5px; background: var(--surface-raised); }
.data-table-pager .pager-buttons { display: flex; gap: 6px; }
.data-table-pager[hidden] { display: none; }
/* ---------- Admin header ---------- */
.brand { color: var(--text-primary); }
.brand-dot { color: var(--blue); }

/* ---------- Dropdowns (Floating UI via /assets/ui.js) ---------- */
.ui-menu {
  position: fixed; top: 0; left: 0; z-index: 100000; min-width: 232px; max-width: min(320px, calc(100vw - 16px)); padding: 6px;
  background: var(--surface-overlay); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-popover);
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top; transition: opacity .12s ease, transform .12s ease; pointer-events: none;
}
.ui-menu[data-open] { opacity: 1; transform: none; pointer-events: auto; }
.ui-menu[hidden] { display: none; }
.ui-menu-header { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border-subtle); }
.ui-menu-header strong { display: block; font-size: 13px; color: var(--text-primary); }
.ui-menu-header small { display: block; font-size: 12px; color: var(--text-muted); }
.ui-menu-label { padding: 8px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.ui-menu-item, .ui-menu form > button {
  display: flex; width: 100%; align-items: center; gap: 10px; min-height: 34px; padding: 6px 8px; border: 0; border-radius: var(--radius-sm);
  background: transparent; box-shadow: none; color: var(--text-secondary); font: 500 13px/1.3 var(--font-sans); text-align: left; text-decoration: none; cursor: pointer;
}
.ui-menu-item:hover, .ui-menu-item:focus-visible, .ui-menu form > button:hover, .ui-menu form > button:focus-visible { background: var(--surface-hover); color: var(--text-primary); outline: none; }
.ui-menu-item svg, .ui-menu form > button svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.ui-menu-item.danger, .ui-menu form > button.danger { color: var(--status-danger-text); }
.ui-menu-item.danger svg, .ui-menu form > button.danger svg { color: currentColor; }
.ui-menu-separator { height: 1px; margin: 4px 2px; background: var(--border-subtle); }
.ui-menu form { margin: 0; }

/* Theme switch (segmented) */
.theme-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 2px 2px 4px; padding: 3px; background: var(--surface-hover); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.theme-switch button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 4px 6px; border: 0; border-radius: var(--radius-sm);
  background: transparent; box-shadow: none; color: var(--text-muted); font: 550 12px/1 var(--font-sans);
}
.theme-switch button svg { width: 14px; height: 14px; }
.theme-switch button:hover { background: transparent; color: var(--text-primary); }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }

.profile-trigger {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; min-height: 36px; padding: 3px 10px 3px 4px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-xs); font: 600 13px/1 var(--font-sans);
}
.profile-trigger:hover { background: var(--surface-hover); color: var(--text-primary); }
.profile-trigger .chevron { width: 14px; height: 14px; color: var(--text-muted); transition: transform .15s; }
.profile-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.avatar-chip { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-light); color: var(--status-info-text); font: 700 11.5px/1 var(--font-sans); text-transform: uppercase; overflow: hidden; }
.avatar-chip img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- MCP integration, copy fields ---------- */
.copy-field { display: flex; gap: 8px; align-items: stretch; }
.copy-field input { flex: 1; min-width: 0; margin: 0; font-family: var(--font-mono); font-size: 12.5px; }
.copy-field button { flex: none; margin: 0; }
.copy-field button svg { width: 15px; height: 15px; }

/* MCP integration block */
.mcp-hero { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--status-info-border); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--status-info-bg), var(--surface) 160%); }
.mcp-hero h3 { margin: 8px 0 4px; }
.mcp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.mcp-steps .channel { display: grid; gap: 10px; align-content: start; padding: 16px; }
.mcp-steps .channel h3 { margin: 0; }
.steps-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text-secondary); }
.example-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.example-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 9px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-secondary); }
.legacy-keys { padding: 14px 16px; border: 1px solid var(--status-attention-border); border-radius: var(--radius-lg); background: var(--status-attention-bg); }
.legacy-keys h3 { color: var(--status-attention-text); margin: 0 0 4px; }
.legacy-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.legacy-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sync-card .channel-heading { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.sync-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0; }
.sync-facts div { padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); }
.sync-facts dt { font-size: 11.5px; color: var(--text-muted); }
.sync-facts dd { margin: 4px 0 0; font-weight: 600; color: var(--text-primary); }

/* ---------- Client portal shell ---------- */
.portal-app-shell, .portal-main-area { background: var(--canvas) !important; }
.portal-sidebar { background: var(--sidebar-bg) !important; border-right: 1px solid var(--sidebar-border) !important; }
.sidebar-header { border-bottom: 1px solid var(--sidebar-border) !important; }
.sidebar-brand, .sidebar-brand-text { color: var(--text-primary) !important; }
.sidebar-section-label { color: var(--sidebar-muted) !important; font-size: 10.5px !important; letter-spacing: .06em !important; font-weight: 600; }
.sidebar-nav-item { min-height: 38px !important; border-radius: var(--radius-md) !important; color: var(--sidebar-fg) !important; font-weight: 550; box-shadow: none !important; }
.sidebar-nav-item .sidebar-item-icon, .sidebar-nav-item .sidebar-item-label { color: inherit !important; }
.sidebar-nav-item .sidebar-item-icon { color: var(--sidebar-muted) !important; }
.sidebar-nav-item:hover { background: var(--sidebar-hover) !important; color: var(--text-primary) !important; }
.sidebar-nav-item.active { background: var(--sidebar-active-bg) !important; color: var(--sidebar-active-fg) !important; box-shadow: none !important; }
.sidebar-nav-item.active .sidebar-item-icon, .sidebar-nav-item.active .sidebar-item-label { color: var(--sidebar-active-fg) !important; }
.sidebar-badge { background: var(--surface-hover) !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; border-radius: 999px !important; font-weight: 600; }
.sidebar-nav-item.active .sidebar-badge { background: var(--surface) !important; color: var(--sidebar-active-fg) !important; border-color: var(--status-info-border) !important; }
.sidebar-footer { background: transparent !important; border-top: 1px solid var(--sidebar-border) !important; }
.sidebar-profile-trigger {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; box-shadow: none; color: var(--text-primary); text-align: left;
}
.sidebar-profile-trigger:hover, .sidebar-profile-trigger[aria-expanded="true"] { background: var(--sidebar-hover); color: var(--text-primary); }
.sidebar-profile-trigger .sidebar-profile-info { min-width: 0; flex: 1; display: grid; gap: 2px; }
.sidebar-profile-trigger .sidebar-profile-name { font-weight: 650; font-size: 13px; color: var(--text-primary) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-profile-trigger .sidebar-profile-channel { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--sidebar-muted) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-profile-trigger .chevron { width: 15px; height: 15px; color: var(--sidebar-muted); flex: none; }
.portal-sidebar.collapsed .sidebar-profile-trigger .sidebar-profile-info, .portal-sidebar.collapsed .sidebar-profile-trigger .chevron { display: none; }
.cn-avatar { background: var(--blue-light); color: var(--status-info-text); border-color: var(--border) !important; }
.cn-avatar-fallback { color: var(--status-info-text) !important; background: var(--blue-light) !important; }

.portal-topbar { background: color-mix(in srgb, var(--surface) 90%, transparent) !important; backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border) !important; }

.portal-metric-strip, .dashboard-kpi-strip, .module-kpi-strip, .dashboard-chart-card, .triage-card, .operations-situation, .operations-priorities, .portal-toolbar, .portal-table-wrap, .cn-table-container, .channel-card {
  background: var(--surface) !important; border-color: var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-xs);
}
.portal-metric, .module-kpi, .operations-metric { border-color: var(--border-subtle) !important; }
.metric-val, .portal-metric strong { color: var(--text-primary) !important; letter-spacing: -.02em; }
.cn-pagination { border-top: 1px solid var(--border) !important; background: var(--surface-raised) !important; }
.cn-pagination-link { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text-secondary) !important; box-shadow: none !important; }
.cn-pagination-link:hover:not([disabled]) { background: var(--surface-hover) !important; color: var(--text-primary) !important; }
.portal-drawer-right { background: var(--surface) !important; border-left: 1px solid var(--border) !important; box-shadow: var(--shadow-overlay) !important; color: var(--text-primary); }
.drawer-header, .drawer-nav { background: var(--surface) !important; border-color: var(--border) !important; }
.drawer-tab-btn { background: transparent !important; color: var(--text-muted) !important; box-shadow: none !important; border: 0 !important; }
.drawer-tab-btn:hover { color: var(--text-primary) !important; background: var(--surface-hover) !important; }
.drawer-tab-btn.active { color: var(--blue) !important; box-shadow: inset 0 -2px 0 var(--blue) !important; }
.drawer-backdrop, .sidebar-backdrop { background: var(--backdrop) !important; }

/* Cost button in listings table: compact, outlined instead of a filled block */
.col-cost button, .col-cost .button { min-height: 28px !important; height: 28px; padding: 0 10px !important; background: var(--surface) !important; color: var(--blue) !important; border: 1px dashed var(--status-info-border) !important; box-shadow: none !important; font-size: 12px !important; border-radius: var(--radius-sm) !important; white-space: nowrap; }
.col-cost button:hover, .col-cost .button:hover { background: var(--status-info-bg) !important; }

/* Mobile */
@media (max-width: 860px) {
  .copy-field { flex-direction: column; }
  .mcp-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Sortable header button reset */
th .th-sort { all: unset; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: inherit; font: inherit; letter-spacing: inherit; border-radius: var(--radius-xs); }
th .th-sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Floating theme switch on standalone pages (login, invite, OAuth) */
.page-theme-switch { position: fixed; top: 14px; right: 14px; z-index: 50; margin: 0; background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); }
.page-theme-switch button span { display: none; }
.page-theme-switch button { min-width: 30px; }

/* Admin profile trigger: the chevron is an SVG now */
.profile-trigger .profile-label::after { content: none !important; }
.profile-trigger .profile-label { font-size: 13px; }
.ui-menu form > button { justify-content: flex-start !important; width: 100% !important; margin: 0 !important; }
.ui-menu a.ui-menu-item { justify-content: flex-start; }
@media (max-width: 720px) { .profile-trigger .profile-label { display: none; } .profile-trigger { padding: 3px 6px 3px 4px; } }

/* Monetary and quantity values: tabular figures of the UI font (monospace stays for SKU/MLB identifiers) */
.price-current, .price-regular, .stock-num, .sales-num, .net-payout, .stock-qty, .sold-qty, .sales-total-val, .metric-val, .stat-line-val, .dre-val, .promo-price-block, .promo-price-block del { font-family: var(--font-sans) !important; font-variant-numeric: tabular-nums; letter-spacing: -.005em; }

/* Topbar pills and drawer close */
.drawer-close-btn { background: transparent !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; box-shadow: none !important; }
.drawer-close-btn:hover { background: var(--surface-hover) !important; color: var(--text-primary) !important; }

/* Compact admin header on phones */
@media (max-width: 520px) {
  .profile-trigger .chevron { display: none; }
  .profile-trigger { padding: 3px !important; }
}
@media (max-width: 860px) {
  .topbar-hamburger-btn { background: var(--surface) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; box-shadow: none !important; }
}

/* Company modal: shrink to content (legacy height:auto + UA insets stretched it) and never let anchors/focus
   scroll the dialog box itself — only .modal-scroll scrolls, so the header with the X stays visible. */

/* Header actions: icon-only theme picker next to the profile */
.theme-picker { display: inline-flex; }
.theme-trigger {
  display: inline-grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0 !important; border: 1px solid var(--border) !important;
  border-radius: 999px !important; background: var(--surface) !important; color: var(--text-secondary) !important; box-shadow: var(--shadow-xs) !important;
}
.theme-trigger:hover, .theme-trigger[aria-expanded="true"] { background: var(--surface-hover) !important; color: var(--text-primary) !important; }
.theme-trigger svg { width: 17px; height: 17px; }
.theme-icon { display: none; }
:root[data-theme="light"] .theme-icon-light, :root[data-theme="dark"] .theme-icon-dark,
:root[data-theme="system"] .theme-icon-system, :root:not([data-theme]) .theme-icon-system { display: inline-grid; }
.theme-menu { min-width: 176px; }
.theme-menu .ui-menu-item { justify-content: flex-start; }
.theme-menu .ui-menu-item .check { margin-left: auto; width: 15px; height: 15px; color: var(--blue); visibility: hidden; }
.theme-menu .ui-menu-item[aria-checked="true"] { color: var(--text-primary); }
.theme-menu .ui-menu-item[aria-checked="true"] .check { visibility: visible; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

/* Company sync status line */

/* Channel brand logos */
.channel-icon-logo, .channel-brand-icon { display: inline-grid !important; place-items: center; width: auto !important; height: auto !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.channel-logo { display: block; border-radius: 10px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 8%, transparent); }

.mcp-hero .copy-field { margin-top: 4px; }

/* ---------- Client invite flow (/convite -> código -> canais) ---------- */
.client-main.client-main-flow { width: min(460px, calc(100vw - 32px)) !important; max-width: none !important; margin: 56px auto 40px !important; padding: 28px 28px 24px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-sm) !important; text-align: left !important; }
.client-main-flow > .brand { justify-content: flex-start !important; margin: 0 0 20px !important; font-size: 18px !important; }
.client-main-flow > .brand .brand-logo { width: 28px !important; height: 28px !important; }
.invite-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; text-align: left; }
.invite-flow > *, .invite-flow #otp-form > * { min-width: 0; }
.invite-steps { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.invite-steps li { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.invite-steps li + li::before { content: ""; width: 18px; height: 1px; background: var(--border-strong); margin-right: 2px; }
.invite-step-dot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); font-size: 11px; font-weight: 700; }
.invite-step-dot svg { width: 12px; height: 12px; }
.invite-steps li.is-current { color: var(--text-primary); }
.invite-steps li.is-current .invite-step-dot { background: var(--blue); border-color: var(--blue); color: var(--text-on-accent); }
.invite-steps li.is-done { color: var(--status-connected-text); }
.invite-steps li.is-done .invite-step-dot { background: var(--status-connected-bg); border-color: var(--status-connected-border); color: var(--status-connected-text); }
/* In-place transition after portal.js sends the code (step 1 -> step 2) */
.invite-flow:has(#otp-form[data-is-sent="true"]) .invite-steps li[data-step="1"] { color: var(--status-connected-text); }
.invite-flow:has(#otp-form[data-is-sent="true"]) .invite-steps li[data-step="1"] .invite-step-dot { background: var(--status-connected-bg); border-color: var(--status-connected-border); color: var(--status-connected-text); font-size: 0; }
.invite-flow:has(#otp-form[data-is-sent="true"]) .invite-steps li[data-step="1"] .invite-step-dot::before { content: "\2713"; font-size: 11px; }
.invite-flow:has(#otp-form[data-is-sent="true"]) .invite-steps li[data-step="2"] { color: var(--text-primary); }
.invite-flow:has(#otp-form[data-is-sent="true"]) .invite-steps li[data-step="2"] .invite-step-dot { background: var(--blue); border-color: var(--blue); color: var(--text-on-accent); }
.when-sent { display: none; }
.invite-flow:has(#otp-form[data-is-sent="true"]) .when-sent { display: inline; }
.invite-flow:has(#otp-form[data-is-sent="true"]) .when-idle { display: none; }
#otp-form[data-is-sent="false"] .otp-field-container, #otp-form[data-is-sent="false"] .otp-expiry { display: none !important; }

.invite-company { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); }
.invite-company-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: none; overflow: hidden; border-radius: 10px; background: var(--blue-light); color: var(--status-info-text); font-weight: 700; font-size: 14px; }
.invite-company-mark img { width: 100%; height: 100%; object-fit: cover; }
.invite-company small { display: block; font-size: 11.5px; color: var(--text-muted); }
.invite-company strong { display: block; font-size: 15px; color: var(--text-primary); }
.invite-title { margin: 4px 0 0 !important; font-size: 22px !important; line-height: 1.25; letter-spacing: -.02em; text-align: left !important; }
.invite-lead { margin: -8px 0 0 !important; color: var(--text-secondary) !important; font-size: 14px; text-align: left !important; }
.invite-email { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--status-info-border); border-radius: var(--radius-md); background: var(--status-info-bg); color: var(--status-info-text); }
.invite-email svg { width: 18px; height: 18px; flex: none; }
.invite-email strong { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; color: var(--status-info-text); }
.invite-flow #otp-form { display: grid; gap: 12px; margin: 0 !important; }
.invite-flow .otp-field-container { margin: 0 !important; text-align: left; }
.invite-flow .otp-field-label { display: flex; justify-content: flex-start; margin-bottom: 8px !important; text-align: left !important; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.invite-flow .otp-group { display: flex !important; width: 100% !important; justify-content: space-between !important; max-width: none !important; margin: 0 !important; gap: 8px !important; }
.invite-flow .otp-digit { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: 56px !important; height: 54px !important; border-radius: var(--radius-md) !important; border: 1px solid var(--border-strong) !important; background: var(--surface) !important; color: var(--text-primary) !important; font: 700 22px/54px var(--font-sans) !important; box-shadow: var(--shadow-xs) !important; }
.invite-flow .otp-digit:focus { border-color: var(--border-focus) !important; box-shadow: var(--focus-ring) !important; }
.invite-flow .otp-expiry { margin: 0 !important; font-size: 12.5px; color: var(--text-muted); text-align: left !important; }
.invite-flow .otp-submit-wrap { margin: 0 !important; }
.invite-flow .verification-primary, .invite-flow .button.verification-primary {
  display: flex !important; width: 100% !important; max-width: none !important; min-height: 44px !important; justify-content: center; align-items: center; gap: 8px; margin: 0 !important;
  background: var(--blue) !important; color: var(--text-on-accent) !important; border: 0 !important; border-radius: var(--radius-md) !important; font: 650 14px/1 var(--font-sans) !important; box-shadow: var(--shadow-xs) !important; text-decoration: none;
}
.invite-flow .verification-primary:hover { background: var(--blue-hover) !important; }
.invite-flow .verification-primary:disabled { background: color-mix(in srgb, var(--blue) 45%, var(--surface)) !important; color: color-mix(in srgb, var(--text-on-accent) 85%, transparent) !important; opacity: 1 !important; cursor: not-allowed; }
.invite-flow .verification-notice, .invite-flow .otp-feedback:not([hidden]) { margin: 0 !important; padding: 10px 12px !important; border-radius: var(--radius-md) !important; font-size: 13px !important; text-align: left !important; }
.invite-flow .resend-code { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin: -4px 0 0 !important; font-size: 13px; color: var(--text-muted); }
.invite-flow .resend-code[hidden] { display: none !important; }
.invite-flow .resend-otp-btn { min-height: 0 !important; padding: 2px 4px !important; background: none !important; border: 0 !important; box-shadow: none !important; color: var(--blue) !important; font-weight: 600 !important; font-size: 13px !important; }
.invite-flow .resend-otp-btn:disabled { color: var(--text-muted) !important; }
.invite-footnote { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0 !important; padding-top: 14px; border-top: 1px solid var(--border-subtle); font-size: 12px; color: var(--text-muted) !important; text-align: left !important; }
.invite-footnote svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

.invite-channels { display: grid; gap: 10px; }
.invite-channel { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.invite-channel.is-connected { border-color: var(--status-connected-border); }
.invite-channel.is-coming { background: var(--surface-raised); }
.invite-channel.is-coming .channel-logo { filter: saturate(.7); opacity: .85; }
.invite-channel-head { display: flex; align-items: center; gap: 12px; }
.invite-channel-head > div { flex: 1; min-width: 0; }
.invite-channel-head h2 { margin: 0; font-size: 15px; }
.invite-channel-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-channel-note { margin: 0 !important; font-size: 13px; color: var(--text-secondary); }
.invite-channel-meta { margin: 0 !important; font-size: 12px; color: var(--text-muted); }
.invite-channel form { margin: 0; }
.invite-flow .connection-refresh { justify-self: center; min-height: 36px; }

.invite-outcome { display: grid; justify-items: center; gap: 14px; text-align: center; }
.invite-outcome-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--status-connected-bg); color: var(--status-connected-text); }
.invite-outcome.error .invite-outcome-icon { background: var(--status-danger-bg); color: var(--status-danger-text); }
.invite-outcome-icon svg { width: 24px; height: 24px; }

@media (max-width: 520px) {
  .page-theme-switch { position: static; justify-self: end; width: max-content; margin: 12px 16px 0 auto; display: grid; }
  .client-main.client-main-flow { margin: 12px auto 24px !important; padding: 22px 18px 18px !important; }
  .invite-steps { gap: 6px; }
  .invite-steps li + li::before { width: 10px; }
  .invite-step-label { font-size: 11.5px; }
  .invite-flow .otp-group { gap: 6px !important; }
  .invite-flow .otp-digit { height: 50px !important; font-size: 20px !important; line-height: 50px !important; }
  .invite-channel-head .badge { display: none; }
}
.invite-flow .otp-field-container { display: block !important; text-align: left !important; align-items: stretch !important; }
/* Invite flow: centered brand and step indicator */
.client-main-flow > .brand { justify-content: center !important; }
.invite-steps { justify-content: center; }
/* Login: password visibility toggle as a bare icon (follows the theme text color) */
.password-wrap .password-toggle { width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--text-muted) !important; border-radius: var(--radius-sm) !important; }
.password-wrap .password-toggle:hover, .password-wrap .password-toggle[aria-pressed="true"] { background: transparent !important; color: var(--text-primary) !important; }
.password-wrap .password-toggle:focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 1px; }
.auth-form > .auth-brand { margin-bottom: 20px !important; }

/* ---------- Client MCP: admin switch, portal card, consent chooser ---------- */
.mcp-client-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.mcp-client-toggle h3 { margin: 0 0 2px; }
.mcp-client-toggle .form-note { margin: 0; }
.switch { position: relative; flex: none; width: 44px !important; height: 24px !important; min-height: 24px !important; padding: 0 !important; border-radius: 999px !important; border: 1px solid var(--border-strong) !important; background: var(--surface-active) !important; box-shadow: none !important; cursor: pointer; }
.switch[aria-checked="true"] { background: var(--blue) !important; border-color: var(--blue) !important; }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-on-accent); box-shadow: var(--shadow-xs); transition: transform .15s ease; }
.switch[aria-checked="true"] .switch-thumb { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 2px; }

.client-mcp-card { display: grid; gap: 14px; margin-top: 20px; padding: 20px !important; }
.client-mcp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.client-mcp-head h2 { margin: 4px 0 2px; }
.client-mcp-head p { margin: 0; }
.client-mcp-card .steps-list { margin: 0; }
.client-mcp-card h3 { margin: 4px 0 0; }
.client-mcp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.client-mcp-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); }
.client-mcp-list strong { display: block; color: var(--text-primary); }
.client-mcp-list small { color: var(--text-muted); }
.client-mcp-list form { margin: 0; }

.consent-choice { width: min(520px, calc(100vw - 32px)) !important; }
.consent-choice .surface { display: grid; gap: 8px; justify-items: start; padding: 16px !important; }
.consent-choice .surface h2 { margin: 0; }
.consent-choice .surface p { margin: 0; }
@media (max-width: 520px) { .mcp-client-toggle, .client-mcp-head, .client-mcp-list li { flex-direction: column; align-items: stretch; } .switch { align-self: flex-start; } }
.access-notice { justify-items: start; }
.access-notice-icon { background: var(--status-info-bg) !important; color: var(--status-info-text) !important; }
.access-notice .steps-list { margin: 0; display: grid; gap: 6px; color: var(--text-secondary); }
.access-notice-site { justify-self: stretch; justify-content: center; min-height: 40px; }
.client-mcp-head .badge { align-self: flex-start; }
.consent-choice > img { width: 36px; height: 36px; }

/* =====================================================================================================================
   REDESIGN 2026-10 — shared components, client shell and screens (docs/BRIEFING-REDESIGN-PORTAL-ADMIN.md).
   Every color comes from tokens.css. Declarations marked !important here land in the `theme-important` layer and
   therefore win over the legacy !important rules of workspace-theme.css / premium-light.css.
   ===================================================================================================================== */

/* ---------- Base type ---------- */
body { font-family: var(--font-sans); font-size: 13.5px; color: var(--text-primary); background: var(--canvas); -webkit-font-smoothing: antialiased; }
.num, .tabular-val, .tabular-cell, .metric-val, td, kbd, time { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
:where(button, a, input, select, textarea, summary, [role="option"], [tabindex]):focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 2px !important; box-shadow: none !important; }
.text-success { color: var(--status-connected-text) !important; }
.text-warning { color: var(--status-attention-text) !important; }
.text-risk { color: var(--status-risk-text) !important; }
.text-danger { color: var(--status-danger-text) !important; }
.text-accent { color: var(--text-strong) !important; }
.text-muted, .muted { color: var(--text-muted) !important; }
code, .tag-code { font-family: var(--font-mono); }

/* Eyebrow: mono, uppercase, accent. The legacy dot is hidden. */
.eyebrow { display: inline-flex !important; align-items: center; gap: 6px; font: 500 11px/1.4 var(--font-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--accent-icon) !important; }
.eyebrow-dot { display: none !important; }

/* ---------- Buttons ---------- */
button, .button {
  min-height: 40px; padding: 0 16px; gap: 8px; border-radius: 10px !important; border: 1px solid var(--blue-border);
  background: var(--blue); color: var(--text-on-accent); font: 650 13px/1 var(--font-sans); box-shadow: none; cursor: pointer;
  transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
button:hover, .button:hover { background: var(--blue-hover); color: var(--text-on-accent); }
.button.primary, button.primary { background: var(--blue) !important; border: 1px solid var(--blue-border) !important; color: var(--text-on-accent) !important; box-shadow: var(--shadow-primary) !important; }
.button.primary:hover, button.primary:hover { background: var(--blue-hover) !important; }
.secondary, .button.secondary, button.secondary { background: var(--surface-raised) !important; border: 1px solid var(--border-strong) !important; color: var(--text-primary) !important; box-shadow: none !important; }
.secondary:hover, .button.secondary:hover, button.secondary:hover { background: var(--surface-active) !important; border-color: var(--border-strong) !important; color: var(--text-strong) !important; }
.quiet, button.quiet { background: transparent !important; border-color: transparent !important; color: var(--text-secondary) !important; box-shadow: none !important; }
.quiet:hover, button.quiet:hover { background: var(--surface-hover) !important; color: var(--text-primary) !important; }
.danger-text, button.danger-text, .button.danger-text { color: var(--status-danger-text) !important; }
.button.secondary.danger-text, button.secondary.danger-text { background: transparent !important; border-color: var(--status-danger-border) !important; }
.button.secondary.danger-text:hover, button.secondary.danger-text:hover { background: var(--status-danger-bg) !important; }
.small-button, .button.small-button, button.small-button { min-height: 32px !important; padding: 0 12px !important; font-size: 12.5px !important; border-radius: 8px !important; }
button:disabled, .button[aria-disabled="true"], button[disabled] { background: transparent !important; border-color: var(--border) !important; color: var(--text-disabled) !important; box-shadow: none !important; cursor: not-allowed !important; opacity: 1 !important; }

/* ---------- Badges and chips ---------- */
.badge {
  display: inline-flex !important; align-items: center; gap: 5px; min-height: 22px; padding: 3px 9px !important; border-radius: 999px !important; border: 0 !important;
  font: 600 11.5px/1.2 var(--font-sans) !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap; box-shadow: none !important;
}
.badge.small { min-height: 20px; padding: 2px 8px !important; font-size: 11px !important; }
.badge.success { color: var(--status-connected-text) !important; background: var(--status-connected-bg) !important; }
.badge.warning { color: var(--status-attention-text) !important; background: var(--status-attention-bg) !important; }
.badge.danger { color: var(--status-danger-text) !important; background: var(--status-danger-bg) !important; }
.badge.info { color: var(--status-info-text) !important; background: var(--status-info-bg) !important; }
.badge.neutral, .badge:not(.success):not(.warning):not(.danger):not(.info) { color: var(--status-neutral-text) !important; background: var(--status-neutral-bg) !important; }
.badge.tag-promo { min-height: 0; padding: 1px 5px !important; border-radius: 4px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .02em !important; text-transform: uppercase !important; color: var(--status-attention-text) !important; background: var(--status-attention-bg) !important; }
.status-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 999px; background: var(--status-neutral-dot); }
.status-dot.success, .status-dot.green { background: var(--status-connected-dot); }
.status-dot.warning { background: var(--status-attention-dot); }
.status-dot.danger, .status-dot.red { background: var(--status-danger-dot); }
.status-dot.info { background: var(--status-info-dot); }
.tone-success { --tone-fg: var(--status-connected-text); --tone-bg: var(--status-connected-bg); --tone-dot: var(--status-connected-dot); }
.tone-warning { --tone-fg: var(--status-attention-text); --tone-bg: var(--status-attention-bg); --tone-dot: var(--status-attention-dot); }
.tone-risk { --tone-fg: var(--status-risk-text); --tone-bg: var(--status-risk-bg); --tone-dot: var(--status-risk-dot); }
.tone-danger { --tone-fg: var(--status-danger-text); --tone-bg: var(--status-danger-bg); --tone-dot: var(--status-danger-dot); }
.tone-info { --tone-fg: var(--status-info-text); --tone-bg: var(--status-info-bg); --tone-dot: var(--status-info-dot); }
.tone-neutral { --tone-fg: var(--status-neutral-text); --tone-bg: var(--status-neutral-bg); --tone-dot: var(--status-neutral-dot); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 3px 9px; border-radius: 999px; font: 600 11.5px/1.2 var(--font-sans); color: var(--tone-fg, var(--status-neutral-text)); background: var(--tone-bg, var(--status-neutral-bg)); white-space: nowrap; }
.chip-mono { font-family: var(--font-mono); border-radius: 6px; padding: 2px 7px; font-size: 11px; }

/* ---------- Segmented controls ---------- */
.portal-chips-group, .metric-selector, .segmented {
  display: inline-flex !important; align-items: center; gap: 2px !important; padding: 3px !important; background: var(--surface-sunken) !important;
  border: 1px solid var(--border) !important; border-radius: 10px !important; box-shadow: none !important; flex-wrap: nowrap;
}
.portal-filter-chip, .metric-select-btn, .segmented > button {
  min-height: 32px !important; height: 32px; padding: 0 12px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important;
  color: var(--text-muted) !important; font: 600 12.5px/1 var(--font-sans) !important; box-shadow: none !important; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.portal-filter-chip:hover, .metric-select-btn:hover, .segmented > button:hover { color: var(--text-primary) !important; background: transparent !important; }
.portal-filter-chip.active, .portal-filter-chip[aria-checked="true"], .metric-select-btn.active, .segmented > button[aria-pressed="true"] { background: var(--surface-active) !important; color: var(--text-strong) !important; box-shadow: none !important; }
.chip-count { font-family: var(--font-mono); font-size: 11px; color: inherit; opacity: .8; background: none !important; padding: 0 !important; }
.chip-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--status-neutral-dot); }
.chip-dot.green { background: var(--status-connected-dot); }
.chip-dot.red { background: var(--status-danger-dot); }

/* ---------- Inputs ---------- */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"])), textarea, select {
  min-height: 38px; padding: 0 12px; border-radius: 9px !important; border: 1px solid var(--border) !important; background: var(--input-bg) !important;
  color: var(--text-primary) !important; font: 500 13px/1.3 var(--font-sans); box-shadow: none !important;
}
textarea { padding: 10px 12px; }
input::placeholder, textarea::placeholder { color: var(--text-faint) !important; opacity: 1; }
input:where(:not([type="checkbox"]):not([type="radio"])):focus, textarea:focus, select:focus { border-color: var(--border-focus) !important; box-shadow: var(--focus-ring) !important; outline: none; }
input[readonly], textarea[readonly], input:disabled, select:disabled, textarea:disabled { background: var(--input-disabled-bg) !important; color: var(--text-secondary) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--blue); }

/* ---------- Cards ---------- */
.surface, .portal-metric-strip, .module-kpi-strip, .dashboard-chart-card, .triage-card,
.portal-toolbar, .portal-table-wrap, .cn-table-container, .channel-card, .dashboard-channel-summary {
  background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; box-shadow: none !important;
}
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-header h3, .card-title { margin: 2px 0 0 !important; font: 700 15px/1.3 var(--font-sans) !important; letter-spacing: -.01em; color: var(--text-primary) !important; }

/* ---------- Designed select (ui-select) ---------- */
.ui-select { position: relative; display: inline-flex; flex: none; min-width: 0; }
.ui-select > select { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; opacity: 0 !important; pointer-events: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
.ui-select-trigger {
  height: 38px !important; min-height: 38px !important; display: inline-flex !important; align-items: center; gap: 8px; max-width: 100%; padding: 0 10px 0 12px !important;
  background: var(--surface-sunken) !important; border: 1px solid var(--border) !important; border-radius: 9px !important; color: var(--text-primary) !important;
  font: 500 12.5px/1 var(--font-sans) !important; box-shadow: none !important; white-space: nowrap; text-align: left;
}
.ui-select-trigger:hover { border-color: var(--border-strong) !important; background: var(--surface-raised) !important; }
.ui-select.is-open .ui-select-trigger, .ui-select-trigger[aria-expanded="true"] { border-color: var(--blue-border) !important; background: var(--surface-raised) !important; }
.ui-select-label { color: var(--text-muted); font-weight: 500; }
.ui-select-value { font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; }
.ui-select-icon, .ui-select-chevron { width: 14px; height: 14px; flex: none; color: var(--text-muted); }
.ui-select-chevron { transition: transform var(--duration-fast); }
.ui-select-trigger[aria-expanded="true"] .ui-select-chevron { transform: rotate(180deg); }
.ui-select.is-compact .ui-select-trigger { height: 32px !important; min-height: 32px !important; padding: 0 8px 0 10px !important; border-radius: 8px !important; font-size: 12px !important; background: var(--surface) !important; }
.ui-listbox {
  position: fixed; top: 0; left: 0; z-index: 100001; box-sizing: border-box; max-width: min(320px, calc(100vw - 16px)); max-height: min(360px, 60vh); overflow: auto;
  padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--surface-overlay); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: var(--shadow-popover); color: var(--text-primary); outline: none;
}
.ui-listbox[hidden] { display: none !important; }
.ui-listbox-title { padding: 6px 10px 4px; font: 500 10px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.ui-option { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 8px; font: 500 13px/1.3 var(--font-sans); color: var(--text-secondary); cursor: pointer; user-select: none; }
.ui-option:hover, .ui-option:focus { background: var(--surface-active); color: var(--text-primary); outline: none !important; }
.ui-option:focus-visible { box-shadow: inset 0 0 0 2px var(--focus) !important; outline: none !important; }
.ui-option[aria-selected="true"] { color: var(--text-strong); background: var(--selection-bg); }
.ui-option[aria-disabled="true"] { color: var(--text-disabled); cursor: not-allowed; background: transparent; }
.ui-option-label { flex: 1; min-width: 0; }
.ui-option-check { width: 15px; height: 15px; flex: none; color: var(--accent); visibility: hidden; }
.ui-option[aria-selected="true"] .ui-option-check { visibility: visible; }
/* Channel selector variant (topbar) */
.ui-select-channel .ui-select-trigger { height: 40px !important; min-height: 40px !important; padding: 0 12px 0 8px !important; gap: 10px; background: var(--surface) !important; border-radius: 10px !important; }
.channel-trigger-logo { display: inline-flex; flex: none; }
.channel-trigger-logo .channel-logo { width: 24px; height: 24px; border-radius: 7px; }
.channel-trigger-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.2; min-width: 0; }
.channel-trigger-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.channel-trigger-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 500; color: var(--tone-fg, var(--text-muted)); }
.channel-trigger-status .status-dot { width: 6px; height: 6px; }

/* ---------- Popovers and menus ---------- */
.ui-menu { background: var(--surface-overlay) !important; border: 1px solid var(--border-strong) !important; border-radius: 12px !important; box-shadow: var(--shadow-popover) !important; }
.ui-menu-item:hover, .ui-menu-item:focus-visible, .ui-menu form > button:hover { background: var(--surface-active) !important; }

/* ---------- Toast (bottom-right on desktop, full width on phones) ---------- */
.portal-floating-toast {
  position: fixed !important; top: auto !important; left: auto !important; right: 24px !important; bottom: 24px !important; transform: none !important; z-index: 100002 !important;
  display: flex !important; align-items: center; gap: 12px; max-width: min(420px, calc(100vw - 32px)); padding: 12px 12px 12px 14px !important;
  background: var(--surface-overlay) !important; color: var(--text-primary) !important; border: 1px solid var(--border-strong) !important; border-left: 3px solid var(--status-info-dot) !important;
  border-radius: 12px !important; box-shadow: var(--shadow-popover) !important; font: 600 13px/1.4 var(--font-sans) !important; animation: olh-toast-in .18s var(--ease-standard);
}
.portal-floating-toast.toast-success { border-left-color: var(--status-connected-dot) !important; background: var(--surface-overlay) !important; color: var(--text-primary) !important; }
.portal-floating-toast.toast-error { border-left-color: var(--status-danger-dot) !important; background: var(--surface-overlay) !important; color: var(--text-primary) !important; }
.portal-floating-toast.is-leaving { opacity: 0; transform: translateY(6px) !important; transition: opacity .25s, transform .25s; }
.toast-close-btn { min-height: 28px !important; width: 28px; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--text-muted) !important; font-size: 18px !important; border-radius: 7px !important; }
.toast-close-btn:hover { background: var(--surface-active) !important; color: var(--text-primary) !important; }
@keyframes olh-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- States: empty, not collected, failure, loading, unavailable ---------- */
.state-card, .data-unavailable-state, .portal-empty {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center; text-align: center !important; gap: 10px !important;
  padding: 32px 24px !important; color: var(--text-primary);
}
.data-unavailable-state { background: var(--surface) !important; border: 1px dashed var(--border-strong) !important; border-radius: 12px !important; }
.state-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.state-card.is-pending { border-style: dashed; border-color: var(--border-strong); }
.state-card.is-failure { background: color-mix(in srgb, var(--status-danger-dot) 5%, var(--surface)); border-color: var(--status-danger-border); }
.state-card.is-failure .state-icon { background: var(--status-danger-bg); color: var(--status-danger-text); }
.state-card.is-failure strong { color: var(--status-danger-strong); }
.state-icon, .empty-icon-wrap, .data-unavailable-icon {
  display: flex !important; align-items: center; justify-content: center; width: 48px !important; height: 48px !important; border-radius: 12px !important;
  background: var(--surface-active) !important; color: var(--text-faint) !important; border: 0 !important; font: 700 20px/1 var(--font-sans);
}
.state-icon svg, .empty-icon-wrap svg { width: 22px; height: 22px; }
.data-unavailable-state strong, .portal-empty strong, .state-card strong { font: 700 14.5px/1.3 var(--font-sans); color: var(--text-primary); }
.data-unavailable-state p, .portal-empty p, .state-card p { max-width: 380px; margin: 0 auto !important; font-size: 12.5px; color: var(--text-muted) !important; }
.state-action { font-size: 12px; font-weight: 600; color: var(--link); text-decoration: none; }
.skeleton { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--skeleton), var(--skeleton-shine), var(--skeleton)); background-size: 200% 100%; animation: olh-shimmer 1.4s linear infinite; }
@keyframes olh-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.state-panel { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface-sunken); }
.state-panel strong { font-size: 13.5px; color: var(--text-primary); }

/* Alert banners (coverage partial / collection failed) */
.alert-banner { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--tone-border, var(--border)); background: var(--tone-bg, var(--surface)); color: var(--text-primary); }
.alert-banner.tone-warning { --tone-border: var(--status-attention-border); }
.alert-banner.tone-danger { --tone-border: var(--status-danger-border); }
.alert-banner.tone-info { --tone-border: var(--status-info-border); }
.alert-banner-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--tone-fg); background: color-mix(in srgb, var(--tone-dot) 18%, transparent); }
.alert-banner-icon svg { width: 15px; height: 15px; }
.alert-banner strong { display: block; font-size: 13px; color: var(--tone-fg); }
.alert-banner p { margin: 2px 0 0 !important; font-size: 12.5px; color: var(--text-secondary) !important; }

/* ---------- Client shell ---------- */
.portal-app-shell, .portal-main-area { background: var(--canvas) !important; }
.portal-sidebar {
  width: 240px !important; min-width: 240px !important; max-width: 240px !important; background: var(--sidebar-bg) !important; border-right: 1px solid var(--sidebar-border) !important;
  overflow: visible !important; z-index: 90;
}
.portal-main-area { margin-left: 240px !important; width: calc(100% - 240px) !important; }
.portal-app-shell.sidebar-collapsed .portal-main-area, .portal-sidebar.collapsed ~ .portal-main-area { margin-left: 68px !important; width: calc(100% - 68px) !important; }
.portal-sidebar.collapsed { width: 68px !important; min-width: 68px !important; max-width: 68px !important; }
.sidebar-header { height: 64px !important; padding: 0 18px !important; border-bottom: 0 !important; display: flex; align-items: center; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; color: var(--sidebar-active-fg) !important; text-decoration: none; }
.sidebar-brand .brand-logo { width: 32px; height: 32px; border-radius: 9px; }
.sidebar-brand-text { font: 800 17px/1 var(--font-sans) !important; letter-spacing: -.03em !important; color: var(--sidebar-active-fg) !important; }
.sidebar-brand-text .brand-dot { color: var(--focus); }
.sidebar-body { display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 8px 14px 12px !important; flex: 1; overflow-y: auto; overflow-x: visible; }
.sidebar-section-label { padding: 14px 10px 6px !important; font: 500 10.5px/1.2 var(--font-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--sidebar-muted) !important; }
.sidebar-nav { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.sidebar-nav-item {
  display: flex !important; align-items: center !important; gap: 11px !important; height: 40px; min-height: 40px !important; padding: 0 10px !important; border-radius: 9px !important;
  color: var(--sidebar-fg) !important; font: 600 13.5px/1 var(--font-sans) !important; text-decoration: none; background: transparent !important; box-shadow: none !important;
}
.sidebar-nav-item .sidebar-item-icon { display: inline-flex; color: var(--sidebar-muted) !important; }
.sidebar-nav-item .sidebar-item-label { flex: 1; min-width: 0; color: inherit !important; }
.sidebar-nav-item:hover { background: var(--sidebar-hover) !important; color: var(--sidebar-active-fg) !important; }
.sidebar-nav-item.active { background: var(--sidebar-active-bg) !important; color: var(--sidebar-active-fg) !important; box-shadow: none !important; }
.sidebar-nav-item.active .sidebar-item-icon { color: var(--sidebar-active-icon) !important; }
.sidebar-nav-item.active .sidebar-item-label { color: var(--sidebar-active-fg) !important; }
.sidebar-badge { font: 600 10.5px/1 var(--font-mono) !important; padding: 3px 7px !important; border-radius: 999px !important; background: var(--sidebar-badge-bg) !important; color: var(--sidebar-fg) !important; border: 0 !important; }
.sidebar-nav-item.active .sidebar-badge { background: var(--selection-strong) !important; color: var(--sidebar-active-fg) !important; }
.sidebar-alert-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--status-danger-dot); box-shadow: 0 0 0 3px var(--status-danger-bg); flex: none; }
.sidebar-sync-card { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--sidebar-card); border: 1px solid var(--sidebar-border); }
.sidebar-sync-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--sidebar-fg); }
.sidebar-sync-top time { font: 500 11.5px/1 var(--font-mono); color: var(--sidebar-active-fg); }
.sidebar-sync-meter { display: block; width: 100%; height: 4px; }
.sidebar-sync-meter .meter-track { fill: var(--sidebar-border); }
.sidebar-sync-meter .meter-fill { fill: var(--accent); }
.sidebar-sync-copy { font-size: 11.5px; color: var(--sidebar-muted); }
.sidebar-footer { padding: 12px 14px 16px !important; border-top: 0 !important; background: transparent !important; }
.sidebar-profile-trigger { border: 1px solid var(--sidebar-border) !important; border-radius: 12px !important; background: transparent !important; color: var(--sidebar-active-fg) !important; min-height: 50px; }
.sidebar-profile-trigger:hover, .sidebar-profile-trigger[aria-expanded="true"] { background: var(--sidebar-hover) !important; }
.sidebar-profile-trigger .sidebar-profile-name { color: var(--sidebar-active-fg) !important; }
.sidebar-profile-trigger .sidebar-profile-channel { font-family: var(--font-mono); font-size: 10.5px !important; color: var(--sidebar-muted) !important; }
.cn-avatar { border-radius: 9px !important; }
.portal-sidebar.collapsed .sidebar-section-label, .portal-sidebar.collapsed .sidebar-sync-card, .portal-sidebar.collapsed .sidebar-badge, .portal-sidebar.collapsed .sidebar-alert-dot, .portal-sidebar.collapsed .sidebar-brand-text { display: none !important; }
.portal-sidebar.collapsed .sidebar-nav-item { justify-content: center; padding: 0 !important; }
.portal-sidebar.collapsed .sidebar-body { padding: 8px 10px !important; }
/* F-20: collapsed sidebar keeps only the logo in the brand (the "Admin" badge and any brand text would float over the content). */
.portal-sidebar.collapsed .sidebar-brand > :not(.brand-logo) { display: none !important; }

/* Topbar: crumbs + title · search (Ctrl K) · freshness · channel · theme */
.portal-topbar {
  position: sticky !important; top: 0; z-index: 80 !important; height: auto !important; min-height: 64px !important; display: flex !important; flex-wrap: wrap; align-items: center !important;
  justify-content: flex-start !important; gap: 12px 16px !important; padding: 10px var(--page-gutter) !important; background: color-mix(in srgb, var(--canvas) 92%, transparent) !important;
  backdrop-filter: saturate(1.3) blur(10px); border-bottom: 1px solid var(--border-subtle) !important; box-shadow: none !important;
}
.topbar-left { display: flex !important; align-items: center; gap: 12px !important; flex: 0 1 auto; min-width: 0; }
.topbar-hamburger-btn { display: inline-flex !important; width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; align-items: center; justify-content: center; border-radius: 10px !important; border: 1px solid var(--border) !important; background: var(--surface) !important; color: var(--text-secondary) !important; box-shadow: none !important; }
.topbar-hamburger-btn:hover { background: var(--surface-raised) !important; color: var(--text-primary) !important; }
.topbar-breadcrumbs { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; min-width: 150px; }
.topbar-breadcrumbs::after { content: none !important; display: none !important; }
.topbar-crumb-line { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.topbar-crumb-line .breadcrumb-root { display: inline !important; color: var(--text-muted) !important; font-weight: 500 !important; }
.topbar-crumb-line .breadcrumb-separator { display: inline-block !important; color: var(--text-faint) !important; }
.portal-topbar .breadcrumb-page { display: block !important; font: 700 18px/1.1 var(--font-sans) !important; letter-spacing: -.02em !important; color: var(--text-primary) !important; white-space: nowrap; }
.topbar-search { flex: 1 1 260px; max-width: 460px; margin: 0 auto; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px 0 12px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text-muted); cursor: text; }
.topbar-search:focus-within { border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.topbar-search input { flex: 1; min-width: 0; min-height: 0 !important; height: 34px; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--text-primary) !important; font-size: 13px; }
.topbar-search input:focus { box-shadow: none !important; outline: none !important; }
.topbar-search input:focus-visible { outline: none !important; }
.topbar-search kbd { font: 500 10.5px/1 var(--font-mono); padding: 3px 6px; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--text-muted); background: var(--surface-raised); white-space: nowrap; }
.topbar-right { display: flex !important; align-items: center; gap: 8px !important; flex-wrap: wrap; margin: 0 0 0 auto !important; }
.topbar-channel-selector { position: static !important; display: inline-flex !important; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.freshness-wrap { position: relative; }
.sync-freshness-pill {
  height: 40px !important; min-height: 40px !important; width: auto !important; display: inline-flex !important; align-items: center; gap: 10px !important; padding: 0 12px !important;
  background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; color: var(--text-primary) !important; box-shadow: none !important; font-family: var(--font-sans);
}
.sync-freshness-pill:hover, .sync-freshness-pill[aria-expanded="true"] { border-color: var(--border-strong) !important; background: var(--surface-raised) !important; }
.freshness-bars { display: inline-flex; align-items: flex-end; gap: 2px; }
.freshness-bar { display: block; width: 4px; height: 14px; border-radius: 2px; background: var(--tone-dot, var(--status-neutral-dot)); }
.freshness-bar.tone-neutral { background: var(--status-neutral-border); }
.freshness-copy { display: flex !important; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.freshness-copy strong { font-size: 12px !important; font-weight: 600; color: var(--text-primary) !important; }
.freshness-copy small { font: 500 10.5px/1.2 var(--font-mono) !important; color: var(--text-muted) !important; }
.freshness-chevron { color: var(--text-muted); }
.freshness-popover {
  position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; left: auto !important; z-index: 120 !important; width: 340px; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; padding: 0 !important; background: var(--surface-overlay) !important; border: 1px solid var(--border-strong) !important; border-radius: 14px !important;
  box-shadow: var(--shadow-popover) !important; overflow: hidden; color: var(--text-primary) !important;
}
.freshness-popover[hidden] { display: none !important; }
.freshness-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border-strong); }
.freshness-header strong { font-size: 13.5px; font-weight: 700; }
.freshness-header span { font: 500 11px/1 var(--font-mono); color: var(--text-muted); }
.freshness-row { display: flex !important; align-items: center; gap: 10px; padding: 11px 16px !important; border-bottom: 1px solid var(--border-subtle) !important; }
.freshness-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; background: var(--tone-dot); }
.freshness-row-copy { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.freshness-row-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.freshness-row-note { font-size: 11px; color: var(--text-muted); }
.freshness-row-note.tone-warning, .freshness-row-note.tone-danger { color: var(--tone-fg); }
.freshness-row time { font: 500 11px/1 var(--font-mono); color: var(--text-secondary); }
.freshness-footer-link { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--link) !important; text-decoration: none; }
.theme-trigger { width: 40px !important; height: 40px !important; min-height: 40px !important; border-radius: 10px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text-secondary) !important; box-shadow: none !important; }

/* ---------- Page content ---------- */
.portal-main-content { width: 100%; max-width: 1480px !important; margin: 0 !important; padding: 24px var(--page-gutter) 40px !important; }
.portal-tab-pane.active { display: flex !important; flex-direction: column; gap: 16px; }
.portal-tab-pane.active > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.portal-heading { display: flex !important; flex-wrap: wrap; align-items: flex-end !important; justify-content: space-between; gap: 16px; margin: 0 !important; }
.portal-heading > div:first-child { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.portal-heading h1 { margin: 0 !important; font: 750 28px/1.15 var(--font-sans) !important; letter-spacing: -.03em !important; color: var(--text-primary) !important; }
.portal-heading p { margin: 0 !important; font-size: 13.5px; color: var(--text-muted) !important; }
.portal-heading p strong { color: var(--text-primary); font-weight: 600; }
.portal-heading-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.listing-bulk-action { min-height: 40px !important; border-radius: 10px !important; font-size: 13px !important; }

/* Priority tiles (Anúncios) */
.priority-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.priority-tile {
  display: flex !important; align-items: flex-start; gap: 12px; min-height: 0 !important; height: auto; padding: 14px 16px !important; text-align: left;
  background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; color: var(--text-primary) !important; box-shadow: none !important; font-family: var(--font-sans);
}
.priority-tile:hover { border-color: var(--border-strong) !important; background: var(--surface-raised) !important; }
.priority-tile[aria-pressed="true"] { border-color: var(--tone-dot) !important; background: color-mix(in srgb, var(--tone-dot) 7%, var(--surface)) !important; }
.priority-tile-icon { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--tone-bg); color: var(--tone-fg); font: 700 13px/1 var(--font-mono); }
.priority-tile-copy { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.priority-tile-label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.priority-tile strong { font: 750 24px/1.15 var(--font-sans); letter-spacing: -.02em; color: var(--text-primary); }
.priority-tile small { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }

/* Toolbar */
.portal-toolbar { position: relative; z-index: 5; display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px !important; padding: 10px !important; margin: 0 !important; }
.portal-search-wrap { position: relative; flex: 1 1 280px; display: flex !important; align-items: center; gap: 8px; height: 38px; padding: 0 12px !important; background: var(--surface-sunken) !important; border: 1px solid var(--border) !important; border-radius: 9px !important; color: var(--text-muted); max-width: none !important; }
.portal-search-wrap:focus-within { border-color: var(--border-focus) !important; box-shadow: var(--focus-ring); }
.portal-search-wrap .search-icon { position: static !important; flex: none; color: var(--text-muted); transform: none !important; }
.portal-search-input { flex: 1; min-width: 0; height: 34px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.portal-search-input:focus, .portal-search-input:focus-visible { box-shadow: none !important; outline: none !important; }
.portal-search-clear { min-height: 24px !important; width: 24px; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--text-muted) !important; font-size: 16px !important; }

/* ---------- Tables: exactly four backgrounds (head, row, hover, child) ---------- */
.portal-table-wrap, .cn-table-container { overflow: hidden !important; padding: 0 !important; margin: 0 !important; }
.portal-table-wrap > .scroll, .cn-table-container > .scroll { overflow-x: auto !important; overflow-y: visible; border: 0 !important; border-radius: 0 !important; background: transparent !important; max-height: none; }
.portal-table, .cn-table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; background: var(--surface) !important; font-size: 13px; }
.portal-table thead th, .cn-table thead th, .cn-table-head, .portal-table th {
  height: 42px !important; padding: 0 10px !important; background: var(--table-head) !important; border: 0 !important; border-bottom: 1px solid var(--border) !important;
  color: var(--text-muted) !important; font: 600 11px/1.2 var(--font-sans) !important; letter-spacing: .04em !important; text-transform: uppercase !important; text-align: left; white-space: nowrap; vertical-align: middle; position: static !important; box-shadow: none !important;
}
.portal-table tbody > tr > td, .cn-table tbody > tr > td {
  padding: 10px !important; background: var(--surface) !important; border: 0 !important; border-bottom: 1px solid var(--border-subtle) !important; color: var(--text-primary);
  vertical-align: middle !important; height: auto !important; box-shadow: none !important;
}
.portal-table tbody > tr:hover > td, .cn-table tbody > tr:hover > td,
/* Parent rows of the hierarchical tables (F-07: one selector for Anúncios, Campanhas, Devoluções and Fulfillment) */
.hier-table > tbody > tr > td { transition: background-color var(--duration-fast); }
.portal-table tbody > tr:not(.hier-children-row):not(.analytics-drawer-row):hover > td { background: var(--table-row-hover) !important; }
.portal-table tbody > tr.hier-children-row > td {
  padding: 0 !important; background: var(--table-child) !important; border-bottom: 1px solid var(--border-subtle) !important;
}
.tabular-cell, .portal-table td.tabular-cell { text-align: right; font-variant-numeric: tabular-nums; }
.portal-table th.cn-table-head:is(.col-price, .col-stock, .col-sales, .col-fee, .col-shipping, .col-payout, .col-cost, .col-margin) { text-align: right; }
.portal-table td small, .portal-table td .text-muted { font-size: 11px; }

/* Children (MLBs inside a SKU, campaigns inside an MLB) */
.sku-children-wrap { padding: 4px 0 8px !important; margin: 0 !important; background: var(--table-child) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.sku-children-header { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 20px 6px 64px !important; margin: 0 !important; background: transparent !important; border: 0 !important; font-size: 11.5px !important; color: var(--text-muted) !important; }
.sku-children-header strong { font-weight: 600; color: var(--text-secondary); }
.sku-children-header code { color: var(--text-secondary); background: none; font-size: 11.5px; }
.child-mlbs-table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; background: transparent !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
.child-mlbs-table th { height: 32px !important; padding: 0 10px !important; background: var(--table-child) !important; border: 0 !important; border-bottom: 1px solid var(--border-subtle) !important; color: var(--text-faint) !important; font: 600 10.5px/1.2 var(--font-sans) !important; letter-spacing: .04em !important; text-transform: uppercase !important; text-align: left; }
.child-mlbs-table td { padding: 8px 10px !important; background: var(--table-child) !important; border: 0 !important; border-bottom: 1px solid var(--border-subtle) !important; font-size: 12.5px; color: var(--text-secondary); vertical-align: middle; }
.child-mlbs-table tbody > tr:last-child > td { border-bottom: 0 !important; }
.child-mlbs-table tbody > tr:not(.analytics-drawer-row):hover > td { background: var(--table-child-hover) !important; }
.child-mlbs-table td.tabular-cell { text-align: right; }

/* Listing table: fixed column grid shared by the SKU row and its MLB rows (Anuncios.dc.html) */
.listing-table, .listing-child-table { table-layout: fixed !important; min-width: 1322px; }
.listing-table > thead > tr > th:nth-child(1), .listing-child-table > thead > tr > th:nth-child(1) { width: 44px; }
.listing-table > thead > tr > th:nth-child(3), .listing-child-table > thead > tr > th:nth-child(3) { width: 124px; }
.listing-table > thead > tr > th:nth-child(4), .listing-child-table > thead > tr > th:nth-child(4) { width: 120px; }
.listing-table > thead > tr > th:nth-child(5), .listing-child-table > thead > tr > th:nth-child(5) { width: 96px; }
.listing-table > thead > tr > th:nth-child(6), .listing-child-table > thead > tr > th:nth-child(6) { width: 100px; }
.listing-table > thead > tr > th:nth-child(7), .listing-child-table > thead > tr > th:nth-child(7) { width: 118px; }
.listing-table > thead > tr > th:nth-child(8), .listing-child-table > thead > tr > th:nth-child(8) { width: 104px; }
.listing-table > thead > tr > th:nth-child(9), .listing-child-table > thead > tr > th:nth-child(9) { width: 96px; }
.listing-table > thead > tr > th:nth-child(10), .listing-child-table > thead > tr > th:nth-child(10) { width: 108px; }
.listing-table > thead > tr > th:nth-child(11), .listing-child-table > thead > tr > th:nth-child(11) { width: 100px; }
.listing-table > thead > tr > th:nth-child(12), .listing-child-table > thead > tr > th:nth-child(12) { width: 112px; }
.listing-child-table { min-width: 0 !important; }
/* Child tables share the parent's grid: their header row only carries the column widths (hierChildren) */
.hier-child-table > thead > tr > th { height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border: 0 !important; font-size: 0 !important; line-height: 0 !important; overflow: hidden; }
.listing-child-table > tbody > tr.child-mlb-row > td { padding: 6px 10px !important; height: 56px; }
.listing-table td.col-trend, .listing-table td.col-mlbs, .listing-child-table td.col-trend, .listing-child-table td.col-mlbs { text-align: left; }
.tree-guide-cell { position: relative; text-align: center !important; }
.tree-guide-cell::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--tree-guide); }
.tree-guide-cell .row-expand-btn { position: relative; z-index: 1; }
.child-product-cell { display: flex; align-items: center; gap: 10px; padding-left: 4px; }
.tree-branch { width: 14px; height: 1px; background: var(--tree-guide); flex: none; }
.child-type-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.child-type-label { display: inline-flex; align-items: center; gap: 6px; }

/* Row expander: <button aria-expanded> with a chevron that rotates 90° */
.row-expand-btn {
  width: 28px !important; height: 28px !important; min-height: 28px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 7px !important; border: 1px solid var(--border) !important; background: transparent !important; color: var(--text-secondary) !important; box-shadow: none !important;
}
.row-expand-btn:hover { background: var(--surface-active) !important; color: var(--text-primary) !important; }
.row-expand-btn[aria-expanded="true"] { background: var(--surface-active) !important; border-color: var(--border-strong) !important; }
.row-expand-btn .chevron-icon { width: 14px; height: 14px; transform: none !important; transition: transform var(--duration-fast); }
.row-expand-btn[aria-expanded="true"] .chevron-icon, .row-expand-btn.open .chevron-icon { transform: rotate(90deg) !important; }
.row-expand-btn-sm { width: 24px !important; height: 24px !important; min-height: 24px !important; background: var(--table-child) !important; }

/* Cells */
.product-cell-wrap { display: flex !important; align-items: center; gap: 12px; min-width: 0; }
.product-thumb-wrap { width: 44px !important; height: 44px !important; flex: none; border-radius: 9px !important; overflow: hidden; background: var(--surface-active) !important; border: 1px solid var(--border) !important; display: flex; align-items: center; justify-content: center; }
.product-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb-fallback { color: var(--text-disabled); display: flex; }
.product-info-block { display: flex !important; flex-direction: column; gap: 4px; min-width: 0; }
.product-title-btn { min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--text-primary) !important; text-align: left; font: 650 13.5px/1.3 var(--font-sans) !important; box-shadow: none !important; display: block; max-width: 100%; }
.product-title-btn strong { font-weight: 650; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-title-btn:hover { color: var(--link) !important; }
/* Opens the SKU sheet (same as clicking the name): discreet, stronger on row hover. */
.product-title-row:has(.product-open-btn) { display: flex; align-items: flex-start; gap: 6px; }
.product-open-btn { flex: none; display: inline-grid !important; place-items: center; width: 24px; height: 24px; min-height: 0 !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: 6px !important; background: transparent !important; color: var(--text-muted) !important; cursor: pointer; opacity: .55; transition: opacity .15s, background .15s, color .15s; }
.portal-table-row:hover .product-open-btn, .product-open-btn:focus-visible { opacity: 1; }
.product-open-btn:hover { background: var(--surface-hover) !important; border-color: var(--border) !important; color: var(--link) !important; opacity: 1; }
.product-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--text-primary) !important; text-decoration: none; }
.product-tags { display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; }
.tag-sku-sub, .tag-code { font: 500 11px/1.3 var(--font-mono) !important; color: var(--text-muted) !important; background: none !important; border: 0 !important; padding: 0 !important; }
a.tag-code, .tag-link { color: var(--link) !important; text-decoration: none; }
.tag-muted { font: 600 10.5px/1.3 var(--font-sans) !important; padding: 1px 6px !important; border-radius: 5px !important; background: var(--surface-active) !important; color: var(--text-secondary) !important; border: 0 !important; }
.tag-paused { color: var(--text-muted) !important; }
.tag-logistic { font: 600 10.5px/1.3 var(--font-sans); padding: 1px 6px; border-radius: 5px; background: var(--status-neutral-bg); color: var(--status-neutral-text); }
.tag-logistic.is-full { background: var(--status-info-bg); color: var(--status-info-text); }
.badge-channel { width: 20px !important; height: 20px !important; border-radius: 5px !important; display: inline-flex !important; align-items: center; justify-content: center; font: 800 10px/1 var(--font-sans) !important; border: 0 !important; }
.badge-channel.badge-catalog { background: var(--status-info-bg) !important; color: var(--status-info-text) !important; }
.badge-channel.badge-traditional { background: var(--status-attention-bg) !important; color: var(--status-attention-text) !important; }
.sku-mlb-badge-group { display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; }
.sku-mlb-badge-btn { min-height: 0 !important; height: auto; padding: 0 !important; border: 0 !important; background: none !important; color: var(--text-secondary) !important; font: 500 12px/1.3 var(--font-sans) !important; box-shadow: none !important; }
.sku-mlb-badge-btn:hover { color: var(--link) !important; text-decoration: underline; }
.sku-buybox-line { margin-top: 5px; }
.badge-buybox { display: inline-flex !important; align-items: center; padding: 1px 6px !important; border-radius: 999px !important; font: 600 10.5px/1.4 var(--font-sans) !important; border: 0 !important; }
.badge-buybox.winning { background: var(--status-connected-bg) !important; color: var(--status-connected-text) !important; }
.badge-buybox.sharing { background: var(--status-info-bg) !important; color: var(--status-info-text) !important; }
.badge-buybox.losing { background: var(--status-attention-bg) !important; color: var(--status-attention-text) !important; }
.badge-buybox.neutral { background: var(--status-neutral-bg) !important; color: var(--status-neutral-text) !important; }
.badge-buybox.shared, .badge.risk { background: var(--status-risk-bg) !important; color: var(--status-risk-text) !important; }
.promo-price-block, .stock-cell-block, .sales-cell-block, .fee-cell-block, .shipping-cell-block, .payout-cell-block, .cost-cell-block, .margin-cell-block {
  display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center; gap: 3px !important; text-align: right;
}
.promo-price-block del { font-size: 11.5px; color: var(--text-faint) !important; }
.promo-price-line { display: inline-flex; align-items: center; gap: 6px; }
.price-current, .promo-price-block strong { font-size: 13.5px; font-weight: 700; color: var(--text-primary) !important; }
.stock-num { font-size: 13px; font-weight: 650; }
.stock-num strong { font-weight: inherit; }
.sales-total-val { font-size: 13.5px !important; font-weight: 700 !important; color: var(--text-primary) !important; }
.boost-note { font-size: 11px !important; font-weight: 600; color: var(--status-connected-text) !important; white-space: nowrap; }
.net-payout { font-size: 13.5px; font-weight: 700; }
.cost-add-btn { min-height: 0 !important; height: auto; padding: 0 !important; border: 0 !important; background: none !important; color: var(--link) !important; font: 600 11px/1.2 var(--font-sans) !important; box-shadow: none !important; }
.cost-add-btn:hover { text-decoration: underline; }
.margin-cell-block .margin-pct { order: -1; font: 700 12px/1.2 var(--font-mono) !important; padding: 3px 7px !important; border-radius: 6px !important; color: var(--status-neutral-text); background: var(--status-neutral-bg); }
.margin-cell-block .margin-pct.success { color: var(--status-connected-text) !important; background: var(--status-connected-bg) !important; }
.margin-cell-block .margin-pct.warning { color: var(--status-attention-text) !important; background: var(--status-attention-bg) !important; }
.margin-cell-block .margin-pct.danger { color: var(--status-danger-text) !important; background: var(--status-danger-bg) !important; }
.margin-cell-block .margin-amt { font-size: 11px !important; font-weight: 500 !important; color: var(--text-muted) !important; }
.trend-cell-block { display: flex !important; align-items: center; gap: 8px; }
.sparkline-svg { flex: none; color: var(--text-faint); }
.sparkline-svg.trend-up { color: var(--status-connected-text); }
.sparkline-svg.trend-down { color: var(--status-risk-text); }
.trend-pill { font: 600 11px/1 var(--font-mono) !important; padding: 0 !important; background: none !important; border: 0 !important; color: var(--text-muted) !important; }
.trend-pill.up { color: var(--status-connected-text) !important; }
.trend-pill.down { color: var(--status-risk-text) !important; }

/* Pagination */
.cn-pagination, .data-table-pager { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px !important; border-top: 1px solid var(--border) !important; background: var(--table-head) !important; color: var(--text-muted); font-size: 12.5px; }
.cn-pagination-meta { display: flex; align-items: center; gap: 12px; }
.cn-pagination-meta [data-page-range] { color: var(--text-muted); }
.cn-pagination-content { display: flex; align-items: center; gap: 4px; }
.cn-pagination-link { min-height: 32px !important; height: 32px; padding: 0 10px !important; border-radius: 8px !important; border: 1px solid var(--border) !important; background: transparent !important; color: var(--text-secondary) !important; font: 600 12px/1 var(--font-sans) !important; box-shadow: none !important; display: inline-flex; align-items: center; gap: 4px; }
.cn-pagination-link:hover:not([disabled]) { background: var(--surface-active) !important; color: var(--text-primary) !important; }
.cn-pagination-link[disabled] { color: var(--text-disabled) !important; }

/* ---------- KPI cards ---------- */
.portal-metric-strip, .dashboard-kpi-strip, .module-kpi-strip { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 12px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; }
.portal-metric, .module-kpi {
  display: flex !important; flex-direction: column; gap: 8px; min-height: 0; padding: 16px 16px 14px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; box-shadow: none !important;
}
.metric-top, .module-kpi-top { display: flex !important; justify-content: space-between; align-items: center; gap: 8px; }
.metric-label, .module-kpi-top > span:first-child { font-size: 12.5px !important; font-weight: 600 !important; color: var(--text-secondary) !important; text-transform: none !important; letter-spacing: 0 !important; }
.metric-val, .module-kpi > strong { font: 700 26px/1.15 var(--font-sans) !important; letter-spacing: -.02em !important; color: var(--text-strong) !important; }
.metric-val small { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.metric-sub, .module-kpi > small { font-size: 12px !important; color: var(--text-muted) !important; }
.metric-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--status-neutral-dot); }
.metric-dot.green { background: var(--status-connected-dot); }
.metric-dot.blue { background: var(--status-info-dot); }
.metric-dot.red { background: var(--status-danger-dot); }
.metric-badge { font: 600 10.5px/1 var(--font-mono); color: var(--text-muted); }
.kpi-spark { display: block; width: 100%; height: 34px; }
.kpi-spark .spark-area { fill: var(--blue-light); }
.kpi-spark .spark-line { fill: none; stroke: var(--chart-1); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.kpi-spark.is-empty .spark-line { stroke: var(--border-strong); stroke-dasharray: 4 4; }
.kpi-chip { font: 600 11px/1 var(--font-mono); padding: 3px 7px; border-radius: 6px; color: var(--tone-fg, var(--status-neutral-text)); background: var(--tone-bg, var(--status-neutral-bg)); white-space: nowrap; }
.metric-val.is-missing, .module-kpi > strong.is-missing { color: var(--text-disabled) !important; }

/* ---------- Dashboard ---------- */
.coverage-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.coverage-strip-title { display: inline-flex; align-items: center; gap: 8px; padding: 0 6px 0 4px; font-size: 12.5px; font-weight: 650; color: var(--text-primary); }
.coverage-strip-title svg { color: var(--accent-icon); }
.coverage-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--surface-raised); border: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); }
.coverage-chip .freshness-dot { width: 7px; height: 7px; }
.coverage-chip-state { font: 500 11px/1 var(--font-mono); color: var(--text-muted); }
.coverage-chip-state.tone-warning, .coverage-chip-state.tone-danger { color: var(--tone-fg); }
.dashboard-analytics-grid { display: grid !important; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr) !important; gap: 12px !important; margin: 0 !important; }
.dashboard-chart-card, .dashboard-channel-summary { display: flex !important; flex-direction: column; gap: 14px; padding: 18px !important; min-width: 0; }
.dashboard-triage-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important; gap: 12px !important; margin: 0 !important; }
.triage-card { display: flex !important; flex-direction: column; padding: 0 !important; overflow: hidden; }
.triage-card > .card-header { align-items: center; padding: 14px 16px !important; border-bottom: 1px solid var(--border-subtle); margin: 0 !important; }
.triage-card > .card-header h3 { font-size: 14px !important; margin: 0 !important; }
.triage-head-icon { width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--tone-bg); color: var(--tone-fg); }
.triage-head-icon svg { width: 15px; height: 15px; }
.triage-head { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.triage-head small { display: block; font-size: 11.5px; color: var(--text-muted); }
.triage-head small.tone-warning, .triage-head small.tone-danger { color: var(--tone-fg); }
.triage-list { padding: 0 !important; margin: 0 !important; list-style: none; }
.triage-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border-subtle); }
.triage-item:last-child { border-bottom: 0; }
.triage-item:hover { background: var(--surface-hover); }
.triage-rank { width: 20px; flex: none; font: 500 11px/1 var(--font-mono); color: var(--text-faint); }
.triage-item-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.triage-item-copy > span:first-child, .triage-item-copy > button { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.triage-item-copy > button { min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; text-align: left; box-shadow: none !important; font: 600 13px/1.3 var(--font-sans) !important; color: var(--text-primary) !important; }
.triage-item-copy > button:hover { color: var(--link) !important; }
.triage-item-copy small { font: 500 10.5px/1.3 var(--font-mono); color: var(--text-muted); }
.triage-item-copy small.tone-danger, .triage-item-copy small.tone-risk, .triage-item-copy small.tone-warning { font-family: var(--font-sans); font-size: 11.5px; color: var(--tone-fg); }
.triage-metric { flex: none; text-align: right; font: 600 12.5px/1.2 var(--font-sans); color: var(--text-secondary); white-space: nowrap; }
.triage-metric.is-positive { color: var(--status-connected-text); font-weight: 700; }
.triage-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; background: var(--tone-dot); }
.triage-empty-copy { margin: 0 !important; padding: 20px 16px; font-size: 12.5px; color: var(--text-muted) !important; }
.card-link { font-size: 12px; font-weight: 600; color: var(--link) !important; text-decoration: none; white-space: nowrap; }
.dashboard-channel-body { display: flex; flex-direction: column; gap: 0; }
.channel-summary-head { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: var(--surface-raised); border: 1px solid var(--border); margin-bottom: 4px; }
.channel-summary-head > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.channel-summary-head strong { font-size: 13.5px; }
.channel-summary-head small { font: 500 11px/1.3 var(--font-mono); color: var(--text-muted); }
.channel-summary-head time { font: 500 11px/1 var(--font-mono); color: var(--text-secondary); }
.domain-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--border-subtle); }
.domain-row-name { flex: 1; font-size: 12.5px; color: var(--text-secondary); }
.domain-row time { width: 44px; text-align: right; font: 500 11px/1 var(--font-mono); color: var(--text-muted); }
.channel-summary-link { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 10px; border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text-secondary) !important; text-decoration: none; }
.channel-summary-link:hover { background: var(--surface-raised); color: var(--text-primary) !important; }
.chart-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.chart-card-head h3 { margin: 0 !important; font: 700 15px/1.3 var(--font-sans) !important; }
.chart-card-head small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-muted); }
.chart-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); }
.legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--chart-1); }
.legend-swatch.is-missing { background: repeating-linear-gradient(135deg, var(--chart-missing-border) 0 2px, transparent 2px 4px); border: 1px dashed var(--chart-missing-border); box-sizing: border-box; }
.legend-swatch.is-previous { background: var(--chart-2); }
.store-daily-chart { display: flex; flex-direction: column; gap: 12px; }
.store-chart-canvas-wrap { position: relative; height: 236px; }
.store-chart-footer { display: flex !important; flex-wrap: wrap; gap: 8px 20px; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-size: 12px; color: var(--text-muted); background: none !important; }
.store-chart-footer strong, .store-chart-footer b { color: var(--text-primary); }
.store-chart-footer .missing-note { color: var(--status-attention-text); }

/* ---------- SKU drawer (GavetaSku.dc.html) ---------- */
.drawer-backdrop, .sidebar-backdrop, .bulk-sheet-backdrop { background: var(--backdrop) !important; backdrop-filter: blur(2px); }
.portal-drawer-right {
  width: min(600px, 100%) !important; max-width: 100% !important; background: var(--surface) !important; border-left: 1px solid var(--border-strong) !important; box-shadow: var(--shadow-overlay) !important;
  display: flex !important; flex-direction: column; color: var(--text-primary);
}
.portal-drawer-right[hidden] { display: none !important; }
.drawer-header { position: sticky; top: 0; z-index: 3; display: flex !important; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px !important; background: var(--surface) !important; border-bottom: 0 !important; }
.drawer-header h2 { margin: 4px 0 8px !important; font: 750 20px/1.25 var(--font-sans) !important; letter-spacing: -.02em; color: var(--text-primary) !important; }
.drawer-header-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.drawer-sku-badge { font: 500 11.5px/1 var(--font-mono) !important; color: var(--text-secondary) !important; background: var(--surface-active) !important; padding: 4px 8px !important; border-radius: 6px !important; border: 0 !important; }
.drawer-close-btn { width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; border-radius: 9px !important; background: transparent !important; border: 1px solid var(--border) !important; color: var(--text-muted) !important; font-size: 15px !important; flex: none; }
.drawer-nav {
  position: sticky; top: 0; z-index: 2; display: flex !important; gap: 2px !important; overflow-x: auto; scrollbar-width: none; padding: 0 16px !important; background: var(--surface) !important;
  border-top: 0 !important; border-bottom: 1px solid var(--border) !important; flex: none;
}
.drawer-nav::-webkit-scrollbar { display: none; }
.drawer-tab-btn { flex: none; min-height: 42px !important; height: 42px; padding: 0 12px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--text-muted) !important; font: 600 12.5px/1 var(--font-sans) !important; box-shadow: none !important; white-space: nowrap; }
.drawer-tab-btn:hover { color: var(--text-primary) !important; background: transparent !important; }
.drawer-tab-btn.active, .drawer-tab-btn[aria-selected="true"] { color: var(--text-strong) !important; box-shadow: inset 0 -2px 0 var(--accent) !important; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px 28px !important; background: var(--surface) !important; }
.drawer-section { margin: 0 0 16px !important; padding: 0 !important; background: none !important; border: 0 !important; }
.drawer-section-title { margin: 0 0 10px !important; font: 500 11px/1.3 var(--font-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--text-faint) !important; }
.drawer-section-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.drawer-info-grid, .drawer-kpi-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
.drawer-info-item, .drawer-kpi-box { display: flex !important; flex-direction: column; gap: 4px; padding: 12px !important; background: var(--surface-raised) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; }
.drawer-info-item-wide { grid-column: 1 / -1; }
.info-label, .drawer-kpi-box > span { font-size: 11.5px !important; font-weight: 600; color: var(--text-muted) !important; }
.info-val, .drawer-kpi-box > strong { font: 700 15px/1.25 var(--font-sans) !important; color: var(--text-primary) !important; overflow-wrap: anywhere; }
.drawer-kpi-box > strong { font-size: 19px !important; letter-spacing: -.01em; }
.dre-list { display: flex !important; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-raised); }
.dre-row { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 12px !important; border: 0 !important; border-bottom: 1px solid var(--border-subtle) !important; background: transparent !important; font-size: 12px; line-height: 1.4; margin: 0 !important; border-radius: 0 !important; }
.dre-row:last-child { border-bottom: 0 !important; }
.dre-label { color: var(--text-secondary) !important; }
.dre-row.deduction .dre-label { padding-left: 8px; }
.dre-row.addition .dre-val { color: var(--status-connected-text) !important; }
.dre-row.subtotal { background: var(--surface-active) !important; }
.dre-row.subtotal .dre-label, .dre-row.subtotal .dre-val { font-weight: 700; color: var(--text-strong) !important; }
.dre-row.result { background: var(--selection-bg) !important; border-top: 1px solid var(--border) !important; }
.dre-row.result .dre-label { font-weight: 700; color: var(--text-primary) !important; }
.dre-row.result .dre-val { font-size: 12.5px; font-weight: 700; }
.dre-row.result.success .dre-val { color: var(--status-connected-text) !important; }
.dre-row.result.warning .dre-val { color: var(--status-attention-text) !important; }
.dre-row.result.danger .dre-val { color: var(--status-danger-text) !important; }
.dre-val { font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }
.stat-lines-list { display: flex !important; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.stat-row-line { display: flex !important; justify-content: space-between; gap: 12px; padding: 10px 14px !important; border-bottom: 1px solid var(--border-subtle) !important; background: var(--surface-raised) !important; margin: 0 !important; border-radius: 0 !important; }
.stat-row-line:last-child { border-bottom: 0 !important; }
.stat-line-label { color: var(--text-secondary); font-size: 12.5px; }
.reasons-triad-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 8px !important; }
.reasons-triad-col { padding: 12px !important; background: var(--surface-raised) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; }
.triad-title { display: block; margin-bottom: 8px; font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.triad-list { margin: 0; padding: 0 0 0 16px; font-size: 12.5px; color: var(--text-secondary); }
.form-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 10px !important; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.drawer-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.drawer-financial-note { font-size: 12px !important; margin: -4px 0 10px !important; }
.history-timeline { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Bulk cost editor: centered modal up to 1040 px (CustosEmMassa.dc.html) ---------- */
.bulk-costs-sheet {
  position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important;
  width: min(1040px, calc(100vw - 32px)) !important; max-width: none !important; height: auto !important; max-height: calc(100dvh - 48px) !important;
  display: flex !important; flex-direction: column; background: var(--surface) !important; border: 1px solid var(--border-strong) !important; border-radius: 16px !important;
  box-shadow: var(--shadow-overlay) !important; overflow: hidden; z-index: 1200 !important;
}
.bulk-costs-sheet[hidden] { display: none !important; }
.bulk-sheet-header { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px !important; border-bottom: 1px solid var(--border) !important; background: var(--surface) !important; }
.bulk-sheet-header h2 { margin: 4px 0 4px !important; font: 750 20px/1.25 var(--font-sans) !important; letter-spacing: -.02em; }
.bulk-sheet-header p { margin: 0 !important; font-size: 12.5px; }
.bulk-sheet-body { flex: 1; overflow-y: auto; padding: 16px 20px !important; display: flex; flex-direction: column; gap: 12px; background: var(--surface) !important; }
.bulk-costs-step { padding: 14px 16px !important; background: var(--surface-raised) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; }
.bulk-costs-step-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bulk-step-title { display: block; font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.bulk-step-copy { display: block; font-size: 12px; margin-top: 2px; }
.costs-upload-zone { margin-top: 10px; display: flex !important; flex-direction: column; align-items: center; gap: 6px; padding: 22px !important; border: 1px dashed var(--border-strong) !important; border-radius: 12px !important; background: var(--surface-sunken) !important; cursor: pointer; text-align: center; }
.costs-upload-zone:hover, .costs-upload-zone.dragover { border-color: var(--accent) !important; background: var(--selection-bg) !important; }
.costs-upload-icon { color: var(--accent-icon); }
.bulk-direct-edit { border: 1px solid var(--border) !important; border-radius: 12px !important; background: var(--surface) !important; overflow: hidden; }
.bulk-direct-edit > summary { padding: 12px 16px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-primary); background: var(--surface-raised); list-style-position: inside; }
.bulk-edit-scroll { max-height: 50vh; overflow: auto !important; }
.bulk-edit-table thead th { position: sticky !important; top: 0; z-index: 1; }
.bulk-input { width: 100%; min-width: 90px; height: 34px !important; min-height: 34px !important; text-align: right; font-variant-numeric: tabular-nums; }
.bulk-input.is-changed, .bulk-input[data-changed="true"] { border-color: var(--blue-border) !important; background: var(--selection-bg) !important; }
.bulk-sheet-footer { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px !important; border-top: 1px solid var(--border) !important; background: var(--table-head) !important; }
.bulk-sheet-actions { display: flex; gap: 8px; }

/* ---------- Canais ---------- */
.channel-list-workspace { display: flex !important; flex-direction: column; gap: 12px !important; }
.channel-card { padding: 18px !important; display: flex !important; flex-direction: column; gap: 16px; }
.channel-heading-workspace { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.channel-name-workspace { display: flex; align-items: center; gap: 12px; }
.channel-title { margin: 0 !important; display: flex; align-items: center; gap: 8px; font: 700 16px/1.3 var(--font-sans) !important; }
.channel-subtitle { margin: 2px 0 0 !important; font: 500 11.5px/1.3 var(--font-mono) !important; color: var(--text-muted) !important; }
.channel-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.channel-actions form { margin: 0; }
.channel-meta-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 8px !important; margin: 0 !important; }
.channel-meta-item { padding: 12px !important; background: var(--surface-raised) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; margin: 0 !important; }
.channel-meta-item dt { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.channel-meta-item dd { margin: 4px 0 2px !important; font: 700 18px/1.2 var(--font-sans); color: var(--text-primary); }
.channel-meta-item small { font-size: 11px; color: var(--text-muted); }
.channel-domain-section h4 { margin: 0 0 10px !important; font: 500 11px/1.3 var(--font-mono) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint) !important; }
.channel-domain-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 8px !important; }
.channel-domain-card { display: flex !important; flex-direction: column; gap: 10px; padding: 12px !important; background: var(--surface-raised) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; }
.channel-domain-card strong { display: block; font-size: 13px; color: var(--text-primary); }
.channel-domain-card span:not(.badge) { display: block; font-size: 11.5px; color: var(--text-muted); }
.channel-domain-status { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.channel-domain-status time { font: 500 11px/1 var(--font-mono); color: var(--text-secondary); }
.channel-card-coming { opacity: 1; }
.channel-card-coming .channel-logo { filter: saturate(.75); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .dashboard-analytics-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 1100px) {
  .portal-sidebar { width: 220px !important; min-width: 220px !important; max-width: 220px !important; }
  .portal-main-area { margin-left: 220px !important; width: calc(100% - 220px) !important; }
  .topbar-search { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
}
@media (max-width: 860px) {
  .portal-sidebar { width: 260px !important; min-width: 260px !important; max-width: 260px !important; }
  .portal-main-area, .portal-app-shell.sidebar-collapsed .portal-main-area { margin-left: 0 !important; width: 100% !important; }
  .portal-topbar { padding: 10px 16px !important; }
  .topbar-right { margin-left: 0 !important; width: 100%; }
  .freshness-wrap { flex: 1 1 auto; }
  .sync-freshness-pill { width: 100% !important; }
  .freshness-copy { flex: 1; }
  .freshness-popover { left: 0 !important; right: auto !important; width: min(340px, calc(100vw - 32px)); }
  .portal-main-content { padding: 16px 16px 40px !important; }
  .portal-heading h1 { font-size: 24px !important; }
}
@media (max-width: 520px) {
  .topbar-channel-selector .channel-trigger-copy { display: none; }
  .ui-select-channel .ui-select-trigger { padding: 0 8px !important; }
  .portal-toolbar .ui-select { flex: 1 1 calc(50% - 4px); }
  .portal-toolbar .ui-select-trigger { width: 100%; }
  .portal-toolbar .ui-select-value { flex: 1; }
  .priority-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .priority-tile { padding: 12px !important; gap: 10px; }
  .priority-tile-icon { width: 28px; height: 28px; }
  .priority-tile small { display: none; }
  .portal-floating-toast { left: 16px !important; right: 16px !important; bottom: 16px !important; max-width: none; }
  .drawer-info-grid, .drawer-kpi-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
body { max-width: 100%; overflow-x: clip; }

/* ---------- Dashboard: KPI card grid, period pill, chart fallback ---------- */
.kpi-card { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label chip" "value value" "spark spark" "foot foot"; align-items: center; row-gap: 8px !important; column-gap: 8px; min-height: 156px; }
.kpi-card > .metric-label { grid-area: label; }
.kpi-card > .kpi-chip { grid-area: chip; justify-self: end; }
.kpi-card > .metric-val { grid-area: value; }
.kpi-card > .kpi-spark { grid-area: spark; }
.kpi-card > .metric-sub { grid-area: foot; }
.period-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.period-pill svg { color: var(--text-muted); }
.store-chart-canvas-wrap canvas { display: block; width: 100% !important; height: 100% !important; }
.store-daily-chart:not(.is-chart-ready) #store-daily-chart-canvas { display: none; }
.store-chart-bars { height: 100% !important; gap: 4px !important; padding: 0 !important; border-bottom: 1px solid var(--chart-axis) !important; }
.store-bar-track { max-width: none !important; background: transparent !important; border-radius: 4px 4px 2px 2px !important; }
.store-bar-fill.active { background: linear-gradient(180deg, var(--chart-1), var(--chart-1-deep)) !important; border-radius: 4px 4px 2px 2px !important; }
.store-bar-fill.missing { height: 100% !important; box-sizing: border-box; background: repeating-linear-gradient(135deg, var(--chart-missing-border) 0 1px, var(--chart-missing) 1px 6px) !important; border: 1px dashed var(--chart-missing-border); border-radius: 4px !important; opacity: .7; }

/* ---------- Fulfillment ---------- */
.fulfillment-table { min-width: 1080px; table-layout: fixed; }
.fulfillment-table > thead > tr > th:nth-child(n+2) { width: 104px; }
.fulfillment-table > thead > tr > th.col-coverage { width: 220px; }
.portal-table th.num-head { text-align: right !important; }
.coverage-cell { display: flex; align-items: center; gap: 10px; }
.coverage-days { width: 56px; flex: none; font: 700 12px/1 var(--font-mono); color: var(--tone-fg, var(--text-muted)); }
.coverage-bar { flex: 1; height: 8px; min-width: 60px; }
.coverage-track { fill: var(--skeleton); }
.coverage-fill { fill: var(--tone-dot, var(--status-neutral-dot)); }
.coverage-goal { fill: var(--text-primary); opacity: .5; }
.fulfillment-suggestion { font-weight: 700; color: var(--text-primary); }
.table-formula-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--table-head); font-size: 12px; color: var(--text-muted); }
.goal-mark { display: inline-block; width: 2px; height: 10px; margin-right: 6px; background: var(--text-primary); opacity: .5; vertical-align: -1px; }
article.priority-tile { cursor: default; }
article.priority-tile:hover { border-color: var(--border) !important; background: var(--surface) !important; }
.segmented > button { min-height: 32px !important; }
/* Campanhas: alternatives note inside expanded rows */
.promo-children-row .sku-children-header, .return-children-row .sku-children-header { padding-left: 20px !important; }
.module-kpi-top .badge { margin-left: auto; }
/* Topbar fit: one row on desktop (≥ 1180 px), wraps search to its own row below that. */
.topbar-search { flex: 1 1 200px; min-width: 180px; }
.topbar-right { flex-wrap: nowrap; }
.portal-metric-strip, .dashboard-kpi-strip, .module-kpi-strip { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; }
@media (max-width: 1360px) { .topbar-search kbd { display: none; } }
@media (max-width: 860px) { .topbar-right { flex-wrap: wrap; } }
@media (max-width: 640px) { .topbar-channel-selector .channel-trigger-copy { display: none; } .ui-select-channel .ui-select-trigger { padding: 0 8px !important; } }

/* ---------- Bulk editor toolbar and rows ---------- */
.bulk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.bulk-search { flex: 1 1 220px; }
.bulk-apply-tax { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.bulk-apply-tax input { width: 110px; height: 32px !important; min-height: 32px !important; }
.bulk-sheet-body { padding: 0 !important; gap: 0 !important; }
.bulk-edit-scroll { max-height: min(52vh, 560px) !important; }
.bulk-edit-table { min-width: 760px; }
.bulk-edit-table td { padding: 6px 10px !important; }
.bulk-sku-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 340px; }
.bulk-sku-cell .tag-code { color: var(--text-secondary) !important; }
.bulk-margin { font: 700 12px/1 var(--font-mono); padding: 3px 7px; border-radius: 6px; color: var(--tone-fg); background: var(--tone-bg); }
.bulk-import { margin: 12px 20px 16px; }
.bulk-import .bulk-costs-step { margin: 12px; }
.bulk-footer-note { font-size: 12.5px; color: var(--text-muted); display: flex; flex-direction: column; gap: 2px; }
.bulk-footer-note strong { color: var(--text-primary); }
.bulk-footer-note small { font-size: 11.5px; color: var(--text-faint); }
.portal-floating-toast.toast-warning { border-left-color: var(--status-attention-dot) !important; }

/* ---------- Client invite flow: brand panel + steps (Convite.dc.html) ---------- */
.client-main.client-main-flow { width: min(960px, calc(100vw - 32px)) !important; display: grid !important; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); grid-template-rows: auto 1fr; padding: 0 !important; overflow: hidden; border-radius: 16px !important; border-color: var(--border-strong) !important; background: var(--surface) !important; box-shadow: var(--shadow-overlay) !important; }
.client-main-flow > .brand { grid-column: 1; grid-row: 1; justify-content: flex-start !important; margin: 0 !important; padding: 32px 32px 0; background: var(--sidebar-bg); color: var(--sidebar-active-fg) !important; }
.client-main-flow > .brand .brand-logo { width: 32px !important; height: 32px !important; }
.invite-brand-panel { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 12px; padding: 28px 32px 32px; background: var(--sidebar-bg); background-image: radial-gradient(ellipse at 0% 100%, var(--selection-strong), transparent 60%); color: var(--sidebar-fg); }
.invite-brand-title { margin: 0 !important; font: 750 26px/1.2 var(--font-sans); letter-spacing: -.03em; color: var(--sidebar-active-fg) !important; }
.invite-brand-copy { margin: 0 !important; font-size: 13.5px; line-height: 1.55; color: var(--sidebar-fg) !important; }
.invite-brand-foot { margin: auto 0 0 !important; padding-top: 16px; border-top: 1px solid var(--sidebar-border); font: 500 11px/1.5 var(--font-mono); color: var(--sidebar-muted) !important; }
.client-main-flow > .invite-flow, .client-main-flow > :not(.brand):not(.invite-brand-panel) { grid-column: 2; grid-row: 1 / span 2; padding: 36px 36px 28px; }
.invite-steps { justify-content: flex-start !important; }
.invite-steps li.is-current .invite-step-dot { background: var(--blue) !important; border-color: var(--blue-border) !important; color: var(--text-on-accent) !important; }
.invite-title { font-size: 24px !important; font-weight: 750 !important; letter-spacing: -.03em !important; }
.invite-company { background: var(--surface-raised) !important; border-color: var(--border) !important; border-radius: 12px !important; }
.invite-email { border-radius: 10px !important; }
.invite-flow .otp-digit { background: var(--surface-sunken) !important; border-color: var(--border-strong) !important; border-radius: 10px !important; font-family: var(--font-mono) !important; }
.invite-flow .verification-primary { border-radius: 10px !important; border: 1px solid var(--blue-border) !important; }
@media (max-width: 860px) {
  .client-main.client-main-flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; width: min(520px, calc(100vw - 24px)) !important; }
  .invite-brand-panel { display: none; }
  .client-main-flow > .brand { padding: 22px 22px 0; background: transparent; color: var(--text-primary) !important; justify-content: center !important; }
  .client-main-flow > .invite-flow, .client-main-flow > :not(.brand):not(.invite-brand-panel) { grid-column: 1; grid-row: 2; padding: 18px 20px 22px; }
}

/* =====================================================================================================================
   ADMIN (AdminNav / AdminLogin / AdminEmpresas / AdminEmpresa / AdminDialogos)
   ===================================================================================================================== */
.preview-disclaimer { margin-bottom: 12px; }
/* Summary cards that also filter */
.stat-label { display: flex; width: 100%; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.stat-indicator { width: 8px; height: 8px; border-radius: 99px; background: var(--status-info-dot); }
/* Company list card */
.search-clear { min-height: 24px !important; width: 24px; padding: 0 !important; border: 0 !important; background: none !important; color: var(--text-muted) !important; }
.company { display: flex !important; align-items: center; gap: 12px; }
.avatar { display: inline-grid !important; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px !important; overflow: hidden; background: var(--blue-light) !important; color: var(--status-info-text) !important; font: 700 12px/1 var(--font-sans); border: 1px solid var(--border) !important; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-large { width: 48px !important; height: 48px !important; border-radius: 12px !important; font-size: 15px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; text-align: center; }
.empty strong { font-size: 14px; color: var(--text-primary); }
.empty p { margin: 0; font-size: 12.5px; color: var(--text-muted); }
/* Company management: single column up to 1000 px, stacked blocks */
.text-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 12.5px; font-weight: 600; color: var(--link) !important; text-decoration: none; }
.company-heading { align-items: center !important; }
.company-title { display: flex; align-items: center; gap: 14px; }
.company-sections { display: flex !important; flex-direction: column; gap: 12px !important; }
.block-heading { display: flex; align-items: flex-start; gap: 12px; }
.block-heading h2 { margin: 0 !important; font: 700 15px/1.3 var(--font-sans) !important; color: var(--text-primary) !important; }
.block-heading p { margin: 2px 0 0 !important; font-size: 12.5px; }
.block-step { font: 600 11px/1 var(--font-mono); padding: 5px 7px; border-radius: 7px; background: var(--surface-active); color: var(--accent-icon); }
.form-grid { gap: 12px !important; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.notice-warning { display: flex; gap: 8px; margin: 12px 0 0 !important; padding: 10px 12px !important; border-radius: 10px; border: 1px solid var(--status-attention-border); background: var(--status-attention-bg); color: var(--status-attention-text) !important; font-size: 12.5px !important; }
.form-footer, .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.channel-list:not(.channel-list-workspace) { display: grid; gap: 10px; }
.channel-list:not(.channel-list-workspace) .channel { padding: 14px !important; border: 1px solid var(--border) !important; border-radius: 12px !important; background: var(--surface-raised) !important; }
.channel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.channel-name { display: flex; align-items: center; gap: 12px; }
.channel-name h3 { margin: 0 !important; font-size: 14px; }
.channel-name p { margin: 2px 0 0 !important; font-size: 12px; color: var(--text-muted) !important; }
.channel-detail { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; font-size: 12.5px; }
.channel-alert { padding: 8px 10px; border-radius: 8px; background: var(--status-danger-bg); color: var(--status-danger-text) !important; border: 1px solid var(--status-danger-border); }
.invite-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.invite-toolbar .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-toolbar form, .invite-actions form { margin: 0; }
.invite-actions { display: flex; justify-content: flex-end; gap: 6px; align-items: center; }
.unavailable-link { font-size: 12px; color: var(--text-muted); }
.invite-note { margin: 10px 0 0 !important; font-size: 12px; color: var(--text-muted) !important; }
/* Dialogs */
.modal-scroll { padding: 18px !important; }
/* Login: form left, brand panel right; form first on phones */
.auth-shell { min-height: 100dvh; display: grid !important; place-items: center; padding: 32px 16px !important; background: var(--canvas) !important; }
.auth-card { width: min(960px, 100%) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); overflow: hidden; background: var(--surface) !important; border: 1px solid var(--border-strong) !important; border-radius: 16px !important; box-shadow: var(--shadow-overlay) !important; }
.auth-form { order: 1; padding: 44px 44px 36px !important; display: flex; flex-direction: column; gap: 10px; background: var(--surface) !important; }
.auth-form h2 { margin: 4px 0 0 !important; font: 750 26px/1.2 var(--font-sans) !important; letter-spacing: -.03em; color: var(--text-primary) !important; }
.auth-form > p { margin: 0 0 8px !important; color: var(--text-muted) !important; }
.auth-form form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.auth-form [data-sign-in] { width: 100%; min-height: 44px !important; margin-top: 6px; box-shadow: var(--shadow-primary) !important; }
.auth-error { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--status-danger-border); background: var(--status-danger-bg); color: var(--status-danger-text); font-size: 13px; }
.auth-aside { order: 2; display: flex !important; flex-direction: column; gap: 20px; padding: 40px 36px !important; background: var(--sidebar-bg) !important; background-image: radial-gradient(ellipse at 100% 0%, var(--selection-strong), transparent 55%) !important; color: var(--sidebar-fg) !important; border: 0 !important; }
.auth-aside .auth-brand { display: flex; align-items: center; gap: 10px; color: var(--sidebar-active-fg) !important; font: 800 17px/1 var(--font-sans); }
.auth-aside .auth-brand img { width: 30px; height: 30px; }
.auth-aside h1 { margin: 0 0 6px !important; font: 750 24px/1.2 var(--font-sans) !important; letter-spacing: -.03em; color: var(--sidebar-active-fg) !important; }
.auth-aside p, .auth-aside .form-note { color: var(--sidebar-fg) !important; }
.auth-aside > .form-note { margin-top: auto; font: 500 11px/1.4 var(--font-mono); color: var(--sidebar-muted) !important; }
.auth-feature-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.auth-feature-list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--sidebar-card); border: 1px solid var(--sidebar-border); }
.auth-feature-list strong { font-size: 13px; color: var(--sidebar-active-fg); }
.auth-feature-list span { font-size: 12px; color: var(--sidebar-muted); }
.auth-mobile-brand { display: none !important; }
@media (max-width: 820px) {
  .auth-card { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { padding: 24px !important; }
  .auth-feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-form { padding: 28px 22px !important; }
  .auth-mobile-brand { display: flex !important; align-items: center; gap: 8px; font-weight: 800; }
}
.portal-metric-strip, .dashboard-kpi-strip, .module-kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) { .portal-metric-strip, .dashboard-kpi-strip, .module-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 520px) { .portal-metric-strip, .dashboard-kpi-strip, .module-kpi-strip { grid-template-columns: minmax(0, 1fr) !important; } }
.store-chart-footer { font-family: var(--font-sans) !important; justify-content: flex-start !important; }
.listing-table > thead > tr > th:nth-child(3), .listing-child-table > thead > tr > th:nth-child(3) { width: 116px; }
.listing-table > thead > tr > th:nth-child(4), .listing-child-table > thead > tr > th:nth-child(4) { width: 150px; }
.listing-table { min-width: 1344px; }
.promo-price-block del, .promo-price-line { white-space: nowrap; }
.bulk-footer-note { display: block !important; } .bulk-footer-note small { display: block; margin-top: 2px; } .bulk-input { max-width: 140px; margin-left: auto; display: block; }
.portal-toolbar { flex-direction: row !important; align-items: center !important; } @media (max-width: 720px) { .portal-search-wrap { flex: 1 1 100% !important; width: 100%; } .portal-toolbar .ui-select { flex: 1 1 calc(50% - 4px); min-width: 0; } .portal-toolbar .ui-select-trigger { width: 100%; } .portal-toolbar .ui-select-value { flex: 1; } }
.sidebar-nav-item.active .sidebar-badge { background: color-mix(in srgb, var(--sidebar-active-fg) 20%, transparent) !important; color: var(--sidebar-active-fg) !important; }
.sidebar-alert-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-danger-dot) 22%, transparent); }
.form-grid .logo-field { grid-column: 1 / -1; } .form-grid label input { width: 100%; } 
/* ---------- Campanhas: campaign rows share the MLB grid (Campanhas.dc.html) ---------- */
.promo-table, .promo-child-table { table-layout: fixed !important; }
.promo-table { min-width: 1400px; }
.promo-child-table { min-width: 0 !important; }
.promo-table > thead > tr > th:nth-child(1), .promo-child-table > thead > tr > th:nth-child(1) { width: 44px; }
.promo-table > thead > tr > th:nth-child(3), .promo-child-table > thead > tr > th:nth-child(3) { width: 128px; }
.promo-table > thead > tr > th:nth-child(4), .promo-child-table > thead > tr > th:nth-child(4) { width: 112px; }
.promo-table > thead > tr > th:nth-child(5), .promo-child-table > thead > tr > th:nth-child(5) { width: 168px; }
.promo-table > thead > tr > th:nth-child(6), .promo-child-table > thead > tr > th:nth-child(6) { width: 176px; }
.promo-table > thead > tr > th:nth-child(7), .promo-child-table > thead > tr > th:nth-child(7) { width: 116px; }
.promo-table > thead > tr > th:nth-child(8), .promo-child-table > thead > tr > th:nth-child(8) { width: 176px; }
.promo-table > thead > tr > th:nth-child(9), .promo-child-table > thead > tr > th:nth-child(9) { width: 140px; }
.promo-table > thead > tr > th:nth-child(10), .promo-child-table > thead > tr > th:nth-child(10) { width: 104px; }
.aligned-child-table > tbody > tr > td { padding: 6px 10px !important; height: 52px; }
.promo-table td small, .promo-child-table td small { display: block; margin-top: 2px; }
.children-note { padding-left: 64px !important; }
.children-note span { display: inline-flex; align-items: center; gap: 8px; }
.children-note svg { color: var(--accent-icon); flex: none; }
.margin-inline { font: 600 11.5px/1.2 var(--font-mono); }

/* ---------- Devoluções: rate bar, reason triad and MLB chips (Devolucoes.dc.html) ---------- */
.returns-table { table-layout: fixed !important; min-width: 1180px; }
.returns-table > thead > tr > th:nth-child(1) { width: 44px; }
.returns-table > thead > tr > th:nth-child(3) { width: 190px; }
.returns-table > thead > tr > th:nth-child(4) { width: 150px; }
.returns-table > thead > tr > th:nth-child(5), .returns-table > thead > tr > th:nth-child(6) { width: 124px; }
.returns-table > thead > tr > th:nth-child(7) { width: 110px; }
.returns-table > thead > tr > th:nth-child(8) { width: 220px; }
.returns-volume { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.returns-volume strong { color: var(--text-primary); font-weight: 650; }
.return-claim-summary { display: block; margin-top: 3px; font-size: 11px; color: var(--status-attention-text); }
.rate-cell { display: flex; align-items: center; gap: 10px; }
.rate-value { width: 48px; flex: none; font: 700 12px/1 var(--font-mono); color: var(--tone-fg, var(--text-primary)); }
.rate-bar { flex: 1; height: 6px; min-width: 40px; }
.rate-track { fill: var(--skeleton); }
.rate-fill { fill: var(--tone-dot, var(--status-neutral-dot)); }
.reason-tag { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.returns-children { padding: 4px 20px 18px 64px !important; display: flex !important; flex-direction: column; gap: 14px; }
.returns-children .sku-children-header { padding: 8px 0 0 !important; }
.reason-triad { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.reason-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.reason-card-head { display: flex; align-items: center; gap: 10px; }
.reason-card-head strong { font-size: 13px; font-weight: 650; color: var(--text-primary); }
.reason-card-index { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font: 700 11px/1 var(--font-mono); color: var(--tone-fg); background: var(--tone-bg); }
.reason-line { display: flex; flex-direction: column; gap: 5px; }
.reason-line-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.reason-line-top .num { font: 500 11.5px/1.3 var(--font-mono); color: var(--text-muted); }
.reason-bar { width: 100%; height: 4px; }
.reason-track { fill: var(--skeleton); }
.reason-fill { fill: var(--tone-dot); }
.reason-card.tone-neutral .reason-fill { fill: var(--text-faint); }
.reason-empty { margin: 0 !important; font-size: 12px; color: var(--text-muted) !important; }
.mlb-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.mlb-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); }
.return-claims-section h4 { margin: 0 0 4px !important; font-size: 13px; color: var(--text-primary); }
.return-claims-list { display: grid; gap: 8px; margin-top: 8px; }
.return-claim-card { display: flex !important; justify-content: space-between; gap: 12px; padding: 10px 12px !important; border-radius: 10px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; }
.return-claim-card strong { display: block; font-size: 12.5px; color: var(--text-primary); }
.return-claim-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11px; color: var(--text-muted); }

/* ---------- Drawer: DRE bars and MLB selector, overview mini curve, diarization (GavetaSku.dc.html) ---------- */
.dre-mlb-selector { display: flex !important; flex-wrap: wrap; margin-bottom: 10px; max-width: 100%; }
.dre-mlb-selector[hidden] { display: none !important; }
.dre-mlb-selector > button { font-family: var(--font-mono) !important; font-size: 11px !important; height: 26px; min-height: 26px !important; padding: 0 8px !important; }
/* DRE (F-14): compact rows in the portal type scale (12px, like the tables); no per-line bars. A row may carry a
   short note under the value (e.g. "sem imposto" next to the margin). */
.dre-row:has(> .dre-note:not([hidden])) { flex-wrap: wrap; row-gap: 0 !important; }
.dre-note { flex-basis: 100%; text-align: right; font-size: 10.5px; font-weight: 500; line-height: 1.3; color: var(--text-muted); }
.dre-note[hidden] { display: none; }
.dre-formula { margin: 8px 0 0 !important; padding: 0; background: none; border: 0; font: 400 10.5px/1.5 var(--font-sans); color: var(--text-faint) !important; }
.drawer-curve-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.drawer-curve-legend .legend-swatch { margin: 0 0 0 6px; }
.drawer-mini-curve { padding: 12px; border-radius: 10px; background: var(--surface-raised); border: 1px solid var(--border); }
.mini-curve-svg { display: block; width: 100%; height: 64px; }
.mini-bar { fill: var(--chart-1); }
.mini-bar.is-zero { fill: var(--border-strong); }
.mini-missing { fill: url(#drawer-hatch); stroke: var(--chart-missing-border); stroke-width: .6; stroke-dasharray: 2 2; }
.mini-hatch-bg { fill: var(--chart-missing); }
.mini-hatch-line { stroke: var(--chart-missing-border); stroke-width: 1.4; }
.drawer-curve-foot, .drawer-curve-empty { margin: 8px 0 0 !important; font-size: 11.5px; color: var(--text-muted) !important; }
.diarization-chart-wrap { position: relative; height: 220px; margin-bottom: 12px; }
.drawer-diarization-table-scroll { border: 1px solid var(--border); border-radius: 10px; overflow: auto; }
.diarization-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.diarization-table th { padding: 8px 10px !important; background: var(--table-head) !important; color: var(--text-muted) !important; font: 600 10.5px/1.2 var(--font-sans) !important; letter-spacing: .04em; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--border) !important; }
.diarization-table td { padding: 8px 10px !important; background: var(--surface) !important; border-bottom: 1px solid var(--border-subtle) !important; color: var(--text-primary); }
.diarization-total-row td { background: var(--surface-raised) !important; font-weight: 700; }
.diarization-delta-pill { font: 700 11px/1 var(--font-mono); padding: 3px 7px; border-radius: 6px; background: var(--status-neutral-bg); color: var(--status-neutral-text); }
.diarization-delta-pill.positive { background: var(--status-connected-bg); color: var(--status-connected-text); }
.diarization-delta-pill.negative { background: var(--status-risk-bg); color: var(--status-risk-text); }
.drawer-diarization-unavailable { padding: 14px; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface-sunken); }
.drawer-mlb-card { display: flex; justify-content: space-between; gap: 12px; padding: 12px; margin-bottom: 8px; border-radius: 10px; background: var(--surface-raised); border: 1px solid var(--border); }
.drawer-mlb-card strong { font-size: 12.5px; color: var(--text-primary); }
.drawer-mlb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; color: var(--text-muted); }
.drawer-mlb-financial { text-align: right; white-space: nowrap; }
.drawer-mlb-financial-meta { font-size: 11px; color: var(--text-muted); }
.returns-table { min-width: 1080px !important; } .returns-table > thead > tr > th:nth-child(8) { width: 190px; } .returns-table > thead > tr > th:nth-child(3) { width: 180px; }
.col-cost .cost-add-btn, .col-cost button.cost-add-btn { min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--link) !important; font: 600 11px/1.2 var(--font-sans) !important; }
.promo-price-block del { color: var(--text-muted) !important; }
.bulk-footer-note small { color: var(--text-muted) !important; }
.block-step { color: var(--link) !important; }
.invite-channel, .invite-channel-head > div { min-width: 0; }
.invite-channel-head { flex-wrap: wrap; }
@media (max-width: 520px) { .invite-channel-head .badge { display: none !important; } }
.channel-meta-grid { border: 0 !important; background: none !important; padding: 0 !important; }
.channel-card-coming .channel-subtitle { font-family: var(--font-sans) !important; font-size: 12px !important; }
@media (max-width: 520px) { .channel-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .channel-heading-workspace { justify-content: flex-start; } }
.client-mcp-card .copy-field input { background: var(--surface-sunken) !important; }
.portal-table-wrap > .scroll, .cn-table-container > .scroll { position: relative; }
.badge.preview-disclaimer { white-space: normal; height: auto; }
.bulk-input.is-invalid { border-color: var(--status-danger-dot) !important; background: var(--status-danger-bg) !important; }
.bulk-input.is-cleared { border-style: dashed !important; border-color: var(--status-attention-border) !important; }
.bulk-row-hint { display: block; margin-top: 2px; font-size: 11px; color: var(--status-attention-text); }
[data-bulk-invalid="true"] > td { background: color-mix(in srgb, var(--status-danger-dot) 6%, var(--surface)) !important; }
.fulfillment-table { min-width: 900px !important; } .fulfillment-table > thead > tr > th.col-coverage { width: 220px !important; }

/* ---------- Phase 3: period, schedule, alerts, logistics, consent, invite ---------- */
.period-segmented a, .period-segmented .segment-disabled {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 7px; font: 600 12.5px/1 var(--font-sans);
  color: var(--text-muted); text-decoration: none; white-space: nowrap;
}
.period-segmented a:hover { color: var(--text-primary); }
.period-segmented a[aria-current="page"] { background: var(--surface-active); color: var(--text-strong); }
.period-segmented .segment-disabled { color: var(--text-disabled); cursor: not-allowed; }
.chart-footnote { margin: 0 !important; font-size: 12px; color: var(--status-attention-text) !important; }
.schedule-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-raised); border: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); }
.schedule-row svg { color: var(--tone-fg, var(--text-muted)); flex: none; }
.freshness-schedule { margin: 0 !important; padding: 8px 16px; border-bottom: 1px solid var(--border-subtle); font-size: 12px; color: var(--tone-fg, var(--text-secondary)) !important; }
/* Freshness cards (Canais, F-12): same structure in all five cards (head, status, three dates one per line, 24 bars,
   then the optional note), so status, dates and bars sit at the same height in every card. */
.domain-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; }
.domain-facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.domain-facts dt { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.domain-facts dd { margin: 0; font: 500 11.5px/1.3 var(--font-mono); color: var(--text-secondary); white-space: nowrap; }
.channel-domain-card { justify-content: flex-start !important; }
.channel-domain-head strong, .channel-domain-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.domain-history-empty { display: flex; align-items: center; justify-content: center; height: 18px; line-height: 16px; border: 1px dashed var(--border); border-radius: 3px; font-size: 10.5px; color: var(--text-faint); }
.domain-error { margin: 0 !important; padding: 6px 8px; border-radius: 8px; background: var(--status-danger-bg); color: var(--status-danger-text) !important; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alerts-wrap { position: relative; }
.topbar-icon-btn { position: relative; width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 10px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text-secondary) !important; box-shadow: none !important; }
.topbar-icon-btn:hover, .topbar-icon-btn[aria-expanded="true"] { background: var(--surface-raised) !important; color: var(--text-primary) !important; }
.alerts-count { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--status-danger-dot); color: var(--text-on-accent); font: 700 10px/16px var(--font-mono); text-align: center; }
.alerts-popover { width: 360px; }
.alert-item { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: var(--text-primary) !important; }
.alert-item:hover { background: var(--surface-hover); }
.alerts-empty { margin: 0 !important; padding: 16px; font-size: 12.5px; color: var(--text-muted) !important; }
/* Multi-select (logistics) */
.ui-select-multi .ui-option { gap: 10px; }
.ui-option-box { width: 16px; height: 16px; flex: none; border-radius: 4px; border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.ui-option-box svg { width: 11px; height: 11px; }
.ui-option[aria-selected="true"] .ui-option-box { background: var(--blue); border-color: var(--blue-border); color: var(--text-on-accent); }
.ui-option-count { font: 500 11px/1 var(--font-mono); color: var(--text-faint); }
.ui-listbox-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; padding: 6px 4px 2px; border-top: 1px solid var(--border-subtle); }
.ui-listbox-footer button { min-height: 30px !important; height: 30px; padding: 0 10px !important; border-radius: 7px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font: 600 12px/1 var(--font-sans) !important; }
.ui-listbox-clear { color: var(--text-muted) !important; }
.ui-listbox-apply { color: var(--link) !important; }
.ui-listbox-footer button:hover { background: var(--surface-active) !important; }
.ui-select-multi .ui-select-value { max-width: 160px; }
.tag-logistic.is-unknown { color: var(--text-muted); }
/* MCP consent */
.client-main.consent-page { width: min(560px, calc(100vw - 32px)) !important; max-width: none !important; margin: 56px auto !important; padding: 28px !important; text-align: left !important; background: var(--surface) !important; border: 1px solid var(--border-strong) !important; border-radius: 16px !important; box-shadow: var(--shadow-overlay) !important; }
.consent-page h1 { margin: 6px 0 8px !important; font: 750 22px/1.25 var(--font-sans) !important; letter-spacing: -.02em; text-align: left !important; }
.consent-mark { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.consent-mcp, .consent-initials { display: inline-grid; place-items: center; height: 40px; min-width: 40px; padding: 0 10px; border-radius: 11px; font: 700 13px/1 var(--font-mono); }
.consent-mcp { background: var(--status-info-bg); color: var(--status-info-text); }
.consent-initials { background: var(--surface-active); color: var(--text-primary); }
.consent-mark.is-error .consent-initials { background: var(--status-danger-bg); color: var(--status-danger-text); }
.consent-arrow { color: var(--text-muted); font-size: 18px; }
.consent-eyebrow { margin: 0 !important; font: 500 11px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-icon) !important; }
.consent-sub { color: var(--text-secondary) !important; }
.consent-host { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-primary); border-bottom: 1px dotted var(--border-strong); }
.consent-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; padding: 0; }
.consent-chips li { padding: 4px 10px; border-radius: 999px; background: var(--surface-raised); border: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); }
.consent-guard { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--status-connected-border); background: var(--status-connected-bg); color: var(--status-connected-text) !important; font-size: 12.5px; }
.consent-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.consent-page .surface { padding: 16px !important; margin-top: 12px; }
/* Invite: steps as bars, company chip, brand points, back link, single code field as 6 cells */
.invite-steps { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; }
.invite-steps li { flex-direction: column; align-items: flex-start !important; gap: 6px !important; font-size: 11.5px !important; }
.invite-steps li + li::before { content: none !important; }
.invite-steps li::after { content: ""; order: -1; display: block; width: 100%; height: 4px; border-radius: 99px; background: var(--border); }
.invite-steps li.is-current::after { background: var(--blue); }
.invite-steps li.is-done::after { background: var(--status-connected-dot); }
.invite-flow:has(#otp-form[data-is-sent="true"]) .invite-steps li[data-step="1"]::after { background: var(--status-connected-dot); }
.invite-flow:has(#otp-form[data-is-sent="true"]) .invite-steps li[data-step="2"]::after { background: var(--blue); }
.invite-step-dot { display: none !important; }
.invite-company { position: relative; }
.invite-company-copy { flex: 1; min-width: 0; }
.invite-company-chip { flex: none; }
.invite-brand-points { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.invite-brand-points li { position: relative; padding-left: 18px; font-size: 13px; color: var(--sidebar-fg); }
.invite-brand-points li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 99px; background: var(--accent); }
.invite-back { justify-self: start; font-size: 12.5px; font-weight: 600; color: var(--text-muted) !important; text-decoration: none; }
.invite-back:hover { color: var(--text-primary) !important; }
/* OTP (F-05): one input (autocomplete="one-time-code", paste, OS fill) over 6 visual cells.
   Without JS the input is a plain visible field; portal.js adds .is-enhanced and mirrors the digits into the cells. */
.invite-flow .otp-code-wrap { position: relative; display: block; width: 100%; max-width: 360px; margin: 0 auto; }
.invite-flow input.otp-code {
  box-sizing: border-box; display: block; width: 100% !important; height: 56px !important; min-height: 56px !important; padding: 0 14px !important;
  border: 1px solid var(--border-strong) !important; border-radius: var(--radius-md) !important; box-shadow: none !important;
  background: var(--surface-sunken) !important; color: var(--text-primary) !important;
  font: 700 22px/54px var(--font-mono) !important; letter-spacing: 0.3em; text-align: center;
}
.invite-flow input.otp-code::placeholder { color: var(--text-disabled) !important; }
.invite-flow input.otp-code:focus-visible { outline: none !important; border-color: var(--border-focus) !important; box-shadow: var(--focus-ring) !important; }
.invite-flow .otp-cells { display: none; }
.invite-flow .otp-code-wrap.is-enhanced .otp-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; pointer-events: none; }
.invite-flow .otp-code-wrap.is-enhanced input.otp-code {
  position: absolute !important; inset: 0; z-index: 1; height: 100% !important; min-height: 0 !important; margin: 0 !important;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  color: transparent !important; caret-color: transparent; letter-spacing: 0; text-indent: -9999px; cursor: text;
}
.invite-flow .otp-code-wrap.is-enhanced input.otp-code::placeholder { color: transparent !important; }
.invite-flow .otp-code-wrap.is-enhanced input.otp-code:focus-visible { box-shadow: none !important; }
.invite-flow .otp-cell {
  position: relative; display: flex; align-items: center; justify-content: center; height: 56px; box-sizing: border-box;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-sunken);
  font: 700 24px/1 var(--font-mono); color: var(--text-primary); font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.invite-flow .otp-cell.is-filled { border-color: var(--border-focus); }
.invite-flow .otp-cell.is-active { border-color: var(--border-focus); box-shadow: var(--focus-ring); background: var(--selection-bg); }
.invite-flow .otp-cell.is-active:not(.is-filled)::after { content: ""; width: 2px; height: 26px; border-radius: 1px; background: var(--accent, var(--blue)); animation: otp-caret 1s steps(1) infinite; }
@keyframes otp-caret { 50% { opacity: 0; } }
.invite-flow .otp-code.is-invalid ~ .otp-cells .otp-cell { border-color: var(--status-danger-dot, #F87171); background: var(--status-danger-bg); }
.invite-flow .otp-code.is-valid ~ .otp-cells .otp-cell { border-color: var(--status-connected-dot); }
.invite-flow input.otp-code.is-invalid { border-color: var(--status-danger-dot, #F87171) !important; }
@media (max-width: 380px) { .invite-flow .otp-code-wrap.is-enhanced .otp-cells { gap: 6px; } .invite-flow .otp-cell { height: 50px; font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .invite-flow .otp-cell.is-active:not(.is-filled)::after { animation: none; } }
@media (max-width: 860px) { .alerts-popover { position: fixed !important; left: 16px !important; right: 16px !important; top: 72px !important; width: auto !important; max-width: none !important; } }
.channel-domain-card, .channel-domain-card > div { text-align: left !important; align-items: stretch !important; } .channel-domain-status { justify-content: flex-start !important; } .domain-facts { grid-template-columns: minmax(0, 1fr) !important; }

/* Icon sprite (row chevrons reference #olh-chevron): never takes layout space. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Price and MLB columns (Anúncios): long ranges and badges wrap inside the fixed column instead of spilling into
   the neighbouring column (seen at ~960 px, where the table scrolls with its fixed widths). */
.listing-table .col-price .promo-price-line, .listing-child-table .col-price .promo-price-line { display: flex; flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; max-width: 100%; white-space: normal; }
.listing-table .col-price .price-current, .listing-table .col-price del, .listing-child-table .col-price del, .listing-child-table .col-price strong { white-space: normal; text-align: right; max-width: 100%; }
.listing-table td.col-mlbs .badge-buybox, .listing-child-table td.col-mlbs .badge-buybox { white-space: normal !important; max-width: 100%; line-height: 1.25 !important; text-align: left; }
.listing-table td.col-price, .listing-table td.col-mlbs, .listing-child-table td.col-price, .listing-child-table td.col-mlbs { overflow: hidden; }

/* Notes added by the collection rules: aporte from the last promotions collection, drawer notices, history. */
.boost-source-note { display: block; font-size: 10.5px; line-height: 1.3; max-width: 100%; white-space: normal; text-align: right; }
.collection-notice { margin: 0 0 14px; }
.collection-notice a { color: var(--text-link, var(--accent)); }
.drawer-domain-notice { display: block; margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); font-size: 12px; line-height: 1.4; color: var(--text-secondary); }
.drawer-domain-notice.tone-warning { border-color: var(--status-attention-border); background: var(--status-attention-bg); }
.drawer-domain-notice.tone-danger { border-color: var(--status-danger-border); background: var(--status-danger-bg); }
.drawer-subsection-title { margin: 14px 0 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.drawer-promo-note { font-size: 12px; margin: 0 0 4px; }
.history-item .history-period { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.history-item .history-values { margin-top: 3px; font-size: 12px; color: var(--text-secondary); }
.history-item.is-current { border-color: var(--status-connected-border); }
.kpi-foot-link { color: var(--text-link, var(--accent)); white-space: nowrap; }

/* Histórico de coletas (company_sync_runs) — Canais.dc.html: 24 barras por domínio. */
.sync-history { display: flex; gap: 3px; align-items: stretch; }
.channel-domain-card .sync-history-bar { display: block; flex: 1 1 0; min-width: 3px; height: 18px; border-radius: 3px; background: var(--skeleton); }
.sync-history-bar.run-ok { background: var(--status-connected-dot); opacity: .78; }
.sync-history-bar.run-partial { background: var(--status-attention-dot); opacity: .85; }
.sync-history-bar.run-failed { background: var(--status-danger-dot); opacity: .9; }
.sync-history-bar.run-none { background: var(--skeleton); }
.sync-history-legend { margin: 10px 0 0 !important; font-size: 11.5px; color: var(--text-faint) !important; }
.domain-listing-gaps { margin: 0 !important; padding: 6px 8px; border-radius: 8px; background: var(--status-attention-bg); color: var(--status-attention-text) !important; font-size: 11.5px; }
/* Devoluções: tendência em p.p., notas de células e KPIs da gaveta. */
.return-trend { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; color: var(--text-secondary); }
.return-trend.tone-danger { color: var(--status-danger-text); }
.return-trend.tone-success { color: var(--status-connected-text); }
.return-trend.tone-neutral { color: var(--text-muted); }
.return-trend-note { display: block; margin-top: 2px; }
.cell-note { display: block; margin-top: 2px; font-size: 10.5px !important; color: var(--text-muted); white-space: normal; line-height: 1.3; }
.drawer-kpi-note { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
.live-today-notice { margin-bottom: 12px; }
.drawer-kpi-box > strong.return-trend.tone-danger { color: var(--status-danger-text) !important; }
.drawer-kpi-box > strong.return-trend.tone-success { color: var(--status-connected-text) !important; }

/* Campaign type chip in expanded campaign rows: long codes (MARKETPLACE_CAMPAIGN) wrap at the
   underscore into up to two lines instead of pushing the next column. */
/* Campaign rows: name and type on one line each, cut with "…" (full text in the title). */
.child-campaign-row .product-info-block { min-width: 0; max-width: 100%; }
.child-campaign-row .campaign-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.child-campaign-row .campaign-type-cell { max-width: 0; }
.child-campaign-row .campaign-type-cell > * { display: block; width: fit-content; max-width: 100%; }
.child-campaign-row .campaign-type-chip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }

/* ---------- Componentes compartilhados: variantes interativas (portal e admin) ---------- */
/* ESPEC-ADMIN-MELHORIAS-2026-10 §2.3 e §7.1. O contêiner .module-kpi-strip continua sem fundo e sem borda (U3). */
button.module-kpi { width: 100%; min-height: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; align-items: stretch; }
button.module-kpi:hover { border-color: var(--border-strong) !important; background: var(--surface-raised) !important; }
button.module-kpi[aria-pressed="true"] { border-color: var(--blue-border) !important; background: var(--selection-bg) !important; }
button.module-kpi:focus-visible { outline: none; box-shadow: var(--focus-ring) !important; }
nav.section-anchors { position: sticky; top: calc(var(--topbar-h, 60px) + 8px); z-index: 5; display: flex !important; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; background: var(--canvas) !important; }
nav.section-anchors::-webkit-scrollbar { display: none; }
nav.section-anchors a.portal-filter-chip { text-decoration: none; }
nav.section-anchors a.portal-filter-chip[aria-selected="true"] { background: var(--surface-active) !important; color: var(--text-strong) !important; }
/* F-17: section tabs. Without JS (no .is-tabs) the bar stays in-page links and every panel is open; the selected
   style only shows once panel-client.js manages the tabs. */
nav.section-anchors:not(.is-tabs) a.portal-filter-chip[aria-selected="true"] { background: transparent !important; color: var(--text-muted) !important; }
nav.section-anchors a.portal-filter-chip:focus-visible { outline: none; box-shadow: var(--focus-ring) !important; }
[data-section-panel][hidden] { display: none !important; }
nav.section-anchors a.portal-filter-chip .status-dot { width: 7px; height: 7px; }
.anchor-section { scroll-margin-top: 128px; }
.ui-dialog button.danger, .button.danger { background: #DC2626; border-color: #DC2626; color: #fff; }
.ui-dialog button.danger:hover, .button.danger:hover { background: #B91C1C; border-color: #B91C1C; color: #fff; }
html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
dialog.ui-dialog { padding: 0; width: min(560px, calc(100vw - 32px)); max-width: none; height: fit-content; max-height: min(88dvh, 860px); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-overlay); overflow: hidden; }
dialog.ui-dialog[open] { display: flex; flex-direction: column; }
dialog.ui-dialog[data-size="confirm"] { width: min(440px, calc(100vw - 32px)); }
dialog.ui-dialog[data-size="form"] { width: min(640px, calc(100vw - 32px)); }
dialog.ui-dialog[data-size="info"] { width: min(560px, calc(100vw - 32px)); }
dialog.ui-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(2px); }
dialog.ui-dialog > .bulk-sheet-header { flex: none; padding: 16px 20px !important; }
dialog.ui-dialog > .bulk-sheet-header h2 { margin: 0 0 4px !important; font: 700 17px/1.3 var(--font-sans) !important; }
dialog.ui-dialog .ui-dialog-body { flex: 1 1 auto; min-height: 0; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
dialog.ui-dialog .ui-dialog-body > p:first-child { margin-top: 0; }
dialog.ui-dialog .ui-dialog-body > :last-child { margin-bottom: 0; }
dialog.ui-dialog .ui-dialog-actions { flex: none; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--border); background: var(--surface-raised); }
dialog.ui-dialog .ui-dialog-match { display: grid; gap: 6px; margin-top: 14px; font-size: 13px; color: var(--text-secondary); }
dialog.ui-dialog .ui-dialog-match code { font-family: var(--font-mono); color: var(--text-strong); }
dialog.ui-dialog .ui-dialog-match + input { width: 100%; margin-top: 6px; }
/* Content placed in the dialog slot (template) keeps the header / scrolling body / footer column. */
dialog.ui-dialog .ui-dialog-slot, dialog.ui-dialog .ui-dialog-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; }
dialog.ui-dialog .ui-dialog-body > .alert-banner { margin-bottom: 14px; }
.required-mark { color: var(--status-danger-text); font-weight: 600; }
.alert-banner.tone-success { --tone-border: var(--status-connected-border); }
.alert-banner > form, .alert-banner > .button { margin: 0 0 0 auto; flex: none; align-self: center; }
/* Company page (/admin/empresas/{id}): open sections in one column, anchor bar, PRG notices. */
.company-page { display: flex; flex-direction: column; gap: 16px; }
.company-page-heading { align-items: center !important; }
.company-page-title { display: flex !important; flex-direction: row !important; align-items: center; gap: 16px !important; min-width: 0; }
.company-page-title > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.company-page-title .eyebrow { margin: 0; }
.company-page-title h1 { overflow-wrap: anywhere; }
.company-page-avatar { width: 56px !important; height: 56px !important; flex: none; font-size: 18px; }
.company-page-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
/* overflow-x: hidden on the shell turns it into a scroll container that never scrolls (the page scrolls), which
   disables position: sticky for the topbar and the anchor bar. clip cuts the same overflow without that effect.
   Same for the client portal (F-15): fixed topbar while the page scrolls. */
@media (min-width: 721px) {
  .portal-app-shell.admin-workspace, .portal-app-shell.client-workspace { overflow-x: clip !important; overflow-y: visible !important; }
}
.company-page > nav.section-anchors { top: var(--topbar-h, 64px); margin: -8px 0 0; padding: 8px 3px; }
.company-section .portal-table-wrap .scroll { min-height: 0 !important; }
.company-section table.invite-table { min-width: 560px !important; width: 100%; }
.company-section .invite-actions { justify-content: flex-end; flex-wrap: nowrap; }
.form-grid .field-label { display: inline-flex; gap: 4px; align-items: baseline; }
.company-section .form-grid, .ui-dialog-form .form-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.company-section .form-grid > .logo-field, .ui-dialog-form .form-grid > .logo-field { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .company-section .form-grid, .ui-dialog-form .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
.company-section { display: flex !important; flex-direction: column; gap: 14px; padding: 20px !important; }
.company-section .section-heading { align-items: flex-start !important; }
.company-section .section-heading h2 { margin: 0 !important; font: 700 16px/1.3 var(--font-sans) !important; color: var(--text-primary) !important; }
.company-section .section-heading p { font-size: 12.5px; }
.company-section .section-heading form { margin: 0; }
.company-section > form { margin: 0; }
.company-section .form-footer { margin-top: 14px; }
.company-section .email-warning { margin-top: 14px; }
.company-section .email-warning[hidden] { display: none !important; }
.company-section .channel-meta-item dd { font-size: 13.5px !important; font-weight: 600; overflow-wrap: anywhere; white-space: normal; text-overflow: clip; }
.company-section .state-card { padding: 20px; text-align: center; }
/* Profile page (/admin/profile): the sections live inside one form, stacked like the company page. */
.profile-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.profile-photo-field [data-logo-placeholder] { display: inline-flex; align-items: center; justify-content: center; font: 700 18px/1 var(--font-sans); color: var(--status-info-text); }
.profile-photo-field [data-logo-placeholder][hidden] { display: none; }
.profile-photo-field [data-logo-placeholder] svg { width: 26px; height: 26px; }
.profile-page .form-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.company-section .invite-table td { vertical-align: middle; }
.danger-zone { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.danger-zone .alert-banner { flex-wrap: wrap; padding: 16px 18px; }
.danger-zone .alert-banner > div { flex: 1 1 280px; min-width: 0; }
.danger-zone h2 { margin: 2px 0 4px !important; font: 700 15px/1.3 var(--font-sans) !important; color: var(--tone-fg) !important; }
.invite-facts { margin-top: 14px !important; }
.invite-facts dd { font-size: 13.5px !important; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .company-page-heading .portal-heading-actions { width: 100%; }
  .company-page-avatar { width: 44px !important; height: 44px !important; }
  .company-page-title { align-items: flex-start; }
  /* The phone topbar wraps to ~190 px (session, alerts, search): a sticky anchor bar would hide behind it. */
  .company-page > nav.section-anchors { position: static !important; margin: 0; flex-wrap: nowrap !important; overflow-x: auto; }
  .company-section { padding: 16px !important; }
}
@media (max-width: 520px) {
  dialog.ui-dialog, dialog.ui-dialog[data-size] { width: calc(100vw - 16px); }
  dialog.ui-dialog .ui-dialog-actions { flex-direction: column-reverse; }
  dialog.ui-dialog .ui-dialog-actions > * { width: 100%; }
}

/* Company list (/admin/empresas): KPI filters, toolbar with the Coleta chip, hierarchical table company → stores. */
.company-list { display: flex; flex-direction: column; gap: 14px; }
.company-list > .portal-heading, .company-list > .module-kpi-strip { margin: 0 !important; }
.portal-filter-chip[aria-pressed="true"] { background: var(--surface-active) !important; color: var(--text-strong) !important; }
.portal-toolbar-count { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.portal-toolbar-count strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.company-list-toolbar .company-list-refresh { margin-left: auto; }
.company-list-toolbar .company-list-refresh svg { width: 15px; height: 15px; }
.company-list-table table { min-width: 900px; }
.company-list-table th.col-expand, .company-list-table td.col-expand { width: 44px; padding-left: 8px !important; padding-right: 0 !important; text-align: center; }
.company-list-table td small { display: block; margin-top: 3px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
/* Verification detail and collection notes wrap in up to two lines instead of widening the column. */
.company-list-table td small.cell-wrap { white-space: normal; max-width: 130px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.company-list-table td small.mono { font-family: var(--font-mono); }
.company-list-table td.row-action { text-align: right; white-space: nowrap; }
.company-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.company-cell .cn-avatar { flex: none; }
.company-cell-copy { display: flex; flex-direction: column; min-width: 0; }
.company-name-link { font-weight: 650; color: var(--text-primary) !important; text-decoration: none; overflow-wrap: anywhere; }
.company-name-link:hover { color: var(--link) !important; text-decoration: underline; }
.company-name-link:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--focus-ring); }
.portal-table tbody > tr.company-store-row > td { background: var(--table-child) !important; }
.portal-table tbody > tr.company-row:has(.row-expand-btn[aria-expanded="true"]) > td { background: var(--table-row-hover) !important; }
.company-store-row .mono { font: 600 12.5px/1.3 var(--font-mono); color: var(--text-secondary); }
.company-store-logo { display: inline-flex; flex: none; width: 24px; height: 24px; align-items: center; justify-content: center; }
.company-store-logo svg, .company-store-logo img { width: 20px; height: 20px; }
.company-list-empty { padding: 24px 16px !important; border: 0 !important; background: transparent !important; }
.portal-table tbody > tr.company-empty-row:hover > td { background: var(--surface) !important; }

/* =====================================================================================================================
   Telas de entrada (F-10): convite do cliente (/convite, .client-main-flow) e login do admin (.auth-card)
   ===================================================================================================================== */
/* Card centered in the viewport on both axes; width follows the body padding, never 100vw (no sideways scroll). */
body:has(> main.client-main-flow) { min-height: 100dvh; margin: 0; display: grid; place-items: center; padding: 32px 16px; box-sizing: border-box; }
body:has(> main.client-main-flow) > main.client-main.client-main-flow { width: min(960px, 100%) !important; margin: 0 !important; }
@media (max-width: 860px) {
  body:has(> main.client-main-flow) > main.client-main.client-main-flow { width: min(520px, 100%) !important; }
}
@media (max-width: 520px) {
  body:has(> main.client-main-flow) { padding: 16px; }
}
/* Steps "1. Convite" and "2. Código": two equal columns spanning the flow column, so they share the width and the
   central axis of the company block (.invite-company) right below. */
.invite-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100%; margin: 0 !important; }
.invite-steps li { align-items: stretch !important; text-align: center; }
.invite-step-label { display: block; text-align: center; font-size: 12px; }
.invite-step-num { font-variant-numeric: tabular-nums; }
/* Code label centered over the 6 cells */
.invite-flow .otp-field-label { justify-content: center !important; text-align: center !important; }
/* Theme switch in the card's header row, next to the brand: away from the main action, still reachable first by
   keyboard (it comes right after the brand in the DOM) and announced with aria-pressed. */
.page-theme-switch.is-in-card { position: static; z-index: 1; display: inline-grid; width: max-content; margin: 0; padding: 2px; backdrop-filter: none; box-shadow: none; }
.page-theme-switch.is-in-card button { min-width: 30px; min-height: 26px; padding: 4px 7px; }
.client-main.client-main-flow > .page-theme-switch.is-in-card { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; margin: 32px 24px 0 0; padding: 2px; }
.auth-card { position: relative; }
.auth-card > .page-theme-switch.is-in-card { position: absolute; top: 39px; right: 36px; }
/* On the dark brand panel (desktop) the switch uses the panel's colors in both themes */
@media (min-width: 861px) {
  .client-main-flow > .page-theme-switch.is-in-card { background: var(--sidebar-card); border-color: var(--sidebar-border); }
  .client-main-flow > .page-theme-switch.is-in-card button { color: var(--sidebar-muted); }
  .client-main-flow > .page-theme-switch.is-in-card button:hover { color: var(--sidebar-active-fg); }
  .client-main-flow > .page-theme-switch.is-in-card button[aria-pressed="true"] { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg); box-shadow: none; }
}
@media (min-width: 821px) {
  .auth-card > .page-theme-switch.is-in-card { background: var(--sidebar-card); border-color: var(--sidebar-border); }
  .auth-card > .page-theme-switch.is-in-card button { color: var(--sidebar-muted); }
  .auth-card > .page-theme-switch.is-in-card button:hover { color: var(--sidebar-active-fg); }
  .auth-card > .page-theme-switch.is-in-card button[aria-pressed="true"] { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg); box-shadow: none; }
}
/* Stacked (no brand panel): brand on the left, switch on the right of the same header row */
@media (max-width: 860px) {
  .client-main-flow > .brand { justify-content: flex-start !important; padding: 22px 20px 0 !important; }
  .client-main.client-main-flow > .page-theme-switch.is-in-card { margin: 22px 20px 0 0; }
}
@media (max-width: 820px) {
  .auth-card > .page-theme-switch.is-in-card { top: 31px; right: 22px; }
}

/* =====================================================================================================================
   Sem loja conectada (F-09): estado vazio do Dashboard (.no-store-notice) e confirmação de GET /canais/meli
   ===================================================================================================================== */
/* Dashboard without a store: the shared state-card, with a welcoming tone (accent icon) and one evident action.
   !important on border/background: .surface sets both with !important (theme.css, cards section). */
.state-card.no-store-notice { gap: 8px !important; padding: 36px 24px 32px !important; margin: 0 0 16px; border: 1px dashed var(--status-info-border) !important; background: color-mix(in srgb, var(--status-info-bg) 45%, var(--surface)) !important; }
.no-store-notice .no-store-icon { width: 52px !important; height: 52px !important; margin-bottom: 6px; border-radius: 14px !important; background: var(--blue-light) !important; color: var(--status-info-text) !important; }
.no-store-notice .no-store-icon svg { width: 26px; height: 26px; }
.no-store-notice .no-store-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--status-info-text); }
.state-card.no-store-notice strong { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.state-card.no-store-notice p { max-width: 460px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary) !important; }
.no-store-notice .no-store-action { margin-top: 10px; min-height: 40px; padding: 0 18px; gap: 8px; text-decoration: none; }
@media (max-width: 520px) {
  .state-card.no-store-notice { padding: 28px 16px 24px !important; }
  .no-store-notice .no-store-action { align-self: stretch; justify-content: center; }
}

/* GET /canais/meli: same card as the invite (F-10). Channel block, title, the three steps, one primary action. */
.connect-meli > form { margin: 0 !important; }
.connect-meli-channel .channel-logo { flex: none; border-radius: 10px; }
.connect-meli-channel > div { flex: 1; min-width: 0; }
.connect-meli-channel .badge { flex: none; }
.connect-meli-steps { display: grid; gap: 12px; margin: 0; padding: 14px 16px; list-style: none; counter-reset: connect-step; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-raised); }
.connect-meli-steps li { position: relative; display: grid; gap: 2px; padding-left: 34px; counter-increment: connect-step; }
.connect-meli-steps li::before { content: counter(connect-step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-light); color: var(--status-info-text); font: 700 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.connect-meli-steps strong { font-size: 13.5px; line-height: 24px; color: var(--text-primary); }
.connect-meli-steps span { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.connect-meli .invite-back { justify-self: center; }

/* =====================================================================================================================
   Tabela hierárquica (F-07, docs/COMPONENTE-TABELA-HIERARQUICA.md): regras comuns às telas que usam hierTable /
   hierChildren / hierChildRow (Anúncios, Campanhas, Devoluções, Fulfillment). As regras antigas por tela continuam
   valendo enquanto a consolidação do CSS não termina.
   ===================================================================================================================== */
/* The table scrolls sideways inside its card; the page never does. */
.hier-table-card { max-width: 100%; }
.hier-table-card > .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Parent row with its group open: same highlight in every screen (was one selector per table). */
.hier-table > tbody > tr:has(> td > .row-expand-btn[aria-expanded="true"]) > td,
.hier-table > tbody > tr:has(> td > .expand-cell-wrap > .row-expand-btn[aria-expanded="true"]) > td { background: var(--table-row-hover) !important; border-bottom-color: var(--border-subtle) !important; }
/* Child outside the totals (cancelled, replaced, alternative not chosen): struck and faded; the group note says why. */
.hier-child-row.is-muted > td { opacity: .55; }
.hier-child-row.is-muted .product-title, .hier-child-row.is-muted .tabular-cell { text-decoration: line-through; }
/* Empty / no results / failure inside the body */
.hier-empty-row .portal-empty.is-failure .state-icon { background: var(--status-danger-bg) !important; color: var(--status-danger-text) !important; }

/* =====================================================================================================================
   Vendas (V-03, prancha docs/redesign-2026-10/Vendas.dc.html): cabeçalho, KPIs compactos, visões, tabela de pedidos/packs
   (componente Tabela hierárquica) e Produtos em queda.
   ===================================================================================================================== */
.sales-pane { --sales-pack-fg: #C4B5FD; --sales-pack-bg: rgba(167, 139, 250, .16); }
:root[data-theme="light"] .sales-pane { --sales-pack-fg: #6D28D9; --sales-pack-bg: rgba(124, 58, 237, .10); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) .sales-pane { --sales-pack-fg: #6D28D9; --sales-pack-bg: rgba(124, 58, 237, .10); } }
.sales-pane.active { display: flex; flex-direction: column; gap: 16px; }
.sales-pane .portal-heading { margin-bottom: 0; }
.sales-heading-actions { flex-wrap: wrap; align-items: center; }
.sales-range { position: relative; }
.sales-range > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.sales-range > summary::-webkit-details-marker { display: none; }
.sales-range[data-custom] > summary { border-color: var(--blue) !important; }
.sales-range-form { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); display: grid; gap: 10px; width: 240px; padding: 14px; background: var(--surface-overlay); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, .28)); }
.sales-range-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.sales-range-form input[type="date"] { height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); font: 500 13px/1 var(--font-sans); color-scheme: light dark; }
.sales-coverage-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 !important; font-size: 12.5px; color: var(--text-secondary); }
.sales-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.sales-kpi { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.sales-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sales-kpi-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.sales-kpi-chip { font: 600 11px/1 var(--font-mono); padding: 3px 7px; border-radius: 6px; color: var(--tone-fg); background: var(--tone-bg); white-space: nowrap; }
.sales-kpi-value { font-size: 19px; font-weight: 750; letter-spacing: -.02em; color: var(--text-strong); }
.sales-kpi.is-missing .sales-kpi-value { color: var(--text-disabled); }
.sales-kpi-value.is-low, .sales-margin-chip.tone-warning { color: var(--status-attention-text) !important; }
.sales-kpi-foot { font-size: 11px; line-height: 1.35; color: var(--text-muted); }
.sales-monthly-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.sales-views { align-self: flex-start; }
.sales-views a { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 7px; font: 650 13px/1 var(--font-sans); color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.sales-views a:hover { color: var(--text-primary); }
.sales-views a[aria-current="page"] { background: var(--surface-active); color: var(--text-strong); }
.sales-view-count { font: 600 10.5px/1 var(--font-mono); padding: 3px 6px; border-radius: 999px; background: var(--surface-raised); color: var(--text-secondary); }
/* Dashboard · faturamento e margem por mês (12 meses) */
.sales-monthly-card { scroll-margin-top: 136px; }
.legend-swatch.is-margin { width: 8px; height: 8px; border-radius: 999px; background: var(--chart-2); }
.store-daily-chart:not(.is-chart-ready) #sales-monthly-chart-canvas { display: none; }
.store-daily-chart #sales-monthly-chart-canvas { width: 100% !important; height: 208px !important; }
.store-daily-chart.is-chart-ready [data-sales-monthly-fallback] { display: none; }
.store-chart-bar-col.is-missing .store-bar-fill.active { background: repeating-linear-gradient(135deg, var(--chart-missing-border) 0 1px, color-mix(in srgb, var(--chart-1) 35%, transparent) 1px 6px) !important; }
/* Vendas · tabela de pedidos (mãe e filhos na mesma grade, guia de árvore na coluna do expansor) */
.sales-table, .sales-child-table { table-layout: fixed !important; min-width: 1520px; }
.sales-table > thead > tr > th:nth-child(1), .sales-child-table > thead > tr > th:nth-child(1) { width: 44px; }
.sales-table > thead > tr > th:nth-child(2), .sales-child-table > thead > tr > th:nth-child(2) { width: 104px; }
.sales-table > thead > tr > th:nth-child(3), .sales-child-table > thead > tr > th:nth-child(3) { width: 176px; }
.sales-table > thead > tr > th:nth-child(5), .sales-child-table > thead > tr > th:nth-child(5) { width: 64px; }
.sales-table > thead > tr > th:nth-child(6), .sales-child-table > thead > tr > th:nth-child(6) { width: 124px; }
.sales-table > thead > tr > th:nth-child(7), .sales-child-table > thead > tr > th:nth-child(7) { width: 96px; }
.sales-table > thead > tr > th:nth-child(8), .sales-child-table > thead > tr > th:nth-child(8) { width: 100px; }
.sales-table > thead > tr > th:nth-child(9), .sales-child-table > thead > tr > th:nth-child(9) { width: 92px; }
.sales-table > thead > tr > th:nth-child(10), .sales-child-table > thead > tr > th:nth-child(10) { width: 88px; }
.sales-table > thead > tr > th:nth-child(11), .sales-child-table > thead > tr > th:nth-child(11) { width: 112px; }
.sales-table > thead > tr > th:nth-child(12), .sales-child-table > thead > tr > th:nth-child(12) { width: 128px; }
.sales-table > thead > tr > th:nth-child(13), .sales-child-table > thead > tr > th:nth-child(13) { width: 124px; }
.sales-table > tbody > tr > td, .sales-child-table > tbody > tr > td { vertical-align: middle; }
.sales-table td.col-num, .sales-child-table td.col-num { text-align: right; }
.sales-table td.col-num > small, .sales-child-table td.col-num > small, .sales-table td.col-date > small { display: block; }
.sales-child-table { min-width: 0 !important; width: 100%; }
.sales-table > tbody > tr > td, .sales-child-table > tbody > tr > td { padding: 8px 10px !important; }
.sales-child-table .child-product-cell { gap: 0; }
.sales-child-table .child-product-cell .tree-branch { display: none; }
.sales-cell-note { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.25; font-weight: 500; color: var(--text-muted); white-space: normal; overflow-wrap: anywhere; }
.sales-cell-note.tone-warning { color: var(--status-attention-text); }
.sales-pane .tabular-cell.is-missing { color: var(--text-disabled); }
.sales-zero { color: var(--text-muted); }
.sales-date { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.sales-order { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.sales-order-id { font: 500 11.5px/1.2 var(--font-mono); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sales-pack-chip { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; color: var(--sales-pack-fg); background: var(--sales-pack-bg); white-space: nowrap; }
.sales-product { min-width: 0; }
.sales-product .product-meta-wrap { min-width: 0; }
.sales-product .product-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sales-product .product-sku-label { display: block; font: 500 10.5px/1.3 var(--font-mono); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sales-product .external-link { text-decoration: none; }
.sales-margin { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sales-margin-chip { display: inline-block; font: 700 12px/1 var(--font-mono); padding: 3px 7px; border-radius: 6px; color: var(--tone-fg); background: var(--tone-bg); white-space: nowrap; }
.sales-margin-chip.tone-neutral { background: transparent; color: var(--text-disabled); }
.sales-status { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.sales-status-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; color: var(--tone-fg); background: var(--tone-bg); white-space: nowrap; }
.sales-status-chip.tone-pack { color: var(--sales-pack-fg); background: var(--sales-pack-bg); }
.sales-group-row.is-muted > td { opacity: .55; }
.sales-group-row.is-muted .tabular-cell, .sales-group-row.is-muted .sales-order-id { text-decoration: line-through; }
.hier-child-row.is-muted .sales-order-id { text-decoration: line-through; }
.sales-child-row .product-cell-wrap { gap: 8px; }
.sales-footnote, .sales-criteria { margin: 0 !important; font-size: 11.5px; color: var(--text-muted); }
.sales-criteria { padding: 10px 16px; border-top: 1px solid var(--border); }
.sales-pagination .cn-pagination-content { gap: 4px; }
.sales-pagination .cn-pagination-link { text-decoration: none; }
.sales-pagination .cn-pagination-page { min-width: 32px; justify-content: center; }
.sales-pagination .cn-pagination-page.is-current { border-color: var(--blue) !important; background: var(--blue-light) !important; color: var(--text-strong) !important; }
.sales-pagination .is-disabled { opacity: .45; pointer-events: none; }
/* Filtros (form GET) */
.sales-filters { flex-wrap: wrap; }
.sales-filters .portal-search-wrap { flex: 1 1 260px; }
.sales-filters[data-js] .sales-filter-submit { display: none; }
/* Produtos em queda */
.sales-decline-table { table-layout: fixed !important; min-width: 1300px; }
.sales-decline-table > thead > tr > th:nth-child(2) { width: 150px; }
.sales-decline-table > thead > tr > th:nth-child(n+3) { width: 108px; }
.sales-decline-table > thead > tr > th:nth-child(10) { width: 124px; }
.sales-decline-table td.col-num, .sales-decline-table td.col-action { text-align: right; }
.sales-decline-table td.col-num > small { display: block; }
.sales-spark path { fill: none; stroke: var(--chart-1); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sales-spark circle { fill: var(--chart-2); }
.sales-spark.is-empty path { stroke: var(--border-strong); stroke-dasharray: 4 4; }
.sales-low, .text-warning-soft { color: var(--status-attention-text); }
.sales-decline-note { margin: 0 !important; }
.sales-decline-table .product-title-btn { all: unset; cursor: pointer; display: block; min-width: 0; max-width: 100%; }
.sales-decline-table .product-title-btn:hover .product-title { color: var(--blue); }
.sales-decline-table .product-title-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 860px) {
  .sales-heading-actions { width: 100%; }
  .sales-heading-actions .period-segmented { max-width: 100%; overflow-x: auto; }
  .sales-range-form { left: 0; right: auto; }
  .sales-views { max-width: 100%; overflow-x: auto; }
}
   Anúncios encerrados (F-19): etiqueta "Encerrado" e filtro "Mostrar encerrados" (Anúncios, Campanhas, Fulfillment)
   ===================================================================================================================== */
.tag-ended { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-active); color: var(--text-muted); font-size: 10.5px; font-weight: 650; letter-spacing: .02em; white-space: nowrap; vertical-align: middle; }
.show-ended-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; margin: 0 !important; }
.show-ended-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue); }
.show-ended-toggle:has(input:checked) { border-color: var(--status-info-border); background: var(--status-info-bg); color: var(--status-info-text); }
.show-ended-toggle:focus-within { box-shadow: var(--focus-ring); }
.fulfillment-toolbar { justify-content: flex-end; }
.sales-product .product-sku-label .tag-ended { margin-left: 4px; }
/* Ended MLBs inside a SKU block stay hidden until "Mostrar encerrados" (the SKU row hides only when all are ended). */
.listing-table:not(.is-showing-ended) tr.child-mlb-row[data-ended] { display: none; }
.listing-table.is-showing-ended .children-ended-note { display: none; }
.children-ended-note { color: var(--text-muted); }
/* Uso e saúde (F-06): /admin/uso and /admin/uso?empresa={id}, built from the list and company page components. */
.usage-page { display: flex; flex-direction: column; gap: 16px; }
.usage-alerts { display: flex; flex-direction: column; gap: 8px; }
.usage-companies { display: flex; flex-direction: column; gap: 10px; }
.usage-companies > .section-heading h2 { margin: 0 !important; font: 700 16px/1.3 var(--font-sans) !important; }
.usage-table table.portal-table { min-width: 1120px !important; }
.usage-table td { vertical-align: middle; }
.usage-table td.num, .usage-page th.num, .usage-page td.num { text-align: right; font-variant-numeric: tabular-nums; }
.usage-health-detail { display: block; max-width: 240px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 11.5px; }
.usage-chart-wrap { position: relative; height: 260px; }
/* F-20: same as the portal charts: the canvas follows its box (Chart.js may keep an old inline width until it resizes). */
.usage-chart-wrap canvas { display: block; width: 100% !important; height: 100% !important; }
.usage-chart-wrap[hidden], .usage-metric-select[hidden] { display: none !important; }
.usage-metric-select { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.usage-metric-select > button { white-space: nowrap; }
.usage-daily-details > summary { cursor: pointer; width: fit-content; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; }
.usage-daily-details[open] > summary { margin-bottom: 10px; }
.usage-daily-details table.portal-table { min-width: 520px !important; width: 100%; }
.usage-tools table.portal-table { min-width: 0 !important; width: 100%; }
.usage-page .portal-table-wrap .scroll { min-height: 0 !important; }
@media (min-width: 1101px) { .usage-company .module-kpi-strip { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
@media (max-width: 720px) {
  .usage-page .portal-heading-actions { width: 100%; }
  .usage-chart-wrap { height: 220px; }
  .usage-chart-section .section-heading { flex-direction: column; align-items: stretch !important; }
}
/* F-20: segmented period selectors (Dashboard, Vendas, Uso e saúde) never push the page wider than the screen: on
   narrow screens they scroll sideways inside their own box. */
.portal-heading-actions { min-width: 0; max-width: 100%; }
.period-segmented { max-width: 100%; overflow-x: auto !important; scrollbar-width: none; }
.period-segmented::-webkit-scrollbar { display: none; }
.period-segmented > * { flex: none; }

}