/* ==========================================================================
   mate. — control board
   The language of the original boards: one floating panel, a rail of tall
   glass cards, a pill of tabs, big type and a lot of air.
   ========================================================================== */

html.dash { background-image: var(--bg-app); background-attachment: fixed; background-size: cover; }

body.dash {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 20px;
}

/* ——— the board ——————————————————————————————————————— */
.board {
  width: 100%;
  max-width: 1400px;
  border-radius: var(--r-shell);
  padding: 14px;
  display: flex;
  gap: 14px;
  background: var(--shell);
  border: 1px solid var(--shell-line);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
  box-shadow: var(--edge-strong), 0 40px 100px rgba(4, 10, 22, 0.5);
}
@media (min-width: 1240px) and (min-height: 940px) { .board { height: 968px; } }

/* ==========================================================================
   Rail — three tall cards
   ========================================================================== */

.rail { width: 262px; flex: none; display: flex; flex-direction: column; gap: 14px; }

.rcard {
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  border-radius: 26px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  background: var(--dark);
  border: 1px solid var(--dark-line);
  box-shadow: var(--edge);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
}
.rcard--glass { background: var(--glass); border-color: var(--glass-line); }

.rcard__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--dark-line);
}
.rcard__head .wordmark__svg { width: var(--wm, 88px); height: calc(var(--wm, 88px) * 0.295); }
.rcard__ver { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--mute-50); }

.chain {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: rgba(150, 180, 220, 0.13);
  width: fit-content;
}
.chain__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); animation: pulse 2.4s ease-out infinite; }
.chain__name { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.rcard__meta { font-family: var(--mono); font-size: 10.5px; color: var(--mute-55); line-height: 1.7; }

.rcard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.rcard__big { font-family: var(--mono); font-size: 38px; line-height: .9; font-weight: 400; color: var(--ink); letter-spacing: -0.03em; }
.rcard__cap { margin-top: 8px; font-size: 12px; color: var(--mute-60); }
.rcard__chip {
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(150, 180, 220, 0.15);
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--ink-4);
  text-align: right;
}

