/*!
 * Produtos Hub v1.2.3
 * CSS isolado - todas as classes usam prefixo ph-
 * Independente do tema ativo do WordPress
 * Tema padrão: SaaS premium dark (sobrescrito por Personalização via CSS vars)
 */

/* ============ RESET ISOLADO ============ */
.ph-wrap, .ph-body,
.ph-wrap *, .ph-body *,
.ph-wrap *::before, .ph-body *::before,
.ph-wrap *::after, .ph-body *::after {
  box-sizing: border-box;
}

.ph-wrap, .ph-body {
  --ph-bg: #080A0F;
  --ph-bg-2: #11151D;
  --ph-surface: #151A23;
  --ph-surface-2: #11151D;
  --ph-border: #252B36;
  --ph-border-strong: #39414F;
  --ph-text: #F5F7FA;
  --ph-text-muted: #98A2B3;
  --ph-text-faint: #5D6879;
  --ph-headings: #FFFFFF;
  --ph-primary: #FF8A00;
  --ph-primary-hover: #FFB020;
  --ph-on-primary: #1A1206;
  --ph-success-bg: rgba(34,197,94,.10);
  --ph-success-border: rgba(34,197,94,.35);
  --ph-success-text: #4ADE80;
  --ph-success-dot: #22C55E;
  --ph-neutral-bg: rgba(148,163,184,.10);
  --ph-neutral-text: #98A2B3;
  --ph-neutral-dot: #475569;
  --ph-warning-bg: rgba(245,158,11,.10);
  --ph-warning-border: rgba(245,158,11,.35);
  --ph-warning-text: #FBBF24;
  --ph-danger: #F87171;
  --ph-danger-bg: rgba(248,113,113,.10);
  --ph-danger-border: rgba(248,113,113,.35);
  --ph-info: #38BDF8;
  --ph-info-bg: rgba(56,189,248,.10);
  --ph-info-border: rgba(56,189,248,.35);
  --ph-radius: 12px;
  --ph-radius-sm: 8px;
  --ph-shadow: 0 1px 2px rgba(0,0,0,.30);
  --ph-shadow-md: 0 4px 12px rgba(0,0,0,.35);
  --ph-shadow-lg: 0 20px 50px rgba(0,0,0,.50);
  --ph-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ph-font-headings: "Manrope", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ph-content-width: 1280px;
  --ph-sidebar-width: 264px;
  --ph-title-size: 26px;
  --ph-text-size: 14px;
}

/* ============ LAYOUT ADMIN ============ */
.ph-wrap {
  font-family: var(--ph-font);
  background: var(--ph-bg);
  color: var(--ph-text);
  margin: 0 0 0 -20px;
  padding: 0;
  min-height: 100vh;
  font-size: var(--ph-text-size);
  line-height: 1.5;
}

.ph-wrap .ph-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  background: var(--ph-surface);
  border-bottom: 1px solid var(--ph-border);
  position: sticky;
  top: 32px;
  z-index: 50;
}

.ph-header-left { display: flex; align-items: center; gap: 20px; min-width: 0; }
.ph-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.ph-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.ph-logo-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--ph-primary); color: var(--ph-on-primary, #1A1206);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; letter-spacing: .02em;
  font-family: var(--ph-font-headings);
}
.ph-logo-text { font-weight: 700; font-size: 17px; color: var(--ph-text); white-space: nowrap; font-family: var(--ph-font-headings); }
.ph-logo-img { height: 32px; width: auto; border-radius: 8px; display: block; }
.ph-logo-img-compact { height: 28px; width: auto; border-radius: 7px; display: block; }

.ph-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ph-text-muted); }
.ph-breadcrumb a { color: var(--ph-text-muted); text-decoration: none; }
.ph-breadcrumb a:hover { color: var(--ph-text); }
.ph-breadcrumb-sep { color: var(--ph-text-faint); }
.ph-breadcrumb-current { color: var(--ph-text); font-weight: 600; }

.ph-main { padding: 28px; max-width: var(--ph-content-width); margin: 0 auto; width: 100%; }

/* ============ LAYOUT FRONTEND ============ */
.ph-body {
  font-family: var(--ph-font);
  background: var(--ph-bg);
  color: var(--ph-text);
  margin: 0 !important;
  padding: 0;
  min-height: 100vh;
  font-size: var(--ph-text-size);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.ph-skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ph-primary); color: var(--ph-on-primary, #1A1206);
  padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 9999;
}
.ph-skip-link:focus { left: 0; color: var(--ph-on-primary, #1A1206); }

.ph-sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--ph-sidebar-width);
  background: var(--ph-surface);
  border-right: 1px solid var(--ph-border);
  display: flex; flex-direction: column; z-index: 100;
  transition: transform .2s ease, width .2s ease;
}
.ph-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 16px; border-bottom: 1px solid var(--ph-border);
}
.ph-sidebar-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.ph-sidebar-logo .ph-logo-text { font-size: 16px; }
.ph-sidebar-toggle {
  border: 1px solid var(--ph-border); background: var(--ph-surface-2); border-radius: 8px;
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ph-text-muted);
}
.ph-sidebar-toggle svg { width: 16px; height: 16px; }
.ph-sidebar-toggle:hover { background: var(--ph-bg-2); color: var(--ph-text); }

