:root {
  --ink: #101315;
  --muted: #71777c;
  --line: #e8e9e9;
  --soft: #f6f7f7;
  --good: #13b98a;
  --warn: #f0b72e;
  --bad: #f1495b;
  --cyan: #19d8d0;
  --purple: #8a45f2;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -15%, rgba(25,216,208,.07), transparent 24rem),
    #fff;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.hidden { display: none !important; }

.header {
  width: min(1120px, calc(100% - 40px));
  height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  font-weight: 950;
  letter-spacing: -.04em;
}
.brand img { width: 38px; height: 32px; object-fit: cover; object-position: 50% 40%; }
.wallet-button,
.secondary-button,
.connected-shortcut,
.roast-again,
.paste-button,
.mode {
  border: 0;
  background: none;
  cursor: pointer;
}
.wallet-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 15px;
  font-weight: 800;
  font-size: 13px;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.wallet-button:hover { border-color: #c6c9ca; background: var(--soft); transform: translateY(-1px); }
.wallet-button.connected { border-color: rgba(19,185,138,.35); background: rgba(19,185,138,.07); }

.page {
  width: min(780px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 72px;
}
.hero { text-align: center; margin-bottom: 42px; }
.logo-float {
  width: 92px;
  height: 76px;
  margin: 0 auto 22px;
  overflow: hidden;
  animation: float 5s ease-in-out infinite;
}
.logo-float img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.kicker {
  margin: 0 0 13px;
  font: 800 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .15em;
  color: #7b8185;
}
.hero h1 {
  margin: 0;
  font-size: clamp(56px, 11vw, 94px);
  line-height: .88;
  letter-spacing: -.077em;
  font-weight: 950;
}
.hero h1 span {
  background: linear-gradient(120deg, var(--cyan), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-copy {
  max-width: 600px;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}
.hero-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  color: #a0a5a8;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hero-proof i { width: 3px; height: 3px; border-radius: 50%; background: #c3c6c8; }

.scanner {
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 10px;
  box-shadow: 0 22px 58px rgba(24,27,29,.075);
  background: rgba(255,255,255,.97);
}
.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--soft);
  border-radius: 17px;
}
.mode {
  padding: 11px 12px;
  border-radius: 13px;
  color: #7b8185;
  font-size: 13px;
  font-weight: 850;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mode:hover { color: var(--ink); }
.mode.active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 2px 8px rgba(22,24,26,.07);
}
.scan-form { padding: 24px 22px 18px; }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.scan-form label {
  color: #777d81;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .02em;
}
.label-row span { color: #a1a6a9; font-size: 10px; }
.scan-row {
  display: flex;
  align-items: center;
  border: 1px solid #dfe1e1;
  border-radius: 16px;
  padding: 4px 5px 4px 15px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.scan-row:focus-within { border-color: #afb4b7; box-shadow: 0 0 0 4px rgba(15,18,20,.035); }
.scan-row input {
  min-width: 0;
  flex: 1;
  height: 48px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: 650 14px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.scan-row input::placeholder { color: #a7acae; }
.paste-button {
  padding: 10px 11px;
  border-radius: 10px;
  color: #777d81;
  font-size: 12px;
  font-weight: 850;
}
.paste-button:hover { background: var(--soft); color: var(--ink); }
.scan-button {
  width: 100%;
  border: 0;
  border-radius: 15px;
  margin-top: 12px;
  padding: 15px 18px;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  font-weight: 950;
  font-size: 13px;
  letter-spacing: .02em;
  transition: transform .2s ease, box-shadow .2s ease;
}
.scan-button span { display: inline-block; margin-left: 5px; transition: transform .2s ease; }
.scan-button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(16,19,21,.16); }
.scan-button:hover span { transform: translate(2px,-2px); }
.scan-button:active { transform: translateY(0) scale(.995); }
.scan-button:disabled { opacity: .55; cursor: wait; transform: none; box-shadow: none; }
.connected-shortcut {
  margin: -6px auto 18px;
  display: block;
  color: #747a7e;
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.connected-shortcut:hover { color: var(--ink); }

.loading,
.error,
.result { margin: 0 22px 22px; }
.loading {
  min-height: 116px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-top: 1px solid var(--line);
}
.loading strong { display: block; margin-bottom: 5px; font-size: 14px; }
.loading span { color: var(--muted); font-size: 12px; }
.mini-skull {
  width: 52px;
  height: 45px;
  flex: 0 0 52px;
  overflow: hidden;
  animation: nod 1.05s ease-in-out infinite;
}
.mini-skull img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.error {
  padding: 13px 15px;
  border-radius: 13px;
  background: #fff3f4;
  color: #a52d3a;
  font-size: 13px;
  font-weight: 750;
}

.result {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  animation: rise .45s cubic-bezier(.2,.8,.2,1) both;
}
.result-top,
.identity,
.score-block,
.why-head,
.result-actions,
.section-mini-title { display: flex; align-items: center; }
.result-top { justify-content: space-between; gap: 16px; }
.identity { min-width: 0; gap: 12px; }
.avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--soft);
  font-weight: 950;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.identity small,
.verdict small {
  display: block;
  margin-bottom: 3px;
  color: #93989b;
  font: 800 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}
.identity h2 {
  max-width: 450px;
  overflow: hidden;
  margin: 0;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-pill {
  flex: 0 0 auto;
  color: var(--good);
  font: 850 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.score-block { gap: 28px; padding: 32px 0 23px; }
.score-ring {
  --score: 0;
  --score-color: var(--good);
  width: 154px;
  height: 154px;
  flex: 0 0 154px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--score-color) var(--score-angle, 0deg), #eceeee 0);
  position: relative;
  transition: background .6s ease;
}
.score-ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #fff;
}
.score-ring > div { position: relative; z-index: 1; text-align: center; }
.score-ring strong { font-size: 51px; line-height: .9; letter-spacing: -.07em; }
.score-ring span { margin-left: 3px; color: #8a9093; font-size: 12px; font-weight: 850; }
.verdict { min-width: 0; }
.verdict h3 {
  margin: 4px 0 8px;
  font-size: clamp(24px,5vw,36px);
  line-height: 1;
  letter-spacing: -.045em;
}
.verdict p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 14px; }
.roast-again {
  padding: 0;
  margin-top: 10px;
  color: #777d80;
  font-size: 11px;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.roast-again:hover { color: var(--ink); }

.rekt-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.rekt-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #686e72;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.rekt-chip strong { color: var(--ink); font-weight: 900; }
.rekt-chip.danger { border-color: rgba(241,73,91,.18); background: rgba(241,73,91,.045); }
.rekt-chip.warn { border-color: rgba(240,183,46,.22); background: rgba(240,183,46,.055); }
.rekt-chip.good { border-color: rgba(19,185,138,.2); background: rgba(19,185,138,.045); }

.stats {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.stat {
  min-width: 0;
  padding: 15px 14px;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat span { display: block; margin-bottom: 6px; color: #969b9e; font-size: 9px; font-weight: 900; letter-spacing: .04em; }
.stat strong { display: block; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.stat strong.good { color: var(--good); }
.stat strong.bad { color: var(--bad); }
.stat strong.warn { color: #c88b05; }

.translation-card {
  margin-top: 12px;
  padding: 14px 15px;
  border-radius: 14px;
  background: #111416;
  color: #fff;
}
.translation-card span { display: block; margin-bottom: 6px; color: #a7acae; font: 800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .09em; }
.translation-card p { margin: 0; font-size: 13px; font-weight: 750; line-height: 1.48; }

.why-wrap { margin-top: 22px; }
.why-head { justify-content: space-between; margin-bottom: 8px; }
.why-head > span { font-size: 11px; font-weight: 950; }
.why-head small { color: #969b9e; font-size: 10px; }
.reasons { display: grid; gap: 7px; }
.reason {
  display: grid;
  grid-template-columns: 8px minmax(0,1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--soft);
}
.reason i { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--warn); }
.reason.good i { background: var(--good); }
.reason.danger i { background: var(--bad); }
.reason b { display: block; margin-bottom: 2px; font-size: 12px; }
.reason span { display: block; color: #7d8386; font-size: 11px; line-height: 1.45; }

.receipts {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
  background: #fff;
}
.receipts summary {
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 13px 14px;
  cursor: pointer;
  user-select: none;
}
.receipts summary::-webkit-details-marker { display: none; }
.receipts summary > span { font-size: 11px; font-weight: 950; }
.receipts summary small { color: #9aa0a3; font-size: 10px; }
.receipts summary b { color: #808689; font-size: 17px; font-weight: 500; transition: transform .2s ease; }
.receipts[open] summary b { transform: rotate(45deg); }
.receipts[open] summary { border-bottom: 1px solid var(--line); }
.receipt-body { padding: 12px; animation: receiptIn .22s ease-out both; }
.extra-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.extra-stat {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 11px;
  background: var(--soft);
}
.extra-stat span { display: block; margin-bottom: 4px; color: #969b9e; font-size: 9px; font-weight: 900; letter-spacing: .04em; }
.extra-stat strong { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extra-stat small { display: block; margin-top: 3px; color: #8d9396; font-size: 9px; line-height: 1.35; }
.section-mini-title { justify-content: space-between; gap: 12px; margin: 15px 2px 7px; }
.section-mini-title span { font-size: 10px; font-weight: 950; }
.section-mini-title small { color: #9aa0a3; font-size: 9px; text-align: right; }
.holdings { display: grid; gap: 6px; }
.holding {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 11px;
  background: var(--soft);
}
.holding-avatar { width: 32px; height: 32px; display: grid; place-items: center; overflow: hidden; border: 1px solid #e5e7e7; border-radius: 9px; background: #fff; font-size: 11px; font-weight: 950; }
.holding-avatar img { width: 100%; height: 100%; object-fit: cover; }
.holding-name { min-width: 0; }
.holding-name b { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.holding-name span { display: block; margin-top: 2px; color: #92979a; font-size: 9px; }
.holding-value { text-align: right; }
.holding-value b { display: block; font-size: 11px; }
.holding-value span { display: block; margin-top: 2px; font-size: 9px; font-weight: 800; }
.holding-value span.good { color: var(--good); }
.holding-value span.bad { color: var(--bad); }

.result-actions { gap: 8px; margin-top: 18px; }
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: #61676a;
  background: #fff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.secondary-button:hover { color: var(--ink); border-color: #c7cacc; transform: translateY(-1px); }
.secondary-button.dark { border-color: #111416; background: #111416; color: #fff; }
.secondary-button.dark:hover { background: #24282a; }

.result.rekt-high .score-ring { animation: pulseDanger 1.55s ease-in-out 2; }
.result.rekt-high .translation-card { box-shadow: inset 3px 0 0 var(--bad); }

.disclaimer {
  max-width: 620px;
  margin: 18px auto 0;
  color: #9ba0a3;
  text-align: center;
  font-size: 10px;
  line-height: 1.55;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10;
  max-width: calc(100% - 32px);
  padding: 11px 15px;
  border-radius: 999px;
  background: #111416;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,12px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%,0); }

@keyframes float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
@keyframes nod { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(5deg) translateY(2px); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes receiptIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulseDanger { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }

@media (max-width: 640px) {
  .header { width: min(100% - 28px,1120px); height: 70px; }
  .page { width: min(100% - 20px,780px); padding-top: 34px; }
  .hero { margin-bottom: 32px; }
  .hero-copy { font-size: 15px; }
  .hero-proof { max-width: 320px; margin-left: auto; margin-right: auto; line-height: 1.4; }
  .scanner { border-radius: 24px; }
  .scan-form { padding: 21px 14px 15px; }
  .label-row span { display: none; }
  .loading,.error,.result { margin-left: 14px; margin-right: 14px; }
  .score-block { align-items: center; gap: 18px; }
  .score-ring { width: 126px; height: 126px; flex-basis: 126px; }
  .score-ring strong { font-size: 43px; }
  .verdict h3 { font-size: 25px; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .extra-stats { grid-template-columns: 1fr 1fr; }
  .result-actions { display: grid; grid-template-columns: 1fr; }
  .secondary-button { width: 100%; }
}

@media (max-width: 430px) {
  .brand span { display: none; }
  .wallet-button { padding: 9px 12px; }
  .hero h1 { font-size: clamp(54px,18vw,72px); }
  .score-block { align-items: flex-start; }
  .score-ring { width: 108px; height: 108px; flex-basis: 108px; }
  .score-ring::before { inset: 7px; }
  .score-ring strong { font-size: 37px; }
  .verdict p { font-size: 13px; }
  .rekt-chip { font-size: 9px; }
  .receipts summary { grid-template-columns: 1fr auto; }
  .receipts summary small { display: none; }
  .extra-stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}