/* Mantém as ferramentas no DOM para os atalhos; apenas dev vê o
       catálogo lateral. Não altera permissões de APIs ou de recursos. */
    body:not(.croqui-nivel-dev) #toolbar #tab-tools,
    body:not(.croqui-nivel-dev) #toolbar #tab-elements,
    body:not(.croqui-nivel-dev) #toolbar .tab-btn[data-tab="tab-tools"],
    body:not(.croqui-nivel-dev) #toolbar .tab-btn[data-tab="tab-elements"]{display:none!important;}
    body:not(.croqui-nivel-dev) #toolbar .tab-btn.tab-prem{grid-column:1/-1;}
    :root{
      --bg:#eef1f6;
      --panel:#ffffff;
      --text:#0f172a;
      --muted:#64748b;
      --line:#e5e7eb;
      --pri:#2563eb;
      --pri2:#1d4ed8;
      --shadow: 0 10px 30px rgba(2,6,23,.08);
      --shadow2: 0 2px 10px rgba(2,6,23,.08);
      --radius: 14px;
    }

    *{ box-sizing:border-box; }

    body{
      font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
      display:flex;
      flex-direction:column;
      margin:0;
      height:100vh;
      overflow:hidden;
      background: radial-gradient(1200px 800px at 20% 0%, #f3f6ff 0%, var(--bg) 60%);
      color:var(--text);
    }
    /* No WebView do Instagram, a regra de largura mobile nem sempre é
       acionada. O rodapé não é necessário dentro do editor. */
    html.instagram-mobile #main-row + div{ display:none !important; }

    /* Linha principal: toolbar + canvas + sidebar */
    #main-row{
      display:flex;
      flex:1;
      min-height:0;
      overflow:hidden;
    }

    #toolbar{
      width:430px;
      min-width:430px;
      background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
      padding:14px;
      display:flex;
      flex-direction:column;
      gap:10px;
      z-index:10;
      box-shadow: var(--shadow2);
      overflow-y:auto;
      overflow-x:hidden;
      /* Limita à altura da linha para a rolagem funcionar
         em vez de a barra empurrar a página */
      max-height:100%;
      border-right:1px solid var(--line);
      box-sizing:border-box;
    }

    #toolbar h3{
      margin:14px 0 8px;
      text-align:left;
      border-top:1px solid var(--line);
      padding-top:12px;
      font-size:13px;
      color:#0b1220;
      letter-spacing:.2px;
    }
    #toolbar h3:first-child{ margin-top:0; border-top:none; padding-top:0;}

    /* ===== BOTÕES DE FERRAMENTA (visual moderno) ===== */
    #toolbar button:not(#btn-login):not(#btn-abrir-cadastro):not(#btn-abrir-recuperar):not(#btn-logout):not(.tab-btn):not(#btn-abrir-stats):not(#btn-fechar-stats):not(#btn-refresh-stats){
      padding:9px 13px;
      cursor:pointer;
      border:1px solid #e2e8f0;
      background:#fff;
      border-radius:10px;
      text-align:left;
      font-size:12.5px;
      font-weight:600;
      color:#334155;
      letter-spacing:.005em;
      box-shadow:0 1px 2px rgba(2,6,23,.04);
      transition:background .12s, border-color .12s, box-shadow .12s, color .12s, transform .08s;
    }
    #toolbar button:not(#btn-login):not(#btn-abrir-cadastro):not(#btn-abrir-recuperar):not(#btn-logout):not(.tab-btn):not(#btn-abrir-stats):not(#btn-fechar-stats):not(#btn-refresh-stats):hover{
      background:#f5f9ff;
      border-color:#bfdbfe;
      color:#1d4ed8;
      box-shadow:0 3px 8px rgba(37,99,235,.12);
      transform:translateY(-1px);
    }
    #toolbar button:not(#btn-login):not(#btn-abrir-cadastro):not(#btn-abrir-recuperar):not(#btn-logout):not(.tab-btn):not(#btn-abrir-stats):not(#btn-fechar-stats):not(#btn-refresh-stats):active{
      transform:translateY(0);
      box-shadow:0 1px 3px rgba(2,6,23,.08);
    }
    #toolbar button:not(#btn-login):not(#btn-abrir-cadastro):not(#btn-abrir-recuperar):not(#btn-logout):not(.tab-btn):not(#btn-abrir-stats):not(#btn-fechar-stats):not(#btn-refresh-stats).active{
      background:linear-gradient(180deg,#2563eb,#1d4ed8);
      color:#fff;
      border-color:#1e40af;
      font-weight:700;
      box-shadow:0 4px 12px rgba(37,99,235,.32);
    }
    #toolbar button:not(#btn-login):not(#btn-abrir-cadastro):not(#btn-abrir-recuperar):not(#btn-logout):not(.tab-btn):not(#btn-abrir-stats):not(#btn-fechar-stats):not(#btn-refresh-stats):disabled{
      background:#f1f5f9; cursor:not-allowed; border-color:#e2e8f0; color:#94a3b8;
      box-shadow:none; transform:none;
    }

    /* Modo de organização (só DEV) */
    body.reorder-mode #toolbar button[id^="tool-"],
    body.reorder-mode #toolbar button[id^="add-"]{
      cursor:grab !important;
      border-style:dashed !important;
      border-color:#93c5fd !important;
      background:#f8fbff !important;
    }
    body.reorder-mode #toolbar button[id^="tool-"]:active,
    body.reorder-mode #toolbar button[id^="add-"]:active{ cursor:grabbing !important; }
    .btn-dragging{ opacity:.4 !important; }
    .btn-drop-target{
      box-shadow:0 0 0 2px #2563eb inset !important;
      border-color:#2563eb !important;
    }

    /* ===== ABAS PREMIUM ===== */
    .tab-btn.tab-prem{ position:relative; }
    .tab-cadeado{
      position:absolute;
      top:6px; right:7px;
      z-index:2;
      width:18px; height:18px;
      border-radius:6px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:#f1f5f9;
      color:#475569;
      font-size:11px;
      line-height:1;
      box-shadow:0 1px 3px rgba(15,23,42,.14);
      pointer-events:none;
    }
    /* Bloqueada: cinza e sem destaque */
    #toolbar .tab-btn.bloqueada,
    .tab-btn.bloqueada{
      background:#f1f5f9 !important;
      color:#94a3b8 !important;
      border-color:#e2e8f0 !important;
      box-shadow:none !important;
      cursor:pointer;
    }
    #toolbar .tab-btn.bloqueada:hover,
    .tab-btn.bloqueada:hover{
      background:#e9eef5 !important;
      color:#64748b !important;
      box-shadow:none !important;
    }
    /* Modelos pode ser visualizado antes da assinatura. No computador,
       usa o mesmo convite azul existente no celular. */
    #toolbar #tab-btn-modelos.bloqueada.tab-espiar,
    #tab-btn-modelos.bloqueada.tab-espiar{
      background:linear-gradient(180deg,#eff6ff,#dbeafe) !important;
      color:#1e40af !important;
      border-color:#93c5fd !important;
      box-shadow:0 2px 7px rgba(37,99,235,.15) !important;
    }
    #toolbar #tab-btn-modelos.bloqueada.tab-espiar:hover,
    #tab-btn-modelos.bloqueada.tab-espiar:hover{
      background:linear-gradient(180deg,#dbeafe,#bfdbfe) !important;
      color:#1d4ed8 !important;
    }
    #tab-btn-modelos.bloqueada.tab-espiar .tb-txt::after{
      content:'  👁';
      font-size:10px;
    }
    #tab-btn-modelos.bloqueada.tab-espiar .tab-cadeado{
      background:#fff;
      color:#1e40af;
    }
    /* Assinante ou DEV: o cadeado some, pois o recurso está liberado. */
    .tab-btn.liberada .tab-cadeado{ display:none; }

    /* ===== MODAL DE ASSINATURA ===== */
    #modal-premium-backdrop{
      display:none;
      position:fixed; inset:0;
      background:rgba(2,6,23,.62);
      backdrop-filter:blur(3px);
      z-index:1400;
      align-items:center; justify-content:center;
      padding:20px;
    }
    #modal-premium-backdrop.open{ display:flex; }
    #modal-premium{
      background:#fff;
      border-radius:20px;
      box-shadow:0 28px 70px rgba(2,6,23,.32);
      width:min(94vw, 460px);
      max-height:90vh;
      overflow-y:auto;
      position:relative;
      animation:premIn .22s ease-out;
    }
    @keyframes premIn{
      from{ opacity:0; transform:translateY(14px) scale(.97); }
      to  { opacity:1; transform:translateY(0) scale(1); }
    }
    .prem-topo{
      background:linear-gradient(135deg,#1e40af,#2563eb 55%,#3b82f6);
      color:#fff;
      padding:26px 24px 22px;
      border-radius:20px 20px 0 0;
      text-align:center;
      position:relative;
    }
    .prem-topo .p-coroa{ width:52px; height:52px; object-fit:contain; display:block; margin:0 auto 10px; filter:drop-shadow(0 3px 8px rgba(0,0,0,.28)); }
    .prem-topo h2{ font-size:20px; font-weight:800; margin:0 0 5px; }
    .prem-topo p{ font-size:12.5px; opacity:.9; margin:0; line-height:1.55; }
    #btn-fechar-premium{
      position:absolute; top:14px; right:16px;
      background:rgba(255,255,255,.2);
      border:none;
      width:28px; height:28px; border-radius:8px;
      font-size:13px; color:#fff; cursor:pointer;
      display:flex; align-items:center; justify-content:center; padding:0;
    }
    #btn-fechar-premium:hover{ background:rgba(255,255,255,.32); }

    .prem-corpo{ padding:20px 24px 22px; }
    .prem-lista{ display:flex; flex-direction:column; gap:13px; margin-bottom:20px; }
    .prem-item{ display:flex; gap:11px; align-items:flex-start; }
    .prem-item .pi-ico{
      font-size:17px; flex-shrink:0;
      width:34px; height:34px;
      background:#eff6ff; border-radius:9px;
      display:flex; align-items:center; justify-content:center;
    }
    .prem-item .pi-txt{ flex:1; }
    .prem-item .pi-nome{ font-size:13px; font-weight:800; color:#0f172a; margin-bottom:2px; }
    .prem-item .pi-desc{ font-size:11.5px; color:#64748b; line-height:1.5; }

    .prem-vigencia{
      display:flex;
      gap:9px;
      align-items:flex-start;
      background:#f8fafc;
      border:1px solid #eef1f8;
      border-radius:11px;
      padding:12px 13px;
      margin-bottom:14px;
      font-size:11.5px;
      color:#64748b;
      line-height:1.55;
    }
    .prem-vigencia .pv-ico{
      font-size:13px;
      color:#94a3b8;
      flex-shrink:0;
      line-height:1.3;
    }
    .prem-vigencia strong{ color:#475569; font-weight:800; }

    .prem-preco{
      text-align:center;
      margin-bottom:14px;
      padding:14px;
      background:linear-gradient(180deg,#fffbeb,#fef3c7);
      border:1px solid #fcd34d;
      border-radius:13px;
    }
    .prem-preco .pp-valor{
      font-size:30px; font-weight:800; color:#92400e; line-height:1.1;
    }
    .prem-preco .pp-valor small{ font-size:15px; font-weight:700; }
    .prem-preco .pp-periodo{
      font-size:11.5px; color:#a16207; font-weight:700; margin-top:4px;
      line-height:1.45;
    }
    .prem-preco .pp-periodo small{
      font-size:10px; font-weight:600; opacity:.85;
    }
    .prem-preco .pp-nome{
      font-size:11px; color:#b45309; font-weight:700;
      text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px;
    }
    /* Já é assinante */
    .prem-preco.ativa{
      background:linear-gradient(180deg,#f0fdf4,#dcfce7);
      border-color:#86efac;
    }
    .prem-preco.ativa .pp-valor{ font-size:17px; color:#166534; }
    .prem-preco.ativa .pp-nome,
    .prem-preco.ativa .pp-periodo{ color:#15803d; }

    #btn-assinar{
      width:100%; padding:14px;
      border:none; border-radius:12px;
      background:linear-gradient(180deg,#f59e0b,#d97706);
      color:#fff; font-size:14.5px; font-weight:800;
      cursor:pointer; font-family:inherit;
      box-shadow:0 6px 18px rgba(217,119,6,.32);
      display:flex; align-items:center; justify-content:center; gap:8px;
    }
    #btn-assinar:hover{ filter:brightness(1.06); }
    #btn-assinar:disabled{
      background:#e2e8f0; color:#94a3b8;
      box-shadow:none; cursor:not-allowed; filter:none;
    }
    /* Visitante sem conta: visual neutro, mas clicável */
    #btn-assinar.precisa-login{
      background:linear-gradient(180deg,#64748b,#475569);
      box-shadow:0 5px 14px rgba(71,85,105,.26);
    }
    #btn-assinar.precisa-login .btn-coroa{ opacity:.85; }
    #btn-assinar .btn-coroa{ width:20px; height:20px; object-fit:contain; }
    .prem-nota{
      font-size:11px; color:#94a3b8; text-align:center;
      margin-top:11px; line-height:1.5;
    }

    /* ===== SELO PREMIUM ===== */
    .prem-wrap{
      position:relative;
      display:inline-flex;
      align-items:center;
      overflow:hidden;
      border-radius:9px;
    }
    .prem-coroa{
      position:absolute;
      top:-10px; right:-8px;
      z-index:5;
      width:21px; height:21px;
      object-fit:contain;
      filter:drop-shadow(0 2px 5px rgba(180,83,9,.38));
      pointer-events:none;
      user-select:none;
    }
    /* Cadeado compacto também na barra superior do celular. */
    .prem-wrap > .prem-cadeado{
      position:absolute;
      top:4px; right:5px;
      z-index:5;
      width:18px; height:18px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:6px;
      background:#fff;
      color:#475569;
      font-size:10px;
      line-height:1;
      box-shadow:0 1px 4px rgba(15,23,42,.16);
      pointer-events:none;
      user-select:none;
    }
    /* Já é assinante: o aviso some, pois o recurso está liberado. */
    .prem-wrap.liberado .prem-coroa,
    .prem-wrap.liberado > .prem-cadeado{ display:none; }

    /* Camada que captura o clique em controles desabilitados */
    .prem-capa{
      position:absolute;
      inset:0;
      cursor:pointer;
      z-index:4;
      border-radius:9px;
    }
    #barra-quadro .bq-label{ cursor:default; }
    body:not(.premium-ok) #barra-quadro .bq-label{ cursor:pointer; }

    /* ===== BARRA ACIMA DO QUADRO ===== */
    /* Grade de três colunas: a do meio absorve a sobra e os
       lados ficam ancorados. Sem flex-wrap, que quebrava a barra
       em duas linhas desalinhadas nas telas menores. */
    #barra-quadro{
      width:960px;
      max-width:100%;
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      gap:8px;
      margin-bottom:9px;
    }
    #barra-quadro .bq-esq,
    #barra-quadro .bq-meio{
      display:flex;
      align-items:center;
      min-height:38px;
    }
    #barra-quadro .bq-esq{ flex-shrink:0; }
    #barra-quadro .bq-dir{ flex-shrink:0; }
    #barra-quadro .bq-esq{
      display:flex; align-items:center; gap:7px;
      min-width:0;
    }
    #barra-quadro .bq-meio{
      display:flex; align-items:center; justify-content:center; gap:8px;
      min-width:0;
    }
    /* A direita: Salvar e Limpar lado a lado */
    #barra-quadro .bq-dir{
      display:flex;
      flex-direction:row;
      align-items:center;
      justify-content:flex-end;
      gap:7px;
      min-width:0;
    }

    #barra-quadro .bq-label{
      font-size:11px; font-weight:800; color:#94a3b8;
      text-transform:uppercase; letter-spacing:.05em;
    }
    #sel-tamanho{
      padding:8px 11px;
      border:1px solid #d6dae3;
      border-radius:10px;
      background:#fff;
      font-size:12px;
      font-weight:700;
      color:#334155;
      cursor:pointer;
      outline:none;
      font-family:inherit;
      transition:border-color .12s, box-shadow .12s;
    }
    #sel-tamanho:hover{ border-color:#bfdbfe; }
    #sel-tamanho:focus{ border-color:#b9d1ff; box-shadow:0 0 0 3px rgba(37,99,235,.10); }
    #sel-tamanho:disabled{
      background:#f1f5f9; color:#94a3b8; cursor:not-allowed; border-color:#e2e8f0;
    }

    /* Botão salvar */
    #btn-salvar-croqui{
      height:38px;
      padding:0 16px;
      border:none;
      border-radius:10px;
      background:linear-gradient(180deg,#16a34a,#15803d);
      color:#fff;
      cursor:pointer;
      display:flex;
      align-items:center;
      gap:7px;
      box-shadow:0 3px 11px rgba(22,163,74,.26);
      transition:transform .12s, box-shadow .12s, filter .12s;
      font-family:inherit;
    }
    #btn-salvar-croqui:hover{
      transform:translateY(-1px);
      box-shadow:0 6px 16px rgba(22,163,74,.36);
      filter:brightness(1.05);
    }
    #btn-salvar-croqui .sv-ico{ font-size:14px; line-height:1; pointer-events:none; }
    #btn-salvar-croqui .sv-txt{
      font-size:12.5px; font-weight:700; white-space:nowrap; pointer-events:none;
    }
    #btn-salvar-croqui .sv-cadeado{ display:none; font-size:11px; pointer-events:none; }

    /* Sem premium: cinza com cadeado */
    #btn-salvar-croqui.bloqueado{
      background:#f1f5f9;
      border:1px solid #e2e8f0;
      color:#94a3b8;
      box-shadow:none;
    }
    #btn-salvar-croqui.bloqueado:hover{
      transform:none; filter:none;
      background:#e9eef5;
      box-shadow:0 2px 6px rgba(2,6,23,.08);
    }
    #btn-salvar-croqui.bloqueado .sv-ico{ filter:grayscale(1); opacity:.6; }
    #btn-salvar-croqui.bloqueado .sv-cadeado{ display:inline; }

    /* Modal de salvamento */
    #modal-salvar-backdrop{
      display:none;
      position:fixed; inset:0;
      background:rgba(2,6,23,.55);
      backdrop-filter:blur(2px);
      z-index:1200;
      align-items:center; justify-content:center;
      padding:20px;
    }
    #modal-salvar-backdrop.open{ display:flex; }
    #modal-salvar{
      background:#fff;
      border-radius:18px;
      box-shadow:0 24px 60px rgba(2,6,23,.28);
      padding:26px 24px 20px;
      width:min(94vw, 420px);
      position:relative;
    }
    #modal-salvar h2{ font-size:18px; font-weight:800; color:#0f172a; margin:0 0 5px; }
    #modal-salvar .sv-sub{ font-size:12.5px; color:#64748b; margin:0 0 16px; }
    #btn-fechar-salvar{
      position:absolute; top:14px; right:16px;
      background:#f8fafc; border:1px solid #e2e8f0;
      width:28px; height:28px; border-radius:8px;
      font-size:13px; color:#64748b; cursor:pointer;
      display:flex; align-items:center; justify-content:center; padding:0;
    }
    #btn-fechar-salvar:hover{ background:#fee2e2; color:#b91c1c; border-color:#fecaca; }

    /* Escolha do destino */
    .sv-destinos{ display:flex; gap:8px; margin-bottom:14px; }
    .sv-dest{
      flex:1;
      padding:12px 10px;
      border:1.5px solid #e2e8f0;
      border-radius:11px;
      background:#fff;
      cursor:pointer;
      text-align:center;
      transition:border-color .12s, background .12s;
    }
    .sv-dest:hover{ border-color:#bfdbfe; background:#f5f9ff; }
    .sv-dest.sel{ border-color:#2563eb; background:#eff6ff; }
    .sv-dest .d-ico{ font-size:19px; display:block; margin-bottom:4px; }
    .sv-dest .d-nome{ font-size:11.5px; font-weight:800; color:#334155; display:block; }
    .sv-dest .d-desc{ font-size:9.5px; color:#94a3b8; display:block; margin-top:2px; line-height:1.35; }
    .sv-dest.sel .d-nome{ color:#1d4ed8; }

    .sv-campo{ display:flex; flex-direction:column; gap:4px; margin-bottom:11px; }
    .sv-campo label{ font-size:11px; font-weight:700; color:#64748b; }
    .sv-campo input{
      padding:10px 12px;
      border:1px solid #d6dae3;
      border-radius:10px;
      font-size:13px; font-family:inherit; outline:none; width:100%;
      box-sizing:border-box;
    }
    .sv-campo input:focus{ border-color:#b9d1ff; box-shadow:0 0 0 3px rgba(37,99,235,.10); }
    #sv-plataforma-modelo{ display:none; margin:2px 0 13px; }
    #sv-plataforma-modelo.on{ display:block; }
    .modelo-plataforma-rotulo{
      display:block; margin-bottom:6px; color:#475569; font-size:11px; font-weight:800;
    }
    .modelo-plataforma-botoes{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
    .modelo-plataforma-botoes button{
      min-height:48px; padding:10px 11px; border:1px solid #dbe3ef; border-radius:13px;
      background:linear-gradient(180deg,#fff,#f8fafc); color:#475569;
      font:800 11.5px/1.2 inherit; cursor:pointer; transition:.16s ease;
      box-shadow:0 3px 9px rgba(15,23,42,.045);
      display:flex; align-items:center; justify-content:center; gap:7px;
    }
    .modelo-plataforma-botoes button:hover{ transform:translateY(-1px); border-color:#93c5fd; }
    .modelo-plataforma-botoes button.ativo{
      border-color:#2563eb; background:#eff6ff; color:#1d4ed8;
      box-shadow:0 0 0 2px rgba(37,99,235,.09),0 6px 15px rgba(37,99,235,.12);
    }
    .modelo-filtro-plataforma{
      display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%;
      grid-column:1 / -1;
      margin:0 0 14px; padding:14px; box-sizing:border-box;
      border:1px solid #e2e8f0; border-radius:16px;
      background:linear-gradient(145deg,#f8fbff,#f8fafc);
    }
    .modelo-filtro-plataforma .modelo-escolha-intro{
      grid-column:1 / -1; text-align:center; padding:2px 4px 5px;
    }
    .modelo-escolha-intro strong{ display:block; color:#172033; font-size:14px; margin-bottom:3px; }
    .modelo-escolha-intro span{ color:#64748b; font-size:11.5px; }
    .modelo-filtro-plataforma button{
      position:relative; min-height:104px; padding:14px 13px; border:1px solid #dbe3ef;
      border-radius:15px; background:#fff; color:#334155; cursor:pointer;
      display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto auto;
      column-gap:11px; text-align:left; transition:.17s ease;
      box-shadow:0 5px 16px rgba(15,23,42,.06);
    }
    .modelo-filtro-plataforma button:hover{
      transform:translateY(-2px); border-color:#93c5fd;
      box-shadow:0 10px 22px rgba(37,99,235,.12);
    }
    .modelo-filtro-plataforma button.ativo{ border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.10),0 10px 22px rgba(37,99,235,.12); }
    .modelo-tipo-icone{
      grid-row:1 / 4; width:44px; height:44px; border-radius:13px;
      display:flex; align-items:center; justify-content:center; font-size:23px;
      background:#eff6ff; color:#1d4ed8;
    }
    [data-modelo-filtro="celular"] .modelo-tipo-icone{ background:#ecfdf5; color:#047857; }
    .modelo-tipo-titulo{ align-self:end; font:850 12.5px/1.2 inherit; color:#172033; }
    .modelo-tipo-desc{ align-self:start; margin-top:3px; font:500 10.5px/1.3 inherit; color:#64748b; }
    .modelo-tipo-total{ align-self:end; margin-top:7px; font:800 9.5px/1 inherit; color:#2563eb; }
    [data-modelo-filtro="celular"] .modelo-tipo-total{ color:#059669; }
    .modelo-lista-topo{
      grid-column:1 / -1; display:flex; align-items:center; gap:10px;
      margin:0 0 12px; padding:9px 11px; border:1px solid #dbe3ef;
      border-radius:12px; background:#f8fafc;
    }
    .modelo-lista-voltar{
      border:1px solid #cbd5e1; border-radius:9px; background:#fff; color:#334155;
      min-height:34px; padding:7px 10px; font:800 11px/1 inherit; cursor:pointer;
    }
    .modelo-lista-voltar:hover{ border-color:#93c5fd; color:#1d4ed8; }
    .modelo-lista-identidade{ flex:1; min-width:0; }
    .modelo-lista-identidade strong{ display:block; color:#172033; font-size:12px; }
    .modelo-lista-identidade span{ display:block; color:#64748b; font-size:10.5px; margin-top:2px; }
    @media(max-width:460px){
      .modelo-filtro-plataforma{ gap:9px; padding:11px; }
      .modelo-filtro-plataforma button{ min-height:98px; padding:11px 9px; grid-template-columns:38px 1fr; column-gap:8px; }
      .modelo-tipo-icone{ width:38px; height:38px; font-size:20px; }
      .modelo-tipo-titulo{ font-size:11.5px; }
      .modelo-tipo-desc{ font-size:9.5px; }
    }
    #sv-msg{ font-size:12px; border-radius:8px; padding:7px 10px; display:none; margin-bottom:10px; }
    #sv-msg.error  { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; display:block; }
    #sv-msg.success{ background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; display:block; }
    #btn-sv-confirmar{
      width:100%; padding:12px;
      border:none; border-radius:11px;
      background:linear-gradient(180deg,#16a34a,#15803d);
      color:#fff; font-size:13.5px; font-weight:700; cursor:pointer;
      box-shadow:0 4px 12px rgba(22,163,74,.26);
      font-family:inherit;
    }
    #btn-sv-confirmar:hover{ filter:brightness(1.05); }
    #btn-sv-confirmar:disabled,#btn-sv-novo:disabled{ opacity:.58; cursor:wait; transform:none; }
    #btn-sv-novo{
      width:100%; padding:10px; margin-top:7px;
      border:1px solid #d6dae3; border-radius:10px;
      background:#fff; color:#475569;
      font-size:12px; font-weight:700; cursor:pointer;
      font-family:inherit;
    }
    #btn-sv-novo:hover{ background:#f8fafc; }

    /* ===== BOTÃO DO INSTAGRAM ===== */
    #btn-instagram{
      position:absolute;
      top:14px; right:186px;
      z-index:30;
      width:42px; height:42px;
      border:1px solid #f0d3e8;
      border-radius:12px;
      background:#fff;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#c13584;
      text-decoration:none;
      box-shadow:0 3px 10px rgba(2,6,23,.10);
      transition:transform .12s, box-shadow .12s, color .12s, background .18s;
    }
    #btn-instagram:hover{
      transform:translateY(-1px);
      color:#fff;
      background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);
      border-color:transparent;
      box-shadow:0 6px 16px rgba(193,53,132,.30);
    }
    #btn-instagram svg{ pointer-events:none; }

    /* ===== BOTÃO DO TUTORIAL ===== */
    #btn-tutorial{
      position:absolute;
      top:14px; right:70px;
      z-index:30;
      height:42px;
      padding:0 14px;
      border:1px solid #fecaca;
      border-radius:12px;
      background:linear-gradient(180deg,#fff,#fff5f5);
      cursor:pointer;
      display:flex;
      align-items:center;
      gap:7px;
      box-shadow:0 3px 10px rgba(2,6,23,.10);
      transition:transform .12s, box-shadow .12s, border-color .12s;
    }
    #btn-tutorial:hover{
      transform:translateY(-1px);
      border-color:#fca5a5;
      box-shadow:0 6px 16px rgba(220,38,38,.18);
    }
    #tut-ico{
      font-size:11px;
      color:#fff;
      background:#dc2626;
      width:22px; height:22px;
      border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      padding-left:2px;
      flex-shrink:0;
      pointer-events:none;
    }
    #tut-txt{
      font-size:12px; font-weight:700; color:#334155;
      pointer-events:none; white-space:nowrap;
    }

    /* Modal do tutorial */
    #modal-tutorial-backdrop{
      display:none;
      position:fixed; inset:0;
      background:rgba(2,6,23,.68);
      backdrop-filter:blur(3px);
      z-index:1500;
      align-items:center; justify-content:center;
      padding:20px;
    }
    #modal-tutorial-backdrop.open{ display:flex; }
    #modal-tutorial{
      background:#fff;
      border-radius:20px;
      box-shadow:0 28px 70px rgba(2,6,23,.32);
      padding:26px 24px 22px;
      width:min(94vw, 700px);
      max-height:90vh;
      overflow-y:auto;
      position:relative;
      animation:tutIn .22s ease-out;
    }
    @keyframes tutIn{
      from{ opacity:0; transform:translateY(14px) scale(.98); }
      to  { opacity:1; transform:translateY(0) scale(1); }
    }
    #modal-tutorial h2{
      font-size:20px; font-weight:800; color:#0f172a; margin:0 0 5px;
    }
    #modal-tutorial .tut-sub{
      font-size:13px; color:#64748b; margin:0 0 16px; line-height:1.55;
    }
    #btn-fechar-tutorial{
      position:absolute; top:16px; right:18px;
      background:#f8fafc; border:1px solid #e2e8f0;
      width:30px; height:30px;
      border-radius:9px; font-size:14px; color:#64748b; cursor:pointer;
      display:flex; align-items:center; justify-content:center; padding:0;
      z-index:2;
    }
    #btn-fechar-tutorial:hover{ background:#fee2e2; color:#b91c1c; border-color:#fecaca; }

    /* Capa do vídeo, proporção 16:9 — abre no YouTube */
    .tut-video{
      position:relative;
      display:block;
      width:100%;
      padding-top:56.25%;
      border-radius:13px;
      overflow:hidden;
      background:#0f172a;
      margin-bottom:16px;
      text-decoration:none;
      cursor:pointer;
    }
    .tut-video img{
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:cover;
      transition:transform .3s, filter .2s;
    }
    .tut-video:hover img{ transform:scale(1.04); filter:brightness(.82); }

    /* Botão de play sobreposto */
    .tut-play{
      position:absolute;
      top:50%; left:50%;
      transform:translate(-50%,-50%);
      width:64px; height:44px;
      background:rgba(220,38,38,.94);
      border-radius:12px;
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 4px 16px rgba(0,0,0,.35);
      transition:transform .2s, background .2s;
    }
    .tut-play::after{
      content:'';
      border-style:solid;
      border-width:9px 0 9px 15px;
      border-color:transparent transparent transparent #fff;
      margin-left:3px;
    }
    .tut-video:hover .tut-play{
      transform:translate(-50%,-50%) scale(1.12);
      background:#dc2626;
    }

    /* Selo no canto */
    .tut-selo{
      position:absolute;
      bottom:10px; right:10px;
      background:rgba(15,23,42,.82);
      color:#fff;
      font-size:11px;
      font-weight:700;
      padding:5px 10px;
      border-radius:7px;
      backdrop-filter:blur(4px);
    }
    .tut-acoes{ display:flex; gap:9px; flex-wrap:wrap; }
    .tut-acoes button, .tut-acoes a{
      flex:1;
      min-width:140px;
      padding:12px;
      border-radius:11px;
      font-size:13px;
      font-weight:700;
      cursor:pointer;
      text-align:center;
      text-decoration:none;
      font-family:inherit;
      border:none;
      display:flex; align-items:center; justify-content:center; gap:7px;
    }
    #link-tut-youtube{
      background:linear-gradient(180deg,#ef4444,#dc2626);
      color:#fff;
      box-shadow:0 5px 14px rgba(220,38,38,.28);
    }
    #link-tut-youtube:hover{ filter:brightness(1.06); }
    #link-forum-tutorial{
      background:linear-gradient(180deg,#1d4e79,#12385e);
      color:#fff;
      box-shadow:0 5px 14px rgba(18,56,94,.24);
    }
    #link-forum-tutorial:hover{ filter:brightness(1.08); }
    #btn-tut-comecar{
      background:#fff;
      color:#475569;
      border:1px solid #e2e8f0 !important;
    }
    #btn-tut-comecar:hover{ background:#f8fafc; }

    /* ===== ENVELOPE DE NOVIDADES ===== */
    #canvas-container{ position:relative; }
    /* Bloqueia o toque nos botões que acabaram de reaparecer,
       para o mesmo gesto que desmarcou o elemento não also clicar
       em algo que apareceu embaixo do dedo. */
    body.acabou-deselecionar #blocos-acesso,
    body.acabou-deselecionar #premium-mobile{
      pointer-events:none;
    }

    /* No computador a barra lateral já tem todas as ferramentas:
       os blocos redondos abaixo do quadro e o aviso de rascunho
       existem para suprir a falta de espaço do celular. No PC eles
       só duplicam o que já está à mão e ocupam espaço à toa.
       Tablet e celular continuam como estão, sem mudança aqui. */
    @media (min-width: 821px){
      #blocos-acesso{ display:none !important; }
      #btn-restaurar-mobile{ display:none !important; }
    }

    /* Enquanto um traçado está em andamento, esta faixa toma o
       lugar exato dos blocos de categoria — o usuário não precisa
       procurar o Aplicar em outro canto da tela. */
    #faixa-aplicar-via{
      display:none;
      width:100%;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:14px;
      border:none;
      border-radius:13px;
      margin-top:10px;
      background:linear-gradient(180deg,#2563eb,#1d4ed8);
      color:#fff;
      font-family:inherit;
      font-size:14px;
      font-weight:800;
      cursor:pointer;
      box-shadow:0 4px 14px rgba(37,99,235,.32);
      animation:pulsaAplicar 1.7s ease-in-out infinite;
    }
    #faixa-aplicar-via .fav-ico{ font-size:17px; line-height:1; }
    #faixa-aplicar-via:active{ transform:scale(.98); animation:none; }

    @media (min-width: 821px){
      #faixa-aplicar-via{ display:none !important; }
    }
    @media (max-width: 820px){
      body.tracando-via #blocos-acesso,
      body.tracando-via #premium-mobile{ display:none !important; }
      body.tracando-via #faixa-aplicar-via{ display:flex; }
    }

    /* Faixa de controles abaixo do quadro */
    body.obj-selecionado #ae-joy,
    body.obj-selecionado #acoes-mobile{ position:absolute; }

    /* Com zoom, o quadro cresce e empurra a faixa de controles
       para fora da área visível. Nesse caso eles passam a ficar
       fixos no rodapé, junto do Desfazer e do Aplicar. */
    @media (max-width: 820px){
      body.zoom-ativo #blocos-acesso{
        position:fixed;
        left:0; right:0;
        bottom:68px;
        width:auto;
        margin:0;
        padding:6px 8px;
        background:rgba(255,255,255,.96);
        backdrop-filter:blur(6px);
        border-top:1px solid #e2e8f0;
        box-shadow:0 -3px 14px rgba(2,6,23,.10);
        z-index:902;
      }
      /* Com seleção, os blocos já saem de cena: o direcional e
         as ações ocupam a mesma faixa, sem somar altura */
      body.zoom-ativo #ae-joy{
        position:fixed !important;
        left:12px !important;
        top:auto !important;
        bottom:68px !important;
        z-index:903;
      }
      body.zoom-ativo #acoes-mobile{
        position:fixed !important;
        left:auto !important;
        right:12px !important;
        top:auto !important;
        bottom:68px !important;
        z-index:903;
      }
      body.zoom-ativo #obj-toolbar{
        bottom:194px !important;
        top:auto !important;
        left:12px !important;
      }
      /* Com o quadro ampliado, a barra de rascunho ficava por
         cima do desenho. Ela volta assim que o zoom é desfeito. */
      body.zoom-ativo #autosave-restore-bar{ display:none !important; }
    }

    /* No celular a barra do objeto sai de cima dele e fica na
       faixa, acima do direcional: sobre o elemento ela cobria
       justamente o que se quer enxergar ao posicionar.
       Fixa, porque o código a posiciona por coordenadas da tela. */
    @media (max-width: 820px){
      #obj-toolbar{
        position:fixed !important;
        transform:none !important;
        animation:none;
      }
      /* Excluir já existe na barra de elementos, ao lado */
      #obj-toolbar #obj-del,
      #obj-toolbar .sep-del{ display:none !important; }
      #obj-toolbar .obj-desktop-image-action,
      #obj-toolbar .obj-desktop-image-sep{ display:none !important; }
    }
    #btn-forum-mobile{ display:none; }
    #btn-forum-desktop{
      position:absolute;
      /* Na mesma linha dos ícones sociais (Notas, Tutorial,
         Instagram), à esquerda deles. Antes ficava mais baixo,
         o que em telas de notebook caía em cima do botão de
         tamanho do quadro e do Limpar quadro. */
      top:14px; right:246px;
      z-index:30;
      min-width:98px; height:32px;
      padding:0 12px;
      display:flex; align-items:center; justify-content:center;
      border:1px solid #bfdbfe;
      border-radius:9px;
      background:#eff6ff;
      color:#12385e;
      text-decoration:none;
      font-size:12px; font-weight:800;
      box-shadow:0 3px 9px rgba(18,56,94,.12);
    }
    #btn-forum-desktop:hover{ background:#dbeafe; }
    #btn-notas{
      position:absolute;
      top:14px; right:18px;
      z-index:30;
      width:42px; height:42px;
      border:1px solid #e2e8f0;
      border-radius:12px;
      background:#fff;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0;
      box-shadow:0 3px 10px rgba(2,6,23,.10);
      transition:transform .12s, box-shadow .12s, border-color .12s;
    }
    #btn-notas:hover{
      transform:translateY(-1px);
      border-color:#bfdbfe;
      box-shadow:0 6px 16px rgba(37,99,235,.18);
    }
    #notas-ico{ font-size:19px; line-height:1; pointer-events:none; }

    /* Selo vermelho de nota não lida */
    #notas-badge{
      position:absolute;
      top:-4px; right:-4px;
      min-width:17px; height:17px;
      padding:0 4px;
      border-radius:9px;
      background:#ef4444;
      color:#fff;
      font-size:10px;
      font-weight:800;
      line-height:17px;
      text-align:center;
      display:none;
      box-shadow:0 0 0 2px #fff;
      pointer-events:none;
    }
    #btn-notas.tem-nova #notas-badge{ display:block; }

    /* Balanço discreto quando há novidade */
    #btn-notas.tem-nova{
      animation:notasBalanca 2.6s ease-in-out infinite;
      border-color:#fcd34d;
      background:linear-gradient(180deg,#fffbeb,#fff);
    }
    @keyframes notasBalanca{
      0%, 62%, 100% { transform:rotate(0deg); }
      66% { transform:rotate(-11deg); }
      72% { transform:rotate(9deg); }
      78% { transform:rotate(-7deg); }
      84% { transform:rotate(5deg); }
      90% { transform:rotate(-2deg); }
    }

    /* Modal de novidades */
    #modal-notas-backdrop{
      display:none;
      position:fixed; inset:0;
      background:rgba(2,6,23,.55);
      backdrop-filter:blur(2px);
      z-index:1000;
      align-items:center; justify-content:center;
      padding:20px;
    }
    #modal-notas-backdrop.open{ display:flex; }
    #modal-notas{
      background:#fff;
      border-radius:20px;
      box-shadow:0 28px 70px rgba(2,6,23,.30);
      padding:0 24px 22px;
      width:min(94vw, 520px);
      max-height:86vh;
      overflow-y:auto;
      position:relative;
    }
    .notas-header{
      position:sticky; top:0;
      background:#fff;
      padding:24px 0 14px;
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
      border-bottom:1px solid #f1f5f9;
      z-index:2;
    }
    .notas-header h2{ font-size:18px; font-weight:800; color:#0f172a; margin:0; }
    .notas-header p{ font-size:12px; color:#94a3b8; margin:3px 0 0; }
    #btn-fechar-notas{
      background:#f8fafc; border:1px solid #e2e8f0;
      width:30px; height:30px; flex-shrink:0;
      border-radius:9px; font-size:14px; color:#64748b; cursor:pointer;
      display:flex; align-items:center; justify-content:center; padding:0;
    }
    #btn-fechar-notas:hover{ background:#fee2e2; color:#b91c1c; border-color:#fecaca; }

    .nota-item{
      padding:16px 0;
      border-bottom:1px solid #f1f5f9;
    }
    .nota-item:last-child{ border-bottom:none; }
    .nota-topo{
      display:flex; align-items:center; gap:8px; flex-wrap:wrap;
      margin-bottom:7px;
    }
    .nota-versao{
      font-size:10px; font-weight:800;
      background:#eff6ff; color:#1d4ed8;
      padding:2px 8px; border-radius:999px;
      letter-spacing:.03em;
    }
    .nota-nova{
      font-size:10px; font-weight:800;
      background:#fef2f2; color:#b91c1c;
      padding:2px 8px; border-radius:999px;
    }
    .nota-data{ font-size:11px; color:#94a3b8; margin-left:auto; }
    .nota-titulo{ font-size:15px; font-weight:800; color:#0f172a; margin-bottom:5px; }
    .nota-corpo{
      font-size:13px; color:#475569; line-height:1.65;
      white-space:pre-wrap;
    }
    .nota-del{
      margin-top:8px;
      padding:4px 9px;
      font-size:10px; font-weight:700;
      border:1px solid #fecaca; border-radius:7px;
      background:#fff; color:#b91c1c; cursor:pointer;
    }
    .nota-del:hover{ background:#fee2e2; }

    /* Formulário de nova nota (dev) */
    #nota-form{
      display:none;
      border-top:1px solid #e2e8f0;
      margin-top:16px; padding-top:16px;
    }
    #nota-form.on{ display:block; }
    #nota-form input, #nota-form textarea{
      width:100%; box-sizing:border-box;
      padding:9px 12px; margin-bottom:9px;
      border:1px solid #d6dae3; border-radius:9px;
      font-size:13px; font-family:inherit; outline:none;
    }
    #nota-form textarea{ min-height:110px; resize:vertical; }
    #nota-form button{
      width:100%; padding:10px;
      border:none; border-radius:9px;
      background:linear-gradient(180deg,#2563eb,#1d4ed8);
      color:#fff; font-size:13px; font-weight:700; cursor:pointer;
    }
    #btn-nova-nota{
      width:100%; margin-top:14px; padding:9px;
      border:1px dashed #93c5fd; border-radius:10px;
      background:#f8fbff; color:#1d4ed8;
      font-size:12px; font-weight:700; cursor:pointer;
    }
    #btn-nova-nota:hover{ background:#eff6ff; }

    /* ===== BARRA FLUTUANTE DO OBJETO SELECIONADO ===== */
    #obj-toolbar{
      position:absolute;
      display:none;
      align-items:center;
      gap:2px;
      padding:4px;
      background:rgba(255,255,255,.97);
      border:1px solid #dbe3f3;
      border-radius:11px;
      box-shadow:0 6px 20px rgba(2,6,23,.20);
      z-index:20;
      backdrop-filter:blur(6px);
      transform:translate(-50%, -100%);
      pointer-events:auto;
      animation:objBarIn .12s ease-out;
      max-width:270px;
      flex-wrap:wrap;
      justify-content:center;
    }
    #obj-toolbar.on{ display:flex; }
    @keyframes objBarIn{
      from{ opacity:0; transform:translate(-50%,-100%) translateY(4px); }
      to  { opacity:1; transform:translate(-50%,-100%); }
    }
    /* Conector ligando a barra ao objeto */
    #obj-toolbar::after{
      content:'';
      position:absolute;
      bottom:-14px; left:50%;
      transform:translateX(-50%);
      width:2px; height:14px;
      background:linear-gradient(180deg,#dbe3f3,rgba(219,227,243,0));
      border-radius:1px;
    }
    #obj-toolbar.no-arrow::after{ display:none; }
    #obj-toolbar button{
      width:30px; height:30px;
      border:none;
      border-radius:8px;
      background:transparent;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0;
      transition:background .1s;
    }
    #obj-toolbar button:hover{ background:#eff6ff; }
    #obj-toolbar button.danger:hover{ background:#fee2e2; }
    #obj-toolbar button.locked{ background:#fef3c7; }
    #obj-toolbar .obj-ico{ font-size:14px; line-height:1; pointer-events:none; }
    #obj-toolbar .obj-sep{
      width:1px; height:18px;
      background:#e2e8f0;
      margin:0 2px;
    }
    #obj-toolbar .obj-desktop-image-action,
    #obj-toolbar .obj-desktop-image-sep{ display:none; }
    #obj-toolbar .obj-label{ display:none; }
    .obj-toolbar-title{
      display:none;
      width:100%;
      padding:1px 4px 8px;
      border-bottom:1px solid #e2e8f0;
      color:#0f172a;
      font-size:12px;
      font-weight:800;
      text-align:left;
    }
    .obj-toolbar-title span,
    .obj-toolbar-title strong,
    .obj-toolbar-title small{ display:block; }
    .obj-toolbar-title span{
      color:#64748b;
      font-size:10px;
      text-transform:uppercase;
      letter-spacing:.05em;
    }
    .obj-toolbar-title strong{
      margin-top:4px;
      color:#0f172a;
      font-size:13px;
      line-height:1.25;
    }
    .obj-toolbar-title small{
      margin-top:3px;
      color:#64748b;
      font-size:10.5px;
      font-weight:600;
      line-height:1.3;
    }

    /* No computador, as ações ocupam a coluna direita das opções da via.
       Assim nenhuma caixa flutua sobre a imagem ou esconde o croqui. */
    @media (min-width:821px){
      #obj-options-slot #obj-toolbar{
        position:relative;
        left:auto !important;
        top:auto !important;
        transform:none;
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        padding:12px;
        gap:5px;
        border-radius:14px;
        box-shadow:0 8px 26px rgba(15,23,42,.12);
      }
      #obj-options-slot #obj-toolbar.on{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      #obj-options-slot #obj-toolbar::after{ display:none; }
      #obj-options-slot #obj-toolbar .obj-toolbar-title{
        display:block;
        grid-column:1 / -1;
      }
      #obj-options-slot #obj-toolbar button{
        width:100%;
        height:40px;
        min-height:40px;
        padding:0 9px !important;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap:7px;
        border:1px solid #e2e8f0;
        background:#fff;
      }
      #obj-options-slot #obj-toolbar .obj-label{
        display:inline;
        font-size:10.5px;
        font-weight:700;
        color:#334155;
        white-space:nowrap;
      }
      #obj-options-slot #obj-toolbar .obj-sep{
        grid-column:1 / -1;
        width:100%;
        height:1px;
        margin:2px 0;
      }
      #obj-options-slot #op-painel{
        position:relative;
        left:auto !important;
        top:auto !important;
        transform:none;
        width:100%;
        box-sizing:border-box;
        margin-top:-10px;
      }
      #obj-options-slot{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:8px;
      }
      #obj-options-slot #ae-paleta{
        position:relative;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;
        width:100%;
        box-sizing:border-box;
        z-index:auto;
        box-shadow:0 8px 26px rgba(15,23,42,.12);
      }
    }

    /* No celular, as ações do item selecionado ficam em uma área
       estável abaixo do canvas. Assim não cobrem o objeto durante o
       ajuste e não dependem das coordenadas internas do Fabric. */
    @media (max-width:820px){
      #obj-toolbar{
        position:fixed;
        z-index:910;
        transform:none;
      }
      #obj-toolbar::after{ display:none; }
      #op-painel{
        position:fixed;
        z-index:911;
      }
    }

    /* Recursos premium começam ocultos e só aparecem quando
       o servidor confirma que devem ser exibidos. Evita que uma
       falha de rede deixe controles indevidos à mostra. */

    /* ===== INTERRUPTOR DOS RECURSOS PREMIUM ===== */
    .pv-box{
      display:flex;
      align-items:center;
      gap:11px;
      padding:12px;
      border-radius:12px;
      border:1px solid #e2e8f0;
      background:#f8fafc;
      margin-bottom:11px;
      transition:background .15s, border-color .15s;
    }
    .pv-box.ligado{
      background:linear-gradient(180deg,#f0fdf4,#dcfce7);
      border-color:#86efac;
    }
    .pv-info{ flex:1; min-width:0; }
    .pv-titulo{
      font-size:12px; font-weight:800; color:#0f172a; margin-bottom:2px;
    }
    .pv-desc{
      font-size:10.5px; color:#64748b; line-height:1.45;
    }
    .pv-box.ligado .pv-desc{ color:#15803d; }

    #toolbar .pv-switch, .pv-switch{
      width:46px !important;
      height:26px;
      flex-shrink:0;
      border:none !important;
      border-radius:999px;
      background:#cbd5e1 !important;
      cursor:pointer;
      padding:0 !important;
      position:relative;
      transition:background .2s;
      box-shadow:none !important;
      transform:none !important;
    }
    .pv-box.ligado .pv-switch{ background:#16a34a !important; }
    .pv-switch .pv-bola{
      position:absolute;
      top:3px; left:3px;
      width:20px; height:20px;
      background:#fff;
      border-radius:50%;
      box-shadow:0 1px 3px rgba(2,6,23,.28);
      transition:transform .2s;
    }
    .pv-box.ligado .pv-switch .pv-bola{ transform:translateX(20px); }

    .dev-link-btn{
      display:block;
      width:100%;
      padding:10px;
      border:1px solid #d6dae3;
      border-radius:10px;
      background:#fff;
      color:#334155;
      font-size:12.5px;
      font-weight:700;
      text-align:center;
      text-decoration:none;
      transition:background .12s, border-color .12s, color .12s;
    }
    .dev-link-btn:hover{
      background:#f0f5ff;
      border-color:#bfdbfe;
      color:#1d4ed8;
    }

    /* ===== PLANO NA ABA DEV ===== */
    .pl-status{
      display:flex;
      gap:8px;
      margin-bottom:11px;
    }
    .pl-status .pls-card{
      flex:1;
      background:#f8fafc;
      border:1px solid #e7eaf3;
      border-radius:10px;
      padding:9px 10px;
      text-align:center;
    }
    .pl-status .pls-num{ font-size:17px; font-weight:800; color:#0f172a; line-height:1.15; }
    .pl-status .pls-lbl{ font-size:9.5px; color:#94a3b8; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
    .pl-token{
      font-size:10.5px; font-weight:700;
      padding:7px 10px; border-radius:9px;
      margin-bottom:10px; line-height:1.45;
    }
    .pl-token.ok  { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
    .pl-token.erro{ background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
    .pl-check{
      display:flex; align-items:center; gap:7px;
      margin:9px 0 4px;
      font-size:11.5px; font-weight:700; color:#475569; cursor:pointer;
    }
    .pl-check input{ width:15px; height:15px; cursor:pointer; accent-color:#2563eb; }

    /* ===== ÁREA PREMIUM ===== */
    .prem-aviso{
      background:linear-gradient(180deg,#fffbeb,#fef3c7);
      border:1px solid #fcd34d;
      border-radius:11px;
      padding:11px 13px;
      font-size:11.5px;
      color:#78350f;
      line-height:1.5;
      margin-bottom:10px;
    }
    .prem-aviso strong{ display:block; margin-bottom:3px; font-size:12px; }

    #toolbar .prem-btn, .prem-btn{
      width:100%;
      padding:10px !important;
      border:none !important;
      border-radius:10px;
      background:linear-gradient(180deg,#2563eb,#1d4ed8) !important;
      color:#fff !important;
      font-size:12.5px;
      font-weight:700;
      cursor:pointer;
      text-align:center !important;
      transform:none !important;
      box-shadow:0 3px 10px rgba(37,99,235,.25) !important;
      margin-top:4px;
    }
    #toolbar .prem-btn-sec, .prem-btn-sec{
      width:100%;
      padding:9px !important;
      border:1px solid #d6dae3 !important;
      border-radius:10px;
      background:#fff !important;
      color:#475569 !important;
      font-size:11.5px;
      font-weight:700;
      cursor:pointer;
      text-align:center !important;
      transform:none !important;
      box-shadow:none !important;
      margin-top:5px;
    }

    /* ===== TRANSPARÊNCIA DO OBJETO ===== */
    #op-painel{
      position:absolute;
      display:none;
      flex-direction:column;
      gap:8px;
      width:180px;
      padding:12px;
      background:rgba(255,255,255,.98);
      border:1px solid #dbe3f3;
      border-radius:12px;
      box-shadow:0 8px 26px rgba(2,6,23,.22);
      z-index:35;
      backdrop-filter:blur(6px);
      transform:translate(-50%, 0);
    }
    #op-painel.on{ display:flex; }
    #op-painel .op-topo{
      display:flex; align-items:center; justify-content:space-between;
    }
    #op-painel .op-titulo{
      font-size:10.5px; font-weight:800; color:#64748b;
      text-transform:uppercase; letter-spacing:.05em;
    }
    #op-painel .op-valor{
      font-size:12px; font-weight:800; color:#1d4ed8;
      background:#eff6ff; padding:2px 8px; border-radius:999px;
    }
    #op-slider{
      width:100%;
      accent-color:#2563eb;
      cursor:pointer;
    }
    #op-painel .op-atalhos{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:4px;
    }
    #op-painel .op-atalhos button{
      padding:5px 2px;
      border:1px solid #e2e8f0;
      border-radius:7px;
      background:#f8fafc;
      font-size:10px;
      font-weight:700;
      color:#475569;
      cursor:pointer;
      font-family:inherit;
    }
    #op-painel .op-atalhos button:hover{
      background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8;
    }
    /* Botão ativo quando o painel está aberto */
    #obj-toolbar #obj-opacidade.aberto{ background:#eff6ff; }
    /* A barra do objeto é fixa no celular; o painel precisa estar na
       mesma camada para não ficar escondido dentro do canvas. */
    @media (max-width:820px){
      #op-painel{ position:fixed; z-index:911; }
    }

    /* Indicador de carregamento do croqui */
    #cq-loading{
      display:none;
      position:fixed;          /* cobre a tela toda, inclusive a gaveta */
      inset:0;
      background:rgba(248,250,252,.94);
      backdrop-filter:blur(3px);
      z-index:1800;            /* acima da gaveta (880) e do overlay (850) */
      align-items:center;
      justify-content:center;
      border-radius:18px;
    }
    #cq-loading.on{ display:flex; }
    #cq-loading{ align-items:center; justify-content:center; }
    .cql-box{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:12px;
      padding:26px 32px;
      background:#fff;
      border:1px solid #e2e8f0;
      border-radius:16px;
      box-shadow:0 12px 34px rgba(2,6,23,.14);
      min-width:240px;
    }
    .cql-spinner{
      width:34px; height:34px;
      border:3px solid #e2e8f0;
      border-top-color:#2563eb;
      border-radius:50%;
      animation:cqlGira .8s linear infinite;
    }
    @keyframes cqlGira{ to{ transform:rotate(360deg); } }
    .cql-txt{ font-size:13px; font-weight:700; color:#334155; }
    .cql-barra{
      width:100%; height:5px;
      background:#eef2f7;
      border-radius:3px;
      overflow:hidden;
    }
    .cql-progresso{
      width:0%; height:100%;
      background:linear-gradient(90deg,#2563eb,#3b82f6);
      border-radius:3px;
      transition:width .25s ease;
    }

    /* Sequência do Sinistro: em desenvolvimento, visível só
       para o nível dev e só no computador. */
    body:not(.dev-liberado) #btn-seq-abrir{ display:none !important; }
    @media (max-width: 820px){
      #btn-seq-abrir{ display:none !important; }
    }

    /* Recursos do assinante: faixa entre os blocos e o rodapé.
       Só no celular — no computador eles estão na barra lateral. */
    #premium-mobile{
      display:none;
      grid-template-columns:repeat(2, 1fr);
      gap:6px;
      width:100%;
      /* Afastado dos blocos de acesso: são funções diferentes e
         a proximidade fazia parecer um grupo só */
      margin-top:22px;
      order:98;
      position:relative;
    }
    /* Linha discreta separando os dois grupos */
    #premium-mobile::before{
      content:'';
      position:absolute;
      top:-12px; left:12%; right:12%;
      height:1px;
      background:#e2e8f0;
    }
    #premium-mobile .pm-bt{
      position:relative;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:3px;
      padding:7px 4px !important;
      min-height:0 !important;
      border:1px solid #fde68a !important;
      border-radius:11px;
      background:linear-gradient(180deg,#fffbeb,#fef3c7) !important;
      color:#78350f !important;
      font-family:inherit;
      cursor:pointer;
      box-shadow:0 1px 3px rgba(180,83,9,.12) !important;
      transform:none !important;
    }
    #premium-mobile .pm-bt:active{ filter:brightness(.96); }
    /* O relatório ocupa a linha inteira, alinhado com os de cima */
    #premium-mobile .pm-largo{
      grid-column:1 / -1;
      flex-direction:row;
      gap:7px;
      padding:8px !important;
    }
    #premium-mobile .pm-ico{ font-size:17px; line-height:1; }
    #premium-mobile .pm-txt{
      font-size:10px;
      font-weight:750;
      line-height:1.2;
      text-align:center;
    }
    #premium-mobile .pm-largo .pm-txt{ font-size:11.5px; }
    /* Cadeado compacto no lugar da antiga tarja Premium. */
    #premium-mobile .pm-cadeado{
      position:absolute;
      top:5px; right:6px;
      width:18px; height:18px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:6px;
      background:#fff;
      color:#475569;
      font-size:10px;
      line-height:1;
      pointer-events:none;
      box-shadow:0 1px 4px rgba(15,23,42,.16);
    }
    /* Assinante não precisa do cadeado. */
    body.premium-ok #premium-mobile .pm-cadeado{ display:none; }

    /* Sem assinatura: aparência de bloqueado. O clique continua
       ativo para abrir o convite, mas a leitura é clara. */
    #premium-mobile .pm-bt.bloqueado{
      background:#f8fafc !important;
      border-color:#e2e8f0 !important;
      color:#94a3b8 !important;
      box-shadow:none !important;
    }
    #premium-mobile .pm-bt.bloqueado .pm-ico{ filter:grayscale(1); opacity:.55; }
    #premium-mobile .pm-bt.bloqueado .pm-cadeado{ opacity:1; }

    /* Modelos é a exceção: mesmo sem assinatura ele abre a
       vitrine, então fica em azul para convidar ao toque em vez
       de parecer travado como os outros. */
    #premium-mobile .pm-bt.bloqueado.pm-espiar{
      background:linear-gradient(180deg,#eff6ff,#dbeafe) !important;
      border-color:#bfdbfe !important;
      color:#1e40af !important;
      box-shadow:0 1px 3px rgba(37,99,235,.14) !important;
    }
    #premium-mobile .pm-bt.bloqueado.pm-espiar .pm-ico{
      filter:none; opacity:1;
    }
    #premium-mobile .pm-espiar .pm-cadeado{
      color:#1e40af;
    }
    /* Aviso discreto de que dá para ver antes de assinar */
    #premium-mobile .pm-espiar .pm-txt::after{
      content:'  👁';
      font-size:9px;
    }
    body.premium-ok #premium-mobile .pm-espiar .pm-txt::after{ content:''; }

    @media (max-width: 820px){
      #premium-mobile{ display:grid; }
      /* Com zoom ou seleção, a faixa sai junto com os blocos */
      body.zoom-ativo #premium-mobile,
      body.obj-selecionado #premium-mobile{ display:none !important; }
    }

    /* No celular quem avisa é o botão pulsante do rodapé */
    @media (max-width: 820px){
      #autosave-restore-bar{ display:none !important; }
    }

    /* Abaixo dos blocos de acesso, acima do rodapé. Largura
       cheia: ali não disputa espaço com nada. */
    #autosave-restore-bar.no-topo{
      width:100%;
      max-width:100%;
      margin:10px 0 0;
      padding:8px 11px;
      border-radius:11px;
      display:flex;
      align-items:center;
      gap:9px;
      font-size:11.5px;
      min-height:38px;
      order:99;
    }
    /* O ícone do disquete e a descrição longa saem no celular */
    #autosave-restore-bar.no-topo > span:first-child{ display:none; }
    #autosave-restore-bar.no-topo #autosave-restore-info{
      font-size:10.5px;
      line-height:1.3;
      flex:1;
      min-width:0;
      overflow:hidden;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
    }
    #autosave-restore-bar.no-topo button{
      font-size:10.5px;
      padding:5px 10px !important;
      min-height:0 !important;
      flex-shrink:0;
    }
    #autosave-restore-bar.no-topo .ar-selo{ display:none !important; }

    /* Com a barra em largura cheia, o Descartar cabe de volta.
       Só o X de fechar continua fora: o Descartar já resolve. */
    #autosave-restore-bar.no-topo #btn-autosave-close{
      display:none !important;
    }
    #autosave-restore-bar.no-topo #btn-autosave-discard{
      padding:6px 11px !important;
      font-size:10.5px;
      border-radius:8px;
    }
    #autosave-restore-bar.no-topo #btn-autosave-restore{
      padding:6px 13px !important;
      font-size:11px;
      font-weight:700;
      border-radius:8px;
    }

    /* ===== BLOCOS DE ACESSO =====
       Três categorias logo abaixo do quadro. Cada uma abre um
       modal com as ferramentas daquele tipo. */
    #blocos-acesso{
      display:flex;
      justify-content:center;
      gap:14px;
      width:960px;
      max-width:100%;
      margin-top:10px;
    }
    #blocos-acesso .bloco-bt{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:5px;
      padding:0 !important;
      border:none !important;
      background:transparent !important;
      cursor:pointer;
      font-family:inherit;
      box-shadow:none !important;
      transform:none !important;
      min-height:0 !important;
    }
    /* O círculo aceita imagem de fundo, definida pelo dev */
    #blocos-acesso .bloco-img{
      width:60px; height:60px;
      border-radius:50%;
      background:#fff center/cover no-repeat;
      border:2px solid #e2e8f0;
      box-shadow:0 2px 8px rgba(2,6,23,.10);
      display:flex; align-items:center; justify-content:center;
      transition:transform .14s, border-color .14s, box-shadow .14s;
    }
    #blocos-acesso .bloco-bt:hover .bloco-img{
      transform:translateY(-2px);
      border-color:#bfdbfe;
      box-shadow:0 5px 14px rgba(37,99,235,.20);
    }
    #blocos-acesso .bloco-bt:active .bloco-img{ transform:scale(.95); }
    #blocos-acesso .bloco-emoji{ font-size:26px; line-height:1; }
    /* Com imagem definida, o emoji sai de cena */
    #blocos-acesso .bloco-img.com-img .bloco-emoji{ display:none; }
    #blocos-acesso .bloco-txt{
      font-size:11.5px;
      font-weight:700;
      color:#334155;
      letter-spacing:.01em;
    }
    /* Zoom e Limpar só fazem sentido no celular: no computador
       eles já estão na barra do quadro */
    #blocos-acesso .so-celular{ display:none; }
    #blocos-acesso .bloco-bt.ativo-sel .bloco-img{
      background:linear-gradient(180deg,#2563eb,#1d4ed8);
      border-color:transparent;
    }
    #blocos-acesso .bloco-bt.ativo-sel .bloco-emoji{ filter:brightness(3); }

    #blocos-acesso .bloco-img.limpar{
      border-color:#fecaca;
      background-color:#fff5f5;
    }
    #blocos-acesso #bloco-zoom.ativo .bloco-img{
      background:linear-gradient(180deg,#2563eb,#1d4ed8);
      border-color:transparent;
    }
    #blocos-acesso #bloco-zoom.ativo .bloco-emoji{
      color:#fff; font-size:13px; font-weight:800;
    }

    /* Com um elemento selecionado, os blocos saem de cena:
       o espaço passa a ser do direcional e das ações do objeto */
    body.obj-selecionado #blocos-acesso{ display:none !important; }

    /* Modal da categoria */
    #modal-bloco-backdrop{
      display:none;
      position:fixed; inset:0;
      background:rgba(2,6,23,.55);
      backdrop-filter:blur(3px);
      z-index:1300;
      align-items:center; justify-content:center;
      padding:20px;
    }
    #modal-bloco-backdrop.open{ display:flex; }
    #modal-bloco{
      background:#fff;
      border-radius:18px;
      box-shadow:0 22px 56px rgba(2,6,23,.3);
      width:min(94vw, 560px);
      max-height:86vh;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }
    .mb-cab{
      display:flex; align-items:center; gap:10px;
      padding:16px 18px 13px;
      border-bottom:1px solid #eef1f8;
      flex-shrink:0;
    }
    .mb-ico{ font-size:20px; line-height:1; }
    .mb-cab h2{ flex:1; font-size:17px; font-weight:800; margin:0; }
    #toolbar #mb-fechar, #mb-fechar{
      width:30px; height:30px; padding:0 !important;
      min-height:0 !important;
      border:1px solid #e2e8f0 !important;
      border-radius:9px;
      background:#f8fafc !important;
      color:#64748b !important;
      font-size:13px; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
    }
    #mb-fechar:hover{ background:#fee2e2 !important; color:#b91c1c !important; }
    .mb-corpo{
      padding:14px 16px 18px;
      overflow-y:auto;
      flex:1;
    }
    /* As seções movidas para dentro do modal */
    .mb-corpo .tool-section{ margin-bottom:10px; }
    /* Grade dos itens organizados pelo painel Dev */
    /* Cinco por linha, igual à galeria de Veículos e Sinalizações
       e à lista de organização no painel Dev — mantém o mesmo
       padrão em todos os lugares que mostram esses elementos. */
    .mb-grade{
      display:grid;
      grid-template-columns:repeat(5, 1fr);
      gap:8px;
    }
    @media (max-width: 480px){
      .mb-grade{ grid-template-columns:repeat(3, 1fr); }
    }
    .mb-grade > *{ margin:0 !important; width:100% !important; }
    .mb-grade + .mb-grade{ margin-top:14px; }
    /* Itens organizados pelo Dev são representações vinculadas aos botões
       reais da barra lateral. O estilo próprio evita depender do elemento
       estar dentro de #toolbar ou .section-body para continuar visível. */
    .mb-grade > .mb-item-vinculado{
      display:flex !important;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      min-width:0;
      min-height:72px;
      padding:7px 5px !important;
      border:1px solid #cbd5e1 !important;
      border-radius:10px !important;
      background:#9aa3b0 !important;
      color:#1f2937 !important;
      box-shadow:none !important;
      cursor:pointer;
      box-sizing:border-box;
      overflow:hidden;
      font-family:inherit;
      font-size:10px;
      font-weight:700;
      line-height:1.2;
      text-align:center;
    }
    .mb-grade > .mb-item-vinculado:hover{
      border-color:#60a5fa !important;
      background:#8b95a3 !important;
    }
    /* Mantém o destaque dos itens Premium, como na galeria original. */
    #modal-bloco .mb-grade > .mb-item-vinculado.thumb-premium{
      border-color:#b7791f !important;
      background:linear-gradient(145deg,#f6d365,#c68a16) !important;
    }
    #modal-bloco .mb-grade > .mb-item-vinculado.thumb-premium:hover{
      background:linear-gradient(145deg,#f8dc7b,#d3941b) !important;
    }
    .mb-grade > .mb-item-vinculado img{
      max-width:58px;
      max-height:58px;
      object-fit:contain;
    }
    .mb-itens-ausentes{
      grid-column:1/-1;
      margin-top:10px;
      padding:9px 11px;
      border:1px solid #fed7aa;
      border-radius:9px;
      background:#fff7ed;
      color:#9a3412;
      font-size:10px;
      line-height:1.45;
      word-break:break-word;
    }
    /* Título de separação dentro do modal, definido no painel Dev */
    .mb-subtitulo{
      margin:16px 0 8px;
      padding:5px 11px;
      background:#eef2ff;
      border-radius:8px;
      font-size:11px;
      font-weight:800;
      color:#4338ca;
      letter-spacing:.03em;
      text-transform:uppercase;
      display:inline-block;
    }
    .mb-corpo > .mb-subtitulo:first-child{ margin-top:0; }
    .mb-corpo h3{ margin-top:10px; }

    @media (max-width: 820px){
      #blocos-acesso{
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        column-gap:4px;
        row-gap:12px;
        margin-top:8px;
        width:100%;
        padding:2px 6px 9px;
        justify-items:center;
      }
      #blocos-acesso .bloco-bt{ width:100%; min-width:0; }
      #blocos-acesso .so-celular{ display:flex; }
      #blocos-acesso .bloco-img{ width:44px; height:44px; }
      #blocos-acesso .bloco-emoji{ font-size:19px; }
      #blocos-acesso .bloco-txt{ font-size:8.5px; text-align:center; overflow-wrap:anywhere; }
      #modal-bloco{ width:96vw; max-height:78vh; }

      /* Imagens cadastradas usam cartões quadrados na galeria completa.
         Dentro do modal isso as deixava bem maiores que os botões das
         ferramentas. Aqui todos passam a ter a mesma altura visual. */
      #modal-bloco .mb-grade > .thumb{
        width:100% !important;
        height:72px !important;
        min-height:72px !important;
        aspect-ratio:auto !important;
        padding:5px !important;
        border-radius:10px;
        box-sizing:border-box;
      }
      #modal-bloco .mb-grade > .thumb img{
        width:auto;
        height:auto;
        max-width:72%;
        max-height:60px;
        object-fit:contain;
      }
      #modal-bloco .mb-grade > .thumb-premium{
        overflow:hidden;
      }
      #modal-bloco .mb-grade > .thumb .thumb-premium-crown{
        width:16px;
        height:16px;
        top:2px;
        right:2px;
      }
    }

    /* ===== AVISO NO CENTRO DA TELA ===== */
    #modal-aviso-backdrop{
      display:none;
      position:fixed; inset:0;
      background:rgba(2,6,23,.55);
      backdrop-filter:blur(2px);
      z-index:1400;
      align-items:center; justify-content:center;
      padding:22px;
    }
    #modal-aviso-backdrop.open{ display:flex; }
    #modal-aviso{
      background:#fff;
      border-radius:18px;
      box-shadow:0 22px 56px rgba(2,6,23,.3);
      width:min(92vw, 340px);
      padding:26px 24px 20px;
      text-align:center;
      animation:avEntra .16s ease-out;
    }
    @keyframes avEntra{
      from{ opacity:0; transform:translateY(8px) scale(.97); }
      to{ opacity:1; transform:none; }
    }
    #modal-aviso .av-ico{
      font-size:34px; line-height:1; margin-bottom:12px;
    }
    #modal-aviso .av-titulo{
      font-size:17px; font-weight:800; color:#0f172a; margin-bottom:6px;
    }
    #modal-aviso .av-texto{
      font-size:13px; color:#64748b; line-height:1.55; margin-bottom:18px;
    }
    #toolbar #btn-aviso-ok, #btn-aviso-ok{
      width:100%;
      padding:12px !important;
      border:none !important;
      border-radius:11px;
      background:linear-gradient(180deg,#2563eb,#1d4ed8) !important;
      color:#fff !important;
      font-size:13.5px; font-weight:700;
      cursor:pointer; font-family:inherit;
      box-shadow:0 4px 12px rgba(37,99,235,.26) !important;
      transform:none !important;
    }
    #btn-aviso-ok:hover{ filter:brightness(1.06); }

    /* ===== RELATÓRIO EM PDF ===== */
    #modal-laudo-backdrop{
      display:none;
      position:fixed; inset:0;
      background:rgba(2,6,23,.62);
      backdrop-filter:blur(3px);
      z-index:1350;
      align-items:center; justify-content:center;
      padding:20px;
    }
    #modal-laudo-backdrop.open{ display:flex; }
    #modal-laudo{
      background:#fff;
      border-radius:18px;
      box-shadow:0 26px 66px rgba(2,6,23,.32);
      width:min(95vw, 760px);
      max-height:92vh;
      overflow-y:auto;
      padding:24px 22px 20px;
      position:relative;
    }
    #btn-fechar-laudo{
      position:absolute; top:16px; right:18px;
      width:30px; height:30px; padding:0;
      border:1px solid #e2e8f0; border-radius:9px;
      background:#f8fafc; color:#64748b; font-size:14px; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
    }
    #btn-fechar-laudo:hover{ background:#fee2e2; color:#b91c1c; }

    .ld-cab{ padding-right:40px; margin-bottom:14px; }
    .ld-cab h2{ font-size:19px; font-weight:800; margin:0 0 3px; }
    .ld-sub{ font-size:12.5px; color:#64748b; line-height:1.5; }

    .ld-secao{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      font-size:10.5px; font-weight:800; color:#1d4ed8;
      text-transform:uppercase; letter-spacing:.05em;
      margin:15px 0 8px; padding-bottom:5px;
      border-bottom:1px solid #e0e7ff;
    }

    /* Linhas com número fixo de colunas */
    .ld-linha{ display:grid; gap:9px; margin-bottom:9px; }
    .ld-linha.ld-l1{ grid-template-columns:1fr; }
    .ld-linha.ld-l2{ grid-template-columns:1fr 1fr; }
    .ld-linha.ld-l4{ grid-template-columns:repeat(4,1fr); }
    .ld-linha.ld-via{ grid-template-columns:1fr 130px; }
    .ld-vel-wrap{ position:relative; }
    .ld-vel-wrap input{ padding-right:42px !important; }
    .ld-vel-wrap .ld-vel-un{
      position:absolute; right:9px; top:50%;
      transform:translateY(-50%);
      font-size:10.5px; font-weight:700; color:#94a3b8;
      pointer-events:none;
    }

    .ld-campo label{
      display:block; font-size:11px; font-weight:700;
      color:#475569; margin-bottom:3px;
    }
    .ld-campo input, .ld-campo select, .ld-campo textarea{
      width:100%; padding:7px 9px;
      border:1px solid #d6dae3; border-radius:8px;
      font-size:12.5px; font-family:inherit; outline:none;
      background:#fff; color:#334155;
    }
    .ld-campo textarea{ resize:vertical; line-height:1.5; }
    .ld-campo input:focus, .ld-campo select:focus, .ld-campo textarea:focus{
      border-color:#b9d1ff; box-shadow:0 0 0 3px rgba(37,99,235,.10);
    }
    .ld-campo .ld-obrigatorio{ color:#dc2626; margin-left:2px; }
    .ld-campo input.erro, .ld-campo select.erro{ border-color:#dc2626; background:#fff7f7; box-shadow:0 0 0 3px rgba(220,38,38,.10); }

    /* Logos do cabeçalho */
    .ld-logos{
      display:grid; grid-template-columns:1fr 1.3fr 1fr;
      gap:12px; align-items:center;
      background:#f8fafc; border:1px solid #eef1f8;
      border-radius:11px; padding:12px;
    }
    .ld-logo-slot{ text-align:center; }
    .ld-logo-prev{
      height:62px; display:flex; align-items:center; justify-content:center;
      background:#fff; border:1px dashed #cbd5e1; border-radius:9px;
      overflow:hidden; margin-bottom:6px; padding:5px;
    }
    .ld-logo-prev img{ max-width:100%; max-height:100%; object-fit:contain; }
    .ld-logo-vazio{ font-size:10px; color:#94a3b8; }

    /* Logo pendente: esmaecida, com a legenda embaixo */
    .ld-logo-slot.em-analise .ld-logo-prev img{ opacity:.38; }
    .ld-logo-slot.recusada  .ld-logo-prev img{ opacity:.32; }
    .ld-logo-status{
      font-size:9.5px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.04em;
      border-radius:999px;
      padding:2px 8px;
      display:inline-block;
      margin:-2px 0 6px;
    }
    .ld-logo-status.analise { background:#fef3c7; color:#92400e; }
    .ld-logo-status.recusada{ background:#fee2e2; color:#b91c1c; cursor:help; }
    .ld-logo-med{
      font-size:9.5px;
      font-weight:700;
      color:#94a3b8;
      letter-spacing:.02em;
      margin-bottom:5px;
    }
    .ld-logo-btns{ display:flex; gap:5px; justify-content:center; }
    .ld-logo-btn, .ld-logo-rem{
      font-size:10.5px; font-weight:700; padding:4px 10px;
      border:1px solid #e2e8f0; border-radius:7px;
      background:#fff; color:#475569; cursor:pointer;
      font-family:inherit;
    }
    .ld-logo-btn:hover{ background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
    .ld-logo-rem:hover{ background:#fee2e2; color:#b91c1c; border-color:#fecaca; }
    .ld-logo-meio{ text-align:center; }
    .ld-logo-titulo{
      font-size:12.5px; font-weight:800; color:#0f172a; line-height:1.35;
    }
    .ld-logo-nota{ font-size:9.5px; color:#94a3b8; margin-top:4px; }
    .ld-dica-logo{
      font-size:10.5px; color:#94a3b8; margin-top:6px; line-height:1.45;
    }

    /* Lista de veículos */

    /* Opção de anexar a sequência ao documento */
    .ld-seq{
      background:#f5f3ff;
      border:1px solid #ddd6fe;
      border-radius:11px;
      padding:11px 13px;
      margin-top:14px;
    }
    .ld-seq-chk{
      display:flex; align-items:flex-start; gap:9px;
      cursor:pointer;
    }
    .ld-seq-chk input{
      width:16px; height:16px; margin-top:1px;
      accent-color:#4f46e5; cursor:pointer; flex-shrink:0;
    }
    .ld-seq-chk strong{
      display:block; font-size:12.5px; color:#3730a3; font-weight:700;
    }
    .ld-seq-chk em{
      display:block; font-size:11px; color:#6366f1;
      font-style:normal; margin-top:2px;
    }

    /* Aguardo enquanto o servidor monta o PDF */
    .ld-carregando{
      display:none;
      align-items:center;
      gap:12px;
      background:#eff6ff;
      border:1px solid #bfdbfe;
      border-radius:11px;
      padding:14px 16px;
      margin-top:14px;
    }
    .ld-carregando.on{ display:flex; }
    .ldc-spin{
      width:22px; height:22px; flex-shrink:0;
      border:3px solid #bfdbfe;
      border-top-color:#2563eb;
      border-radius:50%;
      animation:ldcGira .7s linear infinite;
    }
    @keyframes ldcGira{ to{ transform:rotate(360deg); } }
    .ldc-txt{ font-size:13px; font-weight:700; color:#1d4ed8; }
    .ldc-sub{ font-size:11px; color:#64748b; }
    .ld-carregando > div:not(.ldc-spin){ line-height:1.4; }

    .ld-msg{ font-size:12.5px; margin-top:12px; min-height:16px; }
    .ld-msg.erro{ color:#b91c1c; }
    .ld-msg.ok{ color:#166534; }

    .ld-acoes{ display:flex; gap:9px; margin-top:12px; }
    #toolbar #btn-gerar-laudo, #btn-gerar-laudo{
      flex:2; padding:13px !important;
      border:none !important; border-radius:11px;
      background:linear-gradient(180deg,#2563eb,#1d4ed8) !important;
      color:#fff !important; font-size:14px; font-weight:700;
      cursor:pointer; font-family:inherit;
      box-shadow:0 5px 14px rgba(37,99,235,.28) !important;
      transform:none !important;
    }
    #btn-gerar-laudo:hover{ filter:brightness(1.05); }
    #btn-cancelar-laudo{
      flex:1; padding:13px !important;
      border:1px solid #e2e8f0 !important; border-radius:11px;
      background:#fff !important; color:#64748b !important;
      font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
      box-shadow:none !important; transform:none !important;
    }
    #btn-cancelar-laudo:hover{ background:#f1f5f9 !important; }
    .ld-dica{
      text-align:center; font-size:11px; color:#94a3b8;
      margin-top:10px; line-height:1.5;
    }
    @media (max-width: 640px){
      .ld-linha.ld-l4{ grid-template-columns:1fr 1fr; }
      .ld-logos{ grid-template-columns:1fr; }
    }
    @media (max-width: 460px){
      .ld-linha.ld-l4, .ld-linha.ld-l2{ grid-template-columns:1fr; }
      .ld-linha.ld-via{ grid-template-columns:1fr 110px; }
    }

    /* ===== VISUALIZADOR DE CROQUIS ===== */
    #modal-galeria-backdrop{
      display:none;
      position:fixed; inset:0;
      background:rgba(2,6,23,.72);
      backdrop-filter:blur(4px);
      z-index:1300;
      align-items:center; justify-content:center;
      padding:20px;
    }
    #modal-galeria-backdrop.open{ display:flex; }
    #modal-galeria{
      background:#fff;
      border-radius:20px;
      box-shadow:0 28px 70px rgba(2,6,23,.35);
      width:min(94vw, 840px);
      max-height:92vh;
      overflow-y:auto;
      padding:24px 22px 20px;
      position:relative;
      animation:galIn .2s ease-out;
    }
    @keyframes galIn{
      from{ opacity:0; transform:scale(.97); }
      to  { opacity:1; transform:scale(1); }
    }
    #btn-fechar-galeria{
      position:absolute; top:16px; right:18px;
      width:30px; height:30px; padding:0;
      border:1px solid #e2e8f0; border-radius:9px;
      background:#f8fafc; color:#64748b; font-size:14px; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      z-index:3;
    }
    #btn-fechar-galeria:hover{ background:#fee2e2; color:#b91c1c; border-color:#fecaca; }

    .gal-topo{ padding-right:44px; margin-bottom:14px; }
    .gal-topo h2{
      font-size:19px; font-weight:800; color:#0f172a; margin:0;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .gal-sub{ font-size:12.5px; color:#94a3b8; margin-top:3px; }

    .gal-palco{
      position:relative;
      display:flex; align-items:center; justify-content:center;
      background:#eef1f6;
      border:1px solid #e2e8f0;
      border-radius:14px;
      padding:12px;
      margin-bottom:12px;
    }
    .gal-imagem{
      flex:1; display:flex; align-items:center; justify-content:center;
      height:48vh;
      max-height:440px;
      min-height:280px;
      padding:0 44px;   /* espaço para as setas sobrepostas */
      width:100%;
    }
    .gal-imagem img{
      /* Ocupa todo o espaço mantendo a proporção. Sem isso a
         miniatura era exibida no tamanho original, bem menor
         que a área disponível. */
      width:100%;
      height:100%;
      object-fit:contain;
      border-radius:8px;
      box-shadow:0 8px 26px rgba(2,6,23,.18);
      background:#fff;
    }
    .gal-imagem .sem-img{
      font-size:13px; color:#94a3b8;
      background:repeating-linear-gradient(45deg,#f8fafc,#f8fafc 9px,#eef1f6 9px,#eef1f6 18px);
      width:100%; height:100%; border-radius:8px;
      display:flex; align-items:center; justify-content:center;
    }

    .gal-seta{
      position:absolute;
      top:50%; transform:translateY(-50%);
      width:44px; height:44px; flex-shrink:0;
      border:1px solid #dbe3f3; border-radius:50%;
      background:rgba(255,255,255,.96);
      color:#334155; font-size:22px; line-height:1;
      cursor:pointer; padding:0 0 3px;
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 3px 10px rgba(2,6,23,.14);
      transition:background .12s, transform .1s;
      z-index:2;
    }
    .gal-ant{ left:10px; }
    .gal-prox{ right:10px; }
    .gal-seta:hover{ background:#eff6ff; color:#1d4ed8; }
    .gal-seta:active{ transform:translateY(-50%) scale(.94); }
    .gal-seta:disabled{ opacity:.3; cursor:not-allowed; }

    .gal-pontos{
      display:flex; justify-content:center; gap:6px;
      flex-wrap:wrap; margin-bottom:16px; min-height:9px;
    }
    .gal-ponto{
      width:8px; height:8px; border-radius:50%;
      background:#cbd5e1; border:none; padding:0; cursor:pointer;
      transition:background .12s, transform .12s;
    }
    .gal-ponto:hover{ background:#94a3b8; }
    .gal-ponto.ativo{ background:#2563eb; transform:scale(1.3); }

    /* Reordenar modelos (dev) */
    .gal-ordem{
      display:none;
      align-items:center; justify-content:space-between;
      gap:10px; flex-wrap:wrap;
      background:#f8fafc; border:1px solid #eef1f8;
      border-radius:11px; padding:9px 12px; margin-bottom:12px;
    }
    .gal-ordem.on{ display:flex; }
    .gal-ordem .go-rot{
      font-size:10.5px; font-weight:800; color:#94a3b8;
      text-transform:uppercase; letter-spacing:.04em;
    }
    .gal-ordem .go-btns{ display:flex; align-items:center; gap:5px; }
    .gal-ordem .go-btns button{
      width:30px; height:30px; padding:0;
      border:1px solid #e2e8f0; border-radius:8px;
      background:#fff; color:#475569; font-size:13px;
      cursor:pointer; font-family:inherit;
      display:flex; align-items:center; justify-content:center;
    }
    .gal-ordem .go-btns button:hover{ background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
    .gal-ordem .go-btns button:disabled{ opacity:.35; cursor:not-allowed; }
    .gal-ordem .go-pos{
      font-size:12px; font-weight:800; color:#1d4ed8;
      background:#eff6ff; padding:4px 10px; border-radius:999px;
      min-width:52px; text-align:center;
    }

    .gal-acoes{ display:flex; gap:9px; }
    #toolbar #btn-gal-usar, #btn-gal-usar{
      flex:2; padding:13px !important;
      border:none !important; border-radius:11px;
      background:linear-gradient(180deg,#2563eb,#1d4ed8) !important;
      color:#fff !important; font-size:14px; font-weight:700;
      cursor:pointer; font-family:inherit;
      box-shadow:0 5px 14px rgba(37,99,235,.28) !important;
      transform:none !important;
    }
    #btn-gal-usar:hover{ filter:brightness(1.05); }
    #toolbar #btn-gal-excluir, #btn-gal-excluir{
      flex:1; padding:13px !important;
      border:1px solid #e2e8f0 !important; border-radius:11px;
      background:#fff !important; color:#64748b !important;
      font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
      box-shadow:none !important; transform:none !important;
    }
    #btn-gal-excluir:hover{ background:#fee2e2 !important; color:#b91c1c !important; }
    .gal-dica{
      text-align:center; font-size:11px; color:#94a3b8; margin-top:11px;
    }

    /* Medidor de croquis salvos */
    .cq-medidor{
      background:#f8fafc;
      border:1px solid #e7eaf3;
      border-radius:11px;
      padding:10px 12px;
      margin-bottom:9px;
    }
    .cq-medidor .cqm-topo{
      display:flex; align-items:center; justify-content:space-between;
      gap:8px; margin-bottom:7px;
    }
    .cq-medidor .cqm-txt{
      font-size:10.5px; font-weight:700; color:#64748b;
      text-transform:uppercase; letter-spacing:.04em;
    }
    .cq-medidor .cqm-num{
      font-size:13px; font-weight:800; color:#1d4ed8;
      background:#eff6ff; padding:2px 9px; border-radius:999px;
    }
    .cq-medidor .cqm-barra{
      height:6px; background:#e7eaf3;
      border-radius:3px; overflow:hidden;
    }
    .cq-medidor .cqm-fill{
      height:100%; width:0%;
      background:linear-gradient(90deg,#3b82f6,#2563eb);
      border-radius:3px;
      transition:width .3s ease, background .2s;
    }
    /* Perto do limite */
    .cq-medidor.atencao .cqm-num{ background:#fef3c7; color:#92400e; }
    .cq-medidor.atencao .cqm-fill{ background:linear-gradient(90deg,#fbbf24,#d97706); }
    .cq-medidor.cheio .cqm-num{ background:#fef2f2; color:#b91c1c; }
    .cq-medidor.cheio .cqm-fill{ background:linear-gradient(90deg,#f87171,#dc2626); }

    /* Busca nos croquis salvos */
    .cq-busca{
      position:relative;
      display:flex;
      align-items:center;
      margin-bottom:7px;
    }
    .cq-busca-ico{
      position:absolute; left:11px;
      font-size:12px; opacity:.5;
      pointer-events:none;
      z-index:2;
      line-height:1;
    }
    /* Especificidade dupla: a regra genérica do toolbar
       sobrescrevia o padding e o texto passava por cima da lupa */
    #toolbar #cq-filtro,
    #cq-filtro{
      width:100%;
      padding:9px 32px 9px 32px !important;
      border:1px solid #d6dae3;
      border-radius:10px;
      font-size:12.5px;
      font-family:inherit;
      outline:none;
      box-sizing:border-box;
      transition:border-color .1s, box-shadow .1s;
    }
    #toolbar #cq-filtro:focus,
    #cq-filtro:focus{
      border-color:#b9d1ff;
      box-shadow:0 0 0 3px rgba(37,99,235,.10);
    }
    #cq-filtro-limpar{
      position:absolute; right:7px;
      width:20px; height:20px;
      border:none; border-radius:5px;
      background:transparent;
      color:#94a3b8; font-size:11px;
      cursor:pointer; display:none;
      align-items:center; justify-content:center;
      padding:0;
    }
    #cq-filtro-limpar.on{ display:flex; }
    #cq-filtro-limpar:hover{ background:#f1f5f9; color:#0f172a; }
    .cq-contador{
      font-size:10.5px; color:#94a3b8;
      margin-bottom:7px; min-height:13px;
    }

    /* Grade de croquis e modelos */
    .cq-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:8px;
    }
    .cq-card{
      border:1px solid #e7eaf3;
      border-radius:11px;
      background:#fff;
      overflow:hidden;
      cursor:pointer;
      position:relative;
      transition:border-color .12s, box-shadow .12s, transform .1s;
    }
    .cq-card:hover{
      border-color:#bfdbfe;
      box-shadow:0 4px 12px rgba(37,99,235,.14);
      transform:translateY(-1px);
    }
    .cq-thumb{
      width:100%;
      aspect-ratio:4/3;
      /* Croqui inteiro à vista: com cover as bordas do desenho
         eram recortadas, e é justamente pela borda que se
         reconhece o cenário do modelo. */
      object-fit:contain;
      display:block;
      background:#fff;
      padding:3px;
      box-sizing:border-box;
    }
    .cq-vazio{
      width:100%; aspect-ratio:4/3;
      background:repeating-linear-gradient(45deg,#f8fafc,#f8fafc 7px,#f1f5f9 7px,#f1f5f9 14px);
    }
    .cq-info{ padding:7px 8px; }
    .cq-nome{
      font-size:11px; font-weight:700; color:#0f172a;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .cq-data{ font-size:9.5px; color:#94a3b8; margin-top:2px; }
    .cq-del{
      position:absolute; top:5px; right:5px;
      z-index:4;
      width:24px; height:24px;
      border:none; border-radius:6px;
      background:rgba(255,255,255,.94);
      color:#b91c1c; font-size:11px; font-weight:900;
      cursor:pointer; line-height:1;
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 1px 4px rgba(2,6,23,.18);
    }
    .cq-del:hover{ background:#fee2e2; }
    .cq-del:disabled{ opacity:.55; cursor:wait; }
    .cq-rasc{
      position:absolute; top:5px; left:5px;
      font-size:8.5px; font-weight:800;
      background:#fef3c7; color:#92400e;
      padding:2px 6px; border-radius:999px;
    }

    /* ===== SEÇÕES DE FERRAMENTAS ===== */
    .tool-section{
      border:1px solid #e7eaf3;
      border-radius:13px;
      background:#fcfdff;
      padding:11px 12px 12px;
      margin-bottom:10px;
      box-shadow:0 1px 3px rgba(2,6,23,.04);
    }
    /* Estado breve enquanto a ordem e os ícones personalizados chegam do
       cache/servidor. Evita a impressão de que o menu está incompleto. */
    #tools-loading{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:54px;
      margin:0 0 10px;
      padding:10px 12px;
      border:1px solid #dbeafe;
      border-radius:12px;
      background:linear-gradient(90deg,#f8fbff,#eff6ff,#f8fbff);
      color:#315a89;
      font-size:12px;
      font-weight:700;
    }
    #tools-loading[hidden]{ display:none; }
    .tools-loading-spin{
      width:17px;
      height:17px;
      border:2px solid #bfdbfe;
      border-top-color:#2563eb;
      border-radius:50%;
      animation:tools-loading-spin .72s linear infinite;
      flex:0 0 auto;
    }
    @keyframes tools-loading-spin{ to{ transform:rotate(360deg); } }
    #tool-sections.is-loading{
      opacity:.42;
      pointer-events:none;
      user-select:none;
    }
    /* Cofre de ferramentas: itens movidos para cá continuam salvos, mas só o
       time de desenvolvimento consegue ver e administrá-los. */
    .tool-section.dev-hidden-tools{ display:none; }
    .tool-section.dev-hidden-tools.dev-visible{
      display:block;
      border-color:#f2c14e;
      background:#fffaf0;
    }
    .tool-section.dev-hidden-tools.dev-visible .section-title{ color:#956500; }
    .dev-hidden-hint{ margin:0 0 8px; color:#8a6415; }
    #toolbar .tool-section h3.section-head{
      display:flex !important;
      align-items:center;
      gap:6px;
      margin:0 0 9px !important;
      padding:0 0 8px !important;
      border-top:none !important;
      border-bottom:1px solid #eef1f8;
      font-size:11px;
      font-weight:800;
      color:#64748b;
      text-transform:uppercase;
      letter-spacing:.05em;
    }
    .section-title{ flex:1; }
    .section-actions{ display:none; gap:3px; }
    body.reorder-mode .section-actions{ display:flex; }
    .section-actions button{
      padding:3px 7px !important;
      font-size:10px !important;
      font-weight:700 !important;
      border-radius:6px !important;
      border:1px solid #cbd5e1 !important;
      background:#fff !important;
      color:#64748b !important;
      cursor:pointer;
      box-shadow:none !important;
      transform:none !important;
      line-height:1.4;
    }
    .section-actions button:hover{ background:#eff6ff !important; color:#1d4ed8 !important; }
    .section-actions .sec-del:hover{ background:#fee2e2 !important; color:#b91c1c !important; }

    body.reorder-mode .section-body{
      min-height:44px;
      border:1.5px dashed #cbd5e1;
      border-radius:10px;
      padding:7px;
      background:#fcfdff;
    }
    body.reorder-mode .section-body.sec-drop{
      border-color:#2563eb;
      background:#eff6ff;
    }
    #btn-add-section{
      display:none;
      width:100%;
      padding:8px !important;
      margin-top:6px;
      border:1.5px dashed #93c5fd !important;
      border-radius:10px;
      background:#f8fbff !important;
      color:#1d4ed8 !important;
      font-size:11.5px;
      font-weight:700;
      cursor:pointer;
      text-align:center !important;
      box-shadow:none !important;
      transform:none !important;
    }
    body.reorder-mode #btn-add-section{ display:block; }
    #btn-add-section:hover{ background:#eff6ff !important; }

    /* ===== LARGURA DAS VIAS ===== */
    /* Controle de recursos, na aba Dev */
    #rec-lista{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
    .rec-item{
      background:#fff;
      border:1px solid #e7eaf3;
      border-radius:10px;
      padding:8px 10px;
    }
    .rec-topo{
      display:flex; align-items:center; justify-content:space-between;
      gap:8px; margin-bottom:6px;
    }
    .rec-nome{ font-size:12px; font-weight:700; color:#0f172a; }
    .rec-tag{
      font-size:9px; font-weight:800; padding:3px 9px; border-radius:999px;
      text-transform:uppercase; letter-spacing:.05em;
      color:#fff; white-space:nowrap;
    }
    .rec-tag.ativo     { background:linear-gradient(180deg,#22c55e,#16a34a); }
    .rec-tag.em_breve  { background:linear-gradient(180deg,#3b82f6,#2563eb); }
    .rec-tag.manutencao{ background:linear-gradient(180deg,#fb923c,#ea580c); }
    #toolbar .rec-item select,
    .rec-item select{
      width:100%;
      padding:6px 8px;
      border:1px solid #d6dae3;
      border-radius:8px;
      font-size:11.5px;
      font-family:inherit;
      background:#fff;
    }

    /* Bloqueado: visível, mas sem acesso */
    .rec-travado{ cursor:not-allowed !important; }

    /* Selo no botão que está desativado para os outros */
    .rec-selo{
      position:absolute;
      top:-8px; right:-6px;
      font-size:8.5px;
      font-weight:800;
      letter-spacing:.05em;
      text-transform:uppercase;
      padding:3px 9px;
      border-radius:999px;
      white-space:nowrap;
      pointer-events:none;
      color:#fff;
      border:1.5px solid #fff;
      box-shadow:0 2px 6px rgba(2,6,23,.28);
      z-index:4;
    }
    .rec-selo.em_breve{
      background:linear-gradient(180deg,#3b82f6,#2563eb);
    }
    .rec-selo.manutencao{
      background:linear-gradient(180deg,#fb923c,#ea580c);
    }
    .rec-off{
      position:relative;
      opacity:.62;
    }
    /* Faixa diagonal discreta reforça que está fora do ar */
    .rec-off::before{
      content:'';
      position:absolute; inset:0;
      border-radius:inherit;
      background:repeating-linear-gradient(
        135deg,
        rgba(15,23,42,.05) 0 6px,
        rgba(15,23,42,0) 6px 12px
      );
      pointer-events:none;
    }

    /* ===== SEQUÊNCIA DO SINISTRO ===== */
    #seq-painel{
      display:none;
      flex-direction:column;
      gap:9px;
      border:1px solid #c7d2fe;
      border-radius:13px;
      background:linear-gradient(180deg,#f5f3ff,#eef2ff);
      padding:11px 12px 12px;
      margin-bottom:10px;
      box-shadow:0 1px 3px rgba(79,70,229,.10);
    }
    #seq-painel.on{ display:flex; }
    .seq-cab{
      display:flex; align-items:center; justify-content:space-between;
    }
    .seq-titulo{
      font-size:11px; font-weight:800; color:#4f46e5;
      text-transform:uppercase; letter-spacing:.05em;
    }
    #toolbar #seq-fechar{
      width:22px; height:22px; padding:0 !important;
      min-height:0 !important;
      border:1px solid #ddd6fe !important;
      border-radius:7px;
      background:#fff !important;
      color:#6366f1 !important;
      font-size:11px; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
    }
    #seq-fechar:hover{ background:#ede9fe !important; }
    .seq-dica{
      font-size:10.5px; color:#64748b; line-height:1.45;
    }

    /* Lista de quadros capturados */
    #seq-lista{ display:flex; flex-direction:column; gap:6px; }
    .seq-item{
      display:flex; align-items:center; gap:8px;
      background:#fff;
      border:1px solid #e9e5ff;
      border-radius:10px;
      padding:6px 8px;
    }
    .seq-num{
      width:20px; height:20px; flex-shrink:0;
      background:#4f46e5; color:#fff;
      border-radius:6px;
      font-size:10.5px; font-weight:800;
      display:flex; align-items:center; justify-content:center;
    }
    .seq-mini{
      width:52px; height:39px; flex-shrink:0;
      border:1px solid #e2e8f0; border-radius:5px;
      object-fit:cover; background:#f1f5f9;
    }
    .seq-rot{
      flex:1; min-width:0;
      font-size:11.5px;
      border:none; outline:none; background:transparent;
      color:#0f172a; font-family:inherit;
      padding:3px 4px; border-radius:5px;
    }
    .seq-rot:focus{ background:#f5f3ff; }
    .seq-acoes{ display:flex; gap:3px; flex-shrink:0; }
    #toolbar .seq-acoes button,
    .seq-acoes button{
      width:22px; height:22px; padding:0 !important;
      min-height:0 !important;
      border:1px solid #e2e8f0 !important;
      border-radius:6px;
      background:#fff !important;
      color:#94a3b8 !important;
      font-size:10px; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
    }
    .seq-acoes button:hover{ background:#f1f5f9 !important; color:#0f172a !important; }
    .seq-acoes .sq-del:hover{
      background:#fee2e2 !important; color:#b91c1c !important;
      border-color:#fecaca !important;
    }

    #toolbar #seq-capturar{
      padding:10px !important;
      border:none !important;
      border-radius:10px;
      background:linear-gradient(180deg,#6366f1,#4f46e5) !important;
      color:#fff !important;
      font-size:12.5px; font-weight:700;
      cursor:pointer; font-family:inherit;
      box-shadow:0 3px 10px rgba(79,70,229,.22) !important;
      transform:none !important;
    }
    #seq-capturar:hover{ filter:brightness(1.06); }
    #seq-capturar:disabled{
      background:#cbd5e1 !important; cursor:not-allowed;
      box-shadow:none !important;
    }

    /* Onde a sequência vai parar */
    .seq-aviso{
      display:flex;
      align-items:flex-start;
      gap:7px;
      background:#fff;
      border:1px solid #e9e5ff;
      border-radius:9px;
      padding:8px 10px;
      font-size:10.5px;
      color:#4c4a7a;
      line-height:1.45;
    }
    .seq-aviso .sa-ico{ font-size:12px; line-height:1.2; flex-shrink:0; }
    .seq-aviso strong{ color:#4f46e5; }

    /* ===== PAINEL DA CANETA ===== */
    #pen-selectors{
      display:none;
      flex-direction:column;
      gap:9px;
      border:1px solid #bfdbfe;
      border-radius:13px;
      background:linear-gradient(180deg,#f8fbff,#eff6ff);
      padding:11px 12px 12px;
      margin-bottom:10px;
      box-shadow:0 1px 3px rgba(37,99,235,.08);
      animation:wsEntra .16s ease-out;
    }
    #pen-selectors .ws-titulo{ color:#1d4ed8 !important; }
    #pen-selectors .pen-linha{ display:flex; flex-direction:column; gap:6px; }
    #pen-selectors .pen-topo{
      display:flex; align-items:center; justify-content:space-between;
    }
    #pen-selectors .pen-rot{
      font-size:11px; font-weight:700; color:#475569;
    }
    #pen-selectors .pen-valor{
      font-size:11.5px; font-weight:800; color:#1d4ed8;
      background:#fff; padding:2px 9px; border-radius:999px;
      border:1px solid #dbeafe;
      min-width:46px; text-align:center;
    }
    #pen-selectors .pen-cores{
      display:flex; align-items:center; gap:5px; flex-wrap:wrap;
    }
    #toolbar #pen-selectors .sw,
    #pen-selectors .sw{
      width:22px; height:22px; padding:0 !important;
      border:2px solid #e2e8f0 !important;
      border-radius:7px;
      cursor:pointer;
      flex-shrink:0;
      transform:none !important;
      box-shadow:none !important;
      transition:transform .1s, border-color .1s;
    }
    #pen-selectors .sw:hover{ transform:scale(1.14) !important; }
    #pen-selectors .sw.sel{
      border-color:#0f172a !important;
      box-shadow:0 0 0 2px rgba(15,23,42,.14) !important;
    }
    #pen-selectors #pen-color{
      width:26px; height:22px; padding:0;
      border:1px solid #e2e8f0; border-radius:7px;
      cursor:pointer; background:#fff; flex-shrink:0;
    }
    #pen-selectors input[type=range]{
      width:100%; accent-color:#2563eb; cursor:pointer;
    }
    /* Amostra da espessura escolhida */
    #pen-selectors .pen-amostra{
      height:22px;
      display:flex; align-items:center;
      background:#fff;
      border:1px solid #dbeafe;
      border-radius:8px;
      padding:0 9px;
      overflow:hidden;
    }
    #pen-preview{
      display:block; width:100%;
      background:#000; border-radius:999px;
      height:3px;
      transition:height .1s, background .1s;
    }
    #pen-selectors .pen-legenda{
      font-size:10px; color:#64748b; line-height:1.4;
    }

    #width-selectors{
      border:1px solid #bfdbfe;
      border-radius:13px;
      background:linear-gradient(180deg,#f8fbff,#eff6ff);
      padding:11px 12px 12px;
      margin-bottom:10px;
      box-shadow:0 1px 3px rgba(37,99,235,.08);
      animation:wsEntra .16s ease-out;
    }
    @keyframes wsEntra{
      from{ opacity:0; transform:translateY(-4px); }
      to  { opacity:1; transform:translateY(0); }
    }
    #width-selectors .ws-titulo{ color:#1d4ed8 !important; }
    #width-selectors .ws-titulo{
      font-size:11px;
      font-weight:800;
      color:#64748b;
      text-transform:uppercase;
      letter-spacing:.05em;
      margin-bottom:9px;
      padding-bottom:8px;
      border-bottom:1px solid #eef1f8;
    }
    #width-selectors .ws-linha{
      display:flex;
      align-items:center;
      gap:8px;
    }
    #width-selectors .ws-linha + .ws-linha{ margin-top:6px; }
    #ws-calcada{ display:none; }
    #ws-asfalto{ display:none; }

    /* Dica sobre os cliques, no painel de largura */
    .ws-dica-cliques{
      font-size:10px;
      color:#64748b;
      line-height:1.5;
      background:#fff;
      border:1px solid #e0e7ff;
      border-radius:8px;
      padding:6px 8px;
      margin-top:2px;
    }
    .ws-dica-cliques kbd{
      background:#f1f5f9;
      border:1px solid #cbd5e1;
      border-bottom-width:2px;
      border-radius:4px;
      padding:0 4px;
      font-size:9.5px;
      font-family:inherit;
      font-weight:700;
      color:#334155;
    }
    /* No celular não há Shift */
    @media (max-width: 820px){
      .ws-dica-cliques{ display:none; }
    }
    #width-selectors .ws-linha label{
      font-size:11.5px;
      font-weight:700;
      color:#475569;
      min-width:42px;
    }
    #width-selectors select{
      flex:1;
      padding:8px 10px;
      border:1px solid #d6dae3;
      border-radius:9px;
      background:#fff;
      font-size:11.5px;
      font-weight:600;
      color:#334155;
      cursor:pointer;
      outline:none;
      font-family:inherit;
      transition:border-color .1s, box-shadow .1s;
    }
    #width-selectors select:hover{ border-color:#bfdbfe; }
    #width-selectors select:focus{
      border-color:#b9d1ff;
      box-shadow:0 0 0 3px rgba(37,99,235,.10);
    }

    /* Faixas desabilitadas quando a largura real está ativa */
    #width-selectors .ws-faixas.off{ opacity:.45; }
    #width-selectors select:disabled{
      background:#f1f5f9;
      color:#94a3b8;
      cursor:not-allowed;
      border-color:#e2e8f0;
    }

    /* Escolha da largura real */
    .ws-real-check{
      display:flex;
      align-items:center;
      gap:7px;
      margin-top:10px;
      padding-top:9px;
      border-top:1px solid #eef1f8;
      font-size:11.5px;
      font-weight:700;
      color:#475569;
      cursor:pointer;
      user-select:none;
    }
    .ws-real-check input{
      width:15px; height:15px;
      cursor:pointer;
      accent-color:#2563eb;
      flex-shrink:0;
    }
    #width-selectors .ws-real{
      margin-top:7px;
      opacity:.45;
      transition:opacity .12s;
    }
    #width-selectors .ws-real.on{ opacity:1; }
    #largura-real{
      flex:1;
      padding:8px 10px;
      border:1px solid #d6dae3;
      border-radius:9px;
      background:#fff;
      font-size:11.5px;
      font-weight:700;
      color:#334155;
      outline:none;
      font-family:inherit;
      min-width:0;
    }
    #largura-real:disabled{
      background:#f1f5f9; color:#94a3b8;
      cursor:not-allowed; border-color:#e2e8f0;
    }
    #largura-real:focus{
      border-color:#b9d1ff;
      box-shadow:0 0 0 3px rgba(37,99,235,.10);
    }
    #width-selectors .ws-unid{
      font-size:11px; font-weight:700; color:#94a3b8;
      flex-shrink:0;
    }
    #width-selectors .ws-nota{
      font-size:10px;
      color:#2563eb;
      margin-top:6px;
      line-height:1.45;
      min-height:13px;
    }
    #width-selectors .ws-nota:empty{ display:none; }
    /* Barra do modo organizar */
    #reorder-bar{
      display:none;
      align-items:center;
      gap:8px;
      padding:9px 11px;
      border-radius:11px;
      background:linear-gradient(180deg,#eff6ff,#dbeafe);
      border:1px solid #bfdbfe;
      font-size:11px;
      color:#1e40af;
      font-weight:600;
      line-height:1.4;
      margin-bottom:8px;
    }
    #reorder-bar.on{ display:flex; }
    #reorder-bar .rb-txt{ flex:1; }
    #toolbar #btn-reorder-done,
    #btn-reorder-done{
      padding:6px 11px !important;
      border:none !important;
      border-radius:8px;
      background:#2563eb !important;
      color:#fff !important;
      font-size:11px;
      font-weight:700;
      cursor:pointer;
      white-space:nowrap;
      box-shadow:none !important;
      transform:none !important;
    }
    #toolbar #btn-toggle-reorder,
    #btn-toggle-reorder{
      display:flex !important;
      align-items:center;
      justify-content:center;
      gap:6px;
      width:100%;
      padding:9px !important;
      border:1px dashed #cbd5e1 !important;
      border-radius:10px;
      background:#fafbfc !important;
      color:#64748b !important;
      font-size:11.5px;
      font-weight:700;
      cursor:pointer;
      text-align:center !important;
      transform:none !important;
      box-shadow:none !important;
      margin-top:6px;
    }
    #btn-toggle-reorder:hover{
      background:#f0f5ff !important;
      border-color:#93c5fd !important;
      color:#1d4ed8 !important;
    }

    #toolbar input[type="text"]{
      padding:10px 10px;
      border:1px solid #d6dae3;
      border-radius:12px;
      width:100%;
      outline:none;
      background:#fff;
      transition:border-color .08s ease, box-shadow .08s ease;
    }
    #toolbar input[type="text"]:focus{
      border-color:#b9d1ff;
      box-shadow:0 0 0 4px rgba(37,99,235,.12);
    }

    #toolbar input[type="file"]{
      padding:10px 10px;
      border:1px solid #d6dae3;
      border-radius:12px;
      width:100%;
      outline:none;
      background:#fff;
    }

    #canvas-container{
      flex:1;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:16px;
      min-width:0;
      overflow:hidden;
    }

    #croqui-canvas-wrapper{
      /* Reserva o quadro antes da inicialização do Fabric. */
      width:min(960px, 100%);
      aspect-ratio:4 / 3;
      box-shadow:0 15px 45px rgba(2,6,23,.18);
      border-radius:18px;
      overflow:hidden;
      background:#f0f2f5;
      background-image:
        linear-gradient(rgba(0,0,0,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.08) 1px, transparent 1px);
      background-size:40px 40px;
      border:1px solid rgba(15,23,42,.08);
      position:relative;
    }
    #croqui-canvas-wrapper > #croqui-canvas{
      display:block;
      width:100%;
      height:auto;
    }

    /* Diagnóstico temporário de imagens, habilitado pelo JS somente para DEV. */
    #btn-dev-image-debug{
      display:none;
      align-items:center;
      justify-content:center;
      gap:7px;
      min-height:40px;
      margin:10px 0 0;
      padding:9px 14px;
      border:1px solid #93c5fd;
      border-radius:12px;
      background:linear-gradient(135deg,#eff6ff,#dbeafe);
      box-shadow:0 7px 18px rgba(37,99,235,.14);
      color:#1d4ed8;
      font:800 12px/1.2 inherit;
      cursor:pointer;
      z-index:906;
    }
    #btn-dev-image-debug.on{ display:flex; }
    #dev-image-scale-backdrop{
      display:none;
      position:fixed;
      inset:0;
      z-index:12050;
      align-items:center;
      justify-content:center;
      padding:18px;
      background:rgba(15,23,42,.62);
      backdrop-filter:blur(4px);
    }
    #dev-image-scale-backdrop.open{ display:flex; }
    #dev-image-scale-debug{
      width:min(720px,100%);
      max-height:min(88vh,720px);
      box-sizing:border-box;
      overflow:auto;
      padding:18px;
      border:1px solid #93c5fd;
      border-radius:18px;
      background:linear-gradient(135deg,#eff6ff,#f8fafc);
      box-shadow:0 24px 70px rgba(15,23,42,.30);
      color:#0f172a;
      font-size:12px;
    }
    .disd-topo{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:9px;
    }
    .disd-titulo{ font-size:13px; font-weight:900; color:#1d4ed8; }
    #disd-fechar{
      flex:0 0 auto;
      width:38px;
      height:38px;
      border:1px solid #bfdbfe;
      border-radius:11px;
      background:#fff;
      color:#64748b;
      font-size:21px;
      cursor:pointer;
    }
    .disd-nome{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      color:#475569;
      font-weight:700;
    }
    .disd-grade{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:8px;
    }
    .disd-item{
      min-width:0;
      padding:8px 9px;
      border:1px solid #dbeafe;
      border-radius:10px;
      background:rgba(255,255,255,.88);
    }
    .disd-item small{ display:block; margin-bottom:3px; color:#64748b; font-weight:700; }
    .disd-item strong{ display:block; color:#0f172a; font-size:12px; overflow-wrap:anywhere; }
    .disd-alerta{ color:#b45309 !important; }
    .disd-acoes{ display:flex; justify-content:flex-end; margin-top:12px; }
    #disd-copiar{
      min-height:42px;
      padding:10px 16px;
      border:0;
      border-radius:11px;
      background:#2563eb;
      color:#fff;
      font:800 13px/1 inherit;
      cursor:pointer;
      box-shadow:0 6px 16px rgba(37,99,235,.25);
    }
    #disd-copiar.copiado{ background:#16a34a; }
    @media (max-width:700px){
      #btn-dev-image-debug{ width:136px; margin:0; min-height:42px; padding:8px 7px; }
      #dev-image-scale-debug{ padding:14px; }
      .disd-grade{ grid-template-columns:repeat(2,minmax(0,1fr)); }
      .disd-topo{ align-items:flex-start; }
      .disd-nome{ max-width:calc(100% - 44px); }
      .disd-acoes{ justify-content:stretch; }
      #disd-copiar{ width:100%; }
    }

    /* ===== COLUNA DO CONSTRUTOR DE VIAS ===== */
    #via-sidebar{
      width:332px;
      min-width:332px;
      max-width:332px;
      box-sizing:border-box;
      max-height:100%;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:flex-start;
      gap:18px;
      padding:16px;
      border-left:1px solid var(--line);
      background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
      overflow-y:auto;
      overflow-x:hidden;
      box-sizing:border-box;
    }

    /* Histórico sempre acessível no topo da coluna direita do computador. */
    #historico-desktop{
      position:sticky;
      top:0;
      z-index:12;
      width:100%;
      box-sizing:border-box;
      padding:12px;
      border:1px solid #dbe4f2;
      border-radius:14px;
      background:rgba(255,255,255,.97);
      box-shadow:0 8px 22px rgba(15,23,42,.08);
      flex:0 0 auto;
    }
    .hd-cabecalho{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-bottom:9px;
    }
    .hd-titulo{ font-size:13px; font-weight:850; color:#0f172a; }
    #hd-status{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      color:#64748b;
      font-size:9.5px;
      text-align:right;
    }
    .hd-acoes{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:7px;
    }
    #historico-desktop button{
      min-width:0;
      min-height:38px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      padding:8px 7px;
      border:1px solid #cbd5e1;
      border-radius:10px;
      background:#f8fafc;
      color:#334155;
      font-size:11px;
      font-weight:800;
      cursor:pointer;
    }
    #historico-desktop button:hover:not(:disabled){
      border-color:#93c5fd;
      background:#eff6ff;
      color:#1d4ed8;
    }
    #historico-desktop button:disabled{ opacity:.42; cursor:default; }
    #hd-rascunho{
      grid-column:1/-1;
      background:#fff !important;
      color:#475569 !important;
    }
    .hd-ico{ font-size:16px; line-height:1; }
    #atalhos-desktop{ display:none; }

    /* ===== MENUS DESKTOP — acabamento visual unificado =====
       As regras ficam isoladas acima de 820 px para não alterar a
       experiência móvel, que possui navegação e painéis próprios. */
    @media (min-width:821px){
      /* O aviso antigo continua no DOM como controlador dos rascunhos
         local e em nuvem, mas sua interface foi substituída pelo cartão
         de Histórico na coluna direita. */
      #autosave-restore-bar{ display:none !important; }

      #toolbar{
        padding:16px 15px 20px;
        gap:12px;
        background:
          radial-gradient(circle at 0 0,rgba(37,99,235,.075),transparent 240px),
          linear-gradient(180deg,#fbfdff 0%,#f5f8fc 100%);
        border-right:1px solid #dbe4f0;
        box-shadow:8px 0 28px rgba(15,23,42,.055);
        scrollbar-width:thin;
        scrollbar-color:#cbd5e1 transparent;
      }
      #toolbar::-webkit-scrollbar,#via-sidebar::-webkit-scrollbar{ width:7px; }
      #toolbar::-webkit-scrollbar-thumb,#via-sidebar::-webkit-scrollbar-thumb{
        background:#cbd5e1;
        border-radius:999px;
        border:2px solid transparent;
        background-clip:padding-box;
      }

      .tabs{
        gap:7px;
        padding:6px;
        margin-bottom:2px;
        border:1px solid rgba(148,163,184,.28);
        border-radius:18px;
        background:rgba(226,232,240,.72);
        box-shadow:inset 0 1px 2px rgba(15,23,42,.05),0 8px 20px rgba(15,23,42,.045);
        backdrop-filter:blur(10px);
      }
      #toolbar .tab-btn,.tab-btn{
        min-height:46px;
        padding:9px 10px !important;
        border-radius:13px;
        background:rgba(255,255,255,.92) !important;
        box-shadow:0 2px 5px rgba(15,23,42,.055) !important;
      }
      #toolbar .tab-btn:hover,.tab-btn:hover{
        background:#fff !important;
        box-shadow:0 7px 16px rgba(37,99,235,.13) !important;
        transform:translateY(-1px) !important;
      }
      #toolbar .tab-btn.active,.tab-btn.active{
        background:linear-gradient(145deg,#2f6ff1,#1d4ed8) !important;
        box-shadow:0 8px 18px rgba(37,99,235,.28) !important;
        transform:none !important;
      }
      .tab-btn .tb-ico{
        display:grid;
        place-items:center;
        width:25px;
        height:25px;
        border-radius:8px;
        background:#eff6ff;
        font-size:14px;
      }
      .tab-btn.active .tb-ico{ background:rgba(255,255,255,.17); }

      .tab-pane.active{ animation:menuDesktopEntrada .18s ease-out; }
      @keyframes menuDesktopEntrada{
        from{ opacity:.45; transform:translateY(4px); }
        to{ opacity:1; transform:translateY(0); }
      }
      .tool-section{
        padding:12px;
        margin-bottom:10px;
        border:1px solid rgba(203,213,225,.72);
        border-radius:16px;
        background:rgba(255,255,255,.88);
        box-shadow:0 5px 15px rgba(15,23,42,.045);
        transition:border-color .15s,box-shadow .15s,transform .15s;
      }
      .tool-section:hover{
        border-color:#bfdbfe;
        box-shadow:0 9px 22px rgba(37,99,235,.075);
      }
      #toolbar .tool-section h3.section-head{
        margin-bottom:10px !important;
        padding-bottom:9px !important;
        color:#334155;
        font-size:10.5px;
        letter-spacing:.075em;
        border-bottom-color:#e8eef6;
      }
      #toolbar .tool-section h3.section-head::before{
        content:'';
        width:7px;
        height:7px;
        border-radius:50%;
        background:linear-gradient(145deg,#60a5fa,#2563eb);
        box-shadow:0 0 0 4px #eff6ff;
        flex:0 0 auto;
      }
      #toolbar .section-body{
        display:flex !important;
        flex-wrap:wrap;
        gap:8px !important;
        align-items:center;
      }
      #toolbar .section-body > button{
        width:auto;
        min-height:0;
        padding:9px 13px !important;
        border-radius:10px !important;
        line-height:1.25;
      }

      #via-sidebar{
        align-items:stretch;
        gap:12px;
        padding:16px 14px 20px;
        background:
          radial-gradient(circle at 100% 0,rgba(37,99,235,.07),transparent 230px),
          linear-gradient(180deg,#fbfdff 0%,#f5f8fc 100%);
        border-left:1px solid #dbe4f0;
        box-shadow:-8px 0 28px rgba(15,23,42,.045);
        scrollbar-width:thin;
        scrollbar-color:#cbd5e1 transparent;
      }
      #historico-desktop{
        top:0;
        padding:14px;
        border:1px solid rgba(191,219,254,.92);
        border-radius:18px;
        background:
          radial-gradient(circle at 100% 0,rgba(96,165,250,.16),transparent 145px),
          rgba(255,255,255,.97);
        box-shadow:0 10px 28px rgba(30,64,175,.10);
      }
      .hd-cabecalho{ align-items:flex-start; margin-bottom:12px; }
      .hd-titulo{
        display:flex;
        align-items:center;
        gap:8px;
        font-size:13.5px;
        letter-spacing:-.01em;
      }
      .hd-titulo::before{
        content:'↶';
        display:grid;
        place-items:center;
        width:27px;
        height:27px;
        border-radius:9px;
        color:#1d4ed8;
        background:#dbeafe;
        font-size:16px;
      }
      #hd-status{
        max-width:128px;
        padding-top:2px;
        font-size:9px;
        line-height:1.25;
        white-space:normal;
      }
      .hd-acoes{ gap:8px; }
      #historico-desktop button{
        min-height:42px;
        border-color:#dbe4f0;
        border-radius:12px;
        background:rgba(248,250,252,.94);
        box-shadow:0 2px 5px rgba(15,23,42,.035);
        transition:transform .12s,border-color .12s,box-shadow .12s,background .12s;
      }
      #historico-desktop button:hover:not(:disabled){
        transform:translateY(-1px);
        box-shadow:0 7px 15px rgba(37,99,235,.12);
      }
      #historico-desktop button:disabled{ opacity:.5; filter:saturate(.55); }
      #hd-rascunho{
        justify-content:flex-start !important;
        padding-left:13px !important;
        border-color:#bfdbfe !important;
        background:linear-gradient(180deg,#f8fbff,#eff6ff) !important;
        color:#1e40af !important;
      }
      #historico-desktop #hd-rascunho:not(:disabled){
        min-height:66px;
        gap:11px;
        padding:12px 13px !important;
        border:2px solid #f59e0b !important;
        background:linear-gradient(135deg,#fff7d6,#ffedb5) !important;
        color:#78350f !important;
        box-shadow:0 4px 12px rgba(180,83,9,.15);
        text-align:left;
      }
      #historico-desktop #hd-rascunho:not(:disabled) .hd-ico{
        display:grid;
        place-items:center;
        flex:0 0 32px;
        height:32px;
        border-radius:10px;
        background:#f59e0b;
        color:#fff;
        font-size:22px;
      }
      #historico-desktop #hd-rascunho:not(:disabled) span:last-child{
        font-size:13px;
        line-height:1.35;
      }
      #historico-desktop #hd-rascunho:not(:disabled) span:last-child::after{
        content:'Seu croqui salvo está aqui';
        display:block;
        margin-top:3px;
        font-size:11px;
        font-weight:500;
      }
      #historico-desktop #hd-rascunho:hover:not(:disabled){
        border-color:#d97706 !important;
        background:#ffe7a0 !important;
      }
      #historico-desktop #hd-rascunho:focus-visible{
        outline:3px solid #2563eb;
        outline-offset:3px;
      }
      #atalhos-desktop{
        display:block;
        width:100%;
        padding:13px;
        border:1px solid rgba(203,213,225,.78);
        border-radius:18px;
        background:rgba(255,255,255,.92);
        box-shadow:0 8px 22px rgba(15,23,42,.065);
      }
      /* A seleção precisa de toda a coluna para seus ajustes. Vale para
         vias, imagens, sinalizações e qualquer outro objeto do canvas. */
      body.selecao-canvas-ativa #via-sidebar #atalhos-desktop{ display:none; }
      #toolbar > #atalhos-desktop{flex-shrink:0;margin:12px 0;}
      .ad-cabecalho{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:8px;
        margin-bottom:10px;
      }
      .ad-titulo{
        font-size:12.5px;
        font-weight:850;
        color:#0f172a;
      }
      .ad-dica{
        color:#94a3b8;
        font-size:9px;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.06em;
      }
      .ad-grade{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
      }
      #atalhos-desktop .ad-bt{
        position:relative;
        overflow:hidden;
        min-width:0;
        min-height:88px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:2px;
        padding:6px 4px 4px;
        border:1px solid #dbe4f0;
        border-radius:13px;
        background:linear-gradient(180deg,#fff,#f8fafc);
        color:#334155;
        font-family:inherit;
        font-size:10.5px;
        font-weight:800;
        line-height:1.15;
        cursor:pointer;
        box-shadow:0 2px 5px rgba(15,23,42,.04);
        transition:transform .12s,border-color .12s,box-shadow .12s,color .12s;
      }
      #atalhos-desktop .ad-bt:hover{
        transform:translateY(-2px);
        border-color:#93c5fd;
        color:#1d4ed8;
        box-shadow:0 8px 18px rgba(37,99,235,.13);
      }
      #atalhos-desktop .ad-bt:active{ transform:translateY(0) scale(.98); }
      .ad-ico{
        width:37px;
        height:37px;
        display:grid;
        place-items:center;
        border-radius:12px;
        background:#eff6ff center/cover no-repeat;
        color:#1d4ed8;
        font-size:20px;
        box-shadow:inset 0 0 0 1px #dbeafe;
      }
      .ad-ico.com-img .ad-emoji{ display:none; }
      #atalhos-desktop .ad-bt .ad-ico{
        position:static;
        inset:auto;
        width:56px;
        height:56px;
        flex:0 0 56px;
        border-radius:0;
        background-color:transparent;
        background-size:contain;
        font-size:30px;
        box-shadow:none;
      }
      #atalhos-desktop .ad-bt > span:last-child{
        position:static;
        padding:0;
        background:none;
        color:#1e293b;
        text-align:center;
        font-size:10px;
        line-height:1.15;
      }
      #via-construtor.on,#obj-options-slot > *{
        border-radius:18px !important;
        box-shadow:0 10px 25px rgba(15,23,42,.075) !important;
      }
    }

    /* Banner do celular: canto inferior esquerdo, acima do menu.
       Escondido no desktop, onde a coluna lateral dá conta. */
    /* Faixa no topo do quadro, largura da tela. O retângulo no
       rodapé disputava espaço com as ferramentas e encurtava o
       canvas justamente onde o desenho acontece. */
    #banner-mobile{
      display:none;
      position:relative;
      left:auto; bottom:auto;
      width:100%;
      max-width:100%;
      /* Altura fixa: sem ela, cada troca de anúncio mudava o
         tamanho do bloco e o quadro era recalculado, o que
         fazia o canvas piscar a cada rotação. */
      height:56px;
      margin:0 0 4px;
      z-index:2;
      border-radius:9px;
      overflow:hidden;
      background:#fff;
      box-shadow:0 2px 8px rgba(2,6,23,.14);
    }
    #banner-mobile img{
      display:block;
      width:100%;
      height:100%;
      /* Peça 300x250 vira faixa sem esticar: a imagem se encaixa
         na altura fixa mantendo a proporção */
      object-fit:contain;
      background:#fff;
      border-radius:9px;
    }
    /* Com a gaveta aberta ele sai da frente */
    body.menu-aberto #banner-mobile{ display:none !important; }

    /* Banner próprio — substitui o AdSense quando ativado */
    .banner-slot{
      display:none;
      position:relative;
      border-radius:10px;
      overflow:hidden;
      flex-shrink:0;
    }
    .banner-slot.on{ display:block; }
    .banner-slot a, .banner-slot .bn-fixo{
      display:block;
      line-height:0;
    }
    .banner-slot img{
      display:block;
      width:100%;
      height:auto;
      border-radius:10px;
    }
    .banner-slot a:hover img{ filter:brightness(1.04); }
    /* Selo discreto, exigido para o usuário saber que é publicidade */

    /* Moldura reservada para cada anúncio */
    /* Nenhum anúncio pode ultrapassar a coluna */
    #ad-sidebar > *{ max-width:100%; }
    #ad-sidebar ins, #ad-sidebar iframe, #ad-sidebar img{
      max-width:100% !important;
    }

    .ad-slot{
      position:relative;
      border:1.5px dashed #cfd6e4;
      border-radius:12px;
      background:
        repeating-linear-gradient(
          45deg,
          #fbfcff, #fbfcff 8px,
          #f5f7fc 8px, #f5f7fc 16px
        );
      display:flex;
      align-items:center;
      justify-content:center;
      box-sizing:content-box;
      padding:0;
      flex-shrink:0;
    }
    /* Tamanhos exatos reservados */
    .ad-slot.size-300x250{ width:300px; height:250px; }

    /* Etiqueta no topo da moldura */
    .ad-slot::before{
      content: attr(data-label);
      position:absolute;
      top:-8px; left:50%;
      transform:translateX(-50%);
      background:#fff;
      padding:1px 9px;
      font-size:9px;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:#94a3b8;
      border:1px solid #e2e8f0;
      border-radius:999px;
      white-space:nowrap;
      z-index:1;
    }
    /* Medida no rodapé da moldura */
    .ad-slot::after{
      content: attr(data-size);
      position:absolute;
      bottom:-7px; left:50%;
      transform:translateX(-50%);
      background:#fff;
      padding:0 7px;
      font-size:9px;
      font-weight:600;
      color:#cbd5e1;
      white-space:nowrap;
      z-index:1;
    }
    /* O ins do AdSense preenche a moldura */
    .ad-slot ins.adsbygoogle{
      display:block !important;
      margin:0 auto;
    }
    /* Sem anúncio disponível: esconde o ins colapsado, mantém a moldura */
    .ad-slot.ad-unfilled ins.adsbygoogle{ display:none !important; }

    /* Anúncio realmente carregado: some a moldura e as etiquetas */
    .ad-slot.ad-loaded{
      border-color:transparent;
      background:none;
    }
    .ad-slot.ad-loaded::before,
    .ad-slot.ad-loaded::after{ display:none; }

    /* ===== GRID DE ÍCONES DAS FERRAMENTAS ===== */
    
    .tool-icon-btn{
      border:1px solid #d6dae3 !important;
      border-radius:10px;
      background:#f7f8fb !important;
      color:#374151 !important;
      cursor:pointer;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:flex-start;
      min-height:76px;
      gap:0;
      overflow:hidden;
      padding:0 !important;
      position:relative;
      text-align:center;
      transform:none !important;
      transition:box-shadow .08s, border-color .08s, opacity .12s;
    }
    /* Área da imagem — sempre quadrada */
    .tool-icon-btn img{
      width:50px;
      height:50px;
      object-fit:contain;
      pointer-events:none;
      display:block;
      margin:5px auto 2px;
      padding:0;
      box-sizing:border-box;
    }
    /* Faixa de legenda separada, abaixo da imagem */
    .tool-icon-btn .icon-caption{
      display:block;
      width:100%;
      font-size:9px;
      font-weight:700;
      line-height:1.3;
      padding:3px 2px;
      background:#eef2f7;
      color:#0f172a;
      border-top:1px solid #dde3ec;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      pointer-events:none;
      box-sizing:border-box;
    }
    .tool-icon-btn.active .icon-caption{
      background:rgba(255,255,255,.18);
      color:#fff;
      border-top-color:rgba(255,255,255,.28);
    }
    /* Estado de arraste */
    .tool-icon-btn.dragging{ opacity:.4; }
    
    .tool-icon-btn:hover{
      border-color:#cfe0ff !important;
      box-shadow:0 4px 12px rgba(37,99,235,.12) !important;
    }
    .tool-icon-btn.active{
      border-color:#1e40af !important;
      box-shadow:0 4px 14px rgba(37,99,235,.25) !important;
      background:linear-gradient(180deg,#2563eb,#1d4ed8) !important;
      color:#fff !important;
    }
    /* Tooltip */
    .tool-icon-btn::after{
      content:attr(data-tip);
      position:absolute;
      bottom:calc(100% + 6px);
      left:50%; transform:translateX(-50%);
      background:#0f172a; color:#fff;
      font-size:11px; font-weight:600;
      white-space:nowrap; padding:4px 8px;
      border-radius:6px; pointer-events:none;
      opacity:0; transition:opacity .12s; z-index:999;
    }
    .tool-icon-btn:hover::after{ opacity:1; }

    /* No desktop há área suficiente para dar um pouco mais de presença
       aos ícones; o celular preserva a escala compacta atual. */
    @media (min-width:821px){
      .tool-icon-btn{ min-height:82px; }
      .tool-icon-btn img{ width:56px; height:56px; }
    }

    /* ===== MODAL RECUPERAR SENHA ===== */
    #modal-recuperar-backdrop{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(2,6,23,.45);
      z-index:999;
      align-items:center;
      justify-content:center;
    }
    #modal-recuperar-backdrop.open{ display:flex; }
    #modal-recuperar{
      background:#fff;
      border-radius:18px;
      box-shadow:0 24px 60px rgba(2,6,23,.22);
      padding:28px 24px 22px;
      width:min(92vw, 380px);
      display:flex;
      flex-direction:column;
      gap:14px;
      position:relative;
    }
    #modal-recuperar h2{ font-size:17px; font-weight:800; color:#0f172a; margin:0; }
    #modal-recuperar p{ font-size:12px; color:#64748b; margin:0; margin-top:-8px; line-height:1.5; }
    #btn-enviar-recuperar{
      padding:11px;
      border:none;
      border-radius:10px;
      background:linear-gradient(180deg,#2563eb,#1d4ed8);
      color:#fff;
      font-size:13px;
      font-weight:700;
      cursor:pointer;
      box-shadow:0 6px 14px rgba(37,99,235,.22);
      width:100%;
    }
    #btn-enviar-recuperar:hover{ filter:brightness(1.05); }
    #btn-enviar-recuperar:disabled{ opacity:.6; cursor:not-allowed; filter:none; }
    #btn-fechar-recuperar{
      position:absolute; top:12px; right:14px;
      background:none; border:none;
      font-size:18px; color:#94a3b8; cursor:pointer;
      padding:4px 6px; border-radius:6px;
    }
    #btn-fechar-recuperar:hover{ background:#f1f5f9; color:#0f172a; }

    /* ===== BOTÃO BAIXAR IMAGEM (na barra do quadro) ===== */
    #action-save-png{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      height:38px;
      padding:0 22px;
      border:none;
      border-radius:10px;
      /* Laranja: destaca da interface azul e puxa o olho para a ação */
      background:linear-gradient(180deg,#f97316,#ea580c);
      color:#fff;
      font-family:inherit;
      font-size:13px;
      font-weight:800;
      letter-spacing:.015em;
      cursor:pointer;
      white-space:nowrap;
      box-shadow:0 4px 14px rgba(234,88,12,.34);
      transition:transform .12s, box-shadow .12s, filter .12s;
      position:relative;
      overflow:hidden;
    }
    #action-save-png:hover{
      transform:translateY(-1px);
      filter:brightness(1.06);
      box-shadow:0 7px 20px rgba(234,88,12,.44);
    }
    #action-save-png:active{
      transform:translateY(0);
      box-shadow:0 3px 10px rgba(234,88,12,.34);
    }
    #action-save-png .dl-ico{ font-size:15px; line-height:1; pointer-events:none; }
    #action-save-png .dl-txt{ pointer-events:none; }
    #action-professional{
      display:flex; align-items:center; justify-content:center; gap:7px;
      min-height:38px; padding:0 14px; border:1px solid #b9922b;
      border-radius:10px; background:linear-gradient(180deg,#fff7d6,#f6df91);
      color:#59410b; font-size:12px; font-weight:800; cursor:pointer;
      box-shadow:0 3px 10px rgba(146,105,12,.16); white-space:nowrap;
    }
    #action-professional:hover{ filter:brightness(1.03); transform:translateY(-1px); }
    
    

    /* ===== MODO CROQUI PROFISSIONAL ===== */
    #modal-prof-backdrop{
      display:none; position:fixed; inset:0; z-index:1550; padding:18px;
      background:rgba(2,6,23,.64); backdrop-filter:blur(3px);
      align-items:center; justify-content:center;
    }
    #modal-prof-backdrop.open{ display:flex; }
    #modal-prof{
      width:min(94vw,560px); max-height:90vh; overflow:auto; box-sizing:border-box;
      border-radius:20px; padding:23px; background:#fff;
      box-shadow:0 28px 70px rgba(2,6,23,.35); position:relative;
    }
    #btn-fechar-prof{ position:absolute; right:13px; top:11px; border:0; background:transparent; color:#64748b; font-size:20px; cursor:pointer; }
    .prof-titulo{ display:flex; gap:11px; align-items:center; padding-right:25px; }
    .prof-titulo .prof-selo{ width:37px; height:37px; border-radius:11px; display:grid; place-items:center; background:#eff6ff; font-size:21px; }
    .prof-titulo h2{ margin:0; color:#0f2742; font-size:20px; }
    .prof-titulo p{ margin:3px 0 0; color:#64748b; font-size:12px; line-height:1.4; }
    .prof-campos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0 12px; }
    .prof-campo{ display:flex; flex-direction:column; gap:5px; }
    .prof-campo.prof-largo{ grid-column:1/-1; }
    .prof-campo label{ color:#475569; font-size:11px; font-weight:800; }
    .prof-campo input,.prof-campo textarea,.prof-campo select{ box-sizing:border-box; width:100%; border:1px solid #d7deea; border-radius:9px; padding:9px 10px; font:inherit; font-size:13px; color:#1e293b; outline:none; background:#fff; }
    .prof-campo textarea{ min-height:62px; resize:vertical; }
    .prof-campo input:focus,.prof-campo textarea:focus,.prof-campo select:focus{ border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.12); }
    .prof-opcoes{ display:flex; flex-wrap:wrap; gap:8px; padding:11px; border-radius:10px; background:#f8fafc; border:1px solid #e5eaf2; }
    .prof-opcoes label{ display:flex; align-items:center; gap:5px; color:#475569; font-size:12px; font-weight:700; cursor:pointer; }
    #btn-gerar-prof{ flex:1; border:0; border-radius:10px; padding:12px; margin-top:15px; cursor:pointer; color:#fff; font-size:13px; font-weight:800; background:linear-gradient(180deg,#1672c8,#075ca8); box-shadow:0 5px 14px rgba(7,92,168,.26); }
    #btn-gerar-prof:hover{ filter:brightness(1.06); }
    .prof-aviso{ margin:11px 0 0; color:#64748b; font-size:11px; text-align:center; }

    /* Brilho passando de tempos em tempos, para chamar atenção */
    #action-save-png::after{
      content:'';
      position:absolute;
      top:0; left:-60%;
      width:45%; height:100%;
      background:linear-gradient(100deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.34) 50%,
        rgba(255,255,255,0) 100%);
      transform:skewX(-18deg);
      animation:dlBrilho 4.5s ease-in-out infinite;
      pointer-events:none;
    }
    @keyframes dlBrilho{
      0%, 62%  { left:-60%; }
      82%, 100%{ left:120%; }
    }

    /* ===== RUA CURVA ===== */
    #curve-bar{
      display:none;
      flex-direction:column;
      gap:7px;
      margin-top:8px;
      padding:10px;
      border:1px solid #dbeafe;
      border-radius:12px;
      background:linear-gradient(180deg,#f8fbff 0%,#eff6ff 100%);
    }
    #curve-bar .curve-title{
      font-size:11px;
      font-weight:800;
      color:#1d4ed8;
      text-transform:uppercase;
      letter-spacing:.04em;
      display:flex;
      align-items:center;
      justify-content:space-between;
    }
    #curve-bar #curve-points-info{
      font-size:10px;
      font-weight:700;
      color:#2563eb;
      background:#dbeafe;
      padding:2px 7px;
      border-radius:999px;
      text-transform:none;
      letter-spacing:0;
    }
    #curve-bar .curve-row{
      display:flex;
      align-items:center;
      gap:8px;
    }
    #curve-bar .curve-row label{
      font-size:11px;
      font-weight:700;
      color:#475569;
      min-width:62px;
    }
    #curve-bar select,
    #curve-bar input[type="range"]{
      flex:1;
      outline:none;
    }
    #curve-bar select{
      padding:6px 8px;
      border:1px solid #bfdbfe;
      border-radius:8px;
      background:#fff;
      font-size:11px;
      font-weight:600;
      color:#334155;
      cursor:pointer;
    }
    /* ===== TOM DA VIA (dentro dos ajustes) ===== */
    #faixa-bar .tom-bloco{
      display:flex;
      flex-direction:column;
      gap:6px;
      padding-bottom:9px;
      margin-bottom:2px;
      border-bottom:1px solid #dbeafe;
    }
    #faixa-bar .tom-rot{
      font-size:11px;
      font-weight:700;
      color:#475569;
    }
    #faixa-bar .faixa-sub{
      font-size:11px;
      font-weight:700;
      color:#475569;
      margin-top:3px;
    }
    #faixa-bar .tom-opcoes{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:7px;
    }
    #toolbar #faixa-bar .tom-op,
    #faixa-bar .tom-op{
      display:flex !important;
      align-items:center;
      gap:8px;
      padding:8px 10px !important;
      border:1.5px solid #e2e8f0 !important;
      border-radius:10px;
      background:#fff !important;
      cursor:pointer;
      text-align:left !important;
      transform:none !important;
      box-shadow:none !important;
      transition:border-color .12s, background .12s;
    }
    #faixa-bar .tom-op:hover{
      border-color:#bfdbfe !important;
      background:#f5f9ff !important;
    }
    #faixa-bar .tom-op.sel{
      border-color:#2563eb !important;
      background:#eff6ff !important;
    }
    #faixa-bar .tom-amostra{
      width:22px; height:22px;
      border-radius:6px;
      border:1px solid rgba(0,0,0,.15);
      flex-shrink:0;
    }
    #faixa-bar .tom-nome{
      font-size:11.5px;
      font-weight:700;
      color:#475569;
    }
    #faixa-bar .tom-op.sel .tom-nome{ color:#1d4ed8; }

    /* ===== NÍVEL DA VIA / VIADUTO ===== */
    #faixa-bar .nivel-via-bloco{
      display:flex;
      flex-direction:column;
      gap:6px;
      padding:8px 0 10px;
      border-bottom:1px solid #dbeafe;
    }
    #faixa-bar .nivel-via-topo{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
    }
    #faixa-bar .nivel-via-titulo{
      font-size:11px;
      font-weight:800;
      color:#475569;
    }
    #faixa-bar .nivel-via-badge{
      padding:2px 7px;
      border-radius:999px;
      background:#e2e8f0;
      color:#475569;
      font-size:8.5px;
      font-weight:850;
    }
    #faixa-bar .nivel-via-opcoes{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:7px;
    }
    #toolbar #faixa-bar .nivel-via-op,
    #faixa-bar .nivel-via-op{
      min-height:38px;
      padding:7px 8px !important;
      border:1.5px solid #cbd5e1 !important;
      border-radius:9px;
      background:#fff !important;
      color:#475569 !important;
      font-size:10.5px !important;
      font-weight:800 !important;
      text-align:center !important;
      box-shadow:none !important;
      transform:none !important;
    }
    #faixa-bar .nivel-via-op.sel{
      border-color:#7c3aed !important;
      background:#f5f3ff !important;
      color:#6d28d9 !important;
    }
    #faixa-bar .nivel-via-ajuda{
      font-size:9.5px;
      line-height:1.4;
      color:#64748b;
    }

    /* ===== SINALIZAÇÃO SOBRE A VIA ===== */
    #faixa-bar{
      display:none;
      flex-direction:column;
      gap:7px;
      margin-top:8px;
      padding:10px;
      border:1px solid #dbeafe;
      border-radius:12px;
      background:linear-gradient(180deg,#f8fbff,#eff6ff);
    }
    #faixa-bar .faixa-titulo{
      font-size:11px;
      font-weight:800;
      color:#1d4ed8;
      text-transform:uppercase;
      letter-spacing:.04em;
    }
    #faixa-bar .faixa-row{
      display:flex;
      align-items:center;
      gap:8px;
    }
    #faixa-bar .faixa-row label{
      font-size:11px;
      font-weight:700;
      color:#475569;
      min-width:56px;
    }
    #faixa-bar select{
      flex:1;
      padding:6px 8px;
      border:1px solid #bfdbfe;
      border-radius:8px;
      background:#fff;
      font-size:11px;
      font-weight:600;
      color:#334155;
      cursor:pointer;
      outline:none;
      font-family:inherit;
    }
    #toolbar #btn-gerar-faixa,
    #btn-gerar-faixa{
      width:100%;
      padding:9px !important;
      border:none !important;
      border-radius:9px;
      background:linear-gradient(180deg,#2563eb,#1d4ed8) !important;
      color:#fff !important;
      font-size:11.5px;
      font-weight:700;
      cursor:pointer;
      text-align:center !important;
      transform:none !important;
      box-shadow:0 3px 9px rgba(37,99,235,.25) !important;
      margin-top:2px;
    }
    #btn-gerar-faixa:hover{ filter:brightness(1.06); }
    #toolbar #btn-desfazer-faixa,
    #btn-desfazer-faixa{
      width:100%;
      padding:8px !important;
      border:1px solid #bfdbfe !important;
      border-radius:9px;
      background:#fff !important;
      color:#1d4ed8 !important;
      font-size:11.5px !important;
      font-weight:800 !important;
      text-align:center !important;
      transform:none !important;
      box-shadow:none !important;
    }
    #btn-desfazer-faixa:hover:not(:disabled){ background:#eff6ff !important; }
    #btn-desfazer-faixa:disabled{
      opacity:.48;
      cursor:not-allowed !important;
    }
    #faixa-bar .faixa-inteligente{
      padding:7px 9px;
      border-radius:8px;
      background:#ecfdf5;
      color:#047857;
      font-size:10.5px;
      font-weight:700;
      line-height:1.4;
    }
    #faixa-bar .nos-inteligentes{
      padding:7px 9px;
      border-radius:8px;
      background:#eff6ff;
      border:1px solid #bfdbfe;
      color:#1d4ed8;
      font-size:10.5px;
      font-weight:700;
      line-height:1.4;
    }
    #toolbar #btn-editar-nos-via,
    #btn-editar-nos-via{
      width:100%;
      padding:9px !important;
      border:1px solid #7dd3fc !important;
      border-radius:9px;
      background:#f0f9ff !important;
      color:#0369a1 !important;
      font-size:11.5px !important;
      font-weight:800 !important;
      text-align:center !important;
      transform:none !important;
      box-shadow:none !important;
    }
    #btn-editar-nos-via:hover{ background:#e0f2fe !important; }
    #faixa-bar .faixa-aviso{
      display:none;
      font-size:10.5px;
      color:#92400e;
      background:#fffbeb;
      border:1px solid #fcd34d;
      border-radius:9px;
      padding:8px 10px;
      line-height:1.5;
    }
    #curve-bar .curve-hint{
      font-size:10px;
      color:#64748b;
      line-height:1.45;
      border-top:1px solid #dbeafe;
      padding-top:6px;
    }

    /* ===== CAMADAS ===== */
    #layer-bar{
      display:flex;
      flex-direction:column;
      gap:6px;
      margin-top:8px;
      padding:10px;
      border:1px solid #e7eaf3;
      border-radius:12px;
      background:linear-gradient(180deg,#fff 0%,#fafbff 100%);
    }
    
    #layer-bar #layer-info{
      font-weight:700;
      color:#2563eb;
      font-size:10px;
      text-transform:none;
      letter-spacing:0;
      background:#eff6ff;
      padding:2px 7px;
      border-radius:999px;
    }
    #layer-bar #layer-info:empty{ display:none; }
    #layer-bar .layer-btns{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:5px;
    }
    #toolbar #layer-bar .layer-btns button,
    #layer-bar .layer-btns button{
      display:flex !important;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:2px;
      padding:8px 3px !important;
      border:1px solid #d6dae3 !important;
      border-radius:9px;
      background:#fff !important;
      color:#475569 !important;
      cursor:pointer;
      text-align:center !important;
      transform:none !important;
      box-shadow:none !important;
      transition:background .1s, border-color .1s, color .1s;
    }
    
    
    #layer-bar .layer-btns button:hover{
      background:#eff6ff !important;
      border-color:#93c5fd !important;
      color:#1d4ed8 !important;
    }
    #layer-bar .layer-btns button:active{
      background:#dbeafe !important;
      border-color:#60a5fa !important;
    }
    #layer-bar .layer-btns #btn-layer-front,
    #layer-bar .layer-btns #btn-layer-back{
      background:#f8fafc !important;
    }

    /* ===== TRAVAR OBJETOS ===== */
    #lock-bar{
      display:flex;
      align-items:center;
      gap:6px;
      flex-wrap:wrap;
      min-height:0;
      margin-top:6px;
    }
    #toolbar #btn-toggle-lock,
    #btn-toggle-lock{
      padding:8px 12px !important;
      border:1px solid #cbd5e1 !important;
      border-radius:9px;
      background:#f8fafc !important;
      color:#334155 !important;
      font-size:12px;
      font-weight:700;
      cursor:pointer;
      text-align:center !important;
      transform:none !important;
      box-shadow:none !important;
      flex:1;
    }
    #btn-toggle-lock:hover{ background:#f1f5f9 !important; border-color:#94a3b8 !important; }
    #btn-toggle-lock.locked{
      background:#fef3c7 !important;
      border-color:#fcd34d !important;
      color:#92400e !important;
    }
    #btn-toggle-lock.locked:hover{ background:#fde68a !important; }
    #toolbar #btn-unlock-all,
    #btn-unlock-all{
      padding:7px 10px !important;
      border:1px solid #e2e8f0 !important;
      border-radius:9px;
      background:#fff !important;
      color:#64748b !important;
      font-size:11px;
      font-weight:600;
      cursor:pointer;
      text-align:center !important;
      transform:none !important;
      box-shadow:none !important;
      white-space:nowrap;
    }
    #btn-unlock-all:hover{ background:#f8fafc !important; color:#0f172a !important; }
    #lock-count{
      font-size:11px;
      color:#b45309;
      font-weight:700;
      display:none;
      white-space:nowrap;
    }

    /* ===== AUTOSAVE ===== */
    #autosave-restore-bar{
      display:none;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      background:linear-gradient(180deg,#fffbeb,#fef3c7);
      border:1px solid #fcd34d;
      border-radius:12px;
      font-size:12px;
      color:#78350f;
      margin-bottom:10px;
      flex-wrap:wrap;
    }
    #autosave-restore-info{ flex:1; min-width:150px; font-weight:600; line-height:1.4; }

    /* Rascunho vindo da conta, não do navegador */
    /* Tarja identificando o rascunho sincronizado */
    #autosave-restore-bar{ position:relative; }
    #autosave-restore-bar .ar-selo{
      display:none;
      position:absolute;
      right:9px; bottom:7px;
      align-items:center; gap:4px;
      background:linear-gradient(180deg,#2563eb,#1d4ed8);
      color:#fff;
      font-size:9px;
      font-weight:800;
      letter-spacing:.04em;
      text-transform:uppercase;
      padding:3px 8px;
      border-radius:999px;
      box-shadow:0 2px 6px rgba(37,99,235,.3);
      pointer-events:none;
    }
    #autosave-restore-bar.nuvem .ar-selo{ display:inline-flex; }
    #autosave-restore-bar .ar-selo img{
      width:10px; height:10px; object-fit:contain;
    }
    /* Espaço para a tarja não encostar nos botões */
    #autosave-restore-bar.nuvem{ padding-bottom:26px; }

    #autosave-restore-bar.nuvem{
      background:linear-gradient(180deg,#eff6ff,#dbeafe);
      border-color:#93c5fd;
      color:#1e3a8a;
    }
    #autosave-restore-bar.nuvem #btn-autosave-restore{
      background:#2563eb !important;
    }
    #autosave-restore-bar.nuvem #btn-autosave-restore:hover{
      background:#1d4ed8 !important;
    }
    #autosave-restore-bar.nuvem #btn-autosave-discard{
      color:#1e40af !important;
      border-color:#93c5fd !important;
    }
    #autosave-restore-bar button{
      border:none !important;
      border-radius:8px;
      font-size:11px;
      font-weight:700;
      cursor:pointer;
      padding:7px 11px !important;
      white-space:nowrap;
      transform:none !important;
      box-shadow:none !important;
    }
    #btn-autosave-restore{
      background:#d97706 !important;
      color:#fff !important;
    }
    #btn-autosave-restore:hover{ background:#b45309 !important; }
    #btn-autosave-discard{
      background:#fff !important;
      color:#92400e !important;
      border:1px solid #fcd34d !important;
    }
    #btn-autosave-discard:hover{ background:#fef3c7 !important; }
    #btn-autosave-close{
      background:transparent !important;
      color:#a16207 !important;
      padding:6px 8px !important;
      font-size:14px !important;
    }
    #autosave-status{
      font-size:11px;
      color:#94a3b8;
      text-align:right;
      padding:2px 4px;
      min-height:15px;
      transition:color .2s;
    }

    /* ===== PAINEL DE ESTATÍSTICAS (DEV) ===== */
    /* ===== ESTATÍSTICAS (DEV) ===== */
    #toolbar #btn-abrir-stats,
    #btn-abrir-stats{
      display:flex !important;
      align-items:center;
      justify-content:center;
      gap:7px;
      width:100%;
      padding:10px !important;
      border:1px solid #d8e0f0 !important;
      border-radius:11px;
      background:linear-gradient(180deg,#fff,#f7f9ff) !important;
      color:#334155 !important;
      font-size:12px;
      font-weight:800;
      cursor:pointer;
      text-align:center !important;
      transform:none !important;
      box-shadow:0 1px 3px rgba(2,6,23,.05) !important;
      transition:background .12s, box-shadow .12s;
    }
    #btn-abrir-stats:hover{
      background:#f0f5ff !important;
      box-shadow:0 3px 9px rgba(37,99,235,.14) !important;
    }
    #btn-abrir-stats .stats-badge{
      font-size:9px;
      font-weight:800;
      background:#fef3c7;
      color:#92400e;
      padding:2px 7px;
      border-radius:999px;
      letter-spacing:.04em;
    }

    /* ===== MODAL DE ESTATÍSTICAS ===== */
    #modal-stats-backdrop{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(2,6,23,.55);
      backdrop-filter:blur(2px);
      z-index:1000;
      align-items:center;
      justify-content:center;
      padding:20px;
    }
    #modal-stats-backdrop.open{ display:flex; }
    #modal-stats{
      background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
      border-radius:20px;
      box-shadow:0 28px 70px rgba(2,6,23,.30);
      border:1px solid rgba(255,255,255,.8);
      padding:0 24px 22px;
      width:min(94vw, 480px);
      max-height:90vh;
      overflow-y:auto;
      position:relative;
    }

    /* Cabeçalho fixo */
    .stats-header{
      position:sticky; top:0;
      background:linear-gradient(180deg,#fff 78%,rgba(255,255,255,.94));
      padding:24px 0 16px;
      margin-bottom:4px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      border-bottom:1px solid #f1f5f9;
      z-index:2;
    }
    .stats-header h2{
      font-size:20px; font-weight:800; color:#0f172a; margin:2px 0 0;
      letter-spacing:-.02em;
    }
    .stats-kicker{
      display:inline-flex; align-items:center; gap:5px;
      font-size:9px; font-weight:800; letter-spacing:.1em;
      text-transform:uppercase; color:#2563eb;
    }
    .stats-kicker::before{
      content:''; width:6px; height:6px; border-radius:50%; background:#22c55e;
      box-shadow:0 0 0 3px rgba(34,197,94,.14);
    }
    #modal-stats-sub{
      font-size:11.5px; color:#94a3b8; margin:3px 0 0;
    }
    #btn-fechar-stats{
      background:#f8fafc; border:1px solid #e2e8f0;
      width:30px; height:30px; flex-shrink:0;
      border-radius:9px;
      font-size:14px; color:#64748b; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      padding:0;
    }
    #btn-fechar-stats:hover{ background:#fee2e2; color:#b91c1c; border-color:#fecaca; }

    /* Card de destaque: usuários */
    .stat-hero{
      display:flex;
      align-items:center;
      gap:14px;
      padding:16px;
      border-radius:14px;
      background:linear-gradient(135deg,#1e40af,#2563eb 55%,#3b82f6);
      color:#fff;
      margin:14px 0 6px;
      box-shadow:0 8px 20px rgba(37,99,235,.28);
    }
    .stat-hero-ico{ font-size:28px; line-height:1; flex-shrink:0; }
    .stat-hero-body{ flex:1; min-width:0; }
    .stat-hero-label{
      font-size:10.5px; font-weight:700; letter-spacing:.06em;
      text-transform:uppercase; opacity:.82;
    }
    .stat-hero-value{ font-size:30px; font-weight:800; line-height:1.1; margin-top:1px; }
    .stat-hero-sub{ font-size:10.5px; opacity:.85; margin-top:3px; line-height:1.35; }
    .stat-hero-live{
      text-align:center; flex-shrink:0;
      background:rgba(255,255,255,.16);
      border-radius:11px; padding:8px 11px;
      font-size:17px; font-weight:800;
      display:flex; flex-direction:column; align-items:center; gap:1px;
    }
    .stat-hero-live small{
      font-size:9px; font-weight:600; opacity:.85; text-transform:uppercase; letter-spacing:.04em;
    }
    .live-dot{
      width:7px; height:7px; border-radius:50%;
      background:#4ade80; display:block;
      box-shadow:0 0 0 0 rgba(74,222,128,.7);
      animation:livePulse 2s infinite;
    }
    @keyframes livePulse{
      0%  { box-shadow:0 0 0 0 rgba(74,222,128,.65); }
      70% { box-shadow:0 0 0 7px rgba(74,222,128,0); }
      100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); }
    }

    /* Títulos de seção */
    /* Quem está online agora, separado por aparelho */
    .stat-disp{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:8px;
      margin:-4px 0 14px;
    }
    .stat-disp .sd-item{
      background:linear-gradient(180deg,#fff,#f8fafc);
      border:1px solid #e7eaf3;
      border-radius:11px;
      padding:10px 8px;
      text-align:center;
      box-shadow:0 2px 5px rgba(15,23,42,.03);
    }
    .stat-disp .sd-ico{ display:block; font-size:15px; line-height:1; }
    .stat-disp .sd-num{
      display:block; font-size:19px; font-weight:800;
      color:#0f172a; line-height:1.15; margin-top:4px;
    }
    .stat-disp .sd-lbl{
      display:block; font-size:9.5px; color:#94a3b8;
      font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    }
    /* Sem tablets, a coluna some e as outras se ajustam */
    .stat-disp.sem-tablet{ grid-template-columns:repeat(2,1fr); }
    .stat-disp.sem-tablet #sd-tablet-box{ display:none; }

    .stats-section-title{
      display:flex; align-items:center; gap:8px;
      font-size:10.5px; font-weight:800; color:#64748b;
      text-transform:uppercase; letter-spacing:.07em;
      margin:20px 0 9px;
    }
    .stats-section-title::after{ content:''; height:1px; flex:1; background:#e7eaf3; }

    /* Grade de cards */
    .stats-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:9px;
    }
    .stat-card{
      position:relative;
      background:#fff;
      border:1px solid #e7eaf3;
      border-radius:13px;
      padding:13px 14px 12px;
      overflow:hidden;
      min-height:102px;
      box-shadow:0 2px 5px rgba(15,23,42,.025);
      transition:box-shadow .14s, transform .1s;
    }
    .stat-card:hover{
      box-shadow:0 6px 16px rgba(2,6,23,.09);
      transform:translateY(-1px);
    }
    /* Faixa colorida na lateral */
    .stat-card::before{
      content:'';
      position:absolute; left:0; top:0; bottom:0;
      width:3px;
    }
    .stat-card.accent-blue::before  { background:linear-gradient(180deg,#3b82f6,#2563eb); }
    .stat-card.accent-green::before { background:linear-gradient(180deg,#22c55e,#16a34a); }
    .stat-card.accent-indigo::before{ background:linear-gradient(180deg,#818cf8,#6366f1); }
    .stat-card.accent-blue { background:linear-gradient(135deg,#fff 48%,#f0f7ff); }
    .stat-card.accent-green{ background:linear-gradient(135deg,#fff 48%,#f0fdf4); }
    .stat-card.accent-indigo{ background:linear-gradient(135deg,#fff 48%,#f5f3ff); }
    .stat-card-wide{ grid-column:1 / -1; }

    .stat-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .stat-card-label{
      font-size:10px; font-weight:800; color:#64748b;
      text-transform:uppercase; letter-spacing:.055em;
    }
    .stat-card-ico{
      display:grid; place-items:center; width:25px; height:25px;
      border-radius:8px; background:rgba(255,255,255,.72); font-size:14px;
    }
    .stat-card-value{
      font-size:25px; font-weight:800; color:#0f172a;
      line-height:1.15; margin-top:8px; letter-spacing:-.02em;
    }
    .stat-card-sub{ font-size:10px; color:#64748b; line-height:1.35; margin-top:3px; }

    .stat-ico{
      position:absolute; top:11px; right:12px;
      font-size:14px; opacity:.28;
    }
    .stat-label{
      font-size:10px; font-weight:700; color:#94a3b8;
      text-transform:uppercase; letter-spacing:.05em;
      padding-right:20px;
    }
    .stat-value{
      font-size:23px; font-weight:800; color:#0f172a;
      line-height:1.15; margin-top:3px;
    }
    .stat-sub{
      font-size:10px; color:#94a3b8; line-height:1.35; margin-top:2px;
    }
    .stat-sub:empty{ display:none; }

    #btn-refresh-stats{
      margin-top:20px;
      width:100%;
      padding:11px;
      border:1px solid #d6dae3;
      border-radius:11px;
      background:#fff;
      font-size:12px;
      font-weight:700;
      color:#475569;
      cursor:pointer;
      font-family:inherit;
      transition:background .12s, transform .12s, box-shadow .12s;
    }
    #btn-refresh-stats:hover{ background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; box-shadow:0 4px 12px rgba(37,99,235,.12); }
    #btn-refresh-stats:active{ transform:translateY(1px); }

    /* ===== PÁGINA EXCLUSIVA DEV ===== */
    #tab-dev{ display:none; }
    #tab-dev.active{ display:block; }

    #dev-page-shell{
      display:none;
      width:min(1180px, calc(100% - 40px));
      margin:24px auto 36px;
    }
    body.dev-page-open #main-row,
    body.dev-page-open #site-footer,
    body.dev-page-open #acoes-mobile,
    body.dev-page-open #btn-menu-mobile,
    body.dev-page-open #btn-desfazer-mobile,
    body.dev-page-open #btn-aplicar-mobile,
    body.dev-page-open #banner-mobile,
    body.dev-page-open #dev-page-shell{ display:block; }
    .dev-page-head{
      display:flex; align-items:center; justify-content:space-between;
      gap:16px; padding:18px 20px; margin-bottom:16px;
      border:1px solid #dbe3f3; border-radius:16px;
      background:linear-gradient(135deg,#f8fbff,#eef4ff);
      box-shadow:0 8px 24px rgba(37,99,235,.10);
    }
    .dev-page-head h1{ margin:0; font-size:21px; color:#0f172a; }
    .dev-page-head p{ margin:4px 0 0; color:#64748b; font-size:12px; }
    #btn-voltar-editor{
      border:1px solid #bfdbfe; border-radius:10px; padding:10px 13px;
      background:#fff; color:#1d4ed8; font:700 12px inherit; cursor:pointer;
      white-space:nowrap;
    }
    #btn-voltar-editor:hover{ background:#eff6ff; }
    #dev-page-content #tab-dev.active{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
    }
    #dev-page-content #tab-dev .dev-section{ margin:0; }
    #dev-page-content #tab-dev .dev-section:nth-child(2),
    #dev-page-content #tab-dev .dev-section:nth-child(4){ grid-column:1 / -1; }
    @media (max-width:820px){
      #dev-page-shell{ width:calc(100% - 24px); margin:12px auto 24px; }
      .dev-page-head{ padding:14px; align-items:flex-start; }
      .dev-page-head h1{ font-size:17px; }
      #dev-page-content #tab-dev.active{ grid-template-columns:1fr; }
      #dev-page-content #tab-dev .dev-section:nth-child(2),
      #dev-page-content #tab-dev .dev-section:nth-child(4){ grid-column:auto; }
    }

    .dev-section{
      border:1px solid #e7eaf3;
      border-radius:12px;
      padding:14px;
      background:#fafbff;
      margin-bottom:10px;
    }
    .dev-section-title{
      font-size:12px;
      font-weight:800;
      color:#0b1220;
      letter-spacing:.2px;
      margin-bottom:10px;
      display:flex;
      align-items:center;
      gap:6px;
    }
    .dev-section-title span{
      font-size:10px;
      font-weight:600;
      background:#fef3c7;
      color:#92400e;
      padding:2px 7px;
      border-radius:999px;
    }
    .dev-field{ display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
    .dev-field label{ font-size:11px; font-weight:700; color:#64748b; }
    .dev-field input[type="text"],
    .dev-field input[type="file"]{
      padding:9px 12px;
      border:1px solid #d6dae3;
      border-radius:10px;
      font-size:13px;
      width:100%;
      outline:none;
      background:#fff;
      transition:border-color .08s, box-shadow .08s;
    }
    .dev-field input[type="text"]:focus{
      border-color:#b9d1ff;
      box-shadow:0 0 0 3px rgba(37,99,235,.10);
    }
    .dev-upload-preview{
      width:64px; height:64px;
      border:1.5px dashed #d6dae3;
      border-radius:10px;
      background:#f7f8fb;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      font-size:11px;
      color:#94a3b8;
      flex-shrink:0;
    }
    .dev-upload-preview img{ max-width:100%; max-height:100%; object-fit:contain; }
    .dev-upload-row{ display:flex; gap:10px; align-items:flex-end; }
    .dev-upload-row .dev-fields{ flex:1; display:flex; flex-direction:column; gap:8px; }
    #btn-dev-upload{
      width:100%; padding:10px;
      border:none; border-radius:10px;
      background:linear-gradient(180deg,#2563eb,#1d4ed8);
      color:#fff; font-size:13px; font-weight:700;
      cursor:pointer;
      box-shadow:0 4px 12px rgba(37,99,235,.25);
      margin-top:4px;
    }
    #btn-dev-upload:hover{ filter:brightness(1.05); }
    #btn-dev-upload:disabled{ opacity:.6; cursor:not-allowed; filter:none; }
    .dev-msg{
      font-size:12px; border-radius:8px; padding:7px 10px; display:none; margin-top:6px;
    }
    .dev-msg.error  { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; display:block; }
    .dev-msg.success{ background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; display:block; }

    #dev-elem-gallery{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:8px;
      margin-top:10px;
    }
    .dev-thumb{
      border:1px solid #cbd5e1;
      border-radius:10px;
      background:#9aa3b0;
      padding:5px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:3px;
      position:relative;
    }
    .dev-thumb img{ width:100%; aspect-ratio:1; object-fit:contain; }
    .dev-thumb .dev-thumb-name{
      font-size:9px; color:#f1f5f9; font-weight:600; text-align:center;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%;
      text-shadow:0 1px 2px rgba(0,0,0,.35);
    }
    .dev-thumb .dev-thumb-del{
      position:absolute; top:3px; right:3px;
      width:18px; height:18px; border-radius:50%;
      background:#ef4444; color:#fff; border:none;
      font-size:10px; font-weight:900; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      line-height:1;
    }
    .tabs{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:6px;
      padding:6px;
      background:#dfe6f3;
      border:1px solid #c7d3e8;
      border-radius:15px;
      box-shadow:inset 0 1px 3px rgba(2,6,23,.06);
    }
    /* Dev ocupa a linha inteira quando é o quinto botão */
    .tabs #tab-btn-dev{ grid-column:1 / -1; }
    #toolbar .tab-btn,
    .tab-btn{
      display:flex !important;
      align-items:center;
      justify-content:center;
      gap:6px;
      min-height:46px;
      padding:9px 10px !important;
      border:1px solid transparent !important;
      background:#fff !important;
      border-radius:11px;
      cursor:pointer;
      text-align:center !important;
      font-size:11.5px;
      font-weight:800;
      color:#475569 !important;
      line-height:1.25;
      letter-spacing:.005em;
      transform:none !important;
      box-shadow:0 1px 2px rgba(2,6,23,.05) !important;
      transition:background .12s, color .12s, box-shadow .12s, transform .08s;
    }
    .tab-btn .tb-ico{ font-size:15px; line-height:1; flex-shrink:0; }
    .tab-btn .tb-txt{ text-align:left; }
    #toolbar .tab-btn:hover,
    .tab-btn:hover{
      background:#f0f5ff !important;
      color:#1d4ed8 !important;
      box-shadow:0 3px 8px rgba(37,99,235,.15) !important;
    }
    #toolbar .tab-btn.active,
    .tab-btn.active{
      background:linear-gradient(180deg,#2563eb,#1d4ed8) !important;
      color:#fff !important;
      border-color:#1e40af !important;
      box-shadow:0 5px 14px rgba(37,99,235,.38) !important;
      font-weight:800;
    }
    /* Barra lateral indicando a aba ativa */
    #toolbar .tab-btn.active::before,
    .tab-btn.active::before{
      content:'';
      position:absolute;
      left:7px; top:50%;
      transform:translateY(-50%);
      width:3px; height:52%;
      background:rgba(255,255,255,.9);
      border-radius:2px;
    }
    #toolbar .tab-btn,
    .tab-btn{ position:relative; }

    .tab-pane{ display:none;}
    .tab-pane.active{ display:block;}

    .row{ display:flex; gap:8px; align-items:center;}
    .row input[type="text"]{ flex:1; }

    .small-note{ font-size:12px; color:var(--muted); line-height:1.35; }

    .thumb-grid{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:8px;
    }
    #elem-gallery{ display:flex; flex-direction:column; gap:12px; }
    #elem-gallery.thumb-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
    .elements-group{ border:1px solid #e2e8f0; border-radius:14px; padding:10px; background:#fbfdff; }
    .elements-group.premium-group{ border-color:#e8c46d; background:linear-gradient(145deg,#fffdf4,#fff7dc); }
    .elements-group-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 9px; }
    .elements-group-title{ display:flex; align-items:center; gap:6px; color:#334155; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
    .premium-group .elements-group-title{ color:#8a5a05; }
    .elements-group-desc{ color:#64748b; font-size:10px; line-height:1.3; text-align:right; }
    .premium-group .elements-group-desc{ color:#9a6a12; }
    .elements-premium-badge{ border-radius:999px; padding:2px 7px; background:#d79a17; color:#fff; font-size:9px; font-weight:900; letter-spacing:.05em; }
    .premium-group .thumb-grid{ grid-template-columns:repeat(6,1fr); gap:6px; }

    .thumb{
      border:1px solid #cbd5e1;
      border-radius:12px;
      /* Cinza médio: imagens com fundo transparente somem
         sobre branco em monitores mais claros */
      background:#9aa3b0;
      padding:6px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      aspect-ratio:1/1;
      overflow:hidden;
      transition:transform .08s ease, box-shadow .08s ease, border-color .08s ease;
      position:relative;
    }
    .thumb:hover{
      transform:translateY(-1px);
      box-shadow:0 10px 18px rgba(2,6,23,.16);
      border-color:#60a5fa;
      background:#8b95a3;
    }
    .thumb img{ max-width:100%; max-height:100%; display:block; object-fit:contain;}
    /* Elemento Premium: a etiqueta fica sobre a miniatura sem esconder
       a identificação visual do item. Usuários sem acesso veem apenas
       a prévia escurecida e não conseguem inseri-la no quadro. */
    .thumb-premium{
      background:linear-gradient(145deg,#f6d365,#c68a16) !important;
      border-color:#b7791f !important;
      /* A coroa fica propositalmente fora da área da imagem. */
      overflow:visible;
    }
    .thumb-premium:hover{ background:linear-gradient(145deg,#f8dc7b,#d3941b) !important; }
    .thumb-premium-crown{
      position:absolute; top:-11px; right:-11px;
      width:20px; height:20px;
      object-fit:contain;
      /* Arquivo original, sem filtro ou recoloração. */
      filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));
      z-index:8; pointer-events:none;
    }
    .thumb-premium.thumb-bloqueada{ cursor:pointer; }
    /* O efeito cinza vale apenas para a imagem do elemento, nunca para
       a coroa Premium, que deve preservar suas cores originais. */
    .thumb-premium.thumb-bloqueada > img:not(.thumb-premium-crown){
      filter:grayscale(1) brightness(.78);
      opacity:.88;
    }
    
    

    .card{
      background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
      border:1px solid #e7eaf3;
      border-radius: var(--radius);
      box-shadow: 0 10px 18px rgba(2,6,23,.06);
      padding:12px;
    }
    .card + .card{ margin-top:10px; }

    
    
    .card-sub{
      font-size:12px; color:var(--muted); margin-top:4px; line-height:1.35;
    }

    .btn{
      padding:10px 12px;
      border-radius:12px;
      border:1px solid #d6dae3;
      background:#f7f8fb;
      cursor:pointer;
      font-weight:800;
      text-align:center;
    }
    
    

    #color-tools .color-swatch{ width:24px; height:24px; border-radius:6px; border:1px solid rgba(0,0,0,.1); cursor:pointer;}

    /* Paleta da Caneta */
    #pen-size{ width:140px;}

    /* ===== MARCA D'ÁGUA VISUAL (não entra no PNG) ===== */
    /* Marca d'água some quando o usuário está logado */
    /* ===== BANNER ANIMADO — LOGIN PARA BAIXAR SEM MARCA ===== */
    @keyframes bannerSlide{
      0%  { background-position:0% 50%; }
      100%{ background-position:300% 50%; }
    }
    @keyframes iconPulse{
      0%,100%{ transform:scale(1); }
      50%    { transform:scale(1.3); }
    }

    /* Overlay de bloqueio ao clicar em Salvar PNG sem login */

    #auth-panel{
      border:1px solid #e7eaf3;
      border-radius:14px;
      background:linear-gradient(180deg,#fff 0%,#f9fbff 100%);
      box-shadow:0 4px 14px rgba(2,6,23,.06);
      padding:12px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    #auth-panel.hidden{ display:none; }
    .auth-field-row{ display:flex; flex-direction:column; gap:4px; }
    .auth-field-label{ font-size:11px; font-weight:700; color:#64748b; letter-spacing:.03em; }
    .auth-field-row input{
      padding:9px 12px;
      border:1px solid #d6dae3;
      border-radius:10px;
      font-size:13px;
      outline:none;
      background:#fff;
      width:100%;
      transition:border-color .08s, box-shadow .08s;
    }
    .auth-field-row input:focus{
      border-color:#b9d1ff;
      box-shadow:0 0 0 3px rgba(37,99,235,.10);
    }
    .auth-field-row input::placeholder{ color:#94a3b8; }
    #toolbar #btn-login,
    #btn-login{
      display:block;
      width:100%;
      padding:10px;
      border:none !important;
      border-radius:10px;
      background:#2563eb !important;
      color:#fff !important;
      font-size:13px;
      font-weight:700;
      cursor:pointer;
      box-shadow:0 4px 12px rgba(37,99,235,.30);
      transition:background .15s;
      text-align:center;
      transform:none !important;
    }
    #toolbar #btn-login:hover,
    #btn-login:hover{ background:#1d4ed8 !important; box-shadow:0 6px 16px rgba(37,99,235,.35); }
    #btn-login:disabled{ opacity:.6; cursor:not-allowed; }
    #toolbar #btn-abrir-cadastro,
    #btn-abrir-cadastro{
      background:none !important;
      border:none !important;
      box-shadow:none !important;
      font-size:12px;
      color:#2563eb !important;
      cursor:pointer;
      text-align:center;
      padding:2px 0;
      font-weight:600;
      text-decoration:underline;
      text-underline-offset:2px;
      transform:none !important;
    }
    #btn-abrir-cadastro:hover{ color:#1d4ed8 !important; }

    #toolbar #btn-abrir-recuperar,
    #btn-abrir-recuperar{
      background:none !important;
      border:none !important;
      box-shadow:none !important;
      font-size:11px;
      color:#94a3b8 !important;
      cursor:pointer;
      text-align:center;
      padding:0 !important;
      font-weight:600;
      transform:none !important;
      margin-top:-4px;
    }
    #btn-abrir-recuperar:hover{ color:#64748b !important; text-decoration:underline; }
    .auth-msg{
      font-size:12px;
      border-radius:8px;
      padding:7px 10px;
      display:none;
    }
    .auth-msg.error  { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; display:block; }
    .auth-msg.success{ background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; display:block; }

    /* Usuário logado */
    #auth-logged{
      display:none;
      align-items:center;
      justify-content:space-between;
      padding:10px 14px;
      border:1px solid #e7eaf3;
      border-radius:14px;
      background:linear-gradient(180deg,#fff 0%,#f9fbff 100%);
      box-shadow:0 4px 14px rgba(2,6,23,.06);
      gap:8px;
    }
    #auth-logged.visible{ display:flex; }
    #auth-user-info{ display:flex; flex-direction:column; gap:2px; }
    #auth-user-name{ font-size:13px; font-weight:700; color:#0f172a; }
    #auth-user-plan{
      font-size:10px; font-weight:700;
      padding:2px 7px; border-radius:999px;
      background:#eef2ff; color:#3730a3;
      display:inline-block; width:fit-content;
    }
    #auth-user-plan.plano-pro{ background:#fef3c7; color:#92400e; }
    #auth-user-validade{
      display:block;
      font-size:10px;
      font-weight:600;
      color:#94a3b8;
      margin-top:3px;
      line-height:1.3;
    }
    /* Perto do vencimento: avisa antes de perder o acesso */
    #auth-user-validade.perto-fim{
      color:#b45309;
      font-weight:700;
    }
    #auth-logged #btn-logout,
    #btn-logout{
      font-size:11px; padding:6px 10px;
      border:1px solid #d6dae3 !important; border-radius:8px;
      background:#f7f8fb !important; color:#64748b !important;
      cursor:pointer; font-weight:600; white-space:nowrap;
      transform:none !important; box-shadow:none !important;
    }
    #btn-logout:hover{ background:#fee2e2 !important; color:#b91c1c !important; border-color:#fecaca !important; }

    /* ===== MODAL DE CADASTRO ===== */
    #modal-cadastro-backdrop{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(2,6,23,.45);
      z-index:999;
      align-items:center;
      justify-content:center;
    }
    #modal-cadastro-backdrop.open{ display:flex; }
    #modal-cadastro{
      background:#fff;
      border-radius:18px;
      box-shadow:0 24px 60px rgba(2,6,23,.22);
      padding:28px 24px 20px;
      width:min(92vw, 380px);
      display:flex;
      flex-direction:column;
      gap:14px;
      position:relative;
    }
    #modal-cadastro h2{
      font-size:17px;
      font-weight:800;
      color:#0f172a;
      margin:0;
    }
    #modal-cadastro p{
      font-size:12px;
      color:#64748b;
      margin:0;
      margin-top:-8px;
    }
    .modal-field{ display:flex; flex-direction:column; gap:4px; }
    .modal-field label{ font-size:11px; font-weight:700; color:#64748b; letter-spacing:.03em; }
    .modal-field input{
      padding:10px 12px;
      border:1px solid #d6dae3;
      border-radius:10px;
      font-size:13px;
      outline:none;
      background:#fff;
      width:100%;
      transition:border-color .08s, box-shadow .08s;
    }
    .modal-field input:focus{
      border-color:#b9d1ff;
      box-shadow:0 0 0 3px rgba(37,99,235,.10);
    }
    .modal-field input::placeholder{ color:#94a3b8; }
    #btn-cadastro{
      padding:11px;
      border:none;
      border-radius:10px;
      background:linear-gradient(180deg,#2563eb 0%,#1d4ed8 100%);
      color:#fff;
      font-size:13px;
      font-weight:700;
      cursor:pointer;
      box-shadow:0 6px 14px rgba(37,99,235,.22);
      transition:filter .1s;
      width:100%;
    }
    #btn-cadastro:hover{ filter:brightness(1.05); }
    #btn-cadastro:disabled{ opacity:.6; cursor:not-allowed; filter:none; }
    #btn-fechar-modal{
      position:absolute;
      top:14px; right:16px;
      background:none; border:none;
      font-size:20px; color:#94a3b8;
      cursor:pointer; line-height:1;
      padding:4px 6px; border-radius:6px;
    }
    #btn-fechar-modal:hover{ background:#f1f5f9; color:#0f172a; }

    /* =====================================================
       RESPONSIVO — tablets e celulares
       ===================================================== */

    /* ===== AVISO DE TELA PEQUENA ===== */
    #modal-mobile-backdrop{
      display:none;
      position:fixed; inset:0;
      background:rgba(2,6,23,.72);
      backdrop-filter:blur(3px);
      z-index:2000;
      align-items:center; justify-content:center;
      padding:22px;
    }
    #modal-mobile-backdrop.open{ display:flex; }
    #modal-mobile{
      background:#fff;
      border-radius:20px;
      box-shadow:0 24px 60px rgba(2,6,23,.35);
      padding:30px 24px 22px;
      width:min(94vw, 380px);
      text-align:center;
      animation:mobIn .22s ease-out;
    }
    @keyframes mobIn{
      from{ opacity:0; transform:translateY(12px) scale(.97); }
      to  { opacity:1; transform:translateY(0) scale(1); }
    }
    #modal-mobile .mob-ico{ font-size:44px; line-height:1; margin-bottom:12px; }
    #modal-mobile h2{
      font-size:19px; font-weight:800; color:#0f172a; margin:0 0 9px;
    }
    #modal-mobile .mob-txt{
      font-size:13.5px; color:#64748b; line-height:1.65; margin:0 0 18px;
    }
    #modal-mobile .mob-dicas{
      background:#f8fafc;
      border:1px solid #eef2f7;
      border-radius:12px;
      padding:12px 13px;
      margin-bottom:18px;
      display:flex; flex-direction:column; gap:9px;
      text-align:left;
    }
    #modal-mobile .mob-dica{
      font-size:12px; color:#475569; line-height:1.5;
      display:flex; gap:8px; align-items:flex-start;
    }
    #modal-mobile .mob-dica span{ flex-shrink:0; font-size:14px; }
    #btn-mobile-continuar{
      width:100%;
      padding:13px;
      border:none;
      border-radius:12px;
      background:linear-gradient(180deg,#2563eb,#1d4ed8);
      color:#fff;
      font-size:14px;
      font-weight:700;
      cursor:pointer;
      box-shadow:0 5px 16px rgba(37,99,235,.30);
      font-family:inherit;
    }
    #btn-mobile-continuar:active{ transform:translateY(1px); }

    /* ===== AÇÕES RÁPIDAS NO CELULAR ===== */
    #acoes-mobile{
      display:none;
      position:fixed;
      /* O JS alinha o topo com o do banner; este é o valor
         de partida para quando não houver banner */
      bottom:16px; right:16px;
      z-index:900;
      flex-direction:column;
      gap:5px;
      padding:5px;
      background:rgba(255,255,255,.97);
      border:1px solid #dbe3f3;
      border-radius:15px;
      box-shadow:0 6px 20px rgba(2,6,23,.20);
      backdrop-filter:blur(6px);
      /* Seis botões: duas linhas de três */
      grid-template-columns:repeat(3, 42px);
      max-width:calc(100vw - 96px);
    }

    /* Repete, com um toque, a última ferramenta escolhida na gaveta. */
    /* Com a gaveta aberta, o próprio botão azul serve para fechá-la;
       esconder Desfazer evita um atalho concorrendo com o painel. */
    body.menu-aberto #btn-desfazer-mobile,
    body.menu-aberto #btn-aplicar-mobile{ display:none !important; }
    /* Com elemento selecionado, as ações do objeto assumem:
       Desfazer e Aplicar sairiam por cima delas */
    body.obj-selecionado #btn-desfazer-mobile,
    body.obj-selecionado #btn-aplicar-mobile{ display:none !important; }
    #acoes-mobile .am-pagina button{
      width:42px;
      min-width:0;
      padding:0 2px;
    }
    #acoes-mobile button{
      width:60px;
      min-height:52px;
      border:1px solid transparent;
      border-radius:11px;
      background:#f8fafc;
      cursor:pointer;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:3px;
      padding:6px 3px;
      transition:background .1s, border-color .1s, transform .08s;
    }
    #acoes-mobile button:active{ transform:scale(.94); }
    #acoes-mobile .am-ico{ font-size:17px; line-height:1; pointer-events:none; }
    #acoes-mobile .am-txt{
      font-size:9px; font-weight:700; color:#475569;
      line-height:1; pointer-events:none;
    }

    /* Selecionar ativo */
    #acoes-mobile #am-selecionar.ativo{
      background:linear-gradient(180deg,#2563eb,#1d4ed8);
      border-color:#1e40af;
    }
    #acoes-mobile #am-selecionar.ativo .am-txt{ color:#fff; }

    /* Desenhar ativo */
    #acoes-mobile #am-desenhar.ativo{
      background:linear-gradient(180deg,#2563eb,#1d4ed8);
      border-color:#1e40af;
    }
    #acoes-mobile #am-desenhar.ativo .am-txt{ color:#fff; }

    /* Aplicar só ganha destaque quando há traçado em andamento */
    #acoes-mobile #am-aplicar,
    #acoes-mobile #am-aplicar2{ opacity:.45; }
    #acoes-mobile #am-aplicar.pronto,
    #acoes-mobile #am-aplicar2.pronto{
      opacity:1;
      background:linear-gradient(180deg,#16a34a,#15803d);
      border-color:#15803d;
      animation:amPulsa 1.6s ease-in-out infinite;
    }
    #acoes-mobile #am-aplicar.pronto .am-txt,
    #acoes-mobile #am-aplicar2.pronto .am-txt{ color:#fff; }
    @keyframes amPulsa{
      0%,100%{ box-shadow:0 0 0 0 rgba(22,163,74,.45); }
      55%    { box-shadow:0 0 0 7px rgba(22,163,74,0); }
    }

    /* Limpar sempre disponível, mas discreto */
    /* Páginas da barra de ações */
    #acoes-mobile .am-pagina{
      display:none;
      grid-template-columns:repeat(3, 42px);
      gap:5px;
    }
    #acoes-mobile .am-pagina.ativa{ display:grid; }
    /* Só a página do elemento continua em uso no celular */
    /* Grade estreita, como no formato original */
    #acoes-mobile #am-pag3{
      grid-template-columns:repeat(3, 42px) !important;
      gap:5px;
    }
    #am-pag3 button{
      width:42px !important;
      height:44px;
      min-height:0 !important;
      padding:0 !important;
    }
    #am-pag3 .am-ico{ font-size:15px; }
    #am-pag3 .am-txt{ font-size:7px; letter-spacing:0; }

    #acoes-mobile #am-pag1,
    #acoes-mobile #am-pag2,
    #acoes-mobile #am-vira{ display:none !important; }

    /* Alterna as páginas: mostra para onde vai */
    #acoes-mobile #am-vira{
      grid-column:1 / -1;
      width:100%;
      height:30px;
      min-height:0;
      padding:0 6px;
      background:linear-gradient(180deg,#2563eb,#1d4ed8);
      border:none;
      border-radius:10px;
      color:#fff;
      font-family:inherit;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:5px;
      overflow:hidden;
      box-shadow:0 2px 8px rgba(37,99,235,.28);
    }
    #acoes-mobile #am-vira:active{ filter:brightness(1.2); }
    #acoes-mobile #am-vira::after{
      content:'Sinalização';
      font-size:10.5px;
      font-weight:700;
      letter-spacing:0;
      white-space:nowrap;
    }
    #acoes-mobile.pag2 #am-vira::after{ content:'Ferramentas'; }
    #am-vira-ico{
      display:inline-block;
      font-size:14px;
      font-weight:800;
      line-height:1;
      opacity:.8;
      transition:transform .2s;
    }
    #acoes-mobile.pag2 #am-vira #am-vira-ico{ transform:rotate(180deg); }

    /* Amarelo das faixas nos ícones */
    #acoes-mobile .am-amarelo{ color:#FEEA00; }

    /* Página do elemento selecionado: tom próprio, para a pessoa
       perceber que a barra mudou de contexto */
    #acoes-mobile.pag3 #am-vira{
      background:linear-gradient(180deg,#0ea5e9,#0284c7) !important;
    }
    #acoes-mobile.pag3 #am-vira::after{ content:'Ferramentas'; }
    #am-pag3 button{
      border-color:#bae6fd !important;
      background:#f0f9ff !important;
    }
    #am-pag3 #ae-excluir{
      border-color:#fecaca !important;
      background:#fef2f2 !important;
    }
    #am-pag3 #ae-excluir .am-txt{ color:#b91c1c !important; }

    /* Direcional para ajuste fino. Aparece no lugar do banner
       enquanto há elemento selecionado — o dedo fica longe do
       objeto, então dá para ver onde ele está indo. */
    #ae-joy{
      display:none;
      /* No fluxo, abaixo do quadro: fixo no rodapé ele cobria
         parte do desenho e brigava com a barra de ações */
      position:absolute;
      left:0;
      z-index:905;
      width:118px; height:118px;
      background:rgba(255,255,255,.96);
      border:1px solid #e2e8f0;
      border-radius:16px;
      box-shadow:0 6px 20px rgba(2,6,23,.18);
      grid-template-columns:repeat(3, 1fr);
      grid-template-rows:repeat(3, 1fr);
      padding:5px;
      gap:2px;
    }
    #ae-joy.on{ display:grid; }
    #toolbar #ae-joy .joy-bt, #ae-joy .joy-bt{
      padding:0 !important;
      min-height:0 !important;
      border:none !important;
      border-radius:9px;
      background:#f1f5f9 !important;
      color:#334155 !important;
      font-size:13px;
      line-height:1;
      cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      user-select:none;
      -webkit-user-select:none;
      touch-action:manipulation;
    }
    #ae-joy .joy-bt:active{
      background:#2563eb !important;
      color:#fff !important;
    }
    #ae-joy .joy-cima { grid-area:1 / 2; }
    #ae-joy .joy-esq  { grid-area:2 / 1; }
    #ae-joy .joy-meio { grid-area:2 / 2; }
    #ae-joy .joy-dir  { grid-area:2 / 3; }
    #ae-joy .joy-baixo{ grid-area:3 / 2; }
    #ae-joy .joy-meio{
      display:flex; align-items:center; justify-content:center;
      font-size:9px; font-weight:800; color:#94a3b8;
      background:#fff;
      border-radius:8px;
    }
    @media (max-width:820px){
      /* Alvos maiores para o toque, sem mudar o joystick do computador. */
      #ae-joy{ width:136px; height:136px; padding:6px; gap:3px; border-radius:18px; }
      #toolbar #ae-joy .joy-bt, #ae-joy .joy-bt{ font-size:16px; border-radius:11px; }
      #ae-joy .joy-meio{ font-size:10px; border-radius:10px; }
    }

    /* ===== SINALIZACAO INTELIGENTE ===== */
    #si-backdrop{
      display:none; position:fixed; inset:0; z-index:10080;
      align-items:center; justify-content:center; padding:18px;
      background:rgba(15,23,42,.64); backdrop-filter:blur(4px);
    }
    #si-backdrop.open{ display:flex; }
    #si-modal{
      width:min(620px,100%); max-height:min(88vh,760px); overflow:auto;
      background:#fff; border:1px solid #dbe4ef; border-radius:22px;
      box-shadow:0 24px 70px rgba(15,23,42,.28); color:#172033;
    }
    .si-head{
      position:sticky; top:0; z-index:2; display:flex; align-items:center;
      justify-content:space-between; gap:12px; padding:18px 20px 14px;
      background:#fff; border-bottom:1px solid #e7edf4;
    }
    .si-head h2{ margin:0; font-size:20px; }
    .si-head p{ margin:4px 0 0; color:#64748b; font-size:12px; line-height:1.4; }
    #si-fechar{
      width:40px; height:40px; border:1px solid #d9e2ec; border-radius:12px;
      background:#f8fafc; color:#64748b; font-size:23px; cursor:pointer;
    }
    .si-corpo{ padding:16px 20px 20px; }
    .si-modos{ margin-bottom:14px; }
    .si-modos-titulo{
      display:block; margin-bottom:7px; font-size:12px; font-weight:800; color:#334155;
    }
    .si-modos-grade{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
    .si-modo{
      min-height:54px; padding:7px 5px; border:1px solid #dbe4ef; border-radius:11px;
      background:#f8fafc; color:#334155; font-size:10px; font-weight:800;
      line-height:1.15; cursor:pointer;
    }
    .si-modo span{ display:block; margin-bottom:4px; font-size:18px; line-height:1; }
    .si-modo.ativo{
      border-color:#2563eb; background:#eff6ff; color:#1d4ed8;
      box-shadow:0 0 0 2px rgba(37,99,235,.10);
    }
    .si-opcoes-ocultas{ display:none !important; }
    .si-grade{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .si-campo{ display:flex; flex-direction:column; gap:6px; }
    .si-campo.si-largo{ grid-column:1/-1; }
    .si-campo label{ font-size:12px; font-weight:800; color:#334155; }
    .si-campo select{
      width:100%; min-height:43px; padding:8px 10px; border:1px solid #cbd5e1;
      border-radius:11px; background:#fff; color:#1e293b; font-size:13px;
    }
    .si-checks{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; }
    .si-check{
      display:flex; align-items:center; gap:9px; min-height:44px; padding:9px 11px;
      border:1px solid #dbe4ef; border-radius:11px; background:#f8fafc;
      font-size:12px; font-weight:700; color:#334155;
    }
    .si-check input{ width:18px; height:18px; accent-color:#2563eb; }
    .si-norma{
      margin-top:14px; padding:11px 12px; border-radius:12px;
      border:1px solid #bae6fd; background:#f0f9ff; color:#075985;
      font-size:11px; line-height:1.5;
    }
    .si-acoes{ display:flex; gap:10px; margin-top:16px; }
    .si-acoes button{
      flex:1; min-height:45px; border-radius:12px; border:1px solid #cbd5e1;
      background:#fff; color:#334155; font-weight:800; cursor:pointer;
    }
    #si-iniciar{ background:#2563eb; border-color:#2563eb; color:#fff; }
    #si-desfazer{ color:#b42318; border-color:#fecaca; background:#fff7f7; }
    #tool-smart-marking{ background:#eaf3ff !important; border-color:#93c5fd !important; color:#1d4ed8 !important; }

    @media(max-width:820px){
      #si-backdrop{ align-items:flex-end; padding:0; }
      #si-modal{ width:100%; max-height:86vh; border-radius:22px 22px 0 0; }
      .si-head{ padding:15px 16px 12px; }
      .si-corpo{ padding:14px 16px max(18px,env(safe-area-inset-bottom)); }
      .si-grade{ grid-template-columns:1fr; gap:10px; }
      .si-campo.si-largo{ grid-column:auto; }
      .si-modos-grade{ grid-template-columns:repeat(2,1fr); }
      .si-modo{ min-height:58px; font-size:11px; }
      .si-checks{ grid-template-columns:1fr; }
      .si-acoes{ position:sticky; bottom:0; background:#fff; padding-top:10px; }
      .si-acoes button{ min-height:50px; }
    }

    /* Atalho dos ajustes da via, logo abaixo do direcional no celular. */
    #btn-ajustes-via-mobile{ display:none; }
    @media (max-width:820px){
      #btn-ajustes-via-mobile.on{
        display:flex;
        position:absolute;
        z-index:906;
        width:136px;
        min-height:42px;
        align-items:center;
        justify-content:center;
        gap:6px;
        padding:8px 7px;
        border:1px solid #93c5fd;
        border-radius:12px;
        background:linear-gradient(180deg,#eff6ff,#dbeafe);
        color:#1d4ed8;
        box-shadow:0 5px 16px rgba(37,99,235,.18);
        font:800 10.5px/1.15 inherit;
        text-align:center;
        touch-action:manipulation;
      }
      #btn-ajustes-via-mobile:active{ transform:scale(.97); }

      /* O painel existe no DOM, mas só aparece dentro do modal. */
      #faixa-bar,
      #curve-bar{ display:none !important; }
      #modal-ajustes-via-mobile.open #faixa-bar.aberto-mobile,
      #modal-ajustes-via-mobile.open #curve-bar.aberto-mobile{
        display:flex !important;
      }
    }

    #modal-ajustes-via-mobile{
      display:none;
      position:fixed;
      inset:0;
      z-index:1800;
      background:rgba(15,23,42,.56);
      align-items:flex-end;
      justify-content:center;
      padding:14px;
    }
    #modal-ajustes-via-mobile.open{ display:flex; }
    #modal-ajustes-via-mobile .mav-card{
      width:min(520px,100%);
      max-height:min(82vh,720px);
      display:flex;
      flex-direction:column;
      overflow:hidden;
      border:1px solid #dbeafe;
      border-radius:18px;
      background:#fff;
      box-shadow:0 22px 60px rgba(2,6,23,.32);
    }
    #modal-ajustes-via-mobile .mav-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:13px 14px;
      border-bottom:1px solid #e2e8f0;
      color:#0f172a;
      font-size:14px;
      font-weight:850;
    }
    #btn-fechar-ajustes-via-mobile{
      width:34px;
      height:34px;
      border:0;
      border-radius:10px;
      background:#f1f5f9;
      color:#475569;
      font-size:20px;
      line-height:1;
    }
    #ajustes-via-mobile-slot{
      min-height:0;
      flex:1 1 auto;
      overflow:auto;
      padding:12px;
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
    }
    @media (max-width:820px){
      #modal-ajustes-via-mobile{
        padding:10px 10px max(10px,env(safe-area-inset-bottom));
      }
      #modal-ajustes-via-mobile .mav-card{
        max-height:calc(var(--altura-visual-mobile,100dvh) - 20px - env(safe-area-inset-bottom));
      }
      #ajustes-via-mobile-slot{
        padding-bottom:max(18px,env(safe-area-inset-bottom));
      }
    }

    /* ===== VALOR MANUAL DA RÉGUA ===== */
    #modal-regua-backdrop{
      display:none; position:fixed; inset:0; z-index:1850;
      align-items:center; justify-content:center; padding:16px;
      background:rgba(15,23,42,.58); backdrop-filter:blur(3px);
    }
    #modal-regua-backdrop.open{ display:flex; }
    #modal-regua{
      width:min(92vw,390px); padding:18px; border-radius:18px;
      background:#fff; border:1px solid #dbeafe;
      box-shadow:0 24px 64px rgba(2,6,23,.34);
    }
    #modal-regua h2{ margin:0 0 5px; color:#0f172a; font-size:17px; }
    #modal-regua p{ margin:0 0 15px; color:#64748b; font-size:12px; line-height:1.45; }
    .regua-campos{ display:grid; grid-template-columns:minmax(0,1fr) 96px; gap:8px; }
    .regua-campo{ display:flex; flex-direction:column; gap:5px; min-width:0; }
    .regua-campo label{ color:#475569; font-size:10.5px; font-weight:800; }
    .regua-campo input,.regua-campo select{
      width:100%; height:42px; padding:0 11px; border:1px solid #cbd5e1;
      border-radius:10px; background:#fff; color:#0f172a;
      font:750 14px/1 inherit; outline:none;
    }
    .regua-campo input:focus,.regua-campo select:focus{
      border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.13);
    }
    #regua-erro{ min-height:17px; margin:7px 0 0; color:#b91c1c; font-size:11px; font-weight:700; }
    .regua-acoes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:7px; }
    #regua-cancelar,#regua-confirmar{
      min-height:42px; border-radius:10px; font:800 12px/1 inherit; cursor:pointer;
    }
    #regua-cancelar{ border:1px solid #cbd5e1; background:#fff; color:#475569; }
    #regua-confirmar{ border:0; background:linear-gradient(180deg,#2563eb,#1d4ed8); color:#fff; }
    @media (max-width:820px){
      #modal-regua-backdrop{ align-items:flex-end; padding:10px; }
      #modal-regua{ width:100%; border-radius:18px 18px 12px 12px; padding:17px 15px; }
    }

    /* ===== IDENTIFICAÇÃO DA VIA ===== */
    #modal-nome-via-backdrop{
      display:none; position:fixed; inset:0; z-index:1860;
      align-items:center; justify-content:center; padding:16px;
      background:rgba(15,23,42,.58); backdrop-filter:blur(3px);
    }
    #modal-nome-via-backdrop.open{ display:flex; }
    #modal-nome-via{
      width:min(92vw,430px); padding:19px; border-radius:18px;
      background:#fff; border:1px solid #dbeafe;
      box-shadow:0 24px 64px rgba(2,6,23,.34);
    }
    .nome-via-cabecalho{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .nome-via-selo{ display:block; margin-bottom:4px; color:#2563eb; font-size:9px; font-weight:900; letter-spacing:.13em; }
    #modal-nome-via h2{ margin:0; color:#0f172a; font-size:18px; }
    #modal-nome-via p{ margin:8px 0 15px; color:#64748b; font-size:12px; line-height:1.45; }
    #nome-via-fechar{
      width:34px; height:34px; border:1px solid #e2e8f0; border-radius:10px;
      background:#f8fafc; color:#64748b; font-size:15px; cursor:pointer;
    }
    .nome-via-campo{ display:flex; flex-direction:column; gap:6px; }
    .nome-via-campo span{ color:#475569; font-size:10.5px; font-weight:800; }
    .nome-via-campo input{
      width:100%; height:44px; padding:0 12px; border:1px solid #cbd5e1;
      border-radius:10px; background:#fff; color:#0f172a;
      font:750 14px/1 inherit; outline:none; text-transform:uppercase;
    }
    .nome-via-campo input:focus{ border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.13); }
    .nome-via-previa{
      display:flex; align-items:center; gap:10px; min-height:48px; margin-top:12px;
      padding:8px 12px; border:1px solid #bfdbfe; border-left:5px solid #2563eb;
      border-radius:10px; background:linear-gradient(135deg,#fff,#eff6ff);
      box-shadow:0 5px 14px rgba(15,23,42,.08);
    }
    .nome-via-previa span{ color:#2563eb; font-size:8px; font-weight:900; letter-spacing:.16em; }
    .nome-via-previa strong{
      min-width:0; overflow:hidden; color:#0f172a; font-size:13px;
      font-weight:850; letter-spacing:.025em; text-overflow:ellipsis; white-space:nowrap;
    }
    #nome-via-erro{ min-height:17px; margin:7px 0 0; color:#b91c1c; font-size:11px; font-weight:700; }
    .nome-via-acoes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:7px; }
    #nome-via-cancelar,#nome-via-confirmar{
      min-height:42px; border-radius:10px; font:800 12px/1 inherit; cursor:pointer;
    }
    #nome-via-cancelar{ border:1px solid #cbd5e1; background:#fff; color:#475569; }
    #nome-via-confirmar{ border:0; background:linear-gradient(180deg,#2563eb,#1d4ed8); color:#fff; }
    @media (max-width:820px){
      #modal-nome-via-backdrop{ align-items:flex-end; padding:10px; }
      #modal-nome-via{ width:100%; border-radius:18px 18px 12px 12px; padding:17px 15px; }
    }
    #ajustes-via-mobile-slot #faixa-bar,
    #ajustes-via-mobile-slot #curve-bar,
    #ajustes-via-mobile-slot #roundabout-bar{
      width:100%;
      box-sizing:border-box;
      margin:0 0 10px;
    }

    /* ===== ROTATÓRIA INTELIGENTE ===== */
    #roundabout-bar{
      display:none; flex-direction:column; gap:9px; margin-top:10px; padding:11px;
      border:1px solid #bbf7d0; border-radius:12px;
      background:linear-gradient(180deg,#f7fff9,#ecfdf5);
    }
    #roundabout-bar .round-title{
      display:flex; align-items:center; justify-content:space-between; gap:8px;
      color:#047857; font-size:11px; font-weight:850;
      text-transform:uppercase; letter-spacing:.04em;
    }
    #roundabout-bar .round-badge{
      padding:2px 7px; border-radius:999px; background:#d1fae5;
      color:#047857; font-size:9px; letter-spacing:0; text-transform:none;
    }
    #roundabout-bar .round-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    #roundabout-bar .round-field{ display:flex; flex-direction:column; gap:4px; min-width:0; }
    #roundabout-bar .round-field.round-wide{ grid-column:1/-1; }
    #roundabout-bar label{ color:#475569; font-size:10.5px; font-weight:750; }
    #roundabout-bar select{
      width:100%; min-width:0; padding:7px 8px; border:1px solid #a7f3d0;
      border-radius:8px; background:#fff; color:#334155; font:650 11px/1.2 inherit;
      outline:none;
    }
    #roundabout-bar .round-check{
      display:flex; align-items:center; gap:7px; padding:7px 8px;
      border:1px solid #d1fae5; border-radius:8px; background:#fff;
      color:#475569; font-size:10.5px; font-weight:700;
    }
    #roundabout-bar .round-check input{ margin:0; accent-color:#059669; }
    #toolbar #btn-aplicar-rotatoria, #btn-aplicar-rotatoria{
      width:100%; padding:9px !important; border:0 !important; border-radius:9px;
      background:linear-gradient(180deg,#10b981,#059669) !important;
      color:#fff !important; font-size:11.5px !important; font-weight:800 !important;
      text-align:center !important; box-shadow:0 3px 9px rgba(5,150,105,.22) !important;
    }
    #roundabout-bar .round-help{
      color:#047857; font-size:10px; font-weight:650; line-height:1.4; padding-top:2px;
    }
    #obj-options-slot #roundabout-bar{ width:100%; box-sizing:border-box; }
    @media (max-width:820px){
      #roundabout-bar{ display:none !important; }
      #modal-ajustes-via-mobile.open #roundabout-bar.aberto-mobile{ display:flex !important; }
    }

    /* Paleta rápida: abre sobre a barra, sem depender da gaveta */
    #ae-paleta{
      display:none;
      position:fixed;
      z-index:1200;
      background:#fff;
      border:1px solid #e2e8f0;
      border-radius:13px;
      padding:10px 11px;
      box-shadow:0 8px 26px rgba(2,6,23,.24);
      width:176px;
    }
    #ae-paleta.on{ display:block; }
    .aep-titulo{
      font-size:9.5px; font-weight:800; color:#94a3b8;
      text-transform:uppercase; letter-spacing:.05em;
      margin-bottom:7px;
    }
    .aep-cores{
      display:grid;
      grid-template-columns:repeat(5, 1fr);
      gap:6px;
      margin-bottom:8px;
    }
    #toolbar .aep-cor, .aep-cor{
      width:100%; height:26px;
      padding:0 !important;
      min-height:0 !important;
      border:1.5px solid #e2e8f0 !important;
      border-radius:7px;
      cursor:pointer;
    }
    .aep-cor:active{ transform:scale(.9); }
    #toolbar #aep-limpar, #aep-limpar{
      width:100%;
      padding:7px !important;
      min-height:0 !important;
      border:1px solid #e2e8f0 !important;
      border-radius:8px;
      background:#f8fafc !important;
      color:#475569 !important;
      font-size:10.5px; font-weight:700;
      font-family:inherit; cursor:pointer;
    }
    #aep-limpar:active{ background:#f1f5f9 !important; }
    #acoes-mobile .am-tool.ativo{
      background:linear-gradient(180deg,#2563eb,#1d4ed8);
      border-color:transparent;
    }
    #acoes-mobile .am-tool.ativo .am-ico,
    #acoes-mobile .am-tool.ativo .am-txt{ color:#fff; }

    /* #btn-zoom-mobile e #btn-mover-tela são utilitários: quem
       aparece na tela são os círculos "bloco-zoom" e "bloco-mover"
       dentro dos blocos de acesso, que apenas acionam estes dois
       por clique programático. */
    #bloco-mover{ display:none; }
    body.zoom-ativo #bloco-mover{ display:flex; }
    #blocos-acesso #bloco-mover.ativo .bloco-img{
      background:linear-gradient(180deg,#f59e0b,#d97706);
      border-color:transparent;
    }
    #blocos-acesso #bloco-mover.ativo .bloco-emoji{ filter:brightness(3); }
    /* Cursor de mãozinha no computador, quando o modo está ativo */
    body.mover-tela-ativo #croqui-canvas-wrapper,
    body.mover-tela-ativo #croqui-canvas-wrapper *{
      cursor:grab !important;
    }
    body.mover-tela-ativo.arrastando-tela #croqui-canvas-wrapper,
    body.mover-tela-ativo.arrastando-tela #croqui-canvas-wrapper *{
      cursor:grabbing !important;
    }

    #croqui-canvas-wrapper{ transition:transform .18s ease-out; }

    /* Banner de anúncio fora do celular por hora: no lugar dele
       entram os botões de login e compartilhar */
    @media (max-width: 820px){
      #banner-mobile{ display:none !important; }
    }

    /* Login: canto superior esquerdo */
    #btn-login-mobile{
      display:none;
      position:fixed;
      top:8px; left:10px;
      z-index:906;
      align-items:center;
      gap:5px;
      height:30px;
      padding:0 11px;
      border:none;
      border-radius:8px;
      background:#12385e;
      color:#fff;
      font-family:inherit;
      font-size:11.5px;
      font-weight:700;
      cursor:pointer;
      box-shadow:0 3px 10px rgba(18,56,94,.28);
    }
    #btn-login-mobile .lgm-ico{ font-size:13px; line-height:1; }
    body.menu-aberto #btn-login-mobile{ display:none !important; }

    /* Compartilhar: canto superior direito */
    /* Grupo do canto superior direito: Fórum e Compartilhar lado
       a lado. O grupo é quem fica fixo na tela; os dois botões
       dentro dele viram simples itens de um flex, sem precisar de
       posição própria — cabem sozinhos, não importa o quanto o
       texto de cada um pese. */
    #topo-direita-mobile{
      display:none;
      position:fixed;
      top:8px; right:10px;
      z-index:906;
      align-items:center;
      gap:6px;
    }
    body.menu-aberto #topo-direita-mobile{ display:none !important; }

    #btn-forum-topo-mobile, #btn-compartilhar-mobile{
      display:flex;
      align-items:center;
      gap:5px;
      height:30px;
      text-decoration:none;
      font-weight:700;
      font-size:11.5px;
      line-height:1;
      white-space:nowrap;
    }
    #btn-forum-topo-mobile{
      padding:0 11px;
      border-radius:15px;
      background:#12385e;
      color:#fff;
      box-shadow:0 3px 10px rgba(18,56,94,.3);
    }
    /* Cabe folgado ao lado do botão Entrar, mesmo em telas
       estreitas — testado até 360px de largura */
    #btn-forum-topo-mobile .ftm-txt{ white-space:nowrap; }

    #btn-compartilhar-mobile{
      padding:0 12px 0 10px;
      border-radius:15px;
      background:#25d366;
      color:#fff;
      box-shadow:0 3px 10px rgba(37,211,102,.35);
    }

    @media (max-width: 820px){
      #btn-login-mobile{ display:flex; }
      #topo-direita-mobile{ display:flex; }
    }
    @media (min-width: 821px){
      #btn-login-mobile, #topo-direita-mobile{ display:none !important; }
    }

    /* Com zoom, o quadro ampliado passaria por cima da coroa,
       dos botões e do banner — aqui eles saem de cena */
    body.zoom-ativo .prem-coroa,
    body.zoom-ativo #barra-social,
    body.zoom-ativo #banner-mobile{ display:none !important; }
    body.zoom-ativo #canvas-container{ overflow:hidden; }

    /* Modo navegar: o dedo move o quadro */
    #canvas-container.navegando{ cursor:grab; }
    #canvas-container.navegando #croqui-canvas-wrapper{
      transition:none;   /* acompanha o dedo sem atraso */
    }

    #acoes-mobile #am-limpar{ background:#fff; }
    #acoes-mobile #am-limpar .am-txt{ color:#94a3b8; }

    /* Botão que abre a gaveta de ferramentas (só mobile) */
    #btn-menu-mobile{
      display:none;
      position:fixed;
      /* Posição definida pelo JS: fica centralizado entre o
         banner e a barra de ações, alinhado com os dois */
      bottom:16px; left:16px;
      z-index:901;
      width:50px; height:50px;
      border:none;
      border-radius:50%;
      background:linear-gradient(180deg,#2563eb,#1d4ed8);
      color:#fff;
      font-size:21px;
      cursor:pointer;
      box-shadow:0 0 0 3px #fff, 0 5px 16px rgba(37,99,235,.42);
      align-items:center;
      justify-content:center;
    }
    /* Desfazer fica junto ao acesso da gaveta, fora da barra de
       ferramentas: é mais visível e não compete com as ações do objeto. */
    #btn-desfazer-mobile{
      display:none;
      position:fixed;
      z-index:901;
      bottom:15px; left:70px;
      width:96px; height:44px;
      border:0;
      border-radius:12px;
      background:#e2e8f0;
      color:#94a3b8;
      font-family:inherit;
      font-size:13px;
      font-weight:800;
      line-height:1;
      cursor:not-allowed;
      box-shadow:0 0 0 3px #fff, 0 4px 13px rgba(15,23,42,.18);
      align-items:center;
      justify-content:center;
      gap:6px;
      transition:transform .12s, background .12s, color .12s;
    }
    #btn-desfazer-mobile .undo-ico{ font-size:20px; line-height:1; }

    /* Aplicar: mesmo formato do Desfazer, logo ao lado. Fica
       apagado até haver um traçado para concluir. */
    #btn-aplicar-mobile{
      display:none;
      position:fixed;
      z-index:901;
      bottom:15px; left:174px;
      width:96px; height:44px;
      border:0;
      border-radius:12px;
      background:#e2e8f0;
      color:#94a3b8;
      font-family:inherit;
      font-size:13px;
      font-weight:800;
      line-height:1;
      cursor:not-allowed;
      box-shadow:0 0 0 3px #fff, 0 4px 13px rgba(15,23,42,.18);
      align-items:center;
      justify-content:center;
      gap:6px;
      transition:transform .12s, background .12s, color .12s;
    }
    #btn-aplicar-mobile .apl-ico{ font-size:19px; line-height:1; }
    #btn-aplicar-mobile.pronto{
      background:linear-gradient(180deg,#2563eb,#1d4ed8);
      color:#fff;
      cursor:pointer;
      box-shadow:0 0 0 3px #fff, 0 5px 16px rgba(37,99,235,.4);
      /* Leve pulsação para chamar a atenção: é ali que se conclui
         o traçado, e o botão sozinho passava despercebido */
      animation:pulsaAplicar 1.7s ease-in-out infinite;
    }
    #btn-aplicar-mobile.pronto:active{
      transform:scale(.92);
      animation:none;
    }
    @keyframes pulsaAplicar{
      0%,100%{ box-shadow:0 0 0 3px #fff, 0 5px 16px rgba(37,99,235,.4); }
      50%    { box-shadow:0 0 0 3px #fff, 0 5px 22px rgba(37,99,235,.75); }
    }

    /* Rascunho: ao lado do Aplicar, pulsando enquanto houver
       trabalho a recuperar */
    #btn-restaurar-mobile{
      display:none;
      position:fixed;
      z-index:901;
      bottom:15px; left:278px;
      width:104px; height:44px;
      border:0;
      border-radius:12px;
      background:linear-gradient(180deg,#f59e0b,#d97706);
      color:#fff;
      font-family:inherit;
      font-size:12.5px;
      font-weight:800;
      line-height:1;
      cursor:pointer;
      box-shadow:0 0 0 3px #fff, 0 5px 16px rgba(217,119,6,.42);
      align-items:center;
      justify-content:center;
      gap:6px;
      animation:pulsaRascunho 1.9s ease-in-out infinite;
    }
    #btn-restaurar-mobile.on{ display:flex; }
    #btn-restaurar-mobile .rst-ico{ font-size:17px; line-height:1; }
    #btn-restaurar-mobile:active{
      transform:scale(.93);
      animation:none;
    }
    @keyframes pulsaRascunho{
      0%,100%{ box-shadow:0 0 0 3px #fff, 0 5px 16px rgba(217,119,6,.42); }
      50%    { box-shadow:0 0 0 3px #fff, 0 5px 22px rgba(217,119,6,.75); }
    }
    /* Some junto com os outros nos mesmos casos */
    body.menu-aberto #btn-restaurar-mobile,
    body.obj-selecionado #btn-restaurar-mobile,
    body.dev-page-open #btn-restaurar-mobile{ display:none !important; }

    /* Painel premium em modal, no celular. Abrir a gaveta e
       trocar de aba escondia o croqui e exigia rolagem; o modal
       traz o conteúdo direto para a tela. */
    #modal-painel-backdrop{
      display:none;
      position:fixed; inset:0;
      background:rgba(2,6,23,.58);
      backdrop-filter:blur(3px);
      z-index:1340;
      align-items:center; justify-content:center;
      padding:16px;
    }
    #modal-painel-backdrop.open{ display:flex; }
    #modal-painel-backdrop.sobre-canvas{
      padding:18px;
      box-sizing:border-box;
      border-radius:16px;
      overflow:hidden;
      background:rgba(15,23,42,.50);
    }
    #modal-painel{
      background:#fff;
      border-radius:18px;
      box-shadow:0 22px 56px rgba(2,6,23,.32);
      width:min(95vw, 560px);
      max-height:86vh;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      animation:avEntra .16s ease-out;
    }
    #modal-painel-backdrop.sobre-canvas #modal-painel{
      width:min(calc(100% - 20px), 720px);
      max-height:calc(100% - 20px);
      border:1px solid rgba(255,255,255,.72);
      box-shadow:0 24px 64px rgba(2,6,23,.38);
    }
    .mp-cab{
      display:flex; align-items:center; gap:10px;
      padding:16px 18px 13px;
      border-bottom:1px solid #eef1f8;
      flex-shrink:0;
    }
    .mp-ico{ font-size:20px; line-height:1; }
    .mp-cab h2{ flex:1; font-size:17px; font-weight:800; margin:0; }
    #toolbar #mp-fechar, #mp-fechar{
      width:30px; height:30px; padding:0 !important;
      min-height:0 !important;
      border:1px solid #e2e8f0 !important;
      border-radius:9px;
      background:#f8fafc !important;
      color:#64748b !important;
      font-size:13px; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
    }
    #mp-fechar:hover{ background:#fee2e2 !important; color:#b91c1c !important; }
    .mp-corpo{
      padding:14px 16px 18px;
      overflow-y:auto;
      flex:1;
    }
    .mp-grade{
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
      align-items:start;
      gap:10px;
    }
    #mp-corpo .cq-thumb{
      width:100% !important;
      height:auto !important;
      aspect-ratio:auto !important;
      object-fit:contain !important;
      background:#fff !important;
      padding:4px !important;
      box-sizing:border-box !important;
    }

    /* Agradecimento após o download */
    #modal-obrigado-backdrop{
      display:none;
      position:fixed; inset:0;
      background:rgba(2,6,23,.58);
      backdrop-filter:blur(3px);
      z-index:1360;
      align-items:center; justify-content:center;
      padding:16px;
    }
    #modal-obrigado-backdrop.open{ display:flex; }
    #modal-obrigado{
      position:relative;
      background:#fff;
      border-radius:18px;
      box-shadow:0 22px 56px rgba(2,6,23,.32);
      width:min(92vw, 430px);
      max-height:min(90vh, 720px);
      overflow-y:auto;
      padding:28px 24px 24px;
      text-align:center;
      animation:avEntra .16s ease-out;
    }
    #toolbar #mo-fechar, #mo-fechar{
      position:absolute; top:12px; right:12px;
      width:28px; height:28px; padding:0 !important;
      min-height:0 !important;
      border:1px solid #e2e8f0 !important;
      border-radius:8px;
      background:#f8fafc !important;
      color:#64748b !important;
      font-size:12px; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
    }
    .mo-ico{ font-size:38px; line-height:1; margin-bottom:6px; }
    #modal-obrigado h2{
      margin:0 0 10px;
      font-size:18px; font-weight:800; color:#0f172a;
    }
    #modal-obrigado p{
      margin:0 0 20px;
      font-size:13px; line-height:1.6; color:#64748b;
    }
    #mo-pix[hidden], .mo-pix-midia[hidden], #mo-pix-copiar[hidden]{ display:none !important; }
    #mo-pix{
      margin:0 0 16px;
      padding:16px;
      border:1px solid #fde68a;
      border-radius:15px;
      background:linear-gradient(180deg,#fffbeb,#fff7ed);
      box-shadow:0 5px 16px rgba(180,83,9,.09);
    }
    #mo-pix h3{
      margin:0 0 7px;
      color:#92400e;
      font-size:17px;
      font-weight:850;
    }
    #modal-obrigado #mo-pix .mo-pix-texto{
      margin:0 0 12px;
      color:#78350f;
      font-size:12.5px;
      line-height:1.5;
    }
    /* No PC, os ajustes da via selecionada ocupam a coluna direita logo
       depois das ações gerais do elemento. */
    #obj-options-slot #faixa-bar,
    #obj-options-slot #curve-bar{
      width:100%;
      box-sizing:border-box;
      margin-top:10px;
    }
    .mo-pix-midia{
      display:flex;
      justify-content:center;
      margin:10px auto;
    }
    #mo-pix-gif{
      display:block;
      max-width:100%;
      max-height:150px;
      object-fit:contain;
      border-radius:11px;
    }
    #mo-pix-qr{
      display:block;
      width:min(180px, 62vw);
      height:min(180px, 62vw);
      object-fit:contain;
      padding:7px;
      box-sizing:border-box;
      border:1px solid #fed7aa;
      border-radius:12px;
      background:#fff;
    }
    #toolbar #mo-pix-copiar, #mo-pix-copiar{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      width:100%;
      margin-top:11px;
      padding:11px 13px !important;
      min-height:0 !important;
      border:1px solid #f59e0b !important;
      border-radius:10px;
      background:#f59e0b !important;
      color:#fff !important;
      font-family:inherit;
      font-size:13px;
      font-weight:750;
      line-height:1.2;
      cursor:pointer;
      box-shadow:0 3px 9px rgba(217,119,6,.2) !important;
      transform:none !important;
    }
    #mo-pix-copiar:hover{ background:#d97706 !important; }
    #mo-pix-copiar.copiado{
      border-color:#16a34a !important;
      background:#16a34a !important;
    }
    #mo-pix-status{
      min-height:16px;
      margin-top:5px;
      color:#166534;
      font-size:11px;
      font-weight:700;
    }
    #mo-pix-dinamico[hidden], #mo-pix-email-wrap[hidden]{display:none!important}
    .mo-pix-valores{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0}
    #toolbar .mo-pix-valor, .mo-pix-valor{
      min-height:38px!important;padding:8px!important;border:1px solid #fed7aa!important;
      border-radius:9px;background:#fff!important;color:#9a3412!important;font:750 12px/1.1 inherit;
      cursor:pointer;box-shadow:none!important;transform:none!important
    }
    #toolbar .mo-pix-valor.ativo, .mo-pix-valor.ativo{background:#fff7ed!important;border-color:#f97316!important;color:#c2410c!important;box-shadow:inset 0 0 0 1px #f97316!important}
    .mo-pix-campo{display:flex;flex-direction:column;gap:5px;margin-top:8px;text-align:left}
    .mo-pix-campo label{font-size:10.5px;font-weight:800;color:#92400e}
    .mo-pix-campo input{width:100%;min-height:39px;border:1px solid #fed7aa;border-radius:9px;background:#fff;padding:8px 10px;color:#431407;font:inherit;font-size:12px;outline:none}
    .mo-pix-campo input:focus{border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.12)}
    #toolbar #mo-pix-gerar, #mo-pix-gerar{width:100%;min-height:42px!important;margin-top:10px;padding:10px 12px!important;border:0!important;border-radius:10px;background:#2563eb!important;color:#fff!important;font:800 13px/1.2 inherit;cursor:pointer;box-shadow:0 4px 11px rgba(37,99,235,.22)!important;transform:none!important}
    #toolbar #mo-pix-gerar:disabled, #mo-pix-gerar:disabled{opacity:.6;cursor:wait}
    #toolbar #mo-compartilhar, #mo-compartilhar{
      display:flex; align-items:center; justify-content:center; gap:8px;
      width:100%;
      padding:13px !important;
      min-height:0 !important;
      border:none !important;
      border-radius:11px;
      background:linear-gradient(180deg,#25d366,#1fb855) !important;
      color:#fff !important;
      text-decoration:none;
      font-size:13.5px; font-weight:750;
      font-family:inherit;
      box-shadow:0 4px 12px rgba(37,211,102,.32) !important;
      transform:none !important;
      margin-bottom:10px;
    }
    #toolbar #mo-depois, #mo-depois{
      width:100%;
      padding:9px !important;
      min-height:0 !important;
      border:none !important;
      background:none !important;
      color:#94a3b8 !important;
      font-size:12px; font-weight:650;
      font-family:inherit; cursor:pointer;
      box-shadow:none !important;
      transform:none !important;
    }
    #mo-depois:hover{ color:#64748b !important; }

    /* Modal de login, no celular */
    #modal-login-backdrop{
      display:none;
      position:fixed; inset:0;
      background:rgba(2,6,23,.58);
      backdrop-filter:blur(3px);
      z-index:1345;
      align-items:center; justify-content:center;
      padding:16px;
    }
    #modal-login-backdrop.open{ display:flex; }
    #modal-login{
      background:#fff;
      border-radius:18px;
      box-shadow:0 22px 56px rgba(2,6,23,.32);
      width:min(94vw, 400px);
      max-height:88vh;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      animation:avEntra .16s ease-out;
    }
    .ml-cab{
      display:flex; align-items:center; gap:10px;
      padding:16px 18px 13px;
      border-bottom:1px solid #eef1f8;
      flex-shrink:0;
    }
    .ml-cab .ml-ico{ font-size:19px; line-height:1; }
    .ml-cab h2{ flex:1; font-size:16px; font-weight:800; margin:0; }
    #toolbar #ml-fechar, #ml-fechar{
      width:30px; height:30px; padding:0 !important;
      min-height:0 !important;
      border:1px solid #e2e8f0 !important;
      border-radius:9px;
      background:#f8fafc !important;
      color:#64748b !important;
      font-size:13px; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
    }
    .ml-corpo{
      padding:16px 18px 20px;
      overflow-y:auto;
    }
    /* O painel emprestado ocupa o modal sem a moldura própria dele */
    .ml-corpo #auth-panel{
      border:none;
      background:none;
      box-shadow:none;
      padding:0;
    }

    /* Vitrine dos modelos: mostra o que existe em vez de apenas
       barrar. Ver o conteúdo convence mais que um aviso. */
    #modal-vitrine-backdrop{
      display:none;
      position:fixed; inset:0;
      background:rgba(2,6,23,.6);
      backdrop-filter:blur(3px);
      z-index:1360;
      align-items:center; justify-content:center;
      padding:18px;
    }
    #modal-vitrine-backdrop.open{ display:flex; }
    #modal-vitrine{
      background:#fff;
      border-radius:18px;
      box-shadow:0 22px 56px rgba(2,6,23,.32);
      width:min(94vw, 620px);
      max-height:86vh;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      animation:avEntra .16s ease-out;
    }
    .mv-cab{
      display:flex; align-items:flex-start; gap:12px;
      padding:18px 20px 14px;
      border-bottom:1px solid #eef1f8;
      flex-shrink:0;
    }
    .mv-cab h2{ margin:0; font-size:18px; font-weight:800; }
    .mv-sub{ margin:3px 0 0; font-size:12px; color:#64748b; }
    .mv-cab > div{ flex:1; }
    #toolbar #mv-fechar, #mv-fechar{
      width:30px; height:30px; padding:0 !important;
      min-height:0 !important;
      border:1px solid #e2e8f0 !important;
      border-radius:9px;
      background:#f8fafc !important;
      color:#64748b !important;
      font-size:13px; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0;
    }
    .mv-lista{
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
      /* Cada cartão com a altura do seu conteúdo: esticar todos
         para a mesma altura forçava o recorte da miniatura */
      align-items:start;
      gap:12px;
      padding:16px 20px;
      overflow-y:auto;
      flex:1;
    }
    .mv-carregando{
      grid-column:1 / -1;
      padding:30px 0;
      text-align:center;
      color:#94a3b8;
      font-size:13px;
    }
    /* O cartão herda o visual da gaveta; aqui só o desfoque,
       que impede usar a miniatura no lugar do modelo */
    .mv-item{ position:relative; }
    /* A vitrine herda o cartão da gaveta; só o desfoque a
       distingue, impedindo usar a miniatura no lugar do modelo.
       A altura acompanha a imagem: qualquer proporção imposta ao
       quadro fazia a miniatura ser recortada no celular. */
    .mv-item{ position:relative; }
    #mv-lista .mv-item .cq-thumb{
      width:100% !important;
      height:auto !important;
      max-height:none !important;
      min-height:0 !important;
      aspect-ratio:auto !important;
      object-fit:contain !important;
      display:block !important;
      background:#fff !important;
      padding:4px !important;
      box-sizing:border-box !important;
      cursor:default;
    }
    /* O cartão não pode recortar o que a imagem ocupar */
    #mv-lista .mv-item{
      overflow:visible !important;
      height:auto !important;
      display:flex;
      flex-direction:column;
    }
    .mv-cad{
      position:absolute;
      top:8px; right:8px;
      width:26px; height:26px;
      border-radius:50%;
      background:rgba(255,255,255,.94);
      display:flex; align-items:center; justify-content:center;
      font-size:12px;
      box-shadow:0 2px 6px rgba(2,6,23,.18);
    }
    .mv-rodape{
      display:flex; align-items:center; gap:12px;
      padding:14px 20px 16px;
      border-top:1px solid #eef1f8;
      background:#fffbeb;
      flex-shrink:0;
    }
    .mv-chamada{ flex:1; min-width:0; }
    .mv-chamada strong{ display:block; font-size:13px; color:#78350f; }
    .mv-chamada span{ font-size:11.5px; color:#a16207; }
    #toolbar #mv-assinar, #mv-assinar{
      padding:12px 18px !important;
      min-height:0 !important;
      border:none !important;
      border-radius:11px;
      background:linear-gradient(180deg,#f59e0b,#d97706) !important;
      color:#fff !important;
      font-size:13px; font-weight:750;
      font-family:inherit; cursor:pointer;
      white-space:nowrap;
      box-shadow:0 4px 12px rgba(217,119,6,.3) !important;
      transform:none !important;
    }
    #mv-assinar:hover{ filter:brightness(1.06); }

    @media (max-width: 820px){
      .mv-lista{
        grid-template-columns:repeat(auto-fill, minmax(124px, 1fr));
        gap:9px; padding:13px 15px;
      }
      .mv-rodape{ flex-direction:column; align-items:stretch; gap:9px; }
      #mv-assinar{ width:100%; }
      .mv-chamada{ text-align:center; }
    }

    /* Modal do rascunho */
    #modal-rascunho-backdrop{
      display:none;
      position:fixed; inset:0;
      background:rgba(2,6,23,.55);
      backdrop-filter:blur(3px);
      z-index:1350;
      align-items:center; justify-content:center;
      padding:20px;
    }
    #modal-rascunho-backdrop.open{ display:flex; }
    #modal-rascunho{
      background:#fff;
      border-radius:18px;
      box-shadow:0 22px 56px rgba(2,6,23,.3);
      width:min(94vw, 380px);
      padding:20px;
      animation:avEntra .16s ease-out;
    }
    .mr-cab{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
    .mr-ico{ font-size:22px; line-height:1; }
    .mr-cab h2{ flex:1; font-size:17px; font-weight:800; margin:0; }
    #toolbar #mr-fechar, #mr-fechar{
      width:28px; height:28px; padding:0 !important;
      min-height:0 !important;
      border:1px solid #e2e8f0 !important;
      border-radius:8px;
      background:#f8fafc !important;
      color:#64748b !important;
      font-size:12px; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
    }
    .mr-preview{
      margin:0 0 14px;
      border:1px solid #e7eaf3;
      border-radius:12px;
      overflow:hidden;
      background:#f1f5f9;
    }
    .mr-preview img{
      display:block;
      width:100%;
      aspect-ratio:4/3;
      object-fit:contain;
      background:#fff;
    }
    .mr-texto{
      font-size:13px; color:#475569; line-height:1.55;
      margin:0 0 18px;
    }
    .mr-acoes{ display:grid; gap:8px; }
    #toolbar .mr-bt-ok, .mr-bt-ok{
      width:100%;
      padding:13px !important;
      min-height:0 !important;
      border:none !important;
      border-radius:11px;
      background:linear-gradient(180deg,#16a34a,#15803d) !important;
      color:#fff !important;
      font-size:13.5px; font-weight:750;
      font-family:inherit; cursor:pointer;
      box-shadow:0 4px 12px rgba(22,163,74,.26) !important;
      transform:none !important;
    }
    #toolbar .mr-bt-no, .mr-bt-no{
      width:100%;
      padding:11px !important;
      min-height:0 !important;
      border:1px solid #e2e8f0 !important;
      border-radius:11px;
      background:#fff !important;
      color:#b91c1c !important;
      font-size:12.5px; font-weight:700;
      font-family:inherit; cursor:pointer;
      box-shadow:none !important;
      transform:none !important;
    }
    .mr-bt-no:hover{ background:#fef2f2 !important; }
    #btn-desfazer-mobile.pronto{
      background:linear-gradient(180deg,#16a34a,#15803d);
      color:#fff;
      cursor:pointer;
      box-shadow:0 0 0 3px #fff, 0 5px 16px rgba(22,163,74,.4);
    }
    #btn-desfazer-mobile.pronto:active{ transform:scale(.92); }
    #menu-overlay{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(2,6,23,.45);
      z-index:850;
    }
    #menu-overlay.on{ display:block; }

    /* ---------- TABLETS ---------- */
    /* ===== TELAS DE NOTEBOOK =====
       Em 1366×768 o conjunto barra + canvas + anúncios não cabe.
       Aqui os painéis encolhem por etapas antes de o canvas
       precisar ser reduzido. */

    /* Notebook grande: barra e anúncios mais estreitos.
       A sidebar mantém 332px, largura mínima para o anúncio
       de 300px caber sem cortar. */
    @media (max-width: 1700px){
      #toolbar{ width:380px; min-width:380px; }
      #via-sidebar{ width:310px; min-width:310px; max-width:310px; padding:14px; }
    }

    /* Notebook comum: barra compacta. A coluna do anúncio
       mantém 332px, largura mínima para os 300px caberem. */
    @media (max-width: 1500px){
      #toolbar{ width:340px; min-width:340px; padding:12px 12px 16px; }
      #via-sidebar{ width:290px; min-width:290px; max-width:290px; padding:12px; }
    }

    /* Em telas menores a coluna encolhe, mas continua disponível no PC. */
    @media (max-width: 1400px){
      #toolbar{ width:320px; min-width:320px; }
      #via-sidebar{ width:275px; min-width:275px; max-width:275px; padding:10px; }
      #toolbar button{ font-size:12px; padding:9px 10px; }
    }

    /* ===== BOTÕES DA BARRA EM TELAS MENORES =====
       Abaixo de 1500px o quadro encolhe e a barra precisa
       acompanhar: botões mais baixos e texto menor. */
    @media (max-width: 1600px){
      #action-save-png{
        height:36px !important;
        padding:0 13px !important;
        font-size:12px !important;
      }
      #btn-salvar-croqui,
      #action-clear-canvas{
        height:32px;
        padding:0 11px !important;
        font-size:11px;
      }
      #btn-salvar-croqui .sv-txt,
      #action-clear-canvas .cl-txt{ font-size:11px; }
      #barra-quadro .bq-label{ font-size:9.5px; }
      #sel-tamanho{ font-size:10.5px; padding:4px 7px; }
      #barra-quadro{ gap:6px; }
    }

    /* Mais estreito: os auxiliares ficam só com o ícone */
    @media (max-width: 1450px){
      #btn-salvar-croqui .sv-txt,
      #action-clear-canvas .cl-txt{ display:none; }
      #btn-salvar-croqui,
      #action-clear-canvas{
        padding:0 10px !important;
        gap:0;
      }
      #barra-quadro .bq-label{ display:none; }
    }

    /* Telas baixas: folgas e rodapé encolhem para sobrar
       altura ao quadro, que é o que importa */
    @media (max-height: 800px){
      #barra-quadro{ padding:6px 10px; margin-bottom:6px; }
      #canvas-container{ padding:8px 10px; }

      /* A barra lateral tem muito conteúdo: compacta os blocos */
      #toolbar{ padding:10px 12px 14px; }
      #toolbar h3{ margin:9px 0 6px; font-size:12px; }
      .tool-section{ padding:9px 10px; margin-bottom:7px; }
      #auth-panel{ padding:10px 12px; margin-bottom:8px; }
      .tabs{ margin-bottom:8px; }
      /* ===== PAINEL DA CANETA ===== */
    #pen-selectors{
      display:none;
      flex-direction:column;
      gap:9px;
      border:1px solid #bfdbfe;
      border-radius:13px;
      background:linear-gradient(180deg,#f8fbff,#eff6ff);
      padding:11px 12px 12px;
      margin-bottom:10px;
      box-shadow:0 1px 3px rgba(37,99,235,.08);
      animation:wsEntra .16s ease-out;
    }
    #pen-selectors .ws-titulo{ color:#1d4ed8 !important; }
    #pen-selectors .pen-linha{ display:flex; flex-direction:column; gap:6px; }
    #pen-selectors .pen-topo{
      display:flex; align-items:center; justify-content:space-between;
    }
    #pen-selectors .pen-rot{
      font-size:11px; font-weight:700; color:#475569;
    }
    #pen-selectors .pen-valor{
      font-size:11.5px; font-weight:800; color:#1d4ed8;
      background:#fff; padding:2px 9px; border-radius:999px;
      border:1px solid #dbeafe;
      min-width:46px; text-align:center;
    }
    #pen-selectors .pen-cores{
      display:flex; align-items:center; gap:5px; flex-wrap:wrap;
    }
    #toolbar #pen-selectors .sw,
    #pen-selectors .sw{
      width:22px; height:22px; padding:0 !important;
      border:2px solid #e2e8f0 !important;
      border-radius:7px;
      cursor:pointer;
      flex-shrink:0;
      transform:none !important;
      box-shadow:none !important;
      transition:transform .1s, border-color .1s;
    }
    #pen-selectors .sw:hover{ transform:scale(1.14) !important; }
    #pen-selectors .sw.sel{
      border-color:#0f172a !important;
      box-shadow:0 0 0 2px rgba(15,23,42,.14) !important;
    }
    #pen-selectors #pen-color{
      width:26px; height:22px; padding:0;
      border:1px solid #e2e8f0; border-radius:7px;
      cursor:pointer; background:#fff; flex-shrink:0;
    }
    #pen-selectors input[type=range]{
      width:100%; accent-color:#2563eb; cursor:pointer;
    }
    /* Amostra da espessura escolhida */
    #pen-selectors .pen-amostra{
      height:22px;
      display:flex; align-items:center;
      background:#fff;
      border:1px solid #dbeafe;
      border-radius:8px;
      padding:0 9px;
      overflow:hidden;
    }
    #pen-preview{
      display:block; width:100%;
      background:#000; border-radius:999px;
      height:3px;
      transition:height .1s, background .1s;
    }
    #pen-selectors .pen-legenda{
      font-size:10px; color:#64748b; line-height:1.4;
    }

    #width-selectors{ padding:9px 10px 10px; margin-bottom:8px; }
    }

    /* Telas bem baixas: o essencial */
    @media (max-height: 700px){
      #toolbar button{ padding:7px 9px; font-size:11.5px; }
      .tool-section{ padding:8px 9px; margin-bottom:6px; }
      #canvas-container{ padding:6px 8px; }
    }

    @media (max-width: 1100px){
      #toolbar{ width:300px; min-width:300px; }
      #via-sidebar{ width:255px; min-width:255px; max-width:255px; padding:9px; }
      #canvas-container{ padding:12px; }
    }

    /* ---------- CELULARES E TABLETS PEQUENOS ---------- */
    @media (max-width: 820px){
      body{
        overflow:hidden;
        /* 100vh inclui a área escondida atrás das barras de alguns
           navegadores móveis. O JS atualiza esta variável com a altura
           realmente visível e mantém todas as opções alcançáveis. */
        height:var(--altura-visual-mobile,100dvh);
        max-height:var(--altura-visual-mobile,100dvh);
      }

      #btn-menu-mobile, #btn-desfazer-mobile, #btn-aplicar-mobile{ display:flex; }
      #btn-restaurar-mobile.on{ display:flex; }
      /* Sem seleção, a barra some: as funções dela passaram
         para os blocos abaixo do quadro. Durante um traçado ela
         volta, senão o Aplicar ficaria inacessível. */
      #acoes-mobile{ display:none; }
      body.obj-selecionado #acoes-mobile{ display:flex; }
      /* O banner do celular é liberado pelo JS ao carregar */
      #banner-mobile.on{ display:block; }
      /* O Limpar já está na barra de ações flutuante */
      #action-clear-canvas{ display:none !important; }
      /* Sem ele, a barra volta a ter dois blocos */
      /* Tudo numa linha só: o Baixar ocupava uma faixa inteira
         para si, e era a maior sobra de altura do topo. Com o
         texto encurtado os três cabem lado a lado. */
      #barra-quadro{
        grid-template-columns:auto 1fr auto;
        gap:5px;
        margin-bottom:4px;
      }
      #barra-quadro .bq-meio{
        grid-column:auto;
        order:0;
        min-width:0;
      }
      #barra-quadro .bq-esq{ order:-1; min-width:0; }
      #barra-quadro .bq-dir{ order:1; }

      #action-save-png{
        width:100%;
        height:34px !important;
        padding:0 6px !important;
        justify-content:center;
        gap:4px;
        font-size:9.5px;
        line-height:1.15;
        white-space:normal;
        text-align:center;
      }
      /* Nome completo, como no computador: só a ordem dos blocos
         muda no celular, não o texto do botão principal */
      #action-save-png .dl-txt{ font-size:9.5px; font-weight:800; }

      #action-professional{ width:100%; height:34px; font-size:11.5px; }

      /* Ícone de disquete + "Salvar Croqui" por extenso, em vez de
         só o ícone que sobrava no celular */
      #btn-salvar-croqui{
        height:34px; padding:0 8px;
        white-space:normal; line-height:1.1;
        gap:3px;
      }
      #btn-salvar-croqui .sv-ico{ font-size:13px; }
      #btn-salvar-croqui .sv-txt{
        display:inline !important;
        font-size:0;
      }
      #btn-salvar-croqui .sv-txt::after{
        content:'Salvar Croqui';
        font-size:9.5px;
        font-weight:800;
      }

      #sel-tamanho{ width:100%; height:34px; font-size:11px; }

      /* Botões sociais compactos e colados no topo */
      #barra-social{ margin-bottom:5px !important; }
      /* Com a gaveta aberta, as ações rápidas saem da frente */
      body.menu-aberto #acoes-mobile{ display:none !important; }

      /* Canvas ocupa o espaço entre a barra e as ações */
      #canvas-container{
        flex-direction:column;
        justify-content:flex-start;
        align-items:center;
        padding:2px 8px 10px;
        min-height:0;
        overflow-x:hidden;
        overflow-y:auto;
        overscroll-behavior-y:contain;
        -webkit-overflow-scrolling:touch;
        scroll-padding-bottom:max(18px,env(safe-area-inset-bottom));
      }

      /* A barra de ferramentas vira gaveta lateral */
      #toolbar{
        position:fixed;
        top:0; left:0; bottom:0;
        width:min(86vw, 360px);
        min-width:0;
        z-index:880;
        transform:translateX(-102%);
        transition:transform .26s cubic-bezier(.4,0,.2,1);
        box-shadow:6px 0 26px rgba(2,6,23,.22);
        padding-bottom:80px;
      }
      #toolbar.aberto{ transform:translateX(0); }

      /* Canvas ocupa a largura toda */
      #main-row{ flex-direction:column; }
      #croqui-canvas-wrapper{
        border-radius:12px;
        max-width:100%;
      }

      /* No celular o rodapé institucional ocupa a faixa necessária
         aos controles rápidos e não acrescenta nada ao editor. */
      #main-row + div,
      #site-footer{ display:none !important; }

      /* Botões sociais em linha própria, fora do canvas —
         antes ficavam sobrepostos aos controles do quadro */
      #btn-notas, #btn-tutorial, #btn-instagram{
        position:static !important;
        width:27px; height:27px;
        top:auto; right:auto;
        flex-shrink:0;
      }
      #notas-ico{ font-size:15px; }
      #barra-social{
        display:flex !important;
        justify-content:flex-end;
        align-items:center;
        gap:7px;
        width:100%;
        max-width:100%;
        /* Reserva a ponta direita, onde ficam os botões de Fórum
           (agora com texto) e Compartilhar flutuando lado a lado */
        padding-right:212px;
        box-sizing:border-box;
        margin-bottom:8px;
        order:-1;
      }

      /* Tutorial vira só o ícone no celular */
      #btn-tutorial{
        height:27px;
        width:27px;
        padding:0;
        justify-content:center;
        top:10px; right:56px;
      }
      #tut-txt{ display:none; }

      #btn-instagram{
        width:38px; height:38px;
        top:10px; right:102px;
      }

      /* No celular, preserva a restauração do rascunho nesta faixa,
         mas remove apenas os atalhos sociais que ocupavam o topo. */
      #btn-instagram,
      #btn-tutorial,
      #btn-notas,
      #btn-forum-desktop{ display:none !important; }
      /* Fórum fora do celular por enquanto: continua acessível
         pelo tutorial e pela versão de computador */
      #btn-forum-mobile{ display:none !important; }
      #barra-social{
        justify-content:flex-end;
        margin-bottom:2px !important;
      }
      #canvas-container{ padding-top:0; }

      /* Barra do quadro compacta no celular */
      #barra-quadro{
        gap:7px;
        margin-bottom:7px;
      }
      #barra-quadro .bq-label{ display:none; }
      #sel-tamanho{ padding:7px 9px; font-size:11px; }
      /* Visualizador de croquis no celular */
      #modal-galeria{ padding:18px 14px 16px !important; }
      .gal-palco{ padding:8px; }
      .gal-imagem{ height:38vh; min-height:210px; padding:0 38px; }
      .gal-seta{ width:38px; height:38px; font-size:19px; }
      .gal-ant{ left:4px; }
      .gal-prox{ right:4px; }

      /* Modal do tutorial ocupa quase a tela */
      #modal-tutorial{
        width:96vw !important;
        padding:20px 16px 16px !important;
      }
      #modal-tutorial h2{ font-size:17px; }
      .tut-acoes button, .tut-acoes a{ min-width:0; font-size:12px; padding:11px; }

      /* Modais ocupam quase a tela */
      #modal-cadastro, #modal-recuperar, #modal-stats,
      #modal-notas, #modal-salvar, #modal-premium,
      #modal-laudo, #modal-galeria, #modal-tutorial{
        width:94vw !important;
        max-width:94vw !important;
        max-height:88vh !important;
        overflow-y:auto;
      }

      /* Barra flutuante do objeto: botões maiores para o dedo */
      #obj-toolbar button{ width:36px; height:36px; }
      #obj-toolbar .obj-ico{ font-size:16px; }

      /* Alvos de toque maiores nos botões de ferramenta */
      #toolbar button:not(.tab-btn){ min-height:40px; }
      .tabs{ position:sticky; top:0; z-index:5; }
    }

    /* ---------- CELULARES PEQUENOS ---------- */
    @media (max-width: 420px){
      #toolbar{ width:92vw; }
      .tab-btn{ font-size:10.5px; min-height:42px; padding:8px !important; gap:5px; }
      .tab-btn .tb-ico{ font-size:14px; }
      #acoes-mobile .am-pagina button{
      width:42px;
      min-width:0;
      padding:0 2px;
    }
    #acoes-mobile button{ width:44px; min-height:44px; padding:4px 2px; }
      #acoes-mobile .am-txt{ font-size:7.5px; }
      #acoes-mobile .am-ico{ font-size:14px; }
      #acoes-mobile{ bottom:12px; right:12px; gap:4px; padding:4px; }
      #btn-menu-mobile{
        width:50px; height:50px;
        bottom:12px; left:12px;
      }
      #btn-desfazer-mobile{ width:88px; height:42px; bottom:16px; left:70px; font-size:12px; }
      #btn-aplicar-mobile{ width:88px; height:42px; bottom:16px; left:166px; font-size:12px; }
      #btn-restaurar-mobile{ width:96px; height:42px; bottom:16px; left:262px; font-size:11.5px; }
      /* Telas estreitas: só o ícone, para não ser cortado */
      @media (max-width: 380px){
        #btn-restaurar-mobile{ width:44px; left:262px; gap:0; }
        #btn-restaurar-mobile span:not(.rst-ico){ display:none; }
      }
    }

    /* ---------- TELA BAIXA (celular deitado) ---------- */
    @media (max-height: 520px) and (max-width: 900px){
      #btn-menu-mobile{ width:44px; height:44px; font-size:18px; }
    }
    /* Precisa vencer regras com ID, como #toolbar .tab-btn,
       que usam display:flex !important */
    #toolbar .prem-oculto,
    #toolbar button.prem-oculto,
    #barra-quadro .prem-oculto,
    .tabs .prem-oculto,
    .prem-oculto{
      display:none !important;
    }

    /* Agrupador dos botões sociais — só estrutura no celular */
    #barra-social{ display:contents; }

    /* Desktop: links sociais participam do fluxo e reservam sua própria
       altura, inclusive em janelas estreitas ou com zoom do navegador. */
    @media (min-width:821px){
      #main-row > #canvas-container{
        flex-direction:column;
        min-width:0;
      }
      #canvas-container > #barra-social + div{
        min-width:0;
        max-width:100%;
      }
      #canvas-container #barra-social{
        display:flex;
        position:static;
        flex-wrap:wrap;
        align-items:center;
        justify-content:flex-end;
        gap:8px;
        width:960px;
        max-width:100%;
        box-sizing:border-box;
        padding:0;
        margin:0 0 12px;
        flex-shrink:0;
      }
      #barra-social #btn-forum-desktop,
      #barra-social #btn-instagram,
      #barra-social #btn-tutorial,
      #barra-social #btn-notas{
        position:static !important;
        inset:auto !important;
        transform:none;
        flex-shrink:0;
        max-width:100%;
      }
      #canvas-container #barra-quadro{
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        justify-content:space-between;
        gap:8px 12px;
        flex-shrink:0;
      }
      #canvas-container #barra-quadro .bq-meio{flex:1 1 auto;}
      #canvas-container #barra-quadro .bq-dir{flex-wrap:wrap;max-width:100%;}
    }

    /* Os três botões flutuam no canto superior direito do quadro
       e ocupam cerca de 190px. Reservar esse espaço na barra evita
       que o "Salvar croqui" fique por baixo deles em telas menores. */
    @media (min-width: 821px) and (max-width: 1600px){
      #canvas-container{ padding-top:12px !important; }
      #btn-instagram, #btn-tutorial, #btn-notas{ top:10px !important; }
    }

    /* No celular em pé, cada pixel horizontal aumenta também a altura
       visível do quadro. Usa quase toda a largura da tela, mantendo uma
       pequena proteção para a borda e sem tocar na área dos controles. */
    @media (max-width:820px) and (orientation:portrait){
      /* Reserva real para Entrar/Fórum/Compartilhar. Antes eles ficavam
         fixos sobre o conteúdo e disputavam espaço com a barra do quadro.
         Como o body usa border-box, esta faixa é retirada da antiga sobra
         inferior e não aumenta a altura total da página. */
      body{
        padding-top:max(46px, calc(env(safe-area-inset-top) + 38px));
      }
      #btn-login-mobile,
      #topo-direita-mobile{
        top:max(8px, env(safe-area-inset-top));
      }
      #canvas-container{
        padding-left:2px !important;
        padding-right:2px !important;
        padding-top:0 !important;
      }
      #croqui-canvas-wrapper{ border-radius:9px; }
      #barra-quadro{ margin-bottom:4px; }
    }

    @media (max-width:360px) and (orientation:portrait){
      #btn-login-mobile{ left:7px; padding-left:8px; padding-right:8px; font-size:10.5px; }
      #topo-direita-mobile{ right:7px; gap:4px; }
      #btn-forum-topo-mobile{ padding-left:8px; padding-right:8px; font-size:10.5px; }
      #btn-compartilhar-mobile{ padding-left:8px; padding-right:9px; font-size:10.5px; }
    }

    /* Atalho do relatório: ocupa a linha inteira, como o Dev */
    #toolbar #btn-pdf-lateral,
    #toolbar #btn-seq-abrir{
      grid-column:1 / -1;
    }

    /* Limpar quadro, ao lado do salvar */
    #toolbar #action-clear-canvas,
    #action-clear-canvas{
      height:38px;
      padding:0 15px !important;
      border:none !important;
      border-radius:10px;
      background:linear-gradient(180deg,#ef4444,#dc2626) !important;
      color:#fff !important;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      width:auto;
      font-size:12px;
      font-weight:700;
      white-space:nowrap;
      font-family:inherit;
      box-shadow:0 3px 10px rgba(220,38,38,.24) !important;
      transition:transform .12s, box-shadow .12s, filter .12s;
      transform:none;
    }
    #action-clear-canvas:hover{
      transform:translateY(-1px) !important;
      box-shadow:0 6px 15px rgba(220,38,38,.34) !important;
      filter:brightness(1.05);
    }
    #action-clear-canvas .cl-ico{
      font-size:13px; line-height:1; pointer-events:none;
    }

    /* ===== CONSTRUTOR DE VIAS =====
       Painel único para reta e curva. Fica sobre o quadro para que a
       orientação permaneça visível mesmo quando a gaveta é fechada. */
    #via-construtor{
      position:relative;
      z-index:20;
      left:auto; top:auto;
      transform:none;
      display:none;
      flex-direction:column;
      align-items:stretch;
      gap:8px;
      width:100%;
      max-width:100%;
      padding:14px;
      border:1px solid rgba(148,163,184,.45);
      border-radius:14px;
      background:rgba(255,255,255,.96);
      box-shadow:0 8px 26px rgba(15,23,42,.18);
      backdrop-filter:blur(10px);
      font-size:12px;
      color:#334155;
      user-select:none;
    }
    #via-construtor.on{ display:flex; }
    .vc-modos,.vc-props,.vc-snaps,.vc-acoes{ display:grid; gap:6px; }
    #vc-precisao{border:1px solid #dbe4ef;border-radius:10px;padding:10px;background:#f8fafc;min-width:0;}
    #vc-precisao summary{cursor:pointer;font-weight:700;color:#1e40af;min-height:28px;}
    #vc-precisao p{font-size:11px;line-height:1.5;margin:8px 0;color:#64748b;}
    #vc-precisao .vc-medidas-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
    #vc-precisao label{display:grid;gap:5px;font-size:11px;}
    #vc-precisao input{width:100%;min-width:0;min-height:40px;border:1px solid #cbd5e1;border-radius:7px;padding:6px;background:#fff;color:#0f172a;font:inherit;}
    #vc-precisao button{width:100%;margin-top:6px;}
    #vc-precisao-status:empty{display:none;}
    #vc-suavidade-campo{display:grid;gap:8px;padding:10px;border:1px solid #dbe4ef;border-radius:10px;background:#f8fafc;}
    #vc-suavidade-campo[hidden]{display:none;}
    #vc-suavidade-campo output{float:right;font-variant-numeric:tabular-nums;color:#1d4ed8;}
    #vc-suavidade{width:100%;min-height:28px;accent-color:#2563eb;}
    #via-construtor button:disabled{opacity:.5;cursor:not-allowed;}
    @media(max-width:820px){
      #vc-precisao{grid-area:precisao;}
      #vc-suavidade-campo{grid-area:suavidade;}
      #vc-precisao input{font-size:16px;}
    }
    .vc-modos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    #vc-automatica{grid-column:1 / -1;}
    .vc-props,.vc-snaps,.vc-acoes{ grid-template-columns:1fr; }
    #vc-continuo{ grid-column:auto; }
    .vc-props label{
      display:grid;
      grid-template-columns:72px minmax(0,1fr);
      align-items:center;
      gap:7px;
      font-weight:700;
      color:#64748b;
    }
    .vc-props select{
      height:34px; border:1px solid #cbd5e1; border-radius:9px;
      width:100%; min-width:0;
      background:#fff; color:#0f172a; padding:0 6px; font:700 11px inherit;
    }
    #via-construtor button{
      min-height:34px;
      border:1px solid #cbd5e1;
      border-radius:9px;
      background:#fff;
      color:#334155;
      padding:0 10px;
      font:700 11px/1 inherit;
      cursor:pointer;
      white-space:nowrap;
    }
    #via-construtor button:hover{ border-color:#93c5fd; background:#eff6ff; }
    #via-construtor button.ativo{
      border-color:#2563eb;
      background:#2563eb;
      color:#fff;
      box-shadow:0 2px 8px rgba(37,99,235,.24);
    }
    #via-construtor button:disabled{ opacity:.45; cursor:default; }
    #vc-aplicar{ border-color:#16a34a !important; color:#15803d !important; }
    #vc-aplicar.pronto{ background:#16a34a !important; color:#fff !important; }
    #vc-cancelar{ color:#b91c1c !important; }
    .vc-orientacao{
      min-width:0;
      max-width:none;
      line-height:1.25;
      padding:2px 2px 8px;
      border-bottom:1px solid #e2e8f0;
      display:grid;
      grid-template-columns:minmax(0,1fr) 92px;
      grid-template-rows:auto auto;
      column-gap:8px;
    }
    #vc-etapa{ grid-column:1; grid-row:1; display:block; font-weight:800; color:#0f172a; }
    #vc-dica{ grid-column:1; grid-row:2; display:block; margin-top:2px; color:#64748b; }
    #vc-medida{
      grid-column:2; grid-row:1 / 3; align-self:center;
      width:92px; min-width:92px; height:30px;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
      border:1px solid #bfdbfe; border-radius:999px;
      background:#eff6ff; color:#2563eb; font-size:11px; font-weight:850;
      font-variant-numeric:tabular-nums;
      visibility:hidden;
    }
    #vc-medida.on{ visibility:visible; }

    @media (max-width:820px){
      #via-sidebar{ display:none !important; }
      #via-construtor{
        position:relative;
        left:auto; top:auto;
        transform:none;
        width:100%;
        max-width:none;
        height:auto;
        min-height:0;
        margin-top:8px;
        padding:10px;
        gap:7px;
        grid-template-columns:minmax(0,1fr);
        grid-template-rows:auto;
        grid-template-areas:
          "acoes"
          "orientacao"
          "modos"
          "propriedades"
          "suavidade"
          "precisao"
          "encaixes";
        align-items:stretch;
        border-radius:12px;
        overflow:visible;
        contain:layout;
        flex:0 0 auto;
        padding-bottom:max(10px,env(safe-area-inset-bottom));
        scroll-margin-bottom:max(18px,env(safe-area-inset-bottom));
      }
      #via-construtor.on{ display:grid; }
      #via-construtor button{ min-height:40px; padding:0 11px; font-size:11px; }
      .vc-orientacao{ grid-area:orientacao; }
      .vc-modos{ grid-area:modos; }
      .vc-props{ grid-area:propriedades; }
      .vc-snaps{ grid-area:encaixes; }
      .vc-acoes{ grid-area:acoes; }
      .vc-acoes{
        position:sticky;
        top:0;
        z-index:3;
        padding-bottom:7px;
        border-bottom:1px solid #e2e8f0;
        background:rgba(255,255,255,.98);
      }
      .vc-modos,.vc-acoes{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:5px;
      }
      .vc-props{
        grid-template-columns:minmax(0,1fr);
        gap:5px;
      }
      .vc-snaps{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:5px;
      }
      /* No celular todo traçado já permanece em prévia até Aplicar;
         portanto um botão separado de modo contínuo seria redundante. */
      #vc-continuo{ display:none !important; }
      #via-construtor button{
        min-width:0;
        padding:0 5px;
        overflow:hidden;
        text-overflow:ellipsis;
        font-size:10.5px;
      }
      .vc-props label{
        display:grid;
        grid-template-columns:82px minmax(0,1fr);
        align-items:center;
        min-width:0;
        min-height:38px;
        padding:0 6px;
        border:1px solid #e2e8f0;
        border-radius:9px;
        background:#f8fafc;
      }
      .vc-props select{ height:34px; width:100%; max-width:none; font-size:11px; }
      .vc-props label>span{
        display:block;
        font-size:11px;
        color:#334155;
        white-space:nowrap;
      }
      #vc-calcadas{
        grid-column:1 / -1;
        font-size:11px !important;
        text-overflow:clip !important;
      }
      .vc-orientacao{
        min-width:0;
        max-width:none;
        min-height:38px;
        text-align:left;
        padding:0 3px 5px;
        overflow:hidden;
      }
      #vc-etapa,#vc-dica{
        display:block;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      #vc-dica{ font-size:10px; }
      /* Enquanto o construtor está ativo, ele é a única barra abaixo do
         quadro. Cancelar devolve imediatamente os demais atalhos. */
      body.construtor-via-ativo #faixa-aplicar-via,
      body.construtor-via-ativo #btn-aplicar-mobile,
      body.construtor-via-ativo #btn-desfazer-mobile,
      body.construtor-via-ativo #btn-restaurar-mobile,
      body.construtor-via-ativo #btn-menu-mobile,
      body.construtor-via-ativo #acoes-mobile,
      body.construtor-via-ativo #blocos-acesso,
      body.construtor-via-ativo #premium-mobile,
      body.construtor-via-ativo #banner-mobile{ display:none !important; }
    }