.ph-sidebar-nav { flex: 1; overflow-y: auto; padding: 16px 10px; }
.ph-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ph-nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--ph-text-muted); text-decoration: none;
  font-weight: 500; font-size: 14px;
}
.ph-nav-link:hover { background: var(--ph-bg-2); color: var(--ph-text); text-decoration: none; }
.ph-nav-link.active { background: rgba(255,138,0,.14); color: var(--ph-primary-hover); font-weight: 600; }
.ph-nav-icon { width: 20px; height: 20px; flex-shrink: 0; }
.ph-nav-divider { height: 1px; background: var(--ph-border); margin: 16px 6px; }
.ph-nav-section {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ph-text-faint); margin: 0 12px 8px;
}
.ph-sidebar-footer { padding: 14px; border-top: 1px solid var(--ph-border); }
.ph-admin-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--ph-text-muted); text-decoration: none; font-weight: 500;
}
.ph-admin-link:hover { background: var(--ph-bg-2); color: var(--ph-text); }
.ph-admin-link svg { width: 18px; height: 18px; }

.ph-app { margin-left: var(--ph-sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }
.ph-sidebar-static { position: sticky; }
.ph-sidebar-static + .ph-app { margin-left: 0; }
.ph-topbar {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 60px; padding: 0 24px;
  background: color-mix(in srgb, var(--ph-bg) 90%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ph-border);
}
.ph-topbar-heading { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; margin-right: auto; }
.ph-topbar-title { font-weight: 700; font-size: 17px; font-family: var(--ph-font-headings); color: var(--ph-headings, var(--ph-text)); }
.ph-topbar-sub { font-size: 12px; color: var(--ph-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
.ph-topbar-actions { display: flex; align-items: center; gap: 10px; }
.ph-mobile-menu-btn {
  display: none; border: 1px solid var(--ph-border); background: var(--ph-surface);
  border-radius: 8px; width: 38px; height: 38px;
  align-items: center; justify-content: center; cursor: pointer; color: var(--ph-text);
}
.ph-mobile-menu-btn svg { width: 20px; height: 20px; }
.ph-content { padding: 28px 24px 60px; max-width: var(--ph-content-width); width: 100%; margin: 0 auto; flex: 1; }

.ph-sidebar.collapsed { width: 72px; }
.ph-sidebar.collapsed .ph-logo-text,
.ph-sidebar.collapsed .ph-nav-link span,
.ph-sidebar.collapsed .ph-nav-section,
.ph-sidebar.collapsed .ph-admin-link span { display: none; }
.ph-sidebar.collapsed + .ph-app { margin-left: 72px; }
/* Logo compacta aparece só com a sidebar recolhida */
.ph-sidebar.collapsed .ph-logo-img,
.ph-sidebar.collapsed .ph-logo-icon { display: none; }
.ph-sidebar.collapsed .ph-logo-img-compact { display: block !important; }

/* Cor dos títulos: regra explícita (vence estilos do admin WP) + configurável */
.ph-wrap .ph-page-title, .ph-body .ph-page-title,
.ph-wrap .ph-section-title, .ph-body .ph-section-title,
.ph-wrap .ph-form-section-title, .ph-body .ph-form-section-title,
.ph-wrap .ph-sub-title, .ph-body .ph-sub-title,
.ph-wrap .ph-card-title, .ph-body .ph-card-title,
.ph-wrap .ph-card-count, .ph-body .ph-card-count,
.ph-wrap .ph-topbar-title, .ph-body .ph-topbar-title,
.ph-wrap .ph-modal-header h3, .ph-body .ph-modal-header h3,
.ph-wrap .ph-setting-card-header h3, .ph-body .ph-setting-card-header h3,
.ph-wrap .ph-listing-header h3, .ph-body .ph-listing-header h3,
.ph-wrap .ph-product-card-name, .ph-body .ph-product-card-name,
.ph-wrap .ph-empty-state h3, .ph-body .ph-empty-state h3,
.ph-wrap .ph-product-notes h3, .ph-body .ph-product-notes h3,
.ph-wrap .ph-logo-text, .ph-body .ph-logo-text,
.ph-wrap .ph-preview-bar, .ph-body .ph-preview-bar {
  color: var(--ph-headings, var(--ph-text));
}

/* ============ TIPOGRAFIA / SEÇÕES ============ */
.ph-page-title { font-size: var(--ph-title-size); font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; color: var(--ph-text); font-family: var(--ph-font-headings); }
.ph-page-subtitle { color: var(--ph-text-muted); margin: 0; font-size: 14px; }
.ph-section { margin-bottom: 32px; }
.ph-section:last-child { margin-bottom: 0; }
.ph-section-title { font-size: 16px; font-weight: 700; margin: 0 0 14px; font-family: var(--ph-font-headings); }
.ph-section-desc { color: var(--ph-text-muted); font-size: 13px; margin: -8px 0 16px; }
.ph-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ph-section-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ============ CARDS ============ */
.ph-grid { display: grid; gap: 14px; }
.ph-grid-5 { grid-template-columns: repeat(5, 1fr); }
.ph-card {
  background: var(--ph-surface); border: 1px solid var(--ph-border);
  border-radius: var(--ph-radius); box-shadow: var(--ph-shadow);
  text-decoration: none; color: inherit; display: block;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ph-card:hover { border-color: var(--ph-border-strong); box-shadow: var(--ph-shadow-md); transform: translateY(-1px); text-decoration: none; }
.ph-card-inner { display: flex; align-items: center; gap: 14px; padding: 18px; }
.ph-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ph-mp-icon { font-size: 18px; line-height: 1; }
.ph-card-content { min-width: 0; }
.ph-card-title { font-size: 13px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--ph-font-headings); }
.ph-card-count { font-size: 26px; font-weight: 700; margin: 2px 0 0; line-height: 1.1; font-family: var(--ph-font-headings); }
.ph-card-label { font-size: 12px; color: var(--ph-text-muted); margin: 0; }

/* ============ BOTÕES ============ */
.ph-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 10px; font-weight: 600; font-size: 14px;
  padding: 10px 16px; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.ph-btn .ph-icon, .ph-btn svg { width: 18px; height: 18px; }
.ph-btn-primary { background: var(--ph-primary); color: var(--ph-on-primary, #1A1206); border-color: var(--ph-primary); }
.ph-btn-primary:hover { background: var(--ph-primary-hover); border-color: var(--ph-primary-hover); color: var(--ph-on-primary, #1A1206); text-decoration: none; }
.ph-btn-secondary { background: var(--ph-neutral-bg); color: var(--ph-text); border-color: var(--ph-border); }
.ph-btn-secondary:hover { background: rgba(148,163,184,.18); text-decoration: none; }
.ph-btn-outline { background: transparent; color: var(--ph-text); border-color: var(--ph-border-strong); }
.ph-btn-outline:hover { background: var(--ph-neutral-bg); text-decoration: none; }
.ph-btn-ghost { background: transparent; color: var(--ph-text-muted); border-color: transparent; padding: 8px; }
.ph-btn-ghost:hover { background: var(--ph-neutral-bg); color: var(--ph-text); }
.ph-btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; }
.ph-btn:disabled { opacity: .55; cursor: not-allowed; }
.ph-btn-loading { display: inline-flex; align-items: center; gap: 8px; }
.ph-spinner { width: 16px; height: 16px; animation: ph-spin 1s linear infinite; }
@keyframes ph-spin { to { transform: rotate(360deg); } }
.ph-btn-danger { background: var(--ph-danger-bg); color: var(--ph-danger); border-color: var(--ph-danger-border); }
.ph-btn-danger:hover { background: rgba(248,113,113,.18); text-decoration: none; }

/* ============ INPUTS ============ */
.ph-input, .ph-select, .ph-textarea {
  width: 100%; border: 1px solid var(--ph-border-strong); border-radius: 10px;
  background: var(--ph-bg-2); padding: 10px 14px; font-size: 14px; color: var(--ph-text);
  font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.ph-input:focus, .ph-select:focus, .ph-textarea:focus {
  outline: none; border-color: var(--ph-primary); box-shadow: 0 0 0 3px rgba(255,138,0,.18);
}
.ph-input::placeholder { color: var(--ph-text-faint); }
.ph-select option { background: var(--ph-surface); color: var(--ph-text); }
.ph-label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.ph-required { color: var(--ph-danger); }
.ph-error { color: var(--ph-danger); font-size: 12px; margin: 6px 0 0; min-height: 0; }
.ph-error:empty { display: none; }
.ph-hint { color: var(--ph-text-muted); font-size: 12px; margin: 6px 0 0; }
.ph-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ph-full-width { grid-column: 1 / -1; }
.ph-form-section { background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius); padding: 22px; margin-bottom: 18px; box-shadow: var(--ph-shadow); }
.ph-form-section-title { font-size: 15px; font-weight: 700; margin: 0 0 4px; font-family: var(--ph-font-headings); }
.ph-form-section-desc { color: var(--ph-text-muted); font-size: 13px; margin: 0 0 18px; }
.ph-form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 6px; flex-wrap: wrap; }

/* ============ QUICK ACTIONS ============ */
.ph-quick-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ph-search-wrapper { position: relative; flex: 1; min-width: 260px; max-width: 560px; }
.ph-search-large { max-width: none; }
.ph-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ph-text-faint); pointer-events: none; }
.ph-search-wrapper .ph-input { padding-left: 38px; padding-right: 38px; }
.ph-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer; color: var(--ph-text-faint);
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
  text-decoration: none;
}
.ph-search-clear:hover { background: var(--ph-neutral-bg); color: var(--ph-text); }
.ph-search-clear svg { width: 16px; height: 16px; }

/* ============ DROPDOWN ============ */
.ph-dropdown { position: relative; display: inline-block; }
.ph-dropdown-trigger svg.ph-chevron { width: 16px; height: 16px; color: var(--ph-text-faint); }
.ph-dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px;
  background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: 12px;
  box-shadow: var(--ph-shadow-md); padding: 6px; z-index: 200; display: none;
}
.ph-dropdown.open .ph-dropdown-menu { display: block; animation: ph-fade-in .12s ease; }
@keyframes ph-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ph-dropdown-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: none; background: transparent; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--ph-text); cursor: pointer; text-align: left;
  text-decoration: none;
}
.ph-dropdown-item:hover { background: var(--ph-neutral-bg); text-decoration: none; }
.ph-dropdown-dot { font-size: 14px; }

