/* Product layout. Breakpoint literals are intentional: custom properties
   cannot be used in media-query conditions. Structural zero, %, fr, auto and
   transform angles remain literal. All visual dimensions use design tokens. */
.sr-only {
  position: absolute;
  width: var(--np-border-hairline);
  height: var(--np-border-hairline);
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  left: var(--np-space-5);
  top: var(--np-skip-hidden-offset);
  background: var(--np-color-surface);
  padding: var(--np-space-3) var(--np-space-5-5);
  z-index: var(--np-z-notification);
  border-radius: var(--np-radius-md);
}
.skip-link:focus {
  top: var(--np-space-3);
}
.app-shell {
  display: flex;
  min-height: var(--np-viewport-height);
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--np-sidebar-width);
  background: var(--np-color-ink);
  color: var(--np-color-text-inverse-muted);
  padding: var(--np-space-8) var(--np-space-5) var(--np-space-6);
  display: flex;
  flex-direction: column;
  z-index: var(--np-z-sidebar);
  overflow: auto;
}
.brand {
  display: block;
  padding: 0 var(--np-space-3);
  margin: 0 0 var(--np-space-8);
}
.brand img {
  display: block;
  width: var(--np-brand-width);
  height: auto;
}
.workspace-switch {
  display: flex;
  align-items: center;
  gap: var(--np-space-3);
  width: 100%;
  text-align: left;
  background: var(--np-color-sidebar-raised);
  border: var(--np-border-hairline) solid var(--np-color-border-inverse);
  color: var(--np-color-text-inverse);
  border-radius: var(--np-radius-xl);
  padding: var(--np-space-3);
  margin-bottom: var(--np-space-5-5);
}
.workspace-switch>span:nth-child(2) {
  flex: 1;
}
.workspace-switch strong,.workspace-switch small {
  display: block;
}
.workspace-switch strong {
  font-size: var(--np-text-body-lg);
  letter-spacing: var(--np-tracking-identity);
}
.workspace-switch small {
  font-size: var(--np-text-sm);
  color: var(--np-color-text-inverse-muted);
}
.workspace-initial {
  display: grid;
  place-items: center;
  width: var(--np-workspace-avatar);
  height: var(--np-workspace-avatar);
  background: var(--np-color-success-soft);
  color: var(--np-color-text);
  border-radius: var(--np-radius-control);
  font-weight: var(--np-weight-bold);
}
.nav-label {
  font-weight: var(--np-weight-semibold);
  color: var(--np-color-text-inverse-subtle);
  padding: 0 var(--np-space-3-5);
  margin: var(--np-space-4) 0 var(--np-space-2);
}
.sidebar nav {
  display: grid;
  gap: calc(var(--np-space-0-5) + var(--np-border-hairline));
}
.sidebar nav a,.sidebar-bottom>a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--np-control-nav-height);
  padding: calc(var(--np-space-2) + var(--np-border-hairline)) var(--np-space-3-5);
  font-size: var(--np-text-body-lg);
  border-radius: var(--np-radius-md);
  color: var(--np-color-text-inverse-muted);
}
.sidebar nav a:hover,.sidebar-bottom>a:hover {
  background: var(--np-color-sidebar-hover);
  color: var(--np-color-text-inverse);
}
.sidebar nav a.active {
  background: var(--np-color-brand);
  color: var(--np-color-ink);
  font-weight: var(--np-weight-semibold);
}
.sidebar a:focus-visible,.sidebar button:focus-visible {
  outline-color: var(--np-color-surface);
}
.nav-mark {
  font-size: var(--np-text-nav-icon);
}
.sidebar-bottom {
  padding-top: var(--np-space-6-5);
  margin-top: auto;
}
.sidebar-bottom>a {
  font-size: var(--np-text-body);
}
.sidebar-note {
  display: flex;
  gap: calc(var(--np-space-2-5) + var(--np-border-hairline));
  border-top: var(--np-border-hairline) solid var(--np-color-border-inverse);
  padding: calc(var(--np-space-4-5) + var(--np-border-hairline)) var(--np-space-3) 0;
  margin-top: var(--np-space-4);
  align-items: center;
}
.sidebar-note img {
  width: var(--np-brand-mark);
}
.sidebar-note p {
  line-height: var(--np-leading-body);
  color: var(--np-color-text-inverse-muted);
  margin: 0;
}
.workspace {
  margin-left: var(--np-sidebar-width);
  min-width: 0;
  width: calc(100% - var(--np-sidebar-width));
}
.topbar {
  height: var(--np-topbar-height);
  padding: 0 var(--np-space-10-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--np-space-4);
  background: var(--np-color-surface);
  border-bottom: var(--np-border-hairline) solid var(--np-color-border);
}
.breadcrumb {
  font-size: var(--np-text-body);
  font-weight: var(--np-weight-medium);
}
.breadcrumb>span:first-child {
  padding: 0 var(--np-space-3-5);
  color: var(--np-color-text-inverse-subtle);
}
.breadcrumb>span:last-child {
  color: var(--np-color-text-muted);
  font-weight: var(--np-weight-regular);
}
.inline {
  display: flex;
  align-items: center;
  gap: var(--np-space-3);
  flex-wrap: wrap;
}
.topbar-actions {
  display: flex;
  gap: var(--np-space-5);
  align-items: center;
}
.demo-pill {
  border: var(--np-border-hairline) solid var(--np-color-success-border);
  color: var(--np-color-success);
  border-radius: var(--np-radius-pill);
  padding: var(--np-space-1-5) var(--np-space-3);
  background: var(--np-color-success-soft);
  font-size: var(--np-text-xs);
  font-weight: var(--np-weight-medium);
  white-space: nowrap;
}
.notification-trigger {
  border: 0;
  background: none;
  padding: 0;
  font-size: var(--np-text-sm);
  display: flex;
  gap: var(--np-space-2);
  align-items: center;
}
.notification-trigger>span {
  font-size: var(--np-text-caption-small);
  background: var(--np-color-success-soft);
  border-radius: var(--np-radius-circle);
  width: var(--np-notification-counter);
  height: var(--np-notification-counter);
  display: grid;
  place-items: center;
}
.avatar {
  width: var(--np-avatar);
  height: var(--np-avatar);
  border-radius: var(--np-radius-circle);
  background: var(--np-color-surface-muted);
  border: var(--np-border-hairline) solid var(--np-color-border);
  font-size: var(--np-text-xs);
  font-weight: var(--np-weight-semibold);
  flex: none;
}
.design-bar {
  padding: calc(var(--np-space-2) + var(--np-border-hairline)) var(--np-space-10-5);
  display: flex;
  gap: var(--np-space-3);
  justify-content: space-between;
  border-bottom: var(--np-border-hairline) solid var(--np-color-border-subtle);
  color: var(--np-color-text-muted);
  background: var(--np-color-surface-table);
}
.design-bar .inline {
  gap: var(--np-space-4-5);
}
.design-bar a {
  font-weight: var(--np-weight-medium);
}
.design-bar a:hover {
  text-decoration: underline;
}
.menu-toggle {
  display: none!important;
}
main {
  max-width: var(--np-content-width);
  margin: 0 auto;
  padding: var(--np-space-9) var(--np-space-10-5) var(--np-space-7);
  min-height: calc(var(--np-viewport-height) - var(--np-content-chrome-height));
}
main:focus {
  outline: none;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--np-space-4-5);
  margin: 0 0 calc(var(--np-space-5-5) + var(--np-border-hairline));
}
.eyebrow {
  font-size: var(--np-text-caption-small);
  font-weight: var(--np-weight-bold);
  letter-spacing: var(--np-tracking-hero);
  color: var(--np-color-text-muted);
  margin: 0 0 var(--np-space-2);
  text-transform: uppercase;
}
.page-subtitle {
  color: var(--np-color-text-muted);
  margin: 0;
  line-height: var(--np-leading-relaxed);
}
.page-toolbar {
  display: flex;
  justify-content: space-between;
  gap: var(--np-space-4);
  align-items: center;
  margin-bottom: var(--np-space-5-5);
  flex-wrap: wrap;
}
.page-toolbar p {
  margin: 0;
}
.section-title {
  margin: var(--np-space-6-5) 0 var(--np-space-3-5);
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--np-space-5-5);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--np-space-5-5);
}
.grid-2>.panel,.grid-3>.panel {
  margin-bottom: 0;
}
.metric>p {
  color: var(--np-color-text-muted);
  font-size: var(--np-text-body);
  margin-bottom: var(--np-space-3);
}
.metric>strong {
  display: block;
  line-height: var(--np-leading-display);
  letter-spacing: var(--np-tracking-metric);
}
.metric>span {
  color: var(--np-color-text-muted);
  display: block;
  font-size: var(--np-text-sm);
  margin-top: var(--np-space-2-5);
}
.app-footer {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--np-space-3-5) + var(--np-border-hairline));
  margin: 0 var(--np-space-10-5);
  padding: var(--np-space-5) 0 var(--np-space-6-5);
  border-top: var(--np-border-hairline) solid var(--np-color-border);
  font-size: var(--np-text-xs);
  color: var(--np-color-text-muted);
}
.footer-dot {
  padding: 0 calc(var(--np-space-1-5) + var(--np-border-hairline));
}
.summary-strip {
  display: grid;
  border: var(--np-border-hairline) solid var(--np-color-border);
  background: var(--np-color-surface);
  overflow: hidden;
}
.summary-primary p {
  color: var(--np-color-text-inverse-muted);
  font-size: var(--np-text-body);
  margin-bottom: var(--np-space-2-5);
}
.summary-primary strong {
  display: block;
  white-space: nowrap;
}
.summary-primary>span {
  display: block;
}
.summary-secondary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.summary-secondary+.summary-secondary {
  border-left: var(--np-border-hairline) solid var(--np-color-border);
}
.summary-secondary p {
  font-size: var(--np-text-body);
  color: var(--np-color-text-muted);
  margin-bottom: calc(var(--np-space-1-5) + var(--np-border-hairline));
}
.summary-secondary span,.summary-secondary a {
  color: var(--np-color-text-muted);
}
.summary-secondary a {
  color: var(--np-color-success);
  text-decoration: underline;
  text-underline-offset: var(--np-space-1);
}
.overview-grid {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  gap: var(--np-space-6);
}
.trend-panel .panel-head {
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: var(--np-space-3);
}
.chart-legend {
  color: var(--np-color-text-muted);
  padding-left: var(--np-space-3);
  border-left: calc(var(--np-space-1) + var(--np-border-hairline)) solid var(--np-color-brand);
  line-height: var(--np-leading-display);
}
.revenue-chart {
  height: var(--np-chart-height);
  display: flex;
  gap: var(--np-space-3);
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: var(--np-border-hairline) solid var(--np-color-border);
  background: repeating-linear-gradient(to top,var(--np-color-transparent) 0,var(--np-color-transparent) var(--np-chart-grid-step),var(--np-color-surface-muted) calc(var(--np-chart-grid-step) + var(--np-border-hairline)),var(--np-color-surface-muted) calc(var(--np-chart-grid-step) + var(--np-border-emphasis)));
  padding: 0 var(--np-space-2);
}
.chart-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
  height: 100%;
  position: relative;
}
.bar-track {
  height: var(--np-chart-track-height);
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.revenue-meter {
  writing-mode: vertical-lr;
  direction: rtl;
  width: var(--np-chart-bar-width);
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
  display: block;
  border: 0;
  background: var(--np-color-transparent);
  border-radius: var(--np-radius-tag) var(--np-radius-tag) 0 0;
  overflow: hidden;
}
.revenue-meter::-webkit-meter-bar {
  background: var(--np-color-transparent);
  border: 0;
  border-radius: 0;
}
.revenue-meter::-webkit-meter-optimum-value {
  background: var(--np-color-brand);
  border-radius: var(--np-radius-xs) var(--np-radius-xs) 0 0;
}
.revenue-meter::-moz-meter-bar {
  background: var(--np-color-brand);
}
.chart-value {
  color: var(--np-color-text-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--np-space-2);
  white-space: nowrap;
}
.chart-date {
  color: var(--np-color-text-muted);
  padding: calc(var(--np-space-1-5) + var(--np-border-hairline)) 0;
}
.chart-footer {
  display: flex;
  justify-content: space-between;
  color: var(--np-color-text-muted);
  margin-top: var(--np-space-2-5);
}
.attention-card {
  padding: calc(var(--np-space-6) + var(--np-border-hairline)) calc(var(--np-space-5-5) + var(--np-border-hairline));
}
.attention-card .panel-head {
  margin-bottom: var(--np-space-3-5);
}
.attention-item {
  display: flex;
  align-items: flex-start;
  gap: var(--np-space-3);
  text-align: left;
  border: 0;
  border-bottom: var(--np-border-hairline) solid var(--np-color-border);
  background: none;
  width: 100%;
  padding: var(--np-space-4) 0;
}
.attention-item>span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.attention-number {
  font-weight: var(--np-weight-medium);
  color: var(--np-color-warning);
  border: var(--np-border-hairline) solid var(--np-color-warning-border);
  border-radius: var(--np-radius-sm);
  min-width: var(--np-attention-number);
  height: var(--np-attention-number);
  display: grid;
  place-items: center;
}
.attention-item strong {
  display: block;
  margin-bottom: calc(var(--np-space-1) + var(--np-border-hairline));
}
.attention-item small {
  font-size: var(--np-text-xs);
  display: block;
  color: var(--np-color-text-muted);
  margin-bottom: calc(var(--np-space-1) + var(--np-border-hairline));
}
.attention-item .muted {
  font-size: var(--np-text-xs);
  display: block;
  line-height: var(--np-leading-note);
}
.attention-item:hover strong {
  text-decoration: underline;
}
.attention-card>.text-link {
  display: block;
  margin-top: calc(var(--np-space-4) + var(--np-border-hairline));
  font-size: var(--np-text-xs);
}
.table-wrap {
  width: 100%;
  overflow-x: auto;
}
.transaction-link {
  font-weight: var(--np-weight-semibold);
}
.amount-cell {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.align-right {
  text-align: right;
}
.row-open {
  background: none;
  border: var(--np-border-hairline) solid var(--np-color-border);
  border-radius: var(--np-radius-tab);
  min-width: var(--np-control-icon);
  height: var(--np-control-icon);
  font-size: var(--np-text-base);
}
.row-open:hover {
  background: var(--np-color-success-soft);
}
.table-caption,.table-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--np-space-3);
  color: var(--np-color-text-muted);
  padding: var(--np-space-3-5) var(--np-space-3);
}
.table-caption {
  padding-top: 0;
}
.table-footer {
  border-top: var(--np-border-hairline) solid var(--np-color-border);
  padding-bottom: 0;
}
.filters {
  display: flex;
  gap: var(--np-space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--np-space-4-5);
}
.filters .search-field {
  flex: 1;
  min-width: var(--np-search-min-width);
}
.filters input {
  width: 100%;
  font-size: var(--np-text-body);
}
.filters select {
  font-size: var(--np-text-body);
}
.bottom-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--np-space-6);
  padding: calc(var(--np-space-3-5) + var(--np-border-hairline)) calc(var(--np-space-1) + var(--np-border-hairline)) var(--np-space-2-5);
}
.bottom-guide h3 {
  font-size: var(--np-text-guide-title);
  margin: calc(var(--np-space-2) + var(--np-border-hairline)) 0 var(--np-space-2);
}
.bottom-guide p {
  color: var(--np-color-text-muted);
  font-size: var(--np-text-body);
  margin-bottom: 0;
}
.bottom-guide>.btn {
  flex-shrink: 0;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--np-space-4-5);
}
.form-grid>.full {
  grid-column: 1/-1;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--np-space-5);
  padding: var(--np-space-4-5) 0;
  border-bottom: var(--np-border-hairline) solid var(--np-color-border);
}
.settings-row:last-child {
  border-bottom: 0;
}
.settings-row p {
  margin-bottom: calc(var(--np-space-0-5) + var(--np-border-hairline));
}
.settings-row .muted {
  font-size: var(--np-text-body);
}
.empty-state {
  text-align: center;
  padding: var(--np-space-15) var(--np-space-7-5);
  max-width: 100%;
}
.empty-state h2 {
  font-size: var(--np-text-5xl);
  max-width: var(--np-empty-title-width);
  margin: var(--np-space-4-5) auto calc(var(--np-space-3) + var(--np-border-hairline));
}
.empty-state p {
  max-width: var(--np-empty-copy-width);
  color: var(--np-color-text-muted);
  margin: 0 auto var(--np-space-6);
}
.empty-state .btn {
  margin: var(--np-space-1);
}
.empty-kicker {
  font-size: var(--np-text-sm);
  color: var(--np-color-success);
}
.step-list {
  list-style: none;
  padding: 0;
  counter-reset: steps;
  display: grid;
  gap: var(--np-space-4);
}
.step-list li {
  position: relative;
  padding: 0 0 var(--np-space-4-5) var(--np-space-10-5);
  border-bottom: var(--np-border-hairline) solid var(--np-color-border);
  counter-increment: steps;
}
.step-list li:before {
  content: counter(steps,decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--np-color-text-muted);
  background: var(--np-color-success-soft);
  border-radius: var(--np-radius-tab);
  width: var(--np-step-number);
  height: var(--np-step-number);
  display: grid;
  place-items: center;
  font-size: var(--np-text-xs);
}
.step-list li p {
  font-size: var(--np-text-body);
  color: var(--np-color-text-muted);
  margin: var(--np-space-1-5) 0 0;
}
.progress,progress {
  width: 100%;
  height: var(--np-progress-height);
  accent-color: var(--np-color-brand);
  border: 0;
  background: var(--np-color-surface-muted);
  border-radius: var(--np-radius-tag);
}
.progress::-webkit-progress-bar,progress::-webkit-progress-bar {
  background: var(--np-color-surface-muted);
  border-radius: var(--np-radius-tag);
}
.progress::-webkit-progress-value,progress::-webkit-progress-value {
  background: var(--np-color-brand);
  border-radius: var(--np-radius-tag);
}
.modal {
  width: min(var(--np-modal-width),calc(100% - var(--np-space-8)));
  max-height: var(--np-modal-viewport-height);
  overflow: auto;
  border: var(--np-border-hairline) solid var(--np-color-border);
  border-radius: var(--np-radius-modal);
  padding: var(--np-space-7);
  color: var(--np-color-ink);
  box-shadow: var(--np-shadow-modal);
  background: var(--np-color-surface);
}
.modal::backdrop {
  background: var(--np-color-backdrop);
  backdrop-filter: blur(var(--np-backdrop-blur));
}
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--np-space-6);
  margin-bottom: var(--np-space-5-5);
}
.modal-header h2 {
  font-size: var(--np-text-modal-title);
  margin-bottom: 0;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--np-space-2-5);
  border-top: var(--np-border-hairline) solid var(--np-color-border);
  padding-top: var(--np-space-5);
  margin-top: var(--np-space-6);
}
.modal .field {
  margin-bottom: var(--np-space-4);
}
.modal p {
  font-size: var(--np-text-body-lg);
}
.modal h3 {
  font-size: var(--np-text-base);
  margin-top: var(--np-space-6);
}
.toast {
  position: fixed;
  bottom: var(--np-space-6-5);
  left: calc(50% + var(--np-toast-offset));
  transform: translateX(-50%);
  background: var(--np-color-ink);
  color: var(--np-color-text-inverse);
  border: var(--np-border-hairline) solid var(--np-color-border-inverse);
  border-radius: var(--np-radius-xl);
  padding: var(--np-space-3-5) calc(var(--np-space-5-5) + var(--np-border-hairline));
  max-width: min(var(--np-toast-width),calc(100% - var(--np-space-8)));
  z-index: var(--np-z-notification);
  box-shadow: var(--np-shadow-toast);
  font-size: var(--np-text-body);
}
.detail-total {
  display: flex;
  gap: var(--np-space-4-5);
  align-items: center;
  margin-bottom: var(--np-space-3);
}
.detail-total strong {
  letter-spacing: var(--np-tracking-display);
}
.detail-steps {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--np-space-3);
  padding: var(--np-space-5) 0;
  margin: var(--np-space-5) 0;
  border-block: var(--np-border-hairline) solid var(--np-color-border);
}
.detail-steps>div>span {
  font-size: var(--np-text-xs);
  color: var(--np-color-success);
}
.detail-steps p {
  font-size: var(--np-text-xs);
  margin: calc(var(--np-space-2) + var(--np-border-hairline)) 0 var(--np-space-1);
  color: var(--np-color-text-muted);
}
.detail-steps strong {
  font-size: var(--np-text-body);
}
.detail-list {
  margin: var(--np-space-4) 0;
}
.detail-list>div {
  display: flex;
  justify-content: space-between;
  gap: var(--np-space-4-5);
  border-bottom: var(--np-border-hairline) solid var(--np-color-border-subtle);
  padding: var(--np-space-2-5) 0;
  font-size: var(--np-text-body);
}
.detail-list dt {
  color: var(--np-color-text-muted);
}
.detail-list dd {
  margin: 0;
  text-align: right;
}
.timeline {
  list-style: none;
  padding: 0 0 0 var(--np-space-3);
  margin-top: var(--np-space-5);
}
.timeline li {
  border-left: var(--np-border-emphasis) solid var(--np-color-success-border);
  padding: 0 0 var(--np-space-6) var(--np-space-5-5);
  position: relative;
}
.timeline li:before {
  content: '';
  width: var(--np-space-2);
  height: var(--np-space-2);
  background: var(--np-color-success);
  border: var(--np-border-halo) solid var(--np-color-success-soft);
  box-sizing: content-box;
  position: absolute;
  left: var(--np-timeline-dot-offset);
  top: 0;
  border-radius: var(--np-radius-circle);
}
.timeline li:last-child {
  padding-bottom: 0;
}
.timeline li>strong,.timeline li>span {
  display: block;
  font-size: var(--np-text-sm);
}
.timeline li>span {
  margin-top: var(--np-space-1);
  color: var(--np-color-text-muted);
}
.notification-item+.notification-item {
  border-top: var(--np-border-hairline) solid var(--np-color-border);
  padding-top: var(--np-space-5);
  margin-top: var(--np-space-6);
}
.notification-item h3 {
  margin-top: var(--np-space-3);
}
.loading-indicator {
  display: block;
  width: var(--np-step-number);
  height: var(--np-step-number);
  border: var(--np-border-focus) solid var(--np-color-success-border);
  border-top-color: var(--np-color-success);
  border-radius: var(--np-radius-circle);
  margin: 0 auto;
  animation: spin var(--np-motion-spinner) var(--np-ease-linear) infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.checkout-preview {
  max-width: var(--np-checkout-width);
  margin: 0 auto;
  background: var(--np-color-surface);
  border: var(--np-border-hairline) solid var(--np-color-border);
  border-radius: var(--np-radius-checkout);
  padding: var(--np-space-7-5);
}
.checkout-head {
  display: flex;
  justify-content: space-between;
  gap: var(--np-space-4-5);
  align-items: center;
  margin-bottom: var(--np-space-7);
}
.checkout-head img {
  width: var(--np-checkout-brand-width);
  height: auto;
}
.checkout-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--np-space-7);
}
.checkout-payment {
  text-align: center;
}
.checkout-summary {
  background: var(--np-color-ink);
  color: var(--np-color-text-inverse);
  padding: var(--np-space-6-5);
  border-radius: var(--np-radius-checkout-summary);
}
.checkout-summary .muted,.checkout-summary dt {
  color: var(--np-color-text-inverse-muted);
}
.checkout-summary .eyebrow {
  color: var(--np-color-brand);
}
.checkout-summary .detail-list>div {
  border-color: var(--np-color-border-inverse);
}
.checkout-summary .btn {
  margin-top: var(--np-space-5);
  width: 100%;
}
.payment-choice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--np-space-3-5);
  padding: var(--np-space-4);
  border: var(--np-border-hairline) solid var(--np-color-border-input);
  border-radius: var(--np-radius-xl);
  background: var(--np-color-surface);
  text-align: left;
  width: 100%;
  margin-bottom: var(--np-space-3);
}
.payment-choice.active,.payment-choice[aria-pressed=true] {
  border-color: var(--np-color-success);
  background: var(--np-color-success-soft);
}
.payment-choice strong,.payment-choice small {
  display: block;
}
.payment-choice small {
  color: var(--np-color-text-muted);
  margin-top: var(--np-space-1);
}
.qr-illustration {
  display: grid;
  place-items: center;
  width: var(--np-qr-frame);
  max-width: 100%;
  margin: var(--np-space-5) auto;
  padding: var(--np-space-4-5);
  background: var(--np-color-surface);
  border: var(--np-border-emphasis) solid var(--np-color-brand);
  border-radius: var(--np-radius-qr);
}
.qr-illustration img {
  display: block;
  width: var(--np-qr-code);
}
.qr-illustration p {
  font-size: var(--np-text-caption-small);
  margin: var(--np-space-2) 0 0;
  color: var(--np-color-text-muted);
}
.code-block,pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  background: var(--np-color-ink);
  color: var(--np-color-text-inverse-muted);
  padding: var(--np-space-5);
  border-radius: var(--np-radius-xl);
  font-family: var(--np-font-code);
  font-size: var(--np-text-sm);
  line-height: var(--np-leading-code);
  overflow: auto;
}
.code-block code,pre code {
  font: inherit;
}
.integration-icon {
  font-size: var(--np-text-xs);
  letter-spacing: var(--np-tracking-integration);
  font-weight: var(--np-weight-bold);
  padding: var(--np-space-2-5) 0;
  color: var(--np-color-success);
}
.integration-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--np-space-5-5);
}
.status-symbol {
  font-size: var(--np-text-7xl);
  color: var(--np-color-success);
}
.bank-row {
  display: flex;
  gap: var(--np-space-4);
  justify-content: space-between;
  padding: var(--np-space-3-5) 0;
  border-bottom: var(--np-border-hairline) solid var(--np-color-border);
}
.event-log {
  list-style: none;
  padding: 0;
}
.event-log li {
  padding: var(--np-space-3-5) 0;
  border-bottom: var(--np-border-hairline) solid var(--np-color-border);
}
.event-log li>span {
  display: block;
}
.chart-bars {
  display: flex;
  gap: var(--np-space-3-5);
  align-items: flex-end;
  min-height: var(--np-chart-bars-min-height);
}
.chart-bar {
  background: var(--np-color-brand);
  border-radius: var(--np-radius-tag);
}
.account-hero,.login-brand {
  background: var(--np-color-ink);
  color: var(--np-color-text-inverse);
  padding: var(--np-space-9);
  border-radius: var(--np-radius-panel);
}
.account-hero .muted,.login-brand .muted {
  color: var(--np-color-border-input);
}
.account-hero h2,.login-brand h2 {
  font-size: var(--np-text-auth-title);
}
.account-hero .eyebrow,.login-brand .eyebrow {
  color: var(--np-color-brand);
}
.login-layout,.onboarding-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--np-space-6);
}
.login-form {
  padding: var(--np-space-7-5);
}
.onboarding-steps {
  display: flex;
  gap: var(--np-space-2-5);
  flex-wrap: wrap;
  margin-bottom: var(--np-space-6);
}
.onboarding-step {
  display: flex;
  gap: var(--np-space-2);
  align-items: center;
  padding: var(--np-space-2) var(--np-space-3);
  border-radius: var(--np-radius-md);
  background: var(--np-color-success-soft);
  font-size: var(--np-text-body);
}
.onboarding-step.active {
  background: var(--np-color-success-soft);
  color: var(--np-color-success);
}
.screen-card {
  display: flex;
  flex-direction: column;
}
.screen-card .btn {
  margin-top: auto;
  align-self: flex-start;
}
.status-note {
  font-size: var(--np-text-xs);
  color: var(--np-color-text-muted);
}
.permission-list {
  padding: 0;
  list-style: none;
}
.permission-list li {
  padding: var(--np-space-2-5) 0;
  border-bottom: var(--np-border-hairline) solid var(--np-color-border);
}
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--np-color-drawer-backdrop);
  z-index: var(--np-z-drawer-backdrop);
}
@media(min-width:1600px) {
  .overview-grid {
    grid-template-columns: 1.5fr 1fr;
  }
  .revenue-chart {
    height: var(--np-chart-height-wide);
  }
  .bar-track {
    height: var(--np-chart-track-wide);
  }
}
@media(max-width:1250px) {
  .sidebar {
    width: var(--np-sidebar-width-medium);
    padding-inline: calc(var(--np-space-3-5) + var(--np-border-hairline));
  }
  .workspace {
    margin-left: var(--np-sidebar-width-medium);
    width: calc(100% - var(--np-sidebar-width-medium));
  }
  .topbar {
    padding-inline: var(--np-space-7);
  }
  .design-bar {
    padding-inline: var(--np-space-7);
  }
  main {
    padding: var(--np-space-7-5) var(--np-space-7) var(--np-space-6);
  }
  .app-footer {
    margin-inline: var(--np-space-7);
  }
  .overview-grid {
    gap: var(--np-space-4-5);
  }
  .panel {
    padding: var(--np-space-5-5);
  }
  .topbar-actions {
    gap: var(--np-space-3);
  }
  .notification-trigger {
    font-size: 0;
  }
  .notification-trigger>span {
    font-size: var(--np-text-xs);
  }
  .grid-3 {
    gap: var(--np-space-4);
  }
  .table-wrap table {
    min-width: var(--np-table-compact-min-width);
  }
  .chart-legend {
    display: none;
  }
}
@media(max-width:1050px) {
  .sidebar {
    width: var(--np-sidebar-width-narrow);
    padding-inline: var(--np-space-3);
  }
  .workspace {
    margin-left: var(--np-sidebar-width-narrow);
    width: calc(100% - var(--np-sidebar-width-narrow));
  }
  .sidebar nav a {
    font-size: var(--np-text-body);
  }
  .topbar {
    height: var(--np-topbar-height-medium);
    padding-inline: var(--np-space-6);
  }
  .design-bar {
    padding-inline: var(--np-space-6);
    flex-wrap: wrap;
    gap: calc(var(--np-space-1-5) + var(--np-border-hairline));
  }
  main {
    padding: var(--np-space-7) var(--np-space-6);
  }
  .overview-grid {
    grid-template-columns: 1fr;
  }
  .revenue-chart {
    height: var(--np-chart-height-medium);
  }
  .bar-track {
    height: var(--np-chart-track-medium);
  }
  .chart-legend {
    display: block;
  }
  .attention-card .attention-item {
    padding-block: var(--np-space-3-5);
  }
  .summary-secondary p {
    font-size: var(--np-text-xs);
  }
  .grid-3 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .checkout-grid {
    grid-template-columns: 1fr;
  }
  .login-layout,.onboarding-layout {
    grid-template-columns: 1fr;
  }
  .account-hero h2,.login-brand h2 {
    font-size: var(--np-text-7xl);
  }
  .app-footer {
    margin-inline: var(--np-space-6);
  }
  .breadcrumb {
    font-size: var(--np-text-xs);
  }
}
@media(max-width:760px) {
  .sidebar {
    transform: translateX(-100%);
    width: var(--np-drawer-width);
    transition: transform var(--np-motion-drawer) var(--np-ease-standard);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .workspace {
    width: 100%;
    margin: 0;
  }
  .menu-toggle {
    display: inline-flex!important;
    min-height: var(--np-control-menu);
    padding: var(--np-space-1-5) var(--np-space-2-5);
    font-size: var(--np-text-xs);
  }
  .topbar {
    height: var(--np-topbar-height-small);
    padding-inline: var(--np-space-5);
  }
  .breadcrumb {
    font-size: var(--np-text-xs);
  }
  .breadcrumb>span:first-child {
    padding: 0 calc(var(--np-space-1-5) + var(--np-border-hairline));
  }
  .topbar-actions {
    gap: calc(var(--np-space-2) + var(--np-border-hairline));
  }
  .notification-trigger {
    display: none;
  }
  .demo-pill {
    font-size: var(--np-text-chart-small);
    padding: calc(var(--np-space-1) + var(--np-border-hairline)) calc(var(--np-space-2) + var(--np-border-hairline));
  }
  .avatar {
    width: var(--np-avatar-small);
    height: var(--np-avatar-small);
    font-size: var(--np-text-chart-small);
  }
  .design-bar {
    padding: calc(var(--np-space-2) + var(--np-border-hairline)) var(--np-space-5);
  }
  main {
    padding: var(--np-space-7) var(--np-space-5) var(--np-space-5);
  }
  .summary-primary {
    grid-column: 1/-1;
  }
  .summary-secondary p {
    font-size: var(--np-text-body);
  }
  .grid-2,.grid-3,.integration-grid {
    grid-template-columns: 1fr;
  }
  .panel {
    padding: calc(var(--np-space-5) + var(--np-border-hairline));
  }
  .panel-head {
    flex-wrap: wrap;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .table-caption {
    flex-wrap: wrap;
  }
  .table-caption>span:last-child {
    font-size: var(--np-text-caption-small);
  }
  .bottom-guide {
    flex-direction: column;
    align-items: flex-start;
    padding: calc(var(--np-space-1-5) + var(--np-border-hairline)) var(--np-space-0-5);
  }
  .app-footer {
    margin-inline: var(--np-space-5);
    flex-direction: column;
    gap: calc(var(--np-space-1-5) + var(--np-border-hairline));
  }
  .toast {
    left: 50%;
    width: calc(100% - var(--np-space-8));
    text-align: center;
  }
  .detail-steps {
    grid-template-columns: 1fr;
    gap: var(--np-space-4);
  }
  .detail-steps>div {
    display: grid;
    grid-template-columns: var(--np-space-5) 1fr 1fr;
    gap: var(--np-space-2);
    align-items: start;
  }
  .detail-steps p {
    margin: 0;
  }
  .detail-steps strong {
    font-size: var(--np-text-sm);
  }
  .detail-total {
    flex-wrap: wrap;
  }
  .modal {
    padding: var(--np-space-5-5);
  }
  .modal-header h2 {
    font-size: var(--np-text-modal-title-small);
  }
  .checkout-preview {
    padding: var(--np-space-5);
  }
  .checkout-head {
    flex-wrap: wrap;
  }
  .checkout-summary {
    padding: calc(var(--np-space-5-5) + var(--np-border-hairline));
  }
  .settings-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .account-hero,.login-brand {
    padding: var(--np-space-7);
  }
  .login-form {
    padding: var(--np-space-5-5);
  }
  .empty-state {
    padding: var(--np-space-10-5) var(--np-space-5);
  }
  .empty-state h2 {
    font-size: var(--np-text-3xl);
  }
  .row-actions {
    gap: calc(var(--np-space-1-5) + var(--np-border-hairline));
  }
}
@media(max-width:390px) {
  .topbar {
    padding-inline: var(--np-space-3-5);
    gap: var(--np-space-2);
  }
  .topbar .inline {
    gap: calc(var(--np-space-1-5) + var(--np-border-hairline));
  }
  .breadcrumb>span {
    display: none;
  }
  .breadcrumb {
    font-size: var(--np-text-caption-small);
  }
  .topbar-actions {
    gap: calc(var(--np-space-1-5) + var(--np-border-hairline));
  }
  .design-bar {
    padding-inline: var(--np-space-3-5);
  }
  main {
    padding-inline: var(--np-space-3-5);
  }
  .page-toolbar {
    gap: var(--np-space-3);
  }
  .period-switch button {
    font-size: var(--np-text-sm);
    padding: calc(var(--np-space-1-5) + var(--np-border-hairline)) var(--np-space-2-5);
  }
  .panel {
    padding: calc(var(--np-space-4) + var(--np-border-hairline));
  }
  .revenue-chart {
    gap: calc(var(--np-space-1-5) + var(--np-border-hairline));
    padding-inline: 0;
  }
  .revenue-meter {
    width: var(--np-chart-bar-width-small);
  }
  .attention-item {
    gap: var(--np-space-2-5);
  }
  .attention-card .text-link {
    font-size: var(--np-text-caption-small);
  }
  .app-footer {
    margin-inline: var(--np-space-3-5);
  }
  .checkout-preview {
    padding: var(--np-space-4);
  }
  .checkout-head img {
    width: var(--np-brand-width-small);
  }
  .checkout-summary {
    padding: calc(var(--np-space-4-5) + var(--np-border-hairline));
  }
  .btn {
    font-size: var(--np-text-sm);
  }
  .empty-state h2 {
    font-size: var(--np-text-empty-title-small);
  }
  .detail-list>div {
    flex-wrap: wrap;
  }
  .detail-list dd {
    margin-left: auto;
  }
  .modal-actions {
    flex-wrap: wrap;
  }
  .modal-actions>.btn {
    flex: 1;
  }
  .form-grid {
    gap: var(--np-space-3-5);
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation: none!important;
    transition: none!important;
    scroll-behavior: auto!important;
  }
}
/* Standalone customer/auth views and a separate operator workspace. */
.operator-nav {
  display: none!important;
}
.breadcrumb b {
  font-weight: var(--np-weight-medium);
}
body[data-route="admin"] .operator-nav {
  display: grid!important;
}
body[data-route="admin"] .sidebar>.nav-label,body[data-route="admin"] .sidebar>nav:not(.operator-nav) {
  display: none;
}
body[data-route="login"] .sidebar,body[data-route="checkout"] .sidebar {
  display: none;
}
body[data-route="login"] .workspace,body[data-route="checkout"] .workspace {
  margin-left: 0;
  width: 100%;
}
body[data-route="login"] main,body[data-route="checkout"] main {
  max-width: var(--np-standalone-width);
}
body[data-route="login"] .menu-toggle,body[data-route="checkout"] .menu-toggle {
  display: none!important;
}
body[data-route="login"] .topbar,body[data-route="checkout"] .topbar {
  padding-inline: max(var(--np-space-6),calc((var(--np-viewport-width) - var(--np-standalone-inner-width))/2));
}
body[data-route="login"] .topbar .notification-trigger,body[data-route="login"] .topbar .avatar,body[data-route="checkout"] .topbar .notification-trigger,body[data-route="checkout"] .topbar .avatar {
  display: none;
}
body[data-route="login"] .toast,body[data-route="checkout"] .toast {
  left: 50%;
}
body[data-route="login"] main>.grid-2>section:first-child {
  background: var(--np-color-ink);
  color: var(--np-color-text-inverse);
  border-color: var(--np-color-ink);
}
body[data-route="login"] main>.grid-2>section:first-child .muted {
  color: var(--np-color-text-inverse-muted);
}
body[data-route="login"] main>.grid-2>section:first-child .eyebrow {
  color: var(--np-color-brand);
}
body[data-route="login"] main>.grid-2>section:first-child .step-list li {
  border-color: var(--np-color-border-inverse);
}
.checkout-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--np-space-3);
  flex-wrap: wrap;
  border-top: var(--np-border-hairline) solid var(--np-color-border);
  padding-top: var(--np-space-5);
  margin-top: calc(var(--np-space-6) + var(--np-border-hairline));
  color: var(--np-color-text-muted);
  font-size: var(--np-text-body);
}
.checkout-amount {
  letter-spacing: var(--np-tracking-display);
  line-height: var(--np-leading-display);
  font-weight: var(--np-weight-semibold);
  margin: var(--np-space-4) 0 var(--np-space-5-5);
}
.integration-woo,.integration-api,.integration-wix,.integration-shopify {
  font-size: var(--np-text-base);
  font-weight: var(--np-weight-semibold);
  letter-spacing: var(--np-tracking-normal);
  color: var(--np-color-ink);
}
body[data-route="map"] main>.stack {
  margin-bottom: var(--np-space-8);
}
body[data-route="admin"] main>.tabs {
  margin-bottom: var(--np-space-5-5);
}
body[data-route="admin"] main>.grid-3,body[data-route="billing"] main>.grid-2 {
  margin-bottom: var(--np-space-5-5);
}
.mini-label,.eyebrow {
  font-size: var(--np-text-xs);
}
.design-bar {
  font-size: var(--np-text-sm);
}
.summary-primary>span,.summary-secondary span,.summary-secondary a {
  font-size: var(--np-text-body);
}
.sidebar-note p {
  font-size: var(--np-text-sm);
}
@media(max-width:760px) {
  .design-bar {
    font-size: var(--np-text-xs);
  }
  .design-bar .inline {
    gap: calc(var(--np-space-3) + var(--np-border-hairline));
  }
  .checkout-foot {
    font-size: var(--np-text-sm);
  }
}
@media(max-width:390px) {
  .design-bar .inline {
    font-size: var(--np-text-caption-small);
    gap: calc(var(--np-space-2-5) + var(--np-border-hairline));
  }
}
/* Owner refinement: calm metrics and a narrower, readable type scale. */
h1 {
  font-size: var(--np-text-6xl);
  font-weight: var(--np-weight-medium);
  letter-spacing: var(--np-tracking-heading);
}
h2 {
  font-size: var(--np-text-xl);
}
h3 {
  font-size: var(--np-text-heading-xs);
}
main {
  padding-top: var(--np-space-7-5);
}
.page-heading {
  margin-bottom: var(--np-space-5);
}
.page-subtitle {
  font-size: var(--np-text-base);
}
.summary-strip {
  grid-template-columns: 1.55fr 1fr 1fr;
  border-radius: var(--np-radius-summary);
  margin-bottom: var(--np-space-5-5);
}
.summary-primary {
  background: var(--np-color-surface);
  color: var(--np-color-ink);
  padding: var(--np-space-5) var(--np-space-6);
}
.summary-primary p,.summary-secondary p {
  font-size: var(--np-text-body);
  color: var(--np-color-text-muted);
  margin-bottom: calc(var(--np-space-2) + var(--np-border-hairline));
}
.summary-primary strong {
  font-size: var(--np-text-6xl);
  font-weight: var(--np-weight-medium);
  letter-spacing: var(--np-tracking-amount);
  line-height: var(--np-leading-heading);
}
.summary-primary>span {
  font-size: var(--np-text-body);
  color: var(--np-color-text-muted);
  margin-top: calc(var(--np-space-2) + var(--np-border-hairline));
}
.summary-secondary {
  padding: var(--np-space-5) var(--np-space-6);
  border-left: var(--np-border-hairline) solid var(--np-color-border);
}
.summary-secondary strong {
  font-size: var(--np-text-6xl);
  font-weight: var(--np-weight-book);
  line-height: var(--np-leading-heading);
}
.summary-secondary span,.summary-secondary a {
  font-size: var(--np-text-body);
  padding-top: calc(var(--np-space-2) + var(--np-border-hairline));
  margin-top: 0;
}
.metric>strong {
  font-size: var(--np-text-5xl);
  font-weight: var(--np-weight-medium);
}
.metric>span,.metric>p {
  font-size: var(--np-text-body);
}
.eyebrow,.mini-label {
  font-size: var(--np-text-xs);
  letter-spacing: var(--np-tracking-eyebrow);
}
.nav-label {
  font-size: var(--np-text-xs);
  letter-spacing: var(--np-tracking-label);
}
.badge,td .badge {
  font-size: var(--np-text-sm);
}
.muted,.settings-row .muted {
  font-size: var(--np-text-body-lg);
}
th {
  font-size: var(--np-text-sm);
  text-transform: none;
  letter-spacing: var(--np-tracking-normal);
}
td,table {
  font-size: var(--np-text-body-lg);
}
td small {
  font-size: var(--np-text-sm);
}
.transaction-link {
  font-size: var(--np-text-body-lg);
}
.table-caption,.table-footer {
  font-size: var(--np-text-sm);
}
.attention-item strong {
  font-size: var(--np-text-body-lg);
}
.attention-item small,.attention-item .muted,.attention-card>.text-link {
  font-size: var(--np-text-body);
}
.attention-number {
  font-size: var(--np-text-sm);
}
.chart-legend {
  font-size: var(--np-text-sm);
}
.chart-footer {
  font-size: var(--np-text-xs);
}
.chart-date {
  font-size: var(--np-text-sm);
}
.chart-value {
  font-size: var(--np-text-xs);
}
.app-footer,.sidebar-note p {
  font-size: var(--np-text-sm);
}
.detail-total strong {
  font-size: var(--np-text-5xl);
}
.detail-steps p,.detail-steps strong,.timeline li>strong,.timeline li>span {
  font-size: var(--np-text-body);
}
.checkout-amount {
  font-size: var(--np-text-8xl);
}
.checkout-payment h2 {
  font-size: var(--np-text-3xl);
}
.checkout-summary h2 {
  font-size: var(--np-text-2xl);
}
td .money-decimals,.settings-row .money-decimals {
  font-size: var(--np-money-table-fraction);
}
@media(min-width:1600px) {
  main {
    padding-top: var(--np-space-8);
  }
  .page-heading {
    margin-bottom: var(--np-space-5-5);
  }
}
@media(max-width:1050px) {
  .summary-strip {
    grid-template-columns: 1.55fr 1fr 1fr;
  }
  .summary-primary,.summary-secondary {
    padding: var(--np-space-5) var(--np-space-4-5);
  }
  .summary-primary strong {
    font-size: var(--np-text-4xl);
  }
  .summary-secondary strong {
    font-size: var(--np-text-4xl);
  }
  .summary-primary>span,.summary-secondary span,.summary-secondary a {
    font-size: var(--np-text-sm);
  }
}
@media(max-width:760px) {
  h1 {
    font-size: var(--np-text-5xl);
  }
  .summary-strip {
    grid-template-columns: 1fr 1fr;
  }
  .summary-primary {
    padding: var(--np-space-5) var(--np-space-5-5);
  }
  .summary-primary strong {
    font-size: var(--np-text-6xl);
  }
  .summary-secondary {
    padding: var(--np-space-4-5) var(--np-space-5-5);
    min-height: var(--np-summary-mobile-min-height);
  }
  .summary-secondary:nth-child(2) {
    border-left: 0;
  }
  .summary-secondary strong {
    font-size: var(--np-text-4xl);
  }
  .summary-primary>span,.summary-secondary span,.summary-secondary a {
    font-size: var(--np-text-body);
  }
  .page-subtitle {
    font-size: var(--np-text-body-lg);
  }
  .app-footer {
    font-size: var(--np-text-sm);
  }
  .chart-value {
    font-size: var(--np-text-caption-small);
  }
  .checkout-amount {
    font-size: var(--np-text-7xl);
  }
}
@media(max-width:390px) {
  h1 {
    font-size: var(--np-text-4xl);
  }
  .summary-primary,.summary-secondary {
    padding-inline: var(--np-space-4-5);
  }
  .summary-primary strong {
    font-size: var(--np-text-5xl);
  }
  .summary-secondary strong {
    font-size: var(--np-text-3xl);
  }
  .summary-secondary span,.summary-secondary a {
    font-size: var(--np-text-sm);
  }
  .chart-value {
    font-size: var(--np-text-chart-tiny);
  }
  .chart-footer {
    font-size: var(--np-text-caption-small);
  }
  .chart-legend {
    display: none;
  }
  .attention-card>.text-link {
    font-size: var(--np-text-sm);
  }
  .table-caption>span:last-child {
    font-size: var(--np-text-sm);
  }
}
/* Keep visually hidden table labels inside their scroll container. */
.table-wrap {
  position: relative;
}
.refund-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--np-space-5-5);
  align-items: start;
  margin-bottom: var(--np-space-5-5);
}
.refund-layout>.panel {
  min-width: 0;
  margin: 0;
}
.refund-scope {
  margin: calc(var(--np-space-2) + var(--np-border-hairline)) 0 0;
}
.refund-login {
  max-width: var(--np-refund-login-width);
}
.refund-login form {
  margin: var(--np-space-6) 0;
}
.refund-login .field {
  display: grid;
  gap: var(--np-space-2);
  margin-bottom: var(--np-space-4-5);
}
#live-refund-create .field {
  display: grid;
  gap: var(--np-space-2);
  margin: var(--np-space-4-5) 0 var(--np-space-2);
}
#live-refund-create>.btn {
  margin: var(--np-space-2) 0 var(--np-space-3-5);
}
.refund-original {
  display: grid;
  gap: var(--np-space-1-5);
  padding: calc(var(--np-space-3-5) + var(--np-border-hairline)) calc(var(--np-space-4) + var(--np-border-hairline));
  border: var(--np-border-hairline) solid var(--np-color-border);
  border-radius: var(--np-radius-xl);
  background: var(--np-color-surface-subtle);
  margin: var(--np-space-4-5) 0;
}
.refund-original>strong {
  font-size: var(--np-text-3xl);
  font-weight: var(--np-weight-medium);
}
.refund-original>small {
  color: var(--np-color-text-muted);
}
.refund-stale {
  color: var(--np-color-warning);
  margin-top: calc(-1 * var(--np-space-3));
}
.refund-notice {
  background: var(--np-color-success-soft);
  border-color: var(--np-color-success-border);
}
.refund-receipt .badge {
  margin-bottom: calc(var(--np-space-3-5) + var(--np-border-hairline));
}
.refund-receipt h3 {
  margin-bottom: var(--np-space-2-5);
}
.refund-receipt>.muted:last-child {
  margin-bottom: 0;
}
.refund-receipt .detail-list {
  margin: var(--np-space-4-5) 0;
}
.refund-receipt dd {
  max-width: 68%;
  word-break: break-word;
}
.refund-explanation {
  display: grid;
  gap: var(--np-space-4-5);
  padding-top: calc(var(--np-space-1) + var(--np-border-hairline));
}
.refund-explanation .badge {
  justify-self: start;
}
.refund-explanation p {
  margin: 0;
}
.refund-table {
  min-width: var(--np-refund-table-min-width);
}
.refund-table td:first-child {
  max-width: var(--np-refund-id-width);
}
.refund-table td:last-child {
  min-width: var(--np-refund-receipt-min-width);
  max-width: var(--np-refund-receipt-width);
}
.refund-table details>summary {
  cursor: pointer;
  font-weight: var(--np-weight-medium);
  color: var(--np-color-success);
  padding: var(--np-space-2) 0;
}
.refund-table details[open]>summary {
  margin-bottom: var(--np-space-4);
}
.refund-table .refund-receipt {
  font-size: var(--np-text-body);
}
.refund-list .table-footer {
  margin-top: var(--np-space-4);
}
body[data-merchant="connected"] .workspace-switch {
  cursor: default;
}
body[data-merchant="connected"] .design-bar {
  justify-content: space-between;
  gap: var(--np-space-4-5);
}
body[data-merchant="connected"] .demo-pill {
  font-size: var(--np-text-sm);
}
@media(max-width:1050px) {
  .refund-layout {
    grid-template-columns: 1fr;
  }
  .refund-table td:last-child {
    max-width: var(--np-refund-receipt-width-small);
  }
}
@media(max-width:760px) {
  .refund-layout {
    gap: var(--np-space-4-5);
  }
  .refund-login form>.btn {
    margin: var(--np-space-1-5) 0;
  }
  .refund-original>strong {
    font-size: var(--np-text-2xl);
  }
  .refund-receipt dd {
    max-width: 100%;
  }
  .refund-list .table-footer {
    align-items: flex-start;
    gap: var(--np-space-3);
    flex-wrap: wrap;
  }
}
.stack {
  align-content: start;
}
.muted.mini-label {
  font-size: var(--np-text-body);
  letter-spacing: normal;
  font-weight: var(--np-weight-regular);
}
.checkout-summary .mini-label {
  color: var(--np-color-text-inverse-muted);
}
.checkout-preview {
  margin-bottom: var(--np-space-5-5);
}
@media(max-width:760px) {
  .sidebar {
    visibility: hidden;
  }
  .sidebar.open {
    visibility: visible;
  }
}
@media(max-width:450px) {
  .chart-value {
    display: none;
  }
  .chart-date {
    font-size: var(--np-text-sm);
  }
  .chart-footer {
    font-size: var(--np-text-xs);
  }
  .revenue-chart {
    gap: calc(var(--np-space-2) + var(--np-border-hairline));
    height: var(--np-chart-height-small);
  }
  .bar-track {
    height: var(--np-chart-track-small);
  }
}
@media(max-width:760px) {
  .table-wrap .payments-table {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .payments-table thead {
    display: none;
  }
  .payments-table tbody {
    display: block;
  }
  .payments-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: calc(var(--np-space-1) + var(--np-border-hairline)) var(--np-space-3);
    border-bottom: var(--np-border-hairline) solid var(--np-color-border);
    padding: calc(var(--np-space-4) + var(--np-border-hairline)) 0;
  }
  .payments-table tbody tr:last-child {
    border-bottom: 0;
  }
  .payments-table td {
    padding: 0;
    border: 0;
    min-width: 0;
  }
  .payments-table td:last-child {
    display: none;
  }
  .payments-table.compact tr {
    grid-template-areas: "identity amount" "time status";
  }
  .payments-table.compact td:nth-child(1) {
    grid-area: identity;
  }
  .payments-table.compact td:nth-child(2) {
    grid-area: time;
    font-size: var(--np-text-sm);
    display: flex;
    gap: var(--np-space-2);
    align-items: center;
  }
  .payments-table.compact td:nth-child(2) small {
    margin: 0;
  }
  .payments-table.compact td:nth-child(3) {
    grid-area: status;
    text-align: right;
  }
  .payments-table.compact td:nth-child(4) {
    grid-area: amount;
  }
  .payments-table.full tr {
    grid-template-areas: "identity amount" "store status" "time status";
  }
  .payments-table.full td:nth-child(1) {
    grid-area: identity;
  }
  .payments-table.full td:nth-child(2) {
    grid-area: store;
    font-size: var(--np-text-sm);
  }
  .payments-table.full td:nth-child(2) small {
    display: none;
  }
  .payments-table.full td:nth-child(3) {
    grid-area: time;
    display: flex;
    gap: var(--np-space-2);
    font-size: var(--np-text-sm);
    align-items: center;
  }
  .payments-table.full td:nth-child(3) small {
    margin: 0;
  }
  .payments-table.full td:nth-child(4) {
    grid-area: status;
    text-align: right;
    align-self: center;
  }
  .payments-table.full td:nth-child(5) {
    grid-area: amount;
  }
  .payments-table .amount-cell {
    font-size: var(--np-text-body-lg);
    font-weight: var(--np-weight-medium);
  }
  .payments-table .transaction-link {
    min-height: calc(var(--np-space-6-5) + var(--np-border-hairline));
  }
  .payments-table .badge {
    font-size: var(--np-text-xs);
  }
}
/* Passive card views use the shared table and form dimensions. */
.card-list { container-type: inline-size; }
.card-filters { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: var(--np-space-4); }
.card-filters .field { display: grid; gap: var(--np-space-2); }
.card-filters input { width: 100%; min-width: 0; }
.table-wrap .card-table { table-layout: fixed; min-width: 0; }
.card-table th:nth-child(1) { width: 22%; }
.card-table th:nth-child(2) { width: var(--np-transaction-col-created); }
.card-table th:nth-child(4) { width: var(--np-transaction-col-status); }
.card-table th:nth-child(5) { width: var(--np-transaction-col-amount); }
.card-table .card-order .transaction-link { display: inline-flex; align-items: center; max-width: 100%; gap: var(--np-space-2); }
.card-order-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-table .transaction-open-icon { flex: none; }
.card-cell-label { display: none; }
/* Adapt to the actual panel width, including the navigation and page gutters.
   Every field remains in the document; narrow panels need no nested scrolling. */
