/*
 * Sealed Energy responsive authority
 * One proportional scale for typography, controls, cards and page frames.
 * This file is deliberately last in the cascade.
 */

:root {
  --content-max: 1480px;
  --viewport-gutter: clamp(20px, 4vw, 72px);
  --se-header-h: 82px;
  --se-radius: clamp(14px, 1.1vw, 20px);
  --hero-pad-top: clamp(104px, 8vw, 132px);
  --hero-pad-bottom: clamp(104px, 9vw, 152px);

  --type-micro: clamp(10px, .66vw, 12px);
  --type-label: clamp(11px, .72vw, 13px);
  --type-small: clamp(12px, .79vw, 14px);
  --type-body: clamp(16px, .98vw, 17px);
  --type-body-large: clamp(18px, 1.2vw, 21px);
  --type-control: clamp(15px, .92vw, 16px);
  --type-subheading: clamp(20px, 1.65vw, 28px);
  --type-heading: clamp(28px, 2.45vw, 42px);
  --type-title: clamp(48px, 5vw, 82px);
  --type-display: clamp(82px, 8.58vw, 142px);

  --space-card: clamp(22px, 2vw, 34px);
  --space-section: clamp(76px, 8vw, 136px);
  --space-page-start: clamp(24px, 2.8vw, 44px);
  --control-h: clamp(48px, 3.5vw, 56px);
}

html {
  font-size: 16px;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  overflow-x: clip;
}

.app-shell {
  width: 100%;
  overflow-x: clip;
}

/* The frame scales as one unit; no narrow 1100px desktop island. */
.landing-wrap,
.workspace,
.exchange-terminal,
.exchange-intro-page,
.verify-screen,
.library-screen,
.account-screen,
.account-profile-screen {
  width: min(var(--content-max), calc(100% - (var(--viewport-gutter) * 2))) !important;
  margin-inline: auto !important;
}

.view-home .landing-hero > .landing-wrap,
.view-exchange .exchange-marketing-hero,
.exchange-terminal > :not(.seal-action-dock),
.workspace > :not(.seal-action-dock) {
  max-width: var(--content-max);
}

/*
 * Home and the public Exchange are sibling editorial experiences.
 * The outer Exchange canvas must never inherit the inner content width.
 */
