:root {
  --green: #006b35;
  --green-bright: #0b8b4b;
  --green-deep: #003d20;
  --ink: #101713;
  --muted: #5f6b63;
  --line: #dce3de;
  --paper: #ffffff;
  --surface: #f4f6f4;
  --focus: #7ac99c;
  --nav-height: 0px;
  font-family: Inter, Aptos, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: #0a1810;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; }
html.has-modal, html.has-modal body { overflow: hidden; }
body { margin: 0; background: #0a1810; }
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

/* Estrutura: editor à esquerda, prévia à direita, ambos com rolagem própria. */
.workspace {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(400px, 452px) minmax(0, 1fr);
  overflow: hidden;
}

.editor {
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 24px 24px 32px;
  background: #f5f7f5;
  scrollbar-color: #a9b5ad transparent;
  scrollbar-gutter: stable;
}

.editor-header {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 12px 14px;
  padding: 0 2px 20px;
}

.editor-mark { display: block; width: 50px; height: 50px; object-fit: contain; }

.eyebrow {
  display: block;
  color: var(--green);
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
.editor h1 { margin: 4px 0 0; font-size: 1.5rem; line-height: 1.12; letter-spacing: -.04em; }
.editor-intro { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.simulator-trigger {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--ink);
  box-shadow: 0 8px 18px rgba(16,23,19,.18);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 850;
  transition: background .15s, transform .15s;
}
.simulator-trigger svg { width: 20px; height: 20px; fill: none; stroke: #7fdba6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.simulator-trigger:hover { background: #1d2a22; transform: translateY(-1px); }
.simulator-trigger:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.editor-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.draft-status { display: inline-flex; align-items: center; gap: 8px; color: #59665e; font-size: .78rem; }
.draft-status i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #1fa45c; box-shadow: 0 0 0 3px rgba(31,164,92,.12); }
.draft-status b { font-weight: 650; }
.reset-button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; color: var(--green); background: transparent; cursor: pointer; font-size: .8rem; font-weight: 800; }
.reset-button:hover { border-color: #c7d9cd; background: #fff; }
.reset-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.reset-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.editor-meta-actions { display: flex; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.library-button { border-color: #c7d9cd; background: #fff; }
.library-button:hover { border-color: var(--green); background: #eef6f1; }

/* Faixa de edição: aparece quando um anúncio foi aberto em Meus anúncios para editar. */
.edit-banner { position: sticky; z-index: 12; top: 8px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 10px 10px 12px; border: 1px solid #9fc8e8; border-radius: 12px; background: #eef6fd; box-shadow: 0 8px 20px rgba(16,23,19,.1); }
.edit-banner-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: #2f6fa3; }
.edit-banner-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.edit-banner-text { display: grid; gap: 2px; min-width: 0; }
.edit-banner-text b { color: #173a57; font-size: .86rem; line-height: 1.25; overflow-wrap: anywhere; }
.edit-banner-text small { color: #3f5a70; font-size: .76rem; line-height: 1.35; }
.edit-banner-button { min-height: 36px; padding: 0 12px; border: 1px solid #2f6fa3; border-radius: 8px; color: #fff; background: #2f6fa3; cursor: pointer; font-size: .78rem; font-weight: 850; white-space: nowrap; }
.edit-banner-button:hover { background: #245a86; }
.edit-banner-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.edit-banner.is-warning { border-color: #e9c46a; background: #fff8e7; }
.edit-banner.is-warning .edit-banner-icon { background: #b7791f; }
.edit-banner.is-warning .edit-banner-text b { color: #6d4c0f; }
.edit-banner.is-warning .edit-banner-text small { color: #6d4c0f; }
.edit-banner.is-warning .edit-banner-button { border-color: #b7791f; background: #b7791f; }
@media (max-width: 540px) {
  /* No celular a faixa fica só no topo do editor; o modo também aparece na prévia, onde se salva. */
  .edit-banner { position: relative; top: auto; grid-template-columns: 30px minmax(0, 1fr); box-shadow: none; }
  .edit-banner-icon { width: 30px; height: 30px; }
  .edit-banner-button { grid-column: 1 / -1; }
}

/* Formulário */
#freight-form { display: grid; gap: 14px; }
.form-column { display: grid; align-content: start; gap: 14px; min-width: 0; }

.form-card {
  min-width: 0;
  margin: 0;
  padding: 16px 16px 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 5px 18px rgba(15, 40, 24, .035);
}

.form-card legend {
  margin-left: -3px;
  padding: 0 7px 0 0;
  color: #27332b;
  background: var(--paper);
  font-size: .84rem;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.form-card legend span { margin-right: 5px; color: var(--green); }

.format-card { padding-bottom: 14px; }
.format-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.format-option, .layout-option { display: grid; gap: 3px; min-width: 0; min-height: 58px; padding: 9px 12px; border: 1px solid #cddbd0; border-radius: 10px; color: #33473a; background: #f9fbf9; cursor: pointer; text-align: left; transition: border-color .15s, background .15s, box-shadow .15s; }
.format-option b, .layout-option b { font-size: .88rem; font-weight: 850; }
.format-option small, .layout-option small { color: #5d6d62; font-size: .75rem; font-weight: 650; line-height: 1.3; }
.format-option:hover, .layout-option:hover { border-color: var(--green); }
.format-option.is-active, .layout-option.is-active { border-color: var(--green); color: var(--green-deep); background: #eaf5ed; box-shadow: inset 0 0 0 1px var(--green); }
.format-option:focus-visible, .layout-option:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Três layouts lado a lado, cada um com uma amostra das cores da base e do valor. */
.layout-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.layout-option { align-content: start; padding: 8px 10px 9px; }
.layout-swatch { display: block; height: 12px; margin-bottom: 4px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(16,23,19,.18); }
[data-layout="classic"] .layout-swatch { background: linear-gradient(90deg, #ffffff 0 62%, #078347 62% 100%); }
[data-layout="inverse"] .layout-swatch { background: linear-gradient(90deg, #006b35 0 62%, #ffffff 62% 100%); }
[data-layout="premium"] .layout-swatch { background: linear-gradient(90deg, #101713 0 62%, #0b8b4b 62% 100%); }
.layout-choice { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.layout-choice-title { display: block; margin-bottom: 9px; color: #4c5a51; font-size: .75rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }

label {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
  color: #3a463e;
  font-size: .82rem;
  font-weight: 720;
}

input, textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #cdd7d0;
  border-radius: 9px;
  outline: none;
  color: #152019;
  background: #fbfcfb;
  font-size: 1rem;
  font-weight: 600;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

textarea { display: block; min-height: 68px; line-height: 1.4; resize: vertical; }
input::placeholder, textarea::placeholder { color: #8a968e; font-weight: 500; }
input:hover, textarea:hover { border-color: #a7b7ac; background: #fff; }
input:focus, textarea:focus { border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px rgba(0,107,53,.14); }

.two-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.route-edit-side { min-width: 0; }
.route-extra-fields { display: grid; gap: 8px; }
.route-extra-fields:not(:empty) { margin: -4px 0 8px; }
.route-extra-field { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: end; gap: 6px; }
.route-extra-field .route-place { min-width: 0; margin-bottom: 0; }
.route-extra-field input { min-width: 0; }
/* Campo de cidade: rótulo (com a alça de ordem ao lado) e campo, como os demais rótulos do formulário. */
.route-place { display: grid; gap: 7px; min-width: 0; margin-bottom: 14px; }
label.route-place-name { display: inline; margin: 0; color: #3a463e; font-size: .82rem; font-weight: 720; }
.route-extra-remove { display: grid; place-items: center; width: 40px; height: 44px; border: 1px solid #d6e1d9; border-radius: 9px; color: #6c7b70; background: #f8faf8; cursor: pointer; font-size: 20px; }
.route-extra-remove:hover { border-color: #b14646; color: #a83232; background: #fff5f5; }
.add-route-point { display: inline-flex; align-items: center; min-height: 36px; margin: 0 0 14px; padding: 0 12px; border: 1px dashed #9cc4ab; border-radius: 8px; color: var(--green); background: #f4faf6; cursor: pointer; font-size: .8rem; font-weight: 850; text-align: left; }
.add-route-point:hover { border-style: solid; background: #eaf5ed; }
.add-route-point:focus-visible, .route-extra-remove:focus-visible, .price-option:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Sugestões de cidades enquanto digita (origens e destinos). */
.city-field { position: relative; min-width: 0; }
.city-suggestions { position: absolute; z-index: 15; top: calc(100% + 4px); left: 0; min-width: max(100%, 230px); max-width: calc(100vw - 32px); max-height: 270px; overflow-y: auto; padding: 4px; border: 1px solid #cddbd1; border-radius: 10px; background: #fff; box-shadow: 0 16px 30px rgba(18,57,32,.18); }
.city-suggestions button { display: grid; gap: 1px; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; color: #14231a; background: transparent; cursor: pointer; text-align: left; }
.city-suggestions button b { font-size: .9rem; font-weight: 800; }
.city-suggestions button small { color: #66756b; font-size: .74rem; font-weight: 600; }
.city-suggestions button:hover, .city-suggestions button[aria-selected="true"] { background: #eaf5ed; }
.city-suggestions .city-info { padding: 9px 10px; color: #5f6d64; font-size: .8rem; line-height: 1.35; }
.route-edit-side + .route-edit-side .city-suggestions { right: 0; left: auto; }
/* Alça para mudar a ordem das cidades: aparece quando o lado tem mais de uma. */
.route-place-head { display: flex; align-items: center; gap: 4px; min-height: 22px; }
.route-grip { display: none; place-items: center; width: 24px; height: 24px; margin-left: -4px; padding: 0; border: 0; border-radius: 6px; color: #6f7e74; background: transparent; cursor: grab; font-size: 1rem; line-height: 1; touch-action: none; user-select: none; }
.route-edit-side.has-multiple .route-grip { display: grid; }
.route-grip:hover { color: var(--green); background: #eef6f1; }
.route-grip:focus-visible { color: var(--green); background: #eef6f1; outline: 2px solid var(--focus); outline-offset: 1px; }
.route-grip:active { cursor: grabbing; }
/* Arraste: a cidade segurada "levanta" e segue o cursor; as outras deslizam para abrir espaço. */
.route-shifting { transition: transform .16s ease; }
.route-dragging { position: relative; z-index: 6; border-radius: 10px; background: #fff; box-shadow: 0 14px 30px rgba(15,40,24,.22), 0 0 0 2px rgba(0,107,53,.4); cursor: grabbing; }
.route-dragging .route-grip { color: var(--green); background: #eaf5ed; }
.route-moved { animation: route-flash .65s ease; border-radius: 10px; }
@keyframes route-flash { 0% { background: #d6efdf; box-shadow: 0 0 0 4px #d6efdf; } 100% { background: transparent; box-shadow: 0 0 0 4px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .route-shifting, .route-dragging { transition: none !important; }
  .route-moved { animation: none; }
}
.route-limit-note { margin: -2px 0 14px; padding: 9px 11px; border-radius: 8px; color: #4f5d54; background: #f3f7f4; font-size: .78rem; line-height: 1.45; }
.price-field { min-width: 0; margin-bottom: 14px; }
.price-field-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 30px; margin-bottom: 5px; }
.price-field-heading label { display: block; margin: 0; }
.price-option { flex: 0 0 auto; min-height: 30px; padding: 0 11px; border: 1px solid #b8d3c2; border-radius: 999px; color: var(--green); background: #f2f8f4; cursor: pointer; font-size: .74rem; font-weight: 850; }
.price-option:hover, .price-option[aria-pressed="true"] { border-color: var(--green); color: #fff; background: var(--green); }
.price-field input[readonly] { color: var(--green-deep); background: #eaf5ed; }

/* Opções prontas: lista que abre ao clicar no campo, com várias marcadas; o campo continua livre. */
.picker { position: relative; }
.picker input, .picker input:hover, .picker input:focus { padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006b35' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.picker.is-open input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006b35' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E"); }
.picker-list { position: absolute; z-index: 16; left: 0; right: 0; max-height: min(320px, 52vh); scroll-margin-bottom: calc(var(--nav-height, 0px) + 12px); overflow-y: auto; overscroll-behavior: contain; padding: 4px; border: 1px solid #cddbd1; border-radius: 10px; background: #fff; box-shadow: 0 16px 30px rgba(18,57,32,.18); }
.picker-option { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: 7px; color: #14231a; cursor: pointer; font-size: .92rem; font-weight: 700; user-select: none; }
.picker-option:hover, .picker-option.is-active { background: #eaf5ed; }
.picker-option[aria-selected="true"] { color: var(--green-deep); }
.picker-check { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #9fb3a6; border-radius: 5px; background: #fff; transition: background .12s, border-color .12s; }
.picker-option[aria-selected="true"] .picker-check { border-color: var(--green); background: var(--green); }
.picker-option[aria-selected="true"] .picker-check::before { content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.picker-option[hidden], .picker-empty[hidden] { display: none; }
/* Escolha única (data de carregamento): bolinha em vez de caixa de marcar. */
.picker[data-mode="single"] .picker-check { border-radius: 50%; }
.picker[data-mode="single"] .picker-option[aria-selected="true"] .picker-check { background: #fff; }
.picker[data-mode="single"] .picker-option[aria-selected="true"] .picker-check::before { width: 10px; height: 10px; margin: 0; border: 0; border-radius: 50%; background: var(--green); transform: none; }
.picker-group { margin: 6px 6px 2px; padding-top: 8px; border-top: 1px solid #e1eae4; color: #6a786f; font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.picker-empty { margin: 0; padding: 9px 10px; color: #5f6d64; font-size: .8rem; line-height: 1.35; }
.picker-done { position: sticky; bottom: -4px; display: block; width: calc(100% + 8px); min-height: 40px; margin: 4px -4px -4px; border: 0; border-top: 1px solid #e1eae4; border-radius: 0 0 10px 10px; color: var(--green); background: #f6faf7; cursor: pointer; font-size: .86rem; font-weight: 850; }
.picker-done:hover { background: #eaf5ed; }

/* Selo de piso ANTT: só no editor, nunca na arte. */
.floor-check { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: -2px 0 14px; padding: 10px 10px 10px 12px; border: 1px solid #d5e3d9; border-radius: 11px; background: #f6faf7; }
.floor-check-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: #8aa394; font-size: .95rem; font-weight: 900; }
.floor-check-icon::before { content: "i"; }
.floor-check-text { display: grid; gap: 2px; min-width: 0; }
.floor-check-text b { color: #1f3428; font-size: .86rem; line-height: 1.25; }
.floor-check-text small { color: #5c6a61; font-size: .76rem; line-height: 1.35; }
.floor-check-actions { display: flex; align-items: center; gap: 4px; }
.floor-check-button { min-height: 34px; padding: 0 12px; border: 1px solid #b8d3c2; border-radius: 8px; color: var(--green); background: #fff; cursor: pointer; font-size: .78rem; font-weight: 850; }
.floor-check-button:hover { border-color: var(--green); background: #eaf5ed; }
.floor-check-clear { display: grid; place-items: center; width: 30px; height: 34px; padding: 0; border: 0; border-radius: 8px; color: #6f7e74; background: transparent; cursor: pointer; font-size: 1.2rem; }
.floor-check-clear:hover { color: #a83232; background: #fff1f1; }
.floor-check-button:focus-visible, .floor-check-clear:focus-visible, .floor-check-map:focus-visible, .floor-check-table summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.floor-check-button:disabled { border-color: #d5e3d9; color: #6f7e74; background: #f6faf7; cursor: progress; }
.floor-check[data-state="info"] .floor-check-icon { background: var(--green); }
.floor-check[data-state="ok"] { border-color: #9fd2b2; background: #edf8f1; }
.floor-check[data-state="ok"] .floor-check-icon { background: var(--green); }
.floor-check[data-state="ok"] .floor-check-icon::before { content: "✓"; }
.floor-check[data-state="ok"] .floor-check-text b { color: var(--green-deep); }
.floor-check[data-state="below"] { border-color: #e7a4a4; background: #fff3f3; }
.floor-check[data-state="below"] .floor-check-icon { background: #c0392b; }
.floor-check[data-state="below"] .floor-check-icon::before { content: "!"; }
.floor-check[data-state="below"] .floor-check-text b { color: #9b2420; }
.floor-check[data-state="stale"], .floor-check[data-state="error"] { border-color: #e9c46a; background: #fff8e7; }
.floor-check[data-state="stale"] .floor-check-icon, .floor-check[data-state="error"] .floor-check-icon { background: #b7791f; }
.floor-check[data-state="stale"] .floor-check-icon::before { content: "↻"; }
.floor-check[data-state="error"] .floor-check-icon::before { content: "!"; }
.floor-check[data-state="loading"] .floor-check-icon { background: transparent; border: 3px solid #cfe3d6; border-top-color: var(--green); animation: floor-spin .8s linear infinite; }
.floor-check[data-state="loading"] .floor-check-icon::before { content: ""; }
@keyframes floor-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .floor-check[data-state="loading"] .floor-check-icon { animation-duration: 2.4s; } }
/* Cálculo dentro do selo: eixos e categoria da tabela, rota encontrada e pisos. */
.floor-check-panel { display: grid; gap: 8px; grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid rgba(31,52,40,.12); }
.floor-check-fields { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 8px; }
.floor-check-fields label { gap: 4px; margin: 0; color: #4c5a51; font-size: .74rem; }
.floor-check-fields select { width: 100%; min-width: 0; min-height: 40px; padding: 6px 8px; border: 1px solid #cdd7d0; border-radius: 8px; outline: none; color: #152019; background: #fff; font-size: .9rem; font-weight: 650; cursor: pointer; }
.floor-check-fields select:hover { border-color: #a7b7ac; }
.floor-check-fields select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,107,53,.14); }
.floor-check-fields select.is-missing { border-color: #d39a2c; box-shadow: 0 0 0 3px rgba(211,154,44,.18); }
.floor-check-route, .floor-check-note { margin: 0; color: #43524a; font-size: .76rem; line-height: 1.45; overflow-wrap: anywhere; }
.floor-check-route b { color: #1f3428; font-weight: 800; }
.floor-check-note { padding: 6px 8px; border-radius: 7px; color: #6d4c0f; background: #fff3d6; }
.floor-check-more { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 12px; }
.floor-check-table { flex: 1 1 220px; min-width: 0; }
.floor-check-table summary { width: fit-content; padding: 4px 0; border-radius: 6px; color: var(--green); cursor: pointer; font-size: .76rem; font-weight: 800; }
.floor-check-table ul { display: grid; gap: 1px; margin: 4px 0 0; padding: 0; list-style: none; }
.floor-check-table li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 8px; border-radius: 6px; color: #33443a; font-size: .76rem; }
.floor-check-table li:nth-child(odd) { background: rgba(255,255,255,.7); }
.floor-check-table li span:last-child { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 750; }
.floor-check-table li.is-current { color: #fff; background: var(--green); }
.floor-check-table li.is-unavailable span:last-child { color: #8a968e; font-weight: 600; }
.floor-check-source { margin: 6px 0 0; color: #6a786f; font-size: .7rem; line-height: 1.4; }
.floor-check-map { flex: 0 0 auto; min-height: 30px; padding: 0 10px; border: 1px solid #b8d3c2; border-radius: 8px; color: var(--green); background: #fff; cursor: pointer; font-size: .76rem; font-weight: 850; }
.floor-check-map:hover { border-color: var(--green); background: #eaf5ed; }
.upload-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }

.upload-control {
  position: relative;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 66px;
  margin: 0;
  padding: 10px;
  overflow: hidden;
  border: 1px dashed #9fafaa;
  border-radius: 10px;
  cursor: pointer;
  background: #f8faf8;
}

.upload-control:hover { border-color: var(--green); background: #f0f7f3; }
.upload-control:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.upload-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: #fff; background: var(--green); }
.upload-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.upload-control b, .upload-control small { display: block; }
.upload-control b { color: var(--ink); font-size: .84rem; line-height: 1.15; }
.upload-control small { margin-top: 3px; color: var(--muted); font-size: .74rem; font-weight: 600; }
.upload-control input { position: absolute; inset: 0; min-height: 0; opacity: 0; cursor: pointer; }

/* Imagens: só a troca fica no formulário; posição e tamanho se ajustam na própria prévia. */
.media-choice .upload-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.media-choice .upload-control { min-height: 58px; padding: 8px 10px; }
.media-hint { margin: 9px 0 0; color: #5c6a61; font-size: .76rem; line-height: 1.45; }
/* Galeria: fotos prontas e já usadas; a escolhida fica com borda verde e ✓. */
.photo-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.photo-gallery:empty { display: none; }
.photo-option { position: relative; width: 64px; height: 44px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: #e6ece8; cursor: pointer; box-shadow: 0 0 0 1px #cdd7d0; }
.photo-option img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-option:hover { box-shadow: 0 0 0 1px var(--green); }
.photo-option:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.photo-option[aria-pressed="true"] { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.photo-option[aria-pressed="true"]::after { content: "✓"; position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; background: var(--green); font-size: .62rem; font-weight: 900; }
.media-reset { margin: 0; padding: 0; border: 0; border-radius: 4px; color: var(--green); background: none; cursor: pointer; font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.media-reset:hover { color: var(--green-deep); }
.media-reset:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Prévia */
.preview-area {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) 34px;
  grid-template-areas: "head actions" "stage stage" "note note";
  align-items: center;
  gap: 14px 16px;
  padding: 18px clamp(18px, 2.4vw, 40px) 12px;
  overflow: hidden;
  container-type: inline-size;
  background:
    radial-gradient(circle at 77% 18%, rgba(21,117,67,.22), transparent 25%),
    linear-gradient(145deg, #0d2015 0%, #07110b 68%, #0b1a11 100%);
}

.preview-toolbar { grid-area: head; min-width: 0; }
.preview-toolbar .eyebrow { margin: 0; color: #77c899; font-size: .78rem; }
/* Formato atual na linha de baixo; some enquanto um aviso ocupa o mesmo lugar. */
.format-note { grid-area: note; justify-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #b3c4b9; font-size: .82rem; font-weight: 650; white-space: nowrap; transition: opacity .18s; }
.format-note i { width: 7px; height: 7px; border-radius: 50%; background: #42c477; box-shadow: 0 0 0 4px rgba(66,196,119,.11); }
.preview-area.has-feedback .format-note { opacity: 0; }

.poster-stage { grid-area: stage; align-self: stretch; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.poster {
  display: block;
  max-width: 100%;
  border-radius: 4px;
  background: #edf2ee;
  box-shadow: 0 30px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.08);
  /* Os gestos sobre a arte (arrastar, pinça) ajustam a logo e a foto em vez de mover a página. */
  touch-action: none;
}
/* Ajuste direto: cursor indica o que dá para arrastar. */
.poster[data-hover="logo"] { cursor: move; }
.poster[data-hover="background"] { cursor: grab; }
.poster.is-dragging { cursor: grabbing; }
.format-hint { color: #8fa597; font-weight: 600; }
@container (max-width: 440px) { .format-hint { display: none; } }
/* Modo de edição ao lado do formato, perto de Salvar e Copiar (inclusive no celular). */
.preview-mode { margin-left: 4px; padding: 3px 9px; border-radius: 999px; color: #dbeeff; background: rgba(47,111,163,.45); box-shadow: inset 0 0 0 1px rgba(159,200,232,.45); font-size: .72rem; font-weight: 800; }
.preview-mode.is-warning { color: #2b1d02; background: #e9c46a; box-shadow: none; }
.format-note:has(.preview-mode:not([hidden])) .format-hint { display: none; }
@container (max-width: 440px) { .format-note:has(.preview-mode:not([hidden])) #format-note-text { display: none; } }

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 15px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 850;
  white-space: nowrap;
  transition: transform .15s, background .15s, box-shadow .15s;
}
.button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:disabled { cursor: progress; opacity: .7; }
.button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.button-primary { color: #fff; background: #0b8b4b; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.button-primary:hover { background: #0a7a42; }
.button-secondary { color: #e9f6ee; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.button-secondary:hover { background: rgba(255,255,255,.16); }

/* Rótulos curtos quando falta espaço ("Legenda", "Imagem", "Salvar"), completos quando sobra. */
.label-prefix, .label-suffix { display: none; }
.label-main { display: inline-block; }
.label-main::first-letter { text-transform: uppercase; }
@container (min-width: 660px) {
  .label-prefix, .label-suffix { display: inline; }
  .label-main::first-letter { text-transform: none; }
}

/* Enviar aparece só em aparelhos de toque que compartilham arquivos; ali, copiar imagem sai de cena. */
.share-action { display: none; }
@media (pointer: coarse) {
  html.can-share-files .share-action { display: inline-flex; }
  html.can-share-files .copy-image-action { display: none; }
}

.save-group { position: relative; display: inline-flex; }
.button-save { color: #fff; background: #0b8b4b; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.button-save:hover { background: #0a7a42; }
.save-group > .button-save:first-child { border-radius: 10px 0 0 10px; }
.save-more { padding: 0 10px; border-left: 1px solid rgba(255,255,255,.28); border-radius: 0 10px 10px 0; }
.save-more[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (pointer: coarse) {
  html.can-share-files .save-group .button-save { color: #e9f6ee; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
}
.save-menu { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; display: grid; min-width: 250px; padding: 6px; border: 1px solid #cfe0d4; border-radius: 12px; background: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.save-menu button { min-height: 42px; padding: 0 12px; border: 0; border-radius: 8px; color: #14231a; background: transparent; cursor: pointer; font-size: .88rem; font-weight: 750; text-align: left; white-space: nowrap; }
.save-menu button:hover, .save-menu button:focus-visible { outline: none; background: #eaf5ed; }

/* Avisos ocupam a linha reservada sob a arte: não cobrem a imagem nem mudam o tamanho dela. */
.workspace { --preview-width: calc(100vw - 452px); }
.action-feedback {
  position: fixed;
  z-index: 30;
  right: 0;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: var(--preview-width);
  height: 34px;
  margin: 0;
  padding: 0 20px;
  color: #d6eadc;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.3;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
}
.action-feedback.is-visible { opacity: 1; }

.view-switch { display: none; }

/* Caixa do simulador */
.simulator-dialog[open] { display: flex; flex-direction: column; width: min(1320px, calc(100vw - 32px)); max-width: none; height: min(880px, calc(100dvh - 32px)); max-height: none; margin: auto; padding: 0; overflow: hidden; border: 1px solid #c9d9ce; border-radius: 16px; background: #fff; box-shadow: 0 25px 80px rgba(0,0,0,.35); }
.simulator-dialog::backdrop { background: rgba(6, 26, 14, .74); }
.simulator-dialog-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 10px 14px 10px 20px; border-bottom: 1px solid var(--line); background: #fff; }
.simulator-dialog-header h2 { margin: 3px 0 0; font-size: 1.15rem; letter-spacing: -.03em; }
.simulator-dialog-close { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 44px; padding: 0 14px 0 10px; border: 1px solid #cfe0d4; border-radius: 10px; color: #1f3d2a; background: #eef5f0; cursor: pointer; font-size: .9rem; }
.simulator-dialog-close span { font-size: 1.6rem; line-height: 1; }
.simulator-dialog-close b { font-weight: 800; }
.simulator-dialog-close:hover { border-color: var(--green); background: #dcecdf; }
.simulator-dialog-close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#simulator-frame { display: block; flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: #fff; }

/* Aviso de editor aberto em outra aba */
.tab-lock[open] { width: min(420px, calc(100vw - 32px)); padding: 22px 22px 20px; border: 1px solid #c9d9ce; border-radius: 16px; background: #fff; box-shadow: 0 25px 80px rgba(0,0,0,.35); }
.tab-lock::backdrop { background: rgba(6, 26, 14, .8); }
.tab-lock h2 { margin: 0 0 8px; color: var(--ink); font-size: 1.1rem; }
.tab-lock p { margin: 0 0 16px; color: #43524a; font-size: .9rem; line-height: 1.5; }
.tab-lock-take { width: 100%; min-height: 46px; border: 0; border-radius: 10px; color: #fff; background: var(--green); cursor: pointer; font-size: .92rem; font-weight: 850; }
.tab-lock-take:hover { background: var(--green-deep); }
.tab-lock-take:disabled { opacity: .7; cursor: progress; }
.tab-lock-take:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Biblioteca de anúncios */
.library-dialog[open] { display: flex; flex-direction: column; width: min(980px, calc(100vw - 32px)); max-width: none; height: min(820px, calc(100dvh - 32px)); max-height: none; margin: auto; padding: 0; overflow: hidden; border: 1px solid #c9d9ce; border-radius: 16px; background: #f5f7f5; box-shadow: 0 25px 80px rgba(0,0,0,.35); }
.library-dialog::backdrop { background: rgba(6, 26, 14, .74); }
.library-toolbar { flex: 0 0 auto; display: flex; gap: 10px; padding: 14px 20px 0; }
.library-toolbar input { flex: 1 1 auto; min-width: 0; }
.library-save { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; color: #fff; background: var(--green); cursor: pointer; font-size: .86rem; font-weight: 850; }
.library-save:hover { background: var(--green-deep); }
.library-save:focus-visible, .library-actions button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.library-note { flex: 0 0 auto; margin: 8px 20px 10px; color: #5c6a61; font-size: .78rem; line-height: 1.4; }
.library-list { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); align-content: start; gap: 12px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; }
.library-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 8px 12px; padding: 10px; border: 1px solid #d5e3d9; border-radius: 12px; background: #fff; }
.library-card[aria-current="true"] { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.library-thumb { grid-row: 1 / 3; display: block; width: 84px; height: auto; max-height: 126px; align-self: start; border-radius: 6px; background: #edf2ee; object-fit: cover; box-shadow: 0 0 0 1px rgba(16,23,19,.08); }
.library-info { display: grid; align-content: start; gap: 3px; min-width: 0; }
.library-info b { color: var(--ink); font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; }
.library-info span { color: #33443a; font-size: .8rem; line-height: 1.3; overflow-wrap: anywhere; }
.library-info small { color: #6a786f; font-size: .72rem; }
.library-badge { justify-self: start; padding: 2px 8px; border-radius: 999px; color: #fff; background: var(--green); font-size: .66rem; font-style: normal; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.library-actions { display: flex; align-items: center; gap: 6px; }
.library-actions button { min-height: 34px; padding: 0 12px; border: 1px solid #b8d3c2; border-radius: 8px; color: var(--green); background: #fff; cursor: pointer; font-size: .78rem; font-weight: 850; }
.library-actions button:hover { border-color: var(--green); background: #eaf5ed; }
.library-actions .library-open { color: #fff; border-color: var(--green); background: var(--green); }
.library-actions .library-open:hover { background: var(--green-deep); }
.library-actions .library-open:disabled { border-color: #d5e3d9; color: #6a786f; background: #f0f4f1; cursor: default; }
.library-actions .library-delete { display: grid; place-items: center; width: 34px; margin-left: auto; padding: 0; border-color: transparent; color: #7a8a80; }
.library-actions .library-delete:hover { border-color: #e7a4a4; color: #a83232; background: #fff1f1; }
.library-delete svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.library-empty { grid-column: 1 / -1; margin: 24px 0; color: #5c6a61; font-size: .88rem; line-height: 1.5; text-align: center; }

/* Telas largas: formulário em duas colunas para reduzir a rolagem. */
@media (min-width: 1240px) {
  .workspace { --preview-width: clamp(500px, 42vw, 920px); grid-template-columns: minmax(0, 1fr) var(--preview-width); }
  .editor { padding: 22px 28px 30px; }
  #freight-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-header { grid-template-columns: 50px minmax(0, 1fr) auto; }
  .simulator-trigger { grid-column: 3; grid-row: 1; }
  .preview-area { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (min-width: 1240px) and (max-height: 820px) {
  .editor { padding-top: 16px; padding-bottom: 18px; }
  .editor-header { padding-bottom: 14px; gap: 9px 14px; }
  .form-column, #freight-form { gap: 10px; }
  .form-card { padding: 12px 14px 2px; }
  .format-card { padding-bottom: 11px; }
  label, .route-place { margin-bottom: 10px; gap: 5px; }
  .route-extra-field .route-place, label.route-place-name { margin-bottom: 0; }
  .price-field { margin-bottom: 10px; }
  .format-option, .layout-option { min-height: 50px; padding: 7px 10px; }
  .layout-choice { margin-top: 10px; padding-top: 9px; }
  .upload-control { min-height: 54px; padding: 7px 8px; }
}

/* Tablet e celular: edição e prévia em abas, com barra fixa no rodapé. */
@media (max-width: 980px) {
  :root { --nav-height: 68px; }
  .workspace { display: block; height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  .editor { height: auto; overflow: visible; padding: 22px max(16px, calc((100vw - 640px) / 2)) calc(var(--nav-height) + 28px); }
  .workspace[data-view="editor"] .preview-area { display: none; }
  .workspace[data-view="preview"] .editor { display: none; }
  .preview-area {
    height: calc(100dvh - var(--nav-height));
    min-height: 420px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) 34px auto;
    grid-template-areas: "head" "stage" "note" "actions";
    gap: 10px;
    padding: 16px 16px 14px;
  }
  .actions { justify-content: center; }
  .actions > .button, .actions > .save-group { flex: 1 1 0; max-width: 300px; }
  .save-group > .button-save:first-child { flex: 1 1 auto; }
  .save-menu { top: auto; bottom: calc(100% + 8px); }
  .action-feedback { left: 0; width: auto; bottom: calc(var(--nav-height) + 70px); padding: 0 16px; font-size: .78rem; }
  .workspace[data-view="editor"] .action-feedback {
    left: 50%;
    right: auto;
    width: max-content;
    max-width: calc(100vw - 32px);
    height: auto;
    min-height: 40px;
    bottom: calc(var(--nav-height) + 10px);
    padding: 9px 14px;
    border-radius: 10px;
    background: rgba(8,22,14,.95);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    transform: translateX(-50%);
  }
  .view-switch {
    position: fixed;
    z-index: 20;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    height: var(--nav-height);
    padding: 9px max(12px, calc((100vw - 640px) / 2)) calc(9px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255,255,255,.08);
    background: #0b1a11;
    box-shadow: 0 -10px 28px rgba(0,0,0,.25);
  }
  .view-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; border: 0; border-radius: 11px; color: #b9cbbf; background: rgba(255,255,255,.06); cursor: pointer; font-size: .92rem; font-weight: 800; }
  .view-switch button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .view-switch button.is-active { color: #fff; background: var(--green); }
  .view-switch button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
}

@media (max-width: 540px) {
  .editor { padding-top: 18px; }
  .editor-header { padding-bottom: 16px; }
  .editor h1 { font-size: 1.35rem; }
  .two-columns { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .media-choice .upload-control { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; padding: 8px; }
  .media-choice .upload-icon { width: 32px; height: 32px; }
  .media-choice .upload-icon svg { width: 19px; height: 19px; }
  .preview-area { padding: 12px 12px 12px; }
  .actions { gap: 8px; }
  .actions .button { padding: 0 10px; font-size: .86rem; }
  .simulator-dialog[open], .library-dialog[open] { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .library-toolbar { flex-wrap: wrap; padding: 12px 14px 0; }
  .library-save { flex: 1 1 100%; }
  .library-note { margin: 8px 14px 10px; }
  .library-list { padding: 4px 14px 16px; }
  .simulator-dialog-header { min-height: 58px; padding: 7px 10px 7px 14px; }
  .simulator-dialog-header h2 { font-size: 1rem; }
  .simulator-dialog-header .eyebrow { font-size: .66rem; }
}