:root{
  --bg:#08111f;
  --bg2:#0c1830;
  --panel:#121b34;
  --panel2:#172243;
  --panel3:#1a274d;
  --card:#121b34;
  --cardSoft:rgba(18,27,52,.88);
  --text:#edf2ff;
  --muted:#b8c4e4;
  --muted2:#90a0c8;
  --border:rgba(255,255,255,.10);
  --borderStrong:rgba(255,255,255,.16);
  --accent:#4ea1ff;
  --accent2:#2d7ff0;
  --accentSoft:rgba(78,161,255,.16);
  --ok:#18a957;
  --warn:#d6a400;
  --danger:#d64545;
  --dangerSoft:rgba(214,69,69,.18);
  --okSoft:rgba(24,169,87,.18);
  --warnSoft:rgba(214,164,0,.18);
  --shadow:0 12px 40px rgba(0,0,0,.30);
  --radius:18px;
  --radiusSm:14px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}

html,body{
  min-height:100%;
}

body{
  margin:0;
  background:
    radial-gradient(circle at top left, rgba(78,161,255,.12), transparent 26%),
    radial-gradient(circle at top right, rgba(78,161,255,.07), transparent 22%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  color:var(--text);
}

a{
  color:inherit;
}

.layout{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width:240px;
  flex:0 0 240px;
  padding:18px 12px;
  display:flex;
  flex-direction:column;
  gap:14px;
  position:sticky;
  top:0;
  height:100vh;
  background:
    linear-gradient(180deg, rgba(8,16,35,.95) 0%, rgba(11,21,46,.98) 100%);
  border-right:1px solid var(--border);
  backdrop-filter: blur(6px);
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px;
  border-radius:22px;
  background:linear-gradient(135deg, rgba(78,161,255,.16), rgba(255,255,255,.03));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.logo{
  width:52px;
  height:52px;
  min-width:52px;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  color:#0f1a34;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:.4px;
  font-size:24px;
}

h1{
  margin:0;
  font-size:16px;
  line-height:1.15;
  font-weight:800;
}

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

.nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:6px;
}

.nav a{
  color:var(--text);
  text-decoration:none;
  background:rgba(255,255,255,.07);
  border:1px solid transparent;
  padding:12px 14px;
  border-radius:14px;
  font-size:14px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
  transition:all .18s ease;
}

.nav a:hover{
  background:rgba(255,255,255,.11);
  border-color:var(--border);
  transform:translateY(-1px);
}

.nav a.active{
  background:linear-gradient(135deg, rgba(78,161,255,.22), rgba(255,255,255,.05));
  border-color:rgba(78,161,255,.35);
  color:#fff;
  font-weight:800;
}

.sideBottom{
  margin-top:auto;
  display:grid;
  gap:8px;
  padding:12px 10px 0;
  border-top:1px solid var(--border);
}

.main{
  flex:1;
  min-width:0;
}

.container{
  max-width:1280px;
  margin:0 auto;
  padding:24px;
}

.card{
  background:var(--cardSoft);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  backdrop-filter: blur(4px);
}

.footer{
  padding:12px 24px 20px;
  color:var(--muted2);
  font-size:12px;
  text-align:center;
}

.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.grid{
  display:grid;
  gap:12px;
}

.grid-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

label{
  font-size:12px;
  color:var(--muted);
  display:block;
  margin-bottom:6px;
}

input,select,textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  font-size:14px;
  color:var(--text);
  background:rgba(6,13,28,.92);
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input::placeholder,
textarea::placeholder{
  color:var(--muted2);
}

input:focus,select:focus,textarea:focus{
  border-color:rgba(78,161,255,.55);
  box-shadow:0 0 0 3px rgba(78,161,255,.14);
  background:rgba(9,18,37,.98);
}

textarea{
  min-height:110px;
  resize:vertical;
}

button,
.fileTrigger{
  appearance:none;
  border:0;
  border-radius:14px;
  padding:12px 16px;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  transition:all .18s ease;
  text-decoration:none;
}

button{
  background:linear-gradient(135deg, #4da3ff 0%, #2086ff 48%, #0b6ee8 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 28px rgba(32,134,255,.34), inset 0 1px 0 rgba(255,255,255,.22);
  opacity:1;
}

button:hover,
.fileTrigger:hover{
  transform:translateY(-1px);
  opacity:1;
}

button.secondary,
.fileTrigger.secondary{
  background:rgba(255,255,255,.05);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:none;
}

button.danger{
  background:linear-gradient(135deg, #dd4653, #b51f3a);
  color:#fff;
  box-shadow:0 8px 22px rgba(181,31,58,.24);
}

button:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

#btnNew{
  font-weight:900;
  text-shadow:0 1px 1px rgba(0,0,0,.18);
}

hr{
  border:0;
  border-top:1px solid var(--border);
  margin:16px 0;
}

.badge{
  display:inline-flex;
  gap:6px;
  align-items:center;
  font-size:12px;
  padding:7px 11px;
  border-radius:999px;
  background:var(--accentSoft);
  color:#dcebff;
  border:1px solid rgba(78,161,255,.22);
}

.badge.secondary{
  background:rgba(255,255,255,.05);
  color:var(--text);
  border:1px solid var(--border);
}

.badge.ok{
  background:var(--okSoft);
  color:#c8f0d6;
  border-color:rgba(24,169,87,.28);
}

.badge.warn{
  background:var(--warnSoft);
  color:#ffe9a4;
  border-color:rgba(214,164,0,.28);
}

.badge.danger{
  background:var(--dangerSoft);
  color:#ffd4d4;
  border-color:rgba(214,69,69,.28);
}

.small{
  font-size:12px;
  color:var(--muted2);
}

.table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  border-radius:14px;
  overflow:hidden;
}

.table th,.table td{
  border-bottom:1px solid var(--border);
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
}

.table th{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.table tr:hover td{
  background:rgba(255,255,255,.02);
}

.kv{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:10px;
}

.kv div:nth-child(odd){
  color:var(--muted);
  font-size:12px;
}

.toast{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  background:rgba(6,13,28,.96);
  color:#dcebff;
  padding:13px 15px;
  border-radius:16px;
  border:1px solid rgba(78,161,255,.22);
  box-shadow:var(--shadow);
  max-width:920px;
  margin:0 auto;
  font-size:13px;
  z-index:9999;
}

pre{
  white-space:pre-wrap;
  background:rgba(6,13,28,.92);
  color:#dcebff;
  padding:14px;
  border-radius:14px;
  border:1px solid var(--border);
}

.pageHero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:18px 20px;
  margin-bottom:16px;
  border-radius:22px;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(78,161,255,.16), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
}

.pageHero h2{
  margin:0 0 6px;
  font-size:20px;
  line-height:1.2;
}

.pageHero p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}

.pageActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
}

.projectCreateHint{
  width:100%;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  text-align:right;
}

.fileTrigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.projectList{
  display:grid;
  gap:14px;
}

.projectCard{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:18px;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.projectCard:hover{
  transform:translateY(-1px);
  border-color:rgba(78,161,255,.28);
  background:rgba(255,255,255,.05);
}

.projectTitle{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.projectTitle h3{
  margin:0;
  font-size:18px;
  line-height:1.25;
}

.projectMeta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.projectMetaItem{
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
}

.projectMetaItem .label{
  display:block;
  margin-bottom:6px;
  font-size:11px;
  color:var(--muted2);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.projectMetaItem .value{
  font-size:14px;
  color:var(--text);
  font-weight:700;
}

.projectActions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}

.emptyState{
  padding:24px;
  text-align:center;
  border-radius:18px;
  border:1px dashed rgba(78,161,255,.28);
  background:rgba(255,255,255,.03);
}

.emptyState h3{
  margin:0 0 8px;
  font-size:18px;
}

.emptyState p{
  margin:0;
  color:var(--muted);
}

.tipBox{
  margin-top:14px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  color:var(--muted);
}

.sectionPanel{
  margin-top:16px;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}

.sectionPanel h3{
  margin:0 0 10px;
  font-size:16px;
}

@media (max-width: 1100px){
  .projectCard{
    grid-template-columns:1fr;
  }

  .projectActions{
    justify-content:flex-start;
  }

  .projectMeta{
    grid-template-columns:1fr;
  }
}

@media (max-width: 920px){
  .layout{
    flex-direction:column;
  }

  .sidebar{
    width:auto;
    flex:0 0 auto;
    height:auto;
    position:static;
    border-right:0;
    border-bottom:1px solid var(--border);
  }

  .nav{
    flex-direction:row;
    flex-wrap:wrap;
  }

  .sideBottom{
    margin-top:0;
    border-top:0;
    padding-top:0;
  }

  .container{
    padding:16px;
  }

  .pageHero{
    flex-direction:column;
  }

  .pageActions{
    width:100%;
    justify-content:flex-start;
  }

  .grid-2,
  .grid-3,
  .kv{
    grid-template-columns:1fr;
  }
}

/* == FASE2_ETAPA4_SHELL_GLOBAL == */
.appShell{
  min-height:calc(100vh - 110px);
  padding:20px;
  background:rgba(18,27,52,.82);
}

.shellBadge{
  justify-content:center;
  width:100%;
  text-align:center;
  padding:10px 12px;
  font-weight:800;
  background:linear-gradient(135deg, rgba(78,161,255,.18), rgba(255,255,255,.05));
  border-color:rgba(78,161,255,.28);
}

.navText{
  display:block;
  width:100%;
}

.sideBottom .small{
  line-height:1.45;
}

.brand{
  border-radius:20px;
}

.footer{
  padding-top:0;
}

@media (max-width: 920px){
  .appShell{
    min-height:auto;
    padding:16px;
  }

  .shellBadge{
    width:auto;
  }
}

/* == FASE2_ETAPA5_REFINO_MODULOS == */
.appShell > h2,
.appShell > h3{
  margin-top:0;
}

.appShell h2{
  font-size:18px;
  line-height:1.2;
  margin-bottom:10px;
  font-weight:800;
}

.appShell h3{
  font-size:15px;
  line-height:1.3;
  margin-bottom:10px;
  font-weight:800;
  color:#f2f6ff;
}

.appShell p{
  color:var(--muted);
  line-height:1.55;
}

.appShell > * + *{
  margin-top:14px;
}

.appShell .row{
  gap:12px;
}

.appShell hr{
  margin:18px 0;
  border-top:1px solid rgba(255,255,255,.08);
}

.appShell .small{
  color:var(--muted);
}

.appShell textarea{
  min-height:110px;
}

.appShell .sectionPanel,
.appShell section,
.appShell fieldset{
  border-radius:18px;
}

.appShell fieldset{
  border:1px solid rgba(255,255,255,.08);
  padding:16px;
  background:rgba(255,255,255,.02);
}

.appShell legend{
  padding:0 8px;
  color:#f2f6ff;
  font-weight:800;
}

.appShell .card,
.appShell .sectionPanel{
  background:rgba(255,255,255,.03);
}

.appShell button.secondary,
.appShell .secondary{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  box-shadow:none;
}

.appShell input[type="checkbox"],
.appShell input[type="radio"]{
  width:18px;
  height:18px;
  min-width:18px;
  accent-color:var(--accent);
  box-shadow:none;
}

.appShell label:has(input[type="checkbox"]),
.appShell label:has(input[type="radio"]){
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  min-height:48px;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(78,161,255,.12);
  border:1px solid rgba(78,161,255,.26);
  color:var(--text);
  font-size:14px;
  font-weight:600;
  transition:all .18s ease;
}

.appShell label:has(input[type="checkbox"]):hover,
.appShell label:has(input[type="radio"]):hover{
  background:rgba(78,161,255,.16);
  border-color:rgba(78,161,255,.34);
}

.appShell label:has(input[type="checkbox"]) input,
.appShell label:has(input[type="radio"]) input{
  order:-1;
  margin:0;
}

.appShell label:has(input[type="checkbox"]:checked),
.appShell label:has(input[type="radio"]:checked){
  background:linear-gradient(135deg, rgba(78,161,255,.22), rgba(255,255,255,.05));
  border-color:rgba(78,161,255,.46);
  box-shadow:0 8px 18px rgba(45,127,240,.16);
}

.appShell .tipBox,
.appShell .infoBox,
.appShell .noteBox{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  color:var(--muted);
}

.appShell .actions,
.appShell .pageActions,
.appShell .projectActions{
  gap:10px;
}

.appShell .actions button,
.appShell .row button{
  min-height:46px;
}

.appShell table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:14px;
}

.appShell table th,
.appShell table td{
  padding:11px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
  vertical-align:top;
}

.appShell table th{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.appShell pre{
  border-radius:16px;
}

@media (max-width: 920px){
  .appShell label:has(input[type="checkbox"]),
  .appShell label:has(input[type="radio"]){
    min-height:44px;
    padding:10px 14px;
    font-size:13px;
  }
}

/* == FASE2_ETAPA6_MOLDURA_MODULOS == */
.moduleChrome{
  display:grid;
  gap:16px;
}

.moduleHeader{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  gap:14px;
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg, rgba(78,161,255,.12), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
}

.moduleHeaderMain h2{
  margin:0;
  font-size:20px;
  line-height:1.2;
}

.moduleEyebrow{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted2);
  margin-bottom:8px;
  font-weight:800;
}

.moduleHeaderTitleRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
}

