:root {
  --tc-ink: #101b33;
  --tc-muted: #66738d;
  --tc-line: #dce5f1;
  --tc-blue: #2864ea;
  --tc-blue-soft: #edf3ff;
  --tc-green: #168a52;
  --tc-green-soft: #ecfbf3;
  --tc-red: #b83d37;
  --tc-red-soft: #fff2f1;
  --tc-amber: #8a6411;
  --tc-amber-soft: #fff8e8;
  --tc-bg: #f4f7fb;
  --tc-navy: #0f1b32;
}

body { background: var(--tc-bg); }

.token-hero {
  padding: 64px max(24px, calc((100vw - 1392px) / 2 + 24px)) 50px;
  text-align: left;
  background:
    radial-gradient(circle at 82% 12%, rgba(40, 100, 234, .09), transparent 28%),
    #fff;
  border-bottom: 1px solid var(--tc-line);
}

.token-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--tc-blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.token-hero .eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #27c99a;
  box-shadow: 0 0 0 5px rgba(39, 201, 154, .12);
}

.token-hero h1 {
  max-width: 900px;
  margin: 0 0 16px;
  font-family: Archivo, Inter, sans-serif;
  font-size: clamp(42px, 5.4vw, 72px);
  line-height: .98;
  letter-spacing: -.055em;
  color: var(--tc-ink);
}

.token-hero p {
  max-width: 790px;
  margin: 0;
  color: #536079;
  font-size: 17px;
  line-height: 1.65;
}

.token-tool {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.token-layout {
  display: grid;
  grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.token-controls {
  position: sticky;
  top: 88px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--tc-line);
  border-radius: 22px;
  box-shadow: 0 24px 60px -45px rgba(16, 27, 51, .65);
}

.tc-control-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 22px;
}

/* genummerd bolletje verwijderd op verzoek, 11 aug 2026 */

.token-controls h2,
.tc-summary h2 {
  margin: 0;
  font-family: Archivo, Inter, sans-serif;
  color: var(--tc-ink);
}

.token-controls h2 { font-size: 22px; }

.token-controls .sub,
.tc-summary p {
  margin: 5px 0 0;
  color: var(--tc-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.tc-price-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tc-muted);
  font-size: 11px;
}

.tc-price-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #25b875;
}

.tc-profile-block {
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--tc-line);
}

.tc-section-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}

.tc-section-label strong {
  color: var(--tc-ink);
  font-size: 12px;
  font-weight: 850;
}

.tc-section-label span {
  color: var(--tc-muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.tc-profile-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.tc-profile-btn {
  min-width: 0;
  min-height: 66px;
  padding: 11px 12px;
  border: 1px solid #d5deeb;
  border-radius: 13px;
  background: #fff;
  color: var(--tc-ink);
  text-align: left;
  cursor: pointer;
}

.tc-profile-btn strong,
.tc-profile-btn span { display: block; }
.tc-profile-btn strong { font: 800 13px Archivo, Inter, sans-serif; }
.tc-profile-btn span {
  margin-top: 5px;
  color: var(--tc-muted);
  font-size: 9px;
  line-height: 1.3;
}
.tc-profile-btn:hover { border-color: #aabbd4; }
.tc-profile-btn.active {
  border-color: var(--tc-blue);
  background: var(--tc-blue-soft);
  box-shadow: inset 0 0 0 1px var(--tc-blue);
}
.tc-profile-btn.active strong { color: var(--tc-blue); }

.tc-exchange-field { grid-column: 1 / -1; }
.tc-exchange-field small {
  display: block;
  margin-top: 6px;
  color: var(--tc-muted);
  font-size: 9.5px;
  line-height: 1.4;
}

.tc-selected-position {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #ccdcf8;
  border-radius: 15px;
  background: #f4f8ff;
}

.tc-maker-field {
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid var(--tc-line);
}

.tc-maker-field > span:first-child {
  margin-bottom: 9px;
}

.tc-position-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.tc-position-fields .tc-field input,
.tc-position-fields .tc-field select { background: #fff; }

.tc-exchange-tabs[hidden],
.tc-other-section[hidden] { display: none !important; }

.tc-primary-fields,
.tc-advanced-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.tc-field { display: block; margin: 0; }

.tc-field > span,
.tc-label {
  display: block;
  margin: 0 0 7px;
  color: var(--tc-ink);
  font-size: 12px;
  font-weight: 800;
}

.tc-field input,
.tc-field select {
  width: 100%;
  height: 49px;
  border: 1px solid #d5deeb;
  border-radius: 12px;
  background: #f9fbfe;
  padding: 0 13px;
  color: var(--tc-ink);
  font: 700 15px Inter, sans-serif;
  outline: 0;
}

.tc-field input:hover,
.tc-field select:hover { border-color: #b9c8de; }

.tc-field input:focus,
.tc-field select:focus,
.tc-exchange-tab:focus-visible,
.tc-other-card:focus-visible,
.tc-position-editor summary:focus-visible,
.tc-details summary:focus-visible,
.tc-advanced summary:focus-visible {
  border-color: var(--tc-blue);
  box-shadow: 0 0 0 3px rgba(40, 100, 234, .13);
  outline: 0;
}

.tc-range-row { display: flex; align-items: center; gap: 12px; }

.tc-range-row input[type=range] {
  height: auto;
  flex: 1;
  padding: 0;
  border: 0;
  box-shadow: none;
  accent-color: var(--tc-blue);
}

.tc-range-value {
  min-width: 43px;
  text-align: right;
  font-weight: 850;
  color: var(--tc-blue);
}

.tc-advanced {
  margin-top: 18px;
  padding-top: 2px;
  border-top: 1px solid var(--tc-line);
}

.tc-advanced > summary,
.tc-position-editor > summary,
.tc-details > summary {
  list-style: none;
  cursor: pointer;
}

.tc-advanced > summary::-webkit-details-marker,
.tc-position-editor > summary::-webkit-details-marker,
.tc-details > summary::-webkit-details-marker { display: none; }

.tc-advanced > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 6px 0;
  color: var(--tc-blue);
  font-size: 12.5px;
  font-weight: 850;
}

.tc-advanced > summary::after,
.tc-details > summary::after {
  content: '⌄';
  transition: transform .18s ease;
}

.tc-advanced[open] > summary::after,
.tc-details[open] > summary::after { transform: rotate(180deg); }

.tc-advanced-grid {
  margin-top: 12px;
  padding: 15px;
  border-radius: 15px;
  background: #f5f8fc;
}

.tc-help {
  margin: 0;
  color: var(--tc-muted);
  font-size: 11px;
  line-height: 1.6;
}

.token-results { min-width: 0; }

.tc-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 2px 14px;
}

/* genummerd bolletje verwijderd op verzoek, 11 aug 2026 */

.tc-summary h2 { font-size: 24px; }

.tc-exchange-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  padding: 5px;
  border-radius: 15px;
  background: #e9eff7;
}

.tc-exchange-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 58px;
  padding: 10px 13px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #536079;
  text-align: left;
  cursor: pointer;
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.tc-exchange-tab:hover { transform: translateY(-1px); }

.tc-exchange-tab[aria-selected=true] {
  background: #fff;
  color: var(--tc-ink);
  box-shadow: 0 7px 18px rgba(24, 46, 83, .12);
}

.tc-tab-brand { min-width: 0; }
.tc-tab-brand strong { display: block; font: 800 15px Archivo, Inter, sans-serif; }
.tc-tab-brand span {
  display: block;
  max-width: 165px;
  margin-top: 3px;
  overflow: hidden;
  color: var(--tc-muted);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-tab-result {
  flex: none;
  color: var(--tc-muted);
  font-size: 11px;
  font-weight: 800;
}
.tc-exchange-tab[aria-selected=true] .tc-tab-result { color: var(--tc-blue); }

.tc-cards { display: grid; scroll-margin-top: 82px; }

.tc-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tc-line);
  border-radius: 24px;
  box-shadow: 0 28px 70px -50px rgba(16, 27, 51, .85);
}

.tc-card.best { border-color: #82d8aa; }

.tc-decision-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 26px;
  border-bottom: 1px solid var(--tc-line);
}

.tc-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.tc-token-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 900;
}