.view-exchange .exchange-marketing {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.view-home .landing-hero,
.view-exchange .exchange-marketing-hero {
  min-height: 0 !important;
  padding: 0 !important;
}

.view-home .landing-hero > .landing-wrap,
.view-exchange .exchange-marketing-hero {
  width: min(var(--content-max), calc(100% - (var(--viewport-gutter) * 2))) !important;
  max-width: var(--content-max) !important;
  margin-inline: auto !important;
  padding: var(--hero-pad-top) 0 var(--hero-pad-bottom) !important;
}

/*
 * Home and Exchange use the same editorial hero frame.
 * Copy placement is governed by one twelve-column grid.
 */
.view-home .landing-hero > .landing-wrap,
.view-exchange .exchange-marketing-hero {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  column-gap: clamp(18px, 2vw, 32px) !important;
  align-items: start !important;
}

.view-home .landing-kicker,
.view-home .landing-hero h1,
.view-home .product-collage,
.view-exchange .exchange-marketing-copy,
.view-exchange .exchange-marketing-visual {
  grid-column: 1 / -1 !important;
}

.view-exchange .exchange-marketing-copy {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  column-gap: clamp(18px, 2vw, 32px) !important;
  align-items: start !important;
}

.view-exchange .exchange-marketing-copy > .eyebrow,
.view-exchange .exchange-marketing-copy > h1 {
  grid-column: 1 / -1 !important;
}

.view-home .landing-lead {
  grid-column: 6 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(180px, 15vw, 224px) !important;
  gap: clamp(24px, 3vw, 48px) !important;
  align-items: start !important;
}

.view-exchange .exchange-marketing-copy > p {
  grid-column: 6 / 11 !important;
}

.view-exchange .exchange-marketing-actions {
  grid-column: 11 / -1 !important;
  align-self: start !important;
}

.view-home .product-collage,
.view-exchange .exchange-marketing-visual {
  margin-top: clamp(64px, 6vw, 96px) !important;
}

/* Prevent inherited legacy rules from shrinking ordinary interface copy. */
.app-shell :is(p, textarea, input, select, output) {
  font-size: var(--type-body) !important;
}

.app-shell :is(button, .button, .landing-cta, .use-link) {
  min-height: var(--control-h);
  font-size: var(--type-control) !important;
  line-height: 1.15 !important;
}

.app-shell :is(small, code, dd) {
  font-size: var(--type-small) !important;
}

.app-shell :is(.landing-kicker, .eyebrow, label, dt) {
  font-size: var(--type-label) !important;
}

/* Header proportions remain legible and balanced at native 100% zoom. */
.app-header,
.home-header.is-top,
.home-header.is-scrolled {
  box-sizing: border-box !important;
  min-height: var(--se-header-h) !important;
  height: var(--se-header-h) !important;
  grid-template-columns: minmax(236px, 278px) minmax(0, 1fr) minmax(190px, 224px) !important;
  padding-inline: var(--viewport-gutter) !important;
}

.app-header .brand {
  width: auto !important;
  min-width: 0 !important;
}

.app-header .brand-mark {
  width: 44px !important;
  height: 58px !important;
  flex-basis: 44px !important;
}

.app-header .brand-lockup b { font-size: clamp(14px, .96vw, 16px) !important; }
.app-header .brand-lockup small { font-size: clamp(9px, .62vw, 10px) !important; }
.app-header nav > button:not(.seal-menu-trigger) { font-size: var(--type-control) !important; }
.app-header .seal-menu-control { width: clamp(246px, 20vw, 310px) !important; min-width: clamp(246px, 20vw, 310px) !important; }
.app-header .wallet-connect { min-width: clamp(160px, 13vw, 194px) !important; }

/* Hero hierarchy: large, but governed by the same container and scale. */
.view-home .landing-hero h1,
.view-exchange .exchange-marketing-copy h1 {
  width: 100%;
  max-width: none;
  margin: clamp(14px, 1.4vw, 22px) 0 clamp(48px, 4.8vw, 78px) !important;
  font-size: var(--type-display) !important;
  line-height: .87 !important;
  letter-spacing: -.067em !important;
}

.view-home .landing-kicker,
.view-exchange .exchange-marketing-copy > .eyebrow {
  min-height: 16px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.view-home .landing-hero p,
.view-exchange .exchange-marketing-copy p {
  font-size: var(--type-body-large) !important;
  line-height: 1.55 !important;
}

.view-home .landing-lead,
.view-exchange .exchange-marketing-copy > p,
.view-exchange .exchange-marketing-actions {
  width: 100% !important;
  margin-left: 0 !important;
}

.view-home .landing-page :is(.section-intro h2, .integrate-copy h2, .cycle-copy h2, .conversion-copy blockquote),
.view-exchange .exchange-marketing :is(.exchange-story-banner h2, .exchange-access-panel h2) {
  font-size: var(--type-title) !important;
  line-height: .91 !important;
  letter-spacing: -.058em !important;
}

.view-home .landing-page :is(.process-copy h3, .cycle-principles h3, .community-intro h3, .mobile-device h3) {
  font-size: var(--type-heading) !important;
  line-height: 1.02 !important;
  letter-spacing: -.04em !important;
}

/* Seal Exchange benefit experience
   The header remains part of the shared machine frame. Everything below it
   speaks first to the value a person receives, then reveals the mechanism. */
.view-exchange .exchange-marketing-visual.exchange-value-map {
  position: relative;
  min-height: clamp(560px, 43vw, 720px) !important;
  overflow: hidden;
  border-radius: clamp(28px, 3vw, 52px) !important;
  background:
    radial-gradient(circle at 48% 46%, rgba(184,255,36,.13), transparent 17%),
    radial-gradient(circle at 76% 24%, rgba(82,217,232,.21), transparent 22%),
    linear-gradient(145deg, #061110, #0b2724 58%, #07100f) !important;
  box-shadow: 0 60px 150px rgba(7,16,15,.24) !important;
}

.view-exchange .exchange-marketing-visual.exchange-value-map::after {
  display: none !important;
}

.value-map-grid {
  position: absolute;
  inset: -30%;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(620px) rotateX(63deg) rotateZ(-16deg) translateY(24%);
}

.value-map-orbit {
  position: absolute;
  left: 50%;
  top: 48%;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.value-map-orbit.orbit-one { width: min(56vw, 650px); aspect-ratio: 1; }
.value-map-orbit.orbit-two { width: min(34vw, 390px); aspect-ratio: 1; border-color: rgba(184,255,36,.34); }

.value-map-core {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 46%;
  width: clamp(150px, 13vw, 210px);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  color: #f1f5ef;
  border-radius: 50%;
  background: rgba(5,14,13,.88);
  box-shadow: 0 0 0 14px rgba(255,255,255,.045), 0 40px 100px rgba(0,0,0,.42);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(16px);
}

.value-map-core i {
  display: grid;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  margin: 0 auto 13px;
  color: #07100f;
  font-style: normal;
  border-radius: 50%;
  background: #b8ff24;
}

.value-map-core strong,
.value-map-core small { display: block; }
.value-map-core strong { font-size: clamp(22px, 2vw, 32px); letter-spacing: .08em; }
.value-map-core small { margin-top: 7px; color: #8ca19b; font-size: 10px !important; letter-spacing: .16em; }

.value-map-node {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: 38px auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 14px 14px;
  color: #dfe8e3;
  border-radius: 18px;
  background: rgba(238,244,239,.08);
  box-shadow: 0 18px 54px rgba(0,0,0,.2);
  backdrop-filter: blur(15px);
}

.value-map-node small {
  display: grid;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  color: #07100f;
  font-weight: 750;
  border-radius: 50%;
  background: #52d9e8;
}

.value-map-node b { font-size: clamp(13px, .95vw, 16px); }
.origin-node { left: 9%; top: 18%; }
.terms-node { right: 8%; top: 25%; }
.proof-node { left: 15%; bottom: 18%; }
.proof-node small { background: #b8ff24; }

.exchange-value-map .exchange-marketing-ticket {
  right: clamp(18px, 2vw, 30px) !important;
  bottom: clamp(18px, 2vw, 30px) !important;
  left: auto !important;
  width: min(43%, 520px);
  min-height: 0 !important;
  padding: clamp(22px, 2vw, 32px) !important;
  border-radius: 24px !important;
}

.exchange-benefit-ledger {
  width: min(var(--content-max), calc(100% - (var(--viewport-gutter) * 2)));
  margin: 0 auto;
  padding: var(--space-section) 0;
  color: #07100f;
}

.exchange-benefit-ledger > header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 4vw, 70px);
  align-items: end;
  margin-bottom: clamp(54px, 7vw, 100px);
}

.exchange-benefit-ledger > header h2 {
  margin: 0;
  font: 520 var(--type-title)/.9 var(--font-sans, Arial, sans-serif);
  letter-spacing: -.06em;
}

.exchange-benefit-ledger > article {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) minmax(280px, .72fr);
  gap: clamp(24px, 4vw, 70px);
  align-items: center;
  min-height: clamp(380px, 31vw, 520px);
  margin-top: 18px;
  padding: clamp(34px, 4vw, 68px);
  overflow: hidden;
  border-radius: clamp(26px, 3vw, 46px);
  background: #e9e7df;
}

.exchange-benefit-ledger > article:nth-of-type(2) {
  background: #07100f;
  color: #edf3ed;
}

.exchange-benefit-ledger > article:nth-of-type(3) {
  background: #dcece5;
}

.benefit-index {
  align-self: start;
  color: #2451dc;
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 760;
}

.exchange-benefit-ledger article:nth-of-type(2) .benefit-index { color: #b8ff24; }
.exchange-benefit-ledger article > div:nth-child(2) > span {
  display: block;
  max-width: 520px;
  color: #52605e;
  font-size: var(--type-body);
  line-height: 1.45;
}
.exchange-benefit-ledger article:nth-of-type(2) > div:nth-child(2) > span { color: #8d9b96; }

.exchange-benefit-ledger h3 {
  max-width: 690px;
  margin: 18px 0 22px;
  font: 540 clamp(42px, 4vw, 68px)/.92 var(--font-sans, Arial, sans-serif);
  letter-spacing: -.06em;
}

.exchange-benefit-ledger p {
  max-width: 620px;
  margin: 0;
  color: #52605e;
  line-height: 1.6;
}

.exchange-benefit-ledger article:nth-of-type(2) p { color: #9eaaa6; }

.benefit-art {
  position: relative;
  min-height: 270px;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.76) 0 17%, transparent 17.5%),
    repeating-radial-gradient(circle, rgba(3,140,140,.42) 0 2px, transparent 3px 24px);
}

.exchange-benefit-ledger article:nth-of-type(2) .benefit-art {
  background:
    radial-gradient(circle, rgba(184,255,36,.13), transparent 25%),
    repeating-radial-gradient(circle, rgba(82,217,232,.32) 0 1px, transparent 2px 26px);
}

.benefit-art i {
  position: absolute;
  width: 11px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2451dc;
  box-shadow: 0 0 0 8px rgba(36,81,220,.09);
}
.benefit-art i:nth-child(1) { left: 15%; top: 28%; }
.benefit-art i:nth-child(2) { right: 13%; top: 35%; background: #b8ff24; }
.benefit-art i:nth-child(3) { left: 28%; bottom: 12%; background: #038c8c; }
.benefit-art b,
.benefit-art em { position: relative; z-index: 1; display: block; }
.benefit-art b { font-size: clamp(24px, 2vw, 34px); letter-spacing: .08em; }
.benefit-art em { margin-top: 8px; color: #038c8c; font-size: 11px; font-style: normal; letter-spacing: .17em; }
.exchange-benefit-ledger article:nth-of-type(2) .benefit-art em { color: #b8ff24; }

/* Product routes
   The route section owns its typography and layout. Page heading rules cannot
   leak into this component. The grid changes density before content compresses. */
.product-route-grid {
  --route-gap: clamp(18px, 1.6vw, 28px);
  container: product-routes / inline-size;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--route-gap);
  width: 100%;
  margin-top: clamp(42px, 5vw, 78px);
  align-items: stretch;
}

.product-route-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  min-height: clamp(580px, 38vw, 690px);
  padding: 0;
  overflow: hidden;
  color: #07100f;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: clamp(24px, 2vw, 36px);
  box-shadow: none;
  cursor: pointer;
  isolation: isolate;
}

.product-route-media {
  position: relative;
  display: block;
  min-height: clamp(260px, 19vw, 340px);
  overflow: hidden;
  background: #07100f;
}

.product-route-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(4, 12, 13, .76));
  pointer-events: none;
}

.route-art {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  isolation: isolate;
  transition: transform 620ms cubic-bezier(.2, .75, .25, 1);
}

.product-route-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(.92) saturate(.2) brightness(.7) contrast(1.04);
  transition: filter 420ms ease, transform 620ms cubic-bezier(.2, .75, .25, 1);
}

.route-art-token {
  background:
    radial-gradient(circle at 68% 32%, rgba(184,255,36,.2), transparent 20%),
    radial-gradient(circle at 22% 80%, rgba(82,217,232,.22), transparent 28%),
    linear-gradient(145deg, #061110, #0c2723);
}

.route-art-work {
  background:
    radial-gradient(circle at 54% 45%, rgba(255,255,255,.92) 0 8%, transparent 8.4%),
    repeating-radial-gradient(circle at 54% 45%, rgba(82,217,232,.78) 0 2px, transparent 3px 22px),
    linear-gradient(140deg, #dfece6, #79bfb1);
}

.route-art-cause {
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.5), transparent 22%),
    radial-gradient(circle at 72% 72%, rgba(184,255,36,.2), transparent 28%),
    linear-gradient(145deg, #f46f65, #f4b776 64%, #eed8b1);
}

.route-art-community {
  background:
    radial-gradient(circle at 22% 28%, rgba(184,255,36,.35), transparent 12%),
    radial-gradient(circle at 82% 68%, rgba(82,217,232,.3), transparent 20%),
    linear-gradient(145deg, #038c8c, #073f3b);
}

.route-art-grid {
  position: absolute;
  inset: -20%;
  opacity: .34;
  background-image:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 34px 34px;
  transform: perspective(420px) rotateX(58deg) rotateZ(-17deg) translateY(18%);
  transform-origin: center;
}

.route-art-work .route-art-grid {
  opacity: .18;
  mix-blend-mode: multiply;
}

.route-art-orbit {
  position: absolute;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
}

.route-art-orbit.orbit-a {
  width: 74%;
  aspect-ratio: 1;
  left: 13%;
  top: -10%;
}

.route-art-orbit.orbit-b {
  width: 48%;
  aspect-ratio: 1;
  right: -8%;
  bottom: -12%;
  border-color: rgba(184,255,36,.5);
}

.route-art-work .route-art-orbit {
  border-color: rgba(3,140,140,.3);
}

.route-art-node {
  position: absolute;
  z-index: 2;
  width: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #b8ff24;
  box-shadow: 0 0 0 8px rgba(184,255,36,.1), 0 0 36px rgba(184,255,36,.35);
}

.route-art-node.node-a { top: 23%; left: 18%; }
.route-art-node.node-b { top: 17%; right: 22%; width: 8px; }
.route-art-node.node-c { right: 14%; bottom: 24%; width: 16px; }
.route-art-work .route-art-node { background: #038c8c; box-shadow: 0 0 0 8px rgba(3,140,140,.1); }

.route-art-core {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: clamp(116px, 8vw, 148px);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  color: #eff4ef;
  border-radius: 50%;
  background: rgba(5,16,15,.86);
  box-shadow: 0 0 0 10px rgba(255,255,255,.06), 0 32px 80px rgba(0,0,0,.32);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(12px);
}

.route-art-work .route-art-core {
  color: #07100f;
  background: rgba(244,242,235,.88);
}

.route-art-core small,
.route-art-core strong {
  display: block;
}

.route-art-core small {
  font-size: 9px !important;
  font-weight: 700;
  letter-spacing: .15em;
}

.route-art-core strong {
  margin-top: 5px;
  font: 500 clamp(34px, 3vw, 48px)/.9 var(--serif);
}

.route-art-signal {
  position: absolute;
  z-index: 2;
  right: 24px;
  top: 24px;
  display: flex;
  align-items: end;
  gap: 4px;
  height: 34px;
}

.route-art-signal i {
  width: 3px;
  height: 30%;
  background: rgba(255,255,255,.75);
}

.route-art-signal i:nth-child(2) { height: 62%; }
.route-art-signal i:nth-child(3) { height: 100%; background: #b8ff24; }
.route-art-signal i:nth-child(4) { height: 74%; }
.route-art-signal i:nth-child(5) { height: 46%; }
.route-art-work .route-art-signal i { background: rgba(3,140,140,.55); }
.route-art-work .route-art-signal i:nth-child(3) { background: #07100f; }

.product-route-number {
  position: absolute;
  right: clamp(16px, 1.4vw, 24px);
  bottom: clamp(16px, 1.4vw, 24px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  aspect-ratio: 1;
  color: #07100f;
  font: 700 13px/1 var(--font-sans, Arial, sans-serif);
  background: #b8ff24;
  border-radius: 50%;
}

.product-route-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 2vw, 34px) clamp(22px, 1.8vw, 30px) clamp(26px, 2.2vw, 38px);
  background: #f1eee6;
}

.product-route-eyebrow {
  min-height: 0;
  color: #2451dc;
  font: 650 clamp(12px, .78vw, 14px)/1.3 var(--font-sans, Arial, sans-serif);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.product-route-question {
  display: block;
  min-height: 3.1em;
  margin-top: clamp(18px, 1.4vw, 24px);
  color: #56625f;
  font: 520 clamp(14px, .92vw, 16px)/1.4 var(--font-sans, Arial, sans-serif);
}

.product-route-title {
  display: block;
  margin-top: clamp(10px, .8vw, 14px);
  color: #07100f;
  font: 560 clamp(27px, 1.8vw, 34px)/1 var(--font-sans, Arial, sans-serif);
  letter-spacing: -.045em;
  text-wrap: balance;
}

.product-route-description {
  display: block;
  margin-top: clamp(16px, 1.35vw, 22px);
  color: #52605e;
  font: 420 clamp(15px, .96vw, 17px)/1.55 var(--font-sans, Arial, sans-serif);
}

.product-route-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  padding-top: clamp(28px, 2.8vw, 44px);
  color: #2451dc;
  font: 620 clamp(15px, 1vw, 17px)/1.2 var(--font-sans, Arial, sans-serif);
}

.product-route-action > span {
  font-size: 1.35em;
  transition: transform 280ms ease;
}

.product-route-card:hover .route-art,
.product-route-card:hover .product-route-photo {
  transform: scale(1.035);
}

.product-route-card:hover .product-route-photo,
.product-route-card:focus-visible .product-route-photo {
  filter: grayscale(0) saturate(.86) brightness(.9) contrast(1.02);
}

.product-route-card:hover .product-route-action > span {
  transform: translateX(5px);
}

.product-route-card:focus-visible {
  outline: 3px solid #2451dc;
  outline-offset: 5px;
}

@container product-routes (max-width: 1199px) {
  .product-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-route-card {
    min-height: 610px;
  }

  .product-route-media {
    min-height: 300px;
  }
}

@container product-routes (max-width: 619px) {
  .product-route-grid {
    display: flex;
    gap: 16px;
    width: calc(100% + var(--viewport-gutter));
    padding: 4px var(--viewport-gutter) 18px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .product-route-grid::-webkit-scrollbar {
    display: none;
  }

  .product-route-card {
    flex: 0 0 min(86vw, 370px);
    min-height: 580px;
    scroll-snap-align: start;
  }

  .product-route-media {
    min-height: 285px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-art,
  .product-route-action > span {
    transition: none;
  }
}

.view-home .landing-page h4 {
  font-size: var(--type-subheading) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
}

.view-home :is(.landing-process, .landing-integrate, .landing-use, .landing-cycles) {
  padding-block: var(--space-section) !important;
}

/* The four proof routes are a full-width editorial tray, not a card inside a card. */
.header-seal-menu {
  position: fixed !important;
  inset: var(--se-header-h) 0 auto !important;
  width: 100vw !important;
  max-height: calc(100dvh - var(--se-header-h)) !important;
  padding: clamp(38px, 4vw, 62px) var(--viewport-gutter) clamp(54px, 5vw, 82px) !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  z-index: 115 !important;
  background:
    radial-gradient(circle at 84% 0%, rgba(28, 58, 91, .24), transparent 34%),
    linear-gradient(112deg, #061412 0%, #050d13 62%, #07101a 100%) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .42) !important;
}

.header-seal-menu-inner {
  width: min(var(--content-max), 100%) !important;
  max-width: var(--content-max) !important;
  margin-inline: auto !important;
  padding: 0 !important;
  gap: clamp(34px, 3.6vw, 56px) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.header-seal-menu .seal-kind-menu-intro {
  grid-template-columns: minmax(320px, .8fr) minmax(440px, 1.2fr) 54px !important;
  gap: clamp(26px, 3vw, 52px) !important;
  align-items: start !important;
}

.header-seal-menu .seal-kind-menu-intro > div {
  gap: 10px !important;
}

.header-seal-menu .seal-kind-menu-intro strong {
  font-size: clamp(42px, 4vw, 66px) !important;
  line-height: .94 !important;
  letter-spacing: -.055em !important;
}

.header-seal-menu .seal-kind-menu-intro > span {
  max-width: 760px !important;
  padding-top: 6px !important;
  font-size: var(--type-body-large) !important;
  line-height: 1.55 !important;
}

.header-seal-menu .seal-kind-menu-options {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.5vw, 24px) !important;
}

.header-seal-menu .seal-kind-menu-options button {
  min-height: clamp(300px, 24vw, 370px) !important;
  padding: clamp(22px, 2vw, 32px) !important;
  grid-template-columns: minmax(0, 1fr) 24px !important;
  gap: 16px !important;
  border-radius: var(--se-radius) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .22) !important;
}

.header-seal-menu .seal-kind-menu-options button > i {
  display: none !important;
}

.header-seal-menu .seal-kind-menu-options button b {
  font-size: clamp(21px, 1.55vw, 27px) !important;
  line-height: 1.05 !important;
}

.header-seal-menu .seal-kind-menu-options button small {
  font-size: clamp(14px, .95vw, 16px) !important;
  line-height: 1.5 !important;
}

.header-seal-menu .seal-kind-menu-options .seal-card-action {
  font-size: var(--type-label) !important;
}

.machine-heading h1,
.verify-heading h1,
.account-profile-copy h1 {
  font-size: clamp(44px, 5.2vw, 78px) !important;
  line-height: .94 !important;
}

/*
 * Each sealing route opens with the same photographic field used by its
 * selector card. The photograph is the context; no decorative icon competes.
 */
.machine-heading.seal-kind-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: clamp(390px, 34vw, 540px) !important;
  padding: clamp(42px, 5vw, 76px) !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden !important;
  border-radius: var(--se-radius) !important;
  background: #061112 !important;
  margin-top: 0 !important;
}

.machine-heading.seal-kind-hero::before,
.machine-heading.seal-kind-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

.machine-heading.seal-kind-hero::before {
  z-index: -2 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  transform: scale(1.015) !important;
}

.machine-heading.seal-kind-hero.kind-token::before { background-image: url("../assets/menu/spl-asset-banking.webp") !important; }
.machine-heading.seal-kind-hero.kind-work::before { background-image: url("../assets/menu/work-banking.webp") !important; }
.machine-heading.seal-kind-hero.kind-cause::before { background-image: url("../assets/menu/cause-banking.webp") !important; }
.machine-heading.seal-kind-hero.kind-community::before { background-image: url("../assets/menu/community-participation.webp") !important; }

.machine-heading.seal-kind-hero::after {
  z-index: -1 !important;
  background:
    linear-gradient(180deg, rgba(3, 10, 12, .06) 10%, rgba(3, 10, 12, .2) 42%, rgba(3, 10, 12, .96) 94%, #061112 100%),
    linear-gradient(90deg, rgba(3, 10, 12, .78), rgba(3, 10, 12, .06) 68%) !important;
}

.machine-heading.seal-kind-hero .seal-page-title {
  width: min(900px, 100%) !important;
  display: block !important;
}

.machine-heading.seal-kind-hero .seal-kind-page-icon {
  display: none !important;
}

.machine-heading.seal-kind-hero h1 {
  max-width: 880px !important;
  margin: 14px 0 18px !important;
  color: #f4f1e8 !important;
  font-size: clamp(62px, 6.5vw, 104px) !important;
  line-height: .88 !important;
  letter-spacing: -.062em !important;
}

/* The shell already reserves the fixed header height. Journey pages begin once,
   from the shared page-start token, instead of stacking a second header offset. */
.view-seal .journey-screen.workspace {
  padding-top: var(--space-page-start) !important;
}

.machine-heading.seal-kind-hero p {
  max-width: 680px !important;
  margin: 0 !important;
  color: rgba(244, 241, 232, .72) !important;
  font-size: var(--type-body-large) !important;
}

.machine-heading.seal-kind-hero .draft-actions {
  position: absolute !important;
  right: clamp(28px, 4vw, 64px) !important;
  bottom: clamp(28px, 4vw, 64px) !important;
  z-index: 1 !important;
}

/* Common surfaces share one padding and one heading rhythm. */
:is(
  .panel,
  .work-card,
  .readiness-card,
  .review-main,
  .side-summary,
  .fee-card,
  .identity-card,
  .account-profile-section,
  .account-side-card,
  .exchange-flow-card,
  .swap-machine,
  .exchange-sidecar,
  .market-chart-panel,
  .portfolio-summary article
) {
  padding: var(--space-card) !important;
  border-radius: var(--se-radius) !important;
}

:is(
  .panel,
  .work-card,
  .review-main,
  .account-profile-section,
  .exchange-flow-card,
  .market-chart-panel
) h2 {
  font-size: var(--type-heading) !important;
  line-height: 1.04 !important;
}

/* Trenches: enlarge internal information without changing the established row frame. */
.exchange-terminal.exchange-surface-markets .market-row {
  grid-template-columns: clamp(64px, 5vw, 82px) minmax(0, 1fr) clamp(88px, 7vw, 110px) !important;
  gap: clamp(14px, 1.25vw, 22px) !important;
  padding: clamp(15px, 1.25vw, 22px) !important;
}

.exchange-terminal.exchange-surface-markets .market-row-image {
  width: clamp(64px, 5vw, 82px) !important;
  height: clamp(64px, 5vw, 82px) !important;
}

.exchange-terminal.exchange-surface-markets .market-row-main b { font-size: clamp(15px, 1.05vw, 18px) !important; }
.exchange-terminal.exchange-surface-markets .market-row-main em { font-size: var(--type-small) !important; }
.exchange-terminal.exchange-surface-markets .market-row-main > small { font-size: var(--type-small) !important; }
.exchange-terminal.exchange-surface-markets .market-row-meta i { font-size: var(--type-micro) !important; padding: 6px 9px !important; }
.exchange-terminal.exchange-surface-markets .market-row-value b { font-size: clamp(20px, 1.55vw, 26px) !important; }
.exchange-terminal.exchange-surface-markets .market-row-value small { font-size: var(--type-micro) !important; }

/* Fixed workflow controller always belongs to the viewport, never the footer. */
.seal-action-dock {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  left: 50% !important;
  width: min(1480px, calc(100vw - (max(14px, var(--viewport-gutter)) * 2))) !important;
  max-width: min(1480px, calc(100vw - (max(14px, var(--viewport-gutter)) * 2))) !important;
  min-height: clamp(82px, 6vw, 98px) !important;
  margin: 0 auto !important;
  transform: translateX(-50%) !important;
  z-index: 120 !important;
}

.seal-action-dock .dock-primary {
  min-width: clamp(260px, 24vw, 380px) !important;
}

.app-footer {
  padding-bottom: clamp(118px, 10vw, 154px) !important;
}

/* Tablet: two-row header, coherent cards and readable controls. */
@media (max-width: 1100px) {
  :root {
    --se-header-h: 126px;
    --content-max: 100%;
    --type-display: clamp(52px, 8.4vw, 82px);
  }

  .app-header,
  .home-header.is-top,
  .home-header.is-scrolled {
    grid-template-columns: minmax(220px, 1fr) auto !important;
    grid-template-rows: 68px 58px !important;
  }

  .app-header .core-navigation {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }

  .app-header .header-actions { grid-column: 2 !important; grid-row: 1 !important; }
  .app-header .seal-menu-control { width: 270px !important; min-width: 270px !important; }

  .seal-action-dock .dock-entity-context { display: none !important; }
  .seal-action-dock .dock-primary { min-width: 250px !important; }

  .header-seal-menu .seal-kind-menu-intro {
    grid-template-columns: minmax(0, 1fr) 52px !important;
  }

  .header-seal-menu .seal-kind-menu-intro > span {
    grid-column: 1 / -1 !important;
    max-width: 760px !important;
  }

  .header-seal-menu .seal-kind-menu-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .header-seal-menu .seal-kind-menu-options button {
    min-height: 310px !important;
  }
}

@media (max-width: 980px) {
  .exchange-benefit-ledger > article {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .exchange-benefit-ledger .benefit-art {
    grid-column: 2;
    width: min(100%, 420px);
  }

  .value-map-orbit.orbit-one { width: 72vw; }
  .value-map-orbit.orbit-two { width: 46vw; }
}

/* Mobile: preserve hierarchy, remove horizontal competition. */
@media (max-width: 700px) {
  :root {
    --viewport-gutter: 16px;
    --se-header-h: 118px;
    --type-display: clamp(43px, 13vw, 62px);
    --type-title: clamp(34px, 10vw, 48px);
    --type-heading: clamp(22px, 6.5vw, 28px);
    --type-body: 16px;
    --type-body-large: 18px;
    --type-control: 15px;
    --type-small: 13px;
    --type-micro: 11px;
    --space-page-start: 18px;
  }

  .app-header,
  .home-header.is-top,
  .home-header.is-scrolled {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 64px 54px !important;
    padding: 0 14px !important;
  }

  .view-home .landing-page,
  .view-exchange .exchange-marketing {
    padding-top: var(--se-header-h) !important;
  }

  .view-exchange.app-shell:not(.app-loading) {
    padding-top: 0 !important;
  }

  .app-header .brand-lockup { display: none !important; }
  .app-header .brand-mark { width: 38px !important; height: 50px !important; flex-basis: 38px !important; }
  .app-header .seal-menu-control { width: 228px !important; min-width: 228px !important; }

  .view-home .landing-hero > .landing-wrap,
  .view-exchange .exchange-marketing-hero {
    width: calc(100% - 32px) !important;
  }

  .view-home .landing-hero h1,
  .view-exchange .exchange-marketing-copy h1 {
    max-width: none;
    line-height: .94 !important;
  }

  .view-home .landing-hero > .landing-wrap,
  .view-exchange .exchange-marketing-hero {
    padding: clamp(62px, 15vw, 92px) 0 clamp(84px, 18vw, 112px) !important;
  }

  .header-seal-menu {
    padding: 28px 16px 40px !important;
  }

  .header-seal-menu .seal-kind-menu-intro {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 18px !important;
  }

  .header-seal-menu .seal-kind-menu-intro strong {
    font-size: clamp(36px, 11vw, 48px) !important;
  }

  .header-seal-menu .seal-kind-menu-intro > span {
    font-size: 17px !important;
  }

  .header-seal-menu .seal-kind-menu-options {
    grid-template-columns: 1fr !important;
  }

  .header-seal-menu .seal-kind-menu-options button {
    min-height: 280px !important;
  }

  .view-home .landing-lead,
  .view-exchange .exchange-marketing-copy > p,
  .view-exchange .exchange-marketing-actions {
    grid-column: 1 / -1 !important;
  }

  .view-home .landing-lead {
    grid-template-columns: 1fr !important;
  }

  .view-exchange .exchange-marketing-visual.exchange-value-map {
    min-height: 560px !important;
    margin-top: 54px !important;
    border-radius: 26px !important;
  }

  .value-map-orbit.orbit-one { width: 520px; }
  .value-map-orbit.orbit-two { width: 310px; }
  .value-map-core { top: 42%; width: 148px; }
  .value-map-node { grid-template-columns: 30px auto; gap: 8px; padding: 10px 12px 10px 10px; border-radius: 14px; }
  .value-map-node small { width: 30px; }
  .value-map-node b { font-size: 12px; }
  .origin-node { left: 14px; top: 15%; }
  .terms-node { right: 14px; top: 27%; }
  .proof-node { left: 18px; bottom: 25%; }

  .exchange-value-map .exchange-marketing-ticket {
    right: 14px !important;
    bottom: 14px !important;
    left: 14px !important;
    width: auto;
    padding: 20px !important;
  }

  .exchange-benefit-ledger {
    width: calc(100% - 32px);
  }

  .exchange-benefit-ledger > header {
    grid-template-columns: 1fr;
    margin-bottom: 42px;
  }

  .exchange-benefit-ledger > article {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 28px 24px 24px;
    border-radius: 26px;
  }

  .benefit-index { font-size: 16px; }
  .exchange-benefit-ledger h3 { font-size: clamp(38px, 11vw, 52px); }
  .exchange-benefit-ledger .benefit-art {
    grid-column: 1;
    width: 100%;
    min-height: 240px;
  }

  .machine-heading.seal-kind-hero {
    min-height: 430px !important;
    padding: 28px !important;
  }

  .machine-heading.seal-kind-hero h1 {
    font-size: clamp(50px, 14vw, 72px) !important;
  }

  .machine-heading.seal-kind-hero .draft-actions {
    position: static !important;
    margin-top: 24px !important;
  }

  .exchange-terminal.exchange-surface-markets .market-row {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }

  .exchange-terminal.exchange-surface-markets .market-row-value {
    grid-column: 2 !important;
    justify-self: stretch !important;
    text-align: left !important;
  }

  .seal-action-dock {
    right: auto !important;
    left: 50% !important;
    width: calc(100vw - 16px) !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 16px) !important;
    min-height: 76px !important;
    transform: translateX(-50%) !important;
  }

  .seal-action-dock .dock-progress { display: none !important; }
  .seal-action-dock .dock-primary { min-width: 0 !important; flex: 1 1 auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* Identity and search authority. This file loads last. */
.header-greeting {
  max-width: 210px;
  color: rgba(242, 245, 243, .82);
  font-size: 13px;
  font-weight: 560;
  letter-spacing: -.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.app-header .avatar.has-photo {
  overflow: hidden;
  padding: 0 !important;
  background: #10191b !important;
}

.app-header .avatar.has-photo img,
.account-profile-avatar > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 22%;
}

.account-profile-avatar {
  overflow: visible;
}

.account-profile-avatar > img {
  overflow: hidden;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 26px 70px rgba(0, 0, 0, .28);
}

.search,
.market-search,
.verify-field > div {
  min-height: 56px !important;
  padding: 7px 9px 7px 16px !important;
  border: 0 !important;
  border-radius: 16px !important;
  outline: 0 !important;
  background: rgba(236, 243, 240, .075) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  color: #f3f5f1 !important;
  transition: background .2s ease, box-shadow .2s ease !important;
}

.search:focus-within,
.market-search:focus-within,
.verify-field > div:focus-within {
  outline: 0 !important;
  background: rgba(89, 220, 232, .095) !important;
  box-shadow: 0 0 0 6px rgba(89, 220, 232, .075), inset 0 0 0 1px rgba(89, 220, 232, .26) !important;
}

.search > span,
.market-search > span,
.verify-input-icon {
  color: #59dce8 !important;
}

.search input,
.market-search input,
.verify-field input {
  min-width: 0;
  min-height: 42px !important;
  padding: 0 10px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #f3f5f1 !important;
  font-size: 16px !important;
  font-weight: 480;
  letter-spacing: -.01em;
}

.search input::placeholder,
.market-search input::placeholder,
.verify-field input::placeholder {
  color: rgba(218, 229, 224, .48) !important;
  opacity: 1;
}

.search input[type="search"]::-webkit-search-cancel-button,
.market-search input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

@media (max-width: 1500px) {
  .header-greeting { display: none; }
}

/*
 * Transaction interface authority
 * Every financial surface uses the same geometry and the same semantic states.
 * Colour is always paired with a label, icon or explicit status.
 */
:root {
  --state-info: #59dce8;
  --state-active: #5a7cff;
  --state-ready: #c7ff31;
  --state-authorize: #ffb545;
  --state-danger: #ff7b67;
  --state-muted: #73827d;
  --control-radius: 15px;
  --control-fill: rgba(238, 244, 241, .065);
  --control-fill-hover: rgba(238, 244, 241, .1);
  --mobile-transaction-dock: 142px;
}

.view-seal,
.view-exchange,
.view-verify,
.view-seals,
.view-account,
.view-genesis {
  --surface-strong: #101c1c;
  --surface-soft: rgba(239, 244, 241, .048);
}

/* One control family. Filled surfaces replace visual border lines. */
:is(
  .button,
  .draft-actions button,
  .choice-stack button,
  .identity-option,
  .visibility-choice button,
  .amount-presets button,
  .market-sort-chips button,
  .category-chips button,
  .wallet-primary,
  .wallet-demo,
  .text-button,
  .complete-actions button,
  .after-seal button
) {
  box-sizing: border-box;
  min-height: 52px;
  border: 0 !important;
  border-radius: var(--control-radius) !important;
  outline: 0;
  font-family: inherit;
  font-size: var(--type-control) !important;
  line-height: 1.2;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:is(
  .button.secondary,
  .draft-actions button,
  .choice-stack button,
  .identity-option,
  .visibility-choice button,
  .amount-presets button,
  .market-sort-chips button,
  .category-chips button,
  .wallet-demo,
  .text-button,
  .complete-actions .secondary,
  .after-seal button
) {
  background: var(--control-fill) !important;
  color: #dce4e0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

:is(
  .button.secondary,
  .draft-actions button,
  .choice-stack button,
  .identity-option,
  .visibility-choice button,
  .amount-presets button,
  .market-sort-chips button,
  .category-chips button,
  .wallet-demo,
  .text-button,
  .after-seal button
):hover {
  background: var(--control-fill-hover) !important;
}

:is(
  .choice-stack button.selected,
  .identity-option.selected,
  .visibility-choice button.active,
  .market-sort-chips button.active,
  .category-chips button.active
) {
  background: rgba(89, 220, 232, .13) !important;
  color: #f3f6f3 !important;
  box-shadow: inset 0 0 0 1px rgba(89, 220, 232, .27), 0 15px 40px rgba(0, 0, 0, .12) !important;
}

:is(button, [role="button"], input, select, textarea):focus-visible {
  outline: 3px solid rgba(89, 220, 232, .82) !important;
  outline-offset: 3px !important;
}

:is(button, [role="button"]):disabled,
:is(button, [role="button"])[aria-disabled="true"] {
  cursor: not-allowed !important;
}

/* Form fields remain large enough for touch and never trigger iOS zoom. */
.app-shell :is(input, select, textarea) {
  min-height: 54px;
  border: 0;
  border-radius: var(--control-radius);
  font-size: 16px !important;
}

.app-shell textarea {
  min-height: 132px;
  padding: 16px 18px;
  line-height: 1.5;
  resize: vertical;
}

/* Financial information uses a stable label, value and status hierarchy. */
:is(.fee-lines, .exchange-facts, .authorization-scope) {
  gap: 10px !important;
}

:is(.fee-lines > div, .exchange-facts > div, .authorization-scope > span) {
  min-width: 0;
  padding: 17px 18px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: rgba(239, 244, 241, .045) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

:is(.fee-lines span, .exchange-facts dt, .authorization-scope small) {
  color: #82908b !important;
  font-size: 11px !important;
  line-height: 1.35;
  letter-spacing: .075em !important;
  text-transform: uppercase;
}

:is(.fee-lines strong, .exchange-facts dd, .authorization-scope b) {
  color: #edf2ef !important;
  font-size: 14px !important;
  font-weight: 620;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.panel-top em,
.quote-chip strong {
  color: var(--state-authorize) !important;
}

.panel-top em.expired,
.failure-mark,
.exchange-warning {
  color: var(--state-danger) !important;
}

.demo-total {
  border: 0 !important;
  border-radius: 17px !important;
  background: rgba(89, 220, 232, .085) !important;
  box-shadow: inset 0 0 0 1px rgba(89, 220, 232, .12) !important;
}

.demo-total strong {
  color: #f4f6f3 !important;
}

.demo-total em {
  color: var(--state-info) !important;
}

:is(.quote-disclaimer, .authorization-note, .seal-swap-promise, .wallet-ready, .exchange-warning) {
  border: 0 !important;
  border-radius: 16px !important;
}

.quote-disclaimer,
.authorization-note {
  background: rgba(255, 181, 69, .075) !important;
  color: #c8d0cc !important;
}

.seal-swap-promise,
.wallet-ready {
  background: rgba(199, 255, 49, .075) !important;
}

.seal-swap-promise > i,
.wallet-ready > i {
  background: var(--state-ready) !important;
  color: #07100f !important;
}

.exchange-warning {
  background: rgba(255, 123, 103, .075) !important;
}

/* Quote and authorization are visually distinct from ordinary navigation. */
.authorize-grid,
.exchange-authorize {
  align-items: stretch !important;
}

.fee-card,
.authorize-instrument {
  box-shadow: inset 0 4px 0 rgba(255, 181, 69, .74), 0 28px 80px rgba(0, 0, 0, .16) !important;
}

.identity-card,
.wallet-approval {
  box-shadow: inset 0 4px 0 rgba(89, 220, 232, .68), 0 28px 80px rgba(0, 0, 0, .16) !important;
}

.wallet-primary {
  min-height: 64px !important;
  background: linear-gradient(115deg, #3154e8, #5574ef) !important;
  color: white !important;
  box-shadow: 0 18px 46px rgba(49, 84, 232, .24) !important;
}

.identity-card .button.primary,
.wallet-approval .button.primary {
  min-height: 60px;
}

/* Rail choice cards remain comparable at every width. */
.rail-grid {
  align-items: stretch !important;
}

.rail-card {
  min-width: 0;
  border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 28px 80px rgba(0, 0, 0, .18) !important;
}

.rail-card.selected {
  box-shadow: inset 0 0 0 2px rgba(89, 220, 232, .62), 0 32px 90px rgba(5, 113, 126, .18) !important;
}

.rail-card .rail-top > i {
  color: var(--state-info) !important;
}

/* The fixed workflow controller is the only progress controller. */
.seal-action-dock,
.exchange-action-dock {
  box-sizing: border-box;
  min-height: 92px !important;
  padding: 10px !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 24px !important;
  background: rgba(7, 20, 18, .965) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
  backdrop-filter: blur(24px) saturate(125%);
}

.dock-entity-context,
.exchange-dock-context {
  border: 0 !important;
  background: rgba(255, 255, 255, .025);
  border-radius: 16px;
}

.dock-entity-context small {
  font-size: 10px !important;
}

.dock-entity-context b {
  font-size: 13px !important;
}

.dock-progress {
  min-width: 0;
  flex: 1 1 auto;
}

.dock-progress button {
  min-width: 0;
  min-height: 68px !important;
  border-radius: 14px !important;
}

.dock-progress button i {
  width: 29px !important;
  height: 29px !important;
  font-size: 12px !important;
}

.dock-progress button span {
  font-size: 10px !important;
  letter-spacing: .075em !important;
}

.dock-progress button.done i {
  background: rgba(199, 255, 49, .09) !important;
  color: var(--state-ready) !important;
}

.dock-progress button.active i {
  background: var(--state-active) !important;
  color: white !important;
}

.dock-progress button:last-child.active i {
  background: var(--state-ready) !important;
  color: #07100f !important;
}

.seal-action-dock .dock-primary {
  flex: 0 0 clamp(270px, 25vw, 380px) !important;
  min-width: clamp(270px, 25vw, 380px) !important;
  min-height: 72px !important;
  border: 0 !important;
  border-radius: 16px !important;
  padding: 0 clamp(18px, 1.5vw, 24px) !important;
}

.seal-action-dock .dock-primary small {
  font-size: 10px !important;
  letter-spacing: .1em;
}

.seal-action-dock .dock-primary b {
  margin-top: 5px !important;
  font-size: 15px !important;
  line-height: 1.2;
}

.seal-action-dock .dock-primary.ready-to-progress {
  background: linear-gradient(112deg, #c7ff31, #a9ef32) !important;
  color: #07100f !important;
}

.seal-action-dock .dock-primary.needs-input {
  background: #172321 !important;
  color: rgba(238, 243, 240, .62) !important;
}

.seal-action-dock .dock-back {
  width: 64px !important;
  flex: 0 0 64px !important;
  min-height: 72px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .055) !important;
}

/* No route content can disappear under the persistent transaction controls. */
.view-seal .journey-screen,
.view-exchange .exchange-terminal {
  padding-bottom: calc(148px + env(safe-area-inset-bottom)) !important;
}

.view-seal .complete-screen,
.view-exchange .exchange-surface-swap:has(.exchange-complete) {
  min-height: calc(100svh - var(--se-header-h)) !important;
}

/* Long financial identifiers wrap instead of bleeding beyond their surface. */
:is(
  .receipt-summary strong,
  .exchange-facts dd,
  .authorization-scope b,
  .market-review-context code,
  .seal-id,
  .fee-title h2
) {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 1100px) {
  .authorize-grid,
  .exchange-authorize {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .seal-action-dock .dock-entity-context {
    display: grid !important;
    width: 60px !important;
    flex-basis: 60px !important;
    grid-template-columns: 44px !important;
    padding: 8px !important;
  }

  .seal-action-dock .dock-entity-context > span:last-child {
    display: none !important;
  }
}

@media (max-width: 760px) {
  :root {
    --mobile-transaction-dock: 146px;
    --control-radius: 14px;
  }

  .view-seal .journey-screen,
  .view-exchange .exchange-terminal {
    padding-bottom: calc(var(--mobile-transaction-dock) + 34px + env(safe-area-inset-bottom)) !important;
  }

  .authorize-grid,
  .exchange-authorize,
  .exchange-layout {
    gap: 14px !important;
  }

  .fee-card,
  .identity-card,
  .authorize-instrument,
  .wallet-approval,
  .exchange-flow-card {
    padding: 22px 18px !important;
    border-radius: 20px !important;
  }

  .fee-title {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 13px !important;
  }

  .fee-title h2 {
    font-size: 25px !important;
    line-height: 1.05 !important;
  }

  .fee-lines,
  .exchange-facts,
  .authorization-scope {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .fee-lines > div {
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .fee-lines strong {
    max-width: 52%;
    text-align: right;
  }

  .exchange-review-amount {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .exchange-review-amount > i {
    width: 38px;
    height: 38px;
    transform: rotate(90deg);
  }

  .visibility-choice {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .visibility-choice > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .visibility-choice button {
    min-height: 52px !important;
  }

  .rail-grid {
    display: flex !important;
    width: calc(100% + var(--viewport-gutter)) !important;
    gap: 14px !important;
    padding: 3px var(--viewport-gutter) 18px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .rail-grid::-webkit-scrollbar {
    display: none;
  }

  .rail-card {
    flex: 0 0 min(86vw, 380px);
    min-height: 430px !important;
    padding: 24px !important;
    scroll-snap-align: start;
  }

  .rail-card h2 {
    font-size: 40px !important;
  }

  .destination-footer {
    align-items: stretch !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .destination-footer .button {
    width: 100%;
  }

  /* Two-row mobile controller. Stages stay visible, the CTA never moves. */
  .seal-action-dock,
  .exchange-action-dock {
    inset: auto 8px max(6px, env(safe-area-inset-bottom)) 8px !important;
    width: auto !important;
    max-width: none !important;
    min-height: var(--mobile-transaction-dock) !important;
    padding: 8px !important;
    display: grid !important;
    grid-template-columns: 54px 48px minmax(0, 1fr) !important;
    grid-template-rows: 54px 68px !important;
    gap: 7px !important;
    transform: none !important;
    border-radius: 20px !important;
  }

  .seal-action-dock .dock-progress {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }

  .seal-action-dock .dock-progress button {
    min-height: 54px !important;
    padding: 3px 1px !important;
    gap: 3px !important;
  }

  .seal-action-dock .dock-progress button i {
    width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
  }

  .seal-action-dock .dock-progress button span {
    font-size: 8px !important;
    letter-spacing: .035em !important;
  }

  .seal-action-dock .dock-back {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 54px !important;
    min-width: 54px !important;
    min-height: 68px !important;
    flex-basis: 54px !important;
  }

  .seal-action-dock .dock-entity-context {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 68px !important;
    padding: 10px 2px !important;
    display: grid !important;
    grid-template-columns: 40px !important;
    place-items: center !important;
  }

  .seal-action-dock .dock-entity-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  .seal-action-dock .dock-entity-context > span:last-child {
    display: none !important;
  }

  .seal-action-dock .dock-primary {
    grid-column: 3 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 68px !important;
    padding: 0 15px !important;
    flex: none !important;
  }

  .seal-action-dock .dock-primary small {
    font-size: 9px !important;
  }

  .seal-action-dock .dock-primary b {
    max-width: calc(100vw - 176px) !important;
    font-size: 14px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .exchange-sidecar {
    min-width: 0;
  }

  .exchange-qr {
    width: min(100%, 320px) !important;
    margin-inline: auto;
  }

  .swap-value {
    min-width: 0;
    gap: 10px !important;
  }

  .swap-value input {
    min-width: 0;
  }

  .asset-picker {
    min-width: 132px;
  }
}

@media (max-width: 390px) {
  .seal-action-dock,
  .exchange-action-dock {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  .seal-action-dock .dock-entity-context {
    display: none !important;
  }

  .seal-action-dock .dock-back {
    grid-column: 1 !important;
  }

  .seal-action-dock .dock-primary {
    grid-column: 2 !important;
  }

  .seal-action-dock .dock-primary b {
    max-width: calc(100vw - 116px) !important;
  }
}

/* ATM header authority. Two machine operations, one account access bay. */
.app-header {
  --atm-header-height: 92px;
  height: var(--atm-header-height) !important;
  padding-inline: max(28px, calc((100% - 1880px) / 2)) !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: clamp(24px, 2.4vw, 50px) !important;
  background: rgba(5, 15, 15, .975) !important;
  box-shadow: 0 20px 64px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(28px) saturate(124%) !important;
}

.app-shell:not(.app-loading),
.view-home.app-shell:not(.app-loading) {
  padding-top: var(--atm-header-height, 92px) !important;
}

.app-header .brand {
  min-width: 274px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.app-header .brand-mark {
  width: 54px;
  height: 62px;
  flex: 0 0 54px;
}

.app-header .brand-lockup {
  display: grid;
  gap: 4px;
}

.app-header .brand-lockup b {
  font-size: 16px;
  letter-spacing: .18em;
}

.app-header .brand-lockup small {
  font-size: 10px;
  letter-spacing: .2em;
}

.app-header nav.core-navigation {
  min-width: 0;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(16px, 1.8vw, 34px) !important;
}

.machine-primary-actions,
.machine-secondary-actions {
  min-width: 0;
  display: flex;
  align-items: center;
}

.machine-primary-actions {
  flex: 0 1 auto;
  gap: 10px;
}

.machine-secondary-actions {
  flex: 0 1 auto;
  justify-content: flex-end;
  gap: 4px;
}

.seal-menu-control {
  height: 58px !important;
}

.app-header nav .seal-menu-trigger,
.app-header nav .exchange-nav {
  height: 58px !important;
  min-height: 58px !important;
  border: 0 !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg, rgba(28, 39, 39, .98), rgba(17, 27, 28, .98)) !important;
  color: rgba(247, 248, 244, .94) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .025) !important;
  font-size: 15px !important;
  font-weight: 690 !important;
  letter-spacing: .01em !important;
}

.app-header nav .seal-menu-trigger {
  width: clamp(220px, 16vw, 270px) !important;
  min-width: clamp(220px, 16vw, 270px) !important;
  max-width: clamp(220px, 16vw, 270px) !important;
  padding: 0 18px !important;
}

.app-header nav .exchange-nav {
  min-width: 184px !important;
  padding: 0 22px !important;
  gap: 12px !important;
}

.app-header nav .exchange-nav > i {
  width: 27px;
  height: 27px;
  display: grid !important;
  place-items: center;
  border-radius: 9px;
  background: rgba(89, 220, 232, .08);
  color: var(--state-info);
  font-size: 17px;
}

.app-header nav .seal-menu-trigger:hover,
.app-header nav .exchange-nav:hover {
  background: linear-gradient(145deg, rgba(35, 49, 49, .99), rgba(20, 32, 33, .99)) !important;
  transform: translateY(-1px);
}

.app-header nav .seal-menu-trigger.active,
.app-header nav .exchange-nav.active {
  background: linear-gradient(145deg, rgba(30, 54, 55, .99), rgba(15, 38, 43, .99)) !important;
  color: #fff !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .26), inset 0 -3px rgba(89, 220, 232, .76) !important;
}

.app-header nav .seal-menu-trigger:focus-visible,
.app-header nav .exchange-nav:focus-visible,
.app-header nav .verify-nav:focus-visible,
.app-header nav .my-seals-nav:focus-visible,
.access-terminal button:focus-visible {
  outline: 0 !important;
  box-shadow: 0 0 0 4px rgba(89, 220, 232, .14), 0 18px 44px rgba(0, 0, 0, .24) !important;
}

.seal-trigger-mark {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  color: rgba(245, 247, 243, .86) !important;
}

.seal-trigger-mark svg {
  width: 26px !important;
  height: 26px !important;
}

.seal-menu-trigger.is-empty .seal-trigger-desktop b {
  font-size: 14px !important;
  font-weight: 720 !important;
  letter-spacing: .07em !important;
}

.app-header nav .verify-nav,
.app-header nav .my-seals-nav {
  min-width: 112px !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  color: rgba(226, 233, 229, .68) !important;
  font-size: 14px !important;
  font-weight: 610 !important;
}

.app-header nav .verify-nav:hover,
.app-header nav .my-seals-nav:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .045) !important;
}

.app-header nav .verify-nav.active,
.app-header nav .my-seals-nav.active {
  color: var(--state-info) !important;
  background: rgba(89, 220, 232, .075) !important;
}

.app-header .access-terminal {
  position: relative;
  min-width: 246px;
  min-height: 66px;
  padding: 7px 7px 7px 9px;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 21px;
  background: linear-gradient(145deg, rgba(28, 39, 39, .98), rgba(14, 24, 25, .98));
  box-shadow: 0 18px 46px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .025);
}

.app-header .access-terminal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 31px;
  width: 58px;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: rgba(89, 220, 232, .72);
  box-shadow: 0 0 18px rgba(89, 220, 232, .3);
}

.app-header .access-terminal.account-ready::before {
  background: rgba(199, 255, 49, .76);
  box-shadow: 0 0 14px rgba(199, 255, 49, .2);
}

.app-header .wallet-connect {
  min-width: 178px;
  min-height: 52px !important;
  padding: 0 15px 0 8px !important;
  justify-content: flex-start;
  gap: 10px;
  border: 0 !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .045) !important;
  color: rgba(247, 248, 244, .94) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 670 !important;
}

.app-header .wallet-connect:hover {
  background: rgba(255, 255, 255, .075) !important;
}

.app-header .wallet-connect.connected {
  color: rgba(247, 248, 244, .96) !important;
  background: rgba(199, 255, 49, .07) !important;
}

.app-header .wallet-connect.connected i {
  color: var(--state-ready) !important;
}

.app-header .wallet-connect i {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px;
  border-radius: 11px !important;
  background: rgba(89, 220, 232, .08) !important;
  color: var(--state-info) !important;
}

.app-header .avatar {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #091314 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035) !important;
  overflow: hidden;
}

.app-header .avatar img {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 18%;
}

.app-header .avatar.login-access {
  width: 94px !important;
  flex-basis: 94px !important;
  padding: 0 11px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(247, 248, 244, .92);
  font-size: 13px;
  font-weight: 680;
  white-space: nowrap;
}

.login-line-icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
}

.login-line-icon::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 6px;
  width: 6px;
  height: 6px;
  border: 1.6px solid currentColor;
  border-radius: 50%;
}

.login-line-icon::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 1px;
  width: 14px;
  height: 7px;
  border: 1.6px solid currentColor;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
}

.header-seal-menu {
  top: var(--atm-header-height, 92px) !important;
}

@media (max-width: 1460px) {
  .app-header {
    padding-inline: 24px !important;
    column-gap: 20px !important;
  }

  .app-header .brand {
    min-width: 224px;
    gap: 12px;
  }

  .app-header .brand-mark {
    width: 48px;
    height: 56px;
    flex-basis: 48px;
  }

  .app-header .brand-lockup b {
    font-size: 14px;
  }

  .app-header .brand-lockup small {
    font-size: 9px;
  }

  .app-header nav.core-navigation {
    gap: 12px !important;
  }

  .app-header nav .seal-menu-trigger {
    width: 248px !important;
    min-width: 248px !important;
    max-width: 248px !important;
  }

  .app-header nav .exchange-nav {
    min-width: 158px !important;
  }

  .app-header nav .verify-nav,
  .app-header nav .my-seals-nav {
    min-width: 98px !important;
    padding-inline: 10px !important;
  }

  .app-header .access-terminal {
    min-width: 206px;
  }

  .app-header .wallet-connect {
    min-width: 142px;
  }

  .app-header .avatar.login-access {
    width: 90px !important;
    flex-basis: 90px !important;
  }
}

@media (max-width: 1180px) {
  .app-header {
    padding-inline: 18px !important;
    column-gap: 14px !important;
  }

  .app-header .brand {
    min-width: 54px;
  }

  .app-header .brand-lockup {
    display: none !important;
  }

  .app-header nav .seal-menu-trigger {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
  }

  .app-header nav .exchange-nav {
    min-width: 150px !important;
    padding-inline: 14px !important;
  }

  .machine-secondary-actions {
    gap: 0;
  }

  .app-header nav .verify-nav,
  .app-header nav .my-seals-nav {
    min-width: 52px !important;
    width: 52px;
    padding: 0 !important;
  }

  .app-header nav .verify-nav > span,
  .app-header nav .my-seals-nav > span {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .app-header nav .verify-nav > i,
  .app-header nav .my-seals-nav > i {
    display: block !important;
  }

  .app-header .access-terminal {
    min-width: 120px;
  }

  .app-header .wallet-connect {
    width: 52px !important;
    min-width: 52px !important;
    padding: 0 !important;
    justify-content: center;
  }

  .app-header .wallet-connect > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
}

@media (max-width: 820px) {
  .app-header {
    --atm-header-height: calc(124px + env(safe-area-inset-top));
    height: var(--atm-header-height) !important;
    padding: env(safe-area-inset-top) 12px 10px !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-rows: 54px 52px !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
  }

  .app-shell:not(.app-loading),
  .view-home.app-shell:not(.app-loading) {
    padding-top: var(--atm-header-height) !important;
  }

  .app-header .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 46px;
  }

  .app-header .brand-mark {
    width: 44px;
    height: 50px;
    flex-basis: 44px;
  }

  .app-header nav.core-navigation {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .machine-primary-actions {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 7px;
  }

  .machine-secondary-actions {
    flex: 0 0 auto;
    gap: 4px;
  }

  .seal-menu-control {
    min-width: 0;
    height: 52px !important;
  }

  .app-header nav .seal-menu-trigger,
  .app-header nav .exchange-nav {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 14px !important;
  }

  .app-header nav .seal-menu-trigger {
    padding: 0 12px !important;
  }

  .app-header nav .exchange-nav {
    padding: 0 10px !important;
    gap: 7px !important;
  }

  .app-header nav .exchange-nav > i {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
  }

  .seal-trigger-desktop {
    display: none !important;
  }

  .seal-trigger-mobile {
    min-width: 0;
    display: block !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px !important;
    font-weight: 690 !important;
  }

  .seal-menu-trigger > em {
    display: block !important;
  }

  .app-header nav .nav-label-full {
    display: inline !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }

  .app-header nav .nav-label-short {
    display: none !important;
  }

  .app-header nav .verify-nav,
  .app-header nav .my-seals-nav {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
  }

  .app-header .access-terminal {
    grid-column: 3;
    grid-row: 1;
    min-width: 108px;
    min-height: 50px;
    padding: 4px;
    border-radius: 16px;
  }

  .app-header .access-terminal::before {
    left: 20px;
    width: 42px;
    height: 2px;
  }

  .app-header .wallet-connect {
    width: 46px !important;
    min-width: 46px !important;
    min-height: 42px !important;
  }

  .app-header .wallet-connect i {
    width: 30px !important;
    height: 30px !important;
  }

  .app-header .avatar {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
    border-radius: 12px !important;
  }

  .app-header .avatar.login-access {
    width: 42px !important;
    flex-basis: 42px !important;
    padding: 0 !important;
  }

  .app-header .avatar.login-access > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .header-seal-menu {
    top: var(--atm-header-height) !important;
    max-height: calc(100dvh - var(--atm-header-height)) !important;
  }
}

@media (max-width: 520px) {
  .app-header nav.core-navigation {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px !important;
  }

  .machine-primary-actions {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: 5px;
  }

  .machine-secondary-actions {
    gap: 2px;
  }

  .app-header nav .verify-nav,
  .app-header nav .my-seals-nav {
    width: 42px !important;
    min-width: 42px !important;
  }

  .seal-trigger-mark {
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px !important;
  }

  .app-header nav .exchange-nav > i {
    display: none !important;
  }

  .app-header nav .seal-menu-trigger,
  .app-header nav .exchange-nav {
    font-size: 11px !important;
  }
}

/* Seal Exchange live trench and artifact authority */
.exchange-surface-markets {
  min-height: calc(100dvh - var(--machine-header-h)) !important;
  padding-bottom: 0 !important;
}

.exchange-surface-markets .market-discovery {
  min-height: calc(100dvh - var(--machine-header-h)) !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  padding-bottom: 12px !important;
}

.exchange-surface-markets .market-board {
  min-height: 0 !important;
  height: 100% !important;
  align-items: stretch !important;
}

.exchange-surface-markets .market-trench {
  min-height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.exchange-surface-markets .market-trench-list {
  align-content: start !important;
}

.market-live-toggle {
  min-height: 56px;
  padding: 8px 15px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(184, 255, 37, .18);
  border-radius: 16px;
  background: rgba(184, 255, 37, .055);
  color: #f3f1e9;
  cursor: pointer;
  text-align: left;
}

.market-live-toggle > i {
  position: relative;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: #83908b;
}

.market-live-toggle > span,
.market-live-toggle b,
.market-live-toggle small {
  display: block;
}

.market-live-toggle b {
  font-size: 13px;
  font-weight: 700;
}

.market-live-toggle small {
  margin-top: 3px;
  color: #83908b;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.market-live-toggle[aria-pressed="true"] {
  border-color: rgba(184, 255, 37, .44);
  background: rgba(184, 255, 37, .11);
}

.market-live-toggle[aria-pressed="true"] > i {
  background: #b8ff25;
  box-shadow: 0 0 0 5px rgba(184, 255, 37, .1), 0 0 22px rgba(184, 255, 37, .48);
  animation: trench-live-pulse 1.5s ease-out infinite;
}

.is-live-simulation .market-row {
  transition: background .3s ease, border-color .3s ease;
}

.is-live-simulation .market-row-value b {
  color: #d8ff83;
}

@keyframes trench-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(184, 255, 37, .36), 0 0 22px rgba(184, 255, 37, .48); }
  100% { box-shadow: 0 0 0 9px rgba(184, 255, 37, 0), 0 0 22px rgba(184, 255, 37, .18); }
}

.exchange-surface-detail .market-detail-page {
  padding-top: 0 !important;
  padding-bottom: calc(126px + env(safe-area-inset-bottom)) !important;
}

.exchange-surface-detail .market-detail-header {
  min-height: clamp(430px, 54vh, 650px);
  padding: clamp(34px, 5vw, 70px) clamp(22px, 3vw, 54px) clamp(38px, 5vw, 72px) !important;
  align-items: end !important;
}

.market-detail-back {
  width: max-content;
  min-height: 46px;
  margin: 0 0 clamp(34px, 5vh, 60px);
  padding: 0 17px 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  color: #dfe7e3;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
}

.market-detail-back i {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(89, 220, 232, .1);
  color: var(--cyan);
  font-style: normal;
}

.exchange-surface-detail .market-detail-header h1 {
  width: min(100%, 1120px);
  max-width: 1120px !important;
  margin-top: 18px !important;
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(58px, 7.1vw, 112px) !important;
  line-height: .91 !important;
  letter-spacing: -.07em !important;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.market-detail-tabs,
.market-detail-mobile-action {
  display: none !important;
}

.detail-action-dock .dock-progress button {
  cursor: default;
}

@media (max-width: 1220px) {
  .exchange-surface-markets .market-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(250px, .75fr) auto !important;
  }

  .market-live-toggle {
    grid-row: 2;
    grid-column: 2;
  }

}

@media (max-width: 760px) {
  .exchange-surface-markets,
  .exchange-surface-markets .market-discovery {
    min-height: calc(100dvh - var(--machine-header-h)) !important;
  }

  .exchange-surface-markets .market-discovery {
    display: block !important;
    padding-bottom: 10px !important;
  }

  .exchange-surface-markets .market-board {
    height: auto !important;
    min-height: calc(100dvh - var(--machine-header-h) - 268px) !important;
  }

  .exchange-surface-markets .market-trench {
    min-height: calc(100dvh - var(--machine-header-h) - 282px) !important;
  }

  .market-live-toggle {
    width: 100%;
    min-height: 50px;
    grid-row: auto;
    grid-column: 1 / -1;
  }

  .exchange-surface-detail .market-detail-page {
    padding-bottom: calc(var(--mobile-transaction-dock) + 24px + env(safe-area-inset-bottom)) !important;
  }

  .exchange-surface-detail .market-detail-header {
    min-height: clamp(390px, 62vh, 540px);
    padding: 24px 18px 42px !important;
  }

  .market-detail-back {
    margin-bottom: 40px;
  }

  .exchange-surface-detail .market-detail-header h1 {
    font-size: clamp(48px, 14vw, 74px) !important;
    line-height: .94 !important;
    letter-spacing: -.065em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .market-live-toggle[aria-pressed="true"] > i {
    animation: none;
  }
}

/*
 * v113 first viewport authority.
 * The header participates in document flow, so the shell must not reserve a
 * second header above it. This block is intentionally last in the cascade.
 */
:root {
  --machine-header-h: 92px;
  --hero-pad-top: clamp(56px, 5.2vw, 88px);
  --hero-pad-bottom: clamp(94px, 8vw, 132px);
}

.app-shell:not(.app-loading),
.view-home.app-shell:not(.app-loading),
.view-exchange.app-shell:not(.app-loading) {
  padding-top: 0 !important;
}

.app-header,
.app-header.home-header,
.app-header.home-header.is-top,
.app-header.home-header.is-scrolled {
  position: sticky !important;
  inset: 0 0 auto !important;
  height: var(--machine-header-h) !important;
  min-height: var(--machine-header-h) !important;
  padding-inline: max(32px, calc((100vw - 1880px) / 2)) !important;
  grid-template-columns: minmax(252px, 292px) minmax(0, 1fr) auto !important;
  gap: clamp(28px, 2.5vw, 52px) !important;
  background:
    radial-gradient(circle at 18% -130%, rgba(89, 220, 232, .09), transparent 42%),
    rgba(5, 15, 15, .985) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .14) !important;
}

.app-header .brand {
  height: 64px !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  gap: 16px !important;
}

.app-header .brand-mark {
  width: 50px !important;
  min-width: 50px !important;
  height: 62px !important;
}

.app-header .brand-lockup {
  gap: 6px !important;
}

.app-header .brand-lockup b {
  font-size: 14px !important;
  letter-spacing: .18em !important;
}

.app-header .brand-lockup small {
  font-size: 9px !important;
  letter-spacing: .23em !important;
}

.app-header .core-navigation {
  height: 60px !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: clamp(18px, 2vw, 38px) !important;
}

.machine-primary-actions {
  flex: 0 1 552px !important;
  width: min(100%, 552px) !important;
  height: 60px !important;
  grid-template-columns: minmax(286px, 1.22fr) minmax(190px, .78fr) !important;
  padding: 5px !important;
  border-radius: 20px !important;
}

.machine-primary-actions .seal-menu-control,
.app-header nav .seal-menu-trigger,
.app-header nav .exchange-nav {
  height: 50px !important;
  min-height: 50px !important;
}

.app-header nav .seal-menu-trigger,
.app-header nav .exchange-nav {
  padding-inline: 16px !important;
  gap: 11px !important;
  border-radius: 15px !important;
  font-size: 13px !important;
}

.app-header nav .seal-menu-trigger .seal-trigger-mark,
.app-header nav .exchange-nav > i {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
}

.app-header nav .seal-menu-trigger .seal-trigger-mark svg,
.app-header nav .exchange-nav > i svg {
  width: 20px !important;
  height: 20px !important;
}

.machine-secondary-actions {
  flex: 0 0 auto !important;
  height: 50px !important;
  gap: 8px !important;
}

.app-header nav .verify-nav,
.app-header nav .my-seals-nav {
  height: 46px !important;
  padding-inline: 12px !important;
  font-size: 12.5px !important;
}

.app-header .access-terminal {
  height: 60px !important;
  grid-template-columns: auto auto 52px !important;
  gap: 5px !important;
  padding: 5px !important;
  border-radius: 20px !important;
}

.header-greeting {
  min-width: 126px !important;
  padding: 0 14px !important;
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  color: var(--machine-control-text) !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.header-greeting small {
  color: var(--machine-control-muted) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}

.header-greeting b {
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
}

.app-header .wallet-connect {
  min-width: 52px !important;
  width: auto !important;
  height: 50px !important;
  min-height: 50px !important;
  padding-inline: 14px !important;
  border-radius: 15px !important;
}

.app-header .wallet-connect.icon-only {
  width: 52px !important;
  padding: 0 !important;
}

.app-header .avatar {
  width: 52px !important;
  min-width: 52px !important;
  height: 50px !important;
  min-height: 50px !important;
  border-radius: 15px !important;
}

.header-seal-menu {
  top: var(--machine-header-h) !important;
}

.view-home .landing-hero > .landing-wrap {
  padding-top: var(--hero-pad-top) !important;
}

.view-home .landing-hero h1 {
  margin-top: clamp(14px, 1.2vw, 20px) !important;
}

@media (max-width: 1660px) {
  .header-greeting {
    display: none !important;
  }

  .app-header .access-terminal {
    grid-template-columns: auto 50px !important;
  }

  .app-header {
    grid-template-columns: minmax(236px, 270px) minmax(0, 1fr) auto !important;
    gap: 24px !important;
  }
}

@media (max-width: 1280px) {
  :root {
    --machine-header-h: 84px;
  }

  .app-header {
    grid-template-columns: 50px minmax(0, 1fr) auto !important;
    padding-inline: 18px !important;
  }

  .app-header .brand {
    grid-template-columns: 46px !important;
  }

  .app-header .brand-lockup {
    display: none !important;
  }

  .app-header .brand-mark {
    width: 46px !important;
    min-width: 46px !important;
    height: 56px !important;
  }

  .machine-primary-actions {
    flex-basis: 490px !important;
    grid-template-columns: minmax(254px, 1.2fr) minmax(170px, .8fr) !important;
  }
}

@media (max-width: 980px) {
  :root {
    --machine-header-h: 112px;
    --hero-pad-top: 48px;
  }

  .app-header {
    height: var(--machine-header-h) !important;
    min-height: var(--machine-header-h) !important;
    padding: 8px 12px !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    grid-template-rows: 46px 46px !important;
    gap: 4px 8px !important;
  }

  .app-header .core-navigation {
    height: 46px !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  .machine-primary-actions {
    width: 100% !important;
    height: 46px !important;
    grid-template-columns: minmax(165px, 1.12fr) minmax(118px, .88fr) !important;
    padding: 3px !important;
  }

  .machine-primary-actions .seal-menu-control,
  .app-header nav .seal-menu-trigger,
  .app-header nav .exchange-nav {
    height: 40px !important;
    min-height: 40px !important;
  }

  .app-header .access-terminal {
    height: 46px !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    grid-template-columns: auto 38px !important;
    padding: 3px !important;
  }

  .app-header .wallet-connect {
    height: 40px !important;
    min-height: 40px !important;
  }

  .app-header .avatar {
    width: 38px !important;
    min-width: 38px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* v111 header wallet is a symbolic card slot until an address exists. */
.app-header .access-terminal:has(.wallet-connect.icon-only) {
  grid-template-columns: 46px 46px !important;
}

.app-header .wallet-connect.icon-only {
  width: 46px !important;
  min-width: 46px !important;
  padding: 0 !important;
}

@media (max-width: 980px) {
  .app-header .access-terminal:has(.wallet-connect.icon-only) {
    grid-template-columns: 40px 38px !important;
  }

  .app-header .wallet-connect.icon-only {
    width: 40px !important;
    min-width: 40px !important;
  }
}

@media (max-width: 760px) {
  .app-header .access-terminal:has(.wallet-connect.icon-only) {
    grid-template-columns: 37px 36px !important;
  }

  .app-header .wallet-connect.icon-only {
    width: 37px !important;
    min-width: 37px !important;
  }
}

/*
 * Seal Support amount instrument
 * This light financial surface owns its contrast and cannot inherit dark-panel controls.
 */
.view-exchange .swap-leg {
  padding: clamp(24px, 2.5vw, 38px) !important;
}

.view-exchange .swap-leg-top {
  margin-bottom: 18px;
  align-items: center;
  font-size: 14px;
}

.view-exchange .swap-leg-top label,
.view-exchange .swap-leg-top > span:first-child {
  font-size: 15px;
  font-weight: 720;
}

.view-exchange .support-value {
  grid-template-columns: minmax(0, 1fr) minmax(218px, 248px);
  gap: 14px !important;
  align-items: stretch;
}

.view-exchange .support-amount-field {
  min-width: 0;
  min-height: 142px;
  padding: 17px 24px 16px;
  display: grid;
  grid-template-rows: auto minmax(62px, 1fr) auto;
  align-items: center;
  border-radius: 22px;
  background: #e3e3dc;
  color: #07100f;
  box-shadow: 0 18px 50px rgba(12, 22, 21, .09);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.view-exchange .support-amount-field:focus-within {
  background: #ebeae3;
  box-shadow: 0 22px 60px rgba(12, 22, 21, .13), 0 0 34px rgba(89, 220, 232, .13);
  transform: translateY(-1px);
}

.view-exchange .support-amount-field > span,
.view-exchange .support-amount-field > small {
  color: #66716d;
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.view-exchange .support-amount-field > small {
  justify-self: end;
  letter-spacing: .08em;
}

.view-exchange .support-amount-field input {
  width: 100%;
  min-width: 0;
  min-height: 70px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #07100f !important;
  caret-color: #0a9aa5;
  box-shadow: none !important;
  font-family: var(--sans);
  font-size: clamp(58px, 5vw, 82px) !important;
  font-weight: 510 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.075em !important;
  line-height: .92;
}

.view-exchange .support-amount-field input::placeholder {
  color: rgba(7, 16, 15, .28) !important;
  opacity: 1;
}

.view-exchange .support-amount-field input:focus-visible {
  outline: 0 !important;
}

.view-exchange .support-value .asset-picker {
  min-width: 0;
  min-height: 142px;
  padding: 20px 48px 20px 18px;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 15px;
  border-radius: 22px;
  background: #d9d8d2;
  color: #07100f;
  box-shadow: 0 18px 50px rgba(12, 22, 21, .08);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.view-exchange .support-value .asset-picker:hover,
.view-exchange .support-value .asset-picker:focus-within {
  background: #e3e2dc;
  box-shadow: 0 22px 58px rgba(12, 22, 21, .12);
  transform: translateY(-1px);
}

.view-exchange .support-value .asset-symbol {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  font-size: 32px;
}

.view-exchange .support-value .asset-picker b {
  font-size: 24px;
  font-weight: 720;
  letter-spacing: -.025em;
}

.view-exchange .support-value .asset-picker small {
  margin-top: 5px;
  font-size: 13px;
}

.view-exchange .support-value .asset-picker > i {
  right: 20px;
  font-size: 17px;
}

.view-exchange .amount-presets {
  margin-top: 18px;
  display: grid;
  grid-template-columns: auto repeat(4, minmax(82px, 112px));
  align-items: center;
  gap: 9px;
}

.view-exchange .amount-presets > span {
  margin-right: 4px;
  color: #66716d;
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.view-exchange .amount-presets button {
  min-width: 0;
  min-height: 50px;
  padding: 0 14px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0 !important;
  border-radius: 14px !important;
  outline: 0 !important;
  background: rgba(7, 16, 15, .075) !important;
  color: #07100f !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-variant-numeric: tabular-nums;
  font-weight: 720 !important;
}

.view-exchange .amount-presets button:hover {
  background: rgba(7, 16, 15, .12) !important;
  transform: translateY(-1px);
}

.view-exchange .amount-presets button.active {
  background: var(--state-ready) !important;
  color: #07100f !important;
  box-shadow: 0 12px 28px rgba(150, 200, 33, .2) !important;
}

.view-exchange .amount-presets button:focus-visible {
  outline: 0 !important;
  box-shadow: 0 0 0 5px rgba(89, 220, 232, .16) !important;
}

.view-exchange .amount-presets button small {
  color: #66716d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.view-exchange .amount-presets button.active small {
  color: rgba(7, 16, 15, .62);
}

@media (max-width: 760px) {
  .view-exchange .swap-leg-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .view-exchange .support-value {
    grid-template-columns: 1fr;
  }

  .view-exchange .support-amount-field {
    min-height: 128px;
  }

  .view-exchange .support-amount-field input {
    font-size: clamp(52px, 16vw, 72px) !important;
  }

  .view-exchange .support-value .asset-picker {
    min-height: 82px;
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .view-exchange .support-value .asset-symbol {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    font-size: 27px;
  }

  .view-exchange .amount-presets {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .view-exchange .amount-presets > span {
    grid-column: 1 / -1;
    margin: 0 0 2px;
  }

  .view-exchange .amount-presets button {
    padding: 0 10px !important;
  }

  .view-exchange .amount-presets button small {
    display: none;
  }
}

@media (max-width: 440px) {
  .view-exchange .swap-leg {
    padding: 16px !important;
  }

  .view-exchange .support-amount-field {
    min-height: 118px;
    padding: 15px 18px;
    border-radius: 18px;
  }

  .view-exchange .support-value .asset-picker {
    border-radius: 18px;
  }

  .view-exchange .amount-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * ATM navigation controls
 * Core actions read as one quiet instrument panel, not raised web buttons.
 */
.app-header nav .seal-menu-trigger,
.app-header nav .exchange-nav {
  height: 54px !important;
  min-height: 54px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: rgba(243, 247, 244, .055) !important;
  color: rgba(247, 248, 244, .92) !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 14px !important;
  font-weight: 640 !important;
  letter-spacing: .015em !important;
  white-space: nowrap !important;
}

.app-header nav .seal-menu-trigger::after,
.app-header nav .exchange-nav::after {
  display: none !important;
}

.app-header nav .seal-menu-trigger {
  width: clamp(228px, 16vw, 268px) !important;
  min-width: clamp(228px, 16vw, 268px) !important;
  max-width: clamp(228px, 16vw, 268px) !important;
  padding: 0 17px !important;
}

.app-header nav .exchange-nav {
  min-width: 174px !important;
  padding: 0 18px !important;
}

.app-header nav .seal-menu-trigger .seal-trigger-mark {
  width: 25px !important;
  height: 25px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(226, 233, 230, .82) !important;
}

.app-header nav .seal-menu-trigger .seal-trigger-mark svg {
  width: 21px !important;
  height: 21px !important;
  stroke-width: 1.45 !important;
}

.app-header nav .seal-menu-trigger:hover,
.app-header nav .seal-menu-trigger:focus-visible,
.app-header nav .exchange-nav:hover,
.app-header nav .exchange-nav:focus-visible {
  background: rgba(243, 247, 244, .09) !important;
  color: #fff !important;
  box-shadow: 0 0 0 5px rgba(89, 220, 232, .08) !important;
  transform: none !important;
}

.app-header nav .seal-menu-trigger.active,
.app-header nav .exchange-nav.active {
  background: rgba(89, 220, 232, .115) !important;
  color: #f7faf7 !important;
  box-shadow: none !important;
}

.app-header nav .exchange-nav > i {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(89, 220, 232, .82) !important;
}

.app-header nav .seal-menu-trigger > em {
  margin-left: auto;
  color: rgba(230, 237, 234, .52) !important;
}

@media (max-width: 980px) {
  .app-header nav .seal-menu-trigger,
  .app-header nav .exchange-nav {
    height: 52px !important;
    min-height: 52px !important;
  }

  .app-header nav .seal-menu-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .app-header nav .exchange-nav {
    min-width: 0 !important;
  }
}

/*
 * Machine console and seal portfolio
 * One integrated operating surface, two core actions, one account entrance.
 */
.app-header {
  min-height: 88px !important;
  padding: 0 clamp(24px, 3vw, 64px) !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: clamp(22px, 2.5vw, 52px) !important;
}

.app-header .core-navigation {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(420px, 540px) minmax(210px, auto) !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(18px, 2vw, 38px) !important;
}

.machine-primary-actions {
  width: 100% !important;
  height: 64px !important;
  padding: 6px !important;
  display: grid !important;
  grid-template-columns: minmax(232px, 1.16fr) minmax(176px, .84fr) !important;
  gap: 5px !important;
  align-items: stretch !important;
  border: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(89, 220, 232, .09), transparent 42%),
    linear-gradient(135deg, rgba(24, 39, 39, .98), rgba(12, 24, 25, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 22px 54px rgba(0, 0, 0, .22) !important;
}

.machine-primary-actions .seal-menu-control {
  width: 100% !important;
  height: 52px !important;
  min-width: 0 !important;
}

.app-header nav .seal-menu-trigger,
.app-header nav .exchange-nav {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 17px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  border: 0 !important;
  border-radius: 17px !important;
  background: transparent !important;
  color: rgba(247, 248, 244, .86) !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 14px !important;
  font-weight: 690 !important;
  letter-spacing: .035em !important;
  white-space: nowrap !important;
}

.app-header nav .seal-menu-trigger:hover,
.app-header nav .exchange-nav:hover,
.app-header nav .seal-menu-trigger:focus-visible,
.app-header nav .exchange-nav:focus-visible {
  background: rgba(239, 246, 243, .065) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.app-header nav .seal-menu-trigger.active,
.app-header nav .exchange-nav.active {
  background:
    linear-gradient(130deg, rgba(89, 220, 232, .14), rgba(61, 85, 224, .075)) !important;
  color: #fff !important;
}

.app-header nav .seal-menu-trigger::after,
.app-header nav .exchange-nav::after {
  display: none !important;
}

.app-header nav .seal-menu-trigger .seal-trigger-mark,
.app-header nav .exchange-nav > i {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(212, 224, 221, .72) !important;
}

.app-header nav .seal-menu-trigger .seal-trigger-mark svg,
.app-header nav .exchange-nav > i svg {
  width: 21px !important;
  height: 21px !important;
  stroke: currentColor !important;
  stroke-width: 1.55 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.app-header nav .seal-menu-trigger > em {
  margin-left: auto !important;
  padding-left: 5px !important;
  color: rgba(235, 241, 238, .42) !important;
  font-style: normal !important;
}

.machine-secondary-actions {
  min-width: 0 !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(16px, 1.8vw, 30px) !important;
}

.app-header nav .verify-nav,
.app-header nav .my-seals-nav {
  width: auto !important;
  min-width: 0 !important;
  height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(233, 239, 236, .62) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 610 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
}

.app-header nav .verify-nav:hover,
.app-header nav .my-seals-nav:hover,
.app-header nav .verify-nav:focus-visible,
.app-header nav .my-seals-nav:focus-visible,
.app-header nav .verify-nav.active,
.app-header nav .my-seals-nav.active {
  color: #59dce8 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.app-header nav .verify-nav::after,
.app-header nav .my-seals-nav::after {
  display: none !important;
}

.app-header nav .verify-nav > i,
.app-header nav .my-seals-nav > i {
  width: 19px !important;
  height: 19px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: currentColor !important;
}

.app-header nav .my-seals-nav > i svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 1.55 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.app-header .access-terminal {
  height: 64px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: auto 52px !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-header .wallet-connect {
  position: relative !important;
  min-width: 166px !important;
  height: 56px !important;
  padding: 0 20px 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background:
    linear-gradient(140deg, rgba(26, 41, 42, .98), rgba(14, 25, 26, .98)) !important;
  color: rgba(249, 250, 247, .92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 20px 42px rgba(0, 0, 0, .18) !important;
  font-size: 13px !important;
  font-weight: 660 !important;
  white-space: nowrap !important;
}

.app-header .wallet-connect::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 16px !important;
  width: 3px !important;
  height: 24px !important;
  border-radius: 3px 0 0 3px !important;
  background: linear-gradient(#59dce8, #3554df) !important;
  opacity: .72 !important;
}

.app-header .wallet-connect:hover,
.app-header .wallet-connect:focus-visible {
  background:
    linear-gradient(140deg, rgba(31, 50, 50, 1), rgba(15, 30, 30, 1)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .065),
    0 24px 50px rgba(0, 0, 0, .24) !important;
}

.app-header .avatar {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 17px !important;
  overflow: hidden !important;
  background: #101b22 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .22) !important;
}

.app-header .avatar img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

.library-screen {
  max-width: 1540px !important;
  padding-bottom: 120px !important;
}

.library-heading {
  margin-bottom: 28px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 40px !important;
}

.library-heading h1 {
  font-size: clamp(66px, 7vw, 112px) !important;
  line-height: .86 !important;
  letter-spacing: -.065em !important;
}

.library-heading p {
  max-width: 760px !important;
  margin-top: 24px !important;
}

.library-actions {
  min-width: 420px !important;
  height: 58px !important;
  padding: 5px !important;
  display: grid !important;
  grid-template-columns: .78fr 1.25fr .88fr !important;
  gap: 4px !important;
  border-radius: 20px !important;
  background: rgba(238, 246, 242, .055) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035) !important;
}

.library-actions .button {
  min-width: 0 !important;
  height: 48px !important;
  padding: 0 14px !important;
  justify-content: space-between !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(238, 244, 241, .68) !important;
  font-size: 13px !important;
  font-weight: 640 !important;
  white-space: nowrap !important;
}

.library-actions .button:hover,
.library-actions .button:focus-visible {
  color: #fff !important;
  background: rgba(255, 255, 255, .055) !important;
}

.library-actions .button.primary {
  color: #081311 !important;
  background: #c7ff31 !important;
}

.portfolio-summary {
  margin: 0 0 18px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.portfolio-summary article {
  min-height: 126px !important;
  padding: 24px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(89, 220, 232, .07), transparent 46%),
    rgba(239, 246, 243, .04) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025) !important;
}

.portfolio-summary article span,
.portfolio-summary article small {
  color: rgba(222, 232, 228, .52) !important;
}

.portfolio-summary article strong {
  margin: 8px 0 !important;
  font-size: 32px !important;
  line-height: 1 !important;
}

.library-tools {
  min-height: 70px !important;
  margin: 0 0 20px !important;
  padding: 8px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px) !important;
  align-items: center !important;
  gap: 12px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: rgba(237, 244, 241, .045) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025) !important;
}

.library-tools .filters {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.library-tools .filters::-webkit-scrollbar {
  display: none !important;
}

.library-tools .filters button {
  min-width: max-content !important;
  height: 50px !important;
  padding: 0 17px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(224, 233, 230, .55) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.library-tools .filters button.active {
  color: #f8faf7 !important;
  background: rgba(89, 220, 232, .1) !important;
}

.library-tools .search {
  min-width: 0 !important;
  height: 54px !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border: 0 !important;
  border-radius: 17px !important;
  background: #f4f1e9 !important;
  color: #0a1718 !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .14) !important;
}

.library-tools .search input {
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #0a1718 !important;
  font-size: 14px !important;
}

.seal-portfolio-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.seal-portfolio-card {
  --seal-accent: #59dce8;
  position: relative !important;
  min-width: 0 !important;
  min-height: 326px !important;
  padding: 28px !important;
  display: grid !important;
  grid-template-rows: auto minmax(110px, 1fr) auto auto !important;
  gap: 20px !important;
  overflow: hidden !important;
  text-align: left !important;
  border: 0 !important;
  border-radius: 30px !important;
  color: #f5f7f3 !important;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--seal-accent) 17%, transparent), transparent 43%),
    linear-gradient(145deg, rgba(22, 36, 37, .98), rgba(9, 18, 20, .99)) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .035),
    0 28px 64px rgba(0, 0, 0, .18) !important;
  transform: translateY(0) !important;
  transition: transform 240ms ease, box-shadow 240ms ease, background 240ms ease !important;
}

.seal-portfolio-card.kind-swap { --seal-accent: #6b8dff; }
.seal-portfolio-card.kind-work { --seal-accent: #59dce8; }
.seal-portfolio-card.kind-cause { --seal-accent: #f5a84b; }
.seal-portfolio-card.kind-community { --seal-accent: #84e5c5; }
.seal-portfolio-card.kind-token { --seal-accent: #c7ff31; }

.seal-portfolio-card:hover,
.seal-portfolio-card:focus-visible {
  transform: translateY(-4px) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .05),
    0 38px 86px rgba(0, 0, 0, .3) !important;
}

.seal-portfolio-card.just-sealed {
  background:
    radial-gradient(circle at 100% 0%, rgba(199, 255, 49, .16), transparent 43%),
    linear-gradient(145deg, rgba(23, 39, 37, .99), rgba(8, 20, 19, .99)) !important;
}

.seal-portfolio-card > header,
.seal-portfolio-card > footer {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.portfolio-card-kind {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.portfolio-card-kind > i {
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 15px !important;
  background: color-mix(in srgb, var(--seal-accent) 11%, transparent) !important;
  color: var(--seal-accent) !important;
}

.portfolio-card-kind > i svg {
  width: 25px !important;
  height: 25px !important;
}

.portfolio-card-kind > small,
.portfolio-record-state {
  color: rgba(230, 239, 235, .58) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.portfolio-record-state {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
}

.portfolio-card-watermark {
  position: absolute !important;
  right: -48px !important;
  top: 24px !important;
  width: 250px !important;
  height: 250px !important;
  color: var(--seal-accent) !important;
  opacity: .035 !important;
  transform: rotate(8deg) !important;
  pointer-events: none !important;
}

.portfolio-card-identity {
  position: relative !important;
  z-index: 2 !important;
  align-self: end !important;
}

.portfolio-card-identity .just-sealed-tag {
  width: max-content !important;
  margin: 0 0 10px !important;
  padding: 7px 10px !important;
  display: block !important;
  border-radius: 10px !important;
  background: #c7ff31 !important;
  color: #0a1715 !important;
  font-size: 10px !important;
  font-weight: 760 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.portfolio-card-identity h2 {
  max-width: 84% !important;
  margin: 0 !important;
  color: #f7f7f2 !important;
  font-size: clamp(27px, 2.3vw, 38px) !important;
  font-weight: 610 !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
}

.portfolio-card-identity p {
  max-width: 76% !important;
  margin: 9px 0 13px !important;
  color: rgba(222, 232, 228, .57) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.portfolio-card-identity code {
  color: var(--seal-accent) !important;
  font-size: 12px !important;
  letter-spacing: .075em !important;
}

.portfolio-card-metrics {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: .9fr 1fr 1.15fr !important;
  gap: 8px !important;
}

.portfolio-card-metrics > span {
  min-width: 0 !important;
  min-height: 82px !important;
  padding: 14px !important;
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  border-radius: 16px !important;
  background: rgba(246, 250, 247, .045) !important;
}

.portfolio-card-metrics small {
  color: rgba(222, 232, 228, .46) !important;
  font-size: 9px !important;
  font-weight: 650 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.portfolio-card-metrics b {
  overflow: hidden !important;
  color: #f5f7f3 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.portfolio-card-metrics b.tier-seed { color: #c7ff31 !important; }
.portfolio-card-metrics b.tier-bloom { color: #59dce8 !important; }
.portfolio-card-metrics b.tier-root { color: #a886ff !important; }

.portfolio-card-metrics em {
  overflow: hidden !important;
  color: rgba(222, 232, 228, .48) !important;
  font-size: 11px !important;
  font-style: normal !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.seal-portfolio-card > footer {
  padding-top: 2px !important;
  color: rgba(222, 232, 228, .52) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
}

.seal-portfolio-card > footer strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #f8faf7 !important;
  font-size: 12px !important;
  font-weight: 660 !important;
}

.seal-portfolio-card > footer svg {
  width: 17px !important;
  height: 17px !important;
  stroke: var(--seal-accent) !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.seal-portfolio-grid .empty-state {
  grid-column: 1 / -1 !important;
  min-height: 320px !important;
  border: 0 !important;
  border-radius: 30px !important;
  background: rgba(239, 246, 243, .04) !important;
}

@media (max-width: 1360px) {
  .app-header {
    gap: 24px !important;
  }

  .app-header .core-navigation {
    grid-template-columns: minmax(390px, 470px) minmax(180px, auto) !important;
  }

  .machine-secondary-actions {
    gap: 16px !important;
  }

  .app-header nav .verify-nav > i,
  .app-header nav .my-seals-nav > i {
    display: none !important;
  }

  .app-header .wallet-connect {
    min-width: 150px !important;
  }
}

@media (max-width: 1120px) {
  .app-header {
    min-height: 132px !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: 68px 64px !important;
    align-items: center !important;
  }

  .app-header .brand {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
  }

  .app-header .access-terminal {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  .app-header .core-navigation {
    grid-column: 1 / 4 !important;
    grid-row: 2 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .machine-primary-actions {
    max-width: 560px !important;
  }

  .library-heading {
    grid-template-columns: 1fr !important;
  }

  .library-actions {
    width: min(100%, 500px) !important;
  }

  .seal-portfolio-grid {
    grid-template-columns: 1fr !important;
  }

  .seal-portfolio-card {
    min-height: 312px !important;
  }
}

@media (max-width: 760px) {
  .app-header {
    min-height: 126px !important;
    padding: 0 14px !important;
    grid-template-rows: 64px 62px !important;
    gap: 0 !important;
  }

  .app-header .brand-lockup {
    display: none !important;
  }

  .app-header .access-terminal {
    height: 54px !important;
    grid-template-columns: auto 46px !important;
  }

  .app-header .wallet-connect {
    min-width: 0 !important;
    width: 52px !important;
    height: 48px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .app-header .wallet-connect span {
    display: none !important;
  }

  .app-header .wallet-connect::after {
    top: 13px !important;
    height: 22px !important;
  }

  .app-header .avatar {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
  }

  .app-header .core-navigation {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  .machine-primary-actions {
    max-width: none !important;
    height: 56px !important;
    padding: 4px !important;
    grid-template-columns: minmax(146px, 1.08fr) minmax(120px, .92fr) !important;
    border-radius: 18px !important;
  }

  .machine-primary-actions .seal-menu-control,
  .app-header nav .seal-menu-trigger,
  .app-header nav .exchange-nav {
    height: 48px !important;
    min-height: 48px !important;
  }

  .app-header nav .seal-menu-trigger,
  .app-header nav .exchange-nav {
    padding: 0 12px !important;
    gap: 8px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
  }

  .app-header nav .seal-menu-trigger .seal-trigger-mark,
  .app-header nav .exchange-nav > i {
    width: 20px !important;
    min-width: 20px !important;
  }

  .machine-secondary-actions {
    gap: 10px !important;
  }

  .app-header nav .verify-nav,
  .app-header nav .my-seals-nav {
    width: 40px !important;
    height: 40px !important;
    justify-content: center !important;
  }

  .app-header nav .verify-nav > i,
  .app-header nav .my-seals-nav > i {
    display: grid !important;
  }

  .app-header nav .verify-nav > span,
  .app-header nav .my-seals-nav > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
  }

  .library-screen {
    padding: 42px 14px 112px !important;
  }

  .library-heading h1 {
    font-size: clamp(60px, 19vw, 82px) !important;
  }

  .library-actions {
    min-width: 0 !important;
    width: 100% !important;
    grid-template-columns: .8fr 1.25fr .9fr !important;
  }

  .library-actions .button {
    padding: 0 10px !important;
    font-size: 11px !important;
  }

  .portfolio-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .portfolio-summary article {
    min-height: 116px !important;
    padding: 19px !important;
  }

  .library-tools {
    grid-template-columns: 1fr !important;
    padding: 7px !important;
  }

  .library-tools .search {
    grid-row: 1 !important;
  }

  .seal-portfolio-grid {
    gap: 13px !important;
  }

  .seal-portfolio-card {
    min-height: 338px !important;
    padding: 22px !important;
    border-radius: 24px !important;
    gap: 17px !important;
  }

  .portfolio-card-identity h2 {
    max-width: 100% !important;
    font-size: clamp(27px, 8.5vw, 36px) !important;
  }

  .portfolio-card-identity p {
    max-width: 92% !important;
  }

  .portfolio-card-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .portfolio-card-metrics > span:last-child {
    grid-column: 1 / -1 !important;
    min-height: 68px !important;
  }
}

@media (max-width: 460px) {
  .app-header nav .seal-menu-trigger .seal-trigger-desktop,
  .app-header nav .exchange-nav .nav-label-full {
    display: none !important;
  }

  .app-header nav .seal-menu-trigger .seal-trigger-mobile,
  .app-header nav .exchange-nav .nav-label-short {
    display: inline !important;
  }

  .machine-primary-actions {
    grid-template-columns: minmax(124px, 1fr) minmax(104px, .82fr) !important;
  }

  .portfolio-summary {
    gap: 6px !important;
  }

  .portfolio-summary article {
    padding: 16px !important;
  }

  .portfolio-card-kind > small {
    max-width: 142px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .portfolio-record-state {
    font-size: 9px !important;
  }
}

/*
 * Sealed Energy input system
 * This is the final form authority. Every input is a deliberate instrument:
 * dark fields for private data, paper fields for declared documents, and
 * large numeric fields for financial value.
 */
:root {
  --input-dark: rgba(238, 244, 241, .072);
  --input-dark-hover: rgba(238, 244, 241, .105);
  --input-dark-text: #f1f5f2;
  --input-dark-placeholder: rgba(215, 227, 222, .48);
  --input-paper: rgba(7, 27, 36, .055);
  --input-paper-hover: rgba(7, 27, 36, .085);
  --input-paper-text: #071b2c;
  --input-paper-placeholder: rgba(7, 27, 44, .42);
  --input-focus: rgba(89, 220, 232, .16);
  --input-invalid: rgba(255, 123, 103, .13);
  --input-valid: rgba(199, 255, 49, .1);
  --input-radius: 18px;
}

/* Private terminal fields */
.app-shell :is(
  .field > input,
  .field > textarea,
  .field > select,
  .settings-card select,
  .storage-select select,
  .licence-settings input,
  .licence-settings select,
  .market-story-fields input,
  .market-story-fields textarea,
  .market-story-fields select,
  .genesis-fields label > input:not([type="range"]):not([type="file"]),
  .genesis-fields label > textarea,
  .genesis-fields label > select
) {
  width: 100% !important;
  min-height: 64px !important;
  margin-top: 9px !important;
  padding: 0 19px !important;
  border: 0 !important;
  border-radius: var(--input-radius) !important;
  outline: 0 !important;
  appearance: none;
  background-color: var(--input-dark) !important;
  color: var(--input-dark-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  font-family: inherit !important;
  font-size: 17px !important;
  font-weight: 480 !important;
  line-height: 1.35 !important;
  letter-spacing: -.012em !important;
  text-transform: none !important;
  caret-color: var(--state-info);
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease !important;
}

.app-shell :is(
  .field > textarea,
  .market-story-fields textarea,
  .genesis-fields label > textarea
) {
  min-height: 148px !important;
  padding-block: 17px !important;
  resize: vertical;
}

.app-shell :is(
  .field > select,
  .settings-card select,
  .storage-select select,
  .licence-settings select,
  .market-story-fields select,
  .genesis-fields label > select
) {
  padding-right: 48px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(225, 234, 230, .7) 50%),
    linear-gradient(135deg, rgba(225, 234, 230, .7) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 22px) calc(50% - 2px),
    calc(100% - 16px) calc(50% - 2px) !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
}

.app-shell :is(
  .field > input,
  .field > textarea,
  .field > select,
  .settings-card select,
  .storage-select select,
  .licence-settings input,
  .licence-settings select,
  .market-story-fields input,
  .market-story-fields textarea,
  .market-story-fields select,
  .genesis-fields label > input:not([type="range"]):not([type="file"]),
  .genesis-fields label > textarea,
  .genesis-fields label > select
):hover {
  background-color: var(--input-dark-hover) !important;
}

.app-shell :is(
  .field > input,
  .field > textarea,
  .field > select,
  .settings-card select,
  .storage-select select,
  .licence-settings input,
  .licence-settings select,
  .market-story-fields input,
  .market-story-fields textarea,
  .market-story-fields select,
  .genesis-fields label > input:not([type="range"]):not([type="file"]),
  .genesis-fields label > textarea,
  .genesis-fields label > select
):focus,
.app-shell :is(
  .field > input,
  .field > textarea,
  .field > select,
  .settings-card select,
  .storage-select select,
  .licence-settings input,
  .licence-settings select,
  .market-story-fields input,
  .market-story-fields textarea,
  .market-story-fields select,
  .genesis-fields label > input:not([type="range"]):not([type="file"]),
  .genesis-fields label > textarea,
  .genesis-fields label > select
):focus-visible {
  outline: 0 !important;
  background-color: rgba(89, 220, 232, .105) !important;
  box-shadow: 0 0 0 7px var(--input-focus), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}

.app-shell :is(
  .field > input,
  .field > textarea,
  .licence-settings input,
  .market-story-fields input,
  .market-story-fields textarea,
  .genesis-fields label > input:not([type="range"]):not([type="file"]),
  .genesis-fields label > textarea
)::placeholder {
  color: var(--input-dark-placeholder) !important;
  opacity: 1 !important;
}

/* Search is a dark command field, never a floating white Bootstrap box. */
.app-shell :is(.search, .market-search, .verify-field > div) {
  width: 100%;
  min-height: 62px !important;
  padding: 7px 9px 7px 12px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 5px !important;
  border: 0 !important;
  border-radius: 19px !important;
  outline: 0 !important;
  background: rgba(236, 243, 240, .075) !important;
  color: var(--input-dark-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.app-shell :is(.search, .market-search, .verify-field > div):focus-within {
  outline: 0 !important;
  background: rgba(89, 220, 232, .105) !important;
  box-shadow: 0 0 0 7px var(--input-focus), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

.app-shell :is(.search, .market-search) .input-search-icon,
.app-shell .verify-input-icon {
  position: relative !important;
  width: 42px !important;
  height: 42px !important;
  display: block !important;
  border-radius: 13px !important;
  background: rgba(89, 220, 232, .09) !important;
  color: var(--state-info) !important;
}

.app-shell :is(.search, .market-search) .input-search-icon::before,
.app-shell .verify-input-icon::before {
  content: "" !important;
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  width: 11px !important;
  height: 11px !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
}

.app-shell :is(.search, .market-search) .input-search-icon::after,
.app-shell .verify-input-icon::after {
  content: "" !important;
  position: absolute !important;
  top: 25px !important;
  left: 25px !important;
  width: 8px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: currentColor !important;
  transform: rotate(45deg) !important;
  transform-origin: left center !important;
}

.app-shell :is(.search, .market-search, .verify-field) input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--input-dark-text) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 17px !important;
  font-weight: 520 !important;
  letter-spacing: -.012em !important;
  text-transform: none !important;
  caret-color: var(--state-info);
}

.app-shell :is(.search, .market-search, .verify-field) input::placeholder {
  color: var(--input-dark-placeholder) !important;
  opacity: 1 !important;
}

.library-tools .search {
  height: 62px !important;
  padding: 7px 9px 7px 12px !important;
  background: rgba(236, 243, 240, .075) !important;
  color: var(--input-dark-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.library-tools .search input {
  color: var(--input-dark-text) !important;
  font-size: 17px !important;
}

/* Paper document fields */
.spl-invoice :is(.invoice-field input, .commitment-class-control select) {
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 12px !important;
  outline: 0 !important;
  background-color: var(--input-paper) !important;
  color: var(--input-paper-text) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 570 !important;
  line-height: 1.25 !important;
  caret-color: var(--signal-teal);
  transition: background-color .2s ease, box-shadow .2s ease !important;
}

.spl-invoice .commitment-class-control select {
  padding-right: 36px !important;
  appearance: none !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(7, 27, 44, .62) 50%),
    linear-gradient(135deg, rgba(7, 27, 44, .62) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 17px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px) !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

.spl-invoice :is(.invoice-field input, .commitment-class-control select):hover {
  background-color: var(--input-paper-hover) !important;
}

.spl-invoice :is(.invoice-field input, .commitment-class-control select):focus,
.spl-invoice :is(.invoice-field input, .commitment-class-control select):focus-visible {
  outline: 0 !important;
  background-color: rgba(8, 166, 150, .09) !important;
  box-shadow: 0 0 0 6px rgba(8, 166, 150, .12) !important;
}

.spl-invoice .invoice-field input::placeholder {
  color: var(--input-paper-placeholder) !important;
  opacity: 1 !important;
}

.spl-invoice :is(.invoice-field input[aria-invalid="true"], .invoice-field input[data-invoice-invalid="true"]) {
  background-color: rgba(255, 123, 103, .12) !important;
  box-shadow: 0 0 0 6px rgba(255, 123, 103, .09) !important;
}

.spl-invoice.review .invoice-field input,
.spl-invoice.sealed .invoice-field input {
  min-height: 0 !important;
  padding-inline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Financial amount input keeps the large instrument scale. */
.view-exchange .support-amount-field,
.view-exchange .swap-leg {
  overflow: visible !important;
}

.view-exchange .swap-value input {
  min-height: 96px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #07100f !important;
  box-shadow: none !important;
  font-size: clamp(58px, 7vw, 104px) !important;
  font-weight: 470 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.075em !important;
  caret-color: var(--signal-teal);
}

.view-exchange .swap-value input::placeholder {
  color: rgba(7, 16, 15, .34) !important;
  opacity: 1 !important;
}

.view-exchange .swap-value input:focus,
.view-exchange .swap-value input:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.view-exchange .asset-picker {
  min-width: 214px !important;
  min-height: 82px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: rgba(7, 16, 15, .075) !important;
  box-shadow: none !important;
}

/* Labels, validation and assistive text remain readable. */
.app-shell :is(.field, .storage-select, .settings-card > label, .genesis-fields label, .market-story-fields label) {
  color: rgba(223, 232, 228, .7) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: .025em !important;
  text-transform: none !important;
}

.app-shell :is(.field.invalid, .market-story-fields .field.invalid) {
  color: #ff9a89 !important;
}

.app-shell :is(.field.invalid, .market-story-fields .field.invalid) :is(input, textarea, select),
.app-shell :is(input, textarea, select)[aria-invalid="true"] {
  outline: 0 !important;
  background-color: var(--input-invalid) !important;
  box-shadow: 0 0 0 7px rgba(255, 123, 103, .08) !important;
}

.app-shell :is(.field.invalid, .market-story-fields .field.invalid) > small {
  margin-top: 9px !important;
  color: #ff9a89 !important;
  font-size: 12px !important;
  font-weight: 560 !important;
  line-height: 1.4 !important;
}

.app-shell :is(input, textarea, select):disabled,
.app-shell :is(input, textarea, select)[readonly] {
  cursor: not-allowed;
  opacity: .68;
}

.app-shell :is(input, textarea, select):-webkit-autofill,
.app-shell :is(input, textarea, select):-webkit-autofill:hover,
.app-shell :is(input, textarea, select):-webkit-autofill:focus {
  -webkit-text-fill-color: var(--input-dark-text) !important;
  transition: background-color 9999s ease-out;
  caret-color: var(--state-info);
}

.app-shell input[type="number"] {
  appearance: textfield;
  font-variant-numeric: tabular-nums;
}

.app-shell input[type="number"]::-webkit-inner-spin-button,
.app-shell input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.app-shell input[type="date"] {
  color-scheme: dark;
  font-variant-numeric: tabular-nums;
}

.spl-invoice input[type="date"] {
  color-scheme: light;
}

.app-shell :is(input, textarea)::selection {
  background: rgba(89, 220, 232, .3);
  color: inherit;
}

/* The home subscription is a calm compact instrument. */
.home-screen .cycle-form > div {
  min-height: 64px !important;
  padding: 6px !important;
  border: 0 !important;
  border-radius: 19px !important;
  background: rgba(7, 16, 15, .075) !important;
  box-shadow: none !important;
}

.home-screen .cycle-form input {
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 0 17px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #07100f !important;
  box-shadow: none !important;
  font-size: 16px !important;
}

.home-screen .cycle-form input::placeholder {
  color: rgba(7, 16, 15, .42) !important;
  opacity: 1 !important;
}

/* Range and file controls are separate instruments, not text fields. */
.app-shell input[type="range"] {
  min-height: 34px !important;
  padding: 0 !important;
  accent-color: var(--state-info);
}

.app-shell input[type="file"]:not(.visually-hidden) {
  min-height: 56px !important;
  padding: 9px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--input-dark) !important;
  color: var(--input-dark-placeholder) !important;
  font-size: 14px !important;
}

.app-shell input[type="file"]::file-selector-button {
  min-height: 38px;
  margin-right: 12px;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  background: rgba(89, 220, 232, .11);
  color: var(--input-dark-text);
  font: inherit;
  font-weight: 620;
}

@media (max-width: 760px) {
  .app-shell :is(
    .field > input,
    .field > select,
    .settings-card select,
    .storage-select select,
    .licence-settings input,
    .licence-settings select,
    .market-story-fields input,
    .market-story-fields select,
    .genesis-fields label > input:not([type="range"]):not([type="file"]),
    .genesis-fields label > select
  ) {
    min-height: 58px !important;
    padding-inline: 16px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
  }

  .app-shell :is(.search, .market-search, .verify-field > div),
  .library-tools .search {
    min-height: 58px !important;
    height: 58px !important;
    border-radius: 17px !important;
  }

  .app-shell :is(.search, .market-search, .verify-field) input,
  .library-tools .search input {
    font-size: 16px !important;
  }

  .view-exchange .swap-value {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  .view-exchange .swap-value input {
    min-height: 76px !important;
    font-size: clamp(50px, 16vw, 78px) !important;
  }

  .view-exchange .asset-picker {
    min-width: 150px !important;
    min-height: 70px !important;
  }
}

@media (max-width: 460px) {
  .view-exchange .swap-value {
    grid-template-columns: 1fr !important;
  }

  .view-exchange .asset-picker {
    width: 100% !important;
  }
}

/*
 * v110 control architecture
 * The transaction dock is the source component. Both fixed controls share its
 * quiet surface, line iconography, spacing rhythm and semantic colour rules.
 * Desktop geometry is 85% of the approved v109 dock.
 */
:root {
  --machine-header-h: 78px;
  --machine-dock-h: 78px;
  --machine-control-bg: rgba(7, 20, 18, .97);
  --machine-control-surface: rgba(237, 246, 242, .045);
  --machine-control-hover: rgba(237, 246, 242, .075);
  --machine-control-text: rgba(244, 248, 245, .92);
  --machine-control-muted: rgba(216, 228, 223, .58);
  --machine-control-line: rgba(89, 220, 232, .78);
  --machine-control-ready: #c7ff31;
  --se-header-h: var(--machine-header-h);
  --atm-header-height: var(--machine-header-h);
}

/* Header frame. One line at desktop sizes, with no competing minimum widths. */
.app-header {
  box-sizing: border-box !important;
  width: 100% !important;
  height: var(--machine-header-h) !important;
  min-height: var(--machine-header-h) !important;
  padding: 0 clamp(18px, 2.35vw, 44px) !important;
  display: grid !important;
  grid-template-columns: minmax(188px, 218px) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(14px, 1.6vw, 28px) !important;
  overflow: visible !important;
  border: 0 !important;
  background: var(--machine-control-bg) !important;
  box-shadow:
    0 18px 54px rgba(0, 0, 0, .18),
    inset 0 -1px rgba(89, 220, 232, .06) !important;
  backdrop-filter: blur(24px) saturate(122%) !important;
}

.app-header.home-header,
.app-header.home-header.is-top,
.app-header.home-header.is-scrolled {
  background: var(--machine-control-bg) !important;
}

.app-shell:not(.app-loading) {
  padding-top: var(--machine-header-h) !important;
}

.header-seal-menu {
  top: var(--machine-header-h) !important;
}

.app-header .brand {
  width: 100% !important;
  min-width: 0 !important;
  height: 54px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: visible !important;
  color: #f4f7f3 !important;
}

.app-header .brand-mark {
  width: 42px !important;
  height: 50px !important;
  min-width: 42px !important;
  margin: 0 !important;
  background-size: contain !important;
  background-position: center !important;
  filter: none !important;
}

.app-header .brand-lockup {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
  text-align: left !important;
}

.app-header .brand-lockup b {
  overflow: hidden !important;
  color: #f5f7f3 !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  letter-spacing: .16em !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}

.app-header .brand-lockup small {
  overflow: hidden !important;
  color: #59dce8 !important;
  font-size: 7.5px !important;
  line-height: 1 !important;
  letter-spacing: .2em !important;
  white-space: nowrap !important;
}

.app-header .core-navigation {
  width: 100% !important;
  min-width: 0 !important;
  height: 54px !important;
  display: grid !important;
  grid-template-columns: minmax(340px, 430px) minmax(112px, auto) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: clamp(10px, 1.25vw, 22px) !important;
  overflow: visible !important;
}

/* Two core machine actions read as one instrument, not two Bootstrap buttons. */
.machine-primary-actions {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 54px !important;
  padding: 4px !important;
  display: grid !important;
  grid-template-columns: minmax(190px, 1.12fr) minmax(132px, .88fr) !important;
  align-items: stretch !important;
  gap: 3px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 19px !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(89, 220, 232, .075), transparent 42%),
    linear-gradient(135deg, rgba(24, 39, 39, .98), rgba(12, 24, 25, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 18px 42px rgba(0, 0, 0, .18) !important;
}

.machine-primary-actions .seal-menu-control {
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
}

.app-header nav .seal-menu-trigger,
.app-header nav .exchange-nav {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: transparent !important;
  color: var(--machine-control-text) !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 12px !important;
  font-weight: 680 !important;
  letter-spacing: .045em !important;
  white-space: nowrap !important;
}

.app-header nav .seal-menu-trigger:hover,
.app-header nav .exchange-nav:hover,
.app-header nav .seal-menu-trigger:focus-visible,
.app-header nav .exchange-nav:focus-visible {
  background: var(--machine-control-hover) !important;
  color: #fff !important;
}

.app-header nav .seal-menu-trigger.active,
.app-header nav .exchange-nav.active {
  background: linear-gradient(130deg, rgba(89, 220, 232, .12), rgba(61, 85, 224, .06)) !important;
  color: #fff !important;
}

.app-header nav .seal-menu-trigger::after,
.app-header nav .exchange-nav::after {
  display: none !important;
}

.app-header nav .seal-menu-trigger .seal-trigger-mark,
.app-header nav .exchange-nav > i {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--machine-control-line) !important;
}

.app-header nav .seal-menu-trigger .seal-trigger-mark svg,
.app-header nav .exchange-nav > i svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.app-header nav .seal-menu-trigger > em {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  padding-left: 4px !important;
  color: rgba(233, 241, 237, .42) !important;
  font-style: normal !important;
}

.machine-secondary-actions {
  min-width: 0 !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
}

.app-header nav .verify-nav,
.app-header nav .my-seals-nav {
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: transparent !important;
  color: var(--machine-control-muted) !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 620 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
}

.app-header nav .verify-nav:hover,
.app-header nav .my-seals-nav:hover,
.app-header nav .verify-nav:focus-visible,
.app-header nav .my-seals-nav:focus-visible {
  background: var(--machine-control-hover) !important;
  color: #fff !important;
}

.app-header nav .verify-nav.active,
.app-header nav .my-seals-nav.active {
  background: rgba(89, 220, 232, .08) !important;
  color: #59dce8 !important;
}

.app-header nav .verify-nav::after,
.app-header nav .my-seals-nav::after {
  display: none !important;
}

.app-header nav .verify-nav > i,
.app-header nav .my-seals-nav > i {
  width: 17px !important;
  min-width: 17px !important;
  height: 17px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: currentColor !important;
}

.app-header nav .my-seals-nav > i svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
}

/* Account access is the ATM card entrance. Wallet and identity share a slot. */
.app-header .access-terminal {
  box-sizing: border-box !important;
  min-width: 0 !important;
  height: 54px !important;
  padding: 4px !important;
  display: grid !important;
  grid-template-columns: minmax(128px, auto) 46px !important;
  align-items: stretch !important;
  gap: 3px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 19px !important;
  background:
    radial-gradient(circle at 0 0, rgba(89, 220, 232, .07), transparent 48%),
    linear-gradient(135deg, rgba(24, 39, 39, .98), rgba(12, 24, 25, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 18px 42px rgba(0, 0, 0, .18) !important;
}

.app-header .access-terminal::before,
.app-header .wallet-connect::after {
  display: none !important;
}

.app-header .wallet-connect {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: auto !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: transparent !important;
  color: var(--machine-control-text) !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 660 !important;
  white-space: nowrap !important;
}

.app-header .wallet-connect:hover,
.app-header .wallet-connect:focus-visible,
.app-header .wallet-connect.connected {
  background: var(--machine-control-hover) !important;
  color: #fff !important;
}

.app-header .wallet-connect i {
  width: 19px !important;
  min-width: 19px !important;
  height: 19px !important;
  color: var(--machine-control-line) !important;
}

.app-header .avatar {
  box-sizing: border-box !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .045) !important;
  color: var(--machine-control-text) !important;
  box-shadow: none !important;
}

.app-header .avatar img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

.app-header .avatar.login-access span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
}

/* Approved dock reduced uniformly to 85%, without scaling its hit geometry. */
.seal-action-dock,
.exchange-action-dock {
  box-sizing: border-box !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  width: var(--machine-frame-width, min(85vw, 1500px)) !important;
  min-height: var(--machine-dock-h) !important;
  padding: 8px !important;
  gap: 8px !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--machine-control-bg) !important;
  box-shadow:
    0 24px 76px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  backdrop-filter: blur(22px) saturate(122%) !important;
}

.seal-action-dock .dock-back,
.exchange-action-dock .dock-back {
  width: 54px !important;
  flex: 0 0 54px !important;
  min-height: 61px !important;
  border-radius: 14px !important;
  font-size: 20px !important;
}

.dock-entity-context,
.exchange-dock-context {
  flex: 0 1 188px !important;
  min-width: 0 !important;
  min-height: 61px !important;
  padding: 7px 10px !important;
  gap: 9px !important;
  border-radius: 14px !important;
}

.dock-entity-avatar,
.exchange-dock-context > i {
  width: 39px !important;
  min-width: 39px !important;
  height: 39px !important;
}

.dock-entity-context small,
.exchange-dock-context small {
  font-size: 8.5px !important;
  letter-spacing: .12em !important;
}

.dock-entity-context b,
.exchange-dock-context b {
  font-size: 11px !important;
  line-height: 1.18 !important;
}

.dock-progress {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  gap: 2px !important;
}

.dock-progress button {
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 4px 2px !important;
  border-radius: 12px !important;
}

.dock-progress button i {
  width: 25px !important;
  height: 25px !important;
  font-size: 10px !important;
}

.dock-progress button span {
  font-size: 8.5px !important;
  letter-spacing: .08em !important;
}

.seal-action-dock .dock-primary,
.exchange-action-dock .dock-primary {
  flex: 0 0 clamp(230px, 21vw, 323px) !important;
  min-width: clamp(230px, 21vw, 323px) !important;
  min-height: 61px !important;
  padding: 0 clamp(15px, 1.25vw, 20px) !important;
  border-radius: 14px !important;
}

.seal-action-dock .dock-primary small,
.exchange-action-dock .dock-primary small {
  font-size: 8.5px !important;
  letter-spacing: .1em !important;
}

.seal-action-dock .dock-primary b,
.exchange-action-dock .dock-primary b {
  margin-top: 4px !important;
  font-size: 13px !important;
}

.view-seal .journey-screen,
.view-exchange .exchange-terminal {
  padding-bottom: calc(126px + env(safe-area-inset-bottom)) !important;
}

/* Sealing content and its persistent controller share one machine frame. */
.view-seal .journey-screen.workspace {
  width: var(--machine-frame-width, min(85vw, 1500px)) !important;
  max-width: 1500px !important;
  margin-inline: auto !important;
}

/* Compact desktop: labels yield before the controls or brand can collide. */
@media (max-width: 1280px) {
  .app-header {
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    gap: 12px !important;
    padding-inline: 16px !important;
  }

  .app-header .brand {
    grid-template-columns: 42px !important;
  }

  .app-header .brand-lockup {
    display: none !important;
  }

  .app-header .core-navigation {
    grid-template-columns: minmax(320px, 420px) minmax(82px, auto) !important;
    gap: 8px !important;
  }

  .app-header nav .verify-nav,
  .app-header nav .my-seals-nav {
    width: 42px !important;
    padding: 0 !important;
  }

  .app-header nav .verify-nav span,
  .app-header nav .my-seals-nav span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
  }

  .app-header .access-terminal {
    grid-template-columns: minmax(112px, auto) 46px !important;
  }
}

@media (max-width: 980px) {
  :root {
    --machine-header-h: 112px;
  }

  .app-header {
    height: var(--machine-header-h) !important;
    min-height: var(--machine-header-h) !important;
    padding: 8px 12px !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    grid-template-rows: 46px 46px !important;
    gap: 4px 8px !important;
  }

  .app-header .brand {
    width: 44px !important;
    height: 46px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .app-header .brand-mark {
    width: 38px !important;
    min-width: 38px !important;
    height: 44px !important;
  }

  .app-header .access-terminal {
    width: auto !important;
    height: 46px !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    grid-template-columns: minmax(108px, auto) 38px !important;
    padding: 3px !important;
    border-radius: 16px !important;
  }

  .app-header .wallet-connect {
    height: 40px !important;
    min-height: 40px !important;
    padding-inline: 10px !important;
    border-radius: 13px !important;
  }

  .app-header .avatar {
    width: 38px !important;
    min-width: 38px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 13px !important;
  }

  .app-header .core-navigation {
    width: 100% !important;
    height: 46px !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  .machine-primary-actions {
    height: 46px !important;
    grid-template-columns: minmax(165px, 1.12fr) minmax(118px, .88fr) !important;
    padding: 3px !important;
    border-radius: 16px !important;
  }

  .machine-primary-actions .seal-menu-control,
  .app-header nav .seal-menu-trigger,
  .app-header nav .exchange-nav {
    height: 40px !important;
    min-height: 40px !important;
  }

  .app-header nav .seal-menu-trigger,
  .app-header nav .exchange-nav {
    padding-inline: 10px !important;
    border-radius: 13px !important;
    font-size: 11px !important;
  }

  .machine-secondary-actions {
    height: 40px !important;
  }

  .app-header nav .verify-nav,
  .app-header nav .my-seals-nav {
    width: 40px !important;
    height: 40px !important;
  }

  .header-seal-menu {
    top: var(--machine-header-h) !important;
  }

  .seal-action-dock,
  .exchange-action-dock {
    width: calc(100vw - 24px) !important;
  }

  .dock-entity-context,
  .exchange-dock-context {
    display: none !important;
  }
}

@media (max-width: 760px) {
  :root {
    --machine-header-h: 108px;
    --mobile-transaction-dock: 124px;
  }

  .app-header {
    height: var(--machine-header-h) !important;
    min-height: var(--machine-header-h) !important;
    padding: 7px 9px !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    grid-template-rows: 43px 44px !important;
  }

  .app-header .brand,
  .app-header .brand-mark {
    width: 36px !important;
    min-width: 36px !important;
    height: 42px !important;
  }

  .app-header .access-terminal {
    height: 43px !important;
    grid-template-columns: auto 36px !important;
  }

  .app-header .wallet-connect {
    width: 42px !important;
    min-width: 42px !important;
    height: 37px !important;
    min-height: 37px !important;
    padding: 0 !important;
  }

  .app-header .wallet-connect span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
  }

  .app-header .avatar {
    width: 36px !important;
    min-width: 36px !important;
    height: 37px !important;
    min-height: 37px !important;
  }

  .app-header .core-navigation {
    height: 44px !important;
  }

  .machine-primary-actions {
    height: 44px !important;
    grid-template-columns: minmax(142px, 1.1fr) minmax(102px, .9fr) !important;
  }

  .machine-primary-actions .seal-menu-control,
  .app-header nav .seal-menu-trigger,
  .app-header nav .exchange-nav {
    height: 38px !important;
    min-height: 38px !important;
  }

  .app-header nav .seal-menu-trigger,
  .app-header nav .exchange-nav {
    gap: 6px !important;
    padding-inline: 8px !important;
    font-size: 10px !important;
    letter-spacing: .025em !important;
  }

  .app-header nav .seal-menu-trigger .seal-trigger-mark,
  .app-header nav .exchange-nav > i {
    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;
  }

  .app-header nav .seal-menu-trigger .seal-trigger-mark svg,
  .app-header nav .exchange-nav > i svg {
    width: 16px !important;
    height: 16px !important;
  }

  .machine-secondary-actions {
    height: 38px !important;
    gap: 2px !important;
  }

  .app-header nav .verify-nav,
  .app-header nav .my-seals-nav {
    width: 36px !important;
    height: 36px !important;
  }

  .seal-action-dock,
  .exchange-action-dock {
    box-sizing: border-box !important;
    bottom: calc(7px + env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 14px) !important;
    min-height: var(--mobile-transaction-dock) !important;
    padding: 7px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    grid-template-rows: 46px 58px !important;
    gap: 6px !important;
    border-radius: 17px !important;
  }

  .seal-action-dock .dock-back,
  .exchange-action-dock .dock-back {
    width: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    border-radius: 12px !important;
  }

  .dock-progress {
    min-height: 46px !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .dock-progress button {
    min-height: 46px !important;
    padding: 2px 1px !important;
  }

  .dock-progress button i {
    width: 22px !important;
    height: 22px !important;
    font-size: 9px !important;
  }

  .dock-progress button span {
    font-size: 7.5px !important;
    letter-spacing: .045em !important;
  }

  .seal-action-dock .dock-primary,
  .exchange-action-dock .dock-primary {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    border-radius: 13px !important;
  }

  .view-seal .journey-screen,
  .view-exchange .exchange-terminal {
    padding-bottom: calc(var(--mobile-transaction-dock) + 24px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 520px) {
  .machine-primary-actions {
    grid-template-columns: minmax(130px, 1fr) 42px !important;
  }

  .app-header nav .exchange-nav {
    justify-content: center !important;
    padding: 0 !important;
  }

  .app-header nav .exchange-nav .nav-label-full,
  .app-header nav .exchange-nav .nav-label-short {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
  }

  .app-header nav .seal-menu-trigger .seal-trigger-desktop {
    display: none !important;
  }

  .app-header nav .seal-menu-trigger .seal-trigger-mobile {
    display: inline !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}