.moduleHeaderMain p{
  margin:0;
  color:var(--muted);
}

.moduleHeaderMeta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.moduleMetaCard{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:grid;
  gap:6px;
}

.moduleMetaLabel{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted2);
}

.moduleMetaCard strong{
  font-size:14px;
  color:var(--text);
}

.moduleContent{
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}

.moduleContent > :first-child{
  margin-top:0 !important;
}

.moduleContent > :last-child{
  margin-bottom:0 !important;
}

@media (max-width: 1100px){
  .moduleHeader{
    grid-template-columns:1fr;
  }
}

@media (max-width: 920px){
  .moduleHeaderMeta{
    grid-template-columns:1fr;
  }

  .moduleContent{
    padding:14px;
  }
}

/* == FASE2_MARCA_OFICIAL_NO_APP == */
.brand{
  align-items:center;
}

.brandLogo{
  width:68px;
  height:68px;
  min-width:68px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.20));
}

@media (max-width: 920px){
  .brandLogo{
    width:60px;
    height:60px;
    min-width:60px;
  }
}

/* == FASE2_CORRECAO_MARCA_INLINE == */
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.brandLogo{
  width:74px;
  height:74px;
  min-width:74px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.20));
}

.brandText{
  min-width:0;
}

.brandText h1{
  margin:0;
}

