/* ===== Material Design 3 Expressive – design tokens (m3.material.io) ===== */
:root {
  /* Typeface – M3 Expressive: variable font for flexibility */
  --md-ref-typeface-brand: 'Roboto Flex', 'Roboto', system-ui, sans-serif;
  --md-ref-typeface-plain: 'Roboto Flex', 'Roboto', system-ui, sans-serif;

  /* Color scheme – M3 + Color Hunt (#241023 #883C82 #B7569A #FFBF00) */
  --md-sys-color-primary: #883C82;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #F5E5F4;
  --md-sys-color-on-primary-container: #241023;
  --md-sys-color-secondary: #B7569A;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #FFD8F0;
  --md-sys-color-on-secondary-container: #241023;
  /* Tertiary – gold accent (Convert button) */
  --md-sys-color-tertiary: #FFBF00;
  --md-sys-color-on-tertiary: #241023;
  --md-sys-color-tertiary-container: #FFF3C4;
  --md-sys-color-on-tertiary-container: #241023;
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;
  /* Surfaces – light with subtle purple tint */
  --md-sys-color-background: #FFFBFE;
  --md-sys-color-on-background: #241023;
  --md-sys-color-surface: #FFFBFE;
  --md-sys-color-on-surface: #241023;
  --md-sys-color-surface-bright: #FFFBFE;
  --md-sys-color-surface-dim: #EDE5EC;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F8F2F7;
  --md-sys-color-surface-container: #F5EFF4;
  --md-sys-color-surface-container-high: #F0E8EF;
  --md-sys-color-surface-container-highest: #EAE0E9;
  --md-sys-color-on-surface-variant: #4D424C;
  --md-sys-color-outline: #7A6B79;
  --md-sys-color-outline-variant: #D4C8D3;
  --md-sys-color-shadow: #241023;
  --md-sys-color-surface-tint: #883C82;

  /* Motion – M3 Expressive: emphasis on bounce, natural physics (m3.material.io/styles/motion) */
  --md-sys-motion-duration-short: 200ms;
  --md-sys-motion-duration-medium: 300ms;
  --md-sys-motion-duration-long: 400ms;
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

  /* Elevation – M3 levels 0–3 (tinted with palette dark #241023) */
  --md-elevation-level-0: none;
  --md-elevation-level-1: 0 1px 2px rgba(36, 16, 35, 0.12), 0 1px 3px 1px rgba(36, 16, 35, 0.08);
  --md-elevation-level-2: 0 1px 2px rgba(36, 16, 35, 0.12), 0 2px 6px 2px rgba(36, 16, 35, 0.1);
  --md-elevation-level-3: 0 4px 8px 3px rgba(36, 16, 35, 0.1), 0 1px 3px rgba(36, 16, 35, 0.12);
  --md-elevation-0: var(--md-elevation-level-0);
  --md-elevation-1: var(--md-elevation-level-1);
  --md-elevation-2: var(--md-elevation-level-2);

  /* Shape – M3 Expressive: contrasting shapes (larger corners for cards) */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 16px;
  --md-sys-shape-corner-large: 20px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
  --md-shape-corner-extra-small: var(--md-sys-shape-corner-extra-small);
  --md-shape-corner-small: var(--md-sys-shape-corner-small);
  --md-shape-corner-medium: var(--md-sys-shape-corner-medium);
  --md-shape-corner-large: var(--md-sys-shape-corner-large);

  /* Typescale – M3 roles (material-web.dev/theming/typography) */
  --md-sys-typescale-body-medium-size: 1rem;
  --md-sys-typescale-body-medium-line-height: 1.5rem;
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-small-size: 0.875rem;
  --md-sys-typescale-body-small-line-height: 1.25rem;
  --md-sys-typescale-label-large-size: 0.875rem;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-headline-small-size: 1.5rem;
  --md-sys-typescale-headline-small-line-height: 2rem;
  --md-sys-typescale-title-medium-size: 1rem;
  --md-sys-typescale-title-medium-weight: 500;

  /* 8dp grid – spacing */
  --md-space-1: 4px;
  --md-space-2: 8px;
  --md-space-3: 12px;
  --md-space-4: 16px;
  --md-space-5: 20px;
  --md-space-6: 24px;
}

/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, p, input, button {
  margin: 0;
  padding: 0;
  font-family: var(--md-ref-typeface-plain);
}

