/* ==========================================================================
   GATE CAPITAL — INVESTOR CABINET
   The authenticated product, built from the public site's design system.
   --------------------------------------------------------------------------
   THE COMPOSITION MODEL

   The public website is not a grid of cards on grey. It is a continuous page
   of full-width bands separated by hairline rules, with dark slabs and
   dimensional objects placed where they carry meaning. The cabinet uses the
   same model, so the two read as one product:

     sheet   the content column is a continuous document, not a grey canvas
     band    a full-width horizontal section, divided by a rule, never a card
     slab    a full-bleed dark band — used ONLY for financial truth,
             verification and capacity. Never for decoration.
     object  a dimensional element, reused verbatim from the public site's
             .dim / .icon-tile / .token-mark recipes. Never inside a table
             or behind a form.
     atmos   the violet/pink field. Orientation and explanation only.

   A card is used only where something is genuinely a discrete object the user
   picks up — a note, a document, an access route. Never as page furniture.

   EXPRESSIVE WHEN ORIENTING. RESTRAINED WHEN PROVING.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · APPLICATION TOKENS
   -------------------------------------------------------------------------- */
:root {
  --app-side:    276px;
  --app-bar-h:   68px;
  /* Gutter and column are tuned so the content beside the sidebar reads as a
     composed page, not an admin template stretched to the viewport. At 1440
     the gutter governs (~1000px of content); past ~1440 the column caps and
     the page centres with real margins, the way the public site does. */
  --app-pad:     clamp(1.5rem, 0.4rem + 4.4vw, 5rem);
  --app-max:     1080px;

  /* the one dark surface family, from the site's .dim--ink */
  --app-slab:      linear-gradient(155deg, #2a2f52 0%, #16182f 62%, #0d0f1e 100%);
  --app-slab-soft: linear-gradient(160deg, #1b2035 0%, #141728 60%, #0d0f1e 100%);

  /* --c-warn is a fill colour; as TEXT it only reaches 2.3:1 on --c-warn-bg */
  --app-warn-text: #8a5a00;

  /* Application text floor. Density comes from composition, never from
     shrinking type — 11px is reserved for uppercase eyebrows only. */
  --app-t-meta: 0.8125rem;   /* 13 — metadata, row detail */
  --app-t-body: 0.875rem;    /* 14 — supporting copy */
}

/* --------------------------------------------------------------------------
   1 · SHELL
   -------------------------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: var(--app-side) minmax(0, 1fr);
  min-height: 100vh; min-height: 100dvh;
  background: var(--c-surface);
}

.app__side {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-6) var(--s-4) var(--s-5);
  background: var(--c-bg-alt);
  border-right: 1px solid var(--c-border);
  z-index: 40;
}
.app__brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 1.3125rem; font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-display);
  color: var(--c-text);
  padding-inline: var(--s-3);
}
.app__brand svg { width: 1.615em; height: 1em; }

/* ---- investor identity — a person, not an initials square ---- */
.app__user {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px;
  align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  color: inherit;
  transition: background var(--dur-2) var(--ease-out);
}
a.app__user:hover { background: var(--c-surface); }
.app__user-name { display: block; font-size: var(--app-t-body); font-weight: var(--fw-semibold); color: var(--c-text); }
.app__user-id   { display: block; font-size: var(--app-t-meta); color: var(--c-text-muted); font-family: var(--font-mono); }
.app__user .ico { color: var(--c-text-faint); }

/* Avatar — a designed portrait placeholder, built to be replaced by the
   investor's real account photo. Deliberately not a lettered square. */
.avatar {
  position: relative; flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(155deg, #cfc9ff 0%, #8f88f0 58%, #6f6de6 100%);
  box-shadow: var(--dim-material), 0 8px 16px -8px rgba(87, 84, 212, 0.5);
}
.avatar img, .avatar svg { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 22%; }
.avatar--sm { width: 34px; height: 34px; }
.avatar--lg { width: 76px; height: 76px; box-shadow: var(--dim-material), 0 18px 30px -14px rgba(87, 84, 212, 0.55); }
.avatar--xl { width: 108px; height: 108px; box-shadow: var(--dim-material), 0 26px 44px -18px rgba(87, 84, 212, 0.55); }
.avatar__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); pointer-events: none; }

/* ---- navigation — accent edge + ink typography, not a glowing pill ---- */
.app__nav {
  display: flex; flex-direction: column; gap: 1px;
  flex: 1 1 auto; overflow-y: auto;
  margin-inline: calc(var(--s-2) * -1); padding-inline: var(--s-2);
}
.app__navlink {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--app-t-body); font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.app__navlink .ico { color: var(--c-text-faint); transition: color var(--dur-2) var(--ease-out); }
.app__navlink:hover { color: var(--c-text); background: var(--c-surface); }
.app__navlink:hover .ico { color: var(--c-text-secondary); }
.app__navlink.is-active {
  background: var(--c-surface); color: var(--c-text);
  font-weight: var(--fw-semibold); box-shadow: var(--e-1);
}
.app__navlink.is-active .ico { color: var(--c-accent); }
.app__navlink.is-active::before {
  content: ""; position: absolute; left: calc(var(--s-2) * -1); top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0;
  background: var(--c-accent);
}
.app__sidefoot {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5) var(--s-3) 0;
  border-top: 1px solid var(--c-border);
}
.app__status { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--app-t-meta); color: var(--c-text-muted); }

/* ---- topbar ---- */
.app__main { min-width: 0; display: flex; flex-direction: column; }
.app__bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s-3);
  height: var(--app-bar-h);
  padding-inline: var(--app-pad);
  background: var(--c-material-strong);
  backdrop-filter: var(--c-material-blur);
  -webkit-backdrop-filter: var(--c-material-blur);
  border-bottom: 1px solid var(--c-border);
}
.app__crumb { font-size: var(--app-t-meta); color: var(--c-text-muted); }
.app__bar-spacer { flex: 1 1 auto; }
.app__iconbtn {
  position: relative;
  width: 38px; height: 38px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  border: 1px solid transparent; background: transparent;
  color: var(--c-text-secondary);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.app__iconbtn:hover { background: var(--c-control-bg); color: var(--c-text); }
.app__iconbtn.is-active { background: var(--c-accent-soft); color: var(--c-accent-text); }
.app__count {
  position: absolute; top: 2px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-accent-solid); color: #fff;
  font-size: var(--t-3xs); font-weight: var(--fw-bold); line-height: 1;
  border: 2px solid var(--c-bg);
}
.app__burger { display: none; }
.app__scrim {
  position: fixed; inset: 0; z-index: 35;
  background: var(--c-scrim);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3);
}
.app.is-menu .app__scrim { opacity: 1; visibility: visible; }
.app__body { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   2 · BANDS — the composition primitive.
   Separated by rules, not by gaps. This is what stops the page reading as a
   stack of cards.
   -------------------------------------------------------------------------- */
.band {
  padding: var(--s-10) var(--app-pad);
  border-top: 1px solid var(--c-rule);
}
.band:first-of-type { border-top: 0; }
.band__in { max-width: var(--app-max); margin-inline: auto; }
.band--tight  { padding-block: var(--s-8); }
.band--alt    { background: var(--c-bg-alt); }
.band--sunken { background: var(--c-bg-sunken); }

/* the page-header band — the only place the application uses atmosphere */
.band--head { padding-block: var(--s-12) var(--s-10); position: relative; isolation: isolate; overflow: hidden; }
.band--head > * { position: relative; z-index: 1; }
.band--head::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -46% -12% auto auto; width: 46%; height: 190%;
  border-radius: 50%; filter: blur(90px);
  opacity: var(--atm-opacity);
  background: radial-gradient(50% 50% at 50% 50%, var(--atm-blue) 0%, transparent 74%),
              radial-gradient(42% 42% at 34% 66%, var(--atm-violet) 0%, transparent 74%);
}
.band--head.band--quiet::before { opacity: .4; }

/* the dark financial slab, full-bleed inside the sheet */
/* The dark surface is a CONTAINED feature panel inside the column. A
   full-bleed dark strip across the whole main area reads as an admin
   template; the public site contains its dark panels too. */
.slab {
  padding: var(--s-4) var(--app-pad) var(--s-10);
  background: transparent;
  border-top: 0;
  position: relative; isolation: isolate;
}
.slab__in {
  max-width: var(--app-max); margin-inline: auto;
  position: relative; z-index: 1;
  overflow: hidden;
  padding: var(--s-8) clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
  border-radius: var(--r-xl);
  background: var(--app-slab);
  color: #fff;
  box-shadow: var(--dim-material), var(--e-dim-violet);
}
.slab .eyebrow { color: rgba(255, 255, 255, 0.66); }
.slab .micro, .slab .meta { color: rgba(255, 255, 255, 0.62); }
.slab a:not(.btn) { color: var(--g-violet-300); }
.slab .meter__track { background: rgba(255, 255, 255, 0.14); }
.slab .meter__fill  { background: linear-gradient(90deg, var(--g-violet-300), var(--g-violet-500)); }
.slab .meter__row   { color: rgba(255, 255, 255, 0.7); }
.slab .strong-label { color: #fff; }
.slab .rule         { background: rgba(255, 255, 255, 0.12); }

/* ── EXPRESSIVE FIELDS ────────────────────────────────────────────────────
   The saturated surfaces from the site's "What's New" section, brought into
   the application as CONTAINED feature panels — never as another flat card
   and never as an edge-to-edge strip.

   Every coloured surface in the cabinet carries the website's dimensional
   recipe, not a flat fill:
     · a three-stop gradient in its own hue
     · the satin material  (inset dark base + bright top edge)
     · a drop shadow tinted to that hue
     · the highlight sweep bleeding off the top-right corner

   Each colour has one job, so it reads as meaning rather than decoration:
     violet   note / product identity, current series, premium
     pink     editorial and product education
     navy     financial authority, security, verification
   -------------------------------------------------------------------------- */
.band--violet, .band--pink {
  background: transparent; border-top-color: transparent;
  padding-block: var(--s-4) var(--s-10);
}
.band--violet .band__in, .band--pink .band__in {
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--s-8) clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
  border-radius: var(--r-xl);
}

/* the material — identical construction to the site's .dim objects */
.slab__in::before,
.band--violet .band__in::before,
.band--pink .band__in::before,
.mod--dark::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -34%; right: -10%;
  width: 54%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 66%);
}
.slab__in > *:not(.band__motif), .band--violet .band__in > *:not(.band__motif),
.band--pink .band__in > *:not(.band__motif), .mod--dark > *:not(.band__motif) { position: relative; z-index: 1; }