@media (max-width: 920px){
  .brandLogo{
    width:62px;
    height:62px;
    min-width:62px;
  }
}

/* == FASE3_ETAPA8_LEITURA_TECNICA_NO_FLUXO == */
.diagnosticBanner{
  display:grid;
  gap:14px;
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(78,161,255,.18);
  background:linear-gradient(135deg, rgba(78,161,255,.10), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
}

.diagnosticBannerHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.diagnosticBannerHeader h3{
  margin:0;
}

.diagGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.diagCard{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:grid;
  gap:6px;
}

.diagLabel{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted2);
}

.diagCard strong{
  font-size:14px;
  color:var(--text);
}

.diagChips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.diagnosticReasons{
  display:grid;
  gap:8px;
}

.diagReasonItem,
.diagnosticHint{
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  color:var(--muted);
}

@media (max-width: 920px){
  .diagGrid{
    grid-template-columns:1fr;
  }

  .diagnosticBannerHeader{
    flex-direction:column;
  }
}

/* == FASE2_AJUSTE_COMPACTO_MARCA_E_RODAPE == */
.brand{
  align-items:center;
}

.brandText h1{
  font-size:11px !important;
  line-height:1.08 !important;
  letter-spacing:.01em;
  margin:0;
  word-break:break-word;
}

.brandText .sub{
  display:none !important;
}

.footer{
  display:none !important;
}

@media (max-width: 920px){
  .brandText h1{
    font-size:10px !important;
  }
}

/* == FASE2_AJUSTE_FINAL_MARCA_E_TIPBOX == */
.brandText h1{
  font-size:9px !important;
  line-height:1.00 !important;
  letter-spacing:0 !important;
}

@media (max-width: 920px){
  .brandText h1{
    font-size:8px !important;
  }
}

/* == FASE2_AJUSTE_CIRURGICO_MARCA == */
.brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
}

.brandText{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  flex:1;
  text-align:center;
}

.brandText h1{
  margin:0 auto !important;
  font-size:12px !important;
  line-height:1.06 !important;
  letter-spacing:.02em !important;
  font-weight:900 !important;
  color:#34c97b !important;
  text-align:center !important;
  white-space:normal !important;
  word-break:keep-all !important;
}

@media (max-width: 920px){
  .brand{
    gap:10px;
  }

  .brandText h1{
    font-size:11px !important;
  }
}

/* == FASE3_ETAPA9_BARRA_FLUXO_MODULOS == */
.moduleHeaderMeta{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.flowStepper{
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:8px;
}

.flowStep{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:52px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--text);
  text-decoration:none;
  transition:all .18s ease;
}

.flowStep:hover{
  transform:translateY(-1px);
  border-color:rgba(78,161,255,.24);
  background:rgba(255,255,255,.05);
}

.flowStepNum{
  width:24px;
  height:24px;
  min-width:24px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  font-size:12px;
  font-weight:800;
  color:var(--text);
}

.flowStepLabel{
  font-size:12px;
  font-weight:700;
  line-height:1.15;
}

.flowStep.done{
  background:rgba(24,169,87,.10);
  border-color:rgba(24,169,87,.20);
}

.flowStep.done .flowStepNum{
  background:rgba(24,169,87,.18);
  border-color:rgba(24,169,87,.28);
  color:#c8f0d6;
}

.flowStep.active{
  background:linear-gradient(135deg, rgba(78,161,255,.18), rgba(255,255,255,.04));
  border-color:rgba(78,161,255,.34);
  box-shadow:0 8px 18px rgba(45,127,240,.14);
}

.flowStep.active .flowStepNum{
  background:rgba(78,161,255,.22);
  border-color:rgba(78,161,255,.34);
}

