.outro {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  text-align: center;
}

.sheet {
  --paper: #f6f1e3;
  --ink: #1c2131;
  --muted: #5d6272;
  --rule: rgba(28, 33, 49, 0.2);
  --stamp: #3445c4;
  --marker: #ffd84d;
  position: relative;
  isolation: isolate;
  margin: 0 0 18px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.checks {
  height: 14px;
  background: conic-gradient(var(--ink) 25%, var(--brand) 0 50%, var(--ink) 0 75%, var(--brand) 0) 0 0 / 14px 14px;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 12px;
  border-bottom: 1px dashed var(--rule);
}
.sheet-head h2 { margin: 0 0 3px; font-size: 22px; font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; }
.sheet-head time { display: block; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet-logo { flex: none; width: 62px; height: auto; }

.rows { margin: 0; padding: 8px 18px 2px; }
.rows div { display: flex; align-items: baseline; padding: 8px 0; }
.rows dt { display: flex; flex: 1; align-items: baseline; font-size: 15px; font-weight: 600; color: var(--muted); }
.rows dt::after {
  content: '';
  flex: 1;
  margin: 0 8px;
  border-bottom: 2px dotted var(--rule);
}
.rows dd {
  margin: 0;
  padding: 0 3px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.rows .rec dt { color: var(--ink); }
.rows .rec dd { background: linear-gradient(transparent 46%, var(--marker) 46%, var(--marker) 96%, transparent 96%); }

.sheet-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 108px;
  padding: 6px 18px 16px;
}
.best { flex: 1; margin: 0; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--muted); text-wrap: pretty; }
.best.new { color: var(--ink); }

.stamp {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 3px;
  width: 142px;
  padding: 8px 10px 7px;
  border: 3px solid var(--stamp);
  border-radius: 8px;
  outline: 1px solid var(--stamp);
  outline-offset: 2px;
  color: var(--stamp);
  text-align: center;
  opacity: 0.9;
  transform: rotate(-8deg);
  mix-blend-mode: multiply;
}
.stamp-top { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.stamp b { font-size: 17px; font-weight: 900; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; }
.stars { display: flex; gap: 4px; }
.stars svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.stars svg.on { fill: currentColor; }

.actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; }
.btn-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-left: 10px;
  padding-right: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.32);
}
.btn-ghost:active { transform: translateY(2px); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.btn-ghost svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-ghost[aria-busy='true'] { opacity: 0.6; }

.credit {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}
.credit a { display: inline-block; padding: 6px 8px; border-radius: 6px; color: inherit; text-decoration: none; }
.credit b { color: var(--brand); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

@media (max-height: 700px) {
  .sheet { margin-bottom: 14px; }
  .sheet-head { padding: 12px 16px 10px; }
  .rows { padding: 4px 16px 0; }
  .rows div { padding: 6px 0; }
  .rows dd { font-size: 20px; }
  .sheet-foot { min-height: 96px; padding: 4px 16px 12px; }
}