*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
}

a,
button,
select,
[role="button"],
label[for],
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
summary,
.btn,
.btn-link {
  cursor: pointer !important;
}

button:disabled,
.btn:disabled,
a[disabled] {
  cursor: not-allowed !important;
}

/*
  Buyer-facing surfaces use the POS dark palette so the checkout, invoice and
  receipt pages feel like a tight, futuristic terminal product. The landing /
  marketing pages live on /frontend/styles.css, so this dark theme does not
  affect the auth'd admin app.
*/
:root {
  --bg: #0b1220;
  --surface: #111a2e;
  --surface-2: #16213b;
  --border: #1e293b;
  --text: #f8fafc;
  --text-secondary: #94a3b8;
  --primary: #22c55e;
  --primary-hover: #16a34a;
  --primary-glow: rgba(34, 197, 94, 0.25);
  --success: #22c55e;
  --success-bg: rgba(34, 197, 94, 0.1);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.1);
  --error: #ef4444;
  --error-bg: rgba(239, 68, 68, 0.1);
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", "Fira Code", "Fira Mono", monospace;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Nav */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.nav-brand {
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  text-decoration: none;
}

.nav-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--success);
  background: var(--success-bg);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

/* Container */
.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px;
  flex: 1;
  width: 100%;
}

/* Footer */
.footer {
  border-top: 1px solid var(--border);
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.footer .disclaimer {
  margin-bottom: 8px;
}

.footer .safety {
  font-weight: 600;
  color: var(--warning);
}

/* ===== Landing Animations ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.reveal.visible .step:nth-child(1),
.reveal.visible .feature-card:nth-child(1),
.reveal.visible .trust-item:nth-child(1) { transition-delay: 0s; }
.reveal.visible .step:nth-child(2),
.reveal.visible .feature-card:nth-child(2),
.reveal.visible .trust-item:nth-child(2) { transition-delay: 0.12s; }
.reveal.visible .step:nth-child(3),
.reveal.visible .feature-card:nth-child(3),
.reveal.visible .trust-item:nth-child(3) { transition-delay: 0.24s; }
.reveal.visible .feature-card:nth-child(4) { transition-delay: 0.36s; }

.step, .feature-card, .trust-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible .step,
.reveal.visible .feature-card,
.reveal.visible .trust-item {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Landing page wrapper ===== */
.landing .container {
  max-width: 960px;
}

/* ===== Hero ===== */
.landing-hero {
  text-align: center;
  padding: 80px 0 64px;
  position: relative;
}

.landing-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.landing-hero > * {
  position: relative;
  z-index: 1;
}

.landing-hero h1 {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-bottom: 20px;
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.landing-hero .hero-sub {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 540px;
  margin: 0 auto 40px;
  line-height: 1.65;
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.landing-hero .hero-cta {
  display: flex;
  justify-content: center;
  gap: 12px;
  background: none;
  border: none;
  padding: 0;
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.landing-hero .hero-cta .btn-primary {
  width: auto;
  padding: 16px 36px;
  font-size: 16px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.landing-hero .hero-cta .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
  transform: translateY(-2px);
}

/* ===== Section shared ===== */
.landing-section {
  padding: 64px 0;
}

.landing-section + .landing-section {
  border-top: 1px solid var(--border);
}

.section-title {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.section-subtitle {
  text-align: center;
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 44px;
}

/* ===== How It Works -- steps ===== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}

/* Connector lines between steps (desktop only) */
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  top: 44px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--border), var(--primary), var(--border), transparent);
  z-index: 0;
}

.steps::before {
  left: 16.67%;
  right: 50%;
}

.steps::after {
  left: 50%;
  right: 16.67%;
}

.step {
  text-align: center;
  padding: 24px 16px;
  position: relative;
  z-index: 1;
}

.step-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #3b82f6);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  transition: transform 0.3s, box-shadow 0.3s;
}

.step:hover .step-icon {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

.step-num {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 8px;
}

.step h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.step p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ===== Features grid ===== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s, border-color 0.25s;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border-color: var(--primary);
}

.feature-card-icon {
  font-size: 32px;
  margin-bottom: 14px;
  display: block;
  transition: transform 0.3s;
}

.feature-card:hover .feature-card-icon {
  animation: float 1.5s ease-in-out infinite;
}

.feature-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.feature-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ===== Trust strip ===== */
.trust-strip {
  display: flex;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
}

.trust-item {
  text-align: center;
  max-width: 200px;
  transition: transform 0.3s;
}

.trust-item:hover {
  transform: translateY(-3px);
}

.trust-icon {
  font-size: 32px;
  margin-bottom: 10px;
  display: block;
}

.trust-item h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.trust-item p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ===== Final CTA ===== */
.landing-final-cta {
  text-align: center;
  padding: 64px 0 80px;
  border-top: 1px solid var(--border);
  position: relative;
}

.landing-final-cta::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 400px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.04) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.landing-final-cta > * {
  position: relative;
}

