/* ============================================================
   SECTION: TOKEN — Elisia workspace loop as the higgsfield
   "SUPERCOMPUTER" stage: one glowing deep-navy panel on black,
   perspective grid floor, floating glass cards, cursor chips,
   huge ice-blue display title, white pill CTA.
   ============================================================ */

/* dark panel on black: side + bottom gutters so the glow reads
   against the page, then the lime footer follows */
.sec-token { padding: 28px 14px 14px; }

.token-field {
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: 24px;
  /* CSS-art interior: ice-blue haze top, navy hall centre, dark pit below */
  background:
    radial-gradient(68% 54% at 50% 36%, rgba(68, 112, 235, 0.26), transparent 72%),
    radial-gradient(130% 90% at 50% -12%, rgba(124, 177, 255, 0.24), transparent 56%),
    linear-gradient(180deg, #05080F 0%, #0B1428 40%, #070D19 72%, #03060D 100%);
  /* ice-blue rim bloom: thin core line + wide soft spill, inside and out */
  box-shadow:
    0 0 0 1px rgba(124, 177, 255, 0.72),
    0 0 18px rgba(124, 177, 255, 0.45),
    0 0 90px rgba(124, 177, 255, 0.26),
    inset 0 0 4px rgba(124, 177, 255, 0.8),
    inset 0 0 42px rgba(124, 177, 255, 0.34),
    inset 0 0 150px rgba(124, 177, 255, 0.10);
}
/* corner vignette above the grids, below the content */
.token-field::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(105% 105% at 50% 46%, transparent 52%, rgba(2, 4, 10, 0.55) 100%);
  pointer-events: none;
}

/* back-wall grid: faint, fades out before mid-height */
.token-wall {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(124, 177, 255, 0.07) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg, rgba(124, 177, 255, 0.055) 0 1px, transparent 1px 62px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 60%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 60%);
  pointer-events: none;
}
/* perspective floor grid */
.token-floor {
  position: absolute; left: -18%; right: -18%; bottom: -7%; height: 64%;
  background:
    repeating-linear-gradient(90deg, rgba(124, 177, 255, 0.21) 0 1px, transparent 1px 86px),
    repeating-linear-gradient(0deg, rgba(124, 177, 255, 0.15) 0 1px, transparent 1px 60px);
  transform: perspective(740px) rotateX(55deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9) 32%, transparent 97%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9) 32%, transparent 97%);
  pointer-events: none;
}

.token-inner {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: var(--content-max);
  margin-inline: auto;
  padding: 18px 18px 16px;
}
@media (min-width: 1101px) {
  .token-field { min-height: 690px; }
}

/* ---------- head strip ---------- */
.token-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.token-kicker,
.token-meta {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(124, 177, 255, 0.62);
}
.token-meta { display: flex; align-items: center; gap: 8px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.55); }
.token-meta-sep { color: rgba(255, 255, 255, 0.28); }
.token-meta-tge {
  background: var(--accent); color: var(--accent-text-on);
  border-radius: var(--radius-badge);
  padding: 3px 8px; letter-spacing: 0.06em; font-weight: 700;
}

/* preview notice: read before the numbers, not after them */
.token-notice {
  margin: 0 auto;
  max-width: 640px;
  padding: 7px 13px;
  border: 1px solid rgba(124, 177, 255, 0.16);
  border-radius: var(--radius-card);
  background: rgba(7, 12, 22, 0.38);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px; line-height: 1.5;
  text-align: center;
}
.token-notice b { font-weight: 700; color: var(--text-primary); }
.token-notice a { text-decoration: underline; color: inherit; }
.token-notice a:hover { color: var(--accent); }

/* ---------- centre column: cluster / title / sub / cta ---------- */
.token-center {
  text-align: center;
  margin-top: clamp(10px, 3.5vh, 38px);
}

/* the flywheel as an app-icon cluster — steps of the loop as tiles,
   Elisia brand tile in the middle (echoes the reference icon row) */