/* ============ FILTROS ============ */
.ph-toolbar { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.ph-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-filter-chip {
  display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px;
  background: var(--ph-neutral-bg); color: var(--ph-text-muted); font-size: 13px; font-weight: 600;
  text-decoration: none; border: 1px solid var(--ph-border);
}
.ph-filter-chip:hover { background: rgba(148,163,184,.18); color: var(--ph-text); text-decoration: none; }
.ph-filter-chip.active { background: var(--ph-primary); border-color: var(--ph-primary); color: var(--ph-on-primary, #1A1206); }

/* ============ TABELA ============ */
.ph-table-wrapper { background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius); overflow: auto; box-shadow: var(--ph-shadow); }
.ph-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 960px; }
.ph-table thead th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ph-text-muted); background: var(--ph-bg-2); padding: 12px 14px; border-bottom: 1px solid var(--ph-border);
  white-space: nowrap;
}
.ph-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--ph-border); vertical-align: middle; }
.ph-table tbody tr:last-child td { border-bottom: none; }
.ph-table tbody tr:hover { background: rgba(148,163,184,.05); }
.ph-product-cell { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.ph-product-img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; border: 1px solid var(--ph-border); flex-shrink: 0; }
.ph-product-img-placeholder { width: 48px; height: 48px; border-radius: 10px; background: var(--ph-neutral-bg); display: flex; align-items: center; justify-content: center; color: var(--ph-text-faint); flex-shrink: 0; }
.ph-product-img-placeholder svg { width: 22px; height: 22px; }
.ph-product-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ph-product-name { font-weight: 600; color: var(--ph-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; display: block; }
.ph-product-name:hover { text-decoration: underline; }
.ph-product-sku { font-size: 12px; color: var(--ph-text-muted); }
.ph-product-category { font-size: 11px; color: var(--ph-text-faint); }
.ph-sku-col code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--ph-neutral-bg); padding: 3px 8px; border-radius: 6px; }
.ph-mp-col { text-align: center; min-width: 132px; }
.ph-mp-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ph-actions-col { text-align: right; }

