:root {
  color-scheme: light;
  --bg: #f7faf9;
  --surface: #ffffff;
  --ink: #142b31;
  --muted: #66787c;
  --line: #e3ecec;
  --line-strong: #cadada;
  --accent: #237f83;
  --accent-strong: #17686e;
  --accent-soft: #eef8f6;
  --quick-accent: #ffffff;
  --quick-accent-dark: #f3faf8;
  --quick-key: #ffffff;
  --danger: #a43e34;
  --shadow: 0 16px 44px rgba(20, 43, 49, 0.08);
  --soft-shadow: 0 8px 26px rgba(20, 43, 49, 0.06);
  --radius: 16px;
  --control-radius: 12px;
  --button-radius: 13px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

html[data-theme="dark"] {
  background: #0b1416;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  background: var(--bg);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Sans",
    "Yu Gothic",
    sans-serif;
  letter-spacing: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1416;
  --surface: #132326;
  --ink: #f2f7f6;
  --muted: #94aaa7;
  --line: #203539;
  --line-strong: #294247;
  --accent: #278c8d;
  --accent-strong: #237f83;
  --accent-soft: rgba(39, 140, 141, 0.2);
  --quick-accent: #132326;
  --quick-accent-dark: #0b1416;
  --quick-key: #0d191b;
  --danger: #ff9a8c;
  --dark-app-bg: #0b1416;
  --dark-surface: #132326;
  --dark-elevated-surface: #182d31;
  --dark-input-bg: #0d191b;
  --dark-subtle-border: #203539;
  --dark-text-secondary: #c7d8d6;
  --dark-text-disabled: #5f7370;
  --dark-light-action-bg: #eaf4f2;
  --dark-light-action-text: #1b3f42;
  --dark-status-chip-bg: #e7f1ef;
  --dark-status-chip-text: #496f6b;
  --dark-status-chip-border: #c8d8d5;
  --dark-disabled-bg: #dde6e4;
  --dark-disabled-text: #6f8582;
  --shadow: 0 16px 44px rgba(0, 0, 0, 0.26);
  --soft-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}

body[data-theme="dark"] :is(.app-splash),
body[data-theme="dark"] :is(.first-issuer-panel),
body[data-theme="dark"] :is(.control-surface),
body[data-theme="dark"] :is(.preview-surface),
body[data-theme="dark"] :is(.history-surface),
body[data-theme="dark"] :is(.settings-surface),
body[data-theme="dark"] :is(.detail-sheet-panel),
body[data-theme="dark"] :is(.bottom-nav),
body[data-theme="dark"] :is(.preview-action-bar) {
  background: var(--surface);
  border-color: var(--line);
}

body[data-theme="dark"] :is(.first-issuer-overlay),
body[data-theme="dark"] :is(.detail-sheet-overlay) {
  background: rgba(7, 12, 14, 0.72);
}

body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
  color: var(--ink);
  background-color: #10191c;
  border-color: var(--line-strong);
}

body[data-theme="dark"] :is(.primary-button),
body[data-theme="dark"] .bottom-nav :is(button.active),
body[data-theme="dark"] .bottom-nav.single-action > button {
  color: #fff;
  background: #237f83;
  border-color: #237f83;
}

body[data-theme="dark"] .secondary-button,
body[data-theme="dark"] .ghost-button,
body[data-theme="dark"] .file-button,
body[data-theme="dark"] .policy-link,
body[data-theme="dark"] .settings-list-item,
body[data-theme="dark"] .theme-card,
body[data-theme="dark"] .subscription-option,
body[data-theme="dark"] .account-logo-preview,
body[data-theme="dark"] .audit-panel,
body[data-theme="dark"] .account-linking-note,
body[data-theme="dark"] .plan-comparison-notes {
  color: var(--ink);
  background: #1b272a;
  border-color: var(--line);
}

body[data-theme="dark"] .theme-card.recommended {
  background: #1b272a;
}

body[data-theme="dark"] .theme-recommendation-badge,
body[data-theme="dark"] .subscription-manage-note {
  background: #142023;
}

body[data-theme="dark"] .quick-issue-panel {
  background: linear-gradient(180deg, #172124 0%, #132024 52%, #10191c 100%);
}

button,
input,
select,
textarea,
label,
[role="button"],
.segmented span {
  touch-action: manipulation;
}

button {
  -webkit-tap-highlight-color: transparent;
}

input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

button,
a,
label,
[role="button"] {
  -webkit-user-select: none;
  user-select: none;
}

.app-booting {
  overflow: hidden;
}

.first-issuer-open {
  overflow: hidden;
}

.app-splash {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 32px;
  color: var(--ink);
  background: #fbfdfd;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.first-issuer-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: start center;
  padding: max(84px, calc(env(safe-area-inset-top) + 42px)) 14px max(24px, env(safe-area-inset-bottom));
  background: rgba(245, 251, 251, 0.86);
  backdrop-filter: blur(12px);
}

.first-issuer-overlay[hidden] {
  display: none;
}

.first-issuer-panel {
  display: grid;
  gap: 12px;
  width: min(100%, 440px);
  max-height: calc(100vh - 132px);
  overflow: auto;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(20, 43, 49, 0.14);
}

.first-issuer-mark {
  width: 54px;
  height: 54px;
  background: #f7fbfb url("/icon-1024.png") center / cover no-repeat;
  border: 1px solid rgba(216, 228, 228, 0.7);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(20, 43, 49, 0.08);
}

.first-issuer-panel .kicker {
  margin: 0 0 -8px;
}

.first-issuer-panel h2 {
  margin: 0;
  font-size: 1.42rem;
  line-height: 1.2;
}

.first-issuer-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.6;
}

.first-issuer-login {
  display: grid;
  justify-items: center;
  gap: 1px;
  margin-top: 1px;
  color: rgba(105, 124, 128, 0.86);
  font-size: 0.71rem;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
}

.first-issuer-login-label {
  display: block;
}

.first-issuer-login-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 8px;
}

.first-issuer-login-separator {
  color: rgba(105, 124, 128, 0.58);
  font-weight: 900;
}

.first-issuer-login .link-button {
  min-height: 34px;
  padding: 0 2px;
  border: 0;
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent;
  box-shadow: none;
}

.first-issuer-panel input {
  font-size: 16px;
}

.first-issuer-panel input[aria-invalid="true"] {
  border-color: #c65353;
  box-shadow: 0 0 0 3px rgba(198, 83, 83, 0.14);
}

.first-issuer-panel .first-issuer-policy-links {
  margin-top: -6px;
  color: rgba(105, 124, 128, 0.86);
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.5;
}

.first-issuer-policy-main,
.first-issuer-policy-ending {
  display: inline-block;
}

.first-issuer-policy-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 2px;
  color: var(--accent-strong);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.app-splash-mark,
.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  color: var(--accent-strong);
  background: #f7fbfb url("/icon-1024.png") center / cover no-repeat;
  border: 1px solid rgba(216, 228, 228, 0.7);
  border-radius: 15px;
  box-shadow: 0 10px 26px rgba(20, 43, 49, 0.09);
  overflow: hidden;
}

.app-splash-mark {
  width: 92px;
  height: 92px;
  border-radius: 24px;
}

.app-splash-mark::before,
.brand-mark::before {
  content: "";
  position: absolute;
  width: 54%;
  height: 58%;
  background: #ffffff;
  border: 1.5px solid #d7e6e6;
  border-radius: 9px;
  box-shadow: 0 8px 18px rgba(20, 43, 49, 0.08);
}

.app-splash-mark::after,
.brand-mark::after {
  content: "";
  position: absolute;
  width: 31%;
  height: 33%;
  left: 34%;
  top: 32%;
  background:
    linear-gradient(var(--accent-strong), var(--accent-strong)) 0 0 / 100% 4px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 50% / 86% 4px no-repeat,
    linear-gradient(#b9dede, #b9dede) 0 100% / 64% 3px no-repeat;
  border-left: 4px solid var(--accent-strong);
  border-radius: 2px;
}

.app-splash-mark::before,
.brand-mark::before,
.app-splash-mark::after,
.brand-mark::after {
  content: none;
}

body:not(.app-booting) .app-splash {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body.preview-open {
  overflow: hidden;
}

body.detail-sheet-open {
  overflow: hidden;
}

body.pdf-generation-loading {
  overflow: hidden;
}

button,
input,
select,
.link-button {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  width: min(100%, 1480px);
  margin: 0 auto;
  padding:
    calc(14px + env(safe-area-inset-top, 0px))
    calc(14px + env(safe-area-inset-right, 0px))
    calc(92px + env(safe-area-inset-bottom, 0px))
    calc(14px + env(safe-area-inset-left, 0px));
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0 14px;
}

.main-topbar {
  display: none;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 13px;
}

.brand-name,
.kicker {
  margin: 0 0 2px;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0;
}

.verify-lockup h1 {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.25;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 1.3rem;
  line-height: 1.18;
}

h2 {
  margin-bottom: 0;
  font-size: 1.1rem;
  line-height: 1.2;
}

h3 {
  margin-bottom: 0;
  font-size: 0.95rem;
  line-height: 1.25;
}

[hidden] {
  display: none !important;
}

.status-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.status-pill,
.lock-badge,
.meter-text {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.status-pill.strong {
  color: #fff;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.status-pill.offline {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}

.app-grid {
  display: grid;
  gap: 18px;
  align-items: start;
}

.control-surface,
.preview-surface,
.history-surface,
.settings-surface {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--soft-shadow);
}

.control-surface,
.history-surface,
.settings-surface {
  padding: 18px;
}

.history-surface.is-zip-mode {
  padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
}

.control-surface {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.appstore-subscription-screenshot .settings-surface > .form-section:not(.subscription-settings) {
  display: none;
}

.appstore-subscription-screenshot .settings-surface > :is(.settings-group):not(.settings-subscription-group) {
  display: none;
}

.appstore-cloud-screenshot .settings-surface > .form-section {
  display: none;
}

.appstore-cloud-screenshot .settings-surface > :is(.settings-group) {
  display: none;
}

.appstore-cloud-screenshot .settings-surface > .form-section:first-of-type,
.appstore-cloud-screenshot .settings-surface > .issuer-summary-section,
.appstore-cloud-screenshot .settings-surface > .form-section[aria-labelledby="dataTitle"] {
  display: block;
}

.appstore-cloud-screenshot .settings-surface > :is(.settings-group):first-of-type,
.appstore-cloud-screenshot .settings-surface > :is(.settings-group)[aria-labelledby="settingsGroupData"] {
  display: grid;
}

.appstore-history-screenshot .history-tools,
.appstore-history-screenshot .history-utility-panel,
.appstore-history-screenshot .history-export-panel,
.appstore-history-screenshot .history-retention-panel,
.appstore-history-screenshot .history-export-selection,
.appstore-history-screenshot .history-zip-mode-panel,
.appstore-history-screenshot .history-zip-create-bar,
.appstore-history-screenshot .history-load-more-status,
.appstore-history-screenshot #clearHistoryButton {
  display: none;
}

.appstore-history-screenshot .history-result-head {
  margin: 12px 0;
}

.appstore-history-screenshot .history-list {
  gap: 10px;
}

.appstore-history-screenshot .history-list li {
  padding: 12px;
}

.appstore-history-screenshot .history-zip-select {
  display: none;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.policy-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.policy-link {
  display: grid;
  min-height: 44px;
  place-items: center;
  padding: 9px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
}

.policy-link:focus-visible,
.policy-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.account-danger-zone {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.account-danger-zone[hidden] {
  display: none;
}

.account-danger-zone .danger-button {
  margin-top: 8px;
}

.surface-head,
.preview-toolbar,
.section-title-row,
.action-bar,
.inline-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.surface-head {
  margin-bottom: 14px;
}

.surface-head.compact {
  margin-bottom: 12px;
}

.settings-header {
  margin-bottom: 18px;
}

.settings-group {
  display: grid;
  gap: 0;
  margin-top: 18px;
}

.settings-group:first-of-type {
  margin-top: 0;
}

.settings-group-title {
  margin: 0 0 7px 12px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.25;
}

.settings-list-item {
  overflow: hidden;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
}

.settings-group .settings-list-item + .settings-list-item {
  border-top: 0;
}

.settings-group .settings-list-item:first-of-type {
  border-radius: 8px 8px 0 0;
}

.settings-group .settings-list-item:last-of-type {
  border-radius: 0 0 8px 8px;
}

.settings-group .settings-list-item:first-of-type:last-of-type {
  border-radius: 8px;
}

.settings-list-item .settings-disclosure-summary {
  min-height: 58px;
  padding: 12px 14px;
}

.settings-list-item[open] .settings-disclosure-summary {
  border-bottom: 1px solid var(--line);
}

.settings-panel-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.settings-panel-body > .settings-note,
.settings-panel-body > .form-grid,
.settings-panel-body > .theme-grid,
.settings-panel-body > .issuer-visibility-grid,
.settings-panel-body > .issuer-summary-overview,
.settings-panel-body > .issuer-summary-display-list,
.settings-panel-body > .settings-action-row,
.settings-panel-body > .subscription-grid,
.settings-panel-body > .subscription-actions,
.settings-panel-body > .policy-link-grid,
.settings-panel-body > .account-logo-settings {
  margin-top: 0;
}

.settings-list-item .lock-badge {
  max-width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

.settings-list-item .settings-disclosure-title small {
  overflow: visible;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}

.issuer-summary-body {
  gap: 10px;
}

.issuer-summary-overview {
  display: grid;
  gap: 4px;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--line);
}

.issuer-summary-label,
.issuer-summary-display-list dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.35;
}

.issuer-summary-overview strong {
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.35;
}

.issuer-summary-current-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 8px;
  min-width: 0;
}

.issuer-summary-current-row span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.issuer-summary-display-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.issuer-summary-display-list div {
  display: grid;
  grid-template-columns: minmax(7em, 0.38fr) minmax(0, 1fr);
  gap: 12px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
}

.issuer-summary-display-list div:last-child {
  border-bottom: 0;
}

.issuer-summary-display-list dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.issuer-summary-action {
  margin-top: 2px;
}

.quick-issue-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
  color: var(--ink);
  background: linear-gradient(180deg, var(--quick-accent), var(--quick-accent-dark));
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--soft-shadow);
}

.quick-issue-topline,
.quick-action-row,
.quick-recipient-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quick-issue-topline {
  position: relative;
  justify-content: flex-end;
}

.quick-issue-badges {
  display: grid;
  grid-template-columns: auto auto minmax(7.5em, 1fr) auto auto;
  align-items: center;
  justify-content: stretch;
  gap: 8px;
  width: 100%;
}

.quick-issue-badges .meter-text {
  justify-content: center;
  min-width: 0;
}

.quick-issue-panel .kicker,
.quick-issue-panel h3 {
  color: var(--ink);
}

.quick-issue-panel .meter-text {
  color: var(--accent-strong);
  background: #fff;
  border-color: var(--line-strong);
}

.quick-issue-panel .ghost-button {
  color: var(--accent-strong);
  background: #fff;
  border-color: var(--line-strong);
}

.quick-new-button,
.quick-draft-button,
.quick-history-button,
.quick-settings-button {
  min-width: 0;
  min-height: 38px;
  padding: 7px 11px;
  font-size: 0.8rem;
  font-weight: 900;
}

.quick-settings-button {
  display: grid;
  place-items: center;
  width: 42px;
  padding-inline: 0;
  line-height: 1;
}

.quick-settings-icon,
.quick-settings-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.quick-settings-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quick-recipient-card {
  --quick-recipient-control-height: 50px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 0.58fr);
  align-items: start;
  gap: 4px 8px;
  padding: 8px 10px 5px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.quick-recipient-field {
  min-width: 0;
}

.quick-recipient-field input {
  height: var(--quick-recipient-control-height);
  min-height: var(--quick-recipient-control-height);
  padding-block: 10px;
}

.quick-honorific-field {
  min-width: 0;
}

.quick-honorific-field .compact-segmented {
  height: var(--quick-recipient-control-height);
  min-height: var(--quick-recipient-control-height);
}

.favorite-recipient-tools {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
  margin-top: 0;
  padding-top: 4px;
  border-top: 0;
}

.favorite-recipient-select {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.favorite-recipient-select > span {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
}

.favorite-recipient-select select,
.favorite-apply-button {
  min-height: 36px;
  padding: 7px 11px;
  font-size: 0.76rem;
}

.favorite-recipient-tools.locked {
  display: none;
}

.quick-issue-panel .field > span,
.quick-amount-entry > span {
  color: var(--muted);
}

.quick-issue-panel input,
.quick-issue-panel select {
  color: var(--ink);
  background: #fff;
  border-color: var(--line-strong);
}

.quick-issue-panel input::placeholder {
  color: #8aa1a4;
}

.quick-issue-panel input:focus,
.quick-issue-panel select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 143, 147, 0.14);
}