@media (max-width: 1200px){
  .flowStepper{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 920px){
  .moduleHeaderMeta{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .flowStepper{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 620px){
  .moduleHeaderMeta{
    grid-template-columns:1fr;
  }

  .flowStepper{
    grid-template-columns:1fr;
  }
}

/* == FASE3_ETAPA11_ORIENTACAO_TECNICA_OBJETIVA == */
.diagnosticPrimary,
.diagnosticNext{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
}

.diagnosticPrimary{
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-weight:700;
}

.diagnosticNext{
  margin-top:10px;
  background:linear-gradient(135deg, rgba(78,161,255,.10), rgba(255,255,255,.03));
  color:var(--text);
  display:grid;
  gap:6px;
}

.diagNextLabel{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted2);
}

.diagnosticNext strong{
  font-size:14px;
  line-height:1.35;
}

/* == FASE3_ETAPA11_CORRECAO_ORIENTACAO_TECNICA == */
.diagnosticPrimary,
.diagnosticNext{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
}

.diagnosticPrimary{
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-weight:700;
}

.diagnosticNext{
  margin-top:10px;
  background:linear-gradient(135deg, rgba(78,161,255,.10), rgba(255,255,255,.03));
  color:var(--text);
  display:grid;
  gap:6px;
}

.diagNextLabel{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted2);
}

.diagnosticNext strong{
  font-size:14px;
  line-height:1.35;
}

/* == FASE3_ETAPA13_PRIORIDADE_NA_BARRA_LATERAL == */
.navTextWrap{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.navHint{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  line-height:1;
  background:rgba(214,164,0,.18);
  border:1px solid rgba(214,164,0,.28);
  color:#ffe9a4;
  white-space:nowrap;
}

.nav a.active .navHint{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.18);
  color:#fff3c2;
}

/* == FASE3_ETAPA18_HARDENING_MOBILE_TABLET == */
html{
  -webkit-text-size-adjust:100%;
}

img, canvas, svg, video{
  max-width:100%;
  height:auto;
}

button,
.fileTrigger,
.nav a,
input,
select,
textarea{
  touch-action:manipulation;
}

.nav a,
button,
.fileTrigger{
  min-height:44px;
}

.tableWrap,
.appShell table{
  width:100%;
  overflow-x:auto;
  display:block;
}

@media (max-width: 1024px){
  .container{
    padding:14px;
  }

  .sidebar{
    padding:12px 10px;
  }

  .brand{
    padding:12px;
  }

  .card,
  .moduleContent,
  .diagnosticBanner,
  .moduleHeader,
  .pageHero{
    border-radius:16px;
  }

  .projectMeta{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .projectActions{
    width:100%;
    justify-content:flex-start;
  }

  .projectActions button,
  .projectActions .secondary,
  .pageActions button,
  .pageActions .fileTrigger{
    min-height:44px;
  }
}

@media (max-width: 820px){
  .layout{
    flex-direction:column;
  }

  .sidebar{
    width:100%;
    height:auto;
    position:static;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .nav a{
    min-height:48px;
  }

  .sideBottom{
    display:none;
  }

  .main{
    width:100%;
  }

  .container{
    padding:12px;
  }

  .pageHero,
  .moduleHeader,
  .diagnosticBanner{
    padding:14px;
  }

  .moduleContent,
  .card{
    padding:14px;
  }

  .projectCard{
    grid-template-columns:1fr;
    gap:14px;
    padding:14px;
  }

  .projectMeta{
    grid-template-columns:1fr;
  }

  .moduleHeaderMeta{
    grid-template-columns:1fr 1fr;
  }

  .diagGrid{
    grid-template-columns:1fr;
  }

  .kv{
    grid-template-columns:1fr;
  }

  .row{
    gap:10px;
  }

  .row > *{
    flex:1 1 100%;
  }

  button,
  .fileTrigger{
    width:100%;
  }

  input,
  select,
  textarea{
    font-size:16px;
  }

  .toast{
    left:10px;
    right:10px;
    bottom:10px;
    max-width:none;
    font-size:13px;
    padding:12px 14px;
  }

}

@media (max-width: 640px){
  .brand{
    gap:10px;
  }

  .brandLogo{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
  }

  .brandText h1{
    font-size:10px !important;
    line-height:1.05 !important;
  }

  .nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #nbAuthLogoutNav{
    grid-column:1 / -1;
  }

  .moduleHeaderMeta{
    grid-template-columns:1fr;
  }

  .pageActions,
  .projectActions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }

  .pageActions > *,
  .projectActions > *{
    width:100%;
  }

  .projectCreateHint{
    text-align:left;
    padding:0 2px;
  }

  .pageActions #newProjectName{
    order:1;
  }

  .pageActions #btnNew{
    order:2;
  }

  .pageActions .fileTrigger{
    order:3;
  }

  .pageActions .projectCreateHint{
    order:4;
  }

  .projectTitle{
    align-items:flex-start;
  }

  .diagCard,
  .moduleMetaCard,
  .projectMetaItem{
    padding:12px;
  }

  .footer{
    padding:0;
  }
}

/* == FASE5_ETAPA1_MODULO_VEGETACAO_CAMERA_E_SESSAO == */
.vegModuleShell{
  display:grid;
  gap:16px;
}

.vegHero{
  display:grid;
  gap:12px;
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg, rgba(52,201,123,.10), rgba(255,255,255,.03));
}

.vegHero h2{
  margin:0 0 6px 0;
}

.vegHero p{
  margin:0;
}

.vegHeroMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.vegCaptureGrid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:16px;
}

.vegPanel{
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.vegPanelHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}

.vegPanelHeader h3{
  margin:0;
}

.vegCameraBox{
  width:100%;
  min-height:280px;
  border-radius:18px;
  overflow:hidden;
  background:rgba(6,13,28,.92);
  border:1px solid rgba(255,255,255,.08);
}

.vegCameraBox video{
  width:100%;
  height:100%;
  min-height:280px;
  object-fit:cover;
  display:block;
}

.vegModeRow,
.vegActionRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.vegModeRow > *,
.vegActionRow > *{
  flex:1 1 180px;
}

.vegPanelSub{
  margin-top:16px;
}

.vegInfoGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.vegInfoCard{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:grid;
  gap:6px;
}

.vegInfoLabel{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted2);
}

.vegInfoCallout{
  padding:14px 16px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(78,161,255,.10), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
}

.vegThumbGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.vegThumbCard{
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.vegThumbCard img{
  width:100%;
  height:170px;
  object-fit:cover;
  display:block;
}

.vegThumbMeta{
  padding:10px 12px;
  display:grid;
  gap:4px;
}

.vegThumbMeta strong{
  font-size:13px;
}

.vegThumbMeta span{
  font-size:12px;
  color:var(--muted);
}

.vegEmptyState{
  padding:18px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.12);
  color:var(--muted);
  text-align:center;
}

@media (max-width: 1024px){
  .vegCaptureGrid{
    grid-template-columns:1fr;
  }

  .vegThumbGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 640px){
  .vegInfoGrid,
  .vegThumbGrid{
    grid-template-columns:1fr;
  }

  .vegPanel,
  .vegHero{
    padding:14px;
  }

  .vegCameraBox,
  .vegCameraBox video{
    min-height:220px;
  }
}

/* == FASE5_ETAPA2_NORMALIZACAO_VISUAL_MODULO_VEGETACAO == */
.vegHero{
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:10px;
  padding:16px;
}

.vegHeroMain{
  display:grid;
  gap:6px;
}

.vegHeroMain h2{
  margin:0;
  font-size:22px;
  line-height:1.12;
}

.vegHeroMain p{
  max-width:860px;
}

.vegHeroMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:2px;
}

.vegHeroMeta .badge{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
}

.vegModuleShell .vegPanel:first-of-type{
  margin-top:0;
}

.nav a[href="#/vegetacao"] .navText{
  white-space:nowrap;
}

@media (max-width: 820px){
  .vegHeroMain h2{
    font-size:20px;
  }
}

@media (max-width: 640px){
  .vegHero{
    padding:14px;
  }

  .vegHeroMain h2{
    font-size:18px;
  }

  .nav a[href="#/vegetacao"] .navText{
    white-space:normal;
  }
}

/* == FASE5_ETAPA3_AJUSTE_CAMPO_PROJETO_TOPO == */
.moduleHeaderMeta{
  grid-template-columns: .95fr 1.25fr .85fr .85fr;
}

.moduleMetaCard strong{
  line-height:1.12;
  word-break:normal;
  overflow-wrap:anywhere;
}

.moduleMetaCard:nth-child(2) strong{
  font-size:15px;
}

@media (max-width: 920px){
  .moduleHeaderMeta{
    grid-template-columns:1fr 1fr;
  }

  .moduleMetaCard:nth-child(2) strong{
    font-size:14px;
  }
}

@media (max-width: 640px){
  .moduleHeaderMeta{
    grid-template-columns:1fr;
  }
}

/* == FASE5_ETAPA4_NAO_QUEBRAR_PALAVRAS_TOPO == */
.moduleHeaderMeta{
  grid-template-columns: 1.15fr 1.35fr .8fr .8fr;
  gap:10px;
}

.moduleMetaCard{
  min-width:0;
}

.moduleMetaCard strong{
  font-size:14px;
  line-height:1.15;
  white-space:nowrap;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
}

.moduleMetaCard:nth-child(1) strong{
  font-size:13px;
}

.moduleMetaCard:nth-child(2) strong{
  font-size:14px;
}

