/* Somente os HTMLs opt-in; não modifica as outras abas do Dash. */
body.card-studio { color: #172b43; background: #edf2f6; }
.card-studio .sidebar, .card-studio .panel {
  width: 340px; min-width: 300px; max-width: 360px; flex: none;
  padding: 20px; gap: 14px; background: #f8fafc;
  border-right: 1px solid #d9e2eb; box-shadow: none;
}
.card-studio .sidebar::before { display: none; }
.card-studio .panel > h1, .card-studio .panel > .hint:first-of-type { display: none; }
.card-studio .studio-header { padding: 2px 0 14px; border-bottom: 1px solid #dce5ee; }
.card-studio .studio-header > span { color: #336b88; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.card-studio .studio-header h1 { margin: 8px 0; font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -.025em; text-transform: none; }
.card-studio .studio-header p { color: #52677c; font-size: 11px; margin: 0; }
.card-studio .studio-check { padding: 12px; border: 1px solid #c9dfec; border-radius: 10px; background: #edf6fb; font-size: 12px; line-height: 1.5; }
.card-studio .studio-check p { margin: 0; }
.card-studio .studio-check[data-status="warning"] { background: #fff6e6; border-color: #e6be78; color: #794400; }
.card-studio .studio-check label { display: block; margin-top: 10px; font-weight: 650; cursor: pointer; }
.card-studio .studio-check label[hidden] { display: none; }
.card-studio .studio-check input { width: auto; margin-right: 5px; }
.card-studio .sidebar details, .card-studio .panel details { background: #fff; border: 1px solid #dce5ee; border-radius: 12px; padding: 12px; box-shadow: none; }
.card-studio .sidebar summary, .card-studio .panel summary { background: transparent; border: 0; color: #24465f; font-size: 11px; letter-spacing: .055em; padding: 4px 0; border-radius: 0; box-shadow: none; }
.card-studio .sidebar input, .card-studio .sidebar select, .card-studio .sidebar textarea,
.card-studio .panel input, .card-studio .panel select, .card-studio .panel textarea { box-shadow: none; border-radius: 8px; }
.card-studio :is(.sidebar, .panel) :is(button, input, select, textarea, summary):focus-visible { outline: 3px solid #3399bd; outline-offset: 3px; }
.card-studio .primary-btn { background: #11677c; border-color: #0c5265; box-shadow: none; font-weight: 800; }
.card-studio .primary-btn:hover { background: #0c5265; }
.card-studio .primary-btn:disabled { opacity: .6; cursor: wait; }
.card-studio .secondary-btn, .card-studio .dest-btn { box-shadow: none; border-radius: 10px; }
.card-studio .format-tabs { box-shadow: none; background: #f8fafc; padding: 10px; }
.card-studio .format-pill { box-shadow: none; font-size: 11px; padding: 8px 14px; }
.card-studio .preview-area { min-height: 0; }
.card-studio .card-preview-area, .card-studio .stage {
  padding: 16px; min-width: 0; min-height: 0; overflow: hidden;
  background: #e8eef3; background-image: none;
}
.card-studio .card-hatch, .card-studio .hatch { opacity: .12; }
.card-studio #s-faixa-temperatura { font-size: 30px !important; }
.card-studio .placeholder-text-mapa { max-width: 90%; text-align: center; line-height: 1.4; }
.card-studio .card-root > [style*="repeating-linear-gradient"] { opacity: .12; }
.card-studio .card-shell .eyebrow, .card-studio .card-shell .blk-label { letter-spacing: .1em; }
.card-studio .card-shell .blk, .card-studio .card-shell .blk-dark { box-shadow: none; border-color: rgba(255,255,255,.16); }
.card-studio .card-shell .blk-severo { border-color: rgba(255,255,255,.24); }
.card-studio .card-root :is(#bloco-manha, #bloco-tarde, #bloco-noite) { border-color: rgba(255,255,255,.2) !important; background: rgba(2,18,28,.38) !important; }
/* A arte conserva dimensões reais; somente seu invólucro é reduzido. */
.card-studio :is(#scaler, #preview-scale, .preview-scale-stories, .preview-scale-feed) { flex: none; }
/* Navegação e saída fixas; só os campos da etapa selecionada rolam. */
.card-studio :is(.sidebar, .panel).studio-organized {
  display: flex; flex-direction: column; width: 380px; min-width: 340px; max-width: 380px;
  height: 100%; padding: 0; gap: 0; overflow: hidden;
  font-family: Inter, system-ui, sans-serif;
}
.card-studio .studio-organized > .studio-header {
  flex: none; padding: 18px 18px 12px; margin: 0; background: #fff;
}
.card-studio .studio-header h1 { font-family: Inter, system-ui, sans-serif; font-size: 20px; }
.card-studio .studio-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 14px; padding: 4px; border-radius: 10px; background: #edf2f6; }
.card-studio .studio-nav-btn {
  position: relative; padding: 9px 3px; min-height: 38px; border: 0; border-radius: 7px;
  background: transparent; color: #52677c; cursor: pointer; font-size: 12px; font-weight: 650;
}
.card-studio .studio-nav-btn[aria-pressed="true"] { background: #11677c; color: #fff; box-shadow: none; }
.card-studio .studio-nav-btn[data-warning="true"]::after { content: ''; position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: #b26a00; }
.card-studio .studio-form { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 18px; scrollbar-gutter: stable; }
.card-studio .studio-step { display: flex; flex-direction: column; gap: 12px; }
.card-studio .studio-step[hidden] { display: none !important; }
.card-studio #dias-container > [hidden] { display: none !important; }
.card-studio .studio-step > * { flex-shrink: 0; }
.card-studio .studio-step-hint { margin: 0; color: #52677c; font-size: 12px; line-height: 1.5; }
.card-studio .studio-organized :is(details, .control-panel) { margin: 0; border-radius: 10px; box-shadow: none; }
.card-studio .studio-organized details { padding: 0 12px 12px; }
.card-studio .studio-organized details:not([open]) { padding-bottom: 0; }
.card-studio .studio-organized summary { display: flex; align-items: center; gap: 8px; padding: 14px 0; font-size: 14px; font-weight: 650; text-transform: none; letter-spacing: 0; line-height: 1.4; cursor: pointer; }
.card-studio .studio-organized details[open] > summary { margin-bottom: 14px; border-bottom: 1px solid #dce5ee; background: transparent; color: #164e60; }
.card-studio .studio-organized summary::after { content: '›'; margin-left: auto; flex: none; font-size: 20px; color: #42647a; transform: rotate(90deg); }
.card-studio .studio-organized details[open] > summary::after { transform: rotate(270deg); color: #11677c; }
.card-studio .studio-organized .field-label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.45; color: #344c63; }
.card-studio .studio-organized :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { min-width: 0; max-width: 100%; min-height: 40px; font-family: Inter, system-ui, sans-serif; font-size: 14px; background: #fff; color: #172b43; border-color: #bacbd9; }
.card-studio .studio-organized textarea { line-height: 1.55; resize: vertical; }
.card-studio .studio-organized .hint { font-size: 12px; line-height: 1.55; color: #52677c; }
.card-studio .studio-organized :is(.dest-btn, .formato-btn, .mode-switch-label) { font-family: inherit; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12px; line-height: 1.4; }
.card-studio .studio-organized :is(.dest-btn.active, .formato-btn.active, .mode-switch-label.active-mode) { background: #e6f3f6 !important; color: #0c5265 !important; border-color: #35869a; box-shadow: none; }
.card-studio .studio-check-title { display: block; font-size: 13px; margin-bottom: 6px; }
.card-studio .alert-text-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 12px; }
.card-studio .alert-text-tools label { min-width: 0; font-size: 12px; font-weight: 600; color: #344c63; }
.card-studio .alert-text-tools select { display: block; width: 100%; margin-top: 4px; padding: 7px; }
.card-studio .alert-text-warning { padding: 8px 10px; border-radius: 8px; background: #fff6e6; color: #794400; font-size: 12px; line-height: 1.5; margin: 4px 0 12px; }
.card-studio .alert-text-warning[hidden] { display: none; }
.card-studio .studio-check label { border-top: 1px solid #dfcba7; padding-top: 10px; }
.card-studio .studio-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: #11677c; vertical-align: middle; }
.card-studio .studio-footer { display: flex; flex-direction: column; flex: none; gap: 8px; padding: 12px 18px; border-top: 1px solid #d9e2eb; background: #fff; box-shadow: 0 -4px 16px #18334e08; }
.card-studio .studio-footer #btn-download { width: 100%; min-height: 44px; margin: 0; padding: 10px 12px; font-size: 13px; }
.card-studio .studio-review-link { border: 0; background: none; color: #285b78; font-size: 11px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.card-studio .studio-footer :is(#status-banner, #status) { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font-size: 11px; line-height: 1.4; max-height: 46px; overflow-y: auto; }
.card-studio .studio-footer #status:empty { display: none; }
.card-studio .studio-checklist { padding-left: 20px; margin: 0; font-size: 12px; line-height: 1.6; color: #40566c; list-style: disc; }
.card-studio .studio-publish { border: 1px solid #d9e2eb; padding: 14px; border-radius: 10px; background: #fff; }
.card-studio .studio-publish h2 { font-size: 13px; font-weight: 750; margin: 0 0 10px; }
.card-studio .studio-publish > div { margin-top: 0; }
.card-studio .studio-draft :is(#btn-reset, #btn-reset-form) { width: 100%; margin-top: 10px; color: #913c37; border-color: #e6c9c5; background: #fff; }
@media (max-width: 760px) {
  body.card-studio, .card-studio .layout-container { flex-direction: column; }
  .card-studio .sidebar, .card-studio .panel { width: 100%; min-width: 0; max-width: none; height: 45vh; max-height: 45vh; padding: 14px; border-right: 0; border-bottom: 1px solid #d9e2eb; overflow-y: auto; }
  .card-studio .preview-area, .card-studio .stage { height: 55vh; min-height: 0; flex: 1; }
  .card-studio .studio-header h1 { font-size: 19px; }
  .card-studio :is(.sidebar, .panel).studio-organized { width: 100%; min-width: 0; max-width: none; height: 56vh; max-height: 56vh; }
  .card-studio .studio-organized > .studio-header { padding: 10px 14px 8px; }
  .card-studio .studio-header > span, .card-studio .studio-header > p { display: none; }
  .card-studio .studio-header h1 { margin: 0; font-size: 17px; }
  .card-studio .studio-nav { margin-top: 8px; }
  .card-studio .studio-form { padding: 12px 14px; }
  .card-studio .studio-footer { padding: 8px 14px; gap: 5px; }
  .card-studio .preview-area, .card-studio .stage { height: 44vh; }
}
@media (prefers-reduced-motion: reduce) {
  .card-studio *, .card-studio *::before, .card-studio *::after { transition: none !important; scroll-behavior: auto !important; }
}