:root{
  --bg:#f4f6f4; --card:#fff; --text:#0f1720; --muted:#6b7480;
  --accent:#118a4a; --accent2:#2ec56f; --ring:#e6ebe7;
  --danger:#cf2e2e; --radius:18px; --shadow:0 10px 28px rgba(15,23,32,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}

.wrap{max-width:760px;margin:18px auto 108px;padding:0 16px}
.top{position:sticky;top:0;z-index:20;display:flex;gap:8px;align-items:center;
     padding:10px 14px;background:rgba(244,246,244,.92);backdrop-filter:blur(12px);
     border-bottom:1px solid #e9eee9}
.chip{padding:7px 10px;border-radius:999px;background:#eaf3ea;color:#0f4f2f;
      font:700 12px/1 Poppins,sans-serif;letter-spacing:.02em}
.chip--accent{background:#e7f7ed;color:#10673e}

.progress{height:6px;background:#e9edea}
.progress__bar{height:100%;width:0;background:linear-gradient(90deg,#2ec56f,#118a4a);transition:width .25s ease}

.card{background:var(--card);border:1px solid var(--ring);box-shadow:var(--shadow);
      border-radius:var(--radius);padding:18px}

.h1{font:800 24px/1.15 Poppins,sans-serif;margin:2px 0 8px}
.sub{color:var(--muted);font-size:14px;margin:0 0 14px}

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

.option{
  display:flex;align-items:center;gap:10px;text-align:left;
  padding:14px;border-radius:14px;background:#f4f8f5;border:1px solid #dfe6e2;
  cursor:pointer;transition:.12s ease;min-height:58px
}
.option:hover{filter:brightness(.98)}
.option--active{background:#e8f8ee;border-color:#2ec56f;box-shadow:0 0 0 3px rgba(46,197,111,.18)}
.option .tt{font-weight:700}
.emoji{font-size:20px}

.input{display:flex;gap:10px;align-items:center}
.input input{width:100%;padding:14px 12px;border:1px solid #dfe6e2;border-radius:14px;font:700 16px/1 Poppins,sans-serif}

.media{border:1px dashed #cfd8d3;background:#fbfdfb;padding:10px;border-radius:14px}
.media img{width:100%;display:block;border-radius:12px}

.kpi{display:flex;align-items:center;gap:10px;margin:12px 0}
.kpi .label{width:180px;font-weight:700}
.bar{flex:1;height:12px;background:#ecf1ed;border-radius:999px;overflow:hidden}
.bar>span{display:block;height:100%;background:linear-gradient(90deg,#ff7272,#ffd45e)}

.badge{display:inline-block;padding:7px 10px;border-radius:10px;background:#eaf3ea;color:#0f4f2f;font:700 12px/1 Poppins,sans-serif}

.note{color:#7b8680;font-size:12px}

.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;gap:10px;justify-content:center;padding:12px;background:rgba(248,250,248,.94);
  border-top:1px solid #e7ece7;backdrop-filter:blur(10px)
}
.btn{border:0;border-radius:999px;padding:14px 18px;font:800 16px/1 Poppins,sans-serif;cursor:pointer}
.btn--accent{background:var(--accent2);color:#fff}
.btn--accent:disabled{opacity:.5;cursor:not-allowed}
.btn--ghost{background:#e9efe9;color:#0d5c36}

.upper{letter-spacing:.01em;text-transform:uppercase}
.center{text-align:center}

@media(min-width:560px){ .wrap{padding:0 22px} }
/* força a imagem ficar visível e ocupar espaço */
.media { border-radius: 14px; overflow: hidden; background:#f6faf8; }
.media img,
.card .media img,
img[alt="capa"] {
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:420px;     /* ajuste se quiser menor/maior */
  object-fit:cover;     /* preenche sem distorcer */
  background:#ddd;      /* se a imagem ainda não carregou */
}