.token-cluster {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.45));
}
.token-app {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--inset-highlight);
}
.token-app svg { width: 27px; height: 27px; }
/* CMS: an admin-uploaded image replaces the built-in icon, filling the tile */
.token-app img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.token-app-prompts {
  background: linear-gradient(160deg, #17243F, #090F1B);
  color: #DBEAFF;
  transform: rotate(-9deg) translateY(6px);
  margin-right: -9px; z-index: 1;
}
.token-app-runs {
  width: 72px; height: 72px;
  background: linear-gradient(160deg, #15263C, #080F1A);
  color: #B6D9FF;
  transform: rotate(4deg) translateY(1px);
  margin-right: -9px; z-index: 2;
}
.token-app-core {
  width: 92px; height: 92px;
  border-radius: 23px;
  background: var(--accent);
  color: var(--accent-text-on);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 16px 40px rgba(124, 177, 255, 0.35), var(--inset-highlight);
  transform: rotate(-3deg);
  z-index: 3;
}
.token-app-core svg { width: 46px; height: 46px; }
.token-app-buyback {
  width: 72px; height: 72px;
  background: linear-gradient(160deg, #182A4A, #090F1C);
  color: var(--accent);
  transform: rotate(6deg) translateY(2px);
  margin-left: -9px; z-index: 2;
}
.token-app-burn {
  background: linear-gradient(160deg, #1B2842, #0A1020);
  color: #D8E8FF;
  transform: rotate(-5deg) translateY(7px);
  margin-left: -9px; z-index: 1;
}

.token-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4.2vw, 64px); line-height: 0.98;
  letter-spacing: var(--ls-display); text-transform: uppercase;
  color: var(--accent);
}
.token-sub {
  margin: 8px auto 0; max-width: 520px;
  font-size: 14.5px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.token-cta {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  margin-top: 16px;
}
/* the reference CTA: white pill, dark text */
.token-cta-main {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 22px;
  border-radius: var(--radius-card);
  background: var(--text-primary); color: var(--accent-text-on);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
  transition: transform var(--dur-med) var(--ease-pop), filter var(--dur-fast) var(--ease-ui);
}
.token-cta-main:hover { transform: translateY(-1px); filter: brightness(1.05); }
.token-cta-main:active { transform: scale(0.97); }
.token-cta-main:focus-visible { outline: none; box-shadow: var(--ring-accent); }

.token-addr {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 14px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono); font-size: var(--fs-meta);
}
.token-addr svg { width: 13px; height: 13px; flex: none; }
.token-addr { border: 0; }
/* no contract exists yet: padlock, muted, not copyable · the copy icon is hidden */
.token-addr-pending { cursor: default; }
.token-addr-pending .token-addr-copy { display: none; }
/* a real CA is set: lime, click-to-copy, padlock hidden */
.token-addr-live {
  cursor: pointer;
  color: var(--accent);
  background: var(--accent-08);
  border: 1px solid var(--accent-20) !important;
  transition: background var(--dur-fast) var(--ease-ui);
}
.token-addr-live:hover { background: var(--accent-20); }
.token-addr-live .token-addr-lock { display: none; }

/* rotating one-liner for the active loop step (driven by token.js) */
.token-step {
  min-height: 34px; max-width: 540px;
  margin: 14px auto 0;
  font-family: var(--font-mono); font-size: var(--fs-meta); line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}
.token-step.is-swap { animation: token-step-in var(--dur-med) var(--ease-ui); }
@keyframes token-step-in { from { opacity: 0; transform: translateY(4px); } }

/* ---------- floating glass cards ---------- */
/* desktop: absolute against the panel (wrapper is display:contents);
   the wrapper only becomes a real grid under 1100px */
.token-cardrow { display: contents; }

.token-panel {
  background: linear-gradient(165deg, rgba(20, 29, 46, 0.94), rgba(7, 11, 20, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-card-lg);
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.45), var(--inset-highlight);
  padding: 14px;
}
@media (min-width: 1101px) {
  .token-panel { position: absolute; z-index: 2; }
  .token-panel-left  { left: 22px; top: 132px; width: 300px; }
  .token-panel-right { right: 22px; top: 128px; width: 294px; }
  .token-panel-loop  { right: 96px; bottom: -18px; width: 276px; }
}

.token-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px;
}
.token-panel-title {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display);
  font-size: 15px; font-weight: var(--fw-card-title);
  text-transform: uppercase; letter-spacing: var(--ls-display);
  color: var(--text-primary);
}
.token-panel-title svg { width: 13px; height: 13px; flex: none; color: rgba(124, 177, 255, 0.75); }