.ph-status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ph-status-success { background: var(--ph-success-bg); border: 1px solid var(--ph-success-border); color: var(--ph-success-text); }
.ph-status-neutral { background: var(--ph-neutral-bg); border: 1px solid var(--ph-border); color: var(--ph-neutral-text); }
.ph-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ph-status-success .ph-status-dot { background: var(--ph-success-dot); }
.ph-status-neutral .ph-status-dot { background: var(--ph-neutral-dot); }
.ph-status-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; border: 1px solid transparent;
  background: transparent; cursor: pointer; color: inherit; text-decoration: none;
}
.ph-status-action:hover { background: rgba(255,255,255,.08); }
.ph-status-action svg { width: 15px; height: 15px; }

.ph-pagination { display: flex; gap: 6px; justify-content: center; padding: 18px 0 4px; flex-wrap: wrap; }
.ph-page-link {
  min-width: 36px; height: 36px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ph-border); border-radius: 9px; background: var(--ph-surface);
  text-decoration: none; font-weight: 600; font-size: 13px; color: var(--ph-text);
}
.ph-page-link:hover { background: var(--ph-neutral-bg); text-decoration: none; }
.ph-page-link.active { background: var(--ph-primary); border-color: var(--ph-primary); color: var(--ph-on-primary, #1A1206); }

.ph-empty-state { text-align: center; padding: 56px 20px; background: var(--ph-surface); border: 1px dashed var(--ph-border-strong); border-radius: var(--ph-radius); }
.ph-empty-icon { width: 52px; height: 52px; color: var(--ph-text-faint); margin: 0 auto 14px; }
.ph-empty-state h3 { margin: 0 0 6px; font-size: 16px; font-family: var(--ph-font-headings); }
.ph-empty-state p { color: var(--ph-text-muted); margin: 0 0 18px; }

.ph-url-link { color: var(--ph-text-muted); text-decoration: none; display: block; max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-url-link:hover { color: var(--ph-text); text-decoration: underline; }

/* ============ LISTINGS / FORM ============ */
.ph-listings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ph-listing-field { background: var(--ph-bg-2); border: 1px solid var(--ph-border); border-radius: 10px; padding: 14px; }
.ph-listing-label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.ph-mp-dot { font-size: 13px; }
.ph-input-wrapper { position: relative; }
.ph-detection-badge { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; }
.ph-detection-badge.ok { color: var(--ph-success-text); background: var(--ph-success-bg); border: 1px solid var(--ph-success-border); padding: 2px 8px; border-radius: 999px; }
.ph-detection-badge.warn { color: var(--ph-warning-text); background: var(--ph-warning-bg); border: 1px solid var(--ph-warning-border); padding: 2px 8px; border-radius: 999px; }
.ph-detection-badge.none { color: var(--ph-text-muted); background: var(--ph-surface-2); border: 1px solid var(--ph-border); padding: 2px 8px; border-radius: 999px; }
.ph-detection-hint { font-size: 12px; margin: 6px 0 0; }
.ph-detection-hint.warn { color: var(--ph-warning-text); }
.ph-detection-hint.muted { color: var(--ph-text-muted); }

.ph-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.ph-badge-success { background: var(--ph-success-bg); color: var(--ph-success-text); border: 1px solid var(--ph-success-border); }
.ph-badge-neutral { background: var(--ph-neutral-bg); color: var(--ph-neutral-text); border: 1px solid var(--ph-border); }
.ph-badge-danger { background: var(--ph-danger-bg); color: var(--ph-danger); border: 1px solid var(--ph-danger-border); }
.ph-badge-info { background: var(--ph-info-bg); color: var(--ph-info); border: 1px solid var(--ph-info-border); }

/* ============ DETALHE PRODUTO ============ */
.ph-product-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.ph-sku { font-family: ui-monospace, monospace; background: var(--ph-neutral-bg); padding: 4px 10px; border-radius: 7px; font-size: 13px; }
.ph-product-detail { display: flex; flex-direction: column; gap: 20px; }
.ph-product-image-wrapper { max-width: 340px; }
.ph-product-detail-image { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--ph-radius); border: 1px solid var(--ph-border); }
.ph-product-image-placeholder { width: 100%; aspect-ratio: 1; border-radius: var(--ph-radius); background: var(--ph-neutral-bg); border: 1px dashed var(--ph-border-strong); display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; color: var(--ph-text-faint); }
.ph-product-image-placeholder svg { width: 44px; height: 44px; }
.ph-listing-card { background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius); padding: 16px; box-shadow: var(--ph-shadow); }
.ph-listing-card.has-listing { border-color: var(--ph-success-border); }
.ph-listing-header { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.ph-listing-header h3 { margin: 0 0 4px; font-size: 14px; font-family: var(--ph-font-headings); }
.ph-mp-avatar { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; overflow: hidden; }
.ph-mp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ph-listing-url a { display: block; font-size: 12px; color: var(--ph-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 12px; }
.ph-listing-actions { display: flex; gap: 8px; }
.ph-product-notes { background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius); padding: 18px; }
.ph-product-notes h3 { margin: 0 0 8px; font-size: 14px; font-family: var(--ph-font-headings); }
.ph-product-notes p { margin: 0; color: var(--ph-text-muted); white-space: pre-wrap; }
.ph-product-timestamps { border-top: 1px solid var(--ph-border); padding-top: 16px; }
.ph-product-timestamps dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.ph-product-timestamps dt { color: var(--ph-text-muted); }
.ph-product-timestamps dd { margin: 0; font-weight: 600; }

/* ============ SETTINGS ============ */
.ph-settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ph-setting-card { background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius); padding: 18px; box-shadow: var(--ph-shadow); }
.ph-setting-card-header { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.ph-setting-card-header h3 { margin: 0 0 4px; font-size: 14px; font-family: var(--ph-font-headings); }
.ph-setting-details { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ph-setting-details > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 7px 0; border-top: 1px solid var(--ph-border); }
.ph-setting-details dt { color: var(--ph-text-muted); }
.ph-setting-details dd { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.ph-color-preview { width: 16px; height: 16px; border-radius: 5px; border: 1px solid rgba(255,255,255,.15); display: inline-block; }

/* ============ CARDS SEM ANÚNCIO ============ */
.ph-product-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ph-product-card { background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius); overflow: hidden; box-shadow: var(--ph-shadow); display: flex; flex-direction: column; }
.ph-product-card-img { width: 100%; height: 170px; object-fit: cover; }
.ph-product-card-img-placeholder { height: 170px; background: var(--ph-neutral-bg); display: flex; align-items: center; justify-content: center; color: var(--ph-text-faint); }
.ph-product-card-img-placeholder svg { width: 36px; height: 36px; }
.ph-product-card-content { padding: 14px 14px 6px; }
.ph-product-card-name { font-size: 14px; font-weight: 700; margin: 0 0 4px; font-family: var(--ph-font-headings); }
.ph-product-card-sku { font-size: 12px; color: var(--ph-text-muted); font-family: ui-monospace, monospace; }
.ph-product-card-category { margin-top: 8px; }
.ph-product-card-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 14px; }

/* ============ MODAL / ALERT / TOAST ============ */
.ph-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 18px; }
.ph-modal[hidden] { display: none; }
.ph-modal[hidden] { display: none; }
.ph-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.62); }
.ph-modal-content { position: relative; background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: 16px; width: 100%; max-width: 520px; box-shadow: var(--ph-shadow-lg); animation: ph-pop .16s ease; max-height: 90vh; overflow: auto; }
@keyframes ph-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.ph-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--ph-border); }
.ph-modal-header h3 { margin: 0; font-size: 16px; font-family: var(--ph-font-headings); }
.ph-modal-close { border: none; background: var(--ph-neutral-bg); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ph-text-muted); }
.ph-modal-close:hover { background: rgba(148,163,184,.20); color: var(--ph-text); }
.ph-modal-close svg { width: 16px; height: 16px; }
.ph-modal-body { padding: 20px; }
.ph-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--ph-border); flex-wrap: wrap; }