body {
  /* M3 + Color Hunt: subtle purple/pink gradient */
  background: linear-gradient(165deg, var(--md-sys-color-surface-dim) 0%, color-mix(in srgb, #883C82 10%, var(--md-sys-color-surface-dim)) 50%, color-mix(in srgb, #B7569A 6%, var(--md-sys-color-surface-dim)) 100%);
  color: var(--md-sys-color-on-surface);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--md-space-4);
  gap: var(--md-space-4);
}

/* ===== App header – back to home ===== */
.app-header {
  width: 100%;
  max-width: 420px;
  flex-shrink: 0;
}

.app-logo {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--md-sys-color-primary);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.app-logo:hover,
.app-logo:focus {
  color: var(--md-sys-color-on-primary-container);
  outline: none;
}

/* Page title – above card */
.page-title {
  font-family: var(--md-ref-typeface-plain);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 2.25rem;
  color: var(--md-sys-color-on-surface);
  margin: 0;
  text-align: center;
}

/* ===== Typography – M3 typescale (m3.material.io/styles/typography) ===== */
.mdc-typography--headline5 {
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-headline-small-size);
  font-weight: 400;
  letter-spacing: 0;
  line-height: var(--md-sys-typescale-headline-small-line-height);
}
.mdc-typography--headline6 {
  font-family: var(--md-ref-typeface-plain);
  font-size: 1.25rem;
  font-weight: var(--md-sys-typescale-title-medium-weight);
  letter-spacing: 0;
  line-height: 1.75rem;
}
.mdc-typography--body1 {
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-medium-size);
  font-weight: var(--md-sys-typescale-body-medium-weight);
  letter-spacing: 0.5px;
  line-height: var(--md-sys-typescale-body-medium-line-height);
}
.mdc-typography--body2 {
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-small-size);
  font-weight: 400;
  letter-spacing: 0.25px;
  line-height: var(--md-sys-typescale-body-small-line-height);
  color: var(--md-sys-color-on-surface-variant);
}

/* ===== Card – M3 Expressive: larger corners, subtle motion ===== */
.card {
  width: 100%;
  max-width: 420px;
  background: var(--md-sys-color-surface);
  padding: var(--md-space-6);
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: var(--md-elevation-1);
  transition: box-shadow var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
  overflow: visible;
}
.card:hover {
  box-shadow: var(--md-elevation-2);
}
.card-subtitle {
  margin-top: var(--md-space-1);
  margin-bottom: var(--md-space-4);
}

/* ===== Text field wrapper (8dp grid) ===== */
.mdc-text-field-wrapper {
  margin-bottom: var(--md-space-4);
}
.mdc-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1rem;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: var(--md-space-2);
}

/* ===== Outlined text field (Material style) ===== */
.mdc-text-field {
  width: 100%;
  height: 56px;
  padding: 0 var(--md-space-4);
  font-size: 1rem;
  font-family: inherit;
  color: var(--md-sys-color-on-surface);
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized-decelerate),
    background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
  -webkit-appearance: none;
  appearance: none;
}
.mdc-text-field::placeholder {
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.7;
}
.mdc-text-field:hover {
  border-color: var(--md-sys-color-on-surface);
}
.mdc-text-field:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
}

/* Native select (currency) – M3 style, same shape and motion as text fields */
.mdc-select {
  padding-right: 3rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%2379747E'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--md-space-2) center;
  background-size: 24px;
}
.mdc-select:hover {
  border-color: var(--md-sys-color-on-surface);
}
.mdc-select:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23883C82'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

.mdc-select:disabled,
.mdc-text-field:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--md-sys-color-surface-container-high);
}

.fetch-rates-button {
  margin-top: var(--md-space-2);
}
.rate-status {
  margin: var(--md-space-2) 0 0;
  min-height: 1.25rem;
}
.rate-status--success {
  color: var(--md-sys-color-primary);
}
.rate-status--error {
  color: var(--md-sys-color-error);
}

/* ===== Filled button – M3 Expressive: emphasized motion, full-radius shape ===== */
.mdc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-space-2);
  width: 100%;
  height: 48px;
  padding: 0 var(--md-space-4);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: inherit;
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  box-shadow: var(--md-elevation-0);
  transition: transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized-decelerate),
    box-shadow var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized),
    background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.mdc-button--raised {
  box-shadow: var(--md-elevation-1);
}
.mdc-button:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 85%, black);
  box-shadow: var(--md-elevation-2);
  transform: translateY(-1px);
}
.mdc-button:active {
  box-shadow: var(--md-elevation-0);
  transform: translateY(0) scale(0.98);
  transition-duration: 50ms;
}

/* Convert button – tertiary (coral) */
.convert-button {
  background: var(--md-sys-color-tertiary);
  color: var(--md-sys-color-on-tertiary);
}
.convert-button:hover {
  background: #E6AC00;
  box-shadow: var(--md-elevation-2);
  transform: translateY(-1px);
}
.convert-button:active {
  box-shadow: var(--md-elevation-0);
  transform: translateY(0) scale(0.98);
  transition-duration: 50ms;
}
.mdc-button__icon {
  font-size: 22px;
  width: 22px;
  height: 22px;
}