/* — the ring ————————————————————————————————————————— */
.ring { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px; }
.ring__title { font-size: 14px; color: rgba(235, 242, 251, 0.9); letter-spacing: .02em; }
.ring__outer {
  position: relative;
  width: 178px; height: 178px;
  border-radius: 50%;
  border: 2px dotted rgba(180, 208, 245, 0.32);
  display: grid;
  place-items: center;
}
.ring__arc {
  width: 152px; height: 152px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(from 205deg,
    rgba(204, 255, 0, 0.85) 0deg,
    rgba(204, 255, 0, 0.42) 130deg,
    rgba(190, 214, 245, 0.20) 210deg,
    rgba(190, 214, 245, 0.14) 320deg,
    rgba(204, 255, 0, 0.85) 360deg);
  animation: spin 46s linear infinite;
}
.ring__hub {
  width: 124px; height: 124px;
  border-radius: 50%;
  background: rgba(18, 30, 48, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  animation: spin 46s linear infinite reverse;
}
.ring__v { font-family: var(--mono); font-size: 25px; font-weight: 400; color: var(--ink); }
.ring__u { font-size: 10.5px; color: var(--mute-60); letter-spacing: .08em; }
.ring__note { font-family: var(--mono); font-size: 10.5px; color: var(--mute-60); text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* — progress card ————————————————————————————————— */
.rcard__badge {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(70% 70% at 35% 30%, #e9f6c0, #9ec21e);
}
.meter { height: 18px; border-radius: 7px; background: rgba(150, 180, 220, 0.16); overflow: hidden; }
.meter__fill { height: 100%; border-radius: 7px; background: linear-gradient(90deg, #7fa300, #ccff00); transition: width 1.1s cubic-bezier(.2,.8,.3,1); }

/* ==========================================================================
   Main column
   ========================================================================== */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.bar { display: flex; align-items: center; gap: 14px; }
.bar__pill {
  flex: 1;
  min-width: 0;
  height: 76px;
  padding: 8px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--edge-strong);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
}
.tab {
  flex: none;
  white-space: nowrap;
  padding: 13px 15px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  color: var(--mute-70);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .18s ease, color .18s ease;
}
.tab:hover { background: rgba(150, 180, 220, 0.10); color: var(--ink-3); }
.tab[aria-selected="true"] { background: var(--pill-dark); color: var(--ink); padding-inline: 20px; }
.tab__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--pos); }
.tab__dot--off { background: rgba(180, 208, 245, 0.3); }
.bar__spacer { flex: 1 1 auto; min-width: 6px; }

.who {
  flex: none;
  padding: 9px 18px 9px 9px;
  border-radius: var(--r-pill);
  background: var(--pill-dark);
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}
.who__logo {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #dbe6f5, #7f93ad);
  font-size: 13px; font-weight: 700; color: #14203a;
}
.who__name { font-size: 13.5px; }

.bar__orbs { display: flex; gap: 10px; }

/* ——— panes ————————————————————————————————————————— */
.pane { flex: 1; min-height: 0; display: flex; gap: 14px; }
.pane[hidden] { display: none; }
.pane__left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pane__right { width: 384px; flex: none; display: flex; flex-direction: column; gap: 14px; }

.card2 {
  box-sizing: border-box;
  border-radius: 26px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--edge);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
}
.card2[hidden] { display: none; }   /* display:flex would otherwise beat [hidden] */
.card2--dark { background: var(--dark); border-color: var(--dark-line); }
.card2--grow { flex: 1; min-height: 0; }

/* An agent view can be taller than the card. Scroll it inside rather than
   letting it spill over the panels below. */
#main-body { overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
#main-body:focus-visible { outline: 2px solid var(--pos); outline-offset: 3px; border-radius: 8px; }

.card2__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.card2__title { font-size: 17px; font-weight: 400; color: var(--ink-2); }
.card2__meta { font-family: var(--mono); font-size: 10.5px; color: var(--mute-55); }
.card2__meta.live { display: inline-flex; align-items: center; gap: 7px; }
.card2__meta.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pos); animation: pulse 2.4s ease-out infinite; }

/* ——— metric strip ————————————————————————————————— */
.strip {
  height: 96px;
  flex: none;
  border-radius: 22px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--edge);
  backdrop-filter: var(--frost);
  -webkit-backdrop-filter: var(--frost);
}
.strip__cell { flex: 1; min-width: 0; padding: 0 18px; display: flex; flex-direction: column; gap: 6px; }
.strip__k { font-size: 11.5px; color: var(--mute-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip__row { display: flex; align-items: baseline; gap: 8px; }
.strip__v { font-family: var(--mono); font-size: 21px; font-weight: 400; color: var(--ink); }
.strip__d { font-family: var(--mono); font-size: 11.5px; color: var(--pos); }
.strip__rule { width: 1px; height: 46px; background: var(--rule); flex: none; }

/* ——— approvals ————————————————————————————————————— */
.queue { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }
.appr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-soft);
  transition: opacity .3s ease, transform .3s ease;
}
.appr:last-child { border-bottom: 0; }
.appr.is-gone { opacity: 0; transform: translateX(24px); pointer-events: none; }
.appr--lead {
  margin: -6px -14px 6px;
  padding: 18px 14px;
  border-radius: 16px;
  background: linear-gradient(100deg, rgba(204, 255, 0, 0.08), transparent 60%);
  border-bottom-color: transparent;
}
.appr__title { font-size: 15px; color: var(--ink-3); }
.appr--lead .appr__title::after {
  content: 'next up';
  margin-left: 9px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(204, 255, 0, 0.16);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pos);
  vertical-align: 2px;
}
.appr__sub { grid-column: 1; font-size: 11.5px; color: var(--mute-55); line-height: 1.5; }
.appr__value { grid-row: 1 / -1; grid-column: 2; font-family: var(--mono); font-size: 16px; color: var(--pos); white-space: nowrap; }
.appr__acts { grid-row: 1 / -1; grid-column: 3; display: flex; gap: 7px; }