.compact-segmented {
  min-height: 44px;
  border-color: var(--line-strong);
  background: #fff;
}

.compact-segmented span {
  color: var(--muted);
}

.compact-segmented input:checked + span {
  color: #fff;
  background: var(--accent-strong);
}

.quick-amount-entry {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  padding: 2px 0 0;
}

.quick-amount-notice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(100%, 390px);
  max-height: 0;
  padding: 0 12px;
  color: #276d70;
  background: #eaf6f3;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: clamp(0.68rem, 2.8vw, 0.78rem);
  font-weight: 840;
  line-height: 1.32;
  text-align: center;
  overflow: hidden;
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translateY(-3px);
  transition: max-height 0.14s ease, padding 0.14s ease, opacity 0.14s ease, transform 0.14s ease;
}

.quick-amount-notice.is-visible {
  max-height: 52px;
  min-height: 30px;
  padding-block: 6px;
  border-color: #b9ded9;
  opacity: 1;
  transform: translateY(0);
}

.quick-amount-notice.error {
  color: #a13e2b;
  background: #fff4ef;
  border-color: #edc5b5;
}

.quick-amount-entry strong {
  width: 100%;
  color: var(--ink);
  font-size: clamp(3.3rem, 15vw, 5.8rem);
  font-weight: 850;
  line-height: 1;
  text-align: center;
  overflow-wrap: anywhere;
}

.quick-amount-formula {
  display: -webkit-box;
  width: min(100%, 330px);
  min-height: 1.1em;
  max-height: 2.35em;
  color: #6f8589;
  font-size: clamp(0.68rem, 2.9vw, 0.78rem);
  font-weight: 760;
  line-height: 1.16;
  text-align: center;
  overflow: hidden;
  overflow-wrap: anywhere;
  opacity: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.quick-amount-formula.is-visible {
  opacity: 1;
}

.amount-keypad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.amount-keypad button {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 56px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: clamp(1.25rem, 5vw, 1.9rem);
  font-weight: 760;
  box-shadow: 0 4px 14px rgba(20, 43, 49, 0.035);
  transition: transform 0.08s ease, background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}

.amount-keypad button:not(:disabled):active,
.amount-keypad button.tap-pressed:not(:disabled) {
  color: var(--accent-strong);
  background: #dff3ef;
  border-color: var(--accent);
  box-shadow: inset 0 2px 7px rgba(20, 43, 49, 0.12);
  transform: scale(0.94);
}

.amount-keypad .keypad-tool {
  color: var(--accent-strong);
  background: #eef9f5;
  font-size: 1rem;
  font-weight: 900;
}

.amount-keypad .keypad-zero {
  grid-column: span 2;
  aspect-ratio: auto;
  border-radius: 999px;
}

.amount-keypad .keypad-calculator-toggle {
  order: 4;
  font-size: 1.05rem;
}

.amount-keypad .keypad-calc-extra {
  display: none;
}

.amount-keypad [data-keypad-value="1"] {
  order: 1;
}

.amount-keypad [data-keypad-value="2"] {
  order: 2;
}

.amount-keypad [data-keypad-value="3"] {
  order: 3;
}

.amount-keypad [data-keypad-value="4"] {
  order: 5;
}

.amount-keypad [data-keypad-value="5"] {
  order: 6;
}

.amount-keypad [data-keypad-value="6"] {
  order: 7;
}

.amount-keypad [data-keypad-action="tax"] {
  order: 8;
}

.amount-keypad [data-keypad-value="7"] {
  order: 9;
}

.amount-keypad [data-keypad-value="8"] {
  order: 10;
}

.amount-keypad [data-keypad-value="9"] {
  order: 11;
}

.amount-keypad [data-keypad-action="clear"] {
  order: 12;
}

.amount-keypad [data-keypad-value="00"] {
  order: 13;
}

.amount-keypad [data-keypad-value="0"] {
  order: 14;
}

.amount-keypad [data-keypad-action="backspace"] {
  order: 15;
}

body.calculator-mode .amount-keypad {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #edf8f4;
  border-color: rgba(42, 119, 122, 0.28);
  box-shadow: 0 -14px 36px rgba(42, 119, 122, 0.14);
}

body.calculator-mode .amount-keypad .keypad-calc-extra {
  display: grid;
}

body.calculator-mode .amount-keypad button {
  color: #12353a;
  background: #f8fcfb;
  border-color: #c6dfdc;
}

body.calculator-mode .amount-keypad .keypad-tool,
body.calculator-mode .amount-keypad .keypad-calc-extra {
  color: #1e6a6e;
  background: #dff3ee;
  border-color: #a9d3ca;
}

body.calculator-mode .amount-keypad .keypad-calc-equals {
  grid-column: span 2;
  order: 19;
  aspect-ratio: auto;
  border-radius: 999px;
  color: #fff;
  background: #2a777a;
  border-color: #2a777a;
}

body.calculator-mode .amount-keypad .keypad-calculator-toggle {
  order: 4;
  color: #fff;
  background: #173238;
  border-color: #173238;
}

body.calculator-mode .amount-keypad .keypad-zero {
  grid-column: span 1;
}

body.calculator-mode .amount-keypad [data-keypad-action="clear"] {
  order: 1;
}

body.calculator-mode .amount-keypad [data-keypad-action="backspace"] {
  order: 2;
}

body.calculator-mode .amount-keypad [data-keypad-action="tax"] {
  order: 3;
}

body.calculator-mode .amount-keypad .keypad-calc-multiply {
  order: 8;
}

body.calculator-mode .amount-keypad [data-keypad-value="7"] {
  order: 5;
}

body.calculator-mode .amount-keypad [data-keypad-value="8"] {
  order: 6;
}

body.calculator-mode .amount-keypad [data-keypad-value="9"] {
  order: 7;
}

body.calculator-mode .amount-keypad .keypad-calc-subtract {
  order: 12;
}

body.calculator-mode .amount-keypad [data-keypad-value="4"] {
  order: 9;
}

body.calculator-mode .amount-keypad [data-keypad-value="5"] {
  order: 10;
}

body.calculator-mode .amount-keypad [data-keypad-value="6"] {
  order: 11;
}

body.calculator-mode .amount-keypad .keypad-calc-add {
  order: 16;
}

body.calculator-mode .amount-keypad [data-keypad-value="1"] {
  order: 13;
}

body.calculator-mode .amount-keypad [data-keypad-value="2"] {
  order: 14;
}

body.calculator-mode .amount-keypad [data-keypad-value="3"] {
  order: 15;
}

body.calculator-mode .amount-keypad [data-keypad-value="00"] {
  order: 17;
}

body.calculator-mode .amount-keypad [data-keypad-value="0"] {
  order: 18;
}

.calculator-glyph {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  line-height: 0;
}

.calculator-glyph svg {
  display: block;
  width: 24px;
  height: 24px;
  overflow: visible;
}

.calculator-glyph rect,
.calculator-glyph path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.calculator-glyph circle {
  fill: currentColor;
}

.amount-shortcuts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quick-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.quick-action-row .primary-button,
.quick-action-row .secondary-button {
  min-height: 48px;
}

.quick-action-row .primary-button {
  color: #fff;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.quick-action-row .secondary-button {
  color: var(--accent-strong);
  background: #fff;
  border-color: var(--line-strong);
}

.detail-draft-reminder {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  color: var(--ink);
  background: #f4fbf9;
  border: 1px solid #acd5cd;
  border-radius: 8px;
}

.detail-draft-reminder[hidden] {
  display: none;
}

.detail-draft-reminder strong,
.detail-draft-reminder span {
  display: block;
  overflow-wrap: anywhere;
}

.detail-draft-reminder strong {
  font-size: 0.86rem;
}

.detail-draft-reminder span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.35;
}

.detail-draft-reminder .ghost-button {
  min-height: 40px;
  padding-inline: 12px;
  color: var(--accent-strong);
  background: #fff;
  border-color: #acd5cd;
}

.form-section {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.detail-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 26;
  display: grid;
  align-items: end;
  padding:
    calc(12px + env(safe-area-inset-top, 0px))
    calc(12px + env(safe-area-inset-right, 0px))
    calc(12px + env(safe-area-inset-bottom, 0px))
    calc(12px + env(safe-area-inset-left, 0px));
  background: rgba(19, 50, 56, 0.36);
}

.detail-sheet-overlay[hidden] {
  display: none;
}

.detail-sheet-panel {
  display: grid;
  width: min(100%, 760px);
  max-height: min(86vh, 760px);
  margin: 0 auto;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px 14px 14px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--line);
  border-radius: 16px 16px 8px 8px;
  box-shadow: 0 24px 70px rgba(19, 50, 56, 0.22);
  outline: none;
}

.detail-sheet-handle {
  justify-self: center;
  width: 44px;
  height: 5px;
  margin: 2px 0 10px;
  background: #c9dddd;
  border-radius: 999px;
}

.detail-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.detail-sheet-head {
  position: sticky;
  top: -10px;
  z-index: 2;
  padding: 2px 0 10px;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--line);
}

.detail-draft-status {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.detail-sheet-panel .form-section:first-of-type {
  border-top: 0;
}

.detail-sheet-actions {
  position: sticky;
  bottom: -14px;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(88px, 0.46fr);
  gap: 8px;
  padding-top: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), #fff 30%);
}

.detail-sheet-actions button {
  min-width: 0;
  padding-inline: 10px;
  white-space: normal;
  line-height: 1.14;
}

.section-title-row {
  margin-bottom: 12px;
}

.detail-disclosure {
  padding-bottom: 12px;
}

.detail-disclosure-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  cursor: pointer;
  list-style: none;
}

.detail-disclosure-summary::-webkit-details-marker {
  display: none;
}

.detail-title-stack {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.detail-title-stack::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.14s ease;
}

.detail-disclosure[open] .detail-title-stack::before {
  transform: rotate(45deg);
}

.detail-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 7px;
  min-width: 0;
}

.detail-title-line h3 {
  margin: 0;
}

.detail-section-summary-note {
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}

.detail-disclosure-summary + * {
  margin-top: 12px;
}

.detail-disclosure > .settings-note {
  margin-top: 8px;
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.detail-basic-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.detail-date-tax-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(104px, 0.72fr);
  gap: 10px;
  width: 100%;
  justify-content: stretch;
  align-items: start;
}

.detail-basic-grid input,
.detail-basic-grid select {
  min-width: 0;
  box-sizing: border-box;
}

.detail-date-field,
.detail-tax-field {
  width: 100%;
}

.detail-date-field input,
.detail-tax-field select {
  display: block;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 10px;
  font-size: 0.95rem;
  line-height: 40px;
  -webkit-appearance: none;
  appearance: none;
}

.detail-date-field input {
  text-align: center;
}

.detail-tax-field select {
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M7%209l5-5%205%205M7%2015l5%205%205-5%27%20fill%3D%27none%27%20stroke%3D%27%23171412%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}

.detail-basic-grid .field-wide,
.detail-basic-grid .quick-picks {
  grid-column: 1 / -1;
}

.detail-compact-field {
  width: min(100%, 560px);
}

.detail-basic-return {
  display: flex;
  justify-content: flex-end;
}

.detail-basic-return button {
  min-width: min(100%, 168px);
}

.detail-issuer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px;
  gap: 8px;
  align-items: end;
}

.secondary-button.compact-button.detail-issuer-edit-button {
  width: 68px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  padding-inline: 10px;
  align-self: end;
  white-space: nowrap;
}

.field,
.toggle-line {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field > span,
.field > label:first-child,
.toggle-line > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.field > small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.4;
}

.field-label-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.field-label-row > label:first-child {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-toggle {
  min-height: 28px;
  padding: 0;
}

.compact-toggle > span {
  font-size: 0.72rem;
  white-space: nowrap;
}

input,
select,
textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 12px 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--control-radius);
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(40, 95, 92, 0.13);
}

input:disabled {
  color: #4d4843;
  background: #edf1f3;
  border-color: #d7dfe4;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 48px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--control-radius);
  background: #fff;
}

.segmented label {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

.segmented input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
}

