/* =========================================================== ACESSO ===== */
.auth {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--s-6) var(--s-4);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--brand-50) 0%, transparent 60%),
    var(--canvas);
}
.auth-card {
  width: min(430px, 100%);
  display: grid;
  gap: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  padding: var(--s-8) var(--s-6);
}
.auth-brand { display: flex; align-items: center; gap: var(--s-2); }
.auth-card h1 { font-size: var(--fs-h1); letter-spacing: var(--track-display); }
.auth-card .error { color: var(--danger-500); font-size: var(--fs-xs); font-weight: 700; }

/* ======================================================= ONBOARDING ===== */
.onb-card { width: min(560px, 100%); }
.onb-steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.onb-steps li { flex: 1; height: 4px; border-radius: var(--r-full); background: var(--line); }
.onb-steps li.done { background: var(--brand-200); }
.onb-steps li.current { background: var(--brand-500); }

.onb-body { display: grid; gap: var(--s-4); min-height: 250px; align-content: start; }
.onb-body h1 { font-size: var(--fs-h1); letter-spacing: var(--track-display); }
.onb-welcome { display: grid; gap: var(--s-3); justify-items: center; text-align: center; padding-top: var(--s-6); }
.onb-welcome p { color: var(--ink-500); max-width: 44ch; }
.onb-actions { display: flex; justify-content: space-between; gap: var(--s-3); }
.onb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.onb-list li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--ink-700); }
.onb-list .icon { color: var(--brand-500); }

.slug-row {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding-left: var(--s-3);
}
.slug-row span { color: var(--ink-500); font-size: var(--fs-xs); white-space: nowrap; }
.slug-row .input { border: 0; background: transparent; padding-left: 2px; }
.slug-row .input:focus { box-shadow: none; }
.slug-row:focus-within { border-color: var(--brand-400); box-shadow: var(--focus); }

/* =========================================================== INÍCIO ===== */
.home-hero { margin-bottom: var(--s-6); }
.home-hero p { margin-top: 6px; font-size: var(--fs-body); }

.home-actions { margin-bottom: var(--s-10); }
.home-actions-title {
  font-size: var(--fs-h3);
  margin-bottom: var(--s-3);
}
.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }

.action-card {
  position: relative;
  display: grid;
  gap: 3px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  padding-right: var(--s-10);
  transition: border-color 0.15s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.action-card:hover {
  border-color: var(--brand-200);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.action-icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--brand-500);
  margin-bottom: var(--s-2);
}
.action-card strong { font-size: var(--fs-h3); letter-spacing: var(--track-tight); }
.action-card small { color: var(--ink-500); font-size: var(--fs-xs); }
.action-chevron {
  position: absolute;
  right: var(--s-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-200);
}
.action-card:hover .action-chevron { color: var(--brand-500); }

.home-block { margin-bottom: var(--s-10); }

.campaign-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.campaign-row h3 { font-size: var(--fs-sm); }
.campaign-row-main { min-width: 0; display: grid; gap: 5px; }
.campaign-row-side { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.campaign-row-side .icon { vertical-align: -2px; margin-right: 3px; }

/* ==================================================== OPORTUNIDADES ===== */
.filters { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.filters-search { max-width: 420px; }
.filters-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
.results-count { margin-bottom: var(--s-3); }

@media (max-width: 900px) { .filters-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .filters-grid { grid-template-columns: 1fr; } }

/* ================================================ DETALHE DO PRODUTO ==== */
.detail { display: grid; gap: var(--s-3); }
.detail-media {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--brand-50);
  aspect-ratio: 4 / 3;
}
.detail-media img { width: 100%; height: 100%; object-fit: cover; }
.detail-flags { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.detail-name { font-size: var(--fs-h2); }
.detail-price { display: flex; align-items: baseline; gap: var(--s-2); }
.detail-price strong { font-size: 26px; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.detail-price del { color: var(--ink-400); font-size: var(--fs-sm); }

.detail-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin: var(--s-2) 0;
  padding: 0;
}
.detail-specs div { background: var(--surface-2); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); }
.detail-specs dt { font-size: 10px; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.05em; }
.detail-specs dd { margin: 3px 0 0; font-size: var(--fs-sm); font-weight: 700; }

.detail-summary { color: var(--ink-700); font-size: var(--fs-sm); line-height: 1.6; }
.detail-subhead { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--ink-500); margin-top: var(--s-3); }
.detail-benefits, .detail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.detail-benefits li, .detail-list li { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-sm); color: var(--ink-700); }
.detail-benefits .icon { color: var(--ok-500); margin-top: 2px; flex: none; }
.detail-list .icon { color: var(--ink-400); margin-top: 2px; flex: none; }

.add-campaign-list .choice { min-height: 58px; }