.band--violet .band__in {
  background: linear-gradient(169.6deg, #5468e2 12.376%, #4457ec 53.762%, #2b37ab 87.624%);
  box-shadow: inset 0 -5px 12px 0 rgba(10, 12, 30, .26),
              inset 0 1px 0 0 rgba(255, 255, 255, .45),
              0 30px 44px -18px rgba(52, 80, 232, .45);
}
.band--pink .band__in {
  background: linear-gradient(155deg, #f7a9d6 12.376%, #f472bb 53.762%, #c64f94 87.624%);
  box-shadow: inset 0 -5px 12px 0 rgba(60, 10, 40, .22),
              inset 0 1px 0 0 rgba(255, 255, 255, .50),
              0 30px 44px -18px rgba(198, 79, 148, .40);
}

/* On a saturated field every piece of text takes the field's own ink at a
   tested opacity, so nothing drops below AA. */
.band--violet { --on: #fff;    --on-soft: #fff; }
.band--pink   { --on: #14060f; --on-soft: rgba(20, 6, 15, .88); }
.band--violet, .band--pink { color: var(--on); }

.band--violet .eyebrow, .band--violet .meta, .band--violet .meta--faint,
.band--violet .sec__sub, .band--violet .gauge__k, .band--violet .gauge__row,
.band--violet .meter__row, .band--violet .kv dt, .band--violet .rw__k,
.band--violet .rw__meta, .band--violet .metric__k, .band--violet .metric__f,
.band--violet .drow__desc, .band--violet .drow__when, .band--violet .nrow__body,
.band--violet .nrow__when,
.band--pink .eyebrow, .band--pink .meta, .band--pink .meta--faint,
.band--pink .sec__sub, .band--pink .gauge__k, .band--pink .gauge__row,
.band--pink .meter__row, .band--pink .kv dt, .band--pink .rw__k,
.band--pink .rw__meta, .band--pink .metric__k, .band--pink .metric__f,
.band--pink .drow__desc, .band--pink .drow__when, .band--pink .nrow__body,
.band--pink .nrow__when { color: var(--on-soft); }

.band--violet .sec__title, .band--violet .kv dd, .band--violet .rw__id,
.band--violet .rw__v, .band--violet .strong-label, .band--violet .fig-lg,
.band--violet .fig-md, .band--violet .fig-sm, .band--violet .metric__v,
.band--violet .drow__title, .band--violet .nrow__title, .band--violet h2, .band--violet strong,
.band--pink .sec__title, .band--pink .kv dd, .band--pink .rw__id,
.band--pink .rw__v, .band--pink .strong-label, .band--pink .fig-lg,
.band--pink .fig-md, .band--pink .fig-sm, .band--pink .metric__v,
.band--pink .drow__title, .band--pink .nrow__title, .band--pink h2, .band--pink strong { color: var(--on); }

.band--violet .meter__track { background: rgba(255, 255, 255, .24); }
.band--violet .meter__fill  { background: #fff; }
.band--pink .meter__track   { background: rgba(20, 6, 15, .18); }
.band--pink .meter__fill    { background: #14060f; }

.band--violet .kv > div { border-color: rgba(255, 255, 255, .24); }
.band--pink .kv > div   { border-color: rgba(20, 6, 15, .16); }
.band--violet .rw, .band--violet .row-list { border-color: rgba(255, 255, 255, .24); }
.band--pink .rw, .band--pink .row-list     { border-color: rgba(20, 6, 15, .16); }
.band--violet a.rw:hover { background: rgba(255, 255, 255, .10); box-shadow: none; }
.band--pink a.rw:hover   { background: rgba(255, 255, 255, .16); box-shadow: none; }
.band--violet .link-arrow, .band--pink .link-arrow { color: inherit; }
.band--violet .btn--secondary, .band--pink .btn--secondary {
  background: transparent; color: inherit; border-color: currentColor;
}
.band--violet .btn--primary { background: #fff; color: #23306f; border-color: #fff; }
.band--pink   .btn--primary { background: #14060f; color: #fff; border-color: #14060f; }
.band--violet .pill, .band--pink .pill { background: transparent; border-color: currentColor; color: inherit; }

/* the site's line-art motif, bled off the corner of a coloured panel */
.band__motif {
  position: absolute; z-index: 0;
  right: -60px; bottom: -70px;
  width: 320px; height: 268px;
  stroke: currentColor; stroke-width: 1; fill: none;
  opacity: .30; pointer-events: none;
}

/* the same hues, dropped for a midnight page — matching the site */
:root[data-theme="dark"] .band--violet .band__in { background: linear-gradient(169.6deg, #5f74e0 12.376%, #3a49cf 53.762%, #26309e 87.624%); }
:root[data-theme="dark"] .band--pink   .band__in { background: linear-gradient(155deg, #ec86bb 12.376%, #d94f9c 53.762%, #a63a76 87.624%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band--violet .band__in { background: linear-gradient(169.6deg, #5f74e0 12.376%, #3a49cf 53.762%, #26309e 87.624%); }
  :root:not([data-theme="light"]) .band--pink   .band__in { background: linear-gradient(155deg, #ec86bb 12.376%, #d94f9c 53.762%, #a63a76 87.624%); }
}

/* --------------------------------------------------------------------------
   3 · PAGE FURNITURE
   -------------------------------------------------------------------------- */
.pg { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-8); flex-wrap: wrap; }
.pg__title {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-display);
  line-height: 1.02;
  margin: var(--s-3) 0;
}
.pg__sub { font-size: var(--t-body); color: var(--c-text-secondary); max-width: 60ch; line-height: var(--lh-snug); }
.pg__acts { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }

.sec { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-6); }
.sec__title { font-family: var(--font-display); font-size: var(--t-h1); font-weight: var(--fw-semibold); letter-spacing: var(--tr-tight); margin-top: var(--s-2); }
.sec__sub { font-size: var(--app-t-body); color: var(--c-text-secondary); max-width: 62ch; margin-top: var(--s-2); }

.meta { font-size: var(--app-t-meta); color: var(--c-text-muted); }
.meta--faint { color: var(--c-text-faint); }

.step-n {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: grid; place-items: center; flex: none;
  background: var(--c-accent-soft); color: var(--c-accent-text);
  font-size: var(--t-2xs); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   4 · FINANCIAL DATA
   -------------------------------------------------------------------------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(var(--m-n, 4), minmax(0, 1fr));
  gap: 1px;
  background: var(--c-rule);
  border-block: 1px solid var(--c-rule);
}
.metric {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-6) var(--s-5) var(--s-6) 0;
  background: var(--c-surface);
}
.metric:not(:first-child) { padding-left: var(--s-6); }
.metric__k { font-size: var(--app-t-meta); color: var(--c-text-muted); }
.metric__v {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--t-fig-md); letter-spacing: -0.03em; line-height: 1.04;
  font-variant-numeric: tabular-nums; color: var(--c-text);
  margin-top: var(--s-1);
}
.metric__v--pos   { color: var(--c-verify); }
.metric__v--empty { color: var(--c-text-faint); }
.metric__f { font-size: var(--app-t-meta); color: var(--c-text-muted); }
.metric__f a { color: var(--c-accent-text); border-bottom: 1px solid var(--c-accent-border); }
.band--alt .metric { background: transparent; }
.slab .metrics { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .12); }
.slab .metric { background: transparent; }
.slab .metric__k { color: rgba(255, 255, 255, .66); }
.slab .metric__v { color: #fff; }
.slab .metric__f { color: rgba(255, 255, 255, .68); }

.fig-hero { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4rem); letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.fig-lg { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--t-fig-lg); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.fig-md { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--t-fig-md); letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fig-sm { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--t-h2); letter-spacing: var(--tr-tight); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.pos { color: var(--c-verify); }

/* --------------------------------------------------------------------------
   5 · MODULES — connected groups: one border, internal rules
   -------------------------------------------------------------------------- */
.mod { position: relative; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); overflow: hidden; }
.mod__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--c-border); }
.mod__title { display: block; font-family: var(--font-display); font-size: var(--t-h3); font-weight: var(--fw-semibold); letter-spacing: var(--tr-tight); }
.mod__body { padding: var(--s-6); }
.mod__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-4) var(--s-6); border-top: 1px solid var(--c-border); background: var(--c-bg-alt); font-size: var(--app-t-meta); color: var(--c-text-muted); }
.mod--dark { background: var(--app-slab); color: #fff; border-color: transparent; box-shadow: var(--dim-material), var(--e-dim-violet); }
.mod--dark .mod__head, .mod--dark .mod__foot { border-color: rgba(255, 255, 255, .12); background: transparent; }
.mod--dark .eyebrow, .mod--dark .micro, .mod--dark .meta { color: rgba(255, 255, 255, .64); }
.mod--dark a:not(.btn) { color: var(--g-violet-300); }
.mod--dark .meter__track { background: rgba(255, 255, 255, .14); }
.mod--dark .meter__fill { background: linear-gradient(90deg, var(--g-violet-300), var(--g-violet-500)); }
.mod--dark .meter__row { color: rgba(255, 255, 255, .7); }
.mod--dark .strong-label { color: #fff; }

/* --------------------------------------------------------------------------
   6 · ROWS — notes, ledger, documents share one rhythm
   -------------------------------------------------------------------------- */
.row-list { border-top: 1px solid var(--c-rule); }
.rw {
  display: grid; align-items: center; gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--c-rule);
  transition: background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  position: relative;
}
a.rw:hover { background: var(--c-bg-alt); box-shadow: 0 0 0 var(--s-4) var(--c-bg-alt); }
.rw__id { font-size: var(--t-h4); font-weight: var(--fw-semibold); color: var(--c-text); }
.rw__meta { font-size: var(--app-t-meta); color: var(--c-text-muted); font-family: var(--font-mono); }
.rw__cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rw__k { font-size: var(--t-2xs); color: var(--c-text-faint); }
.rw__v { font-size: var(--app-t-body); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--c-text); }
.rw__v small { display: block; font-size: var(--app-t-meta); font-weight: var(--fw-regular); color: var(--c-text-faint); }
.rw__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); width: 100%; }
.rw__end { text-align: right; align-items: flex-end; }

.nbadge {
  width: 58px; height: 58px; border-radius: var(--r-md); flex: none;
  display: grid; place-items: center; align-content: center;
  background: linear-gradient(155deg, #efedff 0%, #ded9ff 100%);
  color: var(--c-accent-text);
  border: 1px solid var(--c-accent-border);
  font-size: var(--app-t-body); font-weight: var(--fw-bold); line-height: 1;
}
.nbadge small { font-size: var(--t-3xs); font-weight: var(--fw-medium); opacity: .85; margin-top: 2px; }
.nbadge--amort { background: linear-gradient(155deg, #e9eeff 0%, #d5dfff 100%); color: var(--g-blue-700); border-color: var(--g-blue-200); }
.nbadge--done  { background: var(--c-bg-alt); color: var(--c-text-muted); border-color: var(--c-border); }

.lmark {
  width: 36px; height: 36px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--c-border);
  background: var(--c-surface); color: var(--c-text-secondary);
}
.lmark .ico { width: 17px; height: 17px; }
.lmark--in  { color: var(--c-verify); border-color: var(--c-verify-border); background: var(--c-verify-bg); }
.lmark--out { color: var(--c-accent-text); border-color: var(--c-accent-border); background: var(--c-accent-soft); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-2xs); font-weight: var(--fw-semibold);
  white-space: nowrap;
  background: var(--c-control-bg); color: var(--c-text-secondary);
  border: 1px solid var(--c-control-border);
}
.pill--active { background: var(--c-accent-soft); border-color: var(--c-accent-border); color: var(--c-accent-text); }
.pill--soon   { background: var(--c-blue-soft);   border-color: transparent;            color: var(--c-blue); }
.pill--done   { background: var(--c-verify-bg);   border-color: var(--c-verify-border); color: var(--c-verify); }
.pill--warn   { background: var(--c-warn-bg);     border-color: var(--c-warn-border);   color: var(--app-warn-text); }
.pill--off    { background: transparent; border-style: dashed; color: var(--c-text-faint); }
/* a pill is a grid item once .rw collapses to one column — without this it
   stretches into a full-width bar */
.rw > .pill, .drow > .pill { justify-self: start; }
/* a consistent chip column stops rows jogging when the label length changes */
.rw > .pill { min-width: 92px; justify-content: center; }
@media (max-width: 860px) { .rw > .pill { min-width: 0; justify-content: flex-start; } }
:root[data-theme="dark"] .pill--soon { color: var(--g-blue-300); }

/* --------------------------------------------------------------------------
   7 · CONTROLS
   -------------------------------------------------------------------------- */
.toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-4); align-items: end; padding: var(--s-5) 0; }

