:root{
  --bg:#f4f7fb;
  --border:#e2e6ee;
  --shadow:0 6px 22px rgba(18,38,63,.08);
  --blue:#14336c;
  --blue-2:#1d4b9d;
  --txt:#1b1f23;
  --muted:#6b7280;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color:var(--txt);
  background:var(--bg);
}

/* ========== HEADER ========== */
.header{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:16px;
  padding:10px 22px;
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.brand .logo{height:34px; display:block}
.title{
  margin:0;
  text-align:center;
  font-size:22px;
  letter-spacing:.5px;
  color:var(--blue);
}
.header-right{
  display:flex; align-items:center; gap:14px;
}
.home-link{
  font-size:14px;
  color:var(--blue-2);
  text-decoration:underline;
}
.flag{height:18px; cursor:pointer}

/* ========== CARDS WRAPPER ========== */
.wrapper{
  max-width:1200px;
  margin:18px auto;
  padding:0 20px;
}
.cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
}
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:var(--shadow);
  padding:28px;
  text-align:center;
}
.card .icon{
  width:120px; height:auto; display:block; margin:6px auto 10px;
}
.card h2{
  margin:6px 0 14px;
  font-size:22px;
  letter-spacing:.6px;
}
.card p.lead{
  margin:0 0 14px;
  color:#111; font-weight:600;
}

label{display:block; margin:10px 0 6px; font-weight:600}
input[type="file"], input[type="text"]{
  width:100%; max-width:520px;
  padding:10px;
  border:1px solid #cfd6e4; border-radius:8px;
  background:#fff;
}
input[type="text"]{ text-align:left }

.btn{
  display:inline-block;
  margin-top:12px;
  padding:10px 26px;
  background:var(--blue);
  color:#fff; border:0; border-radius:8px;
  cursor:pointer; font-weight:700;
  box-shadow:0 3px 10px rgba(20,51,108,.15);
}
.btn:hover{ background:var(--blue-2) }

/* barra de progresso */
.progress{
  width:100%; max-width:520px; height:10px;
  margin:12px auto 6px;
  background:#eef2f7; border-radius:999px; overflow:hidden; display:none;
}
.bar{height:100%; width:0%; background:var(--blue-2); transition:width .25s}

/* alinhamento dos botões na mesma linha nas duas colunas */
.row-center{
  min-height:52px;
  display:flex; align-items:flex-end; justify-content:center;
}

/* ========== INSTRUÇÕES ========== */
.instructions{
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:var(--shadow);
  padding:18px 22px;
  margin:18px auto 28px;
  max-width:1200px;
}
.instructions b{font-weight:700}
.instructions p{margin:6px 0; color:#111}
.instructions .muted{color:var(--muted)}

/* responsivo */
@media (max-width: 992px){
  .cards{ grid-template-columns:1fr }
}
.code-box{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border:1px dashed #14336c;
  background:#eef4ff; border-radius:8px; font-size:16px;
}
.copy-btn{
  padding:6px 10px; font-size:12px; line-height:1;
  border:0; border-radius:6px; cursor:pointer;
  background:#e9eefb;
}
.copy-btn:hover{ background:#dbe6ff; }
.code-label{ font-weight:600; margin-right:2px; }