.segmented span {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.segmented input:checked + span {
  color: #fff;
  background: var(--ink);
}

.quick-picks,
.quick-amounts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quick-picks button,
.quick-amounts button,
.ghost-button,
.secondary-button,
.primary-button {
  min-height: 44px;
  border-radius: var(--button-radius);
  font-weight: 800;
  transition: transform 0.08s ease, background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.quick-picks button,
.quick-amounts button,
.secondary-button,
.ghost-button {
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
}

.link-button {
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  padding: 0 14px;
  text-decoration: none;
}

.quick-picks button:hover,
.quick-amounts button:hover,
.secondary-button:hover,
.ghost-button:hover {
  border-color: var(--ink);
}

.quick-picks button:not(:disabled):active,
.quick-picks button.tap-pressed:not(:disabled),
.quick-amounts button:not(:disabled):active,
.quick-amounts button.tap-pressed:not(:disabled),
.secondary-button:not(:disabled):active,
.secondary-button.tap-pressed:not(:disabled),
.ghost-button:not(:disabled):active,
.ghost-button.tap-pressed:not(:disabled),
.policy-link:active,
.policy-link.tap-pressed,
.file-button:not(.disabled):active,
.file-button.tap-pressed:not(.disabled),
.bottom-nav button:not(:disabled):active,
.bottom-nav button.tap-pressed:not(:disabled) {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 1px 4px rgba(20, 43, 49, 0.12);
  transform: translateY(1px) scale(0.98);
}

.primary-button {
  color: #fff;
  background: var(--accent-strong);
  border: 1px solid var(--accent-strong);
}

.primary-button:not(:disabled):active,
.primary-button.tap-pressed:not(:disabled) {
  color: #fff;
  background: #105b61;
  border-color: #105b61;
  box-shadow: inset 0 2px 8px rgba(20, 43, 49, 0.2);
  transform: translateY(1px) scale(0.98);
}

.primary-button.is-busy {
  position: relative;
  padding-right: 38px;
  color: #fff;
  background: #105b61;
  border-color: #105b61;
  box-shadow: inset 0 2px 8px rgba(20, 43, 49, 0.2), 0 0 0 3px rgba(35, 127, 131, 0.14);
  transform: translateY(1px) scale(0.99);
}

.secondary-button.is-busy,
.ghost-button.is-busy {
  position: relative;
  padding-right: 38px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 1px 4px rgba(20, 43, 49, 0.12), 0 0 0 3px rgba(35, 127, 131, 0.1);
  transform: translateY(1px) scale(0.99);
}

.primary-button.is-busy::after,
.secondary-button.is-busy::after,
.ghost-button.is-busy::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid rgba(255, 255, 255, 0.46);
  border-top-color: #fff;
  border-radius: 50%;
  animation: button-spin 0.72s linear infinite;
}

.secondary-button.is-busy::after,
.ghost-button.is-busy::after {
  border-color: rgba(35, 127, 131, 0.24);
  border-top-color: var(--accent-strong);
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}

button[aria-disabled="true"] {
  opacity: 0.78;
}

button[aria-disabled="true"]:active,
button.tap-pressed[aria-disabled="true"] {
  color: var(--danger);
  background: #fff8f7;
  border-color: #e1b4ad;
}

.action-bar {
  position: sticky;
  bottom: 72px;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr));
  padding-top: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), #fff 24%);
}

.inline-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 10px;
}

.debug-plan-switcher {
  margin: 12px 0 0;
  padding: 12px;
  background: #f8fbfb;
  border: 1px dashed var(--line-strong);
  border-radius: var(--control-radius);
}

.debug-plan-switcher[hidden] {
  display: none;
}

.notice {
  margin-bottom: 12px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--accent-soft);
  border: 1px solid #c8e3df;
  border-radius: 6px;
  font-size: 0.86rem;
  font-weight: 700;
}

.item-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--accent-soft);
  border: 1px solid #c8e3df;
  border-radius: 6px;
}

.item-total span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.item-total strong {
  font-size: 1rem;
}

.product-section-head {
  align-items: center;
  margin-bottom: 8px;
}

.product-entry-head {
  grid-column: 1 / -1;
  margin: 0 0 -4px;
}

.product-entry-head h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 850;
}

.product-title-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.detail-use-toggle {
  grid-template-columns: auto auto;
  gap: 6px;
  min-height: 34px;
  padding: 0;
}

.detail-use-toggle input {
  width: 22px;
  height: 22px;
  min-height: 22px;
}

.detail-use-toggle > span {
  color: var(--ink);
  font-size: 0.82rem;
}

.product-detail-body[hidden] {
  display: none;
}

.product-detail-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-detail-body .field-wide,
.product-detail-body .detail-form-pair,
.product-detail-body .product-catalog-tools,
.product-detail-body .line-item-heading,
.product-detail-body .line-item-list,
.product-detail-body .item-total,
.product-detail-body .detail-extra-fields,
.product-detail-body .product-other-actions {
  grid-column: 1 / -1;
}

.product-catalog-tools {
  margin-bottom: -4px;
}

.product-section .product-catalog-tools {
  gap: 5px;
  padding: 2px 2px 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #edf3f1;
  border-radius: 0;
}

.product-section .product-catalog-head {
  gap: 8px;
}

.product-section .product-catalog-head strong,
.product-section .product-catalog-head span {
  color: #708087;
  font-size: 0.72rem;
  font-weight: 700;
}

.product-section .product-catalog-tools .settings-note {
  margin: 0;
  color: #7c8b91;
  font-size: 0.72rem;
  line-height: 1.45;
}

.product-catalog-select {
  gap: 0;
}

.product-catalog-select select {
  min-height: 36px;
  padding-block: 0;
  color: #47535a;
  background: #fff;
  border-color: #dce6e3;
  font-size: 0.82rem;
}

.product-name-field {
  gap: 7px;
}

.field-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.field-heading-row > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.inline-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}

.inline-checkbox input {
  width: 17px;
  height: 17px;
  min-height: 17px;
  margin: 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

.product-favorite-toggle span,
.product-save-toggle span {
  overflow-wrap: anywhere;
}

.detail-form-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 0.58fr);
  gap: 8px;
}

.detail-form-pair + .detail-form-pair {
  margin-top: -2px;
}

.product-primary-action {
  display: grid;
  margin-top: 2px;
}

.product-primary-action .primary-button {
  min-height: 48px;
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  font-size: 0.94rem;
  font-weight: 800;
}

.product-primary-action .primary-button:not(:disabled):active,
.product-primary-action .primary-button.tap-pressed:not(:disabled) {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.product-secondary-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.product-secondary-actions .product-save-toggle {
  min-height: 40px;
  padding-inline: 2px;
}

.detail-extra-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.detail-extra-actions[hidden] {
  display: none;
}

.detail-extra-actions .primary-button {
  min-height: 44px;
  padding-inline: 12px;
  font-size: 0.9rem;
}

.product-clear-button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 4px;
  color: var(--muted);
  background: transparent;
  border: 0;
  font-size: 0.76rem;
}

.product-clear-button:hover {
  color: var(--ink);
  background: transparent;
  border-color: transparent;
}

.detail-extra-actions .product-clear-button {
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  font-size: 0.84rem;
}

.product-catalog-mode-actions {
  display: none;
}

.detail-sheet-panel.product-catalog-mode .product-catalog-mode-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, 0.46fr) minmax(88px, 0.42fr);
  gap: 8px;
  margin-top: 2px;
}

.detail-sheet-panel.product-catalog-mode .product-catalog-mode-actions button {
  min-height: 48px;
}

.detail-sheet-panel.product-catalog-mode .receipt-details-section,
.detail-sheet-panel.product-catalog-mode #detailIssuerSwitchSection,
.detail-sheet-panel.product-catalog-mode .detail-draft-status,
.detail-sheet-panel.product-catalog-mode .product-primary-action,
.detail-sheet-panel.product-catalog-mode .product-secondary-actions,
.detail-sheet-panel.product-catalog-mode .detail-extra-actions,
.detail-sheet-panel.product-catalog-mode .product-save-toggle,
.detail-sheet-panel.product-catalog-mode .item-total,
.detail-sheet-panel.product-catalog-mode .line-item-heading,
.detail-sheet-panel.product-catalog-mode .line-item-list,
.detail-sheet-panel.product-catalog-mode #detailSheetDoneButton,
.detail-sheet-panel.product-catalog-mode #saveProductButton,
.detail-sheet-panel.product-catalog-mode #newProductButton,
.detail-sheet-panel.product-catalog-mode #deleteProductButton,
.detail-sheet-panel.product-catalog-mode #clearLineItemsButton {
  display: none;
}

.detail-sheet-panel.product-catalog-mode .detail-sheet-actions {
  grid-template-columns: minmax(0, 1fr);
}

.detail-extra-fields,
.product-other-actions {
  padding: 10px 12px;
  background: #f8fafb;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.detail-extra-fields summary,
.product-other-actions summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 850;
}

.product-save-toggle {
  justify-content: flex-start;
  min-height: 32px;
  padding: 2px 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  font-size: 0.76rem;
}

.detail-extra-grid,
.product-other-actions .product-form-actions {
  margin-top: 10px;
}

.product-form-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.product-form-actions button {
  min-width: 0;
  min-height: 44px;
  padding: 0 8px;
  font-size: 0.82rem;
  line-height: 1.15;
  white-space: nowrap;
}

.line-item-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: -2px;
  color: var(--ink);
  font-size: 0.88rem;
}

.line-item-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.line-item-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.line-item-list li > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.line-item-list strong,
.line-item-list span {
  overflow-wrap: anywhere;
}

.line-item-list span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.line-item-amount {
  color: var(--ink) !important;
  text-align: right;
  white-space: nowrap;
}

.empty-line-items {
  grid-template-columns: 1fr !important;
  place-items: center;
  min-height: 54px;
  color: var(--muted);
  border-style: dashed !important;
  font-weight: 700;
}

.toggle-line {
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: 46px;
  padding: 10px 0;
}

.toggle-line input {
  width: 22px;
  min-height: 22px;
  height: 22px;
  accent-color: var(--ink);
}

.invoice-tax-toggle {
  grid-column: 1 / -1;
}

.toggle-line small {
  grid-column: 2;
  margin-top: -6px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.35;
}

.issuer-visibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.issuer-display-settings {
  display: grid;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.plan-locked.locked {
  opacity: 0.72;
}

.form-status {
  min-height: 22px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.form-status.error {
  color: var(--danger);
}

.form-status.success {
  color: var(--accent);
}

.status-toast {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  left: calc(16px + env(safe-area-inset-left, 0px));
  z-index: 95;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.status-toast[hidden] {
  display: none;
}

.status-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.status-toast span {
  display: inline-flex;
  align-items: center;
  max-width: min(100%, 520px);
  min-height: 44px;
  padding: 10px 15px;
  color: #fff;
  background: rgba(20, 43, 49, 0.94);
  border-radius: 999px;
  box-shadow: 0 16px 42px rgba(20, 43, 49, 0.22);
  font-size: 0.88rem;
  font-weight: 820;
  line-height: 1.35;
  text-align: center;
}

.status-toast.success span {
  background: rgba(23, 104, 110, 0.96);
}

.status-toast.error span {
  background: rgba(164, 62, 52, 0.96);
}

.product-section[hidden] {
  display: none;
}

.item-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  background: #f8fafb;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.item-total span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.item-total strong {
  font-size: 1.05rem;
}

.line-item-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.line-item-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.line-item-list li > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.line-item-list strong,
.line-item-list span {
  overflow-wrap: anywhere;
}

.line-item-list span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.line-item-amount {
  color: var(--ink) !important;
  text-align: right;
  white-space: nowrap;
}

.line-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.line-item-edit,
.line-item-remove {
  min-height: 34px;
  padding: 6px 10px;
}

.empty-line-items {
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center;
  min-height: 60px;
  color: var(--muted);
  font-weight: 700;
}

.preview-surface {
  overflow: hidden;
}

.preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  background: rgba(23, 20, 18, 0.54);
}

.preview-overlay[hidden] {
  display: none;
}

.pdf-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(23, 20, 18, 0.66);
}

.pdf-loading-overlay[hidden] {
  display: none;
}

.cancel-dialog-overlay,
.login-complete-dialog-overlay,
.detail-draft-dialog-overlay,
.manual-amount-dialog-overlay,
.app-confirm-dialog-overlay,
.product-csv-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(23, 20, 18, 0.56);
}

.cancel-dialog-overlay[hidden],
.login-complete-dialog-overlay[hidden],
.detail-draft-dialog-overlay[hidden],
.manual-amount-dialog-overlay[hidden],
.app-confirm-dialog-overlay[hidden],
.product-csv-dialog-overlay[hidden] {
  display: none;
}

.cancel-dialog-panel,
.login-complete-dialog-panel,
.detail-draft-dialog-panel,
.manual-amount-dialog-panel,
.app-confirm-dialog-panel,
.product-csv-dialog-panel {
  display: grid;
  gap: 14px;
  width: min(100%, 440px);
  padding: 22px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.cancel-dialog-panel h2,
.login-complete-dialog-panel h2,
.detail-draft-dialog-panel h2,
.manual-amount-dialog-panel h2,
.app-confirm-dialog-panel h2,
.product-csv-dialog-panel h2 {
  margin: 0;
  font-size: 1.25rem;
}

.detail-draft-dialog-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.detail-draft-dialog-actions {
  display: grid;
  gap: 8px;
}

.manual-amount-dialog-actions {
  display: grid;
  gap: 8px;
}

.manual-amount-dialog-actions button,
.app-confirm-dialog-actions button {
  min-height: 48px;
}

.app-confirm-dialog-message,
#appConfirmDialogMessage {
  white-space: pre-line;
}

.app-confirm-dialog-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.app-confirm-dialog-actions.has-secondary {
  grid-template-columns: minmax(0, 1fr);
}

.login-complete-dialog-panel {
  border-radius: 18px;
}

.login-complete-dialog-panel .primary-button {
  width: 100%;
}

.cancel-dialog-panel textarea {
  resize: vertical;
}

.product-csv-dialog-overlay {
  z-index: 76;
}

.product-csv-dialog-panel {
  width: min(100%, 360px);
  padding: 18px;
  border-radius: 14px;
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.csv-dialog-actions {
  display: grid;
  gap: 8px;
}

.csv-dialog-actions .file-button,
.csv-dialog-actions .ghost-button,
.product-csv-dialog-panel > .secondary-button {
  display: grid;
  width: 100%;
  min-height: 46px;
  place-items: center;
  text-align: center;
}

.danger-primary-button {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}

.danger-outline-button {
  color: var(--danger);
  background: #fff;
  border-color: #e1b4ad;
}

.danger-outline-button:not(:disabled):active,
.danger-outline-button.tap-pressed:not(:disabled) {
  color: var(--danger);
  background: #fff8f7;
  border-color: var(--danger);
  box-shadow: inset 0 1px 4px rgba(164, 62, 52, 0.12);
  transform: translateY(1px) scale(0.98);
}

.pdf-loading-panel {
  display: grid;
  justify-items: center;
  width: min(100%, 340px);
  padding: 28px 22px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  text-align: center;
}

.pdf-loading-panel h2 {
  margin: 4px 0 8px;
  font-size: 1.25rem;
}

.pdf-loading-panel p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.pdf-loading-spinner {
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border: 4px solid #d8eeec;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pdf-loading-spin 0.84s linear infinite;
}

@keyframes pdf-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdf-loading-spinner {
    animation-duration: 1.8s;
  }
}

.preview-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(100%, 1180px);
  height: min(100%, 100dvh);
  margin: 0 auto;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.preview-toolbar {
  padding:
    calc(16px + env(safe-area-inset-top, 0px))
    calc(16px + env(safe-area-inset-right, 0px))
    12px
    calc(16px + env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--line);
}

.preview-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 42px;
  min-height: 42px;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
}

.preview-scroll {
  overflow: auto;
  overscroll-behavior: contain;
  padding: 14px;
  -webkit-overflow-scrolling: touch;
}

.receipt-sheet {
  position: relative;
  width: min(100%, 210mm);
  min-height: 940px;
  margin: 0 auto;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cfd6da;
  box-shadow: 0 14px 34px rgba(23, 20, 18, 0.14);
  font-family: var(--receipt-font-family, inherit);
}