.btn2 { padding: 10px 18px; border-radius: 999px; font-size: 13px; white-space: nowrap; transition: background .18s ease, transform .18s ease, color .18s ease; }
.btn2--go { background: var(--cream); color: var(--ink-on-cream); font-weight: 500; }
.btn2--go:hover { background: #fff; }
.btn2--no { background: transparent; border: 1px solid var(--rule); color: var(--mute-60); }
.btn2--no:hover { background: rgba(150, 180, 220, 0.12); color: var(--ink-3); }
.btn2:active { transform: scale(.96); }
.empty { padding: 24px 0 6px; font-size: 13px; color: var(--mute-55); }

/* ——— orders table ————————————————————————————————— */
.tbl__grid { display: grid; grid-template-columns: 82px minmax(0,1fr) 108px 88px 56px; gap: 12px; align-items: center; }
.tbl__head { font-family: var(--mono); font-size: 10.5px; color: var(--mute-45); padding-bottom: 9px; border-bottom: 1px solid var(--rule-soft); }
.tbl__head span:nth-child(4), .tbl__row span:nth-child(4),
.tbl__head span:last-child,  .tbl__row span:last-child { text-align: right; }
.tbl__rows { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }
.tbl__row { font-family: var(--mono); font-size: 12.5px; color: var(--body-90); padding: 9px 0; border-bottom: 1px solid rgba(150,180,220,0.06); }
.tbl__row:last-child { border-bottom: 0; }
.t-seg { color: var(--mute-55); }
.t-src { color: var(--mute-62); }
.t-val { color: var(--pos); }
.t-age { color: var(--mute-45); }

/* ——— overnight ————————————————————————————————————— */
.nightly { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }
.night { display: grid; grid-template-columns: 6px minmax(0,1fr); gap: 4px 12px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--rule-soft); }
.night:last-child { border-bottom: 0; }
.night__dot { grid-row: 1 / -1; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--pos); }
.night__agent { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--mute-45); }
.night__text { grid-column: 2; font-size: 13px; line-height: 1.5; color: var(--ink-4); }
.night__metric { grid-column: 2; font-family: var(--mono); font-size: 11.5px; color: var(--pos); }

/* ——— agent views ————————————————————————————————— */
.ahero {
  border-radius: 22px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background:
    linear-gradient(135deg, rgba(204,255,0,0.14), rgba(204,255,0,0.02) 48%, transparent 72%),
    var(--glass);
  border: 1px solid rgba(204, 255, 0, 0.22);
  box-shadow: var(--edge-strong);
}
.ahero--muted { background: linear-gradient(135deg, rgba(190,214,245,0.12), transparent 62%), var(--glass); border-color: var(--glass-edge); }
.ahero__v { font-family: var(--mono); font-size: clamp(34px, 3.6vw, 50px); line-height: 1; font-weight: 400; letter-spacing: -0.035em; color: var(--ink); }
.ahero__l { font-size: 14px; color: var(--ink-4); }
.ahero__s { font-size: 12.5px; color: var(--mute-55); line-height: 1.5; }

/* `.bar` is the top bar. These are metric bars — a name collision here made
   the header a grid and dropped the orbs on top of the tabs. */
.bars { display: flex; flex-direction: column; gap: 13px; }
.mbar { display: grid; grid-template-columns: 132px minmax(0,1fr) 62px; gap: 13px; align-items: center; }
.mbar__k { font-size: 12.5px; color: var(--mute-70); }
.mbar__track { height: 8px; border-radius: 4px; background: rgba(150,180,220,0.14); overflow: hidden; }
.mbar__fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #7fa300, #ccff00); transition: width .9s cubic-bezier(.2,.8,.3,1); }
.mbar__v { font-family: var(--mono); font-size: 12px; color: var(--pos); text-align: right; }

