[hidden] { display: none !important; }

/* The interface contract is shared by every public/account/owner surface. */

/* Shared product controls: a visible hit area, one icon family, real labels. */
.ui-icon { width: 20px; height: 20px; flex: 0 0 20px; vertical-align: middle; }
[data-icon] { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-page .quiet-link, .account-page .quiet-link,
.account-page .account-panel header > a, .account-page .account-panel header > button,
.account-page #admin-refresh, .account-page #admin-more, .account-page #refresh-account,
.account-page #logout-all, .account-page #payments-more, .row-action {
  min-height: 44px; padding: 11px 16px; border: 1px solid #767c7d50;
  border-radius: 12px; background: #ffffff08; font: 550 12px/1.45 var(--text);
  text-decoration: none; cursor: pointer; transition: background .18s, border-color .18s;
}
.auth-page .quiet-link:hover, .account-page .quiet-link:hover, .row-action:hover { border-color: var(--signal); background: #ff623810; }
.auth-page .auth-secondary { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.auth-secondary .quiet-link { margin: 0; flex: 1 1 170px; }
.auth-privacy { font-size: 12px; line-height: 1.7; color: var(--ink-muted); margin-top: 24px; }
.auth-privacy a { text-decoration: underline; text-underline-offset: 3px; }
.auth-page .auth-context h1 { margin-bottom: 24px; line-height: 1.03; }
.auth-context h1 em { font-style: normal; color: #ffa082; }
.auth-manifesto { max-width: 370px; color: #b1b6b7; font-size: 15px; line-height: 1.8; }
.auth-orbit { position: relative; display: grid; place-items: center; width: 210px; height: 210px; margin: 26px auto; }
.auth-orbit::before, .auth-orbit::after, .auth-orbit i { content: ''; position: absolute; border: 1px solid #ff9b7838; border-radius: 50%; inset: 0; }
.auth-orbit::after { inset: 18px; border-color: #ffffff14; }
.auth-orbit i:first-child { inset: 34px; border-color: #ff623880; box-shadow: 0 0 45px #ff623812; }
.auth-orbit i:nth-child(2) { inset: -20px; border-style: dashed; border-color: #ffffff09; }
.auth-orbit img { position: relative; width: 72px; height: 72px; }
.auth-features { display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid #ffffff12; color: #bcc1c0; font-size: 12px; }
.auth-features span { justify-content: flex-start; flex-direction: row-reverse; }
.auth-steps { list-style: none; margin: 0; padding: 16px 0 0; display: grid; gap: 16px; border-top: 1px solid #ffffff12; }
.auth-steps li { display: flex; align-items: center; gap: 14px; color: #bcc1c0; font-size: 13px; }
.auth-steps b { color: #ffa082; font: 500 11px var(--data); }
.auth-page button:focus-visible, .account-page button:focus-visible, .account-page a:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
.account-page button:disabled { opacity: .5; cursor: not-allowed; }
.action-dialog .dialog-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid #8a8d884d; border-radius: 50%; background: #e4e1d9; color: #282d2b; cursor: pointer; }
.action-dialog .dialog-close:hover { background: #d4d0c6; border-color: #282d2b; }
.action-dialog .eyebrow { display: block; padding-right: 36px; }
.action-dialog .dialog-close:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
@media (max-width: 767px) { .auth-page .auth-context { display: flex; min-height: auto; padding: 28px; } .auth-page .auth-context h1 { font-size: clamp(30px, 7vw, 48px); } .auth-page .auth-orbit, .auth-features, .auth-steps { display: none; } .auth-page .auth-manifesto { margin: 0; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .auth-page *, .account-page * { scroll-behavior: auto !important; transition: none !important; } }

body[data-page="pricing"],
.auth-page,
.account-page {
  min-height: 100vh;
  background: var(--night);
}

.compact-header { color: var(--ivory); }
.compact-header .header-action {
  color: var(--ink);
  border-color: var(--ivory);
  background: var(--ivory);
}
.compact-header .brand small { color: var(--ash-soft); }
.page-intro > span,
.pricing-note > span,
.auth-context > span,
.auth-card > span,
.closed-access section > span,
.account-nav > span,
.account-heading > span,
.account-panel header > span {
  color: var(--ash-soft);
  font: 620 9px/1.2 var(--data);
  letter-spacing: 0.14em;
}

/* Pricing */
.page-shell { min-height: calc(100vh - 88px); }
.page-intro {
  position: relative;
  min-height: 650px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-content: end;
  gap: 16px;
  padding: 120px max(32px, calc((100vw - 1560px) / 2)) 86px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 8%, rgba(244, 241, 232, 0.055), transparent 25%),
    radial-gradient(circle at 68% 42%, rgba(255, 98, 56, 0.04), transparent 17%),
    linear-gradient(145deg, #10151a, #080a0d 66%);
}
.page-intro::before {
  content: "";
  position: absolute;
  inset: 88px 0 auto;
  height: 460px;
  pointer-events: none;
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(244, 241, 232, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 241, 232, 0.035) 1px, transparent 1px);
  background-size: 100% 104px, calc((100vw - 64px) / 12) 100%;
  mask-image: linear-gradient(90deg, transparent, #000 8% 92%, transparent);
}
.page-intro > * { position: relative; z-index: 1; }
.page-intro > span { grid-column: 1 / 4; align-self: start; color: #89908f; }
.page-intro h1 {
  grid-column: 1 / 10;
  margin: 22px 0 0;
  font: 570 clamp(70px, 8vw, 126px)/0.85 var(--display);
  letter-spacing: -0.074em;
}
.page-intro p {
  grid-column: 9 / 13;
  align-self: end;
  margin: 0;
  color: var(--ash);
  font-size: 15px;
  line-height: 1.68;
}
.price-grid {
  margin: 0 20px;
  padding: 72px max(24px, calc((100vw - 1520px) / 2)) 38px;
  color: var(--ink);
  border-radius: 40px 40px 0 0;
  background: var(--paper);
}
.plan-toolbar {
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 14px;
  padding: 20px 24px;
  border: 1px solid var(--ink-line);
  border-radius: 20px;
  background: rgba(247, 244, 237, 0.7);
}
.plan-toolbar > div:first-child { display: grid; gap: 7px; }
.plan-toolbar span { color: var(--ink-muted); font: 620 9px var(--data); letter-spacing: 0.14em; }
.plan-toolbar b { font: 570 18px var(--display); letter-spacing: -0.025em; }
.plan-switch { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #dfdcd3; }
.plan-switch button {
  min-height: 44px;
  padding: 0 17px;
  color: var(--ink-muted);
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: 570 12px var(--text);
  cursor: pointer;
}
.plan-switch button[aria-pressed="true"] { color: var(--ivory); background: var(--ink); box-shadow: 0 9px 22px rgba(21, 25, 29, 0.16); }
.plan-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.price-grid article {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid var(--ink-line);
  border-radius: 24px;
  background: var(--paper-raised);
}
.price-grid article.tone-balanced { color: var(--ivory); border-color: transparent; background: linear-gradient(145deg, #1a2127, #101419); box-shadow: 0 28px 62px rgba(21, 25, 29, 0.18); }
.price-grid article > span:first-child {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  border: 1px solid var(--ink-line);
  border-radius: 50%;
  font: 620 9px var(--data);
}
.price-grid article.tone-balanced > span:first-child { color: var(--ash); border-color: var(--line); }
.plan-period { display: grid; gap: 8px; margin-top: 36px; }
.price-grid h2 { margin: 0; font: 600 clamp(26px, 2.6vw, 38px) var(--display); letter-spacing: -0.048em; }
.plan-period p { margin: 0; color: var(--ink-muted); font-size: 12px; }
.tone-balanced .plan-period p { color: var(--ash); }
.plan-card ul { display: grid; gap: 11px; margin: 28px 0 34px; padding: 0; color: #606563; font-size: 12px; list-style: none; }
.tone-balanced ul { color: #a7acab; }
.plan-card li::before { content: ""; width: 5px; height: 5px; display: inline-block; margin: 0 9px 2px 0; border-radius: 50%; background: var(--signal); }
.price-grid article > b { margin-top: 24px; font: 600 clamp(28px, 3vw, 44px) var(--display); letter-spacing: -0.055em; }
.plan-price-unit { margin-top: 4px; color: var(--ink-muted); font-size: 12px; }
.plan-total { margin: 18px 0 0; font-size: 14px; font-weight: 570; }
.plan-saving { min-height: 36px; margin: 8px 0 0; font-size: 11px; line-height: 1.6; color: var(--ink-muted); }
.tone-balanced .plan-price-unit, .tone-balanced .plan-saving { color: var(--ash); }
.plans-retry { flex-shrink: 0; min-height: 44px; padding: 10px 18px; border: 1px solid currentColor; border-radius: 10px; background: var(--paper-raised); color: var(--ink); font: inherit; cursor: pointer; }
.plans-retry:disabled { opacity: .6; cursor: wait; }
.plan-switch button:focus-visible, .plans-retry:focus-visible, .plan-card a:focus-visible { outline: 3px solid #b84020; outline-offset: 4px; }
.pricing-intro { min-height: 480px; padding-top: 96px; padding-bottom: 58px; }
.pricing-intro h1 { font-size: clamp(64px, 7vw, 112px); }
.pricing-intro + .price-grid { padding-top: 32px; }
@media (min-width: 1041px) and (max-width: 1279px) { .plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.price-grid article > a,
.price-grid article > .plan-closed {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding: 0 17px;
  border-radius: var(--radius-control);
  font-size: 12px;
}
.price-grid article > a { color: var(--ivory); background: var(--ink); }
.tone-balanced > a { color: var(--ink) !important; background: var(--ivory) !important; }
.price-grid article > a::after { content: "↗"; }
.price-grid article > .plan-closed { color: var(--ink-muted); border: 1px solid var(--ink-line); }
.tone-balanced > .plan-closed { border-color: var(--line); }
.price-grid article > .plan-closed::after { content: "Закрыто"; font: 620 9px var(--data); letter-spacing: 0.12em; }
.pending-price { max-width: 260px; font-size: 30px !important; line-height: 1 !important; }
.skeleton-card { grid-column: 1 / -1; min-height: 250px !important; }
.skeleton-card b { margin-top: 70px !important; font: 580 30px var(--display) !important; }
.skeleton-card i { width: 42%; height: 2px; display: block; margin-top: 25px; background: linear-gradient(90deg, var(--signal), #a4a8a5); }
.plans-closed-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 14px;
  padding: 20px 24px;
  color: #626765;
  border-radius: 18px;
  background: #dad7cf;
}
.plans-closed-note span { color: #6d5c4e; font: 620 9px var(--data); letter-spacing: 0.13em; }
.plans-closed-note b { font: 540 13px var(--text); }
.page-status { min-height: 22px; margin: 0 20px; padding: 14px max(24px, calc((100vw - 1520px) / 2)); color: #a34c36; background: var(--paper); font-size: 12px; }
.pricing-note {
  display: grid;
  grid-template-columns: 0.72fr repeat(3, 1fr);
  gap: 12px;
  margin: 0 20px;
  padding: 60px max(24px, calc((100vw - 1520px) / 2)) 120px;
  color: var(--ink);
  border-radius: 0 0 40px 40px;
  background: var(--paper);
}
.pricing-note > span { padding-top: 24px; }
.pricing-note > div { min-height: 260px; display: grid; align-content: end; padding: 26px; border: 1px solid var(--ink-line); border-radius: 22px; background: rgba(247, 244, 237, 0.62); }
.pricing-note > div:nth-child(3) { color: var(--ivory); border-color: transparent; background: var(--graphite); }
.pricing-note > div:nth-child(3) p { color: var(--ash); }
.pricing-note b { font: 580 23px/1.08 var(--display); letter-spacing: -0.035em; }
.pricing-note p { margin: 14px 0 0; color: var(--ink-muted); font-size: 13px; line-height: 1.58; }

/* Authentication and launch gate */
.auth-security, .account-state { color: var(--ash); font: 620 9px var(--data); letter-spacing: 0.14em; }
.auth-shell,
.closed-access {
  width: var(--content);
  min-height: calc(100vh - 112px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(410px, 0.92fr);
  gap: 12px;
  margin: 24px auto;
}
.auth-context,
.closed-mark {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(38px, 5vw, 78px);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 30px;
  background:
    radial-gradient(circle at 78% 18%, rgba(244, 241, 232, 0.055), transparent 25%),
    linear-gradient(145deg, #171e24, #0d1115 70%);
}
.auth-context::before, .closed-mark::after {
  content: "";
  position: absolute;
  top: 11%;
  right: 9%;
  width: min(32vw, 470px);
  aspect-ratio: 1;
  border: 1px solid rgba(244, 241, 232, 0.09);
  border-radius: 50%;
}
.auth-context > * { position: relative; }
.auth-context h1 { margin: 20px 0 54px; font: 570 clamp(68px, 7vw, 112px)/0.84 var(--display); letter-spacing: -0.07em; }
.auth-route { position: relative; width: min(620px, 90%); height: 70px; }
.auth-route::before { content: ""; position: absolute; top: 20px; right: 0; left: 0; height: 2px; background: linear-gradient(90deg, #707775 0 24%, var(--signal) 24% 42%, var(--ivory) 42%); }
.auth-route i { position: absolute; top: 15px; width: 11px; height: 11px; border: 1px solid #7d8482; border-radius: 50%; background: var(--graphite); }
.auth-route i:first-child { left: 0; }
.auth-route i:nth-child(2) { left: 23%; }
.auth-route b { position: absolute; top: 11px; left: 40%; width: 18px; height: 18px; border: 2px solid var(--signal); transform: rotate(45deg); }
.auth-route span { position: absolute; right: 0; bottom: 0; color: var(--ash); font: 620 9px var(--data); letter-spacing: 0.13em; }
.auth-card,
.closed-access section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(38px, 5vw, 74px);
  color: var(--ink);
  border-radius: 30px;
  background: var(--paper-raised);
  box-shadow: 0 34px 86px rgba(0, 0, 0, 0.24);
}
.auth-card h2 { margin: 14px 0 10px; font: 600 clamp(42px, 4vw, 62px) var(--display); letter-spacing: -0.055em; }
.auth-card > p { margin: 0 0 40px; color: var(--ink-muted); font-size: 14px; }
.auth-card form { display: grid; gap: 18px; }
.auth-card .field { display: grid; gap: 9px; }
.auth-card label { color: #5f6462; font-size: 12px; }
.auth-card input {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  color: var(--ink);
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  background: #e9e5dc;
}
.auth-card input:focus { outline: 3px solid rgba(255, 98, 56, 0.18); border-color: var(--signal-deep); }
.input-shell { position: relative; display: block; }
.input-shell input { padding-right: 96px; }
.auth-card form > button {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 7px;
  padding: 0 18px;
  color: var(--ivory);
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  font-weight: 560;
  cursor: pointer;
}
.auth-card form > button:disabled { color: #505552; background: #d7d3ca; cursor: wait; }
/* Structural centering must survive the shared hover/active transform reset. */
.auth-card .password-toggle { position: absolute; inset-block: 0; right: 8px; height: 44px; margin-block: auto; padding: 0 11px; color: #505552; border: 0; border-radius: 9px; background: #ddd9d0; font: 620 10px var(--text); transform: none; cursor: pointer; }
.form-status { min-height: 18px !important; margin: 0 !important; color: #a34c36 !important; font-size: 11px !important; }
.quiet-link { margin-top: 24px; color: #666b68; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.auth-assurance { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 30px; padding-top: 20px; color: #696e6b; border-top: 1px solid var(--ink-line); font-size: 11px; }
.auth-assurance span::before { content: ""; width: 6px; height: 6px; display: inline-block; margin: 0 8px 1px 0; border-radius: 50%; background: #4b9365; }
.closed-access { grid-template-columns: 0.65fr 1.35fr; }
.closed-mark { display: grid; align-content: center; }
.closed-mark > span { color: var(--ash); font: 620 9px var(--data); }
.closed-mark > i { width: min(280px, 76%); height: 2px; margin: 56px 0 28px; background: linear-gradient(90deg, var(--signal) 0 32%, var(--ivory) 32%); }
.closed-mark > b { font: 700 38px var(--display); letter-spacing: -0.05em; }
.closed-access h1 { max-width: 900px; margin: 18px 0 28px; font: 590 clamp(56px, 6vw, 94px)/0.88 var(--display); letter-spacing: -0.067em; }
.closed-access section > p { max-width: 670px; color: var(--ink-muted); font-size: 15px; line-height: 1.65; }
.closed-access section > a { align-self: flex-start; margin-top: 22px; padding: 14px 18px; color: var(--ivory); border-radius: 11px; background: var(--ink); font-size: 12px; }
.launch-checks { width: min(100%, 680px); display: grid; margin: 25px 0 4px; padding: 0; border-top: 1px solid var(--ink-line); list-style: none; }
.launch-checks li { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #5f6462; border-bottom: 1px solid var(--ink-line); font-size: 12px; }
.launch-checks b { color: #a14f39; font: 620 9px var(--data); letter-spacing: 0.12em; text-transform: uppercase; }

/* Account */
.text-button { cursor: pointer; }
.account-state { display: flex; align-items: center; gap: 7px; }
.account-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--ash); }
.account-shell {
  width: var(--content);
  min-height: calc(100vh - 112px);
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 12px;
  margin: 24px auto 80px;
}
.account-nav {
  position: sticky;
  top: 112px;
  height: max-content;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 26px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  background: var(--graphite);
}
.account-nav > span { margin: 5px 10px 28px; }
.account-nav a { padding: 12px 13px; color: var(--ash); border-radius: 10px; font-size: 12px; }
.account-nav a.active { color: var(--ivory); background: rgba(244, 241, 232, 0.07); }
.account-content { padding: 48px 0 30px; }
.account-heading { margin: 0 0 56px 4px; }
.account-heading h1 { margin: 14px 0; font: 570 clamp(58px, 6.4vw, 102px)/0.86 var(--display); letter-spacing: -0.07em; }
.account-heading p { margin: 0; color: var(--ash); font-size: 13px; }
.account-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.account-panel {
  min-height: 300px;
  grid-column: span 6;
  padding: 26px;
  color: var(--ink);
  border-radius: 24px;
  background: var(--paper);
}
.subscription-panel { background: var(--paper-raised); }
.route-panel { color: var(--ivory); background: linear-gradient(145deg, #1a2127, #101419); box-shadow: 0 26px 64px rgba(0, 0, 0, 0.23); }
.payments-panel { grid-column: span 12; min-height: 230px; }
.account-panel header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.account-panel header > a, .account-panel header > b, .account-panel header > button { color: var(--ink-muted); font: 620 9px var(--data); letter-spacing: 0.12em; }
.route-panel header > span, .route-panel header > b { color: var(--ash); }
.account-panel header > button { padding: 0; border: 0; background: transparent; }
.panel-loading { margin-top: 82px; color: var(--ink-muted); font-size: 12px; }
.subscription-panel > div { display: grid; gap: 8px; margin-top: 64px; }
.subscription-panel strong { font: 590 20px var(--display); }
.subscription-panel b { font: 600 42px var(--display); letter-spacing: -0.05em; }
.subscription-panel p { margin: 0; color: var(--ink-muted); font-size: 11px; }
.state-good { color: #286740; }
.state-muted { color: var(--ink-muted); }
.calm-route { position: relative; height: 82px; display: flex; align-items: center; gap: 13px; margin-top: 50px; color: var(--ash); font: 620 9px var(--data); }
.calm-route::before { content: ""; position: absolute; top: 40px; right: 0; left: 0; height: 2px; background: linear-gradient(90deg, #727977 0 31%, var(--signal) 31% 47%, var(--ivory) 47%); }
.calm-route > * { position: relative; background: var(--graphite); }
.calm-route i, .calm-route b, .calm-route em { width: 9px; height: 9px; border: 1px solid #727977; border-radius: 50%; }
.calm-route b { border: 2px solid var(--signal); border-radius: 0; transform: rotate(45deg); }
.calm-route em { border-color: var(--ivory); background: var(--ivory); }
.calm-route strong { margin-left: auto; color: var(--ivory); font: 620 9px var(--data); letter-spacing: 0.12em; }
.route-panel > p { margin: 0; color: var(--ash); font-size: 12px; line-height: 1.55; }
.data-row { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--ink-line); font-size: 12px; }
.data-row:first-child { margin-top: 30px; }
.data-row b { font-weight: 560; }
.data-row span { color: var(--ink-muted); }
.empty-state { margin-top: 68px; color: var(--ink-muted); font-size: 12px; line-height: 1.55; }

@media (max-width: 1040px) {
  .page-intro h1 { grid-column: 1 / 13; }
  .page-intro p { grid-column: 7 / 13; margin-top: 24px; }
  .plan-cards { grid-template-columns: 1fr 1fr; }
  .plan-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pricing-note { grid-template-columns: 1fr 1fr; }
  .pricing-note > span { grid-column: 1 / -1; }
  .auth-shell { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .auth-security, .account-state { display: none; }
  .page-intro { min-height: 560px; display: block; padding: 126px 18px 58px; }
  .page-intro h1 { margin-top: 38px; font-size: clamp(58px, 17vw, 86px); }
  .pricing-intro { min-height: 440px; padding-top: 64px; padding-bottom: 36px; }
  .page-intro p { margin-top: 26px; font-size: 14px; }
  .price-grid { margin: 0 12px; padding: 48px 12px 24px; border-radius: 26px 26px 0 0; }
  .plan-toolbar { align-items: stretch; flex-direction: column; padding: 18px; }
  .plan-switch { display: grid; grid-template-columns: repeat(3, 1fr); }
  .plan-switch button { padding: 0 9px; }
  .plan-cards { grid-template-columns: 1fr; }
  .plan-card:last-child:nth-child(odd) { grid-column: auto; }
  .price-grid article { min-height: 420px; }
  .plans-closed-note { align-items: flex-start; flex-direction: column; }
  .page-status { margin: 0 12px; }
  .pricing-note { grid-template-columns: 1fr; margin: 0 12px; padding: 48px 12px 74px; border-radius: 0 0 26px 26px; }
  .pricing-note > span { grid-column: auto; }
  .auth-shell, .closed-access { width: calc(100% - 24px); min-height: auto; grid-template-columns: 1fr; margin: 12px auto 28px; }
  .auth-context, .closed-mark { display: none; }
  .auth-card, .closed-access section { min-height: calc(100vh - 112px); padding: 36px 22px; border-radius: 24px; }
  .closed-access h1 { font-size: clamp(50px, 14vw, 72px); }
  .account-shell { width: calc(100% - 24px); grid-template-columns: 1fr; margin-top: 12px; }
  .account-nav { position: static; min-height: auto; display: grid; grid-template-columns: repeat(4, auto); overflow-x: auto; padding: 12px; border-radius: 18px; }
  .account-nav > span { display: none; }
  .account-nav a { white-space: nowrap; }
  .account-content { padding: 36px 0 20px; }
  .account-heading { margin-left: 0; }
  .account-heading h1 { font-size: clamp(52px, 15vw, 76px); }
  .account-grid { grid-template-columns: 1fr; }
  .account-panel, .payments-panel { grid-column: 1; padding: 22px; border-radius: 20px; }
}

@media (forced-colors: active) {
  .plan-toolbar, .price-grid article, .auth-context, .auth-card, .closed-mark,
  .closed-access section, .account-nav, .account-panel { border: 1px solid CanvasText; }
}

.business-form { display: grid; gap: 12px; margin: 28px 0; }
.business-form label { font-size: 13px; }
.business-form input, .business-form select { width: 100%; padding: 14px; border: 1px solid var(--ink-line); border-radius: 12px; background: var(--paper-raised); color: var(--ink); font: inherit; }
.business-form button, .row-action, #logout-all, #payments-more, #refresh-account, #status-refresh { padding: 12px 18px; border: 1px solid currentColor; border-radius: 10px; cursor: pointer; background: var(--paper-raised); color: var(--ink); font: inherit; }
.business-form button:disabled { opacity: .65; cursor: wait; }
.data-row { flex-wrap: wrap; align-items: center; overflow-wrap: anywhere; }
.data-row .row-action { font-size: 12px; }
.account-panel > p { font-size: 13px; line-height: 1.65; }
.route-panel > p { margin-top: 30px; }
.information-shell { width: min(920px, calc(100% - 48px)); margin: 80px auto; padding: clamp(24px, 5vw, 64px); border-radius: 30px; color: var(--ink); background: var(--paper); }
.information-shell h1 { font: 600 clamp(36px, 5vw, 64px)/1.1 var(--display); letter-spacing: -.04em; }
.information-shell p { line-height: 1.7; }
.information-shell nav { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 40px; }
.information-shell nav a { text-decoration: underline; }
.admin-payment { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ink-line); }
.admin-payment h2 { overflow-wrap: anywhere; font-size: 24px; }

/* Product surfaces share the landing page rhythm; forms retain native behavior. */
.page-intro { width: var(--content); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 64px; min-height: 340px; margin: auto; padding: 72px 0 54px; background: none; }
.page-intro::before { display: none; }
.page-intro > span { grid-column: 1 / -1; }
.page-intro h1 { grid-column: 1; margin: 18px 0 0; font-size: clamp(44px, 5.2vw, 76px); line-height: 1.08; letter-spacing: -.055em; }
.page-intro p { grid-column: 2; max-width: 440px; font-size: 14px; }
.price-grid { width: var(--content); margin: 0 auto; padding: 28px; border-radius: 24px 24px 0 0; }
.pricing-intro + .price-grid { padding-top: 28px; }
.plan-toolbar { min-height: 90px; padding: 16px 20px; border-radius: 14px; margin-bottom: 18px; }
.price-grid article { min-height: 480px; border-radius: 18px; transition: border-color .2s, box-shadow .2s; }
.price-grid article.tone-balanced { border: 1px solid #ff623866; box-shadow: 0 18px 35px #15191d25; }
.plan-period { margin-top: 24px; }
.plan-card ul { margin-block: 20px; }
.price-grid .plan-card > a { margin-top: auto; }
.plan-switch button { min-height: 48px; }
.plan-toolbar span { color: var(--ink-muted); }
.page-status { width: var(--content); margin: 0 auto; }
.pricing-note { width: var(--content); margin: 0 auto 60px; padding: 40px 28px; border-radius: 0 0 24px 24px; }
.pricing-note b { font-size: 19px; line-height: 1.3; }
.auth-shell { min-height: min(760px, calc(100dvh - 140px)); margin-block: 32px 64px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.auth-context { padding: 48px; justify-content: center; background: radial-gradient(ellipse at 70% 25%, #ff62381c, transparent 65%), #111619; }
.auth-context::before { top: 12%; right: -10%; width: 300px; box-shadow: 0 0 0 24px #ffffff02, 0 0 0 25px #ffffff07, 0 0 0 50px #ffffff02, 0 0 0 51px #ff623810; }
.auth-context h1 { margin: 24px 0 54px; font-size: clamp(40px, 4.5vw, 68px); line-height: 1.08; letter-spacing: -.055em; }
.auth-card { padding: clamp(28px, 4vw, 60px); }
.auth-card > span, .closed-access section > span, .account-panel:not(.route-panel) header > span { color: var(--ink-muted); }
.auth-card h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.2; margin-block: 18px; }
.auth-card input, .business-form input, .business-form select { min-width: 0; max-width: 100%; font-size: 16px; }
.auth-card input:focus-visible { outline: 3px solid var(--signal-deep); outline-offset: 2px; }
.auth-security, .account-state { font-size: 9px; }
.form-status { overflow-wrap: anywhere; line-height: 1.7; }
.auth-card .selected-plan-context { padding: 16px; margin: 0 0 24px; color: var(--ink); border: 1px solid var(--ink-line); border-left: 3px solid var(--signal-deep); border-radius: 10px; background: #ece8df; font-size: 12px; line-height: 1.6; }
.modal-open { overflow: hidden; }
.action-dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 36px; margin: auto; overflow-y: auto; overscroll-behavior: contain; color-scheme: light; color: var(--ink); background: var(--paper-raised); border: 1px solid #fff8; border-radius: 24px; box-shadow: 0 32px 120px #0009; }
.action-dialog::backdrop { background: #03080bd9; backdrop-filter: blur(6px); }
.action-dialog .eyebrow { color: var(--ink-muted); font-size: 9px; }
.dialog-symbol { display: grid; place-items: center; width: 52px; height: 52px; margin-top: 30px; color: var(--signal-deep); border: 1px solid #b63c2033; border-radius: 14px; background: #ff62380a; font-size: 27px; }
.action-dialog h2 { margin: 24px 0 16px; font: 550 32px/1.12 var(--display); letter-spacing: -.04em; }
.action-dialog p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--ink-line); }
.dialog-actions button { min-height: 48px; padding: 12px; border: 1px solid var(--ink-line); border-radius: 10px; font-size: 12px; color: var(--ink); background: transparent; }
.dialog-actions .dialog-accept { background: var(--ink); border-color: var(--ink); color: var(--paper-raised); }
.dialog-actions button:focus-visible { outline: 3px solid var(--signal-deep); outline-offset: 3px; }
@media (max-width: 540px) {
  .action-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 24px); margin: auto auto 8px; padding: 28px 22px max(28px, env(safe-area-inset-bottom)); border-radius: 22px; }
  .action-dialog h2 { font-size: 28px; }
  .dialog-actions { grid-template-columns: 1fr; }
}
@media (forced-colors: active) { .action-dialog, .dialog-actions button { border: 1px solid CanvasText; } }
.account-shell { grid-template-columns: 210px minmax(0, 1fr); gap: 24px; margin-block: 32px 64px; }
.account-content { padding-top: 24px; }
.account-heading { margin-bottom: 32px; }
.account-heading h1 { font-size: clamp(38px, 4.7vw, 64px); line-height: 1.1; letter-spacing: -.05em; }
.account-heading p { overflow-wrap: anywhere; }
.account-nav { background: #12171b; border-radius: 18px; }
.account-nav a.active { border-left: 2px solid var(--signal); background: #ff62380b; }
.account-panel { min-height: 240px; border: 1px solid var(--ink-line); border-radius: 18px; }
.account-panel header { flex-wrap: wrap; }
.account-panel header > a, .account-panel header > button { min-height: 32px; display: inline-flex; align-items: center; }
.subscription-panel > div { margin-top: 36px; }
.account-panel .empty-state, .account-panel .panel-loading { margin-top: 36px; }
.route-panel a { color: var(--ivory-muted); text-decoration: underline; text-underline-offset: 4px; }
.information-shell { margin-block: 56px; }
@media (hover: hover) { .plan-card:hover { border-color: #b63c2066; box-shadow: 0 8px 24px #15191d0b; } }
@media (max-width: 1040px) {
  .auth-context { padding: 28px; }
  .account-shell { grid-template-columns: 170px minmax(0, 1fr); gap: 16px; }
  .account-panel { grid-column: 1 / -1; }
  .plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .page-intro { display: block; min-height: auto; padding-block: 46px 32px; }
  .page-intro h1 { margin-top: 22px; font-size: clamp(40px, 10vw, 60px); }
  .page-intro p { margin-top: 24px; font-size: 14px; }
  .price-grid { padding: 16px; }
  .plan-toolbar { padding: 16px; }
  .pricing-note { grid-template-columns: 1fr; padding: 32px 22px; margin-bottom: 40px; }
  .auth-shell { grid-template-columns: minmax(0, 1fr); width: var(--content); min-height: 0; gap: 0; margin-top: 32px; }
  .auth-context { display: block; padding: 0 0 28px; border: 0; background: none; }
  .auth-context::before, .auth-route { display: none; }
  .auth-context h1 { margin: 14px 0 0; font-size: clamp(30px, 7vw, 44px); }
  .auth-context h1 br { display: initial; }
  .auth-card { min-height: 0; padding: 28px 22px; border-radius: 20px; }
  .account-shell { width: var(--content); grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .account-nav { position: static; display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; min-height: 0; overflow: visible; padding: 10px; }
  .account-nav a { min-height: 44px; display: flex; align-items: center; padding: 10px 12px; }
  .account-grid { grid-template-columns: minmax(0, 1fr); }
  .account-panel { min-height: 0; padding: 22px; }
  .account-heading h1 { font-size: clamp(32px, 8vw, 48px); }
  .information-shell { width: var(--content); margin-block: 32px; border-radius: 20px; }
  .information-shell h1 { font-size: clamp(28px, 7vw, 42px); }
}
@media (max-width: 540px) {
  .price-grid { padding: 12px; }
  .page-intro.pricing-intro { padding-block: 32px 24px; }
  .pricing-intro h1 { margin-top: 16px; }
  .pricing-intro p { margin-top: 16px; }
  .plan-cards { grid-template-columns: minmax(0, 1fr); }
  .price-grid article { min-height: 0; padding: 24px; }
  .plan-period { margin-top: 16px; }
  .pricing-note > div { min-height: 0; padding: 22px; }
  .plan-switch button { padding-inline: 7px; font-size: 11px; }
  .plan-toolbar b { font-size: 17px; }
  .closed-access h1 { font-size: 38px; line-height: 1.1; }
}

/* Wallet and owner console: the same charcoal / warm-paper product system. */
.auth-page .password-toggle { display:inline-flex;align-items:center;gap:6px;min-width:94px;min-height:44px; }
.auth-page .password-toggle .ui-icon { width:16px;height:16px;flex-basis:16px; }
.auth-page .input-shell input { padding-right:108px; }
@media(max-width:700px){body.auth-page .auth-context{padding:16px 24px;}body.auth-page .auth-context h1{font-size:32px;margin:10px 0;}.auth-page .auth-manifesto{font-size:13px;line-height:1.65;margin-top:10px;}}
.money-shell { width: min(1320px, calc(100% - 64px)); margin: 58px auto 80px; }
.wallet-page .compact-header { grid-template-columns:minmax(0,1fr) auto; }
.money-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 42px; }
.money-heading h1 { margin: 18px 0 0; font: 570 clamp(36px,5vw,70px)/1.04 var(--display); letter-spacing: -.055em; }
.money-heading h1 em,.account-heading h1 em { font-style: normal; color: #b0b7b6; }
.money-heading > p { color: #a4adaa; font-size: 14px; line-height: 1.9; }
.money-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; }
.balance-card { overflow: hidden; position: relative; display: flex; flex-direction: column; align-items: start; padding: 36px; border: 1px solid #ffffff17; border-radius: 26px; background: radial-gradient(ellipse at 110% 30%, #e6633440, transparent 60%),linear-gradient(140deg,#222b2e,#111719); }
.balance-card > * { position: relative; z-index: 1; }
.balance-card > strong { font: 550 clamp(38px,4.7vw,66px)/1.15 var(--display); letter-spacing: -.04em; margin: 30px 0 10px; overflow-wrap: anywhere; }
.balance-caption { color:#bec5c1; font-size:12px; }
.balance-separator { width:100%;border-bottom:1px solid #ffffff18;margin-top:30px; }
.balance-card p { max-width:390px;font-size:13px;line-height:1.8;color:#b3bbb9; }
.balance-card .balance-mark { position:absolute;right:-12px;bottom:32px;font:650 230px var(--display);color:#ffffff04;pointer-events:none;z-index:0; }
.balance-card button { margin-top:auto; }
.money-panel { min-width:0;padding:32px;border-radius:26px;background:var(--paper);color:var(--ink);border:1px solid #ffffff09; }
.money-panel h2 { font:580 clamp(24px,2.2vw,34px)/1.2 var(--display);letter-spacing:-.04em;margin:12px 0 18px; }
.money-panel > p { font-size:13px;line-height:1.8;color:var(--ink-muted); }
.money-panel .eyebrow,.owner-shell .eyebrow { color:var(--ink-muted); }
/* Wallet actions use the shared control contract below, not a separate skin. */
.amount-input { position:relative; }.amount-input input { padding-right:50px;font:500 30px var(--display); }.amount-input > span { position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--ink-muted); }
.business-form .field-help,.field-help { margin:0;color:var(--ink-muted);font-size:12px;line-height:1.7; }
.purchase-summary { display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 0;border-block:1px solid #282d2b16; }.purchase-summary strong { font:550 30px var(--display);letter-spacing:-.04em; }.purchase-summary span { font-size:13px;color:var(--ink-muted); }
.money-steps { display:grid;gap:25px;list-style:none;padding:0;margin:24px 0 30px; }.money-steps li { display:flex;gap:16px; }.money-steps li>b { display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border:1px solid #939b9750;border-radius:50%;font:550 12px var(--data); }.money-steps h3 { margin:3px 0 8px;font-size:15px; }.money-steps p { margin:0;font-size:13px;line-height:1.8;color:var(--ink-muted); }
.money-history { grid-column:1/-1; }.money-history header { display:flex;align-items:center;justify-content:space-between;gap:24px; }.money-history header>span { font-size:12px;color:var(--ink-muted); }.money-history h3 { margin:32px 0 12px;font-size:14px; }
.wallet-row { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid #888f892e;font-size:13px; }.wallet-row div { display:grid;gap:8px;min-width:0; }.wallet-row b { font-weight:550;overflow-wrap:anywhere; }.wallet-row small { color:var(--ink-muted); }.wallet-row strong { white-space:nowrap; }.money-state { padding:5px 10px;border-radius:7px;background:#d6cdb75e;font-size:11px; }.money-state.settled { background:#39784f1a;color:#26613b; }
.transfer-receipt { padding:20px;border:1px solid #4884574d;border-radius:14px;background:#5798600b; }.transfer-receipt b { display:block;margin:12px 0;font:500 12px var(--data);overflow-wrap:anywhere; }.transfer-receipt p { font-size:13px;line-height:1.7; }
.account-heading .money-button { margin-top:16px; }.account-nav a { flex-direction:row-reverse;justify-content:flex-end; }.account-panel header { flex-wrap:wrap; }.account-panel .data-row { align-items:center; }.account-panel header>button:disabled { border:1px dashed #8888;padding:10px;border-radius:10px; }
.owner-shell { max-width:1380px; }.owner-nav { display:flex;flex-wrap:wrap;gap:10px;margin:28px 0; }.owner-nav a { min-height:44px;padding:12px 16px;border:1px solid #88948b50;border-radius:12px;font-size:13px; }
.owner-metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }.owner-metric { display:flex;flex-direction:column;gap:16px;padding:24px;border:1px solid #727c7933;border-radius:18px; }.owner-metric:first-child { background:#17211d;color:#f1f0e8; }.owner-metric:first-child .eyebrow { color:#a7b7ae; }.owner-metric strong { font:550 clamp(22px,2vw,34px) var(--display);letter-spacing:-.04em; }.owner-metric small { font-size:11px;opacity:.7;line-height:1.7; }
.owner-resources { margin-block:36px; }.owner-resources>p { font-size:12px;color:var(--ink-muted);line-height:1.7; }#owner-resource-data { display:flex;gap:12px;flex-wrap:wrap; }.resource-item { display:flex;flex:1 1 170px;justify-content:space-between;align-items:center;gap:12px;padding:16px;border:1px solid #727c7933;border-radius:12px;font-size:12px; }.resource-item strong { font:550 22px var(--display); }
.owner-daily { padding-block:20px; }.owner-daily summary { cursor:pointer;padding:12px;font-weight:550; }.topup-review { margin-block:18px;padding:24px;border:1px solid #8885;border-radius:18px; }.topup-review h3 { font:550 14px var(--data);overflow-wrap:anywhere; }.topup-review>p { font-size:13px;overflow-wrap:anywhere; }.review-actions { display:flex;flex-wrap:wrap;gap:12px; }#admin-step-up-form { padding:24px;border-radius:16px;border:1px solid #b570363b;background:#b976180a; }
@media(max-width:1000px){.owner-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}.money-shell{width:calc(100% - 40px);}.money-panel,.balance-card{padding:26px;}.money-heading>p{display:none;}}
@media(max-width:700px){.money-shell{width:calc(100% - 24px);margin-block:30px;}.money-grid{grid-template-columns:minmax(0,1fr);gap:14px;}.money-heading{margin-bottom:26px;}.money-panel,.balance-card{padding:24px;border-radius:20px;}.money-history header,.wallet-row{align-items:start;flex-wrap:wrap;gap:12px;}.wallet-row>div{flex-basis:100%;}.money-history header>span{margin-top:-14px;}.money-button{width:100%;}.owner-metrics{grid-template-columns:minmax(0,1fr);}.owner-metric{padding:20px;}.owner-shell{padding:24px 18px;}.topup-review{padding:18px;}.auth-page .auth-context{display:flex;padding:28px;}.auth-orbit,.auth-features,.auth-steps{display:none;}.auth-page .auth-card{min-height:auto;}.auth-page .auth-context h1{margin:14px 0;font-size:36px;}.auth-page .auth-shell{gap:12px;}.account-nav{grid-template-columns:repeat(3,minmax(0,1fr));}.account-nav a{white-space:normal;font-size:11px;gap:7px;padding:12px 8px;}.account-nav .ui-icon{width:16px;height:16px;flex-basis:16px;}}

/* Action styling is defined once in the precision interface section below. */

/* A reading surface is not a modal: its return link works without scripts/history. */
.document-shell { width: min(1040px,calc(100% - 48px)); padding: 28px clamp(24px,5vw,64px) 44px; overflow-wrap: anywhere; background: var(--paper-raised); }
.document-shell.document-wide { width: min(1220px,calc(100% - 48px)); }
.document-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--ink-line); }
.document-toolbar .eyebrow { color: #5e6663; font-size: 9px; }
.document-close { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; flex-shrink: 0; padding: 10px 14px; color: #303834; border: 1px solid #abb2a9; border-radius: 12px; background: #e7e6dc; font: 550 12px var(--display); }
.document-close:hover { background: #d9ded2; border-color: #727e70; }
.document-shell h1 { margin: 38px 0 24px; font-size: clamp(32px,4.8vw,60px); max-width: 820px; }
.document-copy { max-width: 760px; }
.document-shell .document-intro { max-width: 680px; font-size: 17px; color: #5a635d; line-height: 1.8; margin-bottom: 40px; }
.document-shell nav.document-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding-top: 28px; border-top: 1px solid var(--ink-line); }
.document-shell nav.document-links a { border-radius: 12px; text-decoration: none; }
.document-status { padding: 20px 0; }
.document-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); align-items: start; gap: clamp(28px,5vw,68px); border-top: 1px solid var(--ink-line); }
.document-shell nav.document-toc { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 2px; margin-top: 32px; }
.document-shell .document-toc a { min-height: 44px; padding: 12px 0; font-size: 12px; color: #525e54; text-decoration: none; border-bottom: 1px solid #bac1b74d; }
.document-toc a:hover { color: #a7442a; }
.document-sections section { padding: 36px 0; border-bottom: 1px solid var(--ink-line); scroll-margin-top: 112px; }
.document-sections section:last-child { border: 0; padding-bottom: 0; }
.document-sections h2 { font: 550 clamp(24px,2.8vw,32px)/1.25 var(--display); letter-spacing: -.03em; margin: 12px 0 20px; }
.document-sections p,.document-copy p { font-size: 15px; line-height: 1.9; color: #444e49; }
.document-sections .eyebrow { color: #8e432b; }
.document-notice { margin: 0 0 36px; padding: 22px 24px; border-left: 3px solid #b7683d; border-radius: 0 12px 12px 0; background: #e9e1d1; }
.document-notice b { font: 600 13px var(--display); }
.document-notice p { color: #58584c; font-size: 12px; line-height: 1.8; margin-bottom: 0; }

/* Four clear steps and calm supporting cards below the canvas. */
.sequence li { border: 0; border-radius: 12px; background: #151a1d; }
.sequence button { min-height: 60px; padding: 12px 18px; border: 1px solid #ffffff14; border-radius: 12px; gap: 12px; }
.sequence button span { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border: 1px solid #ffffff19; border-radius: 8px; font-size: 10px; }
.sequence .active button { border-color: #ff956c77; background: linear-gradient(125deg,#3a2b23,#201d19); color: #ffc3a7; }
.sequence .active button span { color: #ffc3a7; border-color: #ff956c77; }

/* Shared footer: useful destinations, not a wall of tiny links. */
body .site-footer.footer-editorial { display: grid; grid-template-columns: minmax(210px,.85fr) minmax(0,2fr); gap: 48px 70px; margin: 0 auto; padding: 44px 0 28px; border-top: 1px solid var(--line); font-size: 13px; }
.footer-lead { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 32px; border: 1px solid #ffffff18; border-radius: 20px; background: radial-gradient(ellipse at 90% 0,#ea7b3520,transparent 60%),#13191b; }
.footer-lead h2 { font: 530 clamp(26px,3vw,38px)/1.15 var(--display); letter-spacing: -.04em; margin: 12px 0 0; color: var(--ivory); }
.footer-lead p { margin: 12px 0 0; max-width: 440px; color: var(--ash); font-size: 12px; line-height: 1.75; }
.footer-lead h2 em { color: #aab4ad; }
.footer-lead .primary { flex-shrink: 0; font-size: 13px; }
.footer-brand p { margin-block: 24px; line-height: 1.9; color: var(--ash); }
.footer-contact { padding: 10px 14px; font-size: 11px; border: 1px solid var(--line); color: var(--ivory-muted); }
.footer-editorial nav { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 28px; }
.footer-editorial nav > div { gap: 2px; }
.footer-editorial nav b { margin-bottom: 16px; color: #b5bfb9; font: 550 10px var(--display); letter-spacing: .07em; }
.footer-editorial nav a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; line-height: 1.6; font-size: 12px; color: #c7cfc9; }
.footer-editorial nav a:hover { text-decoration: underline; text-underline-offset: 5px; color: #ffb897; }
.footer-editorial .footer-bottom { grid-column: 1/-1; margin: 0; padding-top: 24px; gap: 20px; color: #a6b1ab; }
.footer-top { border: 1px solid var(--line); padding: 10px 14px; color: #d4dbd4; font-size: 11px; }
@media(max-width:1100px) {
  .platform-status { grid-template-columns: 1fr 1fr; }
  .platform-status .platform-next { grid-column: 1/-1; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-inline: 0; }
  body .site-footer.footer-editorial { gap: 36px; grid-template-columns: minmax(170px,.7fr) minmax(0,2fr); }
  .footer-editorial nav { gap: 18px; }
}
@media(max-width:800px) {
  .smart-explanation { align-items: start; flex-direction: column; gap: 20px; }
  .signal-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .signal-strip p,.signal-strip p:first-child { padding: 22px; }
  .document-layout { grid-template-columns: minmax(0,1fr); gap: 0; }
  .document-shell nav.document-toc { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-top: 22px; }
  .document-shell nav.document-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body .site-footer.footer-editorial { grid-template-columns: 1fr; }
  .footer-editorial nav { grid-template-columns: 1fr 1fr 1.2fr; }
  .footer-brand { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
  .footer-brand p { margin: 0; }
}
@media(max-width:540px) {
  .sequence { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .sequence button { font-size: 11px; min-height: 52px; padding: 10px; gap: 8px; }
  .smart-explanation { padding: 22px; }
  .smart-explanation .text-link { width: 100%; font-size: 11px; }
  .signal-strip { gap: 10px; }
  .signal-strip p,.signal-strip p:first-child { padding: 16px; gap: 10px; border: 1px solid var(--line); }
  .signal-strip b { font-size: 15px; }
  .signal-strip small { font-size: 11px; }
  .signal-strip .principle-label { flex-wrap: wrap; font-size: 8px; }
  .platform-status { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .platform-status article { display: grid; grid-template-columns: 48px minmax(0,1fr); padding: 20px; gap: 8px 16px; }
  .platform-status article > div { display: contents; }
  .platform-status article .platform-icon { grid-column: 1; grid-row: 1 / 3; }
  .platform-status article .eyebrow,.platform-status article h3 { grid-column: 2; margin: 0; }
  .platform-status article p { grid-column: 1/-1; margin: 10px 0; }
  .platform-status article .platform-badge { grid-column: 1/-1; justify-self: start; margin-top: 0; }
  .platform-status .platform-next { flex-direction: column; align-items: stretch; gap: 12px; }
  .platform-next p br { display: none; }
  .document-shell,.document-shell.document-wide { width: calc(100% - 24px); padding: 20px; margin-block: 24px; }
  .document-toolbar { align-items: center; gap: 12px; }
  .document-toolbar .eyebrow { max-width: 140px; font-size: 8px; }
  .document-close { min-width: 44px; gap: 8px; padding: 10px; }
  .document-shell h1 { margin-top: 28px; font-size: clamp(28px,8vw,38px); overflow-wrap: normal; word-break: normal; hyphens: auto; }
  .document-shell .document-intro { font-size: 14px; margin-bottom: 28px; }
  .document-copy p,.document-sections p { font-size: 14px; }
  .document-shell nav.document-links { grid-template-columns: minmax(0,1fr); }
  .document-notice { padding: 18px; }
  .footer-lead { flex-direction: column; align-items: start; padding: 26px; }
  .footer-lead .primary { width: 100%; }
  .footer-editorial nav { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .footer-editorial nav > div:last-child { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .footer-editorial nav > div:last-child b { grid-column: 1/-1; }
  .footer-editorial nav a { font-size: 12px; }
  .footer-editorial .footer-bottom { flex-wrap: wrap; }
  .footer-editorial .footer-bottom > span:nth-child(2) { display: none; }
  .auth-page .auth-secondary { flex-direction: column; }
  .auth-page .auth-secondary .quiet-link { flex-basis: auto; width: 100%; }
}
@media(prefers-reduced-motion:reduce) {
  :is(.primary,.secondary,.header-action,.text-link,.quiet-link,.money-button,.row-action), body .sequence button { transition: none; transform: none; }
}
@media(forced-colors:active) {
  :is(.primary,.secondary,.text-link,.quiet-link,.document-close,.sequence button) { border: 1px solid ButtonText; }
}

/* Obsidian controls. Quiet at rest; light travels only in response to intent.
   One surface, integrated icons, and explicit primary/secondary/destructive roles. */
:root { --action-bg: #192125; --action-text: #f1f3ed; --action-edge: #445156; --action-icon: #f59b66; --action-glow: #f59b6618; --action-sheen: #ffe6ce45; }
:is(.auth-card,.document-shell,.money-panel,.account-panel,.information-dialog,.plan-card,.plan-builder,.owner-shell,.action-dialog,.plan-switch) { --action-bg: #eeeee7; --action-text: #293536; --action-edge: #adb5ad; --action-icon: #854326; --action-glow: #99552a14; --action-sheen: #ffffffd0; }
body :is(.primary,.secondary,.header-action,.text-link,.quiet-link,.money-button,.row-action,.footer-contact,.footer-top,.document-close,.interface-action,.plan-card :where(a),.builder-retry,.plans-retry,.business-form :where(button),.auth-card :where(form > button[type="submit"]),.dialog-actions :where(button),[id="admin-refresh"],[id="admin-more"],[id="refresh-account"],[id="logout-all"],[id="payments-more"],[id="status-refresh"]) {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; height: auto; max-width: 100%; padding: 13px 20px;
  font: 570 13px/1.5 var(--display); letter-spacing: -.01em; text-align: left; text-decoration: none;
}
body :is(button:not(.scrollorb),.primary,.secondary,.header-action,.text-link,.quiet-link,.money-button,.footer-contact,.footer-top,.document-close,.interface-action,.plan-card a,.owner-nav a,.account-nav a,.account-panel header > a) {
  isolation: isolate; overflow: hidden; border: 1px solid var(--action-edge); border-radius: 12px;
  color: var(--action-text); background: linear-gradient(150deg,#ffffff08,transparent 60%),var(--action-bg);
  box-shadow: inset 0 1px #ffffff10,0 2px 3px #0000000a; cursor: pointer;
  transform: none; filter: none;
  transition: border-color 360ms ease,box-shadow 480ms ease,color 320ms ease,background-color 320ms ease;
}
/* Do not move the existing absolute canvas replay or password control. */
body button:not(.scrollorb):not(.smart-replay):not(.password-toggle):not(.dialog-close),body :is(.owner-nav a,.account-nav a,.account-panel header > a) { position: relative; }
body :is(.primary,.secondary,.header-action,.text-link,.quiet-link,.money-button,.row-action,.footer-contact,.footer-top,.document-close,.interface-action,.plan-card a,.builder-retry,.plans-retry,.business-form button,.auth-card form > button[type="submit"],.dialog-actions button) > .ui-icon {
  display: block; flex: 0 0 20px; width: 20px; height: 20px; padding: 0; margin-left: auto;
  border: 0; border-radius: 0; background: none; color: var(--action-icon);
  transition: transform 520ms cubic-bezier(.22,1,.36,1),color 360ms ease;
}
body :is(.primary,.money-button:not(.secondary),.auth-card form > button[type="submit"],.business-form button[type="submit"],.dialog-accept) {
  --action-bg: #111a1f; --action-text: #f4f5ef; --action-edge: #4d6065; --action-icon: #ff9a5c; --action-glow: #f1833c28; --action-sheen: #ffd5b354;
  min-height: 56px; padding: 15px 24px; font-size: 14px; font-weight: 620;
  color: var(--action-text); border-color: var(--action-edge);
  background: linear-gradient(145deg,#2b383e,#172126 46%,#0c1216);
  box-shadow: inset 0 1px #a9bec42b,inset 0 -1px #0008,0 6px 16px #0712181c;
}
/* Secondary destinations are deliberately lighter in emphasis, in either theme. */
body :is(.secondary,.money-button.secondary,.quiet-link,.text-link,.footer-contact,.footer-top,.document-close,.interface-action,.row-action) {
  background: transparent; box-shadow: inset 0 1px #ffffff08;
}
body .hero-actions .secondary { border-color: #ffffff24; color: #bdc8c7; }
body :is(.auth-card form > button[type="submit"],.account-page .business-form button[type="submit"]) { width: 100%; }
body :is(.primary,.header-action,.auth-secondary .quiet-link,.auth-card form > button[type="submit"],.interface-action,.document-close) { white-space: nowrap; }
body .auth-secondary .quiet-link { margin: 0; min-height: 52px; }
body .header-action { min-height: 46px; padding: 11px 16px; gap: 12px; font-size: 12px; }
body .compact-header .header-action { color: #f1f3ed; border-color: #445156; background: linear-gradient(145deg,#27343a,#131d22); }
body.auth-page .password-toggle { width: 94px; min-width: 94px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 9px; background: #2332340a; color: #354141; justify-content: center; white-space: nowrap; }
body.auth-page .password-toggle .ui-icon { width: 18px; height: 18px; padding: 0; background: none; border: 0; }
body :is(.row-action,.dialog-close,#logout-all) { --action-icon: #b8513e; }
body :is(button,a):focus-visible { outline: 3px solid #da8a4d; outline-offset: 4px; }
:is(.auth-card,.document-shell,.money-panel,.account-panel,.information-dialog) :is(button,a):focus-visible { outline-color: #985122; }
body :is(.sequence button,.plan-switch button,[data-plan-dimension],[data-device-view],.nav-toggle,.smart-replay) { border-radius: 9px; }
body :is(.sequence button,.plan-switch button,[data-plan-dimension],[data-device-view])[aria-pressed="true"] { --action-text: #f4f5ef; --action-icon: #ff9a5c; --action-edge: #667e83; background: #1c2a30; color: var(--action-text); border-color: var(--action-edge); box-shadow: inset 0 -2px #ff934d; }
body .sequence button span { border-radius: 50%; }
/* A single reversible light sweep. No keyframe loop and no moving hit targets. */
body :is(button:not(.scrollorb),.primary,.secondary,.header-action,.text-link,.quiet-link,.money-button,.footer-contact,.footer-top,.document-close,.interface-action,.plan-card a,.owner-nav a,.account-nav a,.account-panel header > a)::before {
  content: ''; pointer-events: none; position: absolute; z-index: -1; inset: -80% -30%;
  background: linear-gradient(110deg,transparent 30%,var(--action-sheen) 49%,transparent 68%);
  transform: translateX(-105%) skewX(-12deg); opacity: 0; animation: none;
  transition: transform 720ms cubic-bezier(.22,1,.36,1),opacity 300ms ease;
}
body :is(button:not(.scrollorb),.primary,.secondary,.header-action,.text-link,.quiet-link,.money-button,.footer-contact,.footer-top,.document-close,.interface-action,.plan-card a,.owner-nav a,.account-nav a,.account-panel header > a):focus-visible::before { transform: translateX(25%) skewX(-12deg); opacity: 1; }
@media(hover:hover) and (pointer:fine) {
  body :is(button:not(.scrollorb),.primary,.secondary,.header-action,.text-link,.quiet-link,.money-button,.footer-contact,.footer-top,.document-close,.interface-action,.plan-card a,.owner-nav a,.account-nav a,.account-panel header > a):hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: #c48050; box-shadow: inset 0 1px #ffffff24,0 0 0 1px #d28a4630,0 8px 28px var(--action-glow); color: var(--action-text); transform: none; filter: none;
  }
  body :is(button:not(.scrollorb),.primary,.secondary,.header-action,.text-link,.quiet-link,.money-button,.footer-contact,.footer-top,.document-close,.interface-action,.plan-card a,.owner-nav a,.account-nav a,.account-panel header > a):hover:not(:disabled):not([aria-disabled="true"])::before { transform: translateX(65%) skewX(-12deg); opacity: 1; }
  body :is(button,.primary,.secondary,.header-action,.text-link,.quiet-link,.money-button,.footer-contact,.footer-top,.document-close,.interface-action,.plan-card a):hover:not(:disabled):not([aria-disabled="true"]) > .ui-icon { transform: translateX(3px); }
}
body :is(button:not(.scrollorb),.primary,.secondary,.header-action,.text-link,.quiet-link,.money-button,.footer-contact,.footer-top,.document-close,.interface-action,.plan-card a):active:not(:disabled) { box-shadow: inset 0 2px 8px #00000030; transform: none; }
body :is(button:disabled,[aria-disabled="true"]) { opacity: .5; cursor: not-allowed; box-shadow: none; }
body .sequence button:disabled { opacity: 1; cursor: default; }
body :is(button:disabled,[aria-disabled="true"])::before { opacity: 0 !important; transition: none; }
body :is(.info-back,.document-back) { flex-direction: row-reverse; }
body .info-back { justify-self: start; }
body :is(.info-back,.document-back) > .ui-icon { margin: 0; rotate: 180deg; }
body .info-close > .ui-icon,body .document-close > .ui-icon { transition: rotate 480ms cubic-bezier(.22,1,.36,1); }
body .info-close:hover > .ui-icon,body .document-close:hover > .ui-icon { transform: none; rotate: 90deg; }
@media(max-width:540px) {
  body .header-action { padding: 10px 12px; gap: 8px; font-size: 11px; }
  body :is(.primary,.auth-card form > button[type="submit"]) { padding-inline: 18px; }
  body .auth-secondary .quiet-link { padding-inline: 15px; font-size: 12px; }
  body :is(.builder-options button,.plan-switch button) { min-width: 0; padding: 10px 4px; font: 550 11px/1.5 var(--display); white-space: normal; }
}
@media(max-width:380px) { .auth-page .site-header .brand span { display: none; } }
@media(prefers-reduced-motion:reduce) {
  body button::before,body a::before { transition: none !important; transform: none !important; opacity: 0 !important; }
  body :is(button,a) > .ui-icon { transition: none !important; transform: none !important; }
}
.ui-icon { display: block; }
.platform-status .platform-icon { display: flex; align-items: center; justify-content: center; gap: 0; }
.platform-status .platform-icon .ui-icon { margin: 0; padding: 0; flex: 0 0 24px; }
/* Alpha-weighted center of the unmodified 256px mark is x=145.69, not 127.5. */
.smart-core img,.auth-orbit img { transform: translateX(-7.1%); }
.auth-features span { justify-content: flex-end; }

/* Identical structural landmarks for login/register; content cannot recenter them. */
body:is([data-page="login"],[data-page="register"]) .auth-context { justify-content: flex-start; }
body:is([data-page="login"],[data-page="register"]) .auth-card { justify-content: flex-start; padding: 48px clamp(24px,3.4vw,52px); }
body:is([data-page="login"],[data-page="register"]) .auth-card h2 { min-height: 1.2em; margin: 18px 0 12px; font-size: clamp(24px,3vw,42px); line-height: 1.2; }
body:is([data-page="login"],[data-page="register"]) .auth-card > p:not(.auth-privacy) { min-height: 3.6em; margin: 0 0 24px; line-height: 1.8; }
body:is([data-page="login"],[data-page="register"]) .auth-shell { align-items: stretch; margin-block: 32px 64px; }
body:is([data-page="login"],[data-page="register"]) .auth-context h1 { margin: 24px 0; }
body:is([data-page="login"],[data-page="register"]) .auth-card .auth-privacy { margin: 24px 0 0; min-height: 54px; font-size: 12px; line-height: 1.8; }
.auth-privacy a { padding-block: 4px; }
.auth-page .site-header .header-action { min-width: 172px; }
.site-header nav a { white-space: nowrap; }

/* Public information board and native top-layer reader. */
html.info-open { overflow: hidden; }
html.info-open body { position: fixed; top: var(--info-scroll); left: 0; right: 0; width: 100%; }
.information-dialog { width: min(1160px,calc(100% - 64px)); height: 220px; margin: 32px auto; max-width: none; max-height: calc(100dvh - 64px); padding: 0; border: 1px solid #545753; border-radius: 20px; color: #20292a; background: #f4f1e8; overflow: auto; overflow-anchor: none; scrollbar-width: none; overscroll-behavior: contain; box-shadow: 0 30px 100px #0009; }
.information-dialog::-webkit-scrollbar { display: none; }
.information-dialog::backdrop { background: #070c10cc; backdrop-filter: blur(10px); }
.info-dialog-toolbar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 174px minmax(0,1fr) auto; align-items: center; gap: 20px; min-height: 88px; padding: 16px 28px; background: #f4f1e8f5; border-bottom: 1px solid #c8cabe; }
.info-dialog-toolbar .info-back { grid-column: 1; grid-row: 1; }
.info-dialog-toolbar .eyebrow { grid-column: 2; grid-row: 1; }
.info-dialog-toolbar .info-close { grid-column: 3; grid-row: 1; }
.info-dialog-toolbar .eyebrow { font-size: 9px; color: #5b635d; margin-right: auto; }
.info-dialog-toolbar .info-close { margin-left: auto; }
.info-dialog-toolbar::after { content: ''; position: absolute; bottom: -1px; left: 0; width: var(--document-progress,0%); height: 2px; background: #ca7547; box-shadow: 0 0 6px #ca754755; }
.info-dialog-content { display: flow-root; min-height: 0; }
.info-dialog-content > .document-shell { width: 100%; margin: 0; padding: 38px 40px 48px; border-radius: 0; box-shadow: none; background: transparent; }
.info-dialog-content .document-shell h1 { margin-top: 0; }
.info-dialog-content .document-toc { top: 112px; }
.info-dialog-content :is(section,[id]) { scroll-margin-top: 108px; }
.info-dialog-content .document-links { margin-top: 36px; }
.info-loading { padding: 40px; font-size: 15px; color: #475553; }
.info-dialog-content > .interface-action { margin: 0 0 32px 32px; }
.hub-page { color: #263030; }
.hub-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0 36px; align-items: end; padding: 0 0 28px; }
.hub-heading > .eyebrow { grid-column: 1/-1; }
.hub-heading .eyebrow { color: #876047; font-size: 9px; }
.document-shell .hub-heading h1 { font-size: clamp(32px,4vw,52px); line-height: 1.05; letter-spacing: -.05em; margin: 18px 0 0; }
.hub-heading h1 em { color: #78817a; font-style: normal; }
.hub-heading p { color: #5c655e; font-size: 14px; line-height: 1.8; margin: 0; }
.info-board { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.info-card { display: block; perspective: 1100px; border-radius: 12px; text-decoration: none; min-width: 0; }
.info-card-turn { position: relative; display: block; height: 216px; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.info-card-front,.info-card-back { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 26px; border: 1px solid #3e4949; border-radius: 12px; background: radial-gradient(ellipse at 0 0,#303936,#141c1f 80%); color: #f6f0e5; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.info-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.info-card-top > span { display: flex; align-items: center; justify-content: center; gap: 0; width: 42px; height: 42px; color: #efb08d; border: 1px solid #e0a47f4d; border-radius: 8px; }
.info-card-top .ui-icon { margin: 0; }
.info-card-top small,.info-card-back small { color: #aebcb5; font: 500 8px var(--data); letter-spacing: .12em; }
.info-card-front strong { margin-top: auto; padding-top: 24px; font: 550 clamp(16px,1.7vw,22px)/1.3 var(--display); letter-spacing: -.02em; }
.info-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 16px; border-top: 1px solid #62716a44; color: #aeb9b2; font-size: 11px; }
.info-card-foot > span { color: #f1af86; font-size: 19px; }
.info-card-back { transform: rotateY(180deg); border-color: #b87553; background: #252722; }
.info-card-back > span { padding-block: 16px; font-size: 13px; font-weight: 400; line-height: 1.7; color: #e1dfd3; }
.info-card-back b { display: flex; justify-content: space-between; margin-top: auto; color: #ffc49f; font: 550 11px var(--display); }
.hub-note { margin: 24px 0 0; color: #66746b; font-size: 11px; line-height: 1.7; }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .info-card:hover .info-card-turn,.info-card:focus-visible .info-card-turn { transform: rotateY(180deg); }
}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce) {
  .info-card-turn { display: flex; flex-direction: column; height: auto; transform: none; }
  .info-card-front,.info-card-back { position: relative; transform: none; backface-visibility: visible; background: #192225; }
  .info-card-front { border-radius: 12px 12px 0 0; padding-bottom: 10px; border-bottom: 0; }
  .info-card-front strong { padding-top: 20px; }
  .info-card-back { border-radius: 0 0 12px 12px; border-color: #3e4949; border-top: 0; padding-top: 0; flex: 1; }
  .info-card-foot,.info-card-back small { display: none; }
  .info-card-back > span { padding-top: 0; }
}

/* Scrollorb enhances native scroll; no wheel/touch/key interception. */
html.scrollorb-ready { scrollbar-width: none; }
html.scrollorb-ready::-webkit-scrollbar { display: none; }
.scrollorb { position: fixed; z-index: 35; right: max(18px,env(safe-area-inset-right)); bottom: max(24px,env(safe-area-inset-bottom)); display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 1px solid #67736b66; border-radius: 50%; color: #ffbb91; background: #101a1cf2; box-shadow: 0 8px 32px #0005,inset 0 0 15px #ff8e4110; cursor: pointer; }
.scrollorb-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.scrollorb-ring circle { fill: none; stroke: #ff995e; stroke-width: 1.8px; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 3px #ff804e); }
.scrollorb-plane { width: 24px; height: 24px; margin-top: -5px; fill: #edab8522; stroke: #ffc19a; stroke-width: 1.4; stroke-linejoin: round; }
.scrollorb-value { position: absolute; bottom: 9px; font: 500 8px var(--data); color: #bdbfac; }
.info-open .scrollorb,.modal-open .scrollorb { visibility: hidden; }
.scrollorb-clearance:not(:focus-visible) { visibility: hidden; pointer-events: none; }
body:has(.scrollorb:not([hidden])) { padding-bottom: 88px; }
@media(max-width:1050px) { .site-header nav { gap: 16px; font-size: 11px; } .info-board { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:860px) { .auth-page .site-header .header-action { min-width: 0; } }
@media(max-width:700px) {
  body:is([data-page="login"],[data-page="register"]) .auth-context { padding: 24px; }
  body:is([data-page="login"],[data-page="register"]) .auth-card { padding: 30px 22px; }
  body:is([data-page="login"],[data-page="register"]) .auth-card > p:not(.auth-privacy) { min-height: 3.6em; }
  body:is([data-page="login"],[data-page="register"]) .auth-manifesto { display: none; }
  .auth-page .auth-manifesto { max-width: none; }
  .information-dialog { width: calc(100% - 20px); margin: 10px auto; max-height: calc(100dvh - 20px); border-radius: 16px; }
  .info-dialog-toolbar { grid-template-columns: minmax(0,1fr) auto; min-height: 76px; padding: 12px; gap: 8px; }
  .info-dialog-toolbar .info-close { grid-column: 2; }
  .info-dialog-toolbar .eyebrow { display: none; }
  .hub-heading { grid-template-columns: 1fr; gap: 16px; }
  .document-shell .hub-heading h1 { margin-top: 0; }
  .info-dialog-content > .document-shell { padding: 28px 22px 36px; }
  .info-dialog-content .document-layout { grid-template-columns: 1fr; }
  .info-card-front,.info-card-back { padding: 22px; }
  .scrollorb { width: 54px; height: 54px; right: 12px; bottom: max(16px,env(safe-area-inset-bottom)); }
  .scrollorb-value { bottom: 6px; font-size: 7px; }
}
@media(max-width:540px) { .info-board { grid-template-columns: minmax(0,1fr); } .info-card-turn { height: 226px; } }
@media(max-width:540px) and (hover:none), (max-width:540px) and (prefers-reduced-motion:reduce) { .info-card-turn { height: auto; } .info-card-front { padding-bottom: 12px; } .info-card-back { padding-top: 0; } }
@media(max-width:359px) { body:is([data-page="login"],[data-page="register"]) .auth-card > p:not(.auth-privacy) { min-height: 5.4em; } }
@media(prefers-reduced-motion:reduce) { .info-card-turn,.scrollorb-ring,body button,body a { transition: none !important; } }
@media(forced-colors:active) {
  html.scrollorb-ready { scrollbar-width: auto; }
  html { scrollbar-gutter: stable; }
  html.scrollorb-ready::-webkit-scrollbar { display: block; }
  .scrollorb,.info-card-front,.info-card-back,.interface-action { border: 1px solid ButtonText; color: ButtonText; background: Canvas; }
  .scrollorb-ring circle,.scrollorb-plane { stroke: ButtonText; filter: none; }
  .information-dialog { scrollbar-width: auto; }
}

/* Continuous motion: stable boxes first, decorative movement second. */
:root { --motion-ease: cubic-bezier(.32,0,.16,1); }
/* Keep scrollbar geometry and the orb's bottom clearance stable at first paint,
   during near-bottom disclosures, and between full document navigations. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { padding-bottom: 88px; }
.motion-disclosure { display: flow-root; }
.faq, .document-shell { overflow-anchor: none; }
.faq summary i { transition: transform 480ms var(--motion-ease),color 320ms,border-color 320ms; }
.faq details[data-expanded="false"] summary i { transform: rotate(0); }
.auth-page .site-header .header-action { width: 172px; flex-shrink: 0; }
.auth-page .auth-card { overflow-anchor: none; }
.auth-card[aria-busy="true"] { cursor: progress; }
.auth-card h2:focus:not(:focus-visible) { outline: none; }
.information-dialog[open]::backdrop { animation: information-veil-in 640ms var(--motion-ease) both; }
.information-dialog[data-motion-state="closing"]::backdrop { animation: information-veil-out 260ms ease both; }
.action-dialog[open]:not([data-motion-state="closing"]) { animation: action-panel-in 440ms var(--motion-ease) both; }
.action-dialog[open]::backdrop { animation: information-veil-in 440ms var(--motion-ease) both; }
.action-dialog[data-motion-state="closing"]::backdrop { animation: information-veil-out 220ms ease both; }
@keyframes action-panel-in { from { opacity: 0; transform: translateY(16px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }
.info-dialog-content[aria-busy="true"] { cursor: progress; }
.info-dialog-content h1:focus { outline: none; }
.info-card-turn { transition-duration: 780ms; transition-timing-function: var(--motion-ease); }
.scrollorb { transition: opacity 260ms ease,visibility 260ms; }
.scrollorb-clearance:not(:focus-visible) { opacity: 0; }
@keyframes information-veil-in { from { background-color: #070c1000; backdrop-filter: blur(0); } to { background-color: #070c10cc; backdrop-filter: blur(10px); } }
@keyframes information-veil-out { from { background-color: #070c10cc; backdrop-filter: blur(10px); } to { background-color: #070c1000; backdrop-filter: blur(0); } }
@media(max-width:420px) { .auth-page .site-header .header-action { width: 148px; } }
@media(prefers-reduced-motion:reduce) {
  .information-dialog::backdrop,body button::before,body a::before { animation: none !important; }
  .motion-disclosure,.scrollorb,.faq summary i { transition: none !important; }
}
@media(forced-colors:active) {
  html { scrollbar-width: auto; }
  html::-webkit-scrollbar { display: block; }
  body button::before,body a::before { display: none; }
}
/* Focus follows the field edge; keep a real keyboard indicator without a halo gap. */
body :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea):is(:focus,:focus-visible) {
  border-color:#648176;outline:1px solid #648176;outline-offset:0;
  box-shadow:inset 0 0 0 1px #64817620;
}
.auth-card .remember-login { display:flex;align-items:center;gap:12px;margin:2px 0 6px;cursor:pointer;color:#394e44; }
.auth-card .remember-login input { appearance:auto;flex:0 0 20px;width:20px;min-height:20px;height:20px;margin:0;padding:0;accent-color:#315849; }
.remember-login>span { display:grid;gap:3px; }
.remember-login b { font-size:13px;font-weight:550; }
.remember-login small { font-size:11px;font-weight:400;color:#68776d; }
.remember-login input:focus-visible { outline:2px solid #648176;outline-offset:2px; }
.auth-card .auth-preference-row { display:flex;align-items:center;gap:12px;min-height:64px;margin:0;color:#394e44; }
.auth-preference-row>span:last-child { display:grid;gap:3px; }
.auth-preference-row b { font-size:13px;font-weight:550;line-height:1.5; }
.auth-preference-row small { font-size:11px;font-weight:400;line-height:1.5;color:#68776d; }
.auth-preference-row>span[data-icon] { flex:0 0 20px;color:#527349; }
@media(hover:hover) {
  body :is(.auth-card,.account-content,.document-shell,.information-dialog,.action-dialog,.plan-card,.plan-builder,.plan-toolbar,.money-panel,.owner-shell) :is(.secondary,.quiet-link,.row-action,.document-close,.interface-action,.dialog-cancel,button[type="button"]:not(.password-toggle):not([aria-pressed="true"])):not(:disabled):hover {
    color:#203f32;border-color:#728d7f;background:#dfe8dc;
    box-shadow:inset 0 -2px #9db39c,0 4px 12px #1a38200d;
  }
  body .password-toggle:hover { background:#d4dfd2;color:#233f31;border-color:#8ba18f; }
  body :is(#refresh-account,#admin-refresh,#admin-more,#payments-more,#status-refresh):enabled:hover {
    color:#203f32;border-color:#728d7f;background:#dfe8dc;
    box-shadow:inset 0 -2px #9db39c,0 4px 12px #1a38200d;
  }
  body.account-app #logout-all:enabled:hover { color:#6b3224;border-color:#b5866b;background:#ead4bf;box-shadow:inset 0 -2px #caa58a; }
}
@media(forced-colors:active) { body :is(input,select,textarea):focus-visible { outline:2px solid Highlight;outline-offset:0; } }

/* Payment is one bounded surface: the QR stays unfiltered and square, while
   only the content scrolls on small screens; actions never leave the viewport. */
.action-dialog.topup-dialog { width:min(760px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border-radius:28px;overflow:hidden;background:#f6f5ef; }
.topup-dialog[open] { display:flex;flex-direction:column; }
.topup-dialog-header { display:flex;align-items:center;justify-content:space-between;flex:none;padding:20px 28px;border-bottom:1px solid #263d3024; }
.topup-brand { display:flex;align-items:center;gap:12px;color:#142b25;font-weight:650;font-size:21px;letter-spacing:.04em; }
.topup-brand img { display:block;object-fit:contain;flex:none; }
.topup-brand small { display:block;margin-top:3px;font-size:8px;font-weight:450;letter-spacing:.14em; }
.action-dialog.topup-dialog .dialog-close { position:static;flex:none;width:40px;height:40px; }
.topup-dialog-body { min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px 28px 16px;scrollbar-width:thin; }
.topup-dialog .topup-payment-intro h2 { margin:10px 0 10px;font-size:30px; }
.topup-dialog .topup-payment-intro p { max-width:58ch;font-size:12px;line-height:1.65; }
.topup-payment-grid { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;margin-top:22px;align-items:center; }
.topup-payment-details { min-width:0; }
.topup-payment-amount { display:block;margin:8px 0 18px;font:550 clamp(28px,5vw,38px)/1.15 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere; }
.topup-reference { padding:16px 0;border-block:1px solid #263d3024; }
.topup-reference>span { display:block;font-size:11px;color:#58685c; }
.topup-reference b { display:block;margin:6px 0;font:550 17px/1.4 var(--display);letter-spacing:.04em; }
.topup-reference small { display:block;color:#58685c;font-size:10px;line-height:1.6;max-width:30ch; }
.topup-dialog .topup-bank-note { margin-top:14px;font-size:11px;line-height:1.65; }
.topup-dialog .topup-bank-link { display:flex;margin-top:14px;padding:10px 14px;min-height:44px;font-size:11px; }
.topup-qr { min-width:0;margin:0;text-align:center; }
.topup-qr-paper { padding:16px;background:#fff;border:1px solid #d4d9cd;border-radius:20px;box-shadow:0 12px 26px #142b2509; }
.topup-qr img { display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;filter:none;transform:none; }
.topup-qr figcaption { margin:12px auto 0;font-size:10px;line-height:1.6;color:#58685c; }
.topup-dialog .topup-payment-notice { margin-top:22px;padding:12px 14px;border-radius:12px;background:#e7ece1;color:#3c513d;font-size:11px;line-height:1.65; }
.topup-dialog-footer { flex:none;padding:12px 28px 18px;border-top:1px solid #263d3024;background:#f6f5ef; }
.topup-dialog .topup-dialog-status { font-size:11px;line-height:1.5; }
.topup-dialog-status:empty { display:none; }
.topup-dialog .topup-dialog-status[data-state="error"] { color:#93341e;margin-bottom:10px; }
.topup-dialog .dialog-actions { grid-template-columns:1fr 1.4fr;gap:12px;margin:0;padding:0;border:0; }
body .topup-dialog .dialog-actions button { min-height:48px;padding:12px 16px;font-size:12px;white-space:nowrap; }
body .topup-dialog .dialog-accept { --action-text:#fff6e7;--action-icon:#e9ba83;color:var(--action-text);border-color:#405b50;background:linear-gradient(120deg,#243e34,#122720);box-shadow:inset 0 1px #ffffff28,0 5px 14px #152a241a; }
.topup-dialog-footer>small { display:block;text-align:center;margin-top:10px;color:#627063;font-size:9px;line-height:1.5; }
@media(hover:hover) {
  body .topup-dialog .dialog-accept:enabled:hover { color:#fff6e7;border-color:#b09a70;background:linear-gradient(120deg,#365849,#203b31);box-shadow:inset 0 1px #ffffff35,0 7px 20px #152a2424; }
}
@media(max-width:540px) {
  .action-dialog.topup-dialog { width:calc(100% - 16px);max-height:calc(100dvh - 16px);margin:auto;border-radius:22px; }
  .topup-dialog-header { padding:14px 18px; }
  .topup-dialog-body { padding:18px; }
  .topup-dialog .topup-payment-intro h2 { font-size:25px; }
  .topup-payment-grid { grid-template-columns:1fr;gap:10px;margin-top:16px; }
  .topup-payment-details { display:contents; }
  .topup-payment-details>.eyebrow { grid-row:1;text-align:center;padding:0; }
  .topup-payment-amount { grid-row:2;margin:0;text-align:center; }
  .topup-reference { grid-row:3;padding:10px 0;text-align:center; }
  .topup-reference small { max-width:none; }
  .topup-qr { grid-row:4;width:min(220px,100%);justify-self:center; }
  .topup-dialog .topup-bank-link { grid-row:5;margin-top:0; }
  .topup-dialog .topup-bank-note { grid-row:6;margin-top:0; }
  .topup-qr-paper { padding:14px; }
  .topup-dialog-footer { padding:12px 18px max(14px,env(safe-area-inset-bottom)); }
  .topup-dialog-footer>small { font-size:8px; }
}
@media(max-height:620px) and (max-width:540px) {
  .topup-dialog-header { padding:10px 16px; }
  .topup-dialog-body { padding:12px 16px; }
  .topup-dialog .topup-payment-intro>p,.topup-payment-details>.eyebrow,.topup-reference small { display:none; }
  .topup-dialog .topup-payment-intro h2 { font-size:22px;margin:8px 0; }
  .topup-payment-grid { gap:6px;margin-top:10px; }
  .topup-payment-amount { font-size:25px; }
  .topup-reference { padding:6px 0; }
  .topup-reference b { margin:2px 0;font-size:14px; }
  .topup-qr { width:176px; }
  .topup-qr figcaption { display:none; }
}
@media(max-height:600px) and (min-width:541px) {
  .topup-dialog-header { padding:12px 24px; }
  .topup-dialog-body { padding:16px 24px; }
  .topup-dialog .topup-payment-intro h2 { font-size:26px; }
  .topup-payment-grid { grid-template-columns:1fr 210px;margin-top:14px; }
}
@media(min-width:541px) and (max-height:740px) {
  .topup-qr { width:216px;justify-self:center; }
  .topup-dialog-body { padding-top:16px; }
  .topup-dialog .topup-payment-intro h2 { margin-top:8px; }
}
@media(min-width:541px) and (max-height:440px) {
  .topup-dialog-header { padding:8px 20px; }
  .topup-dialog-body { padding:10px 20px; }
  .topup-payment-intro { display:none; }
  .topup-payment-grid { grid-template-columns:minmax(0,1fr) 150px;margin-top:0;gap:16px;align-items:start; }
  .topup-payment-amount { margin:4px 0 10px;font-size:28px; }
  .topup-reference { padding:8px 0; }
  .topup-qr { width:150px; }
  .topup-qr-paper { padding:9px;border-radius:14px; }
  .topup-qr figcaption { display:none; }
  .topup-dialog-footer { padding:8px 20px; }
  .topup-dialog-footer>small { margin-top:5px;font-size:8px; }
  body .topup-dialog .dialog-actions button { min-height:44px;padding:10px 14px; }
}
@media(prefers-reduced-motion:reduce) { .topup-dialog,.topup-dialog::backdrop { animation:none!important;scroll-behavior:auto; } }
@media(forced-colors:active) { .topup-dialog,.topup-qr-paper,.topup-dialog-header,.topup-dialog-footer { border:1px solid CanvasText; } }