.ph-alert { display: flex; gap: 12px; padding: 14px; border-radius: 10px; font-size: 13px; }
.ph-alert-warning { background: var(--ph-warning-bg); border: 1px solid var(--ph-warning-border); color: var(--ph-warning-text); }
.ph-alert-danger { background: var(--ph-danger-bg); border: 1px solid var(--ph-danger-border); color: var(--ph-danger); }
.ph-alert-success { background: var(--ph-success-bg); border: 1px solid var(--ph-success-border); color: var(--ph-success-text); }
.ph-alert-info { background: var(--ph-info-bg); border: 1px solid var(--ph-info-border); color: var(--ph-info); }
.ph-alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.ph-alert-content { flex: 1; min-width: 0; }
.ph-duplicate-product { margin-top: 12px; background: var(--ph-surface-2); border: 1px solid var(--ph-warning-border); border-radius: 8px; padding: 12px; color: var(--ph-text); }
.ph-duplicate-product-info { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 13px; }

.ph-toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; }
.ph-toast { background: #20262F; color: #fff; border: 1px solid var(--ph-border-strong); padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: var(--ph-shadow-md); animation: ph-pop .16s ease; max-width: 360px; }
.ph-toast.success { background: #15803d; border-color: #15803d; }
.ph-toast.error { background: #b91c1c; border-color: #b91c1c; }

.ph-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ============ RESPONSIVO ============ */
@media (max-width: 1180px) {
  .ph-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .ph-settings-grid, .ph-product-cards { grid-template-columns: repeat(2, 1fr); }
  .ph-listings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .ph-sidebar { transform: translateX(-100%); width: var(--ph-sidebar-width); }
  .ph-sidebar.mobile-open { transform: none; }
  .ph-sidebar.collapsed { width: var(--ph-sidebar-width); }
  .ph-sidebar.collapsed .ph-logo-text,
  .ph-sidebar.collapsed .ph-nav-link span,
  .ph-sidebar.collapsed .ph-nav-section,
  .ph-sidebar.collapsed .ph-admin-link span { display: inline; }
  .ph-sidebar.collapsed + .ph-app { margin-left: 0; }
  .ph-app { margin-left: 0 !important; }
  .ph-sidebar-static { position: fixed; }
  .ph-sidebar-static + .ph-app { margin-left: 0; }
  .ph-mobile-menu-btn { display: inline-flex; }
  .ph-content { padding: 18px 14px 50px; }
  .ph-main { padding: 18px 14px; }
  .ph-wrap .ph-header { top: 0; padding: 12px 14px; }
  .ph-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .ph-form-grid { grid-template-columns: 1fr; }
  .ph-section-header { flex-direction: column; align-items: stretch; }
  .ph-quick-actions { flex-direction: column; }
  .ph-search-wrapper { max-width: none; }
}
@media (max-width: 640px) {
  .ph-grid-5, .ph-settings-grid, .ph-product-cards { grid-template-columns: 1fr; }
  .ph-card-inner { padding: 14px; }
  .ph-topbar { padding: 0 14px; }
  .ph-topbar-actions .ph-btn span { display: none; }
  .ph-topbar-sub { display: none; }
}

/* Compat admin WP: remove margem estranha em telas pequenas */
@media screen and (max-width: 782px) {
  .ph-wrap { margin-left: -10px; }
}

/* ============ v1.1.0: Shopee + desempenho ============ */
.ph-shopee-cta .ph-shopee-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--ph-surface); border: 1px solid var(--ph-border);
  border-radius: var(--ph-radius); padding: 18px 20px; box-shadow: var(--ph-shadow);
}
.ph-shopee-actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.ph-import-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ph-progress { height: 10px; background: var(--ph-neutral-bg); border-radius: 999px; overflow: hidden; }
.ph-progress-bar { height: 100%; background: var(--ph-primary); width: 0; transition: width .3s ease; }
.ph-import-errors { margin-top: 12px; font-size: 13px; color: var(--ph-warning-text); }
.ph-product-sales { display: block; font-size: 12px; color: var(--ph-text-muted); margin-top: 2px; }
.ph-order-form { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ph-select-sm { max-width: 240px; }
.ph-spark { display: flex; align-items: flex-end; gap: 4px; height: 56px; padding: 8px 0; }
.ph-spark-bar { width: 14px; background: var(--ph-primary); border-radius: 3px; opacity: .85; }
.ph-sub-title { font-size: 14px; font-weight: 700; margin: 16px 0 8px; font-family: var(--ph-font-headings); }
.ph-help-list { margin: 8px 0 0 18px; color: var(--ph-text-muted); }
.ph-help-list li { margin-bottom: 4px; }
@media (max-width: 640px) {
  .ph-shopee-cta .ph-shopee-banner { flex-direction: column; align-items: stretch; }
  .ph-import-cards { grid-template-columns: 1fr; }
}

/* ============ v1.2.0: conexão Shopee + personalização ============ */
.ph-conn-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ph-conn-status { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.ph-conn-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ph-neutral-dot); flex-shrink: 0; }
.ph-conn-dot.on { background: var(--ph-success-dot); box-shadow: 0 0 0 4px var(--ph-success-bg); }
.ph-conn-dot.warn { background: var(--ph-warning-text); box-shadow: 0 0 0 4px var(--ph-warning-bg); }
.ph-conn-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ph-details-adv { margin-top: 14px; }
.ph-details-adv summary { cursor: pointer; color: var(--ph-text-muted); font-size: 13px; font-weight: 600; }
.ph-details-adv summary:hover { color: var(--ph-text); }

/* Densidade e sombras (Personalização → Aparência) */
.ph-density-compact .ph-table tbody td { padding: 7px 10px; }
.ph-density-compact .ph-card-inner { padding: 12px; }
.ph-density-compact .ph-section { margin-bottom: 20px; }
.ph-density-compact .ph-content, .ph-density-compact .ph-main { padding-top: 18px; }
.ph-shadow-none { --ph-shadow: none; --ph-shadow-md: none; --ph-shadow-lg: none; }
.ph-shadow-strong { --ph-shadow: 0 2px 6px rgba(0,0,0,.45); --ph-shadow-md: 0 8px 24px rgba(0,0,0,.5); --ph-shadow-lg: 0 24px 60px rgba(0,0,0,.6); }

/* Personalização: campos de cor / mídia / tamanhos */
.ph-color-row { display: flex; align-items: center; gap: 10px; }
.ph-color-row input[type="color"] {
  width: 46px; height: 38px; padding: 3px; cursor: pointer;
  border: 1px solid var(--ph-border-strong); border-radius: 8px; background: var(--ph-bg-2);
}
.ph-color-row .ph-input { max-width: 110px; font-family: ui-monospace, monospace; text-transform: uppercase; }
.ph-media-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ph-media-preview { width: 64px; height: 64px; border-radius: 10px; border: 1px dashed var(--ph-border-strong); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--ph-bg-2); color: var(--ph-text-faint); font-size: 11px; flex-shrink: 0; }
.ph-media-preview img { width: 100%; height: 100%; object-fit: contain; }
.ph-size-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ph-size-grid .ph-input, .ph-size-grid .ph-select { padding: 8px 10px; font-size: 13px; }
.ph-mp-custom { display: flex; flex-direction: column; gap: 14px; }
.ph-mp-custom-item { background: var(--ph-bg-2); border: 1px solid var(--ph-border); border-radius: 10px; padding: 14px; }
.ph-mp-custom-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ph-mp-custom-head strong { font-family: var(--ph-font-headings); }
.ph-custom-layout { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }
.ph-preview-sticky { position: sticky; top: 80px; }
.ph-preview-box { border: 1px solid var(--ph-border); border-radius: var(--ph-radius); overflow: hidden; background: var(--ph-bg); }
.ph-preview-bar { padding: 10px 14px; border-bottom: 1px solid var(--ph-border); background: var(--ph-surface); font-weight: 700; font-size: 13px; font-family: var(--ph-font-headings); }
.ph-preview-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ph-preview-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ph-preview-kpi { background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius); padding: 12px; }
.ph-preview-kpi b { display: block; font-size: 20px; font-family: var(--ph-font-headings); }
.ph-preview-kpi span { font-size: 11px; color: var(--ph-text-muted); }
.ph-preview-table { background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius); overflow: hidden; }
.ph-preview-table div { padding: 9px 12px; font-size: 12px; border-bottom: 1px solid var(--ph-border); }
.ph-preview-table div:last-child { border-bottom: none; }
.ph-preview-filters { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 1180px) {
  .ph-custom-layout { grid-template-columns: 1fr; }
  .ph-preview-sticky { position: static; }
  .ph-size-grid { grid-template-columns: repeat(2, 1fr); }
}