.funnel { display: flex; flex-direction: column; gap: 14px; }
.fstep { display: grid; grid-template-columns: 150px 90px minmax(0,1fr) 44px; gap: 12px; align-items: center; }
.fstep__k { font-size: 12.5px; color: var(--mute-70); }
.fstep__n { font-family: var(--mono); font-size: 13px; color: var(--ink-3); text-align: right; }
.fstep__bar { height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(204,255,0,.55), rgba(204,255,0,.9)); transition: width .9s cubic-bezier(.2,.8,.3,1); }
.fstep__p { font-family: var(--mono); font-size: 11.5px; color: var(--mute-55); text-align: right; }

.qlist { display: flex; flex-direction: column; }
.qrow { display: flex; flex-direction: column; gap: 5px; padding: 13px 0; border-bottom: 1px solid var(--rule-soft); }
.qrow:last-child { border-bottom: 0; }
.qrow__q { font-size: 13.5px; color: var(--ink-4); }
.qrow__a { font-family: var(--mono); font-size: 11.5px; color: var(--pos); }

.grid2 { display: grid; gap: 12px; align-items: center; }
.grid2--head { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--mute-45); padding-bottom: 10px; border-bottom: 1px solid var(--rule-soft); }
.grid2--head span:not(:first-child), .grid2--row span:not(:first-child) { text-align: right; }
.grid2--row { padding: 11px 0; border-bottom: 1px solid rgba(150,180,220,0.06); }
.grid2--row:last-child { border-bottom: 0; }
.g-first { font-size: 13px; color: var(--ink-4); }
.g-cell { font-family: var(--mono); font-size: 12px; color: var(--mute-70); }
.g-cell.is-pos { color: var(--pos); }
.g-cell.is-neg { color: var(--neg); }
.g-cell.is-warn { color: var(--warn); }