.token-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--accent);
}
.token-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* a simulation must not wear the live badge's clothes: no lime, no pulse */
.token-live.token-sim { color: var(--text-muted); }
.token-live.token-sim i { background: var(--text-faint); animation: none; }

/* inline "modeled" / "planned" qualifiers on stat rows */
.token-row-k i {
  font-style: normal;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-left: 6px;
}

.token-take {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 10px;
  background: var(--accent-08);
  border-radius: var(--radius-card);
}
.token-take-val {
  font-family: var(--font-display); font-weight: 700;
  font-size: 30px; line-height: 1; letter-spacing: var(--ls-display);
  color: var(--accent);
}
.token-take-label { font-size: var(--fs-meta); line-height: 1.35; color: var(--text-secondary); }

.token-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 7px 0;
  border-top: 1px solid var(--bg-white-5);
  font-size: 13px;
}
.token-row-k { color: var(--text-muted); }
.token-row-v { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); }
.token-buy { color: var(--accent); }
.token-apr { color: var(--accent); }

.token-epoch { margin-top: 10px; }
.token-epoch-top {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 5px;
}
.token-epoch-bar {
  height: 4px; border-radius: var(--radius-pill);
  background: var(--bg-white-10); overflow: hidden;
}
.token-epoch-fill {
  display: block; height: 100%; width: 34%;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-glide);
}

