/* ══════════════════════════════════════════════════════════════════════════
   aRTy TAX — v2 shared styles
   Extracted from index.html so auth/dashboard pages match exactly.
   ══════════════════════════════════════════════════════════════════════════ */

@import url("motion.css");

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
  color: var(--color-text-primary, #1D1D1F);
  background: var(--color-bg-secondary, #F2F2F7);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }

/* ══════════════════════════════════════════════════════════════════════════
   FORM CONTROLS — single canonical system
   All inputs, textareas, and custom <select> share the same border, radius,
   padding, focus ring, and disabled state. White background, 8px radius
   (matches buttons), brand-red focus ring. Tokens with literal fallbacks so
   marketing pages render unchanged.

   Usage:
   - <select> auto-styles unless it has class="native-select" (opt-out)
   - <input type=text/email/password/number/tel/url/search/date/etc.> auto-styles
   - <textarea> auto-styles
   - .field can be applied for explicit opt-in (e.g. on a wrapper)
   - .has-error can be added for invalid state
   - Custom OTP/code inputs use their own .code-box / .code-input class
   ══════════════════════════════════════════════════════════════════════════ */
select:not(.native-select),
input[type="text"]:not(.code-box):not(.code-input),
input[type="email"],
input[type="password"],
input[type="number"]:not(.code-box),
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
.field {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  padding: 0 var(--space-4, 14px);
  border: 1px solid var(--color-border-default, #D1D1D6);
  border-radius: var(--radius-md, 8px);
  font-family: inherit;
  font-size: var(--text-subhead, 15px);
  line-height: 1.3;
  color: var(--color-text-primary, var(--color-text-primary, #1D1D1F));
  background-color: var(--color-bg-primary, #FFFFFF);
  transition: border-color var(--duration-micro, 150ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1)),
              box-shadow var(--duration-micro, 150ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1));
  outline: none;
}

/* textarea overrides: variable height, top-aligned padding */
textarea {
  height: auto;
  min-height: 88px;
  padding: var(--space-3, 12px) var(--space-4, 14px);
  resize: vertical;
}

/* select-specific: chevron and right padding for the indicator */
select:not(.native-select) {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E6E73' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}

/* Hover / focus / disabled / error states - shared across every form control */
select:not(.native-select):hover,
input[type="text"]:not(.code-box):not(.code-input):hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:not(.code-box):hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover,
textarea:hover,
.field:hover {
  border-color: var(--color-border-strong, var(--color-border-strong, #8E8E93));
}

select:not(.native-select):focus,
input[type="text"]:not(.code-box):not(.code-input):focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:not(.code-box):focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
.field:focus {
  border-color: var(--color-primary, var(--color-primary, #CB333B));
  box-shadow: 0 0 0 3px rgba(203, 51, 59, 0.15);
}

select:not(.native-select):disabled,
input:disabled,
textarea:disabled,
.field:disabled {
  opacity: var(--state-disabled-opacity, 0.5);
  cursor: not-allowed;
  background-color: var(--color-bg-secondary, #F5F5F7);
}

/* Error state - red border, subtle red background tint */
.has-error,
input.has-error,
select.has-error,
textarea.has-error,
.field.has-error {
  border-color: var(--color-destructive, var(--color-destructive, #FF3B30));
}
.has-error:focus,
input.has-error:focus,
select.has-error:focus,
textarea.has-error:focus,
.field.has-error:focus {
  border-color: var(--color-destructive, var(--color-destructive, #FF3B30));
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.15);
}

/* Placeholder - same muted tone everywhere */
input::placeholder,
textarea::placeholder,
.field::placeholder {
  color: var(--color-text-tertiary, #AEAEB2);
}

/* <option> styling is best-effort across browsers (popup is OS-native) */
select:not(.native-select) option {
  background: var(--color-bg-primary, #FFF);
  color: var(--color-text-primary, var(--color-text-primary, #1D1D1F));
  padding: 8px;
}

/* ── Layout ── */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   Single canonical system. All radii, colors, spacing, and motion come from
   tokens.css. Fallback values mirror the previous literals so marketing
   pages (which do not load tokens.css) keep their current rendering.
   Sizes:    .btn-sm 36px / .btn-md 44px / .btn-lg 52px
   Variants: .btn-primary (red brand) / .btn-dark / .btn-outline / .btn-white / .btn-ghost
   Modifier: .btn-full (100% width)
   ══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2, 8px);
  font-family: var(--font-sans, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
  font-weight: 600;
  border-radius: var(--radius-md, 8px);
  border: 0;
  cursor: pointer;
  transition: background var(--duration-micro, 150ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1)),
              color      var(--duration-micro, 150ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1)),
              border-color var(--duration-micro, 150ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1)),
              transform  var(--duration-micro, 150ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1)),
              box-shadow var(--duration-micro, 150ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1));
  white-space: nowrap;
  text-decoration: none;
}
.btn:active { transform: scale(0.97); }
.btn:disabled,
.btn[disabled] { opacity: var(--state-disabled-opacity, 0.4); cursor: not-allowed; transform: none; }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(203, 51, 59, 0.20);
}

.btn-lg { height: 52px; padding: 0 var(--space-6, 24px); font-size: var(--text-callout, 16px); }
.btn-md { height: 44px; padding: 0 var(--space-5, 20px); font-size: var(--text-subhead, 15px); }
.btn-sm { height: 36px; padding: 0 var(--space-4, 16px); font-size: var(--text-footnote, 13px); }

.btn-primary { background: var(--color-primary, var(--color-primary, #CB333B)); color: var(--color-text-inverse, #FFF); }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover, #AC2B32); }
.btn-primary:active:not(:disabled) { background: var(--color-primary-active, #8E2429); }

.btn-dark { background: var(--color-text-primary, var(--color-text-primary, #1D1D1F)); color: var(--color-text-inverse, #FFF); }
.btn-dark:hover:not(:disabled) { background: #000; }

.btn-outline {
  background: transparent;
  color: var(--color-text-primary, var(--color-text-primary, #1D1D1F));
  border: 1px solid var(--color-border-default, #D1D1D6);
}
.btn-outline:hover:not(:disabled) {
  border-color: var(--color-border-strong, var(--color-border-strong, #8E8E93));
  background: var(--state-hover-overlay, rgba(0,0,0,0.04));
}

.btn-white { background: var(--color-bg-primary, #FFF); color: var(--color-text-primary, var(--color-text-primary, #1D1D1F)); }
.btn-white:hover:not(:disabled) { background: var(--color-bg-secondary, #F2F2F7); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary, var(--color-text-secondary, #6E6E73));
  padding: var(--space-2, 6px) var(--space-3, 12px);
  font-size: var(--text-footnote, 14px);
  font-weight: 500;
}
.btn-ghost:hover:not(:disabled) { color: var(--color-text-primary, var(--color-text-primary, #1D1D1F)); background: var(--state-hover-overlay, rgba(0,0,0,0.04)); }

/* Destructive modifier: layered on top of any variant to flag a remove
   action. .btn .btn-outline.danger gets a red hover, .btn .btn-primary.danger
   becomes solid red instead of brand red (same hex today, room to diverge). */
.btn.danger { color: var(--color-destructive, var(--color-destructive, #FF3B30)); }
.btn-primary.danger { background: var(--color-destructive, var(--color-destructive, #FF3B30)); color: var(--color-text-inverse, #FFF); }
.btn-outline.danger { border-color: var(--color-destructive, var(--color-destructive, #FF3B30)); }
.btn-outline.danger:hover:not(:disabled) { background: rgba(255, 59, 48, 0.08); }

.btn-full { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
}
.badge-live   { background: rgba(52,199,89,0.12);  color: #34C759; }
.badge-dev    { background: rgba(46,139,139,0.12); color: #2E8B8B; }
.badge-addon  { background: #FEEBEE;               color: var(--color-primary, #CB333B); }
.badge-unique { background: var(--color-primary, #CB333B);               color: #FFF;    }
.badge-muted  { background: #F2F2F7;               color: var(--color-border-strong, #8E8E93); }

/* ══════════════════════════════════════════════════════════════════════════
   TOPBAR (morphs to pill on scroll — signature v2 element)
   ══════════════════════════════════════════════════════════════════════════ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--color-bg-secondary, #F2F2F7);
  border-bottom: 1px solid var(--color-border-default, #EAEAEA);
  transition: background 380ms cubic-bezier(0.32,0.72,0,1),
              border-color 380ms cubic-bezier(0.32,0.72,0,1),
              transform 420ms cubic-bezier(0.32,0.72,0,1),
              opacity 420ms cubic-bezier(0.32,0.72,0,1);
}
.topbar.topbar--hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.topbar.scrolled {
  background: transparent;
  border-bottom-color: transparent;
}
.topbar__inner {
  display: flex; align-items: center;
  max-width: 1200px; margin: 0 auto;
  height: 72px;
  padding: 0 32px; position: relative;
  border: 1px solid transparent;
  border-radius: 0;
  transition: height 380ms cubic-bezier(0.32,0.72,0,1),
              max-width 380ms cubic-bezier(0.32,0.72,0,1),
              margin-top 380ms cubic-bezier(0.32,0.72,0,1),
              padding 380ms cubic-bezier(0.32,0.72,0,1),
              border-radius 380ms cubic-bezier(0.32,0.72,0,1),
              border-color 380ms cubic-bezier(0.32,0.72,0,1),
              background 380ms cubic-bezier(0.32,0.72,0,1),
              box-shadow 380ms cubic-bezier(0.32,0.72,0,1);
}
.topbar.scrolled .topbar__inner {
  height: 48px;
  max-width: 860px;
  margin-top: 10px;
  padding: 0 20px;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
}

.topbar__logo {
  flex-shrink: 0; z-index: 1;
  display: flex; align-items: center;
  font-size: 17px; font-weight: 700; color: var(--color-text-primary, #1D1D1F);
  letter-spacing: -0.02em;
}
.topbar__logo img {
  height: 40px; width: auto; display: block;
  transition: height 380ms cubic-bezier(0.32,0.72,0,1);
}
.topbar.scrolled .topbar__logo img { height: 32px; }
.topbar__logo .rt  { color: var(--color-primary, #CB333B); }
.topbar__logo .tag {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #AEAEB2; vertical-align: super; margin-left: 2px;
}

.topbar__spacer { flex: 1; }

/* Middle slot used by tool pages to show module context
   ("Alphalist", "Summary List · 1601EQ", "Tax Certificates · 2307").
   Omitted entirely on shell pages. */
.topbar__crumb {
  font-family: var(--font-sans, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text-primary, #1D1D1F);
  letter-spacing: -0.02em;
  padding: 0 20px;
  margin-left: 18px;
  border-left: 1px solid #D1D1D6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 44vw;
  line-height: 1.1;
}
/* When the topbar compresses on scroll (height: 48px), scale the crumb down
   so it stays inside the pill without clipping the descender. */
.topbar.scrolled .topbar__crumb { font-size: 18px; padding: 0 14px; margin-left: 12px; }
@media (max-width: 640px) {
  .topbar__crumb { font-size: 18px; padding: 0 12px; margin-left: 10px; max-width: 40vw; }
}

.topbar__cta {
  display: flex; align-items: center; gap: 12px;
  margin-left: auto; z-index: 1;
}
.topbar__greeting {
  font-size: 14px; font-weight: 500; color: #4A4A4F;
  white-space: nowrap;
}
.topbar__login {
  font-size: 14px; font-weight: 500; color: var(--color-text-secondary, #6E6E73);
  padding: 6px 12px;
  transition: color 150ms;
}
.topbar__login:hover { color: var(--color-text-primary, #1D1D1F); }

@media (max-width: 640px) {
  .topbar__inner { padding: 0 20px; }
  .topbar__greeting { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE HERO (compact variant for dashboard/admin)
   ══════════════════════════════════════════════════════════════════════════ */
.page-hero {
  background: var(--color-bg-secondary, #F2F2F7);
  padding: 128px 0 56px;
}
.page-hero h1 {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700; color: var(--color-text-primary, #1D1D1F);
  letter-spacing: -0.02em; line-height: 1.02;
  margin-bottom: 12px;
}
.page-hero .lead {
  font-size: 17px; color: var(--color-text-secondary, #6E6E73);
  line-height: 1.6; max-width: 560px;
}

/* ══════════════════════════════════════════════════════════════════════════
   CARDS — single canonical shell
   .card                 default content card (16px radius, 20px padding)
   .card.card-compact    tight padding for dense layouts (16/20px)
   .card.card-feature    spacious for hero/featured tiles (24px padding)
   .card.card-bare       no padding (table-in-card or list-in-card)
   .card-interactive     adds hover lift (apply alongside .card)
   ══════════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--color-bg-primary, #FFF);
  border: 0;
  border-radius: var(--radius-xl, 16px);
  padding: var(--space-5, 20px);
  box-shadow: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, 0.08));
}
.card.card-compact { padding: var(--space-4, 16px) var(--space-5, 20px); }
.card.card-feature { padding: var(--space-6, 24px); }
.card.card-bare    { padding: 0; overflow: hidden; }

.card-interactive {
  display: block;
  transition: transform var(--duration-standard, 200ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1)),
              box-shadow var(--duration-standard, 200ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1)),
              border-color var(--duration-standard, 200ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1));
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-2, 0 4px 12px rgba(0, 0, 0, 0.10));
  border-color: var(--color-border-strong, #D1D1D6);
}

/* ══════════════════════════════════════════════════════════════════════════
   FORM FIELDS — layout helpers
   .field, select.field, and the shared input/textarea/select rules live
   in the FORM CONTROLS block at the top of the file. This block keeps
   only the layout containers and the checkbox row.
   ══════════════════════════════════════════════════════════════════════════ */
.field-group {
  display: flex; flex-direction: column; gap: var(--space-2, 6px);
}
.field-label {
  font-size: var(--text-caption-2, 11px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-border-strong, var(--color-border-strong, #8E8E93));
}

.checkbox-row {
  display: flex; align-items: center; gap: var(--space-2, 8px);
  font-size: var(--text-footnote, 14px);
  color: #4A4A4F;
}
.checkbox-row input { width: 16px; height: 16px; accent-color: var(--color-primary, var(--color-primary, #CB333B)); }

.inline-error {
  background: #FEEBEE;
  color: var(--color-primary, #CB333B);
  border-radius: var(--radius-md, 10px);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  display: none;
}
.inline-error.visible { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   REVEAL ANIMATION (IntersectionObserver-triggered)
   ══════════════════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms cubic-bezier(0.32,0.72,0,1),
              transform 600ms cubic-bezier(0.32,0.72,0,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLES (admin console)
   ══════════════════════════════════════════════════════════════════════════ */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #AEAEB2;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #E5E5E5;
}
.table td {
  padding: 14px 16px;
  border-bottom: 1px solid #EAEAEA;
  color: var(--color-text-primary, #1D1D1F);
}
.table tbody tr:hover { background: rgba(0,0,0,0.02); }
.table .muted { color: var(--color-border-strong, #8E8E93); font-size: 13px; }

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER (compact)
   ══════════════════════════════════════════════════════════════════════════ */
/* Full-height shell so the dark footer pins to the viewport bottom when the
   page body is shorter than the viewport. `margin-top: auto` on the footer
   consumes the remaining column space without forcing a specific gap. */
html { height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > .pub-footer { margin-top: auto; }

.pub-footer {
  background: var(--color-text-primary, #1D1D1F);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 40px 0 32px;
  color: #B8B8BD;
}
.pub-footer__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.pub-footer__brand {
  font-size: 15px; font-weight: 700; color: #F5F5F7;
  letter-spacing: -0.02em;
  display: flex; align-items: center;
}
.pub-footer__brand img {
  height: 22px; width: auto; display: block;
  /* Invert the dark-ink wordmark to near-white on the dark surface. */
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.pub-footer__brand .rt { color: #FF6B6B; }
.pub-footer__brand .tag {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-border-strong, #8E8E93); vertical-align: super; margin-left: 2px;
}
.pub-footer__copy { font-size: 13px; color: var(--color-border-strong, #8E8E93); }
.pub-footer__links { display: flex; gap: 18px; flex-wrap: wrap; }
.pub-footer__links a {
  font-size: 13px; color: #B8B8BD; text-decoration: none;
  transition: color var(--dur-micro, 120ms) var(--ease-standard, ease);
}
.pub-footer__links a:hover { color: #FFFFFF; }

/* ─── Taxpayer toggle (shared: signup, correction, entity edit) ─────────── */
.seg-control {
  display: flex; position: relative;
  background: #F5F5F7; border: 1px solid #E8E6E1;
  border-radius: var(--radius-md, 10px); padding: 3px;
  user-select: none; max-width: 420px;
}
.seg-control::before {
  content: ''; position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  background: #FFF; border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 0.5px 1.5px rgba(0,0,0,0.06);
  transition: transform .28s cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 0;
}
.seg-control.seg-right::before { transform: translateX(100%); }
.seg-option {
  flex: 1; padding: 10px 14px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--color-text-secondary, #6E6E73); text-align: center; cursor: pointer;
  background: transparent; border: none;
  position: relative; z-index: 1;
  transition: color .15s ease;
}
.seg-option:hover { color: var(--color-text-primary, #1D1D1F); }
.seg-option.selected { color: var(--color-primary, #CB333B); font-weight: 700; }
.seg-help { font-size: 12px; color: var(--color-text-secondary, #6E6E73); margin-top: 6px; line-height: 1.45; }
.tpt-indiv-block { grid-column: 1 / -1; }

/* ── Skeleton primitive ──────────────────────────────────────────────────
   Use for loading placeholders (QR codes, tiles, copy blocks). Subtle
   shimmer animation; honors prefers-reduced-motion via tokens.css rule.
   ───────────────────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary, #F2F2F7) 0%,
    var(--color-surface-elevated, #FFFFFF) 50%,
    var(--color-bg-secondary, #F2F2F7) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-md, 8px);
  display: block;
}
.skeleton--qr {
  width: 200px;
  height: 200px;
  border: 1px solid var(--color-border-default, #D1D1D6);
  border-radius: var(--radius-md, 8px);
}
.skeleton--text {
  height: 12px;
  width: 100%;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}