/* Outlined button – M3 Expressive motion */
.mdc-button--outlined {
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 2px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized-decelerate);
}
.mdc-button--outlined:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--md-elevation-0);
  transform: translateY(-1px);
}
.mdc-button--outlined:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 50ms;
}
.qr-button {
  margin-top: var(--md-space-4);
}

/* ===== Result chip – M3 Expressive shape ===== */
.result {
  margin-top: var(--md-space-5);
  padding: var(--md-space-4);
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-large);
  text-align: center;
  transition: box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.result .pi-amount {
  color: var(--md-sys-color-primary);
  margin-bottom: var(--md-space-2);
}
.result .breakdown {
  color: var(--md-sys-color-on-surface-variant);
}

/* Discount block – between amount and QR buttons */
.discount-block {
  margin-top: var(--md-space-4);
  margin-bottom: var(--md-space-2);
  padding: var(--md-space-3) 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.discount-label {
  display: block;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: var(--md-space-2);
  font-weight: var(--md-sys-typescale-label-large-weight);
}
.discount-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-space-2);
  align-items: center;
  justify-content: center;
}
.discount-option {
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-medium-size);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--md-space-2) var(--md-space-4);
  cursor: pointer;
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
  -webkit-appearance: none;
  appearance: none;
  min-width: 56px;
}
.discount-option:hover {
  border-color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-highest);
}
.discount-option[aria-pressed="true"],
.discount-option--selected {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 25%, transparent);
}
.discount-option--custom {
  display: flex;
  align-items: center;
  padding: 0;
  min-width: 0;
  cursor: default;
  gap: var(--md-space-1);
}
.discount-option--custom .discount-custom-label {
  font-size: var(--md-sys-typescale-body-medium-size);
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  padding-left: var(--md-space-2);
}
.discount-option--custom .discount-custom-suffix {
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
  padding-right: var(--md-space-2);
}
.discount-option--custom input {
  width: 3.5rem;
  padding: var(--md-space-2) var(--md-space-2);
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
}
.discount-option--custom input:hover,
.discount-option--custom input:focus {
  border-color: var(--md-sys-color-primary);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
}
.discount-option--custom input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}
.to-pay-line {
  margin-top: var(--md-space-3);
  margin-bottom: 0;
  color: var(--md-sys-color-on-surface);
}
.to-pay-line .to-pay-label {
  color: var(--md-sys-color-on-surface-variant);
  margin-right: var(--md-space-1);
}
.to-pay-line strong {
  color: var(--md-sys-color-primary);
  font-weight: 600;
}
.to-pay-line.hidden {
  display: none;
}

/* QR code section */
.qrcode-section {
  margin-top: var(--md-space-4);
  padding-top: var(--md-space-4);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
#qrcode-container {
  display: flex;
  justify-content: center;
  margin-bottom: var(--md-space-2);
}
#qrcode-container canvas,
#qrcode-container img,
#qrcode-container table {
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--md-shape-corner-small);
}
#qrcode-container canvas,
#qrcode-container img {
  display: block;
}
.qrcode-amount {
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  margin-bottom: var(--md-space-2);
}
.qrcode-hint {
  font-size: 0.75rem;
  line-height: 1.2;
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
}

#wallet-qrcode-container canvas,
#wallet-qrcode-container img,
#wallet-qrcode-container table {
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--md-shape-corner-small);
}
#wallet-qrcode-container canvas,
#wallet-qrcode-container img {
  display: block;
}
#wallet-qrcode-section .qrcode-hint {
  margin-top: var(--md-space-4);
}

/* Copy page (opened when scanning wallet QR) */
.copy-page-card {
  max-width: 360px;
}
.copy-message {
  text-align: center;
  padding: var(--md-space-2) 0;
}
.copy-success {
  color: var(--md-sys-color-primary);
  font-weight: 500;
}
.copy-error {
  color: var(--md-sys-color-on-surface-variant);
}
.copy-detail {
  margin-top: var(--md-space-2);
}

.hidden {
  display: none;
}

/* Elevation utility (e.g. for card) */
.mdc-elevation-0 { box-shadow: var(--md-elevation-0); }
.mdc-elevation-1 { box-shadow: var(--md-elevation-1); }

/* ===== Footer – Pi Network dapp links ===== */
.app-footer {
  width: 100%;
  max-width: 420px;
  margin-top: auto;
  padding-top: var(--md-space-6);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  flex-shrink: 0;
  text-align: center;
}

.app-footer__intro {
  font-size: 0.75rem;
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 var(--md-space-2);
  line-height: 1.3;
}

.app-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-space-2) var(--md-space-4);
  justify-content: center;
}

.app-footer__links a {
  font-size: 0.75rem;
  color: var(--md-sys-color-primary);
  text-decoration: none;
  transition: color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.app-footer__links a:hover,
.app-footer__links a:focus {
  color: var(--md-sys-color-on-primary-container);
  text-decoration: underline;
  outline: none;
}