@media (max-width: 1100px){
  .moduleHeaderMeta{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .moduleMetaCard strong{
    white-space:normal;
  }
}

@media (max-width: 640px){
  .moduleHeaderMeta{
    grid-template-columns:1fr;
  }
}

/* == FASE5_ETAPA5_SETORES_E_TIMELINE == */
.vegSectorToolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.vegSectorToolbar input{
  flex:1 1 220px;
}

.vegSectorList{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.vegSectorChip{
  min-height:38px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
}

.vegSectorChip.active{
  background:linear-gradient(135deg, rgba(52,201,123,.18), rgba(255,255,255,.04));
  border-color:rgba(52,201,123,.32);
  box-shadow:0 8px 18px rgba(24,169,87,.12);
}

.vegTimeline{
  display:grid;
  gap:10px;
}

.vegTimelineItem{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.vegTimelineIndex{
  width:44px;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  background:rgba(52,201,123,.16);
  border:1px solid rgba(52,201,123,.26);
  color:#d9ffe8;
}

.vegTimelineBody{
  display:grid;
  gap:4px;
}

.vegTimelineBody strong{
  font-size:14px;
}

.vegTimelineBody span{
  font-size:12px;
  color:var(--muted);
}

/* == FASE5_AJUSTE_TOPO_SOLO_PROCESSOS == */
.moduleHeaderMeta{
  grid-template-columns: 1.22fr 1.12fr .72fr .72fr !important;
  gap: 10px !important;
}

.moduleMetaCard{
  min-width: 0;
}

.moduleMetaCard strong{
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  line-height: 1.12 !important;
  font-size: 14px !important;
}

.moduleMetaCard:nth-child(1) strong{
  font-size: 12.5px !important;
}

.moduleMetaCard:nth-child(2) strong{
  font-size: 14px !important;
}

@media (max-width: 1100px){
  .moduleHeaderMeta{
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  .moduleMetaCard strong{
    white-space: normal !important;
  }
}

@media (max-width: 640px){
  .moduleHeaderMeta{
    grid-template-columns: 1fr !important;
  }
}

/* === VEGETACAO_HEADER_LAYOUT_FIX_V1 === */
.veg-top-card-fix {
  display: grid !important;
  grid-template-columns: minmax(420px, 1.35fr) minmax(520px, 1.15fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.veg-top-card-fix,
.veg-top-card-fix * {
  box-sizing: border-box !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.veg-top-intro-fix {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 10px !important;
}

.veg-top-title-row-fix {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.veg-top-project-line-fix {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 10px !important;
  min-width: 0 !important;
}

.veg-top-metrics-fix {
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(110px, 1fr) minmax(150px, 1.28fr) minmax(90px, 0.82fr) minmax(120px, 1.02fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.veg-top-metric-card-fix {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 88px !important;
  padding-right: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.veg-top-metric-card-fix * {
  min-width: 0 !important;
  max-width: 100% !important;
}

.veg-top-metric-card-fix p,
.veg-top-metric-card-fix span,
.veg-top-metric-card-fix strong,
.veg-top-metric-card-fix div {
  overflow: hidden !important;
}

.veg-top-metric-card-fix p:last-child,
.veg-top-metric-card-fix span:last-child,
.veg-top-metric-card-fix strong:last-child,
.veg-top-metric-card-fix div:last-child {
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 1280px) {
  .veg-top-card-fix {
    grid-template-columns: 1fr !important;
  }

  .veg-top-metrics-fix {
    grid-template-columns: repeat(2, minmax(170px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .veg-top-metrics-fix {
    grid-template-columns: 1fr !important;
  }
}
/* === /VEGETACAO_HEADER_LAYOUT_FIX_V1 === */

/* == FASE5_AJUSTE_FINAL_CARDS_TOPO == */
.moduleHeaderMeta{
  display:grid !important;
  grid-template-columns: minmax(0,1.28fr) minmax(0,1.08fr) minmax(0,.78fr) minmax(0,.78fr) !important;
  gap:10px !important;
  align-items:stretch !important;
}

.moduleMetaCard{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  padding:14px !important;
}

.moduleMetaLabel{
  display:block !important;
  max-width:100% !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

.moduleMetaCard strong{
  display:block !important;
  max-width:100% !important;
  margin-top:4px !important;
  line-height:1.12 !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
  hyphens:none !important;
}

.moduleMetaCard:nth-child(1) strong{
  font-size:13px !important;
}

.moduleMetaCard:nth-child(2) strong{
  font-size:14px !important;
}

.moduleMetaCard:nth-child(3) strong,
.moduleMetaCard:nth-child(4) strong{
  font-size:13px !important;
}

@media (max-width: 1100px){
  .moduleHeaderMeta{
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width: 640px){
  .moduleHeaderMeta{
    grid-template-columns: 1fr !important;
  }
}

/* == FASE5_AJUSTE_CARDS_TOPO_LARGOS == */
.moduleHeader{
  grid-template-columns: minmax(0,1.42fr) minmax(0,1.18fr) !important;
  gap: 12px !important;
}

.moduleHeaderMain{
  min-width: 0 !important;
}

.moduleHeaderMeta{
  display:grid !important;
  grid-template-columns: minmax(0,1.36fr) minmax(0,1.18fr) minmax(0,.82fr) minmax(0,.82fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.moduleMetaCard{
  min-width: 0 !important;
  padding: 16px !important;
}

.moduleMetaLabel{
  white-space: nowrap !important;
}

.moduleMetaCard strong{
  display:block !important;
  margin-top: 5px !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  line-height: 1.08 !important;
}

.moduleMetaCard:nth-child(1) strong{
  font-size: 13px !important;
}

.moduleMetaCard:nth-child(2) strong{
  font-size: 13px !important;
}

.moduleMetaCard:nth-child(3) strong,
.moduleMetaCard:nth-child(4) strong{
  font-size: 12.5px !important;
}

@media (max-width: 1180px){
  .moduleHeader{
    grid-template-columns: 1fr !important;
  }

  .moduleHeaderMeta{
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  .moduleMetaCard strong,
  .moduleMetaLabel{
    white-space: normal !important;
  }
}

@media (max-width: 640px){
  .moduleHeaderMeta{
    grid-template-columns: 1fr !important;
  }
}

/* === VEGETACAO_SIDEBAR_SCROLL_FIX_V1 === */
.app-sidebar,
.sidebar,
.left-sidebar,
.layout-sidebar,
.nav-sidebar,
aside.sidebar,
aside.app-sidebar {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-bottom: 20px !important;
}

@supports (height: 100dvh) {
  .app-sidebar,
  .sidebar,
  .left-sidebar,
  .layout-sidebar,
  .nav-sidebar,
  aside.sidebar,
  aside.app-sidebar {
    max-height: 100dvh !important;
  }
}

@supports not (height: 100dvh) {
  .app-sidebar,
  .sidebar,
  .left-sidebar,
  .layout-sidebar,
  .nav-sidebar,
  aside.sidebar,
  aside.app-sidebar {
    max-height: 100vh !important;
  }
}

.app-sidebar::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.left-sidebar::-webkit-scrollbar,
.layout-sidebar::-webkit-scrollbar,
.nav-sidebar::-webkit-scrollbar,
aside.sidebar::-webkit-scrollbar,
aside.app-sidebar::-webkit-scrollbar {
  width: 10px;
}

.app-sidebar::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.left-sidebar::-webkit-scrollbar-thumb,
.layout-sidebar::-webkit-scrollbar-thumb,
.nav-sidebar::-webkit-scrollbar-thumb,
aside.sidebar::-webkit-scrollbar-thumb,
aside.app-sidebar::-webkit-scrollbar-thumb {
  background: rgba(120, 150, 210, 0.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.app-sidebar::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.left-sidebar::-webkit-scrollbar-track,
.layout-sidebar::-webkit-scrollbar-track,
.nav-sidebar::-webkit-scrollbar-track,
aside.sidebar::-webkit-scrollbar-track,
aside.app-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
/* === /VEGETACAO_SIDEBAR_SCROLL_FIX_V1 === */

.vistoriaHero{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  margin-bottom:16px;
}

.vistoriaHero h2{
  margin:0 0 6px;
}

.vistoriaHero p,
.vistoriaStep p,
.vistoriaAutomation p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}

.vistoriaProgress{
  min-width:180px;
  display:grid;
  gap:8px;
  text-align:right;
}

.vistoriaProgress span{
  font-size:26px;
  font-weight:900;
}

.vistoriaProgressTrack{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}

.vistoriaProgressTrack div{
  height:100%;
  border-radius:999px;
  background:linear-gradient(135deg, var(--ok), var(--accent));
}

.vistoriaPanel{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}

.vistoriaMetric,
.vistoriaAutomation,
.vistoriaStep{
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:16px;
}

.vistoriaMetric{
  padding:12px;
  display:grid;
  gap:6px;
}

.vistoriaMetric span{
  color:var(--muted2);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.vistoriaMetric strong{
  font-size:15px;
}

.vistoriaAutomation{
  padding:14px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  margin-bottom:14px;
}

.vistoriaAutomation h3,
.vistoriaStep h3{
  margin:0 0 4px;
}

.vistoriaAlerts{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.vistoriaActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.vistoriaPrimaryAction,
.vistoriaSecondaryAction,
.vistoriaStepAction{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  border-radius:14px;
  padding:10px 14px;
  text-decoration:none;
  font-weight:800;
}

.vistoriaPrimaryAction{
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff;
}

.vistoriaSecondaryAction,
.vistoriaStepAction{
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
  color:var(--text);
}

.vistoriaSteps{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.vistoriaStep{
  padding:12px;
  display:flex;
  gap:12px;
}

.vistoriaStepNum{
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:12px;
  background:var(--accentSoft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.vistoriaStepBody{
  min-width:0;
  display:grid;
  gap:8px;
}

.vistoriaStepHeader{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
}

@media (max-width: 760px){
  .vistoriaHero,
  .vistoriaAutomation{
    display:grid;
  }

  .vistoriaProgress{
    min-width:0;
    text-align:left;
  }

  .vistoriaPanel,
  .vistoriaSteps{
    grid-template-columns:1fr;
  }

  .vistoriaAlerts{
    justify-content:flex-start;
  }
}