.landing-final-cta h2 {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.landing-final-cta p {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.landing-final-cta .btn-primary {
  width: auto;
  display: inline-block;
  padding: 16px 36px;
  font-size: 16px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.landing-final-cta .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
  transform: translateY(-2px);
}

.landing-final-cta .wallet-hint {
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-secondary);
}

.landing-final-cta .wallet-hint a {
  color: var(--primary);
  transition: color 0.15s;
}

.landing-final-cta .wallet-hint a:hover {
  color: var(--primary-hover);
}

/* ===== Landing responsive ===== */
@media (max-width: 768px) {
  .landing-hero { padding: 56px 0 44px; }
  .landing-hero h1 { font-size: 30px; }
  .landing-hero .hero-sub { font-size: 16px; }
  .landing-hero::before { width: 320px; height: 320px; }

  .steps { grid-template-columns: 1fr; gap: 8px; }
  .steps::before, .steps::after { display: none; }
  .features-grid { grid-template-columns: 1fr; }
  .trust-strip { gap: 32px; }

  .landing-final-cta h2 { font-size: 24px; }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  .step, .feature-card, .trust-item { transition: none; opacity: 1; transform: none; }
  .landing-hero h1, .landing-hero .hero-sub, .landing-hero .hero-cta { animation: none; }
  .feature-card:hover .feature-card-icon { animation: none; }
}

/* Badges */
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 4px;
}

.badge-open {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.badge-paid {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-verified {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Payment / Invoice Pages */
.payment-page,
.invoice-page,
.receipt-page {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-lg);
}

.payment-header,
.invoice-header,
.receipt-header {
  margin-bottom: 28px;
}

.payment-header h1,
.invoice-header h1,
.receipt-header h1 {
  font-size: 24px;
  margin-top: 8px;
}

.invoice-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.memo {
  color: var(--text-secondary);
  margin-top: 4px;
}

.receipt-id {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-secondary);
}

/* Amount */
.amount-display,
.receipt-amount {
  text-align: center;
  padding: 24px 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.amount-value {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.amount-currency {
  font-size: 18px;
  color: var(--text-secondary);
  margin-left: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Details */
.payment-details,
.receipt-details {
  margin-bottom: 24px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}

.detail-label {
  font-size: 12px;
  color: var(--text-secondary);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.detail-value {
  font-size: 14px;
  text-align: right;
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}

.detail-value.address {
  font-family: var(--mono);
  font-size: 12px;
}

.detail-value.verified {
  color: var(--success);
  font-weight: 600;
}

.tx-link {
  color: var(--primary);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 13px;
}

.tx-link:hover {
  text-decoration: underline;
}

/* Invoice */
.invoice-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meta-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.meta-value {
  font-size: 14px;
  font-weight: 500;
}

.line-items {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
}

.line-items th,
.line-items td {
  padding: 10px 12px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}

.line-items td.text-right,
.line-items th.text-right {
  font-variant-numeric: tabular-nums;
}

.line-items th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  font-weight: 600;
}

.text-right {
  text-align: right;
}

.invoice-memo {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Actions */
.payment-actions {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.paid-notice {
  margin-top: 24px;
  padding: 20px;
  background: var(--success-bg);
  border-radius: var(--radius);
  text-align: center;
}

.paid-notice p {
  color: var(--success);
  font-weight: 600;
  margin-bottom: 12px;
}

.divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  gap: 12px;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.divider span {
  font-size: 13px;
  color: var(--text-secondary);
}

.manual-pay p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

/* Buttons & Inputs */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.btn-primary {
  background: var(--primary);
  color: #04130a;
  width: 100%;
  text-align: center;
  font-size: 15px;
  padding: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 0 0 0 var(--primary-glow);
  transition: background-color 0.18s, box-shadow 0.18s, transform 0.12s;
}

.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 0 0 6px var(--primary-glow);
}

.btn-primary:active {
  transform: scale(0.98);
  opacity: 0.95;
}

.btn-secondary {
  background: var(--surface-2, var(--bg));
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--border);
}

.btn-secondary:active {
  transform: scale(0.98);
}

a:active {
  opacity: 0.85;
}

.link:active {
  opacity: 0.7;
}

.input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  margin-bottom: 10px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input::placeholder { color: var(--text-secondary); opacity: 0.6; }

.input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Status Messages */
.status-message {
  margin-top: 16px;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  display: none;
}

.status-message.error {
  display: block;
  background: var(--error-bg);
  color: var(--error);
}

.status-message.success {
  display: block;
  background: var(--success-bg);
  color: var(--success);
}

.status-message.loading {
  display: block;
  background: var(--warning-bg);
  color: var(--warning);
}

/* Inline spinner used by the wallet-pay loading states. Prepended to the
   status message so the page never looks idle between "tx broadcast" and
   "receipt verified" — the previous text-only progress bar was too quiet
   and led to users tapping Pay again on slow networks. */
.pay-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(217, 119, 6, 0.25);
  border-top-color: var(--warning);
  border-radius: 50%;
  vertical-align: -2px;
  margin-right: 8px;
  animation: pay-spinner-rot 0.9s linear infinite;
}
@keyframes pay-spinner-rot {
  to { transform: rotate(360deg); }
}

/* Disabled pay button while a transaction is mid-flight. We want the user
   to see clearly that the click was received and the system is working,
   not a vanilla greyed-out button that could read as "broken". */
.btn.pay-busy {
  opacity: 1;
  cursor: progress;
  background: var(--text-secondary);
  position: relative;
}
.btn.pay-busy::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -2px;
  margin-right: 10px;
  animation: pay-spinner-rot 0.9s linear infinite;
}

/* -----------------------------------------------------------------------
   "Verifying Payment" card — the canonical loading UX shown from the
   moment the buyer's wallet broadcasts until the receipt is verified.
   Replaces the previous patchwork of inline status HTML that had at
   least one path rendering without a spinner. Apply ONCE here; every
   pay flow (checkout link + invoice link) inherits the same look.
   ----------------------------------------------------------------------- */

/* Wrapper: override the default status-message warning background so the
   card's own surface reads cleanly without an ugly yellow wash behind it. */
.status-message.loading.pay-verify-host {
  background: transparent;
  color: inherit;
  padding: 0;
}

.pay-verify-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 22px;
  margin: 8px 0;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pay-verify-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.pay-verify-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid #dbeafe;        /* light blue ring */
  border-top-color: #2563eb;        /* primary spinner head */
  border-radius: 50%;
  animation: pay-spinner-rot 0.9s linear infinite;
  flex-shrink: 0;
}

.pay-verify-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  letter-spacing: -0.01em;
}