.inp, .sel, .txta {
  width: 100%;
  font-family: var(--font-body); font-size: var(--app-t-body); color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-control-border);
  border-radius: var(--r-sm);
  padding: 0 var(--s-4);
  height: 46px;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.txta { height: auto; min-height: 136px; padding: var(--s-4); line-height: var(--lh-body); resize: vertical; }
.sel { appearance: none; padding-right: var(--s-10); cursor: pointer; }
.sel-wrap { position: relative; }
.sel-wrap > .ico { position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--c-text-faint); }
.inp::placeholder, .txta::placeholder { color: var(--c-text-faint); }
.inp:hover, .sel:hover, .txta:hover { border-color: var(--c-border-strong); }
.inp:focus-visible, .sel:focus-visible, .txta:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-focus-ring); }
.inp[readonly] { background: var(--c-bg-alt); color: var(--c-text-secondary); }
.inp:disabled, .sel:disabled, .txta:disabled { opacity: .55; cursor: not-allowed; }
.inp.is-error { border-color: var(--c-danger); }
.inp.is-error:focus-visible { box-shadow: 0 0 0 3px rgba(217, 74, 74, .26); }
.err { font-size: var(--app-t-meta); color: var(--c-danger); margin-top: var(--s-2); display: flex; gap: 6px; align-items: center; }
.lbl { display: block; font-size: var(--app-t-meta); font-weight: var(--fw-semibold); color: var(--c-text-secondary); margin-bottom: var(--s-2); }
.lbl small { font-size: var(--t-2xs); font-weight: var(--fw-regular); color: var(--c-text-faint); margin-left: var(--s-2); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.inp-icon { position: relative; }
.inp-icon > .ico { position: absolute; left: var(--s-4); top: 50%; transform: translateY(-50%); color: var(--c-text-faint); pointer-events: none; }
.inp-icon .inp { padding-left: calc(var(--s-10) + 2px); }

.opt {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-4) var(--s-3);
  border: 1px solid var(--c-control-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  text-align: center;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.opt__v { font-size: var(--t-h4); font-weight: var(--fw-semibold); color: var(--c-text); letter-spacing: var(--tr-tight); }
.opt__m { font-size: var(--app-t-meta); color: var(--c-text-muted); }
.opt:hover:not(:disabled) { border-color: var(--c-accent-border); background: var(--c-accent-soft); }
.opt[aria-pressed="true"] {
  border-color: var(--c-accent);
  background: linear-gradient(160deg, #f6f4ff 0%, #ece8ff 100%);
  box-shadow: 0 0 0 1px var(--c-accent), 0 10px 18px -12px rgba(87, 84, 212, .55);
}
.opt[aria-pressed="true"] .opt__v { color: var(--c-accent-text); }
.opt[aria-pressed="true"] .opt__m { color: var(--c-accent-text); opacity: .82; }
.opt:disabled, .opt[aria-disabled="true"] { opacity: .5; cursor: not-allowed; background: var(--c-bg-alt); }
.opt:disabled .opt__v { color: var(--c-text-faint); }
/* Nine across is too tight inside the 1080 column's left sub-column — every
   duration label wrapped to two lines. Five across gives each option ~95px
   of content, so 180 days stays on one line at every desktop width. */
.termgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
.denoms   { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }

.gauge { display: flex; flex-direction: column; gap: var(--s-3); }
.gauge__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.gauge__k { font-size: var(--t-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-text-muted); }
.gauge__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); font-size: var(--app-t-meta); color: var(--c-text-muted); }

.kv { display: flex; flex-direction: column; }
.kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--c-rule); }
.kv > div:first-child { border-top: 0; }
.kv dt { font-size: var(--app-t-meta); color: var(--c-text-muted); }
.kv dd { margin: 0; text-align: right; font-size: var(--app-t-body); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--c-text); }
.kv dd small { display: block; font-size: var(--app-t-meta); font-weight: var(--fw-regular); color: var(--c-text-faint); }
/* width/height do not apply to a non-replaced inline element */
.app .badge-dot, .auth .badge-dot { display: inline-block; vertical-align: middle; }
.kv .badge-dot { margin-right: 4px; }
.slab .kv > div, .mod--dark .kv > div { border-color: rgba(255, 255, 255, .12); }
.slab .kv dt, .mod--dark .kv dt { color: rgba(255, 255, 255, .62); }
.slab .kv dd, .mod--dark .kv dd { color: #fff; }
.slab .kv dd small, .mod--dark .kv dd small { color: rgba(255, 255, 255, .5); }

.facts { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.facts > div { padding: var(--s-4); border-right: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.facts > div:nth-child(2n) { border-right: 0; }
.facts > div:nth-last-child(-n+2) { border-bottom: 0; }
.facts dt { font-size: var(--app-t-meta); color: var(--c-text-muted); margin-bottom: 3px; }
.facts dd { margin: 0; font-size: var(--app-t-body); font-weight: var(--fw-semibold); }

/* --------------------------------------------------------------------------
   8 · DIMENSIONAL OBJECTS — the site's recipes, reused verbatim
   -------------------------------------------------------------------------- */
.obj {
  position: relative; isolation: isolate;
  display: grid; place-items: center;
  border-radius: var(--r-2xl);
  box-shadow: var(--dim-material), var(--e-dim-violet);
  /* a flex row would otherwise shrink these to tall ovals on small screens */
  flex: none;
  aspect-ratio: 1;
}
.obj::after {
  content: ""; position: absolute; top: -34%; right: -14%;
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 66%);
  pointer-events: none; z-index: 0;
}
.obj > * { position: relative; z-index: 1; }
.obj--violet { background: linear-gradient(169.6deg, #a8a6fa 12.376%, #6f6de6 53.762%, #5754d4 87.624%); box-shadow: var(--e-dim), var(--dim-material); color: #fff; }
.obj--ink    { background: linear-gradient(155deg, #33375e 12.376%, #16182f 87.624%); box-shadow: var(--e-dim-ink), var(--dim-material); color: #fff; }
.obj--green  { background: linear-gradient(155deg, #5fd2a6 12.376%, #22916c 87.624%); box-shadow: var(--e-dim-green), var(--dim-material); color: #fff; }
.obj--light  { background: linear-gradient(155deg, #ffffff 12.376%, #eceaff 87.624%); box-shadow: var(--dim-material); filter: drop-shadow(0 24px 30px rgba(87, 84, 212, .26)); color: var(--c-accent); border: 1px solid var(--c-border); }
.obj--pink   { background: linear-gradient(155deg, #f7a9d6 12.376%, #de6bac 53.762%, #c64f94 87.624%); box-shadow: var(--e-dim-pink), var(--dim-material); color: #fff; }
.obj--blue   { background: linear-gradient(155deg, #7d94ff 12.376%, #3d5bfa 53.762%, #2740d0 87.624%); box-shadow: var(--e-dim-blue), var(--dim-material); color: #fff; }
.obj--84  { width: 84px;  height: 84px;  border-radius: 24px; }
.obj--104 { width: 104px; height: 104px; border-radius: 28px; }
.obj--132 { width: 132px; height: 132px; border-radius: 34px; }
.obj__glyph { width: 48%; height: 48%; stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.obj__badge {
  position: absolute; right: -8px; bottom: -8px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-surface); border: 1px solid var(--c-border);
  box-shadow: var(--e-2);
}

/* ── THE NOTE OBJECT ──────────────────────────────────────────────────────
   Figma node 32:8889 — the approved V3 debt-note object, reproduced to its
   exact values (gradient angle, stops, both shadows, the highlight span's
   size and offset, and every type size and tracking).

   This is the dimensional language the brand already owns, and it earns its
   place because it IS the product: a note you can read, not an abstract blob.
   Used only where a specific note is the subject.
   -------------------------------------------------------------------------- */
.notecard {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 22px;
  min-width: 0;
  padding: 28px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(169.6061693382494deg,
              rgb(168, 166, 250) 12.376%,
              rgb(111, 109, 230) 53.762%,
              rgb(87, 84, 212) 87.624%);
  box-shadow: 0 60px 100px -36px rgba(87, 84, 212, 0.55),
              inset 0 -5px 12px 0 rgba(10, 12, 30, 0.26),
              inset 0 1px 0 0 rgba(255, 255, 255, 0.55);
}
/* the polish on the material — Figma 32:8890, 260px at top -80px */
.notecard::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 260px; height: 260px; border-radius: 50%;
  top: -80px; right: -88px;
  background: radial-gradient(circle at 50% 50%,
              rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 66%);
}
.notecard > * { position: relative; z-index: 1; }

.notecard__top  { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.notecard__brand {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: 20px; line-height: 25px; letter-spacing: -0.6px;
}
.notecard__brand svg { width: 1.615em; height: 1em; }
.notecard__ref  { font-size: 13px; opacity: .9; text-align: right; }
.notecard__mid  { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); }
.notecard__k    { display: block; font-size: 13px; opacity: .9; margin-bottom: 2px; }
.notecard__nominal {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: 46px; line-height: 46px; letter-spacing: -1.84px;
  font-variant-numeric: tabular-nums;
}
.notecard__redeem {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: 28px; line-height: 28px; letter-spacing: -0.84px;
  font-variant-numeric: tabular-nums;
}
.notecard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.26);
  font-family: var(--font-mono); font-size: 13px; opacity: .9;
}
/* the USDT mark riding the corner, as in the approved composition */
.notecard-wrap { position: relative; display: inline-block; max-width: 100%; }
.notecard-wrap .token-mark { position: absolute; right: -20px; bottom: -20px; z-index: 2; }

@media (max-width: 640px) {
  .notecard { padding: 22px; gap: 16px; }
  .notecard__nominal { font-size: 34px; line-height: 34px; letter-spacing: -1.3px; }
  .notecard__redeem  { font-size: 22px; line-height: 22px; letter-spacing: -0.6px; }
  /* header stacks so "· 1W" cannot orphan, and leaves the top-right corner
     clear for the USDT mark */
  .notecard__top { flex-direction: column; align-items: flex-start; gap: 2px; padding-right: 56px; }
  .notecard__ref { text-align: left; }
  .notecard__mid { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .notecard__mid > div { text-align: left !important; }
  /* the two facts stack and never run under the mark */
  .notecard__foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .notecard__foot span { white-space: nowrap; }
  /* the mark sits in the corner the header just vacated */
  .notecard-wrap .token-mark { right: -12px; top: -12px; bottom: auto; width: 46px; height: 46px; font-size: 9px; }
}

/* --------------------------------------------------------------------------
   9 · DOCUMENT / NOTIFICATION ROWS
   -------------------------------------------------------------------------- */
.drow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--s-5); align-items: start; padding: var(--s-6) 0; border-bottom: 1px solid var(--c-rule); }
.drow__n { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--c-bg-alt); color: var(--c-text-secondary); border: 1px solid var(--c-border); font-size: var(--app-t-meta); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.drow__kind { display: block; font-size: var(--t-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-accent-text); }
.drow__title { display: block; font-size: var(--t-h4); font-weight: var(--fw-semibold); margin: 3px 0 var(--s-2); }
.drow__desc { font-size: var(--app-t-body); color: var(--c-text-secondary); max-width: 76ch; line-height: var(--lh-snug); }
.drow__ids { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-3); font-size: var(--app-t-meta); color: var(--c-text-faint); }
.drow__ids code { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--c-text-muted); }
.drow__state { text-align: right; display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-end; }
.drow__when { font-size: var(--app-t-meta); color: var(--c-text-faint); font-variant-numeric: tabular-nums; }

.nrow { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-6) 0; border-bottom: 1px solid var(--c-rule); position: relative; }
.nrow.is-unread::before { content: ""; position: absolute; left: calc(var(--s-6) * -1); top: var(--s-6); width: 4px; height: 24px; border-radius: 0 4px 4px 0; background: var(--c-accent); }
.nrow__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.nrow__src { font-size: var(--t-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tr-caps); text-transform: uppercase; }
.nrow__when { font-size: var(--app-t-meta); color: var(--c-text-muted); }
.nrow__title { font-size: var(--t-h4); font-weight: var(--fw-semibold); margin: var(--s-2) 0; }
.nrow__body { font-size: var(--app-t-body); color: var(--c-text-secondary); max-width: 80ch; line-height: var(--lh-snug); }
.nrow__acts { display: flex; gap: var(--s-6); flex-wrap: wrap; margin-top: var(--s-4); align-items: center; }
.nrow--company  .nrow__src { color: var(--c-accent-text); }
.nrow--registry .nrow__src { color: var(--c-blue); }
.nrow--security .nrow__src { color: var(--app-warn-text); }
.nrow--account  .nrow__src { color: var(--c-text-muted); }

/* --------------------------------------------------------------------------
   10 · LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.cols { display: grid; gap: var(--grid-gutter); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-side { grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); align-items: start; }
.cols-side--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.72fr); align-items: start; }
.rail { position: sticky; top: calc(var(--app-bar-h) + var(--s-6)); }

/* object + copy pairing. The copy must be allowed to shrink, and below 480 the
   object stacks above it rather than squeezing the text off the edge. */
.objrow { display: flex; gap: var(--s-6); align-items: flex-start; }
.objrow--mid { align-items: center; }
.objrow > :not(.obj) { min-width: 0; }
@media (max-width: 480px) {
  .objrow, .objrow--mid { flex-direction: column; align-items: flex-start; gap: var(--s-5); }
}

.empty { text-align: center; padding: var(--s-16) var(--s-6); display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.empty__title { font-family: var(--font-display); font-size: var(--t-h2); font-weight: var(--fw-semibold); }
.empty__body { font-size: var(--app-t-body); color: var(--c-text-secondary); max-width: 46ch; }

/* --------------------------------------------------------------------------
   11 · AUTH — the bridge from the public site into the product
   -------------------------------------------------------------------------- */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background: var(--c-bg); position: relative; isolation: isolate; overflow: hidden; }
.auth::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -18% -14% auto -14%; height: 116%;
  border-radius: 50%; filter: blur(100px); opacity: var(--atm-opacity);
  background: radial-gradient(42% 46% at 28% 40%, var(--atm-violet) 0%, transparent 72%),
              radial-gradient(38% 42% at 68% 58%, var(--atm-pink) 0%, transparent 70%),
              radial-gradient(34% 38% at 50% 84%, var(--atm-blue) 0%, transparent 72%);
}
.auth > * { position: relative; z-index: 1; }
.auth__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-6) var(--app-pad); }
.auth__main { display: grid; place-items: center; padding: var(--s-8) var(--app-pad) var(--s-12); }
.auth__in { width: 100%; max-width: 940px; }
.auth__head { text-align: center; margin-bottom: var(--s-10); }
.auth__title { font-family: var(--font-display); font-size: clamp(2.25rem, 1.6rem + 2.7vw, 3.5rem); font-weight: var(--fw-semibold); letter-spacing: var(--tr-display); line-height: 1.02; margin: var(--s-3) 0 var(--s-4); }
.auth__sub { font-size: var(--t-body); color: var(--c-text-secondary); max-width: 58ch; margin-inline: auto; line-height: var(--lh-snug); }
.auth__foot { text-align: center; padding: var(--s-6) var(--app-pad) var(--s-8); font-size: var(--app-t-meta); color: var(--c-text-muted); }
.auth__card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--e-3); padding: var(--s-8); }
.auth__routes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gutter); }
.auth__route { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-4); padding: var(--s-8) var(--s-6); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--e-2); transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
@media (hover: hover) { .auth__route:hover { border-color: var(--c-accent-border); box-shadow: var(--e-3); transform: translateY(-2px); } }
.auth__route h2 { font-size: var(--t-h2); font-weight: var(--fw-semibold); letter-spacing: var(--tr-tight); }
.auth__route p { font-size: var(--app-t-body); color: var(--c-text-secondary); max-width: 34ch; line-height: var(--lh-snug); }
.auth__route .btn { margin-top: auto; }
.auth__narrow { max-width: 520px; margin-inline: auto; }
.auth__links { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-5); font-size: var(--app-t-meta); }

/* --------------------------------------------------------------------------
   12 · RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  :root { --app-side: 244px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:not(:first-child) { padding-left: var(--s-5); }
  .metric:nth-child(odd) { padding-left: 0; }
}
@media (max-width: 1100px) {
  .cols-side, .cols-side--rev { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
}
@media (max-width: 1024px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app__side { position: fixed; inset: 0 auto 0 0; width: min(304px, 86vw); transform: translateX(-102%); transition: transform var(--dur-3) var(--ease-out); box-shadow: var(--e-4); }
  .app.is-menu .app__side { transform: none; }
  .app__burger { display: grid; }
  .termgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .auth__routes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .cols-2, .cols-3 { grid-template-columns: minmax(0, 1fr); }
  .toolbar { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .rw { grid-template-columns: minmax(0, 1fr) !important; row-gap: var(--s-4); }
  .rw__end { text-align: left; align-items: flex-start; }
  .rw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .drow { grid-template-columns: minmax(0, 1fr); }
  .drow__n { display: none; }
  .drow__state { text-align: left; align-items: flex-start; margin-top: var(--s-4); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts > div { border-right: 0; }
  .facts > div:nth-last-child(2) { border-bottom: 1px solid var(--c-border); }
}
@media (max-width: 640px) {
  /* stop "Sign-in method" / "Registration date" splitting mid-phrase */
  .kv > div { flex-direction: column; align-items: flex-start; gap: 4px; }
  .kv dd { text-align: left; }
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .metric { padding: var(--s-5) 0 !important; }
  /* inside a bordered module the row still needs its inset */
  .mod .metric { padding-inline: var(--s-6) !important; }
  .denoms { grid-template-columns: minmax(0, 1fr); }
  .termgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .band { padding-block: var(--s-8); }
  .rw__grid { grid-template-columns: minmax(0, 1fr); }
  .nrow, .drow { grid-template-columns: minmax(0, 1fr); }
  .nrow > .lmark { display: none; }
  .auth__card { padding: var(--s-6); }
}
@media (max-width: 400px) { .termgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (hover: none) { .app__navlink, .btn, .tabs__btn, .app__iconbtn, .opt { min-height: 44px; } }

/* --------------------------------------------------------------------------
   13 · DARK — designed, not inverted
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] { --app-warn-text: var(--g-amber-400); }
:root[data-theme="dark"] .app { background: var(--c-bg); }
:root[data-theme="dark"] .app__side { background: var(--c-bg-sunken); }
:root[data-theme="dark"] .app__navlink.is-active { background: var(--c-surface); box-shadow: none; }
:root[data-theme="dark"] .app__bar { background: var(--c-material); }
:root[data-theme="dark"] .metric { background: var(--c-bg); }
:root[data-theme="dark"] .band--alt .metric { background: transparent; }
:root[data-theme="dark"] .slab, :root[data-theme="dark"] .mod--dark { background: var(--app-slab-soft); }
:root[data-theme="dark"] .mod--dark { box-shadow: none; }
:root[data-theme="dark"] .nbadge { background: rgba(143, 125, 251, .16); border-color: var(--c-accent-border); color: var(--g-violet-300); }
:root[data-theme="dark"] .nbadge--amort { background: rgba(94, 123, 255, .16); border-color: rgba(94, 123, 255, .34); color: var(--g-blue-300); }
:root[data-theme="dark"] .nbadge--done { background: var(--c-surface); color: var(--c-text-muted); border-color: var(--c-border); }
:root[data-theme="dark"] .opt[aria-pressed="true"] { background: rgba(143, 125, 251, .14); box-shadow: 0 0 0 1px var(--c-accent); }
:root[data-theme="dark"] .obj--light { background: linear-gradient(155deg, #232840 12.376%, #171a2c 87.624%); color: var(--g-violet-300); border-color: var(--c-border); }
:root[data-theme="dark"] .auth__card, :root[data-theme="dark"] .auth__route { box-shadow: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --app-warn-text: var(--g-amber-400); }
  :root:not([data-theme="light"]) .app__side { background: var(--c-bg-sunken); }
  :root:not([data-theme="light"]) .app__navlink.is-active { background: var(--c-surface); box-shadow: none; }
  :root:not([data-theme="light"]) .app__bar { background: var(--c-material); }
  :root:not([data-theme="light"]) .metric { background: var(--c-bg); }
  :root:not([data-theme="light"]) .slab, :root:not([data-theme="light"]) .mod--dark { background: var(--app-slab-soft); }
  :root:not([data-theme="light"]) .mod--dark { box-shadow: none; }
  :root:not([data-theme="light"]) .pill--soon { color: var(--g-blue-300); }
  :root:not([data-theme="light"]) .nbadge { background: rgba(143, 125, 251, .16); border-color: var(--c-accent-border); color: var(--g-violet-300); }
  :root:not([data-theme="light"]) .nbadge--amort { background: rgba(94, 123, 255, .16); border-color: rgba(94, 123, 255, .34); color: var(--g-blue-300); }
  :root:not([data-theme="light"]) .obj--light { background: linear-gradient(155deg, #232840 12.376%, #171a2c 87.624%); color: var(--g-violet-300); }
  :root:not([data-theme="light"]) .auth__card, :root:not([data-theme="light"]) .auth__route { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .app__side, .app__scrim, .meter__fill, .opt, .rw, .auth__route { transition: none !important; }
}

/* --------------------------------------------------------------------------
   14 · FIGMA → LIVE SYNC (2026-09-10) — intentional visual tweaks made
   manually in the current Figma dashboard, carried into the implementation.
   -------------------------------------------------------------------------- */
/* Sidebar: the active item is a violet pill that hugs its content
   (Figma: fill #6249DD, radius 8, padding 8/16, shadow 0 10 18 @ 30%). */
.app__navlink.is-active {
  background: var(--c-accent-solid); color: #fff;
  font-weight: var(--fw-semibold);
  border-radius: 8px; padding: 8px 16px;
  width: fit-content; min-width: 162px; align-self: flex-start;
  margin: 2px 0 10px;
  box-shadow: 0 10px 18px rgba(98, 73, 221, .30);
}
.app__navlink.is-active .ico { color: #fff; }
.app__navlink.is-active::before { display: none; }
:root[data-theme="dark"] .app__navlink.is-active { background: var(--c-accent-solid); box-shadow: 0 10px 18px rgba(98, 73, 221, .30); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app__navlink.is-active { background: var(--c-accent-solid); box-shadow: 0 10px 18px rgba(98, 73, 221, .30); }
}
/* Activity: the all-time position metrics sit directly on the slab —
   hairline frame only, no glass fill. */
.slab .metrics { background: transparent; }
/* Pink bands (Notifications "How it works", Documents "Public resources"):
   white type on the pink material, outlined white button. */
.band--pink { --on: #fff; --on-soft: rgba(255, 255, 255, .88); }
.band--pink .kv > div, .band--pink .rw, .band--pink .row-list { border-color: rgba(255, 255, 255, .22) !important; }
.band--pink .btn--secondary { background: transparent; border-color: #fff; color: #fff; }
.band--pink .btn--secondary:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.band--pink .link-arrow { color: #fff; border-color: rgba(255, 255, 255, .4); }
.band--pink .ico { color: #fff; }


/* --------------------------------------------------------------------------
   15 · ACCOUNT PORTRAIT (2026-09-10) — the real investor photo replaces the
   placeholder everywhere. The violet material stays as the surrounding
   material (halo, ring, shadow) rather than as the fill behind a silhouette.
   -------------------------------------------------------------------------- */
.avatar { background: var(--c-bg-sunken); }
.avatar::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(168deg, rgba(168,166,250,.20) 0%, rgba(87,84,212,0) 46%, rgba(87,84,212,.26) 100%);
}
.avatar__ring { border-color: rgba(255,255,255,.42); box-shadow: inset 0 0 0 1px rgba(87,84,212,.28); }
/* the profile hero portrait sits inside its own violet atmosphere */
.avatar--hero { isolation: isolate; }
.avatar--hero::before {
  content: ""; position: absolute; z-index: -1; inset: -26%;
  border-radius: 50%; filter: blur(18px);
  background: radial-gradient(closest-side, rgba(118,99,242,.55) 0%, rgba(118,99,242,.18) 55%, rgba(118,99,242,0) 78%);
}
.avatar--hero { box-shadow: var(--dim-material), 0 30px 52px -18px rgba(87,84,212,.62); }
:root[data-theme="dark"] .avatar { background: var(--c-surface); }
:root[data-theme="dark"] .avatar__ring { border-color: rgba(255,255,255,.24); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .avatar { background: var(--c-surface); }
  :root:not([data-theme="light"]) .avatar__ring { border-color: rgba(255,255,255,.24); }
}
.cabinet__avatar { overflow: hidden; padding: 0; }
.cabinet__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; border-radius: inherit; display: block; }

/* --------------------------------------------------------------------------
   16 · DARK-MODE CORRECTIONS (2026-09-10) — dark only; light is untouched.
   Three defects found by inspecting the rendered dark routes.
   -------------------------------------------------------------------------- */

/* (a) The pink editorial slab was running at full brightness on a near-black
       page, blowing out the palette on Notifications and Documents. Deepen the
       material so it keeps its pink identity but sits inside the dark system. */
:root[data-theme="dark"] .band--pink .band__in {
  background: linear-gradient(155deg, #9a4877 12.376%, #7a3159 53.762%, #4e2440 87.624%);
  box-shadow: inset 0 -5px 12px 0 rgba(10, 6, 16, .34),
              inset 0 1px 0 0 rgba(255, 255, 255, .18),
              inset 0 0 0 1px rgba(255, 255, 255, .10),
              0 30px 54px -22px rgba(0, 0, 0, .7);
}
:root[data-theme="dark"] .band--violet .band__in {
  box-shadow: inset 0 -5px 12px 0 rgba(10, 12, 30, .34),
              inset 0 1px 0 0 rgba(255, 255, 255, .22),
              inset 0 0 0 1px rgba(255, 255, 255, .10),
              0 30px 54px -22px rgba(0, 0, 0, .7);
}

/* (b) The band motif is a background echo, not a foreground graphic. At 30%
       its strokes were cutting through the Network/Token/Fee list on Wallet
       and through the pink slabs' right-hand content. */
:root[data-theme="dark"] .band__motif { opacity: .12; }
:root[data-theme="dark"] .band--pink .band__motif { opacity: .16; }

/* (c) The support attachment field fell back to the raw OS control — a light
       grey button on a dark field. Give it the same treatment as every other
       control in the cabinet. */
:root[data-theme="dark"] .inp[type="file"] { color: var(--c-text-muted); }
:root[data-theme="dark"] .inp[type="file"]::file-selector-button {
  margin-right: var(--s-4); padding: 6px 14px;
  border: 1px solid var(--c-control-border); border-radius: var(--r-sm);
  background: var(--c-control-bg); color: var(--c-text);
  font: inherit; font-size: var(--app-t-meta); font-weight: var(--fw-semibold);
  cursor: pointer; transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
:root[data-theme="dark"] .inp[type="file"]::file-selector-button:hover {
  background: var(--c-control-bg-hover); border-color: var(--c-border-strong);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band--pink .band__in {
    background: linear-gradient(155deg, #9a4877 12.376%, #7a3159 53.762%, #4e2440 87.624%);
    box-shadow: inset 0 -5px 12px 0 rgba(10, 6, 16, .34), inset 0 1px 0 0 rgba(255, 255, 255, .18),
                inset 0 0 0 1px rgba(255, 255, 255, .10), 0 30px 54px -22px rgba(0, 0, 0, .7);
  }
  :root:not([data-theme="light"]) .band__motif { opacity: .12; }
  :root:not([data-theme="light"]) .band--pink .band__motif { opacity: .16; }
  :root:not([data-theme="light"]) .inp[type="file"]::file-selector-button {
    margin-right: var(--s-4); padding: 6px 14px; border: 1px solid var(--c-control-border);
    border-radius: var(--r-sm); background: var(--c-control-bg); color: var(--c-text);
    font: inherit; font-size: var(--app-t-meta); font-weight: var(--fw-semibold); cursor: pointer;
  }
}

/* --------------------------------------------------------------------------
   17 · DARK — DECORATIVE SYSTEM CORRECTION (Dark Mode Visual QA, 2026-09-10)
   One shared defect produced every issue in the QA document: the dimensional
   "polish" highlight is a neutral-white radial positioned OUTSIDE its object
   (top:-34%; right:-14%). Invisible on a light page; on a dark ground it reads
   as a light bulb above every icon tile and as an oversized grey blob beside
   every card. Fixed at the source so it propagates to every dark route.
   Light mode is deliberately untouched.
   -------------------------------------------------------------------------- */

/* (1) Bring the object highlight INSIDE the object, shrink it, soften it.
       Kills the white flare above icon tiles and dimensional objects. */
:root[data-theme="dark"] .dim::after,
:root[data-theme="dark"] .obj::after {
  top: 5%; right: 5%; width: 42%;
  background: radial-gradient(circle, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 72%);
}
:root[data-theme="dark"] .notecard::after {
  top: 6%; right: 6%; width: 44%; height: auto; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 72%);
}
:root[data-theme="dark"] .notecard { overflow: hidden; }

/* (2) Replace the oversized neutral-white card field with a small,
       GATE-tinted, low-opacity depth cue. */
:root[data-theme="dark"] .slab__in::before,
:root[data-theme="dark"] .band--violet .band__in::before,
:root[data-theme="dark"] .mod--dark::before {
  top: -12%; right: -5%; width: 38%;
  background: radial-gradient(circle, rgba(143, 125, 251, .16) 0%, rgba(143, 125, 251, 0) 72%);
}
:root[data-theme="dark"] .band--pink .band__in::before {
  top: -12%; right: -5%; width: 38%;
  background: radial-gradient(circle, rgba(248, 113, 179, .14) 0%, rgba(248, 113, 179, 0) 72%);
}

/* (3) Decorative geometry stays clipped inside its card and behind copy. */
:root[data-theme="dark"] .slab__in,
:root[data-theme="dark"] .band--violet .band__in,
:root[data-theme="dark"] .band--pink .band__in,
:root[data-theme="dark"] .mod--dark,
:root[data-theme="dark"] .obj,
:root[data-theme="dark"] .dim { overflow: hidden; }
:root[data-theme="dark"] .band__motif { opacity: .035; }
:root[data-theme="dark"] .band--pink .band__motif { opacity: .06; }
:root[data-theme="dark"] .band--violet .band__motif { opacity: .07; }

/* (4) No pasted-on pure-black rectangle inside a navy card: the metric group
       inherits the card's material instead of repainting the page colour. */
:root[data-theme="dark"] .slab .metric,
:root[data-theme="dark"] .mod--dark .metric,
:root[data-theme="dark"] .band--violet .metric,
:root[data-theme="dark"] .band--pink .metric { background: transparent; }
/* The metric group uses a 1px gap over a coloured parent to draw its dividers.
   With transparent cells that parent colour fills the whole block and reads as a
   pasted-on slab. Draw the dividers as hairlines on the cells instead, so the
   card material shows through and nothing sits on top of it. */
:root[data-theme="dark"] .slab .metrics,
:root[data-theme="dark"] .mod--dark .metrics,
:root[data-theme="dark"] .band--violet .metrics,
:root[data-theme="dark"] .band--pink .metrics {
  background: transparent; gap: 0;
  border-block-color: rgba(255, 255, 255, .14);
}
:root[data-theme="dark"] .slab .metric + .metric,
:root[data-theme="dark"] .mod--dark .metric + .metric,
:root[data-theme="dark"] .band--violet .metric + .metric,
:root[data-theme="dark"] .band--pink .metric + .metric {
  border-left: 1px solid rgba(255, 255, 255, .14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dim::after,
  :root:not([data-theme="light"]) .obj::after {
    top: 5%; right: 5%; width: 42%;
    background: radial-gradient(circle, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 72%);
  }
  :root:not([data-theme="light"]) .slab__in::before,
  :root:not([data-theme="light"]) .band--violet .band__in::before,
  :root:not([data-theme="light"]) .mod--dark::before {
    top: -12%; right: -5%; width: 38%;
    background: radial-gradient(circle, rgba(143, 125, 251, .16) 0%, rgba(143, 125, 251, 0) 72%);
  }
  :root:not([data-theme="light"]) .band__motif { opacity: .035; }
  :root:not([data-theme="light"]) .slab .metric,
  :root:not([data-theme="light"]) .mod--dark .metric { background: transparent; }
  :root:not([data-theme="light"]) .slab .metrics,
  :root:not([data-theme="light"]) .mod--dark .metrics { background: transparent; gap: 0; border-block-color: rgba(255,255,255,.14); }
  :root:not([data-theme="light"]) .slab .metric + .metric,
  :root:not([data-theme="light"]) .mod--dark .metric + .metric { border-left: 1px solid rgba(255,255,255,.14); }
  :root:not([data-theme="light"]) .notecard::after {
    top: 6%; right: 6%; width: 44%; height: auto; aspect-ratio: 1;
    background: radial-gradient(circle, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 72%);
  }
  :root:not([data-theme="light"]) .slab__in,
  :root:not([data-theme="light"]) .mod--dark,
  :root:not([data-theme="light"]) .obj,
  :root:not([data-theme="light"]) .notecard,
  :root:not([data-theme="light"]) .dim { overflow: hidden; }
}

/* Demo credential field: renders as dots but is not a real password input.
   Nothing on these screens is submitted or stored. */
.inp--masked { -webkit-text-security: disc; text-security: disc; }
.inp--masked:placeholder-shown { -webkit-text-security: none; text-security: none; }

/* --------------------------------------------------------------------------
   18 · CLIENT FEEDBACK PASS — certificate, wallet architecture, Web3 states,
        verification, tooltips.

   Everything here is token-driven so light and dark are one system, and every
   decorative field stays quieter than the information it sits behind.
   -------------------------------------------------------------------------- */

/* ── 18.1 identity: a Web3 investor has an address, not a face ─────────── */
.avatar--wallet {
  display: grid; place-items: center;
  background: linear-gradient(155deg, var(--g-violet-400) 0%, var(--g-violet-600) 100%);
  color: #fff;
}
.avatar--wallet .ico { width: 54%; height: 54%; }
.avatar--wallet.avatar--sm .ico { width: 58%; height: 58%; }
.app__user-name--mono { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: 0; }

/* ── 18.2 prototype control — deliberately reads as scaffolding ────────── */
.protoswitch { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.protoswitch__k {
  font-size: var(--t-3xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .09em; color: var(--c-text-faint);
}
.protoswitch__seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px;
  border: 1px dashed var(--c-border-strong); border-radius: var(--r-sm);
}
.protoswitch__seg button {
  height: 26px; border-radius: 6px; border: 0; background: transparent;
  font-family: var(--font-body); font-size: var(--t-3xs); font-weight: var(--fw-semibold);
  color: var(--c-text-muted); cursor: pointer;
}
.protoswitch__seg button:hover { color: var(--c-text); background: var(--c-control-bg); }
.protoswitch__seg button[aria-pressed="true"] { background: var(--c-text); color: var(--c-bg); }
.protoswitch__seg button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }

/* ── 18.3 tooltips — one sentence, on demand, never a popover essay ────── */
.tip {
  display: inline-grid; place-items: center; vertical-align: 1px;
  width: 16px; height: 16px; margin-left: 6px; padding: 0; flex: none;
  border-radius: 50%; border: 1px solid var(--c-border-strong);
  background: var(--c-control-bg); color: var(--c-text-muted);
  font-family: var(--font-body); font-size: 10px; font-weight: var(--fw-bold);
  line-height: 1; cursor: help;
  transition: color .15s, border-color .15s, background .15s;
}
.tip:hover, .tip[aria-expanded="true"] {
  color: var(--c-accent-text); border-color: var(--c-accent-border); background: var(--c-accent-soft);
}
.tip:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.slab .tip, .mod--dark .tip, .band--violet .tip {
  border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: #fff;
}
.slab .tip:hover, .mod--dark .tip:hover, .band--violet .tip:hover,
.slab .tip[aria-expanded="true"], .mod--dark .tip[aria-expanded="true"] {
  background: rgba(255,255,255,.22); color: #fff;
}
.tipbubble {
  position: fixed; z-index: 90; max-width: 268px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--c-surface-inverse); color: var(--g-white);
  font-size: var(--t-2xs); line-height: 1.45;
  box-shadow: var(--e-3, 0 10px 30px rgba(0,0,0,.24));
  pointer-events: none;
}
:root[data-theme="dark"] .tipbubble {
  background: #22263f; color: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.10);
}

/* ── 18.4 dialog — the Web3 transaction states ─────────────────────────── */
:root.is-dlg { overflow: hidden; }
.dlg { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--s-5); }
.dlg__scrim { position: absolute; inset: 0; background: var(--c-scrim); backdrop-filter: blur(2px); }
.dlg__panel {
  position: relative; width: min(520px, 100%);
  max-height: calc(100dvh - var(--s-8)); overflow-y: auto;
  padding: var(--s-8) var(--s-6) var(--s-6);
  border: 1px solid var(--c-border); border-radius: var(--r-xl);
  background: var(--c-surface); box-shadow: var(--e-4, 0 24px 64px rgba(0,0,0,.28));
}
.dlg__x {
  position: absolute; top: var(--s-4); right: var(--s-4);
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--c-text-muted); cursor: pointer;
}
.dlg__x:hover { color: var(--c-text); background: var(--c-control-bg); }
.dlg__x:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.dlg__state { display: grid; justify-items: start; gap: var(--s-2); }
.dlg__mark {
  width: 46px; height: 46px; margin-bottom: var(--s-3);
  display: grid; place-items: center; border-radius: var(--r-md);
  border: 1px solid var(--c-border); background: var(--c-control-bg); color: var(--c-text-secondary);
}
.dlg__mark--wait { border-color: var(--c-accent-border); background: var(--c-accent-soft); color: var(--c-accent-text); }
.dlg__mark--ok   { border-color: var(--c-verify-border); background: var(--c-verify-bg);  color: var(--c-verify); }
.dlg__mark--calm { border-color: var(--c-border-strong); background: var(--c-control-bg); color: var(--c-text-muted); }
.dlg__title { font-family: var(--font-display); font-size: var(--t-h2); font-weight: var(--fw-semibold); letter-spacing: var(--tr-tight); }
.dlg__body  { font-size: var(--app-t-body); color: var(--c-text-secondary); line-height: 1.55; margin-top: var(--s-1); }
.dlg__note  { margin-top: var(--s-3); }
/* a live step is *stated*, never an unexplained spinner */
.dlg__note--live { display: flex; align-items: center; gap: 8px; color: var(--c-accent-text); }
.dlg__note--live::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--c-accent); animation: dlgpulse 1.5s ease-in-out infinite;
}
@keyframes dlgpulse { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .dlg__note--live::before { animation: none; opacity: 1; } }
.dlg__kv { margin-top: var(--s-6); }
.dlg__acts { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: flex-end; margin-top: var(--s-6); }
.dlg__acts .btn { flex: 1 1 auto; justify-content: center; }
@media (max-width: 520px) { .dlg__panel { padding: var(--s-6) var(--s-5) var(--s-5); } .dlg__acts .btn { flex: 1 1 100%; } }
:root[data-theme="dark"] .dlg__panel { background: var(--c-surface); border-color: var(--c-border); }

/* ── 18.5 state gallery switcher ───────────────────────────────────────── */
.statebar {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
  padding: var(--s-2); margin-bottom: var(--s-5);
  border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg-alt);
}
.statebar button {
  height: 32px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: var(--t-2xs); font-weight: var(--fw-semibold);
  color: var(--c-text-muted); white-space: nowrap;
}
.statebar button:hover { color: var(--c-text); background: var(--c-surface); }
.statebar button[aria-pressed="true"] { background: var(--c-text); color: var(--c-bg); }
.statebar button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
.statebar__n { font-family: var(--font-mono); opacity: .62; margin-right: 6px; }
@media (max-width: 640px) { .statebar { overflow-x: auto; flex-wrap: nowrap; } }

/* ── 18.6 status panel used by connection + verification states ────────── */
.stpanel {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-5);
  padding: var(--s-8) var(--s-6);
  border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface);
}
.stpanel__mark {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--r-md);
  border: 1px solid var(--c-border); background: var(--c-control-bg); color: var(--c-text-secondary);
}
.stpanel--wait .stpanel__mark { border-color: var(--c-accent-border); background: var(--c-accent-soft); color: var(--c-accent-text); }
.stpanel--ok   .stpanel__mark { border-color: var(--c-verify-border); background: var(--c-verify-bg);  color: var(--c-verify); }
.stpanel--warn .stpanel__mark { border-color: var(--c-warn-border);   background: var(--c-warn-bg);    color: var(--app-warn-text); }
.stpanel__title { font-family: var(--font-display); font-size: var(--t-h2); font-weight: var(--fw-semibold); letter-spacing: var(--tr-tight); display: block; }
.stpanel__body  { font-size: var(--app-t-body); color: var(--c-text-secondary); line-height: 1.55; max-width: 62ch; margin-top: var(--s-2); }
.stpanel__acts  { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; margin-top: var(--s-5); }
@media (max-width: 560px) { .stpanel { grid-template-columns: 1fr; } }

/* ── 18.7 wallet assets — holdings, and the one route into a note ──────── */
.asset {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center;
  gap: var(--s-4) var(--s-5); padding: var(--s-5) 0;
  border-bottom: 1px solid var(--c-rule);
}
.asset__mark {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-body); font-size: 11px; font-weight: var(--fw-bold); color: #fff;
  letter-spacing: -.02em;
}
.asset__mark--usdt { background: linear-gradient(155deg, #4fc08d 0%, #26a17b 100%); }
.asset__mark--btc  { background: linear-gradient(155deg, #f7b155 0%, #f09112 100%); }
.asset__mark--eth  { background: linear-gradient(155deg, #8e93e8 0%, #5c62c7 100%); }
.asset__mark--usdc { background: linear-gradient(155deg, #5aa2f5 0%, #2775ca 100%); }
.asset__mark--sol  { background: linear-gradient(155deg, #9a6cf2 0%, #14e0b4 100%); }
.asset__mark--bnb  { background: linear-gradient(155deg, #f5d472 0%, #efb90b 100%); }
.asset__name { font-size: var(--app-t-body); font-weight: var(--fw-semibold); color: var(--c-text); display: block; }
.asset__role { font-size: var(--app-t-meta); color: var(--c-text-muted); display: block; }
.asset__bal  { text-align: right; font-variant-numeric: tabular-nums; min-width: 96px; }
.asset__bal b { display: block; font-size: var(--app-t-body); font-weight: var(--fw-semibold); }
.asset__bal span { display: block; font-size: var(--app-t-meta); color: var(--c-text-faint); }
/* fixed action column: each row is its own grid, so an auto column would
   let every row land on a different edge */
.asset__act { justify-self: end; min-width: 158px; display: flex; justify-content: flex-end; }
.asset--settle {
  background: var(--c-accent-soft); box-shadow: inset 3px 0 0 var(--c-accent);
  /* tinted band bleeds past the column edge so the row's own columns stay
     aligned with every other asset row */
  padding-inline: var(--s-4); margin-inline: calc(var(--s-4) * -1);
  border-radius: var(--r-sm);
}
:root[data-theme="dark"] .asset--settle { background: rgba(143, 125, 251, .10); }
@media (max-width: 700px) {
  .asset { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .asset__bal { min-width: 0; }
  .asset__act { grid-column: 2 / -1; justify-self: start; min-width: 0; justify-content: flex-start; }
}

/* the route: any asset → USDT → note. Shown once, not repeated per row. */
.route {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-5); border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-bg-alt);
}
.route__step {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  border: 1px solid var(--c-border-strong); background: var(--c-surface);
  font-size: var(--t-2xs); font-weight: var(--fw-semibold); color: var(--c-text);
}
.route__step--on { border-color: var(--c-accent-border); background: var(--c-accent-soft); color: var(--c-accent-text); }
.route__arrow { color: var(--c-text-faint); display: inline-flex; }
.route__arrow .ico { width: 18px; height: 18px; }

/* ── 18.8 THE CERTIFICATE ──────────────────────────────────────────────── */
.cert {
  position: relative; overflow: hidden;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--e-2);
}
/* the engraved ground: GATE's own concentric geometry, kept far below text */
.cert::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 78% 30%, rgba(118, 99, 242, .07) 0%, rgba(118, 99, 242, 0) 58%),
    repeating-linear-gradient(115deg, rgba(16, 18, 34, .028) 0 1px, transparent 1px 9px);
}
:root[data-theme="dark"] .cert::before {
  background:
    radial-gradient(circle at 78% 30%, rgba(143, 125, 251, .10) 0%, rgba(143, 125, 251, 0) 58%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .030) 0 1px, transparent 1px 9px);
}
.cert__rings { position: absolute; right: -6%; top: 4%; width: 46%; max-width: 420px; color: var(--c-accent); opacity: .10; pointer-events: none; }
:root[data-theme="dark"] .cert__rings { opacity: .13; }
.cert__in { position: relative; padding: var(--s-10) var(--s-8); display: grid; gap: var(--s-8); }
@media (max-width: 700px) { .cert__in { padding: var(--s-6) var(--s-5); gap: var(--s-6); } }

.cert__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.cert__brand { display: grid; gap: var(--s-1); }
.cert__mark { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: var(--t-h3); font-weight: var(--fw-bold); letter-spacing: var(--tr-display); color: var(--c-text); }
.cert__mark .wordmark__mark { width: 30px; height: 19px; }
.cert__org { font-size: var(--t-3xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .16em; color: var(--c-text-muted); }
.cert__serieskey { font-size: var(--t-3xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .12em; color: var(--c-text-faint); display: block; }
.cert__series { font-family: var(--font-mono); font-size: var(--app-t-body); font-weight: var(--fw-bold); color: var(--c-accent-text); display: block; margin-top: 2px; }

.cert__lede { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-6); align-items: end; }
@media (max-width: 760px) { .cert__lede { grid-template-columns: 1fr; align-items: start; } }
.cert__kind { font-size: var(--t-3xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .14em; color: var(--c-accent-text); display: block; }
.cert__title { font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); font-weight: var(--fw-semibold); letter-spacing: -.03em; line-height: 1.04; margin-top: var(--s-2); }
.cert__sub { font-size: var(--app-t-meta); color: var(--c-text-muted); margin-top: var(--s-3); max-width: 46ch; }
.cert__amt { text-align: right; }
@media (max-width: 760px) { .cert__amt { text-align: left; } }
.cert__amtk { font-size: var(--t-3xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .12em; color: var(--c-text-faint); display: block; }
.cert__amtv { font-family: var(--font-display); font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); font-weight: var(--fw-semibold); letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; display: block; margin-top: var(--s-2); }
.cert__amtf { font-size: var(--app-t-meta); color: var(--c-text-muted); display: block; margin-top: var(--s-2); }

/* the arithmetic, stated as arithmetic */
.cert__sum {
  display: grid; grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr);
  align-items: center; gap: var(--s-4);
  padding: var(--s-6); border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-bg-alt);
}
.cert__op { display: grid; place-items: center; font-family: var(--font-display); font-size: var(--t-h3); color: var(--c-text-faint); }
.cert__cell { text-align: center; min-width: 0; }
.cert__cellk { font-size: var(--t-3xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .12em; color: var(--c-text-muted); display: block; }
.cert__cellv { font-family: var(--font-display); font-size: var(--t-fig-md); font-weight: var(--fw-semibold); letter-spacing: -.03em; font-variant-numeric: tabular-nums; display: block; margin-top: var(--s-2); }
.cert__cellv--prem { color: var(--c-accent-text); }
.cert__cellf { font-size: var(--app-t-meta); color: var(--c-text-muted); display: block; margin-top: 2px; }
@media (max-width: 700px) {
  .cert__sum { grid-template-columns: 1fr; gap: var(--s-4); }
  .cert__op { display: none; }
  .cert__cell { text-align: left; padding-bottom: var(--s-4); border-bottom: 1px solid var(--c-border); }
  .cert__cell:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* three columns, so a six-fact block reads as two even rows instead of
   orphaning one fact on a line of its own */
.cert__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
@media (max-width: 620px) { .cert__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }
.cert__facts > div { min-width: 0; }
.cert__facts dt { font-size: var(--t-3xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .12em; color: var(--c-text-faint); }
.cert__facts dd { font-size: var(--app-t-body); font-weight: var(--fw-semibold); color: var(--c-text); margin-top: 4px; overflow-wrap: anywhere; }
.cert__facts dd small { display: block; font-size: var(--app-t-meta); font-weight: var(--fw-regular); color: var(--c-text-muted); margin-top: 2px; }

/* verification block: QR + hash. The QR verifies, it never transacts. */
.cert__verify {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-6); align-items: center;
  padding: var(--s-6); border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface);
}
@media (max-width: 620px) { .cert__verify { grid-template-columns: 1fr; } }
.qr {
  width: 124px; height: 124px; flex: none; padding: 9px;
  border-radius: var(--r-sm);
  /* always dark-on-white: a QR inverted for a dark theme does not scan */
  background: #fff; box-shadow: 0 0 0 1px var(--c-border);
}
:root[data-theme="dark"] .qr { box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.qr img, .qr svg { display: block; width: 100%; height: 100%; }
.qr--lg { width: 150px; height: 150px; }
.cert__vk { font-size: var(--t-3xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .12em; color: var(--c-text-faint); display: block; }
.cert__vt { font-size: var(--app-t-body); font-weight: var(--fw-semibold); display: block; margin-top: var(--s-2); }
.cert__vb { font-size: var(--app-t-meta); color: var(--c-text-muted); margin-top: var(--s-2); max-width: 52ch; }
.hashrow { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); }
.hash {
  font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--c-text-secondary);
  padding: 6px var(--s-3); border-radius: var(--r-xs);
  border: 1px solid var(--c-border); background: var(--c-bg-alt);
  overflow-wrap: anywhere; word-break: break-all; min-width: 0; max-width: 100%;
}

.cert__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
  padding-top: var(--s-6); border-top: 1px solid var(--c-border);
  font-size: var(--app-t-meta); color: var(--c-text-muted);
}
.cert__seal { display: inline-flex; align-items: center; gap: var(--s-3); }
.cert__sealmark {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid var(--c-accent-border); color: var(--c-accent-text);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-2xs);
}
.cert__no { font-family: var(--font-mono); font-size: var(--app-t-body); font-weight: var(--fw-bold); color: var(--c-text); }

/* status ribbon */
.cert__status { display: inline-flex; align-items: center; gap: 7px; }

/* ── 18.9 certificate actions — a hierarchy, not a wall of buttons ─────── */
.certacts { display: grid; gap: var(--s-4); }
.certacts__primary { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.certacts__primary .btn { flex: 1 1 190px; justify-content: center; }
.certacts__links { display: flex; gap: var(--s-5) var(--s-6); flex-wrap: wrap; padding-top: var(--s-4); border-top: 1px solid var(--c-border); }

/* the share-safe preview, sized like the thing it becomes */
.sharepane { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
@media (max-width: 860px) { .sharepane { grid-template-columns: 1fr; } }
.shareframe {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-bg-alt);
}
.shareframe img { display: block; width: 100%; height: 100%; object-fit: contain; }
.shareframe__tag {
  position: absolute; left: var(--s-3); bottom: var(--s-3);
  padding: 4px var(--s-3); border-radius: var(--r-xs);
  background: var(--c-surface-inverse); color: #fff;
  font-family: var(--font-mono); font-size: var(--t-3xs);
}
.omit { display: grid; gap: var(--s-3); }
.omit__row { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--app-t-meta); color: var(--c-text-secondary); }
.omit__mark { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-top: 1px; }
.omit__mark--keep { background: var(--c-verify-bg); color: var(--c-verify); border: 1px solid var(--c-verify-border); }
.omit__mark--drop { background: var(--c-control-bg); color: var(--c-text-faint); border: 1px solid var(--c-border-strong); }
.omit__mark .ico { width: 11px; height: 11px; stroke-width: 2.6; }

/* ── 18.10 verification journey ────────────────────────────────────────── */
.journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: var(--s-4); }
.journey__step {
  position: relative; padding: var(--s-5); min-width: 0;
  border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface);
}
.journey__step--done { border-color: var(--c-verify-border); background: var(--c-verify-bg); }
.journey__step--now  { border-color: var(--c-accent-border); background: var(--c-accent-soft); }
.journey__step--ext  { border-style: dashed; }
.journey__n { font-family: var(--font-mono); font-size: var(--t-3xs); color: var(--c-text-faint); display: block; }
.journey__t { font-size: var(--app-t-body); font-weight: var(--fw-semibold); display: block; margin-top: var(--s-2); }
.journey__d { font-size: var(--app-t-meta); color: var(--c-text-muted); display: block; margin-top: var(--s-2); line-height: 1.45; }
.journey__step--done .journey__d, .journey__step--now .journey__d { color: var(--c-text-secondary); }

/* ── 18.11 attention list — only things that need the investor ─────────── */
.todo { display: grid; gap: var(--s-3); }
.todo__row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface);
}
.todo__row--ok { border-color: var(--c-verify-border); background: var(--c-verify-bg); }
.todo__mark { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; border: 1px solid var(--c-border); background: var(--c-control-bg); color: var(--c-text-secondary); }
.todo__row--ok .todo__mark { border-color: var(--c-verify-border); background: var(--c-surface); color: var(--c-verify); }
.todo__row--do .todo__mark { border-color: var(--c-accent-border); background: var(--c-accent-soft); color: var(--c-accent-text); }
.todo__t { font-size: var(--app-t-body); font-weight: var(--fw-semibold); display: block; }
.todo__d { font-size: var(--app-t-meta); color: var(--c-text-muted); display: block; margin-top: 2px; }
@media (max-width: 620px) {
  .todo__row { grid-template-columns: 34px minmax(0, 1fr); }
  .todo__row > :last-child { grid-column: 2 / -1; justify-self: start; }
}

/* ── 18.12 print: the certificate, and only the certificate ───────────── */
@media print {
  .app__side, .app__bar, .app__scrim, .tipbubble, .dlg, .no-print { display: none !important; }
  .app, .app__main, .app__body { display: block !important; margin: 0 !important; padding: 0 !important; }
  body { background: #fff !important; }
  .print-only { display: block !important; }
  .cert { border-color: #d5d7e0 !important; box-shadow: none !important; break-inside: avoid; }
  .cert::before { display: none !important; }
  @page { margin: 14mm; }
}
.print-only { display: none; }

/* the Web3 identity line must stay on one line inside a 232px sidebar */
.app__user-name--mono,
.app__user-name--mono + .app__user-id { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__user-name--mono + .app__user-id { font-family: var(--font-body); font-size: var(--t-3xs); }

/* --------------------------------------------------------------------------
   19 · THE HERO NOTE OBJECT
   On Overview the note is not an illustration beside the copy — it IS the
   screen's subject. It spans the full sheet and scales with it, so a wide
   display shows a bigger note rather than the same small card in an empty band.

   Sizing is in container units, so the card answers to its own width rather
   than to the viewport (the sidebar makes those two very different numbers).
   -------------------------------------------------------------------------- */
.notecard-wrap { container-type: inline-size; }
.notecard-wrap--full { display: block; width: 100%; margin-top: var(--s-10); }

.notehero__cap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4) var(--s-6); flex-wrap: wrap;
  margin-top: var(--s-8);
}

/* the third figure and the term bar exist only on the full-width hero: at
   this size a two-figure card leaves a hole in the middle */
.notecard__sub { display: block; font-size: 13px; opacity: .82; margin-top: 6px; }
.notecard__mid--3 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end; gap: var(--s-6);
}
.notecard__mid--3 > div:nth-child(2) { justify-self: center; text-align: center; }
.notecard__term { margin-top: -6px; }
.notecard__termbar {
  display: block; height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .24); overflow: hidden;
}
.notecard__termbar > span { display: block; height: 100%; border-radius: 999px; background: rgba(255, 255, 255, .9); }
.notecard__foot--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
.notecard__foot--3 > :nth-child(2) { justify-self: center; text-align: center; }
.notecard__foot--3 > :last-child { justify-self: end; text-align: right; }

@media (min-width: 700px) {
  .notecard--hero {
    padding: clamp(28px, 3.2cqw, 52px);
    gap: clamp(22px, 2.6cqw, 40px);
    border-radius: clamp(24px, 2cqw, 32px);
    box-shadow: 0 76px 120px -42px rgba(87, 84, 212, .55),
                inset 0 -6px 14px 0 rgba(10, 12, 30, .26),
                inset 0 1px 0 0 rgba(255, 255, 255, .55);
  }
  .notecard--hero .notecard__brand  { font-size: clamp(20px, 1.9cqw, 30px); line-height: 1.2; letter-spacing: -0.03em; }
  .notecard--hero .notecard__ref    { font-size: clamp(13px, 1.15cqw, 18px); }
  .notecard--hero .notecard__k      { font-size: clamp(13px, 1.15cqw, 18px); margin-bottom: 6px; }
  .notecard--hero .notecard__sub    { font-size: clamp(12px, 1.05cqw, 16px); }
  .notecard--hero .notecard__nominal{ font-size: clamp(46px, 6cqw, 96px); line-height: .94; letter-spacing: -0.045em; }
  .notecard--hero .notecard__redeem { font-size: clamp(26px, 3.2cqw, 48px); line-height: .98; letter-spacing: -0.035em; }
  /* the outcome outranks the premium that produced it */
  .notecard--hero .notecard__redeem--total { font-size: clamp(30px, 4.3cqw, 66px); letter-spacing: -0.04em; }
  .notecard--hero .notecard__foot   { font-size: clamp(13px, 1.1cqw, 17px); padding-top: clamp(16px, 1.8cqw, 28px); }
  /* the polish grows with the material, or it reads as a smudge on a big card */
  .notecard--hero::after {
    width: clamp(300px, 34cqw, 560px); height: clamp(300px, 34cqw, 560px);
    top: clamp(-150px, -11cqw, -80px); right: clamp(-180px, -13cqw, -88px);
  }
  .notecard-wrap--full .token-mark { right: -26px; bottom: -26px; width: 64px; height: 64px; font-size: 12px; }
}

/* below the breakpoint the three figures stack rather than crush */
@media (max-width: 699px) {
  .notecard__mid--3 { grid-template-columns: 1fr; align-items: start; gap: var(--s-5); }
  .notecard__mid--3 > div:nth-child(2),
  .notecard__mid--3 > div:nth-child(3) { justify-self: start; text-align: left !important; }
  .notecard__foot--3 { grid-template-columns: 1fr; gap: 6px; }
  .notecard__foot--3 > :nth-child(2),
  .notecard__foot--3 > :last-child { justify-self: start; text-align: left; }
  .notecard-wrap--full { margin-top: var(--s-8); }
}

/* the hero note is the link to itself, so it has to behave like one */
a.notecard-wrap--full { cursor: pointer; }
a.notecard-wrap--full .notecard {
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
a.notecard-wrap--full:hover .notecard {
  transform: translateY(-2px);
  box-shadow: 0 88px 130px -40px rgba(87, 84, 212, .62),
              inset 0 -6px 14px 0 rgba(10, 12, 30, .26),
              inset 0 1px 0 0 rgba(255, 255, 255, .62);
}
a.notecard-wrap--full:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 6px; border-radius: 28px; }
@media (prefers-reduced-motion: reduce) { a.notecard-wrap--full:hover .notecard { transform: none; } }