/* ========================================================= ESTÚDIO ====== */
.stepper {
  display: flex;
  gap: var(--s-2);
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow-x: auto;
  scrollbar-width: none;
}
.stepper li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 1;
  min-width: 130px;
  color: var(--ink-400);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.stepper-dot {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--line-soft);
  font-size: var(--fs-2xs);
}
.stepper li.current { color: var(--brand-700); }
.stepper li.current .stepper-dot { background: var(--brand-500); color: #fff; }
.stepper li.done { color: var(--ink-700); }
.stepper li.done .stepper-dot { background: var(--ok-50); color: var(--ok-500); }

.studio { display: grid; gap: var(--s-4); }
.studio-panel {
  display: grid;
  gap: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.studio-panel h2 { font-size: var(--fs-h3); }
.studio-generate { justify-items: start; }
.studio-textarea { min-height: 220px; font-size: var(--fs-sm); line-height: 1.65; }
.studio-save { gap: var(--s-2); }

.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-2); }
.picker-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-2);
}
.picker-item img { width: 52px; height: 52px; border-radius: var(--r-sm); object-fit: cover; flex: none; background: var(--brand-50); }
.picker-text { min-width: 0; display: grid; gap: 2px; }
.picker-text strong {
  font-size: var(--fs-xs);
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.picker-text small { font-size: var(--fs-2xs); color: var(--ink-500); }
.picker-item:hover { border-color: var(--brand-200); }
.picker-item[aria-pressed="true"] { border-color: var(--brand-500); background: var(--brand-50); }

/* ======================================================= CAMPANHAS ====== */
.campaign-card {
  display: grid;
  gap: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.campaign-card h3 { font-size: var(--fs-h3); }
.campaign-card-top { align-items: flex-start; }
.campaign-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin: 0; }
.campaign-specs dt { font-size: 10px; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.05em; }
.campaign-specs dd { margin: 4px 0 0; font-size: var(--fs-sm); font-weight: 600; }
.campaign-warning {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--warn-50);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  color: var(--warn-500);
  font-size: var(--fs-xs);
  font-weight: 600;
}
@media (max-width: 720px) { .campaign-specs { grid-template-columns: repeat(2, 1fr); } }

/* ======================================================= BIBLIOTECA ===== */
.library-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
}
.library-row > div { flex: 1; min-width: 0; }
.library-row strong { font-size: var(--fs-sm); }
.library-icon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--brand-50);
  color: var(--brand-500);
}

/* ===================================================== INTEGRAÇÕES ====== */
.integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.integration-card {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.integration-primary { border-color: var(--brand-200); background: linear-gradient(180deg, var(--brand-50), var(--surface) 42%); }
.integration-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.integration-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--brand-600);
}
.integration-primary .integration-icon { background: var(--surface); }
.integration-card h3 { font-size: var(--fs-h3); }
.integration-caps { list-style: none; margin: var(--s-1) 0 var(--s-3); padding: 0; display: grid; gap: 6px; }
.integration-caps li { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--ink-500); }
.integration-caps .icon { color: var(--ink-200); flex: none; }

/* ======================================================= RESULTADOS ===== */
.results-period { margin-bottom: var(--s-5); }
.results-hint { display: flex; align-items: center; gap: 6px; margin-top: var(--s-3); }

/* ========================================================== VITRINE ===== */
.showcase-url {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.showcase-url .label { font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-500); }
.showcase-url-value { display: block; margin-top: 3px; font-size: var(--fs-h3); letter-spacing: var(--track-tight); }

.showcase-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-4); align-items: start; }
.showcase-preview { position: sticky; top: var(--s-5); }

.preview-phone {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--brand-50), var(--surface) 45%);
  padding: var(--s-5) var(--s-4);
  overflow: hidden;
}
.preview-screen { display: grid; justify-items: center; gap: var(--s-2); text-align: center; }
.preview-screen h3 { font-size: var(--fs-h3); }
.preview-title { font-size: var(--fs-sm); margin-top: var(--s-3); }
.preview-products { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); width: 100%; margin-top: var(--s-2); }
.preview-product {
  display: grid;
  gap: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-2);
  text-align: left;
}
.preview-product img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); background: var(--brand-50); }
.preview-product strong {
  font-size: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.preview-product span { font-size: var(--fs-2xs); font-weight: 700; }
.preview-cta { color: var(--brand-700); }
.preview-footer { margin-top: var(--s-4); color: var(--ink-400); font-size: 10px; }

@media (max-width: 980px) {
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-preview { position: static; }
}

/* =========================================================== CONTA ====== */
.account-card { max-width: 620px; display: grid; gap: var(--s-4); }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-5); }
.plan-card { display: grid; gap: var(--s-3); align-content: start; }
.plan-current { border-color: var(--brand-200); background: linear-gradient(180deg, var(--brand-50), var(--surface) 40%); }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.plan-list li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--ink-700); }
.plan-list .icon { color: var(--ok-500); flex: none; }
.plan-usage { max-width: 620px; }

.admin-block { margin-top: var(--s-5); }
.admin-providers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin: 0; }
.admin-providers div { background: var(--surface-2); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); }
.admin-providers dt { font-size: 10px; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.05em; }
.admin-providers dd { margin: 3px 0 0; font-size: var(--fs-xs); font-weight: 600; }

@media (max-width: 760px) {
  .action-grid { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .admin-providers { grid-template-columns: 1fr 1fr; }
  .campaign-row { align-items: flex-start; flex-direction: column; }
  .campaign-row-side { width: 100%; justify-content: space-between; }
}