/* ——— intelligence ————————————————————————————————— */
.iq { flex: 1; min-height: 0; }
.iq__badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; color: var(--mute-50); }
.iq__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mute-45); }
.iq__dot--on { background: var(--pos); animation: pulse 2.4s ease-out infinite; }
.iq__dot--off { background: var(--warn); }
.iq__thread { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 13px; padding-right: 4px; }
.iq__empty { display: flex; flex-direction: column; gap: 8px; }
.iq__empty h4 { font-size: 13.5px; font-weight: 400; color: var(--ink-4); }
.iq__empty p { font-size: 12.5px; line-height: 1.6; color: var(--mute-55); }
.msg { display: flex; flex-direction: column; gap: 5px; }
.msg__who { font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--mute-45); }
.msg__body { font-size: 13px; line-height: 1.65; color: var(--body-76); white-space: pre-wrap; }
.msg--you .msg__body { align-self: flex-start; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: rgba(150,180,220,0.13); color: var(--ink-3); }
.msg--err .msg__body { color: var(--warn); }
.msg__cut { color: var(--warn); font-size: 12px; }
.msg__caret { display: inline-block; width: 7px; height: 14px; vertical-align: -2px; margin-left: 2px; background: var(--pos); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.iq__prompts { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 7px 12px; border-radius: 999px; background: rgba(150,180,220,0.10); border: 1px solid var(--rule); font-size: 11px; color: var(--mute-70); text-align: left; transition: background .18s ease, color .18s ease; }
.chip:hover { background: rgba(150,180,220,0.2); color: var(--ink-3); }
.iq__form { display: flex; gap: 8px; align-items: flex-end; padding: 8px 8px 8px 16px; border-radius: 18px; background: rgba(12, 22, 38, 0.55); border: 1px solid var(--dark-line); box-shadow: var(--edge); transition: border-color .18s ease; }
.iq__form:focus-within { border-color: rgba(180, 208, 245, 0.34); }
.iq__input { flex: 1; min-width: 0; border: 0; outline: none; resize: none; background: transparent; font-size: 13px; line-height: 1.5; color: var(--ink-3); max-height: 110px; padding: 7px 0; }
.iq__input::placeholder { color: var(--mute-45); }
.iq__input:focus-visible { outline: 2px solid var(--pos); outline-offset: 4px; border-radius: 6px; }
.iq__send { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--ink-on-cream); transition: background .16s ease, opacity .16s ease; }
.iq__send:hover { background: #fff; }
.iq__send[disabled] { opacity: .4; cursor: not-allowed; }

.notice { padding: 12px 14px; border-radius: 13px; background: rgba(232,196,124,0.09); border: 1px solid rgba(232,196,124,0.28); font-size: 11.5px; line-height: 1.55; color: var(--warn); }
.notice code { font-family: var(--mono); font-size: 10.5px; color: #f6e6c4; background: rgba(0,0,0,0.3); padding: 1px 5px; border-radius: 4px; }

.is-bumped { animation: meta-bump .7s cubic-bezier(.2,.9,.3,1); }
@keyframes meta-bump { 0% { color: var(--pos); } 100% { color: var(--mute-55); } }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1240px) {
  .board { flex-direction: column; }
  .rail { width: auto; flex-direction: row; }
  .rail > * { flex: 1; }
  .pane { flex-direction: column; }
  .pane__right { width: auto; }
}

@media (max-width: 900px) {
  body.dash { padding: 12px 10px; }
  .board { border-radius: 26px; padding: 10px; gap: 10px; }
  .rail { flex-direction: column; }
  .bar__orbs { display: none; }
  .bar__pill { height: auto; flex-wrap: wrap; border-radius: 24px; }
  .bar__spacer { display: none; }
  .who { margin-left: auto; }
  .tab { padding: 10px 13px; font-size: 13.5px; }
  .strip { height: auto; flex-wrap: wrap; padding: 14px 8px; }
  .strip__cell { flex: 1 1 44%; }
  .strip__rule { display: none; }
  .card2 { padding: 20px 18px; }
  .appr { grid-template-columns: minmax(0,1fr) auto; }
  .appr__acts { grid-column: 1 / -1; grid-row: auto; margin-top: 10px; }
  .tbl__grid { grid-template-columns: 72px minmax(0,1fr) 78px; }
  .tbl__grid > :nth-child(3), .tbl__grid > :nth-child(5) { display: none; }
  .tbl__grid > :nth-child(4) { text-align: right; }
  .mbar, .fstep { grid-template-columns: 96px minmax(0,1fr) 54px; }
  .fstep__p { display: none; }
}

/* ==========================================================================
   $MATE workspace
   ========================================================================== */

.subnav { display: flex; align-items: center; gap: 4px; padding-bottom: 4px; flex-wrap: wrap; }
.subnav__btn {
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--mute-70);
  transition: background .16s ease, color .16s ease;
}
.subnav__btn:hover { background: rgba(150,180,220,0.10); color: var(--ink-3); }
.subnav__btn[aria-pressed="true"] { background: var(--pill-dark); color: var(--ink); }
.subnav__spacer { flex: 1 1 auto; min-width: 8px; }

.wallet2 { display: flex; align-items: center; gap: 8px; }
.wallet2__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); animation: pulse 2.4s ease-out infinite; }
.wallet2__a { font-family: var(--mono); font-size: 12px; color: var(--ink-4); }
.wallet2__btn {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(150,180,220,0.12);
  border: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--ink-3);
  transition: background .16s ease;
}
.wallet2__btn:hover:not([disabled]) { background: rgba(150,180,220,0.22); }
.wallet2__btn[disabled] { opacity: .45; cursor: not-allowed; }

.tokenbody { display: flex; flex-direction: column; gap: 24px; }

/* — pending states ——————————————————————————————————— */
.pending {
  display: flex; flex-direction: column; gap: 5px;
  padding: 13px 15px;
  border-radius: 12px;
  background: rgba(232,196,124,0.08);
  border: 1px solid rgba(232,196,124,0.24);
}
.pending__tag {
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(232,196,124,0.18);
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--warn);
}
.pending__what { font-size: 13px; color: var(--ink-4); }
.pending__needs { font-size: 11.5px; line-height: 1.5; color: var(--mute-55); }

.note { font-size: 12.5px; line-height: 1.6; color: var(--mute-60); }

