#cfgWrap{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
#cfgForm{background:#fff;border-radius:12px;padding:20px;max-width:440px;width:100%;display:flex;flex-direction:column;gap:10px;color:#222}
#cfgForm label{display:flex;flex-direction:column;gap:4px;font-size:14px} #cfgForm input{padding:10px;font-size:16px}
#cfgForm .row{display:flex;gap:8px} #cfgForm .err{color:#b00020;margin:0;font-size:13px}
#cfgLink{position:fixed;right:8px;bottom:8px;opacity:.55;font-size:12px;z-index:10}

/* ---------- telemóvel / ecrãs estreitos (só na versão browser) ---------- */
@media (max-width: 720px) {
  .top { padding: 8px 12px; gap: 8px }
  .brand h1 { font-size: 18px }
  .tabs { padding: 0 8px; overflow-x: auto }
  .tabs button { flex: 1 0 auto; padding: 10px 12px }
  main { padding: 12px 10px }
  .subtabs { overflow-x: auto; white-space: nowrap }
  .reg { grid-template-columns: 1fr !important; gap: 10px }
  .side { flex-direction: row; flex-wrap: wrap }
  .obj { flex-wrap: wrap; gap: 6px }
  .obj > :first-child { flex: 1 1 100%; min-width: 0 }
  .stages { width: 100%; justify-content: space-between; gap: 6px }
  .stg { width: auto; flex: 1 1 0 }
  .grp { flex-wrap: wrap; gap: 6px }
  .grid5, .grid5.edit { grid-template-columns: 1fr }
  .exportbar { flex-wrap: wrap }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch }
  dialog { max-width: 94vw; width: 94vw }
  button, select, input { min-height: 40px }
  #cfgLink { bottom: 4px }
}