/* =========================================================
   Migrar.email — camada visual
   IMPORTANTE: somente aparência.
   Não altera layout estrutural, eventos, IDs, names ou JS.
   ========================================================= */

:root{
  --me-blue:#159ed0;
  --me-blue-dark:#087eaa;
  --me-navy:#101827;
  --me-text:#243042;
  --me-muted:#667085;
  --me-border:#e4e7ec;
  --me-bg:#f6f9fc;
  --me-card:#fff;
  --me-shadow:0 10px 30px rgba(16,24,40,.065);
}

html{scroll-behavior:smooth}

body{
  background:linear-gradient(180deg,#fafcfe 0%,var(--me-bg) 100%);
  color:var(--me-text);
  font-family:Inter,Arial,Helvetica,sans-serif;
}

/* Container: apenas aparência, sem mexer no sistema de colunas */
.container-fluid{
  padding-left:24px;
  padding-right:24px;
}

/* Logo */
.container-fluid > .row:first-child img[alt="Migrar email"]{
  width:300px!important;
  height:auto!important;
  margin-top:24px;
  margin-bottom:8px;
}
.container-fluid > .row:first-child img[src*="superdominios"]{
  max-width:360px;
  max-height:56px;
  width:auto!important;
  margin-bottom:16px;
}

/* Título */
h1.text-center{
  color:var(--me-navy);
  font-size:38px;
  font-weight:800;
  letter-spacing:-1px;
  margin-top:12px;
  margin-bottom:8px;
}
p.larger{
  color:var(--me-muted);
  font-size:17px;
  line-height:1.5;
  margin-bottom:28px;
}

/* Apenas aparência dos fieldsets originais.
   NÃO alteramos display, position, float, width ou layout. */
#account1 fieldset,
#account2 fieldset{
  background:rgba(255,255,255,.98);
  border:1px solid var(--me-border);
  border-radius:16px;
  box-shadow:var(--me-shadow);
  padding:24px 24px 18px;
}
#account1 fieldset{
  border-top:4px solid #667085;
}
#account2 fieldset{
  border-top:4px solid var(--me-blue);
}

#account1 legend,
#account2 legend{
  color:var(--me-navy);
  font-size:21px;
  font-weight:700;
  border:0;
}

/* Campos */
#account1 label,
#account2 label{
  color:#344054;
  font-weight:600;
}
.form-control.input-lg{
  height:48px;
  border-color:var(--me-border)!important;
  box-shadow:none!important;
  border-radius:0 9px 9px 0!important;
  transition:border-color .15s,box-shadow .15s;
}
.form-control.input-lg:focus{
  border-color:var(--me-blue)!important;
  box-shadow:0 0 0 3px rgba(21,158,208,.11)!important;
}
.input-group-addon{
  background:#f8fafc!important;
  border-color:var(--me-border)!important;
  color:#667085;
}

/* Botões auxiliares: aparência somente */
#button_extra_param button,
#button_swap button{
  border:1px solid var(--me-border);
  background:#fff;
  color:#475467;
  border-radius:9px;
  box-shadow:0 2px 6px rgba(16,24,40,.03);
  transition:background .15s,border-color .15s;
}
#button_extra_param button:hover,
#button_swap button:hover{
  background:#f7fbfd;
  border-color:#b9dce9;
}

/* Botões principais */
#bt-sync,
#bt-abort{
  border:0!important;
  border-radius:11px!important;
  min-height:66px;
  font-size:17px!important;
  font-weight:700;
  box-shadow:0 7px 18px rgba(16,24,40,.10);
  transition:filter .15s,transform .15s,box-shadow .15s;
}
#bt-sync{
  background:linear-gradient(135deg,var(--me-blue),var(--me-blue-dark))!important;
}
#bt-abort{
  background:linear-gradient(135deg,#e5484d,#c92d35)!important;
}
#bt-sync:hover,
#bt-abort:hover{
  filter:brightness(1.03);
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(16,24,40,.13);
}

/* Progresso */
#progress-txt{
  background:transparent;
  border:0;
  color:var(--me-muted);
  font-family:inherit;
}
.progress{
  background:#e8edf2;
  border-radius:99px;
  box-shadow:none;
  height:12px;
  overflow:hidden;
}

/* Consoles */
#consoles .well{
  background:var(--me-navy);
  border:0;
  border-radius:13px;
  color:#d7dee8;
  box-shadow:none;
}
#consoles .well h2{
  color:#fff;
  font-size:16px;
}
#consoles pre{
  background:transparent;
  border:0;
  color:#cbd5e1;
}

/* Log */
#imapsync_log_beginning{
  color:var(--me-navy);
  font-size:22px;
  font-weight:700;
}
#output{
  background:var(--me-navy);
  color:#cbd5e1;
  border:0;
  border-radius:13px;
}

/* Mobile: somente espaçamento/tipografia */
@media(max-width:767px){
  .container-fluid{
    padding-left:14px;
    padding-right:14px;
  }
  h1.text-center{
    font-size:30px;
    letter-spacing:-.5px;
  }
  p.larger{
    font-size:15px;
  }
  .container-fluid > .row:first-child img[alt="Migrar email"]{
    width:235px!important;
  }
  #account1 fieldset,
  #account2 fieldset{
    padding:20px 16px 15px;
    border-radius:13px;
  }
}


/* =========================================================
   V1 FINAL — remove the original colored column backgrounds
   The original imapsync_form.css paints #account1/#account2
   DodgerBlue/DarkTurquoise. Keep the fieldsets as the cards,
   and make their parent columns transparent.
   ========================================================= */

#account1,
#account2{
  background-color:transparent!important;
}


/* =========================================================
   BARRA DE PROGRESSO — versão moderna
   Mantém os mesmos IDs e o JavaScript original.
   ========================================================= */

#progress-txt{
  margin:16px 0 10px;
  padding:0;
  color:#667085;
  background:transparent;
  border:0;
  text-align:center;
  font-family:Inter,Arial,Helvetica,sans-serif;
  font-size:13px;
  font-weight:500;
  line-height:1.4;
}

.progress{
  position:relative;
  height:22px;
  margin:0 0 24px;
  padding:0;
  overflow:hidden;
  background:#e9eef3;
  border:1px solid #dde4ea;
  border-radius:999px;
  box-shadow:inset 0 1px 2px rgba(16,24,40,.05);
}

.progress .progress-bar{
  height:100%;
  min-width:0;
  line-height:20px;
  border:0;
  border-radius:999px;
  font-family:Inter,Arial,Helvetica,sans-serif;
  font-size:11px;
  font-weight:700;
  text-shadow:none;
  transition:width .35s ease;
}

#progress-bar-done{
  background:linear-gradient(90deg,#159ed0,#087eaa)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

#progress-bar-left{
  background:#e9eef3!important;
  color:#667085!important;
  box-shadow:none;
}

#progress-bar-left:empty,
#progress-bar-done:empty{
  font-size:0;
}

#consoles{
  margin-top:18px;
}


/* Banner responsivo */
img[src*="banner2"] {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    img[src*="banner2"] {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}