/* SHEIN map modal: quase tela cheia, resultados em grade rolável. */
#ph-shein-map-modal .ph-modal-content {
  max-width: 1100px;
  width: calc(100vw - 48px);
  height: min(88vh, 920px);
  display: flex;
  flex-direction: column;
}
#ph-shein-map-modal .ph-modal-body { overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; }
#ph-shein-map-modal .ph-input { width: 100%; font-size: 16px; padding: 12px 14px; }
#ph-shein-map-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
#ph-shein-map-results .ph-btn { overflow: hidden; }
#ph-shein-map-results .ph-btn span:last-child { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 640px) {
  #ph-shein-map-results { grid-template-columns: 1fr; }
}

/* Catálogo premium: grade de cards 4 colunas (foto → título → marketplaces). */
.ph-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1400px) { .ph-card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1080px) { .ph-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ph-card-grid { grid-template-columns: 1fr; } }
.ph-product-card {
  background: var(--ph-surface);
  border: 1px solid var(--ph-border);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ph-shadow);
  transition: transform .16s ease, box-shadow .16s ease;
  position: relative;
}
.ph-tiktok-pick { position: absolute; top: 8px; left: 8px; z-index: 5; background: rgba(0,0,0,.55); border-radius: 8px; padding: 6px; line-height: 0; cursor: pointer; }
.ph-tiktok-pick input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.ph-fresh-dot { position: absolute; top: 8px; right: 8px; z-index: 5; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(0,0,0,.5); }
.ph-fresh-fresh { background: #22c55e; }
.ph-fresh-stale { background: #f59e0b; }
.ph-fresh-none { background: #6b7280; }
.ph-tiktok-fab { position: fixed; right: 18px; bottom: 18px; z-index: 1500; box-shadow: var(--ph-shadow-lg); }
.ph-tiktok-fab[hidden] { display: none; }
/* Precificação v2.0 */
.ph-pr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
@media (max-width: 700px) { .ph-pr-grid { grid-template-columns: 1fr 1fr; } }
.ph-pr-grid > div { background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.16); border-radius: 12px; padding: 10px 12px; }
.ph-pr-grid span { display: block; font-size: 11px; color: var(--ph-text-muted); text-transform: uppercase; letter-spacing: .4px; }
.ph-pr-grid b { font-size: 17px; }
.ph-rec-card { border: 1px solid #FF8A00; border-left: 5px solid #FF8A00; border-radius: 14px; padding: 14px 16px; margin: 12px 0; background: rgba(255,138,0,.06); }
.ph-rec-card span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--ph-text-muted); }
.ph-rec-card b { font-size: 26px; color: #FF8A00; }
.ph-rec-card p { margin: 6px 0 0; font-size: 13.5px; }
.ph-history { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ph-score-wrap { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.ph-score-wheel { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.ph-score-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; }
.ph-checks { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ph-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.ph-check .ph-dot { font-weight: 800; flex-shrink: 0; }
.ph-check.ok .ph-dot { color: var(--ph-success, #22c55e); }
.ph-check.bad .ph-dot { color: var(--ph-danger, #ef4444); }
.ph-check small { display: block; color: var(--ph-text-muted); }
/* Popup premium da análise */
#ph-score-modal .ph-modal-content { max-width: 960px; padding: 32px 34px; border-radius: 22px; }
#ph-score-modal .ph-score-wheel { width: 170px; height: 170px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
#ph-score-modal .ph-score-num { font-size: 40px; letter-spacing: -.5px; }
#ph-score-modal .ph-sub-title { font-size: 17px; margin: 22px 0 12px; }
#ph-score-modal .ph-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 700px) { #ph-score-modal .ph-checks { grid-template-columns: 1fr; } }
#ph-score-modal .ph-check { background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.16); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
#ph-score-modal .ph-check.ok { border-left: 4px solid var(--ph-success, #22c55e); }
#ph-score-modal .ph-check.bad { border-left: 4px solid var(--ph-danger, #ef4444); }
#ph-score-modal .ph-check .ph-dot { font-size: 15px; }
#ph-score-modal textarea.ph-input { border-radius: 12px; font-size: 14px; }
#ph-score-modal details.ph-debug { margin-top: 10px; font-size: 12px; }
#ph-score-modal details.ph-debug pre { white-space: pre-wrap; word-break: break-word; background: rgba(148,163,184,.1); border-radius: 8px; padding: 8px 10px; max-height: 160px; overflow: auto; }
.ph-product-card:hover { transform: translateY(-3px); box-shadow: var(--ph-shadow-lg); }
.ph-card-photo { display: block; aspect-ratio: 1 / 1; background: rgba(148,163,184,.12); overflow: hidden; }
.ph-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-card-photo-empty { display: flex; align-items: center; justify-content: center; height: 100%; font-weight: 800; font-size: 28px; color: var(--ph-text-muted); }
.ph-card-body { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ph-card-title { font-weight: 700; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }
.ph-card-mps { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.ph-mp-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid #ef4444;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; cursor: pointer; background: transparent; color: var(--ph-text-muted);
}
.ph-mp-btn.is-on { border-color: #22c55e; color: #fff; background: rgba(34,197,94,.15); }
.ph-mp-btn.is-sync { border-color: #22c55e; color: var(--ph-text); background: transparent; }
/* Logo do marketplace com círculo verde (cadastrado) ou vermelho (não). */
.ph-mp-logo { width: 48px; height: 48px; border-radius: 50%; border: 3px solid #ef4444; background: transparent; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; }
.ph-mp-logo.is-on { border-color: #22c55e; }
.ph-mp-logo img { width: 100%; height: 100%; object-fit: cover; padding: 0; display: block; }
/* Sem anúncio: logo em preto e branco. */
.ph-mp-logo:not(.is-on) img { filter: grayscale(1); opacity: .8; }
.ph-mp-logo span { font-size: 11px; font-weight: 800; color: var(--ph-text-muted); }
.ph-mp-logo.is-on span { color: var(--ph-text); }
.ph-card-actions { margin-top: 8px; display: flex; justify-content: flex-end; }
.ph-mp-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.ph-mp-tag { min-width: 30px; height: 22px; padding: 0 7px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }