/* Authoritative Celestial handoff composition, 2026-09-13.
   Loaded last so the supplied brand guide—not legacy workspace layers—sets layout. */
:root {
  --celestial-canvas: #070b1a;
  --celestial-sidebar: #090f22;
  --celestial-surface: #10182d;
  --celestial-surface-2: #17283a;
  --celestial-border: #34435f;
  --celestial-text: #f4f7ff;
  --celestial-muted: #aebbd2;
  --celestial-violet: #7253df;
  --celestial-lilac: #b7a7ff;
  --celestial-aurora: #5de4e5;
  --celestial-rose: #f5a4db;
  --celestial-gold: #f5cd83;
}

body { background: var(--celestial-canvas); color: var(--celestial-text); }

@media (min-width: 1181px) {
  .dashboard-page .site-header { width: 232px; background: var(--celestial-sidebar); }
  .dashboard-page .header-inner { padding: 25px 16px 22px; }
  .dashboard-page main,
  .dashboard-page .site-footer { margin-left: 232px; }
  .dashboard-page .workspace-topbar,
  .dashboard-page .hero,
  .dashboard-page .content-shell,
  .dashboard-page .footer-inner { width: calc(100% - 88px); max-width: none; }
}

.dashboard-page .workspace-topbar { min-height: 96px; margin-top: 0; }
.dashboard-page .workspace-title { font-size: 20px; }
.dashboard-page .hero {
  position: relative;
  min-height: 320px;
  margin-top: 0;
  border: 0;
  border-radius: 22px;
  background: #070b1a url('/assets/celestial/celestial-eclipse.png') 68% center / cover no-repeat;
}
.dashboard-page .hero::before {
  background: linear-gradient(90deg, rgb(7 11 26 / 98%) 0%, rgb(7 11 26 / 92%) 34%, rgb(7 11 26 / 27%) 69%, rgb(7 11 26 / 5%) 100%);
}
.dashboard-page .hero-grid { min-height: 320px; padding: 38px 40px; }
.dashboard-page .hero-copy { max-width: 610px; }
.dashboard-page .hero .section-kicker { color: var(--celestial-aurora); }
.dashboard-page .hero h1 { margin: 8px 0 10px; font-size: clamp(46px, 4.2vw, 60px); line-height: 1.04; }
.dashboard-page .hero-summary { font-size: 16px; }
.dashboard-page .hero-actions { margin-top: 18px; }
.dashboard-page .hero-notice { display: none; }
.hero-live-label {
  position: absolute;
  top: 25px;
  right: 24px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 6px 13px;
  border-radius: 999px;
  color: var(--celestial-gold);
  background: #322a22;
  font-size: 11px;
  font-weight: 700;
}
.hero-live-label .status-dot { background: currentColor; }

