.coin-page {
  min-height: calc(100vh - 74px);
  padding: clamp(35px, 7vw, 90px) clamp(17px, 5vw, 72px);
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(17, 17, 17, 0.07) 50%, transparent 50.2%),
    var(--blue);
}

.coin-loading {
  max-width: 860px;
  margin: 10vh auto;
  padding: 30px;
  border: 3px solid var(--ink);
  background: var(--yellow);
  box-shadow: 9px 9px 0 var(--ink);
  font-family: var(--utility);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.coin-sheet {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  border: 4px solid var(--ink);
  background: var(--paper-light);
  box-shadow: 16px 16px 0 rgba(17, 17, 17, 0.92);
  transform: rotate(-0.35deg);
  overflow: hidden;
}

.coin-sheet[hidden] { display: none; }

.coin-sheet-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  background-image: radial-gradient(rgba(17, 17, 17, 0.16) 0.6px, transparent 0.7px);
  background-size: 7px 7px;
  mix-blend-mode: multiply;
}

.coin-sheet-head {
  position: relative;
  padding: clamp(22px, 5vw, 48px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  border-bottom: 4px solid var(--ink);
}

.coin-profile-avatar {
  width: clamp(74px, 11vw, 112px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--orange);
  font-family: var(--display);
  font-size: clamp(42px, 7vw, 72px);
}

.coin-identity p,
.coin-identity strong {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
}

.coin-identity h1 {
  margin: 5px 0 7px;
  font-family: var(--display);
  font-size: clamp(48px, 8.2vw, 96px);
  line-height: 0.78;
  text-transform: uppercase;
}

.coin-file {
  align-self: start;
  padding: 7px 9px;
  border: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: 9px;
  transform: rotate(2deg);
}

.coin-quote {
  position: relative;
  min-height: 315px;
  padding: clamp(25px, 5vw, 50px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 35px;
  background: var(--yellow);
  border-bottom: 4px solid var(--ink);
}

.coin-quote > div { display: grid; }
.coin-quote small,
.report-label,
.recommendation small {
  font-family: var(--utility);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.coin-quote strong {
  margin: 5px 0 12px;
  font-family: var(--display);
  font-size: clamp(90px, 16vw, 175px);
  font-weight: 400;
  line-height: 0.72;
  white-space: nowrap;
}

.coin-quote strong i {
  font-family: var(--mono);
  font-size: 16px;
  font-style: normal;
}

.coin-quote em {
  width: max-content;
  padding: 6px 10px;
  background: var(--green);
  color: white;
  font-family: var(--mono);
  font-size: clamp(13px, 2vw, 18px);
  font-style: normal;
  font-weight: 900;
}

.coin-quote em.negative { background: var(--red); }

.coin-stamp {
  position: relative;
  z-index: 2;
  width: 180px;
  min-height: 100px;
  padding: 17px;
  display: grid;
  place-items: center;
  border: 7px double var(--red);
  color: var(--red);
  font-family: var(--utility);
  font-size: 26px;
  font-weight: 1000;
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-9deg);
}

.coin-stats {
  position: relative;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 4px solid var(--ink);
}

.coin-stats div {
  padding: 23px;
  display: grid;
  gap: 8px;
  border-right: 3px solid var(--ink);
}

.coin-stats div:last-child { border-right: 0; }
.coin-stats dt {
  font-family: var(--utility);
  font-size: 10px;
  font-weight: 900;
}
.coin-stats dd {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(20px, 3vw, 31px);
  font-weight: 900;
}

.coin-report {
  position: relative;
  padding: clamp(27px, 5vw, 50px);
}

.report-label { margin: 0 0 11px; }
.report-fact {
  max-width: 690px;
  margin: 0;
  font-size: clamp(22px, 3.5vw, 37px);
  font-weight: 750;
  line-height: 1.14;
}

.recommendation {
  margin-top: 38px;
  padding-top: 22px;
  display: grid;
  gap: 6px;
  border-top: 3px dashed var(--ink);
}

.recommendation strong {
  color: var(--red);
  font-family: var(--display);
  font-size: clamp(49px, 8vw, 92px);
  font-weight: 400;
  line-height: 0.82;
  text-transform: uppercase;
}

.coin-actions {
  position: relative;
  padding: 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  border-top: 4px solid var(--ink);
  background: var(--orange);
}

.coin-actions p {
  flex-basis: 100%;
  min-height: 1.2em;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.coin-disclaimer {
  max-width: 700px;
  margin: 48px auto 0;
  padding: 19px 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  border: 2px solid var(--ink);
  background: var(--paper-light);
  box-shadow: 5px 5px 0 var(--ink);
  font-family: var(--mono);
  font-size: 11px;
}

.coin-disclaimer p { margin: 0; }

.coin-page-footer {
  padding: 22px clamp(17px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--ink);
  color: var(--paper-light);
  font-family: var(--mono);
  font-size: 11px;
}

.coin-page-footer p { margin: 0; }
.coin-page-footer a { color: var(--yellow); }

@media (max-width: 700px) {
  .coin-page { padding-top: 28px; }
  .coin-sheet { box-shadow: 9px 9px 0 var(--ink); transform: none; }
  .coin-sheet-head { grid-template-columns: auto 1fr; }
  .coin-file { display: none; }
  .coin-identity h1 { font-size: clamp(44px, 15vw, 70px); }
  .coin-quote {
    min-height: 360px;
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .coin-quote strong { font-size: clamp(86px, 28vw, 125px); }
  .coin-stamp { width: 150px; min-height: 82px; justify-self: end; font-size: 21px; }
  .coin-stats { grid-template-columns: 1fr; }
  .coin-stats div { border-right: 0; border-bottom: 2px solid var(--ink); }
  .coin-stats div:last-child { border-bottom: 0; }
  .coin-actions { align-items: stretch; flex-direction: column; }
  .coin-actions .button { width: 100%; }
  .coin-disclaimer { grid-template-columns: 1fr; }
  .coin-page-footer { align-items: start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .coin-sheet { transform: none; }
}

/* === Histórico da coin === */

.coin-history {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 3px solid var(--ink);
}

.coin-history-chart {
  margin: 10px 0 6px;
}

.coin-history-line {
  display: block;
  width: 100%;
  max-height: 96px;
}

.coin-history-line polyline {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.coin-history-line.up polyline {
  stroke: var(--green);
}

.coin-history-line.down polyline {
  stroke: var(--red);
}

.coin-history small {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}