.token-feed-note {
  margin: 12px 0 6px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint);
}
.token-feed { list-style: none; display: grid; gap: 4px; }
.token-feed li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: rgba(5, 9, 17, 0.72);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary);
  animation: token-feed-in var(--dur-med) var(--ease-pop);
}
@keyframes token-feed-in { from { opacity: 0; transform: translateY(-6px); } }
.token-feed-tag {
  color: var(--accent-text-on); background: var(--accent);
  border-radius: var(--radius-badge);
  padding: 1px 5px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.token-feed-burn { background: #D8E8FF; color: #fff; }
.token-feed-amt { color: var(--text-primary); }
.token-feed-tx { margin-left: auto; color: var(--text-faint); }

/* ---------- treasury split donut ---------- */
.token-split { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.token-donut {
  position: relative; flex: none;
  width: 84px; height: 84px; border-radius: 50%;
  background: conic-gradient(var(--accent) 0 60%, #D8E8FF 60% 100%);
  display: grid; place-items: center;
}
.token-donut::after {
  content: ""; position: absolute; inset: 12px;
  border-radius: 50%; background: #0B1424;
}
/* CMS: an admin-uploaded chart image replaces the CSS donut */
.token-donut.has-img { background: none; }
.token-donut.has-img::after { display: none; }
.token-donut.has-img .token-donut-mid { display: none; }
.token-donut img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.token-donut-mid {
  position: relative; z-index: 1; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: var(--ls-display); color: var(--text-primary);
}
.token-donut-mid i {
  display: block; font-style: normal;
  font-family: var(--font-mono); font-size: 9px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint);
}
.token-legend { list-style: none; display: grid; gap: 8px; font-size: var(--fs-meta); }
.token-legend li {
  display: grid; grid-template-columns: 8px auto 1fr;
  align-items: center; gap: 6px;
  color: var(--text-muted);
}
.token-legend b { color: var(--text-primary); font-family: var(--font-mono); font-weight: 500; }
.token-legend span {
  grid-column: 2 / -1;
  font-size: 11px; color: var(--text-faint);
}
.token-legend .token-legend-lab {
  grid-column: auto;
  font-size: inherit; color: inherit;
}
.token-legend i { width: 8px; height: 8px; border-radius: 2px; }
.token-dot-burn { background: var(--accent); }
.token-dot-stake { background: #D8E8FF; }
.token-stake { width: 100%; margin-top: 10px; }

/* ---------- demand loop card (the "Production" card of the stage) ---------- */
.token-loop-count {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint);
}
.token-loop-steps {
  list-style: none;
  counter-reset: token-loop;
  display: grid; gap: 5px;
}
.token-node {
  counter-increment: token-loop;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: background-color var(--dur-med) var(--ease-ui),
              color var(--dur-med) var(--ease-ui),
              transform var(--dur-med) var(--ease-pop);
}
.token-node::before {
  content: counter(token-loop);
  display: grid; place-items: center;
  width: 15px; height: 15px;
  border-radius: 4px;
  background: rgba(124, 177, 255, 0.10);
  font-size: 9px; font-weight: 700;
  color: rgba(124, 177, 255, 0.65);
  transition: background-color var(--dur-med) var(--ease-ui), color var(--dur-med) var(--ease-ui);
}
.token-node.is-active {
  background: rgba(124, 177, 255, 0.15);
  color: var(--accent);
  transform: translateX(3px);
}
.token-node.is-active::before {
  background: var(--accent);
  color: var(--accent-text-on);
}

/* ---------- floating cursor chips ---------- */
.token-tip {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 11.5px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  pointer-events: none;
}
.token-tip svg { width: 13px; height: 13px; flex: none; margin-left: -3px; }
.token-tip-a {
  background: var(--text-primary); color: var(--accent-text-on);
  right: 352px; top: 170px;
  animation: token-float 5s var(--ease-ui) infinite;
}
.token-tip-b {
  background: var(--accent); color: var(--accent-text-on);
  right: 186px; top: 424px;
  animation: token-float 5s var(--ease-ui) 1.6s infinite;
}
@keyframes token-float { 50% { transform: translateY(-7px); } }

/* ---------- stats strip: pinned to the panel floor, clear of the loop card ---------- */
.token-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: auto;
  padding-top: 18px;
  max-width: calc(100% - 420px);
}
.token-stat {
  background: rgba(5, 9, 18, 0.55);
  border: 1px solid rgba(124, 177, 255, 0.10);
  border-radius: var(--radius-card);
  padding: 10px 12px;
  box-shadow: var(--inset-highlight-soft);
}
.token-stat-v {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; line-height: 1.1; letter-spacing: var(--ls-display);
  color: var(--text-primary);
}
.token-stat-k {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.48);
}

.token-legal {
  margin-top: 10px;
  max-width: calc(100% - 420px);
  font-size: 11px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.42);
}
.token-legal a { text-decoration: underline; }
.token-legal a:hover { color: var(--accent); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .token-cardrow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap);
    margin-top: 20px;
  }
  .token-panel-loop { grid-column: 1 / -1; }
  /* equal-height card pair: pin the staking CTA to the card floor */
  .token-panel { display: flex; flex-direction: column; }
  .token-panel .token-stake { margin-top: auto; }
  .token-tip { display: none; }
  .token-stats, .token-legal { max-width: none; }
  .token-stats { grid-template-columns: repeat(2, 1fr); margin-top: 20px; }
}
@media (max-width: 760px) {
  .sec-token { padding: 20px 8px 8px; }
  .token-field { border-radius: var(--radius-card-lg); }
  .token-inner { padding: 14px 12px 12px; }
  .token-cardrow { grid-template-columns: minmax(0, 1fr); }
  .token-head { gap: 6px; }
  .token-meta { font-size: 10px; }
  .token-notice { font-size: 12px; text-align: left; }
  .token-app { width: 48px; height: 48px; border-radius: 13px; }
  .token-app svg { width: 21px; height: 21px; }
  .token-app-runs, .token-app-buyback { width: 55px; height: 55px; }
  .token-app-core { width: 70px; height: 70px; border-radius: 18px; }
  .token-app-core svg { width: 34px; height: 34px; }
}
@media (max-width: 480px) {
  .token-stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .token-tip,
  .token-step,
  .token-feed li { animation: none; }
  .token-node.is-active { transform: none; }
}

