:root{
  --bg:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --soft:#f8fafc;
  --shadow:0 18px 40px rgba(15,23,42,.08);
  --radius:16px;
  --container:1080px;

  --accent:#183E0C;
  --accent-dark:#da7f12;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--container);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}

/* HEADER */
.nav{
  position:sticky;
  top:0;
  z-index:40;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.nav__row{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 0;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:70px}

/* PAGE */
.page{
  padding:32px 0 60px;
  background:
    radial-gradient(900px 380px at 20% 0%, rgba(247,148,33,.12), transparent 55%),
    radial-gradient(900px 380px at 80% 0%, rgba(247,148,33,.10), transparent 60%);
}

.shell{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  max-width:960px;
  margin:0 auto;
}

/* HERO */
.hero{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,#fff 0%,var(--soft) 100%);
  box-shadow:var(--shadow);
  padding:18px;
}
.hero h1{
  margin:0 0 8px;
  font-size:30px;
  line-height:1.15;
}
.hero ul{margin:10px 0 0;padding-left:18px}
.hero li{margin:6px 0;color:var(--muted)}

/* CARD */
.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
  padding:18px;
}

label{display:block;font-weight:700;font-size:13px;margin:0 0 6px}
input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  outline:none;
  font-size:15px;
}
input:focus{
  border-color:rgba(247,148,33,.65);
  box-shadow:0 0 0 3px rgba(247,148,33,.15);
}

.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  border:2px solid var(--accent);
  background:var(--accent);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}

.btn.ghost{
  background:#fff;
  color:var(--accent);
}

.err{
  background:#fff5f5;
  border:1px solid #fecaca;
  color:#7f1d1d;
  padding:10px 12px;
  border-radius:12px;
  margin:12px 0;
}

/* FOOTER */
footer{
  border-top:1px solid var(--line);
  padding:36px 20px;
  background:#fff;
}
footer .grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
  max-width:var(--container);
  margin:0 auto;
}
footer h4{margin:0 0 8px}
footer p{margin:6px 0;font-size:13px;color:var(--muted)}
footer .copy{
  text-align:center;
  margin-top:20px;
  font-size:12px;
  color:var(--muted);
}
.footer-about{
  max-width:var(--container);
  margin:18px auto 0;
  padding:14px 20px;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  border-top:1px dashed var(--line);
}

@media (max-width: 900px){
  .shell{grid-template-columns:1fr;max-width:520px}
  .brand img{height:60px}
}
/* ========= PORTAL HEADER (INDEX) ========= */

/* garante altura e alinhamento */
.nav{
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.nav__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  flex-wrap: nowrap;
}

/* BRAND: logo + título */
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}

.brand img{
  height: 54px;           /* mais compacto que 70px pra caber melhor */
  width: auto;
  display: block;
}

.brand .title{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  white-space: nowrap;    /* evita quebrar “Affiliate Portal” */
}

.brand .title strong{
  font-size: 14px;
  letter-spacing: .2px;
}

.brand .title span{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* AÇÕES À DIREITA */
.nav__actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.nav-cta{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* badge mais “comportada” */
.nav-cta .badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

/* botão logout sem estourar */
.nav-cta .btn.ghost{
  padding: 10px 12px;
  white-space: nowrap;
}

/* ========= RESPIRO DO HERO ("Choose a product hub") ========= */
main.wrap{
  padding-top: 34px !important;  /* afasta do header */
}

.hero{
  margin-top: 6px;
  padding-top: 6px;
}

.hero h1{
  margin-top: 0 !important;
}

/* ========= MOBILE ========= */
@media (max-width: 720px){
  .nav__row{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 0;
  }

  .brand{
    justify-content: center;      /* centraliza logo+texto */
  }

  .brand img{
    height: 48px;
  }

  .nav__actions{
    justify-content: center;
  }

  .nav-cta{
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;              /* permite quebrar bonito */
    gap: 10px;
  }

  .nav-cta .badge{
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .nav-cta .btn.ghost{
    width: 100%;
    text-align: center;
  }

  main.wrap{
    padding-top: 26px !important; /* respiro no mobile */
  }
}
.hero--portal{
  padding: 22px 22px !important;
}

.hero--portal h1{
  margin: 0 0 6px;
}

.hero--portal .lead{
  margin: 0;
}
/* Product cards (portal) */
.product-card .product-head{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:12px;
}

.product-card .product-media{
  width:128px;
  height:128px;
  border-radius:18px;
  border:1px solid var(--line);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex:0 0 128px;
}

.product-card .product-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.product-card .product-meta{
  min-width:0;
}
.product-card .product-meta h3{
  font-size:18px;
  line-height:1.2;
}

@media (max-width: 520px){
  .product-card .product-media{
width:96px;
    height:96px;
    flex:0 0 96px;
    border-radius:16px;
  }
}