.tc-token-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tc-brand h3 {
  margin: 0;
  font: 700 18px Inter, system-ui, sans-serif;
  letter-spacing: -.015em;
  color: var(--tc-ink);
}

.tc-brand > div > span {
  display: block;
  max-width: 390px;
  margin-top: 3px;
  overflow: hidden;
  color: var(--tc-muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-best-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--tc-green-soft);
  color: var(--tc-green);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.tc-decision-context {
  flex: none;
  color: var(--tc-muted);
  font-size: 10.5px;
}

.tc-verdict {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
  gap: 30px;
  align-items: center;
  padding: 38px 34px;
  background:
    radial-gradient(circle at 92% 12%, rgba(40, 100, 234, .06), transparent 32%),
    #fff;
}

.tc-verdict-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tc-verdict-label {
  margin-bottom: 10px;
  color: var(--tc-muted);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.tc-verdict-title {
  max-width: 690px;
  margin: 0;
  color: var(--tc-ink);
  font: 850 clamp(30px, 3.6vw, 48px)/1.02 Archivo, Inter, sans-serif;
  letter-spacing: -.047em;
}

.tc-verdict-title > span {
  display: block;
  margin-top: 7px;
  color: #536079;
  font: 800 .48em/1.05 Archivo, Inter, sans-serif;
  letter-spacing: -.02em;
}

.tc-verdict-copy {
  max-width: 650px;
  margin: 13px 0 0;
  color: var(--tc-muted);
  font-size: 14px;
  line-height: 1.55;
}

.tc-card.verdict-positive .tc-verdict-label { color: var(--tc-green); }
.tc-card.verdict-negative .tc-verdict-label { color: var(--tc-red); }
.tc-card.verdict-neutral .tc-verdict-label { color: var(--tc-amber); }

.tc-recommendation {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  max-width: 690px;
  margin-top: 22px;
  padding: 15px 16px;
  border: 1px solid #d8e2ef;
  border-radius: 14px;
  background: #f7f9fd;
  color: #45536b;
  font-size: 12.5px;
  line-height: 1.5;
}

.tc-recommendation > span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  border-radius: 50%;
  color: #fff;
  background: #7c899f;
  font-weight: 900;
}

.tc-recommendation strong { font-weight: 700; }

.tc-card.verdict-positive .tc-recommendation {
  border-color: #b9e6cf;
  background: var(--tc-green-soft);
  color: #176b47;
}
.tc-card.verdict-positive .tc-recommendation > span { background: var(--tc-green); }
.tc-card.verdict-negative .tc-recommendation {
  border-color: #efc8c5;
  background: var(--tc-red-soft);
  color: #8d302c;
}
.tc-card.verdict-negative .tc-recommendation > span { background: var(--tc-red); }
.tc-card.verdict-neutral .tc-recommendation {
  border-color: #ead9aa;
  background: var(--tc-amber-soft);
  color: #73520b;
}
.tc-card.verdict-neutral .tc-recommendation > span { background: var(--tc-amber); }

.tc-verdict-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tc-verdict-metric {
  min-width: 0;
  min-height: 104px;
  padding: 17px;
  border: 1px solid var(--tc-line);
  border-radius: 15px;
  background: rgba(248, 250, 254, .92);
}

.tc-verdict-metric:nth-child(3) {
  border-color: #b9e6cf;
  background: var(--tc-green-soft);
}

.tc-verdict-metric small {
  display: block;
  margin-bottom: 8px;
  color: var(--tc-muted);
  font-size: 9.5px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.tc-verdict-metric strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--tc-ink);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.tc-verdict-metric strong.positive { color: var(--tc-green); }
.tc-verdict-metric strong.negative { color: var(--tc-red); }

.tc-cost-comparison {
  margin: 0 24px 20px;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--tc-navy);
  color: #fff;
}

.tc-cost-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 18px;
}

.tc-cost-head strong { display: block; font: 800 15px Archivo, Inter, sans-serif; }
.tc-cost-head span { display: block; margin-top: 4px; color: #aebbd0; font-size: 11px; }
.tc-cost-head b { flex: none; color: #83e0ad; font-size: 12px; }

.tc-cost-bars { display: grid; gap: 12px; }

.tc-cost-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 95px;
  align-items: center;
  gap: 13px;
  font-size: 11.5px;
}

.tc-cost-row > i {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #263550;
}

.tc-cost-row em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #6d9aff;
  transition: width .2s ease;
}

.tc-cost-row em.with-token { background: #3dcb88; }
.tc-cost-row > strong { text-align: right; font-size: 12px; }

.tc-position-editor,
.tc-details {
  margin: 0 24px 20px;
  border: 1px solid var(--tc-line);
  border-radius: 15px;
  background: #fbfcff;
}

.tc-position-editor > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  color: var(--tc-ink);
}

.tc-position-editor > summary span strong { display: block; font-size: 13px; }
.tc-position-editor > summary span small { display: block; margin-top: 3px; color: var(--tc-muted); font-size: 10.5px; }
.tc-position-editor > summary > b { color: var(--tc-blue); font-size: 12px; }
.tc-position-editor > summary::after { content: '+'; color: var(--tc-blue); font-size: 18px; font-weight: 500; }
.tc-position-editor[open] > summary::after { content: '−'; }
.tc-position-editor[open] > summary { border-bottom: 1px solid var(--tc-line); }

.tc-position {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  padding: 18px;
}

.tc-position .tc-field input,
.tc-position .tc-field select { height: 44px; background: #fff; }
.tc-position .tc-field span { font-size: 10.5px; }

.tc-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  color: var(--tc-blue);
  font-size: 12px;
  font-weight: 850;
}

.tc-details[open] > summary { border-bottom: 1px solid var(--tc-line); }

.tc-quick-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 18px 18px 4px;
}

.tc-quick-fact {
  min-width: 0;
  padding: 13px 14px;
  border-left: 2px solid #dce6f8;
}