.pay-verify-sub {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 14px;
  min-height: 1.5em;               /* reserve a line so heartbeat swaps don't shift layout */
  transition: opacity 0.2s ease;
}

.pay-verify-bar {
  background: #f3f4f6;
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
  position: relative;
}

.pay-verify-bar-fill {
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
}

/* Indeterminate bar: a moving stripe travels left-to-right when we
   don't have a quantitative progress signal (e.g. waiting for the tx
   to be mined). Reassures the buyer that something is still happening. */
.pay-verify-bar-indeterminate {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #2563eb 40%,
    #3b82f6 60%,
    transparent 100%
  );
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: pay-verify-indeterminate 1.4s ease-in-out infinite;
}

@keyframes pay-verify-indeterminate {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}

/* Respect users who've asked for reduced motion. Spinner and progress
   bar still update — they just don't constantly animate. */
@media (prefers-reduced-motion: reduce) {
  .pay-verify-spinner { animation-duration: 2s; }
  .pay-verify-bar-indeterminate { animation: none; background-position: 50% 0; }
}

/* Receipt footer */
.receipt-footer {
  margin-top: 24px;
  text-align: center;
}

.link {
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
}

.link:hover {
  text-decoration: underline;
}

/* 404 */
.not-found {
  text-align: center;
  padding: 60px 0;
}

.not-found h1 {
  font-size: 64px;
  font-weight: 800;
  color: var(--border);
  margin-bottom: 12px;
}

.not-found p {
  color: var(--text-secondary);
  margin-bottom: 24px;
}

/* Responsive */
@media (max-width: 600px) {
  .container {
    padding: 24px 16px;
  }

  .payment-page,
  .invoice-page,
  .receipt-page {
    padding: 20px;
  }

  .amount-value {
    font-size: 32px;
  }

  .detail-row {
    flex-direction: column;
    gap: 2px;
  }

  .detail-value {
    text-align: left;
  }

  .invoice-title-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Touch device targets */
@media (any-pointer: coarse) {
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .link { min-height: 44px; display: inline-flex; align-items: center; }
  a { min-height: 44px; }
}