:root{
  --blue-600:#005ea6;
  --blue-700:#003f75;
  --muted:#666;
  --bg:#f4f6f8;
  --card:#ffffff;
  --accent:#0077cc;
  --radius:12px;
  --maxw:1100px;
}

*{box-sizing:border-box}
html,body{height:100%; margin:0; font-family: 'Segoe UI', Roboto, Arial, sans-serif; background:var(--bg); color:#222; -webkit-font-smoothing:antialiased;}
.container{max-width:var(--maxw); margin:18px auto; padding:0 16px;}

/* Header */
.header{display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-bottom:12px;}
.brand img{height:54px; object-fit:contain;}
.banner img{width:100%; border-radius:8px; max-height:360px; object-fit:cover; display:block;}

/* Cards */
.card{background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:0 6px 18px rgba(15,30,60,0.06); margin-bottom:16px;}
.form-card h1{font-size:1.1rem; color:var(--blue-700); margin-bottom:12px}

/* options */
.options{display:flex; gap:12px; flex-direction:column; margin-bottom:8px}
.option{display:flex; align-items:center; gap:10px; font-weight:600; color:#111}
.option input{transform:scale(1.05)}

/* process link*/
.link-process{margin:8px 0 16px}
.link-process a{color:var(--accent); text-decoration:underline}

/* form grid */
.form-grid{display:grid; grid-template-columns:1fr 220px; gap:12px; align-items:end; margin-top:8px}
.field label{display:block; font-weight:700; margin-bottom:6px}
.field input{width:100%; padding:10px 12px; border-radius:8px; border:1px solid #dcdcdc; font-size:15px}

/* actions */
.actions{display:flex; gap:10px; margin-top:14px; align-items:center}
.btn{padding:10px 16px; border-radius:8px; border:0; cursor:pointer; font-weight:700}
.btn.primary{background:var(--blue-600); color:#fff}
.btn.ghost{background:transparent; color:var(--blue-700); border:1px solid #e6eef8}

/* loading */
.loading{display:none; align-items:center; gap:8px; margin-left:8px; color:var(--muted)}

/* info */
.info-card h2{margin-bottom:8px; color:var(--blue-700)}
.highlight{color:var(--blue-600)}

/* vencimentos */
.vencimentos{list-style:none; padding-left:0; display:grid; grid-template-columns:repeat(2,1fr); gap:6px}
.vencimentos li{background:#fbfbfd; padding:8px; border-radius:6px; border:1px solid #f0f4f9}

/* suporte */
.suporte-card .link{color:var(--accent); text-decoration:underline}

/* footer */
.footer{display:flex; gap:12px; align-items:center; justify-content:space-between; padding:12px 16px; background:linear-gradient(90deg,var(--blue-700),var(--blue-600)); color:#fff; border-radius:10px}
.footer img{height:40px; object-fit:contain}

/* modal */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.45); z-index:9999}
.modal-panel{background:#fff; width:min(900px,96%); border-radius:10px; padding:18px; position:relative}
.modal-close{position:absolute; right:10px; top:8px; border:0; background:transparent; font-size:22px; cursor:pointer}

/* responsive */
@media (max-width:900px){
  .form-grid{grid-template-columns:1fr; }
  .vencimentos{grid-template-columns:1fr}
  .header{flex-direction:column; align-items:stretch}
  .brand{order:2; margin-top:8px}
}

@media (max-width:420px){
  .container{padding:0 10px}
  .banner img{max-height:220px}
  .brand img{height:44px}
}