@container (max-width:900px) {
  .table-wrap .card-table,.card-table tbody { display: block; width: 100%; }
  .card-table thead { position: absolute; width: var(--np-border-hairline); height: var(--np-border-hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .card-table tbody tr { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: 'order amount' 'created review' 'operations operations'; gap: var(--np-space-4) var(--np-space-5); align-items: start; padding: var(--np-space-5) var(--np-space-3); border-bottom: var(--np-border-hairline) solid var(--np-color-border-subtle); }
  .card-table tbody tr:last-child { border-bottom: 0; }
  .card-table td { display: block; min-width: 0; padding: 0; border: 0; }
  .card-table .card-order { grid-area: order; }
  .card-table .card-created { grid-area: created; }
  .card-table .card-operations { grid-area: operations; }
  .card-table .card-review { grid-area: review; text-align: right; }
  .card-table .card-amount { grid-area: amount; }
  .card-cell-label { display: block; margin-bottom: var(--np-space-1); color: var(--np-color-text-muted); font-size: var(--np-text-sm); font-weight: var(--np-weight-regular); }
}
/* Connected transaction reads share the product's compact type scale. */
.transaction-list,.transaction-detail,.transaction-shop {
  margin-bottom: var(--np-space-5-5);
}
.transaction-filters {
  display: grid;
  grid-template-columns: minmax(var(--np-transaction-filter-query),1.5fr) minmax(var(--np-transaction-filter-status),1fr) minmax(var(--np-transaction-filter-delivery),1fr) auto;
  align-items: end;
}
.transaction-filters .field {
  display: grid;
  gap: calc(var(--np-space-1-5) + var(--np-border-hairline));
}
.transaction-filters .field>span {
  font-size: var(--np-text-body);
}
.transaction-filters input,.transaction-filters select {
  width: 100%;
  min-width: 0;
}
.transaction-counts,.transaction-inbox {
  display: flex;
  flex-wrap: wrap;
  gap: var(--np-space-2-5) var(--np-space-6-5);
  margin: var(--np-space-4-5) 0;
  padding: var(--np-space-3-5) 0;
  border-block: var(--np-border-hairline) solid var(--np-color-border);
  font-size: var(--np-text-body);
  color: var(--np-color-text-muted);
}
.transaction-counts strong,.transaction-inbox strong {
  color: var(--np-color-ink);
  font-weight: var(--np-weight-medium);
  margin-left: var(--np-space-1-5);
}
.transaction-table {
  min-width: var(--np-transaction-table-base-width);
}
.transaction-table td:first-child {
  max-width: var(--np-transaction-id-max-width);
  overflow-wrap: anywhere;
}
.transaction-table td:nth-child(2) {
  max-width: var(--np-transaction-col-created);
  font-variant-numeric: tabular-nums;
}
.transaction-table tr.selected {
  background: var(--np-color-surface-hover);
}
.transaction-table .transaction-link {
  font-weight: var(--np-weight-medium);
}
.transaction-detail-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--np-space-4);
  margin: var(--np-space-5-5) 0;
}
.transaction-detail-summary>strong {
  font-size: var(--np-text-4xl);
  font-weight: var(--np-weight-medium);
}
.transaction-state-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--np-space-2);
}
.transaction-identities {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  column-gap: var(--np-space-7);
}
.transaction-identities dd {
  overflow-wrap: anywhere;
  max-width: 70%;
}
.transaction-delivery h3 {
  margin-bottom: var(--np-space-3-5);
}
.transaction-history {
  margin-top: var(--np-space-6);
}
.transaction-history>summary {
  cursor: pointer;
  font-weight: var(--np-weight-medium);
}
.transaction-history[open]>summary {
  margin-bottom: var(--np-space-5-5);
}
.transaction-history h3 {
  margin-top: var(--np-space-5-5);
}
.transaction-log {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--np-space-3);
}
.transaction-log li {
  display: grid;
  gap: calc(var(--np-space-1) + var(--np-border-hairline));
  padding: var(--np-space-3) 0;
  border-bottom: var(--np-border-hairline) solid var(--np-color-border);
  font-size: var(--np-text-body);
  overflow-wrap: anywhere;
}
.transaction-log li>span {
  color: var(--np-color-text-muted);
}
.transaction-shop .detail-list dd {
  overflow-wrap: anywhere;
  max-width: 70%;
}
@media(max-width:1100px) {
  .transaction-identities {
    grid-template-columns: 1fr;
  }
  .transaction-filters>.btn {
    justify-self: start;
  }
}
@media(max-width:760px) {
  .transaction-detail .panel-head,.transaction-shop .panel-head {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--np-space-3);
  }
  .transaction-counts,.transaction-inbox {
    gap: var(--np-space-2-5) var(--np-space-4-5);
  }
  .transaction-table {
    min-width: var(--np-transaction-table-base-width-small);
  }
  .transaction-detail-summary>strong {
    font-size: var(--np-text-3xl);
  }
  .transaction-identities dd {
    max-width: 64%;
  }
}
/* Connected overview: quiet metrics and explicitly separate time scopes. */
.overview-scope {
  margin: calc(-1 * var(--np-space-1)) 0 var(--np-space-5);
  font-size: var(--np-text-body);
}
.overview-period {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--np-space-2) var(--np-space-4-5);
  margin: var(--np-space-5) 0 var(--np-space-3-5);
}
.overview-period>strong {
  font-size: var(--np-text-base);
  font-weight: var(--np-weight-medium);
}
.overview-period>span {
  font-size: var(--np-text-body);
  color: var(--np-color-text-muted);
  font-variant-numeric: tabular-nums;
}
.overview-metrics {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) repeat(2,minmax(0,1fr));
  border: var(--np-border-hairline) solid var(--np-color-border);
  border-radius: var(--np-radius-summary);
  background: var(--np-color-surface);
  overflow: hidden;
}
.overview-metric {
  display: grid;
  gap: calc(var(--np-space-2) + var(--np-border-hairline));
  padding: var(--np-space-5) var(--np-space-6);
  border-left: var(--np-border-hairline) solid var(--np-color-border);
  align-content: start;
}
.overview-metric:first-child {
  border-left: 0;
}
.overview-metric>span {
  font-size: var(--np-text-body);
  color: var(--np-color-text-muted);
}
.overview-metric>strong {
  font-size: var(--np-text-4xl);
  line-height: var(--np-leading-title);
  font-weight: var(--np-weight-medium);
  letter-spacing: var(--np-tracking-heading);
}
.overview-metric>small {
  font-size: var(--np-text-sm);
  color: var(--np-color-text-muted);
}
.overview-metric-notes {
  margin: var(--np-space-3-5) 0 var(--np-space-5-5);
  font-size: var(--np-text-sm);
  color: var(--np-color-text-muted);
  line-height: var(--np-leading-note);
}
.overview-metric-notes>p {
  margin: calc(var(--np-space-1) + var(--np-border-hairline)) 0;
}
.overview-current-grid {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  gap: var(--np-space-5-5);
  margin-bottom: var(--np-space-5-5);
}
.overview-current-grid>.panel {
  margin: 0;
  min-width: 0;
}
.overview-attention-list {
  margin: 0 0 var(--np-space-4-5);
}
.overview-attention-list>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--np-space-4);
  padding: var(--np-space-3) 0;
  border-bottom: var(--np-border-hairline) solid var(--np-color-border);
  font-size: var(--np-text-body-lg);
}
.overview-attention-list dd {
  margin: 0;
  font-weight: var(--np-weight-medium);
  font-variant-numeric: tabular-nums;
}
.overview-current-grid .muted {
  font-size: var(--np-text-body);
}
.overview-refund-count {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--np-space-4);
  margin: var(--np-space-5) 0;
}
.overview-refund-count>strong {
  font-size: var(--np-text-4xl);
  font-weight: var(--np-weight-medium);
  line-height: var(--np-leading-title);
}
.overview-recent .panel-head {
  gap: var(--np-space-5);
}
.overview-recent .panel-head .muted {
  font-size: var(--np-text-body);
  margin: var(--np-space-2) 0 0;
}
.overview-table {
  min-width: var(--np-overview-table-min-width);
}
.overview-table td:first-child {
  max-width: var(--np-overview-identity-width);
  overflow-wrap: anywhere;
}
.overview-table td:nth-child(2) {
  max-width: var(--np-transaction-col-created);
  font-variant-numeric: tabular-nums;
}
.overview-loading {
  font-size: var(--np-text-body);
  color: var(--np-color-text-muted);
}
@media(max-width:1050px) {
  .overview-metric {
    padding: var(--np-space-4-5);
  }
  .overview-metric>strong {
    font-size: var(--np-text-3xl);
  }
  .overview-current-grid {
    grid-template-columns: 1fr;
  }
}
@media(max-width:760px) {
  .overview-metrics {
    grid-template-columns: 1fr 1fr;
  }
  .overview-amount {
    grid-column: 1/-1;
    border-bottom: var(--np-border-hairline) solid var(--np-color-border);
  }
  .overview-metric:nth-child(2) {
    border-left: 0;
  }
  .overview-period {
    display: grid;
    gap: var(--np-space-1-5);
  }
  .overview-recent .panel-head {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--np-space-3);
  }
  .overview-current-grid {
    gap: var(--np-space-4-5);
  }
  .overview-metric>strong,.overview-refund-count>strong {
    font-size: var(--np-text-3xl);
  }
  .overview-metric-notes {
    font-size: var(--np-text-sm);
  }
}
/* Keep the page surface present during initial reads, without fade-to-white. */
html,body {
  background: var(--np-color-page);
  color-scheme: light;
}
html {
  scrollbar-gutter: stable;
}
.page-loading {
  min-height: var(--np-loading-min-height);
}
.page-loading h1 {
  font-size: var(--np-text-3xl);
}
.page-loading-blocks {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--np-space-4-5);
  margin: var(--np-space-4-5) 0 var(--np-space-6);
  min-height: var(--np-loading-grid-height);
}
.page-loading-blocks>div {
  border: var(--np-border-hairline) solid var(--np-color-border);
  background: var(--np-color-surface-muted);
  border-radius: var(--np-radius-xl);
  min-height: var(--np-loading-tile-height);
}
.page-loading-blocks>div:last-child {
  grid-column: 1/-1;
  min-height: var(--np-loading-row-height);
}
.page-loading>.page-loading-blocks {
  margin-bottom: 0;
}
@media(max-width:760px) {
  .page-loading-blocks {
    gap: var(--np-space-3);
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .page-loading-blocks>div:nth-child(3) {
    display: none;
  }
}
/* Paging keeps the list and controls in place, including a shorter final page. */
.transaction-page-table {
  height: auto;
  max-height: none;
  overflow-x: auto;
  overflow-anchor: none;
  border-block: var(--np-border-hairline) solid var(--np-color-border);
}
.transaction-page-table .transaction-table {
  table-layout: fixed;
  min-width: var(--np-transaction-table-min-width);
}
.transaction-table th {
  position: sticky;
  top: 0;
  z-index: var(--np-z-table-head);
  background: var(--np-color-surface-table);
}
.transaction-table th:nth-child(1) {
  width: var(--np-transaction-col-identity);
}
.transaction-table th:nth-child(2) {
  width: var(--np-transaction-col-created);
}
.transaction-table th:nth-child(3) {
  width: var(--np-transaction-col-status);
}
.transaction-table th:nth-child(4) {
  width: var(--np-transaction-col-review);
}
.transaction-table th:nth-child(5) {
  width: var(--np-transaction-col-delivery);
}
.transaction-table th:nth-child(6) {
  width: var(--np-transaction-col-amount);
}
.transaction-table th:nth-child(7) {
  width: var(--np-transaction-col-action);
}
.transaction-review-link {
  display: inline-flex;
  flex-direction: column;
  gap: calc(var(--np-space-1) + var(--np-border-hairline));
  align-items: flex-start;
  max-width: 100%;
  color: var(--np-color-warning);
  font-size: var(--np-text-sm);
  font-weight: var(--np-weight-medium);
  line-height: var(--np-leading-compact);
  padding: calc(var(--np-space-1) + var(--np-border-hairline)) 0;
  text-decoration: underline;
  text-underline-offset: calc(var(--np-space-0-5) + var(--np-border-hairline));
}
.transaction-review-link:hover {
  color: var(--np-color-warning-strong);
}
.transaction-review-empty {
  color: var(--np-color-text-muted);
}
.transaction-action-heading,.transaction-action-cell {
  text-align: right;
  position: sticky;
  right: 0;
  background: var(--np-color-surface);
  box-shadow: var(--np-shadow-sticky-column);
}
.transaction-table th.transaction-action-heading {
  z-index: var(--np-z-table-action);
  background: var(--np-color-surface-table);
}
.transaction-refund-action {
  white-space: nowrap;
  font-size: var(--np-text-sm);
  padding-inline: var(--np-space-2);
}
.transaction-action-empty {
  color: var(--np-color-text-muted);
}
.transaction-pagination {
  display: grid;
  grid-template-columns: minmax(var(--np-transaction-page-count-width),1fr) minmax(var(--np-transaction-page-status-width),auto) auto;
  align-items: center;
  gap: var(--np-space-3);
  min-height: var(--np-transaction-pagination-height);
  border-top: 0;
}
.transaction-page-status {
  min-height: var(--np-status-line-height);
  text-align: right;
}
.transaction-pagination>.inline {
  flex-wrap: nowrap;
  gap: var(--np-space-1-5);
}
.transaction-list [aria-disabled="true"],#transaction-refresh[aria-disabled="true"] {
  cursor: default;
  background: var(--np-color-surface-subtle);
  color: var(--np-color-text-muted);
  border-color: var(--np-color-transparent);
}
.transaction-refund-action[aria-disabled="true"] {
  border-color: var(--np-color-border);
}
@media(max-width:760px) {
  .transaction-pagination {
    grid-template-columns: 1fr auto;
    gap: var(--np-space-1) var(--np-space-2-5);
  }
  .transaction-pagination>.inline {
    grid-column: 2;
    grid-row: 1/3;
  }
  .transaction-page-status {
    text-align: left;
    grid-column: 1;
    grid-row: 2;
  }
}
/* Native selects keep their keyboard behavior, with an inset CSS-only arrow. */
select,.field select,.select-label select,.transaction-filters select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--np-select-arrow-reserve);
  background-image: linear-gradient(45deg,var(--np-color-transparent) 50%,var(--np-color-text-muted) 50%),linear-gradient(135deg,var(--np-color-text-muted) 50%,var(--np-color-transparent) 50%);
  background-position: calc(100% - var(--np-select-arrow-start)) 50%,calc(100% - var(--np-select-arrow-end)) 50%;
  background-size: var(--np-select-arrow-size) var(--np-select-arrow-size);
  background-repeat: no-repeat;
}
@media(forced-colors:active) {
  select,.field select,.select-label select,.transaction-filters select {
    appearance: auto;
    background-image: none;
  }
}
/* One compact connected shell; the store identity stays in the sidebar. */
body[data-merchant="connected"] .topbar {
  display: none;
}
body[data-merchant="connected"] main {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  column-gap: var(--np-space-6);
  align-content: start;
  min-height: var(--np-viewport-height);
  padding: var(--np-space-5-5) var(--np-space-7) var(--np-space-6);
}
body[data-merchant="connected"] main>* {
  grid-column: 1/-1;
  min-width: 0;
}
body[data-merchant="connected"] main>.page-heading {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  margin: 0 0 var(--np-space-4);
}
body[data-merchant="connected"] .page-heading h1 {
  font-size: var(--np-text-4xl);
  line-height: var(--np-leading-title);
  margin: 0;
}
body[data-merchant="connected"] main>.page-toolbar {
  grid-column: 2;
  grid-row: 1;
  justify-content: flex-end;
  margin: 0 0 var(--np-space-4);
  gap: var(--np-space-3) var(--np-space-4-5);
}
body[data-merchant="connected"] .sidebar-bottom {
  padding-top: var(--np-space-6);
}
.development-label {
  margin: 0 var(--np-space-3-5) calc(var(--np-space-1-5) + var(--np-border-hairline));
  color: var(--np-color-text-inverse-muted);
  font-size: var(--np-text-caption-small);
  font-weight: var(--np-weight-medium);
  letter-spacing: var(--np-tracking-label);
}
.transaction-read-at,.portal-read-at {
  font-size: var(--np-text-sm);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.transaction-list {
  padding: var(--np-space-4-5) var(--np-space-5);
}
.transaction-filters {
  gap: var(--np-space-3);
  margin-bottom: var(--np-space-3);
}
.transaction-counts.transaction-quick-filters {
  gap: var(--np-space-1-5);
  margin: 0;
  padding: var(--np-space-2) 0 var(--np-space-2-5);
  border-top: 0;
  border-bottom: 0;
}
/* Counts change after filtering; neither the tabs nor the number slots resize. */
.transaction-quick-filter {
  display: inline-flex;
  flex: 0 0 var(--np-quick-tab-width);
  width: var(--np-quick-tab-width);
  min-width: var(--np-quick-tab-width);
  max-width: var(--np-quick-tab-width);
  align-items: center;
  justify-content: space-between;
  gap: var(--np-space-2);
  border: var(--np-border-hairline) solid var(--np-color-transparent);
  border-radius: var(--np-radius-md);
  background: var(--np-color-transparent);
  color: var(--np-color-text-muted);
  padding: calc(var(--np-space-1-5) + var(--np-border-hairline)) calc(var(--np-space-2-5) + var(--np-border-hairline));
  min-height: var(--np-quick-tab-height);
  font-size: var(--np-text-body);
  white-space: nowrap;
}
.transaction-quick-filter strong {
  flex: 0 0 var(--np-quick-tab-count-width);
  width: var(--np-quick-tab-count-width);
  min-width: var(--np-quick-tab-count-width);
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--np-weight-medium);
}
.transaction-quick-filter:hover {
  background: var(--np-color-surface-hover);
}
.transaction-quick-filter[aria-pressed="true"] {
  background: var(--np-color-success-soft);
  color: var(--np-color-success);
  border-color: var(--np-color-success-border);
}
.transaction-quick-filter[aria-disabled="true"] {
  cursor: default;
}
.transaction-quick-filter[aria-pressed="true"][aria-disabled="true"] {
  background: var(--np-color-success-soft);
  color: var(--np-color-success);
  border-color: var(--np-color-success-border);
}
.transaction-list-caption {
  padding: 0 var(--np-space-0-5) var(--np-space-2-5);
  margin: 0;
  align-items: start;
  flex-wrap: wrap;
  gap: var(--np-space-2) var(--np-space-4);
  font-size: var(--np-text-xs);
}
.transaction-count-scope {
  color: var(--np-color-text-muted);
}
.transaction-view-help {
  margin-left: auto;
  max-width: var(--np-view-help-width);
  color: var(--np-color-text-muted);
}
.transaction-view-help>summary {
  cursor: pointer;
  font-size: var(--np-text-xs);
  text-align: right;
}
.transaction-view-help[open] {
  flex-basis: 100%;
  max-width: none;
  border: var(--np-border-hairline) solid var(--np-color-border);
  border-radius: var(--np-radius-lg);
  padding: var(--np-space-3) calc(var(--np-space-3-5) + var(--np-border-hairline));
  background: var(--np-color-surface-subtle);
}
.transaction-view-help[open]>summary {
  text-align: left;
  margin-bottom: var(--np-space-2-5);
}
.transaction-view-help p {
  font-size: var(--np-text-body);
  margin: var(--np-space-2) 0 0;
}
.view-read-time {
  font-size: var(--np-text-sm);
  white-space: nowrap;
  color: var(--np-color-text-muted);
  font-variant-numeric: tabular-nums;
}
.view-help {
  margin: var(--np-space-2-5) 0 var(--np-space-4-5);
  font-size: var(--np-text-sm);
  color: var(--np-color-text-muted);
}
.view-help>summary {
  cursor: pointer;
  width: fit-content;
  text-underline-offset: calc(var(--np-space-0-5) + var(--np-border-hairline));
}
.view-help>summary:hover {
  text-decoration: underline;
}
.view-help[open] {
  border: var(--np-border-hairline) solid var(--np-color-border);
  border-radius: var(--np-radius-lg);
  padding: calc(var(--np-space-3) + var(--np-border-hairline)) var(--np-space-4);
  background: var(--np-color-surface-subtle);
}
.view-help[open]>summary {
  margin-bottom: var(--np-space-2-5);
}
.view-help p {
  font-size: var(--np-text-body);
  margin: var(--np-space-2) 0 0;
}
.refund-layout.refund-layout-single {
  grid-template-columns: minmax(0,1fr);
}
.refund-layout-single #live-refund-create {
  max-width: var(--np-refund-form-width);
}
.view-load-status,#live-report-feedback.view-load-status {
  display: block;
  min-height: var(--np-status-line-height);
  line-height: var(--np-leading-body);
  margin: 0 0 var(--np-space-2-5);
  font-size: var(--np-text-sm);
  color: var(--np-color-text-muted);
}
.transaction-detail .btn[aria-disabled="true"] {
  cursor: default;
  background: var(--np-color-surface-subtle);
  color: var(--np-color-text-muted);
  border-color: var(--np-color-border);
}
@media(max-width:1100px) {
  body[data-merchant="connected"] main {
    column-gap: var(--np-space-4);
    padding-inline: var(--np-space-5);
  }
  body[data-merchant="connected"] main>.page-toolbar {
    gap: var(--np-space-2) var(--np-space-3);
  }
  .transaction-filters {
    grid-template-columns: minmax(var(--np-transaction-filter-query-small),1.3fr) minmax(var(--np-transaction-filter-status-small),1fr) minmax(var(--np-transaction-filter-delivery-small),1fr) auto;
    gap: var(--np-space-2-5);
  }
}
@media(max-width:900px) {
  body[data-merchant="connected"] main {
    grid-template-columns: minmax(0,1fr);
  }
  body[data-merchant="connected"] main>.page-heading {
    grid-column: 1;
    grid-row: auto;
    margin-bottom: var(--np-space-2-5);
  }
  body[data-merchant="connected"] main>.page-toolbar {
    grid-column: 1;
    grid-row: auto;
    justify-content: space-between;
    margin-bottom: var(--np-space-3-5);
  }
  .transaction-filters {
    grid-template-columns: 1fr 1fr;
  }
}
@media(max-width:760px) {
  body[data-merchant="connected"] .topbar {
    display: flex;
    height: var(--np-topbar-connected-height);
    padding-inline: var(--np-space-4-5);
  }
  body[data-merchant="connected"] .breadcrumb>b,body[data-merchant="connected"] .breadcrumb>span:first-of-type {
    display: none;
  }
  body[data-merchant="connected"] main {
    min-height: calc(var(--np-viewport-height) - var(--np-topbar-connected-height));
    padding: var(--np-space-4) var(--np-space-4) var(--np-space-5-5);
  }
  .transaction-list {
    padding: var(--np-space-4);
  }
  .transaction-filters {
    grid-template-columns: minmax(0,1fr);
  }
  .transaction-quick-filter {
    padding: calc(var(--np-space-1-5) + var(--np-border-hairline)) calc(var(--np-space-2) + var(--np-border-hairline));
    font-size: var(--np-text-sm);
  }
}
/* Page length controls share the compact tools row; rows scroll with the document. */
.transaction-page-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--np-space-2) var(--np-space-4-5);
  padding: var(--np-space-1) 0 var(--np-space-3);
  font-size: var(--np-text-sm);
  color: var(--np-color-text-muted);
}
.transaction-page-tools .transaction-view-help {
  margin-left: auto;
}
.transaction-page-size {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--np-space-2) + var(--np-border-hairline));
  white-space: nowrap;
}
.transaction-page-size select {
  width: var(--np-page-size-width);
  min-height: var(--np-page-size-height);
  padding: var(--np-space-1-5) var(--np-space-9-5) var(--np-space-1-5) var(--np-space-3);
  font-size: var(--np-text-body);
  font-variant-numeric: tabular-nums;
}
.transaction-pagination>span:first-child {
  font-variant-numeric: tabular-nums;
}
@media(max-width:760px) {
  .transaction-page-tools {
    gap: var(--np-space-2) var(--np-space-3);
  }
  .transaction-page-tools .transaction-view-help {
    margin-left: 0;
  }
  .transaction-page-size {
    margin-left: auto;
  }
}
/* A row opens its own detail route; explicit refund links keep their action. */
.transaction-row {
  cursor: pointer;
}
.transaction-row:hover>td,.transaction-row:focus-within>td {
  background: var(--np-color-surface-hover);
}
.transaction-open-icon {
  display: inline-block;
  margin-left: calc(var(--np-space-2) + var(--np-border-hairline));
  color: var(--np-color-text-muted);
  font-size: var(--np-open-icon);
  line-height: var(--np-leading-solid);
  transition: color var(--np-motion-feedback);
}
.transaction-row:hover .transaction-open-icon,.transaction-row:focus-within .transaction-open-icon {
  color: var(--np-color-success);
}
/* Detail timestamps separate the calendar date from the exact clock time. */
@media(max-width:560px) {
  .transaction-identities>.transaction-date-field {
    display: grid;
    gap: var(--np-space-2);
    justify-content: stretch;
  }
  .transaction-identities>.transaction-date-field dd {
    max-width: none;
    margin-left: 0;
    text-align: left;
  }
}