/* Painel "Anunciar no jogo" — layout fixo, rodapé visível, menos poluição visual */

dialog.sc-dialog:has(.telao-dashboard),
dialog.sc-dialog:has(.telao-order) {
  width: min(960px, calc(100vw - 16px)) !important;
  max-width: 960px !important;
  max-height: min(94dvh, 920px);
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  gap: 0;
  border-radius: 18px;
  border: 1px solid #ffffff14;
  background: #0c0d0d;
  box-shadow: 0 28px 80px #000c;
}

dialog.sc-dialog:has(.telao-dashboard) .sc-head,
dialog.sc-dialog:has(.telao-order) .sc-head {
  flex-shrink: 0;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid #ffffff12;
  background: #101111;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-steps {
  flex-shrink: 0;
  margin: 0;
  padding: 10px 14px 0;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-dashboard {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 18px;
  -webkit-overflow-scrolling: touch;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-dashboard h2 {
  font-size: 22px;
  margin: 0 0 6px;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-intro {
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.45;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-foot,
dialog.sc-dialog:has(.telao-order) .telao-foot {
  flex-shrink: 0;
  position: relative;
  margin: 0 !important;
  bottom: auto !important;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(180deg, #101111f0, #0a0a0af8);
  border-top: 1px solid #ffffff18;
  box-shadow: 0 -10px 28px #0009;
  z-index: 8;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-tools .account-btn {
  min-height: 40px;
  font-size: 12px;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-count {
  font-size: 12px;
  color: #b8bab7;
  flex: 1;
  min-width: 120px;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-bar-row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-bar .telao-pay {
  min-width: 0;
  flex: 1 1 200px;
  min-height: 48px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-audience {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 820px) {
  dialog.sc-dialog:has(.telao-dashboard) .telao-audience {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

dialog.sc-dialog:has(.telao-dashboard) .telao-metric {
  padding: 12px;
  gap: 4px;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-metric strong {
  font-size: 22px;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-measurement {
  display: none;
}

details.telao-guide-wrap {
  margin: 0 0 14px;
  border: 1px solid #ffffff14;
  border-radius: 12px;
  background: #ffffff06;
  overflow: hidden;
}

details.telao-guide-wrap summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #ecd680;
  user-select: none;
}

details.telao-guide-wrap summary::-webkit-details-marker {
  display: none;
}

details.telao-guide-wrap summary::after {
  content: " ▾";
  float: right;
  opacity: 0.7;
}

details.telao-guide-wrap[open] summary::after {
  content: " ▴";
}

details.telao-guide-wrap .telao-guide {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 14px 14px;
  margin: 0;
}

details.telao-guide-wrap .telao-guide h3 {
  display: none;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-guide-steps {
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 700px) {
  dialog.sc-dialog:has(.telao-dashboard) .telao-guide-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

dialog.sc-dialog:has(.telao-dashboard) .telao-search {
  position: sticky;
  top: 0;
  z-index: 3;
  margin-bottom: 12px;
  background: #0c0d0d;
  box-shadow: 0 8px 16px #0c0d0dcc;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 720px) {
  dialog.sc-dialog:has(.telao-dashboard) .telao-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

dialog.sc-dialog:has(.telao-dashboard) .telao-card {
  cursor: pointer;
  border-radius: 14px;
  border: 1px solid #ffffff16;
  background: #ffffff06;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  min-height: 44px;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-card:hover {
  border-color: #ffffff28;
  background: #ffffff0a;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-card.on {
  border-color: #ecd68099 !important;
  background: linear-gradient(145deg, #ecd68018, #ffffff08) !important;
  box-shadow: inset 0 0 0 1px #ecd68044;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-card .telao-check {
  width: 22px;
  height: 22px;
  accent-color: #ecd680;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-owned-ad {
  flex-direction: row;
  align-items: center;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
  background: #ffffff06;
  border: 1px solid #ffffff12;
}

dialog.sc-dialog:has(.telao-dashboard) .telao-owned-ad button {
  border-radius: 10px;
}

dialog.sc-dialog:has(.telao-dashboard) .sc-close {
  width: 40px !important;
  height: 40px !important;
}

@media (max-width: 760px) {
  dialog.sc-dialog:has(.telao-dashboard) .telao-bar-row {
    flex-direction: column;
    align-items: stretch;
  }

  dialog.sc-dialog:has(.telao-dashboard) .telao-bar .telao-pay {
    width: 100%;
  }

  dialog.sc-dialog:has(.telao-dashboard) .telao-dashboard h2 {
    font-size: 20px;
  }
}

/* Banner: fluxo foto/vídeo → pagar */
.telao-flow-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #ecd68044;
  background: linear-gradient(135deg, #ecd68014, #ffffff06);
}

.telao-flow-banner strong {
  font-size: 13px;
  color: #ecd680;
  letter-spacing: 0.04em;
}

.telao-flow-banner span {
  font-size: 12px;
  line-height: 1.45;
  color: #b8bab7;
}

/* Upload moderno */
.telao-step.telao-upload-modern {
  border: 1px solid #ffffff14;
  border-radius: 16px;
  padding: 16px;
  margin: 12px 0;
  background: linear-gradient(165deg, #141615, #0c0d0c);
}

.telao-upload-drop {
  margin: 12px 0 14px;
  padding: 28px 16px;
  border-radius: 14px;
  border: 2px dashed #ffffff28;
  background: #ffffff05;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  text-align: center;
}

.telao-upload-drop:hover,
.telao-upload-drop.drag {
  border-color: #ecd68099;
  background: #ecd68010;
}

.telao-upload-drop.has-file {
  border-style: solid;
  border-color: #2ecc7166;
  background: #1a2b2210;
}

.telao-upload-drop-inner {
  pointer-events: none;
}

.telao-upload-ico {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
}

.telao-upload-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #f2f3f2;
}

.telao-upload-sub {
  margin: 0;
  font-size: 12px;
  color: #9aa89f;
  line-height: 1.4;
}

.telao-file-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.telao-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 8px;
}

.telao-upload-actions .telao-pick-modern {
  flex: 1 1 160px;
  min-height: 46px;
  border-radius: 12px;
  font-weight: 700;
}

.telao-upload-actions .telao-submit {
  flex: 1 1 200px;
  min-height: 46px;
  border-radius: 12px;
  font-weight: 700;
}

.telao-upload-hint {
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #9aa89f !important;
}

.telao-progress-modern {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  margin-top: 10px;
}

.telao-library-modern {
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid #ffffff12;
  padding: 8px 10px;
}

/* Pagamento só depois da mídia aprovada */
.telao-step.telao-locked {
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(0.2);
  position: relative;
}

.telao-step.telao-locked::after {
  content: "Envie e aguarde a aprovação da foto/vídeo acima";
  display: block;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #ffffff08;
  border: 1px solid #ffffff14;
  font-size: 12px;
  color: #c5c8c5;
  pointer-events: none;
}

dialog.sc-dialog.bm-telao-media-approved .telao-step.telao-locked {
  opacity: 1;
  pointer-events: auto;
  filter: none;
}

dialog.sc-dialog.bm-telao-media-approved .telao-step.telao-locked::after {
  display: none;
}

/* Seus anúncios */
.telao-owned-modern {
  border-radius: 14px !important;
  padding: 14px !important;
  background: linear-gradient(145deg, #ffffff08, #ffffff04) !important;
  border: 1px solid #ffffff16 !important;
  gap: 12px !important;
}

.telao-owned-modern button.account-btn.gold {
  border-radius: 10px;
  min-height: 42px;
  font-weight: 700;
}

dialog.sc-dialog:has(.telao-step) .telao-steps {
  margin: 8px 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff06;
  border: 1px solid #ffffff10;
}

dialog.sc-dialog:has(.telao-step) .telao-steps li.on .telao-step-btn {
  color: #ecd680;
}

dialog.sc-dialog:has(.telao-market) .telao-market {
  margin-top: 16px;
  opacity: 0.95;
}

dialog.sc-dialog:has(.telao-step[data-step="3"]) .telao-ranking-details {
  border-radius: 12px;
  border: 1px solid #ffffff12;
  overflow: hidden;
}

/* Passo a passo e escolha de telões */
.telao-flow-steps{margin:0;padding:0 0 0 18px;font-size:12px;line-height:1.5;color:#b8bab7}
.telao-flow-steps li{margin:0 0 6px}
.telao-flow-steps b{color:#ecd680}
.telao-pick-help{margin:0 0 12px;padding:12px 14px;border-radius:12px;border:1px solid #ecd68055;background:#ecd6800c}
.telao-pick-help-title{margin:0 0 4px;font-size:14px;font-weight:700;color:#f2f3f2}
.telao-pick-help-sub{margin:0;font-size:12px;line-height:1.45;color:#a8aba8}
.telao-pick-help-sub strong{color:#ecd680}
details.telao-owned-wrap{margin:16px 0 0;border:1px solid #ffffff12;border-radius:12px;background:#ffffff04;overflow:hidden}
details.telao-owned-wrap summary{cursor:pointer;padding:12px 14px;font-size:13px;font-weight:700;color:#c5c8c5;list-style:none}
details.telao-owned-wrap summary::-webkit-details-marker{display:none}
details.telao-owned-wrap .telao-ranking-details{padding:0 14px 14px;margin:0;border:0}
.telao-foot-hint{margin:0 0 10px;padding:10px 12px;border-radius:10px;font-size:12px;line-height:1.45;color:#d8dad7;background:#ffffff08;border:1px solid #ffffff14;width:100%;box-sizing:border-box}
dialog.sc-dialog:has(.telao-dashboard) .telao-card .telao-check{width:24px!important;height:24px!important;flex-shrink:0;cursor:pointer}