.receipt-sheet.is-unissued {
  border-style: dashed;
}

.receipt-sheet.is-cancelled::after {
  position: absolute;
  inset: 24px;
  display: grid;
  place-items: center;
  color: rgba(164, 62, 52, 0.2);
  border: 4px solid rgba(164, 62, 52, 0.28);
  content: "取消済";
  font-size: clamp(3rem, 12vw, 7rem);
  font-weight: 900;
  transform: rotate(-12deg);
  pointer-events: none;
}

.receipt-status-notice {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  color: var(--danger);
  background: #fff8f7;
  border: 1px solid rgba(164, 62, 52, 0.36);
}

.receipt-status-notice[hidden] {
  display: none;
}

.receipt-status-notice strong {
  font-size: 1rem;
}

.receipt-status-notice p {
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.receipt-watermark {
  position: absolute;
  inset: 38% auto auto 50%;
  z-index: 5;
  width: max-content;
  max-width: 92%;
  color: rgba(164, 62, 52, 0.2);
  border: 2px solid rgba(164, 62, 52, 0.22);
  padding: 12px 20px;
  font-size: clamp(1.25rem, 4vw, 2.4rem);
  font-weight: 900;
  transform: translate(-50%, -50%) rotate(-18deg);
  pointer-events: none;
}

.receipt-watermark[hidden] {
  display: none;
}

.receipt-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 940px;
  padding: clamp(24px, 5vw, 56px);
}

.receipt-head,
.receipt-footer,
.receipt-lines,
.detail-block {
  display: grid;
  gap: 12px;
}

.receipt-head {
  grid-template-areas: "title logo meta";
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--receipt-accent, var(--ink));
}

.receipt-sheet.is-paid .receipt-head {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.receipt-sheet.has-logo .receipt-head {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.receipt-logo-slot {
  grid-area: logo;
  justify-self: center;
  display: grid;
  place-items: center;
  width: min(190px, 26vw);
  min-width: 72px;
  height: 70px;
}

.receipt-logo-slot[hidden] {
  display: none;
}

.receipt-logo-slot img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 76px;
  object-fit: contain;
  object-position: center;
}

.receipt-meta {
  grid-area: meta;
  display: grid;
  justify-self: end;
  justify-items: end;
  min-width: 170px;
}

.receipt-meta dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.receipt-meta div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.receipt-meta dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.receipt-meta dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 800;
  text-align: right;
  overflow-wrap: anywhere;
}

.receipt-title-block {
  grid-area: title;
  min-width: 0;
}

.receipt-title-block p {
  margin-bottom: 4px;
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: 0.76rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.receipt-title-block h2 {
  margin-bottom: 0;
  font-size: clamp(1.45rem, 4.2vw, 2.05rem);
  font-weight: 800;
  line-height: 1.1;
}

.recipient-block {
  display: grid;
  gap: 7px;
}

.recipient-block > span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
}

.recipient-block p {
  min-height: 44px;
  margin-bottom: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-strong);
  font-size: clamp(1.35rem, 4.8vw, 2.1rem);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.recipient-block small {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.receipt-lines span,
.detail-block span,
.issuer-block span,
.amount-block span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
}

.amount-block {
  display: grid;
  gap: 8px;
  padding: clamp(18px, 4vw, 30px);
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink);
  border-left: 7px solid var(--receipt-ui-accent, var(--receipt-accent, var(--ink)));
}

.amount-block strong {
  font-size: clamp(2.2rem, 10vw, 4.8rem);
  line-height: 1;
  text-align: right;
  overflow-wrap: anywhere;
}

.receipt-lines,
.detail-block {
  grid-template-columns: minmax(0, 1fr);
}

.receipt-lines > div,
#previewRegistrationRow {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

#previewPaymentRow[hidden],
#previewRegistrationRow[hidden] {
  display: none;
}

.issuer-block #previewRegistrationRow {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  padding-bottom: 0;
  border-bottom: 0;
}

.issuer-block #previewRegistrationRow span,
.issuer-block #previewRegistrationRow strong {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.tax-summary > div:not(.tax-breakdown) {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.receipt-lines strong,
.tax-summary strong,
#previewRegistrationRow strong {
  overflow-wrap: anywhere;
}

.detail-block {
  display: none;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding-top: 2px;
  background: transparent;
  border: 0;
}

.detail-block.visible {
  display: grid;
}

.detail-block > .detail-heading {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding-bottom: 10px;
  border-bottom-color: var(--ink);
}

.detail-heading strong {
  font-size: 1rem;
}

.receipt-table-wrap {
  grid-column: 1 / -1;
  overflow-x: auto;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.receipt-item-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.receipt-item-table th,
.receipt-item-table td {
  padding: 8px 7px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.receipt-item-table th {
  color: var(--muted);
  font-weight: 900;
}

.receipt-item-table td {
  font-weight: 700;
}

.receipt-item-table .numeric {
  text-align: right;
}

.receipt-amount-cell {
  display: grid;
  gap: 2px;
  justify-items: end;
  white-space: nowrap;
}

.receipt-amount-cell strong {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
}

.receipt-amount-cell span {
  font-size: 0.64rem;
}

.tax-summary {
  display: grid;
  gap: 8px;
}

.tax-summary .grand-total {
  padding-top: 12px;
  border-bottom-color: var(--ink);
}

.tax-summary .grand-total strong {
  font-size: 1.08rem;
}

.tax-breakdown {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.tax-breakdown > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.tax-breakdown > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}

.tax-breakdown strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.receipt-footer {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--receipt-accent, var(--ink));
}

.receipt-sheet[data-receipt-template="compact"] .receipt-body {
  gap: 22px;
  padding: clamp(20px, 4vw, 44px);
}

.receipt-sheet[data-receipt-template="airy"] .receipt-body {
  gap: 34px;
  padding: clamp(30px, 6vw, 68px);
}

.issuer-block {
  display: grid;
  gap: 4px;
}

.issuer-block strong {
  font-size: 1.08rem;
}

.issuer-block p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.verification-block {
  display: grid;
  gap: 5px;
  justify-items: center;
  min-width: 92px;
  max-width: 130px;
}

.verification-block[hidden] {
  display: none;
}

.verification-qr {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  background: #fff;
  border: 1px solid var(--line);
}

.verification-qr svg {
  width: 82px;
  height: 82px;
}

.verification-block p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
  overflow-wrap: anywhere;
}

.brand-credit {
  margin-bottom: 0;
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0;
  text-align: right;
  text-transform: uppercase;
}

.brand-credit.hidden {
  display: none;
}

.history-list {
  display: grid;
  gap: 0;
  min-height: 120px;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  list-style: none;
  overflow: hidden;
  background-clip: padding-box;
}

.history-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.history-search-field input {
  min-height: 46px;
  font-size: 1rem;
}

.history-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

.history-status-field {
  flex: 0 1 152px;
  min-width: 132px;
}

.history-filter-row .compact-button {
  min-height: 44px;
}

.history-advanced {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.history-advanced[hidden] {
  display: none;
}

.history-advanced-head,
.history-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.history-result-head {
  margin: 0;
}

.history-result-head strong {
  font-size: 0.96rem;
  font-weight: 900;
}

.history-result-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: right;
}

.history-advanced .form-grid,
.history-advanced .field {
  min-width: 0;
  width: 100%;
}

.history-advanced input[type="date"] {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
  text-align: center;
}

.history-export-panel {
  display: grid;
  gap: 7px;
  margin: 0;
}

.history-export-panel > strong {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.history-utility-panel {
  margin: 0 0 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.history-utility-panel[hidden] {
  display: none;
}

.history-utility-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 10px 13px;
  cursor: pointer;
  color: var(--ink);
  background: transparent;
  border: 0;
  text-align: left;
}

.history-utility-summary > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.history-utility-summary strong {
  font-size: 0.9rem;
  font-weight: 850;
}

.history-utility-summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.77rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-utility-body {
  display: grid;
  gap: 12px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
}

.history-utility-body[hidden] {
  display: none;
}

.history-utility-chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.16s ease;
}

.history-utility-panel.is-open .history-utility-chevron {
  transform: translateY(-1px) rotate(45deg);
}

.history-export-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.history-export-actions .compact-button {
  min-height: 44px;
}

.history-retention-panel {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 10px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.history-retention-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.history-retention-head span {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 800;
}

.history-retention-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.history-retention-notice {
  padding-top: 0;
  border-top: 0;
}

.history-retention-notice.warning {
  color: #8b5b1f;
}

.history-retention-notice.urgent {
  color: var(--danger);
}

.history-retention-info-button {
  justify-self: start;
  min-height: 34px;
  padding: 0;
  color: var(--accent-strong);
  background: transparent;
  border: 0;
  font-size: 0.78rem;
  font-weight: 850;
  text-align: left;
}

.history-retention-detail {
  display: grid;
  gap: 6px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.history-retention-detail[hidden] {
  display: none;
}

.history-zip-mode-panel {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.history-zip-mode-panel[hidden] {
  display: none;
}

.history-zip-mode-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.history-zip-mode-head strong {
  font-size: 0.92rem;
  font-weight: 900;
}

.history-zip-mode-head span {
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 850;
}

.history-zip-visible-count {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 760;
}

.history-zip-mode-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.history-zip-mode-actions .ghost-button {
  min-height: 36px;
  padding: 5px 9px;
  border-color: var(--line);
  border-radius: 9px;
  font-size: 0.76rem;
}

.history-export-selection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0;
}

.history-export-selection > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.history-export-selection > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.history-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
  padding: 0;
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.history-list li.is-selected {
  background: #f0fbfa;
  outline: 2px solid rgba(35, 127, 131, 0.22);
  outline-offset: -2px;
}

.history-list li:last-child {
  border-bottom: 0;
}

.history-list li.is-cancelled {
  background: #fff8f7;
  border-color: #efc8c3;
}

.history-main {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 86px;
  gap: 4px;
  padding: 11px 32px 8px 13px;
  color: var(--ink);
  background: transparent;
  border: 0;
  text-align: left;
}

.history-main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.history-date {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.history-amount {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 900;
  white-space: nowrap;
}

.history-cell-chevron {
  position: absolute;
  top: 50%;
  right: 12px;
  color: var(--muted);
  font-size: 1.18rem;
  font-weight: 700;
  transform: translateY(-50%);
}

.history-selection-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
}

.history-zip-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 12px 0 12px 8px;
  color: var(--muted);
}

.history-zip-select input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
}

.history-list.is-zip-mode {
  margin-bottom: 12px;
  padding-bottom: 0;
}

.history-list.is-zip-mode .history-main {
  min-height: 88px;
  padding-right: 13px;
}

.history-load-more-status {
  display: grid;
  width: 100%;
  min-height: 44px;
  place-items: center;
  margin: 12px 0 0;
  padding: 10px 14px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.history-load-more-status:disabled {
  cursor: wait;
  opacity: 0.72;
}

.history-load-more-status[hidden] {
  display: none;
}

.history-main strong {
  overflow-wrap: anywhere;
  font-size: 0.98rem;
  line-height: 1.35;
}

.history-meta {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.history-labels,
.history-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.history-labels {
  margin-top: 2px;
}

.history-labels span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 6px;
  color: var(--muted);
  background: #f5f7f8;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
}

.history-labels span.retention-notice,
.history-labels span.retention-warning {
  color: #8b5b1f;
  background: #fffaf0;
  border-color: #ead2a1;
}

.history-labels span.retention-urgent,
.history-labels span.retention-expired {
  color: var(--danger);
  background: #fff8f7;
  border-color: #e1b4ad;
}

.history-actions {
  flex-wrap: nowrap;
  padding: 0 12px 11px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.history-actions::-webkit-scrollbar {
  display: none;
}

.history-actions .ghost-button,
.history-more-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 9px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(217, 226, 224, 0.74);
  border-radius: 9px;
  font-size: 0.74rem;
  line-height: 1.15;
  white-space: nowrap;
}

.history-more-button {
  min-width: 44px;
  padding-inline: 0;
  color: color-mix(in srgb, var(--muted) 82%, transparent);
  font-size: 1rem;
  font-weight: 900;
}

.history-more-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(9, 17, 19, 0.38);
}

.history-more-sheet-overlay[hidden] {
  display: none;
}

.history-more-sheet-panel {
  display: grid;
  gap: 12px;
  width: min(100%, 520px);
  padding: 10px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 22px 52px rgba(22, 38, 42, 0.24);
}

.history-more-sheet-handle {
  justify-self: center;
  width: 38px;
  height: 4px;
  background: var(--line-strong);
  border-radius: 999px;
}

.history-more-sheet-head {
  display: grid;
  gap: 3px;
  padding: 2px 2px 0;
}

.history-more-sheet-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
}

.history-more-sheet-head p {
  margin: 0;
}

.history-more-sheet-target,
.history-more-sheet-head p:last-child {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.history-more-sheet-actions {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.history-more-sheet-action {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 50px;
  padding: 0 14px;
  color: var(--ink);
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-size: 0.92rem;
  font-weight: 820;
  text-align: left;
}

.history-more-sheet-action:last-child {
  border-bottom: 0;
}

.history-more-sheet-action.danger-button {
  color: var(--danger);
}

.history-more-sheet-action:disabled {
  color: var(--muted);
  background: #f6f8f8;
  opacity: 0.74;
}

.history-more-sheet-action.is-state:disabled {
  color: var(--accent-strong);
  background: #f3f8f7;
  opacity: 1;
}

.history-more-sheet-close {
  width: 100%;
  min-height: 48px;
}

.history-zip-create-bar {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: 0;
  left: max(16px, env(safe-area-inset-left, 0px));
  z-index: 74;
  display: grid;
  width: auto;
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  background: transparent;
  pointer-events: none;
}

.history-zip-create-bar[hidden] {
  display: none;
}

.history-zip-create-bar .primary-button {
  min-height: 52px;
  box-shadow: 0 12px 30px rgba(20, 43, 49, 0.16);
  pointer-events: auto;
}

.history-zip-create-bar .primary-button:disabled {
  color: var(--muted);
  background: #eef3f2;
  border-color: var(--line);
  box-shadow: none;
  opacity: 1;
}

.compact-button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 0.78rem;
}

.danger-button {
  color: var(--danger);
  border-color: #e1b4ad;
}

.settings-note {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.account-identity-notice {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  color: var(--ink);
  background: #fff8ed;
  border: 1px solid #f0d5a8;
  border-radius: 6px;
}

.account-identity-notice[hidden] {
  display: none;
}

.account-identity-notice strong {
  font-size: 0.92rem;
  font-weight: 850;
}

.account-identity-notice p {
  margin: 0;
  color: #78614a;
  font-size: 0.84rem;
  font-weight: 750;
}

.settings-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.settings-action-row > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.settings-action-row strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-action-row span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.issuer-print-inline {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.settings-subsection-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.settings-subsection-title h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 850;
}

.settings-subsection-title p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.45;
}

.settings-action-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(72px, auto));
  gap: 8px;
  align-items: center;
}