/* ============================================================
   THE ELISIA LOOP · 4 quadrant cards around a ring of arrows
   (redesign of the flywheel center · old panel styles above are
   kept for reference while the design is iterated)
   ============================================================ */
.tokloop {
  position: relative;
  z-index: 2;
  max-width: 1060px;
  margin: 38px auto 10px;
}
.tokloop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "c1 ring c2"
    "c4 ring c3";
  gap: 22px 30px;
  align-items: center;
}

/* cards · reuse the .token-panel skin but back in normal flow */
.sec-token .tokloop-card {
  position: relative;
  inset: auto;
  width: auto;
  max-width: 330px;
  padding: 16px 18px 18px;
  transition: border-color 0.5s var(--ease-ui), box-shadow 0.5s var(--ease-ui), transform 0.5s var(--ease-ui);
}
.tokloop-c1 { grid-area: c1; justify-self: end;   text-align: right; }
.tokloop-c2 { grid-area: c2; justify-self: start; }
.tokloop-c3 { grid-area: c3; justify-self: start; }
.tokloop-c4 { grid-area: c4; justify-self: end;   text-align: right; }

.tokloop-num {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(124, 177, 255, 0.1);
  border: 1px solid rgba(124, 177, 255, 0.4);
  color: var(--accent);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 700;
  transition: background 0.5s var(--ease-ui), color 0.5s var(--ease-ui);
}
.tokloop-name {
  margin: 10px 0 6px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}
.tokloop-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

/* active card · driven by the same clock as the orbiting dot */
.sec-token .tokloop-card.is-active {
  border-color: rgba(124, 177, 255, 0.55);
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.45), 0 0 34px rgba(124, 177, 255, 0.16), var(--inset-highlight);
  transform: translateY(-3px);
}
.tokloop-card.is-active .tokloop-num {
  background: var(--accent);
  color: #070B14;
}

/* ring of arrows */
.tokloop-ring {
  grid-area: ring;
  position: relative;
  width: 306px;
  height: 306px;
  --ring-r: 123px;   /* r=105 in a 260 viewBox scaled to 306px */
}
.tokloop-arcs { width: 100%; height: 100%; color: rgba(124, 177, 255, 0.85); }
.tokloop-track { stroke: rgba(124, 177, 255, 0.13); stroke-width: 1.4; }
.tokloop-arc {
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(124, 177, 255, 0.35));
}

/* the travelling dot · rotated by js/sections/token.js */
.tokloop-orbit {
  position: absolute;
  inset: 0;
  will-change: transform;
  pointer-events: none;
}
.tokloop-orbit i {
  position: absolute;
  left: calc(50% - 5px);
  top: calc(50% - var(--ring-r) - 5px);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(124, 177, 255, 0.95), 0 0 28px rgba(124, 177, 255, 0.5);
}

/* Elisia core tile */
.tokloop-core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 92px; height: 92px;
  border-radius: 26px;
  background: var(--accent);
  color: #070B14;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4), 0 0 60px rgba(124, 177, 255, 0.35);
}
.tokloop-core svg { width: 30px; height: 30px; }
.tokloop-core b {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-family: var(--font-mono, ui-monospace, monospace);
}

@media (max-width: 980px) {
  .tokloop-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ring" "c1" "c2" "c3" "c4";
    justify-items: center;
    gap: 14px;
  }
  .tokloop-ring { width: 238px; height: 238px; --ring-r: 96px; }
  .sec-token .tokloop-card,
  .tokloop-c1, .tokloop-c4 { justify-self: stretch; max-width: 100%; text-align: left; }
}