.tc-quick-fact span,
.tc-detail span {
  display: block;
  color: var(--tc-muted);
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tc-quick-fact strong,
.tc-detail strong {
  display: block;
  margin-top: 5px;
  color: var(--tc-ink);
  font-size: 12.5px;
  line-height: 1.4;
}

.tc-payback-help {
  display: block;
  margin-top: 7px;
  color: var(--tc-muted);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}

.tc-position-advanced {
  margin: 12px 18px 0;
  padding: 14px;
  border-radius: 12px;
  background: #f3f6fb;
}

.tc-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 18px 0;
}

.tc-detail div {
  padding: 12px 13px;
  border-radius: 11px;
  background: #f3f6fb;
}

.tc-note {
  margin: 12px 18px 0;
  color: var(--tc-muted);
  font-size: 11px;
  line-height: 1.6;
}

.tc-details .tc-note:last-child { margin-bottom: 18px; }
.tc-note a { color: var(--tc-blue); font-weight: 750; }

.tc-other-section { margin-top: 24px; }

.tc-other-title {
  margin: 0 0 10px 2px;
  color: var(--tc-ink);
  font: 800 16px Archivo, Inter, sans-serif;
}

.tc-other-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tc-other-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 18px;
  align-items: center;
  width: 100%;
  min-height: 92px;
  padding: 16px 18px;
  border: 1px solid var(--tc-line);
  border-radius: 16px;
  background: #fff;
  color: var(--tc-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.tc-other-card:hover {
  transform: translateY(-1px);
  border-color: #afc2df;
  box-shadow: 0 14px 30px -25px rgba(24, 46, 83, .5);
}

.tc-other-brand strong { display: block; font: 800 15px Archivo, Inter, sans-serif; }
.tc-other-brand span { display: block; margin-top: 4px; color: var(--tc-muted); font-size: 10.5px; }
.tc-other-outcome { max-width: 210px; text-align: right; }
.tc-other-outcome strong { display: block; font-size: 12px; line-height: 1.3; }
.tc-other-outcome span { display: block; margin-top: 4px; color: var(--tc-muted); font-size: 10px; }
.tc-other-card.is-best .tc-other-outcome strong { color: var(--tc-green); }

.tc-assumption {
  margin: 18px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--tc-line);
  border-radius: 15px;
  background: #fff;
  color: var(--tc-muted);
  font-size: 11.5px;
  line-height: 1.6;
}

.tc-assumption strong { color: var(--tc-ink); }
.tc-source-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.tc-source-row a { color: var(--tc-blue); font-weight: 750; text-decoration: none; }

.tc-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 17px;
  padding: 20px 22px;
  border-radius: 17px;
  background: var(--tc-navy);
  color: #fff;
}

.tc-cta strong { font-family: Archivo, Inter, sans-serif; font-size: 18px; }
.tc-cta span { display: block; margin-top: 4px; color: #aebbd2; font-size: 11.5px; }
.tc-cta a {
  flex: none;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--tc-blue);
  color: #fff;
  font-weight: 850;
  text-decoration: none;
}

@media (max-width: 1120px) {
  .token-layout { grid-template-columns: 1fr; }
  .token-controls { position: static; }
  .tc-control-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .tc-profile-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tc-primary-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tc-position-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tc-advanced-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tc-help { grid-column: 1 / -1; }
}