/* — plans and tiers ————————————————————————————————— */
.planrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.planc, .tierc {
  text-align: left;
  border-radius: 14px;
  padding: 16px;
  background: rgba(150,180,220,0.06);
  border: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 6px;
  transition: background .18s ease, border-color .18s ease;
}
.planc:hover { background: rgba(150,180,220,0.12); }
.planc.is-on, .tierc.is-on {
  background: linear-gradient(135deg, rgba(204,255,0,0.10), transparent 62%), rgba(150,180,220,0.08);
  border-color: rgba(204,255,0,0.30);
}
.planc { position: relative; }
.planc__n, .tierc__n { font-size: 13px; color: var(--mute-70); }
.planc__tag { font-size: 11.5px; color: var(--mute-55); line-height: 1.4; }
.planc__usd { font-family: var(--mono); font-size: 22px; color: var(--ink); }
.planc__usd small { font-size: 12px; color: var(--mute-55); }
.planc__due { font-size: 12px; color: var(--pos); }
.planc__mate { font-family: var(--mono); font-size: 11px; color: var(--mute-55); }
.planc__badge {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  color: #1d2a08; background: var(--pos); padding: 3px 7px; border-radius: 999px;
}
.tierc__r { font-family: var(--mono); font-size: 26px; color: var(--ink); }
.tierc__m { font-family: var(--mono); font-size: 11px; color: var(--mute-55); }

/* what a plan puts to work */
.plan-inc { display: flex; flex-direction: column; gap: 9px; margin: 2px 0 4px; }
.plan-inc li {
  list-style: none; display: flex; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--mute-70);
}
.plan-inc li::before {
  content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--pos);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.75 8.25-8.25 1.4 1.4z'/%3E%3C/svg%3E") center/11px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.75 8.25-8.25 1.4 1.4z'/%3E%3C/svg%3E") center/11px no-repeat;
}
.plan-best { font-size: 12px; color: var(--mute-55); }

/* list → −20% in MATE → −cashback = what you actually pay */
.eff { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.eff__step {
  flex: 1 1 118px; background: rgba(150,180,220,0.06); border: 1px solid var(--rule);
  border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.eff__step--final { background: linear-gradient(135deg, rgba(204,255,0,0.12), transparent 60%); border-color: rgba(204,255,0,0.30); }
.eff__k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--mute-55); }
.eff__v { font-family: var(--mono); font-size: 18px; color: var(--ink); }
.eff__step--final .eff__v { color: var(--pos); }

.stand { display: flex; align-items: baseline; gap: 12px; }
.stand__tier { font-size: 22px; font-weight: 500; color: var(--ink); }
.stand__rate { font-family: var(--mono); font-size: 15px; color: var(--pos); }

/* — quote grid ——————————————————————————————————————— */
.quotegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 26px; font-family: var(--mono); font-size: 12px; }
.quotegrid--one { grid-template-columns: 1fr; }
.quotegrid .kv { align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-soft); }
.quotegrid .kv__k { white-space: nowrap; }
.quotegrid .kv__v { min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; }

.payload__code {
  margin: 0; padding: 14px 16px;
  border-radius: 12px;
  background: rgba(8,14,24,0.5);
  border: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.7;
  color: var(--body-76); white-space: pre; overflow-x: auto;
}
.payload__code .k { color: var(--mute-50); }
.payload__code .s { color: var(--pos); }
.payload__code .n { color: var(--warn); }