/* ---- loop v2: bigger display title, card icons, avatar core ---- */
.sec-token .token-title { font-size: clamp(48px, 6.6vw, 108px); }
.sec-token .token-sub { font-size: 16.5px; max-width: 640px; }
.sec-token .token-center { padding-top: 26px; }

.tokloop-top { display: flex; align-items: center; gap: 8px; }
.tokloop-c1 .tokloop-top, .tokloop-c4 .tokloop-top { justify-content: flex-end; }
.tokloop-ico {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(124, 177, 255, 0.08);
  border: 1px solid rgba(124, 177, 255, 0.28);
  color: var(--accent);
}
.tokloop-ico svg { width: 20px; height: 20px; }
.tokloop-card.is-active .tokloop-ico {
  background: rgba(124, 177, 255, 0.16);
  border-color: rgba(124, 177, 255, 0.6);
}

/* core: Elisia avatar in a blue ring, optional badge riding the bottom edge */
.sec-token .tokloop-core {
  width: 104px; height: 104px;
  padding: 0;
  border-radius: 50%;
  background: #070B14;
  border: 2px solid var(--accent);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4), 0 0 64px rgba(124, 177, 255, 0.38);
  overflow: visible;
}
.tokloop-core img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.sec-token .tokloop-core b {
  position: absolute;
  left: 50%; bottom: -11px;
  transform: translateX(-50%);
  padding: 3px 9px;
  border-radius: 8px;
  background: var(--accent);
  color: #070B14;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-family: var(--font-mono, ui-monospace, monospace);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* ---- loop v3: cards spread to the edges, bigger ring ---- */
.sec-token .tokloop { max-width: none; }
.tokloop-c1, .tokloop-c4 { justify-self: start; }
.tokloop-c2, .tokloop-c3 { justify-self: end; }
.tokloop-ring { width: 384px; height: 384px; --ring-r: 155px; }
.sec-token .tokloop-core { width: 118px; height: 118px; }
@media (max-width: 980px) {
  .tokloop-c1, .tokloop-c2, .tokloop-c3, .tokloop-c4 { justify-self: stretch; }
  .tokloop-ring { width: 238px; height: 238px; --ring-r: 96px; }
  .sec-token .tokloop-core { width: 92px; height: 92px; }
}

/* ---- loop v4: checkpoint flash · the dot flares passing an arrowhead ---- */
.tokloop-orbit i { will-change: transform, box-shadow; }
.tokloop-orbit.is-pulse i { animation: tokloop-cp 0.6s var(--ease-pop); }
@keyframes tokloop-cp {
  0%   { transform: scale(1); }
  30%  { transform: scale(2.3);
         box-shadow: 0 0 18px rgba(124, 177, 255, 1),
                     0 0 44px rgba(124, 177, 255, 0.9),
                     0 0 90px rgba(124, 177, 255, 0.55); }
  100% { transform: scale(1); }
}

/* Local palette only: keep the original stage geometry and orbit clock. */
.sec-token {
  --accent: #A9D3FF;
  --accent-text-on: #070B14;
  --accent-08: rgba(77, 126, 245, 0.08);
  --accent-20: rgba(77, 126, 245, 0.20);
}
.sec-token .token-title {
  color: #EDF5FF;
  text-shadow: 0 0 38px rgba(116, 167, 255, 0.20);
}
.sec-token .tokloop-core img { filter: none; }
.sec-token .tokloop-orbit i {
  background: #F4F9FF;
  box-shadow: 0 0 12px rgba(224, 240, 255, 0.95), 0 0 28px rgba(67, 114, 255, 0.70);
}
@media (prefers-reduced-motion: reduce) {
  .sec-token .tokloop-orbit { transform: none !important; will-change: auto; }
  .sec-token .tokloop-orbit i { animation: none !important; will-change: auto; }
  .sec-token .tokloop-card, .sec-token .tokloop-num { transition: none; }
  .sec-token .tokloop-card.is-active { transform: none; }
}