/* --------------------------------------------------------------------------
   20 · MODAL BODIES — purchase review, purchase success, wallet creation,
        receive, send. One shell (§18.4), several documented bodies.
   -------------------------------------------------------------------------- */
.dlg__panel--wide { width: min(620px, 100%); }
.dlg__head { display: grid; justify-items: start; gap: var(--s-2); margin-bottom: var(--s-6); }
.dlg__head .eyebrow { margin: 0; }
.dlg__lede { font-size: var(--app-t-body); color: var(--c-text-secondary); line-height: 1.55; max-width: 56ch; }

/* the review table: label left, value right, one hairline per row */
.mrows { display: grid; }
.mrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--c-rule);
  font-size: var(--app-t-body);
}
.mrow:last-child { border-bottom: 0; }
.mrow__k { color: var(--c-text-muted); }
.mrow__v { font-weight: var(--fw-semibold); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mrow__v small { display: block; font-weight: var(--fw-regular); font-size: var(--app-t-meta); color: var(--c-text-muted); }
/* limits after the purchase are a different kind of fact — tint the group */
.mrows--limits { background: var(--c-accent-soft); border-radius: var(--r-sm); padding: var(--s-2) var(--s-4); margin-top: var(--s-4); }
:root[data-theme="dark"] .mrows--limits { background: rgba(143, 125, 251, .10); }
.mrows--limits .mrow { border-color: var(--c-accent-border); }
:root[data-theme="dark"] .mrows--limits .mrow { border-color: rgba(173, 160, 255, .18); }
.mrows--limits .mrow__v { color: var(--c-accent-text); }

/* consent is a decision, so it is given room and a target */
.consent {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3);
  align-items: start; margin-top: var(--s-6);
  padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-sm);
  background: var(--c-bg-alt);
  font-size: var(--app-t-meta); color: var(--c-text-secondary); line-height: 1.5;
}
.consent input { width: 20px; height: 20px; margin: 0; accent-color: var(--c-accent); cursor: pointer; }
.consent label { cursor: pointer; }
.dlg__foot { margin-top: var(--s-4); font-size: var(--app-t-meta); color: var(--c-text-muted); line-height: 1.5; }

/* fields inside a modal */
.mfield { display: grid; gap: 6px; margin-top: var(--s-5); }
.mfield > label { font-size: var(--app-t-meta); font-weight: var(--fw-semibold); color: var(--c-text-secondary); }
.mfield .inp { font-family: var(--font-mono); font-size: var(--t-2xs); }
.mfield .inp[type="number"] { font-family: var(--font-body); font-size: var(--app-t-body); }
.merr { font-size: var(--app-t-meta); color: var(--c-danger); }
.inp[aria-invalid="true"] { border-color: var(--c-danger); }

/* receive: the QR is the subject */
.mqr { display: grid; justify-items: center; gap: var(--s-4); padding: var(--s-5) 0; }
.mqr .hash { text-align: center; }

/* --------------------------------------------------------------------------
   21 · GATE-WIDE LIQUIDITY — platform context, deliberately distinct from the
        investor's own position (which lives on the dark slab above it).
   -------------------------------------------------------------------------- */
.liq { display: grid; gap: var(--s-6); }
.liq__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 860px) { .liq__grid { grid-template-columns: 1fr; } }
.liq__cell {
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface);
}
.liq__n { font-family: var(--font-mono); font-size: var(--t-3xs); color: var(--c-text-faint); display: block; }
.liq__k { font-size: var(--t-3xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .12em; color: var(--c-text-muted); display: block; margin-top: var(--s-2); }
.liq__v { font-family: var(--font-display); font-size: var(--t-fig-md); font-weight: var(--fw-semibold); letter-spacing: -.03em; font-variant-numeric: tabular-nums; display: block; margin-top: var(--s-2); }
.liq__v--pos { color: var(--c-verify); }
.liq__f { font-size: var(--app-t-meta); color: var(--c-text-muted); display: block; margin-top: var(--s-2); line-height: 1.45; }

.liq__pools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 700px) { .liq__pools { grid-template-columns: 1fr; } }
.liq__pool { padding: var(--s-5) var(--s-6); border-radius: var(--r-md); border: 1px solid var(--c-accent-border); background: var(--c-accent-soft); }
.liq__pool--muted { border-color: var(--c-border); background: var(--c-bg-alt); }
:root[data-theme="dark"] .liq__pool { background: rgba(143, 125, 251, .10); border-color: rgba(173, 160, 255, .20); }
:root[data-theme="dark"] .liq__pool--muted { background: var(--c-bg-alt); border-color: var(--c-border); }

/* --------------------------------------------------------------------------
   22 · TIMELINE — eligibility history: what happened, in order, with times
   -------------------------------------------------------------------------- */
.tline { display: grid; gap: 0; }
.tline__step {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--s-4); padding-bottom: var(--s-6);
}
.tline__step:last-child { padding-bottom: 0; }
.tline__step::before {
  content: ""; position: absolute; left: 13px; top: 26px; bottom: 0; width: 1px;
  background: var(--c-border-strong);
}
.tline__step:last-child::before { display: none; }
.tline__dot {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; z-index: 1;
  border: 1px solid var(--c-verify-border); background: var(--c-verify-bg); color: var(--c-verify);
}
.tline__dot .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.tline__t { font-size: var(--app-t-body); font-weight: var(--fw-semibold); display: block; }
.tline__d { font-size: var(--app-t-meta); color: var(--c-text-muted); display: block; margin-top: 2px; }
.tline__when { font-family: var(--font-mono); font-size: var(--t-3xs); color: var(--c-text-faint); display: block; margin-top: var(--s-2); }
/* on the dark compliance slab the timeline takes the slab's ink */
.slab .tline__dot { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: #fff; }
.slab .tline__step::before { background: rgba(255,255,255,.20); }
.slab .tline__t { color: #fff; }
.slab .tline__d { color: rgba(255,255,255,.70); }
.slab .tline__when { color: var(--g-violet-300); }
@media (min-width: 900px) { .tline--2col { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: var(--s-10); } }

/* --------------------------------------------------------------------------
   23 · DISABLED CONTROLS
   The Cabinet does not load motion.css, where the site's disabled rule lives,
   so a disabled button rendered at full strength — "Confirm purchase" before
   consent, "Get payment" before the payment date, a denomination beyond the
   limit. State has to be visible, so the rule is restated here.
   -------------------------------------------------------------------------- */
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .42; cursor: not-allowed; box-shadow: none; transform: none;
  pointer-events: none;
}
.btn--primary:disabled {
  /* a disabled primary should read as inert, not as a dimmed invitation */
  background: var(--c-control-bg); color: var(--c-text-faint);
  border-color: var(--c-control-border); opacity: 1;
}
:root[data-theme="dark"] .btn--primary:disabled {
  background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .40);
  border-color: rgba(255, 255, 255, .12);
}
.dlg .btn:disabled { pointer-events: none; }