.iphone-hidden-setting[hidden] {
  display: none;
}

.subscription-feedback {
  min-height: 20px;
  color: var(--muted);
}

.subscription-feedback[hidden] {
  display: none;
}

.subscription-feedback.error {
  color: var(--danger);
}

.subscription-feedback.success {
  color: var(--accent);
}

.issuer-section[hidden],
.issuer-extra-field[hidden],
.issuer-helper[hidden],
.issuer-manager[hidden],
#detailIssuerSwitchSection[hidden] {
  display: none;
}

.issuer-section {
  margin-bottom: 2px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.issuer-settings-surface .issuer-section {
  margin-top: 14px;
  margin-bottom: 0;
}

.issuer-helper {
  margin-bottom: 12px;
}

.issuer-form-sections {
  display: grid;
  gap: 0;
}

.issuer-form-section {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.issuer-form-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.issuer-form-section:last-child {
  padding-bottom: 0;
}

.issuer-form-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.issuer-form-section-head h4 {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.35;
}

.issuer-form-section-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1.45;
}

.issuer-manager {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 0;
}

.issuer-manager .inline-actions {
  margin-top: 0;
}

.issuer-profile-count {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
}

.issuer-select-only {
  gap: 0;
}

.issuer-manager-actions {
  align-items: center;
}

.issuer-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.issuer-contact-grid .field-wide {
  grid-column: 1 / -1;
}

.issuer-field-toggle {
  gap: 6px;
}

.issuer-display-toggle {
  align-items: center;
  grid-template-columns: auto 1fr;
  min-height: 40px;
  padding: 0;
  color: var(--muted);
}

.issuer-display-toggle input {
  width: 18px;
  min-height: 18px;
  height: 18px;
  accent-color: #5b8987;
}

.issuer-display-toggle > span {
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.35;
  white-space: normal;
}

.issuer-field-toggle > small {
  margin-top: -2px;
}

.issuer-save-footer {
  display: grid;
  gap: 8px;
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.issuer-save-footer .primary-button {
  min-height: 50px;
}

.issuer-save-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.45;
}

.issuer-save-status[data-save-state="dirty"],
.issuer-save-status[data-save-state="new"] {
  color: var(--accent-strong);
}

.issuer-save-status[data-save-state="locked"] {
  color: var(--danger);
}

.issuer-save-button[data-save-state="saved"],
.issuer-save-button:disabled[data-save-state="saved"] {
  color: var(--muted);
  background: #f3f7f6;
  border-color: var(--line);
  box-shadow: none;
  opacity: 1;
  transform: none;
}

.issuer-save-button:disabled[data-save-state="locked"] {
  color: var(--muted);
  background: #f3f1ef;
  border-color: var(--line);
  box-shadow: none;
  opacity: 1;
}

.danger-link-button {
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  padding: 6px 8px;
  color: #9a4e47;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
}

.danger-link-button:not(:disabled):active,
.danger-link-button.tap-pressed:not(:disabled) {
  background: rgba(164, 62, 52, 0.08);
  transform: translateY(1px) scale(0.99);
}

.danger-link-button:disabled {
  color: var(--muted);
  opacity: 0.56;
}

.registration-lookup {
  display: grid;
  gap: 7px;
  margin-top: 2px;
  padding: 10px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.registration-lookup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.registration-lookup-head span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.registration-lookup-head span.registration-lookup-verified {
  color: var(--accent);
}

.registration-lookup-head span.registration-lookup-not_registered,
.registration-lookup-head span.registration-lookup-unavailable,
.registration-lookup-head span.registration-lookup-format_invalid {
  color: var(--danger);
}

.registration-lookup p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.registration-lookup-details {
  display: grid;
  gap: 7px;
  margin-top: 2px;
  padding: 9px 10px;
  border: 1px solid #dbe9e7;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
}

.registration-lookup-details[hidden] {
  display: none;
}

.registration-lookup-details > strong {
  color: var(--ink);
  font-size: 0.76rem;
}

.registration-lookup-details dl {
  display: grid;
  grid-template-columns: minmax(64px, 0.34fr) minmax(0, 1fr);
  gap: 5px 8px;
  margin: 0;
}

.registration-lookup-details dt,
.registration-lookup-details dd {
  margin: 0;
  font-size: 0.73rem;
  line-height: 1.45;
}

.registration-lookup-details dt {
  color: var(--muted);
  font-weight: 800;
}

.registration-lookup-details dd {
  color: var(--ink);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.registration-lookup p.registration-lookup-detail-note {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.registration-lookup .inline-actions {
  margin-top: 2px;
}

.registration-lookup .registration-lookup-source {
  font-size: 0.7rem;
}

.account-logo-settings {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.account-logo-preview {
  display: grid;
  place-items: center;
  width: min(100%, 300px);
  min-height: 92px;
  padding: 12px;
  color: var(--muted);
  background: #fff;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 800;
}

.account-logo-preview img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 80px;
  object-fit: contain;
}

.account-logo-preview img[hidden],
.account-logo-preview span[hidden] {
  display: none;
}

.account-logo-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 8px;
}

.account-logo-actions .file-button {
  display: grid;
  min-width: 0;
  place-items: center;
  text-align: center;
}

.account-logo-actions input[type="file"],
.product-csv-dialog-panel input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

.product-catalog-tools {
  display: grid;
  gap: 8px;
  padding: 10px 0 4px;
  border-top: 1px solid var(--line);
}

.product-catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.product-catalog-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.product-catalog-tools .inline-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px;
}

.product-catalog-tools .inline-actions .file-button,
.product-catalog-tools .inline-actions .ghost-button {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  place-items: center;
  font-size: 0.9rem;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.file-button {
  cursor: pointer;
}

.file-button.disabled {
  cursor: default;
  opacity: 0.56;
}

.favorite-recipient-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.favorite-recipient-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.favorite-recipient-list strong,
.favorite-recipient-list span {
  overflow-wrap: anywhere;
}

.favorite-recipient-list span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.favorite-recipient-editor {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  background: #f8faf9;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.favorite-recipient-preferences {
  display: grid;
  grid-template-columns: minmax(0, 180px) auto;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}

.favorite-recipient-preferences .meter-text {
  justify-self: end;
  margin-bottom: 2px;
}

.favorite-recipient-editor-actions {
  justify-content: flex-end;
}

.favorite-recipient-editor-actions button {
  min-height: 38px;
}

.favorite-recipient-list .inline-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.favorite-recipient-list .ghost-button,
.favorite-recipient-list .secondary-button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 0.78rem;
}

.empty-favorite-recipients {
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center;
  min-height: 64px;
  color: var(--muted);
  border-style: dashed !important;
  font-weight: 800;
}

.audit-panel {
  display: block;
  margin-top: 14px;
  padding: 12px;
  background: #f8faf9;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.audit-panel-summary {
  display: block;
  cursor: pointer;
  list-style: none;
}

.audit-panel-summary::-webkit-details-marker {
  display: none;
}

.audit-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.audit-panel-head > span:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.audit-panel h4 {
  margin: 0;
  font-size: 0.9rem;
}

.audit-panel-head small,
.audit-panel-head > span:not(:first-child) {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.audit-panel-note {
  margin-top: 12px;
}

.audit-log-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.audit-log-list li {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.audit-log-list li > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.audit-log-list strong {
  font-size: 0.84rem;
}

.audit-log-list span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.audit-log-detail {
  line-height: 1.5;
}

.empty-audit-log {
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.verify-shell {
  max-width: 780px;
}

.verify-surface {
  padding: 16px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.verify-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.verify-list > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.verify-list dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.verify-list dd {
  margin: 0;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-disclosure {
  display: block;
}

.settings-disclosure-summary {
  display: block;
  cursor: pointer;
  list-style: none;
}

.settings-disclosure-summary::-webkit-details-marker {
  display: none;
}

.settings-disclosure-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.settings-disclosure-title > span:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.settings-disclosure-title h3 {
  margin: 0;
}

.settings-disclosure-title small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-disclosure-chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.16s ease;
}

.settings-disclosure[open] .settings-disclosure-chevron {
  transform: translateY(-1px) rotate(45deg);
}

.audit-panel[open] .settings-disclosure-chevron {
  transform: translateY(-1px) rotate(45deg);
}

.settings-disclosure > .settings-note,
.settings-disclosure > .form-grid,
.settings-disclosure > .theme-grid,
.settings-disclosure > .issuer-visibility-grid,
.settings-disclosure > .settings-action-row,
.settings-disclosure > .subscription-grid {
  margin-top: 12px;
}

.theme-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  min-height: 82px;
  padding: 10px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: left;
}

.theme-card.selected {
  border-color: var(--theme-accent);
  box-shadow: inset 0 0 0 2px var(--theme-accent);
}

.theme-card.recommended {
  background: #fff;
}

.theme-card:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.theme-motif {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #fff;
  background: var(--theme-accent);
  border-radius: 50%;
  font-family: Georgia, serif;
  font-weight: 900;
}

.theme-motif svg {
  display: block;
  width: 24px;
  height: 24px;
}

.theme-card > strong,
.theme-card > span:not(.theme-motif) {
  overflow-wrap: anywhere;
}

.theme-card > span:not(.theme-motif) {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.theme-recommendation-badge {
  display: inline-flex;
  grid-column: 2;
  justify-self: start;
  width: fit-content;
  padding: 3px 7px;
  color: var(--theme-accent) !important;
  background: #fff;
  border: 1px solid var(--theme-accent);
  border-radius: 999px;
  font-size: 0.68rem !important;
  line-height: 1;
}

.subscription-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.subscription-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.subscription-comparison-button {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

.subscription-management-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.subscription-management-actions button {
  width: 100%;
  min-width: 0;
}

.subscription-manage-note {
  margin-top: -2px;
  padding: 9px 10px;
  background: rgba(35, 127, 131, 0.07);
  border: 1px solid rgba(35, 127, 131, 0.18);
  border-radius: 6px;
}

.subscription-option {
  display: grid;
  gap: 9px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.subscription-option[data-subscription-plan]:not(.purchase-disabled) {
  cursor: pointer;
}

.subscription-option[data-subscription-plan]:not(.purchase-disabled):active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(35, 127, 131, 0.1);
  transform: translateY(1px) scale(0.995);
}

.subscription-option.purchase-disabled {
  cursor: default;
}

.subscription-option.featured {
  background: #f7fffc;
  border-color: #acd5cd;
}

.subscription-option h4,
.subscription-option p {
  margin: 0;
}

.subscription-option ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.subscription-price {
  color: var(--ink);
  font-size: 1.04rem;
}

.subscription-option.current {
  box-shadow: inset 4px 0 0 var(--accent);
}

.subscription-option.purchase-pending {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent), 0 0 0 3px rgba(35, 127, 131, 0.12);
}

.account-linking-note {
  padding: 9px 10px;
  background: #f7fbfa;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.subscription-policy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 800;
}

.subscription-policy-links a {
  color: var(--accent);
}

.plan-comparison-surface {
  display: none;
  gap: 14px;
}

.plan-comparison-surface.active {
  display: grid;
}

.plan-comparison-lead {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.75;
}

.plan-comparison-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 2px 0 10px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.plan-comparison-plan {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 4px 10px 0;
  background: transparent;
  border-left: 1px solid var(--line);
}

.plan-comparison-plan:first-child {
  border-left: 0;
}

.plan-comparison-plan.standard,
.plan-comparison-plan.premium {
  background: transparent;
}

.plan-comparison-plan span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.2;
}

.plan-comparison-plan strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.plan-comparison-plan small {
  min-width: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.35;
}

.plan-choice-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.plan-choice-card {
  display: grid;
  gap: 10px;
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.plan-choice-card:first-child {
  border-top: 0;
}

.plan-choice-card.current {
  box-shadow: inset 3px 0 0 var(--accent);
  padding-left: 12px;
}

.plan-choice-card[data-plan-recommendation="standard"],
.plan-choice-card[data-plan-recommendation="premium"] {
  background: transparent;
}

.plan-choice-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.plan-choice-title h3 {
  margin: 0;
  font-size: 1rem;
}

.plan-choice-card ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.55;
}

.plan-feature-comparison {
  display: grid;
  gap: 0;
  touch-action: pan-y;
  border-top: 1px solid var(--line);
}

.plan-comparison-category {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
}

.plan-comparison-category summary {
  padding: 14px 0;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 900;
  list-style-position: inside;
}

.plan-comparison-category[open] summary {
  border-bottom: 1px solid var(--line);
}

.plan-table-scroll {
  overflow: visible;
}

.plan-comparison-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.78rem;
}

.plan-comparison-table th,
.plan-comparison-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.plan-comparison-table thead th {
  color: var(--ink);
  background: #f6fbfa;
  font-weight: 900;
  white-space: nowrap;
}

.plan-comparison-table tbody th {
  width: 36%;
  color: var(--ink);
  font-weight: 850;
}

.plan-comparison-table tbody td {
  color: var(--muted);
  font-weight: 750;
}

.plan-comparison-table .unavailable {
  color: #a0adb0;
}

@media (max-width: 640px) {
  .issuer-contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .issuer-summary-display-list div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .plan-comparison-strip {
    padding-bottom: 8px;
  }

  .plan-comparison-plan {
    padding: 2px 7px 0;
  }

  .plan-comparison-plan strong {
    font-size: 0.8rem;
  }

  .plan-comparison-plan small {
    font-size: 0.64rem;
  }

  .plan-comparison-category {
    overflow: visible;
  }

  .plan-comparison-category[open] summary {
    border-bottom: 0;
  }

  .plan-comparison-table,
  .plan-comparison-table thead,
  .plan-comparison-table tbody,
  .plan-comparison-table tr,
  .plan-comparison-table th,
  .plan-comparison-table td {
    display: block;
  }

  .plan-comparison-table thead {
    display: none;
  }

  .plan-comparison-table tbody {
    display: block;
    padding: 0;
  }

  .plan-comparison-table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 13px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #edf2f1;
    border-radius: 0;
  }

  .plan-comparison-table tbody tr:last-child {
    border-bottom: 0;
  }

  .plan-comparison-table tbody th {
    grid-column: 1 / -1;
    width: auto;
    padding: 0 0 9px;
    border-bottom: 0;
    font-size: 0.86rem;
    line-height: 1.45;
  }

  .plan-comparison-table tbody td {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 42px;
    padding: 0 7px;
    background: transparent;
    border: 0;
    border-left: 1px solid #edf2f1;
    border-radius: 0;
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1.35;
    text-align: center;
  }

  .plan-comparison-table tbody td:nth-of-type(1) {
    border-left: 0;
  }

  .plan-comparison-table tbody td::before {
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1.15;
  }

  .plan-comparison-table tbody td:nth-of-type(1)::before {
    content: "無料";
  }

  .plan-comparison-table tbody td:nth-of-type(2)::before {
    content: "Standard";
  }

  .plan-comparison-table tbody td:nth-of-type(3)::before {
    content: "Pro";
  }

  .plan-comparison-table tbody td.unavailable {
    background: transparent;
    color: #a0adb0;
  }
}

.plan-comparison-notes {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #f8fbfb;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.plan-comparison-notes p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.65;
}

.plan-comparison-cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.plan-comparison-cta button {
  min-width: 0;
}

.plan-comparison-back-bottom {
  grid-column: 1 / -1;
}

.settings-surface {
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

.plan-comparison-surface {
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

.bottom-nav {
  position: fixed;
  right: calc(12px + env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: calc(12px + env(safe-area-inset-left, 0px));
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  max-width: 560px;
  margin: 0 auto;
  padding: 6px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(20, 43, 49, 0.12);
  backdrop-filter: blur(18px);
  transition: transform 0.18s ease, opacity 0.18s ease;
  will-change: transform, opacity;
}

body.bottom-nav-hidden-for-settings .bottom-nav,
body.bottom-nav-hidden-at-top .bottom-nav,
body.bottom-nav-hidden-for-reading .bottom-nav,
body.bottom-nav-hidden-for-modal .bottom-nav,
body.bottom-nav-merged-with-footer .bottom-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + 22px));
}

.bottom-nav button {
  min-height: 44px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 15px;
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-nav button.active {
  color: #fff;
  background: var(--accent-strong);
}

.bottom-nav.single-action button {
  color: #fff;
  background: var(--accent-strong);
}

.preview-action-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  padding:
    12px
    calc(12px + env(safe-area-inset-right, 0px))
    calc(12px + env(safe-area-inset-bottom, 0px))
    calc(12px + env(safe-area-inset-left, 0px));
  background: #fff;
  border-top: 1px solid var(--line);
}

.preview-action-bar.offline-share-mode {
  grid-template-columns: minmax(0, 1fr) auto;
}

.offline-share-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
}

.offline-share-note[hidden] {
  display: none;
}

.preview-action-bar.offline-share-mode #issuePrintButton,
.preview-action-bar.offline-share-mode #issueShareButton,
.preview-action-bar.offline-share-mode .offline-share-note {
  grid-column: 1 / -1;
}

.preview-action-bar.offline-share-mode #issuePrintButton {
  order: 1;
}

.preview-action-bar.offline-share-mode #issueShareButton {
  order: 2;
}