/* — amount due ————————————————————————————————————— */
.due { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.due__k { font-size: 12px; color: var(--mute-60); }
.due__amt { display: flex; align-items: baseline; gap: 10px; }
.due__num { font-family: var(--mono); font-size: clamp(26px, 3vw, 36px); color: var(--ink); letter-spacing: -0.02em; }
.due__sym { font-size: 15px; color: var(--mute-70); }
.due__usd { font-family: var(--mono); font-size: 11.5px; color: var(--mute-55); }
.due__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

.gated { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gated__why { font-size: 11.5px; color: var(--warn); }
.btn2[disabled] { opacity: .4; cursor: not-allowed; }

/* — price ————————————————————————————————————————— */
.priced { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.priced__v { font-family: var(--mono); font-size: clamp(24px, 2.8vw, 32px); color: var(--ink); }
.priced__w { font-family: var(--mono); font-size: 12.5px; color: var(--mute-55); }
.priced__tag {
  padding: 3px 9px; border-radius: 999px;
  background: rgba(232,196,124,0.14);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--warn);
}

/* — swap legs ————————————————————————————————————— */
.leg { border-radius: 14px; padding: 14px 16px; background: rgba(150,180,220,0.06); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; }
.leg__top { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--mute-60); }
.leg__bal { font-family: var(--mono); }
.leg__row { display: flex; align-items: center; gap: 12px; }
.leg__input, .leg__out {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  font-family: var(--mono); font-size: 24px; color: var(--ink); padding: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.leg__input:focus-visible { outline: 2px solid var(--pos); outline-offset: 3px; border-radius: 5px; }
.leg__token { flex: none; padding: 6px 13px; border-radius: 999px; background: rgba(150,180,220,0.14); font-size: 13px; color: var(--ink-3); }

.slip { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.slip__label { font-size: 12.5px; color: var(--mute-66); }
.slip__opts { display: flex; gap: 5px; }
.slip__btn { padding: 6px 12px; border-radius: 999px; background: rgba(150,180,220,0.10); font-family: var(--mono); font-size: 11.5px; color: var(--mute-70); transition: background .16s ease, color .16s ease; }
.slip__btn[aria-pressed="true"] { background: var(--cream); color: var(--ink-on-cream); }

.switch { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(150,180,220,0.10); }
.switch__btn { flex: 1; text-align: center; padding: 10px 0; border-radius: 999px; font-size: 13.5px; color: var(--mute-70); transition: background .18s ease, color .18s ease; }
.switch__btn[aria-pressed="true"] { background: var(--cream); color: var(--ink-on-cream); }

/* — splits, contracts, roadmap ————————————————————— */
.split { display: flex; height: 34px; border-radius: 10px; overflow: hidden; }
.split__part { display: grid; place-items: center; font-family: var(--mono); font-size: 11px; text-align: center; }
.split__part--lit { background: rgba(204,255,0,0.82); color: #14200a; }
.split__part--dim { background: rgba(150,180,220,0.18); color: var(--ink-4); }

.contract { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule-soft); }
.contract:last-child { border-bottom: 0; }
.contract__name { font-size: 13.5px; color: var(--ink-4); }
.contract__role { font-size: 11.5px; line-height: 1.45; color: var(--mute-55); }
.contract__addr { font-family: var(--mono); font-size: 12px; color: var(--pos); white-space: nowrap; }
.contract__addr--pending { color: var(--warn); opacity: .8; }

.steps { display: flex; flex-direction: column; gap: 14px; }
.step { display: flex; align-items: flex-start; gap: 13px; }
.step__n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; background: rgba(150,180,220,0.14); color: var(--ink-4); }
.step--done .step__n { background: var(--cream); color: var(--ink-on-cream); }
.step__body { display: flex; flex-direction: column; gap: 3px; padding-top: 3px; }
.step__title { font-size: 13.5px; color: var(--ink-4); }
.step__note { font-size: 11.5px; line-height: 1.45; color: var(--mute-55); }

.phase { display: flex; flex-direction: column; gap: 5px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.phase:last-child { border-bottom: 0; }
.phase--now { padding: 14px; margin: 0 -14px; border-radius: 12px; background: linear-gradient(100deg, rgba(204,255,0,0.07), transparent 60%); border-bottom-color: transparent; }
.phase__top { display: flex; align-items: baseline; gap: 10px; }
.phase__id { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.phase__when { font-family: var(--mono); font-size: 11px; color: var(--mute-50); }
.phase__now { margin-left: auto; padding: 2px 9px; border-radius: 999px; background: rgba(204,255,0,0.16); font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--pos); }
.phase__what { font-size: 12.5px; line-height: 1.55; color: var(--mute-62); }

@media (max-width: 760px) {
  .planrow { grid-template-columns: 1fr; }
  .quotegrid { grid-template-columns: 1fr; }
}