@media (max-width: 880px) {
  .tc-profile-picker { grid-template-columns: 1fr 1fr; }
  .tc-primary-fields { grid-template-columns: 1fr 1fr; }
  .tc-position-fields { grid-template-columns: 1fr 1fr; }
  .tc-verdict { grid-template-columns: 1fr; }
  .tc-position { grid-template-columns: 1fr 1fr; }
  .tc-quick-facts { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .token-hero {
    padding: 38px 18px 32px;
    background: #fff;
  }
  .token-hero h1 { font-size: 42px; }
  .token-hero p { font-size: 15px; }
  .token-tool { padding: 20px 14px 52px; }
  .token-controls { padding: 18px; }
  .tc-control-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .tc-summary { align-items: flex-start; }
  .tc-exchange-tabs { overflow-x: auto; scroll-snap-type: x mandatory; }
  .tc-exchange-tab { flex: 0 0 78%; scroll-snap-align: start; }
  .tc-decision-head { align-items: flex-start; padding: 17px 18px; }
  .tc-decision-context { display: none; }
  .tc-brand span { max-width: 190px; }
  .tc-verdict { padding: 28px 20px; gap: 22px; }
  .tc-cost-comparison { margin: 0 14px 14px; padding: 18px; }
  .tc-cost-head { flex-direction: column; gap: 8px; }
  .tc-cost-row { grid-template-columns: 1fr 72px; gap: 7px 12px; }
  .tc-cost-row > i { grid-column: 1 / -1; grid-row: 2; }
  .tc-position-editor,
  .tc-details { margin: 0 14px 14px; }
  .tc-other-cards { grid-template-columns: 1fr; }
  .tc-detail { grid-template-columns: 1fr 1fr; }
  .tc-cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .token-hero h1 { font-size: 36px; }
  .tc-primary-fields,
  .tc-advanced-grid,
  .tc-position,
  .tc-position-fields,
  .tc-quick-facts,
  .tc-detail { grid-template-columns: 1fr; }
  .tc-best-badge { display: none; }
  .tc-verdict-title { font-size: 31px; }
  .tc-other-card { grid-template-columns: 1fr; }
  .tc-other-outcome { max-width: none; text-align: left; }
  .tc-cta a { width: 100%; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Gelijkgetrokken met de calculator op de homepage: dezelfde profielkaarten
   boven het volumeveld en hetzelfde invulvak met het valutateken erin.
   Waarden overgenomen uit app.css, want deze pagina laadt dat bestand niet.
   --------------------------------------------------------------------------- */
.tc-volume-block{grid-column:1/-1}
.tc-maker-block{grid-column:1/-1}
.volume-title{font-size:14px;font-weight:850;margin:0 0 10px;color:var(--tc-ink)}
.profile-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin-bottom:14px}
.profile-btn{
  border:1px solid #E3EAF4;background:#fff;color:var(--tc-ink);border-radius:14px;
  min-height:74px;padding:12px 13px;text-align:left;cursor:pointer;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 10px 26px -24px rgba(16,27,51,.5);transition:border-color .15s,background .15s,transform .15s;
}
.profile-btn:hover{border-color:#C9D5E7;background:#FBFCFF;transform:translateY(-1px)}
.profile-btn.active{
  color:#fff;border-color:#245DE8;background:linear-gradient(180deg,#2E6AF2 0%,#174FD8 100%);
  box-shadow:0 18px 34px -20px rgba(36,93,232,.85), inset 0 1px 0 rgba(255,255,255,.28);
}
.profile-btn.active::after{
  content:'';position:absolute;top:11px;right:11px;width:8px;height:8px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22);
}
.profile-btn:focus-visible{outline:none;border-color:var(--tc-blue);box-shadow:0 0 0 4px rgba(29,99,240,.14)}
.profile-name{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:850;margin-bottom:3px}
.profile-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--tc-blue);box-shadow:0 0 0 4px rgba(36,93,232,.08)}
.profile-btn[data-tc-profile="retail"] .profile-dot{background:#12B76A}
.profile-btn[data-tc-profile="vip"] .profile-dot{background:#2864EA}
.profile-btn[data-tc-profile="whale"] .profile-dot{background:#E5484D}
.profile-btn[data-tc-profile="custom"] .profile-dot{background:#667085}
.profile-btn.active .profile-dot{box-shadow:0 0 0 4px rgba(255,255,255,.16)}
.profile-vol{display:block;font-size:11.5px;font-weight:650;color:#62708A}
.profile-btn.active .profile-vol{color:rgba(255,255,255,.82)}
.money-input{position:relative;display:block}
.money-input .money-prefix{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:#5E6B84;font-weight:850;font-size:14px;line-height:1;pointer-events:none;
}
.money-input input{padding-left:46px!important}
@media(max-width:760px){
  .profile-btn{min-height:60px;padding:10px 11px;border-radius:12px}
  .profile-name{font-size:12.5px}
  .profile-vol{font-size:10.5px}
}

/* ---------------------------------------------------------------------------
   Maten gelijk aan de calculator op de homepage. Opgemeten in de browser, niet
   overgeschreven uit een stijlblad: de tokenrekenmachine laadt app.css niet, dus
   staan de waarden hier los. Wijzigt er iets op de homepage, dan hoort dit blok
   mee te veranderen. Alleen opmaak; aan de berekening verandert niets.

   homepage            hier voorheen
   label   11,5 / 750  12 / 800
   veld    13px / 40px 15px / 49px
   geldvak 15px / 50px 15px / 49px, te weinig ruimte voor het teken
   kaart   66px / r12  74px / r14
   --------------------------------------------------------------------------- */
.tc-field > span, .tc-label{font-size:11.5px;font-weight:750;color:#101B33;margin:0 0 4px}
.tc-field select,
.tc-field input{
  height:40px;border:1.5px solid #DDE5F0;border-radius:11px;background:#FBFCFF;
  padding:0 12px;font:600 13px Inter,sans-serif;color:#101B33;
}
.tc-volume-block .money-input input{
  height:50px;font:600 15px Inter,sans-serif;padding:0 12px 0 46px;border-radius:11px;
}
.tc-volume-block .money-input .money-prefix{left:14px;font-size:13px;font-weight:850;color:#5E6B84}
.volume-title{font-size:14px;font-weight:850;margin:0 0 10px}
.profile-picker{gap:10px;margin-bottom:14px}
.profile-btn{min-height:66px;padding:10px 12px;border-radius:12px}
.profile-name{font-size:14px;font-weight:850;margin-bottom:3px}
.profile-vol{font-size:11.5px;font-weight:650}
@media(max-width:640px){
  .tc-field select, .tc-field input{height:44px;font-size:14px}
  .tc-volume-block .money-input input{height:46px}
}

/* De profielkaarten van deze pagina heten .tc-profile-btn; hieronder dezelfde
   maten als op de homepage, zoals eerder afgesproken. */
.tc-profile-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin-bottom:14px}
.tc-profile-btn{
  border:1px solid #E3EAF4;background:#fff;color:#101B33;border-radius:12px;
  min-height:66px;padding:10px 12px;text-align:left;cursor:pointer;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 10px 26px -24px rgba(16,27,51,.5);transition:border-color .15s,background .15s,transform .15s;
}
.tc-profile-btn:hover{border-color:#C9D5E7;background:#FBFCFF;transform:translateY(-1px)}
.tc-profile-btn.active{
  color:#fff;border-color:#245DE8;background:linear-gradient(180deg,#2E6AF2 0%,#174FD8 100%);
  box-shadow:0 18px 34px -20px rgba(36,93,232,.85), inset 0 1px 0 rgba(255,255,255,.28);
}
.tc-profile-btn.active::after{
  content:'';position:absolute;top:11px;right:11px;width:8px;height:8px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22);
}
.tc-profile-btn strong{display:block;font-size:14px;font-weight:850;margin-bottom:3px}
.tc-profile-btn span{display:block;font-size:11.5px;font-weight:650;color:#62708A}
.tc-profile-btn.active span{color:rgba(255,255,255,.82)}

/* Aantalveld met eenheidschakelaar, overgenomen uit het zijpaneel op de homepage. */
.token-combo-input{display:flex;align-items:stretch;border:1.5px solid #DDE5F0;border-radius:11px;background:#FBFCFF;overflow:hidden;min-height:40px}
.token-combo-input:focus-within{border-color:#2864EA;box-shadow:0 0 0 3px rgba(40,100,234,.10)}
.token-combo-input input{min-width:0;flex:1;border:0!important;box-shadow:none!important;background:transparent!important;height:38px!important;padding:0 12px!important;font-variant-numeric:tabular-nums}
.token-unit-switch{display:flex;align-items:center;padding:3px;border-left:1px solid #DDE5F0;background:#F2F6FC}
.token-unit{min-width:34px;height:30px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:#62708A;font:850 12px Inter,sans-serif;cursor:pointer}
.token-unit.active{background:#fff;color:#175CE5;box-shadow:0 1px 4px rgba(16,27,51,.12)}
.token-unit:disabled{opacity:.35;cursor:not-allowed}


/* Valutakiezer in de balk. Leent de vorm van de taalkiezer ernaast, zodat de
   balk op deze pagina dezelfde maten en randen houdt als op de rest van de site.
   Alleen de rekenmachinepagina's laden dit bestand. */
.curdd{position:relative}
.curdd>summary{width:auto;min-width:52px;height:38px;padding:0 9px;gap:5px}
.curdd>summary svg{width:15px;height:15px}
.curdd-panel{min-width:225px}
.curdd-panel button>span:first-child{white-space:nowrap}
.curdd-panel button{
  display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 10px;border:0;border-radius:9px;background:none;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:650;color:var(--ink);text-align:left
}
.curdd-panel button:hover{background:#EEF4FF}
.curdd-panel button.actief{background:#EEF4FF;color:var(--accent)}
.curdd-panel .kort{font-size:11px;font-weight:700;color:var(--muted)}
.curdd-panel button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media(max-width:640px){
  .curdd>summary{min-width:auto;padding:0 8px;gap:0}
  .curdd>summary svg{display:none}
  .curdd-panel{min-width:190px}
}
@media(max-width:420px){.curdd{display:none}}


/* Keuzelijst met muntlogo's. Een <option> kan geen afbeelding tonen, dus dit is
   een eigen uitklapper. De dichte staat heeft precies de maten van .tc-field
   select ernaast, zodat het veld naast Markt niet uit de toon valt. */
.tc-coindd { position: relative; }
.tc-coindd > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 49px;
  border: 1px solid #d5deeb;
  border-radius: 12px;
  background: #f9fbfe;
  padding: 0 13px;
  color: var(--tc-ink);
  font: 700 15px Inter, sans-serif;
  cursor: pointer;
}
.tc-coindd > summary::-webkit-details-marker { display: none; }
.tc-coindd > summary:hover { border-color: #b9c8de; }
.tc-coindd[open] > summary,
.tc-coindd > summary:focus-visible { border-color: var(--tc-blue); }
.tc-coin-kop { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.tc-coin-kop img,
.tc-coindd-panel img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.tc-coin-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-coin-ticker { color: #62708a; font-weight: 700; font-size: 13px; }
.tc-coindd-pijl { width: 12px; height: 8px; flex: none; color: #62708a; }
.tc-coindd[open] .tc-coindd-pijl { transform: rotate(180deg); }
.tc-coindd-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  background: #fff;
  border: 1px solid #d5deeb;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 20px 44px -22px rgba(16, 27, 51, .42);
}
.tc-coindd-panel button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  cursor: pointer;
  font: 700 15px Inter, sans-serif;
  color: var(--tc-ink);
  text-align: left;
}
.tc-coindd-panel button .tc-coin-naam { flex: 1; }
.tc-coindd-panel button:hover { background: #eef4ff; }
.tc-coindd-panel button.actief { background: #eef4ff; color: var(--tc-blue); }
.tc-coindd-panel button:focus-visible { outline: 2px solid var(--tc-blue); outline-offset: 2px; }


/* ---------------------------------------------------------------------------
   Profieltegels in de indeling van de calculator op de homepage: kop, dan vier
   tegels in twee kolommen, dan het invoerveld. De homepage haalt deze regels uit
   app.css; die stylesheet laadt deze pagina niet, dus staan ze hier. De kleuren
   staan voluit omdat de variabelen van app.css hier niet bestaan.
   --------------------------------------------------------------------------- */
.tc-volume-title { font-size: 14px; font-weight: 850; margin: 0 0 10px; color: #101B33; }
.tc-profile-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.tc-profile-picker .profile-btn {
  border: 1px solid #E3EAF4; background: #fff; color: #101B33; border-radius: 12px;
  min-height: 66px; padding: 10px 12px; text-align: left; cursor: pointer;
  position: relative; overflow: hidden; display: flex; flex-direction: column;
}
.tc-profile-picker .profile-btn:hover { border-color: #C9D5E7; background: #FBFCFF; }
.tc-profile-picker .profile-btn.active {
  color: #fff; border-color: #245DE8;
  background: linear-gradient(180deg, #2E6AF2 0%, #174FD8 100%);
  box-shadow: 0 18px 34px -20px rgba(36,93,232,.85), inset 0 1px 0 rgba(255,255,255,.28);
}
.tc-profile-picker .profile-btn.active::after {
  content: ''; position: absolute; top: 10px; right: 10px; width: 8px; height: 8px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.22);
}
.tc-profile-picker .profile-btn:focus-visible {
  outline: none; border-color: #245DE8; box-shadow: 0 0 0 4px rgba(29,99,240,.14);
}
.tc-profile-picker .profile-name {
  display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 850; margin-bottom: 2px;
}
.tc-profile-picker .profile-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
  background: #245DE8; box-shadow: 0 0 0 4px rgba(36,93,232,.08);
}
.tc-profile-picker .profile-btn[data-profile="trader"] .profile-dot { background: #14945A; }
.tc-profile-picker .profile-btn[data-profile="vip"] .profile-dot { background: #245DE8; }
.tc-profile-picker .profile-btn[data-profile="whale"] .profile-dot { background: #D23B2E; }
.tc-profile-picker .profile-btn[data-profile="custom"] .profile-dot { background: #667085; }
.tc-profile-picker .profile-btn.active .profile-dot { box-shadow: 0 0 0 4px rgba(255,255,255,.16); }
.tc-profile-picker .profile-vol { display: block; font-size: 11.5px; font-weight: 650; color: #62708A; }
.tc-profile-picker .profile-btn.active .profile-vol { color: rgba(255,255,255,.82); }
@media (max-width: 480px) {
  .tc-profile-picker { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tc-profile-picker .profile-btn { min-height: 58px; padding: 8px 10px; }
}


/* ---------------------------------------------------------------------------
   Hero met beeld. Het beeld draagt de kop zelf, dus de h1 staat er alleen nog
   voor zoekmachines en schermlezers - onzichtbaar, niet weggehaald.
   --------------------------------------------------------------------------- */
.token-hero--beeld { padding: 0; background: none; border-bottom: 0; }
.token-hero--beeld img {
  display: block; width: 100%; height: auto;
  max-height: min(58vw, 560px); object-fit: cover; object-position: 50% 42%;
}
.token-hero--beeld h1 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* ---------------------------------------------------------------------------
   Eén hoogte voor alles wat je kunt invullen: 40 px, net als het veld "Markt".
   Het coinveld (49 px) en het volumeveld (50 px) weken af. Opgemeten in de
   browser; de labels waren al gelijk.
   --------------------------------------------------------------------------- */
.tc-coindd > summary {
  height: 40px; border-radius: 11px; padding: 0 12px;
  font: 600 13px Inter, sans-serif;
}
.tc-coindd > summary img,
.tc-coindd > summary .tc-coin-logo { width: 20px; height: 20px; }
.tc-volume-block .money-input input {
  height: 40px; font: 600 13px Inter, sans-serif;
  padding: 0 12px 0 34px !important; border-radius: 11px;
}
.tc-volume-block .money-input .money-prefix { left: 12px; font-size: 12.5px; }
@media (max-width: 640px) {
  .tc-coindd > summary { height: 44px; font-size: 14px; }
  .tc-volume-block .money-input input { height: 44px; font-size: 14px; }
}


/* Vinkje in de vorm van de homepage (app.css .check/.box/.ctext), met de kleuren
   voluit omdat de variabelen van app.css hier niet bestaan. */
.tc-yield-check { display: flex; gap: 9px; align-items: center; cursor: pointer; user-select: none; margin-top: 2px; }
.tc-yield-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.tc-yield-check .box {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #DDE5F0;
  background: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.tc-yield-check input:checked + .box { background: #245DE8; border-color: #245DE8; }
.tc-yield-check input:checked + .box::after {
  content: ''; width: 10px; height: 5px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.tc-yield-check input:focus-visible + .box { outline: 2px solid #245DE8; outline-offset: 2px; }
.tc-yield-check .ctext { font-size: 13.5px; font-weight: 600; color: #101B33; }


/* Het aantalveld met de eenheidsschakelaar viel terug op display:block, want
   ".tc-field > span" is specifieker dan ".token-combo-input". De schakelaar kwam
   daardoor onder het veld en het vak werd 76 px in plaats van 40. Met de klasse in
   de selector wint de flexregel weer. */
.tc-field > span.token-combo-input {
  display: flex; align-items: stretch; min-height: 40px;
}
.tc-field > span.token-combo-input > input { height: 38px !important; }
@media (max-width: 640px) {
  .tc-field > span.token-combo-input { min-height: 44px; }
  .tc-field > span.token-combo-input > input { height: 42px !important; }
}


/* ---------- Invoerpaneel volgens het ontwerp van Luc ----------
   Volgorde: coin, aantal coins, markt, handelsprofiel, volume, maker/taker,
   saldo, en daarna de overige velden. Geen nummering en niets ingeklapt: alle
   velden staan gewoon onder elkaar. */

.tc-extra-fields{display:grid;gap:14px;margin-top:14px}
.tc-extra-fields:empty{display:none}

/* De schuif krijgt twee bijschriften in plaats van een los percentage:
   links wat je als maker doet, rechts wat er als taker overblijft. */
.tc-range-bij{display:flex;justify-content:space-between;align-items:baseline;margin-top:7px}
.tc-range-maker{color:var(--tc-blue);font-size:13px;font-weight:700}
.tc-range-taker{color:#62708a;font-size:13px;font-weight:700}

/* "Meer instellingen" stond ingeklapt; de velden erin horen er gewoon bij. */
.tc-advanced>summary{display:none}
.tc-advanced{border:0;padding:0;margin:0}
.tc-advanced-grid{display:grid;gap:14px}

/* ---------- Compacte eindweergave ----------
   De standaardweergave geeft één antwoord met drie kerncijfers. De volledige
   berekening blijft beschikbaar, maar neemt pas ruimte in wanneer die wordt
   geopend. */
.token-tool{max-width:1320px;padding-top:26px}
.token-layout{grid-template-columns:minmax(270px,300px) minmax(0,1fr);gap:18px}
.token-controls{top:82px;padding:20px;border-radius:20px;box-shadow:0 20px 50px -42px rgba(16,27,51,.7)}
.tc-control-head{gap:6px;margin-bottom:16px}
.token-controls h2{font-size:20px}
.tc-price-status{font-size:10px}
.tc-price-status:empty{display:none}

.tc-profile-block{margin:0 0 12px;padding:0;border:0}
.tc-volume-title{margin-bottom:8px;font-size:12px}
.tc-profile-picker{gap:8px;margin-bottom:10px}
.tc-profile-picker .profile-btn{min-height:58px;padding:9px 10px;border-radius:11px}
.tc-profile-picker .profile-name{font-size:12.5px}
.tc-profile-picker .profile-vol{font-size:10px}
.tc-primary-fields{gap:11px}

.tc-selected-position{margin:14px 0 0;padding:14px 0 0;border:0;border-top:1px solid var(--tc-line);border-radius:0;background:transparent}
.tc-section-label{margin-bottom:8px}
.tc-section-label strong{font-size:11.5px}
.tc-section-label span,.tc-exchange-field small{display:none}
.tc-position-fields{gap:9px}
.tc-maker-field{margin-top:14px;padding-top:14px}
.tc-extra-fields{gap:10px;margin-top:12px}
.tc-field>.tc-range-bij{display:flex;justify-content:space-between;align-items:baseline;margin-top:7px}

/* De scenario-inputs zijn nuttig, maar niet nodig voor het eerste antwoord. */
.tc-advanced{margin-top:14px;border-top:1px solid var(--tc-line);padding-top:12px}
.tc-advanced>summary{display:flex;font-size:11.5px}
.tc-advanced-grid{gap:10px;margin-top:10px;padding:12px}

.tc-summary,.tc-cta{display:none!important}

/* ---------- Productuitkomst ----------
   Niet langer een dashboard van kaarten-in-een-kaart. De exchange is het
   product, de conclusie is de hero en de drie cijfers vormen een rustige
   specificatieregel. */
.tc-card{
  overflow:hidden;
  border:0;
  border-radius:28px;
  background:#fff;
  box-shadow:0 24px 65px -50px rgba(16,27,51,.48)
}
.tc-card.best{border:0}
.tc-decision-head{
  justify-content:center;
  padding:6px 28px 0;
  border:0
}
.tc-brand{justify-content:center;gap:12px;text-align:left}
.tc-token-mark{
  width:30px;height:30px;flex-basis:30px;
  border:0;border-radius:0;background:transparent;box-shadow:none
}
.tc-brand h3{
  font:700 17px/1.1 Inter,system-ui,sans-serif;
  letter-spacing:-.025em
}
.tc-brand>div>span{
  margin-top:4px;
  color:#6e6e73;
  font:500 12px/1.2 Inter,system-ui,sans-serif
}
.tc-best-badge{margin-left:4px;padding:5px 9px;font-size:10px}
.tc-decision-context{display:none}

.tc-verdict{
  display:flex;
  flex-direction:column;
  gap:0;
  align-items:center;
  padding:3px 36px 0;
  background:#fff;
  text-align:center
}
.tc-verdict-main{align-items:center;width:100%}
.tc-verdict-label,.tc-recommendation{display:none}
.tc-verdict-title{
  max-width:760px;
  color:#101b33;
  font:700 clamp(28px,2.55vw,36px)/1.02 Inter,system-ui,sans-serif;
  letter-spacing:-.052em
}
.tc-verdict-title>span{
  margin-top:5px;
  color:#6e6e73;
  font:600 .43em/1.12 Inter,system-ui,sans-serif;
  letter-spacing:-.025em
}
.tc-verdict-copy{
  max-width:620px;
  margin:4px auto 0;
  color:#6e6e73;
  font:400 14px/1.45 Inter,system-ui,sans-serif
}
.tc-verdict-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  max-width:900px;
  gap:0;
  margin-top:7px;
  padding-top:0;
  border-top:1px solid #e5e5e7
}
.tc-verdict-metric{
  min-height:0;
  padding:6px 20px;
  border:0;
  border-radius:0;
  background:transparent
}
.tc-verdict-metric+.tc-verdict-metric{border-left:1px solid #e5e5e7}
.tc-verdict-metric:nth-child(3){border-color:#e5e5e7;background:transparent}
.tc-verdict-metric small{
  min-height:0;
  margin:0 0 3px;
  color:#6e6e73;
  font:500 12px/1.35 Inter,system-ui,sans-serif;
  letter-spacing:0;
  text-transform:none
}
.tc-verdict-metric strong{
  color:#101b33;
  font:650 20px/1.15 Inter,system-ui,sans-serif;
  letter-spacing:-.025em
}
.tc-verdict-metric strong.positive{color:#17824f}

.tc-details{
  margin:0 28px 2px;
  border:0;
  border-radius:20px;
  background:transparent
}
.tc-details>summary{
  justify-content:center;
  gap:7px;
  padding:2px 14px 4px;
  color:#06c;
  font:500 13px/1.3 Inter,system-ui,sans-serif
}
.tc-details>summary::after{content:'\203a';position:static;transform:none;font-size:19px;line-height:1}
.tc-details[open]{background:#fff}
.tc-details[open]>summary{border-bottom:1px solid #e5e5e7}
.tc-details[open]>summary::after{content:'\2304';transform:none;font-size:15px}
.tc-details .tc-cost-comparison{margin:20px 14px 8px;padding:18px;border:1px solid #e5e5e7;border-radius:16px;background:#fff;color:var(--tc-ink)}
.tc-cost-head{align-items:center;margin-bottom:13px}
.tc-cost-head strong{font-size:12px}
.tc-cost-head b{color:var(--tc-green);font-size:11px}
.tc-cost-row{grid-template-columns:125px minmax(0,1fr) 80px;font-size:10.5px}
.tc-cost-row>i{height:7px;background:#e1e8f3}
.tc-cost-row>strong{font-size:11px}
.tc-quick-facts{grid-template-columns:repeat(auto-fit,minmax(135px,1fr));padding:12px 14px 2px}
.tc-quick-fact{padding:10px 11px}
.tc-position{padding:14px}
.tc-detail{padding:8px 14px 14px}
.tc-note{margin-left:14px;margin-right:14px}
.tc-assumptions{
  margin:16px 14px 4px;
  border-top:1px solid #e5e5e7;
  background:transparent
}
.tc-assumptions>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  color:#6e6e73;
  font:500 12px/1.3 Inter,system-ui,sans-serif;
  cursor:pointer;
  list-style:none
}
.tc-assumptions>summary::-webkit-details-marker{display:none}
.tc-assumptions>summary::after{
  content:'\203a';
  color:#06c;
  font-size:18px;
  transition:transform .18s ease
}
.tc-assumptions[open]>summary::after{transform:rotate(90deg)}
.tc-assumptions .tc-position-advanced{
  display:grid;
  grid-template-columns:minmax(0,360px);
  margin:0;
  padding:0 0 16px;
  background:transparent
}
.tc-detail{
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0;
  margin:4px 14px 0;
  padding:0;
  border-top:1px solid #e5e5e7
}
.tc-detail>div{
  min-height:0;
  padding:15px 10px;
  border:0;
  border-radius:0;
  background:#fff
}

@media(max-width:1120px){
  .token-layout{grid-template-columns:1fr}
  .token-controls{position:static}
}
@media(max-width:760px){
  .token-tool{padding:16px 12px 44px}
  .token-controls{padding:16px;border-radius:17px}
  .tc-control-head{flex-direction:row;align-items:center}
  .tc-card{border-radius:22px}
  .tc-decision-head{padding:6px 18px 0}
  .tc-token-mark{width:29px;height:29px;flex-basis:29px}
  .tc-brand h3{font-size:16px}
  .tc-verdict{padding:3px 18px 1px}
  .tc-verdict-title{font-size:28px}
  .tc-verdict-copy{margin-top:4px;font-size:13px}
  .tc-verdict-metrics{grid-template-columns:1fr;margin-top:7px}
  .tc-verdict-metric{padding:6px 8px}
  .tc-verdict-metric+.tc-verdict-metric{border-left:0;border-top:1px solid #e5e5e7}
  .tc-verdict-metric small{margin-bottom:5px}
  .tc-verdict-metric strong{font-size:20px}
  .tc-details{margin:0 14px 2px}
}
@media(max-width:420px){
  .tc-profile-picker .profile-name{font-size:12px}
  .tc-profile-picker .profile-vol{font-size:9.5px}
  .tc-cost-row{grid-template-columns:1fr 64px}
  .tc-cost-row>i{grid-column:1/-1;grid-row:2}
}

/* Het hoofdgetal kan negatief worden zodra het koersscenario meetelt. Dan hoort
   het dezelfde rode kleur te krijgen als de tegel eronder. */
.tc-verdict-title.negative{color:var(--tc-red)}

/* ---------- Vergelijkblok ----------
   Ruime, rustig scanbare resultaatkaarten. De winnaar krijgt uitsluitend een
   groene rand en label; de geselecteerde exchange blijft inhoudelijk gelijk. */
.tc-other-section{
  margin-top:8px;padding:6px 18px 14px;border-radius:28px;background:#f1f5fb
}
.tc-other-heading,.tc-other-title{display:none!important}
.tc-other-heading{margin:0}
.tc-other-title{
  margin:0;color:var(--tc-ink);font:700 27px/1.2 Inter,system-ui,sans-serif;
  letter-spacing:-.035em;text-transform:none
}
.tc-other-subtitle{
  margin:8px 0 0;color:var(--tc-muted);font:400 15px/1.55 Inter,system-ui,sans-serif
}
.tc-other-sort{
  margin:20px 0 0;color:#64718a;font:500 13px/1.4 Inter,system-ui,sans-serif
}
.tc-other-cards{display:grid;grid-template-columns:1fr;gap:12px;border:0;background:transparent;overflow:visible}
.tc-other-card{
  position:relative;display:grid;
  grid-template-columns:44px 74px minmax(0,1fr) minmax(170px,auto);
  grid-template-areas:"rank logo brand cost" ". saving saving saving";
  align-items:center;column-gap:14px;width:100%;min-height:148px;margin:0;padding:20px 24px 0;
  overflow:hidden;border:1px solid #d4dfef;border-radius:24px;background:#fff;color:var(--tc-ink);
  box-shadow:0 14px 32px -30px rgba(16,27,51,.6);text-align:left;cursor:pointer;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease
}
.tc-other-card:hover{
  transform:translateY(-1px);border-color:#aec0db;background:#fff;
  box-shadow:0 18px 38px -28px rgba(16,27,51,.48)
}
.tc-other-card.is-best{border-color:#3ecf84;box-shadow:inset 5px 0 0 #15985f,0 18px 38px -30px rgba(21,152,95,.45)}
.tc-other-card.is-selected{background:#fff}
.tc-other-rank{grid-area:rank;color:#70809b;font:400 20px/1 Inter,system-ui,sans-serif;text-align:center}
.tc-other-logo{
  grid-area:logo;display:flex;align-items:center;justify-content:center;width:58px;height:58px;
  border-radius:17px;background:#f1f5fb
}
.tc-other-logo img{display:block;max-width:38px;max-height:38px;width:auto;height:auto;object-fit:contain}
.tc-other-brand{grid-area:brand;align-self:center;min-width:0}
.tc-other-brand strong{display:block;color:var(--tc-ink);font:600 21px/1.18 Inter,system-ui,sans-serif;letter-spacing:-.025em}
.tc-other-brand span{display:block;margin-top:7px;color:var(--tc-muted);font:400 13px/1.35 Inter,system-ui,sans-serif}
.tc-other-best-label{
  margin-top:3px!important;color:#137447!important;font:500 italic 9px/1.1 Inter,system-ui,sans-serif!important;
  letter-spacing:.13em;text-transform:uppercase
}
.tc-other-cost{grid-area:cost;justify-self:end;text-align:right}
.tc-other-cost small,.tc-other-saving small{
  display:block;color:#74829a;font:500 11px/1.3 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase
}
.tc-other-cost strong{display:block;margin-top:8px;color:var(--tc-ink);font:500 25px/1.1 Inter,system-ui,sans-serif;letter-spacing:-.035em}
.tc-other-saving{
  grid-area:saving;align-self:stretch;display:flex;flex-direction:column;justify-content:center;
  min-height:54px;margin-top:14px;padding:10px 0 13px;border-top:1px solid #dbe4f1
}
.tc-other-card.is-best .tc-other-saving{margin-top:9px}
.tc-other-saving strong{display:block;margin-top:6px;color:var(--tc-green);font:500 17px/1.25 Inter,system-ui,sans-serif;letter-spacing:-.02em}
.tc-other-card:not(.is-best) .tc-other-saving strong{color:#158f58}
@media(max-width:760px){
  .tc-other-section{margin-top:8px;padding:6px 10px 10px;border-radius:22px}
  .tc-other-heading{margin:0 3px 18px}
  .tc-other-title{font-size:23px}
  .tc-other-subtitle{font-size:13px}
  .tc-other-sort{margin-top:15px;font-size:12px}
  .tc-other-card{
    grid-template-columns:30px 58px minmax(0,1fr);
    grid-template-areas:"rank logo brand" ". cost cost" ". saving saving";
    min-height:0;padding:16px 14px 0;border-radius:20px;column-gap:10px
  }
  .tc-other-logo{width:50px;height:50px;border-radius:14px}
  .tc-other-logo img{max-width:34px;max-height:34px}
  .tc-other-brand strong{font-size:18px}
  .tc-other-cost{justify-self:start;margin-top:18px;text-align:left}
  .tc-other-cost strong{font-size:22px}
  .tc-other-saving{margin-top:10px;padding-bottom:11px}
  .tc-other-card.is-best .tc-other-saving{margin-top:7px}
}

/* ---------- Rekening in de hoek van de kaart ----------
   De kaart toont wat de token oplevert. Dit toont wat je onder de streep
   betaalt: handelskosten na aftrek van de korting. Klein gehouden, want het is
   context bij het hoofdgetal en niet het hoofdgetal zelf. */
.tc-net-cost{display:flex;justify-content:flex-end;margin:4px 0 0}
.tc-net-cost > span{
  display:inline-flex;align-items:baseline;gap:9px;
  padding:5px 11px;border-radius:11px;
  background:#f2f6ff;border:1px solid #dde7fa;
  color:#62708a;font:600 11.5px/1.25 Inter,system-ui,sans-serif
}
.tc-net-cost b{color:#101b33;font:800 14px/1.25 Inter,system-ui,sans-serif;letter-spacing:-.02em}
@media (max-width:760px){
  .tc-net-cost{justify-content:center;margin-top:8px}
}

/* ---------- Alle exchanges, onderaan de rekenmachine ----------
   Google zag hier vrijwel geen tekst: alles op deze pagina wordt door JavaScript
   gemaakt. Dit blok staat statisch in de HTML, noemt elke exchange bij naam met
   zijn score, en linkt naar de review. Zo is de pagina ook zonder JavaScript te
   beoordelen, en heeft de bezoeker meteen de weg naar de volledige beoordeling. */
.tc-alle-exchanges{
  max-width:1160px;margin:72px auto 0;padding:0 20px 38px
}
.tc-alle-exchanges h2{
  max-width:none;margin:0 auto 12px;text-align:center;color:#101b33;
  font:800 clamp(26px,3vw,34px)/1.12 Archivo,Inter,system-ui,sans-serif;
  letter-spacing:-.035em
}
.tc-alle-exchanges p{
  max-width:780px;margin:0 auto 32px;text-align:center;
  color:#62708a;font:400 16px/1.65 Inter,system-ui,sans-serif;
  letter-spacing:-.008em
}
/* Rijen die zichzelf vullen en gecentreerd uitkomen: kaarten krijgen de breedte
   van hun inhoud, zodat er geen halflege kolom overblijft. */
.tc-ex-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px
}
/* Vaste rijindeling 4-3-4-3-4 en daarna een gecentreerde slotrij. De
   regelbrekers staan in de markup op de bedoelde rijgrenzen, zodat variabele
   kaartbreedtes het gestaffelde patroon niet kunnen doorbreken. */
.tc-ex-br{flex:0 0 100%;width:100%;height:0;margin:0;padding:0;border:0}
@media (max-width:520px){.tc-ex-br{display:none}}

/* Iedere kaart gebruikt dezelfde transparante logoruimte. Verschillen in de
   bronbestanden worden hieronder optisch gecorrigeerd, zonder uitrekken. */
.tc-ex{
  flex:0 0 auto;min-width:196px;max-width:none;
  min-height:92px;display:grid;grid-template-columns:52px auto auto;
  align-items:center;gap:16px;padding:16px 18px;
  border:1px solid rgba(16,27,51,.09);border-radius:22px;
  background:#fff;
  box-shadow:0 1px 2px rgba(16,27,51,.025),0 12px 32px rgba(16,27,51,.045);
  text-decoration:none;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease
}
.tc-ex:hover{
  border-color:rgba(16,27,51,.16);
  box-shadow:0 2px 4px rgba(16,27,51,.035),0 18px 40px rgba(16,27,51,.075);
  transform:translateY(-2px);text-decoration:none
}
.tc-ex:focus-visible{
  outline:3px solid rgba(37,99,235,.24);outline-offset:3px;border-color:#8fb0f5
}
.tc-ex-logo{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:48px;border-radius:0;
  background:transparent;box-shadow:none
}
.tc-ex-logo img{max-width:40px;max-height:40px;width:auto;height:auto;object-fit:contain}
.tc-ex-logo img[src*="backpack"]{max-width:38px;max-height:38px}
.tc-ex-logo img[src*="binance"]{max-width:38px;max-height:38px}
.tc-ex-logo img[src*="bitstamp"]{max-width:38px;max-height:38px}
.tc-ex-logo img[src*="bitvavo"]{max-width:39px;max-height:39px}
.tc-ex-logo img[src$="/bybit.svg"]{width:48px;max-width:48px;height:auto;max-height:20px}
.tc-ex-logo img[src$="/gemini.svg"]{width:54px;max-width:54px;height:auto;max-height:20px}
.tc-ex-logo img[src*="coinbase"]{max-width:40px;max-height:40px}
.tc-ex-logo img[src*="crypto-com"]{max-width:40px;max-height:40px}
.tc-ex-logo img[src*="deribit"]{max-width:42px;max-height:42px}
.tc-ex-logo img[src*="finst"]{max-width:40px;max-height:40px}
.tc-ex-logo img[src*="kraken"]{max-width:42px;max-height:42px}
.tc-ex-logo img[src*="okx"]{max-width:39px;max-height:39px}
.tc-ex-naam{
  min-width:0;color:#101b33;
  font:700 16px/1.25 Inter,system-ui,sans-serif;letter-spacing:-.018em;
  white-space:nowrap
}
.tc-ex-score{
  display:inline-flex;align-items:baseline;gap:2px;margin-left:16px;color:#101b33;
  font:800 14px/1 Inter,system-ui,sans-serif;letter-spacing:-.02em
}
.tc-ex-score::after{
  content:"/10";color:#8b96a9;font-size:10px;font-weight:700;letter-spacing:-.02em
}
/* Exchanges zonder score zien er hetzelfde uit als de rest; ze zijn alleen niet
   klikbaar, dus ook geen hover-effect dat een link suggereert. */
.tc-ex-leeg{cursor:default}
.tc-ex-leeg:hover{transform:none}

@media (max-width:900px){
  .tc-ex{min-width:176px}
}
@media (max-width:520px){
  /* Twee kolommen laten 'Crypto.com' niet heel afdrukken; op een telefoon is
     een kolom leesbaarder dan een afgekapte naam. */
  .tc-alle-exchanges{margin-top:48px;padding:0 16px 24px}
  .tc-alle-exchanges h2{font-size:26px}
  .tc-alle-exchanges p{margin-bottom:24px;font-size:15px;line-height:1.6}
  .tc-ex-grid{flex-direction:column;gap:9px}
  .tc-ex{min-width:0;max-width:none;width:100%}
  .tc-ex{min-height:78px;grid-template-columns:46px minmax(0,1fr) auto;gap:13px;padding:12px 14px;border-radius:18px}
  .tc-ex-logo{width:46px;height:42px;border-radius:0;background:transparent;box-shadow:none}
  .tc-ex-logo img{max-width:36px;max-height:36px}
}