.preview-action-bar.offline-share-mode .offline-share-note {
  order: 3;
}

.preview-action-bar.offline-share-mode #previewFavoriteRecipientButton {
  order: 4;
}

.preview-action-bar.offline-share-mode #closePreviewButton {
  order: 5;
}

.empty-history {
  display: grid;
  place-items: center;
  min-height: 120px;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  font-weight: 700;
}

@media (min-width: 680px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-wide {
    grid-column: 1 / -1;
  }

  .quick-picks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .quick-amounts {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .amount-shortcuts {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .subscription-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plan-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .history-actions {
    grid-column: 1 / -1;
  }

  .theme-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .receipt-lines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  body.quick-create-mode {
    position: static;
    width: auto;
    height: auto;
    overflow: auto;
    overscroll-behavior: auto;
  }

  .app-shell {
    padding:
      calc(18px + env(safe-area-inset-top, 0px))
      calc(18px + env(safe-area-inset-right, 0px))
      calc(104px + env(safe-area-inset-bottom, 0px))
      calc(18px + env(safe-area-inset-left, 0px));
  }

  .app-grid {
    max-width: 1040px;
    margin: 0 auto;
  }

  body.quick-create-mode .app-shell,
  body.quick-create-mode .app-grid,
  body.quick-create-mode .control-surface[data-tab-panel="create"].active,
  body.quick-create-mode #receiptForm {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  body.quick-create-mode .quick-issue-panel {
    grid-template-areas:
      "top top"
      "recipient amount"
      "recipient actions"
      "keypad keypad";
    grid-template-columns: minmax(320px, 0.95fr) minmax(340px, 1.05fr);
    gap: 16px 20px;
    max-width: 1040px;
    margin: 0 auto 18px;
    padding: 18px;
    overflow: visible;
  }

  body.quick-create-mode .quick-issue-topline {
    grid-area: top;
  }

  body.quick-create-mode .quick-recipient-card {
    grid-area: recipient;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-height: 100%;
    padding: 16px;
  }

  body.quick-create-mode .favorite-recipient-tools {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  body.quick-create-mode .quick-amount-entry {
    grid-area: amount;
    align-self: center;
    min-height: 190px;
    padding: 10px 0;
  }

  body.quick-create-mode .quick-amount-entry strong {
    font-size: clamp(4.5rem, 10vw, 7rem);
  }

  body.quick-create-mode .quick-action-row {
    grid-area: actions;
    align-self: end;
  }

  body.quick-create-mode .amount-keypad {
    grid-area: keypad;
    justify-self: center;
    width: min(100%, 780px);
    gap: 14px;
    padding-top: 4px;
  }

  body.quick-create-mode .amount-keypad button {
    justify-self: center;
    width: min(100%, 104px);
    min-height: 88px;
    font-size: 1.45rem;
  }

  body.quick-create-mode .amount-keypad .keypad-zero,
  body.quick-create-mode.calculator-mode .amount-keypad .keypad-calc-equals {
    width: 100%;
  }

  body.quick-create-mode.calculator-mode .amount-keypad button {
    width: min(100%, 88px);
    min-height: 72px;
  }

  body.quick-create-mode .amount-shortcuts {
    display: none;
  }

  .settings-surface,
  .history-surface,
  .issuer-settings-surface,
  .favorite-settings-surface {
    max-width: 960px;
    margin: 0 auto;
  }

  .settings-surface {
    padding: 22px 26px calc(104px + env(safe-area-inset-bottom, 0px));
  }

  .plan-comparison-surface {
    padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  }

  .account-logo-settings {
    grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
    align-items: start;
    gap: 14px 18px;
  }

  .account-logo-preview {
    min-height: 112px;
  }

  .account-logo-actions {
    align-items: stretch;
  }

  .account-logo-actions .file-button,
  .account-logo-actions .danger-button {
    min-height: 46px;
  }

  .bottom-nav {
    max-width: 720px;
  }

  .detail-sheet-overlay {
    align-items: center;
  }

  .detail-sheet-panel {
    width: min(92vw, 980px);
    max-height: min(84vh, 820px);
    padding: 14px 22px 18px;
    border-radius: 18px;
  }
}

@media (min-width: 1080px) {
  .app-shell {
    padding:
      calc(22px + env(safe-area-inset-top, 0px))
      calc(22px + env(safe-area-inset-right, 0px))
      calc(100px + env(safe-area-inset-bottom, 0px))
      calc(22px + env(safe-area-inset-left, 0px));
  }

  .app-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 1040px;
    margin: 0 auto;
  }
}

@media (min-width: 1340px) {
  .app-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  body.quick-create-mode {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .app-shell {
    padding:
      calc(12px + env(safe-area-inset-top, 0px))
      calc(12px + env(safe-area-inset-right, 0px))
      calc(94px + env(safe-area-inset-bottom, 0px))
      calc(12px + env(safe-area-inset-left, 0px));
  }

  body.quick-create-mode .app-shell {
    display: grid;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }

  body.quick-create-mode .app-grid,
  body.quick-create-mode .control-surface[data-tab-panel="create"].active,
  body.quick-create-mode #receiptForm {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    gap: 0;
    overflow: hidden;
  }

  body.quick-create-mode #receiptForm {
    display: grid;
  }

  body.quick-create-mode .issuer-section,
  body.quick-create-mode .account-quick-section,
  body.quick-create-mode .form-status,
  body.quick-create-mode .bottom-nav {
    display: none;
  }

  .app-topbar {
    align-items: center;
    padding-bottom: 12px;
  }

  .status-stack {
    max-width: 210px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
  }

  .history-surface,
  .settings-surface {
    padding: 14px 14px calc(104px + env(safe-area-inset-bottom, 0px));
  }

  .settings-header {
    margin-bottom: 14px;
  }

  .settings-group {
    margin-top: 15px;
  }

  .settings-group-title {
    margin-left: 8px;
  }

  .settings-list-item .settings-disclosure-summary {
    min-height: 56px;
    padding: 11px 12px;
  }

  .settings-panel-body {
    padding: 12px;
  }

  .settings-list-item .lock-badge {
    justify-self: start;
    max-width: 100%;
  }

  .settings-list-item .settings-disclosure-title {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .settings-list-item .settings-disclosure-title > span:first-child {
    grid-column: 1;
  }

  .settings-list-item .settings-disclosure-title .lock-badge {
    grid-column: 1;
    grid-row: 2;
  }

  .settings-list-item .settings-disclosure-title .settings-disclosure-chevron {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .subscription-management-actions,
  .policy-link-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .plan-comparison-surface {
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }

  .control-surface {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .control-surface > form > .surface-head {
    display: none;
  }

  .action-bar {
    grid-template-columns: 1fr;
  }

  .quick-issue-panel {
    gap: 14px;
    padding: 14px;
    border-radius: 20px;
  }

  body.quick-create-mode .quick-issue-panel {
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    height: 100%;
    min-height: 0;
    margin: 0;
    gap: 7px;
    overflow: hidden auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding:
      calc(2px + env(safe-area-inset-top, 0px))
      calc(8px + env(safe-area-inset-right, 0px))
      0
      calc(8px + env(safe-area-inset-left, 0px));
    background: linear-gradient(180deg, #f8fcfc 0%, var(--quick-accent) 48%, var(--quick-accent-dark) 100%);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .quick-issue-topline {
    align-items: center;
  }

  .quick-issue-badges {
    gap: 4px;
  }

  .quick-new-button,
  .quick-draft-button,
  .quick-history-button,
  .quick-settings-button,
  .quick-issue-badges .status-pill,
  .quick-issue-badges .meter-text {
    min-height: 34px;
    padding-inline: 7px;
    font-size: 0.66rem;
  }

  .quick-settings-button {
    width: 36px;
    padding-inline: 0;
    font-size: 0.96rem;
  }

  .quick-recipient-card {
    --quick-recipient-control-height: 44px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(112px, 0.5fr);
    gap: 3px 7px;
    padding: 7px 10px 5px;
  }

  .quick-issue-panel input {
    min-height: 42px;
  }

  .compact-segmented {
    min-height: 42px;
  }

  .quick-honorific-field {
    width: auto;
  }

  .favorite-recipient-tools {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding-top: 4px;
  }

  .favorite-recipient-select select,
  .favorite-apply-button {
    min-height: 32px;
    padding-block: 6px;
    font-size: 0.7rem;
  }

  .favorite-recipient-list li {
    grid-template-columns: minmax(0, 1fr);
  }

  .favorite-recipient-preferences {
    grid-template-columns: minmax(0, 1fr);
  }

  .favorite-recipient-preferences .meter-text {
    justify-self: start;
  }

  .amount-keypad {
    gap: 10px;
  }

  body.quick-create-mode .amount-keypad {
    --quick-keypad-panel-height: clamp(324px, 44dvh, 374px);

    align-self: end;
    box-sizing: border-box;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    height: var(--quick-keypad-panel-height);
    min-height: 0;
    gap: 10px;
    margin:
      0
      calc(-8px - env(safe-area-inset-right, 0px))
      0
      calc(-8px - env(safe-area-inset-left, 0px));
    padding:
      18px
      calc(16px + env(safe-area-inset-right, 0px))
      calc(18px + env(safe-area-inset-bottom, 0px))
      calc(16px + env(safe-area-inset-left, 0px));
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 34px rgba(20, 43, 49, 0.08);
  }

  .amount-keypad button {
    aspect-ratio: auto;
    min-height: 50px;
    border-radius: 999px;
    font-size: 1.16rem;
  }

  body.quick-create-mode .amount-keypad button {
    width: min(100%, clamp(68px, 18vw, 78px));
    height: 100%;
    min-height: 0;
    justify-self: center;
    font-size: clamp(1.02rem, 4.3vw, 1.28rem);
  }

  body.quick-create-mode .amount-keypad .keypad-zero {
    width: 100%;
  }

  body.quick-create-mode.calculator-mode .amount-keypad {
    grid-template-rows: repeat(5, minmax(0, 1fr));
    height: var(--quick-keypad-panel-height);
    gap: 8px;
    padding:
      16px
      calc(16px + env(safe-area-inset-right, 0px))
      calc(16px + env(safe-area-inset-bottom, 0px))
      calc(16px + env(safe-area-inset-left, 0px));
    background: #edf8f4;
  }

  body.quick-create-mode.calculator-mode .amount-keypad button {
    width: min(100%, clamp(54px, 17vw, 64px));
    height: 100%;
    min-height: 0;
    font-size: clamp(0.96rem, 4vw, 1.16rem);
  }

  body.quick-create-mode.calculator-mode .amount-keypad .keypad-calc-equals {
    width: 100%;
  }

  .amount-keypad .keypad-tool {
    font-size: 0.92rem;
  }

  .quick-amount-entry {
    gap: 2px;
    padding-top: 0;
  }

  body.quick-create-mode .quick-amount-entry {
    align-self: stretch;
    min-height: 70px;
    padding-block: 0;
  }

  .quick-amount-entry strong {
    font-size: clamp(3rem, 15vw, 4.9rem);
  }

  body.quick-create-mode .quick-amount-entry strong {
    font-size: clamp(2.15rem, 11vw, 3.35rem);
  }

  .amount-shortcuts {
    display: none;
  }

  .quick-action-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .quick-action-row .primary-button,
  .quick-action-row .secondary-button {
    min-height: 46px;
  }

  .detail-sheet-panel {
    max-height: min(92dvh, 760px);
    padding-inline: 12px;
  }

  .detail-sheet-actions {
    grid-template-columns: minmax(0, 1fr) minmax(72px, 0.46fr);
    gap: 7px;
  }

  .detail-sheet-actions button {
    min-height: 46px;
    padding-inline: 7px;
    font-size: 0.78rem;
  }

  .product-detail-body,
  .detail-extra-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-sheet-panel.product-catalog-mode .product-catalog-mode-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-form-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .preview-panel {
    height: 100vh;
  }

  .preview-action-bar {
    grid-template-columns: 1fr;
  }

  .theme-grid,
  .quick-amounts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .issuer-visibility-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-logo-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-logo-actions .danger-button {
    grid-column: 1 / -1;
  }

  .settings-action-row {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-action-row > button,
  .settings-action-buttons {
    width: 100%;
  }

  .settings-action-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .verify-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .audit-log-list li > div {
    display: grid;
    gap: 3px;
  }

  .receipt-sheet {
    min-height: 680px;
  }

  .receipt-body {
    gap: 18px;
    min-height: 680px;
    padding: 18px;
  }

  .receipt-head,
  .receipt-sheet.is-paid .receipt-head,
  .receipt-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  .receipt-meta {
    justify-items: start;
    min-width: 0;
  }

  .receipt-meta dd,
  .amount-block strong,
  .brand-credit {
    text-align: left;
  }

  .line-item-list li {
    grid-template-columns: minmax(0, 1fr);
  }

  .line-item-actions {
    justify-content: stretch;
  }

  .line-item-actions button {
    flex: 1;
  }

  .line-item-amount {
    white-space: normal;
    text-align: left;
  }
}

.receipt-preview-frame {
  --receipt-preview-sheet-width: 794px;
  --receipt-preview-sheet-height: 1123px;
  position: relative;
  width: var(--receipt-preview-sheet-width);
  height: var(--receipt-preview-sheet-height);
  margin: 0 auto;
}

.receipt-preview-frame .receipt-sheet {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--receipt-preview-sheet-width);
  max-width: none;
  min-height: var(--receipt-preview-sheet-height);
  margin: 0;
  transform: scale(var(--receipt-preview-scale, 1));
  transform-origin: top left;
}

.receipt-preview-frame .receipt-body {
  gap: 28px;
  min-height: var(--receipt-preview-sheet-height);
  padding: 56px;
}

.receipt-preview-frame .receipt-sheet[data-receipt-template="compact"] .receipt-body {
  gap: 22px;
  padding: 44px;
}

.receipt-preview-frame .receipt-sheet[data-receipt-template="airy"] .receipt-body {
  gap: 34px;
  padding: 68px;
}

.receipt-preview-frame .receipt-head,
.receipt-preview-frame .receipt-sheet.is-paid .receipt-head {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.receipt-preview-frame .receipt-sheet.has-logo .receipt-head {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.receipt-preview-frame .receipt-logo-slot {
  width: 190px;
  min-width: 72px;
  height: 70px;
}

.receipt-preview-frame .receipt-meta {
  justify-items: end;
  min-width: 170px;
}

.receipt-preview-frame .receipt-meta dd {
  text-align: right;
}

.receipt-preview-frame .receipt-title-block h2 {
  font-size: 2.05rem;
}

.receipt-preview-frame .recipient-block p {
  font-size: 2rem;
}

.receipt-preview-frame .amount-block {
  min-height: 124px;
  padding: 24px;
}

.receipt-preview-frame .amount-block strong {
  font-size: 4.4rem;
  text-align: right;
}

.receipt-preview-frame .receipt-lines,
.receipt-preview-frame .detail-block {
  grid-template-columns: minmax(0, 1fr);
}

.receipt-preview-frame .detail-block {
  gap: 8px;
}

.receipt-preview-frame .detail-block > .detail-heading {
  padding-bottom: 6px;
}

.receipt-preview-frame .receipt-table-wrap {
  overflow-x: visible;
  padding-bottom: 4px;
}

.receipt-preview-frame .receipt-item-table {
  min-width: 0;
  font-size: 0.68rem;
}

.receipt-preview-frame .receipt-item-table th,
.receipt-preview-frame .receipt-item-table td {
  padding: 5px 7px;
}

.receipt-preview-frame .receipt-item-table th:nth-child(2),
.receipt-preview-frame .receipt-item-table th:nth-child(3),
.receipt-preview-frame .receipt-item-table th:nth-child(4),
.receipt-preview-frame .receipt-item-table td:nth-child(2),
.receipt-preview-frame .receipt-item-table td:nth-child(3),
.receipt-preview-frame .receipt-item-table td:nth-child(4) {
  text-align: right;
}

.receipt-preview-frame .receipt-amount-cell strong {
  font-size: 0.7rem;
}

.receipt-preview-frame .receipt-amount-cell span {
  font-size: 0.54rem;
}

.receipt-preview-frame .tax-summary {
  justify-items: end;
  gap: 4px;
}

.receipt-preview-frame .tax-summary > div:not(.tax-breakdown) {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-bottom: 0;
  border-bottom: 0;
}

.receipt-preview-frame .tax-summary span,
.receipt-preview-frame .tax-summary strong {
  font-size: 0.74rem;
}

.receipt-preview-frame .tax-summary .grand-total {
  padding-top: 0;
}

.receipt-preview-frame .tax-summary .grand-total strong {
  font-size: 0.78rem;
}

.receipt-preview-frame .tax-breakdown {
  justify-items: end;
  gap: 2px;
  padding-top: 2px;
  border-top: 0;
}

.receipt-preview-frame .tax-breakdown > span {
  display: none;
}

.receipt-preview-frame .tax-breakdown > div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.receipt-preview-frame .receipt-footer {
  grid-template-areas:
    "issuer verification"
    "brand verification";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 18px;
  align-items: end;
}

.receipt-preview-frame .issuer-block {
  grid-area: issuer;
  gap: 2px;
}

.receipt-preview-frame .issuer-block > span {
  font-size: 0.62rem;
}

.receipt-preview-frame .issuer-block > strong {
  font-size: 0.82rem;
  line-height: 1.08;
}

.receipt-preview-frame .issuer-block p {
  font-size: 0.58rem;
  line-height: 1.18;
}

.receipt-preview-frame .issuer-block #previewRegistrationRow {
  gap: 6px;
}

.receipt-preview-frame .issuer-block #previewRegistrationRow span,
.receipt-preview-frame .issuer-block #previewRegistrationRow strong {
  font-size: 0.58rem;
}

.receipt-preview-frame .verification-block {
  grid-area: verification;
  justify-items: center;
  gap: 2px;
  min-width: 112px;
  max-width: 120px;
}

.receipt-preview-frame .verification-block > span {
  display: block;
  color: #617076;
  font-size: 0.52rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.receipt-preview-frame .verification-qr {
  width: 104px;
  height: 104px;
}

.receipt-preview-frame .verification-qr svg {
  width: 98px;
  height: 98px;
}

.receipt-preview-frame .verification-block p {
  font-size: 0.68rem;
  margin-top: 1px;
}

.receipt-preview-frame .brand-credit {
  grid-area: brand;
  margin-top: 16px;
  text-align: left;
  text-transform: none;
}

.receipt-preview-frame .receipt-watermark {
  font-size: 2.4rem;
}

/* Dark mode polish: keep the app UI cohesive without changing receipt/PDF colors. */
body[data-theme="dark"] {
  background: var(--dark-app-bg);
}

body[data-theme="dark"] :is(
  .app-splash,
  .control-surface,
  .preview-surface,
  .history-surface,
  .settings-surface,
  .issuer-settings-surface
) {
  background: var(--dark-app-bg);
}

body[data-theme="dark"] :is(
  .first-issuer-panel,
  .detail-sheet-panel,
  .preview-panel,
  .cancel-dialog-panel,
  .login-complete-dialog-panel,
  .detail-draft-dialog-panel,
  .manual-amount-dialog-panel,
  .app-confirm-dialog-panel,
  .product-csv-dialog-panel
) {
  color: var(--ink);
  background: var(--dark-elevated-surface);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

body[data-theme="dark"] :is(
  .first-issuer-overlay,
  .detail-sheet-overlay,
  .preview-overlay,
  .pdf-loading-overlay,
  .cancel-dialog-overlay,
  .login-complete-dialog-overlay,
  .detail-draft-dialog-overlay,
  .manual-amount-dialog-overlay,
  .app-confirm-dialog-overlay,
  .product-csv-dialog-overlay
) {
  background: rgba(3, 8, 10, 0.74);
}

body[data-theme="dark"] :is(.detail-sheet-head, .preview-toolbar) {
  background: rgba(24, 45, 49, 0.96);
  border-color: var(--line);
}

body[data-theme="dark"] .detail-sheet-handle {
  background: var(--line-strong);
}

body[data-theme="dark"] :is(
  .quick-issue-panel,
  .quick-recipient-card,
  .issuer-section,
  .issuer-display-settings,
  .registration-lookup,
  .registration-lookup-details,
  .history-retention-panel,
  .history-zip-mode-panel,
  .history-list li,
  .history-more-sheet-panel,
  .history-more-sheet-action,
  .line-item-list li,
  .item-total,
  .notice,
  .account-logo-preview,
  .favorite-recipient-list li,
  .favorite-recipient-editor,
  .favorite-recipient-preferences,
  .subscription-option,
  .subscription-manage-note
) {
  color: var(--ink);
  background: var(--dark-surface);
  border-color: var(--line);
}

body[data-theme="dark"] .quick-issue-panel {
  background: linear-gradient(180deg, var(--dark-surface) 0%, var(--dark-elevated-surface) 58%, var(--dark-app-bg) 100%);
}

body[data-theme="dark"] :is(.quick-recipient-card, .amount-keypad, .history-list li, .issuer-section) {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

body[data-theme="dark"] :is(.issuer-display-settings, .registration-lookup) {
  background: transparent;
}

body[data-theme="dark"] .issuer-display-toggle input {
  accent-color: #6b9f9b;
}

body[data-theme="dark"] .issuer-profile-count,
body[data-theme="dark"] .issuer-save-status {
  color: var(--dark-text-secondary);
}

body[data-theme="dark"] .issuer-save-status[data-save-state="dirty"],
body[data-theme="dark"] .issuer-save-status[data-save-state="new"] {
  color: #8bbeba;
}

body[data-theme="dark"] .issuer-save-button[data-save-state="saved"],
body[data-theme="dark"] .issuer-save-button:disabled[data-save-state="saved"],
body[data-theme="dark"] .issuer-save-button:disabled[data-save-state="locked"] {
  color: var(--dark-text-secondary);
  background: #102024;
  border-color: var(--dark-subtle-border);
  box-shadow: none;
  opacity: 1;
}

body[data-theme="dark"] .danger-link-button {
  color: #e58f85;
}

body[data-theme="dark"] .danger-link-button:not(:disabled):active,
body[data-theme="dark"] .danger-link-button.tap-pressed:not(:disabled) {
  background: rgba(255, 154, 140, 0.12);
}

body[data-theme="dark"] :is(
  input,
  select,
  textarea,
  .compact-segmented,
  .segmented,
  .product-catalog-select select
) {
  color: var(--ink);
  background: var(--dark-input-bg);
  border-color: var(--line-strong);
}

body[data-theme="dark"] :is(input, textarea)::placeholder {
  color: var(--muted);
}

body[data-theme="dark"] :is(input, select, textarea):focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(39, 140, 141, 0.24);
}

body[data-theme="dark"] :is(input:disabled, select:disabled, textarea:disabled) {
  color: var(--dark-disabled-text);
  background: #102024;
  border-color: var(--dark-subtle-border);
}

body[data-theme="dark"] :is(
  .field > span,
  .field > label:first-child,
  .toggle-line > span,
  .field-label-row > label:first-child,
  .quick-issue-panel .field > span,
  .quick-amount-entry > span,
  .favorite-recipient-select > span,
  .history-result-head span,
  .history-export-selection > span,
  .history-meta,
  .history-zip-select,
  .history-zip-mode-head span,
  .settings-note,
  .field > small,
  .toggle-line small,
  .registration-lookup p,
  .registration-lookup-details dt,
  .product-section .product-catalog-head strong,
  .product-section .product-catalog-head span,
  .product-section .product-catalog-tools .settings-note,
  .detail-draft-status,
  .detail-draft-reminder span,
  .theme-card > span:not(.theme-motif)
) {
  color: var(--muted);
}

body[data-theme="dark"] :is(
  .detail-draft-dialog-panel p,
  .history-retention-panel p,
  .line-item-list span,
  .account-logo-preview,
  .empty-line-items
) {
  color: var(--dark-text-secondary);
}

body[data-theme="dark"] :is(
  .quick-issue-panel .meter-text,
  .status-pill,
  .lock-badge,
  .meter-text,
  .history-labels span,
  .theme-recommendation-badge
) {
  color: var(--dark-status-chip-text);
  background: var(--dark-status-chip-bg);
  border-color: var(--dark-status-chip-border);
}

body[data-theme="dark"] :is(.status-pill.strong, .quick-issue-panel .ghost-button.quick-settings-button) {
  color: var(--dark-light-action-text);
  background: var(--dark-light-action-bg);
  border-color: var(--line-strong);
}

body[data-theme="dark"] :is(
  .secondary-button,
  .ghost-button,
  .quick-picks button,
  .quick-amounts button,
  .policy-link,
  .file-button
) {
  color: var(--ink);
  background: var(--dark-surface);
  border-color: var(--line-strong);
}

body[data-theme="dark"] :is(
  .secondary-button:hover,
  .ghost-button:hover,
  .quick-picks button:hover,
  .quick-amounts button:hover
) {
  border-color: var(--accent);
}

body[data-theme="dark"] :is(
  .secondary-button:not(:disabled):active,
  .secondary-button.tap-pressed:not(:disabled),
  .ghost-button:not(:disabled):active,
  .ghost-button.tap-pressed:not(:disabled),
  .quick-picks button:not(:disabled):active,
  .quick-picks button.tap-pressed:not(:disabled),
  .quick-amounts button:not(:disabled):active,
  .quick-amounts button.tap-pressed:not(:disabled),
  .policy-link:active,
  .policy-link.tap-pressed,
  .file-button:not(.disabled):active,
  .file-button.tap-pressed:not(.disabled)
) {
  color: #f7ffff;
  background: rgba(39, 140, 141, 0.22);
  border-color: var(--accent);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.24);
}

body[data-theme="dark"] :is(.primary-button, .quick-action-row .primary-button) {
  color: #fff;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

body[data-theme="dark"] :is(.primary-button:not(:disabled):active, .primary-button.tap-pressed:not(:disabled)) {
  background: #1b686d;
  border-color: #1b686d;
}

body[data-theme="dark"] .issuer-save-button[data-save-state="saved"],
body[data-theme="dark"] .issuer-save-button:disabled[data-save-state="saved"],
body[data-theme="dark"] .issuer-save-button:disabled[data-save-state="locked"] {
  color: var(--dark-text-secondary);
  background: #102024;
  border-color: var(--dark-subtle-border);
  box-shadow: none;
  opacity: 1;
}

body[data-theme="dark"] :is(
  button[aria-disabled="true"],
  .file-button.disabled,
  .theme-card:disabled,
  .subscription-option.purchase-disabled
) {
  color: var(--dark-disabled-text);
  background: #102024;
  border-color: var(--dark-subtle-border);
  opacity: 0.82;
}

body[data-theme="dark"] .amount-keypad {
  background: var(--dark-elevated-surface);
  border: 1px solid var(--line);
  box-shadow: none;
}

body[data-theme="dark"] .amount-keypad button {
  color: var(--dark-text-secondary);
  background: transparent;
  border-color: var(--line-strong);
  box-shadow: none;
}

body[data-theme="dark"] .amount-keypad button:not(:disabled):active,
body[data-theme="dark"] .amount-keypad button.tap-pressed:not(:disabled) {
  color: #f7ffff;
  background: rgba(39, 140, 141, 0.22);
  border-color: var(--accent);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.24);
}

body[data-theme="dark"] .amount-keypad :is(.keypad-tool, .keypad-calc-extra) {
  color: #dff6f3;
  background: rgba(39, 140, 141, 0.2);
  border-color: rgba(42, 154, 154, 0.42);
}

body[data-theme="dark"].calculator-mode .amount-keypad {
  background: var(--dark-elevated-surface);
  border-color: var(--line);
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.22);
}

body[data-theme="dark"].calculator-mode .amount-keypad button {
  color: var(--dark-text-secondary);
  background: transparent;
  border-color: var(--line-strong);
}

body[data-theme="dark"].calculator-mode .amount-keypad :is(.keypad-tool, .keypad-calc-extra) {
  color: #dff6f3;
  background: rgba(39, 140, 141, 0.2);
  border-color: rgba(42, 154, 154, 0.42);
}

body[data-theme="dark"].calculator-mode .amount-keypad .keypad-calc-equals,
body[data-theme="dark"].calculator-mode .amount-keypad .keypad-calculator-toggle {
  color: #fff;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

body[data-theme="dark"] :is(.quick-amount-notice, .detail-draft-reminder) {
  color: var(--dark-text-secondary);
  background: rgba(39, 140, 141, 0.14);
  border-color: rgba(42, 154, 154, 0.34);
}

body[data-theme="dark"] .quick-amount-notice.error {
  color: #ffd6cf;
  background: rgba(255, 154, 140, 0.13);
  border-color: rgba(255, 154, 140, 0.34);
}

body[data-theme="dark"] .quick-amount-formula {
  color: var(--muted);
}

body[data-theme="dark"] :is(.compact-segmented span, .segmented span) {
  color: var(--muted);
}

body[data-theme="dark"] :is(.compact-segmented input:checked + span, .segmented input:checked + span) {
  color: #fff;
  background: var(--accent-strong);
}

body[data-theme="dark"] .toggle-line input {
  accent-color: var(--accent);
}

body[data-theme="dark"] .toggle-line {
  color: var(--dark-text-secondary);
}

body[data-theme="dark"] :is(.preview-action-bar, .bottom-nav) {
  background: rgba(19, 35, 38, 0.96);
  border-color: var(--dark-subtle-border);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.2);
}

body[data-theme="dark"] .history-list li.is-cancelled {
  background: rgba(255, 154, 140, 0.1);
  border-color: rgba(255, 154, 140, 0.34);
}

body[data-theme="dark"] .history-list li.is-selected {
  background: rgba(39, 140, 141, 0.2);
  outline-color: rgba(90, 178, 177, 0.42);
}

body[data-theme="dark"] :is(.history-list, .history-advanced, .history-utility-panel, .history-more-sheet-actions, .history-load-more-status) {
  background: var(--dark-surface);
  border-color: var(--line);
}

body[data-theme="dark"] .history-retention-panel {
  background: transparent;
}

body[data-theme="dark"] .history-zip-mode-panel {
  background: var(--dark-surface);
}

body[data-theme="dark"] :is(.history-list li, .history-more-sheet-action, .history-zip-mode-panel) {
  border-color: var(--line);
}

body[data-theme="dark"] :is(.history-more-sheet-action, .history-actions .ghost-button, .history-more-button, .history-zip-mode-actions .ghost-button) {
  background: rgba(13, 25, 27, 0.72);
}

body[data-theme="dark"] :is(.history-utility-summary, .history-utility-summary small, .history-retention-info-button, .history-more-sheet-target, .history-more-sheet-head p:last-child) {
  color: var(--dark-text-secondary);
}

body[data-theme="dark"] .history-utility-summary strong {
  color: var(--ink);
}

body[data-theme="dark"] .history-more-sheet-action.danger-button {
  color: #ffd6cf;
}

body[data-theme="dark"] .history-more-sheet-action:disabled {
  color: var(--dark-disabled-text);
  background: #102024;
  opacity: 0.82;
}

body[data-theme="dark"] .history-more-sheet-action.is-state:disabled {
  color: #8bbeba;
  background: rgba(39, 140, 141, 0.14);
  opacity: 1;
}

body[data-theme="dark"] .history-more-sheet-overlay {
  background: rgba(3, 8, 10, 0.62);
}

body[data-theme="dark"] .history-zip-create-bar .primary-button:disabled {
  color: var(--dark-disabled-text);
  background: #102024;
  border-color: var(--dark-subtle-border);
}

body[data-theme="dark"] .history-zip-create-bar {
  background: transparent;
}

body[data-theme="dark"] .history-zip-create-bar .primary-button {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
}

body[data-theme="dark"] .history-zip-create-bar .primary-button:disabled {
  box-shadow: none;
}

body[data-theme="dark"] :is(.history-labels span.retention-notice, .history-labels span.retention-warning) {
  color: #795c24;
  background: #fff5d9;
  border-color: #e7ca84;
}

body[data-theme="dark"] :is(.history-labels span.retention-urgent, .history-labels span.retention-expired) {
  color: #8b3026;
  background: #ffe6e1;
  border-color: #f0afa6;
}

body[data-theme="dark"] :is(.danger-outline-button, .danger-primary-button) {
  border-color: rgba(255, 154, 140, 0.42);
}

body[data-theme="dark"] .danger-outline-button {
  color: #ffd6cf;
  background: rgba(255, 154, 140, 0.1);
}

body[data-theme="dark"] .product-section .product-catalog-tools {
  border-bottom-color: var(--line);
}

body[data-theme="dark"] .detail-extra-fields,
body[data-theme="dark"] .product-other-actions {
  color: var(--ink);
  background: rgba(13, 25, 27, 0.72);
  border-color: var(--line);
}

body[data-theme="dark"] :is(.detail-extra-fields, .product-other-actions) summary {
  color: var(--dark-text-secondary);
}

body[data-theme="dark"] :is(.detail-extra-fields, .product-other-actions) .field > span {
  color: var(--muted);
}

body[data-theme="dark"] .detail-extra-actions .product-clear-button {
  color: var(--ink);
  background: var(--dark-surface);
  border-color: var(--line-strong);
}

body[data-theme="dark"] .detail-sheet-actions {
  background: linear-gradient(
    180deg,
    rgba(24, 45, 49, 0),
    var(--dark-elevated-surface) 30%
  );
}

body[data-theme="dark"] .plan-comparison-strip {
  background: var(--dark-surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

body[data-theme="dark"] .plan-comparison-plan {
  border-left-color: var(--line);
}

body[data-theme="dark"] :is(.plan-comparison-plan span, .plan-comparison-plan small) {
  color: var(--muted);
}

body[data-theme="dark"] :is(.plan-comparison-category, .plan-feature-comparison, .plan-comparison-category[open] summary) {
  border-color: var(--line);
}

body[data-theme="dark"] .plan-comparison-table thead th {
  color: var(--ink);
  background: var(--dark-surface);
}

body[data-theme="dark"] .plan-comparison-table :is(th, td) {
  border-color: var(--line);
}

body[data-theme="dark"] .plan-comparison-table .unavailable {
  color: var(--dark-text-disabled);
}

body[data-theme="dark"] .plan-comparison-notes {
  background: var(--dark-surface);
  border-color: var(--line);
}

@media (max-width: 640px) {
  body[data-theme="dark"] .plan-comparison-table tbody tr {
    border-bottom-color: var(--line);
  }

  body[data-theme="dark"] .plan-comparison-table tbody td {
    border-left-color: var(--line);
  }
}

body[data-theme="dark"] .receipt-preview-frame {
  background: #26383b;
}

body[data-theme="dark"] .receipt-preview-frame .receipt-sheet {
  color-scheme: light;
  --ink: #142b31;
  --muted: #66787c;
  --line: #e3ecec;
  --line-strong: #cadada;
  --danger: #a43e34;
  color: var(--ink);
  background: #fff;
  border-color: #cfd6da;
}

body[data-theme="dark"] .receipt-preview-frame .receipt-status-notice {
  color: var(--danger);
  background: #fff8f7;
  border-color: rgba(164, 62, 52, 0.36);
}

.settings-tab-mode .app-shell {
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

body.settings-tab-mode {
  overflow-x: hidden;
}

body.settings-tab-mode::before {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 19;
  height: env(safe-area-inset-top, 0px);
  background: var(--bg);
  pointer-events: none;
  content: "";
}

.settings-surface[data-tab-panel="settings"] {
  width: min(100%, 680px);
  max-width: 680px;
  margin: 0 auto;
  padding: 0 0 calc(34px + env(safe-area-inset-bottom, 0px));
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-x: hidden;
  scroll-padding-top: calc(18px + env(safe-area-inset-top, 0px));
}

.settings-header {
  display: grid;
  justify-content: start;
  gap: 6px;
  margin-bottom: 18px;
}

.settings-heading-stack {
  display: grid;
  gap: 7px;
  justify-items: start;
}

.settings-heading-stack h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.72rem;
  font-weight: 780;
  line-height: 1.15;
}

.settings-back-button {
  min-height: 44px;
  margin: -9px 0 -4px -8px;
  padding: 8px;
  color: var(--accent-strong);
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
}

.settings-back-button:focus-visible {
  outline: 3px solid rgba(35, 127, 131, 0.24);
  outline-offset: 2px;
}

.settings-surface[data-tab-panel="settings"] .settings-group {
  width: 100%;
  min-width: 0;
  margin-top: 20px;
}

.settings-surface[data-tab-panel="settings"] .settings-group:first-of-type {
  margin-top: 0;
}

.settings-surface[data-tab-panel="settings"] .settings-group-title {
  margin: 0 0 7px 16px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.25;
}

.settings-surface[data-tab-panel="settings"] .settings-list-item {
  width: 100%;
  min-width: 0;
  padding: 0;
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
}

.settings-surface[data-tab-panel="settings"] .settings-list-item.plan-locked.locked {
  opacity: 1;
}

.settings-surface[data-tab-panel="settings"] .settings-list-item .settings-disclosure-summary {
  min-height: 58px;
  padding: 10px 14px 10px 16px;
}

.settings-surface[data-tab-panel="settings"] .settings-disclosure-title {
  grid-template-columns: minmax(0, 1fr) max-content 10px;
  gap: 10px;
}

.settings-surface[data-tab-panel="settings"] .settings-disclosure-title h3 {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 670;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-surface[data-tab-panel="settings"] .settings-disclosure-title small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 520;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-surface[data-tab-panel="settings"] .settings-disclosure-chevron {
  justify-self: center;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right-width: 1.8px;
  border-bottom-width: 1.8px;
  opacity: 0.75;
}

.settings-surface[data-tab-panel="settings"] .lock-badge {
  min-height: 0;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 720;
  line-height: 1.2;
}

.settings-surface[data-tab-panel="settings"] .settings-aux-badge {
  display: none;
}

.settings-surface[data-tab-panel="settings"] .pro-badge {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: rgba(35, 127, 131, 0.18);
}

.settings-surface[data-tab-panel="settings"] .subtle-state-badge {
  color: var(--muted);
  background: transparent;
  border-color: transparent;
}

.settings-surface[data-tab-panel="settings"] .danger-badge {
  color: var(--danger);
  background: rgba(164, 62, 52, 0.08);
  border-color: rgba(164, 62, 52, 0.18);
}

.settings-surface[data-tab-panel="settings"] .settings-list-item[open] .settings-disclosure-summary {
  border-bottom: 0;
}

.settings-surface[data-tab-panel="settings"] .settings-panel-body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 10px 16px 14px;
  overflow: hidden;
  background: transparent;
  border-top: 1px solid var(--line);
}

.settings-surface[data-tab-panel="settings"] .settings-panel-body > * {
  min-width: 0;
  max-width: 100%;
}

.settings-surface[data-tab-panel="settings"] .settings-panel-body :is(.settings-note, p, strong, span, li) {
  overflow-wrap: anywhere;
}

.settings-surface[data-tab-panel="settings"] .settings-panel-body .settings-note {
  font-size: 0.82rem;
  font-weight: 560;
  line-height: 1.45;
}

.settings-surface[data-tab-panel="settings"] .account-linking-note {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.settings-surface[data-tab-panel="settings"] .settings-panel-body .inline-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-surface[data-tab-panel="settings"] .settings-panel-body .inline-actions > button {
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
}

.settings-surface[data-tab-panel="settings"] .settings-logout-button {
  color: var(--muted);
  background: transparent;
  border-color: var(--line-strong);
  font-weight: 650;
}

.settings-surface[data-tab-panel="settings"] .settings-action-row {
  flex-wrap: wrap;
  align-items: flex-start;
}

.settings-surface[data-tab-panel="settings"] .settings-action-row span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.settings-surface[data-tab-panel="settings"] :is(
  .form-grid,
  .theme-grid,
  .issuer-visibility-grid,
  .subscription-grid,
  .subscription-actions,
  .subscription-management-actions,
  .settings-action-buttons,
  .account-logo-settings,
  .account-logo-actions,
  .policy-link-grid
) {
  min-width: 0;
  max-width: 100%;
}

.settings-surface[data-tab-panel="settings"] .settings-disclosure:not([open]) > .settings-panel-body {
  display: none;
}

.settings-surface[data-tab-panel="settings"] .account-danger-zone {
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid var(--line);
}

.settings-surface[data-tab-panel="settings"] .account-danger-zone .settings-disclosure-title h3 {
  color: var(--danger);
}

body[data-theme="dark"] .settings-surface[data-tab-panel="settings"] {
  background: transparent;
  border: 0;
  box-shadow: none;
}

body[data-theme="dark"] .settings-surface[data-tab-panel="settings"] .settings-panel-body {
  background: transparent;
}

body[data-theme="dark"] .settings-surface[data-tab-panel="settings"] .settings-logout-button {
  color: var(--dark-text-secondary);
  background: transparent;
  border-color: var(--line-strong);
}

body[data-theme="dark"] .settings-surface[data-tab-panel="settings"] .pro-badge {
  color: #bfe7e2;
  background: rgba(39, 140, 141, 0.18);
  border-color: rgba(39, 140, 141, 0.34);
}

body[data-theme="dark"] .settings-surface[data-tab-panel="settings"] .danger-badge {
  color: #ffd6cf;
  background: rgba(255, 154, 140, 0.11);
  border-color: rgba(255, 154, 140, 0.3);
}

@media (max-width: 520px) {
  .settings-surface[data-tab-panel="settings"] {
    padding: 0 0 calc(30px + env(safe-area-inset-bottom, 0px));
  }

  .settings-surface[data-tab-panel="settings"] .settings-disclosure-title {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .settings-surface[data-tab-panel="settings"] .settings-disclosure-title > span:first-child,
  .settings-surface[data-tab-panel="settings"] .settings-disclosure-title .lock-badge,
  .settings-surface[data-tab-panel="settings"] .settings-disclosure-title .settings-disclosure-chevron {
    grid-column: auto;
    grid-row: auto;
  }

  .settings-surface[data-tab-panel="settings"] .settings-list-item .settings-disclosure-summary {
    min-height: 56px;
    padding: 10px 12px 10px 14px;
  }
}

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  body {
    background: #fff;
  }

  body * {
    visibility: hidden;
  }

  .receipt-sheet,
  .receipt-sheet * {
    visibility: visible;
  }

  .receipt-sheet {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    min-height: calc(297mm - 24mm);
    border: 0;
    box-shadow: none;
  }

  .receipt-body {
    min-height: calc(297mm - 24mm);
    padding: 18mm;
  }
}