.dashboard-page .overview-content { padding-top: 24px; }
.dashboard-page .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dashboard-page .metric-card {
  position: relative;
  min-height: 128px;
  padding: 20px 20px 17px;
  border: 1px solid var(--celestial-border);
  border-radius: 17px;
  background: var(--celestial-surface);
}
.dashboard-page .metric-card::before {
  content: '';
  width: 32px;
  height: 3px;
  margin-bottom: 12px;
  border-radius: 99px;
  background: var(--celestial-lilac);
}
.dashboard-page .metric-card:nth-child(1)::before { background: var(--celestial-gold); }
.dashboard-page .metric-card:nth-child(2)::before { background: var(--celestial-aurora); }
.dashboard-page .metric-card:nth-child(3)::before { background: #75e2ba; }
.dashboard-page .metric-card:nth-child(4)::before { background: var(--celestial-lilac); }
.dashboard-page .metric-card strong { margin: 6px 0 0; font-size: 32px; line-height: 1; }
.dashboard-page .metric-card small { margin: -24px 0 0 54px; font-size: 12px; }
.dashboard-page .metric-scope { margin: 22px 0 0; }

.overview-lower-grid { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(310px, 1fr); gap: 22px; margin-top: 24px; }
.overview-activity-card,
.overview-next-card { min-width: 0; padding: 22px 24px; border-radius: 18px; }
.overview-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.overview-card-heading h2 { margin: 0; font-size: 21px; }
.overview-card-heading p { margin: 5px 0 0; color: var(--celestial-muted); font-size: 12px; }
.overview-card-heading a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
  color: var(--celestial-lilac);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.overview-search { display: block; margin-top: 17px; }
.overview-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid #7585ac;
  border-radius: 10px;
  color: var(--celestial-text);
  background: #0b1428;
  font: inherit;
}
.overview-activity { margin-top: 12px; overflow-x: auto; }
.overview-activity table { width: 100%; min-width: 570px; border-collapse: collapse; }
.overview-activity th,
.overview-activity td { padding: 13px 4px; border-bottom: 1px solid #273551; text-align: left; font-size: 12px; }
.overview-activity th { color: var(--celestial-muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.overview-activity td:last-child,
.overview-activity th:last-child { text-align: right; }
.overview-activity td a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
  color: var(--celestial-lilac);
  font-weight: 700;
  text-decoration: none;
}
.overview-showing { margin: 13px 0 0; color: var(--celestial-muted); font-size: 11px; }
.overview-empty { min-height: 190px; display: grid; place-content: center; text-align: center; color: var(--celestial-muted); }
.overview-empty p { margin: 5px 0 0; }
.next-step-list { display: grid; gap: 19px; margin: 22px 0 0; padding: 0; list-style: none; }
.next-step-list li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; }
.next-step-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #1d2b4a; font-size: 22px; }
.next-step-cyan { color: var(--celestial-aurora); }
.next-step-violet { color: var(--celestial-lilac); }
.next-step-gold { color: var(--celestial-gold); }
.next-step-list strong,
.next-step-list b { display: block; }
.next-step-list strong { font-size: 15px; }
.next-step-list b { margin-top: 3px; color: var(--celestial-aurora); font-size: 11px; font-weight: 500; }
.next-step-list li:nth-child(2) b { color: var(--celestial-lilac); }
.next-step-list li:nth-child(3) b { color: var(--celestial-gold); }
.next-step-list p { margin: 8px 0 0; color: var(--celestial-muted); font-size: 11px; line-height: 1.45; }

/* Checkout and receipt: the mobile handoff is the primary composition. */
.checkout-page { background: var(--celestial-canvas); }
.checkout-page::before { inset: 0; background: var(--celestial-canvas) url('/assets/celestial/aurora-flow.png') left top / min(58vw, 820px) 100% no-repeat; }
.checkout-page::after { inset: 0; background: linear-gradient(90deg, rgb(7 11 26 / 10%), rgb(7 11 26 / 88%) 65%, var(--celestial-canvas)); }
.checkout-header { width: min(calc(100% - 48px), 1320px); }
.checkout-header .secure-label { min-height: 30px; padding: 6px 12px; border: 0; border-radius: 999px; color: var(--celestial-gold); background: #322a22; font-size: 11px; }
.checkout-header .secure-label svg { width: 12px; height: 12px; }
.payment-main { grid-template-columns: minmax(360px, 1fr) minmax(460px, 590px); }
.checkout-card { grid-column: 2; padding: 34px; border-radius: 22px; }
.checkout-assurance { grid-column: 1; grid-row: 1; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.checkout-assurance > img,
.checkout-assurance ul { display: none; }
.checkout-assurance h2 { max-width: 560px; font-size: clamp(42px, 4.6vw, 64px); line-height: 1.04; }
.checkout-assurance > div > p:last-child { max-width: 500px; font-size: 16px; }
.checkout-consent { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0; color: var(--celestial-text); font-size: 13px; line-height: 1.5; }
.checkout-consent input { width: 20px; height: 20px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--celestial-violet); }
.checkout-consent[hidden] { display: none; }
.checkout-sandbox-note { margin: 18px 0; padding: 13px 14px; border: 1px solid #335367; border-radius: 12px; color: #d5e7f0; background: var(--celestial-surface-2); font-size: 12px; }
.authorization-receipt { text-align: center; }
.authorization-receipt .receipt-mark { margin-inline: auto; }

@media (max-width: 1180px) {
  .dashboard-page .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-lower-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .dashboard-page .workspace-topbar { min-height: 72px; }
  .dashboard-page .hero { min-height: 0; }
  .dashboard-page .hero-grid { min-height: 0; padding: 26px 20px 30px; }
  .hero-live-label { top: 18px; right: 16px; }
  .dashboard-page .hero .section-kicker { padding-right: 130px; }
  .dashboard-page .metric-card small { display: block; margin: 7px 0 0; }
  .overview-lower-grid { gap: 14px; margin-top: 18px; }
  .overview-activity-card,
  .overview-next-card { padding: 18px; }
  .overview-activity { overflow: visible; }
  .overview-activity table { min-width: 0; }
  .overview-activity thead { display: none; }
  .overview-activity tbody,
  .overview-activity tr,
  .overview-activity td { display: block; width: 100%; }
  .overview-activity tr { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 14px; padding: 14px 0; border-bottom: 1px solid #273551; }
  .overview-activity td { padding: 0; border: 0; }
  .overview-activity td:nth-child(1) { grid-column: 1; }
  .overview-activity td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; }
  .overview-activity td:nth-child(3) { grid-column: 1; }
  .overview-activity td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; }
  .checkout-page { background: var(--celestial-canvas) url('/assets/celestial/aurora-flow.png') center top / auto 265px no-repeat; }
  .checkout-page::before,
  .checkout-page::after { display: none; }
  .checkout-header { min-height: 82px; padding: 18px 8px; }
  .checkout-header img { width: 153px; }
  .checkout-header .secure-label { max-width: 120px; text-align: center; }
  .payment-main { width: 100%; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0 16px 38px; }
  .checkout-assurance { order: 1; display: block; min-height: 106px; padding: 14px 7px 20px; color: var(--celestial-text); background: transparent; }
  .checkout-card { order: 2; }
  .checkout-assurance h2 { margin: 0 0 6px; font-size: 26px; line-height: 1.12; }
  .checkout-assurance .section-kicker,
  .checkout-assurance .assurance-footnote { display: none; }
  .checkout-assurance > div > p:last-child { font-size: 12px; }
  .checkout-card { padding: 24px 20px; border-radius: 23px; }
  .checkout-intro { display: none; }
  .merchant-row { padding-bottom: 18px; border-bottom: 1px solid var(--celestial-border); }
  .checkout-summary { gap: 0; }
  .checkout-summary > div:not(.amount-row) { padding: 8px 0; border: 0; }
  .checkout-summary > div:nth-child(2),
  .checkout-summary > div:nth-child(3) { display: none; }
  .checkout-summary .amount-row { display: grid; grid-template-columns: 1fr auto; padding: 15px 0 8px; border: 0; }
  .checkout-summary .amount-row dt { grid-column: 1 / -1; }
  .checkout-summary .amount-row dd { grid-column: 1 / -1; margin: 3px 0 0; font-size: 44px; text-align: left; }
  .checkout-sandbox-note { margin-block: 14px; }
  .payment-actions { margin-top: 14px; }
  .payment-status { margin-top: 15px; padding: 12px; }
  .checkout-footer { min-height: 54px; color: var(--celestial-lilac); }
  .checkout-page.receipt-state .checkout-assurance,
  .checkout-page.receipt-state .merchant-row,
  .checkout-page.receipt-state .checkout-summary,
  .checkout-page.receipt-state .checkout-sandbox-note { display: none; }
  .checkout-page.receipt-state .checkout-card { margin-top: 30px; }
}

@media (max-width: 700px) {
  .login-page {
    background:
      linear-gradient(180deg, rgb(7 11 26 / 24%) 0, rgb(7 11 26 / 93%) 245px, #070b1a 390px),
      url('/assets/celestial/aurora-flow.png') center top / auto 300px no-repeat,
      #070b1a;
  }
  .login-brand-panel { display: none; }
  .login-form-panel { min-height: 100dvh; align-items: flex-start; padding-top: 24px; background: transparent; }
  .login-form-wrap { margin: 0 auto; background: linear-gradient(180deg, rgb(16 24 45 / 98%), rgb(10 17 33 / 99%)); }
  .login-mobile-logo { width: 184px; }
}

@media (max-width: 430px) {
  .dashboard-page .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-page .metric-card { min-height: 110px; padding: 14px; }
  .dashboard-page .metric-card strong { font-size: 28px; }
  .dashboard-page .metric-card small { font-size: 11px; }
  .overview-activity-card { padding-inline: 14px; }
  .overview-card-heading { align-items: center; }
}

@media (max-width: 640px) {
  .dashboard-page .brand-logo-wide { width: min(42vw, 164px); }
  .dashboard-page .hero { min-height: 410px; }
  .dashboard-page .hero-grid { min-height: 410px; padding: 32px 22px 138px; }
  .dashboard-page .hero h1 { font-size: clamp(38px, 11.5vw, 46px); }
}

/* Production account menu */
.dashboard-page .pay-profile-menu-wrap { position:relative; order:3; width:100%; }
.dashboard-page .workspace-topbar > .pay-profile-menu-wrap { order:initial; width:auto; margin-left:auto; }
.dashboard-page .workspace-topbar > .pay-profile-menu-wrap .pay-profile-trigger { width:auto; min-width:196px; }
.dashboard-page .workspace-topbar > .pay-profile-menu-wrap .pay-profile-menu { top:calc(100% + 10px); right:0; bottom:auto; left:auto; }
.dashboard-page .pay-profile-trigger { display:flex; width:100%; min-height:48px; align-items:center; justify-content:flex-start; gap:10px; padding:5px 9px 5px 5px; color:var(--celestial-text); border:1px solid #35435f; border-radius:13px; background:#111a2f; text-align:left; }
.pay-profile-avatar { display:inline-flex; width:36px; height:36px; flex:0 0 36px; align-items:center; justify-content:center; color:#fff; background:linear-gradient(145deg,var(--celestial-violet),#9b7cf5); border-radius:10px; font-size:11px; font-weight:800; box-shadow:0 0 0 3px rgb(183 167 255 / 8%); }
.pay-profile-trigger-copy { display:block; min-width:0; flex:1; }
.pay-profile-trigger-copy strong,.pay-profile-trigger-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pay-profile-trigger-copy strong { color:var(--celestial-text); font-size:12px; line-height:17px; }
.pay-profile-trigger-copy small { margin-top:1px; color:#91a0bb; font-size:10px; line-height:14px; }
.pay-profile-chevron { width:16px; height:16px; flex:0 0 auto; fill:none; stroke:#9da9c2; stroke-width:1.7; transition:transform .15s ease; }
.pay-profile-trigger[aria-expanded="true"] { border-color:#7567b2; background:#191d38; box-shadow:0 0 0 3px rgb(183 167 255 / 10%); }
.pay-profile-trigger[aria-expanded="true"] .pay-profile-chevron { transform:rotate(180deg); }
.pay-profile-menu[hidden] { display:none; }
.pay-profile-menu { position:absolute; bottom:0; left:calc(100% + 12px); z-index:80; width:360px; max-height:min(720px,calc(100dvh - 32px)); overflow-y:auto; color:var(--celestial-text); border:1px solid #34435f; border-radius:18px; background:#0d1529; box-shadow:0 28px 80px rgb(0 0 0 / 48%),0 0 0 1px rgb(183 167 255 / 4%); }
.pay-profile-menu-head { display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:12px; padding:18px; background:linear-gradient(125deg,#1a203b,#2b2451); border-bottom:1px solid #3c4263; }
.pay-profile-menu-head .pay-profile-avatar { width:46px; height:46px; flex-basis:46px; border-radius:13px; }
.pay-profile-menu-head > div { min-width:0; }
.pay-profile-menu-head strong,.pay-profile-menu-head small { display:block; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pay-profile-menu-head strong { color:var(--celestial-text); font-size:13px; }
.pay-profile-menu-head small { margin-top:3px; color:#aebbd2; font-size:11px; }
.pay-profile-active { display:inline-flex; min-height:28px; align-items:center; gap:6px; padding:5px 8px; color:#85e4c1; background:rgb(117 226 186 / 9%); border:1px solid rgb(117 226 186 / 18%); border-radius:999px; font-size:10px; font-weight:800; }
.pay-profile-active i { width:6px; height:6px; background:#75e2ba; border-radius:50%; box-shadow:0 0 0 3px rgb(117 226 186 / 10%); }
.pay-profile-context { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; padding:12px 18px; background:#101a30; border-bottom:1px solid #293651; }
.pay-profile-context > span { grid-column:1/-1; color:#7f8ba5; font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.pay-profile-context strong { overflow:hidden; color:#edf2ff; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.pay-profile-context small { color:var(--celestial-aurora); font-size:10px; font-weight:750; }
.pay-profile-section { padding:8px; }
.pay-profile-section + .pay-profile-section { border-top:1px solid #293651; }
.pay-profile-label { display:block; padding:7px 10px 5px; color:#7f8ba5; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.pay-profile-menu a,.pay-profile-menu button { display:grid; width:100%; min-height:54px; grid-template-columns:20px minmax(0,1fr); align-items:center; gap:12px; padding:8px 10px; color:#c4cfe2; border:0; border-radius:10px; background:transparent; font:inherit; text-align:left; text-decoration:none; cursor:pointer; }
.pay-profile-menu a:hover,.pay-profile-menu a:focus-visible,.pay-profile-menu button:hover,.pay-profile-menu button:focus-visible { color:#fff; background:#1b2540; outline:0; box-shadow:inset 0 0 0 2px var(--celestial-aurora); }
.pay-profile-menu svg { width:20px; height:20px; color:var(--celestial-lilac); }
.pay-profile-menu a > span,.pay-profile-menu button > span { min-width:0; }
.pay-profile-menu a strong,.pay-profile-menu a small,.pay-profile-menu button strong,.pay-profile-menu button small { display:block; }
.pay-profile-menu a strong,.pay-profile-menu button strong { color:inherit; font-size:12px; line-height:17px; }
.pay-profile-menu a small,.pay-profile-menu button small { margin-top:2px; overflow:hidden; color:#8995ae; font-size:10px; line-height:15px; text-overflow:ellipsis; white-space:nowrap; }
.pay-profile-menu .pay-profile-signout svg { color:#ff9ca9; }
.pay-profile-menu .pay-profile-signout:hover,.pay-profile-menu .pay-profile-signout:focus-visible { color:#ffd7dd; background:rgb(255 156 169 / 8%); box-shadow:inset 0 0 0 2px #ff9ca9; }
.pay-profile-menu button:disabled { opacity:.65; cursor:wait; }
.pay-profile-dialog { width:min(620px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:0; color:var(--celestial-text); border:1px solid #34435f; border-radius:20px; background:#10182d; box-shadow:0 30px 90px rgb(0 0 0 / 54%); }
.pay-profile-dialog::backdrop { background:rgb(3 6 16 / 78%); backdrop-filter:blur(5px); }
.pay-profile-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-bottom:1px solid #2d3a55; background:#141d34; }
.pay-profile-dialog-head span { color:var(--celestial-aurora); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.pay-profile-dialog-head h2 { margin:3px 0 0; color:var(--celestial-text); font-size:20px; }
.pay-profile-dialog-head button { width:44px; height:44px; color:#b7c1d5; border:1px solid #40506d; border-radius:12px; background:#17233d; font-size:24px; cursor:pointer; }
.pay-profile-dialog-body { padding:20px; }
.pay-profile-dialog-identity { display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:14px; padding:16px; border:1px solid #34435f; border-radius:15px; background:#0d1529; }
.pay-profile-dialog-identity .pay-profile-avatar { width:52px; height:52px; }
.pay-profile-dialog-identity strong,.pay-profile-dialog-identity small { display:block; overflow-wrap:anywhere; }
.pay-profile-dialog-identity strong { font-size:14px; }.pay-profile-dialog-identity small { margin-top:3px; color:#9ba8c0; font-size:11px; }
.pay-profile-dialog-body dl { margin:18px 0 0; }
.pay-profile-dialog-body dl > div { display:grid; grid-template-columns:160px minmax(0,1fr); gap:16px; padding:12px 4px; border-bottom:1px solid #293651; }
.pay-profile-dialog-body dt { color:#8f9db6; font-size:11px; font-weight:700; }.pay-profile-dialog-body dd { margin:0; color:#edf2ff; font-size:12px; overflow-wrap:anywhere; }
.pay-profile-managed { margin-top:18px; padding:15px; color:#aebbd2; border:1px solid #4a4472; border-radius:13px; background:#1b1d38; }
.pay-profile-managed strong { color:#f4f7ff; font-size:13px; }.pay-profile-managed p { margin:5px 0 0; font-size:11px; line-height:1.6; }
.pay-profile-dialog-actions { display:flex; justify-content:flex-end; margin-top:18px; }

@media(max-width:1180px) {
 .dashboard-page .pay-profile-menu-wrap { order:initial; width:auto; }
 .dashboard-page .pay-profile-trigger { width:auto; min-width:176px; }
 .pay-profile-menu { top:calc(100% + 10px); right:0; bottom:auto; left:auto; }
}

@media(max-width:640px) {
 .dashboard-page .session-button.pay-profile-trigger { display:flex; width:44px; min-width:44px; height:44px; min-height:44px; padding:4px; border-radius:12px; }
 .pay-profile-trigger .pay-profile-avatar { width:34px; height:34px; flex-basis:34px; }
 .pay-profile-trigger-copy,.pay-profile-chevron { display:none; }
 .pay-profile-menu { position:fixed; top:62px; right:12px; left:auto; width:min(360px,calc(100vw - 24px)); max-height:calc(100dvh - 76px); }
 .pay-profile-menu-head { grid-template-columns:44px minmax(0,1fr); padding:15px; }
 .pay-profile-active { grid-column:1/-1; justify-self:start; }
 .pay-profile-dialog-identity { grid-template-columns:46px minmax(0,1fr); }
 .pay-profile-dialog-identity .pay-profile-active { grid-column:1/-1; justify-self:start; }
 .pay-profile-dialog-body dl > div { grid-template-columns:1fr; gap:4px; }
}

@media(max-width:390px) {
 .dashboard-page .header-inner { gap:7px; }
 .dashboard-page .header-actions { gap:5px; }
 .dashboard-page .environment-badge { max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}

/* Payment Access uses the supplied mobile setup composition while retaining the
   authenticated operations controls below it. */
.access-operations-page { background: var(--celestial-canvas); color: var(--celestial-text); }
.access-operations-page .access-header { border-bottom: 1px solid #1d2942; background: var(--celestial-sidebar); }
.access-operations-page .access-header nav a { color: var(--celestial-lilac); }
.access-operations-page .access-preview-note { color: var(--celestial-gold); border-color: #52442f; background: #322a22; }
.access-operations-page .access-shell { width: min(calc(100% - 48px), 1120px); margin-top: 28px; }
.access-operations-page .access-intro {
  min-height: 248px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 22px;
  padding: 34px;
  border-radius: 22px;
  background: linear-gradient(90deg, rgb(7 11 26 / 94%), rgb(7 11 26 / 42%)), url('/assets/celestial/aurora-flow.png') right center / cover no-repeat;
}
.access-operations-page .access-intro h1 { max-width: 680px; margin: 8px 0; color: var(--celestial-text); font-size: clamp(36px, 4vw, 54px); }
.access-operations-page .access-intro p { color: #cfd9ed; }
.access-operations-page .access-setup,
.access-operations-page .access-panel,
.access-operations-page .access-item,
.access-operations-page .access-empty,
.access-operations-page .access-dialog {
  color: var(--celestial-text);
  border-color: var(--celestial-border);
  background: var(--celestial-surface);
}
.access-operations-page .access-setup { border-left: 4px solid var(--celestial-gold); }
.access-operations-page .access-panel p,
.access-operations-page .access-item p,
.access-operations-page .access-fine,
.access-operations-page .access-footer { color: var(--celestial-muted); }
.access-operations-page .access-input { color: var(--celestial-text); border-color: #607298; background: #0b1428; }
.access-operations-page .access-notice { color: var(--celestial-muted); border-color: var(--celestial-border); background: #0b1428; }

@media (max-width: 640px) {
  .access-operations-page .access-header > div { align-items: center; flex-direction: row; }
  .access-operations-page .access-header nav { display: none; }
  .access-operations-page .access-shell { width: 100%; margin: 0; }
  .access-operations-page .access-intro { min-height: 198px; margin: 0; padding: 30px 20px; border-radius: 0; background: linear-gradient(180deg, rgb(7 11 26 / 24%), rgb(7 11 26 / 88%)), url('/assets/celestial/aurora-flow.png') center / cover no-repeat; }
  .access-operations-page .access-intro .section-kicker { color: var(--celestial-aurora); }
  .access-operations-page .access-intro h1 { font-size: 30px; }
  .access-operations-page .access-intro p { font-size: 12px; }
  .access-operations-page .access-setup,
  .access-operations-page .access-panel,
  .access-operations-page .access-notice,
  .access-operations-page .access-items,
  .access-operations-page #more-passes,
  .access-operations-page .access-footer { margin-left: 16px; margin-right: 16px; }
  .access-operations-page .access-setup { margin-top: -8px; padding: 22px 20px; border-radius: 18px; box-shadow: 0 18px 44px rgb(0 0 0 / 24%); }
  .access-operations-page .access-panel { padding: 20px; }
}