/* ===========================================================
   MATHUP — identidade visual
   Conceito: caderno de cálculo digital. Papel quadriculado sutil,
   verde-quadro como acento, display forte. Nada de template.
   =========================================================== */
:root {
  --tinta: #1b2420;       /* quase-preto esverdeado (giz no quadro) */
  --papel: #f4f1e8;       /* papel creme */
  --quadro: #20392f;      /* verde quadro-negro */
  --giz: #eae5d6;
  --acento: #e8703a;      /* laranja-correção (a caneta do professor) */
  --acento-2: #3a7d6a;    /* verde-acerto */
  --linha: #d9d2bf;
  --erro: #c2422d;
  --mut: #74786c;
  --r: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--papel);
  /* quadriculado de caderno, bem sutil */
  background-image:
    linear-gradient(var(--linha) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: -1px -1px;
  color: var(--tinta);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
.app { max-width: 720px; margin: 0 auto; padding: 22px 18px 80px; }

/* Cabeçalho com a marca */
.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--tinta); }
.brand b { font-size: 24px; letter-spacing: -.5px; }
.brand .sig {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--quadro); color: var(--giz);
  padding: 3px 8px; border-radius: 6px; font-size: 14px;
}
.linkmut { color: var(--mut); font: 600 13px system-ui, sans-serif; text-decoration: none; cursor: pointer; background: none; border: 0; }
.linkmut:hover { color: var(--tinta); }

h1 { font-size: clamp(26px, 6vw, 38px); line-height: 1.06; margin: 0 0 12px; letter-spacing: -.5px; }
h1 em { font-style: italic; color: var(--quadro); }
.lead { font-size: 16px; color: #3f463d; line-height: 1.55; max-width: 54ch; }
.eyebrow { font: 700 11px/1 system-ui, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--acento); margin: 0 0 10px; }

/* Cartão de papel */
.card {
  background: #fffdf8; border: 1px solid var(--linha); border-radius: var(--r);
  padding: 24px; box-shadow: 0 1px 0 #fff inset, 0 10px 30px -18px rgba(0,0,0,.3);
}

/* Botões */
.btn { font: 600 15px system-ui, sans-serif; border: 0; border-radius: 11px; padding: 13px 22px; cursor: pointer; transition: transform .08s; }
.btn:active { transform: translateY(1px); }
.btn-q { background: var(--quadro); color: var(--giz); box-shadow: 0 4px 0 #16271f; }
.btn-a { background: var(--acento); color: #fff; box-shadow: 0 4px 0 #b4521f; }
.btn-ghost { background: transparent; border: 1.5px solid var(--linha); color: var(--tinta); }
.full { width: 100%; }

/* Campos */
.field { display: block; margin: 0 0 14px; }
.field span { display: block; font: 600 13px system-ui, sans-serif; margin-bottom: 6px; color: #3f463d; }
.field input {
  width: 100%; padding: 13px 15px; font-size: 16px; border: 1.5px solid var(--linha);
  border-radius: 10px; background: var(--papel); font-family: inherit;
}
.field input:focus { outline: 2px solid var(--quadro); outline-offset: 1px; }

/* Mapa de domínio (dashboard) */
.dom { display: flex; flex-direction: column; gap: 9px; margin: 18px 0; }
.dom-row { display: grid; grid-template-columns: 1fr 130px 44px; align-items: center; gap: 12px;
  background: #fffdf8; border: 1px solid var(--linha); border-radius: 10px; padding: 12px 14px;
  cursor: pointer; text-align: left; font: inherit; color: inherit; }
.dom-row:hover { border-color: var(--quadro); }
.dom-nome { font-size: 15.5px; font-weight: 600; }
.dom-track { height: 9px; background: var(--linha); border-radius: 99px; overflow: hidden; }
.dom-fill { height: 100%; background: var(--acento-2); display: block; }
.dom-fill.fraco { background: var(--acento); }
.dom-pct { font: 700 13px system-ui, sans-serif; text-align: right; color: var(--mut); }

/* Quiz */
.qtag { font: 700 12px system-ui, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--acento); margin: 0 0 8px; }
.qtext { font-size: 20px; line-height: 1.34; margin: 0 0 20px; white-space: pre-line; }
.opts { display: grid; gap: 10px; }
.opt { text-align: left; background: var(--papel); border: 1.5px solid var(--linha); border-radius: 11px;
  padding: 14px 16px; font: 16px/1.4 inherit; cursor: pointer; transition: border-color .12s, background .12s; display: flex; gap: 10px; }
.opt .l { font-weight: 700; color: var(--quadro); }
.opt:hover { border-color: var(--quadro); }
.opt.ok { background: #e7f1ec; border-color: var(--acento-2); }
.opt.no { background: #f7e3dd; border-color: var(--erro); }

.tutor { margin-top: 16px; background: #fff7ea; border-left: 4px solid var(--acento); border-radius: 8px;
  padding: 15px 17px; font-size: 15px; line-height: 1.6; white-space: pre-line; }
.tutor b { color: var(--acento); }

.modos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 10px; margin: 14px 0; }
.modo { background: var(--papel); border: 1.5px solid var(--linha); border-radius: 12px; padding: 15px;
  cursor: pointer; text-align: left; font: inherit; }
.modo:hover { border-color: var(--quadro); }
.modo b { display: block; font-size: 15px; margin-bottom: 3px; }
.modo small { color: var(--mut); font-family: system-ui, sans-serif; }

.bar { height: 6px; background: var(--linha); border-radius: 99px; overflow: hidden; margin-bottom: 20px; }
.bar > span { display: block; height: 100%; background: var(--quadro); transition: width .3s; }
.muted { color: var(--mut); font: 13px system-ui, sans-serif; text-align: center; margin-top: 16px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.aviso { color: var(--erro); font: 14px system-ui, sans-serif; margin-top: 10px; min-height: 18px; }

/* ---- imagens nas questões (enunciado e alternativas) ---- */
.qtext p { margin: 0 0 12px; }
.qimg {
  display: block; max-width: 100%; height: auto; margin: 14px auto;
  border: 1px solid var(--linha); border-radius: 10px; background: #fff; padding: 6px;
}
.opt-corpo { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.optimg {
  max-width: 220px; max-height: 160px; height: auto; border-radius: 8px;
  border: 1px solid var(--linha); background: #fff; padding: 4px;
}
.opt { align-items: flex-start; }
.semimg { color: var(--mut); font-style: italic; }