/* Mon Salaire V31 — mobile-first polish and fiscal clarity. */
:root {
  --v31-orange: #ff6a00;
  --v31-orange-dark: #d94f00;
  --v31-apricot: #fff0e5;
  --v31-cream: #fffaf5;
  --v31-yellow: #fff1a8;
  --v31-ink: #17213a;
  --v31-muted: #63708a;
  --v31-border: #eadfd6;
  --v31-shadow: 0 18px 48px rgba(90, 50, 18, 0.10);
}

html {
  background: linear-gradient(180deg, #fff7f0 0%, #f7f8fc 46%, #f7f8fc 100%);
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  color: var(--v31-ink);
  -webkit-tap-highlight-color: transparent;
}

button,
a,
input,
select,
summary {
  touch-action: manipulation;
}

button,
.primary-button,
.secondary-button,
.stepper button,
.bottom-nav button {
  min-height: 44px;
}

input,
select {
  min-height: 48px;
  font-size: 16px;
}

:where(button, a, input, select, summary):focus-visible {
  outline: 3px solid rgba(255, 106, 0, 0.32);
  outline-offset: 2px;
}

.app-frame,
.onboarding-card,
.access-card {
  box-shadow: var(--v31-shadow);
}

.app-header {
  border-bottom: 1px solid rgba(255, 106, 0, 0.14);
  background: rgba(255, 250, 245, 0.92);
  backdrop-filter: blur(18px);
}

.app-header h1,
.page-heading h2,
.onboarding-card h1,
.access-card h1 {
  letter-spacing: -0.035em;
}

.brand-mark,
.access-brand {
  background: linear-gradient(145deg, #ff7a1a, #f25700);
  box-shadow: 0 8px 22px rgba(255, 106, 0, 0.24);
}

.input-card,
.breakdown-card,
.settings-accordion,
.profile-summary-card,
.v23-profile-card {
  border-color: var(--v31-border);
  box-shadow: 0 10px 30px rgba(58, 45, 36, 0.055);
}

.input-card:hover,
.settings-accordion[open] {
  border-color: rgba(255, 106, 0, 0.30);
}

.card-title-row h3::after,
.breakdown-card h3::after {
  content: "";
  display: block;
  width: 38px;
  height: 5px;
  margin-top: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--v31-orange), #ffc78c);
}

.taxable-base-row {
  margin: 8px -10px 0;
  padding: 12px 10px;
  border-radius: 14px;
  background: var(--v31-yellow);
}

.breakdown-total.green {
  background: linear-gradient(135deg, #e8f8ee, #f8fff9);
  border: 1px solid #bae5c8;
}

.notice-card {
  border: 1px solid #f0c79f;
  background: linear-gradient(135deg, #fff5eb, #fffaf4);
}

.notice-card svg {
  color: var(--v31-orange-dark);
}

.profile-section {
  border: 1px solid var(--v31-border);
  border-radius: 22px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.88);
}

.profile-section legend {
  padding: 0 8px;
  color: var(--v31-orange-dark);
  font-weight: 800;
}

.profile-warning {
  border-left: 5px solid var(--v31-orange);
  background: var(--v31-apricot);
  color: #6f3514;
}

.fiscal-case-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid #ffc48f;
  border-radius: 17px;
  background: linear-gradient(135deg, #fff0e5, #fffaf5);
}

.fiscal-case-card > small {
  display: block;
  line-height: 1.45;
  color: #81431b;
}

.profile-rate {
  background: #fff;
}

.primary-button,
.access-pricing a,
.subscription-manage {
  background: linear-gradient(135deg, #ff7a1a, #f45a00);
  box-shadow: 0 10px 22px rgba(255, 106, 0, 0.22);
}

.primary-button:active,
.access-pricing a:active,
.subscription-manage:active {
  transform: translateY(1px);
  box-shadow: 0 5px 12px rgba(255, 106, 0, 0.18);
}

.bottom-nav {
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  border-top-color: rgba(255, 106, 0, 0.18);
  background: rgba(255, 252, 249, 0.94);
  backdrop-filter: blur(20px);
}

.bottom-nav button.active {
  color: var(--v31-orange-dark);
  background: var(--v31-apricot);
}

.subscription-status,
.profile-proposal {
  border-color: rgba(255, 106, 0, 0.22);
  background: linear-gradient(135deg, #fff8f2, #fff);
}

@media (max-width: 520px) {
  .onboarding-shell,
  .access-shell {
    align-items: flex-start;
    padding: max(16px, env(safe-area-inset-top)) 12px max(24px, env(safe-area-inset-bottom));
  }

  .onboarding-card,
  .access-card {
    width: 100%;
    padding: 22px 18px;
    border-radius: 26px;
  }

  .profile-section {
    padding: 15px;
    border-radius: 18px;
  }

  .stepper-row {
    gap: 10px;
  }

  .breakdown-row {
    align-items: flex-start;
    gap: 12px;
  }

  .breakdown-row strong {
    text-align: right;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}